:root{
  color:#f4f8ff;
  background:#03040a;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ice:#eaf5ff;
  --blue:#69b7ff;
  --violet:#845cff;
  --mint:#7fffd8;
  --tilt-x:0deg;
  --tilt-y:0deg;
  --drift-x:0px;
  --drift-y:0px;
  --brand-x:0px;
  --brand-y:0px;
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;overflow:hidden}
body{min-height:100vh;min-height:100svh;background:#03040a}

.space{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 48%,rgba(39,73,157,.23),transparent 23%),
    radial-gradient(circle at 16% 18%,rgba(111,54,213,.18),transparent 28%),
    radial-gradient(circle at 86% 12%,rgba(8,132,176,.14),transparent 25%),
    linear-gradient(180deg,#020309 0%,#050817 46%,#020207 100%);
}

.space::before{
  content:"";
  position:absolute;
  inset:-45%;
  z-index:-8;
  background:conic-gradient(from 70deg,#03040b,#121d43,#030307,#261148,#05131f,#03040b);
  opacity:.58;
  filter:blur(100px);
  animation:galaxy-spin 42s linear infinite;
}

.space::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px),
    radial-gradient(circle at 50% 48%,transparent 0 31%,rgba(0,0,0,.18) 58%,rgba(0,0,0,.83) 110%);
  background-size:100% 4px,100% 100%;
  mix-blend-mode:soft-light;
}

.starfield{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  opacity:.84;
  pointer-events:none;
}

.stars{
  position:absolute;
  inset:-140px;
  z-index:-6;
  background-repeat:repeat;
  will-change:transform;
  animation:star-drift 88s linear infinite;
}

