/* ===== serverlab.tech — dark, loud, fast ===== */
:root{
  --bg:#06060b; --bg2:#0b0b14; --panel:rgba(255,255,255,.035); --line:rgba(255,255,255,.09);
  --txt:#f2f2f7; --mut:#9a9ab0;
  --c1:#ff2d95; --c2:#7a5cff; --c3:#19e6ff; --c4:#c8ff3d;
  --grad:linear-gradient(120deg,var(--c1),var(--c2) 45%,var(--c3));
  --r:22px; --r-s:12px;
  --font:"Space Grotesk",system-ui,sans-serif; --disp:"Unbounded","Space Grotesk",sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.6 var(--font);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:var(--c1);color:#000}

/* ---- backgrounds ---- */
.noise{position:fixed;inset:-50%;pointer-events:none;z-index:1;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-1%,3%)}80%{transform:translate(4%,1%)}100%{transform:translate(0,0)}}
.blobs{position:fixed;inset:0;z-index:0;pointer-events:none;filter:blur(90px) saturate(1.4);overflow:hidden}
.blob{position:absolute;width:55vmax;height:55vmax;border-radius:50%;opacity:.42;mix-blend-mode:screen;animation:drift 26s ease-in-out infinite alternate}
.b1{background:var(--c1);top:-20vmax;left:-15vmax}
.b2{background:var(--c2);bottom:-25vmax;right:-10vmax;animation-delay:-9s;animation-duration:32s}
.b3{background:var(--c3);top:30%;left:40%;width:35vmax;height:35vmax;animation-delay:-17s;animation-duration:22s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,-6vh) scale(1.15)}100%{transform:translate(-6vw,8vh) scale(.9)}}
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 70%)}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:32px;padding:16px clamp(16px,5vw,64px);
  background:rgba(6,6,11,.55);backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;margin-right:auto}
.logo-mark svg{fill:url(#g);fill:var(--c3);filter:drop-shadow(0 0 8px var(--c3))}
.logo-mark .dot{fill:var(--c4);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.2}}
.logo-text{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;font-size:1.15rem}
.logo-text b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-text i{font-style:normal;color:var(--mut);font-weight:600}
.nav nav{display:flex;gap:28px;font-weight:500;color:var(--mut)}
.nav nav a{position:relative;transition:color .2s}
.nav nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--grad);transition:right .25s}
.nav nav a:hover{color:var(--txt)}.nav nav a:hover::after{right:0}
.burger{display:none;background:none;border:0;width:40px;height:40px;flex-direction:column;justify-content:center;gap:6px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--txt);transition:.3s}
.burger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media(max-width:900px){
  .nav nav{position:fixed;inset:72px 0 auto 0;flex-direction:column;background:rgba(6,6,11,.95);padding:24px;border-bottom:1px solid var(--line);transform:translateY(-120%);transition:.35s}
  .nav nav.open{transform:none}
  .burger{display:flex}.nav .btn-small{display:none}
}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;font-weight:600;border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;isolation:isolate}
.btn .arr{transition:transform .25s}.btn:hover .arr{transform:translateX(5px)}
.btn:hover{transform:translateY(-2px)}
.btn-small{padding:10px 18px;font-size:.9rem}
.btn-primary{color:#000;border-color:transparent;background:var(--grad);background-size:200% 200%;animation:shift 5s ease infinite;box-shadow:0 0 0 0 rgba(255,45,149,.0)}
.btn-primary:hover{box-shadow:0 10px 40px -8px var(--c1),0 0 30px -10px var(--c3)}
@keyframes shift{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.btn-ghost{background:var(--panel);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--c3);box-shadow:0 0 24px -8px var(--c3)}

/* ---- layout ---- */
main{position:relative;z-index:2}
.section{padding:clamp(72px,10vw,140px) clamp(16px,5vw,64px);max-width:1280px;margin:0 auto}
.section-head{margin-bottom:48px;max-width:820px}
.tag{font-family:var(--mono);font-size:.8rem;color:var(--c4);letter-spacing:.14em;text-transform:uppercase}
h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.08;letter-spacing:-.02em;margin:12px 0 0}
.hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hl2{color:var(--c3);text-shadow:0 0 24px var(--c3)}
.hl3{color:var(--c4);text-shadow:0 0 24px var(--c4)}

