/* --- 1 · TYPE POLISH --- */
h1,h2{text-wrap:balance}
h1{font-size:clamp(38px,5.4vw,64px);letter-spacing:-0.03em}
h2{font-size:clamp(30px,4.2vw,48px);letter-spacing:-0.028em}
h3,h4{letter-spacing:-0.02em}
.sub{font-size:clamp(15px,1.15vw,17px);line-height:1.68;max-width:68ch;text-wrap:pretty}
.sec-head .sub{max-width:66ch}
.hero-kicker,.cta-band .cta-kicker{letter-spacing:-0.015em;line-height:1.45;text-wrap:pretty}
.vs .vt,.mena h4,.af h4,.case h3,.bridge-inner p,.gate-col h3,.founder-copy h2{text-wrap:balance}
.case .c-sub,.mena p,.af p,.founder-copy p{text-wrap:pretty}
.founder-copy p{max-width:68ch}
.stat .sv,.founder-stat .fsn,.bot-wrap td,.bot-wrap th{font-variant-numeric:tabular-nums}
.founder-stat .fsn{font-family:var(--f);font-weight:800;letter-spacing:-0.03em}
.founder-stat .fsl{letter-spacing:.01em;margin-top:8px;line-height:1.45}
a:hover{color:var(--orange)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* --- 2 · SPACING ON THE 8PX GRID --- */
.section{padding:96px 0}
@media (max-width:700px){.section{padding:56px 0}}
.eyebrow{margin-bottom:16px}
.sec-head{margin-bottom:56px}
.sec-head h2{margin-bottom:16px}
.three-cards{gap:16px;margin-top:48px}
.tcard{padding:32px 24px;gap:16px}
.tcard ul{gap:8px}
.cases{gap:24px}
.case .c-body{padding:32px}
.case .ck,.case h3{margin-bottom:16px}
.case .c-sub{margin-bottom:24px}
.case .c-list{gap:8px;margin-bottom:24px}
.case .c-li{padding:12px 16px;gap:16px}
.case .c-foot{padding-top:16px}
.mena-grid{gap:24px}
.mena{padding:32px 24px}
.mena h4{margin-bottom:8px}
.vs{padding:40px 32px}
.vs .vk{margin-bottom:16px}
.legend{gap:16px;margin-top:32px}
.lg{padding:24px}
.bot-wrap th,.bot-wrap td{padding:20px 24px}
.antiframe{gap:16px;margin-top:56px}
.af{padding:32px 24px}
.gate-sec,.founder-sec{padding:112px 0}
.gate-grid{gap:24px}
.gate-col{padding:40px 32px}
.gate-col ul.flist li{padding:12px 0 !important}
.founder-grid{gap:56px}
.founder-copy h2{margin-bottom:24px}
.founder-copy p{margin-bottom:16px}
.founder-stats{gap:16px;margin-top:32px;padding-top:32px}
.founder-sig{gap:8px;margin-top:32px}
.founder-sig a{padding:10px 16px}
.bridge{padding:64px 0 8px}
.bridge-inner .bmk{margin-bottom:24px}
.cta-band{padding:112px 0}
.cta-band .sub{margin-bottom:40px}
.hero-cta{gap:16px}
.hero .sub{margin-bottom:40px}
.foot{padding:64px 0 40px}
.foot-in{gap:40px 32px}
@media (min-width:981px){.foot-in{grid-template-columns:2fr repeat(4,1fr)}}
@media (max-width:980px) and (min-width:761px){.foot-in{grid-template-columns:repeat(3,1fr)}}
.foot-end{margin-top:48px;gap:16px}
@media (max-width:860px){.founder-grid{gap:32px}}

/* --- 3 · HERO: STAGED ENTRANCE, SLOWER GLOW, SIGNAL GRID --- */
.hero{padding-bottom:80px}
.hero::before{width:640px;height:640px;background:radial-gradient(circle,rgba(255,107,53,.09),transparent 70%);animation:heroGlow 26s ease-in-out infinite}
@keyframes heroGlow{0%,100%{transform:translate(0,0) scale(1);opacity:.9}50%{transform:translate(-32px,32px) scale(1.08);opacity:.62}}
.hero::after{
  opacity:.03;mix-blend-mode:normal;background-size:auto;
  background-image:
    repeating-linear-gradient(to right,rgba(255,255,255,.9) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.55) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(to right,var(--orange) 0 2px,transparent 2px 256px);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 75%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 75%);
}
.hero .reveal{transition-delay:calc(var(--i,0) * 90ms)}
.claude-badge{margin-bottom:48px}
.stats{position:relative;padding-top:40px}
.stats::before,.founder-stats::before,.foot-end::before{content:"";position:absolute;top:-1px;inset-inline-start:0;width:40px;height:2px;background:var(--orange)}
.founder-stats,.foot-end{position:relative}
.stat .sv{margin-bottom:8px;letter-spacing:-0.03em}

