/* ============================================================
   FA XCLUSIVE CARS — Aachen
   Brand tokens (FA MONO — black & white performance system)
   Anchored on the angular FA monogram: pure black stage,
   white accent, neutral gray support. No chromatic color.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Saira:wght@300;400;500;600;700;800&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Ink scale (black) ---- */
  --ink-980: #060607;
  --ink-950: #0A0A0B;
  --ink-900: #0F0F11;
  --ink-850: #141417;
  --ink-800: #1A1A1E;
  --ink-700: #232328;
  --ink-600: #34343B;
  --line: rgba(244, 244, 246, 0.08);
  --line-strong: rgba(244, 244, 246, 0.16);

  /* ---- Brand accent (white) ---- */
  --accent: #FAFAFA;         /* primary accent — the FA mark */
  --accent-bright: #FFFFFF;  /* hover / highlight */
  --accent-deep: #D6D6DA;    /* pressed / shadow tone */
  --accent-ink: #0A0A0B;     /* text/icons ON an accent background */
  --accent-04: rgba(255, 255, 255, 0.04);
  --accent-08: rgba(255, 255, 255, 0.07);
  --accent-12: rgba(255, 255, 255, 0.11);
  --accent-20: rgba(255, 255, 255, 0.18);
  --accent-35: rgba(255, 255, 255, 0.32);
  --accent-glow: 0 0 0 1px rgba(255,255,255,.28), 0 18px 50px -14px rgba(255,255,255,.14);

  /* ---- Legacy aliases (old --red-*/--blue-* names kept mapped) ---- */
  --blue: var(--accent);
  --blue-bright: var(--accent-bright);
  --blue-deep: var(--accent-deep);
  --blue-08: var(--accent-08);
  --blue-12: var(--accent-12);
  --blue-20: var(--accent-20);
  --blue-35: var(--accent-35);
  --blue-glow: var(--accent-glow);
  --red: var(--accent);
  --red-bright: var(--accent-bright);
  --red-deep: var(--accent-deep);
  --red-08: var(--accent-08);
  --red-12: var(--accent-12);
  --red-20: var(--accent-20);
  --red-35: var(--accent-35);
  --red-glow: var(--accent-glow);

  /* ---- Silver / graphite (support role) ---- */
  --silver: #D4D4D8;
  --silver-hi: #F4F4F5;
  --nardo: #9A9CA0;
  --silver-dim: #85888D;
  --silver-35: rgba(212, 212, 216, 0.35);
  --silver-12: rgba(212, 212, 216, 0.12);
  --silver-glow: 0 0 0 1px rgba(212,212,216,.24), 0 18px 50px -14px rgba(140,140,150,.30);

  /* ---- Text ---- */
  --text-hi: #F5F5F6;
  --text-mid: #A6A6AB;
  --text-low: #66666D;
  --text-faint: #45454B;

  /* ---- Type ---- */
  --font-display: 'Saira', 'Arial Narrow', sans-serif;
  --font-ui: 'Hanken Grotesk', 'Helvetica Neue', sans-serif;

  /* ---- Motion ---- */
  --ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-sweep: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro: 180ms;
  --dur-quick: 340ms;
  --dur-page: 700ms;

  /* ---- Space (8pt) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---- Shape & depth ---- */
  --radius-1: 2px;
  --radius-2: 4px;
  --shadow-deep: 0 40px 90px -20px rgba(0, 0, 0, 0.75);
}

/* ============ Shared primitives ============ */
.lx-label {
  font: 600 11px/1.4 var(--font-ui);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--accent);
}
.lx-label.is-dim { color: var(--text-low); }
.lx-label.is-silver { color: var(--silver-dim); }

.lx-display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.lx-display em { font-style: normal; color: var(--accent); }
/* Monochrome signature: emphasized display words render as outlined type */
@supports (-webkit-text-stroke: 1px white) {
  .lx-display em {
    color: transparent;
    -webkit-text-stroke: 0.045em var(--text-hi);
  }
}

.lx-rule { height: 1px; background: var(--accent-35); border: none; }

/* ============ Buttons ============ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 56px; padding: 0 34px;
  font: 600 12px/1 var(--font-ui);
  letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: var(--radius-1);
  cursor: pointer; background: none; overflow: hidden; border: none;
  text-decoration: none; white-space: nowrap;
  transition: color var(--dur-quick) var(--ease-sweep),
              border-color var(--dur-quick) var(--ease-sweep),
              transform 120ms var(--ease-sweep);
}
.btn > span { position: relative; z-index: 1; }
.btn::before {
  content: ''; position: absolute; inset: 0;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-quick) var(--ease-sweep);
}
.btn--sm { height: 44px; padding: 0 24px; font-size: 11px; }

.btn--solid { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); }
.btn--solid::before { background: var(--accent-bright); }
.btn--solid:hover::before { transform: scaleX(1); }

.btn--outline { border: 1px solid var(--accent-35); color: var(--text-hi); }
.btn--outline::before { background: var(--accent); }
.btn--outline:hover { color: var(--accent-ink); border-color: var(--accent); }
.btn--outline:hover::before { transform: scaleX(1); }

.btn--silver.btn--outline { border-color: var(--silver-35); color: var(--silver); }
.btn--silver.btn--outline::before { background: var(--silver); }
.btn--silver.btn--outline:hover { color: var(--ink-950); border-color: var(--silver); }

.btn--ghost {
  border: none; height: auto; padding: 0 0 7px 0; overflow: visible;
  color: var(--text-hi); letter-spacing: 0.18em; gap: 10px;
}
.btn--ghost::before { display: none; }
.btn--ghost::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent);
  transform: scaleX(0.4); transform-origin: left center; opacity: 0.5;
  transition: transform var(--dur-quick) var(--ease-sweep), opacity var(--dur-quick);
}
.btn--ghost:hover::after { transform: scaleX(1); opacity: 1; }
.btn--ghost:hover { color: var(--accent-bright); }

.btn--wa { background: #25D366; color: #fff; border: 1px solid #25D366; }
.btn--wa::before { background: #1DA851; }
.btn--wa:hover::before { transform: scaleX(1); }
.btn--wa svg { position: relative; z-index: 1; width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }

.btn:active { transform: scale(0.97); }

/* ============ Cards ============ */
.lx-card {
  background: linear-gradient(180deg, var(--ink-900), var(--ink-950));
  border: 1px solid var(--line);
  transition: transform 500ms var(--ease-lux), border-color 500ms var(--ease-sweep),
              box-shadow 500ms var(--ease-lux);
}
.lx-card-media { overflow: hidden; position: relative; }
.lx-card-media > * { transition: transform 700ms var(--ease-lux); }
.lx-card:hover { transform: translateY(-6px); border-color: var(--accent-35); box-shadow: var(--shadow-deep); }
.lx-card:hover .lx-card-media > * { transform: scale(1.05); }