/* FindBee – стилі сайту
   Палітра вайрфрейму: чорний, білий, світло-сірий; мед – єдиний акцент. Чіткі чорні рамки, без тіней. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/montserrat-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/montserrat-latin-700-normal.woff2) format("woff2"); unicode-range: U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/montserrat-cyrillic-800-normal.woff2) format("woff2"); unicode-range: U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/montserrat-latin-800-normal.woff2) format("woff2"); unicode-range: U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-400-normal.woff2) format("woff2"); unicode-range: U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/inter-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/inter-latin-500-normal.woff2) format("woff2"); unicode-range: U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter-latin-600-normal.woff2) format("woff2"); unicode-range: U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/inter-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/inter-latin-700-normal.woff2) format("woff2"); unicode-range: U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  /* Кольори: Midnight Indigo (#222B45) – основний темний, білий і світло-сірий; мед – акцент */
  --ink: #222B45;             /* текст, основні кнопки, темні блоки */
  --text: #111111;            /* колір усього тексту на світлому фоні – чорний */
  --ink-muted: var(--text);   /* другорядний текст теж чорний */
  --paper: #FFFFFF;           /* основний фон, картки */
  --alt: #F7F1E3;             /* фон секцій через одну */
  --line: #CFCDC8;            /* тонкі лінії */
  --field-line: #8F8C85;      /* рамки полів (3.4:1) */
  --placeholder: #6B6B6B;     /* плейсхолдери (5.2:1) */
  --dark: #222B45;            /* темні блоки */
  --dark-raised: #2E3A5C;     /* поверхні на темному */
  --on-dark: #FFFFFF;
  --on-dark-muted: #D4D2CC;   /* другорядний на темному (12:1) */
  --line-dark: #3D4870;
  --accent: #F5A623;          /* мед – акцент і кнопки на темному */
  --accent-hover: #FFB43B;
  --accent-soft: #FDEBC8;     /* підсвітка */
  --accent-ink: #9A6200;      /* медовий для дрібних іконок на світлому (5.1:1) */
  --success: #17613D;
  --success-soft: #DDF2E6;
  --danger: #B42318;
  --danger-soft: #FCE8E6;

  /* Типографіка – з бренд-гайду */
  --font-display: "Montserrat", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --border: 1.5px solid var(--ink);
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 20px;
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(56px, 8vw, 96px);
  --header-h: 72px;            /* висота шапки без рамки – під неї підганяємо секції */
  color-scheme: light;
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.num { font-variant-numeric: tabular-nums; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-s);
  background: var(--accent); color: var(--text); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* Типографічна шкала */
.h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.5rem);
  line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance;
}
.h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance;
}
.h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance;
}
.eyebrow {
  font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 12px;
}

.section-lead { max-width: 62ch; margin-top: 12px; color: var(--ink-muted); font-size: 1.125rem; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 12px;
  border: 1.5px solid transparent;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--lg { min-height: 56px; padding: 14px 28px; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn--dark { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.btn--dark:hover, .btn--dark:focus-visible { color: var(--accent); }
.btn--accent { background: var(--accent); color: var(--text); border-color: var(--accent); }
.btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--outline { background: var(--paper); color: var(--text); border-color: var(--ink); }
.btn--outline:hover, .btn--outline:focus-visible { background: var(--accent); color: var(--text); }

.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 5px; text-decoration-color: var(--accent);
}
.link-arrow .icon { transition: transform .15s ease; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ---------- Хедер ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1000;
  isolation: isolate;
  /* шапка завжди на власному верхньому шарі – анімовані соти й слайди не «проступають» поверх неї (баг Safari/Chrome зі sticky) */
  -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-bottom: var(--border);
}
/* Напівпрозоре розмите тло шапки – окремим шаром під її вмістом (так розмиття не мигає над анімованими сотами) */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(255, 255, 255, .65);
  -webkit-backdrop-filter: saturate(140%) blur(5px);
  backdrop-filter: saturate(140%) blur(5px);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo__mark { width: 55px; height: 55px; }
.logo__word { font-family: var(--font-display); font-weight: 800; font-size: 2.25rem; line-height: 1; letter-spacing: -0.02em; }
@media (max-width: 480px) { .logo__word { font-size: 1.75rem; } }
.site-footer .logo__word { font-size: 2rem; }
.logo__word, .logo__bee, .logo__mark { transition: color .2s ease; }
.logo { color: var(--ink); }
.logo__mark { color: inherit; }
.logo__word { color: inherit; }
.logo__bee { color: inherit; }
.logo:not(.logo--light):hover, .logo:not(.logo--light):focus-visible { color: var(--accent); }
/* рамка навколо бджоли «фокусується» при наведенні: кути з'їжджаються до центру, як рамка Face ID */
.logo__c { transition: transform .38s cubic-bezier(.34, 1.56, .64, 1); }
.logo:hover .logo__c--tl, .logo:focus-visible .logo__c--tl { transform: translate(56px, 56px); }
.logo:hover .logo__c--tr, .logo:focus-visible .logo__c--tr { transform: translate(-56px, 56px); }
.logo:hover .logo__c--bl, .logo:focus-visible .logo__c--bl { transform: translate(56px, -56px); }
.logo:hover .logo__c--br, .logo:focus-visible .logo__c--br { transform: translate(-56px, -56px); }

.logo--light .logo__word { color: var(--on-dark); transition: color .15s ease; }
.logo--light .logo__bee { color: inherit; }
.logo--light .logo__mark { color: var(--on-dark); transition: color .15s ease; }
.logo--light:hover .logo__word, .logo--light:focus-visible .logo__word,
.logo--light:hover .logo__mark, .logo--light:focus-visible .logo__mark { color: var(--accent); }

.nav { display: flex; align-items: center; gap: 28px; }
.nav__list { display: flex; align-items: center; gap: 24px; }
.nav__list a { text-decoration: none; font-weight: 500; font-size: .96rem; padding-block: 6px; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav__list a:hover, .nav__list a[aria-current="page"] { border-bottom-color: var(--accent); }
.nav__cta { min-height: 44px; padding: 10px 18px; white-space: nowrap; }
.nav-toggle {
  display: none; width: 48px; height: 48px; padding: 0;
  border: var(--border); border-radius: 12px; background: var(--paper);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer;
}
.nav-toggle__bar { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }

@media (max-width: 1199px) {
  
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: 16px;
    padding: 8px var(--gutter) 24px;
    background: var(--paper); border-bottom: var(--border);
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 1.0625rem; }
  .site-header.is-open .nav { display: flex; }

}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 104px); background: var(--paper); }
.hero__grid { display: grid; gap: 56px; align-items: center; }
.hero__copy { min-width: 0; container-type: inline-size; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border: var(--border); border-radius: 999px;
  font-size: .875rem; font-weight: 500;
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.hero__title {
  margin-top: 24px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.75rem, 1.3rem + 4vw, 3.9rem);
  font-size: clamp(1.625rem, 5.4cqi, 3.9rem); /* розмір від ширини колонки – заголовок у два рядки */
  line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance;
}
.hl {
  background-image: linear-gradient(transparent 62%, var(--accent) 62%, var(--accent) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-inline: .04em;
}
.hero__lead { margin-top: 24px; max-width: 56ch; font-size: clamp(1.125rem, 0.9rem + 0.75vw, 1.5rem); line-height: 1.45; color: var(--ink-muted); }
.brand-word { font-family: var(--font-display); font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.brand-word span { color: var(--accent); }
.hero__lead .brand-word { font-size: 1.3em; line-height: 1; }
.hero__actions { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
@media (min-width: 560px) { .hero__actions { grid-template-columns: repeat(2, 1fr); width: fit-content; } }
.hero__trust { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 32px; font-weight: 500; font-size: .9375rem; }
.hero__trust li { display: inline-flex; align-items: center; gap: 8px; }

.hero__visual { position: relative; display: flex; justify-content: center; padding-bottom: 24px; }
.phone { width: min(300px, 100%); padding: 10px; border-radius: 46px; background: var(--ink); }
.phone__screen { border-radius: 36px; overflow: hidden; background: var(--paper); padding: 18px 14px 16px; }
.post { display: grid; gap: 12px; }
.post__head { display: flex; align-items: center; gap: 10px; }
.post__avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--accent); font-family: var(--font-display); font-weight: 800; font-size: .875rem;
}
.post__who { display: grid; line-height: 1.2; font-size: .875rem; }
.post__who small { color: var(--ink-muted); font-size: .75rem; }
.post__creative {
  border-radius: 18px; padding: 20px 18px 22px;
  background: var(--accent); color: var(--text);
  min-height: 250px; display: flex; flex-direction: column; gap: 10px;
}
.post__tag {
  align-self: flex-start; padding: 4px 10px; border-radius: 999px;
  background: var(--ink); color: var(--accent);
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.post__role { font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; line-height: 1.12; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.post__meta { font-weight: 600; font-size: .875rem; }

.post__cta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-radius: 12px; background: var(--ink); color: var(--on-dark);
  font-weight: 600; font-size: .875rem;
}
.post__actions { display: flex; gap: 14px; padding-inline: 2px; }
.post__actions .icon { width: 20px; height: 20px; }

.lead-feed { position: absolute; left: 0; bottom: 0; display: grid; gap: 10px; width: 250px; }
.lead-card {
  display: grid; gap: 2px;
  padding: 12px 14px; border-radius: 14px;
  background: var(--paper); border: var(--border);
  box-shadow: 6px 6px 0 var(--ink);
  font-size: .8125rem; line-height: 1.35;
  animation: lead-in .7s cubic-bezier(.2, .8, .2, 1) both;
}
.lead-card:nth-child(1) { animation-delay: .35s; }
.lead-card:nth-child(2) { animation-delay: 1.1s; transform: translateX(18px); }
.lead-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.lead-card__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--success);
}
.lead-card__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: pulse 2s ease-in-out infinite; }
.lead-card__time, .lead-card__phone { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.lead-card__name { font-weight: 700; font-size: .9375rem; }
.lead-card__qa { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
@keyframes lead-in { from { transform: translateY(18px) scale(.97); } }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- Секції ---------- */
.section { padding-block: var(--section-y); border-top: var(--border); }
.section--alt { background: var(--alt); }
.section-head { margin-bottom: clamp(32px, 5vw, 56px); }
.section-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section-head--row > div { min-width: 0; flex: 1 1 520px; }
.section-head--wide .section-lead { max-width: none; }

.grid-4 { display: grid; gap: 20px; }
@media (min-width: 768px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
}
@media (min-width: 1200px) {
  
  .grid-4 .card { padding: 24px; }
}

.card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px; border-radius: var(--radius-m);
  background: var(--paper); border: var(--border);
}
.card p { color: var(--ink-muted); }
.card__icon, .benefit__icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px dashed var(--ink);
}
.card__icon .icon, .benefit__icon .icon { width: 24px; height: 24px; }

/* Кроки */
.steps { display: grid; gap: 20px; }
.step {
  position: relative; display: grid; gap: 10px; align-content: start;
  padding: 28px; border-radius: var(--radius-m); background: var(--paper); border: var(--border);
}
.step p { color: var(--ink-muted); }
#how .step { background: var(--paper); }
#how .step, #how .step p, #how .step .h3 { color: var(--text); }
.step__num {
  width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 50%;
  background: var(--ink); color: var(--on-dark);
  font-family: var(--font-display); font-weight: 800; font-size: 1.125rem;
}
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Переваги */
/* Слайд "Рішення": соцмережі + способи пошуку */
.platforms { display: grid; gap: 20px; margin-bottom: 20px; }

