/* 1. FONTS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* 2. RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img,svg{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}

/* 3. ROOT TOKENS */
:root{
  --bg-base:#0e0b1e;
  --bg-card:#191534;
  --accent:#6c47ff;
  --highlight:#ffc93c;
  --text:#f4f2ff;
  --muted:#a9a3c9;
  --border:#2a2450;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --radius:14px;
  --radius-sm:9px;
  --transition:.22s ease;
  --maxw:1120px;
}

/* 4. HTML/BODY + SCROLLBAR */
html{scroll-behavior:smooth}
body{background:var(--bg-base);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--bg-base)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* 5. TYPE SCALE */
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.18;font-weight:700;letter-spacing:-.02em}
h1{font-size:2.05rem;margin-bottom:.5em}
h2{font-size:1.55rem;margin:1.7em 0 .6em}
h3{font-size:1.18rem;margin:1.4em 0 .45em}
h4{font-size:1.02rem;margin:1.1em 0 .35em}
p{margin-bottom:1.05em;color:var(--text)}
strong{color:#fff;font-weight:700}
a.q4z_link{color:var(--highlight);font-weight:600}
a.q4z_link:hover{text-decoration:underline}
.q4z_muted{color:var(--muted)}
.q4z_lead{font-size:1.12rem;color:var(--muted);margin-bottom:1.3em}

/* 6. CONTAINER */
.q4z_container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 18px}
.q4z_section{padding:34px 0}
main .q4z_container>h2:first-child{margin-top:.2em}

