@font-face{font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Concept "The Data Hall": the site is an isometric data centre you move through.
   Navy hall scenes alternate with soft blue-grey light sections. Sky = live systems, gold = DR and primary actions. */
:root{
  --navy:#0B1426; --navy-2:#0F1B31; --navy-3:#08101F; --line:#22324F; --line-2:#2E4568;
  --sky:#3BA9D9; --sky-lt:#6CC6EC; --sky-deep:#114F6E;
  --gold:#D4A843; --gold-lt:#E8C56A; --gold-ink:#1A1405;
  --paper:#E4EBF4; --card:#F2F6FB; --rule:#C9D6E6;
  --ink:#1E293B; --ink-2:#3B495C;
  --on:#EEF3F9; --on-2:#C7D4E5; --on-lead:#DCE5F0; --on-3:#A9BAD1;
  --ok:#35C77B; --bad:#E5534B;
  --disp:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1360px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--navy)}
h1,h2,h3,h4{font-family:var(--disp);margin:0;text-wrap:balance;letter-spacing:-.015em}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.band{padding-left:max(16px,4vw,env(safe-area-inset-left,0px));padding-right:max(16px,4vw,env(safe-area-inset-right,0px))}
.wrap{max-width:var(--wrap);margin:0 auto}
.skip{position:fixed;left:16px;top:-80px;z-index:60;background:var(--gold);color:var(--gold-ink);font-weight:700;padding:12px 18px;border-radius:999px}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}

