/* ============================================================
   Simon — Landing
   Bright editorial. Black · warm paper · #00e6e6.
   Geist geometric type. No gradients on brand, generous space.
   ============================================================ */

:root{
  /* paper / ink (extends the app's mono palette, warmed) */
  --paper:   #f4f3ee;
  --paper-2: #efede7;
  --card:    #ffffff;
  --ink:     #050505;
  --ink-2:   #1a1a1a;
  --ink-3:   #6b6b6e;
  --ink-4:   #a0a09a;
  --hair:    #e3e1d9;
  --hair-2:  #d6d4cb;

  --accent:      #00e6e6;
  --accent-ink:  #002a2a;
  --accent-soft: #e2fbfb;
  --warn:        #e6004d;

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.2,.8,.2,1);
  --shadow-md: 0 18px 50px rgba(5,5,5,.10), 0 4px 12px rgba(5,5,5,.06);
  --shadow-lg: 0 50px 110px rgba(5,5,5,.22), 0 12px 32px rgba(5,5,5,.10);

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 80px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:88px; }
section[id]{ scroll-margin-top:88px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-feature-settings:"ss01","ss02";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  overflow-x:hidden;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; letter-spacing:-0.03em; line-height:1.02; font-weight:600; }
p{ margin:0; }

.mono{ font-family:var(--mono); font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
.kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:22px; display:flex; align-items:center; gap:10px;
}
.kicker::before{ content:""; width:26px; height:1px; background:var(--accent); }
.lede{ color:var(--ink-3); font-size:clamp(16px,1.5vw,20px); line-height:1.55; max-width:44ch; }

/* ─────────── buttons / badges ─────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:52px; padding:0 26px; border-radius:var(--radius-pill);
  font-weight:600; font-size:15px; letter-spacing:-.01em;
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:active{ transform:scale(.98); }
.btn-accent{ background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 30px rgba(0,230,230,.35); }
.btn-accent:hover{ filter:brightness(1.05); transform:translateY(-2px); }
.btn-lg{ height:60px; font-size:17px; padding:0 34px; }

.store-badge{
  display:inline-flex; align-items:center; gap:12px;
  height:58px; padding:0 22px 0 18px; border-radius:14px;
  background:var(--ink); color:#fff;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  box-shadow:0 10px 30px rgba(5,5,5,.18);
}
.store-badge:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(5,5,5,.26); }
.store-ico{ width:26px; height:26px; flex:none; }
.store-badge span{ display:flex; flex-direction:column; line-height:1.05; text-align:left; }
.store-badge small{ font-size:10px; letter-spacing:.04em; opacity:.72; }
.store-badge strong{ font-size:18px; font-weight:600; letter-spacing:-.01em; }

/* ─────────── orb mark (living) ─────────── */
.orb-mark{
  position:relative; width:22px; height:22px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 38% 34%, #7ffcff 0%, var(--accent) 42%, #06c9c9 100%);
  animation:orbBreathe 4.2s var(--ease) infinite;
}
/* orbiting specular highlight — the "liquid" life */
.orb-mark::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 30% 26%, rgba(255,255,255,.95), rgba(255,255,255,0) 46%);
  animation:orbSpin 5.5s linear infinite;
}
/* soft pulsing aura */
.orb-mark::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,230,230,.55), transparent 68%);
  z-index:-1; animation:orbAura 4.2s var(--ease) infinite;
}
.orb-mark.small{ width:18px; height:18px; }

@keyframes orbBreathe{
  0%,100%{ transform:scale(1);    box-shadow:0 0 0 3px var(--accent-soft), 0 0 14px rgba(0,230,230,.5); }
  50%    { transform:scale(1.08); box-shadow:0 0 0 5px var(--accent-soft), 0 0 24px rgba(0,230,230,.85); }
}
@keyframes orbSpin{ to{ transform:rotate(360deg); } }
@keyframes orbAura{ 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:.9; transform:scale(1.18); } }

/* ─────────── scroll progress ─────────── */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:120; background:transparent; }
.scroll-progress span{ display:block; height:100%; width:0%; background:var(--accent); box-shadow:0 0 12px rgba(0,230,230,.7); }

