/* HALO — сайт студии. Одна тёплая гамма шагами от песочного до сливы: чем сложнее сайт, тем глубже цвет.
   Шрифты: Jost (заголовки) и Onest (текст). */
:root{
  --cream:#F8F3E8; --sand:#FCECC4; --peach:#FFC48E; --coral:#FF9575; --rose:#E96C7C;
  --berry:#A62D66; --plum:#6A1C5E; --night:#2D1031; --deep:#1A081D;
  --butter:#FEDF56; --teal:#00525A; --mist:#BCE8E7; --paper:#FFFAF0;
  --muted:#6B5568; --line:#E6D6BA;
  --lilac:#F3E7F4; --lilac-line:#D9BEDC;
  --display:"Jost","Futura","Trebuchet MS",system-ui,sans-serif;
  --text:"Onest","Segoe UI",system-ui,-apple-system,sans-serif;
  --gutter:clamp(20px,4vw,56px);
  --pad:clamp(72px,9vw,128px);
  --r:36px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --header:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 8px);-webkit-text-size-adjust:100%}
main{overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--night);font:400 1rem/1.6 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,figure,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:lining-nums}
.wrap{width:min(1320px,100% - 2 * var(--gutter));margin-inline:auto}
:focus-visible{outline:3px solid var(--berry);outline-offset:3px;border-radius:6px}
.site-header :focus-visible,.hero :focus-visible,.catalog :focus-visible,.estimate :focus-visible,.techsec :focus-visible,.cta :focus-visible,.footer :focus-visible{outline-color:var(--butter)}
.skip{position:absolute;left:-999px;top:8px;z-index:100;padding:10px 16px;background:var(--butter);color:var(--night)}
.skip:focus{left:8px}
.fine{margin-top:12px;font-size:.8125rem;line-height:1.5;color:var(--muted)}

