/* BIOS ZONE — American Landing (en-US)
   Polish: WCAG AA contrast, full responsive coverage */
:root {
  --bg: #0a0a10; /* базовий fallback під CSS gradient і прозорий WebGL canvas */
  --text: #f5f5fa;
  --text-2: #b8b8c8;
  --mute: #a0a0b0;
  /* Скляні поверхні: токен затемнено (0.06 → 0.045) — більше «скла», менше «молока».
     Пакет за побажанням користувача (2026-09-09): +5–10% затемнення кожній скляній
     поверхні, посилений blur (матовість), text-shadow на текстах скла. */
  --card: rgba(255, 255, 255, 0.045);
  --card-border: rgba(255, 255, 255, 0.12);
  /* Єдиний рецепт скла (2026-09-09, за побажанням): хедер, розкритий акордеон і футер
     мають ІДЕНТИЧНІ прозорість/матовість/тінь. Міняти «скло» — тільки тут. */
  --glass-bg: rgba(14, 14, 18, 0.45);
  /* Слабкі GPU: 3D-фігури бояться blur — рендерителі малюють текстуру і блюрять її
     щокадру. Скло сприймається так само, а батарея/фпс на телефонах живуть. */
  --glass-blur: 16px;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

  /* Палітра фігур «8FC8» — ЄДИНИЙ власник кольорів літер (architect-прохід 2026-09-09,
     порт оригіналу codepen donotfold «CSS 8»): 8, F і C беруть тони звідси.
     Міняєш характер літер — міняй тільки ці два значення. */
  --fig-dark: #0d3d3d;
  --fig-light: #4f9be8;
  /* Розмір фігур «8FC8» (--figd = діаметр диска вісімки) тепер живе на .eight-shape
     (див. нижче): він рахується від фактично вільної висоти hero через container
     query — раніше vmin залишав велику пустоту під фігурами на високих екранах
     (зауваження користувача 2026-09-09). Таблиця співвідношень геометрії — біля .char. */
  --accent: #5a9ff0;
  --accent-2: #1a6e6a;
  --font: "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Archivo Black", sans-serif;
  --font-serif: "Instrument Serif", serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Playtest 2026-09-09: sticky-хедер (низ ~80px) на ВСІХ якорях ховав верх секції
   (~80px, замір: targetTop 0–1 при headerBottom 80). scroll-margin-top зарезервує
   зону хедера після переходу — інакше заголовок секції користувачеві не видно.
   Якщо змінюєш висоту хедера — перерахуй сюди (106 = hero-зміщення, так само). */
[id] { scroll-margin-top: 106px; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

/* Браузерні поверхні під світ свій design-системи, не дефолти */
::selection { background: rgba(90, 159, 240, 0.35); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html::before { animation: none; background-position: 50% 50%; }
  .char-8, .char-8-mirror,
  .char-f::before, .char-f::after, .char-c::before { animation: none; }
  /* Вісімки в reduced-motion стають статичними з --close = 15% (initial-value):
     пояс зафіксований, диски на базових зсувах — фігура повна, руху немає. */
  .btn-buy, .btn-telegram, .btn-paypal, .btn-tg, .clay-card, .nav-pill, .nav-pills { transition: none; }
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* Тіні під текстом скла: hero-заголовок, заголовки секцій, eyebrow, картки продуктів,
   кроки, summary гайдів, buy-блок. М'яка широка тінь (не обведення) — текст читається
   поверх анімованого фону і скла без візуального «бруду». За побажанням (2026-09-09). */
.title, .section-title, .eyebrow, .product h3, .product p, .step-item, .guide summary, .guide-body, .guide-body h3, .buy-card h2, .buy-card p, .site-footer,
/* Мобільна перевірка 2026-09-10: хедер — теж скло, але був ЄДИНИМ скляним блоком
   без text-shadow (пропуск у цьому пакеті). На 320–480px під хедером проходять
   світлі піки фону: замір контрасту білого тексту крізь скло 0.45 = 2.16:1
   (норма AA 4.5:1). Тінь не змінює затверджену прозорість 0.45 — вона
   повертає контурну читабельність у найгіршому кадрі. */
.header .logo-text .a, .header .logo-text .b, .header .nav-pill, .header .cta-text {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* Слабкі пристрої: фон сторінки = градієнт фолбеку. Без нього до першого WebGL-кадру
   (і на пристроях без WebGL) під контентом була б порожнеча/білий спалах. Тепер
   «перша фарба» сторінки правильна навіть до виконання JS — і без стрибка,
   коли canvas з'являється поверх (він малює той самий колір бази). */
/* Єдиний задній фон сторінки: спокійний blue gradient із CodePen-рецепта
   (linear-gradient 45deg, 200% canvas, position 0→100→0 за 6s). Він живе в CSS,
   тому не залежить від WebGL і однаково працює на mobile та desktop. Прозорий
   canvas із 3D-ПК накладається поверх нього, але сам градієнт не замінюється сценою. */
html::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  /* Глибокий navy у дусі синього поля американського прапора: трохи
     темніший за попередню палітру, але все ще достатньо синій для атмосфери. */
  background: linear-gradient(45deg, #0b2e55 0%, #071d39 50%, #01050d 100%);
  background-size: 200% 200%;
  animation: pageGradient 12s ease infinite;
}
@keyframes pageGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* India market theme: abstract saffron / navy / green atmosphere, not a flag.
   The official palette is used as light and depth cues only; the landing copy,
   hero figures and conversion controls remain shared with the US canonical page. */
html[data-market="india"] {
  --bg: #0e0921;
  --text: #fff8ed;
  --text-2: #e2d1bd;
  --mute: #c1ad9d;
  --card: rgba(13, 8, 31, 0.5);
  --card-border: rgba(255, 179, 71, 0.28);
  --glass-bg: rgba(10, 7, 25, 0.56);
  --glass-shadow: 0 10px 36px rgba(3, 2, 13, 0.56);
  --accent: #ffb347;
  --accent-2: #2f8f6b;
}

html[data-market="india"]::before {
  background:
    radial-gradient(circle at 82% 14%, rgba(255, 179, 71, 0.34), transparent 23%),
    radial-gradient(circle at 16% 86%, rgba(47, 143, 107, 0.34), transparent 31%),
    linear-gradient(135deg, #120a2e 0%, #220d42 47%, #092e2a 100%);
  background-size: 130% 130%;
  animation: indiaAtmosphere 18s ease-in-out infinite alternate;
}

html[data-market="india"]::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image: radial-gradient(circle, rgba(255, 218, 166, 0.7) 0 1px, transparent 1.5px);
  background-size: 30px 30px;
  mask-image: linear-gradient(135deg, transparent 5%, black 42%, transparent 92%);
  animation: indiaDust 24s linear infinite;
}

@keyframes indiaAtmosphere {
  0% { background-position: 15% 35%; }
  100% { background-position: 85% 65%; }
}

@keyframes indiaDust {
  from { transform: translate3d(-1%, -1%, 0); }
  to { transform: translate3d(1%, 1%, 0); }
}

html[data-market="india"] ::selection {
  background: rgba(255, 179, 71, 0.42);
}

html[data-market="india"] .buy-card[data-selected] {
  border-color: rgba(255, 179, 71, 0.68);
  box-shadow: 0 0 0 1px rgba(255, 179, 71, 0.42), var(--glass-shadow);
}

@media (prefers-reduced-motion: reduce) {
  html[data-market="india"]::before,
  html[data-market="india"]::after { animation: none; }
}

/* Poland market theme: a deliberately bolder cultural experiment than the
   shared US atmosphere. Graphite, warm paper and carmine create a print-shop /
   industrial signal without reproducing the flag literally. The layout,
   conversion controls and 8FC8 figures remain shared for clean A/B comparison. */
html[data-market="poland"] {
  --bg: #111216;
  --text: #fff9f1;
  --text-2: #e3d9cf;
  --mute: #c0b3aa;
  --card: rgba(24, 23, 25, 0.56);
  --card-border: rgba(229, 82, 82, 0.34);
  --glass-bg: rgba(17, 17, 20, 0.66);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.64);
  --accent: #e05252;
  --accent-2: #e7c99a;
}

html[data-market="poland"]::before {
  background:
    radial-gradient(ellipse at 78% 15%, rgba(224, 82, 82, 0.5) 0%, transparent 28%),
    radial-gradient(ellipse at 15% 78%, rgba(231, 201, 154, 0.19) 0%, transparent 30%),
    linear-gradient(126deg, #090b10 0%, #1a1118 37%, #3a131c 59%, #0c0d12 100%);
  background-size: 165% 165%;
  animation: polandAtmosphere 22s cubic-bezier(.45, 0, .25, 1) infinite alternate;
}

html[data-market="poland"]::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(115deg, transparent 0 46%, rgba(255, 247, 236, 0.12) 47%, transparent 48%),
    repeating-linear-gradient(0deg, rgba(255, 247, 236, 0.045) 0 1px, transparent 1px 7px);
  background-size: 260px 260px, 100% 8px;
  mix-blend-mode: screen;
  animation: polandPaperDrift 30s linear infinite;
}

@keyframes polandAtmosphere {
  0% { background-position: 12% 42%; }
  100% { background-position: 88% 58%; }
}

@keyframes polandPaperDrift {
  from { transform: translate3d(-1.5%, -0.5%, 0) rotate(-0.15deg); }
  to { transform: translate3d(1.5%, 0.5%, 0) rotate(0.15deg); }
}

html[data-market="poland"] ::selection {
  background: rgba(224, 82, 82, 0.48);
}

html[data-market="poland"] .buy-card[data-selected] {
  border-color: rgba(224, 82, 82, 0.82);
  box-shadow: 0 0 0 1px rgba(224, 82, 82, 0.5), var(--glass-shadow);
}

@media (prefers-reduced-motion: reduce) {
  html[data-market="poland"]::before,
  html[data-market="poland"]::after { animation: none; }
}

/* Germany market theme: a Bauhaus / engineering-blueprint experiment. The
   steel-blue field, amber signal light and precise construction grid create a
   distinct regional atmosphere without drawing a literal flag. */
html[data-market="germany"] {
  --bg: #0a1118;
  --text: #f5f3ec;
  --text-2: #d1d6d8;
  --mute: #a9b7bf;
  --card: rgba(13, 22, 29, 0.64);
  --card-border: rgba(240, 182, 79, 0.34);
  --glass-bg: rgba(10, 17, 23, 0.68);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.62);
  --accent: #f0b64f;
  --accent-2: #88a7bc;
}

html[data-market="germany"]::before {
  background:
    radial-gradient(ellipse at 78% 14%, rgba(240, 182, 79, 0.48) 0%, transparent 24%),
    radial-gradient(ellipse at 16% 84%, rgba(84, 135, 166, 0.34) 0%, transparent 29%),
    linear-gradient(135deg, #071019 0%, #102532 42%, #213039 61%, #090d12 100%);
  background-size: 175% 175%;
  animation: germanyAtmosphere 26s cubic-bezier(.45, 0, .25, 1) infinite alternate;
}

html[data-market="germany"]::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    repeating-linear-gradient(90deg, rgba(205, 224, 234, 0.08) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(205, 224, 234, 0.06) 0 1px, transparent 1px 42px),
    linear-gradient(135deg, transparent 0 47%, rgba(214, 75, 65, 0.28) 47.5% 48%, transparent 48.5% 100%);
  background-size: 42px 42px, 42px 42px, 360px 360px;
  mix-blend-mode: screen;
  animation: germanyBlueprint 34s linear infinite;
}

@keyframes germanyAtmosphere {
  0% { background-position: 8% 56%; }
  100% { background-position: 92% 44%; }
}

@keyframes germanyBlueprint {
  from { transform: translate3d(-1%, 0, 0); }
  to { transform: translate3d(1%, 0.8%, 0); }
}

html[data-market="germany"] ::selection {
  background: rgba(240, 182, 79, 0.46);
}

html[data-market="germany"] .buy-card[data-selected] {
  border-color: rgba(240, 182, 79, 0.84);
  box-shadow: 0 0 0 1px rgba(240, 182, 79, 0.5), var(--glass-shadow);
}

@media (prefers-reduced-motion: reduce) {
  html[data-market="germany"]::before,
  html[data-market="germany"]::after { animation: none; }
}

/* Africa market theme: an indigo / terracotta / ochre textile experiment.
   Africa is not one visual culture, so this is deliberately documented as a
   reversible pan-African English A/B hypothesis rather than a literal flag or
   claim to represent every region. The repeated diamond rhythm references the
   controlled geometric construction found in indigo-resist textiles; it stays
   behind the shared glass and 8FC8 hero so conversion geometry remains comparable. */
html[data-market="africa"] {
  --bg: #080d20;
  --text: #fff8ea;
  --text-2: #e7d9c8;
  --mute: #c5b6a8;
  --card: rgba(14, 15, 39, 0.62);
  --card-border: rgba(242, 189, 95, 0.36);
  --glass-bg: rgba(8, 11, 29, 0.7);
  --glass-shadow: 0 14px 44px rgba(2, 3, 13, 0.7);
  --accent: #f2bd5f;
  --accent-2: #68a981;
}

html[data-market="africa"]::before {
  background:
    radial-gradient(ellipse at 82% 18%, rgba(222, 103, 60, 0.46) 0%, transparent 25%),
    radial-gradient(ellipse at 12% 78%, rgba(104, 169, 129, 0.24) 0%, transparent 28%),
    linear-gradient(135deg, #090d25 0%, #151843 39%, #47202c 69%, #080b18 100%);
  background-size: 165% 165%;
  animation: africaAtmosphere 28s cubic-bezier(.45, 0, .25, 1) infinite alternate;
}

html[data-market="africa"]::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(30deg, transparent 0 43%, rgba(242, 189, 95, 0.2) 43.5% 45%, transparent 45.5% 100%),
    linear-gradient(150deg, transparent 0 43%, rgba(222, 103, 60, 0.18) 43.5% 45%, transparent 45.5% 100%),
    repeating-linear-gradient(90deg, rgba(255, 248, 234, 0.05) 0 1px, transparent 1px 28px);
  background-size: 84px 84px, 84px 84px, 28px 28px;
  mix-blend-mode: screen;
  mask-image: linear-gradient(125deg, black 0%, transparent 88%);
  animation: africaTextile 36s linear infinite;
}

@keyframes africaAtmosphere {
  0% { background-position: 10% 58%; }
  100% { background-position: 90% 42%; }
}

@keyframes africaTextile {
  from { transform: translate3d(-1.5%, -0.5%, 0) rotate(-0.2deg); }
  to { transform: translate3d(1.5%, 0.8%, 0) rotate(0.2deg); }
}

html[data-market="africa"] ::selection {
  background: rgba(242, 189, 95, 0.5);
}

html[data-market="africa"] .buy-card[data-selected] {
  border-color: rgba(242, 189, 95, 0.86);
  box-shadow: 0 0 0 1px rgba(242, 189, 95, 0.52), var(--glass-shadow);
}

@media (prefers-reduced-motion: reduce) {
  html[data-market="africa"]::before,
  html[data-market="africa"]::after { animation: none; }
}

/* Motion layer: CSS timelines are an enhancement over the readable static page.
   Unsupported browsers use the IntersectionObserver fallback in index.html. */
.scroll-progress {
  position: fixed; inset: 0 0 auto; z-index: 1000;
  height: 3px; pointer-events: none;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, #174d83, var(--accent));
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .scroll-progress {
      animation: scrollProgress linear both;
      animation-timeline: scroll(root);
    }
  }
}
@keyframes scrollProgress { to { transform: scaleX(1); } }

.reveal-on-scroll { opacity: 1; transform: none; }
.has-motion-js .reveal-on-scroll:not(.is-visible) {
  opacity: 0; transform: translateY(28px) scale(.97);
}
.has-motion-js .reveal-on-scroll.is-visible {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s ease;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .has-motion-js .reveal-on-scroll {
      opacity: 1; transform: none;
      animation: revealOnScroll linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    .products-grid .reveal-on-scroll:nth-child(2),
    .step-row .reveal-on-scroll:nth-child(2) { animation-delay: 70ms; }
    .products-grid .reveal-on-scroll:nth-child(3),
    .step-row .reveal-on-scroll:nth-child(3) { animation-delay: 140ms; }
    .step-row .reveal-on-scroll:nth-child(4) { animation-delay: 210ms; }
  }
}
@keyframes revealOnScroll {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .has-motion-js .reveal-on-scroll,
  .has-motion-js .reveal-on-scroll:not(.is-visible) {
    opacity: 1; transform: none; animation: none; transition: none;
  }
}
#bg-three { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
#bg-three canvas { display: block; width: 100% !important; height: 100% !important; }
#bg-fallback {
  position: fixed; inset: 0; z-index: 1;
  /* Fallback лишається тією самою CSS-поверхнею, якщо WebGL не стартував. */
  background: transparent;
  display: none;
}

.page {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 48px) 60px;
}

/* HEADER */
.header {
  position: sticky; top: 12px; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  background: var(--glass-bg); /* єдиний рецепт скла (див. :root): 0.45 затверджено користувачем */
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--card-border); border-radius: 999px;
  margin-bottom: 32px; box-shadow: var(--glass-shadow);
}

/* Опущення марки на 3px (2026-09-09): силует монітора з «ніжками» внизу візуально
   важчий за текст — без зсуву він здавався піднятим відносно напису BIOS ZONE. */
.logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Марка без плитки (2026-09-09): синій квадрат-підкладку знято — сам силует
   монітора з кодом і є маркою. Розмір трохи більший за стару іконку (36px плитка
   мала 20px іконку), колір — колір тексту лого через currentColor. */
.logo-mark {
  transform: translateY(3px); /* опущення: див. коментар біля .logo */
  width: 40px; height: 40px;
  display: grid; place-items: center; color: var(--text);
}
.logo-mark svg { width: 100%; height: 100%; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text .a { font-family: var(--font-display); font-size: 15px; }
.logo-text .b { font-size: 11px; color: var(--mute); margin-top: 2px; }

.nav-pills { display: flex; gap: 4px; flex: 1; justify-content: center; }
.nav-pill {
  padding: 8px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--text-2);
  transition: all 0.2s;
}
.nav-pill:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.nav-pill.active { background: white; color: #000; }

/* Бургер: прихований на десктопі, з'являється коли меню не вміщається */
.nav-toggle {
  display: none; position: relative; z-index: 101;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid var(--card-border);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  flex-shrink: 0; transition: background 0.2s;
}
.nav-toggle:hover { background: rgba(255,255,255,0.15); }
.nav-toggle .bar {
  display: block; width: 16px; height: 2px; border-radius: 2px;
  background: var(--text); transition: transform 0.25s ease;
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.header-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--card-border); border-radius: 999px;
  transition: all 0.2s;
}
.header-cta:hover { background: rgba(255,255,255,0.12); }
.cta-dot {
  width: 36px; height: 36px; border-radius: 50%;
  background: white; color: #000; display: grid; place-items: center;
}
.cta-dot svg { width: 14px; height: 14px; }
.cta-text { font-size: 14px; font-weight: 500; }

