/* StairpongGame.com — Full Stylesheet | Mobile-first responsive */

/* 0. CSS Variables */
:root {
    --bg:#0d1117; --bg-card:#161b22; --bg-card-hover:#1c2333;
    --primary:#4ade80; --primary-dark:#22c55e;
    --secondary:#eab308; --secondary-light:#facc15;
    --text:#e6edf3; --text-muted:#8b949e; --border:#30363d;
    --danger:#f85149; --success:#4ade80;
    --font-main:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;
    --max-width:1200px; --header-h:64px;
    --radius:8px; --radius-lg:12px;
    --shadow:0 2px 8px rgba(0,0,0,.3); --shadow-lg:0 8px 24px rgba(0,0,0,.4);
    --transition:.2s ease;
}

/* 1. Reset & Base */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--header-h); -webkit-text-size-adjust:100%; overflow-x:hidden; }
body { font-family:var(--font-main); background:var(--bg); color:var(--text); line-height:1.7; font-size:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; min-height:100vh; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--primary); text-decoration:none; transition:color var(--transition); }
a:hover { color:var(--secondary-light); }
::selection { background:var(--primary); color:var(--bg); }
::-moz-selection { background:var(--primary); color:var(--bg); }
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
:focus:not(:focus-visible) { outline:none; }

/* Scrollbar */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:5px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }
* { scrollbar-width:thin; scrollbar-color:var(--border) var(--bg); }

/* 2. Skip Link */
.skip-link { position:absolute; top:-100%; left:50%; transform:translateX(-50%); background:var(--primary); color:var(--bg); padding:.5rem 1.5rem; border-radius:0 0 var(--radius) var(--radius); z-index:10000; font-weight:600; transition:top var(--transition); }
.skip-link:focus { top:0; color:var(--bg); }

/* 3. Header */
.site-header { position:sticky; top:0; z-index:1000; background:rgba(13,17,23,.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border); height:var(--header-h); will-change:transform; }
.header-inner { max-width:var(--max-width); margin:0 auto; padding:0 1.5rem; display:flex; align-items:center; justify-content:space-between; height:100%; }
.header-logo { display:flex; align-items:center; flex-shrink:0; }
.header-logo img { height:36px; width:auto; }

.nav-list { display:flex; list-style:none; gap:1.5rem; align-items:center; }
.nav-list a { color:var(--text); font-size:.9rem; font-weight:500; white-space:nowrap; transition:color var(--transition); }
.nav-list a:hover { color:var(--primary); }

.btn-play { display:inline-flex; align-items:center; gap:.5rem; background:var(--primary); color:var(--bg)!important; padding:.55rem 1.25rem; border-radius:var(--radius); font-weight:700; font-size:.9rem; text-transform:uppercase; letter-spacing:.5px; transition:background var(--transition),transform .1s ease; border:none; cursor:pointer; }
.btn-play:hover { background:var(--primary-dark); color:var(--bg)!important; transform:translateY(-1px); }

.burger { display:none; background:none; border:none; cursor:pointer; padding:.5rem; z-index:1001; }
.burger span { display:block; width:24px; height:2px; background:var(--text); margin:5px 0; transition:transform .3s ease,opacity .3s ease; border-radius:2px; }
.burger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.burger.active span:nth-child(2) { opacity:0; transform:translateX(-10px); }
.burger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

@media(max-width:768px){
    .nav-list { display:none; position:absolute; top:100%; left:0; right:0; width:100%; height:calc(100vh - var(--header-h)); background:var(--bg); flex-direction:column; padding:2rem; gap:1.25rem; z-index:999; overflow-y:auto; animation:slideDown .3s ease; }
    .nav-list.open { display:flex; }
    .nav-list a { font-size:1.1rem; padding:.5rem 0; display:block; border-bottom:1px solid var(--border); }
    .nav-list .btn-play { margin-top:.5rem; justify-content:center; padding:.75rem 1.5rem; font-size:1rem; }
    .burger { display:block; }
}
@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }

