* {
  box-sizing: border-box;
}

:root {
  --bg: #01070a;
  --bg-deep: #000306;

  --cyan: #00e5ff;
  --cyan-bright: #39f3ff;
  --cyan-soft: rgba(0, 229, 255, .08);
  --cyan-border: rgba(0, 229, 255, .30);

  --green: #20ff8b;
  --green-soft: rgba(32, 255, 139, .075);
  --green-border: rgba(32, 255, 139, .29);

  --yellow: #ffd166;
  --yellow-soft: rgba(255, 209, 102, .08);
  --yellow-border: rgba(255, 209, 102, .32);

  --red: #ff5b63;
  --red-soft: rgba(255, 91, 99, .08);
  --red-border: rgba(255, 91, 99, .35);

  --text: #f4f8fb;
  --muted: #a9b7c0;
  --muted-2: #70848e;

  --panel: rgba(1, 10, 14, .95);
  --card: rgba(2, 15, 20, .92);
}

html {
  min-height: 100%;
}

body {
  margin: 0;

  min-height: 100vh;

  color: var(--text);

  font-family:
    "Inter",
    sans-serif;

  background:
    radial-gradient(
      circle at 8% 7%,
      rgba(0, 229, 255, .065),
      transparent 27%
    ),
    radial-gradient(
      circle at 90% 20%,
      rgba(0, 229, 255, .045),
      transparent 27%
    ),
    radial-gradient(
      circle at 72% 88%,
      rgba(32, 255, 139, .025),
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #01070a,
      #000509 54%,
      #000306
    );

  overflow-x: hidden;
}

/* =========================================================
   STATIC GRID
========================================================= */

body::before {
  content: "";

  position: fixed;
  inset: 0;

  z-index: 0;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(0, 229, 255, .012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0, 229, 255, .012) 1px,
      transparent 1px
    );

  background-size:
    34px 34px;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, .90),
      rgba(0, 0, 0, .15)
    );

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, .90),
      rgba(0, 0, 0, .15)
    );
}

/* =========================================================
   MOVING AMBIENT GLOW
========================================================= */

body::after {
  content: "";

  position: fixed;

  z-index: 0;

  width: 620px;
  height: 620px;

  left: -260px;
  top: 18%;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(0, 229, 255, .045),
      rgba(0, 229, 255, .012) 38%,
      transparent 70%
    );

  filter:
    blur(28px);

  animation:
    ambientDrift
    26s
    ease-in-out
    infinite alternate;
}

@keyframes ambientDrift {
  0% {
    transform:
      translate(
        0,
        0
      )
      scale(.92);

    opacity: .55;
  }

  45% {
    transform:
      translate(
        72vw,
        -80px
      )
      scale(1.10);

    opacity: .78;
  }

  100% {
    transform:
      translate(
        42vw,
        46vh
      )
      scale(.96);

    opacity: .45;
  }
}

/* =========================================================
   PAGE
========================================================= */

.page {
  position: relative;

  z-index: 2;

  width:
    min(
      1500px,
      calc(100% - 28px)
    );

  min-height: 100vh;

  margin: 0 auto;

  padding:
    12px
    0
    18px;

  display: flex;
  flex-direction: column;
}

/* =========================================================
   NETWORK BACKGROUND
========================================================= */

.network-background {
  position: absolute;
  inset: 0;

  z-index: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;

  overflow: visible;
}

/*
  Main network lines.

  The dash pattern itself moves slowly so it looks
  like traffic is travelling through the network.
*/

.net-line {
  fill: none;

  stroke:
    rgba(
      0,
      229,
      255,
      .12
    );

  stroke-width: 1;

  stroke-linecap: round;

  stroke-dasharray:
    14
    24;

  animation:
    networkFlow
    21s
    linear
    infinite;

  filter:
    drop-shadow(
      0 0 2px
      rgba(0, 229, 255, .08)
    );
}

.net-line.dim {
  stroke:
    rgba(
      0,
      229,
      255,
      .05
    );

  stroke-dasharray:
    8
    28;

  animation-duration: 34s;
}

.net-line.strong {
  stroke:
    rgba(
      0,
      229,
      255,
      .21
    );

  stroke-width: 1.15;

  stroke-dasharray:
    18
    20;

  animation-duration: 16s;

  filter:
    drop-shadow(
      0 0 3px
      rgba(0, 229, 255, .13)
    );
}

.net-line.green {
  stroke:
    rgba(
      32,
      255,
      139,
      .12
    );

  animation-duration: 24s;

  filter:
    drop-shadow(
      0 0 3px
      rgba(32, 255, 139, .10)
    );
}

.net-line.reverse {
  animation-direction: reverse;
}

@keyframes networkFlow {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -190;
  }
}

/* =========================================================
   DATA PULSE EFFECT

   Makes a brighter packet-like segment occasionally
   appear within the normal dashed traces.
========================================================= */

.net-line.strong {
  animation-name:
    networkFlow,
    lineBrightness;

  animation-duration:
    16s,
    7s;

  animation-timing-function:
    linear,
    ease-in-out;

  animation-iteration-count:
    infinite,
    infinite;
}

.net-line.green {
  animation-name:
    networkFlow,
    greenBrightness;

  animation-duration:
    24s,
    9s;

  animation-delay:
    0s,
    -3s;

  animation-timing-function:
    linear,
    ease-in-out;

  animation-iteration-count:
    infinite,
    infinite;
}