/* HERO */
/* Вертикальний ритим hero — clamp від vmin: на низьких екранах відступи стискаються,
   і рядок довіри (.hero-trust, останній елемент) не випадає за межі першого екрана.
   Історія: 32→56 (2026-09-09, «низ hero занадто близько до краю») → clamp — та сама
   турбота, але без виходу за viewport на низьких екранах.
   min-height: 100svh − sticky-header зона (top 12 + header ~62 + margin 32 ≈ 106px):
   hero ЗАВЖДИ заповнює перший екран повністю, тож «Our Products» починається тільки
   з другого (зауваження користувача 2026-09-09). svh (не 100vh!): на мобільних
   vh включає зону зниклої адресної строки — без цього заголовок секції визирає.
   Фолбек для старих браузерів: звичайний 100vh рядком вище. */
.hero {
  min-height: calc(100vh - 106px); /* фолбек */
  min-height: calc(100svh - 106px);
  /* Вертикальний розподіл: фігури вгорі, текст/CTA/довіра притиснуті до низу —
     інакше при 100svh між CTA і довірою лишається діра. */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(16px, 3vmin, 32px) 0 clamp(24px, 5.5vmin, 56px);
}
/* Зона фігур: забирає ВЕСЬ залишок висоти hero після текстового блоку (flex: 1),
   мінімум 120px — щоб фігури не зникнули на екстремально низьких вікнах.
   Фігури ростуть саме на цей залишок — більше немає «мертвої» пустоти між
   фігурами і заголовком. */
.hero-visual { flex: 1 1 auto; min-height: 120px; display: flex; }

.hero-trust {
  margin-top: clamp(8px, 1.8vmin, 16px);
  font-size: clamp(12px, 1.5vmin, 14px); color: var(--mute); letter-spacing: 0.01em;
}

.eight-shape {
  /* ЄДИНИЙ власник розміру фігур: --figd = діаметр диска вісімки. Вся геометрія
     літер похідна (таблиця співвідношень — біля .char нижче).
     Чому cqh, а не vmin: vmin залежав від екрана, а не від вільного місця, тож на
     високих екранах під фігурами лишалась велика пустота (зауваження 2026-09-09).
     Тепер: .hero-visual вище забирає весь залишок висоти hero, .eight-shape —
     size-контейнер, і --figd береться з фактичної висоти ТА ширини зони (обмеження
     — вузьке місце, див. формулу нижче).
     Фігури заповнюють вільну висоту на БУДЬ-яких пропорціях екрана, hero не
     перевищує 1 екран (min-height, а не fixed). НЕ міняти /2 — розсинхронізується
     з висотою .char-8 (2D). */
  --figd: clamp(40px, 9.5vmin, 118px); /* fallback: стара vmin-система */
  /* Обмеження, що б'ють одночасно (min = вузьке місце):
     1) висота: (100cqh - нижній відступ) / 2 — найвища літера 8 = 2D (1:2), × 0.92 запас;
     2) ширина: (100cqw - 3 проміжки) / 4 — у ряді 4 літери шириною D кожна, × 0.95 запас.
     Без п.2 на вузьких екранах рядок виїжджає за ширину (перевірено sandbox-заміром).
     Cap 155px узгоджений з max-width: 700px (4×155+3×22 = 686 < 700).
     НЕ міняти /2 — розсинхронізується з висотою .char-8 (2D); /4 — з шириною літер (D). */
  --figd: clamp(40px, min(calc((100cqh - 1.4em) / 2 * 0.92), calc((100cqw - 36px) / 4 * 0.95)), 155px);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(8px, 1.85vmin, 22px);
  margin: 0 auto clamp(12px, 2.2vmin, 20px); max-width: 700px;
  container-type: size;
  flex: 1;
}
/* Зерно плівки з оригіналу (feTurbulence+overlay) БУЛО тут і знято 2026-09-09:
   його прямокутник накривав усю зону фігур і на темному тлі виглядав як
   зайвий квадратний фон (зауваження користувача). Не повертати без маски,
   що обрізає зерно точно по силуетах літер. */

/* Коробки літер. Співвідношення від D = --figd (база 92px):
   .char (коробка F/C): 1×1.7174D (92→158) | 8: висота = 2D (1:2 оригіналу)
   Вирівнювання ваги 2026-09-10 («підтягнути C, F до ваги 8»): перо F .44D
   (висота 1.46D), рамено .78D; C зовнішній еліпс .94×1.67D, кільце ~42px.
   Вага на висоту: 8 = 0.785D, F ≈ 0.82D, C ≈ 0.62D + світлове плато.
   F-стійка: left .275D top .14D w .44D h 1.46D | F-рамено: w .78D h .44D, тінь .78D
   | C: left/top .03D, коробка .94D×1.67D, радіуси отвору 4%×23%.
   НЕ міняти окремі calc-и «на око» — перерахуй від базових px (27/92=0.295 тощо). */
.char { position: relative; width: var(--figd); height: calc(var(--figd) * 1.7174); flex-shrink: 0; }

/* Вісімки — точна пропорція оригіналу 1:2 (architect-порт): контейнер = дві висоти
   диска, диски лише торкаються, «пояс» дає translateY(±--close). Раніше контейнер
   був 158px при дисках 92 → перекриття 26px, яке маска не приховувала — фігури
   «скомкались» (зауваження користувача 2026-09-09). Висоту тримати = 2×диск
   у КОЖНОМУ брейкпоінті нижче. */
.char-8, .char-8-mirror { height: calc(var(--figd) * 2); }

/* Механізм «дихання» вісімок — дослівний порт з оригіналу: одна змінна --close керує
   ОДНОЧАСНО глибиною зрізу маски і зсувом дисків. Реєстрація @property робить її
   анімованою — без неї keyframes по custom property не інтерполюються. */
@property --close {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 15%;
}

/* Вісімки — порт оригіналу: два конусні диски, чий «пояс» стискається анімацією
   ЗМІННОЇ --close (15%→20%): вона одночасно поглиблює зріз маски і зсовує диски.
   НЕ розкручувати диски на окремі transform-анімації — саме єдина змінна дає рідний
   рух оригіналу; поштучні швидкості колись дали «зникнення» фону (той самий клас
   пастки, що й у WebGL-фоні). Геометрія перевірена: зріз max 20% << 50% диска —
   зникнення неможливе (радіусно-маскова пастка літери C тут не повторена).
   Дзеркальна вісімка — та сама, у протифазі. */
.char-8, .char-8-mirror { animation: waistSqueeze 4s ease-in-out infinite; }
.char-8-mirror { animation-direction: reverse; }

.char-8::before, .char-8::after,
.char-8-mirror::before, .char-8-mirror::after {
  content: ''; position: absolute;
  width: var(--figd); height: var(--figd); border-radius: 50%;
  background: conic-gradient(from 0deg, var(--fig-dark), var(--fig-light));
  mask-image: linear-gradient(transparent calc(var(--close) / 2), black var(--close));
  -webkit-mask-image: linear-gradient(transparent calc(var(--close) / 2), black var(--close));
}

.char-8::before, .char-8-mirror::before { top: 0; transform: translateY(var(--close)) scaleY(-1); }
.char-8::after, .char-8-mirror::after { bottom: 0; transform: translateY(calc(-1 * var(--close))); }

@keyframes waistSqueeze {
  50% { --close: 20%; }
}

/* F: жирні пропорції (стійка = рамени .348D ≈ 32px при базі) — вибір користувача
   «Жирна», щоб фігура важила поруч із круглими 8/C. Вся геометрія — співвідношення
   від --figd (див. таблицю біля .char): масштабується автоматично на всіх екранах. */
.char-f::before {
  content: ''; position: absolute;
  left: calc(var(--figd) * 0.275); top: calc(var(--figd) * 0.14);
  width: calc(var(--figd) * 0.44); height: calc(var(--figd) * 1.46);
  /* Світлове плато 18%–92%: на товстому пері темний кінець домінував і знижував
     середню яскравість проти дисків 8 — те саме перо, більше світла. */
  background: linear-gradient(var(--fig-light) 18%, var(--fig-dark) 92%);
  border-radius: calc(var(--figd) * 0.087);
  animation: eightBreath 4s ease-in-out infinite reverse;
}

.char-f::after {
  content: ''; position: absolute;
  left: calc(var(--figd) * 0.275); top: calc(var(--figd) * 0.14);
  width: calc(var(--figd) * 0.78); height: calc(var(--figd) * 0.44);
  background: linear-gradient(var(--fig-light) 18%, var(--fig-dark) 92%);
  border-radius: calc(var(--figd) * 0.087);
  /* Нейтральний темний (#1a1a22) замість var(--fig-dark) (2026-09-10, impeccable detect):
     хроматичний box-shadow на темному тлі — ознака AI-генерації. Візуально це «друге
     рамено» F, нейтральний сірий зберігає вагу літери поруч з 8/C, але не тягне
     «кольорового сяйва». */
  box-shadow: 0 calc(var(--figd) * 0.78) 0 #1a1a22;
  animation: eightBreath 4s ease-in-out infinite;
}