/* 4. Container & Sections */
.container { max-width:var(--max-width); margin:0 auto; padding:0 1.5rem; }
section { padding:3rem 0; }
.section-alt { background:var(--bg-card); }
.section-title { font-size:clamp(1.3rem,3vw,1.8rem); font-weight:700; margin-bottom:1.5rem; line-height:1.3; text-align:center; }
.section-title span { color:var(--primary); }

/* 5. Shared Buttons */
.btn-primary { display:inline-flex; align-items:center; gap:.5rem; background:var(--primary); color:var(--bg)!important; padding:.75rem 1.75rem; border-radius:var(--radius); font-weight:700; font-size:1rem; transition:background var(--transition),transform .1s ease,box-shadow var(--transition); border:none; cursor:pointer; text-align:center; justify-content:center; }
.btn-primary:hover { background:var(--primary-dark); color:var(--bg)!important; transform:translateY(-1px); box-shadow:0 4px 12px rgba(74,222,128,.25); }
.btn-secondary { display:inline-flex; align-items:center; gap:.5rem; background:transparent; color:var(--text)!important; border:1px solid var(--border); padding:.75rem 1.75rem; border-radius:var(--radius); font-weight:600; font-size:1rem; transition:border-color var(--transition),color var(--transition); cursor:pointer; text-align:center; justify-content:center; }
.btn-secondary:hover { border-color:var(--primary); color:var(--primary)!important; }

/* 6. Hero */
.hero { position:relative; min-height:420px; display:flex; align-items:center; padding:5rem 0 3rem; overflow:hidden; background:var(--bg); }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,17,23,.82) 0%,rgba(13,17,23,.93) 100%); z-index:1; }
.hero-inner { position:relative; z-index:2; max-width:var(--max-width); margin:0 auto; width:100%; padding:0 1.5rem; }
.hero h1 { font-size:clamp(1.6rem,4vw,2.5rem); font-weight:800; line-height:1.2; margin-bottom:1rem; text-align:center; }
.hero h1 span { color:var(--primary); }
.hero-sub { font-size:1rem; color:var(--text-muted); max-width:680px; margin:0 auto 1.5rem; line-height:1.6; text-align:center; }
.hero-badges { display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:2rem; justify-content:center; }
.hero-badge { background:var(--bg-card); border:1px solid var(--border); padding:.4rem .9rem; border-radius:6px; font-size:.85rem; white-space:nowrap; }
.hero-badge strong { color:var(--secondary); }
.hero-ctas { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; justify-content:center; }
.hero-updated { margin-top:1.5rem; font-size:.8rem; color:var(--text-muted); text-align:center; }

/* 7. Table of Contents */
.toc { border-bottom:1px solid var(--border); background:var(--bg-card); padding:1.5rem 0; }
.toc details { border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); overflow:hidden; }
.toc summary { padding:1rem 1.25rem; cursor:pointer; font-size:1rem; list-style:none; display:flex; align-items:center; justify-content:space-between; user-select:none; transition:background var(--transition); }
.toc summary:hover { background:var(--bg-card-hover); }
.toc summary::-webkit-details-marker { display:none; }
.toc summary::after { content:'+'; font-size:1.3rem; font-weight:700; color:var(--primary); transition:transform .3s ease; flex-shrink:0; margin-left:1rem; }
.toc details[open] summary::after { content:'\2212'; }
.toc-list { padding:.75rem 1.25rem 1.25rem 2.5rem; display:flex; flex-direction:column; gap:.5rem; }
.toc-list li { font-size:.95rem; line-height:1.5; }
.toc-list a { color:var(--text-muted); transition:color var(--transition),padding-left var(--transition); display:inline-block; }
.toc-list a:hover { color:var(--primary); padding-left:4px; }

/* 8. Overview */
.overview-content { max-width:var(--max-width); margin:0 auto; }
.overview-content p { margin-bottom:1.25rem; color:var(--text); line-height:1.8; }
.overview-content h3 { font-size:1.25rem; font-weight:700; margin:2rem 0 1rem; color:var(--text); }

