/* =========================================================================
   Buhalter.pl: стили темы.
   Один файл на сайт и на предпросмотр. Правится здесь, нигде больше.

   Логика цвета (по итогам исследования, см. ИССЛЕДОВАНИЕ.md):
   синий держит доверие и структуру, янтарный работает только на действие.
   Кнопка не может быть того же цвета, что и фон страницы, иначе она пропадает.
   ========================================================================= */

:root {
  /* Основа */
  --gb-bg:          #F4F8FF;
  --gb-bg-2:        #ECF3FF;
  --gb-surface:     #FFFFFF;
  --gb-tint:        #E8F1FF;
  --gb-tint-2:      #EEF4FF;
  --gb-line:        #DCE6F5;
  --gb-line-2:      #E3ECFA;

  /* Текст */
  --gb-navy:        #1B2A4A;
  --gb-muted:       #5C6B85;
  --gb-muted-2:     #7A88A0;
  --gb-muted-3:     #8A97AE;

  /* Синий: навигация, ссылки, структура */
  --gb-blue:        #4A86F7;
  --gb-blue-dark:   #2F63D6;
  --gb-blue-deep:   #1F4DB3;
  --gb-sky:         #7FB2FF;
  --gb-marquee:     #C9D8F2;

  /* Янтарный: только действие и выгода. Текст на нём тёмный, контраст 6,6:1 */
  --gb-amber:       #F59E0B;
  --gb-amber-hi:    #FFB93A;
  --gb-amber-deep:  #C2410C;
  --gb-amber-tint:  #FFF4E0;

  /* Зелёный: подтверждение, галочки, WhatsApp */
  --gb-green:       #2FB56B;
  --gb-green-dark:  #0E7A45;
  --gb-green-tint:  #E6F7EE;

  /* Красный: только цена бездействия, штрафы, риски */
  --gb-red:         #C0392B;
  --gb-red-tint:    #FDECEA;

  /* Формы */
  --gb-radius:      26px;
  --gb-radius-lg:   40px;
  --gb-radius-sm:   18px;
  --gb-shadow:      0 12px 34px rgba(27,42,74,0.06);
  --gb-shadow-lift: 0 22px 50px rgba(27,42,74,0.12);
  --gb-shadow-amber:0 12px 28px rgba(245,158,11,0.35);
  --gb-shadow-blue: 0 10px 24px rgba(74,134,247,0.30);

  /* Ритм */
  --gb-wrap:        1312px;
  --gb-gutter:      clamp(20px, 4.4vw, 64px);
  --gb-section:     clamp(56px, 7vw, 96px);

  --gb-font:        'Nunito Sans', 'Segoe UI', system-ui, Arial, sans-serif;
  --gb-display:     'Nunito', 'Trebuchet MS', system-ui, sans-serif;
}

/* ---------- Сетка и секции ---------- */

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

.gb-section { padding-block: var(--gb-section); }
.gb-section--flush { padding-block-start: 0; }
.gb-section--tight { padding-block: clamp(36px, 4vw, 56px); }

.gb-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(24px, 4vw, 48px);
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.gb-head__left { display: flex; flex-direction: column; gap: 16px; max-width: 660px; }
.gb-head__side { max-width: 380px; }

/* ---------- Типографика ---------- */

.gb-h1, .gb-h2, .gb-h3, .gb-h4 {
  font-family: var(--gb-display);
  color: var(--gb-navy);
  margin: 0;
  text-wrap: balance;
}
.gb-h1 {
  font-size: clamp(36px, 5.2vw, 66px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.025em;
}
.gb-h2 {
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.gb-h3 { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.22; font-weight: 800; letter-spacing: -0.01em; }
.gb-h4 { font-size: 17px; line-height: 1.3; font-weight: 800; }

.gb-lead {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--gb-muted);
  margin: 0;
}
.gb-text { font-size: 15px; line-height: 1.6; color: var(--gb-muted); margin: 0; }
.gb-small { font-size: 13px; line-height: 1.5; color: var(--gb-muted-2); margin: 0; }
.gb-nowrap { white-space: nowrap; }

/* Подсветка ключевого слова в заголовке: фломастером, а не цветом текста */
.gb-mark {
  position: relative;
  white-space: nowrap;
  color: var(--gb-navy);
  z-index: 0;
}
.gb-mark::after {
  content: "";
  position: absolute;
  left: -0.06em; right: -0.06em; bottom: 0.14em;
  height: 0.30em;
  background: linear-gradient(90deg, var(--gb-amber-hi), var(--gb-amber));
  border-radius: 0.2em;
  z-index: -1;
  opacity: 0.9;
}
.gb-accent { color: var(--gb-blue); }

.gb-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gb-blue-dark);
}
.gb-kicker::before {
  content: "";
  width: 22px; height: 4px;
  border-radius: 2px;
  background: var(--gb-sky);
  flex-shrink: 0;
}
.gb-kicker--amber { color: var(--gb-amber-deep); }
.gb-kicker--amber::before { background: var(--gb-amber); }

