@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:#8992A0;
  --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:#0E8F5F;  --success-soft:#E3F2E6;
  --warning:#A66A00;  --warning-soft:#FBF1DF;
  --error:#C7362F;    --error-soft:#FBEAE8;

  --f-body:'Wix Madefor Text',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-display:'Wix Madefor Display','Wix Madefor Text',sans-serif;
  --f-mono:'Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  --fs-display:clamp(2.6rem,5.6vw,4.2rem);
  --fs-h1:clamp(1.9rem,3.6vw,2.6rem);
  --fs-h2:clamp(1.5rem,2.8vw,2rem);
  --fs-h3:1.1rem;
  --fs-body:1rem;
  --fs-sec:.9375rem;
  --fs-label:.75rem;

  --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 (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:#8992A0;
  --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:#0E8F5F; --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:'Georgia','Times New Roman',serif; 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:clamp(20px,4.5vw,56px);}
.section{padding-block:clamp(60px,8vw,108px);}
.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:7px;
  font-size:.78rem; font-weight:700;
  letter-spacing:.06em; color:var(--accent-dark);
  background:var(--accent-soft);
  padding:6px 14px; 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:1.06rem;}
.sec-head{max-width:640px; margin-bottom:clamp(32px,4.6vw,52px);}
.sec-head h1{font-size:var(--fs-h1); margin-top:16px;}
.sec-head h2{font-size:var(--fs-h2); margin-top:14px;}
.sec-head p{margin-top:16px; 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:9px;
  font-family:var(--f-body);
  font-size:.95rem; font-weight:700; line-height:1;
  padding:13px 24px; 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:16px 30px; font-size:1rem;}
.btn--full{width:100%;}

/* ═══════════ BADGE ═══════════ */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:700; line-height:1;
  padding:6px 12px; 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;} }

/* ═══════════ HEADER / NAV — плавающая пилюля ═══════════ */
/*
   Не полноширинная полоса с линией снизу, а контейнер-пилюля с отступом
   от края и собственной тенью — как в референсе: навигация выглядит как
   отдельный плавающий элемент интерфейса, а не строгая панель.
*/
.header{
  position:sticky; top:0; z-index:60;
  background:transparent;
  padding-top:14px;
}
.nav{
  display:flex; align-items:center; gap:14px; height:64px;
  background:var(--surface);
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  box-shadow:var(--sh-2);
  padding-inline:10px 10px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em; padding-left:8px;}
.brand-mark{
  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:.76rem; font-weight:800;
}
.nav-list{display:flex; align-items:center; gap:2px; margin-left:22px;}
.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:var(--r-pill);
  font-size:.93rem; 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:8px;}

/* 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:8px;
  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:12px; align-items:flex-start;
  padding:11px 12px; 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:.92rem; font-weight:700;}
.dd-item span{display:block; font-size:.82rem; color:var(--ink-3); line-height:1.45;}

.burger{display:none; padding:9px; border-radius:50%; color:var(--ink); margin-right:6px;}
.burger:hover{background:var(--surface-2);}

/* ═══════════ HERO — небо и плавающие карточки ═══════════ */
/*
   Композиция по центру, а не «текст слева / фото справа»: мягкий
   градиент неба во всю ширину первого экрана, крупный заголовок с одним
   курсивным словом (как в референсе — акцент начертанием, а не цветом),
   и пара небольших карточек-интерфейсов, будто вживую снятых с экрана,
   свободно расположенных поверх неба.
*/
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding-block:clamp(64px,9vw,120px) 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:20px; 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:22px auto 0; font-size:1.08rem; color:var(--ink-2); max-width:46ch;}
.hero-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:32px;}

