@font-face{font-family:'Golos';src:url(fonts/golos-400-cyr.woff2) format('woff2-variations'),url(fonts/golos-400-cyr.woff2) format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos';src:url(fonts/golos-400-lat.woff2) format('woff2-variations'),url(fonts/golos-400-lat.woff2) format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122,U+2212}

/* AI да Business - лендинг v2. Режиссура: страница едет от ночи к рассвету,
   как сама история в заголовке. Дилы: DESIGN_VARIANCE 9 / MOTION 8 / DENSITY 3. */

@font-face{font-family:'Mono';src:url(fonts/jbmono-500-cyr.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Mono';src:url(fonts/jbmono-500-lat.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122,U+2212}

/* ---------- токены ---------- */
:root{
  --night-bg:#0B0C0E; --night-ink:#F2F1EE; --night-muted:#9B9EA4;
  --dawn-bg:#F5F3EF;  --dawn-ink:#15161A;  --dawn-muted:#6C7076;
  --accent:#D2622F; --accent-soft:#E88A55;
  --bg:var(--night-bg); --ink:var(--night-ink); --muted:var(--night-muted);
  --line:rgba(255,255,255,.13); --line-soft:rgba(255,255,255,.07);
  --panel:rgba(255,255,255,.05);
  --r:16px; --r-btn:999px;
  --max:1240px; --gut:clamp(20px,5vw,56px); --sec:clamp(88px,12vw,168px);
}
.dawn{
  --bg:var(--dawn-bg); --ink:var(--dawn-ink); --muted:var(--dawn-muted);
  --line:rgba(21,22,26,.14); --line-soft:rgba(21,22,26,.07); --panel:rgba(21,22,26,.028);
  --accent-soft:#B84F1F;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--night-bg); color:var(--night-ink);
  font-family:'Golos',system-ui,sans-serif; font-size:17px; line-height:1.6;
  letter-spacing:-.006em; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.03em; line-height:1.05; text-wrap:balance}

/* «дыхание» фона: два мягких пятна медленно дрейфуют - страница не выглядит мёртвой */
.ambient{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.ambient::before{content:""; position:absolute; inset:-20%; will-change:transform;
  background:radial-gradient(34% 26% at 24% 28%, rgba(210,98,47,.20), transparent 70%),
             radial-gradient(30% 22% at 76% 66%, rgba(120,150,210,.11), transparent 70%);
  filter:blur(46px); animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(3%,-2.5%) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.ambient::before{animation:none}}
.band > .wrap{position:relative; z-index:1}

.grain{position:fixed; inset:0; z-index:70; pointer-events:none; opacity:.3; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

.band[id],section[id]{scroll-margin-top:88px}
.band{background:var(--bg); color:var(--ink); position:relative;
  transition:background-color 1s cubic-bezier(.4,0,.2,1), color 1s cubic-bezier(.4,0,.2,1)}
.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gut)}
.sec{padding-block:var(--sec)}
.lead{color:var(--muted); font-size:clamp(17px,1.55vw,20px); max-width:60ch; line-height:1.62}
h2{font-size:clamp(31px,5vw,62px); max-width:16ch; letter-spacing:-.038em}
h3{font-size:clamp(19px,1.9vw,23px); letter-spacing:-.022em; line-height:1.22}
.kicker{font-family:'Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-soft); margin-bottom:24px; display:block}

/* ---------- прогресс ---------- */
.progress{position:fixed; top:0; left:0; height:2px; width:100%; z-index:80; background:var(--accent);
  transform:scaleX(var(--p,0)); transform-origin:0 50%; pointer-events:none}
@supports (animation-timeline:scroll(root)){
  .progress{transform:scaleX(0); animation:grow linear both; animation-timeline:scroll(root)}
  @keyframes grow{to{transform:scaleX(1)}}
}
@media (prefers-reduced-motion:reduce){.progress{display:none}}

/* ---------- шапка ---------- */
.hdr{position:fixed; top:0; left:0; right:0; z-index:60; border-bottom:1px solid transparent;
  transition:background-color .5s, backdrop-filter .5s, border-color .5s}
.hdr[data-stuck="1"]{background:color-mix(in srgb,var(--hdr-bg,#0B0C0E) 80%,transparent);
  backdrop-filter:saturate(160%) blur(16px); border-bottom-color:var(--line-soft)}
.hdr__in{display:flex; align-items:center; gap:28px; height:74px; max-width:var(--max);
  margin:0 auto; padding-inline:var(--gut); color:var(--hdr-ink,#F2F1EE); transition:color .8s}
.brand{display:flex; align-items:baseline; gap:.4em; font-weight:600; font-size:17px;
  letter-spacing:-.03em; text-decoration:none; white-space:nowrap}
.brand i{font-style:normal; color:var(--accent-soft)}
.nav{display:flex; gap:28px; margin-left:auto; font-size:14px; opacity:.62; min-width:0; flex:0 1 auto}
.nav a{text-decoration:none; white-space:nowrap; position:relative; transition:opacity .25s}
.nav a[data-active]{opacity:1}
.nav a[data-active]::after{content:""; position:absolute; left:0; right:0; bottom:-7px; height:1.5px; background:var(--accent)}
.nav:hover a{opacity:.45}
.nav a:hover{opacity:1}
@media (max-width:1060px){.nav{display:none}}

/* ---------- кнопки ---------- */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:15px 30px; border-radius:var(--r-btn); border:0; cursor:pointer; overflow:hidden;
  background:var(--accent); color:#fff; text-decoration:none; font:inherit; font-weight:600;
  font-size:16px; letter-spacing:-.012em; white-space:nowrap; isolation:isolate;
  transition:transform .38s cubic-bezier(.16,1,.3,1), box-shadow .38s;
  box-shadow:0 10px 32px -16px rgba(210,98,47,.9)}
.btn::after{content:""; position:absolute; inset:0; z-index:-1; background:#E88A55;
  transform:translateY(101%); transition:transform .48s cubic-bezier(.16,1,.3,1)}
.btn:hover{transform:translateY(-3px); box-shadow:0 20px 48px -18px rgba(210,98,47,.95)}
.btn:hover::after{transform:translateY(0)}
.btn:active{transform:translateY(-1px)}
/* магнит: смещение задаёт JS через --mx/--my, CSS отвечает за плавность */
.btn[data-magnetic]{transform:translate(var(--tx,0),calc(var(--ty,0) - var(--lift,0px)))}
.btn[data-magnetic]:hover{--lift:3px}
@media (prefers-reduced-motion:reduce){.btn[data-magnetic]{transform:none}}
.btn--line{background:transparent; color:currentColor; border:1px solid currentColor; box-shadow:none; opacity:.85}
.btn--line::after{display:none}
.btn--line:hover{opacity:1; box-shadow:none}
/* кнопка шапки не сжимается: при длинном меню сжимается меню, а не главное действие */
.hdr .btn{padding:11px 22px; font-size:14.5px; color:#fff; flex:0 0 auto}
:focus-visible{outline:2px solid var(--accent-soft); outline-offset:4px; border-radius:6px}
.micro{font-family:'Mono',monospace; font-size:12px; color:var(--muted); line-height:1.85; max-width:54ch}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:100dvh; display:flex; align-items:flex-end; overflow:clip; background:#0B0C0E}
.hero__media{position:absolute; inset:0; z-index:0}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:center 58%; transform:scale(1.05)}
.hero__media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,12,14,.74) 0%,rgba(11,12,14,.34) 32%,rgba(11,12,14,.88) 84%,#0B0C0E 100%),
             radial-gradient(66% 46% at 60% 64%,rgba(210,98,47,.18),transparent 70%)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .hero__media img{animation:heroZoom linear both; animation-timeline:view(); animation-range:entry 0% exit 100%}
    @keyframes heroZoom{from{transform:scale(1.02)}to{transform:scale(1.18)}}
  }
}
@media (max-width:720px){
  .hero--office .hero__media img{object-position:47% 54%}
  .hero--office .hero__media::after{
    background:linear-gradient(180deg,rgba(11,12,14,.82) 0%,rgba(11,12,14,.58) 38%,rgba(11,12,14,.9) 84%,#0B0C0E 100%),
               radial-gradient(66% 46% at 60% 64%,rgba(210,98,47,.16),transparent 70%)}
}
.hero__in{position:relative; z-index:1; width:100%; padding-bottom:clamp(40px,5.5vh,72px); padding-top:112px}
.hero h1{font-size:clamp(34px,5.4vw,74px); letter-spacing:-.042em; line-height:1.02; max-width:15ch; color:#fff}
.hero h1 .l{display:block; overflow:hidden; padding-bottom:.06em}
.hero h1 .l>span{display:block}
.hero h1 em{font-style:normal; color:#E88A55}
.hero__bottom{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,4vw,52px);
  align-items:end; margin-top:clamp(24px,3vw,38px)}
.hero__lead{color:rgba(242,241,238,.74); max-width:46ch}
.hero__act{display:flex; flex-direction:column; gap:16px; align-items:flex-start}
.hero__act .micro{color:rgba(242,241,238,.66)}
@media (max-width:860px){
  .hero__bottom{grid-template-columns:1fr; align-items:start}
  .hero h1{font-size:clamp(33px,8.6vw,52px)}
}
@media (prefers-reduced-motion:no-preference){
  .js .hero h1 .l>span{transform:translateY(106%); opacity:0; animation:lineUp .95s cubic-bezier(.16,1,.3,1) forwards}
  .js .hero h1 .l:nth-child(1)>span{animation-delay:.16s}
  .js .hero h1 .l:nth-child(2)>span{animation-delay:.28s}
  .js .hero h1 .l:nth-child(3)>span{animation-delay:.40s}
  .js .hero h1 .l:nth-child(4)>span{animation-delay:.52s}
  @keyframes lineUp{to{transform:none; opacity:1}}
  .js .hero__bottom{opacity:0; animation:fadeIn 1s cubic-bezier(.16,1,.3,1) .78s forwards}
  @keyframes fadeIn{to{opacity:1}}
}


/* ---------- первый экран: явное определение + живой бот ---------- */
.hero__eyebrow{font-family:'Mono',monospace; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:#E88A55; margin:0 0 16px; display:flex; align-items:center; gap:12px}
.hero__eyebrow::before{content:""; width:34px; height:1.5px; background:#E88A55; flex:none}
@media (prefers-reduced-motion:no-preference){
  .js .hero__eyebrow{opacity:0; animation:fadeIn .8s ease .05s forwards}
}
.hero__bottom{grid-template-columns:minmax(0,1fr) minmax(300px,376px)}
.bot{margin:0; border:1px solid rgba(255,255,255,.16); border-radius:var(--r);
  background:rgba(18,20,24,.62); backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.95); overflow:hidden}
.bot__bar{display:flex; align-items:center; gap:10px; padding:13px 18px; border-bottom:1px solid rgba(255,255,255,.1);
  font-family:'Mono',monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase}
.bot__who{color:#fff}
.bot__meta{margin-left:auto; text-transform:none; letter-spacing:.02em; color:rgba(242,241,238,.66); font-size:10.5px}
.bot__msg{display:flex; gap:14px; padding:20px 18px 6px; align-items:flex-start}
.bot__ava{flex:none; margin-top:2px}
.bot__msg p{color:rgba(242,241,238,.94); font-size:15.5px; line-height:1.5; letter-spacing:-.01em}
.bot__typing{display:flex; gap:5px; padding:6px 18px 18px 50px}
.bot__typing i{width:6px; height:6px; border-radius:50%; background:rgba(242,241,238,.45);
  animation:typing 1.25s ease-in-out infinite}
.bot__typing i:nth-child(2){animation-delay:.18s}
.bot__typing i:nth-child(3){animation-delay:.36s}
@keyframes typing{0%,60%,100%{transform:translateY(0); opacity:.35} 30%{transform:translateY(-4px); opacity:1}}
.bot__cap{padding:0 18px 16px; font-family:'Mono',monospace; font-size:11px; line-height:1.6; color:rgba(242,241,238,.66)}
[data-type] span{opacity:0; animation:wordIn .4s ease forwards}
@keyframes wordIn{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .bot__typing i{animation:none}
  [data-type] span{opacity:1; animation:none}
}
@media (max-width:860px){
  .hero__bottom{grid-template-columns:1fr}
  .bot{max-width:420px; backdrop-filter:none; background:rgba(18,20,24,.9)}
  .grain{display:none}
}

/* ---------- схема связки моделей ---------- */
.relay{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:clamp(26px,3.4vw,40px); position:relative}
.relay__node,.relay__out{border:1px solid var(--line); border-radius:12px; padding:16px 14px;
  background:var(--panel); display:flex; flex-direction:column; gap:7px; position:relative}
.relay__out{border-style:dashed; border-color:rgba(201,162,39,.45)}
.relay b{font-family:'Mono',monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:500}
.relay span{font-size:14px; line-height:1.35; letter-spacing:-.01em}
.relay__node::after{content:""; position:absolute; right:-10px; top:50%; width:10px; height:1.5px;
  background:linear-gradient(90deg,var(--accent),transparent); z-index:1}
.relay__node:last-of-type::after{background:linear-gradient(90deg,#C9A227,transparent)}
@media (prefers-reduced-motion:no-preference){
  .relay__node::after{animation:relayFlow 2.4s ease-in-out infinite}
  .relay__node:nth-child(2)::after{animation-delay:.35s}
  .relay__node:nth-child(3)::after{animation-delay:.7s}
  @keyframes relayFlow{0%,100%{opacity:.35; transform:scaleX(.6)} 50%{opacity:1; transform:scaleX(1)}}
}
@media (max-width:900px){
  .relay{grid-template-columns:1fr 1fr}
  .relay__node::after{display:none}
}

/* ---------- появление по скроллу ---------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .rv{animation:rise linear both; animation-timeline:view(); animation-range:entry 0% entry 46%}
    @keyframes rise{from{opacity:0; transform:translateY(28px)}to{opacity:1; transform:none}}
  }
  @supports not (animation-timeline:view()){
    .js .rv{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1)}
    .js .rv.in{opacity:1; transform:none}
  }
}

/* ---------- боли ---------- */
.pain{margin-top:clamp(46px,6vw,80px); border-top:1px solid var(--line)}
.pain__item{display:grid; grid-template-columns:auto minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(18px,4vw,64px); padding:clamp(26px,3.6vw,42px) 0; border-bottom:1px solid var(--line);
  align-items:baseline; position:relative}
.pain__item::before{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.pain__item:hover::before{transform:scaleX(1)}
.pain__n{font-family:'Mono',monospace; font-size:12px; color:var(--accent-soft); min-width:2.4em}
.pain__item p{color:var(--muted); font-size:16px}
@media (max-width:820px){.pain__item{grid-template-columns:1fr; gap:10px}}

.bridge{margin-top:clamp(54px,8vw,104px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(26px,5vw,72px); align-items:center}
.bigfig{font-family:'Mono',monospace; font-weight:500; font-size:clamp(60px,12.5vw,164px);
  line-height:.86; letter-spacing:-.06em; color:var(--accent); white-space:nowrap}
.bigfig+span{display:block; margin-top:18px; font-family:'Mono',monospace; font-size:11.5px;
  color:var(--muted); line-height:1.75}
.bridge p{font-size:clamp(19px,2.2vw,27px); line-height:1.4; letter-spacing:-.026em; max-width:23ch}
@media (max-width:820px){.bridge{grid-template-columns:1fr; gap:24px}}



/* ---------- чертёжная сетка: заполняет тёмное поле, читается как инженерия ---------- */
.dots{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.075) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 42%, #000 25%, transparent 78%);
  mask-image:radial-gradient(72% 62% at 50% 42%, #000 25%, transparent 78%)}

/* ---------- сканирующий блик: система «считывает» скриншот ---------- */
.shot--scan{position:relative}
.shot--scan::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 42%, rgba(232,138,85,.16) 50%, transparent 58%);
  transform:translateX(-110%); animation:scan 5.5s ease-in-out infinite}
@keyframes scan{0%{transform:translateX(-110%)} 60%,100%{transform:translateX(110%)}}
@media (prefers-reduced-motion:reduce){ .shot--scan::after{animation:none; opacity:0} }

/* ---------- ночная смена: терминальная лента ---------- */
.night-log{position:relative; overflow:clip}
.log-bg{position:absolute; inset:0; z-index:0; opacity:.3}
.log-bg img{width:100%; height:100%; object-fit:cover; object-position:center}
.log-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,#0B0C0E 0%,rgba(11,12,14,.72) 30%,rgba(11,12,14,.86) 70%,#0B0C0E 100%)}
.night-log .wrap{position:relative; z-index:1}
.term{margin-top:clamp(34px,4.5vw,56px); border:1px solid var(--line); border-radius:var(--r);
  background:rgba(255,255,255,.045); backdrop-filter:blur(8px); overflow:hidden;
  box-shadow:0 30px 80px -50px rgba(0,0,0,.9)}
.term__bar{display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line);
  font-family:'Mono',monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.term__title{color:var(--ink)}
.term__meta{margin-left:auto; text-transform:none; letter-spacing:.02em; opacity:.7}
.pulse{width:8px; height:8px; border-radius:50%; background:#5FBF7F; flex:none; position:relative}
.pulse::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid #5FBF7F; opacity:.7;
  animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(.6); opacity:.8} 80%,100%{transform:scale(1.9); opacity:0}}
.term__body{list-style:none; margin:0; padding:clamp(16px,2vw,24px) 0; counter-reset:none}
.term__body li{display:grid; grid-template-columns:88px minmax(0,1fr); gap:18px; align-items:baseline;
  padding:11px clamp(18px,2.4vw,28px); font-family:'Mono',monospace; font-size:13.5px; line-height:1.6; color:var(--ink)}
.term__body li b{color:var(--accent-soft); font-weight:500; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase}
.term__body li span{color:rgba(242,241,238,.82)}
.term__body li::marker{content:none}
.term__last span{color:#fff}
.type i{display:inline-block; width:9px; height:1.05em; background:var(--accent); margin-left:6px;
  vertical-align:-2px; animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .term__body li{opacity:0; animation:logline linear both; animation-timeline:view();
      animation-range:entry 8% entry 55%; animation-delay:calc(var(--i) * .06s)}
    @keyframes logline{from{opacity:0; transform:translateX(-10px)}to{opacity:1; transform:none}}
  }
}
@media (prefers-reduced-motion:reduce){ .pulse::after,.type i{animation:none} }
@media (max-width:640px){
  .term__body li{grid-template-columns:1fr; gap:4px; font-size:12.5px}
}

/* ---------- bento ---------- */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(12px,1.4vw,18px); margin-top:clamp(42px,5.5vw,70px)}
.tile{position:relative; border-radius:var(--r); border:1px solid var(--line); background:var(--panel);
  padding:clamp(24px,2.6vw,36px); display:flex; flex-direction:column; gap:14px; min-width:0; overflow:hidden;
  transition:border-color .45s, transform .5s cubic-bezier(.16,1,.3,1)}
.tile::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  transition:opacity .45s;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(210,98,47,.22), transparent 60%)}
.tile:hover{transform:translateY(-4px); border-color:rgba(210,98,47,.42)}
.tile:hover::before{opacity:1}
.tile p{color:var(--muted); font-size:15.5px; line-height:1.58}
.tile--a{grid-column:span 4}.tile--b{grid-column:span 2}
.tile--c{grid-column:span 2}.tile--d{grid-column:span 4}
.tile__shot{margin-top:auto; border-radius:10px; overflow:hidden; border:1px solid var(--line-soft)}
.tile__shot img{width:100%; height:200px; object-fit:cover; object-position:top center;
  transition:transform .9s cubic-bezier(.16,1,.3,1)}
.tile:hover .tile__shot img{transform:scale(1.06)}
.delta{display:flex; align-items:baseline; gap:16px; margin-top:auto; font-family:'Mono',monospace;
  letter-spacing:-.03em; flex-wrap:wrap}
.delta s{color:var(--muted); font-size:clamp(20px,2.6vw,28px); text-decoration-thickness:1px}
.delta b{font-weight:500; color:var(--accent-soft); font-size:clamp(36px,5.2vw,56px)}
.delta i{font-style:normal; font-size:11.5px; color:var(--muted); letter-spacing:.04em}
@media (max-width:860px){.tile{grid-column:span 6 !important}}


/* ---------- иконки: Phosphor duotone, тематический цвет на блок ----------
   Подложка иконки (первый path) красится тем же цветом с малой прозрачностью -
   получается «цветная тематика» без клипарта и без второго акцента в интерфейсе. */
.ic{width:26px; height:26px; display:block; flex:none; color:var(--ic,#D2622F); fill:currentColor}
.ic--terra{--ic:#D2622F}
.ic--steel{--ic:#5B87B5}
.ic--sage{--ic:#6E9C74}
.ic--amber{--ic:#C9A227}
.dawn .ic--terra{--ic:#B84F1F}
.dawn .ic--steel{--ic:#3F6C99}
.dawn .ic--sage{--ic:#527A57}
.dawn .ic--amber{--ic:#9C7C15}
.tile .ic{width:30px; height:30px; margin-bottom:2px}
.pain__n{display:flex; align-items:center; gap:12px}
.pain__n .ic{width:22px; height:22px}
.rung__n{display:flex; align-items:center; gap:10px}
.rung__n .ic{width:22px; height:22px}
.proof__lines em{display:inline-flex; align-items:center; gap:9px}
.proof__lines .ic{width:18px; height:18px}
@media (prefers-reduced-motion:no-preference){
  .tile .ic{transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .tile:hover .ic{transform:translateY(-2px) scale(1.06)}
}
/* вторая картинка в плитке не должна раздувать её выше соседей */
.tile--b .tile__shot img,.tile--c .tile__shot img{height:150px}


/* ---------- направления: широкий список с тегами ---------- */
.scope__list{margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--line)}
.scope__row{display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,230px);
  gap:clamp(18px,3vw,44px); padding:clamp(24px,3vw,34px) 0; border-bottom:1px solid var(--line);
  align-items:start; position:relative; transition:padding-left .5s cubic-bezier(.16,1,.3,1)}
.scope__row::before{content:""; position:absolute; left:-24px; top:50%; width:12px; height:1.5px;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%; transition:transform .45s}
.scope__row:hover{padding-left:14px}
.scope__row:hover::before{transform:scaleX(1)}
.scope__row .ic{width:28px; height:28px; margin-top:2px}
.scope__row h3{margin-bottom:9px}
.scope__row p{color:var(--muted); font-size:15.5px; line-height:1.58; max-width:62ch}
.scope__tags{display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; padding-top:4px}
.scope__tags span{font-family:'Mono',monospace; font-size:10.5px; letter-spacing:.05em; color:var(--muted);
  border:1px solid var(--line); border-radius:99px; padding:5px 11px; white-space:nowrap}
@media (max-width:900px){
  .scope__row{grid-template-columns:auto minmax(0,1fr); gap:16px}
  .scope__tags{grid-column:2; justify-content:flex-start; padding-top:12px}
}

/* ---------- липкая сцена хайп/процесс ---------- */
.duo{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,6vw,88px); margin-top:clamp(40px,5vw,68px); align-items:start}
.duo__stick{position:sticky; top:clamp(100px,15vh,156px)}
.duo__row{padding:clamp(24px,3.2vw,40px) 0; border-top:1px solid var(--line)}
.duo__row:last-child{border-bottom:1px solid var(--line)}
.duo__row b{display:block; font-family:'Mono',monospace; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); font-weight:500; margin-bottom:12px}
.duo__row .hype{color:var(--muted); font-size:16.5px}
.duo__row .real{font-size:clamp(18px,1.9vw,21px); letter-spacing:-.02em; margin-top:12px}
.duo__row .real::before{content:""; display:inline-block; width:24px; height:1.5px; background:var(--accent);
  vertical-align:middle; margin-right:14px}
@media (max-width:900px){.duo{grid-template-columns:1fr}.duo__stick{position:static}}

/* ---------- метрики ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:clamp(42px,5.5vw,70px); background:var(--line)}
.stat{background:var(--bg); padding:clamp(24px,3vw,38px) clamp(18px,2vw,26px); transition:background-color 1s}
.stat b{display:block; font-family:'Mono',monospace; font-weight:500; font-size:clamp(29px,4.4vw,54px);
  letter-spacing:-.05em; line-height:1; color:var(--ink)}
.stat span{display:block; margin-top:13px; font-size:13px; color:var(--muted); line-height:1.5}
@media (max-width:820px){.stats{grid-template-columns:1fr 1fr}}
.proof__split{margin-top:clamp(38px,5vw,62px); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(28px,5vw,64px); align-items:start}
.proof__lines div{padding:18px 0; border-bottom:1px solid var(--line); font-size:16px; display:flex; gap:18px; align-items:baseline}
.proof__lines em{font-style:normal; font-family:'Mono',monospace; font-size:11.5px; color:var(--accent-soft); flex:none; min-width:2.2em}
.shot{border-radius:var(--r); overflow:hidden; border:1px solid var(--line)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .shot--mask img{clip-path:inset(0 0 100% 0); animation:unmask linear both;
      animation-timeline:view(); animation-range:entry 6% entry 62%}
    @keyframes unmask{to{clip-path:inset(0 0 0% 0)}}
  }
}
.shot img{width:100%; max-height:540px; object-fit:cover; object-position:top center}
.cap{margin-top:14px; font-family:'Mono',monospace; font-size:11.5px; color:var(--muted); line-height:1.7}
@media (max-width:900px){.proof__split{grid-template-columns:1fr}.proof__split figure{max-width:400px}}

/* ---------- бегущая строка ---------- */
.marq{overflow:hidden; border-block:1px solid var(--line); padding:20px 0}
.marq__track{display:flex; width:max-content; gap:56px; animation:slide 46s linear infinite}
.marq__track span{font-family:'Mono',monospace; font-size:12.5px; letter-spacing:.04em; color:var(--muted); white-space:nowrap}
.marq__track span::before{content:"/ "; color:var(--accent)}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq__track{animation:none}}

/* ---------- оффер ---------- */
.offer{position:relative; overflow:clip}
.offer__media{position:absolute; inset:0; z-index:0}
.offer__media img{width:100%; height:100%; object-fit:cover; object-position:center 52%}
.offer__media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,#F5F3EF 0%,rgba(245,243,239,.7) 34%,rgba(245,243,239,.93) 78%,#F5F3EF 100%)}
.offer .wrap{position:relative; z-index:1}
.offer h2{max-width:13ch}
.params{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); margin:clamp(32px,4.2vw,54px) 0}
.params div{background:var(--bg); padding:22px 20px; font-size:15.5px; line-height:1.45}
.params b{display:block; font-family:'Mono',monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); font-weight:500; margin-bottom:10px}
.offer p{max-width:58ch}
@media (max-width:1100px){.params{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.params{grid-template-columns:1fr 1fr}}


/* ---------- оффер: что получите + как проходит ---------- */
.offer__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,56px); margin-top:clamp(32px,4vw,48px)}
.offer__h3{margin-bottom:18px}
.plain{list-style:none; margin:0; padding:0; display:grid; gap:0}
.plain li{position:relative; padding:13px 0 13px 26px; border-bottom:1px solid var(--line);
  font-size:15.5px; line-height:1.55; color:var(--muted)}
.plain li::before{content:""; position:absolute; left:0; top:22px; width:11px; height:1.5px; background:var(--accent)}
.plain li:first-child{border-top:1px solid var(--line)}
.steps-list{list-style:none; margin:0; padding:0; counter-reset:s; display:grid; gap:0}
.steps-list li{counter-increment:s; padding:15px 0 15px 44px; border-bottom:1px solid var(--line);
  position:relative; font-size:15.5px; line-height:1.55; color:var(--muted)}
.steps-list li:first-child{border-top:1px solid var(--line)}
.steps-list li::before{content:counter(s,decimal-leading-zero); position:absolute; left:0; top:17px;
  font-family:'Mono',monospace; font-size:11.5px; color:var(--accent)}
.steps-list b{display:block; color:var(--ink); font-weight:600; margin-bottom:4px; font-size:16px}
.paybox{margin-top:clamp(30px,4vw,44px); padding:clamp(20px,2.6vw,28px); border-radius:var(--r);
  border:1px solid var(--line); background:var(--panel); max-width:74ch; font-size:16px; line-height:1.6; color:var(--muted)}
.paybox b{color:var(--ink)}
@media (max-width:860px){ .offer__grid{grid-template-columns:1fr} }


/* ---------- три способа: сравнение без фальшивых цифр ---------- */
.ways__table{margin-top:clamp(38px,4.6vw,60px); border-top:1px solid var(--line)}
.ways__head,.ways__row{display:grid; grid-template-columns:minmax(0,.8fr) repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,28px); padding:clamp(16px,2vw,22px) 0; border-bottom:1px solid var(--line); align-items:start}
.ways__head{font-family:'Mono',monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding-top:0}
.ways__row b{font-family:'Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:500; padding-top:2px}
.ways__row span{font-size:15px; line-height:1.5; color:var(--muted)}
.ways__mine{color:var(--ink) !important; font-weight:500; position:relative}
.ways__head .ways__mine{color:var(--accent-soft) !important}
.ways__row .ways__mine::before{content:""; position:absolute; left:-14px; top:2px; bottom:2px; width:2px;
  background:var(--accent); opacity:.55; border-radius:2px}
@media (max-width:900px){
  .ways__head{display:none}
  .ways__row{grid-template-columns:1fr; gap:8px; padding:20px 0}
  .ways__row b{margin-bottom:4px}
  .ways__row span::before{font-family:'Mono',monospace; font-size:10px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--muted); display:block; margin-bottom:3px}
  .ways__row span:nth-of-type(1)::before{content:"сам"}
  .ways__row span:nth-of-type(2)::before{content:"нанять"}
  .ways__row span:nth-of-type(3)::before{content:"со мной"; color:var(--accent)}
  .ways__row .ways__mine::before{position:static; width:auto; height:auto; background:none; opacity:1}
}

/* ---------- кому подходит ---------- */
.fit__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.6vw,32px); margin-top:clamp(36px,4.5vw,58px)}
.fit__col{border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,2.8vw,34px); background:var(--panel)}
.fit__col h3{margin-bottom:16px; font-size:clamp(17px,1.7vw,20px)}
.fit__col--yes{border-color:rgba(110,156,116,.4)}
.fit__col--yes .plain li::before{background:#6E9C74}
.fit__col--no{border-style:dashed}
.fit__col--no .plain li::before{background:var(--muted); width:8px}
@media (max-width:820px){ .fit__grid{grid-template-columns:1fr} }


/* ---------- форма заявки: работает без мессенджеров и без VPN ---------- */
.req{margin-top:clamp(34px,4.4vw,52px); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,38px); background:var(--panel); scroll-margin-top:112px}
.req__hint{margin-top:10px; color:var(--muted); font-size:15.5px; line-height:1.55; max-width:62ch}
.req__form{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.8vw,20px); margin-top:clamp(22px,2.6vw,30px)}
.fld{display:flex; flex-direction:column; gap:8px; min-width:0}
.fld--wide{grid-column:1 / -1}
.fld > span{font-family:'Mono',monospace; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.fld input,.fld textarea{
  font:inherit; font-size:16px; color:var(--ink); background:transparent;
  border:1px solid var(--line); border-radius:10px; padding:13px 15px; width:100%;
  transition:border-color .25s, box-shadow .25s; resize:vertical;
}
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted); opacity:.85}
.fld input:focus,.fld textarea:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:#D9534F}
.fld__trap{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}
.req__submit{grid-column:1 / -1; display:flex; align-items:center; gap:clamp(16px,2.4vw,28px); flex-wrap:wrap; margin-top:4px}
.req__status{margin:0; max-width:44ch}
.req__status[data-state="ok"]{color:#5FBF7F}
.req__status[data-state="err"]{color:#E8836F}
.req__alt{margin-top:22px; padding-top:20px; border-top:1px solid var(--line);
  font-size:15px; color:var(--muted)}
.req__alt a{color:var(--ink); text-decoration:none; border-bottom:1.5px solid var(--accent); padding-bottom:1px}
.req__alt a:hover{color:var(--accent)}
.req__alt span{opacity:.7; margin:0 6px}
.final .micro a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent)}
@media (max-width:720px){ .req__form{grid-template-columns:1fr} }

/* ---------- лестница: липкий стек ---------- */
.ladder{margin-top:clamp(40px,5vw,64px)}
.rung{border:1px solid var(--line); border-radius:var(--r); background:var(--bg);
  padding:clamp(26px,3.4vw,44px); display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,3vw,44px); align-items:start; margin-bottom:18px; position:sticky}
.rung:nth-child(1){top:104px}.rung:nth-child(2){top:120px}
.rung:nth-child(3){top:136px}.rung:nth-child(4){top:152px}
.rung__n{font-family:'Mono',monospace; font-size:12px; color:var(--muted)}
.rung--now .rung__n{color:var(--accent)}
.rung p{margin-top:10px; color:var(--muted); font-size:16px; max-width:62ch}
.rung__price{font-family:'Mono',monospace; font-size:clamp(15px,1.5vw,18px); color:var(--accent-soft);
  white-space:nowrap; text-align:right; letter-spacing:-.02em}
.rung__price small{display:block; margin-top:5px; font-size:11.5px; color:var(--muted);
  white-space:normal; text-align:right; max-width:19em; line-height:1.45; letter-spacing:0}
.rung--now h3::after{content:"вы сейчас здесь"; display:inline-block; margin-left:14px; padding:5px 12px;
  border-radius:99px; border:1px solid rgba(210,98,47,.5); color:var(--accent); font-family:'Mono',monospace;
  font-size:10.5px; letter-spacing:.08em; vertical-align:middle; font-weight:500}
@media (max-width:820px){.rung{position:static; grid-template-columns:1fr; gap:8px}
  .rung__price{text-align:left; margin-top:14px}
  .rung__price small{text-align:left; max-width:26em}}
.ladder__note{margin-top:34px; color:var(--muted); max-width:58ch}

/* ---------- честная часть ---------- */
.honest .wrap{max-width:780px}
.honest p{margin-top:24px; font-size:clamp(18px,2vw,21px); line-height:1.56; color:var(--muted); letter-spacing:-.014em}
.honest p:first-of-type{color:var(--ink)}

/* ---------- биография ---------- */
.who{display:grid; grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr); gap:clamp(30px,5vw,72px);
  align-items:start; margin-top:clamp(40px,5vw,64px)}
.who__photo{border-radius:var(--r); overflow:hidden; border:1px solid var(--line); position:sticky; top:104px}
.who__photo img{width:100%; filter:grayscale(1) contrast(1.05)}
.tl{position:relative; padding-left:26px}
.tl::before{content:""; position:absolute; left:6px; top:0; bottom:0; width:2px; background:var(--line)}
.tl::after{content:""; position:absolute; left:6px; top:0; bottom:0; width:2px; background:var(--accent);
  transform:scaleY(0); transform-origin:top}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .tl::after{animation:rail linear both; animation-timeline:view(); animation-range:cover 12% cover 78%}
    @keyframes rail{to{transform:scaleY(1)}}
  }
}
.tl div{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(16px,2.4vw,34px);
  padding:16px 0; border-bottom:1px solid var(--line); font-size:15.5px; align-items:baseline}