/* ---------- buttons: цветной низ «нажимается» при клике ---------- */
.btn{--shadow:color-mix(in srgb,var(--night) 75%,black);display:inline-flex;align-items:center;justify-content:center;gap:.6em;height:56px;padding:0 30px;border:0;border-radius:999px;background:var(--night);color:var(--cream);font:600 1rem/1 var(--text);white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:0 5px 0 var(--shadow);transition:background .2s var(--ease),color .2s var(--ease),transform .12s var(--ease),box-shadow .12s var(--ease)}
.btn:hover{background:color-mix(in srgb,var(--night) 88%,var(--berry));transform:translateY(-2px);box-shadow:0 7px 0 var(--shadow)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--shadow)}
.btn svg{width:16px;height:16px;flex:none;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-sm{height:44px;padding:0 22px;font-size:.9375rem}
.btn-block{width:100%}
.btn-butter{--shadow:color-mix(in srgb,var(--butter) 65%,black);background:var(--butter);color:var(--night)}
.btn-butter:hover{background:#FFEA85;color:var(--night)}
.btn-ghost{--shadow:none;background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn-ghost:hover{background:var(--butter);color:var(--night);box-shadow:inset 0 0 0 2px var(--butter)}
.btn-ghost:active{transform:translateY(2px)}

/* ---------- мессенджеры: WhatsApp/Viber/звонок — узнаваемые фирменные цвета ---------- */
.btn-wa{--shadow:#178a4c;background:#25D366;color:#07341b}
.btn-wa:hover{background:#2fe077;color:#07341b}
.btn-viber{--shadow:#4a3aa8;background:#7360F2;color:#fff}
.btn-viber:hover{background:#8577f5}
.btn-call{--shadow:color-mix(in srgb,var(--coral) 55%,black);background:var(--coral);color:var(--night)}
.btn-call:hover{background:#FFA98A}
.btn-tg{--shadow:#1c86bd;background:#2AABEE;color:#fff}
.btn-tg:hover{background:#4dbdf5}
.btn-icon{width:18px;height:18px;flex:none}
.btn-cluster{display:flex;flex-wrap:wrap;gap:12px}
/* home page only for now: same colours, squarer corners */
.home .btn,.home .cta-channels a{border-radius:14px}
.home .btn-sm{border-radius:12px}

/* ---------- нижняя плашка быстрой связи (моб.) ---------- */
.mobile-bar{display:none}

/* ---------- header: логотип слева, меню строго по центру, CTA справа ---------- */
.site-header{position:sticky;top:0;z-index:70;background:var(--night);color:var(--cream)}
.header-in{display:flex;align-items:center;justify-content:space-between;height:var(--header)}
.logo{display:inline-flex;align-items:center;flex:none;font:800 1.75rem/1 var(--display);letter-spacing:.02em;text-decoration:none}
.logo small{margin-left:14px;font:500 .6875rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:rgba(248,243,232,.6)}
.nav{display:flex;align-items:center;gap:26px}
.nav a{position:relative;padding-block:8px;font-size:.9375rem;font-weight:500;text-decoration:none;color:rgba(248,243,232,.78);transition:color .2s;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:2px;border-radius:2px;background:var(--butter);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover,.nav a.is-active{color:var(--cream)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav-phone{display:none}
.header-cta{display:flex;align-items:center;gap:22px;flex:none}
.header-cta .btn-butter{--shadow:color-mix(in srgb,var(--butter) 45%,black);background:color-mix(in srgb,var(--butter) 55%,white)}
.header-cta .btn-butter:hover{background:color-mix(in srgb,var(--butter) 72%,white)}
.phone{font-size:.9375rem;font-weight:600;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.burger{display:none;flex:none;width:44px;height:44px;margin-right:-10px;border:0;background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.burger span{display:block;width:24px;height:2px;border-radius:2px;background:var(--cream);transition:transform .25s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}

/* ---------- hero: заголовок и есть список того, что мы создаём ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(44px,6vw,88px) 0 clamp(56px,7vw,104px);background:var(--night);color:var(--cream)}
.hero::before,.hero::after{content:"";position:absolute;border:2px solid rgba(254,223,86,.26);border-radius:50%;pointer-events:none}
.hero::before{top:-190px;right:-270px;width:560px;height:560px}
.hero::after{top:-80px;right:-160px;width:340px;height:340px}
.hero .wrap{position:relative;z-index:1}
h1{max-width:16em;font-size:clamp(2rem,4.6vw,4.7rem);line-height:1.34;letter-spacing:-.025em}
.nb{white-space:nowrap}
.hl{--c:var(--sand);--t:var(--night);display:inline;margin:0 -.02em;padding:0 .2em;border-radius:.2em;color:var(--cream);text-decoration:none;white-space:nowrap;background:linear-gradient(var(--c),var(--c)) left 74%/0% 78% no-repeat;animation:paint .9s var(--ease) forwards;animation-delay:calc(.35s + var(--i) * .2s);transition:box-shadow .2s}
@keyframes paint{to{background-size:100% 78%;color:var(--t)}}
.hl:hover{box-shadow:0 0 0 4px rgba(254,223,86,.4)}
.hero-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 56px;align-items:end;margin-top:clamp(32px,4vw,52px)}
.hero-lead{max-width:34em;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.6;color:rgba(248,243,232,.82)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.incl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:clamp(36px,5vw,64px);padding-top:24px;border-top:1px solid rgba(248,243,232,.18)}
.incl p{font:600 .8125rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:rgba(248,243,232,.6)}
.incl ul{display:flex;flex-wrap:wrap;gap:10px 22px}
.incl li{display:flex;align-items:center;gap:9px;font-size:1.0625rem;font-weight:500}
.incl li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--butter)}
.incl li:nth-child(1)::before{background:var(--sand)}
.incl li:nth-child(2)::before{background:var(--peach)}
.incl li:nth-child(3)::before{background:var(--coral)}
.incl li:nth-child(4)::before{background:var(--rose)}
.incl li:nth-child(6)::before{background:var(--mist)}

/* ---------- section commons ---------- */
.section{padding-block:var(--pad)}
.lift{position:relative;margin-top:calc(var(--r) * -1);padding-top:calc(var(--pad) + var(--r));border-radius:var(--r) var(--r) 0 0}
.sec-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 64px;margin-bottom:clamp(36px,5vw,64px)}
.sec-h h2{font-size:clamp(2.6rem,6.4vw,6rem);line-height:.95;letter-spacing:-.035em}
.sec-h p{max-width:27em;font-size:1.0625rem;color:var(--muted)}
.sec-h.on-dark p{color:rgba(248,243,232,.76)}
.trust-line{display:inline-block;margin-top:8px;font:600 italic 1.125rem/1.4 var(--display);letter-spacing:0;color:var(--berry)}

/* ---------- catalog: шесть цветных полос ---------- */
.catalog{padding-top:clamp(28px,4vw,56px);background:var(--night);color:var(--cream)}
.catalog .sec-h{margin-bottom:clamp(28px,4vw,48px)}
/* «Ещё делаем»: три карточки вместо трёх отдельных полос */

/* ---------- works: сайты «стопкой листов» ---------- */
.works{background:var(--cream)}
.stack{display:block;width:100%;padding:0;border:0;background:none;text-align:left;text-decoration:none;color:inherit;cursor:pointer}
.sheet{position:relative;display:block;aspect-ratio:6/7;overflow:hidden;border-radius:6px;background:#fff;box-shadow:0 26px 34px -22px rgba(45,16,49,.55)}
.sheet{container-type:inline-size}
.sheet img,.sheet .mock{position:absolute;left:0;top:0;width:100%;height:auto;transition:top .9s var(--ease),transform .9s var(--ease)}
.stack:hover .sheet img,.stack:focus-visible .sheet img,.stack:hover .sheet .mock,.stack:focus-visible .sheet .mock{top:100%;transform:translateY(-100%);transition:top 9s linear,transform 9s linear}
/* пример с автопросмотром, по кругу: пауза на первом экране, плавно ко второму, медленно вниз, пауза внизу, плавно наверх (класс ставит script.js, пока превью видно) */
@media (prefers-reduced-motion:no-preference){.is-tour.is-touring .sheet img{animation:tpl-tour 34s infinite}}
@keyframes tpl-tour{
  0%,5%{top:0;transform:translateY(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  10%{top:0;transform:translateY(var(--tour));animation-timing-function:linear}
  78%,86%{top:100%;transform:translateY(-100%);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  96%,100%{top:0;transform:translateY(0)}
}

/* ---------- «Выберите тип сайта»: price menu on the home page ---------- */
.catalog .sec-h{margin-bottom:clamp(28px,4vw,44px)}
.menu{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.menu-row{--sh:color-mix(in srgb,var(--c) 55%,black);display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:12px 32px;padding:24px 24px 24px 32px;border-radius:26px;background:var(--c);color:var(--night);text-decoration:none;box-shadow:0 6px 0 var(--sh);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.menu-row:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--sh)}
.menu-row:active{transform:translateY(3px);box-shadow:0 2px 0 var(--sh)}
.menu-no{font:700 1rem/1 var(--display);opacity:.55}
.menu-what b{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font:700 clamp(1.8rem,3.2vw,2.8rem)/1.02 var(--display);letter-spacing:-.025em}
.menu-what small{display:block;margin-top:8px;font-size:1.0625rem;line-height:1.4;opacity:.8}
.menu-hit,.menu-ready{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--night);color:var(--butter);font:700 .75rem/1 var(--text);letter-spacing:.04em}
.menu-hit{letter-spacing:.08em;text-transform:uppercase}
.menu-ready{margin-top:12px}
.menu-price{font:800 clamp(1.8rem,3.2vw,2.8rem)/1 var(--display);letter-spacing:-.025em;white-space:nowrap}
.menu-price small{font-size:.42em;letter-spacing:.06em}
.menu-term{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;background:rgba(45,16,49,.1);font-weight:600;white-space:nowrap}
.menu-go{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--night);color:var(--butter);transition:transform .25s var(--ease)}
.menu-row:hover .menu-go{transform:translateX(4px)}

.menu-more{margin-top:34px}
.menu-more-t{margin-bottom:14px;font:700 .8125rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:rgba(248,243,232,.65)}
.menu-more ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.more-row{--sh:color-mix(in srgb,var(--c) 50%,black);display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"ic . go" "t t t" "p p p";gap:14px;height:100%;padding:20px 22px 22px;border-radius:24px;background:var(--c);color:var(--night);text-decoration:none;box-shadow:0 5px 0 var(--sh);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.more-row:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--sh)}
.more-row:active{transform:translateY(3px);box-shadow:0 2px 0 var(--sh)}
.more-row-ic{grid-area:ic;display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--night);color:var(--c)}
.more-row-ic .ic{width:26px;height:26px}
.more-row-t{grid-area:t;display:flex;flex-direction:column;gap:6px}
.more-row-t b{font:700 1.45rem/1.1 var(--display);letter-spacing:-.015em}
.more-row-t small{font-size:.9375rem;line-height:1.4;opacity:.8}
.more-row-p{grid-area:p;justify-self:start;padding:8px 14px;border-radius:999px;background:rgba(45,16,49,.1);font:800 1rem/1 var(--display);white-space:nowrap}
.more-row > .ic-s{grid-area:go;display:grid;place-items:center;width:44px;height:44px;padding:12px;border-radius:50%;background:var(--night);color:var(--butter);transition:transform .2s var(--ease)}
.more-row:hover > .ic-s{transform:translateX(3px)}
.est-note{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px 24px;align-items:center;margin-top:36px;padding:26px 28px;border-radius:26px;background:rgba(248,243,232,.08);box-shadow:inset 0 0 0 1.5px rgba(254,223,86,.45)}
.est-note-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--butter);color:var(--night)}
.est-note-ic .ic{width:26px;height:26px}
.est-note b{display:block;margin-bottom:6px;font:700 1.35rem/1.2 var(--display)}
.est-note p{max-width:46em;font-size:.9375rem;line-height:1.55;opacity:.85}
.est-note-acts{display:flex;flex-direction:column;gap:10px}
.est-note .btn-ghost{color:var(--cream)}

/* ---------- ready templates: live demo sites ---------- */
.ready{overflow:hidden;background:radial-gradient(900px 520px at 0% 0%,#FFD3AE 0%,transparent 62%),radial-gradient(900px 620px at 100% 10%,#F7C3D6 0%,transparent 60%),radial-gradient(1000px 520px at 45% 105%,#FFE89A 0%,transparent 62%),var(--sand)}
.ready::before,.ready::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.ready::before{right:-200px;top:-280px;width:680px;height:680px;border:2px solid rgba(166,45,102,.2)}
.ready::after{left:-180px;bottom:-240px;width:480px;height:480px;border:2px solid rgba(45,16,49,.12)}
.ready .wrap{position:relative;z-index:1}
.ready-h h2 .ink{padding:0 .06em;background:linear-gradient(var(--butter),var(--butter)) left 86%/100% .3em no-repeat}
.ready-h{margin-bottom:clamp(20px,3vw,32px)}
.ready-h h2{font-size:clamp(2.2rem,5.2vw,4.8rem)}
.sec-h .ready-lead{max-width:40em;color:rgba(45,16,49,.82)}
.sec-h .ready-lead b{color:var(--night);font-weight:700}
.ready-badges{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.ready-badges li{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:rgba(255,250,240,.75);box-shadow:inset 0 0 0 1px rgba(45,16,49,.08);font-size:.875rem;font-weight:600}
.ready-badges .ic-s{color:var(--berry)}
.k-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.k-tabs button{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border:0;border-radius:999px;background:rgba(255,250,240,.8);box-shadow:inset 0 0 0 1.5px rgba(45,16,49,.12);font:600 .9375rem/1 var(--text);color:var(--night);cursor:pointer;transition:background .2s,box-shadow .2s}
.k-tabs button:hover{box-shadow:inset 0 0 0 1.5px var(--night)}
.k-tabs button em{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:rgba(45,16,49,.08);font-size:.75rem;font-style:normal;font-weight:700}
.k-tabs button[aria-pressed="true"]{background:var(--night);color:var(--cream);box-shadow:none}
.k-tabs button[aria-pressed="true"] em{background:var(--butter);color:var(--night)}
.tpl-card{display:flex;flex-direction:column}
.tpl-card[hidden]{display:none}
.tpl-box{display:flex;flex:1;flex-direction:column}
.tpl-shot{display:block;overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(45,16,49,.08),0 24px 40px -28px rgba(45,16,49,.55);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.tpl-card:hover .tpl-shot,.tpl-shot:focus-visible{transform:translateY(-5px);box-shadow:0 0 0 1px rgba(45,16,49,.08),0 36px 56px -30px rgba(45,16,49,.62)}
.tpl-bar{display:flex;align-items:center;gap:5px;height:24px;padding:0 12px;background:#fff;border-bottom:1px solid rgba(45,16,49,.07)}
.tpl-bar i{width:7px;height:7px;border-radius:50%;background:rgba(45,16,49,.16)}
.tpl-bar em{margin-left:8px;font-size:.7rem;font-style:normal;font-weight:500;color:rgba(45,16,49,.45)}
.tpl-shot .sheet{aspect-ratio:6/7.2;border-radius:0;box-shadow:none}
.tpl-cap{display:flex;flex:1;flex-direction:column;gap:4px;padding:18px 2px 0}
.tpl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.875rem;color:var(--muted)}
.tpl-meta .kind-chip{margin:0;background:var(--k)}
.tpl-pages{padding:4px 9px;border-radius:999px;background:var(--night);color:var(--butter);font-size:.75rem;font-weight:700}
.tpl-cap > b{font:700 1.6rem/1.1 var(--display);letter-spacing:-.01em}
.tpl-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:auto;padding-top:8px}
.tpl-price b{font:800 1.4rem/1 var(--display);color:var(--berry)}
.tpl-price small{font-size:.875rem;color:var(--muted)}
.tpl-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.tpl-acts .btn{flex:1 1 auto;min-width:0;padding:0 18px}
.tpl-acts .btn .ic-s{transition:none}
.tpl-card.is-real .tpl-acts .btn{flex:0 0 auto;padding:0 22px}
.car-progress{height:4px;margin-top:22px;border-radius:4px;background:rgba(45,16,49,.1);overflow:hidden}
.car-progress i{display:block;height:100%;border-radius:4px;background:var(--berry);transform:scaleX(0);transform-origin:left}
.car-progress i.run{animation:car-run var(--t,4.5s) linear forwards}
@keyframes car-run{to{transform:scaleX(1)}}
.ready-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;margin-top:36px;padding:26px 30px;border-radius:28px;background:var(--night);color:var(--cream);box-shadow:0 34px 60px -40px rgba(45,16,49,.8)}
.ready-steps{display:grid;flex:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px;margin:0;padding:0;list-style:none}
.ready-steps li{display:flex;gap:14px;align-items:flex-start}
.ready-steps em{display:grid;flex:none;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--butter);font:800 1rem/1 var(--display);font-style:normal;color:var(--night)}
.ready-steps span{font-size:.9375rem;line-height:1.45;color:rgba(248,243,232,.72)}
.ready-steps b{display:block;margin-bottom:2px;font-size:1.02rem;color:var(--cream)}
.ready-note{display:flex;gap:16px;align-items:flex-start;margin-top:24px;padding:20px 22px;border-radius:20px;background:var(--sand)}
.ready-note-ic{display:grid;flex:none;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--night);color:var(--butter)}
.ready-note p{line-height:1.55}
.ready-note a{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-weight:700;color:var(--berry);text-decoration:none}
.ready-note a:hover .ic-s{transform:translateX(4px)}
.ready-note .ic-s{transition:transform .2s var(--ease)}

/* ---------- shop: «only custom» instead of templates ---------- */
.ready-note.is-own{background:color-mix(in srgb,var(--coral) 28%,var(--cream))}




/* ---------- «индивидуально» panel: works page tabs, /katalog ---------- */
.tpl-solo.is-wide{grid-column:1 / -1}
.tpl-solo{align-self:center}
[data-view="catalog"] .tpl-card[data-kind="catalog"] .sheet,[data-view="cabinet"] .tpl-card[data-kind="cabinet"] .sheet,[data-view="shop"] .tpl-card[data-kind="shop"] .sheet,.tpl-card.is-big .sheet{aspect-ratio:16/10.5}
.tpl-solo:not(.is-wide) .solo{padding:26px}
.tpl-solo:not(.is-wide) .solo h3,.solo-row .solo h3{font-size:clamp(1.4rem,2vw,1.8rem)}
.tpl-solo:not(.is-wide) .solo-lead,.solo-row .solo-lead{font-size:.9375rem}
.tpl-solo:not(.is-wide) .solo-foot,.solo-row .solo-foot{flex-direction:column;align-items:stretch}
.tpl-solo:not(.is-wide) .solo-foot .btn-cluster .btn,.solo-row .solo-foot .btn-cluster .btn{flex:1}
.solo{display:flex;flex-direction:column;gap:14px;height:100%;padding:clamp(24px,3vw,38px);border-radius:30px;background:var(--night);color:var(--cream);box-shadow:0 34px 60px -38px rgba(45,16,49,.7)}
.solo-kicker{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--c);font:700 .75rem/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--night)}
.solo h3{font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.05;letter-spacing:-.02em}
.solo-lead{max-width:44em;color:rgba(248,243,232,.78);line-height:1.6}
.solo .solo-list{display:grid;gap:10px}
.solo .solo-list li{display:flex;gap:10px;align-items:flex-start}
.solo .solo-list .ic-c{flex:none;width:24px;height:24px;padding:5px;border-radius:50%;background:var(--c);color:var(--night)}
.tpl-solo.is-wide .solo-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.solo-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:auto;padding-top:20px;border-top:1px solid rgba(248,243,232,.14)}
.solo-foot b{display:block;font:800 1.8rem/1 var(--display);color:var(--c)}
.solo-foot small{display:block;margin-top:6px;font-size:.875rem;color:rgba(248,243,232,.7)}
.solo .btn{--shadow:color-mix(in srgb,var(--butter) 60%,black);background:var(--butter);color:var(--night)}
.solo .btn-soft{--shadow:none;background:transparent;color:var(--cream);box-shadow:inset 0 0 0 2px rgba(248,243,232,.45)}
.solo .btn-soft:hover{background:var(--cream);color:var(--night)}
.solo-row{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:40px;align-items:stretch}
.solo-demo{margin:0;padding:0;list-style:none}

/* ---------- estimate: калькулятор и чек ---------- */
.estimate{background:var(--teal);color:var(--cream)}
.estimate .sec-h p{color:rgba(248,243,232,.78)}
fieldset{min-width:0;padding:0;border:0}
.interest-chips{display:flex;flex-wrap:wrap;gap:8px}
.interest-chips .chip span{padding:9px 16px;font-size:.9375rem}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip input:focus-visible + span{outline:3px solid var(--butter);outline-offset:3px}
.chip span{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:999px;box-shadow:inset 0 0 0 2px rgba(248,243,232,.3);font-weight:500;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.chip span:hover{box-shadow:inset 0 0 0 2px var(--cream)}
.chip em{font-style:normal;opacity:.7}
.chip input:checked + span{background:var(--butter);color:var(--night);box-shadow:none}
.receipt{position:sticky;top:calc(var(--header) + 24px);padding:32px 30px 40px;border-radius:12px 12px 0 0;background:var(--paper);color:var(--night);box-shadow:0 40px 60px -36px rgba(0,0,0,.6)}
.receipt::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px;background:linear-gradient(135deg,var(--paper) 50%,transparent 50%) 0 0/18px 14px,linear-gradient(225deg,var(--paper) 50%,transparent 50%) 0 0/18px 14px}
.receipt-kicker{font:700 1.9rem/1 var(--display);letter-spacing:-.02em}
.r-lines{margin:22px 0 0}
.r-lines li{display:flex;align-items:baseline;gap:8px;padding:6px 0;font-size:.9375rem}
.r-lines i{flex:1;min-width:16px;border-bottom:2px dotted #CDBB98;transform:translateY(-4px)}
.r-lines b{font-weight:600;font-variant-numeric:tabular-nums}
.r-total{display:grid;gap:4px;margin-top:18px;padding-top:18px;border-top:2px solid var(--night)}
.r-total span{font:600 .75rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.r-total b{font:700 clamp(2.2rem,3.4vw,3rem)/1.05 var(--display);letter-spacing:-.03em}
.r-total em{font-style:normal;font-weight:500;color:var(--berry)}
.r-actions{display:grid;gap:10px;margin-top:22px}

/* ---------- process: график ---------- */
.process{background:var(--butter);color:var(--night)}
.process .sec-h p{color:rgba(45,16,49,.78)}
.gantt-card{padding:clamp(20px,3vw,40px);border-radius:var(--r);background:var(--paper)}
.gantt-card .timeline{max-width:none;margin-top:8px}
.t-dur{display:inline-flex;align-items:center;margin:12px 10px 0 0;padding:6px 14px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 2px var(--line);font-size:.8125rem;font-weight:700;transition:opacity .15s}

/* ---------- tech stack: таблица инструментов ---------- */
.techsec{background:var(--night);color:var(--cream)}
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.tile{display:flex;flex-direction:column;min-height:196px;padding:16px 18px 18px;border-radius:22px;background:var(--c);color:var(--night);transition:transform .3s var(--ease)}
.tile:hover{transform:translateY(-6px) rotate(-1deg)}
.tile small{font:700 .75rem/1 var(--display);opacity:.6}
.tile strong{margin:auto 0 12px;font:800 3.4rem/1 var(--display);letter-spacing:-.04em}
.tile b{font-weight:700}
.tile span{margin-top:2px;font-size:.8125rem;line-height:1.3;opacity:.8}
.legend{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px}
.legend li{display:flex;align-items:center;gap:9px;font-size:.9375rem;color:rgba(248,243,232,.8)}
.legend i{width:12px;height:12px;border-radius:50%;background:var(--c)}
.tech-note{max-width:52em;margin-top:32px;padding-top:24px;border-top:1px solid rgba(248,243,232,.18);font-size:1.0625rem;line-height:1.7;color:rgba(248,243,232,.82)}
.tech-note b{color:var(--butter)}

/* ---------- contract: преимущества как пункты договора ---------- */
.contract{background:var(--sand)}
.contract-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center}
.contract-copy h2{font-size:clamp(2.4rem,5vw,4.6rem);line-height:.98;letter-spacing:-.03em}
.contract-copy p{max-width:26em;margin:22px 0 32px;font-size:1.125rem;color:var(--muted)}
.paper{position:relative;padding:clamp(28px,4vw,48px);border-radius:6px;background:var(--paper);box-shadow:0 44px 60px -36px rgba(45,16,49,.55);transform:rotate(1.4deg)}
.paper h3{font:700 .8125rem/1.3 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.paper ol{counter-reset:c;margin-top:18px}
.paper li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 12px;padding:14px 0;border-top:1px dashed #D9C6A2}
.paper li::before{grid-row:span 2;counter-increment:c;content:counter(c);font:800 1.8rem/1 var(--display);color:var(--berry)}
.paper li b{font-weight:700}
.paper li span{color:var(--muted);font-size:.9375rem}
.sign{display:flex;gap:36px;margin-top:26px}
.sign div{flex:1;font-size:.8125rem;color:var(--muted)}
.sign i{display:block;height:1px;margin-bottom:6px;background:var(--night)}
.stamp{position:absolute;right:-22px;bottom:-30px;width:150px;color:var(--berry);transform:rotate(-14deg);mix-blend-mode:multiply;opacity:.9}

/* ---------- faq ---------- */
.faq{background:var(--cream)}
.faq-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-head{position:sticky;top:calc(var(--header) + 32px)}
.faq-head h2{font-size:clamp(3rem,7vw,6.4rem);line-height:.92;letter-spacing:-.04em}
.faq-head p{margin:22px 0 28px;color:var(--muted)}
details{margin-bottom:10px;border-radius:24px;background:var(--paper);transition:background .3s}
details[open]{background:var(--c,var(--sand))}
summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;font:700 1.3rem/1.25 var(--display);letter-spacing:-.01em;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";display:grid;flex:none;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--c,var(--sand));font:600 1.5rem/1 var(--text);transition:transform .3s var(--ease),background .3s,color .3s}
details[open] summary::after{transform:rotate(45deg);background:var(--night);color:var(--cream)}
details p{max-width:42em;padding:0 26px 24px}

/* ---------- final call ---------- */
.cta{overflow:hidden;background:var(--plum);color:var(--cream)}
.cta::before,.cta::after{content:"";position:absolute;border:2px solid rgba(254,223,86,.3);border-radius:50%;pointer-events:none}
.cta::before{right:-140px;bottom:-260px;width:560px;height:560px}
.cta::after{right:-40px;bottom:-160px;width:360px;height:360px}
.cta .wrap{position:relative;z-index:1}
.cta-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.cta h2{font-size:clamp(2.3rem,5vw,4.6rem);line-height:1.24;letter-spacing:-.03em}
.cta mark{padding:0 .18em;border-radius:.2em;background:linear-gradient(var(--butter),var(--butter)) left 74%/100% 78% no-repeat;color:var(--night);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cta-channels{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.cta-channels a{display:inline-flex;align-items:center;height:46px;padding:0 22px;border-radius:999px;box-shadow:inset 0 0 0 2px rgba(248,243,232,.4);font-weight:600;text-decoration:none;transition:background .2s,color .2s,box-shadow .2s}
.cta-channels a:hover{background:var(--butter);color:var(--night);box-shadow:none}
.cta-form{padding:clamp(24px,3vw,38px);border-radius:var(--r);background:var(--paper);color:var(--night)}
.cta-form h3{margin-bottom:20px;font-size:1.9rem}

/* ---------- footer ---------- */
.footer{position:relative;overflow:hidden;padding-top:72px;background:var(--deep);color:rgba(248,243,232,.78)}
.footer-channels{margin-top:18px}
.footer .logo{color:var(--cream)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer-nav b,.footer-contact b{margin-bottom:4px;font:700 .75rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:rgba(248,243,232,.5)}
.footer-brand p{max-width:24em;margin-top:14px}
.footer-nav,.footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.footer a{text-decoration:none;transition:color .2s}
.footer a:hover{color:var(--butter)}
.footer-word{margin:36px 0 -.1em;font:800 clamp(4rem,17.5vw,16.5rem)/.8 var(--display);letter-spacing:-.04em;text-align:center;color:rgba(248,243,232,.07);user-select:none}
.footer-bottom{position:relative;padding:22px 0 28px;font-size:.8125rem;color:rgba(248,243,232,.55)}

/* ---------- forms and dialog ---------- */
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.form label{display:block;margin-bottom:16px;font-size:.8125rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.form label i{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;font-size:.9em;opacity:.7}
.form input,.form textarea{display:block;width:100%;margin-top:6px;padding:10px 0;border:0;border-bottom:2px solid var(--night);border-radius:0;background:transparent;font:400 1.0625rem/1.4 var(--text);letter-spacing:0;text-transform:none;color:var(--night);resize:vertical}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--berry)}
.form ::placeholder{color:#9a8a96}
.phone-field{display:flex;align-items:flex-end;gap:8px;margin-top:6px}
.phone-field .phone-prefix{flex:none;padding-bottom:10px;font:400 1.0625rem/1.4 var(--text);color:var(--muted)}
.phone-field input{margin-top:0}
.form-actions{margin-top:22px}
.form-actions .btn{flex:1 1 auto}
.modal{width:min(580px,100% - 32px);max-height:calc(100dvh - 32px);padding:0;overflow:hidden auto;overscroll-behavior:contain;border:3px solid var(--night);border-radius:var(--r);background:var(--cream);color:var(--night);box-shadow:0 40px 70px -24px rgba(26,8,29,.55)}
.modal::before{content:"";display:block;height:7px;background:linear-gradient(90deg,var(--sand),var(--peach),var(--coral),var(--rose),var(--berry),var(--plum),var(--butter))}
.modal::backdrop{background:rgba(26,8,29,.7)}
@media (prefers-reduced-motion:no-preference){
  .modal{transition:opacity .28s var(--ease),transform .28s var(--ease),overlay .28s allow-discrete,display .28s allow-discrete}
  .modal::backdrop{transition:opacity .28s var(--ease),overlay .28s allow-discrete,display .28s allow-discrete}
  .modal[open]{opacity:1;transform:scale(1)}
  .modal[open]::backdrop{opacity:1}
  @starting-style{
    .modal[open]{opacity:0;transform:scale(.92) translateY(10px)}
    .modal[open]::backdrop{opacity:0}
  }
}
.modal-x{position:absolute;top:14px;right:16px;width:44px;height:44px;border:0;border-radius:50%;background:var(--sand);font-size:1.6rem;line-height:1;cursor:pointer;transition:background .2s}
.modal-x:hover{background:var(--butter)}
body:has(dialog[open]){overflow:hidden}

/* ---------- lead dialog: light lilac request form, bordered fields, 3 even send buttons ---------- */

.framed-form input,.framed-form textarea{margin-top:8px;padding:13px 14px;border:0;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 2px var(--lilac-line);font:400 1.0625rem/1.4 var(--text);color:var(--night)}
.framed-form input:focus,.framed-form textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--berry)}
.framed-form .phone-field{margin-top:8px;display:flex;align-items:stretch;gap:0;border:2px solid var(--lilac-line);border-radius:14px;overflow:hidden;background:var(--paper);transition:border-color .15s}
.framed-form .phone-field:focus-within{border-color:var(--berry)}
.framed-form .phone-field .phone-prefix{display:flex;flex:none;align-items:center;padding:0 14px;background:var(--lilac-line);font-weight:700;color:var(--night)}
.framed-form .phone-field input{flex:1;min-width:0;margin-top:0;padding:13px 14px 13px 10px;border-radius:0;box-shadow:none}

.send-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}
.send-grid .btn{width:100%;height:52px;padding:0 8px;font-size:.875rem}
.send-grid .btn-icon{width:18px;height:18px}


/* ---------- вложенные страницы: вступление ---------- */
.page-hero{position:relative;overflow:hidden;padding:clamp(40px,6vw,72px) 0 clamp(48px,6vw,80px);background:var(--night);color:var(--cream)}
.page-hero::before{content:"";position:absolute;top:-190px;right:-270px;width:560px;height:560px;border:2px solid rgba(254,223,86,.26);border-radius:50%;pointer-events:none}
.page-hero .wrap{position:relative;z-index:1}
.crumb{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;font-size:.875rem;font-weight:600;text-decoration:none;color:rgba(248,243,232,.65);transition:color .2s}
.crumb:hover{color:var(--cream)}
.page-hero h1{max-width:20em;font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.05;letter-spacing:-.02em}
.page-hero .lead{max-width:40em;margin-top:18px;font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.6;color:rgba(248,243,232,.82)}
.prose{max-width:52em;font-size:1.0625rem;line-height:1.7;color:var(--muted)}
.prose + .prose{margin-top:16px}
.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.split img{width:100%;max-width:320px;justify-self:center;filter:drop-shadow(0 26px 30px rgba(45,16,49,.3))}

/* ---------- /protsess.html: шаги ---------- */
.timeline{position:relative;max-width:44em;margin-top:8px}
.timeline::before{content:"";position:absolute;left:23px;top:12px;bottom:12px;width:2px;background:var(--line)}
.t-step{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 22px;padding-bottom:40px}
.t-step:last-child{padding-bottom:0}
.t-num{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--c);box-shadow:0 0 0 6px var(--cream);font:800 1.125rem/1 var(--display);color:var(--night)}
.t-num--light{color:var(--cream)}
.t-step h3{font-size:1.375rem;margin-bottom:8px}
.t-step p{font-size:1.0625rem;line-height:1.65;color:var(--muted);max-width:34em}
.t-need{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:8px 16px;border-radius:999px;background:var(--sand);font-size:.875rem;font-weight:600}

/* ---------- timeline-grid: те же шаги плиткой, а не длинным столбиком ---------- */
.timeline.timeline-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;max-width:none}
.timeline.timeline-grid::before{display:none}
.timeline.timeline-grid .t-step{grid-template-columns:44px minmax(0,1fr);gap:4px 16px;align-content:start;padding:22px 20px 24px;border-radius:22px;background:color-mix(in srgb,var(--c) 16%,var(--paper));box-shadow:0 16px 30px -22px rgba(45,16,49,.4)}
.timeline.timeline-grid .t-num{width:44px;height:44px;font-size:1rem;box-shadow:none}
.timeline.timeline-grid .t-step p{max-width:none}
.timeline.timeline-grid .t-need{margin-top:10px}
.timeline.timeline-grid .t-dur{margin-right:6px}

/* ---------- /raboty.html: кейсы ---------- */

/* ---------- общее для новых блоков ---------- */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tags li{padding:7px 14px;border-radius:999px;background:color-mix(in srgb,var(--fg,var(--night)) 10%,transparent);font-size:.875rem;font-weight:500}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ic{display:block;width:24px;height:24px}
.ic-s{display:inline-block;flex:none;width:14px;height:14px;vertical-align:-1px}
.checks{display:grid;gap:10px}
.checks li{display:flex;align-items:flex-start;gap:12px;line-height:1.45}
.ic-c{flex:none;width:24px;height:24px;margin-top:-1px;padding:5px;border-radius:50%;background:var(--night);color:var(--butter)}
.center-h{max-width:46em;margin:0 auto clamp(32px,4vw,48px);text-align:center}
.center-h h2{font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:1;letter-spacing:-.035em}
.center-h p{margin-top:16px;font-size:1.0625rem;color:var(--muted)}
.center-h2{margin-bottom:clamp(28px,4vw,44px);text-align:center;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.05;letter-spacing:-.03em}
.center-sub{max-width:36em;margin:calc(clamp(28px,4vw,44px) * -1 + 14px) auto clamp(28px,4vw,44px);text-align:center;font-size:1.0625rem;color:var(--muted)}
.center-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(32px,4vw,48px)}
.center-note{max-width:42em;margin:36px auto 0;text-align:center;color:var(--muted)}
.sec-h-sm h2{max-width:18em;font-size:clamp(2rem,4.4vw,3.6rem);line-height:1;letter-spacing:-.03em}
.sec-h-sm p a{color:var(--berry);font-weight:600}
.btn-soft{--shadow:#E3D2B0;background:var(--cream);color:var(--night)}
.btn-soft:hover{background:var(--sand);color:var(--night)}
.banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:clamp(28px,4vw,44px) clamp(28px,4vw,48px);border-radius:var(--r);background:var(--teal);color:var(--cream)}
.banner h2{max-width:18em;font-size:clamp(1.6rem,2.6vw,2.3rem)}
.banner-sand{background:var(--sand);color:var(--night)}
.banner-plum{background:var(--plum)}
.kind-chip{display:inline-flex;align-self:flex-start;margin-bottom:6px;padding:6px 10px;border-radius:999px;background:var(--sand);font:700 .6875rem/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--night)}
.kind-chip.is-real{background:var(--night);color:var(--butter)}
.lead-interest{margin:-6px 0 18px;padding:10px 14px;border-radius:12px;background:var(--paper);font-size:.9375rem;font-weight:600}
.lead-interest b{color:var(--berry)}

/* ---------- карусель примеров: стрелки по бокам, прокрутка со снапом ---------- */
.carousel{position:relative}
.car-track{display:flex;gap:40px;margin:0 -8px;padding:8px 8px 18px;scroll-padding-inline:8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none}
.car-track::-webkit-scrollbar{display:none}
.car-item{flex:0 0 calc((100% - 80px) / 3);min-width:0;scroll-snap-align:start}
.k-note[hidden]{display:none}
/* shop, catalog, cabinet: a few light words on the left, the examples beside them — on the service page and on the home works tabs */
.ind-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,.7fr);gap:clamp(28px,4vw,56px);align-items:center}
.ind-grid .ind-copy{order:2}
.ind-copy h2{font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.08;letter-spacing:-.02em}
.ind-lead{max-width:30em;margin:14px 0 26px;font-size:1.0625rem;line-height:1.6;color:var(--muted)}
.ind-demos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin:0;padding:0;list-style:none}
.ind-demo .tpl-cap{display:none}
.ind-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:700;color:var(--night);text-decoration:underline;text-underline-offset:4px}
.k-note{align-self:center;flex-basis:calc((100% - 80px) / 3)}
.k-note-in{padding:8px 0 8px clamp(4px,1vw,16px)}
.k-note-h{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.1;letter-spacing:-.02em}
.k-note-in .ind-lead{margin:12px 0 16px;font-size:1rem}
.k-note-in .ind-link{margin-top:0}
@media (max-width:960px){.ind-grid,.ind-demos{grid-template-columns:1fr}.ind-grid .ind-copy{order:0}}
.car-btn{position:absolute;top:calc(50% - 70px);z-index:2;display:grid;place-items:center;width:54px;height:54px;border:0;border-radius:50%;background:var(--paper);color:var(--night);box-shadow:0 12px 26px -12px rgba(45,16,49,.55),inset 0 0 0 2px var(--line);cursor:pointer;transition:opacity .2s,transform .2s var(--ease),background .2s}
.car-btn:hover{background:var(--butter);transform:scale(1.06)}
.car-btn[disabled]{opacity:0;pointer-events:none}
.car-prev{left:-27px}
.car-next{right:-27px}

/* ---------- макеты шаблонов: мини-сайты на HTML/CSS, размеры от ширины листа ---------- */
.mock{display:block;background:#fff;color:#2b2230;font:400 3.2cqw/1.3 var(--text);text-align:left;letter-spacing:0}
.mock :where(span,b,i,em,small){display:block;font-style:normal}
.mk-nav{display:flex;align-items:center;gap:1em;padding:.9em 1.2em;background:#fff}
.mk-logo{display:flex;align-items:center;gap:.35em;font:800 1.05em/1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.mk-logo::before{content:"";width:.7em;height:.7em;border-radius:50%;background:var(--ma)}
.mk-links{display:flex;gap:.8em;margin-left:auto}
.mk-links i{width:2.2em;height:.38em;border-radius:1em;background:#2b2230;opacity:.22}
.mk-btn{align-self:flex-start;padding:.75em 1.2em;border-radius:2em;background:var(--ma);color:var(--mat);font:700 .72em/1 var(--text);white-space:nowrap}
.mk-sm{padding:.6em .9em;font-size:.6em}
.mk-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:1em;align-items:center;padding:1.8em 1.2em;background:var(--mh);color:var(--mt)}
.mk-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:.7em}
.mk-h1{font:800 1.6em/1.05 var(--display);letter-spacing:-.02em}
.mk-sub{font-size:.75em;opacity:.8}
.mk-pic{position:relative;aspect-ratio:1;overflow:hidden;border-radius:.9em;background:var(--mp)}
.mk-pic i{position:absolute;border-radius:50%}
.mk-pic i:nth-child(1){top:-10%;right:-12%;width:62%;height:62%;background:var(--ma)}
.mk-pic i:nth-child(2){left:12%;bottom:16%;width:44%;height:44%;background:#fff;opacity:.6}
.mk-pic i:nth-child(3){left:10%;bottom:-8%;width:80%;height:24%;border-radius:.6em;background:var(--mh);opacity:.55}
.mk-sec{padding:1.4em 1.2em;background:#fff}
.mk-soft{background:var(--ms)}
.mk-h2{margin-bottom:.8em;font:800 1.1em/1.1 var(--display);letter-spacing:-.01em}
.mk-grid{display:grid;gap:.6em}
.mk-g2{grid-template-columns:1fr 1fr}
.mk-g3{grid-template-columns:repeat(3,1fr)}
.mk-card{display:flex;flex-direction:column;gap:.45em;padding:.8em;border-radius:.6em;background:var(--ms)}
.mk-card b{font-size:.68em;line-height:1.2}
.mk-ic{width:1.6em;height:1.6em;border-radius:50%;background:var(--ma)}
.mk-line{height:.34em;border-radius:1em;background:currentColor;opacity:.16}
.mk-line.mk-s{width:60%}
.mk-qt{display:flex;flex:1;flex-direction:column;gap:.45em}
.mk-qt b{margin-top:.2em;font-size:.66em}
.mk-foot{display:flex;align-items:center;justify-content:space-between;padding:1em 1.2em;background:#221a26;color:#fff;font-size:.62em}
.mk-tile{display:flex;flex-direction:column;gap:.45em;padding:.6em;border-radius:.6em;background:var(--ms)}
.mk-tile b{font-size:.72em}
.mk-thumb{aspect-ratio:16/10;border-radius:.5em;background:linear-gradient(135deg,var(--mp),var(--ma))}
.mk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;padding:1.1em 1.2em;background:var(--mh);color:var(--mt);text-align:center}
.mk-stats b{font:800 1.25em/1 var(--display)}
.mk-stats small{margin-top:.3em;font-size:.58em;opacity:.8}
.mk-gallery .mk-thumb{aspect-ratio:1}
.mk-contact{display:grid;grid-template-columns:1.2fr 1fr;gap:.8em}
.mk-map{position:relative;aspect-ratio:4/3;border-radius:.6em;background:repeating-linear-gradient(0deg,transparent 0 1.1em,rgba(0,0,0,.07) 1.1em 1.2em),repeating-linear-gradient(90deg,transparent 0 1.1em,rgba(0,0,0,.07) 1.1em 1.2em),#fff}
.mk-map::after{content:"";position:absolute;left:46%;top:40%;width:1.1em;height:1.1em;border:.3em solid #fff;border-radius:50%;background:var(--ma);box-shadow:0 .2em .5em rgba(0,0,0,.3)}
.mock-phone{font-size:6.4cqw}
.mock-phone .mk-hero{grid-template-columns:1fr;padding:1.5em 1em}
.mock-phone .mk-card b{font-size:.75em}
.mk-burger{display:flex;flex-direction:column;gap:.25em;margin-left:auto}
.mk-burger i{width:1.2em;height:.18em;border-radius:1em;background:#2b2230}

/* ---------- главная: запуск и поддержка ---------- */
.launch{background:var(--mist)}
.launch-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,5vw,80px);align-items:center}
.launch h2{font-size:clamp(2.2rem,4.4vw,4rem);line-height:1.08;letter-spacing:-.03em}
.launch .u{padding:0 .04em;background:linear-gradient(var(--butter),var(--butter)) left 90%/100% .3em no-repeat}
.launch-lead{max-width:34em;margin:20px 0 30px;font-size:1.125rem;color:rgba(45,16,49,.8)}
.launch-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:34px}
.launch-cols h3{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:1.45rem}
.launch-cols h3 em{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--night);color:var(--butter);font:700 .95rem/1 var(--display);font-style:normal}
.launch .btn-ghost{color:var(--night)}
.devices{position:relative;aspect-ratio:10/9}
.dev-laptop{position:absolute;top:8%;left:0;width:88%}
.dev-screen{position:relative;display:block;overflow:hidden;background:#fff;container-type:inline-size}
.dev-laptop .dev-screen{aspect-ratio:16/10.5;border:10px solid #221a26;border-bottom-width:14px;border-radius:16px 16px 0 0}
.dev-base{display:block;height:14px;margin:0 -7%;border-radius:0 0 16px 16px;background:linear-gradient(#4a3b52,#221a26);box-shadow:0 30px 40px -24px rgba(45,16,49,.6)}
.dev-phone{position:absolute;right:0;bottom:2%;width:31%}
.dev-phone .dev-screen{aspect-ratio:9/18.5;border:7px solid #221a26;border-radius:28px;box-shadow:0 30px 40px -20px rgba(45,16,49,.6)}
.dev-screen .mock{position:absolute;top:0;left:0;width:100%}
.dev-note{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:12px 16px 12px 12px;border-radius:18px;background:var(--paper);box-shadow:0 18px 30px -16px rgba(45,16,49,.5);font-size:.8125rem;line-height:1.3}
.dev-note .ic{flex:none;width:36px;height:36px;padding:8px;border-radius:50%;background:var(--butter);color:var(--night)}
.dev-note b{display:block;font-size:.875rem}
.dev-note small{color:var(--muted)}
.dn1{left:-3%;bottom:6%}
.dn2{top:0;right:2%}
.dn2 .ic{background:#25D366;color:#07341b}
@media (prefers-reduced-motion:no-preference){
  .dev-screen .mock{animation:dev-scroll 16s ease-in-out 1s infinite alternate}
  .dev-phone .dev-screen .mock{animation-duration:12s}
  .dev-note{animation:bob 5s ease-in-out infinite}
  .dn2{animation-delay:-2.5s}
}
@keyframes dev-scroll{0%,12%{top:0;transform:none}88%,100%{top:100%;transform:translateY(-100%)}}
@keyframes bob{50%{transform:translateY(-8px)}}

/* ---------- главная: для клиентов ---------- */
.clients{background:var(--paper)}
.clients-box{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 48px;padding:clamp(28px,4vw,52px);border-radius:var(--r);background:color-mix(in srgb,var(--sand) 55%,var(--cream))}
.cl-col h3{margin-bottom:16px;font-size:1.3rem}
.cl-col ul{display:grid;gap:11px}
.cl-col a{display:inline-flex;gap:10px;font-weight:500;line-height:1.4;text-decoration:none;transition:color .2s}
.cl-col a::before{content:"→";flex:none;font-weight:700;color:var(--berry);transition:transform .2s var(--ease)}
.cl-col a:hover{color:var(--berry)}
.cl-col a:hover::before{transform:translateX(3px)}

/* ---------- страницы услуг: второй хедер с видами сайтов ---------- */
html:has(.svc-tabs){scroll-padding-top:calc(var(--header) + 72px)}
.svc-tabs{position:sticky;top:var(--header);z-index:65;background:var(--paper);box-shadow:0 1px 0 var(--line),0 10px 24px -20px rgba(45,16,49,.6)}
.svc-tabs-in{display:flex;align-items:center;gap:18px}
.svc-tabs-label{flex:none;font-size:.9375rem;font-weight:600;color:var(--berry)}
.svc-tabs-list{display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.svc-tabs-list::-webkit-scrollbar{display:none}
.svc-tabs-list a{position:relative;display:inline-flex;flex:none;align-items:center;gap:8px;padding:20px 12px;font-size:.9375rem;font-weight:600;white-space:nowrap;text-decoration:none;color:rgba(45,16,49,.72);transition:color .2s}
.svc-tabs-list a::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--berry);transform:scaleX(0);transition:transform .3s var(--ease)}
.svc-tabs-list a:hover{color:var(--night)}
.svc-tabs-list a:hover::after{transform:scaleX(.4)}
.svc-tabs-list a[aria-current]{color:var(--night)}
.svc-tabs-list a[aria-current]::after{transform:scaleX(1)}
.tab-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c,var(--night));box-shadow:inset 0 0 0 1px rgba(45,16,49,.18)}
.tab-hit{position:absolute;top:9px;right:-3px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--coral);color:#fff;font-size:.5625rem;line-height:1}

/* ---------- страницы услуг: первый экран и предложение ---------- */
.svc-hero{position:relative;overflow:hidden;padding:clamp(28px,4vw,48px) 0 clamp(44px,5vw,72px);background:var(--bg);color:var(--fg)}
.svc-hero::before{content:"";position:absolute;top:-220px;right:-200px;width:520px;height:520px;border:2px solid color-mix(in srgb,var(--fg) 14%,transparent);border-radius:50%;pointer-events:none}
.svc-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 56px;align-items:center}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;font-size:.875rem;font-weight:600}
.crumbs a{text-decoration:none;opacity:.7;transition:opacity .2s}
.crumbs a:hover{opacity:1}
.crumbs span{opacity:.5}
.crumbs span[aria-current]{opacity:.9}
.svc-hero h1{max-width:12em;font-size:clamp(2.4rem,5.6vw,5rem);line-height:1;letter-spacing:-.035em}
.svc-en{display:inline-block;margin-left:.15em;font:600 .36em/1 var(--text);letter-spacing:0;vertical-align:1.3em;color:var(--berry)}
.svc-hero.is-dark .svc-en{color:var(--butter)}
.svc-tagline{margin-top:16px;font:500 clamp(1.25rem,2.2vw,1.9rem)/1.25 var(--display);opacity:.85}
.svc-hero-art{width:clamp(220px,26vw,340px);filter:drop-shadow(0 22px 22px rgba(45,16,49,.3));transform:rotate(-3deg)}
.offer{background:var(--paper)}
.offer-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5vw,88px);align-items:start}
.offer-top{display:flex;align-items:center;gap:clamp(22px,3vw,40px)}
.offer-art{display:grid;flex:none;place-items:center;width:clamp(130px,14vw,190px);aspect-ratio:1;border-radius:50%;background:var(--c);color:var(--night)}
.offer-art.is-dark{color:var(--cream)}
.offer-art .ic{width:46%;height:46%}
.offer-facts{display:grid;gap:18px;margin:0}
.offer-facts dt{margin-bottom:6px;font:600 .75rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.offer-facts dd{margin:0;font-size:1.0625rem;font-weight:600}
.offer-facts .offer-price{font:800 clamp(2rem,3.4vw,3rem)/1 var(--display);letter-spacing:-.03em;white-space:nowrap}
.offer-price small{font-size:.42em;letter-spacing:.04em}
.offer-actions{margin-top:clamp(28px,4vw,44px)}
.offer-lead{margin-bottom:24px;font:700 1.1875rem/1.5 var(--text)}
.offer-note{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);line-height:1.6;color:var(--muted)}

/* ---------- страницы услуг: из чего состоит и почему так ---------- */
.anatomy{background:var(--cream)}
.anat-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.wire{position:sticky;top:calc(var(--header) + 96px);padding:14px 14px 18px;border-radius:18px;background:var(--paper);box-shadow:0 30px 50px -30px rgba(45,16,49,.45);transform:rotate(-1.2deg)}
.wire-bar{display:flex;gap:6px;margin-bottom:12px}
.wire-bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.wire ol{display:grid;gap:8px}
.wire li{display:flex;align-items:center;gap:10px;height:var(--h);padding:0 12px;border-radius:10px;background:var(--c);font-size:.875rem;font-weight:600}
.wire em{display:grid;flex:none;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--night);color:var(--cream);font:700 .75rem/1 var(--display);font-style:normal}
.anat-list{display:grid;gap:12px}
.anat-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding:22px 24px;border-radius:22px;background:var(--paper)}
.anat-list em{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--butter);font:800 1.1rem/1 var(--display);font-style:normal}
.anat-list h3{margin:8px 0 6px;font-size:1.3rem}
.anat-list p{line-height:1.6;color:var(--muted)}

/* ---------- кому подходит ---------- */
.fit{padding-top:0;background:var(--cream)}
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fit-card{padding:clamp(26px,3.5vw,42px);border-radius:var(--r)}
.fit-yes{background:var(--mist)}
.fit-no{background:var(--sand)}
.fit-card h2{margin-bottom:22px;font-size:clamp(1.6rem,2.6vw,2.2rem)}
.fit-alt{display:grid;gap:14px}
.fit-alt li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 20px;padding-bottom:14px;border-bottom:1px dashed #D9C6A2}
.fit-alt li:last-child{padding-bottom:0;border-bottom:0}
.fit-alt a{display:inline-flex;align-items:center;gap:6px;font-weight:700;white-space:nowrap;text-decoration:none;color:var(--berry)}
.fit-alt a:hover .ic-s{transform:translateX(3px)}
.fit-alt .ic-s{transition:transform .2s var(--ease)}

/* ---------- на любой вкус и цвет ---------- */
.taste{background:color-mix(in srgb,var(--sand) 40%,var(--cream))}
.taste .center-h{margin-bottom:28px}
.taste-list{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:16px 72px;margin-bottom:48px}
.taste-list li{display:flex;align-items:center;gap:12px;font-size:1.0625rem;font-weight:600}
.taste-list .ic-c{background:var(--berry);color:#fff}
.chameleon{position:relative;display:grid;gap:10px;max-width:660px;margin:0 auto;padding:16px 16px 20px;border-radius:20px;background:var(--paper);box-shadow:0 40px 60px -34px rgba(45,16,49,.5)}
.cham-bar{display:flex;gap:6px}
.cham-bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.cham-b{display:flex;flex-direction:column;justify-content:center;gap:8px;height:64px;padding:0 20px;border-radius:12px;background:var(--peach)}
.cham-b i{width:46%;height:10px;border-radius:5px;background:rgba(45,16,49,.55)}
.cham-b i + i{width:30%;height:7px;background:rgba(45,16,49,.25)}
.cb1{height:104px}
.cham-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cham-row .cham-b{height:78px}
.cb5{height:52px}
.cham-new{position:absolute;right:-16px;bottom:-18px;padding:11px 18px;border-radius:999px;background:var(--night);color:var(--butter);font-size:.9375rem;font-weight:700;transform:rotate(-4deg);box-shadow:0 14px 24px -12px rgba(45,16,49,.6)}
@media (prefers-reduced-motion:no-preference){
  .cham-b{animation:cham 10s ease-in-out infinite}
  .cb2{animation-delay:-2s}
  .cb3{animation-delay:-4s}
  .cb4{animation-delay:-6s}
  .cb5{animation-delay:-8s}
  .cham-row{animation:swap 10s ease-in-out infinite}
  .cham-new{animation:bob 4s ease-in-out infinite}
}
@keyframes cham{0%,18%{background:var(--peach)}25%,43%{background:var(--mist)}50%,68%{background:var(--rose)}75%,93%{background:var(--butter)}100%{background:var(--peach)}}
@keyframes swap{0%,40%{grid-template-columns:1fr 1fr 1fr}50%,90%{grid-template-columns:1.6fr .7fr .7fr}100%{grid-template-columns:1fr 1fr 1fr}}

/* ---------- в стоимость входит ---------- */
.incl-sec{background:var(--paper)}
.inc-icons{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 16px}
.inc-icons li{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;font-weight:500;line-height:1.35}
.inc-ic{display:grid;place-items:center;width:clamp(84px,8vw,108px);aspect-ratio:1;border-radius:50%;background:var(--cream);color:var(--berry)}
.inc-ic .ic{width:42%;height:42%}

/* ---------- выберите тип сайта ---------- */
.types-sec{background:var(--cream)}
.types-main{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;max-width:1080px;margin:0 auto}
.type-card{position:relative;display:flex;flex-direction:column;align-items:center;padding:30px 24px 26px;border-radius:20px;background:#fff;text-align:center;box-shadow:0 18px 34px -24px rgba(45,16,49,.45);transition:transform .3s var(--ease),box-shadow .3s}
.type-card:hover{transform:translateY(-6px)}
.type-card h3{font-size:1.5rem}
.type-rule{width:30px;height:3px;margin:12px 0 20px;border-radius:3px;background:var(--c)}
.type-icon{display:grid;flex:none;place-items:center;width:88px;height:88px;border-radius:50%;background:color-mix(in srgb,var(--c) 50%,white);color:var(--night)}
.type-icon .ic{width:46%;height:46%}
.type-meta{margin:18px 0 10px;font-size:.9375rem;line-height:1.6;color:var(--muted)}
.type-price{margin-bottom:22px;font:800 2.1rem/1 var(--display);letter-spacing:-.02em}
.type-price small{font-size:.5em;letter-spacing:.04em}
.type-more{display:flex;align-items:center;justify-content:center;width:100%;height:50px;margin-top:auto;border-radius:999px;background:var(--cream);box-shadow:inset 0 0 0 2px var(--line);font-weight:700;text-decoration:none;color:var(--berry);transition:background .2s,color .2s,box-shadow .2s}
a.type-more::after{content:"";position:absolute;inset:0;border-radius:20px}
.type-card:hover .type-more{background:var(--butter);color:var(--night);box-shadow:none}
.type-more.is-here{background:var(--night);color:var(--cream);box-shadow:none}
.type-card.is-current{box-shadow:0 0 0 3px var(--c),0 18px 34px -24px rgba(45,16,49,.45)}
.type-card.is-current:hover{transform:none}
.type-card.is-hit{box-shadow:0 0 0 2px var(--berry),0 12px 0 -5px #FFE3CB,0 22px 0 -10px #FFD2AE,0 34px 44px -28px rgba(45,16,49,.5)}
.type-badge{position:absolute;top:13px;right:15px;font:800 .6875rem/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--berry)}
.types-extra{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:1080px;margin:34px auto 0}
.type-mini{display:flex;align-items:center;gap:14px;height:100%;padding:14px 18px;border-radius:18px;background:#fff;text-decoration:none;color:var(--night);box-shadow:inset 0 0 0 2px var(--line);transition:box-shadow .2s,transform .2s var(--ease)}
a.type-mini:hover{box-shadow:inset 0 0 0 2px var(--c);transform:translateY(-2px)}
.type-mini .type-icon{width:50px;height:50px}
.type-mini b{display:block;font-weight:700;line-height:1.25}
.type-mini small{display:block;margin-top:3px;font-size:.8125rem;color:var(--muted)}
.type-mini > .ic-s{margin-left:auto;color:var(--berry)}
.type-mini.is-current{background:color-mix(in srgb,var(--c) 16%,white);box-shadow:inset 0 0 0 2px var(--c)}

/* ---------- /uslugi: что выбрать ---------- */
.choose{background:var(--cream)}
.chooser{display:grid;gap:10px}
.chooser a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:center;padding:18px 22px;border-radius:18px;background:var(--paper);text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s}
.chooser a:hover{transform:translateX(4px);box-shadow:inset 5px 0 0 var(--c)}
.ch-q{font-size:1.0625rem}
.ch-a{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--berry)}

/* ---------- /shablony: работы и шаблоны ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.f-chip{height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 2px var(--line);font:600 .9375rem/1 var(--text);color:var(--night);cursor:pointer;transition:background .2s,box-shadow .2s}
.f-chip:hover{box-shadow:inset 0 0 0 2px var(--night)}
.f-chip[aria-pressed="true"]{background:var(--night);color:var(--cream);box-shadow:none}
.tpl-sec{background:var(--cream)}
.tpl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:52px 56px}
.tpl-item[hidden]{display:none}
.tpl-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:52px;padding:22px 26px;border:2px dashed var(--peach);border-radius:22px;background:var(--paper)}
.tpl-note p{max-width:46em;line-height:1.6}

/* ---------- /raboty: кейсы проще, скрин в окне браузера ---------- */
.cases{display:grid;gap:clamp(64px,8vw,112px)}
.case2-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin-bottom:26px}
.case2-head h2{margin:8px 0 4px;font-size:clamp(2rem,4vw,3.4rem)}
.case-kind{font-weight:500;color:var(--muted)}
.case2-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,60px);align-items:start}
.browser{display:block;overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 40px 60px -36px rgba(45,16,49,.5)}
.browser-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--line)}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:#CDB995}
.browser-bar b{margin-left:12px;padding:4px 14px;border-radius:999px;background:var(--paper);font-size:.8125rem;font-weight:500}
.browser-view{position:relative;display:block;height:clamp(340px,42vw,560px);overflow:hidden}
.browser-view img{position:absolute;top:0;left:0;width:100%;height:auto;transition:top 1s var(--ease),transform 1s var(--ease)}
.browser:hover .browser-view img{top:100%;transform:translateY(-100%);transition:top 10s linear,transform 10s linear}
.case2-facts{display:grid;gap:22px;margin:0}
.case2-facts dt{margin-bottom:8px;font:700 .75rem/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--berry)}
.case2-facts dd{margin:0;line-height:1.6;color:var(--muted)}
.case2-facts .tags{margin-top:0}

