/* ============================================================
   TORPEDO ENTERTAINMENT: SHARED BASE STYLESHEET
   Common rules for every page: palette tokens, reset, type,
   header/nav, mobile menu, hero scaffold, sections, marquee,
   bento, method, CTA form, footer, media queries, fallbacks.
   Page-specific overrides stay inside each page's own <style>
   block, which loads AFTER this file, so pages may re-tint
   accents and re-layout components without touching the base.
   Embedded base64 image assets live at the very end of this
   file (see IMAGE ASSETS banner), keep them out of the way.
   ============================================================ */

:root{
  --torpedo-black:#050508;
  --abyss-navy:#060D1A;
  --abyss-deep:#050A14;
  --royal-velocity:#123D91;
  --arctic-blue:#C7F1FF;
  --deep-ocean:#102756;
  --volt-blue:#3C63FF;
  --polar-mist:#F3FCFF;
  --velocity-blue:#3C63FF;
  --lime:#83BF00;
  --coral:#FF7A5C;
  --lavender:#B56CFF;
  --white:#fff;
  --paper-50:#F4F8FC;
  --paper-100:#EBF1F8;
  --ink-55:#48546B;
  --ink-40:#727E93;
  /* single source for the wordmark descriptor and the head icon */
  --brand-ink:#8AA6FF;
  --bg:var(--abyss-navy);
  --bg-alt:#070E22;
  --surface:#0e1c3c;
  --fg:#eaf1ff;
  --fg-muted:rgba(224,234,255,.66);
  --fg-subtle:rgba(224,234,255,.44);
  --border:rgba(150,180,255,.14);
  --border-strong:rgba(150,180,255,.24);
  --grid:rgba(150,180,255,.06);
  --brand-deep:var(--royal-velocity);
  --brand-dark:var(--abyss-navy);
  --accent:var(--velocity-blue);
  --accent-deep:#2A63C7;
  --accent-ink:#8AA6FF;
  --accent-soft:rgba(60,99,255,.22);
  /* unified outline-text stroke on dark, one single colour everywhere */
  --stroke-ghost:rgba(150,180,255,.28);
  --stroke-ghost-soft:rgba(150,180,255,.28);
  --font-display:"League Spartan","Arial Narrow",system-ui,sans-serif;
  --font-body:"Jost",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --radius:22px;
  --radius-sm:14px;
  --pill:100px;
  --shell:min(1300px,92vw);
  --nav-h:96px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:240ms;
}
*,*::before,*::after{box-sizing:border-box}
/* Smooth scrolling is a desktop affordance. A touch device already scrolls smoothly by
   itself, and scroll-behavior only governs programmatic and anchor jumps there, so it
   buys nothing and delays every in page link.
   touch-action on the root is what actually stops pinch and double tap zoom on iOS,
   which has ignored user-scalable in the viewport tag since iOS 10. Panning in both
   directions stays allowed, so ordinary scrolling is untouched. */
/* No vertical rubber band: the fixed art stack made every top overscroll mode visible
   (the band, the catch jolt), and the owner chose stillness over the bounce. Honoured
   from iOS 16; older Safari still bounces and is covered by the sbg-fx overscroll ride.
   Native pull-to-refresh goes away with it. */
html{-webkit-text-size-adjust:100%;overflow-anchor:none;touch-action:pan-x pan-y;overscroll-behavior-y:none}
body{overscroll-behavior-y:none}
@media (pointer:fine){html{scroll-behavior:smooth}}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img,svg{display:block;max-width:100%}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
/* ===== scrollbars =====
   Blink and WebKit get the pseudo elements, Firefox gets the standard properties.
   Chromium ignores the pseudo elements once scrollbar-width or scrollbar-color is set
   on the same element, so the two are kept apart by a feature query.
   Coarse pointers keep their native overlay scrollbars. */
@media (pointer:fine){
  *::-webkit-scrollbar{width:11px;height:11px}
  *::-webkit-scrollbar-track{background:var(--abyss-deep)}
  *::-webkit-scrollbar-thumb{background:rgba(60,99,255,.5);border:3px solid transparent;
    background-clip:padding-box;border-radius:100px}
  *::-webkit-scrollbar-thumb:hover{background:rgba(60,99,255,.8);background-clip:padding-box}
  *::-webkit-scrollbar-thumb:active{background:rgba(120,170,255,.95);background-clip:padding-box}
  *::-webkit-scrollbar-corner{background:transparent}
  *::-webkit-scrollbar-button{display:none;width:0;height:0}

  /* inside panels the track disappears so it does not square off the rounded corners */
  .cselect-list::-webkit-scrollbar{width:9px}
  .cselect-list::-webkit-scrollbar-track{background:transparent}
  .cselect-list::-webkit-scrollbar-thumb{background:rgba(130,165,235,.34);border-width:2px;background-clip:padding-box}
  .cselect-list::-webkit-scrollbar-thumb:hover{background:rgba(60,99,255,.85);background-clip:padding-box}

  @supports not selector(::-webkit-scrollbar){
    html{scrollbar-width:thin;scrollbar-color:rgba(60,99,255,.62) var(--abyss-deep)}
    .cselect-list{scrollbar-width:thin;scrollbar-color:rgba(130,165,235,.42) transparent}
  }
}
.shell{width:var(--shell);margin-inline:auto}
section{position:relative}
.i{width:16px;height:16px;flex:none;transition:transform var(--dur) var(--ease)}
.lead{font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--fg-muted);line-height:1.62}
/* ===== global grid frame (back layer, offset) ===== */
.frame{position:fixed;inset:0;z-index:0;pointer-events:none}
.frame span{position:absolute;top:0;bottom:0;width:1px;background:var(--grid)}
.frame span:nth-child(1){left:10%}
.frame span:nth-child(2){left:33%}
.frame span:nth-child(3){left:63%}
.frame span:nth-child(4){left:87%}
main{position:relative;z-index:1}
@media (max-width:720px){.frame span:nth-child(2),.frame span:nth-child(3){display:none}.frame span:nth-child(1){left:6%}.frame span:nth-child(4){left:94%}}
/* soft custom brand gradient bg (hero) - no image, single blue hue */
.atmo-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background-color:var(--abyss-navy);
  background:
    radial-gradient(120% 92% at 80% 6%,rgba(60,99,255,.20),transparent 52%),
    radial-gradient(92% 84% at 96% 40%,rgba(60,99,255,.11),transparent 58%),
    radial-gradient(96% 90% at 8% 26%,rgba(30,62,168,.22),transparent 60%),
    radial-gradient(80% 90% at 24% 104%,rgba(60,99,255,.09),transparent 60%),
    var(--hero-bg) center / cover no-repeat,
    linear-gradient(164deg,var(--abyss-navy) 0%,var(--bg-alt) 46%,var(--abyss-deep) 100%)}
.hero-glow{position:absolute;top:0;bottom:-80px;left:0;right:0;z-index:1;pointer-events:none;background:var(--hero-glow) center bottom / cover no-repeat;mix-blend-mode:screen}
.atmo-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(9,20,39,.62) 0%,rgba(9,20,39,.34) 34%,rgba(9,20,39,.06) 62%,transparent 80%)}
/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-weight:500;font-size:.94rem;padding:.82em 1.35em;
  border-radius:var(--pill);background:var(--fg);color:#fff;border:1px solid transparent;touch-action:manipulation;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px -16px rgba(5,5,8,.65)}
