/*! QNN Solutions website styles — © 2026 QNN Solutions. All rights reserved.
 *  Not licensed for reuse on other sites. Enquiries: hello@qnnsolutions.com
 */
/* ==========================================================================
   ScaleX Group — design system
   1 tokens · 2 base · 3 type · 4 buttons · 5 nav + mega menu · 6 motion
   7 hero · 8 page hero · 9 sections · 10 components · 11 forms
   12 footer · 13 utilities · 14 print
   ========================================================================== */

/* 1 — tokens ------------------------------------------------------------- */
:root{
  --porcelain:#EFF1F4; --porcelain-2:#E4E7EC; --white:#FFFFFF;
  --navy:#070C1E; --navy-2:#0E1633; --navy-3:#1B2A5C;
  --ink:#0B1433; --ink-2:#42536E; --ink-3:#687995;
  --chalk:#EDF1F7; --silver:#AFC2D6;
  --line:#D2D9E4; --line-2:#E6EAF1; --line-d:rgba(175,194,214,.18);
  /* brand: the logo runs cyan -> blue -> deep blue */
  --cobalt:#1E86E8; --cobalt-d:#1560B8; --cobalt-l:#7FC2FF;
  --cyan:#12B5EA; --violet:#7B3FE4; --magenta:#F75462; --amber:#FEBD4D; --deep:#112251;
  --grad:linear-gradient(118deg,#12B5EA 0%,#7B3FE4 46%,#F75462 82%,#FEBD4D 100%);
  --pe:#1E86E8; --ab:#FEBD4D; --hs:#F75462;
  --pe-d:#1560B8; --ab-d:#8A5F05; --hs-d:#B32F3D;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --f-xs:.8125rem; --f-sm:.9125rem; --f-md:1.0625rem; --f-lg:1.1875rem;
  --f-xl:clamp(1.3rem,1.9vw,1.6rem);
  --f-2xl:clamp(1.65rem,2.7vw,2.3rem);
  --f-3xl:clamp(2.1rem,4.3vw,3.5rem);
  --f-4xl:clamp(2.7rem,6.6vw,5.6rem);
  --s1:8px; --s2:14px; --s3:22px; --s4:34px; --s5:52px; --s6:78px;
  --s7:clamp(72px,9vw,130px);
  --maxw:1320px; --gut:clamp(20px,4.4vw,60px); --nav-h:76px;
  --ease:cubic-bezier(.22,.68,.12,1);
}

/* 2 — base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--porcelain);color:var(--ink);font-family:var(--sans);
  font-size:var(--f-md);line-height:1.6;font-stretch:100%;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,canvas,svg,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
::selection{background:var(--cobalt);color:#fff}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:3px}
.on-dark :focus-visible,.nav.over-dark :focus-visible{outline-color:var(--cobalt-l)}
.skip{position:fixed;left:-999px;top:12px;z-index:300;background:var(--white);color:var(--ink);
  padding:12px 20px;border-radius:10px;box-shadow:0 10px 40px rgba(7,13,26,.25);font-weight:600}
.skip:focus{left:14px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* 3 — type --------------------------------------------------------------- */
.d1{font-size:var(--f-4xl);font-stretch:116%;font-weight:700;letter-spacing:-.024em;line-height:.95;text-wrap:balance}
.d2{font-size:var(--f-3xl);font-stretch:112%;font-weight:670;letter-spacing:-.019em;line-height:1.01;text-wrap:balance;max-width:19ch}
.d3{font-size:var(--f-2xl);font-stretch:108%;font-weight:660;letter-spacing:-.014em;line-height:1.08}
.d4{font-size:var(--f-xl);font-weight:650;letter-spacing:-.01em;line-height:1.18}
.em{font-family:var(--serif);font-style:italic;font-weight:400;font-stretch:100%;letter-spacing:-.004em}
.lead{font-size:var(--f-lg);line-height:1.55;max-width:56ch;color:var(--ink-2)}
.on-dark .lead{color:var(--silver)}
.kick{display:flex;align-items:center;gap:10px;font-size:var(--f-sm);color:var(--ink-3);margin-bottom:var(--s2)}
.kick::before{content:"";width:26px;height:1px;background:currentColor;flex:none}
.on-dark .kick{color:var(--silver)}
.small{font-size:var(--f-sm);color:var(--ink-3)}
.on-dark .small{color:var(--silver)}

/* 4 — buttons ------------------------------------------------------------ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 28px;border-radius:999px;font-weight:600;font-size:var(--f-md);
  text-decoration:none;border:1px solid transparent;cursor:pointer;overflow:hidden;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.btn>span{position:relative;z-index:1}
.btn-fill{background:var(--ink);color:var(--white)}
.btn-fill::after{background:var(--grad)}
.btn-fill::after{content:"";position:absolute;inset:0;background:var(--cobalt);border-radius:inherit;
  transform:translateY(101%);transition:transform .42s var(--ease)}
.btn-fill:hover::after{transform:none}
.btn-line{border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--ink);background:rgba(10,16,32,.04)}
.on-dark .btn-fill,.over-dark .btn-fill,.cine .btn-fill,.phero .btn-fill,.band .btn-fill,.svc-hero .btn-fill,.mini .btn-fill,.platform .btn-fill,.builder .out .btn-fill,.modal .btn-fill,.report .btn-fill{background:var(--grad)}
.on-dark .btn-fill::after,.over-dark .btn-fill::after,.cine .btn-fill::after,.phero .btn-fill::after,.band .btn-fill::after,.svc-hero .btn-fill::after,.mini .btn-fill::after,.platform .btn-fill::after,.builder .out .btn-fill::after,.modal .btn-fill::after{background:linear-gradient(118deg,#3FC8F5 0%,#9457F0 46%,#FF6B78 82%,#FFCB6A 100%)}
.on-dark .btn-line,.over-dark .btn-line,.cine .btn-line,.phero .btn-line,.band .btn-line,.svc-hero .btn-line,.mini .btn-line,.platform .btn-line{border-color:rgba(185,196,212,.36);color:var(--chalk)}
.on-dark .btn-line:hover,.over-dark .btn-line:hover,.cine .btn-line:hover,.phero .btn-line:hover,.band .btn-line:hover,.svc-hero .btn-line:hover,.mini .btn-line:hover,.platform .btn-line:hover{border-color:var(--chalk);background:rgba(255,255,255,.06)}
.row{display:flex;flex-wrap:wrap;gap:12px}
.tlink{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--cobalt-d);text-decoration:none}
.tlink span{background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;
  background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s var(--ease)}
.tlink:hover span{background-size:0 1px;background-position:100% 100%}
.tlink::after{content:"";width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .3s var(--ease)}
.tlink:hover::after{transform:rotate(45deg) translate(2px,-2px)}
.on-dark .tlink{color:var(--cobalt-l)}

/* 5 — nav ---------------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)}
.nav.solid{background:rgba(239,241,244,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.nav.over-dark{color:var(--chalk)}
.nav.over-dark.solid{background:rgba(7,13,26,.86);border-bottom-color:var(--line-d)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:16px}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{height:28px;width:auto;display:block;transition:opacity .35s var(--ease),transform .5s var(--ease)}
.logo:hover img{transform:scale(1.03)}
.logo .on-light-only{display:block}
.logo .on-dark-only{display:none}
.nav.over-dark .logo .on-light-only,.foot .logo .on-light-only{display:none}
.nav.over-dark .logo .on-dark-only,.foot .logo .on-dark-only{display:block}
.foot .logo img{height:auto;width:min(260px,70%)}
.logo-full img{display:block}
@media (max-width:520px){.logo img{height:28px}}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links>a,.mega-btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:.875rem;
  white-space:nowrap;padding:9px 10px;border-radius:8px;opacity:.76;cursor:pointer;transition:opacity .25s}
.nav-links>a:hover,.mega-btn:hover,.mega-btn[aria-expanded="true"]{opacity:1}
.nav-links>a[aria-current="page"]{opacity:1;font-weight:620}
.nav-links>a.only-mobile{display:none}
.mega-btn::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .3s var(--ease)}
.mega-btn[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-1px)}
.nav-cta{margin-left:8px;min-height:42px;padding:0 18px;font-size:.875rem;white-space:nowrap;opacity:1}

.mega{position:absolute;top:calc(var(--nav-h) - 6px);left:var(--gut);right:var(--gut);z-index:99;
  background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 34px 90px -34px rgba(7,13,26,.45);padding:34px 38px;
  display:grid;grid-template-columns:1.1fr 1.1fr 1fr;gap:34px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.mega[data-open="true"]{opacity:1;visibility:visible;transform:none}
.mega h2{font-size:var(--f-xs);font-weight:660;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.mega a{display:block;text-decoration:none;padding:9px 10px;margin-left:-10px;border-radius:8px;transition:background-color .2s}
.mega a:hover{background:var(--porcelain)}
.mega a b{display:block;font-weight:600}
.mega a em{display:block;font-style:normal;font-size:var(--f-sm);color:var(--ink-3)}
.mega .feature{background:var(--navy);color:var(--chalk);border-radius:12px;padding:26px;
  display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.mega .feature .aura{width:320px;height:320px;right:-40%;bottom:-56%;opacity:.5}
.mega .feature>*:not(.aura){position:relative;z-index:1}
.mega .feature p{color:var(--silver);font-size:var(--f-sm)}
.mega .feature a{color:var(--cobalt-l);padding:0;margin:auto 0 0;font-weight:600}
.mega .feature a:hover{background:none;text-decoration:underline;text-underline-offset:4px}
.burger{display:none;align-items:center;gap:10px;border:1px solid currentColor;border-radius:999px;height:44px;padding:0 18px;cursor:pointer;opacity:.85;font-size:var(--f-sm)}
.burger i{width:16px;height:8px;position:relative;display:block}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.burger i::before{top:0}.burger i::after{bottom:0}
.burger[aria-expanded="true"] i::before{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:translateY(-3px) rotate(-45deg)}

@media (max-width:1240px){.nav-links>a,.mega-btn{padding:9px 8px;font-size:.84rem}}
@media (max-width:1080px){
  .nav-links>a.only-mobile{display:flex}
  .burger{display:inline-flex}
  .mega{display:none}
  .nav-links{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    padding:18px var(--gut) 34px;background:var(--porcelain);border-bottom:1px solid var(--line);
    max-height:calc(100dvh - var(--nav-h));overflow:auto;
    opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .nav.over-dark .nav-links{background:var(--navy);border-bottom-color:var(--line-d)}
  .nav-links.open{opacity:1;transform:none;pointer-events:auto}
  .nav-links>a{padding:16px 2px;font-size:1.1rem;border-radius:0;opacity:1;border-bottom:1px solid var(--line)}
  .nav.over-dark .nav-links>a{border-bottom-color:var(--line-d)}
  .mega-btn{display:none}
  .nav-cta{margin:20px 0 0;justify-content:center;font-size:var(--f-md);min-height:52px}
}

/* 6 — motion ------------------------------------------------------------- */
.aura{position:absolute;border-radius:50%;pointer-events:none;filter:blur(34px);opacity:.72;
  background:conic-gradient(from 0deg,#12B5EA,#1E86E8,#7B3FE4,#F75462,#FEBD4D,#7B3FE4,#12B5EA);
  -webkit-mask:radial-gradient(closest-side,transparent 66%,#000 76%,#000 88%,transparent 97%);
  mask:radial-gradient(closest-side,transparent 66%,#000 76%,#000 88%,transparent 97%);
  animation:spin 44s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}

.mask{display:block;overflow:hidden;padding-bottom:.04em}
.mask>span{display:block;transform:translateY(106%);transition:transform .95s var(--ease)}
.in .mask>span,.mask.in>span{transform:none}
.in .mask:nth-child(2)>span{transition-delay:.07s}
.in .mask:nth-child(3)>span{transition-delay:.14s}
.in .mask:nth-child(4)>span{transition-delay:.21s}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1x{transition-delay:.08s}.d2x{transition-delay:.17s}.d3x{transition-delay:.26s}.d4x{transition-delay:.35s}

.curtain{position:fixed;inset:0;z-index:400;background:var(--navy);transform:translateY(100%);pointer-events:none;display:grid;place-items:center}
.curtain.up{transform:none;transition:transform .5s var(--ease)}
.curtain.down{transform:translateY(-100%);transition:transform .5s var(--ease)}
.curtain-mark{width:58px;height:58px;opacity:0;transition:opacity .25s .12s}
.curtain.up .curtain-mark{opacity:1}

/* 7 — cinematic hero ----------------------------------------------------- */
.cine{position:relative;background:var(--navy);color:var(--chalk)}
.cine-track{height:480vh}
.cine-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
#stage{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.cine-aura{width:min(86vh,92vw);height:min(86vh,92vw);z-index:0;opacity:.5}
.cine-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(40% 33% at 50% 47%,rgba(7,13,26,.5) 0%,rgba(7,13,26,.24) 58%,rgba(7,13,26,0) 80%),
             radial-gradient(78% 74% at 50% 50%,rgba(7,13,26,0) 40%,rgba(7,13,26,.55) 76%,rgba(7,13,26,.94) 100%)}
.cine-copy{position:relative;z-index:3;width:100%;max-width:var(--maxw);padding:0 var(--gut);
  display:grid;justify-items:center;text-align:center;pointer-events:none}
.cine-copy>*{pointer-events:auto}
.slide{grid-area:1/1;display:grid;justify-items:center;gap:var(--s3);opacity:0;visibility:hidden;
  transform:translateY(18px);transition:opacity .55s var(--ease),transform .7s var(--ease),visibility .55s}
.slide.live{opacity:1;visibility:visible;transform:none}
.slide h1,.slide h2{max-width:15ch;text-shadow:0 2px 44px rgba(7,13,26,.65)}
.slide p{max-width:46ch;color:#DDE4EF;font-size:clamp(1.02rem,1.35vw,1.2rem);text-shadow:0 1px 24px rgba(7,13,26,.9)}
.stage-tag{font-size:var(--f-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt-l);font-weight:620}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px;
  border:1px solid var(--line-d);background:rgba(7,13,26,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:var(--f-sm);font-weight:560;text-decoration:none;transition:border-color .3s,background-color .3s}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--dot,var(--cobalt))}
.chip:hover{border-color:var(--dot,var(--cobalt));background:rgba(7,13,26,.8)}
.scroll-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:4;display:grid;justify-items:center;
  gap:9px;font-size:var(--f-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--silver)}
.scroll-cue .bar{width:1px;height:42px;background:linear-gradient(var(--silver),transparent);animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.45}50%{transform:scaleY(1);opacity:1}}
.cine-prog{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);z-index:4;display:grid;gap:16px;justify-items:center}
.cine-prog button{width:9px;height:9px;border:1px solid rgba(185,196,212,.45);border-radius:50%;cursor:pointer;
  transition:background-color .35s,transform .35s,border-color .35s}
