/* СНЭЭ.РФ — страница ведёт себя как накопитель: заряжается прокруткой, срезает пик на первом экране */
@font-face{font-family:"GothamPro";src:url("../fonts/GothamPro-Light.woff") format("woff");font-weight:300;font-display:swap}
@font-face{font-family:"GothamPro";src:url("../fonts/GothamPro-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"GothamPro";src:url("../fonts/GothamPro-Medium.woff") format("woff");font-weight:500;font-display:swap}

:root{
  --void:#05070D;
  --deep:#0B1226;
  --ink:#F3F5FA;
  --mist:#C3CADB;
  --ash:#8891A8;
  --line:rgba(174,182,200,.14);
  --charge:#37E2FF;
  --charge-dim:rgba(55,226,255,.18);
  --peak:#FFB020;
  --peak-dim:rgba(255,176,32,.18);
  --ice:#EAF3FF;
  --ice-ink:#05070D;
  --display:"Unbounded","GothamPro","Inter",sans-serif;
  --body:"GothamPro","Inter",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --max:1400px;
  --gut:clamp(20px,4vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--ink);font-family:var(--body);font-weight:400;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg,canvas{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;line-height:.98;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(56px,11vw,176px);font-weight:500;letter-spacing:-.035em}
h2{font-size:clamp(34px,5.2vw,76px)}
h3{font-family:var(--body);font-weight:400;font-size:clamp(20px,1.8vw,26px);line-height:1.2;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.mono.charge{color:var(--charge)}
.mono.peak{color:var(--peak)}
.muted{color:var(--mist)}
.section{padding:clamp(80px,12vw,160px) 0;position:relative}
.head{display:grid;gap:24px;margin-bottom:clamp(40px,6vw,80px)}
@media(min-width:900px){.head{grid-template-columns:7fr 5fr;align-items:end}}
.head p{max-width:46ch;font-size:clamp(17px,1.4vw,21px);color:var(--mist)}
.rule{height:1px;background:var(--line)}

/* кнопки */
.btn{display:inline-flex;align-items:center;gap:14px;background:var(--ink);color:var(--void);border:0;border-radius:999px;padding:18px 28px;font:500 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.btn:before{content:"";position:absolute;inset:0;background:var(--charge);transform:translateX(-101%);transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:0}
.btn:hover:before{transform:none}
.btn>*{position:relative;z-index:1}
.btn:hover{transform:translateY(-2px)}
.btn .dot{width:8px;height:8px;border-radius:50%;background:var(--charge);transition:background .3s}
.btn:hover .dot{background:var(--void)}
.link{display:inline-flex;align-items:center;gap:10px;font:500 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);padding:18px 0;border-bottom:1px solid var(--line);transition:border-color .3s,color .3s}
.link:hover{border-color:var(--charge);color:var(--charge)}
.link:after{content:"↗";font-size:15px}

/* навигация с индикатором заряда */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;color:var(--ink);transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(5,7,13,.9);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
.logo{display:flex;align-items:center;line-height:0}
.logo svg{height:20px;width:auto;display:block}
@media(max-width:599px){.logo svg{height:17px}}
.soc{display:none;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.08em}
.soc .bar{width:120px;height:10px;border:1px solid rgba(255,255,255,.7);border-radius:3px;position:relative;padding:2px}
.soc .bar:after{content:"";position:absolute;right:-5px;top:2px;bottom:2px;width:3px;background:rgba(255,255,255,.7);border-radius:0 2px 2px 0}
.soc .bar i{display:block;height:100%;width:var(--soc,0%);background:#fff;border-radius:1px;transition:width .15s linear}
@media(min-width:900px){.soc{display:flex}}
.nav ul{display:none;list-style:none;margin:0;padding:0;gap:28px}
.nav ul a{font:500 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;opacity:.75;transition:opacity .3s}
.nav ul a:hover{opacity:1}
@media(min-width:1180px){.nav ul{display:flex}}
.nav .phone{font:500 14px/1 var(--body);white-space:nowrap}
.burger{background:none;border:0;color:inherit;font:500 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:8px 0}
@media(min-width:1180px){.burger{display:none}}
.mobile{position:fixed;inset:0;background:var(--void);z-index:55;display:none;padding:120px var(--gut) 40px}
.mobile.open{display:block}
.mobile a{display:block;font-family:var(--display);font-size:clamp(28px,8vw,48px);padding:10px 0;border-bottom:1px solid var(--line)}

/* ---------- HERO ---------- */
.hero{padding-top:120px;position:relative;overflow:hidden}
.hero-grid{display:grid;gap:48px;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:7fr 5fr;gap:64px;min-height:calc(100svh - 160px)}}
.hero .kicker{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.hero h1{margin-top:clamp(20px,3vw,36px);font-size:clamp(30px,7.2vw,104px);letter-spacing:-.03em;font-weight:500;max-width:14ch}
@media(max-width:599px){.nav .phone{display:none}.hero .lead{font-size:16px}}
.hero h1 .acc{color:var(--charge)}
.hero .lead{margin-top:clamp(24px,3vw,36px);max-width:46ch;font-size:clamp(17px,1.4vw,21px);color:var(--mist)}
.hero .cta{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:clamp(28px,3vw,40px)}
.trust{list-style:none;margin:clamp(28px,3vw,40px) 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(2,1fr);gap:16px 24px}
@media(min-width:700px){.trust{grid-template-columns:repeat(4,1fr)}}
.trust b{display:block;font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:-.01em;line-height:1}
.trust span{display:block;font-size:12px;color:var(--ash);margin-top:6px;line-height:1.35}
.calc-lead{display:grid;gap:32px;margin-top:clamp(48px,6vw,80px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--charge)}
@media(min-width:1000px){.calc-lead{grid-template-columns:5fr 7fr;gap:80px}}
.calc-lead h3{margin:14px 0 16px;max-width:26ch;font-size:clamp(22px,2.2vw,30px)}
.calc-lead-fields{display:grid;gap:0 32px}
@media(min-width:600px){.calc-lead-fields{grid-template-columns:1fr 1fr}.calc-lead-fields .actions,.calc-lead-fields .consent{grid-column:1/-1}}
.calc-lead .field input{font:400 20px/1.3 var(--body)}
.deck{display:grid;gap:40px;padding:clamp(32px,4vw,56px) clamp(24px,4vw,56px);background:var(--deep);border-radius:6px;align-items:center}
@media(min-width:1000px){.deck{grid-template-columns:6fr 5fr;gap:80px}}
.deck .form .field input{font:400 20px/1.3 var(--body)}
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:58;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);backdrop-filter:blur(12px)}
.stickybar a{background:rgba(5,7,13,.92);color:var(--ink);text-align:center;padding:16px 8px calc(16px + env(safe-area-inset-bottom));font:500 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
.stickybar a.primary{background:var(--charge);color:var(--void)}
@media(min-width:900px){.stickybar{display:none}}
@media(max-width:899px){body{padding-bottom:56px}}
.cabinet{margin:0;position:relative}
.cabinet svg{width:100%;height:auto;max-width:360px;margin:0 auto;filter:drop-shadow(0 0 40px rgba(55,226,255,.12))}
.cabinet figcaption{display:grid;gap:6px;margin-top:16px;text-align:center}
.cabinet figcaption b{color:var(--ink);font-weight:400}
.cabinet .soc-bar{transform-origin:left;transform:scaleX(0);animation:fill 1.6s cubic-bezier(.2,.8,.2,1) forwards}
.cabinet .mods g:nth-child(1) .soc-bar{animation-delay:.2s}.cabinet .mods g:nth-child(2) .soc-bar{animation-delay:.35s}.cabinet .mods g:nth-child(3) .soc-bar{animation-delay:.5s}.cabinet .mods g:nth-child(4) .soc-bar{animation-delay:.65s}.cabinet .mods g:nth-child(5) .soc-bar{animation-delay:.8s}.cabinet .mods g:nth-child(6) .soc-bar{animation-delay:.95s}.cabinet .mods g:nth-child(7) .soc-bar{animation-delay:1.1s}.cabinet .mods g:nth-child(8) .soc-bar{animation-delay:1.25s}
@keyframes fill{to{transform:scaleX(1)}}
.cabinet .led{animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.cabinet .soc-bar{animation:none;transform:none}.cabinet .led{animation:none}}
.chart{position:relative;margin-top:clamp(32px,5vw,64px);height:clamp(220px,32vw,380px)}
.chart canvas{position:absolute;inset:0;width:100%;height:100%}
.chart .legend{position:absolute;left:0;top:-28px;display:flex;gap:24px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:18px;height:2px;background:var(--mist)}
.legend i.lim{background:repeating-linear-gradient(90deg,var(--peak) 0 4px,transparent 4px 8px)}
.legend i.bat{background:var(--charge);height:8px}
.ticker{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);margin-top:clamp(28px,4vw,48px)}
@media(min-width:760px){.ticker{grid-template-columns:repeat(4,1fr)}}
.ticker div{padding:22px 24px 26px 0;border-right:1px solid var(--line)}
.ticker div:last-child{border-right:0}
.ticker b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,44px);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.ticker b small{font-family:var(--mono);font-size:.38em;letter-spacing:.06em;color:var(--ash);margin-left:6px;text-transform:uppercase}
.ticker span{display:block;color:var(--ash);font-size:13px;margin-top:8px}

/* ---------- Фотослоты: фото лежит под тёмной вуалью, чтобы жить в одной палитре ---------- */
.photo-band{position:relative;height:clamp(360px,60vh,720px);overflow:hidden;background:var(--deep);margin-top:clamp(60px,9vw,120px)}
.photo-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05)}
.photo-band:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--void) 0%,rgba(5,7,13,.1) 30%,rgba(5,7,13,.15) 70%,var(--void) 100%)}
.photo-band.nophoto{background:radial-gradient(70% 80% at 30% 60%,rgba(55,226,255,.14),transparent 60%),var(--deep)}
.photo-band.nophoto:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 79px,rgba(174,182,200,.07) 79px 80px),repeating-linear-gradient(0deg,transparent 0 79px,rgba(174,182,200,.07) 79px 80px)}
.band-cap{position:absolute;left:0;right:0;bottom:40px;z-index:1;display:grid;gap:10px}
.band-cap p{font-family:var(--display);font-weight:300;font-size:clamp(20px,2.6vw,36px);letter-spacing:-.01em;max-width:24ch;line-height:1.1}
.tier-ph{aspect-ratio:4/3;margin-bottom:24px;overflow:hidden;border-radius:4px;background:var(--deep);position:relative}
.tier-ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.tier:hover .tier-ph img{transform:scale(1.04)}
.tier-ph.nophoto:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 100%,rgba(55,226,255,.16),transparent 70%),repeating-linear-gradient(90deg,transparent 0 23px,rgba(174,182,200,.08) 23px 24px)}
.tier-ph.nophoto:after{content:"ФОТО ПРОДУКТА";position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ash)}
.case figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case figure span{position:relative;z-index:1;background:rgba(234,243,255,.85);padding:6px 10px;border-radius:2px}
.case figure:not(.nophoto):before{display:none}

