/* ============================================================
   PROLANDSCAPE — базова дизайн-система
   Токени, типографіка, кнопки, скло, фон, хелпери.
   Підключається першим на всіх сторінках.
   ============================================================ */

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

:root {
  /* ── зелена гама ── */
  --green: #173325; /* кнопки, акценти */
  --green-h: #244936; /* ховер кнопки */
  --green-l: #2f5a42; /* дрібний декор: лінії, стрілки */

  /* Іконка секції: у капсулі-лейблі та мотивом на фоні картки.
     Секція перевизначає її на собі — картки всередині успадковують. */
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.32' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(0.947) translate(-13.25 -12.50)'%3E%3Cpath d='M12 22c4.97 0 9-4.03 9-9 0-3-1.5-5.5-4-7 .5 2.5-.5 4-2 5 0-3-1.5-6-5-8 .5 4-1.5 5.5-3 7.5-1 1.3-1.5 2.8-1.5 4.5 0 4.97 3.53 7 6.5 7z'/%3E%3C/g%3E%3C/svg%3E");

  /* ── нейтральні ── */
  --ink: #1c1c1c; /* заголовки, ціни */
  --w: #262626; /* основний текст */
  --m: #2f3831; /* приглушений текст: густий, але на крок світліший за --ink */
  --cream: #f6f3ea; /* текст на зеленому */
  --accent: #173325; /* текстовий акцент (у світлій темі — той самий зелений) */


  /* ── скло ── */
  --glass: rgba(246, 243, 234, 0.72);
  --glass-bd: rgba(255, 255, 255, 0.5);
  --glass-hover: rgba(255, 255, 255, 0.8);
  --blur: blur(16px) saturate(1.1);

  /* ── геометрія ── */
  --r: 24px; /* картки, знімки, сітка процесу */
  --r-lg: 32px; /* широкі панелі: місія, фінальний CTA, «не знайшли послугу» */
  --r-sm: 14px;
  --r-pill: 999px;
  /* Один токен на шапку, підвал і контент — щоб краї збігалися.
     Було 1240 → 1160 → 1100 (клієнт просив вужче). Запас у шапці
     на 1100: колонка меню 707px при потрібних 534px. */
  --wrap: 1100px;
  --gutter: 14px;
  /* Єдиний формат фото на всіх картках. Було врозбій: роботи й послуги
     4/3, блог 16/10, стрічка робіт на головній — фіксовані 200px висоти,
     через що знімки 8:5 (комплексні кейси) втрачали 20% ширини —
     у них зрізало напис «ПІСЛЯ» в лівому куті. Замовнику фото слати
     в 3:2 (1800×1200 і більше) — тоді кроп нульовий. */
  --card-ratio: 3 / 2;
  --shadow: 0 18px 50px rgba(16, 30, 22, 0.14);
  --shadow-btn: 0 12px 28px rgba(23, 51, 37, 0.22);

  /* ── шрифти ── */
  --font-head: "Montserrat", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}


html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background: transparent;
  color: var(--w);
  overflow-x: hidden;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

/* ═══════════════════════════════ ФОН ═══════════════════════════════
   Фіксований, не скролиться. Градієнт — база (видно завжди),
   фото — накладається зверху, якщо завантажилось.
   ================================================================= */