@keyframes lineBrightness {
  0%,
  72%,
  100% {
    stroke:
      rgba(
        0,
        229,
        255,
        .18
      );

    filter:
      drop-shadow(
        0 0 2px
        rgba(0, 229, 255, .08)
      );
  }

  80% {
    stroke:
      rgba(
        57,
        243,
        255,
        .42
      );

    filter:
      drop-shadow(
        0 0 6px
        rgba(0, 229, 255, .28)
      );
  }

  88% {
    stroke:
      rgba(
        0,
        229,
        255,
        .23
      );
  }
}

@keyframes greenBrightness {
  0%,
  68%,
  100% {
    stroke:
      rgba(
        32,
        255,
        139,
        .11
      );

    filter:
      drop-shadow(
        0 0 2px
        rgba(32, 255, 139, .08)
      );
  }

  78% {
    stroke:
      rgba(
        32,
        255,
        139,
        .38
      );

    filter:
      drop-shadow(
        0 0 6px
        rgba(32, 255, 139, .25)
      );
  }

  88% {
    stroke:
      rgba(
        32,
        255,
        139,
        .16
      );
  }
}

/* =========================================================
   NETWORK NODES
========================================================= */

.net-node {
  fill: var(--cyan);

  transform-box:
    fill-box;

  transform-origin:
    center;

  filter:
    drop-shadow(
      0 0 4px
      rgba(0, 229, 255, .65)
    );

  animation:
    nodePulse
    5.2s
    ease-in-out
    infinite;
}

.net-node:nth-of-type(2n) {
  animation-delay: -1.6s;
}

.net-node:nth-of-type(3n) {
  animation-delay: -3.1s;
}

.net-node.green {
  fill: var(--green);

  filter:
    drop-shadow(
      0 0 4px
      rgba(32, 255, 139, .62)
    );
}

@keyframes nodePulse {
  0%,
  100% {
    opacity: .30;

    transform:
      scale(.82);
  }

  42% {
    opacity: .55;

    transform:
      scale(1);
  }

  50% {
    opacity: 1;

    transform:
      scale(1.42);
  }

  58% {
    opacity: .65;

    transform:
      scale(1.08);
  }
}

/* =========================================================
   BACKGROUND LOGO
========================================================= */

.bg-logo-wrap {
  position: absolute;

  z-index: 1;

  right: 28px;
  top: 102px;

  width:
    clamp(
      280px,
      25vw,
      400px
    );

  aspect-ratio: 1;

  pointer-events: none;

  animation:
    logoFloat
    12s
    ease-in-out
    infinite;
}

@keyframes logoFloat {
  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-7px);
  }
}

.background-logo {
  position: absolute;

  inset: 12%;

  width: 76%;
  height: 76%;

  object-fit: contain;

  opacity: .34;

  animation:
    logoGlow
    8.5s
    ease-in-out
    infinite;

  filter:
    drop-shadow(
      0 0 14px
      rgba(0, 229, 255, .18)
    );
}

@keyframes logoGlow {
  0%,
  100% {
    opacity: .27;

    filter:
      drop-shadow(
        0 0 10px
        rgba(0, 229, 255, .13)
      )
      drop-shadow(
        0 0 26px
        rgba(32, 255, 139, .025)
      );
  }

  45% {
    opacity: .38;

    filter:
      drop-shadow(
        0 0 18px
        rgba(0, 229, 255, .28)
      )
      drop-shadow(
        0 0 38px
        rgba(32, 255, 139, .055)
      );
  }

  55% {
    opacity: .40;

    filter:
      drop-shadow(
        0 0 22px
        rgba(0, 229, 255, .30)
      )
      drop-shadow(
        0 0 44px
        rgba(32, 255, 139, .065)
      );
  }
}

/* =========================================================
   LOGO ORBITS
========================================================= */

.logo-orbit {
  position: absolute;

  left: 7%;
  top: 27%;

  width: 86%;
  height: 46%;

  border:
    1px solid
    rgba(0, 229, 255, .115);

  border-radius: 50%;

  transform:
    rotate(-16deg);

  animation:
    orbitOne
    30s
    linear
    infinite;

  filter:
    drop-shadow(
      0 0 3px
      rgba(0, 229, 255, .10)
    );
}

.logo-orbit.second {
  left: 16%;
  top: 19%;

  width: 68%;
  height: 62%;

  border-color:
    rgba(32, 255, 139, .085);

  animation:
    orbitTwo
    43s
    linear
    infinite;
}

.logo-orbit::before {
  content: "";

  position: absolute;

  left: 23%;
  top: -2px;

  width: 30%;
  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      var(--cyan),
      transparent
    );

  opacity: .32;

  box-shadow:
    0 0 7px
    rgba(0, 229, 255, .24);
}

.logo-orbit.second::before {
  background:
    linear-gradient(
      to right,
      transparent,
      var(--green),
      transparent
    );

  opacity: .22;
}

.logo-orbit::after {
  content: "";

  position: absolute;

  top: 50%;
  left: -3px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--cyan);

  box-shadow:
    0 0 4px
    var(--cyan),
    0 0 10px
    rgba(0, 229, 255, .8),
    0 0 20px
    rgba(0, 229, 255, .20);
}

