@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');

:root{
  --primary: #0f8f8b;
  --secondary: #31c7c0;
  --accent: #7bdff2;
  --accent-strong: #00a896;
  --bg: #ffffff;
  --bg-soft: #f3fbfb;
  --bg-tint: #eaf8fb;
  --text: #1e293b;
  --text-soft: #64748b;
  --border: #dbe8ea;
  --font-heading: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --container: 1140px;
  --radius: 8px;
  --shadow: 0 16px 42px rgba(15, 143, 139, 0.12);
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;
  --space-8: 64px;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{ margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.55; }
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
button, input, select, textarea{ font: inherit; }
ul,ol{ padding-left: 18px; }

:focus-visible{ outline: 3px solid rgba(49, 199, 192, 0.45); outline-offset: 2px; }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }

h1,h2,h3{ font-family: var(--font-heading); line-height: 1.08; margin: 0 0 var(--space-4); color: var(--text); letter-spacing: 0; }
h1{ font-size: clamp(34px, 5vw, 58px); font-weight: 800; }
h2{ font-size: clamp(24px, 3vw, 36px); font-weight: 750; }
h3{ font-size: 18px; font-weight: 700; }
p{ margin: 0 0 var(--space-4); color: var(--text-soft); }
strong{ color: var(--text); }

.section{ padding: var(--space-8) 0; }
.section--soft{ background: linear-gradient(180deg, var(--bg-soft), #fff); }
.section__head{ max-width: 780px; margin-bottom: var(--space-6); }
.kicker{ display: inline-block; font-weight: 800; color: var(--primary); background: rgba(49, 199, 192, 0.12); border: 1px solid rgba(49, 199, 192, 0.22); padding: 7px 11px; border-radius: 999px; margin-bottom: var(--space-3); font-size: 13px; }

.grid{ display: grid; gap: var(--space-5); }
.grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .section{ padding: 48px 0; }
  .container{ padding: 0 18px; }
}

.m0{ margin: 0 !important; }
.mt6{ margin-top: var(--space-6) !important; }
.center{ text-align: center; }
.small{ font-size: 13px; color: var(--text-soft); margin: 0; }
u{ text-underline-offset: 3px; }