:root { --ink:#020C45; --deep:#01072B; --pink:#E449B1; --violet:#6235DA; --blue:#2A72E2; --mint:#2BD4A0; --steam:#EEF1FA; }
html { scroll-behavior: smooth; scroll-padding-top: 140px; }
body { font-family: "IBM Plex Sans", system-ui, sans-serif; background: #01072B; color: #0F1747; -webkit-font-smoothing: antialiased; }

/* Headings: Archivo, expanded width for an engineered, industrial voice */
.display { font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wdth" 112; font-weight: 800; letter-spacing: -0.02em; }
.display-soft { font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wdth" 106; font-weight: 650; letter-spacing: -0.01em; }
.num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-feature-settings: "tnum" 1; }

.grad { background: linear-gradient(90deg, #E449B1 0%, #6235DA 52%, #2A72E2 100%); }
.grad-text { background: linear-gradient(90deg, #F29BD3, #A48BF0 50%, #8DB4F2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-border { border: 1px solid transparent; background: linear-gradient(#071463, #071463) padding-box, linear-gradient(120deg, rgba(228,73,177,.7), rgba(98,53,218,.5), rgba(42,114,226,.7)) border-box; }
.dots { background-image: radial-gradient(rgba(141,180,242,.16) 1px, transparent 1.2px); background-size: 22px 22px; }
.dots-light { background-image: radial-gradient(rgba(2,12,69,.10) 1px, transparent 1.2px); background-size: 22px 22px; }
:focus-visible { outline: 2px solid #E449B1; outline-offset: 3px; border-radius: 6px; }

/* Ambient hero glow */
.aurora { position:absolute; inset:-20% -10% auto -10%; height: 140%; pointer-events:none; filter: blur(70px); opacity:.55; }
.aurora span { position:absolute; border-radius:50%; mix-blend-mode: screen; animation: drift 26s ease-in-out infinite alternate; }
.aurora span:nth-child(1) { width: 520px; height: 520px; left: 52%; top: 4%; background: #6235DA; }
.aurora span:nth-child(2) { width: 420px; height: 420px; left: 72%; top: 30%; background: #E449B1; opacity:.55; animation-duration: 32s; }
.aurora span:nth-child(3) { width: 480px; height: 480px; left: 30%; top: 40%; background: #2A72E2; opacity:.6; animation-duration: 38s; }
@keyframes drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-60px, 40px) scale(1.15); } }

/* Isometric floor */
.iso .fT { fill:#24338F; } .iso .fJ { fill:#111C66; } .iso .fI { fill:#0A1350; }
.iso polygon { stroke: rgba(160,180,255,.14); stroke-width: .8; stroke-linejoin: round; }
.iso .conv .fT { fill:#1A2577; } .iso .rack .fT { fill:#3A3F8A; } .iso .rack .fJ { fill:#252A6E; } .iso .rack .fI { fill:#1B1F5A; }
.iso .post .fT, .iso .post .fJ, .iso .post .fI { fill:#3B2C9E; }
.stage { opacity:0; animation: rise .8s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d, 0s); }
@keyframes rise { from { opacity:0; transform: translateY(26px); } to { opacity:1; transform: translateY(0); } }
.beam { stroke-dasharray: 140; stroke-dashoffset: 140; animation: draw 1s ease-out forwards; animation-delay: var(--d, 1.4s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.lightflow { stroke-dasharray: 18 26; animation: flow 1.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -44; } }
.blink { animation: blink 1.6s ease-in-out infinite; } @keyframes blink { 50% { opacity:.25; } }
.hcard { opacity:0; transform: translate(-50%, -100%); animation: pop .6s cubic-bezier(.2,.9,.25,1.2) forwards; animation-delay: var(--d, 1.8s); }
@keyframes pop { from { opacity:0; transform: translate(-50%, calc(-100% + 12px)) scale(.94); } to { opacity:1; transform: translate(-50%, -100%) scale(1); } }
.hcard::after { content:""; position:absolute; left:50%; bottom:-7px; width:12px; height:12px; transform: translateX(-50%) rotate(45deg); background: inherit; border-right:1px solid rgba(164,139,240,.35); border-bottom:1px solid rgba(164,139,240,.35); }
.glass { background: rgba(7,20,99,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border:1px solid rgba(164,139,240,.35); box-shadow: 0 18px 50px -12px rgba(1,7,43,.8); }

/* Ticker */
.ticker { animation: tick 60s linear infinite; } .ticker-wrap:hover .ticker { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

/* Drift chart */
.drift-line { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 2.6s cubic-bezier(.4,.1,.2,1); }
.drift-on .drift-line { stroke-dashoffset: 0; }
.drift-mark { opacity:0; transition: opacity .5s ease; }
.drift-on .drift-mark { opacity:1; }
.drift-on .dm1 { transition-delay: 1.3s; } .drift-on .dm2 { transition-delay: 2.1s; } .drift-on .dm3 { transition-delay: 2.6s; } .drift-on .dm4 { transition-delay: 1.6s; }

/* Architecture */
.slab[aria-pressed="true"] { background: rgba(98,53,218,.18); border-color: rgba(228,73,177,.7); }
.slab[aria-pressed="true"] .slab-dot { background: linear-gradient(135deg,#E449B1,#2A72E2); box-shadow: 0 0 18px rgba(228,73,177,.6); }
.vflow { stroke-dasharray: 4 9; animation: flow 1s linear infinite; }

/* Screens */
.ring circle { transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1); }
.bar { transition: width .8s cubic-bezier(.2,.8,.2,1); }
.gblock { transition: left .5s cubic-bezier(.2,.8,.2,1), width .5s; }
.fade { animation: fade .35s ease-out both; } @keyframes fade { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }
.pulse { position:relative; display:inline-block; width:7px; height:7px; border-radius:99px; }
.pulse::after { content:""; position:absolute; inset:0; border-radius:99px; background:inherit; animation: ring 1.8s ease-out infinite; }
@keyframes ring { from { transform: scale(.7); opacity:.9; } to { transform: scale(2.6); opacity:0; } }
.dark-scroll::-webkit-scrollbar { width:6px; height:6px; } .dark-scroll::-webkit-scrollbar-thumb { background: rgba(164,139,240,.35); border-radius:6px; }

/* Tabs, sliders, nav */
.ind[aria-selected="true"] { color: #020C45; } .ind[aria-selected="true"] .ind-line { transform: scaleX(1); }
.ind-line { transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
input[type=range] { -webkit-appearance:none; appearance:none; height:4px; border-radius:99px; background: linear-gradient(90deg, #E449B1, #6235DA var(--p,50%), rgba(255,255,255,.15) var(--p,50%)); outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:5px solid #6235DA; cursor:pointer; }
input[type=range]::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:#fff; border:5px solid #6235DA; cursor:pointer; }
.mega { visibility:hidden; opacity:0; transform: translateY(6px); transition: all .18s ease; }
.nav-item:hover .mega, .nav-item:focus-within .mega { visibility:visible; opacity:1; transform:none; }
.nav-link[aria-current="page"] { color: #fff; }
.nav-link[aria-current="page"]::after { content:""; position:absolute; left:14px; right:14px; bottom:-2px; height:2px; border-radius:2px; background: linear-gradient(90deg,#E449B1,#2A72E2); }
.subnav a[aria-current="true"] { color:#fff; background:#020C45; }
.pagenav a[aria-current="page"] { color:#fff; background:#020C45; }
.sidenav a[aria-current="true"] { color:#020C45; font-weight:600; }

/* Page transitions: header stays, content slides */
main { animation: pageIn .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pageIn { from { opacity:0; transform: translateY(18px); } to { opacity:1; transform:none; } }
body.leaving main, body.leaving footer { opacity:0; transform: translateY(-10px); transition: opacity .22s ease, transform .22s ease; }
#pagebar { position:fixed; top:0; left:0; height:3px; width:100%; z-index:200; background: linear-gradient(90deg,#E449B1,#6235DA,#2A72E2); transform-origin:left; animation: barIn .7s ease-out both; pointer-events:none; }
@keyframes barIn { 0% { transform: scaleX(0); opacity:1; } 70% { transform: scaleX(1); opacity:1; } 100% { transform: scaleX(1); opacity:0; } }
body.leaving #pagebar { animation: barOut .24s ease-in both; }
@keyframes barOut { from { transform: scaleX(0); opacity:1; } to { transform: scaleX(.6); opacity:1; } }
details.faq summary { list-style: none; } details.faq summary::-webkit-details-marker { display:none; }
details.faq[open] .faq-icon { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ticker { animation: none !important; }
}

.ben-bar { transform-origin:left; animation: benBar 6s linear both; }
@keyframes benBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#benPanel:hover .ben-bar { animation-play-state: paused; }

.tour-flow { animation: tourFlow 1.2s linear infinite; }
@keyframes tourFlow { to { stroke-dashoffset: -14; } }