/* ---------- /podderzhka: запуск, админка, домен ---------- */
.zapusk{background:var(--cream)}
.launch-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.launch-step{display:flex;gap:18px;padding:22px;border-radius:22px;background:var(--paper)}
.launch-step .inc-ic{flex:none;align-self:flex-start;width:56px;height:56px;background:var(--mist);color:var(--teal)}
.launch-step h3{display:flex;align-items:baseline;gap:8px;margin:4px 0 6px;font-size:1.2rem}
.launch-step h3 em{font:800 1rem/1 var(--display);font-style:normal;color:var(--berry)}
.launch-step p{font-size:.9375rem;line-height:1.55;color:var(--muted)}
.howto{background:var(--paper)}
.h-md{margin-bottom:16px;font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.05;letter-spacing:-.02em}
.num-list{display:grid;gap:16px;margin:24px 0;counter-reset:n}
.num-list li{position:relative;padding-left:52px;counter-increment:n}
.num-list li::before{content:counter(n);position:absolute;left:0;top:0;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--butter);font:800 1rem/1 var(--display)}
.num-list b{display:block;margin-bottom:2px;font-weight:700}
.num-list span{line-height:1.55;color:var(--muted)}
.admin-demo{display:block;justify-self:center;width:100%;max-width:520px;overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 40px 60px -34px rgba(45,16,49,.5);transform:rotate(1.2deg)}
.ad-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--line)}
.ad-bar i{width:10px;height:10px;border-radius:50%;background:#CDB995}
.ad-bar b{margin-left:12px;padding:4px 14px;border-radius:999px;background:var(--paper);font-size:.8125rem;font-weight:500}
.ad-body{display:grid;grid-template-columns:60px 1fr}
.ad-side{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 0;background:var(--night)}
.ad-side i{width:26px;height:26px;border-radius:8px;background:rgba(248,243,232,.18)}
.ad-side i.on{background:var(--butter)}
.ad-form{display:flex;flex-direction:column;gap:6px;padding:22px}
.ad-form small{margin-top:6px;font-size:.75rem;font-weight:600;color:var(--muted)}
.ad-input{padding:11px 13px;border-radius:10px;box-shadow:inset 0 0 0 2px var(--lilac-line);font-size:.9375rem}
.ad-focus{box-shadow:inset 0 0 0 2px var(--berry)}
.ad-focus::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--berry);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.ad-photos{display:flex;gap:8px}
.ad-photos i{width:70px;height:52px;border-radius:8px;background:linear-gradient(135deg,var(--peach),var(--rose))}
.ad-photos i:nth-child(2){background:linear-gradient(135deg,var(--mist),var(--teal))}
.ad-photos i:nth-child(3){background:linear-gradient(135deg,var(--sand),var(--butter))}
.ad-btn{align-self:flex-start;margin-top:14px;padding:11px 20px;border-radius:999px;background:var(--teal);font-size:.875rem;font-weight:700;color:#fff}
.domen{background:var(--cream)}
.explain-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.explain-card{padding:28px;border-radius:22px;background:var(--paper)}
.explain-card .ic{width:42px;height:42px;margin-bottom:16px;color:var(--berry)}
.explain-card h3{margin-bottom:8px;font-size:1.35rem}
.explain-card p{line-height:1.6;color:var(--muted)}
.explain-card p b{color:var(--night)}

/* ---------- 404 ---------- */
.nf{display:flex;align-items:center;min-height:62vh}
.nf-code{margin-bottom:10px;font:800 clamp(6rem,18vw,12rem)/.9 var(--display);letter-spacing:-.05em;color:var(--butter)}
.nf-actions{margin-top:30px}

/* ---------- новые блоки: адаптив ---------- */
@media (max-width:1279px){
  .inc-icons{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1023px){
  .launch-grid,.offer-in,.anat-grid,.case2-body{grid-template-columns:1fr}
  .devices{max-width:560px;width:100%;justify-self:center}
  .wire{position:relative;top:auto;max-width:420px;transform:none}
  .car-item,.k-note{flex-basis:calc((100% - 40px) / 2)}
  .car-track:has(.k-note:not([hidden])){flex-direction:column;overflow:visible;gap:16px}
  .car-track:has(.k-note:not([hidden])) .car-item{flex-basis:auto}
  .car-track:has(.k-note:not([hidden])) .tpl-card{max-width:520px}
  .car-track:has(.k-note:not([hidden])) .k-note{order:-1}
  .k-note-in{padding-left:0}
  .tpl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .types-extra{grid-template-columns:1fr}
  .car-prev{left:-10px}
  .car-next{right:-10px}
}
@media (max-width:899px){
  .types-main{grid-template-columns:1fr;max-width:460px}
  .type-card.is-hit{margin-bottom:20px}
}
@media (max-width:767px){
  .svc-tabs-label{display:none}
  .svc-tabs-list{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .svc-tabs-list a{padding:16px 10px}
  .fit-grid,.explain-grid,.clients-box{grid-template-columns:1fr}
  .car-item{flex-basis:88%}
  .car-track{gap:24px}
  .car-btn{top:calc(50% - 90px);width:44px;height:44px}
  .car-prev{left:-6px}
  .car-next{right:-6px}
  .svc-hero-in{grid-template-columns:1fr}
  .svc-hero-art{display:none}
}
@media (max-width:599px){
  .launch-cols,.taste-list{grid-template-columns:1fr}
  .taste-list{justify-content:start}
  .inc-icons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tpl-grid{grid-template-columns:1fr;max-width:380px}
  .ready-steps{grid-template-columns:1fr}
  .tpl-solo,.tpl-solo.is-wide{grid-column:auto}
  .tpl-solo.is-wide .solo-list{grid-template-columns:1fr}
  .solo-row{grid-template-columns:1fr}
  [data-view] .tpl-card[data-kind]{grid-column:auto}
  .menu-more ul{grid-template-columns:1fr}
  .est-note{grid-template-columns:1fr}
  .est-note-acts .btn{width:100%}
  .menu-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"what what" "price term";gap:16px 12px;padding:22px 20px}
  .menu-no,.menu-go{display:none}
  .menu-what{grid-area:what}
  .menu-price{grid-area:price}
  .menu-term{grid-area:term;justify-self:end}
  .menu-what small{font-size:.9375rem}
  .ready-foot .btn{width:100%}
  .offer-top{flex-direction:column;align-items:flex-start}
  .chooser a{grid-template-columns:1fr}
  .dev-note{padding:8px 12px 8px 8px;font-size:.75rem}
  .dev-note .ic{width:30px;height:30px;padding:6px}
  .dn2{right:0}
  .cham-new{right:-6px}
  .anat-list li{grid-template-columns:1fr;gap:10px;padding:20px}
}

/* ---------- первый экран: кнопка-хук «Рассчитать стоимость» и «Посмотреть, что мы делаем» ---------- */
.btn-lg{height:64px;padding:0 34px;font-size:1.0625rem}
.btn .ic-s{width:14px;height:14px;transition:transform .25s var(--ease)}
.btn:hover .ic-s{transform:translateX(4px)}
.btn-hook{--shadow:#9C3350;position:relative;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%) -150% 0/60% 100% no-repeat,linear-gradient(100deg,#FFA07F 0%,#F2708A 55%,#E4579A 100%);color:var(--night);font-weight:700}
.btn-hook:hover{background:linear-gradient(100deg,#FFB091 0%,#F7839A 55%,#EC6BA8 100%);color:var(--night)}
.btn-hook svg{width:18px;height:18px}
.btn-hook:hover svg{transform:rotate(-8deg) scale(1.1)}
/* три кнопки первого экрана подпрыгивают по очереди, потом пауза — и снова (цикл 5 с);
   начинают только после того, как заголовок раскрасит все виды сайтов (последний .hl заканчивает к ~2,05 с) */
@media (prefers-reduced-motion:no-preference){
  .hero-cta .btn{animation:hook-move 5s ease-in-out 2.3s infinite}
  .hero-cta .btn:nth-child(2){animation-delay:3.2s}
  .hero-cta .btn-hook{animation:hook-move 5s ease-in-out 4.1s infinite,hook-shine 5s ease-in-out 4.1s infinite,hook-glow 5s ease-out 4.1s infinite}
  .hero-cta .btn:hover,.hero-cta .btn:focus-visible{animation-play-state:paused}
}
@keyframes hook-move{0%,18%,100%{translate:0 0;rotate:0deg;scale:1}4%{translate:0 -6px;rotate:-3deg;scale:1.04}8%{translate:0 0;rotate:3deg;scale:1.04}12%{translate:0 -3px;rotate:-2deg;scale:1}}
@keyframes hook-shine{0%{background-position:-150% 0,0 0}20%,100%{background-position:250% 0,0 0}}
@keyframes hook-glow{0%{box-shadow:0 5px 0 var(--shadow),0 0 0 0 rgba(242,112,138,.6)}30%,100%{box-shadow:0 5px 0 var(--shadow),0 0 0 18px rgba(242,112,138,0)}}
.btn-see{--shadow:#B792BC;background:var(--lilac);color:var(--night);box-shadow:0 5px 0 var(--shadow)}
.btn-see:hover{background:#fff;color:var(--night);box-shadow:0 7px 0 var(--shadow)}
.btn-see:active{transform:translateY(3px);box-shadow:0 1px 0 var(--shadow)}
.btn-see:hover svg{transform:translateY(3px)}
.hero-row{grid-template-columns:minmax(0,1fr)}
.hero-lead{max-width:44em}


/* ---------- «шторки»: одна кнопка-хук ---------- */
/* блок 04: модули и услуги к сайту */
.addon-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--butter);color:var(--night)}
.addon-ic .ic{width:16px;height:16px}

/* ---------- плашка «Выберите шаблон по направлению» ---------- */

/* ---------- страницы услуг: заказ в начале и в конце ---------- */
.svc-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:28px}
.svc-hero-cta .btn-ghost .ic-s{width:18px;height:18px}
.svc-hero-meta{margin-top:14px;font-size:1.0625rem;opacity:.85}
.svc-hero-meta b{font-weight:700}
.svc-hero-or{font-weight:600;opacity:.75}
@media (max-width:600px){.svc-hero-cta{flex-direction:column;align-items:stretch;gap:6px}.svc-hero-cta .btn{justify-content:center}.svc-hero-or{text-align:center}}
/* «Почему не конструктор»: сравнение по строкам */
.nb-table{border-radius:var(--r);background:var(--paper);box-shadow:0 0 0 1px rgba(45,16,49,.08),0 30px 50px -40px rgba(45,16,49,.5);overflow:hidden}
.nb-head,.nb-row{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,1.2fr) minmax(0,1.2fr);gap:0 28px;align-items:center;padding:18px clamp(18px,3vw,32px)}
.nb-head{padding-top:22px;padding-bottom:14px;font:700 .8125rem/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--plum)}
.nb-head span:last-child{color:var(--berry)}
.nb-rows{margin:0;padding:0;list-style:none}
.nb-row{border-top:1px solid rgba(45,16,49,.08)}
.nb-row:nth-child(odd){background:rgba(45,16,49,.025)}
.nb-what{display:flex;align-items:center;gap:12px;font:700 1.125rem/1.2 var(--display);color:var(--night)}
.nb-what .ic{flex:none;width:40px;height:40px;padding:9px;border-radius:12px;background:var(--butter);color:var(--night)}
.nb-bad,.nb-good{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.nb-bad{color:rgba(45,16,49,.62)}
.nb-good{font-weight:600;color:var(--night)}
.nb-bad .ic-c,.nb-good .ic-c{flex:none;width:22px;height:22px;margin-top:1px;padding:5px;border-radius:50%}
.nb-bad .ic-c{background:rgba(233,108,124,.16);color:var(--rose)}
.nb-good .ic-c{background:var(--night);color:var(--butter)}
.nb-note{display:flex;gap:14px;align-items:flex-start;max-width:52em;margin-top:22px;padding:18px 22px;border-radius:18px;background:var(--sand);line-height:1.5}
.nb-note .ic{flex:none;width:24px;height:24px;margin-top:1px;color:var(--berry)}
@media (max-width:760px){
  .nb-head{display:none}
  .nb-row{grid-template-columns:1fr;gap:12px;padding:20px 18px}
}

/* пример магазина внутри блока «Только индивидуально» */
.order-sec{background:var(--cream)}
.order-cta{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px 56px;align-items:center;overflow:hidden;padding:clamp(30px,5vw,64px);border-radius:var(--r);background:var(--night);color:var(--cream)}
.order-cta::before{content:"";position:absolute;top:-180px;right:-140px;width:460px;height:460px;border-radius:50%;background:var(--c);opacity:.9}
.order-cta::after{content:"";position:absolute;bottom:-240px;left:30%;width:420px;height:420px;border:2px solid rgba(254,223,86,.25);border-radius:50%}
.order-cta > *{position:relative;z-index:1}
.order-kicker{font:700 .75rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--butter)}
.order-cta h2{margin:12px 0 14px;font-size:clamp(2.2rem,4.6vw,4rem);line-height:1;letter-spacing:-.03em}
.order-copy > p{max-width:32em;color:rgba(248,243,232,.8)}
.order-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.order-facts li{display:flex;flex-direction:column;gap:5px;padding:12px 18px;border-radius:16px;background:rgba(248,243,232,.08);font-size:.8125rem;color:rgba(248,243,232,.7)}
.order-facts b{font:700 1.25rem/1 var(--display);color:var(--cream);white-space:nowrap}
.order-facts small{font-size:.6em}
.order-actions{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,3vw,30px);border-radius:26px;background:var(--paper);color:var(--night);box-shadow:0 30px 50px -30px rgba(0,0,0,.6)}
.order-actions .btn{width:100%}
.order-phone{margin-top:4px;text-align:center;font-size:.9375rem;color:var(--muted);text-decoration:none}
.order-phone b{color:var(--night);white-space:nowrap}

/* ---------- калькулятор ---------- */
.estimate{background:radial-gradient(900px 520px at 88% 0%,#0A6D74 0%,transparent 70%),radial-gradient(700px 480px at 0% 100%,#003F46 0%,transparent 70%),var(--teal)}
.est{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:start}
.est-step + .est-step{margin-top:42px}
.est-step legend{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:18px;padding:0;font:700 1.45rem/1 var(--display)}
.est-step legend em{font:500 .875rem/1 var(--text);font-style:normal;opacity:.6}
.est-num{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--butter);color:var(--night);font-size:1.05rem}
.est-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.est-extras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.est-extras .est-extra:last-child:nth-child(odd){grid-column:1 / -1}
.est-opt{position:relative;display:block;cursor:pointer}
.est-opt input{position:absolute;opacity:0;pointer-events:none}
.est-face{position:relative;display:flex;align-items:center;gap:14px;height:100%;padding:14px 16px;border-radius:20px;background:rgba(248,243,232,.07);box-shadow:inset 0 0 0 1.5px rgba(248,243,232,.18);transition:background .2s,box-shadow .2s,transform .2s var(--ease),color .2s}
.est-type .est-face{padding:18px 20px}
.est-opt:hover .est-face{background:rgba(248,243,232,.12);box-shadow:inset 0 0 0 1.5px rgba(248,243,232,.5)}
.est-opt input:checked + .est-face{background:var(--paper);color:var(--night);box-shadow:0 14px 26px -14px rgba(0,0,0,.6),inset 0 0 0 2px var(--butter);transform:translateY(-2px)}
.est-opt input:focus-visible + .est-face{outline:3px solid var(--butter);outline-offset:3px}
.est-ic{display:grid;flex:none;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--c,var(--butter));color:var(--night)}
.est-ic.is-dark{color:var(--cream)}
.est-ic .ic{width:24px;height:24px}
.est-ic.sm{width:40px;height:40px;background:rgba(248,243,232,.14);color:var(--butter)}
.est-ic.sm .ic{width:19px;height:19px}
.est-opt input:checked + .est-face .est-ic.sm{background:var(--butter);color:var(--night)}
.est-txt{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0}
.est-txt b{font:700 1.15rem/1.15 var(--display)}
.est-txt small{font-size:.8125rem;opacity:.72}
.est-extra .est-txt b{font:600 .9375rem/1.25 var(--text)}
.est-add{flex:none;font-size:.875rem;font-style:normal;font-weight:700;color:var(--butter);white-space:nowrap}
.est-opt input:checked + .est-face .est-add{color:var(--berry)}
.est-tick{position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--butter);color:var(--night);box-shadow:0 0 0 3px var(--teal);transform:scale(0);transition:transform .25s var(--ease)}
.est-tick .ic{width:12px;height:12px}
.est-opt input:checked + .est-face .est-tick{transform:scale(1)}
.receipt-sub{margin-top:6px;font-size:.8125rem;color:var(--muted)}
.r-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.r-row .btn{padding:0 12px}

