/* Один шрифт для всей страницы: локальный variable Unbounded с кириллицей
   и латиницей. */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/unbounded-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/unbounded-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/wix-madefor-display-600-1.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/wix-madefor-display-600-2.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/wix-madefor-display-700-1.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/wix-madefor-display-700-2.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/wix-madefor-display-800-1.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/wix-madefor-display-800-2.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/wix-madefor-text-400-1.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/wix-madefor-text-400-2.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/wix-madefor-text-500-1.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/wix-madefor-text-500-2.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/wix-madefor-text-600-1.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/wix-madefor-text-600-2.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plex-mono-500-cy.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plex-mono-500-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plex-mono-600-cy.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plex-mono-600-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/plex-mono-700-cy.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/plex-mono-700-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ═══════════ TOKENS ═══════════ */
/*
   Четвёртый заход: заказчик прислал точный референс (Catalis, шаблон
   Webflow) — светлое небо градиентом, плавающие карточки-интерфейсы над
   ним, крупный заголовок с одним курсивным словом, пилюли вместо прямых
   кнопок и навигации. Дальше — не абстрактное «сделай интереснее», а
   прямое повторение этих конкретных приёмов, адаптированное под бота
   с курсами дыхания вместо B2B-сервиса.
*/
:root{
  --bg:#F3F7FC;
  --surface:#FFFFFF;
  --surface-2:#EDF3FA;
  --ink:#10151F;
  --ink-2:#57616F;
  --ink-3:#5B6576;
  --border:#E3E9F1;
  --border-strong:#CDD7E4;

  --sky-1:#EAF3FC;
  --sky-2:#CFE4F8;
  --sky-3:#9CC5EE;

  --accent:#2F72CC;
  --accent-dark:#245BA6;
  --accent-soft:#DCEAFA;

  /* Тёплый акцент — единственный не-синий цвет в палитре. Весь интерфейс
     держится на чёрном (--ink) и голубом (--accent), и это читалось
     ровно, но холодно для темы про дыхание и энергию. Используем этот
     цвет точечно — в смысловом слове заголовка и мелких живых деталях,
     не заменяя основную систему. */
  --accent-warm:#DD7A3C;
  --accent-warm-soft:#FBE9DA;

  --success:#0B7A51;  --success-soft:#E3F2E6;
  --warning:#A66A00;  --warning-soft:#FBF1DF;
  --error:#C7362F;    --error-soft:#FBEAE8;

  --f-body:'Unbounded',sans-serif;
  --f-display:'Unbounded',sans-serif;
  --f-mono:'Unbounded',sans-serif;

  /* Типографическая шкала. Размеры — фиксированные ступени, а не vw:
     плавные clamp-значения давали 22.4px, 15.2px и прочий разнобой, из-за
     которого страница выглядела собранной из разных макетов. Ступени
     переключаются дискретно по ширине экрана (см. @media ниже).
     Правило простое: у заголовков одного уровня всегда один размер. */
  --fs-label:.75rem;    /* 12 — метки, оверлайны, подписи таймера */
  --fs-small:.875rem;   /* 14 — сноски, мелкие подписи */
  --fs-sec:.9375rem;    /* 15 — вторичный текст в блоках */
  --fs-body:1rem;       /* 16 — основной текст */
  --fs-lead:1.125rem;   /* 18 — лид-абзац, название карточки */
  --fs-h4:1.125rem;     /* 18 — подзаголовок четвёртого уровня */
  --fs-h3:1.25rem;      /* 20 — подзаголовок внутри блока */
  --fs-h2:1.5rem;       /* 24 — заголовок раздела */
  --fs-h1:1.75rem;      /* 28 — заголовок страницы */
  --fs-display:2.25rem; /* 36 — первый экран */
  --fs-price:2.25rem;   /* 36 — цена в тарифах */

  /* Шкала отступов. Один и тот же шаг используется во всех блоках, поэтому
     вертикальный ритм страницы ровный: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 /
     48 / 56. Ступени тоже переключаются дискретно по ширине экрана. */
  --sp-xs:4px; --sp-sm:8px; --sp-md:12px; --sp-lg:16px;
  --sp-xl:16px; --sp-2xl:20px; --sp-3xl:24px; --sp-4xl:32px;
  --sp-5xl:40px; --sp-6xl:48px;
  /* отдельные роли: поля страницы и вертикаль секции */
  --sp-edge:20px; --sp-section:32px;


  --sh-1:0 1px 2px rgba(16,21,31,.05);
  --sh-2:0 10px 28px -12px rgba(16,21,31,.18);
  --sh-3:0 24px 56px -20px rgba(16,21,31,.30);

  --r-sm:9px; --r-md:13px; --r-lg:20px; --r-xl:26px; --r-pill:999px;
  --ring:0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent);
  /* Единый цветовой грейд на все фото сайта: небо, гора и закат — из
     разных источников и разной цветовой температуры, эта поправка чуть
     приглушает и подсвечивает их к одному тёплому оттенку, чтобы
     читались как одна съёмка, а не набор случайных стоковых фото. */
  --photo-grade:saturate(.86) sepia(.1) hue-rotate(-8deg) contrast(1.02);
  color-scheme:light;
}
/* Ступени шкалы включаются по ширине экрана дискретно: на телефоне, планшете
   и десктопе — свой фиксированный набор, без промежуточных «полутонов». */
@media (min-width:640px){
  :root{
    --fs-h2:1.75rem;    /* 28 */
    --fs-h1:2rem;       /* 32 */
    --fs-display:2.75rem; /* 44 */
    --fs-price:2.75rem; /* 44 */
    --sp-xl:18px; --sp-2xl:26px; --sp-3xl:34px; --sp-4xl:44px;
    --sp-5xl:52px; --sp-6xl:64px;
    --sp-edge:32px; --sp-section:48px;
  }
}
@media (min-width:1024px){
  :root{
    --fs-h4:1.25rem;    /* 20 */
    --fs-h3:1.375rem;   /* 22 */
    --fs-h2:2rem;       /* 32 */
    --fs-h1:2.5rem;     /* 40 */
    --fs-display:3.5rem; /* 56 */
    --fs-price:3.5rem;  /* 56 */
    --sp-xl:24px; --sp-2xl:32px; --sp-3xl:44px; --sp-4xl:56px;
    --sp-5xl:64px; --sp-6xl:80px;
    --sp-edge:56px; --sp-section:64px;
  }
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0D1017; --surface:#161B24; --surface-2:#1C222D;
    --ink:#EEF1F6; --ink-2:#AEB7C4; --ink-3:#818A97;
    --border:#262D39; --border-strong:#333B49;
    --sky-1:#131A24; --sky-2:#182234; --sky-3:#1F3554;
    --accent:#5A9BEA; --accent-dark:#7BB0F0; --accent-soft:#16283F;
    --accent-warm:#E68E52; --accent-warm-soft:#3A2717;
    --success:#3FCE93; --success-soft:#0F2A20;
    --warning:#E3A93F; --warning-soft:#2C2210;
    --error:#F0736A;   --error-soft:#2E1613;
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 10px 28px -12px rgba(0,0,0,.55);
    --sh-3:0 24px 56px -20px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1017; --surface:#161B24; --surface-2:#1C222D;
  --ink:#EEF1F6; --ink-2:#AEB7C4; --ink-3:#818A97;
  --border:#262D39; --border-strong:#333B49;
  --sky-1:#131A24; --sky-2:#182234; --sky-3:#1F3554;
  --accent:#5A9BEA; --accent-dark:#7BB0F0; --accent-soft:#16283F;
  --accent-warm:#E68E52; --accent-warm-soft:#3A2717;
  --success:#3FCE93; --success-soft:#0F2A20;
  --warning:#E3A93F; --warning-soft:#2C2210;
  --error:#F0736A;   --error-soft:#2E1613;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 10px 28px -12px rgba(0,0,0,.55);
  --sh-3:0 24px 56px -20px rgba(0,0,0,.6);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F3F7FC; --surface:#FFFFFF; --surface-2:#EDF3FA;
  --ink:#10151F; --ink-2:#57616F; --ink-3:#5B6576;
  --border:#E3E9F1; --border-strong:#CDD7E4;
  --sky-1:#EAF3FC; --sky-2:#CFE4F8; --sky-3:#9CC5EE;
  --accent:#2F72CC; --accent-dark:#245BA6; --accent-soft:#DCEAFA;
  --accent-warm:#DD7A3C; --accent-warm-soft:#FBE9DA;
  --success:#0B7A51; --success-soft:#E3F2E6;
  --warning:#A66A00; --warning-soft:#FBF1DF;
  --error:#C7362F;   --error-soft:#FBEAE8;
  --sh-1:0 1px 2px rgba(16,21,31,.05);
  --sh-2:0 10px 28px -12px rgba(16,21,31,.18);
  --sh-3:0 24px 56px -20px rgba(16,21,31,.30);
  color-scheme:light;
}

/* ═══════════ BASE ═══════════ */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--f-display);
  margin:0; font-weight:700; line-height:1.14;
  letter-spacing:-.02em; text-wrap:balance;
}
em{font-style:italic; font-family:inherit; font-weight:600;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer;}
svg{display:block; flex:none;}
img{max-width:100%; display:block;}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--r-sm);}

/* Выделение текста и скроллбар — в цвет сайта, а не системные умолчания. */
::selection{background:var(--sky-3); color:var(--ink);}
html{scrollbar-color:var(--sky-3) var(--bg); scrollbar-width:thin;}
::-webkit-scrollbar{width:11px; height:11px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--sky-3); border-radius:999px; border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:var(--accent);}

.container{width:100%; max-width:1200px; margin:0 auto; padding-inline:var(--sp-edge);}
.section{padding-block:var(--sp-section);}
.section--tint{background:var(--surface-2);}

/* Мягкое свечение в углах секции — глубина без фотографии.
   Пятна намеренно очень слабые: фон должен «дышать», а не спорить
   с карточками поверх него. */
.section--aura{position:relative; isolation:isolate;}
.section--aura::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(42% 55% at 8% 10%, color-mix(in srgb, var(--sky-3) 26%, transparent), transparent 70%),
    radial-gradient(38% 50% at 94% 88%, color-mix(in srgb, var(--accent-soft) 70%, transparent), transparent 72%);
}

/* Концентрические круги — тот же мотив, что в breath.svg, только фоном.
   repeating-radial-gradient рисует кольца без единой картинки. */
.section--rings{position:relative; isolation:isolate;}
.section--rings::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0 38px,
    color-mix(in srgb, var(--sky-3) 30%, transparent) 38px 39px
  );
  -webkit-mask-image:radial-gradient(58% 58% at 50% 50%, #000, transparent 75%);
  mask-image:radial-gradient(58% 58% at 50% 50%, #000, transparent 75%);
  opacity:.5;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--sp-sm);
  font-size:var(--fs-label); font-weight:700;
  letter-spacing:.06em; color:var(--accent-dark);
  background:var(--accent-soft);
  padding:var(--sp-xs) var(--sp-md); border-radius:var(--r-pill);
}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent);}
.lede{color:var(--ink-2); font-size:var(--fs-body);}
.sec-head{max-width:640px; margin-bottom:var(--sp-4xl);}
.sec-head h1{font-size:var(--fs-h1); margin-top:var(--sp-lg);}
.sec-head h2{font-size:var(--fs-h2); margin-top:var(--sp-md);}
.sec-head p{margin-top:var(--sp-lg); color:var(--ink-2);}
.sec-head--center{max-width:620px; margin-inline:auto; text-align:center;}

/* ═══════════ BUTTONS ═══════════ */
.btn{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-sm);
  font-family:var(--f-body);
  font-size:var(--fs-sec); font-weight:700; line-height:1;
  padding:var(--sp-md) var(--sp-xl); border-radius:var(--r-pill);
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  cursor:pointer; white-space:nowrap;
  transition:background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease, box-shadow .16s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed; transform:none;}
.btn--primary{--btn-bg:var(--ink); --btn-fg:#fff; box-shadow:var(--sh-1);}
.btn--primary:hover:not(:disabled){--btn-bg:var(--accent); box-shadow:var(--sh-2);}
.btn--secondary{--btn-bg:var(--surface); --btn-fg:var(--ink); --btn-bd:var(--border-strong); box-shadow:var(--sh-1);}
.btn--secondary:hover:not(:disabled){--btn-bd:var(--ink); box-shadow:var(--sh-2);}
.btn--secondary:active:not(:disabled){--btn-bg:var(--surface-2);}
.btn--ghost{--btn-fg:var(--ink-2);}
.btn--ghost:hover:not(:disabled){--btn-fg:var(--ink);}
.btn--lg{padding:var(--sp-lg) var(--sp-2xl); font-size:var(--fs-body);}
.btn--full{width:100%;}

/* ═══════════ BADGE ═══════════ */
.badge{
  display:inline-flex; align-items:center; gap:var(--sp-xs);
  font-size:var(--fs-label); font-weight:700; line-height:1;
  padding:var(--sp-xs) var(--sp-md); border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--ink-2);
  border:1px solid var(--border);
}
.badge--brand{background:var(--ink); color:#fff; border-color:transparent;}
.badge--accent{background:var(--accent-soft); color:var(--accent-dark); border-color:transparent;}
.badge--success{background:var(--success-soft); color:var(--success); border-color:transparent;}
.badge i{width:6px; height:6px; border-radius:50%; background:currentColor;}
/* Точка в бейдже хиро дышит в ритме курсов — 4 секунды вдох, 2 задержка,
   6 выдох (см. статью про ритм 4-2-6), а не просто мигает произвольно. */
.badge--brand i{
  background:var(--accent-warm);
  animation:badge-breathe 12s ease-in-out infinite;
}
@keyframes badge-breathe{
  0%{transform:scale(.8); opacity:.65;}
  33%{transform:scale(1.25); opacity:1;}
  50%{transform:scale(1.25); opacity:1;}
  100%{transform:scale(.8); opacity:.65;}
}
@media (prefers-reduced-motion: reduce){ .badge--brand i{animation:none;} }

/* ═══════════ SKIP LINK ═══════════ */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--ink); color:#fff;
  padding:var(--sp-md) var(--sp-lg); border-radius:var(--r-md);
  font-weight:700; font-size:var(--fs-small);
  transition:top .2s ease;
}
.skip-link:focus{top:12px;}

/* ═══════════ HEADER / NAV — плавающая пилюля ═══════════ */
/*
   Не полноширинная полоса с линией снизу, а контейнер-пилюля с отступом
   от края и собственной тенью — как в референсе: навигация выглядит как
   отдельный плавающий элемент интерфейса, а не строгая панель.
*/
.header{
  position:sticky; top:0; z-index:60;
  background:transparent;
  padding-top:var(--sp-md);
}
.nav{
  display:flex; align-items:center; gap:var(--sp-md); height:64px;
  background:var(--surface);
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  box-shadow:var(--sh-2);
  padding-inline:var(--sp-sm) var(--sp-sm);
}
.brand{display:flex; align-items:center; gap:var(--sp-sm); font-weight:700; letter-spacing:-.01em; padding-left:var(--sp-sm);}
/* Логотип в шапке и подвале — та же «позитивная» аватарка, что и в
   фавиконе: синий круг O₂ с линиями скорости. Раньше здесь был чёрный
   квадратик с буквами, он читался как заглушка. */
.brand-mark{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:block; object-fit:contain;
  filter:drop-shadow(0 4px 8px rgba(13,35,80,.2));
}
/* <nav> — просто семантическая обёртка для скринридеров, сама не должна
   занимать отдельное место во флекс-ряду шапки. */
.nav > nav{display:contents;}
.nav-list{display:flex; align-items:center; gap:var(--sp-xs); margin-left:var(--sp-xl);}
.nav-link{
  display:inline-flex; align-items:center; gap:var(--sp-xs);
  padding:var(--sp-sm) var(--sp-md); border-radius:var(--r-pill);
  font-size:var(--fs-sec); font-weight:600; color:var(--ink-2);
  transition:background .14s ease, color .14s ease;
}
.nav-link:hover{background:var(--surface-2); color:var(--ink);}
.nav-spacer{flex:1;}
.nav-actions{display:flex; align-items:center; gap:var(--sp-sm);}

/* dropdown */
.dd{position:relative;}
.dd-toggle .chev{transition:transform .2s ease;}
.dd.open .dd-toggle{background:var(--surface-2); color:var(--ink);}
.dd.open .chev{transform:rotate(180deg);}
.dd-menu{
  position:absolute; top:calc(100% + 12px); left:0;
  min-width:300px; padding:var(--sp-sm);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-3);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.dd.open .dd-menu{opacity:1; visibility:visible; transform:translateY(0);}
