/* ==========================================================================
   RunChoice — marketing site
   Dark, vivid, app-authentic. Tokens mirror lib/core/theme/colors.dart and
   lib/features/run/presentation/segment_palette.dart — keep them in sync.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Brand (v1.0 USA guidelines) */
  --orange: #ff6b35;
  --orange-warm: #ff9f43;
  --orange-soft: #ffb084;
  --blue: #3bafda;
  --blue-light: #7dd3f0;
  --blue-deep: #1f7fa8;
  --purple: #8b2875;
  --purple-light: #c065ae;
  --green: #2fb46b;
  --yellow: #ffb23f;

  /* Run segment palette (same as the in-app map) */
  --seg-run: #ff6b35;
  --seg-walk: #7ba0ba;
  --seg-vehicle: #1ab6e1;

  /* Dark surfaces (app dark mode anchors) */
  --bg: #0b0d17;
  --surface: #16192b;
  --surface-2: #1f233a;
  --line: #2a2f48;
  --text: #e8eaf2;
  --text-soft: #c5cada;
  --muted: #8a91a8;

  --grad-orange: linear-gradient(135deg, var(--orange), var(--orange-warm));
  --grad-blue: linear-gradient(135deg, var(--blue), var(--blue-light));
  --grad-hero: linear-gradient(120deg, var(--orange) 0%, var(--orange-warm) 35%, var(--purple) 65%, var(--blue) 100%);

  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --maxw: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  /* Anchors the full-height .page-aura layer below. */
  position: relative;
}

/* Page-wide ambient colour journey ----------------------------------------
   One full-height layer behind everything: soft brand glows placed at
   increasing scroll depths so the palette drifts warm -> violet -> blue ->
   warm as you move down the page, instead of every section resting on the
   same flat near-black. Fully static (painted once, no per-frame cost) — the
   "transition" is the scroll passing through the colour zones. Pre-blurred
   radials only, never filter:blur(): the same GPU-friendly rule as the hero
   orbs. */
.page-aura {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(1200px 860px at 84% 3%, rgba(255, 107, 53, 0.13), transparent 60%),
    radial-gradient(980px 820px at 4% 16%, rgba(139, 40, 117, 0.17), transparent 58%),
    radial-gradient(1080px 880px at 96% 35%, rgba(59, 175, 218, 0.14), transparent 56%),
    radial-gradient(1040px 880px at 6% 56%, rgba(139, 40, 117, 0.16), transparent 56%),
    radial-gradient(1120px 920px at 92% 77%, rgba(255, 107, 53, 0.13), transparent 56%),
    radial-gradient(1000px 900px at 10% 95%, rgba(59, 175, 218, 0.10), transparent 58%);
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 { margin: 0 0 0.55em; line-height: 1.12; letter-spacing: -0.02em; }
/* Multi-line section headings need more leading than the hero display size —
   1.12 reads cramped the moment an h2 wraps. */
h2 { line-height: 1.18; }
h3 { line-height: 1.3; }
p { margin: 0 0 1em; }
a { color: var(--blue-light); }

::selection { background: var(--orange); color: #fff; }

/* --------------------------------------------------------------------------
   Shared atoms
   -------------------------------------------------------------------------- */

.wrap {
  width: min(var(--maxw), calc(100% - 48px));
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-warm);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-orange);
}

.section-head { max-width: 640px; margin-bottom: clamp(44px, 6vw, 60px); }
.section-head h2 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 700; margin-bottom: 14px; }
.section-head p { color: var(--muted); font-size: 18px; line-height: 1.65; margin: 0; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.button.primary {
  background: var(--grad-orange);
  color: #fff;
  box-shadow: 0 10px 30px rgba(255, 107, 53, 0.35);
}
.button.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(255, 107, 53, 0.45); }
.button.secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-color: var(--line);
}
.button.secondary:hover { border-color: var(--blue); color: var(--blue-light); transform: translateY(-2px); }
.button.small { padding: 10px 20px; font-size: 14px; }

a:focus-visible, .button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--blue-light);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--orange);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 12px 0;
  z-index: 200;
}
.skip-link:focus { left: 0; }

.coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffd98a, var(--yellow) 55%, #d98a1f);
  box-shadow: inset 0 -2px 3px rgba(140, 80, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.4);
  color: #7a4a05;
  font-size: 11px;
  font-weight: 700;
  flex: none;
}

/* Inline icons — glyphs live in the SVG sprite at the top of index.html
   and are placed with <use>. Color rides on currentColor; the flame is
   the one filled brand mark (gradient defined in the sprite). */
