/* ══ VARIABLES CSS ══════════════════════════════════════════ */
:root {
  --bg-main:    #0A0A0F;
  --bg-alt:     #0F0F1A;
  --bg-card:    #13131F;
  --border:     #1E1E35;
  --brand:      #6B46C1;
  --brand2:     #4F46E5;
  --brand-glow: rgba(107,70,193,.25);
  --text:       #F8F8FF;
  --muted:      #9CA3AF;
  --success:    #4ade80;
  --danger:     #f87171;
}

/* ══ GLOBAL ═════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-main); color: var(--text);
  line-height: 1.6; margin: 0;
}
h1,h2,h3,h4,h5 { font-weight: 700; color: var(--text); }
a { text-decoration: none; color: inherit; }
section { scroll-margin-top: 70px; }

/* ══ FADE-IN ANIMATIONS ════════════════════════════════════ */
.fade-in {
  opacity: 0; transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; }
.delay-4 { transition-delay: .4s; }

/* ══ NAVBAR ═════════════════════════════════════════════════ */
.navbar {
  background: var(--bg-main);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}
.navbar-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.15rem; color: var(--text) !important;
  letter-spacing: -.3px;
}
.nav-link { color: var(--muted) !important; font-weight: 500; font-size: .92rem; transition: color .15s; }
.nav-link:hover { color: var(--text) !important; }
.btn-nav-cta {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff !important; border-radius: 8px; padding: 8px 20px;
  font-weight: 600; font-size: .88rem;
  transition: opacity .15s, transform .15s, box-shadow .15s;
}
.btn-nav-cta:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 4px 20px var(--brand-glow); }

/* ══ FOOTER ══════════════════════════════════════════════════ */
footer {
  background: #050508;
  border-top: 1px solid var(--border);
  padding: 48px 0 32px;
}
.footer-brand { font-weight: 800; font-size: 1.1rem; color: var(--text); display: flex; align-items: center; gap: 8px; }
footer p, footer small { color: #6b7280; }
footer a { color: #6b7280; font-size: .85rem; transition: color .15s; }
footer a:hover { color: var(--text); }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }

/* ══ UTILITAIRES ════════════════════════════════════════════ */
.text-muted { color: var(--muted) !important; }
.text-brand { color: #a78bfa; }