.dd-item{
  display:flex; gap:var(--sp-md); align-items:flex-start;
  padding:var(--sp-md) var(--sp-md); border-radius:var(--r-md);
  transition:background .14s ease;
}
.dd-item:hover{background:var(--surface-2);}
.dd-ico{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-dark);
}
.dd-item b{display:block; font-size:var(--fs-sec); font-weight:700;}
.dd-item span{display:block; font-size:var(--fs-small); color:var(--ink-3); line-height:1.45;}

.burger{display:none; width:44px; height:44px; place-items:center; border-radius:50%; color:var(--ink); margin-right:var(--sp-xs);}
.burger:hover{background:var(--surface-2);}

/* ═══════════ HERO — небо и плавающие карточки ═══════════ */
/*
   Композиция по центру, а не «текст слева / фото справа»: мягкий
   градиент неба во всю ширину первого экрана, крупный заголовок с одним
   курсивным словом (как в референсе — акцент начертанием, а не цветом),
   и пара небольших карточек-интерфейсов, будто вживую снятых с экрана,
   свободно расположенных поверх неба.
*/
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding-block:var(--sp-6xl) clamp(180px,20vw,260px);
  margin-top:-84px; padding-top:calc(clamp(64px,9vw,120px) + 84px);
  text-align:center;
}
/*
   Настоящее небо вместо нарисованного градиента — то самое «картинки на
   фоне», которого не хватало: фото облаков снизу, поверх — та же
   трёхступенчатая заливка, что и раньше, только полупрозрачная, чтобы
   фото читалось, а не превращалось в подложку под цветным одеялом.
   Фон медленно и почти незаметно плывёт по горизонтали — то самое лёгкое
   постоянное движение, которого просил заказчик.
*/
.hero::before{
  content:""; position:absolute; inset:-2% -8%; z-index:-2;
  background-image:
    radial-gradient(60% 50% at 18% 100%, rgba(255,255,255,.55), transparent),
    radial-gradient(50% 45% at 85% 95%, rgba(255,255,255,.4), transparent),
    linear-gradient(180deg, color-mix(in srgb, var(--sky-3) 55%, transparent) 0%,
                            color-mix(in srgb, var(--sky-2) 70%, transparent) 45%,
                            var(--sky-1) 82%, var(--bg) 100%),
    url('img/photos/bg-hero.jpg');
  background-size:auto, auto, auto, 130%;
  background-position:0 0, 0 0, 0 0, center 30%;
  background-repeat:no-repeat;
  animation:sky-drift 40s ease-in-out infinite alternate;
}
@keyframes sky-drift{
  0%{background-position:0 0, 0 0, 0 0, center 30%;}
  100%{background-position:0 0, 0 0, 0 0, center 38%;}
}
@media (prefers-reduced-motion: reduce){ .hero::before{animation:none;} }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,255,255,.9) 1.4px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(60% 55% at 50% 8%, #000 0%, transparent 72%);
  mask-image:radial-gradient(60% 55% at 50% 8%, #000 0%, transparent 72%);
  opacity:.5;
}
.hero-inner{position:relative; z-index:1; max-width:760px; margin-inline:auto;}
.hero h1{font-size:var(--fs-display); margin-top:var(--sp-xl); font-weight:700; color:var(--ink);}
.hero h1 em{
  color:var(--accent-warm); font-style:normal;
  text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--accent-warm) 45%, transparent);
  text-decoration-thickness:.06em; text-underline-offset:.14em;
}
.hero-sub{margin:var(--sp-xl) auto 0; font-size:var(--fs-lead); color:var(--ink-2); max-width:46ch;}
.hero-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-md); margin-top:var(--sp-2xl);}

/* ═══════════ ОБЛАКА — параллакс-глубина в шапке ═══════════
   Три слоя друг над другом вместо одной плоской картинки: дальний —
   крупный и размытый, ближний — резче и заметнее. Каждый слой едет
   с курсором на свою величину (--fx/--fy из _scripts.html, тот же
   приём, что у плавающих карточек) и медленно плывёт сам по себе —
   так объём читается и на телефоне, где мыши нет. */
.hero-clouds{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.cloud-layer{
  --fx:0px; --fy:0px;
  position:absolute; inset:-20% -30%;
  background-repeat:no-repeat;
  transform:translate(var(--fx), var(--fy));
  transition:transform .4s cubic-bezier(.2,.8,.3,1);
  will-change:transform, background-position;
}
.cloud-layer--far{
  background-image:
    radial-gradient(38% 22% at 15% 30%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(30% 18% at 78% 15%, rgba(255,255,255,.6), transparent 70%);
  filter:blur(18px);
  opacity:.8;
  animation:cloud-drift-far 70s linear infinite;
}
.cloud-layer--mid{
  background-image:
    radial-gradient(26% 14% at 62% 42%, rgba(255,255,255,.7), transparent 72%),
    radial-gradient(20% 11% at 12% 55%, rgba(255,255,255,.55), transparent 72%);
  filter:blur(9px);
  opacity:.7;
  animation:cloud-drift-mid 46s linear infinite;
}
.cloud-layer--near{
  background-image:
    radial-gradient(16% 8% at 30% 68%, rgba(255,255,255,.8), transparent 75%),
    radial-gradient(12% 6% at 88% 72%, rgba(255,255,255,.65), transparent 75%);
  filter:blur(4px);
  opacity:.6;
  animation:cloud-drift-near 30s linear infinite;
}
/* transform повторён на обоих концах каждой анимации, хотя сам не
   меняется здесь: так браузер пересчитывает translate(var(--fx),var(--fy))
   каждый кадр вместе с background-position и сразу подхватывает новые
   --fx/--fy из скрипта. Без активной анимации на transform браузер не
   всегда перечитывает статичное правило при одной лишь смене переменной
   инлайн-стилем — ровно поэтому у плавающих карточек transform всегда
   жил внутри @keyframes, а не отдельным статичным свойством. */
@keyframes cloud-drift-far{
  0%{background-position:0 0; transform:translate(var(--fx), var(--fy));}
  100%{background-position:-60px 0; transform:translate(var(--fx), var(--fy));}
}
@keyframes cloud-drift-mid{
  0%{background-position:0 0; transform:translate(var(--fx), var(--fy));}
  100%{background-position:70px 0; transform:translate(var(--fx), var(--fy));}
}
@keyframes cloud-drift-near{
  0%{background-position:0 0; transform:translate(var(--fx), var(--fy));}
  100%{background-position:-90px 0; transform:translate(var(--fx), var(--fy));}
}
@media (prefers-reduced-motion: reduce){
  .cloud-layer{animation:none; transition:none;}
}

/* плавающие карточки */
.floaters{position:absolute; inset:0; z-index:1; pointer-events:none;}
.floater{
  --fx:0px; --fy:0px;
  position:absolute; pointer-events:auto;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  animation:float-bob 5s ease-in-out infinite;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease;
  will-change:transform;
}
.floater:hover{
  box-shadow:0 30px 64px -20px rgba(16,21,31,.4);
  transform:translate(var(--fx), calc(var(--fy) - 6px)) scale(1.035) !important;
}
@keyframes float-bob{
  0%,100%{transform:translate(var(--fx), var(--fy)) rotate(-1.1deg);}
  50%{transform:translate(var(--fx), calc(var(--fy) - 18px)) rotate(1.1deg);}
}
@media (prefers-reduced-motion: reduce){ .floater{animation:none;} }

/* Лёгкий параллакс за курсором — --fx/--fy пишет скрипт в _scripts.html,
   именно поэтому transform в @keyframes собран через них, а не через
   голый translateY: анимация покачивания и сдвиг за мышью работают вместе,
   не перетирая друг друга. */

.floater--chat{
  top:16%; left:6%; width:230px; padding:var(--sp-md);
  animation-delay:-1.2s; animation-duration:5.6s;
}
.floater--stat{
  bottom:8%; right:7%; width:220px; padding:var(--sp-lg);
  animation-delay:-3.4s; animation-duration:6.4s;
}
.floater--pill{
  top:22%; right:12%; padding:var(--sp-sm) var(--sp-lg);
  display:flex; align-items:center; gap:var(--sp-sm);
  font-size:var(--fs-small); font-weight:700; color:var(--ink);
  animation-delay:-4.6s; animation-duration:4.8s;
}
.floater--pill i{width:8px; height:8px; border-radius:50%; background:var(--success);}

.floater-chat-row{display:flex; align-items:center; gap:var(--sp-sm); margin-bottom:var(--sp-sm);}
.floater-chat-av{
  width:26px; height:26px; border-radius:50%; flex:none;
  background:var(--ink); color:#fff;
  display:grid; place-items:center; font-size:var(--fs-label); font-weight:800;
}
.floater-chat-row b{font-size:var(--fs-label); font-weight:700; display:block;}
.floater-chat-row span{font-size:var(--fs-label); color:var(--ink-3); display:block;}
.floater-chat-body{
  font-size:var(--fs-label); line-height:1.4; color:var(--ink-2);
  background:var(--surface-2); border-radius:var(--r-md); padding:var(--sp-sm) var(--sp-md);
}

.floater-stat-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:var(--fs-label); font-weight:700; color:var(--ink-3); margin-bottom:var(--sp-sm);
}
.floater-stat-num{
  font-family:var(--f-display); font-size:var(--fs-h2); font-weight:800;
  color:var(--ink); letter-spacing:-.02em;
}
.floater-stat-bar{height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden; margin-top:var(--sp-sm);}
.floater-stat-bar i{display:block; height:100%; width:72%; border-radius:inherit; background:var(--accent-warm);}

@media (max-width:900px){
  /* top:4% сажал карточку под плавающую шапку (sticky-пилюля перекрывала
     её верх на планшете) — фиксированный отступ опускает карточку ниже шапки. */
  .floater--chat{left:2%; top:104px; width:190px;}
  .floater--stat{right:2%; bottom:4%; width:180px;}
  .floater--pill{display:none;}
}
@media (max-width:640px){
  .floaters{position:static; display:flex; flex-direction:column; gap:var(--sp-md); margin-top:var(--sp-2xl);}
  .floater{position:static; width:100% !important; animation:none;}
  /* Панорамное фото (2600×1137) при ширине 130% на узком высоком экране
     покрывает только полосу по центру — выше и ниже виден жёсткий срез
     на сплошной градиентный цвет. На мобильном герой высокий, а не
     широкий, поэтому фото должно тянуться по высоте, а не по ширине. */
  .hero::before{background-size:auto, auto, auto, auto 130%;}
}

/* ═══════════ PHONE MOCK ═══════════ */
.mocksec{padding-top:0;}
.mockrow{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:var(--sp-5xl);
  align-items:center;
}
.mockrow-lead{margin-top:var(--sp-lg); font-size:var(--fs-body); color:var(--ink-2); max-width:46ch;}
.mockrow .hero-trust{
  display:flex; flex-wrap:wrap; gap:var(--sp-xl);
  margin-top:var(--sp-2xl); padding-top:var(--sp-xl); border-top:1px solid var(--border);
}
.trust-item{display:flex; align-items:center; gap:var(--sp-sm); font-size:var(--fs-sec); color:var(--ink-2);}
.trust-item svg{color:var(--accent);}

/* Телефон лежит на фото, а не в пустоте — рамка чуть больше самого
   мока, фото видно по краю мягкой карточкой с собственной тенью. */
.mock-frame{
  position:relative; overflow:hidden; isolation:isolate;
  margin-inline:auto; max-width:400px;
  padding:var(--sp-3xl) var(--sp-2xl);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-2), inset 0 0 0 1px rgba(255,255,255,.25);
}
/* Фото и градиент вынесены в ::before, а не заданы прямо на .mock-frame:
   так фильтр цветового грейда красит только фон, не задевая реальный
   макет телефона внутри (он обычный ребёнок в потоке, а не декор). */
.mock-frame::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(200deg, rgba(16,21,31,.10) 0%, rgba(16,21,31,.40) 100%),
    url('img/photos/bg-mocksec.jpg');
  background-size:cover; background-position:center;
  filter:var(--photo-grade);
}
.mock{
  position:relative; margin-inline:auto; width:min(340px,100%);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:0 30px 64px -20px rgba(16,21,31,.45); overflow:hidden;
}
.mock-bar{
  display:flex; align-items:center; gap:var(--sp-sm);
  padding:var(--sp-md) var(--sp-lg); border-bottom:1px solid var(--border); background:var(--surface);
}
.mock-av{
  width:32px; height:32px; border-radius:50%; flex:none;
  background:var(--ink); color:#fff;
  display:grid; place-items:center; font-family:var(--f-display); font-size:var(--fs-label); font-weight:800;
}
.mock-bar b{font-size:var(--fs-small); font-weight:700; display:block; line-height:1.3;}
.mock-bar span{font-size:var(--fs-label); color:var(--success); display:flex; align-items:center; gap:var(--sp-xs);}
.mock-bar span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--success);}
.mock-body{padding:var(--sp-lg); display:flex; flex-direction:column; gap:var(--sp-md); background:var(--surface-2);}
.bubble{
  max-width:86%; padding:var(--sp-md) var(--sp-md); border-radius:16px;
  font-size:var(--fs-small); line-height:1.5;
  background:var(--surface); border:1px solid var(--border);
}
.bubble--me{align-self:flex-end; background:var(--ink); color:#fff; border-color:transparent;}

.tg-keys{display:grid; gap:var(--sp-xs); margin-top:var(--sp-sm);}
.tg-key{
  padding:var(--sp-sm) var(--sp-sm); border-radius:var(--r-pill); text-align:center;
  font-size:var(--fs-label); font-weight:600; white-space:nowrap;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--accent-dark);
}
.tg-key--wide{grid-column:1/-1;}
.tg-keys--pair{grid-template-columns:1fr 1fr;}

.tg-card{
  margin-top:var(--sp-sm); padding:var(--sp-md) var(--sp-md); border-radius:16px;
  background:var(--surface); border:1px solid var(--border);
}
.tg-card-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-sm);
  font-size:var(--fs-small); font-weight:700; margin-bottom:var(--sp-sm);
}
.tg-card-head span{font-size:var(--fs-label); font-weight:500; color:var(--ink-3);}

.tg-progress{
  height:6px; border-radius:99px; background:var(--surface-2);
  overflow:hidden; margin-bottom:var(--sp-md);
}
.tg-progress i{display:block; height:100%; border-radius:inherit; background:var(--accent);}

.tg-lesson{
  display:flex; gap:var(--sp-sm); align-items:flex-start;
  font-size:var(--fs-label); line-height:1.45; padding:var(--sp-xs) 0;
}
.tg-lesson + .tg-lesson{border-top:1px solid var(--border);}
.tg-lesson-mark{flex:none; width:16px; text-align:center; color:var(--accent);}
.tg-lesson--done{color:var(--ink-3);}
.tg-lesson--done .tg-lesson-mark{color:var(--ink-3);}

.tg-times{margin-top:var(--sp-xs); display:grid; gap:var(--sp-xs);}
.tg-time{display:flex; gap:var(--sp-sm); font-size:var(--fs-label); color:var(--ink-3);}
.tg-time b{color:var(--accent-dark); font-weight:700; font-variant-numeric:tabular-nums;}

/* ═══════════ VALUE — карточки со значком в круге ═══════════ */
.value-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-xl);}
.value{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--sp-xl) var(--sp-xl);
  box-shadow:var(--sh-1);
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.value:hover{box-shadow:var(--sh-2); transform:translateY(-5px); border-color:transparent;}
.value-ico{
  width:44px; height:44px; border-radius:50%; margin-bottom:var(--sp-lg);
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-dark);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), background .22s ease, color .22s ease;
}
.value:hover .value-ico{
  transform:scale(1.12) rotate(-6deg);
  background:var(--accent); color:#fff;
}
.value h3{font-size:var(--fs-h3);}
.value p{margin-top:var(--sp-sm); font-size:var(--fs-sec); color:var(--ink-2);}