.pl-bg-fixed {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background-color: #eae8df;
  background-image:
    radial-gradient(130% 80% at 50% -10%, #d4e0e6 0%, rgba(212, 224, 230, 0) 50%),
    linear-gradient(180deg, #d9e2e5 0%, #ece9df 55%, #e7e8dd 100%);
}

/* Саме фото задається на сторінці (див. parts/head.html) — тут лише
   геометрія шару. Відносні url() у CSS-змінних резолвляться від файлу
   стилів, а не від документа, тому фон навмисно не винесений у токен. */
.pl-bg-fixed::after {
  content: "";
  position: absolute;
  inset: -40px;
  background-size: cover, cover;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  filter: blur(10px);
  transform: scale(1.06);
}

/* контент прозорий, щоб фон просвічував */
.pl-shell {
  position: relative;
  background: transparent;
}

/* ═══════════════════════════════ СІТКА ═══════════════════════════════ */
/* Поле тримається шириною, а не внутрішнім відступом: тоді край
   картки збігається з краєм капсули шапки, а не відступає від нього. */
.wrap {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--wrap);
  margin: 0 auto;
}

.wrap-narrow {
  width: calc(100% - var(--gutter) * 2);
  max-width: 860px;
  margin: 0 auto;
}

section {
  padding: 96px 0;
}

/* ═══════════════════════════════ СКЛО ═══════════════════════════════ */
.g {
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

/* ═══════════════════════════════ ТИПОГРАФІКА ═══════════════════════════════ */
/* Надзаголовок секції — капсула з іконкою-жетоном.

   Іконка не окремий тег, а фон псевдоелемента: білий гліф лягає
   на зелений кружечок, а секція підміняє лише змінну --eyebrow-icon.
   Розмітка в шаблонах лишається тим самим <span>. */
.eyebrow,
.mission-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 17px 5px 5px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(47, 90, 66, 0.26);
  background: linear-gradient(180deg, #ffffff 0%, #eef4ec 100%);
  box-shadow:
    0 3px 10px rgba(16, 30, 22, 0.07),
    inset 0 1px 0 #fff;
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--green);
  /* Великі літери не мають нижніх виносних елементів, тому при
     успадкованому line-height 1.65 напис оптично з'їжджав угору
     відносно іконки. Рядок за висотою літер — і все стає на місце. */
  line-height: 1;
  /* текст усередині капсули — флекс-елемент, він охоче стискається
     й переносить слова; підпис має лишатися в один рядок */
  white-space: nowrap;
  margin-bottom: 18px;
}

/* Жетон навмисно без градієнта — на 22 пікселях він читався як бруд.
   Розміри парні: 24 і 14, різниця 10 ділиться навпіл без половинок,
   інакше браузер округлював позицію і гліф з'їжджав угору-ліворуч. */
.eyebrow::before,
.mission-label::before {
  content: "";
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--eyebrow-icon) center / 14px 14px no-repeat var(--green);
  box-shadow: 0 2px 6px rgba(23, 51, 37, 0.22);
}

#trust {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.32' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(0.947) translate(-12.00 -12.00)'%3E%3Cpath d='M12 2.5 4 6v6c0 5 3.4 8.6 8 9.5 4.6-.9 8-4.5 8-9.5V6l-8-3.5z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/g%3E%3C/svg%3E");
}

#works {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.71' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.286) translate(-12.00 -12.00)'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/g%3E%3C/svg%3E");
}

#services {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.20' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.000) translate(-12.00 -12.00)'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='2'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='2'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='2'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='2'/%3E%3C/g%3E%3C/svg%3E");
}

#process {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.08' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.059) translate(-12.00 -12.00)'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/g%3E%3C/svg%3E");
}

#blog {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.32' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(0.947) translate(-12.00 -12.00)'%3E%3Cpath d='M14 2.5H6.5a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2.5V8h5.5'/%3E%3Cpath d='M9 13.5h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/g%3E%3C/svg%3E");
}

#reviews {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.13' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.034) translate(-12.00 -11.30)'%3E%3Cpath d='m12 3 2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.8-5.4 2.8 1-6L3.3 9.4l6-.9L12 3z'/%3E%3C/g%3E%3C/svg%3E");
}

#faq {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.38' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.600) translate(-12.00 -12.24)'%3E%3Cpath d='M9.1 9.2a3 3 0 0 1 5.8 1c0 2-2.9 3-2.9 3'/%3E%3Cpath d='M12 17.2h.01'/%3E%3C/g%3E%3C/svg%3E");
}

#about-why {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.32' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(0.947) translate(-12.00 -12.00)'%3E%3Cpath d='M12 2.5 4 6v6c0 5 3.4 8.6 8 9.5 4.6-.9 8-4.5 8-9.5V6l-8-3.5z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/g%3E%3C/svg%3E");
}

#about-team {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.96' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.125) translate(-12.00 -12.00)'%3E%3Cpath d='M16 20v-1.8a3.6 3.6 0 0 0-3.6-3.6H7.6A3.6 3.6 0 0 0 4 18.2V20'/%3E%3Ccircle cx='10' cy='7.5' r='3.5'/%3E%3Cpath d='M20 20v-1.8a3.6 3.6 0 0 0-2.7-3.5'/%3E%3Cpath d='M15 4.2a3.6 3.6 0 0 1 0 7'/%3E%3C/g%3E%3C/svg%3E");
}