.cine-prog button[aria-current="true"]{background:var(--chalk);border-color:var(--chalk);transform:scale(1.3)}
@media (max-width:820px){.cine-prog{display:none}.cine-track{height:440vh}}

/* 8 — page hero ---------------------------------------------------------- */
.phero{position:relative;background:var(--navy);color:var(--chalk);overflow:hidden;
  padding:calc(var(--nav-h) + var(--s7)) 0 var(--s7)}
.phero .aura{width:min(720px,118vw);height:min(720px,118vw);right:-14%;top:-42%;opacity:.4}
#mark{position:absolute;right:-2%;top:14%;width:min(400px,34vw);height:min(400px,34vw);z-index:1;opacity:.8}
.phero .wrap{position:relative;z-index:2}
.crumb{display:flex;align-items:center;gap:10px;font-size:var(--f-sm);color:var(--silver);margin-bottom:var(--s3)}
.crumb a{text-decoration:none;opacity:.82}
.crumb a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.phero h1{max-width:15ch;margin-bottom:var(--s3);position:relative;z-index:2}
.phero .lead{margin-bottom:var(--s4)}
.phero-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s5);
  padding-top:var(--s3);border-top:1px solid var(--line-d);font-size:var(--f-sm);color:var(--silver)}
@media (max-width:900px){#mark{display:none}}

/* 9 — sections ----------------------------------------------------------- */
.sec{padding:var(--s7) 0;scroll-margin-top:calc(var(--nav-h) + 10px)}
.sec.tight{padding:var(--s6) 0}
.on-light{background:var(--porcelain)}
.on-white{background:var(--white)}
.on-dark{background:var(--navy);color:var(--chalk)}
.head{display:grid;gap:var(--s2);margin-bottom:var(--s6);max-width:62ch}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,84px)}
.split.even{grid-template-columns:1fr 1fr}
.split.aside{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
@media (max-width:900px){.split,.split.even,.split.aside{grid-template-columns:1fr}}

/* 10 — components -------------------------------------------------------- */
.marquee{overflow:hidden;border-block:1px solid var(--line-d);padding:18px 0;background:var(--navy);color:var(--silver);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee ul{display:flex;width:max-content;animation:slide 52s linear infinite}
.marquee li{display:flex;align-items:center;gap:22px;padding-right:22px;font-size:var(--f-sm);
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.marquee li::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--cobalt)}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee:hover ul{animation-play-state:paused}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s4) var(--s5)}
.stat b{display:block;font-size:clamp(2.3rem,4.4vw,3.4rem);font-stretch:114%;font-weight:720;line-height:1;letter-spacing:-.022em}
.stat span{display:block;margin-top:8px;font-size:var(--f-sm);color:var(--ink-3);max-width:24ch}
.on-dark .stat span{color:var(--silver)}

