@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}
.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}
: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)}}
  }
}
.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);
  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--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}}
.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} }