* {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: #02040a;
      color: #e8f7ff;
      font-family: "Space Grotesk", sans-serif;
      overflow-x: hidden;
    }

/* =========================================================
   NEXUS // FACTION CARDS
   Размер как у карточек "Эпичные PvP битвы"
   ========================================================= */

.factions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;

  align-items: stretch;
}

.faction-card {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;
  min-height: 360px;

  overflow: hidden;

  color: #fff;
  text-decoration: none;

  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.008)
    );

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.faction-card:hover {
  transform: translateY(-5px);

  border-color: rgba(0, 245, 255, 0.25);

  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(0, 245, 255, 0.05);
}


/* =========================================================
   IMAGE
   ========================================================= */

.faction-image {
  position: relative;

  width: 100%;
  height: 145px;

  flex-shrink: 0;

  overflow: hidden;

  background: #050812;
}

.faction-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(3, 7, 18, 0.05) 20%,
      rgba(3, 7, 18, 0.25) 50%,
      rgba(3, 7, 18, 0.95) 100%
    );

  pointer-events: none;
}

.faction-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.6s ease,
    filter 0.5s ease;
}

.faction-card:hover .faction-image img {
  transform: scale(1.05);

  filter:
    brightness(1.08)
    saturate(1.08);
}


/* =========================================================
   CONTENT
   ========================================================= */

.faction-info {
  position: relative;

  display: flex;
  flex-direction: column;
  flex: 1;

  padding: 22px 28px 28px;

  margin-top: -18px;

  z-index: 2;
}

.faction-code {
  display: block;

  margin-bottom: 5px;

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

  font-size: 10px;
  font-weight: 600;

  letter-spacing: 0.22em;

  color: #67e8f9;

  text-transform: uppercase;
}

.faction-info h3 {
  margin: 4px 0 0;

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

  font-size: 20px;
  font-weight: 700;

  color: #f8fafc;
}

.faction-info p {
  margin: 14px 0 0;

  color: #64748b;

  font-size: 13px;

  line-height: 1.75;
}


/* =========================================================
   MORE
   ========================================================= */

.faction-more {
  display: inline-flex;

  align-items: center;
  gap: 8px;

  margin-top: auto;
  padding-top: 20px;

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

  font-size: 9px;
  font-weight: 600;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: #94a3b8;

  transition:
    color 0.25s ease,
    gap 0.25s ease;
}

.faction-more span {
  font-size: 14px;

  transition: transform 0.25s ease;
}

.faction-card:hover .faction-more {
  gap: 12px;
  color: #67e8f9;
}

.faction-card:hover .faction-more span {
  transform: translateX(3px);
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 1024px) {

  .factions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .faction-card {
    min-height: 340px;
  }

  .faction-image {
    height: 125px;
  }

  .faction-info {
    padding: 20px;
  }

}

@media (max-width: 767px) {

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

  .faction-card {
    min-height: 0;
  }

  .faction-image {
    height: 150px;
  }

}



/* =========================================================
   STARFIELD
   ========================================================= */

#spaceCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Контент сайта выше звёзд */
.header,
main,
footer {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  #spaceCanvas {
    display: none;
  }
}