/* ---------- как это происходит ---------- */
.flow-card{padding:clamp(20px,3vw,40px);border-radius:var(--r);background:var(--paper);box-shadow:0 40px 60px -40px rgba(45,16,49,.45)}
.flow-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-bottom:16px}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:28px;background:var(--sand)}
.seg button{height:44px;padding:0 20px;border:0;border-radius:999px;background:transparent;font:600 .9375rem/1 var(--text);color:var(--night);cursor:pointer;transition:background .2s,color .2s}
.seg button:hover{background:rgba(255,255,255,.65)}
.seg button[aria-selected="true"]{background:var(--night);color:var(--cream);box-shadow:0 6px 14px -8px rgba(45,16,49,.7)}
.flow-sum{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-weight:500;color:var(--muted)}
.flow-sum b{padding:9px 16px;border-radius:999px;background:var(--butter);font:700 1.2rem/1 var(--display);color:var(--night)}
.flow-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:26px;font-size:.9375rem;color:var(--muted)}
.lg{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:.8125rem;font-weight:700}
.lg-you{background:var(--night);color:var(--butter)}
.lg-we{background:var(--sand);color:var(--night)}
.flow-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.fs{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px 20px 22px;border-radius:22px;background:var(--cream)}
.fs-you{background:var(--night);color:var(--cream);box-shadow:0 18px 30px -18px rgba(45,16,49,.6)}
.fs::after{content:"";position:absolute;top:34px;right:-18px;width:10px;height:10px;border-top:2.5px solid #CDB995;border-right:2.5px solid #CDB995;transform:rotate(45deg)}
.fs:nth-child(4n)::after,.fs:last-child::after{display:none}
.fs-top{display:flex;align-items:center;justify-content:space-between}
.fs-top em{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sand);font:800 1rem/1 var(--display);font-style:normal;color:var(--night)}
.fs-you .fs-top em{background:var(--butter)}
.fs-who{font:700 .6875rem/1 var(--text);letter-spacing:.1em;text-transform:uppercase;opacity:.55}
.fs-you .fs-who{color:var(--butter);opacity:1}
.fs h3{margin-top:6px;font-size:1.2rem}
.fs p{font-size:.9375rem;line-height:1.5;color:var(--muted)}
.fs-you p{color:rgba(248,243,232,.78)}
.fs-need{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--butter);font-size:.8125rem;font-weight:700;color:var(--night)}
.fs-need .ic{width:14px;height:14px}
.fs .t-dur{align-self:flex-start;margin:auto 0 0}
.fs-you .t-dur{background:rgba(248,243,232,.1);box-shadow:inset 0 0 0 2px rgba(248,243,232,.2);color:var(--cream)}
.flow-note{margin-top:22px;font-size:.875rem;color:var(--muted)}

