/* ============================================================
   HALOCONCEPTSV5 — Halo Concepts v5
   Reference: "Crypto Landing Page" by Bogdan Falin / QClay
   ============================================================ */

:root{
  /* HALO material palette: marble, stone, brass, chrome */
  --bg:        #FFFFFF;  /* pure white — comparison trial */
  --bg-deep:   #F2F0EB;
  --ink:       #2B2825;  /* charcoal ink */
  --ink-2:     #4A453F;
  --muted:     #7D766D;  /* veining grey */
  --purple:    #A9865A;  /* aged brass (accent slot) */
  --purple-d:  #8F6E45;  /* brass ink — darker, for text/hover accents */
  --navy:      #121110;  /* marble black */
  --lime:      #A9865A;  /* primary CTA = brass */
  --lime-ink:  #121110;
  --card-sh:   0 24px 60px rgba(43,40,37,.10);
  --ease-out:  cubic-bezier(.22,.61,.21,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:auto; -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  font-family:'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:#E3DED4; color:var(--ink); }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg-deep); }
::-webkit-scrollbar-thumb{ background:#C6BFB2; border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:#A99F90; }

a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:none; }
:focus-visible{ outline:2px solid var(--purple-d); outline-offset:3px; border-radius:6px; }

/* =================== BUTTONS =================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 20px; border-radius:12px;
  font-weight:700; font-size:13.5px; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease-out), box-shadow .25s, filter .25s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
/* primary CTAs are machined BRASS, not flat swatches — lit metal banding
   with a dark brass edge and an inner highlight, text in marble black */
.btn-lime{
  background:linear-gradient(180deg,
    #CBA87A 0%, #B08C5F 42%, #8E6C42 56%, #A9865A 100%);
  color:var(--lime-ink);
  border:1px solid #7E603A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),
             0 10px 26px rgba(169,134,90,.38);
}
.btn-lime:hover{
  filter:brightness(1.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),
             0 14px 32px rgba(169,134,90,.5);
}
.btn-navy{ background:var(--navy); color:#fff; box-shadow:0 10px 24px rgba(18,17,16,.28); }
.btn-white{ background:#fff; color:var(--ink); box-shadow:0 10px 26px rgba(43,40,37,.14); }
.btn-lg{ height:52px; padding:0 27px; border-radius:14px; font-size:15px; }

/* =================== PRELOADER =================== */
.preloader{
  position:fixed; inset:0; z-index:999;
  background:var(--bg);
  display:grid; place-items:center;
  animation:preGone .6s ease 8.5s forwards; /* safety: self-hide if JS never runs */
}
@keyframes preGone{ to{ opacity:0; visibility:hidden; } }
/* the halo loader: marble ball + a ring of light that draws with progress */
.pre-stage{
  position:relative; width:300px; height:300px;
  display:grid; place-items:center;
  --halo-off:100; /* circles use pathLength="100"; JS drives this to 0 */
}
/* the rendered museum orb — real raytraced light, no CSS approximation */
.pre-ball{
  width:190px; height:190px;
  background:url("../assets/orb-museum.webp?v=2") center/104% no-repeat;
}
.pre-halo{ position:absolute; inset:0; overflow:visible; }
.pre-halo circle{
  fill:none; stroke-linecap:round;
  transform:rotate(-90deg); transform-origin:center;
}
.ph-track{ stroke:rgba(43,40,37,.10); stroke-width:2; }
.ph-band, .ph-chrome, .ph-shine{
  stroke-dasharray:100;
  stroke-dashoffset:var(--halo-off);
}
/* dark keyline drawn under the chrome — the band always has an edge on white */
.ph-band{ stroke:rgba(43,40,37,.16); stroke-width:10.5; }
.ph-chrome{ stroke:url(#chromeRing); stroke-width:8; }
/* catch-lights stay GREY — pure white segments vanish into the white page */
.ph-shine{ stroke:rgba(198,203,210,.9); stroke-width:1.3; }
.ph-hot{
  stroke:rgba(222,226,231,.9); stroke-width:5;
  stroke-dasharray:13 87; stroke-dashoffset:98;
}
.pre-flash{
  position:absolute; inset:0; border-radius:50%; opacity:0; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.6) 28%, rgba(255,255,255,0) 70%);
}
.pre-count{
  position:fixed; right:46px; bottom:36px;
  font-size:30px; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  /* chrome text on WHITE: brightest band stays visibly grey, dark edge
     shadow (a white bevel is invisible on a white page) */
  background:linear-gradient(168deg,
    #E4E7EB 0%, #B6BCC6 34%, #79808B 54%, #343A43 62%, #8B929D 72%, #D6D9DE 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 1px rgba(43,40,37,.25));
}

/* =================== NAV =================== */
.nav{
  position:relative; z-index:20;
  max-width:1240px; margin:26px auto 0;
  height:64px; border-radius:16px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 10px 0 22px;
}
.nav::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  /* reference: a tall soft wash inside the bar — strongest at the top edge,
     dissolving into pure white ~two-thirds of the way down */
  background:linear-gradient(180deg,
    rgba(43,40,37,.11) 0%, rgba(43,40,37,.05) 38%, rgba(43,40,37,0) 66%), #fff;
  box-shadow:0 10px 24px -8px rgba(43,40,37,.16),
             0 2px 6px rgba(43,40,37,.05);
}
/* HAL⬤ — the O is the marble, tucked tight against the L */
.brand{
  display:inline-flex; align-items:center; gap:0; text-decoration:none;
}
.brand .brand-o{ margin-left:-2px; }
.brand-word{
  font-weight:300; font-size:21px; letter-spacing:.02em; line-height:1;
  color:#2B2825;
}
.brand-o{
  display:inline-block; width:23px; height:23px;
  background:url("../assets/orb-small.webp?v=2") center/contain no-repeat;
}
.brand-o.tiny{ width:15px; height:15px; }
/* insurance clip on every image orb — even a fringe pixel stays circular */
.pre-ball, .brand-o, .lr-o, .coin{ border-radius:50%; overflow:hidden; }

/* pure-white page: every white element that sits directly on it gets a warm
   hairline so it reads as an object instead of melting into the wall */
.acc-item, .btn-white, .cta-badge, .float-btn, .side-node,
.chain-node .cn-circle, .chain-node .cn-label, .sn-label,
.feat-text .num-chip, .fsq{
  border:1px solid rgba(43,40,37,.08);
}
.nav-links{ display:flex; list-style:none; gap:28px; }
.nav-links a{
  text-decoration:none; font-size:13.5px; font-weight:600; color:var(--ink-2);
  transition:color .2s;
}
.nav-links a:hover{ color:var(--purple-d); }
.nav-ctas{ display:flex; gap:10px; }

/* =================== HERO =================== */
.hero{
  position:relative; min-height:100vh; overflow:hidden;
  min-height:100svh; /* iOS: stable vs the collapsing URL bar */
  padding:0 24px;
}
.hero-inner{
  position:relative; z-index:5;
  max-width:1100px; margin:0 auto; text-align:center;
  padding-top:72px;
}
.hero-h1{
  font-size:clamp(44px, 5.6vw, 80px);
  font-weight:800; line-height:1.04; letter-spacing:-.035em;
  color:var(--ink);
}
.hero-h1 .line{ display:block; }
.hero-h1 .w{ display:inline-block; }
.hero-sub{
  margin-top:26px; font-size:16.5px; line-height:1.6; font-weight:500;
  color:var(--muted);
}
.hero-ctas{
  margin-top:38px; display:flex; justify-content:center; gap:14px;
}

/* THE orb — one fixed element for hero fold + story section (no seam possible).
   Centered by negative margins, NEVER by a CSS transform: GSAP must be the
   only writer of transform, or its parse of a % translate races the
   stylesheet and can double-apply (off-center orb over the text). */
.story-orb{
  position:fixed; z-index:2; left:50%; top:100%;
  width:clamp(620px, 64vw, 1280px); aspect-ratio:1/1;
  margin-left:clamp(-640px, -32vw, -310px);   /* -width/2 */
  margin-top:clamp(-359px, -17.92vw, -173px); /* -width*0.28 = resting sliver */
  border-radius:50%;
  pointer-events:none; will-change:transform;
  /* the Obsidian orb — polished-marble light stack modeled on a studio
     render: tight specular hotspot, TWO crisp "window" reflections (the
     gloss cue), fresnel limb, broad diffuse, bounce light, and a LIGHT form
     shadow so the veining stays visible across the whole ball. Texture at
     106% crops the sphere-projection's smeared rim. No WebGL, no filters. */
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 8%, rgba(255,255,255,0) 22%),
    radial-gradient(ellipse 7% 16% at 71% 33%, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 4.5% 11% at 77% 27%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 87%, rgba(255,255,255,.10) 94%, rgba(255,255,255,.2) 98%, rgba(255,255,255,0) 100%),
    radial-gradient(circle at 38% 32%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(circle at 50% 99%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 18%),
    radial-gradient(circle at 64% 70%, rgba(0,0,0,0) 42%, rgba(0,0,0,.22) 72%, rgba(0,0,0,.42) 97%),
    url("../assets/marble-ball.webp?v=4") center/106% 106% no-repeat #14110E;
}
.orb-swirl{
  position:absolute; inset:-4%; border-radius:50%; display:block; opacity:.55;
  background:radial-gradient(circle at 68% 36%, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 36%),
             radial-gradient(circle at 30% 80%, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 30%);
  animation:swirl 26s linear infinite;
}
.orb-swirl.b{
  background:radial-gradient(circle at 28% 38%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 38%),
             radial-gradient(circle at 74% 78%, rgba(0,0,0,.26) 0%, rgba(0,0,0,0) 30%);
  animation:swirl 34s linear infinite reverse;
}
/* WebGL orb mount — full-viewport canvas layered exactly like the CSS orb;
   when the scene is live (body.webgl-on) the CSS orb + DOM shards hide and
   remain in the markup purely as the no-WebGL / reduced-motion fallback */
.orb3d{ position:fixed; inset:0; z-index:2; pointer-events:none; }
.orb3d canvas{ display:block; width:100%; height:100%; }
body.webgl-on .story-orb{ display:none; }
body.webgl-on .shards{ display:none; }

/* backdrop dims to near-black while the marble is on stage (scrubbed by JS).
   WARM black with suppressed blue: blending any blue-leaning dark over the
   lavender page passes through grey-violet midtones ("it turns purple") —
   a low-blue warm black cancels lavender's blue into neutral grey mid-fade */
.story-dim{
  position:fixed; inset:0; z-index:1; opacity:0;
  background:#141208; pointer-events:none;
}
@keyframes swirl{ to{ transform:rotate(360deg); } }

/* =================== DECORATION UTILITIES =================== */
.d-dots{
  position:absolute; width:86px; height:58px; pointer-events:none;
  background-image:radial-gradient(#C0B9AC 1.15px, transparent 1.4px);
  background-size:9px 9px; opacity:.55;
  animation:shimmer 7s ease-in-out infinite;
}
@keyframes shimmer{ 0%,100%{ opacity:.55; } 50%{ opacity:.28; } }
.d-hatch{
  position:absolute; width:56px; height:40px; border-radius:10px; pointer-events:none;
  background:repeating-linear-gradient(45deg, #C4BCAE 0 1.4px, transparent 1.4px 5px);
  opacity:.4;
}
.d-trace{ position:absolute; pointer-events:none; }
.trace-node{
  filter:drop-shadow(0 3px 6px rgba(43,40,37,.22));
  animation:nodeBlink 6s ease-in-out infinite;
}
@keyframes nodeBlink{ 0%,88%,100%{ opacity:1; } 93%{ opacity:.35; } }
.d-win{
  position:absolute; width:32px; height:25px; pointer-events:none;
  border:1.3px solid #CFC8BB; border-radius:7px; opacity:.7;
}
.d-win i{ position:absolute; top:4px; width:3px; height:3px; border-radius:50%; background:#CFC8BB; }
.d-win i:first-child{ left:5px; } .d-win i:last-child{ left:11px; }
/* DEPARTURE PASS (revised per Chad): circuit traces STAY — he likes them.
   Only the browser-window doodles and hatches are retired. */
.d-win, .d-hatch{ display:none; }
.fsq{
  position:absolute; background:#fff; border-radius:5px; pointer-events:none;
  box-shadow:0 8px 20px rgba(43,40,37,.18);
  animation:fsqFloat 6s ease-in-out infinite alternate;
}
@keyframes fsqFloat{ from{ transform:translateY(-5px); } to{ transform:translateY(6px); } }
.vline{
  position:absolute; top:0; left:68.5%; width:1.5px; height:150px; pointer-events:none;
  background:linear-gradient(#A99F90, rgba(159,142,220,0));
}

/* hero deco placement */
.hd-dots-l{ left:9%; top:305px; }
.hd-dots-r1{ right:11%; top:255px; width:96px; height:64px; }
.hd-dots-r2{ right:5%; top:355px; width:60px; height:44px; animation-delay:2.5s; }
.hd-hatch{ right:8%; top:200px; transform:rotate(-6deg); }
.hd-trace-l{ left:-30px; top:330px; width:300px; opacity:.65; }
.hd-trace-r{ right:-90px; top:190px; width:320px; opacity:.55; }
.fsq.f1{ left:22.5%; top:452px; width:18px; height:18px; }
.fsq.f2{ right:26%; top:415px; width:14px; height:14px; animation-delay:1.6s; }

/* =================== PROBLEMS (pinned) =================== */
.problems{ position:relative; }
.pin{
  position:relative; height:100vh; overflow:hidden;
  height:100svh; /* iOS: pinned scenes must not resize with the URL bar */
  display:grid; place-items:center;
  /* must beat .story-orb (z2): when ScrollTrigger pins this (position:fixed),
     Chrome makes it a stacking context, so the ptext z:5 inside can no longer
     compete with the orb directly — the container itself has to win */
  z-index:4;
}
.orb-rim{
  position:absolute; inset:-2%; border-radius:50%; display:block; opacity:0;
  /* thin bright fresnel ring on the polished black ball */
  background:radial-gradient(circle,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0) 76%,
    rgba(255,255,255,.08) 87%, rgba(255,255,255,.42) 93%,
    rgba(255,255,255,.8) 96%, rgba(255,255,255,0) 100%);
}
.cracks{ position:absolute; inset:6%; opacity:0; }
.shatter{ position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none; }
.logo-reveal{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  opacity:0; will-change:transform;
  display:flex; align-items:center; gap:0;
}
.logo-reveal .lr-o{ margin-left:-4px; }
.lr-word{
  font-weight:300; font-size:74px; letter-spacing:.02em; line-height:1;
  color:#2B2825;
}
.lr-o{
  display:inline-block; width:70px; height:70px;
  background:url("../assets/orb-museum.webp?v=2") center/104% no-repeat;
}
/* 3D hex chunks: preserve-3d prisms (marble face + 6 real side walls + dark
   back) tumbling in X/Y/Z under perspective.
   will-change is TRANSFORM ONLY: adding opacity to will-change forces a
   flattening group per spec and silently kills preserve-3d on the children —
   that one property was the "everything is flat" bug. */
.shards{ position:absolute; inset:0; perspective:900px; }
.shard{
  position:absolute; left:50%; top:50%;
  will-change:transform;
  transform-style:preserve-3d;
}
.shard .sf{ position:absolute; inset:0; display:block; }
.ptext{
  position:absolute; z-index:5; text-align:center; opacity:0;
  padding:0 24px; width:100%;
}
.ptext h2{
  font-size:clamp(34px, 4.1vw, 56px); font-weight:700;
  letter-spacing:-.025em; color:#F5F2FA;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.ptext p{
  margin-top:12px; font-size:14px; font-weight:500; color:rgba(238,234,248,.75);
  text-shadow:0 1px 18px rgba(0,0,0,.35);
}
/* step 2 plays over the WHITE page (steps 0-1 sit on the dark marble):
   header in the machined-brass banding, sub in the darker brass ink */
.ptext[data-step="2"] h2{
  background:linear-gradient(168deg,
    #CBA87A 0%, #B08C5F 40%, #8A6941 56%, #A9865A 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 1px 1px rgba(43,40,37,.18));
}
.ptext[data-step="2"] p{ color:#8F6E45; text-shadow:none; }
body:not(.js) .ptext[data-step="0"]{ opacity:1; }

/* =================== SECTION HEADINGS =================== */
.sec-h{
  text-align:center;
  font-size:clamp(34px, 4.5vw, 60px);
  font-weight:800; line-height:1.08; letter-spacing:-.03em;
  color:var(--ink);
}
/* gradient words are CHROME — same white-tuned banding as the loader */
.sec-h .grad, .cta-h .grad, .hero-h1 .grad{
  background:linear-gradient(168deg,
    #E4E7EB 0%, #B6BCC6 34%, #79808B 54%, #343A43 62%, #8B929D 72%, #D6D9DE 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 1px rgba(43,40,37,.22));
}
.sec-sub{
  text-align:center; margin-top:16px;
  font-size:13.5px; font-weight:500; color:var(--muted);
}

/* =================== SOLUTIONS =================== */
.solutions{
  position:relative; z-index:2;
  max-width:1160px; margin:0 auto;
  padding:120px 24px 40px;
}
.sd-dots-t{ left:50%; top:64px; width:46px; height:34px; margin-left:-23px; }
.sd-win-l{ left:4%; top:120px; }
.sd-win-r{ right:6%; top:96px; }
.sd-hatch{ right:11%; top:170px; opacity:.3; }

.feature{
  display:grid; grid-template-columns:1.04fr 1fr;
  gap:clamp(40px, 7vw, 96px); align-items:center;
  padding:64px 0;
}
.feature.rev .mock{ order:2; }
.mock{ position:relative; }
.mock-card{
  position:relative; width:100%; aspect-ratio:8/5.1;
  border-radius:26px; overflow:hidden;
  /* stone slab on a white gallery wall — tinted surface + hairline is what
     keeps cards from melting into the pure-white page */
  background:linear-gradient(180deg, #F7F5F0 0%, #EDEAE2 100%);
  border:1px solid #EBE7DF;
  box-shadow:0 2px 6px rgba(43,40,37,.05), 0 24px 60px rgba(43,40,37,.12);
  animation:cardFloat 7s ease-in-out infinite alternate;
}
.feature:nth-of-type(odd) .mock-card{ animation-delay:1.2s; }
@keyframes cardFloat{ from{ transform:translateY(-5px); } to{ transform:translateY(6px); } }

.feat-text .num-chip{
  display:inline-flex; padding:6px 12px; border-radius:9px; background:#fff;
  font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--muted);
  box-shadow:0 8px 18px rgba(43,40,37,.10);
}
.feat-text h3{
  margin-top:18px; max-width:420px;
  font-size:clamp(19px, 1.85vw, 24px); font-weight:800; letter-spacing:-.015em;
  line-height:1.3; color:var(--ink);
}
.feat-text p{
  margin-top:16px; max-width:440px;
  font-size:14px; line-height:1.75; font-weight:500; color:var(--muted);
}

/* --- mock internals shared --- */
.rb-badge{
  position:absolute; z-index:3; width:54px; height:54px; border-radius:50%;
  background:linear-gradient(180deg,#BE9A6B,#8F6E45); color:#fff;
  font-weight:700; font-size:15px; display:grid; place-items:center;
  box-shadow:0 12px 26px rgba(43,40,37,.45);
}
.rb-badge.small{ width:44px; height:44px; font-size:13px; }
.mc-links{ position:absolute; z-index:1; }
.chip, .pill-tag, .hub-pill{
  position:absolute; z-index:2; background:#fff; border-radius:999px;
  font-weight:600; color:var(--ink);
  box-shadow:0 10px 24px rgba(43,40,37,.16);
  white-space:nowrap;
}

/* card 01 — conversion dashboard */
.mc-rings::before{
  content:""; position:absolute; inset:0;
  background:repeating-radial-gradient(circle at 16% 34%,
    transparent 0 36px, rgba(140,132,120,.10) 36px 38px);
}
.mc-rings .rb-badge{ left:11%; top:33%; }
.mc-rings .mini-bar{
  position:absolute; z-index:2; left:21%; top:20%; width:58%;
  background:#fff; border-radius:13px; padding:10px 12px 8px;
  box-shadow:0 14px 34px rgba(43,40,37,.14);
}
.mb-label{ font-size:10.5px; font-weight:600; color:var(--ink); }
.mb-toggle{
  position:absolute; right:11px; top:10px; width:30px; height:16px;
  border-radius:999px; background:var(--purple);
}
.mb-toggle i{
  position:absolute; right:2.5px; top:2.5px; width:11px; height:11px;
  border-radius:50%; background:#fff;
}
.mb-chart{ display:block; width:100%; height:42px; margin-top:7px; }
.mc-rings .mc-links{ left:22%; top:38%; width:56%; height:44%; }
.mc-rings .mc-links path{ }
.chip{ font-size:10.5px; padding:8px 15px; }
.chip-a{ left:25%; top:66%; }
.chip-b{ left:47%; top:83%; }

/* card 02 — trust signals */
.window{
  position:absolute; z-index:2; left:10%; top:17%; width:44%;
  background:#fff; border-radius:13px; padding:10px 11px 12px;
  box-shadow:0 14px 34px rgba(43,40,37,.13);
}
.window.wide{ left:8%; top:15%; width:66%; }
.win-head{ display:flex; gap:4px; margin-bottom:9px; }
.win-head i{ width:5.5px; height:5.5px; border-radius:50%; background:#E7E2D8; }
.win-row{ height:7px; border-radius:4px; background:#EFECE5; margin-top:7px; }
.win-row.w60{ width:60%; } .win-row.w80{ width:82%; } .win-row.w45{ width:45%; }
.win-split{ display:flex; gap:9px; align-items:flex-end; }
.win-col{ flex:1; }
.check-item{ display:flex; align-items:center; gap:7px; margin-top:9px; }
.check-item .win-row{ margin-top:0; }
.ck{
  flex:0 0 15px; width:15px; height:15px; border-radius:50%;
  background:linear-gradient(180deg,#BE9A6B,#8F6E45); position:relative;
}
.ck::after{
  content:""; position:absolute; left:4px; top:4.4px; width:6.5px; height:3.6px;
  border-left:1.7px solid #fff; border-bottom:1.7px solid #fff;
  transform:rotate(-45deg);
}
.qa-gauge{ width:40%; height:64px; }
.shield-badge{
  position:absolute; z-index:3; left:44%; top:11%;
  width:46px; height:46px; border-radius:14px;
  background:linear-gradient(180deg,#BE9A6B,#8F6E45);
  display:grid; place-items:center;
  box-shadow:0 12px 26px rgba(43,40,37,.45);
}
.mc-nodes .mc-links{ left:20%; top:30%; width:66%; height:56%; }
.node-dot{
  position:absolute; z-index:2; width:34px; height:34px; border-radius:50%;
  background:#fff; box-shadow:0 10px 24px rgba(43,40,37,.16);
}
.node-dot::after{
  content:""; position:absolute; inset:0; margin:auto; width:10px; height:10px;
  border-radius:50%; background:var(--purple);
}
.nd1{ left:63%; top:50%; }
.nd2{ right:9%; top:72%; }
.pill-tag{ font-size:10px; padding:6px 12px; }
.pt1{ left:61%; top:34%; }
.pt2{ right:7%; top:57%; }
.pt-stars{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; }
.pt-stars svg{ display:block; }
.pt-stars b{ font-size:10px; font-weight:700; color:var(--ink); }

/* card 03 — pre-launch QA */
.mobile-badge{
  position:absolute; z-index:3; left:5%; top:9%;
  width:40px; height:40px; border-radius:12px;
  background:linear-gradient(180deg,#BE9A6B,#8F6E45);
  display:grid; place-items:center;
  box-shadow:0 12px 26px rgba(43,40,37,.4);
}
.mc-vault .rb-badge.small{ left:30%; top:10%; }

/* card 04 — integration hub */
.mc-grid::before{
  content:""; position:absolute; inset:0; opacity:.55;
  background-image:linear-gradient(rgba(140,132,120,.16) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(140,132,120,.16) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 82%);
  mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 82%);
}
.mc-grid .mc-links.full{ inset:0; width:100%; height:100%; }
.orb-node{
  position:absolute; z-index:2; width:44px; height:44px; border-radius:50%;
  background:#fff; box-shadow:0 12px 26px rgba(43,40,37,.16);
  display:grid; place-items:center;
}
.orb-node svg{
  display:block;
  animation:iconPulse 2.6s ease-in-out infinite;
}
.on2 svg{ animation-delay:.6s; } .on3 svg{ animation-delay:1.2s; } .on4 svg{ animation-delay:1.8s; }
@keyframes iconPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.86); opacity:.68; } }
.on1{ left:14%; top:17%; } .on2{ right:13%; top:23%; }
.on3{ left:16%; bottom:17%; } .on4{ right:11%; bottom:13%; }
.hub-pill{
  left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:11.5px; font-weight:700; padding:11px 19px;
  box-shadow:0 14px 34px rgba(43,40,37,.2);
}

/* card 05 — foundation layers */
.mc-iso{ display:grid; place-items:center; }
.iso-stack{
  position:relative; width:150px; height:150px; margin-top:26px;
  transform:rotateX(56deg) rotateZ(45deg);
  transform-style:preserve-3d;
}
.iso-layer{ position:absolute; inset:0; border-radius:24px; }
.iso-layer.l1{ background:#E4DFD3; transform:translateZ(-28px); }
.iso-layer.l2{ background:#F0EDE6; transform:translateZ(-14px); }
.iso-layer.l3{
  background:linear-gradient(135deg,#FFFFFF,#F7F5F0);
  box-shadow:0 0 0 1px rgba(255,255,255,.8), 0 30px 60px rgba(43,40,37,.18);
}
.mc-iso::after{
  content:""; position:absolute; left:50%; bottom:12%;
  width:220px; height:44px; transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(43,40,37,.16), transparent 70%);
  filter:blur(4px);
}
.iso-block{
  position:absolute; z-index:3; left:50%; top:8%; margin-left:-15px;
  width:30px; height:30px; border-radius:6px;
  background:linear-gradient(135deg,#BE9A6B,#8F6E45);
  box-shadow:0 10px 22px rgba(43,40,37,.3);
  transform:translateY(-30px) rotateX(56deg) rotateZ(45deg);
  animation:isoBlock 4s ease-in-out infinite;
}
/* the capstone: falls, seats onto the stack, rests, fades — building, not leaking */
@keyframes isoBlock{
  0%{ transform:translateY(-30px) rotateX(56deg) rotateZ(45deg); opacity:0;
      animation-timing-function:cubic-bezier(.55,.06,.7,.4); }
  8%{ opacity:1; }
  42%{ transform:translateY(140px) rotateX(56deg) rotateZ(45deg); }
  47%{ transform:translateY(134px) rotateX(56deg) rotateZ(45deg); }
  52%{ transform:translateY(140px) rotateX(56deg) rotateZ(45deg); }
  84%{ transform:translateY(140px) rotateX(56deg) rotateZ(45deg); opacity:1; }
  94%,100%{ transform:translateY(140px) rotateX(56deg) rotateZ(45deg); opacity:0; }
}

/* =================== CHAINS =================== */
/* overflow visible + raised z: bottom-arc service bubbles overhang the section
   edge and must paint over .how (later sibling) instead of clipping/hiding */
.chains{ position:relative; z-index:2; padding:140px 24px 60px; overflow:visible; }
.cd-dots{ left:8%; top:150px; }
.cd-trace-l{ left:3%; top:190px; width:220px; }
.cd-trace-r{ right:3%; top:170px; width:220px; }
.orbit-stage{
  position:relative; width:min(680px, 94vw); height:540px; margin:24px auto 0;
}
.char-sphere{
  position:absolute; left:50%; top:56%; transform:translate(-50%,-50%);
  opacity:.45; pointer-events:none;
}
/* quiet solid hairline ring — brass ticks tried 07-21, removed per Chad
   (pulled attention off the services) */
.orbit-ring{
  position:absolute; left:50%; top:56%; width:470px; height:470px;
  margin:-235px 0 0 -235px; border-radius:50%;
  border:1px solid #E7E2D8;
}
.orbit-rotor{
  position:absolute; left:50%; top:56%; width:0; height:0;
  animation:orbitSpin 90s linear infinite;
}
@keyframes orbitSpin{ to{ transform:rotate(360deg); } }
.chain-node{
  position:absolute; left:0; top:0;
  /* radius via var so the phone layout can shrink the ring with real
     geometry instead of a blurry scale() on the whole stage */
  transform:rotate(var(--a)) translateX(var(--orbitR, 235px)) rotate(calc(-1 * var(--a)));
}
.cn-inner{
  position:relative; display:block; width:0; height:0;
  animation:orbitSpinRev 90s linear infinite;
}
@keyframes orbitSpinRev{ to{ transform:rotate(-360deg); } }
.chain-node .cn-circle{
  position:absolute; left:-31px; top:-31px;
  width:62px; height:62px; border-radius:50%; background:#fff;
  box-shadow:0 14px 34px rgba(43,40,37,.18);
  display:grid; place-items:center;
}
.chain-node .cn-label{
  position:absolute; top:-14px; left:40px;
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1.6px solid #A9865A; border-radius:999px; padding:7px 13px;
  font-size:11px; font-weight:600; color:var(--ink); white-space:nowrap;
  box-shadow:0 10px 24px rgba(43,40,37,.16);
}
.chain-node .cn-label i{
  width:7px; height:7px; border-radius:50%; background:var(--c,#627EEA); display:inline-block;
}
.chain-node.lab-l .cn-label{ left:auto; right:40px; }
button.cn-circle{ border:0; padding:0; font:inherit; cursor:pointer; transition:transform .22s ease, box-shadow .22s ease; }
button.cn-circle:hover{ transform:scale(1.07); box-shadow:0 16px 38px rgba(43,40,37,.26); }
.chain-node.svc-open{ z-index:6; }
/* service description bubble — extends from under the label pill on click */
.cn-desc{
  position:absolute; top:26px; left:40px; z-index:4;
  width:max-content; max-width:212px;
  background:#fff; border:1.6px solid #A9865A; border-radius:14px;
  padding:9px 13px; font-size:11.5px; line-height:1.55; font-weight:500; color:var(--muted);
  box-shadow:0 14px 30px rgba(43,40,37,.16);
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.94);
  transform-origin:top left; pointer-events:none;
  transition:opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
}
.cn-desc::before{
  content:""; position:absolute; top:-5px; left:16px; width:8px; height:8px;
  background:#fff; border-left:1.6px solid #A9865A; border-top:1.6px solid #A9865A;
  transform:rotate(45deg);
}
.chain-node.lab-l .cn-desc{ left:auto; right:40px; transform-origin:top right; }
.chain-node.lab-l .cn-desc::before{ left:auto; right:16px; }
.chain-node.svc-open .cn-desc{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .24s ease, transform .24s ease;
}
/* hold the ring still while a bubble is open (JS compensates the flip clock) */
.orbit-paused .orbit-rotor, .orbit-paused .cn-inner{ animation-play-state:paused; }
.coin{
  position:absolute; z-index:3; left:50%; top:56%;
  width:150px; height:150px; margin:-75px 0 0 -75px;
  background:url("../assets/orb-museum.webp?v=2") center/104% no-repeat;
  filter:drop-shadow(0 26px 40px rgba(25,20,30,.38));
  animation:coinBob 5.5s ease-in-out infinite;
}
@keyframes coinBob{ 0%,100%{ transform:translateY(-7px); } 50%{ transform:translateY(7px); } }
.coin-shadow{
  position:absolute; z-index:2; left:50%; top:calc(56% + 92px);
  width:190px; height:44px; transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(30,26,34,.32), transparent 68%);
  filter:blur(5px);
  animation:coinShadow 5.5s ease-in-out infinite;
}
@keyframes coinShadow{ 0%,100%{ transform:translateX(-50%) scale(.92); opacity:.75; } 50%{ transform:translateX(-50%) scale(1.06); opacity:1; } }

/* =================== HOW IT WORKS =================== */
.how{ position:relative; padding:130px 24px 40px; }
.agent-stage{
  position:relative; max-width:980px; height:520px; margin:10px auto 0;
}
.agent-traces{ position:absolute; inset:0; width:100%; height:100%; }
.agent-traces .flow{
  stroke-dasharray:5 7;
  animation:dashFlow 1.6s linear infinite;
}
.agent-traces .flow.slow{ animation-duration:2.4s; }
@keyframes dashFlow{ to{ stroke-dashoffset:-24; } }
.platform{
  position:absolute; left:50%; bottom:56px;
  width:min(560px, 84%); height:118px; transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 42%, #FDFCFA 0%, #EFECE5 55%, #E4DFD3 100%);
  box-shadow:0 26px 54px rgba(43,40,37,.13), inset 0 -12px 26px rgba(125,118,109,.12);
}
.agent-col{
  position:absolute; left:50%; top:38%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; z-index:4;
}
.coins-pop{ position:relative; width:0; height:0; }
.cp{
  position:absolute; width:30px; height:30px; border-radius:50%;
  background:#fff; border:2px solid var(--ring,#B7A98F); color:var(--purple);
  display:grid; place-items:center; opacity:0;
  box-shadow:0 8px 20px rgba(43,40,37,.2);
}
.cp.c1{ --ring:#C9A97E; left:-52px; top:-52px; }
.cp.c2{ --ring:#B7A98F; left:-15px; top:-74px; }
.cp.c3{ --ring:#C8C2B6; left:22px; top:-52px; }
.cp.pop{ animation:coinPop 1.35s var(--ease-out) forwards; }
@keyframes coinPop{
  0%{ transform:translateY(14px) scale(.2); opacity:0; }
  30%{ transform:translateY(-2px) scale(1.08); opacity:1; }
  55%{ transform:translateY(-8px) scale(1); opacity:1; }
  100%{ transform:translateY(-26px) scale(.92); opacity:0; }
}
.agent-pill{
  display:inline-flex; align-items:center; gap:9px;
  height:46px; padding:0 24px; border-radius:24px;
  background:linear-gradient(180deg,#3A3631 0%, #121110 100%);
  color:#fff; font-weight:700; font-size:14px;
  box-shadow:0 16px 36px rgba(43,40,37,.42), inset 0 1px 0 rgba(255,255,255,.35);
}
.agent-wires{ display:flex; gap:6px; height:26px; }
.agent-wires i{ width:1.5px; background:#C6BFB2; }
.chip-icon{
  position:relative; width:42px; height:42px; border-radius:11px;
  background:#F3F0E9; border:1.6px solid #A9865A;
  display:grid; place-items:center;
  font-size:10px; font-weight:800; color:var(--purple); letter-spacing:.04em;
}
.chip-icon .leg{ position:absolute; background:#A9865A; }
.leg.lt1{ top:-7px; left:12px; width:1.6px; height:7px; }
.leg.lt2{ top:-7px; right:12px; width:1.6px; height:7px; }
.leg.lb1{ bottom:-7px; left:12px; width:1.6px; height:7px; }
.leg.lb2{ bottom:-7px; right:12px; width:1.6px; height:7px; }
.leg.ll1{ left:-7px; top:12px; height:1.6px; width:7px; }
.leg.ll2{ left:-7px; bottom:12px; height:1.6px; width:7px; }
.leg.lr1{ right:-7px; top:12px; height:1.6px; width:7px; }
.leg.lr2{ right:-7px; bottom:12px; height:1.6px; width:7px; }
.side-node{
  position:absolute; z-index:3; width:58px; height:58px; border-radius:50%;
  background:#fff; box-shadow:0 14px 32px rgba(43,40,37,.16);
  display:grid; place-items:center;
  transition:box-shadow .5s, transform .5s;
}
.side-node.pulse{
  box-shadow:0 14px 32px rgba(43,40,37,.16), 0 0 0 5px rgba(169,134,90,.35), 0 0 0 10px rgba(169,134,90,.12);
  transform:scale(1.07);
}
.sn1{ left:9%; top:14%; } .sn2{ left:4%; top:40%; } .sn3{ left:10%; top:66%; }
.sn4{ right:9%; top:14%; } .sn5{ right:4%; top:40%; } .sn6{ right:10%; top:66%; }
.sn-label{
  position:absolute; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center;
  background:#fff; border-radius:999px; padding:7px 13px;
  font-size:11px; font-weight:600; color:var(--ink); white-space:nowrap;
  box-shadow:0 10px 24px rgba(43,40,37,.16);
}
.sn1 .sn-label, .sn2 .sn-label, .sn3 .sn-label{ right:70px; }
.sn4 .sn-label, .sn5 .sn-label, .sn6 .sn-label{ left:70px; }
/* invisible full-circle hit target so the node div's styling stays untouched */
.sn-btn{
  position:absolute; inset:0; z-index:2;
  border:0; padding:0; background:transparent; border-radius:50%; cursor:pointer;
}
.side-node:hover{ box-shadow:0 16px 36px rgba(43,40,37,.24); transform:scale(1.05); }
.side-node.svc-open{ z-index:6; }
/* capability bubble — opens inward-below the node (labels point outward,
   so outward bubbles would run off the viewport on smaller desktops) */
.sn-desc{
  position:absolute; top:70px; z-index:4;
  width:max-content; max-width:212px;
  background:#fff; border:1.6px solid #A9865A; border-radius:14px;
  padding:9px 13px; font-size:11.5px; line-height:1.55; font-weight:500; color:var(--muted);
  box-shadow:0 14px 30px rgba(43,40,37,.16);
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.94);
  pointer-events:none; text-align:left;
  transition:opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
}
.sn-desc::before{
  content:""; position:absolute; top:-5px; width:8px; height:8px;
  background:#fff; border-left:1.6px solid #A9865A; border-top:1.6px solid #A9865A;
  transform:rotate(45deg);
}
.sn1 .sn-desc, .sn2 .sn-desc, .sn3 .sn-desc{ left:0; transform-origin:top left; }
.sn1 .sn-desc::before, .sn2 .sn-desc::before, .sn3 .sn-desc::before{ left:22px; }
.sn4 .sn-desc, .sn5 .sn-desc, .sn6 .sn-desc{ right:0; transform-origin:top right; }
.sn4 .sn-desc::before, .sn5 .sn-desc::before, .sn6 .sn-desc::before{ right:22px; }
.side-node.svc-open .sn-desc{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .24s ease, transform .24s ease;
}
/* phone pattern: per-node bubbles are unreadable inside the scaled-down
   stages, so taps fill this shared sheet below the stage instead */
.svc-sheet{
  max-width:420px; margin:4px auto 0; text-align:left;
  background:#fff; border:1.6px solid #A9865A; border-radius:14px;
  padding:12px 15px; box-shadow:0 14px 30px rgba(43,40,37,.16);
  animation:intakeIn .3s var(--ease-out);
}
.svc-sheet .ss-name{ display:block; font-size:13px; font-weight:700; color:var(--ink); }
.svc-sheet .ss-text{ margin-top:4px; font-size:12.5px; line-height:1.55; font-weight:500; color:var(--muted); }
/* resting state = the CTA: a pulsing brass dot + "tap the icons" prompt;
   tapping a node swaps it for the name + description in place */
.svc-sheet .ss-hint{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:12px; font-weight:600; color:var(--muted); text-align:center;
}
.svc-sheet .ss-hint::before{
  content:""; flex:0 0 8px; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(180deg,#BE9A6B,#8F6E45);
  animation:hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.6); opacity:.5; } }
.svc-sheet.filled .ss-hint{ display:none; }
.svc-sheet:not(.filled) .ss-name,
.svc-sheet:not(.filled) .ss-text{ display:none; }
@media (min-width:701px){ .svc-sheet{ display:none !important; } }
@media (max-width:640px){
  .sn-label{
    position:absolute; top:100%; left:50%; right:auto;
    transform:translateX(-50%); margin-top:6px;
    font-size:9px; padding:4px 9px;
  }
}

/* =================== INVESTORS =================== */
.investors{ position:relative; padding:140px 0 90px; overflow:hidden; }
.id-hatch{ left:12%; top:120px; }
.id-trace{ right:5%; top:100px; width:260px; }
.work-list{
  margin:36px auto 0; max-width:680px; position:relative; z-index:2;
}
.work-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:26px 8px; border-bottom:1px solid rgba(125,118,109,.18);
  text-decoration:none; color:var(--ink);
  transition:opacity .3s;
}
.work-row:first-child{ border-top:1px solid rgba(125,118,109,.18); }
.work-name{ font-size:clamp(22px,3vw,30px); font-weight:800; }
.work-tag{ font-size:13px; color:#8B8378; font-weight:500; white-space:nowrap; }
/* hover-only: on touch, tapping a row would stick the dim state */
@media (hover:hover){
  .work-list:hover .work-row{ opacity:.35; }
  .work-list:hover .work-row:hover{ opacity:1; }
}
.work-preview{
  position:fixed; top:0; left:0; z-index:50;
  width:280px; height:180px; margin:-90px 0 0 -140px;
  border-radius:20px; overflow:hidden; pointer-events:none;
  box-shadow:0 24px 60px rgba(43,40,37,.28);
  opacity:0; transition:opacity .25s; will-change:transform;
}
.work-preview.active{ opacity:1; }
.work-preview-card{
  width:100%; height:100%; display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:18px; text-align:center; padding:0 20px;
}

/* =================== FAQ =================== */
.faq{ position:relative; padding:120px 24px 90px; }
.fd-dots-l{ left:14%; top:110px; width:52px; height:38px; }
.fd-dots-r{ right:12%; top:150px; width:40px; height:30px; animation-delay:3s; }
.fd-trace{ left:4%; top:130px; width:240px; }
.acc{
  max-width:780px; margin:44px auto 0;
  display:flex; flex-direction:column; gap:14px;
}
.acc-item{
  background:#fff; border-radius:16px;
  box-shadow:0 12px 32px rgba(43,40,37,.07);
  transition:background .35s;
}
.acc-item.open{ background:#F2EFE8; }
.acc-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:17px 15px 17px 21px; cursor:pointer; text-align:left;
  font-weight:700; font-size:14.5px; letter-spacing:-.01em; color:var(--ink);
}
.acc-chev{
  flex:none; width:30px; height:30px; border-radius:50%;
  background:#fff; border:1.4px solid #E7E2D8; color:var(--muted);
  display:grid; place-items:center;
  transition:border-color .3s, color .3s;
}
.acc-chev svg{ transition:transform .4s var(--ease-out); }
.acc-item.open .acc-chev{ border-color:var(--purple); color:var(--purple); }
.acc-item.open .acc-chev svg{ transform:rotate(180deg); }
.acc-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease-out); }
.acc-a-card{
  margin:2px 15px 15px 15px; padding:14px 17px;
  background:#fff; border:1px solid #E9E4DA; border-radius:12px;
  font-size:13.5px; line-height:1.7; font-weight:500; color:var(--muted);
}

/* =================== CTA =================== */
.cta{ position:relative; padding:150px 24px 0; overflow:hidden; }
/* CTA background: grid floor (tron-plane) retired 07-21; halo rings tried
   and removed same day per Chad — the closing CTA sits on clean white */
.grid-floor{ display:none; }
.ctd-trace-l{ left:2%; top:170px; width:300px; }
.ctd-trace-r{ right:2%; top:190px; width:300px; }
.ctd-dots{ left:47%; top:120px; width:46px; height:32px; }
.float-btn{
  position:absolute; z-index:1; width:56px; height:56px; border-radius:50%;
  background:#fff; box-shadow:0 16px 36px rgba(43,40,37,.18);
  display:grid; place-items:center;
  animation:fbFloat 7s ease-in-out infinite alternate;
}
.fb1{ left:10%; top:22%; }
.fb2{ left:15%; top:58%; animation-delay:1.4s; }
.fb3{ right:10%; top:24%; animation-delay:.7s; }
.fb4{ right:14%; top:60%; animation-delay:2.1s; }
@keyframes fbFloat{ from{ transform:translateY(-8px); } to{ transform:translateY(9px); } }
.cta-inner{ position:relative; z-index:2; text-align:center; }
.cta-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border-radius:999px; padding:9px 17px;
  font-size:11.5px; font-weight:600; color:var(--ink-2);
  box-shadow:0 10px 26px rgba(43,40,37,.13);
}
.cta-h{
  margin-top:24px;
  font-size:clamp(40px, 4.9vw, 64px); font-weight:800;
  line-height:1.05; letter-spacing:-.03em; color:var(--ink);
}
/* --- Let's Talk intake panel --- */
.intake{ margin-top:34px; }
.intake.open .intake-open{ display:none; }
.intake-form, .intake-done{
  max-width:560px; margin:0 auto; text-align:left;
  background:#fff; border:1px solid rgba(43,40,37,.08); border-radius:20px;
  padding:22px 22px 24px;
  box-shadow:0 18px 44px rgba(43,40,37,.14);
  animation:intakeIn .45s var(--ease-out);
}
@keyframes intakeIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.if-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.if-field{ display:flex; flex-direction:column; gap:6px; }
.if-wide{ grid-column:1 / -1; }
.if-lab{ font-size:12px; font-weight:600; color:var(--muted); }
.if-input{
  width:100%; font:inherit; font-size:14px; font-weight:500; color:var(--ink);
  background:#fff; border:1px solid rgba(43,40,37,.16); border-radius:12px;
  padding:11px 13px;
}
.if-input:focus{ outline:none; border-color:#A9865A; box-shadow:0 0 0 3px rgba(169,134,90,.18); }
.if-input::placeholder{ color:#A69E92; }
textarea.if-input{ resize:vertical; min-height:76px; }
.if-gotcha{ display:none; }
.if-send{ margin-top:16px; width:100%; height:48px; border-radius:13px; }
.if-err{ display:block; margin-top:12px; font-size:13px; font-weight:600; color:#9C3A2E; }
.if-err[hidden]{ display:none; }
.intake-done{ text-align:center; padding:30px 26px; }
.if-check{
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:linear-gradient(180deg,#BE9A6B,#8F6E45); color:#fff;
}
.if-done-h{ margin-top:12px; font-size:17px; font-weight:800; color:var(--ink); }
.if-done-p{ margin-top:6px; font-size:13.5px; color:var(--muted); font-weight:500; }
.if-brief{
  display:inline-block; margin-top:14px; font-size:13.5px; font-weight:700;
  color:var(--purple-d); text-decoration:underline; text-underline-offset:3px;
}
@media (max-width:560px){ .if-grid{ grid-template-columns:1fr; } }

/* =================== FOOTER =================== */
.footer{
  position:relative; z-index:2;
  max-width:1240px; margin:120px auto 0; padding:26px 8px 30px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
}
.footer .brand-word{ font-size:17px; }
.footer .brand-o{ width:19px; height:19px; }
.credit{ font-size:11px; font-weight:500; color:#989083; text-align:center; }
.foot-contact{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.foot-mail{
  font-size:13px; font-weight:600; color:var(--ink); text-decoration:none;
  transition:color .25s;
}
.foot-mail:hover{ color:var(--purple-d); }
.foot-meta{ font-size:11px; font-weight:500; color:#989083; }
/* SEO-keeper links: the v1 local landing pages stay crawled + passing
   equity without cluttering the real nav — deliberately near-invisible */
.foot-areas{
  flex-basis:100%; display:flex; flex-wrap:wrap; justify-content:center;
  gap:4px 12px; margin-top:14px; padding-top:12px;
  border-top:1px solid rgba(43,40,37,.06);
  font-size:10px; font-weight:500; color:#ADA598;
}
.foot-areas a{ color:#ADA598; text-decoration:none; }
.foot-areas a:hover{ color:var(--purple-d); text-decoration:underline; }

/* =================== REVEAL =================== */
.reveal{
  opacity:0; transform:translateY(38px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
.reveal.in{ opacity:1; transform:none; }
body:not(.js) .reveal{ opacity:1; transform:none; }

/* =================== HERO LOADING STATES (pre-intro) =================== */
body.loading .nav,
body.loading .hero-sub,
body.loading .hero-ctas{ opacity:0; }
body.loading .hero-h1 .w{ opacity:0; transform:translateY(48px); }
body.loading .story-orb, body.loading .orb3d{ opacity:0; }
body.loading .hero .d-dots, body.loading .hero .d-hatch,
body.loading .hero .d-trace, body.loading .hero .fsq,
body.loading .hero .vline{ opacity:0; }

/* =================== RESPONSIVE =================== */
@media (max-width:1100px){
  .nav-links{ gap:18px; }
  .agent-stage{ height:460px; }
  .sn1{ left:4%; } .sn4{ right:4%; }
  .sn2{ left:1%; } .sn5{ right:1%; }
  .sn3{ left:5%; } .sn6{ right:5%; }
}
@media (max-width:900px){
  .nav{ margin:16px auto 0; padding-right:8px; }
  .nav-links{ display:none; }
  .feature{ grid-template-columns:1fr; gap:34px; padding:48px 0; }
  .feature .mock{ order:2; }
  .feat-text h3, .feat-text p{ max-width:none; }
  .orbit-stage{ height:480px; transform:scale(.82); margin-top:-10px; }
  .agent-stage{ transform:scale(.78); height:400px; margin-top:-30px; }
  .float-btn{ display:none; }
  .hd-trace-l,.hd-trace-r{ opacity:.4; }
}
@media (max-width:700px){
  /* iOS zooms the page when a focused input is under 16px — keep the form
     zoom-free on phones */
  .if-input{ font-size:16px; }
  /* bubbles off, shared sheet on (see .svc-sheet) */
  .cn-desc, .sn-desc{ display:none !important; }
}
@media (max-width:600px){
  .hero-inner{ padding-top:48px; }
  .hero-sub br{ display:none; }
  .hero-ctas{ flex-direction:column; align-items:center; }
  .btn-lg{ width:220px; }
  .nav-ctas .btn-navy{ display:none; }
  /* orbit: real phone geometry instead of the scale() hack — ring radius
     shrinks via --orbitR, so circles stay crisp, centered, 48px tappable */
  .orbit-stage{ height:400px; --orbitR:150px; }
  .orbit-ring{ width:300px; height:300px; margin:-150px 0 0 -150px; }
  .char-sphere{ width:340px; height:340px; }
  .chain-node .cn-circle{ left:-24px; top:-24px; width:48px; height:48px; }
  .coin{ width:104px; height:104px; margin:-52px 0 0 -52px; }
  .coin-shadow{ top:calc(56% + 62px); width:140px; height:34px; }
  .chain-node .cn-label{ display:none; }
  /* agent labels off on phones (tried counter-scaled pills, looked wrong);
     the tap-sheet below the stage carries the names instead */
  .sn-label{ display:none; }
  .agent-stage{ transform:scale(.55); height:300px; }
  .solutions{ padding-top:80px; }
  .chains,.how,.investors,.faq{ padding-top:80px; }
  .cta{ padding-top:100px; }
  .footer{ flex-direction:column; gap:14px; margin-top:80px; }
  .foot-contact{ align-items:center; }
  .d-trace,.d-hatch,.d-win{ display:none; }
  .pre-count{ right:28px; bottom:24px; font-size:24px; }
  .work-row{ padding:20px 4px; }
  .acc{ margin-top:32px; }
}
@media (max-width:420px){
  .nav{ padding:0 8px 0 14px; height:58px; }
  .hero-h1{ font-size:clamp(37px, 11.4vw, 44px); }
  .hero-sub{ font-size:15px; }
  .pre-stage{ width:250px; height:250px; }
  .pre-ball{ width:158px; height:158px; }
  .lr-word{ font-size:56px; }
  .lr-o{ width:53px; height:53px; }
  .cta-h{ font-size:clamp(33px, 10.2vw, 40px); }
  .intake-form{ padding:18px 16px 20px; }
  .intake-done{ padding:26px 18px; }
}

/* =================== REDUCED MOTION =================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .preloader{ display:none !important; }
  .reveal{ opacity:1; transform:none; }
  body.loading .nav, body.loading .hero-sub, body.loading .hero-ctas,
  body.loading .hero-h1 .w, body.loading .story-orb,
  body.loading .hero .d-dots, body.loading .hero .d-hatch,
  body.loading .hero .d-trace, body.loading .hero .fsq,
  body.loading .hero .vline{ opacity:1; }
  body.loading .hero-h1 .w{ transform:none; }
}
/* parked orb: no-JS, no-GSAP, or reduced motion — a fixed orb must not
   shadow every section, so it becomes a normal element at the fold */
body:not(.js) .story-orb,
body.orb-parked .story-orb{ position:absolute; top:100vh; }