/* GOMPA - одноэкранный лендинг поверх видео.
   Язык дизайна: чёрный фон, белые пилюли, дисплейный точечный шрифт Handjet
   (у него есть кириллица - редкость для пиксельных шрифтов). */

:root{
  --bg:#000000;
  --text:#ffffff;
  --muted:#8e8e8e;
  --nav-text:#2e2e2e;
  --pill-dark:#28282a;
  --sign-in-text:#c8c8c8;
  --nav-shadow:0 4px 14px rgba(0,0,0,.16);
  --trust-bg:#28282a;
  --trust-border:rgba(255,255,255,.4);
  --trust-text:#c4c2c3;
  --font-sans:"Inter","Segoe UI",system-ui,sans-serif;
  --font-display:"Handjet",monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-sans);
  height:100vh;height:100dvh;overflow:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ---------- фон ---------- */
.bg{position:absolute;inset:0;background:#000;overflow:hidden}
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0}
/* Вуаль: небо в ролике светлое, без неё белый заголовок теряет контраст */
.bg::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.34) 42%,rgba(0,0,0,.18) 70%,rgba(0,0,0,.45) 100%);
}

/* ---------- каркас ---------- */
.page{
  position:relative;z-index:1;
  height:100vh;height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(16px,2.4vh,28px) clamp(14px,3vw,32px);
}

/* ---------- шапка ---------- */
.header{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  gap:clamp(18px,2.8vw,28px);width:100%;max-width:720px;
  animation:slideDown .7s var(--ease) both;
}
@keyframes slideDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}

.brand{
  width:clamp(40px,4.4vw,46px);height:clamp(40px,4.4vw,46px);flex-shrink:0;
  border-radius:50%;background:#fff;box-shadow:var(--nav-shadow);
  display:grid;place-items:center;text-decoration:none;
  transition:transform .2s var(--ease);
}
.brand:hover{transform:scale(1.04)}
.brand svg{width:67%;height:67%;object-fit:contain}

.nav{
  flex:1;max-width:430px;height:clamp(44px,5.2vw,48px);
  background:#fff;border-radius:999px;box-shadow:var(--nav-shadow);
  display:flex;align-items:center;justify-content:space-around;padding:4px 8px;
}
.nav__link{
  position:relative;border:0;background:none;cursor:pointer;padding:8px 10px;
  font:500 clamp(13px,1.4vw,15px)/1 var(--font-sans);letter-spacing:-.01em;
  color:var(--nav-text);opacity:.5;transition:opacity .2s ease;
}
.nav__link:hover{opacity:.75}
.nav__link.is-active{opacity:1}
.nav__link.is-active::after{
  content:"";position:absolute;left:50%;bottom:5px;width:3px;height:3px;margin-left:-1.5px;
  background:#000;box-shadow:-5px 0 0 #000,5px 0 0 #000;
}