/* ---------- Манифест ---------- */
.manifest{padding:clamp(80px,12vw,160px) 0}
.manifest p{font-family:var(--display);font-weight:300;font-size:clamp(28px,4.6vw,68px);line-height:1.08;letter-spacing:-.02em;max-width:20ch}
.manifest p span{color:var(--ash);transition:color .4s}
.manifest p span.on{color:var(--ink)}
.manifest p em{font-style:normal;color:var(--charge)}

/* ---------- Задачи: список с раскрытием ---------- */
.tasks{border-top:1px solid var(--line)}
.task{display:grid;grid-template-columns:1fr;gap:12px 32px;padding:28px 0;border-bottom:1px solid var(--line);cursor:pointer;position:relative;transition:padding .4s}
@media(min-width:900px){.task{grid-template-columns:80px 1fr 1fr auto;align-items:baseline}}
.task .idx{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ash)}
.task h3{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.6vw,38px);line-height:1.05;letter-spacing:-.02em;transition:color .3s,transform .5s cubic-bezier(.2,.8,.2,1)}
.task .body{color:var(--mist);font-size:16px;max-width:48ch;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s cubic-bezier(.2,.8,.2,1),opacity .4s}
.task.open .body,.task:hover .body{max-height:260px;opacity:1}
.task:hover h3{color:var(--charge);transform:translateX(12px)}
.task .fx{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--peak);white-space:nowrap}
.task .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.task .tags span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--mist)}