/* ---------- Кнопки ---------- */

.gb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 30px;
  border: 0;
  border-radius: var(--gb-radius-sm);
  font-family: var(--gb-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.gb-btn:hover { transform: translateY(-2px); }
.gb-btn:focus-visible { outline: 3px solid var(--gb-blue-dark); outline-offset: 3px; }
.gb-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Главное действие. Тёмный текст на янтаре: контраст 6,6:1 и максимальная заметность */
.gb-btn--primary {
  background: linear-gradient(180deg, var(--gb-amber-hi), var(--gb-amber));
  color: var(--gb-navy);
  box-shadow: var(--gb-shadow-amber);
}
.gb-btn--primary:hover { background: linear-gradient(180deg, #FFC55C, var(--gb-amber)); box-shadow: 0 16px 34px rgba(245,158,11,0.45); }

.gb-btn--blue {
  background: var(--gb-blue);
  color: #FFFFFF;
  box-shadow: var(--gb-shadow-blue);
}
.gb-btn--blue:hover { background: var(--gb-blue-dark); color: #FFFFFF; }

.gb-btn--ghost {
  background: var(--gb-surface);
  color: var(--gb-navy);
  border: 1.5px solid var(--gb-line);
}
.gb-btn--ghost:hover { border-color: var(--gb-sky); color: var(--gb-navy); }

.gb-btn--sm { min-height: 46px; padding: 0 20px; font-size: 15px; border-radius: 14px; }
.gb-btn--lg { min-height: 62px; padding: 0 34px; font-size: 17px; }
.gb-btn--block { width: 100%; }

.gb-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Карточки, пилюли, иконки ---------- */

.gb-card {
  background: var(--gb-surface);
  border: 1px solid var(--gb-line-2);
  border-radius: var(--gb-radius);
  box-shadow: var(--gb-shadow);
  padding: clamp(24px, 2.6vw, 36px);
}
.gb-card--hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.gb-card--hover:hover { transform: translateY(-4px); box-shadow: var(--gb-shadow-lift); border-color: var(--gb-sky); }
.gb-card--flat { box-shadow: none; }
.gb-card--amber { background: var(--gb-amber-tint); border-color: #F7DDB2; }

.gb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--gb-surface);
  border: 1px solid var(--gb-line);
  font-size: 14px;
  font-weight: 700;
  color: var(--gb-navy);
  text-decoration: none;
}
.gb-pill--tint { background: var(--gb-tint); border-color: var(--gb-tint); color: var(--gb-blue-dark); }
.gb-pill--amber { background: var(--gb-amber-tint); border-color: #F7DDB2; color: var(--gb-amber-deep); }
.gb-pill--green { background: var(--gb-green-tint); border-color: #C8EBD8; color: var(--gb-green-dark); }

.gb-ico {
  width: 50px; height: 50px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gb-tint);
  color: var(--gb-blue-dark);
  flex-shrink: 0;
}
.gb-ico svg { width: 24px; height: 24px; }
.gb-ico--amber { background: var(--gb-amber-tint); color: var(--gb-amber-deep); }
.gb-ico--green { background: var(--gb-green-tint); color: var(--gb-green-dark); }
.gb-ico--red   { background: var(--gb-red-tint); color: var(--gb-red); }
.gb-ico--sm { width: 40px; height: 40px; border-radius: 12px; }
.gb-ico--sm svg { width: 19px; height: 19px; }

.gb-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gb-surface);
  color: var(--gb-green-dark);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(27,42,74,0.08);
}
.gb-check svg { width: 14px; height: 14px; }

.gb-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gb-checklist li { display: flex; gap: 12px; align-items: center; font-size: 15px; font-weight: 700; color: var(--gb-navy); }

/* ---------- Шапка ---------- */

.gb-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244,248,255,0.88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gb-header.is-stuck { border-bottom-color: var(--gb-line); box-shadow: 0 6px 22px rgba(27,42,74,0.06); }
.gb-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
}
.gb-header__left { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }
.gb-header__right { display: flex; align-items: center; gap: 14px; }

.gb-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.gb-logo__mark {
  width: 42px; height: 42px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--gb-blue), var(--gb-blue-dark));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(74,134,247,0.30);
  flex-shrink: 0;
}
.gb-logo__mark svg { width: 22px; height: 22px; }
.gb-logo__text { display: flex; flex-direction: column; line-height: 1; }
.gb-logo__name {
  font-family: var(--gb-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--gb-navy);
  letter-spacing: -0.01em;
}
.gb-logo__sub {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gb-muted-2);
  margin: 3px 0 0;
}

