/* ============================================================================
   FLYJETR — CANONICAL BRAND DESIGN SYSTEM  (extracted 1:1 from flyjetr.app)
   ONE system for the whole ecosystem. Import this; never reinvent.
   Fonts: Cinzel (display) · Plus Jakarta Sans / Inter (body) · Space Grotesk (accent)
   Logo: /media/brand/jetr-logo.png  ·  Emblem: /media/brand/jetr-emblem.png
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  /* ---- core surfaces (dark, the live-site default) ---- */
  --bg:#0a0a0a; --bg-1:#0f0f14; --bg-2:#12121a; --bg-3:#1a1614;
  --panel:linear-gradient(180deg,#101015,#0c0c11);
  --line:rgba(197,165,90,.18); --line-2:rgba(197,165,90,.34);
  /* ---- signature gold (exact site tokens; #C5A55A is the dominant) ---- */
  --gold:#C5A55A; --gold-2:#D0B46A; --gold-deep:#C9A14D; --gold-bright:#FFD700;
  --gold-grad:linear-gradient(120deg,#C9A14D,#D4B45A);
  --amber:#f59e0b;
  /* ---- text ---- */
  --ink:#ffffff; --ink-2:#e7e4dc; --muted:#a8a29a; --faint:#71717a;
  /* ---- type ---- */
  --font-display:"Cinzel",Georgia,serif;
  --font-body:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
  --font-accent:"Space Grotesk","Inter",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.4,.5,1);
  --radius:14px; --radius-sm:10px; --radius-pill:40px;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(140% 100% at 50% -10%,#12121a,#0a0a0a);color:var(--ink);
  font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.6}
::selection{background:var(--gold);color:#0a0a0a}
a{color:var(--gold-2);text-decoration:none}

/* ---- type scale ---- */
.fj-display{font-family:var(--font-display);font-weight:700;letter-spacing:.01em;line-height:1.06;color:var(--ink)}
.fj-display em{font-style:italic;color:var(--gold-2)}
.fj-eyebrow{font-family:var(--font-accent);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600}
.fj-mono{font-family:var(--font-accent);letter-spacing:.04em}

/* ---- logo lockup ---- */
.fj-logo{height:26px;width:auto;display:block}
.fj-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px clamp(16px,4vw,40px);background:linear-gradient(180deg,rgba(10,10,10,.92),rgba(10,10,10,.4));
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}

/* ---- buttons (gold gradient, rounded — exactly the site) ---- */
.fj-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:700;
  font-size:14px;padding:12px 24px;border-radius:var(--radius-pill);cursor:pointer;border:0;
  transition:transform .35s var(--spring),filter .35s var(--ease)}
.fj-btn-gold{background:var(--gold-grad);color:#1a1206}
.fj-btn-ghost{background:transparent;border:1px solid var(--line-2);color:var(--ink-2)}
.fj-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}

/* ---- cards / panels ---- */
.fj-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.fj-card:hover{border-color:var(--line-2)}
.fj-chip{font-size:12px;font-weight:600;color:var(--ink-2);padding:7px 13px;border:1px solid var(--line-2);
  border-radius:var(--radius-pill);background:rgba(197,165,90,.06)}

/* ---- stat tiles ---- */
.fj-stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 15px}
.fj-stat .v{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--gold-2);line-height:1}
.fj-stat .k{font-family:var(--font-accent);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* ---- inputs ---- */
.fj-input{width:100%;padding:13px 16px;border-radius:var(--radius-sm);border:1px solid var(--line-2);
  background:var(--bg-1);color:var(--ink);font-family:var(--font-body);font-size:15px;outline:none}
.fj-input:focus{border-color:var(--gold)}

/* ---- status badges ---- */
.fj-badge{font-family:var(--font-accent);font-size:9px;font-weight:700;letter-spacing:.05em;padding:3px 7px;border-radius:5px}
.fj-badge.good{background:rgba(34,197,94,.16);color:#5fd07a;border:1px solid rgba(34,197,94,.4)}
.fj-badge.info{background:rgba(14,165,233,.16);color:#5cc4ff;border:1px solid rgba(14,165,233,.4)}
.fj-badge.gold{background:rgba(197,165,90,.16);color:var(--gold-2);border:1px solid var(--line-2)}
.fj-badge.warn{background:rgba(245,158,11,.16);color:#f0a874;border:1px solid rgba(245,158,11,.4)}
.fj-badge.muted{background:rgba(120,120,140,.14);color:#aab;border:1px solid rgba(120,120,140,.3)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================================
   MOTION LAYER — Framer-grade, standard on every FlyJetr build.
   scroll-reveal (stagger) · parallax · count-up · morph. Honors reduced-motion.
   Pair with brand-motion.js (IntersectionObserver driver).
   ============================================================================ */
.fj-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .9s var(--spring)}
.fj-reveal.in{opacity:1;transform:none}
.fj-reveal[data-d="1"]{transition-delay:.06s}.fj-reveal[data-d="2"]{transition-delay:.12s}
.fj-reveal[data-d="3"]{transition-delay:.18s}.fj-reveal[data-d="4"]{transition-delay:.24s}
.fj-reveal[data-d="5"]{transition-delay:.3s}
.fj-parallax{will-change:transform}
.fj-scrub{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}.fj-scrub.in{clip-path:inset(0 0 0 0)}
.fj-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;background:var(--gold-grad);box-shadow:0 0 12px rgba(208,180,106,.5)}
@media(prefers-reduced-motion:reduce){.fj-reveal{opacity:1;transform:none}.fj-scrub{clip-path:none}}