/* ─────────── nav ─────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(244,243,238,.82);
  backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:1px solid var(--hair);
}
.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand-word{ font-weight:600; font-size:20px; letter-spacing:-.02em; }
.nav-links{ display:flex; gap:34px; position:absolute; left:50%; transform:translateX(-50%); }
.nav-links a{ font-size:14px; color:var(--ink-3); transition:color .2s; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ height:42px; padding:0 20px; font-size:14px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px var(--pad) 80px; overflow:hidden;
}
.hero-video-wrap{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:0; }
.hero-video{
  width:min(115%,1500px); height:100%; object-fit:cover; opacity:.9;
  mix-blend-mode:multiply; /* blends the off-white studio bg into the paper */
  transform:scale(1.02);
  /* soft transparent fade on the L/R (and a touch top/bottom) so the video
     never shows a hard rectangular boundary against the paper */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 82%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 82%, transparent 100%);
  mask-composite:intersect;
}
.hero-video-fade{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 50% 42%, transparent 0%, var(--paper) 78%),
    linear-gradient(to bottom, transparent 55%, var(--paper) 96%);
}
.hero-inner{ position:relative; z-index:2; max-width:920px; }
.hero-actions{ display:flex; flex-direction:column; align-items:center; }
/* cinematic hero: groups start hidden, revealed by the pinned timeline.
   Guarded by .cine on <html> (added pre-paint, removed if GSAP is absent). */
.cine .hero-headline,
.cine .hero-actions{ opacity:0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-2); background:rgba(255,255,255,.6); border:1px solid var(--hair);
  padding:8px 14px; border-radius:var(--radius-pill); margin-bottom:30px; backdrop-filter:blur(4px);
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }

.hero-title{
  font-size:clamp(42px, 8.2vw, 104px); font-weight:600; letter-spacing:-.045em; line-height:.98;
}
/* small vertical breathing room so the "Simon." glow isn't clipped by the mask */
.hero-title .line{ display:block; overflow:hidden; padding:.1em 0; margin:-.1em 0; }
.hero-title .line > span{ display:block; }

/* "Simon." — shiny cyan with a sweeping chrome sheen + soft glow backdrop */
.hero-title em{
  position:relative; isolation:isolate;
  font-style:italic; font-weight:600;
  background-image:linear-gradient(100deg,
    #05b9bd 0%, #00e6e6 20%, #8dfbff 40%, #ffffff 50%, #8dfbff 60%, #00e6e6 80%, #05b9bd 100%);
  background-size:230% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 1px 10px rgba(0,230,230,.45));
  animation:simonSheen 5.5s linear infinite;
}
/* elegant glow backdrop behind the word */
.hero-title em::before{
  content:""; position:absolute; inset:-14% -8%; z-index:-1; border-radius:44%;
  background:radial-gradient(58% 120% at 50% 52%, rgba(0,230,230,.30), rgba(0,230,230,0) 72%);
  filter:blur(9px);
}
@keyframes simonSheen{ 0%{ background-position:190% 0; } 100%{ background-position:-30% 0; } }

.hero-sub{
  margin:30px auto 0; max-width:36ch; font-size:clamp(17px,2vw,22px);
  color:var(--ink-2); line-height:1.5;
}
.hero-sub b{ font-weight:600; }
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px; }
.hero-cta.center{ margin-top:26px; }
.hero-trust{ margin-top:22px; font-size:13.5px; color:var(--ink-3); }
.hero-trust .mono{ color:var(--ink-2); font-size:12px; }

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3);
  transform-origin:bottom center;
  animation:cuePulse 3s ease-in-out infinite;   /* slow breathe: bigger ↔ smaller */
}
/* scale only — opacity stays with GSAP so the cue still fades on scroll */
@keyframes cuePulse{
  0%,100%{ transform:translateX(-50%) scale(1); }
  50%    { transform:translateX(-50%) scale(1.18); }
}
.scroll-line{ width:1px; height:40px; background:linear-gradient(var(--ink-3),transparent); animation:cue 2.2s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:scaleY(.2); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(.2); transform-origin:bottom; } }

/* ============================================================
   PROBLEM
   ============================================================ */
.problem{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; min-height:100svh; align-items:stretch; }
.problem-media{ position:relative; overflow:hidden; }
.problem-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; will-change:transform; }
.problem-scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,16,10,.15), rgba(20,16,10,0) 40%, var(--paper) 99%); }
.problem-copy{ padding:clamp(60px,9vh,140px) var(--pad); display:flex; flex-direction:column; justify-content:center; background:var(--paper); }
.problem-lines{ font-size:clamp(30px,4.6vw,60px); font-weight:600; letter-spacing:-.035em; line-height:1.06; }
.problem-lines .pline{ display:block; opacity:.12; transition:opacity .5s var(--ease), transform .5s var(--ease); transform:translateY(6px); }
.problem-lines .pline.lit{ opacity:1; transform:none; }
.problem-lines .accent{ color:var(--ink); position:relative; width:max-content; }
.problem-lines .accent.lit{ background:linear-gradient(transparent 62%, var(--accent) 62%); }
.problem-tail{ margin-top:38px; max-width:46ch; font-size:clamp(16px,1.5vw,19px); color:var(--ink-2); line-height:1.6; }