/* ═══════════ TABS / PROGRAMS ═══════════ */
.tabs{
  display:inline-flex; gap:var(--sp-xs); padding:var(--sp-xs);
  max-width:100%;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-pill); margin-bottom:var(--sp-2xl); flex-wrap:wrap;
  box-shadow:var(--sh-1);
}
.tab{
  padding:var(--sp-md) var(--sp-xl); min-height:44px; border-radius:var(--r-pill);
  font-size:var(--fs-sec); font-weight:700; color:var(--ink-2);
  transition:background .16s ease, color .16s ease;
}
.tab:hover{color:var(--ink);}
.tab[aria-selected="true"]{background:var(--ink); color:#fff;}
.panel[hidden]{display:none;}
.panel{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:var(--sp-4xl); align-items:start;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:var(--sp-3xl);
  box-shadow:var(--sh-2);
  animation:fade-up .3s ease both;
}
@keyframes fade-up{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
.panel-badges{display:flex; gap:var(--sp-sm); flex-wrap:wrap; margin-bottom:var(--sp-lg);}
.panel h3{font-size:var(--fs-h2); letter-spacing:-.02em;}
.panel-desc{margin-top:var(--sp-md); color:var(--ink-2);}
.panel-list{margin-top:var(--sp-xl); display:grid; gap:var(--sp-md);}
.panel-list li{display:flex; gap:var(--sp-md); align-items:flex-start; font-size:var(--fs-sec);}
.panel-list svg{color:var(--accent); margin-top:var(--sp-xs);}
.panel-side{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--sp-xl);
}
.stat-row{display:flex; justify-content:space-between; align-items:baseline; padding:var(--sp-md) 0; border-bottom:1px solid var(--border);}
.stat-row:last-of-type{border-bottom:0;}
.stat-row dt{font-size:var(--fs-sec); color:var(--ink-3);}
.stat-row dd{margin:0; font-family:var(--f-display); font-weight:800; font-variant-numeric:tabular-nums;}
.panel-side .btn{margin-top:var(--sp-lg);}
.panel-note{margin-top:var(--sp-md); font-size:var(--fs-label); color:var(--ink-3); text-align:center;}

/* ═══════════ SHOWCASE / CARDS ═══════════ */
.show-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-xl);}

/* Номер шага крупной полупрозрачной цифрой в углу карточки.
   Счётчик, а не ручные цифры в разметке: порядок карточек может
   поменяться, и номера не разъедутся. */
.show-grid--steps{counter-reset:step;}
.show-grid--steps .card{position:relative; overflow:hidden; counter-increment:step;}
.show-grid--steps .card::after{
  content:counter(step, decimal-leading-zero);
  position:absolute; right:14px; bottom:-14px;
  font-family:var(--f-display); font-size:var(--fs-display); font-weight:800; line-height:1;
  color:color-mix(in srgb, var(--sky-3) 26%, transparent);
  pointer-events:none;
}
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--sp-xl) var(--sp-xl);
  box-shadow:var(--sh-1);
  transition:box-shadow .18s ease, transform .18s ease;
}
.card:hover{box-shadow:var(--sh-2); transform:translateY(-3px);}

.card--course{padding:0; overflow:hidden;}
.card-media{aspect-ratio:4/3; overflow:hidden; background:var(--surface-2);}
.card-media img{
  width:100%; height:100%; object-fit:cover;
  filter:var(--photo-grade);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.card--course:hover .card-media img{transform:scale(1.04);}
.card-body{padding:var(--sp-xl) var(--sp-xl) var(--sp-xl);}
.card-ico{
  width:40px; height:40px; border-radius:50%; margin-bottom:var(--sp-lg);
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-dark);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), background .22s ease, color .22s ease;
}
.card:hover .card-ico{transform:scale(1.12) rotate(-6deg); background:var(--accent); color:#fff;}
.card h3{font-size:var(--fs-h3);}
.card p{margin-top:var(--sp-sm); font-size:var(--fs-sec); color:var(--ink-2);}
.card--wide{grid-column:span 3; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-2xl); align-items:center;}

/* ═══════════ БЛОГ ═══════════ */
.card h3 a{color:inherit;}
.card h3 a:hover{color:var(--accent);}
.article-meta{margin-top:var(--sp-md); font-size:var(--fs-small); color:var(--ink-3);}
.article-body{max-width:68ch; margin-inline:auto;}
.article-body p{font-size:var(--fs-body); color:var(--ink); margin-bottom:var(--sp-xl); line-height:1.7;}
/* `.article-meta` внутри статьи (заметка о курсе) — тот же элемент <p>,
   что и обычный текст статьи, поэтому `.article-body p` выше по
   специфичности его перебивал: заметка рендерилась обычным размером
   текста вместо мелкого. */
.article-body p.article-meta{font-size:var(--fs-small); line-height:1.5; color:var(--ink-3);}

.alert{
  display:flex; gap:var(--sp-md); align-items:flex-start;
  padding:var(--sp-md) var(--sp-lg); border-radius:var(--r-md);
  font-size:var(--fs-sec); border:1px solid transparent;
}
.alert svg{margin-top:var(--sp-xs);}
.alert--info{background:var(--surface-2); color:var(--ink); border-color:var(--border);}
.alert--info svg{color:var(--accent);}
.alert--success{background:var(--success-soft); color:var(--ink); border-color:color-mix(in srgb,var(--success) 26%,transparent);}
.alert--success svg{color:var(--success);}
.alert--warning{background:var(--warning-soft); color:var(--ink); border-color:color-mix(in srgb,var(--warning) 26%,transparent);}
.alert--warning svg{color:var(--warning);}
.alert b{font-weight:700;}
.alert p{margin-top:var(--sp-xs); color:var(--ink-2); font-size:var(--fs-small);}

/* ═══════════ PROOF / ОТЗЫВЫ — фото и стеклянные карточки ═══════════ */
/*
   Второе появление фотографии на странице, но не как второй первый экран:
   секция лежит в потоке страницы своей скруглённой панелью, карточки на
   ней — полупрозрачное стекло, тот же приём, что и у плавающих карточек
   в шапке, только спокойнее — здесь ничего не покачивается.
*/
.section-photo{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r-xl);
  padding:var(--sp-5xl) var(--sp-4xl);
  margin-bottom:var(--sp-5xl);
}
.section-photo::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:url('img/photos/bg-proof.jpg');
  background-size:cover; background-position:center;
  filter:var(--photo-grade);
}
.section-photo::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(16,21,31,.16) 0%, rgba(16,21,31,.40) 100%);
}
.section-photo .sec-head--center h2,
.section-photo .sec-head--center .eyebrow{color:#fff;}
.section-photo .sec-head--center .eyebrow{background:rgba(255,255,255,.16); color:#fff;}
.section-photo .sec-head--center .eyebrow::before{background:#fff;}
.section-photo .alert--warning{
  background:color-mix(in srgb, var(--warning) 20%, rgba(255,255,255,.86));
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  border-color:color-mix(in srgb, var(--warning) 50%, transparent);
}

.glass{
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.55);
}

.proof-stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-xl);
  margin-bottom:var(--sp-xl);
}
.proof-stat{
  border-radius:var(--r-lg);
  padding:var(--sp-xl) var(--sp-2xl); box-shadow:var(--sh-2);
}
.proof-stat b{
  display:block; font-family:var(--f-display);
  font-size:var(--fs-h2); font-weight:800; letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.proof-stat span{display:block; margin-top:var(--sp-xs); font-size:var(--fs-sec); color:var(--ink-2);}
.quotes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-xl);}
.quote{
  position:relative;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--sp-xl); box-shadow:var(--sh-1);
  display:flex; flex-direction:column; gap:var(--sp-lg);
}
/* Декоративная кавычка в углу — классический приём для отзывов, тише
   и статуснее, чем просто текст в рамке. ::before стоит первым в
   разметке и не позиционирован по z-index, поэтому текст, идущий следом
   в потоке, естественным образом рисуется поверх него. */
.quote::before{
  content:"\201C"; position:absolute; top:2px; left:14px;
  font-family:var(--f-display); font-size:var(--fs-display); font-weight:800;
  line-height:1; color:color-mix(in srgb, var(--accent-warm) 32%, transparent);
  pointer-events:none;
}
.quote p{position:relative; font-size:var(--fs-sec); color:var(--ink); flex-grow:1;}
.quote footer{display:flex; align-items:center; gap:var(--sp-md);}
.quote-av{
  width:36px; height:36px; border-radius:50%; flex:none;
  object-fit:cover; box-shadow:inset 0 0 0 1px rgba(16,21,31,.08);
}
.quote footer b{display:block; font-size:var(--fs-small); font-weight:700;}
.quote footer span{display:block; font-size:var(--fs-label); color:var(--ink-3);}
.placeholder-note{margin-top:var(--sp-lg); font-size:var(--fs-small); color:var(--ink-3);}

/* ═══════════ CTA ═══════════ */
/* когда .cta идёт следом за другим блоком внутри той же секции (не как
   отдельная секция с padding-top:0) — нужен свой отступ сверху, иначе
   упирается прямо в предыдущий блок */
.container > * + .cta{margin-top:var(--sp-5xl);}
.cta{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--ink); color:#fff;
  border-radius:var(--r-xl); padding:var(--sp-5xl);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2xl); flex-wrap:wrap;
}
.cta::after{
  content:""; position:absolute; right:-8%; bottom:-55%; z-index:-1;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, var(--accent), transparent 68%);
  opacity:.5;
  animation:cta-pulse 4.5s ease-in-out infinite;
}
@keyframes cta-pulse{
  0%,100%{transform:scale(1); opacity:.5;}
  50%{transform:scale(1.18); opacity:.72;}
}
@media (prefers-reduced-motion: reduce){ .cta::after{animation:none;} }
.cta .btn--primary{position:relative;}
.cta .btn--primary::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(255,255,255,.5);
  animation:btn-ring 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes btn-ring{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.35);}
  70%{box-shadow:0 0 0 12px rgba(255,255,255,0);}
  100%{box-shadow:0 0 0 12px rgba(255,255,255,0);}
}
@media (prefers-reduced-motion: reduce){ .cta .btn--primary::after{animation:none;} }
.cta h2{font-size:var(--fs-h2); max-width:16ch;}
.cta p{margin-top:var(--sp-md); max-width:40ch; color:rgba(255,255,255,.68);}
.cta .btn--primary{--btn-bg:#fff; --btn-fg:var(--ink); color:var(--ink);}
.cta .btn--primary:hover:not(:disabled){--btn-bg:var(--accent-soft);}
.cta .btn--ghost{--btn-fg:rgba(255,255,255,.78);}
.cta .btn--ghost:hover:not(:disabled){--btn-fg:#fff;}

/* ═══════════ MODAL ═══════════ */
.overlay{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center; padding:var(--sp-xl);
  background:rgba(16,21,31,.55);
  backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s;
}
.overlay.open{opacity:1; visibility:visible;}
.modal{
  width:min(460px,100%); max-height:90vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--sh-3);
  padding:var(--sp-2xl);
  transform:translateY(12px) scale(.98);
  transition:transform .22s cubic-bezier(.2,.8,.3,1);
}
.overlay.open .modal{transform:none;}
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-lg); margin-bottom:var(--sp-xs);}
.modal-head h3{font-size:var(--fs-h3);}
.modal-close{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:grid; place-items:center; color:var(--ink-3);
  transition:background .14s ease, color .14s ease;
}
.modal-close:hover{background:var(--surface-2); color:var(--ink);}
.modal--gc{width:min(620px,100%); padding:var(--sp-xl);}
.modal--gc #lp-gc-widget-slot{min-height:1px;}
.modal-sub{font-size:var(--fs-sec); color:var(--ink-2); margin-bottom:var(--sp-xl);}
.field{margin-bottom:var(--sp-lg);}
.field label{display:block; font-size:var(--fs-label); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-bottom:var(--sp-sm);}
.input,.select{
  width:100%; padding:var(--sp-md) var(--sp-md);
  font-family:inherit; font-size:var(--fs-sec); color:var(--ink);
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-md);
  transition:border-color .14s ease, box-shadow .14s ease;
}
.input::placeholder{color:var(--ink-3);}
.input:hover,.select:hover{border-color:var(--ink-3);}
.input:focus,.select:focus{outline:none; border-color:var(--accent); box-shadow:var(--ring);}
.input[aria-invalid="true"]{border-color:var(--error);}
.input:disabled,.select:disabled{background:var(--surface-2); color:var(--ink-3); cursor:not-allowed;}
.select{
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) 55%, calc(100% - 14px) 55%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:var(--sp-3xl);
}
.field-err{display:none; margin-top:var(--sp-xs); font-size:var(--fs-label); color:var(--error);}
.field.invalid .field-err{display:block;}
.check{display:flex; gap:var(--sp-sm); align-items:flex-start; font-size:var(--fs-small); color:var(--ink-2); margin-bottom:var(--sp-xl); cursor:pointer;}
.check input{margin-top:var(--sp-xs); accent-color:var(--accent); width:16px; height:16px; flex:none; cursor:pointer;}

/* ═══════════ FOOTER ═══════════ */
/* margin-top намеренно не задаём: футер всегда идёт сразу за
   <section class="section">, а у неё уже есть нижний padding-block
   до 108px — добавленный сверху margin удваивал разрыв перед футером
   на каждой странице. */
.footer{border-top:1px solid var(--border); padding-block:var(--sp-4xl) var(--sp-2xl);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:var(--sp-2xl);}
.footer-brand p{margin-top:var(--sp-md); font-size:var(--fs-sec); color:var(--ink-2); max-width:30ch;}
.footer h4{font-size:var(--fs-label); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:var(--sp-md);}
.footer-links li + li{margin-top:var(--sp-sm);}
.footer-links a{font-size:var(--fs-sec); color:var(--ink-2); transition:color .14s ease;}
.footer-links a:hover{color:var(--ink);}
.sub-form{display:flex; gap:var(--sp-sm); margin-top:var(--sp-md);}
.sub-form .input{flex:1; min-width:0; border-radius:var(--r-pill);}
.lp-disclaimer{margin-top:var(--sp-2xl); padding-top:var(--sp-xl); border-top:1px solid var(--border); display:grid; gap:var(--sp-sm);}
.lp-disclaimer p{font-size:var(--fs-label); line-height:1.5; color:var(--ink-3);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-lg); flex-wrap:wrap;
  margin-top:var(--sp-xl); padding-top:var(--sp-xl); border-top:1px solid var(--border);
  font-size:var(--fs-small); color:var(--ink-3);
}

/* ═══════════ REVEAL ═══════════ */
/*
   Заметнее, чем раньше: элемент не просто проявляется, а слегка
   выезжает и подрастает — эффект, который считывается с одного взгляда,
   а не только боковым зрением. Карточки внутри сеток дополнительно
   ступенчато задержаны — так грид «набирает высоту» слева направо,
   а не появляется единым куском.
*/
.js .reveal{
  opacity:0; transform:translateY(30px) scale(.96);
  transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
}
.js .reveal.in{opacity:1; transform:none;}

.value-grid .value:nth-child(1),
.show-grid .card:nth-child(1),
.quotes .quote:nth-child(1){transition-delay:0s;}
.value-grid .value:nth-child(2),
.show-grid .card:nth-child(2),
.quotes .quote:nth-child(2){transition-delay:.1s;}
.value-grid .value:nth-child(3),
.show-grid .card:nth-child(3),
.quotes .quote:nth-child(3){transition-delay:.2s;}
.value-grid .value:nth-child(4),
.show-grid .card:nth-child(4){transition-delay:.3s;}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1080px){
  .footer-grid{grid-template-columns:1.5fr 1fr 1.4fr;}
  .footer-col--hide{display:none;}
}
@media (max-width:920px){
  .nav-list{display:none;}
  .burger{display:grid;}
  .nav-actions .btn--ghost{display:none;}
  .mockrow{grid-template-columns:minmax(0,1fr);}
  .mock{order:0; margin-top:var(--sp-sm);}
  .panel{grid-template-columns:minmax(0,1fr);}
  .show-grid{grid-template-columns:minmax(0,1fr);}
  .card--wide{grid-column:span 1; grid-template-columns:minmax(0,1fr);}
  .quotes{grid-template-columns:minmax(0,1fr);}
  .proof-stats{grid-template-columns:minmax(0,1fr);}
  .value-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-lg);}
}
@media (max-width:640px){
  .nav-actions .btn--primary{display:none;}
  .nav{gap:var(--sp-sm);}
  .footer-grid{grid-template-columns:minmax(0,1fr); gap:var(--sp-2xl);}
  /* Было: вертикальный список внутри одной огромной «таблетки» — три
     кнопки в столбик на узком экране выглядели как отдельный блок меню,
     а не переключатель. Теперь — горизонтальная лента с прокруткой,
     как сегменты, а не список. */
  .tabs{display:flex; flex-wrap:nowrap; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{flex:1 0 auto; text-align:center; white-space:nowrap;}
  .hero-cta .btn{flex:1 1 100%;}
  .cta{padding:var(--sp-2xl) var(--sp-xl);}
  .modal{padding:var(--sp-xl);}
  .value-grid{grid-template-columns:minmax(0,1fr);}
  /* Нижний padding héro был рассчитан на абсолютно спозиционированные
     плавающие карточки; на мобильном они уже в потоке (см. .floaters
     выше), и тот же отступ оставлял пустой провал под кнопками. */
  .hero{padding-bottom:var(--sp-4xl);}
  /* Декоративная цифра шага крупнее текста карточки на узком экране —
     уменьшаем и отодвигаем, чтобы не наезжала на последнюю строку. */
  .show-grid--steps .card::after{font-size:var(--fs-display); right:10px; bottom:-6px;}
}
@media (max-width:900px){
  .footer-links a{display:inline-block; padding-block:var(--sp-sm);}
  .footer-links li + li{margin-top:var(--sp-xs);}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  .js .reveal{opacity:1; transform:none;}
}

/* ═══════════ ЮРИДИЧЕСКИЕ СТРАНИЦЫ ═══════════ */
.doc{max-width:66ch;}
.doc h3{margin-top:var(--sp-2xl); margin-bottom:var(--sp-sm); font-size:var(--fs-h3);}
.doc h3:first-child{margin-top:0;}
.doc p{margin-bottom:var(--sp-md); color:var(--ink-2); line-height:1.7;}
.doc .panel-list{margin-top:var(--sp-md); margin-bottom:var(--sp-lg);}
.doc b{color:var(--ink);}

/* ═══════════ ФОТОГРАФИИ-ЗАГЛУШКИ ═══════════ */
.photo{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--border);
  background:var(--surface-2);
  display:grid; place-items:center;
}
.photo img{width:100%; height:100%; object-fit:cover; display:block; filter:var(--photo-grade);}
.photo--portrait{aspect-ratio:3/4;}
.photo--wide{aspect-ratio:16/9;}
.photo--square{aspect-ratio:1;}
.photo-hint{
  padding:var(--sp-xl); text-align:center; font-size:var(--fs-sec); color:var(--ink-3);
  display:grid; gap:var(--sp-xs); place-items:center;
}
.photo-hint b{color:var(--ink-2); font-weight:700;}
.photo-hint span{font-size:var(--fs-label);}

