/* Kept only where it adds context the heading doesn't already carry (hero, AI section,
   prepare) — see index.html comments. The leading tick reads as a small waypoint marker
   rather than a generic tracked-caps label. */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 18px; }
.eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; opacity: 0.55; }
.eyebrow.on-navy { color: var(--gold-bright); }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 28px; border-radius: 999px; font-size: 14.5px; font-weight: 700; font-family: 'Manrope', sans-serif; cursor: pointer; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, background 0.3s ease, border-color 0.3s ease; border: none; }
.btn-primary { background: var(--navy); color: var(--paper); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(12,30,51,0.45); }
.btn-primary svg { transition: transform 0.3s ease; }
.btn-primary:hover svg { transform: translateX(3px); }
/* Dark text on gold: white-on-gold measured 3.14:1 (fails WCAG AA text at 4.5:1). Keeps
   --gold itself unchanged/rich as an accent — only the button's text color moves. */
.btn-gold { background: var(--gold); color: var(--navy-deep); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(184,137,62,0.5); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-ghost.on-navy { color: var(--paper); border-color: rgba(255,255,255,0.25); }
.btn-ghost.on-navy:hover { border-color: var(--gold-bright); color: var(--gold-bright); }

/* ================= AMBIENT TRAVEL-MAP BACKGROUND (Priority 1) ================= */
/* Navie's own path styling (.navie-path-line / .navie-path-node) lives in navie.css —
   this ambient system is the generic decorative map dressing generated by js/background.js. */
#ambientBg { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
#ambientBg svg { display: block; width: 100%; }
.amb-route { fill: none; stroke: var(--gold); stroke-width: 1; opacity: 0.16; }
.amb-route-navy { stroke: var(--gold-bright); opacity: 0.14; }
.amb-node { fill: var(--gold); opacity: 0.28; }
.amb-coord { font-family: 'JetBrains Mono', monospace; font-size: 10px; fill: var(--ink-soft); opacity: 0.22; letter-spacing: 0.5px; }
.amb-coord.navy-zone { fill: var(--navy-soft); opacity: 0.28; }
.amb-compass { stroke: var(--gold); stroke-width: 0.75; fill: none; opacity: 0.14; }

.particle-field { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); opacity: 0.22; animation: driftY 26s ease-in-out infinite; }
.particle.navy-particle { background: var(--gold-bright); opacity: 0.3; }

/* ================= Signature route line (enhanced, curved, activating nodes) ================= */
#routeLine { position: fixed; left: 26px; top: 0; height: 100vh; width: 46px; z-index: 40; pointer-events: none; }
#routeLine svg { height: 100%; overflow: visible; }
.route-node { fill: var(--paper); stroke: var(--gold); stroke-width: 1.5; opacity: 0.45; transition: opacity 0.4s ease, r 0.4s ease, fill 0.4s ease; }
.route-node.active { opacity: 1; fill: var(--gold); r: 5; }
#routeDot { filter: drop-shadow(0 0 4px rgba(184,137,62,0.7)); }

/* ================= Floating UI badge system ================= */
.float-badge {
  position: absolute; display: flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: rgba(255,255,255,0.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.5); box-shadow: var(--shadow-soft); color: var(--ink);
  animation: floatBob 7s ease-in-out infinite; z-index: 5;
}
.float-badge.on-navy { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); color: var(--paper); }
.float-badge .fb-icon { display: inline-flex; color: var(--gold); }
.float-badge.on-navy .fb-icon { color: var(--gold-bright); }
.fb-icon svg { width: 13px; height: 13px; display: block; }

/* ================= Video / product preview frame =================
   Presented as a static premium product screenshot, not a fake video player — no play
   control or progress bar since no video exists yet (see index.html Task 8 note). */
.video-frame {
  position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow);
  aspect-ratio: 4/3; background: var(--navy);
}
.video-frame .vf-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.video-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,30,51,0.08), rgba(12,30,51,0.38)); }
.vf-label { position: absolute; top: 18px; left: 18px; z-index: 3; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-bright); background: rgba(8,21,36,0.55); padding: 7px 13px; border-radius: 999px; backdrop-filter: blur(8px); }
.vf-caption { position: absolute; bottom: 18px; left: 18px; z-index: 3; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.85); }

/* ================= Nav ================= */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px 8vw; background: rgba(250,247,240,0.7); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease, padding 0.3s ease; }
nav.scrolled { border-color: var(--line); background: rgba(250,247,240,0.88); backdrop-filter: blur(18px); padding: 13px 8vw; }
.nav-logo { display: flex; align-items: center; gap: 10px; font-family: 'Fraunces', serif; font-size: 19px; font-weight: 600; }
.nav-logo img { height: 26px; width: auto; }
.nav-links { display: flex; gap: 36px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.nav-links a { position: relative; }
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 1.5px; background: var(--gold); transition: width 0.3s ease; }
.nav-links a:hover::after { width: 100%; }
.nav-links a:hover { color: var(--gold); }
.nav-right { display: flex; align-items: center; gap: 18px; }