/* ---------- /o-nas: гарантии сеткой ---------- */
.guar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.guar-card{position:relative;display:flex;flex-direction:column;gap:10px;overflow:hidden;padding:28px 26px 22px;border-radius:26px;background:var(--paper);box-shadow:0 20px 40px -30px rgba(45,16,49,.45)}
.guar-card::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:var(--c)}
.guar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.guar-ic{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:var(--c);color:var(--night)}
.guar-ic .ic{width:28px;height:28px}
.guar-top em{font:800 2.4rem/1 var(--display);font-style:normal;color:var(--line)}
.guar-card h3{font:700 .8125rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--berry)}
.guar-promise{font:700 1.45rem/1.15 var(--display);letter-spacing:-.01em}
.guar-card > p:not(.guar-promise){font-size:.9375rem;line-height:1.6;color:var(--muted)}
.guar-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);font-size:.8125rem;font-weight:600;color:var(--teal)}
.guar-foot .ic{width:18px;height:18px;padding:4px;border-radius:50%;background:var(--teal);color:#fff}

/* ---------- /raboty: хук в конце ---------- */
.ways{padding:clamp(32px,5vw,64px) clamp(20px,4vw,48px);border-radius:var(--r);background:color-mix(in srgb,var(--sand) 55%,var(--cream))}
.ways-kicker{display:inline-block;margin-bottom:14px;padding:7px 13px;border-radius:999px;background:var(--night);font:700 .75rem/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--butter)}
.ways .center-h h2{font-size:clamp(2rem,4.4vw,3.6rem)}

