/* =========================================================
   MATTHIEU GUILLOUX — Shared Styles
   ========================================================= */

/* ─── Reset ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; color: #0F172A; background: #fff; line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; }

/* ─── Custom Properties ────────────────────────────────── */
:root {
  /* Dark sections - soft navy instead of black */
  --black:      #1E3A5F;
  /* Primary accent - trust blue instead of gold */
  --gold:       #2563EB;
  --gold-dark:  #1D4ED8;
  --gold-alpha: rgba(37, 99, 235, 0.10);
  /* Backgrounds */
  --white:      #FFFFFF;
  --off-white:  #EFF6FF;   /* soft pale blue */
  --light:      #F1F5F9;
  /* Grays - blue-tinted */
  --gray-100:   #F1F5F9;
  --gray-200:   #E2E8F0;
  --gray-400:   #94A3B8;
  --gray-600:   #64748B;
  /* Text */
  --dark:       #0F172A;
  /* Layout */
  --max-w:      1280px;
  --pad-x:      clamp(24px, 5vw, 80px);
  --ease:       cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1);
}

/* ─── Layout ───────────────────────────────────────────── */
.container   { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }
.section     { padding: clamp(80px, 10vw, 140px) 0; }
.section-sm  { padding: clamp(48px, 6vw, 80px) 0; }

/* ─── Typography ───────────────────────────────────────── */
h1 { font-size: clamp(48px, 7.5vw, 96px);  font-weight: 800; line-height: 1.0;  letter-spacing: -0.035em; }
h2 { font-size: clamp(34px, 4.5vw,  60px); font-weight: 700; line-height: 1.1;  letter-spacing: -0.025em; }
h3 { font-size: clamp(22px, 2.5vw,  32px); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
h4 { font-size: clamp(16px, 1.5vw,  20px); font-weight: 600; line-height: 1.4;  letter-spacing: -0.01em;  }
p  { font-size: 17px; line-height: 1.75; color: var(--gray-600); }

.text-gold  { color: var(--gold); }
.text-white { color: var(--white); }
.text-muted { color: var(--gray-400); }

/* ─── Labels & Dividers ────────────────────────────────── */
.eyebrow {
  display: block;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}

.divider {
  width: 40px; height: 3px;
  background: var(--gold); border-radius: 2px;
  margin: 0 0 32px;
}

/* ─── Navigation ───────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px var(--pad-x);
  transition: padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}

.nav.scrolled {
  padding: 14px var(--pad-x);
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.07);
}

.nav-logo {
  font-size: 16px; font-weight: 700; letter-spacing: -0.025em;
  color: white; transition: color .3s;
  display: flex; align-items: center; gap: 10px;
}
.nav.scrolled .nav-logo { color: var(--dark); }
.nav-mark { flex-shrink: 0; display: block; }

.nav-links {
  display: flex; gap: 36px; align-items: center;
}
.nav-links a {
  font-size: 14px; font-weight: 500; letter-spacing: 0.005em;
  color: rgba(255,255,255,0.7); transition: color .3s;
}
.nav-links a:hover, .nav-links a.active { color: white; }
.nav.scrolled .nav-links a { color: var(--gray-600); }
.nav.scrolled .nav-links a:hover,
.nav.scrolled .nav-links a.active { color: var(--gold); }

.nav-cta-btn {
  background: var(--gold) !important;
  color: white !important;
  padding: 9px 22px; border-radius: 100px;
  font-weight: 600; font-size: 13px;
  transition: background .25s, transform .2s, box-shadow .25s !important;
}
.nav-cta-btn:hover {
  background: var(--gold-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37,99,235,.30);
}

/* Mobile toggle */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px 2px; z-index: 1001;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: white; border-radius: 2px; transition: background .3s; }
.nav.scrolled .nav-toggle span { background: var(--dark); }

/* ─── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 30px; border-radius: 100px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  border: none; cursor: pointer;
  transition: all .25s var(--ease);
}
.btn-sm { padding: 11px 22px; font-size: 14px; }

.btn-gold { background: var(--gold); color: white; }
.btn-gold:hover { background: var(--gold-dark); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,99,235,.38); }

.btn-white { background: white; color: var(--dark); }
.btn-white:hover { background: #f0f0f0; transform: translateY(-2px); }

.btn-outline-white { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,.35); }
.btn-outline-white:hover { border-color: white; background: rgba(255,255,255,.10); }

.btn-dark { background: var(--dark); color: white; }
.btn-dark:hover { background: var(--black); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(30,58,95,.25); }

.btn-outline-dark { background: transparent; color: var(--dark); border: 1.5px solid rgba(0,0,0,.15); }
.btn-outline-dark:hover { border-color: var(--dark); background: rgba(0,0,0,.03); }

/* ─── Tags ─────────────────────────────────────────────── */
.tag {
  display: inline-block; padding: 5px 13px; border-radius: 100px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
  background: var(--gray-100); color: var(--gray-600);
}
.tag-gold { background: rgba(37,99,235,.10); color: var(--gold-dark); }
.tag-dark { background: rgba(255,255,255,.14); color: rgba(255,255,255,.85); }

/* ─── Scroll Animations ────────────────────────────────── */
.fade-up {
  opacity: 0; transform: translateY(28px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
.fade-up.in-view { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }
.d5 { transition-delay: .40s; }

/* ─── Footer ───────────────────────────────────────────── */
.footer {
  background: var(--black);
  padding: 72px var(--pad-x) 40px;
}
.footer-inner { max-width: var(--max-w); margin: 0 auto; }
.footer-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 40px; padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.footer-brand      { font-size: 19px; font-weight: 700; letter-spacing: -0.025em; color: white; margin-bottom: 6px; }
.footer-brand span { color: rgba(255,255,255,.5); }
.footer-sub        { font-size: 13px; color: rgba(255,255,255,.35); }
.footer-right      { display: flex; flex-direction: column; align-items: flex-end; gap: 24px; }
.footer-nav        { display: flex; gap: 28px; flex-wrap: wrap; justify-content: flex-end; }
.footer-nav a      { font-size: 14px; color: rgba(255,255,255,.45); transition: color .3s; }
.footer-nav a:hover{ color: white; }
.footer-contact    { font-size: 14px; color: rgba(255,255,255,.35); }
.footer-contact a  { color: rgba(255,255,255,.5); transition: color .3s; }
.footer-contact a:hover { color: white; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; padding-top: 32px;
}
.footer-bottom p { font-size: 13px; color: rgba(255,255,255,.25); }

/* ─── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }

  .nav-links.open {
    display: flex; flex-direction: column; gap: 28px;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--black); padding: 110px 40px 40px;
    z-index: 1000;
  }
  .nav-links.open a  { font-size: 22px; font-weight: 600; color: rgba(255,255,255,.8); }
  .nav-links.open a:hover { color: white; }
  .nav-links.open .nav-cta-btn {
    width: fit-content; color: white !important;
    background: var(--gold) !important; font-size: 16px;
  }

  .footer-right { align-items: flex-start; }
  .footer-nav   { justify-content: flex-start; }
}