/* ============================================================
   LeadLink — Marketing · Technology · AI
   Palette: obsidian ground, gold accent, silver support, white type
   Type: Archivo (expanded) display · Manrope body · JetBrains Mono data
   ============================================================ */

:root{
  --ink:      #07070A;
  --ink-2:    #0B0C10;
  --panel:    #0E0F14;
  --panel-2:  #14161D;
  --line:     rgba(201,205,214,.11);
  --line-2:   rgba(201,205,214,.18);
  --gold:     #C9962B;
  --gold-lt:  #F3DFA0;
  --gold-dp:  #8A6A18;
  --gold-glow:rgba(201,150,43,.20);
  --silver:   #C9CDD6;
  --muted:    #8A8F9A;
  --white:    #F7F8FA;
  --ok:       #6FBF8B;
  --warn:     #D8A24A;

  --disp: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1200px;
  --gut:  clamp(20px, 5vw, 64px);
  --secy: clamp(88px, 12vw, 168px);
  --r:    14px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--silver);
  font-family:var(--body);
  font-size:clamp(15.5px,1.02vw,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,canvas{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:#0A0A0C; padding:12px 18px; font-weight:700;
}
.skip:focus{ left:12px; top:12px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

/* ---------- type ---------- */
.h2{
  font-family:var(--disp);
  font-variation-settings:"wdth" 112;
  font-weight:800;
  font-size:clamp(30px,4.4vw,54px);
  line-height:1.04;
  letter-spacing:-.018em;
  color:var(--white);
  margin:0 0 18px;
  text-wrap:balance;
}
.h3{
  font-family:var(--disp);
  font-variation-settings:"wdth" 108;
  font-weight:700;
  font-size:clamp(22px,2.5vw,30px);
  line-height:1.15;
  letter-spacing:-.012em;
  color:var(--white);
  margin:0 0 14px;
}
.lede{ font-size:clamp(16px,1.25vw,18.5px); color:var(--muted); max-width:62ch; margin:0; }

.eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:10px; margin:0 0 20px;
}
.eyebrow i{
  width:7px; height:7px; flex:none; background:var(--gold);
  transform:rotate(45deg); box-shadow:0 0 12px var(--gold-glow);
}

.gold{
  background:linear-gradient(96deg,var(--gold-lt) 0%,var(--gold) 46%,var(--gold-dp) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- scroll rails ---------- */
.rail{
  position:fixed; left:calc(var(--gut) / 2 + 6px); top:0; bottom:0; width:1px;
  background:var(--line); z-index:40; pointer-events:none;
}
.rail__fill{
  position:absolute; inset:0 auto 0 0; width:1px; height:0;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold) 60%,var(--gold-dp));
  box-shadow:0 0 14px var(--gold-glow);
}
.topbar{ position:fixed; inset:0 0 auto 0; height:2px; z-index:60; background:transparent; }
.topbar__fill{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--gold-dp),var(--gold),var(--gold-lt)); }
@media (min-width:981px){ .topbar{ display:none; } }
@media (max-width:980px){ .rail{ display:none; } }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(7,7,10,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
}
.nav__in{
  max-width:var(--wrap); margin-inline:auto; padding:18px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:padding .35s ease;
}
.nav.is-stuck .nav__in{ padding-block:12px; }

.brand{ display:flex; align-items:center; gap:11px; }
/* horizontal lockup, 595x150 — height-driven so the aspect never distorts */
.brand__logo{ height:36px; width:auto; flex:none; display:block; }
.foot__brand .brand__logo{ height:46px; }
@media (max-width:520px){ .brand__logo{ height:30px; } }
.brand__type{
  font-family:var(--disp); font-variation-settings:"wdth" 104;
  font-weight:700; font-size:19px; letter-spacing:.01em; white-space:nowrap;
}
.brand__type .w{ color:var(--white); }
.brand__type .g{
  background:linear-gradient(100deg,var(--gold-lt),var(--gold) 55%,var(--gold-dp));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__links > a:not(.btn){
  font-size:14.5px; color:var(--silver); position:relative; padding-block:4px;
  transition:color .22s ease;
}
.nav__links > a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .3s cubic-bezier(.4,0,.2,1);
}
.nav__links > a:not(.btn):hover{ color:var(--white); }
.nav__links > a:not(.btn):hover::after{ right:0; }

