/* TechLevin landing page: layout and page-only pieces.
   Components (tl-btn, tl-service, tl-app, ...) live in components.css.
   Everything here uses tokens from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + var(--space-4)); -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; }
p { margin: 0; }
a { color: var(--brand-ink); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-4); top: -100px; background: var(--surface-raised); color: var(--ink); padding: var(--space-2) var(--space-4); border-radius: var(--radius-m); z-index: 100; }
.skip:focus { top: var(--space-2); }

/* ---------- Layout ---------- */
.container { max-width: calc(var(--container-max) + 2 * var(--space-4)); margin-inline: auto; padding-inline: var(--space-4); }
.section { padding-block: var(--space-8); }
.section--sunken { background: var(--surface-sunken); }
.section--tight { padding-block: var(--space-7); }
.section__head { display: grid; gap: var(--space-4); max-width: var(--measure); margin-bottom: var(--space-7); }
.section__head p { font-size: 19px; line-height: 30px; color: var(--ink-muted); max-width: 60ch; }
.grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .container { max-width: calc(var(--container-max) + 2 * var(--space-6)); padding-inline: var(--space-6); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .section { padding-block: var(--space-9); }
  .section--tight { padding-block: var(--space-8); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Logo (inline Spark bolt + typed wordmark) ---------- */
.tl-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); --logo-bolt: #0E7C57; --logo-foot: var(--ink); --logo-levin: var(--brand-ink); }
.tl-logo svg { width: 32px; height: 32px; flex: none; }
.tl-logo .bolt { fill: var(--logo-bolt); }
.tl-logo .foot { fill: var(--logo-foot); }
.tl-logo .tl-wordmark { color: inherit; font-size: 23px; line-height: 1; }
.tl-logo .tl-wordmark i { color: var(--logo-levin); }
.tl-logo--night, :root[data-theme="dark"] .tl-logo { color: #E8F1EA; --logo-bolt: #E8F1EA; --logo-foot: var(--lime); --logo-levin: var(--lime); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tl-logo { color: #E8F1EA; --logo-bolt: #E8F1EA; --logo-foot: var(--lime); --logo-levin: var(--lime); }
}
.tl-logo--blink .foot { animation: tl-blink 1s steps(1) infinite; }
@keyframes tl-blink { 0%, 54% { opacity: 1; } 55%, 100% { opacity: 0; } }

/* ---------- Header ---------- */
.tl-header { position: sticky; top: 0; z-index: 50; }
.tl-header__inner { padding-inline: var(--space-4); gap: var(--space-5); max-width: calc(var(--container-max) + 2 * var(--space-4)); }
.tl-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.tl-nav { margin-right: 0; margin-left: var(--space-5); }
.tl-nav a { padding: var(--space-2) 0; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 0; border-radius: var(--radius-m); color: var(--ink-muted); cursor: pointer; }
.icon-btn:hover { color: var(--ink); background: var(--surface-sunken); }
.icon-btn .icon { width: 20px; height: 20px; }
.theme-toggle .icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon--sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon--moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon--sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon--moon { display: none; }
}
.menu-toggle .icon--close, .menu-open .menu-toggle .icon--menu { display: none; }
.menu-open .menu-toggle .icon--close { display: block; }
.tl-header__cta { display: none; }
@media (max-width: 899px) {
  .tl-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; flex-direction: column; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--space-2) var(--space-4) var(--space-5); box-shadow: var(--shadow-2); }
  .menu-open .tl-nav { display: flex; }
  .tl-nav a { padding: var(--space-3) 0; font-size: 17px; border-bottom: 1px solid var(--line); }
  .tl-nav .tl-btn { margin-top: var(--space-4); border-bottom: 0; color: var(--on-brand); font-size: 16px; }
}
@media (min-width: 480px) { .tl-header__cta { display: inline-flex; } .tl-nav .tl-btn { display: none; } }
@media (min-width: 640px) { .tl-header__inner { padding-inline: var(--space-6); max-width: calc(var(--container-max) + 2 * var(--space-6)); } }
@media (min-width: 900px) { .menu-toggle { display: none; } .tl-nav .tl-btn { display: none; } }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-7) var(--space-8); }
.hero__grid { display: grid; gap: var(--space-7); align-items: center; grid-template-columns: minmax(0, 1fr); }
.hero__copy { display: grid; gap: var(--space-5); justify-items: start; }
.hero__chip { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); background: var(--brand-tint); border-radius: var(--radius-pill); padding: 6px 12px; }
.hero__chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6vw, 64px); line-height: 1.06; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--brand-ink); }
.hero__intro { font-size: 19px; line-height: 30px; color: var(--ink-muted); max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.ticks { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: var(--space-2) var(--space-5); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.ticks li { display: flex; align-items: center; gap: var(--space-2); }
.ticks .icon { color: var(--brand-ink); width: 16px; height: 16px; stroke-width: 2.4; }
@media (min-width: 1024px) {
  .hero { padding-block: var(--space-9); }
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-8); }
}

