/* ============================================
   acebet-bd.com Design System
   Visual Style: Modern Dark Gaming
   Primary: #22c55e  Accent: #67e8f9  Gold: #facc15
   ============================================ */
:root {
  --bg: #0b1120;
  --bg2: #111827;
  --bg3: #1a2235;
  --green: #22c55e;
  --green-dark: #16a34a;
  --cyan: #67e8f9;
  --gold: #facc15;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --card-border: #1e2d45;
  --red: #ef4444;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 4px 24px rgba(0,0,0,.25);
  --shadow-hover: 0 8px 32px rgba(0,0,0,.35);
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Noto Sans Bengali", sans-serif;
  --max-w: 1180px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; width: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 1rem; line-height: 1.75; }
a { color: var(--cyan); text-decoration: none; transition: color .2s; }
a:hover { color: var(--green); }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }
.alt-bg { background: var(--bg2); }
.mt-2 { margin-top: 1.5rem; }

/* ============================================ HEADER */
.site-header { position: sticky; top: 0; z-index: 1000; background: var(--bg); border-bottom: 1px solid var(--card-border); backdrop-filter: blur(12px); }
.header-inner { max-width: var(--max-w); margin: 0 auto; min-height: 72px; padding: 0 20px; display: grid; grid-template-columns: 140px minmax(0,1fr) auto; align-items: center; gap: 12px; }
.brand-wrap { width: 140px; min-width: 140px; max-width: 140px; height: 56px; display: flex; align-items: center; overflow: hidden; }
.brand-logo { display: block; width: 140px; max-width: 100%; height: auto; max-height: 56px; object-fit: contain; }
.primary-nav { min-width: 0; display: flex; align-items: center; justify-content: center; gap: clamp(4px,0.8vw,14px); overflow: visible; flex-wrap: nowrap; }
.primary-nav a { white-space: nowrap; flex: 0 0 auto; line-height: 1; padding: 10px clamp(2px, 0.4vw, 6px); color: var(--text); font-weight: 500; font-size: clamp(.78rem, 0.78vw + 0.3rem, .88rem); transition: color .2s; text-decoration: none; }
.primary-nav a:hover, .primary-nav a.active { color: var(--green); }
.header-actions { flex-shrink: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; }

