/* Layout: светлая страница + светлые скруглённые секции с 3D-иконками и кнопками со свечением (по мотивам prompter-ai.ru), бренд-синий #3C9DF2. */
:root{
  --white:#FFFFFF;
  --black:#000000;
  --text:#222222;
  --grey:#8A93A3;
  --bg-grey:#F3F4F5;
  --blue:#3C9DF2;
  --blue-d:#2A6FE0;
  --blue-l:#86BAE8;
  --blue-xl:#E3F0FC;
  --navy:#2E3A4E;
  --dark:#151827;
  --dark-2:#1F2338;
  --light-2:#D5E4FF;
  --orange:#FE6A00;
  --violet:#7B61FF;
  --green:#2FA65A;
  --f:"Montserrat","Proxima Nova",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--white);color:var(--text);font:500 1rem/1.4 var(--f);padding-inline:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.wrap{max-width:1280px;margin-inline:auto}
b,strong,th{font-weight:500}
h1,h2,h3{color:var(--black);margin:0;font-weight:500;text-wrap:balance}
h1{font-size:clamp(2rem,4.2vw,2.6rem);line-height:1.1}
h2{font-size:clamp(1.75rem,3.6vw,3rem);line-height:1.12}
h3{font-size:1.375rem;line-height:1.2}
p{margin:0}
.b{color:var(--blue)}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* кнопка со свечением: градиент, мягкая тень и расходящееся кольцо */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:68px;padding:0 48px;border-radius:999px;border:0;background:linear-gradient(45deg,#1F5BFF 0%,#3C9DF2 45%,#7B61FF 100%);color:#fff;font:500 .875rem/1 var(--f);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;text-decoration:none;box-shadow:0 16px 36px -8px rgba(60,120,255,.6),0 0 0 0 rgba(60,157,242,.45);transition:transform .15s,box-shadow .3s;animation:glow 2.6s ease-in-out infinite}
.btn::before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;aspect-ratio:1;width:0;border:18px solid rgba(255,255,255,.55);border-radius:50%;opacity:0;z-index:-1;animation:ring 4s ease infinite}
.btn{background-size:220% 100%;background-position:0 0;transition:background-position .45s ease,box-shadow .3s,filter .3s}
.btn:hover{background-position:100% 0;filter:saturate(1.15) brightness(1.04);box-shadow:0 16px 40px -8px rgba(60,120,255,.8),0 0 0 4px rgba(60,157,242,.18)}
.btn:active{filter:brightness(.96)}
@keyframes ring{0%{width:10%;opacity:0}30%{opacity:1}60%{width:150%;opacity:0}100%{width:150%;opacity:0}}
@keyframes glow{0%,100%{box-shadow:0 16px 36px -8px rgba(60,120,255,.55),0 0 0 0 rgba(60,157,242,.35)}50%{box-shadow:0 16px 44px -6px rgba(60,120,255,.8),0 0 0 8px rgba(60,157,242,0)}}
.btn-row{display:flex;justify-content:center;margin-top:40px}
@media (max-width:560px){.btn{width:100%;padding-inline:20px}}

/* шапка */
.top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--black)}
.brand img{width:40px;height:40px;display:block}
.brand img.logo{width:auto;height:40px}
.brand b{display:block;font-size:1.5rem;font-weight:500;letter-spacing:-.01em;line-height:1}
.brand small{display:block;font-size:.75rem;font-weight:500;margin-top:4px}
.nav{display:flex;gap:28px;font-weight:500;font-size:.9375rem}
.nav a{color:var(--black);text-decoration:none}
.nav a:hover{color:var(--blue)}
.g-pill{display:inline-flex;align-items:center;gap:10px;background:var(--bg-grey);border-radius:999px;padding:6px 20px 6px 6px;text-decoration:none;color:var(--blue);font-size:1rem;font-weight:500}
.g-pill .ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#229ED9;flex:none}
@media (max-width:980px){.nav{display:none}}
@media (max-width:480px){.g-pill span:last-child{display:none}.g-pill{padding:6px}}
.h-contacts{display:flex;align-items:center;gap:10px}
.h-phone{display:flex;align-items:center;text-decoration:none;color:var(--black);margin-right:6px}
.h-phone .t{display:grid;gap:2px;text-align:right}
.h-phone b{font-size:1.0625rem;font-weight:400;line-height:1.1;white-space:nowrap}
.h-phone small{font-size:.75rem;color:var(--grey);white-space:nowrap}
.h-phone:hover b{color:var(--blue)}
.h-phone .ic{display:none;width:40px;height:40px;border-radius:50%;place-items:center;background:var(--blue)}
.h-msg{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;transition:transform .2s,box-shadow .2s}
.h-msg img{width:40px;height:40px;display:block}
.h-msg:hover{transform:scale(1.06)}
@media (max-width:640px){.h-phone{margin-right:0}.h-phone .t{display:none}.h-phone .ic{display:grid}.h-contacts{gap:8px}}