/* ---------- Product mocks (stand-ins until real screenshots) ---------- */
.night-frame { background-color: var(--night); color: var(--on-night); border-radius: var(--radius-l); position: relative; overflow: hidden; background-image: radial-gradient(color-mix(in srgb, var(--on-night) 13%, transparent) 1px, transparent 1.5px); background-size: 24px 24px; }
.mock { --m-bg: #FFFFFF; --m-ink: #0D1F17; --m-muted: #5A6B62; --m-line: #DDE6DF; --m-tint: #E2F2E8; --m-green: #0E7C57; }
.mock .pay, .mock .phone__screen { font-family: var(--font-body); color: var(--m-ink); }

.hero-visual { padding: var(--space-5); box-shadow: var(--shadow-2); display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: var(--space-4); align-items: end; min-height: 380px; }
.hero-visual::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: var(--lime); right: -70px; top: -90px; opacity: .95; }
.hero-visual__stack { display: grid; gap: var(--space-4); align-self: center; position: relative; z-index: 1; }
.hero-visual .phone { position: relative; z-index: 1; margin-bottom: calc(-1 * var(--space-5) - 30px); }
@media (min-width: 640px) { .hero-visual { padding: var(--space-6); grid-template-columns: minmax(0, 1fr) 200px; gap: var(--space-5); min-height: 460px; } .hero-visual .phone { margin-bottom: calc(-1 * var(--space-6) - 40px); } }

.term { background: color-mix(in srgb, var(--on-night) 6%, var(--night)); border: 1px solid color-mix(in srgb, var(--on-night) 16%, transparent); border-radius: var(--radius-m); font-family: var(--font-mono); font-size: 12px; line-height: 21px; color: var(--on-night-muted); overflow: hidden; }
.term__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid color-mix(in srgb, var(--on-night) 12%, transparent); font-size: 11px; line-height: 14px; }
.term__bar i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--on-night) 24%, transparent); }
.term__bar span { margin-left: 6px; }
.term__body { padding: 12px 14px 14px; display: grid; white-space: nowrap; overflow: hidden; }
.term__body b { font-weight: 500; color: var(--on-night); }
.term__body .ok { color: var(--lime); }
.term__cursor { display: inline-block; width: 7px; height: 14px; background: var(--lime); vertical-align: -2px; margin-left: 4px; animation: tl-blink 1s steps(1) infinite; }
@media (min-width: 640px) { .term { font-size: 13px; line-height: 23px; } }