/* Заголовок первой секции внутренних страниц — тот же приём, что в шапке
   главной (мягкий небесный градиент с лёгким свечением по краям), только
   без фото: внутренние страницы должны быть спокойнее главной, а не
   повторять её один в один. Раньше здесь совсем не было цвета — рядом
   с параллакс-небом на главной это читалось как недоделанная страница. */
main > .section:first-child .sec-head{
  position:relative; overflow:hidden; isolation:isolate;
  max-width:none; padding:var(--sp-4xl) var(--sp-4xl);
  border-radius:var(--r-xl);
  background:linear-gradient(155deg, var(--sky-1) 0%, var(--accent-soft) 62%, var(--surface) 100%);
}
main > .section:first-child .sec-head::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:
    radial-gradient(46% 70% at 8% 0%, rgba(255,255,255,.65), transparent),
    radial-gradient(38% 55% at 96% 100%, color-mix(in srgb, var(--sky-3) 38%, transparent), transparent);
}
main > .section:first-child .sec-head p{max-width:60ch;}
main > .section:first-child .sec-head h1{font-size:var(--fs-h1);}

/* Простой цветной SVG-разделитель — тише, чем прежний, не главный герой. */
.breath-wave{display:block; width:100%; height:auto; margin-block:var(--sp-xs); opacity:.5;}
.breath-wave path{stroke:var(--accent); fill:none; stroke-width:1.6; stroke-linecap:round; opacity:.4;}
.breath-wave path:nth-child(2){stroke:var(--ink-3); opacity:.3;}
@media (prefers-reduced-motion: no-preference){
  .breath-wave path{stroke-dasharray:8 10; animation:breath-flow 9s linear infinite;}
  .breath-wave path:nth-child(2){animation-duration:13s; animation-direction:reverse;}
}
@keyframes breath-flow{to{stroke-dashoffset:-180;}}

/* ═══════════ ЛЕНДИНГ «Быстрый кислород. За 5 минут» ═══════════
   Новая главная по ТЗ заказчика (11 экранов), собранная из компонентов
   сайта: небо и плавающие стеклянные карточки, .value/.panel/.tabs/.cta,
   модальное окно. Класс lp- — только то, чего на сайте раньше не было. */
:root{
  --navy:#0D2350; --cta-a:#1B5FC1; --cta-b:#0F7C97;
  --gold-1:#FFF4D2; --gold-2:#F9DE9B; --gold-bd:#D9B35A;
}
.lp-accent{color:var(--accent); font-style:normal; font-family:inherit; font-weight:inherit;}
.lp-h2{font-size:var(--fs-h2); color:var(--navy); max-width:26ch;}
.lp-h2--wide{max-width:34ch;}
.lp-lead{margin-top:var(--sp-lg); color:var(--ink-2); max-width:64ch; font-size:var(--fs-body);}
.lp-small{font-size:var(--fs-small); color:var(--ink-3);}
.lp-closing{margin-top:var(--sp-3xl); font-family:var(--f-display); font-size:var(--fs-h2); font-weight:800; line-height:1.22; letter-spacing:-.015em; color:var(--navy); max-width:34ch;}

