/* =========================================================================
   JoActive — товарный лендинг (Nutrilian)
   Общий стиль для index.html (AR / RTL) и index-ru.html (RU / LTR)
   Направление обрабатывается логическими свойствами (inline-start/end).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Токены дизайна
   ------------------------------------------------------------------------- */
:root {
  /* Фирменные цвета (взяты с упаковки JoActive) */
  --blue:        #1e50c7;   /* основной кобальт */
  --blue-2:      #2f6fe0;   /* светлее */
  --navy:        #142a63;   /* тёмно-синие блоки */
  --navy-deep:   #0e1f49;   /* футер / глубина */
  --ink:         #16233f;   /* основной текст заголовков */
  --slate:       #4c5a77;   /* основной текст */
  --muted:       #7c88a3;   /* приглушённый текст */
  --red:         #e23a3a;   /* только скидка / срочность */
  --green:       #2f9a45;   /* действие + натуральность */
  --green-d:     #237a37;
  --gold:        #eaa519;   /* звёзды / премиум-акцент */

  /* Нейтральная база */
  --bg:          #f4f8fd;   /* фон страницы */
  --mist:        #e9f1fb;   /* второй фон секций */
  --card:        #ffffff;
  --line:        #e2eaf5;
  --line-soft:   #eef3fa;

  /* Радиусы */
  --r-xs: 10px;
  --r-sm: 14px;
  --r:    20px;
  --r-lg: 28px;
  --r-xl: 38px;
  --pill: 999px;

  /* Тени (мягкие, длинные) */
  --sh-sm:  0 4px 16px -8px rgba(20,42,99,.20);
  --sh:     0 20px 44px -22px rgba(20,42,99,.32);
  --sh-lg:  0 46px 90px -34px rgba(20,42,99,.40);
  --sh-grn: 0 16px 30px -12px rgba(35,120,55,.55);

  /* Типографика */
  --font-head: 'Cairo', 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body: 'Tajawal', 'Manrope', system-ui, -apple-system, sans-serif;

  /* Раскладка */
  --maxw: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
}

/* -------------------------------------------------------------------------
   2. Сброс и база
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--slate);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; }

::selection { background: rgba(30,80,199,.18); }

/* -------------------------------------------------------------------------
   3. Типографика и утилиты секций
   ------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.section { padding-block: clamp(64px, 9vw, 122px); position: relative; }

/* Смещение якорей из-под липкой шапки */
[id] { scroll-margin-top: 88px; }

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-2));
}

.section-head { max-width: 720px; margin-bottom: clamp(38px, 5vw, 64px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }

.h2 { font-size: clamp(1.85rem, 3.6vw, 3rem); }
.h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }

.lead {
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  color: var(--slate);
  line-height: 1.7;
  margin-top: 1.1rem;
  text-wrap: pretty;
}

.text-red   { color: var(--red); }
.text-blue  { color: var(--blue); }
.text-green { color: var(--green); }

/* -------------------------------------------------------------------------
   4. Кнопки
   ------------------------------------------------------------------------- */