.burger{ display:none; background:none; border:0; padding:10px; cursor:pointer; }
.burger span{ display:block; width:22px; height:1.5px; background:var(--white); transition:transform .3s ease, opacity .3s ease; }
.burger span+span{ margin-top:6px; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

@media (max-width:980px){
  .burger{ display:block; }
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(9,9,13,.97); backdrop-filter:blur(16px);
    border-block:1px solid var(--line);
    padding:8px var(--gut) 22px;
    clip-path:inset(0 0 100% 0); opacity:0; pointer-events:none;
    transition:clip-path .4s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  }
  .nav__links.is-open{ clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto; }
  .nav__links > a:not(.btn){ padding:15px 0; border-bottom:1px solid var(--line); font-size:16px; }
  .nav__links .btn{ margin-top:18px; justify-content:center; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:999px; border:1px solid transparent;
  font-family:var(--body); font-size:15px; font-weight:600;
  letter-spacing:-.002em; white-space:nowrap;
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .25s ease, box-shadow .3s ease, color .25s ease, border-color .25s ease, background .25s ease;
}
.btn--sm{ padding:10px 20px; font-size:14px; }
.btn--full{ width:100%; padding-block:16px; }
.btn--gold{
  background:linear-gradient(100deg,var(--gold-lt),var(--gold) 52%,var(--gold-dp));
  color:#0A0A0C; font-weight:600;
  box-shadow:0 8px 30px -12px var(--gold-glow);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -12px rgba(201,150,43,.45); }
.btn--ghost{ border-color:var(--line-2); color:var(--white); background:rgba(255,255,255,.02); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-lt); transform:translateY(-2px); }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-block:150px 110px; overflow:hidden; isolation:isolate;
}
.hero__net{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; }
.hero__veil{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(70% 55% at 18% 34%, rgba(201,150,43,.13), transparent 62%),
    radial-gradient(60% 60% at 88% 78%, rgba(201,205,214,.055), transparent 60%),
    linear-gradient(180deg, rgba(7,7,10,.62) 0%, rgba(7,7,10,.30) 45%, var(--ink) 96%);
}
.hero__in{ position:relative; }
.hero__h1{
  font-family:var(--disp); font-variation-settings:"wdth" 114;
  font-weight:800; font-size:clamp(38px,7.1vw,92px); line-height:.98;
  letter-spacing:-.032em; color:var(--white); margin:0 0 26px;
}
.hero__h1 > span{ display:block; }
.hero__h1 em{ font-style:normal; }
.hero__sub{ font-size:clamp(16px,1.35vw,19px); color:var(--silver); max-width:60ch; margin:0 0 36px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }

.hero__facts{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; margin:64px 0 0; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.hero__facts > div{ background:rgba(11,12,16,.72); padding:20px 22px; backdrop-filter:blur(6px); }
.hero__facts dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.hero__facts dd{
  margin:0; display:flex; align-items:baseline; gap:6px;
  font-family:var(--disp); font-variation-settings:"wdth" 110;
  font-weight:700; font-size:clamp(24px,2.5vw,34px); color:var(--white);
  font-variant-numeric:tabular-nums;
}
.hero__facts dd em{ font:500 11px/1 var(--mono); font-style:normal; color:var(--gold); letter-spacing:.1em; text-transform:uppercase; }
@media (max-width:760px){ .hero__facts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.scrollcue{
  position:absolute; left:50%; bottom:28px; translate:-50% 0;
  width:22px; height:36px; border:1px solid var(--line-2); border-radius:12px;
  display:grid; place-items:start center; padding-top:7px; z-index:2;
}
.scrollcue span{ width:2px; height:6px; background:var(--gold); border-radius:2px; animation:cue 1.9s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ transform:translateY(0); opacity:1; } 55%{ transform:translateY(12px); opacity:.15; } }
@media (max-width:760px){ .scrollcue{ display:none; } }

/* ---------- marquee ---------- */
.marquee{
  border-block:1px solid var(--line); background:var(--ink-2);
  overflow:hidden; padding-block:16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee__track{ display:flex; align-items:center; gap:34px; width:max-content; animation:slide 46s linear infinite; }
.marquee__track span{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.marquee__track i{ width:5px; height:5px; background:var(--gold); transform:rotate(45deg); flex:none; opacity:.85; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- sections ---------- */
.sec{ padding-block:var(--secy); position:relative; }
/* anchor targets must clear the fixed nav */
.sec[id],.hero[id]{ scroll-margin-top:84px; }
.sec--alt{ background:var(--ink-2); border-block:1px solid var(--line); }
.sechead{ max-width:760px; margin-bottom:clamp(44px,5vw,72px); }

/* ---------- grids & cards ---------- */
.grid{ display:grid; gap:20px; }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.spaced{ margin-top:22px; }
@media (max-width:980px){ .grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .grid--3{ grid-template-columns:minmax(0,1fr); } }

.card{
  position:relative; padding:30px 28px 26px;
  background:linear-gradient(180deg,var(--panel),var(--ink-2));
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  transition:border-color .35s ease, transform .35s ease, background .35s ease;
}
.card::before{
  content:""; position:absolute; inset:0 auto auto 0; height:1px; width:0;
  background:linear-gradient(90deg,var(--gold),transparent);
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.card:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.card:hover::before{ width:100%; }
.card__ix{
  display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.2em; color:var(--gold); border:1px solid var(--line-2);
  padding:5px 9px; border-radius:5px; margin-bottom:22px;
}
.card h3{
  font-family:var(--disp); font-variation-settings:"wdth" 106; font-weight:700;
  font-size:20px; line-height:1.2; color:var(--white); margin:0 0 12px; letter-spacing:-.008em;
}
.card p{ margin:0 0 20px; font-size:15px; color:var(--muted); }

.tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.tags li{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--silver); background:rgba(201,205,214,.05);
  border:1px solid var(--line); padding:5px 9px; border-radius:999px;
}

.mini{
  padding:26px 24px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel); transition:border-color .3s ease;
}
.mini:hover{ border-color:var(--line-2); }
.mini h4{
  font-family:var(--disp); font-variation-settings:"wdth" 106; font-weight:700;
  font-size:17px; color:var(--white); margin:0 0 10px;
}
.mini p{ margin:0; font-size:14.5px; color:var(--muted); }

/* ---------- pipeline ---------- */
.pipe{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(30px,6vw,90px); }
/* min-width:0 — without it these grid items size to their content and push the
   whole document wider than the viewport on narrow screens */
.pipe__side{ position:sticky; top:120px; align-self:start; height:max-content; min-width:0; }
.pipe__body{ min-width:0; }
.pipe__nav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.pipe__nav li{
  display:flex; align-items:baseline; gap:14px; padding:13px 0 13px 18px;
  border-left:1px solid var(--line); color:var(--muted);
  transition:color .35s ease, border-color .35s ease, padding-left .35s ease;
}
.pipe__nav li b{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em; opacity:.6;
}
.pipe__nav li span{
  font-family:var(--disp); font-variation-settings:"wdth" 108; font-weight:700; font-size:17px;
}
.pipe__nav li.on{ color:var(--white); border-left-color:var(--gold); padding-left:24px; }
.pipe__nav li.on b{ color:var(--gold); opacity:1; }
.pipe__nav li.done{ color:var(--silver); border-left-color:var(--gold-dp); }

.pipe__body{ display:flex; flex-direction:column; gap:clamp(60px,9vw,120px); }
.stage{ max-width:64ch; opacity:.32; transition:opacity .5s ease; }
.stage.on{ opacity:1; }
.stage__n{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin:0 0 14px;
}
.stage h3{
  font-family:var(--disp); font-variation-settings:"wdth" 110; font-weight:800;
  font-size:clamp(24px,3.1vw,38px); line-height:1.08; letter-spacing:-.02em;
  color:var(--white); margin:0 0 16px; text-wrap:balance;
}
.stage p{ margin:0 0 22px; font-size:16px; color:var(--muted); }
.stage__l{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.stage__l li{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--silver);
  border:1px solid var(--line); border-radius:999px; padding:7px 13px; background:rgba(201,205,214,.04);
}
@media (max-width:900px){
  .pipe{ grid-template-columns:minmax(0,1fr); gap:34px; }
  .pipe__side{ position:static; }
  .pipe__nav{ flex-direction:row; overflow-x:auto; gap:0; padding-bottom:4px; }
  .pipe__nav li{ border-left:0; border-bottom:1px solid var(--line); padding:10px 16px 10px 0; }
  .pipe__nav li.on{ border-bottom-color:var(--gold); padding-left:0; }
  .pipe__nav li span{ font-size:15px; }
  .stage{ opacity:1; }
}

/* ---------- split / mock UI ---------- */
.split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(28px,5vw,72px); align-items:center; margin-top:clamp(40px,5vw,64px);
}
.split--flip .split__copy{ order:2; }
@media (max-width:900px){
  .split{ grid-template-columns:minmax(0,1fr); }
  .split--flip .split__copy{ order:0; }
}
.split__copy p{ color:var(--muted); margin:0 0 22px; }

.ticks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.ticks li{ position:relative; padding-left:26px; font-size:15px; color:var(--silver); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.58em; width:9px; height:9px;
  border:1px solid var(--gold); transform:rotate(45deg);
}
.ticks--lg li{ font-size:15.5px; }

.ui{
  background:linear-gradient(170deg,var(--panel-2),var(--ink-2) 70%);
  border:1px solid var(--line-2); border-radius:16px; overflow:hidden;
  box-shadow:0 40px 80px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(201,150,43,.06);
}
.ui__bar{
  display:flex; align-items:center; gap:7px; padding:13px 16px;
  border-bottom:1px solid var(--line); background:rgba(0,0,0,.28);
}
.ui__bar i{ width:8px; height:8px; border-radius:50%; background:rgba(201,205,214,.22); }
.ui__bar i:first-child{ background:var(--gold); }
.ui__bar b{
  margin-left:8px; font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.1em; color:var(--muted);
}
.ui__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }
.ui__stats > div{ background:var(--panel); padding:16px 14px; }
.ui__stats span{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.ui__stats b{
  font-family:var(--disp); font-variation-settings:"wdth" 108; font-weight:700;
  font-size:22px; color:var(--white); font-variant-numeric:tabular-nums;
}
.ui__stats .up b{ color:var(--gold-lt); }

.ui__chart{
  display:flex; align-items:flex-end; gap:6px; height:118px;
  padding:20px 18px; border-bottom:1px solid var(--line);
}
.ui__chart span{
  flex:1; height:var(--h); border-radius:3px 3px 1px 1px;
  background:linear-gradient(180deg,rgba(201,150,43,.85),rgba(201,150,43,.12));
  transform-origin:bottom; animation:grow .9s cubic-bezier(.2,.8,.2,1) backwards;
}
.ui__chart span:nth-child(n){ animation-delay:calc(var(--i,0) * 60ms); }
.ui__chart span:last-child{ background:linear-gradient(180deg,var(--gold-lt),rgba(243,223,160,.15)); }
@keyframes grow{ from{ transform:scaleY(.05); opacity:0; } }

.ui__rows{ padding:6px 0 10px; }
.ui__row{
  display:grid; grid-template-columns:1.1fr 1fr auto; gap:12px; align-items:center;
  padding:12px 18px; border-bottom:1px solid var(--line); font-size:13.5px;
}
.ui__row:last-child{ border-bottom:0; }
.ui__row b{ color:var(--white); font-weight:600; }
.ui__row span{ font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.06em; }
.ui__row em{
  font-family:var(--mono); font-style:normal; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line-2); border-radius:999px; padding:4px 10px;
}
.ui__row em.ok{ color:var(--ok); border-color:rgba(111,191,139,.3); }
.ui__row em.warn{ color:var(--warn); border-color:rgba(216,162,74,.32); }

.call{ padding:22px 18px 18px; border-bottom:1px solid var(--line); }
.call__who{ display:flex; align-items:center; gap:13px; margin-bottom:20px; }
.call__who b{ display:block; color:var(--white); font-size:14.5px; }
.call__who em{ font:400 11px/1.6 var(--mono); font-style:normal; color:var(--muted); letter-spacing:.06em; }
.pulse{ width:10px; height:10px; border-radius:50%; background:var(--gold); flex:none; position:relative; }
.pulse::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid var(--gold); animation:ping 1.8s ease-out infinite;
}
@keyframes ping{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(1.5); opacity:0; } }

