/* Homepage hero. Keep the offer readable before asking for input. */
.wb-hero { --hero-red:var(--wb-h-accent,#C41E2E); --hero-dark:#181818; --hero-white:#fff; position:relative; display:flex; flex-direction:column; min-height:100svh; padding:126px 0 0; background:var(--hero-dark); color:#fff; font-family:var(--wb-font-base); }
.wb-hero__media { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.wb-hero__img { position:absolute; width:100%; height:100%; right:0; object-fit:cover; object-position:var(--hero-image-position,50% 57%); opacity:.7; transform:scale(1.025) translate(var(--hero-x,0px),var(--hero-y,0px)); transition:transform .65s cubic-bezier(.2,.7,.3,1); }
.wb-hero__media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--hero-dark) 3%,rgba(24,24,24,.93) 25%,rgba(24,24,24,.4) 68%,rgba(24,24,24,.32)),linear-gradient(0deg,var(--hero-dark),transparent 42%); }
.wb-hero__inner { position:relative; display:grid; grid-template-columns:minmax(0,1fr) clamp(390px,30vw,450px); align-items:center; gap:clamp(32px,3.4vw,60px); flex:1; margin:0 auto; padding:24px 0 32px; }
.wb-hero__eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 20px; color:#e5e5e5; font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
.wb-hero__eyebrow>span { width:7px; height:7px; border-radius:50%; background:var(--hero-red); flex-shrink:0; }
.wb-hero__title { margin:0 0 22px; color:#fff; font-family:var(--wb-font-base); font-size:clamp(44px,4.25vw,72px); font-weight:650; line-height:1.08; letter-spacing:-.045em; text-transform:none; }
.wb-hero__title>span { display:block; }
.wb-hero__title em { display:block; position:relative; width:fit-content; color:#fff; font-style:normal; }
.wb-hero__title em::after { content:""; position:absolute; left:0; bottom:-10px; width:64px; height:3px; border-radius:2px; background:var(--hero-red); }
.wb-hero__lead { margin:0 0 16px; max-width:760px; font-size:clamp(18px,1.65vw,25px); line-height:1.5; color:#f5f5f5; }
.wb-hero__description { max-width:660px; margin:0; color:#d0d0d0; font-size:16px; line-height:1.7; }
.wb-hero__mobile-action { display:none; }
.wb-hero__btn { display:flex; align-items:center; justify-content:center; gap:24px; min-height:54px; padding:14px 21px; border:0; border-radius:12px; font:600 14px/1.4 var(--wb-font-base); text-align:center; text-decoration:none; transition:background .18s,transform .18s,box-shadow .18s; cursor:pointer; }
.wb-hero__btn--main { position:relative; isolation:isolate; overflow:hidden; background:var(--hero-red); color:#fff; box-shadow:inset 0 1px 0 #ffffff30,0 6px 18px #0003; }
.wb-hero__btn--main::after { content:""; position:absolute; pointer-events:none; top:-30%; left:0; width:28%; height:160%; background:linear-gradient(90deg,transparent,#ffffff26,transparent); transform:translateX(-170%) skewX(-18deg); animation:hero-button-sheen 1.1s 1.2s ease-out both; }
@keyframes hero-button-sheen {
 from { opacity:0; transform:translateX(-170%) skewX(-18deg); }
 25% { opacity:1; }
 to { opacity:0; transform:translateX(500%) skewX(-18deg); }
}
.wb-hero__btn--main:hover::after,.wb-hero__btn--main:focus-visible::after,.wb-hero.is-attention-paused .wb-hero__btn--main::after { animation-play-state:paused; }
.wb-hero__btn--main:hover,.wb-hero__btn--main:focus-visible { background:var(--hero-red); color:#fff; transform:translateY(-2px); box-shadow:inset 0 1px 0 #ffffff50,0 10px 24px #0005; }
.wb-hero__btn>span { font-size:21px; line-height:1; transition:transform .2s; }
.wb-hero__btn:hover>span { transform:translateX(3px); }
.wb-hero__btn--main:active { transform:translateY(1px) scale(.985); box-shadow:inset 0 1px 5px #0003; }
/* Only the calculator carries a primary action on desktop. */
.wb-hero__browse { margin-top:30px; }
.wb-hero__catalog { display:inline-flex; align-items:center; justify-content:space-between; gap:26px; min-height:50px; padding:12px 18px; border:1px solid #ffffff60; border-radius:8px; font-size:14px; font-weight:500; color:#fff; transition:background .18s,border-color .18s,transform .18s,box-shadow .18s; }
.wb-hero__catalog:hover,.wb-hero__catalog:focus { background:#ffffff18; border-color:#fff; color:#fff; transform:translateY(-2px); }
.wb-hero__catalog>span { font-size:20px; line-height:1; transition:transform .2s; }
.wb-hero__catalog:hover>span { transform:translateX(3px); }
.wb-hero__micro { margin:10px 0 0; font-size:12px; color:#ccc; }
/* A visible sequence, not navigation: all three deliverables can be scanned. */
.wb-hero__scope { max-width:860px; margin-top:32px; }
.wb-hero__scope-heading { margin:0 0 18px; color:#eee; font:600 14px/1.4 var(--wb-font-base); text-transform:none; }
.wb-hero__steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:0; padding:0; list-style:none; }
.wb-hero__steps li { position:relative; padding-top:13px; border-top:1px solid #ffffff30; }
.wb-hero__steps li::before { content:""; position:absolute; left:0; top:-1px; width:24px; height:2px; background:var(--hero-red); }
.wb-hero__step-number { display:block; margin-bottom:9px; color:#fff; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; }
.wb-hero__steps h3 { margin:0 0 8px; color:#fff; font:600 15px/1.4 var(--wb-font-base); text-transform:none; }
.wb-hero__steps p { margin:0; max-width:25em; color:#ccc; font-size:13px; line-height:1.6; }
/* Opaque fallback; translucent material is enabled only with backdrop-filter support. */
.wb-hero__calc { position:relative; margin:0; padding:22px; border:1px solid #ffffff30; border-top-color:#ffffff70; border-left-color:#ffffff45; border-radius:24px; background:#242424; color:#fff; box-shadow:inset 0 1px 0 #ffffff1f,inset 0 -1px 0 #ffffff08,0 24px 64px #0005; scroll-margin-top:100px; }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 .wb-hero__calc { background:linear-gradient(135deg,#ffffff0f,transparent 42%,#ffffff04),rgba(24,24,24,.72); -webkit-backdrop-filter:blur(26px) saturate(.75); backdrop-filter:blur(26px) saturate(.75); }
}
.wb-hero__calc-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:20px; }
.wb-hero__kicker { margin:0 0 5px; color:#ccc; font-size:11px; font-weight:600; letter-spacing:.055em; text-transform:uppercase; }
.wb-hero__calc h2 { margin:0; color:#fff; font:650 23px/1.25 var(--wb-font-base); letter-spacing:-.035em; text-transform:none; }
.wb-hero__row { min-width:0; margin:0 0 12px; padding:0; border:0; }
.wb-hero__label { display:block; width:auto; margin:0 0 8px; padding:0; color:#ededed; font-size:13px; font-weight:600; }
.wb-hero__seg { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; background:#00000024; border-radius:8px; }
.wb-hero__seg-btn { min-height:44px; padding:8px 6px; border:1px solid transparent; border-radius:6px; background:transparent; color:#ddd; font:500 12px/1.3 var(--wb-font-base); cursor:pointer; transition:background .18s,transform .18s,border-color .18s; }
.wb-hero__seg-btn:hover { background:#ffffff14; }
.wb-hero__seg-btn.is-active { background:#ffffff14; color:#fff; border-color:#ffffff30; box-shadow:inset 0 -2px 0 var(--hero-red),0 2px 6px #0002; font-weight:650; }
.wb-hero__area-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wb-hero__area-row .wb-hero__label { margin:0; }
.wb-hero__area-input { background:#00000020; display:flex; align-items:center; gap:6px; padding:3px 10px; border:1px solid #ffffff40; border-radius:7px; font-size:13px; color:#ccc; }
.wb-hero__area-input input { width:76px; min-height:30px; padding:0; border:0; background:transparent; color:#fff; font:600 17px var(--wb-font-base); text-align:right; appearance:textfield; }
.wb-hero__area-input input::-webkit-inner-spin-button { appearance:none; }
.wb-hero__range { display:block; width:100%; height:28px; margin:4px 0 0; appearance:none; background:transparent; cursor:pointer; }
.wb-hero__range::-webkit-slider-runnable-track { height:4px; border-radius:4px; background:linear-gradient(to right,var(--hero-red) var(--hero-fill,10%),#ffffff35 var(--hero-fill,10%)); }
.wb-hero__range::-moz-range-track { height:4px; border-radius:4px; background:#ffffff35; }
.wb-hero__range::-moz-range-progress { height:4px; border-radius:4px; background:var(--hero-red); }
.wb-hero__range::-webkit-slider-thumb { appearance:none; width:20px; height:20px; margin-top:-8px; border:3px solid #fff; border-radius:50%; background:var(--hero-red); box-shadow:0 0 0 1px #ffffff60,0 2px 6px #0002; }
.wb-hero__range::-moz-range-thumb { width:14px; height:14px; border:3px solid #fff; border-radius:50%; background:var(--hero-red); box-shadow:0 0 0 1px #ffffff60; }
.wb-hero__area-input:focus-within { border-color:#fff; box-shadow:0 0 0 3px #ffffff15; }
.wb-hero__presets { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.wb-hero__presets>span { margin-right:auto; color:#bbb; font-size:11px; }
.wb-hero__presets button { min-height:32px; padding:5px 10px; border:1px solid #ffffff35; border-radius:6px; background:#ffffff08; color:#e2e2e2; font:500 11px/1.4 var(--wb-font-base); cursor:pointer; transition:background .18s,border-color .18s,transform .18s,box-shadow .18s; }
.wb-hero__presets button:hover { border-color:#ffffff80; background:#ffffff18; transform:translateY(-1px); }
.wb-hero__presets button[aria-pressed="true"] { color:#fff; background:#ffffff14; border-color:#ffffff50; box-shadow:inset 0 -2px 0 var(--hero-red); }
.wb-hero__sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.wb-hero__scale { display:flex; justify-content:space-between; margin:0; font-size:11px; color:#bbb; }
.wb-hero__result { margin:12px 0; padding:12px; border:1px solid #ffffff26; border-radius:9px; background:#00000026; }
.wb-hero__kw { display:flex; align-items:baseline; gap:8px; color:#fff; }
.wb-hero__kw b { font-size:32px; line-height:1.2; font-weight:650; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.wb-hero__kw span { font-size:12px; color:#ccc; }
.wb-hero__model { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; color:#fff; font-size:12px; line-height:1.5; text-decoration:underline; text-underline-offset:3px; }
.wb-hero__model:hover { color:#fff; text-decoration-thickness:2px; }
.wb-hero__range-link:hover { color:#fff; text-decoration-thickness:2px; }
.wb-hero__seg-btn:active,.wb-hero__presets button:active,.wb-hero__catalog:active { transform:translateY(1px) scale(.985); }
.wb-hero__over { margin:8px 0 0; font-size:12px; color:#ccc; }
.wb-hero__request { width:100%; }
.wb-hero__range-link { display:block; padding:10px 0 3px; text-align:center; font-size:12px; color:#ddd; text-decoration:underline; text-underline-offset:3px; }
.wb-hero__note { margin:8px 0 0; color:#bbb; font-size:11px; line-height:1.55; }
.wb-hero__facts { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0 auto; padding:25px 0 30px; border-top:1px solid #ffffff26; list-style:none; }
.wb-hero__fact { display:flex; flex-direction:column; gap:6px; padding:0 28px; border-left:1px solid #ffffff26; }
.wb-hero__fact:first-child { padding-left:0; border:0; }
.wb-hero__fact:last-child { padding-right:0; }
.wb-hero__fact b { font-variant-numeric:tabular-nums; color:#fff; font-size:clamp(19px,1.7vw,25px); line-height:1.3; font-weight:600; letter-spacing:-.035em; }
.wb-hero__fact>span { font-size:12px; color:#ccc; }
.wb-hero :is(a,button,input):focus-visible { outline:3px solid #fff; outline-offset:4px; }
.wb-hero__close,.wb-hero__scrim { display:none; }
body.wb-hero-lock { overflow:hidden; }
@media(min-width:768px) and (max-width:1100px) {
 .wb-hero { padding-top:95px; }
 .wb-hero__inner { grid-template-columns:minmax(0,1fr) 360px; gap:24px; }
 .wb-hero__calc { padding:20px; }
 .wb-hero__title { font-size:44px; }
 .wb-hero__eyebrow { font-size:10px; }
 .wb-hero__steps { gap:16px; }
 .wb-hero__steps h3 { font-size:14px; }
 .wb-hero__fact { padding:0 16px; }
}
@media(min-width:768px) and (max-width:959px) {
 .wb-hero__steps { grid-template-columns:1fr; gap:10px; }
 .wb-hero__steps li { display:flex; gap:12px; padding-top:10px; }
 .wb-hero__step-number { margin:2px 0 0; }
 .wb-hero__steps h3 { margin-bottom:3px; }
 .wb-hero__steps p { font-size:12px; line-height:1.5; }
 .wb-hero__scope-heading { margin-bottom:12px; }
 .wb-hero__browse { margin-top:20px; }
 .wb-hero__description { font-size:14px; }
}
@media(max-width:767px) {
 .wb-hero { min-height:0; padding:100px 0 0; }
 .wb-hero__inner { display:block; flex:none; padding-top:0; padding-bottom:30px; }
 .wb-hero__img { width:100%; height:min(920px,100%); transform:none; object-position:var(--hero-mobile-image-position,60% 30%); opacity:.5; -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 30%,#0009 55%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,#000 30%,#0009 55%,transparent 100%); }
 .wb-hero__media::after { background:linear-gradient(90deg,rgba(24,24,24,.8),rgba(24,24,24,.42)); }
 .wb-hero__eyebrow { font-size:10px; margin-bottom:20px; letter-spacing:.055em; }
 .wb-hero__title { font-size:clamp(38px,9.7vw,60px); margin-bottom:20px; }
 .wb-hero__lead { font-size:17px; }
 .wb-hero__description { font-size:13px; line-height:1.6; max-width:420px; }
 .wb-hero__mobile-action { display:block; margin-top:24px; }
 .wb-hero__mobile-action .wb-hero__btn { width:100%; justify-content:space-between; }
 .wb-hero__catalog { min-height:44px; }
 .wb-hero__micro { margin-top:8px; font-size:11px; }
 .wb-hero__scope { margin-top:30px; }
 .wb-hero__scope-heading { margin-bottom:16px; }
 .wb-hero__steps { grid-template-columns:1fr; gap:14px; }
 .wb-hero__steps li { display:flex; gap:16px; padding-top:13px; }
 .wb-hero__step-number { margin:2px 0 0; }
 .wb-hero__steps h3 { margin-bottom:3px; }
 .wb-hero__steps p { max-width:none; font-size:12px; }
 .wb-hero__browse { display:none; }
 .wb-hero__catalog--mobile { display:flex; width:100%; min-height:54px; padding:14px 21px; margin-top:12px; border:1px solid #ffffff60; border-radius:12px; }
 .wb-hero__facts { grid-template-columns:1fr 1fr; gap:22px 0; padding:24px 0 28px; }
 .wb-hero__fact { padding:0 12px; gap:4px; }
 .wb-hero__fact:nth-child(odd) { border:0; padding-left:0; }
 .wb-hero__fact b { font-size:19px; }
 .wb-hero__fact>span { font-size:11px; }
 .wb-hero.is-enhanced .wb-hero__calc { position:fixed; z-index:1000040; left:0; right:0; bottom:0; max-height:92dvh; margin:0; padding:20px 20px max(20px,env(safe-area-inset-bottom)); border-radius:18px 18px 0 0; overflow-y:auto; overscroll-behavior:contain; display:none; }
 .wb-hero.is-enhanced .wb-hero__calc.is-open { display:block; animation:hero-sheet-in .26s cubic-bezier(.2,.7,.3,1); }
 .wb-hero__calc { margin-top:24px; }
 .wb-hero__calc h2 { font-size:22px; }
 .wb-hero__presets button { min-height:44px; }
 .wb-hero__close { display:flex; flex-shrink:0; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid #ffffff35; border-radius:50%; background:#ffffff0d; color:#fff; font:28px/1 var(--wb-font-base); cursor:pointer; }
 .wb-hero__scrim:not([hidden]) { display:block; position:fixed; z-index:1000039; inset:0; background:#000000a6; }
 body.wb-hero-lock :is(.wb-hd,.wb-hdbar,.wb-scroll-top-wrap) { opacity:0; pointer-events:none; }
 .wb-hero__calc { scroll-margin-top:65px; }
}
@media(max-width:767px) and (max-height:700px) {
 .wb-hero { padding-top:78px; }
 .wb-hero__lead { font-size:16px; line-height:1.45; }
 .wb-hero__eyebrow { margin-bottom:16px; }
 .wb-hero__title { margin-bottom:16px; }
}
/* Content enters once. Only the primary button carries a restrained repeating highlight. */
@keyframes hero-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes hero-title-enter { from { transform:translateY(10px); } to { transform:none; } }
@keyframes hero-sheet-in { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
.wb-hero__text>* { animation:hero-enter .55s cubic-bezier(.2,.7,.3,1) backwards; }
.wb-hero__text>.wb-hero__title { animation-name:hero-title-enter; animation-delay:.06s; }
.wb-hero__text>:nth-child(3) { animation-delay:.12s; }
.wb-hero__text>:nth-child(4) { animation-delay:.16s; }
.wb-hero__text>:nth-child(n+5) { animation-delay:.2s; }
.wb-hero__facts { animation:hero-enter .55s .25s backwards; }
@media(min-width:768px) { .wb-hero__calc { animation:hero-enter .6s .15s backwards; } }
@media(min-width:768px) and (max-height:900px) {
 .wb-hero { padding-top:110px; }
 .wb-hero__inner { padding-top:12px; padding-bottom:22px; }
 .wb-hero__title { font-size:clamp(42px,4.2vw,66px); }
 .wb-hero__calc { padding:18px 22px; }
 .wb-hero__calc-head { margin-bottom:16px; }
 .wb-hero__row { margin-bottom:10px; }
 .wb-hero__facts { padding-top:20px; padding-bottom:22px; }
 .wb-hero__scope { margin-top:26px; }
}
@media(min-width:768px) and (max-width:1240px) { .wb-hero { padding-top:76px; } }
@media(min-width:768px) and (max-width:1239px) {
 .wb-hero { padding-bottom:var(--wb-h-bottom-bar,74px); }
}
@media(prefers-reduced-transparency:reduce), (prefers-contrast:more) {
 .wb-hero__calc { background:#242424; -webkit-backdrop-filter:none; backdrop-filter:none; border-color:#fff; }
 .wb-hero__note,.wb-hero__scale,.wb-hero__kicker { color:#fff; }
}
@media(forced-colors:active) {
 .wb-hero__calc { background:Canvas; color:CanvasText; backdrop-filter:none; }
 .wb-hero__seg-btn.is-active,.wb-hero__presets button[aria-pressed="true"] { outline:2px solid Highlight; }
 .wb-hero__btn--main { border:1px solid ButtonText; }
 .wb-hero__btn--main::after { display:none; }
}
@media(prefers-reduced-motion:reduce) {
 .wb-hero *, .wb-hero *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
 .wb-hero__img { transform:none; }
}

/* Свечение отвечает рассчитанной мощности: --hero-heat 0…1 ставит wb_hero.js */
/* верх в пикселях, а не в процентах: при изменении высоты первого экрана слой не сдвигается (иначе CLS) */
.wb-hero__aurora { position:absolute; inset:-100px -10%; background:radial-gradient(ellipse at 76% 40%,#c41e2e36,transparent 42%),radial-gradient(ellipse at 48% 80%,#cc703018,transparent 45%); mix-blend-mode:screen; opacity:calc(.45 + var(--hero-heat,.4) * .75); transition:opacity .8s ease; }
.wb-hero__title em { color:#fff; }
.wb-hero__title em::after { width:clamp(80px,15vw,200px); height:3px; background:linear-gradient(90deg,#C41E2E,#ec8b74,transparent); transform-origin:left; }
.wb-hero__calc { border-top-color:#ffd6ce80; box-shadow:inset 0 1px 0 #ffffff25,0 24px 70px #0006,0 0 calc(50px + var(--hero-heat,.4) * 90px) rgb(196 30 46 / calc(.05 + var(--hero-heat,.4) * .16)); transition:box-shadow .8s ease,border-color .2s ease; }
.wb-hero__calc:focus-within { border-color:#f4a2a66b; }
.wb-hero__scope-heading { color:#e8e8e8; font-size:14px; line-height:1.5; margin-bottom:16px; }

/* Этапы — линия процесса: риска соединяет номера, номера «зажигаются» по очереди */
.wb-hero__steps { gap:0; }
.wb-hero__steps li { position:relative; min-width:0; padding:0 28px 0 0; border:0; background:none; }
.wb-hero__steps li::before { content:""; display:block; position:absolute; top:15px; left:42px; right:10px; width:auto; height:1px; background:linear-gradient(90deg,#c41e2e,#ffffff40); transform-origin:left; }
.wb-hero__steps li:last-child::before { display:none; }
.wb-hero__step-number { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; margin:0 0 14px; flex-shrink:0; border:1px solid #c41e2e80; border-radius:50%; background:#181818; color:#f5b1b8; font-size:11px; font-weight:600; box-shadow:0 0 0 4px #1818188c; transition:background-color .3s ease,color .3s ease,box-shadow .3s ease; }
.wb-hero__steps h3 { margin:0 0 6px; font-size:15px; line-height:1.4; }
.wb-hero__steps p { margin:0; font-size:13px; line-height:1.6; color:#c9c9c9; }
@media(hover:hover) and (pointer:fine) {
 .wb-hero__steps li:hover .wb-hero__step-number { background:#c41e2e; border-color:#c41e2e; color:#fff; box-shadow:0 0 0 4px #1818188c,0 0 22px #c41e2e80; }
}

/* Шкала мощности в результате: сегменты — посадочные диапазоны каталога */
.wb-hero__meter { margin:10px 0 2px; }
.wb-hero__meter-bar { position:relative; height:6px; border-radius:6px; background:#ffffff1f; }
.wb-hero__meter-bar::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent calc(25% - 1px),#1d1d1d calc(25% - 1px) calc(25% + 1px),transparent calc(25% + 1px) calc(50% - 1px),#1d1d1d calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px) calc(75% - 1px),#1d1d1d calc(75% - 1px) calc(75% + 1px),transparent calc(75% + 1px)); pointer-events:none; }
.wb-hero__meter-bar>i { position:absolute; inset:0; border-radius:6px; background:linear-gradient(90deg,#6d1430,#c41e2e 38%,#f37021 72%,#ffd046); clip-path:inset(0 calc(100% - var(--meter,0%)) 0 0 round 6px); transition:clip-path .5s cubic-bezier(.2,.7,.3,1); }
.wb-hero__meter-bar>b { position:absolute; top:50%; left:var(--meter,0%); z-index:1; width:14px; height:14px; border:3px solid #fff; border-radius:50%; background:#c41e2e; box-shadow:0 0 0 1px #0003,0 0 14px #f37021aa; transform:translate(-50%,-50%); transition:left .5s cubic-bezier(.2,.7,.3,1); }
.wb-hero__meter-scale { display:grid; grid-template-columns:repeat(4,1fr); margin:7px 0 0; padding:0; list-style:none; }
.wb-hero__meter-scale li { color:#999; font-size:10px; line-height:1.3; text-align:center; transition:color .3s ease; }
.wb-hero__meter-scale li:first-child { text-align:left; }
.wb-hero__meter-scale li:last-child { text-align:right; }
.wb-hero__meter-scale li.is-active { color:#fff; font-weight:600; }

/* ── Вход: фото «включается», строки заголовка выезжают из-под маски, линия этапов прорисовывается ── */
@keyframes hero-atmosphere { from { opacity:0; transform:scale(1.035); } to { transform:scale(1); } }
@keyframes hero-line { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes hero-line-y { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes hero-image-reveal { from { scale:1.06; filter:saturate(.25) brightness(.55); } to { scale:1; filter:none; } }
@keyframes hero-rise { from { opacity:0; transform:translateY(.45em); clip-path:inset(0 0 100% 0); } to { opacity:1; transform:none; clip-path:inset(-10% -5% -30% -5%); } }
@keyframes hero-ignite { 0% { background:#181818; color:#f5b1b8; } 40% { background:#c41e2e; color:#fff; box-shadow:0 0 0 4px #1818188c,0 0 26px #f37021; } 100% { background:#181818; color:#f5b1b8; } }
@media(prefers-reduced-motion:no-preference) {
 .wb-hero__img { animation:hero-image-reveal 1.8s cubic-bezier(.16,1,.3,1) both; }
 .wb-hero__aurora { animation:hero-atmosphere 1.8s ease-out backwards; }
 .wb-hero__title em::after { animation:hero-line .9s .45s cubic-bezier(.16,1,.3,1) both; }
 .wb-hero__text>.wb-hero__title,.wb-hero__text>.wb-hero__scope { animation:none; }
 .wb-hero__title>span,.wb-hero__title>em { animation:hero-rise 1s cubic-bezier(.16,1,.3,1) backwards; }
 .wb-hero__title>em { animation-delay:.14s; }
 .wb-hero__text>:nth-child(3) { animation-delay:.24s; }
 .wb-hero__text>:nth-child(4) { animation-delay:.3s; }
 .wb-hero__scope-heading { animation:hero-enter .6s .4s cubic-bezier(.16,1,.3,1) backwards; }
 .wb-hero__steps li { animation:hero-enter .65s .45s cubic-bezier(.16,1,.3,1) backwards; }
 .wb-hero__steps li:nth-child(2) { animation-delay:.75s; }
 .wb-hero__steps li:nth-child(3) { animation-delay:1.05s; }
 .wb-hero__steps li::before { animation:hero-line .6s .7s cubic-bezier(.65,0,.35,1) backwards; }
 .wb-hero__steps li:nth-child(2)::before { animation-delay:1s; }
 .wb-hero__step-number { animation:hero-ignite 1.1s .55s ease-out backwards; }
 .wb-hero__steps li:nth-child(2) .wb-hero__step-number { animation-delay:.85s; }
 .wb-hero__steps li:nth-child(3) .wb-hero__step-number { animation-delay:1.15s; }
}
.wb-hero.is-attention-paused *, .wb-hero.is-attention-paused *::before,.wb-hero.is-attention-paused *::after { animation-play-state:paused!important; }

/* Узко: этапы столбиком, линия процесса — вертикальная */
@media(max-width:959px) {
 .wb-hero__steps { grid-template-columns:1fr; gap:14px; }
 .wb-hero__steps li { display:flex; gap:14px; padding:0; }
 .wb-hero__steps li::before { top:34px; bottom:-12px; left:15px; right:auto; width:1px; height:auto; background:linear-gradient(180deg,#c41e2e,#ffffff30); transform-origin:top; }
 .wb-hero__step-number { margin:0; }
 .wb-hero__steps h3 { margin:4px 0 3px; font-size:14px; }
 .wb-hero__steps p { font-size:12px; line-height:1.5; }
}
@media(max-width:959px) and (prefers-reduced-motion:no-preference) {
 .wb-hero__steps li::before { animation-name:hero-line-y; }
}
@media(max-width:767px) {
 .wb-hero__aurora { animation:none; }
 .wb-hero__scope-heading { max-width:28em; font-size:14px; }
}
@media(prefers-reduced-motion:reduce) {
 .wb-hero *, .wb-hero *::before,.wb-hero *::after { animation:none!important; transition:none!important; }
}
@media(forced-colors:active) { .wb-hero__aurora { display:none; } .wb-hero__step-number { border-color:CanvasText; } }

.wb-hero .wb-hero__btn--main:is(:focus,:active) { background:var(--hero-red); color:#fff; }
.wb-hero .wb-hero__btn--main:focus-visible { outline:3px solid #fff; outline-offset:4px; }