.dark{background:radial-gradient(1100px 700px at 75% 40%,#132B52 0,transparent 70%),var(--navy);color:var(--on)}
.deep{background:radial-gradient(900px 600px at 20% 20%,#10244A 0,transparent 70%),var(--navy-3);color:var(--on)}
.light{background:linear-gradient(180deg,#B9C9DE 0,#D5E0EC 70px,var(--paper) 200px,var(--paper) calc(100% - 200px),#D5E0EC calc(100% - 70px),#B9C9DE 100%);color:var(--ink)}
section{padding-block:104px}
.h2{font-size:clamp(32px,4vw,54px);font-weight:700;line-height:1.08;max-width:19ch}
.lead{font-size:18.5px;max-width:56ch;color:var(--ink-2)}
.dark .lead,.deep .lead{color:var(--on-lead)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:end;margin-bottom:52px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:999px;font-family:var(--disp);font-weight:700;font-size:16px;border:1.5px solid transparent;cursor:pointer;background:transparent;transition:background .15s,border-color .15s,box-shadow .2s}
.btn-gold{background:var(--gold);color:var(--gold-ink);box-shadow:0 0 0 0 rgba(212,168,67,0)}
.btn-gold:hover{background:var(--gold-lt);box-shadow:0 0 24px rgba(212,168,67,.35)}
.btn-ghost{border-color:var(--line-2);color:var(--on)}
.btn-ghost:hover{border-color:var(--sky);background:rgba(59,169,217,.1)}
.btn-navy{background:var(--navy);color:var(--on)}
.btn-navy:hover{background:#16284A}
.btn[disabled]{opacity:.5;cursor:default;box-shadow:none}

/* header */
.note{background:#F1E6C8;color:#5E4810;font-size:14px;text-align:center;padding-block:7px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(11,20,38,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px;position:relative}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:42px;width:auto;display:block}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand b{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:.16em;color:var(--sky-lt)}
.brand small{font-family:var(--disp);font-size:11px;letter-spacing:.5em;color:var(--gold);font-weight:600;margin-top:5px}
.links{display:flex;gap:26px;font-family:var(--disp);font-weight:500;font-size:16px;color:var(--on-2)}
.links a{padding-block:10px}
.links a:hover{color:var(--on)}
.menu{display:none;width:46px;height:46px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--on);cursor:pointer;place-items:center}
.menu svg{width:22px;height:22px}

/* isometric scenes (shared) */
.iso{display:block;width:100%;height:auto;overflow:visible}
.tile{fill:#0D1830;stroke:#1B2B48;stroke-width:.6}
.tile.b{fill:#0B152B}
.rk .ft{fill:#1A2C4C;stroke:#3BA9D9;stroke-width:.8}
.rk .fl{fill:#0F1D36;stroke:#3BA9D9;stroke-width:.8}
.rk .fr{fill:#13254A;stroke:#3BA9D9;stroke-width:.8}
.rk .led{fill:#6CC6EC}
.rk .led:nth-child(3n){fill:#35C77B}
.rk.dr .ft{fill:#3A3016;stroke:#D4A843}.rk.dr .fl{fill:#241E0E;stroke:#D4A843}.rk.dr .fr{fill:#2E2711;stroke:#D4A843}.rk.dr .led{fill:#E8C56A}
.rk .ft,.rk .fl,.rk .fr,.rk .led{transition:fill .5s,stroke .5s,opacity .5s}
.vault .ft{fill:#13213A;stroke:#6CC6EC;stroke-width:1}.vault .fl{fill:#0B1426;stroke:#6CC6EC;stroke-width:1}.vault .fr{fill:#0F1B31;stroke:#6CC6EC;stroke-width:1}
.door{fill:rgba(212,168,67,.08);stroke:#D4A843;stroke-width:1.2;stroke-dasharray:5 4}
.glass{fill:rgba(108,198,236,.05);stroke:rgba(108,198,236,.35);stroke-width:1}
.tray{fill:none;stroke-width:2;stroke-dasharray:6 10}
.tray.sk{stroke:#6CC6EC}.tray.gd{stroke:#E8C56A}
.trayb{fill:none;stroke-width:4;opacity:.25}
.trayb.sk{stroke:#3BA9D9}.trayb.gd{stroke:#D4A843}
.iso .lbl{font-family:var(--disp);font-weight:700;font-size:14px;fill:var(--on)}
.iso .lbl.g{fill:#E8C56A}
.cpill{fill:rgba(42,36,16,.92);stroke:#D4A843;stroke-width:1}
.ctxt{font-family:var(--disp);font-weight:600;font-size:12.5px;fill:#F3E2B5}
.cl-lead{fill:none;stroke:#D4A843;stroke-width:1;stroke-dasharray:3 3}
.pkt{fill:#E8F7FF;filter:drop-shadow(0 0 5px #6CC6EC)}
@media (prefers-reduced-motion:no-preference){
  .led{animation:blink 1.6s steps(2,jump-none) infinite}
  .tray{animation:flow 1.4s linear infinite}
}
@keyframes blink{50%{opacity:.25}}
@keyframes flow{to{stroke-dashoffset:-64}}

/* hero */
.hero{padding-block:56px 40px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center}
.hero h1{font-size:clamp(40px,4.6vw,68px);font-weight:700;line-height:1.04;letter-spacing:-.025em}
.hero h1 span{display:block;background:linear-gradient(90deg,var(--sky-lt),#DCEFFA);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{margin-top:24px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.creds span{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:600;font-size:14.5px;border:1px solid var(--line-2);background:rgba(15,27,49,.6);border-radius:999px;padding:6px 14px;color:var(--on)}
.creds span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.hero-art{position:relative}
.chip{position:absolute;font:600 13.5px var(--disp);background:rgba(11,20,38,.88);border:1px solid var(--line-2);border-radius:999px;padding:6px 13px;color:var(--on);white-space:nowrap;pointer-events:none}
.chip i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:var(--sky-lt);box-shadow:0 0 8px var(--sky-lt)}
.chip.g i{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.selfck{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-weight:600;color:var(--sky-lt);text-decoration:underline;text-decoration-color:rgba(108,198,236,.4);text-underline-offset:5px}
.selfck:hover{color:var(--on);text-decoration-color:var(--gold)}

/* proof */
.proof{border-block:1px solid var(--line);padding-block:0}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.pf{padding:26px 22px;border-left:1px solid var(--line)}
.pf:first-child{border-left:0;padding-left:0}
.pf b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(38px,4vw,54px);line-height:1;color:var(--gold);text-shadow:0 0 22px rgba(212,168,67,.35)}
.pf span{display:block;font-family:var(--disp);font-weight:600;color:var(--on);margin-top:6px}
.pf small{display:block;font-size:14px;color:var(--on-2)}

/* vendor marquee */
.tech{padding-block:30px;overflow:hidden}
.tech p{text-align:center;font-family:var(--disp);font-weight:600;font-size:15px;color:var(--on-3);margin-bottom:16px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:14px;width:max-content}
@media (prefers-reduced-motion:no-preference){.track{animation:marq 36s linear infinite}.marquee:hover .track{animation-play-state:paused}}
@keyframes marq{to{transform:translateX(-50%)}}
.vend{display:flex;align-items:center;gap:10px;padding:12px 24px;border-radius:14px;background:rgba(19,33,58,.75);border:1px solid var(--line-2);font-family:var(--disp);font-weight:700;font-size:21px;color:#F2F6FB;text-shadow:0 0 14px rgba(108,198,236,.5);white-space:nowrap}
.vend::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sky-lt);box-shadow:0 0 10px var(--sky-lt)}
.vend.g::before{background:var(--gold);box-shadow:0 0 10px var(--gold)}

/* services: rack room */
.svc-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px;align-items:stretch}
.window{background:radial-gradient(600px 400px at 50% 40%,#132B52 0,transparent 75%),var(--navy);border-radius:22px;padding:18px;box-shadow:0 22px 50px rgba(11,20,38,.22);position:relative;overflow:hidden}
.window .hint{position:absolute;left:22px;bottom:16px;font-size:14px;color:var(--on-3)}
.svc-rk{cursor:pointer}
.svc-rk .rcode{font-family:var(--disp);font-weight:700;font-size:12.5px;fill:var(--on-2);text-anchor:middle;transition:fill .3s}
.svc-rk g{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.svc-rk.sel g{transform:translateY(-12px)}
.svc-rk.sel .ft{fill:#4A3C14;stroke:#E8C56A}.svc-rk.sel .fl{fill:#2E2711;stroke:#E8C56A}.svc-rk.sel .fr{fill:#3A3016;stroke:#E8C56A}.svc-rk.sel .led{fill:#E8C56A}
.svc-rk.sel .rcode{fill:#E8C56A}
.svc-rk:hover .ft{stroke:#E8C56A}
.plates{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.plates button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--rule);background:var(--card);color:var(--ink-2);font-family:var(--disp);font-weight:600;font-size:15px;cursor:pointer;box-shadow:0 2px 8px rgba(11,20,38,.05)}
.plates button i{font-style:normal;font-weight:700;font-size:12.5px;color:var(--sky-deep)}
.plates button:hover{border-color:var(--sky)}
.plates button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:var(--on)}
.plates button[aria-selected="true"] i{color:var(--gold)}
.detail{background:var(--card);border:1px solid var(--rule);border-radius:22px;padding:34px 34px 30px;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 26px rgba(11,20,38,.07)}
.detail .ref{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;font-size:14px;color:var(--sky-deep);background:#DCEBF5;border-radius:999px;padding:4px 12px}
.detail h3{font-size:clamp(28px,2.8vw,38px);font-weight:700;line-height:1.05}
.detail>p{font-size:18px;color:var(--ink-2)}
.detail ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--rule)}
.detail li{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--rule);font-size:16.5px}
.detail li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(212,168,67,.18);flex:none}
.detail a{margin-top:auto;align-self:flex-start}

/* walkthrough (scroll story) */
.walk{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:start}
.walk-scene{position:sticky;top:96px;border-radius:24px;border:1px solid var(--line-2);background:radial-gradient(700px 500px at 50% 45%,#132B52 0,transparent 75%),var(--navy-2);overflow:hidden}
.walk-scene .tag{position:absolute;left:20px;top:18px;font:700 15px var(--disp);color:var(--on);background:rgba(11,20,38,.85);border:1px solid var(--line-2);border-radius:999px;padding:6px 14px;transition:opacity .3s}
.zone{transition:opacity .7s}
.walk-scene[data-f="build"] .zone:not(.z-build),
.walk-scene[data-f="protect"] .zone:not(.z-protect),
.walk-scene[data-f="recover"] .zone:not(.z-recover),
.walk-scene[data-f="extend"] .zone:not(.z-extend){opacity:.18}
.steps{display:grid;gap:0}
.step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;gap:12px;padding-block:20px}
.step:first-child{min-height:50vh;justify-content:flex-start;padding-top:40px}
.step .lv{display:inline-flex;align-self:flex-start;gap:8px;align-items:center;font:700 14px var(--disp);color:var(--sky-lt);border:1px solid var(--line-2);border-radius:999px;padding:4px 12px}
.step.g .lv{color:var(--gold-lt);border-color:#5C4A1E}
.step h3{font-size:clamp(28px,3vw,40px);font-weight:700;line-height:1.05}
.step p{color:var(--on-lead);font-size:18px;max-width:42ch}
.step ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.step li{font-size:14px;border:1px solid var(--line-2);background:rgba(19,33,58,.6);border-radius:999px;padding:4px 12px;color:var(--on-2)}
.walk-end{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.walk-end div{border-top:1px solid var(--line-2);padding-top:14px;color:var(--on-lead);font-size:16px}
.walk-end b{display:block;font-family:var(--disp);font-size:18px;color:var(--on)}

/* rack build */
.build{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center}
.ticks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.ticks li{display:flex;gap:12px;align-items:center;font-size:17px}
.ticks li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(212,168,67,.18);flex:none}
.brk .ft{stroke-width:.9}.brk .lt .ft{fill:#22395F;stroke:#6CC6EC}.brk .lt .fl{fill:#16294A;stroke:#6CC6EC;stroke-width:.9}.brk .lt .fr{fill:#1A2F52;stroke:#6CC6EC;stroke-width:.9}
.brk .dk .ft{fill:#101C33;stroke:#3BA9D9}.brk .dk .fl{fill:#0B1426;stroke:#3BA9D9;stroke-width:.9}.brk .dk .fr{fill:#0E1A31;stroke:#3BA9D9;stroke-width:.9}
.brk .gd .ft{fill:#3A3016;stroke:#D4A843}.brk .gd .fl{fill:#241E0E;stroke:#D4A843;stroke-width:.9}.brk .gd .fr{fill:#2E2711;stroke:#D4A843;stroke-width:.9}
.brk .post{stroke:#8FA6C4;stroke-width:2}
.brk .ldr{fill:none;stroke:#5E7699;stroke-width:1}
.brk .lb{font-family:var(--disp);font-weight:700;font-size:14px;fill:var(--on)}
.brk .ldot{fill:#E8C56A}

/* DR drill in the hall */
.drill{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:22px}
.dscene{border-radius:24px;border:1px solid var(--line-2);background:radial-gradient(700px 500px at 50% 45%,#132B52 0,transparent 75%),var(--navy-2);position:relative;overflow:hidden;display:flex;flex-direction:column}
.dscene .status{position:absolute;left:18px;top:16px;display:inline-flex;align-items:center;gap:8px;font:600 14px var(--disp);padding:6px 14px;border-radius:999px;border:1px solid #1F6B4A;background:#0C2A20;color:#BFF0D3;transition:all .3s;z-index:2}
.dscene .status i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.dscene .status.down{border-color:#7A2B27;background:#2C1110;color:#F6C1BD}.dscene .status.down i{background:var(--bad)}
.dscene .status.work{border-color:#6B561E;background:#2A2410;color:#F3E2B5}.dscene .status.work i{background:var(--gold)}
.dscene .iso{margin-top:auto}
.failed .rk.prod.off .ft{fill:#3A1715;stroke:#E5534B}.failed .rk.prod.off .fl{fill:#2A1010;stroke:#E5534B}.failed .rk.prod.off .fr{fill:#321313;stroke:#E5534B}
.failed .rk.prod.off .led{fill:#E5534B;opacity:.4;animation:none}
.standby .rk.dr:not(.on) .ft{fill:#141A26;stroke:#5C4A1E}.standby .rk.dr:not(.on) .fl{fill:#0F131C;stroke:#5C4A1E}.standby .rk.dr:not(.on) .fr{fill:#12161F;stroke:#5C4A1E}
.standby .rk.dr:not(.on) .led{opacity:.15;animation:none}
.failed .pkt,.failed .z-recover .tray{opacity:0}
.panel{border-radius:24px;border:1px solid var(--line-2);background:rgba(15,27,49,.8);display:flex;flex-direction:column}
.panel h3{font-size:18px;font-weight:700;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.panel ol{list-style:none;margin:0;padding:6px 0}
.panel li{display:grid;grid-template-columns:22px minmax(0,1fr) 50px;gap:10px;align-items:center;padding:8px 20px;font-size:15px;color:var(--on-3);transition:color .3s}
.panel li::before{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line-2);transition:all .3s}
.panel li .tm{font-family:var(--disp);font-weight:700;font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.panel li.done{color:var(--on)}
.panel li.done::before{background:var(--ok);border-color:var(--ok);box-shadow:0 0 8px rgba(53,199,123,.6)}
.panel li.bad::before{background:var(--bad);border-color:var(--bad);box-shadow:0 0 8px rgba(229,83,75,.6)}
.panel li.now{color:var(--gold-lt)}
.panel li.now::before{border-color:var(--gold)}
.readout{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-2)}
.readout div{padding:14px 20px}
.readout div+div{border-left:1px solid var(--line-2)}
.readout span{display:block;font-size:13.5px;color:var(--on-3)}
.readout b{display:block;font-family:var(--disp);font-weight:700;font-size:34px;line-height:1.1;font-variant-numeric:tabular-nums}
.ctrl{display:flex;flex-wrap:wrap;gap:10px;padding:16px 20px;border-top:1px solid var(--line-2);margin-top:auto}
.ctrl p{flex-basis:100%;font-size:13.5px;color:var(--on-3)}

/* process */
.route{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;position:relative}
.route::before{content:"";position:absolute;left:8%;right:8%;top:30px;height:2px;background:repeating-linear-gradient(90deg,var(--sky) 0 8px,transparent 8px 16px)}
.stop{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.stop svg{width:72px;height:56px;position:relative}
.stop .t1{fill:#F2F6FB;stroke:var(--sky-deep);stroke-width:1.4}.stop .t2{fill:#C9D6E6;stroke:var(--sky-deep);stroke-width:1.4}.stop .t3{fill:#B0C3DA;stroke:var(--sky-deep);stroke-width:1.4}
.stop:last-child .t1{fill:#E8C56A;stroke:#8A6A1E}.stop:last-child .t2{fill:#C99B33;stroke:#8A6A1E}.stop:last-child .t3{fill:#B08526;stroke:#8A6A1E}
.stop svg text{font-family:var(--disp);font-weight:700;font-size:15px;fill:var(--navy)}
.stop h3{font-size:22px;font-weight:700}
.stop p{color:var(--ink-2);font-size:16px;max-width:22ch}
.doc{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;font-size:14px;border:1px solid var(--rule);background:var(--card);border-radius:999px;padding:5px 12px;color:var(--ink)}
.doc::before{content:"";width:8px;height:10px;border:1.5px solid var(--gold);border-radius:1px}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:start}
.reasons{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px}
.reasons li{border:1px solid var(--line-2);background:rgba(15,27,49,.6);border-radius:16px;padding:16px 20px}
.reasons b{display:block;font-family:var(--disp);font-size:19px;color:var(--on)}
.reasons span{color:var(--on-lead);font-size:16px}
.vcix{font-family:var(--disp);font-weight:700;font-size:clamp(54px,6.4vw,92px);line-height:.95;letter-spacing:-.03em;color:var(--gold);text-shadow:0 0 34px rgba(212,168,67,.35)}
.vcix-sub{color:var(--on-lead);margin:12px 0 22px;max-width:46ch}
.certs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.certs div{border:1px solid var(--line-2);background:rgba(15,27,49,.6);border-radius:14px;padding:12px 14px}
.certs b{display:block;font-family:var(--disp);font-size:16.5px;color:var(--on)}
.certs span{font-size:13.5px;color:var(--on-2)}
.certs .g{border-color:#5C4A1E}.certs .g b{color:var(--gold-lt)}

/* industries + faq */
.ind{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ind div{background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:26px 24px;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 8px 20px rgba(11,20,38,.06)}
.ind h3{font-size:21px;font-weight:700}
.ind p{color:var(--ink-2);font-size:16px;margin-top:6px}
.ind ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px;font-size:15.5px}
.ind li{display:flex;gap:10px;align-items:center}
.ind li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}
.faq{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:64px;margin-top:104px}
details{background:var(--card);border:1px solid var(--rule);border-radius:16px;margin-bottom:10px}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:8px 22px;font-family:var(--disp);font-weight:700;font-size:18.5px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--sky-deep);border-bottom:2px solid var(--sky-deep);transform:rotate(45deg);transition:transform .2s;flex:none}
details[open] summary::after{transform:rotate(-135deg)}
details p{color:var(--ink-2);padding:0 22px 20px;max-width:64ch}

/* self-check */
.ck{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:24px;align-items:start}
.qs{display:grid;gap:10px}
.qs .ex{font-size:14.5px;color:var(--on-3)}
.qrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;border:1px solid var(--line-2);background:rgba(15,27,49,.6);border-radius:16px;padding:12px 18px}
.qrow p{color:var(--on);font-size:16px}
.qrow.no{border-color:#5A3A2E}
.seg{display:flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden}
.seg button{min-width:64px;min-height:44px;padding:0 14px;background:transparent;color:var(--on-2);border:0;cursor:pointer;font-family:var(--disp);font-weight:700;font-size:15px}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button[aria-checked="true"][data-v="1"]{background:#0F3A24;color:#BFF0D3}
.seg button[aria-checked="true"][data-v="0"]{background:#3A1A16;color:#F6C1BD}
.result{border:1px solid var(--line-2);background:linear-gradient(180deg,#13213A,#0F1B31);border-radius:24px;padding:26px;display:grid;gap:12px;position:sticky;top:100px}
.dial{display:flex;align-items:center;gap:18px}
.dial svg{width:112px;height:112px;flex:none;transform:rotate(-90deg)}
.dial .tr{fill:none;stroke:var(--line);stroke-width:10}
.dial .vv{fill:none;stroke:var(--gold);stroke-width:10;stroke-linecap:round;stroke-dasharray:301.6;stroke-dashoffset:150;transition:stroke-dashoffset .5s,stroke .3s}
.dial b{display:block;font-family:var(--disp);font-weight:700;font-size:46px;line-height:1}
.dial span{font-size:14px;color:var(--on-3)}
.verdict{font-family:var(--disp);font-weight:700;font-size:24px;color:var(--gold)}
.result>p{color:var(--on-lead)}
.result h3{font-size:16px;font-weight:700;margin-top:4px}
.result ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.result li{display:flex;gap:10px;color:var(--on-2);font-size:15px}
.result li::before{content:"";width:8px;height:8px;border-radius:50%;margin-top:8px;flex:none;background:var(--gold)}
.result small{font-size:13.5px;color:var(--on-3)}

/* contact + footer */
.contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.pkg{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.pkg span{font-size:14.5px;border:1px solid var(--line-2);border-radius:999px;padding:5px 13px;color:var(--on-2)}
.reach{display:grid;gap:12px}
.rc{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:center;border:1px solid var(--line-2);background:rgba(15,27,49,.7);border-radius:18px;padding:18px 20px;transition:border-color .2s}
a.rc:hover{border-color:var(--sky)}
.rc .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:#13213A;color:var(--sky-lt)}
.rc.wa .ic{background:#0F3A24;color:#5BE08F}
.rc .ic svg{width:24px;height:24px}
.rc b{display:block;font-family:var(--disp);font-size:18px}
.rc span{font-size:16px;color:var(--on-2);overflow-wrap:anywhere}
footer{padding-block:52px 28px;color:var(--on-2);font-size:15px;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
footer h3{color:var(--on);font-size:16px;font-weight:700;margin:0 0 8px}
footer ul{list-style:none;padding:0;margin:0}
footer li{min-height:38px;display:flex;align-items:center}
footer li a{display:inline-flex;align-items:center;min-height:38px}
footer li a:hover{color:var(--on)}
.fbot{border-top:1px solid var(--line);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:14px;color:var(--on-3)}
.wa-float{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:25;width:56px;height:56px;border-radius:50%;background:#1E9E52;color:#EEF3F9;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.wa-float svg{width:28px;height:28px}


/* services cards with small animated drawings */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.card{background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:16px 16px 22px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 8px 22px rgba(11,20,38,.07);transition:border-color .2s,box-shadow .2s}
.card:hover{border-color:#A9D6EC;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 14px 30px rgba(11,20,38,.11)}
.mini{border-radius:14px;background:radial-gradient(260px 160px at 50% 45%,#16305A 0,transparent 75%),var(--navy);margin-bottom:6px}
.mini svg{display:block;width:100%;height:auto}
.card .code{align-self:flex-start;margin:0 6px;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--sky-deep);background:#DCEBF5;border-radius:999px;padding:2px 10px}
.card h3{font-size:21px;font-weight:700;line-height:1.25;margin:0 6px}
.card p{color:var(--ink-2);font-size:16px;margin:0 6px}
.card ul{list-style:none;margin:2px 6px 0;padding:10px 0 0;border-top:1px solid var(--rule);display:grid;gap:6px;font-size:15.5px}
.card li{display:flex;gap:10px;align-items:center}
.card li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.card a{margin:auto 6px 0;padding-top:12px;align-self:flex-start;font-family:var(--disp);font-weight:600;font-size:15.5px;color:var(--sky-deep);border-bottom:2px solid var(--gold);min-height:44px;display:inline-flex;align-items:flex-end;padding-bottom:3px}
.card a:hover{color:var(--ink)}
.mini .doc{fill:#13213A;stroke:#6CC6EC;stroke-width:1}
.mini .ln{stroke:#6CC6EC;stroke-width:1.2;opacity:.8}
.mini .gk{fill:none;stroke:#E8C56A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mini .cloud{fill:rgba(108,198,236,.08);stroke:#6CC6EC;stroke-width:1.3}
.mini .mg{fill:none;stroke:#E8C56A;stroke-width:2.2}
@media (max-width:1100px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{margin:0 -4vw}
  .walk{grid-template-columns:1fr}
  .walk{gap:0}
  .walk-scene{order:-1;top:84px;z-index:2;box-shadow:0 14px 30px rgba(8,16,31,.7)}
  .step{min-height:62vh;justify-content:flex-end;padding-bottom:40px}
  .step:first-child{min-height:40vh;justify-content:flex-end}
  .drill,.svc-grid{grid-template-columns:1fr}
  .ind{grid-template-columns:1fr 1fr}
  .certs{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .links{display:none;position:absolute;left:calc(-1 * max(16px,4vw));right:calc(-1 * max(16px,4vw));top:100%;flex-direction:column;gap:0;background:var(--navy);border-bottom:1px solid var(--line);padding:6px max(16px,4vw) 14px}
  .links.open{display:flex}
  .links a{min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
  .nav>.btn{display:none}
  .menu{display:grid}
  .head,.build,.about,.faq,.contact,.ck{grid-template-columns:1fr;gap:26px}
  .pgrid{grid-template-columns:1fr 1fr}
  .pf:nth-child(3){border-left:0;padding-left:0}
  .pf:nth-child(n+3){border-top:1px solid var(--line)}
  .route{grid-template-columns:1fr;gap:18px}
  .route::before{left:35px;right:auto;top:10px;bottom:10px;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--sky) 0 8px,transparent 8px 16px)}
  .stop{display:grid;grid-template-columns:72px minmax(0,1fr);text-align:left;align-items:center;column-gap:16px;row-gap:4px}
  .stop svg{grid-row:1 / span 3}
  .stop p{max-width:none}
  .stop .doc{justify-self:start}
  .walk-end{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .result{position:static}
  .chip{display:none}
  footer li,footer li a{min-height:44px}
}
@media (max-width:640px){
  section{padding-block:72px}
  .pgrid{grid-template-columns:1fr}
  .pf{border-left:0!important;padding-left:0;border-top:1px solid var(--line)}
  .pf:first-child{border-top:0}
  .ind,.certs,.fgrid{grid-template-columns:1fr}
  .qrow{grid-template-columns:1fr}
  .detail{padding:24px 20px}
  .walk-scene .tag{font-size:13px}
  .readout b{font-size:28px}
  .brk .lb{font-size:17px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}