/* ---- hero ---- */
.hero{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;max-width:1280px;margin:0 auto;padding:clamp(60px,9vw,120px) clamp(16px,5vw,64px) 40px;min-height:88vh}
@media(max-width:1000px){.hero{grid-template-columns:1fr;min-height:auto}}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.8rem;color:var(--mut);border:1px solid var(--line);padding:8px 14px;border-radius:999px;background:var(--panel)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--c4);box-shadow:0 0 0 0 var(--c4);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(200,255,61,.7)}100%{box-shadow:0 0 0 14px rgba(200,255,61,0)}}
h1{font-family:var(--disp);font-weight:900;font-size:clamp(2.4rem,6.4vw,5.2rem);line-height:.98;letter-spacing:-.035em;margin:24px 0}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:.8;clip-path:inset(0 0 0 0)}
.glitch::before{color:var(--c3);animation:g1 3.2s infinite linear alternate-reverse;transform:translate(-2px,0)}
.glitch::after{color:var(--c1);animation:g2 2.7s infinite linear alternate-reverse;transform:translate(2px,0)}
@keyframes g1{0%,88%{clip-path:inset(0 0 100% 0)}90%{clip-path:inset(20% 0 60% 0)}92%{clip-path:inset(60% 0 10% 0)}94%{clip-path:inset(5% 0 80% 0)}96%{clip-path:inset(45% 0 40% 0)}98%,100%{clip-path:inset(0 0 100% 0)}}
@keyframes g2{0%,90%{clip-path:inset(0 0 100% 0)}91%{clip-path:inset(70% 0 5% 0)}93%{clip-path:inset(10% 0 75% 0)}95%{clip-path:inset(40% 0 35% 0)}97%,100%{clip-path:inset(0 0 100% 0)}}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--mut);max-width:560px;margin:0 0 32px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-stats{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:600px){.hero-stats{grid-template-columns:repeat(2,1fr)}}
.hero-stats strong{display:block;font-family:var(--disp);font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.hero-stats span{font-size:.85rem;color:var(--mut);font-family:var(--mono)}

/* ---- terminal ---- */
.terminal{border-radius:var(--r);border:1px solid var(--line);background:rgba(8,8,16,.75);backdrop-filter:blur(16px);box-shadow:0 40px 100px -40px rgba(122,92,255,.6),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;transform:perspective(1200px) rotateY(-6deg) rotateX(3deg);transition:transform .5s}
.terminal:hover{transform:perspective(1200px) rotateY(0) rotateX(0)}
.term-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.term-bar span{width:12px;height:12px;border-radius:50%;background:#ff5f57}.term-bar span:nth-child(2){background:#febc2e}.term-bar span:nth-child(3){background:#28c840}
.term-bar em{margin-left:auto;font:.75rem var(--mono);color:var(--mut)}
.term-body{margin:0;padding:20px;font:.86rem/1.65 var(--mono);min-height:300px;white-space:pre-wrap;color:#d7d7e6}
.term-body .p{color:var(--c4)}.term-body .ok{color:#28c840}.term-body .k{color:var(--c3)}.term-body .d{color:var(--mut)}
.term-body .cur{display:inline-block;width:9px;height:1.1em;background:var(--c4);vertical-align:-3px;animation:blink 1s steps(2) infinite}

/* ---- ticker ---- */
.ticker{position:relative;z-index:2;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent);padding:14px 0;transform:rotate(-1.2deg) scale(1.03);margin:20px 0}
.ticker-track{display:flex;gap:28px;white-space:nowrap;font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:var(--mut);animation:tick 38s linear infinite;width:max-content}
.ticker-track span:nth-child(4n+1){color:var(--txt)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---- bento cards ---- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}.span2{grid-column:span 2}}
@media(max-width:600px){.bento{grid-template-columns:1fr}.span2{grid-column:span 1}}
.span2{grid-column:span 2}
.card{position:relative;padding:32px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(12px);overflow:hidden;transition:transform .3s,border-color .3s}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(122,92,255,.18),transparent 40%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2)}.card:hover::before{opacity:1}
.card-icon{font-size:1.8rem;width:56px;height:56px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);margin-bottom:20px}
.card h3{font-family:var(--disp);font-size:1.2rem;font-weight:700;margin:0 0 10px;letter-spacing:-.01em}
.card p{color:var(--mut);margin:0}
.card-glow{box-shadow:0 0 0 1px rgba(25,230,255,.25),0 30px 80px -40px var(--c3)}
.bar-chart{margin-top:24px;display:grid;gap:10px}
.bar-chart div{display:flex;align-items:center;gap:12px;font:.75rem var(--mono);color:var(--mut)}
.bar-chart i{height:10px;border-radius:999px;background:var(--grad);width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1);flex:0 0 auto}
.in-view .bar-chart i{width:calc(var(--w) * .6)}
.bar-chart b{font-weight:400;white-space:nowrap}
.ping-row{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.ping-row span{font:.78rem var(--mono);padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--mut)}
.ping-row b{color:var(--c3);margin-right:8px}