.platform {
  display: grid; align-content: start; gap: 8px;
  padding: clamp(22px, 2.6vw, 32px); border-radius: var(--radius-l);
  background: var(--paper); color: var(--text); border: var(--border);
}
.platform__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.625rem, 1.2rem + 1vw, 2.125rem); line-height: 1.1; color: var(--ink); }
.platform { position: relative; }
.benefits-title { margin: 4px 0 14px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.25rem, 1rem + .6vw, 1.5rem); line-height: 1.2; color: var(--text); }
.platforms-more { width: fit-content; max-width: 100%; margin: -4px auto 20px; text-align: center; padding: 10px 22px; border-radius: 999px; background: var(--paper); border: var(--border); }
.platforms-more b { font-family: var(--font-display); font-weight: 700; }
.platform__name { padding-right: 64px; }
.platform__logo { position: absolute; top: 20px; right: 20px; width: 48px; height: 48px; }
.platform__reach { justify-self: start; padding: 2px 8px; border-radius: 6px; background: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--text); }
.platform p:not(.platform__reach) { margin-top: 6px; color: var(--text); }
.benefits { display: grid; gap: 20px; }
@media (min-width: 640px) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .benefits--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .benefits--5 .benefit { grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; gap: 8px 10px; padding: 18px; } .benefits--5 .benefit__icon { width: 36px; height: 36px; } .benefits--5 .h3 { font-size: 1rem; line-height: 1.25; } .benefits--5 .benefit p { font-size: .875rem; line-height: 1.45; } #benefits .section-head { margin-bottom: 28px; } .platform { padding: 22px 26px; } .platform p:not(.platform__reach) { font-size: .9375rem; line-height: 1.5; } }
/* 5 карток під соцмережами – темні */
.benefits--5 .benefit { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.benefits--5 .benefit .h3, .benefits--5 .benefit p { color: var(--on-dark); }
.benefits--5 .benefit__icon { border-color: var(--on-dark); color: var(--on-dark); }
.benefits--5 .benefit .h3, .benefits--5 .benefit p, .benefits--5 .benefit__icon { transition: color .2s ease, border-color .2s ease; }
.benefits--5 .benefit:hover .h3, .benefits--5 .benefit:hover p { color: var(--accent); }
.benefits--5 .benefit:hover .benefit__icon { color: var(--accent); border-color: var(--accent); }
.benefit { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px; padding: 24px; border-radius: var(--radius-m); border: var(--border); background: var(--paper); }
.benefit p { grid-column: 1 / -1; color: var(--ink-muted); }
.benefit__icon { width: 46px; height: 46px; }

.checklist { display: grid; gap: 12px; margin-top: 28px; }
.checklist li { display: flex; align-items: flex-start; gap: 12px; font-weight: 500; }
.checklist .icon { margin-top: 3px; }
.checklist--tight { margin-top: 0; font-size: .95rem; gap: 9px; }
.checklist--tight li { font-weight: 400; }

/* ---------- Тарифи ---------- */
.tariffs { display: grid; gap: 20px; align-items: stretch; }

.tariff {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 30px 26px 24px; border-radius: var(--radius-l);
  background: var(--paper); border: var(--border);
}
.tariff__tag { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.tariff__name { font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.02em; margin-top: -6px; }
.tariff__desc { color: var(--ink-muted); min-height: 3.2em; font-size: 1rem; line-height: 1.55; }
.tariff__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 2px; }
.tariff__amount { font-family: var(--font-display); font-weight: 800; font-size: 1.875rem; letter-spacing: -0.02em; line-height: 1.1; }
.tariff__unit { color: var(--ink-muted); }
.tariff__badge {
  align-self: flex-start; padding: 5px 12px; border-radius: 999px;
  border: 1.5px dashed var(--ink); font-size: .8125rem; font-weight: 600;
}
.tariff .checklist { flex-grow: 1; align-content: start; padding-top: 14px; border-top: 1px solid var(--line); margin-top: 4px; }
.tariff .btn { margin-top: 6px; }
.tariff--featured { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.tariff--featured .tariff__tag, .tariff--featured .tariff__desc, .tariff--featured .tariff__unit { color: var(--on-dark-muted); }
.tariff--featured .tariff__badge { border: 0; background: var(--accent); color: var(--text); }
.tariff--featured .checklist { border-top-color: var(--line-dark); }
.tariff--featured .checklist .icon { color: var(--accent); }
.tariff__flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; background: var(--accent); color: var(--text);
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- Повзунок і вибір (сторінка «Потік») ---------- */

input[type="range"] {
  --fill: 50%;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; margin: 10px 0 0; background: transparent; cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(to right, var(--ink) 0 var(--fill), var(--line) var(--fill) 100%);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--ink);
}
input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: var(--line); }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--ink); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 2px solid var(--ink); }
input[type="range"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.choice__legend { padding: 0; margin-bottom: 12px; font-weight: 600; font-size: 1.0625rem; }

/* ---------- Знижки ---------- */
.discounts { display: grid; gap: 20px; }

.discount { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--radius-l); background: var(--paper); border: var(--border); }
.discount__value { font-family: var(--font-display); font-weight: 800; font-size: 3.25rem; line-height: 1; letter-spacing: -0.03em; }
.discount .h3 { margin-top: 8px; }
.discount__tariff { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); font-size: .8125rem; font-weight: 600; }
.discount p:last-child { color: var(--ink-muted); }
.discount-notes { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 28px; font-weight: 500; font-size: .975rem; }
.discount-notes li { display: inline-flex; align-items: center; gap: 8px; }
.discount-notes .icon { color: var(--accent-ink); }
.discount-notes--col { flex-direction: column; }
.discount-notes--col li { align-items: flex-start; }
.discount-notes--col .icon { flex: none; margin-top: .2em; }

/* ---------- Контакти й заявка ---------- */
.contact { background: var(--dark); color: var(--on-dark); padding-block: var(--section-y); border-top: var(--border); }
.contact__grid { display: grid; gap: 40px; align-items: start; }

.contact__lead { margin-top: 14px; color: var(--on-dark-muted); font-size: 1.125rem; max-width: 46ch; }
.contacts { display: grid; gap: 12px; margin-top: 28px; }
.contacts li { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 1.0625rem; }
.contacts small { display: block; font-weight: 500; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }
.contacts__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--on-dark); flex-shrink: 0; }
.founder { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-dark); color: var(--on-dark-muted); font-size: .975rem; }
.founder b { color: var(--on-dark); }

.lead-form { min-width: 0; padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-l); background: var(--paper); color: var(--text); }
.lead-form__title { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.01em; }
.lead-form__grid { display: grid; gap: 14px; margin-top: 18px; }

.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field label { font-size: .9375rem; font-weight: 600; }
.req { color: var(--danger); }
.field input, .field select {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1.5px solid var(--field-line); border-radius: 12px; background: var(--paper); font-size: 1rem;
}
.field input::placeholder { color: var(--placeholder); }
.field input:hover, .field select:hover { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--ink); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.field input[type="number"]::-webkit-inner-spin-button, .field input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.field input.is-filled, .field select.is-filled { animation: filled 1.4s ease-out; }
@keyframes filled { 0%, 35% { background: var(--accent-soft); border-color: var(--ink); } }

/* Розрахунок з калькулятора в заявці */
.order-note {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 16px;
  padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); border: 1.5px solid var(--ink);
  font-size: .9375rem; line-height: 1.45;
}
.order-note[hidden] { display: none; }
.order-note > .icon { margin-top: 2px; }
.order-note__text { flex: 1; min-width: 0; }
.order-note__label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.order-note__clear {
  width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; margin: -4px -4px 0 0; padding: 0;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
}
.order-note__clear:hover { background: var(--paper); }
.order-note__clear .icon { width: 18px; height: 18px; }
.field__error { color: var(--danger); font-size: .875rem; font-weight: 500; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-size: .9375rem; line-height: 1.5; color: var(--ink-muted); cursor: pointer; }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--ink); }
.consent a { color: var(--text); text-underline-offset: 3px; }
.lead-form .btn { margin-top: 18px; }
.lead-form__status { margin-top: 14px; padding: 14px 16px; border-radius: 12px; font-weight: 500; font-size: .975rem; background: var(--alt); }
.lead-form__status.is-ok { background: var(--success-soft); color: var(--success); }
.lead-form__status.is-error { background: var(--danger-soft); color: var(--danger); }
.lead-form__note { margin-top: 12px; text-align: center; font-size: .875rem; color: var(--ink-muted); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 40px; }

.faq__intro .link-arrow { margin-top: 20px; }
.faq__list { border-top: var(--border); }
.faq__item { border-bottom: var(--border); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { width: 24px; height: 24px; transition: transform .2s ease; }
.faq__item[open] summary .icon { transform: rotate(45deg); }
.faq__item p { padding-bottom: 22px; max-width: 64ch; color: var(--ink-muted); }

/* ---------- Футер ---------- */
.site-footer { background: var(--dark); color: var(--on-dark-muted); padding-block: 56px 32px; font-size: .9375rem; }
.site-footer__grid { display: grid; gap: 32px; }
@media (min-width: 768px) {
  .platforms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .site-footer__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.site-footer__brand p { margin-top: 14px; max-width: 36ch; }
.site-footer__label { margin-bottom: 12px; color: var(--on-dark); font-weight: 600; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; }
.site-footer__col ul { display: grid; gap: 8px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-dark); font-size: .875rem; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer__legal a[aria-current="page"] { color: var(--on-dark); }

/* ---------- Внутрішні сторінки ---------- */

.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: .875rem; color: var(--ink-muted); margin-bottom: 20px; }
.breadcrumb a { color: var(--ink-muted); }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll--framed { border-radius: var(--radius-m); background: var(--paper); border: var(--border); }
.compare { width: 100%; min-width: 760px; border-collapse: collapse; }
.compare th, .compare td { padding: 18px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.45; }
.compare thead th { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }
.compare tbody th { width: 180px; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.compare tbody td { color: var(--ink-muted); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }

.split { display: grid; gap: 48px; align-items: center; }
.split--top { align-items: start; }
.split__text { min-width: 0; }

@media (min-width: 1200px) and (max-height: 880px) { #lead .h2 { font-size: 1.625rem; } #lead .section-lead { font-size: 1rem; } }

.sheet { min-width: 0; border-radius: var(--radius-m); background: var(--paper); border: var(--border); overflow: hidden; }
.sheet__bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--ink); color: var(--on-dark); font-size: .875rem; font-weight: 500; }
.sheet__dots { display: inline-flex; gap: 6px; }
.sheet__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-dark); }
.sheet__dots i:first-child { background: var(--accent); }
.sheet__table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: .9375rem; }
.sheet__table th { padding: 12px 16px; text-align: left; white-space: nowrap; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--line); }
.sheet__table td { padding: 13px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sheet__table tr:last-child td { border-bottom: 0; }
.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--alt); font-size: .8125rem; font-weight: 500; }
.tag--yes { background: var(--success-soft); color: var(--success); }
.sheet__foot { padding: 12px 18px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: .8125rem; }