/* ---------- окно заявки ---------- */
.lead-modal{width:min(1000px,100% - 32px);background:var(--lilac)}
.lead-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.lead-side{position:relative;display:flex;flex-direction:column;gap:24px;overflow:hidden;padding:clamp(28px,4vw,44px);background:var(--night);color:var(--cream)}
.lead-side::after{content:"";position:absolute;right:-120px;bottom:-140px;width:300px;height:300px;border:2px solid rgba(254,223,86,.22);border-radius:50%;pointer-events:none}
.lead-kicker{align-self:flex-start;padding:7px 12px;border-radius:999px;background:rgba(254,223,86,.14);font:700 .75rem/1.2 var(--text);color:var(--butter)}
.lead-side h2{font-size:clamp(2rem,3.6vw,2.9rem);line-height:1;letter-spacing:-.02em}
.lead-steps{display:grid;gap:18px}
.lead-steps li{display:flex;gap:14px}
.lead-steps em{display:grid;flex:none;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--butter);font:800 .95rem/1 var(--display);font-style:normal;color:var(--night)}
.lead-steps span{display:flex;flex-direction:column;gap:2px;font-size:.875rem;line-height:1.4;color:rgba(248,243,232,.68)}
.lead-steps b{font-size:1rem;color:var(--cream)}
.lead-call{position:relative;z-index:1;margin-top:auto;padding:16px 18px;border-radius:18px;background:rgba(248,243,232,.07)}
.lead-call small{display:block;font-size:.8125rem;color:rgba(248,243,232,.6)}
.lead-call a{display:block;margin:4px 0;font:700 1.45rem/1.1 var(--display);color:var(--butter);text-decoration:none}
.lead-main{position:relative;padding:clamp(24px,3.6vw,40px)}
.lead-main .modal-x{top:14px;right:14px}
.lead-kinds legend{margin-bottom:10px;padding:0;font-size:.8125rem;font-weight:600;color:var(--muted)}
.lead-kinds legend i{font-style:normal;font-weight:500;opacity:.7}
.kinds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;padding-right:44px}
.form .kind{position:relative;display:inline-flex;margin:0}
/* скрытое радио: без width:100% от .form input, иначе оно торчит за край окна и на телефоне окно заявки уезжает вбок */
.form .kind input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;pointer-events:none}
.kind span{display:inline-flex;padding:9px 14px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 2px var(--lilac-line);font-size:.875rem;font-weight:600;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.kind span:hover{box-shadow:inset 0 0 0 2px var(--berry)}
.kind input:checked + span{background:var(--night);color:var(--butter);box-shadow:none}
.kind input:focus-visible + span{outline:3px solid var(--berry);outline-offset:2px}
.lead-main .lead-interest{margin:0 48px 16px 0}
.send-title{margin:6px 0 10px;font-size:.8125rem;font-weight:600;color:var(--muted)}
.lead-modal .send-grid{margin-top:0}
.lead-modal .send-grid .btn{height:58px;font-size:.9375rem}

/* ---------- эти блоки: адаптив ---------- */
@media (max-width:1023px){
  .flow-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fs::after{display:none}
  .guar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .order-cta{grid-template-columns:1fr}
}
@media (max-width:767px){
  .lead-grid{grid-template-columns:1fr}
  .lead-side{gap:10px;padding:24px 22px}
  .lead-steps,.lead-call{display:none}
  .lead-side h2{padding-right:44px;font-size:1.9rem}
  .lead-main .modal-x{top:-60px;right:10px;background:var(--butter)}
  .kinds{padding-right:0}
  .est-types,.est-extras{grid-template-columns:1fr}
}
@media (max-width:599px){
  .flow-steps,.guar{grid-template-columns:1fr}
  .flow-top{flex-direction:column;align-items:flex-start}
  .hero-cta .btn{width:100%}
  .r-row{grid-template-columns:1fr}
}


/* ---------- главная: «Подобрать сайт за 10 секунд» и окно подбора ---------- */
.sec-h-side{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:27em}
.quick-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.sec-h .quick-cta p{font-weight:600;color:var(--butter)}
.quick-cta .btn .ic-s{width:16px;height:16px}
.picker-modal{width:min(820px,100% - 32px);background:var(--paper)}
.pk-head{position:relative;padding:28px 32px 24px;background:var(--night);color:var(--cream)}
.pk-head h2{margin:12px 0 8px;padding-right:48px;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.05}
.pk-head p:last-child{max-width:36em;font-size:.9375rem;color:rgba(248,243,232,.72)}
.pk-head .modal-x{top:18px;right:18px}
.pk-head .lead-kicker{display:inline-block}
.modal-x{color:var(--night)}
.pk-list{display:grid;gap:8px;padding:20px 24px}
.pk-opt{display:flex;align-items:center;gap:16px;padding:12px 18px 12px 12px;border-radius:18px;background:#fff;text-decoration:none;color:var(--night);box-shadow:inset 0 0 0 2px var(--line);transition:box-shadow .2s,transform .2s var(--ease),background .2s}
.pk-opt:hover,.pk-opt:focus-visible{background:color-mix(in srgb,var(--c) 16%,white);box-shadow:inset 0 0 0 2px var(--c);transform:translateX(4px)}
.pk-ic{display:grid;flex:none;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--c);color:var(--night)}
.pk-ic.is-dark{color:var(--cream)}
.pk-q{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.pk-q b{font-size:1.0625rem;font-weight:700}
.pk-q small{font-size:.875rem;color:var(--muted)}
.pk-a{display:flex;flex:none;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.pk-a b{font:700 1rem/1.1 var(--display);color:var(--berry);white-space:nowrap}
.pk-a small{font-size:.8125rem;color:var(--muted)}
.pk-opt > .ic-s{color:var(--berry)}
.pk-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:16px 24px 22px;border-top:1px dashed var(--line);font-size:.9375rem;color:var(--muted)}
@media (max-width:599px){
  .pk-head{padding:22px 20px 18px}
  .pk-list{padding:14px}
  .pk-opt{flex-wrap:wrap;gap:6px 14px}
  .pk-opt > .ic-s{display:none}
  .pk-a{flex-basis:100%;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding-left:62px;text-align:left}
  .pk-foot{padding:14px 16px 18px}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0) * 100ms)}
  .js .reveal.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hl{animation:none;background-size:100% 78%;color:var(--t)}
  .sheet img,.sheet .mock,.browser-view img{transition:none!important}
}
@media (hover:none){
  .stack:hover .sheet img,.stack:hover .sheet .mock,.browser:hover .browser-view img{top:0;transform:none}
}

