:root{
  --bg:#0b1020;
  --bg-alt:#0f1630;
  --card:#101a3a;
  --text:#e8eeff;
  --muted:#a9b3d6;
  --brand:#d72631;
  --brand-2:#3b82f6;
  --ring:rgba(215,38,49,0.4);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  background: radial-gradient(1200px 600px at 10% -10%, #1a2557 0%, var(--bg) 60%);
  color:var(--text);
  line-height:1.5;
}

.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(0deg, rgba(11,16,32,0.0), rgba(11,16,32,0.7));
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.site-header .wrap{
  max-width:1100px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; gap:10px; align-items:center; color:var(--text); text-decoration:none; font-weight:700}
.brand .ball{
  width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:#111; font-weight:900; box-shadow:0 6px 20px rgba(0,0,0,0.25);
}
.ball-red{ background: radial-gradient(circle at 30% 30%, #ff8490, #d72631 60%, #8e0f17); color:#fff }
.nav a{color:var(--muted); text-decoration:none; margin-left:16px}
.nav a:hover{color:#fff}

.hero{ padding:32px 0 10px }
.wrap{ max-width:1100px; margin:0 auto; padding:0 16px }
.hero-inner{ display:grid; grid-template-columns: 1.2fr 1fr; gap:28px; align-items:center }
.hero-copy h1{ font-size:34px; margin:0 0 10px }
.hero-copy p{ color:var(--muted); margin:0 0 16px }

.draw-info{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px }
.draw-card{
  background: linear-gradient(180deg, var(--bg-alt), #0a1230);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px; padding:12px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.draw-label{ color:var(--muted); font-size:13px }
.draw-value, .countdown{ font-size:18px; font-weight:700; letter-spacing:0.3px }

.combos{ display:grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap:16px }
.combo-card{
  background: linear-gradient(180deg, var(--card), #0a1332);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px; padding:14px 14px 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.combo-card:hover{ transform: translateY(-2px); box-shadow: 0 16px 50px rgba(0,0,0,0.45) }
.combo-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:8px }
.combo-tag{
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; padding:0 10px; border-radius:999px; font-weight:700; font-size:12px;
  background:rgba(59,130,246,0.2); color:#dbe8ff; border:1px solid rgba(59,130,246,0.35);
}
.actions{ display:flex; gap:8px; align-items:center }
.btn-link{
  background:transparent; color:#a8c8ff; border:1px solid rgba(168,200,255,0.35);
  border-radius:999px; font-size:12px; padding:6px 10px; text-decoration:none;
}
.btn-link:hover{ border-color:#fff; color:#fff }
.btn-copy{
  background:transparent; color:#cfe1ff; border:1px solid rgba(207,225,255,0.35);
  border-radius:999px; font-size:12px; padding:6px 10px; cursor:pointer;
}
.btn-copy:hover{ border-color:#fff; color:#fff }

.balls{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 10px }
.ball{
  width:42px; height:42px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:#111; font-weight:900;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.combo-foot{ color:var(--muted); font-size:13px }
.combo-foot .share-link{ color:#8fb1ff; text-decoration:none }
.combo-foot .share-link:hover{ color:#cfe1ff; text-decoration:underline }

.ball-red{
  background: radial-gradient(circle at 30% 30%, #ff8490, #d72631 60%, #8e0f17);
  color:#fff; font-weight:900;
}

.about{ padding:40px 0 }
.about h2{ margin:0 0 12px }
.list-check{ padding-left:18px; color:var(--muted) }
.list-check li{ margin:6px 0 }

.faq{ padding:30px 0 60px }
.faq h2{ margin:0 0 16px }
.faq .faq-box{
  background: linear-gradient(180deg, var(--card), #0a1332);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px; padding:16px 18px; margin:14px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.faq .faq-box h3{ margin:0 0 8px; color:#fff }
.faq .faq-box p{ margin:0; color:var(--muted) }

.site-footer{
  border-top:1px solid rgba(255,255,255,0.08);
  padding:18px 0 28px; color:var(--muted);
  background: linear-gradient(180deg, rgba(10,16,36,0.2), rgba(10,16,36,0.5));
}

/* TikTok rails */
.tiktok-rail{
  position:fixed; top:0; bottom:0; width:260px; overflow:hidden; z-index:0;
  background: linear-gradient(180deg, rgba(16,22,48,0.7), rgba(16,22,48,0.4));
  border-right:1px solid rgba(255,255,255,0.06);
}
.tiktok-rail.right{ right:0; left:auto; border-right:none; border-left:1px solid rgba(255,255,255,0.06) }
.tiktok-rail iframe{ display:block; width:240px; height:425px; margin:10px auto; border:0; }

.hero, .about, .faq, .site-footer, .site-header{ position:relative; z-index:1 }

/* Responsive */
@media (max-width: 1100px){
  .tiktok-rail{ display:none }
  .hero-inner{ grid-template-columns: 1fr }
  .combos{ grid-template-columns: repeat(1, minmax(260px, 1fr)); }
}