/* --- 4 · COUNT-UP STABILITY --- */
.cu-run{display:inline-block}

/* --- 6 · ONE HOVER GRAMMAR --- */
.tcard,.case,.mena,.af,.vs,.gate-col,.lg,.excg > div{position:relative;transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease)}
.tcard::after,.case::after,.mena::after,.af::after,.vs::after,.gate-col::after,.lg::after,.excg > div::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity var(--t) var(--ease);box-shadow:0 22px 50px -18px rgba(0,0,0,.85)}
.mena::after{box-shadow:0 16px 40px rgba(0,0,0,.10)}
.tcard:hover,.case:hover,.mena:hover,.af:hover,.vs:hover,.gate-col:hover,.lg:hover,.excg > div:hover,
.tcard:focus-within,.case:focus-within,.mena:focus-within,.af:focus-within,.vs:focus-within,.gate-col:focus-within,.lg:focus-within{transform:translateY(-4px)}
.tcard:hover::after,.case:hover::after,.mena:hover::after,.af:hover::after,.vs:hover::after,.gate-col:hover::after,.lg:hover::after,.excg > div:hover::after,
.tcard:focus-within::after,.case:focus-within::after,.mena:focus-within::after,.af:focus-within::after,.vs:focus-within::after,.gate-col:focus-within::after,.lg:focus-within::after{opacity:1}
.mena:hover{box-shadow:none}
.vs::before{transition:width var(--t) var(--ease)}
.vs:hover::before{width:72px}
.btn,.tbtn,.nav-cta,.founder-sig a,.nav-links a,.foot-col a{transition:transform var(--t) var(--ease),filter var(--t) var(--ease),background-color var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease)}
.btn-outline:hover,.btn-outline-dark:hover,.tcard .tbtn:hover{transform:translateY(-2px)}
.founder-sig a:hover{background:#141414;transform:translateY(-2px)}
.btn .arr{transition:transform var(--t) var(--ease)}

/* --- 9 · STICKY NAV --- */
.nav{background:#000}
.nav-inner{transition:padding var(--t) var(--ease)}
.nav.shrunk{background:rgba(0,0,0,.94)}
.nav.shrunk .nav-inner{padding:12px 0}
.np{position:absolute;top:0;inset-inline:0;height:2px;pointer-events:none;z-index:2}
.np i{display:block;height:2px;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left center;will-change:transform}
.nav-links a{position:relative;padding-block:6px}
.nav-links a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left center;transition:transform var(--t) var(--ease)}
.nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-lang{font-size:14px;font-weight:600;color:#fff}

/* --- 10 · CTA SHEEN --- */
.btn-primary,.nav-cta{position:relative;overflow:hidden}
.btn-primary::after,.nav-cta::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:-60%;width:40%;opacity:0;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent)}
.btn-primary:hover::after,.nav-cta:hover::after,.btn-primary:focus-visible::after{animation:sheen 620ms var(--ease) 1 forwards}
@keyframes sheen{0%{opacity:.9;transform:translateX(0)}100%{opacity:0;transform:translateX(420%)}}

/* --- 11 · SECTION BOUNDARIES --- */
.sec-head.reveal .eyebrow::before,.eyebrow.reveal::before{position:static;left:auto;width:24px;height:2px;opacity:1;background:currentColor}
.eyebrow::before{transform:scaleX(0);transform-origin:left center;transition:transform .7s var(--ease) .12s}
.reveal .eyebrow::before,.reveal.shown .eyebrow::before,.eyebrow.reveal.shown::before,.sec-head.reveal.shown .eyebrow::before{width:24px}
.shown .eyebrow::before,.eyebrow.shown::before,.no-reveal .eyebrow::before{transform:scaleX(1)}
@media (max-width:860px){.sec-head.reveal.shown .eyebrow::before,.eyebrow.reveal.shown::before{display:inline-block}}

