/* ==========================================================================
   BotBerry — Landing page stylesheet
   Faithful standalone recreation of the BotBerry Design System.
   Cool graphite neutral scale + single deep-emerald accent.
   ========================================================================== */

/* ---- Fonts (self-hosted Manrope / Inter / JetBrains Mono, full Cyrillic) --- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&family=JetBrains+Mono:wght@500;600&display=swap");

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  /* Brand accent — deep emerald */
  --green-50:  #EAF6EF;
  --green-100: #D2EEDD;
  --green-200: #A6DDBE;
  --green-300: #74C79A;
  --green-400: #45AC78;
  --green-500: #22925E;
  --green-600: #138056;
  --green-700: #0E6B47;
  --green-800: #0B5439;
  --green-900: #0A422F;

  /* Neutrals — cool graphite scale */
  --gray-0:   #FFFFFF;
  --gray-25:  #F8F9FA;
  --gray-50:  #F1F3F4;
  --gray-100: #E4E7E9;
  --gray-200: #D2D7DA;
  --gray-300: #B7BEC3;
  --gray-400: #98A1A8;
  --gray-500: #757F87;
  --gray-600: #5B636B;
  --gray-700: #424850;
  --gray-800: #2B2F35;
  --gray-900: #1B1E22;
  --gray-950: #101214;

  /* Status */
  --red-50:    #FBEAEA;
  --red-500:   #C23B3B;
  --red-600:   #A33131;
  --amber-50:  #FBF3E0;
  --amber-500: #A06A07;
  --amber-600: #8A5B05;

  /* Semantic surfaces */
  --surface-page:         var(--gray-0);
  --surface-soft:         var(--gray-25);
  --surface-sunken:       var(--gray-50);
  --surface-card:         var(--gray-0);
  --surface-overlay:      rgba(16, 18, 20, 0.48);
  --surface-inverse:      var(--gray-900);
  --surface-inverse-soft: var(--gray-800);
  --surface-accent-soft:  var(--green-50);

  /* Semantic text */
  --text-primary:          var(--gray-900);
  --text-secondary:        var(--gray-600);
  --text-muted:            var(--gray-400);
  --text-on-accent:        #FFFFFF;
  --text-on-inverse:       var(--gray-25);
  --text-on-inverse-muted: var(--gray-400);
  --text-accent:           var(--green-700);
  --text-link:             var(--green-700);

  /* Semantic borders */
  --border-default: var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-inverse: var(--gray-700);
  --border-accent:  var(--green-300);

  /* Brand accent roles */
  --accent:        var(--green-600);
  --accent-hover:  var(--green-700);
  --accent-active: var(--green-800);
  --accent-soft:   var(--green-50);
  --accent-border: var(--green-200);

  /* Status roles */
  --state-success:      var(--green-600);
  --state-error:        var(--red-500);
  --state-error-soft:   var(--red-50);
  --state-warning:      var(--amber-500);
  --state-warning-soft: var(--amber-50);

  /* Focus ring */
  --focus-ring: rgba(19, 128, 86, 0.30);

  /* Fonts */
  --font-display: "Manrope", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Consolas, monospace;

  /* Display / heading scale */
  --text-display-2xl-size: 60px; --text-display-2xl-lh: 64px; --text-display-2xl-weight: 700;
  --text-display-xl-size:  46px; --text-display-xl-lh:  52px; --text-display-xl-weight: 700;
  --text-display-lg-size:  36px; --text-display-lg-lh:  42px; --text-display-lg-weight: 700;
  --text-display-md-size:  28px; --text-display-md-lh:  34px; --text-display-md-weight: 600;
  --text-display-sm-size:  22px; --text-display-sm-lh:  28px; --text-display-sm-weight: 600;

  /* Body scale */
  --text-body-lg-size: 19px; --text-body-lg-lh: 30px; --text-body-lg-weight: 400;
  --text-body-md-size: 17px; --text-body-md-lh: 26px; --text-body-md-weight: 400;
  --text-body-sm-size: 15px; --text-body-sm-lh: 22px; --text-body-sm-weight: 400;
  --text-caption-size: 13px; --text-caption-lh: 18px; --text-caption-weight: 500;

  /* Functional */
  --text-eyebrow-size: 13px; --text-eyebrow-lh: 16px; --text-eyebrow-weight: 700; --text-eyebrow-tracking: 0.08em;
  --text-button-md-size: 16px; --text-button-md-lh: 24px; --text-button-md-weight: 600;
  --text-button-sm-size: 14px; --text-button-sm-lh: 20px; --text-button-sm-weight: 600;

  /* Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px; --space-32: 128px;
  --container-width: 1200px;
  --container-pad: 24px;

  /* Radius */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px;
  --radius-pill: 999px; --radius-full: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(16, 20, 24, 0.05);
  --shadow-sm: 0 2px 6px rgba(16, 20, 24, 0.06);
  --shadow-md: 0 8px 20px rgba(16, 20, 24, 0.08);
  --shadow-lg: 0 16px 40px rgba(16, 20, 24, 0.12);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-lh);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img { display: block; max-width: 100%; }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* ==========================================================================
   NavBar
   ========================================================================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 32px;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-default);
}
.navbar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; cursor: pointer; }
.navbar__logo { height: 26px; width: auto; }
.navbar__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--text-primary);
}
.navbar__nav { display: flex; align-items: center; gap: 28px; }
.navbar__link {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
.navbar__link:hover { color: var(--text-primary); }
.navbar__menu-btn { display: none; }

/* ==========================================================================
   Button
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: var(--text-button-md-size);
  line-height: var(--text-button-md-lh);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.btn .icon { width: 18px; height: 18px; }
.btn--sm { padding: 8px 14px; font-size: var(--text-button-sm-size); line-height: var(--text-button-sm-lh); gap: 6px; }
.btn--sm .icon { width: 16px; height: 16px; }
.btn--lg { padding: 15px 26px; font-size: 17px; line-height: 24px; }
.btn--lg .icon { width: 20px; height: 20px; }
.btn--full { width: 100%; }

.btn--primary { background: var(--accent); color: var(--text-on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:active { background: var(--accent-active); }

.btn--secondary { background: var(--gray-900); color: #fff; }
.btn--secondary:hover { background: var(--gray-800); }

.btn--outline { background: var(--surface-page); color: var(--text-primary); border-color: var(--border-strong); }
.btn--outline:hover { background: var(--gray-25); border-color: var(--gray-400); }

.btn--ghost { background: transparent; color: var(--text-primary); }
.btn--ghost:hover { background: var(--gray-50); }

.btn:disabled { background: var(--gray-100); color: var(--gray-400); border-color: transparent; cursor: not-allowed; }

/* ==========================================================================
   Badge
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-caption-size);
  font-weight: 600;
  line-height: var(--text-caption-lh);
  white-space: nowrap;
}
.badge--sm { padding: 3px 9px; font-size: 12px; line-height: 16px; }
.badge--accent { background: var(--accent-soft); color: var(--text-accent); }

/* ==========================================================================
   Section band basics
   ========================================================================== */
.section { padding: 80px 32px; }
.section--page { background: var(--surface-page); }
.section--soft { background: var(--surface-soft); }
.section__title {
  font-family: var(--font-display);
  font-weight: var(--text-display-lg-weight);
  font-size: var(--text-display-lg-size);
  line-height: var(--text-display-lg-lh);
  color: var(--text-primary);
  margin: 0;
}
.section__lead {
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  color: var(--text-secondary);
  margin: 0;
  max-width: 640px;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-standard), transform 0.7s var(--ease-standard);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  padding: 72px 32px 96px;
  background-color: var(--surface-page);
  background-image: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)), url("assets/images/hero-bg.png");
  background-size: cover;
  background-position: center;
}
.hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 56px;
  flex-wrap: wrap;
}
.hero__copy { flex: 1.2 1 480px; min-width: 320px; }
.hero__eyebrow { margin-bottom: 18px; }
.hero__title {
  font-family: var(--font-display);
  font-weight: var(--text-display-2xl-weight);
  font-size: var(--text-display-2xl-size);
  line-height: var(--text-display-2xl-lh);
  color: var(--text-primary);
  margin: 0 0 20px;
}
.hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  color: var(--text-secondary);
  margin: 0 0 32px;
  max-width: 480px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__media { flex: 1 1 380px; display: flex; justify-content: center; min-width: 320px; padding-top: 28px; }

