/* ===== База ===== */
html { scroll-behavior:smooth; }
main { overflow-x:clip; } /* до появи елементи анімацій (нахил, зсув) трохи виходять за екран: не даємо сторінці їхати вбік */
section[id] { scroll-margin-top:80px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.head-row { display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s5); }
.head-row .h2 { max-width:16ch; }
.lead { max-width:48ch; color:var(--ink-60); margin:0; }
.bg-soft { background:var(--soft); }
p { margin:0 0 12px; } p:last-child { margin-bottom:0; }
a.btn { text-decoration:none; }
/* ===== Шапка ===== */
.nav { position:sticky; top:0; z-index:10; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.07); }
.nav .container { display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo { display:inline-flex; align-items:center; }
.logo img { display:block; height:22px; width:auto; }
.nav ul { display:flex; gap:var(--s4); list-style:none; margin:0; padding:0; }
.nav .btn-sm { white-space:nowrap; }
.nav-burger { display:none; position:relative; width:44px; height:44px; margin-left:6px; margin-right:-8px; padding:0; border:0; background:transparent; cursor:pointer; }
.nav-burger span { position:absolute; left:11px; right:11px; height:2px; border-radius:2px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s; }
.nav-burger span:nth-child(1) { top:15px; } .nav-burger span:nth-child(2) { top:21px; } .nav-burger span:nth-child(3) { top:27px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.nav-menu { position:absolute; left:0; right:0; top:100%; display:none; flex-direction:column; padding:6px var(--gutter) 14px; background:#fff; border-top:1px solid rgba(0,0,0,.08); box-shadow:0 14px 28px rgba(0,0,0,.08); }
.nav-menu a { padding:15px 2px; color:var(--ink); text-decoration:none; font:600 1.05rem/1.2 var(--font-body); border-bottom:1px solid rgba(0,0,0,.07); }
.nav-menu a:last-child { border-bottom:0; }
.nav-menu a:active { color:var(--blue); }
.nav-menu.open { display:flex; animation:menuIn .28s var(--ease); }
@keyframes menuIn { from { opacity:0; translate:0 -8px; } to { opacity:1; translate:0 0; } }
.f2-direct { scroll-margin-top:96px; margin-top:clamp(32px,5vw,56px); }
.f2-direct p { margin:0; max-width:34em; font-size:1.0625rem; line-height:1.45; color:#fff; }
.f2-direct + .f2-big { margin-top:var(--s3); }
@media (max-width:960px) { .nav-burger { display:block; } .nav .container .btn-sm { margin-left:auto; } }
@media (min-width:961px) { .nav-menu { display:none !important; } }
@media (max-width:420px) { .hide-sm { display:none; } .nav-burger { margin-right:-6px; } }
.nav ul a { color:var(--ink); text-decoration:none; font-weight:500; }
.nav ul a:hover { color:var(--blue); }
.btn--blue { background:var(--blue); color:#fff; }
.btn--blue::after { background-color:#fff; }
.btn-sm { min-height:48px; padding:0 24px; font-size:var(--fs-small); }
/* ===== Hero: синій екран, дуга, теги, головна кнопка ===== */
.hero-sec { --arch:clamp(70px,9vw,120px); --below:calc(var(--arch) * 2 + 46px); position:relative; overflow:hidden; display:flex; align-items:stretch; min-height:max(600px,64svh); background:#1F33B5; color:#fff; text-align:center; }
.hero-sec::after { content:''; position:absolute; left:50%; bottom:-1px; width:160%; height:var(--arch); transform:translateX(-50%); background:var(--soft); border-radius:50% 50% 0 0 / 100% 100% 0 0; z-index:1; }
.hero-inner { position:relative; z-index:3; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s4); padding-bottom:var(--below); }
.hero-t { margin:0; max-width:16ch; color:#fff; font:800 clamp(2.1rem,5.2vw,4.7rem)/1.08 var(--font-display); letter-spacing:-.03em; }
.hero-row { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
/* Теги під кнопкою: короткий спуск із плавною появою, потім їх можна рухати */
.b-tags { position:absolute; left:0; right:0; bottom:calc(var(--arch) + 10px); z-index:2; display:flex; flex-direction:column; align-items:center; gap:12px; padding-inline:var(--gutter); pointer-events:none; }
.b-tags .tr { display:flex; justify-content:center; flex-wrap:wrap; gap:14px 16px; }
.b-tags .tr + .tr { margin-left:clamp(30px,5vw,90px); }
.tg { display:inline-block; padding:16px 28px; border-radius:24px; font:600 clamp(1rem,1.4vw,1.2rem)/1 var(--font-body); white-space:nowrap; }
.tg.white { background:#fff; color:#000; } .tg.ink { background:#000; color:#fff; }
.tg.sky { background:#A9C1FF; color:#000; } .tg.bright { background:#4A6BFF; color:#fff; }
.b-tags .tg { pointer-events:auto; cursor:grab; user-select:none; will-change:transform; transform:translate(var(--dx,0px), calc(var(--y,0px) + var(--dy,0px))) rotate(var(--r,0deg)); }
.b-tags .tg { padding:19px 34px; border-radius:32px; font-size:clamp(1.1rem,1.65vw,1.5rem); touch-action:none; }
.b-tags .tg.drag { cursor:grabbing; z-index:6; }
.js .b-tags .tg { animation:tagDrop 1.5s linear both; animation-delay:var(--dl,.2s); }
@keyframes tagDrop {
0% { translate:var(--sx,0px) calc(var(--tag-drop,300px) * -1); rotate:var(--sr,-14deg); opacity:1; animation-timing-function:cubic-bezier(.55,0,.9,.5); }
48% { translate:calc(var(--sx,0px) * .3) 0; rotate:calc(var(--sr,0deg) * -.45); animation-timing-function:cubic-bezier(.2,.7,.35,1); }
57% { translate:calc(var(--sx,0px) * .05) -38px; rotate:calc(var(--sr,0deg) * .3); animation-timing-function:cubic-bezier(.55,0,.9,.5); }
66% { translate:calc(var(--sx,0px) * -.14) 0; rotate:calc(var(--sr,0deg) * -.2); animation-timing-function:cubic-bezier(.2,.7,.35,1); }
74% { translate:calc(var(--sx,0px) * -.04) -15px; rotate:calc(var(--sr,0deg) * .1); animation-timing-function:cubic-bezier(.55,0,.9,.5); }
83% { translate:0 0; rotate:calc(var(--sr,0deg) * -.05); animation-timing-function:cubic-bezier(.2,.7,.35,1); }
90% { translate:0 -5px; rotate:0deg; animation-timing-function:ease-in; }
100% { translate:0 0; rotate:0deg; opacity:1; }
}
/* Головна кнопка-дія: єдиний лайм на екрані (правило 60-30-10). Раз на 4 с «смикається» */
.btn--cta { position:relative; min-height:64px; padding:6px 22px 6px 34px; gap:14px; color:#000; font-size:1.0625rem; font-weight:600; animation:ctaWiggle 4.2s ease-in-out .7s infinite; }
.btn--cta::after { width:24px; height:24px; background:transparent; border:0; }
.btn--cta::before { content:''; position:absolute; right:22px; top:50%; width:24px; height:24px; margin-top:-12px; z-index:1; pointer-events:none; background:#000; transform:rotate(-45deg); transition:transform var(--t) var(--ease), background var(--t) var(--ease);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; }
.btn--cta::before, .btn--cta::after { animation:ctaNudge 4.2s ease-in-out .7s infinite; }
.btn--cta:hover, .btn--cta:hover::before, .btn--cta:hover::after { animation:none; }
.btn--cta:hover::before { transform:rotate(0deg); }
@keyframes ctaWiggle { 0%, 22%, 100% { rotate:0deg; translate:0 0; } 4% { rotate:-2.4deg; translate:-3px 0; } 8% { rotate:2.2deg; translate:3px 0; } 12% { rotate:-1.6deg; translate:-2px 0; } 16% { rotate:1.1deg; translate:1px 0; } }
@keyframes ctaNudge { 0%, 22%, 100% { translate:0 0; } 9% { translate:5px 0; } 15% { translate:0 0; } }
@media (max-width:1100px) and (min-width:761px) { .hero-sec { --below:calc(var(--arch) + 168px); min-height:660px; } }
@media (max-width:760px) {
.hero-sec { --arch:44px; --below:208px; min-height:470px; }
.hero-inner { gap:var(--s2); }
.hero-row { flex-wrap:nowrap; gap:10px; }
.b-tags { bottom:calc(var(--arch) + 10px); flex-direction:row; flex-wrap:wrap; justify-content:center; gap:8px; padding-inline:10px; }
.b-tags .tr { display:contents; }
.b-tags .tr + .tr { margin-left:0; }
.b-tags .tg { padding:12px 15px; font-size:.86rem; border-radius:22px; }
.hero-sec .btn--cta { min-height:60px; padding:5px 20px 5px 24px; gap:12px; font-size:.95rem; white-space:nowrap; justify-content:center; }
.hero-sec .btn--cta::after { width:24px; height:24px; }
.hero-sec .btn--cta::before { right:20px; }
.nav .btn-sm { white-space:nowrap; padding:0 16px; min-height:44px; }
.logo img { height:17px; }
}
@media (max-width:360px) { .hero-t { font-size:1.65rem; } .h2 { font-size:1.65rem; } }
@media (prefers-reduced-motion:reduce) { .js .b-tags .tg, .btn--cta, .btn--cta::before, .btn--cta::after { animation:none; } }
/* ===== Цифри під hero ===== */
.stats-sec { background:var(--soft); padding-block:var(--s6) var(--s2); }
.stats-sec + .bg-soft { padding-top:clamp(72px,9vw,120px); }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.stats-sec .num { color:#000; font:700 clamp(1.7rem,3vw,2.6rem)/1 var(--font-display); letter-spacing:-.03em; white-space:nowrap; }
.stats-sec .stats p { margin:12px 0 0; max-width:22ch; color:#000; font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.3; }
/* ===== Схема з телефоном і пілюлями-вигодами ===== */
.section.sol { padding-block:clamp(32px,5vw,56px); }
.sol-stage { position:relative; display:grid; grid-template-columns:1fr minmax(300px,340px) 1fr; align-items:center; min-height:600px; }
.phone { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; aspect-ratio:9/17.2; padding:64px 48px 36px; background:#fff; border:10px solid #000; border-radius:46px; text-align:center; transition:translate .9s var(--ease), opacity .9s var(--ease); }
.phone::before { content:''; position:absolute; top:14px; left:50%; width:92px; height:26px; transform:translateX(-50%); background:#000; border-radius:20px; }
.ph-in { display:flex; flex-direction:column; align-items:center; gap:14px; }
.ph-emoji { font-size:clamp(2.6rem,4vw,3.4rem); line-height:1; }
.ph-t { margin:0; font:800 clamp(1.5rem,2vw,1.9rem)/1.12 var(--font-display); letter-spacing:-.02em; }
.sol-stage { align-items:stretch; } .sol-stage .phone { align-self:center; }
.sol .col { position:relative; z-index:3; display:flex; flex-direction:column; justify-content:space-around; gap:14px; padding-block:44px; }
.sol .col.l { align-items:flex-end; } .sol .col.r { align-items:flex-start; }
.pl { display:block; width:max-content; padding:18px 30px; border-radius:999px; font:600 clamp(.95rem,1.45vw,1.15rem)/1.2 var(--font-body); white-space:nowrap; cursor:grab; user-select:none; will-change:transform;
transform:translate(var(--dx,0px), calc(var(--dy,0px) + var(--sy,0px))) rotate(calc(var(--r,0deg) + var(--sr,0deg))); }
.pl.drag { cursor:grabbing; z-index:6; }
.pl.lime { background:var(--lime); color:#000; } .pl.white { background:#fff; color:#000; border:1.5px solid #000; } .pl.ink { background:#000; color:#fff; } .pl.blue { background:var(--blue); color:#fff; }
.sol .l .pl:nth-child(1) { --r:-3deg; --o:0; margin-right:-18px; } .sol .l .pl:nth-child(2) { --r:2deg; --o:2; margin-right:-36px; } .sol .l .pl:nth-child(3) { --r:-2deg; --o:4; margin-right:-36px; } .sol .l .pl:nth-child(4) { --r:3deg; --o:6; margin-right:-18px; }
.sol .r .pl:nth-child(1) { --r:3deg; --o:1; margin-left:-18px; } .sol .r .pl:nth-child(2) { --r:-2deg; --o:3; margin-left:-36px; } .sol .r .pl:nth-child(3) { --r:2deg; --o:5; margin-left:-36px; } .sol .r .pl:nth-child(4) { --r:-3deg; --o:7; margin-left:-18px; }
.js .sol:not(.in) .pl { opacity:0; translate:0 -160px; } .js .sol:not(.in) .phone { opacity:0; translate:0 40px; }
.js .sol.in .pl { animation:plDrop 1.05s both; animation-delay:calc(.3s + var(--o,0) * .14s); }
@keyframes plDrop { 0% { opacity:0; translate:0 -170px; rotate:-14deg; } 12% { opacity:1; } 55% { translate:0 10px; rotate:2deg; } 75% { translate:0 -5px; rotate:-1deg; } 100% { opacity:1; translate:0 0; rotate:0deg; } }
@media (max-width:860px) {
.sol-stage { --pw:min(168px,45vw); display:block; min-height:0; margin-inline:calc(var(--gutter) * -1); padding-block:12px; }
.phone { width:var(--pw); margin:0 auto; aspect-ratio:9/17.6; padding:44px 26px 22px; border-width:6px; border-radius:32px; }
.phone::before { top:10px; width:60px; height:17px; }
.ph-in { gap:10px; } .ph-emoji { font-size:2.2rem; } .ph-t { font-size:.82rem; }
.sol .col { position:absolute; top:50%; bottom:auto; translate:0 -50%; justify-content:center; gap:12px; width:calc(50% - var(--pw) / 2 + 12px); }
.sol .col.l { right:calc(50% + var(--pw) / 2 - 12px); } .sol .col.r { left:calc(50% + var(--pw) / 2 - 12px); }
.sol .pl { margin:0 !important; max-width:100%; padding:12px 14px; border-radius:22px; font-size:.82rem; line-height:1.2; white-space:normal;
transform:translate(var(--dx,0px), calc(var(--dy,0px) + var(--sy,0px))) rotate(calc(var(--r,0deg) * .7 + var(--sr,0deg))); }
.sol .col { padding-block:0; justify-content:center; }
.sol .l .pl:nth-child(n) { margin-right:2px !important; } .sol .r .pl:nth-child(n) { margin-left:2px !important; }
}
/* Вузький телефон: ті самі пілюлі навколо телефона, тільки компактніші й тонші */
@media (max-width:560px) {
.sol-stage { --pw:min(122px,33vw); margin-inline:calc(var(--gutter) * -1 + 6px); }
.phone { padding:38px 12px 18px; border-width:5px; border-radius:28px; }
.ph-t { font-size:.72rem; } .ph-emoji { font-size:1.9rem; }
.sol .col { gap:10px; width:calc(50% - var(--pw) / 2 + 16px); }
.sol .col.l { right:calc(50% + var(--pw) / 2 - 16px); } .sol .col.r { left:calc(50% + var(--pw) / 2 - 16px); }
.sol .pl { padding:9px 11px; border-radius:17px; font-size:.78rem; line-height:1.15; font-weight:600; }
.sol .l .pl:nth-child(n) { margin-right:0 !important; } .sol .r .pl:nth-child(n) { margin-left:0 !important; }
}
@media (prefers-reduced-motion:reduce) { .js .sol:not(.in) .pl, .js .sol:not(.in) .phone { opacity:1; translate:none; } .js .sol.in .pl { animation:none; } }
/* ===== Про засновницю ===== */
.about-card { display:grid; grid-template-columns:5fr 7fr; gap:clamp(28px,5vw,72px); align-items:center; }
.about-photo { aspect-ratio:4/5; border-radius:var(--r-card); overflow:hidden; }
.about-photo img { width:100%; height:100%; object-fit:cover; object-position:46% 14%; }
.about-body { display:flex; flex-direction:column; gap:var(--s3); }
.about-body .h2 { max-width:18ch; font-size:clamp(2rem,4.2vw,3.5rem); }
.about-body p { margin:0; max-width:52ch; }
.about-sign { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-weight:600; }
.about-sign img { height:16px; width:auto; }
.about-facts { display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--s1); }
.about-facts span { background:var(--soft); border-radius:999px; padding:14px 22px; font-size:var(--fs-small); line-height:1.2; }
.about-facts b { font-weight:800; }
@media (max-width:860px) { .about-card { grid-template-columns:1fr; } .about-photo { aspect-ratio:1/1; } }
/* ===== Футер ===== */
body footer { background:#000; color:#fff; padding:0; }
body footer .container { display:block; }
.f2 { padding:clamp(40px,6vw,72px) 0 clamp(24px,3vw,36px); overflow:hidden; }
.f2-grid { display:grid; grid-template-columns:1.15fr 1fr; grid-template-areas:"brand menu" "talk menu"; column-gap:clamp(32px,5vw,64px); row-gap:var(--s4); align-items:start; }
.f2-grid .ft-brand { grid-area:brand; } .f2-menu { grid-area:menu; } .f2-talk { grid-area:talk; }
.ft-brand img { display:block; width:clamp(120px,12vw,150px); height:auto; }
.f2-menu { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.f2-menu h4 { margin:0 0 14px; font:700 .8125rem/1 var(--font-body); letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.f2-menu ul { list-style:none; margin:0; padding:0; display:grid; gap:11px; font-size:1rem; font-weight:500; }
.f2-menu a { color:#fff; text-decoration:none; } .f2-menu a:hover { text-decoration:underline; text-underline-offset:4px; }
.f2-talk .f2-direct { margin-top:0; scroll-margin-top:96px; } .f2-talk .f2-direct p { margin:0; max-width:30em; font-size:1.0625rem; line-height:1.45; color:#fff; }
.f2-big { position:relative; margin-top:var(--s3); }
.f2-word { display:block; margin:0; font:800 clamp(2.2rem,5.4vw,5rem)/.95 var(--font-display); letter-spacing:-.04em; color:#fff; white-space:nowrap; }
.f2-chip { position:absolute; display:inline-flex; align-items:center; min-height:48px; padding:0 24px; border:4px solid #000; border-radius:999px; font-weight:600; font-size:var(--fs-small); text-decoration:none; color:#000; cursor:grab; user-select:none; will-change:transform; transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r,0deg)); transition:scale var(--t) var(--ease); }
.f2-chip:hover { scale:1.06; } .f2-chip.drag { cursor:grabbing; z-index:3; }
.f2-word .ch { position:relative; } .js .f2-word:not(.done) .ch { opacity:0; }
.f2-word .ch.cur::after { content:''; position:absolute; right:-.07em; top:.1em; bottom:.06em; width:.05em; background:#fff; animation:blink .7s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.js .f2-big:not(.in) .f2-chip { opacity:0; translate:0 -120px; }
.js .f2-big.in .f2-chip { animation:chipDrop .95s both; animation-delay:calc(.9s + var(--o,0) * .18s); }
@keyframes chipDrop { 0% { opacity:0; translate:0 -150px; rotate:-12deg; } 12% { opacity:1; } 55% { translate:0 10px; rotate:2deg; } 75% { translate:0 -4px; rotate:-1deg; } 100% { opacity:1; translate:0 0; rotate:0deg; } }
@media (prefers-reduced-motion:reduce) { .js .f2-big:not(.in) .f2-chip { opacity:1; translate:none; } .js .f2-big.in .f2-chip { animation:none; } .js .f2-word:not(.done) .ch { opacity:1; } }
.f2-chip.tg { left:16%; top:62%; background:var(--blue); color:#fff; --r:-4deg; }
.f2-chip.ig { left:52%; top:6%; background:var(--lime); --r:3deg; }
.f2-chip.ml { right:8%; top:58%; background:#fff; --r:-3deg; }
.f2-note { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid rgba(255,255,255,.2); font-size:var(--fs-small); }
.f2-note p { color:#fff; font-weight:400; }
.f2-note a { color:#fff; font-weight:600; text-decoration:none; }
.f2-menu br.mbr { display:none; }
@media (max-width:860px) {
.f2-menu br.mbr { display:inline; }
.f2-grid { grid-template-columns:1fr; grid-template-areas:"brand" "menu" "talk"; row-gap:var(--s3); }
.f2-menu { grid-template-columns:1fr; gap:10px; }
.f2-menu h4 { display:none; }
.f2-menu ul { display:grid; grid-template-columns:1fr 1fr 1fr 1.3fr; gap:8px; font-size:.875rem; font-weight:600; }
.f2-word { font-size:clamp(1.8rem,10vw,4.2rem); }
.f2-big { display:flex; flex-wrap:wrap; align-items:center; gap:14px 12px; } .f2-word { flex:0 0 100%; margin-bottom:6px; }
.f2-big .f2-chip, .f2-big .f2-chip.tg, .f2-big .f2-chip.ig, .f2-big .f2-chip.ml { position:relative; left:auto; right:auto; top:auto; }
}
@media (max-width:520px) { .f2-big { gap:12px 8px; } .f2-chip { min-height:44px; padding:0 16px; border-width:3px; } }
/* Як ми працюємо: стопка карток-етапів, що наповзають одна на одну */
.stack { list-style:none; margin:0; padding:0 0 var(--s3); }
.sc { position:sticky; top:calc(var(--navh,76px) + 16px + var(--i,0) * 18px); display:grid; grid-template-columns:minmax(130px,.3fr) 1fr; gap:var(--s4); align-items:center; padding:clamp(24px,4vw,44px); min-height:240px; margin-bottom:var(--s4); border:2px solid #000; border-radius:var(--r-card); }
.sc { min-height:var(--sch,240px); }
.sc:nth-child(odd) { rotate:-.5deg; } .sc:nth-child(even) { rotate:.5deg; }
.sc-n { font:900 clamp(3.2rem,9vw,7.5rem)/1 var(--font-display); letter-spacing:-.04em; }
.sc-n--s { font-size:clamp(2.4rem,5.4vw,4.4rem); }
.sc-b { display:grid; gap:14px; max-width:60ch; justify-items:start; }
.sc h3 { margin:0; font:800 clamp(1.4rem,2.6vw,2rem)/1.1 var(--font-display); letter-spacing:-.02em; }
.sc p { margin:0; font-size:1.0625rem; line-height:1.5; }
.sc .pill { border-color:currentColor; color:inherit; }
.sc--white { background:#fff; color:#000; } .sc--lime { background:var(--lime); color:#000; }
.sc--blue { background:var(--blue); border-color:var(--blue); color:#fff; } .sc--ink { background:#000; color:#fff; }
@media (max-width:760px) {
.sc { --navh:64px; top:calc(64px + 10px + var(--i,0) * 12px); grid-template-columns:1fr; gap:var(--s2); min-height:var(--sch,0); padding:var(--s3); margin-bottom:var(--s3); }
.sc-n { font-size:3rem; } .sc-n--s { font-size:2.2rem; }
.sc p { font-size:1rem; }
}
@media (prefers-reduced-motion:reduce) { .sc { position:relative; top:auto; rotate:none; } }
/* Кейси: коротка картка + детально у вікні */
/* ===== Кейс ACE PADEL: мокапи пристроїв усередині вікна кейсу ===== */
.dlg-body { min-width:0; } .dlg-body > * { min-width:0; }
.dev { position:relative; width:100%; aspect-ratio:1600/900; margin-top:var(--s2); }
.dv { position:absolute; filter:drop-shadow(0 4px 6px rgba(0,0,0,.14)) drop-shadow(0 18px 24px rgba(0,0,0,.16)); }
.dv-t { left:3.2%; top:6%; width:73.5%; aspect-ratio:1486/913; z-index:1; }
.dv-p { right:4%; bottom:9.6%; width:22.55%; aspect-ratio:679/1370; z-index:2; filter:drop-shadow(-7px 6px 9px rgba(0,0,0,.26)) drop-shadow(0 20px 26px rgba(0,0,0,.18)); }
.dv-s { position:absolute; inset:0; overflow:hidden; background:#fff; z-index:1; -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.dv-t .dv-s { -webkit-mask-image:url(cases/mock-tablet-screen.png); mask-image:url(cases/mock-tablet-screen.png); }
.dv-p .dv-s, .ph .dv-s { -webkit-mask-image:url(cases/mock-phone-screen.png); mask-image:url(cases/mock-phone-screen.png); }
.dv-s img { position:absolute; display:block; object-fit:cover; object-position:0 0; }
.dv-t .dv-s img { left:2.124%; top:3.910%; width:96.155%; height:92.947%; }
.dv-p .dv-s img, .ph .dv-s img { left:5.302%; top:2.336%; width:89.249%; height:95.474%; object-fit:fill; }
.dv-f { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.ace-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); margin-top:var(--s2); }
.ace-stats div { background:var(--lime); border-radius:var(--r-card-sm); padding:var(--s2) var(--s3); display:flex; flex-direction:column; gap:6px; }
.ace-stats b { font:900 clamp(1.8rem,4vw,2.6rem)/1 var(--font-display); letter-spacing:-.03em; }
.ace-stats span { font-size:var(--fs-small); line-height:1.3; }
.ace-cta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); }
.ace-stats div { min-width:0; }
@media (max-width:520px) { .ace-stats { gap:8px; } .ace-stats div { padding:12px; } .ace-stats b { font-size:1.5rem; } .ace-stats span { font-size:.8rem; overflow-wrap:anywhere; } }
@media (max-width:860px) { .ace-stats { grid-template-columns:repeat(2,1fr); } }
.ace-cta { margin-top:var(--s2); }
.btn[href*="t.me/"]::after { background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2326A5E4' d='M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z'/%3E%3C/svg%3E") center/100% 100% no-repeat; border-radius:50%; }
.ace-stats--3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:620px) { .ace-stats--3 { grid-template-columns:1fr; } .ace-stats--3 div { flex-direction:row; align-items:center; gap:14px; } .ace-stats--3 b { flex:none; min-width:7.5ch; white-space:nowrap; } }
.sub-btns { flex-wrap:wrap; }
.ace-cta .btn[href*="t.me/"] { background:var(--soft); color:#000; border:1.5px solid #000; transition:background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease); }
.ace-cta .btn[href*="t.me/"]:hover { background:#000; color:#fff; }
@media (max-width:560px) {
.sub-btns { flex-wrap:nowrap; gap:8px; }
.sub-btns .btn { flex:1 1 0; min-width:0; min-height:46px; padding:4px 4px 4px 12px; gap:4px; font-size:.85rem; white-space:nowrap; }
.sub-btns .btn::after { width:34px; height:34px; flex:none; }
}
.ph-strip { display:flex; align-items:flex-start; gap:var(--s2); margin-top:var(--s3); padding:var(--s4) var(--s3) var(--s3); background:var(--soft); border-radius:var(--r-card-sm); overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:thin; }
.ph-i { flex:none; width:clamp(150px,22vw,215px); scroll-snap-align:center; margin:0; }
.ph-i:nth-child(even) { margin-top:var(--s4); }
.ph { position:relative; width:100%; aspect-ratio:679/1370; filter:drop-shadow(0 6px 8px rgba(0,0,0,.16)) drop-shadow(0 22px 26px rgba(0,0,0,.14)); }
.ph .dv-s { background:#eceef3; }
.ph .dv-s img { left:4.8%; top:1.9%; width:90.4%; height:96.3%; }
@media (max-width:640px) { .ph-strip { margin-inline:calc(var(--s3) * -1); border-radius:0; padding:var(--s3) 14px var(--s3); gap:12px; scroll-padding-left:14px; } .ph-i { width:min(44vw,190px); } }
.ph-i figcaption { margin-top:var(--s2); text-align:center; font:600 var(--fs-small)/1.2 var(--font-body); }
.flow-chain { display:flex; flex-wrap:wrap; align-items:center; gap:10px 6px; margin-top:var(--s1); }
.flow-chain span { display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; border:var(--stroke-thin); border-radius:var(--r-pill); background:#fff; font-size:var(--fs-small); line-height:1.2; white-space:nowrap; }
.flow-chain .fc-a { flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#000; }
.flow-chain .fc-a svg { width:15px; height:15px; fill:none; stroke:var(--lime); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.flow-table { display:grid; gap:0; }
.flow-row:not(.flow-head) > span { position:relative; padding-left:26px; }
.flow-row:not(.flow-head) > span::before { content:''; position:absolute; left:0; top:.42em; width:12px; height:12px; border-radius:50%; background:var(--blue); }
.flow-row:not(.flow-head) > span:nth-child(2)::before { background:var(--lime); box-shadow:inset 0 0 0 2px #000; }
.flow-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); padding:12px 0; border-top:1px solid var(--ink-12); line-height:1.4; }
.flow-row.flow-head { border-top:0; padding-top:0; font:700 var(--fs-small)/1.2 var(--font-body); text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:520px) { .flow-row { grid-template-columns:1fr; gap:4px; } .flow-row.flow-head { display:none; } .flow-row span:first-child { font-weight:600; } }
.tb-wrap { margin-top:var(--s3); }
.tb { position:relative; width:min(100%,820px); margin:0 auto; aspect-ratio:1486/913; filter:drop-shadow(0 6px 8px rgba(0,0,0,.16)) drop-shadow(0 22px 26px rgba(0,0,0,.14)); }
.tb .dv-s { background:#eef2fb; -webkit-mask-image:url(cases/mock-tablet-screen.png); mask-image:url(cases/mock-tablet-screen.png); }
.tb .dv-s img { position:absolute; left:2.124%; top:3.910%; width:96.155%; height:92.947%; object-fit:fill; opacity:0; transition:opacity .35s var(--ease); }
.tb .dv-s img.on { opacity:1; }
.tb-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s1); margin-top:var(--s3); }
.tb-tab { font:500 var(--fs-small)/1 var(--font-body); padding:12px 22px; min-height:44px; border:var(--stroke-thin); border-radius:var(--r-pill); background:transparent; color:inherit; cursor:pointer; transition:background var(--t) var(--ease), color var(--t) var(--ease); }
.tb-tab:hover, .tb-tab[aria-selected="true"] { background:#000; color:#fff; }
/* Збільшення скриншотів */
.rshot img, .dv-s img, .ph .dv-s img, .tb .dv-s img { cursor:zoom-in; }
.zoom-dlg { border:0; padding:0; margin:0; width:100vw; max-width:none; height:100dvh; max-height:none; background:rgba(0,0,0,.92); color:#fff; }
.zoom-dlg::backdrop { background:rgba(0,0,0,.92); }
.zoom-box { position:absolute; inset:0; overflow:auto; display:grid; place-items:center; padding:64px 16px 56px; }
.zoom-box img { display:block; max-width:min(100%,1600px); max-height:calc(100dvh - 130px); width:auto; height:auto; border-radius:14px; cursor:zoom-in; background:#fff; }
.zoom-box.z { place-items:start; } .zoom-box.z img { max-width:none; max-height:none; width:220%; cursor:zoom-out; }
.zoom-x { position:absolute; top:14px; right:14px; z-index:2; width:48px; height:48px; border-radius:50%; border:1.5px solid rgba(255,255,255,.6); background:rgba(0,0,0,.5); color:#fff; display:grid; place-items:center; cursor:pointer; }
.zoom-x:hover { background:#fff; color:#000; }
.zoom-n { position:absolute; top:50%; z-index:2; width:48px; height:48px; margin-top:-24px; border-radius:50%; border:1.5px solid rgba(255,255,255,.6); background:rgba(0,0,0,.5); color:#fff; cursor:pointer; display:grid; place-items:center; }
.zoom-n[hidden], .zoom-count[hidden] { display:none; } .zoom-prev { left:12px; } .zoom-next { right:12px; } .zoom-n:hover { background:#fff; color:#000; }
.zoom-count { position:absolute; top:22px; left:0; right:0; margin:0; text-align:center; font:600 var(--fs-small)/1 var(--font-body); color:rgba(255,255,255,.85); pointer-events:none; }
.zoom-hint { position:absolute; left:0; right:0; bottom:16px; margin:0; text-align:center; font-size:var(--fs-small); color:rgba(255,255,255,.75); pointer-events:none; }
.ace-info { display:grid; gap:var(--s2); margin-top:var(--s3); }
.ace-box { background:var(--soft); border-radius:var(--r-card-sm); padding:var(--s3); display:flex; flex-direction:column; gap:var(--s1); }
.ace-box--blue { background:var(--blue); color:#fff; } .ace-box--ink { background:#000; color:#fff; }
.dlg-body .ace-box h4 { margin:0; }
.ace-box h5 { margin:var(--s1) 0 0; font:700 var(--fs-small)/1.2 var(--font-body); text-transform:uppercase; letter-spacing:.04em; }
.ace-box ul { margin:0; padding-left:1.15em; display:grid; gap:6px; }
.ace-box li { line-height:1.45; }
.cc-grid { display:flex; gap:var(--s3); align-items:stretch; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; padding:6px 2px 14px; margin-inline:-2px; cursor:grab; }
.cc-grid::-webkit-scrollbar { display:none; }
.cc-grid.drag { cursor:grabbing; scroll-snap-type:none; user-select:none; }
.cc-grid:focus, .cc-grid:focus-visible { outline:none; }
.cc-grid > .cc { flex:0 0 calc((100% - 48px) / 3); scroll-snap-align:start; }
.cc-arrows .arrow { border-color:#000; color:#000; } .cc-arrows .arrow:hover { background:#000; color:#fff; border-color:#000; } .cc-arrows .arrow:disabled { opacity:.25; background:transparent; color:#000; border-color:#000; }
.cc-arrows .arrow:focus-visible { outline-color:var(--blue); }
.cc { background:#fff; color:#000; border:2px solid #000; border-radius:var(--r-card); overflow:hidden; display:flex; flex-direction:column; cursor:pointer; transition:transform var(--t) var(--ease); }
.cc[hidden] { display:none; }
.cc:hover { transform:translateY(-4px); }
.cc:focus { outline:none; } .cc:focus-visible { outline:2px solid #000; outline-offset:3px; }
.cc-img { position:relative; min-height:132px; background:var(--soft) center/cover no-repeat; display:flex; align-items:flex-end; padding:var(--s3); border-bottom:2px solid #000; }
.cc-img--lime { background-color:var(--lime); color:#000; } .cc-img--blue { background-color:var(--blue); color:#fff; } .cc-img--ink { background-color:#000; color:#fff; }
.cc-ph { font:900 clamp(1.3rem,2.4vw,1.9rem)/1 var(--font-display); letter-spacing:-.03em; }
.cc-body { padding:var(--s3); display:flex; flex-direction:column; gap:var(--s2); flex:1; }
.cc-meta { font:500 var(--fs-small)/1.3 var(--font-body); }
.cc-body h3 { margin:0; font:800 1.2rem/1.2 var(--font-display); letter-spacing:-.02em; }
.cc-metric { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:auto; padding-top:var(--s2); }
.cc-metric b { font:900 2rem/1 var(--font-display); letter-spacing:-.03em; }
.cc-metric span { font-size:var(--fs-small); line-height:1.3; min-height:2.6em; }
.cc-more { display:inline-flex; align-items:center; align-self:flex-start; gap:10px; font-weight:600; background:#000; color:#fff; padding:12px 20px; border-radius:999px; animation:ccHop 3.6s ease-in-out infinite; animation-delay:calc(var(--ci,0) * .5s + 1s); }
@keyframes ccHop { 0%, 62%, 100% { transform:translateY(0) scale(1); } 68% { transform:translateY(-4px) scale(1.03); } 74% { transform:translateY(0) scale(1); } 80% { transform:translateY(-2px) scale(1.01); } 86% { transform:translateY(0) scale(1); } }
.cc-more i { width:22px; height:22px; background:currentColor; transform:rotate(-45deg); transition:transform var(--t) var(--ease);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; }
.cc:hover .cc-more i { transform:rotate(0); }
.cc-full { display:none; }
html:has(dialog[open]) { overflow:hidden; }
.case-dlg { overscroll-behavior:none; outline:none; width:min(920px,94vw); max-height:90vh; overflow:auto; padding:0; border:2px solid #000; border-radius:var(--r-card); background:#fff; color:#000; }
.case-dlg::backdrop { background:rgba(0,0,0,.6); }
.dlg-x { position:absolute; top:14px; right:14px; z-index:2; width:48px; height:48px; border-radius:50%; border:2px solid #000; background:#fff; color:#000; cursor:pointer; display:grid; place-items:center; }
.dlg-x:hover { background:#000; color:#fff; } .dlg-x:focus { outline:none; } .dlg-x:focus-visible { outline:2px solid #000; outline-offset:2px; }
.dlg-img { min-height:150px; background:var(--soft) center/cover no-repeat; display:flex; align-items:flex-end; padding:var(--s3); padding-right:72px; border-bottom:2px solid #000; }
.dlg-img.cc-img--lime { background-color:var(--lime); color:#000; } .dlg-img.cc-img--blue { background-color:var(--blue); color:#fff; } .dlg-img.cc-img--ink { background-color:#000; color:#fff; }
.dlg-img .cc-ph { font-size:clamp(1.5rem,3.4vw,2.4rem); }
.dlg-body { padding:var(--s4); display:grid; gap:12px; background:#fff; }
.dlg-foot { background:#fff; }
.dlg-body .dlg-title { margin:0; font:800 clamp(1.4rem,3vw,2rem)/1.15 var(--font-display); letter-spacing:-.02em; }
.dlg-seo { margin:0; font-size:var(--fs-small); }
.dlg-body h4 { margin:var(--s2) 0 0; font:800 1.05rem var(--font-display); }
.dlg-body p { margin:0; line-height:1.55; }
.dlg-body .metrics { display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s2); }
.dlg-foot { padding:0 var(--s4) var(--s4); }
@media (max-width:960px) { .cc-grid > .cc { flex-basis:calc((100% - 24px) / 2); } }
@media (max-width:640px) {
.cc-grid { gap:var(--s2); } .cc-grid > .cc { flex-basis:84%; }
.case-dlg { width:100%; max-width:none; margin:auto 0 0; border-radius:28px 28px 0 0; max-height:92vh; border-bottom:0; }
.dlg-body { padding:var(--s3); } .dlg-foot { padding:0 var(--s3) var(--s3); }
}
@media (prefers-reduced-motion:reduce) { .cc { transition:none; } .cc-more { animation:none; } }
/* ===== Інтеграції: компактні бігучі рядки логотипів ===== */
.int-sec { padding-block:clamp(36px,5vw,64px); }
.int-sec .head-row { margin-bottom:var(--s3); }
.mq-wrap { display:grid; gap:10px; }
.mq { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.mq-t { display:flex; align-items:center; gap:clamp(36px,5vw,64px); width:max-content; padding-block:12px; animation:mq 46s linear infinite; }
.mq--rev .mq-t { animation-direction:reverse; animation-duration:52s; }
.mq:hover .mq-t { animation-play-state:paused; }
@keyframes mq { from { transform:translateX(0); } to { transform:translateX(calc(-50% - clamp(18px,2.5vw,32px))); } }
/* ===== Бренди ===== */
.brands-sec { padding-block:clamp(36px,5vw,64px); }
.brands-sec .head-row { margin-bottom:var(--s3); }
.brands-sec .lead a { color:#000; text-underline-offset:3px; }
.brands-sec .mq-t { gap:clamp(40px,6vw,80px); animation-duration:18s; }
.bl { height:34px; width:auto; max-width:none; flex:none; filter:brightness(0); }
@media (max-width:640px) { .bl { height:28px; } }
@media (prefers-reduced-motion:reduce) { .brands-sec .bl-dup { display:none !important; } }
.lg { display:inline-flex; align-items:center; gap:9px; height:30px; flex:none; font:700 1.05rem/1 var(--font-body); letter-spacing:-.01em; color:#000; white-space:nowrap; }
.lg img { height:26px; width:auto; max-width:150px; display:block; }
.lg[data-s="nova-poshta"] img, .lg[data-s="ukrposhta"] img { height:36px; } .lg[data-s="fondy"] img, .lg[data-s="altegio"] img { height:30px; } .lg[data-s="altegio"] img { max-width:110px; }
@media (prefers-reduced-motion:reduce) { .mq-t { animation:none; flex-wrap:wrap; width:auto; } .mq { -webkit-mask-image:none; mask-image:none; } .mq-t .lg[aria-hidden] { display:none; } }
/* ===== Переваги / оферт ===== */
.offer { background:var(--lime); border-radius:var(--r-card); padding:clamp(28px,5vw,64px); }
.offer .h2 { max-width:18ch; }
.offer-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); margin-top:var(--s5); }
.offer-item { background:var(--paper); border-radius:var(--r-card-sm); padding:var(--s3); }
.offer-item h3 { display:flex; align-items:center; gap:12px; margin:0 0 10px; font:800 1.1rem/1.2 var(--font-display); letter-spacing:-.02em; }
.offer-item .pill { margin-top:14px; }
.oc { flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#000; }
.oc svg { width:16px; height:16px; fill:none; stroke:var(--lime); stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.oc path { stroke-dasharray:24; stroke-dashoffset:0; }
/* Платите за результат: зелена панель розкривається колом, галочки вимальовуються одна за одною */
.js .offer:not(.in) { clip-path:circle(0% at 10% 14%); }
.offer { clip-path:circle(160% at 10% 14%); transition:clip-path 1.25s cubic-bezier(.6,.05,.2,1); }
.js .offer:not(.in) .oc { scale:0; } .js .offer:not(.in) .oc path { stroke-dashoffset:24; }
.offer .oc { transition:scale .5s cubic-bezier(.3,1.6,.5,1); transition-delay:calc(.9s + var(--d,0) * .22s); }
.offer .oc path { transition:stroke-dashoffset .55s ease .0s; transition-delay:calc(1.15s + var(--d,0) * .22s); }
@media (prefers-reduced-motion:reduce) { .js .offer:not(.in) { clip-path:none; } .offer { transition:none; } .js .offer:not(.in) .oc { scale:1; } .js .offer:not(.in) .oc path { stroke-dashoffset:0; } }
.offer .offer-lead { margin:var(--s2) 0 0; font:600 clamp(1.05rem,1.8vw,1.3rem)/1.3 var(--font-body); }
/* Гарантії: «Чому з нами безпечно» */
.sf-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:var(--s4); align-items:start; }
.sf-l { display:grid; gap:var(--s3); } .sf-r { min-width:0; }
.sf-sub { font:800 1.05rem/1.2 var(--font-display); letter-spacing:-.02em; margin:0 0 var(--s2); }
.sf-bar { display:grid; grid-template-columns:1fr 1fr; border:0; border-radius:var(--r-card); overflow:hidden; }
.sf-bar > div { padding:clamp(14px,3vw,28px); display:flex; flex-direction:column; gap:4px; min-width:0; }
.sf-bar b { font:900 clamp(1.9rem,9vw,3.6rem)/1 var(--font-display); letter-spacing:-.04em; }
.sf-bar span { font-weight:600; font-size:clamp(.78rem,2.9vw,1.0625rem); line-height:1.25; }
.sf-bar .l { background:var(--blue); color:#fff; } .sf-bar .r { background:var(--lime); color:#000; }
.sf-nine { background:#000; color:#fff; border-radius:var(--r-card); padding:clamp(16px,3vw,28px); display:grid; grid-template-columns:auto 1fr; align-items:center; gap:clamp(12px,2.4vw,18px) clamp(14px,3vw,28px); }
.sf-nine b { font:900 clamp(2.4rem,10vw,4.6rem)/.9 var(--font-display); letter-spacing:-.05em; }
.sf-nine p { margin:0; font-size:clamp(.92rem,3.4vw,1.1rem); line-height:1.3; font-weight:500; }
.sf-ten { display:grid; grid-template-columns:repeat(10,1fr); gap:5px; width:100%; max-width:340px; grid-column:1 / -1; }
.sf-ten i { aspect-ratio:1; border-radius:6px; background:var(--lime); display:block; }
.sf-ten i:last-child { background:transparent; border:2px solid var(--lime); }
.sf-list { list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
.sf-list li { display:flex; gap:var(--s2); align-items:flex-start; padding:var(--s3); border:2px solid #000; border-radius:var(--r-card-sm); background:#fff; }
.sf-list h3 { margin:0 0 6px; font:800 1.1rem/1.2 var(--font-display); letter-spacing:-.02em; }
.sf-list p { margin:0; font-size:1rem; line-height:1.45; }
@media (max-width:900px) {
.sf-grid { grid-template-columns:1fr; }
.sf-l { display:contents; }
.sf-pay { order:1; } .sf-r { order:2; } .sf-nine { order:3; }
}
@media (max-width:560px) { .sf-list li { padding:var(--s2); } }
/* Нахилені картки, що «складаються» зверху вниз: кожна наступна опускається на попередню й трохи її штовхає */
.tilt { gap:var(--s3); padding-bottom:var(--s4); }
.tilt > * { backface-visibility:hidden; outline:1px solid transparent; position:relative; box-shadow:none; rotate:var(--r,0deg); transform:translateY(var(--y,0px)); transition:transform var(--t) var(--ease); }
.tilt > :nth-child(1) { --k:0; --r:-2.2deg; z-index:1; }
.tilt > :nth-child(2) { --k:1; --r:1.8deg; --y:26px; margin-left:-22px; z-index:2; }
.tilt > :nth-child(3) { --k:2; --r:1.6deg; margin-top:-18px; z-index:3; }
.tilt > :nth-child(4) { --k:3; --r:-2deg; --y:26px; margin-left:-22px; margin-top:-18px; z-index:4; }
.tilt > :hover { transform:translateY(calc(var(--y,0px) - 4px)); z-index:5; }
.js .tilt:not(.in) > * { opacity:0; }
.js .tilt.in > * { animation:tiltLand .6s cubic-bezier(.2,.75,.25,1) both, tiltNudge .55s cubic-bezier(.3,.7,.3,1) forwards; animation-delay:calc(var(--k) * var(--st,520ms)), calc((var(--k) + 1) * var(--st,520ms)); }
@keyframes tiltLand { from { translate:0 -46px; opacity:0; rotate:0deg; } to { translate:0 0; opacity:1; rotate:calc(var(--r) * .35); } }
@keyframes tiltNudge { from { rotate:calc(var(--r) * .35); } to { rotate:var(--r); } }
/* На телефоні: той самий ефект, зсуви вбік замість зсувів униз */
@media (max-width:860px) {
.tilt { gap:14px; padding-bottom:var(--s3); --st:300ms; }
.tilt > * { margin:0 !important; }
.tilt > :nth-child(1) { --r:-1.6deg; transform:none; }
.tilt > :nth-child(2) { --r:1.4deg; transform:translateX(8px); margin-top:-22px !important; }
.tilt > :nth-child(3) { --r:-1.3deg; transform:translateX(-8px); margin-top:-22px !important; }
.tilt > :nth-child(4) { --r:1.5deg; transform:translateX(8px); margin-top:-22px !important; }
}
@media (prefers-reduced-motion:reduce) { .js .tilt > * { animation:none !important; opacity:1 !important; } }
/* Блоки й картки з'являються по черзі, коли доскролили */
.js .rise:not(.up) { opacity:0; translate:0 56px; scale:.97; }
.rise.rise.rise { transition:opacity .8s var(--ease), translate 1s var(--ease), scale 1s var(--ease), transform .25s var(--ease); transition-delay:calc(var(--d,0) * 110ms), calc(var(--d,0) * 110ms), calc(var(--d,0) * 110ms), 0s; }
@media (prefers-reduced-motion:reduce) { .js .rise:not(.up) { opacity:1; translate:none; scale:none; } .rise { transition:none; } }
/* Заголовки: слова виїжджають знизу при скролі */
.w { display:inline-block; overflow:hidden; vertical-align:top; padding:.2em .05em .14em; margin:-.2em -.05em -.14em; }
.wi { display:inline-block; }
.js .rv:not(.in) .wi { transform:translateY(112%); }
.rv .wi { transition:transform .75s var(--ease); transition-delay:calc(var(--i,0) * 55ms); }
@media (prefers-reduced-motion:reduce) { .js .rv:not(.in) .wi { transform:none; translate:none; opacity:1; } .rv .wi, .tilt > * { transition:none; } }
/* ===== Картки ===== */
.grid2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); align-items:stretch; }
.grid3 > .card > details.more { margin-top:auto; }
.card h3 { margin:0; font:800 clamp(1.15rem,1.6vw,1.45rem)/1.15 var(--font-display); letter-spacing:-.02em; }
.card p { margin:0; }
.card--blue { background:var(--blue); border-color:var(--blue); color:var(--on-blue); }
.tilt .card--blue { border-color:#000; }
.closing { margin-top:var(--s5); max-width:30ch; font:800 clamp(1.25rem,2.2vw,1.9rem)/1.2 var(--font-display); letter-spacing:-.02em; }
/* Розкривний блок всередині картки */
details.more > summary { list-style:none; cursor:pointer; font-weight:600; display:inline-flex; align-items:center; gap:10px; }
details.more > summary::-webkit-details-marker { display:none; }
details.more > summary::after { width:22px; height:22px; align-self:center; }
details.more > div { margin-top:var(--s2); display:grid; gap:12px; }
details.more h4 { margin:0; font:600 var(--fs-small)/1.3 var(--font-body); }
/* ===== Акордеон (ніші, FAQ) ===== */
.acc-item > summary { font-weight:600; }
.acc-item > summary > span:first-child { font:400 1.25rem var(--font-display); color:var(--ink-60); }
.acc-item[open] { background:var(--lime); margin-block:8px; }
.acc { border-top:0; }
.acc-item:last-child { border-bottom:0; }
.acc-item:has(+ .acc-item[open]) { border-bottom-color:transparent; }
.acc-item > summary { outline:none; border-radius:var(--r-card-sm); }
.acc-item > summary:focus-visible { outline:3px solid var(--blue); outline-offset:-3px; }
.h2 { text-wrap:balance; }
.acc-item[open], .acc-item[open] * { color:var(--ink); }
.acc-item > div { display:grid; gap:12px; color:var(--ink); }
.acc-item > div p { margin:0; }
.acc-item .acc-ex { margin:2px 0 0; padding-left:1.15em; display:grid; gap:6px; line-height:1.45; }
.acc-item h4 { margin:0; font:700 1.0625rem/1.3 var(--font-body); }
/* ===== Таблиця порівняння: синя колонка Botmaker виступає над таблицею ===== */
.cmp-wrap { padding-block:0; }
.cmp { display:grid; grid-template-columns:1fr 1.4fr 1fr; }
.cmp-r { display:contents; }
.cmp-r > div { padding:22px 24px; border-bottom:2px solid #000; display:flex; align-items:center; text-align:left; }
.cmp-h { border-bottom:0 !important; font:800 1.05rem var(--font-display); }
.cmp-lbl { font-weight:700; }
.cmp-us { font-weight:600; }
.cmp-us { background:var(--blue); color:#fff; border-bottom-color:rgba(255,255,255,.3) !important; }
.cmp-top { border-radius:var(--r-card) var(--r-card) 0 0; }
.cmp-bot { border-radius:0 0 var(--r-card) var(--r-card); border-bottom:0 !important; }
.cmp-last { border-bottom:0 !important; }
/* Телефон: та сама таблиця в три колонки, лише компактніша (значок над текстом) */
@media (max-width:640px) {
.cmp { grid-template-columns:.85fr 1.3fr .85fr; }
.cmp-wrap { padding-block:14px; }
.cmp-r > div { padding:14px 10px; font-size:.8rem; line-height:1.3; }
.cmp-h { font-size:.72rem; padding-bottom:10px !important; }
.cmp-lbl { font-size:.78rem; }
.cmp-top { border-radius:22px 22px 0 0; }
.cmp-bot { border-radius:0 0 22px 22px; }
}
/* ===== Фільтр кейсів ===== */
.metrics { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.res { font-weight:600; }
.case-cta { margin-top:var(--s4); display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
/* Відгуки: карусель */
.rev-grid { display:grid; grid-template-columns:300px 1fr; gap:var(--s5); align-items:stretch; max-width:none; padding-right:0; margin-inline:0; padding-left:max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }
.rev-side { display:flex; flex-direction:column; justify-content:space-between; gap:var(--s5); }
.rev-head { display:flex; flex-direction:column; gap:var(--s3); }
.rev-note { list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
.rev-note li { display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:start; font-size:var(--fs-small); line-height:1.45; }
.rev-note svg { margin-top:2px; }
.rev-side .h2 { font-size:clamp(1.75rem,3vw,2.5rem); }
.arrows { display:flex; gap:12px; }
.arrow { width:64px; height:64px; border-radius:20px; border:1.5px solid rgba(255,255,255,.5); background:transparent; color:#fff; cursor:pointer; display:grid; place-items:center; transition:background var(--t) var(--ease), color var(--t) var(--ease), opacity var(--t); }
.arrow:hover { background:var(--lime); color:var(--ink); border-color:var(--lime); }
.arrow:disabled { opacity:.3; cursor:default; background:transparent; color:#fff; border-color:#fff; }
.arrow:focus-visible, .rev-track:focus-visible { outline:3px solid var(--lime); outline-offset:3px; }
.rev-track { display:flex; gap:var(--s3); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-right:var(--gutter); cursor:grab; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.rev-track::-webkit-scrollbar { display:none; }
.rev-track.drag { cursor:grabbing; scroll-snap-type:none; user-select:none; }
.rcard { flex:0 0 min(420px, 82vw); scroll-snap-align:start; background:var(--blue); color:#fff; border-radius:var(--r-card); padding:var(--s4); display:flex; flex-direction:column; justify-content:space-between; gap:var(--s4); }
.rcard:nth-child(3n+2) { background:var(--lime); color:var(--ink); }
.rcard.rshot { background:#000; color:#fff; border:1.5px solid rgba(255,255,255,.32); padding:var(--s2); justify-content:flex-start; gap:var(--s2); flex-basis:min(400px,82vw); }
.rcard.rshot:nth-child(3n+2) { background:#000; color:#fff; }
.rshot img { margin-block:auto; width:100%; height:auto; border-radius:calc(var(--r-card) - 14px); display:block; }
.rshot--2 img { margin-block:0; }
.rshot .rfoot { padding:0 var(--s1) var(--s1); }
.rtext { margin:0; font-size:1.0625rem; line-height:1.55; }
.rfoot .who { font:800 1.05rem/1.2 var(--font-display); letter-spacing:-.02em; }
.rfoot .role { font-size:var(--fs-small); margin-top:6px; }
@media (max-width:960px) {
.rev-grid { grid-template-columns:1fr; padding-right:0; gap:var(--s4); }
.rev-side { flex-direction:row; align-items:flex-end; flex-wrap:wrap; padding-right:var(--gutter); }
.rev-track { padding-right:var(--gutter); }
}
/* ===== Форма ===== */
.cta { background:var(--blue); color:var(--on-blue); }
.cta-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"l r"; column-gap:var(--s6); row-gap:var(--s5); align-items:start; }
.cta-l { grid-area:l; } .cta-r { grid-area:r; }
.cta .field, .cta textarea { background:rgba(255,255,255,.16); color:#fff; }
.cta .field::placeholder { color:#fff; }
.cta .field:focus-visible { outline-color:var(--lime); }
.cta textarea.field { height:140px; padding:20px 28px; border-radius:28px; resize:vertical; }
.cta form { display:grid; gap:14px; }
.cta .btn--solo { background:var(--lime); color:var(--ink); }
.cta .lead { color:#fff; margin-top:var(--s3); }
.cta-err { margin:0; font-size:.9rem; color:#000; background:#fff; border-radius:12px; padding:10px 14px; } .cta-err[hidden] { display:none; }
.cta-tgline { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:2px; color:#fff; font-size:var(--fs-small); font-weight:500; text-decoration:none; opacity:.9; transition:opacity var(--t) var(--ease); }
.cta-tgline:hover { opacity:1; } .cta-tgline:hover span { text-decoration:underline; text-underline-offset:4px; }
.cta-tgline svg { flex:none; }
.cta-tgline svg { flex:none; }
.cta-consent { margin:2px 0 0; color:rgba(255,255,255,.78); font-size:.8125rem; line-height:1.45; text-align:center; }
.cta-consent a { color:#fff; font-weight:600; text-decoration:underline; text-decoration-color:rgba(255,255,255,.45); text-underline-offset:3px; }
.cta-consent a:hover { text-decoration-color:#fff; }
.thanks { display:none; background:var(--lime); color:var(--ink); border-radius:var(--r-card); padding:var(--s4); }
.thanks.show { display:block; } .thanks h3 { font:800 1.5rem var(--font-display); margin:0 0 12px; }
.thanks .btn { margin-top:var(--s3); }
/* ===== Адаптив (усе мобільне тут, після базових правил) ===== */
@media (max-width:960px) {
.grid3 { grid-template-columns:1fr 1fr; }
.cta-grid { grid-template-columns:1fr; grid-template-areas:"l" "r"; row-gap:var(--s5); }
.nav ul { display:none; }
}
@media (max-width:640px) {
:root { --section-y:48px; --s4:24px; --s5:28px; --s6:34px; --s7:48px; }
.nav .container { height:64px; }
.head-row { margin-bottom:var(--s4); gap:var(--s2); }
.grid2, .grid3, .offer-grid { grid-template-columns:1fr; }
.card { padding:var(--s3); gap:var(--s2); }
.offer { padding:var(--s4) var(--s3); }
.closing { margin-top:var(--s4); }
.acc-item > summary { grid-template-columns:44px 1fr 28px; padding:var(--s2) 4px; font-size:1.05rem; }
.stats-sec { padding-block:var(--s3) 0; }
.stats-sec + .bg-soft { padding-top:36px; }
.stats-sec .stats { grid-template-columns:.9fr 1.2fr 1fr; gap:10px; }
.stats-sec .stats .num { font-size:1.2rem; }
.stats-sec .stats > div p { margin-top:8px; font-size:.85rem; line-height:1.25; }
}
.pg-more { display:inline-flex; gap:8px; margin-top:12px; font-weight:600; color:inherit; text-underline-offset:4px; }