.ic { width: 15px; height: 15px; flex: none; }
.ic-ship { color: var(--orange-warm); }
.ic-quiet { color: var(--blue-light); }
.ic-flame { filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.45)); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 28px;
  background: rgba(11, 13, 23, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

/* Phones: skip the backdrop blur entirely — it taxes the GPU on every
   scrolled frame. A near-solid background looks the same in motion. */
@media (max-width: 880px) {
  .site-header {
    background: rgba(11, 13, 23, 0.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 560px) {
  .site-header {
    gap: 12px;
    padding: 12px 16px;
  }
  .site-header .brand {
    min-width: 0;
    gap: 8px;
    font-size: 17px;
  }
  .site-header .brand img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
  .site-header .button.small {
    padding: 9px 13px;
    font-size: 13px;
    white-space: nowrap;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.brand img { width: 36px; height: 36px; border-radius: 9px; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: color 0.18s ease;
}
.nav a:hover { color: var(--text); }

@media (max-width: 880px) {
  .nav { display: none; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(56px, 9vw, 110px) 0 clamp(60px, 8vw, 110px);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* The hero clips its overflow, and orb-2 bleeds past the bottom edge —
     without this fade the glow gets cut in a hard horizontal line (a visible
     "seam" between the hero and the next section). Masking the whole layer
     to fade over the last stretch makes orbs AND route lines dissolve into
     the page aura instead of stopping dead. Static, painted once. */
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
/* Orbs are pre-blurred radial gradients — no filter:blur(), which is
   expensive to composite on mobile GPUs and causes scroll jank. */
.hero-bg .orb {
  position: absolute;
  border-radius: 50%;
}
.orb-1 { width: 760px; height: 760px; background: radial-gradient(circle, rgba(255, 107, 53, 0.22) 0%, rgba(255, 107, 53, 0.07) 45%, transparent 70%); top: -290px; right: -220px; }
.orb-2 { width: 660px; height: 660px; background: radial-gradient(circle, rgba(59, 175, 218, 0.18) 0%, rgba(59, 175, 218, 0.06) 45%, transparent 70%); bottom: -290px; left: -260px; }
.orb-3 { width: 520px; height: 520px; background: radial-gradient(circle, rgba(139, 40, 117, 0.26) 0%, rgba(139, 40, 117, 0.08) 45%, transparent 70%); top: 24%; left: 30%; }

/* Route lines are pure static decoration — zero per-frame cost.
   Rule for this site: SVGs never animate. Continuous motion is only
   allowed as CSS transform/opacity on small regular elements, because
   that is the one thing every mobile browser composites on the GPU. */
.hero-route { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }
.hero-route path {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 14;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(42px, 6.4vw, 76px);
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
}
.hero-copy h1 .grad {
  background: var(--grad-hero);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Slow warm->cool drift across the headline. Disabled under
     prefers-reduced-motion by the global rule at the foot of this file. */
  animation: gradDrift 14s ease-in-out infinite alternate;
}

/* Shared slow gradient drift for brand-gradient surfaces (headline, the
   RunChoice+ card border). Composited as a cheap background-position shift. */
@keyframes gradDrift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
.hero-copy .lede {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 460px;
  margin-bottom: 30px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }

.hero-note { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; margin: 0; }

ul.hero-bullets {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 0 26px; padding: 0;
}
.hero-bullets li {
  list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(22, 25, 43, 0.75);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px; font-weight: 600;
  color: var(--text-soft);
}
.hero-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); flex: none; }

/* Phone mock ------------------------------------------------------------- */

.hero-phone { position: relative; display: flex; justify-content: center; }

.phone-frame {
  position: relative;
  width: min(330px, 86vw);
  border-radius: 48px;
  padding: 12px;
  background: linear-gradient(160deg, #2c3150, #12141f 60%);
  border: 1px solid #363c5e;
  box-shadow: var(--shadow), 0 0 90px rgba(255, 107, 53, 0.16);
  transform: rotate(2.5deg);
}

.phone-screen {
  border-radius: 38px;
  background: linear-gradient(180deg, #11142a 0%, var(--bg) 100%);
  padding: 18px 16px 14px;
  overflow: hidden;
  border: 1px solid #20243c;
}

.screen-status {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 14px;
}

.screen-greeting { font-size: 13px; color: var(--muted); margin: 0 0 2px; }
.screen-title { font-size: 19px; font-weight: 700; margin: 0 0 14px; }

.app-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 13px 14px;
  margin-bottom: 10px;
}

.streak-card { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, rgba(255, 107, 53, 0.16), rgba(255, 159, 67, 0.06)); border-color: rgba(255, 107, 53, 0.35); }
.flame { width: 34px; height: 42px; position: relative; flex: none; filter: drop-shadow(0 0 12px rgba(255, 107, 53, 0.55)); }
.flame svg { width: 100%; height: 100%; }
.flame.flicker { animation: flicker 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes flicker {
  0%, 100% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.06, 0.97) rotate(-2deg); }
  60% { transform: scale(0.96, 1.05) rotate(2deg); }
}
.streak-meta strong { display: block; font-size: 17px; }
.streak-meta span { font-size: 12px; color: var(--muted); }
.freeze-pips { margin-left: auto; display: flex; gap: 5px; }
.freeze-pips i {
  width: 14px; height: 14px; border-radius: 5px;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  box-shadow: 0 0 8px rgba(125, 211, 240, 0.5);
}
.freeze-pips i.empty { background: var(--surface-2); border: 1px solid var(--line); box-shadow: none; }

.line-card .line-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.line-card .line-top span { font-size: 12px; color: var(--muted); font-weight: 600; }
.line-card .line-top strong { font-size: 14px; color: var(--orange-warm); font-variant-numeric: tabular-nums; }
.meter { height: 9px; border-radius: 99px; background: var(--surface-2); overflow: hidden; position: relative; }
.meter > i {
  display: block; height: 100%; width: 76%;
  border-radius: 99px;
  background: var(--grad-orange);
  box-shadow: 0 0 14px rgba(255, 107, 53, 0.6);
}
.meter .tick {
  position: absolute; top: -3px; bottom: -3px; right: 0; width: 2px;
  background: var(--yellow);
}

.coin-row { display: flex; align-items: center; gap: 9px; }
.coin-row strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.coin-row .delta { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--green); }

.mini-route { padding: 0; overflow: hidden; }
.mini-route svg { width: 100%; height: 92px; }

.screen-tabbar {
  display: flex; justify-content: space-around;
  padding-top: 12px; margin-top: 2px;
  border-top: 1px solid var(--line);
}
.screen-tabbar i {
  width: 22px; height: 4px; border-radius: 4px; background: var(--surface-2);
}
.screen-tabbar i.on { background: var(--orange); box-shadow: 0 0 8px rgba(255, 107, 53, 0.7); }

/* App-accurate home mockup (matches the real RunChoice home screen) ------- */

.app-home { padding-bottom: 10px; }

.screen-status .batt {
  position: relative;
  width: 19px; height: 9px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 3px;
  align-self: center;
}
.screen-status .batt i {
  position: absolute; inset: 1.5px;
  right: 6px;
  border-radius: 1.5px;
  background: rgba(255, 255, 255, 0.75);
}
.screen-status .batt::after {
  content: "";
  position: absolute; right: -3px; top: 2.5px;
  width: 2px; height: 4px; border-radius: 1px;
  background: rgba(255, 255, 255, 0.45);
}

.screen-brand {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.screen-brand .wm { font-size: 17px; font-weight: 800; letter-spacing: 0.2px; }
.screen-brand .wm-run { color: var(--orange); }
.screen-brand .wm-choice { color: var(--blue); }
.screen-brand .bell {
  position: absolute; right: 2px; top: 50%;
  width: 15px; height: 15px;
  transform: translateY(-50%);
  color: var(--text-soft);
}

.streak-ring-wrap { display: flex; justify-content: center; margin: 8px 0 16px; }
.streak-ring {
  position: relative;
  width: 146px; height: 146px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
}
.streak-ring::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(#C0399F 0deg, #FF6B35 286deg, #28233d 286deg 360deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 64px, #000 65px);
          mask: radial-gradient(circle closest-side, transparent 64px, #000 65px);
  filter: drop-shadow(0 0 14px rgba(192, 57, 159, 0.35));
}
.streak-ring b {
  font-size: 42px; font-weight: 800; line-height: 1;
  color: #CE4FAE;
  text-shadow: 0 0 22px rgba(206, 79, 174, 0.45);
}
.streak-ring span { font-size: 11.5px; color: var(--text-soft); font-weight: 600; }

.welcome-card {
  border-radius: 18px;
  padding: 14px 14px 13px;
  margin-bottom: 10px;
  background: linear-gradient(120deg, #A4459C 0%, #7A4FB5 48%, #3BAFDA 100%);
  box-shadow: 0 12px 32px rgba(122, 79, 181, 0.35);
}
.wc-title { margin: 0 0 2px; font-size: 16px; font-weight: 800; color: #fff; }
.wc-sub { margin: 0 0 10px; font-size: 10.5px; color: rgba(255, 255, 255, 0.88); }
.wc-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.wc-chip {
  background: rgba(255, 255, 255, 0.17);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 11px;
  padding: 7px 8px 6px;
}
.wc-chip span { display: block; font-size: 8.5px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.wc-chip b { display: block; font-size: 14px; line-height: 1.25; color: #fff; }

.week-card { padding: 12px 13px 11px; }
.week-top { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.week-top .wflame { width: 13px; height: 13px; }
.week-top b { font-size: 13.5px; }
.week-count { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 600; }
.week-chips { display: flex; justify-content: space-between; margin-bottom: 9px; }
.week-day {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  flex: 1;
}
.week-day i {
  width: 23px; height: 23px; border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.week-day i.fill {
  background: linear-gradient(135deg, #C0399F, #FF6B35);
  border-color: transparent;
  box-shadow: 0 0 8px rgba(192, 57, 159, 0.45);
}
.week-day > span { font-size: 7.5px; color: var(--muted); font-weight: 600; }
.week-cap { margin: 0; font-size: 9.5px; color: var(--muted); }

.app-tabs { justify-content: space-around; }
.tab-item {
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  font-size: 8.5px; font-weight: 600;
  color: var(--muted);
}
.tab-item svg { width: 17px; height: 17px; }
.tab-item.on { color: var(--orange); }
.tab-item.on svg { filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.6)); }

.float-chip {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  background: #181b30;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow);
  animation: floaty 5.5s ease-in-out infinite;
  will-change: transform;
}
.chip-coins { top: 9%; left: -10%; animation-delay: 0.6s; }
.chip-badge { bottom: 13%; right: -8%; }
.chip-badge .medal {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: conic-gradient(from 200deg, var(--purple-light), var(--blue), var(--purple-light));
  box-shadow: 0 0 10px rgba(192, 101, 174, 0.6);
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@media (max-width: 880px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-phone { margin-top: 14px; }
  .chip-coins { left: 0; }
  .chip-badge { right: 0; }
}

@media (max-width: 560px) {
  .wrap { width: min(var(--maxw), calc(100% - 40px)); }
  .hero { padding-top: 52px; }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .button {
    width: 100%;
    padding-inline: 18px;
  }
  .hero-bullets li { max-width: 100%; }
  .hero-note { align-items: flex-start; }
}

/* Product tour ------------------------------------------------------------ */

.product-tour {
  position: relative;
  padding-top: clamp(76px, 8.5vw, 116px);
  padding-bottom: clamp(76px, 8.5vw, 116px);
  /* Translucent wash only — no opaque fill and no hard top edge: it rises
     from transparent, peaks softly, and dissolves, so the aura's colour
     flows straight through and the section blends into its neighbours. */
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.03) 24%, transparent 62%);
}

.product-tour-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.75fr);
  gap: clamp(44px, 6vw, 82px);
  align-items: center;
}

.product-tour-copy { max-width: 540px; }

.product-tour-copy h2 {
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 700;
  margin-bottom: 16px;
}

.product-tour-copy > p {
  color: var(--text-soft);
  font-size: 18px;
  line-height: 1.7;
  max-width: 46ch;
}

.tour-points {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin: 28px 0 30px;
}

.tour-points span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 159, 67, 0.32);
  border-radius: 999px;
  background: rgba(255, 107, 53, 0.09);
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 14px;
}

.tour-points span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px rgba(255, 107, 53, 0.65);
}

.tour-note {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: -4px 0 0;
}

.product-video-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

.product-video-shell {
  position: relative;
  width: min(370px, 100%);
  aspect-ratio: 9 / 16;
  border-radius: 40px;
  padding: 10px;
  background: linear-gradient(160deg, #2c3150, #11131f 62%);
  border: 1px solid #363c5e;
  box-shadow: var(--shadow), 0 0 110px rgba(139, 40, 117, 0.22);
}

/* Soft three-colour halo so the video sits inside the brand light rather
   than floating on flat dark — warm top-left, violet mid, blue bottom. */
.product-video-shell::before {
  content: "";
  position: absolute;
  inset: -34px;
  z-index: -1;
  border-radius: 64px;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 159, 67, 0.28), transparent 50%),
    radial-gradient(circle at 90% 26%, rgba(139, 40, 117, 0.26), transparent 52%),
    radial-gradient(circle at 82% 86%, rgba(59, 175, 218, 0.26), transparent 50%);
}

.product-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #20243c;
  border-radius: 31px;
  background: #0b0d17;
}

@media (max-width: 880px) {
  .product-tour-inner { grid-template-columns: 1fr; }
  .product-tour-copy { max-width: 680px; }
  .product-video-shell { width: min(360px, 100%); }
}

@media (max-width: 560px) {
  .product-tour-copy > p { font-size: 16px; }
  /* Pills hug their text and wrap — stretched full-width they read as heavy
     form fields instead of light tags. */
  .tour-points { gap: 10px; }
  .product-video-shell {
    border-radius: 34px;
    padding: 8px;
  }
  .product-video { border-radius: 27px; }
}

/* --------------------------------------------------------------------------
   Ticker
   -------------------------------------------------------------------------- */

.ticker {
  border-block: 1px solid var(--line);
  background: rgba(22, 25, 43, 0.55);
  overflow: hidden;
  padding: 15px 0;
}
.ticker-track {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: ticker 36s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; color: var(--text-soft);
  white-space: nowrap;
}
.ticker-track span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 8px var(--orange);
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

/* Roomier vertical rhythm — the mobile floor especially: 64px between dark
   sections read as one dense wall on a phone. */
section { padding: clamp(78px, 10vw, 132px) 0; scroll-margin-top: 72px; }

/* Value pillars ------------------------------------------------------------ */

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.pillar-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.pillar-card:hover { transform: translateY(-6px); border-color: rgba(255, 159, 67, 0.5); }
.pillar-icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.18), rgba(59, 175, 218, 0.14));
  border: 1px solid var(--line);
}
.pillar-icon .ic { width: 26px; height: 26px; }
/* Per-concept tint: icon color + tile wash come from the same token. */
.pillar-icon--run {
  color: var(--orange);
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.22), rgba(255, 159, 67, 0.08));
  border-color: rgba(255, 107, 53, 0.35);
}
.pillar-icon--freeze {
  color: var(--blue-light);
  background: linear-gradient(135deg, rgba(59, 175, 218, 0.22), rgba(125, 211, 240, 0.08));
  border-color: rgba(125, 211, 240, 0.4);
}
.pillar-icon--freeze .ic { filter: drop-shadow(0 0 8px rgba(125, 211, 240, 0.45)); }
.pillar-icon--quiet {
  color: var(--purple-light);
  background: linear-gradient(135deg, rgba(139, 40, 117, 0.3), rgba(192, 101, 174, 0.1));
  border-color: rgba(192, 101, 174, 0.4);
}
.pillar-card h3 { font-size: 19px; margin-bottom: 10px; }
.pillar-card p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0; }
@media (max-width: 1020px) { .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pillar-grid { grid-template-columns: 1fr; } }