.btn {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  white-space: nowrap;          /* кнопка формы всегда в одну строку */
  border: 0;
  cursor: pointer;
  border-radius: var(--pill);
  padding: 1.05em 2.1em;
  color: #fff;
  line-height: 1;
  background: linear-gradient(135deg, #37b055 0%, #2f9a45 52%, #23843a 100%);
  box-shadow: var(--sh-grn), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  position: relative;
  isolation: isolate;
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 22px 40px -12px rgba(35,120,55,.65), inset 0 1px 0 rgba(255,255,255,.4); filter: saturate(1.06); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid rgba(47,154,69,.4); outline-offset: 3px; }

.btn__arrow { transition: transform .22s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }
[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(4px); }

.btn--block { width: 100%; }
.btn--lg { padding: 1.2em 2.4em; }

/* Вторичная (контурная синяя) */
.btn-ghost {
  font-family: var(--font-head);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  white-space: nowrap;
  padding: .85em 1.6em;
  border-radius: var(--pill);
  color: var(--blue);
  background: #fff;
  border: 1.5px solid var(--line);
  box-shadow: var(--sh-sm);
  cursor: pointer;
  transition: border-color .2s, transform .2s, color .2s;
}
.btn-ghost:hover { border-color: var(--blue); transform: translateY(-1px); }

/* -------------------------------------------------------------------------
   5. Чипы / бейджи доверия
   ------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .86rem;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line);
  padding: .5em .9em;
  border-radius: var(--pill);
  box-shadow: var(--sh-sm);
}
.chip svg { width: 18px; height: 18px; flex: none; }
.chip--natural { color: var(--green-d); }
.chip--natural svg { color: var(--green); }

.badge-natural {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(135deg, #35a94d, #268b3c);
  padding: .5em 1em .5em .8em;
  border-radius: var(--pill);
  box-shadow: 0 10px 22px -10px rgba(35,120,55,.6);
}

/* -------------------------------------------------------------------------
   6. Верхняя полоса + шапка
   ------------------------------------------------------------------------- */
.topbar {
  background: var(--navy);
  color: #d7e2fb;
  font-size: .84rem;
  font-weight: 500;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  padding-block: .55rem;
}
.topbar span { display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; }
.topbar svg { width: 16px; height: 16px; color: #7fe0a0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s, border-color .25s, background .25s;
}
.site-header.scrolled {
  box-shadow: var(--sh-sm);
  border-color: var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .8rem;
}

.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand__mark {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(140deg, #eaf1fe, #d9e6fb);
  border: 1px solid #d3e0f6;
}
.brand__mark svg { width: 24px; height: 24px; color: var(--blue); }
.brand__name { font-family: var(--font-head); font-weight: 800; font-size: 1.18rem; color: var(--navy); letter-spacing: .01em; line-height: 1; }
.brand__name small { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .18em; color: var(--muted); margin-top: 3px; }

.header-cta { display: flex; align-items: center; gap: 1rem; }
.header-phone { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1.02rem; direction: ltr; }
.header-phone svg { width: 18px; height: 18px; color: var(--green); }
.header-cta .btn { padding: .8em 1.5em; font-size: 1rem; }

/* -------------------------------------------------------------------------
   7. Первый экран (hero)
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% 8%, #ffffff 0%, #eef4fe 42%, #e2edfc 100%);
}
.hero__deco {
  position: absolute;
  inset-block-start: -20%;
  inset-inline-end: -10%;
  width: min(52vw, 660px);
  color: var(--blue);
  opacity: .38;
  pointer-events: none;
  z-index: 0;
}
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
.hero__glow--gold { width: 300px; height: 300px; background: rgba(234,165,25,.28); inset-block-end: 6%; inset-inline-start: 40%; }
.hero__glow--blue { width: 360px; height: 360px; background: rgba(47,111,224,.20); inset-block-start: 30%; inset-inline-start: -6%; }

.hero .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding-block: clamp(40px, 6vw, 84px);
}

.hero__copy { max-width: 620px; }
.hero__rating { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; }
.stars { color: var(--gold); letter-spacing: 2px; font-size: 1.05rem; line-height: 1; }
.hero__rating small { color: var(--slate); font-weight: 600; font-size: .92rem; }

.hero h1 {
  font-size: clamp(2.15rem, 5vw, 3.85rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.hero h1 .accent {
  background: linear-gradient(120deg, var(--blue-2), var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub { margin-top: 1.15rem; font-size: clamp(1.05rem, 1.7vw, 1.24rem); color: var(--slate); text-wrap: pretty; }

.hero__points { list-style: none; margin-top: 1.5rem; display: grid; gap: .7rem; }
.hero__points li { display: flex; align-items: flex-start; gap: .7rem; font-weight: 600; color: var(--navy); }
.hero__points svg { width: 22px; height: 22px; flex: none; color: var(--green); margin-top: 2px; }

/* Медиа + карточка покупки (правая колонка) */
.hero__buy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.4vw, 30px); }
.hero__shot { position: relative; width: 100%; display: grid; place-items: center; }
.hero__product {
  position: relative;
  z-index: 2;
  width: min(86%, 340px);
  filter: drop-shadow(0 40px 55px rgba(20,42,99,.34));
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.hero__disc {
  position: absolute;
  z-index: 3;
  inset-block-start: 2%;
  inset-inline-start: 4%;
  width: 112px; height: 112px;
  display: grid; place-content: center; text-align: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #f2564f, var(--red));
  box-shadow: 0 20px 34px -12px rgba(226,58,58,.6);
  font-family: var(--font-head);
  transform: rotate(-8deg);
  border: 4px solid rgba(255,255,255,.55);
}
[dir="rtl"] .hero__disc { transform: rotate(8deg); }
.hero__disc b { font-size: 1.9rem; font-weight: 900; line-height: .9; }
.hero__disc span { font-size: .72rem; font-weight: 700; letter-spacing: .04em; }

/* -------------------------------------------------------------------------
   8. Карточка оффера + форма
   ------------------------------------------------------------------------- */
.offer-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: clamp(20px, 2.4vw, 30px);
  width: min(100%, 430px);
}
.hero__buy .offer-card { width: 100%; max-width: 430px; }

.offer-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.offer-card__title { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1.12rem; }