.wave{ display:flex; align-items:center; gap:4px; height:46px; margin-bottom:20px; }
.wave s{
  flex:1; text-decoration:none; border-radius:2px; background:var(--gold);
  opacity:.55; height:22%; animation:vu 1.1s ease-in-out infinite alternate;
}
.wave s:nth-child(3n){ animation-duration:.85s; }
.wave s:nth-child(4n){ animation-duration:1.4s; }
.wave s:nth-child(2n){ animation-delay:-.35s; opacity:.32; }
.wave s:nth-child(5n){ animation-delay:-.7s; }
@keyframes vu{ from{ height:14%; } to{ height:100%; } }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:7px 13px;
  transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.chips span.on{ color:#0A0A0C; background:linear-gradient(100deg,var(--gold-lt),var(--gold)); border-color:transparent; }

.chips--big{ gap:10px; }
.chips--big span{
  font-size:12px; padding:11px 18px; color:var(--silver);
  background:rgba(201,205,214,.03); cursor:default;
}
.chips--big span:hover{ border-color:var(--gold); color:var(--gold-lt); }
.chips--big span.hot{ border-color:rgba(201,150,43,.38); color:var(--gold-lt); background:rgba(201,150,43,.06); }

/* ---------- steps ---------- */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .steps{ grid-template-columns:minmax(0,1fr); } }
.step{ background:var(--panel); padding:32px 26px 34px; position:relative; transition:background .35s ease; }
.step:hover{ background:var(--panel-2); }
.step__n{
  display:block; font-family:var(--disp); font-variation-settings:"wdth" 116;
  font-weight:800; font-size:40px; line-height:1; margin-bottom:20px;
  background:linear-gradient(160deg,var(--gold-lt),var(--gold-dp));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.step h3{
  font-family:var(--disp); font-variation-settings:"wdth" 106; font-weight:700;
  font-size:19px; color:var(--white); margin:0 0 11px;
}
.step p{ margin:0; font-size:14.5px; color:var(--muted); }

/* ---------- cta / form ---------- */
.cta{ background:
    radial-gradient(90% 120% at 12% 0%, rgba(201,150,43,.10), transparent 58%),
    var(--ink-2);
  border-top:1px solid var(--line);
}
.cta__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(34px,6vw,86px); align-items:start; }
@media (max-width:900px){ .cta__in{ grid-template-columns:minmax(0,1fr); } }
.cta__copy .lede{ margin-bottom:28px; }

