/* ============================================================
   One stylesheet. Every value is a token. Both themes, one system.
   ============================================================ */
:root{
  --blue:#0269D0; --blue-lift:#3B90E8; --violet:#7A3FD0; --pink:#F80A62; --pink-text:#D1004F;
  --navy:#061528;
  --ink:#071427; --ink-2:#2A3C55; --muted:#5B6C86;
  --ground:#F6F9FD; --surface:#FFFFFF; --surface-2:#EEF6FF;
  --line:rgba(2,105,208,.14); --line-strong:rgba(2,105,208,.26);
  --grad:linear-gradient(96deg,#0269D0 0%,#7A3FD0 52%,#F80A62 100%);
  --grad-soft:linear-gradient(150deg,rgba(2,105,208,.09),rgba(248,10,98,.07));
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --band:clamp(64px,7.5vw,124px);
  --wrap-max:1860px; --wrap-w:min(90%,var(--wrap-max));
  --r-sm:10px; --r-md:18px; --r-lg:26px; --r-pill:999px;
  --e1:0 1px 2px rgba(6,21,40,.05), 0 2px 6px rgba(6,21,40,.04);
  --e2:0 6px 18px rgba(6,21,40,.07), 0 2px 6px rgba(6,21,40,.04);
  --e3:0 26px 60px rgba(6,21,40,.13), 0 8px 20px rgba(6,21,40,.06);
  --glow:0 0 0 1px rgba(2,105,208,.18), 0 22px 50px rgba(2,105,208,.16);
  --t-fast:130ms; --t-base:260ms; --t-slow:620ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ok:#0F7A4E;
  --logo-op:.62;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --blue:#4DA3F0; --blue-lift:#7CC0FF; --violet:#A374F0; --pink:#FF3D7F; --pink-text:#FF6E9C;
    --ink:#E8F0FA; --ink-2:#B9C9DD; --muted:#93A6BF;
    --ground:#050F1E; --surface:#0C1B30; --surface-2:#122641;
    --line:rgba(148,190,240,.16); --line-strong:rgba(148,190,240,.30);
    --grad-soft:linear-gradient(150deg,rgba(77,163,240,.12),rgba(255,61,127,.09));
    --e1:0 1px 2px rgba(0,0,0,.45);
    --e2:0 6px 18px rgba(0,0,0,.5);
    --e3:0 26px 60px rgba(0,0,0,.6);
    --glow:0 0 0 1px rgba(124,192,255,.22), 0 22px 50px rgba(2,105,208,.28);
    --ok:#4ED9A0;
    --logo-op:.76;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --blue:#4DA3F0; --blue-lift:#7CC0FF; --violet:#A374F0; --pink:#FF3D7F; --pink-text:#FF6E9C;
  --ink:#E8F0FA; --ink-2:#B9C9DD; --muted:#93A6BF;
  --ground:#050F1E; --surface:#0C1B30; --surface-2:#122641;
  --line:rgba(148,190,240,.16); --line-strong:rgba(148,190,240,.30);
  --grad-soft:linear-gradient(150deg,rgba(77,163,240,.12),rgba(255,61,127,.09));
  --e1:0 1px 2px rgba(0,0,0,.45);
  --e2:0 6px 18px rgba(0,0,0,.5);
  --e3:0 26px 60px rgba(0,0,0,.6);
  --glow:0 0 0 1px rgba(124,192,255,.22), 0 22px 50px rgba(2,105,208,.28);
  --ok:#4ED9A0;
  --logo-op:.76;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,h4{margin:0; letter-spacing:-.025em; text-wrap:balance}
p{margin:0}
a{color:var(--blue); text-underline-offset:3px}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:6px}

.wrap{width:var(--wrap-w); margin-inline:auto}
.band{padding:var(--band) 0; position:relative}
.band--surface{background:var(--surface)}

/* type */
.display{font-size:clamp(2.6rem,5.6vw,4.5rem); font-weight:900; line-height:1.0; letter-spacing:-.035em}
.h2{font-size:clamp(2rem,3.4vw,2.95rem); font-weight:800; line-height:1.08}
.h4{font-size:1.1875rem; font-weight:700; line-height:1.35; letter-spacing:-.015em}
.lead{font-size:clamp(1.1rem,1.35vw,1.28rem); line-height:1.62; color:var(--ink-2)}
.small{font-size:.9375rem; color:var(--muted); line-height:1.6}
.cap{font-size:.8125rem; color:var(--muted); letter-spacing:.03em}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--blue);
  background:var(--surface-2); padding:7px 14px; border-radius:var(--r-pill);
  border:1px solid var(--line)}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--grad); flex:none}
.eyebrow--pink{color:var(--pink-text); background:rgba(248,10,98,.08)}
.head{max-width:800px; margin-inline:auto; text-align:center}
.head .h2{margin:var(--s5) 0 var(--s4)}
.head>p{color:var(--muted); font-size:1.06rem}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:10px; font:inherit; font-size:15px;
  font-weight:700; line-height:1; padding:16px 26px; border-radius:var(--r-pill);
  border:1px solid transparent; cursor:pointer; text-decoration:none; position:relative;
  transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out),
             background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
             border-color var(--t-fast) var(--ease-out)}
.btn svg{transition:transform var(--t-fast) var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:var(--grad); color:#fff; box-shadow:0 10px 26px rgba(2,105,208,.32)}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(2,105,208,.42)}
.btn--primary:active{transform:none}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--blue); color:var(--blue); background:var(--surface-2)}
.btn--onDark{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.22)}
.btn--sm{padding:12px 20px; font-size:14px}
.btn--onDark:hover{background:rgba(255,255,255,.16); transform:translateY(-2px)}
.link{font-weight:700; font-size:14.5px; text-decoration:none; display:inline-flex; gap:7px; align-items:center; color:var(--blue)}
.link svg{transition:transform var(--t-fast) var(--ease-out)}
.link:hover svg{transform:translateX(4px)}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--s4)}
.centre-row{display:flex; justify-content:center; margin-top:var(--s8)}

/* nav */
/* the header stays dark in both themes */
.nav{position:sticky; top:0; z-index:60; background:rgba(7,23,43,.92);
  backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.08)}