.logo-orbit.second::after {
  background: var(--green);

  box-shadow:
    0 0 4px
    var(--green),
    0 0 10px
    rgba(32, 255, 139, .8),
    0 0 20px
    rgba(32, 255, 139, .18);
}

@keyframes orbitOne {
  from {
    transform:
      rotate(-16deg)
      rotateZ(0deg);
  }

  to {
    transform:
      rotate(-16deg)
      rotateZ(360deg);
  }
}

@keyframes orbitTwo {
  from {
    transform:
      rotate(56deg)
      rotateZ(360deg);
  }

  to {
    transform:
      rotate(56deg)
      rotateZ(0deg);
  }
}

/* =========================================================
   SUBTLE SCANNER

   One scan every ~14 seconds.
========================================================= */

.page::after {
  content: "";

  position: fixed;

  z-index: 1;

  left: 0;
  right: 0;

  top: -3px;

  height: 1px;

  pointer-events: none;

  opacity: 0;

  background:
    linear-gradient(
      to right,
      transparent 4%,
      rgba(0, 229, 255, .25) 28%,
      rgba(57, 243, 255, .48) 48%,
      rgba(32, 255, 139, .30) 68%,
      transparent 96%
    );

  box-shadow:
    0 0 12px
    rgba(0, 229, 255, .15);

  animation:
    pageScanner
    14s
    ease-in-out
    infinite;
}

@keyframes pageScanner {
  0%,
  70% {
    top: -2%;
    opacity: 0;
  }

  73% {
    opacity: .16;
  }

  90% {
    top: 102%;
    opacity: .10;
  }

  94%,
  100% {
    top: 102%;
    opacity: 0;
  }
}

/* =========================================================
   HEADER
========================================================= */

.topbar {
  position: relative;

  z-index: 10;

  min-height: 78px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 22px;

  padding:
    9px
    24px;

  border:
    1px solid
    var(--cyan-border);

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      rgba(1, 9, 13, .97),
      rgba(2, 15, 20, .91)
    );

  box-shadow:
    0 15px 46px
    rgba(0, 0, 0, .34);

  overflow: hidden;
}

.topbar::before {
  content: "";

  position: absolute;

  top: 0;

  width: 110px;
  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      var(--green),
      transparent
    );

  opacity: .42;

  animation:
    headerTrace
    11s
    ease-in-out
    infinite;
}

@keyframes headerTrace {
  0% {
    left: -120px;
    opacity: 0;
  }

  15% {
    opacity: .4;
  }

  70% {
    opacity: .4;
  }

  90%,
  100% {
    left:
      calc(
        100% + 120px
      );

    opacity: 0;
  }
}

.topbar::after {
  content: "";

  position: absolute;

  left: 24px;
  bottom: 0;

  width: 450px;
  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      var(--cyan),
      transparent
    );

  opacity: .48;
}

.brand {
  display: flex;
  align-items: center;

  gap: 14px;

  color: var(--text);

  text-decoration: none;
}

.brand-logo {
  width: 58px;
  height: 58px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 0 9px
      rgba(0, 229, 255, .22)
    );

  transition:
    filter .3s ease;
}

.brand:hover
.brand-logo {
  filter:
    drop-shadow(
      0 0 13px
      rgba(0, 229, 255, .35)
    );
}

.brand-copy {
  display: flex;
  flex-direction: column;

  gap: 2px;
}

.brand-title {
  font-family:
    "Orbitron",
    sans-serif;

  font-size: 1.33rem;

  font-weight: 800;

  letter-spacing: 1.3px;

  white-space: nowrap;
}

.brand-subtitle {
  color: var(--green);

  font-size: .70rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 1.15px;
}

.navlinks {
  display: flex;
  align-items: center;

  gap: 7px;
}

.navlinks a {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 38px;

  padding:
    0
    14px;

  color: var(--muted);

  text-decoration: none;

  font-size: .78rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .65px;

  border:
    1px solid
    transparent;

  border-radius: 10px;

  transition:
    .18s ease;
}

.navlinks a:hover {
  color: var(--cyan);

  background:
    rgba(0, 229, 255, .035);

  border-color:
    rgba(0, 229, 255, .17);

  transform:
    translateY(-1px);
}

.navlinks a.active {
  color: var(--cyan);

  background:
    var(--cyan-soft);

  border-color:
    var(--cyan-border);
}

/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;

  z-index: 3;

  min-height: 235px;

  max-width: 1050px;

  padding:
    46px
    30px
    27px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero.home {
  min-height: 350px;

  padding-top: 68px;
}

.hero-kicker {
  margin-bottom: 9px;

  color: var(--green);

  font-size: .74rem;

  font-weight: 800;

  letter-spacing: 1.75px;

  text-transform: uppercase;
}

.hero h1 {
  margin: 0;

  font-family:
    "Orbitron",
    sans-serif;

  font-size:
    clamp(
      2.7rem,
      5.5vw,
      5.8rem
    );

  line-height: .97;

  font-weight: 800;

  letter-spacing:
    clamp(
      1px,
      .22vw,
      4px
    );

  white-space: nowrap;
}

.hero.home h1 {
  font-size:
    clamp(
      2.7rem,
      6vw,
      6.2rem
    );
}