/* ---- status ---- */
.live{color:var(--c4);text-shadow:0 0 30px var(--c4);animation:blink 2s infinite}
.status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.status-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.status-grid{grid-template-columns:1fr}}
.status{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"led name load" "led state load";align-items:center;column-gap:16px;padding:18px 22px;border-radius:var(--r-s);background:var(--panel);border:1px solid var(--line)}
.led{grid-area:led;width:10px;height:10px;border-radius:50%;background:var(--c4);box-shadow:0 0 12px var(--c4);animation:pulse 2.4s infinite}
.status b{grid-area:name;font-weight:600}.status em{grid-area:state;font-style:normal;font:.78rem var(--mono);color:var(--c4)}
.status i{grid-area:load;font:.78rem var(--mono);color:var(--mut)}
.wave{margin-top:24px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);padding:20px;position:relative}
.wave canvas{display:block;width:100%;height:160px}
.wave span{position:absolute;top:16px;right:20px;font:.72rem var(--mono);color:var(--mut)}

/* ---- faq ---- */
.faq{display:grid;gap:12px;max-width:860px}
details{border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);padding:0 24px;transition:border-color .2s}
details[open]{border-color:rgba(25,230,255,.4)}
summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);font-size:1.4rem;color:var(--c3);transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 20px;color:var(--mut)}

/* ---- cta ---- */
.cta{padding:0 clamp(16px,5vw,64px) clamp(72px,10vw,140px);max-width:1280px;margin:0 auto}
.cta-box{position:relative;text-align:center;padding:clamp(48px,8vw,96px) 32px;border-radius:32px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(ellipse at top,rgba(122,92,255,.3),transparent 60%),radial-gradient(ellipse at bottom left,rgba(255,45,149,.25),transparent 60%),radial-gradient(ellipse at bottom right,rgba(25,230,255,.25),transparent 60%),var(--bg2)}
.cta-box h2{font-size:clamp(2rem,5vw,3.8rem)}
.cta-box p{color:var(--mut);max-width:560px;margin:16px auto 32px}
.cta-box .hero-cta{justify-content:center}

/* ---- footer ---- */
.footer{position:relative;z-index:2;border-top:1px solid var(--line);background:rgba(6,6,11,.7);backdrop-filter:blur(12px);padding:48px clamp(16px,5vw,64px) 24px}
.footer-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
@media(max-width:700px){.footer-inner{grid-template-columns:1fr}}
.footer p{color:var(--mut);margin:8px 0 0;max-width:360px}
.footer nav{display:grid;gap:10px;color:var(--mut);align-content:start}
.footer nav a:hover{color:var(--c3)}
.copy{text-align:center;font:.78rem var(--mono);color:var(--mut);margin:40px auto 0!important;max-width:none!important}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in-view{opacity:1;transform:none}

