/* ================================================================
   RESET & BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  color: var(--color-cream);
  background: var(--color-dark);
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }

::selection {
  background: var(--color-gold);
  color: var(--color-dark);
}

/* ================================================================
   UTILITY
   ================================================================ */
.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  color: var(--color-cream);
  line-height: 1.2;
  margin-bottom: 20px;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--color-cream-muted);
  max-width: 620px;
  line-height: 1.75;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header .section-subtitle {
  margin: 0 auto;
}

/* ================================================================
   SCROLL REVEAL
   ================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s var(--transition-base), transform 0.7s var(--transition-base);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

@keyframes float {
  to { transform: translate(30px, -20px) scale(1.05); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}