/* ============================================================
   Evogean — "Living Systems" · Obsidian & Blue
   Bricolage Grotesque / Hanken Grotesk / JetBrains Mono
   ============================================================ */
/* fonts are loaded via <link> in each page head (preconnect + stylesheet) */

:root{
  --bg:#05070c; --surface:#0b1326; --surface-2:#12213f; --raised:#16295c;
  --line:rgba(120,140,180,.14); --line-soft:rgba(120,140,180,.08);
  --primary:#2f6bf0; --primary-bright:#4e86ff; --primary-2:#6f9bff; --primary-soft:rgba(47,107,240,.12);
  --text:#eaf0f8; --text-2:#b9c3d6; --muted:#8591a8;
  --white:#fff;
  --maxw:1200px; --r:980px; --r-card:18px; --r-tile:16px;
  --shadow-card:0 12px 40px rgba(0,0,0,.45);
  --display:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,sans-serif;
  --body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--sp-12:48px;--sp-16:64px;--sp-24:96px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:84px}
body{font-family:var(--body);background:var(--bg);color:var(--text);line-height:1.6;font-size:18px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.03em;color:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--primary-2);font-weight:500}
.muted{color:var(--muted)}
.mark{color:var(--primary-2);position:relative;white-space:nowrap}
.mark::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--primary)}
:focus-visible{outline:2px solid var(--primary-bright);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--primary);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;font-weight:600}
.skip:focus{left:0}

/* reveal — only hidden when JS present; fires once (IO unobserves), 300ms, secondary content only */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
/* stagger for grid siblings, capped at 3 steps */
.js .reveal:nth-child(2){transition-delay:.08s}
.js .reveal:nth-child(n+3){transition-delay:.16s}