/* ---------- Калькулятор ---------- */
.calc{display:grid;gap:48px}
@media(min-width:1000px){.calc{grid-template-columns:5fr 7fr;gap:80px}}
.field{margin-bottom:28px}
.field label,.field>.mono{display:block;margin-bottom:10px}
.field input[type=number],.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(174,182,200,.35);color:var(--ink);font:400 clamp(24px,2.4vw,34px)/1.2 var(--display);padding:8px 0;outline:none;border-radius:0;-webkit-appearance:none;transition:border-color .3s}
.field textarea{font:300 18px/1.5 var(--body);min-height:80px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--charge)}
.field input::placeholder,.field textarea::placeholder{color:var(--ash)}
.range{display:flex;align-items:center;gap:20px}
.range input[type=range]{flex:1;accent-color:var(--charge);height:2px}
.range output{font-family:var(--display);font-size:clamp(24px,2.4vw,34px);min-width:3ch;text-align:right;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips label{cursor:pointer;padding:12px 18px;border:1px solid var(--line);border-radius:999px;font-size:14px;color:var(--mist);transition:all .3s}
.chips label:hover{border-color:var(--mist);color:var(--ink)}
.chips input:checked+label{background:var(--charge);border-color:var(--charge);color:var(--void)}
.chips input:focus-visible+label{outline:2px solid var(--charge);outline-offset:2px}
.result{position:relative}
.result .big{font-family:var(--display);font-weight:500;font-size:clamp(64px,9vw,148px);letter-spacing:-.04em;line-height:.9;font-variant-numeric:tabular-nums;color:var(--charge)}
.result .big small{font-family:var(--mono);font-size:.16em;letter-spacing:.08em;color:var(--ash);margin-left:12px;text-transform:uppercase;vertical-align:middle}
.viz{margin:28px 0;height:150px;position:relative}
.viz canvas{position:absolute;inset:0;width:100%;height:100%}
.spec{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.spec li{display:grid;grid-template-columns:1fr 2fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.spec li span:first-child{color:var(--ash);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding-top:3px}
.note{font-size:13px;color:var(--ash);max-width:56ch;line-height:1.5}

/* ---------- Линейка ---------- */
.tiers{display:grid;border-top:1px solid var(--line)}
@media(min-width:900px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{padding:40px 32px 48px 0;border-bottom:1px solid var(--line);position:relative;transition:background .4s}
@media(min-width:900px){.tier{border-right:1px solid var(--line);padding-right:32px}.tier+.tier{padding-left:32px}.tier:last-child{border-right:0}}
.tier:hover{background:linear-gradient(180deg,var(--charge-dim),transparent 60%)}
.tier .range-lbl{font-family:var(--display);font-weight:500;font-size:clamp(34px,3.6vw,56px);letter-spacing:-.03em;line-height:1;margin:18px 0 20px;font-variant-numeric:tabular-nums}
.tier .range-lbl small{font-family:var(--mono);font-size:.26em;letter-spacing:.08em;color:var(--ash);margin-left:8px}
.tier p{color:var(--mist);font-size:15px;max-width:38ch}
.tier dl{margin:22px 0 0;font-size:14px}
.tier dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);margin-top:14px}
.tier dd{margin:4px 0 0;color:var(--mist)}

/* ---------- Отрасли: бегущая строка + сетка ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;white-space:nowrap}
.marquee div{display:inline-block;animation:mq 40s linear infinite;font-family:var(--display);font-weight:300;font-size:clamp(22px,3vw,40px);letter-spacing:-.01em;color:var(--mist)}
.marquee span{margin:0 40px}
.marquee span:before{content:"·";margin-right:40px;color:var(--charge)}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee div{animation:none}}
.ind{display:grid;gap:1px;background:var(--line);margin-top:clamp(40px,6vw,80px)}
@media(min-width:700px){.ind{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.ind{grid-template-columns:repeat(3,1fr)}}
.ind div{background:var(--void);padding:32px 32px 36px 0;transition:background .4s}
@media(min-width:1000px){.ind div{padding:32px}}
.ind div:hover{background:var(--deep)}
.ind h3{margin:14px 0 12px}
.ind p{color:var(--mist);font-size:15px;max-width:34ch}

/* ---------- Схема ---------- */
.how{display:grid;gap:48px;align-items:center}
@media(min-width:1000px){.how{grid-template-columns:5fr 7fr;gap:80px}}
.modes{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.modes li{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline;cursor:default;transition:color .3s}
.modes li b{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ash);text-transform:uppercase;font-weight:400;min-width:120px}
.modes li span{color:var(--mist);font-size:15px}
.modes li:hover{color:var(--charge)}
.modes li:hover span{color:var(--ink)}
.scheme{width:100%;height:auto}
.scheme .flow{stroke-dasharray:6 10;animation:flow 1.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-32}}
@media(prefers-reduced-motion:reduce){.scheme .flow{animation:none}}

/* ---------- Этапы ---------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:1px;background:var(--line)}
@media(min-width:700px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{background:var(--void);padding:32px 32px 36px 0;counter-increment:s;position:relative}
@media(min-width:1000px){.steps li{padding:32px}}
.steps li:before{content:"0" counter(s);font-family:var(--display);font-size:clamp(40px,4vw,64px);font-weight:300;color:var(--ash);line-height:1;display:block;margin-bottom:22px;transition:color .3s}
.steps li:hover:before{color:var(--charge)}
.steps b{display:block;font:400 22px/1.2 var(--body);letter-spacing:-.01em;margin-bottom:8px}
.steps span{color:var(--mist);font-size:15px;display:block;max-width:34ch}
.steps em{display:block;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--peak);margin-top:16px}

/* ---------- Кейс: ледяной инверсный экран ---------- */
.ice{background:var(--ice);color:var(--ice-ink);--line:rgba(5,7,13,.12);--mist:#3B4358;--ash:#6B7488;position:relative;overflow:hidden}
.ice:before{content:"";position:absolute;inset:-20% -10%;background:radial-gradient(60% 50% at 70% 30%,rgba(55,226,255,.35),transparent 60%),radial-gradient(40% 40% at 20% 80%,rgba(55,226,255,.18),transparent 60%);pointer-events:none}
.ice .wrap{position:relative}
.case{display:grid;gap:48px}
@media(min-width:1000px){.case{grid-template-columns:7fr 5fr;gap:80px;align-items:end}}
.case h2{font-size:clamp(40px,7vw,120px);font-weight:500;letter-spacing:-.035em}
.case .lead{font-size:clamp(17px,1.4vw,21px);max-width:46ch;margin-top:28px;color:var(--mist)}
.case .facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:40px}
.case .facts div{background:var(--ice);padding:22px 24px 26px 0}
.case .facts b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(24px,2.6vw,40px);letter-spacing:-.02em;line-height:1}
.case .facts span{display:block;color:var(--ash);font-size:13px;margin-top:8px}
.case figure{margin:0;aspect-ratio:4/5;border-radius:4px;background:linear-gradient(160deg,#fff,#cfe6ff);display:flex;align-items:flex-end;padding:24px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);position:relative;overflow:hidden}
.case figure:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 38px,rgba(5,7,13,.06) 38px 39px),repeating-linear-gradient(90deg,transparent 0 38px,rgba(5,7,13,.06) 38px 39px)}
.ice .btn{background:var(--ice-ink);color:var(--ice)}
.ice .btn:hover{color:var(--void)}