.char-c::before {
  content: ''; position: absolute;
  left: calc(var(--figd) * 0.03); top: calc(var(--figd) * 0.03);
  width: calc(var(--figd) * 0.94); height: calc(var(--figd) * 1.67);
  border-radius: 50%;
  /* C як жирна дуга: конус малює колір + клиновий рот праворуч (0° = вгору,
     90° = праворуч; рот 64–116°), радіальна маска вибирає отвір.
     ВАЖЛИВО (тут уже було зламано): в radial-gradient(ellipse W H) W і H — це
     РАДІУСИ отвору, не його розміри! Отвір 12×78px при коробці 76×142 =
     радіуси 7.9% × 27.5%. Колись записали розміри як радіуси (52.6%/73.2%) —
     отвір став 80×208, більший за фігуру, і C ПОВНІСТЮ зникла з продакшну.
     Перевірка: радіус ≤ 50% відповідної сторони коробки.
     Кільце ~38px = стійка F .40D (пара тримається разом; вирівнювання ваги 2026-09-10).
     Якщо міняєш кути рота або маску — дивись фігуру наживо на проді. */
  background: conic-gradient(from 0deg,
    var(--fig-dark) 0deg, var(--fig-light) 58deg,
    transparent 64deg 116deg,
    var(--fig-light) 118deg, var(--fig-dark) 316deg,
    var(--fig-light) 358deg, var(--fig-dark) 360deg);
  mask-image: radial-gradient(ellipse 4% 23% at 50% 50%, transparent 97%, black 100%);
  -webkit-mask-image: radial-gradient(ellipse 4% 23% at 50% 50%, transparent 97%, black 100%);
  animation: eightBreath 4s ease-in-out infinite;
}

@keyframes eightBreath {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.04) translateY(-5px); }
}

/* HERO TEXT */
.hero-copy {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  padding: clamp(14px, 2vmin, 22px) clamp(16px, 2.4vw, 28px);
  /* Та сама прозорість, що у Telegram Bot: фон не перекриває сцену,
     а лише розмиває її під текстом для читабельності. */
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
}
.hero-copy .hero-sub { margin-bottom: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: 0.04em; color: var(--text-2);
  margin-bottom: clamp(8px, 1.4vmin, 12px);
}
.eyebrow::before { content: ""; display: inline-block; width: 10px; height: 1px; background: currentColor; }
.eyebrow::after { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-left: 4px; }

.title {
  font-family: var(--font-display);
  /* line-height ~1.02: заголовок має триматись в 1 екран разом з CTA.
     Якщо збільшувати — перевіряти, що hero не виїжджає за перший viewport. */
  /* Розмір від vmin (не 8vw!): заголовок має стискатись і на НИЗЬКИХ екранах,
     інакше hero не вміщується в 1 екран разом із CTA і рядком довіри. */
  font-size: clamp(38px, 7vmin, 96px);
  line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 14px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.title-line { display: block; }

/* Пояснення і список моделей — окремий рядок body-масштабу під заголовком,
   НЕ всередині h1: дрібний текст між гігантськими дужками читався погано. */
.hero-sub {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 20px; margin: 0 0 clamp(12px, 2.2vmin, 20px); max-width: 62ch;
}
.title-desc {
  font-family: var(--font);
  font-size: clamp(14px, 1.2vw, 16px); font-weight: 400;
  color: var(--text-2); letter-spacing: 0; line-height: 1.5;
  text-transform: none; margin: 0;
}
.hero-models {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--mute); font-weight: 500;
}
.hero-models .models-icon { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
.hero-models .paren { color: var(--mute); font-weight: 400; }

.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(10px, 2vmin, 18px); }

.btn-buy {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 28px;
  background: #0e4a8a;
  border-radius: 999px; color: white; font-weight: 600;
  font-size: 16px; transition: all 0.2s; box-shadow: none;
  min-width: 190px; justify-content: center; /* пара з btn-telegram однакового розміру */
}
.btn-buy:hover { transform: translateY(-2px); }
.buy-label { font-family: var(--font-display); }
.btn-buy svg { width: 18px; height: 18px; flex-shrink: 0; } /* PayPal-значок: той самий розмір, що іконка Telegram */

.btn-telegram {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; /* = btn-buy: кнопки пари однакового розміру (2026-09-09) */
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* матовість, як у скляних карток */
  border: 1px solid var(--card-border);
  border-radius: 999px; color: white; font-weight: 500;
  font-size: 16px; transition: all 0.2s;
  min-width: 190px; justify-content: center; /* пара з btn-buy однакового розміру */
}
.btn-telegram:hover { background: rgba(255,255,255,0.15); }
.btn-telegram svg { width: 18px; height: 18px; }

/* PRODUCTS */
.products { margin: 34px 0; }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.clay-card {
  background: var(--card); border: 1px solid var(--card-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* матовість карток продуктів/гайдів/buy */
  border-radius: 20px; padding: 28px; transition: all 0.3s;
}
.clay-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-4px); }
.product.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 32px rgba(0,0,0,0.4); }
.product:focus-visible { border-color: var(--accent); }

.prod-icon {
  width: 48px; height: 48px; background: rgba(255,255,255,0.08);
  border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px;
}
.prod-icon svg { width: 22px; height: 22px; color: var(--accent); }

.product h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.product p { font-size: 15px; color: var(--text-2); margin-bottom: 16px; line-height: 1.6; }
.price { font-family: var(--font-display); font-size: 22px; color: var(--accent); }