.idx{position:sticky;top:calc(var(--nav-h) + 28px);align-self:start}
.idx h2{font-size:var(--f-xs);color:var(--ink-3);font-weight:660;letter-spacing:.06em;text-transform:uppercase;margin:var(--s3) 0 10px}
.idx h2:first-child{margin-top:0}
.idx a{display:block;padding:9px 0 9px 16px;text-decoration:none;color:var(--ink-2);border-left:2px solid var(--line);
  transition:color .3s,border-color .3s,padding-left .3s}
.idx a:hover{color:var(--ink)}
.idx a[aria-current="true"]{color:var(--ink);font-weight:620;border-color:var(--cobalt);padding-left:22px}
@media (max-width:900px){.idx{display:none}}

.blocks>article{padding:var(--s6) 0;border-top:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 16px)}
.blocks>article:first-child{border-top:0;padding-top:0}
.b-num{display:flex;align-items:baseline;gap:14px;font-size:var(--f-sm);color:var(--ink-3);margin-bottom:var(--s2)}
.b-num b{font-size:var(--f-2xl);font-stretch:112%;font-weight:700;color:var(--line);letter-spacing:-.02em;line-height:1}

.rows>li,.rows>div{padding:var(--s3) 0;border-top:1px solid var(--line)}
.rows>li:last-child,.rows>div:last-child{border-bottom:1px solid var(--line)}
.on-dark .rows>li,.on-dark .rows>div{border-color:var(--line-d)}
.rows h3{font-size:var(--f-lg);font-weight:650;margin-bottom:5px}
.rows p{color:var(--ink-2);max-width:62ch}
.on-dark .rows p{color:var(--silver)}
.rows .via{display:inline-flex;align-items:center;gap:8px;margin-top:9px;font-size:var(--f-sm);font-weight:620;color:var(--tone-d,var(--cobalt-d))}
.rows .via::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tone,var(--cobalt))}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px}
.tile{position:relative;background:var(--white);padding:30px 28px;display:grid;gap:8px;align-content:start;
  text-decoration:none;overflow:hidden;box-shadow:0 0 0 1px var(--line);transition:background-color .3s}
.tile::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tone,var(--grad));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
a.tile:hover::before{transform:none}
a.tile:hover{background:#F8FAFD}
.tile h3{font-size:var(--f-lg);font-weight:650}
.tile p{color:var(--ink-3);font-size:var(--f-sm)}
.tile .arrow{margin-top:6px;font-weight:620;color:var(--cobalt-d);font-size:var(--f-sm)}

.glow{position:relative;overflow:hidden}
.glow::after{content:"";position:absolute;width:360px;height:360px;left:var(--mx,50%);top:var(--my,50%);
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(circle,color-mix(in srgb,var(--tone,var(--cobalt)) 20%,transparent),transparent 70%)}
.glow:hover::after{opacity:1}

.ticks{display:grid;gap:11px}
.ticks li{position:relative;padding-left:24px;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--cobalt)}
.on-dark .ticks li{color:var(--silver)}
.cols2{columns:2;column-gap:44px}
.cols2 li{break-inside:avoid}
@media (max-width:700px){.cols2{columns:1}}

.co{--tone:var(--pe);--tone-d:var(--pe-d);padding:var(--s6) 0;border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--nav-h) + 16px)}
.co .mark{display:block;width:64px;height:5px;border-radius:3px;background:var(--tone);margin-bottom:var(--s3)}
.co .sector{color:var(--tone-d);font-weight:640;margin:8px 0 4px}
.co .sum{font-size:var(--f-lg);margin-bottom:var(--s3);max-width:58ch}
.co p{color:var(--ink-2);max-width:62ch;margin-bottom:var(--s3)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s3)}
.pills li{padding:8px 16px;border-radius:999px;background:var(--white);border:1px solid var(--line);font-size:var(--f-sm)}

.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.tier{padding:30px 28px 8px 0;display:flex;flex-direction:column}
.tier+.tier{padding-left:28px;border-left:1px solid var(--line)}
.tier .for{font-size:var(--f-sm);color:var(--ink-3);margin-bottom:8px}
.tier h3{font-size:clamp(1.6rem,2.4vw,2rem);font-stretch:114%;font-weight:700;line-height:1.04;letter-spacing:-.015em;margin-bottom:8px}
.tier .one{font-weight:560;margin-bottom:var(--s3)}
.tier ul{margin-bottom:var(--s3)}
.tier .q{font-size:var(--f-sm);color:var(--ink-3);margin-bottom:12px}
.tier .tlink{margin-top:auto}
@media (max-width:880px){.tiers{grid-template-columns:1fr}.tier,.tier+.tier{padding:26px 0;border-left:0;border-bottom:1px solid var(--line)}}

.tabbar{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:999px;background:var(--porcelain-2);
  border:1px solid var(--line);margin-bottom:var(--s5)}
.on-white .tabbar{background:var(--porcelain)}
.tabbar button{border-radius:999px;padding:12px 24px;cursor:pointer;font-weight:560;color:var(--ink-3);transition:color .25s}
.tabbar button[aria-selected="true"]{background:var(--ink);color:var(--white)}
.seg{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--white)}
.seg button{padding:15px 8px;cursor:pointer;font-weight:560;color:var(--ink-3)}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.meter .bars{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:8px}
.meter .bars span{height:10px;border-radius:2px;background:var(--line);transition:background-color .4s var(--ease)}
.meter .bars span.on{background:var(--grad)}
@media (max-width:620px){.seg{grid-template-columns:1fr 1fr}.seg button:nth-child(3){border-left:0}.seg button:nth-child(n+3){border-top:1px solid var(--line)}}