/* ---- legal pages ---- */
.legal{max-width:820px;margin:0 auto;padding:clamp(48px,8vw,96px) clamp(16px,5vw,64px);position:relative;z-index:2}
.legal h1{font-size:clamp(2rem,5vw,3.4rem)}
.legal h2{font-size:1.4rem;margin-top:40px}
.legal p,.legal li{color:var(--mut)}
.legal .back{display:inline-block;margin-bottom:32px;font-family:var(--mono);color:var(--c3)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}.terminal{transform:none}.ticker{transform:none}.split .ch{opacity:1;transform:none}.particles,.scanline{display:none}
}

/* ---- host cluster ---- */
.hosts{margin-bottom:24px;padding:32px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(160deg,rgba(122,92,255,.14),rgba(25,230,255,.08) 60%,transparent),var(--panel);backdrop-filter:blur(12px);display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
@media(max-width:900px){.hosts{grid-template-columns:1fr}}
.hosts-head{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:16px}
.hosts-head strong{font-family:var(--disp);font-size:clamp(1.4rem,3vw,2rem);font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hosts-head em{font-style:normal;color:var(--mut)}
.hosts-specs{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:700px){.hosts-specs{grid-template-columns:1fr 1fr}}
.hosts-specs li{display:grid;gap:2px;padding:16px;border-radius:var(--r-s);background:rgba(0,0,0,.3);border:1px solid var(--line)}
.hosts-specs b{font:.7rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c4)}
.hosts-specs span{font-family:var(--disp);font-weight:700;font-size:1.15rem;white-space:nowrap}
.hosts-specs small{color:var(--mut);font-size:.78rem}
.hosts-rack{display:grid;grid-template-rows:repeat(8,1fr);gap:6px;width:120px;height:160px;padding:10px;border-radius:10px;background:rgba(0,0,0,.4);border:1px solid var(--line)}
@media(max-width:900px){.hosts-rack{width:100%;height:auto;grid-template-rows:none;grid-template-columns:repeat(8,1fr)}.hosts-rack i{height:28px}}
.hosts-rack i{display:block;border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.04));border:1px solid var(--line);position:relative}
.hosts-rack i::after{content:"";position:absolute;right:8px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--c4);box-shadow:0 0 8px var(--c4);animation:blink 1.4s infinite}
.hosts-rack i:nth-child(2n)::after{animation-delay:.4s}.hosts-rack i:nth-child(3n)::after{animation-delay:.9s}

/* ===================== CRAZY MODE ===================== */
/* scroll progress */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;background:rgba(255,255,255,.04)}
.progress i{display:block;height:100%;width:0;background:var(--grad);background-size:200% 100%;animation:shift 3s linear infinite;box-shadow:0 0 16px var(--c3)}

/* particle network */
.particles{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.7}

/* hue-cycling blobs + 4th blob */
.blobs{animation:hue 24s linear infinite}
@keyframes hue{to{filter:blur(90px) saturate(1.4) hue-rotate(360deg)}}
.b4{background:var(--c4);width:28vmax;height:28vmax;top:60%;left:10%;opacity:.25;animation-delay:-5s;animation-duration:19s}

/* scanline sweep */
.scanline{position:fixed;left:0;right:0;top:-10%;height:12vh;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(25,230,255,.07) 50%,transparent);animation:scan 9s linear infinite;mix-blend-mode:screen}
@keyframes scan{to{top:110%}}

/* gradient text breathes */
.hl,.logo-text b,.hero-stats strong,.hosts-head strong{background-size:200% 200%;animation:shift 4s ease infinite}

/* split headline */
.split .ch{display:inline-block;opacity:0;transform:translateY(60%) rotateX(-90deg);animation:chin .7s cubic-bezier(.2,.9,.2,1.2) forwards;transform-origin:bottom}
@keyframes chin{to{opacity:1;transform:none}}
h1{perspective:600px}

/* magnetic buttons: JS sets --tx/--ty */
.magnetic{transform:translate(var(--tx,0),var(--ty,0));transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.magnetic:hover{transform:translate(var(--tx,0),var(--ty,0)) scale(1.04)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:shine 3.4s ease-in-out infinite;z-index:-1}
@keyframes shine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* 3D tilt (JS sets --rx/--ry) */
.tilt{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .15s ease-out;will-change:transform}
.card.tilt:hover{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-6px)}
.terminal.tilt{transform:perspective(1200px) rotateY(calc(-6deg + var(--ry,0))) rotateX(calc(3deg + var(--rx,0)))}
.terminal.tilt:hover{transform:perspective(1200px) rotateY(var(--ry,0)) rotateX(var(--rx,0))}