/* ============================================ BUTTONS */
.btn { min-height: 42px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border: none; border-radius: 8px; font-weight: 700; font-size: .95rem; cursor: pointer; transition: all .2s; text-decoration: none; line-height: 1; }
.btn-register { background: var(--green); color: #0b1120; }
.btn-register:hover { background: var(--green-dark); color: #fff; transform: translateY(-1px); }
.btn-login { background: transparent; border: 2px solid var(--cyan); color: var(--cyan); }
.btn-login:hover { background: var(--cyan); color: #0b1120; }
.btn-primary { background: var(--green); color: #0b1120; }
.btn-primary:hover { background: var(--green-dark); color: #fff; }
.btn-secondary { background: transparent; border: 2px solid var(--cyan); color: var(--cyan); }
.btn-secondary:hover { background: var(--cyan); color: #0b1120; }
.btn-full { width: 100%; justify-content: center; min-height: 48px; font-size: 1.05rem; }
.nav-toggle { display: none; width: 44px; height: 44px; border: none; background: none; cursor: pointer; position: relative; }
.hamburger, .hamburger::before, .hamburger::after { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: .3s; }
.hamburger::before, .hamburger::after { content: ''; position: absolute; left: 10px; }
.hamburger::before { top: 14px; }
.hamburger::after { bottom: 14px; }

/* ============================================ BREADCRUMB */
.breadcrumb-bar { background: var(--bg2); border-bottom: 1px solid var(--card-border); padding: .6rem 0; }
.breadcrumb-list { list-style: none; display: flex; gap: .5rem; font-size: .88rem; }
.breadcrumb-list li::after { content: '/'; margin-left: .5rem; color: var(--muted); }
.breadcrumb-list li:last-child::after { display: none; }
.breadcrumb-list a { color: var(--cyan); }
.breadcrumb-list .current { color: var(--muted); }

/* ============================================ HERO */
.hero-home { background: linear-gradient(135deg, #0b1120 0%, #0f1e35 60%, #0b2a1a 100%); padding: 4rem 1rem 3rem; text-align: center; position: relative; overflow: hidden; }
.hero-home::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 40%, rgba(34,197,94,.08) 0%, transparent 70%); pointer-events: none; }
.hero-home h1 { font-size: clamp(1.5rem,4.5vw,2.5rem); font-weight: 700; color: #fff; line-height: 1.3; max-width: 800px; margin: 0 auto; }
.highlight { color: var(--green); }
.hero-lead { color: var(--muted); font-size: 1.05rem; max-width: 640px; margin: 1rem auto; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 1.5rem; }
.hero-img-wrap { margin-top: 2rem; }
.hero-banner { max-height: 360px; object-fit: cover; border-radius: var(--radius); margin: 0 auto; border: 1px solid var(--card-border); width: 100%; max-width: 720px; }

.page-hero { background: linear-gradient(135deg, #0b1120 0%, #1a0a0a 50%, #0d1f10 100%); padding: 3.5rem 1rem 2.5rem; text-align: center; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 40% 40%, rgba(250,204,21,.05) 0%, transparent 60%); pointer-events: none; }
.page-hero h1 { font-size: clamp(1.4rem,4vw,2.2rem); font-weight: 700; color: #fff; line-height: 1.3; max-width: 780px; margin: 0 auto; }
.casino-hero { background: linear-gradient(135deg, #0b1120, #1a0a0a, #0d1f10); }
.game-hero { background: linear-gradient(135deg, #0b1120, #0d0f2a, #0b2a1a); }
.game-detail-hero { background: linear-gradient(135deg, #0b1120, #150d1a, #0d1f10); }
.app-hero { background: linear-gradient(135deg, #0b1120, #0a1a2a, #0d1f10); }
.register-hero { background: linear-gradient(135deg, #0b1120, #0b2a1a, #0d1020); }
.login-hero { background: linear-gradient(135deg, #0b1120, #1a150a, #0d1a20); }
.about-hero { background: linear-gradient(135deg, #0b1120, #0d1a2a, #0b1a0b); }
.faq-hero { background: linear-gradient(135deg, #0b1120, #150a1a, #0b2a1a); }
.policy-hero { background: linear-gradient(135deg, #0b1120, #0d0d1a, #0b1a15); }
.error-hero { padding: 5rem 1rem; text-align: center; }
.error-code { font-size: clamp(4rem,10vw,8rem); font-weight: 800; color: var(--green); line-height: 1; }
.error-actions { display: flex; gap: 12px; justify-content: center; margin: 2rem 0; flex-wrap: wrap; }
.error-links { margin-top: 3rem; }
.error-links h2 { font-size: 1.2rem; color: #fff; margin-bottom: 1rem; }
.error-links ul { list-style: none; display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }

.hero-badges { margin-bottom: 1rem; }
.badge-tag { display: inline-block; background: rgba(250,204,21,.1); color: var(--gold); border: 1px solid rgba(250,204,21,.25); border-radius: 20px; padding: .25rem .9rem; font-size: .8rem; font-weight: 600; margin: .2rem; }
.game-hero-icon { font-size: 3rem; margin-bottom: 1rem; }

/* ============================================ SECTIONS */
section { padding: 3.5rem 0; }
.section-heading { font-size: clamp(1.3rem,3vw,1.7rem); font-weight: 700; color: #fff; margin-bottom: .4rem; text-align: center; }
.accent-bar { width: 48px; height: 3px; background: var(--green); border-radius: 2px; margin: .5rem auto 1.5rem; }
.section-intro { color: var(--muted); text-align: center; max-width: 600px; margin: 0 auto 2rem; }
.img-divider { padding: 1.5rem 0; }
.content-img { width: 100%; max-width: 720px; border-radius: var(--radius); display: block; margin: 0 auto; border: 1px solid var(--card-border); }
.content-img-wrap { margin: 1.5rem 0; }
.container-pad { padding: 2rem 20px; }

/* ============================================ CARDS */
.card-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.card-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.feature-card { background: var(--bg3); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 1.5rem; transition: border-color .2s, transform .2s; }
.feature-card:hover { border-color: var(--green); transform: translateY(-3px); }
.feature-card .card-icon { font-size: 2rem; color: var(--green); margin-bottom: .75rem; }
.feature-card h3 { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: .4rem; }
.feature-card p { color: var(--muted); font-size: .88rem; }
.feature-card i { font-size: 1.8rem; color: var(--green); margin-bottom: .75rem; display: block; }

/* ============================================ STEPS */
.steps-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.step-card { background: var(--bg3); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 1.5rem; text-align: center; }
.step-card h3 { font-size: 1rem; font-weight: 600; color: #fff; margin: .5rem 0 .4rem; }
.step-card p { color: var(--muted); font-size: .88rem; margin-bottom: .75rem; }
.step-num { width: 48px; height: 48px; border-radius: 50%; background: var(--green); color: #0b1120; font-weight: 700; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; margin: 0 auto; flex-shrink: 0; }
.steps-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.step-h { display: flex; gap: 16px; align-items: flex-start; background: var(--bg3); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 1.25rem; }
.step-h h3 { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: .3rem; }
.step-h p { color: var(--muted); font-size: .88rem; }

/* ============================================ PROSE */
.prose-wrap { max-width: 820px; margin: 0 auto; }
.prose-wrap h2 { font-size: clamp(1.2rem,2.5vw,1.5rem); font-weight: 700; color: #fff; margin: 2rem 0 .75rem; line-height: 1.3; }
.prose-wrap h2:first-child { margin-top: 0; }
.prose-wrap h3 { font-size: clamp(1rem,2vw,1.2rem); font-weight: 600; color: #fff; margin: 1.5rem 0 .5rem; }
.prose-wrap p { font-size: 1rem; line-height: 1.85; margin: 0 0 1rem; color: var(--text); }
.prose-wrap ul { margin: 0 0 1rem 1.2rem; color: var(--text); }
.prose-wrap li { margin-bottom: .4rem; }
.content-section { padding: 3rem 0; }

/* ============================================ SECURITY BOX */
.security-box { background: linear-gradient(90deg, #0f2a1a, #0b1e30); border-left: 4px solid var(--cyan); border-radius: var(--radius); padding: 1.25rem 1.5rem; display: flex; gap: 1rem; align-items: flex-start; max-width: 820px; margin: 0 auto; }
.security-box > i { font-size: 2rem; color: var(--cyan); flex-shrink: 0; }
.security-box h3 { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: .4rem; }
.security-box p { color: var(--muted); font-size: .95rem; }

/* ============================================ CALLOUT BOX */
.callout-box { background: linear-gradient(90deg, #1a0d0d, #0d1a0d); border: 1px solid rgba(250,204,21,.2); border-radius: var(--radius); padding: 1.25rem 1.5rem; display: flex; gap: 1rem; align-items: flex-start; margin: 1.5rem 0; }
.callout-box > i { font-size: 1.5rem; color: var(--gold); flex-shrink: 0; }
.callout-box h3 { font-size: 1rem; font-weight: 700; color: var(--gold); margin-bottom: .4rem; }
.callout-box p { color: var(--text); font-size: .95rem; }

/* ============================================ PRICING */
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.pricing-card { background: var(--bg3); border: 1px solid var(--card-border); border-radius: 14px; padding: 2rem 1.5rem; text-align: center; position: relative; transition: border-color .2s; }
.pricing-card.featured { border-color: var(--green); }
.popular-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--green); color: #0b1120; font-size: .75rem; font-weight: 700; padding: 2px 14px; border-radius: 20px; }
.plan-name { font-weight: 700; font-size: 1rem; margin-bottom: .5rem; }
.plan-name.cyan { color: var(--cyan); }
.plan-name.green { color: var(--green); }
.plan-name.gold { color: var(--gold); }
.plan-price { font-size: 2rem; font-weight: 700; color: var(--green); }
.plan-price span { font-size: 1rem; color: var(--muted); font-weight: 400; }
.plan-desc { color: var(--muted); font-size: .88rem; margin: .5rem 0 1rem; }
.pricing-card ul { list-style: none; text-align: left; margin: 0 0 1.5rem; }
.pricing-card li { padding: .3rem 0; color: var(--text); font-size: .92rem; }
.pricing-card li::before { content: '\2713 '; color: var(--green); font-weight: 700; }

/* ============================================ COMPARE TABLE */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; border-collapse: collapse; background: var(--bg3); border-radius: var(--radius); overflow: hidden; color: var(--text); }
.compare-table th { background: var(--bg3); color: var(--muted); font-weight: 600; padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--card-border); font-size: .9rem; }
.compare-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--card-border); font-size: .9rem; }
.compare-table tbody tr:hover { background: rgba(34,197,94,.04); }
.highlight-col { color: var(--green) !important; font-weight: 700; }
.yes { color: var(--green); font-size: 1.1rem; }
.no { color: var(--red); font-size: 1.1rem; }
.green { color: var(--green); font-weight: 600; }
.gold { color: var(--gold); font-weight: 600; }

/* ============================================ TESTIMONIALS */
.testimonial-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.testimonial-card { background: var(--bg3); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 1.5rem; }
.stars { color: var(--gold); font-size: 1rem; margin-bottom: .5rem; }
.testimonial-card p { color: var(--text); font-size: .92rem; }
.testi-author { font-weight: 600; color: var(--cyan); margin-top: 1rem; font-size: .92rem; }
.testi-loc { color: var(--muted); font-size: .82rem; }

/* ============================================ SAFETY */
.safety-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.safety-card { background: var(--bg3); border: 1px solid #1e3a2a; border-radius: var(--radius); padding: 1.5rem; }
.safety-card i { font-size: 1.6rem; color: var(--green); margin-bottom: .5rem; display: block; }
.safety-card h3 { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: .4rem; }
.safety-card p { color: var(--muted); font-size: .88rem; }

/* ============================================ FAQ */
.faq-list { max-width: 900px; margin: 0 auto; }
.faq-list.narrow { max-width: 720px; margin: 0 auto; }
.faq-item { background: var(--bg3); border: 1px solid var(--card-border); border-radius: 10px; margin-bottom: .5rem; overflow: hidden; }
.faq-toggle { width: 100%; background: var(--bg3); border: none; color: var(--text); font-weight: 600; font-size: .95rem; padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer; text-align: left; gap: 1rem; }
.faq-toggle:hover { color: var(--cyan); }
.faq-toggle i { transition: transform .3s; flex-shrink: 0; }
.faq-toggle[aria-expanded="true"] { background: #1e2d45; color: var(--cyan); }
.faq-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.faq-answer { display: none; padding: 0 1.25rem 1rem; color: var(--muted); font-size: .92rem; }
.faq-answer p { margin: 0; }
.faq-item.open .faq-answer { display: block; }

/* ============================================ STATS STRIP */
.stats-strip { padding: 1.5rem 0; }
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.stat-box { background: var(--bg3); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 1.25rem 1rem; text-align: center; }
.stat-num { font-size: 1.6rem; font-weight: 700; color: var(--gold); line-height: 1.2; }
.stat-label { color: var(--muted); font-size: .82rem; margin-top: .25rem; }

/* ============================================ GAME CATALOG */
.game-list-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 16px; }
.game-list-card { background: var(--bg3); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 1.5rem; transition: border-color .2s, transform .2s; text-decoration: none; color: var(--text); display: block; }
.game-list-card:hover { border-color: var(--cyan); transform: translateY(-3px); color: var(--text); }
.glc-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.game-list-card h3 { font-size: 1.05rem; font-weight: 600; color: #fff; margin-bottom: .35rem; }
.game-list-card p { color: var(--muted); font-size: .88rem; }

/* ============================================ CATEGORY GRID */
.category-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.category-card { background: var(--bg3); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 1.25rem; text-align: center; transition: border-color .2s, transform .2s; }
.category-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.cat-icon { font-size: 2.5rem; margin-bottom: .5rem; }
.cat-badge { display: inline-block; font-size: .7rem; font-weight: 700; padding: .15rem .6rem; border-radius: 20px; margin-bottom: .4rem; }
.cat-badge.hot { background: rgba(250,204,21,.12); color: var(--gold); border: 1px solid rgba(250,204,21,.3); }
.cat-badge.live { background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.3); }
.cat-badge.new { background: rgba(34,197,94,.12); color: var(--green); border: 1px solid rgba(34,197,94,.3); }
.category-card h3 { font-size: .95rem; font-weight: 600; color: #fff; margin-bottom: .3rem; }
.category-card p { color: var(--muted); font-size: .8rem; }

/* ============================================ LEADERBOARD */
.rank-list { max-width: 600px; margin: 0 auto; }
.rank-item { display: flex; align-items: center; gap: 16px; padding: .75rem 1rem; background: var(--bg3); border: 1px solid var(--card-border); border-radius: var(--radius); margin-bottom: .5rem; }
.rank-badge { width: 36px; height: 36px; border-radius: 50%; background: var(--bg2); color: var(--muted); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rank-badge.gold { background: var(--gold); color: #0b1120; }
.rank-badge.silver { background: #c0c0c0; color: #0b1120; }
.rank-badge.bronze { background: #cd7f32; color: #0b1120; }
.rank-name { font-weight: 600; color: #fff; flex: 1; }
.rank-cat { color: var(--muted); font-size: .85rem; }

/* ============================================ LIVE TICKER */
.live-ticker { background: var(--bg2); border-bottom: 1px solid var(--card-border); overflow: hidden; padding: .4rem 0; }
.ticker-track { display: flex; gap: 3rem; animation: ticker 20s linear infinite; white-space: nowrap; }
.ticker-track span { color: var(--muted); font-size: .82rem; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ============================================ JACKPOT BANNER */
.jackpot-banner { background: linear-gradient(90deg, #1a0d0d, #0d1a0d); border-bottom: 1px solid rgba(250,204,21,.2); padding: 1rem 0; }
.jackpot-inner { display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; text-align: center; }
.jackpot-label { color: var(--gold); font-weight: 700; font-size: .9rem; }
.jackpot-amount { color: #fff; font-size: 1.8rem; font-weight: 800; }
.jackpot-note { color: var(--muted); font-size: .85rem; }

/* ============================================ GAME DEMO */
.demo-placeholder { background: var(--bg3); border: 2px dashed var(--card-border); border-radius: var(--radius-lg); padding: 3rem 2rem; text-align: center; max-width: 600px; margin: 0 auto; }
.demo-icon { font-size: 4rem; margin-bottom: 1rem; }
.demo-placeholder p { color: var(--muted); margin-bottom: 1.5rem; }

/* ============================================ FORM PAGES */
.register-layout, .login-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.form-card { background: var(--bg3); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 2rem; }
.form-card h2 { font-size: 1.3rem; color: #fff; margin-bottom: 1.5rem; }
.step-indicator { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.step-indicator .step { flex: 1; text-align: center; padding: .5rem; border-radius: 8px; background: var(--bg2); color: var(--muted); font-size: .8rem; font-weight: 600; }
.step-indicator .step.active { background: var(--green); color: #0b1120; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; color: var(--muted); font-size: .85rem; margin-bottom: .35rem; font-weight: 600; }
.form-input { width: 100%; padding: .75rem 1rem; background: var(--bg2); border: 1px solid var(--card-border); border-radius: 8px; color: var(--text); font-size: .95rem; transition: border-color .2s; }
.form-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.form-note { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .82rem; margin: 1rem 0; }
.form-note i { color: var(--green); font-size: 1.1rem; }
.form-alt { text-align: center; color: var(--muted); font-size: .88rem; margin-top: 1rem; }
.form-options { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0; font-size: .85rem; }
.checkbox-label { color: var(--muted); display: flex; align-items: center; gap: .5rem; }
.login-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.tab-btn { flex: 1; padding: .6rem; background: var(--bg2); border: 1px solid var(--card-border); border-radius: 8px; color: var(--muted); font-weight: 600; font-size: .85rem; cursor: pointer; transition: all .2s; }
.tab-btn.active { background: var(--green); color: #0b1120; border-color: var(--green); }
.info-column h2 { font-size: 1.2rem; color: #fff; margin-bottom: 1.25rem; }
.info-column h3 { font-size: 1.05rem; color: #fff; margin: 1.5rem 0 .5rem; }
.info-column p { color: var(--muted); font-size: .92rem; line-height: 1.75; }
.benefit-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.benefit-item { display: flex; gap: 1rem; align-items: flex-start; }
.benefit-item i { font-size: 1.5rem; color: var(--green); flex-shrink: 0; margin-top: .2rem; }
.benefit-item h3 { font-size: .95rem; font-weight: 600; color: #fff; margin-bottom: .2rem; }
.benefit-item p { font-size: .85rem; color: var(--muted); }
.login-steps { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }

/* ============================================ POLICY PAGES */
.policy-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2.5rem; align-items: start; }
.policy-toc { background: var(--bg3); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 1.25rem; position: sticky; top: 90px; }
.policy-toc h3 { font-size: 1rem; color: #fff; margin-bottom: .75rem; }
.policy-toc ul { list-style: none; }
.policy-toc li { margin-bottom: .4rem; }
.policy-toc a { color: var(--muted); font-size: .85rem; transition: color .2s; }
.policy-toc a:hover { color: var(--cyan); }
.policy-content { }
.policy-section { margin-bottom: 2rem; }
.policy-section h2 { font-size: 1.2rem; font-weight: 700; color: #fff; margin-bottom: .75rem; }
.policy-section p { color: var(--text); font-size: .95rem; line-height: 1.8; }

/* ============================================ FAQ PAGE LAYOUT */
.faq-layout { display: grid; grid-template-columns: 1fr 280px; gap: 2.5rem; align-items: start; }
.faq-content h2 { font-size: 1.2rem; font-weight: 700; color: #fff; margin: 2rem 0 1rem; }
.faq-content h2:first-child { margin-top: 0; }
.faq-sidebar { }
.sidebar-card { background: var(--bg3); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; }
.sidebar-card h3 { font-size: 1rem; color: #fff; margin-bottom: .75rem; }
.sidebar-card ul { list-style: none; }
.sidebar-card li { margin-bottom: .4rem; }
.sidebar-card a { color: var(--cyan); font-size: .88rem; }
.sidebar-card p { color: var(--muted); font-size: .85rem; }
.sidebar-img { border-radius: var(--radius); border: 1px solid var(--card-border); }

/* ============================================ FEATURES STRIP */
.features-strip { padding: 2rem 0; }
.feature-mini-grid { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.feature-mini { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .9rem; }
.feature-mini i { color: var(--green); font-size: 1.2rem; }

/* ============================================ CONTENT SPLIT */
.content-split { display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; align-items: start; }
.device-mockup { }
.mockup-img { border-radius: var(--radius-lg); border: 1px solid var(--card-border); }

/* ============================================ TIMELINE */
.timeline { max-width: 700px; margin: 0 auto; position: relative; padding-left: 60px; }
.timeline::before { content: ''; position: absolute; left: 24px; top: 0; bottom: 0; width: 2px; background: var(--card-border); }
.tl-item { position: relative; margin-bottom: 2rem; }
.tl-marker { position: absolute; left: -60px; width: 48px; height: 48px; border-radius: 50%; background: var(--green); color: #0b1120; font-weight: 700; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.tl-content h3 { font-size: 1.05rem; font-weight: 600; color: #fff; margin-bottom: .3rem; }
.tl-content p { color: var(--muted); font-size: .9rem; }

/* ============================================ CTA BANNER */
.cta-banner { background: linear-gradient(135deg, #0f2a1a, #0b1e30); padding: 3rem 1rem; }
.casino-cta { background: linear-gradient(135deg, #1a0a0a, #0b1120, #0d1a0d); }
.cta-banner h2 { font-size: clamp(1.2rem,3vw,1.5rem); font-weight: 700; color: #fff; margin-bottom: .75rem; }
.cta-banner p { color: var(--muted); max-width: 500px; margin: 0 auto 1.5rem; }

/* ============================================ FOOTER */
.site-footer { background: #070d1a; border-top: 1px solid var(--card-border); padding: 2.5rem 0 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; }
.footer-brand p { color: var(--muted); font-size: .88rem; margin-top: .75rem; }
.footer-email { color: var(--muted); font-size: .85rem; margin-top: .5rem; }
.footer-email i { color: var(--green); }
.footer-col h4 { color: #fff; font-weight: 600; margin-bottom: .75rem; font-size: .95rem; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: .35rem; }
.footer-col a { color: var(--muted); font-size: .88rem; transition: color .2s; }
.footer-col a:hover { color: var(--green); }
.footer-games { display: flex; flex-wrap: wrap; gap: .5rem; }
.footer-games li { margin: 0; }
.footer-games a { display: inline-block; }
.footer-bottom { border-top: 1px solid var(--card-border); margin-top: 1.5rem; padding-top: 1rem; text-align: center; }
.footer-bottom p { color: var(--muted); font-size: .82rem; }

/* ============================================ RESPONSIVE */
@media (max-width: 1024px) {
  .card-grid-4 { grid-template-columns: repeat(2,1fr); }
  .steps-grid { grid-template-columns: repeat(2,1fr); }
  .category-grid { grid-template-columns: repeat(2,1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .content-split { grid-template-columns: 1fr; }
  .device-mockup { order: -1; }
}
@media (max-width: 1080px) {
  .header-inner { min-height: 68px; grid-template-columns: 140px 1fr auto; gap: 10px; }
  .brand-wrap { width: 140px; min-width: 140px; max-width: 140px; height: 48px; }
  .brand-logo { width: 140px; max-height: 42px; }
  .primary-nav { position: fixed; left: 12px; right: 12px; top: 76px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 14px; border-radius: var(--radius-lg); background: var(--bg); border: 1px solid var(--card-border); box-shadow: var(--shadow); max-height: calc(100vh - 96px); overflow-y: auto; overflow-x: hidden; z-index: 999; }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { max-width: none; width: 100%; padding: 14px 12px; text-overflow: initial; font-size: 1rem; }
  .header-actions { justify-content: flex-end; gap: 6px; }
  .header-actions .btn { min-height: 38px; padding: 0 12px; font-size: .85rem; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .safety-grid { grid-template-columns: 1fr; }
  .card-grid-3 { grid-template-columns: 1fr; }
  .steps-row { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  .register-layout, .login-layout { grid-template-columns: 1fr; }
  .policy-layout { grid-template-columns: 1fr; }
  .policy-toc { position: static; }
  .faq-layout { grid-template-columns: 1fr; }
  .faq-sidebar { order: -1; }
  .timeline { padding-left: 50px; }
  .tl-marker { left: -50px; width: 40px; height: 40px; font-size: .75rem; }
}
@media (max-width: 480px) {
  .card-grid-4 { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  section { padding: 2.5rem 0; }
  .hero-home { padding: 3rem 1rem 2rem; }
  .jackpot-inner { flex-direction: column; gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}