/* ═══════════════════════════════════════════════════════════════════════
   KROX public homepage — SOFT RESET (2026-08-11)

   Five calm, deliberate parts, two cinematic photo anchors (top + bottom),
   everything between them is quiet editorial typography. No SVG scroll
   movie, no scroll-scrubbed choreography. See
   docs/ONBOARDING_V3_PRODUCT_AND_CREATIVE_CONTEXT.md §5e.

   This file owns all presentation; landing.js owns behavior (nav
   solid-on-scroll, reveal-on-scroll, lower-vision parallax, reduced
   motion). The hero artwork remains static for exact UI registration.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --ink:        #080705;
  --ink-2:      #100E0B;
  --ink-3:      #17140F;
  --ivory:      #F7F2EA;
  --ivory-86:   rgba(247,242,234,.86);
  --ivory-70:   rgba(247,242,234,.70);
  --ivory-50:   rgba(247,242,234,.50);
  --ivory-30:   rgba(247,242,234,.30);
  --ivory-16:   rgba(247,242,234,.16);
  --ivory-10:   rgba(247,242,234,.10);
  --ivory-08:   rgba(247,242,234,.08);
  --ivory-05:   rgba(247,242,234,.05);
  --amber:      #E3A854;
  --amber-hi:   #F4C989;
  --amber-16:   rgba(227,168,84,.16);
  --amber-30:   rgba(227,168,84,.30);
  --amber-40:   rgba(227,168,84,.40);
  --coral:      #E08A5B;
  --magenta:    #E24FA8;
  --violet:     #8A3FE0;
  --cyan:       #35D9D9;
  --green:      #3ECF6A;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--ink); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ font-family:var(--serif); font-weight:460; margin:0; letter-spacing:-.01em; }
a{ color:inherit; text-decoration:none; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--amber); color:var(--ink); }

.wrap{ max-width:var(--container); margin:0 auto; padding:0 clamp(24px,5vw,64px); }

/* ── film grain, fixed, decorative ── */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══════════════════════ NAV ═══════════════════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px;
  padding:22px clamp(24px,5vw,64px);
  background:transparent; border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), padding .4s var(--ease);
}
.nav-links{ justify-self:center; }
.nav.is-solid{
  background:rgba(8,7,5,.86); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--ivory-08); padding-top:14px; padding-bottom:14px;
}
.nav-mark{
  font-family:var(--serif); font-size:19px; font-weight:500; letter-spacing:.22em; color:var(--amber-hi);
  text-shadow:0 1px 10px rgba(227,168,84,.35);
}
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-link{ font-size:12.5px; letter-spacing:.03em; color:var(--ivory-70); transition:color .25s; }
.nav-link:hover{ color:var(--ivory); }
.nav-actions{ display:flex; align-items:center; gap:14px; }
.btn-nav-primary{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:11px 18px; border-radius:9px; white-space:nowrap;
  color:#1B1206; background:linear-gradient(180deg,var(--amber-hi),var(--amber));
  box-shadow:0 8px 22px -8px rgba(227,168,84,.55);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-nav-primary svg{ width:13px; height:13px; }
.btn-nav-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 28px -8px rgba(227,168,84,.7); }
.btn-nav-ghost{
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:10px 18px; border-radius:9px; border:1px solid var(--ivory-30); color:var(--ivory);
  transition:border-color .25s, background .25s;
}
.btn-nav-ghost:hover{ border-color:var(--ivory-50); background:var(--ivory-05); }

/* ═══════════════════════ SHARED SCAFFOLD ═══════════════════════ */
.sec{ position:relative; padding:clamp(90px,13vh,150px) 0; }
.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber); font-weight:500; margin-bottom:22px;
}
.kicker::before{ content:''; width:22px; height:1px; background:var(--amber-40); }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0ms); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }
/* Hero content is the first thing painted — it must never sit behind a
   scroll/IntersectionObserver gate. .hero-eyebrow/.hero-headline/
   .hero-sub/.hero-actions/.hero-visual keep the "reveal" class (so
   landing.js's generic querySelectorAll(".reveal") doesn't need a
   special case) but are opted out of the fade-in itself, always
   rendering at full opacity from first paint regardless of JS timing. */