.hero p {
  max-width: 720px;

  margin:
    15px
    0
    0;

  color: var(--muted);

  font-size: .95rem;

  line-height: 1.62;
}

.hero-accent {
  width: 72px;
  height: 3px;

  margin-top: 20px;

  background:
    linear-gradient(
      to right,
      var(--green),
      var(--cyan)
    );

  box-shadow:
    0 0 10px
    rgba(32, 255, 139, .28);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 22px;
}

/* =========================================================
   BUTTONS
========================================================= */

.btn {
  min-height: 41px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding:
    0
    15px;

  color: var(--cyan);

  text-decoration: none;

  font-size: .70rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .55px;

  border:
    1px solid
    rgba(0, 229, 255, .24);

  border-radius: 9px;

  background:
    rgba(0, 229, 255, .035);

  cursor: pointer;

  transition:
    .18s ease;
}

.btn:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(0, 229, 255, .50);

  background:
    rgba(0, 229, 255, .07);
}

.btn.primary {
  color: #001014;

  border-color:
    rgba(32, 255, 139, .55);

  background:
    linear-gradient(
      135deg,
      var(--green),
      #42ffc1
    );
}

.btn svg {
  width: 16px;
  height: 16px;
}

/* =========================================================
   PANELS
========================================================= */

.panel {
  position: relative;

  border:
    1px solid
    var(--cyan-border);

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(1, 10, 14, .96),
      rgba(2, 14, 18, .91)
    );

  box-shadow:
    0 15px 38px
    rgba(0, 0, 0, .20);

  overflow: hidden;
}

.panel::before {
  content: "";

  position: absolute;

  top: 0;
  left: 18px;

  width: 105px;
  height: 1px;

  background:
    linear-gradient(
      to right,
      var(--cyan),
      transparent
    );

  opacity: .50;
}

/* =========================================================
   HOME
========================================================= */

.home-grid {
  position: relative;

  z-index: 4;

  display: grid;

  grid-template-columns:
    1.04fr
    .96fr;

  gap: 12px;
}

.home-overview {
  padding: 22px;
}

.section-kicker {
  color: var(--green);

  font-size: .67rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 1.55px;
}

.section-title {
  margin:
    8px
    0
    10px;

  font-family:
    "Orbitron",
    sans-serif;

  font-size:
    clamp(
      1.3rem,
      2vw,
      2rem
    );
}

.section-copy {
  margin: 0;

  color: var(--muted);

  font-size: .87rem;

  line-height: 1.65;
}

.stats {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap: 9px;

  margin-top: 19px;
}

.stat {
  min-height: 92px;

  padding: 13px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  border:
    1px solid
    rgba(0, 229, 255, .18);

  border-radius: 11px;

  background:
    rgba(2, 15, 20, .72);
}

.stat strong {
  font-family:
    "Orbitron",
    sans-serif;

  font-size: 1rem;
}

.stat span {
  margin-top: 4px;

  color: var(--muted);

  font-size: .67rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .55px;
}

.quick-panel {
  padding: 13px;

  display: grid;

  gap: 8px;
}

.quick-item {
  display: grid;

  grid-template-columns:
    40px
    1fr
    auto;

  align-items: center;

  gap: 12px;

  min-height: 86px;

  padding:
    12px
    14px;

  color: inherit;

  text-decoration: none;

  border:
    1px solid
    rgba(0, 229, 255, .15);

  border-radius: 11px;

  background:
    rgba(2, 15, 20, .70);

  transition:
    .18s ease;
}

.quick-item:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(0, 229, 255, .42);

  background:
    rgba(3, 20, 27, .85);
}

.quick-icon {
  width: 35px;
  height: 35px;

  color: var(--cyan);
}

.quick-item:nth-child(2)
.quick-icon {
  color: var(--green);
}

.quick-item h3 {
  margin: 0;

  font-family:
    "Orbitron",
    sans-serif;

  font-size: .85rem;
}

.quick-item p {
  margin:
    5px
    0
    0;

  color: var(--muted);

  font-size: .71rem;

  line-height: 1.45;
}

.quick-arrow {
  color: var(--muted-2);

  font-size: 1.1rem;
}

/* =========================================================
   SERVER PAGE
========================================================= */

.server-grid {
  position: relative;
  z-index: 4;

  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 14px;
}

.server-card {
  min-height: 390px;

  padding: 22px;

  display: flex;
  flex-direction: column;

  border-color:
    rgba(
      0,
      229,
      255,
      .22
    );

  background:
    linear-gradient(
      150deg,
      rgba(1, 12, 17, .97),
      rgba(1, 9, 13, .94)
    );
}

.server-card::after {
  content: "";

  position: absolute;

  right: -70px;
  top: -85px;

  width: 210px;
  height: 210px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(0, 229, 255, .07),
      rgba(0, 229, 255, .018) 48%,
      transparent 72%
    );
}

.server-card .service-top {
  margin-bottom: 16px;
}

.server-card .service-icon {
  width: 50px;
  height: 50px;

  padding: 11px;

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      rgba(0, 229, 255, .075),
      rgba(0, 229, 255, .025)
    );
}

.service-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;

  gap: 7px;
}

