:root {
      --bg: #0a0f1d;
      --bg2: #111a31;
      --card: rgba(255,255,255,0.05);
      --border: rgba(255,255,255,0.10);
      --text: #eef3ff;
      --muted: #b9c3df;
      --accent: #7c9cff;
      --accent2: #56e0b6;
      --max: 1180px;
      --radius: 22px;
      --shadow: 0 18px 60px rgba(0,0,0,0.35);
    }

    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      padding-bottom: 120px;
      color: var(--text);
      line-height: 1.6;
    }

    section {
      padding: 28px 0;
    }

    .hero {
      padding: 82px 0 34px;
    }

    .hero-grid,
    .grid-3 {
      display: grid;
      gap: 18px;
    }

    .hero-grid {
      grid-template-columns: 1.05fr 0.95fr;
      align-items: center;
      gap: 26px;
    }

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

    .eyebrow {
      display: inline-block;
      padding: 8px 14px;
      border-radius: 999px;
      font-size: 0.92rem;
      margin-bottom: 16px;
    }

    h1 {
      margin: 0 0 14px;
      font-size: clamp(2.2rem, 5vw, 4.4rem);
      line-height: 1.02;
      letter-spacing: -0.04em;
    }

    .lead {
      margin: 0;
      max-width: 760px;
      color: var(--muted);
      font-size: clamp(1rem, 2vw, 1.12rem);
    }

    .panel,
    .card {
      padding: 22px;
      border-radius: var(--radius);
    }

    .section-head {
      margin-bottom: 24px;
    }

    .section-head h2 {
      margin: 0 0 8px;
      font-size: clamp(1.6rem, 3vw, 2.3rem);
    }

    .section-head p,
    .card p {
      margin: 0;
    }

    .server-list {
      display: grid;
      gap: 12px;
    }

    .server-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 110px;
      gap: 16px;
      align-items: center;
      padding: 14px 16px;
      border-radius: 16px;
    }

    .server-title {
      font-weight: 800;
    }

    .server-desc {
      color: var(--muted);
      font-size: 0.93rem;
    }

    .status {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 95px;
      height: 34px;
      border-radius: 999px;
      font-size: 0.88rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      background: rgba(255,255,255,0.04);
    }

    .on {
      border: 1px solid rgba(86,224,182,0.45);
      color: #85f2cf;
      box-shadow: 0 0 8px rgba(86,224,182,0.25);
    }

    .off {
      border: 1px solid rgba(255,80,80,0.55);
      color: #ff8080;
      box-shadow: 0 0 8px rgba(255,80,80,0.25);
    }

    .dc {
      border: 1px solid rgba(200,167,90,0.7);
      color: #e3c87a;
      box-shadow: 0 0 8px rgba(200,167,90,0.25);
    }

    .list {
      list-style: none;
      margin: 14px 0 0;
      padding: 0;
    }

    .list li {
      padding: 10px 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      color: var(--muted);
    }

    @media (max-width: 980px) {
      .hero-grid,
      .grid-3 {
        grid-template-columns: 1fr;
      }

      .server-item {
        grid-template-columns: 1fr;
      }
    }