.inline-figure { margin:2rem 0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); background:var(--bg-card); }
.inline-figure img { width:100%; height:auto; display:block; }
.inline-figure figcaption { padding:.75rem 1rem; font-size:.85rem; color:var(--text-muted); text-align:center; border-top:1px solid var(--border); }

.specs-table-wrap { overflow-x:auto; margin:1.5rem 0; border-radius:var(--radius); border:1px solid var(--border); }
.specs-table { width:100%; border-collapse:collapse; font-size:.95rem; }
.specs-table caption { padding:.75rem 1rem; text-align:left; font-weight:600; font-size:.85rem; color:var(--text-muted); background:var(--bg-card); border-bottom:1px solid var(--border); }
.specs-table th,.specs-table td { padding:.75rem 1rem; text-align:left; border-bottom:1px solid var(--border); }
.specs-table th { background:var(--bg-card); color:var(--text-muted); font-weight:600; white-space:nowrap; width:35%; }
.specs-table td { background:var(--bg); }
.specs-table tr:nth-child(even) td { background:var(--bg-card); }
.specs-table tr:last-child th,.specs-table tr:last-child td { border-bottom:none; }

.feature-list { padding-left:1.5rem; margin:1rem 0 1.5rem; display:flex; flex-direction:column; gap:.75rem; }
.feature-list li { line-height:1.7; color:var(--text); padding-left:.25rem; }
.feature-list li strong { color:var(--primary); }
.feature-list li::marker { color:var(--primary); font-weight:700; }

/* 9. Video */
.video-wrap { position:relative; width:100%; max-width:800px; margin:1.5rem auto; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); background:#000; aspect-ratio:16/9; }
.video-wrap video { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.video-note { margin-top:1rem; font-size:.85rem; color:var(--text-muted); font-style:italic; }
@supports not (aspect-ratio:16/9) { .video-wrap { padding-top:56.25%; } }

/* 10. Casino Cards */
.affiliate-note { font-size:.85rem; color:var(--text-muted); margin-bottom:2rem; padding:.75rem 1rem; border-left:3px solid var(--secondary); background:rgba(234,179,8,.05); border-radius:0 var(--radius) var(--radius) 0; }
.casino-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:1.5rem; }

.casino-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition); will-change:transform; display:flex; flex-direction:column; }
.casino-card:hover { transform:translateY(-3px); border-color:var(--primary); box-shadow:0 8px 24px rgba(74,222,128,.1); background:var(--bg-card-hover); }
.casino-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; gap:.75rem; }
.casino-logo { height:40px; width:auto; max-width:120px; object-fit:contain; }
.casino-rating { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.stars { color:var(--secondary); font-size:1rem; letter-spacing:1px; }
.rating-num { font-size:.85rem; font-weight:700; color:var(--text-muted); }
.casino-card h3 { font-size:1.15rem; font-weight:700; margin-bottom:.5rem; }
.casino-bonus { color:var(--primary); font-weight:600; font-size:.95rem; margin-bottom:1rem; padding:.5rem .75rem; background:rgba(74,222,128,.08); border-radius:6px; border:1px solid rgba(74,222,128,.15); }

.casino-pros,.casino-cons { list-style:none; margin-bottom:.75rem; font-size:.9rem; }
.casino-pros li,.casino-cons li { padding:.3rem 0 .3rem 1.5rem; position:relative; line-height:1.5; }
.casino-pros li::before { content:'\2713'; position:absolute; left:0; color:var(--success); font-weight:700; }
.casino-cons li::before { content:'\2717'; position:absolute; left:0; color:var(--danger); font-weight:700; }
.casino-cta { margin-top:auto; width:100%; text-align:center; padding:.75rem 1rem; }

/* 11. How It Works */
.steps-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; margin:2rem 0; }
.step-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; position:relative; transition:border-color var(--transition); }
.step-card:hover { border-color:var(--primary); }
.step-num { width:40px; height:40px; background:var(--primary); color:var(--bg); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; margin-bottom:1rem; flex-shrink:0; }
.step-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:.5rem; }
.step-card p { font-size:.9rem; color:var(--text-muted); line-height:1.6; }
.step-img { margin-top:1rem; border-radius:var(--radius); border:1px solid var(--border); }
.cta-text { margin-top:1.5rem; font-size:.95rem; padding:1rem; border-left:3px solid var(--primary); background:rgba(74,222,128,.05); border-radius:0 var(--radius) var(--radius) 0; }