/* ---------- Экономика + форма ---------- */
.eco{display:grid;gap:48px}
@media(min-width:1000px){.eco{grid-template-columns:6fr 6fr;gap:80px;align-items:start}}
.tbl-wrap{overflow-x:auto;margin-top:32px}
.tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.tbl th{text-align:left;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);padding:12px 0;border-bottom:1px solid var(--line)}
.tbl td{padding:16px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--mist)}
.tbl td:first-child{color:var(--ink)}
.tbl td:last-child,.tbl th:last-child{text-align:right;font-family:var(--display);font-size:16px;color:var(--charge);white-space:nowrap}
.tbl td:nth-child(2),.tbl th:nth-child(2){text-align:right}
.form{display:grid;gap:4px}
.form .row{display:grid;gap:0 32px}
@media(min-width:600px){.form .row{grid-template-columns:1fr 1fr}}
.form .field input[type=text],.form .field input[type=email],.form .field input[type=tel]{font:400 20px/1.3 var(--body)}
.file{font-size:13px;color:var(--ash)}
.file input{display:block;margin-top:10px;color:var(--mist);font-size:13px;font-family:var(--mono)}
.consent{font-size:12px;color:var(--ash);max-width:56ch;margin-top:14px}
.consent a{text-decoration:underline;color:var(--mist)}
.hp{position:absolute;left:-9999px;opacity:0}
.status{font-size:14px;color:var(--peak);min-height:20px;margin-left:12px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:8px}

