/* ─── CSS Variables ─── */
:root {
  --p900: #062E26; --p700: #0E5448; --p600: #14756A; --p500: #1B9485;
  --p300: #73C3B6; --p150: #C8E6DF; --p100: #DDEEEA; --p50: #EDF5F2;
  --bg: #FAF9F5; --surface: #FFFFFF; --elevated: #F2F1ED;
  --border: #E8E6DC; --hue: #EFEDE5;
  --t1: #141413; --t2: #4A4842; --t3: #8A887F; --t4: #B0AEA5;
  --a: #D97757; --aBg: #FAEBE0; --aSoft: #F0B89A;
  --rose: #C97389; --roseBg: #F5DDE3;
  --olive: #788C5D; --oliveBg: #E9ECDE;
  --slate: #6A9BCC; --slateBg: #E6EEF7;
  --shadow-card: 0 2px 12px rgba(15, 36, 25, 0.04);
  --shadow-elev: 0 14px 40px rgba(6, 46, 38, 0.10);
  --shadow-hero: 0 24px 60px rgba(6, 46, 38, 0.18);
}

/* ─── Reset & Base ─── */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--t1);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }

/* ─── Typography Utilities ─── */
.sora { font-family: 'Sora', sans-serif; letter-spacing: -0.02em; }
.mono { font-family: 'JetBrains Mono', monospace; }

/* ─── Layout ─── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 600;
  border: none; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-decoration: none;
}
.btn-primary {
  background: var(--p700); color: white;
  box-shadow: 0 6px 16px rgba(14, 84, 72, 0.25);
}
.btn-primary:hover { background: var(--p600); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(14,84,72,0.30); }
.btn-ghost {
  background: transparent; color: var(--t1);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--surface); }
.btn-lg { padding: 14px 22px; font-size: 15px; }
.btn .arr { display: inline-block; transition: transform 0.15s ease; }
.btn:hover .arr { transform: translateX(2px); }
.btn-emerald-soft {
  background: var(--p50); color: var(--p700);
}
.btn-emerald-soft:hover { background: var(--p100); }
.btn-on-dark-primary {
  background: white; color: var(--p900);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.btn-on-dark-primary:hover { transform: translateY(-1px); background: #fff; box-shadow: 0 14px 30px rgba(0,0,0,0.24); }
.btn-on-dark-ghost {
  background: transparent; color: white;
  border: 1px solid rgba(255,255,255,0.25);
}
.btn-on-dark-ghost:hover { background: rgba(255,255,255,0.06); }

/* ─── Eyebrow ─── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--p100); color: var(--p700);
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* ─── Section Utilities ─── */
section { padding: 96px 0; position: relative; }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--p600);
}
.section-title {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 48px; letter-spacing: -1.6px; color: var(--p900);
  margin: 12px 0 0; line-height: 1.04;
}
.section-sub {
  margin-top: 18px; font-size: 18px; color: var(--t2); max-width: 580px;
}
@media (max-width: 540px) {
  .section-title { font-size: 36px; letter-spacing: -1px; }
  section { padding: 72px 0; }
}