@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(/onest-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(/onest-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(/onest-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500 700;font-display:swap;src:url(/unbounded-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500 700;font-display:swap;src:url(/unbounded-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500 700;font-display:swap;src:url(/unbounded-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@property --c1{syntax:'<color>';inherits:true;initial-value:#4b5bff}
@property --c2{syntax:'<color>';inherits:true;initial-value:#14b8a6}
@property --c3{syntax:'<color>';inherits:true;initial-value:#c084fc}
:root{
  --sf:"Onest","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --disp:"Unbounded","Onest",-apple-system,"Segoe UI",system-ui,sans-serif;
  --bg:#060914; --bg2:#0b1226; --fg:#eef2fb; --fg-soft:#aab4cd; --fg-mute:#7787a8;
  --glass:rgba(255,255,255,.055); --glass2:rgba(255,255,255,.09); --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.2);
  --teal:#46e3c4; --indigo:#8794ff; --rose:#ff94ca; --on-grad:#06101c;
  --grad:linear-gradient(110deg,var(--teal),var(--indigo) 55%,var(--rose));
  --shadow:0 24px 70px rgba(0,0,0,.5);
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --r:28px; color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#eef0fa; --bg2:#e2e7f8; --fg:#10162d; --fg-soft:#46537a; --fg-mute:#6a769b;
  --glass:rgba(255,255,255,.6); --glass2:rgba(255,255,255,.86); --line:rgba(16,22,45,.09); --line2:rgba(16,22,45,.17);
  --teal:#07a085; --indigo:#4756d6; --rose:#d6428a; --on-grad:#fff; --shadow:0 24px 70px rgba(40,50,110,.18); color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:90px;}
body{margin:0; min-height:100vh; background:var(--bg); color:var(--fg); font-family:var(--sf); font-size:17px; line-height:1.5; letter-spacing:-.011em; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  --c1:#4b5bff; --c2:#14b8a6; --c3:#c084fc; transition:--c1 1.4s ease,--c2 1.4s ease,--c3 1.4s ease,background .6s;}
body[data-tone="services"]{--c1:#14b8a6; --c2:#4b5bff; --c3:#38bdf8;}
body[data-tone="calc"]{--c1:#6366f1; --c2:#ec4899; --c3:#14b8a6;}
body[data-tone="process"]{--c1:#0ea5a4; --c2:#6366f1; --c3:#22d3ee;}
body[data-tone="cases"]{--c1:#ec4899; --c2:#6366f1; --c3:#f59e0b;}
body[data-tone="faq"]{--c1:#6366f1; --c2:#14b8a6; --c3:#a855f7;}
body[data-tone="cta"]{--c1:#14b8a6; --c2:#ec4899; --c3:#6366f1;}
body.locked{overflow:hidden;}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4,.price,.metric b,.case-metrics b,.fc-est b,.fc-chip b,.dock b,.svc-n,.logo span{font-family:var(--disp);}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; color:inherit; cursor:pointer;}
svg{display:block;}
img{max-width:100%;}
:focus-visible{outline:2px solid var(--indigo); outline-offset:3px; border-radius:10px;}
::selection{background:var(--indigo); color:#fff;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.skip{position:absolute; left:-999px; top:8px; background:var(--fg); color:var(--bg); padding:10px 16px; border-radius:10px; z-index:300;}
.skip:focus{left:8px;}

/* ---------- фон: цветокор ---------- */
.aurora{position:fixed; inset:0; z-index:-3; overflow:hidden; pointer-events:none; background:
  radial-gradient(1200px 700px at 50% -10%, color-mix(in srgb,var(--c1) 14%,transparent), transparent 70%), var(--bg);}
.aurora i{position:absolute; border-radius:50%; filter:blur(100px); opacity:.42; will-change:transform; mix-blend-mode:screen;
  transform:translate3d(calc(var(--px,0)*var(--k)*1px), calc(var(--py,0)*var(--k)*1px + var(--sy,0)*var(--k2)*1px),0); animation:float 26s ease-in-out infinite;}
:root[data-theme="light"] .aurora i{mix-blend-mode:normal; opacity:.34; filter:blur(110px);}
.aurora .a1{width:62vmax; height:62vmax; left:-18vmax; top:-22vmax; background:var(--c1); --k:46; --k2:-60;}
.aurora .a2{width:56vmax; height:56vmax; right:-20vmax; bottom:-18vmax; background:var(--c2); --k:-38; --k2:-30; animation-delay:-9s;}
.aurora .a3{width:38vmax; height:38vmax; right:8vmax; top:18vh; background:var(--c3); --k:60; --k2:-90; animation-delay:-16s; opacity:.28;}
@keyframes float{0%,100%{translate:0 0;} 33%{translate:3vmax -2vmax;} 66%{translate:-2vmax 3vmax;}}
.grain{position:fixed; inset:-50%; z-index:-1; pointer-events:none; opacity:.07; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 1.2s steps(6) infinite;}
:root[data-theme="light"] .grain{opacity:.05; mix-blend-mode:multiply;}
@keyframes grain{0%{transform:translate(0,0);}25%{transform:translate(-3%,2%);}50%{transform:translate(2%,-3%);}75%{transform:translate(-2%,-2%);}100%{transform:translate(0,0);}}
.vignette{position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,.38)); }
:root[data-theme="light"] .vignette{background:radial-gradient(ellipse at 50% 40%, transparent 60%, rgba(60,70,140,.12));}
.cursor-glow{position:fixed; left:0; top:0; width:560px; height:560px; border-radius:50%; pointer-events:none; z-index:-1; opacity:0; transition:opacity .6s;
  background:radial-gradient(circle, color-mix(in srgb,var(--indigo) 20%,transparent), transparent 66%); transform:translate3d(calc(var(--cx,0px) - 50%),calc(var(--cy,0px) - 50%),0);}
.cursor-glow.on{opacity:1;}
.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:120; transform-origin:0 50%; transform:scaleX(0); background:var(--grad);}

/* ---------- кнопки ---------- */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 28px; border-radius:999px; font:600 16px/1 var(--sf); letter-spacing:-.01em; border:1px solid transparent; cursor:pointer; white-space:nowrap; isolation:isolate; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, border-color .3s;}
.btn svg{transition:transform .4s var(--ease);}
.btn:hover svg{transform:translate(2px,-2px);}
.btn:active{transform:scale(.965);}
.btn-primary{background:var(--grad); color:var(--on-grad); box-shadow:0 12px 36px -10px color-mix(in srgb,var(--indigo) 75%,transparent), inset 0 1px 0 rgba(255,255,255,.4);}
.btn-primary::after{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); transform:translateX(-130%); transition:transform .9s var(--ease);}
.btn-primary:hover::after{transform:translateX(130%);}
.btn-primary:hover{box-shadow:0 18px 46px -10px color-mix(in srgb,var(--indigo) 85%,transparent), inset 0 1px 0 rgba(255,255,255,.5);}
.btn-glass{background:var(--glass); border-color:var(--line2); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);}
.btn-glass:hover{background:var(--glass2);}
.btn-sm{padding:11px 20px; font-size:14.5px;}
.btn-block{width:100%;}
.mag{will-change:transform;}
.icon-btn{width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--glass); display:flex; align-items:center; justify-content:center; flex:none; transition:transform .5s var(--ease), background .3s;}
.icon-btn:hover{background:var(--glass2); transform:rotate(14deg) scale(1.06);}

/* ---------- шапка ---------- */
header.site{position:fixed; left:0; right:0; top:12px; z-index:80; display:flex; justify-content:center; pointer-events:none; transition:transform .6s var(--ease);}
header.site.hide{transform:translateY(-150%);}
.hbar{pointer-events:auto; display:flex; align-items:center; gap:14px; width:min(1080px,calc(100% - 24px)); padding:8px 8px 8px 20px; border-radius:999px;
  background:color-mix(in srgb,var(--bg) 52%,transparent); backdrop-filter:blur(24px) saturate(1.7); -webkit-backdrop-filter:blur(24px) saturate(1.7); border:1px solid var(--line);
  box-shadow:0 14px 44px rgba(0,0,0,.22); animation:barIn 1.1s var(--ease) both .1s;}
@keyframes barIn{from{opacity:0; transform:translateY(-30px) scale(.96);}}
.logo{display:flex; align-items:center; gap:9px; font-weight:600; font-size:17px; letter-spacing:-.03em;}
.logo-mark{width:24px; height:24px; flex:none;}
nav.main{display:none; position:relative; margin:0 auto; gap:2px; padding:3px; border-radius:999px;}
nav.main a{position:relative; z-index:1; padding:8px 15px; font-size:14px; font-weight:500; color:var(--fg-soft); border-radius:999px; transition:color .3s;}
nav.main a:hover,nav.main a.active{color:var(--fg);}
.nav-ind{position:absolute; top:3px; bottom:3px; left:0; width:0; border-radius:999px; background:var(--glass2); border:1px solid var(--line); transition:transform .6s var(--ease), width .6s var(--ease), opacity .3s; opacity:0;}
.hr{display:flex; align-items:center; gap:8px; margin-left:auto;}
.burger{display:flex; flex-direction:column; gap:5px;}
.burger span{width:16px; height:1.6px; background:currentColor; border-radius:2px; transition:transform .5s var(--ease), opacity .3s;}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg);}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg);}
.burger:hover{transform:none;}
@media(min-width:900px){ nav.main{display:flex;} .burger{display:none;} .menu{display:none !important;} }
@media(max-width:560px){ .hr .btn{display:none;} }
.menu{position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:90px 32px 40px; background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(30px) saturate(1.6); -webkit-backdrop-filter:blur(30px) saturate(1.6); opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .5s var(--ease), transform .6s var(--ease), visibility .5s;}
.menu.open{opacity:1; visibility:visible; transform:none;}
.menu a.ml{font-family:var(--disp); font-size:clamp(26px,8vw,40px); font-weight:600; letter-spacing:-.04em; padding:6px 0; opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--i)*60ms + 120ms);}
.menu.open a.ml{opacity:1; transform:none;}
.menu .hint{margin-top:26px; font-size:13px; color:var(--fg-mute);}

/* ---------- reveal ---------- */
.js .rv{opacity:0; transform:translate3d(0,38px,0) scale(.985); transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:calc(var(--i,0)*90ms);}
.js .rv.in{opacity:1; transform:none;}
.js .rv.done{transition-delay:0s !important;}
.js .rvb{opacity:0; transform:translate3d(0,26px,0); filter:blur(10px); transition:opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay:calc(var(--i,0)*90ms);}
.js .rvb.in{opacity:1; transform:none; filter:none;}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:130px 0 70px; overflow:clip;}
#heroCanvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 35%,transparent 85%); mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 35%,transparent 85%);}
.hero-in{position:relative; z-index:2; opacity:calc(1 - var(--hs,0)*1.15); transform:translate3d(0,calc(var(--hs,0)*-70px),0) scale(calc(1 - var(--hs,0)*.05)); will-change:transform,opacity;}
.badge{display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:999px; background:var(--glass); border:1px solid var(--line2); font-size:14px; color:var(--fg-soft); backdrop-filter:blur(14px); margin-bottom:30px;}
.dot{width:7px; height:7px; border-radius:50%; background:var(--teal); animation:ping 2.2s infinite;}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--teal) 65%,transparent);} 80%,100%{box-shadow:0 0 0 10px transparent;}}
h1.hero-h{font-size:clamp(32px,5.5vw,82px); line-height:1.06; letter-spacing:-.045em; font-weight:600; max-width:1000px; margin:0 auto 30px;}
.w{display:inline-block; overflow:hidden; vertical-align:bottom; padding:0 .04em .14em; margin-bottom:-.14em;}
.w>span{display:inline-block; transform:translateY(112%); opacity:0; filter:blur(10px); animation:wordIn 1.2s var(--ease) forwards; animation-delay:calc(.35s + var(--wi)*.085s);}
@keyframes wordIn{to{transform:none; opacity:1; filter:none;}}
.grad{background:var(--grad); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gshift 9s ease-in-out infinite alternate;}
@keyframes gshift{to{background-position:100% 0;}}
.hero-h .grad{background:none; -webkit-background-clip:border-box; background-clip:border-box; color:inherit; animation:none;}
.hero-h .grad .w>span{background:var(--grad); background-size:520% 100%; background-position:calc((var(--wi) - 2) * 25%) 50%; -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-desc{font-size:clamp(18px,2.1vw,23px); line-height:1.45; color:var(--fg-soft); max-width:700px; margin:0 auto 38px;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
.metrics{position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; width:100%; max-width:920px; margin:64px auto 0;}
@media(min-width:760px){.metrics{grid-template-columns:repeat(4,1fr);}}
.metric{padding:24px 14px; text-align:center; border-radius:24px; background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(18px);}
.metric b{display:block; font-size:clamp(24px,3vw,36px); font-weight:600; letter-spacing:-.04em; font-variant-numeric:tabular-nums; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.metric span{font-size:14px; color:var(--fg-mute);}
.scroll-cue{position:absolute; bottom:22px; left:50%; width:26px; height:42px; margin-left:-13px; border-radius:20px; border:1.5px solid var(--line2); opacity:calc(1 - var(--hs,0)*4); z-index:2;}
.scroll-cue::after{content:''; position:absolute; left:50%; top:8px; width:3px; height:8px; margin-left:-1.5px; border-radius:3px; background:var(--fg-soft); animation:cue 2s var(--ease) infinite;}
@keyframes cue{0%{transform:translateY(0); opacity:1;} 70%{transform:translateY(14px); opacity:0;} 100%{opacity:0;}}
@media(max-height:640px){.scroll-cue{display:none;}}
/* плавающие карточки */
.fc{display:none; position:absolute; z-index:1; padding:16px 18px; border-radius:22px; background:var(--glass); border:1px solid var(--line2); backdrop-filter:blur(20px) saturate(1.5); box-shadow:var(--shadow); text-align:left;
  transform:translate3d(calc(var(--px,0)*var(--d)*1px), calc(var(--py,0)*var(--d)*1px + var(--sy,0)*var(--d2)*1px),0) rotate(var(--rot,0deg)); animation:bob 7s ease-in-out infinite;}
@keyframes bob{0%,100%{translate:0 0;} 50%{translate:0 -12px;}}
@media(min-width:1400px){.fc{display:block;}}
.fc small{font-size:12px; color:var(--fg-mute); letter-spacing:.04em; text-transform:uppercase; font-weight:600;}
.fc-doc{left:3.5%; top:23%; width:236px; --d:-16; --d2:-70; --rot:-5deg;}
.fc-doc .h{display:flex; align-items:center; gap:6px; margin-bottom:14px; font-size:13px; font-weight:600;}
.fc-doc .h i{width:8px; height:8px; border-radius:50%; background:var(--rose);} .fc-doc .h i:nth-child(2){background:#ffd37a;} .fc-doc .h i:nth-child(3){background:var(--teal);} .fc-doc .h span{margin-left:6px; color:var(--fg-soft);}
.fc-doc .r{display:flex; align-items:center; gap:9px; margin:9px 0;}
.fc-doc .r b{width:16px; height:16px; border-radius:50%; background:var(--grad); color:var(--on-grad); font-size:10px; display:grid; place-items:center; flex:none;}
.fc-doc .r span{height:7px; border-radius:6px; background:var(--line2);}
.fc-flow{right:4%; top:19%; width:230px; --d:20; --d2:-50; --rot:4deg; animation-delay:-2s;}
.fc-est{left:6.5%; bottom:19%; width:216px; --d:14; --d2:-30; --rot:3deg; animation-delay:-4s;}
.fc-est b{display:block; font-size:22px; letter-spacing:-.04em; margin:6px 0 2px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.fc-est em{font-style:normal; font-size:13px; color:var(--fg-mute);}
.fc-chip{right:7%; bottom:22%; --d:-22; --d2:-60; --rot:-3deg; display:flex; align-items:center; gap:12px; animation-delay:-5s;}
.fc-chip b{font-size:21px; letter-spacing:-.03em;} .fc-chip span{font-size:13px; color:var(--fg-soft); max-width:110px; line-height:1.3;}

/* ---------- секции ---------- */
section{position:relative; padding:130px 0;}
.eyebrow{display:block; text-align:center; font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; width:fit-content; margin-left:auto; margin-right:auto;}
.sec-h{font-size:clamp(26px,4.3vw,54px); font-weight:600; letter-spacing:-.04em; line-height:1.1; text-align:center; max-width:900px; margin:0 auto 22px;}
.sec-desc{font-size:clamp(17px,2vw,22px); line-height:1.45; color:var(--fg-soft); text-align:center; max-width:720px; margin:0 auto 64px;}
.card{position:relative; background:var(--glass); border:1px solid var(--line); border-radius:var(--r); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  transition:transform .6s var(--ease), border-color .4s, background .4s, box-shadow .5s;}
.card::before{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--indigo) 24%,transparent), transparent 62%);}
.card:hover::before{opacity:1;}
.card:hover{border-color:var(--line2); box-shadow:var(--shadow);}

/* услуги */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.svc-card{padding:34px 30px; display:flex; flex-direction:column; min-height:260px; overflow:hidden;}
.svc-card:nth-child(1),.svc-card:nth-child(4),.svc-card:nth-child(6){grid-column:span 2;}
.svc-n{position:absolute; right:22px; top:18px; font-size:42px; font-weight:600; letter-spacing:-.05em; color:var(--line); line-height:1; transition:color .5s, transform .6s var(--ease);}
.svc-card:hover .svc-n{color:var(--line2); transform:translateY(-4px);}
.svc-ico{width:48px; height:48px; border-radius:15px; display:grid; place-items:center; margin-bottom:22px; background:color-mix(in srgb,var(--indigo) 16%,transparent); color:var(--indigo); border:1px solid color-mix(in srgb,var(--indigo) 30%,transparent); transition:background .4s, color .4s, transform .6s var(--spring);}
.svc-card:nth-child(3n+1) .svc-ico{--h:var(--teal); background:color-mix(in srgb,var(--teal) 15%,transparent); color:var(--teal); border-color:color-mix(in srgb,var(--teal) 32%,transparent);}
.svc-card:nth-child(3n+3) .svc-ico{background:color-mix(in srgb,var(--rose) 15%,transparent); color:var(--rose); border-color:color-mix(in srgb,var(--rose) 32%,transparent);}
.svc-card:hover .svc-ico{transform:scale(1.1) rotate(-6deg);}
.svc-card h3{font-size:19px; font-weight:600; letter-spacing:-.03em; margin-bottom:10px;}
.svc-card p{font-size:16px; color:var(--fg-soft); line-height:1.55; flex:1; max-width:470px;}
.time-badge{margin-top:22px; font-size:12.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-mute);}
.dots{display:none; justify-content:center; gap:7px; margin-top:20px;}
.dots i{width:7px; height:7px; border-radius:7px; background:var(--line2); transition:width .5s var(--ease), background .3s;}
.dots i.on{width:22px; background:var(--grad);}
@media(max-width:860px){
  .svc-grid{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -24px; padding:6px 24px 8px; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-padding:0 24px;}
  .svc-grid::-webkit-scrollbar{display:none;}
  .svc-card,.svc-card:nth-child(n){flex:0 0 min(84vw,360px); grid-column:auto; scroll-snap-align:start; min-height:300px;}
  .dots{display:flex;}
}

/* калькулятор */
.calc-grid{display:grid; grid-template-columns:1fr; gap:28px;}
@media(min-width:980px){.calc-grid{grid-template-columns:1.35fr 1fr; align-items:start; gap:34px;}}
.panel{padding:30px; border-radius:32px;}
.opt-group{margin-bottom:34px;} .opt-group:last-child{margin-bottom:0;}
.opt-group-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
.opt-group-head h4{font-size:17px; font-weight:650; display:flex; align-items:center; gap:10px;}
.opt-group-head h4 .n{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--grad); color:var(--on-grad); font-size:12px; font-weight:700;}
.opt-hint{font-size:13px; color:var(--fg-mute);}
.reset-btn{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--fg-mute); background:none; border:none; padding:4px 2px; transition:color .3s;}
.reset-btn:hover{color:var(--fg);} .reset-btn svg{transition:transform .6s var(--ease);} .reset-btn:hover svg{transform:rotate(-180deg);}
.task-grid{display:grid; grid-template-columns:1fr; gap:10px;} @media(min-width:560px){.task-grid{grid-template-columns:1fr 1fr;}}
.vol-grid{display:grid; grid-template-columns:1fr; gap:10px;} @media(min-width:640px){.vol-grid{grid-template-columns:repeat(3,1fr);}}
.art-list{display:flex; flex-direction:column; gap:10px;}
.opt{position:relative; text-align:left; padding:16px 18px; border-radius:20px; background:var(--glass); border:1px solid var(--line); color:inherit;
  transition:transform .45s var(--spring), border-color .3s, background .3s, box-shadow .4s;}