/* 12. Gallery */
.gallery-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.5rem; }
.gallery-item { border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--bg-card); transition:border-color var(--transition),box-shadow var(--transition); }
.gallery-item:hover { border-color:var(--primary); box-shadow:0 4px 16px rgba(74,222,128,.1); }
.gallery-item img { width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .4s ease; }
.gallery-item:hover img { transform:scale(1.05); }
.gallery-item figcaption { padding:.6rem .75rem; font-size:.8rem; color:var(--text-muted); text-align:center; border-top:1px solid var(--border); }

/* 13. Comparison Table */
.table-responsive { overflow-x:auto; margin:1.5rem 0; border-radius:var(--radius); border:1px solid var(--border); -webkit-overflow-scrolling:touch; }
.comparison-table { width:100%; border-collapse:collapse; font-size:.9rem; min-width:500px; }
.comparison-table caption { padding:.75rem 1rem; text-align:left; font-weight:600; font-size:.85rem; color:var(--text-muted); background:var(--bg-card); border-bottom:1px solid var(--border); }
.comparison-table thead th { background:var(--bg-card); padding:.75rem 1rem; text-align:left; font-weight:700; color:var(--text); border-bottom:2px solid var(--border); white-space:nowrap; }
.comparison-table tbody td { padding:.75rem 1rem; border-bottom:1px solid var(--border); white-space:nowrap; }
.comparison-table tbody tr:last-child td { border-bottom:none; }
.comparison-table tbody tr:hover { background:var(--bg-card-hover); }
.highlight-row { background:rgba(74,222,128,.08)!important; border-left:3px solid var(--primary); }
.highlight-row td { color:var(--text); }

/* 14. Testimonials */
.testimonials-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; margin:1.5rem 0; }
.testimonial-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; transition:border-color var(--transition),transform var(--transition); }
.testimonial-card:hover { border-color:var(--primary); transform:translateY(-2px); }
.testimonial-header { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; flex-wrap:wrap; }
.testimonial-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--border); flex-shrink:0; }
.testimonial-header strong { display:block; font-size:.95rem; }
.testimonial-location { font-size:.8rem; color:var(--text-muted); }
.testimonial-stars { color:var(--secondary); font-size:1rem; letter-spacing:1px; margin-left:auto; }
.testimonial-card blockquote { font-size:.9rem; color:var(--text-muted); line-height:1.7; font-style:italic; border-left:3px solid var(--border); padding-left:1rem; margin:0; }
.testimonial-disclaimer { margin-top:1.5rem; font-size:.8rem; color:var(--text-muted); padding:.75rem 1rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-card); }

/* 15. Calculator */
.calculator-wrap { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; margin:1.5rem auto; max-width:600px; }
.calc-inputs { display:flex; flex-direction:column; gap:1.25rem; margin-bottom:1.5rem; }
.calc-field { display:flex; flex-direction:column; gap:.4rem; }
.calc-field label { font-weight:600; font-size:.9rem; color:var(--text); }
.calc-field input,.calc-field select { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:.7rem 1rem; color:var(--text); font-size:1rem; font-family:var(--font-main); transition:border-color var(--transition),box-shadow var(--transition); appearance:none; -webkit-appearance:none; }
.calc-field input:focus,.calc-field select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(74,222,128,.15); outline:none; }
.calc-field select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; cursor:pointer; }
.calc-field small { font-size:.75rem; color:var(--text-muted); }

.calc-results { display:flex; gap:1rem; flex-wrap:wrap; }
.calc-result-item { flex:1; min-width:120px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; text-align:center; }
.calc-label { display:block; font-size:.8rem; color:var(--text-muted); margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.5px; font-weight:600; }
.calc-value { display:block; font-size:1.5rem; font-weight:800; color:var(--text); }
.calc-profit { color:var(--primary); }
.calc-disclaimer { margin-top:1rem; font-size:.8rem; color:var(--text-muted); }

