/* буква A в надписи RAV — всегда синяя */
.ra{font-style:inherit;color:var(--blue-2)}
/* галочки списков: зелёные, без кружков, по центру первой строки */
.checks li{padding-left:30px}
.checks li::before{display:none}
.checks li::after{left:0;top:.18em;width:18px;height:18px;border:0;transform:none;background:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.8l4.8 4.8L19.5 6.9' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.8l4.8 4.8L19.5 6.9' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat}
/* название RAV внутри надзаголовка читается одним словом: разрядка меньше, чем у остального текста */
.eyebrow .brand{letter-spacing:.06em}
:root{--ui-h:clamp(70px,10.5vh,92px);--side:clamp(28px,4.6vw,92px);--dash:rgba(57,168,255,.42)}
body{background:var(--bg)}
main{position:relative;z-index:1}

/* ============================================================
   1. ФОН СТРАНИЦЫ — единственное место с постоянной анимацией
   ============================================================ */
.page-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(70% 60% at 72% 38%,rgba(8,119,255,.11),transparent 70%),linear-gradient(180deg,#020A18,var(--bg) 62%)}
.bg-caust{position:absolute;inset:-8%;opacity:.8;will-change:transform;
  background:radial-gradient(closest-side,rgba(120,180,255,.12),transparent) 14% 22%/42% 34% no-repeat,radial-gradient(closest-side,rgba(120,180,255,.09),transparent) 82% 30%/48% 38% no-repeat,radial-gradient(closest-side,rgba(57,168,255,.08),transparent) 46% 84%/60% 38% no-repeat;
  animation:bgCaust 26s ease-in-out infinite alternate}
@keyframes bgCaust{to{transform:translate3d(-3%,2.5%,0) scale(1.08)}}
.bg-rings{position:absolute;left:68%;top:82%;width:0;height:0}
.bg-rings i{position:absolute;left:0;top:0;width:76vmax;aspect-ratio:1;border-radius:50%;border:1px solid rgba(57,168,255,.22);opacity:0;transform:translate(-50%,-50%) scale(.04,.016);animation:bgRing 16s cubic-bezier(.22,.6,.32,1) infinite}
.bg-rings i:nth-child(2){animation-delay:-8s}
@keyframes bgRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.04,.016)}14%{opacity:.9}70%{opacity:.3}100%{opacity:0;transform:translate(-50%,-50%) scale(1,.36)}}
/* пузырьки: узор повторяется каждые 360 px, слой сдвигается transform-ом (без перерисовки кадра) */
.bg-bub-w{position:absolute;inset:0;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.bg-bub{position:absolute;left:0;right:0;top:0;height:calc(100% + 360px);opacity:.55;will-change:transform;
  background-image:radial-gradient(circle at 18% 78%,rgba(190,225,255,.45) 1.6px,transparent 2.6px),radial-gradient(circle at 66% 38%,rgba(190,225,255,.3) 2.2px,transparent 3.4px),radial-gradient(circle at 43% 12%,rgba(190,225,255,.25) 1.2px,transparent 2.2px);
  background-size:260px 360px,380px 360px,200px 180px;
  animation:bgBub 30s linear infinite}
@keyframes bgBub{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-360px,0)}}

/* логотип — единственный элемент вверху */
.top-logo{position:absolute;z-index:30;top:clamp(18px,3vh,30px);left:var(--side);display:inline-flex;align-items:center;gap:10px;min-height:44px}
.top-logo b{font-family:var(--mont);font-style:italic;font-weight:900;font-size:24px;letter-spacing:-.01em;line-height:1}
.top-logo span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);font-weight:600}
.top-logo:focus-visible{outline:2px solid var(--blue-2);outline-offset:4px;border-radius:6px}
.hs .top-logo{position:fixed}

/* ============================================================
   2. БАЗА: вертикальная страница (телефон, без JS, «меньше движения»)
   ============================================================ */
.story{position:relative;counter-reset:sc}
.story-bg,.story-ui,.su-hint{display:none}
.scene{position:relative;padding:clamp(76px,9vw,128px) var(--pad);counter-increment:sc}
.scene-in{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto}
/* разделитель разделов в вертикальной вёрстке: тонкая линия, растворяющаяся к краям */
.scene + .scene::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:linear-gradient(90deg,transparent,rgba(57,168,255,.38),transparent)}
.scene .h2{max-width:18ch}
.lead-p{color:var(--muted);font-size:clamp(15.5px,1.4vw,19px);line-height:1.55;margin:16px 0 0;max-width:58ch}
.txt{font-family:var(--manrope);font-style:normal;letter-spacing:0;color:rgba(255,255,255,.78);font-size:15px;line-height:1.62;margin:0}
.note{font-family:var(--manrope);font-style:normal;letter-spacing:0;font-size:13.5px;line-height:1.55;color:var(--dim);margin:18px 0 0;max-width:62ch}

/* текстовые ссылки: без подчёркивания — лёгкий сдвиг и свечение */
.go{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:700;font-size:15px;color:var(--blue-2);transform-origin:left center;transition:transform .35s var(--ease),color .3s,text-shadow .35s var(--ease)}
.go svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.go:hover{color:#8FD0FF;transform:translateX(4px) scale(1.03);text-shadow:0 0 18px rgba(57,168,255,.5)}
.go:focus-visible{outline:2px solid var(--blue-2);outline-offset:4px;border-radius:8px}
.go.back{transform-origin:right center}
.go.back:hover{transform:translateX(-4px) scale(1.03)}

/* появление только у заголовков и текста (карточки статичны); без story.js и при «меньше движения» — всё видно */
.js:not(.no-story) .r{opacity:0;transform:translate3d(0,22px,0);transition:opacity .8s var(--ease) calc(var(--d,0) * 80ms),transform .9s var(--ease) calc(var(--d,0) * 80ms)}
.js.hs:not(.no-story) .r{transform:translate3d(36px,0,0)}
.js .is-in .r{opacity:1!important;transform:none!important}

/* общие статичные карточки */
.gc{position:relative;isolation:isolate;border-radius:var(--r);background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
/* наведение: карточка не двигается — за курсором идёт мягкий свет, рамка светлеет */
.gc::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(57,168,255,.16),transparent 46%)}
.gc:hover{border-color:rgba(57,168,255,.5);box-shadow:var(--glass-shadow),0 0 0 1px rgba(57,168,255,.12),0 18px 50px rgba(8,119,255,.14)}
.gc:hover::before{opacity:1}