.nav .wrap{display:flex; align-items:center; gap:var(--s5); min-height:72px}
.brand{font-weight:900; font-size:21px; letter-spacing:-.04em; color:#fff; text-decoration:none}
.brand span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.nav ul{display:flex; align-items:center; gap:18px; margin-left:auto; flex-wrap:wrap}
.nav ul a{color:#B7CBE2; text-decoration:none; font-size:14.5px; font-weight:600; transition:color var(--t-fast)}
.nav ul a.btn{color:#fff; font-size:14px}
.nav-cta{margin-left:var(--s2)}
.nav ul a:hover{color:#fff}
.theme-switch{display:inline-flex; gap:2px; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16); border-radius:var(--r-pill); padding:3px}
.theme-switch button{font:inherit; font-size:12px; font-weight:700; padding:7px 12px;
  border:0; border-radius:var(--r-pill); background:transparent; color:#B7CBE2; cursor:pointer;
  transition:background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out)}
.theme-switch button[aria-pressed="true"]{background:#fff; color:var(--navy)}

/* ---------- hero ---------- */
.hero{background:var(--navy); color:#fff; position:relative; overflow:hidden;
  padding:clamp(64px,7vw,110px) 0 0}
.aurora{position:absolute; inset:-20% -10% auto -10%; height:150%; pointer-events:none;
  background:
    radial-gradient(720px 420px at 10% 2%,rgba(2,105,208,.62),transparent 62%),
    radial-gradient(560px 380px at 78% -8%,rgba(122,63,208,.44),transparent 60%),
    radial-gradient(620px 400px at 98% 42%,rgba(248,10,98,.30),transparent 62%)}
.mesh{position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(900px 500px at 30% 20%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(900px 500px at 30% 20%,#000,transparent 72%)}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr;
  gap:var(--s9); align-items:center; padding-bottom:var(--s9)}
.hero .eyebrow{background:rgba(255,255,255,.09); color:#A8D0F7; border-color:rgba(255,255,255,.18)}
.hero h1{margin:var(--s5) 0 var(--s5)}
.hero .lead{color:#B4C7DD; max-width:54ch}
.hero .btn-row{margin-top:var(--s7)}
@media (max-width:940px){.hero .wrap{grid-template-columns:1fr; gap:var(--s8)}}

/* dashboard panel */
.panel{position:relative; background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.16); border-radius:var(--r-lg); padding:var(--s6);
  box-shadow:0 40px 90px rgba(0,0,0,.42); backdrop-filter:blur(10px)}
.panel-top{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s5)}
.panel-top b{font-size:19px; font-weight:800; letter-spacing:-.02em}
.panel-top small{display:block; font-size:12px; color:#9CC8F5; font-weight:500; margin-top:2px}
.tag-ok{font-size:12px; font-weight:800; color:#5FE3AE; background:rgba(78,217,160,.13);
  border:1px solid rgba(78,217,160,.25); border-radius:var(--r-pill); padding:7px 13px; white-space:nowrap}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
.kpi{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-sm); padding:var(--s4) var(--s4) var(--s3)}
.kpi span{display:block; font-size:11px; color:#93A6BF; margin-bottom:5px; letter-spacing:.03em}
.kpi b{font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.kpi i{display:block; font-style:normal; font-size:11px; color:#5FE3AE; margin-top:3px; font-weight:700}
.panel-charts{display:grid; grid-template-columns:1.55fr 1fr; gap:var(--s3); margin-top:var(--s3)}
@media (max-width:520px){.panel-charts{grid-template-columns:1fr}}
.chartbox{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-sm); padding:var(--s4)}
.chartbox h5{margin:0; font-size:13px; font-weight:700}
.chartbox small{display:block; font-size:11px; color:#93A6BF; margin-bottom:var(--s3)}
.chartbox svg{display:block; width:100%; height:auto}
.legend{display:grid; gap:7px; margin-top:var(--s3)}
.legend div{display:flex; align-items:center; gap:8px; font-size:11.5px; color:#B4C7DD}
.legend i{width:9px; height:9px; border-radius:3px; flex:none}
.legend b{margin-left:auto; font-variant-numeric:tabular-nums; color:#fff; font-size:11.5px}
.float-badge{position:absolute; left:-26px; bottom:34px; background:var(--grad); color:#fff;
  border-radius:var(--r-md); padding:14px 18px; box-shadow:0 20px 44px rgba(248,10,98,.36);
  display:flex; align-items:center; gap:11px}
.float-badge b{display:block; font-size:17px; font-weight:900; line-height:1}
.float-badge span{display:block; font-size:11px; opacity:.9; margin-top:3px}
@media (max-width:940px){.float-badge{left:auto; right:16px; bottom:-22px}}

/* proof */
.proof{position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03)}
.proof .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--s5); padding:var(--s7) 0}
.proof div{position:relative; padding-left:var(--s5)}
.proof div::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px;
  background:var(--grad); border-radius:2px; opacity:.85}
.proof b{display:block; font-size:clamp(1.9rem,2.7vw,2.5rem); font-weight:900; line-height:1;
  letter-spacing:-.04em; background:linear-gradient(120deg,#fff,#9CC8F5);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.proof span{display:block; font-size:13px; color:#93A6BF; margin-top:7px}

/* trust */
.trust{background:var(--surface); border-bottom:1px solid var(--line); padding:var(--s8) 0}
.trust p{text-align:center; font-size:11.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
.logos{display:flex; flex-wrap:wrap; gap:var(--s6); justify-content:center; align-items:center; margin-top:var(--s6)}
.logos i{width:126px; height:42px; border-radius:var(--r-sm); background:var(--grad-soft);
  border:1px dashed var(--line-strong); display:grid; place-items:center; font-style:normal;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

/* generic cards */
.grid{display:grid; gap:var(--s5)}
.g-3{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--s6); box-shadow:var(--e1); overflow:hidden;
  transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease-out)}
.card::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:var(--grad-soft); opacity:0; transition:opacity var(--t-base) var(--ease-out)}
.card:hover{transform:translateY(-5px); box-shadow:var(--e3); border-color:var(--line-strong)}
.card:hover::after{opacity:1}
.card>*{position:relative; z-index:1}
.card p{color:var(--muted); font-size:15.5px; margin-top:var(--s3)}
.card .link{margin-top:var(--s5)}
.ic{width:52px; height:52px; border-radius:14px; background:var(--grad); color:#fff;
  display:grid; place-items:center; margin-bottom:var(--s5); box-shadow:0 10px 22px rgba(2,105,208,.28)}
.ic svg{width:24px; height:24px}

/* bento services */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s5); margin-top:var(--s8)}
.bento>*:nth-child(1){grid-column:span 4}
.bento>*:nth-child(2){grid-column:span 2}
.bento>*:nth-child(3){grid-column:span 3}
.bento>*:nth-child(4){grid-column:span 3}
@media (max-width:900px){.bento{grid-template-columns:1fr} .bento>*{grid-column:span 1 !important}}
.card--feature{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s6); align-items:center}
@media (max-width:1080px){.card--feature{grid-template-columns:1fr}}
.mock{border-radius:14px; background:linear-gradient(150deg,var(--surface-2),transparent);
  border:1px solid var(--line); padding:var(--s4); display:grid; gap:9px}
.mock i{display:block; height:9px; border-radius:5px; background:var(--line-strong); opacity:.7}
.mock i:nth-child(1){width:42%; background:var(--grad); opacity:1; height:11px}
.mock i:nth-child(3){width:78%}
.mock i:nth-child(4){width:58%}
.mock .btnish{height:30px; width:120px; border-radius:var(--r-pill); background:var(--grad); margin-top:6px}

/* case studies */
.case{padding:0; display:flex; flex-direction:column}
.case-media{aspect-ratio:16/10; position:relative; overflow:hidden;
  background:linear-gradient(140deg,var(--blue),var(--violet) 55%,var(--pink));
  display:grid; place-items:center}
.case-media::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:34px 34px}
.browser{position:relative; width:74%; border-radius:10px; background:rgba(6,21,40,.5);
  border:1px solid rgba(255,255,255,.22); overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,.3);
  transition:transform var(--t-base) var(--ease-out)}
.card:hover .browser{transform:scale(1.04) translateY(-3px)}
.browser .bar{display:flex; gap:5px; padding:8px 10px; background:rgba(255,255,255,.1)}
.browser .bar i{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.45)}
.browser .body{padding:12px; display:grid; gap:7px}
.browser .body i{display:block; height:7px; border-radius:4px; background:rgba(255,255,255,.32)}
.browser .body i:nth-child(1){width:56%; background:rgba(255,255,255,.75); height:9px}
.browser .body i:nth-child(3){width:80%}
.browser .body i:nth-child(4){width:44%}
.case-media b{position:absolute; left:16px; bottom:14px; font-size:12px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(6,21,40,.5);
  padding:6px 12px; border-radius:var(--r-pill); backdrop-filter:blur(4px)}
.case-body{padding:var(--s6); display:flex; flex-direction:column; gap:var(--s3); flex:1}
.tags{display:flex; gap:var(--s2); flex-wrap:wrap}
.tags small{font-size:11.5px; font-weight:700; color:var(--blue); background:var(--surface-2);
  padding:5px 11px; border-radius:var(--r-pill); border:1px solid var(--line)}
.case-foot{margin-top:auto; padding-top:var(--s4); border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap}
.case-foot b{font-size:14px; color:var(--ok)}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:center; margin-top:var(--s7)}
.chip{font-size:14.5px; font-weight:600; background:var(--surface); border:1px solid var(--line);
  padding:11px 20px; border-radius:var(--r-pill); color:var(--ink-2);
  transition:border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
             transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out)}
.chip:hover{border-color:transparent; color:#fff; background:var(--grad);
  transform:translateY(-2px); box-shadow:0 10px 22px rgba(2,105,208,.28)}

/* process */
.steps{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s5); margin-top:var(--s8)}
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.steps--6{grid-template-columns:repeat(6,minmax(0,1fr))}
/* one continuous rail behind the nodes, trimmed to the first and last node */
.steps::before{content:""; position:absolute; top:26px; height:2px; z-index:0;
  left:calc(50% / var(--steps,4)); right:calc(50% / var(--steps,4));
  background:linear-gradient(90deg,var(--line),var(--line-strong) 18%,var(--line-strong) 82%,var(--line))}
.step{position:relative; z-index:1; text-align:center}
.step b{position:relative; display:grid; place-items:center; width:54px; height:54px;
  border-radius:50%; background:var(--grad); color:#fff; font-size:14px; font-weight:900;
  margin:0 auto var(--s5); box-shadow:0 12px 26px rgba(2,105,208,.32);
  border:4px solid var(--ground)}
.band--surface .step b{border-color:var(--surface)}
.step p{color:var(--muted); font-size:15px; margin-top:var(--s3)}
@media (max-width:1100px){
  .steps,.steps--3,.steps--5,.steps--6{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s7) var(--s5)}
  .steps::before{display:none}
  .steps--5>.step:last-child:nth-child(odd),.steps--3>.step:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:600px){
  .steps,.steps--3,.steps--5,.steps--6{grid-template-columns:1fr}
  .steps>.step:last-child{grid-column:auto}
}

/* testimonials */
.quotes{display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s5); margin-top:var(--s8)}
.quotes>*:nth-child(1),.quotes>*:nth-child(2){grid-column:span 3}
.quotes>*:nth-child(n+3){grid-column:span 2}
.quotes--4>*{grid-column:span 3 !important}
.quotes--3>*{grid-column:span 2 !important}
.quotes--2>*{grid-column:span 3 !important}
.quotes--1>*{grid-column:span 6 !important}
@media (max-width:980px){.quotes{grid-template-columns:1fr} .quotes>*{grid-column:span 1 !important}}
.quote{position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--s6); box-shadow:var(--e1);
  display:flex; flex-direction:column; gap:var(--s4); overflow:hidden;
  transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out)}
.quote:hover{transform:translateY(-4px); box-shadow:var(--e3)}
.quote::before{content:"\201C"; position:absolute; right:14px; top:-24px; font-size:130px;
  font-weight:900; line-height:1; color:var(--blue); opacity:.07}
