/* StillSet home page (index.html) only. Loaded after style.css; support / privacy pages do not use it.
   Dark first, like the App Store screenshots; a light palette follows prefers-color-scheme: light. */
:root{
  --bg:#0E1018; --surface:#151823; --surface-2:#1D2130;
  --ink:#F3F5FA; --ink-muted:rgba(243,245,250,.74); --ink-faint:rgba(243,245,250,.55);
  --border:#262B3B; --hairline:rgba(255,255,255,.08);
  --accent:#5F94EA; --accent-hover:#93B8F3; --accent-soft:rgba(95,148,234,.14); --accent-ink:#0E1018;
  --env:radial-gradient(ellipse 50% 40% at 20% 30%,rgba(95,148,234,.28),rgba(95,148,234,0) 70%),radial-gradient(ellipse 45% 40% at 85% 85%,rgba(232,116,143,.22),rgba(232,116,143,0) 70%);
  --sh-card:0 0 0 1px rgba(255,255,255,.04);
  --sh-shot:0 30px 60px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#F7F8FC; --surface:#FFFFFF; --surface-2:#EEF0F6;
    --ink:#16192A; --ink-muted:#4A5063; --ink-faint:#6B7186;
    --border:#E6E9F2; --hairline:rgba(22,25,42,.1);
    --accent:#2F6BD6; --accent-hover:#2457B3; --accent-soft:#EEF4FE; --accent-ink:#FFFFFF;
    --env:radial-gradient(ellipse 50% 40% at 20% 30%,rgba(95,148,234,.22),rgba(95,148,234,0) 70%),radial-gradient(ellipse 45% 40% at 85% 85%,rgba(237,171,94,.22),rgba(237,171,94,0) 70%);
    --sh-card:0 1px 2px rgba(22,25,42,.04), 0 10px 30px rgba(22,25,42,.06);
    --sh-shot:0 24px 48px rgba(22,25,42,.22);
  }
}

.home .wrap{max-width:1120px}
.home main{overflow-x:clip}

/* Hero */
.home-hero{text-align:center; padding:56px 0 8px}
.home-hero h1{font-size:clamp(36px,6.4vw,64px); line-height:1.05; margin:0 auto; max-width:13em; text-wrap:balance}
.home-hero .nb{display:inline-block}
html:is([lang^="zh"],[lang="ja"],[lang="ko"]) .home-hero h1{font-size:clamp(30px,6vw,60px)}
.home-hero .sub{font-size:20px; line-height:1.5; color:var(--ink-muted); margin:20px auto 0; max-width:34em}
.cta{display:flex; flex-direction:column; align-items:center; gap:12px; margin:32px 0 0}
.badge{
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:3px; margin:0;
  padding:10px 20px 11px; border-radius:var(--r-button); cursor:default; user-select:none;
  background:var(--surface-2); border:1px solid var(--border); color:var(--ink);
}
.badge small{font:500 11px/1 var(--font-sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint)}
.badge span{font:600 18px/1.15 var(--font-sans); letter-spacing:-.01em}
html:is([lang^="zh"],[lang="ja"],[lang="ko"]) .badge small{letter-spacing:.02em}
.cta .meta{margin:0}

.shot{margin:0}
.shot img{display:block; width:100%; height:auto; filter:drop-shadow(var(--sh-shot))}
.hero-shot{margin:48px auto 0; max-width:1040px}

/* Features: copy and screenshot, alternating sides */
.features{margin:40px 0 0}
.feature{display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:center; padding:56px 0; margin:0; border-top:1px solid var(--hairline)}
.feature:nth-child(even) .copy{order:2}
.feature h2{font-family:var(--font-display); font-weight:700; font-size:32px; line-height:1.15; letter-spacing:-.02em; margin:0 0 14px; text-wrap:balance}
.feature p{color:var(--ink-muted); font-size:17px}
.feature .kicker{color:var(--accent)}
.feature .shot.narrow{max-width:520px; justify-self:center}

/* Private by design / folders, not library */
.pair{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:32px 0 20px}
.pair .card{margin:0}
.pair h2,.req h2{font-family:var(--font-display); font-weight:700; font-size:26px; letter-spacing:-.015em}
.more{margin-top:16px; font-weight:500}
.split{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0 0}
.split div{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:14px 16px}
.split h3{font-size:14px; margin:0 0 4px}
.split p{font-size:14px; color:var(--ink-muted); margin:0}

.req .facts{margin:0 0 16px}
.home footer nav{flex-wrap:wrap; gap:8px 20px}


@media (max-width:860px){
  .feature{grid-template-columns:1fr; gap:24px; padding:40px 0}
  .feature:nth-child(even) .copy{order:0}
  .pair{grid-template-columns:1fr}
}
@media (max-width:600px){
  .home-hero{padding:32px 0 0}
  .home-hero .sub{font-size:17px}
  .hero-shot{margin-top:32px}
  .feature h2{font-size:26px}
  .feature p{font-size:16px}
  .split{grid-template-columns:1fr}
}