/* ============================================================
   BitStat – сторінка /contact-us
   ------------------------------------------------------------
   Стилі поверх дизайн-системи: ілюстрація в герої з чипом,
   клікабельні картки каналів. Спершу телефон, далі ширше.
   ============================================================ */

/* ── герой ── */
[data-site-refresh-content] .cn-hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
[data-site-refresh-content] .cn-hero-actions .btn-primary { margin-top: 0; display: inline-flex; align-items: center; gap: var(--sp-2); }
[data-site-refresh-content] .cn-hero-actions .btn-primary svg { width: 17px; height: 17px; }
[data-site-refresh-content] .cn-hero-actions .btn-secondary {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-5); min-height: 48px;
  border: 1px solid var(--border-light); border-radius: var(--r-12);
  font-size: var(--fs-14); font-weight: 600; color: var(--text-primary);
  text-decoration: none; background: var(--surface-card);
}
[data-site-refresh-content] .cn-hero-actions .btn-secondary:hover { border-color: var(--text-muted); }

[data-site-refresh-content] .cn-hero-art { position: relative; margin-top: var(--sp-4); }
[data-site-refresh-content] .cn-hero-art img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-20);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 26px 60px rgba(0,0,0,.55);
}
/* чип позиціюється завжди: перебиваємо мобільний static зі split.css */
[data-site-refresh-content] .cn-hero-art .cn-chip { position: absolute; top: -14px; right: 0; z-index: 2; margin: 0; }
@media (min-width: 1201px) { [data-site-refresh-content] .cn-hero-art .cn-chip { right: -10px; } }
@media (min-width: 1081px) { [data-site-refresh-content] .cn-hero-art { margin-top: 0; } }

/* ── канали: три клікабельні картки ── */
[data-site-refresh-content] .cn-channels { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
/* Картки каналів - головна дія сторінки, тож секція виділена
   (20.08.2026): сірої заливки більше немає (як на /pricing і
   /partners), натомість тонке зелене світіння з-під картки і
   зелений кант, який наливається при наведенні. */
[data-site-refresh-content] .cn-ch {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-6);
  border: 1px solid rgba(60, 217, 122, .18); border-radius: var(--r-16);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(60, 217, 122, .07), transparent 62%),
    linear-gradient(rgba(255, 255, 255, .012), transparent 40%);
  text-decoration: none;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, .03) inset;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
[data-site-refresh-content] .cn-ch:hover, [data-site-refresh-content] .cn-ch:focus-visible {
  border-color: rgba(60, 217, 122, .45);
  transform: translateY(-3px);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, .04) inset, 0 18px 40px rgba(11, 58, 33, .35);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(60, 217, 122, .12), transparent 62%),
    linear-gradient(rgba(255, 255, 255, .02), transparent 40%);
}
[data-site-refresh-content] .cn-ch-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--r-12);
  background: var(--green-bg); color: var(--accent-bright);
  border: 1px solid rgba(60, 217, 122, .22);
  transition: background .18s ease;
}
[data-site-refresh-content] .cn-ch:hover .cn-ch-ico { background: rgba(60, 217, 122, .16); }
[data-site-refresh-content] .cn-ch-ico svg, [data-site-refresh-content] .cn-ch-ico img { width: 20px; height: 20px; }
[data-site-refresh-content] .cn-ch-n {
  position: absolute; top: var(--sp-4); right: var(--sp-5);
  font-size: var(--fs-13); font-weight: 700; color: var(--text-muted);
  letter-spacing: .06em;
}
[data-site-refresh-content] .cn-ch h3 { margin: var(--sp-2) 0 0; font-size: var(--fs-16); font-weight: 700; color: var(--text-primary); }
[data-site-refresh-content] .cn-ch p { margin: 0; font-size: var(--fs-13); line-height: 1.6; color: var(--text-secondary); }
[data-site-refresh-content] .cn-ch-go {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-2); min-height: 24px;
  font-size: var(--fs-13); font-weight: 600; color: var(--accent-bright);
}
[data-site-refresh-content] .cn-ch-go svg { width: 14px; height: 14px; transition: transform .18s ease; }
[data-site-refresh-content] .cn-ch:hover .cn-ch-go svg { transform: translateX(3px); }
@media (min-width: 861px) {
  [data-site-refresh-content] .cn-channels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* обіцянки йдуть одразу після каналів: без подвійного повітря */
[data-site-refresh-content] #promise { padding-top: 0; }

/* пошта в CTA */
[data-site-refresh-content] .cn-mail { color: var(--accent-bright); font-weight: 600; text-decoration: none; }
[data-site-refresh-content] .cn-mail:hover { text-decoration: underline; }

/* Проміжки між секціями були 200px (100 знизу + 100 зверху) і читались
   як провал — той самий ритм, що на решті сторінок (20.08.2026). */
[data-site-refresh-content] #channels, [data-site-refresh-content] #faq, [data-site-refresh-content] #write-us { padding-top: var(--sp-16); }
[data-site-refresh-content] #channels, [data-site-refresh-content] #promise, [data-site-refresh-content] #faq, [data-site-refresh-content] #write-us { padding-bottom: var(--sp-16); }
/* Базова .fgrid має чотири колонки, а обіцянок три - четверта
   колонка лишалась порожньою і ряд висів притиснутим ліворуч.
   Явні три колонки на всю ширину, як у ряду каналів вище. */
@media (min-width: 1001px) {
  [data-site-refresh-content] #promise .fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Обіцянки: сіра заливка робила їх важчими за картки каналів і
   ламала ієрархію - головна дія має домінувати. Тепер це тихий
   ряд без фону, лише іконка, текст і тонка лінія зверху. */
[data-site-refresh-content] #promise .fgrid-item {
  background: none; border: 0; border-top: 1px solid var(--border-a10);
  border-radius: 0; padding: var(--sp-5) 0 0;
}
[data-site-refresh-content] #promise .fgrid-item:hover { border-color: rgba(60, 217, 122, .3); transform: none; }