/* =============================================
   BETSIXTY V4 — App / Download / Mobiel
   #08080f dark | #e2ff02 lime-yellow | #00c853 green
   Split hero + phone mockup | Mobile-first | NL geo
   All release fixes built-in
   ============================================= */

@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/BebasNeue-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-VariableFont_wght.woff2') format('woff2 supports variations'),
       url('../fonts/Outfit-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --bg:       #08080f;
  --bg2:      #0d0d1a;
  --bg3:      #12122a;
  --bg4:      #1a1a35;
  --card:     #0f0f22;

  --lime:     #e2ff02;
  --lime-lt:  #f0ff55;
  --lime-dk:  #b8cc00;
  --lglow:    rgba(226,255,2,0.10);

  --green:    #00c853;
  --green-lt: #00e676;
  --green-dk: #00a040;
  --gglow:    rgba(0,200,83,0.10);

  --red:      #f44336;
  --text:     #ffffff;
  --text-md:  #a0a8c0;
  --text-dim: #5a6080;
  --border:   rgba(255,255,255,0.07);
  --border-l: rgba(226,255,2,0.20);
  --border-g: rgba(0,200,83,0.20);

  --header-h: 64px;
  --max-w:    1160px;
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 50px;
  --font-d: 'Bebas Neue','Arial Black',sans-serif;
  --font-b: 'Outfit',system-ui,sans-serif;
  --tr: 0.2s ease;
  --sh-card:   0 4px 24px rgba(0,0,0,0.7);
  --sh-lime:   0 0 28px rgba(226,255,2,0.18);
  --sh-green:  0 0 28px rgba(0,200,83,0.22);
  --sh-btn:    0 4px 20px rgba(0,200,83,0.45);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body { font-family:var(--font-b); background:var(--bg); color:var(--text); line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; padding:0; margin:0; }
img,svg { display:block; max-width:100%; height:auto; }
button { cursor:pointer; font-family:var(--font-b); }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:2px; }
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 20px; }

/* =============================================
   HEADER
   ============================================= */
.site-header { position:sticky; top:0; z-index:100; height:var(--header-h); background:rgba(8,8,15,0.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.header-inner { height:var(--header-h); display:flex; align-items:center; gap:14px; }
.logo-link { flex-shrink:0; display:flex; align-items:center; transition:opacity var(--tr); }
.logo-link:hover { opacity:0.85; }
.logo-link img { height:28px; width:auto; }
.logo-link-mobile { display:none; align-items:center; flex-shrink:0; }
.logo-link-mobile img { height:24px; width:auto; }
.header-nav { display:flex; align-items:center; gap:2px; flex:1; }
.header-nav a { font-size:13px; font-weight:600; color:var(--text-md); padding:6px 12px; border-radius:var(--r-xs); transition:all var(--tr); white-space:nowrap; }
.header-nav a:hover { color:var(--lime); background:var(--lglow); }
.header-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; background:none; border:none; flex-shrink:0; margin-left:auto; }
.burger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:all var(--tr); }
.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mobile-nav { display:none; position:fixed; top:var(--header-h); left:0; right:0; background:rgba(8,8,15,0.99); border-bottom:1px solid var(--border); padding:12px 16px 20px; z-index:99; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity var(--tr),transform var(--tr); }
.mobile-nav.open { opacity:1; transform:translateY(0); pointer-events:all; }
.mobile-nav-links { display:flex; flex-direction:column; gap:2px; margin-bottom:14px; }
.mobile-nav-links a { display:block; font-size:15px; font-weight:600; color:var(--text-md); padding:11px 12px; border-radius:var(--r-xs); transition:all var(--tr); }
.mobile-nav-links a:hover { color:var(--lime); background:var(--lglow); }
.mobile-nav-btns { display:flex; gap:8px; }
.mobile-nav-btns .btn { flex:1; }

/* =============================================
   BUTTONS
   ============================================= */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; font-family:var(--font-b); font-weight:700; font-size:14px; padding:11px 22px; border-radius:var(--r-sm); border:none; transition:all var(--tr); white-space:nowrap; text-decoration:none !important; cursor:pointer; }
.btn:active { transform:scale(0.97); }

