/* ============================================================
   Stratus — Website (overhaul, on CloudPath tokens)
   Bold · editorial · live. Dark mode via [data-theme="dark"].
   ============================================================ */

:root {
  /* ---------- Type families (CloudPath) ---------- */
  /* ---------- Type families · Signal v2.0 (serif retired) ---------- */
  --sans:  "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;   /* historical key — now the display grotesk */
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --system: -apple-system, BlinkMacSystemFont, "Hanken Grotesk", system-ui, sans-serif;

  /* ---------- CloudPath raw ---------- */
  /* Signal v2.0 (from app Tokens.swift). Var names kept; values are the current brand. */
  --c-ink-900:#070A0F; --c-ink-800:#11151D; --c-ink-750:#1A1F29;
  --c-ink-700:#232A35; --c-ink-500:#586173; --c-ink-400:#98A2B3; --c-ink-200:#C2C9D4;
  --c-fog-50:#FFFFFF; --c-fog-100:#EEF1F6; --c-fog-200:#DCE2EB; --c-fog-400:#C7CFDB;
  --c-paper:#F4F1EC;                /* warm off-white — on-dark text */
  --c-twilight:#007B96; --c-twilight-deep:#00637A; --c-twilight-light:#34C6E4;
  --c-twilight-wash-l:#E2F3F7; --c-twilight-wash-d:#07303B;
  --c-sand:#E8DCC4; --c-sand-soft:#F2EBDB;
  --glow: rgba(52,198,228,.18);

  /* ---------- Semantic · LIGHT ---------- */
  --surface:        var(--c-fog-100);
  --surface-raised: var(--c-fog-50);
  --surface-sunken: var(--c-fog-200);
  --text:       var(--c-ink-900);
  --text-muted: var(--c-ink-500);
  --text-faint: var(--c-ink-400);
  --text-on-accent: var(--c-paper);
  --border:        var(--c-fog-200);
  --border-strong: var(--c-ink-900);
  --divider:       var(--c-fog-400);
  --accent:        var(--c-twilight);
  --accent-hover:  var(--c-twilight-deep);
  --accent-subtle: var(--c-twilight-wash-l);
  --accent-text:   var(--c-twilight);
  --warm:      var(--c-sand);
  --warm-soft: var(--c-sand-soft);
  --ink-band:  #070A0F;   /* dark full-bleed band bg */
  --on-band:   var(--c-paper);

  --elev-1: 0 1px 2px rgba(7,10,15,.04);
  --elev-2: 0 2px 8px rgba(7,10,15,.05);
  --elev-3: 0 8px 26px rgba(7,10,15,.07);
  --focus-ring: 0 0 0 3px rgba(0,123,150,.35);

  /* ---------- CTA / line palette (Stratus data) ---------- */
  --red:#C60C30; --blue:#00A1DE; --brown:#62361B; --green:#009B3A;
  --orange:#F9461C; --purple:#522398; --pink:#E27EA6; --yellow:#F9E300;
  --alert:#FF8A00;
  /* catchability (app departure tiers) */
  --success:#00A86B; --warning:#FF8A00; --danger:#FF3340;

  /* ---------- Layout ---------- */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --section-y: clamp(88px, 13vw, 176px);
  --r-sm:4px; --r-md:10px; --r-lg:14px; --r-xl:28px; --r-pill:9999px;

  --ease: cubic-bezier(.2,.7,.3,1);
}

[data-theme="dark"] {
  --surface:        var(--c-ink-900);
  --surface-raised: var(--c-ink-800);
  --surface-sunken: #0A0D11;
  --text:       var(--c-paper);
  --text-muted: var(--c-ink-400);
  --text-faint: var(--c-ink-500);
  --text-on-accent: var(--c-ink-900);
  --border:        var(--c-ink-750);
  --border-strong: var(--c-paper);
  --divider:       var(--c-ink-500);
  --accent:        var(--c-twilight-light);
  --accent-hover:  #5FD6EE;
  --glow: rgba(52,198,228,.22);
  --accent-subtle: var(--c-twilight-wash-d);
  --accent-text:   var(--c-twilight-light);
  --warm:      #2A2316;
  --warm-soft: #1C1710;
  --success:#2FD18C; --warning:#FFA740; --danger:#FF6B73;
  --ink-band:  #040609;
  --on-band:   var(--c-paper);
  --elev-1: 0 1px 2px rgba(0,0,0,.4);
  --elev-2: 0 2px 8px rgba(0,0,0,.45);
  --elev-3: 0 8px 26px rgba(0,0,0,.5);
  --focus-ring: 0 0 0 3px rgba(52,198,228,.4);
}

/* ============================================================ BASE */
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background:var(--surface);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px; line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  transition:background .3s ease, color .3s ease;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
em { font-style:italic; }
:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:4px; }