/* Chat draft preview card */
.chatcard {
  width: 440px;
  max-width: 100%;
  background: var(--surface-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform: rotate(-1deg);
  box-shadow: var(--shadow-md);
}
.chatcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-default);
}
.chatcard__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.chatcard__body { padding: 22px 20px 18px; }
.chatcard__question {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px;
  color: var(--text-muted);
}
.chatcard__answer {
  margin: 0;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 24px;
  color: var(--text-primary);
}
.chatcard__note {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.chatcard__foot {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-default);
}
.chatcard__foot > .btn:first-child { flex: 1; }

/* ==========================================================================
   Pains
   ========================================================================== */
.pains__list { border-top: 1px solid var(--border-default); }
.pains__row {
  display: flex;
  gap: 32px;
  padding: 30px 0;
  border-bottom: 1px solid var(--border-default);
  flex-wrap: wrap;
}
.pains__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 42px;
  line-height: 1;
  color: var(--accent-border);
  flex-shrink: 0;
  width: 72px;
}
.pains__label {
  flex: 0 1 320px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-sm-size);
  color: var(--text-primary);
}
.pains__text {
  flex: 1 1 320px;
  max-width: 480px;
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-lh);
  color: var(--text-secondary);
}

/* ==========================================================================
   How it works
   ========================================================================== */
