/* ═══════════════════════════════════════════════════════════════════════════════
   QUANTUM FIELD INC. — Unified Design System v2.0
   Shared across all pages: homepage, engage, manual, privacy, terms, 404
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. DESIGN TOKENS ────────────────────────────────────────────────────── */
:root {
  --navy-950:#081525; --navy-900:#0D1F33; --navy-800:#142840; --navy-700:#1A3A5C;
  --navy-600:#254B73; --navy-500:#2F5C8A; --navy-400:#4A7BA8; --navy-300:#6E9BC4;
  --navy-200:#9BBDDB; --navy-100:#C8DEF0; --navy-50:#E8F1F9;
  --gold-700:#9A7B4F; --gold-600:#B8956A; --gold-500:#D4A95A; --gold-400:#E4B96A;
  --gold-100:#FBF0D9; --gold-50:#FDF8EF;
  --slate-950:#0A0F1A; --slate-900:#0F1624; --slate-800:#1A2436; --slate-700:#2A3A52;
  --slate-600:#3D4F66; --slate-500:#5A6B82; --slate-400:#8493A8; --slate-300:#A8B5C4;
  --slate-200:#C5D0DE; --slate-100:#E8ECF2; --slate-50:#F4F6F9; --slate-25:#FAFBFC;
  --success-600:#047857; --success-500:#059669; --success-100:#D1FAE5; --success-50:#ECFDF5;
  --warning-600:#D97706; --warning-500:#F59E0B; --warning-100:#FEF3C7; --warning-50:#FFFBEB;
  --error-600:#DC2626; --error-500:#EF4444; --error-100:#FEE2E2; --error-50:#FEF2F2;
  --info-600:#2563EB; --info-500:#3B82F6; --info-100:#DBEAFE; --info-50:#EFF6FF;
  --font-display:'IBM Plex Serif',Georgia,serif;
  --font-body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'IBM Plex Mono','SF Mono',Consolas,monospace;
  --r-sm:4px; --r-md:6px; --r:8px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-full:9999px;
  --shadow-xs:0 1px 2px rgba(10,22,40,.04);
  --shadow-sm:0 1px 3px rgba(10,22,40,.06),0 1px 2px rgba(10,22,40,.04);
  --shadow-md:0 4px 8px -2px rgba(10,22,40,.08),0 2px 4px -2px rgba(10,22,40,.04);
  --shadow-lg:0 12px 24px -4px rgba(10,22,40,.1),0 4px 8px -2px rgba(10,22,40,.04);
  --shadow-xl:0 24px 48px -12px rgba(10,22,40,.12);
  --shadow-card:0 1px 3px rgba(10,22,40,.04),0 1px 2px rgba(10,22,40,.02);
  --shadow-card-hover:0 12px 32px -8px rgba(10,22,40,.12);
  --shadow-form:0 0 0 1px rgba(26,58,92,.08),0 1px 2px rgba(10,22,40,.04);
  --shadow-form-focus:0 0 0 3px rgba(26,58,92,.12),0 0 0 1px var(--navy-400);
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-fast:.15s; --dur:.2s; --dur-slow:.3s;
}

/* ─── 2. RESET ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--slate-700);background:var(--slate-50);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;min-height:100vh}
a{color:var(--navy-600);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

/* ─── 3. SHARED NAV ──────────────────────────────────────────────────────── */
.qf-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(250,251,252,.88);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid rgba(197,208,222,.5);transition:box-shadow .3s ease}
.qf-nav.scrolled{box-shadow:0 1px 3px rgba(10,22,40,.06)}
.qf-nav-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1rem,3vw,2rem);height:64px}
.qf-nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--slate-900)}
.qf-nav-brand:hover{text-decoration:none}
.qf-nav-mark{width:38px;height:38px;background:linear-gradient(135deg,var(--navy-700),var(--navy-800));border-radius:var(--r);display:grid;place-items:center;font-family:var(--font-display);font-size:13px;font-weight:700;color:#fff;letter-spacing:-.02em;box-shadow:0 2px 8px rgba(26,58,92,.2)}
.qf-nav-brand-text{display:flex;flex-direction:column;line-height:1.15}
.qf-nav-brand-name{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.01em}
.qf-nav-brand-tag{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--slate-400)}
.qf-nav-links{display:flex;gap:32px;align-items:center}
.qf-nav-link{font-size:13px;font-weight:500;color:var(--slate-600);text-decoration:none;transition:color .15s ease}
.qf-nav-link:hover{color:var(--navy-700);text-decoration:none}
.qf-nav-cta{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;font-size:12px;font-weight:600;background:linear-gradient(135deg,var(--navy-700),var(--navy-600));color:#fff;border-radius:var(--r);text-decoration:none;box-shadow:0 2px 8px rgba(26,58,92,.2);transition:all .2s ease}
.qf-nav-cta:hover{box-shadow:0 4px 12px rgba(26,58,92,.3);transform:translateY(-1px);text-decoration:none}
.qf-nav-cta svg{width:14px;height:14px}
.qf-nav-mobile{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--slate-700)}

