/* ==========================
   Design tokens
========================== */
:root{
  color-scheme: light;
  --bg: #0b1220;
  --bg-2: #0e162b;
  --grid: rgba(148,163,184,.10);
  --noise: rgba(255,255,255,.02);

  --text: #0f172a;
  --text-on-dark: rgba(255,255,255,.92);
  --muted-on-dark: rgba(255,255,255,.65);

  --brand-1: #38bdf8;
  --brand-2: #6366f1;
  --brand-3: #22d3ee;

  --surface: rgba(255,255,255,.94);
  --border: rgba(2,132,199,.22);

  --ring: rgba(56,189,248,.45);
  --ring-err: rgba(248,113,113,.45);

  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;

  --shadow-1: 0 2px 6px rgba(2,6,23,.12), 0 12px 30px rgba(2,6,23,.18);
  --shadow-2: 0 8px 20px rgba(2,6,23,.20), 0 20px 45px rgba(2,6,23,.28);

  --input-bg: #fff;
  --input-br: #cbd5e1;
  --input-ph: #94a3b8;
}

/* ==========================
   Layout & background
========================== */
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(56,189,248,.18), rgba(56,189,248,0) 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 40%, var(--bg) 100%);
  overflow-x:hidden;
}

/* subtle grid */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background:
    linear-gradient(0deg, transparent 24%, var(--grid) 25%, var(--grid) 26%, transparent 27%, transparent 74%, var(--grid) 75%, var(--grid) 76%, transparent 77%),
    linear-gradient(90deg, transparent 24%, var(--grid) 25%, var(--grid) 26%, transparent 27%, transparent 74%, var(--grid) 75%, var(--grid) 76%, transparent 77%);
  background-size: 40px 40px;
  mask-image: radial-gradient(70% 70% at 50% 10%, #000 60%, transparent 100%);
  opacity:.5;
}

/* tiny noise */
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 15% 20%, var(--noise) 99%, transparent 100%),
    radial-gradient(1px 1px at 65% 35%, var(--noise) 99%, transparent 100%),
    radial-gradient(1px 1px at 35% 75%, var(--noise) 99%, transparent 100%),
    radial-gradient(1px 1px at 85% 65%, var(--noise) 99%, transparent 100%);
}

/* hero glow */
@media (prefers-reduced-motion: no-preference){
  .hero-glow::before{
    content:""; position:absolute; inset:-20% -10% auto -10%; height:60vh;
    background: radial-gradient(closest-side, rgba(56,189,248,.22), rgba(56,189,248,0));
    transform: translateY(-10%); filter: blur(42px); pointer-events:none;
    animation: floaty 14s ease-in-out infinite alternate;
  }
  @keyframes floaty{ from{ transform:translateY(-8%) } to{ transform:translateY(-12%) } }
}

/* header & nav */
header a{ color: var(--text-on-dark) }
header .text-white\/40{ color: rgba(255,255,255,.45) }
header nav a{
  color: rgba(255,255,255,.78);
  transition: color .2s ease, text-shadow .3s ease;
}
header nav a:hover{
  color: #fff;
  text-shadow: 0 0 18px rgba(56,189,248,.35);
}

/* cards */
.card{
  background: linear-gradient(180deg, var(--surface) 0%, rgba(255,255,255,.98) 100%);
  backdrop-filter: saturate(140%) blur(6px);
  border-radius: var(--radius-2xl);
}
.card-border{
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  position: relative;
}
.card-border::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(2,6,23,.06);
}

/* hero image shadow */
.card img[alt*="pack"]{
  filter: drop-shadow(0 12px 26px rgba(2,6,23,.25));
  border-radius: 1rem;
}

