/* ============ VSN Apps design system ============
   Direction: dark-first / high-contrast. Gold accent, border elevation.
   Semantic tokens only in components; primitives live here.        */

:root{
  /* primitives */
  --gold-300:#e8c15a; --gold-400:#d9a92c; --gold-500:#c99712; --gold-700:#8a6a0c; --gold-800:#6e550e;
  --ink-950:#15100a; --ink-900:#1d1710; --ink-850:#241d13; --ink-800:#2d2518; --ink-700:#3a3022;
  --cream-50:#faf7f0; --cream-100:#f3eee2; --cream-200:#e7dfcc; --cream-400:#b9ae95;
  --paper-900:#2a241a; --paper-100:#fffdf8;
  --seat-g:#177e5b; --seat-b:#2b5ba8; --seat-y:#c99712; --seat-r:#ae3b50; --seat-p:#6a3fa0;

  /* semantic — dark (default) */
  --bg:var(--ink-950);
  --bg-raise:var(--ink-900);
  --surface:var(--ink-850);
  --surface-hover:var(--ink-800);
  --text:#f3ecdc;
  --text-muted:#c7bba2;          /* 4.5:1+ on surface */
  --accent:var(--gold-400);
  --accent-strong:var(--gold-300);
  --on-accent:#241a08;
  --border:#453a28;
  --border-strong:#5c4e35;
  --shadow:0 18px 40px -22px rgba(0,0,0,.8);

  /* type scale (1.25) & spacing (4 base) */
  --fs-sm:.8rem; --fs-base:1rem; --fs-md:1.25rem; --fs-lg:1.563rem; --fs-xl:1.953rem; --fs-2xl:2.441rem;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --r-sm:10px; --r-md:16px; --r-lg:24px;
  --maxw:1080px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:var(--cream-50); --bg-raise:var(--cream-100);
    --surface:var(--paper-100); --surface-hover:#fff;
    --text:#241d12; --text-muted:#6b5f49;
    --accent:var(--gold-700); --accent-strong:var(--gold-800); --on-accent:#fff;
    --border:#e3dac4; --border-strong:#cfc3a6;
    --shadow:0 18px 40px -26px rgba(60,45,10,.35);
  }
}
:root[data-theme="light"]{
  --bg:var(--cream-50); --bg-raise:var(--cream-100);
  --surface:var(--paper-100); --surface-hover:#fff;
  --text:#241d12; --text-muted:#6b5f49;
  --accent:var(--gold-700); --accent-strong:var(--gold-800); --on-accent:#fff;
  --border:#e3dac4; --border-strong:#cfc3a6;
  --shadow:0 18px 40px -26px rgba(60,45,10,.35);
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  font-family:"Poppins",-apple-system,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--text);
  font-size:var(--fs-base); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s4)}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-strong);text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- header ---------- */
.site-head{padding:var(--s5) 0}
.site-head .wrap{display:flex;align-items:center;gap:var(--s3)}
.brand{display:flex;align-items:center;gap:var(--s3);color:var(--text);font-weight:700;font-size:var(--fs-md)}
.brand:hover{text-decoration:none;color:var(--text)}
.brand-mark{
  width:40px;height:40px;border-radius:12px;flex:none;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500) 55%,var(--gold-700));
  color:#241a08;display:grid;place-items:center;
  font-weight:800;font-size:.95rem;letter-spacing:.5px;
}
.head-spacer{flex:1}
.head-link{font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);padding:10px 6px}

/* ---------- hero ---------- */
.hero{padding:var(--s7) 0 var(--s6)}
.hero h1{font-size:clamp(var(--fs-xl),5.5vw,var(--fs-2xl));line-height:1.12;letter-spacing:-.02em;max-width:18ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{color:var(--text-muted);margin-top:var(--s4);max-width:52ch}
.seat-dots{display:flex;gap:10px;margin-top:var(--s5)}
.seat-dots span{width:12px;height:12px;border-radius:50%}

/* ---------- sections ---------- */
.section{padding:var(--s6) 0}
.section>.wrap>h2{font-size:var(--fs-sm);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--s4)}

