:root {
  --bg: #0b1020;
  --panel: #10192b;
  --panel-2: #0f1730;
  --text: #e8eef8;
  --muted: #9fb2d1;

  --accent: #66a3ff;
  --accent-2: #6ee7ff;

  --radius: 16px;
  --radius-lg: 22px;

  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-6: 28px;
  --space-8: 38px;

  --shadow-1: 0 16px 50px rgba(6, 14, 35, 0.45);
  --shadow-2: 0 10px 32px rgba(15, 35, 75, 0.5);

  --glass: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.02)
  );
  --stroke: 1px solid rgba(255, 255, 255, 0.06);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 500 18px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, Arial;
  -webkit-font-smoothing: antialiased;
}
.wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(20px, 3.2vw, 40px);
}

.bg-auras {
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 120%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
      1300px 650px at 15% -10%,
      #1b2d5a55 0%,
      transparent 60%
    ),
    radial-gradient(1000px 560px at 90% 10%, #0c6abf44 0%, transparent 60%),
    radial-gradient(900px 480px at 50% 120%, #0aa7c844 0%, transparent 60%);
  animation: bgPulse 10s ease-in-out infinite;
  filter: saturate(1.05);
}

@keyframes bgPulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.01);
  }
}

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
  background: linear-gradient(
    180deg,
    rgba(10, 16, 34, 0.65),
    rgba(10, 16, 34, 0.25)
  );
  border-bottom: var(--stroke);
}

.nav {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 16px;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  background: var(--glass);
  border: var(--stroke);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  font-weight: 700;
}

.nav-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.nav-btn.is-active {
  background: linear-gradient(
    180deg,
    rgba(116, 173, 255, 0.22),
    rgba(116, 173, 255, 0.08)
  );
  border-color: rgba(118, 178, 255, 0.4);
}

.section {
  display: none;
}

.section.is-visible {
  display: block;
}

.panel {
  background: var(--glass);
  border: var(--stroke);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-1);
}

.hero {
  display: grid;
  place-items: center;
  padding: clamp(28px, 7vw, 30px) 0 0;
}

.hero-card {
  width: min(820px, 94vw);
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: var(--stroke);
  box-shadow: var(--shadow-1);
  padding: var(--space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: fadeIn 0.5s ease both;
  z-index: 10;
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(
      620px 260px at 20% -10%,
      rgba(102, 163, 255, 0.22),
      transparent 60%
    ),
    radial-gradient(
      520px 240px at 120% 20%,
      rgba(110, 231, 255, 0.18),
      transparent 60%
    );
  filter: blur(12px);
  z-index: -1;
}

.hero-title {
  margin: 0 0 7px 0;
  font-weight: 800;
  letter-spacing: 0.3px;
  font-size: clamp(28px, 3vw + 10px, 44px);
}

.hero-sub {
  margin: 0 0 var(--space-6) 0;
  color: var(--muted);
  font-size: 18px;
}

.auth-wrap {
  display: flex;
  justify-content: center;
}

#auth-btn {
  height: 56px;
  padding: 0 22px;
  border-radius: 14px;
  border: 1px solid rgba(88, 140, 255, 0.35);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  font-size: 18px;
  background: linear-gradient(90deg, #5865f2 0%, #3b82f6 100%);
  box-shadow: 0 14px 34px rgba(56, 107, 255, 0.35);
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#auth-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(56, 107, 255, 0.45);
  filter: saturate(1.1);
}

#auth-btn:active {
  transform: translateY(0) scale(0.98);
}

.brands {
  padding: clamp(28px, 6vw, 34px) 0 96px;
}

.section-title {
  font-size: clamp(20px, 1.4vw + 10px, 28px);
  margin: 0 0 var(--space-4) 0;
  color: var(--muted);
}

.brand-row {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  margin-block: var(--space-4);
}

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

.row-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 900px;
  margin-inline: auto;
}

@media (max-width: 1024px) {
  .row-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.brand-card {
  position: relative;
  display: block;
  isolation: isolate;
  border-radius: var(--radius);
  background: var(--panel);
  border: var(--stroke);
  overflow: hidden;
  aspect-ratio: 16/9;
  box-shadow: var(--shadow-2);
  transform: translateZ(0);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  animation: fadeIn 0.5s ease both;
}

.brand-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(116, 173, 255, 0.25) inset;
}

.brand-media {
  position: absolute;
  inset: 10%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: inherit;
}

.brand-card[data-shape="square"] .brand-media {
  border-radius: 10px;
}
.brand-card[data-shape="rounded"] .brand-media {
  border-radius: 18px;
}
.brand-card[data-shape="rounded-lg"] .brand-media {
  border-radius: 26px;
}
.brand-card[data-shape="pill"] .brand-media {
  border-radius: 999px;
}
.brand-card[data-shape="circle"] .brand-media {
  border-radius: 9999px;
}

.brand-card::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: inherit;
  background: radial-gradient(
      120% 120% at 30% 20%,
      rgba(116, 173, 255, 0.5),
      transparent 60%
    ),
    radial-gradient(
      120% 100% at 80% 80%,
      rgba(110, 231, 255, 0.38),
      transparent 60%
    );
  filter: blur(22px);
  opacity: 0.6;
  z-index: -1;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.brand-card:hover::before {
  opacity: 0.9;
  transform: scale(1.03);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rules {
  margin: 0.5rem 0 0;
  color: var(--muted);
}
.muted {
  color: var(--muted);
}

.pixel {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 9999;
  background: #66a3ff;
  --dx: 0px;
  --dy: 0px;
  --life: 700ms;
  --scale: 0.6;
  animation: pixelDrift var(--life) ease-out forwards;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
}

@keyframes pixelDrift {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
      scale(var(--scale));
  }
}

#glowGrid {
  position: fixed;
  inset: 0;
  z-index: -2;          
  pointer-events: none; 
  background: var(--bg);
  image-rendering: pixelated;
}

.tooltip-container {
  position: relative;
  display: inline-block;
}

.question-icon {
  background: rgba(88, 140, 255, 0.25);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
}

.tooltip-text {
  visibility: hidden;
  width: 280px;
  background-color: rgba(25, 25, 25, 0.95);
  color: #fff;
  text-align: left;
  border-radius: 10px;
  padding: 10px 14px;
  position: absolute;
  z-index: 1;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.25s;
  font-size: 14px;
  line-height: 1.3;
}

.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: rgba(25, 25, 25, 0.95) transparent transparent transparent;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}