.form{
  display:flex; flex-direction:column; gap:16px;
  background:var(--panel); border:1px solid var(--line-2); border-radius:16px;
  padding:clamp(24px,3vw,34px);
  box-shadow:0 40px 90px -60px rgba(0,0,0,.9);
}
.f2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
@media (max-width:520px){ .f2{ grid-template-columns:minmax(0,1fr); } }
.form label{
  display:flex; flex-direction:column; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.form input,.form select,.form textarea{
  width:100%; background:var(--ink); border:1px solid var(--line);
  border-radius:9px; padding:13px 14px;
  font-family:var(--body); font-size:15px; letter-spacing:normal;
  text-transform:none; color:var(--white);
  transition:border-color .25s ease, background .25s ease;
}
.form textarea{ resize:vertical; min-height:96px; }
.form input::placeholder,.form textarea::placeholder{ color:rgba(138,143,154,.6); }
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none; border-color:var(--gold); background:#0A0A0E;
}
.form select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.form__note{
  margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--muted); text-align:center;
}
.form__note.ok{ color:var(--gold-lt); }
.form__note.err{ color:#E08A7A; }

/* ---------- footer ---------- */
.foot{ background:var(--ink); border-top:1px solid var(--line); padding-top:clamp(56px,7vw,84px); }
.foot__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:44px; padding-bottom:52px; }
@media (max-width:820px){ .foot__in{ grid-template-columns:minmax(0,1fr); } }
.foot__tag{
  margin:16px 0 0; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.foot__nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.foot__nav h5{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin:0 0 16px; font-weight:500;
}
.foot__nav a{ display:block; font-size:14.5px; color:var(--muted); padding-block:5px; transition:color .22s ease; }
.foot__nav a:hover{ color:var(--white); }
.foot__base{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-block:22px 26px;
}
.foot__base p{ margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* ---------- motion ---------- */
.reveal{ opacity:0; transform:translateY(28px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms);
}
.load{ opacity:0; transform:translateY(20px); animation:rise .95s cubic-bezier(.2,.7,.2,1) var(--d,0ms) forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }

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

/* ============================================================
   Added: section hairline, cursor spotlight, pipeline meter,
   stack builder, and the industry-research block.
   ============================================================ */

/* ---------- section heading hairline draws in ---------- */
.sechead{ position:relative; padding-bottom:28px; }
.sechead::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:linear-gradient(90deg,var(--gold),rgba(201,150,43,0) 82%);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1) 220ms;
}
.sechead.is-in::after{ transform:scaleX(1); }

