:root{
  --bg:#0A0A0A; --card:#121212; --muted:#1a1a1a;
  --text:#eaeaea; --sub:#a8a8a8; --primary:#F4C109; --accent:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif}
a{color:var(--primary);text-decoration:none}
.container{max-width:1240px;margin:0 auto;padding:0 18px}

/* Header / Mega Menu */
.sticky{position:sticky;top:0;z-index:60}
.site-header{background:#000;border-bottom:1px solid #131313;backdrop-filter:saturate(140%) blur(4px)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand img{height:42px;width:auto}
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap}
.primary-nav li{position:relative}
.primary-nav a{color:#eaeaea;opacity:.95;padding:10px 10px;border-radius:10px;transition:all .2s ease}
.primary-nav a:hover{background:#111;opacity:1;transform:translateY(-1px)}
.primary-nav .sub-menu{display:none;position:absolute;left:0;top:100%;min-width:280px;background:#0d0d0d;border:1px solid #1b1b1b;border-radius:12px;padding:12px;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.primary-nav li:hover > .sub-menu{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:10px}
.primary-nav .sub-menu li a{background:transparent;border-radius:8px}
.cta{background:linear-gradient(135deg,var(--primary),#ffd84d);color:#111;padding:10px 16px;border:none;border-radius:12px;font-weight:800;text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.35)}

/* Slider */
.slider{position:relative;overflow:hidden;border-bottom:1px solid #111}
.slider-track{display:flex;transition:transform .5s ease}
.slide{min-width:100%;display:grid;place-items:center;background:radial-gradient(1200px 400px at 50% -20%, rgba(244,193,9,.18), transparent), linear-gradient(180deg,#0c0c0c 0%, #070707 100%);height:380px}
.slide .inner{max-width:980px;padding:24px}
.slide h2{margin:0 0 8px;font-size:34px;color:#fff}
.slide p{margin:0 0 12px;color:#cfcfcf}
.slider-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;gap:6px;justify-content:center}
.slider-dots button{width:10px;height:10px;border-radius:50%;border:none;background:#444}
.slider-dots button.active{background:var(--primary)}

/* Sections / Cards */
.grid{display:grid;gap:20px}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{background:var(--card);border:1px solid #191919;border-radius:18px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.35);transition:transform .2s ease, box-shadow .2s ease;opacity:0;transform:translateY(10px)}
.card.reveal{opacity:1;transform:none;transition:opacity .5s ease, transform .5s ease}
.card .thumb{height:150px;background:#000}
.card .content{padding:16px}
.badge{display:inline-block;background:#000;color:#fff;padding:4px 10px;border-radius:999px;font-size:12px;border:1px solid #222}
.badge.yellow{background:var(--primary);color:#111;font-weight:800;border:none}
.meta{font-size:13px;color:#9a9a9a}
.btn{display:inline-block;padding:10px 12px;border-radius:12px;font-weight:800;text-decoration:none}
.btn.primary{background:var(--primary);color:#111}
.btn.outline{border:2px solid var(--primary);color:var(--primary);background:#000}

/* Bonus Table */
.table-wrap{overflow:auto;border:1px solid #1b1b1b;border-radius:12px}
table.compare{width:100%;border-collapse:separate;border-spacing:0}
.compare th,.compare td{padding:12px;border-bottom:1px solid #1b1b1b;text-align:left}
.compare thead th{position:sticky;top:0;background:#0d0d0d}
.compare tr:hover{background:#0d0d0d}

/* Footer */
.section{padding:38px 0}
.section.dark{background:#060606;border-top:1px solid #111;border-bottom:1px solid #111}
.section.dark h2{color:var(--primary)}
.site-footer{background:#000;color:#bdbdbd;padding:28px 0;margin-top:30px;font-size:14px;border-top:1px solid #111}
.site-footer a{color:#eaeaea}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.footer-credit{margin-top:12px;text-align:center;font-size:12px;color:#888}
.breadcrumbs{font-size:13px;margin:10px 0;color:#777}
.adslot{margin:12px 0;text-align:center}
details{background:#101010;border:1px solid #1c1c1c;border-radius:12px;margin:8px 0;padding:10px}
details summary{font-weight:700;cursor:pointer}
.responsive-img{max-width:100%;height:auto}

/* Sticky Mobile CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:8px;display:none;justify-content:center;z-index:70}
.sticky-cta .btn{padding:12px 18px}
@media(max-width:768px){ .sticky-cta{display:flex} }