/* 14 · Security — a 3D server room seen from the side; requests pass five security gates */
.vault{position:relative;overflow:hidden;background:radial-gradient(1000px 520px at 45% 55%,#16205e 0%,rgba(22,32,94,0) 65%),#080a24}
.vault>.wrap{position:relative}
.vault .vault-accent{color:#8f96ff}
.vault .section-heading{margin-bottom:30px}
.vault-layout{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:36px;align-items:center}

/* scene */
.vault-scene{position:relative;height:560px;perspective:1700px;perspective-origin:50% 35%}
.vault-cam{position:absolute;left:50%;top:54%;width:0;height:0;transform-style:preserve-3d}
.vault-world{position:absolute;width:1000px;height:400px;left:-500px;top:-200px;transform-style:preserve-3d;
  transform:rotateX(var(--tx,60deg)) rotateZ(var(--tz,-36deg));will-change:transform}
.v-floor{position:absolute;inset:-40px -60px;border-radius:20px;
  background:linear-gradient(90deg,rgba(143,150,255,.10) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(rgba(143,150,255,.10) 1px,transparent 1px) 0 0/40px 40px,radial-gradient(ellipse at 60% 50%,#1a2266,#0c1038 70%);
  box-shadow:0 0 0 1px rgba(143,150,255,.2),0 0 120px rgba(79,86,255,.25)}
.v-path{position:absolute;left:0;right:150px;top:176px;height:48px;border-radius:24px;background:linear-gradient(90deg,rgba(111,118,255,.05),rgba(111,118,255,.22));box-shadow:inset 0 0 0 1px rgba(143,150,255,.25)}
.v-path::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,rgba(190,196,255,.5) 0 12px,transparent 12px 26px);animation:v-flow 1.4s linear infinite}
@keyframes v-flow{to{background-position:26px 0}}

/* gates: glass frames standing on the floor */
.v-gate{position:absolute;width:280px;height:200px;transform-origin:50% 100%;
  border-radius:16px 16px 4px 4px;border:2px solid rgba(143,150,255,.55);background:linear-gradient(rgba(111,118,255,.16),rgba(111,118,255,.04));
  box-shadow:0 0 24px rgba(111,118,255,.35),inset 0 0 30px rgba(111,118,255,.2);transition:border-color .3s,box-shadow .3s,background .3s}
.v-gate::before{content:"";position:absolute;left:8px;right:8px;top:8px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,#c9ccff,transparent);opacity:.0}
.v-gate span{position:absolute;left:50%;top:-34px;transform:translateX(-50%);white-space:nowrap;font:600 12px/1 'JetBrains Mono',Consolas,monospace;letter-spacing:.12em;color:#dfe2ff;background:rgba(10,12,40,.85);border:1px solid rgba(143,150,255,.4);border-radius:999px;padding:7px 11px}
.v-gate.scan{border-color:#c9ccff;box-shadow:0 0 40px rgba(143,150,255,.8),inset 0 0 50px rgba(143,150,255,.45);background:linear-gradient(rgba(143,150,255,.3),rgba(111,118,255,.08))}
.v-gate.scan::before{animation:v-scan .6s ease-in-out}
@keyframes v-scan{0%{top:8px;opacity:1}100%{top:calc(100% - 12px);opacity:0}}
.v-gate.deny{border-color:#ff7b8a;box-shadow:0 0 44px rgba(255,90,110,.8),inset 0 0 50px rgba(255,90,110,.35);background:linear-gradient(rgba(255,90,110,.28),rgba(255,90,110,.06))}
.v-gate.deny span{color:#ffd3d8;border-color:#ff7b8a}

/* boxes (racks, packets) */
.v-box{position:absolute;transform-style:preserve-3d}
.v-box>i{position:absolute;display:block}
.v-rack>i{background:linear-gradient(#1b2160,#11163f);box-shadow:inset 0 0 0 1px rgba(143,150,255,.35)}
.v-rack>i.f{background:repeating-linear-gradient(0deg,#131846 0 18px,#1a2060 18px 20px);box-shadow:inset 0 0 0 1px rgba(143,150,255,.45)}
.v-rack>i.t{background:#232a74;box-shadow:inset 0 0 0 1px rgba(160,168,255,.5)}
.v-led{position:absolute;width:5px;height:5px;border-radius:50%;background:#7dffb6;box-shadow:0 0 6px #7dffb6;animation:v-blink 1.6s steps(2) infinite}
.v-led.b{background:#8f96ff;box-shadow:0 0 6px #8f96ff}
@keyframes v-blink{50%{opacity:.25}}
.v-pk>i{background:#c9ccff;box-shadow:0 0 14px #8f96ff}
.v-pk>i.t{background:#fff}
.v-pk.bad>i{background:#ff7b8a;box-shadow:0 0 14px #ff5a6e}.v-pk.bad>i.t{background:#ffd3d8}
.v-pk.ok>i{background:#7dffb6;box-shadow:0 0 14px #3fe08f}.v-pk.ok>i.t{background:#d8ffe9}

/* code panel + API tags standing behind the racks */
.v-code{position:absolute;width:250px;height:150px;transform-origin:50% 100%;border-radius:12px;padding:14px 16px;
  background:rgba(10,13,44,.92);border:1px solid rgba(143,150,255,.5);box-shadow:0 0 40px rgba(79,86,255,.4);
  font:500 11.5px/1.75 'JetBrains Mono',Consolas,monospace;color:#b9bef0;white-space:pre}
.v-code b{color:#8f96ff;font-weight:500}.v-code em{color:#7dffb6;font-style:normal}
.v-api{position:absolute;width:110px;height:30px;box-sizing:border-box;transform-origin:50% 100%;text-align:center;font:600 11px/1 'JetBrains Mono',Consolas,monospace;letter-spacing:.1em;color:#fff;padding:9px 0;border-radius:999px;background:linear-gradient(135deg,#3d43c9,#6f76ff);box-shadow:0 0 24px rgba(111,118,255,.7)}
.v-wire{position:absolute;height:2px;transform-origin:0 50%;background:repeating-linear-gradient(90deg,#8f96ff 0 8px,transparent 8px 14px);box-shadow:0 0 8px #6f76ff;animation:v-flow 1s linear infinite}
.vault-live{position:absolute;left:4px;bottom:6px;display:flex;align-items:center;gap:8px;font:600 10px/1 'JetBrains Mono',Consolas,monospace;letter-spacing:.18em;color:#8f96ff}
.vault-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#7dffb6;animation:v-blink 1.4s steps(2) infinite}

/* layer list */
.vault-layers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.vault-layers li{position:relative;display:grid;grid-template-columns:30px 1fr 22px;gap:12px;align-items:center;padding:13px 14px;border-radius:14px;border:1px solid rgba(160,168,255,.14);background:rgba(255,255,255,.02);transition:background .4s,border-color .4s}
.vault-layers b{font:500 11px/1 'JetBrains Mono',Consolas,monospace;color:#8f96ff}
.vault-layers strong{display:block;font-size:14.5px;font-weight:500;color:#fff;margin-bottom:2px}
.vault-layers span{font-size:12px;line-height:1.5;color:#a9b0dc}
.vault-layers em{width:20px;height:20px;border-radius:50%;border:1.5px solid #4a4f9a;display:grid;place-items:center;font-style:normal;font-size:11px;color:#fff;transition:background .3s,border-color .3s}
.vault-layers li.on{background:rgba(111,118,255,.14);border-color:rgba(143,150,255,.5)}
.vault-layers li.on em{background:#6f76ff;border-color:#6f76ff}.vault-layers li.on em::after{content:"✓"}
.vault-layers li.deny{background:rgba(255,90,110,.12);border-color:rgba(255,123,138,.55)}
.vault-layers li.deny em{background:#ff5a6e;border-color:#ff5a6e}.vault-layers li.deny em::after{content:"×"}
.vault-layers .vault-core{grid-template-columns:30px 1fr;background:linear-gradient(90deg,rgba(111,118,255,.2),rgba(111,118,255,.04));border-color:rgba(143,150,255,.35)}
.vault-layers .vault-core b{color:#7dffb6}
.vault-layers .vault-core.on{box-shadow:0 0 30px -6px rgba(125,255,182,.5);border-color:rgba(125,255,182,.6)}

/* counters + certs */
.vault-stats{display:flex;gap:40px;margin:26px 0 0}
.vault-stats b{font-size:clamp(30px,3vw,44px);font-weight:400;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.vault-stats .vault-no{color:#ff9aa6}
.vault-stats span{display:block;font:500 10px/1 'JetBrains Mono',Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:#8d93c9;margin-top:6px}
.vault-certs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px}
.vault-certs>div{display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:18px;border:1px solid rgba(160,168,255,.2);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015))}
.vault-seal{flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;text-align:center;font:700 11px/1.15 'JetBrains Mono',Consolas,monospace;letter-spacing:.06em;color:#fff;
  background:radial-gradient(circle at 35% 30%,#7a80ff,#2a2d9f 70%);box-shadow:0 0 0 4px rgba(143,150,255,.18),0 0 0 5px rgba(143,150,255,.45),0 10px 30px -8px rgba(79,86,255,.8)}
.vault-certs strong{display:block;font-size:15px;font-weight:500;color:#fff;margin-bottom:3px}
.vault-certs span:not(.vault-seal){font-size:12px;line-height:1.55;color:#a9b0dc}

@media(max-width:1100px){.vault-layout{grid-template-columns:1fr}.vault-scene{height:500px}}
@media(max-width:760px){.vault-scene{height:360px}.vault-world{scale:.6}.vault-certs{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.v-path::after,.v-wire,.v-led,.vault-live::before{animation:none}}
.vault-cam{top:58%;scale:.8}
.vault-scene{height:540px}
@media(max-width:760px){.vault-cam{scale:.5}.vault-world{scale:1}}
.vault .section-heading{margin-bottom:64px}.vault-cam{top:62%}
.vault-stats,.vault-certs{position:relative;z-index:2}.vault-scene{z-index:1}
.v-gate span{display:none}
.v-gi{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:18px;gap:8px}
.v-gi b{font:600 13px/1 'JetBrains Mono',Consolas,monospace;letter-spacing:.12em;color:#a3a8ff}
.v-gi strong{font:600 26px/1.1 Poppins,Arial,sans-serif;letter-spacing:-.02em;color:#fff;text-shadow:0 0 18px rgba(111,118,255,.8)}
.v-gi small{font:500 14px/1.35 Poppins,Arial,sans-serif;color:#d3d6ff;max-width:220px}
.v-gate.deny .v-gi strong{text-shadow:0 0 18px rgba(255,90,110,.9)}
.v-gi{justify-content:flex-start;padding-top:22px}
.vault-certs{margin-top:34px}

/* centred turntable: list removed, scene spans the full width and turns slowly */
.vault-layout{grid-template-columns:1fr}
.vault-scene{height:640px}
.vault-cam{top:60%;scale:1}
.v-gate,.v-code,.v-api{transform-style:preserve-3d}
.v-gi,.v-cf,.v-af{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.v-gi.bk,.v-cf.bk,.v-af.bk{transform:rotateY(180deg)}
.v-code{padding:0}
.v-cf{position:absolute;inset:0;padding:14px 16px}
.v-api{padding:0}
.v-af{position:absolute;inset:0;display:grid;place-items:center}
@media(max-width:1100px){.vault-cam{scale:.8}}
@media(max-width:760px){.vault-scene{height:420px}.vault-cam{scale:.5}}

/* single server cabinet — stacked 1U units, not dots */
.v-rack>i,.v-rack>i.f{background:linear-gradient(#1a2063,#10153f);box-shadow:inset 0 0 0 1.5px rgba(160,168,255,.55)}
.v-rack>i.t{background:#262d7a;box-shadow:inset 0 0 0 1.5px rgba(180,186,255,.7)}
.v-u{position:absolute;border-radius:3px;background:linear-gradient(90deg,#222a75,#171d55);box-shadow:inset 0 0 0 1px rgba(160,168,255,.45)}
.v-u::after{content:"";position:absolute;inset:auto 22% 50% 18%;height:1px;background:rgba(160,168,255,.35)}
.v-u.vert{background:linear-gradient(#222a75,#171d55)}
.v-u.vert::after{inset:18% 50% 22% auto;width:1px;height:auto}
.v-u .v-led{position:absolute;left:6px;top:50%;width:8px;height:3px;margin-top:-1.5px;border-radius:1px}
.v-u.vert .v-led{left:50%;top:6px;width:3px;height:8px;margin:0 0 0 -1.5px}
/* shorter section */
#security.section-space{padding-top:84px;padding-bottom:84px}
#security .section-heading{margin-bottom:8px}
.vault-scene{height:430px}.vault-cam{top:52%;scale:.78}
.vault-certs{margin-top:12px}