/* SECTION TITLES — зменшено (42px було завелико для внутрішніх секцій); відступ знижено 24→16px */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 28px);
  margin-bottom: 16px; letter-spacing: -0.02em;
}

.steps { margin: 34px 0; }
.step-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.step-item {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 24px 16px;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 16px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* матовість кроків */
  font-size: 15px; font-weight: 500; color: var(--text);
}
.step-item .n {
  width: 36px; height: 36px;
  background: #0e4a8a;
  border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; color: white;
}

/* BUY SECTION */
.buy-section { margin: 34px 0; }
.buy-card { text-align: center; padding: 40px 32px; }
.buy-card h2 { font-family: var(--font-display); font-size: 28px; margin-bottom: 8px; }
.buy-card p { color: var(--text-2); margin-bottom: 24px; font-size: 16px; }
.buy-card[data-selected] { border-color: rgba(90, 159, 240, 0.65); box-shadow: 0 0 0 1px rgba(90, 159, 240, 0.38), var(--glass-shadow); }
.selected-plan { min-height: 22px; margin: -10px 0 18px; color: var(--accent); font-size: 14px; font-weight: 600; }
.pay-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn-paypal {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; background: #0070ba; color: white;
  border-radius: 999px; font-weight: 600; font-size: 16px; transition: all 0.2s;
}
.btn-paypal:hover { background: #005ea6; transform: translateY(-2px); }
.btn-paypal:disabled { cursor: not-allowed; opacity: .62; transform: none; }
.btn-paypal svg { width: 18px; height: 18px; }

.btn-tg {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; background: #0066aa; color: white;
  border-radius: 999px; font-weight: 600; font-size: 16px; transition: all 0.2s;
}
.btn-tg:hover { background: #005588; transform: translateY(-2px); }
.btn-tg svg { width: 18px; height: 18px; }

/* FAQ-секцію видалено (гайди покривають ті питання); стилі .faq прибрано 2026-09-08 */

/* RELATED GUIDES — accordion */
.related-guides { margin: 34px 0; }
.guides-note { color: var(--text-2); font-size: 14px; margin: -12px 0 20px; }

.guide { margin-bottom: 12px; }
.guide summary {
  font-weight: 600; font-size: 16px; padding: 6px 0;
  list-style: none; cursor: pointer; color: var(--text);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.guide summary::-webkit-details-marker { display: none; }
.guide summary::after {
  content: '+'; font-family: var(--font-display); font-size: 20px;
  color: var(--accent); flex-shrink: 0; transition: transform 0.2s; line-height: 1;
}
.guide[open] summary::after { transform: rotate(45deg); }
.guide[open] summary { color: var(--accent); }

/* Розкритий акордеон: скло ІДЕНТИЧНЕ хедеру (var(--glass-bg), рішення користувача 2026-09-09).
   Правило стоїть ПІСЛЯ .clay-card:hover, інакше hover (rgba 255 0.1) перекриє фон відкритої картки. */
.guide[open] {
  /* Історія значень: 0.85 → 0.92 («щоб добре читалось») → 0.45 (уніфікація зі склом хедера).
     Якщо текст у розкритому гайді стане важко читати — повернення: rgba(13, 13, 17, 0.92) тут і нижче. */
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}

.guide-body { padding-top: 12px; color: var(--text-2); font-size: 15px; line-height: 1.7; }

/* Плавне розкриття: JS анімує grid-template-rows 0fr->1fr (клас .expanding),
   той самий viewBox що й у розкритої картки. Поки триває анімація, [open]-стилі
   (фон/тінь) застосовуються через клас .expanding — інакше фон "стрибав" би на кадр раніше висоти.
   overflow:hidden тримає вміст прихованим під час стиснення. Не "спрощувати" до display-toggle —
   це і є причина стрибків висоти сторінки без анімації. */
.guide .guide-wrap {
  display: grid; grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.32s ease;
}
.guide.open .guide-wrap { grid-template-rows: 1fr; }
.guide.open > summary::after { transform: rotate(45deg); }
.guide.open > summary { color: var(--accent); }
.guide.open, .guide.expanding {
  /* Той самий рецепт, що .guide[open] вище — тримати синхронно (див. історію значень там). */
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}
.guide { transition: background 0.32s ease, box-shadow 0.32s ease; }
.guide-body h3 {
  font-family: var(--font-display); font-size: 15px; letter-spacing: 0.01em;
  color: var(--text); margin: 18px 0 8px;
}
.guide-body p { margin: 0 0 12px; }
.guide-body ul { margin: 0 0 12px; padding-left: 20px; }
.guide-body li { margin-bottom: 8px; }
.guide-body strong { color: var(--text); font-weight: 600; }
.guide-body a { color: var(--accent); font-weight: 600; }
.guide-body a:hover { text-decoration: underline; }

/* Статус оплати: inline під кнопками, роль=status для скрін-рідерів */
.pay-note {
  margin: 16px auto 0; max-width: 40ch;
  color: var(--text-2); font-size: 14px; line-height: 1.6;
  padding: 10px 16px; border: 1px solid var(--card-border); border-radius: 12px;
  background: rgba(90, 159, 240, 0.08);
}

/* CTA-блок після гайдів: скло в мові решти карток (var(--card) + blur(10px)) */
.after-guides-cta {
  margin-top: 24px; padding: 32px; text-align: center;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 20px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.after-guides-cta h2 { font-family: var(--font-display); font-size: 22px; margin-bottom: 8px; }
.after-guides-cta p { color: var(--text-2); margin-bottom: 20px; }
/* Кнопки в CTA центровані на ВСІХ ширинах: text-align секції не діє на flex-рядок
   (.hero-cta-row — flex, за замовчуванням притиснутий ліворуч — саме це бачив користувач). */
.after-guides-cta .hero-cta-row { justify-content: center; }

/* Достатньо місця по ширині: текст і кнопки стають ОДНИМ рядком
   (заголовок | опис | Buy Tool | Telegram Bot), центровані. Нижче 1100px —
   колонкою з центрованими кнопками ( там тісно, рядок б перенісся хаотично). */
@media (min-width: 1100px) {
  .after-guides-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 12px clamp(16px, 3vw, 36px); text-align: left; padding: 28px 36px;
  }
  .after-guides-cta p { margin-bottom: 0; }
  .after-guides-cta .hero-cta-row { margin-top: 0; flex-wrap: nowrap; }
}

/* FOOTER */
.site-footer strong { color: var(--text); font-weight: 600; }
.site-footer a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--text); }
.site-footer {
  /* Скло ідентичне хедеру (2026-09-09): той самий фон/матовість/тінь, форма — карткова (20px). */
  text-align: center; padding: 24px 28px 20px; color: var(--mute);
  font-size: 13px; border: 1px solid var(--card-border); border-radius: 20px; margin-top: 40px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}
.site-footer p + p { margin-top: 8px; }

/* RESPONSIVE — Desktop wide */
@media (min-width: 1400px) {
  .page { max-width: 1320px; padding: 32px 48px 80px; }
}

/* RESPONSIVE — Tablet landscape */
@media (max-width: 1100px) {
  .header-cta .cta-text { display: none; }
  .header-cta { padding: 6px; }
}

/* RESPONSIVE — Tablet portrait: меню ховається, з'являється бургер.
   Панель — випадаючий список під хедером (absolute, не штовхає контент). */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; order: 2; margin-left: auto; }
  .header-cta { order: 3; }
  .nav-pills {
    /* Панель НЕ display:none↔flex (миттєве показ/ховання), а завжди в дереві:
       absolute не штовхає контент, visibility:hidden прибирає з таб/скрінрідера.
       Це дає справжню двосторонню fade+slide анімацію; JS і клас .open не змінені.
       visibility transition: при хованні спрацьовує ПІСЛЯ fade (delay 0.25s),
       інакше панель зникла б миттєво до анімації. */
    display: flex;
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; gap: 4px; padding: 10px;
    background: rgba(14, 14, 18, 0.98); /* +1%: панель і так майже суцільна, посилено тільки blur (28px) */
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); /* матовість панелі — узгоджено з хедером */
    border: 1px solid var(--card-border); border-radius: 24px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    opacity: 0; transform: translateY(-8px);
    visibility: hidden; pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .nav-pills.open {
    opacity: 1; transform: translateY(0);
    visibility: visible; pointer-events: auto;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
  }
  .nav-pill { padding: 12px 18px; font-size: 15px; text-align: left; }
  /* Планшет/вузький desktop ще тримає ПК-композицію: картки стискаються,
     але не перетворюються на довгу вертикальну колонку. Перелом нижче 700px
     залишає mobile-friendly stacking, коли чотири кроки вже фізично не вміщаються. */
  .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .products-grid .clay-card { padding: 20px 16px; }
  .products-grid .prod-icon { width: 42px; height: 42px; margin-bottom: 12px; }
  .product h3 { font-size: 16px; }
  .product p { font-size: 14px; line-height: 1.45; }
  .step-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .step-item { padding: 18px 8px; gap: 8px; font-size: 13px; }
  .guides-grid { grid-template-columns: repeat(2, 1fr); }
  /* .title і .hero тут БІЛЬШЕ не перевизначаються: розмір тексту і вертикальний
     ритим тепер самі масштабуються від vmin (базові clamp-и вище), і hero
     вміщується в 1 екран за будь-яких пропорцій (зауваження 2026-09-09). */
}

