/* ===== Tokens ===== */
:root {
  --maxw: 1080px;
  --pad: 24px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ink: #ffffff;
  --ink-dim: rgba(255,255,255,.72);
  --ink-faint: rgba(255,255,255,.55);
  --night: #0f0d1a;
  --footer: #0a0910;
  --accent: #ff2d76;
  --radius: 16px;
  --orb: radial-gradient(circle at 68% 32%, #ff9a00 0%, #ff5a3c 26%, #ff2d76 52%, #c026d3 76%, #7c3aed 100%);
  --dusk: linear-gradient(160deg, #150e38 0%, #3b1d6e 30%, #9c2a78 62%, #e85a3a 100%);
  --deepnight: linear-gradient(#0b0a14, #15122b);
  --dawn: linear-gradient(160deg, #e85a3a, #ffb35a 60%, #ffe2b0);
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--ink);
  background: var(--footer); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(34px, 6vw, 48px); }
h2 { font-size: clamp(26px, 4vw, 32px); }
.container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding: clamp(40px, 7vw, 64px) 0; }
.label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ===== Orb ===== */
.orb { border-radius: 50%; background: var(--orb); flex: none; }

/* ===== Nav ===== */
.site-nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; gap: 16px; flex-wrap: wrap; }
.wordmark { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; text-decoration: none; }
.wordmark .orb { width: 26px; height: 26px; }
.nav-links { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.nav-links a { color: var(--ink-dim); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); }

/* ===== App Store badge ===== */
.badge { display: inline-block; }
.badge img { height: 52px; width: auto; }

/* ===== Backgrounds ===== */
.bg-dusk { background: var(--dusk); }
.bg-night { background: var(--night); }
.bg-deepnight { background: var(--deepnight); }
.bg-dawn { background: var(--dawn); color: #2a1410; }
.bg-footer { background: var(--footer); }

/* ===== Hero ===== */
.hero-row { display: flex; align-items: center; gap: 40px; padding-bottom: clamp(40px, 6vw, 64px); }
.hero-copy { flex: 1; min-width: 0; }
.hero-copy p.lead { font-size: clamp(16px, 2.4vw, 19px); color: var(--ink-dim); max-width: 460px; margin: 0 0 28px; }
.hero-phones { display: flex; gap: 16px; flex: none; }
.hero-phones .phone:first-child { margin-top: 24px; }

/* ===== Features ===== */
.lead-block p { color: var(--ink-dim); font-size: 16px; max-width: 540px; margin: 0 0 32px; }
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feat { padding: 22px; border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.feat .chip { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 14px; }
.feat h3 { font-size: 16px; margin: 0 0 7px; }
.feat p { margin: 0; font-size: 13.5px; color: var(--ink-dim); }
.chip-a { background: linear-gradient(135deg, #ff9a00, #ff2d76); }
.chip-b { background: linear-gradient(135deg, #e85a3a, #ffd9b0); }
.chip-c { background: linear-gradient(135deg, #3b1d6e, #9c2a78); }
.chip-d { background: linear-gradient(135deg, #c026d3, #7c3aed); }

/* ===== Showcase ===== */
.showcase-row { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.shot { text-align: center; }
.shot figcaption { margin-top: 12px; font-size: 13px; color: var(--ink-faint); }

/* ===== Device mockup (stand-in for screenshots) ===== */
.phone { width: 150px; height: 310px; border-radius: 30px; padding: 10px; background: #0c0b10; box-shadow: 0 28px 60px -22px rgba(0,0,0,.6); }
.screen { width: 100%; height: 100%; border-radius: 22px; overflow: hidden; }
.sky-dawn  { background: linear-gradient(#fcd9a8, #f4a06a 55%, #d96b53); }
.sky-noon  { background: linear-gradient(#7ec8ff, #4a90d9 55%, #2a5ca8); }
.sky-dusk  { background: linear-gradient(#2a1b5a, #7a2d83 50%, #e8703a); }
.sky-night { background: linear-gradient(#0e1a3a, #243f6e 55%, #5a7bb0); }
.screen .spacer { height: 30px; }
.screen .orb { width: 34px; height: 34px; margin: 0 auto 8px; }
.city-card { margin: 7px 9px 0; padding: 9px 11px; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.14); }
.city-card.on-light { color: #2a2622; background: rgba(255,255,255,.52); }

/* ===== CTA ===== */
.cta { text-align: center; }
.cta .eyebrow { font-size: 18px; opacity: .8; margin: 0 0 6px; }
.cta h2 { font-size: clamp(30px, 5vw, 38px); margin: 0 0 26px; }
.cta .fine { font-size: 13px; opacity: .8; margin: 18px 0 0; }
.badge.dark img { filter: none; }

/* ===== Footer ===== */
.site-footer { display: flex; align-items: center; justify-content: space-between; padding: 30px 0; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-faint); }
.site-footer .wordmark { font-size: 15px; color: var(--ink-dim); }
.site-footer .wordmark .orb { width: 20px; height: 20px; }
.footer-links { display: flex; gap: 22px; }
.footer-links a { color: var(--ink-faint); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }

/* ===== Readable document (privacy / support) ===== */
.doc { max-width: 720px; margin: 0 auto; padding: clamp(32px,6vw,56px) 0; }
.doc h1 { font-size: clamp(28px, 5vw, 36px); }
.doc h2 { font-size: 20px; margin-top: 1.6em; }
.doc p, .doc li { color: var(--ink-dim); font-size: 15.5px; }
.doc ul { padding-left: 1.2em; }
.doc .effective { color: var(--ink-faint); font-size: 14px; }
.doc a { color: #ff9a6a; }
.faq dt { font-weight: 600; margin-top: 1.2em; }
.faq dd { margin: .3em 0 0; color: var(--ink-dim); }

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hero-row { flex-direction: column; align-items: flex-start; }
  .hero-phones { width: 100%; justify-content: center; }
  .features-grid { grid-template-columns: 1fr; }
  .nav-links { gap: 16px; font-size: 13px; }
}

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