/* =========================================================
   СофтБухПлюс — главная страница.
   Палитра — фирменный тёмно-синий с сайта и спокойный голубой
   вместо яркого сине-фиолетового: ощущение надёжности.
   ========================================================= */
:root {
  --sky: #3b97e0;
  --sky-600: #2380cc;
  --sky-700: #1a68a8;
  --sky-50: #eef6fd;
  --sky-100: #d7e9f8;
  --navy: #0c2a52;
  --navy-900: #071b38;
  --navy-800: #0a2346;
  --coral: #ff8562;
  --ink: #0d2240;
  --text: #45566c;
  --muted: #74859a;
  --line: #e2e9f1;
  --bg: #ffffff;
  --bg-soft: #f3f7fb;
  --ok: #1f9d6b;
  --r-sm: 12px;
  --r: 20px;
  --r-lg: 32px;
  --shadow-sm: 0 2px 8px rgba(12, 42, 82, .06);
  --shadow: 0 12px 40px -12px rgba(12, 42, 82, .18);
  --shadow-lg: 0 30px 80px -20px rgba(12, 42, 82, .3);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-h: 'Montserrat', 'Manrope', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--text);
  background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
h1, h2, h3, p, blockquote { margin: 0; }
b, strong { color: var(--ink); font-weight: 700; }
:focus-visible { outline: 2px solid var(--sky-600); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--navy); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }

.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.section { padding: 110px 0; position: relative; }