.phone{
  flex-shrink:0;display:inline-flex;align-items:center;height:clamp(44px,5.2vw,48px);
  padding:0 clamp(16px,2vw,20px);border-radius:999px;background:var(--pill-dark);
  color:var(--sign-in-text);text-decoration:none;box-shadow:var(--nav-shadow);
  font:500 clamp(13px,1.4vw,14.5px)/1 var(--font-sans);white-space:nowrap;
  transition:background .2s ease,color .2s ease,transform .2s var(--ease);
}
.phone:hover{background:#323234;color:#fff;transform:translateY(-1px)}
.phone:active{transform:scale(.97)}
/* Фирменная зелень WhatsApp: на тёмной пилюле её узнают мгновенно,
   белый знак читался бы просто как «телефон» */
.phone__wa{width:18px;height:18px;margin-right:9px;color:#25d366;flex:none}
/* Telegram рядом с WhatsApp: тот же приём, узнаваемый цвет знака */
.phone--tg{margin-left:8px}
.phone__tg{width:18px;height:18px;margin-right:9px;color:#229ed9;flex:none}
.phone span{white-space:nowrap}

.burger{display:none}

/* ---------- вход элементов ---------- */
.anim{opacity:0;transform:translateY(22px) scale(.98);filter:blur(6px);
  animation:reveal .85s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes reveal{to{opacity:1;transform:none;filter:none}}

.anim-pulse{opacity:0;transform:translateY(22px) scale(.98);filter:blur(6px);
  animation:revealPulse 1s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes revealPulse{
  60%{opacity:1;transform:translateY(0) scale(1.015);filter:none}
  to{opacity:1;transform:none;filter:none}
}

/* ---------- центр ---------- */
.hero{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;width:100%;max-width:900px;min-height:0;
}

/* доверие */
.trust{--trust-size:clamp(36px,4.5vw,42px);
  display:inline-flex;align-items:center;margin-bottom:clamp(16px,2.5vh,26px)}
.trust__ava{
  width:var(--trust-size);height:var(--trust-size);border-radius:50%;
  background:var(--trust-bg);border:1px solid var(--trust-border);padding:5px;
  display:block;transition:transform .35s var(--ease);
}
.trust__ava span{
  width:100%;height:100%;border-radius:50%;background:#fff;
  display:grid;place-items:center;color:#111;
  font-size:calc(var(--trust-size)*.34);
}
.trust__ava.a1{z-index:1}
.trust__ava.a2{z-index:2;margin-left:calc(var(--trust-size)*-.42)}
.trust__ava.a3{z-index:4;margin-left:calc(var(--trust-size)*-.42)}
.trust:hover .a1{transform:translateY(-2px)}
.trust:hover .a2{transform:translateY(-4px)}
.trust:hover .a3{transform:translateY(-2px)}
.trust__pill{
  height:var(--trust-size);display:inline-flex;align-items:center;
  margin-left:calc(var(--trust-size)*-.42);
  padding:0 16px 0 calc(var(--trust-size)*.58);
  background:var(--trust-bg);border:1px solid var(--trust-border);border-radius:999px;
  font:500 clamp(12px,1.4vw,13.5px)/1 var(--font-sans);color:var(--trust-text);
  white-space:nowrap;
}

/* заголовок */
.headline{
  margin:0 0 clamp(12px,2vh,18px);font-family:var(--font-display);font-weight:500;
  font-size:clamp(34px,7.4vw,96px);line-height:1.02;letter-spacing:.01em;
  text-transform:uppercase;color:#fff;
}
.headline span{
  display:block;white-space:nowrap;overflow:hidden;
  opacity:0;transform:translateY(14px);
  animation:headlineFade .85s var(--ease) forwards;animation-delay:var(--d,0s);
}
@keyframes headlineFade{to{opacity:1;transform:none}}

/* подзаголовок */
.subhead{
  margin:0 0 clamp(18px,3vh,26px);max-width:min(500px,92%);
  font-size:clamp(14px,1.6vw,17px);line-height:1.55;font-weight:400;
  color:#d0d0d0;opacity:.8;
}
.anim.subhead{animation-name:revealSub}
@keyframes revealSub{to{opacity:.8;transform:none;filter:none}}

/* поисковая строка - главный элемент */
.ask{
  display:flex;align-items:center;gap:10px;
  width:min(560px,100%);height:clamp(52px,7vh,60px);
  background:#fff;border-radius:999px;padding:6px 6px 6px 22px;
  box-shadow:0 0 0 1px rgba(255,255,255,.15),0 0 22px rgba(255,255,255,.32),0 0 44px rgba(255,255,255,.12);
  transition:box-shadow .3s ease,transform .3s var(--ease);
}
.ask:focus-within{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.18);
}
.ask__icon{color:#9aa1ab;font-size:15px}
.ask__input{
  flex:1;min-width:0;border:0;outline:0;background:none;
  font:500 clamp(15px,1.7vw,17px)/1.2 var(--font-sans);color:#111;
}
.ask__input::placeholder{color:#8a919c}
.ask__go{
  flex-shrink:0;height:100%;padding:0 clamp(18px,2.4vw,26px);border:0;border-radius:999px;
  background:#111;color:#fff;cursor:pointer;
  font:600 clamp(13.5px,1.5vw,14.5px)/1 var(--font-sans);
  transition:transform .16s var(--ease),background .2s ease;
}
.ask__go:hover{background:#2a2a2c}
.ask__go:active{transform:scale(.96)}

/* подсказки */
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:clamp(12px,2vh,16px)}
.chip{
  border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.25);
  color:var(--trust-text);border-radius:999px;padding:8px 15px;cursor:pointer;
  font:500 12.5px/1 var(--font-sans);
  transition:background .2s ease,color .2s ease,transform .16s var(--ease);
}
.chip:hover{background:rgba(255,255,255,.12);color:#fff}
.chip:active{transform:scale(.95)}

/* ---------- метрики ---------- */
.stats{
  flex-shrink:0;width:100%;max-width:920px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,2vw,20px);
}
.stat{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.stat__icon{font-family:var(--font-display);font-size:clamp(22px,3vw,33px);line-height:1;color:#fff}
.stat__val{
  font:600 clamp(18px,2.2vw,26px)/1.2 var(--font-sans);color:#fff;
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;
}
.stat__label{font-size:clamp(11px,1.2vw,12.5px);color:var(--muted)}

/* Документы - тонкой строкой под метриками, в общем потоке первого экрана.
   Раньше была одна ссылка в углу; с 21.09.2026 их пять (оферта, оплата,
   реквизиты для эквайринга Freedom Pay), и в углу они наезжали на метрики */
.legal-links{
  flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 16px;
  margin-top:clamp(10px,1.6vh,16px);max-width:920px;
}
.legal{color:rgba(255,255,255,.4);text-decoration:none;font-size:11.5px;padding:3px 0;transition:color .2s ease}
.legal:hover{color:rgba(255,255,255,.8)}
.legal-req{flex-shrink:0;margin:2px 0 0;color:rgba(255,255,255,.26);font-size:10.5px;text-align:center}
@media (max-width:720px){
  /* на телефоне в ссылку должен попадать палец: выше строка и крупнее шрифт */
  .legal-links{gap:0 14px;padding:0 8px}
  .legal{font-size:12.5px;padding:7px 0;color:rgba(255,255,255,.5)}
  .legal-req{font-size:11.5px}
  .stat__label{font-size:12px}
}
/* номер и стрелка услуги не переносятся отдельно от строки («04 / →») */
.m-item span{white-space:nowrap;flex:none;margin-left:12px}

/* ---------- всплывающее окно ---------- */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px}
.modal[hidden]{display:none}
.modal__back{
  position:absolute;inset:0;background:rgba(0,0,0,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:overlayIn .28s ease both;
}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.modal__win{
  position:relative;width:min(560px,100%);max-height:min(78vh,720px);overflow:auto;
  background:#17191f;border:1px solid rgba(255,255,255,.09);border-radius:28px;
  padding:26px 26px 24px;box-shadow:0 20px 60px rgba(0,0,0,.45);
  animation:menuIn .38s var(--ease) both;
  overscroll-behavior:contain;
}
@keyframes menuIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.modal__x{
  position:absolute;top:14px;right:14px;border:0;background:rgba(255,255,255,.07);
  width:36px;height:36px;border-radius:50%;color:#cfd5dd;font-size:15px;cursor:pointer;
  display:grid;place-items:center;transition:background .2s ease,transform .16s var(--ease);
}
.modal__x:hover{background:rgba(255,255,255,.14);color:#fff}
.modal__x:active{transform:scale(.92)}

.m-kicker{font:600 11px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:#9aa6b5;margin:0 0 10px}
.m-title{font:600 clamp(19px,2.4vw,23px)/1.25 var(--font-sans);color:#fff;margin:0 0 10px;padding-right:36px}
.m-lead{font-size:14.5px;line-height:1.55;color:#c3cad4;margin:0 0 6px}
.m-h{font:600 12px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:#9aa6b5;margin:20px 0 10px}
.m-steps{margin:0;padding:0;list-style:none;counter-reset:st}
.m-steps li{
  position:relative;padding:0 0 0 34px;margin:0 0 10px;counter-increment:st;
  font-size:14px;line-height:1.5;color:#dbe1e9;
}
.m-steps li::before{
  content:counter(st);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.09);color:#fff;font:600 11.5px/22px var(--font-sans);text-align:center;
}
.m-people{display:flex;flex-wrap:wrap;gap:8px}
.m-person{
  display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:999px;
}
.m-person i{
  width:26px;height:26px;border-radius:50%;background:#fff;color:#111;
  font:600 10.5px/26px var(--font-sans);font-style:normal;text-align:center;
}
.m-person b{font:600 12.5px/1.2 var(--font-sans);color:#fff;display:block}
.m-person small{display:block;font-size:11px;color:#a7b0bd}
.m-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.m-btn{
  display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;cursor:pointer;
  padding:12px 20px;font:600 13.5px/1 var(--font-sans);text-decoration:none;
  transition:transform .16s var(--ease),background .2s ease;
}
.m-btn:active{transform:scale(.96)}
.m-btn--main{background:#fff;color:#111}
.m-btn--main:hover{background:#ececee}
.m-btn--ghost{background:rgba(255,255,255,.08);color:#e6ebf1}
.m-btn--ghost:hover{background:rgba(255,255,255,.15)}
.m-list{display:flex;flex-direction:column;gap:8px}
.m-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);
  border-radius:16px;padding:13px 16px;cursor:pointer;text-align:left;
  font:500 14px/1.35 var(--font-sans);color:#e8edf3;
  transition:background .2s ease,transform .16s var(--ease);
}
.m-item:hover{background:rgba(255,255,255,.1)}
.m-item:active{transform:scale(.985)}
.m-item span{color:#8e99a8}
.m-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ---------- мобильное меню: на весь экран, стекло и фирменное свечение ---------- */
.mmenu{position:fixed;inset:0;z-index:60}
.mmenu[hidden]{display:none}
.mmenu__back{
  position:absolute;inset:0;background:rgba(7,6,11,.78);
  -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);
  animation:overlayIn .3s ease both;overflow:hidden;
}
.mmenu__back::after{
  content:"";position:absolute;left:-30%;right:-30%;bottom:-38%;height:75%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,180,110,.32),rgba(255,159,208,.2) 32%,rgba(191,178,255,.1) 55%,transparent 72%);
  animation:glowIn 1.1s var(--ease) both;
}
@keyframes glowIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.mmenu__sheet{
  position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top,0px) + clamp(16px,2.4vh,28px)) 18px calc(env(safe-area-inset-bottom,0px) + 18px);
}
.mmenu__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(14px,3.2vh,30px)}
.mmenu__brand{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;
  font:600 14px/1 var(--font-sans);letter-spacing:.22em}
.mmenu__brand span{width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center}
.mmenu__brand svg{width:66%;height:66%}
.mmenu__x{
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);
  color:#fff;font-size:18px;display:grid;place-items:center;cursor:pointer;
  animation:xIn .45s var(--ease) both;transition:background .2s ease,transform .16s var(--ease);
}
.mmenu__x:active{transform:scale(.92)}
@keyframes xIn{from{opacity:0;transform:rotate(-90deg) scale(.6)}to{opacity:1;transform:none}}
.mmenu__nav{display:flex;flex-direction:column}
.mmenu__link{
  display:flex;align-items:center;gap:14px;width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.1);
  background:none;color:#fff;cursor:pointer;text-align:left;
  padding:clamp(13px,2.3vh,20px) 4px;font:600 clamp(25px,7.6vw,32px)/1.05 var(--font-sans);letter-spacing:-.03em;
  opacity:0;animation:linkSlide .55s var(--ease) forwards;animation-delay:calc(.06s + .05s * var(--i));
}
.mmenu__link em{flex:none;width:24px;font:500 15px/1 var(--font-display);font-style:normal;color:rgba(255,255,255,.4)}
.mmenu__link.is-active em{color:#ff9fd0}
.mmenu__link > i{margin-left:auto;font-size:15px;color:rgba(255,255,255,.38);transition:transform .25s var(--ease),color .2s ease}
.mmenu__link:hover > i,.mmenu__link:active > i{transform:translateX(4px);color:#fff}
.mmenu__tag{
  font:600 11.5px/1 var(--font-sans);letter-spacing:0;padding:6px 9px;border-radius:999px;color:#16121a;
  background:linear-gradient(92deg,#bfb2ff,#ff9fd0,#ffb46e);
}
@keyframes linkSlide{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes linkIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mmenu__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:clamp(16px,3.2vh,28px)}
.mtile{
  display:flex;flex-direction:column;gap:3px;min-width:0;padding:15px 15px 14px;border-radius:22px;
  color:#fff;text-decoration:none;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  opacity:0;animation:linkIn .5s var(--ease) forwards;animation-delay:calc(.06s + .05s * var(--i));
  transition:transform .16s var(--ease),background .2s ease;
}
.mtile:active{transform:scale(.97)}
.mtile i{font-size:22px;margin-bottom:9px}
.mtile b{font:600 15px/1.2 var(--font-sans)}
.mtile small{font:500 12px/1.3 var(--font-sans);color:rgba(255,255,255,.58);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtile--wa{background:linear-gradient(150deg,rgba(37,211,102,.26),rgba(37,211,102,.07));border-color:rgba(37,211,102,.34)}
.mtile--wa i{color:#25d366}
.mtile--tg{background:linear-gradient(150deg,rgba(42,171,238,.28),rgba(42,171,238,.07));border-color:rgba(42,171,238,.34)}
.mtile--tg i{color:#2aabee}
.mmenu__foot{margin:auto 0 0;padding-top:20px;text-align:center;font-size:11.5px;color:rgba(255,255,255,.38)}
body.menu-open{overflow:hidden}

/* ---------- адаптив ---------- */
@media (max-width:720px){
  .nav,.phone{display:none}
  .header{justify-content:space-between;max-width:none}
  .brand{width:48px;height:48px}
  .burger{
    display:grid;place-items:center;gap:0;width:48px;height:48px;border:0;border-radius:50%;
    background:var(--pill-dark);cursor:pointer;box-shadow:var(--nav-shadow);
    transition:background .25s ease;
  }
  .burger span{
    display:block;width:18px;height:1.5px;background:#fff;margin:2.5px 0;
    grid-area:1/1;transition:transform .3s var(--ease),background .25s ease;
  }
  .burger span:nth-child(1){transform:translateY(-6.5px)}
  .burger span:nth-child(3){transform:translateY(6.5px)}
  body.menu-open .burger{background:#fff}
  body.menu-open .burger span{background:#000}
  body.menu-open .burger span:nth-child(1){transform:rotate(45deg)}
  body.menu-open .burger span:nth-child(2){transform:scaleX(0)}
  body.menu-open .burger span:nth-child(3){transform:rotate(-45deg)}
  .stats{grid-template-columns:1fr 1fr;row-gap:14px}
  .headline{letter-spacing:0;font-size:clamp(30px,10.4vw,54px)}
  .m-grid{grid-template-columns:1fr}
}
@media (max-width:420px){
  .trust{--trust-size:34px}
  .trust__pill{font-size:12px}
}
@media (max-height:700px){
  .trust{margin-bottom:12px}
  .subhead{margin-bottom:14px}
  .headline{font-size:clamp(30px,6vw,64px)}
}
@media (max-height:600px){
  .page{overflow-y:auto}
  .chips{display:none}
}

/* ---------- презентация ---------- */
.promo{
  display:inline-flex;align-items:center;gap:12px;margin:clamp(12px,2vh,18px) 0 clamp(10px,2vh,16px);
  padding:6px 18px 6px 6px;border-radius:999px;cursor:pointer;color:#fff;text-align:left;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .25s var(--ease),background .25s ease,border-color .25s ease;
  animation:promoIn .9s var(--ease) .62s both;
}
/* своё появление: общий .anim сбрасывает transform и сдвинул бы карточку */
@keyframes promoIn{from{opacity:0;translate:0 22px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:none}}
.promo:hover{background:rgba(0,0,0,.5);border-color:rgba(255,255,255,.4);transform:translateY(-2px)}
.promo:active{transform:scale(.97)}
.promo:focus-visible{outline:2px solid #fff;outline-offset:3px}
.promo__frame{
  position:relative;flex:none;width:46px;height:46px;border-radius:50%;padding:2px;
  background:conic-gradient(from 200deg,#bfb2ff,#ff9fd0,#ffb46e,#bfb2ff);
}
.promo__prev{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;border:2px solid #000;background:#000}
.promo__play{
  position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.8);pointer-events:none;
}
.promo__txt{display:flex;flex-direction:column;line-height:1.15}
.promo__txt b{font:600 14px/1.2 var(--font-sans)}
.promo__txt small{font:500 12px/1.3 var(--font-sans);color:rgba(255,255,255,.62)}

/* На широком экране - вертикальная карточка справа, как история в соцсетях */
@media (min-width:1100px) and (min-height:640px){
  .promo{
    position:absolute;right:clamp(28px,4vw,72px);top:50%;margin:0;
    flex-direction:column;align-items:center;gap:12px;padding:0;border:0;background:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;text-align:center;
    transform:translateY(-50%);
  }
  .promo:hover{background:none;transform:translateY(calc(-50% - 4px))}
  .promo:active{transform:translateY(-50%) scale(.98)}
  .promo__frame{width:clamp(150px,12vw,184px);height:auto;aspect-ratio:9/16;border-radius:26px;padding:3px;
    box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 60px rgba(255,159,208,.18)}
  .promo__prev{border-width:3px;border-radius:23px}
  .promo__play{font-size:18px}
  .promo__play i{
    width:52px;height:52px;border-radius:50%;display:grid;place-items:center;padding-left:3px;
    background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.35);transition:transform .25s var(--ease),background .25s ease;
  }
  .promo:hover .promo__play i{transform:scale(1.1);background:rgba(255,255,255,.28)}
  .promo__txt b{font-size:14px}
}

/* окно с роликом: без рамки, по высоте экрана */
.modal--video .modal__win{
  width:auto;max-height:none;overflow:visible;padding:0;background:none;border:0;box-shadow:none;
}
.m-video{
  display:block;width:min(calc(88dvh * 9 / 16),calc(100vw - 36px),480px);height:auto;aspect-ratio:9/16;
  border-radius:24px;background:#000;object-fit:cover;
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12);
}
.modal--video .modal__x{top:0;right:-52px;background:rgba(255,255,255,.14);color:#fff}
@media (max-width:620px){
  .modal--video .modal__x{top:10px;right:10px;z-index:2;background:rgba(0,0,0,.55)}
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Телефон: всё не помещается в один экран - страница прокручивается,
   иначе кнопки наезжали на цифры, а плашка «Эксперты» на логотип */
@media (max-width:720px){
  body{height:auto;min-height:100dvh;overflow-y:auto}
  .page--home{height:auto;min-height:100vh;min-height:100dvh;overflow:visible}
  .bg{position:fixed}
  .page--home .hero{flex:none;padding:clamp(22px,5vh,40px) 0 4px}
  .page--home .stats{margin-top:14px}
}

/* ---------- движение по желанию ---------- */
@media (prefers-reduced-motion:reduce){
  .promo{animation:none}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .anim,.anim-pulse,.headline span{opacity:1;transform:none;filter:none;animation:none}
  .anim.subhead{opacity:.8}
  .bg-video{display:none}
}

/* --- живой ответ в окне поиска --- */
.m-answer{
  margin:14px 0 4px;
  font-size:15.5px;line-height:1.65;color:#dbe1e9;
}
.m-answer p{margin:0 0 10px}
.m-answer p:last-child{margin-bottom:0}

/* Три точки, пока ИИ думает. Пустое окно на пару секунд читается
   как «сломалось», а точки - как «идёт работа». */
.m-typing{display:flex;gap:6px;align-items:center;margin:18px 0 4px;height:10px}
.m-typing i{
  width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.25;
  animation:m-dot 1.2s ease-in-out infinite;
}
.m-typing i:nth-child(2){animation-delay:.15s}
.m-typing i:nth-child(3){animation-delay:.3s}
@keyframes m-dot{
  0%,60%,100%{opacity:.25;transform:translateY(0)}
  30%{opacity:.9;transform:translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){
  .m-typing i{animation:none;opacity:.5}
}

/* ================= страница 404 =================
   Метафора взята из самой отрасли: для железной дороги 404 - это тупик,
   путь, который обрывается упором. Понятнее любой сломанной картинки,
   и клиент как раз строит тупики - шутка своя, не заимствованная. */

/* Шапка без разделов: всплывающие окна главной сюда не подключены,
   вести человека вглубь отсюда некуда */
.header--plain{justify-content:space-between;max-width:900px}

.e404-badge{
  display:inline-flex;align-items:center;height:30px;padding:0 15px;
  margin-bottom:clamp(12px,2vh,20px);
  background:var(--trust-bg);border:1px solid var(--trust-border);border-radius:999px;
  font:500 12.5px/1 var(--font-sans);color:var(--trust-text);
  letter-spacing:.02em;white-space:nowrap;
}

/* ---------- путь и упор ---------- */
.e404-track{
  width:min(560px,90%);margin:clamp(6px,1.6vh,14px) 0 clamp(16px,2.6vh,24px);
}
.e404-track svg{display:block;width:100%;height:auto;overflow:visible}

.e404-sleepers rect{fill:rgba(255,255,255,.16)}
.e404-rail{stroke:rgba(255,255,255,.75);stroke-width:3;fill:none;stroke-linecap:round}
/* Торцы рельсов у упора - светлее: взгляд должен упереться туда же,
   куда упирается путь */
.e404-stop rect{fill:rgba(255,255,255,.85)}
/* Единственное цветное пятно на всей странице. Упор красный не для красоты:
   в жизни он такой, и красный здесь читается как «дальше нельзя».
   Селектор обязательно с родителем: у правила выше вес больше, и одного
   класса не хватало - брус выходил белым и упор терялся в рельсах. */
.e404-stop .e404-beam{fill:#d8442f}

/* Путь прокладывается слева направо и упирается в упор. Анимацию видят
   один раз и случайно, поэтому её можно позволить: она объясняет картинку.
   Рельсы рисуются штрихом, шпалы проявляются по очереди, упор встаёт
   последним - в этом порядке смысл и читается. */
@media (prefers-reduced-motion:no-preference){
  .e404-rail{
    stroke-dasharray:470;stroke-dashoffset:470;
    animation:railDraw .9s var(--ease) .35s forwards;
  }
  .e404-sleepers rect{
    opacity:0;animation:sleeperIn .4s var(--ease) forwards;
  }
  .e404-sleepers rect:nth-child(1){animation-delay:.38s}
  .e404-sleepers rect:nth-child(2){animation-delay:.44s}
  .e404-sleepers rect:nth-child(3){animation-delay:.50s}
  .e404-sleepers rect:nth-child(4){animation-delay:.56s}
  .e404-sleepers rect:nth-child(5){animation-delay:.62s}
  .e404-sleepers rect:nth-child(6){animation-delay:.68s}
  .e404-sleepers rect:nth-child(7){animation-delay:.74s}
  .e404-sleepers rect:nth-child(8){animation-delay:.80s}
  .e404-sleepers rect:nth-child(9){animation-delay:.86s}
  .e404-sleepers rect:nth-child(10){animation-delay:.92s}
  .e404-stop{
    opacity:0;transform:translateX(14px);transform-origin:right center;
    animation:stopIn .5s var(--ease) 1.05s forwards;
  }
}
@keyframes railDraw{to{stroke-dashoffset:0}}
@keyframes sleeperIn{to{opacity:1}}
@keyframes stopIn{to{opacity:1;transform:none}}

/* Ссылки-подсказки на 404 выглядят как обычные пилюли, но это ссылки */
.chip[href]{text-decoration:none;display:inline-flex;align-items:center}

/* Иконка лупы здесь своя, векторная: страницу ошибки отдаёт nginx,
   и тянуть ради одного значка целый шрифт со стороннего домена незачем -
   он может и не успеть загрузиться */
.ask svg.ask__icon{width:17px;height:17px;flex:none;color:#9aa1ab}

/* На телефоне у главной вместо шапки бургер, и общее правило прячет там
   и телефон. На 404 бургера нет, а WhatsApp - главный способ до нас достучаться,
   поэтому пилюлю возвращаем, оставляя от неё один значок */
@media (max-width:720px){
  .header--plain .phone{display:inline-flex;padding:0 13px}
  .header--plain .phone span{display:none}
  .header--plain .phone__wa{margin-right:0}
}
@media (max-width:560px){
  .e404-track{width:94%}
}

/* ================= обновление главной 29.09.2026 ================= */
/* шапка: логотип слева, разделы по центру, связь и кабинет справа */
@media (min-width:721px){
  .header:not(.header--plain){display:grid;grid-template-columns:1fr auto 1fr;max-width:1320px;gap:16px}
  .brand{justify-self:start}
  .nav{width:clamp(360px,34vw,460px);flex:none}
  .header__act{justify-self:end;display:flex;align-items:center;gap:10px}
  .phone--tg{margin-left:0}
}
.nav__link{border-radius:999px;transition:opacity .2s ease,background .2s ease}
.nav__link:hover{opacity:1;background:rgba(0,0,0,.05)}
.nav__link:focus-visible,.phone:focus-visible,.chip:focus-visible,.brand:focus-visible{outline:2px solid #fff;outline-offset:3px}
.phone--cab{gap:9px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.phone--cab:hover{background:rgba(255,255,255,.2)}
.phone--cab i{font-size:15px}
/* планшет и узкий ноутбук: связь и кабинет круглыми значками */
@media (min-width:721px) and (max-width:1180px){
  .header__act .phone{width:clamp(44px,5.2vw,48px);padding:0;justify-content:center}
  .header__act .phone span{display:none}
  .header__act .phone svg,.header__act .phone i{margin:0}
}

/* заголовок: вторая строка с мягким фирменным переливом */
.headline span:nth-child(2){
  background:linear-gradient(100deg,#fff 0%,#fff 34%,#ffd9ec 44%,#e4ddff 52%,#ffe2c7 60%,#fff 70%,#fff 100%);
  background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:headlineFade .85s var(--ease) forwards,shine 7s ease-in-out 1.6s infinite;
  animation-delay:var(--d,0s),1.6s;
}
@keyframes shine{0%{background-position:100% 0}55%,100%{background-position:0 0}}
.subhead{color:#e4e4e4}

/* поиск: фирменное свечение при вводе */
.ask:focus-within{
  box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 0 5px rgba(255,159,208,.22),0 0 40px rgba(255,190,225,.45),0 0 80px rgba(191,178,255,.2);
}

/* подсказки: стекло и значки */
.chip{display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,.3);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chip i{font-size:11px;opacity:.7}
.chip:hover{transform:translateY(-1px)}

/* метрики: стеклянные карточки, цифры фирменным шрифтом */
.stats{max-width:1000px;gap:clamp(8px,1.4vw,16px)}
.stat{
  position:relative;gap:2px;padding:clamp(12px,1.9vh,18px) 10px clamp(10px,1.6vh,15px);border-radius:22px;
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .3s var(--ease),border-color .3s ease,background .3s ease;
}
.stat:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.24)}
.stat__icon{position:absolute;top:10px;left:14px;font-size:clamp(15px,1.6vw,19px);color:rgba(255,255,255,.34)}
.stat__val{
  font:500 clamp(30px,3.6vw,46px)/1 var(--font-display);letter-spacing:.02em;
  background:linear-gradient(95deg,#fff 30%,#ffd9ec 70%,#ffe2c7);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat__label{color:rgba(255,255,255,.58)}

/* низкий экран ноутбука: всё должно остаться на одном экране */
@media (min-width:721px) and (max-height:760px){
  .stat{padding:9px 10px 8px;border-radius:18px}
  .stat__icon{top:8px}
  .stat__val{font-size:clamp(26px,3vw,36px)}
  .legal-links{margin-top:8px}
}

/* большие мониторы: крупнее, чтобы главная не терялась в пустоте */
@media (min-width:1600px) and (min-height:860px){
  .headline{font-size:clamp(96px,6.4vw,132px)}
  .subhead{font-size:19px;max-width:620px}
  .ask{width:min(660px,100%);height:66px}
  .ask__input{font-size:18px}
  .ask__go{font-size:15.5px}
  .chip{font-size:14px;padding:10px 18px}
  .trust{--trust-size:48px}
  .trust__pill{font-size:15px}
  .stats{max-width:1180px}
  .stat__label{font-size:14px}
  .legal{font-size:12.5px}
}

/* телефон: карточки метрик компактнее, документы аккуратной сеткой */
@media (max-width:720px){
  .page--home .stats{gap:10px;padding:0 2px}
  .stat{border-radius:20px;padding:14px 8px 12px}
  .stat__val{font-size:38px}
  .legal-links{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;text-align:center;margin-top:16px}
  .legal-req{margin-top:8px;padding-bottom:6px}
  .chip{padding:10px 15px;font-size:13px}
}
@media (max-width:360px){
  .stat__val{font-size:32px}
  .stat__label{font-size:11px}
}

/* Футер главной (29.09.2026): документы со значками одной строкой под тонкой
   светящейся чертой, на телефоне - стеклянными таблетками. Реквизиты через
   точки. Айфон делал БИН синей ссылкой-телефоном: выключено meta
   format-detection, а на случай старых браузеров ссылки детекторов гасим тут */
.legal-links{
  /* 10 ссылок (услуги и цены, оферты владельцам и экспертам, 02.10.2026):
     на компьютере две ровные строки 5+5, перенос задан ниже */
  position:relative;max-width:1320px;gap:6px 22px;
  margin-top:clamp(14px,2.2vh,24px);padding-top:clamp(12px,1.8vh,18px);
}
.legal-links::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(560px,80%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,190,225,.35),rgba(191,178,255,.3),transparent);
}
.legal{
  display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.46);
  font-size:12px;letter-spacing:.01em;
}
.legal i{font-size:10.5px;color:rgba(255,255,255,.3);transition:color .2s ease,transform .25s var(--ease)}
.legal:hover{color:#fff}
.legal:hover i{color:#ffb3d6;transform:translateY(-1px)}
.legal:focus-visible{outline:none;color:#fff;text-decoration:underline;text-underline-offset:4px}
.legal-req{
  display:flex;flex-wrap:wrap;justify-content:center;margin-top:8px;
  color:rgba(255,255,255,.3);font-size:11px;letter-spacing:.02em;
}
.legal-req span + span::before{content:"·";margin:0 9px;color:rgba(255,255,255,.2)}
.legal-req a,a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font:inherit!important}

/* Десять ссылок в одну строку не входят: ровно 5 + 5, а не 7 + 3. Уже
   1024px пять в строку не помещаются - там перенос по ширине */
@media (min-width:1024px){
  .legal-links::after{content:"";flex-basis:100%;order:1}
  .legal:nth-child(n+6){order:2}
}
@media (min-width:721px) and (max-height:760px){
  .legal-links{margin-top:10px;padding-top:9px}
  .legal-req{margin-top:5px}
}
@media (min-width:1600px) and (min-height:860px){
  .legal{font-size:13px}
  .legal-req{font-size:12px}
}
@media (max-width:720px){
  .legal-links{
    display:flex;flex-wrap:wrap;justify-content:center;gap:7px 6px;
    margin-top:20px;padding:16px 0 0;
  }
  .legal-links::before{width:70%}
  .legal{
    gap:6px;padding:8px 11px;border-radius:999px;font-size:12px;color:rgba(255,255,255,.72);
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  }
  .legal i{font-size:10px;color:rgba(255,255,255,.42)}
  .legal:active{background:rgba(255,255,255,.12)}
  .legal-req{margin-top:16px;padding-bottom:10px;font-size:11.5px;row-gap:2px}
}
@media (max-width:400px){
  .legal{padding:7px 10px;font-size:11.5px}
  .legal-req{font-size:10.5px;letter-spacing:0}
  .legal-req span + span::before{margin:0 6px}
}

/* ================= расчёт и заявка прямо на сайте 05.10.2026 ================= */
/* Мурат: «зашёл и ничего не понял, кроме рекламы WhatsApp». Две главные
   кнопки под подзаголовком: что здесь можно сделать, видно первым */
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0 0 clamp(14px,2.4vh,22px)}
.cta__btn{
  display:inline-flex;align-items:center;gap:10px;height:clamp(48px,6.4vh,56px);
  padding:0 clamp(20px,2.4vw,30px);border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.34);background:rgba(0,0,0,.38);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font:600 clamp(14.5px,1.6vw,16px)/1 var(--font-sans);
  transition:transform .2s var(--ease),background .2s ease,box-shadow .3s ease;
}
.cta__btn i{font-size:.95em;opacity:.85}
.cta__btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.14)}
.cta__btn:active{transform:scale(.97)}
.cta__btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cta__btn--main{
  border-color:transparent;color:#111;
  background:linear-gradient(100deg,#ffe3f1 0%,#ece6ff 55%,#ffead6 100%);
  box-shadow:0 0 26px rgba(255,190,225,.4),0 0 60px rgba(191,178,255,.18);
}
.cta__btn--main:hover{background:linear-gradient(100deg,#fff 0%,#f3efff 55%,#fff1e4 100%);
  box-shadow:0 0 34px rgba(255,190,225,.55),0 0 70px rgba(191,178,255,.25)}
/* строка вопроса теперь вторая: свечение тише, чтобы не спорить с кнопками */
.ask{height:clamp(46px,6vh,54px);
  box-shadow:0 0 0 1px rgba(255,255,255,.15),0 0 16px rgba(255,255,255,.18)}

/* «Как это работает»: три шага карточками на месте прежних цифр */
.stats--how{max-width:880px}
.stats.stats--how{grid-template-columns:repeat(3,1fr)}
.stats--how .stat{font:inherit;color:inherit;text-decoration:none;cursor:pointer;width:100%}
.stats--how .stat:focus-visible{outline:2px solid #fff;outline-offset:3px}
.stats--how .stat__icon{font-family:var(--font-display);color:rgba(255,255,255,.5)}
.stats--how .stat__val{text-transform:uppercase}

/* поля формы в окне */
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:16px}
.f-field{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-width:0;text-align:left}
.f-field span{font:500 12.5px/1.25 var(--font-sans);color:#aab4c1}
.f-field i{font-style:normal;font-weight:400;color:#6f7986}
.f-field input,.f-field select{
  width:100%;height:46px;padding:0 13px;border-radius:13px;outline:0;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;
  font:500 16px/1 var(--font-sans);transition:border-color .2s ease,box-shadow .2s ease;
}
.f-field select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#aab4c1 50%),linear-gradient(135deg,#aab4c1 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px;background-repeat:no-repeat}
.f-field select option{background:#17191f;color:#fff}
.f-field input::placeholder{color:#6f7986}
.f-field input:focus,.f-field select:focus{border-color:rgba(255,190,225,.6);box-shadow:0 0 0 3px rgba(255,159,208,.16)}
.f-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.f-note{font-size:12.5px;line-height:1.5;color:#8e99a8;margin:12px 0 0}
.f-note a{color:#cfd5dd}
.f-note--pay{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.f-err{font-size:13.5px;line-height:1.5;color:#ffb3b3;margin:12px 0 0}
.f-err a{color:#fff}
.f .m-actions{margin-top:16px}
.f-next{margin-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.f-next .m-h{margin-top:18px}
.m-btn[disabled]{opacity:.55;cursor:wait}
.m-calc{
  margin:18px 0 4px;padding:16px 18px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  white-space:pre-wrap;font:14px/1.6 var(--font-sans);color:#dbe1e9;overflow-wrap:anywhere;
}
.m-calc b{color:#fff;font-weight:600}

@media (max-width:720px){
  .cta{width:100%;max-width:420px}
  .cta__btn{flex:1 1 180px;justify-content:center;height:52px}
  .stats--how .stat{padding:14px 6px 12px}
  .stats--how .stat__val{font-size:30px}
  .stats--how .stat__label{font-size:11.5px;line-height:1.3}
}
@media (max-width:420px){
  .f-grid{gap:10px 8px}
  .f-field input,.f-field select{padding:0 10px}
  .modal__win{padding:22px 18px 20px}
}
@media (min-width:721px) and (max-height:760px){
  .cta{margin-bottom:12px}
  .cta__btn{height:46px}
}
@media (min-width:1600px) and (min-height:860px){
  .cta__btn{height:60px;font-size:17px}
  .stats--how{max-width:1000px}
}

/* карточки экспертов нажимаются: вопрос эксперту прямо на сайте (Мурат 05.10.2026) */
button.m-person{font:inherit;color:inherit;text-align:left;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .16s var(--ease)}
button.m-person:hover{background:rgba(255,255,255,.11);border-color:rgba(255,190,225,.4)}
button.m-person:active{transform:scale(.98)}
button.m-person:focus-visible{outline:2px solid rgba(255,190,225,.7);outline-offset:2px}
.m-person em{font-size:11px;color:#8e99a8;margin-left:auto;padding-left:4px;transition:transform .2s ease,color .2s ease}
button.m-person:hover em{color:#fff;transform:translateX(2px)}
.m-grid .m-person{width:100%}
.m-h__hint{font-weight:400;text-transform:none;letter-spacing:0;color:#8e99a8}
.f-field--wide{margin-top:16px}
.f-field textarea{
  width:100%;min-height:84px;padding:11px 13px;border-radius:13px;outline:0;resize:vertical;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;
  font:500 16px/1.4 var(--font-sans);transition:border-color .2s ease,box-shadow .2s ease;
}
.f-field textarea::placeholder{color:#6f7986}
.f-field textarea:focus{border-color:rgba(255,190,225,.6);box-shadow:0 0 0 3px rgba(255,159,208,.16)}

/* Регистрация видна сразу (проверка Freedom Pay 09.10.2026: «отсутствует
   возможность зарегистрироваться на сайте») - и на телефоне, рядом с меню */
@media (min-width:721px) and (max-width:1180px){
  .header__act .phone--cab{width:auto;padding:0 14px;gap:8px}
  .header__act .phone--cab span{display:inline}
  .header__act .phone--cab i{margin:0}
}
@media (max-width:720px){
  .header__act{display:flex;align-items:center;margin-left:auto;margin-right:10px}
  .header__act .phone--cab{display:inline-flex;height:44px;padding:0 14px;font-size:13.5px}
  .header__act .phone--cab span{display:inline}
}

/* ================= главная на любом экране 22.10.2026 ================= */
/* Ильяс прислал Safari на ноутбуке: плашка «Эксперты» наезжала на меню, а
   подсказки прятались под карточками шагов. Заголовок рос по ширине окна и
   не учитывал высоту, а страница была ровно в экран и лишнее уходило под низ.
   Теперь заголовок ограничен и высотой окна, а если всё равно не влезает,
   главная прокручивается, но ничего ни на что не наезжает */
.headline{font-size:clamp(30px,min(7.4vw,9vh),96px)}
@media (min-width:1600px) and (min-height:860px){
  .headline{font-size:clamp(80px,min(6.4vw,10.5vh),132px)}
}
body:has(.page--home){height:auto;min-height:100dvh;overflow-y:auto}
.page--home{height:auto;min-height:100vh;min-height:100dvh;overflow:visible}
body:has(.page--home) .bg{position:fixed}
.page--home .hero{flex:1 0 auto;padding:4px 0}
/* карточка ролика справа: шаги «Ставка, Заявка, Оплата» сужаются, чтобы не
   заходить под неё на ноутбуках 1100-1300px */
@media (min-width:1100px) and (min-height:640px){
  .stats--how{max-width:min(880px,calc(100vw - 2 * (clamp(150px,12vw,184px) + clamp(28px,4vw,72px) + 20px)))}
}
@media (min-width:1600px) and (min-height:860px){
  .stats--how{max-width:min(1000px,calc(100vw - 2 * (clamp(150px,12vw,184px) + clamp(28px,4vw,72px) + 20px)))}
}
@media (min-width:721px) and (max-height:820px){
  .page--home{padding-bottom:8px}
}