.service-type,
.service-badge {
  padding:
    5px
    9px;

  font-size: .61rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 1px;

  border-radius: 999px;
}

.service-type {
  color: var(--cyan);

  border:
    1px solid
    rgba(0, 229, 255, .20);

  background:
    rgba(0, 229, 255, .055);
}

.service-badge {
  color: var(--green);

  border:
    1px solid
    rgba(32, 255, 139, .21);

  background:
    rgba(32, 255, 139, .055);
}

.server-card h2 {
  margin: 0;

  font-family:
    "Orbitron",
    sans-serif;

  font-size:
    clamp(
      1.15rem,
      2vw,
      1.55rem
    );

  line-height: 1.2;
}

.service-description {
  min-height: 48px;

  margin:
    9px
    0
    15px;

  color: var(--muted);

  font-size: .81rem;

  line-height: 1.58;
}

.server-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin-bottom: 17px;
}

.server-tag {
  padding:
    6px
    10px;

  color:
    #d9e5ea;

  font-size: .67rem;

  font-weight: 700;

  border:
    1px solid
    rgba(255, 255, 255, .075);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, .025);
}

.connection-box {
  padding: 13px;

  border:
    1px solid
    rgba(0, 229, 255, .16);

  border-radius: 12px;

  background:
    rgba(0, 7, 10, .46);
}

.connection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 8px;
}

.connection-label,
.connection-kind {
  color: var(--muted-2);

  font-size: .60rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .9px;
}

.connection-row {
  display: grid;

  grid-template-columns:
    1fr
    auto;

  gap: 8px;
}

.connection-value {
  min-height: 42px;

  display: flex;
  align-items: center;

  padding:
    8px
    11px;

  font-family:
    "Orbitron",
    ui-monospace,
    monospace;

  font-size: .76rem;

  font-weight: 700;

  border:
    1px solid
    rgba(255, 255, 255, .065);

  border-radius: 9px;

  background:
    rgba(0, 0, 0, .21);

  word-break: break-all;
}

.copy-btn {
  min-width: 76px;

  padding:
    0
    14px;

  border: 0;

  color: #001014;

  font-family:
    "Orbitron",
    sans-serif;

  font-size: .66rem;

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: .45px;

  border-radius: 9px;

  cursor: pointer;

  background:
    linear-gradient(
      135deg,
      var(--green),
      #42ffc1
    );

  transition:
    .18s ease;
}

.copy-btn:hover {
  transform:
    translateY(-1px);

  filter:
    brightness(1.04);

  box-shadow:
    0 8px 22px
    rgba(32, 255, 139, .12);
}

.copy-btn.copied {
  color: #001014;

  background:
    linear-gradient(
      135deg,
      var(--cyan),
      var(--cyan-bright)
    );
}

.card-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 9px;

  margin-top: auto;

  padding-top: 18px;
}

.server-note {
  margin:
    14px
    0
    0;

  padding-top: 12px;

  color: var(--muted);

  font-size: .70rem;

  line-height: 1.5;

  border-top:
    1px solid
    rgba(255, 255, 255, .055);
}

.server-note strong {
  color: var(--green);
}

@media (
  max-width: 1050px
) {
  .server-grid {
    grid-template-columns: 1fr;
  }
}

@media (
  max-width: 480px
) {
  .connection-row {
    grid-template-columns: 1fr;
  }

  .copy-btn {
    min-height: 40px;
  }

  .service-badges {
    justify-content: flex-start;
  }
}

/* =========================================================
   STATUS PAGE
========================================================= */

.summary-grid {
  position: relative;

  z-index: 4;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap: 10px;
}

.summary-card {
  min-height: 93px;

  padding:
    15px
    17px;
}

.summary-label {
  color: var(--muted-2);

  font-size: .61rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 1px;
}

.summary-value {
  margin-top: 7px;

  font-family:
    "Orbitron",
    sans-serif;

  font-size: 1rem;

  font-weight: 700;
}

.good {
  border-color:
    var(--green-border)
    !important;
}

.warning {
  border-color:
    var(--yellow-border)
    !important;
}

.bad {
  border-color:
    var(--red-border)
    !important;
}

.status-grid {
  position: relative;

  z-index: 4;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 14px;

  margin-top: 14px;
}

.status-card {
  min-height: 300px;

  padding: 21px;

  border-color:
    rgba(
      0,
      229,
      255,
      .22
    );

  background:
    linear-gradient(
      150deg,
      rgba(1, 12, 17, .97),
      rgba(1, 9, 13, .94)
    );
}

.status-card .service-top {
  margin-bottom: 14px;
}

.status-card .service-icon {
  width: 44px;
  height: 44px;

  padding: 9px;

  border-radius: 11px;

  color: var(--cyan);

  background:
    linear-gradient(
      145deg,
      rgba(0, 229, 255, .055),
      rgba(0, 229, 255, .02)
    );

  border:
    1px solid
    rgba(0, 229, 255, .16);
}

.status-card::after {
  content: "";

  position: absolute;

  right: -80px;
  top: -90px;

  width: 220px;
  height: 220px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(0, 229, 255, .06),
      rgba(0, 229, 255, .015) 48%,
      transparent 72%
    );
}

.status-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;
}

.status-card h2 {
  margin: 0;

  font-family:
    "Orbitron",
    sans-serif;

  font-size: 1.18rem;
}