/* ---------- Гарантии ---------- */
.facts3{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media(min-width:760px){.facts3{grid-template-columns:repeat(3,1fr)}}
.facts3 div{background:var(--void);padding:40px 32px 44px 0}
@media(min-width:760px){.facts3 div{padding:40px 32px}}
.facts3 b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(44px,5.5vw,88px);letter-spacing:-.04em;line-height:.95}
.facts3 span{display:block;color:var(--mist);margin-top:14px;font-size:15px;max-width:30ch}
.docs{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.docs span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:10px 14px;border:1px solid var(--line);border-radius:999px;color:var(--mist)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:48px}
@media(min-width:1000px){.faq{grid-template-columns:5fr 7fr;gap:80px}}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 0;font-size:clamp(17px,1.5vw,21px);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--charge)}
.faq summary i{width:28px;height:28px;border:1px solid var(--line);border-radius:50%;position:relative;transition:transform .4s,border-color .3s}
.faq summary i:before,.faq summary i:after{content:"";position:absolute;background:currentColor;left:50%;top:50%;transform:translate(-50%,-50%)}
.faq summary i:before{width:12px;height:1px}.faq summary i:after{width:1px;height:12px}
.faq details[open] summary i{transform:rotate(45deg);border-color:var(--charge)}
.faq p{color:var(--mist);font-size:16px;padding:0 0 26px;max-width:64ch}

/* ---------- Контакты ---------- */
.contacts{display:grid;gap:48px}
@media(min-width:1000px){.contacts{grid-template-columns:6fr 6fr;gap:80px}}
.contacts dl{margin:36px 0 0;display:grid;gap:22px}
.contacts dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.contacts dd{margin:6px 0 0;font-size:17px;color:var(--mist)}
.contacts dd.big{font-family:var(--display);font-size:clamp(26px,3vw,44px);color:var(--ink);letter-spacing:-.02em}
.contacts dd a:hover{color:var(--charge)}