.btn:active{transform:translateY(0)}
.btn:hover .i{transform:translateX(3px)}
.nav-cta:hover,.mobile-menu .btn.accent:hover{transform:none}
.btn.accent{background:var(--accent);color:#fff}
.btn.accent:hover{background:color-mix(in srgb,var(--accent) 84%,#000)}
/* fx palette: ghost ring / orbit / glows; pages override these RGB triplets to match their accent */
:root{--fx-deep:60,99,255;--fx-mid:96,141,255;--fx-hi:170,200,255;--acc:60,99,255;--acc-lit:120,150,255}
/* outline buttons: diagonal gradient ring with end accents melting into the bg */
.btn.ghost{position:relative;color:#fff;border-color:transparent;
  background:
    radial-gradient(150px 175% at 2% 86%,rgba(var(--fx-deep),.34),transparent 70%),
    radial-gradient(175px 195% at 97% 12%,rgba(var(--fx-deep),.24),transparent 74%),
    rgba(6,10,22,.30);
  box-shadow:0 0 30px -6px rgba(var(--fx-deep),.55);
  -webkit-backdrop-filter:blur(14px) saturate(1.5) brightness(1.1);backdrop-filter:blur(14px) saturate(1.5) brightness(1.1)}
.btn.ghost::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(65deg,
    rgba(var(--fx-hi),.95) 0%,
    rgba(var(--fx-mid),.45) 13%,
    rgba(var(--fx-deep),.13) 36% 58%,
    rgba(var(--fx-mid),.34) 79%,
    rgba(var(--fx-hi),.82) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude}

.btn.ghost:hover{color:#fff;border-color:transparent;
  background:
    radial-gradient(150px 175% at 2% 86%,rgba(var(--fx-deep),.48),transparent 72%),
    radial-gradient(175px 195% at 97% 12%,rgba(var(--fx-deep),.36),transparent 76%),
    rgba(6,10,22,.38);
  box-shadow:0 0 34px -6px rgba(var(--fx-deep),.7)}
.btn.lg{padding:.95em 1.6em;font-size:1rem}
.textlink{display:inline-flex;align-items:center;gap:.45em;font-weight:500;color:var(--accent-ink);border-bottom:1px solid transparent;transition:border-color var(--dur)}
.textlink:hover{border-color:currentColor}
.textlink:hover .i{transform:translateX(3px)}
/* ===== header ===== */
/* top island (iPhone-brow style): collapsed brow docked to the top edge, expands on click */
.island{position:relative;z-index:65;font-family:var(--font-body);flex:none}
header{position:sticky;top:0;z-index:60;--hdr-top:26px;padding:var(--hdr-top) 0 14px;transition:padding var(--dur) var(--ease)}
header::before{content:"";position:absolute;inset:0;background:transparent;z-index:-1;transition:background var(--dur),box-shadow var(--dur)}
header.scrolled{--hdr-top:14px;padding:var(--hdr-top) 0}
header.scrolled::before{background:rgba(9,20,39,.92);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
/* active (scrolled) header: outline-only nav cluster + icons, no fill */
header.scrolled .navcluster{background:transparent}
header.scrolled .navtools .dd:not(.open) .iconbtn{background:transparent}
/* resting header (before scroll): soft blue glow + shimmering gradient border */
header:not(.scrolled) .navtools .iconbtn{box-shadow:0 0 26px -9px rgba(60,99,255,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.navtools .iconbtn::before, .navcluster::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 36%,rgba(60,99,255,.4) 47%,rgba(60,99,255,.2) 52%,transparent 62%),linear-gradient(140deg,rgba(60,99,255,.26),rgba(60,99,255,.13) 50%,rgba(60,99,255,.24));
  background-size:260% 100%,100% 100%;background-repeat:no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:kpiShimmer 5s linear infinite;transition:opacity var(--dur) var(--ease)}
header.scrolled .navtools .iconbtn::before, header.scrolled .navcluster::before{opacity:0}
@media (min-width:1100px){
  header:not(.scrolled) .navcluster{box-shadow:0 0 46px -12px rgba(60,99,255,.55),inset 0 1px 0 rgba(255,255,255,.07)}
}
@media (max-width:1099px){
  .navcluster::before{opacity:0}
}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.brand-logo{height:43px;width:auto;flex:none;display:block}
.foot-brand .brand-logo{height:43px}
.navcluster{position:relative;display:flex;align-items:center;gap:6px;padding:5px 6px 5px 20px;border:1px solid rgba(255,255,255,.14);border-radius:var(--pill);background:rgba(9,20,39,.82)}
.navcluster .links{display:flex;align-items:center;gap:2px}
.navcluster .links > a{font-size:.9rem;color:rgba(255,255,255,.82);padding:8px 14px;border-radius:var(--pill);white-space:nowrap;transition:background var(--dur),color var(--dur)}
.navcluster .links > a:hover{color:#fff;background:rgba(255,255,255,.12)}
/* nav dropdowns (Who We Are, Products) */
.navdd{position:relative;display:flex}
.navdd-btn{display:inline-flex;align-items:center;gap:.34em;font-size:.9rem;color:rgba(255,255,255,.82);
  padding:8px 11px 8px 14px;border-radius:var(--pill);white-space:nowrap;transition:background var(--dur),color var(--dur)}
.navdd-btn:hover,.navdd.open .navdd-btn{color:#fff;background:rgba(255,255,255,.12)}
.navdd-btn .chev{width:13px;height:13px;flex:none;transition:transform var(--dur) var(--ease)}
.navdd.open .navdd-btn .chev{transform:rotate(180deg)}
.navdd-panel{position:absolute;top:calc(100% + 21px);left:50%;z-index:80;min-width:212px;padding:6px;
  border-radius:16px;background:rgba(9,20,39,.97);border:1px solid rgba(150,180,255,.18);
  box-shadow:0 30px 64px -24px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);transform-origin:top center;
  opacity:0;transform:translateX(-50%) translateY(-10px) scale(.98);pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
.navdd.open .navdd-panel{opacity:1;transform:translateX(-50%);pointer-events:auto}
.navdd-panel::before{content:"";position:absolute;top:-6px;left:50%;margin-left:-6px;width:12px;height:12px;transform:rotate(45deg);
  background:rgba(9,20,39,.97);border-left:1px solid rgba(150,180,255,.18);border-top:1px solid rgba(150,180,255,.18)}
.navdd-panel a{position:relative;z-index:1;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  font-size:.9rem;color:rgba(255,255,255,.82);white-space:nowrap;transition:background var(--dur),color var(--dur)}
.navdd-panel a:hover{background:rgba(255,255,255,.08);color:#fff}
.navdd-panel a .c-games{color:var(--lime)}
.navdd-panel a .c-one{color:var(--lavender)}
.navdd-panel a .c-ent{color:var(--volt-blue)}
.navcluster .sep{width:1px;height:22px;background:rgba(255,255,255,.2);margin:0 4px}
.navcluster .btn{padding:.6em 1.1em;white-space:nowrap}
.burger{display:none;width:44px;height:44px;flex:none;border-radius:12px;border:0;
  background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.burger span,.dd-close span{width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .26s var(--ease),opacity .2s}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{position:absolute;top:calc(100% - 4px);left:16px;right:16px;z-index:70;
  border-radius:18px;background:rgba(6,12,28,.98);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -24px rgba(0,0,0,.7);
  opacity:0;transform:translateY(-10px) scale(.98);transform-origin:top right;pointer-events:none;
  transition:opacity .26s var(--ease),transform .26s var(--ease)}
.mobile-menu.open{opacity:1;transform:none;pointer-events:auto}
.mm-scroll{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:inherit;
  overflow-y:auto;max-height:calc(100vh - 118px);max-height:calc(100dvh - 118px);overscroll-behavior:contain}
.mobile-menu::before{content:"";position:absolute;top:-6px;right:var(--tail,4vw);width:12px;height:12px;transform:rotate(45deg);
  background:rgba(9,20,39,.97);border-left:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.14)}
.mobile-menu a{color:rgba(255,255,255,.86);padding:14px 16px;border-radius:12px;font-size:1rem;transition:background var(--dur)}
.mobile-menu a:hover{background:rgba(255,255,255,.09);color:#fff}
.mobile-menu .btn{margin-top:18px;justify-content:center;color:#fff;border-radius:var(--pill);padding:0 1.35em;height:60px;flex:none}
/* tablets & small laptops: the menu is a right-side drawer, full height, inner scroll */
@media (min-width:601px) and (max-width:1099px){
  .mobile-menu{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(400px,58vw);height:100dvh;
    border-radius:0;border:0;border-left:1px solid rgba(255,255,255,.12);
    box-shadow:-40px 0 80px -30px rgba(0,0,0,.65);
    opacity:1;transform:translateX(102%);transition:transform .34s var(--ease)}
  .mobile-menu.open{transform:none}
  .mobile-menu::before{display:none}
  .mm-scroll{height:100%;max-height:none;padding:96px 18px calc(env(safe-area-inset-bottom,0px) + 24px)}
  /* the burger X floats above the drawer and doubles as its close control */
  .navbar .brand{position:relative;z-index:90}
  #burger{position:relative;z-index:90}
}
@media (min-width:1100px){.mobile-menu{display:none}}
/* the promo pill is the first thing to go: it buys the nav ~160px of room */
@media (max-width:1239px){.island{display:none}}
@media (max-width:1099px){
  .navcluster{padding:0;border:0;background:transparent}
  .navcluster .links,.navcluster .sep,.navcluster .nav-cta{display:none}
  .burger{display:flex}
  /* two-state header: below 1100px only the burger stays in the bar;
     language + login live inside the mobile menu (moved there by JS) */
  .navend .navtools{display:none}}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ===== header utilities: language + auth (round icons + dropdowns) ===== */
.navend{display:flex;align-items:center;gap:12px}
.navtools{display:flex;align-items:center;gap:8px}
.dd{position:relative}
.iconbtn{position:relative;width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;
  border:1px solid rgba(255,255,255,.14);background:rgba(9,20,39,.82);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.iconbtn:hover{background:rgba(18,30,58,.92);border-color:rgba(150,180,255,.34)}
.iconbtn .i{width:20px;height:20px}
.iconbtn .eyes-i{width:22px;height:auto;transform:none}
.dd.open .iconbtn{background:var(--accent-soft);border-color:var(--accent);color:#fff}
.dd-panel{position:absolute;top:calc(100% + 12px);right:0;z-index:80;
  border-radius:16px;background:rgba(9,20,39,.97);border:1px solid rgba(150,180,255,.18);
  box-shadow:0 30px 64px -24px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  opacity:0;transform:translateY(-10px) scale(.98);transform-origin:top right;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
.dd.open .dd-panel{opacity:1;transform:none;pointer-events:auto}
.dd-panel::before{content:"";position:absolute;top:-6px;right:14px;width:12px;height:12px;transform:rotate(45deg);
  background:rgba(9,20,39,.97);border-left:1px solid rgba(150,180,255,.18);border-top:1px solid rgba(150,180,255,.18)}
/* language list */
.dd-lang{width:216px;padding:6px}
.dd-lang .lang{position:relative;z-index:1;display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border-radius:10px;
  color:rgba(255,255,255,.82);font-size:.9rem;text-align:left;transition:background var(--dur),color var(--dur)}
.dd-lang .lang:hover{background:rgba(255,255,255,.08);color:#fff}
.dd-lang .lang .fl{font-size:1.1rem;line-height:1;width:22px;text-align:center;flex:none}
.dd-lang .lang .ck{margin-left:auto;width:16px;height:16px;flex:none;color:var(--accent-ink);opacity:0;transition:opacity var(--dur)}
.dd-lang .lang.on{background:var(--accent-soft);color:#fff}
.dd-lang .lang.on .ck{opacity:1}
/* auth panel */
.dd-auth{width:302px;padding:18px}
.dd-auth .tabs{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;
  background:rgba(9,20,39,.6);border:1px solid rgba(130,165,235,.18);margin-bottom:16px}
.dd-auth .tab{padding:8px 10px;border-radius:9px;font-size:.85rem;font-weight:500;color:rgba(255,255,255,.64);
  transition:background var(--dur),color var(--dur)}
.dd-auth .tab:hover{color:#fff}
.dd-auth .tab.on{background:var(--accent);color:#fff}
.dd-auth .field{position:relative;z-index:1;margin-bottom:12px}
.dd-auth label{display:block;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 6px}
.dd-auth input{width:100%;background:rgba(9,20,39,.72);border:1px solid rgba(130,165,235,.24);color:#fff;border-radius:10px;
  padding:calc(.72em + 1.5px) .85em calc(.72em - 1.5px);font:inherit;font-size:15px;transition:border-color var(--dur),box-shadow var(--dur),background var(--dur)}
.dd-auth input::placeholder{color:rgba(255,255,255,.4)}
.dd-auth input:focus{outline:none;border-color:var(--accent);background:rgba(9,20,39,.9);box-shadow:0 0 0 3px var(--accent-soft)}
.dd-auth .forgot{display:inline-block;margin:-2px 0 12px;font-size:.78rem;color:var(--accent-ink);border-bottom:1px solid transparent;transition:border-color var(--dur)}
.dd-auth .forgot:hover{border-color:currentColor}
.dd-auth .authbtn{position:relative;z-index:1;width:100%;justify-content:center;margin-top:2px}
.dd-auth .aux{position:relative;z-index:1;margin:13px 0 0;text-align:center;font-size:.8rem;color:rgba(255,255,255,.56)}
.dd-auth .aux a{color:var(--accent-ink);border-bottom:1px solid transparent;transition:border-color var(--dur)}
.dd-auth .aux a:hover{border-color:currentColor}
/* mode toggle: login vs register */
.dd-auth .reg-only{display:none}
.dd-auth.mode-register .reg-only{display:block}
.dd-auth.mode-register .login-only{display:none}
.dd-auth .authbtn .reg-only,.dd-auth .aux .reg-only{display:none}
.dd-auth.mode-register .authbtn .reg-only,.dd-auth.mode-register .aux .reg-only{display:inline}
.dd-auth.mode-register .authbtn .login-only,.dd-auth.mode-register .aux .login-only{display:none}
/* Password field: enlarged mask dots + visibility toggle */
.dd-auth .pw-wrap{position:relative}
.dd-auth input::-ms-reveal,.dd-auth input::-ms-clear{display:none}
.dd-auth input::-webkit-credentials-auto-fill-button,.dd-auth input::-webkit-strong-password-auto-fill-button,.dd-auth input::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;position:absolute;right:0;width:1px;height:1px;margin:0}
.dd-auth .field-pw input{padding-right:46px}
.dd-auth .pw-toggle{position:absolute;top:50%;right:0;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;background:transparent;border:0;color:rgba(255,255,255,.5);cursor:pointer;border-radius:10px;transition:color var(--dur)}
.dd-auth .pw-toggle:hover{color:rgba(255,255,255,.85)}
.dd-auth .pw-toggle svg{width:20px;height:20px}
.dd-auth .pw-toggle .pw-slash{display:none}
.dd-auth .pw-toggle.is-shown .pw-slash{display:block}
@media (max-width:440px){.dd-auth{width:min(76vw,302px)}.dd-lang{width:min(58vw,210px)}}
/* ===== HERO (dark, editorial) ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:stretch;overflow:hidden;color:#fff;
  margin-top:calc(-1 * var(--nav-h));padding:calc(var(--nav-h) + clamp(14px,2.4vh,36px)) 0 clamp(26px,4vh,52px)}
.hero .shell{position:relative;z-index:2;display:flex;align-items:stretch}
.hero-stage{width:100%;position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto 1fr;
  grid-template-areas:"." "copy" ".";align-items:stretch;column-gap:clamp(16px,2.6vw,44px)}
.hero-stage .hero-glow{grid-column:1/-1;grid-row:1/-1}
h1.hero-title{position:relative;margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:.9;
  font-size:clamp(3rem,6.6vw,6rem);color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.42)}
h1.hero-title .ac{color:var(--volt-blue)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-cta .btn.ghost{color:#fff;border-color:transparent}
.hero-cta .btn.ghost:hover{color:#fff;border-color:transparent}
/* hero main CTA: blue light runner tracing the contour + scattered glow.
   Parent .cta-fx carries drop-shadow (filters apply before the child mask, so the glow follows the visible arc). */
.hero-cta .btn.accent{position:relative}
.hero-cta .btn.accent .cta-fx{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  filter:drop-shadow(0 0 5px rgba(var(--fx-mid),.85)) drop-shadow(0 0 14px rgba(var(--fx-deep),.5))}
.hero-cta .btn.accent .cta-orbit{position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;overflow:hidden;
  padding:2px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude}
.hero-cta .btn.accent .cta-orbit::before{content:"";position:absolute;left:50%;top:50%;width:160%;aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(0deg);will-change:transform;
  background:conic-gradient(from 0deg,
    transparent 0 58%,
    rgba(var(--fx-deep),0) 62%,
    rgba(var(--fx-deep),.30) 74%,
    rgba(var(--fx-mid),.75) 83%,
    rgba(var(--fx-hi),.95) 89%,
    rgba(var(--fx-mid),.6) 95%,
    rgba(var(--fx-deep),.16) 98.5%,
    transparent 100%);
  animation:ctaOrbit 3.6s linear infinite}
@keyframes ctaOrbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hero-cta .btn.accent .cta-fx{display:none}}
/* hero accent buttons: soft shifting monochrome fill in the page accent */
.hero-cta .btn.accent{
  background:linear-gradient(115deg,
    color-mix(in srgb,var(--accent) 84%,#000) 0%,
    var(--accent) 36%,
    color-mix(in srgb,var(--accent) 80%,#fff) 54%,
    var(--accent) 72%,
    color-mix(in srgb,var(--accent) 84%,#000) 100%);
  background-size:240% 100%;
  animation:ctaFill 7.5s ease-in-out infinite}
.hero-cta .btn.accent:hover{
  background:linear-gradient(115deg,
    color-mix(in srgb,var(--accent) 88%,#000) 0%,
    color-mix(in srgb,var(--accent) 94%,#fff) 36%,
    color-mix(in srgb,var(--accent) 72%,#fff) 54%,
    color-mix(in srgb,var(--accent) 94%,#fff) 72%,
    color-mix(in srgb,var(--accent) 88%,#000) 100%);
  background-size:240% 100%}
@keyframes ctaFill{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){.hero-cta .btn.accent{animation:none}}

.hero-cta .btn{box-shadow:0 12px 30px -16px rgba(3,7,20,.72)}
.hero-cta .btn:hover{box-shadow:0 18px 40px -18px rgba(3,7,20,.82)}
@keyframes kpiShimmer{0%{background-position:235% 0,0 0}100%{background-position:-75% 0,0 0}}

/* --- rocket mascot --- */

@keyframes logoShimmer{0%,100%{filter:brightness(1) drop-shadow(0 0 0 rgba(90,165,255,0))}50%{filter:brightness(1.22) drop-shadow(0 0 1.5px rgba(90,165,255,.35))}}
.js .hl2{opacity:0}
.js .stage.in,.js .hl2.in{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
/* ===== section heads with ghost pretitle ===== */
.sec{padding:clamp(80px,10vw,132px) 0;border-top:1px solid var(--grid)}
.sec-head{position:relative;margin-bottom:60px;padding-top:.5em}
.sec-head h2{position:relative;z-index:1;font-size:clamp(2.1rem,5vw,3.5rem);line-height:.98;margin:0 0 18px;max-width:20ch}
.sec-head p{position:relative;z-index:1;max-width:56ch;margin:0}
#ecosystem .sec-head .lead{max-width:none}
/* hover: the accent border reveals radially from the bottom-left corner, flowing both ways until it closes */
@property --reveal{syntax:"<length>";inherits:false;initial-value:0px}
/* ===== METHOD - kinetic editorial index ===== */
.kx{border-top:1px solid var(--border-strong)}
.kx-row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,26ch);align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(26px,3vw,38px) clamp(16px,2vw,28px);border-bottom:1px solid var(--border);overflow:hidden}
.kx-row>*{position:relative;z-index:1}
.kx-idx{font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,5vw,5rem);line-height:.8;min-width:1.4em;font-variant-numeric:tabular-nums;color:transparent;-webkit-text-stroke:1.6px var(--stroke-ghost);transition:color .45s var(--ease),-webkit-text-stroke-color .45s var(--ease)}
.kx-name{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4.4vw,3.8rem);line-height:.92;letter-spacing:-.02em;color:var(--fg);transition:color .45s var(--ease),transform .45s var(--ease)}
.kx-desc{font-size:.92rem;color:var(--fg-muted);line-height:1.5;transition:color .45s var(--ease)}
.kx-row:hover .kx-idx{color:var(--velocity-blue);-webkit-text-stroke-color:transparent}
@media(max-width:760px){.kx-row{grid-template-columns:auto 1fr;gap:20px}.kx-desc{grid-column:1/-1}}
.ph{position:relative;display:block}
.ph img{width:100%;height:auto;display:block}
.fill{position:relative;display:block;font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(2.1rem,5vw,4rem)}
.line{position:relative;display:block;white-space:normal;overflow-wrap:break-word;overflow-wrap:anywhere}
.lbase{color:transparent;-webkit-text-stroke:1.4px var(--stroke-ghost)}
.ltop{position:absolute;left:0;top:0;white-space:normal;overflow-wrap:break-word;overflow-wrap:anywhere;color:#eef4ff;-webkit-text-stroke:1.4px transparent;clip-path:inset(0 var(--u,100%) 0 0)}
.ltop.hl-accent{color:var(--volt-blue)}
.meta{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;max-width:none;border-top:1px solid var(--border)}
/* scroll-driven glowing fill for the meta lines (colour matched to the block's blue text) */
.mg-h{position:absolute;top:-1px;left:0;height:2px;width:var(--mgh,0%);border-radius:2px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,rgba(60,99,255,.55),rgba(60,99,255,.95));
  box-shadow:0 0 14px 1px rgba(60,99,255,.7),0 0 5px rgba(60,99,255,.85)}
.mg-vl,.mg-v,.mg-v2,.mg-v3{position:absolute;top:-1px;width:2px;transform:translateX(-1px);border-radius:2px;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(60,99,255,.95),rgba(60,99,255,.32));
  box-shadow:0 0 14px 1px rgba(60,99,255,.65),0 0 5px rgba(60,99,255,.8)}
.mg-vl{left:0;height:var(--mgvl,0%)}
.mg-v{left:25%;height:var(--mgv,0%)}
.mg-v2{left:50%;height:var(--mgv2,0%)}
.mg-v3{left:75%;height:var(--mgv3,0%)}
/* mid screens: 2x2 so copy keeps a readable measure */
@media(max-width:1020px) and (min-width:641px){
  .meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mg-v,.mg-v3{display:none}
  .meta>div{position:relative}
  .meta>div:nth-of-type(n+3){border-top:1px solid var(--border)}
  /* 2x2: the row divider glows too; its halves reuse the freed 25% / 75% line vars */
  .meta>div:nth-of-type(3)::before,.meta>div:nth-of-type(4)::before{content:"";position:absolute;top:-1px;left:0;height:2px;border-radius:2px;z-index:2;pointer-events:none;
    background:linear-gradient(90deg,rgba(60,99,255,.55),rgba(60,99,255,.95));
    box-shadow:0 0 14px 1px rgba(60,99,255,.7),0 0 5px rgba(60,99,255,.85)}
  .meta>div:nth-of-type(3)::before{width:var(--mgv,0%)}
  .meta>div:nth-of-type(4)::before{width:var(--mgv3,0%)}
}
@media(max-width:640px){
  .meta{grid-template-columns:1fr}
  .mg-v,.mg-v2,.mg-v3,.mg-vl{display:none}
  /* stacked layout: the inner dividers become the separators above blocks 02-04 */
  .meta>div{position:relative}
  .meta>div+div::before{content:"";position:absolute;top:-1px;left:0;height:2px;border-radius:2px;z-index:2;pointer-events:none;
    background:linear-gradient(90deg,rgba(60,99,255,.55),rgba(60,99,255,.95));
    box-shadow:0 0 14px 1px rgba(60,99,255,.7),0 0 5px rgba(60,99,255,.85)}
  .meta>div:nth-of-type(2)::before{width:var(--mgv,0%)}
  .meta>div:nth-of-type(3)::before{width:var(--mgv2,0%)}
  .meta>div:nth-of-type(4)::before{width:var(--mgv3,0%)}
}
.meta>div{padding:28px 26px;border-left:1px solid var(--border)}
.meta .m-ic{display:block;color:var(--volt-blue);margin-bottom:15px}
.meta .m-ic svg{width:26px;height:26px;display:block}
@media(max-width:640px){.meta>div{padding:24px 0;border-left:0;border-top:1px solid var(--border)}.meta>div:first-child{border-top:0}}
.mnum{display:block;font-family:var(--font-display);font-weight:800;font-size:.78rem;letter-spacing:.18em;color:var(--fg-subtle);margin-bottom:14px}
.meta h3{font-family:var(--font-display);font-weight:700;font-size:1.12rem;margin:0 0 8px}
.meta p{margin:0;font-size:.95rem;color:var(--fg-muted);line-height:1.6;max-width:34ch}
@property --opfill{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes opborder{from{--opfill:0deg}to{--opfill:360deg}}
.eco-caps{margin:clamp(26px,3.5vw,42px) 0 clamp(34px,4.5vw,52px)}
/* ===== PROOF: radial carousel =====
   12 slots, 4 unique cards repeated 3 times, so 360/12 = 30deg per step and the
   loop closes without a seam. Card positions come from JS, everything else is CSS. */
.certs{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:44px;padding-top:32px;border-top:1px solid var(--border)}
/* ===== CLOSING / CTA / FOOTER ===== */
.closing{position:relative;z-index:1;color:#fff;overflow:hidden;background:var(--abyss-deep)}
/* Seamless CTA glow: two circles only (right-top + left-bottom); the footer sits inside
   .closing so the glow crosses the boundary. The circles live on two pseudo elements,
   each anchored to its own edge with a fixed height, instead of one inset:0 layer: the
   FAQ accordion animates .closing's height, and a full-height gradient laid out afresh
   every frame invalidated the container's whole backing store, so every line of text in
   the section shimmered on iOS even when it was not moving. Anchored this way the top
   glow does not change at all during the animation, and the bottom one only rides the
   growing edge it belongs to, where the content is in motion anyway. The fixed heights
   cover the gradients' visible extent with margin; max-height keeps short pages sane. */
.closing::before,.closing::after{content:"";position:absolute;left:0;right:0;height:1400px;
  max-height:100%;z-index:0;pointer-events:none}
.closing::before{top:0;background:radial-gradient(1180px 880px at 84% 0%,rgba(60,99,255,.5),transparent 58%)}
.closing::after{bottom:0;background:radial-gradient(1020px 880px at 4% 100%,rgba(60,99,255,.32),transparent 62%)}
.cta-band{position:relative;z-index:2;padding:clamp(80px,10vw,132px) 0 clamp(56px,7vw,76px)}
.cta-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,72px);align-items:center}
@media(max-width:970px){.cta-grid{grid-template-columns:1fr;gap:40px}}
.cta-head{position:relative;padding-top:.5em;margin-bottom:16px}
.cta-band h2{color:#fff;font-size:clamp(2.4rem,6vw,4rem);line-height:.98;max-width:15ch}
.cta-left p{color:rgba(255,255,255,.78);max-width:46ch;margin:0 0 24px;font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.62}

.cta-form{position:relative;border-radius:22px;padding:clamp(26px,3vw,38px);
  background:linear-gradient(158deg,rgba(18,34,68,.82),rgba(9,20,39,.86));border:1px solid rgba(96,150,255,.3);
  box-shadow:0 0 70px -14px rgba(60,99,255,.45),0 34px 80px -34px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}
.cta-form::before{content:"";position:absolute;inset:-1px;border-radius:23px;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(120,170,255,.7),transparent 45%,transparent 60%,rgba(60,99,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:420px){.frow{grid-template-columns:1fr}}
.field{margin-bottom:16px}
.field label{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58);margin:0 0 8px}
.cta-form input,.cta-form textarea{width:100%;background:rgba(9,20,39,.72);border:1px solid rgba(130,165,235,.24);
  color:#fff;border-radius:12px;padding:.82em .95em;font:inherit;font-size:16px;transition:border-color var(--dur),background var(--dur),box-shadow var(--dur)}
.cta-form input::placeholder,.cta-form textarea::placeholder{color:rgba(255,255,255,.42)}
.cta-form input:focus,.cta-form textarea:focus{outline:none;border-color:var(--volt-blue);background:rgba(9,20,39,.9);box-shadow:0 0 0 3px rgba(60,99,255,.22)}
/* custom dropdown */
.cselect{position:relative}
.cselect-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(9,20,39,.72);border:1px solid rgba(130,165,235,.24);color:#fff;border-radius:12px;
  padding:.82em .95em;font:inherit;font-size:16px;cursor:pointer;text-align:left;
  transition:border-color var(--dur),background var(--dur),box-shadow var(--dur)}
.cselect-btn:hover{border-color:rgba(130,165,235,.45)}
.cselect.open .cselect-btn,.cselect-btn:focus-visible{outline:none;border-color:var(--volt-blue);background:rgba(9,20,39,.9);box-shadow:0 0 0 3px rgba(60,99,255,.22)}
.cselect-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cselect-val.is-placeholder{color:rgba(255,255,255,.42)}
.cselect-chev{width:16px;height:16px;flex:none;color:var(--accent-ink);transition:transform var(--dur) var(--ease)}
.cselect.open .cselect-chev{transform:rotate(180deg)}
.cselect-list{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;margin:0;padding:6px;list-style:none;max-height:264px;overflow:auto;
  background:rgba(9,20,39,.98);border:1px solid rgba(130,165,235,.24);border-radius:12px;
  box-shadow:0 24px 48px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  opacity:0;transform:translateY(-8px) scale(.985);transform-origin:top;pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.cselect.open .cselect-list{opacity:1;transform:none;pointer-events:auto}
.cselect-opt{display:flex;align-items:center;justify-content:space-between;padding:.62em .72em;border-radius:8px;font-size:15px;color:rgba(255,255,255,.82);cursor:pointer;transition:background var(--dur),color var(--dur)}
.cselect-opt:hover,.cselect-opt.active{background:rgba(60,99,255,.2);color:#fff}
.cselect-opt.sel{color:#fff}
.cselect-opt.sel::after{content:"";width:15px;height:15px;flex:none;margin-left:10px;
  background:var(--accent-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-11'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-11'/%3E%3C/svg%3E") center/contain no-repeat}
.cta-form textarea{min-height:88px;resize:vertical}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg .chip{display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:.7em .6em;font-size:.86rem;font-weight:500;
  color:rgba(255,255,255,.72);background:rgba(9,20,39,.6);border:1px solid rgba(130,165,235,.24);border-radius:12px;
  transition:color var(--dur),background var(--dur),border-color var(--dur)}
.seg .chip:hover{color:#fff;border-color:rgba(130,165,235,.5)}
.seg .chip.on{color:#fff;background:rgba(60,99,255,.22);border-color:var(--volt-blue);box-shadow:inset 0 0 0 1px rgba(60,99,255,.5)}
.submitbtn{width:100%;justify-content:center;margin-top:8px}
.foot-cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px;padding:48px 0}
@media(max-width:760px){.foot-cols{grid-template-columns:1fr 1fr;gap:30px 24px}.foot-brand{grid-column:1/-1}}
.foot-brand p{color:rgba(255,255,255,.6);font-size:.92rem;margin:16px 0 20px;max-width:32ch}
.foot-social{display:flex;gap:10px}
.foot-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:#fff;transition:background var(--dur),border-color var(--dur)}
.foot-social a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.fcol h3{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 16px;font-weight:600}
.fcol a{display:block;color:rgba(255,255,255,.8);font-size:.93rem;padding:5px 0;transition:color var(--dur)}
.fcol a:hover{color:#fff}
/* Four paragraphs now, so a column rather than a row: the legal text reads as a
   block and the copyright line sits under it with a little air. */
.foot-legal{display:block;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.78rem;color:rgba(255,255,255,.5);line-height:1.6}
.foot-legal p{margin:0 0 10px}
.foot-legal .rg{max-width:96ch}
.foot-legal a{color:rgba(255,255,255,.66);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.24);transition:color .3s ease,border-color .3s ease}
.foot-legal a:hover,.foot-legal a:focus-visible{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
.foot-copy{margin:16px 0 0;color:rgba(255,255,255,.4)}
.foot-legal .rg strong{color:rgba(255,255,255,.72);font-weight:600}
.js [data-reveal]{opacity:0;transform:translateY(42px) scale(.985)}
.js [data-reveal].in{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .8s cubic-bezier(.16,.84,.3,1)}
/* staggered scroll reveals for more motion */
.js .kx-row:nth-child(2) {transition-delay:.08s}
.js .kx-row:nth-child(3) {transition-delay:.16s}
.js .kx-row:nth-child(4) {transition-delay:.24s}
/* ===== MARQUEE ribbon (accent bg) ===== */
.marquee{position:relative;z-index:2;background:transparent;color:#fff;overflow:hidden;
  border-block:1px solid rgba(150,180,255,.20);padding:15px 0}  /* transparent over .page-rest bg, thin translucent separators */
.marquee-track{display:flex;width:max-content;animation:marq 52s linear infinite}
.marquee-seg{display:flex;align-items:center;flex:none;line-height:1;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1rem,2vw,1.5rem);letter-spacing:.06em;text-transform:uppercase}
.marquee-seg span{padding:0 1.7rem;white-space:nowrap}
.marquee-seg i{width:7px;height:7px;background:#fff;transform:rotate(45deg);flex:none}
.c-ent{color:var(--volt-blue)}
.c-games{color:var(--lime)}
.c-one{color:var(--lavender)}
@keyframes marq{to{transform:translateX(-50%)}}
/* soft brand orbs on light sections */
.method .shell{position:relative;z-index:1}
.method::before,.statement::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.method::before{background:radial-gradient(340px 340px at 87% 22%,rgba(60,99,255,.22),transparent 66%),radial-gradient(300px 300px at 4% 84%,rgba(181,108,255,.18),transparent 64%)}
/* ecosystem: keep top-left clean under the ghost pretitle, glow on the right + blue accent in the bottom-left */
#ecosystem::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(760px 620px at 98% 15%,rgba(60,99,255,.17),transparent 62%),
    radial-gradient(640px 620px at 92% 74%,rgba(18,61,145,.20),transparent 64%),
    radial-gradient(760px 660px at -4% 100%,rgba(60,99,255,.22),transparent 60%),
    radial-gradient(1180px 780px at -6% -14%,#070f24 0%,rgba(9,20,39,.74) 30%,transparent 62%)}
#ecosystem .shell{position:relative;z-index:1}
/* fill-on-scroll for section heads (Claude Design fill reused) */
.sec-head-split{margin-top:clamp(72px,9vw,128px)}
.sec-head .fill{position:relative;z-index:1;margin:0 0 18px;font-size:clamp(2.1rem,5vw,3.5rem);line-height:.98;max-width:22ch}
.cta-head .fill{position:relative;z-index:1;font-size:clamp(2.4rem,6vw,4rem);line-height:.98;max-width:15ch}
.closing .lbase{-webkit-text-stroke-color:var(--stroke-ghost)}
.closing .ltop{color:#eef4ff}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js [data-reveal],.js .stage,.js .hl2{opacity:1!important;transform:none!important}
  .ring,.marquee-track{animation:none!important}.fill .ltop{clip-path:inset(0 0 0 0)!important}
}
.frame{display:none}
/* --- Method & Proof as LIGHT islands within dark theme --- */
#pillars{background:var(--polar-mist)}
.method{
  --bg:#F4F8FC;--bg-alt:#EBF1F8;--surface:#fff;
  --fg:#050508;--fg-muted:#48546B;--fg-subtle:#727E93;
  --border:rgba(9,20,39,.10);--border-strong:rgba(9,20,39,.16);--grid:rgba(9,20,39,.055);
  --brand-deep:#123D91;--accent-ink:#3C63FF;--accent-soft:rgba(60,99,255,.12);--stroke-ghost:rgba(9,20,39,.16);
  background:#F4F8FC;color:#050508}
.method .ltop{color:var(--fg)}
.method::before{background:radial-gradient(460px 460px at 100% 0%,rgba(60,99,255,.13),transparent 62%),radial-gradient(440px 440px at 0% 100%,rgba(60,99,255,.11),transparent 64%)}
@keyframes spin{to{transform:rotate(360deg)}}
/* animated mascot */

@keyframes logoShimmer{0%,100%{filter:brightness(1) drop-shadow(0 0 0 rgba(90,165,255,0))}50%{filter:brightness(1.55) drop-shadow(0 0 2.5px rgba(90,165,255,0.65))}}
.hero-shade{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(0deg, rgb(1 9 28 / 10%) 0%, rgb(9 19 43 / 50%) 50%, rgb(2 8 24 / 75%) 100%)}
@media (max-width:700px){.brand-logo{height:37px}.cta-form{padding-left:18px;padding-right:18px}.sec{padding-top:54px;padding-bottom:54px}}
.tool-lbl{display:none}
.mm-tools{display:flex;flex-direction:column;gap:8px}
.mm-tools:empty{display:none}
.mm-tools:not(:empty){margin-top:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.mm-tools>.dd{width:100%;position:relative}
.mm-tools .iconbtn{display:flex;align-items:center;justify-content:center;width:100%;height:60px;padding:0 18px;border-radius:var(--pill);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff}
.mm-tools .iconbtn .i,.mm-tools .iconbtn .eyes-i{display:none}
.mm-tools #ddUser .iconbtn{border-color:var(--volt-blue);background:rgba(60,99,255,.12)}
.mm-tools .dd-panel{left:0;right:0;width:auto;transform-origin:top}
.mm-tools .dd-panel::before{display:none}
.mm-tools .tool-lbl{display:inline;font-size:15px;font-weight:500;color:rgba(255,255,255,.9)}
/* language: quiet icon+text row pinned to the bottom of the menu */
.mm-tools:not(:empty){flex:1 1 auto}
.mm-tools #ddLang{margin-top:auto}
.mm-tools #langBtn{justify-content:center;gap:10px;height:44px;padding:0 4px;background:transparent;border:0;border-radius:10px;color:rgba(255,255,255,.85)}
.mm-tools #langBtn .i{display:block;width:20px;height:20px;color:rgba(255,255,255,.7)}
.dd-close,.dd-back{display:none}
/* resize guard: crossing breakpoints must not animate the menu across the screen */
html.is-resizing .mobile-menu,html.is-resizing .mobile-menu::before,html.is-resizing .dd-panel,html.is-resizing .dd-panel::before,html.is-resizing .mm-scroll{transition:none!important}
/* ===== PHONE: full-screen menu + full-screen login/language panels ===== */
@media (max-width:600px){
  /* Solid, not 98%: a panel opening on top of this sheet used to let it ghost through,
     and any movement underneath then read as the menu scrolling behind the overlay. */
  .mobile-menu{position:fixed;inset:0;left:0;right:0;top:0;width:auto;max-width:none;height:100dvh;max-height:none;
    border-radius:0;border:0;box-shadow:none;background:#060C1C;
    transform:none;transform-origin:center}
  .mm-scroll{height:100%;max-height:none;gap:2px;justify-content:flex-start;
    padding:82px 22px calc(env(safe-area-inset-bottom,0px) + 28px)}
  .mobile-menu::before{display:none}
  .mobile-menu a{font-size:1.18rem;padding:15px 6px}
  .mobile-menu .btn{margin-top:24px;padding:0 1.35em;font-size:1.02rem}
  /* keep the logo + burger on top so the sheet stays closable and branded */
  .navbar .brand{position:relative;z-index:90}
  #burger{position:relative;z-index:90}}
/* below the desktop nav, language / login open as full-screen overlays (never modals);
   the pressed trigger stays UNDER the panel (no z-lift), the X in the corner closes it */
/* Scroll lock: the body is pinned and offset by the reading position, which shared.js
   hands back on close. Overflow hidden alone is not enough, iOS ignores it mid gesture. */
body.scroll-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}
/* nothing inside an overlay may chain its scroll to the page behind it */
.mobile-menu,.dd-panel{overscroll-behavior:contain}

@media (max-width:1099px){
  /* the menu's backdrop-filter would trap fixed panels inside its box (containing block);
     its bg is 97% opaque so the frosted effect is imperceptible anyway */
  
  .mobile-menu{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .dd-panel{position:fixed;inset:0;left:0;right:0;top:0;width:auto;max-width:none;height:100dvh;
    border-radius:0;border:0;box-shadow:none;background:#060C1C;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    padding:104px 22px calc(env(safe-area-inset-bottom,0px) + 28px);transform:none;overflow-y:auto;display:flex;flex-direction:column}
  .dd-panel::before{display:none}
  .dd-lang,.dd-auth{width:auto;max-width:none}
  .dd-lang .lang{font-size:1.05rem;padding:14px 14px}
  .dd-auth input{font-size:16px;padding:calc(.9em + 1.5px) 1em calc(.9em - 1.5px)}
  .dd-close{display:grid;place-items:center;position:absolute;top:calc(env(safe-area-inset-top,0px) + var(--hdr-top,26px));right:calc((100vw - var(--shell)) / 2);width:44px;height:44px;border-radius:12px;border:0;background:transparent;color:#fff;z-index:96}
  /* The panel close is the burger in its open state: the same three bars, the same box,
   just held in the crossed position with no transition, so the cross looks identical
   wherever it appears. */
.dd-close{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.dd-close span{transition:none}
.dd-close span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.dd-close span:nth-child(2){opacity:0}
.dd-close span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .dd-back{display:inline-flex;align-items:center;gap:9px;flex:none;margin:auto auto 0;padding:16px 6px 6px;background:transparent;border:0;color:rgba(255,255,255,.88);font-size:1.02rem}
  .dd-back svg{width:17px;height:17px}
  /* a panel opening on top of the menu must also stop the menu itself from scrolling,
     otherwise the sheet slides around underneath the overlay */
  body.panel-open .mobile-menu{z-index:200;overflow:hidden;touch-action:none}
  /* The scroll container is .mm-scroll, not .mobile-menu, and WebKit does not let an
     ancestor's touch-action hold back a descendant scroll container, so the line above is
     enough in Chromium and not on a phone. overflow:hidden on the scroller itself is, and
     it keeps scrollTop, so nothing jumps when the overlay closes. */
  body.panel-open .mm-scroll{overflow:hidden}
  body.panel-open .dd.open .dd-panel{touch-action:auto}
  body.panel-open .dd.open{z-index:210}
}
/* ---- horizontal overflow fix: fill headings scale to the shell; no sideways panning ---- */
main{overflow-x:clip}
/* longest fill line is ~91vw at the base clamp: cap the size so every line fits the 92vw shell */
.sec-head .fill{font-size:min(clamp(2.1rem,5vw,3.5rem),6.2vw)}
html{background:#060D1A}
/* fullscreen menu: solid strip under the header logo so scrolled links do not collide */
@media(max-width:600px){
  .mm-scroll{padding-top:93px}
  .mobile-menu::after{content:"";position:absolute;top:0;left:0;right:0;height:88px;border-bottom:1px solid rgba(255,255,255,.14);background:inherit;z-index:2;pointer-events:none}
}
/* mobile scroll performance: drop backdrop blur, keep solid header */
@media(max-width:960px){
  header{transition:none}
  header.scrolled{--hdr-top:26px;padding:var(--hdr-top) 0 14px}
  header.scrolled::before{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(9,20,39,.97)}}
/* fallbacks for browsers without color-mix support */
@supports not (color: color-mix(in srgb, red, blue)) {
  .btn.accent:hover{background:var(--accent-deep)}
  .iconbtn:hover{background:rgba(255,255,255,.12)}
  }
/* mobile paint perf: isolate fill repaints */
.fill{contain:paint}
.fill .ltop{will-change:clip-path;transform:translateZ(0)}
/* mobile type harmony: section headings outrank any figures */

/* ============================================================
   IMAGE ASSETS (base64 WebP). Custom properties only, order
   inside :root is irrelevant, safe to keep at the end.
   ============================================================ */
:root{

}

/* Hero background stack: a fixed layer holding the blurred poster, the shader
   canvas and the veil. Pages supply only the poster image and its position. */
.shared-bg .sbg-photo{position:absolute;inset:0;transform-origin:100% 100%;will-change:transform}
.shared-bg>#glassfx{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s ease;pointer-events:none}
.shared-bg>#glassfx.on{opacity:1}

/* Brand mark: white wordmark, descriptor in the page accent */
.brand-logo{fill:#fff}
.brand-logo .d{fill:var(--accent)}

/* ============================================================
   SECONDARY PAGE ACCENT SYSTEM
   Shared by the pages outside the product line. Scoped through :where() on the body,
   which adds no specificity, so the product pages are untouched and each page sheet
   keeps overriding exactly as before. The accent variables stay per page.
   ============================================================ */
/* hero headline sized to land in 3 lines like the homepage hero */
:where(.page-secondary) .hero .hero-title{font-size:clamp(2.05rem,4.15vw,3.4rem)}/* secondary pages: single-column hero, wide copy */
:where(.page-secondary) .hero.center .hl2{margin-inline:auto;text-align:center}:where(.page-secondary) .hero.center .hero-cta{justify-content:center}/* full-stack glow lines in the page accent */

.sec-head-split .lead+.lead{margin-top:14px}
/* page accent for the remaining interactive elements */
:where(.page-secondary) .seg .chip.on{background:rgba(60,99,255,.22);border-color:var(--volt-blue);box-shadow:inset 0 0 0 1px rgba(60,99,255,.5)}:where(.page-secondary) .mm-tools #ddUser .iconbtn{border-color:var(--volt-blue);background:rgba(60,99,255,.12)}:where(.page-secondary) .cta-form::before{background:linear-gradient(140deg,rgba(120,150,255,.7),transparent 45%,transparent 60%,rgba(60,99,255,.4))}:where(.page-secondary) *::-webkit-scrollbar-thumb{background:rgba(60,99,255,.55);background-clip:padding-box}:where(.page-secondary) *::-webkit-scrollbar-thumb:hover{background:rgba(60,99,255,.85);background-clip:padding-box}
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:rgba(60,99,255,.6) var(--abyss-deep)}
}

/* section rhythm: split heads open these sections, so no mid-section top offset */
.shell > .sec-head-split:first-child{margin-top:0}#services .eco-caps{margin-bottom:0}#services .meta{margin-bottom:0}

/* Page backdrop below the hero: two soft glows over a vertical fade, one high on the
   left and one low on the right. One rule for every page. */
.page-rest{position:relative;
  background:
    radial-gradient(920px 720px at 6% 5%,rgba(18,61,145,.34),transparent 60%),
    radial-gradient(900px 800px at 92% 90%,rgba(18,61,145,.24),transparent 60%),
    linear-gradient(178deg,#05080F 0%,var(--abyss-navy) 31%,var(--abyss-deep) 100%)}

/* Forms: invalid fields, and the panel that covers the form once it is submitted */
.field.has-error input,.field.has-error textarea,.field.has-error .cselect-btn{
  border-color:rgba(255,122,92,.75);box-shadow:0 0 0 3px rgba(255,122,92,.16)}
.field-error{margin:6px 0 0;font-size:.82rem;color:#FF9E88;letter-spacing:.01em}
form[data-form]{position:relative}
form.is-sending{opacity:.6;pointer-events:none}
.form-result{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:24px;
  border-radius:inherit;
  /* the same surface as the form, laid over an opaque base so nothing shows through */
  background:linear-gradient(158deg,rgba(18,34,68,.82),rgba(9,20,39,.86)),#0A1226;
  animation:formResIn .28s cubic-bezier(.22,.8,.3,1) both}
.form-result.is-hidden{display:none}
@keyframes formResIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.form-result{animation:none}}

/* Cookie notice: a small island that slides up from the bottom left */
/* Below the header (60): the sticky header is a stacking context, so the menu and the
   fullscreen panels inside it can never rise above their root level of 60. At 80 the
   banner floated over ALL of them and blocked the language button at the bottom of the
   open menu. 55 keeps it above the page (main is 1) and under every header overlay. */
.cconsent{position:fixed;left:18px;right:18px;bottom:18px;z-index:55;pointer-events:none;
  display:flex;justify-content:flex-start}
.cconsent-in{pointer-events:auto;max-width:560px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  padding:16px 18px;border-radius:16px;
  background:rgba(9,20,39,.94);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);
  border:1px solid rgba(130,165,235,.22);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(14px);opacity:0;transition:transform .32s cubic-bezier(.22,.8,.3,1),opacity .32s ease}
.cconsent.is-in .cconsent-in{transform:none;opacity:1}
.cconsent.is-out .cconsent-in{transform:translateY(10px);opacity:0}
.cconsent-txt{margin:0;flex:1 1 260px;font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.74)}
.cconsent-txt a{color:var(--accent-ink,#8AA6FF);text-decoration:underline;text-underline-offset:2px}
.cconsent-act{display:flex;gap:10px;flex:0 0 auto}
.cconsent .btn.sm{padding:9px 16px;font-size:.84rem}
@media (max-width:520px){
  .cconsent{left:12px;right:12px;bottom:12px}
  .cconsent-in{gap:12px}
  .cconsent-act{width:100%}
  .cconsent-act .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .cconsent-in{transition:none;transform:none;opacity:1}
}

/* Restored: these selectors only appear once a script has built the markup,
   so a static sweep cannot see them. */
.navdd-panel .dot{width:7px;height:7px;flex:none;transform:rotate(45deg);background:currentColor}
.js .stage.in{transform:none}
.form-result-in{max-width:42ch;text-align:center}
.form-result-in h3{margin:0 0 10px;font-size:1.15rem;color:#fff}
.form-result-in p{margin:0 0 18px;color:rgba(255,255,255,.72);font-size:.95rem;line-height:1.55}
.form-result.is-ok   .form-result-in h3{color:#9BE870}
.form-result.is-err  .form-result-in h3{color:#FF9E88}
.form-result.is-info .form-result-in h3{color:var(--accent-ink,#8AA6FF)}

/* ============================================================
   LIFTED FROM THE PAGE SHEETS
   Rules that were byte identical in every page stylesheet. The first group applies
   everywhere; the second belongs to the pages outside the product line and is scoped
   through :where(), which adds no specificity, so each page sheet keeps overriding
   exactly as it did before.
   ============================================================ */
.hero-glow{display:none}
footer{position:relative;z-index:2;padding:0 0 40px}
@media(max-width:600px){
  .sec-head .fill{font-size:min(clamp(2.1rem,5vw,3.5rem),7.6vw)}
  .kx-name{font-size:20px}
  .mnum{font-size:12px}
}
@media (max-width:960px){
  .hero .shell{display:block}
  .hero-stage{grid-template-columns:1fr;grid-template-rows:auto auto auto;grid-template-areas:"copy" "stage" "kpi";text-align:center;column-gap:0}
  .hl2{align-self:auto;max-width:100%;margin-inline:auto;margin-top:clamp(22px,6vw,48px)}
  .hero-lead{margin-inline:auto}
  .hero-cta{justify-content:center}
}

/* pages that are not secondary keep the three row hero below 960px as well */
:where(body:not(.page-secondary)) .hero-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto 1fr;grid-template-areas:"." "copy" "."}

/* Restored: these selectors only appear once a script has built the markup,:where(.page-secondary) so a static sweep cannot see them. */
:where(.page-secondary) .contact-cards a:hover{border-color:currentColor}
:where(.page-secondary) .contact-cards a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid transparent}
:where(.page-secondary) .sub input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
:where(.page-secondary) .sub input{width:100%;padding:.95em 1.1em;border-radius:12px;border:1px solid var(--border-strong);background:rgba(255,255,255,.7);color:var(--fg);font:inherit;font-size:15px}
:where(.page-secondary) .sub{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;max-width:600px;margin-top:clamp(22px,3vw,36px)}
:where(.page-secondary) .tcard span{color:var(--fg-muted);font-size:14px}
:where(.page-secondary) .tcard h3{margin:0 0 4px;font-size:16.5px;color:var(--fg)}
:where(.page-secondary) .tcard .ph{aspect-ratio:3/3.6;min-height:0;margin-bottom:14px}
:where(.page-secondary) .team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:clamp(26px,3.5vw,42px)}
:where(.page-secondary) .ncard .textlink{margin-top:auto;font-size:14.5px}
:where(.page-secondary) .ncard p{margin:0 0 14px;color:var(--fg-muted);font-size:14.5px;line-height:1.55}
:where(.page-secondary) .ncard h3{margin:0 0 8px;font-size:17px;line-height:1.35;color:var(--fg)}
:where(.page-secondary) .nc-meta b{color:var(--accent-ink);font-weight:600}
:where(.page-secondary) .nc-meta{display:flex;gap:10px;color:var(--fg-subtle);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
:where(.page-secondary) .nc-body{padding:18px 20px 22px;display:flex;flex-direction:column;align-items:flex-start;flex:1}
:where(.page-secondary) .ncard .ph{border:0;border-bottom:1px solid var(--border);border-radius:0;min-height:172px}
:where(.page-secondary) .ncard:hover{transform:translateY(-4px);border-color:rgba(60,99,255,.5)}
:where(.page-secondary) .ncard{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:linear-gradient(180deg,rgba(9,20,39,.5),rgba(9,20,39,.22));transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
:where(.page-secondary) .news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(26px,3.5vw,42px)}
:where(.page-secondary) .role .textlink{justify-self:end;white-space:nowrap}
:where(.page-secondary) .role .r-meta{color:var(--fg-muted);font-size:14.5px}
:where(.page-secondary) .role h3{margin:0;font-size:17px;color:var(--fg)}
:where(.page-secondary) .role:hover{background:rgba(60,99,255,.07)}
:where(.page-secondary) .role{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) auto;gap:18px;align-items:center;padding:22px 8px;border-bottom:1px solid var(--border);transition:background var(--dur) var(--ease)}
:where(.page-secondary) .roles{margin-top:clamp(26px,3.5vw,42px);border-top:1px solid var(--border)}
:where(.page-secondary) .method .ph{background:rgba(9,20,39,.045)}
:where(.page-secondary) .ph.wide{aspect-ratio:16/6.5;min-height:0}
:where(.page-secondary) .ph svg{width:34px;height:34px;opacity:.75}
:where(.page-secondary) .ph .ph-in{display:grid;place-items:center;gap:10px;font-size:14px;letter-spacing:.04em}
/* ============ SHARED SECONDARY-PAGE COMPONENTS ============ */
:where(.page-secondary) .ph{position:relative;display:grid;place-items:center;border:1.5px dashed var(--border-strong);border-radius:18px;background:rgba(9,20,39,.35);color:var(--fg-subtle);min-height:240px;text-align:center;padding:22px}
:where(.page-secondary) .c-core{color:var(--volt-blue)}
:where(.page-secondary) .navdd-panel a .c-core{color:var(--volt-blue)}
@media(max-width:520px){
  :where(.page-secondary) .sub{grid-template-columns:1fr}
}
@media(max-width:560px){
  :where(.page-secondary) .team{grid-template-columns:1fr}
}
@media(max-width:1020px){
  :where(.page-secondary) .team{grid-template-columns:repeat(2,minmax(0,1fr))}
  :where(.page-secondary) .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  :where(.page-secondary) .news-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  :where(.page-secondary) .role{grid-template-columns:1fr;gap:6px}
  :where(.page-secondary) .role .textlink{justify-self:start}
}

/* Accent outlines: the glow belongs on the dark page. Inside a light panel it reads as
   blur around the line, so it is dropped there. */
.method .mg-h,.method .mg-vl,.method .mg-v,.method .mg-v2,.method .mg-v3,.post-body-sec .mg-h,.post-body-sec .mg-vl,.post-body-sec .mg-v,.post-body-sec .mg-v2,.post-body-sec .mg-v3,#advantage .mg-h,#advantage .mg-vl,#advantage .mg-v,#advantage .mg-v2,#advantage .mg-v3{box-shadow:none}

/* Autofill: the browser paints its own light background over the field and cannot be
   overridden directly, so a large inset shadow stands in for it and the text colour is set
   through the fill property. The long transition keeps the browser from flashing its colour
   back in on focus. */
.dd-auth input:-internal-autofill-selected,
.cta-form input:-internal-autofill-selected,
.sub input:-internal-autofill-selected,
.dd-auth input:-webkit-autofill,
.dd-auth input:-webkit-autofill:hover,
.dd-auth input:-webkit-autofill:focus,
.cta-form input:-webkit-autofill,
.cta-form input:-webkit-autofill:hover,
.cta-form input:-webkit-autofill:focus,
.cta-form textarea:-webkit-autofill,
.sub input:-webkit-autofill,
.sub input:-webkit-autofill:hover,
.sub input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
  -webkit-box-shadow:0 0 0 1000px #091427 inset;
  box-shadow:0 0 0 1000px #091427 inset;
  transition:background-color 9999s ease-out,color 9999s ease-out}
.dd-auth input:-webkit-autofill:focus,
.cta-form input:-webkit-autofill:focus,
.sub input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #0B182E inset,0 0 0 3px var(--accent-soft);
  box-shadow:0 0 0 1000px #0B182E inset,0 0 0 3px var(--accent-soft)}
/* the subscribe field on the light sections keeps its own paper background */
:where(.page-secondary) .sub input:-webkit-autofill{
  -webkit-text-fill-color:var(--fg);
  -webkit-box-shadow:0 0 0 1000px #FBFCFD inset;
  box-shadow:0 0 0 1000px #FBFCFD inset}

/* Closed overlays must leave the tab order, not just fade out. Opacity alone keeps their
   links focusable, so a keyboard user walks through an invisible menu before reaching the
   page. visibility:hidden removes them from both the tab order and the accessibility tree,
   and the zero-length delay on opening keeps the fade intact. */
.navdd-panel,.dd-panel,.cselect-list,.mobile-menu{
  visibility:hidden;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s var(--dur)}
.navdd.open .navdd-panel,
.dd.open .dd-panel,
.cselect.open .cselect-list,
.mobile-menu.open{
  visibility:visible;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s}

/* A reveal must never hide what the keyboard is pointing at: if focus lands inside a block
   that has not animated in yet, show it at once. */
.js [data-reveal]:focus-within{opacity:1;transform:none}

/* Skip link: the first tab stop, off screen until it takes focus */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;
  padding:12px 18px;border-radius:0 0 12px 0;background:var(--accent,#3C63FF);color:#fff;
  font-size:.9rem;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}

/* Section titles became real headings for the document outline. They were divs, so the
   browser default heading margin has to go; :where() keeps the specificity at zero so
   every deliberate margin already in the sheets still wins. */
:where(h2.fill){margin:0}

/* Text selection.

   The site is largely decorative copy that nobody needs to copy: headlines, navigation,
   the marquee, button labels. Selecting it usually happens by accident, especially when
   dragging the slider or scrubbing a sticky section, and a stray blue block over the art
   looks broken. So selection is off by default and switched back on where copying is the
   point: the legal pages, which people do quote and print, and the fields people type into.

   Note what is deliberately not covered: buttons and the custom select keep selection off,
   since their labels are controls rather than content. */
body{-webkit-user-select:none;-moz-user-select:none;user-select:none}

/* what stays selectable */
input,textarea,
.page-readable :where(main,article) :where(p,li,td,th,h1,h2,h3,dt,dd,blockquote,address),
.cselect-list,
[data-selectable]{-webkit-user-select:text;-moz-user-select:text;user-select:text}

/* the footer lives inside main on the legal pages, so it needs saying that it is chrome */
.page-readable footer :where(p,a,h1,h2,h3){-webkit-user-select:none;-moz-user-select:none;user-select:none}

/* the custom select shows a value rather than holding one, so it behaves like a control */
.cselect-btn,.cselect-val{-webkit-user-select:none;-moz-user-select:none;user-select:none}

/* ============================================================
   HERO CANVAS PAGES
   The four pages that run the shader share their background stack and scroll cue.
   These rules were identical in all four sheets; the per page part is only the
   poster image and the shader config.
   ============================================================ */
.navdd-panel a .c-core{color:var(--coral)}
.hl2{grid-area:copy;position:relative;z-index:3;max-width:60ch}
.hero-lead{margin:26px 0 0;max-width:62ch;color:rgba(255,255,255,.78);font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.62;text-shadow:0 1px 14px rgba(0,0,0,.36)}
.c-core{color:var(--coral)}
.hero-cta{justify-content:center}
/* hero intro cascade: masked line rise + staggered lead/buttons */
.hline{display:block;overflow:hidden;padding:.16em .1em .1em 0;margin:-.16em -.1em -.1em 0}
.hline-in{display:inline-block;transform:translateY(130%);animation:hlUp 1s var(--hd,0s) cubic-bezier(.19,1,.22,1) forwards}
.hl2 .hero-lead{opacity:0;animation:hFade 1s .82s cubic-bezier(.22,.8,.3,1) forwards}
.hl2 .hero-cta .btn{opacity:0;animation:hBtn .85s cubic-bezier(.22,.8,.3,1) forwards}
.hl2 .hero-cta .btn:nth-child(1){animation-delay:.98s}
.hl2 .hero-cta .btn:nth-child(2){animation-delay:1.1s}
.hero .hero-title, .hl2 .hero-title, h1.hero-title{text-shadow:none!important;filter:drop-shadow(0 14px 34px rgba(7,18,50,.6)) drop-shadow(0 4px 12px rgba(7,18,50,.45))}
/* ===== hero-scroll-css ===== */
.hero-scroll{position:absolute;left:50%;bottom:clamp(16px,3.2vh,32px);transform:translateX(-50%);z-index:4;
  width:26px;height:42px;border:2px solid rgba(255,255,255,.4);border-radius:20px;pointer-events:none;
  opacity:.6;animation:heroScrollBob 2.6s ease-in-out infinite}
.hero-scroll-dot{position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:2px;
  background:rgba(255,255,255,.85);transform:translateX(-50%);animation:heroScrollDot 1.9s cubic-bezier(.7,0,.3,1) infinite}
/* ===== shared-bg-fx ===== */
.shared-bg{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(120% 92% at 80% 6%,rgba(60,99,255,.2),transparent 52%),radial-gradient(96% 90% at 8% 26%,rgba(18,61,145,.3),transparent 60%),radial-gradient(80% 90% at 24% 104%,rgba(60,99,255,.12),transparent 60%),linear-gradient(164deg,#0B1730 0%,#0C1C3E 46%,#081226 100%)}
main{position:relative;z-index:1}
.shared-bg .sbg-veil{position:absolute;inset:0;z-index:1;opacity:0;will-change:opacity;
  background:
    radial-gradient(52% 64% at 12% 74%,rgba(70,106,232,.42),rgba(34,62,168,.16) 42%,transparent 66%),
    radial-gradient(85% 90% at 80% 44%,
    #1E3796 0%,#1A2F80 14%,#142462 28%,#0E1944 42%,#09102B 56%,#050918 70%,#020309 85%,#000 100%)}
.shared-bg .sbg-veil::after{content:"";position:absolute;inset:0;mix-blend-mode:overlay;opacity:.5;
  background:url(../img/ui/noise.png) repeat;background-size:72px 72px}
/* The hero dimmer on the canvas pages. It used to be .hero-shade inside the hero, but the
   art it dims is a fixed layer and the hero is not: an iOS rubber-band drag moved the
   document, shade included, while the art stayed, opening a strip of undimmed art at the
   top. So on these pages the shade is fixed too, glued to the art at every scroll offset.
   Its place in the markup, straight after .frame, reproduces the old painting order
   exactly: photo < canvas < veil < frame < shade < page content. The gradient is the
   .hero-shade one verbatim; keep the two in step. It stays put during committed
   scrolling (an earlier build rode it on scroll events, always a frame behind the
   compositor, which jerked on fast flings), so the cost is a slightly stronger dim
   near the top of the art mid-scroll; the veil takes over shortly after. During a top
   rubber band the sbg-fx driver slides it down with the rest of the fixed backdrop by
   the bounce pull, matching where iOS re-seats fixed layers the instant a finger
   catches the page. */
.sbg-shade{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:0;pointer-events:none;
  background:linear-gradient(0deg, rgb(1 9 28 / 10%) 0%, rgb(9 19 43 / 50%) 50%, rgb(2 8 24 / 75%) 100%)}
.hero .hero-dim{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;will-change:opacity;
  background:var(--abyss-navy,#060D1A)}
/* hero dim on scroll is disabled; remove the next line to re-enable */
.hero .hero-dim{display:none}
/* ===== marquee-absorb ===== */

/* Restored: these selectors only appear once a script has built the markup,
   so a static sweep cannot see them. */
@media (max-width:960px){
  .hero{min-height:100vh;min-height:100lvh;align-items:center;padding:clamp(130px,17.5vh,172px) 0 clamp(40px,8vw,64px)}
}
@keyframes hlUp{
  to{transform:translateY(0)}
}
@keyframes hFade{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes hBtn{
  from{opacity:0;transform:translateY(16px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .hline-in,.hl2 .hero-lead,.hl2 .hero-cta .btn{animation:none;transform:none;opacity:1}
}
@keyframes heroScrollDot{
  0%{opacity:0;transform:translate(-50%,0)}
  18%{opacity:1}
  72%{opacity:1}
  100%{opacity:0;transform:translate(-50%,15px)}
}
@keyframes heroScrollBob{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(6px)}
}
@media (max-width:600px){
  .hero-scroll{width:24px;height:38px;bottom:clamp(14px,2.4vh,24px)}
}
@media (hover:none),(orientation:portrait){
  .hero-scroll{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-scroll,.hero-scroll-dot{animation:none}
  .hero-scroll-dot{top:13px;opacity:.85}
}

/* ============================================================
   PAGE FOUNDATION
   The body rule and the secondary page hero art, which were byte identical in every
   page sheet. overflow-x carries both values on purpose: clip is what keeps sticky
   sections from jittering, since hidden turns the body into a scroll container, and
   hidden stays first as the fallback for browsers without clip.
   ============================================================ */

body{margin:0;color:var(--fg);font-family:var(--font-body);font-weight:400;line-height:1.55;
  background:
    radial-gradient(1100px 760px at 82% -6%,rgba(60,99,255,.20),transparent 56%),
    radial-gradient(920px 720px at 6% 20%,rgba(18,61,145,.34),transparent 60%),
    radial-gradient(820px 720px at 97% 44%,rgba(42,99,199,.20),transparent 60%),
    radial-gradient(760px 700px at 3% 70%,rgba(60,99,255,.16),transparent 60%),
    radial-gradient(900px 800px at 92% 92%,rgba(18,61,145,.24),transparent 60%),
    linear-gradient(178deg,var(--torpedo-black) 0%,var(--abyss-navy) 42%,var(--abyss-deep) 100%);
  letter-spacing:.004em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;overflow-x:clip}

/* custom hero background art */

/* ============================================================
   FAQ
   Core and one carry the same accordion; the only difference was the accent colour,
   which now comes from the page variables so a third page needs no new rules.
   ============================================================ */
/* FAQ: dark, seams straight into the CTA band */
#faq{padding-bottom:clamp(28px,4vw,56px)}
.faq{border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item summary{list-style:none;cursor:pointer;touch-action:manipulation;display:flex;align-items:center;
  justify-content:space-between;gap:22px;padding:clamp(18px,2.4vw,26px) 4px;
  font-size:clamp(1.02rem,1.35vw,1.22rem);font-weight:600;line-height:1.35}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent-ink)}
.faq-x{position:relative;flex:0 0 auto;width:22px;height:22px}
.faq-x::before,.faq-x::after{content:"";position:absolute;left:50%;top:50%;
  width:16px;height:2px;border-radius:2px;background:var(--accent);
  transform:translate(-50%,-50%);transition:transform .35s cubic-bezier(.22,.8,.3,1)}
.faq-x::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item[open] .faq-x::after{transform:translate(-50%,-50%) rotate(0deg)}
/* contain keeps the height animation from reflowing the rest of the document each
   frame, which is what made the page shake while an item opened */
.faq-a{overflow:hidden;contain:layout paint}
.faq-a p{margin:0;padding:2px 4px 24px;max-width:74ch;font-size:15.5px;line-height:1.7}
@media (min-width:1021px){
  /* on the wide grid the rules sit above the items instead of below; the multicol
     layout this block once carried was replaced by the grid rules that follow, and
     only this border swap from it still shapes the design */
  .faq-item{border-bottom:0;border-top:1px solid var(--border)}
}
@media (min-width:901px){
  .faq{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(36px,4.5vw,80px);
    border-top:0;align-items:start}
  .faq-col{border-top:1px solid var(--border)}
}

/* ============================================================
   LIFTED FROM THE PAGE SHEETS
   Rules that were byte identical in two or more page stylesheets. They sit at the
   end of this file so their position relative to everything else in the cascade is
   unchanged; a page sheet still overrides them because it loads afterwards.
   ============================================================ */

/* Secondary pages: plain gradient hero, no photograph */
:where(.page-secondary) .atmo-bg{background:
  radial-gradient(120% 92% at 80% 6%,rgba(60,99,255,.2),transparent 52%),
  radial-gradient(96% 90% at 8% 26%,rgba(18,61,145,.3),transparent 60%),
  radial-gradient(80% 90% at 24% 104%,rgba(60,99,255,.12),transparent 60%),
  linear-gradient(164deg,#0B1730 0%,#0C1C3E 46%,#081226 100%)}

/* Compact hero: not full screen */
.hero.compact{min-height:0}
.hero.compact .hero-stage{min-height:46vh}

@media(max-width:600px){
  .kx-idx{font-size:24px}}

/* Hero photograph entrance, on the pages that carry one */
@keyframes sbgImgIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .shared-bg .sbg-photo{animation:none}}

/* Product carousel track */
.pcar-track{display:flex;align-items:stretch;will-change:transform;user-select:none;cursor:grab;touch-action:pan-y;transition:transform .68s cubic-bezier(.22,.8,.3,1)}
@media (prefers-reduced-motion:reduce){
  .pcar-track{transition:none}}

/* Numbered step rows */
.steps-l{position:relative}
.stepin{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.6vw,34px);padding:clamp(26px,3.4vw,44px) 0;border-top:1px solid rgba(150,180,255,.16)}
.steps-r .stepin:first-child{border-top:0;padding-top:6px}
.stepin-t{margin:2px 0 10px;font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.12;letter-spacing:-.01em}
.stepin-p{margin:0;font-size:15.5px;line-height:1.66;max-width:58ch}
@media (orientation:portrait),(max-width:900px){
  .stepin{padding:22px 0}}

/* Centred call to action: the widths stay per page */
.cta-center .cta-head .ltop{right:0;text-align:center}
.cta-center .cta-head{display:flex;justify-content:center}
.cta-center .shell{text-align:center}
.cta-center .cta-copy{margin:22px auto 0;color:rgba(255,255,255,.78);
  font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.62}
.cta-center .cta-actions{margin-top:34px;display:flex;justify-content:center}

/* ============================================================
   PAGE ACCENT
   One set of rules for every page that carries an accent colour. The hue arrives
   through --accent for solid fills and through the --acc / --acc-lit channel pairs
   where the value needs an alpha. A page sheet sets the pair and nothing else.
   Home is deliberately outside this: it keeps the single hue glow of the base rules.
   ============================================================ */
:where(.page-secondary,.page-accent) h1.hero-title .ac{color:var(--accent)}
:where(.page-secondary,.page-accent) .ltop.hl-accent{color:var(--accent)}
:where(.page-secondary,.page-accent) .meta .m-ic{color:var(--accent)}
:where(.page-secondary,.page-accent) .mg-h{background:linear-gradient(90deg,rgba(var(--acc),.55),rgba(var(--acc-lit),.98));box-shadow:0 0 14px 1px rgba(var(--acc),.75),0 0 5px rgba(var(--acc-lit),.9)}
:where(.page-secondary,.page-accent) .mg-vl,:where(.page-secondary,.page-accent) .mg-v,:where(.page-secondary,.page-accent) .mg-v2,:where(.page-secondary,.page-accent) .mg-v3{background:linear-gradient(180deg,rgba(var(--acc-lit),.98),rgba(var(--acc),.4));box-shadow:0 0 14px 1px rgba(var(--acc),.7),0 0 5px rgba(var(--acc-lit),.85)}
@media(max-width:1020px) and (min-width:641px){:where(.page-secondary,.page-accent) .meta>div:nth-of-type(3)::before,:where(.page-secondary,.page-accent) .meta>div:nth-of-type(4)::before{background:linear-gradient(90deg,rgba(var(--acc),.55),rgba(var(--acc-lit),.98));box-shadow:0 0 14px 1px rgba(var(--acc),.75),0 0 5px rgba(var(--acc-lit),.9)}}
@media(max-width:640px){:where(.page-secondary,.page-accent) .meta>div+div::before{background:linear-gradient(90deg,rgba(var(--acc),.55),rgba(var(--acc-lit),.98));box-shadow:0 0 14px 1px rgba(var(--acc),.75),0 0 5px rgba(var(--acc-lit),.9)}}
:where(.page-secondary,.page-accent) .cta-form input:focus,:where(.page-secondary,.page-accent) .cta-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--acc),.24)}
:where(.page-secondary,.page-accent) .cselect.open .cselect-btn,:where(.page-secondary,.page-accent) .cselect-btn:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--acc),.24)}
:where(.page-secondary,.page-accent) .cselect-opt:hover,:where(.page-secondary,.page-accent) .cselect-opt.active{background:rgba(var(--acc),.2)}
@media(max-width:1020px) and (min-width:641px){:where(.page-secondary,.page-accent) .method .meta>div:nth-of-type(3)::before,:where(.page-secondary,.page-accent) .method .meta>div:nth-of-type(4)::before{box-shadow:0 0 9px 0 rgba(var(--acc),.32),0 0 3px rgba(var(--acc-lit),.36)}}
@media(max-width:640px){:where(.page-secondary,.page-accent) .method .meta>div+div::before{box-shadow:0 0 9px 0 rgba(var(--acc),.32),0 0 3px rgba(var(--acc-lit),.36)}}
/* the product pages keep a soft glow inside .method, the secondary ones do not */
:where(.page-accent) .method .mg-h{box-shadow:0 0 9px 0 rgba(var(--acc),.32),0 0 3px rgba(var(--acc-lit),.36)}
:where(.page-accent) .method .mg-vl,:where(.page-accent) .method .mg-v,:where(.page-accent) .method .mg-v2,:where(.page-accent) .method .mg-v3{box-shadow:0 0 9px 0 rgba(var(--acc),.3),0 0 3px rgba(var(--acc-lit),.34)}

/* hero call to action: the entrance and the endless fill in one declaration, because
   animation is a single property and the entrance would otherwise drop the fill */
.hl2 .hero-cta .btn.accent{animation:hBtn .85s .98s cubic-bezier(.22,.8,.3,1) forwards, ctaFill 7.5s ease-in-out infinite}

/* Compact subscribe rows: the overlay panel needs a box to cover, and a 52px
   tall row is not one. On these the result drops under the row instead, so the
   field stays visible and nothing is clipped. */
.stay-form,.sub{position:relative}
.stay-form .form-result,.sub .form-result{position:static;padding:14px 0 0;
  background:none;border-radius:0;place-items:start;animation:none;
  /* the row is flex on Games and grid on News, so claim a full line in both */
  flex:1 0 100%;order:9;grid-column:1/-1}
.stay-form .form-result-in,.sub .form-result-in{text-align:left;max-width:52ch}
.stay-form .form-result-in p,.sub .form-result-in p{margin-bottom:12px}

/* ===== COUNTER CARDS =====
   Shared by the One page metrics band and the company figures inside a role
   brief. Kept here rather than in one.css so both read from one definition.
   Written for the dark theme; the light island overrides the three colours. */
.mband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.mcard{display:flex;flex-direction:column;
  border:1px solid rgba(150,180,255,.2);border-radius:20px;background:none;
  padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,30px)}
.mnum{display:flex;align-items:center;gap:12px;font-size:clamp(1.9rem,3.2vw,3rem);font-weight:800;
  line-height:1;letter-spacing:-.02em;color:#fff}
.mlab{display:block;margin-top:auto;padding-top:14px;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;opacity:.66}
@media (max-width:1020px){.mband{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media (max-width:400px){.mband{grid-template-columns:minmax(0,1fr)}}

/* ===== AGE GATE =====
   A fixed sheet over the whole page, rendered by the server before the header,
   so there is no moment where the site shows through. It sits above the cookie
   notice: an unanswered age question outranks a cookie preference. */
.agegate-on{overflow:hidden}
.agegate-on body{overflow:hidden}
/* Centred at every size. Flex with margin:auto on the child rather than grid
   place-items, because when the panel is taller than a short screen the auto
   margins collapse and the top stays reachable; centred grid items clip theirs. */
.agegate{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,5vw,48px);overflow-y:auto}
.agegate-bg{position:absolute;inset:0;background:var(--abyss-deep);
  background-image:
    radial-gradient(1100px 760px at 82% -6%,rgba(60,99,255,.30),transparent 58%),
    radial-gradient(900px 700px at 6% 104%,rgba(60,99,255,.20),transparent 62%);
  background-color:var(--abyss-deep)}
.agegate-in{position:relative;margin:auto;width:min(560px,100%);text-align:center}
.agegate-panel{display:flex;flex-direction:column;align-items:center}
.agegate-panel[hidden]{display:none}
.agegate-eyebrow{margin:0 0 12px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--accent-ink)}
.agegate-title{font-family:var(--font-display);font-weight:800;color:#fff;line-height:1.08;
  letter-spacing:-.01em;font-size:clamp(1.8rem,4.4vw,2.6rem);margin:0 0 16px}
.agegate-copy{margin:0 0 14px;max-width:46ch;color:var(--fg-muted);
  font-size:clamp(.98rem,1.3vw,1.06rem);line-height:1.65}
.agegate-act{display:flex;flex-direction:column;align-items:stretch;gap:12px;
  width:min(360px,100%);margin:clamp(18px,3vw,26px) 0 0}
.agegate-act .btn{justify-content:center;width:100%}
.agegate-note{margin:22px 0 0;max-width:44ch;font-size:12.5px;line-height:1.6;color:var(--fg-subtle)}
.agegate-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:22px}
.agegate-links a{color:var(--accent-ink);font-size:14px;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .3s ease}
.agegate-links a:hover,.agegate-links a:focus-visible{border-bottom-color:currentColor}