/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'DM Sans', sans-serif;
  color: #131B2E;
  background: #F7F3EC;
  overflow-x: hidden;
}

/* === TOKENS === */
:root {
  --beige: #F7F3EC;
  --lin: #EDE6D6;
  --bleu-nuit: #131B2E;
  --terracotta: #A85C3A;
  --blanc: #FFFFFF;
  --gris: #6B6B6B;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --font-display: 'Lora', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

/* === CONTAINERS === */
.container { max-width: 1100px; margin: 0 auto; padding: 0 48px; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 48px; }
.container-wide { max-width: 1200px; margin: 0 auto; padding: 0 48px; }

/* === BUTTONS === */
.btn-primary {
  display: inline-block;
  background: var(--terracotta); color: var(--blanc);
  font-family: var(--font-body); font-weight: 600;
  font-size: 16px; padding: 16px 32px;
  border-radius: 48px; text-decoration: none;
  transition: background 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
}
.btn-primary:hover {
  background: #944E2C;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(168,92,58,0.25);
}
.btn-primary:active { transform: translateY(0); }

.btn-dark {
  display: inline-block;
  background: var(--bleu-nuit); color: var(--beige);
  font-family: var(--font-body); font-weight: 600;
  font-size: 15px; padding: 14px 32px;
  border-radius: 48px; text-decoration: none;
  transition: background 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
}
.btn-dark:hover {
  background: #1e2a42;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(19,27,46,0.2);
}

/* === SCROLL REVEAL === */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Stagger delays */
.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.16s; }
.stagger-3 { transition-delay: 0.24s; }
.stagger-4 { transition-delay: 0.32s; }

/* === SECTION LABELS === */
.section-label-title {
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--bleu-nuit); text-align: center;
  margin-bottom: 48px; opacity: 0.5;
}
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--bleu-nuit); background: var(--lin);
  border: 1px solid rgba(19,27,46,0.1);
  border-radius: 3px; padding: 4px 12px; margin-bottom: 24px;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  header { padding: 0 24px !important; }
  .container, .container-narrow, .container-wide { padding: 0 24px; }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}