/* 16. Strategies */
.warning-box { background:rgba(248,81,73,.08); border:1px solid rgba(248,81,73,.3); border-left:4px solid var(--danger); border-radius:0 var(--radius) var(--radius) 0; padding:1rem 1.25rem; margin-bottom:2rem; font-size:.9rem; line-height:1.6; }
.warning-box strong { color:var(--danger); }

.strategy-previews { display:grid; grid-template-columns:1fr; gap:1.5rem; margin-bottom:2rem; }
.strategy-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; transition:border-color var(--transition); }
.strategy-card:hover { border-color:var(--primary); }
.strategy-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:.75rem; }
.strategy-conservative h3 { color:var(--success); }
.strategy-aggressive h3 { color:var(--secondary); }
.strategy-card p { font-size:.9rem; color:var(--text-muted); line-height:1.7; margin-bottom:1rem; }
.strategy-card ul { list-style:none; padding:0; }
.strategy-card ul li { padding:.35rem 0 .35rem 1.5rem; position:relative; font-size:.9rem; line-height:1.5; }
.strategy-card ul li::before { content:'\2192'; position:absolute; left:0; color:var(--primary); font-weight:700; }

/* 17. Expert Verdict */
.verdict-wrap { max-width:800px; margin:0 auto; }

.author-box { display:flex; align-items:center; gap:1rem; margin-bottom:2rem; padding:1.25rem; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); }
.author-avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid var(--primary); flex-shrink:0; }
.author-info { display:flex; flex-direction:column; gap:.15rem; }
.author-info strong { font-size:1.05rem; }
.author-info span { font-size:.85rem; color:var(--text-muted); }

.verdict-content p { margin-bottom:1.25rem; line-height:1.8; color:var(--text); }

.pros-cons { display:grid; grid-template-columns:1fr; gap:1.25rem; margin:2rem 0; }
.pros,.cons { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.25rem; }
.pros { border-top:3px solid var(--success); }
.cons { border-top:3px solid var(--danger); }
.pros h4 { color:var(--success); font-size:1rem; margin-bottom:.75rem; }
.cons h4 { color:var(--danger); font-size:1rem; margin-bottom:.75rem; }
.pros ul,.cons ul { list-style:none; padding:0; }
.pros li,.cons li { padding:.35rem 0 .35rem 1.5rem; position:relative; font-size:.9rem; line-height:1.5; color:var(--text-muted); }
.pros li::before { content:'\2713'; position:absolute; left:0; color:var(--success); font-weight:700; }
.cons li::before { content:'\2717'; position:absolute; left:0; color:var(--danger); font-weight:700; }

.verdict-rating { display:flex; align-items:center; gap:1.5rem; margin:2rem 0; padding:1.5rem; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); flex-wrap:wrap; }
.rating-score { font-size:3rem; font-weight:900; color:var(--primary); line-height:1; flex-shrink:0; }
.rating-score span { font-size:1.25rem; color:var(--text-muted); font-weight:600; }
.verdict-rating p { flex:1; min-width:200px; font-size:.9rem; line-height:1.6; color:var(--text-muted); margin-bottom:0; }

.verdict-audience { display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:2rem; }
.verdict-audience > div { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.25rem; }
.verdict-audience h4 { font-size:1rem; margin-bottom:.75rem; color:var(--text); }
.verdict-audience ul { list-style:none; padding:0; }
.verdict-audience li { padding:.3rem 0 .3rem 1.5rem; position:relative; font-size:.9rem; line-height:1.5; color:var(--text-muted); }
.verdict-audience li::before { content:'\2192'; position:absolute; left:0; color:var(--primary); font-weight:700; }