/* 7. BUTTONS */
.q4z_btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--font-display);font-weight:700;border-radius:var(--radius-sm);transition:transform var(--transition),box-shadow var(--transition),background var(--transition);text-align:center;min-height:44px;padding:12px 22px;font-size:1rem;line-height:1.1}
.q4z_btn:active{transform:translateY(1px)}
.q4z_btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 22px -8px var(--accent)}
.q4z_btn-primary:hover{background:#5836e0;box-shadow:0 12px 30px -8px var(--accent)}
.q4z_btn-highlight{background:var(--highlight);color:#231a05;box-shadow:0 8px 22px -8px rgba(255,201,60,.6)}
.q4z_btn-highlight:hover{background:#ffd65e}
.q4z_btn-outline{background:transparent;color:var(--text);border:1.6px solid var(--border)}
.q4z_btn-outline:hover{border-color:var(--accent);color:#fff}
.q4z_btn-ghost{background:rgba(255,255,255,.05);color:var(--text)}
.q4z_btn-ghost:hover{background:rgba(255,255,255,.1)}
.q4z_btn-lg{padding:16px 30px;font-size:1.1rem;min-height:52px}
.q4z_btn-sm{padding:9px 16px;font-size:.9rem;min-height:40px}
.q4z_btn-full{width:100%}

/* 8. NAV + MOBILE NAV */
.q4z_nav{position:sticky;top:0;z-index:50;background:rgba(14,11,30,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.q4z_nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.q4z_nav-logo img{height:34px;width:auto}
.q4z_nav-links{display:none}
.q4z_nav-cta{display:none}
.q4z_nav-toggle{display:flex;flex-direction:column;gap:5px;padding:10px;min-height:44px;min-width:44px;align-items:center;justify-content:center}
.q4z_nav-toggle span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:var(--transition)}
.q4z_mobile-nav{display:none;flex-direction:column;gap:2px;padding:10px 0 18px;border-top:1px solid var(--border)}
.q4z_mobile-nav.open{display:flex}
.q4z_mobile-nav a{padding:12px 8px;border-radius:var(--radius-sm);color:var(--muted);font-weight:500}
.q4z_mobile-nav a:hover{background:var(--bg-card);color:var(--text)}
.q4z_mobile-nav .q4z_btn{margin-top:8px}

/* 9. TICKER */
.q4z_ticker{background:var(--bg-card);border-bottom:1px solid var(--border);overflow:hidden;white-space:nowrap}
.q4z_ticker-track{display:inline-block;padding:8px 0;animation:q4z-scroll 26s linear infinite;font-size:.86rem;color:var(--muted)}
.q4z_ticker-track span{margin:0 26px}
.q4z_ticker-track b{color:var(--highlight)}

/* 10. HERO (Layout B — centred) */
.q4z_hero{position:relative;text-align:center;padding:52px 0 40px;background:radial-gradient(1000px 500px at 50% -10%,rgba(108,71,255,.28),transparent 70%),var(--bg-base)}
.q4z_hero-inner{max-width:760px;margin:0 auto}
.q4z_hero .q4z_eyebrow{display:inline-block;background:var(--bg-card);border:1px solid var(--border);color:var(--highlight);font-weight:600;font-size:.82rem;padding:6px 14px;border-radius:999px;margin-bottom:18px}
.q4z_hero h1{font-size:2.3rem}
.q4z_hero-offer{font-family:var(--font-display);font-size:1.35rem;color:var(--highlight);font-weight:700;margin:6px 0 14px}
.q4z_hero-cta{display:flex;flex-direction:column;gap:12px;max-width:340px;margin:22px auto 0}
.q4z_hero-note{font-size:.82rem;color:var(--muted);margin-top:14px}

/* 11. TRUST BAR */
.q4z_trust{background:var(--bg-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.q4z_trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:22px 0}
.q4z_trust-item{text-align:center}
.q4z_trust-item b{display:block;font-family:var(--font-display);font-size:1.25rem;color:var(--highlight)}
.q4z_trust-item span{font-size:.8rem;color:var(--muted)}

/* 12. CONTENT SECTIONS */
.q4z_card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.q4z_card+.q4z_card{margin-top:16px}
.q4z_grid{display:grid;grid-template-columns:1fr;gap:16px}
.q4z_prose h2{scroll-margin-top:80px}
.q4z_callout{background:linear-gradient(135deg,rgba(108,71,255,.14),rgba(255,201,60,.06));border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius);padding:18px 20px;margin:20px 0}
.q4z_callout b{color:var(--highlight)}
.q4z_code-box{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg-base);border:1.5px dashed var(--highlight);border-radius:var(--radius-sm);padding:14px 18px;margin:16px 0;flex-wrap:wrap}
.q4z_code-box code{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--highlight);letter-spacing:1px}

/* tables */
.q4z_table-wrap{overflow-x:auto;margin:18px 0;border:1px solid var(--border);border-radius:var(--radius)}
table.q4z_table{width:100%;border-collapse:collapse;min-width:460px;font-size:.94rem}
.q4z_table th,.q4z_table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border)}
.q4z_table th{background:rgba(108,71,255,.12);font-family:var(--font-display);font-weight:600;color:#fff}
.q4z_table tr:last-child td{border-bottom:none}
.q4z_table td:first-child{color:var(--muted)}

/* lists */
.q4z_list{margin:0 0 1.1em;padding-left:0}
.q4z_list li{position:relative;padding-left:28px;margin-bottom:10px}
.q4z_list li::before{content:"";position:absolute;left:4px;top:9px;width:9px;height:9px;border-radius:2px;background:var(--accent)}
.q4z_check li::before{content:"\2713";background:none;color:var(--highlight);font-weight:700;top:0;left:0;font-size:1rem}

/* steps */
.q4z_steps{counter-reset:q4z;display:grid;gap:14px;margin:18px 0}
.q4z_step{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 16px 16px 58px;counter-increment:q4z}
.q4z_step::before{content:counter(q4z);position:absolute;left:14px;top:16px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:700;display:flex;align-items:center;justify-content:center}
.q4z_step h4{margin:0 0 4px}
.q4z_step p{margin:0;font-size:.95rem;color:var(--muted)}

/* games grid */
.q4z_games{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0}
.q4z_game{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;transition:transform var(--transition),border-color var(--transition)}
.q4z_game:hover{transform:translateY(-3px);border-color:var(--accent)}
.q4z_game img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.q4z_game span{display:block;padding:9px 10px;font-size:.82rem;font-weight:600}

/* pill row */
.q4z_pills{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.q4z_pill{background:var(--bg-card);border:1px solid var(--border);border-radius:999px;padding:7px 14px;font-size:.85rem;color:var(--muted)}
.q4z_pill b{color:var(--text)}

/* 13. FAQ ACCORDION */
.q4z_faq{margin:18px 0}
.q4z_faq-item{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;background:var(--bg-card);overflow:hidden}
.q4z_faq-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;text-align:left;font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--text);min-height:44px}
.q4z_faq-btn::after{content:"+";font-size:1.4rem;color:var(--highlight);flex-shrink:0;transition:var(--transition)}
.q4z_faq-item.open .q4z_faq-btn::after{transform:rotate(45deg)}
.q4z_faq-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.q4z_faq-item.open .q4z_faq-body{max-height:600px}
.q4z_faq-body p{padding:0 18px 16px;margin:0;color:var(--muted)}

/* 14. CTA BAND */
.q4z_ctaband{text-align:center;background:linear-gradient(135deg,rgba(108,71,255,.2),rgba(255,201,60,.08));border:1px solid var(--border);border-radius:var(--radius);padding:34px 20px;margin:30px 0}
.q4z_ctaband h2{margin-top:0}
.q4z_ctaband .q4z_btn{margin-top:8px}

/* breadcrumb */
.q4z_crumb{font-size:.82rem;color:var(--muted);padding:14px 0 0}
.q4z_crumb a:hover{color:var(--highlight)}
.q4z_crumb span{color:var(--text)}

/* 15. FOOTER */
.q4z_footer{background:var(--bg-card);border-top:1px solid var(--border);padding:36px 0 96px;margin-top:30px;font-size:.9rem}
.q4z_footer-grid{display:grid;grid-template-columns:1fr;gap:26px}
.q4z_footer h4{font-family:var(--font-display);color:#fff;margin:0 0 12px;font-size:.95rem}
.q4z_footer a{color:var(--muted);display:block;padding:5px 0}
.q4z_footer a:hover{color:var(--highlight)}
.q4z_footer-logo img{height:32px;margin-bottom:12px}
.q4z_rg{display:flex;align-items:center;gap:10px;background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;margin:18px 0;font-size:.82rem;color:var(--muted)}
.q4z_rg b{color:var(--highlight)}
.q4z_disclosure{border-top:1px solid var(--border);margin-top:24px;padding-top:18px;color:var(--muted);font-size:.82rem}
.q4z_18{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:2px solid var(--highlight);border-radius:50%;color:var(--highlight);font-weight:700;font-size:.72rem;flex-shrink:0}

/* 16. STICKY MOBILE CTA */
.q4z_sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(25,21,52,.97);backdrop-filter:blur(8px);border-top:1px solid var(--border);padding:10px 14px;display:flex;gap:10px;align-items:center}
.q4z_sticky .q4z_btn{flex:1}
.q4z_sticky small{display:none}

/* 17. ANIMATIONS */
@keyframes q4z-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes q4z-fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.q4z_animate{opacity:0}
.q4z_animate.q4z_visible{animation:q4z-fade .6s ease forwards}

/* 18. RESPONSIVE */
@media(min-width:480px){
  .q4z_hero-cta{flex-direction:row;justify-content:center;max-width:none}
  .q4z_trust-grid{grid-template-columns:repeat(4,1fr)}
  .q4z_games{grid-template-columns:repeat(3,1fr)}
  .q4z_sticky small{display:block;font-size:.74rem;color:var(--muted);flex:1}
  .q4z_sticky .q4z_btn{flex:0 0 auto}
}
@media(min-width:768px){
  h1{font-size:2.6rem}
  .q4z_hero h1{font-size:3.1rem}
  h2{font-size:1.95rem}
  .q4z_nav-toggle{display:none}
  .q4z_mobile-nav{display:none!important}
  .q4z_nav-links{display:flex;gap:4px;align-items:center}
  .q4z_nav-links a{padding:9px 12px;border-radius:var(--radius-sm);color:var(--muted);font-size:.92rem;font-weight:500;transition:var(--transition)}
  .q4z_nav-links a:hover{color:var(--text);background:var(--bg-card)}
  .q4z_nav-cta{display:inline-flex}
  .q4z_sticky{display:none}
  .q4z_footer{padding-bottom:36px}
  .q4z_footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}
  .q4z_games{grid-template-columns:repeat(4,1fr)}
  .q4z_grid-2{grid-template-columns:1fr 1fr}
}
@media(min-width:1024px){
  .q4z_section{padding:44px 0}
  .q4z_hero{padding:74px 0 56px}
  .q4z_hero h1{font-size:3.5rem}
  .q4z_grid-3{grid-template-columns:repeat(3,1fr)}
}