.quote-top{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); position:relative}
.plat{display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; color:var(--muted)}
.plat i{width:28px; height:28px; border-radius:9px; background:var(--surface-2); color:var(--blue);
  display:grid; place-items:center; font-style:normal; font-size:12.5px; font-weight:900; flex:none;
  border:1px solid var(--line)}
.stars{color:#F5A524; font-size:14px; letter-spacing:2px}
.quote blockquote{margin:0; font-size:16.5px; line-height:1.6; position:relative}
.who{display:flex; align-items:center; gap:var(--s3); margin-top:auto; position:relative}
.avatar{width:42px; height:42px; border-radius:50%; background:var(--grad); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:15px; flex:none}
.who b{display:block; font-size:14.5px}
.who span{display:block; font-size:13px; color:var(--muted)}

/* team */
.person{text-align:center}
.portrait{width:104px; height:104px; border-radius:50%; margin:0 auto var(--s5); position:relative;
  background:var(--grad); display:grid; place-items:center; color:#fff; font-size:28px; font-weight:900;
  box-shadow:0 14px 30px rgba(2,105,208,.3)}
.portrait::after{content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1px dashed var(--line-strong)}
.person .cap{margin-bottom:var(--s1); display:block}
.person p{font-size:14.5px}

/* posts */
.post-media{aspect-ratio:16/9; border-radius:12px; margin-bottom:var(--s5); position:relative;
  overflow:hidden; background:linear-gradient(140deg,var(--blue),var(--violet) 60%,var(--pink));
  display:grid; place-items:center}
.post-media::before{content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px); background-size:16px 16px}
.post-media span{position:relative; font-size:11px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; background:rgba(6,21,40,.42); padding:7px 14px;
  border-radius:var(--r-pill); backdrop-filter:blur(4px)}
.meta{display:flex; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin-bottom:var(--s3)}