/* 17b. Update History */
.update-history-section { margin-top:3rem; margin-bottom:2rem; }
.update-history { max-width:800px; margin:0 auto; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.update-history summary { padding:1rem 1.25rem; cursor:pointer; font-weight:600; font-size:.95rem; color:var(--text-muted); list-style:none; display:flex; align-items:center; gap:.5rem; user-select:none; transition:background var(--transition),color var(--transition); }
.update-history summary:hover { background:var(--bg-card-hover); color:var(--text); }
.update-history summary::before { content:'\1F4C5'; margin-right:.25rem; }
.update-history summary::after { content:'+'; margin-left:auto; font-size:1.2rem; font-weight:700; color:var(--primary); transition:transform var(--transition); }
.update-history[open] summary::after { content:'\2212'; }
.update-history ul { padding:1rem 1.25rem; margin:0; list-style:none; border-top:1px solid var(--border); }
.update-history li { padding:.5rem 0; font-size:.875rem; color:var(--text-muted); line-height:1.5; border-bottom:1px solid rgba(255,255,255,.05); }
.update-history li:last-child { border-bottom:none; padding-bottom:0; }
.update-history time { font-weight:600; color:var(--primary); margin-right:.25rem; }

/* 18. FAQ Accordion */
.faq-list { display:flex; flex-direction:column; gap:.75rem; margin-top:1.5rem; }
.faq-item { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color var(--transition); }
.faq-item:hover { border-color:var(--text-muted); }
.faq-item[open] { border-color:var(--primary); }

.faq-item summary { padding:1rem 1.25rem; cursor:pointer; font-weight:600; font-size:.95rem; line-height:1.4; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; user-select:none; transition:background var(--transition),color var(--transition); }
.faq-item summary:hover { background:var(--bg-card-hover); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::marker { display:none; content:''; }
.faq-item summary::after { content:'+'; font-size:1.4rem; font-weight:700; color:var(--primary); flex-shrink:0; width:24px; text-align:center; transition:transform .3s ease; }
.faq-item[open] summary::after { content:'\2212'; }
.faq-item[open] summary { color:var(--primary); border-bottom:1px solid var(--border); }

.faq-answer { padding:1rem 1.25rem; animation:fadeIn .3s ease; }
.faq-answer p { font-size:.9rem; color:var(--text-muted); line-height:1.7; margin-bottom:.75rem; }
.faq-answer p:last-child { margin-bottom:0; }
@keyframes fadeIn { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} }

/* 19. Footer */
.site-footer { background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg) 100%); border-top:1px solid var(--border); padding:3rem 0 1.5rem; }
.footer-grid { display:grid; grid-template-columns:1fr; gap:2rem; margin-bottom:2.5rem; }
.footer-col { min-width:0; }
.footer-logo { display:inline-block; margin-bottom:1rem; }
.footer-logo img { height:36px; width:auto; }
.footer-col p { font-size:.85rem; color:var(--text-muted); line-height:1.7; }
.footer-col h4 { font-size:.95rem; font-weight:700; margin-bottom:.75rem; color:var(--text); }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:.4rem; }
.footer-col li a { color:var(--text-muted); font-size:.85rem; transition:color var(--transition),padding-left var(--transition); }
.footer-col li a:hover { color:var(--primary); padding-left:3px; }

.trust-badges { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.5rem; padding:1.5rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:1.5rem; }
.trust-badges img { height:40px; width:auto; opacity:.7; transition:opacity var(--transition); filter:grayscale(30%); }
.trust-badges img:hover { opacity:1; filter:grayscale(0%); }

.footer-disclaimer { background:rgba(248,81,73,.05); border:1px solid rgba(248,81,73,.2); border-radius:var(--radius); padding:1rem 1.25rem; margin-bottom:1.5rem; }
.footer-disclaimer p { font-size:.8rem; color:var(--text-muted); line-height:1.7; }
.footer-disclaimer strong { color:var(--danger); }
.footer-disclaimer a { color:var(--primary); }
.footer-disclaimer a:hover { color:var(--secondary-light); }

.footer-copyright { text-align:center; }
.footer-copyright p { font-size:.8rem; color:var(--text-muted); }