/* ═══════════ ОБЛАКА — параллакс-глубина в шапке ═══════════
   Три слоя друг над другом вместо одной плоской картинки: дальний —
   крупный и размытый, ближний — резче и заметнее. Каждый слой едет
   с курсором на свою величину (--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:12px;
  animation-delay:-1.2s; animation-duration:5.6s;
}
.floater--stat{
  bottom:8%; right:7%; width:220px; padding:16px;
  animation-delay:-3.4s; animation-duration:6.4s;
}
.floater--pill{
  top:22%; right:12%; padding:10px 16px;
  display:flex; align-items:center; gap:8px;
  font-size:.82rem; 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:9px; margin-bottom:9px;}
.floater-chat-av{
  width:26px; height:26px; border-radius:50%; flex:none;
  background:var(--ink); color:#fff;
  display:grid; place-items:center; font-size:.62rem; font-weight:800;
}
.floater-chat-row b{font-size:.78rem; font-weight:700; display:block;}
.floater-chat-row span{font-size:.68rem; color:var(--ink-3); display:block;}
.floater-chat-body{
  font-size:.76rem; line-height:1.4; color:var(--ink-2);
  background:var(--surface-2); border-radius:var(--r-md); padding:9px 11px;
}

.floater-stat-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:.74rem; font-weight:700; color:var(--ink-3); margin-bottom:10px;
}
.floater-stat-num{
  font-family:var(--f-display); font-size:1.7rem; 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:10px;}
.floater-stat-bar i{display:block; height:100%; width:72%; border-radius:inherit; background:var(--accent-warm);}

@media (max-width:900px){
  .floater--chat{left:2%; top:4%; 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:12px; margin-top:34px;}
  .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:clamp(30px,5vw,68px);
  align-items:center;
}
.mockrow-lead{margin-top:16px; font-size:1.04rem; color:var(--ink-2); max-width:46ch;}
.mockrow .hero-trust{
  display:flex; flex-wrap:wrap; gap:20px;
  margin-top:30px; padding-top:22px; border-top:1px solid var(--border);
}
.trust-item{display:flex; align-items:center; gap:9px; 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:clamp(30px,4.2vw,48px) clamp(20px,3vw,34px);
  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:10px;
  padding:14px 16px; 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:.72rem; font-weight:800;
}
.mock-bar b{font-size:.88rem; font-weight:700; display:block; line-height:1.3;}
.mock-bar span{font-size:.74rem; color:var(--success); display:flex; align-items:center; gap:5px;}
.mock-bar span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--success);}
.mock-body{padding:16px; display:flex; flex-direction:column; gap:11px; background:var(--surface-2);}
.bubble{
  max-width:86%; padding:11px 14px; border-radius:16px;
  font-size:.86rem; 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:6px; margin-top:8px;}
.tg-key{
  padding:9px 10px; border-radius:var(--r-pill); text-align:center;
  font-size:.76rem; 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:10px; padding:13px 14px; border-radius:16px;
  background:var(--surface); border:1px solid var(--border);
}
.tg-card-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-size:.82rem; font-weight:700; margin-bottom:9px;
}
.tg-card-head span{font-size:.74rem; font-weight:500; color:var(--ink-3);}

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

.tg-lesson{
  display:flex; gap:8px; align-items:flex-start;
  font-size:.79rem; line-height:1.45; padding:5px 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:5px; display:grid; gap:3px;}
.tg-time{display:flex; gap:8px; font-size:.73rem; 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:22px;}
.value{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:26px 24px;
  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:16px;
  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:9px; font-size:var(--fs-sec); color:var(--ink-2);}

/* ═══════════ TABS / PROGRAMS ═══════════ */
.tabs{
  display:inline-flex; gap:4px; padding:4px;
  max-width:100%;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-pill); margin-bottom:32px; flex-wrap:wrap;
  box-shadow:var(--sh-1);
}
.tab{
  padding:12px 22px; min-height:44px; border-radius:var(--r-pill);
  font-size:.92rem; 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:clamp(24px,4vw,56px); align-items:start;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:clamp(24px,3.4vw,44px);
  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:8px; flex-wrap:wrap; margin-bottom:16px;}