.gb-nav { display: flex; gap: clamp(16px, 1.9vw, 28px); }
.gb-nav a {
  font-size: 15px;
  font-weight: 700;
  color: var(--gb-navy);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.gb-nav a:hover { color: var(--gb-blue-dark); border-bottom-color: var(--gb-sky); }

.gb-lang { display: flex; gap: 2px; background: var(--gb-tint); border-radius: 100px; padding: 4px; }
.gb-lang__item {
  padding: 7px 12px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  color: var(--gb-muted);
  text-decoration: none;
  line-height: 1;
}
.gb-lang__item:hover { color: var(--gb-blue-dark); }
.gb-lang__item.is-on { background: var(--gb-surface); color: var(--gb-blue-dark); box-shadow: 0 2px 6px rgba(27,42,74,0.10); }

.gb-burger { display: none; }
.gb-lang--mobile { display: none; }

/* ---------- Hero ---------- */

.gb-hero { position: relative; overflow-x: clip; padding-block: clamp(28px, 3.4vw, 52px) clamp(32px, 4vw, 56px); }
.gb-hero::before {
  content: "";
  position: absolute;
  inset: -10% -20% auto -20%;
  height: 620px;
  background:
    radial-gradient(52% 60% at 22% 30%, rgba(127,178,255,0.28), transparent 70%),
    radial-gradient(40% 52% at 78% 18%, rgba(245,158,11,0.16), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.gb-hero__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(28px, 3.4vw, 44px);
  align-items: center;
}
.gb-hero__left { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 26px); align-items: flex-start; }
.gb-hero__lead { max-width: 560px; font-size: clamp(16px, 1.45vw, 20px); }

.gb-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 10px;
  border-radius: 100px;
  background: var(--gb-surface);
  border: 1px solid var(--gb-line);
  font-size: 14px;
  font-weight: 700;
  color: var(--gb-navy);
  box-shadow: 0 4px 14px rgba(27,42,74,0.05);
}
.gb-hero__badge .gb-flag { font-size: 15px; letter-spacing: 1px; }

/* Доказательство сразу в первом экране: рейтинг, лица, число клиентов.
   Исследование: именованное социальное доказательство рядом с кнопкой даёт
   самый большой прирост конверсии, поэтому оно выше линии сгиба. */
.gb-proof {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 700px;
  background: var(--gb-surface);
  border: 1px solid var(--gb-line-2);
  border-radius: 22px;
  box-shadow: var(--gb-shadow);
  padding: 6px;
}
.gb-proof__cell {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  min-width: 0;
}
.gb-proof__cell + .gb-proof__cell { border-left: 1px solid var(--gb-line-2); }
.gb-proof__faces { display: flex; flex-shrink: 0; }
.gb-proof__faces img {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--gb-surface);
  box-shadow: 0 3px 8px rgba(27,42,74,0.12);
}
.gb-proof__faces img + img { margin-left: -14px; }
.gb-proof__block { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gb-proof__stars { color: var(--gb-amber); font-size: 14px; letter-spacing: 1px; line-height: 1; }
.gb-proof__num { font-family: var(--gb-display); font-size: 26px; font-weight: 800; color: var(--gb-navy); line-height: 1; }
.gb-proof__cap { font-size: 13px; color: var(--gb-muted); font-weight: 600; line-height: 1.35; }

.gb-hero__art {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.gb-hero__mesh {
  position: absolute;
  inset: 0;
  border-radius: var(--gb-radius-lg);
  overflow: hidden;
  border: 1px solid var(--gb-line-2);
}
.gb-hero__mesh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gb-hero__cat {
  position: relative;
  width: min(460px, 86%);
  height: auto;
  margin-bottom: 8px;
  filter: drop-shadow(0 18px 30px rgba(27,42,74,0.16));
}
.gb-float {
  position: absolute;
  background: var(--gb-surface);
  border: 1px solid var(--gb-line-2);
  border-radius: 18px;
  box-shadow: var(--gb-shadow);
  padding: 13px 17px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.gb-float__t { font-weight: 800; font-size: 15px; color: var(--gb-navy); display: block; }
.gb-float__s { font-size: 12px; color: var(--gb-muted); display: block; }
.gb-float__big { font-family: var(--gb-display); font-size: 22px; font-weight: 800; color: var(--gb-navy); }
.gb-float--1 { left: -30px; top: 62px; }
.gb-float--2 { right: -26px; top: 92px; flex-direction: column; gap: 2px; align-items: flex-start; }
.gb-float--3 { left: 20px; bottom: 20px; border-radius: 100px; padding: 10px 16px; gap: 9px; }
.gb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gb-green); flex-shrink: 0; }
.gb-dot--pulse { box-shadow: 0 0 0 0 rgba(47,181,107,0.6); animation: gb-pulse 2.4s infinite; }
@keyframes gb-pulse {
  70% { box-shadow: 0 0 0 10px rgba(47,181,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,181,107,0); }
}

/* Фото человека в первом экране вместо маскота: снизу лёгкое затемнение,
   иначе белая пилюля на светлом снимке теряется. */
.gb-art--photo .gb-hero__mesh::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(27,42,74,0.34), transparent);
  pointer-events: none;
}
.gb-art--photo .gb-hero__mesh { position: absolute; }

