:root{--bg:#0a0a0b;--fg:#140a0a;--text:#0f172a;--mut:#94a3b8;--pri:#f59e0b;--pri-600:#d97706;--card:#ffffff;--border:#e5e7eb;--red-900:#3b0d0d;--red-700:#7a0b16;--red-500:#ef4444}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#0b1220;background:#0b0f19;-webkit-font-smoothing:antialiased;}

.container{max-width:960px;margin:0 auto;padding:20px 16px}

.topbar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:linear-gradient(180deg,#0b0f19,#0a0a0b);border-bottom:1px solid rgba(255,255,255,.06);color:#e2e8f0}
.brand{display:flex;align-items:center;gap:8px;font-weight:600}
.brand a{color:inherit;text-decoration:none}
.brand .icon{display:inline-block}
.rg{font-size:12px;color:#94a3b8}

/* top banner */
.banner{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;padding:10px 0;color:#e2e8f0}
.banner .note{font-size:14px;color:#cbd5e1}
.banner .download{padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:700;background-image:linear-gradient(180deg,#fde68a,#f59e0b);color:#1f2937;border:1px solid rgba(0,0,0,.15);box-shadow:0 6px 14px rgba(245,158,11,.35)}
.banner .download:hover{filter:brightness(.98)}

.hero{padding-top:12px;position:relative;background:radial-gradient(1200px 380px at 50% -40%,rgba(239,68,68,.35),transparent),radial-gradient(700px 300px at 10% 20%,rgba(127,29,29,.35),transparent)}
.hero h1{font-size:26px;line-height:1.2;margin:0 0 8px;color:#e2e8f0}
.hero .sub{color:#cbd5e1;margin:0 0 12px}
.plane-wrap{position:relative;margin-top:8px}
.plane-wrap .plane-big{width:min(560px,92vw);height:auto;filter:drop-shadow(0 20px 40px rgba(239,68,68,.35))}
.hero .glow{position:absolute;inset:auto;left:50%;transform:translateX(-50%);bottom:-10px;width:70%;height:18px;background:radial-gradient(closest-side,rgba(245,158,11,.55),rgba(0,0,0,0));border-radius:50%}

/* hero headline like poster */
.hero-title{margin-top:8px;text-transform:uppercase;color:#fde68a;letter-spacing:.8px;text-shadow:0 2px 0 #7a0b16,0 6px 16px rgba(245,158,11,.35)}
.hero-title .line{display:block;font-weight:900}
.hero-title .line.small{font-size:18px;color:#fde68a}
.hero-title .giant{font-size:44px;line-height:1;color:#fff;}
.giant-number{font-size:64px;line-height:1;background:linear-gradient(180deg,#fff2b8,#ffd166,#f59e0b,#b45309);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 10px 28px rgba(245,158,11,.35)}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}

.btn{padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.08);text-decoration:none;display:inline-block;color:#0f172a;background:#fff;transition:background .2s,border-color .2s,transform .05s;touch-action:manipulation}
.btn:active{transform:translateY(1px)}
.btn.primary{background-image:linear-gradient(180deg,#fde68a,#f59e0b);color:#1f2937;border-color:rgba(0,0,0,.1);box-shadow:0 10px 24px rgba(245,158,11,.35);font-weight:800;text-transform:uppercase;letter-spacing:.3px}
.btn.primary:hover{filter:brightness(.98)}
.btn.ghost{background:#fff}

/* BET button style */
.bet-btn{display:inline-block;margin-top:10px;padding:14px 28px;border-radius:999px;background:radial-gradient(120% 120% at 50% 20%,#ffd166,#f59e0b 60%,#b45309 100%);color:#111827;font-weight:900;letter-spacing:1px;border:1px solid rgba(0,0,0,.2);box-shadow:0 14px 30px rgba(239,68,68,.35), inset 0 2px 4px rgba(255,255,255,.35);text-decoration:none}
.bet-btn:active{transform:translateY(1px)}

.features{display:grid;grid-template-columns:1fr;gap:12px;padding:8px 0}
.card{padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.card h3{margin:0;font-size:16px}
.card p{margin:4px 0 0;color:#334155}

.how{padding:12px 0}
.how h2{margin:0 0 10px;font-size:20px}
.how ol{margin:0 0 10px 20px}
.tips h3{margin:12px 0 6px;font-size:16px}
.tips ul{margin:0 0 0 18px;color:#334155}

.faq{padding:8px 0}
.faq h2{font-size:20px;margin:0 0 10px}
.faq details{border:1px solid var(--border);border-radius:12px;background:#fff;padding:10px 12px;margin:8px 0}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin:8px 0 0;color:#334155}

/* offer strip */
.offer-strip{margin:16px 0;padding:10px 12px;border-radius:12px;background:linear-gradient(180deg,rgba(127,29,29,.45),rgba(0,0,0,.35));color:#f8fafc;border:1px solid rgba(255,255,255,.08)}
.offer-strip .row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.offer-text{font-weight:600}
.offer-btn{padding:12px 16px;border-radius:999px;background-image:linear-gradient(180deg,#fde68a,#f59e0b);color:#111827;text-decoration:none;font-weight:800;border:1px solid rgba(0,0,0,.2);box-shadow:0 8px 20px rgba(245,158,11,.35)}
.small-note{display:block;margin-top:6px;color:#94a3b8;font-size:12px}

/* reviews */
.reviews{padding:10px 0;display:grid;grid-template-columns:1fr;gap:12px}
.review-card{background:linear-gradient(180deg,#140a0a,#0b0f19);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px;color:#e5e7eb;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.review-head{display:flex;align-items:center;gap:10px}
.avatar{width:56px;height:56px;border-radius:50%;background:#1f2937;display:inline-flex;align-items:center;justify-content:center}
.stars{margin-top:6px;color:#fbbf24;letter-spacing:2px}
.review-card p{margin:8px 0 0;color:#cbd5e1}

/* brand row */
.brands{margin:10px 0;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand-pill{flex:0 0 auto;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.06);color:#e5e7eb;border:1px solid rgba(255,255,255,.08);font-weight:700}
.tagline{color:#e5e7eb;text-align:center;margin:12px 0}

/* poster one-image layout */
.poster-wrap{position:relative;max-width:750px;margin:0 auto}
.poster-img{width:100%;height:auto;display:block}
.hotspot{position:absolute;display:block;z-index:10;text-indent:-9999px;overflow:hidden;border-radius:14px;cursor:pointer}
.hotspot-full{position:fixed;left:0;top:0;right:0;bottom:0;width:auto;height:auto;border-radius:0;z-index:100}
.hotspot:focus{outline:3px solid #f59e0b;outline-offset:2px}

.footer{padding:16px;border-top:1px solid var(--border);color:#475569;background:#fff}
.footer nav a{color:inherit}

.sticky-cta{position:fixed;left:16px;right:16px;bottom:16px;padding:14px;text-align:center;background-image:linear-gradient(180deg,#fde68a,#f59e0b);color:#1f2937;border-radius:14px;text-decoration:none;z-index:40;box-shadow:0 10px 24px rgba(245,158,11,.35);font-weight:800}
.sticky-cta:hover{filter:brightness(.98)}
@supports(padding:max(0px)){.sticky-cta{bottom:calc(16px + env(safe-area-inset-bottom))}}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50}
.overlay.hidden{display:none}
.modal{background:#fff;padding:20px;border-radius:14px;width:min(520px,92vw);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.modal .row{display:flex;gap:8px;margin-top:10px}

/* decorative graph */
.graph{height:96px;margin-top:12px;background:linear-gradient(180deg,rgba(245,158,11,.08),rgba(245,158,11,.02));position:relative;overflow:hidden;border-radius:10px;border:1px solid var(--border)}
.graph:before{content:"";position:absolute;left:-15%;top:60%;width:130%;height:2px;background:var(--pri);animation:rise 3.2s infinite ease-in}
.graph-mark{position:absolute;right:6px;top:6px;width:72px;height:auto;opacity:.7}
@keyframes rise{0%{transform:translateY(0) scaleX(.25)}60%{transform:translateY(-46px) scaleX(1)}100%{transform:translateY(42px) scaleX(.12)}}

/* utilities */
.disclaimer{display:block;color:#64748b;margin-top:10px}
.icon{vertical-align:middle}

.gold-text{background:linear-gradient(180deg,#ffe082,#f59e0b,#b45309);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 6px 18px rgba(245,158,11,.25)}
.big-num{font-size:44px;line-height:1;margin:12px 0 6px}

/* responsive */
@media (min-width:720px){
  .hero h1{font-size:32px}
  .features{grid-template-columns:repeat(3,1fr)}
}

/* a11y: reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}