.tl div:first-child{border-top:1px solid var(--line)}
.tl b{font-family:'Mono',monospace; font-weight:500; font-size:13px; color:var(--accent)}
.tl .now span{color:var(--ink); font-weight:500}
.who__note{margin-top:32px; font-size:clamp(17px,1.8vw,20px); max-width:50ch; letter-spacing:-.018em}
@media (max-width:900px){.who{grid-template-columns:1fr}.who__photo{position:static; max-width:320px}}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:26px 56px 26px 0; position:relative;
  font-size:clamp(17px,1.9vw,21px); font-weight:500; letter-spacing:-.022em; transition:color .3s}
.faq summary:hover{color:var(--accent)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after,.faq summary::before{content:""; position:absolute; right:12px; top:50%;
  background:var(--muted); transition:transform .38s cubic-bezier(.16,1,.3,1), background-color .3s}
.faq summary::after{width:15px; height:1.5px; margin-top:-1px}
.faq summary::before{width:1.5px; height:15px; margin-top:-8px; right:19px}
.faq details[open] summary::before{transform:scaleY(0); background:var(--accent)}
.faq details[open] summary::after{background:var(--accent)}
.faq__body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s cubic-bezier(.16,1,.3,1)}
.faq details[open] .faq__body{grid-template-rows:1fr}
.faq__body>div{overflow:hidden; min-height:0}
.faq p{padding:0 0 28px; color:var(--muted); max-width:68ch; font-size:16.5px}
@media (prefers-reduced-motion:reduce){.faq__body{transition:none}}