.opt:hover{border-color:var(--line2); transform:translateY(-2px);}
.opt:active{transform:scale(.975);}
.opt.active{border-color:transparent; background:color-mix(in srgb,var(--indigo) 13%,var(--glass)); box-shadow:0 0 0 1.5px var(--indigo), 0 14px 40px -14px color-mix(in srgb,var(--indigo) 70%,transparent);}
.chk{width:20px; height:20px; border-radius:7px; border:1.5px solid var(--fg-mute); flex:none; display:grid; place-items:center; transition:background .3s, border-color .3s, transform .5s var(--spring);}
.chk svg{opacity:0; transform:scale(.3); transition:opacity .25s, transform .5s var(--spring);}
.opt.active .chk{background:var(--grad); border-color:transparent; color:var(--on-grad); transform:scale(1.1);}
.opt.active .chk svg{opacity:1; transform:scale(1);}
.task-card .row{display:flex; align-items:flex-start; gap:12px;} .task-card .chk{margin-top:2px;}
.task-card b,.art-row b{display:block; font-size:15.5px; font-weight:600;}
.task-card small,.art-row small{font-size:13px; color:var(--fg-mute);}
.t-ico{margin-bottom:8px; color:var(--fg-soft);}
.vol-card b{display:block; font-size:16px; font-weight:650; margin-bottom:6px;}
.vol-card span{display:block; font-size:13px; color:var(--fg-mute); line-height:1.4;}
.vol-card .mult{margin-top:10px; font-weight:600; color:var(--fg-soft);}
.art-row{display:flex; align-items:center; gap:14px; width:100%;}
.art-row .body{flex:1; min-width:0;} .art-row .plus{flex:none; font-size:13px; font-weight:600; color:var(--fg-mute);}
.aside{position:sticky; top:96px; padding:30px; border-radius:32px; background:var(--glass2); border:1px solid var(--line2); box-shadow:var(--shadow), 0 0 100px -40px var(--indigo); backdrop-filter:blur(26px) saturate(1.5);}
.aside-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px;}
.aside-top h4{font-size:13px; font-weight:650; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-mute);}
.aside-ico{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--glass); border:1px solid var(--line); color:var(--fg-mute);}
.lbl{font-size:14px; color:var(--fg-mute); margin-bottom:6px;}
.price{font-size:clamp(32px,4vw,46px); font-weight:600; letter-spacing:-.045em; line-height:1.1; font-variant-numeric:tabular-nums; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:8px;}
.price.bump{animation:bump .5s var(--spring);} @keyframes bump{40%{transform:scale(1.045);}}
.breadcrumb{font-size:13.5px; color:var(--fg-mute); margin-bottom:18px;}
.meter{height:6px; border-radius:6px; background:var(--line); overflow:hidden; margin-bottom:22px;}
.meter i{display:block; height:100%; width:100%; border-radius:6px; background:var(--grad); transform-origin:0 50%; transform:scaleX(0); transition:transform .9s var(--ease);}
.stat-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;}
.stat-box{padding:14px 16px; border-radius:18px; background:var(--glass); border:1px solid var(--line);}
.stat-box .l{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--fg-mute); margin-bottom:6px;}
.stat-box .v{font-size:18px; font-weight:650;}
.lead-badge{display:flex; align-items:center; gap:9px; margin:0 0 22px; padding:12px 14px; border-radius:16px; font-size:14px; color:var(--fg-soft); background:var(--glass); border:1px solid var(--line);}
.scope-head{display:flex; justify-content:space-between; font-size:12.5px; font-weight:650; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-mute); margin-bottom:10px;}
.scope-list{list-style:none; margin:0 0 20px; padding:0; font-size:14.5px; color:var(--fg-soft);}
.scope-list li{padding:5px 0 5px 18px; position:relative; animation:liIn .5s var(--ease) backwards;}
.scope-list li::before{content:''; position:absolute; left:0; top:13px; width:7px; height:7px; border-radius:50%; background:var(--grad);}
@keyframes liIn{from{opacity:0; transform:translateX(-10px);}}
.aside-note{font-size:12.5px; color:var(--fg-mute); line-height:1.5; margin-top:16px;}
.dock{position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:75; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 10px 10px 22px; border-radius:999px;
  background:color-mix(in srgb,var(--bg) 60%,transparent); backdrop-filter:blur(26px) saturate(1.7); -webkit-backdrop-filter:blur(26px) saturate(1.7); border:1px solid var(--line2); box-shadow:var(--shadow);
  transform:translateY(160%); transition:transform .7s var(--ease);}