.hero .reveal{ opacity:1; transform:none; transition:none; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:15px; font-weight:600;
  padding:16px 30px; border-radius:100px; white-space:nowrap;
  letter-spacing:.02em;
  transition:transform .3s var(--ease), background .3s, border-color .3s, color .3s, box-shadow .3s;
}
.btn-primary{ background:var(--ivory); color:var(--ink); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -10px rgba(227,168,84,.45); }
.btn-ghost{ border:1px solid var(--ivory-30); color:var(--ivory); font-weight:500; }
.btn-ghost:hover{ border-color:var(--ivory-50); transform:translateY(-2px); }
.btn-lg{ padding:18px 36px; font-size:16px; }

/* ═══════════════════════════════════════════════════════════════
   1. HERO / FIRST FOLD — one shared 16:9 coordinate system
   ═══════════════════════════════════════════════════════════════ */
.hero{
  position:relative; overflow:hidden;
  min-height:100svh;
  background:#050403;
}
.hero-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:#050403;
}

/* The complete clean scene is rendered exactly once. `contain` preserves
   the source ratio and uses the hero's black foundation as harmless
   letterbox space on non-16:9 viewports. */
.hero-world{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  isolation:isolate;
}
.world-photo{
  position:absolute; inset:0; z-index:0;
  background-image:url('/static/landing_v3/assets/hero-world-clean.png');
  background-size:contain;
  background-position:center top;
  background-repeat:no-repeat;
  animation:heroResolve 1s var(--ease) both;
}
/* Static atmosphere creates separation without modifying scene geometry. */
.hero-world::before,
.hero-world::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
}
.hero-world::before{
  background:
    radial-gradient(44% 28% at 69% 17%, rgba(96,128,159,.045), transparent 74%),
    radial-gradient(32% 36% at 66% 47%, rgba(227,168,84,.045), transparent 72%),
    radial-gradient(25% 42% at 27% 73%, rgba(227,168,84,.035), transparent 75%);
}
.hero-world::after{
  background:radial-gradient(ellipse at center, transparent 48%, rgba(2,2,2,.11) 78%, rgba(0,0,0,.3) 100%);
}
@keyframes heroResolve{
  from{ opacity:.78; filter:brightness(.88); }
  to{ opacity:1; filter:brightness(1); }
}