/* ---------- финал ---------- */
.final{text-align:center; padding-block:clamp(96px,14vw,180px)}
.final h2{margin:0 auto; max-width:13ch; font-size:clamp(33px,5.8vw,74px)}
.final .lead{margin:26px auto 0}
.final .btn{margin-top:40px}
.foot{border-top:1px solid var(--line); padding-block:44px; font-size:14px; color:var(--muted)}
.foot__in{display:flex; gap:20px 32px; align-items:center; flex-wrap:wrap}
.foot__in nav{margin-left:auto; display:flex; gap:24px}
.foot a{text-decoration:none; transition:color .25s}
.foot a:hover{color:var(--ink)}
.foot__slogan{font-family:'Mono',monospace; font-size:11.5px; letter-spacing:.04em}

/* ---------- липкая кнопка на мобильном: трафик идёт из мессенджеров ---------- */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:65; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); display:none; gap:12px; align-items:center;
  transform:translateY(110%); transition:transform .4s cubic-bezier(.16,1,.3,1)}
.sticky-cta[data-show="1"]{transform:none}
.sticky-cta .btn{flex:1; padding:14px 18px; font-size:15.5px}
.sticky-cta span{font-family:'Mono',monospace; font-size:10.5px; color:var(--muted); line-height:1.4; max-width:9em}
@media (max-width:860px){ .sticky-cta{display:flex} }
@media (prefers-reduced-motion:reduce){ .sticky-cta{transition:none} }