/* Не создаём лишние эффекты при уменьшенной анимации */
@media (prefers-reduced-motion: reduce) {
  #spaceCanvas {
    display: none;
  }
}


    /* =========================================================
       SPACE BACKGROUND
    ========================================================== */

    .space-bg {
      position: relative;
      min-height: 100vh;
      background:
        radial-gradient(
          circle at 75% 20%,
          rgba(36,107,254,.15),
          transparent 30%
        ),
        radial-gradient(
          circle at 20% 65%,
          rgba(139,92,246,.12),
          transparent 32%
        ),
        #02040a;
    }

    .space-bg::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;

      background-image:
        radial-gradient(
          circle,
          rgba(255,255,255,.85) 1px,
          transparent 1px
        ),
        radial-gradient(
          circle,
          rgba(0,245,255,.6) 1px,
          transparent 1px
        ),
        radial-gradient(
          circle,
          rgba(139,92,246,.65) 1px,
          transparent 1px
        );

      background-size:
        150px 150px,
        230px 230px,
        340px 340px;

      background-position:
        20px 20px,
        80px 100px,
        150px 50px;

      opacity: .6;

      animation: starsMove 90s linear infinite;
    }

    .space-bg::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;

      background:
        linear-gradient(
          115deg,
          transparent 0%,
          rgba(0,245,255,.025) 45%,
          transparent 55%
        );

      animation: scan 10s ease-in-out infinite;
    }

    @keyframes starsMove {
      from {
        transform: translate3d(0,0,0);
      }

      to {
        transform: translate3d(-150px,120px,0);
      }
    }

    @keyframes scan {
      0%,100% {
        transform: translateX(-30%);
      }

      50% {
        transform: translateX(30%);
      }
    }

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

    .header {
      background: rgba(2,4,10,.68);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(0,245,255,.08);
    }

    .logo {
      text-shadow:
        0 0 12px rgba(0,245,255,.7),
        0 0 35px rgba(0,245,255,.25);
    }

    .logo::after {
      content: "";
      display: block;
      width: 32%;
      height: 2px;
      margin-top: 3px;
      background: #00f5ff;
      box-shadow: 0 0 12px #00f5ff;
    }

    .nav-link {
      position: relative;
      color: #8294a8;
      transition: .25s ease;
    }

    .nav-link:hover {
      color: #00f5ff;
      text-shadow: 0 0 12px rgba(0,245,255,.7);
    }

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

    .neon-button {
      position: relative;
      overflow: hidden;

      background:
        linear-gradient(
          100deg,
          #00c8ff,
          #246bfe 55%,
          #8b5cf6
        );

      box-shadow:
        0 0 20px rgba(0,245,255,.22),
        inset 0 1px rgba(255,255,255,.2);

      transition: .3s ease;
    }

    .neon-button::before {
      content: "";
      position: absolute;
      top: 0;
      left: -120%;
      width: 70%;
      height: 100%;

      background:
        linear-gradient(
          90deg,
          transparent,
          rgba(255,255,255,.4),
          transparent
        );

      transform: skewX(-20deg);
      transition: .55s ease;
    }

    .neon-button:hover::before {
      left: 150%;
    }

    .neon-button:hover {
      transform: translateY(-2px);

      box-shadow:
        0 0 28px rgba(0,245,255,.45),
        0 0 60px rgba(139,92,246,.18);
    }

    .pulse {
      animation: pulseButton 2.8s ease-in-out infinite;
    }

    @keyframes pulseButton {
      0%,100% {
        box-shadow:
          0 0 15px rgba(0,245,255,.2);
      }

      50% {
        box-shadow:
          0 0 28px rgba(0,245,255,.45),
          0 0 55px rgba(139,92,246,.18);
      }
    }

    .outline-button {
      border: 1px solid rgba(0,245,255,.4);
      background: rgba(0,245,255,.025);
      transition: .3s ease;
    }

    .outline-button:hover {
      border-color: #00f5ff;
      background: rgba(0,245,255,.08);
      box-shadow: 0 0 25px rgba(0,245,255,.12);
      transform: translateY(-2px);
    }

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

    .hero-title {
      letter-spacing: -.06em;

      background:
        linear-gradient(
          110deg,
          #ffffff 10%,
          #a9faff 45%,
          #8b5cf6 90%
        );

      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;

      text-shadow:
        0 0 50px rgba(0,245,255,.12);
    }

    .hero-content {
      animation:
        heroReveal
        1.1s
        cubic-bezier(.2,.8,.2,1)
        both;
    }

    @keyframes heroReveal {
      from {
        opacity: 0;
        transform: translateY(35px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .orb-one {
      width: 380px;
      height: 380px;
      right: 4%;
      top: 15%;

      background:
        radial-gradient(
          circle,
          rgba(0,245,255,.11),
          transparent 68%
        );

      animation: floating 8s ease-in-out infinite;
    }

    .orb-two {
      width: 430px;
      height: 430px;
      left: -5%;
      bottom: 0;

      background:
        radial-gradient(
          circle,
          rgba(139,92,246,.1),
          transparent 68%
        );

      animation: floating 11s ease-in-out infinite reverse;
    }

    @keyframes floating {
      0%,100% {
        transform: translateY(0) scale(1);
      }

      50% {
        transform: translateY(-20px) scale(1.04);
      }
    }

    .hero-grid {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 35%;

      opacity: .13;

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

      background-size: 60px 60px;

      transform:
        perspective(350px)
        rotateX(60deg)
        scale(1.4);

      transform-origin: bottom;

      mask-image:
        linear-gradient(
          to top,
          black,
          transparent
        );

      -webkit-mask-image:
        linear-gradient(
          to top,
          black,
          transparent
        );
    }

    /* =========================================================
       GLASS
    ========================================================== */

    .glass {
      position: relative;

      background:
        linear-gradient(
          135deg,
          rgba(255,255,255,.085),
          rgba(255,255,255,.025)
        );

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

      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);

      box-shadow:
        0 25px 80px rgba(0,0,0,.45),
        inset 0 1px rgba(255,255,255,.08);
    }

    .glass::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;

      background:
        linear-gradient(
          135deg,
          rgba(0,245,255,.3),
          transparent 35%,
          transparent 65%,
          rgba(139,92,246,.25)
        );

      mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

      mask-composite: exclude;

      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

      -webkit-mask-composite: xor;

      pointer-events: none;
    }

    /* =========================================================
       FORM
    ========================================================== */

    .input {
      width: 100%;

      background: rgba(0,0,0,.3);
      border: 1px solid rgba(148,163,184,.16);

      color: white;

      transition: .25s ease;
    }

    .input::placeholder {
      color: #536273;
    }

    .input:focus {
      outline: none;

      border-color:
        rgba(0,245,255,.65);

      box-shadow:
        0 0 0 3px rgba(0,245,255,.06),
        0 0 20px rgba(0,245,255,.08);
    }

    .input.error {
      border-color: rgba(239,68,68,.7);

      box-shadow:
        0 0 0 3px rgba(239,68,68,.06);
    }

    .field-error {
      display: none;
      color: #f87171;
      font-size: 10px;
      margin-top: 6px;
    }

    .field-error.show {
      display: block;
    }

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

    .status-dot {
      width: 7px;
      height: 7px;
      flex-shrink: 0;

      border-radius: 50%;

      background: #00f5ff;

      box-shadow:
        0 0 12px #00f5ff;

      animation: statusPulse 1.8s infinite;
    }

    @keyframes statusPulse {
      0%,100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: .45;
        transform: scale(.7);
      }
    }

    /* =========================================================
       FEATURES
    ========================================================== */

    .feature {
      background:
        linear-gradient(
          145deg,
          rgba(15,23,42,.75),
          rgba(3,5,13,.7)
        );

      border: 1px solid rgba(148,163,184,.1);

      transition: .35s ease;
    }

    .feature:hover {
      transform: translateY(-8px);

      border-color:
        rgba(0,245,255,.25);

      box-shadow:
        0 20px 55px rgba(0,0,0,.35),
        0 0 30px rgba(0,245,255,.05);
    }

    /* =========================================================
       MODALS
    ========================================================== */

    .modal {
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;
    }

    .modal.active {
      opacity: 1;
      pointer-events: auto;
    }

    .modal-card {
      transform:
        translateY(15px)
        scale(.97);

      transition: .3s ease;
    }

    .modal.active .modal-card {
      transform:
        translateY(0)
        scale(1);
    }

    /* =========================================================
       LOADER
    ========================================================== */

    .loader {
      width: 16px;
      height: 16px;

      border-radius: 50%;

      border:
        2px solid rgba(255,255,255,.3);

      border-top-color: white;

      animation:
        spin .7s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    /* =========================================================
       REVEAL
    ========================================================== */

    .reveal {
      opacity: 0;
      transform: translateY(25px);
      transition: .7s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* =========================================================
       MOBILE
    ========================================================== */

    @media (max-width: 768px) {

      .hero-title {
        letter-spacing: -.04em;
      }

      .orb-one {
        width: 240px;
        height: 240px;
      }

      .orb-two {
        width: 280px;
        height: 280px;
      }

      .hero-grid {
        height: 25%;
      }
    }