/* ---------- Бегущая строка ---------- */

.gb-marquee {
  overflow: hidden;
  padding-block: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.gb-marquee__track {
  display: flex;
  gap: 36px;
  width: max-content;
  animation: gb-scroll 40s linear infinite;
}
.gb-marquee span {
  font-family: var(--gb-display);
  font-size: clamp(18px, 1.9vw, 26px);
  font-weight: 800;
  color: var(--gb-marquee);
  white-space: nowrap;
}
.gb-marquee span b { color: var(--gb-sky); }
@keyframes gb-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .gb-marquee__track { animation: none; }
  .gb-dot--pulse { animation: none; }
  .gb-btn:hover, .gb-card--hover:hover { transform: none; }
}

/* ---------- Боли: узнавание до предложения ---------- */

.gb-pain { background: var(--gb-surface); border-block: 1px solid var(--gb-line-2); }
.gb-pain__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.gb-pain__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 20px;
  background: var(--gb-bg);
  border: 1px solid var(--gb-line-2);
}
.gb-pain__quote { font-size: 16px; font-weight: 700; color: var(--gb-navy); line-height: 1.45; margin: 0; }
.gb-pain__answer {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gb-muted);
  margin: 0;
  padding-top: 12px;
  border-top: 1px dashed var(--gb-line);
}
.gb-pain__answer svg { width: 17px; height: 17px; color: var(--gb-green-dark); flex-shrink: 0; margin-top: 2px; }

/* ---------- Услуги ---------- */

.gb-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gb-bento__wide {
  grid-column: span 2;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gb-bento__wide-text { padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 16px; }
.gb-bento__wide-img { position: relative; min-height: 300px; }
.gb-bento__wide-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gb-bento__stat {
  position: absolute;
  left: 26px; right: 26px; bottom: 26px;
  background: var(--gb-surface);
  border-radius: 18px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--gb-shadow);
}
.gb-bento__stat-cap { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: var(--gb-muted); }
.gb-bento__stat-val { font-family: var(--gb-display); font-size: 30px; font-weight: 800; color: var(--gb-blue-dark); line-height: 1.1; }
.gb-tile { display: flex; flex-direction: column; gap: 14px; }
.gb-tile__link {
  margin-top: auto;
  font-size: 14px;
  font-weight: 800;
  color: var(--gb-blue-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.gb-tile__link svg { width: 15px; height: 15px; transition: transform .16s ease; }
.gb-tile__link:hover svg { transform: translateX(3px); }

/* ---------- Калькулятор ---------- */

.gb-calc__box {
  position: relative;
  border-radius: var(--gb-radius-lg);
  overflow: hidden;
  border: 1px solid var(--gb-line-2);
}
.gb-calc__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gb-calc__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(28px, 4vw, 64px);
  align-items: center;
}
.gb-calc__text { display: flex; flex-direction: column; gap: 20px; }

.gb-calc__card {
  background: var(--gb-surface);
  border-radius: 30px;
  padding: clamp(24px, 2.4vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 18px 48px rgba(27,42,74,0.10);
}
.gb-field { display: flex; flex-direction: column; gap: 10px; }
.gb-field__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--gb-muted-2);
  text-transform: uppercase;
}
.gb-toggle { display: flex; background: var(--gb-tint-2); border-radius: 16px; padding: 5px; gap: 5px; }
.gb-toggle button {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 13px 8px;
  border-radius: 12px;
  font-family: var(--gb-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--gb-muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.gb-toggle button:hover { color: var(--gb-blue-dark); }
.gb-toggle button[aria-pressed="true"] {
  background: var(--gb-surface);
  color: var(--gb-blue-dark);
  box-shadow: 0 2px 8px rgba(27,42,74,0.10);
}
.gb-toggle button:focus-visible { outline: 3px solid var(--gb-blue-dark); outline-offset: 2px; }

.gb-range { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; height: 26px; margin: 0; cursor: pointer; }
.gb-range::-webkit-slider-runnable-track { height: 8px; border-radius: 100px; background: var(--gb-tint); }
.gb-range::-moz-range-track { height: 8px; border-radius: 100px; background: var(--gb-tint); }
.gb-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--gb-surface);
  border: 4px solid var(--gb-blue);
  box-shadow: 0 4px 10px rgba(74,134,247,0.35);
}
.gb-range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gb-surface);
  border: 4px solid var(--gb-blue);
  box-shadow: 0 4px 10px rgba(74,134,247,0.35);
}
.gb-range:focus-visible { outline: 3px solid var(--gb-blue-dark); outline-offset: 4px; border-radius: 100px; }
.gb-range__scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--gb-muted-3); font-weight: 700; }
.gb-range__value { font-family: var(--gb-display); font-size: 16px; font-weight: 800; color: var(--gb-blue-dark); }