/* --- лид-магнит: чек-лист (мягкое действие, не конкурирует с формой разбора) --- */
.magnet{margin-top:clamp(24px,3vw,40px); padding:clamp(22px,2.8vw,32px);
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel)}
.magnet h3{font-size:clamp(17px,1.7vw,20px); margin-bottom:10px}
.magnet > p{color:var(--muted); max-width:74ch; font-size:16px; line-height:1.6}
.magnet__form{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; position:relative}
.magnet__form input[name=contact]{flex:1 1 260px; font:inherit; font-size:16px; color:var(--ink);
  background:transparent; border:1px solid var(--line); border-radius:10px; padding:13px 15px;
  transition:border-color .25s, box-shadow .25s}
.magnet__form input[name=contact]::placeholder{color:var(--muted); opacity:.85}
.magnet__form input[name=contact]:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.magnet__form input[aria-invalid="true"]{border-color:#D9534F}
.magnet__status{margin-top:12px; font-size:15px; color:var(--muted)}
.magnet__status[data-state="ok"]{color:#5FBF7F}
.magnet__status[data-state="err"]{color:#E8836F}
.magnet__status a{color:inherit; text-decoration:underline}


/* ---------- иконка в подписи секции: система главной на подстраницах ---------- */
.kicker--ic{display:inline-flex; align-items:center; gap:10px}
.kicker--ic .ic{width:22px; height:22px}

/* ---------- развилка «куда дальше»: две двери перед подвалом ---------- */
.next{margin-top:clamp(44px,5.6vw,76px); border-top:1px solid var(--line);
  padding-top:clamp(26px,3.2vw,40px)}
.next__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px); margin-top:clamp(18px,2.2vw,26px)}
.next__card{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(14px,1.8vw,20px);
  align-items:start; padding:clamp(20px,2.4vw,28px); border:1px solid var(--line);
  border-radius:var(--r); background:var(--panel); text-decoration:none; color:inherit;
  transition:border-color .45s, transform .5s cubic-bezier(.16,1,.3,1)}
.next__card:hover{transform:translateY(-3px); border-color:rgba(210,98,47,.42)}
.next__card .ic{width:30px; height:30px; margin-top:2px}
.next__card b{display:block; font-size:clamp(17px,1.7vw,20px); font-weight:500;
  letter-spacing:-.022em; line-height:1.22}
.next__card span{display:block; margin-top:8px; color:var(--muted); font-size:15px;
  line-height:1.5; max-width:34ch}
.final .next{text-align:left}
@media (max-width:820px){.next__grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .next__card{transition:none}
  .next__card:hover{transform:none}
}


/* ---------- инфографика подстраниц: воронка, двери, честная панель, граница ----------
   Правило блока: шкала рисуется только при честном знаменателе, все числа - со страницы,
   типографика вёрсткой (в SVG только фигуры). Тема наследуется через токены. */

/* воронка заявок: ширина полос пропорциональна настоящим числам 100 / 20 / 5 */
.funnel{display:grid; grid-template-columns:minmax(0,1fr) clamp(150px,26%,230px);
  gap:clamp(16px,2.4vw,30px); margin-top:clamp(28px,3.6vw,44px); max-width:760px}
.funnel__stages{display:grid; grid-template-rows:18fr 2fr 18fr 2fr 18fr}
.funnel__stage{display:flex; flex-direction:column; justify-content:center;
  align-items:flex-end; text-align:right}
.funnel__stage:nth-child(2){grid-row:3}
.funnel__stage:nth-child(3){grid-row:5}
.funnel__stage b{font-family:'Mono',monospace; font-weight:500; line-height:1;
  font-size:clamp(27px,3.6vw,44px); letter-spacing:-.05em; color:var(--ink)}
.funnel__stage span{margin-top:8px; font-size:13px; color:var(--muted);
  line-height:1.45; max-width:26ch}
.funnel__stage--last b{color:var(--accent-soft)}
.funnel__shape{display:block; width:100%; height:100%; min-height:230px}
.funnel__shape .fu-band{fill:color-mix(in srgb,var(--ink) 9%,transparent);
  stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke}
.funnel__shape .fu-last{fill:var(--accent); stroke:none}
.funnel__aside{display:flex; align-items:center; gap:14px; margin-top:clamp(18px,2.2vw,26px);
  padding:14px 18px; border:1px dashed var(--line); border-radius:12px; max-width:52ch}
.funnel__aside svg{flex:none; width:44px; height:22px}
.funnel__aside .fu-half-bg{fill:none; stroke:var(--line); stroke-width:4}
.funnel__aside .fu-half-fg{fill:var(--accent); stroke:none}
.funnel__aside span{font-size:13.5px; color:var(--muted); line-height:1.5}
.funnel--mini{grid-template-columns:minmax(0,1fr) clamp(120px,20%,170px);
  gap:clamp(14px,2vw,24px)}
.funnel--mini .funnel__shape{min-height:150px}
.funnel--mini .funnel__stage b{font-size:clamp(21px,2.4vw,28px)}
.funnel--mini .funnel__stage span{font-size:12px; margin-top:5px}
@media (max-width:640px){
  .funnel{grid-template-columns:minmax(0,1fr) 96px; gap:16px}
  .funnel__shape{min-height:200px}
}

/* четыре двери: куда реально шли обращения, пока счётчик смотрел в одну */
.doors{margin-top:clamp(28px,3.6vw,44px)}
.doors .cap{margin-top:16px; max-width:54ch}
.door__eye{width:18px; height:18px; flex:none}
.door__eye .dw-eye{fill:none; stroke:currentColor; stroke-width:14}
.doors__row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--line)}
.door{background:var(--bg); padding:clamp(18px,2.2vw,26px) clamp(14px,1.6vw,20px);
  display:flex; flex-direction:column; gap:12px; transition:background-color 1s}