.panel h3{font-size:var(--fs-h1); letter-spacing:-.02em;}
.panel-desc{margin-top:14px; color:var(--ink-2);}
.panel-list{margin-top:22px; display:grid; gap:11px;}
.panel-list li{display:flex; gap:11px; align-items:flex-start; font-size:var(--fs-sec);}
.panel-list svg{color:var(--accent); margin-top:2px;}
.panel-side{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:24px;
}
.stat-row{display:flex; justify-content:space-between; align-items:baseline; padding:11px 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:18px;}
.panel-note{margin-top:12px; font-size:.8rem; color:var(--ink-3); text-align:center;}

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

/* Номер шага крупной полупрозрачной цифрой в углу карточки.
   Счётчик, а не ручные цифры в разметке: порядок карточек может
   поменяться, и номера не разъедутся. */
.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:5rem; 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:26px 24px;
  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:22px 22px 24px;}
.card-ico{
  width:40px; height:40px; border-radius:50%; margin-bottom:16px;
  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:1.06rem;}
.card p{margin-top:8px; 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:32px; align-items:center;}

/* ═══════════ БЛОГ ═══════════ */
.card h3 a{color:inherit;}
.card h3 a:hover{color:var(--accent);}
.article-meta{margin-top:14px; font-size:.82rem; 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:20px; line-height:1.7;}
/* `.article-meta` внутри статьи (заметка о курсе) — тот же элемент <p>,
   что и обычный текст статьи, поэтому `.article-body p` выше по
   специфичности его перебивал: заметка рендерилась обычным размером
   текста вместо мелкого. */
.article-body p.article-meta{font-size:.82rem; line-height:1.5; color:var(--ink-3);}

.alert{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; border-radius:var(--r-md);
  font-size:var(--fs-sec); border:1px solid transparent;
}
.alert svg{margin-top:1px;}
.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:2px; color:var(--ink-2); font-size:.86rem;}

/* ═══════════ PROOF / ОТЗЫВЫ — фото и стеклянные карточки ═══════════ */
/*
   Второе появление фотографии на странице, но не как второй первый экран:
   секция лежит в потоке страницы своей скруглённой панелью, карточки на
   ней — полупрозрачное стекло, тот же приём, что и у плавающих карточек
   в шапке, только спокойнее — здесь ничего не покачивается.
*/
.section-photo{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r-xl);
  padding:clamp(40px,6vw,72px) clamp(20px,4.5vw,56px);
  margin-bottom:clamp(40px,6vw,72px);
}
.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:20px;
  margin-bottom:26px;
}
.proof-stat{
  border-radius:var(--r-lg);
  padding:26px 28px; box-shadow:var(--sh-2);
}
.proof-stat b{
  display:block; font-family:var(--f-display);
  font-size:2.15rem; font-weight:800; letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.proof-stat span{display:block; margin-top:4px; font-size:var(--fs-sec); color:var(--ink-2);}
.quotes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;}
.quote{
  position:relative;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-1);
  display:flex; flex-direction:column; gap:16px;
}
/* Декоративная кавычка в углу — классический приём для отзывов, тише
   и статуснее, чем просто текст в рамке. ::before стоит первым в
   разметке и не позиционирован по z-index, поэтому текст, идущий следом
   в потоке, естественным образом рисуется поверх него. */
.quote::before{
  content:"\201C"; position:absolute; top:2px; left:14px;
  font-family:var(--f-display); font-size:4.6rem; 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:11px;}
.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:.88rem; font-weight:700;}
.quote footer span{display:block; font-size:.78rem; color:var(--ink-3);}
.placeholder-note{margin-top:18px; font-size:.82rem; color:var(--ink-3);}

/* ═══════════ CTA ═══════════ */
/* когда .cta идёт следом за другим блоком внутри той же секции (не как
   отдельная секция с padding-top:0) — нужен свой отступ сверху, иначе
   упирается прямо в предыдущий блок */
.container > * + .cta{margin-top:clamp(40px,6vw,72px);}
.cta{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--ink); color:#fff;
  border-radius:var(--r-xl); padding:clamp(38px,5.6vw,72px);
  display:flex; align-items:center; justify-content:space-between; gap:34px; 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:14px; 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:20px;
  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:28px;
  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:16px; margin-bottom:6px;}