/* ---------- app tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--s4)}
.tile{
  display:flex;flex-direction:column;gap:var(--s4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s5);color:var(--text);
}
a.tile{transition:transform .18s ease-out,border-color .18s ease-out,box-shadow .18s ease-out}
a.tile:hover{text-decoration:none;color:var(--text);border-color:var(--accent);box-shadow:var(--shadow)}
@media (prefers-reduced-motion: no-preference){ a.tile:hover{transform:translateY(-3px)} }
.tile-top{display:flex;align-items:center;gap:var(--s4);min-width:0}
.tile-icon{width:64px;height:64px;border-radius:16px;flex:none;border:1px solid var(--border)}
.tile-icon.placeholder{display:grid;place-items:center;background:var(--bg-raise);color:var(--text-muted);font-size:24px;border-style:dashed}
.tile h3{font-size:var(--fs-md);line-height:1.25}
.tile .kind{font-size:var(--fs-sm);color:var(--text-muted);font-weight:600}
.tile p{color:var(--text-muted);font-size:.925rem}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:auto}
.chip{font-size:var(--fs-sm);font-weight:600;border:1px solid var(--border-strong);color:var(--text-muted);border-radius:999px;padding:4px 12px}
.chip.gold{border-color:var(--accent);color:var(--accent)}
.tile.soon{border-style:dashed;justify-content:center;align-items:flex-start}

/* ---------- app page ---------- */
.crumb{font-size:var(--fs-sm);font-weight:600;padding-top:var(--s5)}
.app-head{display:flex;gap:var(--s5);align-items:center;padding:var(--s6) 0 var(--s5);flex-wrap:wrap}
.app-head img{width:96px;height:96px;border-radius:24px;border:1px solid var(--border)}
.app-head h1{font-size:var(--fs-xl);letter-spacing:-.01em}
.app-head .tag{color:var(--text-muted);margin-top:var(--s1)}
.store-pills{display:flex;gap:var(--s3);flex-wrap:wrap;padding-bottom:var(--s5)}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border-strong);border-radius:999px;padding:10px 18px;font-size:var(--fs-sm);font-weight:600;color:var(--text-muted)}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:var(--s4)}
.shots img{width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--border)}
.feature-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--s4)}
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s5)}
.feature-card h3{font-size:var(--fs-base);margin-bottom:var(--s3)}
.feature-card ul{list-style:none;display:grid;gap:var(--s2)}
.feature-card li{color:var(--text-muted);font-size:.925rem;padding-left:22px;position:relative}
.feature-card li::before{content:"";position:absolute;left:0;top:.52em;width:10px;height:10px;border-radius:3px;background:var(--accent);opacity:.85}

/* ---------- document (privacy) ---------- */
.doc{max-width:68ch;margin:0 auto;padding:var(--s5) var(--s4) var(--s8)}
.doc h1{font-size:var(--fs-lg);letter-spacing:-.01em}
.doc .meta{color:var(--text-muted);font-size:var(--fs-sm);margin:var(--s2) 0 var(--s5)}
.doc h2{font-size:var(--fs-base);margin:var(--s5) 0 var(--s2)}
.doc p{color:var(--text-muted);font-size:.95rem}
.doc .lead{color:var(--text);font-weight:600}
.doc hr{border:0;border-top:1px solid var(--border);margin:var(--s7) 0}
.email{display:inline-block;margin-top:var(--s2);font-weight:700;color:var(--accent)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--border);margin-top:var(--s7);padding:var(--s6) 0 var(--s7)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.site-foot p{color:var(--text-muted);font-size:var(--fs-sm)}
.foot-spacer{flex:1}
.site-foot nav{display:flex;gap:var(--s4)}
.site-foot a{font-size:var(--fs-sm);font-weight:600}