/* ---------- типографика ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sky-700); margin-bottom: 16px;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow--light { color: #8cc6f2; }
.eyebrow--light::before { display: none; }
.h2 { font-family: var(--font-h); font-size: clamp(28px, 3.3vw, 46px); line-height: 1.12; font-weight: 800; color: var(--ink); letter-spacing: -.025em; }
.h2--light { color: #fff; }
.grad { background: linear-gradient(95deg, var(--sky-600), var(--navy) 130%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad--light { background: linear-gradient(95deg, #9fd2f7, var(--sky) 120%); -webkit-background-clip: text; background-clip: text; }
.lead { font-size: 18px; color: var(--text); }
.lead--light { color: rgba(255, 255, 255, .78); }

.sec-head { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: end; margin-bottom: 52px; }
.sec-head__side { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; font-size: 16px; }
.sec-head--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sec-head--center .h2 { max-width: 860px; }
.link-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sky-700); }
.link-more .ico--arrow { transition: transform .35s var(--ease); }
.link-more:hover .ico--arrow { transform: translateX(5px); }

/* ---------- кнопки ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s; overflow: hidden; isolation: isolate;
}
.btn--sm { height: 42px; padding: 0 20px; font-size: 14px; }
.btn--lg { height: 60px; padding: 0 32px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--2l { flex-direction: column; gap: 2px; height: auto !important; min-height: 68px; padding-top: 12px !important; padding-bottom: 12px !important; line-height: 1.25; white-space: nowrap !important; }
.btn--primary {
  color: #fff; background: linear-gradient(135deg, var(--sky) 0%, var(--sky-600) 100%);
  box-shadow: 0 10px 24px -8px rgba(35, 128, 204, .6);
}
/* наведение: кнопка приподнимается, а из точки под курсором «разливается» тёмно-синяя заливка */
.btn--primary::after {
  content: ''; position: absolute; z-index: -1; left: var(--bx, 50%); top: var(--by, 50%);
  width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; transform: scale(0);
  background: radial-gradient(circle, var(--sky-700) 0%, var(--navy) 60%);
  transition: transform .65s var(--ease);
}
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -12px rgba(12, 42, 82, .6); }
.btn--primary:hover::after { transform: scale(1); }
.btn--primary:active { transform: translateY(-1px) scale(.98); }
/* главные кнопки мягко «дышат» голубым ореолом — привлекают внимание без блика */
.btn--shine { animation: pulseRing 2.8s ease-out infinite; }
.btn--shine:hover { animation: none; }
@keyframes pulseRing {
  0% { box-shadow: 0 10px 24px -8px rgba(35, 128, 204, .6), 0 0 0 0 rgba(59, 151, 224, .45); }
  70%, 100% { box-shadow: 0 10px 24px -8px rgba(35, 128, 204, .6), 0 0 0 14px rgba(59, 151, 224, 0); }
}
.btn--ghost { color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn--ghost .ico--xs { color: currentColor; width: 18px; height: 18px; }
.btn--ghost-dark { color: var(--navy); background: var(--bg-soft); border: 1px solid var(--line); }
.btn--ghost-dark:hover { background: var(--sky-50); border-color: var(--sky-100); }
.btn--tg { color: #fff; background: #2aa3e0; box-shadow: 0 10px 22px -10px rgba(42, 163, 224, .7); }
.btn--tg:hover { background: #1d8fc8; }
.btn--tg svg { width: 18px; height: 18px; fill: currentColor; }
.btn .ico--arrow { width: 18px; height: 18px; transition: transform .35s var(--ease); }
/* стрелка «улетает» вправо и возвращается слева */
.btn:hover .ico--arrow { animation: arrowLoop .6s var(--ease); }
@keyframes arrowLoop { 0% { transform: none; } 45% { transform: translateX(14px); opacity: 0; } 46% { transform: translateX(-14px); opacity: 0; } 100% { transform: none; opacity: 1; } }

.dot-live { width: 8px; height: 8px; border-radius: 50%; background: #5fd08f; position: relative; display: inline-block; flex: none; }
.dot-live::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #5fd08f; animation: ping 1.8s ease-out infinite; }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

.glass { background: rgba(255, 255, 255, .8); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .65); }

/* =========================================================
   АНИМИРОВАННЫЕ ИКОНКИ
   ========================================================= */
.ico { display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; color: var(--navy); position: relative; }
.ico svg { width: 100%; height: 100%; overflow: visible; }
.ico--xs { width: 16px; height: 16px; color: var(--sky); }
.ico--sm { width: 36px; height: 36px; padding: 7px; border-radius: 10px; background: var(--sky-50); }
.ico--md { width: 60px; height: 60px; padding: 12px; border-radius: 18px; background: linear-gradient(145deg, var(--sky-50), #fff); box-shadow: inset 0 0 0 1px var(--sky-100); }
.ico--lg { width: 76px; height: 76px; padding: 15px; border-radius: 22px; background: linear-gradient(145deg, var(--sky-50), #fff); box-shadow: inset 0 0 0 1px var(--sky-100); }
.ico--glass { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); color: #fff; backdrop-filter: blur(8px); }
.ico--arrow { width: 20px; height: 20px; color: currentColor; }
.ico .ac { color: var(--sky-600); stroke: currentColor; }
.ico--glass .ac { color: #8cc6f2; }

/* «бегущая рамка» вокруг иконки при наведении на карточку (Border Beam) */
.ico--md::before, .ico--lg::before {
  content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; opacity: 0;
  background: conic-gradient(from var(--a, 0deg), transparent 0 70%, var(--sky) 85%, var(--navy) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .4s;
}
[data-replay]:hover .ico--md::before, [data-replay]:hover .ico--lg::before { opacity: 1; animation: beam 2.2s linear infinite; }
@property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes beam { to { --a: 360deg; } }

/* прорисовка контуров */
.ico .d, .ico .ac.check, .ico .ac.wave, .ico .ac.slash { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ico .noline { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; fill: currentColor; }
.ico.in .d { animation: draw 1.1s var(--ease) forwards; animation-delay: calc(var(--i, 0) * .13s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.ico.in .ac.check, .ico.in .ac.wave, .ico.in .ac.slash { animation: loopdraw 4.2s var(--ease) infinite; animation-delay: calc(.6s + var(--i, 0) * .15s); }
@keyframes loopdraw { 0% { stroke-dashoffset: 1; } 25%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.ico .tw { transform-box: view-box; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { transform: scale(.2) rotate(0); opacity: 0; } 40%, 60% { transform: scale(1) rotate(90deg); opacity: 1; } }
.ico .pop { transform-box: fill-box; transform-origin: center; animation: pop 2.8s var(--ease) infinite; }
@keyframes pop { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.14); } }
.ico .float { animation: floatY 3s ease-in-out infinite; }
@keyframes floatY { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(2px); } }
.ico .blink { transform-box: fill-box; transform-origin: center; animation: blink 3.6s infinite; }
@keyframes blink { 0%, 90%, 100% { opacity: 1; } 94% { opacity: .15; } }
.ico .zz { animation: zz 2.8s ease-in infinite; }
@keyframes zz { 0% { transform: translate(-3px, 6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(2px, -6px); opacity: 0; } }
.ico .spin { transform-box: view-box; animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ico .tick { transform-box: view-box; animation: spin 10s steps(60) infinite; }
.ico .swing { transform-box: view-box; animation: swing 3s ease-in-out infinite; }
@keyframes swing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.ico .ring { transform-box: view-box; transform-origin: 24px 24px; animation: ringshake 2.4s ease-in-out infinite; }
@keyframes ringshake { 0%, 55%, 100% { transform: rotate(0); } 60% { transform: rotate(-10deg); } 65% { transform: rotate(9deg); } 70% { transform: rotate(-7deg); } 75% { transform: rotate(5deg); } 80% { transform: rotate(0); } }
.ico .bow { transform-box: view-box; transform-origin: 24px 18px; animation: bow 2.4s var(--ease) infinite; }
@keyframes bow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1) translateY(-1px); } }
.ico:not(.in) .ac, .ico:not(.in) .ac * { animation: none !important; }

/* =========================================================
   ВЕРХНЯЯ ПОЛОСА И ШАПКА
   ========================================================= */
.topbar { background: var(--navy-900); color: rgba(255, 255, 255, .78); font-size: 13px; }
.topbar__in { display: flex; justify-content: space-between; align-items: center; height: 40px; gap: 20px; }
.topbar__promo { display: flex; align-items: center; gap: 10px; }
.topbar__promo b { color: #fff; }
.topbar__right { display: flex; gap: 26px; }
.topbar__item { display: inline-flex; align-items: center; gap: 7px; transition: color .2s; }
.topbar__item .ico--xs { color: #8cc6f2; }
a.topbar__item:hover { color: #8cc6f2; }

.header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .88); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid transparent; transition: box-shadow .3s, border-color .3s; }
.header.is-scrolled { box-shadow: 0 8px 30px -12px rgba(12, 42, 82, .18); border-color: var(--line); }
.header__in { display: flex; align-items: center; gap: 24px; height: 84px; transition: height .35s var(--ease); }
.header.is-scrolled .header__in { height: 70px; }

.logo { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.logo__mark { width: 42px; height: 42px; transition: transform .6s var(--ease); }
.logo__mark rect { fill: var(--sky-600); }
.logo__mark .logo__hole { fill: #fff; }
.logo__plus { fill: none; stroke: var(--sky); stroke-width: 3.4; stroke-linecap: round; transform-origin: 41px 7px; }
.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.04); }
.logo:hover .logo__plus { animation: plusSpin .8s var(--ease); }
@keyframes plusSpin { to { transform: rotate(180deg); } }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__text b { font-family: var(--font-h); font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.logo__text em { font-style: normal; color: var(--sky-600); }
.logo__text small { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 5px; font-weight: 700; }
.logo--light .logo__text b { color: #fff; }
.logo--light .logo__text em { color: #8cc6f2; }
.logo--light .logo__text small { color: rgba(255, 255, 255, .5); }
.logo--light .logo__mark .logo__hole { fill: var(--navy-900); }

.nav { position: relative; display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.nav__pill { position: absolute; top: 50%; left: 0; height: 40px; border-radius: 999px; background: var(--sky-50); transform: translateY(-50%); opacity: 0; transition: left .4s var(--ease), width .4s var(--ease), opacity .25s; pointer-events: none; }
.nav__item { position: relative; }
.nav__link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 14px; font-weight: 600; font-size: 15px; color: var(--ink); border-radius: 999px; transition: color .2s; }
.nav__link:hover, .nav__item:hover > .nav__link { color: var(--sky-700); }
.chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .3s var(--ease); }
.nav__item:hover .chev { transform: rotate(180deg); }

.drop, .mega { position: absolute; top: calc(100% + 14px); opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); transform-origin: top center; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
.nav__item:hover > .drop, .nav__item:focus-within > .drop, .nav__item:hover > .mega, .nav__item:focus-within > .mega { opacity: 1; visibility: visible; transform: none; }
.drop::before, .mega::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.drop { left: 50%; margin-left: -160px; width: 320px; padding: 10px; background: #fff; border-radius: var(--r); box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.drop a { display: flex; flex-direction: column; padding: 11px 14px; border-radius: 12px; transition: background .2s, transform .25s var(--ease); }
.drop a b { font-size: 15px; font-weight: 700; }
.drop a span { font-size: 13px; color: var(--muted); }
.drop a:hover { background: var(--bg-soft); transform: translateX(4px); }
.drop a:hover b { color: var(--sky-700); }

.mega { left: -200px; width: min(1000px, 92vw); background: #fff; border-radius: 26px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); overflow: hidden; }
.mega__in { display: grid; grid-template-columns: 1.7fr 1fr 240px; gap: 28px; padding: 28px; }
.mega__title { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: 14px; }
.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.mega__list { display: grid; gap: 2px; }
.mega__grid a, .mega__list a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; font-weight: 600; font-size: 14.5px; color: var(--ink); transition: background .2s, color .2s; }
.mega__grid a:hover, .mega__list a:hover { background: var(--bg-soft); color: var(--sky-700); }
.mega__grid a:hover .ico--sm, .mega__list a:hover .ico--sm { background: #fff; box-shadow: var(--shadow-sm); }
.mega__promo { position: relative; border-radius: 20px; overflow: hidden; min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 22px; color: rgba(255, 255, 255, .78); isolation: isolate; background: linear-gradient(160deg, var(--sky-600), var(--navy) 80%); }
.mega__promo::before { content: ''; position: absolute; width: 240px; height: 240px; right: -90px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(140, 198, 242, .55), transparent 65%); z-index: -1; transition: transform .8s var(--ease); }
.mega__promo:hover::before { transform: scale(1.3); }
.mega__promo-tag { position: absolute; top: 18px; left: 18px; background: var(--coral); color: #fff; font-weight: 800; font-size: 14px; padding: 5px 12px; border-radius: 999px; }
.mega__promo-title { font-family: var(--font-h); font-size: 20px; font-weight: 800; line-height: 1.2; color: #fff; }
.mega__promo-text { font-size: 13.5px; line-height: 1.4; }
.mega__promo-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: #fff; margin-top: 6px; }

.header__actions { display: flex; align-items: center; gap: 16px; }
.header__phone { display: flex; align-items: center; gap: 10px; }
.header__phone span { display: flex; flex-direction: column; line-height: 1.2; }
.header__phone b { font-size: 16px; white-space: nowrap; }
.header__phone small { font-size: 12px; color: var(--muted); }
.burger { display: none; width: 46px; height: 46px; border-radius: 14px; background: var(--bg-soft); flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger span { width: 20px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .35s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mmenu { position: fixed; inset: 0; top: 70px; z-index: 99; background: #fff; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: .35s var(--ease); overflow-y: auto; }
.mmenu.is-open { transform: none; opacity: 1; visibility: visible; }
.mmenu__in { padding: 20px 20px 40px; display: flex; flex-direction: column; gap: 4px; }
.mmenu details { border-bottom: 1px solid var(--line); }
.mmenu summary { list-style: none; padding: 16px 4px; font-weight: 700; font-size: 18px; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; }
.mmenu summary::-webkit-details-marker { display: none; }
.mmenu summary::after { content: '+'; color: var(--sky-600); font-size: 22px; line-height: 1; }
.mmenu details[open] summary::after { content: '–'; }
.mmenu details a { display: block; padding: 9px 4px 9px 14px; color: var(--text); }
.mmenu details[open] { padding-bottom: 10px; }
.mmenu__link { padding: 16px 4px; font-weight: 700; font-size: 18px; color: var(--ink); border-bottom: 1px solid var(--line); }
.mmenu .btn { margin-top: 20px; }
.mmenu__phone { text-align: center; margin-top: 14px; font-weight: 800; font-size: 20px; color: var(--navy); }

/* =========================================================
   ПЕРВЫЙ ЭКРАН
   ========================================================= */
.hero__card { position: relative; overflow: hidden; background: var(--navy-900); isolation: isolate; }
.hero__bg { position: absolute; inset: -30px; z-index: -3; background: url(../img/hero-office.webp) 70% 40% / cover no-repeat; transform: scale(1.04); animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.12) translate(-1.5%, -1%); } }
.hero__shade { position: absolute; inset: 0; z-index: -2; background:
  linear-gradient(90deg, rgba(7, 27, 56, .96) 0%, rgba(12, 42, 82, .88) 36%, rgba(12, 42, 82, .5) 62%, rgba(35, 128, 204, .28) 100%),
  linear-gradient(0deg, rgba(7, 27, 56, .75), transparent 45%); }
.hero__grid-bg { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(140, 198, 242, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 198, 242, .1) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 40% 70% at 18% 50%, #000, transparent 70%); mask-image: radial-gradient(ellipse 40% 70% at 18% 50%, #000, transparent 70%); }
.hero__inner { position: relative; min-height: 780px; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 20px; padding-top: 70px; padding-bottom: 60px; }
.hero__content { max-width: 640px; color: rgba(255, 255, 255, .8); padding-bottom: 70px; }
.hero__title { font-family: var(--font-h); font-size: clamp(34px, 3.9vw, 56px); line-height: 1.06; font-weight: 800; color: #fff; letter-spacing: -.03em; margin-bottom: 22px; }
.hero__rotate { display: block; color: #8cc6f2; }
.rotator { position: relative; display: inline-grid; vertical-align: bottom; perspective: 600px; }
.rotator > span { grid-area: 1 / 1; opacity: 0; transform: translateY(60%) rotateX(-70deg); filter: blur(6px); transition: .7s var(--ease); white-space: nowrap; }
.rotator > span.is-active { opacity: 1; transform: none; filter: none; }
.rotator > span.is-out { opacity: 0; transform: translateY(-60%) rotateX(70deg); filter: blur(6px); }
.hero__lead { font-size: 18px; max-width: 540px; margin-bottom: 34px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* сотрудницы на первом экране */
.hero__team { position: relative; align-self: stretch; min-height: 600px; }
.hero__halo { position: absolute; left: 58%; bottom: 0; width: 620px; height: 620px; margin-left: -310px; border-radius: 50%; background: radial-gradient(circle, rgba(59, 151, 224, .55) 0%, rgba(59, 151, 224, .18) 45%, transparent 68%); animation: halo 8s ease-in-out infinite; }
@keyframes halo { 50% { transform: scale(1.08) translateY(-10px); } }
.hero__person { position: absolute; bottom: -60px; height: auto; filter: drop-shadow(0 30px 40px rgba(7, 27, 56, .45)); animation: personIn 1.2s var(--ease) both; }
.hero__person--back { left: -2%; width: 81%; max-width: 590px; animation-delay: .15s; }
.hero__person--front { right: -13%; width: 70%; max-width: 505px; z-index: 2; animation-delay: .35s; }
/* компьютер: свои размеры Ольги и Галины на первом экране */
@media (min-width: 1101px) {
  .hero__person--back { width: 74.5%; max-width: 543px; }
  .hero__person--front { width: 77%; max-width: 556px; }
}
@keyframes personIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.hero__tag { position: absolute; z-index: 3; display: flex; flex-direction: column; padding: 12px 18px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .55));
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 16px 40px -16px rgba(7, 27, 56, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
  animation: personIn 1s var(--ease) .8s both; }
.hero__tag span { display: block; }
.hero__tag b { display: block; font-size: 15px; line-height: 1.25; color: var(--navy); }
.hero__tag small { font-size: 12.5px; color: var(--sky-700); font-weight: 600; line-height: 1.3; display: block; }
.hero__tag--a { right: -6%; bottom: 150px; }
.hero__tag--b { left: -2%; bottom: 210px; }

/* полоса преимуществ поверх первого экрана */
.features { position: relative; z-index: 5; margin: -60px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-radius: 26px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.feature { display: flex; gap: 14px; align-items: center; padding: 24px 20px; position: relative; transition: background .3s; }
.feature + .feature::before { content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: var(--line); }
.feature:first-child { border-radius: 26px 0 0 26px; } .feature:last-child { border-radius: 0 26px 26px 0; }
.feature:hover { background: var(--bg-soft); }
.feature .ico--md { width: 52px; height: 52px; padding: 10px; border-radius: 15px; }
.feature b { display: block; font-size: 15px; line-height: 1.25; margin-bottom: 3px; }
.feature span { font-size: 13px; line-height: 1.4; color: var(--muted); display: block; }

/* =========================================================
   БОЛИ
   ========================================================= */
.pains { padding-top: 120px; }
.pains__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pain { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; border-radius: 24px; background: var(--bg-soft); border: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .3s, border-color .3s; }
.pain:hover { transform: translateY(-6px); background: #fff; box-shadow: var(--shadow); border-color: var(--sky-100); }
.pain .ico--md { background: #fff; }
.pain h3 { font-family: var(--font-h); font-size: 18px; line-height: 1.25; font-weight: 700; color: var(--ink); margin-top: 6px; }
.pain__was { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.pain__now { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--sky-100); font-size: 14.5px; line-height: 1.5; color: var(--ink); font-weight: 600; display: flex; gap: 8px; }
.pain__now .ico--xs { width: 20px; height: 20px; margin-top: 1px; color: var(--ok); }
.pain__now .ico--xs .ac { color: var(--ok); }
.pains__cta { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 22px 22px 30px; border-radius: 24px; background: linear-gradient(100deg, var(--sky-50), #fff); border: 1px solid var(--sky-100); }
.pains__cta p { font-size: 16px; max-width: 760px; }

/* spotlight — световое пятно за курсором (Spotlight Card) */
.spot::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(59, 151, 224, .16), transparent 45%); pointer-events: none; }
.spot:hover::before { opacity: 1; }

/* =========================================================
   УСЛУГИ (bento + вкладки)
   ========================================================= */
.services { margin-top: -20px; }
.tabs { position: relative; display: inline-flex; flex-wrap: wrap; padding: 5px; background: var(--bg-soft); border-radius: 999px; border: 1px solid var(--line); }
.tabs__btn { position: relative; z-index: 1; height: 42px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--text); transition: color .3s; white-space: nowrap; }
.tabs__btn.is-active { color: #fff; }
.tabs__ink { position: absolute; top: 5px; left: 5px; height: 42px; border-radius: 999px; background: linear-gradient(135deg, var(--sky), var(--sky-600)); transition: left .45s var(--ease), width .45s var(--ease), top .45s var(--ease); box-shadow: 0 6px 16px -6px rgba(35, 128, 204, .7); }

.bento { display: none; grid-template-columns: 1.25fr 1fr 1fr; grid-auto-rows: minmax(190px, auto); gap: 18px; }
.bento.is-active { display: grid; animation: fadeUp .6s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.bento__card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 24px; background: var(--bg-soft); border: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
.bento__card h3 { font-family: var(--font-h); font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.25; margin-top: auto; }
.bento__card p { font-size: 14px; line-height: 1.5; color: var(--muted); }
.bento__card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--sky-100); }
.bento__card .ico--md { background: #fff; }
.bento__card--tall { grid-row: span 2; }
.bento__card--x3 { grid-row: span 3; }
.bento__card--feature { background: linear-gradient(155deg, var(--sky-600) -10%, var(--navy) 55%, var(--navy-900)); color: rgba(255, 255, 255, .78); border-color: transparent; padding: 32px; }
.bento__card--feature::after { content: ''; position: absolute; width: 380px; height: 380px; right: -150px; bottom: -150px; border-radius: 50%; background: radial-gradient(circle, rgba(140, 198, 242, .35), transparent 65%); z-index: -1; transition: transform 1s var(--ease); }
.bento__card--feature:hover::after { transform: scale(1.25); }
.bento__card--feature .ico--md { background: rgba(255, 255, 255, .12); margin-top: 40px; }
.bento__card--feature h3 { color: #fff; font-size: 26px; margin-top: 8px; }
.bento__card--feature p { color: rgba(255, 255, 255, .78); font-size: 15.5px; max-width: 420px; }
.bento__card--feature.spot::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(140, 198, 242, .22), transparent 45%); }
.bento__list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; }
.bento__list li { position: relative; padding-left: 28px; font-size: 14.5px; color: #fff; font-weight: 600; }
.bento__list li::before { content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(140, 198, 242, .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238cc6f2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.bento__price { margin-top: 18px; font-size: 15px; color: rgba(255, 255, 255, .7); }
.bento__price b { font-family: var(--font-h); font-size: 38px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.bento__badge { position: absolute; top: 24px; left: 24px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--navy); font-weight: 800; font-size: 13px; }
.bento__badge--hot { background: var(--coral); color: #fff; }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: #8cc6f2; margin-top: 4px; }
.more .ico--arrow { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.bento__card:hover .more .ico--arrow { transform: translateX(5px); }
.arrow-go { position: absolute; top: 22px; right: 22px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--navy); transform: rotate(-45deg); transition: transform .45s var(--ease), background .3s, color .3s; box-shadow: var(--shadow-sm); }
.arrow-go .ico--arrow { width: 18px; height: 18px; }
.spot:hover .arrow-go { transform: rotate(0); background: var(--sky-600); color: #fff; }

.bento__bar { position: relative; overflow: hidden; isolation: isolate; margin-top: 18px; display: flex; align-items: center; gap: 22px; padding: 22px 26px; border-radius: 24px; border: 1.5px dashed var(--sky-100); background: #fff; }
.bento__bar h3 { font-family: var(--font-h); font-size: 18px; color: var(--ink); }
.bento__bar p { font-size: 14.5px; color: var(--muted); }
.bento__bar .btn { margin-left: auto; flex: none; }

/* =========================================================
   КАЛЬКУЛЯТОР
   ========================================================= */
.calc { background: var(--bg-soft); }
.calc__card { display: grid; grid-template-columns: 1fr 420px; gap: 0; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.calc__form { padding: 50px; }
.calc__form .h2 { margin-bottom: 12px; }
.calc__lead { color: var(--muted); margin-bottom: 30px; max-width: 560px; }
.q { padding: 20px 0; border-top: 1px solid var(--line); animation: fadeUp .5s var(--ease); }
.q[hidden] { display: none; }
.q__t { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.q__t > span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-50); color: var(--sky-700); font-size: 13px; font-weight: 800; flex: none; }
.q__t output { margin-left: auto; font-family: var(--font-h); font-size: 22px; font-weight: 800; color: var(--sky-700); min-width: 40px; text-align: right; }
.seg { position: relative; display: inline-flex; flex-wrap: wrap; gap: 8px; }
.seg button { height: 46px; padding: 0 20px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 15px; color: var(--text); transition: border-color .25s, background .25s, color .25s, transform .3s var(--ease); }
.seg button:hover { border-color: var(--sky-100); background: var(--sky-50); }
.seg button.is-active { border-color: var(--sky-600); background: var(--sky-50); color: var(--sky-700); box-shadow: 0 0 0 3px rgba(59, 151, 224, .14); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--sky-600) var(--fill, 22%), var(--line) var(--fill, 22%)); outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 6px solid var(--sky-600); box-shadow: 0 4px 12px rgba(12, 42, 82, .25); cursor: grab; transition: transform .2s; }
.range::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 6px solid var(--sky-600); box-shadow: 0 4px 12px rgba(12, 42, 82, .25); cursor: grab; }
.range__scale { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.toggles { display: grid; gap: 10px; }
.tgl { display: flex; align-items: center; gap: 14px; cursor: pointer; font-weight: 600; color: var(--ink); font-size: 15px; }
.tgl input { position: absolute; opacity: 0; pointer-events: none; }
.tgl > span { position: relative; width: 46px; height: 26px; border-radius: 26px; background: var(--line); flex: none; transition: background .3s; }
.tgl > span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: transform .35s var(--ease); }
.tgl input:checked + span { background: var(--sky-600); }
.tgl input:checked + span::after { transform: translateX(20px); }
.tgl input:focus-visible + span { outline: 2px solid var(--sky-600); outline-offset: 3px; }

.calc__result { position: relative; padding: 50px 40px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(160deg, var(--navy), var(--navy-900)); color: rgba(255, 255, 255, .75); isolation: isolate; overflow: hidden; }
.calc__result::before { content: ''; position: absolute; width: 380px; height: 380px; right: -160px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(59, 151, 224, .5), transparent 65%); z-index: -1; }
.calc__beam { position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--a, 0deg), transparent 0 75%, var(--sky) 90%, #9fd2f7 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: beam 5s linear infinite; opacity: .8; }
.calc__label { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8cc6f2; }
.calc__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 8px 0 6px; }
.calc__price small { font-size: 18px; }
.calc__price b { font-family: var(--font-h); font-size: 64px; line-height: 1; font-weight: 800; color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.calc__price span { font-size: 18px; font-weight: 700; color: #fff; }
.calc__old { font-size: 14.5px; margin-bottom: 22px; }
.calc__old b { color: #fff; font-size: 17px; }
.calc__inc { list-style: none; margin: 0 0 26px; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); display: grid; gap: 9px; font-size: 14.5px; }
.calc__inc li { position: relative; padding-left: 26px; }
.calc__inc li::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: rgba(140, 198, 242, .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238cc6f2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.calc__note { font-size: 12.5px; text-align: center; margin-top: 12px; color: rgba(255, 255, 255, .55); }
.calc__price b.is-bump { animation: bump .45s var(--ease); }
@keyframes bump { 40% { transform: translateY(-4px); color: #9fd2f7; } }

/* =========================================================
   ГАРАНТИИ
   ========================================================= */
.guarantee { background: linear-gradient(135deg, var(--navy-900), var(--navy) 60%, #13467e); color: rgba(255, 255, 255, .78); overflow: hidden; isolation: isolate; }
.guarantee::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(140, 198, 242, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 198, 242, .07) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 60% 80% at 80% 50%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 80% at 80% 50%, #000, transparent 75%); }
.guarantee__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.guarantee__text .h2 { margin-bottom: 20px; }
.guarantee__text .lead { margin-bottom: 34px; }
.guarantee__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gcard { position: relative; padding: 26px; border-radius: 24px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(6px); transition: background .35s, transform .45s var(--ease); }
.gcard:hover { background: rgba(255, 255, 255, .1); transform: translateY(-5px); }
.gcard .ico--md { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; margin-bottom: 18px; }
.gcard .ico--md .ac { color: #8cc6f2; }
.gcard b { display: block; font-family: var(--font-h); font-size: 34px; font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 6px; }
.gcard p { font-size: 14px; line-height: 1.45; }

/* =========================================================
   СРАВНЕНИЕ
   ========================================================= */
.cmp { max-width: 1040px; margin: 0 auto; border-radius: 28px; border: 1px solid var(--line); overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.cmp__row { display: grid; grid-template-columns: .9fr 1.1fr 1.2fr; }
.cmp__row > span { padding: 18px 24px; font-size: 15px; line-height: 1.45; border-top: 1px solid var(--line); display: flex; align-items: center; }
.cmp__row > span:first-child { font-weight: 700; color: var(--ink); background: var(--bg-soft); }
.cmp__row > span:nth-child(2) { color: var(--muted); position: relative; padding-left: 50px; }
.cmp__row > span:nth-child(2)::before { content: ''; position: absolute; left: 22px; width: 18px; height: 18px; border-radius: 50%; background: #fdecec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5484d' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 10px no-repeat; }
.cmp__us { color: var(--ink); font-weight: 600; background: linear-gradient(90deg, var(--sky-50), #fff); position: relative; padding-left: 50px !important; }
.cmp__row:not(.cmp__row--head) .cmp__us::before { content: ''; position: absolute; left: 22px; width: 18px; height: 18px; border-radius: 50%; background: #e3f5ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d6b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.cmp__row--head > span { border-top: 0; font-family: var(--font-h); font-weight: 800; font-size: 16px; color: var(--ink); padding-top: 22px; padding-bottom: 22px; }
.cmp__row--head > span:nth-child(2)::before { display: none; }
.cmp__row--head > span:nth-child(2) { padding-left: 24px; color: var(--muted); }
.cmp__row--head .cmp__us { background: linear-gradient(135deg, var(--sky), var(--sky-600)); color: #fff; padding-left: 24px !important; }
.cmp__row:not(.cmp__row--head) { transition: background .25s; }
.cmp__row:not(.cmp__row--head):hover > span:nth-child(2) { background: #fffafa; }

/* =========================================================
   КОМАНДА
   ========================================================= */
.team { background: var(--bg-soft); }
.team__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.member { display: grid; grid-template-columns: 250px 1fr; border-radius: 28px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: box-shadow .4s, transform .45s var(--ease); }
.member:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.member__photo { position: relative; display: block; padding: 0; overflow: hidden; background: #dfe9f5; cursor: pointer; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: transform .8s var(--ease); }
.member__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(12, 42, 82, .55)); opacity: 0; transition: opacity .4s; }
.member__body { padding: 30px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.member__role { font-size: 13px; font-weight: 700; color: var(--sky-700); text-transform: uppercase; letter-spacing: .06em; }
.member h3 { font-family: var(--font-h); font-size: 24px; font-weight: 800; color: var(--ink); }
.member__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.member__facts li { font-size: 13.5px; padding: 6px 12px; border-radius: 999px; background: var(--sky-50); color: var(--text); }
.member__facts b { color: var(--navy); }
.member__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.member blockquote { position: relative; font-size: 15.5px; line-height: 1.6; color: var(--text); padding-left: 18px; border-left: 3px solid var(--sky-100); margin-bottom: 8px; }

/* =========================================================
   ШАГИ
   ========================================================= */
.steps { background: linear-gradient(180deg, #fff, var(--bg-soft)); }
.steps__row { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.steps__line { position: absolute; left: 8%; right: 8%; top: 64px; width: 84%; height: 40px; z-index: 0; }
.steps__line path { fill: none; stroke: var(--sky); stroke-width: 2; stroke-dasharray: .012 .012; opacity: .6; }
.step { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 20px 30px; border-radius: 26px; transition: background .4s, box-shadow .4s, transform .4s var(--ease); }
.step:hover { background: #fff; box-shadow: var(--shadow); transform: translateY(-6px); }
.step .ico--lg { background: #fff; box-shadow: inset 0 0 0 1px var(--sky-100), 0 14px 30px -14px rgba(12, 42, 82, .35); }
.step__n { position: absolute; top: 14px; right: 24px; font-family: var(--font-h); font-size: 44px; font-weight: 800; color: transparent; -webkit-text-stroke: 1.5px var(--sky-100); line-height: 1; }
.step h3 { font-family: var(--font-h); font-size: 18px; font-weight: 700; color: var(--ink); margin-top: 8px; }
.step p { font-size: 14.5px; color: var(--muted); max-width: 250px; }
.steps__cta { display: flex; justify-content: center; margin-top: 40px; }

/* =========================================================
   АКЦИИ
   ========================================================= */
.promos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.promo { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 32px; border-radius: 28px; background: #fff; border: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: transform .45s var(--ease), box-shadow .45s; }
.promo:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.promo h3 { font-family: var(--font-h); font-size: 20px; font-weight: 800; color: var(--ink); margin-top: 8px; }
.promo p { color: var(--text); font-size: 15px; margin-bottom: 10px; flex: 1; }
.promo__tag { position: absolute; top: 26px; right: 26px; font-family: var(--font-h); font-size: 26px; font-weight: 800; color: var(--coral); letter-spacing: -.02em; }
.promo--main { background: linear-gradient(160deg, var(--sky-50), #fff 70%); border-color: var(--sky-100); }

/* =========================================================
   ОТЗЫВЫ И КЛИЕНТЫ
   ========================================================= */
.reviews { padding-bottom: 80px; }
.rlist__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 6px 2px 24px; margin: -6px -2px 0; }
.rlist__track::-webkit-scrollbar { display: none; }
.rcard { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: box-shadow .4s, transform .4s var(--ease), border-color .3s; }
.rcard:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: var(--sky-100); }
.rcard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.rcard__logo { height: 44px; width: 90px; object-fit: contain; object-position: left center; }
.rcard__doc { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ok); background: #e7f6ef; padding: 5px 11px; border-radius: 999px; }
.rcard__doc svg { width: 13px; height: 13px; }
.rcard__q { position: absolute; right: 24px; top: 70px; font-size: 90px; line-height: 1; font-weight: 800; color: var(--sky-50); font-family: Georgia, serif; pointer-events: none; }
.rcard__text { position: relative; font-size: 15px; line-height: 1.65; color: var(--ink); flex: 1; }
.rcard__foot { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.rcard__ava { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--sky), var(--navy)); flex: none; font-size: 15px; }
.rcard__who { line-height: 1.3; }
.rcard__who b { display: block; font-size: 15px; }
.rcard__who small { font-size: 13px; color: var(--muted); }

.carousel__ctrl { display: flex; align-items: center; gap: 12px; width: 100%; }
.carousel__bar { flex: 1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; min-width: 80px; }
.carousel__bar span { display: block; height: 100%; width: 30%; border-radius: 4px; background: linear-gradient(90deg, var(--sky), var(--sky-700)); transition: width .4s var(--ease), margin-left .4s var(--ease); }
.round-btn { width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; background: #fff; transition: background .3s, border-color .3s, transform .3s var(--ease); flex: none; }
.round-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--navy); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.round-btn:hover { background: var(--sky-600); border-color: var(--sky-600); }
.round-btn:hover svg { stroke: #fff; }
.round-btn:active { transform: scale(.94); }

.clients { margin-top: 50px; }
.clients__title { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; gap: 20px; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.client { width: 190px; height: 104px; flex: none; display: grid; place-items: center; padding: 14px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s, transform .4s var(--ease); }
.client img { max-height: 64px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1) opacity(.7); transition: filter .4s; }
.client:hover { border-color: var(--sky-100); box-shadow: var(--shadow); transform: translateY(-3px); }
.client:hover img { filter: none; }

/* =========================================================
   ВОПРОСЫ
   ========================================================= */
.faq { background: var(--bg-soft); }
.faq__grid { display: grid; grid-template-columns: 400px 1fr; gap: 60px; align-items: start; }
.faq__side { position: sticky; top: 110px; }
.faq__side .h2 { margin-bottom: 16px; }
.faq__side > p { margin-bottom: 26px; }
.faq__ask { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.faq__ask b { display: block; font-size: 16px; }
.faq__ask span { font-size: 13.5px; color: var(--muted); }
.faq__ask .btn { grid-column: 1 / -1; }
.acc { display: grid; gap: 12px; }
.acc__item { border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.acc__item[open] { border-color: var(--sky-100); box-shadow: var(--shadow); }
.acc__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; font-weight: 700; font-size: 17px; color: var(--ink); }
.acc__item summary::-webkit-details-marker { display: none; }
.acc__item summary::after { content: ''; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--sky-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232380cc' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .4s var(--ease), background-color .3s; }
.acc__item[open] summary::after { transform: rotate(135deg); background-color: var(--sky-100); }
.acc__item summary:hover { color: var(--sky-700); }
.acc__body { padding: 0 24px 22px; color: var(--text); font-size: 15.5px; overflow: hidden; }
.acc__item[open] .acc__body { animation: fadeUp .45s var(--ease); }

/* =========================================================
   ЗАЯВКА
   ========================================================= */
.booking__card { position: relative; display: grid; grid-template-columns: 1fr 440px; gap: 50px; align-items: center; padding: 64px; border-radius: var(--r-lg); background: linear-gradient(120deg, var(--navy-900), var(--navy) 55%, #1a5a99); color: rgba(255, 255, 255, .8); overflow: hidden; isolation: isolate; }
.booking__card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(../img/hero-office.webp) center / cover; opacity: .12; mix-blend-mode: luminosity; }
.booking__glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; right: 10%; top: -40%; z-index: -1; background: radial-gradient(circle, rgba(59, 151, 224, .5), transparent 65%); animation: glow 10s ease-in-out infinite; }
@keyframes glow { 50% { transform: translate(-80px, 60px) scale(1.15); } }
.booking__text .h2 { margin-bottom: 18px; font-size: clamp(26px, 2.7vw, 38px); }
.booking__text > p { font-size: 17px; max-width: 520px; margin-bottom: 28px; }
.booking__contacts { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.booking__contacts li { display: flex; align-items: center; gap: 12px; }
.booking__contacts a { color: #fff; font-weight: 800; font-size: 18px; }
.booking__contacts .ico--sm { background: rgba(255, 255, 255, .1); color: #fff; }
.booking__contacts .ico--sm .ac { color: #8cc6f2; }
.messengers { display: flex; gap: 10px; flex-wrap: wrap; }
.msg { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 14px; color: #fff; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); transition: background .3s, border-color .3s, transform .3s var(--ease); }
.msg::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.msg:hover { background: var(--c); border-color: var(--c); transform: translateY(-2px); }
.msg:hover::before { background: #fff; }
.msg--tg { --c: #2aa3e0; } .msg--wa { --c: #25b35e; } .msg--vb { --c: #7d5ee0; }

.form { position: relative; padding: 32px; border-radius: 28px; display: grid; gap: 14px; background: rgba(255, 255, 255, .97); box-shadow: var(--shadow-lg); }
.form__title { font-family: var(--font-h); font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.field { position: relative; display: block; }
.field input, .field select { width: 100%; height: 58px; padding: 22px 18px 6px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--bg-soft); font: inherit; font-size: 16px; color: var(--ink); outline: none; transition: border-color .25s, background .25s, box-shadow .25s; appearance: none; }
.field select { cursor: pointer; }
.field--select::after { content: ''; position: absolute; right: 18px; top: 24px; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.field span { position: absolute; left: 19px; top: 18px; font-size: 16px; color: var(--muted); pointer-events: none; transition: .2s var(--ease); }
.field input:focus, .field select:focus { border-color: var(--sky); background: #fff; box-shadow: 0 0 0 4px rgba(59, 151, 224, .15); }
.field input:focus + span, .field input:not(:placeholder-shown) + span, .field select + span { top: 8px; font-size: 12px; font-weight: 700; color: var(--sky-700); }
.field.is-error input { border-color: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, .12); }
.agree { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.agree input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--sky-600); flex: none; }
.agree a { color: var(--sky-700); text-decoration: underline; }
.agree.is-error { color: #e5484d; }
.form__hint { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--muted); text-align: center; }
.form__hint .ico--xs { width: 14px; height: 14px; }
.form__ok { position: absolute; inset: 0; border-radius: 28px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 30px; animation: fadeUp .5s var(--ease); z-index: 2; }
.form__ok[hidden] { display: none; }
.form__ok b { font-size: 22px; }
.form__ok span { color: var(--muted); }
.form__ok .ico--lg .ac { color: var(--ok); }

/* =========================================================
   КАРТА
   ========================================================= */
.mapsec { position: relative; height: 480px; margin-top: 0; background: var(--bg-soft); }
.mapsec__map { position: absolute; inset: 0; }
.mapsec__map iframe { width: 100%; height: 100%; border: 0; filter: saturate(.85); }
.mapsec__wrap { position: relative; height: 100%; display: flex; align-items: center; pointer-events: none; }
.mapsec__card { pointer-events: auto; width: 360px; padding: 26px; border-radius: 26px; background: #fff; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.mapsec__title { display: flex; align-items: center; gap: 10px; font-family: var(--font-h); font-weight: 800; font-size: 18px; color: var(--ink); margin-bottom: 14px; }
.mapsec__addr { color: var(--muted); font-size: 14.5px; margin-bottom: 12px; }
.mapsec__addr b { display: block; font-size: 16px; }
.mapsec__note { font-size: 14px; margin-bottom: 18px; }

/* скрываем промо-ссылки Яндекса («Создать свою карту»); копирайт и логотип Яндекса остаются */
#map [class*="map-copyrights-promo"] { display: none !important; }
/* метка и балун на карте */
.map-pin { position: relative; width: 52px; height: 60px; }
.map-pin::before { content: ''; position: absolute; left: 50%; bottom: 0; width: 18px; height: 6px; margin-left: -9px; border-radius: 50%; background: rgba(7, 27, 56, .3); filter: blur(2px); }
.map-pin__dot { position: absolute; left: 0; top: 0; width: 52px; height: 52px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: linear-gradient(135deg, var(--sky), var(--sky-700)); box-shadow: 0 10px 22px -6px rgba(12, 42, 82, .55); display: grid; place-items: center; border: 3px solid #fff; animation: pinDrop .8s var(--ease) both; }
.map-pin__dot svg { width: 26px; height: 26px; transform: rotate(45deg); }
.map-pin__dot rect { fill: #fff; }
.map-pin__dot rect.h { fill: var(--sky-600); }
@keyframes pinDrop { from { opacity: 0; translate: 0 -30px; } to { opacity: 1; translate: 0 0; } }
.ybal { display: grid; gap: 4px; font-family: var(--font); font-size: 13.5px; color: var(--text); padding: 4px 2px; }
.ybal b { font-size: 15px; color: var(--navy); }
.ybal a { color: var(--sky-700); font-weight: 700; }
.ybal__route { margin-top: 4px; }

/* =========================================================
   ПОДВАЛ
   ========================================================= */
.footer { background: var(--navy-900); color: rgba(255, 255, 255, .62); padding: 70px 0 30px; font-size: 14.5px; }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer__brand .logo { margin-bottom: 18px; }
.footer__brand p { max-width: 330px; margin-bottom: 18px; }
.footer__phone { display: block; font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.footer__phone--sm { font-size: 17px; color: rgba(255, 255, 255, .8); }
.footer__h { color: #fff; font-weight: 800; margin-bottom: 16px; font-size: 15px; }
.footer__col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer__col a { transition: color .2s, transform .3s var(--ease); }
.footer__col a:hover { color: #8cc6f2; transform: translateX(3px); }
.footer__req { line-height: 1.7; }
.footer__bottom { display: flex; justify-content: space-between; gap: 30px; padding-top: 26px; font-size: 12.5px; }
.footer__bottom p:first-child { max-width: 760px; }
.footer__legal { display: flex; flex-direction: column; gap: 6px; text-align: right; white-space: nowrap; }
.footer__legal a:hover { color: #8cc6f2; }
.footer__made { margin-top: 22px; text-align: center; font-size: 13px; }
.footer__made a { color: rgba(255, 255, 255, .55); border-bottom: 1px solid rgba(255, 255, 255, .2); padding-bottom: 1px; transition: color .25s, border-color .25s; }
.footer__made a:hover { color: #8cc6f2; border-color: #8cc6f2; }

/* =========================================================
   ПЛАВАЮЩИЕ ЭЛЕМЕНТЫ
   ========================================================= */
.fab { position: fixed; right: 24px; bottom: 92px; z-index: 91; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fab__btn { position: relative; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--sky), var(--sky-700)); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -8px rgba(35, 128, 204, .7); transition: transform .35s var(--ease); }
.fab__btn::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--sky); animation: fabPing 2.4s ease-out infinite; }
@keyframes fabPing { from { transform: scale(1); opacity: .8; } to { transform: scale(1.5); opacity: 0; } }
.fab__btn:hover { transform: scale(1.06); }
.fab__btn .ico { width: 30px; height: 30px; color: #fff; position: absolute; transition: transform .35s var(--ease), opacity .25s; }
.fab__btn .ico .ac { color: #cfe6fa; }
.fab__x { opacity: 0; transform: rotate(-90deg) scale(.6); }
.fab.is-open .fab__btn .ico:first-child { opacity: 0; transform: rotate(90deg) scale(.6); }
.fab.is-open .fab__x { opacity: 1; transform: none; }
.fab.is-open .fab__btn::before { animation: none; opacity: 0; }
.fab__menu { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.fab__it { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: 14px; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .3s, transform .4s var(--ease); }
.fab__it::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.fab__it--tg { --c: #2aa3e0; } .fab__it--wa { --c: #25b35e; } .fab__it--vb { --c: #7d5ee0; } .fab__it--ph { --c: var(--sky-600); }
.fab.is-open .fab__it { opacity: 1; transform: none; pointer-events: auto; }
.fab.is-open .fab__it:nth-child(3) { transition-delay: .04s; } .fab.is-open .fab__it:nth-child(2) { transition-delay: .08s; } .fab.is-open .fab__it:nth-child(1) { transition-delay: .12s; }
.fab__it:hover { background: var(--c); color: #fff; }
.fab__it:hover::before { background: #fff; }

.totop { position: fixed; right: 27px; bottom: 24px; z-index: 90; width: 54px; height: 54px; opacity: 0; transform: translateY(20px); transition: .4s var(--ease); pointer-events: none; }
.totop.is-show { opacity: 1; transform: none; pointer-events: auto; }
.totop svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.totop__bg { fill: var(--navy); stroke: rgba(255, 255, 255, .25); stroke-width: 2; }
.totop__ring { fill: none; stroke: #8cc6f2; stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); stroke-linecap: round; }
.totop path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transform-origin: center; }


/* модальное окно */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal__back { position: absolute; inset: 0; background: rgba(7, 27, 56, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.modal__box { position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 28px; background: #fff; box-shadow: var(--shadow-lg); animation: modalIn .45s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.modal__x { position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-soft); display: grid; place-items: center; transition: background .25s, transform .35s var(--ease); }
.modal__x .ico { width: 16px; height: 16px; color: var(--navy); }
.modal__x:hover { background: var(--sky-50); transform: rotate(90deg); }
.modal__head { display: flex; gap: 16px; align-items: center; padding: 30px 30px 6px; }
.modal__ava { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 10%; background: linear-gradient(160deg, var(--sky-100), var(--sky-50)); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--sky-100); flex: none; }
.modal__title { font-family: var(--font-h); font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.2; margin-bottom: 4px; padding-right: 30px; }
.modal__sub { font-size: 14px; color: var(--muted); line-height: 1.45; }
.form--modal { box-shadow: none; background: transparent; padding: 20px 30px 30px; }
.form--modal .form__ok { border-radius: 0 0 28px 28px; }

.cookie { position: fixed; left: 24px; bottom: 24px; z-index: 95; width: 400px; max-width: calc(100vw - 32px); padding: 22px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-lg); border: 1px solid var(--line); animation: fadeUp .6s var(--ease); }
.cookie[hidden] { display: none; }
.cookie__title { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.cookie__text { font-size: 13.5px; line-height: 1.55; color: var(--text); margin-bottom: 16px; }
.cookie__text a { color: var(--sky-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cookie__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cookie__btns .btn { width: 100%; padding: 0 12px; }

/* =========================================================
   ВЫЕЗЖАЮЩАЯ СПРАВА ПАНЕЛЬ СОТРУДНИКА
   ========================================================= */
.pp-overlay { position: fixed; inset: 0; z-index: 150; background: rgba(7, 27, 56, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .4s ease; }
.pp-overlay.is-visible { opacity: 1; }
.pp-overlay[hidden] { display: none; }
.pp { position: fixed; top: 0; right: 0; z-index: 160; width: min(980px, 100vw); height: 100dvh; background: #fff; box-shadow: -30px 0 70px rgba(7, 27, 56, .28); transform: translateX(100%); visibility: hidden; transition: transform .5s var(--ease), visibility .5s; outline: none; }
.pp.is-open { transform: none; visibility: visible; }
.pp__close { position: absolute; top: 18px; right: 18px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 18px rgba(12, 42, 82, .18); transition: transform .4s var(--ease), background .25s; }
.pp__close .ico { width: 16px; height: 16px; color: var(--navy); }
.pp__close:hover { transform: rotate(90deg); background: var(--sky-50); }
.pp__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; display: flex; align-items: flex-start; }
.pp__media { position: sticky; top: 0; flex: 0 0 380px; align-self: stretch; min-height: 100%; padding: 44px 34px; background: linear-gradient(170deg, var(--sky-50), #e6eff9 60%, var(--sky-100)); display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pp__img { width: 100%; max-width: 300px; aspect-ratio: 377 / 542; height: auto; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 50px -18px rgba(12, 42, 82, .45); }
.pp__stat { width: 100%; max-width: 300px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; color: rgba(255, 255, 255, .8); background: linear-gradient(135deg, var(--navy), var(--navy-900)); font-size: 13px; line-height: 1.4; }
.pp__stat b { font-family: var(--font-h); font-size: 42px; line-height: 1; font-weight: 800; color: #fff; }
.pp__content { flex: 1; min-width: 0; padding: 50px 44px 44px; }
.pp__role { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sky-700); padding-right: 50px; }
.pp__name { font-family: var(--font-h); font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; color: var(--navy); line-height: 1.15; margin: 8px 0 16px; }
.pp__lead { font-size: 16px; line-height: 1.65; color: var(--text); }
.pp__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0 6px; }
.pp__facts div { padding: 14px 16px; border-radius: 16px; background: var(--bg-soft); border: 1px solid var(--line); }
.pp__facts span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.pp__facts b { font-size: 16px; color: var(--navy); }
.pp__block { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.pp__block h4 { font-family: var(--font-h); font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.pp__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pp__tags span { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--sky-700); background: var(--sky-50); border: 1px solid var(--sky-100); }
.pp__tags--soft span { color: var(--text); background: #fff; border-color: var(--line); font-weight: 500; }
.pp__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pp__list li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; color: var(--text); }
.pp__list li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--sky-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232380cc' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pp__contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 28px 0 18px; padding-top: 24px; border-top: 1px solid var(--line); }
.pp__contacts a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); font-weight: 700; font-size: 14.5px; color: var(--navy); transition: border-color .25s, background .25s, transform .35s var(--ease); }
.pp__contacts a:hover { border-color: var(--sky-100); background: var(--sky-50); transform: translateY(-2px); }
.pp__contacts small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.pp .btn--2l, .pp .btn { white-space: normal; }
/* содержимое плавно проявляется после выезда панели */
.pp.is-open .pp__content > * { animation: fadeUp .6s var(--ease) both; }
.pp.is-open .pp__content > *:nth-child(2) { animation-delay: .05s; } .pp.is-open .pp__content > *:nth-child(3) { animation-delay: .1s; }
.pp.is-open .pp__content > *:nth-child(4) { animation-delay: .15s; } .pp.is-open .pp__content > *:nth-child(n+5) { animation-delay: .2s; }

@media (max-width: 860px) {
  .pp__scroll { display: block; }
  .pp__media { position: static; min-height: 0; padding: 60px 20px 24px; }
  .pp__img { max-width: 240px; }
  .pp__stat { max-width: 340px; }
  .pp__content { padding: 26px 20px 40px; }
  .pp__role, .pp__name { text-align: center; padding-right: 0; }
  .pp__facts { grid-template-columns: 1fr 1fr; }
  .pp__facts div:last-child { grid-column: 1 / -1; }
}

/* появление при прокрутке */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width: 1280px) {
  .header__phone span { display: none; }
  .nav__link { padding: 0 11px; font-size: 14.5px; }
  .features { grid-template-columns: repeat(3, 1fr); }
  .feature:nth-child(n+4) { display: none; }
  .feature:nth-child(3) { border-radius: 0 26px 26px 0; }
}
@media (max-width: 1100px) {
  .topbar__right { display: none; }
  .nav { display: none; }
  .burger { display: flex; }
  .header__actions { margin-left: auto; }
  .header__phone span { display: flex; }
  .hero__inner { grid-template-columns: 1fr; min-height: 0; padding-bottom: 0; }
  .hero__content { max-width: 720px; padding-bottom: 10px; }
  .hero__team { min-height: 520px; max-width: 560px; width: 100%; margin: 0 auto; }
  .hero__person { bottom: -40px; }
  .sec-head { grid-template-columns: 1fr; gap: 20px; }
  .pains__grid { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento__card--tall, .bento__card--x3 { grid-row: auto; grid-column: 1 / -1; }
  .calc__card { grid-template-columns: 1fr; }
  .guarantee__grid { grid-template-columns: 1fr; gap: 40px; }
  .team__grid { grid-template-columns: 1fr; }
  .rcard { flex-basis: calc((100% - 20px) / 2); }
  .faq__grid { grid-template-columns: 1fr; gap: 36px; }
  .faq__side { position: static; }
  .booking__card { grid-template-columns: 1fr; padding: 48px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .steps__row { grid-template-columns: 1fr 1fr; }
  .steps__line { display: none; }
}
@media (max-width: 760px) {
  .section { padding: 72px 0; }
  .container { padding: 0 16px; }
  .topbar__right { display: none; }
  .topbar__in { height: auto; padding-top: 9px; padding-bottom: 9px; font-size: 12.5px; }
  .topbar__promo { line-height: 1.35; }
  .header__in { height: 66px; gap: 12px; }
  .header.is-scrolled .header__in { height: 62px; }
  .header__phone, .header__actions > .btn { display: none; }
  .mmenu { top: 62px; }
  .logo__mark { width: 36px; height: 36px; }
  .logo__text b { font-size: 18px; }
  .logo__text small { font-size: 9px; }
  .hero__inner { padding-top: 44px; gap: 10px; }
  .hero__title { font-size: 34px; }
  .rotator > span { white-space: normal; }
  .hero__lead { font-size: 16.5px; margin-bottom: 26px; }
  .hero__cta { flex-direction: column; margin-bottom: 30px; }
  .hero__cta .btn { width: 100%; white-space: normal; text-align: center; height: auto; min-height: 58px; padding: 12px 22px; }
  .hero__team { min-height: 470px; margin-top: -30px; }
  .hero__halo { width: 420px; height: 420px; margin-left: -210px; }
  .hero__tag { padding: 8px 12px; border-radius: 12px; }
  .hero__tag b { font-size: 12.5px; }
  .hero__tag small { font-size: 11px; }
  .hero__tag--a { right: 0; top: auto; bottom: 80px; }
  .hero__tag--b { left: 0; top: auto; bottom: 140px; }
  .hero__person { bottom: 10px; }
  .hide-sm { display: none; }
  .hero__eyebrow { font-size: 11.5px; letter-spacing: .08em; }
  .features { grid-template-columns: 1fr; margin-top: -30px; }
  .feature:nth-child(n+4) { display: flex; }
  .feature + .feature::before { left: 20px; right: 20px; top: 0; bottom: auto; width: auto; height: 1px; }
  .feature, .feature:first-child, .feature:last-child, .feature:nth-child(3) { border-radius: 0; padding: 16px 20px; }
  .pains { padding-top: 80px; }
  .pains__grid, .bento { grid-template-columns: 1fr; }
  .pains__cta { flex-direction: column; align-items: stretch; padding: 22px; }
  .pains__cta .btn { white-space: normal; height: auto; min-height: 50px; padding: 12px 20px; }
  .tabs { border-radius: 20px; }
  .tabs__btn { padding: 0 14px; font-size: 13.5px; }
  .bento__card--feature { padding: 26px; }
  .bento__card--feature h3 { font-size: 22px; }
  .bento__bar { flex-direction: column; align-items: flex-start; }
  .bento__bar .btn { margin-left: 0; width: 100%; }
  .calc__form { padding: 30px 20px; }
  .calc__result { padding: 34px 22px; }
  .calc__price b { font-size: 52px; }
  .seg button { padding: 0 14px; font-size: 14px; flex: 1 1 auto; }
  .calc__result .btn { white-space: normal; height: auto; min-height: 58px; padding: 12px 20px; }
  .guarantee__cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .gcard { padding: 18px; }
  .gcard b { font-size: 24px; }
  .guarantee__text .btn { width: 100%; white-space: normal; height: auto; min-height: 58px; padding: 12px 20px; }
  .cmp__row--head { display: none; }
  .cmp__row { grid-template-columns: 1fr; border-top: 1px solid var(--line); }
  .cmp__row:first-of-type { border-top: 0; }
  .cmp__row > span { border-top: 0; padding: 10px 18px 10px 48px; }
  .cmp__row > span:first-child { padding: 14px 18px 6px; background: none; font-family: var(--font-h); }
  .cmp__row > span:nth-child(2)::before, .cmp__row .cmp__us::before { left: 18px; }
  .cmp__us { padding-left: 48px !important; margin: 0 12px 14px; border-radius: 12px; }
  .member { grid-template-columns: 1fr; }
  .member__photo { height: 340px; }
  .member__btns .btn { flex: 1 1 auto; }
  .member__body { padding: 24px; }
  .steps__row { grid-template-columns: 1fr; }
  .steps__cta .btn { width: 100%; white-space: normal; height: auto; min-height: 58px; padding: 12px 20px; }
  .promos__grid { grid-template-columns: 1fr; }
  .rcard { flex-basis: 88%; }
  .carousel__ctrl--top { display: none; }
  .client { width: 150px; height: 86px; }
  .booking__card { padding: 30px 18px; border-radius: 26px; }
  .form { padding: 22px; }
  .mapsec { height: auto; display: flex; flex-direction: column-reverse; }
  .mapsec__map { position: relative; height: 320px; }
  .mapsec__wrap { padding-top: 20px; padding-bottom: 20px; }
  .mapsec__card { width: 100%; }
  .footer { padding-bottom: 30px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .footer__brand, .footer__col:last-child { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; }
  .footer__legal { text-align: left; }
  .fab { right: 16px; bottom: 76px; }
  .fab__btn { width: 54px; height: 54px; }
  .totop { bottom: 16px; right: 20px; width: 46px; height: 46px; }
  .cookie { left: 16px; bottom: 16px; }
  .modal { align-items: end; padding: 0; }
  .modal__box { border-radius: 26px 26px 0 0; max-height: 92vh; }
  .modal__head { padding: 26px 22px 4px; }
  .modal__ava { width: 60px; height: 60px; }
  .modal__title { font-size: 19px; }
  .form--modal { padding: 18px 22px 26px; }
}
@media (max-width: 420px) {
  .hero__title { font-size: 30px; }
  .guarantee__cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}