/* dark text helpers */
main .text-white{ color: var(--text-on-dark) }
main .text-white\/80{ color: var(--muted-on-dark) }
main .text-white\/70{ color: rgba(255,255,255,.62) }
main .text-sky-300{ color: #7dd3fc }

/* headings tweak */
h1,h2,h3{ letter-spacing:-0.01em }
h1{ line-height:1.1 }
h2{ line-height:1.15 }

/* inputs */
input[type="text"],
input[type="email"],
input:not([type]),
select, textarea{
  appearance: none;
  background: var(--input-bg);
  border: 1px solid var(--input-br);
  border-radius: var(--radius-xl);
  padding: .85rem 1rem;
  font: 500 15px/1.2 Inter, system-ui, sans-serif;
  color: #0f172a;
  transition: border-color .15s ease, box-shadow .15s ease, transform .02s ease;
}
input::placeholder{ color: var(--input-ph) }
input:focus{
  outline: none;
  border-color: var(--brand-1);
  box-shadow: 0 0 0 4px var(--ring);
}
input[aria-invalid="true"]{
  border-color:#f87171;
  box-shadow: 0 0 0 4px var(--ring-err);
}

/* errors */
.text-red-600{ color:#dc2626 }

/* CTA */
#ctaBtn{
  --g1: var(--brand-1);
  --g2: #0891b2;
  position: relative;
  border: none;
  border-radius: var(--radius-xl);
  padding: .95rem 1.25rem;
  font-weight: 800;
  letter-spacing:.01em;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)) border-box,
    linear-gradient(90deg, var(--g1), var(--g2)) padding-box;
  box-shadow: 0 6px 14px rgba(2,6,23,.18), 0 20px 44px rgba(14,165,233,.25);
  transform: translateZ(0);
  transition: transform .05s ease, box-shadow .2s ease, filter .2s ease;
}
#ctaBtn:hover{
  filter: saturate(115%);
  box-shadow: 0 8px 18px rgba(2,6,23,.22), 0 26px 60px rgba(14,165,233,.32);
}
#ctaBtn:active{ transform: translateY(1px) }
#ctaBtn:focus-visible{ outline: 3px solid var(--ring); outline-offset: 2px }

/* shine */
@media (hover:hover){
  #ctaBtn::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:
      linear-gradient(120deg, transparent 20%, rgba(255,255,255,.35) 40%, transparent 60%) no-repeat;
    background-size: 200% 100%;
    transform: translateZ(0);
    transition: background-position .8s ease;
  }
  #ctaBtn:hover::after{ background-position: 120% 0 }
}

/* brand logo */
.brand-logo{
  height: 28px; width: auto; display:inline-block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}
@media (min-width: 768px){ .brand-logo{ height: 30px } }

/* segmented control (platform) */
.segmented{
  display:grid; gap:.5rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 480px){ .segmented{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.segm{ position:relative; }
.segm input{
  position:absolute; inset:0; opacity:0; pointer-events:none;
}
.segm span{
  display:block; text-align:center;
  background:#fff; color:#0f172a;
  border:1px solid var(--input-br);
  border-radius: 12px;
  padding:.65rem .75rem; font-weight:600;
  transition: border-color .15s ease, box-shadow .15s ease, transform .02s ease, background .15s ease;
}
.segm:hover span{ border-color: var(--brand-1); }
.segm input:focus-visible + span{ box-shadow: 0 0 0 4px var(--ring); }
.segm input:checked + span{
  background: linear-gradient(180deg, #ecfeff 0%, #e0f2fe 100%);
  border-color: var(--brand-1);
  box-shadow: 0 0 0 4px var(--ring);
}

/* modals */
#shareModal .bg-white,
#winnersModal .bg-white,
#rulesModal  .bg-white{
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2);
}

/* ring decor */
.grad-ring{
  padding:1px; border-radius: var(--radius-2xl);
  background:
    radial-gradient(120% 120% at 10% 10%, rgba(56,189,248,.22), rgba(99,102,241,.18) 40%, rgba(255,255,255,0) 60%);
}

/* lines & dots in timeline */
.vline{ position:relative }
.vline::before{
  content:""; position:absolute; left:.875rem; top:.5rem; bottom:-.75rem; width:2px;
  background: rgba(2,6,23,.08)
}
.dot{ position:relative }
.dot::before{
  content:""; position:absolute; left:.5rem; top:.2rem; width:.75rem; height:.75rem;
  background: var(--brand-1); border:2px solid #e0f2fe; border-radius:9999px
}

/* helpers */
a.underline{ text-underline-offset: 3px }
.js-hidden{ display:none }