/* ---------- Футер ---------- */
footer{padding:80px 0 40px;overflow:hidden}
.wordmark{font-family:var(--display);font-weight:500;font-size:clamp(64px,15.5vw,236px);letter-spacing:-.04em;line-height:.85;color:transparent;-webkit-text-stroke:1px var(--ash);white-space:nowrap;user-select:none;margin:0 0 40px -.04em}
.foot{display:grid;gap:32px;font-size:13px;color:var(--ash);padding-top:32px;border-top:1px solid var(--line)}
@media(min-width:900px){.foot{grid-template-columns:2fr 1fr 1fr}}
.foot a{color:var(--mist)}
.foot a:hover{color:var(--charge)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.regions{line-height:1.9}
.regions a{color:var(--ash)}

/* ---------- Появление ---------- */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv-lines>*{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.js .rv-lines.in>*{opacity:1;transform:none}
.js .rv-lines.in>*:nth-child(2){transition-delay:.08s}.js .rv-lines.in>*:nth-child(3){transition-delay:.16s}.js .rv-lines.in>*:nth-child(4){transition-delay:.24s}.js .rv-lines.in>*:nth-child(5){transition-delay:.32s}.js .rv-lines.in>*:nth-child(6){transition-delay:.4s}
@media(prefers-reduced-motion:reduce){.js .rv,.js .rv-lines>*{opacity:1;transform:none;transition:none}.hero h1 .cut:after{animation:none;transform:scaleX(1)}}
:focus-visible{outline:2px solid var(--charge);outline-offset:3px}

/* ---------- Кино на прокрутке ---------- */
.film{position:relative}
.film-track{height:320vh}
.film-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--void)}
.film .scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s cubic-bezier(.2,.8,.2,1);transform:scale(1.04)}
.film .scene.is-on{opacity:1}
.film-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,13,.86) 0%,rgba(5,7,13,.55) 45%,rgba(5,7,13,.15) 100%),linear-gradient(180deg,rgba(5,7,13,.6) 0%,transparent 30%,transparent 70%,var(--void) 100%);pointer-events:none}
.film-light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(38vw 38vw at var(--mx,70%) var(--my,50%),rgba(55,226,255,.10),transparent 70%);mix-blend-mode:screen;transition:background-position .2s}
.film-copy{position:absolute;inset:0;display:grid;align-items:center;padding-top:84px}
.film .chapter{grid-area:1/1;max-width:640px;opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);pointer-events:none;will-change:transform}
.film .chapter.is-on{opacity:1;transform:translate(var(--px,0),var(--py,0));pointer-events:auto}
.film .chapter h2{font-size:clamp(30px,4.6vw,58px);margin-top:16px}
/* на широких экранах даём тексту главы больше строки: длинные заголовки не рассыпаются на пять строк */
@media(min-width:900px){.film .chapter{max-width:780px}}
.film .chapter .lead{margin-top:20px;max-width:44ch;font-size:clamp(16px,1.3vw,20px);color:var(--mist)}
.film .chapter .cta{margin-top:28px}
.film .chapter .trust{margin-top:28px}
.film-nav{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);list-style:none;margin:0;padding:0;display:none;gap:18px;counter-reset:f}
@media(min-width:900px){.film-nav{display:grid}}
.film-nav li{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);padding-left:26px;position:relative;transition:color .4s}
.film-nav li:before{content:"";position:absolute;left:0;top:50%;width:14px;height:1px;background:var(--ash);transition:width .4s,background .4s}
.film-nav li.is-on{color:var(--ink)}
.film-nav li.is-on:before{width:20px;background:var(--charge)}
.film-hint{position:absolute;left:var(--gut);bottom:28px;opacity:.8;transition:opacity .5s}
.film.scrolled .film-hint{opacity:0}
@media(max-width:899px){.film-track{height:260vh}.film-copy{align-items:end;padding-bottom:80px}.film-veil{background:linear-gradient(180deg,rgba(5,7,13,.5),rgba(5,7,13,.35) 40%,var(--void) 100%)}}
@media(prefers-reduced-motion:reduce){.film-track{height:0}.film-stage{position:relative}.film .scene{transition:none}}
/* блок .chapter шириной 640px: кегль ограничен 62px, иначе «Промышленные» рвётся посреди слова */
.film h1{font-size:clamp(30px,6vw,62px);font-weight:500;letter-spacing:-.03em;max-width:14ch;margin-top:clamp(16px,2vw,28px)}
.film .acc{color:var(--charge)}
.film .kicker{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center}