.builder{background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.builder .qs{padding:clamp(26px,3.4vw,46px);display:grid;gap:var(--s4);align-content:start}
.builder fieldset{border:0;padding:0;margin:0}
.builder legend{font-weight:650;margin-bottom:14px}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opts button{padding:12px 20px;border:1px solid var(--line);border-radius:999px;cursor:pointer;
  font-size:var(--f-sm);font-weight:550;color:var(--ink-2);transition:border-color .25s,color .25s,background-color .25s}
.opts button:hover{border-color:var(--ink-3);color:var(--ink)}
.opts button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.builder .out{background:var(--navy);color:var(--chalk);padding:clamp(26px,3.4vw,46px);position:relative;
  overflow:hidden;display:flex;flex-direction:column}
.builder .out .aura{width:420px;height:420px;right:-34%;bottom:-46%;opacity:.4}
.builder .out>*:not(.aura){position:relative;z-index:1}
.builder .out h3{font-size:var(--f-2xl);font-stretch:110%;font-weight:680;line-height:1.05;letter-spacing:-.015em;margin:12px 0}
.builder .out p{color:var(--silver);margin-bottom:var(--s3)}
.builder .out ul{display:grid;gap:10px;margin-bottom:var(--s4)}
.builder .out li{position:relative;padding-left:24px;font-size:var(--f-sm);color:var(--silver)}
.builder .out li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--cobalt-l)}
.builder .out .btn{margin-top:auto;align-self:start}
.builder .swap{animation:swapin .45s var(--ease)}
@keyframes swapin{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:900px){.builder{grid-template-columns:1fr}}

.acc{border-top:1px solid var(--line)}
.acc>div{border-bottom:1px solid var(--line)}
.acc button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;
  text-align:left;font-size:var(--f-lg);font-weight:620;cursor:pointer}
.acc button::after{content:"";flex:none;width:13px;height:13px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .35s var(--ease)}
.acc button[aria-expanded="true"]::after{transform:rotate(225deg) translate(-3px,-3px)}
.acc .panel{overflow:hidden;height:0;transition:height .4s var(--ease)}
.acc .panel p{padding-bottom:24px;color:var(--ink-2);max-width:64ch}

.tl{position:relative;display:grid;padding-left:34px}
.tl::before{content:"";position:absolute;left:9px;top:14px;bottom:14px;width:1px;background:var(--line)}
.on-dark .tl::before{background:var(--line-d)}
.tl::after{content:"";position:absolute;left:9px;top:14px;width:1px;height:var(--fill,0%);background:var(--cobalt);transition:height .25s linear}
.tl li{position:relative;padding:var(--s3) 0}
.tl li::before{content:"";position:absolute;left:-30px;top:calc(var(--s3) + .5em);width:11px;height:11px;border-radius:50%;
  background:var(--porcelain);border:1.5px solid var(--line);transition:background-color .3s,border-color .3s}
.on-dark .tl li::before{background:var(--navy);border-color:var(--line-d)}
.tl li.on::before{background:var(--cobalt);border-color:var(--cobalt)}
.tl h3{font-size:var(--f-lg);font-weight:650;margin-bottom:4px}
.tl p{color:var(--ink-2);max-width:58ch}
.on-dark .tl p{color:var(--silver)}

.report{border:1px solid var(--line-d);border-radius:14px;background:linear-gradient(158deg,var(--navy-3),var(--navy-2));
  padding:clamp(26px,3.4vw,44px)}
.report .rt{display:flex;justify-content:space-between;gap:12px;font-size:var(--f-sm);color:var(--silver);
  padding-bottom:var(--s3);border-bottom:1px solid var(--line-d)}
.report h3{margin:var(--s3) 0;font-size:var(--f-xl);font-stretch:110%;font-weight:680;line-height:1.12}
.steps{counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:46px 1fr;gap:16px;padding:var(--s3) 0;border-top:1px solid var(--line-d)}
.steps li::before{content:counter(s,decimal-leading-zero);width:38px;height:38px;border-radius:50%;border:1px solid var(--cobalt-l);
  display:grid;place-items:center;color:var(--cobalt-l);font-weight:650;font-size:var(--f-sm)}
.steps b{display:block;font-weight:650}
.steps span{color:var(--silver);font-size:var(--f-sm)}

/* 11 — forms ------------------------------------------------------------- */
.form{background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:clamp(26px,4vw,46px);
  display:grid;grid-template-columns:1fr 1fr;gap:20px 22px}
.f{display:grid;gap:7px}
.f.full{grid-column:1/-1}
.f label{font-weight:600;font-size:var(--f-sm);color:var(--ink)}
.f input,.f select,.f textarea{font:inherit;font-size:var(--f-md);padding:14px 16px;border:1px solid #A6B2C6;
  border-radius:10px;background:var(--white);color:var(--ink);width:100%;transition:border-color .25s}