/* cta */
.cta{background:var(--navy); color:#fff; position:relative; overflow:hidden; border-radius:0}
.cta .wrap{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s8); flex-wrap:wrap}
.cta .eyebrow{background:rgba(255,255,255,.09); color:#A8D0F7; border-color:rgba(255,255,255,.18)}
.cta h2{margin:var(--s5) 0 var(--s3); max-width:17ch}
.cta p{color:#B4C7DD}

/* footer */
.foot{background:var(--navy); color:#B4C7DD; border-top:1px solid rgba(255,255,255,.08);
  padding:var(--s9) 0 var(--s6)}
.foot .wrap{display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:var(--s7)}
@media (max-width:860px){.foot .wrap{grid-template-columns:1fr 1fr}}
.foot h3{color:#fff; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; margin-bottom:var(--s5)}
.foot li{margin-bottom:var(--s3)}
.foot a{color:#B4C7DD; text-decoration:none; font-size:14.5px; transition:color var(--t-fast)}
.foot a:hover{color:#fff}
.foot .brand{margin-bottom:var(--s4); display:inline-block}
.copyright{margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid rgba(255,255,255,.08);
  text-align:center; font-size:13.5px; color:#7E93AE}

.notice{background:var(--surface-2); border-bottom:1px solid var(--line); padding:var(--s4) 0; font-size:14.5px}
.notice p{color:var(--muted)}
.notice b{color:var(--ink)}

/* scroll reveal */
.rv{opacity:0; transform:translateY(22px);
  transition:opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .rv{opacity:1 !important; transform:none !important}
  .card:hover,.quote:hover,.btn:hover,.chip:hover{transform:none}
}

/* ============================================================
   RESPONSIVE — three real layouts, not one layout squeezed.
   Desktop >1024 · Tablet 641–1024 · Phone <=640
   ============================================================ */

/* --- mobile navigation --- */
.nav-toggle{display:none; width:42px; height:42px; flex:none; padding:0; cursor:pointer;
  border-radius:12px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  color:#fff; place-items:center;
  transition:background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out)}
.nav-toggle:hover{background:rgba(255,255,255,.14)}
.bars{display:grid; gap:4px; width:18px}
.bars i{display:block; height:2px; border-radius:2px; background:currentColor;
  transition:transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-out)}
.nav.open .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.open .bars i:nth-child(2){opacity:0}
.nav.open .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.nav-sheet{display:contents}
.nav-extra,.nav-more,.nav-sheet .nd{display:none}

@media (max-width:1300px){
  /* backdrop-filter would make .nav the containing block for the fixed sheet */
  .nav{backdrop-filter:none; background:#07182C}
  .nav .wrap{gap:var(--s4); min-height:66px; flex-wrap:nowrap; position:relative}
  .nav-toggle{display:grid}
  .theme-switch{margin-left:auto}

  /* full-height sheet rather than a dropdown */
  .nav-sheet{display:flex; flex-direction:column; gap:var(--s6);
    position:fixed; left:0; right:0; top:calc(var(--probar) + var(--navh,66px)); bottom:0; z-index:59;
    padding:var(--s5) max(18px,5vw) calc(var(--s7) + env(safe-area-inset-bottom,0px));
    border-radius:22px 22px 0 0;
    background:radial-gradient(120% 70% at 100% 0%,rgba(122,63,208,.30),transparent 60%),
               radial-gradient(90% 60% at 0% 10%,rgba(2,105,208,.34),transparent 62%),
               #050F1E;
    overflow-y:auto; overscroll-behavior:contain;
    opacity:0; visibility:hidden; transform:translateY(-10px) scale(.99);
    transition:opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out),
               visibility 0s linear var(--t-base)}
  .nav.open .nav-sheet{opacity:1; visibility:visible; transform:none;
    transition:opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility 0s}

  .nav-sheet ul{display:grid; gap:0; counter-reset:nv; margin:0}
  .nav-sheet li{border-bottom:1px solid rgba(255,255,255,.07)}
  .nav-sheet li:last-child{border-bottom:0}
  .nav-sheet li a{position:relative; display:grid; grid-template-columns:26px 1fr 12px;
    align-items:center; column-gap:14px; padding:15px 14px 15px 10px; border-radius:14px;
    color:#EAF2FC; transition:background var(--t-fast) var(--ease-out)}
  .nav-sheet .nl{display:block; grid-column:2; grid-row:1; font-size:1.3125rem; font-weight:800;
    letter-spacing:-.02em; line-height:1.2}
  .nav-sheet .nd{display:block; grid-column:2; grid-row:2; font-size:12.5px; font-weight:500;
    color:#8AA4C4; margin-top:4px; line-height:1.35}
  .nav-sheet li a::before{counter-increment:nv; content:counter(nv,decimal-leading-zero);
    grid-column:1; grid-row:1/3; font-size:11px; font-weight:800; letter-spacing:.1em; color:#6E8CB0;
    align-self:start; padding-top:6px}
  .nav-sheet li a::after{content:""; grid-column:3; grid-row:1/3; width:9px; height:9px; justify-self:end;
    align-self:center; border-right:2px solid #6E8CB0; border-top:2px solid #6E8CB0; transform:rotate(45deg);
    transition:border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out)}
  .nav-sheet li a:hover{background:rgba(255,255,255,.05)}
  .nav-sheet li a:hover::after{border-color:var(--pink); transform:rotate(45deg) translate(2px,-2px)}
  .nav-sheet li a[aria-current]{background:linear-gradient(90deg,rgba(2,105,208,.28),rgba(248,10,98,.14) 70%,transparent)}
  .nav-sheet li a[aria-current]::before{color:#FF6E9C}
  .nav-sheet li a[aria-current] .nl{color:#fff}

  .nav-more{display:block}
  .nav-more-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:var(--s3)}
  .nav-more-grid a{display:block; padding:12px 14px; border-radius:12px; font-size:14px; font-weight:600;
    color:#C6D8EC; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
    transition:border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out)}
  .nav-more-grid a:hover{border-color:rgba(255,110,156,.5); color:#fff}

  .nav-sheet .nav-cta{border-bottom:0; margin-top:var(--s5)}
  .nav-sheet .nav-cta a.btn{display:flex; align-items:center; justify-content:center;
    padding:17px 22px; font-size:15.5px; border-radius:var(--r-pill)}
  .nav-sheet .nav-cta a.btn::before,.nav-sheet .nav-cta a.btn::after{content:none}

  .nav-extra{display:grid; gap:var(--s3); margin-top:auto;
    padding-top:var(--s5); border-top:1px solid rgba(255,255,255,.09)}
  .nav-extra-label{font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
    color:#6E8CB0; margin-bottom:2px}
  .nav-line{display:flex; align-items:center; gap:11px; color:#C6D8EC; text-decoration:none;
    font-size:15px; font-weight:600; padding:5px 0}
  .nav-line svg{color:var(--blue)}
  .nav-line:hover{color:#fff}
  .nav-extra .socials{margin-top:var(--s3)}
  .nav-extra .socials a{width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
    color:#B4C7DD; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12)}
  .nav-extra .socials a:hover{background:var(--grad); color:#fff; border-color:transparent}

  /* staggered entrance */
  .nav.open .nav-sheet li{animation:navin var(--t-base) var(--ease-out) both}
  .nav.open .nav-sheet li:nth-child(1){animation-delay:.02s}
  .nav.open .nav-sheet li:nth-child(2){animation-delay:.05s}
  .nav.open .nav-sheet li:nth-child(3){animation-delay:.08s}
  .nav.open .nav-sheet li:nth-child(4){animation-delay:.11s}
  .nav.open .nav-sheet li:nth-child(5){animation-delay:.14s}
  .nav.open .nav-sheet li:nth-child(6){animation-delay:.17s}
  .nav.open .nav-sheet li:nth-child(7){animation-delay:.20s}
  .nav.open .nav-sheet li:nth-child(8){animation-delay:.23s}
  .nav.open .nav-sheet li:nth-child(9){animation-delay:.26s}
  @keyframes navin{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .nav.open .nav-sheet li{animation:none}
}

/* --- problem / solution split --- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s9)}
@media (max-width:900px){.split{grid-template-columns:1fr; gap:var(--s8)}}
@media (max-width:640px){.split{gap:var(--s7)}}

/* --- tablet: every grid resolves to a full row, no orphans --- */
@media (min-width:641px) and (max-width:1024px){
  .hero .wrap{padding-bottom:var(--s8)}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento>*{grid-column:span 1 !important}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:repeat(2,1fr)}
  .quotes>*{grid-column:span 1 !important}
  .quotes>*:nth-child(5){grid-column:span 2 !important}
  /* a 3-card row becomes 2 + 1 wide feature rather than 2 + a hole */
  .g-3{grid-template-columns:repeat(2,1fr)}
  .g-3>*:nth-child(3):last-child{grid-column:span 2}
  .g-3>*:nth-child(3):last-child .case-media{aspect-ratio:auto; height:230px}
  .g-3>*:nth-child(3):last-child .browser{width:44%}
  .g-3>*:nth-child(3):last-child .post-media{aspect-ratio:auto; height:190px}
  .logos{gap:var(--s5)}
}

/* --- phone --- */
@media (max-width:640px){
  :root{--band:clamp(56px,10vw,78px)}
  .display{font-size:clamp(2.05rem,8.4vw,2.65rem); letter-spacing:-.03em}
  .h2{font-size:clamp(1.72rem,6.6vw,2.1rem)}
  .lead{font-size:1.0625rem}
  .head>p{font-size:1rem}
  .head .h2{margin:var(--s4) 0 var(--s3)}

  .hero{padding-top:var(--s7)}
  .hero .wrap{gap:var(--s7); padding-bottom:var(--s8)}
  .hero h1{margin:var(--s4) 0 var(--s4)}
  .hero .btn-row{margin-top:var(--s6)}
  .btn-row .btn{width:100%; justify-content:center}
  .mesh{background-size:40px 40px}

  .panel{padding:var(--s5) var(--s4); border-radius:var(--r-md)}
  .panel-top b{font-size:17px}
  .kpis{gap:var(--s2)}
  .kpi{padding:var(--s3) var(--s3) var(--s2)}
  .kpi span{font-size:10px; letter-spacing:0}
  .kpi b{font-size:18px}
  .kpi i{font-size:10px}
  .float-badge{right:10px; bottom:-24px; padding:12px 15px}

  .proof .wrap{grid-template-columns:1fr 1fr; gap:var(--s5) var(--s4); padding:var(--s6) 0}
  .proof div{padding-left:var(--s4)}
  .proof b{font-size:1.85rem}
  .proof span{font-size:12.5px}

  .trust{padding:var(--s7) 0}
  .logos{gap:var(--s4); margin-top:var(--s5)}
  .logos i{width:calc(50% - var(--s4)); max-width:154px}

  .card{padding:var(--s5)}
  .case-body{padding:var(--s5)}
  .ic{width:46px; height:46px; border-radius:12px; margin-bottom:var(--s4)}
  .band .grid,.bento,.quotes,.steps,.chips{margin-top:var(--s6) !important}
  .steps{gap:var(--s6)}
  .centre-row{margin-top:var(--s6)}
  .chip{font-size:13.5px; padding:10px 16px}
  .quote{padding:var(--s5)}
  .quote::before{font-size:104px; top:-18px}
  .quote blockquote{font-size:16px}

  .cta .wrap{gap:var(--s6)}
  .cta h2{max-width:none}

  .foot{padding:var(--s8) 0 var(--s5)}
  .foot .wrap{grid-template-columns:1fr; gap:var(--s6)}
  .foot h3{margin-bottom:var(--s4)}
  .copyright{margin-top:var(--s6)}
  .copyright a{white-space:nowrap}
  .notice{font-size:13.5px}
}

/* --- narrow phones --- */
@media (max-width:380px){
  .kpis{grid-template-columns:1fr 1fr}
  .kpis>*:nth-child(3){grid-column:span 2}
  .logos i{width:100%; max-width:none}
}
/* ============================================================
   Inner pages — shared components on top of the home system
   ============================================================ */

/* ---------- page hero ---------- */
.phero{background:var(--navy); color:#fff; position:relative; overflow:hidden;
  padding:clamp(48px,5vw,78px) 0 clamp(56px,6vw,86px)}
.phero .wrap{position:relative; z-index:2}
.phero .eyebrow{background:rgba(255,255,255,.09); color:#A8D0F7; border-color:rgba(255,255,255,.18)}
.phero h1{font-size:clamp(2.15rem,4.4vw,3.6rem); font-weight:900; line-height:1.04;
  letter-spacing:-.032em; margin:var(--s5) 0 var(--s4); max-width:19ch}
.phero .lead{color:#B4C7DD; max-width:66ch}
.phero .btn-row{margin-top:var(--s6)}
.phero--wide h1{max-width:24ch}

.crumbs{display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:12.5px; color:#8FA9C7; margin-bottom:var(--s5)}
.crumbs a{color:#8FA9C7; text-decoration:none; transition:color var(--t-fast)}
.crumbs a:hover{color:#fff}
.crumbs span[aria-current]{color:#fff}
.crumbs i{font-style:normal; opacity:.5}

/* facts strip under an inner hero */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s5);
  margin-top:var(--s7); padding-top:var(--s6); border-top:1px solid rgba(255,255,255,.12)}
.facts b{display:block; font-size:clamp(1.5rem,2.2vw,2rem); font-weight:900; letter-spacing:-.03em;
  line-height:1; background:linear-gradient(120deg,#fff,#9CC8F5);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.facts span{display:block; font-size:12.5px; color:#93A6BF; margin-top:7px}

/* ---------- two-column layout with sidebar ---------- */
.with-side{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(32px,4vw,56px);
  align-items:start}
.with-side--left{grid-template-columns:300px minmax(0,1fr)}
.side{position:sticky; top:92px; display:grid; gap:var(--s5)}
.side-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s5); box-shadow:var(--e1)}
.side-card h3{font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:var(--s4)}
.side-card--dark{background:var(--navy); border-color:transparent; color:#fff; position:relative; overflow:hidden}
.side-card--dark h3{color:#A8D0F7}
.side-card--dark p{color:#B4C7DD; font-size:14.5px}
.side-card--dark .btn{width:100%; justify-content:center; margin-top:var(--s4)}

.side-list{display:grid; gap:2px}
.side-list a{display:flex; align-items:center; justify-content:space-between; gap:10px;
  text-decoration:none; color:var(--ink-2); font-size:14.5px; font-weight:600;
  padding:9px 11px; border-radius:9px; transition:background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out)}
.side-list a:hover{background:var(--surface-2); color:var(--blue)}
.side-list a[aria-current]{background:var(--grad); color:#fff}
.side-list a[aria-current] em{color:rgba(255,255,255,.8)}
.side-list em{font-style:normal; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}

.side-search{display:flex; align-items:center; gap:9px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:11px 15px}
.side-search input{flex:1; min-width:0; border:0; background:transparent; font:inherit;
  font-size:14.5px; color:var(--ink); outline:none}
.side-search svg{flex:none; color:var(--muted)}

.side-post{display:flex; gap:12px; text-decoration:none; padding:10px 0; border-top:1px solid var(--line)}
.side-post:first-of-type{border-top:0; padding-top:0}
.side-post i{flex:none; width:56px; height:48px; border-radius:9px;
  background:linear-gradient(140deg,var(--blue),var(--violet) 60%,var(--pink))}
.side-post b{display:block; font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.35}
.side-post span{display:block; font-size:12px; color:var(--muted); margin-top:4px}
.side-post:hover b{color:var(--blue)}

.side-facts{display:grid; gap:0}
.side-facts div{display:flex; justify-content:space-between; gap:12px; padding:11px 0;
  border-top:1px solid var(--line); font-size:14px}
.side-facts div:first-child{border-top:0; padding-top:0}
.side-facts dt{color:var(--muted)}
.side-facts dd{margin:0; font-weight:700; text-align:right}

.tagcloud{display:flex; flex-wrap:wrap; gap:7px}
.tagcloud a{font-size:12.5px; font-weight:600; text-decoration:none; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:6px 12px; transition:border-color var(--t-fast), color var(--t-fast)}
.tagcloud a:hover{border-color:var(--blue); color:var(--blue)}

@media (max-width:980px){
  .with-side,.with-side--left{grid-template-columns:minmax(0,1fr)}
  .side{position:static; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); display:grid}
  .with-side--left .side{order:-1}
}
@media (max-width:640px){
  .side{grid-template-columns:1fr}
}

/* ---------- prose / article body ---------- */
.prose{max-width:76ch; min-width:0; font-size:1.0625rem; line-height:1.75; color:var(--ink-2)}
.prose>*+*{margin-top:var(--s5)}
.prose h2{font-size:clamp(1.5rem,2.4vw,2rem); font-weight:800; line-height:1.2; color:var(--ink);
  margin-top:var(--s8); letter-spacing:-.02em}
.prose h3{font-size:1.25rem; font-weight:700; color:var(--ink); margin-top:var(--s7)}
.prose ul,.prose ol{display:grid; gap:var(--s3); padding-left:0}
.prose ul li{position:relative; padding-left:28px}
.prose ul li::before{content:""; position:absolute; left:6px; top:11px; width:7px; height:7px;
  border-radius:50%; background:var(--grad)}
.prose ol{counter-reset:n; list-style:none}
.prose ol li{position:relative; padding-left:38px; counter-increment:n}
.prose ol li::before{content:counter(n); position:absolute; left:0; top:1px; width:26px; height:26px;
  border-radius:50%; background:var(--surface-2); color:var(--blue); border:1px solid var(--line);
  display:grid; place-items:center; font-size:12.5px; font-weight:800}
.prose blockquote{margin:0; padding:var(--s5) var(--s6); border-radius:var(--r-md);
  background:var(--surface-2); border-left:3px solid var(--blue); font-size:1.1rem; color:var(--ink)}
.prose figure{margin:0}
.prose figcaption{font-size:13px; color:var(--muted); margin-top:var(--s3)}
.prose strong{color:var(--ink)}
.prose a{font-weight:600}

.callout{display:flex; gap:var(--s4); padding:var(--s5); border-radius:var(--r-md);
  background:var(--grad-soft); border:1px solid var(--line)}
.callout svg{flex:none; color:var(--blue); margin-top:2px}
.callout b{display:block; color:var(--ink); margin-bottom:4px}
.callout p{font-size:15px; color:var(--muted)}

.figure-band{aspect-ratio:16/8; border-radius:var(--r-md); position:relative; overflow:hidden;
  background:linear-gradient(140deg,var(--blue),var(--violet) 55%,var(--pink)); display:grid; place-items:center}
.figure-band::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:34px 34px}
.figure-band span{position:relative; font-size:11px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; background:rgba(6,21,40,.42); padding:7px 14px;
  border-radius:var(--r-pill); backdrop-filter:blur(4px)}

/* article meta row */
.amet{display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; padding-bottom:var(--s5);
  border-bottom:1px solid var(--line); margin-bottom:var(--s6)}
.amet .avatar{width:44px; height:44px}
.amet b{font-size:14.5px; display:block}
.amet span{font-size:13px; color:var(--muted)}
.amet .sep{margin-left:auto; display:flex; gap:8px}
.share{width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
  display:grid; place-items:center; color:var(--muted); cursor:pointer;
  transition:border-color var(--t-fast), color var(--t-fast)}
.share:hover{border-color:var(--blue); color:var(--blue)}

/* ---------- accordion (FAQ) ---------- */
.acc{display:grid; gap:var(--s3)}
.acc details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--e1); overflow:hidden; transition:border-color var(--t-fast) var(--ease-out)}
.acc details[open]{border-color:var(--line-strong)}
.acc summary{list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:var(--s4);
  padding:var(--s5) var(--s6); font-size:1.0625rem; font-weight:700; color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:""; flex:none; margin-left:auto; width:12px; height:12px; margin-top:6px;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:rotate(45deg); transition:transform var(--t-base) var(--ease-out)}
.acc details[open] summary::after{transform:rotate(-135deg)}
.acc summary:hover{color:var(--blue)}
.acc .a{padding:0 var(--s6) var(--s5); color:var(--muted); font-size:15.5px; line-height:1.7}
.acc .a>*+*{margin-top:var(--s4)}
.acc-num{flex:none; width:26px; height:26px; border-radius:8px; background:var(--surface-2);
  color:var(--blue); font-size:12px; font-weight:800; display:grid; place-items:center; margin-top:2px}

/* ---------- forms ---------- */
.form{display:grid; gap:var(--s4)}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
@media (max-width:560px){.f2{grid-template-columns:1fr}}
.field{display:grid; gap:7px}
.field label{font-size:12.5px; font-weight:700; color:var(--ink-2); letter-spacing:.01em}
.field input,.field select,.field textarea{font:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:12px;
  padding:13px 15px; outline:none; width:100%;
  transition:border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out)}
.field textarea{min-height:132px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue); box-shadow:0 0 0 4px rgba(2,105,208,.14)}
.field small{font-size:12px; color:var(--muted)}
.consent{display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--muted)}
.consent input{width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--blue)}

/* contact detail tiles */
.ctiles{display:grid; gap:var(--s4)}
.ctile{display:flex; gap:var(--s4); align-items:flex-start; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s5); box-shadow:var(--e1)}
.ctile .ic{width:44px; height:44px; border-radius:12px; margin:0; flex:none}
.ctile .ic svg{width:20px; height:20px}
.ctile b{display:block; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:5px}
.ctile a,.ctile p{font-size:15.5px; font-weight:600; color:var(--ink); text-decoration:none}
.ctile a:hover{color:var(--blue)}

/* ---------- list toolbar + pagination ---------- */
.toolbar{display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  padding-bottom:var(--s5); border-bottom:1px solid var(--line); margin-bottom:var(--s6)}
.toolbar p{font-size:14px; color:var(--muted)}
.toolbar .seg2{margin-left:auto; display:flex; gap:6px}
.toolbar .seg2 button{font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-2);
  border-radius:var(--r-pill); padding:8px 15px; transition:all var(--t-fast) var(--ease-out)}
.toolbar .seg2 button[aria-pressed="true"]{background:var(--grad); color:#fff; border-color:transparent}

.pager{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:var(--s8)}
.pager a,.pager span{min-width:42px; height:42px; padding:0 12px; border-radius:12px;
  display:grid; place-items:center; font-size:14.5px; font-weight:700; text-decoration:none;
  color:var(--ink-2); background:var(--surface); border:1px solid var(--line);
  transition:all var(--t-fast) var(--ease-out)}
.pager a:hover{border-color:var(--blue); color:var(--blue)}
.pager [aria-current]{background:var(--grad); color:#fff; border-color:transparent}
.pager .gap{background:transparent; border:0}

/* ---------- misc blocks ---------- */
.split-media{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,4vw,64px); align-items:center}
@media (max-width:900px){.split-media{grid-template-columns:1fr}}
.checklist{display:grid; gap:var(--s3); margin-top:var(--s5)}
.checklist li{display:flex; gap:13px; align-items:flex-start; font-size:15.5px; color:var(--ink-2)}
.checklist svg{flex:none; margin-top:3px}

.stat-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--s5)}
.stat-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s5); box-shadow:var(--e1)}
.stat-card b{display:block; font-size:clamp(1.8rem,2.6vw,2.4rem); font-weight:900; line-height:1;
  letter-spacing:-.04em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat-card span{display:block; font-size:13.5px; color:var(--muted); margin-top:9px}

.timeline{display:grid; gap:0; margin-top:var(--s6)}
.timeline li{position:relative; padding:0 0 var(--s6) var(--s7); border-left:2px solid var(--line)}
.timeline li:last-child{border-left-color:transparent; padding-bottom:0}
.timeline li::before{content:""; position:absolute; left:-8px; top:2px; width:14px; height:14px;
  border-radius:50%; background:var(--grad); border:3px solid var(--surface)}
.band--surface .timeline li::before{border-color:var(--surface)}
.timeline b{display:block; font-size:1.0625rem; font-weight:700; color:var(--ink)}
.timeline span{display:block; font-size:12px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blue); margin-bottom:5px}
.timeline p{font-size:15px; color:var(--muted); margin-top:6px}

.jobs{display:grid; gap:var(--s4)}
.job{display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s5) var(--s6); box-shadow:var(--e1);
  transition:border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out),
             box-shadow var(--t-base) var(--ease-out)}
.job:hover{transform:translateY(-3px); box-shadow:var(--e2); border-color:var(--line-strong)}
.job h3{font-size:1.125rem; font-weight:700}
.job .meta{margin:6px 0 0}
.job .btn{margin-left:auto}
@media (max-width:640px){.job .btn{margin-left:0; width:100%; justify-content:center}}

.legal{max-width:78ch}
.legal-note{display:flex; gap:12px; align-items:center; font-size:13.5px; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s4) var(--s5); margin-bottom:var(--s7)}
.legal-note b{color:var(--ink)}

.toc-side{font-size:14px}
.toc-side a{display:block; padding:8px 12px; border-left:2px solid var(--line); color:var(--muted);
  text-decoration:none; transition:all var(--t-fast) var(--ease-out)}
.toc-side a:hover{border-left-color:var(--blue); color:var(--blue); background:var(--surface-2)}

/* ---------- comparison table ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface)}
table.cmp{width:100%; border-collapse:collapse; font-size:15px; min-width:520px}
table.cmp th,table.cmp td{padding:14px 18px; text-align:left; border-top:1px solid var(--line); vertical-align:top}
table.cmp thead th{border-top:0; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); background:var(--surface-2)}
table.cmp tbody th{font-weight:700; color:var(--ink); width:26%}
table.cmp td{color:var(--ink-2)}
table.cmp tbody tr:hover td,table.cmp tbody tr:hover th{background:var(--surface-2)}

.authorcard{display:flex; gap:var(--s5); align-items:flex-start; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s6); margin-top:var(--s8)}
.authorcard .portrait{width:64px; height:64px; font-size:20px; margin:0; flex:none}
.authorcard b{display:block; font-size:1.0625rem}
.authorcard span{display:block; font-size:13px; color:var(--muted); margin-top:3px}
.authorcard p{font-size:14.5px; color:var(--muted); margin-top:var(--s3)}
@media (max-width:520px){.authorcard{flex-direction:column}}

/* two-up block that collapses on a phone */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5)}
@media (max-width:640px){.duo{grid-template-columns:1fr}}
/* ============================================================
   Hero system — layered light, glass proof cards, editorial long-form
   ============================================================ */