.gb-calc__total {
  border-top: 1.5px dashed var(--gb-line);
  padding-top: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.gb-calc__sum {
  font-family: var(--gb-display);
  font-size: clamp(32px, 3.4vw, 42px);
  font-weight: 800;
  color: var(--gb-navy);
  line-height: 1.05;
}
.gb-calc__save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--gb-green-dark);
  background: var(--gb-green-tint);
  border-radius: 100px;
  padding: 6px 12px;
}

/* ---------- 2026: что меняется ---------- */

.gb-news { background: var(--gb-navy); border-radius: var(--gb-radius-lg); padding: clamp(28px, 3.6vw, 56px); color: #FFFFFF; }
.gb-news .gb-h2 { color: #FFFFFF; }
.gb-news__lead { color: #B9C7E0; }
.gb-news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
.gb-news__item {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gb-news__date {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gb-navy);
  background: var(--gb-amber);
  border-radius: 100px;
  padding: 6px 12px;
}
.gb-news__t { font-family: var(--gb-display); font-size: 20px; font-weight: 800; color: #FFFFFF; margin: 0; }
.gb-news__d { font-size: 14px; line-height: 1.6; color: #C4D0E6; margin: 0; }
.gb-news__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 30px; }
.gb-news__note { font-size: 13px; color: #93A4C4; margin: 0; }

/* ---------- Сравнение JDG и spółka ---------- */

.gb-compare { overflow-x: auto; border-radius: var(--gb-radius); border: 1px solid var(--gb-line-2); background: var(--gb-surface); }
.gb-compare table { width: 100%; border-collapse: collapse; min-width: 640px; }
.gb-compare th, .gb-compare td { padding: 18px 22px; text-align: left; font-size: 15px; }
.gb-compare thead th {
  font-family: var(--gb-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--gb-navy);
  background: var(--gb-tint-2);
  border-bottom: 1px solid var(--gb-line);
}
.gb-compare thead th:first-child { color: var(--gb-muted); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.gb-compare tbody tr + tr td { border-top: 1px solid var(--gb-line-2); }
.gb-compare td:first-child { font-weight: 700; color: var(--gb-navy); width: 30%; }
.gb-compare td { color: var(--gb-muted); }
.gb-compare td.gb-compare__win { color: var(--gb-green-dark); font-weight: 700; }

/* ---------- Шаги ---------- */

.gb-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gb-step__num {
  font-family: var(--gb-display);
  width: 54px; height: 54px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  font-size: 20px;
  color: #FFFFFF;
  background: var(--gb-blue);
  box-shadow: 0 8px 20px rgba(74,134,247,0.30);
}
.gb-step:nth-child(2) .gb-step__num { background: var(--gb-amber); color: var(--gb-navy); box-shadow: 0 8px 20px rgba(245,158,11,0.35); }
.gb-step:nth-child(3) .gb-step__num { background: var(--gb-sky); box-shadow: 0 8px 20px rgba(127,178,255,0.35); }
.gb-step { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Гарантии ---------- */

.gb-guarantee { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.gb-guarantee__item { display: flex; flex-direction: column; gap: 12px; }
.gb-guarantee__t { font-family: var(--gb-display); font-size: 17px; font-weight: 800; color: var(--gb-navy); margin: 0; }

/* ---------- О нас ---------- */

.gb-about { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.gb-about__photo {
  position: relative;
  min-height: 520px;
  border-radius: 36px;
  overflow: hidden;
  border: 1px solid var(--gb-line-2);
}
.gb-about__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gb-about__frame {
  position: absolute;
  inset: 18px;
  border-radius: 26px;
  border: 2px dashed rgba(74,134,247,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gb-about__frame span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gb-blue-dark);
  background: rgba(255,255,255,0.78);
  padding: 10px 16px;
  border-radius: 100px;
}
.gb-about__text { display: flex; flex-direction: column; gap: 22px; }
.gb-about__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gb-about__item { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 20px; background: var(--gb-surface); border: 1px solid var(--gb-line-2); }

/* ---------- Отзывы ---------- */

.gb-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gb-review { display: flex; flex-direction: column; gap: 18px; }
.gb-review__quote svg { width: 30px; height: 30px; color: var(--gb-sky); }
.gb-review__text { font-size: 17px; line-height: 1.6; color: var(--gb-navy); margin: 0; }
.gb-review__author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.gb-review__author img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gb-surface); box-shadow: 0 3px 8px rgba(27,42,74,0.12); }
.gb-review__name { font-weight: 800; font-size: 15px; color: var(--gb-navy); display: block; }
.gb-review__role { font-size: 13px; color: var(--gb-muted-2); display: block; }

/* ---------- FAQ ---------- */

.gb-faq { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.gb-faq__list { display: flex; flex-direction: column; gap: 10px; }
.gb-faq__item {
  background: var(--gb-surface);
  border: 1px solid var(--gb-line-2);
  border-radius: 20px;
  padding: 4px 26px;
}
.gb-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  font-family: var(--gb-display);
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 800;
  color: var(--gb-navy);
  list-style: none;
}
.gb-faq__item summary::-webkit-details-marker { display: none; }
.gb-faq__item summary::after {
  content: "+";
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gb-tint);
  color: var(--gb-blue-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
  transition: transform .2s ease, background-color .2s ease;
}
.gb-faq__item[open] summary::after { content: "+"; transform: rotate(45deg); background: var(--gb-amber-tint); color: var(--gb-amber-deep); }
.gb-faq__item p { font-size: 15px; line-height: 1.65; color: var(--gb-muted); margin: 0 0 20px; padding-right: 54px; }

/* ---------- Контакты и форма ---------- */

.gb-cta__box { position: relative; border-radius: var(--gb-radius-lg); overflow: hidden; border: 1px solid var(--gb-line-2); }
.gb-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gb-cta__cat { position: absolute; right: 52%; bottom: -14px; width: 250px; filter: drop-shadow(0 12px 20px rgba(27,42,74,0.14)); }
.gb-cta__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 60px);
  padding: clamp(28px, 4vw, 64px);
  align-items: center;
}
.gb-cta__text { display: flex; flex-direction: column; gap: 20px; padding-right: clamp(0px, 14vw, 210px); }
.gb-msgrs { display: flex; flex-wrap: wrap; gap: 10px; }
.gb-msgr {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 100px;
  background: var(--gb-surface);
  border: 1.5px solid var(--gb-line);
  font-weight: 800;
  font-size: 15px;
  color: var(--gb-navy);
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.gb-msgr:hover { border-color: var(--gb-sky); transform: translateY(-2px); color: var(--gb-navy); }
.gb-msgr svg { width: 19px; height: 19px; }
.gb-contacts { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--gb-muted); }
.gb-contacts a { color: var(--gb-muted); }

.gb-form { background: var(--gb-surface); border-radius: 30px; padding: clamp(24px, 2.4vw, 34px); box-shadow: 0 18px 48px rgba(27,42,74,0.10); }
.gb-form .gb-h3 { margin-bottom: 16px; }
.gb-form input[type="text"],
.gb-form input[type="tel"],
.gb-form input[type="email"],
.gb-form select,
.gb-form textarea,
.gb-form .wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]) {
  width: 100%;
  min-height: 56px;
  border-radius: 16px;
  border: 1.5px solid var(--gb-line);
  background: #F8FAFF;
  padding: 0 18px;
  font-family: var(--gb-font);
  font-size: 15px;
  color: var(--gb-navy);
  margin-bottom: 12px;
  box-sizing: border-box;
}
.gb-form textarea { padding-block: 14px; min-height: 110px; }
.gb-form input:focus, .gb-form select:focus, .gb-form textarea:focus {
  outline: none;
  border-color: var(--gb-blue);
  box-shadow: 0 0 0 4px rgba(74,134,247,0.15);
}
.gb-form ::placeholder { color: var(--gb-muted-3); }
.gb-form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--gb-muted); margin-bottom: 14px; }
.gb-form__consent input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--gb-blue); flex-shrink: 0; }
.gb-form__note { font-size: 12px; color: var(--gb-muted-2); line-height: 1.5; margin: 12px 0 0; }
.gb-form__trust { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--gb-green-dark); margin-top: 14px; }

