/* ===============================
   Aurora Play — gami1000.xyz
   Fresh, colorful UI with glass cards and neon accents
   =============================== */
:root{
  --bg-1:#0e0f1a;
  --bg-2:#121a2b;
  --bg-3:#0f1424;
  --accent-1:#7c3aed;   /* violet */
  --accent-2:#22d3ee;   /* cyan */
  --accent-3:#f97316;   /* orange */
  --ink:#e6eefb;
  --muted:#aab7d4;
  --card:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.06);
  --border:1px solid rgba(255,255,255,.12);
  --radius:20px;
  --maxw:1200px;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 10% -10%, rgba(124,58,237,.30), transparent 60%),
    radial-gradient(800px 600px at 110% 10%, rgba(34,211,238,.22), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2) 40%, var(--bg-3));
  background-attachment: fixed;
}

/* ===== utility ===== */
.container{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.grid-2{display:grid; grid-template-columns:1.2fr .8fr; gap:28px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.center{text-align:center}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  background:linear-gradient(135deg, rgba(124,58,237,.25), rgba(34,211,238,.25)); border:var(--border)}

.card{background:var(--card); border:var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px}
.card.soft{background:var(--glass)}
.divider{height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent); margin:18px 0}
.small{font-size:14px; color:var(--muted)}
a{color:#9fd9ff}

/* ===== top bar (marquee) ===== */
.topbar{
  position:sticky; top:0; z-index:70;
  background:linear-gradient(90deg, rgba(249,115,22,.35), rgba(124,58,237,.35), rgba(34,211,238,.35));
  border-bottom:var(--border); backdrop-filter: blur(8px) saturate(140%);
}
.ticker{white-space:nowrap; overflow:hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)}
.ticker span{display:inline-block; padding:10px 22px; animation: slide 18s linear infinite}
@keyframes slide{from{transform: translateX(0)} to{transform: translateX(-50%)}}

/* ===== header ===== */
.header{position:sticky; top:38px; z-index:60; backdrop-filter: blur(12px) saturate(150%);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-bottom:var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
.brand .logo{width:42px; height:42px; border-radius:12px; background:
  conic-gradient(from 180deg at 50% 50%, var(--accent-2), var(--accent-1), var(--accent-3), var(--accent-2));
  box-shadow: 0 10px 30px rgba(34,211,238,.35);}
.brand .name{font-weight:900; letter-spacing:.4px}
.menu{display:flex; gap:12px; flex-wrap:wrap}
.menu a{padding:10px 12px; border-radius:12px; text-decoration:none; color:var(--ink); opacity:.9}
.menu a:hover{background:rgba(255,255,255,.06); opacity:1}
.cta{background:linear-gradient(135deg, var(--accent-2), var(--accent-1)); color:#0c1021; font-weight:800}

/* ===== hero ===== */
.hero{padding:80px 0 24px}
.hero h1{font-size: clamp(40px, 6vw, 64px); line-height:1.05; margin:0 0 10px}
.hero p{color:var(--muted); font-size: clamp(16px,2.2vw,20px)}
.pills{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 26px}
.pill{padding:8px 12px; border-radius:999px; border:var(--border); background:rgba(255,255,255,.04); font-size:13px; color:#dfe7ff}
.hero-aside .kpi{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.kpi .card h3{margin:0; font-size:28px}
.kpi .card p{margin:6px 0 0; color:var(--muted)}

/* ===== showcase ===== */
.showcase{margin:34px 0 0}
.tile{height:140px; border-radius:16px; background:linear-gradient(135deg, rgba(124,58,237,.25), rgba(34,211,238,.18)); border:var(--border); display:flex; align-items:center; justify-content:center}
.tile span{opacity:.9}

/* ===== pricing ===== */
.pricing{margin-top:12px}
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.tier{position:relative; overflow:hidden}
.tier .top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.tier h3{margin:0}
.tier .ribbon{font-size:12px; padding:6px 10px; border-radius:999px; border:var(--border); background:rgba(249,115,22,.15)}
.pricebox{display:flex; align-items:baseline; gap:10px; margin:6px 0 10px}
.price-old{text-decoration: line-through; color:#c7cfe7; opacity:.7}
.price-new{font-size:32px; font-weight:900; background:linear-gradient(90deg, #22d3ee, #7c3aed); -webkit-background-clip:text; background-clip:text; color:transparent}
.discount{font-weight:800; font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(34,211,238,.2); border:var(--border)}

ul.benefits{list-style:none; margin:14px 0 0; padding:0}
ul.benefits li{display:flex; gap:10px; align-items:flex-start; margin:8px 0}
ul.benefits .dot{width:8px; height:8px; border-radius:50%; background:linear-gradient(90deg,#22d3ee,#7c3aed); margin-top:6px}
.btn{display:inline-block; padding:12px 16px; border-radius:14px; border:var(--border); text-decoration:none; font-weight:800; color:#0c1021;
  background:linear-gradient(135deg, var(--accent-2), var(--accent-1)); box-shadow:0 10px 30px rgba(124,58,237,.28);}
.btn.ghost{background:transparent; color:var(--ink)}

/* ===== sections ===== */
section{padding:70px 0}
section h2{font-size: clamp(28px, 4.8vw, 44px); margin:0 0 8px}
.lead{color:var(--muted); width: 100%; text-align: center;}

/* ===== juniors ===== */
.juniors{background:linear-gradient(180deg, rgba(34,211,238,.08), rgba(124,58,237,.08)); border-top:var(--border); border-bottom:var(--border)}
.badgelist{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.badgelist .badge{background:rgba(255,255,255,.06)}

/* ===== faq ===== */
details{background:var(--glass); border:var(--border); border-radius:16px; padding:16px 18px; margin:10px 0}
summary{cursor:pointer; list-style:none; font-weight:800}

/* ===== footer ===== */
.footer{padding:40px 0 80px; border-top:var(--border); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02))}
.footgrid{display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:26px}
.footgrid a{color:#dfe7ff; text-decoration:none; opacity:.9}
.copy{color:var(--muted); font-size:13px; margin-top:10px}

/* ===== responsive ===== */
@media (max-width: 980px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .tiers{grid-template-columns:1fr}
  .header{top:34px}
}
@media (max-width:560px){
  .menu{display:none}
}