.status-service-subtitle {
  max-width: 390px;

  margin-top: 7px;

  color: var(--muted);

  font-size: .72rem;

  line-height: 1.45;

  word-break: break-word;
}

.status-pill {
  display: inline-flex;
  align-items: center;

  flex-shrink: 0;

  gap: 7px;

  min-height: 33px;

  padding:
    0
    11px;

  border-radius: 999px;

  font-size: .67rem;

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: .7px;
}

.status-pill.online {
  color: var(--green);

  border:
    1px solid
    var(--green-border);

  background:
    var(--green-soft);
}

.status-pill.offline {
  color: var(--red);

  border:
    1px solid
    var(--red-border);

  background:
    var(--red-soft);
}

.status-pill.checking {
  color: var(--yellow);

  border:
    1px solid
    var(--yellow-border);

  background:
    var(--yellow-soft);
}

.status-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: currentColor;

  box-shadow:
    0 0 8px
    currentColor;
}

.meta-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 9px;

  margin-top: 19px;
}

.status-meta-grid:has(.meta-item:nth-child(4)) {
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
}

.meta-item {
  min-height: 74px;

  padding:
    10px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  text-align: center;

  border:
    1px solid
    rgba(0, 229, 255, .12);

  border-radius: 11px;

  background:
    rgba(2, 15, 20, .70);
}

.meta-key {
  color: var(--muted-2);

  font-size: .56rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .8px;
}

.meta-value {
  margin-top: 6px;

  color: var(--text);

  font-size: .77rem;

  font-weight: 800;

  line-height: 1.35;

  overflow-wrap: anywhere;
}

@media (
  max-width: 1050px
) {
  .status-grid {
    grid-template-columns: 1fr;
  }
}

@media (
  max-width: 700px
) {
  .status-heading-row {
    flex-direction: column;
  }

  .status-meta-grid,
  .status-meta-grid:has(.meta-item:nth-child(4)) {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

@media (
  max-width: 480px
) {
  .status-meta-grid,
  .status-meta-grid:has(.meta-item:nth-child(4)) {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   FOOTER
========================================================= */

.footer {
  position: relative;

  z-index: 4;

  margin-top: auto;

  padding:
    15px
    7px
    3px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  color: var(--muted-2);

  font-size: .67rem;
}

.footer strong {
  color: var(--cyan);
}

/* =========================================================
   STATUS EASTER EGGS
========================================================= */

#uplink-layer {
  position: fixed;
  inset: 0;

  z-index: 10000;

  display: none;

  pointer-events: none;

  overflow: hidden;

  background:
    radial-gradient(
      circle,
      rgba(0, 229, 255, .08),
      rgba(0, 5, 8, .64) 48%,
      rgba(0, 1, 3, .94)
    );
}

#uplink-layer.active {
  display: block;
}

.uplink-scan {
  position: absolute;
  inset: 0;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 5px,
      rgba(0, 229, 255, .07) 6px,
      transparent 7px
    );

  animation:
    uplinkScan
    .7s
    linear
    infinite;
}

@keyframes uplinkScan {
  to {
    transform:
      translateY(12px);
  }
}

.uplink-svg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
}

.uplink-path {
  fill: none;

  stroke: var(--cyan);

  stroke-width: 1.3;

  stroke-dasharray:
    12
    13;

  animation:
    uplinkPath
    .9s
    linear
    infinite;

  filter:
    drop-shadow(
      0 0 5px
      rgba(0, 229, 255, .7)
    );
}

.uplink-path.green {
  stroke: var(--green);
}

@keyframes uplinkPath {
  to {
    stroke-dashoffset: -50;
  }
}

.uplink-message {
  position: absolute;

  left: 50%;
  top: 44%;

  transform:
    translate(-50%, -50%);

  width:
    min(
      850px,
      calc(100% - 30px)
    );

  text-align: center;

  color: var(--cyan);

  font-family:
    "Orbitron",
    sans-serif;

  font-size:
    clamp(
      1rem,
      3vw,
      2.1rem
    );

  font-weight: 900;

  letter-spacing: 2px;

  text-shadow:
    0 0 15px
    rgba(0, 229, 255, .65);
}

.uplink-terminal {
  position: absolute;

  left: 5%;
  bottom: 8%;

  color:
    rgba(
      32,
      255,
      139,
      .82
    );

  font-family:
    ui-monospace,
    monospace;

  font-size: .72rem;

  line-height: 1.65;

  white-space: pre-line;
}

.uplink-dog {
  position: absolute;

  left: -100px;
  bottom: 18%;

  font-size: 3.5rem;

  animation:
    dogRun
    3.1s
    linear
    forwards;
}

@keyframes dogRun {
  to {
    left:
      calc(
        100% + 100px
      );
  }
}

#konami-layer {
  position: fixed;
  inset: 0;

  z-index: 9999;

  display: none;

  pointer-events: none;

  overflow: hidden;
}

#konami-layer.active {
  display: block;
}

.konami-title {
  position: absolute;

  top: 5%;
  left: 50%;

  transform:
    translateX(-50%);

  width:
    calc(
      100% - 30px
    );

  color: var(--green);

  text-align: center;

  font-family:
    "Orbitron",
    sans-serif;

  font-size:
    clamp(
      .8rem,
      2vw,
      1.3rem
    );

  font-weight: 900;

  letter-spacing: 1.6px;

  text-shadow:
    0 0 14px
    rgba(32, 255, 139, .65);
}