#b2b-who {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.08' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.059) translate(-12.00 -12.00)'%3E%3Cpath d='M20.5 16V8a1.8 1.8 0 0 0-.9-1.6l-7-3.9a1.8 1.8 0 0 0-1.8 0l-7 3.9A1.8 1.8 0 0 0 3.5 8v8c0 .65.35 1.25.9 1.56l7 3.9c.56.31 1.24.31 1.8 0l7-3.9c.55-.31.9-.91.9-1.56z'/%3E%3Cpath d='m3.8 7.2 8.2 4.6 8.2-4.6'/%3E%3Cpath d='M12 21V11.8'/%3E%3C/g%3E%3C/svg%3E");
}

#visit {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.14' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.029) translate(-12.00 -12.25)'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

#about-mission {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.32' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(0.947) translate(-13.25 -12.50)'%3E%3Cpath d='M12 22c4.97 0 9-4.03 9-9 0-3-1.5-5.5-4-7 .5 2.5-.5 4-2 5 0-3-1.5-6-5-8 .5 4-1.5 5.5-3 7.5-1 1.3-1.5 2.8-1.5 4.5 0 4.97 3.53 7 6.5 7z'/%3E%3C/g%3E%3C/svg%3E");
}

#svc-includes {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.71' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.286) translate(-12.00 -12.00)'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/g%3E%3C/svg%3E");
}

#svc-audience {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.96' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.125) translate(-12.00 -12.00)'%3E%3Cpath d='M16 20v-1.8a3.6 3.6 0 0 0-3.6-3.6H7.6A3.6 3.6 0 0 0 4 18.2V20'/%3E%3Ccircle cx='10' cy='7.5' r='3.5'/%3E%3Cpath d='M20 20v-1.8a3.6 3.6 0 0 0-2.7-3.5'/%3E%3Cpath d='M15 4.2a3.6 3.6 0 0 1 0 7'/%3E%3C/g%3E%3C/svg%3E");
}

#svc-steps {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.08' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.059) translate(-12.00 -12.00)'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/g%3E%3C/svg%3E");
}

#svc-faq {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.38' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.600) translate(-12.00 -12.24)'%3E%3Cpath d='M9.1 9.2a3 3 0 0 1 5.8 1c0 2-2.9 3-2.9 3'/%3E%3Cpath d='M12 17.2h.01'/%3E%3C/g%3E%3C/svg%3E");
}

#svc-other {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.20' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.000) translate(-12.00 -12.00)'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='2'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='2'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='2'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='2'/%3E%3C/g%3E%3C/svg%3E");
}

#contacts {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.08' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.059) translate(-12.00 -12.50)'%3E%3Cpath d='M20.5 12.5a8 8 0 0 1-8.5 8 9 9 0 0 1-3.9-.9L3.5 21l1.4-4.6a8 8 0 0 1-.9-3.9 8 8 0 0 1 8-8.5 8 8 0 0 1 8.5 8.5z'/%3E%3C/g%3E%3C/svg%3E");
}

#jobs {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.20' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.000) translate(-12.00 -12.00)'%3E%3Cpath d='M20.2 6.3a4.5 4.5 0 0 1-5.9 5.9L6.5 20a2.1 2.1 0 0 1-3-3l7.8-7.8a4.5 4.5 0 0 1 5.9-5.9l-3 3 2.9 2.9 3.1-2.9z'/%3E%3C/g%3E%3C/svg%3E");
}

#article {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.32' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(0.947) translate(-12.00 -12.00)'%3E%3Cpath d='M14 2.5H6.5a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2.5V8h5.5'/%3E%3Cpath d='M9 13.5h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- motif --- */
.motif-box {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.08' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.059) translate(-12.00 -12.00)'%3E%3Cpath d='M20.5 16V8a1.8 1.8 0 0 0-.9-1.6l-7-3.9a1.8 1.8 0 0 0-1.8 0l-7 3.9A1.8 1.8 0 0 0 3.5 8v8c0 .65.35 1.25.9 1.56l7 3.9c.56.31 1.24.31 1.8 0l7-3.9c.55-.31.9-.91.9-1.56z'/%3E%3Cpath d='m3.8 7.2 8.2 4.6 8.2-4.6'/%3E%3Cpath d='M12 21V11.8'/%3E%3C/g%3E%3C/svg%3E");
}

.motif-doc {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.32' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(0.947) translate(-12.00 -12.00)'%3E%3Cpath d='M14 2.5H6.5a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2.5V8h5.5'/%3E%3Cpath d='M9 13.5h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/g%3E%3C/svg%3E");
}