/* первый экран */
.hero-zone{position:relative;margin-inline:-16px;padding-inline:16px;background:#fff url("../img/hero-bg.webp") center top/cover no-repeat;border-radius:0 0 40px 40px;overflow:hidden}
.hero-zone::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.2) 85%);pointer-events:none}
.hero-zone>.wrap{position:relative}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:end;padding-top:32px}
.hero-l{display:grid;gap:26px;min-width:0;justify-items:start;align-self:center;padding-block:24px 146px}
.hero-l .lead{font-size:1.125rem;line-height:1.4;max-width:540px;color:var(--black)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;font-weight:500;color:var(--black)}
.ticks img{width:30px;height:30px;display:block}
.photo{position:relative;border-radius:32px;overflow:hidden;aspect-ratio:4/5;background:linear-gradient(160deg,#5DB0F6 0%,#2A7FD4 100%);box-shadow:0 30px 60px -30px rgba(20,60,120,.55)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:0}.hero-l{padding-bottom:24px}.photo{max-width:440px;width:100%;justify-self:center}}

/* преимущества: у каждой карточки свой фон */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px;position:relative;z-index:3}
.bcard{position:relative;overflow:hidden;background:var(--navy);color:rgba(255,255,255,.88);border-radius:24px;padding:22px 22px 24px;display:grid;gap:12px;align-content:start}
/* узор карточек как на kontent-zavod-pro.ru: один ряд колец на все четыре, у каждой карточки свой кусок */
.bcard::after{content:"";position:absolute;inset:0;opacity:.12;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='xMidYMid slice' fill='none' stroke='%23fff' stroke-width='30'%3E%3Ccircle cx='0' cy='0' r='160'/%3E%3Ccircle cx='300' cy='200' r='160'/%3E%3Ccircle cx='600' cy='0' r='160'/%3E%3Ccircle cx='900' cy='200' r='160'/%3E%3Ccircle cx='1200' cy='0' r='160'/%3E%3C/svg%3E") no-repeat;background-size:calc(400% + 48px) 100%}
.bcard.c1::after{background-position:0 0}
.bcard.c2::after{background-position:33.333% 0}
.bcard.c3::after{background-position:66.667% 0}
.bcard.c4::after{background-position:100% 0}
@media (max-width:980px){.bcard::after{background-size:calc(200% + 16px) 200%}.bcard.c1::after{background-position:0 0}.bcard.c2::after{background-position:100% 0}.bcard.c3::after{background-position:0 100%}.bcard.c4::after{background-position:100% 100%}}
.bh{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1}
.bh img{width:76px;height:76px;flex:none;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.25))}
.bcard h3{color:#fff;font-size:1.0625rem;line-height:1.25;position:relative;z-index:1}
.bcard p{font-size:.875rem;line-height:1.45;position:relative;z-index:1}
@media (max-width:980px){.benefits{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.benefits{grid-template-columns:1fr;margin-top:-36px}}
/* карточки наполовину заходят на первый экран */
.benefits{margin-top:-98px}
@media (max-width:980px){.benefits{margin-top:-60px}}
@media (max-width:560px){.benefits{margin-top:-36px}}

/* секции */
.sec{padding-block:clamp(56px,8vw,96px)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px 32px;flex-wrap:wrap;margin-bottom:36px}
.sec-head p{max-width:380px}

/* кейсы */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.filters button{border:1.5px solid var(--black);background:#fff;color:var(--black);border-radius:999px;padding:9px 18px;font:500 .875rem/1 var(--f);cursor:pointer;transition:background .2s,color .2s}
.filters button[aria-pressed="true"]{background:var(--black);color:#fff}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case{display:grid;grid-template-rows:auto 1fr;background:var(--bg-grey);border-radius:24px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.case:hover{box-shadow:0 0 0 2px var(--blue-l),0 24px 44px -30px rgba(30,70,130,.35)}
.shot{margin:14px 14px 0;border-radius:14px 14px 0 0;overflow:hidden;background:#fff;box-shadow:0 10px 30px -18px rgba(0,0,0,.4)}
.shot .bar{display:flex;align-items:center;gap:5px;padding:7px 10px;background:#E9ECF1}
.shot .bar i{width:8px;height:8px;border-radius:50%;background:#FF5F57}.shot .bar i:nth-child(2){background:#FEBC2E}.shot .bar i:nth-child(3){background:#28C840}
.shot .bar span{margin-left:8px;font-size:.6875rem;color:#7B8494;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot img{display:block;width:100%;height:auto;aspect-ratio:1000/597;object-fit:cover;object-position:top}
.case .body{background:#fff;padding:20px 22px 22px;display:grid;gap:10px;align-content:start;margin:0 14px 14px;border-radius:0 0 14px 14px}
.case .tag,.cp .tag{justify-self:start;display:inline-flex;align-items:center;gap:8px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;padding:0 0 0 0;border-radius:0;background:none;color:#5E6878}
.case .tag::before,.cp .tag::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--blue)}
.case .tag.shop::before,.cp .tag.shop::before{background:var(--green)}
.case .tag.corp::before,.cp .tag.corp::before{background:var(--orange)}
.case .tag.shop,.cp .tag.shop,.case .tag.corp,.cp .tag.corp{background:none;color:#5E6878}
.case h3{font-size:1.25rem}
.case p{font-size:.875rem;line-height:1.45}
.case .meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;font-size:.8125rem;font-weight:500}
.case .meta span{color:var(--grey)}
.case-open{border:0;background:none;padding:0;font:500 .8125rem/1.2 var(--f);color:var(--blue-d);cursor:pointer;white-space:nowrap}
.case-open:hover{text-decoration:underline}
/* модалка кейса */
.sheet.case-sheet{max-width:760px;padding:0;gap:0}
.case-sheet .cs-img{display:block;width:100%;height:auto;aspect-ratio:1000/597;object-fit:cover;object-position:top}
.case-sheet .cs-body{padding:26px 28px 30px;display:grid;gap:10px}
.case-sheet .cs-body h3{font-size:1.625rem}
.case-sheet .close{position:sticky;top:12px;margin:12px 12px -48px auto;z-index:2;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.cf-k{margin-top:10px!important;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--blue-d)}
.case-sheet ul{margin:0;padding-left:20px;display:grid;gap:6px}
.case-sheet li,.case-sheet .cs-body p{font-size:.9375rem;line-height:1.5}
.cf-stack{display:flex;flex-wrap:wrap;gap:6px}
.cf-stack span{background:var(--bg-grey);border-radius:999px;padding:6px 12px;font-size:.8125rem;font-weight:500}
.cf-link a{font-weight:500;text-decoration:none}
.case .meta a{text-decoration:none;white-space:nowrap}
.cases:not(.all) .case[data-more]{display:none}
@media (max-width:980px){.cases{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.cases{grid-template-columns:1fr}}

/* светлые секции-подложки */
.soft-sec{background:linear-gradient(180deg,#EEF4FC 0%,#F7FAFE 100%);margin-inline:-16px;padding:clamp(56px,8vw,96px) 16px;border-radius:48px;color:var(--text)}
.soft-sec+.soft-sec{margin-top:16px}
.soft-sec h2{color:var(--black)}
.soft-sec .sec-head p{color:#5E6878}

/* типы сайтов — карточки с 3D-иконкой в углу */
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.type{position:relative;overflow:hidden;min-height:430px;border-radius:24px;background:radial-gradient(120% 80% at 100% 0%,rgba(60,157,242,.16) 0%,transparent 55%),#fff;border:1px solid #E3EAF3;box-shadow:0 24px 50px -36px rgba(30,70,130,.4);padding:24px;display:flex;flex-direction:column;gap:12px}
.type.t2{background:radial-gradient(120% 80% at 100% 0%,rgba(254,106,0,.14) 0%,transparent 55%),#fff}
.type.t3{background:radial-gradient(120% 80% at 100% 0%,rgba(47,166,90,.16) 0%,transparent 55%),#fff}
.type__head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;margin-bottom:4px}
.type__head>div{display:grid;gap:10px;justify-items:start}
.type__head img{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(30,70,130,.25))}
.type .num{font-size:.8125rem;font-weight:500;color:#A3AEC4;letter-spacing:.1em}
.type h3{color:var(--black);text-transform:uppercase;font-size:1.25rem;letter-spacing:.02em}
.type .for{font-size:.9375rem;color:var(--text)}
.type ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:8px}
.type li{position:relative;padding-left:18px;font-size:.875rem;line-height:1.4;color:#4A5468}
.type li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.type.t2 li::before{background:var(--orange)}
.type.t3 li::before{background:var(--green)}
.type .adm{margin-top:auto;padding-top:14px;border-top:1px solid #E3EAF3;font-size:.8125rem;line-height:1.45;color:#4A5468}
.type .adm b{color:var(--black)}
@media (max-width:900px){.types{grid-template-columns:1fr}.type{min-height:0}}
@media (max-width:560px){.type__head img{width:80px;height:80px}}

/* админка — формат prompter: высокая карточка со скриншотом + карточки со скриншотом в углу */
.adm-sec{padding-block:clamp(56px,8vw,96px)}
.biz{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.biz__item{position:relative;overflow:hidden;border-radius:28px;background:#fff;border:1px solid #E3EAF3;box-shadow:0 24px 50px -36px rgba(30,70,130,.4);padding:28px;min-height:250px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.biz__title{position:relative;z-index:1;max-width:46%;font-size:1.125rem;font-weight:500;text-transform:uppercase;letter-spacing:.02em;line-height:1.25;color:var(--black)}
.biz__text{position:relative;z-index:1;max-width:46%;font-size:.9375rem;line-height:1.45;color:#4A5468}
.biz__img{position:absolute;top:26px;right:-40px;width:58%;height:auto;aspect-ratio:1100/657;object-fit:cover;object-position:left top;border-radius:14px;border:1px solid #E3EAF3;box-shadow:0 22px 40px -22px rgba(30,70,130,.55);transform:rotate(-4deg);transition:transform .35s}
.biz__item:nth-child(odd) .biz__img{transform:rotate(3deg)}
.biz__item:hover .biz__img{transform:rotate(0)}
.biz__item--main{grid-row:span 2;justify-content:flex-start;background:linear-gradient(180deg,#fff 0%,#EEF5FE 100%)}
.biz__item--main .biz__title,.biz__item--main .biz__text{max-width:100%}
.biz__shot{margin-top:auto;padding-top:18px;margin-right:-28px;margin-bottom:-28px}
.biz__shot .bar{display:flex;align-items:center;gap:5px;padding:8px 12px;background:#EEF1F6;border-radius:14px 0 0 0;border:1px solid #E3EAF3;border-bottom:0}
.biz__shot .bar i{width:9px;height:9px;border-radius:50%;background:#FF5F57}.biz__shot .bar i:nth-child(2){background:#FEBC2E}.biz__shot .bar i:nth-child(3){background:#28C840}
.biz__shot .bar span{margin-left:8px;font-size:.75rem;color:#7B8494;font-weight:500}
.biz__shot img{display:block;width:100%;height:auto;aspect-ratio:1100/860;object-fit:cover;object-position:left top;border-left:1px solid #E3EAF3;box-shadow:0 20px 40px -24px rgba(30,70,130,.5)}
@media (max-width:860px){.biz{grid-template-columns:1fr}.biz__item--main{grid-row:auto}.biz__item{min-height:0;padding-top:200px}.biz__item--main{padding-top:28px}.biz__title,.biz__text{max-width:100%}.biz__img{width:72%;top:18px;right:-20px}}


/* финальный блок */
.end{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.end-l{display:grid;gap:40px;justify-items:start}
.end-items{display:grid;gap:26px}
.end-item{position:relative;padding-left:26px}
.end-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px;background:linear-gradient(180deg,#3C9DF2,#7B61FF)}
.end-item b{display:block;color:var(--black);text-transform:uppercase;font-size:1.125rem;letter-spacing:.02em;margin-bottom:6px}
.end-item span{font-size:.9375rem;line-height:1.5;color:#4A5468}
.end .photo{max-width:420px;width:100%;justify-self:center}
.fine{font-size:.75rem;color:#7B8494;line-height:1.4}
@media (max-width:860px){.end{grid-template-columns:1fr}.end-l{gap:28px}.end .photo{order:-1;max-width:360px}}

/* футер */
footer{position:relative;margin-inline:-16px;margin-top:16px;padding:72px 16px 24px;color:var(--text);background:none;overflow:hidden}
footer::before{content:none}
footer .wrap{position:relative}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(20,40,80,.1)}
.f-brand{display:grid;gap:14px;align-content:start}
.f-brand p{font-size:.875rem;line-height:1.5;max-width:320px}
.f-tg{justify-self:start;display:inline-flex;align-items:center;gap:10px;background:#229ED9;color:#fff;text-decoration:none;font-weight:500;font-size:.875rem;padding:12px 18px;border-radius:999px}
.f-col{display:grid;gap:10px;align-content:start;font-size:.875rem}
.f-col h4{margin:0 0 4px;color:var(--black);font-size:.8125rem;text-transform:uppercase;letter-spacing:.1em}
.f-col a{color:var(--text);text-decoration:none}
.f-col a:hover{color:var(--blue)}
.f-legal{display:grid;gap:12px;padding-block:28px;font-size:.75rem;line-height:1.55;color:#5E6878}
.f-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.75rem;color:#7B8494}
@media (max-width:900px){.f-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.f-grid{grid-template-columns:1fr}}

/* плавающая кнопка */
.float{text-decoration:none;position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;align-items:center;gap:10px;background:#fff;border:0;border-radius:999px;padding:6px 18px 6px 6px;box-shadow:0 14px 34px -10px rgba(20,50,100,.45);cursor:pointer;font:500 .9375rem/1.1 var(--f);color:var(--black);text-align:left}
.float img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 15%;display:block;background:var(--blue)}
.float .dot{position:absolute;left:44px;top:8px;width:12px;height:12px;border-radius:50%;background:#28C840;border:2px solid #fff}
.float small{display:block;font-weight:500;font-size:.75rem;color:var(--grey)}
@media (max-width:520px){.float>span:last-child{display:none}.float{padding:6px}}

/* подробности кейса */
const cm = document.getElementById("case-modal");
list.addEventListener("click", e => {
  const b = e.target.closest(".case-open"); if (!b) return;
  const c = b.closest(".case");
  cm.querySelector(".cs-img").src = c.querySelector(".shot img").src;
  cm.querySelector(".cs-img").alt = c.querySelector(".shot img").alt;
  const t = cm.querySelector(".tag"); t.className = c.querySelector(".tag").className; t.textContent = c.querySelector(".tag").textContent;
  cm.querySelector("h3").textContent = c.querySelector("h3").textContent;
  cm.querySelector(".cs-full").innerHTML = c.querySelector(".case-full").innerHTML;
  lastFocus = b; cm.hidden = false; cm.querySelector(".close").focus();
});
cm.addEventListener("click", e => { if (e.target === cm || e.target.closest("[data-close]")) { cm.hidden = true; if (lastFocus) lastFocus.focus(); } });
document.addEventListener("keydown", e => { if (e.key === "Escape" && !cm.hidden) { cm.hidden = true; if (lastFocus) lastFocus.focus(); } });

/* модалка */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.5);display:grid;place-items:center;padding:16px}
.sheet{width:100%;max-width:480px;background:#fff;border-radius:24px;padding:28px;display:grid;gap:14px;max-height:calc(100% - 32px);overflow:auto}
.field{display:grid;gap:6px}
.field label{font-size:.8125rem;color:var(--grey);font-weight:500}
.field input,.field select,.field textarea{font:inherit;color:var(--black);background:#fff;border:1.5px solid var(--black);border-radius:999px;padding:14px 20px}
.field textarea{border-radius:20px;resize:vertical;min-height:90px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:none}
.check{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:.8125rem;align-items:start}
.check input{margin-top:2px;accent-color:var(--blue)}
.err{color:var(--orange);font-size:.8125rem;font-weight:500;min-height:1.2em}
.ok-msg{background:#E6F6EA;color:#2D7A45;border-radius:12px;padding:12px 14px;font-size:.875rem;font-weight:500}
.close{justify-self:end;background:var(--bg-grey);border:0;width:36px;height:36px;border-radius:50%;font:500 1.1rem/1 var(--f);cursor:pointer;margin:-8px -8px -16px 0}

/* фото героя без фона — по пояс до нижней границы блока */
.hero-person{align-self:end;display:flex;justify-content:center;min-width:0}
.hero-person img{display:block;width:auto;height:min(640px,72vh);max-width:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 30px 40px rgba(20,60,120,.25))}
@media (max-width:900px){.hero-person img{height:auto;max-height:460px}}

/* кейсы: карточка — ссылка на страницу кейса */
a.shot{display:block;text-decoration:none}
.case h3 a{color:inherit;text-decoration:none}
.case h3 a:hover{color:var(--blue)}
a.case-open{text-decoration:none}

/* попап по образцу prompter: форма слева, иллюстрация справа */
.pop{position:fixed;inset:0;z-index:60;background:rgba(12,18,38,.62);display:grid;place-items:center;padding:16px;overflow:auto;animation:popfade .25s}
@keyframes popfade{from{opacity:0}}
.pop__box{position:relative;width:min(860px,100%);background:#fff;border-radius:28px;padding:28px;display:grid;grid-template-columns:400px 1fr;gap:24px;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);animation:popin .3s cubic-bezier(.2,.8,.2,1)}
@keyframes popin{from{transform:translateY(16px) scale(.97)}}
.pop__close{position:absolute;right:14px;top:14px;z-index:2;width:48px;height:48px;display:grid;place-items:center;padding:0;border-radius:50%;border:0;background:#F1F4F9;cursor:pointer;color:var(--black);transition:background .2s,color .2s}
.pop__close svg{width:24px;height:24px;display:block}
.pop__close:hover{background:#E3EAF5;color:var(--blue-d)}
.pop__form{display:grid;gap:12px;align-content:start}
.pop__form h3{font-size:1.75rem;line-height:1.15}
.pop__sub{font-size:.9375rem;color:#4A5468;margin-bottom:6px}
.pop__in{position:relative;display:block;height:68px}
.pop__in svg{position:absolute;left:20px;top:50%;translate:0 -50%;width:22px;height:22px;fill:none;stroke:var(--blue);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.pop__in input{width:100%;height:100%;border:1.5px solid transparent;border-radius:16px;background:#F1F4F9;padding:0 18px 0 56px;font:500 1.0625rem var(--f);color:var(--black)}
.pop__in input::placeholder{color:#8A93A3}
.pop__in input:focus{outline:none;border-color:var(--blue);background:#fff}
.pop__form .btn{width:100%;margin-top:4px}
.pop__agree{margin:4px 0 0;font-size:.75rem;line-height:1.35;color:#7B8494;margin-top:4px}
.pop__agree input{margin:1px 0 0;accent-color:var(--blue)}
.pop__agree a{color:inherit}
.pop__visual{position:relative;border-radius:22px;overflow:hidden;background:radial-gradient(120% 90% at 80% 10%,#BFD9FB 0%,#E7F1FD 45%,#F6FAFF 100%);min-height:420px}
.pop__laptop{position:absolute;left:16%;right:-14%;top:22%;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -24px rgba(20,60,120,.55);transform:rotate(-6deg)}
.pop__laptop .bar{display:flex;gap:5px;padding:7px 10px;background:#EEF1F6}
.pop__laptop .bar i{width:8px;height:8px;border-radius:50%;background:#FF5F57}.pop__laptop .bar i:nth-child(2){background:#FEBC2E}.pop__laptop .bar i:nth-child(3){background:#28C840}
.pop__laptop img{display:block;width:100%;aspect-ratio:1000/597;object-fit:cover;object-position:top}
.pop__i{position:absolute;width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(20,60,120,.3));animation:float 5s ease-in-out infinite}
.pop__i1{left:6%;top:8%}
.pop__i2{right:8%;bottom:8%;width:110px;height:110px;animation-delay:-2s}
.pop__i3{left:10%;bottom:12%;width:64px;height:64px;animation-delay:-3.5s}
@keyframes float{50%{transform:translateY(-10px)}}
.pop .err{min-height:0}
@media (max-width:820px){.pop__box{grid-template-columns:1fr;padding:22px}.pop__visual{display:none}}

/* страница кейса */
.cp-page{padding-block:24px 72px}
.cp-back a{font-weight:500;text-decoration:none}
.cp{display:grid;gap:18px;justify-items:start;margin-top:18px}
.cp-title{font-size:clamp(2rem,4.4vw,3.25rem)}
.cp-lead{font-size:1.125rem;max-width:760px;color:#34405A}
.cp-shot{width:100%;border-radius:20px;overflow:hidden;border:1px solid #E3EAF3;box-shadow:0 30px 60px -36px rgba(30,70,130,.45);margin-top:6px}
.cp-shot .bar{display:flex;align-items:center;gap:5px;padding:9px 12px;background:#EEF1F6}
.cp-shot .bar i{width:10px;height:10px;border-radius:50%;background:#FF5F57}.cp-shot .bar i:nth-child(2){background:#FEBC2E}.cp-shot .bar i:nth-child(3){background:#28C840}
.cp-shot .bar span{margin-left:10px;font-size:.8125rem;color:#7B8494;font-weight:500}
.cp-shot img{display:block;width:100%;height:auto}
.cp-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cp-box{background:#fff;border:1px solid #E3EAF3;border-radius:22px;padding:24px;display:grid;gap:10px;align-content:start}
.cp-box h2{font-size:1.25rem}
.cp-box p,.cp-box li{font-size:1rem;line-height:1.55;color:#34405A}
.cp-box ul{margin:0;padding-left:20px;display:grid;gap:8px}
.cp-wide{grid-column:1/-1}
.cp-stack{display:flex;flex-wrap:wrap;gap:8px}
.cp-stack span{background:var(--blue-xl);color:var(--blue-d);border-radius:999px;padding:7px 14px;font-size:.875rem;font-weight:500}
.cp-visit{display:inline-flex;align-items:center;min-height:56px;padding:0 28px;border-radius:999px;border:1.5px solid var(--black);font-weight:500;color:var(--black);text-decoration:none}
.cp-visit:hover{background:var(--blue-xl)}
.cp-note{color:#7B8494}
.cp-more{padding-top:56px}
@media (max-width:760px){.cp-grid{grid-template-columns:1fr}}
.adm-item.tall{grid-template-rows:auto 1fr}
.adm-item.tall .adm-shot{display:flex;flex-direction:column}
.adm-item.tall .adm-shot img{flex:1;min-height:0;height:auto;object-fit:cover;object-position:left top}
@media (max-width:860px){.adm-item.tall .adm-shot img{flex:none;aspect-ratio:16/10}}

/* переключатели языка и валюты */
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--bg-grey)}
.seg button{border:0;background:none;border-radius:999px;padding:7px 11px;font:500 .8125rem/1 var(--f);color:#4A5468;cursor:pointer;letter-spacing:.03em}
.seg button[aria-pressed="true"]{background:#fff;color:var(--blue);box-shadow:0 4px 10px -4px rgba(30,70,130,.35)}

.sec-head .cur{flex:0 0 auto;margin-left:auto}
.sec-head__t{display:grid;gap:14px}
.sec-head__t p{max-width:520px;margin:0}
@media (max-width:480px){.seg button{padding:6px 8px}}

/* цена и примеры в типах сайтов */
.type .price{font-size:1.75rem;line-height:1;color:var(--black);letter-spacing:-.01em}
.type .ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:.8125rem;color:#4A5468;margin-top:6px}
.type .ex>span{width:100%;color:var(--black)}
.type .ex a{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border:1px solid #E3EAF3;border-radius:999px;background:#fff;color:var(--black);text-decoration:none;transition:border-color .2s}
.type .ex a:hover{border-color:var(--blue)}
.type .ex img{width:30px;height:22px;object-fit:cover;object-position:top;border-radius:999px}

/* админка: главный скрин меньше, в остальных карточках — стопка скринов в правом нижнем углу */
.biz__shot{width:78%;margin-left:auto}
.biz__item:not(.biz__item--main){min-height:300px;justify-content:flex-start}
.biz__item:not(.biz__item--main) .biz__title,.biz__item:not(.biz__item--main) .biz__text{max-width:54%}
.biz__stack{position:absolute;right:-18px;bottom:-18px;width:40%;display:grid;gap:0}
.biz__stack img{display:block;width:100%;height:auto;aspect-ratio:1100/657;object-fit:cover;object-position:left top;border-radius:12px;border:1px solid #E3EAF3;box-shadow:0 18px 34px -20px rgba(30,70,130,.55);transition:transform .3s}
.biz__stack img+img{margin-top:-44%}
.biz__stack img:nth-child(1){transform:translateX(-14%) rotate(-3deg)}
.biz__stack img:nth-child(2){transform:translateX(-6%) rotate(2deg)}
.biz__stack img:nth-child(3){transform:translateX(4%)}
.biz__item:hover .biz__stack img{transform:none}
@media (max-width:860px){.biz__item:not(.biz__item--main){min-height:0;padding-top:28px;padding-bottom:230px}.biz__item:not(.biz__item--main) .biz__title,.biz__item:not(.biz__item--main) .biz__text{max-width:100%}.biz__stack{width:70%}.biz__shot{width:100%}}

/* «Не уверены, какой формат нужен?» */
.unsure{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px 28px;margin-top:48px;padding:32px 36px;border-radius:28px;background:var(--navy);color:rgba(255,255,255,.85)}
.unsure h2{color:#fff;font-size:clamp(1.375rem,2.4vw,1.75rem);line-height:1.2}
.unsure p{margin:8px 0 0;max-width:620px;font-size:1rem;line-height:1.45}
.unsure img{width:76px;height:76px;object-fit:contain}
@media (max-width:860px){.unsure{grid-template-columns:1fr;padding:28px 24px}.unsure img{width:60px;height:60px}}

/* Как работаем — по образцу prompter-ai.ru: тёмная секция, слева липкий заголовок и кнопка внизу, справа синие карточки с крупной иконкой */
.work{--w-card:#2E7CF6;--w-light:#fff;color:var(--text);padding-block:clamp(56px,7vw,96px)}
.work__content{display:flex;justify-content:space-between;gap:40px}
.work__start{display:flex;flex-direction:column;justify-content:space-between;max-width:420px}
.work__header{position:sticky;top:30px;min-height:min(80vh,720px)}
.work__title{color:var(--black);text-transform:uppercase;font-size:clamp(2rem,3.6vw,3.375rem);line-height:1.1;margin-bottom:20px}
.work__text{margin:0;font-size:clamp(1.125rem,1.6vw,1.5rem);line-height:1.17;color:var(--text)}
.work__btn{width:100%;margin-top:20px;background:#fff;color:var(--blue-d,#1F5BFF);box-shadow:0 16px 36px -12px rgba(0,30,90,.45)}
.work__item:last-child .work__info{width:100%}
.work__end{max-width:758px;width:100%}
.work__items{display:flex;flex-direction:column;gap:24px;width:100%}
.work__item{position:relative;overflow:hidden;width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;background:var(--w-card);border-radius:32px}
.work__icon{width:170px;height:170px;margin:12px 20px 12px 0;object-fit:contain;filter:drop-shadow(0 18px 26px rgba(0,0,0,.35));order:2}
.work__info{position:relative;padding:32px}
.work__item-title{margin:0 0 4px;text-transform:uppercase;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.19;color:var(--w-light)}
.work__item-text{margin:0;font-size:clamp(1.0625rem,1.5vw,1.375rem);line-height:1.2;color:#fff}
@media (max-width:1200px){
  .work__content{flex-direction:column;gap:40px}
  .work__start{max-width:100%;display:contents}
  .work__header{position:relative;top:auto;order:1;min-height:auto}
  .work__end{order:2;width:auto;max-width:none;margin-inline:-16px;padding-inline:16px}
  .work__items{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .work__item{flex:0 0 min(600px,85vw);border-radius:28px;scroll-snap-align:start}
  .work__icon{width:130px;height:130px}
  .work__info{padding:24px}
}
@media (max-width:650px){
  .work__title{margin-bottom:8px}
  .work__item{flex-basis:300px;min-height:253px;grid-template-columns:1fr;align-content:start;gap:0;border-radius:24px}
  .work__icon{width:96px;height:96px;order:0;justify-self:end;margin:12px 12px 0 0}
  .work__info{padding:16px}
}

.type .term{margin:auto 0 0;padding-top:14px;border-top:1px solid #E3EAF3;display:flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:500;color:var(--black)}
.pop .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* текстовые страницы (политика) */
.doc{max-width:820px;padding-block:24px 72px}
.doc h1{font-size:clamp(1.75rem,3.6vw,2.5rem);margin:0 0 8px}
.doc .muted{color:#7B8494;margin:0 0 24px}
.doc p,.doc li{font-size:1rem;line-height:1.65;color:#34405A}
.doc p{margin:0 0 14px}
.doc ul{padding-left:22px;display:grid;gap:6px}
.doc a{color:var(--blue-d)}
.doc h2{font-size:1.25rem;margin:32px 0 12px}
.doc .todo{background:#FFF3C4;padding:0 4px;border-radius:4px}
/* стрелки-иконки в ссылках */
.case-open,.cp-visit,.cp-back a{display:inline-flex;align-items:center;gap:6px}
.case-open .arr,.cp-visit .arr,.cp-back .arr{flex:none;transition:transform .2s}
.case-open:hover .arr,.cp-visit:hover .arr{transform:translateX(3px)}
.cp-visit{gap:10px}
/* слайдер скриншотов в кейсе */
.cp-slider{position:relative;width:100%;margin-top:6px}
.cp-slider .cp-shot{margin-top:0}
.cp-shot .sl-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.cp-shot .sl-track::-webkit-scrollbar{display:none}
.cp-shot .sl-slide{flex:0 0 100%;scroll-snap-align:start}
.cp-shot .sl-slide img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:top}
.sl-btn{position:absolute;top:calc(50% - 6px);translate:0 -50%;width:40px;height:56px;padding:0;border:0;background:none;color:var(--black);display:grid;place-items:center;cursor:pointer;transition:color .2s,opacity .2s}
.sl-btn:hover{color:var(--blue)}
.sl-btn:disabled{opacity:.25;cursor:default;color:var(--black)}
.sl-btn.prev{left:-52px}.sl-btn.next{right:-52px}
.sl-dots{display:flex;justify-content:center;gap:8px;padding-top:14px}
.sl-dot{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:#CBD4E1;cursor:pointer;transition:width .25s,background .25s}
.sl-dot[aria-current="true"]{width:26px;background:var(--blue)}
@media (max-width:1420px){.sl-btn.prev{left:-44px}.sl-btn.next{right:-44px}.sl-btn{width:36px}}
@media (max-width:1380px){.sl-btn{top:auto;bottom:-10px;translate:0 0;height:40px}.sl-btn.prev{left:calc(50% - 110px)}.sl-btn.next{right:calc(50% - 110px)}.sl-dots{padding-top:18px}}

/* бургер (мобильная шапка): снаружи только Telegram, MAX и кнопка меню */
.burger{display:none;width:40px;height:40px;flex:none;padding:0;border:0;border-radius:50%;background:var(--bg-grey);cursor:pointer;place-content:center;gap:4px}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--black);transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{display:none}
@media (max-width:980px){
  .top>.lang,.h-phone{display:none!important}
  .burger{display:grid}
  .mnav:not([hidden]){display:grid;gap:18px;position:absolute;z-index:60;top:calc(100% - 8px);left:0;right:0;padding:22px;background:#fff;border-radius:20px;box-shadow:0 24px 48px -18px rgba(20,40,80,.35),0 0 0 1px rgba(20,40,80,.06)}
  .mnav nav{display:grid}
  .mnav nav a{padding:12px 0;font-size:1.125rem;font-weight:500;color:var(--black);text-decoration:none;border-bottom:1px solid #EDF1F6}
  .mnav nav a:hover{color:var(--blue)}
  .mnav-phone{display:grid;gap:3px;text-decoration:none;color:var(--black)}
  .mnav-phone b{font-size:1.25rem;font-weight:400}
  .mnav-phone small{font-size:.8125rem;color:var(--grey)}
  .mnav-lang{display:flex;align-items:center;gap:12px;font-size:.9375rem;color:var(--black)}
}

/* ── мобильная версия: кейсы и типы сайтов горизонтальными слайдерами ── */
.hs-nav{display:none}
@media (max-width:760px){
  /* слайдеры на всю ширину экрана, без полей контейнера */
  .cases,.types,.filters{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .cases::-webkit-scrollbar,.types::-webkit-scrollbar,.filters::-webkit-scrollbar{display:none}
  .cases,.types{gap:14px;padding-block:4px 30px;margin-bottom:-26px}
  .case,.type{flex:0 0 min(86vw,360px);scroll-snap-align:start}
  .cases:not(.all) .case[data-more]{display:grid}
  .cases:not(.all) .case[data-more][hidden]{display:none}
  #cases-more{display:none}
  .filters{flex-wrap:nowrap;scroll-snap-type:none}
  .filters button{flex:none}
  .hs-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:8px}
  .hs-nav .sl-btn{position:static;translate:none;width:40px;height:40px}
  .hs-nav .sl-dots{padding-top:0}
  .hs-nav .hs-count{min-width:56px;text-align:center;font-size:.875rem;font-weight:500;color:var(--grey)}
  /* выбор валюты справа от описания секции */
  .sec-head:has(.cur){display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px 16px}
  .sec-head:has(.cur) .sec-head__t{display:contents}
  .sec-head:has(.cur) h2{grid-column:1/-1}
  .sec-head:has(.cur) .cur{grid-row:2;grid-column:2;margin-left:0}
  .sec-head:has(.cur) .sec-head__t p{grid-row:2;grid-column:1}
}
/* «Как мы работаем» на телефоне: картинка справа от заголовка */
@media (max-width:650px){
  .work__item{grid-template-columns:1fr auto;grid-template-areas:"title icon" "text text" "btn btn";align-items:center;align-content:start;padding:16px}
  .work__info{display:contents}
  .work__icon{grid-area:icon;width:84px;height:84px;margin:0;order:0}
  .work__item-title{grid-area:title;margin:0}
  .work__item-text{grid-area:text;margin-top:10px}
  .work__btn{grid-area:btn}
}

/* пометка (синяя звезда) на изображениях, созданных с помощью ИИ (расшифровка в подвале) */
.ai-wrap{position:relative;display:inline-block;max-width:100%}
.ai-mark{position:absolute;top:10px;right:10px;z-index:2;width:22px;height:22px;display:grid;place-items:center;color:var(--blue);pointer-events:auto;cursor:help}
.ai-mark .star{width:20px;height:20px;fill:currentColor;display:block}
.photo .ai-mark{top:16px;right:16px}
.float .ai-mark{top:4px;right:auto;left:4px;width:18px;height:18px}
.float .ai-mark .star{width:12px;height:12px}
.ai-star{display:inline-block;vertical-align:-.15em;color:var(--blue)}
.ai-star .star{width:1.05em;height:1.05em;fill:currentColor;display:block}

/* баннер cookie (появляется, только когда задан номер счётчика Метрики) */
.cookie{position:fixed;z-index:70;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:460px;display:grid;gap:12px;padding:16px 18px;background:#fff;border-radius:18px;box-shadow:0 20px 50px -18px rgba(20,40,80,.4),0 0 0 1px rgba(20,40,80,.06);font-size:.8125rem;line-height:1.45;color:var(--text)}
.cookie p{margin:0}
.cookie a{color:var(--blue-d,#1F5BFF)}
.cookie__btns{display:flex;gap:8px;justify-content:flex-end}
.cookie__btns button{border:1.5px solid var(--black);border-radius:999px;padding:9px 16px;background:#fff;color:var(--black);font:500 .8125rem/1 var(--f);cursor:pointer}
.cookie__btns .cookie__yes{background:var(--black);color:#fff}
@media (max-width:560px){.cookie{right:16px;max-width:none;bottom:calc(84px + env(safe-area-inset-bottom,0px))}}