/* Six routes follow the major light paths already present in the artwork. */
.network-overlay{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; overflow:visible;
  opacity:0; animation:networkResolve .7s var(--ease) .7s forwards;
  transform:translate3d(var(--network-x,0),var(--network-y,0),0);
  will-change:transform;
}
.network-base path,
.network-flow path{ vector-effect:non-scaling-stroke; }
.network-base path{ stroke-width:1.1; opacity:.14; }
.network-flow path{
  stroke-width:1.45; stroke-dasharray:4 180; stroke-dashoffset:0;
  opacity:.52; animation:networkFlow var(--flow-speed,6s) linear infinite;
}
.network-overlay .route-gold{ stroke:#f5b552; }
.network-overlay .route-cyan{ stroke:#50dce2; }
.network-overlay .route-magenta{ stroke:#ef63be; }
.flow-1{ --flow-speed:6.4s; }
.flow-2{ --flow-speed:5.6s; animation-delay:-2.1s!important; }
.flow-3{ --flow-speed:6.8s; animation-delay:-4.3s!important; }
.flow-4{ --flow-speed:7.2s; animation-delay:-1.4s!important; }
.flow-5{ --flow-speed:6s; animation-delay:-3.7s!important; }
.flow-6{ --flow-speed:7.6s; animation-delay:-5.2s!important; }
.hub-energy{ transform-origin:1088px 417px; animation:hubBreathe 5.8s ease-in-out infinite; }
@keyframes networkResolve{ to{ opacity:1; } }
@keyframes networkFlow{ to{ stroke-dashoffset:-184; } }
@keyframes hubBreathe{
  0%,100%{ opacity:.38; transform:scale(.985); }
  50%{ opacity:.68; transform:scale(1.015); }
}

/* Copy shares the scene coordinate system and occupies its quiet left zone. */
.hero-inner{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center;
  width:100%;
  padding:clamp(88px,9vh,118px) clamp(34px,4.2vw,80px) clamp(130px,16vh,174px);
  pointer-events:none;
}
.hero-copy{
  text-align:left; width:32%; max-width:500px; min-width:400px; pointer-events:auto;
  animation:heroCopyResolve .85s var(--ease) .12s both;
}
@keyframes heroCopyResolve{
  from{ opacity:0; transform:translate3d(0,7px,0); }
  to{ opacity:1; transform:translate3d(0,0,0); }
}
.hero-eyebrow{
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:var(--amber-hi); margin:0 0 22px;
}
.hero-headline{
  font-family:var(--serif); font-weight:440; letter-spacing:-.01em;
  font-size:clamp(1.85rem,2.75vw,3.25rem); line-height:1.17; color:var(--ivory);
  text-shadow:0 2px 18px rgba(0,0,0,.7);
}
.hero-headline .accent{ color:var(--amber-hi); font-weight:500; }
.hero-sub{
  margin-top:24px; font-size:14.5px; line-height:1.7; color:var(--ivory-70);
  max-width:400px;
}
.hero-actions{ margin-top:32px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hero-actions .btn-primary{
  background:linear-gradient(180deg,var(--amber-hi),var(--amber)); color:#1B1206;
  font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:15px 22px; box-shadow:0 14px 34px -12px rgba(227,168,84,.6);
}
.hero-actions .btn-primary svg{ width:14px; height:14px; }
.hero-actions .btn-primary:hover{ box-shadow:0 18px 40px -12px rgba(227,168,84,.75); }
.hero-actions .btn-ghost{
  font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:15px 26px;
}

/* Status cards are HTML registered to fixed points in the 16:9 scene. */
.status-card{
  position:absolute; left:var(--x); top:var(--y); z-index:2;
  display:flex; flex-direction:column; gap:1px;
  min-width:128px; padding:9px 13px 10px; border-radius:10px;
  background:rgba(7,6,4,.87);
  border:1px solid rgba(227,168,84,var(--border-alpha,.3));
  box-shadow:0 var(--shadow-y,14px) var(--shadow-blur,30px) -14px rgba(0,0,0,.9);
  backdrop-filter:blur(var(--card-blur,4px));
  -webkit-backdrop-filter:blur(var(--card-blur,4px));
  transform:translate3d(var(--card-x,0),calc(var(--card-y,0) + var(--depth-y,0px)),0) scale(var(--card-scale,1));
  animation:cardResolve .65s var(--ease) var(--resolve-delay,.45s) both,
            cardFloat var(--float-speed,8s) ease-in-out var(--float-delay,0s) infinite;
  will-change:transform;
}
.status-card.depth-far{
  --card-scale:.985; --depth-y:-1px; --shadow-y:9px; --shadow-blur:22px;
  --border-alpha:.24; --card-blur:3px; opacity:.94;
}
.status-card.depth-mid{
  --card-scale:1; --shadow-y:14px; --shadow-blur:30px;
}
.status-card.depth-near{
  --card-scale:1.012; --depth-y:-2px; --shadow-y:20px; --shadow-blur:38px;
  --border-alpha:.42; --card-blur:5px; z-index:3;
}
.status-card:nth-of-type(2){ --float-speed:8.8s; --float-delay:-2.2s; --resolve-delay:.42s; }
.status-card:nth-of-type(3){ --float-speed:9.6s; --float-delay:-5.1s; --resolve-delay:.5s; }
.status-card:nth-of-type(4){ --float-speed:8.2s; --float-delay:-3.7s; --resolve-delay:.58s; }
.status-card:nth-of-type(5){ --float-speed:10.2s; --float-delay:-6.4s; --resolve-delay:.66s; }
.status-card:nth-of-type(6){ --float-speed:9.1s; --float-delay:-1.5s; --resolve-delay:.74s; }
.status-card:nth-of-type(7){ --float-speed:10.6s; --float-delay:-4.6s; --resolve-delay:.82s; }
@keyframes cardResolve{ from{ opacity:0; } }
@keyframes cardFloat{
  0%,100%{ transform:translate3d(var(--card-x,0),calc(var(--card-y,0) + var(--depth-y,0px)),0) scale(var(--card-scale,1)); }
  50%{ transform:translate3d(var(--card-x,0),calc(var(--card-y,0) + var(--depth-y,0px) - 3px),0) scale(var(--card-scale,1)); }
}
.sc-dot{ position:absolute; top:11px; left:12px; width:5px; height:5px; border-radius:50%; }
.sc-title{
  margin-left:13px; font-size:8.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700;
  color:var(--ivory-50);
}
.status-card strong{ margin-top:3px; font-size:12.5px; font-weight:600; color:var(--ivory); }
.sc-sub{ font-size:9.5px; color:var(--ivory-30); }
.dot-green{ background:var(--green); box-shadow:0 0 8px 1px rgba(62,207,106,.7); }
.dot-amber{ background:var(--amber-hi); box-shadow:0 0 8px 1px rgba(244,201,137,.7); }
.dot-violet{ background:var(--violet); box-shadow:0 0 8px 1px rgba(138,63,224,.7); }

/* Premium rail integrated over the dark lower edge of the composition. */
.hero-feature-strip{
  position:absolute; z-index:4;
  left:clamp(28px,3.7vw,72px); right:clamp(28px,3.7vw,72px); bottom:clamp(20px,3.8vh,38px);
  display:flex; align-items:stretch;
  border:1px solid rgba(227,168,84,.48); border-radius:12px;
  background:rgba(7,6,4,.86);
  box-shadow:0 18px 50px rgba(0,0,0,.38);
  padding:clamp(13px,1.7vh,18px) clamp(10px,1.5vw,22px);
}
.feat-item{
  flex:1 1 0; display:flex; align-items:flex-start; gap:10px; min-width:0;
  padding:0 clamp(7px,1.15vw,18px); border-left:1px solid rgba(227,168,84,.22);
}
.feat-item:first-child{ border-left:none; padding-left:0; }
.feat-ic{
  flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(244,201,137,.35); color:var(--amber-hi);
}
.feat-ic svg{ width:16px; height:16px; }
.feat-copy{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.feat-copy strong{ font-size:12.5px; font-weight:600; color:var(--ivory); }
.feat-copy{ font-size:11px; line-height:1.4; color:var(--ivory-50); }

@media (prefers-reduced-motion:reduce){
  .world-photo,.hero-copy,.network-overlay,.status-card,.hub-energy,.network-flow path{ animation:none!important; }
  .world-photo,.hero-copy,.network-overlay,.status-card{ opacity:1; }
  .network-flow path{ opacity:.18; stroke-dashoffset:0; }
  .hub-energy{ opacity:.48; transform:none; }
  .network-overlay,.status-card{ transform:none; }
}

/* ═══════════════════════════════════════════════════════════════
   2. CLEAN MIDDLE THESIS
   ═══════════════════════════════════════════════════════════════ */
.thesis{ background:var(--ink-2); }
.thesis-wrap{ max-width:880px; }
.thesis-lead{
  font-size:clamp(1.5rem,3.2vw,2.3rem); font-weight:440; line-height:1.32; color:var(--ivory);
}
.thesis-grid{ margin-top:48px; display:flex; flex-direction:column; gap:26px; max-width:640px; }
.thesis-p{ font-size:16.5px; line-height:1.75; color:var(--ivory-70); }
.thesis-p-em{ color:var(--amber-hi); font-family:var(--serif); font-size:19px; font-style:italic; }

/* ═══════════════════════════════════════════════════════════════
   3. RESTAURANT-FIRST + ONBOARDING REALITY
   ═══════════════════════════════════════════════════════════════ */
.reality{ background:var(--ink); border-top:1px solid var(--ivory-08); }
.reality-lead{
  font-size:clamp(1.4rem,3vw,2.1rem); font-weight:440; line-height:1.34; color:var(--ivory);
  max-width:720px;
}

.biz-row{
  margin-top:54px; display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--ivory-10); border-bottom:1px solid var(--ivory-10);
}
.biz-item{
  flex:1 1 150px; display:flex; flex-direction:column; gap:8px;
  padding:22px 22px 22px 0; border-right:1px solid var(--ivory-08);
}
.biz-item:last-child{ border-right:none; }
.biz-name{ font-family:var(--serif); font-size:18px; color:var(--ivory-86); }
.biz-status{ font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ivory-30); }
.biz-item.is-live .biz-name{ color:var(--ivory); }
.biz-item.is-live .biz-status{ color:var(--amber); position:relative; padding-left:13px; }
.biz-item.is-live .biz-status::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 10px 1px var(--amber-40);
}

.reality-flow{
  margin-top:64px; display:flex; flex-wrap:wrap; gap:40px 56px;
}
.flow-step{ display:flex; align-items:baseline; gap:14px; }
.flow-num{ font-family:var(--serif); font-size:14px; color:var(--amber); }
.flow-label{ font-size:15px; color:var(--ivory-70); }

.reality-note{ margin-top:46px; font-size:14.5px; color:var(--ivory-50); }

/* ═══════════════════════════════════════════════════════════════
   4. BOTTOM VISION CINEMATIC SCENE
   ═══════════════════════════════════════════════════════════════ */
.vision{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.vision-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.vision-photo{
  position:absolute; inset:-6%;
  background-image:url('/static/landing_v3/assets/vision-scene.jpg');
  background-size:cover; background-position:44% 55%; background-repeat:no-repeat;
  transform:scale(1.05);
  transition:transform 2.4s var(--ease);
  will-change:transform;
}
.vision-photo.is-in{
  transform:scale(1.0);
  animation:sceneBreathe 50s ease-in-out 2.4s infinite;
}
.vision-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,5,3,.55) 0%, rgba(6,5,3,.1) 30%, rgba(6,5,3,.06) 60%, rgba(6,5,3,.66) 100%);
}
.vision-glow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(30% 34% at 44% 66%, rgba(227,168,84,.28), transparent 68%);
  opacity:.7;
  animation:visionPulse 9s ease-in-out infinite;
}
@keyframes visionPulse{
  0%,100%{ opacity:.55; }
  50%{ opacity:.85; }
}
.vision-copy{
  position:relative; z-index:2; text-align:center; max-width:760px; padding:24px;
}
.vision-copy h2{
  font-size:clamp(1.7rem,3.8vw,2.7rem); font-weight:460; line-height:1.22; color:var(--ivory);
  text-shadow:0 3px 20px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.9);
}
.vision-line2{ margin-top:4px; color:var(--amber-hi); }
.vision-sub{
  margin-top:24px; font-size:15.5px; color:var(--ivory-86);
  text-shadow:0 2px 12px rgba(0,0,0,.8);
}
@media (prefers-reduced-motion: reduce){
  .vision-photo{ transform:scale(1.0); transition:none; }
  .vision-photo.is-in{ animation:none; }
  .vision-glow{ animation:none; opacity:.65; }
}