.door__glyph{width:100%; max-width:78px; height:auto}
.door__glyph .dr-leaf{fill:var(--panel); stroke:var(--line); stroke-width:4}
.door__glyph .dr-knob{fill:var(--muted)}
.door--watched .door__glyph .dr-leaf{stroke:var(--accent-soft); stroke-dasharray:10 8}
.door--used .door__glyph .dr-leaf{fill:color-mix(in srgb,var(--accent) 12%,transparent);
  stroke:var(--accent)}
.door--used .door__glyph .dr-knob{fill:var(--accent)}
.door b{font-family:'Mono',monospace; font-weight:500; font-size:clamp(28px,3.6vw,46px);
  letter-spacing:-.05em; line-height:1; color:var(--ink)}
.door--used b{color:var(--accent-soft)}
.door > span{font-size:13px; color:var(--muted); line-height:1.45}
.door em{font-style:normal; font-family:'Mono',monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:8px}
.door--watched em{color:var(--accent-soft)}
.ticks{display:flex; gap:4px; flex-wrap:wrap; min-height:16px}
.ticks i{display:block; width:3px; height:16px; border-radius:2px; background:var(--accent)}
.ticks--none i{background:var(--line); width:14px; height:2px; align-self:center}
@media (max-width:820px){.doors__row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.doors__row{grid-template-columns:1fr}}