.pay { background: var(--m-bg); border-radius: var(--radius-m); padding: 14px; display: grid; gap: 8px; font-size: 13px; line-height: 18px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); }
.pay__title { font-weight: 700; font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pay__title span { font-family: var(--font-mono); font-weight: 400; font-size: 11px; color: var(--m-muted); }
.pay__row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--m-line); border-radius: 8px; padding: 9px 10px; min-width: 0; }
.pay__row::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #9FB0A6; flex: none; }
.pay__row--on { border-color: var(--m-green); background: #F3FAF6; font-weight: 600; }
.pay__row--on::before { border: 4.5px solid var(--m-green); }
.pay__row em { font-style: normal; margin-left: auto; font-size: 11px; line-height: 16px; font-weight: 600; color: #0A5E42; background: var(--m-tint); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.pay__row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.phone { width: 100%; background: #16261E; border: 1px solid #2E4438; border-radius: 28px; padding: 7px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7); }
.phone__screen { background: var(--m-bg); border-radius: 22px; overflow: hidden; display: grid; gap: 10px; padding: 12px 10px 14px; font-size: 11px; line-height: 15px; }
.phone__top { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 12px; padding-inline: 2px; }
.phone__top .icon { width: 15px; height: 15px; }
.phone__push { background: #0D1F17; color: #F2F7F1; border-radius: 12px; padding: 8px 10px; display: grid; gap: 1px; }
.phone__push small { font-family: var(--font-mono); font-size: 9px; line-height: 12px; color: #A6D84A; letter-spacing: .06em; text-transform: uppercase; }
.phone__banner { background: var(--m-green); color: #fff; border-radius: 12px; padding: 12px 10px; font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 17px; }
.phone__banner small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 10px; opacity: .85; margin-top: 2px; }
.phone__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.phone__item { display: grid; gap: 3px; color: var(--m-muted); }
.phone__item::before { content: ""; aspect-ratio: 1 / 1.05; border-radius: 10px; background: var(--m-tint); }
.phone__item:nth-child(2)::before { background: #EDF2EC; }
.phone__item:nth-child(3)::before { background: #E9F3C9; }
.phone__item:nth-child(4)::before { background: #D9ECE2; }
.phone__item b { color: var(--m-ink); font-weight: 600; }
/* When the frame is narrow (phones, small laptops) the terminal goes full width and the phone sits under it. */
.hero__visual { container-type: inline-size; min-width: 0; }
@container (max-width: 499px) { .hero-visual .pay { display: none; } .hero-visual { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .hero-visual .phone { width: 200px; justify-self: center; margin-bottom: -150px; } }

/* ---------- Apps ---------- */
.apps { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .apps { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.tl-app { box-shadow: var(--shadow-1); }
.tl-app__visual { background-image: radial-gradient(color-mix(in srgb, var(--on-night) 13%, transparent) 1px, transparent 1.5px); background-size: 24px 24px; min-height: 280px; display: grid; }
.tl-app__eyebrow { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.tl-app__promise { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.18; letter-spacing: -.015em; margin: var(--space-2) 0 0; max-width: 15ch; text-wrap: balance; }
.tl-app__body p { color: var(--ink-muted); }
.tl-app__name { margin-right: auto; }
.app-visual--mobicart { grid-template-columns: minmax(0, 1fr) 150px; gap: var(--space-4); padding-bottom: 0; align-items: start; }
.app-visual--mobicart .phone { align-self: end; margin-bottom: -70px; }
.app-visual--mobicart::after { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; background: var(--lime); left: -50px; bottom: -70px; }
@media (max-width: 639px) { .app-visual--mobicart { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .app-visual--mobicart .phone { width: 180px; justify-self: end; margin-bottom: -60px; } .app-visual--mobicart::after { width: 130px; height: 130px; } .tl-app__promise { max-width: 18ch; } }
.app-visual--paydesign { gap: var(--space-5); align-content: space-between; }
@media (min-width: 1024px) { .app-visual--mobicart { grid-template-columns: minmax(0, 1fr) 190px; } }

/* ---------- Stats ---------- */
.tl-stat__num small { font-size: .5em; letter-spacing: -.01em; margin-left: 2px; }
@media (max-width: 719px) { .tl-stats { grid-template-columns: 1fr 1fr; } .tl-stat { border-left: 0; border-top: 1px solid var(--line); padding: var(--space-5); } .tl-stat:nth-child(even) { border-left: 1px solid var(--line); } .tl-stat:nth-child(-n+2) { border-top: 0; } .tl-stat__num { font-size: 40px; line-height: 44px; } }

/* ---------- Process ---------- */
.tl-steps { row-gap: var(--space-7); }
.tl-step h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 26px; margin: 0; }

/* ---------- Tech stack ---------- */
.stack { display: grid; gap: var(--space-7); align-items: start; }
.stack .section__head { margin-bottom: 0; }
.stack__groups { display: grid; gap: var(--space-5); }
.stack__group { display: grid; gap: var(--space-3); }
.stack__group h3 { font-family: var(--font-body); font-size: 14px; line-height: 22px; font-weight: 600; color: var(--ink-muted); margin: 0; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tags li { font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 5px 10px; }
@media (min-width: 1024px) { .stack { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-8); } }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; gap: var(--space-7); }
.faq-layout .section__head { margin-bottom: 0; align-content: start; }
@media (min-width: 1024px) { .faq-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-8); } }

/* ---------- CTA band ---------- */
.cta-wrap { padding-block: 0 var(--space-8); }
.tl-cta .tl-eyebrow { color: var(--lime); }
.tl-cta::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: var(--lime); right: -90px; bottom: -150px; }
.tl-cta > * { position: relative; z-index: 1; }
.tl-cta__email { color: var(--on-night); font-family: var(--font-mono); font-size: 15px; text-underline-offset: 4px; padding: var(--space-3) var(--space-2); }
.tl-cta__note { font-size: 14px; line-height: 22px; }
@media (max-width: 767px) { .tl-cta::after { width: 200px; height: 200px; right: -110px; bottom: -130px; } }
@media (min-width: 768px) { .tl-cta { padding: var(--space-9) var(--space-8); } .cta-wrap { padding-bottom: var(--space-9); } }

/* ---------- Footer ---------- */
.footer { background: var(--night); color: var(--on-night-muted); padding-block: var(--space-8) var(--space-6); font-size: 15px; line-height: 24px; }
.footer__grid { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1fr); }
.footer__brand { display: grid; gap: var(--space-4); justify-items: start; align-content: start; max-width: 36ch; }
.footer__cols { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer h2 { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 24px; color: var(--on-night); margin: 0 0 var(--space-3); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer a { color: var(--on-night-muted); text-decoration: none; }
.footer .tl-logo, .footer .tl-logo:hover { color: #E8F1EA; text-decoration: none; }
.footer a:hover { color: var(--on-night); text-decoration: underline; text-underline-offset: 4px; }
.footer__bottom { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid color-mix(in srgb, var(--on-night) 14%, transparent); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: space-between; font-size: 14px; line-height: 22px; }
.footer__bottom span:last-child { font-family: var(--font-mono); font-size: 12px; }
@media (min-width: 640px) { .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-8); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tl-logo--blink .foot, .term__cursor { animation: none; }
}

/* Night panels get a hairline so they stay visible on the dark theme's near-black page. */
.night-frame, .tl-cta { border: 1px solid color-mix(in srgb, var(--on-night) 10%, transparent); }