:root{--bg:#0b0b12;--fg:#e9e9ef;--muted:#9aa0a6;--primary:#00e0ff;--accent:#ff3ed1;}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Arial}
a{color:var(--primary);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid #1a1a22}
.header img{height:34px}
.badge{display:inline-block;background:#141420;padding:6px 12px;border:1px solid #232335;border-radius:999px;color:var(--muted);font-size:12px;margin-right:8px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center;padding:28px 0}
.hero h1{font-size:36px;margin:0 0 10px}
.hero p{color:var(--muted);margin:0 0 16px}
.btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(90deg,var(--primary),var(--accent));color:#000;font-weight:800;border:none;border-radius:12px;padding:14px 18px;cursor:pointer}
.btn.secondary{background:#181825;color:var(--fg);border:1px solid #2a2a3a}
.hero-card{background:#101018;border:1px solid #222236;border-radius:16px;padding:18px}
.section{padding:10px 0 28px}
.section h2{font-size:22px;margin:0 0 12px}
.small{font-size:12px;color:var(--muted)}

/* Carousel */
.carousel-wrap{position:relative}
.carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.carousel::-webkit-scrollbar{height:8px}
.carousel::-webkit-scrollbar-thumb{background:#2b2b38;border-radius:99px}
.card-img{min-width:260px;max-width:260px;height:520px;background:#0e0e18;border:1px solid #222236;border-radius:18px;overflow:hidden;scroll-snap-align:start}
.card-img img{width:100%;height:100%;object-fit:cover;display:block}
.nav{position:absolute;inset:0;pointer-events:none}
.nav button{pointer-events:auto;position:absolute;top:45%;transform:translateY(-50%);background:#0f0f19aa;border:1px solid #2a2a3a;color:#fff;width:44px;height:44px;border-radius:12px;cursor:pointer}
.nav .prev{left:-10px} .nav .next{right:-10px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.review{background:#101018;border:1px solid #222236;border-radius:12px;padding:14px}
.footer{padding:24px;border-top:1px solid #1a1a22;color:var(--muted);font-size:13px;text-align:center}
@media (max-width:900px){.hero{grid-template-columns:1fr}.card-img{min-width:72vw;max-width:72vw;height:68vw}}


/* v5 growth goodies */
.kpi-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.kpi{background:#10101a;border:1px solid #232335;border-radius:14px;padding:10px 12px;color:var(--muted);font-size:13px}
.kpi b{color:var(--fg)}
.floating-cta{position:fixed;left:16px;right:16px;bottom:14px;z-index:50;display:none}
.floating-cta .btn{width:100%;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.floating-cta.show{display:block}
.wheel-card{background:linear-gradient(180deg,#0f0f1b,#0b0b12);border:1px solid #232335;border-radius:16px;padding:16px}
.wheel-wrap{display:grid;grid-template-columns:1fr;gap:12px;align-items:center}
.wheel-ui{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.wheel-ui .btn{min-width:180px}
#wheelCanvas{width:100%;max-width:360px;aspect-ratio:1;border-radius:999px;border:1px solid #232335;background:#0f0f18}
.wheel-result{font-size:14px;color:var(--muted)}
.wheel-result b{color:var(--fg)}
.counter-pill{display:inline-flex;gap:8px;align-items:center}
.pulse{width:8px;height:8px;border-radius:999px;background:#18ff7a;box-shadow:0 0 0 rgba(24,255,122,.6);animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(24,255,122,.55)}70%{box-shadow:0 0 0 10px rgba(24,255,122,0)}100%{box-shadow:0 0 0 0 rgba(24,255,122,0)}}