/* ============================================================
   APPROVED BY SAINI — VISUAL PROTOTYPE DESIGN SYSTEM
   Standalone. Real content, real order. Reference-video motion.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 600; font-display: swap; src: url('../fonts/sora-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 700; font-display: swap; src: url('../fonts/sora-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 800; font-display: swap; src: url('../fonts/sora-latin-800-normal.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --obsidian: #08090d; --obsidian2: #0d1016; --graphite: #151a23; --graphite2: #1c2330;
  --line: rgba(255,255,255,.09); --line2: rgba(255,255,255,.18);
  --ink: #f4f6fa; --ink2: #c3cad6; --ink3: #8a92a3; --inkD: #10141c;
  --blue: #1e5eff; --eblue: #3d8bff; --deep: #12305e; --violet: #4b3b8f; --indigo: #272a6e;
  --amber: #f5a524; --amberD: #cf7d12; --silver: #aeb6c2;
  --cloud: #eef3fb; --cloud2: #dbe6f6; --ivory: #f8f5ef;
  --glowB: rgba(61,139,255,.35); --glowA: rgba(245,165,36,.30);
  --fd: 'Sora', system-ui, sans-serif; --fb: 'Inter', system-ui, sans-serif;
  --h1: clamp(2.2rem, 4.6vw, 3.6rem); --h2: clamp(1.6rem, 2.8vw, 2.4rem); --h3: clamp(1.14rem, 1.6vw, 1.42rem);
  --r: 16px; --rl: 26px; --pill: 999px;
  --easeO: cubic-bezier(.22,1,.36,1); --easeIO: cubic-bezier(.65,0,.35,1);
  --sh1: 0 6px 24px rgba(0,0,0,.4); --sh2: 0 22px 70px rgba(0,0,0,.55);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  background: var(--obsidian); color: var(--ink2);
  font: 400 clamp(1rem, 1.05vw, 1.11rem)/1.7 var(--fb);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3, h4 { font-family: var(--fd); color: var(--ink); line-height: 1.06; letter-spacing: -.016em; }
h1 { font-size: var(--h1); font-weight: 800; }
h2, .sec-h2 { font-size: var(--h2); font-weight: 700; }
h3.sec-h { font-size: var(--h3); font-weight: 700; margin-bottom: .5em; }
h4 { font-size: 1.16rem; font-weight: 600; }
em.ac { font-style: normal; background: linear-gradient(92deg, var(--eblue), var(--amber) 130%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--blue); color: #fff; }
.wrap { width: min(1200px, 92vw); margin-inline: auto; }
.wrap.narrow { width: min(860px, 92vw); }
.kicker { font: 600 .78rem/1 var(--fb); letter-spacing: .22em; text-transform: uppercase; color: var(--eblue); margin-bottom: 1.1em; }
.proto-note { font-size: .78rem; color: var(--ink3); margin-top: .9em; }
.grain { position: fixed; inset: -50%; pointer-events: none; z-index: 3; opacity: .05; 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 baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); animation: grain 9s steps(8) infinite; }
@keyframes grain { to { transform: translate(6%, 4%); } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .6em; padding: .84em 1.9em; border-radius: var(--pill); font: 600 .95rem/1 var(--fb); border: 1px solid transparent; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; transition: transform .18s var(--easeO), box-shadow .35s var(--easeO), border-color .2s, background .2s; }
.btn-primary { background: linear-gradient(94deg, var(--blue), var(--eblue)); color: #fff; }
.btn-primary::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%); transform: translateX(-130%); animation: sheen 4s var(--easeIO) infinite; }
@keyframes sheen { 0%, 55% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } }
.btn-ghost { border-color: var(--line2); color: var(--ink); background: rgba(255,255,255,.03); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 34px var(--glowB); }
.btn:active { transform: translateY(0) scale(.97); }
.btn[disabled] { cursor: default; }

/* ---------- Header ---------- */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; gap: 2.2vw; padding: 14px min(4vw, 48px); transition: background .4s, box-shadow .4s, backdrop-filter .4s, padding .4s; }
body.scrolled .hd { background: rgba(10,12,17,.86); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 var(--line); padding-block: 9px; }
.hd-logo img { height: 44px; width: auto; }
.hd-logo-txt { font: 800 1.05rem var(--fd); color: var(--ink); letter-spacing: .04em; }
.hd-logo-txt em { font-style: normal; color: var(--eblue); }
.hd-nav { display: flex; gap: clamp(10px, 1.6vw, 26px); margin-left: auto; align-items: center; }
.nav-link { font: 500 .92rem var(--fb); color: var(--ink2); padding: .5em .2em; position: relative; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .4em; }
.nav-link::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--eblue); transition: right .3s var(--easeO); }
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after, .nav-link.is-active::after { right: 0; }
.nav-more { position: relative; }
.nav-dd { position: absolute; top: calc(100% + 10px); right: 0; min-width: 220px; background: var(--graphite); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; display: grid; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .3s var(--easeO); box-shadow: var(--sh2); }
.nav-more:hover .nav-dd, .nav-more:focus-within .nav-dd { opacity: 1; visibility: visible; transform: none; }
.nav-dd a { padding: 10px 14px; border-radius: 10px; font-size: .92rem; }
.nav-dd a:hover { background: rgba(61,139,255,.12); color: var(--ink); }
.hd-cta { margin-left: 1vw; }
.hd-burger { display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; }
.hd-burger span { display: block; height: 2px; margin: 5px 8px; background: var(--ink); border-radius: 2px; transition: .3s; }
.mnav { position: fixed; inset: 0; z-index: 55; background: linear-gradient(170deg, var(--obsidian) 20%, var(--indigo) 220%); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: .45s var(--easeO); }
.mnav.open { opacity: 1; visibility: visible; }
.mnav nav { display: grid; gap: 4px; text-align: center; }
.mnav a { font: 700 clamp(1.5rem, 6vw, 2rem) var(--fd); color: var(--ink); padding: .35em; }
.mnav a:hover { color: var(--eblue); }