.how__inner { display: flex; gap: 64px; flex-wrap: wrap; }
.how__aside { flex: 1 1 320px; min-width: 280px; }
.how__aside .eyebrow { margin-bottom: 16px; }
.how__steps { flex: 1 1 480px; min-width: 320px; }

.step { display: flex; gap: 24px; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--border-default); }
.step--last { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.step__label {
  flex-shrink: 0;
  width: 60px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--text-accent);
}
.step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-sm-size);
  color: var(--text-primary);
  margin-bottom: 6px;
}
.step__desc {
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-lh);
  color: var(--text-secondary);
}

/* ==========================================================================
   Integrations
   ========================================================================== */
.integrations {
  background-color: var(--surface-soft);
  background-image: linear-gradient(rgba(247,248,248,0.6), rgba(247,248,248,0.6)), url("assets/images/hero-bg.png");
  background-size: cover;
  background-position: center;
}
.integrations__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.intlogo {
  padding: 20px 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--surface-page);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.intlogo__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--text-primary);
}
.intlogo__caption {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ==========================================================================
   Comparison table
   ========================================================================== */
.tablewrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
}
.cmp {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}
.cmp th {
  text-align: center;
  padding: 14px 18px;
  background: var(--surface-soft);
  color: var(--text-secondary);
  font-size: var(--text-caption-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
.cmp th:first-child, .cmp td:first-child { text-align: left; }
.cmp td {
  text-align: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-default);
  font-size: var(--text-body-sm-size);
  color: var(--text-primary);
  font-weight: 400;
}
.cmp td:first-child { font-weight: 600; }
.cmp tr:last-child td { border-bottom: none; }
.cmp .col-hl { background: var(--accent-soft); }
.cmp th.col-hl { color: var(--green-700); }
.cmp .icon { width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
.cmp .icon--yes { color: var(--green-700); }
.cmp .icon--no { color: var(--gray-400); }

/* ==========================================================================
   CTA (inverse band)
   ========================================================================== */
.cta {
  padding: 88px 32px;
  background-color: var(--surface-inverse);
  background-image: linear-gradient(rgba(10,12,14,0.45), rgba(10,12,14,0.45)), url("assets/images/cta-bg.png");
  background-size: cover;
  background-position: center;
}
.cta__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 64px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.cta__copy { flex: 1 1 420px; min-width: 300px; }
.cta__title {
  font-family: var(--font-display);
  font-weight: var(--text-display-lg-weight);
  font-size: var(--text-display-lg-size);
  line-height: var(--text-display-lg-lh);
  color: var(--text-on-inverse);
  margin: 0 0 20px;
}
.cta__text {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  color: var(--text-on-inverse-muted);
  margin: 0;
  max-width: 440px;
}
.cta__card {
  flex: 1 1 380px;
  min-width: 320px;
  background: var(--surface-page);
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1px solid var(--border-inverse);
}

/* ==========================================================================
   Form fields
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.field__label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.field__control {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--surface-page);
  border: 1px solid var(--border-strong);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.field__control:focus-within { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.field__control .icon { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.field__control input,
.field__control select {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  color: var(--text-primary);
}
.field--select .field__control { position: relative; padding: 0; }
.field--select select {
  width: 100%;
  height: 100%;
  padding: 0 38px 0 14px;
  appearance: none;
}
.field--select .field__chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-page);
  border: 1px solid var(--border-strong);
  outline: none;
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-lh);
  color: var(--text-primary);
  resize: vertical;
  box-sizing: border-box;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.field textarea:focus { border-color: var(--accent); box-shadow: var(--shadow-focus); }

.form { display: flex; flex-direction: column; gap: 16px; }

/* Checkbox */
.checkbox { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.checkbox input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.checkbox__box {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-strong);
  background: var(--surface-page);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.checkbox__box .icon { width: 14px; height: 14px; color: #fff; opacity: 0; }
.checkbox input:checked + .checkbox__box { background: var(--accent); border-color: var(--accent); }
.checkbox input:checked + .checkbox__box .icon { opacity: 1; }
.checkbox input:focus-visible + .checkbox__box { box-shadow: var(--shadow-focus); }
.checkbox__label {
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  color: var(--text-primary);
}

/* Toast (success after submit) */
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}
.toast .icon { width: 20px; height: 20px; color: var(--green-700); flex-shrink: 0; }
.toast__title { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--text-primary); }
.toast__desc { font-family: var(--font-body); font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

.is-hidden { display: none !important; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--gray-900);
  color: var(--text-on-inverse);
  padding: 56px 32px 28px;
}
.footer__cols {
  display: flex;
  gap: 64px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}
.footer__brand { min-width: 200px; display: flex; flex-direction: column; gap: 10px; }
.footer__logo { height: 24px; width: auto; }
.footer__name { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.footer__tagline {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-on-inverse-muted);
  max-width: 240px;
  line-height: 20px;
}
.footer__col { display: flex; flex-direction: column; gap: 12px; min-width: 140px; }
.footer__col-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-on-inverse-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.footer__link {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-on-inverse);
  text-decoration: none;
}
.footer__link:hover { color: #fff; }
.footer__bottom {
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--border-inverse);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-on-inverse-muted);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .hero__title { font-size: 44px; line-height: 50px; }
  .section__title, .cta__title { font-size: 30px; line-height: 36px; }
  .navbar__nav { display: none; }
}

@media (max-width: 560px) {
  .section, .hero, .cta { padding-left: 20px; padding-right: 20px; }
  .navbar { padding: 14px 20px; }
  .hero__title { font-size: 36px; line-height: 42px; }
  .pains__num { font-size: 34px; width: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}