.price { display: flex; align-items: baseline; gap: .6rem; margin-block: .4rem 0; }
.price__new { font-family: var(--font-head); font-weight: 900; color: var(--ink); font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1; }
.price__cur { font-family: var(--font-head); font-weight: 800; color: var(--ink); font-size: 1.1rem; }
.price__old { color: var(--muted); text-decoration: line-through; font-weight: 600; font-size: 1.1rem; }
.price__save { margin-inline-start: auto; align-self: center; font-size: .8rem; font-weight: 800; color: var(--red); background: #fdeaea; padding: .35em .7em; border-radius: var(--pill); white-space: nowrap; }
.price-note { font-size: .86rem; color: var(--muted); margin-top: .3rem; }

.divider-soft { height: 1px; background: var(--line-soft); margin-block: 1.1rem; }

/* Форма */
.lead-form { display: grid; gap: .7rem; }
.lead-form .field { position: relative; }
.lead-form input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: var(--ink);
  background: #f7f9fd;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding-block: 1em;
  padding-inline-start: 3em;
  padding-inline-end: 3em;
  transition: border-color .18s, background .18s, box-shadow .18s;
  text-align: right;
}
.lead-form input::placeholder { color: #9aa5bd; }
.lead-form input:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(30,80,199,.12); }
.lead-form .field svg {
  position: absolute;
  inset-inline-start: .95em;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  color: var(--muted);
  pointer-events: none;
}
.lead-form input[type="tel"] { unicode-bidi: plaintext; }