/* ---------- responsive ---------- */
@media (min-width:1100px){
  /* меню центрируем абсолютно, а не через grid-колонки: логотип и блок
     «телефон+кнопка» весят по-разному, и равные 1fr-колонки съезжали к более узкой стороне.
     Смещение от 50% компенсирует разницу ширины логотипа и правого блока, чтобы отступы
     слева и справа от меню были на глаз одинаковые, а не чисто геометрический центр шапки. */
  .header-in{position:relative}
  .nav{position:absolute;left:calc(50% + 37px);top:50%;transform:translate(-50%,-50%)}
}
@media (min-width:1280px){
  .nav{left:calc(50% - 50px)}
}
/* узкие ноутбуки: меню плотнее, чтобы не подходило к логотипу и кнопке */
@media (min-width:1100px) and (max-width:1199px),(min-width:1280px) and (max-width:1379px){
  .nav{gap:17px}
}
@media (max-width:1279px){
  .phone{display:none}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1099px){
  :root{--header:64px}
  .header-in{display:flex}
  .burger{display:flex}
  .nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px var(--gutter) 30px;background:var(--night);border-top:1px solid rgba(248,243,232,.12)}
  .is-open .nav{display:flex}
  .nav a{padding:16px 0;border-bottom:1px solid rgba(248,243,232,.14);font:700 1.9rem/1 var(--display);color:var(--cream)}
  .nav a::after{display:none}
  .nav .nav-phone{display:block;margin-top:10px;border-bottom:0;font:600 1.0625rem/1 var(--text);color:rgba(248,243,232,.7)}
  .header-cta{margin-left:auto}
}
@media (max-width:1023px){
  .hero-row{grid-template-columns:1fr;align-items:start}
  .est,.contract-grid,.faq-in,.cta-grid{grid-template-columns:minmax(0,1fr)}
  .receipt{position:relative;top:auto}
  .faq-head{position:static}
  .paper{transform:rotate(.6deg)}
  .stamp{right:-4px}
  .footer-top{grid-template-columns:1fr 1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:767px){
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero::before,.hero::after,.cta::before,.cta::after{display:none}
  summary{font-size:1.15rem}
}
@media (max-width:599px){
  .logo small{display:none}
  .header-cta .btn{padding:0 18px}
  .form .row{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile{min-height:170px}
  .footer-top{grid-template-columns:1fr}
  .send-grid{grid-template-columns:1fr}
  .stamp{width:104px;right:-6px;bottom:-44px}
  .paper{margin-bottom:32px}
}
.header-social{display:none}
@media (max-width:767px){
  /* «Наши работы» на телефоне: меньше воздуха сверху, вкладки в одну прокручиваемую строку — работы видно сразу */
  .ready.lift{padding-top:calc(var(--r) + 36px)}
  .ready-h{gap:10px}
  .ready-h h2{font-size:clamp(2rem,9.4vw,2.6rem)}
  .sec-h .ready-lead{font-size:.9375rem}
  .ready .k-tabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none}
  .ready .k-tabs::-webkit-scrollbar{display:none}
  .ready .k-tabs button{flex:none;height:40px;padding:0 14px;font-size:.875rem}
  body{padding-bottom:64px}
  /* шапка на телефоне: вместо «Оставить заявку» — мессенджеры, справа меню */
  .header-cta .btn{display:none}
  .header-social{display:flex;gap:8px}
  .header-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#fff}
  .header-social svg{width:20px;height:20px}
  .header-social .hs-wa{background:#25D366;color:#07341b}
  .hs-viber{background:#7360F2}
  .hs-tg{background:#2AABEE}
  .burger{margin-left:6px}
  /* нижняя плашка: заявка и звонок. На главной выезжает, когда начинают смотреть второй блок (script.js) */
  .mobile-bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:8px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:var(--night);box-shadow:0 -10px 24px rgba(26,8,29,.35);transition:transform .3s var(--ease),visibility .3s}
  .mobile-bar a,.mobile-bar button{display:flex;align-items:center;justify-content:center;gap:6px;height:46px;border:0;border-radius:14px;font:700 .9375rem/1 var(--text);text-decoration:none;cursor:pointer}
  .mobile-bar svg{width:17px;height:17px;flex:none}
  .mb-lead{background:var(--butter);color:var(--night)}
  .mb-call{background:var(--coral);color:var(--night)}
  .mobile-bar.is-hidden{transform:translateY(110%);visibility:hidden;box-shadow:none}
}

/* consent checkbox under the lead forms */
.form label.consent{display:flex;align-items:flex-start;gap:10px;margin:4px 0 18px;font-weight:500;line-height:1.45;color:var(--muted)}
.form .consent input{flex:none;width:18px;height:18px;margin:1px 0 0;padding:0;border:0;box-shadow:none;accent-color:var(--berry);cursor:pointer}
.form .consent a,.footer-bottom a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* legal text (/politika) */
.legal{max-width:48em}
.legal h2{margin:36px 0 12px;font-size:clamp(1.3rem,2vw,1.6rem)}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{font-size:.875rem;line-height:1.65;color:var(--muted)}
.legal p + p{margin-top:12px}
.legal ul{margin:10px 0 0;padding-left:1.2em;list-style:disc}
.legal li + li{margin-top:6px}
.legal b{color:var(--night)}
.legal .legal-title{font:inherit;font-size:.875rem;line-height:1.65;color:var(--muted);letter-spacing:0;margin:12px 0}

/* form errors: red text under the field, red outline on the field */
.field-err{display:block;margin-top:6px;font-size:.8125rem;font-weight:600;line-height:1.35;color:#D0342C}
.form label.is-bad input{border-bottom-color:#D0342C}
.framed-form label.is-bad > input{box-shadow:inset 0 0 0 2px #D0342C}
.framed-form label.is-bad .phone-field{border-color:#D0342C}
.form label.consent.is-bad{color:#D0342C;margin-bottom:4px}
.form .consent + .field-err{margin:0 0 16px 28px}

/* window after a lead: sent or not, where and through what */
.done-modal{width:min(460px,100% - 32px)}
.done-in{padding:34px clamp(22px,5vw,38px) 30px;text-align:center}
.done-ic{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:#25D366;color:#fff}
.done-ic svg{width:34px;height:34px}
.done-modal.is-fail .done-ic{background:#D0342C}
.done-in h2{font-size:clamp(1.5rem,4vw,1.9rem);line-height:1.15}
.done-lead{margin-top:10px;color:var(--muted);line-height:1.55}
.done-list{display:grid;gap:8px;margin:20px 0 0;padding:14px 16px;border-radius:14px;background:var(--sand);text-align:left}
.done-list div{display:flex;gap:12px;justify-content:space-between}
.done-list dt{color:var(--muted)}
.done-list dd{margin:0;font-weight:700;text-align:right}
.done-hint{margin-top:14px;font-size:.9375rem;line-height:1.55;color:var(--muted)}
.done-hint:empty,.done-list[hidden]{display:none}
.done-in .btn{margin-top:22px;min-width:160px}