/* ---------- ambient light (both hero types) ---------- */
.orbs{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0}
.orb{position:absolute; border-radius:50%; filter:blur(72px); opacity:.5; will-change:transform}
.orb--1{width:min(46vw,560px); aspect-ratio:1; left:-8%; top:-28%;
  background:radial-gradient(circle,#0269D0 0%,rgba(2,105,208,0) 70%); animation:drift-a 26s ease-in-out infinite}
.orb--2{width:min(38vw,460px); aspect-ratio:1; right:-6%; top:-14%;
  background:radial-gradient(circle,#7A3FD0 0%,rgba(122,63,208,0) 70%); animation:drift-b 32s ease-in-out infinite}
.orb--3{width:min(34vw,420px); aspect-ratio:1; right:14%; bottom:-30%;
  background:radial-gradient(circle,#F80A62 0%,rgba(248,10,98,0) 70%); opacity:.38; animation:drift-c 29s ease-in-out infinite}
@keyframes drift-a{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(6%,7%,0) scale(1.08)}}
@keyframes drift-b{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-7%,5%,0) scale(1.06)}}
@keyframes drift-c{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(4%,-8%,0) scale(1.1)}}

/* fine grain keeps large gradients from banding */
.grain{position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.16; mix-blend-mode:overlay;
  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 type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

.hero .wrap,.phero .wrap{position:relative; z-index:3}

/* a lit hairline where the dark hero meets the page */
.hero::after,.phero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:4;
  background:linear-gradient(90deg,transparent,rgba(124,192,255,.55),rgba(248,10,98,.4),transparent)}
.phero--lifted::after{display:none}

/* ---------- inner-page hero ---------- */
.phero{padding:clamp(46px,5vw,74px) 0 clamp(56px,6vw,86px)}
.phero h1{font-size:clamp(2.3rem,4.6vw,3.9rem); line-height:1.02; letter-spacing:-.035em;
  margin:var(--s5) 0 var(--s4); max-width:15ch}
.phero--wide h1{max-width:19ch}
.phero .deck{color:#93AECB; font-size:clamp(.98rem,1.1vw,1.075rem); line-height:1.6;
  max-width:74ch; margin-top:var(--s4)}
.phero .deck--cont{margin-top:6px; font-size:clamp(1.2rem,2vw,1.75rem);
  font-weight:500; line-height:1.25; letter-spacing:-.018em; color:#8FB3D6; max-width:26ch}
.phero .lead{color:#C3D6EC; max-width:60ch}
.phero .btn-row{margin-top:var(--s7)}

/* record titles (a case study, an article) keep their full name and scale down instead */
.phero--record h1{font-size:clamp(1.95rem,3.3vw,3rem); max-width:22ch; letter-spacing:-.03em}

.crumbs{display:flex; width:fit-content; max-width:100%; align-items:center; gap:9px; flex-wrap:wrap; font-size:12.5px;
  color:#9FB8D4; margin-bottom:var(--s5); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r-pill); padding:7px 14px}

/* ---------- proof rail: a quiet editorial band, not cards on the hero ---------- */
/* the rail is part of the hero, so it stays dark in the light theme too */
.proofrail{position:relative; background:var(--navy); color:#fff}
.proofrail::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,192,255,.5),rgba(248,10,98,.36),transparent)}
.proofrail .wrap{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,3vw,44px);
  align-items:center; padding:clamp(20px,2.4vw,30px) 0}
.rail-label{display:flex; align-items:center; gap:10px; font-size:11px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:#8FA9C7; white-space:nowrap}
.rail-label::before{content:""; width:26px; height:3px; border-radius:2px; background:var(--grad)}
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; align-items:baseline}
.rail-item{position:relative; padding:2px 0 2px clamp(16px,2.2vw,32px)}
.rail-item + .rail-item::before{content:""; position:absolute; left:0; top:-2px; bottom:-2px; width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.20),transparent)}
.rail-item b{display:block; font-size:clamp(1.5rem,2.2vw,2.05rem); font-weight:900; line-height:1;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,#fff,#9CC8F5); -webkit-background-clip:text; background-clip:text; color:transparent}
.rail-item span{display:block; font-size:12.5px; color:#93A6BF; margin-top:7px; line-height:1.4}
.rail-item::after{content:""; position:absolute; left:clamp(16px,2.2vw,32px); bottom:-14px; height:2px;
  width:0; border-radius:2px; background:var(--grad); transition:width var(--t-base) var(--ease-out)}
.rail-item:hover::after{width:34px}
.rail-item:first-child{padding-left:0}
.rail-item:first-child::after{left:0}
@media (max-width:900px){
  .proofrail .wrap{grid-template-columns:1fr; gap:var(--s4)}
}
@media (max-width:640px){
  .rail{grid-auto-flow:row; grid-template-columns:1fr 1fr; gap:var(--s5) var(--s4)}
  .rail-item{padding-left:var(--s4)}
  .rail-item:nth-child(odd){padding-left:0}
  .rail-item:nth-child(odd)::before{display:none}
  .rail-item b{font-size:1.45rem}
}

/* ---------- home hero refinements ---------- */
.hero h1{margin:var(--s5) 0 var(--s5)}
.panel{position:relative}
.panel::before{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(140deg,rgba(124,192,255,.5),rgba(248,10,98,.28) 55%,transparent 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:1px}

/* ---------- editorial long-form (the SEO sections) ---------- */
.editorial{display:grid; gap:clamp(36px,4vw,60px)}
.ed{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(24px,3.4vw,56px);
  align-items:start; padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--line)}
.ed:first-child{padding-top:0; border-top:0}
.ed-head{position:sticky; top:118px}
.ed-num{display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:var(--s3)}
.ed-num::before{content:""; width:22px; height:2px; border-radius:2px; background:var(--grad)}
.ed-head h2{font-size:clamp(1.35rem,1.9vw,1.75rem); font-weight:800; line-height:1.2;
  letter-spacing:-.02em; color:var(--ink); text-wrap:balance}
.ed-body{font-size:1.0625rem; line-height:1.78; color:var(--ink-2); min-width:0}
.ed-body>*+*{margin-top:var(--s5)}
.ed-body>p:first-child{font-size:1.14rem; line-height:1.66; color:var(--ink)}
.ed-body h3{font-size:1.1875rem; font-weight:700; color:var(--ink); margin-top:var(--s6)}
.ed-body ul,.ed-body ol{display:grid; gap:var(--s3); padding-left:0; list-style:none}
.ed-body ul li{position:relative; padding-left:28px}
.ed-body ul li::before{content:""; position:absolute; left:6px; top:11px; width:7px; height:7px;
  border-radius:50%; background:var(--grad)}
.ed-body blockquote{margin:0; padding:var(--s5) var(--s6); border-radius:var(--r-md);
  background:var(--surface-2); border-left:3px solid var(--blue); font-size:1.1rem; color:var(--ink)}
.ed-body .timeline,.ed-body .callout{margin-top:var(--s5)}
.ed-body a{font-weight:600}
@media (max-width:900px){
  .ed{grid-template-columns:1fr; gap:var(--s5)}
  .ed-head{position:static}
  .ed-body>p:first-child{font-size:1.075rem}
}

/* ---------- member hero: portrait beside the title on tablets too ---------- */
.phero-split{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);
  gap:clamp(24px,3.5vw,56px); align-items:center}
/* spotlight portrait — no card, just light around the person */
.spotlight{position:relative; margin:0; display:grid; justify-items:center; text-align:center;
  padding:clamp(18px,2.4vw,34px) 0}
.spot-orb{position:relative; display:grid; place-items:center; isolation:isolate}
.spot-glow{position:absolute; inset:-42%; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle,rgba(124,192,255,.32),rgba(248,10,98,.15) 45%,transparent 70%);
  filter:blur(8px)}