/* --- 5 · DIAGRAM CHOREOGRAPHY --- */
.diagram{padding:32px 40px}
.diagram .node{opacity:0;transform:translate(-50%,-50%) scale(.96);
  transition:opacity .55s var(--ease),transform .55s var(--ease),border-color var(--t) var(--ease);
  transition-delay:calc(var(--i,0) * 120ms)}
.diagram.lit .node{opacity:1;transform:translate(-50%,-50%) scale(1)}
.diagram.lit .node:hover{transform:translate(-50%,-50%) scale(1.04)}
.diagram .node.center{animation:none}
.diagram .node.center::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:0 18px 52px -16px rgba(255,107,53,.7),0 0 0 12px rgba(255,107,53,.07);
  opacity:0;animation:pulseHalo 4.6s ease-in-out infinite}
@keyframes pulseHalo{0%,100%{opacity:0}50%{opacity:1}}
.diagram .paths path{transition:stroke-dashoffset .9s var(--ease)}
@media (max-width:880px){
  .diagram .node,.diagram.lit .node,.diagram.lit .node:hover{transform:none}
  .diagram.lit .node{opacity:1}
}

/* --- 7 · REVEAL WITH CHILD STAGGER --- */
.reveal{transition:opacity .65s var(--ease),transform .65s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.excg > div{opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.excg.shown > div,.excg.on > div{opacity:1;transform:none}

/* --- 8 · PRICING MOMENT --- */
.bot-wrap{position:relative}
.bot-wrap tbody tr{opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.bot-wrap.shown tbody tr,.bot-wrap.on tbody tr{opacity:1;transform:none}
.bot-wrap tbody tr.money td{background:rgba(255,107,53,.05)}
.bot-wrap tbody tr.money td:first-child{position:relative}
.bot-wrap tbody tr.money td:first-child::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--orange)}
.bot-wrap.swept tbody tr.money td{animation:rowSweep 1200ms var(--ease) 1 both}
@keyframes rowSweep{0%{background-color:rgba(255,107,53,.05)}22%{background-color:rgba(255,107,53,.22)}100%{background-color:rgba(255,107,53,.05)}}

/* --- 12 · FOOTER --- */
.foot-col a{position:relative;display:inline-block;padding:6px 0}
.foot-col a::after{content:"";position:absolute;inset-inline:0;bottom:4px;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left center;transition:transform var(--t) var(--ease)}
.foot-col a:hover::after,.foot-col a:focus-visible::after{transform:scaleX(1)}

/* ================= ELEVATION PASS II · craft + presence · visual only ================= */

/* --- EDITORIAL TYPE SCALE --- */
h1{font-size:clamp(42px,5.9vw,76px);line-height:1.03;letter-spacing:-0.035em}
h2{font-size:clamp(32px,4.4vw,54px);line-height:1.06;letter-spacing:-0.03em}
h3{letter-spacing:-0.025em}
.hero h1{max-width:21ch;margin-bottom:28px}
.hero-kicker{font-size:clamp(17px,1.5vw,20px);color:var(--cyan-soft)}
.eyebrow{font-size:12px;letter-spacing:.16em}
.stat .sv{font-size:clamp(30px,2.6vw,38px)}
.stat .sk{font-size:11px;letter-spacing:.14em}
.bridge-inner p{font-size:clamp(21px,2.3vw,30px);line-height:1.28;letter-spacing:-0.025em}
.vs .vt,.tcard h3{font-size:21px;letter-spacing:-0.025em}
.case h3{font-size:clamp(24px,2.1vw,28px)}
.bot-wrap thead th{font-size:10.5px;letter-spacing:.16em}
.bot-wrap td:first-child,.bot-wrap th:first-child{letter-spacing:.13em}
.btn,.tcard .tbtn,.nav-cta{letter-spacing:.09em;font-size:13px}
.nav-links{font-size:13.5px;letter-spacing:.01em}
.foot-col .fh{letter-spacing:.16em}
.foot-end{letter-spacing:.12em}

/* --- HAIRLINE CRAFT: layered 1px borders + inset highlight instead of soft shadows --- */
.tcard,.case,.af,.gate-col,.lg,.excg > div,.bot-wrap{border:1px solid rgba(255,255,255,.07)}
.tcard,.case,.af,.gate-col,.excg > div{background-image:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 38%)}
.tcard::before,.case::before,.gate-col::before,.excg > div::before{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.tcard{box-shadow:none}
.case{box-shadow:0 1px 0 rgba(255,255,255,.05)}
.bot-wrap{box-shadow:0 1px 0 rgba(255,255,255,.05)}
.tcard:hover,.case:hover,.af:hover,.gate-col:hover,.lg:hover,.excg > div:hover{border-color:rgba(255,255,255,.16)}
.vs:hover,.vs:focus-within{background:#050505}
.mena:hover{border-color:#d1d5db}

/* --- ENGINEERED TEXTURE ON THE DEEP GROUND (2%) --- */
.section.deep,.gate-sec,.founder-sec{position:relative;isolation:isolate}
.section.deep::before,.gate-sec::before,.founder-sec::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.02;
  background-image:
    repeating-linear-gradient(to right,#fff 0 1px,transparent 1px 80px),
    repeating-linear-gradient(to bottom,#fff 0 1px,transparent 1px 80px)}

/* --- SECTION CHAPTER RULES --- */
.section.dark + .section.dark{border-top:1px solid rgba(255,255,255,.05)}
.section.deep,.cta-band{border-top:1px solid rgba(255,255,255,.06)}
.cta-band{border-top:4px solid var(--orange)}
.sec-head{position:relative}

/* --- HEADING WIPE REVEAL (clip-path, no layout, no DOM change) --- */
.reveal h1,.reveal h2{clip-path:inset(-0.28em 0 100% 0);
  transition:clip-path .95s var(--ease),opacity .65s var(--ease),transform .65s var(--ease);transition-delay:calc(var(--i,0) * 70ms + 60ms)}
.reveal.shown h1,.reveal.shown h2,.reveal.on h1,.reveal.on h2,
.reveal.shown h1,.reveal.shown h2,.reveal.on h1,.reveal.on h2{clip-path:inset(-0.28em 0 -0.34em 0)}

/* --- STATS: FINER DIVIDERS, TABULAR PRESENCE --- */
.stats{border-top-color:rgba(255,255,255,.12)}
.stat{border-right-color:rgba(255,255,255,.09)}

/* --- BUTTONS: SHARPER, BRACKETED ARROW --- */
.btn{padding:16px 26px}
.btn-primary{box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}
.btn-primary:hover{filter:none;background:#ff7d4d}
.btn-outline{border-color:rgba(255,255,255,.5)}
.btn-outline:hover{border-color:#fff}
.tcard .tbtn{border-width:1px;border-color:rgba(255,255,255,.32);padding:12px 18px}
.tcard .tbtn:hover{border-color:#fff}
.nav-cta{padding:13px 22px}

/* --- TABLE REFINEMENT --- */
.bot-wrap th,.bot-wrap td{border-bottom-color:rgba(255,255,255,.08)}
.bot-wrap thead th{border-bottom:1px solid rgba(255,107,53,.35)}
.bot-wrap tbody tr{position:relative}
.bot-wrap tbody tr td{transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
.bot-wrap tbody tr:hover td{background-color:rgba(255,255,255,.028)}
.bot-wrap tbody tr:hover td:first-child{color:var(--cyan-soft)}

/* --- BRIDGES AS PULL QUOTES --- */
.bridge-inner .bmk{width:56px;height:2px}
.bridge-inner p{max-width:26ch;margin-inline:auto}

/* --- DIAGRAM PRESENCE --- */
.diagram{max-width:100%;min-height:min(760px,64vw);border-top-width:2px;background-image:linear-gradient(180deg,rgba(255,255,255,.03),transparent 30%)}
@media (max-width:1120px) and (min-width:881px){
  .diagram{aspect-ratio:auto;min-height:0;display:flex;flex-direction:column;gap:12px;padding:24px 20px}
  .diagram svg.paths,.diagram svg.grid{display:none}
  .diagram .node,.diagram.lit .node,.diagram.lit .node:hover{position:relative;transform:none;left:auto !important;top:auto !important;width:100%;max-width:none;margin:0}
  .diagram .node.center{order:-1}
  .diagram .tip{display:none}
}
.diagram .node{border-color:rgba(255,255,255,.10);background:#0b1220}
.diagram .node::before{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.diagram.lit .node:hover{border-color:var(--nc,var(--orange))}
.diagram .node .nt{letter-spacing:-0.02em}
.diagram .paths path{animation:signalDrift 14s linear infinite}
@keyframes signalDrift{to{stroke-dashoffset:-40}}
.diagram .node.center{background:var(--orange);background-image:none}
.diagram .node.center::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.32)}

/* --- FOUNDER BLOCK --- */
.founder-photo{border-color:rgba(255,255,255,.1)}
.founder-stat .fsn{font-size:clamp(24px,2.2vw,30px)}
.founder-sig a{border-color:rgba(255,255,255,.14)}

/* --- FOOTER PRESENCE --- */
.foot-col .fh{padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:12px;width:100%}
.foot-brand p{color:#d4d4d4}

/* --- BULLETS: CSS SQUARES (the old glyph bullets depend on a font we no longer load) --- */
.tcard li{padding-left:20px}
.tcard li::before,.tip li::before{content:"" !important;font-family:var(--f) !important;
  width:6px;height:6px;background:var(--orange);top:8px;left:0}
.tip li::before{background:var(--nc,var(--orange));top:10px}
.tip li{padding-left:16px}

/* --- BROKEN-ASSET RESILIENCE: never render a broken image --- */
.brand-mark{flex:none}
.brand-mark.void{display:none}
.brand{gap:10px}
.brand.marked .brand-mark{display:inline-flex}

/* --- BUTTON CONSISTENCY: every card CTA is one block, arrow pinned to the edge --- */
.tcard .tbtn{width:100%;justify-content:space-between;align-items:center;padding:12px 16px;min-height:76px;line-height:1.2;box-sizing:border-box}
.tcard .tbtn .i{margin-inline-start:12px}
.tcard .tbtn:hover .i,.tcard .tbtn:focus-visible .i{transform:translateX(4px)}
.tcard .tbtn .i{transition:transform var(--t) var(--ease)}
.tcard{display:flex;flex-direction:column}
.tcard ul{margin-bottom:24px}
.btn{min-height:52px;box-sizing:border-box}
.founder-sig a{min-height:44px;box-sizing:border-box}
svg.i{width:1em;height:1em}
.tcard .tbtn svg.i{width:14px;height:14px}

/* --- REVEAL SAFETY: hidden starting states exist only when JS confirmed it can animate --- */
html:not(.js-reveal) .reveal,
html:not(.js-reveal) .excg > div{opacity:1 !important;transform:none !important;clip-path:none !important}
html:not(.js-reveal) .reveal h1,html:not(.js-reveal) .reveal h2,
html:not(.js-reveal) h1.reveal,html:not(.js-reveal) h2.reveal{clip-path:none !important}
html:not(.js-reveal) .bot-wrap tbody tr{opacity:1 !important;transform:none !important}
html:not(.js-reveal) .diagram .node{opacity:1 !important}
html:not(.js-reveal) .eyebrow::before{transform:scaleX(1) !important}
/* If the document is not painting, transitions never advance: land on final values instantly. */
html.reveal-instant .reveal,html.reveal-instant .reveal h1,html.reveal-instant .reveal h2,
html.reveal-instant h1.reveal,html.reveal-instant h2.reveal,
html.reveal-instant .excg > div,html.reveal-instant .bot-wrap tbody tr,
html.reveal-instant .diagram .node,html.reveal-instant .eyebrow::before{transition:none !important}

/* --- FOCUS CRAFT --- */
a:focus-visible,button:focus-visible,.node:focus-visible{outline:2px solid var(--orange);outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  .reveal h1,.reveal h2,h1.reveal,h2.reveal{clip-path:none !important}
}

/* --- MOTION AND JS-OFF GATES --- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal,.excg > div{opacity:1 !important;transform:none !important}
  .bot-wrap tbody tr{opacity:1 !important;transform:none !important}
  .diagram .node{opacity:1 !important}
  .eyebrow::before{transform:scaleX(1) !important}
}