:root{
  --bg:#07070b;
  --panel:#0e0f13;
  --panel2:#0b0c10;

  /* === BRAND (kolor z logo Sponti) === */
  --brand:#7c4dff;        /* <- ZMIEN NA SWÓJ KOLOR */
  --brand2:#00ff9a;       /* pomocniczy */

  /* === LIVE (czerwony vibe) === */
  --live1:#ff2d55;
  --live2:#ff7a00;

  --text:#f2f2f7;
  --muted:#a2a2b2;

  --shadow: 0 18px 60px rgba(0,0,0,.65);
  --glowBrand: 0 0 24px rgba(124,77,255,.25);
  --glowLive: 0 0 26px rgba(255,45,85,.22);

  --line: rgba(255,255,255,.08);
  --soft: rgba(255,255,255,.04);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

.noScrollbars{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.noScrollbars::-webkit-scrollbar{ width:0; height:0; }

.muted{ color: var(--muted); }
.tiny{ font-size:12px; margin-top:8px; }

h2{ margin:0; font-size:20px; }

.row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

/* BACKGROUND FX */
.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.blob{
  position:absolute;
  width:520px;
  height:520px;
  border-radius:999px;
  filter: blur(48px);
  opacity:.14;
  background: var(--brand2);
  animation: float 10s ease-in-out infinite;
}
.b1{ left:-120px; top:-160px; animation-delay:0s; }
.b2{ right:-180px; top:40px; width:640px; height:640px; opacity:.12; animation-delay:1.5s; background: var(--brand); }
.b3{ left:25%; bottom:-260px; width:760px; height:760px; opacity:.10; animation-delay:3s; }
@keyframes float{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(40px,30px) scale(1.06); }
}
#particles{ width:100%; height:100%; display:block; }

/* OVERLAYS */
.overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(10px);
  z-index:100;
}
.hidden{ display:none !important; }

/* AGE GATE */
.gate{
  width:min(520px, 92vw);
  background: linear-gradient(180deg, rgba(14,15,19,.96), rgba(11,12,16,.96));
  border:1px solid var(--line);
  border-radius:20px;
  padding:26px;
  box-shadow: var(--shadow);
  text-align:center;
  transform: translateY(8px);
  animation: pop .35s ease forwards;
}
.gate-logo{
  height:46px;
  margin-bottom:10px;
  filter: drop-shadow(0 0 18px rgba(255,255,255,.08)) drop-shadow(0 0 18px rgba(124,77,255,.25));
}
@keyframes pop{ to{ transform:none; } }

/* BUTTONS */
.btn{
  cursor:pointer;
  border:none;
  padding:12px 16px;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: var(--text);
  transition: transform .12s ease, filter .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:hover{
  filter:brightness(1.06);
  border-color: color-mix(in srgb, var(--brand) 38%, rgba(255,255,255,.10) 62%);
}
.btn:active{ transform: translateY(1px); }

.btn.primary{
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 50%, rgba(0,0,0,0) 50%));
  color:#071014;
  font-weight: 900;
  border-color: color-mix(in srgb, var(--brand) 55%, rgba(255,255,255,.10) 45%);
  box-shadow: var(--glowBrand);
}
.btn.ghost{ background: transparent; }
.btn.live{
  background: linear-gradient(135deg, var(--live1), var(--live2));
  color:#12040a;
  font-weight: 1000;
  border-color: rgba(255,255,255,.12);
  box-shadow: var(--glowLive);
}
.btn.small{
  padding:8px 12px;
  border-radius:12px;
  font-size: 13px;
}