.dock.show{transform:none;}
.dock small{display:block; font-size:11px; color:var(--fg-mute); text-transform:uppercase; letter-spacing:.06em; font-weight:600;}
.dock b{font-size:16px; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
@media(min-width:980px){.dock{display:none;}}

/* процесс */
.timeline{position:relative; max-width:980px; margin:0 auto;}
.tl-line{position:absolute; left:19px; top:10px; bottom:10px; width:2px; background:var(--line); border-radius:2px;}
.tl-fill{position:absolute; left:0; top:0; width:100%; height:100%; background:var(--grad); border-radius:2px; transform-origin:0 0; transform:scaleY(var(--tl,0)); box-shadow:0 0 18px var(--indigo);}
.steps{display:flex; flex-direction:column; gap:22px;}
.step{position:relative; margin-left:58px; padding:28px 28px 26px;}
.step::after{content:''; position:absolute; left:-47px; top:34px; width:16px; height:16px; border-radius:50%; background:var(--bg); border:2px solid var(--line2); transition:background .5s, border-color .5s, box-shadow .5s, transform .6s var(--spring);}
.step.on::after{background:var(--teal); border-color:var(--teal); box-shadow:0 0 0 6px color-mix(in srgb,var(--teal) 22%,transparent), 0 0 26px var(--teal); transform:scale(1.12);}
.step-n{font-size:13px; font-weight:700; letter-spacing:.1em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:12px;}
.step h3{font-size:21px; font-weight:600; letter-spacing:-.03em; margin-bottom:8px;}
.step p{font-size:16px; color:var(--fg-soft); line-height:1.55; margin-bottom:16px;}
.step .tag{display:inline-block; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-soft); background:var(--glass2); border:1px solid var(--line);}
@media(min-width:900px){
  .tl-line{left:50%; margin-left:-1px;}
  .step{width:calc(50% - 56px); margin-left:0;}
  .step:nth-child(even){margin-left:calc(50% + 56px);}
  .step::after{left:auto; right:-65px;}
  .step:nth-child(even)::after{right:auto; left:-65px;}
}

