: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: 36px;

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

  --glass: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  --stroke: 1px solid rgba(255,255,255,.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,.65), rgba(10,16,34,.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,.06);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  font-weight: 700;
}

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

  .nav-btn.is-active {
  background: linear-gradient(180deg, rgba(116,173,255,.22), rgba(116,173,255,.08));
  border-color: rgba(118,178,255,.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, 96px) 0 0; 
}

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

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

.hero-title {
  margin:0 0 8px 0; font-weight:800; letter-spacing:.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,.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,.35);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}

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

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

.brands { 
  padding: clamp(28px, 6vw, 64px) 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: 1000px;
  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 .15s ease, box-shadow .2s ease, border-color .2s ease;
  animation: fadeIn .5s ease both;
}

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

.brand-media {
  position:absolute; inset:10%;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.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,.50), transparent 60%),
              radial-gradient(120% 100% at 80% 80%, rgba(110,231,255,.38), transparent 60%);
  filter: blur(22px);
  opacity: .6;
  z-index:-1;
  transition: opacity .25s ease, transform .25s ease;
}

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


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

.rules{ margin: .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: .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)); }
}