/* честная панель: один бар с честным знаменателем + пуант «0 против 9» */
.panelfig{margin-top:clamp(26px,3.2vw,38px); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(20px,2.6vw,30px); background:var(--panel)}
.panelfig__bar{display:block}
.panelfig__bar b{font-family:'Mono',monospace; font-weight:500; font-size:15px;
  letter-spacing:-.02em; color:var(--ink)}
.panelfig__bar u{text-decoration:none; display:block; height:8px; border-radius:4px;
  background:var(--line-soft); margin-top:10px; position:relative; overflow:hidden}
.panelfig__bar u::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--share,0);
  background:var(--accent); border-radius:inherit}
.panelfig__bar span{display:block; margin-top:9px; font-size:12.5px; color:var(--muted)}
.panelfig__chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(20px,2.4vw,28px)}
.panelfig__chips div{display:flex; flex-direction:column; gap:4px; padding:11px 16px;
  border:1px solid var(--line); border-radius:12px}
.panelfig__chips b{font-family:'Mono',monospace; font-weight:500; font-size:clamp(17px,1.8vw,21px);
  letter-spacing:-.04em; color:var(--accent-soft)}
.panelfig__chips span{font-size:12px; color:var(--muted); line-height:1.35; max-width:16em}
.panelfig__vs{display:flex; align-items:center; gap:clamp(16px,2.6vw,32px); flex-wrap:wrap;
  margin-top:clamp(22px,2.8vw,32px); padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line)}
.panelfig__vs > span.panelfig__zero{font-family:'Mono',monospace; font-weight:500;
  font-size:clamp(52px,6.4vw,84px); line-height:.9; letter-spacing:-.06em; text-transform:none;
  color:transparent; -webkit-text-stroke:1.5px var(--muted); text-stroke:1.5px var(--muted)}