/* Three-card variant of the pillar grid (the "good to know" row). */
.pillar-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1020px) { .pillar-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pillar-grid.three { grid-template-columns: 1fr; } }

/* Honest tracking ---------------------------------------------------------- */

.honest-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}

.route-board {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}
.route-board svg { width: 100%; height: auto; }
.route-board .seg { fill: none; stroke-width: 5; stroke-linecap: round; }
.seg-run { stroke: var(--seg-run); filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.55)); }
.seg-walk { stroke: var(--seg-walk); }
.seg-vehicle { stroke: var(--seg-vehicle); stroke-dasharray: 2 9; }

ul.legend { display: grid; gap: 13px; margin: 22px 0 0; padding: 0; }
.legend li { display: flex; align-items: center; gap: 12px; font-size: 15px; list-style: none; }
.legend .swatch { width: 26px; height: 6px; border-radius: 6px; flex: none; }
.legend .swatch.run { background: var(--seg-run); box-shadow: 0 0 8px rgba(255, 107, 53, 0.6); }
.legend .swatch.walk { background: var(--seg-walk); }
.legend .swatch.vehicle { background: repeating-linear-gradient(90deg, var(--seg-vehicle) 0 4px, transparent 4px 8px); }
.legend b { font-weight: 700; }
.legend .tag { margin-left: auto; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.tag.counts { color: var(--orange-warm); background: rgba(255, 107, 53, 0.14); }
.tag.saved { color: var(--seg-walk); background: rgba(123, 160, 186, 0.14); }
.tag.never { color: var(--seg-vehicle); background: rgba(26, 182, 225, 0.12); }

/* How it works ------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.step-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px 26px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.step-card:hover { transform: translateY(-5px); border-color: rgba(255, 107, 53, 0.45); }
.step-card .num {
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--orange-warm);
}
.step-card h3 { font-size: 21px; margin: 14px 0 10px; }
.step-card p { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0; }
.step-card::after {
  content: "";
  position: absolute; inset: auto -40px -40px auto;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.16), transparent 70%);
}

/* Mint demo */
.mint-demo {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 44px);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
}
.mint-demo h3 { font-size: 24px; }
.mint-demo .sub { color: var(--muted); font-size: 15px; }