.f textarea{min-height:150px;resize:vertical}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--ink-3)}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--cobalt);outline-offset:1px;border-color:var(--cobalt)}
.f [aria-invalid="true"]{border-color:#B42318}
.f .err{color:#B42318;font-size:var(--f-sm);min-height:1em}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
.form-foot p{flex:1 1 240px;font-size:var(--f-sm);color:var(--ink-3)}
.status{grid-column:1/-1;padding:16px 18px;border-radius:10px;background:#E7EFFF;color:var(--ink);display:none}
.status.show{display:block}
@media (max-width:700px){.form{grid-template-columns:1fr}}

.band{position:relative;overflow:hidden;background:var(--navy);color:var(--chalk);padding:var(--s7) 0}
.band .aura{width:min(640px,120vw);height:min(640px,120vw);left:-10%;bottom:-58%;opacity:.34}
.band .wrap{position:relative;z-index:2;display:grid;gap:var(--s3);justify-items:start}
.band p{color:var(--silver);max-width:52ch}

/* 12 — footer ------------------------------------------------------------ */
.foot{background:var(--navy);color:var(--silver);padding:var(--s6) 0 var(--s4);border-top:1px solid var(--line-d)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(5,minmax(0,1fr));gap:var(--s4)}
.foot .logo{color:var(--chalk);margin-bottom:var(--s2)}
.foot h2{font-size:var(--f-xs);font-weight:660;color:var(--chalk);letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.foot li{margin-bottom:10px}
.foot a{text-decoration:none;transition:color .25s}
.foot a:hover{color:var(--white);text-decoration:underline;text-underline-offset:4px}
.foot-end{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;
  margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--line-d);font-size:var(--f-sm)}
@media (max-width:1100px){.foot-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.foot-grid{grid-template-columns:1fr 1fr}}

/* 13 — utilities --------------------------------------------------------- */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.motion-btn{padding:4px 0;font-size:var(--f-sm);text-decoration:underline;text-underline-offset:4px;cursor:pointer;opacity:.8}
.motion-btn:hover{opacity:1}
.mt3{margin-top:var(--s3)}.mt4{margin-top:var(--s4)}.mt5{margin-top:var(--s5)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}.mask>span{transform:none}
}
html.no-motion .aura,html.no-motion .marquee ul,html.no-motion .scroll-cue .bar{animation:none}

/* 14 — print ------------------------------------------------------------- */
@media print{
  .nav,.mega,.cine,.scroll-cue,.cine-prog,#mark,.aura,.band,.marquee,.motion-btn,.skip,.curtain{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .sec{padding:18pt 0}
  .on-dark,.phero,.report,.builder .out{background:#fff!important;color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  .split,.tiers,.tiles,.builder{display:block}
}


/* ==========================================================================
   15 — service pages
   ========================================================================== */
.svc-hero{position:relative;background:var(--navy);color:var(--chalk);overflow:hidden;
  padding:calc(var(--nav-h) + var(--s6)) 0 var(--s6)}
.svc-hero .aura{width:min(620px,110vw);height:min(620px,110vw);right:6%;top:-24%;opacity:.34}
.svc-hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.svc-hero h1{max-width:14ch;margin-bottom:var(--s3)}
.svc-hero .lead{margin-bottom:var(--s4);color:var(--silver)}
.svc-hero .crumb a,.svc-hero .phero-meta{color:var(--silver)}
.scene{position:relative;aspect-ratio:1/1;width:100%;max-width:620px;justify-self:end}
.scene canvas{position:absolute;inset:0;width:100%;height:100%}
.scene .labels{position:absolute;inset:0;pointer-events:none}
.node-label{position:absolute;left:0;top:0;transform:translate(-50%,-50%);white-space:nowrap;
  font-size:var(--f-xs);font-weight:600;letter-spacing:.01em;padding:5px 11px;border-radius:999px;
  background:rgba(7,13,26,.72);border:1px solid var(--line-d);color:var(--chalk);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);will-change:transform}
.node-label.core{background:var(--accent,#2C63F6);border-color:transparent;color:#fff;font-weight:650}
.node-label.dim{opacity:.42}
@media (max-width:900px){
  .svc-hero .wrap{grid-template-columns:1fr}
  .scene{justify-self:stretch;max-width:none;aspect-ratio:4/3;order:-1;margin-bottom:var(--s3)}
  .node-label{font-size:11px;padding:4px 9px}
}
@media (max-width:520px){.scene{aspect-ratio:1/1}}

/* responsibility matrix */
.matrix{width:100%;border-collapse:collapse;font-size:var(--f-sm)}
.matrix th,.matrix td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.matrix thead th{font-size:var(--f-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:2px solid var(--ink)}
.matrix tbody th{font-weight:650;font-size:var(--f-md);width:26%}
.matrix td:last-child{color:var(--ink-3)}
.matrix tbody tr:hover{background:var(--white)}
@media (max-width:760px){
  .matrix,.matrix tbody,.matrix tr,.matrix td,.matrix th{display:block;width:auto}
  .matrix thead{display:none}
  .matrix tbody tr{border-bottom:1px solid var(--line);padding:12px 0}
  .matrix th,.matrix td{border:0;padding:4px 0}
  .matrix td::before{content:attr(data-l);display:block;font-size:var(--f-xs);text-transform:uppercase;
    letter-spacing:.06em;color:var(--ink-3);margin-bottom:2px}
}

/* severity bars */
.sev{display:grid;gap:14px}
.sev-row{display:grid;grid-template-columns:88px 1fr 44px;align-items:center;gap:14px;font-size:var(--f-sm)}
.sev-bar{height:10px;border-radius:3px;background:rgba(185,196,212,.16);overflow:hidden}
.sev-bar i{display:block;height:100%;border-radius:3px;background:var(--c,#0E74E8);width:0;
  transition:width 1.1s var(--ease)}
.in .sev-bar i{width:var(--w,40%)}
.sev-row b{text-align:right;font-variant-numeric:tabular-nums}

/* stage explorer */
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.stages button{background:var(--white);padding:20px 18px;text-align:left;cursor:pointer;display:grid;gap:6px;
  transition:background-color .25s}
.stages button:hover{background:#F7F9FC}
.stages button[aria-selected="true"]{background:var(--ink);color:var(--white)}
.stages button b{font-size:var(--f-md);font-weight:650}
.stages button span{font-size:var(--f-xs);color:var(--ink-3)}
.stages button[aria-selected="true"] span{color:rgba(255,255,255,.72)}
.stage-body{background:var(--white);border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;
  padding:clamp(26px,3.4vw,44px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(24px,4vw,56px)}
@media (max-width:820px){.stages{grid-template-columns:1fr 1fr}.stage-body{grid-template-columns:1fr}}

/* team + hiring cards */
.teams{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px}
.team{background:var(--white);padding:32px 28px;display:grid;gap:12px;align-content:start;box-shadow:0 0 0 1px var(--line)}
.team .mark{width:52px;height:4px;border-radius:2px;background:var(--tone,var(--grad))}
.team h3{font-size:var(--f-xl);font-weight:660;letter-spacing:-.01em}
.team p{color:var(--ink-3);font-size:var(--f-sm)}
.team .pills li{background:var(--porcelain)}
.hire{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s3)}
.hire div{border:1px solid var(--line);border-radius:14px;padding:24px 22px;background:var(--white)}
.hire b{display:block;font-size:var(--f-lg);font-weight:650;margin-bottom:6px}
.hire span{font-size:var(--f-sm);color:var(--ink-3)}

/* compact contact block */
.mini{background:var(--navy);color:var(--chalk);position:relative;overflow:hidden;padding:var(--s7) 0}
.mini .aura{width:min(560px,110vw);height:min(560px,110vw);left:-8%;top:-40%;opacity:.3}
.mini .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.mini .wrap{grid-template-columns:1fr}}


/* ==========================================================================
   16 — site search
   ========================================================================== */
.search-btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:9px 11px;font-size:.875rem;border-radius:999px;
  border:1px solid transparent;cursor:pointer;opacity:.76;font-size:var(--f-sm);transition:opacity .25s,border-color .25s}
.search-btn:hover{opacity:1;border-color:currentColor}
.search-btn kbd{font:inherit;font-size:11px;opacity:.7;border:1px solid currentColor;border-radius:5px;
  padding:1px 5px;line-height:1.5}
@media (max-width:1080px){.search-btn kbd{display:none}}

.search-overlay{position:fixed;inset:0;z-index:200;display:grid;justify-items:center;align-content:start;
  padding:clamp(60px,12vh,140px) var(--gut) var(--gut);background:rgba(7,13,26,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s}
.search-overlay[data-open="true"]{opacity:1;visibility:visible}
.search-panel{width:min(680px,100%);background:var(--white);color:var(--ink);border-radius:18px;
  box-shadow:0 40px 100px -30px rgba(7,13,26,.6);overflow:hidden;transform:translateY(-10px);
  transition:transform .3s var(--ease)}
.search-overlay[data-open="true"] .search-panel{transform:none}
.search-field{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.search-field svg{flex:none;opacity:.5}
.search-field input{flex:1;font:inherit;font-size:var(--f-lg);border:0;background:none;padding:6px 0;color:var(--ink)}
.search-field input:focus{outline:none}
.search-field button{font-size:var(--f-xs);border:1px solid var(--line);border-radius:6px;padding:4px 8px;
  color:var(--ink-3);cursor:pointer}
.search-results{max-height:min(52vh,460px);overflow:auto;padding:8px}
.search-results a{display:block;padding:13px 16px;border-radius:10px;text-decoration:none}
.search-results a:hover,.search-results a.sel{background:var(--porcelain)}
.search-results b{display:block;font-weight:640;margin-bottom:3px}
.search-results span{display:block;font-size:var(--f-sm);color:var(--ink-3)}
.search-results mark{background:#DCE8FF;color:inherit;border-radius:3px;padding:0 2px}
.search-empty{padding:28px 22px;color:var(--ink-3);font-size:var(--f-sm)}
.search-foot{display:flex;gap:18px;padding:12px 22px;border-top:1px solid var(--line);
  font-size:var(--f-xs);color:var(--ink-3)}

/* ==========================================================================
   17 — legal / long-form pages
   ========================================================================== */
.prose{max-width:74ch}
.prose h2{font-size:var(--f-xl);font-weight:660;letter-spacing:-.01em;margin:var(--s5) 0 var(--s2)}
.prose h3{font-size:var(--f-md);font-weight:650;margin:var(--s3) 0 6px}
.prose p{color:var(--ink-2);margin-bottom:var(--s2)}
.prose ul{display:grid;gap:9px;margin:0 0 var(--s3)}
.prose li{position:relative;padding-left:22px;color:var(--ink-2)}
.prose li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:2px;background:var(--cobalt)}
.prose a{color:var(--cobalt-d)}
.prose .updated{font-size:var(--f-sm);color:var(--ink-3);padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.toc{position:sticky;top:calc(var(--nav-h) + 28px);align-self:start;display:grid;gap:2px}
.toc a{display:block;padding:8px 0 8px 16px;text-decoration:none;color:var(--ink-2);font-size:var(--f-sm);
  border-left:2px solid var(--line);transition:color .3s,border-color .3s}
.toc a:hover{color:var(--ink);border-color:var(--ink-3)}
@media (max-width:900px){.toc{display:none}}


/* ==========================================================================
   18 — richer surfaces  (responsibility split, team cards, ambient motion)
   ========================================================================== */

/* scroll progress */
.scroll-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:150;
  background:var(--grad);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .12s linear;pointer-events:none}

/* ambient drift behind light sections */
.sec.on-light,.sec.on-white{position:relative;overflow:hidden}
.sec.on-light>*,.sec.on-white>*{position:relative;z-index:1}
.sec.on-light::before,.sec.on-white::before{content:"";position:absolute;z-index:0;
  width:52vw;height:52vw;max-width:720px;max-height:720px;right:-14%;top:-22%;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(18,181,234,.15),rgba(123,63,228,.12) 42%,transparent 70%);
  filter:blur(30px);animation:drift 26s ease-in-out infinite alternate;pointer-events:none}
.sec.on-white::before{left:-16%;right:auto;top:auto;bottom:-26%;
  background:radial-gradient(circle at 60% 40%,rgba(247,84,98,.10),rgba(123,63,228,.12) 45%,transparent 72%)}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-5%,6%,0) scale(1.12)}}
html.no-motion .sec.on-light::before,html.no-motion .sec.on-white::before{animation:none}

/* cards: shared lift + tracked sheen */
.tile,.team,.mrow,.hire div{transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .3s}
.tile::after,.team::after,.mrow::after{content:"";position:absolute;width:320px;height:320px;
  left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  opacity:0;transition:opacity .4s;background:radial-gradient(circle,rgba(14,116,232,.10),transparent 70%)}
.tile:hover::after,.team:hover::after,.mrow:hover::after{opacity:1}
.tile:hover,.hire div:hover{box-shadow:0 20px 50px -30px rgba(8,16,39,.5)}

/* ---- responsibility split (replaces the plain table) ---- */
.split-list{display:grid;gap:12px}
.mrow{position:relative;overflow:hidden;background:var(--white);border-radius:16px;
  box-shadow:0 0 0 1px var(--line);padding:24px 28px;
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,5fr);gap:10px 30px;align-items:start}
.mrow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .45s var(--ease)}
.mrow:hover::before{transform:none}
.mrow:hover{box-shadow:0 22px 55px -32px rgba(8,16,39,.5)}
.mrow h3{font-size:var(--f-md);font-weight:660;letter-spacing:-.005em;position:relative;z-index:1}
.mcell{display:grid;gap:7px;position:relative;z-index:1}
.mcell b{display:flex;align-items:center;gap:9px;font-size:var(--f-xs);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);font-weight:660}
.mcell b i{flex:none;width:11px;height:11px;border-radius:50%}
.mcell.us b i{background:var(--grad)}
.mcell.you b i{border:1.5px solid var(--ink-3)}
.mcell p{font-size:var(--f-sm);color:var(--ink-2);line-height:1.5}
.mcell.you p{color:var(--ink-3)}
.split-key{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:var(--s3);font-size:var(--f-sm);color:var(--ink-3)}
.split-key span{display:flex;align-items:center;gap:9px}
.split-key i{width:11px;height:11px;border-radius:50%}
.split-key .us i{background:var(--grad)}
.split-key .you i{border:1.5px solid var(--ink-3)}
@media (max-width:860px){
  .mrow{grid-template-columns:1fr;gap:14px;padding:22px 20px}
  .mrow h3{padding-bottom:4px;border-bottom:1px solid var(--line-2)}
}