/* ================= ВНУТРЕННИЕ СТРАНИЦЫ ================= */
body.inner{padding-top:0}
.nav-solid{position:sticky;mix-blend-mode:normal;background:rgba(5,7,13,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-solid ul a{opacity:.7}
.nav-solid ul a:hover{opacity:1;color:var(--charge)}

.crumbs{border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.crumbs .wrap{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:16px;padding-bottom:16px}
.crumbs a{color:var(--ash)}
.crumbs a:hover{color:var(--charge)}
.crumbs span{color:var(--ash);opacity:.5}
.crumbs b{color:var(--mist);font-weight:400}

.pagehead{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(32px,4vw,48px)}
.pagehead h1{font-size:clamp(34px,5.6vw,86px);font-weight:500;letter-spacing:-.03em;margin-top:18px;max-width:18ch}
.pagehead .lead{margin-top:24px;max-width:52ch;font-size:clamp(17px,1.5vw,22px);color:var(--mist)}
.pagehead .meta{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}

.rel-card{display:block;background:var(--void);padding:30px 30px 34px;transition:background .4s,transform .4s}
.rel-card:hover{background:var(--deep);color:inherit}
.rel-card h3{margin:14px 0 10px;transition:color .3s}
.rel-card:hover h3{color:var(--charge)}
.rel-card p{color:var(--mist);font-size:15px;max-width:36ch}
.rel-card:after{content:"→";display:block;margin-top:18px;color:var(--charge);font-size:18px;transform:translateX(0);transition:transform .4s}
.rel-card:hover:after{transform:translateX(8px)}

/* --- Текст статьи --- */
.prose{max-width:none;display:grid;gap:0}
@media(min-width:1000px){.prose{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:0 clamp(40px,5vw,88px);align-items:start}}
.prose>*{grid-column:1}
.prose .aside{grid-column:1}
@media(min-width:1000px){.prose .aside{grid-column:2;grid-row:span 8;position:sticky;top:110px}}
.prose h2{font-size:clamp(26px,3.4vw,44px);margin:clamp(48px,6vw,80px) 0 20px;max-width:20ch}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--display);font-weight:400;font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;margin:40px 0 14px}
.prose p{font-size:17px;line-height:1.7;color:var(--mist);max-width:66ch;margin-bottom:18px}
.prose p strong,.prose li strong{color:var(--ink);font-weight:500}
.prose a:not(.btn):not(.link){color:var(--charge);border-bottom:1px solid rgba(55,226,255,.35)}
.prose a:not(.btn):not(.link):hover{border-color:var(--charge)}
.prose ul,.prose ol{max-width:66ch;margin:0 0 22px;padding-left:0;list-style:none;color:var(--mist);font-size:17px;line-height:1.7}
.prose ul li{position:relative;padding-left:26px;margin-bottom:10px}
.prose ul li:before{content:"";position:absolute;left:2px;top:.65em;width:7px;height:7px;border:1px solid var(--charge);border-radius:1px}
.prose ol{counter-reset:n}
.prose ol li{position:relative;padding-left:34px;margin-bottom:12px;counter-increment:n}
.prose ol li:before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.1em;font-family:var(--mono);font-size:12px;color:var(--charge)}

/* врезки */
.note-box{margin:34px 0;padding:26px 28px;background:var(--deep);border-left:2px solid var(--charge);border-radius:0 4px 4px 0;max-width:66ch}
.note-box .mono{display:block;margin-bottom:10px}
.note-box p{margin:0;font-size:16px;max-width:none}
.note-box p+p{margin-top:12px}
.note-box.warn{border-left-color:var(--peak)}
.note-box.warn .mono{color:var(--peak)}

.pull{margin:clamp(40px,5vw,64px) 0;padding:0 0 0 28px;border-left:2px solid var(--peak);max-width:30ch}
.pull p{font-family:var(--display);font-weight:300;font-size:clamp(22px,2.8vw,34px);line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin:0}

/* таблица в статье */
.prose .tbl-wrap{margin:30px 0;max-width:none}
.prose .tbl{min-width:480px}
.prose .tbl td:last-child,.prose .tbl th:last-child{font-family:inherit;font-size:15px;color:var(--mist)}
.prose .tbl td:first-child{color:var(--ink);white-space:nowrap}
.tbl.num td:not(:first-child),.tbl.num th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.tbl.num td:last-child{color:var(--charge)}

/* фигура со схемой */
.figure{margin:clamp(36px,5vw,60px) 0;max-width:none}
.figure .canvas-wrap{position:relative;background:var(--deep);border-radius:4px;padding:clamp(18px,3vw,32px);overflow:hidden}
.figure canvas,.figure svg{width:100%;height:auto;display:block}
.figure figcaption{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);line-height:1.6}
.figure .legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:16px}