/* ---------- cursor spotlight on panels ---------- */
.card,.mini,.mod{ --mx:50%; --my:0%; }
.card::after,.mini::after,.mod::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(320px circle at var(--mx) var(--my), rgba(201,150,43,.12), transparent 68%);
  opacity:0; transition:opacity .45s ease;
}
.card:hover::after,.mini:hover::after,.mod:hover::after{ opacity:1; }
.mini,.mod{ position:relative; overflow:hidden; }
.card > *,.mini > *,.mod > *{ position:relative; z-index:1; }

/* ---------- pipeline progress meter ---------- */
.pipe__meter{ margin-top:26px; height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.pipe__meter span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--gold-dp),var(--gold),var(--gold-lt));
  transition:width .55s cubic-bezier(.3,.8,.3,1);
}
.pipe__pos{
  margin:12px 0 0; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; color:var(--muted);
}
.pipe__pos b{ color:var(--gold); font-weight:500; }
@media (max-width:900px){ .pipe__meter,.pipe__pos{ display:none; } }

/* ---------- stack builder ---------- */
.builder{
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr);
  gap:clamp(20px,3vw,34px); align-items:start;
}
@media (max-width:900px){ .builder{ grid-template-columns:minmax(0,1fr); } }

.builder__modules{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (max-width:600px){ .builder__modules{ grid-template-columns:minmax(0,1fr); } }

.mod{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:linear-gradient(180deg,var(--panel),var(--ink-2));
  border:1px solid var(--line); border-radius:var(--r);
  padding:22px 22px 20px 48px; color:var(--silver);
  transition:border-color .3s ease, transform .3s ease, background .3s ease;
}
.mod:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.mod b{
  display:block; font-family:var(--disp); font-variation-settings:"wdth" 106;
  font-weight:700; font-size:16.5px; color:var(--white); margin-bottom:6px;
}
.mod em{ font-style:normal; font-size:13.5px; color:var(--muted); line-height:1.5; display:block; }
.mod__tick{
  position:absolute; left:20px; top:25px; z-index:2;
  width:13px; height:13px; border:1px solid var(--line-2);
  transform:rotate(45deg); transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.mod.is-on{ border-color:rgba(201,150,43,.42); background:linear-gradient(180deg,rgba(201,150,43,.07),var(--ink-2)); }
.mod.is-on .mod__tick{
  background:linear-gradient(135deg,var(--gold-lt),var(--gold));
  border-color:transparent; box-shadow:0 0 14px var(--gold-glow);
}
.mod.is-on b{ color:var(--gold-lt); }

.builder__out{
  background:var(--panel); border:1px solid var(--line-2); border-radius:16px;
  padding:26px 24px 24px; position:sticky; top:110px;
  box-shadow:0 40px 90px -60px rgba(0,0,0,.9);
}
@media (max-width:900px){ .builder__out{ position:static; } }
.builder__eyebrow{
  margin:0 0 10px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.builder__count{
  margin:0 0 20px; display:flex; align-items:baseline; gap:9px;
  font-family:var(--disp); font-variation-settings:"wdth" 112; font-weight:800;
  font-size:46px; line-height:1; color:var(--white); font-variant-numeric:tabular-nums;
}
.builder__count em{
  font:400 11px/1 var(--mono); font-style:normal; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.builder__list{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:9px; min-height:24px; }
.builder__list li{
  position:relative; padding-left:22px; font-size:14px; color:var(--silver);
  animation:modin .4s cubic-bezier(.2,.7,.2,1) backwards;
}
.builder__list li::before{
  content:""; position:absolute; left:0; top:.5em; width:8px; height:8px;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold)); transform:rotate(45deg);
}
@keyframes modin{ from{ opacity:0; transform:translateX(-8px); } }
.builder__note{
  margin:0 0 20px; padding-top:16px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--muted); line-height:1.6;
}

/* ---------- 10,000 hours ---------- */
.hours{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(26px,4vw,60px); align-items:center;
  margin-top:clamp(34px,4vw,54px); padding:clamp(28px,3.4vw,44px);
  border:1px solid rgba(201,150,43,.24); border-radius:16px;
  background:
    radial-gradient(80% 130% at 8% 10%, rgba(201,150,43,.10), transparent 62%),
    linear-gradient(180deg,var(--panel),var(--ink-2));
}
@media (max-width:820px){ .hours{ grid-template-columns:minmax(0,1fr); } }
.hours__num{ display:flex; flex-direction:column; gap:10px; }
.hours__num .num{
  font-family:var(--disp); font-variation-settings:"wdth" 118; font-weight:800;
  font-size:clamp(46px,6.4vw,86px); line-height:.92; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,var(--gold-lt),var(--gold) 55%,var(--gold-dp));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hours__num em{
  font:500 11px/1.5 var(--mono); font-style:normal; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); max-width:22ch;
}
.hours__copy p{ margin:0 0 14px; font-size:15.5px; color:var(--muted); }
.hours__copy p:last-child{ margin-bottom:0; }