/* ---------- Подвал ---------- */

.gb-footer { border-top: 1px solid var(--gb-line); padding-block: clamp(40px, 5vw, 72px) 32px; }
.gb-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(24px, 3vw, 48px); }
.gb-footer__col { display: flex; flex-direction: column; gap: 12px; }
.gb-footer__col a { color: var(--gb-muted); font-size: 15px; font-weight: 600; text-decoration: none; }
.gb-footer__col a:hover { color: var(--gb-blue-dark); }
.gb-footer__title { font-weight: 800; font-size: 14px; color: var(--gb-navy); }
.gb-footer__bottom {
  border-top: 1px solid var(--gb-line);
  margin-top: 36px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--gb-muted-3);
}
.gb-footer__legal { display: flex; gap: 26px; flex-wrap: wrap; }

/* ---------- Липкая панель на телефоне ---------- */

.gb-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--gb-line);
  box-shadow: 0 -6px 24px rgba(27,42,74,0.10);
}
.gb-bar .gb-btn { flex: 1 1 auto; min-width: 0; min-height: 50px; padding: 0 12px; font-size: 15px; white-space: normal; text-align: center; line-height: 1.2; }
.gb-bar .gb-bar__icon { flex: 0 0 52px; padding: 0; }

/* ---------- Адаптив ---------- */