.vacancies { display: grid; gap: 28px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 10px 18px; border-radius: 999px; border: var(--border); background: var(--paper); font-weight: 600; font-size: 1rem; }
.industries { display: grid; gap: 12px; }

.industries li { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: var(--radius-m); border: var(--border); background: var(--paper); }
.industries .icon { width: 28px; height: 28px; margin-bottom: 6px; }
.industries span { color: var(--ink-muted); font-size: .9375rem; line-height: 1.45; }

/* ---------- 404 ---------- */
.notfound { min-height: 100vh; display: grid; place-items: center; padding-block: 64px; }
.notfound__inner { display: grid; justify-items: start; gap: 20px; max-width: 720px; }
.notfound__code { font-family: var(--font-display); font-weight: 800; font-size: clamp(5rem, 18vw, 9rem); line-height: 1; letter-spacing: -0.04em; margin-top: 24px; }
.notfound__code span { background-image: linear-gradient(transparent 60%, var(--accent) 60%, var(--accent) 92%, transparent 92%); }
.notfound .btn { margin-top: 12px; }

/* ---------- Сторінка «Потік» ---------- */
.section--first .breadcrumb { margin-bottom: 14px; }
.section--first .h1 { font-size: clamp(2rem, 1.2rem + 2.2vw, 2.75rem); }
.vol { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1024px) { .vol { grid-template-columns: minmax(0, 1fr) 500px; gap: 24px; } }

.vol__pick {
  display: grid; gap: clamp(20px, 3vh, 28px); min-width: 0;
  padding: clamp(22px, 3vw, 30px); border-radius: var(--radius-l);
  background: var(--paper); border: var(--border);
}
.segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.segmented__opt { position: relative; display: block; cursor: pointer; min-width: 0; }
.segmented__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented__opt span {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  height: 100%;
  border: var(--border);
  border-radius: 12px;
  background: var(--paper);
  font-weight: 700;
  line-height: 1.25;
  transition: background-color .15s ease, color .15s ease;
}
.segmented__opt small { font-weight: 500; font-size: .8125rem; color: var(--ink-muted); }
.segmented__opt:hover span { background: var(--accent-soft); }
.segmented__opt input:checked + span { background: var(--ink); color: var(--on-dark); }
.segmented__opt input:checked + span small { color: var(--on-dark-muted); }
.segmented__opt input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

.qty__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.qty__head .choice__legend { margin-bottom: 0; }