/* ─── 4. SHARED FOOTER ───────────────────────────────────────────────────── */
.qf-footer{background:var(--navy-950);padding:48px clamp(1rem,3vw,2rem) 32px;border-top:1px solid rgba(255,255,255,.06)}
.qf-footer-inner{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px}
.qf-footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.qf-footer-mark{width:32px;height:32px;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);display:grid;place-items:center;font-family:var(--font-display);font-size:11px;font-weight:600;color:rgba(255,255,255,.7)}
.qf-footer-brand-name{font-family:var(--font-display);font-size:14px;font-weight:600;color:rgba(255,255,255,.75)}
.qf-footer-legal{font-size:11px;color:rgba(255,255,255,.25);line-height:1.6;max-width:400px}
.qf-footer-links{display:flex;flex-direction:column;gap:8px}
.qf-footer-link{font-size:12px;color:rgba(255,255,255,.45);text-decoration:none;transition:color .15s ease}
.qf-footer-link:hover{color:var(--gold-400);text-decoration:none}
.qf-footer-link-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.25);margin-bottom:4px}
.qf-footer-bottom{max-width:1120px;margin:32px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);font-size:11px;color:rgba(255,255,255,.2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* ─── 5. SHARED BUTTONS ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;font-family:var(--font-body);font-size:13px;font-weight:600;border:none;border-radius:var(--r);cursor:pointer;text-decoration:none;transition:all .2s ease}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn-primary{background:linear-gradient(135deg,var(--gold-600),var(--gold-500));color:var(--navy-900);box-shadow:0 2px 12px rgba(212,169,90,.25)}
.btn-primary:hover{box-shadow:0 4px 20px rgba(212,169,90,.35);transform:translateY(-1px);text-decoration:none}
.btn-secondary{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.15)}
.btn-secondary:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);text-decoration:none}
.btn-navy{background:linear-gradient(135deg,var(--navy-700),var(--navy-600));color:#fff;box-shadow:0 2px 8px rgba(26,58,92,.2)}
.btn-navy:hover{box-shadow:0 4px 12px rgba(26,58,92,.3);transform:translateY(-1px);text-decoration:none}
.btn-outline{background:#fff;color:var(--slate-700);border:1px solid var(--slate-300)}
.btn-outline:hover{background:var(--slate-50);border-color:var(--slate-400);text-decoration:none}
.btn-lg{padding:14px 28px;font-size:14px}

/* ─── 6. SHARED SECTION LAYOUT ───────────────────────────────────────────── */
.qf-section{padding:clamp(4rem,8vh,6rem) clamp(1rem,3vw,2rem)}
.qf-section-inner{max-width:1120px;margin:0 auto}
.qf-section-label{font-family:var(--font-mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-600);margin-bottom:12px}
.qf-section-title{font-family:var(--font-display);font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:600;color:var(--slate-900);letter-spacing:-.02em;line-height:1.2;margin-bottom:12px}
.qf-section-desc{font-size:15px;color:var(--slate-500);max-width:560px;line-height:1.7}

/* ─── 7. SHARED CARD SYSTEM ──────────────────────────────────────────────── */
.qf-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-xl);padding:28px;box-shadow:var(--shadow-card);transition:all .25s var(--ease)}
.qf-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px);border-color:var(--slate-300)}

/* ─── 8. PROSE CONTENT (Privacy, Terms, etc.) ────────────────────────────── */
.qf-prose{max-width:720px;margin:0 auto;padding-top:100px;padding-bottom:4rem}
.qf-prose h1{font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,2.4rem);font-weight:600;color:var(--slate-900);letter-spacing:-.02em;line-height:1.2;margin-bottom:8px}
.qf-prose .prose-date{font-size:12px;color:var(--slate-400);font-family:var(--font-mono);margin-bottom:32px}
.qf-prose h2{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--slate-800);margin:2rem 0 .75rem;letter-spacing:-.01em}
.qf-prose h3{font-size:.95rem;font-weight:600;color:var(--slate-700);margin:1.5rem 0 .5rem}
.qf-prose p{font-size:14.5px;color:var(--slate-600);line-height:1.8;margin-bottom:1rem}
.qf-prose ul,.qf-prose ol{font-size:14.5px;color:var(--slate-600);line-height:1.8;margin:0 0 1rem 1.5rem}
.qf-prose li{margin-bottom:.35rem}
.qf-prose a{color:var(--navy-600);text-decoration:underline;text-underline-offset:2px}
.qf-prose strong{color:var(--slate-800)}
.qf-prose em{font-style:italic}
.qf-prose hr{border:none;height:1px;background:var(--slate-200);margin:2rem 0}
.qf-prose .callout{display:flex;gap:12px;padding:16px;background:var(--navy-50);border:1px solid var(--navy-100);border-radius:var(--r-lg);margin:1.5rem 0;font-size:13px;color:var(--slate-700);line-height:1.6}

/* ─── 9. ANIMATIONS ──────────────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}

/* ─── 10. RESPONSIVE ─────────────────────────────────────────────────────── */
@media(max-width:900px){
  .qf-nav-links{display:none}
  .qf-nav-mobile{display:block}
  .qf-footer-inner{flex-direction:column}
}
@media(max-width:640px){
  .qf-prose{padding-top:80px}
}

/* ─── 11. REDUCED MOTION ─────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ─── 12. PRINT ──────────────────────────────────────────────────────────── */
@media print{
  .qf-nav,.qf-footer{display:none}
  body{background:#fff;color:#000}
  .qf-prose{padding-top:0}
}