/* ---------- parallax / hero drift ---------- */
[data-parallax]{ will-change:transform; }

/* ============================================================
   Case studies page (template — not linked from the live site
   until it has real content in it)
   ============================================================ */

/* placeholder slots — obvious while empty, invisible once filled */
.slot{ color:var(--muted); }
.slot::before{
  content:""; display:inline-block; width:5px; height:5px; margin-right:8px;
  background:var(--gold); opacity:.55; transform:translateY(-2px) rotate(45deg);
}

.draftbar{
  border-bottom:1px solid rgba(201,150,43,.3);
  background:linear-gradient(90deg,rgba(201,150,43,.13),rgba(201,150,43,.03));
  padding:78px var(--gut) 14px;
}
.draftbar p{
  max-width:var(--wrap); margin-inline:auto; margin-block:0;
  font-family:var(--mono); font-size:11.5px; line-height:1.7; letter-spacing:.04em; color:var(--gold-lt);
}
.draftbar b{ color:var(--white); font-weight:500; }
.draftbar code{ font-size:11px; color:var(--gold); }

.nav.is-solid{ background:rgba(7,7,10,.92); backdrop-filter:blur(14px); border-bottom-color:var(--line); }
.nav__links > a.is-here{ color:var(--gold-lt); }
.nav__links > a.is-here::after{ right:0; }

/* ---------- page header ---------- */
.pagehead{ position:relative; padding:clamp(70px,9vw,120px) 0 clamp(44px,5vw,72px); overflow:hidden; }
.draftbar + main .pagehead{ padding-top:clamp(52px,6vw,84px); }
.pagehead__glow{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 90% at 12% 0%, rgba(201,150,43,.16), transparent 60%),
    radial-gradient(50% 70% at 92% 18%, rgba(201,205,214,.05), transparent 62%);
}
.pagehead__h1{
  font-family:var(--disp); font-variation-settings:"wdth" 114; font-weight:800;
  font-size:clamp(36px,6vw,78px); line-height:1; letter-spacing:-.03em;
  color:var(--white); margin:0 0 22px; text-wrap:balance;
}
.pagehead__sub{ font-size:clamp(16px,1.3vw,19px); color:var(--silver); max-width:58ch; margin:0; }

.sec--tight{ padding-block:clamp(64px,8vw,110px); }

