/* Дизайн-слой поверх styles.css: движение, глубина, отклик на курсор.
   Всё декоративное рисуется здесь и в enhance.js; содержание и разметка страниц не меняются.
   При «уменьшить движение» в системе остаётся статичная, но такая же аккуратная версия. */

:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-snap:cubic-bezier(.2,.7,.1,1)}
/* Наклонная бегущая строка шире экрана — обрезаем по краям, не ломая липкую полосу сверху. */
html,body{overflow-x:clip}

/* ── исправления вёрстки ── */
.class-section h2{font-size:clamp(40px,4.6vw,64px);font-weight:800;line-height:1.05;letter-spacing:-.045em}
/* Кегль заголовка карточки — от ширины самой карточки: «программирования» всегда помещается целиком. */
.class-card{container-type:inline-size}
.class-card h3{font-size:clamp(22px,10cqi,39px)}
@media(max-width:700px){.class-section h2{font-size:clamp(37px,9vw,52px)}}

/* ── верхняя полоса: липкая, с прогрессом прокрутки ── */
.pathbar{position:sticky;top:0;z-index:60}
.pathbar::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--red-lit);
  transform-origin:0 50%;transform:scaleX(var(--progress,0))}

/* ── первые экраны: слои параллакса ── */
.intro,.directions-hero{position:relative;isolation:isolate}
.fx-layer{position:absolute;inset:-60px -4vw 0;z-index:-1;pointer-events:none;overflow:hidden}
.fx-grid{position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(10,10,12,.13) 1px,transparent 1.5px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 72% 55%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 80% at 72% 55%,#000 20%,transparent 75%)}
.fx-slash{position:absolute;font:800 clamp(320px,42vw,640px)/.75 var(--sans);letter-spacing:-.1em;user-select:none;will-change:transform}
.fx-slash.s1{right:4%;top:-6%;color:transparent;-webkit-text-stroke:2px rgba(227,38,26,.22)}
.fx-slash.s2{right:24%;top:8%;color:rgba(10,10,12,.035)}
.fx-slash.s3{right:-6%;top:22%;font-size:clamp(160px,18vw,260px);color:transparent;-webkit-text-stroke:1.5px rgba(10,10,12,.12)}

/* Персонажи: стоят на кромке полосы, поэтому качаются от ступней, а не плавают */
.intro-duo,.character-pair,.cta-duo{perspective:900px}
.intro-duo img,.character-pair img,.cta-duo img{transform-origin:50% 100%;will-change:transform;
  transform:rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg)) translateX(var(--tx,0px));transition:transform .5s var(--ease-out)}
.intro-duo::before,.character-pair::before{content:"";position:absolute;left:12%;right:12%;bottom:-2px;height:16px;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(10,10,12,.28),transparent 70%);filter:blur(2px)}
.intro-duo,.character-pair{position:relative}

/* Заголовки: слова поднимаются из-под маски */
.split-word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.split-word>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease-out);transition-delay:calc(var(--i,0)*70ms)}
.split-in .split-word>span{transform:none}
h1 .split-word>span{transition-duration:1.05s}

/* Появление блоков: каскадом */
.js-ready .reveal{transition-delay:calc(var(--d,0)*90ms)}

/* ── кнопки ── */
.button{position:relative;overflow:hidden;isolation:isolate}
.button::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .8s var(--ease-out)}
.button:hover::before{transform:translateX(120%)}
.button-red::after{content:"→";font-weight:700;transition:transform .35s var(--ease-out)}
.button-red:hover::after{transform:translateX(5px)}
.program-actions .button-red::after,.form-submit::after{content:none}
.button.is-magnetic{transition:background .2s ease,transform .35s var(--ease-out)}
.header-link,.main-nav a,.text-link,.path-action{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease-out),color .2s}
.header-link:hover,.main-nav a:hover,.path-action:hover{background-size:100% 1px;text-decoration:none}

/* ── полоса шагов: индикатор под текущим ── */
.steps-band a{position:relative}
.steps-band a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red-lit);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease-out)}
.steps-band a:hover::after,.steps-band a[aria-current]::after{transform:scaleX(1)}
.steps-band a:first-child::after{left:22px}