/* ============================================================
   DEMO — Holy shit moment
   ============================================================ */
.demo{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(90px,16vh,160px) var(--pad);
  background:var(--paper);
}
.demo-head{ text-align:center; margin-bottom:60px; }
.demo-head h2{ font-size:clamp(38px,5.5vw,72px); font-weight:600; margin:8px 0 0; letter-spacing:-.04em; }
.demo-conversation{
  max-width:860px; margin:0 auto;
  background:var(--card); border-radius:var(--radius-lg);
  padding:clamp(30px,5vw,50px);
  box-shadow:var(--shadow-md);
}
.demo-message{ display:flex; gap:16px; margin-bottom:32px; }
.demo-message:last-of-type{ margin-bottom:0; }
.demo-avatar{
  width:44px; height:44px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--hair); color:var(--ink-2); font-weight:600; font-size:18px;
}
.demo-avatar.simon-avatar{
  background:radial-gradient(circle at 38% 34%, #7ffcff 0%, var(--accent) 42%, #06c9c9 100%);
  color:var(--accent-ink); font-family:var(--mono); font-size:16px;
}
.demo-bubble{ flex:1; }
.demo-bubble p{ margin-bottom:14px; color:var(--ink-2); line-height:1.65; font-size:16.5px; }
.demo-bubble p:last-child{ margin-bottom:0; }
.demo-bubble strong{ color:var(--ink); font-weight:600; }
.demo-bubble ol{ margin:20px 0; padding-left:20px; }
.demo-bubble ol li{ margin-bottom:18px; color:var(--ink-2); line-height:1.65; font-size:16px; }
.demo-bubble ol li:last-child{ margin-bottom:0; }
.demo-bubble blockquote{
  margin:20px 0 0; padding:20px 24px; background:var(--paper);
  border-left:3px solid var(--accent); border-radius:var(--radius-sm);
  font-size:15.5px; color:var(--ink-2); line-height:1.6;
}
.demo-bubble blockquote p{ margin-bottom:12px; font-size:15.5px; }
.demo-caption{
  text-align:center; margin-top:38px; font-size:clamp(16px,1.5vw,19px);
  color:var(--ink-3); line-height:1.6; max-width:54ch; margin-left:auto; margin-right:auto;
}
.demo-caption strong{ color:var(--ink); font-weight:600; }

/* ============================================================
   MEET
   ============================================================ */
.meet{
  display:grid; grid-template-columns:1fr .8fr; gap:clamp(30px,6vw,90px);
  align-items:center; max-width:var(--maxw); margin:0 auto;
  padding:clamp(90px,16vh,190px) var(--pad);
}
.meet-text h2{ font-size:clamp(34px,5vw,68px); font-weight:600; margin:8px 0 26px; letter-spacing:-.04em; }
.meet-points{ list-style:none; padding:0; margin:34px 0 0; display:flex; flex-direction:column; gap:16px; }
.meet-points li{ display:flex; gap:13px; align-items:flex-start; font-size:16.5px; color:var(--ink-2); }
.tick{ width:20px; height:20px; flex:none; border-radius:50%; background:var(--accent); position:relative; margin-top:2px; }
.tick::after{ content:""; position:absolute; left:6px; top:5px; width:4px; height:8px; border:solid var(--accent-ink); border-width:0 2px 2px 0; transform:rotate(45deg); }
.meet-phone{ justify-self:center; }
.phone-shot{ width:min(340px, 78vw); height:auto; filter:drop-shadow(0 40px 80px rgba(5,5,5,.18)); }

/* ============================================================
   SCROLLY — sticky phone; screens scrub on scroll. Each step's
   text sticks (dwells) in the centre before releasing to the next.
   ============================================================ */
.scrolly{ position:relative; background:var(--paper-2); }
.scrolly-track{ position:relative; }
.scrolly-stage{
  position:sticky; top:0; height:100svh; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.stage-glow{
  position:absolute; width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,230,230,.22), transparent 62%);
  filter:blur(20px); z-index:0;
}
.stage-phone{ position:relative; width:min(360px,74vw); aspect-ratio:700/1276; z-index:1; }
.stage-phone .shot{
  position:absolute; inset:0; width:100%; height:auto;
  filter:drop-shadow(0 44px 90px rgba(5,5,5,.24));
  opacity:0; transform:translateY(24px) scale(.98); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.stage-phone .shot.is-active{ opacity:1; transform:none; }

/* steps scroll over the pinned stage; each is TALL and its text sticks
   (dwells) in the viewport centre for the extra height → "stops a bit longer" */
.scrolly-steps{ margin-top:-100svh; position:relative; z-index:2; max-width:var(--maxw); margin-left:auto; margin-right:auto; padding:0 var(--pad); }
.step{ min-height:170svh; }
.step-inner{
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; justify-content:center; max-width:440px;
}
/* alternate left / right so text never sits over the phone */
.step[data-step="0"] .step-inner, .step[data-step="2"] .step-inner{ margin-right:auto; }
.step[data-step="1"] .step-inner, .step[data-step="3"] .step-inner{ margin-left:auto; }
.step-index{ align-self:flex-start; font-size:12px; color:var(--accent-ink); background:var(--accent); padding:5px 10px; border-radius:var(--radius-pill); margin-bottom:20px; }
.step h3{ font-size:clamp(28px,3.6vw,46px); font-weight:600; letter-spacing:-.035em; }
.step p{ margin-top:18px; font-size:clamp(15px,1.4vw,18px); color:var(--ink-3); line-height:1.6; }
/* active-step focus: current pops, others recede */
.step .step-inner > *{ opacity:.28; transform:translateY(6px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.step.is-current .step-inner > *{ opacity:1; transform:none; }

/* ============================================================
   DOMAINS
   ============================================================ */
.domains{ max-width:var(--maxw); margin:0 auto; padding:clamp(90px,16vh,180px) var(--pad); }
.domains-head{ max-width:760px; margin-bottom:60px; }
.domains-head h2{ font-size:clamp(34px,5.4vw,72px); font-weight:600; margin-bottom:22px; }
.domain-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.domain-card{
  background:var(--card); border:1px solid var(--hair); border-radius:var(--radius);
  padding:26px 24px 28px; min-height:190px; display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  will-change:transform;
}
.domain-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--hair-2); }
.dnum{ font-size:11px; color:var(--ink-4); }
.domain-card h3{ font-size:22px; font-weight:600; margin:12px 0 14px; letter-spacing:-.02em; }
.domain-card p{ margin-top:auto; color:var(--ink-3); font-size:15px; line-height:1.5; }
.domain-card:hover h3{ color:var(--ink); }

/* ============================================================
   MEMORY BAND
   ============================================================ */
.memory{
  display:grid; grid-template-columns:.8fr 1fr; gap:clamp(30px,6vw,90px); align-items:center;
  max-width:var(--maxw); margin:0 auto; padding:clamp(70px,12vh,150px) var(--pad);
}
.memory-phone{ justify-self:center; }
.memory-copy h2{ font-size:clamp(32px,4.6vw,62px); font-weight:600; margin:10px 0 30px; }
.memory-quote{
  margin:0 0 28px; padding:24px 26px; background:var(--card);
  border:1px solid var(--hair); border-left:3px solid var(--accent); border-radius:var(--radius);
  font-size:clamp(17px,1.7vw,21px); line-height:1.5; color:var(--ink); font-weight:500;
}
.memory-quote cite{ display:block; margin-top:16px; font-style:normal; font-size:11px; color:var(--ink-4); }

/* ============================================================
   PEOPLE
   ============================================================ */
.people{ background:var(--paper-2); padding:clamp(90px,15vh,170px) var(--pad); }
.people-head{ max-width:var(--maxw); margin:0 auto 56px; }
.people-head h2{ font-size:clamp(34px,5.4vw,72px); font-weight:600; margin-top:20px; }
.people-row{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.person{ margin:0; }
.person-img{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:3/4; }
.person-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.person:hover .person-img img{ transform:scale(1.04); }
.person figcaption{ padding:22px 4px 0; }
.person figcaption .mono{ font-size:11px; color:var(--ink-4); }
.person figcaption p{ margin-top:12px; font-size:16.5px; color:var(--ink-2); line-height:1.5; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing{ padding:clamp(90px,15vh,180px) var(--pad); display:flex; justify-content:center; }
.price-card{
  position:relative; width:min(640px,100%); text-align:center; overflow:hidden;
  background:var(--card); border:1px solid var(--hair); border-radius:var(--radius-lg);
  padding:clamp(40px,6vw,68px) clamp(26px,5vw,60px); box-shadow:var(--shadow-lg);
}
.price-orb{
  position:absolute; top:-90px; left:50%; transform:translateX(-50%);
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,230,230,.35), transparent 62%); filter:blur(10px);
}
.price-card .kicker{ justify-content:center; }
.price{ display:flex; align-items:flex-start; justify-content:center; gap:8px; margin:8px 0 6px; }
.price .amt{ font-size:clamp(72px,12vw,120px); font-weight:700; letter-spacing:-.05em; line-height:.9; }
.price .per{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:14px; text-align:left; }
.price-trial{ font-size:11.5px; color:var(--accent-ink); background:var(--accent-soft); display:inline-block; padding:7px 14px; border-radius:var(--radius-pill); margin-bottom:32px; }
.perks{ list-style:none; padding:0; margin:0 auto 36px; max-width:400px; text-align:left; display:flex; flex-direction:column; gap:15px; }
.perks li{ display:flex; gap:12px; align-items:flex-start; font-size:16px; color:var(--ink-2); }
.perks b{ font-weight:600; }
.price-legal{ margin-top:26px; font-size:12.5px; color:var(--ink-4); line-height:1.5; max-width:44ch; margin-inline:auto; }

/* ============================================================
   FINAL + FOOTER
   ============================================================ */
.final{
  position:relative; text-align:center; padding:clamp(110px,20vh,220px) var(--pad);
  display:flex; flex-direction:column; align-items:center; gap:26px; overflow:hidden;
}
.final-orb{
  position:absolute; top:8%; left:50%; transform:translateX(-50%);
  width:min(520px,90vw); height:min(520px,90vw); border-radius:50%;
  background:radial-gradient(circle, rgba(0,230,230,.20), transparent 60%); filter:blur(24px); z-index:0;
}
.final h2{ position:relative; z-index:1; font-size:clamp(38px,7vw,92px); font-weight:600; letter-spacing:-.045em; }
.final p{ position:relative; z-index:1; max-width:42ch; color:var(--ink-2); font-size:clamp(16px,1.6vw,20px); }
.final .btn{ position:relative; z-index:1; }

.foot{
  border-top:1px solid var(--hair); padding:44px var(--pad);
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 30px; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto;
}
.foot-brand{ display:inline-flex; align-items:center; gap:10px; }
.foot-tag{ color:var(--ink-3); font-size:14px; }
.foot-legal{ font-size:10.5px; color:var(--ink-3); }

/* ============================================================
   REVEAL animation states (JS toggles .in)
   ============================================================ */
.reveal, .reveal-phone{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-phone{ transform:translateY(40px) scale(.97); }
.reveal.in, .reveal-phone.in{ opacity:1; transform:none; }
.domain-card{ opacity:0; transform:translateY(30px); }
.domain-card.in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .nav-links{ display:none; }
  .problem{ grid-template-columns:1fr; }
  .problem-media{ min-height:56svh; }
  .problem-img{ position:absolute; }
  .problem-scrim{ background:linear-gradient(0deg, var(--paper), rgba(20,16,10,0) 55%); }
  .demo-conversation{ padding:clamp(20px,4vw,30px); }
  .demo-message{ flex-direction:column; gap:10px; }
  .demo-avatar{ width:38px; height:38px; font-size:16px; }
  .meet, .memory{ grid-template-columns:1fr; text-align:left; }
  .meet-phone, .memory-phone{ order:-1; }
  .domain-grid{ grid-template-columns:1fr 1fr; }
  .people-row{ grid-template-columns:1fr; max-width:460px; }
  /* scrolly on mobile: phone pinned to the upper area; the dwelling
     step text sits in a legible paper panel in the lower area */
  .scrolly-stage{ align-items:flex-start; padding-top:9svh; }
  .stage-phone{ width:min(230px,56vw); }
  .stage-glow{ width:360px; height:360px; }
  .step{ min-height:150svh; }
  .step-inner{
    max-width:none; margin:0 !important;
    justify-content:flex-end; padding-bottom:9svh;
    background:linear-gradient(to top, var(--paper-2) 34%, rgba(239,237,231,.86) 46%, transparent 66%);
  }
}
@media (max-width: 560px){
  .domain-grid{ grid-template-columns:1fr; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .store-badge{ justify-content:center; }
  .price .amt{ font-size:88px; }
  .nav-cta{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-phone, .domain-card, .problem-lines .pline{ opacity:1 !important; transform:none !important; }
  .hero-headline, .hero-actions{ opacity:1 !important; }
  .scroll-line, .scroll-cue, .hero-title em{ animation:none; }
  .hero-title em{ background-position:50% 0; }
  .hero-video{ display:none; }
  .orb-mark, .orb-mark::before, .orb-mark::after{ animation:none !important; }
  /* reduced motion: focus all step text (screens still swap via IntersectionObserver) */
  .step .step-inner > *{ opacity:1 !important; transform:none !important; }
}