/* ---------- results band ---------- */
.results{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  margin:0; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
@media (max-width:760px){ .results{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:440px){ .results{ grid-template-columns:minmax(0,1fr); } }
.results > div{ background:var(--panel); padding:24px 22px 20px; }
.results dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.results dd{
  margin:0 0 8px; font-family:var(--disp); font-variation-settings:"wdth" 114;
  font-weight:800; font-size:clamp(30px,3.4vw,44px); line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,var(--gold-lt),var(--gold) 60%,var(--gold-dp));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.results dd.slot::before{ display:none; }
.results span{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* ---------- case study ---------- */
.case{
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--ink-2));
  margin-bottom:22px; transition:border-color .35s ease;
}
.case:last-child{ margin-bottom:0; }
.case:hover{ border-color:var(--line-2); }
.case__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  padding:20px 26px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.24);
}
.case__n{
  font-family:var(--disp); font-variation-settings:"wdth" 116; font-weight:800;
  font-size:22px; line-height:1; margin-right:6px;
  background:linear-gradient(150deg,var(--gold-lt),var(--gold-dp));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.chip{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--silver); border:1px solid var(--line); border-radius:999px; padding:6px 12px;
  background:rgba(201,205,214,.04);
}
.case__body{ padding:clamp(24px,3vw,36px) clamp(22px,3vw,34px); }
.case__title{
  font-family:var(--disp); font-variation-settings:"wdth" 110; font-weight:800;
  font-size:clamp(21px,2.5vw,31px); line-height:1.12; letter-spacing:-.018em;
  color:var(--white); margin:0 0 28px; max-width:26ch; text-wrap:balance;
}
.case__title.slot{ color:var(--muted); }
.case__cols{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,40px); padding-bottom:28px; border-bottom:1px solid var(--line);
}
@media (max-width:820px){ .case__cols{ grid-template-columns:minmax(0,1fr); gap:24px; } }
.case__cols h4{
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin:0 0 12px;
}
.case__cols p{ margin:0; font-size:14.5px; color:var(--muted); }
.case__stats{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.case__stats li{ display:flex; align-items:baseline; gap:11px; }
.case__stats b{
  font-family:var(--disp); font-variation-settings:"wdth" 112; font-weight:800;
  font-size:26px; line-height:1; color:var(--gold-lt); font-variant-numeric:tabular-nums;
}
.case__stats b.slot::before{ display:none; }
.case__stats span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.case__stats span.slot::before{ display:none; }

.case__quote{ margin:26px 0 0; padding-left:22px; border-left:2px solid var(--gold); }
.case__quote p{
  margin:0 0 14px; font-size:clamp(16px,1.5vw,19px); line-height:1.55; color:var(--silver);
}
.case__quote cite{ font-style:normal; display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
.case__quote cite span{ font-weight:600; font-size:14px; color:var(--white); }
.case__quote cite span.slot{ color:var(--muted); }
.case__quote cite em{
  font-style:normal; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.case__quote cite em.slot::before{ display:none; }

/* ---------- solo CTA ---------- */
.cta__solo{ max-width:720px; }
.cta__solo .lede{ margin-bottom:30px; }
.cta__row{ display:flex; flex-wrap:wrap; gap:14px; }

/* ============================================================
   Second motion pass
   ============================================================ */

/* section headings wipe up as they arrive */
.sechead .h2{
  clip-path:inset(0 0 108% 0);
  transition:clip-path 1s cubic-bezier(.2,.75,.2,1) 80ms;
}
.sechead.is-in .h2{ clip-path:inset(0 0 -12% 0); }

/* light sweeps across the gold buttons on hover */
.btn--gold::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.45) 50%,transparent 68%);
  transform:translateX(-130%);
  transition:transform .75s cubic-bezier(.3,.7,.3,1);
}
.btn--gold:hover::after{ transform:translateX(130%); }

/* the brand nudges on hover */
.brand__logo{ transition:transform .4s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.brand:hover .brand__logo{ transform:scale(1.035); filter:drop-shadow(0 0 14px rgba(201,150,43,.35)); }

/* marquee rides the scroll on top of its own loop */
.marquee__shift{
  display:flex; align-items:center; gap:34px;
  transition:transform .75s cubic-bezier(.2,.7,.2,1);
}

/* the mock dashboard chart grows when the panel arrives, not on page load */
.ui__chart span{
  transform:scaleY(.04); opacity:0; transform-origin:bottom;
  animation:none;
}
.split.is-in .ui__chart span{
  animation:grow .95s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(var(--i,0) * 70ms + 260ms);
}
@keyframes grow{ from{ transform:scaleY(.04); opacity:0; } to{ transform:scaleY(1); opacity:1; } }

/* chips and tag pills arrive one after another.
   Only hooked to containers that actually receive .is-in — the pipeline stage
   pills are left alone, since only one stage is ever active and the rest would
   never be told to appear. */
.chips--big span,.tags li{
  opacity:0; transform:translateY(9px);
  transition:opacity .5s ease var(--cd,0ms), transform .5s cubic-bezier(.2,.7,.2,1) var(--cd,0ms),
             color .25s ease, border-color .25s ease, background .25s ease;
}
.chips--big.is-in span,.is-in .tags li{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .sechead .h2{ clip-path:none !important; }
  .ui__chart span{ transform:none !important; opacity:1 !important; }
  .chips--big span,.tags li{ opacity:1 !important; transform:none !important; }
  .marquee__shift{ transform:none !important; }
}