/* ---- team cards ---- */
.teams{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.team{position:relative;overflow:hidden;background:var(--white);border-radius:20px;
  box-shadow:0 0 0 1px var(--line);padding:34px 30px 32px;display:grid;gap:14px;align-content:start}
.team::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--tone),color-mix(in srgb,var(--tone) 35%,#0E74E8))}
.team:hover{box-shadow:0 26px 60px -34px rgba(8,16,39,.5)}
.team .icon{position:relative;z-index:1;width:56px;height:56px;border-radius:17px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--tone) 14%,var(--white));color:var(--tone-d,var(--ink))}
.team .icon svg{width:26px;height:26px}
.team h3,.team p,.team ul{position:relative;z-index:1}
.team h3{font-size:var(--f-xl);font-weight:670;letter-spacing:-.012em}
.team p{color:var(--ink-3);font-size:var(--f-sm)}
.team .ticks li{font-size:var(--f-sm)}
.team .ticks li::before{background:var(--tone)}
.team .pills{margin:0}
.team .pills li{background:var(--porcelain);font-size:var(--f-xs);padding:7px 13px}
.team .tlink{margin-top:6px;position:relative;z-index:1;color:var(--tone-d,var(--cobalt-d))}

/* ---- rows: give the plain lists an accent ---- */
.rows>li,.rows>div{position:relative;padding-left:0;transition:padding-left .35s var(--ease)}
.rows>li::before{content:"";position:absolute;left:0;top:var(--s3);bottom:var(--s3);width:2px;
  background:var(--grad);transform:scaleY(0);transform-origin:50% 0;transition:transform .4s var(--ease)}
.rows>li:hover::before{transform:none}
.rows>li:hover{padding-left:18px}

/* ---- one-platform band ---- */
.platform{position:relative;overflow:hidden;border-radius:20px;padding:clamp(28px,4vw,52px);
  background:linear-gradient(150deg,var(--navy-2),var(--navy));box-shadow:0 0 0 1px var(--line-d)}
.platform .aura{width:520px;height:520px;right:-16%;top:-60%;opacity:.4}
.platform>*{position:relative;z-index:1}
.pflow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:var(--s4) 0 var(--s3)}
.pflow div{border:1px solid var(--line-d);border-radius:14px;padding:20px 18px;background:rgba(255,255,255,.03)}
.pflow b{display:block;font-size:var(--f-md);font-weight:650;margin-bottom:5px;color:var(--chalk)}
.pflow span{font-size:var(--f-sm);color:var(--silver)}
.pflow div+div{position:relative}
.pflow div+div::before{content:"";position:absolute;left:-11px;top:50%;width:8px;height:8px;
  border-top:1.5px solid var(--cobalt-l);border-right:1.5px solid var(--cobalt-l);
  transform:translateY(-50%) rotate(45deg)}
@media (max-width:760px){.pflow{grid-template-columns:1fr}.pflow div+div::before{left:50%;top:-11px;transform:translateX(-50%) rotate(135deg)}}


/* ==========================================================================
   19 — contact modal, learning centre, story, team, reviews
   ========================================================================== */
.modal{position:fixed;inset:0;z-index:250;display:grid;place-items:start center;overflow:auto;
  padding:clamp(24px,6vh,80px) var(--gut);background:rgba(6,16,31,.72);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s}
.modal[data-open="true"]{opacity:1;visibility:visible}
.modal-panel{position:relative;width:min(760px,100%);background:var(--white);color:var(--ink);
  border-radius:22px;box-shadow:0 50px 120px -40px rgba(6,16,31,.7);overflow:hidden;
  transform:translateY(14px) scale(.985);transition:transform .34s var(--ease)}
.modal[data-open="true"] .modal-panel{transform:none}
.modal-head{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--navy-2),var(--navy));
  color:var(--chalk);padding:30px 34px 26px}
.modal-head .aura{width:420px;height:420px;right:-26%;top:-90%;opacity:.45}
.modal-head>*{position:relative;z-index:1}
.modal-head p{color:var(--silver);font-size:var(--f-sm);margin-top:8px;max-width:48ch}
.modal-close{position:absolute;top:16px;right:16px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(175,194,214,.34);color:var(--chalk);display:grid;place-items:center;cursor:pointer;
  font-size:18px;line-height:1;transition:background-color .25s,border-color .25s}
.modal-close:hover{background:rgba(255,255,255,.1);border-color:var(--chalk)}
.modal .form{border:0;border-radius:0;box-shadow:none;padding:28px 34px 32px}
.modal .form-foot p{font-size:var(--f-xs)}