/* ═══════════════════════════════════════════════════════════════
   5. FINAL CTA / FOOTER
   ═══════════════════════════════════════════════════════════════ */
.final-cta{ background:var(--ink-2); }
.final-cta-wrap{
  display:flex; flex-direction:column; align-items:center; gap:36px; text-align:center;
}
.final-mark{ font-family:var(--serif); font-size:15px; letter-spacing:.34em; color:var(--amber-hi); }
.final-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center; }

.foot{ background:var(--ink); border-top:1px solid var(--ivory-08); padding:40px 0 28px; }
.foot-wrap{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
  padding-bottom:24px;
}
.foot-brand{ font-family:var(--serif); font-size:16px; color:var(--ivory-70); }
.foot-links{ display:flex; gap:24px; }
.foot-links a{ font-size:13.5px; color:var(--ivory-50); transition:color .2s; }
.foot-links a:hover{ color:var(--ivory-86); }
.foot-contact{ font-size:13.5px; color:var(--ivory-50); transition:color .2s; }
.foot-contact:hover{ color:var(--ivory-86); }
.foot-legal{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-top:20px; border-top:1px solid var(--ivory-08);
  font-size:12px; color:var(--ivory-30);
}
.foot-legal a{ margin-left:16px; color:var(--ivory-30); transition:color .2s; }
.foot-legal a:hover{ color:var(--ivory-70); }