.konami-diese {
  position: absolute;

  color: var(--cyan);

  font-family:
    "Orbitron",
    sans-serif;

  font-weight: 900;

  opacity: 0;

  animation:
    chaosPop
    2.7s
    ease-in-out
    forwards;

  text-shadow:
    0 0 13px
    rgba(0, 229, 255, .8);
}

.konami-eyes {
  position: absolute;

  opacity: 0;

  animation:
    chaosPop
    3.1s
    ease-in-out
    forwards;
}

@keyframes chaosPop {
  0% {
    opacity: 0;

    transform:
      scale(.2)
      rotate(-7deg);
  }

  18% {
    opacity: 1;

    transform:
      scale(1.15)
      rotate(3deg);
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;

    transform:
      scale(.8)
      rotate(-2deg);
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (
  max-width: 1050px
) {
  .home-grid,
  .server-grid,
  .status-grid {
    grid-template-columns: 1fr;
  }

  .bg-logo-wrap {
    opacity: .60;
  }
}

@media (
  max-width: 760px
) {
  .page {
    width:
      calc(
        100% - 18px
      );
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;

    padding:
      10px
      14px;
  }

  .navlinks {
    width: 100%;

    overflow-x: auto;
  }

  .brand-logo {
    width: 50px;
    height: 50px;
  }

  .hero,
  .hero.home {
    min-height: 200px;

    padding:
      36px
      15px
      24px;
  }

  .hero h1,
  .hero.home h1 {
    font-size:
      clamp(
        2rem,
        10vw,
        4rem
      );
  }

  .summary-grid,
  .stats {
    grid-template-columns: 1fr;
  }

  .bg-logo-wrap {
    width: 230px;

    right: -55px;
    top: 145px;

    opacity: .35;
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (
  max-width: 480px
) {
  .connection-row,
  .meta-grid {
    grid-template-columns: 1fr;
  }

  .quick-item {
    grid-template-columns:
      35px
      1fr;
  }

  .quick-arrow {
    display: none;
  }
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {
  body::after,
  .page::after,
  .net-line,
  .net-node,
  .bg-logo-wrap,
  .background-logo,
  .logo-orbit,
  .topbar::before,
  .uplink-scan,
  .uplink-path,
  .uplink-dog,
  .konami-diese,
  .konami-eyes {
    animation: none !important;
  }
}


/* =========================================================
   CS2 STATS PAGE
========================================================= */

.cs2-stats-overview {
  position: relative;
  z-index: 4;

  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 10px;

  margin-bottom: 14px;
}

.cs2-overview-card {
  min-height: 92px;
  padding: 16px 18px;
}

.cs2-overview-label {
  color: var(--muted-2);

  font-size: .61rem;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 1px;
}

.cs2-overview-value {
  margin-top: 8px;

  font-family:
    "Orbitron",
    sans-serif;

  font-size: 1.05rem;
  font-weight: 800;
}

.cs2-overview-sub {
  margin-top: 5px;

  color: var(--muted);
  font-size: .67rem;
  line-height: 1.4;
}

.cs2-stats-layout {
  position: relative;
  z-index: 4;

  display: grid;
  gap: 14px;
}

.cs2-featured {
  padding: 22px;
}

.cs2-featured-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;
}

.cs2-featured-identity {
  display: flex;
  align-items: center;
  gap: 15px;
}

.cs2-place-badge {
  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  border-radius: 14px;

  font-family:
    "Orbitron",
    sans-serif;

  font-size: 1.15rem;
  font-weight: 900;

  color: var(--yellow);

  border:
    1px solid
    var(--yellow-border);

  background:
    var(--yellow-soft);

  box-shadow:
    0 0 22px
    rgba(255, 209, 102, .06);
}

.cs2-player-name {
  margin: 0;

  font-family:
    "Orbitron",
    sans-serif;

  font-size:
    clamp(
      1.35rem,
      2.5vw,
      2.1rem
    );

  line-height: 1.15;

  word-break: break-word;
}

.cs2-rank-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 9px;

  margin-top: 8px;
}

.cs2-rank-pill {
  display: inline-flex;
  align-items: center;

  min-height: 28px;

  padding:
    0
    10px;

  border-radius: 999px;

  font-size: .65rem;
  font-weight: 900;

  text-transform: uppercase;
  letter-spacing: .8px;

  color:
    var(
      --rank-color,
      var(--cyan)
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(
        --rank-color,
        var(--cyan)
      )
      34%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(
        --rank-color,
        var(--cyan)
      )
      8%,
      transparent
    );
}

.cs2-xp {
  color: var(--green);

  font-family:
    "Orbitron",
    sans-serif;

  font-size: .82rem;
  font-weight: 800;
}

.cs2-featured-position {
  text-align: right;
}

.cs2-featured-position-label {
  color: var(--muted-2);

  font-size: .60rem;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: .9px;
}

.cs2-featured-position-value {
  margin-top: 5px;

  color: var(--cyan);

  font-family:
    "Orbitron",
    sans-serif;

  font-size: 1rem;
  font-weight: 800;
}

.cs2-progress-wrap {
  margin-top: 20px;

  padding: 13px 14px;

  border:
    1px solid
    rgba(0, 229, 255, .12);

  border-radius: 11px;

  background:
    rgba(0, 0, 0, .15);
}

.cs2-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  color: var(--muted);

  font-size: .67rem;
  font-weight: 700;
}

.cs2-progress-bar {
  height: 7px;

  margin-top: 10px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, .055);
}

.cs2-progress-fill {
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      to right,
      var(--cyan),
      var(--green)
    );

  box-shadow:
    0 0 12px
    rgba(32, 255, 139, .18);
}