@media (max-width: 1080px) {
  .gb-hero__grid { grid-template-columns: 1fr; }
  .gb-hero__art { min-height: 420px; }
  .gb-float--1 { left: 0; top: 30px; }
  .gb-float--2 { right: 0; top: 30px; }
  .gb-pain__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gb-guarantee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gb-about, .gb-faq { grid-template-columns: 1fr; }
  .gb-about__photo { min-height: 360px; }
  .gb-news__grid { grid-template-columns: 1fr; }
  .gb-calc__inner, .gb-cta__inner { grid-template-columns: 1fr; }
  .gb-cta__cat { display: none; }
  .gb-cta__text { padding-right: 0; }
  .gb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gb-bento__wide { grid-column: span 2; }
  .gb-reviews { grid-template-columns: 1fr; }
  .gb-steps { grid-template-columns: 1fr; }
  .gb-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .gb-nav, .gb-header__cta, .gb-header__right > .gb-lang { display: none; }
  .gb-lang--mobile { display: flex; align-self: flex-start; margin-top: 6px; }
  .gb-logo__name { font-size: 17px; }
  .gb-logo__mark { width: 38px; height: 38px; border-radius: 12px; }
  .gb-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 14px;
    background: var(--gb-surface);
    border: 1px solid var(--gb-line);
    color: var(--gb-navy);
  }
  .gb-header__inner { gap: 10px; }
  .gb-logo__sub { display: none; }
  .gb-hero { padding-top: 18px; }
  .gb-hero__art { min-height: 340px; }
  .gb-hero__cat { width: min(290px, 78%); }
  .gb-float { padding: 8px 11px; border-radius: 14px; gap: 8px; max-width: 47%; }
  .gb-float--1 .gb-ico { display: none; }
  .gb-float__t { font-size: 13px; }
  .gb-float__s { font-size: 11px; line-height: 1.25; }
  .gb-float__big { font-size: 16px; }
  .gb-float--1 { left: 8px; top: 10px; }
  .gb-float--2 { right: 8px; top: 10px; }
  .gb-float--3 { left: 8px; bottom: 10px; max-width: none; padding: 8px 13px; }
  .gb-btns .gb-btn { width: 100%; }
  .gb-btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 15px; }
  .gb-proof { flex-direction: column; max-width: none; }
  .gb-proof__cell + .gb-proof__cell { border-left: 0; border-top: 1px solid var(--gb-line-2); }
  .gb-head { flex-direction: column; align-items: flex-start; }
  .gb-pain__grid { grid-template-columns: 1fr; }
  .gb-bento { grid-template-columns: 1fr; }
  .gb-bento__wide { grid-column: span 1; grid-template-columns: 1fr; }
  .gb-bento__wide-img { min-height: 150px; order: -1; }
  .gb-bento__stat { position: static; margin: 16px 26px 20px; }
  .gb-guarantee, .gb-about__grid { grid-template-columns: 1fr; }
  .gb-footer__grid { grid-template-columns: 1fr; }
  .gb-faq__item p { padding-right: 0; }
  .gb-bar { display: flex; }
  body { padding-bottom: 76px; }
  .gb-compare th, .gb-compare td { padding: 14px 16px; font-size: 14px; }
}

/* ---------- Мостик к блокам WordPress ---------- */

.wp-block-button.is-style-gb-primary .wp-element-button {
  background: linear-gradient(180deg, var(--gb-amber-hi), var(--gb-amber));
  color: var(--gb-navy);
  box-shadow: var(--gb-shadow-amber);
}
.wp-block-button.is-style-gb-primary .wp-element-button:hover { color: var(--gb-navy); }
.wp-block-button.is-style-gb-ghost .wp-element-button {
  background: var(--gb-surface);
  color: var(--gb-navy);
  border: 1.5px solid var(--gb-line);
  box-shadow: none;
}
.wp-block-button.is-style-gb-small .wp-element-button { padding: 14px 22px; font-size: 15px; border-radius: 14px; }
.wp-block-navigation .wp-block-navigation-item__content { font-size: 15px; font-weight: 700; color: var(--gb-navy); }
.wp-site-blocks > * { margin-block: 0; }
html, body { overflow-x: clip; }