.motif-leaf {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.32' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(0.947) translate(-13.25 -12.50)'%3E%3Cpath d='M12 22c4.97 0 9-4.03 9-9 0-3-1.5-5.5-4-7 .5 2.5-.5 4-2 5 0-3-1.5-6-5-8 .5 4-1.5 5.5-3 7.5-1 1.3-1.5 2.8-1.5 4.5 0 4.97 3.53 7 6.5 7z'/%3E%3C/g%3E%3C/svg%3E");
}

.motif-people {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.96' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.125) translate(-12.00 -12.00)'%3E%3Cpath d='M16 20v-1.8a3.6 3.6 0 0 0-3.6-3.6H7.6A3.6 3.6 0 0 0 4 18.2V20'/%3E%3Ccircle cx='10' cy='7.5' r='3.5'/%3E%3Cpath d='M20 20v-1.8a3.6 3.6 0 0 0-2.7-3.5'/%3E%3Cpath d='M15 4.2a3.6 3.6 0 0 1 0 7'/%3E%3C/g%3E%3C/svg%3E");
}

.motif-chat {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.08' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.059) translate(-12.00 -12.50)'%3E%3Cpath d='M20.5 12.5a8 8 0 0 1-8.5 8 9 9 0 0 1-3.9-.9L3.5 21l1.4-4.6a8 8 0 0 1-.9-3.9 8 8 0 0 1 8-8.5 8 8 0 0 1 8.5 8.5z'/%3E%3C/g%3E%3C/svg%3E");
}

.motif-tools {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.20' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.000) translate(-12.00 -12.00)'%3E%3Cpath d='M20.2 6.3a4.5 4.5 0 0 1-5.9 5.9L6.5 20a2.1 2.1 0 0 1-3-3l7.8-7.8a4.5 4.5 0 0 1 5.9-5.9l-3 3 2.9 2.9 3.1-2.9z'/%3E%3C/g%3E%3C/svg%3E");
}

.motif-check {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.71' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.286) translate(-12.00 -12.00)'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/g%3E%3C/svg%3E");
}

.motif-drop {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.98' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.111) translate(-12.00 -11.30)'%3E%3Cpath d='M12 3.2c3.4 4 6 7 6 10.2a6 6 0 0 1-12 0c0-3.2 2.6-6.2 6-10.2z'/%3E%3C/g%3E%3C/svg%3E");
}

.motif-bulb {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.08' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.059) translate(-12.00 -12.00)'%3E%3Cpath d='M9.2 17.5h5.6'/%3E%3Cpath d='M10 20.5h4'/%3E%3Cpath d='M12 3.5a6 6 0 0 0-3.4 10.9c.6.5 1 1.2 1 2h4.8c0-.8.4-1.5 1-2A6 6 0 0 0 12 3.5z'/%3E%3C/g%3E%3C/svg%3E");
}