.mint-meter-wrap { position: relative; margin-top: 20px; }
.mint-time {
  display: flex; justify-content: space-between;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--muted); margin-bottom: 9px;
}
.mint-time .now { color: var(--orange-warm); font-size: 16px; }
.mint-meter { height: 14px; border-radius: 99px; background: var(--surface-2); overflow: visible; position: relative; }
.mint-meter .fill {
  display: block; height: 100%; width: 100%;
  border-radius: 99px;
  background: var(--grad-orange);
  box-shadow: 0 0 18px rgba(255, 107, 53, 0.65);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
.mint-meter .goal {
  position: absolute; top: -7px; bottom: -7px; right: 0; width: 3px;
  border-radius: 3px;
  background: var(--yellow);
  box-shadow: 0 0 10px var(--yellow);
}
.mint-pop {
  position: absolute; right: -6px; top: -46px;
  background: var(--grad-orange);
  color: #fff; font-weight: 700; font-size: 15px;
  border-radius: 12px; padding: 7px 13px;
  display: flex; align-items: center; gap: 7px;
  opacity: 0; transform: translateY(10px) scale(0.9);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 12px 26px rgba(255, 107, 53, 0.45);
}
.mint-pop.on { opacity: 1; transform: translateY(0) scale(1); }
.mint-pop .coin { width: 18px; height: 18px; font-size: 9px; background: radial-gradient(circle at 32% 30%, #fff3cf, #ffd98a 55%, var(--yellow)); }

ul.mint-math { display: grid; gap: 11px; margin: 0; padding: 0; }
.mint-math li {
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 14px; font-weight: 600;
}
.mint-math b { font-variant-numeric: tabular-nums; color: var(--orange-warm); font-size: 15px; }
.mint-math li.total { background: rgba(255, 107, 53, 0.12); border-color: rgba(255, 107, 53, 0.4); }

@media (max-width: 880px) {
  .steps { grid-template-columns: 1fr; }
  .mint-demo, .honest-grid { grid-template-columns: 1fr; }
}

/* Economy ------------------------------------------------------------------ */

.rules-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 54px;
}
.rule-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 14px; font-weight: 600;
  color: var(--text-soft);
}
.rule-chip b { color: var(--orange-warm); font-variant-numeric: tabular-nums; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 16px;
}
.shop-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 16px 16px;
  text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.shop-card:hover { transform: translateY(-6px); border-color: rgba(125, 211, 240, 0.5); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.shop-card .preview {
  width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.shop-card .preview::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  padding: 4px;
  background: var(--ring, var(--grad-orange));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.shop-card .preview i {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 22px;
}
.shop-card strong { display: block; font-size: 15px; margin-bottom: 3px; }
.shop-card .kind { display: block; font-size: 12px; color: var(--muted); margin-bottom: 11px; }
.shop-card .price {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 99px; padding: 5px 12px;
  font-variant-numeric: tabular-nums;
}
.shop-card .price .coin { width: 16px; height: 16px; font-size: 8px; }
.shop-card .price.earned { color: var(--purple-light); border-color: rgba(192, 101, 174, 0.5); }

/* ring variants */
.ring-sunrise { --ring: linear-gradient(135deg, #ff6b35, #ffd98a); }
.ring-cobalt { --ring: linear-gradient(135deg, #1f7fa8, #7dd3f0); }
.ring-ember { --ring: linear-gradient(135deg, #c74a1f, #ff9f43); }
.ring-aurora { --ring: conic-gradient(from 180deg, #3bafda, #8b2875, #ff6b35, #3bafda); }
.ring-goldleaf { --ring: linear-gradient(135deg, #b8860b, #ffd98a 50%, #b8860b); }
.ring-midnight { --ring: linear-gradient(135deg, #2a2f48, #5a6296); }

.economy-note {
  margin-top: 44px;
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(120deg, rgba(139, 40, 117, 0.22), rgba(59, 175, 218, 0.14));
  border: 1px solid rgba(192, 101, 174, 0.4);
  border-radius: var(--radius);
  padding: 22px 26px;
  font-size: 16px;
}
.economy-note .coin { width: 34px; height: 34px; font-size: 14px; }
.economy-note p { margin: 0; }
.economy-note b { color: #fff; }

/* Streaks ------------------------------------------------------------------ */

.streak-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}

.freeze-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.freeze-panel .flame { width: 52px; height: 64px; margin-bottom: 16px; }
.freeze-panel h3 { font-size: 22px; }
.freeze-panel p { color: var(--muted); font-size: 15px; }
.freeze-slots { display: flex; gap: 12px; margin: 20px 0 8px; }
.freeze-slot {
  flex: 1; aspect-ratio: 1; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  background: linear-gradient(150deg, rgba(59, 175, 218, 0.22), rgba(125, 211, 240, 0.08));
  border: 1px solid rgba(125, 211, 240, 0.45);
  box-shadow: inset 0 0 24px rgba(125, 211, 240, 0.14);
}
.freeze-slot.empty { background: var(--surface-2); border: 1px dashed var(--line); box-shadow: none; opacity: 0.7; }
.freeze-caption { font-size: 13px; color: var(--muted); margin: 0; }

.milestones { display: grid; gap: 14px; }
.milestone {
  display: flex; align-items: center; gap: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  transition: transform 0.22s ease, border-color 0.22s ease;
}
.milestone:hover { transform: translateX(6px); border-color: rgba(255, 159, 67, 0.5); }
.milestone .day {
  flex: none;
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 19px;
  background: var(--grad-orange);
  color: #fff;
  box-shadow: 0 8px 20px rgba(255, 107, 53, 0.35);
}
.milestone.m14 .day { background: linear-gradient(135deg, #3d3b7a, #6e6bd0); box-shadow: 0 8px 20px rgba(110, 107, 208, 0.35); }
.milestone.m21 .day { background: var(--grad-blue); box-shadow: 0 8px 20px rgba(59, 175, 218, 0.35); }
.milestone.m30 .day { background: linear-gradient(135deg, var(--purple), var(--purple-light)); box-shadow: 0 8px 20px rgba(139, 40, 117, 0.4); }
.milestone strong { display: block; font-size: 16px; }
.milestone span { font-size: 13.5px; color: var(--muted); }
.milestone .bonus {
  margin-left: auto; flex: none;
  font-size: 13px; font-weight: 700; color: var(--orange-warm);
  display: inline-flex; align-items: center; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.milestone .bonus .coin { width: 15px; height: 15px; font-size: 8px; }

@media (max-width: 880px) {
  .streak-grid { grid-template-columns: 1fr; }
  .milestone .bonus { display: none; }
}

/* Live Activity ------------------------------------------------------------ */

.live-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
@media (max-width: 880px) { .live-grid { grid-template-columns: 1fr; } }

.lockscreen {
  background:
    radial-gradient(circle at 20% 12%, rgba(59, 175, 218, 0.3), transparent 50%),
    radial-gradient(circle at 85% 85%, rgba(139, 40, 117, 0.35), transparent 55%),
    linear-gradient(180deg, #141831, #0b0d17);
  border: 1px solid var(--line);
  border-radius: 36px;
  padding: 40px 26px 30px;
  text-align: center;
  box-shadow: var(--shadow);
  max-width: 380px;
  margin-inline: auto;
}
.lockscreen .ls-date { font-size: 14px; color: var(--text-soft); margin: 0; }
.lockscreen .ls-time { font-size: 64px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 30px; font-variant-numeric: tabular-nums; }

.la-card {
  background: #191c32;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 15px 17px;
  text-align: left;
}
.la-top { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.la-top img { width: 26px; height: 26px; border-radius: 7px; }
.la-top strong { font-size: 14px; }
.la-top .flame { width: 18px; height: 23px; margin-left: auto; }
.la-stats { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 13px; }
.la-stats div { text-align: center; flex: 1; }
.la-stats b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.la-stats span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.la-card .meter { height: 7px; }
/* Animate transform (composited) instead of width (layout) — keeps the
   lock-screen bar buttery on phones. */
.la-card .meter > i {
  width: 100%;
  transform: scaleX(0.62);
  transform-origin: left center;
  animation: laFill 6s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes laFill { from { transform: scaleX(0.34); } to { transform: scaleX(0.97); } }
.la-caption { font-size: 11.5px; color: var(--muted); margin: 9px 0 0; display: flex; justify-content: space-between; }

/* Privacy -------------------------------------------------------------------- */

.privacy {
  background:
    radial-gradient(circle at 50% 0%, rgba(59, 175, 218, 0.1), transparent 60%),
    var(--surface);
  border-block: 1px solid var(--line);
}
.privacy-inner { text-align: center; max-width: 760px; margin-inline: auto; }
.privacy h2 {
  font-size: clamp(34px, 5.4vw, 60px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}
.privacy h2 em {
  font-style: normal;
  background: var(--grad-blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.privacy .privacy-lede { color: var(--text-soft); font-size: 18px; max-width: 620px; margin: 0 auto 36px; }
.privacy-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  text-align: left;
}
.privacy-points article {
  background: rgba(11, 13, 23, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.privacy-points h3 { font-size: 16px; margin-bottom: 6px; }
.privacy-points p { font-size: 14px; color: var(--muted); margin: 0; }
@media (max-width: 880px) { .privacy-points { grid-template-columns: 1fr; } }

/* Premium -------------------------------------------------------------------- */

.premium-card {
  position: relative;
  border-radius: 28px;
  padding: 2px;
  background: var(--grad-hero);
  background-size: 200% 100%;
  box-shadow: 0 30px 80px rgba(139, 40, 117, 0.35);
  /* Same slow drift as the headline so the gradient border feels alive.
     Reduced-motion disables it via the global rule. */
  animation: gradDrift 18s ease-in-out infinite alternate;
}
.premium-inner {
  border-radius: 26px;
  background: linear-gradient(160deg, #14172c, #0b0d17);
  padding: clamp(30px, 5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.premium-inner .eyebrow { color: var(--purple-light); }
.premium-inner .eyebrow::before { background: linear-gradient(90deg, var(--purple-light), var(--blue)); }
.premium-inner h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 14px; }
.premium-inner > div > p { color: var(--text-soft); line-height: 1.7; }
ul.premium-list { display: grid; gap: 13px; margin: 0; padding: 0; }
.premium-list li {
  list-style: none;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 15px; font-weight: 600;
}
.premium-list .pi {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(135deg, rgba(139, 40, 117, 0.5), rgba(59, 175, 218, 0.4));
}
.premium-list .pi .ic { width: 16px; height: 16px; }
.premium-free { margin-top: 24px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.premium-free b { color: var(--orange-warm); }
@media (max-width: 880px) { .premium-inner { grid-template-columns: 1fr; } }

/* FAQ ------------------------------------------------------------------------ */

.faq-list { max-width: 760px; display: grid; gap: 14px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px;
  font-weight: 600; font-size: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 22px; font-weight: 400;
  color: var(--orange-warm);
  transition: transform 0.25s ease;
  flex: none;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 22px 22px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }

/* Final CTA -------------------------------------------------------------------- */

.cta-final { padding-bottom: clamp(80px, 10vw, 140px); }
.cta-panel {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: clamp(46px, 7vw, 90px) clamp(26px, 5vw, 80px);
  text-align: center;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 159, 67, 0.4), transparent 55%),
    radial-gradient(circle at 82% 80%, rgba(59, 175, 218, 0.42), transparent 55%),
    linear-gradient(135deg, #c2491d, var(--purple) 55%, #1f7fa8);
  box-shadow: 0 36px 90px rgba(139, 40, 117, 0.4);
}
.cta-panel h2 {
  font-size: clamp(32px, 5vw, 56px);
  color: #fff;
  letter-spacing: -0.03em;
}
.cta-panel p { color: rgba(255, 255, 255, 0.85); font-size: 18px; line-height: 1.65; max-width: 520px; margin: 0 auto 34px; }
.cta-panel .button.primary { background: #fff; color: var(--purple); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3); }
.cta-panel .button.secondary { border-color: rgba(255, 255, 255, 0.45); color: #fff; background: rgba(255, 255, 255, 0.08); }
.cta-panel .hero-actions { justify-content: center; }
.cta-soon { margin: 26px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, 0.66); }

/* Footer ------------------------------------------------------------------------ */

.footer {
  border-top: 1px solid var(--line);
  padding: 38px 28px 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: var(--muted);
  font-size: 14px;
}
.footer .brand { font-size: 16px; }
.footer .brand img { width: 28px; height: 28px; }
.footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--text); }
.footer .foot-tag { width: 100%; margin: 0; font-size: 13px; color: var(--muted); opacity: 0.8; }

/* --------------------------------------------------------------------------
   Utility pages (404 etc.)
   -------------------------------------------------------------------------- */

.utility-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background:
    radial-gradient(circle at 80% 10%, rgba(255, 107, 53, 0.16), transparent 55%),
    radial-gradient(circle at 15% 90%, rgba(59, 175, 218, 0.14), transparent 55%),
    var(--bg);
}
.not-found-panel {
  max-width: 480px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 48px 40px;
  box-shadow: var(--shadow);
}
.not-found-panel h1 { font-size: 34px; }
.not-found-panel p { color: var(--muted); }
.not-found-panel .hero-actions { justify-content: center; margin-top: 26px; }

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
}