/* Точка А / Точка Б — темні плашки з великими літерами */
.ptdark{position:relative;background:var(--dark);color:#fff;padding:72px 0;overflow:hidden}
.ptdark::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;opacity:.85}
.ptdark--a::after{background:linear-gradient(90deg,var(--red),transparent)}
.ptdark--b::after{background:linear-gradient(90deg,var(--blue),transparent)}
.ptdark__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.ptdark .ab__h2{color:#fff}
.ptdark p{color:#ddd8d4}
.ptdark .mark,.ptdark .ritem{color:#cfcac6}
.ptdark .ritem strong,.ptdark .tagchip strong{color:#fff}
/* Літера з анімованим кільцем */
.ptdark__letter{position:relative;display:grid;place-items:center;min-height:440px}
.ptdark__letter span{font-size:clamp(280px,30vw,440px);font-weight:700;line-height:1;position:relative;z-index:1;opacity:0;transform:scale(.82);transition:opacity .7s ease .15s,transform .7s cubic-bezier(.2,.8,.3,1) .15s}
.ptdark__ring{position:absolute;width:min(100%,440px);aspect-ratio:1;overflow:visible}
.ptdark__ring circle{fill:none;stroke-width:1.2;stroke-dasharray:302;stroke-dashoffset:302;transform-origin:50% 50%;transform:rotate(-90deg);transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1) .1s}
.ptdark__ring .ptdark__orbit{stroke:none;transform-origin:50% 50%;animation:ptorbit 14s linear infinite;opacity:0;transition:opacity .5s ease 1.2s}
.ptdark--a .ptdark__letter span{color:var(--red)}
.ptdark--b .ptdark__letter span{color:var(--blue)}
.ptdark--a .ptdark__ring circle{stroke:rgba(217,32,40,.55)}
.ptdark--b .ptdark__ring circle{stroke:rgba(73,124,255,.6)}
.ptdark--a .ptdark__orbit{fill:var(--red)}
.ptdark--b .ptdark__orbit{fill:var(--blue)}
.ptdark__letter.is-in span{opacity:1;transform:none}
.ptdark__letter.is-in .ptdark__ring circle{stroke-dashoffset:0}
.ptdark__letter.is-in .ptdark__orbit{opacity:1}
@keyframes ptorbit{to{transform:rotate(360deg)}}
/* Поетапна поява пунктів */
.ptdark .marklist .mark,.ptdark .bstats .bstat{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.ptdark .rv.is-in .marklist .mark,.ptdark .rv.is-in .bstats .bstat{opacity:1;transform:none}
.ptdark .marklist .mark:nth-child(1){transition-delay:.10s}
.ptdark .marklist .mark:nth-child(2){transition-delay:.18s}
.ptdark .marklist .mark:nth-child(3){transition-delay:.26s}
.ptdark .marklist .mark:nth-child(4){transition-delay:.34s}
.ptdark .marklist .mark:nth-child(5){transition-delay:.42s}
.ptdark .marklist .mark:nth-child(6){transition-delay:.50s}
.ptdark .bstats .bstat:nth-child(1){transition-delay:.06s}
.ptdark .bstats .bstat:nth-child(2){transition-delay:.12s}
.ptdark .bstats .bstat:nth-child(3){transition-delay:.18s}
.ptdark .bstats .bstat:nth-child(4){transition-delay:.24s}
.ptdark .bstats .bstat:nth-child(5){transition-delay:.30s}
.ptdark .bstats .bstat:nth-child(6){transition-delay:.36s}
@media(prefers-reduced-motion:reduce){
  .ptdark__letter span,.ptdark .marklist .mark,.ptdark .bstats .bstat{opacity:1;transform:none;transition:none}
  .ptdark__ring circle{stroke-dashoffset:0;transition:none}
  .ptdark__orbit{animation:none;opacity:1}
}
@media(max-width:860px){.ptdark__grid{grid-template-columns:1fr;gap:24px}.ptdark__letter{order:2;min-height:280px}.ptdark__letter span{font-size:200px}.ptdark__ring{width:min(88%,280px)}}
/* CTA-картка кейсу */
.ctacard{padding:72px 0}
.ctacard__box{position:relative;overflow:hidden;background:var(--dark);color:#fff;border-radius:24px;padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:1.4fr auto;gap:36px;align-items:center}
.ctacard__box::before{content:"";position:absolute;right:-120px;top:50%;transform:translateY(-50%);width:420px;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(217,32,40,.45);pointer-events:none}
.ctacard__box::after{content:"";position:absolute;right:284px;top:calc(50% - 210px);width:13px;height:13px;border-radius:50%;background:var(--red);transform:translate(50%,-50%);pointer-events:none}
.ctacard h2{font-size:clamp(24px,3.4vw,42px);font-weight:700;line-height:1.15;margin:0 0 12px;max-width:720px}
.ctacard h2 em{font-style:normal;color:var(--red)}
.ctacard p{font-size:15px;line-height:1.55;margin:0;max-width:600px;color:#ddd8d4}
.ctacard .btn{position:relative;z-index:1}
html[data-theme="dark"] .ctacard__box{border:1px solid var(--line)}
@media(max-width:860px){.ctacard__box{grid-template-columns:1fr;border-radius:18px}.ctacard__box::before{right:-180px;opacity:.6}.ctacard__box::after{display:none}}
/* Точка Б — картки результатів */
.bstats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 18px}
.bstat{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-top:3px solid var(--blue);border-radius:12px;padding:16px 16px 14px}
.bstat__num{font-size:clamp(26px,2.8vw,38px);font-weight:700;line-height:1;margin:0 0 6px;color:#fff;white-space:nowrap}
.bstat__num small{font-size:.55em;font-weight:600;color:#8d94a8}
.bstat__label{font-size:12.5px;line-height:1.4;color:#b9bfd0;margin:0}
.ptdark__extra{font-size:14px;line-height:1.6;color:#b9bfd0;margin:0}
.ptdark__extra strong{color:#fff}
@media(max-width:860px){.bstats{grid-template-columns:repeat(2,1fr)}}
/* Точки росту — пункти з галочками */
.growth__intro{max-width:none}
.gplist{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:20px 48px}
.gp{position:relative;padding-left:30px;font-size:14.5px;line-height:1.55;color:var(--text-2);margin:0}
.gp::before{content:"\2713";position:absolute;left:0;top:0;color:var(--blue);font-weight:700;font-size:17px}
@media(max-width:860px){.gplist{grid-template-columns:1fr;gap:16px}}
/* Карусель креативів — горизонтальне гортання */
.carwrap{position:relative}
.carousel4{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/4);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carousel4::-webkit-scrollbar{display:none}
.carousel4 .creative{scroll-snap-align:start}
.carbtn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:var(--red);color:#fff;box-shadow:0 8px 24px rgba(217,32,40,.35);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .2s,transform .2s}
.carbtn:hover{transform:translateY(-50%) scale(1.06)}
.carbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.carbtn--prev{left:-14px}
.carbtn--next{right:-14px}
.carbtn[disabled]{opacity:.35;cursor:default}
html[data-theme="dark"] .carbtn{background:#bd1c23}
@media(max-width:1100px){.carousel4{grid-auto-columns:calc((100% - 32px)/3)}}
@media(max-width:860px){.carousel4{grid-auto-columns:calc((100% - 16px)/2)}.carbtn{display:none}}
@media(max-width:560px){.carousel4{grid-auto-columns:80%}}
/* Двомовні креативи CZ + UA */
.bipairs{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:26px}
.bipair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bipair figure{margin:0;position:relative}
.bipair img{width:100%;height:auto;border-radius:14px;display:block;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.biflag{position:absolute;top:10px;left:10px;z-index:1;font-size:11px;font-weight:700;letter-spacing:.1em;color:#fff;padding:5px 10px;border-radius:5px}
.biflag--ua{background:var(--blue)}
.biflag--cz{background:var(--red)}
.bicap{font-size:13px;font-weight:600;color:var(--text-2);margin:12px 0 0;grid-column:1/-1}
@media(max-width:860px){.bipairs{grid-template-columns:1fr;gap:28px}}
/* Висновки */
.concl__lead{max-width:900px;font-size:clamp(17px,2vw,21px);line-height:1.5;font-weight:700;color:var(--text);margin:0 0 14px}
.concl__sub{max-width:900px;font-size:15px;line-height:1.6;color:var(--text-2);margin:0}
.concl__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.ccard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 24px 24px;box-shadow:0 10px 30px rgba(9,13,26,.06)}
html[data-theme="dark"] .ccard{background:var(--surface-2);box-shadow:none}
.ccard::before{content:"";position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:0 0 3px 3px}
.ccard--1::before{background:var(--red)}
.ccard--2::before{background:var(--blue)}
.ccard--3::before{background:linear-gradient(90deg,var(--red),var(--blue))}
.ccard__n{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--text-3);margin:0 0 10px}
.ccard__t{font-size:17px;font-weight:700;line-height:1.25;margin:0 0 8px;color:var(--text)}
.ccard__d{font-size:14.5px;line-height:1.55;color:var(--text-2);margin:0}
@media(max-width:860px){.concl__grid{grid-template-columns:1fr}}
/* 5 кроків — липкий мокап і факти під ним */
.csteps__col{position:sticky;top:92px;align-self:start}
@media(max-width:1024px){.csteps__col{position:static}}
/* Активний крок при скролі */
.csteps__list{position:relative}
.csteps__list::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:rgba(255,255,255,.12);border-radius:2px}
.csteps__list::after{content:"";position:absolute;left:0;top:6px;width:2px;height:var(--prog,0px);background:linear-gradient(180deg,var(--red),var(--blue));border-radius:2px;transition:height .25s ease-out}
.csteps__list>li{position:relative;padding-left:26px;opacity:.45;transition:opacity .4s ease}
.csteps__list>li.is-active{opacity:1}
.csteps__list>li::before{content:"";position:absolute;left:-4px;top:9px;width:10px;height:10px;border-radius:50%;background:var(--dark);border:2px solid rgba(255,255,255,.25);transition:background .3s,border-color .3s,transform .3s}
.csteps__list>li.is-active::before{background:var(--red);border-color:var(--red);transform:scale(1.25)}
@media(prefers-reduced-motion:reduce){.csteps__list>li{opacity:1}.csteps__list::after{transition:none}}
.chero__art img{width:100%;height:auto;border-radius:18px;box-shadow:0 14px 36px rgba(0,0,0,.14);background:var(--surface-2)}
.csteps__media img{width:100%;height:auto}
html[data-theme="dark"] .stats,html[data-theme="dark"] .founder,html[data-theme="dark"] .turnkey{background:var(--surface)}
html[data-theme="dark"] .csteps{background:#090d1a}
html[data-theme="dark"] .creative img,html[data-theme="dark"] .chero__art img{background:var(--surface-2)}
/* Плашки-обкладинки й службові поверхні */
html[data-theme="dark"] .case__media,
html[data-theme="dark"] .creative img,
html[data-theme="dark"] .chero__art img{background:var(--surface-2)}
/* мокап телефона прозорий — жодних підкладок у будь-якій темі */
.csteps__media img{background:none!important}