/* боковая колонка статьи */
.aside{padding:26px 0 0;border-top:1px solid var(--charge);margin-top:40px}
@media(min-width:1000px){.aside{margin-top:0;padding-top:24px}}
.aside h4{font-family:var(--body);font-weight:500;font-size:15px;margin:0 0 14px;letter-spacing:0}
.aside ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.aside ul li{padding-left:0}
.aside ul li:before{display:none}
.aside a{font-size:14px;color:var(--mist);display:block;line-height:1.4;border:0}
.aside a:hover{color:var(--charge)}
.aside .fact{padding:16px 0;border-bottom:1px solid var(--line)}
.aside .fact b{display:block;font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:-.02em;line-height:1}
.aside .fact span{display:block;font-size:12px;color:var(--ash);margin-top:6px;line-height:1.4}
.aside .btn{margin-top:20px;width:100%;justify-content:center}

/* оглавление */
.toc{margin:34px 0 0;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:66ch}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:t;display:grid;gap:8px}
.toc li{padding-left:30px;position:relative;counter-increment:t;margin:0}
.toc li:before{content:counter(t,decimal-leading-zero);position:absolute;left:0;font-family:var(--mono);font-size:11px;color:var(--ash);top:.25em}
.toc a{font-size:15px;color:var(--mist);border:0}
.toc a:hover{color:var(--charge)}

.cta-band{background:var(--deep)}
.cta-band .trust{border-top-color:rgba(174,182,200,.2)}

/* мини-калькулятор на странице задачи */
.minicalc{background:var(--deep);border-radius:4px;padding:clamp(24px,3.5vw,40px);margin:clamp(36px,5vw,60px) 0}
.minicalc .row2{display:grid;gap:24px}
@media(min-width:700px){.minicalc .row2{grid-template-columns:1fr 1fr;gap:40px}}
.minicalc .out{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.minicalc .out b{font-family:var(--display);font-weight:500;font-size:clamp(34px,4.5vw,58px);letter-spacing:-.03em;line-height:1;color:var(--charge);display:block;font-variant-numeric:tabular-nums}
.minicalc .out span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);margin-top:10px}
.minicalc .outs{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(min-width:760px){.minicalc .outs{grid-template-columns:repeat(3,1fr)}}

/* фото-шапка отраслевой страницы */
.ind-hero{position:relative;height:clamp(240px,34vw,440px);overflow:hidden;background:var(--deep);border-radius:4px;margin-top:clamp(28px,4vw,44px)}
.ind-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.ind-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,13,.35),rgba(5,7,13,.05) 45%,rgba(5,7,13,.75))}
.ind-hero.nophoto{background:radial-gradient(70% 90% at 30% 60%,rgba(55,226,255,.14),transparent 65%),var(--deep)}
.ind-hero.nophoto:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 63px,rgba(174,182,200,.07) 63px 64px),repeating-linear-gradient(0deg,transparent 0 63px,rgba(174,182,200,.07) 63px 64px)}
.ind-hero figcaption{position:absolute;left:0;right:0;bottom:16px;padding:0 24px;z-index:1;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}

/* ---- Доступность и удобство на тач-экранах ---- */
.range input[type=range]{height:36px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.range input[type=range]::-webkit-slider-runnable-track{height:2px;background:rgba(174,182,200,.35);border-radius:2px}
.range input[type=range]::-moz-range-track{height:2px;background:rgba(174,182,200,.35);border-radius:2px}
.range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:var(--charge);border:0;box-shadow:0 0 0 6px rgba(55,226,255,.14)}
.range input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--charge);border:0}
.range input[type=range]:focus-visible{outline:2px solid var(--charge);outline-offset:4px}
@media(max-width:899px){
  .nav ul a,.mobile a{padding:12px 0}
  .crumbs .wrap{padding-top:12px;padding-bottom:12px}
  .crumbs a,.crumbs b{padding:6px 0;display:inline-block}
  .aside a,.prose li a{padding:6px 0;display:inline-block}
  .faq summary{padding:20px 0}
  .stickybar a{padding:18px 8px calc(18px + env(safe-area-inset-bottom))}
  body{padding-bottom:62px}
  .burger{padding:12px 0 12px 12px}
}
/* длинные русские слова не должны вылезать за контейнер */
h1,h2,h3,h4,.pull p,.rel-card h3,.tier .range-lbl{overflow-wrap:break-word;word-break:normal;hyphens:auto}
@media(max-width:520px){
  .pagehead h1{font-size:clamp(26px,7.4vw,34px)}
  .hero h1{font-size:clamp(26px,7.4vw,34px)}
  .prose h2,.head h2{font-size:clamp(22px,6vw,30px)}
}