/* Voyage Keeper site */
:root {
  --navy: #081826;
  --slate: #10263b;
  --slate-light: #17324c;
  --accent: #36c2c9;
  --accent-2: #f59e0b;
  --text: #e7f2f5;
  --text-muted: #9fb7c2;
  --white: #ffffff;
  --border: rgba(255,255,255,0.08);
  --max-width: 1120px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--navy); color: var(--text); line-height: 1.6; min-height: 100vh; display:flex; flex-direction:column; }
a { color: var(--accent); text-decoration:none; }
a:hover { color: var(--white); }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }
.site-nav { background: rgba(8,24,38,.95); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; padding: .75rem 0; }
.site-nav .container { display:flex; align-items:center; justify-content:space-between; }
.nav-logo { color: var(--white); font-size:1.25rem; font-weight:700; }
.nav-logo span { color: var(--accent); }
.nav-links { display:flex; gap:1.25rem; list-style:none; }
.nav-links a { color: var(--text-muted); }
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-toggle { display:none; background:none; border:none; color:var(--text); font-size:1.5rem; }
.hero { padding: 5.5rem 0 4rem; background: linear-gradient(180deg, var(--slate) 0%, var(--navy) 100%); }
.hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items:center; }
.hero-copy h1 { font-size: clamp(2.25rem, 6vw, 4.25rem); line-height:1.1; margin-bottom:1rem; }
.hero-copy p { max-width: 760px; margin: 0 0 2rem; color: var(--text-muted); font-size:1.15rem; }
.hero-shot img, .shot img { width:100%; height:auto; display:block; border-radius:1.25rem; border:1px solid var(--border); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.btn { display:inline-block; padding:.8rem 1.6rem; border-radius:.6rem; font-weight:700; }
.btn-primary { background: var(--accent); color: var(--navy); }
.btn-outline { border:2px solid var(--accent); color: var(--accent); }
section { padding: 4rem 0; }
section:nth-child(even) { background: var(--slate); }
.cards { display:grid; gap:1.5rem; }
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.card { background: var(--slate-light); border:1px solid var(--border); border-radius:1rem; padding:1.6rem; }
.card h3 { margin-bottom:.6rem; }
.card p, .muted { color: var(--text-muted); }
.section-title { font-size:2rem; margin-bottom:.5rem; }
.section-subtitle { color: var(--text-muted); margin-bottom:2rem; }
.pricing { max-width: 760px; margin: 0 auto; background: var(--slate-light); border:1px solid var(--border); border-radius:1rem; padding:2rem; }
.pricing ul { padding-left:1.2rem; margin-top:1rem; }
.shot-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:1.5rem; }
.shot h3 { margin: 1rem 0 .4rem; }
.shot p { color: var(--text-muted); }
.store-badges { display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:.5rem; }
.badge-wrap { display:flex; flex-direction:column; align-items:center; gap:.3rem; }
.badge-gplay { height:60px; width:auto; display:block; }
.badge-soon { filter: grayscale(100%) opacity(60%); }
.badge-label { font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--text-muted); }
.site-footer { margin-top:auto; border-top:1px solid var(--border); padding:2rem 0; text-align:center; color: var(--text-muted); font-size:.9rem; }
.footer-links { display:flex; justify-content:center; gap:1.25rem; list-style:none; margin-bottom:1rem; flex-wrap:wrap; }
.legal { max-width: 820px; margin: 0 auto; padding: 3rem 1.5rem; }
.legal h1 { font-size:2rem; margin-bottom:1.5rem; }
.legal h2 { margin: 1.75rem 0 .75rem; }
.legal p, .legal li { color: var(--text-muted); margin-bottom:.75rem; }
.legal ul { padding-left:1.25rem; }
@media (max-width: 768px) {
  .nav-links { display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--navy); padding:1rem 1.5rem; border-bottom:1px solid var(--border); }
  .nav-links.open { display:flex; }
  .nav-toggle { display:block; }
  .hero-grid { grid-template-columns: 1fr; }
}