/* кейсы */
.rail-wrap{position:relative; margin:0 -24px;}
.rail{display:flex; gap:20px; overflow-x:auto; padding:8px 24px 30px; scroll-snap-type:x mandatory; scroll-padding:0 24px; scrollbar-width:none; -webkit-overflow-scrolling:touch; cursor:grab;}
.rail::-webkit-scrollbar{display:none;}
.rail.drag{scroll-snap-type:none; cursor:grabbing; user-select:none;}
.rail.drag *{pointer-events:none;}
@media(min-width:1180px){.rail{padding-left:calc((100vw - 1132px)/2); padding-right:calc((100vw - 1132px)/2); scroll-padding:0 calc((100vw - 1132px)/2);} .rail-wrap{margin:0 calc(-50vw + 50%);}}
.case{flex:0 0 min(86vw,420px); scroll-snap-align:start; display:flex; flex-direction:column; padding:0 0 26px; overflow:hidden;}
.case-media{position:relative; height:210px; overflow:hidden; margin-bottom:24px;}
.case-img{display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.8) contrast(1.05); transition:transform 1.2s var(--ease);}
.case:hover .case-img{transform:scale(1.07);}
.case-media::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 22%,transparent),color-mix(in srgb,var(--bg) 78%,transparent)); mix-blend-mode:multiply; opacity:.8;}
.case-cat{position:absolute; left:20px; top:18px; z-index:2; padding:6px 13px; border-radius:999px; font-size:12.5px; font-weight:650; background:color-mix(in srgb,var(--bg) 55%,transparent); backdrop-filter:blur(12px); border:1px solid var(--line2);}
.case h3,.case p,.case-metrics{margin-left:26px; margin-right:26px;}
.case h3{font-size:18px; font-weight:600; letter-spacing:-.025em; line-height:1.32; margin-bottom:10px;}
.case p{font-size:15.5px; color:var(--fg-soft); line-height:1.55; margin-bottom:22px;}
.case-metrics{display:flex; gap:28px; margin-top:auto; padding-top:20px; border-top:1px solid var(--line);}
.case-metrics b{display:block; font-size:22px; font-weight:600; letter-spacing:-.035em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.case-metrics span{font-size:13px; color:var(--fg-mute);}
.rail-ctl{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:6px;}
.rail-bar{width:min(220px,40vw); height:4px; border-radius:4px; background:var(--line); overflow:hidden;}
.rail-bar i{display:block; height:100%; width:100%; background:var(--grad); border-radius:4px; transform-origin:0 50%; transform:scaleX(.3); transition:transform .5s var(--ease);}
.arrow{width:46px; height:46px; border-radius:50%; background:var(--glass); border:1px solid var(--line2); display:grid; place-items:center; transition:transform .4s var(--spring), background .3s, opacity .3s;}
.arrow:hover{background:var(--glass2); transform:scale(1.08);} .arrow:active{transform:scale(.94);} .arrow[disabled]{opacity:.35; pointer-events:none;}
@media(max-width:600px){.arrow{display:none;}}

/* FAQ */
.faq-layout{display:grid; grid-template-columns:1fr; gap:34px; max-width:1000px; margin:0 auto;}
@media(min-width:900px){.faq-layout{grid-template-columns:.8fr 1.4fr; gap:56px; align-items:start;}}
.faq-intro{position:sticky; top:110px;}
.faq-intro p{font-size:17px; color:var(--fg-soft); line-height:1.55; margin-bottom:22px;}
details.faq{border-radius:22px; background:var(--glass); border:1px solid var(--line); margin-bottom:10px; transition:background .4s, border-color .4s;}
details.faq[open]{background:var(--glass2); border-color:var(--line2);}
details.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 22px; font-size:17px; font-weight:600; letter-spacing:-.02em;}
details.faq summary::-webkit-details-marker{display:none;}
.pl{width:28px; height:28px; border-radius:50%; flex:none; position:relative; background:var(--glass); border:1px solid var(--line2); transition:transform .6s var(--ease), background .3s;}
.pl::before,.pl::after{content:''; position:absolute; left:50%; top:50%; background:currentColor; border-radius:2px; transform:translate(-50%,-50%); transition:transform .5s var(--ease), opacity .3s;}
.pl::before{width:11px; height:1.6px;} .pl::after{width:1.6px; height:11px;}
details.faq[open] .pl{background:var(--grad); color:var(--on-grad); border-color:transparent; transform:rotate(180deg);}
details.faq[open] .pl::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
.faq-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease);}
details.faq.show .faq-body{grid-template-rows:1fr;}
.faq-body>div{overflow:hidden;}
details.faq p{padding:0 22px 22px; font-size:16px; line-height:1.6; color:var(--fg-soft);}

