/* ============================================================
   global.css
   Tokens, reset, typography, shared section utilities,
   animations, footer, and responsive breakpoints.
   Used by every page on the site.
   ============================================================ */

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

/* ── DESIGN TOKENS ── */
:root {
  /* Brand colors */
  --blue:      #004aad;
  --blue-dark: #003a8a;
  --blue-bg:   rgba(0, 74, 173, 0.08);

  /* Backgrounds */
  --bg:        #fafafa;
  --bg-card:   #f0f2f7;
  --white:     #ffffff;

  /* Text */
  --text:       #0d0f14;
  --text-muted: #5a6070;

  /* Semantic colors */
  --red:   #dc3535;
  --green: #1f9e5f;

  /* Borders */
  --border: rgba(0, 0, 0, 0.08);

  /* Border radii — 8px grid */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-pill: 100px;
}

/* ── TYPE SCALE (4 sizes only) ──────────────────────────────
   56px  — hero headline        (h1)
   32px  — section titles       (.section-title, prices)
   15px  — body, nav, buttons   (base)
   12px  — labels, captions     (.section-tag, descriptions)
   ─────────────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ── SHARED BUTTON ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;           /* 8×6 */
  padding: 0 24px;        /* 8×3 */
  background: var(--blue);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--r-pill);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
}
.btn:hover  { background: var(--blue-dark); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-sm {
  height: 40px;           /* 8×5 */
  padding: 0 20px;
  font-size: 15px;
  color: #fff;
}

/* ── SHARED SECTION WRAPPER ── */
.section {
  padding: 80px 48px;     /* 8×10 / 8×6 */
  max-width: 1040px;
  margin: 0 auto;
}

/* Section header pattern reused across all sections */
.section-tag {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;     /* 8×1 */
}

.section-title {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.02em;
  margin-bottom: 8px;     /* 8×1 */
}

.section-sub {
  text-align: center;
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 48px;    /* 8×6 */
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim   { animation: fadeUp 0.55s ease both; }
.delay1 { animation-delay: 0.1s; }
.delay2 { animation-delay: 0.2s; }

/* ── RESPONSIVE ── */
@media (max-width: 680px) {
  .section        { padding: 48px 16px; }
  .pricing-card   { flex-direction: column; padding: 32px 24px; gap: 24px; }
  .pricing-section { padding: 48px 16px 64px; }
}