/* hero orbit rings behind terminal */
.hero-visual{position:relative}
.orbit{position:absolute;inset:-12% -10%;pointer-events:none;z-index:-1}
.orbit i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(25,230,255,.25);animation:spin 18s linear infinite}
.orbit i:nth-child(2){inset:8%;border-color:rgba(255,45,149,.3);animation-duration:12s;animation-direction:reverse;border-style:dashed}
.orbit i:nth-child(3){inset:18%;border-color:rgba(200,255,61,.25);animation-duration:26s}
.orbit i::before{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;border-radius:50%;background:var(--c3);box-shadow:0 0 18px var(--c3)}
.orbit i:nth-child(2)::before{background:var(--c1);box-shadow:0 0 18px var(--c1)}
.orbit i:nth-child(3)::before{background:var(--c4);box-shadow:0 0 18px var(--c4)}
@keyframes spin{to{transform:rotate(360deg)}}

/* terminal animated border */
.terminal{position:relative}
.terminal::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--a,0deg),transparent 0 70%,var(--c3) 85%,var(--c1) 95%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rot 4s linear infinite;pointer-events:none}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes rot{to{--a:360deg}}

/* reverse ticker */
.ticker-rev{transform:rotate(1.2deg) scale(1.03);margin-top:-4px}
.ticker-rev .ticker-track{animation-direction:reverse;animation-duration:46s;color:var(--c3)}
.ticker-rev .ticker-track span:nth-child(4n+1){color:var(--c4)}
.ticker:hover .ticker-track{animation-play-state:paused}

/* giant outlined section numbers */
.section{position:relative}
.bignum{position:absolute;right:clamp(8px,4vw,48px);top:40px;font-family:var(--disp);font-weight:900;font-size:clamp(6rem,22vw,20rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);pointer-events:none;user-select:none;z-index:-1;animation:float 8s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-24px) rotate(-2deg)}}

/* scramble text: JS swaps characters */
.scramble .sc{color:var(--c3);font-family:var(--mono)}

/* reveal: more drama */
.reveal{transform:translateY(40px) scale(.96);filter:blur(6px)}
.reveal.in-view{filter:none}
.bento .card:nth-child(2n).reveal{transition-delay:.08s}.bento .card:nth-child(3n).reveal{transition-delay:.16s}
.status-grid .status:nth-child(n){transition-delay:calc(var(--i,0) * 60ms)}

/* card icon bounce + glow sweep */
.card:hover .card-icon{animation:bounce .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes bounce{40%{transform:translateY(-10px) rotate(-8deg) scale(1.15)}}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%);transform:translateX(-120%);transition:transform .8s;pointer-events:none}
.card:hover::after{transform:translateX(120%)}

/* radar in DDoS card */
.radar{position:absolute;right:-40px;bottom:-40px;width:160px;height:160px;border-radius:50%;border:1px solid rgba(25,230,255,.2);background:repeating-radial-gradient(circle,transparent 0 24px,rgba(25,230,255,.12) 24px 25px);overflow:hidden;opacity:.7;pointer-events:none}
.radar i{position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(25,230,255,.6),transparent 30%);animation:spin 2.4s linear infinite;border-radius:50%}
.radar::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--c1);top:38%;left:62%;box-shadow:0 0 10px var(--c1);animation:blink 2.4s infinite}

/* ping chips flicker */
.ping-row span{animation:flick 6s infinite}
.ping-row span:nth-child(2){animation-delay:1s}.ping-row span:nth-child(3){animation-delay:2s}.ping-row span:nth-child(4){animation-delay:3s}.ping-row span:nth-child(5){animation-delay:4s}.ping-row span:nth-child(6){animation-delay:5s}
@keyframes flick{0%,90%,100%{border-color:var(--line)}93%{border-color:var(--c3);box-shadow:0 0 14px -4px var(--c3)}}