.qty__row { display: flex; align-items: stretch; gap: 8px; margin-top: 12px; }
.qty__btn {
  width: 56px; flex-shrink: 0; display: grid; place-items: center; padding: 0;
  border: var(--border); border-radius: 12px; background: var(--paper); cursor: pointer;
}
.qty__btn:hover:not(:disabled) { background: var(--accent-soft); }
.qty__btn:disabled { opacity: .35; cursor: not-allowed; }
.qty__input {
  flex: 1; min-width: 0; min-height: 56px; padding: 6px 12px; text-align: center;
  border: var(--border); border-radius: 12px; background: var(--paper);
  font-family: var(--font-display); font-weight: 800; font-size: 1.875rem; letter-spacing: -0.02em;
  -moz-appearance: textfield; appearance: textfield;
}
.qty__input::-webkit-inner-spin-button, .qty__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty__input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.qty__presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.qty__presets button {
  min-height: 44px; padding: 6px; border: 1.5px solid var(--field-line); border-radius: 10px; background: var(--paper);
  font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.qty__presets button:hover { border-color: var(--ink); background: var(--accent-soft); }
.qty__presets button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.qty__hint {
  display: inline-flex;
  margin-top: 12px;
  padding: 6px 12px;
  border: 1.5px dashed var(--ink);
  font-size: .875rem;
  font-weight: 600;
}
.qty__hint.is-done { border-style: solid; border-color: var(--success); background: var(--success-soft); color: var(--success); }
.checklist--cols { gap: 8px 20px; }

.checklist--cols .icon { color: var(--accent-ink); }

.vol__price {
  position: sticky; top: calc(var(--header-h) + 20px);
  padding: clamp(22px, 3vw, 30px); border-radius: var(--radius-l);
  background: var(--dark); color: var(--on-dark);
}

.vol__unit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.vol__unit-num { font-family: var(--font-display); font-weight: 800; font-size: 2.625rem; line-height: 1; letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
.vol__unit-suffix { font-weight: 600; }

.vol__prices { padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line-dark); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vol__prices:has(.vol__unit--next[hidden]) { grid-template-columns: 1fr; }
.vol__prices .vol__unit { flex-direction: column; gap: 4px; min-width: 0; }
.vol__prices .vol__unit-num { font-size: clamp(1.625rem, 2.4vw, 2.25rem); white-space: nowrap; }
.vol__unit-line { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.vol__old { color: var(--on-dark-muted); font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.125rem); text-decoration-thickness: 2px; }
.vol__old[hidden] { display: none; }
.vol__unit--next { padding-left: 16px; border-left: 1px solid var(--line-dark); }
.vol__unit--next[hidden] { display: none; }
.vol__unit--next > p:last-child { display: flex; flex-direction: column; gap: 4px; }
.vol__unit-cap[hidden] { display: none; }
.vol__unit-cap { margin: 0 0 2px; font-size: .8125rem; line-height: 1.35; color: var(--on-dark-muted); white-space: nowrap; }

.vol__total {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-dark);
}
.vol__total span { font-weight: 600; }
.vol__total.vol__total--next { margin-top: 0; padding-top: 6px; border-top: 0; }

.vol__total strong span { font-weight: inherit; }

.vol__total--lost { color: var(--accent); }
.vol__total--lost strong { color: #FF6B5E; }

.vol__total > span { display: inline-flex; align-items: center; gap: 8px; }
.vol__pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-style: normal; font-weight: 700; font-size: .875rem; line-height: 1.3; color: var(--text); }

.vol__pill--lost { background: #FF6B5E; }
.vol__total--next[hidden] { display: none; }
.vol__total:not(#vol-save-row2):not(.vol__total--good):not(.vol__total--lost) > span { font-weight: 400; }
.vol__total:not(#vol-save-row2):not(.vol__total--good):not(.vol__total--lost) > strong { font-family: var(--font-body); font-weight: 500; }
.vol__total strong { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; font-variant-numeric: tabular-nums; }

/* ---------- Сторінка «Знижки» ---------- */
.compare--plain { min-width: 640px; }
.compare--plain thead th { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); font-family: var(--font-body); }
.compare--plain tbody th { width: auto; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); }
.compare--plain tbody td { color: var(--text); }

.compare--prices td { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.compare__best { background: var(--accent-soft); }
.tag--disc { background: var(--alt); font-weight: 600; margin-left: 6px; }
.tag--best { background: var(--ink); color: var(--accent); font-weight: 700; margin-left: 6px; }

/* ---------- Сторінка «Про нас» ---------- */
.story { display: grid; gap: 14px; min-width: 0; padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-l); border: var(--border); background: var(--alt); }
.story p { color: var(--ink-muted); }
.about-founder { display: grid; gap: 32px; align-items: center; }

.about-founder__photo {
  aspect-ratio: 4 / 5; width: 100%; max-width: 420px; display: grid; place-items: center;
  border-radius: var(--radius-l); border: 1.5px dashed var(--ink); background: var(--paper);
  color: var(--ink-muted); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .875rem;
}
@media (min-width: 1200px) and (max-height: 880px) { .about-founder__photo { max-width: 340px; } }
.about-founder__text .checklist { margin-top: 24px; }
.about-founder__text .checklist .icon { color: var(--accent-ink); }

.socials { display: grid; gap: 16px; }
@media (min-width: 640px) {
  .lead-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .industries { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .checklist--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .socials { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 40px; }
  .hero__visual { justify-content: flex-end; padding-right: 8px; }
  .lead-feed { left: -16px; bottom: 4px; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .step:not(:last-child)::after {
    content: ""; position: absolute; top: 49px; left: calc(100% + 1px); width: 22px;
    border-top: 1.5px dashed var(--ink);
  }
  .tariffs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calc { grid-template-columns: minmax(0, 1fr) 500px; gap: 24px; }
  .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; }
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
 .socials { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.social { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 22px; border-radius: var(--radius-m); border: var(--border); background: var(--paper); font-weight: 600; font-size: 1.0625rem; overflow-wrap: anywhere; }
.social small { display: block; font-weight: 500; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.social__icon { width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--accent); }
.social__icon .icon { width: 24px; height: 24px; }

/* Слайдер «Про нас»: гортаємо вбік стрілками, крапками або свайпом */
.slider { position: relative; }
.slider__track {
  display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  scrollbar-width: none; transition: height .3s ease;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; padding-bottom: calc(var(--section-y) + 72px); }
.slider__nav { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 20; display: flex; justify-content: center; padding-inline: var(--gutter); pointer-events: none; }
/* Великі стрілки по боках */
.slider__side {
  position: absolute;
  top: 50%;
  z-index: 20;
  transform: translateY(-50%);
  width: 72px;
  height: 200px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
/* у 2,5 раза більші за попередні (26×72 → 65×180) */
.slider__side svg { width: 65px; height: 180px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.slider__side:hover, .slider__side:focus-visible { color: var(--accent); }
.slider__side--prev { left: max(12px, calc(50% - var(--container) / 2 - 36px)); }
.slider__side--next { right: max(12px, calc(50% - var(--container) / 2 - 36px)); }
/* щоб великі стрілки не налазили на картки – ширші бокові поля у слайдах */

.slider__side { opacity: 0; visibility: hidden; transition: color .15s ease, opacity .2s ease, visibility .2s; }
.slider.is-inview .slider__side { opacity: 1; visibility: visible; }
@media (min-width: 900px) { .slider__bar .slider__btn { display: none; } }

.slider__nav { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; }
.slider.is-inview .slider__nav { opacity: 1; visibility: visible; }
.slider__bar {
  pointer-events: auto; display: flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 6px; border-radius: 999px; background: var(--paper); border: var(--border);
}
.slider__btn, .slider__dot {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  border-radius: 999px; font-weight: 600; font-size: .9375rem; cursor: pointer; white-space: nowrap;
}
.slider__btn { width: 44px; padding: 0; flex-shrink: 0; border: 1.5px solid var(--ink); background: var(--paper); }
.slider__btn--prev .icon { transform: rotate(180deg); }
.slider__btn--next { background: var(--ink); color: var(--on-dark); }
.slider__btn--next:hover:not(:disabled) { background: var(--dark-raised); }
.slider__btn--prev:hover:not(:disabled) { background: var(--accent-soft); }
.slider__btn:disabled { opacity: .35; cursor: default; }
.slider__dots { display: flex; gap: 4px; }
.slider__dot { padding: 0 12px; border: 0; background: transparent; color: var(--ink-muted); }
.slider__dot b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid currentColor; font-size: .75rem; }
.slider__dot:hover { color: var(--text); background: var(--alt); }
.slider__dot[aria-current="true"] { color: var(--text); }
.slider__dot[aria-current="true"] b { background: var(--accent); border-color: var(--ink); }
@media (max-width: 1149px) { .slider__dot span { display: none; } }

/* ---------- Текстові сторінки ---------- */
.doc { max-width: 72ch; }
.doc .h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); }
.doc__meta { margin-top: 12px; color: var(--ink-muted); font-size: .9375rem; }
.doc h2 { margin-top: 32px; }
.doc p, .doc__list { margin-top: 10px; color: var(--ink-muted); }
.doc__list { display: grid; gap: 8px; padding-left: 1.2em; list-style: disc; }

/* ---------- Кожна секція – на весь екран (комп'ютер від 1200px) ----------
   Після переходу з меню секція стає одразу під шапкою й займає рівно один екран. */
@media (min-width: 1200px) and (min-height: 640px) {
  :root { --section-y: clamp(24px, 4vh, 48px); }
  .hero, .section, .contact {
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    display: flex; flex-direction: column; justify-content: center;
  }
  .hero { padding-block: var(--section-y); }
  .section--doc { justify-content: flex-start; }
  .section-head { margin-bottom: clamp(20px, 3.5vh, 36px); }
}
/* Невисокі екрани ноутбуків (1366×768, 1440×900, 1536×864 з панелями браузера) – трохи щільніше */
@media (min-width: 1200px) and (min-height: 640px) and (max-height: 880px) {
  :root { --section-y: 18px; }
  .vol__price, .vol__pick { padding: 20px 22px; }
  .vol__price .eyebrow { margin-bottom: 8px; }
  
  .vol__price .btn--lg { min-height: 50px; padding-block: 10px; }
  
  .choice__legend { margin-bottom: 8px; }
  
  .h1 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem); }
  .h2 { font-size: clamp(1.625rem, 1rem + 1.5vw, 2.125rem); }
  .section-lead { font-size: 1.0625rem; margin-top: 8px; }
  .benefit { padding: 20px; gap: 8px; }
  .benefit__icon { width: 40px; height: 40px; }
  .benefit p, .step p { font-size: .9375rem; line-height: 1.5; }
  .grid-4 .card { padding: 20px; gap: 10px; }
  .compare th, .compare td { padding: 12px 20px; }
  .compare thead th { padding-block: 14px; }
  .platform { padding: 16px 22px; gap: 4px; }
  .platform__logo { top: 16px; right: 16px; width: 40px; height: 40px; }
  .platform__name { font-size: 1.625rem; }
  .platforms { margin-bottom: 12px; }
  .benefits-title { margin: 0 0 10px; font-size: 1.25rem; }
  .platforms-more { margin: 0 auto 12px; padding: 8px 20px; font-size: .9375rem; }
  .benefits--5 .benefit { padding: 14px 16px; gap: 6px 10px; }
  .benefits--5 .benefit__icon { width: 32px; height: 32px; }
  #benefits .section-head { margin-bottom: 18px; }
  .platform p:not(.platform__reach) { font-size: .9375rem; line-height: 1.5; }
  .grid-4 .card__icon { width: 40px; height: 40px; }
  .grid-4 .card p { font-size: .9375rem; line-height: 1.5; }
  .tariff { padding: 26px 22px 20px; gap: 10px; }
  .tariff .checklist { padding-top: 10px; }
  .checklist--tight { gap: 7px; }
  
  .discount { padding: 22px; }
  .discount__value { font-size: 2.75rem; }
  
  .lead-form__grid { gap: 12px; }
  .field input, .field select { min-height: 44px; }
  .contacts { margin-top: 20px; }
  .founder { margin-top: 20px; padding-top: 16px; }
  .section--first .h1 { font-size: 2.25rem; }
  .vol__pick { gap: 16px; }
  
  .qty__input { min-height: 50px; font-size: 1.625rem; }
  .qty__presets button { min-height: 40px; }
  .qty__hint { margin-top: 10px; }
  .vol__unit-num { font-size: 2.25rem; }
  
  .vol__total { margin-top: 10px; padding-top: 10px; }
  
}

#vol-cta { margin-top: 18px; }

#vol-unused-row > span { font-weight: 400; }
#vol-unused-row > strong { font-family: var(--font-body); font-weight: 500; }
@media (max-width: 480px) { .vol__prices .vol__unit-num { font-size: 1.625rem; } .vol__old { font-size: 1rem; } }

.vol__pay-old { font-family: var(--font-body); font-weight: 500; font-size: 1.0625rem; color: var(--on-dark-muted); margin-right: 6px; text-decoration-thickness: 2px; }
.vol__pay-old[hidden] { display: none; }
#vol-pay-row > strong { white-space: nowrap; }
#vol-pay-row { flex-wrap: wrap; }
.vol__pay-note { font-size: .8125rem; color: var(--on-dark-muted); }
.vol__pay-note[hidden] { display: none; }
.vol__econ { margin-top: 12px; padding: 4px 14px; border: 1px solid var(--line-dark); }
.vol__econ-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.vol__econ-row:not([hidden]) ~ .vol__econ-row:not([hidden]) { border-top: 1px solid var(--line-dark); }
.vol__econ-row[hidden] { display: none; }
.vol__econ-label { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.vol__econ-pill { flex: none; padding: 3px 10px; border-radius: 999px; background: #4ADE80; color: var(--text); font-size: .875rem; font-weight: 700; white-space: nowrap; }
.vol__econ-sum { flex: none; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: #4ADE80; }

.vol__econ:not(:has(.vol__econ-row:not([hidden]))) { display: none; }
@media (max-width: 480px) { .vol__econ-sum { font-size: 1.125rem; } .vol__econ-label { font-size: .9375rem; } }
@media (max-width: 380px) {  .vol__econ-sum { font-size: 1rem; }   }
/* Рядки знижок і економії: назва | % по центру | сума праворуч */
#vol-unused-row, .vol__econ-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
#vol-unused-row[hidden], .vol__econ-row[hidden] { display: none; }
#vol-unused-row > .vol__pill, .vol__econ-pill { justify-self: center; }
#vol-unused-row > strong, .vol__econ-sum { justify-self: end; }
/* До сплати: сума й підпис – по центру вільного місця */
#vol-pay-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
.vol__pay-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
#vol-pay-row strong { font-size: 2rem; line-height: 1.15; }
#vol-pay-row .vol__pay-old { font-size: 1.25rem; }
.vol__pay-note { flex-basis: auto; margin-top: 0; text-align: center; }
/* Ціни за відгук – по центру своїх колонок */
.vol__prices .vol__unit { align-items: center; text-align: center; }
.vol__unit--next > p:last-child { align-items: center; }
.vol__unit-line { justify-content: center; }
@media (max-width: 480px) { #vol-pay-row strong { font-size: 1.5rem; }  }
@media (max-width: 380px) {
  .vol__prices .vol__unit-num { font-size: 1.4375rem; }
  .vol__old { font-size: .9375rem; }
  .vol__unit-line { gap: 6px; }
  .vol__econ-label { font-size: .875rem; }
  .vol__econ-row { gap: 6px; }
 #vol-pay-row strong { font-size: 1.3125rem; } }
#vol-pay-row strong { font-family: var(--font-body); font-weight: 600; }

#vol-pay-row .vol__pay-old, #vol-pay { white-space: nowrap; }
@media (min-width: 481px) { #vol-unused-row > span { font-size: .9375rem; white-space: nowrap; } #vol-unused-row { column-gap: 10px; } }
.qty__hints { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.qty__hints .qty__hint { margin-top: 0; }
.qty__hint.is-lost { border-style: solid; border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.segmented__opt span { min-height: 48px; padding: 12px 16px; }
.qty__hint { border-radius: 16px; }
@media (min-width: 1360px) { .qty__hints { flex-wrap: nowrap; } .qty__hints .qty__hint { white-space: nowrap; } }
.container--vol { max-width: calc(var(--container) + 60px); }
@media (min-width: 1200px) {
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .vol { grid-template-columns: minmax(0, 1fr) 540px; }
 .qty__hints .qty__hint { font-size: .8125rem; padding-inline: 11px; } }
.vol__unit-line .vol__unit-suffix { margin-left: 2px; }
@media (max-width: 1199px) {
  .nav-toggle { display: inline-flex; }
  .site-header.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .site-header.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
 .vol__prices:has(#vol-unit2-box:not([hidden])) .vol__unit-line { flex-wrap: wrap; justify-content: center; row-gap: 2px; } .vol__prices:has(#vol-unit2-box:not([hidden])) .vol__unit-suffix { flex-basis: 100%; text-align: center; } }
@media (max-width: 480px) {
  .vol__unit-cap { font-size: .6875rem; }
  #vol-pay-row .vol__pay-old { font-size: 1rem; }
  #vol-unused-row, .vol__econ-row { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; }
  
 #vol-unused-row > span { font-size: .875rem; } #vol-unused-row > strong { font-size: 1.0625rem; } }
/* Блок ціни: однакові відступи від країв, рядки на всю ширину */
.vol__price > :first-child { margin-top: 0; }
.vol__price > :last-child { margin-bottom: 0; }
.vol__econ { padding-inline: 0; border-inline: 0; border-bottom: 0; border-radius: 0; }
#vol-unused-row[hidden] + .vol__econ { border-top: 0; margin-top: 0; }
.discount__tariffs { display: flex; flex-wrap: wrap; gap: 6px; }

/* Посилання на Telegram у картках контактів */
.socials > li { display: flex; min-width: 0; }
.social--link { flex: 1; color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.social--link:hover { border-color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent-ink); }
.contacts__link { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.contacts__link:hover .contacts__icon { border-color: var(--accent); color: var(--accent); }

/* Значки соцмереж (футер і блок контактів) */
.social-icons { display: flex; gap: 12px; margin-top: 16px; }
.social-icons a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--on-dark); color: var(--on-dark); transition: color .2s, border-color .2s; }
.social-icons a:hover { color: var(--accent); border-color: var(--accent); }
.social-icons .icon { width: 20px; height: 20px; }
.social-icons--contact { margin-top: 20px; }
.social-icons--contact a { width: 46px; height: 46px; }
.site-footer__col .social-icons { display: flex; }

/* Вікно входу до кабінету роботодавця */

.fbl-overlay{position:fixed;inset:0;z-index:2147483000;background:rgba(34,43,69,.55);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s linear .2s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.fbl-overlay.fbl-on{opacity:1;visibility:visible;transition:opacity .2s}
.fbl-modal{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow-y:auto;background:#FFFDF8;border-radius:28px;box-shadow:0 24px 80px rgba(34,43,69,.35);padding:40px 40px 34px;text-align:center;font:400 15px/1.5 Inter,system-ui,sans-serif;color:#222B45;transform:translateY(12px) scale(.98);transition:transform .2s}
.fbl-on .fbl-modal{transform:none}
.fbl-modal *{box-sizing:border-box}
.fbl-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:#6B7184;cursor:pointer;display:grid;place-items:center}
.fbl-close:hover{background:#F7F1E3;color:#222B45}
.fbl-logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px}
.fbl-logo .fbl-i{width:38px;height:44px}.fbl-logo .fbl-w{width:122px;height:30px}
.fbl-title{font:800 19px/1.3 Montserrat,Inter,system-ui,sans-serif;margin:0 0 22px;color:#222B45}
.fbl-field{position:relative;margin-bottom:14px}
.fbl-input{width:100%;height:54px;border:1.5px solid #E8E0CC;border-radius:999px;background:#fff;padding:0 22px;font:500 15px Inter,system-ui,sans-serif;color:#222B45;text-align:center;outline:none;transition:border-color .15s,box-shadow .15s}
.fbl-input::placeholder{color:#6B7184}
.fbl-input:focus{border-color:#F5A623;box-shadow:0 0 0 4px #FDEFD3}
.fbl-input.fbl-pw{padding:0 52px}
.fbl-eye{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:transparent;color:#6B7184;cursor:pointer;border-radius:50%;display:grid;place-items:center}
.fbl-eye:hover{color:#222B45}
.fbl-link{background:none;border:0;padding:0;font:500 15px Inter,system-ui,sans-serif;color:#222B45;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fbl-link:hover{color:#C9840F}
.fbl-check{display:inline-flex;align-items:center;gap:9px;margin:18px 0 20px;font-size:14px;color:#4A5068;cursor:pointer;user-select:none}
.fbl-check input{width:17px;height:17px;accent-color:#222B45;margin:0}
.fbl-submit{width:100%;height:54px;border:0;border-radius:999px;background:#F5A623;color:#222B45;font:700 16px Inter,system-ui,sans-serif;cursor:pointer;transition:background .15s,transform .05s}
.fbl-submit:hover{background:#EC9A12}.fbl-submit:active{transform:translateY(1px)}
.fbl-submit:disabled{opacity:.6;cursor:default}
.fbl-err{min-height:20px;margin:12px 0 0;color:#C2413A;font-size:14px}
.fbl-ok{margin:14px 0 0;color:#2E8B57;font-size:14px}
.fbl-reg{display:inline-block;margin-top:22px;font:700 17px Montserrat,Inter,system-ui,sans-serif;color:#E07B14;text-decoration:underline;text-underline-offset:4px}
.fbl-reg:hover{color:#C2650A}
.fbl-tg{margin:16px 0 0;font-size:13px;color:#6B7184}
.fbl-tg a{color:#222B45;font-weight:600}
.fbl-sub{margin:-10px 0 20px;color:#6B7184;font-size:14px}
.fbl-hidden{display:none!important}
.fbl-lock{overflow:hidden!important}
@media (max-width:480px){.fbl-modal{padding:34px 22px 28px;border-radius:24px}.fbl-title{font-size:17px}}
.fbl-back { margin: 20px 0 0; }
.lead__cta { margin-top: 28px; }
/* «Про FindBee» – текст історії в бежевій картці по центру */
.story--center { margin-inline: auto; gap: 16px; }
.story--center p { font-size: 1.0625rem; line-height: 1.65; }
/* Засновник: блок про досвід під фото й текстом */
.about-founder__exp { display: grid; gap: 12px; padding: clamp(20px, 2.6vw, 28px); border-radius: var(--radius-l); border: var(--border); background: var(--alt); color: var(--ink-muted); }

@media (min-width: 900px) {
  .about-founder { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 28px 48px; }
  .about-founder__photo { max-width: 280px; }
}
@media (max-width: 899px) { .about-founder__photo { max-width: 260px; margin-inline: auto; } }

/* Фото засновника */
.about-founder__photo--img { margin-block: 0; padding: 0; overflow: hidden; border: var(--border); border-style: solid; background: var(--dark); }
.about-founder__photo--img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* Кнопка LinkedIn під фото засновника */
.about-founder__side { display: grid; gap: 14px; width: 100%; max-width: 280px; }
.about-founder__side .about-founder__photo { max-width: none; }

.li-btn { display: grid; place-items: center; min-height: 52px; padding: 12px 16px; border-radius: var(--radius-m); background: #2d65bc; transition: background-color .2s, transform .15s; }
.li-btn:hover { background: #2559a8; transform: translateY(-1px); }
.li-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.li-btn img { display: block; height: 26px; width: auto; }
/* Засновник: компактніше, ближче до центру */
@media (min-width: 900px) {
  .container.about-founder { max-width: 1060px; grid-template-columns: 280px minmax(0, 1fr); column-gap: 40px; }
  
}

/* «Про FindBee»: картка за шириною як слайд «Засновник» */

@media (min-width: 900px) {
  .story--center { padding: 56px 64px; align-content: center; min-height: min(620px, calc(100vh - 280px)); }
  .story--center p { font-size: 1.1875rem; line-height: 1.75; }
}
@media (min-width: 900px) and (max-height: 860px) {  .story--center p { font-size: 1.0625rem; line-height: 1.7; } }
/* «Про FindBee» і «Засновник» – однакова ширина */
.story--center { max-width: none; }
@media (min-width: 900px) { .container.about-story { max-width: 1060px; } }

.founder__role { margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--accent-ink); letter-spacing: .01em; }
.founder__role + .section-lead { margin-top: 14px; }
@media (min-width: 900px) and (max-height: 920px) {
  #about-founder .section-lead { font-size: 1rem; margin-top: 10px; }
  #about-founder .checklist { margin-top: 14px; gap: 8px; }
  #about-founder .checklist li { font-size: .95rem; line-height: 1.5; }
  .about-founder__exp { font-size: .95rem; line-height: 1.55; }
}
@media (min-width: 900px) { .container.about-kontakty { max-width: 1060px; } }
@media (min-width: 900px) and (max-height: 860px) {
  .container.about-founder { grid-template-columns: 240px minmax(0, 1fr); max-width: 1120px; row-gap: 22px; }
  .about-founder__side { max-width: 240px; }
  .about-founder__exp { padding-block: 18px; }
  .story--center { padding: 40px 52px; }
  .container.about-story { max-width: 1120px; }
  .story--center { max-width: none; }
 .container.about-kontakty { max-width: 1120px; } }

/* ---------- Декор: соти на задньому фоні ---------- */
.hero, .contact, .site-footer, #faq { position: relative; isolation: isolate; overflow: hidden; }
.hero::before, .hero::after,
.contact::before, .contact::after, .site-footer::before, #faq::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: no-repeat center / contain;
}
/* перший екран – світлий фон, соти ледь помітні */
.hero::before { background-image: url(../img/honeycomb-1.svg); width: clamp(160px, 18vw, 260px); aspect-ratio: 200 / 168; top: 24px; left: -40px; opacity: .22; }
.hero::after  { background-image: url(../img/honeycomb-2.svg); width: clamp(120px, 12vw, 180px); aspect-ratio: 137 / 150; bottom: 18px; right: -30px; opacity: .22; }
/* блок «Контакти» біля форми – темний фон, як у ваших постах */
.contact::before { background-image: url(../img/honeycomb-1.svg); width: clamp(180px, 20vw, 300px); aspect-ratio: 200 / 168; opacity: .55; }
.contact::after { background-image: url(../img/honeycomb-2.svg); width: clamp(130px, 13vw, 200px); aspect-ratio: 137 / 150; opacity: .45; }

.site-footer::before { background-image: url(../img/honeycomb-2.svg); width: clamp(110px, 10vw, 160px); aspect-ratio: 137 / 150; opacity: .25; }
#faq::before { background-image: url(../img/honeycomb-2.svg); width: clamp(120px, 12vw, 180px); aspect-ratio: 137 / 150; bottom: 24px; left: -36px; }
@media (max-width: 640px) {
  .hero::before { width: 130px; top: 8px; left: -50px; opacity: .16; }
  
  .contact::before { width: 150px; opacity: .4; }
  .contact::after { width: 110px; opacity: .35; }
  
}

@media (max-width: 640px) { .hero::before { display: none; } .hero::after { display: block; width: 110px; right: -36px; bottom: 10px; opacity: .2; } }

/* ---------- Ще соти по сайту ---------- */
#problem, #benefits, #vacancies, #how, #lead, #tariffs,
#about-story, #about-founder, #about-kontakty,
#all, #example, #config, .section--doc { position: relative; isolation: isolate; overflow: hidden; }
#problem::before, #benefits::before, #vacancies::before, #how::before, #lead::before,
#tariffs::before, #tariffs::after,
#about-story::before, #about-founder::before, #about-kontakty::before,
#all::before, #example::before, #config::before, .section--doc::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: no-repeat center / contain; opacity: .38;
  width: clamp(130px, 14vw, 220px); aspect-ratio: 200 / 168; background-image: url(../img/honeycomb-1.svg);
}
/* друга форма сот – інша пропорція */
#benefits::before, #how::before, #tariffs::after, #about-founder::before, #example::before, .section--doc::before {
  background-image: url(../img/honeycomb-2.svg); aspect-ratio: 137 / 150; width: clamp(110px, 11vw, 170px);
}
#problem::before   { top: 28px; right: -40px; }
#benefits::before  { bottom: 90px; left: -36px; }
#vacancies::before { top: 30px; left: -50px; }
#how::before       { bottom: 100px; right: -30px; }
#lead::before      { top: 24px; right: 30%; opacity: .3; }
#tariffs::before   { top: 40px; left: -46px; }
#tariffs::after    { bottom: 30px; right: -30px; }
#about-story::before   { bottom: 90px; left: -40px; }
#about-founder::before { top: 30px; right: -28px; }
#about-kontakty::before { bottom: 90px; right: -44px; }
#all::before     { top: 60px; right: -40px; }
#example::before { bottom: 90px; left: -30px; }
#config::before  { top: 40px; right: -46px; }
.section--doc::before { top: 90px; right: -28px; opacity: .3; }
/* соти трохи помітніші після потовщення ліній */
.hero::before, .hero::after { opacity: .3; }
#faq::before { opacity: .45; }
@media (max-width: 640px) {
  #problem::before, #benefits::before, #vacancies::before, #how::before, #lead::before,
  #tariffs::before, #tariffs::after, #about-story::before, #about-founder::before, #about-kontakty::before,
  #all::before, #example::before, #config::before, .section--doc::before { width: 100px; opacity: .25; }
  
}

/* Соти не обрізаються на межі блоків: виходять лише за бокові краї екрана */
.contact::before { top: 24px; right: 3%; }
.contact::after  { bottom: 16px; left: -40px; }

/* Легке «плавання» сот. Анімуються лише зсув і поворот – це рахує відеокарта, сторінку не навантажує */
.hero::before, .hero::after, .contact::before, .contact::after, .site-footer::before, #faq::before,
#problem::before, #benefits::before, #vacancies::before, #how::before, #lead::before, #tariffs::before, #tariffs::after,
#about-story::before, #about-founder::before, #about-kontakty::before, #all::before, #example::before, #config::before, .section--doc::before {
  animation: hc-float 14s ease-in-out infinite;
}
.hero::after, .contact::after, #benefits::before, #how::before, #tariffs::after, #about-founder::before, #example::before, .site-footer::before { animation-delay: -6s; animation-direction: reverse; }
#problem::before, #lead::before, #about-kontakty::before, #config::before { animation-delay: -3s; }

.site-footer::before { top: auto; bottom: 70px; right: -30px; }

/* Усі соти одного розміру й товщини (як у блоці контактів) */
.hero::before, .contact::before, #problem::before, #vacancies::before, #lead::before,
#tariffs::before, #about-story::before, #about-kontakty::before, #all::before, #config::before { width: 275px; }
.hero::after, .contact::after, .site-footer::before, #faq::before, #benefits::before, #how::before,
#tariffs::after, #about-founder::before, #example::before, .section--doc::before { width: 190px; }
@media (max-width: 640px) {
  #faq::before { display: none; }
  #lead::before, #tariffs::after, #example::before { display: none; }
  .hero::before, .contact::before, #problem::before, #vacancies::before, #lead::before,
  #tariffs::before, #about-story::before, #about-kontakty::before, #all::before, #config::before { width: 165px; }
  .hero::after, .contact::after, .site-footer::before, #faq::before, #benefits::before, #how::before,
  #tariffs::after, #about-founder::before, #example::before, .section--doc::before { width: 115px; }
}
/* Плавання швидше й з більшою амплітудою */
@keyframes hc-float {
  0%   { translate: 0 0;        rotate: 0deg; }
  33%  { translate: 14px -18px; rotate: 3deg; }
  66%  { translate: -10px -8px; rotate: -2deg; }
  100% { translate: 0 0;        rotate: 0deg; }
}
.hero::before, .contact::before, #faq::before, #vacancies::before, #tariffs::before,
#about-story::before, #all::before, .section--doc::before { animation-duration: 9s; }
.hero::after, .contact::after, #benefits::before, #how::before, #tariffs::after, #about-founder::before, #example::before, .site-footer::before { animation-duration: 11s; }
#problem::before, #lead::before, #about-kontakty::before, #config::before { animation-duration: 8s; }
.hero::before, .contact::before, #lead::before, #problem::before { top: 36px; }
.post__avatar img { width: 22px; height: 22px; display: block; }

/* ---------- Смартфони: щільніше, без великих порожніх розривів між блоками ---------- */
@media (max-width: 899px) {
  :root { --section-y: 40px; }

}

.doc { overflow-wrap: anywhere; }
.doc__list { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 479px) {
  :root { --section-y: 32px; }
  .platform__logo { width: 40px; height: 40px; top: 18px; right: 18px; }
  .platform__reach { font-size: .9375rem; margin-right: 44px; }
}

/* Смартфон: слайд «Виклики найму» – лише заголовки карток, усі 4 вміщаються на екран */
@media (max-width: 899px) {
  
  #problem .section-head { margin-bottom: 16px; }
  #problem .h2 { font-size: 1.5rem; line-height: 1.2; }
  
  #problem .card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 16px; }
  
  #problem .card .h3 { font-size: 1rem; line-height: 1.3; }
}

/* Смартфон: кожен блок – рівно на екран під шапкою, без «хвостів» наступного блоку */

/* Лише для телефона (слайд «Переваги» і його номер у панелі) */
@media (min-width: 900px) {
  .discounts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slider__slide > .container { padding-inline: max(var(--gutter), calc(96px - max(0px, (100vw - var(--container)) / 2))); }
  .discounts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-founder__exp { grid-column: 1 / -1; }
  .about-founder { align-items: start; }
  .about-founder__text { align-self: center; }
  .story--center { gap: 20px; }
 .m-only { display: none !important; } }

/* Телефон: слайд «Переваги» – компактні картки */
@media (max-width: 899px) {
  #why .benefits-title { margin: 0 0 16px; font-size: 1.5rem; line-height: 1.2; }
  #why .benefits { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #why .benefit { padding: 14px 16px; gap: 14px; }
  
  #why .benefit .h3 { font-size: 1rem; line-height: 1.3; }
  .benefits--5 .benefit:hover .h3, .benefits--5 .benefit:hover p { color: var(--on-dark); }
  .benefits--5 .benefit:hover .benefit__icon { color: var(--on-dark); border-color: var(--on-dark); }

  /* Картка, що розкривається: опис висувається знизу після натискання */
  .xcard, #problem .xcard, #why .xcard { grid-template-columns: auto minmax(0, 1fr) auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .xcard::after {
    content: ""; grid-column: 3; grid-row: 1; width: 10px; height: 10px; margin-right: 4px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg); transition: transform .25s ease;
  }
  
  .xcard p { display: none; grid-column: 1 / -1; margin: 0; font-size: .9375rem; line-height: 1.5; }
  .xcard.is-open p { display: block; padding-top: 10px; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 18%, transparent); animation: xcard-in .25s ease; }
  
  .benefits--5 .xcard.is-open .h3, .benefits--5 .xcard.is-open .benefit__icon { color: var(--accent); border-color: var(--accent); }

}
@keyframes xcard-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .logo__c { transition: none; }
  .slider__track { scroll-behavior: auto; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero::before, .hero::after, .contact::before, .contact::after, .site-footer::before, #faq::before,
  #problem::before, #benefits::before, #vacancies::before, #how::before, #lead::before, #tariffs::before, #tariffs::after,
  #about-story::before, #about-founder::before, #about-kontakty::before, #all::before, #example::before, #config::before, .section--doc::before { animation: none; }
 .xcard.is-open p { animation: none; } }

/* Телефон: слайд «Рішення» (TikTok / Facebook / Instagram) – на один екран, опис під натисканням */
@media (max-width: 899px) {
  #benefits .section-head { margin-bottom: 10px; }
  #benefits .h2 { font-size: 1.5rem; line-height: 1.2; }
  #benefits .section-lead { margin-top: 6px; font-size: .9375rem; line-height: 1.45; }
  
  #benefits .platform.xcard { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 14px 16px; }
  #benefits .platform__name { grid-column: 1; font-size: 1.25rem; }
  
  #benefits .xcard .platform__reach { display: block; grid-column: 1; margin: 0; justify-self: start; font-size: .875rem; }
  
  #benefits .platform.xcard.is-open p:not(.platform__reach) { margin-top: 2px; }
  #benefits .platforms-more { margin: 0; padding: 10px 14px; font-size: .875rem; line-height: 1.45; }
}
@media (max-width: 899px) { #benefits .platforms { gap: 8px; } }
@media (max-width: 379px), (max-width: 899px) and (max-height: 640px) {
  #benefits .h2, #problem .h2, #why .benefits-title { font-size: 1.3125rem; }
  #benefits .platform.xcard, #problem .xcard, #why .xcard { padding: 10px 14px; }
  #benefits .platform__name { font-size: 1.125rem; }
  #benefits .platforms-more { padding: 8px 12px; font-size: .8125rem; }
}
@media (max-width: 899px) { #benefits .xcard.is-open .platform__reach { padding: 2px 8px; border-top: 0; animation: none; } }
/* Телефон: лого соцмережі одразу біля назви, стрілка – по центру картки, як в інших розкривних картках */
@media (max-width: 899px) {

  #benefits .platform.xcard::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
@media (max-width: 899px) {
  #benefits .platform.xcard { row-gap: 4px; padding-block: 10px; }
  #benefits .platform__name { margin: 0; line-height: 1.1; }
}

/* Телефон: слайд «Для яких вакансій?» – лише три напрямки, під ними «Не знайшли свою позицію?» */
@media (max-width: 899px) {
  #vacancies .split { display: flex; flex-direction: column; gap: 16px; }
  #vacancies .split__text { display: contents; }
  #vacancies .h2 { order: 1; font-size: 1.5rem; line-height: 1.2; }
  #vacancies .section-lead, #vacancies .chips { display: none; }

  #vacancies .industries { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #vacancies .industries li { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 2px; padding: 14px 16px; }
  #vacancies .industries .icon { grid-row: 1 / span 2; width: 28px; height: 28px; margin: 0; }
  
  #vacancies .industries span { font-size: .9375rem; color: var(--ink-muted); }
}

/* Телефон: слайд «Як це працює?» – кроки як розкривні картки, кнопка під ними */
@media (max-width: 899px) {
  #how .container { display: flex; flex-direction: column; gap: 14px; }
  #how .section-head, #how .section-head > div { display: contents; }
  #how .h2 { font-size: 1.5rem; line-height: 1.2; }
  #how .section-lead { margin: -6px 0 0; font-size: .9375rem; line-height: 1.45; }

  #how .step.xcard { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px; }
  #how .step__num { width: 36px; height: 36px; margin: 0; font-size: 1rem; }
  #how .step .h3 { font-size: 1rem; line-height: 1.3; }
}
@media (max-width: 379px), (max-width: 899px) and (max-height: 640px) {
  #how .h2, #vacancies .h2 { font-size: 1.3125rem; }
  #how .step.xcard { padding: 9px 14px; }
  #how .section-lead { font-size: .875rem; }
  #how .container { gap: 10px; }
}

/* Телефон: слайд «Відгук – це теплий кандидат» – без таблиці-прикладу, усе на один екран */
@media (max-width: 899px) {

  #lead .eyebrow { margin-bottom: 6px; }
  #lead .h2 { font-size: 1.5rem; line-height: 1.2; }
  #lead .section-lead { margin-top: 10px; font-size: .9375rem; line-height: 1.45; }
  #lead .checklist { margin-top: 14px; gap: 8px; }
  #lead .checklist li { font-size: .9375rem; }
  
}
@media (max-width: 379px), (max-width: 899px) and (max-height: 640px) {
  #lead .h2 { font-size: 1.3125rem; }
  #lead .section-lead, #lead .checklist li { font-size: .875rem; }
}

/* Телефон: тарифи – коротко, перелік можливостей і кнопка під «Детальніше» */
.tariff__more {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; margin-top: 2px;
  border: 1.5px solid currentColor; border-radius: var(--radius-s, 10px); background: transparent; color: inherit;
  font: inherit; font-weight: 600; font-size: .9375rem; cursor: pointer;
}
.tariff__more .icon { width: 18px; height: 18px; transform: rotate(90deg); transition: transform .25s ease; }
.tariff.is-open .tariff__more .icon { transform: rotate(-90deg); }
@media (max-width: 899px) {
  #tariffs .section-head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }

  .tariff__tag { font-size: .75rem; }

}

/* Телефон: без підписів «Старт / Оплата за відгук / Індивідуальний», ціна – навпроти назви */
@media (max-width: 899px) {

  .tariff__tag { display: none; }
  .tariff > .tariff__name { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
  .tariff > .tariff__price { grid-column: 2; grid-row: 1; align-self: center; flex-direction: column; align-items: flex-end; gap: 0; margin: 0; text-align: right; }
  
  .tariff__unit { font-size: .8125rem; line-height: 1.2; }

}

@media (max-width: 379px) {
  .tariff__name { font-size: 1.25rem; }
  .tariff__amount { font-size: 1.125rem; }
}

/* Телефон: блок тарифів – щільніше, щоб усі три картки вміщалися на екран */
@media (max-width: 899px) {

  #tariffs .h2 { font-size: 1.625rem; }
  
  .tariff { grid-template-columns: minmax(min-content, 1fr) auto; }
  
  .tariff__flag { top: -11px; padding: 4px 10px; font-size: .6875rem; }
  .tariff__desc { font-size: .875rem; line-height: 1.4; }
  /* плашка і «Детальніше» – в одному рядку */
  .tariff > .tariff__badge { grid-column: 1; align-self: center; margin: 0; }
  .tariff > .tariff__more { grid-column: 2; align-self: center; width: auto; min-height: 36px; margin: 0; padding: 0 12px; font-size: .875rem; }
  .tariff__more .icon { width: 16px; height: 16px; }
  
}
@media (max-width: 899px) {

  .tariff__name { font-size: 1.375rem; }
  .tariff__amount { font-size: 1.25rem; }
  .tariff__badge { padding: 4px 9px; font-size: .75rem; line-height: 1.35; }
}
@media (max-width: 899px) {
  .tariff > .tariff__more { justify-self: end; }
  
  #tariffs .section-head { margin-bottom: 12px; }
}
@media (max-width: 359px) {
  .tariff { grid-template-columns: minmax(0, 1fr) auto; }
  .tariff > .tariff__badge { grid-column: 1 / -1; }
  .tariff > .tariff__more { grid-column: 1 / -1; justify-self: stretch; }
}
/* Телефон: соти в лівому верхньому куті першого екрана, як на комп'ютері */

/* Телефон: повідомлення про нові відгуки – вище, на екрані макета телефона */

/* Телефон: макет ближче до тексту, повідомлення – до лівого краю */
@media (max-width: 1023px) {
  .hero__visual { flex-direction: column; align-items: center; }
  .lead-feed { position: relative; width: min(280px, 100%); }
  .lead-card:nth-child(2) { transform: none; }
  .vol__price { position: static; }
  .lead-feed { margin-top: -146px; z-index: 2; }
  .post__cta { display: none; }
  .hero__grid { gap: 24px; }
  .hero__visual .lead-feed { align-self: flex-start; }
}
/* «Гнучкість»: плашка «Додаткова знижка 5%» в один рядок, як у «Потоці» */
@media (max-width: 899px) {

  #precision .tariff__amount { font-size: 1.125rem; }
}

/* Телефон: сторінка «Знижки» – компактні картки, усе на один екран */
@media (max-width: 899px) {
  
  #all .section-head { margin-bottom: 14px; }
  #all .h1 { font-size: 1.75rem; }
  #all .section-lead { margin-top: 4px; font-size: .9375rem; line-height: 1.45; }
  .discounts { gap: 10px; }
  
  .discount__value { grid-row: 1 / span 2; font-size: 2rem; }
  .discount .h3 { margin: 0; font-size: 1.0625rem; }
  .discount__tariff, .discount__tariffs { grid-column: 2; font-size: .75rem; padding: 2px 8px; }
  
  .discount > p:last-child { grid-column: 1 / -1; margin-top: 6px; font-size: .875rem; line-height: 1.45; }
  .discount-notes { margin-top: 14px; gap: 7px; font-size: .875rem; line-height: 1.4; }
  .discount-notes .icon { width: 16px; height: 16px; }
}
.notes-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 14px; min-height: 40px;
  border: 1.5px solid var(--ink); border-radius: var(--radius-s); background: var(--paper); color: var(--text);
  font: inherit; font-weight: 600; font-size: .9375rem; cursor: pointer;
}
.notes-more .icon { width: 18px; height: 18px; transform: rotate(90deg); transition: transform .25s ease; }
.notes-more.is-open .icon { transform: rotate(-90deg); }

/* Телефон: блок тарифів – по центру екрана по висоті */

/* Телефон: «Умови знижок» – на всю ширину, як картки знижок */

/* Телефон: таблиця цін «Потоку» – картками, без гортання вбік */
@media (max-width: 899px) {
  #example .section-head.section-head--row { gap: 14px; margin-bottom: 16px; }
  #example .h2 { font-size: 1.5rem; line-height: 1.2; }
  #example .section-lead { margin-top: 8px; font-size: .9375rem; line-height: 1.45; }

}

/* Телефон: сторінка «Потік» – компактніші форми */
@media (max-width: 899px) {
  
  #config .section-head { margin-bottom: 14px; }
  #config .h1 { font-size: 1.75rem; }
  #config .section-lead { margin-top: 4px; font-size: .9375rem; line-height: 1.45; }

  .segmented__opt span { min-height: 44px; padding: 8px 12px; justify-content: center; align-items: center; text-align: center; font-size: .9375rem; }

  .qty__hint { margin-top: 0; padding: 4px 10px; font-size: .75rem; line-height: 1.35; justify-self: start; }
  .vol__pick .checklist--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; font-size: .8125rem; line-height: 1.35; }

}
@media (max-width: 899px) {

  .vol__unit-cap { font-size: .6875rem; }

}

/* Телефон: «Про FindBee» – картка рівно на екран, текст гортається всередині (без смуги прокрутки) */
.story__scroll { display: grid; gap: inherit; }
@media (max-width: 899px) {
  
  #about-story .story--center .h2 { flex: none; font-size: 1.5rem; }

  #about-story .story__scroll p { font-size: .9375rem; line-height: 1.55; }
}
/* Суцільна смужка прокрутки тексту «Про FindBee» */
.story__bar { display: none; }

/* Телефон: «Засновник» – маленьке фото й LinkedIn ліворуч, ім'я та опис праворуч */
@media (max-width: 899px) {

  #about-founder .h2 { grid-column: 2; grid-row: 1; font-size: 1.5rem; line-height: 1.1; margin: 0; }
  #about-founder .founder__role { grid-column: 2; grid-row: 2; margin: -8px 0 0; font-size: .875rem; }
  #about-founder .section-lead { grid-column: 2; grid-row: 3; margin: -6px 0 0; font-size: .875rem; line-height: 1.45; }

}
.fx__head { font-weight: inherit; }
@media (max-width: 899px) {
  
  /* пункти досвіду: видно лише суть, подробиці – після натискання */
  
  #about-founder .checklist li.xcard::after { grid-column: 3; grid-row: 1; margin-top: 4px; width: 8px; height: 8px; }

  #about-founder .checklist { gap: 6px; }
  /* абзац про досвід: 3 рядки, решта – після натискання */
  
  .about-founder__exp.xcard p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; grid-column: 1; margin: 0; padding: 0; border: 0; font-size: .8125rem; line-height: 1.5; animation: none; }

}

/* Телефон: «Контакти» – компактні картки, усі 6 на один екран */
@media (max-width: 899px) {
  #about-kontakty .section-head { margin-bottom: 14px; }
  #about-kontakty .h2 { font-size: 1.5rem; }
  #about-kontakty .socials { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #about-kontakty .social { gap: 12px; padding: 10px 14px; border-radius: 14px; font-size: .9375rem; line-height: 1.25; }
  
  #about-kontakty .social__icon { width: 38px; height: 38px; }
  
}

/* Телефон: блок «Зробіть замовлення» – компактніше, контакти у дві колонки */
@media (max-width: 899px) {
  
  #contact .eyebrow { margin-bottom: 6px; font-size: .75rem; }
  #contact .h2 { font-size: 1.5rem; line-height: 1.2; }
  .contact__lead { margin-top: 8px; font-size: .9375rem; line-height: 1.45; }

  .social-icons--contact { gap: 10px; }

}

/* Телефон: «Часті питання» – компактний список */
@media (max-width: 899px) {
  
  #faq .h2 { font-size: 1.5rem; }
  #faq .section-lead { margin-top: 6px; font-size: .9375rem; line-height: 1.45; }
  
  .faq__item summary { gap: 12px; font-size: .9375rem; line-height: 1.3; }
  
  .faq__item p { padding-bottom: 14px; margin-top: -2px; font-size: .875rem; line-height: 1.5; }
}

@media (max-width: 899px) { #faq { --section-y: 28px; } .faq__item summary { padding: 9px 0; } }
@media (max-width: 379px), (max-width: 899px) and (max-height: 640px) {
  #about-kontakty .social { padding: 7px 12px; }
  #about-kontakty .social__icon { width: 34px; height: 34px; }
  #about-kontakty .section-head { margin-bottom: 10px; }
  #faq .h2 { font-size: 1.3125rem; }
  .faq__item summary { font-size: .875rem; }
  #faq .section-lead { font-size: .875rem; }
 #faq { --section-y: 20px; } .faq__item summary { padding: 7px 0; } }

/* Темне тло під футером – при «відскоку» сторінки внизу на телефоні не видно білої смуги */
html { background: var(--dark); }

/* Телефон: футер – компактніше, сторінки у дві колонки */
@media (max-width: 899px) {

  .site-footer__col ul:not(.social-icons) { gap: 6px; }

}

/* Телефон: контакти 2×2 – Telegram | Email, Телефон | Робочі години; соцмережі й бриф ближче */
@media (max-width: 899px) {
  
  .contacts li:nth-child(1) { order: 1; }
  .contacts li:nth-child(3) { grid-column: auto; order: 2; white-space: nowrap; }

}
@media (max-width: 899px) {
  .contacts { grid-template-columns: max-content max-content; justify-content: space-between; gap: 12px 6px; }
  
  .contacts li:nth-child(2) { white-space: nowrap; }
  
}
@media (max-width: 379px) {
  .contacts { grid-template-columns: minmax(0, 1fr); }
  .contacts li:nth-child(3) { white-space: normal; }
}
@media (max-width: 899px) {
  .slider__side { display: none; }
  .slider__nav { position: sticky; bottom: 16px; }
  .about-founder__side { margin-inline: auto; }
  .slider__slide { padding-bottom: calc(var(--section-y) + 60px); }
  .hero { padding-block: var(--section-y) 16px; }
  .slider__bar { padding: 4px; gap: 2px; box-shadow: 0 6px 18px rgba(34, 43, 69, .18); }
  .slider__btn, .slider__dot { min-height: 36px; }
  .slider__btn { width: 36px; }
  .slider__dot { padding: 0 4px; }
  .slider__dot b { width: 22px; height: 22px; }
  #problem .grid-4 { grid-template-columns: minmax(0, 1fr); }
  #problem .grid-4 { gap: 10px; }
  #problem .card__icon { width: 40px; height: 40px; }
  .hero, .section, .contact {
    min-height: calc(100vh - var(--header-h) - 1px);
    min-height: calc(100svh - var(--header-h) - 1px);
    display: flex; flex-direction: column; justify-content: center;
  }
  .hero > .container, .section > .container, .contact > .container { width: 100%; }
  .section--doc { justify-content: flex-start; }
  .slider__nav { margin-top: -62px; margin-bottom: 16px; }
  #why .benefit__icon { width: 40px; height: 40px; }
  .xcard.is-open::after { transform: translateY(2px) rotate(-135deg); }
  .xcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .benefits--5 .xcard { color: var(--on-dark); }
  #problem .xcard.is-open { background: var(--paper); }
  #benefits .platforms { margin-bottom: 12px; }
  #benefits .platform__logo { top: 12px; right: 14px; }
  #benefits .platform__name { display: flex; align-items: center; gap: 10px; padding-right: 0; }
  #benefits .platform__logo { position: static; order: -1; flex-shrink: 0; width: 30px; height: 30px; }
  #vacancies .vacancies { order: 2; gap: 0; }
  #vacancies .link-arrow { order: 3; align-self: flex-start; }
  #vacancies .industries b { font-size: 1rem; }
  #vacancies .vacancies { width: 100%; }
  #vacancies .link-arrow { margin: 4px 0 0; font-size: .9375rem; }
  #how .steps { order: 2; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #how .section-head .btn { order: 3; align-self: stretch; min-height: 48px; }
  #lead .sheet { display: none; }
  #lead .split { display: block; }
  #lead .lead__cta { display: flex; width: 100%; margin-top: 18px; min-height: 48px; }
  #tariffs .section-head .btn { min-height: 40px; padding: 8px 14px; font-size: .875rem; }
  .tariff { gap: 8px; }
  .tariff__name { margin-top: -4px; }
  .tariff__desc { min-height: 0; }
  .tariff:not(.is-open) .checklist, .tariff:not(.is-open) > .btn { display: none; }
  .tariff.is-open .checklist, .tariff.is-open > .btn { animation: xcard-in .25s ease; }
  .tariff .checklist { margin-top: 0; padding-top: 12px; }
  .tariff { display: grid; column-gap: 12px; }
  .tariff > * { grid-column: 1 / -1; }
  .tariff > .tariff__badge { justify-self: start; }
  .tariff > .tariff__price { justify-self: end; }
  .d-only { display: none !important; }
  #tariffs .section-head > div { min-width: 0; }
  .tariff.is-open > .btn { margin-top: 4px; }
  #tariffs .section-head.section-head--row { flex-direction: row; align-items: center; flex-wrap: nowrap; }
  #tariffs .section-head .btn { flex-shrink: 0; width: auto; }
  .tariff { row-gap: 5px; padding: 12px 16px; }
  .tariff--featured { padding-top: 16px; }
  .tariffs { gap: 14px; }
  .hero::before { display: block; width: 165px; top: 6px; left: -46px; opacity: .3; }
  #precision.tariff { grid-template-columns: max-content minmax(0, 1fr); }
  #precision .tariff__badge { white-space: nowrap; }
  #all .breadcrumb { margin-bottom: 8px; font-size: .8125rem; }
  .discount { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 14px 16px; }
  .discount__tariffs { padding: 0; }
  .discount-notes:not(.is-open) { display: none; }
  .discount-notes.is-open { animation: xcard-in .25s ease; }
  .discount__tariff, .discount__tariffs { justify-self: start; }
  #tariffs { justify-content: center; }
  .notes-more { display: flex; width: 100%; justify-content: center; min-height: 46px; border-radius: var(--radius-l); }
  #example .section-head .btn { width: 100%; justify-content: center; }
  #example .table-scroll { overflow: visible; }
  #example .compare--prices, #example .compare--prices tbody, #example .compare--prices tr, #example .compare--prices th, #example .compare--prices td { display: block; width: auto; }
  #example .compare--prices { min-width: 0; }
  #example .compare--prices thead { display: none; }
  #example .compare--prices tbody tr { padding: 12px 16px; }
  #example .compare--prices tbody tr + tr { border-top: 1px solid var(--line); }
  #example .compare--prices tbody th { padding: 0 0 6px; border: 0; font-size: 1rem; }
  #example .compare--prices tbody td { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border: 0; background: transparent; font-size: .9375rem; }
  #example .compare--prices tbody td::before { content: attr(data-label); color: var(--ink-muted); font-weight: 500; font-size: .875rem; margin-right: auto; }
  #example .compare--prices tbody td + td { border-top: 1px dashed var(--line); }
  #config .breadcrumb { margin-bottom: 8px; font-size: .8125rem; }
  .vol { gap: 12px; }
  .vol__pick { gap: 14px; padding: 16px; }
  .vol__pick .choice__legend { margin-bottom: 8px; font-size: .9375rem; }
  .qty__row { margin-top: 8px; gap: 6px; }
  .qty__btn { width: 46px; }
  .qty__input { min-height: 46px; font-size: 1.5rem; }
  #vol-range { margin-top: 10px; }
  .qty__presets { gap: 6px; margin-top: 8px; }
  .qty__presets button { min-height: 36px; padding: 4px; font-size: .875rem; }
  .qty__hints { display: grid; gap: 6px; margin-top: 10px; }
  .vol__pick .checklist--cols .icon { width: 16px; height: 16px; }
  .vol__price { padding: 16px; }
  .vol__prices { padding-bottom: 10px; }
  .vol__prices .vol__unit-num { font-size: 1.625rem; }
  .vol__total, .vol__econ { padding-block: 8px; }
  .vol__price .btn--lg { min-height: 48px; margin-top: 8px; }
  .vol__price .vol__total { margin-top: 8px; padding-top: 8px; font-size: .875rem; line-height: 1.3; }
  .vol__price .vol__total strong { font-size: 1.125rem; }
  .vol__price .vol__econ { margin-top: 8px; padding: 0 12px; }
  .vol__price .vol__econ-row { padding: 6px 0; }
  .vol__price .vol__econ-label { font-size: .875rem; }
  .vol__price .vol__econ-sum { font-size: 1.125rem; }
  .vol__price .vol__pill, .vol__price .vol__econ-pill { padding: 2px 8px; font-size: .75rem; }
  #vol-pay-row strong #vol-pay { font-size: 1.375rem; }
  .vol__pay-old { font-size: .875rem; }
  .vol__pay-note { margin-top: 0; font-size: .75rem; }
  .vol__prices .vol__unit-line { gap: 6px; }
  .vol__unit-suffix { font-size: .875rem; }
  #about-story .story--center {
    display: flex; flex-direction: column; overflow: hidden;
    max-height: calc(100vh - var(--header-h) - 1px - 2 * var(--section-y) - 60px);
    max-height: calc(100svh - var(--header-h) - 1px - 2 * var(--section-y) - 60px);
    padding: 18px 18px 0; gap: 10px;
  }
  #about-story .story__scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: none;
    gap: 12px; padding-bottom: 20px; scrollbar-width: none;
  }
  #about-story .story__scroll::-webkit-scrollbar { display: none; }
  #about-story .story--center { position: relative; padding-right: 24px; }
  .story__bar:not([hidden]) { display: block; position: absolute; right: 9px; width: 4px; border-radius: 4px; background: rgba(34, 43, 69, .12); pointer-events: none; }
  .story__bar i { display: block; width: 100%; border-radius: 4px; background: var(--ink); }
  .container.about-founder { grid-template-columns: 116px minmax(0, 1fr); column-gap: 16px; row-gap: 14px; align-items: start; }
  .about-founder__side { grid-column: 1; grid-row: 1 / span 3; max-width: none; margin: 0; gap: 8px; }
  .about-founder__photo--img { border-radius: 14px; aspect-ratio: 4 / 5; }
  .about-founder__text { display: contents; }
  #about-founder .checklist { grid-column: 1 / -1; margin: 0; }
  #about-founder .checklist li { font-size: .8125rem; line-height: 1.45; }
  #about-founder .checklist .icon { width: 18px; height: 18px; }
  .about-founder__exp { grid-column: 1 / -1; padding: 12px 14px; font-size: .8125rem; line-height: 1.5; }
  .li-btn { min-height: 30px; padding: 6px 8px; border-radius: 8px; }
  .li-btn img { width: 64px; height: auto; }
  .container.about-founder { grid-template-rows: auto auto 1fr; }
  #about-founder .checklist li.xcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 8px 12px; border: var(--border); border-radius: 12px; background: var(--paper); }
  #about-founder .checklist li.xcard .fx__head { font-weight: 600; }
  #about-founder .checklist li.xcard .fx__more { display: none; }
  #about-founder .checklist li.xcard.is-open .fx__more { display: inline; color: var(--ink-muted); }
  .about-founder__exp.xcard { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
  .about-founder__exp.xcard.is-open p { display: block; -webkit-line-clamp: unset; }
  .about-founder__exp.xcard::after { grid-column: 2; grid-row: 1; margin-top: 4px; width: 8px; height: 8px; }
  #about-founder { justify-content: flex-start; }
  #about-kontakty .social small { font-size: .6875rem; }
  #about-kontakty .social__icon .icon { width: 19px; height: 19px; }
  .contacts { margin-top: 16px; }
  .contacts li { line-height: 1.3; min-width: 0; }
  .contacts small { font-size: .625rem; }
  .contacts__icon { flex-shrink: 0; }
  .social-icons--contact a { width: 38px; height: 38px; }
  .social-icons--contact .icon { width: 18px; height: 18px; }
  .contacts li { overflow-wrap: normal; }
  .lead-form { padding: 18px 16px; }
  .lead-form__title { font-size: 1.375rem; }
  .lead-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lead-form__grid .field:nth-child(1), .lead-form__grid .field:nth-child(2), .lead-form__grid .field:nth-child(3),
  .lead-form__grid .field:nth-child(6), .lead-form__grid .field:nth-child(7), .lead-form__grid .field:nth-child(8) { grid-column: 1 / -1; }
  .lead-form .field label { font-size: .8125rem; margin-bottom: 4px; }
  .lead-form .field input, .lead-form .field select { min-height: 44px; padding-block: 8px; font-size: 1rem; }
  .faq__intro .link-arrow { margin-top: 10px; font-size: .9375rem; }
  .faq__item summary .icon { width: 18px; height: 18px; flex-shrink: 0; }
  .faq__intro .link-arrow { display: none; }
  .faq { gap: 12px; }
  .site-footer { padding-block: 28px 18px; font-size: .875rem; }
  .site-footer__label { margin-bottom: 8px; font-size: .75rem; }
  .site-footer__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px 14px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__brand p { margin-top: 8px; }
  .site-footer__brand .logo__mark { width: 40px; height: 40px; }
  .site-footer .social-icons { margin-top: 12px; gap: 10px; }
  .site-footer .social-icons a { width: 36px; height: 36px; }
  .site-footer .social-icons .icon { width: 17px; height: 17px; }
  .site-footer__bottom { margin-top: 18px; padding-top: 14px; gap: 6px; font-size: .8125rem; }
  .site-footer__legal { gap: 6px 16px; flex-wrap: wrap; }
  .contacts li:nth-child(2) { order: 3; }
  .contacts li:nth-child(4) { order: 4; }
  .contacts__icon .icon { width: 16px; height: 16px; }
  .social-icons--contact { margin-top: 12px; }
  .contact__grid { gap: 16px; }
  .contact .contact__lead { margin-top: 6px; }
  .contacts li { font-size: .75rem; gap: 6px; }
  .contacts__icon { width: 30px; height: 30px; }
 .social-icons--contact { justify-content: center; } }

/* Сторінка «Знижки»: рядок із навігацією та кнопкою «Назад до тарифів» */
.page-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.page-top .breadcrumb { margin-bottom: 0; }
.back-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px;
  border: var(--border); border-radius: 999px; background: var(--paper); color: var(--text);
  font-weight: 600; font-size: .9375rem; text-decoration: none; transition: background-color .15s ease;
}
.back-link:hover { background: var(--accent-soft); }
.back-link .icon { width: 18px; height: 18px; transform: rotate(180deg); transition: transform .15s ease; }
.back-link:hover .icon { transform: rotate(180deg) translateX(3px); }
@media (max-width: 899px) {
  .page-top { gap: 8px; }
  #all .page-top .breadcrumb { margin-bottom: 0; }
  .back-link { font-size: .8125rem; }
  .back-link .icon { width: 15px; height: 15px; }
}
@media (max-width: 899px) {
  /* на телефоні замість ланцюжка – лише кнопка «Назад до тарифів» */
  .page-top .breadcrumb { display: none; }
  .page-top { margin-bottom: 6px; }
  .back-link { min-height: 32px; padding: 4px 12px; }
}

/* Більша зона дотику на телефоні – без зміни вигляду й розкладки */
@media (max-width: 899px) {
  .site-footer a, .breadcrumb a, .back-link, .link-arrow, .li-btn, .contacts__link,
  .social-icons a, .slider__btn, .slider__dot, .tariff__more, #faq a, .contact a:not([class]) { position: relative; }
  .site-footer a::after, .breadcrumb a::after, .back-link::after, .link-arrow::after, .li-btn::after, .contacts__link::after,
  .social-icons a::after, .slider__btn::after, .slider__dot::after, .tariff__more::after, #faq a::after, .contact a:not([class])::after {
    content: ""; position: absolute; inset: -6px -4px;
  }
  .social-icons a::after, .slider__btn::after { inset: -4px; border-radius: 50%; }
  .slider__dot::after { inset: -4px -2px; }
  .consent input { width: 24px; height: 24px; }
}