.modal-head h3{font-size:1.4rem;}
.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-sub{font-size:var(--fs-sec); color:var(--ink-2); margin-bottom:20px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:var(--fs-label); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px;}
.input,.select{
  width:100%; padding:12px 14px;
  font-family:inherit; font-size:.95rem; 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:40px;
}
.field-err{display:none; margin-top:6px; font-size:.8rem; color:var(--error);}
.field.invalid .field-err{display:block;}
.check{display:flex; gap:10px; align-items:flex-start; font-size:.85rem; color:var(--ink-2); margin-bottom:20px; cursor:pointer;}
.check input{margin-top:3px; 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:clamp(40px,5vw,64px) 34px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:32px;}
.footer-brand p{margin-top:14px; font-size:var(--fs-sec); color:var(--ink-2); max-width:30ch;}
.footer h4{font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px;}
.footer-links li + li{margin-top:9px;}
.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:8px; margin-top:12px;}
.sub-form .input{flex:1; min-width:0; border-radius:var(--r-pill);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:38px; padding-top:24px; border-top:1px solid var(--border);
  font-size:.83rem; color:var(--ink-3);
}

/* ═══════════ REVEAL ═══════════ */
/*
   Заметнее, чем раньше: элемент не просто проявляется, а слегка
   выезжает и подрастает — эффект, который считывается с одного взгляда,
   а не только боковым зрением. Карточки внутри сеток дополнительно
   ступенчато задержаны — так грид «набирает высоту» слева направо,
   а не появляется единым куском.
*/
.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);
}
.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:1fr;}
  .mock{order:0; margin-top:8px;}
  .panel{grid-template-columns:1fr;}
  .show-grid{grid-template-columns:1fr;}
  .card--wide{grid-column:span 1; grid-template-columns:1fr;}
  .quotes{grid-template-columns:1fr;}
  .proof-stats{grid-template-columns:1fr;}
  .value-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;}
}
@media (max-width:640px){
  .nav-actions .btn--primary{display:none;}
  .nav{gap:8px;}
  .footer-grid{grid-template-columns:1fr; gap:28px;}
  .tabs{display:grid; grid-template-columns:1fr; width:100%;}
  .tab{text-align:center;}
  .hero-cta .btn{flex:1 1 100%;}
  .cta{padding:32px 24px;}
  .modal{padding:22px;}
  .value-grid{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .footer-links a{display:inline-block; padding-block:7px;}
  .footer-links li + li{margin-top:2px;}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  .reveal{opacity:1; transform:none;}
}

/* ═══════════ ЮРИДИЧЕСКИЕ СТРАНИЦЫ ═══════════ */
.doc{max-width:66ch;}
.doc h3{margin-top:34px; margin-bottom:10px; font-size:var(--fs-h3);}
.doc h3:first-child{margin-top:0;}
.doc p{margin-bottom:14px; color:var(--ink-2); line-height:1.7;}
.doc .panel-list{margin-top:14px; margin-bottom:18px;}
.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:22px; text-align:center; font-size:var(--fs-sec); color:var(--ink-3);
  display:grid; gap:6px; place-items:center;
}
.photo-hint b{color:var(--ink-2); font-weight:700;}
.photo-hint span{font-size:.78rem;}

/* Заголовок первой секции внутренних страниц — тот же приём, что в шапке
   главной (мягкий небесный градиент с лёгким свечением по краям), только
   без фото: внутренние страницы должны быть спокойнее главной, а не
   повторять её один в один. Раньше здесь совсем не было цвета — рядом
   с параллакс-небом на главной это читалось как недоделанная страница. */
main > .section:first-child .sec-head{
  position:relative; overflow:hidden; isolation:isolate;
  max-width:none; padding:clamp(32px,5vw,52px) clamp(24px,4.5vw,52px);
  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:clamp(2rem,4.4vw,3.1rem);}

/* Простой цветной SVG-разделитель — тише, чем прежний, не главный герой. */
.breath-wave{display:block; width:100%; height:auto; margin-block:6px; 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;}}