/* learning centre */
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.vcard{position:relative;overflow:hidden;background:var(--white);border-radius:18px;
  box-shadow:0 0 0 1px var(--line);display:grid;grid-template-rows:auto 1fr;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.vcard:hover{transform:translateY(-4px);box-shadow:0 26px 60px -34px rgba(8,16,39,.5)}
.vthumb{position:relative;aspect-ratio:16/9;background:linear-gradient(150deg,var(--navy-2),var(--navy));
  display:grid;place-items:center;overflow:hidden;cursor:pointer;border:0;width:100%;padding:0}
.vthumb img,.vthumb iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.vthumb .aura{width:320px;height:320px;opacity:.34}
.vthumb .play{position:relative;z-index:2;width:62px;height:62px;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;box-shadow:0 10px 30px -10px rgba(6,220,203,.7);transition:transform .3s var(--ease)}
.vthumb:hover .play{transform:scale(1.08)}
.vthumb .play::after{content:"";width:0;height:0;margin-left:4px;
  border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.vthumb .dur{position:absolute;z-index:2;right:12px;bottom:12px;font-size:var(--f-xs);font-weight:600;
  background:rgba(6,16,31,.78);color:var(--chalk);padding:4px 9px;border-radius:6px}
.vbody{padding:22px 24px 24px;display:grid;gap:8px;align-content:start}
.vbody .tag{font-size:var(--f-xs);letter-spacing:.07em;text-transform:uppercase;font-weight:660;color:var(--cobalt-d)}
.vbody h3{font-size:var(--f-lg);font-weight:650;letter-spacing:-.008em}
.vbody p{font-size:var(--f-sm);color:var(--ink-3)}

/* filter chips */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:var(--s5)}
.filters button{padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--white);
  font-size:var(--f-sm);font-weight:560;color:var(--ink-2);cursor:pointer;transition:all .25s}
.filters button:hover{border-color:var(--ink-3);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}

/* story timeline */
.story{display:grid;gap:0;counter-reset:yr}
.story li{display:grid;grid-template-columns:130px 1fr;gap:clamp(18px,3vw,44px);
  padding:var(--s4) 0;border-top:1px solid var(--line);position:relative}
.story li:last-child{border-bottom:1px solid var(--line)}
.story .yr{font-size:clamp(1.6rem,2.6vw,2.2rem);font-stretch:112%;font-weight:720;letter-spacing:-.02em;
  line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.story h3{font-size:var(--f-lg);font-weight:650;margin-bottom:6px}
.story p{color:var(--ink-2);max-width:62ch}
@media (max-width:640px){.story li{grid-template-columns:1fr;gap:10px}}

/* people grid */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.person{background:var(--white);border-radius:18px;box-shadow:0 0 0 1px var(--line);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.person:hover{transform:translateY(-4px);box-shadow:0 24px 56px -34px rgba(8,16,39,.5)}
.person .photo{aspect-ratio:1/1;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--navy-2),var(--navy));display:grid;place-items:center}
.person .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.person .photo .aura{width:260px;height:260px;opacity:.4}
.person .photo .ini{position:relative;z-index:1;font-size:2.4rem;font-weight:720;font-stretch:114%;
  color:var(--chalk);opacity:.85;letter-spacing:-.02em}
.person .info{padding:20px 22px 22px;display:grid;gap:4px}
.person h3{font-size:var(--f-md);font-weight:660}
.person span{font-size:var(--f-sm);color:var(--ink-3)}

/* reviews */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.quote{position:relative;background:var(--white);border-radius:18px;box-shadow:0 0 0 1px var(--line);
  padding:30px 28px;display:grid;gap:16px;align-content:start}
.quote::before{content:"\201C";position:absolute;right:22px;top:6px;font-family:var(--serif);font-size:5rem;
  line-height:1;color:var(--cobalt-l);opacity:.35}
.quote p{font-size:var(--f-lg);line-height:1.5;position:relative;z-index:1}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.quote .who i{width:38px;height:38px;border-radius:50%;background:var(--grad);display:grid;place-items:center;
  color:#fff;font-style:normal;font-weight:660;font-size:var(--f-sm);flex:none}
.quote .who b{display:block;font-weight:640;font-size:var(--f-sm)}
.quote .who span{font-size:var(--f-xs);color:var(--ink-3)}
.placeholder{border:1px dashed var(--line);border-radius:14px;padding:18px 20px;background:rgba(255,255,255,.5);
  font-size:var(--f-sm);color:var(--ink-3)}


/* ==========================================================================
   20 — icon cards
   ========================================================================== */
.icards{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:20px}
.icard{--hue:#0E74E8;position:relative;overflow:hidden;background:var(--white);border-radius:20px;
  box-shadow:0 0 0 1px var(--line);padding:28px 26px 26px;display:grid;gap:12px;align-content:start;
  text-decoration:none;color:inherit;isolation:isolate;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease)}
.icard::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.5;
  background:linear-gradient(135deg,color-mix(in srgb,var(--hue) 13%,transparent),transparent 58%)}
.icard::after{content:"";position:absolute;z-index:-1;right:-70px;bottom:-70px;width:230px;height:230px;
  border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--hue) 20%,transparent),transparent 68%);
  opacity:.55;transition:transform .6s var(--ease),opacity .4s}
.icard:hover{transform:translateY(-5px);box-shadow:0 28px 62px -34px rgba(8,16,39,.45)}
.icard:hover::after{transform:scale(1.18);opacity:.85}
.icard .ic{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--hue) 15%,var(--white));color:var(--hue);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hue) 22%,transparent)}
.icard .ic svg{width:24px;height:24px}
.icard h3{font-size:var(--f-lg);font-weight:660;letter-spacing:-.01em}
.icard p{color:var(--ink-2);font-size:var(--f-sm);line-height:1.55}
.icard .more{margin-top:6px;display:inline-flex;align-items:center;gap:8px;font-size:var(--f-sm);
  font-weight:650;color:var(--hue)}
.icard .more::after{content:"";width:7px;height:7px;border-top:1.6px solid currentColor;
  border-right:1.6px solid currentColor;transform:rotate(45deg);transition:transform .3s var(--ease)}
.icard:hover .more::after{transform:rotate(45deg) translate(3px,-3px)}
.icard .via{display:inline-flex;align-items:center;gap:8px;margin-top:2px;font-size:var(--f-xs);
  font-weight:660;color:var(--hue)}
.icard .via::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--hue)}
.icard .wm{position:absolute;z-index:-1;right:14px;bottom:8px;width:120px;height:120px;opacity:.07;color:var(--hue)}
.icard .wm svg{width:100%;height:100%}
.on-dark .icard{background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line-d);color:var(--chalk)}
.on-dark .icard p{color:var(--silver)}
.on-dark .icard .ic{background:color-mix(in srgb,var(--hue) 22%,transparent);color:var(--chalk)}

/* note callout */
.note-card{display:grid;gap:8px;border-radius:16px;padding:22px 24px;background:var(--white);
  box-shadow:0 0 0 1px var(--line);border-left:3px solid var(--cobalt)}
