/* KAZLOGIST.KZ — публичная часть. Токены по макету от 07.09.2026: светлый фон,
   тёмно-зелёный #0B1F1A, акцент #1F8A66, засечки Playfair для заголовков разделов. */
:root {
  --bg: #F5F8F9; --bg-2: #EEF3F4; --white: #FFFFFF;
  --ink: #0B1512; --ink-2: #1F2B27; --mute: #5F6E69; --mute-2: #8A9893; --line: #DCE4E1;
  --green: #1F8A66; --green-2: #146A4E; --mint: #8FF0CF; --mint-2: #BFF3E4;
  --dark: #0B1F1A; --dark-2: #12312A; --dark-3: #163A32;
  --r: 22px; --r-sm: 14px;
  --wrap: 1360px; --pad: clamp(16px, 4vw, 56px);
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { margin: 0; font: 16px/1.55 var(--sans); color: var(--ink); background: var(--bg); overflow-x: clip }
html { overflow-x: clip }
img { display: block; max-width: 100% }
a { color: inherit; text-decoration: none }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.01em }
p { margin: 0 }
.wrap { width: min(var(--wrap), 100% - var(--pad) * 2); margin-inline: auto }
.skip { position: absolute; left: -999px }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0 }

/* ---- типографика */
.kicker { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--green); font-weight: 600; margin-bottom: 14px }
.kicker--light { color: var(--mint) }
.kicker--line { display: flex; align-items: center; gap: 14px; color: var(--mute) }
.kicker--line::after { content: ""; width: 92px; height: 1px; background: var(--line-2, #B9C6C1) }
.h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.08; letter-spacing: -.02em; font-weight: 500 }
.h2.serif, .serif { font-family: var(--serif); font-weight: 400 }
.sec-h { display: grid; gap: 22px; margin-bottom: 30px; align-items: end }
.sec-h p { color: var(--mute); font-size: 15px; max-width: 42ch; margin-bottom: 10px }
.link { display: inline-flex; align-items: center; gap: 10px; font-weight: 500 }
@media (min-width: 900px) { .sec-h { grid-template-columns: 1.2fr 1fr } .sec-h__r { text-align: right } .sec-h__r p { margin-left: auto } }

/* ---- кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 20px 14px 24px; border-radius: 999px;
       font-weight: 500; font-size: 15px; border: 1px solid transparent; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s; cursor: pointer; font-family: inherit }
.btn:hover { transform: translateY(-2px) }
.btn--dark { background: var(--dark); color: #fff; box-shadow: 0 14px 30px -14px rgba(11,31,26,.65) }
.btn--dark:hover { background: var(--dark-2) }
.btn--light { background: #fff; color: var(--dark); border-color: #fff }
.btn--ghost { background: transparent; color: var(--dark); border-color: rgba(11,31,26,.25) }
.btn--ghost:hover { background: rgba(11,31,26,.04) }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35) }
.btn--ghost-light:hover { background: rgba(255,255,255,.06) }
.btn--lg { padding: 18px 22px 18px 30px; font-size: 16px }
.btn--wide { width: 100% }
.btn__arr { width: 18px; height: 10px; position: relative; flex: none }
.btn__arr::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 1.5px; background: currentColor; transform: translateY(-50%) }
.btn__arr::after { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: translateY(-50%) rotate(45deg) }
.btn--dark .btn__arr { color: var(--mint) }
.circ { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(11,31,26,.25); display: grid; place-items: center; flex: none; position: relative; transition: background .3s, border-color .3s }
.circ::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg) translate(-1px, 1px) }
a:hover > .circ, a:hover .circ { background: var(--dark); color: #fff; border-color: var(--dark) }
.play { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; color: var(--ink-2); line-height: 1.3 }
.play__btn { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(11,31,26,.3); background: rgba(255,255,255,.65); backdrop-filter: blur(6px); display: grid; place-items: center; flex: none; transition: transform .35s var(--ease) }
.play__btn::after { content: ""; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 4px }
.play:hover .play__btn { transform: scale(1.06) }
.play--light { color: #fff } .play--light .play__btn { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08) }

/* ---- иконки (inline SVG через mask, один цвет) */
.ic { display: inline-block; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; flex: none }
.ic-phone { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M5 4h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") }
.ic-mail  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") }
.ic-pin   { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") }
.ic-wa    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/%3E%3C/svg%3E") }
.ic-tg    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M21.5 3.5 2.8 10.7c-1.3.5-1.3 1.2-.2 1.5l4.8 1.5 11.1-7c.5-.3 1-.1.6.2l-9 8.1-.3 4.9c.5 0 .7-.2 1-.5l2.3-2.3 4.9 3.6c.9.5 1.5.2 1.8-.8l3.2-15.2c.3-1.3-.5-1.9-1.5-1.4z'/%3E%3C/svg%3E") }
.ic-ig    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='%23000'/%3E%3C/svg%3E") }
.ic-plane { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2 16l20-10-6 15-3-6-6-3z'/%3E%3C/svg%3E") }
.ic-box   { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M4 7.5l8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E") }
.ic-doc   { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E") }
.ic-house { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 10l9-6 9 6v10H3z'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E") }
.ic-user  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E") }
.ic-users { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M2 20c0-3.5 3-5.5 7-5.5s7 2 7 5.5M15 15c3 0 6 1.5 6 4.5'/%3E%3C/svg%3E") }
.ic-shield{ --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") }
.ic-bolt  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") }
.ic-clock { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") }
.ic-search { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") }
.ic-calc  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='4' y='2.5' width='16' height='19' rx='3'/%3E%3Crect x='7' y='5.5' width='10' height='4' rx='1'/%3E%3Ccircle cx='8' cy='13' r='1' fill='%23000'/%3E%3Ccircle cx='12' cy='13' r='1' fill='%23000'/%3E%3Ccircle cx='16' cy='13' r='1' fill='%23000'/%3E%3Ccircle cx='8' cy='17.5' r='1' fill='%23000'/%3E%3Ccircle cx='12' cy='17.5' r='1' fill='%23000'/%3E%3Ccircle cx='16' cy='17.5' r='1' fill='%23000'/%3E%3C/svg%3E") }
.ic-chat  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M21 11.5a8 8 0 01-11.4 7.2L4 20.5l1.5-4.9A8 8 0 1121 11.5z'/%3E%3Cpath d='M8.5 11.5h.01M12 11.5h.01M15.5 11.5h.01'/%3E%3C/svg%3E") }
.ic-grid  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10'/%3E%3C/svg%3E") }
.ic-globe { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E") }

/* ---- шапка */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(245,248,249,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s }
.hdr.is-scrolled { border-color: var(--line) }
.hdr__in { display: flex; align-items: center; gap: 24px; min-height: 84px }
.logo { display: flex; align-items: center; gap: 12px }
.logo img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover }
.logo__t { display: flex; flex-direction: column; line-height: 1.05 }
.logo__t b { font-size: 18px; letter-spacing: .04em; font-weight: 700 }
.logo__t small { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--mute); margin-top: 4px }
.logo--light .logo__t b { color: #fff } .logo--light .logo__t small { color: rgba(255,255,255,.55) }
.nav { display: none; gap: 30px; margin-left: 40px; font-size: 14px; font-weight: 500 }
.nav a { position: relative; padding: 6px 0 }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease) }
.nav a:hover::after, .nav a.is-on::after { transform: scaleX(1) }
.hdr__r { margin-left: auto; display: flex; align-items: center; gap: 14px }
.lang { position: relative; display: flex; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .08em }
.lang__list { display: flex; gap: 12px }
.lang__cur { display: none }
.lang a { color: var(--mute-2); padding: 12px 4px } .lang a.is-on { color: var(--ink) }
.hdr__cta { display: none; padding: 12px 8px 12px 22px }
.hdr__cta .btn__arr { width: 34px; height: 34px; border-radius: 50%; background: var(--mint); color: var(--dark) }
.hdr__cta .btn__arr::before { left: 9px; width: 14px } .hdr__cta .btn__arr::after { right: 10px }
.burger { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--dark); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4.5px; cursor: pointer; padding: 0; position: relative; z-index: 51 }
.burger span { display: block; width: 20px; height: 1.6px; background: #fff; transition: transform .3s, opacity .3s }
.burger.is-on { background: #fff } .burger.is-on span { background: var(--dark) }
.burger.is-on span:first-child { transform: translateY(6px) rotate(45deg) } .burger.is-on span:nth-child(2) { opacity: 0 } .burger.is-on span:last-child { transform: translateY(-6px) rotate(-45deg) }
@media (min-width: 1100px) { .nav { display: flex } .hdr__cta { display: inline-flex } .burger { display: none } .lang a { padding: 12px 2px } }
@media (max-width: 1099px) { .hdr__in { min-height: 72px; gap: 10px } .logo img { width: 40px; height: 40px } .logo__t b { font-size: 16px } .logo__t small { font-size: 7.5px; letter-spacing: .22em } .burger { width: 48px; height: 48px }
  /* На телефоне кнопка со стрелкой раскрывает список языков. Раньше в шапке оставалась
     только текущая ссылка — нажатие на неё вело на ту же страницу, и это читалось как
     «переключатель просто перезагружает сайт». */
  .lang__cur { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 0 14px 0 16px; height: 44px; background: #fff; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer }
  .lang__list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; flex-direction: column; gap: 2px; min-width: 128px; padding: 6px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 22px 48px -26px rgba(11,31,26,.5); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s }
  .lang.is-open .lang__list { opacity: 1; visibility: visible; transform: none }
  .lang.is-open .lang__chev { transform: rotate(-135deg) translateY(-2px) }
  .lang__list a { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 12px; padding: 0; font-size: 14px }
  .lang__list a.is-on { background: var(--mint, #EAF3EF); color: var(--green, #0F4C3A) }
  .lang__chev { width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); opacity: .6; transition: transform .22s var(--ease) }
  .burger { width: 48px; height: 48px } }
.lang__chev { display: none } @media (max-width: 1099px) { .lang__chev { display: inline-block } }
.menu { position: fixed; inset: 0; z-index: 49; color: #fff; pointer-events: none; visibility: hidden; transition: visibility 0s 1.1s; overflow: hidden; contain: paint }
.menu.is-on { pointer-events: auto; visibility: visible; transition-delay: 0s; overflow: auto }
.menu__veil { position: absolute; inset: 0; background: var(--mint); transform: scaleY(0); transform-origin: top; transition: transform .7s cubic-bezier(.76,0,.24,1) .3s } .menu.is-on .menu__veil { transform: scaleY(1); transform-origin: bottom; transition: transform .8s cubic-bezier(.76,0,.24,1) }
.menu__veil::after { content: ""; position: absolute; inset: 0; background: var(--dark); transform: scaleY(0); transform-origin: top; transition: transform .7s cubic-bezier(.76,0,.24,1) .12s } .menu.is-on .menu__veil::after { transform: scaleY(1); transform-origin: bottom; transition: transform .8s cubic-bezier(.76,0,.24,1) .22s }
.menu__bg { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .6s .5s } .menu.is-on .menu__bg { opacity: 1 }
.menu__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .7s var(--ease), transform 1.4s var(--ease); filter: saturate(.8) }
.menu__bg img.is-on { opacity: .34; transform: scale(1) }
.menu__bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,31,26,.96) 0%, rgba(11,31,26,.85) 45%, rgba(11,31,26,.55) 100%), radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px) 0 0/22px 22px; z-index: 1 }
.menu__route { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: .6 } .menu__route path#menu-arc, .menu__route path#menu-arc2 { fill: none; stroke: var(--mint); stroke-width: 1.2; stroke-dasharray: 6 9; opacity: .5; animation: dash 5s linear infinite } .menu__route path#menu-arc2 { opacity: .3; animation-duration: 7s; animation-direction: reverse } .menu__plane { fill: #fff; filter: drop-shadow(0 0 6px rgba(143,240,207,.9)) } .menu__plane--2 { opacity: .7 }
.menu__ping { fill: none; stroke: var(--mint); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: menu-ping 3s ease-out infinite } .menu__ping--2 { animation-delay: 1.5s }
@keyframes menu-ping { 0% { opacity: .9; transform: scale(.4) } 100% { opacity: 0; transform: scale(5) } }
.menu__bg img.is-on { animation: menu-kb 24s ease-in-out infinite alternate }
@keyframes menu-kb { 0% { transform: scale(1) translate(0,0) } 100% { transform: scale(1.08) translate(-1.5%, 1%) } }
.menu__in { position: relative; z-index: 2; height: 100%; display: grid; grid-template-rows: 1fr auto; padding: 96px var(--pad) 26px; overflow: auto; gap: 24px }
.menu__nav { display: flex; flex-direction: column; justify-content: center; gap: 0 }
.menu__a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 14px; padding: 10px 0; font-family: var(--serif); font-size: clamp(26px, 3.4vw, 44px); line-height: 1.1; border-bottom: 1px solid rgba(255,255,255,.08); transition: color .4s, padding .5s var(--ease) }
.menu__num { font: 500 11px var(--sans); letter-spacing: .2em; color: rgba(255,255,255,.4); transform: translateY(-4px) }
.menu__lbl { display: flex; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em } .menu__lbl i { font-style: normal; display: inline-block; transform: translateY(110%); transition: transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.6s + var(--i, 0) * 60ms + var(--j, 0) * 16ms) }
.menu.is-on .menu__lbl i { transform: none }
.menu__arr { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .4s var(--ease), background .3s } .menu__arr .btn__arr { color: var(--mint) }
.menu__nav:hover .menu__a { color: rgba(255,255,255,.4) } .menu__a:hover { color: #fff; padding-left: 8px } .menu__a:hover .menu__arr { opacity: 1; transform: none } .menu__a.is-on .menu__num { color: var(--mint) }
.menu__side { display: grid; gap: 18px; align-content: end; opacity: 0; transform: translateY(14px); transition: opacity .6s .7s, transform .6s .7s var(--ease) } .menu.is-on .menu__side { opacity: 1; transform: none }
.menu__langs { display: flex; gap: 22px; font-weight: 600; letter-spacing: .12em; font-size: 14px } .menu__langs a { color: rgba(255,255,255,.45) } .menu__langs a.is-on { color: #fff }
.menu__side .btn--light { width: fit-content }
.menu__contacts { display: grid; gap: 6px; font-size: 15px; color: rgba(255,255,255,.75) } .menu__tel { font-size: 22px; font-weight: 500; color: #fff } .menu__time { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: 6px } .menu__time b { color: var(--mint); font-variant-numeric: tabular-nums }
.menu__soc { margin-top: 4px }
.menu__tag { position: absolute; right: var(--pad); bottom: 26px; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.4); writing-mode: vertical-rl; transform: rotate(180deg); opacity: 0; transition: opacity .6s .9s } .menu.is-on .menu__tag { opacity: 1 }
@media (min-width: 1100px) {
  .menu__in { grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr; align-items: center; padding: 110px calc(var(--pad) + 60px) 40px var(--pad) }
  .menu__nav { padding-right: 60px } .menu__side { align-content: center; padding-left: 60px; border-left: 1px solid rgba(255,255,255,.1) }
  .menu__bg::before { background: linear-gradient(90deg, rgba(11,31,26,.98) 0%, rgba(11,31,26,.92) 50%, rgba(11,31,26,.5) 100%), radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px) 0 0/22px 22px }
}
@media (max-width: 1099px) { .menu__a { grid-template-columns: 26px 1fr auto; font-size: clamp(20px, 5.6vw, 26px); padding: 9px 0 } .menu__arr { width: 32px; height: 32px; opacity: .55; transform: none } .menu__tag { display: none } .menu__in { padding-top: 84px; gap: 18px } .menu__side { gap: 14px } .menu__contacts { font-size: 14px; gap: 4px } .menu__tel { font-size: 19px } .menu__btns .btn { padding: 13px 18px 13px 20px; font-size: 14px } }
.menu__btns { display: flex; flex-wrap: wrap; gap: 10px }
.btn--wa { background: #25D366; color: #fff; border-color: #25D366; gap: 10px } .btn--wa .ic { width: 20px; height: 20px; color: #fff } .btn--wa:hover { background: #1fbf5b }
body.menu-open main, body.menu-open .ftr, body.menu-open .cta-band { filter: blur(8px); transform: scale(.985); transition: filter .9s var(--ease), transform 1s var(--ease) }
main, .ftr, .cta-band { transition: filter .5s var(--ease), transform .6s var(--ease) }
body.menu-open .hdr { background: transparent; backdrop-filter: none; border-color: transparent } body.menu-open .hdr .logo__t b { color: #fff } body.menu-open .hdr .logo__t small { color: rgba(255,255,255,.55) } body.menu-open .hdr .lang, body.menu-open .hdr__cta, body.menu-open .nav { opacity: 0; pointer-events: none }

/* ---- hero */
.hero { position: relative; overflow: hidden; padding-top: 30px }
.hero__bg { position: absolute; inset: 0; z-index: 0 }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 60% }
.hero__bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(245,248,249,.98) 0%, rgba(245,248,249,.9) 36%, rgba(245,248,249,.3) 60%, rgba(245,248,249,0) 80%), linear-gradient(0deg, rgba(245,248,249,.85) 0, rgba(245,248,249,0) 22%) }
.hero__bg::after { content: ""; position: absolute; inset: auto 0 0; height: 200px; background: linear-gradient(180deg, rgba(245,248,249,0), var(--bg)) }
.hero__stripe { position: absolute; top: -10%; height: 130%; width: 12vw; max-width: 180px; background: rgba(255,255,255,.28); backdrop-filter: blur(2px); transform: skewX(-24deg); pointer-events: none }
.hero__stripe--1 { left: 46% } .hero__stripe--2 { left: 62%; width: 7vw; opacity: .7 }
.hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-height: min(72vh, 640px); align-content: start }
.hero__txt { padding-top: 40px; max-width: 760px }
.hero__h1 { font-size: clamp(54px, 7.3vw, 106px); line-height: .94; letter-spacing: -.035em; font-weight: 500; margin: 8px 0 26px; display: flex; flex-direction: column }
.hero__l2 { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--green); letter-spacing: -.02em }
.hero__p { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); max-width: 46ch; margin-bottom: 30px; line-height: 1.5 }
.hero__act { display: flex; align-items: center; gap: 22px; flex-wrap: wrap }
.hero__side { display: flex; position: absolute; right: 0; top: 0; flex-direction: column; align-items: center; gap: 10px; width: 110px }
.hero__side::before { content: ""; width: 1px; height: 46px; background: rgba(11,31,26,.35) }
.hero__plane { width: 18px; height: 18px; background: var(--dark); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat }
.hero__people { font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); line-height: 1.7; border-left: 1px solid rgba(11,31,26,.3); padding-left: 10px; align-self: flex-end; width: 92px }
.hero__people-d { display: none }
.hero__points { display: none }
.hero__partners { display: none }
.hero__stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 12px; margin-top: 0; padding: 22px 0 0; background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax) }
.stat b { display: block; font-size: clamp(22px, 6vw, 34px); letter-spacing: -.02em; font-weight: 500; line-height: 1 }
.stat span { display: block; font-size: clamp(10px, 2.8vw, 13px); color: var(--mute); margin-top: 6px; max-width: 14ch; line-height: 1.3 }
.stat--light b { color: #fff } .stat--light span { color: rgba(255,255,255,.65) }
.hero__foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; margin-top: 30px; padding-bottom: 40px; background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax) }
.hero__tag { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); max-width: 18ch; line-height: 1.7; padding-top: 12px; border-top: 1px solid var(--ink) }
.scroll { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; border: 1px solid rgba(11,31,26,.3); position: relative; font-size: 18px }
.scroll span { position: absolute; inset: 0; font-size: 8px; letter-spacing: .3em; text-transform: uppercase; color: var(--mute); animation: spin 14s linear infinite; display: grid; place-items: center; transform-origin: center }
.scroll i { font-style: normal; animation: bob 1.8s ease-in-out infinite }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes bob { 0%,100% { transform: translateY(-3px) } 50% { transform: translateY(3px) } }
@media (min-width: 900px) {
  .hero { padding-top: 10px }
  .hero__in { grid-template-columns: minmax(0, 760px) 1fr; min-height: 520px }
  .hero__txt { padding-top: 46px }
  .hero__side { position: static; flex-direction: row; align-items: flex-start; gap: 14px; padding-top: 74px; margin-left: 4vw; width: auto }
  .hero__side::before { display: none }
  .hero__plane { width: 22px; height: 22px; transform: rotate(90deg) }
  .hero__people { font-size: 11px; letter-spacing: .3em; line-height: 2; max-width: 14ch; padding-left: 16px; width: auto; align-self: auto }
  .hero__people-d { display: inline } .hero__people-m { display: none }
  .hero__points { display: block; position: absolute; right: 0; top: 60px; margin: 0; padding: 0 0 0 18px; list-style: none; border-left: 1px solid rgba(11,31,26,.2) }
  .hero__points li { display: flex; gap: 12px; font-size: 12px; color: var(--ink-2); margin-bottom: 18px; align-items: baseline; max-width: 150px; line-height: 1.35 }
  .hero__points b { font-weight: 500; color: var(--mute) }
  .hero__partners { display: flex; align-items: center; gap: 18px; position: absolute; right: 0; bottom: 0; background: rgba(245,248,249,.94); backdrop-filter: blur(10px); padding: 18px 22px 18px 26px; border-radius: 26px 0 0 0; font-size: 13px; line-height: 1.35 }
  .hero__partners > .ic { width: 52px; height: 52px; color: var(--green) }
  .hero__partners small { color: var(--mute) }
  .hero__thumbs { display: flex } .hero__thumbs img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); margin-left: -8px }
  .hero__stats { justify-content: start; gap: 0; margin-top: 4px; padding: 20px 0 26px; background: none; box-shadow: none; clip-path: none; border-top: 0 }
  .hero__stats::before { content: ""; position: absolute; left: 0; top: 0; width: 900px; height: 1px; background: rgba(11,31,26,.12) }
  .hero__stats .stat { padding: 0 34px; border-right: 1px solid rgba(11,31,26,.14) }
  .hero__stats .stat:first-child { padding-left: 0 } .hero__stats .stat:last-child { border: 0 }
  .hero__stats .stat b { font-size: 34px } .hero__stats .stat span { font-size: 13px; max-width: 18ch }
  .hero__foot { display: none }
  .hero__bg::after { height: 120px; background: linear-gradient(180deg, rgba(245,248,249,0), rgba(245,248,249,.9) 70%, var(--bg)) }
  .hero__partners { bottom: -110px }
}
@media (max-width: 899px) {
  .hero__bg img { object-position: 62% 100% }
  .hero__bg::before { background: none }
  .hero__bg::after { height: 40px; background: linear-gradient(180deg, rgba(245,248,249,0), rgba(245,248,249,.6)) }
  .hero__bg img { position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 66%; object-position: 50% 35%; -webkit-mask: linear-gradient(180deg, transparent 0, #000 26%); mask: linear-gradient(180deg, transparent 0, #000 26%) }
  .hero__in { min-height: 175vw; max-height: 1000px; padding-bottom: 0; position: relative }
  .hero__txt { padding-top: 34px }
  .hero__h1 { font-size: clamp(50px, 14.5vw, 64px); margin-bottom: 18px }
  .hero__p { font-size: 15px; margin-bottom: 22px }
  .hero__act { flex-direction: column; align-items: flex-start; gap: 14px }
  .hero__act .btn { padding: 17px 26px 17px 30px }
  .hero__act .play > span:last-child { max-width: 12ch }
  .hero__foot { margin-top: 0; padding-top: 30px }
  .hero__stripe { display: block; top: 28%; height: 60%; width: 16vw; left: 30% } .hero__stripe--2 { left: 58%; width: 9vw }
}

/* ---- сеть */
.net { background: var(--dark); color: #fff; padding: clamp(48px, 7vw, 96px) 0; position: relative; overflow: hidden }
.net__in { display: grid; gap: 30px; align-items: center }
.net__txt p { color: rgba(255,255,255,.7); margin: 18px 0 26px; max-width: 46ch; font-size: 15px }
.net__map { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 16/10; background: #071410 }
.net__map img { width: 100%; height: 100%; object-fit: cover; opacity: .9 }
.net__svg { position: absolute; inset: 0; width: 100%; height: 100% }
.net__svg .arc { fill: none; stroke: var(--mint); stroke-width: 1.4; stroke-dasharray: 6 8; opacity: .8; animation: dash 6s linear infinite }
.net__svg .dot { fill: var(--mint) } .net__svg .hub { fill: #fff; stroke: var(--mint); stroke-width: 6; stroke-opacity: .35 }
.net__svg .lbl { fill: #fff; font: 500 12px var(--sans); paint-order: stroke; stroke: rgba(7,20,16,.7); stroke-width: 4px }
.net__svg .pulse { fill: none; stroke: var(--mint); stroke-width: 1; opacity: .6; animation: pulse 2.8s ease-out infinite }
@keyframes dash { to { stroke-dashoffset: -140 } }
@keyframes pulse { 0% { r: 6; opacity: .8 } 100% { r: 26; opacity: 0 } }
.net__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
@media (min-width: 900px) { .net__in { grid-template-columns: 1fr 1.4fr; grid-template-areas: "txt map" "stats map" } .net__txt { grid-area: txt } .net__map { grid-area: map; aspect-ratio: 16/11 } .net__stats { grid-area: stats } }

/* ---- услуги */
.svc { padding: clamp(48px, 7vw, 96px) 0 }
.svc__grid { display: grid; gap: 16px }
.svc__card { display: flex; flex-direction: column; background: #fff; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow .45s var(--ease) }
.svc__card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(11,31,26,.35) }
.svc__img { position: relative; aspect-ratio: 16/10; overflow: hidden }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease) }
.svc__card:hover .svc__img img { transform: scale(1.05) }
.svc__n { position: absolute; right: 16px; bottom: 8px; font-family: var(--serif); font-size: 56px; line-height: 1; color: #fff; opacity: .9; text-shadow: 0 6px 24px rgba(11,31,26,.5); font-weight: 400 }
.svc__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,31,26,0) 45%, rgba(11,31,26,.55)) }
.svc__vt { display: none }
.svc__more { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 500; margin-top: 6px }
.svc__body { padding: 18px 20px 20px; display: grid; gap: 8px; position: relative; grid-template-columns: minmax(0, 1fr); grid-template-areas: "ic" "t" "p" "c" }
.svc__body .svc__more { grid-area: c }
.svc__body > .ic { grid-area: ic; color: var(--green); margin-bottom: 4px }
.svc__body b { grid-area: t; font-size: 18px; font-weight: 600 }
.svc__body p { grid-area: p; color: var(--mute); font-size: 14px; min-width: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden }

@media (min-width: 700px) { .svc__grid { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1100px) { .svc__grid { grid-template-columns: repeat(4, 1fr) } .svc__card:nth-child(5) { grid-column: span 4; flex-direction: row } .svc__card:nth-child(5) .svc__img { width: 42%; aspect-ratio: auto } .svc__card:nth-child(5) .svc__body { flex: 1; align-content: center } }

/* ---- перевозки */
.ships { padding: 0 0 clamp(48px, 7vw, 96px) }
.ships__grid { display: grid; gap: 18px }
.ship { display: flex; flex-direction: column; background: #fff; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow .45s var(--ease) }
.ship:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(11,31,26,.35) }
.ship__img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-2) }
.ship__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease) }
.ship:hover .ship__img img { transform: scale(1.05) }
.ship__ph, .ship__date { position: absolute; bottom: 12px; font-size: 11px; font-weight: 600; padding: 6px 10px; border-radius: 999px; backdrop-filter: blur(6px) }
.ship__ph { left: 12px; color: #fff; background: rgba(11,31,26,.5) }
.ship__date { right: 12px; color: var(--dark); background: rgba(255,255,255,.9) }
.ship__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px }
.ship__route { display: flex; align-items: center; gap: 10px; font-size: clamp(18px, 1.5vw, 24px); letter-spacing: .04em; font-weight: 600; line-height: 1.1; flex-wrap: wrap }
.ship__arr { width: 34px; height: 12px; position: relative; flex: none; color: var(--green) }
.ship__arr::before { content: ""; position: absolute; left: 0; right: 4px; top: 50%; height: 1.5px; background: currentColor }
.ship__arr::after { content: ""; position: absolute; right: 2px; top: 50%; width: 8px; height: 8px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: translateY(-50%) rotate(45deg) }
.ship__countries { font-size: 12px; color: var(--mute-2); letter-spacing: .04em }
.ship__cargo { font-size: 15px; color: var(--ink-2); margin-top: 6px }
.ship__meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--mute) }
.ship__meta span::after { content: "•"; margin-left: 8px; color: var(--line) } .ship__meta span:last-child::after { content: "" }
.ship__more { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-weight: 500; font-size: 14px }
@media (min-width: 760px) { .ships__grid { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1100px) { .ships__grid { grid-template-columns: repeat(4, 1fr) } .home .ships__grid { grid-template-columns: repeat(2, 1fr) } }

/* ---- почему мы */
.why { padding: clamp(48px, 7vw, 96px) 0; background: var(--bg-2) }
.why__list { display: grid; gap: 0; margin-top: 30px }
.why__it { display: flex; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); align-items: flex-start }
.ico { width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; flex: none }
.ico .ic { width: 24px; height: 24px; color: var(--green) } .ico--dark .ic { color: var(--ink) }
.why__it b { display: block; font-size: 17px; font-weight: 600; margin-bottom: 4px } .why__it span { color: var(--mute); font-size: 14px }
@media (min-width: 900px) { .why__list { grid-template-columns: repeat(2, 1fr); gap: 0 60px } }

/* ---- миссия */
.mission { background: var(--dark); color: #fff; padding: clamp(48px, 7vw, 96px) 0; overflow: hidden }
.mission__in { display: grid; gap: 28px; align-items: center }
.mission__txt p { color: rgba(255,255,255,.7); margin: 16px 0 28px; max-width: 46ch }
.mission__img { border-radius: var(--r); overflow: hidden; aspect-ratio: 4/5 }
.mission__img img, .mission__img video { width: 100%; height: 100%; object-fit: cover; display: block }
.mission__img { position: relative } .mission__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,31,26,.15), rgba(11,31,26,0) 40%, rgba(11,31,26,.35)); pointer-events: none }
.mission__q { margin: 0; padding: 26px 0 0; position: relative; max-width: 46ch }
.mission__q .q { position: absolute; left: 0; top: -14px; font-family: var(--serif); font-size: 64px; color: var(--mint); line-height: 1; font-style: normal }
.mission__q p { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.9); margin: 18px 0 12px }
.mission__q footer { color: rgba(255,255,255,.55); font-size: 13px }
@media (min-width: 900px) { .mission__in { grid-template-columns: 1fr 1fr; grid-template-areas: "txt img" "q img" } .mission__txt { grid-area: txt } .mission__img { grid-area: img; aspect-ratio: 4/5; max-height: 640px } .mission__q { grid-area: q } }

/* ---- видео */
.video { padding: 0 0 clamp(48px, 7vw, 96px); background: var(--dark) }
.video__card { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 3/4; color: #fff }
.video__card img, .video__card video { width: 100%; height: 100%; object-fit: cover; display: block }
.video__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,20,16,.7), rgba(7,20,16,0) 50%) }
.video__txt { position: absolute; inset: 0; z-index: 1; padding: 30px; display: flex; flex-direction: column; gap: 18px }
.video__txt .h2 { max-width: 12ch; font-size: clamp(30px, 3.4vw, 46px) }
.video__txt .play { margin-top: auto }
@media (min-width: 900px) { .video__card { aspect-ratio: 21/9 } .video__txt { padding: 50px } }

/* ---- партнёры: бегущая лента + счётчики */
.pt { padding: clamp(48px, 7vw, 96px) 0 }
.pt__head { display: grid; gap: 20px; align-items: end; margin-bottom: 30px }
.pt__stats { display: flex; gap: 40px } .pt__stats .stat { padding-right: 40px; border-right: 1px solid var(--line) } .pt__stats .stat:last-child { border: 0; padding: 0 }
.pt__band { position: relative; overflow: hidden; display: flex; gap: 14px; padding: 6px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) }
.pt__track { display: flex; gap: 14px; flex: none; animation: pt-scroll 38s linear infinite } .pt__band:hover .pt__track { animation-play-state: paused }
@keyframes pt-scroll { to { transform: translateX(calc(-100% - 14px)) } }
.pt__it { flex: none; display: flex; align-items: center; gap: 14px; height: 92px; padding: 0 34px; border-radius: 18px; background: #fff; border: 1px solid var(--line); font-family: var(--serif); font-size: 22px; letter-spacing: .01em; color: var(--ink); white-space: nowrap; transition: transform .35s var(--ease), box-shadow .35s var(--ease) }
.pt__it:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(11,31,26,.35) }
.pt__it .ic { color: var(--green); width: 22px; height: 22px } .pt__it img { max-height: 44px; width: auto }
.pt__foot { display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center; justify-content: space-between; margin-top: 30px } .pt__foot p { color: var(--mute); max-width: 52ch; font-size: 15px }
@media (min-width: 900px) { .pt__head { grid-template-columns: 1fr auto } }
@media (prefers-reduced-motion: reduce) { .pt__track { animation: none } }

/* ---- шаги: тёмная карточка-маршрут, линия прогресса и самолёт идут при появлении */
.steps { padding: 0 0 clamp(48px, 7vw, 96px) }
.steps__card { position: relative; background: var(--dark); color: #fff; border-radius: var(--r); padding: clamp(30px, 5vw, 60px) clamp(22px, 4vw, 56px); overflow: hidden }
.steps__card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(143,240,207,.14), transparent 40%), radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px) 0 0/22px 22px; pointer-events: none }
.steps__head { position: relative; margin-bottom: 36px; max-width: 640px } .steps__head .h2 { font-size: clamp(28px, 3.4vw, 44px) }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative }
.steps__list li { display: grid; grid-template-columns: 34px 52px 1fr; gap: 16px; align-items: start; padding: 22px 0; position: relative }
.steps__n { font-family: var(--serif); font-size: 26px; color: rgba(255,255,255,.35); line-height: 1; padding-top: 12px }
.steps__dot { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); display: grid; place-items: center; position: relative; z-index: 1; transition: background .5s, border-color .5s, box-shadow .5s; transition-delay: calc(var(--d, 0ms) + .5s) }
.steps__dot .ic { width: 22px; height: 22px; color: #fff }
.steps__list li.in .steps__dot { background: var(--mint); border-color: var(--mint); box-shadow: 0 0 0 6px rgba(143,240,207,.15) } .steps__list li.in .steps__dot .ic { color: var(--dark) }
.steps__list li b { display: block; font-size: 19px; font-weight: 600; padding-top: 12px; margin-bottom: 4px } .steps__list li > div > span { color: rgba(255,255,255,.65); font-size: 14.5px; line-height: 1.5 }
.steps__line { position: absolute; left: 75px; top: 48px; bottom: 48px; width: 1px; background: rgba(255,255,255,.12) } .steps__line i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--mint); transition: height 2.2s cubic-bezier(.4,0,.2,1) .4s } .steps__list.in .steps__line i { height: 100% }
.steps__plane { position: absolute; left: 75px; top: 48px; width: 18px; height: 18px; margin: -9px 0 0 -9px; background: var(--mint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; transform: rotate(180deg); opacity: 0; transition: top 2.2s cubic-bezier(.4,0,.2,1) .4s, opacity .4s .4s; filter: drop-shadow(0 0 6px rgba(143,240,207,.9)) }
.steps__list.in .steps__plane { top: calc(100% - 48px); opacity: 1 }
@media (min-width: 900px) {
  .steps__list { grid-template-columns: repeat(4, 1fr); gap: 30px; padding-top: 10px }
  .steps__list li { grid-template-columns: 1fr; gap: 14px; padding: 0 }
  .steps__n { padding: 0; font-size: 30px } .steps__dot { margin-top: 6px } .steps__list li b { padding-top: 6px; font-size: 20px }
  .steps__line { left: 26px; right: 26px; top: 82px; bottom: auto; width: auto; height: 1px } .steps__line i { height: 100%; width: 0; transition: width 2.2s cubic-bezier(.4,0,.2,1) .4s } .steps__list.in .steps__line i { width: 100% }
  .steps__plane { left: 26px; top: 82px; transform: rotate(90deg); transition: left 2.2s cubic-bezier(.4,0,.2,1) .4s, opacity .4s .4s } .steps__list.in .steps__plane { top: 82px; left: calc(100% - 26px) }
}
@media (prefers-reduced-motion: reduce) { .steps__line i { height: 100%; width: 100% } .steps__plane { display: none } }

/* ---- статьи */
.arts { padding: clamp(48px, 7vw, 96px) 0 }
.arts__grid { display: grid; gap: 18px }
.art { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 14px 22px; transition: transform .4s var(--ease) }
.art:hover { transform: translateY(-4px) }
.art__img { aspect-ratio: 16/10; border-radius: 12px; overflow: hidden } .art__img img { width: 100%; height: 100%; object-fit: cover }
.art__date { font-size: 12px; color: var(--mute-2) } .art b { font-size: 18px; font-weight: 600; line-height: 1.3 } .art p { color: var(--mute); font-size: 14px }
@media (min-width: 900px) { .arts__grid { grid-template-columns: repeat(3, 1fr) } }

/* ---- горизонты */
.horizon { position: relative; aspect-ratio: 16/10; max-height: 560px; overflow: hidden; background: var(--dark) }
.horizon img { width: 100%; height: 100%; object-fit: cover }
.horizon .kicker { position: absolute; left: var(--pad); top: 40px; z-index: 1; margin: 0; max-width: 16ch; line-height: 2 }
.horizon::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,20,16,.6), rgba(7,20,16,0) 45%); z-index: 1 }
@media (min-width: 900px) { .horizon { aspect-ratio: 21/9 } }

/* ---- CTA + форма */
.cta-band { background: var(--mint-2); padding: clamp(48px, 7vw, 96px) 0 }
.cta-band__in { display: grid; gap: 30px }
.cta-band__txt p { color: var(--ink-2); margin: 16px 0 26px; max-width: 40ch }
.cta-band__act { display: flex; gap: 12px; flex-wrap: wrap }
.qform { background: #fff; border-radius: var(--r); padding: 26px; display: grid; gap: 12px; box-shadow: 0 30px 60px -40px rgba(11,31,26,.4) }
.qform h3 { font-family: var(--serif); font-size: 26px; margin-bottom: 4px }
.qform__row { display: grid; gap: 12px } @media (min-width: 560px) { .qform__row { grid-template-columns: 1fr 1fr } }
.qform input, .qform textarea { width: 100%; font: inherit; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); outline: none; transition: border-color .2s }
.qform input:focus, .qform textarea:focus { border-color: var(--green) }
.qform textarea { resize: vertical }
.qform__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--mute) } .qform__consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green) }
.qform__note { font-size: 12.5px; color: var(--mute) }
.qform__msg { padding: 12px 14px; border-radius: 10px; font-size: 14px; background: #E7F7EE; color: #146A4E } .qform__msg.is-err { background: #FCEBE7; color: #B3361C }
@media (min-width: 900px) { .cta-band__in { grid-template-columns: 1fr 1fr; align-items: center } }

/* ---- подвал: лента маршрутов, призыв, колонки, самолёт по линии при скролле, гигантское слово */
.ftr { position: relative; background: var(--dark); color: #fff; padding: 0 0 0; overflow: hidden; margin-top: 0 }
.ftr::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 10%, rgba(143,240,207,.12), transparent 40%), radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.4px) 0 0/22px 22px; pointer-events: none }
.ftr__strip { display: flex; gap: 0; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.08); padding: 14px 0; font-size: 12px; letter-spacing: .18em; font-weight: 600; color: rgba(255,255,255,.5); -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent) }
.ftr__strip-track { display: flex; flex: none; gap: 44px; padding-right: 44px; animation: pt-scroll 60s linear infinite } .ftr__strip span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap } .ftr__strip .ship__arr { width: 22px; color: var(--mint) }
.ftr__cta { position: relative; display: grid; gap: 22px; padding: clamp(40px, 6vw, 80px) 0 clamp(30px, 5vw, 60px); border-bottom: 1px solid rgba(255,255,255,.1); align-items: center }
.ftr__cta .h2 { max-width: 16ch } .ftr__cta-act { display: flex; align-items: center; gap: 12px 26px; flex-wrap: wrap }
.ftr__grid { position: relative; display: grid; gap: 34px; padding: clamp(30px, 5vw, 56px) 0 }
.ftr__h { display: block; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 16px }
.ftr__about { color: rgba(255,255,255,.6); font-size: 14px; max-width: 40ch; margin: 18px 0 }
.ftr__langs { display: flex; gap: 18px; font-size: 12px; letter-spacing: .1em; font-weight: 600 } .ftr__langs a { color: rgba(255,255,255,.45) } .ftr__langs a.is-on { color: #fff }
.ftr__nav { display: grid; gap: 10px; font-size: 15px; color: rgba(255,255,255,.75); align-content: start } .ftr__nav a { width: fit-content; position: relative } .ftr__nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--mint); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease) } .ftr__nav a:hover::after { transform: scaleX(1); transform-origin: left }
.ftr__contacts { display: grid; gap: 12px; font-size: 15px; align-content: start } .ftr__contacts a, .ftr__contacts span { display: flex; align-items: center; gap: 12px } .ftr__contacts .ic { color: var(--mint); width: 20px; height: 20px }
.ftr__time { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5) } .ftr__time b { color: var(--mint); font-variant-numeric: tabular-nums }
.ftr__soc { display: flex; gap: 10px; margin-top: 8px } .ftr__soc a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; transition: background .3s, transform .3s } .ftr__soc a:hover { background: rgba(255,255,255,.1); transform: translateY(-2px) } .ftr__soc .ic { color: #fff }
.ftr__fly { position: relative; height: 1px; margin: 10px 0 20px } .ftr__fly-line { position: absolute; inset: 0; background: rgba(255,255,255,.12) }
.ftr__fly-plane { position: absolute; top: 0; left: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; background: var(--mint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; transform: rotate(90deg); filter: drop-shadow(0 0 6px rgba(143,240,207,.9)); transition: left .15s linear }
.ftr__bot { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 6px 0 30px; font-size: 12.5px; color: rgba(255,255,255,.5) }
.ftr__legal { display: flex; flex-wrap: wrap; gap: 8px 22px } .ftr__legal a:hover { color: #fff }
.totop { margin-left: auto; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; color: #fff; overflow: hidden; position: relative; transition: background .3s, border-color .3s }
.ftr__up { width: 18px; height: 18px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .5s var(--ease) }
.totop:hover { background: var(--mint); border-color: var(--mint) } .totop:hover .ftr__up { background: var(--dark); animation: up-fly .7s var(--ease) forwards }
@keyframes up-fly { 40% { transform: translateY(-40px) } 41% { transform: translateY(40px) } 100% { transform: none } }
.ftr__word { position: relative; overflow: hidden; line-height: .78; text-align: center; pointer-events: none; height: clamp(60px, 11vw, 160px) }
.ftr__word span { display: block; font: 800 clamp(96px, 17.5vw, 260px)/.78 var(--sans); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(143,240,207,.3); background: linear-gradient(180deg, rgba(143,240,207,.14), rgba(143,240,207,0) 80%); -webkit-background-clip: text; background-clip: text; transform: translateY(20%); transition: transform 1.4s var(--ease) } .ftr.in .ftr__word span { transform: translateY(6%) }
@media (min-width: 900px) { .ftr__cta { grid-template-columns: 1fr auto } .ftr__grid { grid-template-columns: 1.3fr .8fr 1fr; gap: 50px } .ftr__nav { grid-template-columns: 1fr 1fr; column-gap: 24px } .ftr__nav .ftr__h { grid-column: 1 / -1 } }
@media (max-width: 899px) { .ftr__col--brand { order: 0 } .ftr__contacts { order: 1 } .ftr__nav { order: 2 } .ftr__strip { font-size: 11px } }
@media (prefers-reduced-motion: reduce) { .ftr__strip-track { animation: none } .ftr__word span { transform: none } }

/* ---- плавающий WhatsApp, лайтбокс */
.wa-fab { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: grid; place-items: center; box-shadow: 0 12px 30px -10px rgba(37,211,102,.7); transition: transform .3s var(--ease) }
.wa-fab .ic { color: #fff; width: 30px; height: 30px } .wa-fab:hover { transform: scale(1.06) }
.lightbox[hidden] { display: none }
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(7,20,16,.94); display: grid; place-items: center }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 10px }
.lightbox__x, .lightbox__nav { position: absolute; background: rgba(255,255,255,.1); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 26px; cursor: pointer }
.lightbox__x { right: 18px; top: 18px } .lightbox__prev { left: 12px; top: 50% } .lightbox__next { right: 12px; top: 50% }
.lightbox__n { position: absolute; bottom: 18px; color: rgba(255,255,255,.7); font-size: 13px }

/* ---- внутренние страницы */
.page { padding: clamp(36px, 5vw, 72px) 0 }
.page__h { max-width: 820px; margin-bottom: 30px } .page__h .h2 { font-size: clamp(34px, 5vw, 64px) } .page__h p { color: var(--mute); margin-top: 14px; font-size: 17px; max-width: 60ch }
.crumbs { font-size: 12px; color: var(--mute-2); margin-bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap } .crumbs a:hover { color: var(--ink) }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px }
.chip { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 500; color: var(--ink-2) }
.chip.is-on { background: var(--dark); color: #fff; border-color: var(--dark) }
.filters__sel { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 13px }
.more { display: flex; justify-content: center; margin-top: 30px }
.prose { max-width: 72ch; font-size: 17px; line-height: 1.7; color: var(--ink-2) } .prose p { margin: 0 0 1.1em } .prose h2 { font-family: var(--serif); font-size: 30px; margin: 1.4em 0 .5em } .prose h3 { font-size: 21px; margin: 1.2em 0 .4em } .prose ul { padding-left: 1.2em } .prose img { border-radius: 14px; margin: 1em 0 }
.detail { display: grid; gap: 30px } @media (min-width: 900px) { .detail { grid-template-columns: 1.3fr 1fr; align-items: start } }
.gal { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr) } .gal a { border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; display: block } .gal a:first-child { grid-column: 1 / -1; aspect-ratio: 16/10 } .gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease) } .gal a:hover img { transform: scale(1.04) }
.spec { display: grid; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 22px }
.spec div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px } .spec div:last-child { border: 0 } .spec span { color: var(--mute) } .spec b { font-weight: 600; text-align: right }
.route-big { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: clamp(30px, 5vw, 56px); font-weight: 600; letter-spacing: .02em; line-height: 1; margin: 6px 0 10px } .route-big .ship__arr { width: 56px; height: 16px }
.contact-grid { display: grid; gap: 24px } @media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.2fr } }
.contact-list { display: grid; gap: 16px; font-size: 17px } .contact-list a, .contact-list span { display: flex; gap: 14px; align-items: center } .contact-list .ic { color: var(--green) }
.map-frame { border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3; min-width: 0; max-width: 100%; background: var(--bg-2); position: relative } .map-frame iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0 }
.svc-list { display: grid; gap: 18px } @media (min-width: 900px) { .svc-list { grid-template-columns: repeat(3, 1fr) } }
.p404 { text-align: center; padding: 100px 0 } .p404 .h2 { font-size: 80px }

/* ---- появление при прокрутке (лёгкие анимации; полная проработка блоков — отдельным этапом) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms) }
.reveal.in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none } .scroll span, .scroll i, .net__svg .arc, .net__svg .pulse { animation: none } }

/* ---- экран 2 (десктоп по макету 07.09): карта слева, услуги в панели, тёмная видео-карточка справа; ниже — перевозки, почему, миссия */
@media (min-width: 1100px) {
  .s2 { display: grid; grid-template-columns: 300px minmax(0, 1fr) 280px; grid-template-areas: "net svc video" "ships ships ships" "why why why" "mission mission mission"; gap: 0 22px; width: min(var(--wrap), 100% - var(--pad) * 2); margin: 0 auto; padding-top: 30px }
  .s2 > section > .wrap { width: auto }
  .s2 .net { grid-area: net; background: transparent; color: var(--ink); padding: 0; display: flex; flex-direction: column }
  .s2 .net__in { display: flex; flex-direction: column; gap: 22px; height: 100% }
  .s2 .net__map { order: -1; aspect-ratio: 3/4; border-radius: var(--r); flex: 1 }
  .s2 .net__txt p { color: var(--mute); margin: 12px 0 18px } .s2 .net__txt .h2 { font-size: 30px } .s2 .net__txt .kicker { color: var(--green) }
  .s2 .net__txt .btn--ghost-light { color: var(--dark); border-color: rgba(11,31,26,.25) }
  .s2 .net__stats { display: none }
  .s2 .svc { grid-area: svc; padding: 26px; background: #fff; border-radius: var(--r); border: 1px solid var(--line) }
  .s2 .svc .sec-h { margin-bottom: 22px } .s2 .svc .h2 { font-size: 34px; font-family: var(--sans) }
  .s2 .video { grid-area: video; padding: 0; background: transparent }
  .s2 .video__card { aspect-ratio: auto; height: 100%; min-height: 560px } .s2 .video__card img, .s2 .video__card video { position: absolute; inset: 0; height: 100% } .s2 .video__txt { padding: 30px } .s2 .video__txt .h2 { font-size: 15px; letter-spacing: .22em; text-transform: uppercase; font-family: var(--sans); line-height: 1.8; max-width: none } .s2 .video__txt .kicker { display: none }
  .s2 .ships { grid-area: ships; padding-top: clamp(48px, 7vw, 96px) } .s2 .ships__grid { grid-template-columns: repeat(4, 1fr) }
  .s2 .why { grid-area: why; background: transparent; padding-bottom: 20px }
  .s2 .mission { grid-area: mission; border-radius: var(--r); padding: 60px 50px; margin-top: 30px }
  .s2 .quiz { grid-column: 1 / -1; padding-bottom: 0 }
}

/* ---- сплэш-прелодер главной (2.5 с): маршрут-дуга, самолёт по дуге, эмблема с кольцами, слово, прогресс. Затем уходит вверх. */
.splash { position: fixed; inset: 0; z-index: 100; background: var(--dark); color: #fff; overflow: hidden; display: grid; place-items: center; transition: clip-path .7s cubic-bezier(.7,0,.2,1) .15s; clip-path: inset(0 0 0 0) }
.splash.is-out { clip-path: inset(0 0 100% 0) }
.splash.is-gone { display: none }
body.has-splash.splash-lock { overflow: hidden }
.splash__grid { position: absolute; inset: 0; background: radial-gradient(rgba(143,240,207,.16) 1px, transparent 1.4px) 0 0/26px 26px; -webkit-mask: radial-gradient(ellipse at center, #000 20%, transparent 75%); mask: radial-gradient(ellipse at center, #000 20%, transparent 75%); opacity: 0; animation: sp-fade .9s .1s forwards }
.splash__route { position: absolute; inset: 0; width: 100%; height: 100% }
.splash__arc { fill: none; stroke: var(--mint); stroke-width: 1.5; stroke-dasharray: 7 9; opacity: .75; stroke-dashoffset: 1600; animation: sp-arc 1.7s .25s cubic-bezier(.4,0,.2,1) forwards }
.splash__pt { fill: var(--mint); opacity: 0; animation: sp-fade .3s .35s forwards } .splash__pt--2 { animation-delay: 1.75s }
.splash__plane { opacity: 0; animation: sp-plane 1.7s .25s linear forwards; filter: drop-shadow(0 0 6px rgba(143,240,207,.9)) }
.splash__logo { position: relative; width: clamp(120px, 26vw, 168px); aspect-ratio: 1; display: grid; place-items: center; opacity: 0; transform: scale(.6); filter: blur(10px); animation: sp-logo 1s .5s cubic-bezier(.2,.8,.2,1) forwards }
.splash__logo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; -webkit-mask: radial-gradient(circle, #000 60%, transparent 71%); mask: radial-gradient(circle, #000 60%, transparent 71%) }
.splash__ring { position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(143,240,207,.7); opacity: 0; animation: sp-ring 1.6s 1.1s ease-out forwards } .splash__ring--2 { animation-delay: 1.5s }
.splash__word { position: absolute; top: calc(50% + clamp(70px, 15vw, 100px)); text-align: center; display: grid; gap: 8px }
.splash__word b { font-size: clamp(22px, 5vw, 30px); letter-spacing: .12em; font-weight: 700; opacity: 0; transform: translateY(10px); animation: sp-up .7s 1.1s var(--ease) forwards }
.splash__word small { font-size: 10px; letter-spacing: .42em; text-transform: uppercase; color: var(--mint); opacity: 0; animation: sp-track .9s 1.4s var(--ease) forwards }
.splash__tag { position: absolute; left: var(--pad); bottom: 34px; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.45); opacity: 0; animation: sp-fade .6s 1.3s forwards }
.splash__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--mint); transform-origin: left; transform: scaleX(0); animation: sp-bar 2.4s .1s linear forwards }
@keyframes sp-fade { to { opacity: 1 } }
@keyframes sp-arc { to { stroke-dashoffset: 0 } }
@keyframes sp-plane { 0% { opacity: 0 } 8% { opacity: 1 } 90% { opacity: 1 } 100% { opacity: 0 } }
@keyframes sp-logo { to { opacity: 1; transform: none; filter: blur(0) } }
@keyframes sp-ring { 0% { opacity: .9; transform: scale(1) } 100% { opacity: 0; transform: scale(1.9) } }
@keyframes sp-up { to { opacity: 1; transform: none } }
@keyframes sp-track { 0% { opacity: 0; letter-spacing: .9em } 100% { opacity: 1; letter-spacing: .42em } }
@keyframes sp-bar { to { transform: scaleX(1) } }
@media (prefers-reduced-motion: reduce) { .splash { display: none } }

/* ---- хиро «Взлёт + Маршруты мира»: посадка из сплэша, буквы взлетают, курсив штрихом, веер маршрутов с самолётиками, tilt мышью, параллакс на скролле */
.hero__bg { transform-style: preserve-3d; will-change: transform }
.hero.tilt .hero__bg { transform: perspective(1400px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) scale(1.04); transition: transform .25s ease-out }
.hero.tilt .hero__bg picture { transform: translate3d(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -5px), 0); transition: transform .25s ease-out; display: block; height: 100% }
.hero.tilt .hero__fly, .hero.tilt .hero__flyplane, .hero.tilt .hero__mark, .hero.tilt .hero__mini { --lift: 1 }
.hero.tilt .hero__fly { transform: translate3d(calc(var(--mx, 0) * 18px), calc(var(--my, 0) * 12px), 0); transition: transform .25s ease-out }
.hero__dots { position: absolute; inset: 0; background: radial-gradient(rgba(11,31,26,.55) 1px, transparent 1.5px) 0 0/18px 18px; opacity: 0; transition: opacity 1.4s var(--ease) .3s; -webkit-mask: radial-gradient(ellipse 60% 70% at var(--dx, 72%) var(--dy, 60%), #000 0, transparent 100%); mask: radial-gradient(ellipse 60% 70% at var(--dx, 72%) var(--dy, 60%), #000 0, transparent 100%); pointer-events: none }
.hero.is-in .hero__dots { opacity: .35 } .hero.lite .hero__dots { display: none }
.hero__fly { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible }
.hero__fly-arc { fill: none; stroke: var(--green); stroke-width: 1.5; stroke-dasharray: 6 8; opacity: .85 }
.hero__fly-draw { fill: none; stroke: #fff; stroke-width: 12; stroke-dasharray: 1; stroke-dashoffset: 1 }
.hero__routes path { fill: none; stroke: var(--dark); stroke-width: 1.1; stroke-dasharray: 4 7; opacity: .55 }
.hero__routes-draw path { fill: none; stroke: #fff; stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.5,0,.3,1); transition-delay: var(--d, 0s) }
.hero.routes-on .hero__routes-draw path { stroke-dashoffset: 0 }
.hero__routes-pts circle { fill: #fff; stroke: var(--dark); stroke-width: 1.5; opacity: 0; transition: opacity .5s; transition-delay: calc(var(--d, 0s) + 1.5s) } .hero.routes-on .hero__routes-pts circle { opacity: .9 }
.hero__routes-pts text { font: 500 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; fill: var(--dark); opacity: 0; transition: opacity .5s; transition-delay: calc(var(--d, 0s) + 1.6s); paint-order: stroke; stroke: rgba(245,248,249,.85); stroke-width: 3px } .hero.routes-on .hero__routes-pts text { opacity: .8 }
.hero__flyplane, .hero__mini { position: absolute; left: 0; top: 0; background: var(--dark); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; opacity: 0; z-index: 2; pointer-events: none }
.hero__flyplane { width: 28px; height: 28px; margin: -14px 0 0 -14px; filter: drop-shadow(0 4px 10px rgba(11,31,26,.45)); transition: opacity .4s }
.hero__mini { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; filter: drop-shadow(0 2px 4px rgba(11,31,26,.4)) }
.hero__mark { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(11,31,26,.6), 0 0 18px rgba(143,240,207,.9); opacity: 0; transform: scale(.3); transition: opacity .4s, transform .5s var(--ease); z-index: 2 }
.hero__mark i { position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--mint); opacity: 0 }
.hero__mark.on { opacity: 1; transform: none } .hero__mark.on i { animation: mark-pulse 2.4s ease-out infinite } .hero__mark.on i:last-child { animation-delay: 1.2s }
@keyframes mark-pulse { 0% { transform: scale(1); opacity: .9 } 100% { transform: scale(3.2); opacity: 0 } }
/* заголовок: буквы взлетают снизу с поворотом (типографский взлёт), курсив — штрих */
.hero .w { display: inline-block; overflow: hidden; padding: 0 .04em .14em 0; margin-bottom: -.14em; vertical-align: top }
.hero .c { display: inline-block; opacity: 0; transform: translateY(105%) rotate(6deg); transform-origin: 0 100%; transition: opacity .5s var(--ease), transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--j, 0) * 28ms) }
.hero.is-in .c { opacity: 1; transform: none }
.hero__l2 { position: relative; display: inline-block }
.hero__l2.is-svg { color: transparent }
.hero__l2 svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none }
.hero__l2 svg text { font: inherit; fill: var(--green); fill-opacity: 0; stroke: var(--green); stroke-width: 1.2px; transition: fill-opacity .9s var(--ease) 2.1s }
.hero.is-in .hero__l2 svg text { animation: l2-draw 2s .9s cubic-bezier(.5,0,.3,1) forwards; fill-opacity: 1 }
@keyframes l2-draw { to { stroke-dashoffset: 0 } }
.hero .kicker, .hero__p, .hero__act, .hero__side, .hero__points, .hero__partners { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease) }
.hero.is-in .kicker { opacity: 1; transform: none; transition-delay: .1s } .hero.is-in .hero__p { opacity: 1; transform: none; transition-delay: 1s } .hero.is-in .hero__act { opacity: 1; transform: none; transition-delay: 1.2s }
.hero.is-in .hero__side, .hero.is-in .hero__points { opacity: 1; transform: none; transition-delay: 1.3s } .hero.is-in .hero__partners { opacity: 1; transform: none; transition-delay: 2s }
.hero__thumbs img { opacity: 0; transform: translate(40px, -20px) rotate(20deg) scale(.6); transition: opacity .6s var(--ease), transform .8s cubic-bezier(.2,.8,.2,1) } .hero__thumbs img:nth-child(2) { transition-delay: .15s } .hero__thumbs img:nth-child(3) { transition-delay: .3s }
.hero.is-in .hero__thumbs img { opacity: 1; transform: none; transition-delay: calc(2.3s + var(--k, 0s)) } .hero.is-in .hero__thumbs img:nth-child(2) { --k: .18s } .hero.is-in .hero__thumbs img:nth-child(3) { --k: .36s }
.hero .reveal { transition-delay: .3s }
/* параллакс при скролле: фото медленнее текста, полосы плывут по диагонали */
@supports (animation-timeline: scroll()) {
  .hero__bg picture img { animation: hero-par linear both; animation-timeline: scroll(root); animation-range: 0 100vh }
  .hero__stripe { animation: hero-stripe linear both; animation-timeline: scroll(root); animation-range: 0 100vh }
  .hero__stripe--2 { animation-name: hero-stripe2 }
  @keyframes hero-par { to { transform: translateY(22%) scale(1.06) } }
  @keyframes hero-stripe { to { transform: skewX(-24deg) translateX(-30vw) } }
  @keyframes hero-stripe2 { to { transform: skewX(-24deg) translateX(-14vw) } }
}
@media (prefers-reduced-motion: reduce) { .hero .c, .hero .kicker, .hero__p, .hero__act, .hero__side, .hero__points, .hero__partners, .hero__thumbs img { opacity: 1; transform: none; filter: none; transition: none } .hero__fly, .hero__flyplane, .hero__mini, .hero__mark, .hero__dots { display: none } .hero__l2.is-svg { color: var(--green) } .hero__l2 svg { display: none } }

/* ---- «Глобальная сеть»: текст каскадом, карта оживает при появлении */
.net__txt .kicker--draw { position: relative; padding-left: 0; transition: none }
.net__txt .kicker--draw::after { content: ""; display: inline-block; vertical-align: middle; margin-left: 14px; width: 0; height: 1px; background: var(--mint); transition: width 1s var(--ease) .2s } .net__txt.in .kicker--draw::after { width: 70px }
.words .w { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(10px); transition: opacity .7s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: calc(.15s + var(--i, 0) * 90ms) }
.in .words .w { opacity: 1; transform: none; filter: blur(0) }
.net__txt .rise { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(.7s + var(--i, 0) * .15s) } .net__txt.in .rise { opacity: 1; transform: none }
.net__txt.reveal, .net__txt.reveal.in { transition: none; opacity: 1; transform: none }
.net__map { perspective: 1200px }
.net__map img { transform-origin: 55% 45%; transition: transform 1.2s var(--ease) }
.net__map.is-live img { animation: map-kb 36s ease-in-out infinite alternate }
@keyframes map-kb { 0% { transform: scale(1) translate(0, 0) } 100% { transform: scale(1.1) translate(-2.5%, 1.5%) } }
.net__map::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 45% 40% at var(--hx, 55%) var(--hy, 45%), rgba(143,240,207,.16), transparent 70%); opacity: 0; transition: opacity 1.4s .4s } .net__map.is-live::after { opacity: 1 }
.net__svg { z-index: 1 }
.net__svg .arc { animation: none; stroke-dashoffset: 0; opacity: .7 }
.net__svg .draw { fill: none; stroke: #fff; stroke-width: 8; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s cubic-bezier(.5,0,.3,1); transition-delay: var(--d, 0s) } .net__map.is-live .draw { stroke-dashoffset: 0 }
.net__svg .comet { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: .04 1; stroke-dashoffset: 1.04; opacity: 0; filter: drop-shadow(0 0 4px rgba(143,240,207,.9)) } .net__map.is-live .comet { opacity: .95; animation: map-comet 4.5s linear infinite; animation-delay: calc(var(--d, 0s) + 1.4s) }
@keyframes map-comet { to { stroke-dashoffset: 0 } }
.net__svg .dot, .net__svg .hub { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .6s cubic-bezier(.3,1.6,.4,1); transition-delay: calc(var(--d, 0s) + 1.3s) } .net__map.is-live .dot, .net__map.is-live .hub { transform: scale(1) }
.net__svg .hub { transition-delay: .2s }
.net__svg .ring { fill: none; stroke: var(--mint); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center } .net__map.is-live .ring { animation: map-ring 1.6s ease-out forwards; animation-delay: calc(var(--d, 0s) + 1.4s) }
@keyframes map-ring { 0% { opacity: .9; transform: scale(.3) } 100% { opacity: 0; transform: scale(3.2) } }
.net__svg .lbl { opacity: 0; transition: opacity .6s; transition-delay: calc(var(--d, 0s) + 1.6s) } .net__map.is-live .lbl { opacity: 1 }
.net__svg .lbl-line { stroke: rgba(255,255,255,.45); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s; transition-delay: calc(var(--d, 0s) + 1.5s) } .net__map.is-live .lbl-line { stroke-dashoffset: 0 }
.net__svg .hub-lbl { font-size: 13px; font-weight: 600; fill: var(--mint) }
.net__svg .mplane { fill: #fff; opacity: 0; filter: drop-shadow(0 0 5px rgba(143,240,207,.9)) }
.net__svg .pulse { animation-play-state: paused } .net__map.is-live .pulse { animation-play-state: running }
.net__map.tilt { transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .3s ease-out; transform-style: preserve-3d }
@media (prefers-reduced-motion: reduce) { .words .w, .net__txt .rise { opacity: 1; transform: none; filter: none; transition: none } .net__map img { animation: none !important } .net__svg .draw { stroke-dashoffset: 0 } .net__svg .comet, .net__svg .mplane { display: none } .net__svg .dot, .net__svg .hub { transform: none } .net__svg .lbl { opacity: 1 } }

/* ---- ссылки на форму в каждом блоке */
.act { display: flex; align-items: center; gap: 14px 26px; flex-wrap: wrap } .act--end { justify-content: flex-end }
.act__note { font-size: 13px; color: var(--mute) } .act__note--light { color: rgba(255,255,255,.6) }
.qlink { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--green); position: relative; padding: 6px 0 }
.qlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; opacity: .35; transform: scaleX(1); transform-origin: right; transition: transform .4s var(--ease) }
.qlink:hover::after { transform: scaleX(0); transform-origin: left; animation: qlink-back .4s .4s var(--ease) forwards }
@keyframes qlink-back { from { transform: scaleX(0); transform-origin: left } to { transform: scaleX(1); transform-origin: left } }
.qlink .btn__arr { width: 16px; transition: transform .3s var(--ease) } .qlink:hover .btn__arr { transform: translateX(4px) }
.qlink--light { color: var(--mint) }
.sec-h__r .act--end { margin-top: 4px } .sec-h .act--end { align-items: baseline }
.steps__act { position: relative; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1) }
.horizon__btn { position: absolute; left: var(--pad); bottom: 40px; z-index: 2 }
@media (max-width: 899px) { .act--end { justify-content: flex-start } }

/* ---- сплэш: восход Земли, вспышка при пролёте, перелёт эмблемы в шапку */
.splash__earth { position: absolute; left: 50%; top: 100%; width: 260vmax; height: 260vmax; margin-left: -130vmax; border-radius: 50%; background: radial-gradient(circle at 50% 0%, rgba(143,240,207,.55), rgba(31,138,102,.35) 6%, rgba(11,31,26,0) 18%); box-shadow: 0 -2px 0 0 rgba(143,240,207,.35), 0 -30px 80px -10px rgba(143,240,207,.25); transform: translateY(-4vh); opacity: 0; animation: sp-earth 2.2s .2s cubic-bezier(.2,.7,.2,1) forwards; pointer-events: none }
@keyframes sp-earth { 0% { opacity: 0; transform: translateY(2vh) } 40% { opacity: 1 } 100% { opacity: 1; transform: translateY(-22vh) } }
.splash__flash { position: absolute; left: 50%; top: 50%; width: 60vmax; height: 60vmax; margin: -30vmax 0 0 -30vmax; border-radius: 50%; background: radial-gradient(circle, rgba(143,240,207,.55), rgba(143,240,207,0) 60%); opacity: 0; transform: scale(.2); animation: sp-flash .9s 1.05s ease-out forwards; pointer-events: none; mix-blend-mode: screen }
@keyframes sp-flash { 0% { opacity: 0; transform: scale(.2) } 20% { opacity: 1 } 100% { opacity: 0; transform: scale(1.4) } }
.splash__shine { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; z-index: 1; pointer-events: none }
.splash__shine::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); transform: skewX(-20deg); animation: sp-shine 1s 1.25s ease-in-out forwards }
@keyframes sp-shine { to { left: 130% } }
.splash__logo { z-index: 2; will-change: transform }
.splash.is-out .splash__word, .splash.is-out .splash__tag, .splash.is-out .splash__bar, .splash.is-out .splash__route { transition: opacity .25s; opacity: 0 }
.hdr .logo img { transition: transform .5s var(--ease) } body.logo-arrive .hdr .logo img { animation: logo-pop .6s cubic-bezier(.3,1.5,.4,1) }
@keyframes logo-pop { 0% { transform: scale(.6); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }

/* ---- интерактивная карта партнёрской сети (страница «Партнёры») */
.page--tight { padding-bottom: 10px }
.wmap { padding: 10px 0 clamp(40px, 6vw, 80px) }
.wmap__card { position: relative; background: var(--dark); color: #fff; border-radius: var(--r); padding: clamp(18px, 3vw, 34px); overflow: hidden }
.wmap__card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 60% 40%, rgba(143,240,207,.12), transparent 45%); pointer-events: none }
.wmap__head { position: relative; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-bottom: 14px }
.wmap__filters { display: flex; flex-wrap: wrap; gap: 8px }
.chip--dark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.8); cursor: pointer; font-family: inherit } .chip--dark.is-on { background: var(--mint); color: var(--dark); border-color: var(--mint) }
.wmap__legend { font-size: 12px; color: rgba(255,255,255,.5); display: flex; align-items: center; gap: 8px } .wmap__legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(143,240,207,.2) }
.wmap__stage { position: relative; aspect-ratio: 2000/780 }
.wmap__svg { width: 100%; height: 100%; display: block; overflow: visible }
.wmap__dots circle { fill: rgba(255,255,255,.22); transition: fill .4s } .wmap__dots circle.lit { fill: rgba(143,240,207,.55) }
.wmap__dots { opacity: 0; transition: opacity 1.2s } .wmap.is-live .wmap__dots { opacity: 1 }
.wmap__arcs path { fill: none; stroke: var(--mint); stroke-width: 2; stroke-dasharray: 6 8; opacity: .8; transition: opacity .4s, stroke-width .3s }
.wmap__mask path { fill: none; stroke: #fff; stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.5,0,.3,1); transition-delay: var(--d, 0s) } .wmap.is-live .wmap__mask path { stroke-dashoffset: 0 }
.wmap__pins .pin { cursor: pointer } .wmap__pins .pin circle.c { fill: #fff; stroke: var(--dark); stroke-width: 2; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s cubic-bezier(.3,1.6,.4,1), fill .3s; transition-delay: calc(var(--d, 0s) + 1.4s) } .wmap.is-live .pin circle.c { transform: scale(1) }
.wmap__pins .pin.hub circle.c { fill: var(--mint); r: 8 } .wmap__pins .pin.hub circle.p { fill: none; stroke: var(--mint); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: pulse-w 2.6s ease-out infinite }
@keyframes pulse-w { 0% { transform: scale(.4); opacity: .9 } 100% { transform: scale(3.4); opacity: 0 } }
.wmap__pins .pin text { font: 500 15px var(--sans); fill: rgba(255,255,255,.85); letter-spacing: .04em; paint-order: stroke; stroke: rgba(11,31,26,.85); stroke-width: 5px; opacity: 0; transition: opacity .5s; transition-delay: calc(var(--d, 0s) + 1.6s); pointer-events: none } .wmap.is-live .pin text { opacity: 1 }
.wmap__pins .pin.hub text { font-size: 18px; font-weight: 700; fill: var(--mint) }
.wmap__pins .pin:hover circle.c, .wmap__pins .pin.is-on circle.c { fill: var(--mint); transform: scale(1.4) }
.wmap.has-sel .wmap__arcs path:not(.is-on) { opacity: .18 } .wmap.has-sel .wmap__pins .pin:not(.is-on):not(.hub) text { opacity: .35 } .wmap__arcs path.is-on { opacity: 1; stroke-width: 3.2; stroke: #fff }
.wmap.has-region .wmap__arcs path:not(.in-region) { opacity: .1 } .wmap.has-region .wmap__pins .pin:not(.in-region):not(.hub) { opacity: .25 }
.wmap__planes g { fill: #fff; opacity: 0; filter: drop-shadow(0 0 5px rgba(143,240,207,.9)) }
.wmap__tip { position: absolute; z-index: 3; background: #fff; color: var(--ink); border-radius: 14px; padding: 12px 14px; min-width: 190px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); transform: translate(-50%, calc(-100% - 16px)); pointer-events: none; font-size: 13px; display: grid; gap: 4px; opacity: 0; transition: opacity .2s }
.wmap__tip.is-on { opacity: 1; pointer-events: auto } .wmap__tip::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: #fff; transform: translateX(-50%) rotate(45deg) }
.wmap__tip b { font-size: 15px } .wmap__tip span { color: var(--mute) } .wmap__tip a { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-weight: 600; margin-top: 4px }
.wmap__stats { position: relative; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1) } .wmap__stats .btn { margin-left: auto }
@media (max-width: 899px) { .wmap__card { padding: 16px; border-radius: 18px } .wmap__stage { aspect-ratio: 2000/780 } .wmap__pins .pin text { font-size: 22px } .wmap__pins .pin.hub text { font-size: 26px } .wmap__pins .pin circle.c { r: 7 } .wmap__legend { display: none } .wmap__stats .btn { margin-left: 0; width: 100% } .wmap__tip { min-width: 160px; font-size: 12px } }
@media (prefers-reduced-motion: reduce) { .wmap__dots { opacity: 1 } .wmap__mask path { stroke-dashoffset: 0 } .wmap__pins .pin circle.c { transform: scale(1) } .wmap__pins .pin text { opacity: 1 } .wmap__planes { display: none } .pin.hub circle.p { animation: none } }

/* ---- услуги на главной: витрина с героем (фото активной услуги + список остальных) */
.svc__show { display: grid; gap: 14px }
.svc__hero { position: relative; border-radius: 18px; overflow: hidden; background: var(--dark); aspect-ratio: 4/5; min-height: 380px }
.svc__slide { position: absolute; inset: 0; color: #fff; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s .7s }
.svc__slide.is-on { opacity: 1; visibility: visible; transition-delay: 0s }
.svc__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 6s linear; filter: saturate(.9) } .svc__slide.is-on img { transform: scale(1) }
.svc__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,31,26,.1), rgba(11,31,26,.15) 40%, rgba(11,31,26,.88)) }
.svc__slide-n { position: absolute; left: 20px; top: 14px; z-index: 1; font-family: var(--serif); font-size: 40px; line-height: 1; opacity: .85 }
.svc__slide-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px; display: grid; gap: 8px; transform: translateY(14px); opacity: 0; transition: transform .7s var(--ease) .15s, opacity .6s var(--ease) .15s }
.svc__slide.is-on .svc__slide-body { transform: none; opacity: 1 }
.svc__slide-body > .ic { color: var(--mint) } .svc__slide-body b { font-size: 22px; font-weight: 600 } .svc__slide-body p { font-size: 14px; color: rgba(255,255,255,.78); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.svc__slide-body .svc__more { color: #fff } .svc__slide-body .circ { border-color: rgba(255,255,255,.4) } .svc__slide:hover .circ { background: #fff; color: var(--dark); border-color: #fff }
.svc__dots { position: absolute; right: 18px; top: 22px; z-index: 2; display: flex; gap: 6px } .svc__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); transition: width .3s, background .3s; cursor: pointer } .svc__dots i.is-on { width: 18px; border-radius: 3px; background: var(--mint) }
.svc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 }
.svc__list li { position: relative; border-top: 1px solid var(--line) } .svc__list li:last-child { border-bottom: 1px solid var(--line) }
.svc__list a { display: grid; grid-template-columns: 30px 26px 1fr 18px; align-items: center; gap: 12px; padding: 16px 4px; transition: padding .35s var(--ease), color .3s }
.svc__li-n { font-family: var(--serif); font-size: 15px; color: var(--mute-2) } .svc__list .ic { width: 20px; height: 20px; color: var(--mute-2); transition: color .3s } .svc__li-t { font-weight: 600; font-size: 16px } .svc__list .btn__arr { color: var(--green); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s }
.svc__list li.is-on a { padding-left: 12px } .svc__list li.is-on .ic, .svc__list li.is-on .svc__li-n { color: var(--green) } .svc__list li.is-on .btn__arr, .svc__list li:hover .btn__arr { opacity: 1; transform: none }
.svc__li-bar { position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; overflow: hidden; pointer-events: none } .svc__li-bar i { display: block; height: 100%; width: 0; background: var(--green) } .svc__list li.is-on .svc__li-bar i { animation: svc-bar var(--auto, 5s) linear forwards } .svc__show.is-hover .svc__li-bar i { animation-play-state: paused }
@keyframes svc-bar { to { width: 100% } }
@media (min-width: 700px) { .svc__show { grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: stretch } .svc__hero { aspect-ratio: auto; min-height: 460px } .svc__list { align-content: center } }
@media (max-width: 699px) { .svc__hero { aspect-ratio: 4/5; touch-action: pan-y } .svc__list a { padding: 13px 4px } .svc__li-t { font-size: 15px } }
@media (min-width: 1100px) { .s2 .svc__show { flex: 1; grid-template-columns: 1.1fr .9fr } .s2 .svc__hero { min-height: 100%; height: 100% } .s2 .svc__list { align-content: center } .s2 .svc__slide-body { padding: 24px } .s2 .svc__slide-body b { font-size: 24px } }
@media (prefers-reduced-motion: reduce) { .svc__slide img { transition: none; transform: none } .svc__li-bar { display: none } }

.stats4 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; margin-top: 26px }

/* ---- всплывающая форма расчёта */
.qm { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; visibility: hidden; pointer-events: none }
.qm.is-on { visibility: visible; pointer-events: auto }
.qm__back { position: absolute; inset: 0; background: rgba(7,20,16,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .45s var(--ease) } .qm.is-on .qm__back { opacity: 1 }
.qm__box { position: relative; width: min(980px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: grid; grid-template-columns: 1fr; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 60px 120px -40px rgba(7,20,16,.7); opacity: 0; transform: translateY(40px) scale(.96); transition: opacity .5s var(--ease), transform .6s cubic-bezier(.2,.9,.2,1) } .qm.is-on .qm__box { opacity: 1; transform: none }
.qm__x { position: absolute; right: 14px; top: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(11,31,26,.08); cursor: pointer; display: grid; place-items: center; transition: background .3s, transform .3s } .qm__x:hover { background: rgba(11,31,26,.14); transform: rotate(90deg) } .qm__x span { position: absolute; width: 18px; height: 1.6px; background: var(--ink); transform: rotate(45deg) } .qm__x span:last-child { transform: rotate(-45deg) }
.qm__side { background: var(--dark); color: #fff; position: relative; overflow: hidden; display: none }
.qm__side::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 15%, rgba(143,240,207,.16), transparent 45%), radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px) 0 0/22px 22px }
.qm__side-in { position: relative; padding: 40px 36px; display: flex; flex-direction: column; height: 100%; gap: 14px }
.qm__plane { position: absolute; right: -30px; top: -30px; width: 190px; height: 190px; background: rgba(255,255,255,.05); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; transform: rotate(35deg) }
.qm__h { font-family: var(--serif); font-size: 32px; font-weight: 400; line-height: 1.1 } .qm__p { color: rgba(255,255,255,.7); font-size: 14.5px }
.qm__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; font-size: 14px } .qm__list li { display: flex; align-items: center; gap: 12px } .qm__list .ic { color: var(--mint); width: 20px; height: 20px }
.qm__contacts { margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: 10px; font-size: 15px } .qm__contacts a { display: flex; align-items: center; gap: 10px } .qm__contacts .ic { width: 18px; height: 18px; color: var(--mint) }
.qm__form { position: relative; padding: 26px 22px 22px; display: grid; gap: 12px; overflow: auto; max-height: calc(100dvh - 32px) }
.qm__title { display: grid; gap: 4px; margin-bottom: 4px; padding-right: 50px } .qm__title b { font-family: var(--serif); font-size: 26px; font-weight: 400 } .qm__title span { color: var(--mute); font-size: 13px }
.fld { position: relative; display: block } .fld span { position: absolute; left: 14px; top: 13px; font-size: 13.5px; color: var(--mute); pointer-events: none; transition: transform .2s var(--ease), font-size .2s, color .2s; transform-origin: left top }
.fld input, .fld textarea { width: 100%; font: inherit; padding: 22px 14px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); outline: none; transition: border-color .2s, background .2s } .fld textarea { resize: none; min-height: 72px }
.fld input:focus, .fld textarea:focus { border-color: var(--green); background: #fff }
.fld input:focus + span, .fld input:not(:placeholder-shown) + span, .fld.is-filled span, .fld textarea:focus + span, .fld:has(input:not(:placeholder-shown)) span, .fld:has(:focus) span, .fld:has(textarea:not(:placeholder-shown)) span { transform: translateY(-9px); font-size: 11px; color: var(--green) }
.qm__route { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 8px; align-items: center } .qm__route .ship__arr { width: 24px; color: var(--green) }
.qm__row { display: grid; gap: 12px } @media (min-width: 560px) { .qm__row { grid-template-columns: 1fr 1fr } }
.qm__form .btn { margin-top: 4px }
.qm__done[hidden] { display: none }
.qm__done { position: absolute; inset: 0; background: #fff; display: grid; place-content: center; justify-items: center; text-align: center; gap: 12px; padding: 30px } .qm__done b { font-family: var(--serif); font-size: 28px; font-weight: 400 } .qm__done p { color: var(--mute); max-width: 32ch }
.qm__check { width: 84px; height: 84px } .qm__check svg { width: 100%; height: 100%; fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round } .qm__check circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: chk 1s var(--ease) forwards } .qm__check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: chk .5s .7s var(--ease) forwards }
@keyframes chk { to { stroke-dashoffset: 0 } }
body.qm-open { overflow: hidden }
@media (min-width: 900px) { .qm__box { grid-template-columns: 340px 1fr } .qm__side { display: block } .qm__form { padding: 34px 34px 30px; gap: 14px } .qm__x { right: 18px; top: 18px } }
@media (max-width: 899px) { .qm { padding: 0; align-items: end } .qm__box { border-radius: 24px 24px 0 0; max-height: 92dvh; transform: translateY(100%); transition: transform .55s cubic-bezier(.2,.9,.2,1), opacity .3s } .qm.is-on .qm__box { transform: none } .qm__form { padding: 22px 18px calc(18px + env(safe-area-inset-bottom)) } .qm__box::before { content: ""; position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; border-radius: 2px; background: var(--line); transform: translateX(-50%); z-index: 3 } }
/* горизонты: кикер на плашке, кнопка внизу; гигантское слово в подвале на мобилке */
.horizon .kicker { background: rgba(11,31,26,.45); backdrop-filter: blur(8px); padding: 12px 16px; border-radius: 14px; margin: 0 }
@media (max-width: 899px) { .horizon { aspect-ratio: 4/5 } .horizon .kicker { top: 20px; left: 16px; right: 16px; max-width: none } .horizon__btn { left: 16px; bottom: 20px } .ftr__word span { font-size: 16.5vw } .ftr__word { height: 15vw } }
/* страховка: если скрипт не загрузился, заставка сама уходит через 6 с */
.splash:not(.is-out) { animation: sp-safety .7s 6s forwards }
@keyframes sp-safety { to { clip-path: inset(0 0 100% 0); visibility: hidden } }

/* ---- квиз-калькулятор */
.quiz { padding: clamp(40px, 6vw, 80px) 0 }
.quiz__card { position: relative; background: var(--dark); color: #fff; border-radius: var(--r); overflow: hidden; padding: clamp(26px, 4vw, 50px) }
.quiz__card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(143,240,207,.16), transparent 42%), radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px) 0 0/22px 22px; pointer-events: none }
.quiz__intro { position: relative; display: grid; gap: 30px; align-items: center } .quiz__intro[hidden] { display: none }
.quiz__intro-txt p { color: rgba(255,255,255,.7); margin: 14px 0 26px; max-width: 46ch } .quiz__intro-txt .h2 { font-size: clamp(28px, 3.6vw, 46px) }
.quiz__intro-art { position: relative; width: 200px; height: 200px; margin: 0 auto; display: grid; place-items: center; font-family: var(--serif) } .quiz__intro-art b { font-size: 64px; line-height: 1; font-weight: 400 } .quiz__intro-art small { position: absolute; bottom: 52px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--mint) }
.quiz__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(143,240,207,.4); animation: qz-ring 3s ease-out infinite } .quiz__ring--2 { animation-delay: 1.5s }
@keyframes qz-ring { 0% { transform: scale(.7); opacity: .9 } 100% { transform: scale(1.35); opacity: 0 } }
.quiz__plane { position: absolute; width: 20px; height: 20px; background: var(--mint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; animation: qz-orbit 6s linear infinite; transform-origin: 0 100px; top: 0; left: 50%; margin-left: -10px }
@keyframes qz-orbit { to { transform: rotate(360deg) } }
.quiz__body { position: relative } .quiz__body[hidden] { display: none }
.quiz__top { display: flex; align-items: center; gap: 20px; margin-bottom: 26px } .quiz__stepn { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); white-space: nowrap } .quiz__stepn b { color: var(--mint) }
.quiz__bar { position: relative; flex: 1; height: 2px; background: rgba(255,255,255,.14) } .quiz__bar i { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--mint); transition: width .6s var(--ease) }
.quiz__bar em { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--mint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; transform: rotate(90deg); transition: left .6s var(--ease); filter: drop-shadow(0 0 6px rgba(143,240,207,.9)) }
.quiz__steps { position: relative; min-height: 300px }
.quiz__step { display: none; animation: qz-in .5s var(--ease) } .quiz__step.is-on { display: block }
@keyframes qz-in { from { opacity: 0; transform: translateX(24px) } to { opacity: 1; transform: none } }
.quiz__step h3 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 500; margin-bottom: 20px; letter-spacing: -.01em }
.quiz__opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px } @media (min-width: 700px) { .quiz__opts { grid-template-columns: repeat(3, 1fr) } .quiz__opts--4 { grid-template-columns: repeat(4, 1fr) } .quiz__opts--3 { grid-template-columns: repeat(3, 1fr) } }
.quiz__opt { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; min-height: 92px; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #fff; font: 500 15px/1.25 var(--sans); text-align: left; cursor: pointer; transition: background .25s, border-color .25s, transform .25s var(--ease) }
.quiz__opt .ic { width: 22px; height: 22px; color: var(--mint) } .quiz__opt small { color: rgba(255,255,255,.55); font-weight: 400; font-size: 13px } .quiz__opt--big { min-height: 120px }
.quiz__opt:hover { background: rgba(255,255,255,.08); transform: translateY(-2px) } .quiz__opt.is-on { background: var(--mint); border-color: var(--mint); color: var(--dark) } .quiz__opt.is-on .ic { color: var(--dark) } .quiz__opt.is-on small { color: rgba(11,31,26,.7) }
.quiz__fld { margin-top: 14px; max-width: 420px } .quiz__fld[hidden] { display: none } .quiz__fld input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff } .quiz__fld input:focus { background: rgba(255,255,255,.1); border-color: var(--mint) } .quiz__fld span { color: rgba(255,255,255,.55) } .quiz__fld:has(:focus) span, .quiz__fld:has(input:not(:placeholder-shown)) span { color: var(--mint) }
.quiz__range { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 6px 10px; margin-bottom: 18px; max-width: 520px } .quiz__range output { font-size: 44px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums } .quiz__unit { color: rgba(255,255,255,.5); font-size: 16px }
.quiz__range input { grid-column: 1 / -1; width: 100%; accent-color: var(--mint); height: 4px; cursor: pointer } .quiz__range-l { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.45) }
.quiz__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1) } .quiz__nav[hidden] { display: none } .quiz__nav .btn[disabled] { opacity: .4; pointer-events: none }
.quiz__res { display: grid; gap: 26px } @media (min-width: 900px) { .quiz__res { grid-template-columns: 1.1fr 1fr; gap: 40px } }
.quiz__res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 } .quiz__res-grid div { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1) } .quiz__res-grid span { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 6px } .quiz__res-grid b { font-size: 17px; font-weight: 600; line-height: 1.3 } .quiz__res-grid div:last-child { grid-column: 1 / -1 } .quiz__res-grid div:last-child b { font-size: 14px; font-weight: 500 }
.quiz__res-note { color: rgba(255,255,255,.6); font-size: 13.5px; max-width: 52ch }
.quiz__form { position: relative; background: #fff; color: var(--ink); border-radius: 18px; padding: 22px; display: grid; gap: 12px } .quiz__form > b { font-family: var(--serif); font-size: 22px; font-weight: 400 }
.quiz__done[hidden] { display: none } .quiz__done { position: absolute; inset: 0; background: #fff; border-radius: 18px; display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px; padding: 24px } .quiz__done b { font-family: var(--serif); font-size: 24px; font-weight: 400 } .quiz__done p { color: var(--mute); max-width: 30ch }
.hero__quiz { margin-top: 18px; display: inline-flex }
@media (min-width: 900px) { .quiz__intro { grid-template-columns: 1fr 260px } .quiz__intro-art { width: 240px; height: 240px } .quiz__plane { transform-origin: 0 120px } }
@media (prefers-reduced-motion: reduce) { .quiz__ring, .quiz__plane { animation: none } .quiz__step { animation: none } }

/* ---- блок «Есть вопрос по перевозке?» */
.aib { padding: 0 0 clamp(48px, 7vw, 96px) } .aib__in { display: grid; gap: 26px; align-items: center }
.aib__txt p { color: var(--mute); margin: 14px 0 22px; max-width: 46ch }
.aib__qs { display: grid; gap: 10px }
.aib__q { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 500 15px var(--sans); color: var(--ink); text-align: left; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; opacity: 0; transform: translateX(20px); animation: aib-in .6s var(--ease) forwards; animation-delay: var(--d, 0ms) }
@keyframes aib-in { to { opacity: 1; transform: none } }
.aib__q:hover { transform: translateX(6px); box-shadow: 0 16px 30px -20px rgba(11,31,26,.4); border-color: var(--green) } .aib__q .btn__arr { margin-left: auto; color: var(--green) }
.aib__av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none } .aib__av img { width: 100%; height: 100%; object-fit: cover }
@media (min-width: 900px) { .aib__in { grid-template-columns: 1fr 1fr; gap: 60px } }

/* ---- ИИ-консультант: кнопка и окно */
.ai-fab { position: fixed; right: 18px; bottom: 86px; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border-radius: 999px; border: 0; background: var(--dark); color: #fff; font: 500 14px var(--sans); cursor: pointer; box-shadow: 0 14px 30px -12px rgba(11,31,26,.6); transition: transform .3s var(--ease), opacity .3s }
.ai-fab:hover { transform: translateY(-2px) } .ai-fab__ic { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; position: relative } .ai-fab__ic img { width: 100%; height: 100%; object-fit: cover } .ai-fab__ic::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 10px; height: 10px; border-radius: 50%; background: #34D399; border: 2px solid var(--dark) }
body.ai-open .ai-fab { opacity: 0; pointer-events: none }
.ai { position: fixed; right: 18px; bottom: 18px; z-index: 65; width: min(400px, calc(100vw - 36px)); height: min(620px, calc(100dvh - 36px)); display: flex; flex-direction: column; background: #fff; border-radius: 22px; box-shadow: 0 40px 90px -30px rgba(7,20,16,.6); overflow: hidden; transform: translateY(24px) scale(.96); opacity: 0; visibility: hidden; transition: transform .5s cubic-bezier(.2,.9,.2,1), opacity .4s, visibility 0s .5s }
.ai.is-on { transform: none; opacity: 1; visibility: visible; transition-delay: 0s }
.ai__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--dark); color: #fff }
.ai__av { position: relative; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: none } .ai__av img { width: 100%; height: 100%; object-fit: cover } .ai__av i { position: absolute; right: 1px; bottom: 1px; width: 10px; height: 10px; border-radius: 50%; background: #34D399; border: 2px solid var(--dark) }
.ai__who b { display: block; font-size: 15px } .ai__who span { font-size: 12px; color: rgba(255,255,255,.6) }
.ai__x { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); cursor: pointer; position: relative } .ai__x span { position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: #fff; transform: translate(-50%, -50%) rotate(45deg) } .ai__x span:last-child { transform: translate(-50%, -50%) rotate(-45deg) }
.ai__log { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--bg) }
.ai__m { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; animation: ai-in .35s var(--ease) } .ai__m--bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; align-self: flex-start } .ai__m--me { background: var(--dark); color: #fff; border-bottom-right-radius: 6px; align-self: flex-end }
.ai__m b { font-weight: 600 } .ai__m ul { margin: 6px 0 0; padding-left: 18px }
@keyframes ai-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.ai__typing { display: inline-flex; gap: 4px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; border-bottom-left-radius: 6px; align-self: flex-start } .ai__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: ai-dot 1s infinite } .ai__typing i:nth-child(2) { animation-delay: .15s } .ai__typing i:nth-child(3) { animation-delay: .3s }
@keyframes ai-dot { 0%, 100% { opacity: .3; transform: translateY(0) } 50% { opacity: 1; transform: translateY(-3px) } }
.ai__sug { display: flex; flex-wrap: wrap; gap: 6px } .ai__sug button { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 500 13px var(--sans); color: var(--green); cursor: pointer; transition: background .2s } .ai__sug button:hover { background: #E7F7EE }
.ai__lead { padding: 8px 16px 0; background: var(--bg) } .ai__lead[hidden] { display: none } .ai__lead .btn { width: 100%; padding: 12px 18px }
.ai__in { display: flex; gap: 8px; padding: 12px 12px 8px; background: #fff; border-top: 1px solid var(--line) } .ai__in input { flex: 1; font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); outline: none } .ai__in input:focus { border-color: var(--green) }
.ai__in button { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--green); color: #fff; cursor: pointer; display: grid; place-items: center; transition: transform .25s var(--ease) } .ai__in button:hover { transform: scale(1.06) } .ai__in button .ic { width: 20px; height: 20px; transform: rotate(45deg) translate(-1px, 1px) }
.ai__note { padding: 4px 16px 12px; font-size: 11px; color: var(--mute-2); background: #fff }
@media (max-width: 899px) { .ai { right: 0; bottom: 0; width: 100%; height: 88dvh; border-radius: 22px 22px 0 0; transform: translateY(100%) } .ai-fab { bottom: 86px; right: 16px } .ai-fab__t { display: none } .ai-fab { padding: 6px } }

/* ---- отзывы (2ГИС) */
.rev { padding: 0 0 clamp(48px, 7vw, 96px) }
.rev__badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s } .rev__badge:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -20px rgba(11,31,26,.4) }
.rev__gis { font-weight: 800; font-size: 13px; color: #1BA55B; letter-spacing: .02em } .rev__badge b { font-size: 20px; font-weight: 700 } .rev__stars { color: #F5A623; letter-spacing: .05em; font-size: 14px } .rev__badge small { color: var(--mute); font-size: 12px }
.rev__grid { display: grid; gap: 16px } @media (min-width: 900px) { .rev__grid { grid-template-columns: 1.3fr 1fr 1fr } }
.rev__card { position: relative; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 30px 26px 24px; display: flex; flex-direction: column; gap: 14px; transition: transform .4s var(--ease), box-shadow .4s } .rev__card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -34px rgba(11,31,26,.4) }
.rev__q { position: absolute; left: 22px; top: 6px; font-family: var(--serif); font-size: 64px; line-height: 1; color: var(--mint) } .rev__card p { font-size: 17px; line-height: 1.55; margin-top: 14px; flex: 1 } .rev__card footer { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--mute) } .rev__card footer b { color: var(--ink); font-size: 14px }
.rev__card--cta { background: var(--dark); color: #fff; border-color: var(--dark); justify-content: center; align-items: flex-start; gap: 8px } .rev__card--cta b { font-family: var(--serif); font-size: 24px; font-weight: 400 } .rev__card--cta > span:not(.rev__stars) { color: rgba(255,255,255,.65); font-size: 14px } .rev__stars--big { font-size: 20px } .rev__card--cta .btn__arr { color: var(--mint); margin-top: 8px }

/* ---- просмотр видео на весь экран */
.vm { position: fixed; inset: 0; z-index: 60; background: rgba(7,20,16,.94); display: grid; place-items: center; padding: 20px } .vm[hidden] { display: none }
.vm video { width: min(1100px, 100%); max-height: 86vh; border-radius: 14px; background: #000; box-shadow: 0 40px 100px -30px rgba(0,0,0,.8) }

/* ---- общий лоск: заголовки по словам, фото в карточках при появлении, магнитные кнопки */
.reveal .h2 .w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px); transition: opacity .7s var(--ease), transform .8s var(--ease), filter .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms) }
.reveal.in .h2 .w { opacity: 1; transform: none; filter: blur(0) }
.reveal .ship__img img, .reveal .art__img img, .reveal .svc__img img, .mission__img.reveal video { transform: scale(1.12); transition: transform 1.4s var(--ease) } .reveal.in .ship__img img, .reveal.in .art__img img, .reveal.in .svc__img img, .mission__img.reveal.in video { transform: scale(1) }
.svc__card:hover .svc__img img, .ship:hover .ship__img img { transform: scale(1.05) !important }
.btn.is-mag { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .35s var(--ease), background .3s }
@media (prefers-reduced-motion: reduce) { .reveal .h2 .w { opacity: 1; transform: none; filter: none; transition: none } .menu__ping, .menu__bg img.is-on { animation: none } }

/* ---- внутренние мини-лендинги: хиро, преимущества, «кому подходит», FAQ, другие услуги, список услуг */
.ph { padding: clamp(24px, 4vw, 44px) 0 clamp(30px, 5vw, 56px); position: relative; overflow: hidden }
.ph::before { content: ""; position: absolute; right: -10%; top: -20%; width: 50%; height: 140%; background: radial-gradient(circle at 60% 40%, rgba(143,240,207,.25), transparent 60%); pointer-events: none }
.ph__in { position: relative; display: grid; gap: 26px; align-items: center }
.ph__h { font-size: clamp(34px, 4.6vw, 62px); max-width: 16ch }
.ph__lead { color: var(--ink-2); font-size: clamp(16px, 1.3vw, 19px); margin: 16px 0 24px; max-width: 54ch; line-height: 1.55 }
.ph__media { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 40px 80px -40px rgba(11,31,26,.45) } .ph__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 1.6s var(--ease) } .ph__media.in img { transform: scale(1) }
.ph__num { position: absolute; left: 20px; bottom: 12px; font-family: var(--serif); font-size: 72px; line-height: 1; color: #fff; opacity: .85; text-shadow: 0 8px 30px rgba(11,31,26,.6) }
.ph__facts { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 16px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line) }
@media (min-width: 900px) { .ph__in { grid-template-columns: 1.1fr .9fr; gap: 50px } .ph__media { aspect-ratio: 5/4 } .ph__facts { grid-template-columns: repeat(4, auto); justify-content: start; gap: 0 } .ph__facts .stat { padding: 0 40px 0 0; margin-right: 40px; border-right: 1px solid var(--line) } .ph__facts .stat:last-child { border: 0 } }
.feat { padding: clamp(40px, 6vw, 80px) 0 } .feat--tint { background: var(--bg-2) }
.feat__grid { display: grid; gap: 14px } @media (min-width: 700px) { .feat__grid { grid-template-columns: repeat(2, 1fr) } } @media (min-width: 1100px) { .feat__grid { grid-template-columns: repeat(3, 1fr) } }
.feat__it { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; display: grid; gap: 10px; align-content: start; transition: transform .4s var(--ease), box-shadow .4s } .feat__it:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -34px rgba(11,31,26,.4) }
.feat__it b { font-size: 18px; font-weight: 600 } .feat__it p { color: var(--mute); font-size: 14.5px }
.fit { padding: clamp(40px, 6vw, 80px) 0 } .fit__in { display: grid; gap: 26px; align-items: start } @media (min-width: 900px) { .fit__in { grid-template-columns: 1fr 1fr; gap: 60px } }
.fit__chips { display: flex; flex-wrap: wrap; gap: 10px; align-content: start; align-items: center }
.chip--big { display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; font-size: 15px; border-radius: 999px; background: #fff; opacity: 0; transform: translateY(10px); animation: aib-in .6s var(--ease) forwards; animation-delay: var(--d, 0ms) } .chip--big .ic { width: 18px; height: 18px; color: var(--green) }
.faq { padding: clamp(40px, 6vw, 80px) 0; background: var(--bg-2) }
.faq__list { display: grid; gap: 10px; max-width: 900px }
.faq__it { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 0 22px; transition: box-shadow .3s } .faq__it[open] { box-shadow: 0 24px 40px -30px rgba(11,31,26,.3) }
.faq__it summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 16.5px } .faq__it summary::-webkit-details-marker { display: none }
.faq__it summary i { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); position: relative; transition: transform .4s var(--ease), background .3s } .faq__it summary i::before, .faq__it summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%) } .faq__it summary i::after { transform: translate(-50%, -50%) rotate(90deg) }
.faq__it[open] summary i { transform: rotate(45deg); background: var(--dark); border-color: var(--dark) } .faq__it[open] summary i::before, .faq__it[open] summary i::after { background: #fff }
.faq__a { padding: 0 0 20px; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; max-width: 70ch; animation: qz-in .4s var(--ease) }
.osvc { padding: clamp(40px, 6vw, 80px) 0 0 } .osvc__grid { display: grid; gap: 12px; margin-top: 16px } @media (min-width: 700px) { .osvc__grid { grid-template-columns: repeat(2, 1fr) } } @media (min-width: 1100px) { .osvc__grid { grid-template-columns: repeat(4, 1fr) } }
.osvc__it { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; background: #fff; border: 1px solid var(--line); border-radius: 16px; font-weight: 600; font-size: 15px; transition: transform .35s var(--ease), box-shadow .35s } .osvc__it:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -30px rgba(11,31,26,.4) }
.osvc__it img { width: 64px; height: 56px; object-fit: cover; border-radius: 10px; flex: none } .osvc__it span { display: flex; flex-direction: column; gap: 2px } .osvc__it b { font-family: var(--serif); font-weight: 400; font-size: 13px; color: var(--mute) } .osvc__it .btn__arr { margin-left: auto; color: var(--green) }
.svl { padding: clamp(30px, 5vw, 60px) 0 } .svl__row { display: grid; gap: 22px; padding: clamp(24px, 4vw, 50px) 0; border-top: 1px solid var(--line); align-items: center } .svl__row:first-child { border-top: 0 }
.svl__img { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3; display: block } .svl__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease) } .svl__img:hover img { transform: scale(1.05) } .svl__img .svc__n { font-size: 64px }
.svl__body { display: grid; gap: 14px } .svl__body .h2 { font-size: clamp(28px, 3.2vw, 42px) } .svl__lead { color: var(--ink-2); font-size: 16.5px; max-width: 56ch }
.svl__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: 1fr } @media (min-width: 560px) { .svl__list { grid-template-columns: 1fr 1fr } } .svl__list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500 } .svl__list .ic { width: 18px; height: 18px; color: var(--green); flex: none }
.svl__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--mute) } .svl__facts b { color: var(--ink); font-size: 16px; font-weight: 600 }
@media (min-width: 900px) { .svl__row { grid-template-columns: 1fr 1.1fr; gap: 50px } .svl__row--flip .svl__img { order: 2 } }
.about-txt { padding: clamp(30px, 5vw, 60px) 0 } .about-txt__in { display: grid; gap: 22px } @media (min-width: 900px) { .about-txt__in { grid-template-columns: 1fr 1.4fr; gap: 60px } }
.values { padding: clamp(40px, 6vw, 80px) 0 } .values__grid { display: grid; gap: 14px } @media (min-width: 900px) { .values__grid { grid-template-columns: repeat(3, 1fr) } }
.values__it { background: var(--dark); color: #fff; border-radius: var(--r); padding: 30px 26px; display: grid; gap: 12px; align-content: start; position: relative; overflow: hidden } .values__it::before { content: ""; position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(143,240,207,.25), transparent 70%) } .values__it .ic { width: 28px; height: 28px; color: var(--mint) } .values__it b { font-family: var(--serif); font-size: 24px; font-weight: 400 } .values__it p { color: rgba(255,255,255,.72); font-size: 14.5px }
.shl { padding: 10px 0 clamp(40px, 6vw, 80px) } .filters__n { margin-left: auto; font-size: 13px; color: var(--mute); align-self: center }
.contact-cards { display: grid; gap: 10px; margin-top: 8px } @media (min-width: 560px) { .contact-cards { grid-template-columns: 1fr 1fr } }
.contact-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: transform .3s var(--ease), box-shadow .3s } a.contact-card:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -30px rgba(11,31,26,.4) }
.contact-card .ic { width: 22px; height: 22px; color: var(--green); flex: none } .contact-card span { display: flex; flex-direction: column; min-width: 0 } .contact-card small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute) } .contact-card b { font-size: 15px; font-weight: 600; word-break: break-word }
.ph .map-frame { aspect-ratio: 4/5; max-height: 560px }
/* ---- сроки по регионам */
.transit { padding: clamp(40px, 6vw, 80px) 0 } .transit__grid { display: grid; gap: 14px } @media (min-width: 700px) { .transit__grid { grid-template-columns: repeat(2, 1fr) } } @media (min-width: 1100px) { .transit__grid { grid-template-columns: repeat(4, 1fr) } }
.transit__it { background: var(--dark); color: #fff; border-radius: var(--r); padding: 22px; display: grid; gap: 12px; position: relative; overflow: hidden } .transit__it::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(143,240,207,.18), transparent 50%) }
.transit__top { position: relative; display: grid; gap: 2px } .transit__top b { font-size: 18px } .transit__top span { font-size: 12px; color: rgba(255,255,255,.55); letter-spacing: .04em }
.transit__line { position: relative; display: flex; align-items: center; gap: 8px } .transit__line .ic { width: 16px; height: 16px; color: var(--mint) } .transit__track { flex: 1; height: 1px; background: rgba(255,255,255,.2); position: relative } .transit__track em { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--mint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; transform: rotate(90deg); filter: drop-shadow(0 0 5px rgba(143,240,207,.9)); animation: transit-fly 4s cubic-bezier(.4,0,.2,1) infinite; animation-delay: var(--d, 0ms) }
@keyframes transit-fly { 0% { left: 0; opacity: 0 } 10% { opacity: 1 } 90% { opacity: 1 } 100% { left: 100%; opacity: 0 } }
.transit__days { position: relative; font-size: 15px; color: rgba(255,255,255,.7) } .transit__days b { font-size: 40px; font-weight: 500; color: #fff; letter-spacing: -.02em; margin-right: 6px } .transit__it p { position: relative; font-size: 13.5px; color: rgba(255,255,255,.6) }
@media (prefers-reduced-motion: reduce) { .transit__track em { animation: none; left: 50% } }

/* ---- «О компании»: первый экран по макету */
.ah { padding: 14px 0 clamp(30px, 5vw, 50px); position: relative; overflow: hidden }
.ah::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: radial-gradient(rgba(11,31,26,.10) 1px, transparent 1.4px) 0 0/16px 16px; -webkit-mask: radial-gradient(ellipse 60% 50% at 45% 25%, #000, transparent 70%); mask: radial-gradient(ellipse 60% 50% at 45% 25%, #000, transparent 70%); opacity: .6; pointer-events: none }
.ah__hero { position: relative; display: grid; gap: 26px; align-items: center }
.ah__h { font: 500 clamp(40px, 4.5vw, 66px)/1.02 var(--sans); letter-spacing: -.035em; margin: 6px 0 22px; color: var(--ink) } .ah__h-acc { color: #0F4C3A }
.ah__lead { font-size: clamp(16px, 1.3vw, 19px); color: var(--ink-2); max-width: 50ch; margin-bottom: 26px; line-height: 1.55 }
.ah__wa { gap: 10px } .ah__wa .ic-wa { width: 20px; height: 20px; color: var(--green) }
.ah__feats { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 28px } .ah__feats div { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.3; color: var(--ink-2) } .ah__feats .ic { width: 30px; height: 30px; color: var(--ink) }
.ah__media { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4/3; min-height: 380px; box-shadow: 0 40px 80px -40px rgba(11,31,26,.45) }
.ah__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 45% }
.ah__media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(245,248,249,.85) 0%, rgba(245,248,249,.35) 22%, rgba(245,248,249,0) 45%); z-index: 1 }
.ah__dots { position: absolute; inset: 0; z-index: 1; background: radial-gradient(rgba(11,31,26,.22) 1px, transparent 1.4px) 0 0/12px 12px; -webkit-mask: radial-gradient(ellipse 45% 55% at 25% 30%, #000, transparent 70%); mask: radial-gradient(ellipse 45% 55% at 25% 30%, #000, transparent 70%); opacity: .7; pointer-events: none }
.ah__pin { position: absolute; left: 6%; top: 11%; z-index: 2; font-size: 10px; letter-spacing: .12em; color: var(--ink-2); display: flex; align-items: center; gap: 8px } .ah__pin i { width: 8px; height: 8px; border-radius: 50%; background: #0F4C3A; box-shadow: 0 0 0 4px rgba(15,76,58,.2) }
.ah__arc { position: absolute; left: 6%; top: 8%; width: 60%; z-index: 2; pointer-events: none } .ah__arc path { fill: none; stroke: rgba(15,76,58,.5); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ah__media.in .ah__arc path { animation: ah-draw 1.8s .4s var(--ease) forwards } @keyframes ah-draw { to { stroke-dashoffset: 0 } }
.ah__hand { position: absolute; left: 44%; top: 10%; z-index: 2; font: 600 clamp(14px, 1.4vw, 21px)/1.15 "Caveat", "Comic Sans MS", cursive; color: var(--ink); transform: rotate(-9deg); max-width: 14ch; text-shadow: 0 1px 6px rgba(255,255,255,.7) } .ah__hand svg { display: block; width: 70px; margin: 2px 0 0 60px } .ah__hand svg path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.ah__glp { position: absolute; right: 5%; top: 12%; z-index: 2; font-size: 10px; letter-spacing: .2em; line-height: 1.5; color: var(--mute); text-align: left }
.ah__cards { position: absolute; left: 3%; top: 24%; z-index: 3; display: grid; gap: 12px; width: min(250px, 40%) }
.ah__card { display: grid; grid-template-columns: 24px 1fr 18px; align-items: center; gap: 12px; padding: 16px 16px; border-radius: 16px; background: rgba(255,255,255,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 18px 40px -24px rgba(11,31,26,.4); font-size: 14px; line-height: 1.25; color: var(--ink-2); opacity: 0; transform: translateX(-16px); transition: opacity .6s var(--ease), transform .7s var(--ease), background .3s; transition-delay: var(--d, 0ms) } .ah__media.in .ah__card { opacity: 1; transform: none }
.ah__card:hover { background: rgba(255,255,255,.95) } .ah__card > .ic:first-child { width: 22px; height: 22px; color: var(--ink) } .ah__card b { font-weight: 600; color: var(--ink) } .ah__card .btn__arr { color: var(--ink) }
.ah__video { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 22px; background: rgba(11,31,26,.86); backdrop-filter: blur(12px); color: #fff; font-size: 14px; line-height: 1.25; overflow: hidden } .ah__video-t { white-space: nowrap } .ah__video .play__btn { width: 46px; height: 46px; border-color: transparent; background: #fff; color: var(--dark) } .ah__video img { width: 120px; height: 66px; object-fit: cover; border-radius: 14px; margin-left: 4px } .ah__video small { position: absolute; right: 18px; bottom: 14px; font-size: 12px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6) }
.ah__stats { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; margin-top: 26px; padding: 26px 28px; background: #fff; border-radius: 26px; box-shadow: 0 30px 60px -40px rgba(11,31,26,.35); border: 1px solid var(--line) }
.ah__stats .stat b { font-size: clamp(30px, 3vw, 40px) } .ah__stats .stat span { font-size: 13px; max-width: 16ch }
.ah__q { grid-column: 1 / -1; margin: 0; position: relative; padding: 10px 0 0 34px; font-size: 16px; color: var(--ink-2); line-height: 1.5 } .ah__q i { position: absolute; left: 0; top: 0; font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--line-2, #B9C6C1) } .ah__q .ah__q2 { left: auto; right: 0; top: auto; bottom: -14px }
.ah__partners { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; margin-top: 26px; padding: 10px 0 } .ah__partners span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 18px; color: var(--mute-2); filter: grayscale(1); opacity: .8; white-space: nowrap } .ah__partners span .ic { width: 18px; height: 18px } .ah__partners span img { max-height: 34px } .ah__partners .link { margin-left: auto }
@media (min-width: 1100px) {
  .ah__hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0; align-items: stretch }
  .ah__txt { position: relative; z-index: 2; padding: 40px 0 30px 0 }
  .ah__media { aspect-ratio: auto; min-height: 620px; border-radius: 28px; margin-left: -40px }
  .ah__media::before { background: linear-gradient(90deg, rgba(245,248,249,.9) 0%, rgba(245,248,249,.55) 16%, rgba(245,248,249,.15) 34%, rgba(245,248,249,0) 50%) }
  .ah__cards { left: 4%; top: 22%; width: 250px }
  .ah__stats { grid-template-columns: repeat(4, auto) 1fr; gap: 0; padding: 26px 36px; margin-top: -30px; z-index: 4 }
  .ah__stats .stat { padding: 0 34px; border-right: 1px solid var(--line) } .ah__stats .stat:first-child { padding-left: 0 } .ah__q { grid-column: auto; padding: 0 40px 0 60px } .ah__q i { left: 20px } .ah__q .ah__q2 { right: 10px }
}
@media (max-width: 1099px) { .ah__media { margin: 0 } .ah__cards { top: 18% } .ah__hand { left: 46%; top: 8% } .ah__video img { display: none } .ah__glp { display: none } }
@media (max-width: 599px) { .ah__cards { width: 62%; left: 4%; top: auto; bottom: 90px; gap: 8px } .ah__card { padding: 12px 12px; font-size: 13px } .ah__video { right: 10px; bottom: 10px; padding: 8px 8px 8px 14px; font-size: 12px } .ah__media { aspect-ratio: 4/5 } .ah__feats { gap: 12px 18px } .ah__hand { display: none } }

/* ---- «Полный цикл под одним договором» (о компании) */
.cyc { padding: clamp(40px, 6vw, 80px) 0; position: relative }
.cyc__head { display: grid; gap: 22px; align-items: start; margin-bottom: 26px }
.cyc__h { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -.02em; margin: 8px 0 18px } .cyc__acc { color: #0F4C3A }
.cyc__lead { color: var(--ink-2); font-size: 16.5px; max-width: 48ch; line-height: 1.55 }
.cyc__one { display: grid; grid-template-columns: 30px 1fr; gap: 10px 16px; align-items: center; padding: 22px 26px; border-radius: 22px; background: rgba(255,255,255,.7); border: 1px solid var(--line); backdrop-filter: blur(10px) } .cyc__one .ic { width: 28px; height: 28px; color: #0F4C3A } .cyc__one b { font-size: 17px; font-weight: 600 } .cyc__one p { grid-column: 1 / -1; color: var(--mute); font-size: 14.5px }
.cyc__dash { display: none; width: 30px; height: 1px; background: #0F4C3A; opacity: .6 }
.cyc__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: s }
.cyc__step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 20px 22px; display: grid; gap: 8px; align-content: start; transition: transform .4s var(--ease), box-shadow .4s } .cyc__step:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -34px rgba(11,31,26,.4) }
.cyc__ico { width: 52px; height: 52px; border-radius: 14px; background: #E7F5EE; display: grid; place-items: center } .cyc__ico .ic { width: 24px; height: 24px; color: #0F4C3A } .cyc__ico--sm { width: 48px; height: 48px }
.cyc__step em { position: absolute; right: 18px; top: 18px; font-style: normal; font-size: 13px; color: var(--mute-2) } .cyc__step b { font-size: 18px; font-weight: 600; line-height: 1.2; margin-top: 6px } .cyc__step p { color: var(--mute); font-size: 14px; line-height: 1.5 }
.cyc__bottom { display: grid; gap: 16px; margin-top: 14px }
.cyc__photo { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 16/9; min-height: 260px } .cyc__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 42% }
.cyc__photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(245,248,249,.75) 0%, rgba(245,248,249,.15) 30%, rgba(245,248,249,0) 55%); z-index: 1; pointer-events: none }
.cyc__dots { position: absolute; inset: 0; z-index: 1; background: radial-gradient(rgba(11,31,26,.35) 1px, transparent 1.4px) 0 0/11px 11px; -webkit-mask: radial-gradient(ellipse 50% 60% at 60% 25%, #000, transparent 70%); mask: radial-gradient(ellipse 50% 60% at 60% 25%, #000, transparent 70%); opacity: .5; pointer-events: none }
.cyc__arc { position: absolute; left: 18%; top: 4%; width: 62%; z-index: 2; overflow: visible; pointer-events: none } .cyc__arc-p, .cyc__arc-p2 { fill: none; stroke: #0F4C3A; stroke-width: 1.3; opacity: .7 } .cyc__arc-p2 { stroke-dasharray: 3 5; opacity: .45 } .cyc__arc-dot { fill: #0F4C3A; stroke: #fff; stroke-width: 2 } .cyc__arc-plane { fill: #0F4C3A }
.cyc__lbl { position: absolute; left: 68%; top: 26%; z-index: 2; font-size: 12px; font-weight: 600; color: #0F4C3A; line-height: 1.3; text-shadow: 0 1px 6px rgba(255,255,255,.8) }
.cyc__hand { position: absolute; left: 4%; bottom: 6%; z-index: 2; font: 600 clamp(16px, 1.6vw, 24px)/1.15 "Caveat", cursive; color: #fff; transform: rotate(-8deg); text-shadow: 0 2px 10px rgba(0,0,0,.5) } .cyc__hand svg { display: block; width: 150px; margin-top: 2px } .cyc__hand svg path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round }
.cyc__side { display: grid; gap: 14px; align-content: space-between }
.cyc__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 10px; padding: 22px; background: rgba(255,255,255,.85); border: 1px solid var(--line); border-radius: 22px; backdrop-filter: blur(10px) }
.cyc__stat { display: flex; gap: 12px; align-items: flex-start } .cyc__stat b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1 } .cyc__stat span { font-size: 13px; color: var(--mute); line-height: 1.3 } .cyc__stat > div > span { display: block; margin-top: 4px }
.cyc__cta { display: flex; align-items: center; gap: 18px; padding: 14px 14px 14px 26px; border-radius: 999px; background: var(--dark); color: #fff; transition: transform .3s var(--ease), box-shadow .3s } .cyc__cta:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -20px rgba(11,31,26,.6) }
.cyc__cta b { font-size: 16px; font-weight: 600; white-space: nowrap } .cyc__cta-t { font-size: 12.5px; color: rgba(255,255,255,.7); line-height: 1.3; max-width: 22ch } .cyc__cta-arr { margin-left: auto; width: 52px; height: 52px; border-radius: 50%; background: var(--mint); color: var(--dark); display: grid; place-items: center; flex: none } .cyc__dash--light { background: rgba(255,255,255,.4) }
@media (min-width: 900px) { .cyc__head { grid-template-columns: 1fr minmax(320px, 46%) } .cyc__one { grid-template-columns: 30px auto 30px 1fr; padding: 24px 28px } .cyc__one p { grid-column: auto } .cyc__dash { display: block } .cyc__steps { grid-template-columns: repeat(5, 1fr); gap: 30px } .cyc__step::after { content: ""; position: absolute; right: -24px; top: 50%; width: 18px; height: 10px; background: currentColor; color: #0F4C3A; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat } .cyc__step:last-child::after { display: none } .cyc__bottom { grid-template-columns: 1.6fr 1fr; gap: 24px; margin-top: 26px } .cyc__photo { aspect-ratio: auto; min-height: 400px } .cyc__stats { padding: 28px; gap: 24px 16px } .cyc__stat b { font-size: 32px } }
@media (min-width: 900px) and (max-width: 1199px) { .cyc__steps { grid-template-columns: repeat(3, 1fr) } .cyc__step::after { display: none } }

/* ---- «Три вещи, за которые нам доверяют» + «Сколько идёт груз» (о компании, по макету) */
.why3 { position: relative; padding: clamp(40px, 6vw, 80px) 0; overflow: hidden }
.why3__bg { position: absolute; right: -6%; top: -4%; width: 48%; max-width: 760px; height: 62%; object-fit: cover; object-position: 80% 40%; border-radius: 0 0 0 60px; -webkit-mask: linear-gradient(90deg, transparent 0, rgba(0,0,0,.5) 25%, #000 60%), linear-gradient(180deg, #000 55%, transparent 100%); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent 0, rgba(0,0,0,.5) 25%, #000 60%), linear-gradient(180deg, #000 55%, transparent 100%); mask-composite: intersect; opacity: .9; pointer-events: none }
.why3__head { position: relative; display: grid; gap: 18px; align-items: start; margin-bottom: 26px }
.why3__h { font: 500 clamp(34px, 4.4vw, 62px)/1.05 var(--sans); letter-spacing: -.03em; margin: 8px 0 16px; color: var(--ink) } .why3__h span { color: #0F4C3A }
.why3__lead { color: var(--ink-2); font-size: 16.5px; max-width: 50ch; line-height: 1.55 }
.why3__note { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; color: var(--mute); max-width: 30ch; padding-top: 14px } .why3__note .cyc__dash { display: block; flex: none; margin-top: 10px } .why3__note--ic .cyc__dash { display: none } .why3__note--ic { max-width: 36ch }
.why3__grid { position: relative; display: grid; gap: 16px }
.why3__card { position: relative; display: flex; flex-direction: column; min-height: 420px; padding: 24px; border-radius: 22px; overflow: hidden; color: #fff; background: var(--dark); box-shadow: 0 30px 60px -36px rgba(11,31,26,.6); transition: transform .45s var(--ease) } .why3__card:hover { transform: translateY(-6px) }
.why3__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease) } .why3__card:hover img { transform: scale(1.05) }
.why3__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,31,26,.2) 0%, rgba(11,31,26,.55) 45%, rgba(11,31,26,.94) 100%); pointer-events: none }
.why3__card em { position: relative; z-index: 1; font-style: normal; font-size: 12px; letter-spacing: .12em; color: rgba(255,255,255,.75) } .why3__ico { position: relative; z-index: 1; margin-top: 14px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px) } .why3__ico .ic { color: #fff }
.why3__t { position: relative; z-index: 1; display: block; font-size: 22px; font-weight: 600; line-height: 1.2; margin-top: auto; padding-top: 90px } .why3__card p { position: relative; z-index: 1; margin: 12px 0 22px; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.8) }
.why3__more { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; font-weight: 600 } .why3__more .circ { width: 38px; height: 38px; border-color: rgba(255,255,255,.4) } .why3__card:hover .circ { background: #fff; color: var(--dark); border-color: #fff }
.why3__track { position: absolute; right: 18px; top: 22px; z-index: 1; width: 150px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(10px); font-size: 12px } .why3__track b { display: block; font-size: 12px } .why3__track small { display: block; font-size: 11px; color: rgba(255,255,255,.7); margin-bottom: 10px } .why3__track ul { list-style: none; margin: 0; padding: 0 0 0 16px; position: relative; display: grid; gap: 9px; font-size: 11.5px } .why3__track ul::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: rgba(255,255,255,.4) } .why3__track li { position: relative } .why3__track li::before { content: ""; position: absolute; left: -16px; top: 4px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--mint); background: transparent } .why3__track li.on::before { background: var(--mint) }
@media (min-width: 900px) { .why3__head { grid-template-columns: 1fr auto; gap: 40px } .why3__grid { grid-template-columns: repeat(3, 1fr); gap: 20px } .why3__card { min-height: 460px; padding: 26px } }
.tr2 { position: relative; padding: clamp(40px, 6vw, 80px) 0; overflow: hidden }
.tr2__bg { position: absolute; right: 0; top: 0; width: 60%; height: 54%; pointer-events: none; -webkit-mask: linear-gradient(90deg, transparent, #000 35%), linear-gradient(180deg, #000 60%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 35%), linear-gradient(180deg, #000 60%, transparent); mask-composite: intersect } .tr2__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 35% }
.tr2__grid { position: relative; display: grid; gap: 14px; margin-top: 10px }
.tr2__card { position: relative; min-height: 300px; border-radius: 22px; overflow: hidden; background: var(--dark); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .45s var(--ease) } .tr2__card:hover { transform: translateY(-6px) }
.tr2__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30% } .tr2__card .why3__shade { background: linear-gradient(180deg, rgba(11,31,26,0) 0%, rgba(11,31,26,.2) 40%, rgba(11,31,26,.95) 100%) }
.tr2__body { position: relative; z-index: 1; padding: 20px; display: grid; gap: 4px } .tr2__body > b { font-size: 17px; font-weight: 600 } .tr2__body small { font-size: 12px; color: rgba(255,255,255,.65) }
.tr2__line { position: relative; height: 14px; margin: 8px 0 } .tr2__line i { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,.3) } .tr2__line em { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--mint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; transform: rotate(90deg); animation: transit-fly 4s cubic-bezier(.4,0,.2,1) infinite; animation-delay: var(--d, 0ms); filter: drop-shadow(0 0 5px rgba(143,240,207,.9)) }
.tr2__days { font-size: 14px; color: rgba(255,255,255,.75) } .tr2__days b { font-size: 30px; font-weight: 600; letter-spacing: -.02em; margin-right: 4px; color: #fff } .tr2__body p { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.45 }
.tr2__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; margin-top: 18px; padding: 22px; background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 60px -40px rgba(11,31,26,.35) }
.tr2__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 26px }
.tr2__hand { font: 600 clamp(20px, 2vw, 28px)/1.1 "Caveat", cursive; color: var(--ink); transform: rotate(-8deg); display: inline-block } .tr2__hand svg { display: block; width: 170px } .tr2__hand svg path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round }
.tr2__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap } .tr2__cta > span { font-size: 13.5px; color: var(--mute); max-width: 22ch; line-height: 1.35 } .tr2__cta .btn--dark { background: #0F4C3A } .tr2__cta .btn--dark .btn__arr { width: 34px; height: 34px; border-radius: 50%; background: var(--mint); color: var(--dark) } .tr2__cta .btn--dark .btn__arr::before { left: 9px; width: 14px } .tr2__cta .btn--dark .btn__arr::after { right: 10px }
@media (min-width: 900px) { .tr2__grid { grid-template-columns: repeat(4, 1fr); gap: 18px } .tr2__card { min-height: 330px } .tr2__stats { grid-template-columns: repeat(4, 1fr); gap: 0; padding: 26px 30px } .tr2__stats .cyc__stat { padding: 0 24px; border-right: 1px solid var(--line) } .tr2__stats .cyc__stat:first-child { padding-left: 0 } .tr2__stats .cyc__stat:last-child { border: 0 } }
@media (max-width: 899px) { .why3__bg { display: none } .tr2__bg { position: relative; width: 100%; height: 180px; margin-bottom: -40px; -webkit-mask: linear-gradient(180deg, #000 60%, transparent); mask: linear-gradient(180deg, #000 60%, transparent) } .tr2__bg img { object-position: center } }

/* ---- глобус в блоке «сеть» — без карточки, растворяется в фон */
.net__map { background: transparent; border-radius: 0; overflow: visible; aspect-ratio: 16/11 }
.net__map img { -webkit-mask: radial-gradient(ellipse 62% 66% at 52% 50%, #000 52%, transparent 100%); mask: radial-gradient(ellipse 62% 66% at 52% 50%, #000 52%, transparent 100%); opacity: 1; transform-origin: 50% 50% }
.net__map::after { display: none }
.net__svg { overflow: visible }
@media (min-width: 900px) { .net__map { transform: scale(1.12); margin-right: -4% } .net__map.tilt { transform: scale(1.12) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) } }
.s2 .net__map { transform: none; margin: 0 } .s2 .net__map img { -webkit-mask: radial-gradient(ellipse 70% 62% at 50% 50%, #000 55%, transparent 100%); mask: radial-gradient(ellipse 70% 62% at 50% 50%, #000 55%, transparent 100%) }

/* ---- «Ваш груз — в любой точке мира» (карточка с глобусом, по макету) */
.netb { padding: clamp(30px, 5vw, 60px) 0 }
.netb__card { position: relative; background: #061512; color: #fff; border-radius: 30px; overflow: hidden; padding: clamp(28px, 4vw, 56px); min-height: 560px; display: grid; gap: 22px; box-shadow: 0 50px 100px -50px rgba(6,21,18,.8) }
.netb__card > * { min-width: 0 }
.netb__card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.3px) 0 0/24px 24px; opacity: .5; pointer-events: none }
.netb__globe { position: absolute; right: -7%; top: -12%; width: 62%; height: 124%; pointer-events: none; overflow: hidden }
.netb__globe img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; -webkit-mask: radial-gradient(ellipse 58% 62% at 50% 50%, #000 58%, transparent 100%); mask: radial-gradient(ellipse 58% 62% at 50% 50%, #000 58%, transparent 100%); opacity: 1 }
.netb__globe .net__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.netb__globe .arc { stroke: #fff; stroke-width: 1.2; stroke-dasharray: none; opacity: .55 } .netb__globe .lbl { font-size: 14px; font-weight: 600 } .netb__globe .hub-lbl { font-size: 18px; fill: #fff } .netb__globe .hub { fill: var(--mint); stroke: rgba(143,240,207,.4); stroke-width: 8 } .netb__globe .dot { fill: #fff } .netb__globe .comet { stroke: var(--mint) }
.netb__tag { position: absolute; right: clamp(28px, 4vw, 56px); top: clamp(28px, 4vw, 56px); font-size: 11px; letter-spacing: .2em; line-height: 1.6; color: rgba(255,255,255,.55); z-index: 2 } .netb__tag i { display: block; width: 50px; height: 1px; background: rgba(255,255,255,.4); margin-top: 8px }
.netb__txt { position: relative; z-index: 2; max-width: 560px }
.netb__h { font: 500 clamp(34px, 4.4vw, 62px)/1.05 var(--sans); letter-spacing: -.03em; margin: 8px 0 20px } .netb__acc { color: var(--mint) }
.netb__lead { color: rgba(255,255,255,.75); font-size: 16.5px; line-height: 1.55; max-width: 48ch; margin-bottom: 26px }
.netb__btn { border-color: var(--mint); color: #fff; padding: 16px 26px; background: rgba(143,240,207,.06) } .netb__btn .btn__arr { color: var(--mint) } .netb__btn:hover { background: rgba(143,240,207,.14) }
.netb__stats { display: flex; gap: 40px; margin-top: 40px } .netb__stats .stat { padding-right: 40px; border-right: 1px solid rgba(255,255,255,.15) } .netb__stats .stat:last-child { border: 0 } .netb__stats .stat b { font-size: 44px } .netb__stats .stat span { font-size: 15px; color: rgba(255,255,255,.7) }
.netb__note { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); width: fit-content; justify-self: end; margin-top: auto } .netb__note-ic { width: 64px; height: 64px; border-radius: 50%; background: rgba(143,240,207,.12); border: 1px solid rgba(143,240,207,.3); display: grid; place-items: center; flex: none } .netb__note-ic .ic { width: 28px; height: 28px; color: var(--mint) } .netb__note p { font-size: 15px; line-height: 1.4 } .netb__note p i { display: block; width: 50px; height: 1px; background: var(--mint); margin-top: 8px }
.netb__feats { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; padding: 20px 22px; border-radius: 22px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px) }
.netb__feats > div { display: flex; align-items: center; gap: 14px; font-size: 14px; line-height: 1.3 } .netb__fic { width: 56px; height: 56px; border-radius: 50%; background: rgba(143,240,207,.1); border: 1px solid rgba(143,240,207,.25); display: grid; place-items: center; flex: none } .netb__fic .ic { width: 24px; height: 24px; color: var(--mint) }
@media (min-width: 1000px) { .netb__card { grid-template-columns: 1fr 1fr; grid-template-areas: "txt note" "feats feats"; align-items: end; min-height: 720px } .netb__txt { grid-area: txt } .netb__note { grid-area: note; margin-bottom: 20px } .netb__feats { grid-area: feats; grid-template-columns: repeat(4, 1fr); gap: 0 } .netb__feats > div { padding: 0 22px; border-right: 1px solid rgba(255,255,255,.12) } .netb__feats > div:first-child { padding-left: 4px } .netb__feats > div:last-child { border: 0 } }
@media (max-width: 999px) { .netb__globe { position: relative; right: auto; top: auto; width: 100%; height: 300px; margin: -10px 0 0 } .netb__globe img { -webkit-mask: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 100%); mask: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 100%) } .netb__tag { display: none } .netb__note { justify-self: start } .netb__stats { gap: 26px } .netb__stats .stat b { font-size: 34px } }

/* ---- «Летаем с лучшими авиакомпаниями мира» (по макету) */
.pb { position: relative; padding: clamp(40px, 6vw, 80px) 0; overflow: hidden }
.pb__photo { position: absolute; right: 0; top: 0; width: 58%; height: 100%; pointer-events: none } .pb__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; -webkit-mask: linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 25%, #000 50%), linear-gradient(180deg, #000 70%, transparent 100%); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 25%, #000 50%), linear-gradient(180deg, #000 70%, transparent 100%); mask-composite: intersect }
.pb__tag { position: absolute; right: var(--pad); top: clamp(40px, 6vw, 80px); font-size: 11px; letter-spacing: .2em; line-height: 1.6; color: var(--mute); z-index: 2 }
.pb .wrap { position: relative; z-index: 1 } .pb__txt { max-width: 560px }
.pb__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 26px; max-width: 560px }
.pb__it { display: grid; place-items: center; height: 84px; padding: 14px 18px; border-radius: 16px; background: rgba(255,255,255,.86); border: 1px solid var(--line); backdrop-filter: blur(8px); transition: transform .35s var(--ease), box-shadow .35s; opacity: 0; transform: translateY(10px); animation: aib-in .6s var(--ease) forwards; animation-delay: var(--d, 0ms) } .pb__it:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -30px rgba(11,31,26,.4) }
.pb__it img { max-height: 40px; max-width: 100%; width: auto; object-fit: contain } .pb__name { display: inline-flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 17px; color: var(--ink-2); text-align: center } .pb__name .ic { width: 18px; height: 18px; color: var(--green) }
.pb__all { margin-top: 20px; font-size: 14px }
@media (min-width: 900px) { .pb__grid { grid-template-columns: repeat(4, 1fr); max-width: 620px } .pb__it { height: 88px } }
@media (max-width: 899px) { .pb__photo { position: relative; width: 100%; height: 240px; margin: 0 0 -60px } .pb__photo img { -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent); object-position: 60% 50% } .pb__tag { display: none } }
/* ---- «От заявки до получения — четыре шага» (тёмная карточка с глобусом) */
.sb { padding: 0 0 clamp(40px, 6vw, 80px) }
.sb__card { position: relative; background: #06201a; color: #fff; border-radius: 30px; overflow: hidden; padding: clamp(28px, 4vw, 56px); box-shadow: 0 50px 100px -50px rgba(6,32,26,.8) }
.sb__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; opacity: .55; pointer-events: none } .sb__card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,32,26,.92) 0%, rgba(6,32,26,.75) 40%, rgba(6,32,26,.35) 100%); pointer-events: none }
.sb__tag { position: absolute; right: clamp(28px, 4vw, 56px); top: 50%; transform: translateY(-60%); font-size: 11px; letter-spacing: .22em; line-height: 1.7; text-transform: uppercase; color: rgba(255,255,255,.55); z-index: 2 }
.sb__head { position: relative; z-index: 1; max-width: 760px } .sb__h { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.8vw, 54px); line-height: 1.05; letter-spacing: -.01em; margin: 8px 0 14px } .sb__head p { color: rgba(255,255,255,.75); font-size: 15.5px; max-width: 48ch }
.sb__steps { position: relative; z-index: 1; list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 22px }
.sb__steps li { position: relative; display: grid; grid-template-columns: 34px 60px 1fr; gap: 10px 14px; align-items: start } .sb__steps em { font-style: normal; font-family: var(--serif); font-size: 18px; color: rgba(255,255,255,.6); padding-top: 18px } .sb__steps b { font-size: 17px; font-weight: 600; padding-top: 18px } .sb__steps p { grid-column: 3; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.5 }
.sb__dot { width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(143,240,207,.5); background: rgba(143,240,207,.08); display: grid; place-items: center; position: relative; z-index: 1; transition: background .5s, box-shadow .5s; transition-delay: calc(var(--d, 0ms) + .5s) } .sb__dot .ic { width: 24px; height: 24px; color: var(--mint) } .sb__steps li.in .sb__dot { background: rgba(143,240,207,.18); box-shadow: 0 0 0 8px rgba(143,240,207,.08) }
.sb__line { position: absolute; left: 63px; top: 60px; bottom: 60px; width: 1px; background: rgba(255,255,255,.12) } .sb__line i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--mint); transition: height 2.2s cubic-bezier(.4,0,.2,1) .4s } .sb__steps.in .sb__line i { height: 100% }
.sb__act { position: relative; z-index: 1; margin-top: 30px }
@media (min-width: 900px) { .sb__steps { grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 40px } .sb__steps li { grid-template-columns: 1fr; gap: 12px } .sb__steps em { padding: 0 } .sb__steps b { padding-top: 6px } .sb__steps p { grid-column: auto } .sb__line { left: 30px; right: 30px; top: 68px; bottom: auto; width: auto; height: 1px } .sb__line i { height: 100%; width: 0; transition: width 2.2s cubic-bezier(.4,0,.2,1) .4s } .sb__steps.in .sb__line i { width: 100% } .sb__act { margin-top: 44px } .sb__head { padding-right: 160px } }
@media (max-width: 899px) { .sb__tag { display: none } }

/* ---- CTA «Готовы обсудить вашу задачу?» с формой (по макету) */
.cta2 { position: relative; padding: clamp(40px, 6vw, 80px) 0 0; overflow: hidden; background: linear-gradient(180deg, #F5F8F9 0%, #EAF1F3 100%) }
.cta2__bg { position: absolute; left: 0; bottom: 0; width: 100%; height: 78%; object-fit: cover; object-position: 30% 65%; -webkit-mask: linear-gradient(180deg, transparent 0, rgba(0,0,0,.5) 22%, #000 55%); mask: linear-gradient(180deg, transparent 0, rgba(0,0,0,.5) 22%, #000 55%); pointer-events: none }
.cta2__hand { position: absolute; left: var(--pad); bottom: 28px; z-index: 2; font: 600 clamp(18px, 1.8vw, 26px)/1.1 "Caveat", cursive; color: #fff; transform: rotate(-7deg); text-shadow: 0 2px 10px rgba(0,0,0,.5) } .cta2__hand svg { display: block; width: 160px } .cta2__hand svg path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round }
.cta2__in { position: relative; z-index: 1; display: grid; gap: 26px; align-items: start; padding-bottom: clamp(40px, 6vw, 80px) }
.cta2__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap }
.cta2__tag { display: flex; align-items: flex-start; gap: 12px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #0F4C3A; line-height: 1.6; max-width: 14ch } .cta2__tag i { width: 40px; height: 1px; background: #0F4C3A; margin-top: 8px; flex: none }
.cta2__h { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.6vw, 66px); line-height: 1.02; letter-spacing: -.015em; margin: 10px 0 18px } .cta2__acc { color: #0F4C3A }
.cta2__lead { color: var(--ink-2); font-size: 17px; line-height: 1.55; max-width: 40ch }
.cta2__feats { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 26px } .cta2__feats > div { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.3; color: var(--ink-2) } .cta2__fic { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(15,76,58,.35); background: rgba(255,255,255,.7); display: grid; place-items: center; flex: none } .cta2__fic .ic { width: 20px; height: 20px; color: #0F4C3A }
.cta2__form { position: relative; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); border-radius: 26px; padding: clamp(22px, 3vw, 34px); display: grid; gap: 12px; box-shadow: 0 40px 80px -40px rgba(11,31,26,.45); border: 1px solid rgba(255,255,255,.9) }
.cta2__form h3 { font-family: var(--serif); font-weight: 400; font-size: 28px } .cta2__sub { color: var(--mute); font-size: 14px; margin-bottom: 4px; max-width: 44ch }
.cta2__row { display: grid; gap: 12px } @media (min-width: 560px) { .cta2__row { grid-template-columns: 1fr 1fr } }
.cta2__f { display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .2s } .cta2__f:focus-within { border-color: #0F4C3A } .cta2__f .ic { width: 18px; height: 18px; color: #0F4C3A; flex: none }
.cta2__f input, .cta2__f textarea { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; color: var(--ink); padding: 15px 0 } .cta2__f textarea { resize: none; padding-top: 14px } .cta2__f--area { align-items: flex-start } .cta2__f--area .ic { margin-top: 16px }
.cta2__btn { display: flex; align-items: center; gap: 16px; padding: 10px 10px 10px 24px; border: 0; border-radius: 999px; background: #0F4C3A; color: #fff; font: inherit; cursor: pointer; margin-top: 4px; transition: transform .3s var(--ease), box-shadow .3s } .cta2__btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -20px rgba(15,76,58,.6) } .cta2__btn b { font-size: 16px; white-space: nowrap } .cta2__btn-t { font-size: 12px; color: rgba(255,255,255,.7); text-align: left; line-height: 1.3; max-width: 16ch } .cta2__btn .cyc__cta-arr { margin-left: auto; width: 48px; height: 48px }
.cta2__badges { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 6px } .cta2__badges span { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mute) } .cta2__badges .ic { width: 22px; height: 22px; color: var(--ink); padding: 4px; border: 1px solid var(--line); border-radius: 50%; box-sizing: content-box }
@media (min-width: 1000px) { .cta2__in { grid-template-columns: 1fr minmax(380px, 46%); gap: 50px } .cta2__txt { padding-top: 10px } .cta2__bg { top: 34%; height: 66%; width: 64%; object-position: 40% 70%; -webkit-mask: linear-gradient(180deg, transparent 0, rgba(0,0,0,.5) 22%, #000 45%), linear-gradient(90deg, #000 72%, transparent 100%); -webkit-mask-composite: source-in; mask: linear-gradient(180deg, transparent 0, rgba(0,0,0,.5) 22%, #000 45%), linear-gradient(90deg, #000 72%, transparent 100%); mask-composite: intersect } .cta2__txt { min-height: 680px } }
@media (max-width: 999px) { .cta2__txt { padding-bottom: 240px } .cta2__hand { bottom: auto; top: calc(100% - 700px) } .cta2__form { z-index: 2 } }
@media (max-width: 599px) { .cta2__txt { padding-bottom: 200px } .cta2__hand { display: none } }

/* ---- подвал по макету: колонки + «Казахстан в центре больших возможностей» с самолётом над Землёй */
.ft2 { position: relative; background: #06201a; color: #fff; overflow: hidden }
.ft2__grid { display: grid; gap: 30px; padding: clamp(40px, 6vw, 70px) 0 30px; border-bottom: 1px solid rgba(255,255,255,.08) }
.ft2__brand p { color: rgba(255,255,255,.7); font-size: 14.5px; line-height: 1.55; max-width: 32ch; margin: 18px 0 20px }
.ft2__col { display: grid; gap: 10px; align-content: start; font-size: 14.5px; color: rgba(255,255,255,.8) } .ft2__col a { width: fit-content; position: relative } .ft2__col a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--mint); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease) } .ft2__col a:hover::after, .ft2__col a.is-on::after { transform: scaleX(1); transform-origin: left }
.ft2__contacts a, .ft2__contacts > span { display: flex; align-items: center; gap: 12px } .ft2__contacts .ic { width: 18px; height: 18px; color: #fff } .ft2__contacts a::after { display: none }
.ft2__langs { display: flex; align-items: center; gap: 18px; margin-top: 16px; font-size: 13px; letter-spacing: .08em; font-weight: 600 } .ft2__langs a { color: rgba(255,255,255,.5) } .ft2__langs a.is-on { color: #fff; text-decoration: underline; text-underline-offset: 5px } .ft2__langs a::after { display: none } .ft2__langs i { flex: 1; height: 1px; background: rgba(255,255,255,.25); max-width: 60px }
.ft2__hero { position: relative; min-height: 460px; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 0 30px }
.ft2__earth { position: absolute; right: -8%; top: -10%; width: 80%; height: 130%; object-fit: cover; object-position: 55% 45%; -webkit-mask: linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 30%, #000 55%), linear-gradient(180deg, transparent 0, #000 25%, #000 85%, transparent 100%); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 30%, #000 55%), linear-gradient(180deg, transparent 0, #000 25%, #000 85%, transparent 100%); mask-composite: intersect; pointer-events: none; opacity: .95 }
.ft2__big { position: relative; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.08; letter-spacing: -.01em; max-width: 9ch; margin: 30px 0 60px }
.ft2__bot { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 40px; font-size: 12.5px; color: rgba(255,255,255,.6); line-height: 1.5 }
.ft2__legal { display: flex; flex-wrap: wrap; gap: 8px 22px } .ft2__legal a:hover { color: #fff }
.ft2__tag { margin-left: auto; font-size: 11px; letter-spacing: .2em; line-height: 1.6; color: rgba(255,255,255,.6); text-align: left } .ft2__tag i { display: block; width: 60px; height: 1px; background: #C9A84C; margin-top: 8px }
.ft2 .totop { margin-left: 0 }
@media (min-width: 900px) { .ft2__grid { grid-template-columns: 1.3fr .8fr 1fr 1.1fr; gap: 40px } .ft2__hero { min-height: 560px } }
@media (max-width: 899px) { .ft2__earth { position: relative; width: 100%; height: 260px; right: 0; top: 0; margin: 0 0 -60px; -webkit-mask: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent) } .ft2__hero { padding-top: 10px; min-height: 0 } .ft2__big { margin: 0 0 30px; max-width: none } .ft2__tag { margin-left: 0 } }
.cyc__bottom > *, .cyc__side > * { min-width: 0 }
@media (max-width: 599px) { .cyc__cta { flex-wrap: wrap; padding: 14px 18px } .cyc__cta b { white-space: normal } .cyc__cta-t { max-width: none; flex: 1 1 100%; order: 3 } .cyc__cta-arr { margin-left: auto } }
@media (max-width: 899px) { .ah__partners { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 22px; padding-bottom: 6px; -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent) } .ah__partners::-webkit-scrollbar { display: none } .ah__partners .link { margin-left: 0; white-space: nowrap; flex: none } .ah__partners span img { max-height: 28px } }
@media (max-width: 599px) { .netb__feats { grid-template-columns: 1fr; gap: 12px } .cta2__bg { height: 60%; object-position: 35% 80%; -webkit-mask: linear-gradient(180deg, transparent 0, rgba(0,0,0,.7) 30%, #000 60%); mask: linear-gradient(180deg, transparent 0, rgba(0,0,0,.7) 30%, #000 60%) } }

/* ---- дошлифовка «О компании» по референсам */
.ah__partners span img { max-height: 30px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .85 } .ah__partners span:hover img { filter: none; opacity: 1 }
.pb__it img { max-height: 34px; max-width: 78% }
.cta2__top { flex-wrap: nowrap } .cta2__tag { flex: none }
@media (min-width: 1000px) { .cta2__txt { padding-right: 40px } .cta2__tag { max-width: 12ch } }
/* читаемость подписей поверх фото */
.why3__note, .why3__note--ic { position: relative; z-index: 2 }
.why3__note--ic p { background: rgba(245,248,249,.82); backdrop-filter: blur(8px); padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.8) }
.why3__note p { text-shadow: 0 1px 10px rgba(245,248,249,.9), 0 0 20px rgba(245,248,249,.7) }
/* карточки городов — темнее сверху, читаемые подписи */
.tr2__card .why3__shade { background: linear-gradient(180deg, rgba(11,31,26,.35) 0%, rgba(11,31,26,.5) 35%, rgba(11,31,26,.96) 100%) }
.tr2__card img { object-position: center 35%; filter: saturate(.95) }
/* шаги: выравнивание колонок по верху */
.sb__steps li { align-content: start }
@media (min-width: 900px) { .sb__steps li { grid-template-rows: auto 60px auto 1fr } }

.netb__h { max-width: 13ch } @media (min-width: 1000px) { .netb__txt { max-width: 600px } .netb__lead { max-width: 44ch } }
/* мобилка: логотипы партнёров и фон блока сроков */
.ah__partners span img { height: 28px; width: auto; max-height: none }
.pb__it img { height: 34px; width: auto; max-height: none; max-width: 80% }
@media (max-width: 899px) { .ah__partners span img { height: 24px } .pb__it img { height: 28px } .tr2__bg { margin-bottom: -20px; height: 200px } .tr2 .why3__head { padding-top: 10px } }
.ah__partners span { flex: none } .ah__partners span img { flex: none }

/* ================= АНИМАЦИИ СТРАНИЦЫ «О КОМПАНИИ» (10 блоков, утв. 08.09) ================= */
/* 1. первый экран: фото выезжает справа, карточки влетают, рукописная строка рисуется */
.ah__media { clip-path: inset(0 0 0 12% round 28px); opacity: 0; transition: clip-path 1.1s var(--ease), opacity .6s }
.ah__media.in { clip-path: inset(0 0 0 0 round 28px); opacity: 1 }
.ah__media .ah__img { transform: scale(1.12); transition: transform 1.8s var(--ease) } .ah__media.in .ah__img { transform: scale(1) }
.ah__hand em { display: block; clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease) .9s } .ah__media.in .ah__hand em { clip-path: inset(0 0 0 0) }
.ah__hand-p, .ah__hand-a { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1 }
.ah__media.in .ah__hand-p { animation: ah-draw 1s 1.5s var(--ease) forwards } .ah__media.in .ah__hand-a { animation: ah-draw .4s 2.4s var(--ease) forwards }
@keyframes ah-draw { to { stroke-dashoffset: 0 } }
.ah__pin i { animation: mark-pulse 2.6s ease-out infinite }
.ah__video { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease) 1.2s, transform .7s var(--ease) 1.2s } .ah__media.in .ah__video { opacity: 1; transform: none }
/* 2. полный цикл: маршрутная линия с самолётиком зажигает карточки */
.cyc__steps { position: relative }
.cyc__track { position: absolute; left: 26px; right: 26px; top: 52px; height: 1px; background: rgba(15,76,58,.18); z-index: 0; display: none }
.cyc__track i { position: absolute; inset: 0 auto 0 0; width: 0; background: #0F4C3A; transition: width 3.2s cubic-bezier(.4,0,.2,1) .2s }
.cyc__track em { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; background: #0F4C3A; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; transform: rotate(90deg); opacity: 0; transition: left 3.2s cubic-bezier(.4,0,.2,1) .2s, opacity .4s .2s; filter: drop-shadow(0 0 6px rgba(15,76,58,.5)) }
.cyc__steps.go .cyc__track i { width: 100% } .cyc__steps.go .cyc__track em { left: 100%; opacity: 1 }
.cyc__step { opacity: .55; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .4s }
.cyc__step.lit { opacity: 1; transform: none } .cyc__step.lit .cyc__ico { animation: cyc-pop .6s var(--ease) }
@keyframes cyc-pop { 0% { transform: scale(.7); background: #D8EFE3 } 60% { transform: scale(1.08) } 100% { transform: scale(1) } }
@media (min-width: 900px) { .cyc__track { display: block } }
/* 3. три вещи: живой трекинг статусов */
.why3__track li { transition: color .4s } .why3__track li::before { transition: background .4s, box-shadow .4s } .why3__track li.on::before { box-shadow: 0 0 0 4px rgba(143,240,207,.18) }
.why3__track li:not(.on) { color: rgba(255,255,255,.55) }
/* 4. города: цифры-табло */
.tr2__days b { display: inline-block; font-variant-numeric: tabular-nums }
.tr2__days.roll b { animation: tr-roll .5s steps(1) } @keyframes tr-roll { 0%,100% { filter: none } 50% { filter: blur(.6px) } }
/* 5. глобус: вращение + наклон за курсором */
.netb__globe img { animation: netb-spin 90s linear infinite alternate }
@keyframes netb-spin { from { transform: scale(1) rotate(0deg) } to { transform: scale(1.06) rotate(6deg) } }
.netb__card.tilt .netb__globe { transition: transform .35s ease-out } .netb__card.tilt .netb__globe { transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 8px), 0) }
.netb__card { perspective: 1200px }
/* 6. отзывы: карточки выезжают с поворотом, звёзды загораются */
.rev__card { opacity: 0; transform: translateY(28px) rotate(-1.5deg); transition: opacity .7s var(--ease), transform .8s cubic-bezier(.2,.9,.2,1); transition-delay: var(--d, 0ms) }
.rev__card.in, .reveal.in .rev__card, .rev__grid.in .rev__card { opacity: 1; transform: none }
.rev__badge .rev__stars i, .rev__stars--big i { font-style: normal; display: inline-block; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s cubic-bezier(.3,1.6,.4,1) } .rev__badge.in .rev__stars i, .rev__card--cta.in .rev__stars--big i { opacity: 1; transform: none }
/* 7. партнёры: две встречные ленты, замирают при наведении */
.pb__lanes { display: grid; gap: 12px; margin-top: 26px; max-width: 620px }
.pb__lane { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent) }
.pb__track { display: flex; gap: 12px; width: max-content; animation: pb-run 34s linear infinite }
.pb__lane--rev .pb__track { animation-name: pb-run-rev }
.pb__lanes:hover .pb__track { animation-play-state: paused }
@keyframes pb-run { to { transform: translateX(calc(-100% / 3)) } }
@keyframes pb-run-rev { from { transform: translateX(calc(-100% / 3)) } to { transform: translateX(0) } }
.pb__it { flex: none; width: 148px; animation: none; opacity: 1; transform: none }
.pb__lanes .pb__it { filter: grayscale(1); opacity: .85; transition: filter .3s, opacity .3s, transform .3s } .pb__lanes .pb__it:hover { filter: none; opacity: 1; transform: translateY(-3px) }
@media (max-width: 899px) { .pb__it { width: 132px; height: 74px } }
/* 8. четыре шага: самолётик зажигает круги */
.sb__steps .sb__dot { transition: background .5s, box-shadow .5s, transform .5s } .sb__steps li.lit .sb__dot { background: rgba(143,240,207,.22); box-shadow: 0 0 0 10px rgba(143,240,207,.08); transform: scale(1.06) }
.sb__steps li.lit em { color: var(--mint) }
.sb__plane { position: absolute; top: 68px; left: 30px; width: 20px; height: 20px; margin: -10px 0 0 -10px; background: var(--mint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; transform: rotate(90deg); opacity: 0; transition: left 3s cubic-bezier(.4,0,.2,1) .4s, opacity .4s .4s; filter: drop-shadow(0 0 6px rgba(143,240,207,.9)); z-index: 2 }
.sb__steps.in .sb__plane { left: calc(100% - 30px); opacity: 1 }
@media (max-width: 899px) { .sb__plane { display: none } }
/* 9. форма: фон приближается, поля подсвечиваются, кнопка дышит */
.cta2__f { transition: border-color .25s, box-shadow .35s, transform .35s }
.cta2__f.lit { border-color: rgba(15,76,58,.5); box-shadow: 0 0 0 4px rgba(15,76,58,.07) }
.cta2__f:focus-within { box-shadow: 0 0 0 4px rgba(15,76,58,.1) }
.cta2__btn { animation: cta-breath 3.4s ease-in-out infinite } .cta2__btn:hover { animation-play-state: paused }
@keyframes cta-breath { 0%, 100% { box-shadow: 0 0 0 0 rgba(15,76,58,0) } 50% { box-shadow: 0 14px 34px -16px rgba(15,76,58,.75) } }
@supports (animation-timeline: view()) { .cta2__bg { animation: cta-zoom linear both; animation-timeline: view(); animation-range: entry 0% exit 100% } @keyframes cta-zoom { from { transform: scale(1.12) } to { transform: scale(1) } } }
/* 10. футер: восход Земли, самолёт вправо, заголовок по строкам */
.ft2__earth { transform: translateY(12%) scale(1.06); transition: transform 1.6s var(--ease), opacity 1s } 
.ft2__hero.in .ft2__earth { transform: translateY(0) scale(1) }
.ft2__big span { display: inline-block; opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms) }
.ft2__hero.in .ft2__big span { opacity: 1; transform: none }
.ft2__tag { opacity: 0; transition: opacity .8s .8s } .ft2__hero.in .ft2__tag { opacity: 1 }
@media (prefers-reduced-motion: reduce) {
  .ah__media, .ah__media .ah__img, .ah__hand em, .ah__video, .cyc__step, .rev__card, .ft2__earth, .ft2__big span { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important }
  .pb__track, .netb__globe img, .cta2__btn, .ah__pin i { animation: none !important }
  .cyc__track em, .sb__plane { display: none }
}
/* лента партнёров в первом экране «О компании»: ч/б → цвет при наведении */
.ah__pt { position: relative; margin-top: 26px }
.ah__pt-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px } .ah__pt-top .kicker { margin: 0 } .ah__pt-top .link { font-size: 14px; white-space: nowrap }
.ah__pt-lane { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent) }
.ah__pt-lane .pb__track { animation-duration: 46s }
.ah__pt-it { flex: none; display: grid; place-items: center; width: 172px; height: 66px; padding: 10px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); filter: grayscale(1); opacity: .75; transition: filter .35s, opacity .35s, transform .35s var(--ease), box-shadow .35s }
.ah__pt-it:hover { filter: none; opacity: 1; transform: translateY(-3px); box-shadow: 0 20px 34px -24px rgba(11,31,26,.45) }
.ah__pt-it img { height: 30px; width: auto; max-width: 100%; object-fit: contain } .ah__pt-it span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 16px; color: var(--ink-2); white-space: nowrap } .ah__pt-it .ic { width: 16px; height: 16px; color: var(--green) }
@media (max-width: 899px) { .ah__pt-it { width: 148px; height: 58px } .ah__pt-it img { height: 24px } }
/* счётчики: мягкое проявление вместе с отсчётом */
.stat b[data-count] { display: inline-block; font-variant-numeric: tabular-nums }
.stat b[data-count].counting { animation: count-glow 1.4s var(--ease) }
@keyframes count-glow { 0% { opacity: .35; transform: translateY(6px) } 100% { opacity: 1; transform: none } }

/* ---- «Полный цикл» по референсу: фото фоном на всю ширину, карточки и статистика поверх */
.cyc { overflow: hidden }
.cyc__steps { position: relative; z-index: 2 }
.cyc__stage { position: relative; margin-top: -60px; padding-top: 60px }
.cyc__stage .cyc__photo { position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); top: 0; bottom: 0; width: 100vw; height: 100%; border-radius: 0; aspect-ratio: auto; min-height: 0; z-index: 0 }
.cyc__stage .cyc__photo img { object-position: 30% 68% }
.cyc__stage .cyc__photo::before { background: linear-gradient(180deg, var(--bg) 0%, rgba(245,248,249,.92) 18%, rgba(245,248,249,.45) 34%, rgba(245,248,249,0) 58%) }
.cyc__stage .cyc__arc { left: 8%; top: 24%; width: 52% }
.cyc__stage .cyc__lbl { left: 47%; top: 40% }
.cyc__stage .cyc__hand { position: absolute; left: 0; bottom: 26px; z-index: 2 }
.cyc__side { position: relative; z-index: 2; display: grid; gap: 14px; margin-left: auto; padding: 300px 0 40px; width: 100% }
.cyc__stats { background: rgba(255,255,255,.86); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 30px 60px -40px rgba(11,31,26,.4) }
@media (min-width: 900px) {
  .cyc__stage { margin-top: -170px; padding-top: 170px; min-height: 660px }
  .cyc__side { width: min(560px, 46%); padding: 190px 0 60px }
  .cyc__stage .cyc__photo img { object-position: 26% 62% }
  .cyc__stage .cyc__hand { bottom: 60px }
}
@media (max-width: 899px) {
  .cyc__stage { margin-top: 18px; padding-top: 0 }
  .cyc__stage .cyc__photo { position: relative; left: 0; right: 0; width: auto; height: 260px; border-radius: 22px; margin-bottom: 16px }
  .cyc__stage .cyc__photo::before { background: linear-gradient(180deg, rgba(245,248,249,.35), rgba(245,248,249,0) 45%) }
  .cyc__side { padding: 0 0 10px; width: 100% }
  .cyc__stage .cyc__hand { position: relative; bottom: auto; margin: 14px 0 0 }
}
/* «Три причины» — фото борта в правом верхнем углу как в референсе */
.why3__bg { right: -4%; top: -6%; width: 52%; max-width: 820px; height: 58%; object-position: 30% 55%; border-radius: 0; -webkit-mask: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 18%, #000 46%), linear-gradient(180deg, #000 62%, transparent 100%); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 18%, #000 46%), linear-gradient(180deg, #000 62%, transparent 100%); mask-composite: intersect; opacity: 1 }
.why3__note { align-items: flex-start } .why3__note p { font-size: 14.5px; line-height: 1.45 }
@media (min-width: 900px) { .why3__head { align-items: start } .why3__note { padding-top: 26px; margin-right: 4% } }

/* ================= ГЛАВНАЯ: шапка-пилюля и первый экран по референсу 08.09 ================= */
.nav--pill { gap: 26px; padding: 10px 26px; border-radius: 999px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.7); backdrop-filter: blur(12px); margin-left: 30px }
.hdr__cta { gap: 12px; padding: 10px 26px 10px 10px } .hdr__cta-arr { width: 36px; height: 36px; border-radius: 50%; background: var(--mint); color: var(--dark); display: grid; place-items: center; flex: none } .hdr__cta-arr .btn__arr { width: 16px }
.hdr--over { position: fixed; left: 0; right: 0; top: 0; background: transparent; backdrop-filter: none; border: 0 }
.hdr--over.is-scrolled { background: rgba(6,32,26,.72); backdrop-filter: blur(14px) }
.hdr--over .logo__t b { color: #fff } .hdr--over .logo__t small { color: rgba(255,255,255,.6) }
.hdr--over .nav--pill { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22) } .hdr--over .nav a { color: #fff } .hdr--over .nav a::after { background: var(--mint) }
.hdr--over .lang a { color: rgba(255,255,255,.55) } .hdr--over .lang a.is-on { color: #fff }
.hdr--over .burger { background: rgba(255,255,255,.14) }
/* Кнопка языка поверх фото — светлая на прозрачном, а раскрытый список всегда на белом,
   поэтому его ссылки берут обычный тёмный цвет: иначе получалось белым по белому. */
.hdr--over .lang__cur { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.12) }
.lang__list a, .hdr--over .lang__list a { color: var(--ink) }
.lang__list a.is-on, .hdr--over .lang__list a.is-on { color: var(--green, #0F4C3A) }
body.home { --hdr-h: 96px }
/* первый экран */
.hh { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: #06201a; padding: 130px 0 26px }
.hh__bg { position: absolute; inset: 0 } .hh__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; transform: scale(1.06); animation: hh-zoom 22s ease-out forwards }
@keyframes hh-zoom { to { transform: scale(1) } }
.hh__bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,18,15,.96) 0%, rgba(4,18,15,.86) 28%, rgba(4,18,15,.5) 52%, rgba(4,18,15,.16) 78%, rgba(4,18,15,.1) 100%) }
.hh__bg::after { content: ""; position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(180deg, rgba(4,18,15,0), rgba(4,18,15,.55) 45%, rgba(4,18,15,.9)) }
.hh__in { position: relative; z-index: 1; color: #fff; display: grid; gap: 30px; width: min(var(--wrap), 100% - var(--pad) * 2) }
.hh__k { color: rgba(255,255,255,.75); letter-spacing: .3em } .hh__k::after { background: rgba(255,255,255,.35) }
.hh__h { display: grid; font-weight: 500; letter-spacing: -.03em; line-height: .98; font-size: clamp(46px, 6.4vw, 92px); margin: 6px 0 22px }
.hh__h2 { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--mint); letter-spacing: -.02em }
.hh__lead { font-size: clamp(15px, 1.25vw, 18.5px); color: rgba(255,255,255,.86); max-width: 52ch; line-height: 1.55 }
.hh__act { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 30px }
.hh__btn { display: inline-flex; align-items: center; gap: 18px; padding: 10px 10px 10px 34px; border-radius: 999px; background: linear-gradient(135deg, #0F4C3A, #0A3529); color: #fff; font-size: 17px; font-weight: 500; border: 1px solid rgba(143,240,207,.35); box-shadow: 0 20px 40px -20px rgba(6,32,26,.9); transition: transform .3s var(--ease), box-shadow .3s }
.hh__btn:hover { transform: translateY(-2px); box-shadow: 0 26px 50px -22px rgba(6,32,26,1) }
.hh__btn-arr { width: 46px; height: 46px; border-radius: 50%; background: var(--mint); color: var(--dark); display: grid; place-items: center; flex: none }
.hh__play { display: inline-flex; align-items: center; gap: 14px; color: #fff; font-size: 14px; line-height: 1.3 }
.hh__play-b { width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); display: grid; place-items: center; transition: background .3s, transform .3s var(--ease) } .hh__play-b::after { content: ""; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px } .hh__play:hover .hh__play-b { background: rgba(255,255,255,.14); transform: scale(1.05) }
.hh__hand { position: absolute; right: 2%; top: -60px; z-index: 2; font: 500 clamp(15px, 1.5vw, 22px)/1.35 "Caveat", cursive; color: rgba(255,255,255,.9); text-align: right; transform: rotate(-6deg) } .hh__hand i { font-style: normal; display: block; padding-right: 18px }
.hh__bar { position: relative; display: grid; gap: 16px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18) }
.hh__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 10px }
.hh__stat { display: flex; align-items: flex-start; gap: 12px } .hh__stat .ic { width: 24px; height: 24px; color: rgba(255,255,255,.8); flex: none; margin-top: 6px }
.hh__stat b { display: block; font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1 } .hh__stat span { font-size: 12.5px; color: rgba(255,255,255,.65); line-height: 1.35; display: block; max-width: 20ch }
.hh__pt { display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 16px; border-radius: 20px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(14px); color: #fff; transition: background .3s, transform .3s var(--ease) } .hh__pt:hover { background: rgba(255,255,255,.16); transform: translateY(-2px) }
.hh__pt-av { display: flex; flex: none } .hh__pt-av img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.55); margin-left: -12px } .hh__pt-av img:first-child { margin-left: 0 }
.hh__pt-t b { display: block; font-size: 15px; font-weight: 600 } .hh__pt-t small { font-size: 12px; color: rgba(255,255,255,.65); line-height: 1.35 }
.hh__pt-arr { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--dark); display: grid; place-items: center; margin-left: auto; flex: none }
@media (min-width: 900px) {
  .hh { padding: 150px 0 34px }
  .hh__bar { display: flex; align-items: center; justify-content: space-between; gap: 30px }
  .hh__stats { display: flex; gap: 0; flex: 1 } .hh__stat { padding: 0 30px; border-right: 1px solid rgba(255,255,255,.16) } .hh__stat:first-child { padding-left: 0 } .hh__stat:last-child { border: 0 }
  .hh__pt { min-width: 380px }
}
@media (max-width: 899px) {
  .hh { min-height: 92svh; padding: 110px 0 22px } .hh__bg img { object-position: 62% 52% }
  .hh__bg::before { background: linear-gradient(180deg, rgba(4,18,15,.9) 0%, rgba(4,18,15,.78) 26%, rgba(4,18,15,.62) 48%, rgba(4,18,15,.8) 72%, rgba(4,18,15,.94) 100%) }
  .hh__hand { display: none }
  .hh__h { font-size: clamp(38px, 11vw, 54px) } .hh__lead { font-size: 15px }
  .hh__stat b { font-size: 22px } .hh__pt-t small { display: none } .hh__pt { padding: 10px }
}
@media (max-width: 1099px) { .nav--pill { display: none } }
/* «Казахстан — в центре больших возможностей» + полоса преимуществ (главная) */
.hkz { padding: 26px 0 clamp(30px, 5vw, 60px) }
.hkz__card { position: relative; background: #06201a; color: #fff; border-radius: 26px; overflow: hidden; padding: clamp(26px, 4vw, 52px); min-height: 420px; display: flex; align-items: center }
.hkz__globe { position: absolute; right: -6%; top: -14%; width: 68%; height: 128%; pointer-events: none } .hkz__globe img { width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(ellipse 56% 60% at 50% 50%, #000 56%, transparent 100%); mask: radial-gradient(ellipse 56% 60% at 50% 50%, #000 56%, transparent 100%) }
.hkz__globe .net__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible } .hkz__globe .arc { stroke: var(--mint); opacity: .5 } .hkz__globe .lbl { font-size: 13px } .hkz__globe .hub { fill: var(--mint) }
.hkz__tag { position: absolute; right: clamp(26px, 4vw, 52px); top: 50%; transform: translateY(-50%); font-size: 11px; letter-spacing: .24em; line-height: 2; color: rgba(255,255,255,.55); text-align: right; z-index: 2 }
.hkz__txt { position: relative; z-index: 2; max-width: 560px }
.hkz__h { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.8vw, 52px); line-height: 1.06; margin: 10px 0 16px } .hkz__h span { color: #fff }
.hkz__lead { color: rgba(255,255,255,.75); font-size: 16px; max-width: 40ch; margin-bottom: 26px }
.hkz__btn { display: inline-flex; align-items: center; gap: 14px; padding: 14px 14px 14px 26px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); color: #fff; font-weight: 500; transition: background .3s, transform .3s var(--ease) } .hkz__btn:hover { background: rgba(255,255,255,.1); transform: translateY(-2px) } .hkz__btn .btn__arr { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); color: #fff } .hkz__btn .btn__arr::before { left: 9px; width: 14px } .hkz__btn .btn__arr::after { right: 10px }
.hkz__adv { display: grid; gap: 16px; margin-top: 16px; padding: 22px clamp(18px, 3vw, 34px); background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 60px -46px rgba(11,31,26,.4) }
.hkz__adv-it { display: flex; gap: 14px; align-items: flex-start } .hkz__adv-it b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px } .hkz__adv-it span { font-size: 13px; color: var(--mute); line-height: 1.4 }
.hkz__adv-note { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); line-height: 1.9; padding-left: 22px; border-left: 1px solid var(--line); align-self: center }
@media (min-width: 900px) { .hkz__card { min-height: 470px } .hkz__adv { grid-template-columns: repeat(4, 1fr) auto; gap: 26px; align-items: center } }
@media (max-width: 899px) { .hkz__globe { position: absolute; right: -14%; top: -6%; width: 90%; height: 60%; opacity: .85 } .hkz__tag { display: none } .hkz__card { padding-top: 190px; align-items: flex-end } .hkz__adv-note { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line) } }

/* ---- анимации первого экрана главной и блока «Казахстан» */
.hh__in > *, .hh__k, .hh__lead, .hh__act, .hh__bar { --hh-t: opacity .8s var(--ease), transform .9s var(--ease) }
.hh__k, .hh__lead, .hh__act, .hh__bar, .hh__hand { opacity: 0; transform: translateY(18px); transition: var(--hh-t) }
.hh.is-in .hh__k { opacity: 1; transform: none; transition-delay: .15s }
.hh.is-in .hh__lead { opacity: 1; transform: none; transition-delay: .95s }
.hh.is-in .hh__act { opacity: 1; transform: none; transition-delay: 1.15s }
.hh.is-in .hh__bar { opacity: 1; transform: none; transition-delay: 1.35s }
.hh.is-in .hh__hand { opacity: 1; transform: rotate(-6deg); transition-delay: 1.6s }
.hh__h .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .05em .12em 0; margin-bottom: -.12em }
.hh__h .w i { font-style: inherit; display: inline-block; transform: translateY(110%); transition: transform .95s cubic-bezier(.2,.85,.2,1); transition-delay: calc(.25s + var(--i, 0) * 90ms) }
.hh.is-in .hh__h .w i { transform: none }
.hh__hand em, .hh__hand i { display: block } .hh__hand i { padding-right: 18px }
.hh__hand svg { display: block; width: 110px; margin-top: 2px } .hh__hand-p { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1 }
.hh.is-in .hh__hand-p { animation: ah-draw 1.1s 2.1s var(--ease) forwards }
.hh__stat { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .7s var(--ease) } .hh.is-in .hh__stat { opacity: 1; transform: none } 
.hh.is-in .hh__stat:nth-child(1) { transition-delay: 1.45s } .hh.is-in .hh__stat:nth-child(2) { transition-delay: 1.58s } .hh.is-in .hh__stat:nth-child(3) { transition-delay: 1.71s } .hh.is-in .hh__stat:nth-child(4) { transition-delay: 1.84s }
.hh__pt-av img { opacity: 0; transform: translateX(18px) scale(.7); transition: opacity .5s var(--ease), transform .7s cubic-bezier(.2,.9,.2,1) }
.hh.is-in .hh__pt-av img:nth-child(1) { opacity: 1; transform: none; transition-delay: 1.9s } .hh.is-in .hh__pt-av img:nth-child(2) { opacity: 1; transform: none; transition-delay: 2.02s } .hh.is-in .hh__pt-av img:nth-child(3) { opacity: 1; transform: none; transition-delay: 2.14s }
.hkz__card { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .9s var(--ease), transform 1s var(--ease) } .hkz__card.in { opacity: 1; transform: none }
.hkz__globe img { transform: scale(1.12); transition: transform 2.2s var(--ease) } .hkz__card.in .hkz__globe img { transform: scale(1) }
.hkz__txt > * { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .8s var(--ease) }
.hkz__card.in .hkz__txt > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .25s } .hkz__card.in .hkz__txt > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .4s } .hkz__card.in .hkz__txt > *:nth-child(3) { opacity: 1; transform: none; transition-delay: .55s } .hkz__card.in .hkz__txt > *:nth-child(4) { opacity: 1; transform: none; transition-delay: .7s }
.hkz__tag { opacity: 0; transition: opacity .9s .9s } .hkz__card.in .hkz__tag { opacity: 1 }
.hkz__adv-it, .hkz__adv-note { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 110ms) } .hkz__adv.in .hkz__adv-it, .hkz__adv.in .hkz__adv-note { opacity: 1; transform: none }
.hkz__adv-it .cyc__ico { transition: transform .5s var(--ease) } .hkz__adv-it:hover .cyc__ico { transform: translateY(-3px) rotate(-6deg) }
@media (prefers-reduced-motion: reduce) { .hh__k, .hh__lead, .hh__act, .hh__bar, .hh__hand, .hh__stat, .hh__pt-av img, .hkz__card, .hkz__txt > *, .hkz__tag, .hkz__adv-it, .hkz__adv-note { opacity: 1 !important; transform: none !important; transition: none !important } .hh__h .w i { transform: none } .hh__bg img { animation: none } }

/* ---- нижнее меню (мобильное приложение) */
.tabbar { display: none }
@media (max-width: 899px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 45; padding: 8px 6px calc(8px + env(safe-area-inset-bottom) / 2); border-radius: 22px; background: rgba(6,32,26,.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 40px -18px rgba(6,32,26,.8); transform: translateY(0); transition: transform .45s var(--ease), opacity .3s }
  .tabbar.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none }
  .tabbar__it, .tabbar__cta { display: grid; justify-items: center; gap: 4px; padding: 6px 2px; color: rgba(255,255,255,.72); font: 500 10.5px var(--sans); border: 0; background: none; cursor: pointer; text-align: center; transition: color .25s, transform .25s var(--ease) }
  .tabbar__it .ic, .tabbar__cta .ic { width: 22px; height: 22px }
  .tabbar__it:active, .tabbar__cta:active { transform: scale(.94) }
  .tabbar__it.is-on { color: #fff } .tabbar__it.is-on .ic { color: var(--mint) }
  .tabbar__cta { position: relative; color: var(--dark); font-weight: 600 }
  .tabbar__cta::before { content: ""; position: absolute; left: 50%; top: -16px; width: 54px; height: 54px; margin-left: -27px; border-radius: 50%; background: linear-gradient(140deg, var(--mint), #4FD8AE); box-shadow: 0 12px 26px -10px rgba(143,240,207,.8), 0 0 0 6px rgba(6,32,26,.92) }
  .tabbar__cta .ic { position: relative; z-index: 1; color: var(--dark); transform: translateY(-13px); width: 24px; height: 24px }
  .tabbar__cta span { position: relative; z-index: 1; margin-top: -9px; color: rgba(255,255,255,.9); font-size: 10.5px }
  body { padding-bottom: 84px }
  .wa-fab { display: none }
  .ai-fab { bottom: 104px; right: 14px }
  .ai { bottom: 86px; height: 80dvh; border-radius: 22px; left: 10px; right: 10px; width: auto }
  .totop { display: none }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .tabbar { transition: none } }
@media (max-width: 899px) {
  .hh__in::before { content: ""; position: absolute; left: calc(var(--pad) * -1); right: calc(var(--pad) * -1); top: -40px; bottom: -20px; background: linear-gradient(180deg, rgba(4,18,15,.15), rgba(4,18,15,.6) 30%, rgba(4,18,15,.82) 70%, rgba(4,18,15,.9)); z-index: -1; pointer-events: none }
  .hh__in { position: relative; z-index: 1 }
  .hh__lead, .hh__stat span { text-shadow: 0 1px 12px rgba(4,18,15,.9) }
  .hh__stat b { text-shadow: 0 2px 14px rgba(4,18,15,.9) }
  .ai-fab { bottom: 96px; right: 12px } .ai-fab__ic { width: 40px; height: 40px }
  .hh__pt { margin-right: 58px }
}
/* центральная кнопка таббара: пульсирующие кольца, блик, взлетающий самолётик */
@media (max-width: 899px) {
  .tabbar__cta { position: relative; overflow: visible; padding-top: 0 }
  .tabbar__cta::before { display: none }
  .tabbar__orb { position: relative; display: grid; place-items: center; width: 58px; height: 58px; margin-top: -26px; border-radius: 50%; background: linear-gradient(145deg, #A6FBDD 0%, var(--mint) 42%, #35C79A 100%); box-shadow: 0 14px 28px -10px rgba(52,199,154,.9), 0 0 0 6px rgba(6,32,26,.94), inset 0 1px 0 rgba(255,255,255,.7); transition: transform .35s cubic-bezier(.2,.9,.2,1), box-shadow .35s }
  .tabbar__cta:active .tabbar__orb { transform: scale(.92) }
  .tabbar__orb .ic { position: relative; z-index: 2; width: 26px; height: 26px; color: #06201A; transform: rotate(-45deg) translate(1px, -1px); animation: tab-fly 3.6s ease-in-out infinite }
  @keyframes tab-fly { 0%, 62%, 100% { transform: rotate(-45deg) translate(1px, -1px) } 72% { transform: rotate(-45deg) translate(6px, -6px) scale(1.06) } 82% { transform: rotate(-45deg) translate(-2px, 2px) scale(.98) } }
  .tabbar__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(143,240,207,.75); animation: tab-ring 2.8s ease-out infinite; pointer-events: none } .tabbar__ring--2 { animation-delay: 1.4s }
  @keyframes tab-ring { 0% { transform: scale(1); opacity: .85 } 100% { transform: scale(1.75); opacity: 0 } }
  .tabbar__spark { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; z-index: 1 }
  .tabbar__spark::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent); transform: skewX(-18deg); animation: tab-shine 3.6s ease-in-out infinite }
  @keyframes tab-shine { 0%, 55% { left: -60% } 78%, 100% { left: 130% } }
  .tabbar__cta-t { margin-top: 2px; font-size: 10.5px; font-weight: 600; color: #fff; letter-spacing: .01em }
  .tabbar__cta::after { content: ""; position: absolute; left: 50%; top: -22px; width: 74px; height: 74px; margin-left: -37px; border-radius: 50%; background: radial-gradient(circle, rgba(143,240,207,.28), transparent 65%); animation: tab-glow 3.2s ease-in-out infinite; pointer-events: none }
  @keyframes tab-glow { 0%, 100% { opacity: .5; transform: scale(.9) } 50% { opacity: 1; transform: scale(1.08) } }
  .tabbar.is-hidden .tabbar__ring, .tabbar.is-hidden .tabbar__spark::after { animation-play-state: paused }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .tabbar__ring, .tabbar__spark::after, .tabbar__orb .ic, .tabbar__cta::after { animation: none } }
@media (max-width: 899px) {
  .tabbar { padding-top: 14px }
  .tabbar__it span { font-size: 9.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .tabbar__orb { width: 54px; height: 54px; margin-top: -32px }
  .tabbar__orb .ic { width: 24px; height: 24px }
  .tabbar__cta-t { margin-top: 6px; font-size: 9.5px }
  .tabbar__cta::after { top: -30px }
}

@media (max-width: 899px) {
  .tabbar { grid-template-columns: 1fr 1fr 76px 1fr 1fr; padding-top: 10px }
  .tabbar__cta { padding: 0 } .tabbar__cta-t { display: none }
  .tabbar__orb { width: 62px; height: 62px; margin-top: -34px }
  .tabbar__orb .ic { width: 27px; height: 27px; transform: none; animation: tab-pop 3.6s ease-in-out infinite }
  @keyframes tab-pop { 0%, 70%, 100% { transform: none } 78% { transform: scale(1.12) rotate(-4deg) } 88% { transform: scale(.97) rotate(2deg) } }
  .tabbar__cta::after { top: -38px; width: 84px; height: 84px; margin-left: -42px }
}

/* ---- первый экран «Услуг» (светлый, фото справа) */
.sh { position: relative; overflow: hidden; background: linear-gradient(180deg, #EFF4F5, #F5F8F9); padding: 120px 0 26px; min-height: 96svh; display: flex; align-items: center }
.sh__bg { position: absolute; inset: 0 } .sh__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; transform: scale(1.05); animation: hh-zoom 24s ease-out forwards }
.sh__bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(243,247,248,.97) 0%, rgba(243,247,248,.9) 26%, rgba(243,247,248,.45) 46%, rgba(243,247,248,0) 66%) }
.sh__bg::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(180deg, rgba(243,247,248,0), rgba(243,247,248,.85)) }
.sh__in { position: relative; z-index: 1; display: grid; gap: 26px; width: min(var(--wrap), 100% - var(--pad) * 2) }
.sh__in .crumbs { margin-bottom: 0 }
.sh__h { display: grid; margin: 8px 0 20px; font-weight: 500; letter-spacing: -.03em; line-height: .98; font-size: clamp(40px, 5.4vw, 76px); color: var(--ink) }
.sh__h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: #0F4C3A }
.sh__lead { font-size: clamp(15px, 1.2vw, 18px); color: var(--ink-2); max-width: 44ch; line-height: 1.55 }
.sh__act { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 28px }
.sh__play { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); font-size: 14px; line-height: 1.3 }
.sh__play-b { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.85); border: 1px solid var(--line); display: grid; place-items: center; box-shadow: 0 14px 28px -18px rgba(11,31,26,.5); transition: transform .3s var(--ease) } .sh__play-b::after { content: ""; border-left: 12px solid var(--ink); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 4px } .sh__play:hover .sh__play-b { transform: scale(1.06) }
.sh__hand { position: absolute; right: 3%; top: 12%; z-index: 2; font: 500 clamp(16px, 1.7vw, 26px)/1.25 "Caveat", cursive; color: rgba(255,255,255,.92); text-align: left; transform: rotate(-7deg); text-shadow: 0 2px 14px rgba(6,32,26,.55) } .sh__hand em, .sh__hand i { display: block; font-style: normal } .sh__hand em:nth-child(2) { padding-left: 14px } .sh__hand i { padding-left: 28px }
.sh__bar { display: grid; gap: 18px; padding-top: 22px; border-top: 1px solid rgba(11,31,26,.14) }
.sh__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 10px }
.sh__stat { display: flex; align-items: flex-start; gap: 12px } .sh__stat .ic { width: 24px; height: 24px; color: var(--ink-2); flex: none; margin-top: 6px }
.sh__stat b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; color: var(--ink) } .sh__stat span { font-size: 12.5px; color: var(--mute); line-height: 1.35; display: block; max-width: 20ch }
.sh__tag { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .2em; color: var(--mute); line-height: 1.7 } .sh__tag i { flex: 1; height: 1px; background: rgba(11,31,26,.2); max-width: 180px }
.sh__k, .sh__lead, .sh__act, .sh__bar, .sh__hand { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .9s var(--ease) }
.sh.is-in .sh__k { opacity: 1; transform: none; transition-delay: .1s } .sh.is-in .sh__lead { opacity: 1; transform: none; transition-delay: .85s } .sh.is-in .sh__act { opacity: 1; transform: none; transition-delay: 1.05s } .sh.is-in .sh__bar { opacity: 1; transform: none; transition-delay: 1.2s } .sh.is-in .sh__hand { opacity: 1; transform: rotate(-7deg); transition-delay: 1.4s }
.sh__h .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .05em .12em 0; margin-bottom: -.12em } .sh__h .w i { font-style: inherit; display: inline-block; transform: translateY(115%); transition: transform .95s cubic-bezier(.2,.85,.2,1); transition-delay: calc(.2s + var(--i, 0) * 80ms) } .sh.is-in .sh__h .w i { transform: none }
.sh__h em .w i { font-style: italic }
@media (min-width: 900px) { .sh__bar { display: flex; align-items: center; justify-content: space-between; gap: 30px } .sh__stats { display: flex; flex: 1 } .sh__stat { padding: 0 28px; border-right: 1px solid rgba(11,31,26,.12) } .sh__stat:first-child { padding-left: 0 } .sh__stat:last-child { border: 0 } .sh__txt { max-width: 620px } }
@media (max-width: 899px) { .sh { min-height: 0; padding: 100px 0 20px } .sh__bg img { object-position: 62% 62% } .sh__bg::before { background: linear-gradient(180deg, rgba(243,247,248,.98) 0%, rgba(243,247,248,.95) 38%, rgba(243,247,248,.86) 58%, rgba(243,247,248,.95) 100%) } .sh__lead, .sh__stat span, .sh__stat b { text-shadow: 0 1px 10px rgba(243,247,248,.95) } .sh__hand { display: none } .sh__h { font-size: clamp(34px, 10vw, 48px) } .sh__tag { display: none } }

/* ---- «Ключевые направления и истории успеха» (услуги) */
.sk { position: relative; background: #06201A; color: #fff; padding: clamp(40px, 6vw, 84px) 0; overflow: hidden }
.sk__map { position: absolute; right: -8%; top: -6%; width: 72%; height: 78%; opacity: .5; pointer-events: none } .sk__map img { width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(ellipse 60% 60% at 55% 45%, #000 40%, transparent 100%); mask: radial-gradient(ellipse 60% 60% at 55% 45%, #000 40%, transparent 100%) }
.sk__map .net__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible } .sk__map .arc { stroke: var(--mint); opacity: .45 } .sk__map .lbl { font-size: 12px; opacity: .8 }
.sk__in { position: relative; z-index: 1 }
.sk__head { max-width: 640px; margin-bottom: 28px } .sk__h { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.8vw, 54px); line-height: 1.06; margin: 10px 0 14px } .sk__h span { color: var(--mint) } .sk__head p { color: rgba(255,255,255,.72); font-size: 15.5px; line-height: 1.55; max-width: 52ch }
.sk__grid { display: grid; gap: 14px } @media (min-width: 760px) { .sk__grid { grid-template-columns: 1fr 1fr } }
.sk__card { position: relative; display: grid; gap: 8px; padding: 24px 150px 22px 24px; min-height: 190px; border-radius: 20px; border: 1px solid rgba(143,240,207,.28); background: linear-gradient(140deg, rgba(143,240,207,.08), rgba(255,255,255,.03)); overflow: hidden; transition: transform .4s var(--ease), border-color .3s, background .3s }
.sk__card:hover { transform: translateY(-5px); border-color: rgba(143,240,207,.6); background: linear-gradient(140deg, rgba(143,240,207,.14), rgba(255,255,255,.05)) }
.sk__n { font-size: 11px; letter-spacing: .2em; color: rgba(255,255,255,.5) }
.sk__card b { font-size: clamp(16px, 1.5vw, 20px); font-weight: 600; letter-spacing: .02em; line-height: 1.2; max-width: 14ch }
.sk__card p { color: rgba(255,255,255,.68); font-size: 13.5px; line-height: 1.5; max-width: 30ch }
.sk__more { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--mint); margin-top: auto } .sk__more .btn__arr { color: var(--mint) }
.sk__pic { position: absolute; right: -10px; top: 50%; transform: translateY(-50%); width: 160px; height: 130px; border-radius: 16px; overflow: hidden; opacity: .9; -webkit-mask: radial-gradient(ellipse 70% 70% at 40% 50%, #000 45%, transparent 100%); mask: radial-gradient(ellipse 70% 70% at 40% 50%, #000 45%, transparent 100%) }
.sk__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease) } .sk__card:hover .sk__pic img { transform: scale(1.08) }
.sk__cases { display: grid; gap: 14px; margin-top: 14px } @media (min-width: 760px) { .sk__cases { grid-template-columns: 1fr 1fr } }
.sk__case { display: flex; gap: 16px; padding: 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); backdrop-filter: blur(10px); transition: transform .4s var(--ease), border-color .3s } .sk__case:hover { transform: translateY(-4px); border-color: rgba(143,240,207,.45) }
.sk__case-pic { width: 116px; height: 108px; border-radius: 14px; overflow: hidden; flex: none } .sk__case-pic img { width: 100%; height: 100%; object-fit: cover }
.sk__case-b { display: grid; gap: 4px; align-content: center; min-width: 0 } .sk__case-b b { font-size: 15px; letter-spacing: .04em } .sk__case-b small { font-size: 12.5px; color: rgba(255,255,255,.6) }
.sk__res { display: flex; gap: 22px; margin-top: 8px } .sk__res i { display: grid; font-style: normal; font-size: 11px; color: rgba(255,255,255,.55); line-height: 1.3 } .sk__res em { font-style: normal; font-size: 19px; color: var(--mint); font-weight: 500 }
.sk__bar { display: grid; gap: 18px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14) }
.sk__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 10px }
.sk__stat { display: flex; gap: 12px; align-items: flex-start } .sk__stat .ic { width: 22px; height: 22px; color: rgba(255,255,255,.75); flex: none; margin-top: 6px }
.sk__stat b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1 } .sk__stat span { font-size: 12px; color: rgba(255,255,255,.6); max-width: 20ch; display: block }
.sk__tag { font-size: 10.5px; letter-spacing: .2em; color: rgba(255,255,255,.45); line-height: 1.8 }
@media (min-width: 900px) { .sk__bar { display: flex; align-items: center; justify-content: space-between; gap: 30px } .sk__stats { display: flex; flex: 1 } .sk__stat { padding: 0 26px; border-right: 1px solid rgba(255,255,255,.14) } .sk__stat:first-child { padding-left: 0 } .sk__stat:last-child { border: 0 } }
@media (max-width: 759px) { .sk__card { padding: 20px 110px 18px 18px; min-height: 170px } .sk__pic { width: 120px; height: 108px } .sk__case-pic { width: 92px; height: 92px } }
@media (max-width: 899px) {
  .sk__map { right: -20%; top: -2%; width: 130%; height: 42%; opacity: .35 }
  .sk__map .lbl, .sk__map .lbl-line, .sk__map .hub-lbl { display: none }
  .sk__card { padding: 18px 130px 18px 18px; min-height: 0 }
  .sk__card b { font-size: 16px; max-width: none } .sk__card p { font-size: 13px; max-width: none }
  .sk__pic { width: 116px; height: 92px; right: 8px; border-radius: 14px; -webkit-mask: none; mask: none; opacity: .95 }
  .sk__case { align-items: center } .sk__res em { font-size: 17px }
}

/* ---- таббар: компактнее, прижат к низу; шторка быстрых контактов */
@media (max-width: 899px) {
  .tabbar { left: 0; right: 0; bottom: 0; border-radius: 22px 22px 0 0; padding: 8px 4px calc(6px + env(safe-area-inset-bottom)); border-width: 1px 0 0; background: rgba(6,32,26,.94); box-shadow: 0 -12px 34px -18px rgba(6,32,26,.9) }
  .tabbar__it, .tabbar__cta { padding: 4px 2px; gap: 3px }
  .tabbar__it .ic { width: 21px; height: 21px }
  .tabbar__it span { font-size: 9px; letter-spacing: .01em }
  .tabbar__orb { width: 56px; height: 56px; margin-top: -30px } .tabbar__orb .ic { width: 25px; height: 25px }
  .tabbar__cta::after { top: -34px; width: 78px; height: 78px; margin-left: -39px }
  body { padding-bottom: 74px }
  .ai-fab { bottom: 88px } .ai { bottom: 78px }
}
.sheet { position: fixed; inset: 0; z-index: 68; visibility: hidden; pointer-events: none }
.sheet.is-on { visibility: visible; pointer-events: auto }
.sheet__back { position: absolute; inset: 0; background: rgba(6,32,26,.55); backdrop-filter: blur(6px); opacity: 0; transition: opacity .4s var(--ease) } .sheet.is-on .sheet__back { opacity: 1 }
.sheet__box { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg); border-radius: 26px 26px 0 0; padding: 12px 16px calc(18px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .5s cubic-bezier(.2,.9,.2,1); box-shadow: 0 -30px 60px -30px rgba(6,32,26,.6); max-height: 88dvh; overflow: auto }
.sheet.is-on .sheet__box { transform: translateY(0) }
.sheet__grip { display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 14px }
.sheet__head { margin-bottom: 14px } .sheet__head b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 400 } .sheet__head span { font-size: 13px; color: var(--mute) }
.sheet__list { display: grid; gap: 8px }
.sheet__it { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 18px; background: #fff; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: transform .25s var(--ease), border-color .25s, background .25s; opacity: 0; transform: translateY(14px) }
.sheet.is-on .sheet__it { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .5s var(--ease), border-color .25s, background .25s }
.sheet.is-on .sheet__it:nth-child(1) { transition-delay: .08s } .sheet.is-on .sheet__it:nth-child(2) { transition-delay: .14s } .sheet.is-on .sheet__it:nth-child(3) { transition-delay: .2s } .sheet.is-on .sheet__it:nth-child(4) { transition-delay: .26s } .sheet.is-on .sheet__it:nth-child(5) { transition-delay: .32s } .sheet.is-on .sheet__it:nth-child(6) { transition-delay: .38s }
.sheet__it:active { transform: scale(.985) } .sheet__it:hover { border-color: rgba(15,76,58,.4); background: #fff }
.sheet__it b { display: block; font-size: 15.5px; font-weight: 600 } .sheet__it small { font-size: 12.5px; color: var(--mute) }
.sheet__it > span:nth-child(2) { flex: 1; min-width: 0 } .sheet__it .btn__arr { color: var(--green); flex: none }
.sheet__ic { width: 46px; height: 46px; border-radius: 50%; background: #E7F5EE; display: grid; place-items: center; flex: none } .sheet__ic .ic { width: 22px; height: 22px; color: #0F4C3A }
.sheet__ic--wa { background: #25D366 } .sheet__ic--wa .ic { color: #fff }
body.sheet-open { overflow: hidden }
@media (min-width: 900px) { .sheet { display: none } }
@media (prefers-reduced-motion: reduce) { .sheet__box, .sheet__it { transition: none } }
/* мобильная шапка «Услуг» — тёмная, фото карточкой (макет 08.09) */
.sh__pic { display: none }
.sh__cta { display: none }
@media (max-width: 899px) {
  .sh { background: linear-gradient(180deg, #0A2A22 0%, #06201A 60%, #06201A 100%); color: #fff; padding: 0 0 20px; min-height: 0; display: block }
  .sh__bg { display: none }
  /* 09.09: 3/4 и 58vh занимали весь первый экран — заголовок уходил под таббар. Ниже и компактнее. */
  /* Шапка sticky и в потоке: отступ сверху давал тёмный провал. Фото прижато к шапке во всю ширину. */
  .sh__pic { display: block; position: relative; overflow: hidden; aspect-ratio: 16/11; max-height: 34vh; margin: 0 0 18px; border-radius: 0 0 24px 24px; box-shadow: 0 26px 50px -32px rgba(0,0,0,.85) }
  .sh__pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: hh-zoom 20s ease-out forwards }
  .sh__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,32,26,0) 55%, rgba(6,32,26,.85)) }
  .sh__pic-hand { position: absolute; right: 14px; bottom: 16px; z-index: 1; font: 500 17px/1.25 "Caveat", cursive; color: #fff; text-align: right; transform: rotate(-6deg); text-shadow: 0 2px 10px rgba(0,0,0,.6) } .sh__pic-hand i { font-style: normal }
  .sh__in { gap: 0 } .sh__in .crumbs { color: rgba(255,255,255,.5); margin-bottom: 10px } .sh__in .crumbs a:hover { color: #fff }
  .sh__k { color: rgba(255,255,255,.7) } .sh__k::after { background: rgba(255,255,255,.3) }
  .sh__h { color: #fff; font-size: clamp(29px, 8.2vw, 40px); margin: 6px 0 14px; text-shadow: none } .sh__h em { color: var(--mint) }
  .sh__lead { color: rgba(255,255,255,.82); text-shadow: none; max-width: none }
  .sh__play { color: #fff } .sh__play-b { background: #fff; border-color: #fff } .sh__play-b::after { border-left-color: #06201A }
  .sh__bar { border-top-color: rgba(255,255,255,.16); margin-top: 24px }
  .sh__stats { grid-template-columns: repeat(4, 1fr); gap: 10px 6px }
  .sh__stat { flex-direction: column; gap: 4px; padding: 0 6px; border-right: 1px solid rgba(255,255,255,.14) } .sh__stat:last-child { border: 0 }
  .sh__stat .ic { width: 18px; height: 18px; color: rgba(255,255,255,.7); margin: 0 }
  .sh__stat b { color: #fff; font-size: 21px; text-shadow: none } .sh__stat span { color: rgba(255,255,255,.6); font-size: 10px; max-width: none; text-shadow: none }
  .sh__cta { display: inline-flex; align-items: center; gap: 14px; margin-top: 20px; padding: 10px 26px 10px 10px; border-radius: 999px; border: 1px solid rgba(143,240,207,.45); background: rgba(143,240,207,.08); color: #fff; font-weight: 500; font-size: 15px }
  .sh__cta-arr { width: 40px; height: 40px; border-radius: 50%; background: var(--mint); color: var(--dark); display: grid; place-items: center; flex: none }
  .sh__tag { display: flex; color: rgba(255,255,255,.45); margin-top: 16px } .sh__tag i { background: rgba(255,255,255,.25) }
}
/* «Истории успеха» — широкая карточка перед кейсами */
.sk__stories { position: relative; display: block; margin-top: 14px; border-radius: 20px; overflow: hidden; min-height: 150px; border: 1px solid rgba(255,255,255,.12) }
.sk__stories img { position: absolute; inset: 0 0 0 42%; width: 58%; height: 100%; object-fit: cover; -webkit-mask: linear-gradient(90deg, transparent, #000 34%); mask: linear-gradient(90deg, transparent, #000 34%) }
.sk__stories::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,32,26,.96), rgba(6,32,26,.6) 46%, rgba(6,32,26,.1)) }
.sk__stories-t { position: relative; z-index: 1; display: grid; gap: 8px; padding: 26px; font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); line-height: 1.08; color: #fff } .sk__stories-t .btn__arr { color: var(--mint); margin-top: 8px }
.sk__stories:hover img { transform: none } .sk__stories:hover { border-color: rgba(143,240,207,.45) }
@media (max-width: 899px) {
  .sk__cases { grid-template-columns: 1fr 1fr; gap: 10px }
  .sk__case { flex-direction: column; padding: 10px; gap: 10px }
  .sk__case-pic { width: 100%; height: 84px }
  .sk__case-b b { font-size: 13px; letter-spacing: .02em } .sk__case-b small { font-size: 11px }
  .sk__res { gap: 12px; flex-wrap: wrap } .sk__res em { font-size: 15px } .sk__res i { font-size: 10px }
  .sk__bar { text-align: center } .sk__stats { grid-template-columns: repeat(4, 1fr); gap: 8px 4px }
  .sk__stat { flex-direction: column; gap: 3px; padding: 0 4px; border-right: 1px solid rgba(255,255,255,.12) } .sk__stat:last-child { border: 0 }
  .sk__stat .ic { width: 18px; height: 18px; margin: 0 } .sk__stat b { font-size: 19px } .sk__stat span { font-size: 9.5px; max-width: none }
  .sk__tag { display: block; text-align: center; font-size: 9.5px }
  .sk__stories { min-height: 128px } .sk__stories-t { padding: 18px; font-size: 22px }
}

@media (max-width: 899px) {
  .hh__act { gap: 14px; margin-top: 22px; flex-direction: column; align-items: flex-start }
  .hh__btn { padding: 7px 7px 7px 22px; font-size: 15px; gap: 12px } .hh__btn-arr { width: 38px; height: 38px } .hh__btn-arr .btn__arr { width: 15px }
  .hh__play { gap: 12px; font-size: 13px } .hh__play-b { width: 44px; height: 44px } .hh__play-b::after { border-left-width: 11px; border-top-width: 6px; border-bottom-width: 6px }
  .sh__act { gap: 14px } .sh__btn { padding: 7px 7px 7px 22px; font-size: 15px } .sh__btn .hh__btn-arr { width: 38px; height: 38px }
  .sh__play-b { width: 44px; height: 44px }
  .sh__cta { padding: 7px 22px 7px 7px; font-size: 14px } .sh__cta-arr { width: 36px; height: 36px }
}

/* ---- глобус сливается с фоном карточки (главная и «О компании») */
.hkz__globe img, .netb__globe img, .sk__map img { mix-blend-mode: screen; opacity: .92 }
.hkz__globe { mix-blend-mode: normal }
.hkz__card { background: radial-gradient(120% 90% at 78% 30%, #0B2E25 0%, #06201A 55%, #04180F 100%) }
.netb__card { background: radial-gradient(110% 90% at 70% 40%, #0A2A22 0%, #061512 60%, #041210 100%) }
.hkz__globe::after, .netb__globe::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(143,240,207,.16), transparent 62%); pointer-events: none }
/* усиленная анимация блока «Казахстан» */
.hkz__globe { transition: transform 1.4s var(--ease) } .hkz__card.in .hkz__globe { animation: hkz-float 18s ease-in-out infinite alternate }
@keyframes hkz-float { 0% { transform: translate3d(0,0,0) } 100% { transform: translate3d(-1.5%, 1.2%, 0) } }
.hkz__globe .arc { stroke-dasharray: 5 8; animation: dash 7s linear infinite }
.hkz__glow { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; background: radial-gradient(circle, rgba(143,240,207,.35), transparent 62%); opacity: 0; transition: opacity 1.2s .5s; pointer-events: none; z-index: 1 } .hkz__card.in .hkz__glow { opacity: 1; animation: hkz-pulse 5s ease-in-out infinite }
@keyframes hkz-pulse { 0%, 100% { transform: scale(.9); opacity: .55 } 50% { transform: scale(1.08); opacity: 1 } }
.hkz__h span { display: inline-block }
.hkz__card.in .hkz__btn { animation: hkz-btn .8s .7s var(--ease) both } @keyframes hkz-btn { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .hkz__card.in .hkz__globe, .hkz__glow, .hkz__globe .arc { animation: none } }

/* ---- вкладки в шторке расчёта + калькулятор */
.qm__tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 4px; padding: 4px; background: var(--bg-2); border-radius: 999px; grid-column: 1 / -1 }
.qm__tab { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border: 0; background: none; border-radius: 999px; font: 600 14px var(--sans); color: var(--mute); cursor: pointer; transition: color .3s }
.qm__tab .ic { width: 18px; height: 18px } .qm__tab.is-on { color: var(--ink) }
.qm__tab-bar { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #fff; box-shadow: 0 8px 20px -12px rgba(11,31,26,.5); transition: transform .45s cubic-bezier(.2,.9,.2,1) }
.qm__tabs.is-2 .qm__tab-bar { transform: translateX(100%) }
.qm__pane[hidden] { display: none }
.qm__pane { display: grid; gap: 12px; padding: 18px 0 0 }
.qm__row--3 { grid-template-columns: repeat(3, 1fr) }
.qm__calc-note { font-size: 13px; color: var(--mute); line-height: 1.5 }
.qm__calc-hint { font-size: 12px; color: var(--mute-2); line-height: 1.45 }
.qm__pane select { width: 100%; font: inherit; padding: 22px 14px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235F6E69' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px }
.qm__out { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: linear-gradient(140deg, #0F4C3A, #06201A); color: #fff }
.qm__out div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 13.5px; color: rgba(255,255,255,.7) }
.qm__out b { font-size: 18px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums }
.qm__out--hi { padding-top: 8px; border-top: 1px solid rgba(255,255,255,.16) } .qm__out--hi b { font-size: 26px; color: var(--mint) }
/* премиальная шторка расчёта на мобилке */
@media (max-width: 899px) {
  .qm__box { border-radius: 26px 26px 0 0; box-shadow: 0 -30px 70px -30px rgba(6,32,26,.7) }
  .qm__box::before { top: 10px; width: 42px; height: 4px; background: var(--line) }
  .qm__form, .qm__pane { padding: 16px 18px calc(20px + env(safe-area-inset-bottom)) }
  .qm__tabs { margin: 16px 18px 0 }
  .qm__title { padding-right: 44px } .qm__title b { font-size: 23px }
  .qm__x { width: 38px; height: 38px; right: 14px; top: 16px }
  .qm__row--3 { grid-template-columns: repeat(3, 1fr); gap: 8px } .qm__row--3 .fld input { padding: 20px 10px 7px } .qm__row--3 .fld span { left: 10px; font-size: 12px }
}
/* шторка контактов — компактнее и мягче */
.sheet__box { padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: linear-gradient(180deg, #FFFFFF 0%, var(--bg) 100%) }
.sheet__head { margin-bottom: 10px } .sheet__head b { font-size: 21px } .sheet__head span { font-size: 12.5px }
.sheet__list { gap: 6px }
.sheet__it { padding: 10px 12px; border-radius: 16px; box-shadow: 0 10px 24px -20px rgba(11,31,26,.5) }
.sheet__ic { width: 40px; height: 40px } .sheet__ic .ic { width: 20px; height: 20px }
.sheet__it b { font-size: 14.5px } .sheet__it small { font-size: 11.5px }
.sheet__foot { display: flex; align-items: center; gap: 10px; padding: 12px 4px 2px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute-2) }
.sheet__foot a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; background: #fff } .sheet__foot .ic { width: 16px; height: 16px; color: var(--ink) } .sheet__foot span { margin-left: auto; text-align: right; line-height: 1.4 }
.sheet__box { transition: transform .55s cubic-bezier(.16,1,.3,1) }

.qm__form[hidden], .qm__pane[hidden] { display: none !important }
.qm__tabs { padding-right: 56px; background: transparent; grid-template-columns: auto auto; justify-content: start; gap: 8px }
.qm__tabs .qm__tab-bar { display: none }
.qm__tab { background: var(--bg-2); border: 1px solid transparent; padding: 10px 18px; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease) }
.qm__tab.is-on { background: var(--dark); color: #fff; border-color: var(--dark) } .qm__tab.is-on .ic { color: var(--mint) }
.qm__tab:active { transform: scale(.97) }
@media (min-width: 900px) { .qm__tabs { margin: 0 0 6px; padding-right: 0 } }
@media (min-width: 900px) {
  .qm__box { grid-template-rows: auto 1fr }
  .qm__side { grid-row: 1 / -1; grid-column: 1 }
  .qm__tabs { grid-column: 2; grid-row: 1; margin: 26px 34px 0; padding: 0 }
  .qm__form, .qm__pane { grid-column: 2; grid-row: 2 }
  .qm__pane { padding: 18px 34px 30px }
  .qm__form { padding-top: 12px }
}
@media (max-width: 899px) {
  .hh__act, .sh__act { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap }
  .hh__btn, .sh__btn { padding: 5px 5px 5px 16px; font-size: 13.5px; gap: 8px; border-radius: 999px }
  .hh__btn-arr, .sh__btn .hh__btn-arr { width: 30px; height: 30px } .hh__btn-arr .btn__arr { width: 13px } .hh__btn-arr .btn__arr::before { width: 11px } .hh__btn-arr .btn__arr::after { width: 5px; height: 5px }
  .hh__play, .sh__play { gap: 9px; font-size: 12px } .hh__play-b, .sh__play-b { width: 34px; height: 34px } .hh__play-b::after, .sh__play-b::after { border-left-width: 9px; border-top-width: 5px; border-bottom-width: 5px; margin-left: 3px }
  .sh__cta { padding: 5px 16px 5px 5px; font-size: 13px } .sh__cta-arr { width: 30px; height: 30px }
}

/* ---- премиальный калькулятор */
.qm__calc { gap: 14px }
.calc__top { display: flex; align-items: flex-start; gap: 12px } .calc__top p { font-size: 12.5px; color: var(--mute); line-height: 1.5 }
.calc__badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: #E7F5EE; color: #0F4C3A; font: 700 11px var(--sans); letter-spacing: .08em; white-space: nowrap } .calc__badge .ic { width: 15px; height: 15px }
.calc__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px }
.calc__dims { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg) }
.calc__dims-t { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px }
.calc__dims-row { display: flex; align-items: center; gap: 8px } .calc__dims-row i { color: var(--mute-2); font-style: normal; font-size: 14px }
.calc__dims-row label { position: relative; flex: 1 } .calc__dims-row input { width: 100%; font: 600 17px var(--sans); text-align: center; padding: 12px 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; outline: none; color: var(--ink); transition: border-color .2s, box-shadow .25s }
.calc__dims-row input:focus { border-color: #0F4C3A; box-shadow: 0 0 0 4px rgba(15,76,58,.08) }
.calc__dims-row em { position: absolute; right: 8px; top: 6px; font-style: normal; font-size: 10px; color: var(--mute-2) }
.calc__regs { display: flex; flex-wrap: wrap; gap: 6px }
.calc__reg { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 500 13px var(--sans); color: var(--ink-2); cursor: pointer; transition: all .25s var(--ease) }
.calc__reg:active { transform: scale(.96) } .calc__reg.is-on { background: var(--dark); color: #fff; border-color: var(--dark) }
.calc__out { position: relative; overflow: hidden; padding: 20px; border-radius: 20px; background: radial-gradient(120% 120% at 80% 0%, #14654B 0%, #0B3C2E 45%, #06201A 100%); color: #fff; box-shadow: 0 24px 50px -28px rgba(6,32,26,.9) }
.calc__glow { position: absolute; right: -30px; top: -40px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(143,240,207,.34), transparent 64%); animation: hkz-pulse 5s ease-in-out infinite; pointer-events: none }
.calc__main { position: relative; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap } .calc__main span { width: 100%; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6) }
.calc__main b { font-size: clamp(38px, 9vw, 52px); font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(120deg, #fff, var(--mint)); -webkit-background-clip: text; background-clip: text; color: transparent; transition: opacity .3s }
.calc__main em { font-style: normal; font-size: 16px; color: rgba(255,255,255,.65) }
.calc__rows { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14) }
.calc__rows span { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 3px } .calc__rows b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums }
.calc__scale { position: relative; display: grid; gap: 5px; margin-top: 14px } .calc__scale i { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.18); width: 0; transition: width .7s cubic-bezier(.2,.9,.2,1) } .calc__scale i:last-child { background: linear-gradient(90deg, var(--mint), #3FD2A6) }
.calc__send { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 10px 10px 20px; border: 0; border-radius: 999px; background: #0F4C3A; color: #fff; font: inherit; text-align: left; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s }
.calc__send:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -20px rgba(15,76,58,.7) } .calc__send b { font-size: 15px; font-weight: 600 } .calc__send span { font-size: 11.5px; color: rgba(255,255,255,.65); display: block } .calc__send > b + span { margin-top: 2px } .calc__send .cyc__cta-arr { margin-left: auto; width: 44px; height: 44px }
.calc__send > b { display: block } .calc__send > b, .calc__send > span { flex: none } .calc__send { flex-wrap: wrap } .calc__send > span { width: calc(100% - 60px) }
@media (max-width: 380px) { .calc__grid { grid-template-columns: 1fr } }

/* ---- калькулятор: понятные шаги и подсказки */
.calc__intro { display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(140deg, #E7F5EE, #F2F8F5); border: 1px solid rgba(15,76,58,.12) }
.calc__intro b { font-size: 16px; font-weight: 600; line-height: 1.25 } .calc__intro span { font-size: 13px; color: var(--mute); line-height: 1.5 }
.calc__demo { justify-self: start; margin-top: 4px; padding: 7px 14px; border-radius: 999px; border: 1px dashed rgba(15,76,58,.45); background: #fff; color: #0F4C3A; font: 600 12.5px var(--sans); cursor: pointer; transition: background .25s } .calc__demo:hover { background: #E7F5EE }
.calc__step { position: relative; padding: 14px 16px 14px 52px; border: 1px solid var(--line); border-radius: 16px; background: #fff }
.calc__no { position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--dark); color: #fff; display: grid; place-items: center; font: 700 13px var(--sans) }
.calc__q { display: flex; align-items: center; gap: 8px; margin-bottom: 10px } .calc__q b { font-size: 15.5px; font-weight: 600 }
.calc__hint { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--mute); font: 700 12px var(--sans); cursor: pointer; flex: none; transition: background .25s, color .25s } .calc__hint:hover, .calc__hint.is-on { background: var(--dark); color: #fff; border-color: var(--dark) }
.calc__pair { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px }
.calc__inp { position: relative; display: block } .calc__inp input { width: 100%; font: 600 18px var(--sans); padding: 14px 60px 14px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); outline: none; transition: border-color .2s, box-shadow .25s, background .2s }
.calc__inp input:focus { border-color: #0F4C3A; background: #fff; box-shadow: 0 0 0 4px rgba(15,76,58,.08) }
.calc__inp i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 11.5px; color: var(--mute-2); pointer-events: none; text-align: right; line-height: 1.15; max-width: 62px }
.calc__inp--sm input { padding-right: 52px }
.calc__note { display: block; margin-top: 8px; font-size: 12px; color: var(--mute-2); line-height: 1.45 }
.calc__warn { color: #B3361C; font-weight: 500 } .calc__warn[hidden] { display: none }
.calc__box { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center }
.calc__box-svg { width: 76px; height: auto }
.calc__dims-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: center }
.calc__dims-row .calc__inp input { padding: 12px 8px 26px; text-align: center; font-size: 17px } .calc__dims-row .calc__inp i { top: auto; bottom: 7px; right: 0; left: 0; transform: none; text-align: center; max-width: none; font-size: 10px }
.calc__why { position: relative; margin-top: 10px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.82) } .calc__why b { color: var(--mint) }
.calc__tip { position: fixed; left: 16px; right: 16px; bottom: 96px; z-index: 90; padding: 14px 16px; border-radius: 16px; background: var(--dark); color: #fff; font-size: 13.5px; line-height: 1.5; box-shadow: 0 24px 50px -24px rgba(6,32,26,.8); animation: qz-in .3s var(--ease) } .calc__tip[hidden] { display: none }
@media (min-width: 900px) { .calc__tip { position: absolute; left: 34px; right: 34px; bottom: 24px } }
@media (max-width: 380px) { .calc__box { grid-template-columns: 1fr } .calc__box-svg { display: none } .calc__pair { grid-template-columns: 1fr 1fr } }

/* ---- страница услуги: хиро и премиальные блоки */
.sp { position: relative; min-height: 74svh; display: flex; align-items: flex-end; overflow: hidden; background: #06201A; color: #fff; padding: 120px 0 30px }
.sp__bg { position: absolute; inset: 0 } .sp__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transform: scale(1.08); animation: hh-zoom 20s ease-out forwards }
.sp__bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,18,15,.95) 0%, rgba(4,18,15,.8) 34%, rgba(4,18,15,.35) 62%, rgba(4,18,15,.15) 100%) }
.sp__bg::after { content: ""; position: absolute; inset: auto 0 0; height: 50%; background: linear-gradient(180deg, rgba(4,18,15,0), rgba(4,18,15,.85)) }
.sp__in { position: relative; z-index: 1; display: grid; gap: 26px; width: min(var(--wrap), 100% - var(--pad) * 2) }
.sp__in .crumbs { color: rgba(255,255,255,.55) } .sp__in .crumbs a:hover { color: #fff }
.sp__no { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.6) } .sp__no b { font-family: var(--serif); font-size: 22px; letter-spacing: 0; color: var(--mint) } .sp__no i { flex: 1; max-width: 120px; height: 1px; background: rgba(255,255,255,.3) }
.sp__h { font-weight: 500; font-size: clamp(34px, 5vw, 68px); line-height: 1.02; letter-spacing: -.03em; margin: 12px 0 16px; max-width: 18ch }
.sp__lead { font-size: clamp(15px, 1.25vw, 18.5px); color: rgba(255,255,255,.85); line-height: 1.55; max-width: 52ch }
.sp__act { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 26px }
.sp__tel { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: 15px; font-weight: 500 } .sp__tel .ic { width: 20px; height: 20px; color: var(--mint) } .sp__tel small { display: block; font-size: 11.5px; font-weight: 400; color: rgba(255,255,255,.6) }
.sp__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.sp__fact { padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); opacity: 0; transform: translateY(14px); animation: aib-in .7s var(--ease) forwards; animation-delay: calc(var(--d, 0ms) + .3s) }
.sp__fact b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.1 } .sp__fact span { font-size: 12px; color: rgba(255,255,255,.66); line-height: 1.35; display: block; margin-top: 4px }
@media (max-width: 899px) { .sp { min-height: 0; padding: 100px 0 24px } .sp__bg::before { background: linear-gradient(180deg, rgba(4,18,15,.9) 0%, rgba(4,18,15,.65) 40%, rgba(4,18,15,.85) 100%) } .sp__facts { grid-template-columns: 1fr; gap: 8px } .sp__fact { display: flex; align-items: baseline; gap: 12px; padding: 12px 14px } .sp__fact span { margin: 0 } .sp__h { font-size: clamp(30px, 8.6vw, 42px) } .sp__act { gap: 14px } }
/* «Что входит» — карточки с номерами */
.inc__grid { display: grid; gap: 14px } @media (min-width: 700px) { .inc__grid { grid-template-columns: repeat(2, 1fr) } } @media (min-width: 1100px) { .inc__grid { grid-template-columns: repeat(3, 1fr) } }
.inc__it { position: relative; padding: 26px 24px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s, border-color .3s }
.inc__it::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #0F4C3A, var(--mint)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease) }
.inc__it:hover { transform: translateY(-5px); box-shadow: 0 30px 55px -34px rgba(11,31,26,.45); border-color: rgba(15,76,58,.28) } .inc__it:hover::before { transform: scaleX(1) }
.inc__no { position: absolute; right: 20px; top: 18px; font-family: var(--serif); font-size: 30px; color: rgba(11,31,26,.08); line-height: 1 }
.inc__ic { width: 52px; height: 52px; border-radius: 16px; background: #E7F5EE; display: grid; place-items: center; margin-bottom: 14px; transition: transform .4s var(--ease), background .3s } .inc__ic .ic { width: 24px; height: 24px; color: #0F4C3A } .inc__it:hover .inc__ic { transform: translateY(-3px) rotate(-5deg); background: #D8EFE3 }
.inc__it b { display: block; font-size: 18px; font-weight: 600; margin-bottom: 8px; max-width: 20ch } .inc__it p { color: var(--mute); font-size: 14.5px; line-height: 1.55 }

/* ---- квиз: премиальное интро, сегментный прогресс, эффектные карточки ответов */
.quiz__card { background: radial-gradient(120% 100% at 85% 10%, #14654B 0%, #0B3C2E 42%, #06201A 100%) }
.quiz__h { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 52px); line-height: 1.05; letter-spacing: -.01em; margin-bottom: 14px }
.quiz__start { display: inline-flex; align-items: center; gap: 18px; padding: 8px 8px 8px 26px; border: 0; border-radius: 999px; background: #fff; color: var(--dark); cursor: pointer; font: inherit; transition: transform .3s var(--ease), box-shadow .3s }
.quiz__start:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -24px rgba(0,0,0,.6) }
.quiz__start-t { display: grid; text-align: left } .quiz__start-t b { font-size: 16px; font-weight: 600 } .quiz__start-t em { font-style: normal; font-size: 11.5px; color: var(--mute) }
.quiz__start-arr { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(140deg, var(--mint), #35C79A); display: grid; place-items: center; color: var(--dark) }
.quiz__pre { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px }
.quiz__pre span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-size: 12.5px; color: rgba(255,255,255,.8); opacity: 0; transform: translateY(10px); animation: aib-in .6s var(--ease) forwards; animation-delay: var(--d, 0ms) }
.quiz__pre .ic { width: 15px; height: 15px; color: var(--mint) }
.quiz__orb { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(143,240,207,.5), rgba(143,240,207,.06) 62%); filter: blur(2px); animation: hkz-pulse 5s ease-in-out infinite }
.quiz__intro-art b { position: relative; z-index: 1; background: linear-gradient(120deg, #fff, var(--mint)); -webkit-background-clip: text; background-clip: text; color: transparent }
.quiz__segs { display: flex; gap: 5px; flex: none } .quiz__segs i { width: 18px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.2); transition: background .4s, width .4s var(--ease) } .quiz__segs i.is-on { background: var(--mint); width: 26px }
.quiz__opt { position: relative; overflow: hidden; backdrop-filter: blur(6px) }
.quiz__opt::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120px 120px at var(--mx, 50%) var(--my, 50%), rgba(143,240,207,.18), transparent 70%); opacity: 0; transition: opacity .3s } .quiz__opt:hover::after { opacity: 1 }
.quiz__opt.is-on { box-shadow: 0 16px 34px -18px rgba(143,240,207,.7) }
.quiz__opt.is-on::before { content: ""; position: absolute; right: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--dark); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat, linear-gradient(#000 0 0); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: qz-check .4s var(--ease) }
@keyframes qz-check { from { transform: scale(.4); opacity: 0 } to { transform: none; opacity: 1 } }
.quiz__step h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.8vw, 34px) }
.quiz__res-grid div { transition: transform .4s var(--ease), background .3s } .quiz__res-grid div:hover { transform: translateY(-3px); background: rgba(255,255,255,.1) }
/* ---- отзывы слайдером */
.rev__grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; grid-template-columns: none }
.rev__grid::-webkit-scrollbar { display: none }
.rev__grid > * { scroll-snap-align: start; flex: 0 0 min(88%, 420px) }
.rev__card { min-height: 240px }
.rev__nav { display: flex; align-items: center; gap: 14px; margin-top: 18px }
.rev__arr { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; display: grid; place-items: center; transition: background .25s, transform .25s var(--ease), border-color .25s }
.rev__arr:hover { background: var(--dark); border-color: var(--dark) } .rev__arr:hover i { border-color: #fff }
.rev__arr i { width: 9px; height: 9px; border: solid var(--ink); border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); margin-left: -3px } [data-rev-prev] i { transform: rotate(-135deg); margin: 0 -3px 0 0 }
.rev__dots { display: flex; gap: 6px; margin-right: auto } .rev__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2, #C6D3CE); transition: width .3s, background .3s; cursor: pointer } .rev__dots i.is-on { width: 22px; border-radius: 4px; background: #0F4C3A }
.rev__card--cta { background: radial-gradient(120% 120% at 80% 0%, #14654B, #06201A); border-color: transparent; min-height: 240px; justify-content: center; gap: 10px; position: relative; overflow: hidden }
.rev__card--cta::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(143,240,207,.3), transparent 65%); animation: hkz-pulse 5s ease-in-out infinite }
.rev__card--cta b { position: relative; z-index: 1 } .rev__card--cta > span, .rev__card--cta .btn__arr { position: relative; z-index: 1 }
@media (min-width: 900px) { .rev__grid > * { flex: 0 0 calc((100% - 28px) / 3) } }

/* ---- ИИ-блок: премиальная тёмная карточка */
.aib__card { position: relative; overflow: hidden; border-radius: 30px; padding: clamp(26px, 4vw, 52px); background: radial-gradient(120% 110% at 82% 6%, #14654B 0%, #0B3C2E 44%, #061E19 100%); color: #fff; display: grid; gap: 28px; box-shadow: 0 50px 90px -50px rgba(6,32,26,.8) }
.aib__glow { position: absolute; right: -12%; top: -35%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(143,240,207,.28), transparent 62%); animation: hkz-pulse 6s ease-in-out infinite; pointer-events: none }
.aib__mesh { position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px) 0 0/24px 24px; -webkit-mask: radial-gradient(80% 70% at 20% 10%, #000, transparent 75%); mask: radial-gradient(80% 70% at 20% 10%, #000, transparent 75%); pointer-events: none }
.aib__txt { position: relative; z-index: 1 }
.aib__badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 12px; border-radius: 999px; background: rgba(143,240,207,.12); border: 1px solid rgba(143,240,207,.32); font: 600 12px var(--sans); letter-spacing: .06em; color: var(--mint); margin-bottom: 16px }
.aib__badge em { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(143,240,207,.6); animation: aib-live 2.4s ease-out infinite }
@keyframes aib-live { 0% { box-shadow: 0 0 0 0 rgba(143,240,207,.55) } 70%, 100% { box-shadow: 0 0 0 10px rgba(143,240,207,0) } }
.aib__h { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4.4vw, 56px); line-height: 1.03; letter-spacing: -.015em; margin: 6px 0 14px; background: linear-gradient(115deg, #fff 38%, var(--mint)); -webkit-background-clip: text; background-clip: text; color: transparent }
.aib__p { color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.55; max-width: 46ch }
.aib__act { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px }
.aib__btn { display: inline-flex; align-items: center; gap: 14px; padding: 8px 22px 8px 8px; border: 0; border-radius: 999px; background: #fff; color: var(--dark); font: inherit; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s }
.aib__btn:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -22px rgba(0,0,0,.7) }
.aib__btn b { font-size: 16px; font-weight: 600 } .aib__btn .btn__arr { color: var(--green) }
.aib__btn-av { position: relative; width: 44px; height: 44px; border-radius: 50%; overflow: visible; flex: none } .aib__btn-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover }
.aib__btn-av em { position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #35C79A; border: 2px solid #fff }
.aib__note { font-size: 12.5px; color: rgba(255,255,255,.55) }
.aib__panel { position: relative; z-index: 1; border-radius: 22px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); padding: 16px; display: grid; gap: 12px }
.aib__bar { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1) }
.aib__dots { display: flex; gap: 5px } .aib__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22) }
.aib__ttl { font-size: 13px; font-weight: 600 }
.aib__live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: rgba(255,255,255,.6) } .aib__live em { width: 6px; height: 6px; border-radius: 50%; background: #35C79A; animation: aib-live 2.4s ease-out infinite }
.aib__demo { display: grid; gap: 8px; justify-items: start }
.aib__bub { max-width: 88%; padding: 11px 15px; border-radius: 16px; font-size: 14px; line-height: 1.45 }
.aib__bub--me { justify-self: end; background: var(--mint); color: var(--dark); border-bottom-right-radius: 5px }
.aib__bub--ai { background: rgba(255,255,255,.1); color: #fff; border-bottom-left-radius: 5px }
.aib__type { display: flex; gap: 5px; padding: 2px 0 } .aib__type i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.65); animation: aib-typ 1.3s ease-in-out infinite } .aib__type i:nth-child(2) { animation-delay: .18s } .aib__type i:nth-child(3) { animation-delay: .36s }
@keyframes aib-typ { 0%, 60%, 100% { transform: none; opacity: .45 } 30% { transform: translateY(-4px); opacity: 1 } }
.aib__lbl { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45) }
.aib__qs { display: grid; gap: 8px }
.aib__q { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); font: 500 14.5px var(--sans); color: #fff; text-align: left; cursor: pointer; transition: background .3s, border-color .3s, transform .3s var(--ease) }
.aib__q:hover { background: rgba(255,255,255,.12); border-color: rgba(143,240,207,.5); transform: translateX(5px) }
.aib__q .btn__arr { margin-left: auto; color: var(--mint); flex: none }
@media (min-width: 960px) { .aib__card { grid-template-columns: 1fr minmax(360px, 42%); gap: 54px; align-items: center } }
/* ---- CTA: форма как в модалке + фото-полоса вместо пустоты на мобилке */
.cta2__fhead { display: grid; gap: 5px; margin-bottom: 4px } .cta2__fhead b { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 3vw, 30px) } .cta2__fhead span { color: var(--mute); font-size: 13.5px }
.cta2__form .qm__route { align-items: center } .cta2__form .qm__route .ship__arr { color: var(--green) }
.cta2__ph { display: none }
@media (max-width: 999px) {
  .cta2 { padding-top: 34px }
  .cta2__txt { padding-bottom: 0 }
  .cta2__bg { display: none }
  .cta2__hand { display: none }
  .cta2__in { gap: 20px }
  .cta2__feats { margin-top: 20px; gap: 12px 18px }
  .cta2__ph { display: block; position: relative; margin: 24px calc(var(--pad) * -1) 0; height: 210px; overflow: hidden }
  .cta2__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 62% }
  .cta2__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(234,241,243,.85), rgba(234,241,243,0) 42%, rgba(234,241,243,.35)) }
}
@media (max-width: 599px) { .cta2__txt { padding-bottom: 0 } .cta2__ph { height: 175px } }
/* ---- футер: разработка A-LUX */
.ft2__dev { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.45); transition: color .25s }
.ft2__dev b { font-weight: 600; letter-spacing: .06em; color: rgba(255,255,255,.8); transition: color .25s }
.ft2__dev:hover { color: rgba(255,255,255,.7) } .ft2__dev:hover b { color: var(--mint) }
/* ---- таббар: консультант вместо дубля меню */
.tabbar__it--ai { position: relative }
.tabbar__dot { position: absolute; top: 6px; right: calc(50% - 16px); width: 7px; height: 7px; border-radius: 50%; background: #35C79A; animation: aib-live 2.4s ease-out infinite }

/* ---- CTA: тег на мобилке уводит вёрстку */
@media (max-width: 767px) { .cta2__tag { display: none } .cta2__top { display: block } }
/* ---- «О компании»: мобильная версия по макету — фото фоном, карточки и видео в потоке */
.ah__img--m { display: none }
@media (max-width: 899px) {
  .ah__hero { position: relative; display: grid; gap: 14px; align-items: start; border-radius: 26px; overflow: hidden; padding: 4px 0 16px }
  .ah__media { display: contents }
  .ah__img--d, .ah__dots, .ah__pin, .ah__arc, .ah__glp, .ah__hand, .ah__feats { display: none !important }
  .ah__img--m { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; z-index: 0; border-radius: 26px; transform: none !important; opacity: 0; transition: opacity .8s var(--ease) }
  .ah__hero.in .ah__img--m, .ah__media.in ~ .ah__img--m, .ah__img--m { opacity: 1 }
  .ah__hero::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 26px; background: linear-gradient(180deg, rgba(247,250,250,.97) 0%, rgba(247,250,250,.92) 34%, rgba(247,250,250,.55) 52%, rgba(247,250,250,.12) 66%, rgba(247,250,250,.55) 100%) }
  .ah__txt { position: relative; z-index: 2; padding: 18px 18px 0 }
  .ah__h { font-size: clamp(32px, 9vw, 44px); margin: 4px 0 16px }
  .ah__lead { font-size: 15.5px; margin-bottom: 20px; max-width: 30ch }
  .ah .act { display: grid; gap: 10px; justify-items: stretch }
  .ah .act .btn { width: 100%; justify-content: center; padding: 17px 24px; border-radius: 999px; font-size: 16px }
  .ah .act .btn--ghost { background: #fff; border-color: transparent; box-shadow: 0 14px 30px -20px rgba(11,31,26,.5) }
  .ah__cards { position: relative; z-index: 2; left: auto; top: auto; bottom: auto; width: auto; margin: 0 18px; display: grid; gap: 10px; opacity: 1 }
  .ah__card { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); padding: 15px 16px; font-size: 14px; border-radius: 18px; background: rgba(255,255,255,.82); grid-template-columns: 26px 1fr 18px }
  .ah__hero.in .ah__card, .ah__media.in .ah__card { opacity: 1; transform: none }
  .ah__video { position: relative; z-index: 2; right: auto; bottom: auto; margin: 4px 18px 0; padding: 12px 12px 12px 18px; border-radius: 22px; font-size: 15px }
  .ah__video img { display: block; width: 132px; height: 74px; margin-left: auto }
  .ah__video .play__btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px }
  .ah__video small { right: 16px; bottom: 12px }
  .ah__stats { grid-template-columns: repeat(4, 1fr); gap: 14px 8px; padding: 20px 16px; margin-top: 14px; border-radius: 22px }
  .ah__stats .stat b { font-size: 24px; letter-spacing: -.03em } .ah__stats .stat span { font-size: 10.5px; line-height: 1.25; max-width: none }
  .ah__q { grid-column: 1 / -1; padding: 6px 0 0 26px; font-size: 14.5px } .ah__q i { font-size: 34px }
}
@media (max-width: 400px) { .ah__stats { padding: 18px 12px; gap: 12px 6px } .ah__stats .stat b { font-size: 21px } .ah__stats .stat span { font-size: 9.5px } }

/* ---- отзывы: карточки премиальнее */
.rev__card { min-height: 0; padding: 32px 26px 22px }
.rev__stars--c { color: #F5A623; font-size: 15px; letter-spacing: .12em }
.rev__stars--c i, .rev__stars--big i { font-style: normal; display: inline-block; opacity: 0; transform: scale(.4) rotate(-25deg); transition: opacity .3s var(--sd, 0ms), transform .5s cubic-bezier(.3,1.6,.4,1) var(--sd, 0ms) }
.rev__card.in .rev__stars--c i, .rev__card--cta.in .rev__stars--big i, .in .rev__stars--c i, .in .rev__stars--big i { opacity: 1; transform: none }
.rev__card p { margin-top: 6px; font-size: 17.5px; line-height: 1.55; color: var(--ink) }
.rev__card footer { flex-direction: row; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line) }
.rev__ava { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 600 17px var(--sans); color: #0F4C3A; background: linear-gradient(140deg, #DFF5EB, #C7EEDC) }
.rev__who { display: grid; gap: 1px } .rev__who b { font-size: 14.5px; color: var(--ink) } .rev__who span { font-size: 12.5px; color: var(--mute) }
.rev__ok { margin-left: auto; width: 22px; height: 22px; flex: none; border-radius: 50%; background: #1BA55B; -webkit-mask: none; position: relative }
.rev__ok::after { content: ""; position: absolute; inset: 0; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/13px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/13px no-repeat }
.rev__card--cta { padding: 30px 26px; gap: 12px }
.rev__cta-ic { width: 52px; height: 52px; border-radius: 16px; background: rgba(143,240,207,.14); border: 1px solid rgba(143,240,207,.3); display: grid; place-items: center; position: relative; z-index: 1 } .rev__cta-ic .ic { width: 24px; height: 24px; color: var(--mint) }
.rev__card--cta b { font-size: 26px; line-height: 1.1 }
.rev__cta-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; padding: 11px 10px 11px 20px; border-radius: 999px; background: #fff; color: var(--dark) !important; font: 600 14px var(--sans); transition: transform .3s var(--ease), box-shadow .3s }
.rev__cta-btn .btn__arr { color: var(--green) }
.rev__card--cta:hover .rev__cta-btn { transform: translateY(-2px); box-shadow: 0 18px 34px -18px rgba(0,0,0,.6) }
/* ---- «О компании» мобилка: фото сквозь скрим заметнее */
@media (max-width: 899px) { .ah__hero::before { background: linear-gradient(180deg, rgba(247,250,250,.96) 0%, rgba(247,250,250,.9) 30%, rgba(247,250,250,.42) 48%, rgba(247,250,250,.06) 62%, rgba(247,250,250,.4) 100%) } }

/* ---- «Четыре шага»: премиальная анимация — комета по линии, кольца, вход карточек */
.sb__steps li { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity .7s var(--ease), transform .9s cubic-bezier(.2,.9,.2,1), filter .7s; transition-delay: var(--d, 0ms) }
.sb__steps.in li, .sb__steps li.in { opacity: 1; transform: none; filter: none }
.sb__line i { box-shadow: 0 0 14px rgba(143,240,207,.85) }
.sb__line i::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 18px 5px rgba(143,240,207,.75); left: 50%; bottom: 0; transform: translate(-50%, 50%) }
@media (min-width: 900px) { .sb__line i::after { left: auto; right: 0; top: 50%; bottom: auto; transform: translate(50%, -50%) } }
.sb__dot::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 62%, rgba(143,240,207,.9) 82%, transparent 100%); -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 1.5px), #000 calc(50% - 1.5px)); mask: radial-gradient(circle, transparent 0 calc(50% - 1.5px), #000 calc(50% - 1.5px)); opacity: 0; transition: opacity .5s; animation: sb-spin 4.5s linear infinite }
.sb__steps li.lit .sb__dot::before, .sb__steps li.in .sb__dot::before { opacity: 1 }
@keyframes sb-spin { to { transform: rotate(1turn) } }
.sb__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(143,240,207,.6); opacity: 0 }
.sb__steps li.lit .sb__dot::after { animation: sb-ring 1.5s var(--ease) }
@keyframes sb-ring { 0% { opacity: .9; transform: scale(1) } 100% { opacity: 0; transform: scale(2.1) } }
.sb__steps li.lit .sb__dot .ic { animation: sb-pop .6s cubic-bezier(.3,1.6,.4,1) }
@keyframes sb-pop { 0% { transform: scale(.6) } 60% { transform: scale(1.18) } 100% { transform: none } }
.sb__steps em { transition: color .4s, transform .5s var(--ease) } .sb__steps li.lit em { transform: translateY(-2px) }
.sb__steps li.lit b { color: #fff }
@supports (animation-timeline: view()) { .sb__bg { animation: sb-zoom linear both; animation-timeline: view(); animation-range: entry 0% exit 100% } @keyframes sb-zoom { from { transform: scale(1.14) translateY(-1%) } to { transform: scale(1) translateY(1%) } } }
@media (prefers-reduced-motion: reduce) { .sb__steps li { opacity: 1 !important; transform: none !important; filter: none !important } .sb__dot::before { animation: none } }

/* ---- ГЛАВНАЯ, МОБИЛЬНАЯ ШАПКА: чистая композиция по концепту + кинематографичные слои */
.hh__cine { display: none }
.hh__scroll { display: none; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; font: 500 10.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.62) }
.hh__scroll i { width: 21px; height: 33px; border-radius: 12px; border: 1px solid rgba(255,255,255,.45); position: relative; flex: none }
.hh__scroll i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 6px; border-radius: 2px; background: #fff; transform: translateX(-50%); animation: hh-wheel 2s ease-in-out infinite }
@keyframes hh-wheel { 0% { opacity: 0; transform: translate(-50%, 0) } 22% { opacity: 1 } 70% { opacity: 0; transform: translate(-50%, 12px) } 100% { opacity: 0 } }
@media (max-width: 899px) {
  .hh { min-height: 100svh; padding: 104px 0 calc(86px + env(safe-area-inset-bottom)) }
  .hh__bg img { object-position: 76% 56% }
  .hh__bg::before { background: linear-gradient(180deg, rgba(6,26,40,.5) 0%, rgba(6,26,40,.22) 24%, rgba(4,18,15,.06) 44%, rgba(4,18,15,.3) 66%, rgba(4,18,15,.86) 100%) }
  .hh__bg::after { height: 40% }
  .hh__in { gap: 16px }
  .hh__h { font-size: clamp(34px, 10.4vw, 52px); line-height: 1.02; margin: 10px 0 14px; letter-spacing: -.025em }
  .hh__h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em }
  .hh__lead { font-size: 15.5px; line-height: 1.5; max-width: 32ch; color: rgba(255,255,255,.92) }
  .hh__act { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 24px }
  .hh__btn { padding: 8px 8px 8px 26px; font-size: 16px } .hh__btn-arr { width: 42px; height: 42px }
  .hh__play { gap: 12px; padding: 6px 22px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px) }
  .hh__play-b { width: 42px; height: 42px; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4) } .hh__play-b::after { border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px }
  .hh__pt { display: none }
  .hh__hand { display: block; position: static; margin: 22px 0 0; padding: 0; text-align: left; transform: rotate(-4deg); transform-origin: left center; font-size: 20px; color: rgba(255,255,255,.92) }
  .hh__hand em { display: block; font-style: normal } .hh__hand i { padding: 0 }
  .hh__hand svg { width: 118px; height: 16px; display: block; margin-top: 2px } .hh__hand svg path { fill: none; stroke: var(--mint); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1 }
  .hh.is-in .hh__hand svg path { animation: ah-draw 1.4s 1.9s var(--ease) forwards }
  .hh__bar { margin-top: 16px; padding: 15px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: rgba(255,255,255,.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px) }
  .hh__stats { grid-template-columns: repeat(4, 1fr); gap: 0 }
  .hh__stat { flex-direction: column; align-items: flex-start; gap: 7px; padding: 0 9px; border-right: 1px solid rgba(255,255,255,.14) } .hh__stat:last-child { border-right: 0 }
  .hh__stat .ic { margin: 0; width: 19px; height: 19px; color: rgba(255,255,255,.75) }
  .hh__stat b { font-size: 19px } .hh__stat span { font-size: 9.5px; max-width: none; line-height: 1.25 }
  .hh__scroll { display: flex }
  /* кинематографичные слои */
  .hh__cine { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden }
  .hh__sun { position: absolute; left: 27%; top: 60%; width: 62vw; height: 62vw; margin: -31vw 0 0 -31vw; border-radius: 50%; background: radial-gradient(circle, rgba(255,216,152,.5), rgba(255,176,84,.16) 44%, transparent 70%); mix-blend-mode: screen; animation: hh-sun 9s ease-in-out infinite }
  @keyframes hh-sun { 0%, 100% { opacity: .55; transform: scale(1) } 50% { opacity: .95; transform: scale(1.08) } }
  .hh__path { position: absolute; left: 0; top: 4%; width: 100%; height: 46% }
  .hh__path-l { fill: none; stroke: rgba(255,255,255,.8); stroke-width: .7; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(255,255,255,.7)) }
  .hh.is-in .hh__path-l { animation: hh-draw 3.6s 1s cubic-bezier(.4,0,.2,1) forwards }
  @keyframes hh-draw { to { stroke-dashoffset: 0 } }
  .hh__spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: 0; box-shadow: 0 0 14px 4px rgba(255,255,255,.7) }
  .hh.is-in .hh__spark { animation: hh-spark 4.5s ease-in-out infinite }
  .hh__spark--1 { left: 16%; top: 22%; animation-delay: 2.2s } .hh__spark--2 { left: 52%; top: 9%; animation-delay: 3.1s } .hh__spark--3 { left: 86%; top: 16%; animation-delay: 3.9s }
  @keyframes hh-spark { 0%, 70%, 100% { opacity: 0; transform: scale(.6) } 12% { opacity: .95; transform: scale(1) } 40% { opacity: .25; transform: scale(.8) } }
  .hh__vest { position: absolute; left: 56%; top: 76%; width: 30vw; height: 30vw; margin: -15vw 0 0 -15vw; border-radius: 50%; background: radial-gradient(circle, rgba(143,240,207,.3), transparent 62%); mix-blend-mode: screen; animation: hh-vest 5.5s ease-in-out infinite }
  @keyframes hh-vest { 0%, 100% { opacity: .35 } 50% { opacity: .85 } }
  .hh__bg picture { display: block; position: absolute; inset: 0; opacity: 0; transform: scale(1.1) }
  .hh.is-in .hh__bg picture { animation: hh-enter 2.4s var(--ease) forwards, hh-drift 30s 2.4s ease-in-out infinite alternate }
  @keyframes hh-enter { to { opacity: 1; transform: scale(1) } }
  @keyframes hh-drift { from { transform: scale(1) translate3d(0, 0, 0) } to { transform: scale(1.045) translate3d(-1.2%, -.8%, 0) } }
}
@media (prefers-reduced-motion: reduce) { .hh__cine { display: none !important } .hh__bg picture { opacity: 1 !important; transform: none !important; animation: none !important } }
@media (max-width: 899px) { .hh__in, .hh__txt, .hh__k { min-width: 0; max-width: 100% } .hh__k::after { width: 44px; flex: none } }
@media (max-width: 899px) { .hh__in { grid-template-columns: minmax(0, 1fr) } .hh__txt > * { max-width: 100% } }

/* ---- шапка мобильной главной: компактные кнопки + усиленная кинематика */
@media (max-width: 899px) {
  .hh__act { gap: 10px; margin-top: 20px }
  .hh__btn { padding: 4px 4px 4px 17px; font-size: 13.5px; gap: 10px; border-radius: 999px }
  .hh__btn-arr { width: 30px; height: 30px } .hh__btn-arr .btn__arr { width: 13px }
  .hh__play { gap: 9px; padding: 4px 15px 4px 4px; font-size: 11.5px; line-height: 1.25 }
  .hh__play-b { width: 30px; height: 30px } .hh__play-b::after { border-left-width: 8px; border-top-width: 5px; border-bottom-width: 5px; margin-left: 3px }
  /* световой луч по небу */
  .hh__sweep { position: absolute; top: -20%; left: -60%; width: 60%; height: 150%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.16) 45%, rgba(255,238,205,.22) 55%, transparent); transform: rotate(12deg); mix-blend-mode: screen; opacity: 0 }
  .hh.is-in .hh__sweep { animation: hh-sweep 11s 3s ease-in-out infinite }
  @keyframes hh-sweep { 0% { left: -60%; opacity: 0 } 12% { opacity: .8 } 55% { opacity: .5 } 70%, 100% { left: 120%; opacity: 0 } }
  /* самолёт скользит по дуге маршрута */
  .hh__jet { position: absolute; left: -12%; top: 30%; width: 26px; height: 26px; opacity: 0; background: rgba(255,255,255,.92); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; filter: drop-shadow(0 0 10px rgba(255,255,255,.55)) }
  .hh.is-in .hh__jet { animation: hh-jet 19s 2.4s cubic-bezier(.35,0,.65,1) infinite }
  @keyframes hh-jet {
    0% { left: -12%; top: 34%; opacity: 0; transform: rotate(74deg) scale(.75) }
    8% { opacity: .95 }
    30% { left: 30%; top: 15%; transform: rotate(84deg) scale(.9) }
    55% { left: 58%; top: 8%; transform: rotate(96deg) scale(1) }
    82% { left: 92%; top: 13%; opacity: .8; transform: rotate(104deg) scale(.9) }
    100% { left: 112%; top: 20%; opacity: 0; transform: rotate(108deg) scale(.8) }
  }
}

/* ---- КВИЗ, экраны вопросов: премиальные плитки, подсказки, аккуратный результат */
.quiz__step h3 { margin-bottom: 6px }
.quiz__hint { color: rgba(255,255,255,.58); font-size: 13.5px; line-height: 1.45; max-width: 52ch; margin: 0 0 18px }
.quiz__opts { gap: 12px }
.quiz__opt { flex-direction: row; align-items: center; gap: 13px; min-height: 0; padding: 15px 42px 15px 14px; border-radius: 18px; border-color: rgba(255,255,255,.13); background: linear-gradient(150deg, rgba(255,255,255,.09), rgba(255,255,255,.035)); font-size: 14.5px; font-weight: 500; box-shadow: inset 0 1px 0 rgba(255,255,255,.06) }
.quiz__opt .ic { width: 20px; height: 20px; flex: none; padding: 9px; border-radius: 12px; background: rgba(143,240,207,.12); border: 1px solid rgba(143,240,207,.22); box-sizing: content-box; transition: background .3s, border-color .3s, transform .3s var(--ease) }
.quiz__opt > span { flex: 1; min-width: 0 }
.quiz__opt small { display: block; margin-top: 3px }
.quiz__opt:hover { border-color: rgba(143,240,207,.42) } .quiz__opt:hover .ic { transform: scale(1.06) }
.quiz__opt.is-on { background: linear-gradient(140deg, #A6F5D8, var(--mint) 55%, #5FD9B0); border-color: transparent; font-weight: 600 }
.quiz__opt.is-on .ic { background: rgba(6,32,26,.12); border-color: rgba(6,32,26,.18) }
.quiz__opt.is-on::before { background: rgba(6,32,26,.9); right: 14px; top: 50%; margin-top: -10px }
.quiz__opt--big { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 18px 16px; min-height: 0 }
.quiz__opt--big .ic { margin-bottom: 2px }
.quiz__opt--big.is-on::before { top: 14px; margin-top: 0 }
.quiz__fld { margin-top: 14px; display: block }
.quiz__fld input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff } .quiz__fld input:focus { background: rgba(255,255,255,.1); border-color: var(--mint) }
.quiz__fld span { color: rgba(255,255,255,.5) } .quiz__fld:has(:focus) span, .quiz__fld:has(input:not(:placeholder-shown)) span { color: var(--mint) }
.quiz__range output { background: linear-gradient(120deg, #fff, var(--mint)); -webkit-background-clip: text; background-clip: text; color: transparent }
/* навигация */
.quiz__nav { align-items: center; gap: 14px }
.quiz__nav .btn--light { background: var(--mint); color: var(--dark); border: 0; box-shadow: 0 18px 34px -20px rgba(143,240,207,.9) }
.quiz__nav .btn[disabled] { opacity: 1; background: rgba(255,255,255,.1); color: rgba(255,255,255,.45); box-shadow: none; pointer-events: none }
.quiz__nav .btn[disabled] .btn__arr { color: rgba(255,255,255,.35) }
/* результат */
.quiz__res-grid { grid-template-columns: 1fr 1fr; align-items: start; gap: 12px }
.quiz__rc { display: grid; gap: 6px; padding: 16px !important; border-radius: 18px !important; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.12) !important }
.quiz__rc .ic { width: 20px; height: 20px; color: var(--mint); margin-bottom: 2px }
.quiz__rc span { font-size: 10.5px !important; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5) !important; margin: 0 !important }
.quiz__rc b { font-size: 19px !important; font-weight: 600; line-height: 1.25 }
.quiz__rc--hi { background: linear-gradient(150deg, rgba(143,240,207,.2), rgba(143,240,207,.06)) !important; border-color: rgba(143,240,207,.35) !important }
.quiz__rc--hi b { color: var(--mint) }
.quiz__rc--w { grid-column: 1 / -1 } .quiz__rc--w b { font-size: 14.5px !important; font-weight: 500; line-height: 1.5 }
@media (max-width: 899px) {
  .quiz__card { padding: 24px 18px 22px }
  .quiz__top { flex-wrap: wrap; gap: 10px 14px } .quiz__bar { order: 3; flex-basis: 100% }
  .quiz__opts, .quiz__opts--3, .quiz__opts--4 { grid-template-columns: 1fr 1fr }
  .quiz__opt { padding: 13px 34px 13px 12px; font-size: 13.5px; gap: 10px } .quiz__opt .ic { padding: 7px; width: 18px; height: 18px }
  .quiz__opt--big { grid-column: 1 / -1; flex-direction: row; align-items: center }
  .quiz__opt--big small { margin-left: auto; margin-top: 0; padding-right: 14px }
  .quiz__nav { padding-right: 62px } .quiz__nav .btn { padding: 13px 20px; font-size: 14px }
  .quiz__steps { min-height: 0 }
  .quiz__rc b { font-size: 17px !important }
}

/* ---- «О компании» мобилка: ближе к референсу — компактный текст, фото справа сверху, кнопки по содержимому */
@media (max-width: 899px) {
  .ah__hero { padding: 2px 0 14px }
  .ah__hero::before { background:
      linear-gradient(180deg, rgba(247,250,250,.92) 0%, rgba(247,250,250,.7) 26%, rgba(247,250,250,.34) 46%, rgba(247,250,250,.08) 62%, rgba(247,250,250,.42) 100%),
      linear-gradient(90deg, rgba(247,250,250,.96) 0%, rgba(247,250,250,.86) 38%, rgba(247,250,250,.3) 62%, rgba(247,250,250,.05) 100%) }
  .ah__img--m { object-position: 68% 22% }
  .ah__txt { padding: 16px 16px 0 }
  .ah__h { font-size: clamp(29px, 8.2vw, 40px); line-height: 1.06; margin: 4px 0 12px; letter-spacing: -.03em }
  .ah__lead { font-size: 14.5px; line-height: 1.5; max-width: 26ch; margin-bottom: 16px }
  .ah .act { display: flex; flex-direction: column; align-items: flex-start; gap: 9px }
  .ah .act .btn { width: auto; padding: 13px 20px; font-size: 14.5px; border-radius: 999px }
  .ah .act .btn--ghost { padding-left: 16px }
  .ah__cards { margin: 14px 16px 0; gap: 8px }
  .ah__card { padding: 12px 14px; font-size: 13.5px; border-radius: 16px; grid-template-columns: 22px 1fr 16px; gap: 10px; background: rgba(255,255,255,.88) }
  .ah__card > .ic:first-child { width: 20px; height: 20px }
  .ah__video { margin: 10px 16px 0; padding: 10px 10px 10px 16px; font-size: 14px }
  .ah__video img { width: 116px; height: 66px }
  .ah__video .play__btn { width: 46px; height: 46px }
  .ah__stats { margin-top: 12px }
}

/* ---- фикс: на мобилке .ah__media = display:contents, IntersectionObserver не срабатывал → карточки и видео не появлялись */
@keyframes ah-up { to { opacity: 1; transform: none } }
@media (max-width: 899px) {
  .ah__img--m { opacity: 0; animation: ah-up 1s .1s var(--ease) forwards }
  .ah__card { opacity: 0; transform: translateY(16px); animation: ah-up .75s var(--ease) forwards; animation-delay: calc(var(--d, 0ms) + 250ms); transition: background .3s }
  .ah__video { opacity: 0; transform: translateY(16px); animation: ah-up .75s .95s var(--ease) forwards; transition: none }
  .ah__cards { width: min(78%, 330px) }
}
@media (prefers-reduced-motion: reduce) { .ah__img--m, .ah__card, .ah__video { animation: none !important; opacity: 1 !important; transform: none !important } }

/* ---- квиз: контраст плиток и позиционирование под шапкой */
.quiz, .quiz__card { scroll-margin-top: 96px }
.quiz__opt { background: linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.055)); border-color: rgba(255,255,255,.2); color: #fff }
.quiz__opt .ic { color: #A8F3D8; background: rgba(143,240,207,.2); border-color: rgba(143,240,207,.4) }
.quiz__opt:hover { background: linear-gradient(150deg, rgba(255,255,255,.2), rgba(255,255,255,.09)); border-color: rgba(143,240,207,.55) }
.quiz__opt.is-on .ic { color: #06201A }
.quiz__hint { color: rgba(255,255,255,.66) }
.quiz__fld input { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22) }
.quiz__rc { background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.16) !important }
.quiz__opt.is-on, .quiz__opt.is-on:hover { background: linear-gradient(140deg, #A6F5D8, var(--mint) 55%, #5FD9B0); border-color: transparent; color: var(--dark) }
.quiz__opt.is-on .ic, .quiz__opt.is-on:hover .ic { color: #06201A; background: rgba(6,32,26,.14); border-color: rgba(6,32,26,.2) }
.quiz__opt.is-on::after { opacity: 0 !important }

/* ---- квиз, экран результата: ровная сетка, чипы документов, строка маршрута */
.quiz__route-sum { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 16px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-size: 13px; color: rgba(255,255,255,.86) }
.quiz__route-sum:empty { display: none }
.quiz__res-grid { align-items: stretch; gap: 10px }
.quiz__rc { align-content: start; padding: 15px 16px 16px !important; gap: 5px }
.quiz__rc b { font-size: 17px !important; line-height: 1.3 }
.quiz__rc--hi b { font-size: 22px !important }
.quiz__rc--w { gap: 9px } .quiz__rc--w b { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px !important; font-weight: 500 }
.quiz__doc { font-style: normal; display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 999px; background: rgba(143,240,207,.12); border: 1px solid rgba(143,240,207,.26); color: #CFF7E8; font-size: 12.5px; line-height: 1.2 }
.quiz__res-note { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.55); margin-top: 14px }
@media (max-width: 899px) { .quiz__rc--hi b { font-size: 20px !important } .quiz__rc b { font-size: 15.5px !important } }
.quiz__opt--big small { max-width: 46%; text-align: right; line-height: 1.3 }
@media (max-width: 899px) { .quiz__opt--big small { padding-right: 10px } }

/* ================= АНИМАЦИИ: общая шлифовка ================= */
/* мягкие переходы между страницами (Chrome, Safari 26+) */
@view-transition { navigation: auto }
::view-transition-old(root) { animation: vt-out .28s var(--ease) both }
::view-transition-new(root) { animation: vt-in .42s var(--ease) both }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px) } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px) } }
/* появление блоков — с лёгкой расфокусировкой */
.reveal { filter: blur(7px); transition: opacity .8s var(--ease), transform .9s cubic-bezier(.2,.9,.2,1), filter .8s var(--ease); transition-delay: var(--d, 0ms) }
.reveal.in { filter: none }
/* заголовки разделов — подчёркивание рисуется */
.sec-h h2::after, .h2.serif::after { content: none }
/* хиро страницы услуги */
.sp__bg { transform: scale(1.1); opacity: 0; animation: sp-bg 1.6s .1s var(--ease) forwards }
@keyframes sp-bg { to { transform: scale(1); opacity: 1 } }
.sp__num, .sp__h, .sp__lead, .sp__act, .sp__facts { opacity: 0; transform: translateY(18px); animation: sp-up .8s var(--ease) forwards }
.sp__num { animation-delay: .35s } .sp__h { animation-delay: .45s } .sp__lead { animation-delay: .6s } .sp__act { animation-delay: .72s } .sp__facts { animation-delay: .85s }
@keyframes sp-up { to { opacity: 1; transform: none } }
/* карточки «что входит» — каскадом */
.inc__grid > * { opacity: 0; transform: translateY(22px) scale(.985); transition: opacity .7s var(--ease), transform .8s cubic-bezier(.2,.9,.2,1); transition-delay: calc(var(--i, 0) * 80ms) }
.inc__grid.in > *, .reveal.in .inc__grid > *, .in > .inc__grid > * { opacity: 1; transform: none }
/* первый экран «Услуги» — фото приближается, текст следом */
.sh__pic { overflow: hidden } .sh__pic img, .sh__pic > picture { animation: sp-bg 1.8s .05s var(--ease) both }
/* мягкий подъём карточек-ссылок по всему сайту */
.svc__it, .art__card, .ship__card, .pb__it { transition: transform .45s cubic-bezier(.2,.9,.2,1), box-shadow .45s, border-color .3s }
.svc__it:hover, .art__card:hover, .ship__card:hover { transform: translateY(-6px) }
/* линия под активным пунктом меню плавнее */
.nav--pill a { transition: color .3s, background .3s }
@media (prefers-reduced-motion: reduce) {
  .reveal { filter: none !important }
  .sp__bg, .sp__num, .sp__h, .sp__lead, .sp__act, .sp__facts, .sh__pic img, .sh__pic > picture { animation: none !important; opacity: 1 !important; transform: none !important }
  .inc__grid > * { opacity: 1 !important; transform: none !important }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important }
}

/* ---- хиро страницы услуги: контраст текста поверх светлых фото */
.sp__bg::before { background: linear-gradient(90deg, rgba(4,18,15,.96) 0%, rgba(4,18,15,.88) 38%, rgba(4,18,15,.6) 66%, rgba(4,18,15,.42) 100%) }
.sp__bg::after { height: 70%; background: linear-gradient(180deg, rgba(4,18,15,0), rgba(4,18,15,.6) 45%, rgba(4,18,15,.92)) }
.sp__h { text-shadow: 0 2px 24px rgba(4,18,15,.55) } .sp__lead { color: rgba(255,255,255,.9); text-shadow: 0 1px 14px rgba(4,18,15,.5) }
.sp__fact { background: rgba(6,32,26,.55); border-color: rgba(255,255,255,.14) }
@media (max-width: 899px) {
  .sp { padding: 96px 0 26px }
  .sp__bg::before { background: linear-gradient(180deg, rgba(4,18,15,.94) 0%, rgba(4,18,15,.82) 32%, rgba(4,18,15,.72) 58%, rgba(4,18,15,.9) 100%) }
  .sp__bg::after { height: 55% }
  .sp__fact { display: grid; gap: 3px; padding: 13px 15px; background: rgba(6,32,26,.62) }
  .sp__fact b { font-size: 21px } .sp__fact span { font-size: 12px; margin: 0 }
  .sp__h { font-size: clamp(28px, 8vw, 40px); max-width: 14ch }
  .sp__lead { font-size: 14.5px; max-width: 34ch }
}
.sp__bg img { filter: brightness(.66) saturate(1.06) }
@media (max-width: 899px) { .sp__bg img { filter: brightness(.58) saturate(1.05) } .sp__bg::before { background: linear-gradient(180deg, rgba(4,18,15,.9) 0%, rgba(4,18,15,.72) 34%, rgba(4,18,15,.68) 58%, rgba(4,18,15,.92) 100%) } }
.sp__in .crumbs { color: rgba(255,255,255,.72); text-shadow: 0 1px 10px rgba(4,18,15,.6) }
@media (max-width: 899px) { .sp__bg::before { background: linear-gradient(180deg, rgba(4,18,15,.94) 0%, rgba(4,18,15,.78) 30%, rgba(4,18,15,.7) 56%, rgba(4,18,15,.93) 100%) } }

/* заголовки разделов — появление словами */
.words span { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(1.5deg); transition: opacity .6s var(--ease), transform .75s cubic-bezier(.2,.9,.2,1); transition-delay: var(--wd, 0ms) }
.words.words-in span { opacity: 1; transform: none }
/* фото в карточках слегка приближается при наведении */
.art__img img, .svc__pic img, .ship__pic img { transition: transform .7s cubic-bezier(.2,.9,.2,1) }
.art__card:hover .art__img img, .svc__it:hover .svc__pic img, .ship__card:hover .ship__pic img { transform: scale(1.05) }
@media (prefers-reduced-motion: reduce) { .words span { opacity: 1 !important; transform: none !important } }

/* ---- логотипы партнёров сразу в цвете (Иван, 09.09) */
.ah__pt-it, .pb__lanes .pb__it, .ah__partners span, .ah__partners span img { filter: none; opacity: 1 }
.ah__pt-it:hover, .pb__lanes .pb__it:hover { filter: none; opacity: 1 }

/* ---- всплывающая заявка: иконки в полях, инфографика доверия, премиальная кнопка */
.qm__trust { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 4px }
.qm__trust span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--bg-2, #EEF4F3); border: 1px solid var(--line); font-size: 12px; color: var(--ink-2) }
.qm__trust .ic { width: 15px; height: 15px; color: var(--green) }
.fld--ic { position: relative }
.fld--ic > .ic { position: absolute; left: 15px; top: 17px; width: 18px; height: 18px; color: var(--green); opacity: .55; pointer-events: none; transition: opacity .25s, transform .3s var(--ease); z-index: 1 }
.fld--ic:focus-within > .ic { opacity: 1; transform: scale(1.08) }
.fld--ic input, .fld--ic textarea { padding-left: 46px }
.fld--ic > span { left: 46px }
.fld--area.fld--ic > .ic { top: 16px }
.qm__route--v2 { grid-template-columns: 1fr 42px 1fr; gap: 6px }
.qm__route-mid { position: relative; height: 100%; min-height: 54px; display: block }
.qm__route-mid i { position: absolute; left: 4px; right: 4px; top: 50%; height: 1px; background: repeating-linear-gradient(90deg, var(--line-2, #C6D3CE) 0 5px, transparent 5px 10px) }
.qm__route-mid em { position: absolute; top: 50%; left: 2px; width: 15px; height: 15px; margin-top: -7.5px; background: var(--green); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/contain no-repeat; transform: rotate(90deg); animation: qm-fly 3.6s ease-in-out infinite }
@keyframes qm-fly { 0%, 100% { left: 2px; opacity: .35 } 45% { opacity: 1 } 70%, 100% { left: 24px; opacity: 0 } }
.qm__send { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; margin-top: 6px; padding: 8px 8px 8px 26px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #0F4C3A, #07271E); color: #fff; font: inherit; cursor: pointer; box-shadow: 0 22px 40px -24px rgba(15,76,58,.9); transition: transform .3s var(--ease), box-shadow .3s }
.qm__send:hover { transform: translateY(-2px); box-shadow: 0 28px 50px -24px rgba(15,76,58,1) }
.qm__send b { font-size: 16px; font-weight: 600 }
.qm__send-arr { width: 46px; height: 46px; border-radius: 50%; background: var(--mint); color: var(--dark); display: grid; place-items: center; flex: none; transition: transform .35s var(--ease) }
.qm__send:hover .qm__send-arr { transform: translateX(3px) }
.qm__foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mute); margin-top: -2px }
.qm__foot .ic { width: 14px; height: 14px; color: var(--green) }
.qm__form .qform__consent { font-size: 12.5px }
@media (max-width: 560px) { .qm__route--v2 { grid-template-columns: 1fr; gap: 10px } .qm__route-mid { min-height: 0; height: 18px } .qm__route-mid i { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: 100%; background: repeating-linear-gradient(180deg, var(--line-2, #C6D3CE) 0 5px, transparent 5px 10px) } .qm__route-mid em { left: 50%; margin-left: -7.5px; top: 0; margin-top: 0; transform: rotate(180deg); animation: qm-fly-v 3.6s ease-in-out infinite } @keyframes qm-fly-v { 0%, 100% { top: 0; opacity: .35 } 45% { opacity: 1 } 70%, 100% { top: 12px; opacity: 0 } } }

/* ---- форма на странице: та же премиальная подача, кнопка в одну строку, подпись под ней */
.cta2__form .fld input, .cta2__form .fld textarea { background: #fff; border-color: var(--line) }
.cta2__form .fld--ic > .ic { opacity: .5 }
.cta2__btn { display: inline-flex; align-items: center; gap: 14px; width: auto; padding: 7px 7px 7px 24px; animation: none }
.cta2__btn b { font-size: 15.5px; font-weight: 600; white-space: nowrap }
.cta2__btn-arr { width: 40px; height: 40px; border-radius: 50%; background: var(--mint); color: var(--dark); display: grid; place-items: center; flex: none; transition: transform .35s var(--ease) }
.cta2__btn:hover .cta2__btn-arr { transform: translateX(3px) }
.cta2__note { display: flex; align-items: center; gap: 8px; margin-top: -2px; font-size: 12.5px; color: var(--mute) }
.cta2__note .ic { width: 15px; height: 15px; color: var(--green); flex: none }
.cta2__form .qm__route-mid i { background: repeating-linear-gradient(90deg, #C6D3CE 0 5px, transparent 5px 10px) }
/* ---- «Ваш груз — в любой точке мира»: максимум две строки на мобильном */
@media (max-width: 899px) { .netb__h { max-width: none; font-size: clamp(23px, 6.4vw, 32px); line-height: 1.08; letter-spacing: -.035em } }
@media (max-width: 380px) { .netb__h { font-size: 22px } }

/* ---- квиз, итоговый экран: светлая читаемая карточка вместо тёмного на тёмном */
.quiz__result .quiz__res-l { background: #fff; border-radius: 26px; padding: clamp(20px, 3vw, 30px); color: var(--ink); box-shadow: 0 30px 60px -40px rgba(0,0,0,.6) }
.quiz__result .quiz__res-l .kicker { color: var(--green) } .quiz__result .quiz__res-l .kicker::after { background: rgba(15,76,58,.3) }
.quiz__result .quiz__route-sum { background: var(--bg-2, #EEF4F3); border-color: var(--line); color: var(--ink-2); font-weight: 500 }
.quiz__result .quiz__rc { background: var(--bg, #F5F8F9) !important; border-color: var(--line) !important }
.quiz__result .quiz__rc .ic { color: var(--green) }
.quiz__result .quiz__rc span { color: var(--mute) !important }
.quiz__result .quiz__rc b { color: var(--ink) }
.quiz__result .quiz__rc--hi { background: linear-gradient(150deg, #DFF5EB, #EAF7F1) !important; border-color: rgba(15,76,58,.22) !important }
.quiz__result .quiz__rc--hi b { color: #0F4C3A }
.quiz__result .quiz__doc { background: rgba(15,76,58,.08); border-color: rgba(15,76,58,.18); color: #0F4C3A }
.quiz__result .quiz__res-note { color: var(--mute); border-top: 1px solid var(--line); padding-top: 12px }
.quiz__result .quiz__form { background: #fff }
@media (min-width: 900px) { .quiz__result .quiz__res { align-items: start } }

/* ---- карта партнёров: масштаб к региону, читаемые подписи, эффектное перерисовывание */
.wmap__svg { --mk: 1 }
.wmap__pins .pin text { font-size: calc(15px / var(--mk, 1)); stroke-width: calc(5px / var(--mk, 1)) }
.wmap__pins .pin.hub text { font-size: calc(18px / var(--mk, 1)) }
.wmap__pins .pin circle.c { r: calc(5px / var(--mk, 1)) }
.wmap__pins .pin.hub circle.c { r: calc(8px / var(--mk, 1)) }
.wmap__pins .pin.hub circle.p { r: calc(10px / var(--mk, 1)) }
.wmap__arcs path { stroke-width: calc(2px / var(--mk, 1)); stroke-dasharray: calc(6px / var(--mk, 1)) calc(8px / var(--mk, 1)) }
.wmap.has-sel .wmap__arcs path.is-on { stroke-width: calc(3.2px / var(--mk, 1)) }
.wmap__mask path { stroke-width: calc(10px / var(--mk, 1)) }
.wmap__pins .pin.pop circle.c { animation: wm-pop .7s cubic-bezier(.3,1.6,.4,1) var(--pd, 0ms) both }
@keyframes wm-pop { 0% { transform: scale(.2) } 60% { transform: scale(1.45) } 100% { transform: scale(1) } }
.wmap__pins .pin { transition: opacity .5s var(--ease) }
.wmap.has-region .wmap__pins .pin.in-region text { opacity: 1 }
@media (max-width: 899px) {
  .wmap__pins .pin text { font-size: calc(21px / var(--mk, 1)); stroke-width: calc(6px / var(--mk, 1)) }
  .wmap__pins .pin.hub text { font-size: calc(25px / var(--mk, 1)) }
  .wmap__pins .pin circle.c { r: calc(7px / var(--mk, 1)) }
  .wmap__pins .pin.hub circle.c { r: calc(10px / var(--mk, 1)) }
}
.wmap__stage { overflow: hidden; border-radius: 16px }
.wmap__svg { overflow: hidden }

/* ================= АГЕНТАМ — отдельный лендинг ================= */
.agh { position: relative; overflow: hidden; background: #06201A; color: #fff; padding: 130px 0 clamp(40px, 6vw, 72px) }
.agh__bg { position: absolute; inset: 0 } .agh__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 42%; filter: brightness(.5) }
.agh__bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,18,15,.97) 0%, rgba(4,18,15,.86) 42%, rgba(4,18,15,.5) 72%, rgba(4,18,15,.4) 100%) }
.agh__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 22%, rgba(143,240,207,.18), transparent 46%) }
.agh__in { position: relative; z-index: 1 } .agh .crumbs { color: rgba(255,255,255,.6); margin-bottom: 26px } .agh .crumbs a:hover { color: #fff }
.agh__h { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5.4vw, 74px); line-height: 1.02; letter-spacing: -.02em; margin: 10px 0 18px; max-width: 16ch }
.agh__lead { font-size: clamp(15px, 1.3vw, 18.5px); line-height: 1.6; color: rgba(255,255,255,.82); max-width: 56ch }
.agh__act { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 28px }
.agh__wa { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 15px; font-weight: 500 } .agh__wa .ic { width: 20px; height: 20px; color: var(--mint) }
.agh__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 40px; max-width: 720px }
.agh__facts > div { padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); opacity: 0; transform: translateY(16px); animation: sp-up .8s var(--ease) forwards; animation-delay: calc(var(--d, 0ms) + .35s) }
.agh__facts .ic { width: 20px; height: 20px; color: var(--mint); margin-bottom: 8px } .agh__facts b { display: block; font-size: 19px; font-weight: 600 } .agh__facts span { font-size: 12.5px; color: rgba(255,255,255,.62); line-height: 1.35 }
/* вы / мы */
.agsp { padding: clamp(46px, 7vw, 90px) 0 0 }
.agsp__grid { display: grid; gap: 14px; align-items: stretch; margin-top: 26px }
.agsp__col { position: relative; padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: #fff; border: 1px solid var(--line) }
.agsp__col--we { background: radial-gradient(120% 120% at 85% 0%, #14654B, #06201A); border-color: transparent; color: #fff }
.agsp__tag { display: inline-flex; padding: 7px 16px; border-radius: 999px; background: var(--bg-2, #EEF4F3); font: 600 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--green) }
.agsp__tag--dark { background: rgba(143,240,207,.16); color: var(--mint) }
.agsp__col ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px }
.agsp__col li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; opacity: 0; transform: translateX(-10px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms) }
.reveal.in li, .agsp__col.in li { opacity: 1; transform: none }
.agsp__col li i { width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 50%; background: rgba(15,76,58,.1); position: relative }
.agsp__col li i::after { content: ""; position: absolute; inset: 0; background: var(--green); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat }
.agsp__col--we li i { background: rgba(143,240,207,.16) } .agsp__col--we li i::after { background: var(--mint) }
.agsp__note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mute) }
.agsp__note--dark { border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.6) }
.agsp__vs { display: none }
@media (min-width: 900px) { .agsp__grid { grid-template-columns: 1fr 74px 1.15fr } .agsp__vs { display: grid; place-items: center; gap: 10px; align-content: center } .agsp__vs i { width: 1px; flex: 1; height: 60px; background: linear-gradient(180deg, transparent, var(--line-2, #C6D3CE), transparent) } .agsp__vs em { font: 600 9.5px var(--sans); letter-spacing: .18em; color: var(--mute-2); writing-mode: vertical-rl; font-style: normal } }
/* кого рекомендовать */
.agwho { padding: clamp(46px, 7vw, 90px) 0 0 }
.agwho__grid { display: grid; gap: 14px; margin-top: 26px }
.agwho__it { position: relative; padding: clamp(22px, 3vw, 30px); border-radius: 24px; background: var(--bg-2, #EEF4F3); border: 1px solid transparent; overflow: hidden; transition: transform .45s var(--ease), background .35s, border-color .35s }
.agwho__it:hover { transform: translateY(-5px); background: #fff; border-color: var(--line) }
.agwho__n { position: absolute; right: 20px; top: 16px; font-family: var(--serif); font-size: 34px; color: rgba(15,76,58,.12) }
.agwho__it .ic { width: 26px; height: 26px; color: var(--green); margin-bottom: 14px }
.agwho__it b { display: block; font-size: 18px; margin-bottom: 8px } .agwho__it p { color: var(--ink-2); font-size: 14.5px; line-height: 1.5 }
@media (min-width: 700px) { .agwho__grid { grid-template-columns: 1fr 1fr } }
@media (min-width: 1100px) { .agwho__grid { grid-template-columns: repeat(4, 1fr) } }
/* путь вознаграждения */
.agpath { margin: clamp(46px, 7vw, 90px) 0 0; padding: clamp(34px, 5vw, 64px) 0; background: radial-gradient(120% 90% at 85% 0%, #14654B 0%, #0B3C2E 45%, #06201A 100%); color: #fff }
.agpath .kicker--light { color: var(--mint) } .agpath .h2 { color: #fff }
.agpath__list { position: relative; list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px }
.agpath__list li { position: relative; z-index: 1; display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: start }
.agpath__n { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 600 17px var(--sans); color: var(--dark); background: linear-gradient(140deg, #A6F5D8, var(--mint)); box-shadow: 0 0 0 6px rgba(143,240,207,.1) }
.agpath__list b { display: block; font-size: 18px; margin-bottom: 5px } .agpath__list p { color: rgba(255,255,255,.72); font-size: 14.5px; line-height: 1.5; max-width: 62ch }
.agpath__line { position: absolute; left: 23px; top: 24px; bottom: 24px; width: 1px; background: rgba(255,255,255,.16) }
.agpath__line i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--mint); box-shadow: 0 0 12px rgba(143,240,207,.8); transition: height 2.4s cubic-bezier(.4,0,.2,1) .3s }
.agpath__list.in .agpath__line i, .reveal.in ~ .agpath__line i { height: 100% }
@media (min-width: 900px) { .agpath__list { grid-template-columns: repeat(5, 1fr); gap: 24px } .agpath__list li { grid-template-columns: 1fr; gap: 14px } .agpath__line { left: 24px; right: 24px; top: 23px; bottom: auto; width: auto; height: 1px } .agpath__line i { width: 0; height: 100%; transition: width 2.4s cubic-bezier(.4,0,.2,1) .3s } .agpath__list.in .agpath__line i { width: 100% } }
/* условия */
.agterms { padding: clamp(46px, 7vw, 90px) 0 0 }
.agterms__grid { display: grid; gap: 14px; margin-top: 26px }
.agterms__it { padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s }
.agterms__it:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -30px rgba(11,31,26,.45) }
.agterms__ic { width: 46px; height: 46px; border-radius: 14px; background: rgba(15,76,58,.08); display: grid; place-items: center; margin-bottom: 14px } .agterms__ic .ic { width: 22px; height: 22px; color: var(--green) }
.agterms__it b { display: block; font-size: 17px; margin-bottom: 7px } .agterms__it p { color: var(--ink-2); font-size: 14.5px; line-height: 1.5 }
@media (min-width: 700px) { .agterms__grid { grid-template-columns: 1fr 1fr } }
@media (min-width: 1100px) { .agterms__grid { grid-template-columns: repeat(3, 1fr) } }
/* форма агента */
.agform { padding: clamp(46px, 7vw, 90px) 0 clamp(30px, 5vw, 60px) }
.agform__card { display: grid; gap: 26px; padding: clamp(24px, 4vw, 46px); border-radius: 30px; background: radial-gradient(120% 110% at 12% 0%, #14654B 0%, #0B3C2E 44%, #06201A 100%); color: #fff; box-shadow: 0 50px 90px -50px rgba(6,32,26,.8) }
.agform__h { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 3.4vw, 44px); line-height: 1.06; margin: 8px 0 14px }
.agform__txt p { color: rgba(255,255,255,.75); font-size: 15.5px; line-height: 1.55; max-width: 46ch }
.agform__tel { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; color: #fff } .agform__tel .ic { width: 20px; height: 20px; color: var(--mint) } .agform__tel b { font-size: 18px } .agform__tel small { display: block; font-size: 12px; color: rgba(255,255,255,.55) }
.agform__f { display: grid; gap: 12px; padding: clamp(20px, 3vw, 28px); border-radius: 24px; background: #fff; color: var(--ink) }
@media (min-width: 900px) { .agform__card { grid-template-columns: 1fr minmax(360px, 46%); gap: 46px; align-items: center } }
@media (max-width: 899px) {
  .agh { padding: 104px 0 34px } .agh__h { font-size: clamp(30px, 8.6vw, 44px); max-width: none }
  .agh__lead { font-size: 15px } .agh__act { gap: 14px } .agh .act .btn, .agh__act .btn { width: 100%; justify-content: center }
  .agh__facts { grid-template-columns: 1fr; gap: 8px; margin-top: 28px } .agh__facts > div { display: flex; align-items: center; gap: 12px; padding: 12px 14px } .agh__facts .ic { margin: 0 } .agh__facts b { font-size: 16px } .agh__facts span { margin-left: auto; text-align: right }
  .agpath__list p { font-size: 14px }
}

/* ================= КОНТАКТЫ ================= */
.cth { padding: 20px 0 0 }
.cth__top { display: grid; gap: 22px; align-items: end; margin-bottom: 26px }
.cth__h { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -.015em; margin: 8px 0 14px; max-width: 20ch }
.cth__lead { color: var(--ink-2); font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.55; max-width: 58ch }
.cth__now { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 20px; background: var(--bg-2, #EEF4F3); border: 1px solid var(--line) }
.cth__dot { width: 10px; height: 10px; border-radius: 50%; background: #35C79A; box-shadow: 0 0 0 0 rgba(53,199,154,.5); animation: aib-live 2.4s ease-out infinite; flex: none }
.cth__now b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.1 } .cth__now small { font-size: 11.5px; color: var(--mute) }
.cth__hours { margin-left: auto; font-size: 13px; color: var(--ink-2); text-align: right; max-width: 16ch }
.cth__ways { display: grid; gap: 12px }
.ctw { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; background: #fff; border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s, border-color .3s }
.ctw:hover { transform: translateY(-4px); border-color: rgba(15,76,58,.35); box-shadow: 0 26px 44px -30px rgba(11,31,26,.5) }
.ctw__ic { width: 48px; height: 48px; border-radius: 15px; background: rgba(15,76,58,.08); display: grid; place-items: center; flex: none } .ctw__ic .ic { width: 22px; height: 22px; color: var(--green) }
.ctw__t { display: grid; gap: 2px; min-width: 0 } .ctw__t small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute) }
.ctw__t b { font-size: 17px; overflow: hidden; text-overflow: ellipsis } .ctw__t em { font-style: normal; font-size: 12.5px; color: var(--mute) }
.ctw .btn__arr { margin-left: auto; color: var(--green); flex: none }
@media (min-width: 700px) { .cth__ways { grid-template-columns: 1fr 1fr } }
@media (min-width: 1100px) { .cth__top { grid-template-columns: 1fr auto } .cth__ways { grid-template-columns: repeat(4, 1fr) } .ctw { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px } .ctw .btn__arr { margin: 0 } }
.ctm { padding: clamp(30px, 4vw, 54px) 0 clamp(40px, 6vw, 80px) }
.ctm__grid { display: grid; gap: 16px }
.ctm__map { position: relative }
.ctm__frame { position: relative; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2, #EEF4F3); aspect-ratio: 4/3; box-shadow: 0 40px 70px -50px rgba(11,31,26,.6) }
.ctm__frame iframe { width: 100%; height: 100%; display: block; border: 0; filter: saturate(.92) }
.ctm__addr { display: flex; align-items: center; gap: 14px; margin: -46px 16px 0; position: relative; z-index: 1; padding: 16px 18px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 26px 50px -32px rgba(11,31,26,.55) }
.ctm__pin { width: 44px; height: 44px; border-radius: 50%; background: #0F4C3A; display: grid; place-items: center; flex: none } .ctm__pin .ic { width: 20px; height: 20px; color: var(--mint) }
.ctm__addr small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute) }
.ctm__addr b { display: block; font-size: 16px; line-height: 1.3; margin: 2px 0 } .ctm__addr > div > span { font-size: 12.5px; color: var(--mute) }
.ctm__go { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--green); flex: none }
.ctm__side { display: grid; gap: 14px; align-content: start }
.ctf { display: grid; gap: 12px; padding: clamp(20px, 3vw, 28px); border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -45px rgba(11,31,26,.5) }
.ctf__head { display: grid; gap: 3px; margin-bottom: 2px } .ctf__head b { font-family: var(--serif); font-weight: 400; font-size: 26px } .ctf__head span { font-size: 13px; color: var(--mute) }
.ctcalc { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; padding: 20px; border-radius: 22px; background: radial-gradient(120% 120% at 90% 0%, #14654B, #06201A); color: #fff }
.ctcalc__ic { width: 46px; height: 46px; border-radius: 14px; background: rgba(143,240,207,.14); border: 1px solid rgba(143,240,207,.28); display: grid; place-items: center } .ctcalc__ic .ic { width: 22px; height: 22px; color: var(--mint) }
.ctcalc b { display: block; font-size: 16px; margin-bottom: 5px } .ctcalc p { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.72) }
.ctcalc .btn { grid-column: 1 / -1; justify-content: center; background: #fff; color: var(--dark); border: 0 } .ctcalc .btn .btn__arr { color: var(--green) }
.ctleg { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--mute); padding: 0 4px } .ctleg .ic { width: 15px; height: 15px; color: var(--green); flex: none }
@media (min-width: 1000px) { .ctm__grid { grid-template-columns: 1.15fr minmax(380px, 44%); gap: 26px } .ctm__frame { aspect-ratio: auto; height: 100% ; min-height: 520px } .ctm__addr { margin: -70px 26px 0 } }
@media (max-width: 599px) { .ctm__addr { flex-wrap: wrap; margin: -36px 10px 0 } .ctm__go { margin-left: 58px } .cth__now { flex-wrap: wrap } .cth__hours { margin-left: 0; text-align: left; max-width: none } }
.ctm__frame iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important }

/* ================= ПЕРЕВОЗКИ ================= */
.shh { position: relative; overflow: hidden; background: #06201A; color: #fff; padding: 128px 0 clamp(36px, 5vw, 64px) }
.shh__bg { position: absolute; inset: 0 } .shh__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; filter: brightness(.52); animation: sp-bg 1.8s .05s var(--ease) both }
.shh__bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,18,15,.96) 0%, rgba(4,18,15,.86) 40%, rgba(4,18,15,.5) 74%, rgba(4,18,15,.4) 100%) }
.shh__bg::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(180deg, rgba(4,18,15,0), rgba(4,18,15,.9)) }
.shh__in { position: relative; z-index: 1 } .shh .crumbs { color: rgba(255,255,255,.6); margin-bottom: 24px } .shh .crumbs a:hover { color: #fff }
.shh__h { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 5vw, 68px); line-height: 1.03; letter-spacing: -.02em; margin: 10px 0 16px; max-width: 18ch }
.shh__lead { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; color: rgba(255,255,255,.82); max-width: 60ch }
.shh__act { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 26px }
.shh__wa { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 500 } .shh__wa .ic { width: 20px; height: 20px; color: var(--mint) }
.shh__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 34px }
.shh__facts > div { padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); opacity: 0; transform: translateY(16px); animation: sp-up .8s var(--ease) forwards; animation-delay: calc(var(--d, 0ms) + .35s) }
.shh__facts b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.1 }
.shh__facts span { display: block; margin-top: 5px; font-size: 12.5px; color: rgba(255,255,255,.62); line-height: 1.35 }
.shl { padding: clamp(26px, 4vw, 44px) 0 0 }
.shl__bar { position: relative; margin-bottom: 22px; padding: 14px; border-radius: 22px; background: var(--bg-2, #EEF4F3); border: 1px solid var(--line) }
.shl .filters { display: grid; gap: 12px; margin: 0 }
.filters__scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px }
.filters__scroll::-webkit-scrollbar { display: none } .filters__scroll .chip { flex: none }
.filters__sels { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.filters__n { margin-left: auto; font-size: 13px; color: var(--mute) } .filters__n b { color: var(--ink); font-size: 15px }
.shl__empty { padding: 30px 0; color: var(--mute) }
.shr { padding: clamp(40px, 6vw, 80px) 0 0 }
.shr__grid { display: grid; gap: 14px; margin-top: 26px }
.shr__it { position: relative; padding: clamp(22px, 3vw, 30px); border-radius: 24px; background: #fff; border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow .45s }
.shr__it:hover { transform: translateY(-5px); box-shadow: 0 30px 50px -34px rgba(11,31,26,.45) }
.shr__n { position: absolute; right: 22px; top: 18px; font-family: var(--serif); font-size: 32px; color: rgba(15,76,58,.12) }
.shr__ic { width: 48px; height: 48px; border-radius: 15px; background: rgba(15,76,58,.08); display: grid; place-items: center; margin-bottom: 14px } .shr__ic .ic { width: 22px; height: 22px; color: var(--green) }
.shr__it b { display: block; font-size: 18px; margin-bottom: 8px } .shr__it p { color: var(--ink-2); font-size: 14.5px; line-height: 1.55 }
@media (min-width: 900px) { .shr__grid { grid-template-columns: repeat(3, 1fr) } .shl .filters { grid-template-columns: 1fr auto; align-items: center } .filters__sels { justify-content: flex-end } }
@media (min-width: 700px) { .ships__grid { grid-template-columns: 1fr 1fr } }
@media (min-width: 1100px) { .ships__grid { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 899px) {
  .shh { padding: 102px 0 30px } .shh__h { font-size: clamp(29px, 8.2vw, 42px); max-width: none } .shh__lead { font-size: 14.8px }
  .shh__act .btn { width: 100%; justify-content: center }
  .shh__facts { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 26px } .shh__facts > div { padding: 13px 14px } .shh__facts b { font-size: 21px } .shh__facts span { font-size: 11.5px }
  .shl__bar { padding: 12px; border-radius: 18px } .filters__sels { gap: 8px } .filters__sel { flex: 1; min-width: 0 } .filters__n { width: 100%; margin: 2px 0 0; text-align: right }
  .ship__body { padding: 16px 16px 18px } .ship__route { font-size: 18px }
}
/* «Четыре шага»: заголовок в одну строку на десктопе */
@media (min-width: 900px) { .sb__head { max-width: none; padding-right: 120px } .sb__h { font-size: clamp(28px, 3.2vw, 48px); max-width: 30ch } }
@media (min-width: 900px) { .steps__head { max-width: none } .steps__head .h2 { font-size: clamp(28px, 3vw, 42px); max-width: 30ch } }
/* фото самолёта в блоке сроков: меньше растяжения по высоте — не мылит на десктопе */
@media (min-width: 900px) { .tr2__bg { height: 46%; width: 56% } .tr2__bg img { object-position: 55% 45% } }

/* ================= «Живая планета»: маршруты, кометы, мерцание, огни борта ================= */
.ofx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; mix-blend-mode: screen }
.ofx__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible }
.ofx__glow { fill: none; stroke: rgba(143,240,207,.30); stroke-width: 5; filter: blur(4px); stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: ofx-draw 4.6s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(var(--i, 0) * .55s + .4s) }
.ofx__line { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1600; stroke-dashoffset: 1600; filter: drop-shadow(0 0 6px rgba(143,240,207,.65)); animation: ofx-draw 4.6s cubic-bezier(.4,0,.2,1) forwards, ofx-shimmer 6s ease-in-out infinite 5s; animation-delay: calc(var(--i, 0) * .55s + .4s), calc(var(--i, 0) * .8s + 5s) }
@keyframes ofx-draw { to { stroke-dashoffset: 0 } }
@keyframes ofx-shimmer { 0%, 100% { opacity: .5 } 50% { opacity: 1 } }
.ofx__comet { fill: #fff; filter: drop-shadow(0 0 10px rgba(143,240,207,1)); opacity: 0; animation: ofx-comet 5s ease-in-out infinite; animation-delay: 3s }
.ofx__comets circle:nth-child(2) { animation-delay: 5.4s } .ofx__comets circle:nth-child(3) { animation-delay: 7.2s }
@keyframes ofx-comet { 0%, 8% { opacity: 0 } 18%, 78% { opacity: .95 } 100% { opacity: 0 } }
.ofx__dot { fill: rgba(255,236,190,.9); filter: drop-shadow(0 0 6px rgba(255,214,150,.9)); opacity: 0; animation: ofx-twinkle 4.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .48s + 1.2s) }
@keyframes ofx-twinkle { 0%, 100% { opacity: .15; transform: scale(.8) } 45% { opacity: 1; transform: scale(1.25) } }
.ofx__dots { transform-box: fill-box; transform-origin: center }
.ofx__beacon { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(255,255,255,.85); animation: ofx-blink 2.6s steps(1, end) infinite; animation-delay: calc(var(--b, 0) * 1.3s) }
.ofx__beacon:nth-of-type(2) { background: #ff5f4d; box-shadow: 0 0 10px 3px rgba(255,95,77,.85) }
@keyframes ofx-blink { 0%, 12% { opacity: 1 } 13%, 100% { opacity: 0 } }
/* привязка слоя к конкретным блокам */
.sb__card > .ofx, .steps__card > .ofx, .ft2__hero > .ofx { border-radius: inherit }
.ofx--ft { opacity: .9 } .ofx--steps { opacity: .8 }
@media (max-width: 899px) { .ofx__line { stroke-width: 1.3 } .ofx__dot { r: 2 } }
@media (prefers-reduced-motion: reduce) { .ofx { display: none } }
@media (max-width: 899px) { .ofx__beacon { display: none } }

/* ---- «Истории успеха»: заголовок в строку со стрелкой, текст и мини-цифра */
.sk__stories { min-height: 0; border-radius: 24px }
.sk__stories::before { background: linear-gradient(90deg, rgba(6,32,26,.97), rgba(6,32,26,.82) 42%, rgba(6,32,26,.25) 74%, rgba(6,32,26,.05)) }
.sk__stories img { inset: 0 0 0 52%; width: 48% }
.sk__stories-in { position: relative; z-index: 1; display: grid; gap: 10px; padding: clamp(20px, 3vw, 28px); max-width: 62% }
.sk__stories-h { display: inline-flex; align-items: center; gap: 14px; font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 2.6vw, 34px); line-height: 1.05; color: #fff; white-space: nowrap }
.sk__stories-h .btn__arr { color: var(--mint); transition: transform .35s var(--ease) }
.sk__stories:hover .sk__stories-h .btn__arr { transform: translateX(5px) }
.sk__stories-p { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.72); max-width: 52ch }
.sk__stories-m { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 2px; padding: 8px 14px; border-radius: 999px; background: rgba(143,240,207,.12); border: 1px solid rgba(143,240,207,.28); width: max-content }
.sk__stories-m b { font-size: 18px; color: var(--mint) } .sk__stories-m span { font-size: 12.5px; color: rgba(255,255,255,.75) }
@media (max-width: 899px) {
  .sk__stories img { inset: 0 0 0 58%; width: 42% }
  .sk__stories-in { max-width: 72%; gap: 8px; padding: 18px }
  .sk__stories-h { font-size: 21px; white-space: normal }
  .sk__stories-p { font-size: 13px; max-width: none }
  .sk__stories-m { padding: 6px 12px } .sk__stories-m b { font-size: 16px } .sk__stories-m span { font-size: 11.5px }
}

/* ---- блок «Четыре шага» на страницах услуг и главной: премиальные карточки и анимация */
.steps__card { background: radial-gradient(120% 110% at 88% 8%, #14654B 0%, #0B3C2E 45%, #06201A 100%) }
.steps__head { position: relative; z-index: 2 }
.steps__list { position: relative; z-index: 2 }
.steps__list li { border-radius: 20px; transition: background .4s, transform .5s var(--ease), border-color .4s; border: 1px solid transparent }
.steps__dot { border-color: rgba(143,240,207,.35); background: rgba(143,240,207,.08) }
.steps__dot::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 60%, rgba(143,240,207,.85) 82%, transparent 100%); -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 1.5px), #000 calc(50% - 1.5px)); mask: radial-gradient(circle, transparent 0 calc(50% - 1.5px), #000 calc(50% - 1.5px)); opacity: 0; transition: opacity .5s; animation: sb-spin 5s linear infinite }
.steps__list li.in .steps__dot::before { opacity: .9 }
.steps__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(143,240,207,.6); opacity: 0 }
.steps__list li.in .steps__dot::after { animation: sb-ring 1.6s var(--ease) }
.steps__list li.in .steps__dot .ic { animation: sb-pop .65s cubic-bezier(.3,1.6,.4,1) }
.steps__n { transition: color .4s } .steps__list li.in .steps__n { color: var(--mint) }
.steps__line i { box-shadow: 0 0 12px rgba(143,240,207,.8) }
.steps__act { position: relative; z-index: 2 }
@media (min-width: 900px) {
  .steps__list li { padding: 24px 20px; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); backdrop-filter: blur(8px) }
  .steps__list li:hover { transform: translateY(-6px); background: rgba(255,255,255,.09); border-color: rgba(143,240,207,.4) }
  .steps__line { left: 44px; right: 44px; top: 88px; bottom: auto; width: auto; height: 1px }
  .steps__line i { width: 0; height: 100%; transition: width 2.4s cubic-bezier(.4,0,.2,1) .4s } .steps__list.in .steps__line i { width: 100% }
  .steps__plane { left: 44px; top: 88px; transform: rotate(90deg); transition: left 2.4s cubic-bezier(.4,0,.2,1) .4s, opacity .4s .4s }
  .steps__list.in .steps__plane { left: calc(100% - 44px); top: 88px }
}
/* бортовые огни заметнее */
.ofx__beacon { animation: ofx-blink 2.2s ease-out infinite }
@keyframes ofx-blink { 0% { opacity: 0; transform: scale(.6) } 6% { opacity: 1; transform: scale(1.25) } 22% { opacity: .15; transform: scale(1) } 30%, 100% { opacity: 0; transform: scale(.6) } }

/* ================= ПЕРЕВОЗКИ: шапка по макету ================= */
.shh2 { position: relative; overflow: hidden; background: #0B2A45; color: #fff; padding: 128px 0 clamp(28px, 3vw, 44px) }
.shh2__bg { position: absolute; inset: 0 } .shh2__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; animation: sp-bg 2s .05s var(--ease) both }
.shh2__bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,28,48,.86) 0%, rgba(8,28,48,.6) 34%, rgba(8,28,48,.18) 58%, rgba(8,28,48,.08) 100%) }
.shh2__bg::after { content: ""; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(180deg, rgba(6,22,38,0), rgba(6,22,38,.72)) }
.shh2__in { position: relative; z-index: 1 } .shh2 .crumbs { color: rgba(255,255,255,.62); margin-bottom: 22px } .shh2 .crumbs a:hover { color: #fff }
.shh2__grid { display: grid; gap: 26px; align-items: start }
.shh2__k { color: rgba(255,255,255,.8); letter-spacing: .28em } .shh2__k::after { background: var(--mint) }
.shh2__h { display: grid; font-weight: 700; font-size: clamp(34px, 4.6vw, 68px); line-height: 1.02; letter-spacing: -.03em; margin: 12px 0 20px }
.shh2__h span { opacity: 0; transform: translateY(18px); animation: sp-up .9s .35s var(--ease) forwards }
.shh2__h em { font-style: normal; color: var(--mint); opacity: 0; transform: translateY(18px); animation: sp-up .9s .55s var(--ease) forwards; text-shadow: 0 0 26px rgba(143,240,207,.35) }
.shh2__lead { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; color: rgba(255,255,255,.9); max-width: 40ch; opacity: 0; animation: sp-up .9s .75s var(--ease) forwards }
.shh2__feats { display: flex; flex-wrap: wrap; gap: 16px 34px; margin-top: 30px }
.shh2__feats > div { display: flex; align-items: center; gap: 12px; font-size: 14.5px; line-height: 1.3; color: #fff; opacity: 0; animation: sp-up .8s var(--ease) forwards; animation-delay: calc(var(--d, 0ms) + .9s) }
.shh2__feats .ic { width: 26px; height: 26px; color: #fff; flex: none }
/* рукопись и карта */
.shh2__art { position: relative; min-height: 220px }
.shh2__hand { position: absolute; left: 4%; top: 96px; z-index: 2; display: grid; font: 500 clamp(18px, 1.9vw, 27px)/1.15 "Caveat", cursive; color: #fff; transform: rotate(-8deg) }
.shh2__hand em { font-style: normal; opacity: 0; animation: sp-up .7s var(--ease) forwards } .shh2__hand em:nth-child(1) { animation-delay: 1.1s } .shh2__hand em:nth-child(2) { animation-delay: 1.3s; padding-left: 14px } .shh2__hand em:nth-child(3) { animation-delay: 1.5s; padding-left: 26px }
.shh2__hand svg { width: 190px; height: 22px; margin: 2px 0 0 20px } .shh2__hand svg path { fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ah-draw 1.1s 1.8s var(--ease) forwards; filter: drop-shadow(0 0 6px rgba(143,240,207,.7)) }
.shh2__map { position: relative; z-index: 1; width: 100%; max-width: 560px; display: block; overflow: visible }
.shh2__route { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(255,255,255,.6)); animation: ah-draw 2.6s 1s cubic-bezier(.4,0,.2,1) forwards }
.shh2__pt circle { fill: #fff } .shh2__pt text { fill: #fff; font: 600 12px var(--sans); letter-spacing: .12em; text-anchor: middle; paint-order: stroke; stroke: rgba(8,28,48,.5); stroke-width: 4px }
.shh2__pt--kz circle:not(.shh2__pulse) { fill: var(--mint) } .shh2__pt--kz text { fill: #fff }
.shh2__pulse { fill: rgba(143,240,207,.35); transform-box: fill-box; transform-origin: center; animation: pulse-w 2.6s ease-out infinite }
.shh2__pt { opacity: 0; animation: sp-up .7s var(--ease) forwards } .shh2__pt--eu { animation-delay: 1.4s } .shh2__pt--kz { animation-delay: 2.2s } .shh2__pt--as { animation-delay: 2.9s }
.shh2__spark { fill: var(--mint); filter: drop-shadow(0 0 10px rgba(143,240,207,1)) }
/* карточки типов груза */
.shh2__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: clamp(26px, 3vw, 48px) }
.shc { position: relative; display: grid; gap: 12px; padding: 14px; border-radius: 20px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; overflow: hidden; opacity: 0; transform: translateY(22px); animation: sp-up .8s var(--ease) forwards; animation-delay: calc(var(--d, 0ms) + 1.1s); transition: transform .45s var(--ease), border-color .35s, background .35s }
.shc:hover { transform: translateY(-6px); background: rgba(255,255,255,.16); border-color: rgba(143,240,207,.55) }
.shc__top { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 500; line-height: 1.25 }
.shc__top .ic { width: 22px; height: 22px; flex: none } .shc__top b { font-weight: 500 } .shc__top .btn__arr { margin-left: auto; flex: none; transition: transform .35s var(--ease) }
.shc:hover .shc__top .btn__arr { transform: translateX(4px) }
.shc__pic { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16/11 } .shc__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease) }
.shc:hover .shc__pic img { transform: scale(1.06) }
@media (min-width: 1000px) { .shh2__grid { grid-template-columns: 1.05fr .95fr; gap: 40px } .shh2__art { min-height: 300px } }
@media (max-width: 999px) {
  .shh2 { padding: 104px 0 26px }
  .shh2__grid { gap: 10px }
  .shh2__h { font-size: clamp(30px, 8.6vw, 44px); margin: 8px 0 16px }
  .shh2__lead { font-size: 15px; max-width: 32ch }
  .shh2__art { min-height: 190px; order: -1; margin: 0 0 -30px }
  .shh2__map { max-width: 78%; margin-left: auto }
  .shh2__hand { left: auto; right: 2%; top: 118px }
  .shh2__feats { gap: 12px 18px; margin-top: 24px } .shh2__feats > div { font-size: 13px } .shh2__feats .ic { width: 22px; height: 22px }
  .shh2__cards { grid-template-columns: none; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 22px calc(var(--pad) * -1) 0; padding: 0 var(--pad) 4px }
  .shh2__cards::-webkit-scrollbar { display: none }
  .shc { flex: 0 0 62%; scroll-snap-align: start } .shc__top { font-size: 13px } .shc__pic { aspect-ratio: 4/3 }
}
/* шапка перевозок: контраст, посадка блоков */
.shh2 { padding-bottom: clamp(34px, 4vw, 60px) }
.shh2__bg::before { background: linear-gradient(100deg, rgba(6,24,42,.94) 0%, rgba(6,24,42,.82) 26%, rgba(6,24,42,.42) 52%, rgba(6,24,42,.12) 78%, rgba(6,24,42,.05) 100%) }
.shh2__bg::after { height: 52%; background: linear-gradient(180deg, rgba(6,22,38,0), rgba(6,22,38,.5) 40%, rgba(6,22,38,.86)) }
.shh2 .crumbs { text-shadow: 0 1px 10px rgba(6,24,42,.8) }
.shh2__h, .shh2__lead { text-shadow: 0 2px 22px rgba(6,24,42,.55) }
.shh2__hand { top: auto; bottom: -6px; left: 2% }
.shh2__map { margin-left: auto; margin-right: 0 }
@media (min-width: 1000px) { .shh2__art { min-height: 340px } .shh2__hand { bottom: 10px; left: 6% } }
@media (max-width: 999px) { .shh2__hand { bottom: -10px; right: 4%; left: auto } }
@media (max-width: 999px) {
  .shh2 { padding-top: 96px }
  .shh2__grid { position: relative; display: block }
  .shh2__art { position: absolute; right: calc(var(--pad) * -1 + 4px); top: -6px; width: 68%; min-height: 0; margin: 0; z-index: 0; pointer-events: none }
  .shh2__map { max-width: 100% }
  .shh2__hand { position: relative; bottom: auto; right: auto; left: auto; margin: 2px 0 0 12%; transform: rotate(-9deg) }
  .shh2__hand svg { width: 150px; margin-left: 10px }
  .shh2__txt { position: relative; z-index: 1; padding-top: 132px }
  .shh2__h { font-size: clamp(30px, 9.4vw, 46px); max-width: 9ch; letter-spacing: -.035em }
  .shh2__lead { max-width: 30ch }
  .shh2__feats { gap: 12px 20px } .shh2__feats > div { flex: 0 0 calc(50% - 10px) }
  .shc { flex: 0 0 66% }
}
@media (max-width: 599px) { .shh2__art { width: 76%; top: 0 } .shh2__txt { padding-top: 118px } }
@media (max-width: 999px) {
  .shh2__art { top: -26px; width: 62%; display: flex; flex-direction: column; align-items: flex-end }
  .shh2__map { order: 1 } .shh2__hand { order: 2; margin: -4px 6px 0 0; font-size: clamp(16px, 4.6vw, 22px) }
  .shh2__hand svg { width: 128px; margin-left: 6px }
  .shh2__pt text { font-size: 11px }
  .shh2__txt { padding-top: 150px }
}
@media (max-width: 599px) { .shh2__txt { padding-top: 140px } .shh2__art { width: 70%; top: -22px } }
@media (max-width: 999px) { .shh2__k::after { display: none } .shh2__hand svg { width: 112px } .shh2__hand { margin-right: 10px } }
/* мобильная шапка перевозок: фон-портрет по макету */
.shh2__bg picture { display: block; position: absolute; inset: 0 }
@media (max-width: 900px) {
  .shh2 { padding: 92px 0 22px }
  .shh2 .crumbs { display: none }
  .shh2__bg img { object-position: 50% 58% }
  .shh2__bg::before { background: linear-gradient(180deg, rgba(8,38,72,.72) 0%, rgba(8,38,72,.5) 22%, rgba(8,38,72,.12) 42%, rgba(6,22,38,0) 56%, rgba(6,22,38,.35) 82%, rgba(6,22,38,.7) 100%) }
  .shh2__bg::after { display: none }
  .shh2__txt { padding-top: 0 }
  .shh2__art { top: 46px; width: 58% }
  .shh2__h { font-size: clamp(30px, 9vw, 44px); max-width: 8.5ch }
  .shh2__lead { max-width: 26ch; font-size: 15.5px }
  .shh2__feats { margin-top: min(44vh, 360px); gap: 14px 18px }
  .shh2__feats > div { flex: 0 0 calc(50% - 9px) }
  .shh2__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; overflow: visible; margin: 18px 0 0; padding: 0 }
  .shc { flex: none; padding: 8px; border-radius: 16px; gap: 8px }
  .shc__top b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
  .shc__top .btn__arr { display: none }
  .shc__top { justify-content: flex-start } .shc__top .ic { width: 20px; height: 20px }
  .shc__pic { aspect-ratio: 3/4; position: relative }
  .shc__pic::after { content: ""; position: absolute; left: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85); background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px) }
  .shc__pic::before { content: ""; position: absolute; left: 18px; bottom: 21px; z-index: 1; width: 9px; height: 9px; border: solid #fff; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg) }
}
@media (max-width: 900px) {
  .shh2__art { top: 18px; width: 52% }
  .shh2__k { position: relative; padding-left: 46px }
  .shh2__k::before { content: ""; position: absolute; left: 0; top: 50%; width: 34px; height: 2px; background: var(--mint) }
  .shh2__feats { margin-top: min(34vh, 300px) }
  .shh2 { padding-bottom: calc(86px + env(safe-area-inset-bottom)) }
}
/* иконки типов груза по макету: снежинка, знак опасности, шестерня */
.ic-snow { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 2v20M4.5 6.5l15 11M19.5 6.5l-15 11'/%3E%3Cpath d='M12 6l-2.4-2.4M12 6l2.4-2.4M12 18l-2.4 2.4M12 18l2.4 2.4M7.2 9.3L4 8.6M7.2 9.3l-.9-3.1M16.8 14.7l3.2.7M16.8 14.7l.9 3.1M16.8 9.3l3.2-.7M16.8 9.3l.9-3.1M7.2 14.7l-3.2.7M7.2 14.7l-.9 3.1'/%3E%3C/svg%3E") }
.ic-warn { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6 2.6 20h18.8L12 3.6z'/%3E%3Cpath d='M12 9.6v4.6M12 17.2h.01'/%3E%3C/svg%3E") }
.ic-gear { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M19.4 14.6a1.6 1.6 0 0 0 .32 1.77l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.6 1.6 0 0 0-1.77-.32 1.6 1.6 0 0 0-1 1.47V21a2 2 0 1 1-4 0v-.11a1.6 1.6 0 0 0-1.05-1.47 1.6 1.6 0 0 0-1.77.32l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.6 1.6 0 0 0 .32-1.77 1.6 1.6 0 0 0-1.47-1H3a2 2 0 1 1 0-4h.11a1.6 1.6 0 0 0 1.47-1.05 1.6 1.6 0 0 0-.32-1.77l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.6 1.6 0 0 0 1.77.32H9a1.6 1.6 0 0 0 1-1.47V3a2 2 0 1 1 4 0v.11a1.6 1.6 0 0 0 1 1.47 1.6 1.6 0 0 0 1.77-.32l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.6 1.6 0 0 0-.32 1.77V9a1.6 1.6 0 0 0 1.47 1H21a2 2 0 1 1 0 4h-.11a1.6 1.6 0 0 0-1.47 1z'/%3E%3C/svg%3E") }

/* ---- шапка перевозок: читаемость текста и компактные карточки с раскрытием */
.shh2__txt { position: relative; z-index: 1 }
.shh2__txt::before { content: ""; position: absolute; left: -6%; right: -12%; top: -8%; bottom: -10%; z-index: -1; pointer-events: none; background: radial-gradient(115% 95% at 22% 46%, rgba(4,20,36,.82) 0%, rgba(4,20,36,.62) 42%, rgba(4,20,36,.28) 66%, rgba(4,20,36,0) 82%) }
.shh2__lead { color: #fff; text-shadow: 0 2px 18px rgba(4,20,36,.85) }
.shh2__h { text-shadow: 0 3px 26px rgba(4,20,36,.75) }
.shh2__feats > div { text-shadow: 0 2px 14px rgba(4,20,36,.8) }
.shh2__bg::before { background: linear-gradient(100deg, rgba(4,20,36,.92) 0%, rgba(4,20,36,.72) 30%, rgba(4,20,36,.34) 56%, rgba(4,20,36,.1) 80%, rgba(4,20,36,.04) 100%) }
/* карточки на 30% компактнее + раскрытие описания */
.shh2__cards { max-width: 1030px }
.shc { padding: 11px; border-radius: 18px; gap: 9px }
.shc__top { font-size: 13px; gap: 9px } .shc__top .ic { width: 18px; height: 18px } .shc__top .btn__arr { width: 15px }
.shc__pic { aspect-ratio: 16/10; position: relative }
.shc__d { position: absolute; inset: auto 0 0; padding: 46px 12px 12px; font-size: 12.2px; line-height: 1.4; color: #fff; background: linear-gradient(180deg, rgba(6,24,42,0), rgba(6,24,42,.82) 42%, rgba(6,24,42,.96)); opacity: 0; transform: translateY(14px); transition: opacity .4s var(--ease), transform .5s var(--ease) }
.shc:hover .shc__d, .shc:focus-visible .shc__d { opacity: 1; transform: none }
.shc:hover .shc__pic img { transform: scale(1.08) }
.shc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(143,240,207,0); transition: box-shadow .35s }
.shc:hover::after { box-shadow: inset 0 0 0 1px rgba(143,240,207,.65), 0 26px 44px -26px rgba(0,0,0,.7) }
@media (max-width: 900px) { .shc__d { display: none } .shh2__cards { max-width: none } .shh2__txt::before { left: -8%; right: -8%; background: radial-gradient(120% 80% at 34% 40%, rgba(4,20,36,.78) 0%, rgba(4,20,36,.5) 46%, rgba(4,20,36,0) 78%) } }
.shh2__txt::before { left: -40%; right: -45%; top: -40%; bottom: -45%; background: radial-gradient(46% 42% at 42% 50%, rgba(4,20,36,.8) 0%, rgba(4,20,36,.55) 42%, rgba(4,20,36,.22) 62%, rgba(4,20,36,0) 78%) }
@media (max-width: 900px) { .shh2__txt::before { left: -50%; right: -50%; background: radial-gradient(48% 34% at 46% 34%, rgba(4,20,36,.72) 0%, rgba(4,20,36,.45) 46%, rgba(4,20,36,0) 74%) } }

/* ---- квиз, вступление: центрированная премиальная композиция ---- */
@media (min-width: 900px) { .quiz__intro { grid-template-columns: 1fr; justify-items: center } }
.quiz__intro { justify-items: center; text-align: center; gap: 4px }
.quiz__intro-txt { display: grid; justify-items: center; max-width: 760px }
.quiz__intro-txt .kicker { justify-content: center }
.quiz__intro-txt p { margin: 14px auto 28px; max-width: 54ch }
.quiz__intro-art { order: -1; width: 132px; height: 132px; margin: 0 0 6px }
.quiz__intro-art b { font-size: 40px } .quiz__intro-art small { bottom: 34px; font-size: 10px }
.quiz__plane { transform-origin: 0 66px !important }
.quiz__start { margin: 0 auto }
.quiz__pre { justify-content: center }
.quiz__h { max-width: 20ch; margin-left: auto; margin-right: auto }
.quiz__card { text-align: center }
.quiz__card::after { content: ""; position: absolute; left: 50%; top: -12%; width: min(780px, 92%); height: 62%; transform: translateX(-50%); pointer-events: none; background: radial-gradient(circle at 50% 40%, rgba(143,240,207,.14), transparent 62%) }
.quiz__body { text-align: left }
@media (min-width: 900px) { .quiz__intro-art { width: 150px; height: 150px } .quiz__plane { transform-origin: 0 75px !important } .quiz__intro-art b { font-size: 46px } }
.ai__m { overflow-wrap: anywhere }
@media (min-width: 900px) { .ai { right: 24px; bottom: 24px } }
.ships__grid { transition: opacity .25s } .ships__grid.is-loading { opacity: .45 }
.more[hidden] { display: none }

/* ================= ПАРТНЁРЫ: шапка по макету ================= */
.ph2 { position: relative; overflow: hidden; background: #DCE6EE; color: var(--ink); padding: 122px 0 clamp(20px, 2.6vw, 34px) }
.ph2__bg { position: absolute; inset: 0 } .ph2__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; animation: sp-bg 2.1s .05s var(--ease) both }
.ph2__bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(238,244,248,.94) 0%, rgba(238,244,248,.78) 30%, rgba(238,244,248,.34) 56%, rgba(238,244,248,.06) 82%, rgba(238,244,248,0) 100%) }
.ph2__in { position: relative; z-index: 1 } .ph2 .crumbs { color: var(--mute); margin-bottom: 22px }
.ph2__grid { display: grid; gap: 24px; align-items: start }
.ph2__k { color: #4B5D6B; letter-spacing: .26em } .ph2__k::after { background: #7C8A96 }
.ph2__h { display: grid; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -.02em; margin: 12px 0 20px }
.ph2__h span { opacity: 0; transform: translateY(18px); animation: sp-up .9s .3s var(--ease) forwards }
.ph2__h em { font-style: normal; color: #A6825B; opacity: 0; transform: translateY(18px); animation: sp-up .9s .5s var(--ease) forwards }
.ph2__lead { font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.6; color: #2E3B44; max-width: 46ch; opacity: 0; animation: sp-up .9s .7s var(--ease) forwards }
.ph2__art { position: relative; min-height: 260px }
.ph2__map { width: 100%; max-width: 640px; display: block; overflow: visible }
.ph2__arc { fill: none; stroke: rgba(255,255,255,.95); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 1px 4px rgba(20,40,60,.45)); animation: ah-draw 2.2s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(var(--i, 0) * .5s + .9s) }
.ph2__pt circle { fill: #fff; filter: drop-shadow(0 1px 3px rgba(20,40,60,.5)) }
.ph2__pt text { fill: #fff; font: 500 14px var(--sans); paint-order: stroke; stroke: rgba(24,44,64,.45); stroke-width: 4px }
.ph2__pt { opacity: 0; animation: sp-up .7s var(--ease) forwards; animation-delay: calc(var(--i, 0) * .35s + 1.5s) }
.ph2__pt--hub text { font-weight: 600; font-size: 15.5px }
.ph2__pulse { fill: rgba(255,255,255,.45); transform-box: fill-box; transform-origin: center; animation: pulse-w 2.6s ease-out infinite }
.ph2__spark { fill: #FFE9C6; filter: drop-shadow(0 0 8px rgba(255,213,150,.9)) }
.ph2__hand { position: absolute; right: 2%; bottom: -6px; display: grid; font: 500 clamp(17px, 1.7vw, 25px)/1.2 "Caveat", cursive; color: #fff; text-shadow: 0 1px 8px rgba(20,40,60,.5); transform: rotate(-7deg) }
.ph2__hand em { font-style: normal; opacity: 0; animation: sp-up .7s var(--ease) forwards } .ph2__hand em:nth-child(1) { animation-delay: 1.5s } .ph2__hand em:nth-child(2) { animation-delay: 1.7s; padding-left: 16px } .ph2__hand em:nth-child(3) { animation-delay: 1.9s; padding-left: 30px }
.ph2__hand svg { width: 190px; height: 20px; margin: 2px 0 0 24px } .ph2__hand svg path { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ah-draw 1.1s 2.2s var(--ease) forwards }
/* лента логотипов */
.ph2__logos { position: relative; z-index: 1; display: flex; align-items: center; gap: 26px; margin-top: clamp(24px, 3vw, 44px); padding: 16px 24px; border-radius: 22px; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 26px 50px -36px rgba(20,40,60,.5); opacity: 0; transform: translateY(20px); animation: sp-up .9s 1.1s var(--ease) forwards }
.ph2__logos-t { flex: none; display: flex; align-items: center; gap: 14px; font: 600 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #43535F; line-height: 1.5 }
.ph2__logos-t i { width: 26px; height: 1px; background: #9AA7B1 }
.ph2__lane { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 0 }
.ph2__logo { flex: 1; display: grid; place-items: center; padding: 0 6px; position: relative; opacity: 0; animation: sp-up .6s var(--ease) forwards; animation-delay: calc(var(--d, 0ms) + 1.3s); transition: transform .35s var(--ease) }
.ph2__logo + .ph2__logo::before { content: ""; position: absolute; left: -9px; top: 50%; height: 26px; width: 1px; background: rgba(60,80,95,.14); transform: translateY(-50%) }
.ph2__logo img { max-height: 30px; max-width: 100%; width: auto; object-fit: contain; filter: saturate(1.02) }
.ph2__logo:hover { transform: translateY(-3px) }
@media (min-width: 1000px) { .ph2__grid { grid-template-columns: 1.02fr .98fr; gap: 40px } .ph2__art { min-height: 330px } }
@media (max-width: 999px) {
  .ph2 { padding: 100px 0 20px }
  .ph2 .crumbs { display: none }
  .ph2__bg img { object-position: 60% 60% }
  .ph2__bg::before { background: linear-gradient(180deg, rgba(238,244,248,.95) 0%, rgba(238,244,248,.8) 30%, rgba(238,244,248,.3) 52%, rgba(238,244,248,.06) 70%, rgba(238,244,248,0) 100%) }
  .ph2__grid { position: relative; display: block }
  .ph2__h { font-size: clamp(30px, 8.6vw, 44px); max-width: 11ch }
  .ph2__lead { font-size: 15px; max-width: 34ch }
  .ph2__art { position: static; min-height: 0; margin-top: 22px }
  .ph2__map { max-width: 100% } .ph2__pt text { font-size: 16px } .ph2__pt--hub text { font-size: 17px }
  .ph2__hand { position: static; margin: -18px 0 0 auto; width: max-content; font-size: 19px }
  .ph2__logos { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 12px }
  .ph2__logos-t { justify-content: center } .ph2__logos-t br { display: none }
  .ph2__lane { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px }
  .ph2__logo + .ph2__logo::before { display: none } .ph2__logo img { max-height: 24px }
}
/* партнёры: читаемость и посадка */
.ph2__bg::before { background: linear-gradient(100deg, rgba(240,246,250,.97) 0%, rgba(240,246,250,.93) 26%, rgba(240,246,250,.72) 44%, rgba(240,246,250,.3) 66%, rgba(240,246,250,.04) 88%) }
.ph2__h { max-width: 11ch; text-shadow: 0 1px 12px rgba(240,246,250,.9) }
.ph2__lead { color: #263440; text-shadow: 0 1px 10px rgba(240,246,250,.9) }
.ph2__logos { background: rgba(255,255,255,.78) }
.ph2__logo img { max-height: 26px; max-width: 92% }
.ph2__logos-t { color: #2E3B44 }
@media (min-width: 1000px) { .ph2__h { font-size: clamp(34px, 4.1vw, 60px) } .ph2__art { padding-top: 30px } }
.ph2__dots { opacity: 0; animation: sp-up 1.2s .5s var(--ease) forwards } .ph2__dots path { fill: rgba(255,255,255,.6) }
@media (max-width: 999px) { .ph2__dots path { fill: rgba(255,255,255,.65) } }
.ph2__txt { position: relative; z-index: 1 }
.ph2__txt::before { content: ""; position: absolute; left: -45%; right: -40%; top: -45%; bottom: -45%; z-index: -1; pointer-events: none; background: radial-gradient(45% 42% at 44% 50%, rgba(244,249,252,.95) 0%, rgba(244,249,252,.8) 44%, rgba(244,249,252,.35) 64%, rgba(244,249,252,0) 80%) }
.ph2__h em { color: #8A6234 }
.ph2__lead { color: #1F2C36 }
@media (max-width: 999px) { .ph2__txt::before { left: -50%; right: -50%; background: radial-gradient(52% 36% at 44% 36%, rgba(244,249,252,.94) 0%, rgba(244,249,252,.72) 46%, rgba(244,249,252,0) 76%) } }
/* партнёры, мобильная версия по макету: без карты, рукопись справа, логотипы 2×4 */
.ph2__bg picture { display: block; position: absolute; inset: 0 }
@media (max-width: 900px) {
  .ph2 { padding: 92px 0 20px }
  .ph2__bg img { object-position: 50% 52% }
  .ph2__bg::before { background: linear-gradient(180deg, rgba(244,249,252,.96) 0%, rgba(244,249,252,.88) 26%, rgba(244,249,252,.5) 44%, rgba(244,249,252,.08) 60%, rgba(244,249,252,0) 100%) }
  .ph2__map { display: none }
  .ph2__art { margin-top: 4px }
  .ph2__hand { margin: 0 6px 0 auto; color: #fff; text-shadow: 0 2px 10px rgba(20,40,60,.6); transform: rotate(-8deg) }
  .ph2__hand svg { width: 150px; margin-left: 14px }
  .ph2__h { font-size: clamp(31px, 9.2vw, 46px); max-width: 10ch }
  .ph2__lead { max-width: 36ch; font-size: 15px }
  .ph2__logos { margin-top: min(38vh, 330px); padding: 16px 14px }
  .ph2__logos-t { justify-content: flex-start } .ph2__logos-t br { display: inline } .ph2__logos-t i { display: none }
  .ph2__lane { grid-template-columns: repeat(4, 1fr); gap: 16px 8px }
  .ph2__logo img { max-height: 22px }
}
.ph2__logo { height: 34px } .ph2__logo img { max-height: 100%; max-width: 100%; height: auto; width: auto }
@media (max-width: 900px) { .ph2__logo { height: 26px } }

/* ---- «живая планета» без линий: блик по борту и яркие бортовые огни (Иван, 09.09) */
.ofx__arcs, .ofx__comets, .ofx__line, .ofx__glow, .ofx__comet { display: none !important }
.ofx__shine { position: absolute; left: -40%; top: -30%; width: 34%; height: 160%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.14) 42%, rgba(255,255,255,.3) 52%, transparent); transform: rotate(14deg); mix-blend-mode: screen; pointer-events: none; animation: ofx-shine 9s ease-in-out infinite 2s }
@keyframes ofx-shine { 0% { left: -40%; opacity: 0 } 14% { opacity: .9 } 60% { opacity: .55 } 76%, 100% { left: 120%; opacity: 0 } }
.ofx__beacon { width: 8px; height: 8px; margin: -4px 0 0 -4px; box-shadow: 0 0 14px 5px rgba(255,255,255,.9) }
.ofx__beacon:nth-of-type(2) { box-shadow: 0 0 14px 5px rgba(255,95,77,.9) }
@keyframes ofx-blink { 0% { opacity: 0; transform: scale(.5) } 5% { opacity: 1; transform: scale(1.4) } 16% { opacity: .35; transform: scale(1) } 26%, 100% { opacity: 0; transform: scale(.5) } }
.ofx__dot { animation-duration: 3.6s }
/* ---- партнёры: лента логотипов по центру + анимация */
.ph2__lane { justify-content: center; gap: 22px }
.ph2__logo { flex: 0 1 auto; min-width: 92px }
.ph2__logo img { transition: transform .45s var(--ease), filter .35s }
.ph2__logo:hover img { transform: scale(1.08) }
.ph2__logos { justify-content: center }
@media (min-width: 1000px) { .ph2__logos-t { margin-right: 4px } .ph2__lane { gap: 26px } }

/* ---- карта сети: компактнее и аккуратнее (Иван, 09.09) */
.wmap__card { padding: clamp(16px, 2vw, 26px) }
.wmap__stage { aspect-ratio: auto; height: clamp(230px, 26vw, 360px) }
.wmap__svg { height: 100% }
.wmap__head { margin-bottom: 12px; justify-content: center; gap: 10px 18px }
.wmap__filters { justify-content: center }
.wmap__stats { justify-content: center; gap: 16px 34px; margin-top: 16px; padding-top: 16px }
.wmap__stats .stat { text-align: center } .wmap__stats .stat b { font-size: clamp(24px, 2.4vw, 34px) }
.wmap__stats .btn { margin-left: 0 }
.wmap__pins .pin text { font-size: calc(13px / var(--mk, 1)) }
.wmap__pins .pin.hub text { font-size: calc(15px / var(--mk, 1)) }
@media (max-width: 899px) {
  .wmap__stage { height: clamp(200px, 46vw, 260px) }
  .wmap__pins .pin text { font-size: calc(17px / var(--mk, 1)) }
  .wmap__pins .pin.hub text { font-size: calc(19px / var(--mk, 1)) }
  .wmap__stats { flex-direction: column; align-items: center; text-align: center }
}

/* ---- партнёры: блок «как мы работаем» вместо простого текста */
.pnw { display: grid; gap: 26px; align-items: start }
.pnw__txt .h2 { margin: 8px 0 16px }
.pnw__txt .prose { color: var(--ink-2); font-size: 16px; line-height: 1.65 }
.pnw__grid { display: grid; gap: 14px }
.pnw__it { position: relative; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s, border-color .35s }
.pnw__it:hover { transform: translateY(-5px); box-shadow: 0 30px 50px -34px rgba(11,31,26,.45); border-color: rgba(15,76,58,.3) }
.pnw__it::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--green), var(--mint)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease) }
.pnw__it:hover::after { transform: scaleX(1) }
.pnw__n { position: absolute; right: 20px; top: 16px; font-family: var(--serif); font-size: 30px; color: rgba(15,76,58,.12) }
.pnw__ic { width: 46px; height: 46px; border-radius: 14px; background: rgba(15,76,58,.08); display: grid; place-items: center; margin-bottom: 14px } .pnw__ic .ic { width: 22px; height: 22px; color: var(--green) }
.pnw__it b { display: block; font-size: 17px; margin-bottom: 7px } .pnw__it p { color: var(--ink-2); font-size: 14.5px; line-height: 1.55 }
@media (min-width: 700px) { .pnw__grid { grid-template-columns: 1fr 1fr } }
@media (min-width: 1000px) { .pnw { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 44px } }

/* ---- партнёры: блеск по заголовку и живая лента логотипов */
.ph2__h em { background: linear-gradient(100deg, #8A6234 0%, #8A6234 38%, #E4C79A 48%, #8A6234 58%, #8A6234 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sp-up .9s .5s var(--ease) forwards, ph2-sheen 7s 2s ease-in-out infinite }
@keyframes ph2-sheen { 0%, 100% { background-position: 130% 0 } 45% { background-position: -30% 0 } }
.ph2__logos { position: relative; overflow: hidden }
.ph2__logos::after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 22%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); transform: skewX(-14deg); pointer-events: none; animation: ph2-sweep 8s 3s ease-in-out infinite }
@keyframes ph2-sweep { 0% { left: -30%; opacity: 0 } 10% { opacity: 1 } 55%, 100% { left: 115%; opacity: 0 } }
.ph2__logo { animation: sp-up .6s var(--ease) forwards, ph2-float 6s ease-in-out infinite; animation-delay: calc(var(--d, 0ms) + 1.3s), calc(var(--d, 0ms) + 2s) }
@keyframes ph2-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
.ph2__logo:hover { animation-play-state: paused, paused }
@media (prefers-reduced-motion: reduce) { .ph2__logos::after, .ph2__logo { animation: none !important } .ph2__h em { animation: none !important; color: #8A6234; -webkit-text-fill-color: #8A6234 } }

/* ================= КОНТАКТЫ по макету 09.09 ================= */
.cth2 { position: relative; overflow: hidden; background: #EDF3F6; padding: 120px 0 clamp(24px, 3vw, 40px) }
.cth2__bg { position: absolute; right: 0; top: 0; width: 62%; height: 78%; pointer-events: none }
.cth2__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; border-bottom-left-radius: 28px; animation: sp-bg 2s .05s var(--ease) both }
.cth2__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(237,243,246,1) 0%, rgba(237,243,246,.72) 16%, rgba(237,243,246,.12) 40%, rgba(237,243,246,0) 62%), linear-gradient(180deg, rgba(237,243,246,.6) 0%, rgba(237,243,246,0) 28%, rgba(237,243,246,0) 72%, rgba(237,243,246,.9) 100%) }
.cth2__in { position: relative; z-index: 1 } .cth2 .crumbs { color: var(--mute); margin-bottom: 20px }
.cth2__txt { position: relative; max-width: 640px }
.cth2__k { color: #3E5560 } .cth2__k::after { background: var(--green) }
.cth2__h { display: grid; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.3vw, 62px); line-height: 1.06; letter-spacing: -.02em; margin: 12px 0 18px }
.cth2__h span { color: var(--ink); opacity: 0; transform: translateY(16px); animation: sp-up .9s .3s var(--ease) forwards }
.cth2__h em { font-style: normal; color: #2E7D62; opacity: 0; transform: translateY(16px); animation: sp-up .9s .5s var(--ease) forwards }
.cth2__lead { color: var(--ink-2); font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.6; max-width: 48ch; opacity: 0; animation: sp-up .9s .7s var(--ease) forwards }
.cth2__hand { position: absolute; left: calc(100% + 18px); top: 8px; display: grid; font: 500 clamp(17px, 1.7vw, 25px)/1.2 "Caveat", cursive; color: #23333C; transform: rotate(-7deg); white-space: nowrap }
.cth2__hand em { font-style: normal; opacity: 0; animation: sp-up .7s var(--ease) forwards } .cth2__hand em:nth-child(1) { animation-delay: 1.1s } .cth2__hand em:nth-child(2) { animation-delay: 1.3s; padding-left: 14px } .cth2__hand em:nth-child(3) { animation-delay: 1.5s; padding-left: 28px }
.cth2__hand svg { width: 180px; height: 20px; margin: 2px 0 0 22px } .cth2__hand svg path { fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ah-draw 1.1s 1.8s var(--ease) forwards }
.cth2__ways { display: grid; gap: 14px; margin-top: clamp(28px, 4vw, 54px) }
.ctw2 { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid rgba(20,50,70,.08); box-shadow: 0 24px 44px -34px rgba(20,50,70,.45); opacity: 0; transform: translateY(18px); animation: sp-up .8s var(--ease) forwards; animation-delay: calc(var(--d, 0ms) + .8s); transition: transform .4s var(--ease), box-shadow .4s }
.ctw2:hover { transform: translateY(-5px); box-shadow: 0 32px 54px -32px rgba(20,50,70,.5) }
.ctw2__ic { width: 44px; height: 44px; border-radius: 50%; background: #DFF3EA; display: grid; place-items: center; flex: none } .ctw2__ic .ic { width: 20px; height: 20px; color: #1B6B52 }
.ctw2__t { display: grid; gap: 3px; min-width: 0 } .ctw2__t small { font-size: 13px; color: var(--mute) }
.ctw2__t b { font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere } .ctw2__t em { font-style: normal; font-size: 12.5px; color: var(--mute) }
.ctw2__go { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; margin-left: auto; flex: none; color: var(--ink); transition: background .3s, color .3s, transform .3s var(--ease) }
.ctw2:hover .ctw2__go { background: #0F4C3A; color: #fff; border-color: #0F4C3A; transform: translateX(2px) }
@media (min-width: 700px) { .cth2__ways { grid-template-columns: 1fr 1fr } }
@media (min-width: 1100px) { .cth2__ways { grid-template-columns: repeat(4, 1fr) } }
/* карта и форма */
.ctm2 { padding: clamp(22px, 3vw, 34px) 0 clamp(40px, 6vw, 80px) }
.ctm2__grid { display: grid; gap: 16px; align-items: stretch }
.ctm2__map { display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: clamp(20px, 3vw, 30px); border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -46px rgba(11,31,26,.5) }
.ctm2__head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 8px }
.ctm2__head p { color: var(--mute); font-size: 14.5px; max-width: 34ch; margin-bottom: 16px }
.ctm2__frame { position: relative; border-radius: 20px; overflow: hidden; background: var(--bg-2, #EEF4F3); min-height: 260px; border: 1px solid var(--line) }
.ctm2__frame iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; filter: saturate(.9) }
.ctm2__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; padding-top: 14px; border-top: 1px solid var(--line) }
.ctm2__facts span { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.35 } .ctm2__facts .ic { width: 18px; height: 18px; color: var(--green); flex: none }
.ctf2 { display: grid; gap: 12px; align-content: start; padding: clamp(20px, 3vw, 30px); border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -46px rgba(11,31,26,.5) }
.ctf2 h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px) }
.ctf2 > p { color: var(--mute); font-size: 14.5px; margin: -4px 0 6px; max-width: 44ch }
.ctf2__row { display: grid; gap: 12px } @media (min-width: 560px) { .ctf2__row { grid-template-columns: 1fr 1fr } }
.ctf2__btn { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; margin-top: 4px; padding: 8px 8px 8px 26px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #0F4C3A, #07271E); color: #fff; font: inherit; cursor: pointer; box-shadow: 0 22px 40px -24px rgba(15,76,58,.9); transition: transform .3s var(--ease), box-shadow .3s }
.ctf2__btn:hover { transform: translateY(-2px) } .ctf2__btn b { font-size: 16px; font-weight: 600 }
.ctf2__arr { width: 44px; height: 44px; border-radius: 50%; background: var(--mint); color: var(--dark); display: grid; place-items: center; flex: none }
.ctf2__calc { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--line-2, #C6D3CE); background: var(--bg, #F5F8F9); color: var(--ink-2); font: 500 13.5px var(--sans); cursor: pointer; transition: border-color .3s, background .3s }
.ctf2__calc:hover { border-color: var(--green); background: #fff } .ctf2__calc .ic { width: 18px; height: 18px; color: var(--green) } .ctf2__calc .btn__arr { margin-left: auto; color: var(--green) }
@media (min-width: 1000px) { .ctm2__grid { grid-template-columns: 1.05fr .95fr; gap: 22px } }
@media (max-width: 999px) {
  .cth2 { padding: 96px 0 22px }
  .cth2 .crumbs { display: none }
  .cth2__bg { position: relative; width: auto; height: 210px; margin: 14px calc(var(--pad) * -1) 0; order: 2 }
  .cth2__bg img { border-radius: 0 } .cth2__bg::after { background: linear-gradient(180deg, rgba(237,243,246,.5), rgba(237,243,246,0) 40%, rgba(237,243,246,.75)) }
  .cth2__in { display: flex; flex-direction: column }
  .cth2__txt { order: 1; max-width: none }
  .cth2__ways { order: 3; margin-top: 18px }
  .cth2__h { font-size: clamp(30px, 8.6vw, 44px) }
  .cth2__hand { position: static; margin: 16px 0 0 auto; width: max-content }
  .ctm2__facts { grid-template-columns: 1fr }
}
@media (max-width: 900px) { .ph2__logo { min-width: 0 } .ph2__lane { gap: 14px 6px } }

/* ---- контакты, мобильная версия по макету 09.09 ---- */
@media (max-width: 900px) {
  .cth2 { padding: 96px 0 20px }
  .cth2__bg { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; order: 0 }
  .cth2__bg picture { display: block; position: absolute; inset: 0 }
  .cth2__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; border-radius: 0 }
  .cth2__bg::after { background: linear-gradient(180deg, rgba(237,243,246,.97) 0%, rgba(237,243,246,.92) 22%, rgba(237,243,246,.55) 38%, rgba(237,243,246,.12) 52%, rgba(237,243,246,.5) 76%, rgba(237,243,246,.95) 100%) }
  .cth2__in { display: block }
  .cth2__txt { position: relative; z-index: 1; padding-top: 4px }
  .cth2__h { font-size: clamp(30px, 8.8vw, 44px); max-width: 12ch }
  .cth2__lead { max-width: 34ch; font-size: 15px }
  .cth2__hand { position: absolute; right: 0; top: 46px; margin: 0; font-size: clamp(16px, 4.4vw, 21px); z-index: 2 }
  .cth2__hand svg { width: 132px; margin-left: 16px }
  .cth2__ways { position: relative; z-index: 1; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: min(34vh, 300px) }
  .ctw2 { flex-direction: column; gap: 10px; padding: 14px }
  .ctw2__go { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px }
  .ctw2__t small { font-size: 12px } .ctw2__t b { font-size: 15px } .ctw2__t em { font-size: 11.5px }
  .ctm2 { padding-top: 14px }
  .ctm2__map { grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; gap: 12px 14px; align-items: start; padding: 16px }
  .ctm2__head { grid-column: 1 } .ctm2__head h2 { font-size: 21px } .ctm2__head p { font-size: 13px; margin-bottom: 12px }
  .ctm2__head .btn { padding: 11px 16px; font-size: 13.5px }
  .ctm2__frame { grid-column: 2; grid-row: 1; min-height: 200px }
  .ctm2__facts { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center }
  .ctm2__facts span { flex-direction: column; gap: 6px; font-size: 10.5px; line-height: 1.25; align-items: center }
  .ctf2 { padding: 18px }
  .ctf2 h2 { font-size: 22px } .ctf2 > p { font-size: 13.5px }
}
@media (max-width: 900px) {
  .cth2__txt { position: relative }
  .cth2__hand { top: 4px; right: 2px; left: auto; white-space: nowrap; text-align: right; font-size: clamp(15px, 4.1vw, 19px) }
  .cth2__hand em:nth-child(2) { padding-left: 10px } .cth2__hand em:nth-child(3) { padding-left: 20px }
  .cth2__hand svg { width: 110px; margin: 2px 0 0 auto; display: block }
  .cth2__h { margin-top: 26px }
}

/* ================= Врезка «нужна перевозка» ================= */
.cta3 { padding: clamp(40px, 6vw, 74px) 0 0 }
.cta3__card { position: relative; overflow: hidden; display: grid; gap: 28px; padding: clamp(26px, 4vw, 52px); border-radius: 30px; background: radial-gradient(120% 110% at 88% 8%, #14654B 0%, #0B3C2E 44%, #06201A 100%); color: #fff; box-shadow: 0 50px 90px -50px rgba(6,32,26,.8) }
.cta3__card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px) 0 0/22px 22px; -webkit-mask: radial-gradient(80% 70% at 20% 20%, #000, transparent 78%); mask: radial-gradient(80% 70% at 20% 20%, #000, transparent 78%); pointer-events: none }
.cta3__txt { position: relative; z-index: 2; max-width: 620px }
.cta3__h { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.06; margin: 10px 0 14px }
.cta3__p { color: rgba(255,255,255,.76); font-size: 16px; line-height: 1.6; max-width: 52ch }
.cta3__act { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 26px }
.cta3__btn { display: inline-flex; align-items: center; gap: 16px; padding: 8px 8px 8px 26px; border-radius: 999px; background: #fff; color: var(--dark); transition: transform .3s var(--ease), box-shadow .3s }
.cta3__btn:hover { transform: translateY(-3px); box-shadow: 0 26px 46px -24px rgba(0,0,0,.7) }
.cta3__btn b { font-size: 16px; font-weight: 600 }
.cta3__arr { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(140deg, var(--mint), #35C79A); color: var(--dark); display: grid; place-items: center; flex: none }
.cta3__wa { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 500 } .cta3__wa .ic { width: 20px; height: 20px; color: var(--mint) }
.cta3__facts { position: relative; z-index: 2; display: grid; gap: 12px }
.cta3__facts > div { padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); opacity: 0; transform: translateY(14px); animation: sp-up .8s var(--ease) forwards; animation-delay: calc(var(--d, 0ms) + .35s) }
.cta3__ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(143,240,207,.14); border: 1px solid rgba(143,240,207,.26); display: grid; place-items: center; margin-bottom: 10px } .cta3__ic .ic { width: 19px; height: 19px; color: var(--mint) }
.cta3__facts b { display: block; font-size: 15.5px; font-weight: 600 } .cta3__facts span { font-size: 12.5px; color: rgba(255,255,255,.6) }
@media (min-width: 900px) { .cta3__card { grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center } .cta3__facts { grid-template-columns: 1fr } }
@media (max-width: 899px) { .cta3__facts { grid-template-columns: 1fr } .cta3__facts > div { display: flex; align-items: center; gap: 12px; padding: 12px 14px } .cta3__ic { margin: 0; width: 34px; height: 34px } .cta3__facts b { font-size: 14px } .cta3__facts span { margin-left: auto; text-align: right } .cta3__act .cta3__btn { width: 100%; justify-content: space-between } }
/* лента партнёров: единый размер карточек и логотипов */
.pt__it { height: 84px; padding: 0 30px; min-width: 210px; justify-content: center }
.pt__it img { max-height: 34px; max-width: 150px; width: auto; object-fit: contain }
.pt__it span { font-family: var(--serif); font-size: 19px; color: var(--ink-2); white-space: nowrap }
@media (max-width: 899px) { .pt__it { height: 72px; min-width: 168px; padding: 0 20px } .pt__it img { max-height: 26px; max-width: 118px } }

/* ================= FAQ: премиальная подача ================= */
.faq__grid { display: grid; gap: 26px; align-items: start }
.faq__h { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.06; margin: 10px 0 14px }
.faq__lead { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; max-width: 44ch }
.faq__help { display: grid; gap: 10px; margin-top: 24px }
.faq__ai { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 999px; border: 0; background: radial-gradient(120% 120% at 85% 0%, #14654B, #06201A); color: #fff; cursor: pointer; text-align: left; transition: transform .3s var(--ease), box-shadow .3s }
.faq__ai:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -24px rgba(6,32,26,.8) }
.faq__ai-av { position: relative; width: 44px; height: 44px; flex: none } .faq__ai-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover }
.faq__ai-av em { position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #35C79A; border: 2px solid #06201A }
.faq__ai b { display: block; font-size: 15px; font-weight: 600 } .faq__ai small { font-size: 12px; color: rgba(255,255,255,.65) }
.faq__ai .btn__arr { margin-left: auto; color: var(--mint) }
.faq__wa { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 500; font-size: 14.5px; width: max-content; transition: border-color .3s, transform .3s var(--ease) }
.faq__wa:hover { border-color: var(--green); transform: translateY(-2px) } .faq__wa .ic { width: 19px; height: 19px; color: #25D366 }
.faq__list { max-width: none }
.faq__it { border-radius: 18px; padding: 0 24px; border-color: rgba(20,50,40,.1); transition: box-shadow .35s, border-color .35s, transform .35s var(--ease) }
.faq__it:hover { border-color: rgba(15,76,58,.3) }
.faq__it[open] { box-shadow: 0 26px 44px -32px rgba(11,31,26,.45); border-color: rgba(15,76,58,.28) }
.faq__it summary { gap: 14px; padding: 20px 0; align-items: flex-start }
.faq__it summary em { font-style: normal; font-family: var(--serif); font-size: 15px; color: var(--mute-2); flex: none; padding-top: 2px; transition: color .3s }
.faq__it[open] summary em { color: var(--green) }
.faq__it summary span { flex: 1; line-height: 1.4 }
.faq__it summary i { margin-top: 2px }
.faq__a { padding-left: 30px }
@media (min-width: 1000px) { .faq__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 46px } .faq__side { position: sticky; top: 100px } }

/* ================= карточки перевозок: премиальная подача ================= */
.ship { border-radius: 24px; border-color: rgba(20,50,40,.1); box-shadow: 0 18px 40px -34px rgba(11,31,26,.5) }
.ship:hover { transform: translateY(-6px); box-shadow: 0 34px 56px -34px rgba(11,31,26,.5); border-color: rgba(15,76,58,.28) }
.ship__img { aspect-ratio: 16/11 }
.ship__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,32,26,0) 45%, rgba(6,32,26,.55)); opacity: .9 }
.ship__ph, .ship__date { z-index: 1; backdrop-filter: blur(8px); font-size: 11.5px; letter-spacing: .02em }
.ship__ph { background: rgba(6,32,26,.55); border: 1px solid rgba(255,255,255,.2) }
.ship__date { background: rgba(255,255,255,.92) }
.ship__body { padding: 18px 20px 20px; gap: 8px }
.ship__route { font-size: clamp(17px, 1.4vw, 21px); letter-spacing: .02em }
.ship__arr { transition: transform .4s var(--ease) } .ship:hover .ship__arr { transform: translateX(4px) }
.ship__cargo { font-size: 14.5px; color: var(--ink-2) }
.ship__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px }
.ship__meta span { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 999px; background: var(--bg-2, #EEF4F3); border: 1px solid var(--line); font-size: 12px; color: var(--ink-2) }
.ship__more { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--green) }
.ship__more .circ { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(15,76,58,.3); position: relative; transition: background .3s, border-color .3s, transform .3s var(--ease) }
.ship__more .circ::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border: solid var(--green); border-width: 1.4px 1.4px 0 0; transform: translate(-60%, -50%) rotate(45deg) }
.ship:hover .ship__more .circ { background: var(--green); border-color: var(--green); transform: translateX(3px) } .ship:hover .ship__more .circ::after { border-color: #fff }
/* услуги, мобильная шапка: фото во всю ширину экрана (Иван, 09.09) */
@media (max-width: 899px) {
  .sh__pic { width: calc(100% + var(--pad) * 2); margin: 0 calc(var(--pad) * -1) 20px; aspect-ratio: 5/4; max-height: 42vh; border-radius: 0 0 26px 26px }
  .sh__pic img { object-position: 55% 50% }
  .sh__pic-hand { right: 18px; bottom: 18px }
}
/* перевозки, мобилка: карточки типов груза — крупнее, с подписями, без кружков-стрелок (Иван, 09.09) */
@media (max-width: 900px) {
  .shh2__cards { grid-template-columns: 1fr 1fr; gap: 10px }
  .shc { padding: 10px 10px 12px; border-radius: 18px; gap: 10px }
  .shc__pic { aspect-ratio: 16/10; order: -1 }
  .shc__pic::after, .shc__pic::before { display: none }
  .shc__top { flex-direction: row; align-items: center; gap: 9px; padding: 0 2px }
  .shc__top .ic { width: 18px; height: 18px; color: var(--mint); flex: none }
  .shc__top b { position: static; width: auto; height: auto; clip-path: none; overflow: visible; font-size: 13.5px; font-weight: 600; line-height: 1.25 }
  .shc__top .btn__arr { display: none }
  .shc:active { transform: scale(.985) }
}
@media (max-width: 380px) { .shc__top b { font-size: 12.5px } }
@media (max-width: 899px) { .sh__pic-hand { right: 26px; bottom: 20px; transform-origin: right center; font-size: 16px } }
/* перевозки: преимущества вынесены под карточки (мобилка) и под текст (десктоп) */
.shh2__in { display: flex; flex-direction: column }
.shh2__grid { order: 1 } .shh2__feats { order: 3 } .shh2__cards { order: 2 }
@media (min-width: 1000px) { .shh2__feats { order: 2; margin-top: 24px; max-width: 620px } .shh2__cards { order: 3 } }
@media (max-width: 999px) {
  .shh2__feats { margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; border-radius: 18px; background: rgba(6,24,42,.55); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px) }
  .shh2__feats > div { flex: none; font-size: 12.5px; gap: 10px; text-shadow: none }
  .shh2__feats > div:last-child { grid-column: 1 / -1 }
  .shh2__feats .ic { width: 20px; height: 20px; color: var(--mint) }
}
@media (max-width: 900px) { .shh2 { padding-bottom: calc(104px + env(safe-area-inset-bottom)) } }
/* фильтр перевозок: аккуратный прелоадер вместо перезагрузки */
.ships__grid { position: relative; transition: opacity .25s }
.ships__grid.is-loading { opacity: .5; pointer-events: none }
.ships__grid.is-loading::after { content: ""; position: absolute; left: 50%; top: 90px; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; border: 2px solid rgba(15,76,58,.18); border-top-color: var(--green); animation: shl-spin .8s linear infinite; z-index: 2 }
@keyframes shl-spin { to { transform: rotate(1turn) } }
.ship { animation: shl-in .5s var(--ease) both }
@keyframes shl-in { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@media (max-width: 999px) { .shh2__feats > div:last-child { grid-column: auto } }

/* ---- «Полный цикл»: премиальная карточка расчёта и читаемая рукопись (Иван, 09.09) */
.cyc__cta { position: relative; overflow: hidden; align-items: center; gap: 18px; padding: 20px 20px 20px 24px; border-radius: 24px; background: radial-gradient(120% 130% at 88% 0%, #14654B 0%, #0B3C2E 46%, #06201A 100%); box-shadow: 0 30px 56px -34px rgba(6,32,26,.85) }
.cyc__cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px) 0 0/20px 20px; -webkit-mask: radial-gradient(70% 80% at 15% 20%, #000, transparent 80%); mask: radial-gradient(70% 80% at 15% 20%, #000, transparent 80%); pointer-events: none }
.cyc__cta > * { position: relative; z-index: 1 }
.cyc__cta b { font-size: 17px; letter-spacing: -.01em }
.cyc__cta-t { color: rgba(255,255,255,.72); font-size: 13px; max-width: 26ch }
.cyc__cta .cyc__dash--light { display: none }
.cyc__cta-arr { width: 50px; height: 50px; background: linear-gradient(140deg, #A6F5D8, var(--mint) 60%, #4FD3A8); transition: transform .35s var(--ease) }
.cyc__cta:hover { transform: translateY(-3px); box-shadow: 0 36px 64px -32px rgba(6,32,26,.9) }
.cyc__cta:hover .cyc__cta-arr { transform: translateX(3px) }
@media (max-width: 599px) {
  .cyc__cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 16px; padding: 20px 18px }
  .cyc__cta b { grid-column: 1; font-size: 17px }
  .cyc__cta-t { grid-column: 1; grid-row: 2; max-width: none; font-size: 12.5px }
  .cyc__cta-arr { grid-column: 2; grid-row: 1 / span 2; margin: 0 }
}
/* рукопись под фото на светлом фоне — тёмная, с мятным штрихом */
@media (max-width: 899px) {
  .cyc__stage .cyc__hand { color: #0F4C3A; text-shadow: none; margin: 16px 0 4px; font-weight: 600 }
  .cyc__stage .cyc__hand svg path { stroke: var(--mint); stroke-width: 2 }
}


/* Казахская версия: в Playfair Display нет Ә Қ Ң Ө Ү Һ, они подставлялись системным
   шрифтом — внутри слова буквы выглядели разного размера и рисунка. */
html[lang="kk"] { --serif: 'Noto Serif Display', 'Playfair Display', Georgia, serif }

/* окно расчёта: прокручивается активная вкладка, нижняя кнопка не уходит за край (замечания клиента 14.09) */
.qm__pane { overflow-y: auto; overscroll-behavior: contain }
@media (min-width: 900px) { .qm__form, .qm__pane { max-height: calc(100dvh - 32px - 76px) } }
@media (max-width: 899px) { .qm__form, .qm__pane { max-height: calc(92dvh - 64px) } }
/* контакты: плитка с двумя мессенджерами */
.ctw2--duo b a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px } .ctw2--duo b a:hover { color: var(--green) }
/* в прокручиваемой вкладке блоки не сжимаются (иначе карточка «Оплата пойдёт за» обрезалась) */
.qm__form > *, .qm__pane > * { flex-shrink: 0 }
/* стрелка в кнопке шапки: старые отступы от круглой версии уводили наконечник влево («>—») */
.hdr__cta-arr .btn__arr { width: 16px; height: 10px; border-radius: 0; background: none } .hdr__cta-arr .btn__arr::before { left: 0; width: 15px } .hdr__cta-arr .btn__arr::after { right: 0 }
.qm__form, .qm__pane { grid-auto-rows: max-content }

/* Лента партнёров в шапке страницы «Партнёры»: логотипы приходят из панели и едут
   по кругу на всех экранах (заказчик 17.09.2026: «список статичен, а в мобильной двигается»). */
.ph2__lane--run { display: flex; gap: 18px; overflow: hidden; min-width: 0; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent) }
.ph2__lane--run .ph2__track { display: flex; align-items: center; gap: 18px; flex: none; animation: pt-scroll 34s linear infinite }
.ph2__lane--run:hover .ph2__track { animation-play-state: paused }
.ph2__lane--run .ph2__logo { flex: none; width: 150px; opacity: 1; animation: none; padding: 0 6px }
.ph2__lane--run .ph2__logo + .ph2__logo::before { display: none }
.ph2__lane--run .ph2__logo-t { font: 600 13px var(--sans); color: #43535F; white-space: nowrap }
@media (max-width: 899px) {
  .ph2__lane--run { display: flex; grid-template-columns: none; gap: 12px }
  .ph2__lane--run .ph2__track { gap: 12px; animation-duration: 26s }
  .ph2__lane--run .ph2__logo { width: 116px }
}
@media (prefers-reduced-motion: reduce) { .ph2__lane--run .ph2__track { animation: none } }