/* ============================================================
   LEONIDA CENTRAL — shared design system
   Unofficial GTA 6 fan hub · Vice City neon theme
   ============================================================ */
:root{
  --bg:#0a0613;
  --bg-2:#120a22;
  --panel:#170d2b;
  --panel-2:#1d1236;
  --ink:#f4eefb;
  --muted:#a99cc4;
  --pink:#ff2d95;
  --cyan:#19e3ff;
  --purple:#8a3ffc;
  --gold:#ffcb45;
  --green:#2fe6a8;
  --line:rgba(255,255,255,.08);
  --radius:16px;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --maxw:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(138,63,252,.25), transparent 60%),
    radial-gradient(800px 500px at 0% 10%, rgba(255,45,149,.18), transparent 55%),
    var(--bg);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.neon{background:linear-gradient(90deg,var(--pink),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.pill{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted)}
.center{text-align:center}

/* ---------- NAV ---------- */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(10,6,19,.72);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:18px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;letter-spacing:.02em}
.logo .dot{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--cyan),var(--pink));box-shadow:0 0 14px var(--pink)}
nav.links{margin-left:auto;display:flex;gap:22px;font-size:.92rem}
nav.links a{color:var(--muted);transition:color .2s}
nav.links a:hover,nav.links a.active{color:var(--ink)}
.nav-cta{padding:9px 16px;border-radius:10px;font-weight:700;font-size:.88rem;background:linear-gradient(90deg,var(--pink),var(--purple));color:#fff;box-shadow:0 6px 20px rgba(255,45,149,.35)}
.nav-cta:hover{filter:brightness(1.08)}
@media(max-width:860px){nav.links{display:none}}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block;padding:14px 26px;border-radius:12px;font-weight:800;font-size:1rem;cursor:pointer;border:0;transition:transform .15s,box-shadow .15s,filter .15s;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(90deg,var(--pink),var(--purple));color:#fff;box-shadow:0 10px 30px rgba(138,63,252,.45)}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--ink);border:1px solid var(--line)}
.btn-cyan{background:linear-gradient(90deg,var(--cyan),#1aa6ff);color:#06222b;box-shadow:0 10px 30px rgba(25,227,255,.3)}

/* ---------- HERO ---------- */
.hero{padding:70px 0 40px;text-align:center}
.hero h1{font-size:clamp(2.2rem,6vw,4rem);line-height:1.05;margin:14px 0 10px;font-weight:900;letter-spacing:-.02em}
.hero p.sub{color:var(--muted);font-size:1.1rem;max-width:660px;margin:0 auto 26px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}

/* page hero (interior pages) */
.page-hero{padding:46px 0 8px}
.page-hero h1{font-size:clamp(1.9rem,4.5vw,2.9rem);font-weight:900;letter-spacing:-.01em;margin:10px 0 8px;line-height:1.1}
.page-hero p.lede{color:var(--muted);font-size:1.12rem;max-width:720px}
.breadcrumb{font-size:.82rem;color:var(--muted)}
.breadcrumb a{color:var(--cyan)}

/* ---------- COUNTDOWN ---------- */
.countdown{display:flex;justify-content:center;gap:14px;margin:30px 0 22px;flex-wrap:wrap}
.cd-box{min-width:96px;padding:18px 14px;border-radius:var(--radius);background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);box-shadow:var(--shadow)}
.cd-num{font-size:2.4rem;font-weight:900;line-height:1;background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.cd-label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.countdown.mini .cd-box{min-width:74px;padding:12px 10px}
.countdown.mini .cd-num{font-size:1.7rem}

/* ---------- AD SLOTS ---------- */
.ad-slot{max-width:970px;margin:34px auto;min-height:110px;border-radius:14px;border:1px dashed rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;background:repeating-linear-gradient(45deg,rgba(255,255,255,.02),rgba(255,255,255,.02) 12px,transparent 12px,transparent 24px);text-align:center;padding:10px}

/* ---------- SECTIONS / CARDS ---------- */
section{padding:42px 0}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.sec-head h2{font-size:1.7rem;margin:8px 0 0;font-weight:800}
.sec-head p{color:var(--muted);margin:0;max-width:520px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:transform .18s,border-color .18s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-4px);border-color:rgba(255,45,149,.4)}
.card .tag{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.card h3{margin:10px 0 8px;font-size:1.15rem}
.card p{color:var(--muted);font-size:.92rem;margin:0}
.card .arrow{margin-top:14px;color:var(--pink);font-weight:700;font-size:.9rem}
.badge-pro{position:absolute;top:14px;right:14px;background:linear-gradient(90deg,var(--gold),#ff9a3c);color:#1a1206;font-weight:800;font-size:.66rem;letter-spacing:.1em;padding:4px 9px;border-radius:999px}

/* ---------- ARTICLE / CONTENT ---------- */
.content{max-width:780px;margin:0 auto}
.content h2{font-size:1.55rem;margin:34px 0 12px;font-weight:800}
.content h3{font-size:1.2rem;margin:24px 0 8px;font-weight:700;color:#efe7fb}
.content p{color:#d8cfe9;margin:0 0 14px}
.content ul,.content ol{color:#d8cfe9;padding-left:22px;margin:0 0 16px}
.content li{margin:6px 0}
.content a.inline{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
.content strong{color:#fff}
.callout{background:linear-gradient(120deg,rgba(255,45,149,.12),rgba(138,63,252,.12));border:1px solid var(--line);border-left:3px solid var(--pink);border-radius:12px;padding:16px 18px;margin:18px 0;color:#e9e1f6;font-size:.96rem}
.callout.cyan{border-left-color:var(--cyan);background:linear-gradient(120deg,rgba(25,227,255,.12),rgba(138,63,252,.10))}
.callout.gold{border-left-color:var(--gold);background:linear-gradient(120deg,rgba(255,203,69,.12),rgba(255,154,60,.08))}
.confirmed{color:var(--green);font-weight:700}
.rumor{color:var(--gold);font-weight:700}

/* ---------- TABLE ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;margin:18px 0}
table{border-collapse:collapse;width:100%;font-size:.94rem;min-width:480px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
thead th{background:#241544;color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
tbody tr:nth-child(even){background:rgba(255,255,255,.02)}

/* ---------- REGION MAP ---------- */
.map-stage{position:relative;border-radius:20px;border:1px solid var(--line);overflow:hidden;background:radial-gradient(600px 300px at 70% 20%,rgba(25,227,255,.12),transparent 60%),radial-gradient(500px 300px at 20% 80%,rgba(255,45,149,.14),transparent 60%),linear-gradient(160deg,#140b27,#0c0820)}
.map-svg{display:block;width:100%;height:auto}
.region-hot{cursor:pointer;transition:opacity .2s, filter .2s}
.region-hot:hover{filter:brightness(1.25)}
.region-label{font:700 13px "Segoe UI",sans-serif;fill:#fff;pointer-events:none;paint-order:stroke;stroke:rgba(0,0,0,.55);stroke-width:3px}
.map-info{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:16px;padding:22px;min-height:140px}
.map-info h3{margin:0 0 6px;font-size:1.25rem}
.map-info .reg-tag{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.map-info p{color:var(--muted);margin:8px 0 0}

/* ---------- PRICING ---------- */
.price-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.price-wrap{grid-template-columns:1fr}}
.price{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center}
.price.pop{border-color:var(--pink);box-shadow:0 0 0 1px rgba(255,45,149,.4),0 20px 50px rgba(255,45,149,.18)}
.price .amt{font-size:2.2rem;font-weight:900;margin:10px 0}
.price ul{list-style:none;padding:0;margin:16px 0;color:var(--muted);font-size:.92rem;text-align:left}
.price li{padding:7px 0;border-bottom:1px solid var(--line)}
.price li::before{content:"✦ ";color:var(--cyan)}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--line);border-radius:12px;padding:4px 18px;margin:10px 0;background:rgba(255,255,255,.02)}
.faq summary{cursor:pointer;padding:12px 0;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--pink);font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);margin:0 0 14px}

/* ---------- NEWSLETTER ---------- */
.news{background:linear-gradient(120deg,rgba(255,45,149,.16),rgba(138,63,252,.16));border:1px solid var(--line);border-radius:22px;padding:40px;text-align:center}
.news form{display:flex;gap:10px;max-width:460px;margin:20px auto 8px;flex-wrap:wrap}
.news input{flex:1;min-width:200px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.3);color:var(--ink);font-size:1rem}
.news small{color:var(--muted)}

/* ---------- FEATURE / CHIPS ---------- */
.feature{background:radial-gradient(600px 200px at 100% 0%,rgba(25,227,255,.16),transparent 60%),linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid rgba(25,227,255,.25);border-radius:20px;padding:30px}
.chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.chip{padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-weight:700;font-size:.9rem}
.chip:hover{border-color:var(--cyan)}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line);margin-top:40px;padding:40px 0;color:var(--muted);font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
@media(max-width:720px){.foot-grid{grid-template-columns:1fr}}
footer a{color:var(--muted)}
footer a:hover{color:var(--ink)}
.disclaimer{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:.82rem;color:#7d7298}