.note-card b{font-weight:660}
.note-card p{color:var(--ink-2);font-size:var(--f-sm);max-width:70ch}
.on-dark .note-card{background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line-d);border-left-color:var(--cobalt-l)}
.on-dark .note-card p{color:var(--silver)}
.price-tag{display:inline-flex;align-items:center;gap:8px;font-size:var(--f-xs);font-weight:660;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--cobalt) 12%,var(--white));color:var(--cobalt-d);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cobalt) 24%,transparent)}
.price-tag.free{background:color-mix(in srgb,#0FA47F 12%,var(--white));color:#0B7357;
  box-shadow:inset 0 0 0 1px rgba(15,164,127,.25)}


/* ==========================================================================
   21 — assistant
   ========================================================================== */
.bot-launch{position:fixed;right:22px;bottom:22px;z-index:180;display:inline-flex;align-items:center;gap:10px;
  padding:12px 20px 12px 14px;border-radius:999px;background:var(--navy);color:var(--chalk);cursor:pointer;
  box-shadow:0 18px 44px -18px rgba(6,16,31,.75),inset 0 0 0 1px rgba(175,194,214,.18);
  font-size:var(--f-sm);font-weight:620;transition:transform .3s var(--ease),opacity .25s}
.bot-launch img{width:26px;height:26px}
.bot-launch:hover{transform:translateY(-2px)}
.bot-launch.hidden{opacity:0;pointer-events:none;transform:translateY(8px)}
@media (max-width:520px){.bot-launch{right:14px;bottom:14px;padding:12px 16px 12px 12px}}

.bot-panel{position:fixed;right:22px;bottom:22px;z-index:185;width:min(392px,calc(100vw - 28px));
  height:min(600px,calc(100dvh - 40px));display:flex;flex-direction:column;overflow:hidden;
  background:var(--white);border-radius:22px;box-shadow:0 40px 90px -34px rgba(6,16,31,.7),0 0 0 1px var(--line);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);transform-origin:100% 100%;
  transition:opacity .3s var(--ease),transform .34s var(--ease),visibility .3s}
.bot-panel.open{opacity:1;visibility:visible;transform:none}
@media (max-width:520px){.bot-panel{right:10px;bottom:10px;height:min(560px,calc(100dvh - 20px))}}

.bot-head{position:relative;overflow:hidden;flex:none;display:flex;align-items:center;gap:12px;
  padding:18px 20px;background:linear-gradient(150deg,var(--navy-2),var(--navy));color:var(--chalk)}
.bot-head .aura{width:300px;height:300px;right:-30%;top:-120%;opacity:.5}
.bot-head>div{position:relative;z-index:1}
.bot-head b{display:block;font-weight:660;font-size:var(--f-md)}
.bot-head span{font-size:var(--f-xs);color:var(--silver)}
.bot-close{position:relative;z-index:2;margin-left:auto;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(175,194,214,.3);color:var(--chalk);cursor:pointer;font-size:17px;line-height:1}
.bot-close:hover{background:rgba(255,255,255,.1)}

.bot-log{flex:1;overflow-y:auto;padding:18px 18px 8px;display:flex;flex-direction:column;gap:14px;
  background:var(--porcelain)}
.bot-msg{display:flex;flex-direction:column;gap:8px;max-width:92%}
.bot-you{align-self:flex-end;align-items:flex-end}
.bot-bubble{padding:12px 15px;border-radius:16px;font-size:var(--f-sm);line-height:1.55;
  background:var(--white);box-shadow:0 0 0 1px var(--line);color:var(--ink)}
.bot-you .bot-bubble{background:var(--grad);color:#fff;box-shadow:none;border-bottom-right-radius:6px}
.bot-bot .bot-bubble{border-bottom-left-radius:6px}
.bot-links{display:flex;flex-wrap:wrap;gap:7px}
.bot-links a{font-size:var(--f-xs);font-weight:620;text-decoration:none;padding:7px 13px;border-radius:999px;
  background:var(--white);color:var(--cobalt-d);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cobalt) 28%,transparent)}
.bot-links a:hover{background:color-mix(in srgb,var(--cobalt) 10%,var(--white))}
.bot-chips{display:flex;flex-wrap:wrap;gap:7px}
.bot-chips button{font-size:var(--f-xs);font-weight:560;padding:7px 13px;border-radius:999px;cursor:pointer;
  background:var(--white);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);transition:all .2s}
.bot-chips button:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-3)}
.bot-typing .bot-bubble{display:flex;gap:4px;align-items:center;padding:14px 16px}
.bot-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:blink 1.2s infinite}
.bot-typing i:nth-child(2){animation-delay:.15s}
.bot-typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.bot-form{flex:none;display:flex;gap:8px;padding:14px 16px;background:var(--white);border-top:1px solid var(--line)}
.bot-form input{flex:1;font:inherit;font-size:var(--f-sm);padding:12px 14px;border-radius:12px;
  border:1px solid #A6B2C6;color:var(--ink);background:var(--white)}
.bot-form input:focus{outline:2px solid var(--cobalt);outline-offset:1px;border-color:var(--cobalt)}
.bot-form button{flex:none;width:44px;border-radius:12px;background:var(--grad);color:#fff;cursor:pointer;
  font-size:18px;line-height:1}
.bot-form button:hover{filter:brightness(1.06)}
@media print{.bot-launch,.bot-panel{display:none!important}}


/* ==========================================================================
   22 — form polish + the switching band
   ========================================================================== */
.form{position:relative;overflow:hidden}
.form::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad)}
.form{padding-top:calc(clamp(26px,4vw,46px) + 6px)}
.f label{display:flex;align-items:center;gap:6px}
.f label .req{color:var(--magenta);font-weight:700}
.f input,.f select,.f textarea{border-radius:12px;background:#FBFCFE}
.f input:hover,.f select:hover,.f textarea:hover{background:var(--white)}
.f input:focus,.f select:focus,.f textarea:focus{background:var(--white)}
.f .hint{font-size:var(--f-xs);color:var(--ink-3)}

/* quick-pick chips above the form */
.form-pick{grid-column:1/-1;display:grid;gap:10px}
.form-pick>span{font-weight:600;font-size:var(--f-sm)}
.form-pick .opts button{padding:10px 16px;font-size:var(--f-xs)}
.form-pick .opts button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* what happens next */
.next{display:grid;gap:0;margin-top:var(--s4)}
.next li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--line);
  align-items:start}
.next li:last-child{border-bottom:1px solid var(--line)}
.next i{width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;font-style:normal;
  display:grid;place-items:center;font-size:var(--f-xs);font-weight:700}
.next b{display:block;font-weight:640;font-size:var(--f-sm)}
.next span{font-size:var(--f-sm);color:var(--ink-3)}
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:var(--s3);font-size:var(--f-xs);color:var(--ink-3)}
.trust span{display:flex;align-items:center;gap:7px}
.trust span::before{content:"";width:14px;height:8px;border-left:2px solid var(--cobalt);
  border-bottom:2px solid var(--cobalt);transform:rotate(-45deg) translateY(-2px)}
.on-dark .trust{color:var(--silver)}

/* switching band on the home page */
.switch-band{position:relative;overflow:hidden;background:var(--navy);color:var(--chalk);padding:var(--s7) 0}
.switch-band .aura{width:min(720px,120vw);height:min(720px,120vw);right:-14%;top:-46%;opacity:.4}
.switch-band .wrap{position:relative;z-index:2}
.switch-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:var(--s5)}
.switch-card{position:relative;overflow:hidden;border-radius:18px;padding:28px 26px;
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px var(--line-d);
  display:grid;gap:10px;align-content:start;text-decoration:none;color:inherit;
  transition:transform .35s var(--ease),background-color .3s}
.switch-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--hue,var(--grad));
  transform:scaleY(0);transform-origin:50% 0;transition:transform .45s var(--ease)}
.switch-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.075)}
.switch-card:hover::before{transform:none}
.switch-card .q{font-size:var(--f-lg);font-weight:650;letter-spacing:-.01em;line-height:1.25}
.switch-card p{font-size:var(--f-sm);color:var(--silver)}
.switch-card .go{margin-top:6px;font-size:var(--f-sm);font-weight:640;color:var(--cobalt-l);
  display:inline-flex;align-items:center;gap:8px}
.switch-card .go::after{content:"";width:7px;height:7px;border-top:1.6px solid currentColor;
  border-right:1.6px solid currentColor;transform:rotate(45deg);transition:transform .3s var(--ease)}
.switch-card:hover .go::after{transform:rotate(45deg) translate(3px,-3px)}
.offer{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:var(--s5);
  padding:22px 26px;border-radius:16px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line-d)}
.offer b{font-size:var(--f-lg);font-weight:660}
.offer p{font-size:var(--f-sm);color:var(--silver);flex:1 1 320px}