/* ---------- Transition veil ---------- */
.veil { position: fixed; inset: 0; z-index: 90; background: linear-gradient(150deg, var(--obsidian) 30%, var(--indigo)); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .34s var(--easeIO); }
.veil.on { opacity: 1; pointer-events: auto; }
.veil-mark { font: 800 1rem var(--fd); letter-spacing: .3em; color: var(--ink3); }
.veil-mark em { font-style: normal; color: var(--eblue); }

/* ---------- Image slots (real URLs w/ branded fallback) ---------- */
.ph { position: relative; overflow: hidden; border-radius: var(--r); background: linear-gradient(145deg, var(--graphite), var(--graphite2) 60%, #223 130%); border: 1px solid var(--line); min-height: 120px; }
.ph::before { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 90% at 20% 10%, rgba(61,139,255,.16), transparent 60%), radial-gradient(70% 70% at 85% 90%, rgba(245,165,36,.10), transparent 55%); }
.ph figcaption { position: absolute; inset: auto 10px 10px; font: 500 .68rem/1.35 var(--fb); color: var(--ink3); letter-spacing: .06em; text-transform: uppercase; z-index: 1; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph.loaded { border-color: transparent; } .ph.loaded::before, .ph.loaded figcaption { display: none; }

/* ---------- HERO SYSTEM ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: clip; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(85% 65% at 78% 16%, rgba(75,59,143,.4), transparent 55%), radial-gradient(65% 60% at 12% 88%, rgba(18,48,94,.55), transparent 62%), linear-gradient(176deg, var(--obsidian), var(--obsidian2)); }
.hero-fx { position: absolute; inset: 0; z-index: -1; }
.hero-in { position: relative; z-index: 2; padding-block: 18vh 12vh; max-width: 780px; }
.hero-sub { max-width: 56ch; margin-top: 1.4em; font-size: clamp(1rem, 1.2vw, 1.2rem); color: var(--ink2); }
.hero-cta { display: flex; gap: 14px; margin-top: 2.2em; flex-wrap: wrap; }
.hero-scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font: 600 .68rem var(--fb); letter-spacing: .3em; text-transform: uppercase; color: var(--ink3); display: grid; justify-items: center; gap: 8px; }
.hero-scroll span { width: 1px; height: 44px; background: linear-gradient(var(--eblue), transparent); animation: drip 2s var(--easeIO) infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.hero .split-line { display: block; overflow: hidden; }

/* Motif element — abstract, per data-motif */
.hero-motif { position: absolute; z-index: 0; right: clamp(-40px, 4vw, 120px); top: 50%; width: clamp(280px, 34vw, 560px); aspect-ratio: 1; transform: translateY(-50%); opacity: .9; pointer-events: none; }
[data-motif="ring"] .hero-motif { border-radius: 50%; border: 1.5px solid rgba(61,139,255,.5); box-shadow: 0 0 110px rgba(61,139,255,.22), inset 0 0 90px rgba(61,139,255,.13); }
[data-motif="ring"] .hero-motif::before { content: ''; position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed rgba(174,182,194,.35); }
[data-motif="ring"] .hero-motif::after { content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--eblue); box-shadow: 0 0 24px var(--eblue); }
[data-motif="orbit"] .hero-motif { border-radius: 50%; border: 1px dashed rgba(174,182,194,.45); }
[data-motif="orbit"] .hero-motif::before, [data-motif="orbit"] .hero-motif::after { content: ''; position: absolute; border-radius: 18px; border: 1px solid rgba(61,139,255,.5); background: rgba(21,26,35,.7); }
[data-motif="orbit"] .hero-motif::before { width: 34%; height: 22%; top: 6%; left: -6%; }
[data-motif="orbit"] .hero-motif::after { width: 30%; height: 20%; bottom: 4%; right: -4%; border-color: rgba(245,165,36,.5); }
[data-motif="merge"] .hero-motif { background: linear-gradient(58deg, transparent 47.6%, rgba(61,139,255,.55) 49.4%, rgba(61,139,255,.55) 50.6%, transparent 52.4%), linear-gradient(-58deg, transparent 47.6%, rgba(75,59,143,.65) 49.4%, rgba(75,59,143,.65) 50.6%, transparent 52.4%); }
[data-motif="scan"] .hero-motif { background: linear-gradient(180deg, transparent 46%, var(--glowA) 50%, transparent 54%); border: 1px solid rgba(245,165,36,.25); border-radius: var(--rl); }
[data-motif="compress"] .hero-motif { background: repeating-linear-gradient(180deg, rgba(61,139,255,.4) 0 2px, transparent 2px 22px); border-radius: var(--rl); }
[data-motif="core"] .hero-motif { border-radius: 50%; background: radial-gradient(circle, rgba(61,139,255,.5) 0%, rgba(61,139,255,.08) 45%, transparent 70%); border: 1px solid rgba(61,139,255,.4); }
[data-motif="grid"] .hero-motif { background: linear-gradient(90deg, rgba(174,182,194,.16) 1px, transparent 1px) 0 0/44px 44px, linear-gradient(0deg, rgba(174,182,194,.16) 1px, transparent 1px) 0 0/44px 44px; border-radius: var(--rl); }
[data-motif="warm"] .hero-motif { border-radius: 50%; background: radial-gradient(circle, var(--glowA) 0%, transparent 65%); border: 1px solid rgba(245,165,36,.35); }
[data-motif="none"] .hero-motif { display: none; }

/* Per-family hero tints */
.hero-service .hero-bg { background: radial-gradient(80% 70% at 80% 18%, rgba(18,48,94,.62), transparent 58%), linear-gradient(172deg, var(--obsidian), #0b1524); }
body[data-page="122"] .hero-bg { background: radial-gradient(70% 60% at 82% 26%, var(--glowA), transparent 58%), linear-gradient(172deg, var(--obsidian), #161009); }
body[data-page="128"] .hero-bg { background: repeating-linear-gradient(180deg, rgba(61,139,255,.05) 0 1px, transparent 1px 28px), linear-gradient(172deg, var(--obsidian), #0c1a30); }
body[data-page="1096"] .hero-bg { background: radial-gradient(70% 55% at 80% 20%, var(--glowA), transparent 60%), linear-gradient(172deg, var(--obsidian), #14100b); }
.hero-contact .hero-bg { background: radial-gradient(80% 70% at 50% 0%, rgba(61,139,255,.2), transparent 62%), linear-gradient(176deg, var(--obsidian), var(--obsidian2)); }
.hero-legal, .hero-contact { min-height: 56svh; }
.hero-legal .hero-bg { background: linear-gradient(176deg, var(--obsidian), var(--graphite)); }
.hero-form { min-height: 62svh; }

/* ---------- Customer trust rail ---------- */
.rail { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; padding: 18px 0 22px; mask-image: linear-gradient(90deg, transparent, #000 8% 92%, transparent); pointer-events: none; }
.rail-track { display: flex; gap: 16px; width: max-content; animation: rail 60s linear infinite; pointer-events: auto; }
.rail:hover .rail-track { animation-play-state: paused; }
@keyframes rail { to { transform: translateX(-50%); } }
.rail-ph { width: 190px; aspect-ratio: 4/3; flex: none; transition: transform .4s var(--easeO), box-shadow .4s var(--easeO); }
.rail-ph:nth-child(3n) { transform: translateY(8px) scale(.95); }
.rail-ph:nth-child(3n+1) { transform: translateY(-4px); }
.rail-ph:hover { transform: scale(1.08); box-shadow: 0 0 0 1px rgba(245,165,36,.5), var(--sh2); z-index: 2; }
.hero-home .hero-in { padding-block: 16vh 26vh; }

/* ---------- Pinned six-service sequence ---------- */
.svc { position: relative; }
.svc-stage { position: sticky; top: 0; height: 100svh; overflow: clip; display: grid; align-items: center; }
.svc-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(176deg, var(--obsidian2), var(--deep) 160%); transition: none; }
.svc-inter { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font: 700 clamp(1.5rem, 3.4vw, 2.6rem) var(--fd); color: var(--ink); text-align: center; padding: 0 8vw; }
.svc-slide { position: absolute; inset: 0; z-index: 2; display: grid; align-items: center; padding: 0 min(7vw, 110px); opacity: 0; visibility: hidden; }
.svc-copy { max-width: 560px; position: relative; z-index: 2; }
.svc-kicker { font: 600 .74rem var(--fb); letter-spacing: .24em; text-transform: uppercase; color: var(--eblue); margin-bottom: 1.2em; }
.svc-slide h3 { font-size: clamp(2rem, 4.6vw, 3.8rem); font-weight: 800; margin-bottom: .4em; }
.svc-desc { color: var(--ink2); max-width: 46ch; margin-bottom: 1.8em; }
.svc-index { position: absolute; right: min(6vw, 90px); bottom: 6vh; font: 800 clamp(6rem, 16vw, 15rem)/1 var(--fd); color: transparent; -webkit-text-stroke: 1.5px rgba(61,139,255,.35); z-index: 1; }
.svc-motif { position: absolute; right: clamp(20px, 9vw, 150px); top: 50%; transform: translateY(-50%); width: clamp(200px, 26vw, 420px); aspect-ratio: 1; z-index: 1; opacity: .8; }
.svc-slide[data-motif="ring"] .svc-motif { border-radius: 50%; border: 1.5px solid rgba(61,139,255,.55); box-shadow: 0 0 90px rgba(61,139,255,.25), inset 0 0 70px rgba(61,139,255,.14); }
.svc-slide[data-motif="orbit"] .svc-motif { border-radius: 50%; border: 1px dashed rgba(174,182,194,.5); }
.svc-slide[data-motif="scan"] .svc-motif { background: linear-gradient(180deg, transparent 46%, var(--glowA) 50%, transparent 54%); }
.svc-slide[data-motif="merge"] .svc-motif { background: linear-gradient(58deg, transparent 48%, rgba(61,139,255,.5) 50%, transparent 52%), linear-gradient(-58deg, transparent 48%, rgba(75,59,143,.6) 50%, transparent 52%); }
.svc-slide[data-motif="compress"] .svc-motif { background: repeating-linear-gradient(180deg, rgba(61,139,255,.4) 0 2px, transparent 2px 20px); }
.svc-slide[data-motif="core"] .svc-motif { border-radius: 50%; background: radial-gradient(circle, rgba(61,139,255,.45), transparent 66%); border: 1px solid rgba(61,139,255,.4); }
.svc-progress { position: absolute; right: max(2.4vw, 16px); top: 50%; transform: translateY(-50%); display: grid; gap: 12px; z-index: 4; }
.svc-progress span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); transition: .25s; }
.svc-progress span.on { background: var(--eblue); transform: scale(1.5); box-shadow: 0 0 14px var(--eblue); }
/* Light slide: flip ink for readability on the blue-white scene. */
.svc-slide.svc-light h3 { color: var(--inkD); }
.svc-slide.svc-light .svc-desc { color: #3c4550; }
.svc-slide.svc-light .svc-kicker { color: var(--blue); }
.svc-slide.svc-light .svc-index { -webkit-text-stroke-color: rgba(30,94,255,.4); }

/* ---------- Deck (horizontal swipe cards) ---------- */
.deck-scene { padding-block: 14vh 6vh; overflow: clip; }
.deck { display: flex; gap: 22px; padding: 6vh min(7vw, 110px); width: max-content; }
.deck-card { width: clamp(260px, 25vw, 360px); flex: none; background: linear-gradient(175deg, var(--graphite), var(--graphite2)); border: 1px solid var(--line); border-radius: var(--rl); padding: 30px 26px; box-shadow: var(--sh1); display: grid; gap: 12px; align-content: start; transition: border-color .3s, box-shadow .3s; }
.deck-card:hover { border-color: rgba(61,139,255,.45); box-shadow: 0 0 0 1px rgba(61,139,255,.25), var(--sh2); }
.deck-card h4 { font-size: 1.3rem; }
.deck-card .btn { justify-self: start; margin-top: 6px; }

/* ---------- Scenes / generic sections ---------- */
.scene { position: relative; padding-block: clamp(70px, 11vh, 130px); }
.scene .wrap > * + * { margin-top: 1.1em; }
.scene-alt { background: linear-gradient(180deg, transparent, rgba(21,26,35,.55) 18% 82%, transparent); }
.scene-light { background: radial-gradient(90% 100% at 50% 0%, #fff, var(--cloud) 55%, var(--cloud2)); color: #3c4550; border-radius: var(--rl); margin: 6vh 2vw; }
.scene-light h2, .scene-light h3, .scene-light h4, .scene-light .sec-h { color: var(--inkD); }
.scene-light .ticks li { color: #333c49; }
.scene-metal { background: linear-gradient(115deg, rgba(174,182,194,.09), transparent 42%), linear-gradient(180deg, var(--obsidian2), var(--graphite) 140%); border-block: 1px solid var(--line); overflow: clip; }
.scene-metal .wrap { position: relative; z-index: 1; }
.sec-img { aspect-ratio: 16/9; max-width: 760px; }
.sec-rich { max-width: 68ch; }
.ticks { list-style: none; padding: 0; display: grid; gap: 10px; }
.ticks li { padding-left: 30px; position: relative; color: var(--ink2); }
.ticks li::before { content: ''; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, var(--eblue) 34%, transparent 40%), rgba(61,139,255,.16); }

/* Cards grid */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 2em; perspective: 1100px; }
.card { background: linear-gradient(178deg, var(--graphite), var(--graphite2)); border: 1px solid var(--line); border-radius: var(--rl); padding: 26px 24px; box-shadow: var(--sh1); display: grid; gap: 10px; align-content: start; transition: transform .35s var(--easeO), border-color .3s, box-shadow .35s var(--easeO); will-change: transform; }
/* Correction #2 (owner review 2026-08-01): cards must not rise on hover,
   on any page. Edge and glow still respond; the card itself stays put. */
.card:hover { border-color: rgba(61,139,255,.4); box-shadow: 0 0 0 1px rgba(61,139,255,.2), var(--sh2); }
.card-img { aspect-ratio: 16/10; margin: -8px -6px 8px; }
.scene-light .card { background: #fff; border-color: rgba(16,20,28,.08); }
.scene-light .card h4 { color: var(--inkD); } .scene-light .card p { color: #4a5464; }

/* Why grid */
.why-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.why-media { display: grid; gap: 18px; }
.why-ph { aspect-ratio: 4/3; }
.why-ph:nth-child(2) { margin-left: 14%; margin-top: -8%; }
.why-line { position: absolute; left: 0; right: 0; bottom: 8px; width: 100%; height: 90px; color: rgba(30,94,255,.5); }

/* Helix (DNA-like rotating sequence) */
.helix { position: relative; padding-block: 12vh; overflow: clip; }
.helix-head { text-align: center; max-width: 760px; }
.helix-stage { position: relative; width: min(1100px, 94vw); margin: 7vh auto 0; display: grid; }
.helix-spine { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 100%; width: 220px; color: rgba(61,139,255,.4); }
.helix-cards { display: grid; gap: clamp(40px, 8vh, 90px); position: relative; z-index: 1; }
.helix-card { width: min(420px, 86vw); background: linear-gradient(178deg, var(--graphite), var(--graphite2)); border: 1px solid var(--line); border-radius: var(--rl); padding: 26px 26px 26px 84px; position: relative; box-shadow: var(--sh1); }
.helix-card:nth-child(odd) { justify-self: start; margin-left: 2%; }
.helix-card:nth-child(even) { justify-self: end; margin-right: 2%; }
.helix-num { position: absolute; left: 20px; top: 20px; font: 800 2rem var(--fd); color: transparent; -webkit-text-stroke: 1.3px var(--eblue); }

/* FAQ */
.faq { display: grid; gap: 12px; margin-top: 1.6em; }
details { background: var(--graphite); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .25s, background .25s; }
details[open] { border-color: var(--line2); background: var(--graphite2); }
summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 22px; font: 600 1.02rem var(--fb); color: var(--ink); position: relative; }
summary::-webkit-details-marker { display: none; }
.acc-x { position: absolute; right: 20px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); }
.acc-x::before, .acc-x::after { content: ''; position: absolute; inset: 6px 0; background: var(--eblue); border-radius: 2px; transition: transform .3s var(--easeO); }
.acc-x::after { transform: rotate(90deg); }
details[open] .acc-x::after { transform: rotate(0); }
.acc-a { padding: 0 22px 20px; color: var(--ink2); max-width: 74ch; }
.scene-faq { background: linear-gradient(180deg, transparent, rgba(21,26,35,.5) 30% 100%); }

/* Band (subscribe) */
.band { padding-block: 12vh; background: radial-gradient(70% 90% at 50% 110%, rgba(30,94,255,.28), transparent 60%), linear-gradient(180deg, var(--obsidian2), var(--obsidian)); text-align: center; }
.band-in > p { max-width: 60ch; margin: 1em auto 0; }
.band-form { display: flex; gap: 10px; justify-content: center; margin-top: 2em; flex-wrap: wrap; }
.band-form input { width: min(360px, 80vw); padding: .9em 1.3em; border-radius: var(--pill); border: 1px solid var(--line2); background: rgba(255,255,255,.05); color: var(--ink); font: 500 .95rem var(--fb); }
.band .proto-note { text-align: center; }

/* Proof belt (real customer gallery) */
.proof { padding-block: 11vh 13vh; overflow: clip; }
.proof .wrap { text-align: center; margin-bottom: 5vh; }
.proof-belt { display: grid; gap: 16px; transform: rotate(-1.6deg) scale(1.03); }
.proof-row { display: flex; gap: 16px; width: max-content; }
.proof-ph { width: clamp(200px, 21vw, 300px); aspect-ratio: 4/3; flex: none; transition: transform .35s var(--easeO), box-shadow .35s var(--easeO); }
.proof-ph:hover { transform: scale(1.05); box-shadow: 0 0 0 1px rgba(245,165,36,.45), var(--sh2); z-index: 2; }
.proof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 2em; }
.g-tile { aspect-ratio: 4/3; }

/* ---------- Form pages ---------- */
.form-scene { padding-top: 4vh; }
.form-wrap { display: grid; }
.form-card { background: linear-gradient(180deg, var(--graphite), var(--obsidian2) 140%); border: 1px solid var(--line); border-radius: var(--rl); box-shadow: var(--sh2); padding: clamp(22px, 3.4vw, 46px); position: relative; overflow: clip; width: min(880px, 100%); margin-inline: auto; }
.form-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, var(--eblue), transparent 36%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .5; pointer-events: none; }
.form-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 1.4em; flex-wrap: wrap; }
.form-head h3 { font-size: 1.5rem; }
.lock { font: 600 .72rem var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--eblue); border: 1px solid rgba(61,139,255,.35); border-radius: var(--pill); padding: .5em 1em; }
.fprog { display: flex; gap: 8px; margin-bottom: 2em; flex-wrap: wrap; }
.fprog span { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; font: 600 .78rem var(--fb); color: var(--ink3); transition: .3s; }
.fprog span.is-on { background: var(--blue); border-color: transparent; color: #fff; box-shadow: 0 0 18px var(--glowB); }
.fprog span.done { border-color: var(--eblue); color: var(--eblue); }
.fstep { border: 0; padding: 0; display: none; }
.fstep.is-on { display: block; animation: stepin .5s var(--easeO); }
@keyframes stepin { from { opacity: 0; transform: translateX(34px); } }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.fgrid label, .form-card > label { display: grid; gap: 7px; font: 500 .88rem var(--fb); color: var(--ink2); }
.fgrid input, .fgrid textarea, .form-card textarea, .form-card input, .sel { padding: .82em 1em; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.045); color: var(--ink); font: 400 .95rem var(--fb); transition: border-color .2s, box-shadow .2s, background .2s; }
.fgrid input:focus, .fgrid textarea:focus { border-color: var(--eblue); box-shadow: 0 0 0 3px rgba(61,139,255,.22); outline: none; background: rgba(255,255,255,.07); }
.sel { display: flex; justify-content: space-between; align-items: center; color: var(--ink3); }
.upl-label { grid-column: 1 / -1; }
.upl { border: 1.5px dashed var(--line2); border-radius: var(--r); padding: 1.4em; text-align: center; color: var(--ink3); background: rgba(61,139,255,.05); transition: border-color .25s; display: block; }
.upl:hover { border-color: var(--eblue); }
.upl strong { color: var(--ink); display: block; margin-bottom: 2px; }
.fnote { grid-column: 1 / -1; font-size: .8rem; color: var(--ink3); }
.fnav { display: flex; justify-content: space-between; margin-top: 2em; gap: 12px; }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
.contact-line { display: block; font: 600 1.1rem var(--fd); color: var(--ink); margin-bottom: .6em; }
.contact-line:hover { color: var(--eblue); }

/* ---------- Legal ---------- */
body[data-family="legal"] { background: var(--ivory); color: #303845; }
body[data-family="legal"] .hd-nav .nav-link { color: #465060; }
body[data-family="legal"].scrolled .hd { background: rgba(248,245,239,.9); }
.legal { padding-block: 8vh 12vh; }
.legal-wrap { width: min(820px, 92vw); font-size: 1.03rem; line-height: 1.78; }
.legal-wrap > * + * { margin-top: 1em; }
.legal h3.sec-h, .legal h2.sec-h2 { font-size: 1.5rem; color: var(--inkD); margin-top: 1.8em; }
.legal .sec-rich { max-width: none; color: #3c4550; }
.legal .ticks li { color: #3c4550; }
body[data-family="legal"] .ft, body[data-family="legal"] .veil { filter: none; }
body[data-family="legal"] .grain { opacity: .03; }

/* ---------- Footer ---------- */
.ft { position: relative; background: linear-gradient(180deg, var(--obsidian2), #05060a); border-top: 1px solid var(--line); padding: 9vh min(4vw, 60px) 4vh; overflow: clip; color: var(--ink2); }
.ft-glow { position: absolute; inset: auto -10% -60% -10%; height: 70%; background: radial-gradient(50% 100% at 50% 100%, rgba(30,94,255,.22), transparent 70%); pointer-events: none; }
.ft-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 4vw, 70px); position: relative; z-index: 1; }
.ft-col { display: grid; gap: 9px; align-content: start; justify-items: start; }
.ft-col h4 { margin: .6em 0 .3em; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.ft-col a { color: var(--ink3); font-size: .93rem; transition: color .2s, transform .2s; }
.ft-col a:hover { color: var(--eblue); transform: translateX(3px); }
.ft-logo { height: 52px; width: auto; }
.ft-brand p { font-size: .92rem; color: var(--ink3); max-width: 44ch; }
.ft-social { display: flex; gap: 14px; }
.ft-social a { border: 1px solid var(--line2); border-radius: var(--pill); padding: .5em 1.2em; font-size: .85rem; }
.ft-agree { margin-top: 1.2em; }
.ft-base { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 6vh; padding-top: 2.4vh; border-top: 1px solid var(--line); font-size: .8rem; color: var(--ink3); position: relative; z-index: 1; }

/* ---------- Reveal primitives (JS adds .in) ---------- */
.rv { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--easeO), transform .9s var(--easeO); }
.rv.in { opacity: 1; transform: none; }
html.reduced .rv { opacity: 1; transform: none; transition: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) { .hd-nav, .hd-cta { display: none; } .hd-burger { display: block; margin-left: auto; } .hero-motif { opacity: .34; right: -18%; } .why-grid, .contact-grid { grid-template-columns: 1fr; } .deck { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: 3vh 6vw; -webkit-overflow-scrolling: touch; } .deck-card { scroll-snap-align: center; } .helix-card, .helix-card:nth-child(even), .helix-card:nth-child(odd) { justify-self: center; margin: 0; } .helix-spine { opacity: .5; }
}
@media (max-width: 700px) {
  .fgrid { grid-template-columns: 1fr; }
  .ft-grid { grid-template-columns: 1fr; }
  .ft-base { flex-direction: column; }
  .rail-ph { width: 140px; }
  .hero-in { padding-block: 15vh 20vh; }
  .proof-ph { width: 180px; }
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rail-track { animation: none; }
  .hero-scroll { display: none; }
}


/* ================= V2 COMPLETION LAYER ================= */
.sec-h2 { margin-bottom: .45em; }
.sec-rich { font-size: 1.01rem; line-height: 1.7; color: var(--ink2); }
.sec-rich strong { color: var(--ink); }
.scene-light .sec-rich, .scene-light .sec-rich strong { color: #3c4550; }
.sec-rich + .sec-rich { margin-top: .9em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4em; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 1.6em 0; }
.media-grid .ph { aspect-ratio: 4/3; border-radius: var(--rl); }

/* numbered step strip (real 3-step copy from the hero section) */
.scene-steps { padding-top: clamp(40px, 6vh, 70px); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: s; }
.step { position: relative; background: linear-gradient(178deg, var(--graphite), var(--graphite2)); border: 1px solid var(--line); border-radius: var(--rl); padding: 26px 24px 24px 24px; box-shadow: var(--sh1); transition: transform .35s var(--easeO), border-color .3s, box-shadow .35s; }
.step-num { font: 800 2.1rem/1 var(--fd); color: transparent; -webkit-text-stroke: 1.3px var(--eblue); display: block; margin-bottom: 12px; }
.step h4 { margin-bottom: 6px; }
.step p { color: var(--ink2); font-size: .95rem; line-height: 1.6; }

/* icon glyph on iconbox cards */
.card-glyph { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(61,139,255,.5); position: relative; margin-bottom: 4px; background: linear-gradient(145deg, rgba(61,139,255,.16), rgba(75,59,143,.1)); }
.card-glyph::after { content: ''; position: absolute; inset: 12px; border-radius: 6px; background: linear-gradient(135deg, var(--eblue), #7c6fd0); opacity: .9; }

/* scroll progress */
.sprog { position: fixed; top: 0; left: 0; height: 2.5px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--eblue), #7c6fd0 70%, #f0b429); z-index: 96; pointer-events: none; }

/* cursor aura removed — owner #97 */

/* sticky CTA dock */
.dock { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; gap: 10px; align-items: center; opacity: 0; translate: 0 18px; pointer-events: none; transition: opacity .45s var(--easeO), translate .45s var(--easeO); }
body.docked .dock { opacity: 1; translate: 0 0; pointer-events: auto; }
.dock .btn { box-shadow: 0 14px 40px rgba(30,94,255,.4); }
.dock-top { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: linear-gradient(178deg, var(--graphite), var(--graphite2)); color: var(--ink); font-size: 1.05rem; cursor: pointer; transition: transform .3s var(--easeO), border-color .3s; }
.dock-top:hover { transform: translateY(-3px); border-color: rgba(61,139,255,.6); }
@media (max-width: 700px) { .dock .btn { padding: 12px 18px; font-size: .82rem; } }

/* payment estimator */
.scene-est { background: linear-gradient(180deg, transparent, rgba(18,48,94,.14) 30% 70%, transparent); }
.est-grid { display: grid; gap: 34px; align-items: center; }
@media (min-width: 1000px) { .est-grid { grid-template-columns: 1.05fr 1fr; } }
.est-card { background: linear-gradient(172deg, var(--graphite), var(--graphite2)); border: 1px solid var(--line); border-radius: var(--rl); padding: 30px 28px; box-shadow: var(--sh2); display: grid; gap: 20px; }
.est-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; font: 600 .78rem var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.est-row output { font: 700 1rem var(--fd); color: var(--ink); letter-spacing: 0; }
.est-row input { grid-column: 1 / -1; appearance: none; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--eblue) var(--fill, 30%), rgba(255,255,255,.14) 0); outline: none; }
.est-row input::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--blue); box-shadow: 0 4px 14px rgba(30,94,255,.5); cursor: pointer; transition: transform .2s; }
.est-row input::-webkit-slider-thumb:hover { transform: scale(1.15); }
.est-result { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 18px; font: 600 .78rem var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.est-result strong { font: 800 clamp(1.9rem, 3vw, 2.6rem) var(--fd); color: var(--ink); }
.est-result strong i { font: 600 .9rem var(--fb); color: var(--eblue); font-style: normal; }

/* count-up numbers */
.count { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; }

/* link + image micro-interactions */
.hd-nav .nav-link { position: relative; }
.hd-nav .nav-link::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1.5px; background: var(--eblue); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--easeO); }
.hd-nav .nav-link:hover::after, .hd-nav .nav-link.is-active::after { transform: scaleX(1); }
.ph { overflow: clip; }
.ph img { transition: transform .8s var(--easeO); }
.ph:hover img { transform: scale(1.045); }
.faq details { transition: border-color .3s; }
.faq details:hover { border-color: rgba(61,139,255,.45); }
.card:hover .card-glyph::after { animation: glyphpulse 1.2s var(--easeO); }
@keyframes glyphpulse { 0% { scale: 1; } 40% { scale: .78; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .sprog, .dock { transition: none; } .ph img { transition: none; } }