.motif-scissors {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.08' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.059) translate(-12.00 -13.80)'%3E%3Cpath d='M7 5.5 17 18'/%3E%3Cpath d='M17 5.5 7 18'/%3E%3Ccircle cx='6' cy='19.5' r='2.5'/%3E%3Ccircle cx='18' cy='19.5' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

.motif-grass {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.08' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.059) translate(-12.00 -12.50)'%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 12c0-3-1.5-5.5-4.5-7 0 3 1.5 5.5 4.5 7z'/%3E%3Cpath d='M12 12c0-3 1.5-5.5 4.5-7 0 3-1.5 5.5-4.5 7z'/%3E%3Cpath d='M4 21h16'/%3E%3C/g%3E%3C/svg%3E");
}

.motif-sprout {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.71' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.286) translate(-12.00 -14.00)'%3E%3Cpath d='M12 21v-8'/%3E%3Cpath d='M12 13c0-3.3 2.7-6 6-6 0 3.3-2.7 6-6 6z'/%3E%3Cpath d='M12 13c0-2.5-2-4.5-4.5-4.5 0 2.5 2 4.5 4.5 4.5z'/%3E%3Cpath d='M5 21h14'/%3E%3C/g%3E%3C/svg%3E");
}

.motif-roll {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.96' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.125) translate(-12.00 -11.50)'%3E%3Cellipse cx='12' cy='7' rx='8' ry='3.2'/%3E%3Cpath d='M4 7v9c0 1.8 3.6 3.2 8 3.2s8-1.4 8-3.2V7'/%3E%3C/g%3E%3C/svg%3E");
}

.motif-spray {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.02' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.091) translate(-13.50 -12.80)'%3E%3Crect x='8' y='9' width='8' height='12' rx='2'/%3E%3Cpath d='M8 9V6.5h4V9'/%3E%3Cpath d='M16 4.5h3M16 7.5h3M16 10.5h3'/%3E%3C/g%3E%3C/svg%3E");
}

.motif-tree {
  --eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.08' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(12 12) scale(1.059) translate(-12.00 -12.50)'%3E%3Cpath d='M12 21v-5.5'/%3E%3Cpath d='M7 15.5h10L12 4z'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- /motif --- */

.section-title {
  font-family: var(--font-head);
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--ink);
}

.section-title em {
  font-style: normal;
  color: var(--accent);
}

.section-sub {
  font-size: 16px;
  color: var(--m);
  max-width: 660px;
  line-height: 1.8;
  margin-bottom: 36px;
}

/* Лінійка під заголовком прибрана. Розмітка лишилась у всіх шаблонах,
   але від неї тепер тільки відступ, який вона тримала між заголовком
   і вмістом. Повернути = height 2px + background. */
.rule {
  height: 0;
  margin: 0 0 34px;
}

/* утиліти «про запас»: .wrap-narrow, .text-center, .frow —
   поки не задіяні, але це стандартний набір і він дешевий */
.text-center {
  text-align: center;
}

/* ═══════════════════════════════ КНОПКИ ═══════════════════════════════ */
/* Стрілка-іконка замість символу «→»: у шрифті в нього завеликі
   бокові відступи, через них напис здавався зсунутим. */
.ico-arrow {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico-arrow.is-back {
  transform: scaleX(-1);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Останній символ теж отримує трекінг, тому праворуч лишається
     зайвий піксель і напис стоїть ледь лівіше центру. */
  padding: 13px 27px 13px 28px;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: none;
  transition:
    transform 0.25s,
    background 0.25s,
    color 0.25s;
}

.btn:hover {
  text-decoration: none;
}

.btn-solid {
  background: var(--green);
  color: var(--cream);
  box-shadow: var(--shadow-btn);
}

.btn-solid:hover {
  background: var(--green-h);
  transform: translateY(-2px);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(23, 51, 37, 0.16);
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--green);
  color: var(--cream);
  transform: translateY(-2px);
}

/* маленька контурна кнопка (в картках) */
.btn-mini {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid rgba(23, 51, 37, 0.22);
  border-radius: var(--r-pill);
  padding: 7px 15px 7px 16px;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}

.btn-mini:hover {
  background: var(--green);
  color: var(--cream);
  border-color: var(--green);
}

/* ═══════════════════════════════ ФОРМИ ═══════════════════════════════ */
.fg {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.fg-l {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--m);
}

.fi,
.ft,
.fs {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(22, 51, 31, 0.18);
  border-radius: 14px;
  padding: 12px 16px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}

.fi:focus,
.ft:focus,
.fs:focus {
  border-color: var(--accent);
}

.fi::placeholder,
.ft::placeholder {
  color: rgba(22, 51, 31, 0.4);
}

.ft {
  resize: vertical;
  min-height: 88px;
}

.fs {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173325' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}

/* honeypot проти ботів */
.pl-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.pl-form-msg {
  display: none;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.pl-form-msg.ok {
  color: #1c6b3a;
}

.pl-form-msg.err {
  color: #b03a2e;
}

/* ═══════════════════════════════ АДАПТИВ ═══════════════════════════════ */
/* Шапка й підвал нижче 1024 беруть calc(100% - 20px) — тримаємо те саме */
@media (max-width: 1024px) {
  :root {
    --gutter: 10px;
  }
}

/* нижче 480 шапка й підвал беруть calc(100% - 16px) */
@media (max-width: 480px) {
  :root {
    --gutter: 8px;
  }
}

@media (max-width: 600px) {
  section {
    padding: 60px 0;
  }

  .frow {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════ ДОСТУПНІСТЬ ═══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════ ДОСТУПНІСТЬ ═══════════════════════════════ */
/* Посилання «Перейти до вмісту» для клавіатури: у потоці сторінки його
   не видно, зʼявляється лише коли на нього переходять табом. */
.pl-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1001;
  padding: 12px 22px;
  border-radius: 0 0 var(--r-sm) 0;
  background: var(--green);
  color: var(--cream);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.pl-skip:focus {
  left: 0;
}