.cs2-stat-grid {
  display: grid;

  grid-template-columns:
    repeat(
      6,
      minmax(0, 1fr)
    );

  gap: 9px;

  margin-top: 18px;
}

.cs2-stat-box {
  min-height: 78px;

  padding: 10px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  text-align: center;

  border:
    1px solid
    rgba(0, 229, 255, .11);

  border-radius: 10px;

  background:
    rgba(2, 15, 20, .70);
}

.cs2-stat-label {
  color: var(--muted-2);

  font-size: .55rem;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: .75px;
}

.cs2-stat-value {
  margin-top: 6px;

  color: var(--text);

  font-size: .79rem;
  font-weight: 800;
}

.cs2-leaderboard {
  padding: 14px;
}

.cs2-leaderboard-head {
  display: grid;

  grid-template-columns:
    58px
    minmax(180px, 1.4fr)
    94px
    82px
    82px
    82px
    100px;

  gap: 10px;

  align-items: center;

  padding:
    3px
    12px
    10px;

  color: var(--muted-2);

  font-size: .58rem;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: .75px;
}

.cs2-player-row {
  display: grid;

  grid-template-columns:
    58px
    minmax(180px, 1.4fr)
    94px
    82px
    82px
    82px
    100px;

  gap: 10px;

  align-items: center;

  min-height: 78px;

  padding:
    12px;

  border:
    1px solid
    rgba(0, 229, 255, .105);

  border-radius: 11px;

  background:
    rgba(2, 15, 20, .60);

  transition:
    .16s ease;
}

.cs2-player-row + .cs2-player-row {
  margin-top: 8px;
}

.cs2-player-row:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(0, 229, 255, .22);

  background:
    rgba(3, 20, 27, .76);
}

.cs2-row-position {
  font-family:
    "Orbitron",
    sans-serif;

  font-size: .86rem;
  font-weight: 900;

  color: var(--muted);
}

.cs2-row-position.top-two {
  color: var(--yellow);
}

.cs2-row-player {
  min-width: 0;
}

.cs2-row-name {
  overflow: hidden;

  color: var(--text);

  font-family:
    "Orbitron",
    sans-serif;

  font-size: .81rem;
  font-weight: 800;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.cs2-row-rank {
  display: flex;
  align-items: center;
  gap: 7px;

  margin-top: 5px;
}

.cs2-row-xp {
  color: var(--green);

  font-size: .63rem;
  font-weight: 800;
}

.cs2-row-value {
  color: var(--text);

  font-size: .76rem;
  font-weight: 800;
}

.cs2-row-value small {
  display: block;

  margin-top: 3px;

  color: var(--muted-2);

  font-size: .55rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .55px;
}

.cs2-player-details {
  grid-column:
    1
    / -1;

  display: grid;

  grid-template-columns:
    repeat(
      6,
      minmax(0, 1fr)
    );

  gap: 8px;

  margin-top: 3px;
}

.cs2-detail-chip {
  padding:
    9px
    10px;

  border:
    1px solid
    rgba(255, 255, 255, .055);

  border-radius: 9px;

  background:
    rgba(0, 0, 0, .13);
}

.cs2-detail-chip span {
  display: block;

  color: var(--muted-2);

  font-size: .53rem;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: .6px;
}

.cs2-detail-chip strong {
  display: block;

  margin-top: 4px;

  color: var(--text);

  font-size: .70rem;
}

.cs2-empty {
  padding: 28px;

  text-align: center;

  color: var(--muted);
}

.cs2-loading {
  min-height: 260px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--muted);

  font-family:
    "Orbitron",
    sans-serif;

  font-size: .78rem;
  letter-spacing: .7px;
}

@media (
  max-width: 1180px
) {
  .cs2-stat-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .cs2-leaderboard-head {
    display: none;
  }

  .cs2-player-row {
    grid-template-columns:
      54px
      minmax(0, 1fr)
      90px;
  }

  .cs2-player-row
  > .cs2-row-value:nth-of-type(n+2) {
    display: none;
  }

  .cs2-player-details {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }
}

@media (
  max-width: 760px
) {
  .cs2-stats-overview {
    grid-template-columns: 1fr;
  }

  .cs2-featured-top {
    flex-direction: column;
  }

  .cs2-featured-position {
    text-align: left;
  }

  .cs2-stat-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .cs2-player-details {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

@media (
  max-width: 480px
) {
  .cs2-player-row {
    grid-template-columns:
      46px
      minmax(0, 1fr);
  }

  .cs2-player-row
  > .cs2-row-value {
    display: none;
  }

  .cs2-player-details,
  .cs2-stat-grid {
    grid-template-columns: 1fr 1fr;
  }
}