.panelfig__vs > span{font-family:'Mono',monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
.panelfig__nine{display:flex; flex-direction:column; gap:9px}
.panelfig__nine .ticks i{width:4px; height:34px}
.panelfig__nine em{font-style:normal; font-size:12.5px; color:var(--muted); line-height:1.4}

/* граница по подписи: тихая полоса из принятой фразы + кадр-иллюстрация */
.brdr{margin:clamp(30px,4vw,50px) 0 0}
.brdr__split{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:clamp(16px,2.6vw,34px); margin-top:clamp(20px,2.4vw,30px)}
.brdr__split p{font-size:clamp(18px,2vw,24px); line-height:1.3; letter-spacing:-.024em;
  color:var(--ink)}
.brdr__split p:last-child{text-align:right}
.brdr__line{width:2px; align-self:stretch; min-height:52px; background:var(--accent);
  border-radius:2px; opacity:.75}
@media (max-width:600px){
  .brdr__split{grid-template-columns:1fr; gap:14px}
  .brdr__split p:last-child{text-align:left}
  .brdr__line{width:auto; height:2px; min-height:0}
}

/* «проверьте себя»: чекбоксы для себя, ответы никуда не уходят */
.chk{display:grid; grid-template-columns:auto auto minmax(0,1fr);
  gap:clamp(14px,2.2vw,26px); padding:20px 0; border-bottom:1px solid var(--line);
  align-items:baseline; cursor:pointer}
.chk input{position:absolute; opacity:0; width:0; height:0}
.chk__box{width:22px; height:22px; border:1px solid var(--line); border-radius:6px;
  position:relative; flex:none; align-self:center; transition:border-color .3s, background-color .3s}
.chk__box::after{content:""; position:absolute; left:6px; top:2px; width:6px; height:12px;
  border:solid var(--accent); border-width:0 2px 2px 0; transform:rotate(42deg) scale(.4);
  opacity:0; transition:opacity .25s, transform .25s cubic-bezier(.16,1,.3,1)}
.chk input:checked + .chk__box{border-color:var(--accent)}
.chk input:checked + .chk__box::after{opacity:1; transform:rotate(42deg) scale(1)}
.chk input:focus-visible + .chk__box{outline:2px solid var(--accent); outline-offset:3px}
.chk:hover .chk__box{border-color:var(--accent-soft)}
@media (prefers-reduced-motion:reduce){
  .chk__box,.chk__box::after{transition:none}
}

/* рамка-шапка на кадре системы: тот же язык, что у term__bar («снимок от 12 августа») */
.shotbar{display:flex; align-items:center; gap:12px; padding:12px 18px;
  border:1px solid var(--line); border-bottom:none; border-radius:var(--r) var(--r) 0 0;
  background:var(--panel); font-family:'Mono',monospace; font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.shotbar + .shot{border-radius:0 0 var(--r) var(--r)}

/* ---------- рыночная шкала цен: где стоит мой путь между двумя краями рынка ----------
   Отметки расставлены линейно по самой шкале 25 -> 250 тыс, числа - из текста страницы. */
.pscale{margin-top:clamp(28px,3.4vw,42px)}
.pscale__line{position:relative; height:10px; border-radius:5px; background:var(--line-soft);
  margin:0 0 clamp(18px,2.2vw,26px)}
.pscale__zone{position:absolute; top:0; bottom:0; left:42%; right:31%;
  background:var(--accent); border-radius:5px}
.pscale__pin{position:absolute; top:50%; width:12px; height:12px; margin-top:-6px;
  border-radius:50%; background:var(--bg); border:2px solid var(--muted)}
.pscale__pin--l{left:0}
.pscale__pin--r{right:0; transform:translateX(0)}
.pscale__legend{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(14px,2vw,26px)}
.pscale__legend > div{display:flex; flex-direction:column; gap:6px}
.pscale__legend b{font-family:'Mono',monospace; font-weight:500; font-size:clamp(16px,1.8vw,21px);
  letter-spacing:-.04em; color:var(--muted)}
.pscale__legend span{font-size:13px; line-height:1.45; color:var(--muted); max-width:28ch}
.pscale__legend > div:last-child{align-items:flex-end; text-align:right}
.pscale__mine{align-items:center; text-align:center}
.pscale__mine b{color:var(--accent-soft)}
.pscale__mine span{color:var(--ink)}
@media (max-width:720px){
  .pscale__legend{grid-template-columns:1fr; gap:14px}
  .pscale__legend > div:last-child,.pscale__mine{align-items:flex-start; text-align:left}
}

/* ---------- три карточки разметки рынка: что есть что ---------- */
.three{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(28px,3.4vw,42px)}
.three > div{border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  padding:clamp(20px,2.4vw,28px); display:flex; flex-direction:column; gap:12px}
.three .ic{width:30px; height:30px}
.three h3{font-size:clamp(17px,1.7vw,20px); font-weight:500; letter-spacing:-.022em}
.three p{font-size:14.5px; line-height:1.55; color:var(--muted)}
.three em{font-style:normal; margin-top:auto; padding-top:12px; border-top:1px solid var(--line-soft);
  font-family:'Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted)}
.three__mine{border-color:rgba(210,98,47,.42)}
.three__mine em{color:var(--accent-soft)}
@media (max-width:820px){.three{grid-template-columns:1fr}}

/* ---------- рассветный баннер финала и обложка чек-листа ---------- */
.ctashot{margin:0 0 clamp(28px,3.6vw,46px)}
.ctashot .shot{border-radius:var(--r); overflow:hidden}
.ctashot img{width:100%; height:clamp(160px,22vw,300px); object-fit:cover; object-position:center 62%}
.magnet__in{display:grid; grid-template-columns:clamp(96px,12vw,150px) minmax(0,1fr);
  gap:clamp(18px,2.4vw,30px); align-items:start}
.magnet__cover{border:1px solid var(--line); border-radius:12px; overflow:hidden}
.magnet__cover img{width:100%; height:auto; display:block}
@media (max-width:640px){
  .magnet__in{grid-template-columns:1fr}
  .magnet__cover{max-width:120px}
}

/* ---------- цепочка метода: что переносится в чужую нишу ---------- */
.chain{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.5fr); gap:0;
  margin-top:clamp(28px,3.4vw,42px)}
.chain > div{position:relative; padding:clamp(16px,2vw,22px) clamp(10px,1.4vw,16px) 0}
.chain > div::before{content:""; position:absolute; left:0; right:0; top:8px; height:2px;
  background:var(--line)}
.chain > div:first-child::before{left:50%}
.chain > div:last-child::before{right:50%}
.chain > div::after{content:""; position:absolute; left:calc(50% - 6px); top:2px;
  width:12px; height:12px; border-radius:50%; background:var(--bg);
  border:2px solid var(--accent)}
.chain b{display:block; font-family:'Mono',monospace; font-weight:500; font-size:var(--fs-label,10.5px);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  text-align:center; margin-bottom:8px}
.chain span{display:block; font-size:13.5px; line-height:1.4; color:var(--ink);
  text-align:center; hyphens:auto; overflow-wrap:anywhere}
.chain > div:first-child b,.chain > div:first-child span{text-align:left}
.chain > div:last-child b,.chain > div:last-child span{text-align:right}
@media (max-width:760px){
  .chain{grid-template-columns:1fr; gap:0}
  .chain > div:first-child span,.chain > div:last-child span{text-align:left}
  .chain > div:first-child b,.chain > div:last-child b{text-align:left}
  .chain > div{padding:14px 0 14px 28px}
  .chain > div::before{left:8px; right:auto; top:0; bottom:0; width:2px; height:auto}
  .chain > div:first-child::before{top:50%; left:8px}
  .chain > div:last-child::before{bottom:50%; top:0; left:8px}
  .chain > div::after{left:2px; top:calc(50% - 6px)}
  .chain b,.chain span{text-align:left}
}
.magnet__cover{border:0; border-radius:0; margin:0}
.magnet__cover img{border:1px solid var(--line); border-radius:12px}
.magnet__cover .cap{margin-top:8px; font-size:11px; line-height:1.35}

/* ---------- CRO-пакет 14.08: доступность действия и цены ---------- */

/* бейдж гарантии возврата - у кнопки, а не абзацем в глубине страницы */
.guar{display:flex; align-items:flex-start; gap:11px; margin-top:16px; padding:12px 16px;
  border:1px dashed var(--line); border-radius:12px; max-width:58ch;
  font-size:13.5px; line-height:1.55; color:var(--muted)}
.guar .ic{width:19px; height:19px; flex:0 0 auto; margin-top:2px}
.guar b{color:var(--ink); font-weight:600}

/* короткая лестница цен - повтор прайса на страницах, где полной лестницы нет */
.pricebar{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  margin-top:clamp(24px,3vw,36px); background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden}
.pricebar > div{background:var(--bg); padding:clamp(16px,2vw,22px)}
.pricebar em{display:block; font-style:normal; font-family:'Mono',monospace; font-size:11.5px;
  letter-spacing:.04em; color:var(--muted)}
.pricebar b{display:block; margin-top:9px; font-family:'Mono',monospace; font-weight:500;
  font-size:clamp(17px,1.8vw,22px); letter-spacing:-.04em; color:var(--accent-soft)}
.pricebar span{display:block; margin-top:7px; font-size:12.5px; color:var(--muted); line-height:1.45}
.pricebar__note{margin-top:16px; font-size:13.5px; color:var(--muted); max-width:66ch; line-height:1.55}
@media (max-width:880px){.pricebar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pricebar{grid-template-columns:1fr}}

/* средняя точка действия - чтобы не докручивать до низа страницы */
.cta-mid{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,2.4vw,32px);
  margin-top:clamp(34px,4.4vw,56px); padding:clamp(20px,2.6vw,30px);
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel)}
.cta-mid__t{flex:1 1 320px; min-width:0}
.cta-mid__t b{display:block; font-size:clamp(17px,1.8vw,21px); font-weight:600; letter-spacing:-.024em}
.cta-mid__t span{display:block; margin-top:8px; font-size:14.5px; color:var(--muted); line-height:1.55}
.cta-mid .btn{flex:0 0 auto}

/* тонкая полоса под среднюю точку действия - между крупными секциями */
.band--act{padding-block:clamp(30px,4vw,56px)}
.band--act .cta-mid{margin-top:0}
.band--act .pricebar{margin-top:clamp(20px,2.6vw,30px)}

/* стык двух секций давал двойной вертикальный отступ (~300 px на 1280) -
   почти половина экрана впустую; верхний отступ на стыке подрезан */
.sec + .sec, .band--act + .sec, .sec + .band--act{padding-top:calc(var(--sec) * .62)}

/* ============ CRO-пакет, пункты 9-20 (14.08) ============ */

/* 11. первый экран на ноутбуке 13": кнопка стояла на самой кромке (y=746 из 800) */
@media (min-width:861px) and (max-height:900px){
  .hero__in{padding-top:84px; padding-bottom:clamp(72px,13vh,116px)}
  .hero h1{font-size:clamp(34px,4vw,54px)}
  .hero__eyebrow{margin-bottom:10px}
  .hero__bottom{margin-top:14px}
  .hero__lead{max-width:62ch}
  .hero__act{gap:12px}
}

/* 12. стык секций: полоса пустоты подрезана ещё раз (было ~250 px, стало ~215) */
.sec + .sec, .band--act + .sec, .sec + .band--act{padding-top:calc(var(--sec) * .42)}
.sec + .band--act{padding-top:calc(var(--sec) * .32)}

/* 13. мини-схема из трёх узлов: тот же компонент .chain, только короче */
.chain--3{grid-template-columns:repeat(3,minmax(0,1fr)); max-width:880px;
  margin-bottom:clamp(26px,3.2vw,38px)}

/* 14. плашка чисел в статьях - тот же вид, что на страницах услуг */
.facts{display:flex; flex-wrap:wrap; gap:0; border-block:1px solid var(--line); margin-top:26px}
.facts div{padding:16px 26px 16px 0; margin-right:26px}
.facts b{display:block; font-family:'Mono',monospace; font-weight:500; font-size:clamp(21px,2.2vw,27px);
  letter-spacing:-.04em; color:var(--accent-soft)}
.facts span{display:block; margin-top:5px; font-size:12px; color:var(--muted); line-height:1.45; max-width:17em}
.qa .facts:last-child{border-bottom:0; padding-bottom:0}
@media (max-width:640px){.facts div{padding-right:0; margin-right:22px}}

/* 17. отклик самопроверки: три вопроса отвечают человеку, а не молчат */
.selfcheck__out{margin-top:22px; max-width:780px; padding:18px 22px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel); font-size:15px; line-height:1.55; color:var(--muted);
  opacity:0; transform:translateY(8px); transition:opacity .5s, transform .5s cubic-bezier(.16,1,.3,1)}
.selfcheck__out[data-on="1"]{opacity:1; transform:none}
.selfcheck__out b{color:var(--ink); font-weight:600}
.selfcheck__out a{color:var(--ink); border-bottom:1px solid var(--accent); text-decoration:none}
@media (prefers-reduced-motion:reduce){.selfcheck__out{transition:none}}

/* 19. жирная вводка ответа - точка входа глазом при беглом чтении */
.faq p b{color:var(--ink); font-weight:600}