/* Content-driven mobile breakpoint: three products/four steps no longer have
   enough readable width below 700px, so only then reflow them. */
@media (max-width: 700px) {
  /* Розкладка змінюється, але page gutter — ні: картки мають ті самі лівий
     і правий відступ, що header, CTA, guides та footer. */
  .products-grid { grid-template-columns: 1fr; gap: 16px; }
  .products-grid .clay-card { padding: 24px 20px; }
  .products-grid .prod-icon { width: 48px; height: 48px; margin-bottom: 16px; }
  .product h3 { font-size: 18px; }
  .product p { font-size: 15px; line-height: 1.6; }
  .step-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .step-item { padding: 20px 12px; font-size: 14px; }
}

/* RESPONSIVE — Mobile large */
@media (max-width: 768px) {
  .page { padding: 16px 16px 40px; }
  .header { top: 8px; margin-bottom: 24px; padding: 10px 14px; }
  .logo-text { display: none; }
  .products-grid { gap: 16px; }
  .buy-card { padding: 32px 24px; }
  .pay-row { flex-direction: column; align-items: center; }
  .btn-paypal, .btn-tg { width: 100%; justify-content: center; }
}

/* RESPONSIVE — Mobile small */
@media (max-width: 480px) {
  .step-row { grid-template-columns: 1fr; }
  .guides-grid { grid-template-columns: 1fr; }
  .hero-cta-row { flex-direction: column; }
  .btn-buy, .btn-telegram { width: 100%; justify-content: center; }
  .clay-card { padding: 24px 20px; }
  .title { letter-spacing: -0.02em; }
}

/* RESPONSIVE — Very small */
@media (max-width: 360px) {
  /* Фігури НЕ перевизначаються: --figd (container query від .eight-shape) сам
     дає коректний розмір на вузьких екранах. */
}