/* Math IQ Booster Landing — modern, sleek, animated */
:root{
  --brand:#4E342E;          /* Primary */
  --brand-600:#3E2924;
  --brand-700:#2F201C;
  --text:#1B1B1B;
  --muted:#666;
  --bg:#FAF8F6;
  --card:#FFFFFF;
  --accent:#FFB74D;         /* warm accent for highlights */
  --success:#2E7D32;
  --ring: 0 0 0 2px rgba(78,52,46,.15);
}

/* Dark theme */
:root.dark{
  --bg:#14110F;
  --card:#1C1816;
  --text:#F2ECE9;
  --muted:#B8ADA8;
  --brand:#E0C3B2;
  --brand-600:#D4B4A0;
  --brand-700:#C39E88;
  --accent:#FFCC80;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(78,52,46,.10), transparent 60%), var(--bg);
  color:var(--text); line-height:1.6;
}

img{max-width:100%; display:block}
.container{width:min(1120px, 92vw); margin-inline:auto}
.section{padding:80px 0; scroll-margin-top:84px}
.eyebrow{letter-spacing:.12em; text-transform:uppercase; color:var(--brand); font-weight:700; font-size:.78rem}
.sub{color:var(--muted)}
.muted{color:var(--muted)}

/* Header */
.site-header{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(120%) blur(10px); border-bottom:1px solid rgba(78,52,46,.08)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800}
.logo{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-weight:900; color:#fff; background:linear-gradient(145deg,var(--brand),var(--brand-600)); box-shadow:0 6px 16px rgba(78,52,46,.3)}
.brand-name{font-weight:800}
.nav{display:flex; gap:24px}
.nav a{color:var(--text); text-decoration:none; font-weight:600; opacity:.86}
/* No underline for any links */
a{ text-decoration: none; color: inherit; }
.nav a:hover{opacity:1}
.actions{display:flex; gap:12px; align-items:center}

/* Buttons */
.btn{appearance:none; border:none; outline:none; cursor:pointer; border-radius:12px; padding:12px 18px; font-weight:700; transition:.25s ease; box-shadow:var(--ring)}
.btn-primary{background:linear-gradient(160deg,var(--brand),var(--brand-600)); color:#fff}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 20px rgba(78,52,46,.28)}
.btn-ghost{background:transparent; color:var(--text); border:1px solid rgba(78,52,46,.15)}
.btn-ghost:hover{background:rgba(78,52,46,.06)}

/* Skip link */
.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; padding:12px 16px; background:#000; color:#fff; border-radius:8px; z-index:100}

/* Hero */
.hero{position:relative; overflow:hidden; padding:110px 0 80px}
#heroCanvas{position:absolute; inset:0; width:100%; height:100%}
.hero-grid{display:grid; grid-template-columns:1fr auto; align-items:center; gap:48px}
.hero-device{justify-self:end}
.hero .badge{display:inline-block; padding:8px 12px; border-radius:999px; background:rgba(78,52,46,.08); color:var(--brand-700); font-weight:700; font-size:.85rem}
.hero h1{font-size:clamp(2.2rem, 4vw + .6rem, 3.6rem); line-height:1.08; margin:14px 0 10px; letter-spacing:-.02em}
.lead{font-size:1.1rem; color:var(--muted); margin:0 0 18px}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-highlights{display:grid; gap:8px; margin:18px 0 0; padding:0; list-style:none}
.hero-highlights li{position:relative; padding-left:24px}
.hero-highlights li::before{content:'✔'; position:absolute; left:0; color:var(--success)}

/* Device mock */
.phone-frame{width:min(340px, 70vw); aspect-ratio:9/19.5; background:linear-gradient(180deg,#222,#111); border-radius:28px; padding:8px; box-shadow:0 30px 80px rgba(0,0,0,.35); position:relative}
.phone-notch{position:absolute; top:8px; left:50%; transform:translateX(-50%); width:40%; height:14px; background:#0b0b0b; border-radius:0 0 12px 12px}
.phone-screen{position:relative; width:100%; height:100%; border-radius:22px; overflow:hidden; background:radial-gradient(120% 80% at 50% 0%, #2a1f1b, #140f0d)}
.screen-img{width:100%; height:100%; object-fit:cover; display:block; padding:0px;}
.screen-layer{position:absolute; inset:0}
.layer-grid{background:linear-gradient(transparent 95%, rgba(255,255,255,.06) 95%), linear-gradient(90deg, transparent 95%, rgba(255,255,255,.06) 95%); background-size: 16px 16px}
.layer-numbers{display:grid; place-items:center; font-weight:900; font-size:120px; color:rgba(255,255,255,.08); animation: drift 10s ease-in-out infinite}
.layer-particles{pointer-events:none}
.screen-footer{position:absolute; bottom:0; left:0; right:0; padding:10px 14px; display:flex; justify-content:center; gap:18px; color:#fff; background:linear-gradient(180deg, transparent, rgba(0,0,0,.45))}

@keyframes drift{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
.caption{color:var(--muted); margin-top:12px}

/* Trust cards */
/* Gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.shot{position:relative; display:block; border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.08); transform:translateY(0); transition:transform .25s ease, box-shadow .25s ease}
.shot img{width:100%; height:100%; object-fit:cover; display:block}
.shot::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.18)); opacity:0; transition:.25s ease}
.shot:hover{transform:translateY(-4px); box-shadow:0 18px 44px rgba(0,0,0,.12)}
.shot:hover::after{opacity:1}

/* Features */
.section-head{max-width:820px; margin:0 auto 26px; text-align:center}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.feature-card{background:var(--card); padding:22px; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.08); transition:transform .25s ease, box-shadow .25s ease}
.feature-card:hover{transform:translateY(-4px); box-shadow:0 18px 44px rgba(0,0,0,.12)}
.feature-card .icon{font-size:28px; margin-bottom:6px}

/* Modes */
.modes{background:radial-gradient(900px 380px at 20% 0%, rgba(78,52,46,.08), transparent), var(--bg)}
.modes-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.mode-card{background:var(--card); padding:18px; border-radius:14px; border:1px solid rgba(78,52,46,.08)}
.mode-card h3{margin:6px 0 6px}
.mode-card p{color:var(--muted)}

/* Rewards */
.rewards-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center}
.checklist{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.checklist li{display:flex; align-items:flex-start; gap:10px}
.progress-widget{background:var(--card); padding:22px; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.08); display:grid; gap:14px; justify-items:center}
.progress-ring{position:relative; width:220px; aspect-ratio:1/1}
.progress-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.progress-ring .ring-bg{fill:none; stroke:rgba(78,52,46,.16); stroke-width:12}
.progress-ring .ring-fg{fill:none; stroke:var(--accent); stroke-width:12; stroke-linecap:round; filter:drop-shadow(0 6px 12px rgba(0,0,0,.18))}
.ring-center{position:absolute; inset:0; display:grid; place-items:center; text-align:center}
.ring-value{font-size:1.8rem; font-weight:900}

/* Download */
.download .store-buttons{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.hero .store-buttons{display:flex; gap:12px; flex-wrap:nowrap; align-items:center}
.hero .store-buttons .store-btn img{height:52px}
.store-btn{display:block; filter:drop-shadow(0 10px 20px rgba(0,0,0,.12)); transform:translateY(0); transition:transform .2s ease, filter .2s ease}
.store-btn:hover{transform:translateY(-3px); filter:drop-shadow(0 16px 26px rgba(0,0,0,.16))}
.store-btn img{height:56px; width:auto}

/* FAQ */
.faq-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.faq-item{background:var(--card); padding:16px 18px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.08)}
.faq-item summary{cursor:pointer; font-weight:700}

/* Footer */
.site-footer{border-top:1px solid rgba(78,52,46,.12); margin-top:30px; padding:40px 0}
.footer-grid{display:grid; grid-template-columns:1fr; gap:20px; align-items:start}

.copyright{margin-top:24px; display:flex; justify-content:left; color:var(--muted)}

/* Back to top */
.back-to-top{position:fixed; right:20px; bottom:20px; width:44px; height:44px; border-radius:999px; display:grid; place-items:center; background:var(--brand); color:#fff; border:none; box-shadow:0 10px 24px rgba(78,52,46,.35); cursor:pointer; transform:translateY(80px); opacity:0; transition:.3s ease}
.back-to-top.show{transform:translateY(0); opacity:1}

/* Snackbar */
.snackbar{position:fixed; left:50%; bottom:24px; transform:translate(-50%, 40px); background:#111; color:#fff; padding:12px 16px; border-radius:10px; opacity:0; pointer-events:none; transition:.35s ease}
.snackbar.show{opacity:1; transform:translate(-50%, 0)}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}
.delay-1{transition-delay:.06s}
.delay-2{transition-delay:.12s}
.delay-3{transition-delay:.18s}
.delay-4{transition-delay:.24s}
.delay-5{transition-delay:.30s}
.delay-6{transition-delay:.36s}
.delay-7{transition-delay:.42s}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr; gap:28px}
  .hero-device{justify-self:center}
  .hero .store-buttons{flex-wrap:wrap; justify-content:flex-start}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .modes-grid{grid-template-columns:repeat(2,1fr)}
  .rewards-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .nav{display:none}
  .feature-grid{grid-template-columns:1fr}
  .modes-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1 !important; transform:none !important}
}