.stars-a{
  opacity:.74;
  background-image:
    radial-gradient(circle,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle,#8eb8ff 0 1px,transparent 1.5px),
    radial-gradient(circle,#fff 0 .8px,transparent 1.3px);
  background-size:120px 120px,180px 180px,74px 74px;
  background-position:0 0,38px 58px,12px 34px;
}

.stars-b{
  opacity:.38;
  filter:blur(.4px);
  background-image:
    radial-gradient(circle,#fff 0 1px,transparent 1.6px),
    radial-gradient(circle,#8d6cff 0 1.2px,transparent 1.8px);
  background-size:260px 260px,340px 340px;
  background-position:90px 30px,20px 170px;
  animation-duration:138s;
  animation-direction:reverse;
}

.nebula{
  position:absolute;
  inset:-25%;
  z-index:-7;
  background:
    radial-gradient(ellipse at 35% 45%,rgba(116,66,255,.22),transparent 35%),
    radial-gradient(ellipse at 64% 48%,rgba(0,174,255,.15),transparent 34%),
    radial-gradient(ellipse at 50% 70%,rgba(255,65,166,.07),transparent 36%);
  filter:blur(42px) saturate(1.45);
  animation:nebula-move 17s ease-in-out infinite alternate;
}

.aurora{
  position:absolute;
  z-index:-1;
  width:min(96vw,1200px);
  height:min(54vw,680px);
  border-radius:50%;
  background:conic-gradient(from 180deg at 50% 50%,rgba(51,182,255,.08),rgba(133,79,255,.2),transparent 30%,rgba(111,255,223,.08),transparent 68%,rgba(51,182,255,.08));
  filter:blur(48px);
  opacity:.66;
  animation:aurora-pulse 9s ease-in-out infinite;
}

.scene{
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-items:center;
  perspective:1200px;
  pointer-events:none;
}

.scene-tilt{
  width:min(86vw,900px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
  transform:translate3d(var(--drift-x),var(--drift-y),0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

.orbital-system{
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
  animation:system-float 7.5s ease-in-out infinite;
}

.orbit{
  position:absolute;
  width:78%;
  aspect-ratio:1;
  border:1px solid rgba(160,191,255,.17);
  border-radius:50%;
  box-shadow:
    0 0 32px rgba(69,115,255,.08),
    inset 0 0 24px rgba(131,180,255,.035);
  transform-style:preserve-3d;
}

.orbit::before,
.orbit::after{
  content:"";
  position:absolute;
  inset:8%;
  border:1px dashed rgba(191,212,255,.075);
  border-radius:50%;
}

.orbit::after{inset:-5%;border-style:solid;opacity:.38}

.orbit-one{animation:orbit-one 18s linear infinite}
.orbit-two{width:94%;animation:orbit-two 27s linear infinite reverse}
.orbit-three{width:57%;animation:orbit-three 13s linear infinite}

.satellite{
  position:absolute;
  left:50%;
  top:-5px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--ice);
  box-shadow:0 0 7px #fff,0 0 23px var(--blue),0 0 42px var(--blue);
}

.satellite::after{
  content:"";
  position:absolute;
  right:5px;
  top:4px;
  width:48px;
  height:1px;
  transform-origin:right;
  background:linear-gradient(90deg,transparent,rgba(159,202,255,.8));
}

.orbit-two .satellite{
  width:7px;
  height:7px;
  background:#a78bff;
  box-shadow:0 0 7px #fff,0 0 22px var(--violet);
}

.orbit-three .satellite{
  width:6px;
  height:6px;
  background:#86ffe3;
  box-shadow:0 0 6px #fff,0 0 20px var(--mint);
}

.polyhedron{
  --cube-size:clamp(180px,25vw,310px);
  --cube-half:clamp(90px,12.5vw,155px);
  position:relative;
  width:var(--cube-size);
  height:var(--cube-size);
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
  filter:drop-shadow(0 32px 50px rgba(0,0,0,.52));
}

.cube{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  animation:cube-turn 16s cubic-bezier(.42,0,.58,1) infinite;
}

.face{
  position:absolute;
  inset:0;
  overflow:hidden;
  border:1px solid rgba(200,225,255,.23);
  background:
    linear-gradient(rgba(174,205,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(174,205,255,.055) 1px,transparent 1px),
    linear-gradient(135deg,rgba(103,174,255,.13),rgba(121,77,255,.045));
  background-size:24px 24px,24px 24px,100% 100%;
  box-shadow:
    inset 0 0 48px rgba(86,141,255,.1),
    0 0 18px rgba(96,139,255,.07);
  backface-visibility:visible;
  -webkit-backface-visibility:visible;
}

.face::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:linear-gradient(115deg,transparent 38%,rgba(221,241,255,.22) 49%,transparent 60%);
  animation:face-shine 5.5s ease-in-out infinite;
}

.face-front{transform:translateZ(var(--cube-half))}
.face-back{transform:rotateY(180deg) translateZ(var(--cube-half))}
.face-right{transform:rotateY(90deg) translateZ(var(--cube-half))}
.face-left{transform:rotateY(-90deg) translateZ(var(--cube-half))}
.face-top{transform:rotateX(90deg) translateZ(var(--cube-half))}
.face-bottom{transform:rotateX(-90deg) translateZ(var(--cube-half))}

.energy-core{
  position:absolute;
  z-index:3;
  width:31%;
  aspect-ratio:1;
  border-radius:50%;
  transform:translateZ(2px);
  background:radial-gradient(circle at 34% 29%,#fff 0 4%,#c7e8ff 8%,#6ca9ff 29%,#7247ef 57%,rgba(73,35,190,.08) 73%);
  box-shadow:
    0 0 18px rgba(255,255,255,.82),
    0 0 54px rgba(83,161,255,.9),
    0 0 115px rgba(123,69,255,.72),
    0 0 210px rgba(67,116,255,.34);
  animation:core-pulse 3.7s ease-in-out infinite;
}

.core-ring{
  position:absolute;
  z-index:4;
  width:58%;
  aspect-ratio:1;
  border:1px solid rgba(192,223,255,.48);
  border-left-color:transparent;
  border-right-color:rgba(126,95,255,.75);
  border-radius:50%;
  box-shadow:0 0 16px rgba(108,174,255,.26);
  transform-style:preserve-3d;
}

.core-ring-a{animation:core-ring-a 7s linear infinite}
.core-ring-b{width:44%;animation:core-ring-b 5s linear infinite reverse}

.depth-particle{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 14px 3px rgba(102,170,255,.72);
  animation:particle-float 5s ease-in-out infinite alternate;
}

.particle-one{left:15%;top:25%;--z:120px;animation-delay:-1s}
.particle-two{right:10%;top:39%;--z:180px;animation-delay:-3.2s}
.particle-three{left:24%;bottom:18%;--z:90px;animation-delay:-2.1s}
.particle-four{right:25%;bottom:11%;--z:210px;animation-delay:-4.4s}
.particle-five{left:47%;top:8%;--z:160px;animation-delay:-.6s}

.brand{
  position:relative;
  z-index:5;
  display:grid;
  justify-items:center;
  text-align:center;
  transform-style:preserve-3d;
  transform:translate3d(var(--brand-x),var(--brand-y),100px);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}

.brand-kicker,
.brand-signature{
  margin:0;
  color:rgba(218,232,255,.67);
  font-size:clamp(.55rem,.72vw,.72rem);
  font-weight:650;
  letter-spacing:.42em;
  line-height:1;
  text-transform:uppercase;
  text-shadow:0 0 18px rgba(97,157,255,.48);
}

.brand-kicker{
  display:flex;
  align-items:center;
  gap:1rem;
  transform:translateY(clamp(-2.2rem,-3.6vw,-1.1rem));
}

.brand-kicker i{
  width:clamp(26px,4vw,64px);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(178,211,255,.8),transparent);
  box-shadow:0 0 10px rgba(95,161,255,.52);
}

h1{
  --sku-one:#f8fbff;
  --sku-two:#6eb7ff;
  --sku-three:#8458ff;
  position:relative;
  margin:0;
  color:transparent;
  cursor:crosshair;
  background:linear-gradient(112deg,var(--sku-one) 8%,var(--sku-two) 38%,var(--sku-three) 67%,var(--sku-one) 93%);
  background-size:240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  font-size:clamp(8rem,28vw,25rem);
  font-weight:1000;
  letter-spacing:-.075em;
  line-height:.72;
  transform:translateX(-.035em) translateZ(90px);
  transform-style:preserve-3d;
  -webkit-text-stroke:1px rgba(235,246,255,.34);
  filter:drop-shadow(0 0 14px rgba(255,255,255,.3)) drop-shadow(0 0 48px rgba(77,139,255,.46));
  text-shadow:
    0 .012em 0 rgba(209,230,255,.72),
    0 .024em 0 rgba(97,132,216,.58),
    0 .038em 0 rgba(44,62,123,.52),
    0 .065em .08em rgba(0,0,0,.95),
    0 0 .35em rgba(97,145,255,.48);
  animation:title-breathe 4.8s ease-in-out infinite,sku-shine 7s ease-in-out infinite;
  transition:filter .7s ease,text-shadow .7s ease;
}

h1::before,
h1::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
}

h1::before{
  z-index:-1;
  color:rgba(15,24,58,.72);
  -webkit-text-stroke:1px rgba(126,171,255,.24);
  transform:translate3d(.026em,.065em,-70px);
  filter:blur(.5px);
  text-shadow:0 .035em 0 rgba(25,36,83,.8),0 .09em .16em rgba(0,0,0,.9);
}

h1::after{
  color:transparent;
  -webkit-text-stroke:1px rgba(238,248,255,.3);
  transform:translateZ(12px);
  filter:drop-shadow(0 0 .08em rgba(255,255,255,.62));
}

@media (hover:hover){
  h1:hover{
    filter:drop-shadow(0 0 16px var(--sku-one)) drop-shadow(0 0 56px var(--sku-two));
    text-shadow:
      0 .012em 0 rgba(255,255,255,.85),
      0 .024em 0 var(--sku-two),
      0 .04em 0 rgba(54,61,143,.56),
      0 .07em .1em rgba(0,0,0,.94),
      0 0 .42em var(--sku-three);
  }
}

.brand-signature{
  transform:translateY(clamp(1.4rem,3vw,2.7rem));
  letter-spacing:.34em;
  opacity:.57;
}

.brand-signature span{color:var(--mint);padding:0 .35em}

.interface{
  position:absolute;
  z-index:6;
  top:50%;
  display:flex;
  align-items:center;
  gap:.8rem;
  color:rgba(197,218,255,.42);
  font:600 .58rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.2em;
  text-transform:uppercase;
  writing-mode:vertical-rl;
}

.interface i{
  width:1px;
  height:52px;
  background:linear-gradient(transparent,rgba(141,188,255,.52),transparent);
}

.interface-left{left:clamp(1.1rem,3vw,3.4rem);transform:translateY(-50%) rotate(180deg)}
.interface-right{right:clamp(1.1rem,3vw,3.4rem);transform:translateY(-50%)}
.interface-right span:last-child{color:rgba(110,255,210,.72);text-shadow:0 0 10px rgba(96,255,207,.42)}

.comets{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}

.comets span{
  position:absolute;
  width:170px;
  height:1px;
  border-radius:50%;
  background:linear-gradient(90deg,transparent,#dceaff,transparent);
  box-shadow:0 0 16px rgba(170,201,255,.76);
  transform:rotate(-28deg);
  animation:comet 7.2s linear infinite;
}

.comets span:nth-child(1){left:-25%;top:16%;animation-delay:-1s}
.comets span:nth-child(2){left:-35%;top:65%;animation-delay:-4.2s;animation-duration:9s}
.comets span:nth-child(3){left:-28%;top:38%;animation-delay:-7s;animation-duration:11s}

@keyframes galaxy-spin{to{transform:rotate(360deg)}}
@keyframes star-drift{to{transform:translate3d(120px,80px,0)}}
@keyframes nebula-move{
  from{transform:translate3d(-3%,2%,0) scale(1)}
  to{transform:translate3d(4%,-3%,0) scale(1.12)}
}
@keyframes aurora-pulse{
  0%,100%{transform:scale(.94) rotate(-3deg);opacity:.48}
  50%{transform:scale(1.08) rotate(4deg);opacity:.76}
}
@keyframes system-float{
  0%,100%{transform:translate3d(0,0,0) rotateZ(-1deg)}
  50%{transform:translate3d(0,-18px,26px) rotateZ(1deg)}
}
@keyframes orbit-one{
  from{transform:rotateX(68deg) rotateZ(8deg)}
  to{transform:rotateX(68deg) rotateZ(368deg)}
}
@keyframes orbit-two{
  from{transform:rotateX(73deg) rotateY(18deg) rotateZ(-24deg)}
  to{transform:rotateX(73deg) rotateY(18deg) rotateZ(336deg)}
}
@keyframes orbit-three{
  from{transform:rotateX(61deg) rotateY(-22deg) rotateZ(52deg)}
  to{transform:rotateX(61deg) rotateY(-22deg) rotateZ(412deg)}
}
@keyframes cube-turn{
  0%{transform:rotateX(-18deg) rotateY(0deg) rotateZ(-4deg)}
  50%{transform:rotateX(18deg) rotateY(180deg) rotateZ(4deg)}
  100%{transform:rotateX(-18deg) rotateY(360deg) rotateZ(-4deg)}
}
@keyframes face-shine{
  0%,18%{transform:translateX(-35%) rotate(0deg);opacity:0}
  42%,58%{opacity:.8}
  82%,100%{transform:translateX(35%) rotate(7deg);opacity:0}
}
@keyframes core-pulse{
  0%,100%{transform:translateZ(2px) scale(.88);filter:saturate(1)}
  50%{transform:translateZ(50px) scale(1.1);filter:saturate(1.45)}
}
@keyframes core-ring-a{
  from{transform:rotateX(72deg) rotateZ(0deg) translateZ(32px)}
  to{transform:rotateX(72deg) rotateZ(360deg) translateZ(32px)}
}
@keyframes core-ring-b{
  from{transform:rotateY(72deg) rotateZ(0deg) translateZ(22px)}
  to{transform:rotateY(72deg) rotateZ(360deg) translateZ(22px)}
}
@keyframes particle-float{
  from{transform:translate3d(0,-12px,var(--z));opacity:.22}
  to{transform:translate3d(9px,18px,var(--z));opacity:1}
}
@keyframes title-breathe{
  0%,100%{transform:translateX(-.035em) translateZ(90px) scale(1)}
  50%{transform:translateX(-.035em) translateZ(112px) scale(1.016)}
}
@keyframes sku-shine{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes comet{
  0%{transform:translate3d(0,0,0) rotate(-28deg);opacity:0}
  8%,38%{opacity:.9}
  58%,100%{transform:translate3d(150vw,58vh,0) rotate(-28deg);opacity:0}
}

@media (max-width:760px){
  .scene-tilt{width:128vw}
  .polyhedron{--cube-size:clamp(155px,43vw,230px);--cube-half:clamp(77.5px,21.5vw,115px)}
  .orbit-one{width:76%}
  .orbit-two{width:94%}
  .orbit-three{width:56%}
  h1{font-size:clamp(7.6rem,37vw,14rem)}
  .brand-kicker{gap:.6rem;letter-spacing:.3em}
  .brand-kicker i{width:28px}
  .brand-signature{font-size:.5rem;letter-spacing:.2em}
  .interface{display:none}
}

@media (max-width:430px){
  .brand-kicker span:last-child{display:none}
  .brand-kicker i{display:none}
  .brand-kicker{letter-spacing:.5em;padding-left:.5em}
  .brand-signature{max-width:80vw;line-height:1.7}
  .comets span{width:120px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
  }
  .starfield,.comets{display:none}
  .scene-tilt,.brand{transform:none!important;transition:none!important}
  h1{transform:translateX(-.035em)!important}
}

.server-stats{
  position:absolute;
  z-index:10;
  bottom:max(22px,env(safe-area-inset-bottom));
  left:50%;
  width:min(660px,calc(100% - 40px));
  transform:translateX(-50%);
  padding:19px 22px 13px;
  border:1px solid rgba(137,179,255,.2);
  border-radius:18px;
  background:linear-gradient(125deg,rgba(12,22,45,.86),rgba(11,12,29,.88));
  box-shadow:0 18px 70px rgba(0,0,0,.3),inset 0 1px 0 rgba(220,239,255,.05);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.server-stats-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:19px}
.server-stats-header h2{margin:0;color:#d1def2;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.server-stats-status{display:flex;align-items:center;gap:7px;white-space:nowrap;color:#9caac0;font-size:10px}
.server-stats-status i{width:5px;height:5px;border-radius:50%;background:#99a4b8}
.server-stats[data-state="live"] .server-stats-status{color:#8df3cc}
.server-stats[data-state="live"] .server-stats-status i{background:#7fffd8;box-shadow:0 0 10px rgba(127,255,216,.6)}
.server-stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px}
.server-stat{--metric-color:#83bfff;min-width:0}
.server-stat:nth-child(2){--metric-color:#b399ff}
.server-stat:nth-child(3){--metric-color:#7fffd8}
.server-stat[data-level="medium"]{--metric-color:#ffd27a}
.server-stat[data-level="high"]{--metric-color:#ff8ca8}
.server-stat-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:12px}
.server-stat h3{margin:0;font-size:11px;font-weight:500;color:#aab9d0}
.server-stat-value{font:500 clamp(17px,2.3vw,24px)/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.06em;color:#f0f6ff;white-space:nowrap;font-variant-numeric:tabular-nums}
.server-stat-track{height:4px;border-radius:4px;background:rgba(177,198,240,.1);overflow:hidden}
.server-stat-track span{display:block;height:100%;width:0;background:var(--metric-color);border-radius:inherit;transition:width .6s ease,background .6s ease}
.server-stat p{margin:9px 0 0;color:#8293ad;font-size:10px}
.server-stats-footnote{margin:15px 0 0;text-align:right;font-size:9px;letter-spacing:.05em;color:#798ba7}
@media(max-width:480px){
  .server-stats{width:calc(100% - 28px);padding:16px 15px 12px;border-radius:15px;bottom:max(16px,env(safe-area-inset-bottom))}
  .server-stats-header{margin-bottom:16px;gap:8px}
  .server-stats-header h2{font-size:9px;letter-spacing:.06em}
  .server-stats-status{font-size:9px;gap:5px}
  .server-stats-grid{gap:15px}
  .server-stat-top{display:block;margin-bottom:10px}
  .server-stat h3{font-size:10px;margin-bottom:8px}
  .server-stat-value{font-size:22px}
  .server-stat p{font-size:9px}
}
@media(max-height:620px){
  .brand{align-self:start;margin-top:28px}
  h1{font-size:clamp(5rem,22vh,8rem)}
  .brand-signature{transform:translateY(8px)}
  .server-stats{bottom:12px}
}
@media(prefers-reduced-motion:reduce){.server-stat-track span{transition:none}}