.lead-form input.invalid { border-color: var(--red); background: #fef6f6; }
.field-error { display: none; color: var(--red); font-size: .8rem; font-weight: 600; margin-top: .3rem; padding-inline-start: .2em; }
.field.has-error .field-error { display: block; }

.form-note { font-size: 1rem; color: var(--muted); text-align: center; margin-top: .2rem; line-height: 1.5; }
.form-note a { color: var(--blue); text-decoration: underline; }

.form-trust { display: flex; align-items: center; justify-content: center; gap: 1.1rem; flex-wrap: wrap; margin-top: .9rem; }
.form-trust span { display: inline-flex; align-items: center; gap: .4em; font-size: 1rem; font-weight: 600; color: var(--slate); }
.form-trust svg { width: 16px; height: 16px; color: var(--green); }

/* Экран благодарности */
.form-success {
  display: none;
  text-align: center;
  padding: .6rem 0;
}
.form-success.show { display: block; animation: pop .35s ease; }
@keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
.form-success__ic { width: 62px; height: 62px; margin: 0 auto .8rem; display: grid; place-items: center; border-radius: 50%; background: #e7f6ec; color: var(--green); }
.form-success__ic svg { width: 34px; height: 34px; }
.form-success h4 { font-size: 1.3rem; color: var(--ink); margin-bottom: .4rem; }
.form-success p { color: var(--slate); font-size: .96rem; }

/* -------------------------------------------------------------------------
   9. Таймер обратного отсчёта
   ------------------------------------------------------------------------- */
.countdown {
  background: linear-gradient(135deg, #fff5f5, #fdeaea);
  border: 1px solid #f6d2d2;
  border-radius: var(--r);
  padding: .85rem 1rem;
  text-align: center;
}
.countdown__label { font-size: 1rem; font-weight: 700; color: var(--red); letter-spacing: .02em; display: flex; align-items: center; justify-content: center; gap: .45em; margin-bottom: .5rem; }
.countdown__label svg { width: 16px; height: 16px; }
.cd-grid { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.cd-box { min-width: 56px; background: #fff; border-radius: var(--r-xs); padding: .5rem .3rem; box-shadow: var(--sh-sm); }
.cd-num { font-family: var(--font-head); font-weight: 900; font-size: 1.55rem; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.cd-unit { font-size: .86rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
.cd-sep { font-family: var(--font-head); font-weight: 900; font-size: 1.3rem; color: #e39; color: var(--red); opacity: .5; }

/* -------------------------------------------------------------------------
   10. Полоса статистики (тёмная)
   ------------------------------------------------------------------------- */
.stats {
  background: linear-gradient(120deg, var(--navy), #1c3f8f 60%, var(--blue));
  color: #fff;
  position: relative;
  overflow: hidden;
}
.stats::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 85% -10%, rgba(234,165,25,.22), transparent 60%);
  pointer-events: none;
}
.stats .container {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 3vw, 40px);
  padding-block: clamp(40px, 5vw, 62px);
  text-align: center;
}
.stat b { font-family: var(--font-head); font-weight: 900; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; display: block; background: linear-gradient(120deg, #fff, #cfe0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { display: block; margin-top: .55rem; color: #bcccf0; font-weight: 500; font-size: .95rem; }
.stat + .stat { position: relative; }
.stat + .stat::before { content: ""; position: absolute; inset-inline-start: calc(var(--gutter) * -0.5 - 4px); inset-block: 12% ; width: 1px; background: rgba(255,255,255,.14); }

/* -------------------------------------------------------------------------
   11. Проблема / боль
   ------------------------------------------------------------------------- */
.problem { background: var(--bg); }
.problem .container { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.problem__media { position: relative; }
.problem__media img { border-radius: var(--r-lg); box-shadow: var(--sh); width: 100%; }
.problem__media .float-note {
  position: absolute;
  inset-block-end: -22px;
  inset-inline-start: -18px;
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: .9rem 1.1rem;
  display: flex; align-items: center; gap: .7rem;
  max-width: 260px;
}
.float-note__ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #fdeaea; color: var(--red); }
.float-note__ic svg { width: 22px; height: 22px; }
.float-note b { display: block; color: var(--ink); font-family: var(--font-head); font-size: 1.35rem; line-height: 1; }
.float-note span { font-size: .8rem; color: var(--muted); }

.pain-list { list-style: none; display: grid; gap: 1rem; margin-top: 1.6rem; }
.pain-list li { display: flex; gap: .9rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.15rem; box-shadow: var(--sh-sm); }
.pain-list .ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; background: #eef3fe; color: var(--blue); }
.pain-list .ic svg { width: 22px; height: 22px; }
.pain-list b { color: var(--ink); font-family: var(--font-head); font-size: 1.04rem; display: block; margin-bottom: .1rem; }
.pain-list p { font-size: .92rem; color: var(--slate); }

/* -------------------------------------------------------------------------
   12. Как работает
   ------------------------------------------------------------------------- */
.how { background: var(--mist); }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 32px); counter-reset: step; }
.how-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2.4rem 1.6rem 1.7rem;
  box-shadow: var(--sh-sm);
  transition: transform .25s, box-shadow .25s;
}
.how-card:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.how-card__num {
  position: absolute;
  inset-block-start: -22px; inset-inline-start: 1.6rem;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 14px;
  font-family: var(--font-head); font-weight: 900; font-size: 1.25rem; color: #fff;
  background: linear-gradient(135deg, var(--blue-2), var(--blue));
  box-shadow: 0 14px 26px -10px rgba(30,80,199,.6);
}
.how-card__ic { width: 54px; height: 54px; color: var(--blue); margin-bottom: 1rem; }
.how-card h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.how-card p { font-size: .95rem; }
.how-connect { display: none; }

/* -------------------------------------------------------------------------
   13. Состав / ингредиенты
   ------------------------------------------------------------------------- */
.ingredients { background: var(--bg); }
.ing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.5vw, 28px); }
.ing-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.3rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.4rem;
  box-shadow: var(--sh-sm);
  transition: transform .25s, box-shadow .25s;
}
.ing-card:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.ing-card__media { position: relative; width: clamp(96px, 12vw, 130px); flex: none; }
.ing-card__media img { border-radius: var(--r); aspect-ratio: 1; object-fit: cover; }
.ing-card__dose {
  position: absolute;
  inset-block-end: -10px; inset-inline-end: -10px;
  background: linear-gradient(135deg, var(--blue-2), var(--blue));
  color: #fff; font-family: var(--font-head); font-weight: 800; font-size: .82rem;
  padding: .4em .7em; border-radius: var(--pill);
  box-shadow: 0 10px 20px -8px rgba(30,80,199,.6);
  white-space: nowrap;
}
.ing-card h3 { font-size: 1.18rem; margin-bottom: .3rem; }
.ing-card p { font-size: .92rem; color: var(--slate); }

.ing-foot {
  margin-top: 1.6rem;
  display: flex; align-items: center; gap: .7rem; justify-content: center;
  flex-wrap: wrap;
  color: var(--muted); font-size: 1rem; text-align: center;
}
.ing-foot svg { width: 18px; height: 18px; color: var(--green); }

/* -------------------------------------------------------------------------
   14. Преимущества / результаты
   ------------------------------------------------------------------------- */
.benefits { background: var(--mist); position: relative; overflow: hidden; }
.ben-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 26px); }
.ben-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.7rem 1.5rem;
  box-shadow: var(--sh-sm);
  border-top: 3px solid var(--blue);
  transition: transform .25s, box-shadow .25s;
}
.ben-card:nth-child(3n+2) { border-top-color: var(--green); }
.ben-card:nth-child(3n+3) { border-top-color: var(--gold); }
.ben-card:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.ben-card__ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #eef3fe; color: var(--blue); margin-bottom: 1rem; }
.ben-card:nth-child(3n+2) .ben-card__ic { background: #e8f6ec; color: var(--green); }
.ben-card:nth-child(3n+3) .ben-card__ic { background: #fdf2dd; color: #c98a10; }
.ben-card__ic svg { width: 27px; height: 27px; }
.ben-card h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.ben-card p { font-size: .93rem; }

/* -------------------------------------------------------------------------
   15. Мнение врача
   ------------------------------------------------------------------------- */
.expert { background: var(--bg); }
.expert__box {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background: linear-gradient(120deg, var(--navy), #1d3f8c);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  position: relative;
}
.expert__box::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 100% at 90% 0%, rgba(234,165,25,.2), transparent 55%);
}
.expert__photo { position: relative; align-self: stretch; min-height: 100%; }
.expert__photo img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }
.expert__body { position: relative; z-index: 1; padding: clamp(28px, 4vw, 52px); padding-inline-start: 0; color: #fff; }
.expert__quote-ic { color: rgba(255,255,255,.25); width: 54px; height: 54px; margin-bottom: .6rem; }
.expert blockquote { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.25rem, 2.3vw, 1.72rem); line-height: 1.4; color: #fff; letter-spacing: -0.01em; }
.expert__name { margin-top: 1.5rem; display: flex; align-items: center; gap: .8rem; }
.expert__name b { font-family: var(--font-head); font-size: 1.05rem; color: #fff; display: block; }
.expert__name span { color: #b9cbf0; font-size: .9rem; }
.expert__name .line { width: 34px; height: 2px; background: var(--gold); flex: none; }

/* -------------------------------------------------------------------------
   16. Как принимать (инструкция)
   ------------------------------------------------------------------------- */
.usage { background: var(--mist); }
.usage h2 { margin-bottom: 1.7rem; }
.usage .container { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 66px); align-items: center; }
.usage__media { position: relative; display: grid; place-items: center; }
.usage__media img { width: min(78%, 340px); filter: drop-shadow(0 34px 46px rgba(20,42,99,.3)); }
.usage__media .ring { position: absolute; width: min(80%, 400px); aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(30,80,199,.25); }

.steps { list-style: none; display: grid; gap: 1.1rem; }
.step { display: flex; gap: 1.1rem; align-items: flex-start; }
.step__n { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 900; color: #fff; background: linear-gradient(135deg, #37b055, var(--green)); box-shadow: var(--sh-sm); }
.step__n--blue { background: linear-gradient(135deg, var(--blue-2), var(--blue)); }
.step__n--gold { background: linear-gradient(135deg, #f2bd3f, var(--gold)); }
.step b { font-family: var(--font-head); color: var(--ink); font-size: 1.1rem; display: block; margin-bottom: .15rem; }
.step p { font-size: .95rem; color: var(--slate); }

.usage-warn {
  margin-top: 1.6rem;
  display: flex; gap: .8rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-inline-start: 4px solid var(--gold);
  border-radius: var(--r-sm); padding: 1rem 1.2rem;
  font-size: .9rem; color: var(--slate);
}
.usage-warn svg { width: 22px; height: 22px; color: var(--gold); flex: none; margin-top: 1px; }

/* -------------------------------------------------------------------------
   17. Отзывы
   ------------------------------------------------------------------------- */
.reviews { background: var(--bg); overflow: hidden; }
.reviews__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 46px); }
.reviews__nav { display: flex; gap: .6rem; }
.rv-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--navy); display: grid; place-items: center; cursor: pointer; box-shadow: var(--sh-sm); transition: border-color .2s, transform .2s, color .2s, opacity .2s; }
.rv-arrow:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }
.rv-arrow svg { width: 22px; height: 22px; }
[dir="rtl"] .rv-arrow svg { transform: scaleX(-1); }