/* ── тёмные секции: большой слэш на фоне с собственной скоростью ── */
.play-section,.path-section,.signup-section,.footer{position:relative;overflow:hidden;isolation:isolate}
.bg-slash{position:absolute;z-index:-1;right:-6vw;top:0;font:800 clamp(380px,48vw,760px)/.75 var(--sans);letter-spacing:-.1em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,74,56,.14);pointer-events:none;user-select:none;will-change:transform}
.path-section .bg-slash{right:auto;left:-8vw;-webkit-text-stroke-color:rgba(255,255,255,.06)}
.signup-section .bg-slash{right:auto;left:-10vw;top:10%}
.play-section::before,.signup-section::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(600px 400px at var(--mx,80%) var(--my,30%),rgba(255,74,56,.10),transparent 70%)}

/* ── бегущая строка ── */
.ticker{background:var(--red);color:#fff;overflow:hidden;white-space:nowrap;font:600 clamp(18px,2vw,26px)/1 var(--sans);letter-spacing:-.02em;
  padding:18px 0;transform:rotate(-1.2deg);margin:-14px -2vw;position:relative;z-index:2;box-shadow:0 10px 30px rgba(227,38,26,.25)}
.ticker-track{display:inline-flex;gap:42px;padding-right:42px;animation:ticker 32s linear infinite}
.ticker-track span{display:inline-flex;align-items:center;gap:42px}
.ticker-track span::after{content:"/";color:var(--ink);font-weight:800}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker.dark{background:var(--ink);transform:none;margin:0;box-shadow:none;border-bottom:1px solid var(--dark-rule)}
.ticker+.signup-section{clip-path:none}
.ticker.dark .ticker-track span::after{color:var(--red-lit)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ── карточки направлений: наклон и подсветка за курсором ── */
.class-grid{perspective:1400px}
.class-card{position:relative;transform-style:preserve-3d;will-change:transform;
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),background .2s;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0)}
.class-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease-out)}
.class-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(380px circle at var(--px,50%) var(--py,50%),rgba(227,38,26,.08),transparent 60%)}
.class-card.featured::after{background:radial-gradient(380px circle at var(--px,50%) var(--py,50%),rgba(255,74,56,.18),transparent 60%)}
.class-card:hover{z-index:2;box-shadow:0 30px 60px -25px rgba(10,10,12,.35)}
.class-card:hover::before{transform:scaleX(1)}
.class-card:hover::after{opacity:1}
.class-card h3{transition:transform .6s var(--ease-out)}
.class-card:hover h3{transform:translateZ(30px)}
.card-link{position:relative}
.card-link::after{content:"→";transition:transform .35s var(--ease-out)}
.card-link:hover{text-decoration:none}
.card-link:hover::after{transform:translateX(6px)}

/* ── «Родителям» и «Куда дальше» ── */
.parent-list>div{position:relative;transition:padding-left .45s var(--ease-out)}
.parent-list>div .mono{display:inline-block;transition:transform .45s var(--ease-out)}
.parent-list>div:hover{padding-left:10px}
.parent-list>div:hover .mono{transform:rotate(18deg) scale(1.25)}
.parent-aside{position:relative;overflow:hidden}
.parent-aside::before{content:"/";position:absolute;right:-20px;bottom:-60px;font:800 260px/1 var(--sans);color:rgba(255,255,255,.04);pointer-events:none}
.parent-aside li{transition:padding .35s var(--ease-out)}
.parent-aside li:hover{padding-left:6px;padding-right:6px;background:rgba(255,255,255,.03)}
.path-steps>div{position:relative;transition:transform .5s var(--ease-out)}
.path-steps>div:hover{transform:translateY(-6px)}
.path-steps>div::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--red-lit);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease-out)}
.path-steps>div+div::after{left:24px;width:calc(100% - 24px)}
.path-steps>div:hover::after{transform:scaleX(1)}
.path-steps h3{transition:color .3s}
.path-steps>div:hover h3{color:var(--red-lit)}

/* ── пульт ── */
.play-grid{box-shadow:0 40px 80px -40px rgba(255,74,56,.25)}
.board-panel{position:relative}
.board-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(240px circle at var(--bx,50%) var(--by,50%),rgba(255,255,255,.05),transparent 70%)}
.game-board rect{transition:stroke .4s}
.game-board.is-win rect{animation:cell-flash .9s ease both;animation-delay:calc(var(--c,0)*12ms)}
@keyframes cell-flash{30%{stroke:var(--red-lit)}}
.command-keys button{position:relative;overflow:hidden}
.command-keys button::before{content:"";position:absolute;inset:0;background:var(--red-lit);transform:translateY(101%);transition:transform .3s var(--ease-out);z-index:-1}
.command-keys button{isolation:isolate}
.command-keys button:hover:not(:disabled)::before{transform:none}
.command-keys button:hover:not(:disabled){color:var(--ink);border-color:var(--red-lit)}
.program-command{animation:cmd-in .35s var(--ease-out) both}
@keyframes cmd-in{from{opacity:0;transform:translateX(-10px)}}
.confetti{position:fixed;pointer-events:none;z-index:80;font:800 22px/1 var(--sans);color:var(--red-lit);will-change:transform,opacity}