/* финальный блок */
.cta{padding:60px 0 120px;}
.cta-box{position:relative; overflow:hidden; text-align:center; padding:clamp(48px,8vw,96px) 24px; border-radius:40px; background:var(--glass); border:1px solid var(--line2); backdrop-filter:blur(24px) saturate(1.5); isolation:isolate;}
.cta-box::before{content:''; position:absolute; inset:-40%; z-index:-1; background:conic-gradient(from 0deg,var(--c1),var(--c2),var(--c3),var(--c1)); filter:blur(70px); opacity:.34; animation:spin 22s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.cta h2{font-size:clamp(26px,4.8vw,60px); font-weight:600; letter-spacing:-.04em; line-height:1.1; max-width:820px; margin:0 auto 18px;}
.cta p{font-size:clamp(17px,2vw,21px); color:var(--fg-soft); max-width:520px; margin:0 auto 34px; line-height:1.5;}
.chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px;}
.chip{padding:9px 16px; border-radius:999px; font-size:14px; font-weight:500; background:var(--glass); border:1px solid var(--line2); color:var(--fg-soft); transition:background .3s, color .3s, transform .4s var(--ease);}
.chip:hover{background:var(--glass2); color:var(--fg); transform:translateY(-2px);}

/* подвал */
footer{position:relative; padding:56px 0 40px; border-top:1px solid var(--line); background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg2) 70%,transparent));}
.foot-grid{display:grid; grid-template-columns:1fr; gap:34px;} @media(min-width:760px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr;}}
.foot-grid h5{margin:0 0 14px; font-size:12.5px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-mute);}
.foot-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:15px; color:var(--fg-soft);}
.foot-grid ul a{transition:color .3s, padding-left .4s var(--ease);} .foot-grid ul a:hover{color:var(--fg); padding-left:5px;}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:44px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; color:var(--fg-mute);}
.totop{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:60; opacity:0; transform:translateY(16px) scale(.8); pointer-events:none; transition:opacity .4s, transform .6s var(--spring), background .3s;}
.totop.show{opacity:1; transform:none; pointer-events:auto;}
@media(max-width:979px){.totop.up{bottom:calc(92px + env(safe-area-inset-bottom,0px));}}