.rv-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 1fr);
  gap: clamp(16px, 2vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: none;
}
.rv-track::-webkit-scrollbar { display: none; }
.review-card {
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  box-shadow: var(--sh-sm);
  display: flex; flex-direction: column;
}
.review-card .stars { margin-bottom: .8rem; }
.review-card p { color: var(--slate); font-size: .98rem; line-height: 1.65; margin-bottom: 1.3rem; }
.review-card__person { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.review-card__person img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.review-card__person b { font-family: var(--font-head); color: var(--ink); font-size: 1rem; display: block; line-height: 1.2; }
.review-card__person span { font-size: .84rem; color: var(--muted); display: inline-flex; align-items: center; gap: .3em; }
.review-card__person span svg { width: 14px; height: 14px; color: var(--green); }

/* -------------------------------------------------------------------------
   18. Финальный блок заказа
   ------------------------------------------------------------------------- */
.order { position: relative; color: #fff; overflow: hidden; background: var(--navy-deep); }
.order__bg { position: absolute; inset: 0; z-index: 0; }
.order__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.order::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(120deg, rgba(14,31,73,.95), rgba(20,42,99,.82) 55%, rgba(30,80,199,.72));
}
.order .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.order__copy .eyebrow { color: #8fe0a6; }
.order__copy .eyebrow::before { background: #8fe0a6; }
.order h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.order__copy p { color: #cdd9f2; margin-top: 1rem; font-size: 1.1rem; }
.order__list { list-style: none; margin-top: 1.5rem; display: grid; gap: .7rem; }
.order__list li { display: flex; align-items: center; gap: .7rem; font-weight: 600; color: #eaf1ff; }
.order__list svg { width: 22px; height: 22px; color: #8fe0a6; flex: none; }

.order .offer-card { margin-inline: auto; }

/* -------------------------------------------------------------------------
   19. Гарантия / безопасность
   ------------------------------------------------------------------------- */
.guarantee { background: var(--bg); }
.guar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.2vw, 26px); }
.guar-card { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.8rem 1.3rem; box-shadow: var(--sh-sm); }
.guar-card__ic { width: 62px; height: 62px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, #eef4fe, #dae7fb); color: var(--blue); }
.guar-card:nth-child(2) .guar-card__ic { background: linear-gradient(140deg, #e9f7ee, #d3edda); color: var(--green); }
.guar-card:nth-child(3) .guar-card__ic { background: linear-gradient(140deg, #fdf3dd, #f7e4b8); color: #c98a10; }
.guar-card__ic svg { width: 32px; height: 32px; }
.guar-card h3 { font-size: 1.06rem; margin-bottom: .35rem; }
.guar-card p { font-size: 1rem; color: var(--slate); }

.disclaimer {
  margin-top: clamp(28px, 4vw, 44px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.4rem 1.5rem;
  display: flex; gap: 1rem; align-items: flex-start;
}
.disclaimer svg { width: 26px; height: 26px; color: var(--gold); flex: none; margin-top: 2px; }
.disclaimer p { font-size: 1.1rem; color: var(--slate); line-height: 1.65; }
.disclaimer b { color: var(--ink); }

/* -------------------------------------------------------------------------
   20. FAQ
   ------------------------------------------------------------------------- */
.faq { background: var(--mist); }
.faq__wrap { max-width: 820px; margin-inline: auto; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: .8rem; box-shadow: var(--sh-sm); overflow: hidden; }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  text-align: start;
  background: none; border: 0; cursor: pointer;
  padding: 1.25rem 1.4rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1.06rem; color: var(--ink);
}
.faq-q__ic { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #eef3fe; color: var(--blue); display: grid; place-items: center; transition: transform .28s, background .2s, color .2s; }
.faq-q__ic svg { width: 18px; height: 18px; }
.faq-item.open .faq-q__ic { transform: rotate(45deg); background: var(--blue); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.faq-a p { padding: 0 1.4rem 1.35rem; color: var(--slate); font-size: 1rem; line-height: 1.7; }

/* -------------------------------------------------------------------------
   21. Футер
   ------------------------------------------------------------------------- */
.footer { background: var(--navy-deep); color: #aab8d8; padding-block: clamp(40px, 5vw, 62px) 2rem; }
.footer .brand__name { color: #fff; }
.footer .brand__name small { color: #8698c4; }
.footer .brand__mark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.footer .brand__mark svg { color: #9fc0ff; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 60px); padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer__intro { max-width: 420px; margin-top: 1.1rem; font-size: .92rem; line-height: 1.7; }
.footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer h4 { color: #fff; font-size: .92rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.footer ul { list-style: none; display: grid; gap: .6rem; }
.footer a { font-size: .92rem; transition: color .2s; }
.footer a:hover { color: #fff; }
.footer__disc { margin-top: 1.8rem; font-size: 1rem; line-height: 1.7; color: #7d8db5; }
.footer__disc b { color: #c3d0ec; }
.footer__copy { margin-top: 1.4rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; font-size: .82rem; color: #6f80a8; }

/* -------------------------------------------------------------------------
   22. Плавающая мобильная CTA-панель
   ------------------------------------------------------------------------- */
.mobile-cta {
  position: fixed;
  inset-inline: 0; inset-block-end: 0;
  z-index: 70;
  display: none;
  align-items: center;
  gap: .8rem;
  padding: .7rem var(--gutter);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -14px rgba(20,42,99,.35);
}
.mobile-cta .mc-price { line-height: 1.1; }
.mobile-cta .mc-price b { font-family: var(--font-head); font-weight: 900; color: var(--ink); font-size: 1.25rem; }
.mobile-cta .mc-price s { color: var(--muted); font-size: .82rem; margin-inline-start: .3em; }
.mobile-cta .btn { flex: 1; padding: .95em 1.2em; }

/* -------------------------------------------------------------------------
   23. Анимация появления
   ------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }

/* -------------------------------------------------------------------------
   24. Адаптив
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero__copy { max-width: none; text-align: center; margin-inline: auto; }
  .hero__copy .hero__rating, .hero__copy .eyebrow, .hero__copy .chips { justify-content: center; }
  .hero__points { max-width: 460px; margin-inline: auto; }
  .offer-card { margin-inline: auto; }
  .expert__box { grid-template-columns: 1fr; }
  .expert__photo img { min-height: 260px; }
  .expert__body { padding-inline: clamp(24px, 5vw, 44px); }
  .order .container { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .stats .container { grid-template-columns: repeat(2, 1fr); gap: 32px 18px; }
  .stat + .stat::before { display: none; }
  .problem .container { grid-template-columns: 1fr; }
  .problem__media { max-width: 520px; margin-inline: auto; }
  .how-grid { grid-template-columns: 1fr; gap: 34px; }
  .how-card__num { inset-inline-start: 1.6rem; }
  .ing-grid { grid-template-columns: 1fr; }
  .ben-grid { grid-template-columns: 1fr 1fr; }
  .usage .container { grid-template-columns: 1fr; }
  .usage__media { order: -1; }
  .guar-grid { grid-template-columns: 1fr 1fr; }
  .header-phone { display: none; }
  .topbar { display: none; }
}

@media (max-width: 600px) {
  .mobile-cta { display: flex; }
  body.has-mobile-cta { padding-bottom: 78px; }
  .header-cta .btn { display: none; }
}

/* Экраны меньше 470px */
@media (max-width: 470px) {
  body { font-size: 16px; }
  .section { padding-block: 54px; }
  .hero .container { padding-block: 26px; }
  .hero h1 { font-size: 1.92rem; }
  .offer-card { padding: 18px; border-radius: 22px; }
  .price__new { font-size: 1.8rem; }
  .cd-box { min-width: 48px; }
  .cd-num { font-size: 1.3rem; }
  .ben-grid { grid-template-columns: 1fr; }
  .guar-grid { grid-template-columns: 1fr; }
  .ing-card { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; }
  .ing-card__media { margin-inline: auto; }
  .ing-card__dose { inset-inline-end: 50%; transform: translateX(50%); }
  [dir="rtl"] .ing-card__dose { transform: translateX(-50%); }
  .float-note { position: static; margin-top: 14px; max-width: none; }
  .review-card { padding: 1.3rem; }
  .rv-track { grid-auto-columns: 86%; }
  .expert blockquote { font-size: 1.2rem; }
  .stats .container { gap: 26px 14px; }
  .footer__cols { grid-template-columns: 1fr; }
  .footer__copy { flex-direction: column; }
  .brand__name { font-size: 1.05rem; }
}

/* Уважение к настройкам движения */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   HERO REVISION — текст и упаковка на одном уровне + компактная форма
   ========================================================================= */
@media (min-width: 721px) {
  .hero .container {
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, .72fr);
    grid-template-areas:
      "copy shot"
      "offer offer";
    align-items: center;
    gap: clamp(18px, 3.2vw, 46px) clamp(24px, 4vw, 58px);
    padding-block: clamp(30px, 4.8vw, 66px);
  }

  .hero__copy {
    grid-area: copy;
    max-width: 760px;
    align-self: center;
  }

  .hero__buy {
    display: contents;
  }

  .hero__shot {
    grid-area: shot;
    align-self: center;
    min-height: 340px;
  }

  .hero__product {
    width: min(94%, 350px);
  }

  .hero__disc {
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  .hero__buy .offer-card {
    grid-area: offer;
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .hero .offer-card {
    display: grid;
    grid-template-columns: minmax(260px, .76fr) minmax(0, 1.55fr);
    align-items: center;
    gap: .85rem 1.15rem;
    padding: clamp(15px, 1.7vw, 20px);
    border-radius: 24px;
  }

  .hero .offer-card [data-hide-on-success] {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr);
    align-items: center;
    gap: .3rem .9rem;
  }

  .hero .offer-card__title {
    grid-column: 1 / -1;
    font-size: .98rem;
    line-height: 1.25;
  }

  .hero .price {
    margin: 0;
    gap: .45rem;
  }

  .hero .price__new {
    font-size: clamp(1.85rem, 2.8vw, 2.2rem);
  }

  .hero .price__old {
    font-size: .98rem;
  }

  .hero .price-note {
    margin: 0;
    font-size: .8rem;
    line-height: 1.35;
  }

  .hero .countdown {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .58rem .72rem;
    border-radius: 16px;
    text-align: start;
  }

  .hero .countdown__label {
    margin: 0;
    justify-content: flex-start;
    font-size: .78rem;
    white-space: nowrap;
  }

  [dir="rtl"] .hero .countdown__label {
    justify-content: flex-end;
  }

  .hero .cd-grid {
    gap: .34rem;
  }

  .hero .cd-box {
    min-width: 46px;
    padding: .38rem .25rem;
  }

  .hero .cd-num {
    font-size: 1.18rem;
  }

  .hero .cd-unit {
    font-size: .56rem;
  }

  .hero .divider-soft {
    display: none;
  }

  .hero .lead-form {
    grid-template-columns: minmax(150px, 1fr) minmax(170px, 1fr) auto;
    align-items: start;
    gap: .55rem;
  }

  .hero .lead-form input {
    min-height: 50px;
    padding-block: .76em;
    border-radius: 14px;
    font-size: .98rem;
  }

  .hero .lead-form .field svg {
    width: 18px;
    height: 18px;
  }

  .hero .lead-form .btn {
    width: auto;
    min-width: 188px;
    min-height: 50px;
    align-self: stretch;
    padding: .8em 1.25em;
    font-size: 1rem;
  }

  .hero .form-trust {
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: .85rem;
    margin-top: .05rem;
  }

  [dir="rtl"] .hero .form-trust {
    justify-content: flex-end;
  }

  .hero .form-note {
    grid-column: 1 / -1;
    margin-top: -.15rem;
    text-align: start;
    font-size: .73rem;
    line-height: 1.35;
  }

  [dir="rtl"] .hero .form-note {
    text-align: end;
  }
}

@media (min-width: 721px) and (max-width: 1024px) {
  .hero__copy {
    text-align: start;
    margin-inline: 0;
  }

  [dir="rtl"] .hero__copy {
    text-align: right;
  }

  .hero__copy .hero__rating,
  .hero__copy .chips {
    justify-content: flex-start;
  }

  [dir="rtl"] .hero__copy .hero__rating,
  [dir="rtl"] .hero__copy .chips {
    justify-content: flex-end;
  }

  .hero__points {
    max-width: none;
    margin-inline: 0;
  }

  .hero h1 {
    font-size: clamp(2.05rem, 4.8vw, 3.1rem);
  }

  .hero__sub {
    font-size: clamp(1rem, 1.8vw, 1.14rem);
  }

  .hero__shot {
    min-height: 300px;
  }

  .hero__product {
    width: min(96%, 300px);
  }

  .hero__disc {
    width: 94px;
    height: 94px;
  }

  .hero__disc b {
    font-size: 1.55rem;
  }

  .hero__disc span {
    font-size: .65rem;
  }

  .hero .offer-card {
    grid-template-columns: 1fr;
  }

  .hero .lead-form {
    grid-template-columns: minmax(150px, 1fr) minmax(170px, 1fr) auto;
  }
}

@media (max-width: 720px) {
  .hero__buy {
    gap: 16px;
  }

  .hero__shot {
    max-width: 380px;
    margin-inline: auto;
  }

  .hero__product {
    width: min(84%, 300px);
  }

  .hero__disc {
    width: 94px;
    height: 94px;
    inset-block-start: 0;
    inset-inline-start: 4%;
  }

  .hero .offer-card {
    padding: 16px;
    border-radius: 22px;
  }

  .hero .offer-card__title,
  .hero .price-note,
  .hero .countdown {
    display: none;
  }

  .hero .price {
    justify-content: center;
    margin-bottom: .65rem;
  }

  .hero .lead-form {
    gap: .55rem;
  }

  .hero .lead-form input {
    padding-block: .8em;
  }

  .hero .lead-form .btn {
    padding-block: 1em;
  }

  .hero .form-trust {
    margin-top: .35rem;
  }
}


/* =========================================================================
   PATCH — placeholders, denser note, extra CTAs, hero timer stability
   ========================================================================= */
.float-note div { display: grid; gap: 2px; }
.float-note span { line-height: 1.15; }

.how-card__media,
.ben-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 18px;
  margin-bottom: 1rem;
  box-shadow: var(--sh-sm);
}

.ben-card__media {
  border-radius: 16px;
}

.section-cta {
  margin-top: 1.6rem;
  text-align: center;
}

.section-cta .btn {
  min-width: min(100%, 320px);
  justify-content: center;
}

.footer__cols--single {
  grid-template-columns: 1fr;
  max-width: 240px;
}

@media (min-width: 721px) {
  .hero .countdown {
    flex-wrap: wrap;
  }

  .hero .countdown__label {
    line-height: 1.2;
    white-space: normal;
  }

  .hero .cd-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(46px, auto));
    justify-content: end;
  }

  .hero .cd-sep {
    display: none;
  }
}

@media (max-width: 860px) {
  .footer__cols--single {
    max-width: none;
  }
}

.cpu{
padding: 10px 0;
text-align: center;
}
.cpu img{
display:block;
margin: 0 auto;
width: auto;
}
.cpu a{
display: inline-block;
margin: 5px;
color: #b1afaf;
font-size: 14px;
}