/* ── карта и форма ── */
.map-frame{transition:box-shadow .5s var(--ease-out),transform .5s var(--ease-out)}
.map-frame:hover{box-shadow:14px 14px 0 var(--red);transform:translate(-4px,-4px)}
.map-list li{transition:padding .35s var(--ease-out),color .2s}
.map-list li:hover{padding-left:8px}
.form-panel{position:relative;box-shadow:18px 18px 0 var(--red);transition:box-shadow .6s var(--ease-out),transform .6s var(--ease-out)}
.form-panel:focus-within{box-shadow:10px 10px 0 var(--red);transform:translate(4px,4px)}
.form-panel input,.form-panel select{transition:background .25s,border-color .25s,box-shadow .25s}
.form-panel input:focus,.form-panel select:focus{outline:none;border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--red)}
.signup-steps span{transition:color .3s,transform .4s var(--ease-out)}
.signup-steps span:hover{color:#fff;transform:translateX(6px)}

/* ── подвал: крупное слово ── */
.footer-wordmark{display:block;grid-column:1/-1;margin-top:40px;line-height:.9;font:800 clamp(90px,19vw,300px)/.8 var(--sans);letter-spacing:-.07em;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.14);white-space:nowrap;user-select:none;will-change:transform}
.footer-wordmark b{-webkit-text-stroke:0;color:var(--red-lit);font-weight:800}

/* ── загрузка страницы ── */
.fx-ready body{animation:page-in .6s var(--ease-out) both}
@keyframes page-in{from{opacity:0}}

@media(max-width:700px){
  .fx-slash.s1{right:-18%;top:2%;font-size:420px}.fx-slash.s2{display:none}
  .bg-slash{font-size:420px;right:-30vw}
  .ticker{font-size:17px;padding:14px 0}
  .form-panel{box-shadow:10px 10px 0 var(--red)}
  .class-card:hover{box-shadow:none}
  .steps-band a::after,.steps-band a:first-child::after{left:0}
}
@media(prefers-reduced-motion:reduce){
  .split-word>span{transform:none!important}
  .ticker-track{animation:none}
  [data-speed]{translate:none!important}
  .class-card{transform:none!important}
}

/* ───────────── первый экран главной: два столбца ─────────────
   Слева — что это и что делать (заголовок, одна фраза, две кнопки, три факта).
   Справа — персонажи крупно на одном большом красном слэше; стоят на кромке чёрной полосы шагов. */
.hero2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end;
  padding-top:clamp(28px,4vw,56px);position:relative;isolation:isolate}
.hero2-copy{padding-bottom:clamp(40px,5vw,72px);max-width:620px}
.hero2 h1{font-size:clamp(50px,5.5vw,88px);font-weight:800;line-height:.95;letter-spacing:-.05em;margin-top:22px}
.hero2-lead{font-size:clamp(17px,1.45vw,20px);line-height:1.5;color:#3d3d45;max-width:30em;margin-top:clamp(20px,2.4vw,30px)}
.hero2-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,38px)}
.hero2-actions .button{min-height:56px;padding:16px 22px;gap:18px}
.button-down::after{content:"↓"!important}
.button-down:hover::after{transform:translateY(4px)!important}
.button-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);transition:background .25s,color .25s,transform .35s var(--ease-out)}
.button-ghost:hover{background:var(--ink);color:#fff}
.button-ghost::before{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%)}

.hero2-art{position:relative;margin:0;align-self:end;justify-self:end;width:min(100%,520px);perspective:900px}
.hero2-art img{position:relative;display:block;width:100%;height:auto;margin-bottom:-1px;transform-origin:50% 100%;
  transform:rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg)) translateX(var(--tx,0px));transition:transform .5s var(--ease-out);
  filter:drop-shadow(0 24px 30px rgba(10,10,12,.18))}