.spot-ring{position:absolute; inset:-13%; border-radius:50%; pointer-events:none; z-index:1;
  background:conic-gradient(from 0deg,#0269D0,#7A3FD0,#F80A62,#0269D0);
  -webkit-mask:radial-gradient(circle,transparent 0 calc(50% - 3px),#000 calc(50% - 2px));
  mask:radial-gradient(circle,transparent 0 calc(50% - 3px),#000 calc(50% - 2px));
  animation:spin 20s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spot-face{position:relative; z-index:2; width:clamp(140px,16vw,196px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; font-size:clamp(38px,4.4vw,56px); font-weight:900; letter-spacing:-.04em;
  color:#fff; background:linear-gradient(150deg,#0B2647,#0269D0 55%,#7A3FD0);
  box-shadow:0 26px 60px rgba(2,105,208,.42), inset 0 1px 0 rgba(255,255,255,.25)}
.spotlight figcaption{position:relative; margin-top:var(--s5)}
.spotlight figcaption b{display:block; font-size:1.125rem; font-weight:800; letter-spacing:-.02em}
.spotlight figcaption span{display:block; font-size:13px; color:#9CC8F5; margin-top:5px}
.spot-chip{position:absolute; z-index:3; font-size:11.5px; font-weight:700; white-space:nowrap;
  color:#DCE9F8; background:rgba(8,22,42,.72); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-pill); padding:8px 14px; backdrop-filter:blur(10px);
  box-shadow:0 12px 28px rgba(0,0,0,.35)}
.spot-chip--a{left:-8%; top:20%}
.spot-chip--b{right:-8%; bottom:26%}
@media (max-width:1280px){.spot-chip{display:none}}
@media (prefers-reduced-motion:reduce){.spot-ring{animation:none}}
@media (max-width:600px){
  .phero-split{grid-template-columns:1fr; gap:var(--s6)}
}

/* ---------- dialogs ---------- */
dialog.modal{width:min(100% - 32px,620px); max-height:min(92vh,900px); padding:0; border:0;
  border-radius:22px; background:var(--surface); color:var(--ink); box-shadow:var(--e3); overflow:hidden}
dialog.modal::backdrop{background:rgba(6,21,40,.62); backdrop-filter:blur(6px)}
.modal-head{position:relative; padding:var(--s6) var(--s6) var(--s5); background:var(--navy); color:#fff; overflow:hidden}
.modal-head .orbs{opacity:.85}
.modal-head>*{position:relative; z-index:3}
.modal-head h2{font-size:1.45rem; font-weight:800; letter-spacing:-.02em; margin-top:var(--s3)}
.modal-head p{color:#B4C7DD; font-size:14.5px; margin-top:8px}
.modal-close{position:absolute; z-index:5; top:14px; right:14px; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; cursor:pointer;
  display:grid; place-items:center; transition:background var(--t-fast) var(--ease-out)}
.modal-close:hover{background:rgba(255,255,255,.18)}
.modal-body{padding:var(--s6); overflow-y:auto; max-height:min(62vh,620px)}
.modal-foot{display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  padding:var(--s5) var(--s6); border-top:1px solid var(--line); background:var(--surface-2)}
.modal-foot .btn{flex:none}
.modal-foot p{font-size:12.5px; color:var(--muted); margin:0}
.modal-ok{display:none; text-align:center; padding:var(--s8) var(--s6)}
.modal-ok svg{color:var(--ok); margin-bottom:var(--s4)}
.modal-ok h3{font-size:1.2rem; font-weight:800}
.modal-ok p{color:var(--muted); margin-top:var(--s3); font-size:15px}
dialog.modal.done .modal-body,dialog.modal.done .modal-foot{display:none}
dialog.modal.done .modal-ok{display:block}
@media (max-width:560px){
  dialog.modal{width:100%; max-width:none; max-height:100vh; height:100%; border-radius:0}
  .modal-body{max-height:none}
}

/* ---------- richer footer ---------- */
.foot{padding:clamp(64px,7vw,104px) 0 var(--s6)}
.foot .wrap{display:block}
.foot-top{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,48px)}
.foot-brandcol p{font-size:14.5px; max-width:34ch; margin-top:var(--s4)}
.socials{display:flex; gap:10px; margin-top:var(--s5); flex-wrap:wrap}
.socials a{width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  color:#B4C7DD; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  transition:background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
             transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out)}
.socials a:hover{background:var(--grad); color:#fff; border-color:transparent; transform:translateY(-2px)}
.foot-cta{margin-top:var(--s6); display:flex; gap:var(--s3); flex-wrap:wrap}
.foot-badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:var(--s5)}
.foot-badges span{font-size:11.5px; font-weight:700; color:#A8C4E2; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1); border-radius:var(--r-pill); padding:6px 12px}
.foot-bottom{margin-top:clamp(40px,5vw,64px); padding-top:var(--s5);
  border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center;
  justify-content:space-between; gap:var(--s4); flex-wrap:wrap; font-size:13.5px; color:#7E93AE}
.foot-bottom nav{display:flex; gap:var(--s5); flex-wrap:wrap}
@media (max-width:1080px){.foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brandcol{grid-column:1/-1}}
@media (max-width:720px){.foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.foot-top{grid-template-columns:1fr}
  .foot-bottom{justify-content:flex-start}}

@media (prefers-reduced-motion:reduce){
  .orb{animation:none !important}
}

/* ---------- hero art: brand motif on the empty side of an inner hero ---------- */
/* the motif sits inside the content area — same gutter on the right as on the left */
.phero-art{position:absolute; top:50%; transform:translateY(-50%);
  right:calc((100% - min(90%,var(--wrap-max))) / 2);
  width:min(38%,560px); aspect-ratio:1; z-index:2; pointer-events:none}
.phero-art svg{width:100%; height:100%; display:block}
.phero--art .wrap>*{max-width:min(100%,58%)}
.phero--art .facts,.phero--art .phero-split{max-width:none}
@media (max-width:1024px){
  .phero-art{display:none}
  .phero--art .wrap>*{max-width:none}
}

/* ---------- long-form: short scannable blocks instead of a wall ---------- */
.ed-body{max-width:70ch}
.ed-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5)}
@media (max-width:760px){.ed-cards{grid-template-columns:1fr}}
/* an odd last card is never left alone in a row — it becomes the closing note */
.ed-cards>.ed-card:last-child:nth-child(odd){grid-column:1/-1; background:var(--surface-2);
  font-size:1.075rem; padding-block:var(--s6)}
.band--surface .ed-cards>.ed-card:last-child:nth-child(odd){background:var(--surface)}
.ed-cards>.ed-card:last-child:nth-child(odd)::before{opacity:1; width:4px}
.ed-card{position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--s5) var(--s5) var(--s5) calc(var(--s5) + 14px);
  box-shadow:var(--e1); font-size:1rem; line-height:1.72; color:var(--ink-2);
  transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease-out)}
.band--surface .ed-card{background:var(--ground)}
.ed-card::before{content:""; position:absolute; left:0; top:16px; bottom:16px; width:3px;
  border-radius:3px; background:var(--grad); opacity:.55; transition:opacity var(--t-base) var(--ease-out)}
.ed-card:hover{transform:translateY(-3px); box-shadow:var(--e2); border-color:var(--line-strong)}
.ed-card:hover::before{opacity:1}
.ed-body>.ed-cards{margin-top:var(--s5)}
.ed-lede{max-width:78ch; margin-inline:auto; font-size:1.09rem; line-height:1.72; color:var(--ink-2)}

/* ---------- service intro: one statement, one aside, four anchors ---------- */
.intro-split{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,3.6vw,60px); align-items:stretch}
.intro-lead{font-size:clamp(1.2rem,1.75vw,1.5rem); line-height:1.5; letter-spacing:-.015em;
  color:var(--ink); font-weight:500; max-width:32ch}
.intro-chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:var(--s5)}
.intro-chips span{font-size:13px; font-weight:700; color:var(--blue); background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:8px 14px}
.intro-aside{position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s6); box-shadow:var(--e2);
  display:flex; flex-direction:column; justify-content:center}
.intro-aside::before{content:"\201C"; position:absolute; right:18px; top:-16px; font-size:104px;
  font-weight:900; line-height:1; color:var(--blue); opacity:.09}
.intro-aside p{position:relative; font-size:1.0625rem; line-height:1.72; color:var(--ink-2)}
.intro-aside .cap{display:block; margin-bottom:var(--s3); font-size:11px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
@media (max-width:900px){
  .intro-split{grid-template-columns:1fr; gap:var(--s6)}
  .intro-lead{max-width:none}
}

/* ---------- campaign offers ---------- */
.stat-cards{gap:var(--s4)}
.stat-card{position:relative; overflow:hidden; padding:var(--s5)}
.stat-card::after{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad);
  transform:scaleX(.3); transform-origin:left; transition:transform var(--t-base) var(--ease-out)}
.stat-card:hover::after{transform:scaleX(1)}
.stat-card:hover{transform:translateY(-3px); box-shadow:var(--e2)}
.stat-card{transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out)}
.stat-card b{font-size:clamp(1.7rem,2.4vw,2.15rem)}
.stat-card span{font-size:13px; line-height:1.45}
.stat-card em{font-style:normal; display:block; margin-top:5px; font-size:11.5px; color:var(--muted);
  letter-spacing:.02em; opacity:.85}