/* cross-document page transitions — progressive (Chromium 126+/Safari 18.2+; others navigate instantly) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* plot-grid background utility */
.plot{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(120% 90% at 60% 20%,#000 0%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 60% 20%,#000 0%,transparent 78%)}

/* ---------------- Buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:15px;white-space:nowrap;
  padding:13px 26px;border-radius:var(--r);cursor:pointer;border:1px solid transparent;background:var(--primary);color:#fff;
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.btn:hover{background:var(--primary-bright);transform:translateY(-2px);box-shadow:0 10px 30px rgba(47,107,240,.35)}
.btn:hover svg{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--primary);background:rgba(47,107,240,.06);box-shadow:none;color:#fff}
.btn.sm{padding:9px 16px;font-size:14px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* ---------------- Header ---------------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(5,7,12,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-soft);transition:background .3s var(--ease),border-color .3s var(--ease)}
header.site.scrolled{background:rgba(5,7,12,.94);border-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;color:#fff;display:inline-flex;align-items:center}
.brand-mark{width:28px;height:28px;border-radius:8px;display:block;margin-right:10px}
.brand span{color:var(--primary-2)}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-family:var(--body);font-size:15px;font-weight:500;color:var(--text-2);position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--primary);transition:width .3s var(--ease)}
.nav-links a:hover{color:#fff}.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:16px}
.lang{font-family:var(--mono);font-size:12.5px;color:var(--muted);display:flex;gap:4px;align-items:center}
.lang a{padding:8px 6px;border-radius:6px}
.lang a.active{color:#fff}
.lang a:not(.active):hover{color:var(--primary-2)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav-toggle span{width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------- Hero ---------------- */
.hero{position:relative;overflow:hidden;padding:96px 0 104px;
  background:radial-gradient(120% 120% at 78% 0%,#0a1430 0%,var(--bg) 60%)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center}
.hero .eyebrow{display:inline-block;margin-bottom:22px}
.hero h1{font-size:clamp(40px,6vw,68px);letter-spacing:-.035em;margin-bottom:0}
.hero .support{font-size:22px;color:var(--text-2);max-width:44ch;margin:22px 0 16px;line-height:1.5}
.hero .lead{font-size:15px;color:var(--muted);max-width:46ch;margin-bottom:32px}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* Constellation mesh */
.mesh{position:relative;aspect-ratio:1/.82;width:100%}
.mesh svg.links{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible}
.mesh .links path{fill:none;stroke:var(--primary);stroke-width:1.3;opacity:.4;stroke-dasharray:5 6}
.mesh .tile{position:absolute;width:64px;height:64px;background:#fff;border-radius:var(--r-tile);transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.45);z-index:2;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.mesh .tile:hover{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 16px 40px rgba(47,107,240,.4)}
.mesh .tile img{width:38px;height:38px;object-fit:contain}
.mesh .tile.wordmark{width:92px;height:56px}
.mesh .tile.wordmark img{width:68px;height:auto}
.mesh .hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  background:linear-gradient(160deg,var(--raised),#0a1428);border:1px solid var(--line);border-radius:14px;
  padding:16px 22px;font-family:var(--display);font-weight:700;font-size:20px;color:#fff;
  box-shadow:0 0 0 6px rgba(47,107,240,.12),0 14px 44px rgba(47,107,240,.35)}
.mesh .hub span{color:var(--primary-2)}
.mesh .hub{display:flex;align-items:center}
.mesh .hub img{width:26px;height:26px;border-radius:7px;margin-right:10px}

/* Hero entrance — "the mark draws itself". Pure CSS, once per load, settled ~1.1s.
   Defaults are the finished state: no-JS and reduced-motion render everything complete. */
.hub-mark{width:26px;height:26px;border-radius:7px;margin-right:10px;background:#131838;flex:none;padding:2px}
.hub-mark path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:54;stroke-dasharray:620;stroke-dashoffset:0}
.hub-mark .m1{stroke:#5866f9;animation:markDraw .7s var(--ease) both}
.hub-mark .m2{stroke:#fff;animation:markDraw .7s var(--ease) .15s both}
.hero-copy > *:nth-child(1){animation:heroRise .5s var(--ease) .35s both}
.hero-copy > *:nth-child(2){animation:heroRise .5s var(--ease) .45s both}
.hero-copy > *:nth-child(3){animation:heroRise .5s var(--ease) .55s both}
.mesh .tile{animation:meshIn .45s var(--ease) .5s both}
.mesh svg.links{animation:meshIn .5s var(--ease) .6s both}
@keyframes markDraw{from{stroke-dashoffset:620}to{stroke-dashoffset:0}}
@keyframes heroRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes meshIn{from{opacity:0}to{opacity:1}}

/* Large hero mark — mockup A at full size: draws on load, settles as a subtle backdrop
   bleeding off the right edge (same motif as the brand cards). Default = drawn. */
.hero-mark{position:absolute;right:-130px;top:50%;transform:translateY(-50%);width:min(580px,52vw);height:auto;z-index:0;pointer-events:none;overflow:visible}
.hero-mark path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:54;stroke-dasharray:620;stroke-dashoffset:0}
.hero-mark .hm1{stroke:#5866f9;opacity:.2;animation:markDraw 1.1s var(--ease) .1s both}
.hero-mark .hm2{stroke:#fff;opacity:.08;animation:markDraw 1.1s var(--ease) .3s both}
.page-hero .hero-mark{width:min(400px,40vw);right:-90px}
.page-hero .wrap{position:relative;z-index:1}
@media(max-width:860px){.hero-mark{display:none}}

/* ---------------- Section shells ---------------- */
section{position:relative}
.block{padding:118px 0}
.section-head{max-width:64ch;margin:0 auto 64px;text-align:center}
.section-head .eyebrow{display:block;margin-bottom:16px}
.section-head h2{font-size:clamp(32px,4.6vw,52px)}
.section-head p{font-size:20px;color:var(--text-2);margin-top:16px;line-height:1.55}
.tag{font-family:var(--mono);font-size:12px;color:var(--primary-2);letter-spacing:.05em}

/* Credentials + tech logos */
.creds{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--surface);padding:22px 0}
.creds .certs{display:flex;flex-wrap:wrap;gap:10px 12px;justify-content:center;margin-bottom:18px}
.cert{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:100px;padding:8px 15px;
  font-family:var(--mono);font-size:12.5px;color:var(--text-2)}
.cert b{color:#fff;font-weight:500}
.cert svg{width:14px;height:14px;stroke:var(--primary-2);fill:none;stroke-width:2}
.cert-label{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);opacity:.7;padding-left:6px}
/* static logo grid (replaces marquee — auto-playing motion >5s fails WCAG 2.2.2) */
.logo-grid{display:flex;flex-wrap:wrap;gap:12px 16px;justify-content:center;padding:4px 0}
.logo-grid .mq{width:86px;height:46px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.logo-grid .mq img{width:28px;height:28px;object-fit:contain}
.logo-grid .mq.wm img{width:58px;height:auto}

/* Outcomes */
.outcomes-grid{display:grid;grid-template-columns:repeat(5,1fr)}
#outcomes.block{padding:84px 0}
.outcome{padding:34px 22px;border-left:1px solid var(--line-soft)}
.outcome:first-child{border-left:none}
.outcome .oi{width:46px;height:46px;border-radius:10px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.outcome .oi svg{width:22px;height:22px;stroke:var(--primary-2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.outcome h3{font-size:20px;margin:0 0 8px}
.outcome p{font-size:16px;color:var(--muted);line-height:1.55}

/* Flagship / AI gap */
.flagship .inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.flagship .badge{display:inline-block;font-family:var(--mono);font-size:12px;color:var(--primary-2);
  border:1px solid var(--line);border-radius:100px;padding:6px 13px;margin-bottom:18px}
.flagship h2{font-size:clamp(28px,4vw,42px)}
.flagship p{color:var(--text-2);font-size:19px;margin-top:16px;line-height:1.55}
.flagship ul{list-style:none;margin-top:24px;display:grid;gap:14px}
.flagship li{position:relative;padding-left:32px;font-size:18px;color:var(--text)}
.flagship li svg{position:absolute;left:0;top:3px;width:20px;height:20px;stroke:var(--primary-2);fill:none;stroke-width:2.4}
.gapcard{background:linear-gradient(165deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:var(--r-card);padding:36px;position:relative;overflow:hidden;box-shadow:var(--shadow-card)}
.gapcard .plot{opacity:.5}
.gapcard .big{font-family:var(--display);font-weight:700;font-size:62px;line-height:1;color:#fff}
.gapcard .big .u{color:var(--primary-2)}
.gapcard .lbl{color:var(--text-2);font-size:15px;margin-top:8px;max-width:32ch}
.gapcard .gauge{height:8px;border-radius:100px;background:rgba(255,255,255,.08);margin:14px 0 4px;overflow:hidden}
/* gauge fill animates via scaleX (compositor) instead of width (layout) */
.gapcard .gauge i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--primary),var(--primary-2));transform-origin:left center}
.js .gapcard .gauge i{transform:scaleX(0)}
.js .gapcard .gauge i.fill{transform:scaleX(1);transition:transform 1.2s var(--ease)}
.gapcard hr{border:none;border-top:1px solid var(--line);margin:24px 0}
.gapcard .cmp-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;color:var(--text-2);margin:16px 0 6px}
.gapcard .cmp-row .v{font-family:var(--display);font-weight:700;color:#fff;font-size:23px;letter-spacing:-.02em}
.gapcard .gauge i.alt{background:linear-gradient(90deg,#2a3a5f,#5570a8)}

/* Showcase — product mockups (chat assistant + ops dashboard) */
.showcase-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch}
.mock{background:linear-gradient(170deg,var(--surface-2),var(--surface) 55%);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-card);display:flex;flex-direction:column}
.mock-bar{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid var(--line-soft);background:rgba(5,7,12,.35)}
.mock-bar .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}
.mock-bar .dot:first-child{background:rgba(255,120,110,.55)}
.mock-bar .dot:nth-child(2){background:rgba(255,200,90,.5)}
.mock-bar .dot:nth-child(3){background:rgba(110,220,150,.5)}
.mock-title{font-family:var(--mono);font-size:12px;color:var(--muted);margin-left:8px}
.chat-body{padding:22px;display:grid;gap:12px;flex:1}
.msg{max-width:85%;padding:12px 16px;font-size:14.5px;line-height:1.5;border-radius:16px}
.msg.user{justify-self:end;background:var(--primary);color:#fff;border-bottom-right-radius:4px}
.msg.bot{justify-self:start;background:rgba(255,255,255,.05);border:1px solid var(--line-soft);color:var(--text-2);border-bottom-left-radius:4px}
.msg.bot b{color:#fff}
.msg .src{display:block;font-family:var(--mono);font-size:10.5px;color:var(--primary-2);margin-top:8px;letter-spacing:.04em}
.chat-input{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 22px 22px;padding:12px 18px;
  border:1px solid var(--line);border-radius:100px;color:var(--muted);font-size:14px;background:rgba(5,7,12,.4)}
.chat-input svg{width:16px;height:16px;stroke:var(--primary-2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dash-body{padding:22px;display:grid;gap:18px;flex:1}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{background:rgba(255,255,255,.04);border:1px solid var(--line-soft);border-radius:12px;padding:14px 12px}
.kpi .kv{display:block;font-family:var(--display);font-weight:700;font-size:22px;color:#fff}
.kpi .kl{display:block;font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.3}
.bars{display:flex;align-items:flex-end;gap:8px;height:88px;padding:6px 2px;border-bottom:1px solid var(--line-soft)}
.bars i{flex:1;height:var(--h);background:linear-gradient(180deg,var(--primary-2),var(--primary));border-radius:4px 4px 0 0;opacity:.85}
.feed{display:grid;gap:9px}
.feedline{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;color:var(--text-2)}
.feedline i{width:7px;height:7px;border-radius:50%;background:#5fd68a;flex:none;box-shadow:0 0 8px rgba(95,214,138,.6)}
.feedline span{margin-left:auto;color:var(--muted)}
.mock-note{text-align:center;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:22px}
@media(max-width:980px){.showcase-grid{grid-template-columns:1fr}}

/* Proof band (before→after) */
.proof{background:var(--surface)}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.proofcard{border:1px solid var(--line);border-radius:var(--r-card);padding:26px;background:var(--bg);position:relative;overflow:hidden;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.proofcard:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:var(--shadow-card)}
.proofcard .ba{font-family:var(--mono);font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;margin-bottom:12px}
.proofcard .ba .to{color:var(--primary-2)}
.proofcard .after{font-family:var(--display);font-weight:700;font-size:26px;color:#fff;line-height:1.1}
.proofcard .after .from{color:var(--muted);font-weight:500;font-size:15px}
.proofcard p{font-size:16px;color:var(--text-2);margin-top:10px;line-height:1.5}

/* Use-case cards (Problems we solve) — placeholder-ready */
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.casecard{border:1px solid var(--line);border-radius:var(--r-card);padding:28px;background:var(--surface);position:relative;overflow:hidden;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.casecard:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:var(--shadow-card)}
.casecard .stat{font-family:var(--display);font-weight:700;font-size:34px;color:var(--primary-2);line-height:1}
.casecard h3{font-size:19px;margin:12px 0 8px}
.casecard p{font-size:16.5px;color:var(--muted);line-height:1.55}
.casecard .quote{font-family:var(--body);font-style:italic;color:var(--text-2);font-size:14px;margin-top:14px;
  padding-left:12px;border-left:2px solid var(--primary)}

/* Services overview */
.svc-groups{display:grid;gap:40px}
.svc-group h3.gh{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--primary-2);margin-bottom:16px;font-weight:500}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc{border:1px solid var(--line);border-radius:var(--r-card);padding:26px;background:var(--surface);
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.svc:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:var(--shadow-card)}
.svc-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.svc h4{font-size:19px;margin-bottom:8px}
.svc p{font-size:16.5px;color:var(--muted);line-height:1.5}
.svc .eg{font-size:13px;color:var(--text-2);margin-top:10px}
/* full-width audience tile (homepage services grid) */
.svc.wide{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 44px;
  background:linear-gradient(165deg,var(--surface-2),var(--surface));border-color:rgba(47,107,240,.32)}
.svc.wide h4{margin:0;font-size:21px;flex:0 1 24ch}
.svc.wide p{margin:0;flex:1;min-width:280px;max-width:72ch}
/* services page — detailed cards */
.svc.detail{padding:28px;display:flex;flex-direction:column}
.svc.detail .prob{font-size:16.5px;color:var(--text-2);line-height:1.55;margin-bottom:12px}
.svc.detail .out{font-size:16px;color:var(--text);margin:12px 0;padding-left:26px;position:relative}
.svc.detail .out svg{position:absolute;left:0;top:2px;width:18px;height:18px;stroke:var(--primary-2);fill:none;stroke-width:2.4}
.svc.detail .plat{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:16px}
.svc.detail .plat span{font-family:var(--mono);font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:4px 10px}
.assess{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:36px 40px;display:flex;gap:28px;align-items:center;flex-wrap:wrap;position:relative;overflow:hidden}
.assess .txt{flex:1;min-width:260px}
.assess h3{font-size:26px;margin-bottom:8px}
.assess p{color:var(--text-2);font-size:16.5px;line-height:1.55}
.assess .front{font-family:var(--mono);font-size:11px;color:var(--primary-2);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.page-hero{padding:96px 0 28px;position:relative;overflow:hidden;text-align:center}
.page-hero h1{font-size:clamp(36px,5.4vw,64px);letter-spacing:-.035em;max-width:24ch;margin:0 auto}
.page-hero .eyebrow{display:inline-block;margin-bottom:18px}
.page-hero p{font-size:19px;color:var(--text-2);max-width:56ch;margin:18px auto 0;line-height:1.55}

/* about */
.prose{max-width:64ch;margin:0 auto;text-align:left}
.prose h2{font-size:clamp(26px,3.4vw,36px);margin:0 0 14px;text-align:center}
.prose p{font-size:18px;color:var(--text-2);line-height:1.65;margin-bottom:16px}
.prose p strong{color:var(--text)}
.about-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.pcard{border:1px solid var(--line);border-radius:var(--r-card);padding:28px;background:var(--surface)}
.pcard .n{font-family:var(--mono);font-size:12px;color:var(--primary-2)}
.pcard h3{font-size:18px;margin:10px 0 8px}
.pcard p{font-size:16px;color:var(--muted);line-height:1.55}
.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 32px;margin-top:8px;list-style:none}
.principles li{position:relative;padding-left:30px;font-size:15.5px;color:var(--text-2);line-height:1.5}
.principles li svg{position:absolute;left:0;top:3px;width:18px;height:18px;stroke:var(--primary-2);fill:none;stroke-width:2.4}
.principles li b{color:var(--text)}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.contact-info h3{font-size:20px;margin-bottom:10px}
.contact-info p{color:var(--text-2);font-size:16.5px;line-height:1.6;margin-bottom:18px}
.contact-info .row{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.contact-info .row svg{width:20px;height:20px;stroke:var(--primary-2);fill:none;stroke-width:2;flex-shrink:0;margin-top:2px}
.contact-info .row b{color:#fff;font-weight:600;display:block;font-family:var(--display)}
.contact-info .row a{color:var(--primary-2)}
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:32px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--text-2);margin-bottom:6px;font-weight:500}
.field input,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  color:var(--text);font-family:var(--body);font-size:15px;padding:12px 14px;transition:border-color .2s var(--ease)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(47,107,240,.18)}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form .note{font-size:12.5px;color:var(--muted);margin-top:12px;text-align:center}
@media(max-width:980px){.about-cols{grid-template-columns:1fr}.principles{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr;gap:32px}}

/* Method */
.method{background:var(--surface)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;position:relative}
.steps .line{position:absolute;top:23px;left:6%;right:6%;height:2px;background:linear-gradient(90deg,var(--primary),var(--primary-2));transform:scaleX(0);transform-origin:left}
.js .steps.drawn .line{transform:scaleX(1);transition:transform 1.4s var(--ease)}
.step .n{width:48px;height:48px;border-radius:12px;background:var(--primary);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;color:#fff;font-size:19px;margin-bottom:16px;position:relative;z-index:1;box-shadow:0 8px 24px rgba(47,107,240,.4)}
.step h3{font-size:19px;margin-bottom:8px}
.step p{font-size:16px;color:var(--muted)}

/* Tech wall */
.techwall{border-top:1px solid var(--line-soft)}
.techwall .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;margin-top:12px}
.twtile{background:#fff;border-radius:var(--r-tile);height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px 6px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.twtile:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.twtile img{width:32px;height:32px;object-fit:contain}
.twtile.wordmark img{width:66px;height:auto}
.twname{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.01em;color:#3f4a5a;text-align:center;line-height:1.15}
.twtile.nologo .twname{font-size:12px;font-weight:600;color:#0f172a}

/* CTA */
.cta{text-align:center;padding:130px 0;background:radial-gradient(120% 120% at 50% 0%,#0a1430,var(--bg) 65%)}
.cta .wrap{position:relative;z-index:1}
.cta h2{font-size:clamp(32px,4.8vw,54px);max-width:22ch;margin:16px auto 18px}
.cta p{font-size:19px;color:var(--text-2);max-width:52ch;margin:0 auto 30px}
.cta .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Footer */
footer.site{background:#03040a;border-top:1px solid var(--line);padding:56px 0 40px}
footer.site .top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;align-items:center;
  border-bottom:1px solid var(--line-soft);padding-bottom:26px;margin-bottom:24px}
footer.site nav a{color:var(--text-2);margin-left:24px;font-size:14.5px}
footer.site nav a:hover{color:#fff}
footer.site .fine{font-family:var(--mono);font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---------------- Responsive ---------------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .flagship .inner{grid-template-columns:1fr;gap:34px}
  .outcomes-grid{grid-template-columns:repeat(2,1fr)}
  .outcome{border-left:none;border-top:1px solid var(--line-soft)}
  .outcome:first-child,.outcome:nth-child(2){border-top:none}
  .outcome:last-child{grid-column:span 2}
  .proof-grid,.cases-grid,.svc-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}.steps .line{display:none}
  .techwall .grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:720px){
  .block{padding:72px 0}
  .nav-links{position:fixed;inset:72px 0 auto 0;flex-direction:column;gap:0;background:#05070c;
    border-bottom:1px solid var(--line);padding:8px 0;transform:translateY(-12px);opacity:0;
    pointer-events:none;transition:transform .3s var(--ease),opacity .3s var(--ease)}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:15px 28px;width:100%}.nav-links a::after{display:none}
  .nav-toggle{display:flex}
  .proof-grid,.cases-grid,.svc-grid,.outcomes-grid,.steps{grid-template-columns:1fr}
  .outcome{border-top:1px solid var(--line-soft)}.outcome:nth-child(2){border-top:1px solid var(--line-soft)}
  .outcome:last-child{grid-column:auto}
  .techwall .grid{grid-template-columns:repeat(3,1fr)}
  .mesh{max-width:420px;margin:0 auto}
  .svc-grid.cols-2{grid-template-columns:1fr}
}
@media(max-width:560px){
  .hero .mark{white-space:normal}
  .hero .mark::after{display:none}
}
@media(max-width:480px){
  .lang{display:none}
  .nav-right{gap:10px}
  .btn.sm{padding:8px 14px;font-size:13px}
  .brand{font-size:20px}
}