/* Свои flex-контейнеры сами держат ритм через gap: отступы потоковой раскладки лишние. */
.wp-block-group.gb-tile > *,
.wp-block-group.gb-step > *,
.wp-block-group.gb-review > *,
.wp-block-group.gb-hero__left > *,
.wp-block-group.gb-head__left > *,
.wp-block-group.gb-calc__text > *,
.wp-block-group.gb-about__text > *,
.wp-block-group.gb-news__item > *,
.wp-block-group.gb-guarantee__item > *,
.wp-block-group.gb-cta__text > *,
.wp-block-group.gb-footer__col > * { margin-block: 0 !important; }

/* Заголовки блоков ядра в наших секциях */
.gb-h1.wp-block-heading, .gb-h2.wp-block-heading, .gb-h3.wp-block-heading { margin: 0; }
.wp-block-group.gb-card:not(.gb-bento__wide) { display: flex; flex-direction: column; }

/* ---------- Внутренние страницы и записи ---------- */

.gb-page .gb-section > * { max-width: 820px; }
.gb-page__title { margin-bottom: 24px; }
.gb-page .wp-block-post-content p { font-size: 17px; line-height: 1.7; color: var(--gb-muted); margin-block: 0 20px; }
.gb-page .wp-block-post-content h2 { font-family: var(--gb-display); font-size: clamp(24px, 2.6vw, 34px); margin-block: 40px 16px; }
.gb-page .wp-block-post-content h3 { font-family: var(--gb-display); font-size: 21px; margin-block: 28px 12px; }
.gb-page .wp-block-post-content ul,
.gb-page .wp-block-post-content ol { color: var(--gb-muted); font-size: 17px; line-height: 1.7; padding-left: 22px; margin-block: 0 20px; }
.gb-page .wp-block-post-content li + li { margin-top: 8px; }
.gb-page .wp-block-post-content img { border-radius: 22px; }
.gb-page .wp-block-post-content blockquote {
  margin: 28px 0;
  padding: 22px 26px;
  background: var(--gb-surface);
  border: 1px solid var(--gb-line-2);
  border-left: 4px solid var(--gb-amber);
  border-radius: 18px;
}
.gb-page .wp-block-post-content table { width: 100%; border-collapse: collapse; }
.gb-page .wp-block-post-content th,
.gb-page .wp-block-post-content td { padding: 14px 16px; border-top: 1px solid var(--gb-line-2); text-align: left; }
.gb-404 .gb-h1 { max-width: 620px; }

/* ==========================================================================
   Развилка по ситуации: три входа под первым экраном
   Человек выбирает себя сам, мы получаем сегмент до первого сообщения.
   ========================================================================== */

.gb-router {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gb-router__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
}

.gb-router__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--gb-tint);
  color: var(--gb-blue-deep);
  font-weight: 800;
  font-size: 15px;
}

.gb-router__card--amber .gb-router__num {
  background: var(--gb-amber);
  color: #3A2606;
}

.gb-router__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--gb-blue-deep);
}

.gb-router__cta svg { width: 17px; height: 17px; }
.gb-router__card:hover .gb-router__cta svg { transform: translateX(3px); transition: transform .18s ease; }

/* ==========================================================================
   Отрасли: в Силезии это перевозки и склады, а не варшавский IT-фриланс
   ========================================================================== */

.gb-segments {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gb-segments__geo {
  margin-top: 22px;
  padding: 16px 20px;
  border: 1px dashed var(--gb-line);
  border-radius: 14px;
  background: var(--gb-tint-2);
  color: var(--gb-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* ==========================================================================
   Регламент по датам: снимает страх «а как это вообще будет происходить»
   ========================================================================== */

.gb-reg {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.gb-reg__item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 20px 22px;
  border: 1px solid var(--gb-line);
  border-radius: 16px;
  background: var(--gb-surface);
}

.gb-reg__when {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--gb-amber-tint);
  border: 1px solid #F7DDB2;
  color: var(--gb-amber-deep);
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
}

.gb-reg__body .gb-h3 { margin-bottom: 4px; }

@media (max-width: 960px) {
  .gb-router { grid-template-columns: 1fr; }
  .gb-segments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .gb-segments { grid-template-columns: 1fr; }
  .gb-reg__item { grid-template-columns: 1fr; gap: 10px; }
  .gb-reg__when { justify-self: start; }
}

/* Секция на подложке: отделяет регламент от соседних блоков. */
.gb-section--soft { background: var(--gb-bg-2); }