:root {
      --bg: #050505;
      --panel: rgba(12, 12, 14, .78);
      --panel-solid: #0d0d10;
      --line: rgba(255,255,255,.12);
      --line-strong: rgba(255,255,255,.2);
      --text: #f5f5f7;
      --muted: #a1a1aa;
      --soft: #d4d4d8;
      --accent: #ffffff;
    }

    html { scroll-behavior: smooth; }

    body {
      min-height: 100vh;
      margin: 0;
      color: var(--text);
      background: var(--bg);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.075), transparent 34rem),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: auto, 72px 72px, 72px 72px;
      mask-image: linear-gradient(to bottom, black, transparent 80%);
    }

    .navbar {
      min-height: 76px;
      background: rgba(5, 5, 5, .72);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(18px);
    }

    .navbar .container {
      gap: .85rem;
    }

    .brand-logo {
      width: 52px;
      height: 52px;
      border-radius: 10px;
      border: 1px solid var(--line-strong);
      object-fit: cover;
      background: #111;
    }

    .brand-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      line-height: .9;
      text-transform: uppercase;
    }

    .brand-main {
      color: #f5f5f7;
      font-size: .92rem;
      font-weight: 900;
      letter-spacing: .02em;
    }

    .brand-sub {
      color: #ff1238;
      font-size: .76rem;
      font-weight: 900;
      letter-spacing: .04em;
      text-shadow:
        0 0 12px rgba(255, 18, 56, .46),
        0 0 28px rgba(255, 18, 56, .24);
    }

    .nav-link {
      color: rgba(245,245,247,.7);
      font-weight: 600;
    }

    .nav-link:hover { color: #fff; }

    .nav-actions {
      justify-content: flex-end;
    }

    .btn-white {
      --bs-btn-color: #050505;
      --bs-btn-bg: #f5f5f7;
      --bs-btn-border-color: #f5f5f7;
      --bs-btn-hover-color: #050505;
      --bs-btn-hover-bg: #ffffff;
      --bs-btn-hover-border-color: #ffffff;
      font-weight: 800;
      position: relative;
      overflow: hidden;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .btn-ghost {
      --bs-btn-color: #f5f5f7;
      --bs-btn-border-color: rgba(255,255,255,.28);
      --bs-btn-hover-color: #050505;
      --bs-btn-hover-bg: #f5f5f7;
      --bs-btn-hover-border-color: #f5f5f7;
      font-weight: 800;
      position: relative;
      overflow: hidden;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease, background-color .18s ease;
    }

    .btn-white::before,
    .btn-ghost::before {
      content: "";
      position: absolute;
      inset: -40% auto -40% -65%;
      width: 48%;
      transform: skewX(-18deg);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
      opacity: 0;
      pointer-events: none;
    }

    .btn-white:hover,
    .btn-ghost:hover {
      transform: translateY(-3px);
      box-shadow:
        0 18px 42px rgba(0,0,0,.36),
        0 0 34px rgba(255, 18, 56, .16);
    }

    .btn-white:hover::before,
    .btn-ghost:hover::before {
      opacity: 1;
      animation: buttonShine .58s ease forwards;
    }

    .btn-white:hover i,
    .btn-ghost:hover i {
      animation: iconKick .38s ease;
    }

    .btn-disabled {
      border-color: rgba(255,255,255,.14) !important;
      color: rgba(245,245,247,.38) !important;
      background: rgba(255,255,255,.035) !important;
      cursor: not-allowed !important;
      transform: none !important;
      box-shadow: none !important;
    }

    .btn-disabled::before {
      display: none;
    }

    @keyframes buttonShine {
      from { left: -65%; }
      to { left: 125%; }
    }

    @keyframes iconKick {
      0%, 100% { transform: translateX(0) scale(1); }
      45% { transform: translateX(2px) scale(1.08); }
    }

    .hero {
      position: relative;
      min-height: 100vh;
      min-height: 100svh;
      overflow: hidden;
      background: #050505;
    }

    .hero-carousel,
    .hero-carousel .carousel-inner,
    .hero-carousel .carousel-item {
      min-height: 100vh;
      min-height: 100svh;
    }

    .hero-slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 58% center;
      filter: grayscale(.18) saturate(.88) brightness(.62);
      transform: scale(1.015);
    }

    .carousel-item.active .hero-slide {
      animation: slowZoom 9s ease-out forwards;
    }

    @keyframes slowZoom {
      from { transform: scale(1.015); }
      to { transform: scale(1.06); }
    }

    .hero-shade {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(90deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.78) 34%, rgba(5,5,5,.34) 66%, rgba(5,5,5,.7) 100%),
        linear-gradient(180deg, rgba(5,5,5,.38) 0%, rgba(5,5,5,.08) 42%, #050505 100%);
    }

    .hero-content {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: grid;
      align-items: center;
      padding: 8rem 0 5rem;
    }

    .hero-title {
      max-width: 950px;
      font-size: clamp(3.2rem, 8.2vw, 8rem);
      line-height: .88;
      letter-spacing: 0;
      font-weight: 900;
      text-transform: uppercase;
    }

    .gaming-word {
      position: relative;
      display: inline-block;
      color: #ff1238;
      text-shadow:
        0 0 22px rgba(255, 18, 56, .52),
        0 0 68px rgba(255, 18, 56, .3);
      animation: gamingPulse 1.7s ease-in-out infinite, gamingJitter 4.2s steps(1, end) infinite;
    }

    .gaming-word::before,
    .gaming-word::after {
      content: attr(data-text);
      position: absolute;
      inset: 0;
      opacity: .72;
      pointer-events: none;
      mix-blend-mode: screen;
    }

    .gaming-word::before {
      color: #ff5b70;
      transform: translateX(3px);
      clip-path: inset(0 0 55% 0);
      animation: gamingGlitchTop 1.45s steps(2, end) infinite;
    }

    .gaming-word::after {
      color: #8b0018;
      transform: translateX(-3px);
      clip-path: inset(48% 0 0 0);
      animation: gamingGlitchBottom 1.95s steps(2, end) infinite;
    }

    .gaming-scan {
      position: absolute;
      inset: -4% -2%;
      pointer-events: none;
      background:
        repeating-linear-gradient(
          180deg,
          transparent 0 8px,
          rgba(255, 18, 56, .34) 9px,
          transparent 11px
        );
      mix-blend-mode: screen;
      opacity: 0;
      clip-path: inset(0 0 0 0);
      animation: gamingScan 2.15s linear infinite;
    }

    .gaming-accent {
      color: #ff1238;
      text-shadow: 0 0 20px rgba(255, 18, 56, .26);
    }

    @keyframes gamingPulse {
      0%, 100% { filter: brightness(1); }
      38% { filter: brightness(1.34) contrast(1.08); }
      48% { transform: translateX(0); }
      49% { transform: translateX(-2px); }
      50% { transform: translateX(2px); }
      51% { transform: translateX(0); }
    }

    @keyframes gamingJitter {
      0%, 8%, 12%, 36%, 42%, 64%, 70%, 100% { transform: translate(0, 0) skewX(0deg); }
      9% { transform: translate(-2px, 1px) skewX(-2deg); }
      10% { transform: translate(2px, -1px) skewX(2deg); }
      37% { transform: translate(3px, 0) skewX(1deg); }
      39% { transform: translate(-3px, 1px) skewX(-2deg); }
      65% { transform: translate(2px, -1px); }
      67% { transform: translate(-1px, 1px); }
    }

    @keyframes gamingGlitchTop {
      0%, 62%, 100% { transform: translate(3px, 0); clip-path: inset(0 0 58% 0); opacity: .2; }
      18% { transform: translate(-7px, -2px); clip-path: inset(10% 0 64% 0); opacity: .92; }
      20% { transform: translate(7px, 1px); clip-path: inset(0 0 74% 0); opacity: .68; }
      42% { transform: translate(-5px, 2px); clip-path: inset(22% 0 46% 0); opacity: .86; }
      44% { transform: translate(4px, -1px); clip-path: inset(5% 0 70% 0); opacity: .62; }
      64% { transform: translate(8px, 0); clip-path: inset(34% 0 38% 0); opacity: .82; }
      66% { transform: translate(1px, 0); clip-path: inset(0 0 58% 0); opacity: .2; }
    }

    @keyframes gamingGlitchBottom {
      0%, 58%, 100% { transform: translate(-3px, 0); clip-path: inset(52% 0 0 0); opacity: .2; }
      14% { transform: translate(6px, 2px); clip-path: inset(62% 0 13% 0); opacity: .86; }
      17% { transform: translate(-8px, -1px); clip-path: inset(40% 0 35% 0); opacity: .68; }
      35% { transform: translate(7px, -2px); clip-path: inset(50% 0 28% 0); opacity: .82; }
      38% { transform: translate(-5px, 1px); clip-path: inset(72% 0 6% 0); opacity: .72; }
      61% { transform: translate(-3px, 0); clip-path: inset(52% 0 0 0); opacity: .2; }
    }

    @keyframes gamingScan {
      0%, 72%, 100% { opacity: 0; transform: translateY(-18%); }
      5% { opacity: .34; transform: translateY(-8%); }
      12% { opacity: .2; transform: translateY(18%); }
      19% { opacity: .42; transform: translateY(44%); }
      26% { opacity: 0; transform: translateY(70%); }
    }

    .hero-lead {
      max-width: 700px;
      color: var(--muted);
      font-size: clamp(1.05rem, 1.6vw, 1.25rem);
      line-height: 1.7;
    }

    .carousel-indicators {
      justify-content: flex-start;
      margin-right: 0;
      margin-left: calc((100vw - min(1320px, calc(100vw - 24px))) / 2);
      margin-bottom: 1.25rem;
    }

    .carousel-indicators [data-bs-target] {
      width: 44px;
      height: 3px;
      border: 0;
      border-radius: 999px;
      background-color: rgba(255,255,255,.38);
    }

    .carousel-indicators .active {
      background-color: #fff;
    }

    .servers {
      padding: 4.5rem 0;
      background: #050505;
      border-top: 1px solid var(--line);
    }

    .section-heading {
      font-size: clamp(2rem, 4vw, 3.2rem);
      line-height: 1;
      letter-spacing: 0;
      font-weight: 900;
      text-transform: uppercase;
    }

    .servers-table-wrap {
      border: 1px solid var(--line);
      border-radius: 10px;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      background: rgba(255,255,255,.025);
    }

    .servers-search {
      width: min(100%, 220px);
      color: var(--text);
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.045);
      padding: .55rem .85rem;
      outline: none;
      font-size: .85rem;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: none;
    }

    .servers-search::placeholder {
      color: rgba(245,245,247,.5);
    }

    .servers-search:focus {
      border-color: rgba(169, 0, 0, .9);
      box-shadow: 0 0 0 .2rem rgba(169, 0, 0, .18);
    }

    .servers-table {
      min-width: 760px;
      margin: 0;
      color: var(--text);
      vertical-align: middle;
      --bs-table-bg: transparent;
      --bs-table-color: var(--text);
      --bs-table-border-color: var(--line);
      --bs-table-striped-bg: rgba(255,255,255,.025);
      --bs-table-striped-color: var(--text);
      --bs-table-hover-bg: rgba(255,255,255,.045);
      --bs-table-hover-color: var(--text);
    }

    .servers-table th {
      color: var(--muted);
      font-size: .74rem;
      font-weight: 900;
      letter-spacing: .1em;
      text-transform: uppercase;
      background: rgba(255,255,255,.035);
      border-color: var(--line);
      padding: .95rem 1rem;
      white-space: nowrap;
    }

    .sort-button {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      color: inherit;
      border: 0;
      background: transparent;
      padding: 0;
      font: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
    }

    .sort-button::after {
      content: "↕";
      color: rgba(245,245,247,.38);
      font-size: .85rem;
    }

    .sort-button[data-direction="asc"]::after {
      content: "↑";
      color: #fff;
    }

    .sort-button[data-direction="desc"]::after {
      content: "↓";
      color: #fff;
    }

    .servers-table td {
      color: var(--text);
      background: transparent;
      border-color: var(--line);
      padding: 1rem;
    }

    .servers-empty {
      display: none;
      color: var(--muted);
      padding: 1rem;
      border: 1px solid var(--line);
      border-top: 0;
      border-radius: 0 0 10px 10px;
      background: rgba(255,255,255,.025);
    }

    .server-value {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      color: #f5f5f7;
    }

    .status-online {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: .45rem;
      color: #f5f5f7;
      font-weight: 800;
    }

    .status-online::before {
      content: "";
      width: .55rem;
      height: .55rem;
      border-radius: 50%;
      background: #35ff8f;
      box-shadow: 0 0 18px rgba(53, 255, 143, .7);
    }

    .status-offline {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: .45rem;
      color: #f5f5f7;
      font-weight: 800;
    }

    .status-offline::before {
      content: "";
      width: .55rem;
      height: .55rem;
      border-radius: 50%;
      background: #52525b;
      box-shadow: 0 0 14px rgba(82, 82, 91, .5);
    }

    .status-demand {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: .45rem;
      color: #f5f5f7;
      font-weight: 800;
    }

    .status-demand::before {
      content: "";
      width: .55rem;
      height: .55rem;
      border-radius: 50%;
      background: #ff1238;
      box-shadow: 0 0 16px rgba(255, 18, 56, .62);
    }

    .logo-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
    }

    .logo-tile {
      min-height: 260px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018));
      padding: 1.2rem;
    }

    .logo-mark {
      width: 180px;
      height: 180px;
      color: #f5f5f7;
      filter:
        drop-shadow(0 0 16px rgba(255, 18, 56, .28))
        drop-shadow(0 0 28px rgba(255,255,255,.08));
    }

    .logo-mark text {
      font-family: Inter, system-ui, sans-serif;
      font-weight: 900;
      dominant-baseline: middle;
      text-anchor: middle;
    }

    footer {
      color: var(--muted);
      border-top: 1px solid var(--line);
      background: #050505;
    }

    @media (max-width: 991.98px) {
      .hero-title { font-size: clamp(3rem, 14vw, 5.4rem); }
      .hero-content { padding-top: 7rem; }
      .hero-shade {
        background:
          linear-gradient(90deg, rgba(5,5,5,.9) 0%, rgba(5,5,5,.62) 58%, rgba(5,5,5,.46) 100%),
          linear-gradient(180deg, rgba(5,5,5,.18) 0%, #050505 100%);
      }
    }

    @media (max-width: 575.98px) {
      .navbar {
        min-height: auto;
        padding: .65rem 0;
      }

      .navbar-brand {
        gap: .65rem !important;
      }

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

      .brand-sub {
        max-width: none;
        white-space: nowrap;
      }

      .nav-actions {
        width: 100%;
        justify-content: flex-start;
      }

      .nav-actions .btn {
        padding: .38rem .58rem;
        font-size: .78rem;
      }

      .hero-content .container {
        width: 100svw;
        max-width: 100svw;
        padding-right: 12px;
        padding-left: 12px;
        overflow: hidden;
      }

      .hero-title {
        font-size: clamp(2.55rem, 11vw, 3.05rem);
        line-height: .9;
        max-width: 100%;
      }

      .hero-lead {
        font-size: 1rem;
        width: min(100%, 340px);
        max-width: 100%;
      }

      .hero-actions {
        flex-direction: column;
        align-items: stretch;
        width: min(100%, 340px);
        max-width: 100%;
      }

      .hero-actions .btn {
        width: 100%;
        max-width: 100%;
      }

      .logo-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 991.98px) and (orientation: landscape) {
      .hero,
      .hero-carousel,
      .hero-carousel .carousel-inner,
      .hero-carousel .carousel-item {
        min-height: 100svh;
      }

      .hero-slide {
        object-position: 62% center;
        filter: grayscale(.15) saturate(.95) brightness(.58);
      }

      .hero-content {
        padding: 4.65rem 0 1.6rem;
      }

      .hero-title {
        max-width: 560px;
        font-size: clamp(1.9rem, 5.7vw, 3rem);
        line-height: .84;
        margin-bottom: .55rem !important;
      }

      .hero-lead {
        width: min(100%, 560px);
        max-width: 560px;
        margin-bottom: .65rem !important;
        font-size: .86rem;
        line-height: 1.35;
      }

      .hero-actions {
        width: auto;
        max-width: 620px;
        flex-direction: row;
        align-items: center;
        gap: .75rem !important;
      }

      .hero-actions .btn {
        width: auto;
        padding: .46rem .9rem !important;
        font-size: .86rem;
      }

      .carousel-indicators {
        margin-bottom: .65rem;
      }
    }