/* rack data flow */
.hosts-rack{position:relative;overflow:hidden}
.hosts-rack .flow{position:absolute;left:0;right:0;height:30%;top:-30%;background:linear-gradient(180deg,transparent,rgba(25,230,255,.35),transparent);animation:scan 2.6s linear infinite;pointer-events:none}
@media(max-width:900px){.hosts-rack .flow{top:0;bottom:0;height:auto;width:30%;left:-30%;background:linear-gradient(90deg,transparent,rgba(25,230,255,.35),transparent);animation:scanx 2.6s linear infinite}}
@keyframes scanx{to{left:110%}}
.hosts-specs li{transition:transform .15s,border-color .3s}
.hosts-specs li:hover{border-color:var(--c3)}
.hosts-specs span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 200%;animation:shift 4s ease infinite}

/* status leds: random flicker via JS .blip */
.status .led.blip{background:var(--c3);box-shadow:0 0 16px var(--c3)}
.status{transition:border-color .3s,transform .3s}
.status:hover{border-color:var(--c4);transform:translateX(6px)}

/* logo spin */
.logo:hover .logo-mark svg{animation:spin .8s cubic-bezier(.6,-.3,.3,1.4)}

/* cta rings */
.cta-box{overflow:hidden}
.cta-rings{position:absolute;inset:0;pointer-events:none}
.cta-rings i{position:absolute;left:50%;top:50%;width:40vw;height:40vw;max-width:700px;max-height:700px;border-radius:50%;border:1px solid rgba(255,255,255,.12);transform:translate(-50%,-50%) scale(0);animation:ring 6s ease-out infinite}
.cta-rings i:nth-child(2){animation-delay:1.5s}.cta-rings i:nth-child(3){animation-delay:3s}.cta-rings i:nth-child(4){animation-delay:4.5s}
@keyframes ring{to{transform:translate(-50%,-50%) scale(2.2);opacity:0}}

/* nav: shrink + glow on scroll */
.nav.scrolled{padding-top:10px;padding-bottom:10px;box-shadow:0 10px 50px -20px var(--c2)}
.nav{transition:padding .3s,box-shadow .3s}

/* faq open: slide */
details p{animation:slidein .4s cubic-bezier(.2,.8,.2,1)}
@keyframes slidein{from{opacity:0;transform:translateY(-8px)}}

@media (prefers-reduced-motion:reduce){
  .orbit,.scanline,.particles,.cta-rings,.radar,.hosts-rack .flow,.bignum{display:none}
  .tilt,.magnetic{transform:none!important}
}

/* ---- game teaser ---- */
.nav-game{color:var(--c4)!important}
.card-game{background:linear-gradient(160deg,rgba(200,255,61,.12),rgba(25,230,255,.08) 60%,transparent),var(--panel);border-color:rgba(200,255,61,.3)}
.card-game .hero-cta .btn{margin-top:0}
.game-pkts{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.game-pkts i{position:absolute;top:-20px;width:12px;height:12px;border-radius:3px;background:var(--c1);box-shadow:0 0 12px var(--c1);animation:fall 4s linear infinite}
.game-pkts i:nth-child(2n){background:#28c840;box-shadow:0 0 12px #28c840;border-radius:50%}
.game-pkts i:nth-child(1){left:70%;animation-delay:0s}.game-pkts i:nth-child(2){left:78%;animation-delay:.8s}.game-pkts i:nth-child(3){left:86%;animation-delay:1.6s}
.game-pkts i:nth-child(4){left:92%;animation-delay:2.4s}.game-pkts i:nth-child(5){left:74%;animation-delay:3.2s}.game-pkts i:nth-child(6){left:62%;animation-delay:2s}
@keyframes fall{to{transform:translateY(400px) rotate(360deg);opacity:0}}

/* fix: gradient per character inside split headline (background-clip:text does not reach transformed children) */
h1.split .hl{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--txt);animation:none}
h1.split .hl .ch{background:var(--grad);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:chin .7s cubic-bezier(.2,.9,.2,1.2) forwards,shift 4s ease infinite}