/* Dorvan — personal portfolio. Light "liquid glass", no build step. Font: Golos Text (OFL), self-hosted. */

@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/golos-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/golos-cyr.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/golos-cyr-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
/* пока Golos грузится: Arial с шириной и вертикальными метриками Golos, строки не сдвигаются при подмене (числа считает скрипт fallback-metrics.py) */
@font-face{font-family:"Golos Fallback";font-weight:400 500;src:local("Arial"),local("ArialMT");size-adjust:106.78%;ascent-override:91.78%;descent-override:20.60%;line-gap-override:0%}
@font-face{font-family:"Golos Fallback";font-weight:550 700;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:100.83%;ascent-override:97.19%;descent-override:21.82%;line-gap-override:0%}

:root{
  --bg:#ECEAF4;
  --ink:#10101A; --ink-2:#4F4F66; --ink-3:#5E5E75;
  --acc:#6A55E8; --acc-ink:#5340D4;
  --line:rgba(40,30,110,.12);
  --shadow-1:0 1px 2px rgba(30,20,90,.05),0 12px 32px -14px rgba(60,45,150,.28);
  --shadow-2:0 40px 90px -40px rgba(70,50,170,.45);
  --r-xl:30px; --r-lg:22px; --r-md:16px;
  --font:"Golos Text","Golos Fallback",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* движение: одна кривая на вход/ховер, одна на «туда-обратно»; три длительности */
  --ease:cubic-bezier(.22,.9,.3,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --dur-1:160ms; --dur-2:320ms; --dur-3:700ms;
  --gut:clamp(14px,3vw,32px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px;scrollbar-gutter:stable}
body{margin:0;min-height:100vh;font:400 16px/1.6 var(--font);color:var(--ink);background:var(--bg);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:10px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:200;padding:10px 16px;border-radius:12px;background:var(--ink);color:#fff;font-weight:600;transition:top var(--dur-1) var(--ease)}
.skip:focus{top:12px}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- background ---------- */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(900px 620px at 88% -8%,#F8F5FF 0,rgba(248,245,255,0) 62%),
    radial-gradient(760px 560px at -6% 38%,#E0DAF6 0,rgba(224,218,246,0) 64%),
    radial-gradient(900px 700px at 70% 105%,#E4E9FA 0,rgba(228,233,250,0) 62%),
    linear-gradient(180deg,#EFEDF6 0%,#E9E7F2 55%,#EEECF6 100%)}
.bg svg{position:absolute;inset:0;width:100%;height:100%}
/* зерно только на фоне страницы (на блоках первого экрана плитка становилась для Chrome «картинкой» LCP); готовая PNG-плитка 112 px,
   подключается после загрузки (класс .grain) — не занимает сеть, пока грузится первый экран */
.bg::after{content:"";position:absolute;inset:0}
.grain .bg::after{background:url(../assets/grain.png)}

/* ---------- glass ---------- */
.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,.5));
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,var(--shadow-1);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(255,255,255,.9)}}
.card{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.68));border:1px solid #fff;border-radius:var(--r-lg);box-shadow:0 1px 0 #fff inset,0 10px 28px -16px rgba(60,45,150,.3)}

/* ---------- layout ---------- */
.wrap{width:min(1200px,calc(100% - 2*var(--gut)));margin-inline:auto}
main{display:grid;gap:14px;padding-bottom:14px}
.panel{position:relative;border-radius:var(--r-xl);padding:clamp(22px,3.4vw,44px)}
.panel--clip{overflow:hidden}
.label{display:block;font-size:12px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-ink)}
.h2{margin-top:10px;font-size:clamp(28px,3.6vw,44px);line-height:1.08;letter-spacing:-.03em;font-weight:700}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:clamp(20px,2.6vw,32px)}
.hint{font-size:14px;color:var(--ink-2)}
.nw{white-space:nowrap}
.h2,.case__head h2{text-wrap:balance}
p{text-wrap:pretty}

