:root{
  --bg:#0b0c10; --card:#121319; --text:#e9ecf1; --muted:#96a0b2; --accent:#ff3b30;
  --ring:rgba(255,255,255,.08); --max:1100px;
  color-scheme: dark light;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#ffffff; --card:#f6f7fb; --text:#0b1220; --muted:#556070; --ring:#e7eaf1; --accent:#e53935; }
}
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; }
body{ font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text); }
a{ color:inherit }
img{ max-width:100%; height:auto; display:block }

.container{ max-width:var(--max); margin:0 auto; padding:0 20px; }
.center{ text-align:center }
.narrow{ max-width:800px; }

.header{ position:sticky; top:0; backdrop-filter:saturate(180%) blur(8px); background:color-mix(in oklab, var(--bg), #000 6%); border-bottom:1px solid var(--ring); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; }
.brand__mark{ width:28px; height:28px; border-radius:8px }
.brand__text{ letter-spacing:.2px }
.nav a{ text-decoration:none; margin-left:18px; color:var(--muted) }
.nav a[aria-current="page"]{ color:var(--text); font-weight:600 }

.hero{ padding:64px 0 24px; }
.hero__inner{ display:grid; gap:36px; grid-template-columns:1.1fr .9fr; align-items:center; }
.hero__copy h1{ font-size:40px; line-height:1.15; margin:0 0 12px }
.lead{ color:var(--muted); font-size:18px; margin:0 0 20px }
.accent{ color:var(--accent) }
.cta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:16px 0 8px }
.btn img{ height:44px }
.subtle{ color:var(--muted); font-size:14px }

.hero__art{ display:flex; justify-content:center }
.hero__img{ border-radius:16px; box-shadow: 0 8px 36px rgba(0,0,0,.25); background:var(--card) }

.section{ padding:56px 0 }
.section.alt{ background:var(--card) }

.grid{ display:grid; gap:18px; grid-template-columns:repeat(3,1fr) }
.card{ padding:22px; border:1px solid var(--ring); border-radius:16px; background:linear-gradient(180deg, color-mix(in oklab, var(--card), #fff 2%), var(--card)); }
.card__icon{ width:28px; height:28px; opacity:.9 }
.card h3{ margin:8px 0 6px; font-size:18px }
.card p{ color:var(--muted); margin:0 }

.shots{ display:grid; gap:18px; grid-template-columns:repeat(3,1fr); }
.shots img{ border-radius:16px; border:1px solid var(--ring); background:#000; }

.faq details{ border:1px solid var(--ring); border-radius:12px; padding:12px 16px; margin:10px 0; background:var(--card) }
.faq summary{ cursor:pointer; font-weight:600 }
.faq p{ color:var(--muted); margin:10px 0 0 }

.list{ padding-left:18px }
.list li{ margin:6px 0 }

.footer{ border-top:1px solid var(--ring); padding:26px 0 32px; background:color-mix(in oklab, var(--bg), #000 6%); }
.footer__inner{ display:grid; gap:12px; grid-template-columns: 1fr auto; align-items:center }
.footer__brand{ display:flex; align-items:center; gap:10px }
.footer__brand img{ width:20px; height:20px; border-radius:6px }
.footer__links a{ margin-left:16px; text-decoration:none; color:var(--muted) }
.footer__small{ grid-column:1/-1; color:var(--muted); font-size:12px }

@media (max-width:960px){
  .hero__inner{ grid-template-columns:1fr }
  .grid{ grid-template-columns:1fr; }
  .shots{ grid-template-columns:1fr; }
}

/* ===== Color tokens (light default) ===== */
:root{
  --bg: #ffffff;
  --text: #0b0b0f;
  --muted: #5f6270;
  --surface-1: #f7f7fb;
  --surface-2: #eef0f5;
  --border: #e6e6ef;
  --accent: #e11d48; /* your brand red; tweak if needed */
}

/* ===== Dark mode overrides ===== */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0b0f;
    --text: #e6e6ea;
    --muted: #a1a1aa;
    --surface-1: #121217;
    --surface-2: #17171d;
    --border: #23232b;
    --accent: #ff4151; /* optional brighter red for contrast on dark */
  }

  /* Quick fix for black icons used as <img> */
  .card__icon{
    /* turns solid-black icons white; has no effect in light mode */
    filter: brightness(0) invert(1);
  }
}

/* ===== Global application of tokens ===== */
html, body { background: var(--bg); color: var(--text); }

a { color: var(--accent); }
a:hover { opacity: .9; }

/* Header / Footer */
.header, .footer {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.footer { border-top: 1px solid var(--border); }

/* Sections */
.section { background: var(--bg); }
.section.alt { background: var(--surface-2); }

/* Cards & FAQ details */
.card, .faq details {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.faq details + details { margin-top: .75rem; }
.faq summary { color: var(--text); }
.faq details { accent-color: var(--accent); }

/* Buttons (keeps your existing classes) */
.btn.btn--primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
}
.btn.btn--secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

/* Hero image + screenshots – subtle borders so they don't melt into dark */
.hero__img,
.shots img {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 16px;
}

/* Make “accent” text readable on dark */
.accent { color: var(--accent); }

/* Don’t accidentally invert store badges */
.cta img { filter: none !important; }

/* Nav + footer links inherit the theme */
.nav a, .footer__links a { color: var(--accent); }

/* Optional: nicer subtle text color */
.subtle { color: var(--muted); }