.btn-green { background:linear-gradient(135deg, var(--green), var(--green-dk)); color:#000 !important; font-weight:800; box-shadow:var(--sh-btn); animation:pulse-g 2.6s ease-in-out infinite; }
.btn-green:hover,.btn-green:visited,.btn-green:active { color:#000 !important; background:linear-gradient(135deg, var(--green-lt), var(--green)); animation:none; box-shadow:0 6px 28px rgba(0,200,83,0.55); transform:translateY(-1px); }
@keyframes pulse-g { 0%,100%{transform:scale(1)} 50%{transform:scale(1.03)} }

.btn-lime { background:linear-gradient(135deg, var(--lime), var(--lime-dk)); color:#000 !important; font-weight:800; }
.btn-lime:hover { background:linear-gradient(135deg, var(--lime-lt), var(--lime)); transform:translateY(-1px); box-shadow:var(--sh-lime); }

.btn-ghost { background:transparent; color:var(--text) !important; border:1.5px solid rgba(255,255,255,0.18); }
.btn-ghost:hover { border-color:var(--lime); color:var(--lime) !important; background:var(--lglow); }

.btn-outline-l { background:transparent; color:var(--lime) !important; border:1.5px solid var(--lime); }
.btn-outline-l:hover { background:var(--lglow); }

/* Download store button */
.btn-dl { display:flex; align-items:center; gap:12px; background:var(--bg3); border:1.5px solid var(--border-l); border-radius:var(--r-md); padding:12px 20px; text-decoration:none !important; transition:all var(--tr); }
.btn-dl:hover { background:var(--bg4); border-color:var(--lime); box-shadow:var(--sh-lime); transform:translateY(-2px); }
.btn-dl-icon { font-size:26px; flex-shrink:0; }
.btn-dl-text { display:flex; flex-direction:column; text-align:left; }
.btn-dl-sub  { font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; }
.btn-dl-name { font-size:15px; font-weight:700; color:var(--text); }

.btn-sm  { font-size:12px; padding:8px 16px; }
.btn-lg  { font-size:15px; padding:13px 30px; border-radius:var(--r-md); }
.btn-xl  { font-size:16px; padding:15px 36px; border-radius:var(--r-md); font-weight:900; }
.btn-full { width:100%; justify-content:center; }

/* =============================================
   HERO — split text left + phone mockup right
   ============================================= */
.hero-section { background:var(--bg2); border-bottom:1px solid var(--border); overflow:hidden; position:relative; }
.hero-section::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 55% 70% at 10% 50%, rgba(0,200,83,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 45% 55% at 85% 30%, rgba(226,255,2,0.06) 0%, transparent 50%);
}
.hero-section::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(circle, rgba(226,255,2,0.025) 1px, transparent 1px);
  background-size:28px 28px;
}

.hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:1fr auto; align-items:center; gap:40px; padding:52px 0 48px; }

.hero-left {}

.hero-badge { display:inline-flex; align-items:center; gap:8px; background:var(--gglow); border:1px solid var(--border-g); border-radius:var(--r-pill); padding:5px 14px; font-size:12px; font-weight:700; color:var(--green); margin-bottom:18px; letter-spacing:0.5px; }
.hero-badge::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:blink 2s infinite; flex-shrink:0; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.hero-h1 { font-family:var(--font-d); font-size:clamp(44px,5.5vw,80px); letter-spacing:2px; line-height:0.95; color:var(--text); margin-bottom:14px; }
.hero-h1 .acc  { color:var(--lime); display:block; }
.hero-h1 .acc2 { color:var(--green); display:block; }

.hero-sub { font-size:15px; color:var(--text-md); line-height:1.7; margin-bottom:26px; max-width:480px; }

.hero-dl-btns { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }

.hero-feats { display:flex; flex-direction:column; gap:8px; }
.hero-feat { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-md); }
.hero-feat::before { content:'✓'; color:var(--green); font-weight:800; font-size:14px; flex-shrink:0; }