/* 20. бейдж-ряд семейств нейросетей: только типографика, без чужих знаков и логотипов */
.famrow{margin-top:clamp(30px,3.6vw,46px)}
.famrow__head{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 16px; margin-bottom:16px}
.famrow__head b{font-family:'Mono',monospace; font-weight:500; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent-soft)}
.famrow__head span{font-size:13px; color:var(--muted); line-height:1.45}
.famrow__grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.famrow__i{background:var(--bg); padding:clamp(15px,1.8vw,21px) clamp(13px,1.5vw,19px);
  display:flex; flex-direction:column; gap:7px; position:relative;
  transition:background-color .5s cubic-bezier(.16,1,.3,1)}
.famrow__i:hover{background:var(--panel)}
.famrow__i i{font-style:normal; font-family:'Mono',monospace; font-size:10px; letter-spacing:.12em;
  color:var(--accent); opacity:.75}
.famrow__i b{font-weight:500; font-size:clamp(15px,1.55vw,18px); letter-spacing:-.02em;
  line-height:1.15; color:var(--ink)}
.famrow__i span{font-family:'Mono',monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); line-height:1.4}
.famrow__note{margin-top:16px; font-size:13px; color:var(--muted); line-height:1.55; max-width:60ch}
@media (max-width:900px){.famrow__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.famrow__i{padding:14px 13px}}

/* ── Мобильное меню (бургер) - починка 15.08.2026: до этого .nav просто скрывался ── */
.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-left:auto;
  flex-direction:column;gap:5px;flex:0 0 auto}
.navtoggle span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .25s,opacity .25s}
.hdr[data-menu="1"] .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr[data-menu="1"] .navtoggle span:nth-child(2){opacity:0}
.hdr[data-menu="1"] .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1060px){
  .navtoggle{display:flex}
  .hdr[data-menu="1"]{background:var(--hdr-bg,#0B0C0E)}
  .hdr[data-menu="1"] .nav{display:flex;flex-direction:column;position:absolute;top:74px;left:0;right:0;
    background:var(--hdr-bg,#0B0C0E);border-bottom:1px solid rgba(255,255,255,.08);
    margin:0;padding:10px 24px 22px;gap:0;font-size:17px;opacity:1;z-index:59}
  .hdr[data-menu="1"] .nav a{padding:12px 0;opacity:.85}
  .hdr[data-menu="1"] .nav a[data-active]::after{display:none}
}

@media (max-width:640px){
  .hdr__in{gap:10px;padding-inline:16px}
  .hdr .btn{padding:9px 12px;font-size:12.5px}
  .brand{font-size:17px;flex:0 0 auto}
  .navtoggle{margin-left:auto}
}

/* ── Дропдаун «Услуги» в шапке (редизайн меню 15.08.2026) ── */
.navdrop{position:relative}
.navdrop__btn{background:none;border:0;cursor:pointer;font:inherit;color:inherit;
  padding:0;display:inline-flex;align-items:center;gap:5px;opacity:inherit}
.navdrop__caret{font-size:10px;transition:transform .2s}
.navdrop__menu{position:absolute;top:calc(100% + 14px);left:-16px;min-width:250px;
  background:var(--hdr-bg,#0B0C0E);border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:10px 0;display:none;flex-direction:column;z-index:70;
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
/* невидимый мост над меню: без него курсор пересекает 14px зазора, :hover слетает и меню закрывается */
.navdrop__menu::before{content:'';position:absolute;top:-15px;left:0;right:0;height:15px}
.navdrop__menu a{padding:10px 20px;white-space:nowrap;opacity:.8}
.navdrop__menu a:first-child{opacity:1;font-weight:600}
.navdrop__menu a:hover{opacity:1;background:rgba(255,255,255,.05)}
.navdrop.open .navdrop__menu, .navdrop:hover .navdrop__menu{display:flex}
.navdrop.open .navdrop__caret, .navdrop:hover .navdrop__caret{transform:rotate(180deg)}
@media (max-width:1060px){
  /* в мобильной панели - плоский список без дропдауна */
  .hdr[data-menu="1"] .navdrop{position:static}
  .hdr[data-menu="1"] .navdrop__btn{display:none}
  .hdr[data-menu="1"] .navdrop__menu{display:flex;position:static;border:0;box-shadow:none;
    padding:0;min-width:0;background:none}
  .hdr[data-menu="1"] .navdrop__menu a{padding:12px 0;opacity:.85;white-space:normal}
}


/* крошки: смысловой элемент, визуально прячем (наезжали на логотип) */
.crumbs{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* согласие в форме и баннер cookie (свой, без иностранных CMP) */
.consent{display:flex;align-items:flex-start;gap:8px;margin:10px 0 6px;
  font-size:13px;line-height:1.4;opacity:.85;text-align:left}
.consent input{margin-top:2px;flex:0 0 auto;width:16px;height:16px}
.consent a{text-decoration:underline}
.cookiebar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;
  display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:10px 14px;border-radius:10px;font-size:13px;line-height:1.4;
  background:rgba(20,20,24,.94);color:#f2f2f4;box-shadow:0 6px 24px rgba(0,0,0,.28)}
.cookiebar a{color:#9ec1ff;text-decoration:underline}
.cookiebar button{padding:6px 14px;border:0;border-radius:8px;cursor:pointer;
  background:#f2f2f4;color:#16161a;font:inherit}
.cookiebar button.ghost{background:transparent;color:#f2f2f4;border:1px solid rgba(242,242,244,.45)}
@media (max-width:640px){.cookiebar{flex-direction:column;align-items:stretch;text-align:left}
  .cookiebar button{width:100%}}

/* Баннер согласия обязан быть кликабельным: у виджета агента z-index 95,
   у липкой кнопки 65 - без этого «Принять» физически нельзя нажать. */
.cookiebar{z-index:120}
body.has-consentbar .agw-btn,body.has-consentbar .agw{bottom:104px}
@media (max-width:860px){
  .cookiebar{bottom:78px}
  body.has-consentbar .agw-btn,body.has-consentbar .agw{bottom:164px}
}

/* Подвал: список ссылок не переносился и растягивал страницу на 1 245 px при
   экране 390 px - из-за этого «ломалась» вся мобильная версия, хотя шапка и
   бургер работали правильно. */
.foot__in nav{flex-wrap:wrap}
@media (max-width:860px){
  .foot__in{gap:14px}
  .foot__in nav{margin-left:0; width:100%; gap:10px 18px}
  .foot__in nav a{font-size:13.5px}
}

@media (max-width:1060px){
  /* Панель меню не должна уезжать за экран. На 360x640 четыре нижних пункта были
     физически недоступны: панель абсолютная внутри фиксированной шапки, страница
     под ней не прокручивает её содержимое. Теперь прокручивается сама панель. */
  .hdr[data-menu="1"] .nav{
    max-height:calc(100vh - 74px);
    max-height:calc(100dvh - 74px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-bottom:18px;
  }
}
/* пока меню открыто, фон под ним не ездит */
body[data-menu-open="1"]{overflow:hidden}

@media (max-width:600px){
  /* На узком экране в шапку не влезают бренд, бургер и кнопка разом - кнопку
     обрезало правым краем. Действие не теряется: оно есть в первом экране
     и в липкой панели снизу. */
  .hdr__in > .btn{display:none}
}
/* пока открыто меню, ничего не лежит поверх него */
body[data-menu-open="1"] .cookiebar,
body[data-menu-open="1"] .sticky-cta,
body[data-menu-open="1"] .agw-btn,
body[data-menu-open="1"] .agw{display:none}

@media (max-width:520px){
  /* Полосы фактов на телефоне стояли в две колонки по ~180 px: значение
     ломалось на пять коротких строк. Одна колонка читается нормально. */
  .params{grid-template-columns:1fr}
  .params > div{padding:18px 20px}
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  /* Моношрифтовая мелочь 11-11,5 px на телефоне не читается. */
  .cap{font-size:13px; line-height:1.6}
  .micro{font-size:13px; line-height:1.72}
  .kicker{font-size:12px; letter-spacing:.16em}
  .hero__eyebrow{font-size:12.5px; letter-spacing:.16em}
  .params b{font-size:11.5px}
  .pricebar em{font-size:12px}
  .magnet__cover .cap{font-size:12.5px}
}

@media (max-width:640px){
  .kicker{font-size:12.5px}
  .artmeta{font-size:12.5px}
  .bot__cap{font-size:12.5px; line-height:1.5}
}

@media (max-width:860px){
  /* липкая кнопка снизу перекрывала последние 78 px страницы, включая часть подвала */
  body{padding-bottom:86px}
  body[data-menu-open="1"]{padding-bottom:0}
}