/* ═══════════════════════════════════════════
   NAVE MAGNA — BASE STYLES
   Variables, reset, typography, layout, buttons
   File: /css/base.css
   ═══════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --navy: #0a1628;
  --navy-mid: #111d33;
  --navy-light: #1a2d4a;
  --gold: #c9a96e;
  --gold-light: #e2cb9a;
  --cream: #f5f0e8;
  --white: #fff;
  --text-light: #8a99b4;
  --text-muted: #5a6a84;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Outfit', system-ui, sans-serif;
  --danger: #c0392b;
  --danger-light: #e74c3c;
  --success: #27ae60;
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-color: var(--navy);
}
body {
  font-family: var(--sans);
  background: var(--navy);
  color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout ── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.hidden { display: none !important; }

/* ── Typography ── */
.gold-em { font-family: var(--serif); color: var(--gold); font-style: italic; }

/* ── Navigation ── */
.site-nav { position: fixed; top: 0; width: 100%; z-index: 100; padding: 24px 0; transition: all .4s; background: transparent; }
.site-nav.scrolled { background: rgba(10,22,40,.94); backdrop-filter: blur(20px); padding: 16px 0; border-bottom: 1px solid rgba(201,169,110,.1); }
.site-nav .container { display: flex; align-items: center; justify-content: space-between; }
.nav-logo { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: 2px; color: var(--white); text-decoration: none; text-transform: uppercase; cursor: pointer; }
.nav-logo span { color: var(--gold); }
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a { font-size: 13px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-light); text-decoration: none; transition: color .3s; }
.nav-links a:hover { color: var(--gold); }
.nav-cta { padding: 10px 28px !important; border: 1px solid var(--gold) !important; color: var(--gold) !important; transition: all .3s !important; }
.nav-cta:hover { background: var(--gold) !important; color: var(--navy) !important; }
.nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 8px; }
.nav-hamburger span { width: 24px; height: 1.5px; background: var(--gold); transition: all .3s; display: block; }
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* ── Buttons ── */
.btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 40px; background: var(--gold); color: var(--navy); font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: all .4s; }
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(201,169,110,.25); }
.btn-outline { display: inline-flex; align-items: center; gap: 10px; padding: 16px 40px; background: transparent; color: var(--white); font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; border: 1px solid rgba(255,255,255,.2); cursor: pointer; transition: all .4s; }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

/* ── Section headers ── */
.section-header { text-align: center; margin-bottom: 72px; }
.section-eyebrow { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; font-weight: 400; }
.section-title { font-family: var(--serif); font-size: clamp(36px,4.5vw,56px); font-weight: 300; line-height: 1.15; margin-bottom: 20px; }
.section-desc { font-size: 17px; font-weight: 300; color: var(--text-light); max-width: 600px; margin: 0 auto; line-height: 1.7; }

/* ── Toast ── */
.app-toast { position: fixed; bottom: 32px; right: 32px; z-index: 400; background: var(--success); color: var(--white); padding: 14px 28px; font-size: 14px; font-weight: 500; animation: slideIn .3s ease; box-shadow: 0 8px 32px rgba(0,0,0,.3); }
@keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }