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

html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* ========== SECTION COMMON ========== */
section { padding: 80px 0; }
.s-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue); margin-bottom: 8px; display: block; }
.s-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--dark); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 10px; }
.s-desc { font-size: 0.92rem; color: var(--text-light); max-width: 460px; line-height: 1.65; }
.s-center { text-align: center; }
.s-center .s-desc { margin: 0 auto; }
.s-header { margin-bottom: 48px; }

/* ========== BLUE BG ========== */
.bg-blue { background: var(--bg-blue); }

/* ========== REVEAL ========== */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.45s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ========== RESPONSIVE ========== */
@media (max-width: 600px) {
  section { padding: 56px 0; }
}