/* ============================================================
   3. ЗАГЛУШКИ ВМЕСТО ФОТО (.vis) — статичные
   ============================================================ */
.vis{position:relative;overflow:hidden;border-radius:clamp(20px,2vw,28px);border:1px dashed rgba(120,180,255,.4);
  background:radial-gradient(80% 70% at 50% 42%,rgba(8,119,255,.2),transparent 70%),linear-gradient(165deg,#071a35 0%,#03101f 62%,#020912 100%)}
.vis svg.vis-art{position:absolute;inset:0;width:100%;height:100%}
/* Снимок вместо заглушки: чистая рамка (скругление + тонкая стеклянная кромка), размеры блока не меняются.
   Анимация — в program-photos.js (GSAP): ромб-раскрытие, блик, глубина при движении ленты, притяжение к курсору.
   Без JS / «меньше движения» — фото статичны и видны сразу. */
.vis.is-photo{border:1px solid var(--glass-line);background:#03101f;border-radius:clamp(22px,2.2vw,34px);isolation:isolate}
.vis.is-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* фото скрыты (сжатый ромб) с первого кадра — без «вспышки»; если program-photos.js не запустился,
   страховка показывает их через 2,5 с; с запущенной анимацией страховка отключается (.ph-anim) */
.js .vis.is-photo img{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%);animation:phSafe .01s 2.5s forwards}
.ph-anim .vis.is-photo img{animation:none;will-change:transform,clip-path}
@keyframes phSafe{to{clip-path:none}}
@media (prefers-reduced-motion:reduce){.js .vis.is-photo img{clip-path:none;animation:none}}
/* блик-перелив: широкая мягкая полоса + тонкая яркая следом (program-photos.js гоняет его по кругу) */
.ph-sheen{position:absolute;inset:-20% -40%;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 36%,rgba(150,205,255,.3) 46%,rgba(190,225,255,.42) 50%,rgba(150,205,255,.1) 54%,transparent 56%,
    transparent 57.5%,rgba(220,240,255,.5) 58.6%,transparent 59.8%)}
.vis-art *{fill:none;stroke:rgba(57,168,255,.4);stroke-width:1}
.vis-art .s2{stroke:rgba(57,168,255,.18)}
.vis-mark{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-family:var(--mont);font-style:italic;font-weight:900;font-size:clamp(22px,2.4vw,36px);color:rgba(255,255,255,.88)}
.vis-tag{position:absolute;left:18px;bottom:16px;display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:rgba(1,7,19,.6);border:1px dashed rgba(120,180,255,.42);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(205,228,255,.86)}
.vis-tag svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   4. СЦЕНЫ
   ============================================================ */
/* 01 — первый экран */
.s-hero{padding-top:calc(var(--top-h) + clamp(24px,5vw,56px))}
.hero-grid{display:grid;gap:clamp(36px,4vw,72px);align-items:center}
.s-hero .crumbs{margin-bottom:14px}
.s-hero h1.hero-h1{font-size:clamp(33px,5.2vw,78px);line-height:1}
.s-hero h1 .l1{display:block}
.s-hero .hero-sub{max-width:34em;color:#DCE7F7}
.markers{list-style:none;padding:0;margin:clamp(22px,2.6vw,30px) 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.markers li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:#E3ECF9}
.markers li + li{padding-left:22px;border-left:1px dashed var(--dash)}
.markers b{font-family:var(--mont);font-weight:800;font-size:26px;letter-spacing:-.02em;line-height:1;color:var(--blue-2)}
.markers small{display:block;font-weight:500;font-size:12px;color:var(--dim)}
.s-hero .hero-actions{align-items:center;gap:14px 26px}
.vis-hero{width:100%;aspect-ratio:4/3.3}
@media (min-width:960px){.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
@media (max-width:959px){.vis-hero{max-width:560px;margin:0 auto}}

/* 02 — кому подходит */
.komu-grid{display:grid;gap:clamp(30px,4vw,80px);align-items:center}
.age-card{margin:0}
.age-big{margin:0;font-family:var(--mont);font-style:normal;font-weight:800;line-height:.8;letter-spacing:-.06em;font-size:clamp(118px,17vw,300px);white-space:nowrap;
  background:linear-gradient(180deg,#FFFFFF 8%,#9BD3FF 48%,#0877FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* тире отделено от цифр: общий трекинг −0,06em иначе склеивает его с «6» */
.age-big .age-dash{margin:0 .08em 0 .1em;letter-spacing:0}
.age-cap{margin:18px 0 0;font-family:var(--manrope);font-style:normal;font-weight:700;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-2)}
.age-cap small{display:block;margin-top:6px;letter-spacing:.02em;text-transform:none;font-weight:500;font-size:14px;color:var(--muted)}
.komu-copy .checks{margin-top:24px;max-width:640px}
.komu-copy .checks li{font-size:15px}
.next-card{max-width:640px;padding:20px 22px}
.next-card h3{font-size:16px;text-transform:uppercase}
.next-card .txt{margin-top:8px;font-size:14.5px}
.next-card .go{margin-top:6px}
@media (min-width:960px){
  .komu-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto auto;row-gap:28px}
  .komu-grid .age-card{grid-column:1;grid-row:1;align-self:end}
  .komu-grid .komu-copy{grid-column:2;grid-row:1 / span 2;align-self:center}
  .komu-grid .next-card{grid-column:1;grid-row:2;align-self:start}
}

/* 03 — что развиваем */
.goals{list-style:none;margin:clamp(28px,3.4vw,46px) 0 0;padding:0;display:grid;gap:clamp(14px,1.6vw,20px)}
.goal{padding:22px 24px 24px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.g-n{display:block;font-family:var(--mont);font-weight:800;font-size:13px;letter-spacing:.18em;color:var(--blue-2);margin-bottom:12px}
.goal h3{font-size:16.5px;text-transform:uppercase;line-height:1.15}
.goal .txt{margin-top:9px;font-size:14.5px;color:rgba(255,255,255,.72)}
@media (min-width:700px){.goals{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.goals{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 04 — как проходит занятие */
.z-wrap{display:grid;gap:clamp(28px,3.4vw,48px)}
.z-head .lead-p{max-width:62ch}
.lesson{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.4vw,18px)}
.ls{padding:clamp(18px,2.4vh,24px) clamp(18px,1.6vw,24px)}
.ls-n{display:block;font-family:var(--mont);font-weight:800;font-size:clamp(28px,2.6vw,40px);line-height:1;letter-spacing:-.03em;color:var(--blue-2);margin-bottom:clamp(12px,2vh,20px)}
.ls h3{font-size:16px;text-transform:uppercase;line-height:1.15}
.ls .txt{margin-top:8px;font-size:14.5px;line-height:1.55}
@media (min-width:700px){.lesson{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.lesson{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* 05 — формат */
.fmt-grid{display:grid;gap:clamp(30px,4vw,84px);align-items:center}
.one{margin:clamp(20px,2.6vw,34px) 0 0;font-family:var(--mont);font-style:normal;font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.045em;font-size:clamp(52px,7.4vw,132px)}
.one span{display:block}
.one .o1{color:#fff}
.one .o2{color:transparent;-webkit-text-stroke:1.5px rgba(120,190,255,.7)}
.one .eq{width:min(240px,40%);height:0;margin:.22em 0 .26em;border-top:1px dashed var(--dash)}
.quote{margin:0;padding:4px 0 4px 24px;border-left:2px solid var(--blue-2);font-family:var(--fira);font-style:italic;font-size:clamp(20px,2vw,30px);line-height:1.32;color:#fff}
.quote p{margin:0;font:inherit}
.fmt-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px 26px}
.fmt-list li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.5;color:#D8E4F7}
.fmt-list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;transform:rotate(45deg);border:1.5px solid var(--blue-2)}
.fmt-list li b{color:#fff}
@media (min-width:640px){.fmt-list{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.fmt-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}

/* 06 — родитель рядом */
.par-grid{display:grid;gap:clamp(36px,4vw,80px);align-items:center}
.par-grid .checks{margin-top:24px;max-width:620px}
.par-grid .checks li{font-size:15px}
.vis-pair{width:100%;aspect-ratio:4/3.2}
@media (min-width:960px){.par-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
@media (max-width:959px){.vis-pair{max-width:560px;margin:0 auto}}

/* 07 — бассейн и стоимость */
.bas-grid{display:grid;gap:clamp(16px,1.8vw,24px);align-items:stretch}
.bas-cards{display:contents}
.bas-card{display:flex;flex-direction:column;overflow:hidden}
.bas-top{position:relative;height:clamp(92px,13vh,132px);border-radius:0;border:0;border-bottom:1px dashed rgba(120,180,255,.4)}
.bas-top .vis-tag{left:14px;bottom:12px}
/* фото бассейна: тот же верх карточки, без пунктира; снизу мягко уходит в стекло карточки */
.vis.bas-top.is-photo{border:0;border-bottom:1px solid var(--glass-line);border-radius:0;background:#03101f}
.vis.bas-top.is-photo::after{content:"";position:absolute;inset:auto 0 0;height:45%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(3,16,31,0),rgba(3,16,31,.55))}
.bas-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.bas-body h3{font-size:18px;text-transform:uppercase}
.bas-row{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.4}
.bas-row svg{width:20px;height:20px;flex:none;margin-top:1px;fill:none;stroke:var(--blue-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bas-row b{display:block;font-weight:700;color:#fff}
.bas-row small{display:block;font-size:12.5px;color:var(--dim)}
.bas-body .btn{margin-top:auto;align-self:flex-start}
.price-card{padding:24px 24px 26px;display:flex;flex-direction:column}
.price-card .eyebrow{margin-bottom:12px}
.price-card h3{font-size:clamp(20px,1.8vw,26px);text-transform:uppercase}
.price-card .txt{margin-top:12px}
.price-card .txt a{color:#fff;font-weight:700;white-space:nowrap}
.price-card .go{margin-top:auto;padding-top:14px}
@media (min-width:960px){.bas-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,.9fr)}}

/* 08 — подготовка и безопасность */
.prep-grid{display:grid;gap:clamp(40px,5vw,96px)}
.prep-col .h2{font-size:clamp(24px,3vw,40px)}
.bring{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0}
.bring li{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px dashed rgba(120,180,255,.22)}
.bring li:first-child{border-top:1px dashed rgba(120,180,255,.22)}
.bring svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--blue-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bring b{display:block;font-size:15px;line-height:1.3}
.bring small{display:block;font-size:13px;line-height:1.4;color:var(--dim)}
.prep-col .checks{margin-top:22px}
.prep-col .checks li{font-size:14.5px}
@media (min-width:960px){.prep-grid{grid-template-columns:1fr 1fr;gap:0}.prep-col.safe{padding-left:clamp(40px,5vw,96px);border-left:1px dashed var(--dash)}.prep-col:first-child{padding-right:clamp(40px,5vw,96px)}}

/* 09 — путь знакомства с водой */
.pg-wrap{display:grid;gap:clamp(30px,4vw,56px)}
.pg{position:relative;list-style:none;margin:0;padding:0 0 0 30px;display:grid;gap:16px}
.pg::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;border-left:1px dashed var(--dash)}
.pg-svg{display:none}
.pg-node{position:relative}
.pg-dot{position:absolute;left:-30px;top:4px;width:13px;height:13px;transform:rotate(45deg);background:var(--blue-2)}
.pg-k{display:block;font-family:var(--mont);font-weight:800;font-size:12.5px;letter-spacing:.18em;color:var(--blue-2);margin-bottom:6px}
.pg-node h3{font-size:17px;text-transform:uppercase;line-height:1.15}
.pg-node .txt{margin-top:6px;font-size:14.5px;max-width:34ch}
.pg-node.last h3{color:var(--blue-2)}

/* 10 — вопросы */
.qa-wrap{display:grid;gap:clamp(28px,3vw,48px)}
.qa-grid{display:grid;gap:14px}
.qa{padding:20px 22px 22px}
.qa h3{font-family:var(--manrope);font-weight:700;font-size:16px;line-height:1.35;letter-spacing:0;text-transform:none;color:#fff}
.qa .txt{margin-top:8px;font-size:14.5px;color:rgba(255,255,255,.74)}
.qa .go{margin-top:4px;min-height:40px;font-size:14px}
.qa.is-call{border-color:var(--line-2)}
.qa-phone{display:inline-block;margin-top:10px;font-family:var(--mont);font-weight:800;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.01em;color:#fff}
.qa-phone:hover{color:#8FD0FF}
@media (min-width:760px){.qa-grid{grid-template-columns:1fr 1fr}}

/* 11 — следующий шаг + запись */
.dalee-grid{display:grid;gap:clamp(30px,4vw,64px);align-items:center}
/* переход на «Детское плавание»: крупная цифра возраста + круглая кнопка, которая заливается синим */
.rel-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(16px,1.8vw,26px);margin-top:26px;max-width:600px;padding:20px 20px 20px 26px;overflow:hidden;
  background:linear-gradient(120deg,rgba(8,119,255,.14),rgba(255,255,255,.03) 55%),var(--glass)}
.rel-card:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px}
.rel-age{position:relative;padding-right:clamp(16px,1.8vw,26px);border-right:1px dashed var(--dash);font-family:var(--mont);font-weight:800;font-size:clamp(46px,4.6vw,70px);line-height:.9;letter-spacing:-.05em;
  background:linear-gradient(180deg,#fff 10%,#39A8FF 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.rel-age small{display:block;margin-top:4px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;-webkit-text-fill-color:var(--blue-2);color:var(--blue-2)}
.rel-k{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-2)}
.rel-card b{display:block;margin-top:6px;font-family:var(--mont);font-weight:800;font-size:clamp(20px,1.9vw,26px);text-transform:uppercase;letter-spacing:-.02em;line-height:1.05}
.rel-card small{display:block;margin-top:6px;font-size:14px;color:var(--muted)}
.all-prog{margin-top:18px}
.all-prog svg{transition:transform .35s var(--ease)}
.all-prog:hover svg{transform:translateX(-4px)}
@media (max-width:520px){.rel-card{grid-template-columns:minmax(0,1fr);padding:18px}.rel-age{display:none}}
.cta-box{position:relative;padding:clamp(30px,4vw,60px) clamp(22px,3vw,52px);border-radius:clamp(20px,2.4vw,30px);border:1px solid var(--line-2);text-align:center;
  background:radial-gradient(90% 120% at 50% 0%,rgba(8,119,255,.22),transparent 62%),linear-gradient(180deg,rgba(4,18,42,.9),rgba(2,11,24,.9))}
.cta-box h2{font-size:clamp(24px,3.2vw,46px);text-transform:uppercase}
.cta-box .sub{margin:16px auto 0}
.cta-box .btn{margin-top:clamp(22px,3vw,32px)}
.cta-box .note{margin:16px auto 0;text-align:center}
.cta-box .note a{color:#fff;font-weight:700}
@media (min-width:960px){.dalee-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}

/* ---------- вертикальная вёрстка: телефон ---------- */
@media (max-width:760px){
  .scene{padding:52px var(--pad)}
  .s-hero{padding-top:calc(var(--top-h) + 22px);padding-bottom:44px}
  .vis-hero,.vis-pair{aspect-ratio:4/3}
}
@media (max-width:959px){
  /* три факта первого экрана — ровной строкой из трёх ячеек */
  .markers{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:0;margin-top:22px}
  .markers li{display:block;padding:4px 14px;font-size:13.5px;line-height:1.35}
  .markers li:first-child{padding-left:0}
  .markers li:last-child{padding-right:0}
  /* все три ячейки одного вида, по две строки: «1–6 / месяцев», «Только / индивидуально», «Вместе с / родителем» */
  .markers b{display:block;font:inherit;font-weight:800;color:var(--blue-2);letter-spacing:0}
  .markers li > span{display:inline}
  .markers small{display:none}
}
/* телефон боком (низкий экран): плотнее отступы, заголовок первого экрана чуть меньше */
@media (max-height:520px){
  .scene{padding:44px var(--pad)}
  .s-hero{padding-top:calc(var(--top-h) + 6px);padding-bottom:36px}
  .s-hero .crumbs{margin-bottom:8px}
  .s-hero h1.hero-h1{font-size:clamp(28px,4.4vw,42px)}
}
/* телефон боком и планшет: первый экран и «Родитель рядом» — текст и заглушка рядом */
@media (min-width:700px) and (max-width:959px){
  .hero-grid,.par-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .vis-hero,.vis-pair{max-width:none;margin:0}
}

/* ---------- телефон вертикально: каждый раздел — ровно один экран ----------
   Прокрутка «экран за экраном» (scroll-snap), группы карточек — свайпом вбок внутри экрана,
   «Что взять» и «Безопасность» — два отдельных экрана. Веб-версию эти правила не затрагивают. */
@media (max-width:767px) and (orientation:portrait) and (min-height:560px){
  /* отступ прокрутки из ds/rav.css (под фиксированную шапку) здесь не нужен: из-за него экраны вставали на 76 px выше */
  html{scroll-snap-type:y mandatory;scroll-padding-top:0}
  /* подвал сайта — последняя точка остановки; он выше экрана, поэтому внутри него прокрутка свободная */
  .rav-foot{scroll-snap-align:start}
  .scene{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:24px var(--pad) 28px;scroll-snap-align:start;scroll-snap-stop:always;overflow:clip}
  /* overflow:clip (а не hidden): раздел не становится отдельной прокручиваемой областью,
     иначе браузер не видит внутри него точки остановки и проскакивает экраны */
  .scene-in{width:100%;min-width:0}
  /* колонки не шире экрана: иначе ряды со свайпом растягивают их и текст обрезается справа */
  :is(.hero-grid,.komu-grid,.fmt-grid,.par-grid,.bas-grid,.prep-grid,.dalee-grid,.z-wrap,.pg-wrap,.qa-wrap,.zd-wrap){grid-template-columns:minmax(0,1fr)}
  :is(.hero-grid,.komu-grid,.fmt-grid,.par-grid,.bas-grid,.prep-grid,.dalee-grid,.z-wrap,.pg-wrap,.qa-wrap,.zd-wrap) > *{min-width:0}
  .age-cap{min-width:0}
  .s-hero{padding-top:calc(var(--top-h) + 2px);padding-bottom:24px}
  /* компактная типографика */
  .eyebrow{margin-bottom:10px}
  .scene .h2{font-size:clamp(23px,6.8vw,29px)}
  .lead-p{font-size:15px;line-height:1.5;margin-top:10px}
  .note{font-size:12.5px;line-height:1.5;margin-top:10px}
  /* 01 */
  .hero-grid{gap:18px}
  .s-hero .crumbs{margin-bottom:8px}
  .s-hero h1.hero-h1{font-size:clamp(27px,8.2vw,34px)}
  .s-hero .hero-sub{font-size:15px;line-height:1.5;margin-top:12px}
  .markers{margin-top:16px}
  .s-hero .hero-actions{margin-top:18px;gap:4px}
  .vis-hero,.vis-pair{aspect-ratio:16/9}
  /* ряды карточек со свайпом: следующая карточка выглядывает справа */
  :is(.goals,.lesson,.qa-grid,.bas-cards,.pg,.komu-copy .checks){display:flex;flex-direction:row;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);
    margin:16px calc(var(--pad) * -1) 0;padding:2px var(--pad) 6px;scrollbar-width:none}
  :is(.goals,.lesson,.qa-grid,.bas-cards,.pg,.komu-copy .checks)::-webkit-scrollbar{display:none}
  :is(.goals,.lesson,.qa-grid,.bas-cards,.pg,.komu-copy .checks) > *{flex:0 0 84%;scroll-snap-align:start}
  /* 02 — список «кому подходит» карточками */
  .komu-grid{gap:16px}
  .age-card{display:flex;align-items:flex-end;gap:14px}
  .age-big{font-size:64px}
  .age-cap{margin:0 0 4px}
  .komu-copy .checks li{padding:14px 16px 14px 42px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line);font-size:14px;line-height:1.45}
  .komu-copy .checks li::after{left:15px;top:16px}
  .next-card{padding:14px 16px}
  /* 03, 04 */
  .goal,.ls{padding:18px 18px 20px}
  .ls-n{margin-bottom:12px}
  /* 05 */
  .fmt-grid{gap:18px}
  .one{font-size:42px;margin-top:12px}
  .quote{font-size:18px;padding-left:16px}
  .fmt-list{margin-top:14px;gap:8px}
  .fmt-list li{font-size:13.5px}
  /* 06 */
  .par-grid{gap:16px}
  .par-grid .checks{margin-top:14px;gap:8px}
  .par-grid .checks li{font-size:14px}
  /* 07 — карточки бассейна и цены свайпом, одной высоты */
  .bas-grid{gap:0}
  .bas-cards{align-items:stretch}
  .price-card{padding:20px}
  /* 08 — два экрана */
  .s-podgotovka{display:block;min-height:0;padding:0;scroll-snap-align:none;overflow:visible}
  .s-podgotovka .prep-grid{display:block}
  .prep-col{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:24px var(--pad) 28px;scroll-snap-align:start;scroll-snap-stop:always}
  .prep-col.safe::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:linear-gradient(90deg,transparent,rgba(57,168,255,.38),transparent)}
  .prep-col .checks{margin-top:14px;gap:8px}
  .bring{margin-top:14px}
  /* 09 — этапы карточками */
  .pg-wrap{gap:0}
  .pg::before{display:none}
  .pg-node{padding:18px 18px 20px;border-radius:var(--r);background:var(--glass);border:1px solid var(--glass-line)}
  .pg-dot{position:static;display:block;margin:2px 0 14px 2px}
  /* 10, 11 */
  .qa-wrap{gap:0}
  .qa{padding:18px}
  /* 12 */
  .dalee-grid{gap:18px}
  .rel-card{margin-top:16px;padding:16px 18px}
  .all-prog{margin-top:12px}
  .cta-box{padding:24px 18px}
  .cta-box h2{font-size:24px}
  .cta-box .btn{margin-top:18px}
}

/* элементы навигации телефона (создаёт story.js); вне телефона скрыты */
.m-prog,.m-hint,.r-hint{display:none}
@media (max-width:767px) and (orientation:portrait) and (min-height:560px){
  /* карточка свайп-ряда: следующая видна узкой кромкой, без обрезанного текста */
  :is(.goals,.lesson,.qa-grid,.bas-cards,.pg,.komu-copy .checks) > *{flex:0 0 calc(100% - 26px);scroll-snap-stop:always}
  /* подсказка под рядом: точки + «Листайте» */
  .r-hint{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
  .r-dots{display:flex;gap:6px}
  .r-dots i{width:6px;height:6px;border-radius:3px;background:rgba(120,180,255,.3);transition:width .35s var(--ease),background .3s}
  .r-dots i.on{width:20px;background:var(--blue-2);box-shadow:0 0 8px rgba(57,168,255,.6)}
  .r-swipe{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);transition:opacity .4s}
  .r-swipe svg{width:22px;height:12px;fill:none;stroke:#9BD3FF;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;animation:rNudge 1.6s ease-in-out infinite}
  @keyframes rNudge{0%,100%{transform:translateX(0);opacity:.45}50%{transform:translateX(6px);opacity:1}}
  .r-hint.used .r-swipe{opacity:0}
  /* прогресс по экранам — тонкая полоса у правого края */
  .m-prog{display:flex;position:fixed;z-index:40;right:6px;top:50%;transform:translateY(-50%);flex-direction:column;gap:5px;pointer-events:none}
  .m-prog i{width:3px;height:9px;border-radius:2px;background:rgba(120,180,255,.25);transition:height .35s var(--ease),background .3s}
  .m-prog i.past{background:rgba(57,168,255,.55)}
  .m-prog i.on{height:22px;background:var(--blue-2);box-shadow:0 0 8px rgba(57,168,255,.7)}
  /* подсказка «Листайте вниз» на первом экране */
  .m-hint{display:flex;position:absolute;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);flex-direction:column;align-items:center;gap:2px;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);transition:opacity .4s;pointer-events:none}
  .m-hint svg{width:18px;height:18px;fill:none;stroke:#9BD3FF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:mHint 1.6s ease-in-out infinite}
  @keyframes mHint{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(5px);opacity:1}}
  .m-moved .m-hint{opacity:0}
  /* 02 — «1–6» отдельной строкой, подпись под ним */
  .age-card{display:block}
  .age-cap{margin-top:10px}
  .komu-grid{gap:22px}
  /* подпись под «1–6» и текст карточки «больше 6 месяцев?» повторяют вводный текст и ссылку —
     на телефоне скрыты, чтобы экран «Кому подходит» помещался целиком (360×780, 375×667) */
  .age-cap small,.next-card .txt{display:none}
  /* 06 — воздух между блоками */
  .par-grid{gap:24px}
  .par-grid .checks{margin-top:18px;gap:12px}
  .par-grid .note{margin-top:16px}
  /* 07 — аккуратнее карточки */
  .bas-head .note{margin-top:12px}
  .bas-top{height:96px}
  .bas-body{padding:18px 18px 20px;gap:11px}
  .bas-body h3{font-size:17px}
  .price-card h3{font-size:20px}
}
@media (prefers-reduced-motion:reduce){.r-swipe svg,.m-hint svg{animation:none}}
/* невысокие телефоны (iPhone SE, Safari с панелями): ещё плотнее, чтобы каждый экран помещался */
@media (max-width:767px) and (orientation:portrait) and (min-height:560px) and (max-height:760px){
  .scene,.prep-col{padding-top:16px;padding-bottom:18px}
  .s-hero{padding-top:calc(var(--top-h) - 4px)}
  .scene .h2{font-size:clamp(22px,6.4vw,26px)}
  .lead-p{font-size:14.5px;line-height:1.45}
  .s-hero h1.hero-h1{font-size:clamp(26px,7.8vw,30px)}
  .s-hero .hero-sub{font-size:14.5px;line-height:1.45}
  .vis-hero,.vis-pair{display:none}
  .m-hint{display:none}
  .r-hint{margin-top:8px}
  .age-big{font-size:54px}
  .next-card .txt{display:none}
  .one{font-size:36px}
  .quote{font-size:16.5px}
  .fmt-list li{font-size:13px}
  .fmt-list{gap:6px}
  .bas-top{height:72px}
  .cta-box{padding:18px 16px}
  .cta-box .sub{font-size:14px}
  .rel-card small{font-size:13px}
}

/* ============================================================
   5. ГОРИЗОНТАЛЬНАЯ ИСТОРИЯ (.hs): вертикальная прокрутка → лента сцен влево
   ============================================================ */
.hs{scroll-behavior:auto}
.hs .story-pin{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;overflow:clip;touch-action:pan-y}
.hs .track{position:relative;z-index:1;display:flex;height:100%;width:max-content;will-change:transform}
.hs .scene{flex:none;display:flex;align-items:center;height:100%;width:var(--vw,100vw);padding:calc(var(--top-h) + 2.2vh) var(--side) calc(var(--ui-h) + 1.4vh);border:0;
  /* браузер рисует только сцены рядом с экраном: лента из 12 экранов не перегружает видеокарту,
     а текст остаётся в DOM — для поиска, чтения с экрана и Tab */
  content-visibility:auto;contain-intrinsic-size:auto var(--vw,100vw) auto 100vh}
/* одинаковые поля слева и справа: контент — колонка до 1440 px по центру экрана */
.hs{--edge:max(var(--side),calc((var(--vw,100vw) - var(--maxw)) / 2))}
.hs .scene{justify-content:center}
.hs .scene-in{margin:0 auto;max-width:none;width:calc(var(--vw,100vw) - var(--edge) * 2)}
.hs .top-logo{left:var(--edge)}
.hs .scene.wide .scene-in{width:auto}
/* разделитель сцен: вертикальный пунктир от логотипа до шкалы + номер сверху */
/* в покое сцена занимает весь экран, поэтому номер не нужен, а пунктир-разделитель
   виден только во время перелистывания — края экрана остаются чистыми */
.hs .scene + .scene::before{content:"";position:absolute;left:0;right:auto;width:0;height:auto;background:none;top:calc(var(--top-h) + 8px);bottom:calc(var(--ui-h) + 8px);border-left:1px dashed var(--dash);opacity:0;transition:opacity .4s var(--ease)}
.hs.hs-moving .scene + .scene::before{opacity:1;transition-duration:.15s}
.hs .scene + .scene::after{display:none}
.hs .scene .h2{font-size:clamp(28px,min(3.3vw,6vh),56px)}
.hs .lead-p{font-size:clamp(15px,min(1.25vw,2.3vh),19px)}
.hs .scene:not(.is-live) *{animation-play-state:paused!important}

/* одна линия заголовков и при этом сцена по центру экрана:
   у всех сцен общий блок высотой с самую высокую сцену (--block-h, считает story.js),
   блок центрирован по вертикали; заголовок — у верхнего края блока (одна высота на всех экранах),
   остальное содержимое (карточки, списки, заглушки фото) — по центру блока */
.hs .scene-in{min-height:var(--block-h,0px)}
.hs :is(.hero-grid,.fmt-grid,.par-grid,.bas-grid,.dalee-grid,.komu-grid){align-items:center}
.hs :is(.hero-copy,.fmt-grid > :first-child,.par-grid > :first-child,.bas-head,.dalee-copy){align-self:start}
.hs .komu-grid .komu-copy,.hs .komu-grid .age-card{align-self:start}
.hs .prep-grid{align-items:start}
.hs :is(.zd-head,.pg-head,.qa-head){align-self:flex-start}
/* крошки первого экрана — в строке логотипа, у правого края: не сдвигают заголовок и не налезают на логотип */
.hs .s-hero .scene-in{position:static}
.hs .s-hero .crumbs{position:absolute;z-index:2;top:clamp(18px,3vh,30px);right:var(--edge);margin:0;display:flex;align-items:center;min-height:44px}

/* волнистые линии «воды» под лентой — двигаются медленнее (параллакс) */
.hs .story-bg{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.par{position:absolute;left:0;top:0;bottom:0;width:calc(var(--vw,100vw) + var(--max,0px) * var(--k));will-change:transform}
.par.p1{--k:.22;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='140' viewBox='0 0 1400 140'%3E%3Cpath d='M0 70 Q175 30 350 70 T700 70 T1050 70 T1400 70' fill='none' stroke='rgba(57,168,255,0.14)' stroke-width='1.4'/%3E%3Cpath d='M0 98 Q175 62 350 98 T700 98 T1050 98 T1400 98' fill='none' stroke='rgba(57,168,255,0.07)' stroke-width='1.2'/%3E%3C/svg%3E") 0 74%/1400px 140px repeat-x}

/* 01 */
.hs .s-hero h1.hero-h1{font-size:clamp(36px,min(4.5vw,8.6vh),80px)}
.hs .s-hero .hero-sub{font-size:clamp(15.5px,min(1.35vw,2.4vh),20px)}
.hs .vis-hero{width:auto;height:min(62vh,580px);max-width:100%;justify-self:end}
/* 02 */
.hs .age-big{font-size:clamp(130px,min(16vw,30vh),300px)}
.hs .komu-copy .checks{gap:8px}
.hs .komu-copy .checks li{font-size:clamp(14px,min(1.1vw,2vh),15.5px)}
/* 03 */
.hs .zd-wrap{display:flex;align-items:center;gap:clamp(36px,4vw,80px)}
.hs .zd-head{flex:none;width:clamp(280px,25vw,420px)}
.hs .goals{flex:1;min-width:0;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
.hs .goal{padding:clamp(16px,2.4vh,24px) 22px}
.hs .goal .txt{font-size:clamp(13.5px,min(1.05vw,1.95vh),14.5px)}
/* 04 — заголовок сверху, пять шагов в один ряд */
.hs .lesson{grid-template-columns:repeat(5,minmax(0,1fr))}
.hs .ls h3{font-size:clamp(14px,min(1.1vw,2.1vh),16px)}
.hs .ls .txt{font-size:clamp(13px,min(.98vw,1.9vh),14.5px);line-height:1.5}
/* 05 */
.hs .one{font-size:clamp(56px,min(7vw,13vh),130px)}
.hs .quote{font-size:clamp(19px,min(1.9vw,3.4vh),30px)}
.hs .fmt-list{margin-top:clamp(18px,3vh,28px)}
.hs .fmt-list li{font-size:clamp(13.5px,min(1.1vw,2vh),15px)}
/* 06 */
.hs .vis-pair{width:auto;height:min(60vh,560px);max-width:100%;justify-self:center}
/* 07 */
.hs .bas-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,.9fr);grid-template-rows:1fr auto 1fr}
/* карточки бассейна и стоимости — в одном ряду и одной высоты; ряд по центру блока, заголовок сверху */
.hs .bas-head{grid-column:1;grid-row:1 / -1}
.hs .bas-card{grid-column:2;grid-row:2;align-self:stretch}
.hs .price-card{grid-column:3;grid-row:2;align-self:stretch}
/* 11 — заглушка фото под вводным текстом (только в горизонтальном режиме, на телефоне не нужна) */
.qa-vis{display:none}
.hs .qa-vis{display:block;width:100%;aspect-ratio:4/3;margin-top:clamp(18px,3vh,32px)}
/* 08 */
.hs .bring{margin-top:clamp(14px,2.4vh,22px)}
.hs .bring li{padding:clamp(7px,1.2vh,11px) 0}
.hs .prep-col .checks{gap:8px;margin-top:clamp(14px,2.4vh,22px)}
.hs .prep-col .checks li{font-size:clamp(13.5px,min(1.05vw,1.95vh),14.5px)}
.hs .prep-col .lead-p{margin-top:10px}
/* 09 — путь волной */
.hs .pg-wrap{display:flex;align-items:center;gap:clamp(36px,4vw,80px)}
.hs .pg-head{flex:none;width:clamp(260px,25vw,420px)}
.hs .pg-box{position:relative;flex:1;min-width:0;height:auto}
.hs .pg{position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:1fr 40px 1fr;gap:0;padding:0;height:auto}
.hs .pg::before{display:none}
.hs .pg-svg{display:block;position:absolute;left:0;top:50%;width:100%;height:120px;margin-top:-60px;overflow:visible;pointer-events:none}
.hs .pg-svg path{fill:none}
.hs .pg-svg .base{stroke:var(--dash);stroke-width:1;stroke-dasharray:5 7}
.hs .pg-svg .fill{stroke:var(--blue-2);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}
.hs .pg-node{display:contents}
.hs .pg-dot{position:relative;left:auto;top:auto;grid-row:2;align-self:center;justify-self:center}
.hs .pg-node > div{grid-row:1;align-self:end;padding:0 10px 24px;text-align:center}
.hs .pg-node:nth-child(odd) > div{grid-row:3;align-self:start;padding:24px 10px 0}
.hs .pg-node:nth-child(1) > *{grid-column:1 / span 2}.hs .pg-node:nth-child(2) > *{grid-column:2 / span 2}.hs .pg-node:nth-child(3) > *{grid-column:3 / span 2}.hs .pg-node:nth-child(4) > *{grid-column:4 / span 2}.hs .pg-node:nth-child(5) > *{grid-column:5 / span 2}
.hs .pg-node h3{font-size:clamp(14px,min(1.2vw,2.2vh),17px)}
.hs .pg-node .txt{font-size:clamp(13px,min(1vw,1.9vh),14.5px)}
.hs .pg-node .txt{margin-left:auto;margin-right:auto}
/* 10–11 — вопросы: два экрана (6 + 4 карточки), каждый целиком в окне */
.hs .qa-wrap{display:flex;align-items:center;gap:clamp(36px,4vw,80px)}
.hs .qa-head{flex:none;width:clamp(260px,24vw,400px)}
.hs .qa-grid{flex:1;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:14px}
.hs .s-voprosy2 .qa-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.hs .qa{padding:clamp(16px,2.4vh,22px) 22px}
.hs .qa h3{font-size:clamp(14.5px,min(1.15vw,2.1vh),16px)}
.hs .qa .txt{font-size:clamp(13.5px,min(1.05vw,1.95vh),14.5px);line-height:1.55}

/* невысокие экраны (ноутбуки 1280×720, 1366×768) */
@media (max-height:860px){
  .hs{--ui-h:70px}
  .hs .scene{padding-top:calc(var(--top-h) + 1vh);padding-bottom:calc(var(--ui-h) + .5vh)}
  .hs .eyebrow{margin-bottom:12px}
  .hs .scene .h2{font-size:clamp(26px,min(3.2vw,5.6vh),52px)}
  .hs .lead-p{margin-top:12px}
  .hs .s-hero .crumbs{margin-bottom:6px}
  .hs .s-hero h1.hero-h1{font-size:clamp(34px,min(4.3vw,7.4vh),76px)}
  .hs .s-hero .hero-sub{margin-top:14px}
  .hs .markers{margin-top:18px}
  .hs .s-hero .hero-actions{margin-top:20px}
  .hs .age-big{font-size:clamp(110px,min(14vw,25vh),280px)}
  .hs .age-cap{margin-top:12px}
  .hs .komu-grid{row-gap:18px}
  .hs .next-card{padding:16px 20px}
  .hs .komu-copy .checks{margin-top:16px}
  .hs .note{margin-top:12px}
  .hs .fmt-list{gap:10px 24px}
}

/* ---------- шкала прогресса ---------- */
/* плавающая «стеклянная» капсула по центру: ← · 02 / 12 · название · сегменты · → */
.hs .story-ui{display:flex;position:absolute;left:50%;bottom:clamp(14px,2.6vh,28px);z-index:20;transform:translateX(-50%);align-items:center;gap:14px;padding:7px;border-radius:999px;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),rgba(4,14,30,.62);border:1px solid rgba(120,180,255,.2);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 50px rgba(0,0,0,.45)}
.su-count{flex:none;display:flex;align-items:baseline;gap:6px;padding-left:6px;font-variant-numeric:tabular-nums}
.su-count b{font-family:var(--mont);font-weight:800;font-size:15px;color:#fff;letter-spacing:.02em}
.su-count > span{font-size:12px;color:var(--dim)}
.su-cur{display:block;width:13.5em;margin-left:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-size:13px;font-weight:700;color:#DCE7F7}
.su-track{flex:none;padding:0 4px}
.su-dots{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.su-dots li{position:relative}
.su-dots a{display:grid;place-items:center;height:30px;padding:0 1px}
.su-dots a i{display:block;width:16px;height:3px;border-radius:3px;background:rgba(120,180,255,.22);transition:width .45s var(--ease),background .3s,box-shadow .3s}
.su-dots li.is-past a i{background:rgba(57,168,255,.6)}
.su-dots a[aria-current="step"] i{width:34px;background:linear-gradient(90deg,var(--blue),var(--blue-2));box-shadow:0 0 12px rgba(57,168,255,.7)}
.su-dots a:hover i{background:#fff}
.su-dots a span{position:absolute;bottom:40px;left:50%;padding:6px 11px;border-radius:10px;white-space:nowrap;font-size:12px;font-weight:700;color:#fff;background:rgba(6,19,38,.94);border:1px solid var(--line-2);opacity:0;transform:translate(-50%,4px);transition:opacity .2s,transform .3s var(--ease);pointer-events:none}
.su-dots a:hover span,.su-dots a:focus-visible span{opacity:1;transform:translate(-50%,0)}
.su-dots a:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px;border-radius:6px}
.su-btn{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;cursor:pointer;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(120,180,255,.22);transition:background .3s,border-color .3s,box-shadow .3s,opacity .3s}
.su-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.su-btn:hover{background:linear-gradient(135deg,var(--blue),var(--blue-2));border-color:transparent;box-shadow:0 8px 22px rgba(8,119,255,.45)}
.su-btn:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px}
.su-btn[disabled]{opacity:.3;pointer-events:none}
@media (max-width:1180px){.su-cur{display:none}}

/* подсказка «листайте» — только в начале */
.hs .su-hint{display:flex;position:absolute;right:var(--edge);bottom:calc(var(--ui-h) + 2vh);z-index:21;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6);transition:opacity .6s var(--ease)}
.su-mouse{position:relative;width:20px;height:32px;border-radius:11px;border:1.5px solid rgba(190,225,255,.6)}
.su-mouse::after{content:"";position:absolute;left:50%;top:7px;width:2px;height:6px;margin-left:-1px;border-radius:2px;background:#9BD3FF}
.su-arr svg{width:28px;height:14px;fill:none;stroke:#9BD3FF;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hs-moved .su-hint{opacity:0;pointer-events:none}

/* ============================================================
   6. МЕНЬШЕ ДВИЖЕНИЯ — фон замирает, появление отключено
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .bg-caust,.bg-bub,.bg-rings i{animation:none!important}
  .bg-rings i{opacity:.4;transform:translate(-50%,-50%) scale(.5,.18)}
  .js .r{opacity:1!important;transform:none!important;transition:none!important}
  .go{transition:none}
}