/* ═══════════════════════════════════════════════════════════════
   POST-HERO HOMEPAGE — scoped; frozen hero rules above are unchanged
   ═══════════════════════════════════════════════════════════════ */
.page-section{position:relative;padding:clamp(92px,11vw,160px) 0;scroll-margin-top:72px}
.page-wrap{width:min(100% - 48px,1320px);margin:0 auto}
.section-kicker{margin-bottom:22px;color:#a66d1f;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.section-title{max-width:850px;font-size:clamp(2.2rem,4.2vw,4.6rem);line-height:1.04;letter-spacing:-.025em}
.section-copy{max-width:620px;margin-top:28px;font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.75}
.section-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);align-items:end;gap:clamp(48px,8vw,120px)}
.section-intro .section-copy{margin-top:0}
.split-layout{display:grid;grid-template-columns:minmax(340px,.68fr) minmax(0,1fr);align-items:center;gap:clamp(60px,8vw,126px)}
.split-copy .section-title{font-size:clamp(2.2rem,3.7vw,4.1rem)}
.text-link{display:inline-flex;gap:10px;margin-top:34px;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.text-link span{transition:transform .2s var(--ease)}.text-link:hover span{transform:translateX(4px)}

.journey-section{background:#eee8dd;color:#191610}
.journey-intro .section-copy{color:#5f584d}
.journey-track{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:clamp(70px,9vw,118px) 0 0;padding:0;list-style:none}
.journey-track::before{content:'';position:absolute;left:5%;right:5%;top:25px;height:1px;background:rgba(105,73,30,.24)}
.journey-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 10px}
.journey-icon{position:relative;z-index:1;display:grid;place-items:center;width:50px;height:50px;border:1px solid rgba(133,87,27,.45);border-radius:50%;background:#eee8dd;color:#9a641c}
.journey-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.journey-step strong{margin-top:20px;font-family:var(--serif);font-size:19px;font-weight:460}
.journey-step small{max-width:135px;margin-top:5px;color:#756d61;font-size:12px;line-height:1.45}

.customer-section{background:#17140f;color:var(--ivory)}
.customer-section .section-kicker,.categories-section .section-kicker,.onboarding-section .section-kicker{color:var(--amber)}
.customer-section .section-copy,.categories-section .section-copy,.onboarding-section .section-copy{color:var(--ivory-70)}
.text-outcomes{margin-top:42px;border-top:1px solid var(--ivory-10)}
.text-outcomes li{padding:14px 0;border-bottom:1px solid var(--ivory-10);color:var(--ivory-70);font-size:14px}
.customer-section .text-link{color:var(--amber-hi)}

.product-placeholder{position:relative;margin:0;overflow:hidden;border:1px solid rgba(227,168,84,.25);background:#0f0d0a}
.product-placeholder figcaption{position:absolute;left:24px;right:24px;bottom:20px;display:flex;justify-content:space-between;gap:16px;color:var(--ivory-50);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.product-placeholder figcaption small{color:var(--ivory-30);font-size:inherit}
.customer-placeholder{min-height:600px;display:grid;place-items:center;background:radial-gradient(circle at 58% 42%,rgba(227,168,84,.09),transparent 38%),#0d0c09}
.placeholder-shell{position:relative;width:245px;height:470px;padding:58px 20px 24px;border:1px solid rgba(247,242,234,.16);border-radius:34px;background:#090806;box-shadow:0 35px 80px rgba(0,0,0,.42)}
.placeholder-shell::before{content:'';position:absolute;top:22px;left:50%;width:72px;height:5px;transform:translateX(-50%);border-radius:6px;background:rgba(247,242,234,.13)}
.placeholder-line{display:block;width:100%;height:1px;margin-bottom:28px;background:rgba(247,242,234,.12)}
.placeholder-line.short{width:62%}.placeholder-space{display:block;height:230px;border:1px solid rgba(227,168,84,.12)}

.business-section{background:#e3ddd2;color:#191610}
.business-layout{grid-template-columns:minmax(0,1fr) minmax(340px,.72fr)}
.business-section .section-copy{color:#625b50}
.merchant-placeholder{aspect-ratio:16/10;min-height:0;background:#25211b;box-shadow:0 30px 70px rgba(52,43,31,.15)}
.placeholder-browser{display:flex;gap:6px;height:42px;padding:17px 18px;border-bottom:1px solid rgba(247,242,234,.09)}
.placeholder-browser span{width:7px;height:7px;border-radius:50%;background:rgba(247,242,234,.2)}
.placeholder-dashboard{display:grid;grid-template-columns:1.3fr .8fr;grid-template-rows:1fr 1fr;gap:14px;padding:24px;height:calc(100% - 92px)}
.placeholder-dashboard i{border:1px solid rgba(247,242,234,.09);background:rgba(247,242,234,.025)}.placeholder-dashboard i:first-child{grid-row:1/3}
.numbered-outcomes{margin:40px 0 0;padding:0;list-style:none;border-top:1px solid rgba(25,22,16,.16)}
.numbered-outcomes li{display:grid;grid-template-columns:46px 1fr;padding:17px 0;border-bottom:1px solid rgba(25,22,16,.16);font-family:var(--serif);font-size:18px}
.numbered-outcomes span{color:#9a641c;font-family:var(--sans);font-size:11px;letter-spacing:.08em}.business-section .text-link{color:#754914}

.categories-section{background:#11100d;color:var(--ivory)}
.categories-layout{display:grid;grid-template-columns:minmax(360px,.9fr) minmax(390px,1fr);align-items:center;gap:clamp(60px,8vw,126px)}
.category-image{margin:0;overflow:hidden;border:1px solid rgba(227,168,84,.2)}.category-image img{display:block;width:100%;height:auto}
.category-index{display:grid;grid-template-columns:1fr 1fr;margin-top:44px;border-top:1px solid var(--ivory-10)}
.category-index li{display:flex;flex-direction:column;gap:6px;padding:18px 12px 18px 0;border-bottom:1px solid var(--ivory-10)}
.category-index li:nth-child(even){padding-left:24px;border-left:1px solid var(--ivory-10)}
.category-index strong{font-family:var(--serif);font-size:20px;font-weight:460}.category-index span{color:var(--ivory-30);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.category-index .is-current strong,.category-index .is-current span{color:var(--amber-hi)}

.why-section{background:#f4f0e8;color:#191610}.why-title{max-width:1060px}
.comparison{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(60px,8vw,100px);border-top:1px solid rgba(25,22,16,.18);border-bottom:1px solid rgba(25,22,16,.18)}
.comparison-side{padding:40px clamp(24px,4vw,60px) 42px 0}.comparison-side+.comparison-side{padding-left:clamp(24px,4vw,60px);border-left:1px solid rgba(25,22,16,.18)}
.comparison-side h3{font-size:clamp(1.5rem,2.2vw,2.2rem)}
.comparison-side li{position:relative;padding:16px 0 16px 25px;border-bottom:1px solid rgba(25,22,16,.1);color:#625b50;font-size:15px}
.comparison-side li::before{content:'—';position:absolute;left:0;color:#9b9184}.comparison-side.connected h3{color:#8a5718}.comparison-side.connected li::before{content:'→';color:#a66d1f}

.onboarding-section{background:#0b0a08;color:var(--ivory)}
.onboarding-layout{display:grid;grid-template-columns:minmax(390px,.85fr) minmax(0,1fr);align-items:center;gap:clamp(60px,8vw,126px)}
.onboarding-steps{display:grid;grid-template-columns:1fr 1fr;margin:42px 0 0;padding:0;list-style:none;border-top:1px solid var(--ivory-10)}
.onboarding-steps li{display:grid;grid-template-columns:38px 1fr;padding:17px 14px 17px 0;border-bottom:1px solid var(--ivory-10);color:var(--ivory-70);font-size:13px}
.onboarding-steps li:nth-child(even){padding-left:18px;border-left:1px solid var(--ivory-10)}.onboarding-steps span{color:var(--amber);font-size:10px;letter-spacing:.08em}
.final-actions{display:flex;align-items:center;justify-content:flex-start;gap:18px;flex-wrap:wrap;margin-top:38px}
.onboarding-placeholder{aspect-ratio:16/10;background:radial-gradient(circle at 28% 34%,rgba(227,168,84,.08),transparent 36%),#11100d}
.placeholder-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:20% 10%}.placeholder-progress i{height:3px;background:rgba(247,242,234,.12)}.placeholder-progress i.done{background:rgba(227,168,84,.62)}

.foot{background:#050403;border-top:1px solid var(--ivory-08);padding:48px 0 28px}
.foot-main{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:44px;padding-bottom:38px}
.foot-brand{font-family:var(--serif);font-size:17px;letter-spacing:.2em;color:var(--amber-hi)}
.foot-links{justify-self:center;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px}.foot-links a,.foot-contact{color:var(--ivory-50);font-size:12.5px;transition:color .2s}
.foot-links a:hover,.foot-contact:hover{color:var(--ivory)}
.foot-legal{display:flex;justify-content:space-between;gap:20px;padding-top:22px;border-top:1px solid var(--ivory-08);color:var(--ivory-30);font-size:11px}

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width:1040px){
  .nav-links{ display:none; }
}
@media (max-width:1100px){
  /* Deliberate staged layout: copy first, then the complete uncropped scene. */
  .hero{ min-height:auto; padding-bottom:24px; display:flex; flex-direction:column; }
  .hero-inner{ position:relative; order:1; inset:auto; padding:104px 24px 24px; display:block; }
  .hero-copy{ text-align:center; width:100%; min-width:0; max-width:none; margin:0 auto; }
  .hero-headline{ margin:0 auto; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .hero-actions{ justify-content:center; }
  .hero-world{
    order:2; position:relative; inset:auto;
    width:100%; aspect-ratio:1672/941; margin:0 auto;
  }
  .hero-feature-strip{
    order:3; position:relative; inset:auto; width:calc(100% - 48px); margin:24px auto 0;
    flex-wrap:wrap; gap:14px 0; border-radius:12px;
  }
  .feat-item{ flex:1 1 46%; border-left:none; padding:0 0 0 4px; }
}
@media (max-width:760px){
  .hero-headline{ font-size:clamp(1.5rem,6.5vw,2rem); }
  .status-card{ min-width:0; padding:6px 8px 7px; border-radius:7px; }
  .sc-title{ font-size:7px; margin-left:11px; }
  .status-card strong{ font-size:10px; }
  .sc-sub{ font-size:8px; }
  .status-card.depth-far,.status-card.depth-near{ transform:scale(1); }
  .biz-item{ flex:1 1 42%; border-bottom:1px solid var(--ivory-08); }
  .thesis-grid{ max-width:none; }
  .reality-flow{ gap:28px 40px; }
}
@media (max-width:520px){
  .nav{ padding-left:16px; padding-right:16px; gap:8px; }
  .nav-mark{ font-size:16px; letter-spacing:.14em; }
  .btn-nav-primary{ font-size:10px; padding:9px 12px; gap:5px; }
  .btn-nav-ghost{ font-size:10px; padding:9px 12px; }
  .hero-actions,.final-actions{ flex-direction:column; width:100%; }
  .hero-actions .btn,.final-actions .btn{ width:100%; justify-content:center; }
  .feat-item{ flex:1 1 100%; padding-left:0; }
  .biz-item{ flex:1 1 100%; padding:16px 0; border-right:none; }
  .foot-wrap{ flex-direction:column; align-items:flex-start; }
}

/* Post-hero responsive rules. Kept separate from the frozen hero queries. */
@media (max-width:980px){
  .section-intro,.split-layout,.business-layout,.categories-layout,.onboarding-layout{grid-template-columns:1fr;gap:54px}
  .section-intro .section-copy{margin-top:0}
  .customer-layout .product-placeholder,.business-layout .product-placeholder,.onboarding-layout .product-placeholder{order:2}
  .customer-placeholder{min-height:520px}
  .merchant-placeholder,.onboarding-placeholder{width:min(100%,760px)}
  .category-image{width:min(100%,700px)}
  .foot-main{grid-template-columns:1fr;gap:28px}.foot-links{justify-self:start;justify-content:flex-start}
}
@media (max-width:760px){
  .page-section{padding:82px 0}.page-wrap{width:min(100% - 36px,1320px)}
  .section-title,.split-copy .section-title{font-size:clamp(2rem,9vw,3.1rem)}
  .section-intro{gap:28px}
  .journey-track{grid-template-columns:1fr 1fr;gap:0;margin-top:58px;border-top:1px solid rgba(105,73,30,.2)}
  .journey-track::before{display:none}
  .journey-step{align-items:flex-start;text-align:left;padding:24px 14px 26px 0;border-bottom:1px solid rgba(105,73,30,.2)}
  .journey-step:nth-child(even){padding-left:20px;border-left:1px solid rgba(105,73,30,.2)}
  .journey-icon{width:42px;height:42px}.journey-step strong{margin-top:14px;font-size:17px}
  .customer-placeholder{min-height:480px}.placeholder-shell{width:215px;height:400px}.placeholder-space{height:185px}
  .comparison{grid-template-columns:1fr}.comparison-side{padding:32px 0}.comparison-side+.comparison-side{padding-left:0;border-left:0;border-top:1px solid rgba(25,22,16,.18)}
  .category-index{grid-template-columns:1fr}.category-index li:nth-child(even){padding-left:0;border-left:0}
  .foot-legal{flex-direction:column}
}
@media (max-width:520px){
  .page-section{padding:68px 0}.page-wrap{width:min(100% - 28px,1320px)}
  .section-copy{font-size:15px;line-height:1.7}
  .customer-placeholder{min-height:420px}.product-placeholder figcaption{left:16px;right:16px;bottom:14px;flex-direction:column;gap:3px}
  .placeholder-shell{width:184px;height:338px;padding:50px 16px 18px}.placeholder-space{height:145px}
  .onboarding-steps{grid-template-columns:1fr}.onboarding-steps li:nth-child(even){padding-left:0;border-left:0}
  .final-actions{flex-direction:column;align-items:stretch}.final-actions .btn{width:100%;justify-content:center}
  .foot-links{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
}