/* ─── Phone mockup ─── */
.hero-right { flex-shrink:0; position:relative; }
.phone-wrap { position:relative; width:252px; }
.phone-frame {
  width:252px; height:504px;
  background:linear-gradient(155deg, var(--bg3) 0%, var(--bg4) 100%);
  border:2px solid var(--border-l); border-radius:40px;
  overflow:hidden; position:relative;
  box-shadow:0 30px 70px rgba(0,0,0,0.85), var(--sh-lime), inset 0 1px 0 rgba(226,255,2,0.1);
}
.phone-frame::before { content:''; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:70px; height:5px; background:rgba(0,0,0,0.7); border-radius:3px; z-index:10; }
.phone-screen { position:absolute; inset:0; background:linear-gradient(160deg, #06060f 0%, #0a120a 50%, #08080f 100%); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:38px 14px 16px; }
.phone-logo { height:20px; width:auto; object-fit:contain; margin-bottom:12px; }
.phone-bonus { width:100%; background:var(--lglow); border:1px solid var(--border-l); border-radius:var(--r-md); padding:10px 12px; text-align:center; margin-bottom:10px; }
.phone-bonus-val { font-family:var(--font-d); font-size:30px; color:var(--lime); letter-spacing:1px; line-height:1; }
.phone-bonus-txt { font-size:9px; color:var(--text-md); margin-top:2px; }
.phone-cta { display:block; width:100%; background:linear-gradient(135deg, var(--green), var(--green-dk)); color:#000 !important; font-family:var(--font-b); font-weight:800; font-size:12px; text-align:center; padding:9px; border-radius:var(--r-sm); margin-bottom:10px; text-decoration:none !important; animation:pulse-g 2.6s infinite; }
.phone-games { display:grid; grid-template-columns:1fr 1fr; gap:5px; width:100%; }
.phone-game { border-radius:var(--r-xs); overflow:hidden; aspect-ratio:1/1; background:var(--bg3); }
.phone-game img, .phone-game svg { width:100%; height:100%; object-fit:cover; }
.phone-badge { position:absolute; background:rgba(8,8,15,0.92); border:1px solid var(--border-l); border-radius:var(--r-sm); padding:8px 12px; backdrop-filter:blur(8px); }
.phone-badge-val { font-family:var(--font-d); font-size:16px; color:var(--lime); line-height:1; }
.phone-badge-lbl { font-size:9px; color:var(--text-dim); margin-top:2px; }
.pb-left  { left:-56px; top:22%; animation:float-y 4s ease-in-out infinite; }
.pb-right { right:-56px; bottom:28%; animation:float-y 4s ease-in-out infinite; animation-delay:-2s; }
@keyframes float-y { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* =============================================
   SECTIONS
   ============================================= */
.section     { padding:56px 0; }
.section-alt { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.sec-title { font-family:var(--font-d); font-size:clamp(24px,3vw,38px); letter-spacing:2px; color:var(--text); margin-bottom:6px; line-height:1.05; }
.sec-title .acc  { color:var(--lime); }
.sec-title .acc2 { color:var(--green); }
.sec-sub    { font-size:13px; color:var(--text-dim); margin-bottom:24px; }
.sec-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.sec-link   { font-size:13px; color:var(--lime); font-weight:600; white-space:nowrap; }
.sec-link:hover { opacity:0.75; }

/* =============================================
   DOWNLOAD SECTION
   ============================================= */
.dl-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }

.steps-list { display:flex; flex-direction:column; gap:20px; }
.step-item  { display:flex; gap:16px; align-items:flex-start; }
.step-num { width:38px; height:38px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg, var(--green), var(--green-dk)); display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-size:20px; color:#000; box-shadow:var(--sh-green); }
.step-title { font-weight:700; font-size:15px; color:var(--text); margin-bottom:3px; }
.step-desc  { font-size:13px; color:var(--text-md); line-height:1.6; }

.platform-cards { display:flex; flex-direction:column; gap:12px; }
.platform-card { background:var(--card); border:1px solid var(--border-l); border-radius:var(--r-lg); padding:20px; transition:all var(--tr); box-shadow:var(--sh-card); }
.platform-card:hover { box-shadow:var(--sh-lime); transform:translateY(-2px); }
.platform-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.platform-icon { font-size:28px; }
.platform-name { font-family:var(--font-d); font-size:22px; letter-spacing:1px; color:var(--text); }
.platform-sub  { font-size:12px; color:var(--text-dim); }
.platform-desc { font-size:13px; color:var(--text-md); line-height:1.6; margin-bottom:14px; }

/* =============================================
   FEATURES GRID — 6 cards
   ============================================= */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px 18px; text-align:center; transition:all var(--tr); }
.feature-card:hover { border-color:var(--border-l); box-shadow:var(--sh-lime); transform:translateY(-3px); }
.feature-icon  { font-size:32px; margin-bottom:10px; }
.feature-title { font-weight:700; font-size:14px; color:var(--text); margin-bottom:5px; }
.feature-desc  { font-size:12px; color:var(--text-md); line-height:1.6; }

/* =============================================
   COMPARISON TABLE
   ============================================= */
.compare-wrap { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-card); border:1px solid var(--border); }
.compare-table { width:100%; border-collapse:collapse; }
.compare-table th { padding:14px 18px; font-family:var(--font-d); font-size:18px; letter-spacing:1px; background:var(--bg3); text-align:center; border-bottom:1px solid var(--border); }
.compare-table th:first-child { text-align:left; font-family:var(--font-b); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); }
.compare-table th.col-app { color:var(--lime); border-bottom:2px solid var(--lime); }
.compare-table th.col-web { color:var(--text-dim); }
.compare-table td { padding:12px 18px; border-bottom:1px solid var(--border); font-size:14px; text-align:center; color:var(--text-md); }
.compare-table td:first-child { text-align:left; color:var(--text); font-weight:600; background:rgba(15,15,34,0.6); }
.compare-table tr:last-child td { border-bottom:none; }
.compare-table tr:hover td { background:rgba(226,255,2,0.03); }
.c-yes { color:var(--green); font-weight:700; font-size:16px; }
.c-no  { color:var(--red); font-size:16px; }
.c-txt { color:var(--text-dim); font-size:12px; }

/* =============================================
   GAME TABS — 16:9 (mobile-friendly)
   ============================================= */
.tabs { display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab-btn { display:flex; align-items:center; gap:6px; background:none; border:none; padding:9px 14px; font-family:var(--font-b); font-size:13px; font-weight:700; color:var(--text-dim); white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all var(--tr); border-radius:var(--r-xs) var(--r-xs) 0 0; flex-shrink:0; }
.tab-btn:hover  { color:var(--text); background:var(--lglow); }
.tab-btn.active { color:var(--lime); border-bottom-color:var(--lime); background:rgba(226,255,2,0.05); }

.tab-panel { display:none; }
.tab-panel.active { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }

/* RELEASE FIX: display:block */
.game-card { border-radius:var(--r-md); overflow:hidden; background:var(--card); border:1px solid var(--border); transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr); display:block; }
.game-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lime); border-color:var(--border-l); }
.game-thumb { position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--bg3); }
.game-thumb img,.game-thumb svg { width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; display:block; }
.game-card:hover .game-thumb img,.game-card:hover .game-thumb svg { transform:scale(1.07); }
.game-badge { position:absolute; top:7px; left:7px; font-size:9px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; padding:3px 7px; border-radius:4px; z-index:2; }
.badge-hot  { background:var(--red);    color:#fff; }
.badge-new  { background:var(--lime);   color:#000; }
.badge-live { background:#8B5CF6;       color:#fff; }
.badge-top  { background:var(--green);  color:#000; }
.game-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.9) 0%,transparent 55%); display:flex; align-items:flex-end; justify-content:center; padding:10px; opacity:0; transition:opacity var(--tr); }
.game-card:hover .game-overlay { opacity:1; }
.play-btn { display:flex; align-items:center; justify-content:center; width:100%; background:var(--green); color:#000 !important; font-family:var(--font-b); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:0.5px; padding:8px; border-radius:var(--r-xs); transition:background var(--tr); text-decoration:none !important; }
.play-btn:hover { background:var(--green-lt); }
/* RELEASE FIX: flex column gap */
.game-info { padding:9px 10px 11px; display:flex; flex-direction:column; gap:3px; }
.game-name { font-weight:700; font-size:12px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; transition:color var(--tr); }
.game-card:hover .game-name { color:var(--lime); }
.game-provider { font-size:11px; color:var(--text-dim); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; }

/* =============================================
   PROVIDERS
   ============================================= */
.providers-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.provider-chip { background:var(--card); border:1px solid var(--border); border-radius:var(--r-pill); padding:7px 14px; font-size:12px; font-weight:600; color:var(--text-dim); display:flex; align-items:center; gap:8px; cursor:pointer; transition:all var(--tr); white-space:nowrap; }
.provider-chip img { height:20px; width:auto; max-width:80px; object-fit:contain; filter:grayscale(0.4) brightness(0.8); transition:filter var(--tr); }
.provider-chip:hover { border-color:var(--border-l); color:var(--lime); box-shadow:var(--sh-lime); }
.provider-chip:hover img { filter:grayscale(0) brightness(1.1); }

/* =============================================
   PAYMENTS
   ============================================= */
.payments-section { padding:28px 0; background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.payments-grid { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.pay-item { background:var(--card); border:1px solid var(--border); border-radius:var(--r-xs); padding:8px 16px; height:46px; min-width:78px; display:flex; align-items:center; justify-content:center; transition:all var(--tr); }
.pay-item:hover { border-color:var(--border-l); box-shadow:var(--sh-lime); }
.pay-item img { max-height:24px; max-width:70px; width:auto; height:auto; object-fit:contain; filter:brightness(0.8); transition:filter var(--tr); }
.pay-item:hover img { filter:brightness(1.15); }

/* =============================================
   REVIEW TABLE
   ============================================= */
.review-table-wrap { border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); margin:1.5rem 0; box-shadow:var(--sh-card); }
.review-table { width:100%; border-collapse:collapse; font-size:14px; }
.review-table tr { border-bottom:1px solid var(--border); transition:background var(--tr); }
.review-table tr:last-child { border-bottom:none; }
.review-table tr:hover { background:rgba(226,255,2,0.03); }
.review-table td { padding:11px 14px; vertical-align:middle; }
.review-table td:first-child { font-weight:600; color:var(--text); background:rgba(15,15,34,0.8); width:42%; }
.review-table td:last-child  { color:var(--text-md); background:rgba(8,8,22,0.8); }

/* =============================================
   SECTION BANNER (SVG)
   ============================================= */
.section-banner { display:block; width:100%; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-card); margin:20px 0; transition:opacity var(--tr); }
.section-banner:hover { opacity:0.88; }
.section-banner img,.section-banner svg { width:100%; height:auto; display:block; max-height:220px; object-fit:cover; }

/* =============================================
   PROSE
   ============================================= */
.prose h2 { font-family:var(--font-d); font-size:clamp(18px,2.5vw,24px); letter-spacing:1.5px; color:var(--text); margin:2.5rem 0 .75rem; padding-bottom:8px; border-bottom:1px solid var(--border); scroll-margin-top:calc(var(--header-h) + 16px); }
.prose h2:first-child { margin-top:0; }
.prose h3 { font-size:15px; font-weight:700; color:var(--lime); margin:1.75rem 0 .5rem; }
.prose p  { font-size:15px; color:var(--text-md); line-height:1.8; margin-bottom:1rem; }
.prose strong { color:var(--text); font-weight:700; }
.prose a  { color:var(--lime); text-decoration:underline; }
.prose table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:14px; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-card); }
.prose thead { background:rgba(226,255,2,.08); border-bottom:2px solid var(--lime); }
.prose th { font-weight:700; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--lime); padding:11px 14px; text-align:left; }
.prose tbody tr { border-bottom:1px solid var(--border); transition:background var(--tr); }
.prose tbody tr:last-child { border-bottom:none; }
.prose tbody tr:hover { background:rgba(226,255,2,.04); }
.prose td { padding:10px 14px; color:var(--text-md); font-size:14px; }
.prose td:first-child { font-weight:600; color:var(--text); }
.prose ol,.prose ul,.list-content { padding-left:1.5em !important; margin:.75rem 0 1rem !important; }
.prose ol,.list-content.list-ol { list-style:decimal !important; }
.prose ul,.list-content.list-ul { list-style:disc !important; }
.prose li,.list-content li { padding-left:.3em; margin-bottom:6px; font-size:15px; color:var(--text-md); line-height:1.75; }
.prose ol li::marker,.list-content.list-ol li::marker { color:var(--green); font-weight:700; }
.prose ul li::marker,.list-content.list-ul li::marker { color:var(--lime); }
.bonus-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:1.25rem 0; list-style:none !important; padding-left:0 !important; }
.bonus-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); padding:18px; transition:border-color var(--tr),box-shadow var(--tr); }
.bonus-card:hover { border-color:var(--border-l); box-shadow:var(--sh-lime); }
.bonus-card-title { font-family:var(--font-d); font-size:18px; letter-spacing:1px; color:var(--text); margin-bottom:6px; }
.bonus-card-text  { font-size:13px; color:var(--text-md); line-height:1.6; margin:0; }
.pros-cons { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:1.5rem 0; }
.pros-card,.cons-card { background:var(--card); border-radius:var(--r-md); overflow:hidden; }
.pros-head { background:rgba(0,200,83,.08); color:var(--green); border-bottom:2px solid var(--green); padding:10px 14px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.cons-head { background:rgba(244,67,54,.08); color:var(--red); border-bottom:2px solid var(--red); padding:10px 14px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.pros-body,.cons-body { padding:8px 14px; }
.pros-body li,.cons-body li { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--text-md); padding:5px 0; border-bottom:1px solid rgba(255,255,255,.04); line-height:1.5; }
.pros-body li:last-child,.cons-body li:last-child { border-bottom:none; }
.pros-body li::before { content:'✓'; color:var(--green); font-weight:700; flex-shrink:0; }
.cons-body li::before { content:'✗'; color:var(--red); font-weight:700; flex-shrink:0; }
nav ul,.header-nav,.mobile-nav-links,.footer-links { list-style:none !important; padding-left:0 !important; margin:0 !important; }

/* TOC */
.toc-wrap { margin:1.75rem 0; border:1px solid var(--border); border-radius:var(--r-md); background:var(--card); overflow:hidden; }
.toc-toggle { display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; padding:12px 16px; color:var(--text); font-family:var(--font-b); font-size:14px; font-weight:600; text-align:left; transition:background var(--tr); }
.toc-toggle:hover { background:rgba(255,255,255,.02); }
.toc-toggle svg { color:var(--lime); flex-shrink:0; width:16px; height:16px; }
.toc-label { flex:1; }
.toc-chevron { width:16px; height:16px; color:var(--lime); transition:transform var(--tr); flex-shrink:0; }
.toc-wrap.open .toc-chevron { transform:rotate(180deg); }
.toc-body { max-height:0; overflow:hidden; transition:max-height .3s ease; border-top:0 solid var(--border); }
.toc-wrap.open .toc-body { max-height:600px; border-top-width:1px; }
.toc-list { padding:10px 16px 14px; display:flex; flex-direction:column; gap:3px; }
.toc-list a { display:block; font-size:13px; color:var(--text-md); padding:5px 8px; border-radius:var(--r-xs); border-left:2px solid transparent; transition:all var(--tr); }
.toc-list a:hover,.toc-list a.active { color:var(--lime); border-left-color:var(--lime); background:var(--lglow); padding-left:13px; }

/* FAQ */
.faq-list { display:flex; flex-direction:column; gap:8px; }
.faq-item { background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; transition:border-color var(--tr); }
.faq-item:hover,.faq-item.open { border-color:var(--border-l); }
.faq-question,h3.faq-question { width:100%; background:none; border:none; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:var(--font-b); font-size:14px; font-weight:600; color:var(--text); text-align:left; gap:12px; transition:color var(--tr),background var(--tr); letter-spacing:normal; }
.faq-question:hover,h3.faq-question:hover { color:var(--lime); background:rgba(226,255,2,.03); }
.faq-icon { flex-shrink:0; width:24px; height:24px; border-radius:50%; background:rgba(226,255,2,.1); border:1px solid rgba(226,255,2,.25); display:flex; align-items:center; justify-content:center; color:var(--lime); font-size:15px; transition:all var(--tr); }
.faq-item.open .faq-icon { background:rgba(226,255,2,.2); transform:rotate(45deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .35s ease,padding .2s ease; font-size:14px; color:var(--text-md); line-height:1.75; border-top:0 solid var(--border); padding:0 16px; }
.faq-answer p { font-size:14px; color:var(--text-md); line-height:1.75; margin:0; }
.faq-item.open .faq-answer { max-height:400px; border-top-width:1px; padding:12px 16px 16px; }

/* =============================================
   FOOTER
   ============================================= */
.site-footer { background:var(--bg); border-top:1px solid var(--border); padding:44px 0 22px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; padding-bottom:24px; border-bottom:1px solid var(--border); margin-bottom:18px; }
.footer-logo { height:22px; margin-bottom:12px; }
.footer-about { font-size:13px; color:var(--text-dim); line-height:1.7; margin-bottom:14px; max-width:260px; }
.footer-social { display:flex; gap:8px; }
.social-btn { width:32px; height:32px; border-radius:50%; background:var(--card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--text-dim); cursor:pointer; transition:all var(--tr); user-select:none; }
.social-btn:hover { background:var(--lglow); border-color:var(--border-l); color:var(--lime); transform:translateY(-2px); }
.footer-col-title { font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--text); margin-bottom:10px; }
.footer-links { display:flex; flex-direction:column; gap:8px; }
.footer-links a { font-size:13px; color:var(--text-dim); transition:color var(--tr); }
.footer-links a:hover { color:var(--lime); }
.footer-bottom { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.age-badge { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:rgba(226,255,2,.1); border:1.5px solid rgba(226,255,2,.3); color:var(--lime); font-weight:900; font-size:10px; margin-top:2px; }
.footer-disclaimer { font-size:11px; color:var(--text-dim); line-height:1.65; max-width:540px; }
.footer-copy { font-size:11px; color:var(--text-dim); white-space:nowrap; align-self:flex-end; }

/* FADE */
.fade-in { opacity:0; transform:translateY(12px); transition:opacity .5s ease,transform .5s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }
.fd1{transition-delay:.1s} .fd2{transition-delay:.2s} .fd3{transition-delay:.3s}

/* ≤ 1100px */
@media (max-width:1100px) {
  .phone-badge { display:none; }
  .phone-wrap { width:220px; }
  .phone-frame { width:220px; height:440px; }
  .tab-panel.active { grid-template-columns:repeat(4,1fr); }
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:24px; }
}

/* ≤ 900px */
@media (max-width:900px) {
  html,body { overflow-x:hidden; }
  .header-nav { display:none; }
  .header-actions { display:none; }
  .burger { display:flex; }
  .logo-link { display:none; }
  .logo-link-mobile { display:flex; }
  .mobile-nav { display:block; }
  .hero-inner { grid-template-columns:1fr; padding:36px 0 32px; gap:0; }
  .hero-right { display:none; }
  .hero-h1 { font-size:52px; word-break:break-word; }
  .hero-dl-btns { flex-direction:column; }
  .hero-dl-btns .btn-dl { width:100%; }
  .dl-grid { grid-template-columns:1fr; gap:28px; }
  .tab-panel.active { grid-template-columns:repeat(3,1fr); gap:10px; }
  .bonus-cards { grid-template-columns:1fr; }
  .pros-cons { grid-template-columns:1fr; }
  .compare-table { display:block; overflow-x:auto; }
  .features-grid { grid-template-columns:repeat(2,1fr); }
}

/* ≤ 600px */
@media (max-width:600px) {
  html,body { overflow-x:hidden; }
  :root { --header-h:58px; }
  .mobile-nav { top:58px; }
  .container { padding:0 14px; }
  .hero-h1 { font-size:36px; }
  .hero-sub { font-size:14px; }
  .tab-panel.active { grid-template-columns:repeat(2,1fr); gap:8px; }
  .features-grid { grid-template-columns:1fr; }
  .section.prose.container { padding-left:14px !important; padding-right:14px !important; }
  .prose table,.review-table { display:block; overflow-x:auto; white-space:nowrap; }
  .footer-grid { grid-template-columns:1fr; gap:18px; }
  .footer-bottom { flex-direction:column; gap:10px; }
  .footer-copy { align-self:flex-start; }
}

/* ≤ 380px */
@media (max-width:380px) {
  .hero-h1 { font-size:30px; }
  .tab-btn { font-size:12px; padding:8px 10px; }
}