.notebar{display:flex; gap:13px; align-items:flex-start; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s4) var(--s5)}
.notebar svg{flex:none; color:var(--blue); margin-top:2px}
.notebar p{font-size:14px; color:var(--muted); line-height:1.6}
.notebar b{color:var(--ink)}
.ph{font-weight:700; color:var(--pink-text); border-bottom:1.5px dashed currentColor; padding-bottom:1px}

.offers{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s5);
  margin-top:var(--s8); align-items:start}
.offer{position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s6); box-shadow:var(--e1); display:flex;
  flex-direction:column; gap:var(--s4);
  transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease-out)}
.offer:hover{transform:translateY(-5px); box-shadow:var(--e3); border-color:var(--line-strong)}
.offer--feature{border-color:transparent; box-shadow:var(--glow)}
.offer--feature::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1.5px; background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude}
.offer-top{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap}
.offer-badge{font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background:var(--grad); border-radius:var(--r-pill); padding:7px 13px}
.offer-save{font-size:13px; font-weight:800; color:var(--ink)}
.offer p{color:var(--muted); font-size:15.5px}
.offer .checklist{margin-top:0; font-size:15px}
.offer-meta{display:grid; gap:0; margin:0; padding-top:var(--s4); border-top:1px solid var(--line)}
.offer-meta div{display:flex; justify-content:space-between; gap:12px; padding:9px 0; font-size:14px}
.offer-meta dt{color:var(--muted)}
.offer-meta dd{margin:0; font-weight:700; text-align:right}
.offer .btn{width:100%; justify-content:center; margin-top:auto}

