/* payvance-shared.css — shared across all pages */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=DM+Mono:wght@400;500&display=swap');

:root {
  --bg:        #f7f6f3;
  --white:     #ffffff;
  --surface:   #faf9f7;
  --border:    #e8e5df;
  --border2:   #f0ede8;
  --text:      #1a1917;
  --muted:     #8a8680;
  --muted2:    #b5b2ac;
  --accent:    #2a5cff;
  --accent-s:  rgba(42,92,255,.09);
  --accent-m:  rgba(42,92,255,.18);
  --green:     #0d9e6e;
  --green-s:   rgba(13,158,110,.1);
  --amber:     #d97706;
  --amber-s:   rgba(217,119,6,.1);
  --red:       #dc2626;
  --red-s:     rgba(220,38,38,.08);
  --serif:     'Instrument Serif', Georgia, serif;
  --sans:      'DM Sans', sans-serif;
  --mono:      'DM Mono', monospace;
  --radius:    12px;
  --radius-lg: 18px;
  --shadow:    0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  --shadow-lg: 0 2px 8px rgba(0,0,0,.07), 0 16px 48px rgba(0,0,0,.09);
  --btn-dark-bg: #1a1917;
  --btn-dark-fg: #ffffff;
  --btn-dark-hover: #2d2b28;
  --insight-bg: #1a1917;
  --insight-fg: #ffffff;
  --insight-muted: rgba(255,255,255,.35);
  --insight-text: rgba(255,255,255,.85);
}

:root[data-theme='dark'] {
  --bg:        #0f1424;
  --white:     #161d31;
  --surface:   #1c243a;
  --border:    #2a3553;
  --border2:   #212c47;
  --text:      #edf2ff;
  --muted:     #9ba7c6;
  --muted2:    #6f7ca0;
  --accent:    #7aa2ff;
  --accent-s:  rgba(122,162,255,.20);
  --accent-m:  rgba(122,162,255,.30);
  --green:     #34d399;
  --green-s:   rgba(52,211,153,.16);
  --amber:     #f59e0b;
  --amber-s:   rgba(245,158,11,.16);
  --red:       #f87171;
  --red-s:     rgba(248,113,113,.16);
  --shadow:    0 1px 3px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.20);
  --shadow-lg: 0 2px 8px rgba(0,0,0,.28), 0 16px 48px rgba(0,0,0,.28);
  --btn-dark-bg: #2f3c5d;
  --btn-dark-fg: #f5f8ff;
  --btn-dark-hover: #3a4a72;
  --insight-bg: #273553;
  --insight-fg: #f5f8ff;
  --insight-muted: rgba(245,248,255,.55);
  --insight-text: rgba(245,248,255,.92);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }

/* ── NAV ──────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(247,246,243,.92); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; height: 64px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-mark {
  width: 32px; height: 32px; background: var(--btn-dark-bg); border-radius: 9px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  overflow: hidden;
}
.nav-mark svg { width: 17px; height: 17px; }
.nav-mark.brand-logo {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.nav-wordmark { font-family: var(--serif); font-size: 19px; color: var(--text); letter-spacing: -.3px; }
.nav-wordmark em { font-style: italic; color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none;
  padding: 6px 14px; border-radius: 8px; transition: all .15s;
}
.nav-links a:hover { color: var(--text); background: rgba(0,0,0,.04); }
.nav-links a.active { color: var(--text); }
.nav-actions { display: flex; gap: 8px; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 9px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; font-family: var(--sans); transition: all .18s; text-decoration: none; white-space: nowrap; }
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--muted2); background: var(--white); }
.btn-dark { background: var(--btn-dark-bg); color: var(--btn-dark-fg); }
.btn-dark:hover { background: var(--btn-dark-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #1d4fed; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(42,92,255,.3); }
.btn-lg { padding: 13px 28px; font-size: 15px; border-radius: 10px; }

/* ── PAGE WRAPPER ─────────────────────────────────────────── */
.page { padding-top: 64px; min-height: 100vh; }

/* ── FOOTER ───────────────────────────────────────────────── */
footer {
  background: var(--text); color: rgba(255,255,255,.5);
  padding: 56px 40px 32px;
}
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer-brand .nav-mark { background: rgba(255,255,255,.1); margin-bottom: 14px; }
.footer-brand .nav-wordmark { color: #fff; }
.footer-tagline { font-size: 13px; color: rgba(255,255,255,.4); margin-top: 10px; line-height: 1.6; max-width: 220px; }
.footer-col h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.3); margin-bottom: 14px; }
.footer-col a { display: block; font-size: 14px; color: rgba(255,255,255,.5); text-decoration: none; margin-bottom: 8px; transition: color .15s; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.footer-bottom a { color: rgba(255,255,255,.4); text-decoration: none; }

/* ── ANIMATIONS ───────────────────────────────────────────── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes scaleIn  { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:scale(1)} }
.anim-up   { animation: fadeUp  .5s ease both; }
.anim-in   { animation: fadeIn  .4s ease both; }
.anim-scale{ animation: scaleIn .5s ease both; }

/* ── UTILS ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.theme-fab {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 1000;
  font-size: 13px;
  padding: 7px 10px;
  backdrop-filter: blur(8px);
}

@media (max-width: 768px) {
  .nav { padding: 0 20px; }
  .nav-links { display: none; }
  footer { padding: 40px 20px 24px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .theme-fab { top: 10px; right: 10px; }
}