має браузерний margin 1em 40px - без обнулення зазор
між слайдами стає 100px замість 20 і зʼїжджає вертикаль. */
margin:0;
flex:0 0 min(560px,86%);
/* start, не center: перший слайд неможливо відцентрувати (потрібен
відʼємний scrollLeft), через це snap відкидав позицію назад і
програмна прокрутка боролася сама з собою. */
scroll-snap-align:start;
background:#fff;border:1px solid var(--line);border-radius:18px;
box-shadow:var(--sh-1);overflow:hidden;
transition:box-shadow .3s,transform .3s,border-color .3s;
}
.gal__s:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--blue-l2)}
.gal__bar{
display:flex;align-items:center;gap:6px;
padding:11px 14px;background:var(--bg-2);border-bottom:1px solid var(--line-2);
}
.gal__bar i{width:9px;height:9px;border-radius:50%;background:#CBD3E0;flex:none}
.gal__bar b{
margin-left:8px;font-size:12px;font-weight:600;color:var(--mut-2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gal__s img{display:block;width:100%;height:auto}
/* Магнітний snap лишаємо тільки там, де галерею гортають пальцем.
На десктопі прокруткою керують стрілки й крапки, і mandatory-snap
боровся з програмним scrollTo: позиція відкидалась назад. */
@media (hover:none){
.gal__vp{scroll-snap-type:x mandatory}
}
.gal__cap{margin:0;padding:14px 16px 16px;font-size:14px;color:var(--ink-2);line-height:1.5}
.gal__cap b{display:block;margin-bottom:3px;font-size:15px;color:var(--ink)}
/* Керування: стрілки + крапки. Малюються скриптом, тому без JS
секція лишається звичайним горизонтальним скролом. */
.gal__nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px}
.gal__btn{
width:40px;height:40px;flex:none;border-radius:50%;
border:1px solid var(--line);background:#fff;color:var(--blue);
display:grid;place-items:center;cursor:pointer;
transition:transform .2s,box-shadow .2s,border-color .2s,opacity .2s;
}
.gal__btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(37,99,235,.18);border-color:var(--blue-l2)}
.gal__btn:disabled{opacity:.35;cursor:default;transform:none;box-shadow:none}
.gal__btn svg{width:18px;height:18px}
.gal__dots{display:flex;gap:7px}
.gal__dots button{
width:8px;height:8px;padding:0;border:0;border-radius:100px;cursor:pointer;
background:var(--line);transition:width .3s,background .3s;
}
.gal__dots button.is-on{width:22px;background:var(--blue)}
.gal__hint{
margin:10px 0 0;text-align:center;font-size:13px;color:var(--mut-2);
}
.gal__s{position:relative}
/* ── Рух: idle-шар ────────────────────────────────────────────── */
@keyframes floatY{
0%,100%{transform:translateY(0)}
50% {transform:translateY(-10px)}
}
@keyframes floatTilt{
0%,100%{transform:translateY(0) rotate(-2deg)}
50% {transform:translateY(-8px) rotate(1deg)}
}
@keyframes softPulse{
0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.34)}
70% {box-shadow:0 0 0 14px rgba(37,99,235,0)}
}
.is-float{animation:floatY 6s ease-in-out infinite}
.is-float--slow{animation:floatY 8.5s ease-in-out infinite}
.is-float--tilt{animation:floatTilt 7.5s ease-in-out infinite}
/* ── Дисципліна ховерів: один патерн на всю сторінку ──────────── */
.btn,.chip,.bento__i,.integr__g,.split__i,.faq__q,.gal__s,.gal__btn{
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(37,99,235,.26)}
.btn--ghost:hover{box-shadow:0 8px 18px rgba(30,58,138,.14)}
.bento__i:hover,.split__i:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
/* ── Повага до налаштувань доступності ────────────────────────── */
@media (prefers-reduced-motion:reduce){
.is-float,.is-float--slow,.is-float--tilt{animation:none}
.gal__vp{scroll-behavior:auto}
.btn:hover,.bento__i:hover,.split__i:hover,.gal__s:hover,.gal__btn:hover{transform:none}
.reveal{transition:none}
}
/* ── Мобільні ─────────────────────────────────────────────────── */
@media (max-width:760px){
.gal__s{flex:0 0 88%}
.dekor--zirka{width:44px}
.dekor--strilka{width:64px}
.lay__art{position:static;margin:16px auto 0;display:block}
.ba__art{max-width:220px}
}
/* Ілюстрація в картці можливостей: більша за іконку, тому інші
відступи. Прибирає відчуття «іконка з набору». */
.bento__ic--art{
width:auto;max-width:150px;max-height:118px;margin:-4px 0 12px -6px;
filter:drop-shadow(0 14px 20px rgba(30,58,138,.14));
}
@media (max-width:760px){ .bento__ic--art{max-width:118px;max-height:94px} }
/* Декор у героєві: зірка над акцентним рядком заголовка. */
.hero__txt{position:relative}
.dekor--zirka{top:-18px;right:-6px}
@media (max-width:1080px){ .dekor--zirka{display:none} }
/* 3D-стрілка в переході «до -> після» замість плаского svg */
.ba__arrow--3d{display:grid;place-items:center}
.ba__arrow--3d img{width:74px;height:auto;filter:drop-shadow(0 10px 16px rgba(30,58,138,.20))}
@media (max-width:900px){ .ba__arrow--3d img{width:54px;transform:rotate(90deg)} }
/* ═══ ГЕРОЙ НА ФОТО (redesign 23.08) ═══════════════════════════ */
.hero--foto{position:relative;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:64% 30%}
/* Вуаль: зліва щільна - під текстом, справа легка - фото дихає.
Знизу білий градієнт, щоб смуга фактів зливалась зі сторінкою. */
.hero__veil{
position:absolute;inset:0;
background:
linear-gradient(180deg,rgba(255,255,255,0) 68%,rgba(255,255,255,.9) 94%,#fff 100%),
linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.90) 30%,rgba(255,255,255,.42) 52%,rgba(255,255,255,.04) 76%,rgba(255,255,255,0) 100%);
}
.hero--foto .hero__in{position:relative;z-index:1}
/* Смуга фактів - статична, тож малювалась ПІД позиційованим .hero__bg.
Піднімаємо обидва wrap-и над фоном. */
.hero--foto>.wrap{position:relative;z-index:1}
.hero--foto .hero__txt{max-width:560px}
/* «Скляні» картки: blur + напівпрозорий білий, як у Zapys24 */
.hero__cards{position:absolute;inset:0;pointer-events:none;z-index:1}
.hcard{
position:absolute;display:flex;align-items:center;gap:12px;
background:#fff;border:1px solid rgba(11,18,32,.06);border-radius:16px;
box-shadow:0 18px 44px rgba(11,18,32,.16),0 2px 8px rgba(11,18,32,.06);
padding:14px 18px;font-size:14px;line-height:1.4;color:var(--ink-2);
opacity:0;transform:translateY(14px);
animation:hcardIn .7s var(--ease) forwards;
}
.hcard b{color:var(--ink);font-size:15px}
@keyframes hcardIn{to{opacity:1;transform:none}}
/* Картки праворуч розкидані хаотично (фідбек 24.08), кожна пливе
зі своїм періодом і фазою - жодні дві не рухаються синхронно.
Друга анімація в списку (floatY) стартує після появи (hcardIn). */
/* Послідовність зверху вниз = логіка дня (фідбек 24.08):
магазин → інтеграції → автовідповіді → замовлення → виплата */
.hcard--store {right:13%;top:8%;
animation:hcardIn .7s var(--ease) .4s forwards, floatY 6.4s ease-in-out 1.9s infinite}
.hcard--integr{right:3%;top:26%;
animation:hcardIn .7s var(--ease) .7s forwards, floatY 7.8s ease-in-out 2.9s infinite}
.hcard--auto {right:15%;top:45%;
animation:hcardIn .7s var(--ease) 1s forwards, floatY 5.6s ease-in-out 2.2s infinite}
.hcard--order {right:2%;bottom:23%;
animation:hcardIn .7s var(--ease) 1.3s forwards, floatY 8.6s ease-in-out 3.4s infinite}
.hcard--fee {right:11%;bottom:5%;
animation:hcardIn .7s var(--ease) 1.9s forwards, floatY 7.1s ease-in-out 2.6s infinite}
.hcard__ok{
width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
background:#DFF5E7;color:#178A50;font-weight:700;
}
/* слот під кольорові іконки від Замовника (hero-ic-*.png, 512px, прозорий фон) */
.hcard__img{width:38px;height:38px;flex:none;object-fit:contain}
/* inline-іконки карток героя: lineal-color у токенах бренду */
.hcard__svg{width:38px;height:38px;flex:none}
/* рукописні стрілки-картинки (набір Замовника, 24.08) */
.note__arimg{width:52px;height:auto;flex:none;transform:translateY(-8px)}
.note__arimg--dn{transform:translateY(8px)}
.hcard__zero{
min-width:52px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;
background:var(--yellow);color:#1A1A1A;font-weight:800;font-size:16px;padding:0 8px;
}
.hcard__ic{
width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
background:var(--blue);color:#fff;
}
.hcard__ic svg{width:16px;height:16px}
.dot-live{
width:9px;height:9px;border-radius:50%;background:#22B573;flex:none;
animation:softPulse 2.2s infinite;
}
@media (max-width:1080px){
.hcard--fee,.hcard--integr,.hcard--auto{display:none}
}
@media (max-width:760px){
.hero__bg img{object-position:50% 28%}
.hero__veil{background:
linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.82) 55%,#fff 96%)}
.hcard{display:none}
.hcard--order{display:flex;position:static;margin-top:14px;animation-delay:1s}
.hero__cards{position:static;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){
.hcard{animation:none;opacity:1;transform:none}
.dot-live{animation:none}
}
/* ═══ «ДО/ПІСЛЯ» - ПОВЗУНОК (redesign 23.08) ═══════════════════ */
.cmp{
position:relative;border-radius:20px;overflow:hidden;
border:1px solid var(--line);box-shadow:var(--sh-2);
--x:50%;
}
.cmp__before{display:block;width:100%;height:auto}
/* «після» відкривається clip-ом; сам шар займає всю площу */
.cmp__after{
position:absolute;inset:0;background:var(--bg-2);
clip-path:inset(0 0 0 var(--x));
}
.cmp__panel{
position:absolute;inset:0;padding:5% 5% 5% calc(5% + 12px);
display:flex;flex-direction:column;justify-content:center;gap:10px;
max-width:none;
}
.cmp__hd{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.cmp__hd b{font-size:clamp(15px,1.6vw,21px);color:var(--ink)}
.cmp__badge{
background:var(--blue-l);color:var(--blue-d);border-radius:100px;
padding:4px 11px;font-size:12px;font-weight:700;white-space:nowrap;
}
.cmp__row{
display:flex;align-items:center;gap:10px;
background:#fff;border:1px solid var(--line-2);border-radius:12px;
padding:10px 14px;font-size:clamp(12px,1.25vw,15px);color:var(--ink-2);
}
.cmp__row span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp__row em{font-style:normal;font-size:.86em;font-weight:700;color:var(--blue-d);white-space:nowrap}
.cmp__row em.is-ok{color:#178A50}
.cmp__t{width:4px;height:22px;border-radius:2px;background:var(--c,#2563EB);flex:none}
.cmp__foot{
display:flex;align-items:center;gap:10px;margin-top:4px;
font-size:clamp(12px,1.2vw,14px);color:var(--ink-2);
}
.cmp__shield{
width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;
background:#DFF5E7;color:#178A50;font-weight:700;
}
/* ручка */
.cmp__handle{
position:absolute;top:0;bottom:0;left:var(--x);width:0;pointer-events:none;
}
.cmp__handle::before{
content:'';position:absolute;top:0;bottom:0;left:-1.5px;width:3px;
background:#fff;box-shadow:0 0 12px rgba(11,18,32,.35);
}
.cmp__handle span{
position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
width:44px;height:44px;border-radius:50%;background:#fff;color:var(--blue);
display:grid;place-items:center;font-size:18px;font-weight:700;letter-spacing:-1px;
box-shadow:0 6px 18px rgba(11,18,32,.28);
}
.cmp__range{
position:absolute;inset:0;width:100%;height:100%;margin:0;
opacity:0;cursor:ew-resize;touch-action:none;
}
.cmp__legend{
display:flex;justify-content:space-between;align-items:center;gap:14px;
margin-top:12px;font-size:13.5px;color:var(--mut-2);
}
/* рукописні підписи */
.note{
font-family:'Caveat',cursive;font-size:22px;line-height:1;color:var(--blue-d);
display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.note__ar{width:34px;height:22px;color:var(--blue)}
@font-face{
font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;
src:url('fonts/caveat-600-cyr.woff2') format('woff2');
unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;
src:url('fonts/caveat-600-lat.woff2') format('woff2');
}
@media (max-width:760px){
.cmp__legend .note{display:none}
.cmp__row em{display:none}
.cmp__panel{padding-left:calc(4% + 10px)}
}
/* ═══ КАБІНЕТ ЗСЕРЕДИНИ - ШАРИ (redesign 23.08) ═══════════════ */
.kab{position:relative;margin-top:6px;padding:clamp(20px,4vw,52px) 0 clamp(28px,4vw,56px)}
.kab__bg{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
border-radius:24px;z-index:0;
}
/* MacBook: екран + «підборіддя». Рамка CSS-ом - масштабується без мила */
.kab__mac{position:relative;z-index:1;width:min(72%,760px);margin:0 0 0 4%}
.mac__screen{
position:relative;background:#0B1220;border-radius:14px 14px 0 0;
padding:clamp(8px,1.2vw,14px);
box-shadow:0 30px 60px rgba(11,18,32,.30);
}
.mac__screen img{display:none;width:100%;height:auto;border-radius:6px;background:#fff}
.mac__screen img.is-on{display:block}
.mac__base{height:clamp(10px,1.4vw,16px);position:relative}
.mac__base::before{
content:'';position:absolute;left:-4%;right:-4%;top:0;height:100%;
background:linear-gradient(180deg,#E6EAF1,#C9D1DE);
border-radius:0 0 16px 16px;box-shadow:0 18px 34px rgba(11,18,32,.22);
}
.mac__base i{
position:absolute;left:50%;top:0;transform:translateX(-50%);
width:12%;height:45%;background:#B9C2D2;border-radius:0 0 10px 10px;z-index:1;
}
/* Телефон під кутом 4° - виходить за нижню межу композиції */
.kab__phone{
position:absolute;z-index:2;right:6%;bottom:-26px;width:min(228px,26vw);
background:#0B1220;border-radius:26px;padding:12px 12px 16px;
transform:rotate(4deg);
/* м'яка подвійна тінь замість одної важкої (фідбек 24.08) */
box-shadow:0 14px 30px rgba(11,18,32,.22),0 3px 10px rgba(11,18,32,.14);
color:#E8ECF4;
}
.kab__phcam{display:block;width:34%;height:16px;background:#0B1220;border-radius:0 0 10px 10px;margin:-12px auto 6px;position:relative;z-index:1}
.kab__phhd{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 8px;font-size:14px}
.kab__phrow{
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);
border-radius:12px;padding:9px 11px;font-size:12.5px;line-height:1.4;margin-top:7px;
}
.kab__phrow b{color:#fff}
.kab__phrow--muted{color:#9AA6BC}
/* білий текст + жовта стрілка (фінальне рішення Замовника 24.08);
читабельність тримає посилена подвійна тінь */
.kab__note{position:absolute;z-index:2;right:4%;top:6%;transform:rotate(-2deg);color:#fff;
text-shadow:0 1px 3px rgba(11,18,32,.65),0 3px 14px rgba(11,18,32,.45)}
.kab__note .note__ar{color:var(--yellow)}
.kab__tabs{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 10px}
.kab__tabs button{
font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);
background:#fff;border:1px solid var(--line);border-radius:100px;
padding:8px 16px;cursor:pointer;
transition:transform .2s,box-shadow .2s,background .2s,color .2s,border-color .2s;
}
.kab__tabs button:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.kab__tabs button.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.kab__cap{
display:none;position:absolute;z-index:3;left:-3%;top:9%;
max-width:280px;margin:0;
background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(11,18,32,.06);border-left:4px solid var(--blue);
border-radius:14px;padding:14px 18px;
font-size:13.5px;line-height:1.5;color:var(--ink-2);
box-shadow:0 16px 40px rgba(11,18,32,.16);
}
.kab__cap b{display:block;margin-bottom:4px;font-size:15px;color:var(--ink)}
.kab__cap.is-on{display:block;animation:hcardIn .5s var(--ease)}
@media (max-width:900px){
.kab__cap{position:static;max-width:none;margin-top:12px}
}
.kab__cta{margin-top:22px}
@media (max-width:900px){
.kab{padding:16px 0 30px}
.kab__mac{width:92%;margin:0 auto}
.kab__phone{display:none}
.kab__note{display:none}
}
/* ═══ ЗАСНОВНИКИ + ВІДГУКИ + NAVY-КАРТКИ (redesign 23.08) ═════ */
.founders{position:relative;margin:6px 0 44px;border-radius:20px;overflow:visible}
.founders img{display:block;width:100%;height:auto;border-radius:20px;box-shadow:var(--sh-2)}
/* Картка піднята (фідбек 24.08: -24px майже торкалась карток нижче)
і отримала легку синю підводку зліва. */
.founders__card{
position:absolute;left:4%;bottom:-10px;max-width:min(480px,62%);
background:#fff;border-radius:16px;padding:18px 22px 18px 24px;
border-left:4px solid var(--blue);
box-shadow:0 18px 44px rgba(11,18,32,.22);
}
.founders__card h3{margin:0 0 6px;font-size:18px;color:var(--ink)}
.founders__card p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.sec--dark .founders__card h3{color:var(--ink)}
.trust__cta{margin-top:26px}
.rev{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rev__i{
margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;
padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--sh-1);
transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
/* ховер відгуку: підводка + легкий підйом (фідбек 24.08). Тільки
transform/box-shadow - без reflow, на індексацію не впливає. */
.rev__i:hover{
transform:translateY(-3px) scale(1.012);
border-color:var(--blue-l2);
box-shadow:0 14px 34px rgba(37,99,235,.14);
}
@media (prefers-reduced-motion:reduce){
.rev__i:hover{transform:none}
}
.rev__i blockquote{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
/* Оцінка у відгуку: 5 зірок над цитатою. */
.rev__stars{margin:0;font-size:15px;line-height:1;letter-spacing:2px;color:#F5A524}
.rev__i blockquote::before{
content:'“';display:block;font-size:34px;line-height:.6;color:var(--blue-l2);
font-family:Georgia,serif;margin-bottom:6px;
}
.rev__i figcaption{display:flex;align-items:center;gap:10px;margin-top:auto}
.rev__av{
width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover;
border:2px solid #fff;box-shadow:0 2px 8px rgba(11,18,32,.15);
}
.rev__i figcaption span{display:flex;flex-direction:column;font-size:12.5px;color:var(--mut-2)}
.rev__i figcaption b{font-size:14px;color:var(--ink)}
.rev__note{
display:flex;align-items:center;gap:9px;justify-content:center;
margin:22px 0 0;font-size:14px;color:var(--ink-2);
}
@media (max-width:900px){ .rev{grid-template-columns:1fr} .founders__card{position:static;max-width:none;margin-top:-18px} }
/* Темні картки в bento: різноманіття контейнерів + фон під темні 3D */
.bento__i--navy{background:#0F1E38;border-color:#1C3055}
.bento__i--navy h3{color:#fff}
.bento__i--navy p,.bento__i--navy .bento__list li{color:#B9C6DC}
.bento__i--navy .bento__list li::before{border-color:#2A4570;background:#152A4D}
.bento__ic--3d{
width:auto;max-width:230px;max-height:170px;margin:-4px 0 12px -4px;
filter:drop-shadow(0 12px 22px rgba(0,0,0,.45));
}
.bento__i--wide .bento__ic--3d{max-width:260px}
/* мокапи всередині темних карток лишаються білими панелями - контраст ок */
/* логотипи сервісів */
.lgo--img{object-fit:cover;background:#fff;border:1px solid var(--line-2)}
/* Сітка умов: 4 -> 2 -> 1, щоб картки ніколи не різались */
@media (max-width:1120px){ .cards--4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .cards--4{grid-template-columns:1fr} }
/* ═══ ГРОШОВИЙ БЛОК - ОДНА КОМПОЗИЦІЯ (фідбек 23.08) ══════════ */
.money{
display:grid;grid-template-columns:minmax(280px,400px) 1fr;gap:clamp(24px,4vw,56px);
align-items:center;margin-top:24px;
background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
padding:clamp(20px,3vw,36px);box-shadow:var(--sh-1);
}
.money__ill{margin:0}
.money__ill img{display:block;width:100%;height:auto;max-width:400px;margin:0 auto}
.money__nums{display:flex;flex-direction:column;gap:14px}
.money__row{display:flex;align-items:center;gap:18px}
.money__row b{
font-size:clamp(30px,3.6vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1;
min-width:170px;
}
.money__row--bad b{color:var(--warn)}
.money__row--ok b{color:var(--ok)}
/* лише прямий нащадок: інакше правило фарбувало й число всередині
(баг калькулятора 24.08 - цифри ставали дрібними й чорними) */
.money__row>span{font-size:15px;color:var(--ink-2);line-height:1.45}
.money__row i{font-style:normal;font-size:13px;color:var(--mut-2)}
.money__vs{
align-self:flex-start;margin-left:6px;
font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;
background:var(--bg-2);border-radius:100px;padding:6px 14px;
}
.money__cap{margin:8px 0 0;font-size:13.5px;color:var(--mut-2);border-top:1px solid var(--line-2);padding-top:14px}
@media (max-width:900px){
.money{grid-template-columns:1fr}
.money__row b{min-width:0}
}
/* ═══ ДО/ПІСЛЯ - ДВІ КАРТКИ (фідбек 23.08: повзунок геть) ═════ */
.ba2{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch}
.ba2__i{
display:flex;flex-direction:column;gap:14px;
background:#fff;border:1px solid var(--line);border-radius:18px;
padding:18px;box-shadow:var(--sh-1);
}
.ba2__tag{
align-self:flex-start;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
border-radius:100px;padding:5px 13px;
}
.ba2__tag--now{background:#FDECEA;color:#B3261E}
.ba2__tag--ok{background:#DFF5E7;color:#178A50}
.ba2__foto{display:block;width:100%;height:auto;border-radius:12px}
.ba2__panel{
flex:1;display:flex;flex-direction:column;gap:9px;justify-content:center;
background:var(--bg-2);border-radius:12px;padding:16px;
}
.ba2__list{display:grid;gap:7px;margin:0;padding:0 4px 4px}
.ba2__list li{
position:relative;padding-left:20px;font-size:14px;color:var(--ink-2);list-style:none;
}
.ba2__list li::before{
content:'✕';position:absolute;left:0;top:0;font-size:12px;font-weight:700;color:#B3261E;
}
.ba2__list--ok li::before{content:'✓';color:#178A50}
.ba2__arrow{display:grid;place-items:center}
.ba2__arrow img{width:64px;height:auto;filter:drop-shadow(0 10px 16px rgba(30,58,138,.20))}
@media (max-width:900px){
.ba2{grid-template-columns:1fr}
.ba2__arrow img{width:48px;transform:rotate(90deg)}
}
/* ═══ КАБІНЕТ: МОКАПИ ЗАМОВНИКА (раунд 3, анімація - раунд 5) ═ */
.kab--mock{
padding:0;position:relative;
width:min(880px,92%);margin:0 auto;aspect-ratio:1560/1215;
}
.kab--mock .kab__mock{
position:absolute;inset:0;width:100%;height:auto;
opacity:0;transform:translateX(48px) scale(.96);
transition:opacity .45s var(--ease),transform .45s var(--ease);
pointer-events:none;
}
.kab--mock .kab__mock.is-on{opacity:1;transform:none}
.kab--mock .kab__mock.is-out{opacity:0;transform:translateX(-48px) scale(.96)}
@media (prefers-reduced-motion:reduce){
.kab--mock .kab__mock{transition:none}
}
.kab__popup{
position:absolute;right:2%;bottom:6%;width:min(300px,30vw);height:auto;
filter:drop-shadow(0 18px 36px rgba(11,18,32,.25));
transform:rotate(2deg);z-index:2;
}
@media (max-width:900px){
.kab--mock .kab__mock{width:100%}
/* на мобільному попапи стоять під маком; показується лише
попап активного слайда, решта не займають місця */
.kab__popup{position:static;width:80%;margin:14px auto 0;display:none;transform:none}
.kab__popup.is-popup-on{display:block}
.kab__popup--tall{width:64%}
}
/* співробітники - фото замість ініціалів */
.team__av--img{object-fit:cover;padding:0;border-radius:50%;width:30px;height:30px}
/* бейдж на фото засновників */
.founders__badge{
position:absolute;top:18px;right:18px;
display:inline-flex;align-items:center;gap:8px;
background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
border-radius:100px;padding:9px 16px;font-size:13.5px;color:var(--ink);
box-shadow:0 8px 24px rgba(11,18,32,.18);
}
/* шахматка карток довіри - живіше за рівний ряд */
@media (min-width:901px){
.trust .trust__i:nth-child(even){margin-top:22px}
}
/* стрілки перемикання мокапів */
.kab__ar{
position:absolute;z-index:4;top:44%;
width:46px;height:46px;border-radius:50%;
border:1px solid var(--line);background:#fff;color:var(--blue);
display:grid;place-items:center;cursor:pointer;
box-shadow:0 8px 22px rgba(11,18,32,.15);
transition:transform .2s,box-shadow .2s;
}
.kab__ar:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(37,99,235,.22)}
.kab__ar svg{width:20px;height:20px}
.kab__ar--prev{left:-60px}
.kab__ar--next{right:-60px}
@media (max-width:1100px){ .kab__ar--prev{left:-8px} .kab__ar--next{right:-8px} }
/* кожен попап видно лише на своєму слайді (клас ставить app.js) */
.kab__popup{opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.kab__popup.is-popup-on{opacity:1}
/* вертикальні панелі (чати, сповіщення): праворуч від мака, як
карантин - над телефоном, у вільній зоні полиць (фідбек 24.08) */
.kab__popup--tall{
right:19%;left:auto;top:auto;bottom:2%;width:min(192px,20vw);
border-radius:16px;transform:rotate(2deg);
filter:none;box-shadow:0 16px 36px rgba(11,18,32,.22);
border:1px solid var(--line-2);background:#fff;
}
/* ═══ АСИМЕТРІЯ (раунд 7, приёмы Zapys24) ═════════════════════ */
/* kicker над заголовком секції - їх фірмовий штрих */
.sec__kick{
display:block;font-size:12px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--blue);margin-bottom:10px;
}
.sec--dark .sec__kick{color:var(--yellow)}
/* шахматка карток: рівний ряд -> різна висота */
@media (min-width:641px){
.cards--4 .card:nth-child(even){transform:translateY(20px)}
.integr .integr__g:nth-child(even){transform:translateY(20px)}
.rev .rev__i:nth-child(2){transform:translateY(22px)}
}
/* transform у reveal-елементів: зсув додаємо через margin, щоб не
битись із transition transform. Перекриваємо простіше: */
@media (min-width:641px){
.cards--4 .card:nth-child(even){transform:none;margin-top:20px}
.integr .integr__g:nth-child(even){transform:none;margin-top:20px}
.rev .rev__i:nth-child(2){transform:none;margin-top:22px}
.cards--4,.integr,.rev{padding-bottom:22px}
}
/* зигзаг кроків: полоси більше не стоять рівним стовпчиком */
@media (min-width:901px){
.steps>li{max-width:88%}
.steps>li:nth-child(even){margin-left:auto}
}
/* «до/після»: права картка нижча за ліву - живий дует, не близнюки */
@media (min-width:901px){
.ba2>.ba2__i:last-child{margin-top:26px}
.ba2{padding-bottom:26px}
}
/* фінал: градієнт замість пласкої заливки (як фіолетовий у Zapys24) */
.final{
background:
radial-gradient(90% 120% at 85% -10%,rgba(37,99,235,.55),transparent 60%),
linear-gradient(155deg,#0F1E38 0%,#16305C 55%,#1E3A8A 100%) !important;
}
/* ═══ «ДО/ПІСЛЯ» - СЦЕНА З ПЕРЕКРИТТЯМ (раунд 8) ══════════════ */
.ba3{position:relative;margin-top:8px;padding-bottom:30px}
.ba3__foto{
display:block;width:66%;height:auto;border-radius:20px;
box-shadow:var(--sh-2);filter:saturate(.9);
}
/* червоні чипи болю - НА фото, як стікери */
.ba3__x{
position:absolute;z-index:2;
background:#fff;border-left:3px solid #B3261E;border-radius:10px;
padding:9px 14px;font-size:13.5px;font-weight:600;color:#7A1B15;
box-shadow:0 10px 26px rgba(11,18,32,.18);
}
.ba3__x--1{left:3%;top:7%}
.ba3__x--2{left:8%;top:38%;transform:rotate(-2deg)}
.ba3__x--3{left:4%;bottom:16%;transform:rotate(1.5deg)}
/* панель порядку перекриває фото справа */
.ba3__panel{
position:absolute;z-index:3;right:0;top:6%;width:44%;
display:flex;flex-direction:column;gap:9px;
background:#fff;border:1px solid var(--line);border-radius:18px;
padding:20px;box-shadow:0 26px 60px rgba(11,18,32,.20);
}
.ba3__ok{
display:flex;flex-direction:column;gap:6px;margin-top:6px;
border-top:1px solid var(--line-2);padding-top:12px;
font-size:13.5px;font-weight:600;color:#178A50;
}
.ba3__arrow{
position:absolute;z-index:4;left:54%;top:46%;width:54px;height:auto;
filter:drop-shadow(0 10px 16px rgba(30,58,138,.22));
}
.ba3__note{position:absolute;left:55%;bottom:2%;transform:rotate(-2deg)}
@media (max-width:900px){
.ba3{padding-bottom:0}
.ba3__foto{width:100%}
.ba3__x{position:static;display:inline-block;margin:10px 8px 0 0;transform:none}
.ba3__panel{position:static;width:100%;margin-top:14px}
.ba3__arrow,.ba3__note{display:none}
}
/* ═══ ДОВІРА: білі картки + чипи (раунд 8) ════════════════════ */
.sec--dark .trust__i{
background:#fff;border:1px solid rgba(11,18,32,.06);border-radius:16px;
padding:20px;box-shadow:0 14px 34px rgba(5,12,26,.25);
}
.sec--dark .trust__i h3{color:var(--ink)}
.sec--dark .trust__i p{color:var(--ink-2)}
.sec--dark .trust__i a{color:var(--blue-d)}
.founders__chips{
position:absolute;right:3%;top:26%;display:flex;flex-direction:column;gap:9px;
}
.founders__chips i{
font-style:normal;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
border-radius:100px;padding:9px 16px;font-size:13.5px;font-weight:600;color:#0F3D24;
box-shadow:0 8px 22px rgba(11,18,32,.18);
}
@media (max-width:900px){ .founders__chips{display:none} }
/* ═══ FAQ - ДІАЛОГ (раунд 8): наша ж фіча автовідповідей ══════ */
.faq{max-width:820px;display:flex;flex-direction:column;gap:22px}
.faq__i{display:flex;flex-direction:column;gap:10px}
.faq__i h3{
align-self:flex-end;max-width:78%;
background:var(--blue);color:#fff;
border-radius:18px 18px 4px 18px;padding:13px 20px;
font-size:15.5px;font-weight:600;line-height:1.45;margin:0;
}
.faq__i p{
position:relative;align-self:flex-start;max-width:86%;
background:#fff;border:1px solid var(--line);
border-radius:18px 18px 18px 4px;padding:14px 20px 14px 56px;
font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0;
box-shadow:var(--sh-1);
}
.faq__i p::before{
content:'';position:absolute;left:14px;top:13px;width:30px;height:30px;
border-radius:50%;background:var(--blue) url('img/enez-business.png') center/70% no-repeat;
}
/* ═══ РАУНД 9: корені пустот і контраст ═══════════════════════ */
/* FAQ: дві колонки, зліва sticky-картка */
.faq-wrap{display:grid;grid-template-columns:320px 1fr;gap:44px;align-items:start}
.faq-side{position:sticky;top:90px}
.faq-side__card{
background:#fff;border:1px solid var(--line);border-radius:18px;
padding:22px;box-shadow:var(--sh-1);
}
.faq-side__card b{display:block;font-size:17px;color:var(--ink);margin-bottom:8px}
.faq-side__card p{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.faq-side__note{
display:flex;align-items:center;gap:8px;margin:14px 2px 0;
font-size:13px;color:var(--mut-2);
}
/* старі картки-обгортки FAQ більше не потрібні: діалог живе без рамок */
.faq{max-width:none}
.faq__i{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.faq__i:hover{transform:none;box-shadow:none}
@media (max-width:900px){
.faq-wrap{grid-template-columns:1fr;gap:20px}
.faq-side{position:static}
}
/* фінал: фон темний із раунду 7 - текст наздоганяє.
Заголовок фіналу - , не H2: число місць
міняє JS, а динамічний H2 - поганий сигнал для індексації. */
.final__txt h2,.final__title{color:#fff}
.final__title{
font-size:clamp(28px,3.6vw,42px);font-weight:700;line-height:1.15;
letter-spacing:-.02em;margin:0 0 14px;
}
.final__txt h2 span,.final__title span{color:var(--yellow)}
.final__txt>p{color:#C9D6F2}
.final__list li{color:#DEE7F9}
/* ═══ ПАРИТЕТ ІЗ ZAPYS24 (раунд 10, 24.08) ════════════════════
Чотири системні прийоми з візуального аудиту конкурента:
акцентне слово в H2, рукописний підпис на секцію, CTA з
кружком-стрілкою, степпер із міні-мокапами й бейджем-результатом. */
/* акцентне слово заголовка: одне-два на секцію, не більше */
.hl{color:var(--blue)}
.sec--dark .hl{color:var(--yellow)}
/* рукописний підпис біля заголовка секції */
.sec__hd--note{position:relative}
.note{font-size:24px}
.note--hd{
position:absolute;right:-190px;top:34px;transform:rotate(-3deg);
color:var(--blue-d);
}
.note--hd .note__ar{width:40px;height:26px;transform:translateY(10px)}
@media (max-width:1120px){ .note--hd{display:none} }
/* CTA з кружком-стрілкою: на світлому фоні синя пігулка + білий кружок,
на темному - білая пігулка (btn--inv) + синій кружок */
.btn--arr{padding-right:16px;gap:12px}
.btn--arr::after{
content:'';width:28px;height:28px;flex:none;border-radius:50%;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6' fill='none' stroke='%232563EB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
transition:transform .18s var(--ease);
}
.btn--arr:hover::after{transform:translateX(3px)}
.btn--sm.btn--arr{padding-right:12px;gap:9px}
.btn--sm.btn--arr::after{width:24px;height:24px;background-size:13px}
.btn--inv{background:#fff;color:var(--ink)}
.btn--inv:hover{background:#F3F6FC;color:var(--ink)}
.btn--inv.btn--arr::after{
background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
}
/* ── степпер: компактні картки + бейдж-результат під кожною ──── */
.steps2{
position:relative;
display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
counter-reset:none;padding-bottom:40px;
}
.step2{
position:relative;display:flex;flex-direction:column;gap:12px;
background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
padding:22px 20px 26px;min-width:0;
transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
}
.step2:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--blue-l2)}
.step2--accent{border-color:var(--blue-l2);background:linear-gradient(165deg,var(--blue-l),var(--card) 52%)}
.step2__hd{display:flex;align-items:center;gap:12px}
.step2__hd h3{margin:0;font-size:17px}
.step2__no{
width:38px;height:38px;flex:none;border-radius:50%;background:var(--blue);color:#fff;
display:grid;place-items:center;font-size:16px;font-weight:700;
}
.step2>p{margin:0;font-size:14px;color:var(--ink-2)}
.step2__mock{
margin-top:auto;display:grid;gap:8px;
background:var(--bg-2);border:1px solid var(--line-2);border-radius:14px;padding:12px;
font-size:12.5px;
}
.m2__field{
display:flex;align-items:baseline;justify-content:space-between;gap:10px;
background:#fff;border:1px solid var(--line-2);border-radius:9px;padding:7px 11px;
}
.m2__field span{color:var(--mut-2);font-size:11px}
.m2__field b{color:var(--ink);font-weight:500;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m2__btn{background:var(--blue);color:#fff;text-align:center;border-radius:100px;padding:8px;font-size:12px;font-weight:600}
.m2__store{display:flex;align-items:center;gap:10px;line-height:1.35}
.m2__store b{font-size:13px;color:var(--ink)}
.m2__ava{width:34px;height:34px;flex:none;border-radius:10px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.m2__ava--img{object-fit:cover;border:1px solid var(--line-2)}
.m2__prog{height:7px;background:var(--line);border-radius:5px;overflow:hidden}
.m2__prog i{display:block;height:100%;background:var(--ok);border-radius:5px}
.m2__hint{font-size:11px;color:var(--mut-2)}
.m2__file{background:#fff;border:1px dashed var(--line);border-radius:9px;padding:8px 11px;color:var(--ink-2);font-weight:500}
.m2__order{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line-2);border-radius:9px;padding:8px 11px;color:var(--ink-2)}
.m2__order b{margin-left:auto;color:var(--ink);white-space:nowrap}
.m2__tick{width:4px;height:20px;border-radius:2px;background:var(--c,#2563EB);flex:none}
.m2__chips{display:flex;flex-wrap:wrap;gap:6px}
.m2__chips i{font-style:normal;font-size:11px;font-weight:600;background:#DEF7EC;color:#046C4E;border-radius:100px;padding:4px 10px}
/* бейдж-результат: наполовину виходить за нижню межу картки -
той самий шар «елемент поверх контейнера», що в Zapys24 */
.step2__res{
position:absolute;left:16px;bottom:-16px;z-index:2;
display:inline-flex;align-items:center;gap:8px;
background:#fff;border:1px solid var(--line-2);border-radius:100px;
padding:8px 14px;font-size:12.5px;font-weight:600;color:var(--ink);
box-shadow:0 10px 26px rgba(11,18,32,.14);white-space:nowrap;
}
.step2__res i{
font-style:normal;width:18px;height:18px;flex:none;border-radius:50%;
display:grid;place-items:center;font-size:11px;
background:#DFF5E7;color:#178A50;font-weight:700;
}
.step2__res--push i{width:9px;height:9px}
/* ── роадмап (фідбек 24.08): рівний ряд, лінія етапів, послідовна
поява 1→4, фінальний етап отримує зелену обводку.
Механіка: .reveal стоїть на контейнері
, а не на картках -
observer ставить .is-in один раз, далі все веде CSS. ── */
.steps2.reveal{opacity:1;transform:none}
/* лінія етапів: малюється зліва направо за карточками, видно її
у проміжках між ними - класичний roadmap-конектор */
.steps2::before{
content:'';position:absolute;left:3%;right:3%;top:41px;height:3px;
background:linear-gradient(90deg,var(--blue) 0%,var(--blue-l2) 100%);
border-radius:3px;z-index:0;
transform:scaleX(0);transform-origin:left center;
transition:transform 1.5s var(--ease) .15s;
}
.steps2.is-in::before{transform:scaleX(1)}
@media (max-width:1120px){ .steps2::before{display:none} }
/* картки: старт нижче й прозоро, поява по черзі вздовж лінії */
.steps2 .step2{
opacity:0;transform:translateY(26px);
transition:opacity .5s var(--ease),transform .5s var(--ease),
border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.steps2.is-in .step2{opacity:1;transform:none}
.steps2.is-in .step2:nth-child(1){transition-delay:.1s}
.steps2.is-in .step2:nth-child(2){transition-delay:.45s}
.steps2.is-in .step2:nth-child(3){transition-delay:.8s}
.steps2.is-in .step2:nth-child(4){transition-delay:1.15s}
/* фінал маршруту: зелена обводка на 4-му етапі після його появи */
.steps2.is-in .step2--accent{
border-color:#22B573;
box-shadow:0 0 0 4px rgba(34,181,115,.16),0 8px 24px rgba(34,181,115,.14);
transition-delay:1.15s,1.15s,1.7s,1.7s;
}
.steps2.is-in .step2--accent .step2__no{background:#178A50;transition:background .4s var(--ease) 1.7s}
@media (prefers-reduced-motion:reduce){
.steps2 .step2{opacity:1;transform:none;transition:none}
.steps2::before{transform:scaleX(1);transition:none}
.steps2.is-in .step2--accent{transition:none}
}
/* ── калькулятор комісії (24.08): слайдер + вибір відсотка ───── */
.calc2{
display:grid;gap:16px;margin-bottom:20px;padding-bottom:20px;
border-bottom:1px solid var(--line-2);
}
.calc2__f{display:block;min-width:0}
.calc2__l{display:block;font-size:14px;color:var(--mut);margin-bottom:8px}
.calc2__v{font-size:16px;color:var(--ink);font-weight:700}
.calc2__range{
width:100%;margin:0;accent-color:var(--blue);cursor:pointer;height:22px;
}
.calc2__opts{display:flex;gap:8px;flex-wrap:wrap}
.calc2__opts button{
font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);
background:#fff;border:1.5px solid var(--line);border-radius:100px;
padding:7px 15px;cursor:pointer;
transition:background .18s,border-color .18s,color .18s,transform .18s;
}
.calc2__opts button:hover{border-color:var(--blue-l2);background:var(--blue-l)}
.calc2__opts button.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.money__cta{margin-top:16px}
/* ── обгортка довідки: вся секція - один , остання дія
сторінки лишається формою (фідбек 24.08) ── */
.sec--dovidka{padding:36px 0 44px}
.dovwrap{
background:var(--card);border:1px solid var(--line);border-radius:20px;
padding:0 clamp(18px,3vw,32px);box-shadow:var(--sh-1);
transition:border-color .2s,box-shadow .2s;
}
.dovwrap:hover,.dovwrap[open]{border-color:var(--blue-l2);box-shadow:var(--sh-2)}
.dovwrap>summary{
list-style:none;cursor:pointer;position:relative;
padding:22px 56px 22px 0;
}
.dovwrap>summary::-webkit-details-marker{display:none}
.dovwrap__h2{font-size:clamp(19px,2.2vw,26px);margin:0 0 4px;letter-spacing:-.01em}
.dovwrap__hint{display:block;font-size:14px;color:var(--mut)}
.dovwrap__x{
position:absolute;right:0;top:50%;transform:translateY(-50%);
width:34px;height:34px;border-radius:50%;background:var(--blue-l);color:var(--blue-d);
display:grid;place-items:center;font-size:20px;font-weight:600;
transition:background .2s,color .2s;
}
.dovwrap__x::before{content:'+'}
.dovwrap[open] .dovwrap__x{background:var(--blue);color:#fff}
.dovwrap[open] .dovwrap__x::before{content:'−'}
.dovwrap__body{padding:2px 0 24px;animation:seoqOpen .4s var(--ease)}
@media (prefers-reduced-motion:reduce){ .dovwrap__body{animation:none} }
/* ── SEO-довідка: -акордеони під пошук і LLM (24.08).
На всю ширину wrap, каскадна поява як у роадмапа степпера. ── */
.seoq{display:grid;gap:12px}
.seoq.reveal{opacity:1;transform:none}
.seoq .seoq__i{
opacity:0;transform:translateY(16px);
transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .2s;
}
.seoq.is-in .seoq__i{opacity:1;transform:none}
.seoq.is-in .seoq__i:nth-child(1){transition-delay:.05s}
.seoq.is-in .seoq__i:nth-child(2){transition-delay:.13s}
.seoq.is-in .seoq__i:nth-child(3){transition-delay:.21s}
.seoq.is-in .seoq__i:nth-child(4){transition-delay:.29s}
.seoq.is-in .seoq__i:nth-child(5){transition-delay:.37s}
.seoq.is-in .seoq__i:nth-child(6){transition-delay:.45s}
.seoq.is-in .seoq__i:nth-child(7){transition-delay:.53s}
.seoq.is-in .seoq__i:nth-child(8){transition-delay:.61s}
.seoq__i{
background:var(--card);border:1px solid var(--line);border-radius:16px;
padding:0 24px;box-shadow:var(--sh-1);
}
.seoq__i:hover{border-color:var(--blue-l2)}
.seoq__i[open]{border-color:var(--blue-l2);box-shadow:var(--sh-2)}
.seoq__i summary{
cursor:pointer;font-weight:600;font-size:16px;color:var(--ink);
padding:17px 40px 17px 0;list-style:none;position:relative;
}
.seoq__i summary::-webkit-details-marker{display:none}
.seoq__i summary::after{
content:'+';position:absolute;right:2px;top:50%;transform:translateY(-50%);
width:26px;height:26px;border-radius:50%;background:var(--blue-l);
color:var(--blue-d);font-size:18px;font-weight:600;line-height:1;
display:grid;place-items:center;transition:background .2s,color .2s;
}
.seoq__i[open] summary::after{content:'−';background:var(--blue);color:#fff}
.seoq__i p{
margin:0;padding:0 0 18px;font-size:15px;line-height:1.65;color:var(--ink-2);
max-width:78ch;
animation:seoqOpen .35s var(--ease);
}
@keyframes seoqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
.seoq .seoq__i{opacity:1;transform:none;transition:none}
.seoq__i p{animation:none}
}
@media (max-width:760px){
.seoq__i{padding:0 16px}
.seoq__i summary{font-size:15px;padding:14px 36px 14px 0}
}
/* цифра не повинна стрибати по ширині на вузьких екранах */
.money__row b{font-variant-numeric:tabular-nums}
/* результат калькулятора: кольорові плашки замість голих рядків
(фідбек 24.08: «дешево і сиро») */
.money__nums .money__row{
background:#FDECEA;border:1px solid #F6D3CE;border-radius:14px;
padding:14px 18px;
}
.money__nums .money__row--ok{background:#EAF8F1;border-color:#C7EBDB}
.money__nums .money__row b{font-size:clamp(26px,3vw,36px);min-width:150px;white-space:nowrap}
.money__nums .money__vs{align-self:center;margin:2px 0}
@media (max-width:1120px){
.steps2{grid-template-columns:repeat(2,1fr);gap:18px 16px;row-gap:34px}
}
@media (max-width:640px){
.steps2{grid-template-columns:1fr;row-gap:32px}
}
/* ── смуга фактів: біла панель поверх фото замість «лінії з цифрами»
(фідбек 24.08: тонкий border-top на напівпрозорому фото читався
дешево). Панель із тінню - ще один шар поверх героя. ── */
.facts{
grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;
background:#fff;border:1px solid var(--line-2);border-radius:20px;
padding:24px 6px;box-shadow:0 18px 44px rgba(11,18,32,.10);
}
.fact{align-items:center;text-align:center;padding:2px 18px}
.fact+.fact{border-left:1px solid var(--line-2)}
@media (max-width:1080px){
.facts{grid-template-columns:repeat(2,1fr);row-gap:20px;padding:20px 14px}
.fact+.fact{border-left:0}
.fact{align-items:flex-start;text-align:left;border-left:3px solid var(--blue-l2);padding:2px 0 2px 14px}
}
/* ── кабінет: сцена з фото-підкладкою (чотири шари: фото → мак →
телефон → рукописний підпис; кожен виходить за межі попереднього) ── */
.kab-scene{
position:relative;margin-top:10px;margin-bottom:44px;
padding:clamp(24px,4vw,56px) clamp(14px,3vw,44px) clamp(28px,4.5vw,60px);
/* transform:translateX(48px) неактивних слайдів вилазив за сцену і
давав 8px горизонтального скролу на мобільному. clip ріже лише
по X - телефон і далі виходить за нижню межу. */
overflow-x:clip;
}
.kab-scene__bg{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
border-radius:28px;
}
/* вуаль: мак і підписи читаються, фото лишається живим */
.kab-scene::before{
content:'';position:absolute;inset:0;border-radius:28px;
background:linear-gradient(115deg,rgba(255,255,255,.62),rgba(255,255,255,.20) 52%,rgba(11,18,32,.14));
}
/* мак зсунуто правіше, щоб картка-тема зліва майже не лізла на екран */
.kab-scene .kab--mock{margin:0 0 0 6%;width:min(700px,68%)}
/* стрілки на одній осі (фідбек 24.08) */
.kab-scene .kab__ar--prev{left:-52px;top:42%}
.kab-scene .kab__ar--next{right:-56px;top:42%}
.kab-scene .kab__phone{right:3%;bottom:-30px}
/* картка-тема: біля лівого краю сцени, компактніша */
.kab-scene .kab__cap{left:-4%;max-width:232px;padding:13px 16px}
@media (max-width:900px){
.kab-scene{padding:16px 12px 20px;margin-bottom:24px}
.kab-scene .kab--mock{width:96%;margin:0 auto}
.kab-scene .kab__ar--prev{left:-4px}
.kab-scene .kab__ar--next{right:-4px;top:44%}
}
/* панелі в парі navy-карток однакової висоти (фідбек клієнта 28.08).
Лише на широких екранах: на мобільному картки йдуть одна під одною
і фіксована висота дала б порожнечу. */
@media (min-width:901px){
/* та сама пропорція, що у скріншота ліворуч (1000x360) - панелі
збігаються і зверху, і знизу за будь-якої ширини картки */
.bento__i--navy .mock--serv{aspect-ratio:1000/360;align-content:center;margin-top:16px}
}
/* Права navy-картка не має жовтого бейджа, тому її вміст стояв на 38px
вище за ліву. Невидимий бейдж-заглушка вирівнює заголовок, текст і
верх білої панелі. На мобільному картки йдуть одна під одною - там
заглушка не потрібна. */
.bento__tag--ghost{visibility:hidden}
@media (max-width:900px){ .bento__tag--ghost{display:none} }