/* ============================================================ PRIMITIVES */
.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-muted); margin:0;
}
.eyebrow--inv { color:rgba(244,241,236,.66); }
.eyebrow__dot {
  width:7px; height:7px; border-radius:99px; background:var(--red);
}
.eyebrow__num { color:var(--text); letter-spacing:.08em; }
@keyframes pulse {
  0%   { box-shadow:0 0 0 0 rgba(198,12,48,.5); }
  70%  { box-shadow:0 0 0 8px rgba(198,12,48,0); }
  100% { box-shadow:0 0 0 0 rgba(198,12,48,0); }
}

.section-head { max-width:var(--maxw); margin-inline:auto; }
.section-h {
  font-family:var(--sans); font-weight:600;
  font-size:clamp(34px,5vw,60px); line-height:1.04;
  letter-spacing:-.025em; margin:18px 0 0;
  color:var(--text); max-width:18ch; text-wrap:balance;
}
.section-h em { font-family:var(--sans); font-style:normal; font-weight:400; color:var(--text); letter-spacing:-.01em; }
.section-sub {
  font-size:clamp(17px,1.4vw,20px); line-height:1.55;
  color:var(--text-muted); max-width:54ch; margin:22px 0 0;
}

/* Buttons — CloudPath 10px radius */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:600; font-size:15px; line-height:1;
  height:50px; padding:0 22px; border-radius:var(--r-md);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .16s, color .16s, border-color .16s, transform .16s var(--ease), box-shadow .16s;
}
.btn:active { transform:translateY(1px); }
.btn--lg { height:58px; padding:0 30px; font-size:16px; }
.btn--primary { background:var(--accent); color:var(--text-on-accent); }
.btn--primary:hover { background:var(--accent-hover); box-shadow:var(--elev-2); }
.btn--secondary { background:var(--surface-raised); color:var(--text); border-color:var(--border); }
.btn--secondary:hover { background:var(--accent-subtle); border-color:transparent; }
.btn--ghost { background:transparent; color:var(--accent-text); }
.btn--ghost:hover { background:var(--accent-subtle); }
.btn--on-band { background:var(--on-band); color:var(--c-ink-900); }
.btn--on-band:hover { background:#fff; box-shadow:0 8px 28px rgba(0,0,0,.3); }
.btn--ghost-band { background:transparent; color:rgba(244,241,236,.85); border-color:rgba(244,241,236,.22); }
.btn--ghost-band:hover { color:#fff; border-color:rgba(244,241,236,.6); background:rgba(244,241,236,.06); }

/* Apple App Store badge — official artwork, sized by height (aspect locked ~2.99:1) */
.appstore-link { display:inline-flex; align-items:center; transition:transform .16s var(--ease); }
.appstore-link:active { transform:translateY(1px); }
.appstore-badge { display:block; height:52px; width:auto; }
.appstore-badge--lg { height:58px; }

/* Line chips */
.line {
  display:inline-flex; align-items:center; justify-content:center;
  height:26px; padding:0 10px; border-radius:6px;
  font-family:var(--system); font-size:12.5px; font-weight:700; letter-spacing:.01em;
  color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0;
}
.line--red{background:var(--red)} .line--blue{background:var(--blue)}
.line--brown{background:var(--brown)} .line--green{background:var(--green)}
.line--orange{background:var(--orange)} .line--purple{background:var(--purple)}
.line--pink{background:var(--pink);color:#1a1a1a} .line--yellow{background:var(--yellow);color:#1a1a1a}
.line--bus{background:var(--c-ink-800);color:#fff}
[data-theme="dark"] .line--bus{background:var(--c-ink-700)}

/* Reveal-on-scroll */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"]{transition-delay:.07s} .reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s} .reveal[data-d="4"]{transition-delay:.28s}
.reveal[data-d="5"]{transition-delay:.35s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .eyebrow__dot{animation:none}
}

/* Spectrum bar — the 8 Stratus line colors as a brand device */
.spectrum { display:flex; width:100%; height:6px; overflow:hidden; }
.spectrum span { flex:1; transform:scaleX(0); transform-origin:center; }
.spectrum.in span { animation:spectrumIn .7s var(--ease) forwards; }
/* paired-wave order from the app animation: blue/red, brown/orange, purple/green, pink/yellow */
.spectrum span:nth-child(1),.spectrum span:nth-child(5){ animation-delay:.05s; }
.spectrum span:nth-child(2),.spectrum span:nth-child(6){ animation-delay:.18s; }
.spectrum span:nth-child(3),.spectrum span:nth-child(7){ animation-delay:.31s; }
.spectrum span:nth-child(4),.spectrum span:nth-child(8){ animation-delay:.44s; }
@keyframes spectrumIn { to{ transform:scaleX(1); } }
@media (prefers-reduced-motion:reduce){ .spectrum span{ transform:scaleX(1); animation:none; } }
.spectrum--tall { height:10px; }
.sp-blue{background:var(--blue)} .sp-brown{background:var(--brown)} .sp-purple{background:var(--purple)}
.sp-pink{background:var(--pink)} .sp-red{background:var(--red)} .sp-orange{background:var(--orange)}
.sp-green{background:var(--green)} .sp-yellow{background:var(--yellow)}

/* ============================================================ NAV */
.nav {
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--gutter);
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--border);
}
.nav__brand { display:flex; align-items:center; gap:11px; font-weight:600; font-size:18px; letter-spacing:-.01em; color:var(--text); }
.nav__icon { width:30px; height:30px; border-radius:8px; }
.nav__icon--dark { display:none; }
[data-theme="dark"] .nav__icon--light { display:none; }
[data-theme="dark"] .nav__icon--dark { display:block; }
.nav__links { display:flex; align-items:center; gap:4px; }
.nav__links a { padding:9px 15px; border-radius:var(--r-md); font-size:14.5px; font-weight:500; color:var(--text-muted); transition:background .16s, color .16s; white-space:nowrap; }
.nav__links a:hover { color:var(--text); background:var(--surface-sunken); }
.nav__cta { background:var(--accent); color:var(--text-on-accent)!important; margin-left:8px; }
.nav__cta:hover { background:var(--accent-hover)!important; }

/* ============================================================ HERO */
.hero {
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(56px,8vw,108px) var(--gutter) clamp(40px,5vw,64px);
  display:grid; grid-template-columns:1.04fr .96fr;
  gap:clamp(36px,5vw,80px); align-items:center;
}
.hero__copy { max-width:600px; }
.hero__eyebrow { margin-bottom:30px; }
.hero__h {
  margin:0 0 30px; color:var(--text);
  font-weight:600; letter-spacing:-.03em; line-height:.92;
  font-size:clamp(60px,9.2vw,128px);
}
.hero__line { display:block; }
.hero__line--ital { font-family:var(--sans); font-weight:400; font-style:normal; color:var(--text); text-wrap:balance; }
.hero__sub { font-size:clamp(17px,1.45vw,20px); line-height:1.55; color:var(--text-muted); max-width:46ch; margin:0 0 34px; }
.hero__cta { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.hero__meta { font-size:13px; color:var(--text-faint); margin:0; font-family:var(--mono); letter-spacing:.02em; }

/* live app board */
.hero__board { position:relative; }
.app {
  background:var(--surface-raised); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:22px 16px 20px; position:relative; overflow:hidden;
  box-shadow:var(--elev-3); font-family:var(--system);
  transform:perspective(1600px) rotateY(-4deg) rotateX(1.5deg);
  transition:transform .6s var(--ease);
}
.hero__board:hover .app { transform:perspective(1600px) rotateY(0) rotateX(0); }
.app__head { display:flex; align-items:center; justify-content:space-between; padding:0 8px 16px; }
.app__head h3 { font-family:var(--system); font-weight:700; font-size:25px; letter-spacing:-.02em; margin:0; color:var(--text); }
.app__head-cluster { display:flex; align-items:center; gap:3px; background:color-mix(in srgb,var(--text-faint) 18%,transparent); border-radius:99px; padding:4px; }
.app__head-btn { width:29px; height:29px; border-radius:99px; display:grid; place-items:center; color:var(--text-muted); }
.app__head-btn:nth-child(2){ background:color-mix(in srgb,var(--text) 8%,transparent); color:var(--text); }
.app__alert {
  margin:0 8px 16px; padding:10px 14px; background:var(--alert); color:#fff;
  border-radius:99px; display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:600; letter-spacing:-.005em;
}
.app__alert-icon { width:22px; height:22px; border-radius:99px; background:rgba(255,255,255,.2); display:grid; place-items:center; flex-shrink:0; }
.app__alert-chev { margin-left:auto; font-size:18px; opacity:.75; }
.app__section-h { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-faint); margin:6px 12px 8px; }
.app__rows { display:flex; flex-direction:column; gap:9px; padding:0 4px; }

.app-row {
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center;
  padding:10px 14px 10px 13px; background:color-mix(in srgb,var(--text-faint) 13%,transparent);
  border-radius:14px; overflow:hidden;
}
.app-row__edge { position:absolute; left:0; top:8px; bottom:8px; width:4px; border-radius:0 4px 4px 0; }
.app-row__edge--green{background:var(--green)} .app-row__edge--pink{background:var(--pink)}
.app-row__edge--purple{background:var(--purple)} .app-row__edge--blue{background:var(--blue)}
.app-row--filled { grid-template-columns:1fr; color:#fff; padding:12px 16px; }
.app-row--red{background:var(--red)} .app-row--green{background:var(--green)} .app-row--blue{background:var(--blue)}
.app-row__main { display:flex; flex-direction:column; gap:4px; min-width:0; }
.app-row__top,.app-row__bot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.app-row__name { font-weight:700; font-size:16px; letter-spacing:-.015em; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-row--filled .app-row__name { color:#fff; }
.app-row__icons { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--text-muted); flex-shrink:0; }
.app-row--filled .app-row__icons { color:rgba(255,255,255,.85); }
.app-row__walk { font-variant-numeric:tabular-nums; font-weight:600; }
.app-row__sub { font-size:12.5px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-row--filled .app-row__sub { color:rgba(255,255,255,.85); }
.app-row__sub em { font-style:normal; color:var(--text-muted); font-weight:600; }
.app-row--filled .app-row__sub em { color:rgba(255,255,255,.95); }
.app-row__times { font-weight:700; font-size:14px; font-variant-numeric:tabular-nums; color:var(--text); letter-spacing:-.005em; flex-shrink:0; }
.app-row--filled .app-row__times { color:#fff; }
.app-row__times small { font-size:11px; font-weight:600; margin-left:2px; color:var(--text-faint); letter-spacing:0; }
.app-row--filled .app-row__times small { color:rgba(255,255,255,.75); }
.tick { display:inline-block; transition:color .3s; }
.tick--bump { animation:bump .45s var(--ease); }
@keyframes bump { 0%{ transform:translateY(-3px); opacity:.3 } 100%{ transform:none; opacity:1 } }

.route {
  display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:28px; padding:0 8px;
  border-radius:8px; background:var(--surface); border:1px solid var(--border);
  font-family:var(--system); font-size:13px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; flex-shrink:0;
}
.app__fab {
  margin:14px auto 0; padding:11px 22px 11px 18px; background:var(--accent); color:var(--text-on-accent);
  border-radius:99px; font-size:14px; font-weight:600; letter-spacing:-.005em;
  display:flex; align-items:center; gap:8px; width:max-content;
}
.app__fab-icon { width:22px; height:22px; border-radius:99px; background:rgba(255,255,255,.16); display:grid; place-items:center; }
[data-theme="dark"] .app__fab-icon { background:rgba(0,0,0,.18); }

/* ============================================================ LIVE TICKER BAND */
.ticker {
  background:var(--ink-band); color:var(--on-band);
  padding:18px 0; overflow:hidden; position:relative;
  border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06);
}
.ticker::before,.ticker::after {
  content:""; position:absolute; top:0; bottom:0; width:14vw; z-index:2; pointer-events:none;
}
.ticker::before { left:0; background:linear-gradient(90deg,var(--ink-band),transparent); }
.ticker::after { right:0; background:linear-gradient(270deg,var(--ink-band),transparent); }
.ticker__track {
  display:flex; align-items:center; gap:14px; width:max-content;
  animation:marquee 46s linear infinite;
}
.ticker__track--rev { animation-direction:reverse; animation-duration:54s; margin-top:14px; }
.ticker:hover .ticker__track { animation-play-state:paused; }
@keyframes marquee { from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .ticker__track{ animation:none } .ticker__track--rev{ display:none } }
.tk {
  display:inline-flex; align-items:center; gap:10px; flex-shrink:0;
  padding:8px 16px 8px 10px; border-radius:99px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  font-family:var(--system); white-space:nowrap;
}
.tk__name { font-size:14px; font-weight:600; letter-spacing:-.005em; color:var(--on-band); }
.tk__dest { font-size:12.5px; color:rgba(244,241,236,.55); }
.tk__t { font-family:var(--mono); font-size:13px; font-weight:600; color:var(--c-twilight-light); letter-spacing:.02em; }
.tk__sep { color:rgba(244,241,236,.3); }

/* ============================================================ PRIVACY (dark band) */
.privacy {
  background:var(--ink-band); color:var(--on-band);
  padding:var(--section-y) var(--gutter);
  position:relative; overflow:hidden;
}
.privacy::after {
  content:""; position:absolute; right:-12%; top:-20%; width:55%; height:140%;
  background:radial-gradient(closest-side, rgba(95,168,196,.16), transparent 72%); pointer-events:none;
}
.privacy__inner { max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,96px); align-items:center; position:relative; }
.privacy__copy { max-width:560px; }
.privacy__h {
  font-family:var(--sans); font-weight:600; font-size:clamp(36px,5.2vw,64px);
  line-height:1.03; letter-spacing:-.025em; margin:20px 0 0; color:var(--on-band); text-wrap:balance;
}
.privacy__h em { font-family:var(--sans); font-style:normal; font-weight:400; color:var(--on-band); }
.privacy__sub { font-size:clamp(17px,1.4vw,20px); line-height:1.55; color:rgba(244,241,236,.7); max-width:48ch; margin:22px 0 0; }
.privacy__list { list-style:none; padding:0; margin:38px 0 0; display:flex; flex-direction:column; gap:4px; }
.privacy__list li { display:grid; grid-template-columns:30px 1fr; gap:15px; align-items:start; padding:16px 0; border-top:1px solid rgba(255,255,255,.1); }
.privacy__list li:first-child { border-top:0; }
.privacy__list strong { font-weight:600; color:var(--on-band); }
.privacy__list li > div { font-size:15.5px; line-height:1.55; color:rgba(244,241,236,.66); }
.privacy__bullet { width:30px; height:30px; border-radius:99px; background:rgba(95,168,196,.16); color:var(--c-twilight-light); display:grid; place-items:center; flex-shrink:0; margin-top:1px; }

.privacy__diagram { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); padding:28px; position:relative; box-shadow:var(--elev-3); }
.privacy__phone { display:flex; justify-content:center; }
.privacy__phone .device { width:300px; background:linear-gradient(150deg,#2b3038,#06080b 60%); box-shadow:0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08) inset; transform:perspective(1600px) rotateY(5deg) rotateX(1.5deg); transition:transform .6s var(--ease); }
.privacy__phone:hover .device { transform:perspective(1600px) rotateY(0) rotateX(0); }
.privacy__diagram-h { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,241,236,.55); display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.privacy__diagram-num { color:var(--c-twilight-light); }
.privacy__diag { display:flex; flex-direction:column; gap:8px; }
.privacy__node { display:grid; grid-template-columns:44px 1fr; align-items:center; gap:14px; padding:15px 16px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.privacy__node--cta { background:rgba(95,168,196,.1); border-color:rgba(95,168,196,.3); }
.privacy__node-icon { width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,.06); display:grid; place-items:center; color:rgba(244,241,236,.8); flex-shrink:0; }
.privacy__node--cta .privacy__node-icon { background:var(--c-twilight-light); color:var(--c-ink-900); }
.privacy__node-meta { display:flex; flex-direction:column; gap:2px; min-width:0; }
.privacy__node-meta strong { font-weight:600; font-size:14px; color:var(--on-band); letter-spacing:-.005em; }
.privacy__node-meta span { font-size:12px; color:rgba(244,241,236,.55); }
.privacy__arrow { display:flex; align-items:center; gap:10px; padding:4px 16px 4px 60px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:rgba(244,241,236,.5); }
.privacy__arrow svg { margin-left:auto; color:rgba(95,168,196,.7); }
.privacy__seal { margin-top:16px; padding:15px 16px; background:var(--c-twilight-light); color:var(--c-ink-900); border-radius:12px; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:12px; letter-spacing:-.005em; }
.privacy__seal-mark { width:28px; height:28px; border-radius:99px; background:rgba(14,17,22,.12); display:grid; place-items:center; flex-shrink:0; }

/* ============================================================ BRAND BAND */
.brand {
  background:var(--warm-soft); padding:var(--section-y) var(--gutter);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  overflow:hidden;
}
.brand__inner { max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,88px); align-items:center; }
.brand__mark { position:relative; }
.brand__logo {
  width:100%; max-width:380px; border-radius:var(--r-xl); display:block;
  box-shadow:var(--elev-3);
  clip-path:inset(0 50% 0 50%);
  transition:clip-path 1.1s var(--ease);
}
.brand__mark.in .brand__logo { clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion:reduce){ .brand__logo{ clip-path:inset(0 0 0 0); transition:none; } }
.brand__h { font-weight:600; font-size:clamp(34px,5vw,60px); line-height:1.04; letter-spacing:-.025em; margin:18px 0 0; color:var(--text); text-wrap:balance; max-width:16ch; }
.brand__h em { font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent-text); }
.brand__sub { font-size:clamp(17px,1.4vw,20px); line-height:1.55; color:var(--text-muted); max-width:46ch; margin:22px 0 0; }
.brand__lines { margin-top:26px; font-family:var(--mono); font-size:12px; line-height:1.7; letter-spacing:.04em; color:var(--text-faint); max-width:44ch; }

/* ============================================================ FEATURES (bento) */
.features { padding:var(--section-y) var(--gutter); }
.features__intro { max-width:var(--maxw); margin:0 auto 56px; }
.features__grid { display:grid; grid-template-columns:repeat(6,1fr); gap:18px; max-width:var(--maxw); margin-inline:auto; }
.feat {
  background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:30px; display:flex; flex-direction:column; gap:26px; grid-column:span 3; min-height:300px;
  transition:border-color .2s, transform .3s var(--ease), box-shadow .3s;
}
.feat:hover { border-color:var(--divider); transform:translateY(-2px); box-shadow:var(--elev-1); }
.feat--lg { grid-column:span 6; flex-direction:row-reverse; align-items:stretch; min-height:560px; }
.feat--lg .feat__copy { flex:1; align-self:center; max-width:36ch; }
.feat--lg .feat__art { flex:1.2; }
.feat--sand { background:var(--warm-soft); border-color:transparent; }
.feat__copy h3 { font-family:var(--sans); font-weight:600; font-size:clamp(21px,1.9vw,25px); line-height:1.18; letter-spacing:-.02em; margin:0 0 10px; color:var(--text); }
.feat__copy p { font-size:15px; line-height:1.55; color:var(--text-muted); margin:0; max-width:38ch; }
.feat__art { flex:1; background:var(--surface-sunken); border-radius:var(--r-md); padding:24px; display:grid; place-items:center; position:relative; overflow:hidden; min-height:190px; }
.feat--sand .feat__art { background:rgba(0,0,0,.04); }
[data-theme="dark"] .feat--sand .feat__art { background:rgba(0,0,0,.25); }
.feat__art--screen { padding:32px 0 0; display:flex; align-items:flex-end; justify-content:center; background:linear-gradient(165deg, var(--surface-sunken), var(--surface)); }
.feat__shot { width:90%; max-width:400px; border-radius:30px 30px 0 0; box-shadow:0 24px 64px rgba(0,0,0,.4); align-self:flex-end; margin-bottom:-9%; }

.feat__art--mixed { padding:22px; flex-direction:column; gap:8px; align-items:stretch; justify-content:center; display:flex; }
.mini-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:12px 15px; background:var(--surface-raised); border-radius:10px; font-size:14px; font-weight:500; box-shadow:var(--elev-1); }
.mini-row span:nth-child(2){ color:var(--text); font-weight:500; }
.mini-row__t { font-weight:700; font-variant-numeric:tabular-nums; color:var(--text); font-size:14px; }

.feat__art--walk { padding:30px; }
.walk-mini { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.walk-mini__icon { width:34px; height:34px; border-radius:99px; background:var(--surface-raised); border:1px solid var(--border); display:grid; place-items:center; color:var(--text-muted); margin-bottom:8px; }
.walk-mini__big { font-weight:600; font-size:58px; line-height:1; letter-spacing:-.03em; color:var(--text); font-variant-numeric:tabular-nums; display:inline-flex; align-items:baseline; }
.walk-mini__big small { font-size:16px; font-weight:600; margin-left:5px; color:var(--text-muted); letter-spacing:0; }
.walk-mini__sub { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); }

.feat__art--favs { padding:26px; gap:10px; display:flex; flex-direction:column; align-items:stretch; justify-content:center; }
.route-pills { display:flex; flex-direction:column; gap:10px; width:100%; }
.route-pill { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--surface-raised); border:1px solid var(--border); border-radius:99px; font-size:13.5px; font-weight:600; color:var(--text); box-shadow:var(--elev-1); }
.route-pill--on { border-color:var(--accent); background:var(--accent-subtle); color:var(--accent-text); }

.feat__art--alerts { padding:30px; }
.alerts-mini { display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--alert); color:#fff; border-radius:12px; font-size:14px; font-weight:600; width:100%; }
.alerts-mini__icon { width:22px; height:22px; border-radius:99px; background:rgba(255,255,255,.2); display:grid; place-items:center; flex-shrink:0; }
.alerts-mini__chev { margin-left:auto; font-size:18px; opacity:.75; }

.feat__art--widget { padding:30px; }
.widget { width:100%; max-width:250px; background:var(--c-ink-900); color:var(--c-fog-100); border-radius:22px; padding:18px 20px; box-shadow:var(--elev-3); }
[data-theme="dark"] .widget { background:#000; border:1px solid var(--border); }
.widget__head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.widget__name { font-size:13px; font-weight:500; color:rgba(244,241,236,.85); letter-spacing:-.005em; }
.widget__times { font-weight:700; font-size:29px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--c-fog-100); }
.widget__times small { font-size:12px; font-weight:600; margin-left:3px; opacity:.65; letter-spacing:0; }

/* ============================================================ STATS BAND */
.stats { padding:clamp(64px,9vw,120px) var(--gutter); border-top:1px solid var(--border); }
.stats__inner { max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); }
.stat { display:flex; flex-direction:column; gap:8px; }
.stat__num { font-weight:600; font-size:clamp(52px,6.5vw,84px); line-height:.9; letter-spacing:-.04em; color:var(--text); font-variant-numeric:tabular-nums; }
.stat__num em { font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent-text); }
.stat__label { font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.stat__sub { font-size:14px; color:var(--text-faint); margin-top:2px; }

/* ============================================================ CTA */
.cta {
  background:var(--ink-band); color:var(--on-band);
  padding:var(--section-y) var(--gutter);
  display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(40px,6vw,96px); align-items:center;
  position:relative; overflow:hidden;
}
.cta::before { content:""; position:absolute; top:-12%; right:-8%; width:52%; height:130%; background:radial-gradient(closest-side, rgba(95,168,196,.2), transparent 70%); pointer-events:none; }
.cta__inner { max-width:600px; margin-left:auto; padding-left:clamp(0px,5vw,80px); position:relative; }
.cta__h { font-weight:600; font-size:clamp(48px,7vw,96px); line-height:.95; letter-spacing:-.03em; margin:18px 0 24px; color:var(--on-band); }
.cta__h span { display:block; }
.cta__h-ital { font-family:var(--sans); font-style:normal; font-weight:400; color:var(--on-band); text-wrap:balance; }
.cta__sub { font-size:clamp(16px,1.3vw,19px); line-height:1.55; color:rgba(244,241,236,.72); max-width:50ch; margin:0 0 32px; }
.cta__buttons { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.cta__meta { font-size:12.5px; color:rgba(244,241,236,.5); margin:0; font-family:var(--mono); letter-spacing:.02em; }
.cta__phone { display:grid; place-items:center; position:relative; padding-right:clamp(0px,5vw,80px); }

/* ============================================================ FOOTER */
.footer { background:var(--surface); padding:clamp(60px,8vw,100px) var(--gutter) 32px; border-top:1px solid var(--border); }
.footer__top { max-width:var(--maxw); margin:0 auto 60px; display:grid; grid-template-columns:1.2fr 2fr; gap:48px; align-items:start; }
.footer__brand { display:flex; align-items:center; gap:14px; }
.footer__icon { width:46px; height:46px; border-radius:11px; }
.footer__icon--dark { display:none; }
[data-theme="dark"] .footer__icon--light { display:none; }
[data-theme="dark"] .footer__icon--dark { display:block; }
.footer__name { font-weight:600; font-size:18px; letter-spacing:-.01em; margin:0; color:var(--text); }
.footer__tag { font-size:13px; color:var(--text-muted); margin:4px 0 0; max-width:34ch; }
.footer__cols { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.footer__col h4 { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin:0 0 16px; }
.footer__col a { display:block; font-size:14.5px; color:var(--text-muted); padding:5px 0; transition:color .16s; }
.footer__col a:hover { color:var(--accent-text); }
.footer__bot { max-width:var(--maxw); margin-inline:auto; padding-top:24px; border-top:1px solid var(--border); display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--text-faint); }
.footer__bot a { color:var(--text-muted); }
.footer__bot a:hover { color:var(--accent-text); }

/* ============================================================ CATCHABILITY */
.catch { background:var(--accent-subtle); padding:var(--section-y) var(--gutter); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.catch__inner { max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,88px); align-items:center; }
.catch__copy { max-width:520px; }
.catch__copy .section-h { max-width:14ch; }
.catch__line { margin:30px 0 0; font-family:var(--sans); font-style:normal; font-weight:500; font-size:clamp(20px,2.2vw,28px); line-height:1.35; color:var(--text-muted); letter-spacing:-.01em; }
.catch__demo { display:flex; flex-direction:column; gap:18px; }
.catch__card { max-width:480px; }
.catch__legend { display:flex; flex-wrap:wrap; gap:10px 22px; padding-left:min(7%,34px); }
.catch__leg { display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:500; color:var(--text-muted); letter-spacing:-.005em; }
.catch__dot { width:9px; height:9px; border-radius:50%; flex:none; }
.catchrow { display:flex; align-items:center; gap:14px; padding:16px 18px; background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--elev-1); font-family:var(--system); }
.catchrow__main { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.catchrow__name { font-size:17px; font-weight:700; color:var(--text); letter-spacing:-.01em; display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
.catchrow__line { font-size:12px; font-weight:500; color:var(--text-muted); letter-spacing:0; }
.catchrow__meta { font-size:13.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.catchrow__meta .cat-comfortable, .catchrow__meta .cat-tight, .catchrow__meta .cat-missed { font-weight:700; }
.tier { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); white-space:nowrap; flex:none; }
.tier::before { content:""; width:7px; height:7px; border-radius:50%; flex:none; }
.tier--ok::before { background:var(--success); }
.tier--soon::before { background:var(--warning); }
.tier--miss::before { background:var(--danger); }
.feat--wide { grid-column:span 6; flex-direction:row; align-items:center; gap:clamp(28px,4vw,56px); min-height:0; }
.feat--wide .feat__copy { flex:1; }
.feat--wide .feat__art { flex:1.05; min-height:150px; }

/* ============================================================ REAL APP SCREENS (device frames) */
.phone__hint { margin:18px 0 0; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--text-faint); }
.hero__board { display:flex; flex-direction:column; align-items:center; }

/* device bezel wrapping a real screenshot */
.device { position:relative; background:linear-gradient(150deg,#23272e,#0a0c0f 60%); border-radius:13.5% / 6.2%; padding:2.7%; box-shadow:0 30px 70px rgba(7,10,15,.30), 0 0 0 1px rgba(255,255,255,.05) inset, 0 1px 2px rgba(255,255,255,.12) inset; }
.device__screen { display:block; width:100%; border-radius:10.4% / 4.8%; background:#fff; }

.hero__board .device { width:312px; transform:perspective(1600px) rotateY(-5deg) rotateX(1.5deg); transition:transform .6s var(--ease); }
.hero__board:hover .device { transform:perspective(1600px) rotateY(0) rotateX(0); }

.cta__phone .device { width:300px; transform:rotate(-3deg); transition:transform .6s var(--ease); box-shadow:0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) inset; }
.cta__phone:hover .device { transform:rotate(0); }

/* trip screen peeking up from the large feature tile */
.feat__shot { width:90%; max-width:400px; border-radius:30px 30px 0 0; box-shadow:0 24px 64px rgba(7,10,15,.34), 0 0 0 1px rgba(0,0,0,.06); align-self:flex-end; margin-bottom:-9%; }

/* real "one list" station-card crop, framed so it reads in any theme */
.feat__art--mixed { padding:22px; background:linear-gradient(165deg,var(--surface-sunken),var(--surface)); }
.shot-card { width:100%; border-radius:14px; display:block; box-shadow:0 16px 40px rgba(7,10,15,.18), 0 0 0 1px rgba(0,0,0,.05); background:#fff; }

/* app-accurate mini mocks (system font = app context) */
.swatch { width:34px; height:15px; border-radius:4px; flex:none; display:inline-block; }
.swatch--red{background:var(--red)} .swatch--blue{background:var(--blue)} .swatch--brown{background:var(--brown)}
.swatch--green{background:var(--green)} .swatch--orange{background:var(--orange)} .swatch--purple{background:var(--purple)}
.swatch--pink{background:var(--pink)} .swatch--yellow{background:var(--yellow)}
.badge { min-width:34px; height:20px; padding:0 7px; border:1.5px solid color-mix(in srgb, var(--text-muted) 50%, transparent); border-radius:4px; font-family:var(--system); font-size:11.5px; font-weight:700; color:var(--text); display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; flex:none; }
.cat-comfortable{color:var(--success)} .cat-tight{color:var(--warning)} .cat-missed{color:var(--danger)}

.dep, .fav { display:flex; align-items:center; gap:10px; padding:11px 14px; background:var(--surface-raised); border:1px solid var(--border); border-radius:12px; box-shadow:var(--elev-1); font-family:var(--system); }
.dep__name, .fav__name { flex:1; font-size:15px; font-weight:700; color:var(--text); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dep__t, .fav__t { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text); white-space:nowrap; }
.fav__heart { color:var(--accent-text); flex:none; }

.alertstrip { display:flex; align-items:center; gap:10px; width:100%; padding:12px 14px; background:var(--accent-subtle); border-radius:10px; font-family:var(--system); }
.alertstrip__icon { color:var(--danger); flex:none; }
.alertstrip__text { flex:1; font-size:14px; font-weight:600; color:var(--text); letter-spacing:-.01em; line-height:1.3; }
.alertstrip__x { color:var(--text-faint); font-size:18px; flex:none; }

/* ticker chips — app visual language (swatch + catchability) */
.tk-sw { width:26px; height:13px; border-radius:4px; flex:none; display:inline-block; }
.tk-sw--red{background:var(--red)} .tk-sw--blue{background:var(--blue)} .tk-sw--brown{background:var(--brown)}
.tk-sw--green{background:var(--green)} .tk-sw--orange{background:var(--orange)} .tk-sw--purple{background:var(--purple)}
.tk-sw--pink{background:var(--pink)} .tk-sw--yellow{background:var(--yellow)}
.tk-badge { min-width:26px; height:18px; padding:0 6px; border:1.5px solid rgba(244,241,236,.4); border-radius:4px; font-family:var(--system); font-size:11px; font-weight:700; color:var(--on-band); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.ticker .cat-comfortable{color:#2FD18C} .ticker .cat-tight{color:#FFA740} .ticker .cat-missed{color:#FF6B73}
.tk__min { color:rgba(244,241,236,.55); font-weight:500; }

/* ============================================================ PHOTO BAND */
.photo { position:relative; height:clamp(520px,76vh,860px); overflow:hidden; background:var(--surface-sunken); }
.photo__img { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center 52%; }
.photo__overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:12px; padding:clamp(32px,6vw,80px); background:linear-gradient(to top, rgba(7,10,15,.62), rgba(7,10,15,.08) 52%, transparent); color:#fff; pointer-events:none; }
.photo__kicker { font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.72); margin:0; }
.photo__h { font-family:var(--sans); font-weight:600; font-size:clamp(32px,4.6vw,58px); line-height:1.02; letter-spacing:-.025em; margin:0; max-width:18ch; text-wrap:balance; color:#fff; }

/* ============================================================ RESPONSIVE */
@media (max-width:920px){
  .hero { grid-template-columns:1fr; }
  .hero__board { order:-1; max-width:440px; }
  .privacy__inner { grid-template-columns:1fr; }
  .features__grid { grid-template-columns:1fr; }
  .feat, .feat--lg { grid-column:span 1; flex-direction:column; min-height:0; }
  .feat--wide { grid-column:span 1; flex-direction:column; }
  .catch__inner { grid-template-columns:1fr; }
  .stats__inner { grid-template-columns:repeat(2,1fr); gap:40px 24px; }
  .cta { grid-template-columns:1fr; }
  .cta__inner { padding-left:0; margin-left:0; }
  .cta__phone { padding-right:0; }
  .footer__top { grid-template-columns:1fr; }
  .brand__inner { grid-template-columns:1fr; }
  .brand__mark { order:-1; max-width:320px; }
}
@media (max-width:680px){
  .nav__links a:not(.nav__cta){ display:none; }
}
@media (max-width:520px){
  .stats__inner { grid-template-columns:1fr; }
  .footer__cols { grid-template-columns:1fr 1fr; gap:24px; }
  .footer__bot { flex-direction:column; gap:8px; }
  .app { transform:none; }
}