/* ── служебное для черновика ── */
.lp-draftbar{background:var(--warning-soft); color:#6B4400; font-size:var(--fs-label); font-weight:700; text-align:center; padding:var(--sp-sm) var(--sp-lg); border-bottom:1px solid color-mix(in srgb,var(--warning) 35%,transparent);}
.lp-todo{color:var(--ink-3);}
body.lp-marks .lp-todo{display:inline-block; background:var(--warning-soft); color:#6B4400; border:1px dashed var(--warning); border-radius:6px; padding:var(--sp-xs) var(--sp-sm); font-size:.9em;}
body.lp-draft.lp-marks [data-todo]{outline:2px dashed var(--warning); outline-offset:3px;}
.lp-rphoto:disabled,.lp-thumb:disabled{cursor:default;}
.lp-rphoto:disabled .lp-rplay,.lp-thumb:disabled .lp-dot{display:none;}
.lp-marks-btn{margin-left:var(--sp-md); padding:var(--sp-xs) var(--sp-md); border-radius:20px; border:1px solid color-mix(in srgb,var(--warning) 60%,transparent); background:#fff; color:#6B4400; font:inherit; font-size:var(--fs-label); cursor:pointer;}

/* ── кнопки и значки ── */
.btn--cta{--btn-fg:#fff; background:linear-gradient(135deg,var(--cta-a),var(--cta-b)); border-color:transparent; box-shadow:0 12px 26px -12px color-mix(in srgb,var(--cta-a) 80%,transparent);}
.btn--cta:hover:not(:disabled){background:linear-gradient(135deg,#154C9D,#0B6781); box-shadow:0 16px 32px -12px color-mix(in srgb,var(--cta-a) 90%,transparent);}
.btn--xl{padding:var(--sp-lg) var(--sp-2xl); font-size:var(--fs-body); white-space:normal; text-align:center;}
.ic{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; flex:none;}
.ic--blue{background:#DCEAFA; color:#245BA6;} .ic--green{background:#DDF3E7; color:#0B7A51;}
.ic--amber{background:#FCEBCB; color:#8A5A00;} .ic--rose{background:#FBE3E3; color:#B3261E;} .ic--violet{background:#EBE4FB; color:#5B3FB0;}
.regular-only{display:none;}
html.lp-regular-price .promo-only{display:none !important;}
html.lp-regular-price .regular-only{display:inline;}
html.lp-regular-price .lp-tt.regular-only{display:block;}

/* ── полоса-призыв между экранами ── */
.lp-band{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-lg) var(--sp-2xl); margin-top:var(--sp-3xl); padding:var(--sp-lg) var(--sp-xl); border-radius:var(--r-xl); box-shadow:var(--sh-2);}
.lp-band-info{display:flex; align-items:center; gap:var(--sp-md); font-size:var(--fs-sec); color:var(--ink-2); line-height:1.4;}
.lp-band-info b{display:block; color:var(--navy); font-size:var(--fs-body);}

/* ── 1. hero — по макету заказчика (экран 1) ── */
:root{--red-a:#FF5A5A; --red-b:#D92B35; --gold-txt:#2B2007;}
.lp-hero{position:relative; isolation:isolate; overflow:clip; margin-top:-84px; padding:calc(84px + clamp(10px,1.6vw,22px)) 0 var(--sp-4xl);
  background:
    radial-gradient(50% 40% at 8% 6%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(45% 45% at 96% 18%, rgba(190,222,250,.8), transparent 70%),
    linear-gradient(180deg,#E6F2FC 0%,#F1F8FE 52%,var(--bg) 100%);}
.lp-hero .hero-clouds{z-index:-1; opacity:.55;}
.lp-bokeh{position:absolute; z-index:-1; border-radius:50%; pointer-events:none; background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),rgba(190,225,250,.35) 60%,rgba(255,255,255,.08)); border:1px solid rgba(255,255,255,.8);}
.lp-headline{margin-bottom:var(--sp-xl);}
.lp-eyebrow{font-size:var(--fs-label); font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-dark); line-height:1.5;}
.lp-hero h1{margin-top:var(--sp-sm); font-size:var(--fs-display); color:var(--navy); letter-spacing:-.03em;}
.lp-lead-line{margin-top:var(--sp-md); font-family:var(--f-display); font-size:var(--fs-h4); line-height:1.4; font-weight:700; color:var(--navy);}

.lp-mock{position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--sp-xl) var(--sp-xl);
  grid-template-areas:"photo gold" "photo sub" "photo tiles" "cta price";}
.lp-m-photo{grid-area:1 / 1 / 4 / -1; position:relative; z-index:-1; margin:0; border-radius:30px; overflow:hidden; box-shadow:0 26px 60px -26px rgba(13,35,80,.45); background:var(--sky-2);}
.lp-m-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;}
.lp-m-photo::after{content:""; position:absolute; inset:auto 0 0 0; height:28%; background:linear-gradient(180deg,transparent,rgba(255,255,255,.55));}
.lp-airwave{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1;}
.lp-m-photo figcaption{position:absolute; z-index:2; left:18px; bottom:16px; padding:var(--sp-sm) var(--sp-lg); border-radius:16px; font-size:var(--fs-small); line-height:1.35; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
.lp-m-photo figcaption b{display:block; color:var(--navy);}

.lp-m-gold{grid-area:gold; display:flex; align-items:center; gap:var(--sp-xl); padding:var(--sp-md) var(--sp-2xl) var(--sp-md) var(--sp-md); border-radius:90px;
  background:linear-gradient(180deg,#FFF4CB 0%,#F5D471 48%,#E9B94D 100%); border:2px solid #D8AC45; box-shadow:inset 0 2px 0 rgba(255,255,255,.75), 0 18px 34px -18px rgba(150,110,20,.75);}
.lp-m-gold svg{flex:none;}
.lp-gold-text b{display:block; font-family:var(--f-display); font-size:var(--fs-h2); line-height:1.02; letter-spacing:-.01em; color:var(--gold-txt); font-weight:800;}
.lp-gold-text span{display:block; margin-top:var(--sp-xs); font-family:var(--f-display); font-weight:800; font-size:var(--fs-small); line-height:1.2; color:var(--gold-txt); letter-spacing:.01em;}
.lp-m-gold .lp-laurel{margin-left:auto; opacity:.9;}
.lp-m-sub{grid-area:sub; display:flex; align-items:center; gap:var(--sp-lg); padding:var(--sp-md) var(--sp-2xl); border-radius:60px; background:linear-gradient(180deg,#FFFAEA,#FBEFCB); border:1px solid #F0DDA6; box-shadow:0 12px 26px -20px rgba(150,110,20,.6);}
.lp-m-sub svg{flex:none;}
.lp-m-sub p{font-weight:600; font-size:var(--fs-sec); line-height:1.35; color:var(--navy);}
.lp-tiles{grid-area:tiles; display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-md);}
.lp-tile{display:flex; align-items:center; gap:var(--sp-lg); padding:var(--sp-lg); border-radius:24px; border:1px solid rgba(255,255,255,.9); box-shadow:0 14px 28px -22px rgba(13,35,80,.45);}
.lp-tile > svg{flex:none;}
.lp-tile b{display:block; font-family:var(--f-display); font-weight:800; font-size:var(--fs-body); line-height:1.15; color:var(--navy);}
.lp-tile span{display:block; margin-top:var(--sp-xs); font-size:var(--fs-small); line-height:1.3; color:var(--ink-2);}
.lp-tile--g{background:linear-gradient(180deg,#EAF7EF,#DDF1E5);}
.lp-tile--b{background:linear-gradient(180deg,#EAF3FD,#DCEBFA);}
.lp-tile--p{background:linear-gradient(180deg,#EDF1FD,#E1E8FB);}
.lp-tile--p b{color:#1B3A9E;}

.lp-m-cta{grid-area:cta; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-lg); min-height:clamp(70px,7.6vw,96px); padding:0 var(--sp-xl) 0 var(--sp-3xl); border-radius:60px; color:#fff;
  background:linear-gradient(180deg,var(--red-a),var(--red-b)); box-shadow:inset 0 2px 0 rgba(255,255,255,.4), 0 22px 40px -16px rgba(217,43,53,.7); transition:transform .15s ease, filter .15s ease;}
.lp-m-cta:hover{transform:translateY(-2px); filter:brightness(1.05);}
.lp-m-cta span{font-family:var(--f-display); font-weight:800; font-size:var(--fs-h2); letter-spacing:.01em; line-height:1.15; text-transform:uppercase;}
.lp-m-cta svg{flex:none;}
.lp-m-price{grid-area:price; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--sp-xl); padding:var(--sp-lg) var(--sp-2xl); border-radius:26px; background:linear-gradient(180deg,#FFF3F3,#FDE8E9); border:1px solid #F7D3D5; box-shadow:0 14px 28px -22px rgba(217,43,53,.5);}
.lp-m-price::before{content:""; grid-column:2; grid-row:1; width:1px; align-self:stretch; background:#E8C4C7;}
.lp-mp-l{grid-column:1; grid-row:1;} .lp-mp-r{grid-column:3; grid-row:1;}
.lp-mp-l small{display:block; font-weight:700; font-size:var(--fs-lead); color:#C8202C;}
.lp-mp-l small.regular-only{display:none;}
html.lp-regular-price .lp-mp-l small.regular-only{display:block;}
.lp-mp-l strong{display:block; font-family:var(--f-display); font-size:var(--fs-price); line-height:1.02; letter-spacing:-.02em; color:#B01822;}
.lp-mp-r s{display:block; font-size:var(--fs-h4); font-weight:700; color:#8A94A3;}
.lp-mp-r span{display:block; margin-top:var(--sp-xs); font-size:var(--fs-body); color:var(--ink-2);}
.lp-mp-r b{display:block; font-family:var(--f-display); font-size:var(--fs-h3); color:var(--navy);}

.lp-lead-bridge{margin-top:var(--sp-sm); font-size:var(--fs-body); line-height:1.5; color:var(--ink-2); max-width:62ch;}

.lp-biohack{position:relative; display:flex; align-items:center; gap:var(--sp-xl); margin-top:var(--sp-2xl); padding:var(--sp-lg) var(--sp-3xl); border-radius:90px; overflow:hidden;
  background:linear-gradient(100deg,#0548C4 0%,#0B8FE0 32%,#15C2C9 58%,#1FD69B 82%,#36D878 100%); box-shadow:0 26px 50px -16px rgba(6,90,220,.55), inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(0,30,60,.12);}
.lp-biohack::before{content:""; position:absolute; inset:0; background:radial-gradient(55% 140% at 10% 15%,rgba(255,255,255,.4),transparent 60%),radial-gradient(45% 100% at 95% 100%,rgba(255,255,255,.3),transparent 65%); pointer-events:none;}
.lp-biohack-glow{position:absolute; border-radius:50%; filter:blur(22px); pointer-events:none; opacity:.8;}
.lp-biohack-glow--l{width:120px; height:120px; left:-10px; top:50%; transform:translateY(-50%); background:radial-gradient(circle,#7FD8FF,transparent 70%);}
.lp-biohack-glow--r{width:110px; height:110px; right:-4px; top:50%; transform:translateY(-50%); background:radial-gradient(circle,#9CFFC7,transparent 70%);}
.lp-biohack-wave{position:absolute; inset:0; width:100%; height:100%; opacity:.85; pointer-events:none;}
.lp-biohack-sheen{position:absolute; left:2%; right:2%; top:4%; height:38%; border-radius:90px/60px; background:linear-gradient(180deg,rgba(255,255,255,.4),transparent); filter:blur(2px); pointer-events:none;}
.lp-biohack-bub{position:absolute; border-radius:50%; background:rgba(255,255,255,.75); box-shadow:0 0 6px rgba(255,255,255,.6); pointer-events:none; animation:float-bob 5s ease-in-out infinite;}
.lp-biohack-ic{position:relative; flex:none; display:grid; place-items:center; filter:brightness(0) saturate(100%) invert(100%) drop-shadow(0 0 10px rgba(255,255,255,.55)); opacity:.98;}
.lp-biohack-text{position:relative; min-width:0;}
.lp-biohack-text b{display:block; font-family:var(--f-display); font-size:var(--fs-h3); font-weight:800; color:#fff; letter-spacing:.015em; text-transform:uppercase; text-shadow:0 2px 14px rgba(0,30,60,.25);}
.lp-biohack-text span{display:block; margin-top:var(--sp-xs); font-size:var(--fs-sec); color:rgba(255,255,255,.96); line-height:1.3;}
.lp-biohack-leaf{position:relative; flex:none; margin-left:auto; filter:drop-shadow(0 0 14px rgba(160,255,200,.7)) drop-shadow(0 4px 10px rgba(0,60,20,.25));}
.lp-biohack-lead{margin-top:var(--sp-md); display:grid; gap:var(--sp-sm); max-width:68ch;}
.lp-biohack-lead p{font-size:var(--fs-sec); line-height:1.5; color:var(--ink-2);}

.lp-why{margin-top:var(--sp-xl); font-size:var(--fs-sec); line-height:1.6; color:var(--ink-2);}
.lp-why b{color:var(--navy); font-weight:700;}

.lp-feats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-md); margin-top:var(--sp-2xl);}
.lp-feat{display:flex; align-items:center; gap:var(--sp-md); font-weight:600; font-size:var(--fs-body); line-height:1.3; color:#3C4A63;}
.lp-feat-ic{width:clamp(56px,6vw,76px); height:clamp(56px,6vw,76px); border-radius:50%; display:grid; place-items:center; flex:none; background:rgba(255,255,255,.9); box-shadow:0 12px 24px -14px rgba(13,35,80,.4);}
.lp-feat-ic--g{background:#E4F5EA;} .lp-feat-ic--r{background:#FDEBEC;} .lp-feat-ic--b{background:#E6F0FC;}
.lp-info{display:flex; align-items:center; gap:var(--sp-lg); margin-top:var(--sp-xl); padding:var(--sp-md) var(--sp-xl); border-radius:22px; background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.95); box-shadow:0 14px 30px -24px rgba(13,35,80,.4);}
.lp-info svg{flex:none;}
.lp-info p{font-size:var(--fs-sec); color:var(--ink-2); line-height:1.45;}

/* ── Экран 1-2: как дыхание влияет на самочувствие (CO₂) ── */
.lp-co2-intro{max-width:76ch; margin:0 auto; text-align:center; font-size:var(--fs-body); line-height:1.6; color:var(--ink-2);}
.lp-co2-intro b{display:block; margin-bottom:var(--sp-sm); font-family:var(--f-display); font-size:var(--fs-h3); color:var(--navy); font-weight:800;}
.lp-co2-wrap{position:relative; margin-top:var(--sp-3xl); padding:var(--sp-2xl); border-radius:36px; background:var(--surface); box-shadow:0 30px 70px -40px rgba(13,35,80,.35); overflow:hidden;}
.lp-co2{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:var(--sp-2xl); align-items:start;}
.lp-co2-bgwave{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; filter:blur(5px);}
.lp-co2-col{position:relative; z-index:1; padding:var(--sp-2xl); border-radius:28px; border:none;}
.lp-co2-col--bad{background:linear-gradient(165deg,#FFE4D8,#FFF6F2 65%);}
.lp-co2-col--good{background:linear-gradient(165deg,#D9F2E2,#F3FBF5 65%);}
.lp-co2-head{display:flex; align-items:center; gap:var(--sp-sm); margin-bottom:var(--sp-lg);}
.lp-co2-ic{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:none;}
.lp-co2-ic--bad{background:#FBDAD2; color:#C84B2A;}
.lp-co2-ic--good{background:#D6F0DE; color:#1F8B4C;}
.lp-co2-head h3{font-family:var(--f-display); font-size:var(--fs-h4); font-weight:800;}
.lp-co2-col--bad .lp-co2-head h3{color:#A8391E;}
.lp-co2-col--good .lp-co2-head h3{color:#1A6B3C;}
.lp-co2-chain{display:flex; align-items:stretch; gap:var(--sp-xs); flex-wrap:wrap;}
.lp-co2-step{flex:1 1 0; min-width:108px; display:grid; justify-items:center; gap:var(--sp-sm); padding:var(--sp-xl) var(--sp-sm); border-radius:22px; background:var(--surface); box-shadow:0 10px 22px -16px rgba(13,35,80,.3); font-size:var(--fs-label); font-weight:700; color:var(--navy); line-height:1.3; text-align:center;}
.lp-co2-step-ic{flex:none; width:40px; height:40px; display:grid; place-items:center; font-weight:800; font-size:var(--fs-label);}
.lp-co2-step-ic svg{width:100%; height:100%; stroke-width:2.4;}
.lp-co2-step-ic--bad{color:#E0652E;}
.lp-co2-step-ic--good{color:#1F8B4C;}
.lp-co2-step-ic--co2{flex-direction:column; display:flex; align-items:center; justify-content:center; line-height:1; font-size:var(--fs-sec); font-weight:800; letter-spacing:-.02em;}
.lp-co2-step-ic--co2 i{font-style:normal; font-size:var(--fs-lead); margin-top:var(--sp-xs);}
.lp-co2-arrow{flex:none; align-self:center; display:grid; place-items:center; opacity:.95;}
.lp-co2-arrow svg{stroke-width:3;}
.lp-co2-arrow--bad{color:#E0652E;} .lp-co2-arrow--good{color:#1F8B4C;}
.lp-co2-list{position:relative; margin-top:var(--sp-xl); padding:0 var(--sp-xs); display:grid; gap:var(--sp-sm); font-size:var(--fs-small); color:var(--ink-2); font-weight:500;}
.lp-co2-list li{padding-left:var(--sp-lg); position:relative;}
.lp-co2-list li::before{content:""; position:absolute; left:0; top:.5em; width:7px; height:7px; border-radius:50%;}
.lp-co2-col--bad .lp-co2-list li::before{background:#D15A32;}
.lp-co2-col--good .lp-co2-list li::before{background:#1F8B4C;}
.lp-co2-list--stem::before{content:""; position:absolute; left:50%; top:-22px; transform:translateX(-50%); width:2px; height:16px;}
.lp-co2-list--stem::after{content:""; position:absolute; left:50%; top:-24px; transform:translateX(-50%); width:7px; height:7px; border-radius:50%;}
.lp-co2-col--bad .lp-co2-list--stem::before,.lp-co2-col--bad .lp-co2-list--stem::after{background:#E0693F;}
.lp-co2-col--good .lp-co2-list--stem::before,.lp-co2-col--good .lp-co2-list--stem::after{background:#2BA866;}
.lp-co2-center{position:relative; align-self:center; display:grid; justify-items:center; gap:var(--sp-sm); padding:var(--sp-sm) var(--sp-xs); text-align:center;}
.lp-co2-glow{position:absolute; border-radius:50%; filter:blur(26px); pointer-events:none; z-index:0;}
.lp-co2-glow--l{width:140px; height:200px; left:-26px; top:10%; background:radial-gradient(circle,rgba(224,105,63,.3),transparent 70%);}
.lp-co2-glow--r{width:140px; height:200px; right:-26px; bottom:4%; background:radial-gradient(circle,rgba(26,150,201,.3),transparent 70%);}
.lp-co2-wave{position:absolute; inset:-20px 0 0 0; width:100%; height:calc(100% + 20px); z-index:0; pointer-events:none;}
.lp-co2-lungs-wrap{position:relative; z-index:1; display:block; width:120px; height:auto; filter:drop-shadow(0 10px 20px rgba(13,99,214,.22));}
.lp-co2-badge{position:relative; z-index:1; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-display); font-weight:800; font-size:var(--fs-sec); background:linear-gradient(160deg,#EAF4FF,#D7ECFF); color:var(--navy); border:2px solid #fff; box-shadow:0 10px 22px -10px rgba(13,99,214,.45);}
.lp-co2-center p{position:relative; z-index:1; max-width:16ch; font-size:var(--fs-label); color:var(--ink-3); line-height:1.35;}
.lp-co2-note{position:relative; z-index:1; display:flex; align-items:center; gap:var(--sp-md); margin-top:var(--sp-2xl); padding:var(--sp-lg) var(--sp-2xl); border-radius:90px; background:var(--surface-2); box-shadow:var(--sh-1);}
.lp-co2-note svg{flex:none;}
.lp-co2-note .lp-co2-ic{width:40px; height:40px; background:var(--sky-2); color:var(--cta-a);}
.lp-co2-note p{font-weight:700; color:var(--navy); font-size:var(--fs-sec);}
@media (max-width:860px){
  .lp-co2{grid-template-columns:minmax(0,1fr);}
  .lp-co2-center{order:-1; flex-direction:row; display:flex; gap:var(--sp-md); align-items:center; justify-content:center; padding:var(--sp-md); border-radius:var(--r-lg); background:var(--surface-2);}
  .lp-co2-center p{max-width:none; text-align:left;}
}
@media (max-width:560px){
  .lp-co2-chain{flex-direction:column;}
  .lp-co2-step{width:100%;}
  .lp-co2-arrow{transform:rotate(90deg); margin:-2px auto;}
}
.lp-info b{display:block; font-size:var(--fs-lead); color:var(--navy);}

/* ── 2. проблема ── */
.lp-qgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-md); margin-top:var(--sp-2xl);}
.lp-q{display:flex; gap:var(--sp-md); align-items:flex-start; padding:var(--sp-lg) var(--sp-lg); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--sh-1); font-weight:600; line-height:1.4;}
.lp-q i{font-style:normal; width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft); color:var(--accent-dark); font-weight:800; font-size:var(--fs-small);}
.lp-two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-4xl); margin-top:var(--sp-4xl); align-items:start;}
.lp-prose h3{font-size:var(--fs-h3); color:var(--navy); margin-bottom:var(--sp-md);}
.lp-prose p{color:var(--ink-2);} .lp-prose p + p{margin-top:var(--sp-md);}
.lp-chain{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-sm) var(--sp-sm); margin:var(--sp-lg) 0 var(--sp-xs);}
.lp-chain span{padding:var(--sp-sm) var(--sp-md); border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border-strong); font-size:var(--fs-small); font-weight:700;}
.lp-chain i{font-style:normal; color:var(--ink-3);}
.lp-flow{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:var(--sp-3xl); align-items:center; margin-top:var(--sp-4xl); padding:var(--sp-3xl); border-radius:var(--r-xl); border:1px solid var(--border); box-shadow:var(--sh-2); background:linear-gradient(120deg,color-mix(in srgb,var(--sky-2) 60%,var(--surface)),var(--surface) 70%);}
.lp-chaos{position:relative; min-height:320px;}
.lp-bub{position:absolute; padding:var(--sp-sm) var(--sp-lg); border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border-strong); box-shadow:var(--sh-2); font-weight:800; font-size:var(--fs-sec); color:var(--navy); animation:float-bob 6s ease-in-out infinite;}
.lp-bub:nth-child(even){background:var(--accent-soft); animation-duration:7.4s; animation-delay:-2s;}
.lp-bub:nth-child(3n){background:var(--warning-soft); animation-delay:-3.5s;}
.lp-flow-arrow{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--cta-a),var(--cta-b)); box-shadow:var(--sh-2);}
.lp-formula{display:grid; gap:var(--sp-xs);}
.lp-fstep{display:flex; align-items:center; gap:var(--sp-md); padding:var(--sp-md) var(--sp-lg); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--sh-1); font-family:var(--f-display); font-weight:800; font-size:var(--fs-sec); letter-spacing:.03em; text-transform:uppercase; color:var(--navy);}
.lp-fdown{justify-self:center; color:var(--ink-3); line-height:1;}
.lp-flow-tag{grid-column:1/-1; text-align:center; font-size:var(--fs-small); color:var(--ink-2); font-weight:600; padding-top:var(--sp-xs);}
.lp-about{display:flex; gap:var(--sp-lg); align-items:flex-start; margin-top:var(--sp-4xl); padding:var(--sp-xl) var(--sp-xl); border-radius:var(--r-xl); box-shadow:var(--sh-2);}
.lp-about img{width:72px; height:72px; border-radius:50%; object-fit:cover; flex:none; border:3px solid #fff; box-shadow:var(--sh-2);}
.lp-about h3{font-size:var(--fs-h3); color:var(--navy);} .lp-about p{margin-top:var(--sp-sm); color:var(--ink-2);} .lp-about p b{color:var(--navy);}
.lp-reacts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-xl); margin-top:var(--sp-3xl);}
.lp-react{display:flex; flex-direction:column; border-radius:var(--r-xl); overflow:hidden; background:var(--surface); border:1px solid var(--border); box-shadow:var(--sh-2); transition:transform .2s ease, box-shadow .2s ease;}
.lp-react:hover{transform:translateY(-4px); box-shadow:var(--sh-3);}
.lp-vid{position:relative; display:block; width:100%; padding:0; border:0; background:var(--sky-2); cursor:pointer; overflow:hidden;}
.lp-vid img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:center 22%; transition:transform .5s ease;}
.lp-react:hover .lp-vid img{transform:scale(1.04);}
.lp-vid::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(13,35,80,.28));}
.lp-play{position:absolute; z-index:2; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; display:grid; place-items:center; color:var(--cta-a); background:rgba(255,255,255,.92); box-shadow:0 10px 30px -8px rgba(13,35,80,.55); transition:transform .2s ease;}
.lp-vid:hover .lp-play,.lp-vid:focus-visible .lp-play{transform:scale(1.12);}
.lp-loc{position:absolute; z-index:2; left:14px; top:14px; display:inline-flex; gap:var(--sp-xs); align-items:center; padding:var(--sp-xs) var(--sp-md); border-radius:var(--r-pill); font-size:var(--fs-label); font-weight:700; background:rgba(255,255,255,.9); color:var(--navy);}
.lp-react-body{display:flex; flex-direction:column; gap:var(--sp-sm); padding:var(--sp-lg) var(--sp-xl) var(--sp-xl); flex:1;}
.lp-react-body > b{font-size:var(--fs-body); color:var(--navy);}
.lp-react-body > b span{font-weight:500; color:var(--ink-2);}
.lp-react blockquote{margin:0; padding:var(--sp-md) var(--sp-lg); border-radius:var(--r-md); background:var(--accent-soft); font-family:var(--f-display); font-weight:700; font-size:var(--fs-lead); line-height:1.28; color:var(--navy);}
.lp-react-body .lp-small{flex:1;}

/* ── 3, 4. результат ── */
.lp-values .value h3{font-size:var(--fs-h3);}
.lp-values .ic{margin-bottom:var(--sp-lg);}
.lp-track{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--sp-sm) var(--sp-md); margin:0 0 var(--sp-2xl); font-family:var(--f-display); font-weight:800; letter-spacing:.05em; font-size:var(--fs-small); color:var(--navy);}
.lp-track span{padding:var(--sp-sm) var(--sp-lg); border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border-strong); box-shadow:var(--sh-1);}
.lp-track i{font-style:normal; color:var(--ink-3);}
.lp-zones{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-xl);}
.lp-zone{padding:var(--sp-2xl); border-radius:var(--r-xl); background:var(--surface); border:1px solid var(--border); box-shadow:var(--sh-2);}
/* Гигиена сеток и flex-строк: без min-width:0 блок с длинным словом
   («самостоятельность») не сжимается и растягивает страницу — на 320px это
   давало горизонтальную прокрутку. */
.lp-zones > *,.lp-zone,.lp-item,.lp-item > div{min-width:0;}
.lp-zone-title{display:inline-block; margin-bottom:var(--sp-lg); padding:var(--sp-xs) var(--sp-md); border-radius:var(--r-pill); font-size:var(--fs-label); font-weight:800; letter-spacing:.07em; text-transform:uppercase; background:var(--accent-soft); color:var(--accent-dark);}
.lp-zone--now .lp-zone-title{background:var(--success-soft); color:var(--success);}
.lp-item{display:flex; gap:var(--sp-md); align-items:flex-start;}
.lp-item + .lp-item{margin-top:var(--sp-lg); padding-top:var(--sp-lg); border-top:1px solid var(--border);}
.lp-item h3{font-size:var(--fs-h3); color:var(--navy);} .lp-item p{margin-top:var(--sp-xs); font-size:var(--fs-sec); color:var(--ink-2);}

/* ── 5. для кого ── */
.lp-age-num{font-family:var(--f-display); font-weight:800; font-size:var(--fs-display); line-height:1; letter-spacing:-.04em; background:linear-gradient(135deg,var(--cta-a),var(--cta-b)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.lp-tags{display:flex; flex-wrap:wrap; gap:var(--sp-sm); margin:var(--sp-md) 0 var(--sp-xs);}
.lp-tags span{padding:var(--sp-xs) var(--sp-md); border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-dark); font-weight:700; font-size:var(--fs-small);}
.lp-chips{display:flex; flex-wrap:wrap; gap:var(--sp-sm); margin-top:var(--sp-md);}
.lp-chips li{display:flex; gap:var(--sp-sm); align-items:center; padding:var(--sp-sm) var(--sp-lg); border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border-strong); font-size:var(--fs-sec); font-weight:600;}
.lp-chips svg{color:var(--success);}
.lp-subtitle{margin-top:var(--sp-3xl); font-size:var(--fs-h3); color:var(--navy);}

/* ── 6. программа ── */
.lp-ill{aspect-ratio:16/10; display:grid; place-items:center; border-radius:var(--r-md); margin-bottom:var(--sp-lg); background:linear-gradient(160deg,var(--sky-2),var(--sky-1) 70%,var(--surface)); color:var(--cta-a); position:relative; overflow:hidden;}
.lp-ill::before{content:""; position:absolute; inset:auto -10% -35% -10%; height:70%; border-radius:50%; background:radial-gradient(closest-side,rgba(255,255,255,.9),transparent);}
.lp-ill svg{position:relative;}
.lp-steps .card .lp-link{display:inline-flex; gap:var(--sp-xs); align-items:center; margin-top:var(--sp-md); font-weight:700; color:var(--accent-dark);}
.lp-steps .card .lp-link:hover{color:var(--accent);}
.lp-inside{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-lg); margin-top:var(--sp-lg);}
.lp-inside .card{display:flex; gap:var(--sp-md); align-items:flex-start;}
.lp-inside .card h3{font-size:var(--fs-h3); color:var(--navy);}
.lp-qa{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--sp-3xl); align-items:center; margin-top:var(--sp-4xl); padding:var(--sp-3xl); border-radius:var(--r-xl); border:1px solid var(--border); box-shadow:var(--sh-2); background:linear-gradient(120deg,color-mix(in srgb,var(--sky-2) 55%,var(--surface)),var(--surface));}
.lp-qa-big{font-family:var(--f-display); font-weight:800; font-size:var(--fs-display); line-height:1.02; letter-spacing:-.03em; color:var(--navy);}
.lp-qa-big span{color:var(--accent);}
.lp-qa details{border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--sh-1);}
.lp-qa details + details{margin-top:var(--sp-sm);}
.lp-qa summary,.lp-faq summary{cursor:pointer; list-style:none; position:relative; font-weight:700;}
.lp-qa summary{padding:var(--sp-md) var(--sp-3xl) var(--sp-md) var(--sp-lg);}
.lp-qa summary::-webkit-details-marker,.lp-faq summary::-webkit-details-marker{display:none;}
.lp-qa summary::after,.lp-faq summary::after{content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:var(--fs-h3); font-weight:500; color:var(--accent);}
.lp-qa details[open] summary::after,.lp-faq details[open] summary::after{content:"–";}
.lp-qa .lp-ans{padding:0 var(--sp-lg) var(--sp-lg); color:var(--ink-2); font-size:var(--fs-sec);}
.lp-devices{position:relative; margin-top:var(--sp-4xl); padding:var(--sp-4xl) var(--sp-3xl) var(--sp-4xl); border-radius:var(--r-xl); overflow:hidden; background:linear-gradient(160deg,var(--sky-2),var(--sky-1) 60%,#fff); border:1px solid var(--border); box-shadow:var(--sh-2);}
.lp-devices h3{font-size:var(--fs-h3); color:var(--navy); text-align:center; margin-bottom:var(--sp-xl);}
.lp-laptop{position:relative; width:min(760px,100%); margin-inline:auto;}
.lp-laptop-screen{padding:var(--sp-md); border-radius:16px 16px 6px 6px; background:#1A2330; box-shadow:var(--sh-3);}
.lp-laptop-inner{padding:var(--sp-md); border-radius:8px; background:var(--surface);}
.lp-laptop-inner > b{display:block; margin-bottom:var(--sp-sm); font-family:var(--f-display); color:var(--navy);}
.lp-thumbs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-sm);}
.lp-thumb{position:relative; display:block; padding:0; border:0; background:none; cursor:pointer; text-align:left;}
.lp-thumb img{display:block; width:100%; height:auto; aspect-ratio:16/11; object-fit:cover; border-radius:8px;}
.lp-thumb .lp-dot{position:absolute; left:8px; top:8px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.92); color:var(--cta-a);}
.lp-thumb span{display:block; margin-top:var(--sp-xs); font-size:var(--fs-label); font-weight:700; text-align:center; color:var(--navy);}
.lp-laptop-base{height:14px; margin:0 -4%; border-radius:0 0 18px 18px; background:linear-gradient(#C9D2DE,#9AA7B8);}
.lp-phone{position:absolute; right:clamp(8px,4vw,56px); bottom:clamp(10px,3vw,32px); width:clamp(120px,15vw,168px); padding:var(--sp-sm); border-radius:26px; background:#1A2330; box-shadow:var(--sh-3);}
.lp-phone-inner{padding:var(--sp-sm) var(--sp-sm); border-radius:20px; background:var(--surface);}
.lp-phone-inner > b{display:block; margin-bottom:var(--sp-xs); font-size:var(--fs-label); font-family:var(--f-display); color:var(--navy);}
.lp-phone .lp-thumbs{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-xs);}
.lp-phone .lp-thumb span{font-size:var(--fs-label); margin-top:var(--sp-xs);}

/* ── 7. тариф ── */
.lp-tariff{position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:var(--sp-4xl); max-width:1020px; margin-inline:auto; padding:var(--sp-4xl); border-radius:var(--r-xl); box-shadow:var(--sh-3);}
.lp-bubble{position:absolute; border-radius:50%; display:grid; place-items:center; font-family:var(--f-display); font-weight:800; color:rgba(60,110,170,.55); background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.98),rgba(190,225,250,.38) 62%,rgba(255,255,255,.1)); border:1px solid rgba(255,255,255,.85); box-shadow:inset 0 -8px 20px rgba(120,170,220,.25); pointer-events:none;}
.lp-tariff > *:not(.lp-bubble){position:relative;}
.lp-tariff h2{font-size:var(--fs-h2); color:var(--navy); margin-top:var(--sp-md);}
.lp-tariff ul{margin-top:var(--sp-lg); display:grid; gap:var(--sp-md);}
.lp-tariff li{display:flex; gap:var(--sp-sm); align-items:flex-start;}
.lp-tariff li svg{color:var(--success); margin-top:var(--sp-xs); flex:none;}
.lp-access{margin-top:var(--sp-xl); padding:var(--sp-lg) var(--sp-lg); border-radius:var(--r-lg); background:var(--surface-2); border:1px solid var(--border);}
.lp-access b{display:flex; align-items:center; gap:var(--sp-sm); color:var(--navy);}
.lp-access p{margin-top:var(--sp-xs); font-size:var(--fs-sec); color:var(--ink-2);}
.lp-tprice{align-self:center;}
.lp-tprice-top{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-sm);}
.lp-tprice s{font-size:var(--fs-h3); color:var(--ink-3);}
.lp-discount{padding:var(--sp-xs) var(--sp-md); border-radius:var(--r-pill); background:var(--success-soft); color:var(--success); font-weight:800; font-size:var(--fs-sec);}
.lp-tprice strong{display:block; margin-top:var(--sp-xs); font-family:var(--f-display); font-size:var(--fs-price); line-height:1.02; letter-spacing:-.03em; color:var(--navy);}
.lp-tprice p{margin-top:var(--sp-sm); font-size:var(--fs-sec); color:var(--ink-2);}
.lp-count{display:flex; gap:var(--sp-sm); margin-top:var(--sp-lg);}
.lp-cd{min-width:62px; padding:var(--sp-sm) var(--sp-xs); text-align:center; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border); box-shadow:var(--sh-1);}
.lp-cd b{display:block; font-family:var(--f-display); font-size:var(--fs-h3); line-height:1.1; font-variant-numeric:tabular-nums; color:var(--navy);}
.lp-cd span{font-size:var(--fs-label); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);}
.lp-tprice .btn{width:100%; margin-top:var(--sp-lg);}
.lp-tprice small{display:block; margin-top:var(--sp-md); font-size:var(--fs-small); color:var(--ink-3);}

/* ── 8. автор ── */
.lp-author{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--sp-4xl); align-items:start;}
.lp-author-photo{position:sticky; top:96px; margin:0;}
.lp-author-photo .lp-pframe{border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-3); border:1px solid var(--border);}
.lp-author-photo img{display:block; width:100%; height:auto;}
.lp-author-photo figcaption{margin-top:var(--sp-md); padding:var(--sp-md) var(--sp-lg); border-radius:var(--r-lg); font-size:var(--fs-small); line-height:1.55;}
.lp-author-photo figcaption b{display:block; font-size:var(--fs-lead); color:var(--navy);}
.lp-marks{display:grid; gap:var(--sp-md); margin-top:var(--sp-xl);}
.lp-mark{display:flex; gap:var(--sp-md); align-items:flex-start; padding:var(--sp-lg) var(--sp-lg); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--sh-1);}
.lp-mark b{display:block; color:var(--navy);} .lp-mark p{margin-top:var(--sp-xs); font-size:var(--fs-sec); color:var(--ink-2);}
.lp-dark{margin-top:var(--sp-3xl); padding:var(--sp-3xl); border-radius:var(--r-xl); background:var(--navy); color:#fff; position:relative; overflow:hidden;}
.lp-dark::after{content:""; position:absolute; right:-6%; bottom:-60%; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,var(--accent),transparent 68%); opacity:.5;}
.lp-dark p{position:relative; z-index:1; font-family:var(--f-display); font-weight:800; font-size:var(--fs-h2); line-height:1.2; letter-spacing:-.015em; max-width:28ch;}

/* ── 9. отзывы ── */
.lp-reviews{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-xl); margin-top:var(--sp-2xl);}
.lp-ribbon{display:flex; gap:var(--sp-lg); overflow-x:auto; margin-top:var(--sp-xl); padding:var(--sp-xs) var(--sp-xs) var(--sp-md); scroll-snap-type:x proximity; scrollbar-width:thin;}
.lp-mini{flex:1 0 min(250px,74%); scroll-snap-align:start; border-radius:var(--r-lg); overflow:hidden; background:var(--surface); border:1px solid var(--border); box-shadow:var(--sh-1); transition:transform .2s ease, box-shadow .2s ease;}
.lp-mini:hover{transform:translateY(-3px); box-shadow:var(--sh-2);}
.lp-mini .lp-vid img{aspect-ratio:16/10;}
.lp-mini .lp-play{width:44px; height:44px; margin:-22px 0 0 -22px;}
.lp-mini div.lp-mini-body{padding:var(--sp-md) var(--sp-md) var(--sp-md);}
.lp-mini b{display:block; font-size:var(--fs-sec); color:var(--navy);} .lp-mini span{display:block; margin-top:var(--sp-xs); font-size:var(--fs-label); color:var(--ink-2);}
.lp-trustline{margin-top:var(--sp-xl); font-weight:600; color:var(--ink-2);}
.lp-final{margin-top:var(--sp-4xl);}
.lp-final .cta h2{max-width:22ch;}

/* ── 10. вопросы ── */
.lp-faq{max-width:840px; margin-top:var(--sp-2xl); display:grid; gap:var(--sp-md);}
.lp-faq details{border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--sh-1);}
.lp-faq summary{padding:var(--sp-lg) var(--sp-4xl) var(--sp-lg) var(--sp-xl);}
.lp-faq .lp-answer{padding:0 var(--sp-xl) var(--sp-xl); color:var(--ink-2);}
.lp-support{margin-top:var(--sp-2xl); display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-md) var(--sp-xl);}

/* ── подвал ── */
.lp-footer .footer-grid{grid-template-columns:1.5fr 1fr 1.2fr 1.3fr;}
.lp-legal{margin-top:var(--sp-md); font-size:var(--fs-small); color:var(--ink-2); line-height:1.6;}

/* ── видео-окно ── */
.modal--video{width:min(940px,100%); padding:0; overflow:hidden; background:#0B1220; border-color:transparent;}
.lp-video-head{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-md); padding:var(--sp-md) var(--sp-md) var(--sp-md) var(--sp-xl); color:#fff;}
.lp-video-head b{font-family:var(--f-display);}
.lp-video-head .modal-close{color:#fff;} .lp-video-head .modal-close:hover{background:rgba(255,255,255,.15); color:#fff;}
.lp-video-frame{position:relative; aspect-ratio:16/9; background:#0B1220;}
.lp-video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.lp-video-empty{position:absolute; inset:0; display:grid; place-items:center; padding:var(--sp-xl); text-align:center; color:#C9D3E3; font-size:var(--fs-sec);}

/* ── липкая кнопка на телефоне ── */
.lp-sticky{position:fixed; left:12px; right:12px; bottom:12px; z-index:70; display:none; align-items:center; justify-content:space-between; gap:var(--sp-md); padding:var(--sp-sm) var(--sp-sm) var(--sp-sm) var(--sp-lg); border-radius:var(--r-xl); box-shadow:var(--sh-3); transform:translateY(130%); transition:transform .3s ease;}
.lp-sticky.show{transform:none;}
.lp-sticky b{display:block; font-family:var(--f-display); font-size:var(--fs-h4); color:var(--navy); line-height:1.1;}
.lp-sticky small{font-size:var(--fs-label); color:var(--ink-2);}

/* ── адаптация ── */
@media (max-width:1180px){
}
@media (max-width:1080px){
  .lp-reviews{grid-template-columns:1fr 1fr;}
}
@media (max-width:920px){
  .lp-two,.lp-flow,.lp-zones,.lp-tariff,.lp-author,.lp-qa,.lp-reacts{grid-template-columns:minmax(0,1fr);}
  .lp-flow-arrow{transform:rotate(90deg); justify-self:center;}
  .lp-qgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lp-author-photo{position:static; max-width:440px;}
  .lp-sticky{display:flex;}
  .lp-phone{display:none;}
}
@media (max-width:640px){
  .lp-qgrid,.lp-inside{grid-template-columns:minmax(0,1fr);}
  .lp-q--extra{display:none;}
  .lp-chaos{min-height:290px;}
  .lp-reviews{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:var(--sp-md); padding-bottom:var(--sp-md); margin-inline:-20px; padding-inline:var(--sp-xl);}
  .lp-reviews .lp-react{flex:0 0 84%; scroll-snap-align:center;}
  .btn--xl{width:100%;}
  .lp-thumbs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lp-footer .footer-grid{grid-template-columns:minmax(0,1fr);}
  .nav .brand{font-size:var(--fs-small); gap:var(--sp-sm); white-space:nowrap;}
  .lp-obubble{transform:scale(.55); transform-origin:top right; opacity:.85; z-index:0; pointer-events:none;}
  .lp-obubble.lp-ob-l{transform-origin:bottom left;}
  .nav-actions .btn--cta{display:none;} /* на телефоне есть липкая кнопка снизу */
  main{padding-bottom:var(--sp-6xl);}
}
@media (prefers-reduced-motion: reduce){ .lp-bub,.lp-fl{animation:none;} }

.lp-final .cta{background:var(--navy);}
.lp-photo figcaption{max-width:calc(100% - 32px);}

@media (max-width:1100px){
  .lp-feats{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:860px){
  .lp-mock{grid-template-columns:minmax(0,1fr); grid-template-areas:"photo" "gold" "sub" "tiles" "cta" "price";}
  .lp-m-photo{grid-area:photo; aspect-ratio:1.1;}
  .lp-m-photo img{width:190%; max-width:none; object-position:left center;}
  .lp-m-gold{border-radius:70px;}
  .lp-biohack{border-radius:26px; flex-wrap:wrap;}
  .lp-biohack-leaf{display:none;}
}
@media (max-width:640px){
  .lp-tiles{grid-template-columns:1fr 1fr;}
  .lp-tile{flex-direction:column; align-items:flex-start;}
  .lp-feats{grid-template-columns:1fr 1fr; gap:var(--sp-sm);}
  .lp-feat{flex-direction:column; align-items:flex-start;}
  .lp-m-gold svg:first-child{width:62px; height:62px;}
  .lp-m-gold .lp-laurel{display:none;}
  .lp-m-price{grid-template-columns:minmax(0,1fr); gap:var(--sp-sm);}
  .lp-m-price::before{display:none;}
  .lp-mp-l,.lp-mp-r{grid-column:1; grid-row:auto;}
}

/* ═══ экран 9 — отзывы (макет заказчика) ═══ */
.lp-rev{position:relative; isolation:isolate; overflow:clip; background:linear-gradient(180deg,#EAF4FC 0%,#F2F8FD 60%,var(--bg) 100%);}
.lp-rev-decor{position:absolute; z-index:-1; pointer-events:none;}
.lp-rev-head{position:relative; text-align:center; max-width:1000px; margin:0 auto var(--sp-3xl);}
.lp-over{display:flex; align-items:center; justify-content:center; gap:var(--sp-lg); font-size:var(--fs-label); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#6C93C4;}
.lp-over i{display:block; width:clamp(30px,8vw,90px); height:2px; background:linear-gradient(90deg,transparent,#2F7FD1);}
.lp-over i:last-child{background:linear-gradient(270deg,transparent,#2F7FD1);}
.lp-rev-head h2{margin-top:var(--sp-md); font-size:var(--fs-h2); color:var(--navy); letter-spacing:-.03em;}
.lp-rev-head h2 em{font-style:normal; font-family:inherit; color:#1E7BEA;}
.lp-rev-head p.lp-sub{margin-top:var(--sp-sm); font-size:var(--fs-lead); font-weight:500; color:#31405A;}
.lp-script{position:absolute; right:clamp(-120px,-8vw,-20px); top:-14px; width:clamp(90px,12vw,150px); height:auto; mix-blend-mode:multiply; pointer-events:none;}
.lp-rcards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-xl);}
.lp-rcard{display:flex; flex-direction:column; padding:var(--sp-sm); border-radius:28px; background:rgba(255,255,255,.96); border:1px solid #fff; box-shadow:0 22px 44px -26px rgba(13,35,80,.5); transition:transform .2s ease;}
.lp-rcard:hover{transform:translateY(-4px);}
.lp-rphoto{position:relative; display:block; width:100%; padding:0; border:0; border-radius:20px; overflow:hidden; background:var(--sky-2); cursor:pointer;}
.lp-rphoto img{display:block; width:100%; height:auto; aspect-ratio:16/10.4; object-fit:cover; object-position:center 22%;}
.lp-rplay{position:absolute; left:12px; bottom:12px; width:clamp(48px,4.6vw,60px); height:clamp(48px,4.6vw,60px); border-radius:50%; display:grid; place-items:center; color:#1E7BEA; background:rgba(255,255,255,.94); box-shadow:0 8px 22px -6px rgba(13,35,80,.5); transition:transform .2s ease;}
.lp-rphoto:hover .lp-rplay,.lp-rphoto:focus-visible .lp-rplay{transform:scale(1.1);}
.lp-rloc{position:absolute; left:12px; top:12px; display:inline-flex; align-items:center; gap:var(--sp-xs); padding:var(--sp-xs) var(--sp-md) var(--sp-xs) var(--sp-sm); border-radius:20px; font-size:var(--fs-label); font-weight:700; background:rgba(255,255,255,.94); color:var(--navy);}
.lp-rbody{padding:var(--sp-md) var(--sp-md) var(--sp-md); display:flex; flex-direction:column; gap:var(--sp-sm); flex:1;}
.lp-rname{font-weight:800; font-size:var(--fs-h4); color:var(--navy);}
.lp-rname span{font-weight:500; color:#5C6B83; font-size:.92em;}
.lp-rquote{display:flex; gap:var(--sp-md); align-items:flex-start; padding:var(--sp-md) var(--sp-lg); border-radius:16px; background:#E9F2FD; font-style:italic; font-size:var(--fs-lead); line-height:1.3; font-weight:500; color:#1B2B4B; min-height:84px; align-items:center;}
.lp-rquote svg{flex:none; margin-top:var(--sp-xs);}
.lp-rnote{font-size:var(--fs-label); color:var(--ink-3);}
.lp-rib{display:flex; gap:var(--sp-lg); overflow-x:auto; margin-top:var(--sp-xl); padding:var(--sp-xs) var(--sp-xs) var(--sp-md); scroll-snap-type:x proximity; scrollbar-width:thin;}
.lp-mini2{flex:1 0 min(320px,82%); scroll-snap-align:start; display:flex; gap:var(--sp-lg); align-items:center; padding:var(--sp-sm) var(--sp-lg) var(--sp-sm) var(--sp-sm); border-radius:20px; background:rgba(255,255,255,.96); border:1px solid #fff; box-shadow:0 14px 28px -22px rgba(13,35,80,.5);}
.lp-mini2 .lp-rphoto{width:clamp(120px,10vw,150px); flex:none; border-radius:18px;}
.lp-mini2 .lp-rphoto img{aspect-ratio:1; }
.lp-mini2 .lp-rplay{left:8px; bottom:8px; width:44px; height:44px;}
.lp-mini2 .lp-rplay svg{width:20px; height:20px;}
.lp-mini2 b{display:block; font-size:var(--fs-body); color:var(--navy);} .lp-mini2 span.lp-d{display:block; margin-top:var(--sp-xs); font-size:var(--fs-small); color:#5C6B83; line-height:1.3;}
/* Цитата участника в компактной карточке: у больших карточек для неё есть
   .lp-rquote, в ленте отзывы шли без слов человека — только имя и проблема. */
.lp-mini2 .lp-mq{display:block; margin-top:var(--sp-sm); font-style:italic; font-size:var(--fs-small); line-height:1.35; color:#2A3752;}
/* Отзывов стало пять — на широком экране они не помещаются в одну строку,
   и последние уезжали в горизонтальную прокрутку, то есть оставались
   невидимыми. На десктопе лента переносится, карусель остаётся на телефоне. */
@media (min-width:1080px){
  .lp-rib{flex-wrap:wrap; overflow-x:visible;}
  .lp-mini2{flex:1 1 calc(50% - var(--sp-lg));}
}
.lp-rstrip{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:var(--sp-xl); padding:var(--sp-md) var(--sp-2xl); border-radius:60px; background:rgba(255,255,255,.88); border:1px solid #fff; box-shadow:0 16px 34px -26px rgba(13,35,80,.5);}
.lp-rs{display:flex; align-items:center; gap:var(--sp-md); padding:0 var(--sp-lg);}
.lp-rs + .lp-rs{border-left:1px solid #DCE5F1;}
.lp-rs-ic{width:clamp(42px,4vw,52px); height:clamp(42px,4vw,52px); border-radius:50%; display:grid; place-items:center; flex:none; box-shadow:0 8px 16px -8px rgba(13,35,80,.5);}
.lp-rs-ic--b{background:linear-gradient(180deg,#3C9BFA,#1565D8);} .lp-rs-ic--r{background:linear-gradient(180deg,#FF6B70,#E0323C);} .lp-rs-ic--g{background:linear-gradient(180deg,#3CCB80,#149A55);} .lp-rs-ic--v{background:linear-gradient(180deg,#A877F6,#6C3FD8);}
.lp-rs b{display:block; font-size:var(--fs-body); color:var(--navy);} .lp-rs div span{display:block; font-size:var(--fs-small); color:#7A869B;}
.lp-rbar{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-lg); flex-wrap:wrap; margin-top:var(--sp-lg); padding:var(--sp-lg) var(--sp-xl) var(--sp-lg) var(--sp-2xl); border-radius:60px; background:rgba(255,255,255,.9); border:1px solid #fff; box-shadow:0 16px 34px -26px rgba(13,35,80,.5);}
.lp-rbar-l{display:flex; align-items:center; gap:var(--sp-lg); font-size:var(--fs-small); color:#5C6B83;}
.lp-rbar-l b{display:block; font-size:var(--fs-lead); color:var(--navy);}
.lp-rbar-line{flex:1; min-width:30px; height:2px; background:linear-gradient(90deg,transparent,#8FBBEE); position:relative; max-width:200px;}
.lp-rbar-line::after{content:""; position:absolute; right:0; top:-4px; width:9px; height:9px; border-top:2px solid #8FBBEE; border-right:2px solid #8FBBEE; transform:rotate(45deg);}
.lp-gcta{display:inline-flex; align-items:center; gap:var(--sp-md); padding:0 var(--sp-xl); min-height:clamp(54px,5.2vw,68px); border-radius:40px; color:#fff; font-family:var(--f-display); font-weight:800; font-size:var(--fs-h4); background:linear-gradient(180deg,#3FCC7E,#139A55); box-shadow:inset 0 2px 0 rgba(255,255,255,.4), 0 16px 30px -14px rgba(19,154,85,.7); transition:transform .15s ease, filter .15s ease;}
.lp-gcta:hover{transform:translateY(-2px); filter:brightness(1.06);}
.lp-trustline{margin-top:var(--sp-xl); font-weight:600; color:var(--ink-2); text-align:center;}

/* ═══ экран 7 — тариф (макет заказчика) ═══ */
.lp-tarif{position:relative; isolation:isolate; overflow:clip; background:linear-gradient(180deg,var(--bg),#EAF4FD 50%,var(--bg));}
.lp-tcard{position:relative; max-width:1080px; margin-inline:auto; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); border-radius:34px; background:rgba(255,255,255,.92); border:1px solid #fff; box-shadow:0 40px 80px -40px rgba(13,35,80,.45); }
/* Пузыри O₂ намеренно выступают за карточку (right:-42px). На странице
   тарифа их гасит `overflow:clip` у секции, а там, где карточка стоит
   внутри обычной секции, выступающий декор растягивал документ и давал
   горизонтальную прокрутку всей страницы. */
.section:has(.lp-tcard){overflow:clip;}
.lp-tcard > .lp-tl,.lp-tcard > .lp-tr{position:relative; z-index:2;}
.lp-tl{padding:var(--sp-4xl) var(--sp-2xl) var(--sp-4xl) clamp(80px,9.5vw,138px);}
.lp-tr{padding:var(--sp-4xl) var(--sp-3xl); border-left:1px solid #E4EBF4; margin-left:0; align-self:center;}
.lp-tover{font-size:var(--fs-label); letter-spacing:.2em; text-transform:uppercase; color:#8B97AA; font-weight:600;}
.lp-tl h2{margin-top:var(--sp-md); font-size:var(--fs-h2); color:#101A33; letter-spacing:-.02em;}
.lp-tl ul{margin-top:var(--sp-xl); display:grid; gap:var(--sp-md);}
.lp-tl li{display:flex; align-items:center; gap:var(--sp-md); font-size:var(--fs-lead); color:#2A3752;}
.lp-tl li svg{flex:none;}
.lp-taccess{display:flex; gap:var(--sp-lg); align-items:flex-start; margin-top:var(--sp-xl); padding-top:var(--sp-xl); border-top:1px solid #E4EBF4;}
.lp-taccess-ic{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:#E5F0FD; flex:none;}
.lp-taccess b{display:block; font-size:var(--fs-lead); color:#101A33;} .lp-taccess p{margin-top:var(--sp-xs); font-size:var(--fs-sec); color:#667590; line-height:1.5;}
.lp-tr s{display:block; font-size:var(--fs-h3); color:#8F9AAD; font-weight:600;}
.lp-tprice{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-md) var(--sp-lg);}
.lp-tprice strong{font-family:var(--f-display); font-size:var(--fs-price); line-height:1.02; letter-spacing:-.03em; color:#0F1830;}
.lp-tchip{padding:var(--sp-sm) var(--sp-xl); border-radius:30px; font-family:var(--f-display); font-weight:800; font-size:var(--fs-h3); color:#0E8A3D; background:linear-gradient(180deg,#E0F8E9,#C2F0D3);}
.lp-tr .lp-tb{margin-top:var(--sp-md); font-weight:800; font-size:var(--fs-lead); color:#101A33;}
.lp-tr .lp-tt{margin-top:var(--sp-sm); font-size:var(--fs-sec); color:#6B7890; line-height:1.55;}
.lp-tr .lp-bcta:disabled{opacity:1; cursor:default; filter:none; transform:none;}
.lp-bcta{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-md); width:100%; margin-top:var(--sp-xl); padding:0 var(--sp-xl) 0 var(--sp-2xl); min-height:clamp(58px,5.4vw,72px); border-radius:50px; color:#fff; font-family:var(--f-display); font-weight:800; font-size:var(--fs-lead); letter-spacing:.04em; text-transform:uppercase; background:linear-gradient(100deg,#1366E8 0%,#13A9D8 70%,#2FD3B4 100%); box-shadow:0 22px 40px -16px rgba(19,110,232,.7); transition:transform .15s ease, filter .15s ease;}
.lp-bcta:hover{transform:translateY(-2px); filter:brightness(1.06);}
.lp-tstart{display:flex; align-items:center; gap:var(--sp-md); margin-top:var(--sp-xl); font-size:var(--fs-sec); color:#485773;}
.lp-count{display:flex; gap:var(--sp-sm); margin-top:var(--sp-lg);}
.lp-cd{min-width:58px; padding:var(--sp-sm) var(--sp-xs); text-align:center; border-radius:14px; background:#fff; border:1px solid #E1EAF5; box-shadow:0 8px 16px -12px rgba(13,35,80,.4);}
.lp-cd b{display:block; font-family:var(--f-display); font-size:var(--fs-h4); line-height:1.1; font-variant-numeric:tabular-nums; color:var(--navy);}
.lp-cd span{font-size:var(--fs-label); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#8B97AA;}
.lp-obubble{position:absolute; border-radius:50%; display:grid; place-items:center; font-family:var(--f-display); font-weight:500; color:rgba(70,120,180,.6); background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.98) 0,rgba(205,232,252,.55) 45%,rgba(160,205,240,.35) 72%,rgba(255,255,255,.55) 100%); border:1.5px solid rgba(255,255,255,.95); box-shadow:inset 0 -10px 24px rgba(110,170,225,.3), 0 14px 30px -14px rgba(70,130,200,.45); pointer-events:none; z-index:3;}
.lp-obubble sub{font-size:.52em; vertical-align:-.18em; line-height:0;}
.lp-tbranch{position:absolute; left:-18px; bottom:-8px; z-index:1; pointer-events:none;}
.lp-tswirl{position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:34px; overflow:hidden;}

/* ═══ экран 8 — автор (макет заказчика) ═══ */
.lp-authorbox{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-3xl); align-items:center; padding:var(--sp-2xl); border-radius:34px; overflow:hidden;
  background:radial-gradient(60% 70% at 100% 0%,rgba(190,225,250,.6),transparent 70%), radial-gradient(50% 60% at 0% 100%,rgba(205,240,215,.7),transparent 70%), linear-gradient(135deg,#F2F9FF,#EAF6F0); border:1px solid #fff; box-shadow:0 30px 60px -36px rgba(13,35,80,.5);}
.lp-aphoto{margin:0; align-self:stretch; border-radius:26px; overflow:hidden; position:relative; min-height:360px; box-shadow:0 22px 44px -26px rgba(13,35,80,.5);}
.lp-aphoto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%;}
.lp-aphoto svg{position:absolute; left:-18px; bottom:-18px; pointer-events:none; opacity:.8; filter:blur(1.2px);}
.lp-atitle{font-family:var(--f-body); font-weight:700; font-size:var(--fs-display); line-height:1; letter-spacing:-.02em; color:#0B2B4E;}
.lp-asub{margin-top:var(--sp-md); font-size:var(--fs-h4); color:#2D3E5C;}
.lp-apills{display:grid; gap:var(--sp-md); margin-top:var(--sp-xl);}
.lp-apill{display:flex; align-items:center; gap:var(--sp-lg); padding:var(--sp-md) var(--sp-xl) var(--sp-md) var(--sp-md); border-radius:22px; background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.95); box-shadow:0 12px 26px -20px rgba(13,35,80,.5); font-size:var(--fs-lead); color:#1B2B4B; line-height:1.35; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
.lp-apill b{font-weight:800;}
.lp-apill-ic{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; flex:none;}
.lp-apill-ic--g{background:#DDF3E5;} .lp-apill-ic--b{background:#DCEBFA;} .lp-apill-ic--y{background:#FBEBC9;} .lp-apill-ic--r{background:#FBE0E4;}
.lp-aline{margin-top:var(--sp-lg); padding-top:var(--sp-md); border-top:1px solid #D5E2EF; font-size:var(--fs-small); color:#4A5B78;}
.lp-abig{display:flex; align-items:center; gap:var(--sp-lg); margin-top:var(--sp-lg); padding:var(--sp-lg) var(--sp-xl); border-radius:22px; background:rgba(255,255,255,.72); border:1px solid #fff; box-shadow:0 14px 28px -22px rgba(13,35,80,.5);}
.lp-abig p{font-family:var(--f-body); font-weight:700; font-size:var(--fs-h3); line-height:1.25; color:#0B2B4E;}
.lp-atext{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-4xl); margin-top:var(--sp-4xl); align-items:start;}
.lp-atext .lp-marks{margin-top:0;}
@media (max-width:1100px){ .lp-rstrip{grid-template-columns:1fr 1fr; border-radius:30px; row-gap:var(--sp-md);} .lp-rs:nth-child(3){border-left:0;} }
@media (max-width:920px){
  .lp-rcards{grid-template-columns:1fr 1fr;}
  .lp-tcard{grid-template-columns:minmax(0,1fr);}
  .lp-tl{padding-left:var(--sp-3xl); padding-bottom:var(--sp-xl);}
  .lp-tr{border-left:0; border-top:1px solid #E4EBF4;}
  .lp-authorbox{grid-template-columns:minmax(0,1fr);}
  .lp-aphoto{min-height:0; aspect-ratio:3/3.2;}
  .lp-atext{grid-template-columns:minmax(0,1fr);}
  .lp-script{display:none;}
}
@media (max-width:640px){
  .lp-rcards{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:var(--sp-md); margin-inline:-20px; padding:var(--sp-xs) var(--sp-xl) var(--sp-md);}
  .lp-rcard{flex:0 0 84%; scroll-snap-align:center;}
  .lp-rstrip{grid-template-columns:minmax(0,1fr); border-radius:24px;} .lp-rs + .lp-rs{border-left:0;}
  .lp-rbar{border-radius:28px; flex-direction:column; align-items:stretch;} .lp-rbar-line{display:none;} .lp-gcta{justify-content:center;}
  .lp-tbranch,.lp-obubble.lp-ob-l{display:none;}
  .lp-tl{padding-left:var(--sp-xl);}
}

/* ═══ карточки макетов: шаги, цитаты, вопросы-ответы, формула ═══ */
/* шаги «Смотреть / Наблюдать / Применять» (макеты 18, 22, 19) */
.lp-sgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-xl); margin-top:var(--sp-2xl);}
.lp-scard{position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:30px; background:linear-gradient(180deg,#FFFFFF,#F1F7FD); border:1px solid #fff; box-shadow:0 30px 56px -34px rgba(13,35,80,.5); min-height:clamp(420px,36vw,520px); transition:transform .2s ease;}
.lp-scard:hover{transform:translateY(-5px);}
.lp-scard-top{padding:var(--sp-2xl) var(--sp-2xl) 0; position:relative; z-index:2;}
.lp-scard h3{font-family:var(--f-display); font-weight:800; font-size:var(--fs-h1); line-height:1; letter-spacing:-.025em; text-transform:uppercase; color:#0F2A5C;}
.lp-scard-top p{margin-top:var(--sp-md); font-weight:700; font-size:var(--fs-h4); color:#3A4C6B; line-height:1.3;}
.lp-scard-top p + p{margin-top:var(--sp-sm); font-weight:500; font-size:var(--fs-body); color:#7A89A3;}
.lp-scene{position:relative; flex:1; margin-top:var(--sp-md); min-height:200px;}
.lp-scene svg{position:absolute; inset:0; width:100%; height:100%;}
.lp-scard a.lp-sgo{position:absolute; inset:0; z-index:3; border-radius:30px;}
.lp-scard a.lp-sgo:focus-visible{outline:3px solid var(--accent); outline-offset:-3px;}

/* карточки-цитаты Ольги и Кристины (макеты 17, 25) */
.lp-qcards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-xl); margin-top:var(--sp-3xl);}
.lp-qcard{position:relative; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:var(--sp-xl); padding:var(--sp-md); border-radius:30px; overflow:hidden; background:linear-gradient(135deg,#FFFFFF 40%,#EAF4FD); border:1px solid #fff; box-shadow:0 30px 56px -34px rgba(13,35,80,.5);}
.lp-qcard::after{content:""; position:absolute; right:-6%; bottom:-30%; width:70%; height:70%; border-radius:50%; background:radial-gradient(closest-side,rgba(160,205,245,.4),transparent); pointer-events:none;}
.lp-qcard .lp-rphoto{border-radius:22px; height:100%; min-height:260px;}
.lp-qcard .lp-rphoto img{position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; object-position:center 20%;}
.lp-qtext{position:relative; z-index:1; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:var(--sp-md) var(--sp-lg) var(--sp-md) 0;}
.lp-qtext .lp-qm{margin-bottom:var(--sp-xs);}
.lp-qtext blockquote{margin:0; overflow-wrap:anywhere; font-family:var(--f-display); font-weight:800; font-size:var(--fs-h2); line-height:1.1; letter-spacing:-.02em; color:#0F2A5C;}
.lp-qtext blockquote em{font-style:normal; font-family:inherit; color:#1E8AB8;}
.lp-qtext .lp-qwho{margin-top:var(--sp-md); padding-top:var(--sp-md); border-top:1px solid #DCE6F2; font-weight:800; font-size:var(--fs-body); color:#0F2A5C;}
.lp-qtext .lp-qwho span{display:block; margin-top:var(--sp-xs); font-weight:500; font-size:var(--fs-small); color:#5C6B83;}
.lp-qchip{display:flex; align-items:center; gap:var(--sp-md); margin-top:var(--sp-md); padding:var(--sp-sm) var(--sp-md); border-radius:16px; background:rgba(255,255,255,.85); border:1px solid #E3ECF7; font-size:var(--fs-small); line-height:1.35; color:#3A4C6B;}
.lp-qchip svg{flex:none;}
.lp-qcard .lp-rplay{left:10px; bottom:10px;}

/* вопросы и ответы (макет 23) */
.lp-qb{position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--sp-3xl); align-items:center; margin-top:var(--sp-4xl); padding:var(--sp-3xl); border-radius:34px; overflow:hidden; background:radial-gradient(60% 80% at 100% 50%,rgba(190,225,250,.7),transparent 70%), linear-gradient(135deg,#FFFFFF,#EAF3FD); border:1px solid #fff; box-shadow:0 30px 56px -34px rgba(13,35,80,.45);}
.lp-qb-big{font-family:var(--f-display); font-weight:800; font-size:var(--fs-display); line-height:.98; letter-spacing:-.035em; color:#0B1F4B; text-transform:uppercase;}
.lp-qb-big span{display:block; color:#1E7BEA;}
.lp-qb-sub{margin-top:var(--sp-md); font-size:var(--fs-lead); color:#3A4C6B; max-width:44ch;}
.lp-qchips{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-md); margin-top:var(--sp-xl);}
.lp-qpill{display:flex; align-items:center; gap:var(--sp-md); padding:var(--sp-md) var(--sp-lg); border-radius:20px; background:rgba(255,255,255,.88); border:1px solid #fff; box-shadow:0 12px 24px -18px rgba(13,35,80,.5); font-weight:600; font-size:var(--fs-body); line-height:1.3; color:#1B2B4B; text-align:left; cursor:pointer; transition:transform .15s ease;}
.lp-qpill:hover{transform:translateY(-2px);}
.lp-qpill svg{flex:none;}
.lp-qb-art{position:relative; min-height:230px;}
.lp-qb-art .lp-qbub{position:absolute; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.98),rgba(210,232,252,.7) 60%,rgba(180,215,245,.5)); border:1.5px solid rgba(255,255,255,.95); box-shadow:inset 0 -10px 24px rgba(110,170,225,.25), 0 22px 40px -22px rgba(70,130,200,.6); font-family:var(--f-display); font-weight:800; color:#2F8AF0;}
.lp-qb-list{margin-top:var(--sp-lg);}
.lp-qb-list details{border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--sh-1);}
.lp-qb-list details + details{margin-top:var(--sp-sm);}
.lp-qb-list summary{cursor:pointer; list-style:none; position:relative; padding:var(--sp-md) var(--sp-3xl) var(--sp-md) var(--sp-lg); font-weight:700;}
.lp-qb-list summary::-webkit-details-marker{display:none;}
.lp-qb-list summary::after{content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:var(--fs-h3); font-weight:500; color:var(--accent);}
.lp-qb-list details[open] summary::after{content:"–";}
.lp-qb-list .lp-ans{padding:0 var(--sp-lg) var(--sp-lg); color:var(--ink-2); font-size:var(--fs-sec);}

/* хаос → принцип (макет 21) */
.lp-fstep .lp-fic{width:54px; height:54px; border-radius:50%; display:grid; place-items:center; flex:none;}
.lp-fic--g{background:#DDF3E5;} .lp-fic--b{background:#DCEBFA;} .lp-fic--y{background:#FBEBC9;} .lp-fic--r{background:#FBE0E4;}
.lp-fstep{border-radius:24px; padding:var(--sp-md) var(--sp-xl) var(--sp-md) var(--sp-md);}
.lp-fdown{color:#E4474F; font-size:var(--fs-lead);}
.lp-bub{text-transform:uppercase; letter-spacing:.02em; font-weight:800; font-size:var(--fs-small); border-radius:18px;}
.lp-bub:nth-child(odd){transform:rotate(-3deg);} .lp-bub:nth-child(even){transform:rotate(2.5deg);}
.lp-flow-tag b{color:#0F2A5C;}
@media (max-width:1280px){
  .lp-qcards{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:920px){
  .lp-sgrid{grid-template-columns:1fr 1fr;}
  .lp-qcards{grid-template-columns:minmax(0,1fr);}
  .lp-qb{grid-template-columns:minmax(0,1fr);} .lp-qb-art{display:none;}
}
@media (max-width:640px){
  .lp-sgrid{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:-20px; padding:var(--sp-xs) var(--sp-xl) var(--sp-md); gap:var(--sp-md);}
  .lp-scard{flex:0 0 82%; scroll-snap-align:center;}
  .lp-qcard{grid-template-columns:minmax(0,1fr);} .lp-qcard .lp-rphoto{min-height:220px;}
  .lp-qchips{grid-template-columns:minmax(0,1fr);}
}

/* ═══ страницы многостраничного сайта ═══ */
.lp-pagehead{position:relative; isolation:isolate; overflow:clip; margin-top:-84px; padding:calc(84px + clamp(22px,3.4vw,44px)) 0 var(--sp-2xl);
  background:radial-gradient(50% 60% at 6% 0%, rgba(255,255,255,.95), transparent 70%), radial-gradient(45% 55% at 96% 20%, rgba(190,222,250,.8), transparent 70%), linear-gradient(180deg,#E6F2FC 0%,#F1F8FE 70%,var(--bg) 100%);}
.lp-pagehead h1{margin-top:var(--sp-sm); font-size:var(--fs-h1); color:var(--navy); letter-spacing:-.03em; max-width:22ch;}
.lp-pagehead .lp-lead-line{max-width:60ch;}
.lp-more-link{margin-top:var(--sp-2xl); text-align:center;}
.nav-link[aria-current="page"]{background:var(--surface-2); color:var(--ink);}
main > .section:first-child .sec-head{max-width:none;}

/* Единый ритм: текст 16 px, группы 32 px, секции 64–112 px между содержимым. */
:root{--lp-text-gap:var(--sp-lg); --lp-block-gap:var(--sp-2xl); --lp-section-pad:var(--sp-section);}
.section{padding-block:var(--lp-section-pad);}
.lp-headline,.sec-head{margin-bottom:var(--lp-block-gap);}
.sec-head :is(h1,h2,p),.lp-lead-line,.lp-lead-bridge{margin-top:var(--lp-text-gap);}
.lp-biohack,.lp-feats,.lp-info,.lp-why,.lp-more-link,.lp-band,.lp-two,.lp-about{margin-top:var(--lp-block-gap);}
.lp-biohack-lead{margin-top:var(--lp-text-gap); gap:var(--lp-text-gap);}
.lp-biohack + .lp-biohack-lead{margin-top:var(--sp-2xl);}
.lp-co2-intro b{margin-bottom:var(--lp-text-gap);}
.lp-info b{margin-bottom:var(--sp-sm);}
.lp-prose p + p{margin-top:var(--lp-text-gap);}
.lp-gain p,.lp-answer p + p,.lp-ans p + p{margin-top:var(--lp-text-gap);}
.lp-hero{padding-bottom:var(--lp-section-pad);}
.lp-hero{padding-top:calc(84px + clamp(28px,3vw,40px));}
.lp-hero .lp-headline{margin-bottom:var(--sp-3xl);}
.lp-hero h1 + .lp-lead-line{margin-top:var(--sp-xs);}
.lp-hero .lp-lead-bridge{margin-top:var(--sp-lg);}
#problem.section{padding-top:var(--sp-2xl);}
.lp-support .btn--primary,.lp-more-link a[href="#tariff-band"]{color:#fff; background:linear-gradient(100deg,#1366E8 0%,#13A9D8 70%,#2FD3B4 100%); border-color:transparent; text-transform:uppercase;}
.btn.lp-red-cta{color:#fff; background:linear-gradient(180deg,var(--red-a),var(--red-b)); border-color:transparent; box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 14px 30px -14px rgba(217,43,53,.55); text-transform:uppercase;}
.btn.lp-red-cta:hover:not(:disabled){filter:brightness(1.05); background:linear-gradient(180deg,var(--red-a),var(--red-b));}

/* Плашки лежат на общем фото, а не рядом с отдельной карточкой портрета. */
.lp-m-gold,.lp-m-sub,.lp-tiles{position:relative; margin-right:var(--sp-xl);}
.lp-m-gold{margin-top:var(--sp-xl);}
.lp-tiles{margin-bottom:var(--sp-xl);}
.lp-m-photo .lp-airwave{display:none;}

/* Исходный иллюстрированный референс; на телефоне — фото и крупная формула. */
.lp-flow--photo{display:block; padding:0; overflow:hidden; margin-top:var(--lp-block-gap); background:var(--surface);}
.lp-flow-photo{display:block; width:100%; height:auto;}
.lp-flow--photo > :is(.lp-chaos,.lp-flow-arrow,.lp-formula,.lp-flow-tag){display:none;}
@media (max-width:640px){
  .lp-m-gold,.lp-m-sub,.lp-tiles{margin-right:0;}
  .lp-m-gold{margin-top:-32px; margin-inline:var(--sp-sm);}
  .lp-tiles{margin-bottom:0;}
  .lp-m-photo figcaption{bottom:48px; font-size:var(--fs-label); padding:var(--sp-sm) var(--sp-md);}
  .lp-flow-photo{height:auto; aspect-ratio:640/468; object-fit:cover; object-position:left center;}
  .lp-flow--photo > .lp-formula{display:grid; padding:var(--sp-xl) var(--sp-lg) 0;}
  .lp-flow--photo > .lp-flow-tag{display:block; padding:var(--sp-lg); margin:0;}
  .lp-flow--photo .lp-fstep{font-size:var(--fs-label); letter-spacing:0; gap:var(--sp-sm);}
  .lp-flow--photo .lp-fic{width:42px; height:42px;}
}

/* ── Переносы строк ──────────────────────────────────────────────────────
   Предлог, союз или короткое слово не должны оставаться висеть в конце
   строки: «Дыхание в / жизни» читается как опечатка. Для абзацев браузер
   сам переносит короткое слово вниз (text-wrap:pretty), а заголовки и
   кнопки делятся на строки поровну (text-wrap:balance). Где поддержки
   нет — работает неразрывный пробел, расставленный в разметке. */
h1,h2,h3,h4,summary,figcaption,
.btn,.lp-closing,.lp-m-cta span,.lp-gcta,.lp-bcta,.lp-tile b,.lp-gold-text b,.lp-band-info b{
  text-wrap:balance;
  /* Unbounded заметно шире прежнего шрифта, и длинное слово вместе с
     прилипшим предлогом могло не поместиться в строку и обрезаться по краю
     блока. Разрешаем перенос внутри слова как крайнюю меру: лучше перенос,
     чем обрезанное слово. */
  overflow-wrap:break-word;
}
p,li,dd,dt,.lp-answer,.lp-ans,.lp-taccess p,.lp-tl li{
  text-wrap:pretty;
  overflow-wrap:break-word;
}