/* окно связи (на телефоне — шторка) */
.modal-overlay{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(3,6,16,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;}
.modal-overlay.open{opacity:1; visibility:visible;}
.modal{position:relative; width:100%; max-width:440px; padding:34px 28px 28px; border-radius:32px; background:color-mix(in srgb,var(--bg2) 88%,transparent); border:1px solid var(--line2); box-shadow:var(--shadow); backdrop-filter:blur(30px) saturate(1.6); transform:translateY(30px) scale(.94); opacity:0; transition:transform .7s var(--ease), opacity .5s;}
.modal-overlay.open .modal{transform:none; opacity:1;}
.modal h3{font-size:22px; font-weight:600; letter-spacing:-.035em; margin-bottom:6px;}
.modal .sub{font-size:15px; color:var(--fg-soft); margin-bottom:22px; line-height:1.45;}
.modal #estNote{font-size:13.5px; color:var(--fg-mute); padding:12px 14px; border-radius:14px; background:var(--glass); border:1px solid var(--line); margin-bottom:18px;}
.modal .btn+.btn{margin-top:10px;}
.modal-close{position:absolute; right:16px; top:16px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--glass); font-size:20px; line-height:1; color:var(--fg-mute); transition:transform .5s var(--ease), color .3s;}
.modal-close:hover{transform:rotate(90deg); color:var(--fg);}
.grab{display:none; width:42px; height:5px; border-radius:5px; background:var(--line2); margin:-14px auto 20px;}
@media(max-width:640px){
  .modal-overlay{align-items:flex-end; padding:0;}
  .modal{max-width:none; border-radius:32px 32px 0 0; padding:28px 22px calc(26px + env(safe-area-inset-bottom,0px)); transform:translateY(105%); opacity:1; transition:transform .7s var(--ease);}
  .modal-overlay.open .modal{transform:none;}
  .grab{display:block;}
}
/* ===== детали: чертёжные линии ===== */
.tl-line{width:2px; background:color-mix(in srgb,var(--line2) 80%,transparent);}
.tl-line::before,.tl-fill::before{content:''; position:absolute; top:0; bottom:0; left:-7px; width:16px; background:repeating-linear-gradient(180deg,currentColor 0 1px,transparent 1px 12px); -webkit-mask:linear-gradient(90deg,#0000 0 4px,#000 4px 12px,#0000 12px); mask:linear-gradient(90deg,#0000 0 4px,#000 4px 12px,#0000 12px);}
.tl-line::before{color:var(--line2);}
.tl-fill::before{color:var(--teal); left:-7px;}
.time-badge{border-top:1px dashed var(--line2); padding-top:14px;}
.case-metrics{border-top:1px dashed var(--line2);}
.card:not(.step)::after{content:''; position:absolute; inset:10px; border-radius:calc(var(--r) - 8px); pointer-events:none; opacity:.55;
  background:
   linear-gradient(var(--line2),var(--line2)) left top/10px 1px no-repeat, linear-gradient(var(--line2),var(--line2)) left top/1px 10px no-repeat,
   linear-gradient(var(--line2),var(--line2)) right top/10px 1px no-repeat, linear-gradient(var(--line2),var(--line2)) right top/1px 10px no-repeat,
   linear-gradient(var(--line2),var(--line2)) left bottom/10px 1px no-repeat, linear-gradient(var(--line2),var(--line2)) left bottom/1px 10px no-repeat,
   linear-gradient(var(--line2),var(--line2)) right bottom/10px 1px no-repeat, linear-gradient(var(--line2),var(--line2)) right bottom/1px 10px no-repeat;}
.case::after{display:none;}
.meter{position:relative;}
.meter::after{content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 9px,var(--bg) 9px 10px); opacity:.55;}
section::before{content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(var(--line2) 1px,transparent 1.3px); background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 25%,#000,transparent 75%); mask-image:radial-gradient(ellipse 70% 55% at 50% 25%,#000,transparent 75%);}
.hero::before,.cta::before{display:none;}
/* ===== инфографика ===== */
.info-grid{display:grid; grid-template-columns:1fr; gap:18px;}
@media(min-width:980px){.info-grid{grid-template-columns:1.1fr 1fr;}}
.info,.pipe{padding:28px; border-radius:32px;}
.info header,.pipe header{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
.info h3,.pipe h3{font-size:18px; font-weight:600; letter-spacing:-.03em;}
.info small,.pipe small.hd{font-size:12.5px; color:var(--fg-mute);}
.info header small,.pipe header small{font-size:12.5px; color:var(--fg-mute); letter-spacing:.04em;}
.info-note{font-size:13px; color:var(--fg-mute); line-height:1.5; margin-top:14px;}
.chart{position:relative;}
.chart svg{width:100%; height:auto; overflow:visible;}
.cost .line{fill:none; stroke:url(#cg1); stroke-width:3; stroke-linecap:round; stroke-dasharray:var(--len,1200); stroke-dashoffset:var(--len,1200); transition:stroke-dashoffset 2.2s var(--ease) .2s; filter:drop-shadow(0 0 10px color-mix(in srgb,var(--indigo) 70%,transparent));}
.cost.in .line{stroke-dashoffset:0;}
.cost .area{opacity:0; transition:opacity 1.6s ease 1.1s;} .cost.in .area{opacity:1;}
.cost .pt{opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.2); transition:opacity .5s, transform .7s var(--spring); transition-delay:calc(var(--n)*.34s + .5s); cursor:pointer;}
.cost.in .pt{opacity:1; transform:none;}
.cost .pt circle.c{fill:var(--bg); stroke:url(#cg1); stroke-width:2.5;}
.cost .pt:hover circle.c,.cost .pt:focus circle.c,.cost .pt.act circle.c{fill:var(--teal);}
.cost .pt .ring{fill:none; stroke:var(--teal); stroke-width:1.2; opacity:0; transition:opacity .3s;}
.cost .pt:hover .ring,.cost .pt:focus .ring,.cost .pt.act .ring{opacity:.8;}
.cost text{font-family:var(--sf); fill:var(--fg-mute); font-size:12px;}
.cost .val{fill:var(--fg); font-family:var(--disp); font-size:13px; font-weight:600;}
.cost .grid{stroke:var(--line2); stroke-dasharray:3 6; stroke-width:1;}
.cost .band{fill:url(#cg2); opacity:.9;}
.cost .bandl{fill:var(--teal); font-size:11px; font-weight:700; letter-spacing:.08em;}
.tip{position:absolute; z-index:3; max-width:220px; padding:10px 14px; border-radius:14px; background:color-mix(in srgb,var(--bg2) 92%,transparent); border:1px solid var(--line2); box-shadow:var(--shadow); font-size:13px; line-height:1.4; color:var(--fg-soft); pointer-events:none; opacity:0; transform:translate(-50%,calc(-100% - 14px)) scale(.94); transition:opacity .25s, transform .4s var(--ease);}
.tip.show{opacity:1; transform:translate(-50%,calc(-100% - 14px));}
.tip b{display:block; color:var(--fg); font-family:var(--disp); font-size:12.5px; margin-bottom:3px;}
/* анатомия ТЗ */
.anat{display:grid; grid-template-columns:1fr; gap:20px; align-items:start;}
@media(min-width:620px) and (max-width:979px),(min-width:1240px){.anat{grid-template-columns:1fr 1fr;}}
.doc{padding:14px 16px 8px; border-radius:20px; background:color-mix(in srgb,var(--bg) 55%,transparent); border:1px solid var(--line2); box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.doc-h{display:flex; align-items:center; gap:6px; margin-bottom:10px; font-size:12px; color:var(--fg-mute);}
.doc-h i{width:8px; height:8px; border-radius:50%; background:var(--rose);} .doc-h i:nth-child(2){background:#ffd37a;} .doc-h i:nth-child(3){background:var(--teal);} .doc-h span{margin-left:6px;}
.blk{position:relative; margin:0 -6px 6px; padding:10px 12px 10px 38px; border-radius:14px; border:1px solid transparent; transition:background .4s, border-color .4s, box-shadow .5s, transform .5s var(--ease);}
.blk em{position:absolute; left:10px; top:10px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:700; font-family:var(--disp); background:var(--glass2); color:var(--fg-soft); transition:background .4s, color .4s;}
.blk b{display:block; font-size:13.5px; font-weight:600; margin-bottom:6px;}
.ln{display:block; height:5px; border-radius:5px; background:var(--line2); margin:5px 0;}
.mini{display:flex; align-items:center; gap:4px;} .mini i{width:14px; height:14px; border-radius:5px; border:1.5px solid var(--indigo);} .mini s{flex:1; height:1.5px; background:repeating-linear-gradient(90deg,var(--indigo) 0 4px,transparent 4px 8px);}
.cks{display:flex; gap:6px;} .cks span{width:20px; height:20px; border-radius:7px; display:grid; place-items:center; font-size:11px; background:color-mix(in srgb,var(--teal) 24%,transparent); color:var(--teal);}
.anat[data-active="0"] .blk[data-k="0"],.anat[data-active="1"] .blk[data-k="1"],.anat[data-active="2"] .blk[data-k="2"],.anat[data-active="3"] .blk[data-k="3"],.anat[data-active="4"] .blk[data-k="4"]{
  background:color-mix(in srgb,var(--indigo) 14%,transparent); border-color:color-mix(in srgb,var(--indigo) 55%,transparent); box-shadow:0 0 30px -10px var(--indigo); transform:translateX(4px);}
.anat[data-active="0"] .blk[data-k="0"] em,.anat[data-active="1"] .blk[data-k="1"] em,.anat[data-active="2"] .blk[data-k="2"] em,.anat[data-active="3"] .blk[data-k="3"] em,.anat[data-active="4"] .blk[data-k="4"] em{background:var(--grad); color:var(--on-grad);}
.anat-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.anat-list button{width:100%; text-align:left; display:flex; gap:12px; align-items:flex-start; padding:11px 12px; border-radius:16px; background:transparent; border:1px solid transparent; transition:background .3s, border-color .3s;}
.anat-list button.on,.anat-list button:hover{background:var(--glass2); border-color:var(--line2);}
.anat-list em{flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:700; font-family:var(--disp); background:var(--glass2); color:var(--fg-soft); margin-top:1px;}
.anat-list button.on em{background:var(--grad); color:var(--on-grad);}
.anat-list b{display:block; font-size:14.5px; font-weight:600;} .anat-list small{display:block; font-size:13px; color:var(--fg-mute); line-height:1.4; margin-top:2px;}
/* путь от хаоса к коду */
.pipe{margin-top:18px; overflow:hidden;}
.pipe-row{position:relative; display:grid; grid-template-columns:1fr; gap:6px;}
@media(min-width:900px){.pipe-row{grid-template-columns:repeat(5,1fr); gap:0;}}
.zone{display:none;}
@media(min-width:900px){.zone{display:flex; grid-column:2 / span 3; grid-row:1; align-items:center; justify-content:center; margin:0 10px 18px; padding:7px 0; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); border:1px dashed color-mix(in srgb,var(--teal) 55%,transparent); background:color-mix(in srgb,var(--teal) 8%,transparent);}
  .pn{grid-row:2;}}
.pn{position:relative; display:grid; grid-template-columns:48px 1fr; column-gap:14px; align-items:center; padding:10px 6px; text-align:left;}
.pn .pd{grid-row:1 / span 2; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font:700 14px var(--disp); color:var(--fg-soft); background:var(--glass2); border:1px solid var(--line2); animation:pnlight 10s ease-in-out infinite; animation-delay:calc(var(--k)*2s);}
.pn b{font-size:15px; font-weight:600;} .pn small{font-size:12.5px; color:var(--fg-mute); line-height:1.35;}
.pn:not(:last-child)::after{content:''; position:absolute; left:23px; top:56px; bottom:-6px; width:1.5px; background:repeating-linear-gradient(180deg,var(--line2) 0 5px,transparent 5px 10px); animation:flowv 1.2s linear infinite;}
@keyframes flowv{to{background-position:0 10px;}} @keyframes flowh{to{background-position:10px 0;}}
.pn.mine .pd{border-color:color-mix(in srgb,var(--teal) 60%,transparent);}
@keyframes pnlight{0%,18%{background:var(--grad); color:var(--on-grad); border-color:transparent; box-shadow:0 0 0 6px color-mix(in srgb,var(--teal) 20%,transparent),0 0 28px color-mix(in srgb,var(--teal) 70%,transparent); transform:scale(1.1);} 26%,100%{transform:none;}}
@media(min-width:900px){
  .pn{display:block; text-align:center; padding:6px 10px;}
  .pn .pd{margin:0 auto 14px;}
  .pn:not(:last-child)::after{left:calc(50% + 34px); right:calc(-50% + 34px); top:29px; bottom:auto; width:auto; height:1.5px; background:repeating-linear-gradient(90deg,var(--line2) 0 5px,transparent 5px 10px); animation:flowh 1.2s linear infinite;}
}
.case-media svg{display:block; width:100%; height:100%; transition:transform 1.2s var(--ease);}
.case:hover .case-media svg{transform:scale(1.06);}
.case-media::after{display:none;}
/* ===== пакеты, сохранение сметы, тост, печать ===== */
.packs{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -24px 28px; padding:6px 24px 10px; scrollbar-width:none;}
.packs::-webkit-scrollbar{display:none;}
@media(min-width:900px){.packs{display:grid; grid-template-columns:repeat(4,1fr); overflow:visible; margin:0 0 28px; padding:0;}}
.pack{flex:0 0 min(78vw,300px); scroll-snap-align:start; position:relative; text-align:left; padding:22px 22px 20px; border-radius:26px; background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(18px); color:inherit; transition:transform .5s var(--spring), border-color .3s, box-shadow .5s, background .3s;}
.pack:hover{transform:translateY(-4px); border-color:var(--line2);}
.pack:active{transform:scale(.98);}
.pack .pn2{font-family:var(--disp); font-size:15px; font-weight:600; letter-spacing:-.02em; margin-bottom:6px; padding-right:34px;}
.pack .pd2{font-size:14px; color:var(--fg-soft); line-height:1.4; min-height:40px; margin-bottom:14px;}
.pack .pp{font-family:var(--disp); font-size:24px; font-weight:600; letter-spacing:-.04em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.pack .ph{font-size:13px; color:var(--fg-mute); margin-top:2px;}
.pack .pt2{position:absolute; right:18px; top:18px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--glass2); border:1px solid var(--line2); color:transparent; transition:background .3s, color .3s, transform .5s var(--spring);}
.pack.on{border-color:transparent; background:color-mix(in srgb,var(--indigo) 13%,var(--glass)); box-shadow:0 0 0 1.5px var(--indigo), 0 16px 44px -14px color-mix(in srgb,var(--indigo) 70%,transparent);}
.pack.on .pt2{background:var(--grad); color:var(--on-grad); border-color:transparent; transform:scale(1.1);}
.save-row{display:flex; gap:8px; margin-top:12px;} .save-row .btn{flex:1;}
.save-row .btn[disabled]{opacity:.4; pointer-events:none;}
.toast{position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom,0px)); z-index:250; max-width:min(92vw,420px); padding:12px 20px; border-radius:999px; font-size:14.5px; font-weight:500; text-align:center; background:color-mix(in srgb,var(--bg2) 90%,transparent); border:1px solid var(--line2); box-shadow:var(--shadow); backdrop-filter:blur(20px); transform:translate(-50%,30px) scale(.94); opacity:0; pointer-events:none; transition:opacity .4s var(--ease), transform .6s var(--spring);}
.toast.show{opacity:1; transform:translate(-50%,0);}
@media(max-width:979px){.toast{bottom:calc(96px + env(safe-area-inset-bottom,0px));}}
#printSheet{display:none;}
@media print{
  @page{margin:16mm;}
  body>*:not(#printSheet){display:none !important;}
  html,body{background:#fff !important; color:#111 !important;}
  #printSheet{display:block !important; font-family:var(--sf); color:#111; font-size:12pt; line-height:1.5;}
  #printSheet h1{font-family:var(--disp); font-size:22pt; margin:0 0 4pt; font-weight:600; letter-spacing:-.03em;}
  #printSheet .ps-sub{color:#555; margin-bottom:14pt;}
  #printSheet table{width:100%; border-collapse:collapse; margin:10pt 0 14pt;}
  #printSheet th,#printSheet td{padding:7pt 6pt; border-bottom:1px solid #ddd; text-align:left;}
  #printSheet td:last-child,#printSheet th:last-child{text-align:right; white-space:nowrap;}
  #printSheet .ps-total{display:flex; justify-content:space-between; align-items:baseline; padding:12pt 0; border-top:2px solid #111;}
  #printSheet .ps-total b{font-family:var(--disp); font-size:22pt; letter-spacing:-.03em;}
  #printSheet .ps-note{color:#666; font-size:10pt; margin-top:12pt;}
}
@media(max-width:700px){.card,.pack{backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);} .aurora i{filter:blur(70px);} .grain{display:none;}}
::view-transition-old(root),::view-transition-new(root){animation:none; mix-blend-mode:normal;}
::view-transition-new(root){z-index:9999;}
@media(max-width:600px){ section{padding:84px 0;} .hero{padding:110px 0 56px;} .panel{padding:22px 18px;} .cta{padding:30px 0 90px;} }
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  .js .rv,.js .rvb{opacity:1; transform:none; filter:none;} .w>span{opacity:1; transform:none; filter:none;}
}


/* ===== внутренние страницы (SEO-посадочные и блог) ===== */
.pg-hero{padding:150px 0 30px; text-align:center;}
.crumbs{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; font-size:14px; color:var(--fg-mute); margin-bottom:24px;}
.crumbs a{transition:color .3s;} .crumbs a:hover{color:var(--fg);}
.crumbs span[aria-current]{color:var(--fg-soft);}
.pg-hero h1{font-size:clamp(30px,5.2vw,60px); font-weight:600; letter-spacing:-.04em; line-height:1.08; max-width:980px; margin:0 auto 22px;}
.pg-lead{font-size:clamp(17px,2vw,21px); line-height:1.55; color:var(--fg-soft); max-width:780px; margin:0 auto 32px;}
.pg-meta{font-size:14px; color:var(--fg-mute); margin:-8px auto 28px;}
.pg-cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
.pg-sec{padding:64px 0;}
.pg-h{font-size:clamp(24px,3.4vw,40px); font-weight:600; letter-spacing:-.04em; line-height:1.12; text-align:center; max-width:860px; margin:0 auto 14px;}
.pg-sub{font-size:clamp(16px,1.8vw,19px); color:var(--fg-soft); text-align:center; max-width:640px; margin:0 auto 40px; line-height:1.5;}
.pg-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:16px; margin-top:34px;}
.pg-card{padding:28px 26px; overflow:hidden;}
.pg-card h3{font-size:18px; font-weight:600; letter-spacing:-.03em; margin-bottom:10px;}
.pg-card p{font-size:16px; color:var(--fg-soft); line-height:1.55;}
.pg-prose{max-width:780px; margin:0 auto;}
.pg-prose p{font-size:18px; line-height:1.7; color:var(--fg-soft); margin-bottom:18px;}
.pg-list{list-style:none; padding:0; max-width:780px; margin:34px auto 0; display:grid; gap:12px;}
.pg-list li{display:flex; gap:14px; align-items:flex-start; padding:16px 20px; border-radius:20px; background:var(--glass); border:1px solid var(--line); font-size:17px; line-height:1.5; color:var(--fg);}
.pg-list li::before{content:''; flex:none; width:22px; height:22px; margin-top:1px; border-radius:50%; background:var(--grad) center/cover; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.6 14.6L6 12.2l1.4-1.4 3 3 6.2-6.2L18 9l-7.6 7.6z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.6 14.6L6 12.2l1.4-1.4 3 3 6.2-6.2L18 9l-7.6 7.6z'/%3E%3C/svg%3E") center/contain no-repeat;}
.pg-steps{list-style:none; padding:0; max-width:820px; margin:34px auto 0; display:grid; gap:14px; counter-reset:st;}
.pg-steps li{position:relative; padding:22px 24px 22px 76px; border-radius:24px; background:var(--glass); border:1px solid var(--line); counter-increment:st;}
.pg-steps li::before{content:counter(st); position:absolute; left:22px; top:20px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-family:var(--disp); font-size:15px; font-weight:600; background:var(--grad); color:var(--on-grad);}
.pg-steps b{display:block; font-size:18px; font-weight:600; letter-spacing:-.02em; margin-bottom:4px;}
.pg-steps span{font-size:16px; line-height:1.55; color:var(--fg-soft);}
.pg-price{max-width:820px; margin:0 auto; padding:34px 32px 30px; text-align:left;}
.pg-price p{font-size:17px; line-height:1.65; color:var(--fg-soft); margin-bottom:14px;}
.pg-price .btn{margin-top:10px;}
.pg-faq{max-width:820px; margin:34px auto 0;}
.pg-faq details.faq p{padding:0 22px 22px;}
.pg-rel{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:30px;}
.pg-rel a{display:block; padding:22px 22px 20px; border-radius:24px; background:var(--glass); border:1px solid var(--line); transition:transform .5s var(--ease), border-color .3s, background .3s;}
.pg-rel a:hover{transform:translateY(-4px); border-color:var(--line2); background:var(--glass2);}
.pg-rel b{display:block; font-family:var(--disp); font-size:16px; font-weight:600; letter-spacing:-.03em; margin-bottom:6px;}
.pg-rel span{font-size:14.5px; color:var(--fg-soft); line-height:1.45;}
.pg-author{max-width:780px; margin:48px auto 0; padding:22px 24px; border-radius:24px; background:var(--glass); border:1px solid var(--line); font-size:15.5px; line-height:1.6; color:var(--fg-soft);}
.pg-author b{color:var(--fg);}
.pg-blog{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin-top:34px;}
.pg-blog a{display:block; padding:30px 28px; border-radius:28px;}
.pg-blog h2{font-size:21px; font-weight:600; letter-spacing:-.03em; margin-bottom:12px; line-height:1.25;}
.pg-blog p{font-size:16px; color:var(--fg-soft); line-height:1.55;}
.dir-links{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; margin-top:34px;}
.dir-links>span{font-size:14px; color:var(--fg-mute); margin-right:4px;}
@media(min-width:900px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;}}
@media(max-width:560px){.pg-hero{padding-top:120px;}.pg-steps li{padding:20px 18px 20px 66px;}.pg-steps li::before{left:16px;}}