/* ---------- buttons ---------- */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;white-space:nowrap;transition:transform var(--dur-2) var(--ease),translate var(--dur-2) var(--ease),background-color var(--dur-1) var(--ease)}
.btn>:not(.fx){position:relative}
.btn>.sr{position:absolute} /* скрытое имя кнопки не должно занимать место в ряду (иначе gap сдвигает содержимое) */
.btn .ico{width:18px;height:18px}
.btn .ico use{transition:transform var(--dur-2) var(--ease)}
/* цветное свечение под тёмной кнопкой: отдельный слой, при ховере меняется только opacity */
.btn--dark::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:0 16px 34px -12px rgba(106,85,232,.85);opacity:0;transition:opacity var(--dur-2) var(--ease)}
.btn--dark{color:#fff;background:linear-gradient(180deg,#1d1c2e,#0d0d16);box-shadow:0 10px 24px -10px rgba(15,10,50,.6),inset 0 1px 0 rgba(255,255,255,.18)}
.btn--ghost{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow-1)}
.btn:active{transform:scale(.97)}
.round{position:relative;overflow:hidden;width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:var(--shadow-1);transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.round .ico{width:18px;height:18px;transition:transform var(--dur-2) var(--ease)}
button.round:active{transform:scale(.92)}
/* «волна» нажатия: круг из точки касания, слой .fx добавляет скрипт */
.fx{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.fx i{position:absolute;border-radius:50%;background:currentColor;opacity:var(--ro,.3);transform:scale(0);animation:ripple .65s var(--ease) forwards}
.btn--ghost .fx i,.round .fx i{--ro:.12}
@media (hover:hover){
  .btn--dark:hover{transform:translateY(-1px)}
  .btn--dark:hover::before{opacity:1}
  .btn--ghost:hover,.round:hover{background:#fff}
  .btn:hover .ico use{transform:translate(2.5px,-2.5px)}
  .btn:hover .ico use[href="#i-arrow-r"]{transform:translateX(3.5px)}
  .btn:hover .ico use[href="#i-copy"]{transform:none}
}

/* ---------- nav ---------- */
.nav-wrap{position:sticky;top:0;z-index:60;padding-top:12px;transition:translate var(--dur-2) var(--ease)}
.is-scrolled .nav-wrap{translate:0 -6px}
.nav{position:relative;isolation:isolate;display:flex;align-items:center;gap:14px;padding:8px 10px 8px 12px;border-radius:22px}
/* стекло шапки — два слоя: обычный и плотный с более сильным blur; плотный проявляется при прокрутке */
.nav.glass{background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav::before,.nav::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none}
.nav::before{background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,.5));border:1px solid rgba(255,255,255,.92);box-shadow:0 1px 0 rgba(255,255,255,.95) inset,var(--shadow-1);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5)}
.nav::after{background:linear-gradient(180deg,rgba(252,251,255,.88),rgba(247,245,255,.74));border:1px solid #fff;box-shadow:0 1px 0 #fff inset,0 18px 40px -20px rgba(60,45,150,.45);-webkit-backdrop-filter:blur(40px) saturate(1.8);backdrop-filter:blur(40px) saturate(1.8);opacity:0;visibility:hidden;transition:opacity var(--dur-2) var(--ease),visibility 0s linear var(--dur-2)}
.is-scrolled .nav::after{opacity:1;visibility:visible;transition-delay:0s}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav::before{background:rgba(255,255,255,.92)}}
.nav__progress{position:absolute;left:22px;right:22px;bottom:0;height:2px;border-radius:2px;overflow:hidden;pointer-events:none}
.nav__progress i{display:block;height:100%;background:linear-gradient(90deg,#B3A6FF,#6A55E8);transform-origin:0 50%;transform:scaleX(0)}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand__mark{width:38px;height:38px;border-radius:12px;box-shadow:0 8px 18px -8px rgba(20,15,60,.55);transition:scale var(--dur-2) var(--ease)}
.is-scrolled .brand__mark{scale:.9}
.brand__txt b{display:block;font-size:15px;font-weight:650;line-height:1.15;letter-spacing:-.01em}
.brand__txt small{display:block;font-size:12px;color:var(--ink-2);line-height:1.2}
.nav__links{display:flex;gap:2px;margin:0 auto}
.nav__links a{position:relative;display:block;padding:9px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink-2);transition:color var(--dur-1) var(--ease),background-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.nav__links a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,#8E7CFF,#5A45E3);transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--dur-2) var(--ease)}
@media (hover:hover){
  .nav__links a:hover{color:var(--ink)}
  .nav__links a:hover::after{transform:scaleX(1);transform-origin:0 50%}
}
.nav__links a.is-active{color:var(--ink);background-color:#fff;box-shadow:0 1px 2px rgba(30,20,90,.08),0 6px 16px -8px rgba(60,45,150,.3)}
.nav__links a.is-active::after{transform:scaleX(0)}
.nav__links .only-m{display:none}
.nav__right{display:flex;align-items:center;gap:8px;flex:none}
.lang{display:flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.9)}
.lang button{min-width:40px;height:32px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-2);transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.lang button[aria-pressed="true"]{background:var(--ink);color:#fff}
.nav__tg{display:none;width:44px;height:44px;border-radius:14px;place-items:center;color:#fff;background:linear-gradient(180deg,#1d1c2e,#0d0d16);box-shadow:0 8px 18px -8px rgba(15,10,50,.6)}
.nav__burger{display:none;width:44px;height:44px;border-radius:14px;place-items:center;background:rgba(255,255,255,.7)}
.nav__burger path{transform-box:fill-box;transform-origin:center;transition:transform var(--dur-2) var(--ease),opacity var(--dur-1) var(--ease)}
.nav.is-open .nav__burger path:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav.is-open .nav__burger path:nth-child(2){opacity:0}
.nav.is-open .nav__burger path:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;padding-block:clamp(30px,4.4vw,60px)}
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 11px;border-radius:999px;font-size:13px;font-weight:550;color:var(--ink-2);background:rgba(255,255,255,.75);border:1px solid #fff;box-shadow:var(--shadow-1)}
.pill i{position:relative;width:8px;height:8px;border-radius:50%;background:#1FA85A}
.pill i::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(31,168,90,.5);animation:ring 2.6s var(--ease) infinite}
.eyebrow{display:block;margin-top:26px;font-size:12px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-ink)}
.hero__h1{margin-top:12px}
.hero__title{display:block;font-size:clamp(58px,9.4vw,116px);line-height:.92;letter-spacing:-.05em;font-weight:700}
.hero__sub{display:block;margin-top:14px;font-size:clamp(26px,3.5vw,46px);line-height:1.08;letter-spacing:-.03em;font-weight:650;color:var(--acc-ink)}
/* маска строки: текст выезжает снизу из-под невидимой кромки (чистый CSS, без скрипта); поля с отрицательными отступами не режут выносные элементы и не меняют раскладку */
.mask,.ln{display:inline-block;vertical-align:top;overflow:hidden;padding:.12em .08em .18em;margin:-.12em -.08em -.18em}
.mask>span,.ln>span{display:inline-block}
/* градиент у каждой строки свой, но одной ширины (12em ≈ ширина колонки) и от левого края — как был у всего блока */
.ln>span{background:linear-gradient(95deg,#5A45E3 8%,#7864F2 92%) 0 0/12em 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero__lead{margin-top:20px;max-width:31em;font-size:clamp(16px,1.35vw,18px);color:var(--ink-2)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.hero__visual{position:relative;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:1/1;container-type:inline-size}
.stage__tilt{position:absolute;inset:0}
.frame{position:absolute;inset:0;border-radius:15%;border:1px solid rgba(255,255,255,.95);background:linear-gradient(160deg,rgba(255,255,255,.74),rgba(255,255,255,.16));box-shadow:0 40px 90px -42px rgba(80,60,200,.55),inset 0 0 0 10px rgba(255,255,255,.2)}
.glow{position:absolute;inset:6% 2% -2% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(138,118,255,.5),rgba(138,118,255,.22) 50%,rgba(138,118,255,0))}
.dev-browser{position:absolute;left:7%;top:11%;width:80%;border-radius:4% / 5%;background:#fff;overflow:hidden;rotate:-2deg;box-shadow:0 32px 60px -28px rgba(40,30,120,.6),0 0 0 1px rgba(30,20,90,.06)}
.dev-browser__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#F5F4FA;border-bottom:1px solid rgba(30,20,90,.06)}
.dev-browser__bar i{width:9px;height:9px;border-radius:50%;background:#D9D6E8}
.dev-browser__url{margin-left:10px;max-width:68%;padding:3px 12px;border-radius:999px;background:#fff;font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev-browser img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.dev-phone{position:absolute;right:3%;bottom:6%;width:34%;aspect-ratio:9/17.6;padding:2.4%;border-radius:15% / 7.6%;rotate:3deg;overflow:hidden;background:linear-gradient(145deg,#2c2b3d,#0b0b12);box-shadow:0 40px 70px -26px rgba(52,34,150,.75),inset 0 0 0 1.5px rgba(255,255,255,.18)}
.dev-phone img{width:100%;height:100%;object-fit:cover;border-radius:12% / 6%}
/* блик: светлая полоса скользит по экранам вслед за наклоном (элемент .glare добавляет скрипт, свой слой) */
.glare{position:absolute;inset:0 -70%;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.34) 48%,rgba(255,255,255,0) 58%);opacity:0;will-change:transform;transition:opacity var(--dur-3) var(--ease)}
.chip-card{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:18px}
.chip-card--stat{top:4%;right:-3%}
.chip-card--flow{left:-3%;bottom:7%;display:block;width:clamp(176px,46%,236px)}
.chip-card--site{left:-3%;top:3%;gap:10px;padding:6px 16px 6px 6px;border-radius:16px}
.chip-card--site img{width:64px;height:40px;object-fit:cover;border-radius:11px;box-shadow:0 0 0 1px rgba(30,20,90,.1)}
.chip-card__n{font-size:36px;font-weight:700;letter-spacing:-.04em;line-height:1}
.chip-card b{display:block;font-size:14px;font-weight:650;line-height:1.2}
.chip-card small{display:block;font-size:12px;color:var(--ink-2);line-height:1.3}
.flow{display:flex;margin-top:10px}
.flow li{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.flow li::before{content:"";z-index:1;width:12px;height:12px;border-radius:50%;background:linear-gradient(145deg,#8E7CFF,#5A45E3);box-shadow:0 0 0 3px rgba(106,85,232,.18)}
.flow li:not(:last-child)::after{content:"";position:absolute;top:5px;left:calc(50% + 7px);width:calc(100% - 14px);height:2px;border-radius:2px;background:linear-gradient(90deg,#8E7CFF,#CFC7FF)}
.flow li:last-child::after{content:"";position:absolute;top:0;left:calc(50% - 6px);width:12px;height:12px;border-radius:50%;background:rgba(106,85,232,.35);animation:ring 2.6s var(--ease) infinite}
.orb-mini{position:absolute;left:-4%;top:40%;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:var(--acc-ink)}
/* 3D-сцена только там, где есть наклон за мышью: слои на разной глубине (translateZ), scale компенсирует перспективу, чтобы в покое композиция не менялась.
   Наклон пишет скрипт прямо в transform (CSS-переменные пересчитывали стили всей сцены каждый кадр); will-change фиксирует масштаб растра.
   На телефонах и слабых устройствах сцена плоская: без видеокарты 3D-слои стоили до 1,5 с работы при загрузке */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html:not(.lite) .hero__visual{perspective:1400px}
  html:not(.lite) .stage__tilt{transform-style:preserve-3d;will-change:transform}
  html:not(.lite) .stage__tilt>*{will-change:transform}
  html:not(.lite) .frame{transform:translateZ(-40px) scale(1.029)}
  html:not(.lite) .glow{transform:translateZ(-60px) scale(1.043)}
  html:not(.lite) .dev-phone{transform:translateZ(46px) scale(.967)}
  html:not(.lite) .chip-card--stat{transform:translateZ(80px) scale(.943)}
  html:not(.lite) .chip-card--flow{transform:translateZ(64px) scale(.954)}
  html:not(.lite) .chip-card--site{transform:translateZ(72px) scale(.951)}
  html:not(.lite) .orb-mini{transform:translateZ(100px) scale(.929)}
}
.orb-mini .ico{width:24px;height:24px}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.about .h2{font-size:clamp(28px,3.2vw,40px)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:26px;padding:20px 6px}
.stats li{display:flex;flex-direction:column;gap:8px;padding:0 18px}
.stats li+li{border-left:1px solid var(--line)}
.stats .ico{color:var(--acc-ink)}
.stats b{font-size:34px;line-height:1;letter-spacing:-.04em;font-weight:700;font-variant-numeric:tabular-nums}
.stats span{font-size:13px;line-height:1.35;color:var(--ink-2)}
.about__r p{color:var(--ink-2);font-size:16.5px}
.about__r p+p{margin-top:14px}
.about__r .btn{margin-top:24px}

/* ---------- services ---------- */
.orb{position:absolute;border-radius:50%;pointer-events:none;border:1px solid rgba(255,255,255,.75);
  background:
    radial-gradient(60% 60% at 30% 24%,rgba(255,255,255,.95),rgba(255,255,255,0) 62%),
    radial-gradient(70% 70% at 72% 84%,rgba(138,118,255,.55),rgba(138,118,255,0) 70%),
    conic-gradient(from 210deg at 50% 50%,#D2C9FF,#EEE9FF,#BCD6FF,#EBD6FF,#D2C9FF);
  box-shadow:inset 0 0 40px rgba(255,255,255,.85),inset -10px -22px 50px rgba(120,100,240,.35),0 30px 60px -22px rgba(90,70,200,.4)}
.services .orb{width:150px;aspect-ratio:1;right:clamp(14px,5vw,70px);top:-46px}
.services__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.svc{position:relative;grid-column:span 2;display:flex;flex-direction:column;gap:12px;min-height:236px;padding:22px;transition:transform var(--dur-2) var(--ease)}
.svc:nth-child(n+4){grid-column:span 3}
.svc__ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;transition:transform var(--dur-2) var(--ease)}
.svc__ic .ico{width:22px;height:22px}
.svc--y .svc__ic,.perk--y .perk__ic{background:linear-gradient(145deg,#FFEABD,#FFCF7A);color:#7A4D00}
.svc--p .svc__ic,.perk--p .perk__ic{background:linear-gradient(145deg,#E4DBFF,#B9A9FF);color:#4A33C8}
.svc--b .svc__ic,.perk--b .perk__ic{background:linear-gradient(145deg,#D8E7FF,#9FBFFF);color:#1B4EBE}
.svc--t .svc__ic,.perk--t .perk__ic{background:linear-gradient(145deg,#CFF5EF,#88E1D5);color:#0A675F}
.svc--r .svc__ic,.perk--r .perk__ic{background:linear-gradient(145deg,#FFDDE5,#FFA9BE);color:#9A1B3E}
.svc__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.svc__from{padding:5px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:650;white-space:nowrap}
.svc h3{margin-top:4px;font-size:18px;line-height:1.2;letter-spacing:-.015em;font-weight:650}
.svc p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.svc .round{margin-top:auto;align-self:flex-end}

/* ---------- perks: что получит бизнес ---------- */
.perks__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.perk{display:flex;flex-direction:column;gap:12px;padding:22px}
.perk__ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center}
.perk__ic .ico{width:22px;height:22px}
.perk h3{margin-top:4px;font-size:18px;line-height:1.2;letter-spacing:-.015em;font-weight:650}
.perk p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}

/* ---------- prices: ступени цены, что входит, живые примеры ---------- */
.tiers{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin:0;padding:12px 0 0;border:0;min-width:0}
.tiers>legend{white-space:normal} /* подпись группы только для скринридеров: не должна растягивать группу на узком экране */
.tier{position:relative;display:block}
.tier input{position:absolute;inset:0;z-index:1;opacity:0;cursor:pointer}
.tier__box{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:78px;padding:12px 6px;border-radius:var(--r-md);background:rgba(255,255,255,.78);border:1px solid var(--line);text-align:center;transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease)}
.tier__box b{font-size:22px;line-height:1.05;letter-spacing:-.03em;font-weight:700;font-variant-numeric:tabular-nums}
.tier__box small{font-size:12.5px;line-height:1.25;font-weight:550;color:var(--ink-2)}
.tier input:checked+.tier__box{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 14px 28px -14px rgba(15,10,50,.7)}
.tier input:checked+.tier__box small{color:rgba(255,255,255,.78)}
.tier input:active+.tier__box{transform:scale(.97)}
.tier input:focus-visible+.tier__box{outline:2px solid var(--acc);outline-offset:3px}
@media (hover:hover){.tier input:not(:checked):hover+.tier__box{background:#fff}}
.tier__tag{position:absolute;top:-11px;left:50%;translate:-50% 0;padding:3px 10px;border-radius:999px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap;color:#5A3A00;background:linear-gradient(145deg,#FFE9B3,#FFC95E);box-shadow:0 6px 14px -6px rgba(180,110,0,.6)}
.tierpanel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px clamp(18px,3vw,40px);margin-top:18px;padding:clamp(18px,2.6vw,30px)}
.tierpanel:not([hidden]){animation:rise var(--dur-3) var(--ease) both}
.tierpanel--best{box-shadow:0 1px 0 #fff inset,0 0 0 2px rgba(255,190,70,.6),0 26px 50px -26px rgba(200,130,0,.5)}
.tierpanel__badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 9px;border-radius:999px;font-size:12.5px;font-weight:700;color:#5A3A00;background:linear-gradient(145deg,#FFE9B3,#FFC95E)}
.tierpanel__badge .ico{width:15px;height:15px}
.tierpanel h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.035em;font-weight:700}
.tierpanel__badge+h3{margin-top:12px}
.tierpanel__price{color:var(--acc-ink)}
.tierpanel__time{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14.5px;color:var(--ink-2)}
.tierpanel__time .ico{width:18px;height:18px;color:var(--acc-ink)}
.tierpanel__lead{margin-top:14px;font-size:16px;color:var(--ink-2)}
.tierpanel .btn{margin-top:22px}
.tierpanel__cap{margin:0 0 10px;font-size:13px;font-weight:650;color:var(--ink-2)}
.tierpanel .ticks li{font-size:15px}
.tierpanel__demos{grid-column:1/-1}
.demos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.demo{display:flex;flex-direction:column;gap:12px;height:100%;padding:10px 10px 16px;transition:transform var(--dur-2) var(--ease)}
.demo__pic{position:relative;display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#EAE8F3}
.demo__pic img{width:100%;height:100%;object-fit:cover;object-position:top}
.demo__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 6px}
.demo__t{display:block;font-size:17px;font-weight:650;letter-spacing:-.015em;line-height:1.2}
.demo__c{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--ink-2)}
.demo__go{display:inline-flex;align-items:center;gap:6px;flex:none;padding:8px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap;transition:background-color var(--dur-2) var(--ease)}
.demo__go .ico{width:16px;height:16px}
@media (hover:hover){.demo:hover{transform:translateY(-4px)}.demo:hover .demo__go{background:var(--acc-ink)}}
.demo:active{transform:scale(.985)}
.prices__note{margin-top:20px;max-width:56em;font-size:13.5px;line-height:1.55;color:var(--ink-2)}

/* ---------- Noverim: реальный продукт ---------- */
.nv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,3.4vw,44px);align-items:center;background:linear-gradient(135deg,rgba(214,241,231,.9),rgba(255,255,255,.6) 62%)}
.nv__badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border-radius:999px;background:#fff;border:1px solid rgba(15,110,99,.22);font-size:12.5px;font-weight:650;letter-spacing:.02em;color:#0F6E63}
.nv__badge .ico{width:16px;height:16px}
.nv .h2{margin-top:16px}
.nv__lead{margin-top:14px;max-width:34em;font-size:16.5px;color:var(--ink-2)}
.nv__list{margin-top:18px}
.ticks.nv__list li::before{background:linear-gradient(145deg,#38B58F,#0F6E63);box-shadow:0 0 0 3px rgba(15,110,99,.16)}
.nv__line{margin-top:20px;font-size:16px;font-weight:600}
.nv__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:22px}
.nv__note{font-size:13px;color:var(--ink-2)}
.nv__shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start;padding:6px 2px 26px}
.nv__ph{margin:0;padding:5px;border-radius:22px;background:#0d0d16;box-shadow:0 26px 40px -18px rgba(10,40,30,.55)}
.nv__ph img{width:100%;height:auto;aspect-ratio:540/1169;object-fit:cover;border-radius:17px}
.nv__ph:nth-child(even){translate:0 22px}

/* ---------- все работы ---------- */
.tag{position:absolute;left:12px;top:12px;z-index:2;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:650;color:var(--ink)}
.wk-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.wk-filters button{min-height:40px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid var(--line);font-size:14px;font-weight:550;transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.wk-filters button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.wk-filters button:active{transform:scale(.96)}
.wk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.wk-item{display:flex}
.wk{display:flex;flex-direction:column;gap:12px;width:100%;padding:10px 10px 14px;text-align:left;transition:transform var(--dur-2) var(--ease)}
.wk:active{transform:scale(.985)}
.wk__body{display:flex;flex-direction:column;gap:2px;flex:1;padding:0 6px}
.wk__t{font-size:18px;font-weight:650;letter-spacing:-.02em;line-height:1.2}
.wk__n{font-size:13px;line-height:1.35;color:var(--ink-2)}
.wk__n::first-letter{text-transform:uppercase}
.wk__d{margin-top:8px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.wk__q{margin-top:10px;padding-left:10px;border-left:3px solid var(--acc);font-size:13.5px;line-height:1.5;font-style:italic;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} /* цитата короткая: длинный отзыв обрезается, а не растягивает строку */
.wk__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:0 6px}
.wk__foot .badge{flex:none}
.wk[data-kind=client] .tag{background:var(--acc-ink);border-color:transparent;color:#fff}
.wk-empty{padding:22px 24px;font-size:15.5px;color:var(--ink-2)}
.wk-empty a{font-weight:600;color:var(--acc-ink);text-decoration:underline;text-underline-offset:3px}
.wk-more{display:flex;justify-content:center;margin-top:22px}
.wk-cap{margin-top:18px;font-size:13.5px;color:var(--ink-2)}
@keyframes wk-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){.wk-item.wk-in{animation:wk-in .38s var(--ease) both;animation-delay:calc(var(--i,0)*35ms)}}
@media (hover:hover){
  .wk-filters button[aria-pressed=false]:hover{background:#fff}
  .wk:hover{transform:translateY(-4px)}
  .wk:hover:active{transform:translateY(-2px) scale(.985)}
  .wk:hover .demo__go{background:var(--acc-ink)}
  .svc:hover .round{background:var(--ink);color:#fff}
  .svc:hover .round .ico{transform:translate(2px,-2px)}
  .svc:hover{transform:translateY(-4px)}
  .svc:hover .svc__ic{transform:translateY(-3px) rotate(-6deg)}
  .step:hover .step__ic{transform:rotate(-8deg) scale(1.06)}
}

/* ---------- process ---------- */
/* линия процесса: рельс от первой точки до последней, заливка = прогресс прокрутки (--p ставит скрипт), точки загораются, когда линия до них доходит */
.steps{--p:0;position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:14px;padding-top:30px}
.steps::before,.steps::after{content:"";position:absolute;left:24px;right:calc((100% - 84px) / 7 - 24px);top:8px;height:2px;border-radius:2px;pointer-events:none}
.steps::before{background:rgba(106,85,232,.16)}
.steps::after{background:linear-gradient(90deg,#B3A6FF,#5A45E3);transform-origin:0 50%;transform:scaleX(var(--p))}
.step{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px 16px 20px}
.step__top{display:flex;align-items:center;justify-content:space-between}
.step__top::before,.step__top::after{content:"";position:absolute;left:16px;top:-29px;width:14px;height:14px;border-radius:50%;pointer-events:none}
.step__top::before{background:#fff;box-shadow:inset 0 0 0 2px rgba(106,85,232,.3)}
.step__top::after{background:linear-gradient(145deg,#8E7CFF,#5A45E3);box-shadow:0 0 0 4px rgba(106,85,232,.16),0 4px 12px -2px rgba(90,69,227,.6);opacity:0;scale:.4;transition:opacity var(--dur-2) var(--ease),scale var(--dur-2) var(--ease)}
.step.is-on .step__top::after{opacity:1;scale:1}
.step__n{font-size:13px;font-weight:650;letter-spacing:.06em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.step__ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#E7E0FF,#C4B8FF);color:#4A33C8;transition:transform var(--dur-2) var(--ease)}
.step h3{font-size:16.5px;line-height:1.2;letter-spacing:-.01em;font-weight:650}
.step p{font-size:13.5px;line-height:1.55;color:var(--ink-2)}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(20px,4vw,64px);align-items:start}
.faq__lead{margin-top:14px;color:var(--ink-2);max-width:22em}
.faq .btn{margin-top:22px}
.qa{margin-bottom:10px;overflow:hidden}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font-size:16px;font-weight:600;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:var(--shadow-1);transition:transform var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.qa summary .pm .ico{width:16px;height:16px}
.qa[open] summary .pm{transform:rotate(45deg);background:var(--ink);color:#fff}
.qa p{padding:0 20px 20px;max-width:46em;font-size:15px;color:var(--ink-2)}

/* ---------- contact / form ---------- */
.contact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:clamp(22px,4vw,64px);align-items:start}
.contact .orb{width:230px;aspect-ratio:1;left:-60px;bottom:-90px;opacity:.9}
.contact .h2{font-size:clamp(26px,3vw,38px)}
.contact__lead{margin-top:14px;max-width:24em;color:var(--ink-2)}
.contact__btns{position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.next{position:relative;margin-top:26px;padding:20px 22px}
.next h3{margin-bottom:14px;font-size:15px;font-weight:650}
.next ol{display:grid;gap:14px;counter-reset:n}
.next li{display:flex;align-items:flex-start;gap:14px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.next li::before{counter-increment:n;content:counter(n);flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:650;color:#fff;background:linear-gradient(145deg,#8E7CFF,#5A45E3)}
.contact__list{display:grid;gap:14px;margin-top:28px;position:relative}
.contact__item{display:flex;align-items:center;gap:14px;font-size:15px}
.contact__ic{width:42px;height:42px;flex:none;border-radius:14px;display:grid;place-items:center;background:#fff;box-shadow:var(--shadow-1);color:var(--acc-ink)}
.contact__item a{font-weight:600;text-decoration:underline;text-decoration-color:rgba(83,64,212,.35);text-underline-offset:3px}
.brief{padding:clamp(18px,2.6vw,30px)}
.brief h3{font-size:20px;letter-spacing:-.02em;font-weight:650;margin-bottom:18px}
.field{display:grid;gap:8px;margin:0 0 18px;padding:0;border:0;min-width:0}
.field>legend,.field>label{padding:0;font-size:13px;font-weight:600;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;inset:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid var(--line);font-size:14px;font-weight:550;transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.chip input:active+span{transform:scale(.96)}
.chip input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
@media (hover:hover){.chip input:not(:checked):hover+span{background:#fff}}
.input{width:100%;min-height:48px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.84);font:inherit;font-size:16px;color:var(--ink);transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease)}
.input::placeholder{color:var(--ink-3);opacity:1}
.input:focus{outline:0;border-color:var(--acc);background:#fff;box-shadow:0 0 0 4px rgba(106,85,232,.18)}
textarea.input{min-height:120px;resize:vertical}
/* неверное поле: красная кромка и мягкое кольцо; сообщение об ошибке выезжает сверху */
.input[aria-invalid="true"]{border-color:#D92D20;box-shadow:0 0 0 4px rgba(217,45,32,.1)}
.input[aria-invalid="true"]:focus{border-color:#D92D20;box-shadow:0 0 0 4px rgba(217,45,32,.16)}
.chips.is-invalid .chip input:not(:checked)+span{border-color:rgba(217,45,32,.5);background:rgba(255,244,243,.9)}
.err{min-height:0;font-size:13px;line-height:1.35;color:#B42318}
.err:empty{display:none}
.err:not(:empty){animation:err-in var(--dur-2) var(--ease)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.brief__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.brief__note{flex:1 1 220px;font-size:13px;line-height:1.45;color:var(--ink-2)}
/* кнопка отправки: поверх подписи — состояние (кольцо загрузки или галочка), ширина кнопки не прыгает */
.btn>.btn__state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;opacity:0;transition:opacity var(--dur-1) var(--ease)}
#brief [type=submit]>[data-i18n],#brief [type=submit]>.ico{transition:opacity var(--dur-1) var(--ease)}
#brief [type=submit][data-state]>[data-i18n],#brief [type=submit][data-state]>.ico{opacity:0}
.btn[data-state]>.btn__state{opacity:1}
.btn__state .spin,.btn__state .ico{display:none}
.btn[data-state=loading] .spin{display:block;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .7s linear infinite}
.btn[data-state=sent] .btn__state .ico{display:block;stroke-dasharray:24;stroke-dashoffset:24;animation:draw .4s var(--ease) forwards}
.btn:disabled{cursor:progress}
.sent{display:grid;gap:14px}
.sent[hidden]{display:none}
.sent__ic{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#8E7CFF,#5A45E3);box-shadow:0 12px 24px -10px rgba(90,69,227,.6)}
.sent__ic::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px rgba(106,85,232,.55);opacity:0;pointer-events:none}
/* панель «отправлено»: значок появляется, галочка прорисовывается, текст поднимается следом */
.sent:not([hidden]) .sent__ic{animation:pop-in .5s var(--ease) both}
.sent:not([hidden]) .sent__ic::after{animation:halo 1.1s var(--ease) .25s both}
.sent:not([hidden]) .sent__ic .ico{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .5s var(--ease) .18s forwards}
.sent:not([hidden])>:not(.sent__ic){animation:rise var(--dur-3) var(--ease) both}
.sent>:nth-child(2){animation-delay:.1s}.sent>:nth-child(3){animation-delay:.16s}.sent>:nth-child(4){animation-delay:.22s}.sent>:nth-child(5){animation-delay:.28s}
.sent h3{margin:0}
.sent p{color:var(--ink-2);font-size:15px}
.sent textarea{min-height:150px;font-size:14px;color:var(--ink-2)}
.sent__act{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- footer ---------- */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-bottom:28px;padding:16px 22px;border-radius:22px;font-size:14px;color:var(--ink-2)}
.foot a{font-weight:600;color:var(--ink)}

/* ---------- case dialogs ---------- */
.case{width:min(1060px,calc(100vw - 24px));max-width:none;max-height:none;margin:auto;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
.case::backdrop{background:rgba(24,20,48,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.case__box{max-height:calc(100dvh - 28px);overflow:auto;overscroll-behavior:contain;border-radius:30px;background:rgba(249,248,254,.96);border:1px solid #fff;box-shadow:0 40px 100px -30px rgba(30,20,100,.6)}
.case[open] .case__box{animation:pop var(--dur-2) var(--ease)}
.case[open]::backdrop{animation:fade var(--dur-2) var(--ease)}
.case__head{position:sticky;top:0;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 26px 18px;background:linear-gradient(180deg,rgba(249,248,254,1) calc(100% - 18px),rgba(249,248,254,0))}
.case__head h2{margin-top:10px;font-size:clamp(28px,3.4vw,40px);line-height:1.05;letter-spacing:-.035em;font-weight:700}
.case__sub{margin-top:6px;color:var(--ink-2);max-width:36em}
.badge{display:inline-block;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:650;color:var(--acc-ink);background:#ECE8FF}
.case__body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);padding:6px 26px 28px}
.case__cap{margin:0 0 8px;font-size:13px;font-weight:650;color:var(--ink-2)}
.case__cap:not(:first-child){margin-top:14px}
.strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;padding:4px 2px 12px;scrollbar-width:thin}
.strip img{flex:0 0 auto;scroll-snap-align:start;border-radius:14px;background:#fff;border:1px solid rgba(30,20,90,.08);box-shadow:0 10px 26px -14px rgba(30,20,90,.45)}
.strip--phones img{height:clamp(300px,44vh,420px);width:auto}
.strip--wide{padding-inline:6%}
.strip--wide img{height:auto;width:min(88%,560px);scroll-snap-align:center}
.gal__bar{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.gal__bar .round{width:36px;height:36px}
.gal__bar .round:disabled{opacity:.38;cursor:default}
.gal__prev .ico{rotate:180deg}
.gal__n{min-width:4.6ch;text-align:center;font-size:13px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.case__info h3{font-size:15px;font-weight:650;margin:0 0 10px}
.case__info h3:not(:first-child){margin-top:22px}
.ticks{display:grid;gap:10px}
.ticks li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:50%;background:linear-gradient(145deg,#8E7CFF,#5A45E3);box-shadow:0 0 0 3px rgba(106,85,232,.15)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:550}
.case__note{margin-top:18px;font-size:13.5px;color:var(--ink-2)}
.case__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* ---------- открытие кейса через View Transitions (без поддержки — прежний pop) ---------- */
.case.vt .case__box,.case.vt[open] .case__box{animation:none}
::view-transition{pointer-events:none} /* страница не «замерзает» на время перехода */
html[data-vt=close]::view-transition-group(*){animation-duration:.38s}
::view-transition-group(case-box){animation-duration:.52s;animation-timing-function:var(--ease)}
::view-transition-image-pair(case-box){border-radius:26px;overflow:hidden}
::view-transition-old(case-box),::view-transition-new(case-box){height:100%;object-fit:cover;object-position:50% 0}
::view-transition-old(case-box){animation:vt-out .26s var(--ease) both}
::view-transition-new(case-box){animation:vt-in .36s .06s var(--ease) both}
::view-transition-group(case-title){animation-duration:.52s;animation-timing-function:var(--ease)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.36s}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mask-up{from{opacity:0;transform:translateY(110%)}}
@keyframes in-rise{from{opacity:0;translate:0 44px}}
@keyframes in-pop{from{opacity:0;scale:.86}}
@keyframes float-a{from{translate:0 -6px}to{translate:0 8px}}
@keyframes float-b{from{translate:0 7px}to{translate:0 -9px}}
@keyframes float-c{from{translate:-3px -5px}to{translate:4px 6px}}
@keyframes au-a{to{transform:translate3d(30%,22%,0) scale(1.2)}}
@keyframes au-b{to{transform:translate3d(-34%,30%,0) scale(.85)}}
@keyframes au-c{to{transform:translate3d(-22%,-34%,0) scale(1.25)}}
@keyframes ring{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(3);opacity:0}}
@keyframes err-in{from{opacity:0;transform:translateY(-4px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop-in{from{opacity:0;transform:scale(.6)}}
@keyframes halo{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
@keyframes ripple{to{transform:scale(1);opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.js [data-reveal]:not(.is-done){opacity:0;transform:translateY(22px);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal].is-in:not(.is-done){opacity:1;transform:none}
/* hero: оркестр загрузки. Заголовок выезжает из маски (слова подзаголовка по очереди), сцена собирается слоями */
.js .hero__copy>*{animation:rise var(--dur-3) var(--ease) both}
.js .hero__copy>.hero__h1{animation:none}
.hero__copy>:nth-child(2){animation-delay:.06s}.hero__copy>:nth-child(4){animation-delay:.24s}.hero__copy>:nth-child(5){animation-delay:.34s}.hero__copy>:nth-child(6){animation-delay:.44s}
.js .hero__title .mask>span{animation:mask-up var(--dur-3) var(--ease) .04s both}
.js .hero__sub .ln>span{animation:mask-up var(--dur-3) var(--ease) .14s both}
.js .hero__sub .ln:nth-of-type(2)>span{animation-delay:.24s}
@media (min-width:961px){
  .js .frame{animation:in-pop 1s var(--ease) .06s both}
  .js .glow{animation:fade 1.4s var(--ease) .2s both}
  .js .dev-browser{animation:in-rise .95s var(--ease) .16s both}
  .js .dev-phone{animation:in-rise 1.05s var(--ease) .28s both}
  .js .chip-card--stat{animation:in-pop .8s var(--ease) .52s both,float-a 6s var(--ease-io) 1.4s infinite alternate both}
  .js .chip-card--flow{animation:in-pop .8s var(--ease) .62s both,float-b 8s var(--ease-io) 1.4s infinite alternate both}
  .js .chip-card--site{animation:in-pop .8s var(--ease) .68s both,float-c 7s var(--ease-io) 1.4s infinite alternate both}
  .js .orb-mini{animation:in-pop .8s var(--ease) .72s both,float-c 5s var(--ease-io) 1.4s infinite alternate both}
  .lite .chip-card,.lite .orb-mini{animation-iteration-count:1,1}
}
@media (hover:hover) and (pointer:fine){.hero:hover .glare{opacity:1}}
/* аврора: три мягких пятна в цветах работ (фиолетовый бренда, мятный Noverim, розовый Melty); движутся только при мыши и не на слабых устройствах */
.hero{isolation:isolate}
.aurora{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none;display:none}
.hero.is-lit .aurora{display:block;animation:fade 1.6s var(--ease) both}
.aurora i{position:absolute;width:62%;aspect-ratio:1;border-radius:50%}
.aurora i:nth-child(1){left:-14%;top:-30%;background:radial-gradient(closest-side,rgba(142,124,255,.3),rgba(142,124,255,0))}
.aurora i:nth-child(2){right:-16%;top:-26%;background:radial-gradient(closest-side,rgba(96,196,160,.24),rgba(96,196,160,0))}
.aurora i:nth-child(3){left:22%;bottom:-40%;width:56%;background:radial-gradient(closest-side,rgba(255,140,178,.2),rgba(255,140,178,0))}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html:not(.lite) .aurora i{will-change:transform;animation:au-a 26s var(--ease-io) infinite alternate}
  html:not(.lite) .aurora i:nth-child(2){animation-name:au-b;animation-duration:32s}
  html:not(.lite) .aurora i:nth-child(3){animation-name:au-c;animation-duration:38s}
  .aurora-off .aurora i,.is-locked .aurora i{animation-play-state:paused}
}

/* ---------- карточки: подсветка за курсором в цвете карточки (внутри стекла и по кромке) ---------- */
.svc--y{--spot:#F2A93B}.svc--p{--spot:#8E7CFF}.svc--b{--spot:#5B8DEF}.svc--t{--spot:#2FB5A3}.svc--r{--spot:#F2668B}
.step{--spot:#8E7CFF}
@media (hover:hover) and (pointer:fine){
  .svc,.step{isolation:isolate}
  :is(.svc,.step)::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(300px circle at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--spot) 18%,transparent),transparent 70%);box-shadow:0 28px 54px -26px color-mix(in srgb,var(--spot) 70%,transparent);opacity:0;transition:opacity var(--dur-2) var(--ease)}
  :is(.svc,.step)::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(220px circle at var(--sx,50%) var(--sy,50%),var(--spot),transparent 72%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity var(--dur-2) var(--ease)}
  :is(.svc,.step):hover::before,:is(.svc,.step):hover::after{opacity:1}
}

/* ---------- курсор (только мышь): обычная стрелка с обводкой, над ссылками и кнопками — квадрат со стрелкой, при нажатии картинка резко меньше.
   Это картинки-курсоры: рисует их сама система, без скриптов и задержки; на телефоне и планшете их нет. Не включаются в режимах повышенной контрастности.
   Картинки — SVG (стрелка и квадрат со стрелкой, четыре состояния), сделаны скриптом студии ---------- */
@media (hover:hover) and (pointer:fine) and (forced-colors:none) and (prefers-contrast:no-preference){
  html{--cur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='i' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath transform='translate(2 2) scale(1.0) translate(-2 -2) translate(2 2)' d='M2 2V24L7.5 19L11 27L14.2 25.6L10.6 17.6H18.4Z' fill='%236A55E8' stroke='%236A55E8' stroke-width='4' stroke-linejoin='bevel'/%3E%3Cpath transform='translate(2 2) scale(1.0) translate(-2 -2)' d='M2 2V24L7.5 19L11 27L14.2 25.6L10.6 17.6H18.4Z' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='bevel'/%3E%3Cpath transform='translate(2 2) scale(1.0) translate(-2 -2)' d='M2 2V24L7.5 19L11 27L14.2 25.6L10.6 17.6H18.4Z' fill='%2314141c'/%3E%3C/svg%3E") 2 2, auto;--cur-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='d' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath transform='translate(2 2) scale(0.82) translate(-2 -2) translate(1 1)' d='M2 2V24L7.5 19L11 27L14.2 25.6L10.6 17.6H18.4Z' fill='%236A55E8' stroke='%236A55E8' stroke-width='4' stroke-linejoin='bevel'/%3E%3Cpath transform='translate(2 2) scale(0.82) translate(-2 -2)' d='M2 2V24L7.5 19L11 27L14.2 25.6L10.6 17.6H18.4Z' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='bevel'/%3E%3Cpath transform='translate(2 2) scale(0.82) translate(-2 -2)' d='M2 2V24L7.5 19L11 27L14.2 25.6L10.6 17.6H18.4Z' fill='%2314141c'/%3E%3C/svg%3E") 2 2, auto;--cur-go:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='g' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect transform='translate(15 15) scale(1.0) translate(-15 -15)' x='4' y='4' width='26' height='26' fill='%236A55E8'/%3E%3Crect transform='translate(15 15) scale(1.0) translate(-15 -15)' x='2' y='2' width='26' height='26' fill='%23fff'/%3E%3Crect transform='translate(15 15) scale(1.0) translate(-15 -15)' x='4' y='4' width='22' height='22' fill='%2314141c'/%3E%3Cpath transform='translate(15 15) scale(1.0) translate(-15 -15)' d='M9 15.5H21M16 10.5L21 15.5L16 20.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 15 15, pointer;--cur-go-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='gd' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect transform='translate(15 15) scale(0.82) translate(-15 -15)' x='3' y='3' width='26' height='26' fill='%236A55E8'/%3E%3Crect transform='translate(15 15) scale(0.82) translate(-15 -15)' x='2' y='2' width='26' height='26' fill='%23fff'/%3E%3Crect transform='translate(15 15) scale(0.82) translate(-15 -15)' x='4' y='4' width='22' height='22' fill='%2314141c'/%3E%3Cpath transform='translate(15 15) scale(0.82) translate(-15 -15)' d='M9 15.5H21M16 10.5L21 15.5L16 20.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 15 15, pointer;cursor:var(--cur)}
  html:active{cursor:var(--cur-down)}
  html :is(a,button:not(:disabled),summary,label,[role=button],[data-case],.tier input,.chip input){cursor:var(--cur-go)}
  html :is(a,button:not(:disabled),summary,label,[role=button],[data-case],.tier input,.chip input):active{cursor:var(--cur-go-down)}
}
/* смена языка: текст гаснет и проявляется */
.i18n-fade{transition:opacity 120ms var(--ease)!important}
.i18n-out{opacity:0!important}

/* ---------- глубина при прокрутке (scroll-driven animations; где их нет — всё статично) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.ready:not(.lite) .bg svg{animation:par-bg linear both;animation-timeline:scroll(root)}
    html.ready:not(.lite) .hero__visual{animation:par-stage linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    html.ready:not(.lite) .orb{animation:par-orb linear both;animation-timeline:view()}
    /* галерея кейса: кадр в центре — в фокусе, соседние приглушены */
    .ready .strip--wide img{animation:slide-focus linear both;animation-timeline:view(inline)}
  }
}
@keyframes par-bg{to{translate:0 -8vh}}
@keyframes par-stage{to{translate:0 90px}}
@keyframes slide-focus{0%{opacity:.45;scale:.93}35%,65%{opacity:1;scale:1}100%{opacity:.45;scale:.93}}
@keyframes par-orb{from{translate:0 46px;rotate:-24deg}to{translate:0 -46px;rotate:24deg}}

/* ---------- responsive ---------- */
@media (max-width:1210px){
  .brand__txt small{display:none}
  .nav__cta{padding:0;width:46px}
  .nav__cta span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* процесс вертикальной лентой (семь шагов в ряд помещаются только на широком экране): рельс слева, конец рельса (--rail-e) считает скрипт по высоте последней карточки */
@media (max-width:1240px){
  .steps{grid-template-columns:1fr;padding:0 0 0 34px}
  .steps::before,.steps::after{left:9px;right:auto;top:30px;bottom:var(--rail-e,30px);width:2px;height:auto}
  .steps::after{transform-origin:50% 0;transform:scaleY(var(--p))}
  .step__top::before,.step__top::after{left:-32px;top:22px}
}
@media (max-width:1100px){
  .nav__links a{padding:9px 11px}
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .svc,.svc:nth-child(n+4){grid-column:auto;min-height:0}
  .svc:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:960px){
  .hero{grid-template-columns:1fr}
  .hero__visual{max-width:480px}
  .about,.faq,.contact{grid-template-columns:1fr}
  .perks__grid,.demos{grid-template-columns:repeat(2,1fr)}
  .tierpanel{grid-template-columns:1fr}
  .wk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nv{grid-template-columns:1fr}
  .nv__shots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;padding:4px 2px 14px}
  .nv__ph{flex:0 0 min(34%,150px);scroll-snap-align:start}
  .nv__ph:nth-child(even){translate:none}
  .case__body{grid-template-columns:1fr}
}
@media (max-width:1000px){
  .nav__links{position:absolute;left:0;right:0;top:calc(100% + 8px);display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:22px;background:rgba(250,249,255,.9);border:1px solid #fff;box-shadow:var(--shadow-2);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
    visibility:hidden;opacity:0;transform:translateY(-8px) scale(.98);transform-origin:50% 0;transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility 0s linear var(--dur-2)}
  .nav.is-open .nav__links{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .nav__links li{opacity:0;transform:translateY(-6px);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
  .nav.is-open .nav__links li{opacity:1;transform:none;transition-delay:calc(40ms + var(--i,0) * 28ms)}
  .nav__links a{padding:14px 16px;font-size:16px}
  .nav__links a::after{left:16px;right:auto;width:28px;bottom:8px}
  .nav__links .only-m{display:block}
  .nav__burger,.nav__tg{display:grid}
  .nav__right{margin-left:auto}
  .nav__cta{display:none}
}
@media (max-width:640px){
  :root{--r-xl:24px}
  .brand__txt small{display:none}
  .sec-head{flex-direction:column;align-items:flex-start;gap:10px}
  .services__grid,.wk-grid{grid-template-columns:1fr}
  .wk-filters button{min-height:44px}
  .tiers{grid-template-columns:repeat(4,1fr);gap:8px;row-gap:18px}
  .tier__box{padding:10px 2px;min-height:70px}
  .tier__box b{font-size:19px}
  .tier__box small{font-size:11.5px;overflow-wrap:anywhere}
  .perks__grid,.demos{grid-template-columns:1fr}
  .tierpanel .btn,.contact__btns .btn{width:100%}
  .tierpanel .btn{white-space:normal;padding-block:10px;line-height:1.25}
  .demo__meta{flex-wrap:wrap;row-gap:12px}
  .demo__go{width:100%;justify-content:center}
  .stats{grid-template-columns:1fr;padding:6px 18px}
  .stats li{flex-direction:row;align-items:center;gap:14px;padding:14px 0}
  .stats li+li{border-left:0;border-top:1px solid var(--line)}
  .stats b{font-size:28px;min-width:2ch}
  .hero__cta .btn{flex:1 1 100%}
  .chip-card--stat{top:auto;right:auto;bottom:4%;left:0;padding:10px 14px}
  .chip-card--flow,.orb-mini{display:none}
  .chip-card--site{left:0;top:2%;gap:8px;padding:5px 12px 5px 5px}
  .chip-card--site img{width:52px;height:32px;border-radius:9px}
  .chip-card--site b{font-size:13px}
  .chip-card--site small{font-size:11px}
  .case__head{position:relative;padding:18px 70px 12px 18px;background:none}
  .case__head .round{position:fixed;top:26px;right:26px;z-index:5;box-shadow:0 8px 22px -8px rgba(30,20,90,.5)}
  .case__body{padding:4px 18px 22px}
  .brief__foot .btn{width:100%}
}
@media (max-width:400px){.nav{gap:8px}.brand__txt{display:none}}
@media (max-width:340px){.nav .lang button{min-width:38px;padding:0 6px}.nav__right{gap:6px}} /* на узком экране у знака нет подписи: место нужно кнопке Telegram */
@media (pointer:coarse){
  .brand{min-height:44px}
  .lang button{height:40px;min-width:44px}
  .round,.gal__bar .round{width:44px;height:44px}
  .chip span{min-height:44px}
  .wk-filters button{min-height:44px}
  .contact__item a{display:inline-block;padding:13px 0;margin:-13px 0}
  .addon__all{padding:11px 0;margin-block:-11px}
  .foot a{display:inline-block;padding:11px 0;margin:-11px 0}
}

@media (prefers-reduced-motion:reduce){
  html,.strip{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .steps{--p:1}
  .step__top::after{opacity:1;scale:1}
  .js [data-reveal]:not(.is-done){opacity:1;transform:none}
}

/* ===== строка «Можно добавить», «Модули», «Пакеты», подписи ступеней в форме, «Фишки для вашего бизнеса» ===== */
.tierpanel__start{margin-top:8px;font-size:13.5px;font-weight:650;line-height:1.4;color:var(--acc-ink)}
.addon{margin-top:14px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.addon__t{font-weight:650;color:var(--ink)}
.addon__all{display:inline-block;margin-left:4px;font-weight:650;color:var(--acc-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;white-space:nowrap}
.addon__all::after{content:" →";content:" →" / ""}
.demo-item{display:flex;flex-direction:column;gap:10px}
.demos:has(.demo-item){align-items:start}
.demo-item .demo{flex:none;height:auto}
@media (min-width:961px){.demos:has(.demo-item:only-child){grid-template-columns:minmax(0,440px)}} /* один пример — карточка пошире, чтобы подпись не ломалась */
.modules,.packs{margin-top:clamp(14px,2vw,24px)}
.mods__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mod{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2.2vw,24px)}
.mod__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.mod__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#E4DBFF;color:#4A33C8}
.mod__price{font-size:26px;line-height:1;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--acc-ink)}
.mod h3{font-size:clamp(18px,1.8vw,20px);line-height:1.2;letter-spacing:-.02em;font-weight:680}
.mod p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.mod__foot{margin-top:auto;padding-top:8px}
.mod__demo{width:100%;min-height:44px;padding:10px 16px;gap:8px;font-size:14px}
.mod__ask{display:inline-flex;align-items:center;min-height:44px;font-size:13.5px;color:var(--ink-2)}
.packs__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pack{display:flex;flex-direction:column;gap:14px;padding:clamp(18px,2.4vw,28px)}
.pack--best{box-shadow:0 1px 0 #fff inset,0 0 0 2px rgba(255,190,70,.6),0 26px 50px -26px rgba(200,130,0,.5)}
.pack .tierpanel__badge{align-self:flex-start}
.pack h3{font-size:clamp(22px,2.4vw,28px);line-height:1.12;letter-spacing:-.03em;font-weight:700}
.pack .tierpanel__badge+h3{margin-top:-2px}
.pack__parts{display:grid}
.pack__parts li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.pack__parts li:first-child{border-top:0}
.pack__parts b{flex:none;font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink)}
.pack__sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:auto}
.pack__was{font-size:14.5px;color:var(--ink-3)}
.pack__was s{font-size:17px;font-variant-numeric:tabular-nums;text-decoration-thickness:1.5px}
.pack__new{font-size:clamp(34px,3.6vw,44px);line-height:1;letter-spacing:-.04em;font-weight:700;font-variant-numeric:tabular-nums;color:var(--acc-ink)}
.pack__save{display:inline-flex;gap:4px;padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:700;line-height:1.3;background:#CFF5EF;color:#0A675F}
.pack__acts{display:flex;flex-wrap:wrap;gap:10px}
.pack__demo{min-height:44px;padding:10px 16px;gap:8px;font-size:14px}
/* форма: вилки бюджета с подписью ступеней, цены пакетов и модулей в чипах */
.chip span{gap:6px}
.chip i{font-style:normal}
.field__hint{margin:-2px 0 0;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.mods__grid+.prices__admin{margin-top:20px}
.chips--sub{display:grid;grid-template-columns:repeat(3,1fr)}
.chip--sub{display:flex}
.chip--sub span{flex:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:56px;padding:9px 14px;border-radius:18px}
.chip--sub b{font-size:14px;font-weight:650;line-height:1.2}
.chip--sub small{font-size:12px;font-weight:500;line-height:1.25;color:var(--ink-2)}
.chip--sub input:checked+span small{color:rgba(255,255,255,.78)}
.chip__p{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;color:var(--acc-ink)}
.chip input:checked+span .chip__p{color:#CFC6FF}
/* акция «Первые 10 клиентов»: плашка над ценами, подарок в панели ступени, «Запуск без забот» */
.promo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin:0 0 clamp(14px,2vw,22px);padding:clamp(16px,2.2vw,22px) clamp(18px,2.6vw,28px);background:linear-gradient(180deg,#FFF7DF,#FFEFC4);border:1px solid #FFE1A0;box-shadow:0 1px 0 #fff inset,0 18px 36px -24px rgba(200,130,0,.55)}
.promo__main{flex:1 1 360px;min-width:0}
.promo__p{font-size:16px;line-height:1.5;color:#2B2000}
.promo__p b{font-weight:700}
.promo__ic{margin-right:2px;font-size:20px}
.promo__bonus{margin-top:6px;font-size:14px;line-height:1.5;color:#6B4A00}
.promo__bonus b{font-weight:650}
.promo__hint{margin-top:4px;font-size:13px;line-height:1.45;color:#6B4A00}
.promo__left{flex:none;display:inline-flex;align-items:baseline;gap:6px;padding:8px 18px;border-radius:999px;background:#fff;font-size:15px;font-weight:650;color:#5A3A00;box-shadow:0 1px 0 #fff inset,0 8px 18px -12px rgba(180,110,0,.7)}
.promo__left [data-i18n]:empty{display:none} /* в английской версии перед числом слов нет */
.promo__left b{font-size:24px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tierpanel__bonus{margin-top:18px;display:grid;gap:10px}
.gift{padding:12px 14px;border-radius:14px;background:#FFF3CF;border:1px solid #FFE1A0;font-size:14px;line-height:1.5;color:#3E2C00}
.gift__t{font-weight:700;color:#5A3A00}
.launch-line{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.launch-line .ico{width:18px;height:18px;margin-top:2px;color:var(--acc-ink)}
.launch{margin-top:18px;padding:clamp(16px,2.2vw,24px)}
.launch__head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.launch__ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:#E4DBFF;color:#4A33C8}
.launch h3{font-size:clamp(19px,2vw,22px);line-height:1.2;letter-spacing:-.02em;font-weight:680}
.launch__head p{font-size:13.5px;color:var(--ink-2)}
.launch__list{grid-template-columns:repeat(2,1fr);gap:10px 28px}
/* «Если сайт у вас уже есть» */
.existing{margin-top:clamp(14px,2vw,24px)}
.ex__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ex{display:flex;flex-direction:column;gap:6px;padding:clamp(18px,2.2vw,24px)}
.ex__price{font-size:28px;line-height:1.1;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--acc-ink)}
.ex__price small{font-size:13px;font-weight:600;letter-spacing:0;color:var(--ink-2)}
.ex h3{margin-top:6px;font-size:18px;line-height:1.25;letter-spacing:-.02em;font-weight:680}
.ex p:last-child{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.ex__cta{margin-top:20px}
/* «Приведи клиента» */
.referral{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(18px,3vw,40px);align-items:start}
.referral__lead{margin-top:12px;font-size:17px;line-height:1.5;color:var(--ink-2)}
.referral .ticks{margin-top:18px}
.referral .ticks li{font-size:15.5px;color:var(--ink)}
.referral__rules{margin-top:16px;max-width:44em;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.refgen{padding:clamp(18px,2.6vw,28px)}
.refgen h3{margin-bottom:16px;font-size:20px;letter-spacing:-.02em;font-weight:650}
.refgen__out{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.refgen__cap{margin-bottom:8px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.refgen textarea{resize:none;overflow:hidden;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.refgen__act{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
@media (max-width:960px){.mods__grid{grid-template-columns:repeat(2,1fr)}.packs__grid{grid-template-columns:1fr}.ex__grid{grid-template-columns:repeat(2,1fr)}.referral{grid-template-columns:1fr}}
@media (max-width:640px){.ex__grid,.launch__list{grid-template-columns:1fr}.refgen__act .btn{flex:1 1 100%}.promo__left{align-self:flex-start}.refgen .btn,.ex__cta .btn{white-space:normal;padding-block:10px;line-height:1.25}.refgen form .btn,.ex__cta .btn{width:100%}}
@media (max-width:640px){.mods__grid{grid-template-columns:1fr}.chips--sub{grid-template-columns:repeat(2,1fr)}.pack__acts .btn{flex:1 1 100%;white-space:normal;line-height:1.25}}
.prices__admin{margin-top:12px;max-width:56em;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.prices__support{margin-top:10px;max-width:56em;font-size:14.5px;line-height:1.5;font-weight:600;color:var(--ink)}
.features{margin-top:clamp(14px,2vw,24px)}
.feat__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.feat{padding:clamp(18px,2.4vw,26px)}
.feat h3{font-size:clamp(19px,2vw,22px);line-height:1.2;letter-spacing:-.02em;font-weight:680}
.feat__list{margin-top:10px;display:grid}
.feat__list li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:6px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.35}
.feat__list li:first-child{border-top:0}
.feat__link{display:flex;flex:1;align-items:center;justify-content:space-between;gap:12px;min-height:44px;color:var(--ink);text-decoration:none}
.feat__nm{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-width:0}
.feat__n{font-weight:550}
.feat__tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:650;line-height:1.35;white-space:nowrap;background:#E4DBFF;color:#4A33C8}
.feat__go{display:inline-flex;flex:none;align-items:center;gap:5px;font-size:13px;font-weight:650;color:var(--acc-ink)}
.feat__go .ico{width:15px;height:15px}
.feat__ask{flex:none;font-size:13px;color:var(--ink-2)}
@media (hover:hover){.feat__link:hover .feat__n{text-decoration:underline;text-underline-offset:3px}}
.feat__link:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:8px}
@media (max-width:960px){.feat__grid{grid-template-columns:1fr}}

/* ===== задание 3: набросок, подбор, калькулятор, «Без риска», отзывы, схема работы, таджикский язык ===== */
/* переключатель RU / TJ / EN: у TJ значок «бета», пока перевод не проверен; плашка «бета» видна только в таджикской версии */
.lang button{position:relative}
.lang__beta{position:absolute;top:-8px;right:-4px;padding:1px 5px;border-radius:999px;font-size:8.5px;font-weight:750;letter-spacing:.04em;line-height:1.35;text-transform:uppercase;pointer-events:none;color:#5A3A00;background:linear-gradient(145deg,#FFE9B3,#FFC95E);box-shadow:0 3px 8px -3px rgba(180,110,0,.6)}
.beta{padding:12px 18px;border-radius:18px;font-size:14px;line-height:1.45;text-align:center;color:#5A3A00;background:linear-gradient(180deg,#FFF7DF,#FFEFC4);border:1px solid #FFE1A0}
/* бесплатный набросок: под главным экраном */
.sketch{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(18px,3vw,44px);align-items:center}
.sketch__lead{margin-top:14px;max-width:30em;font-size:clamp(16px,1.4vw,18px);line-height:1.5;color:var(--ink-2)}
.sketch__steps{display:grid;gap:12px;margin-top:20px;counter-reset:sk}
.sketch__steps li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.sketch__steps li::before{counter-increment:sk;content:counter(sk);flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:650;color:#fff;background:linear-gradient(145deg,#8E7CFF,#5A45E3)}
.sketchform{padding:clamp(18px,2.6vw,28px)}
.sketchform form h3{margin-bottom:16px;font-size:20px;letter-spacing:-.02em;font-weight:650}
.sketchform form .btn{width:100%}
.sketch__note{margin-top:12px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.prices__calc{margin-top:10px;font-size:14px}
.prices__calc .addon__all{white-space:normal;margin-left:0}
/* подбор за 30 секунд */
.quiz__box{padding:clamp(18px,2.6vw,30px)}
.quiz__top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:18px}
.quiz__step{font-size:13px;font-weight:650;color:var(--ink-2)}
.quiz__step b{color:var(--ink);font-variant-numeric:tabular-nums}
.quiz__bar{flex:1 1 140px;height:6px;border-radius:6px;overflow:hidden;background:rgba(106,85,232,.16)}
.quiz__bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#B3A6FF,#5A45E3);transform-origin:0 50%;transform:scaleX(.25);transition:transform var(--dur-3) var(--ease)}
.quiz__back{min-height:44px;padding:0 4px;font-size:14px;font-weight:600;color:var(--acc-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.quiz__q{margin:0;padding:0;border:0;min-width:0}
.quiz__q:not([hidden]){animation:rise var(--dur-3) var(--ease) both}
.quiz__legend{padding:0;margin-bottom:16px;font-size:clamp(20px,2.4vw,28px);line-height:1.2;letter-spacing:-.025em;font-weight:680;text-wrap:balance}
.quiz__opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.quiz__opts--wide{grid-template-columns:repeat(2,1fr)}
.quiz__q[data-q="4"] .quiz__opts{grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr))}
.quiz__opts--wide .qopt:last-child:nth-child(odd){grid-column:1/-1}
.quiz__q[data-q="4"] .quiz__opts .qopt:last-child:nth-child(odd){grid-column:auto}
.qopt{display:flex;align-items:center;min-height:64px;padding:14px 18px;border-radius:var(--r-md);background:rgba(255,255,255,.82);border:1px solid var(--line);text-align:left;font-size:16px;font-weight:600;line-height:1.3;transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.qopt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.qopt:active{transform:scale(.98)}
@media (hover:hover){.qopt[aria-pressed="false"]:hover{background:#fff;border-color:rgba(106,85,232,.45)}}
.quiz__res{display:grid;gap:12px}
.quiz__res:not([hidden]){animation:rise var(--dur-3) var(--ease) both}
.quiz__kicker{font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-ink)}
.quiz__tier{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:clamp(28px,3.4vw,42px);line-height:1.1;letter-spacing:-.035em;font-weight:700}
.quiz__tier:focus{outline:0}
.quiz__price{color:var(--acc-ink)}
.quiz__res .tierpanel__time{margin-top:0}
.quiz__lead{max-width:40em;font-size:16px;line-height:1.5;color:var(--ink-2)}
.quiz__up{padding:12px 14px;border-radius:14px;background:#EEF0FF;border:1px solid rgba(106,85,232,.22);font-size:14px;line-height:1.5}
.quiz__rows{display:grid;gap:8px;margin:0}
.quiz__rows>div{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:15px;line-height:1.5}
.quiz__rows dt{font-weight:650}
.quiz__rows dd{margin:0;color:var(--ink-2)}
.qex .tierpanel__cap{margin-bottom:8px}
.qex__a{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;padding:12px 14px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line);transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.qex__t b{display:block;font-size:17px;font-weight:650;letter-spacing:-.015em;line-height:1.25}
.qex__t small{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--ink-2)}
.qex__note{margin-top:8px;font-size:13px;line-height:1.45;color:var(--ink-2)}
@media (hover:hover){.qex__a:hover{border-color:rgba(106,85,232,.45);transform:translateY(-2px)}.qex__a:hover .demo__go{background:var(--acc-ink)}}
.quiz__act{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
/* калькулятор */
.calc__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:14px;align-items:start}
.calc__ctl{padding:clamp(18px,2.6vw,28px)}
.calc__ctl .field:last-child{margin-bottom:0}
.calc__mini{display:none}
.calc__out{position:sticky;top:96px;display:grid;gap:14px;padding:clamp(18px,2.6vw,28px)}
.calc__out h3{font-size:20px;letter-spacing:-.02em;font-weight:650}
.calc__lines li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.calc__lines li:first-child{border-top:0}
.calc__p{flex:none;font-weight:650;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
.calc__lines .is-gift s{font-weight:500;color:var(--ink-3)}
.calc__lines .is-gift em{font-style:normal;font-weight:650;color:#0A675F}
.calc__gift{padding:10px 12px;border-radius:12px;background:#FFF3CF;border:1px solid #FFE1A0;font-size:13px;line-height:1.45;color:#3E2C00}
.calc__pack{display:grid;gap:6px;padding:14px;border-radius:16px;background:#E6F8F4;border:1px solid #BFEBE2}
.calc__pack-t{font-size:15px;font-weight:700;line-height:1.35;color:#08574F}
.calc__pack-more{font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.calc__pack-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.calc__total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-top:12px;border-top:2px solid var(--ink)}
.calc__total>span{font-size:15px;font-weight:650}
.calc__total output{font-size:clamp(34px,3.6vw,44px);line-height:1;letter-spacing:-.04em;font-weight:700;font-variant-numeric:tabular-nums;color:var(--acc-ink)}
.calc__tjs{display:flex;justify-content:flex-end;align-items:baseline;gap:6px;margin-top:-6px;font-size:15px;color:var(--ink-2)}
.calc__tjs b{font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.calc__note{font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.calc__note #calc-rate{display:block;margin-top:2px}
.calc__act{display:flex;flex-wrap:wrap;gap:10px}
.chip__inc{margin-left:2px;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:700;background:#CFF5EF;color:#0A675F}
.chip input:disabled{cursor:not-allowed}
.chip input:disabled+span>i:not(.chip__inc){opacity:.6}
/* «Без риска» */
.risk__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.riskc{display:flex;flex-direction:column;gap:10px;padding:clamp(16px,1.8vw,22px)}
.riskc__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,#CFF5EF,#88E1D5);color:#0A675F}
.riskc h3{font-size:17px;line-height:1.25;letter-spacing:-.015em;font-weight:680}
.riskc p{font-size:14px;line-height:1.5;color:var(--ink-2)}
.risk__cta{margin-top:20px}
/* отзывы */
.reviews__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.rv{display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2.2vw,26px)}
.rv h3{font-size:clamp(18px,1.8vw,21px);line-height:1.25;letter-spacing:-.02em;font-weight:680}
.rv p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.rv__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,#FFEABD,#FFCF7A);color:#7A4D00}
.rv--new{background:linear-gradient(180deg,#FFF7DF,#FFEFC4);border-color:#FFE1A0}
.rv--new .btn{align-self:flex-start}
.rv__left{display:inline-flex;align-items:baseline;gap:6px;align-self:flex-start;padding:7px 16px;border-radius:999px;background:#fff;font-size:14px;font-weight:650;color:#5A3A00}
.rv__left [data-i18n]:empty{display:none}
.rv__left b{font-size:22px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rv--slot{justify-content:center;border:2px dashed rgba(106,85,232,.3);background:rgba(255,255,255,.45);box-shadow:none}
.rv blockquote{margin:0}
.rv blockquote p{font-size:16px;line-height:1.55;color:var(--ink)}
.rv__who b{display:block;font-weight:650}
.rv__who span{display:block;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.rv__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.rv__acts .btn{min-height:44px;padding:0 16px;font-size:14px}
/* схема «Как будем работать»: семь шагов, у каждого срок */
.step__time{display:flex;align-items:flex-start;gap:6px;margin-top:auto;padding-top:4px;font-size:12.5px;font-weight:650;line-height:1.35;color:var(--acc-ink)}
.step__time .ico{width:15px;height:15px;margin-top:1px}
.step h3,.step p{overflow-wrap:anywhere}
@media (max-width:1100px){.risk__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:960px){
  .sketch,.calc__grid{grid-template-columns:1fr}
  .calc__out{position:static}
  /* на телефоне итог держится у верхнего края, пока выбираете модули: иначе его видно только внизу после всех кнопок */
  .calc__mini{position:sticky;top:78px;z-index:3;display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 14px;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.95);border:1px solid var(--line);box-shadow:var(--shadow-1);font-size:14px;font-weight:650}
  .calc__mini b{font-size:17px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--acc-ink)}
  .calc__mini span{white-space:nowrap}
  .calc__mini small{font-size:13px;font-weight:550;white-space:nowrap;color:var(--ink-2)}
  .quiz__opts{grid-template-columns:repeat(2,1fr)}
  .quiz__opts .qopt:last-child:nth-child(odd){grid-column:1/-1}
  .quiz__q[data-q="4"] .quiz__opts .qopt:last-child:nth-child(odd){grid-column:auto}
}
@media (max-width:760px){.risk__grid{grid-template-columns:repeat(2,1fr)}.riskc:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:640px){
  .quiz__opts,.quiz__opts--wide{grid-template-columns:1fr}
  .quiz__q[data-q="4"] .quiz__opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quiz__act .btn,.calc__act .btn{flex:1 1 100%}
  .btn{white-space:normal;padding-block:10px;line-height:1.25} /* на телефоне подпись кнопки переносится на вторую строку, а не раздвигает страницу (длинные подписи — в английской и таджикской версиях) */
  .risk__cta .btn,.rv--new .btn{width:100%}
  .calc__tjs{justify-content:flex-start}
}
@media (max-width:420px){.risk__grid{grid-template-columns:1fr}}