/* Один крупный слэш вместо россыпи мелочей: даёт фигурам опору и цвет бренда. */
.hero2-slash{position:absolute;left:8%;right:0;bottom:0;height:118%;background:var(--red);
  clip-path:polygon(58% 0,100% 0,42% 100%,0 100%);will-change:transform}
.hero2-slash.thin{left:-6%;right:64%;height:96%;clip-path:none;opacity:.55;
  background:linear-gradient(to top right,transparent calc(50% - 1px),var(--red) calc(50% - 1px),var(--red) calc(50% + 1px),transparent calc(50% + 1px))}
.hero2::before{content:"";position:absolute;inset:-40px -6vw 0 40%;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(10,10,12,.12) 1px,transparent 1.5px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 70% 60%,#000 15%,transparent 72%);
  mask-image:radial-gradient(ellipse 60% 70% at 70% 60%,#000 15%,transparent 72%)}

/* Кнопка записи в шапке — настоящая кнопка, а не просто текст */
.header-cta{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;background:var(--ink);color:#fff;
  background-image:none!important;transition:background .25s,transform .35s var(--ease-out)}
.header-cta::after{content:"→";transition:transform .35s var(--ease-out)}
.header-cta:hover{background:var(--red);color:#fff}
.header-cta:hover::after{transform:translateX(4px)}

@media(max-width:900px){
  .hero2{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
}
@media(max-width:700px){
  .hero2{display:block;padding-top:22px}
  .hero2-copy{padding-bottom:28px}
  .hero2 h1{font-size:clamp(46px,12.5vw,68px);margin-top:16px}
  .hero2-actions{flex-direction:column}
  .hero2-actions .button{width:100%}
  .hero2-art{width:min(86%,360px);margin:24px 0 0 auto}
  .hero2-slash{height:100%}.hero2-slash.thin{height:88%}
}

/* Первый экран появляется сам при загрузке, каскадом за заголовком, — без ожидания прокрутки. */
.hero2-lead,.hero2-actions{animation:hero-rise .9s var(--ease-out) both}
.hero2-lead{animation-delay:.35s}.hero2-actions{animation-delay:.5s}
.hero2-art img{animation:hero-art .9s var(--ease-out) .2s both}
.hero2-slash{animation:hero-slash 1s var(--ease-out) both}
.hero2-slash.thin{animation-delay:.15s}
@keyframes hero-rise{from{opacity:0;transform:translateY(22px)}}
@keyframes hero-art{from{opacity:0;transform:translateY(30px) scale(.96)}}
@keyframes hero-slash{from{clip-path:polygon(58% 100%,100% 100%,42% 100%,0 100%)}}
.hero2-slash.thin{animation-name:hero-rise}
@media(prefers-reduced-motion:reduce){.hero2-lead,.hero2-actions,.hero2-art img,.hero2-slash{animation:none}}

/* ───────────── первый экран: продающая версия ─────────────
   Заголовок — что предлагаем и чем отличаемся; подзаголовок — снимает главное возражение (дорога);
   кнопки — основное действие и мягкое «сначала попробовать»; под ними — снятие риска; ниже три выгоды. */
.hero2 h1{font-size:clamp(40px,4.3vw,66px);line-height:1;max-width:15ch;margin-top:18px}
.hero2{padding-top:clamp(20px,2.6vw,40px)}
.hero2-copy{padding-bottom:clamp(30px,3.4vw,48px);max-width:700px}
.hero2-lead{margin-top:clamp(16px,1.8vw,24px)}
.hero2-actions{margin-top:clamp(22px,2.4vw,30px)}
.hero2 h1 .accent{color:var(--red)}
.hero2-lead{max-width:31em}

/* Закруглённые кнопки первого экрана */
.pill{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 22px;border-radius:999px;
  font:700 15px/1 var(--sans);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;isolation:isolate;
  transition:background .25s,color .25s,box-shadow .35s var(--ease-out),transform .35s var(--ease-out)}
.pill span{display:inline-block;transition:transform .35s var(--ease-out)}
.pill-red{background:var(--red);color:#fff;box-shadow:0 14px 30px -12px rgba(227,38,26,.75)}
.pill-red::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .8s var(--ease-out)}
.pill-red:hover{background:#c91d13;box-shadow:0 18px 36px -12px rgba(227,38,26,.9)}
.pill-red:hover::before{transform:translateX(120%)}
.pill-red:hover span{transform:translateX(5px)}
.pill-ghost{color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.pill-ghost:hover{background:var(--ink);color:#fff}
.pill-ghost:hover span{transform:translateY(3px)}
.pill:active{transform:translateY(1px)}
.pill:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.pill-red{animation:pill-pulse 2.8s ease-in-out 1.6s 2}
@keyframes pill-pulse{50%{box-shadow:0 14px 30px -12px rgba(227,38,26,.75),0 0 0 10px rgba(227,38,26,.12)}}

.hero2-note{display:flex;align-items:flex-start;gap:9px;margin-top:16px;color:var(--grey);font-size:13.5px;line-height:1.45;max-width:34em}
.hero2-note i{flex:0 0 auto;width:16px;height:16px;margin-top:1px;border-radius:50%;background:#1f9d55;position:relative}
.hero2-note i::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

.hero2-note,.hero2-proof{animation:hero-rise .9s var(--ease-out) both}
.hero2-note{animation-delay:.6s}.hero2-proof{animation-delay:.72s}

/* Плавающие карточки у персонажей: игра и цена — то, что родитель должен увидеть сразу */
.float-card{position:absolute;z-index:2;background:#fff;border-radius:16px;box-shadow:0 20px 40px -18px rgba(10,10,12,.45),0 0 0 1px rgba(10,10,12,.06);
  animation:float-in .9s var(--ease-out) both}
.code-card{left:-6%;top:16%;display:flex;flex-direction:column;gap:5px;padding:14px 16px;background:var(--ink);color:#d9d9df;
  font:500 12.5px/1.3 var(--mono);animation-delay:.9s}
.code-card .fc-head{color:var(--red-lit);font-size:11px;margin-bottom:2px}
.code-card b{color:#fff;font-weight:600}
.code-card .ok{color:#4FC27D}
.price-card{right:2%;top:2%;display:flex;align-items:center;gap:10px;padding:12px 16px;animation-delay:1.05s}
.price-card b{font:800 26px/1 var(--sans);letter-spacing:-.03em;color:var(--red)}
.price-card span{font-size:12px;line-height:1.2;color:var(--grey);font-weight:600}
@keyframes float-in{from{opacity:0;transform:translateY(16px) scale(.94)}}

@media(max-width:900px){.code-card{left:0;top:6%}.price-card{right:0}}
@media(max-width:700px){
  .hero2 h1{font-size:clamp(38px,10.5vw,56px)}
  .hero2-actions{flex-direction:column;align-items:stretch}
  .pill{justify-content:center;white-space:normal;text-align:center;min-height:56px}
  .code-card{font-size:11px;padding:10px 12px;top:4%}
  .price-card{padding:9px 12px}.price-card b{font-size:21px}
}
@media(prefers-reduced-motion:reduce){.pill-red,.float-card,.hero2-note,.hero2-proof{animation:none}}

/* ───────────── три опоры под кнопками ─────────────
   Без плашек и значков: строгая типографика сайта — моно-подпись со слэшем, крупное слово, пояснение.
   Колонки разделены тонкими линиями, сверху чёрная линейка; третья колонка — маршрут обучения. */
.hero2-proof{display:grid;grid-template-columns:1fr 1.05fr 1.25fr;margin:clamp(26px,3vw,38px) 0 0;border-top:2px solid var(--ink)}
.hero2-proof>div{position:relative;padding:16px 18px 2px 0}
.hero2-proof>div+div{padding-left:18px;border-left:1px solid var(--rule)}
.hero2-proof>div::after{content:"";position:absolute;left:0;top:-2px;height:2px;width:100%;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease-out)}
.hero2-proof>div:hover::after{transform:scaleX(1)}
.hero2-proof dt{font:500 11.5px/1 var(--mono);color:var(--grey);letter-spacing:.02em}
.hero2-proof dt span{color:var(--red);font-weight:700;margin-right:2px}
.hero2-proof dd{margin:0}
.hero2-proof .big{margin-top:10px;font:800 clamp(19px,1.75vw,25px)/1.05 var(--sans);letter-spacing:-.035em;white-space:nowrap}
.hero2-proof .big i{font-style:normal;color:var(--red);margin:0 .22em}
.hero2-proof dd:last-child{margin-top:6px;color:var(--grey);font-size:12.5px;line-height:1.35}
/* маршрут: три шага на одной линии, точки зажигаются по очереди */
.steps-line{position:relative;display:flex;justify-content:space-between;gap:8px;margin-top:12px!important;padding-top:19px}
.steps-line::before{content:"";position:absolute;left:4px;right:4px;top:4px;height:2px;background:var(--rule)}
.steps-line::after{content:"";position:absolute;left:4px;right:4px;top:4px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;
  animation:route-draw 1.4s var(--ease-out) 1.1s forwards}
.steps-line b{position:relative;font:700 13px/1.1 var(--sans);letter-spacing:-.01em;white-space:nowrap}
.steps-line b::before{content:"";position:absolute;left:0;top:-19px;width:10px;height:10px;background:var(--paper);border:2px solid var(--ink);
  transform:rotate(45deg);z-index:1;animation:route-dot .4s var(--ease-out) both}
.steps-line b:nth-child(1)::before{animation-delay:1.1s}
.steps-line b:nth-child(2){text-align:center}.steps-line b:nth-child(2)::before{left:calc(50% - 5px);animation-delay:1.55s}
.steps-line b:nth-child(3){text-align:right}.steps-line b:nth-child(3)::before{left:auto;right:0;animation-delay:2s;background:var(--red);border-color:var(--red)}
@keyframes route-draw{to{transform:scaleX(1)}}
@keyframes route-dot{from{background:var(--paper);border-color:var(--rule)}50%{transform:rotate(45deg) scale(1.35)}}
@media(max-width:1100px){.hero2-proof{grid-template-columns:1fr 1fr}.hero2-proof .route{grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid var(--rule);margin-top:14px}}
@media(max-width:700px){
  .hero2-proof{grid-template-columns:1fr 1fr}
  .hero2-proof>div{padding-right:10px}.hero2-proof>div+div{padding-left:12px}
  .hero2-proof .big{font-size:18px;white-space:normal}
}
@media(prefers-reduced-motion:reduce){.steps-line::after{animation:none;transform:none}.steps-line b::before{animation:none}}

/* ───────────── глубина светлых секций ─────────────
   Слои лежат позади содержимого и двигаются медленнее прокрутки (enhance.js, data-speed). */
.has-deco{position:relative;isolation:isolate}
.deco{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.deco>span{position:absolute;will-change:translate}
.deco-slash{font:800 clamp(360px,44vw,700px)/.75 var(--sans);letter-spacing:-.1em;user-select:none}
.deco-slash.outline{right:-4vw;top:-8%;color:transparent;-webkit-text-stroke:1.5px rgba(10,10,12,.09)}
.deco-slash.outline.small{font-size:clamp(160px,18vw,280px);right:6%;top:auto;bottom:-6%;-webkit-text-stroke-color:rgba(227,38,26,.22)}
.deco-slash.outline.left{right:auto;left:-6vw}
.deco-slash.outline.dark{-webkit-text-stroke-color:rgba(10,10,12,.14);right:34%;bottom:-20%}
.deco-slash.solid{left:-5vw;top:-4%;color:rgba(255,255,255,.55)}
.deco-slash.red{right:2vw;top:-18%;color:rgba(227,38,26,.08)}
.deco-grid{inset:10% -2vw 10% 52%;
  background-image:radial-gradient(circle,rgba(10,10,12,.12) 1px,transparent 1.5px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 60% 50%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 60% 60% at 60% 50%,#000 20%,transparent 75%)}
.deco-grid.right{inset:0 -4vw 0 55%}
[data-speed]{will-change:translate}
.cta-duo{z-index:1}
@media(max-width:700px){.deco-slash{font-size:360px}.deco-slash.outline.small{font-size:180px}.deco-grid{left:30%}}

/* Карточки направлений плывут с разной скоростью — поэтому они отдельные, с зазором,
   а не склеенные в одну таблицу: при сдвиге не проглядывает серый фон сетки. */
.class-grid{background:none;border:0;gap:14px}
.class-card{border:1px solid var(--rule)}
.class-card.featured{border-color:var(--ink)}

/* Подвал: контур логотипа вместо набранного слова */
.footer-wordmark svg{display:block;width:min(100%,1180px);height:auto;fill:transparent;stroke:rgba(255,255,255,.14);stroke-width:3;vector-effect:non-scaling-stroke}
/* Появление блоков не должно отменять подъём карточек при наведении */
.js-ready .step.reveal.is-visible:hover,.js-ready .course.reveal.is-visible:hover,.js-ready .contact-card.reveal.is-visible:hover{transform:translateY(-6px)}