/* ---------- CTA band: a balanced two-column close ---------- */
.cta .wrap{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
  gap:clamp(28px,4vw,72px); align-items:center; flex-wrap:initial}
.cta-note{position:relative; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg); padding:var(--s6); backdrop-filter:blur(10px)}
.cta-note h3{font-size:11.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:#A8D0F7; margin-bottom:var(--s4)}
.cta-note ul{display:grid; gap:var(--s3)}
.cta-note li{display:flex; gap:11px; align-items:flex-start; font-size:15px; color:#D6E4F5}
.cta-note svg{flex:none; margin-top:3px; color:#5FE3AE}
.cta-note .cta-line{display:flex; align-items:center; gap:10px; margin-top:var(--s5);
  padding-top:var(--s5); border-top:1px solid rgba(255,255,255,.12); font-size:14.5px}
.cta-note .cta-line a{color:#fff; text-decoration:none; font-weight:700}
.cta-note .cta-line a:hover{color:#A8D0F7}
@media (max-width:900px){
  .cta .wrap{grid-template-columns:1fr; gap:var(--s7)}
}

.card--ask{background:var(--grad-soft); border-color:var(--line-strong)}
.card--ask .cap{color:var(--pink-text); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:11px}
.cta-main{display:grid; gap:var(--s5); align-content:center}
.cta-main .btn-row{margin-top:var(--s3)}

/* ---------- the diagnostic band (The Challenge) ---------- */
.diag{background:var(--navy); color:#fff; position:relative; overflow:hidden}
.diag::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:4;
  background:linear-gradient(90deg,transparent,rgba(248,10,98,.5),rgba(124,192,255,.35),transparent)}
.diag-grid{position:relative; z-index:3; display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(32px,4vw,72px); align-items:center}
.diag-head .h2{margin:var(--s5) 0 var(--s4); max-width:16ch}
.diag-head .lead{color:#B4C7DD; max-width:46ch}
.diag-head .btn-row{margin-top:var(--s6)}
.diag-meter{display:flex; align-items:center; gap:var(--s5); margin-top:var(--s6);
  padding-top:var(--s5); border-top:1px solid rgba(255,255,255,.12)}
.diag-count b{display:block; font-size:2.25rem; font-weight:900; line-height:1; letter-spacing:-.04em;
  background:linear-gradient(120deg,#FF6E9C,#A374F0); -webkit-background-clip:text; background-clip:text; color:transparent}
.diag-count span{display:block; font-size:12.5px; color:#93A6BF; margin-top:6px}
.diag-bars{display:flex; gap:5px; align-items:flex-end; height:38px}
.diag-bars i{width:7px; border-radius:3px; background:linear-gradient(180deg,#FF3D7F,rgba(248,10,98,.25))}
.diag-bars i:nth-child(1){height:38%}.diag-bars i:nth-child(2){height:64%}
.diag-bars i:nth-child(3){height:48%}.diag-bars i:nth-child(4){height:82%}
.diag-bars i:nth-child(5){height:56%}.diag-bars i:nth-child(6){height:96%}

.symptoms{display:grid; gap:10px; counter-reset:sy; margin:0; padding:0; list-style:none}
.symptom{position:relative; display:flex; align-items:flex-start; gap:var(--s4);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px;
  padding:var(--s4) var(--s5); overflow:hidden;
  transition:background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out),
             transform var(--t-base) var(--ease-out)}
.symptom::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,#FF3D7F,#A374F0); transform:scaleY(.35); transform-origin:top;
  transition:transform var(--t-base) var(--ease-out)}
.symptom:hover{background:rgba(255,255,255,.09); border-color:rgba(255,110,156,.45); transform:translateX(4px)}
.symptom:hover::before{transform:scaleY(1)}
.symptom-i{flex:none; font-size:11px; font-weight:800; letter-spacing:.1em; color:#FF6E9C;
  padding-top:4px; width:22px}
.symptom-b{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); flex:1;
  flex-wrap:wrap}
.symptom-b b{font-size:15.5px; font-weight:600; line-height:1.5; color:#E4EEF9}
.symptom-tag{flex:none; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#9CC8F5; background:rgba(124,192,255,.12); border:1px solid rgba(124,192,255,.22);
  border-radius:var(--r-pill); padding:5px 10px}
@media (max-width:980px){
  .diag-grid{grid-template-columns:1fr; gap:var(--s7)}
  .diag-head .h2,.diag-head .lead{max-width:none}
}
@media (max-width:520px){
  .symptom-b{flex-direction:column; align-items:flex-start; gap:8px}
}

/* ---------- logo marquee: works with 6 logos or 60 ----------
   Each client mark ships once, as a PNG alpha mask. The element paints the
   theme's ink through that mask, so the same asset reads on a light ground
   and a dark one -- and a browser without mask support still gets a legible
   name chip instead of a blank rail.                                      */
.logo-rail{position:relative; margin-top:var(--s6); overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:flex; align-items:center; gap:var(--s7); width:max-content;
  animation:logoscroll 54s linear infinite}
.logo-rail:hover .logo-track,
.logo-rail:focus-within .logo-track{animation-play-state:paused}
.logo-track .lg{flex:none; width:150px; height:48px; display:grid; place-items:center;
  border:1px dashed var(--line-strong); border-radius:var(--r-sm);
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  text-align:center; line-height:1.2; color:var(--muted)}
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .logo-track .lg{border:0; color:transparent; background:var(--ink); opacity:var(--logo-op);
    -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat;
    transition:opacity var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out)}
  .logo-track .lg:hover{opacity:1; background:var(--blue)}
}
@keyframes logoscroll{to{transform:translateX(-50%)}}
@media (max-width:820px){
  .logo-track{gap:var(--s6)}
  .logo-track .lg{width:118px; height:38px}
}
@media (prefers-reduced-motion:reduce){
  .logo-rail{-webkit-mask:none; mask:none; overflow:visible}
  .logo-track{animation:none; width:auto; flex-wrap:wrap; justify-content:center;
    gap:var(--s6) var(--s7)}
  .logo-track .lg[data-dup]{display:none}
}

/* ---------- testimonial carousel: any number of quotes ---------- */
.testi{position:relative; margin-top:var(--s8)}
.testi-rail{display:grid; grid-auto-flow:column; grid-auto-columns:100%;
  gap:clamp(24px,3vw,48px); overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0;
  scrollbar-width:none}
.testi-rail::-webkit-scrollbar{display:none}
.testi-rail>.quotes{scroll-snap-align:start; min-width:0; margin-top:0}
.testi-nav{display:flex; align-items:center; justify-content:center; gap:var(--s4); margin-top:var(--s5)}
.testi-btn{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--surface); border:1px solid var(--line-strong); color:var(--ink-2);
  transition:border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
             background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out)}
.testi-btn:hover:not(:disabled){border-color:transparent; background:var(--grad); color:#fff; transform:translateY(-2px)}
.testi-btn:disabled{opacity:.35; cursor:default}
.testi-dots{display:flex; gap:7px}
.testi-dots button{width:8px; height:8px; border-radius:50%; border:0; cursor:pointer; padding:0;
  background:var(--line-strong); transition:width var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out)}
.testi-dots button[aria-current="true"]{width:26px; border-radius:5px; background:var(--grad)}


.quote--bare{background:transparent; border:0; box-shadow:none; padding:0; gap:var(--s4)}
.quote--bare::before{font-size:88px; top:-22px; right:0}
.quote--bare blockquote{font-size:15.5px}