/* 20. Mobile Sticky CTA */
.mobile-cta-bar { position:fixed; bottom:0; left:0; right:0; z-index:900; background:rgba(13,17,23,.97); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--border); padding:.75rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; transform:translateY(100%); transition:transform .3s ease; will-change:transform; }
.mobile-cta-bar.visible { transform:translateY(0); }
.mobile-cta-bar span { font-size:.85rem; font-weight:600; color:var(--text); }
.mobile-cta-bar .btn-play { padding:.5rem 1.25rem; font-size:.85rem; flex-shrink:0; }

/* 21. Cookie Consent */
.cookie-banner { position:fixed; bottom:0; left:0; right:0; z-index:10000; background:var(--bg-card); border-top:1px solid var(--border); padding:1rem 0; transform:translateY(100%); transition:transform .4s ease; will-change:transform; }
.cookie-banner.visible { transform:translateY(0); }
.cookie-inner { max-width:var(--max-width); margin:0 auto; padding:0 1.5rem; display:flex; flex-direction:column; gap:.75rem; align-items:flex-start; }
.cookie-inner p { font-size:.85rem; color:var(--text-muted); line-height:1.5; }
.cookie-buttons { display:flex; gap:.75rem; flex-wrap:wrap; }
.btn-cookie-accept { background:var(--primary); color:var(--bg); border:none; padding:.5rem 1.25rem; border-radius:var(--radius); font-weight:700; font-size:.85rem; cursor:pointer; font-family:var(--font-main); transition:background var(--transition); }
.btn-cookie-accept:hover { background:var(--primary-dark); }
.btn-cookie-reject { background:transparent; color:var(--text-muted); border:1px solid var(--border); padding:.5rem 1.25rem; border-radius:var(--radius); font-weight:600; font-size:.85rem; cursor:pointer; font-family:var(--font-main); transition:border-color var(--transition),color var(--transition); }
.btn-cookie-reject:hover { border-color:var(--text-muted); color:var(--text); }

/* 22. Responsive — Tablet (768px+) */
@media(min-width:768px){
    section { padding:4rem 0; }
    .hero { min-height:520px; padding:6rem 0 4rem; }
    .hero-sub { font-size:1.1rem; }
    .casino-grid { grid-template-columns:repeat(2,1fr); }
    .steps-grid { grid-template-columns:repeat(2,1fr); }
    .gallery-grid { grid-template-columns:repeat(3,1fr); }
    .testimonials-grid { grid-template-columns:repeat(2,1fr); }
    .calc-inputs { flex-direction:row; }
    .calc-field { flex:1; }
    .strategy-previews { grid-template-columns:repeat(2,1fr); }
    .pros-cons { grid-template-columns:repeat(2,1fr); }
    .verdict-audience { grid-template-columns:repeat(2,1fr); }
    .footer-grid { grid-template-columns:repeat(2,1fr); }
    .cookie-inner { flex-direction:row; align-items:center; justify-content:space-between; }
    .cookie-buttons { flex-shrink:0; }
}

/* 23. Responsive — Desktop (1024px+) */
@media(min-width:1024px){
    .casino-grid { grid-template-columns:repeat(3,1fr); }
    .steps-grid { grid-template-columns:repeat(3,1fr); }
    .testimonials-grid { grid-template-columns:repeat(3,1fr); }
    .footer-grid { grid-template-columns:1.5fr 1fr 1fr 1fr; }
    .mobile-cta-bar { display:none; }
    .author-avatar { width:80px; height:80px; }
}

/* 24. Large desktop (1280px+) */

/* 25. Print */
@media print {
    *,*::before,*::after { background:transparent!important; color:#000!important; box-shadow:none!important; }
    .site-header,.mobile-cta-bar,.cookie-banner,.burger,.btn-play,.btn-primary,.btn-secondary,.casino-cta { display:none!important; }
    body { font-size:12pt; line-height:1.5; }
    a { text-decoration:underline; }
    a[href]::after { content:" (" attr(href) ")"; font-size:.8em; }
    .container { max-width:100%; padding:0; }
    img { max-width:100%; page-break-inside:avoid; }
    h1,h2,h3 { page-break-after:avoid; }
}

/* 26. Reduced Motion */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}