/* ═══════════════════════════════════════
   АктВДК — строгий B2B
   Редакционная сетка, фотография, тонкие линии
   ═══════════════════════════════════════ */

:root{
  --ink:#14181D;
  --ink-2:#2C333B;
  --grey:#69707A;
  --grey-2:#98A0A9;
  --line:#DDE1E6;
  --line-2:#ECEEF1;
  --paper:#FFFFFF;
  --paper-2:#F5F6F8;
  --paper-3:#EDEFF2;

  --blue:#15537D;
  --blue-dk:#0F3E5E;
  --blue-lt:#E8F0F6;

  --ok:#2E7D4F;
  --wk:#B5651D;

  --ff:'Golos Text', 'Inter', system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:clip на корне (не на body!) гасит возможный горизонтальный
   оверфлоу от 100vw-паддингов, НЕ создавая скролл-контейнер → sticky не ломается. */
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--ff);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* overflow-x на body убран намеренно: он делал body скролл-контейнером и
     ломал/дёргал position:sticky у шапки (защита от гор. скролла — на html). */
}
a{color:inherit;text-decoration:none}
ul,dl{list-style:none}
img{display:block;max-width:100%}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── Кнопки ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ff);font-weight:600;border:1px solid transparent;
  border-radius:2px;cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-s{padding:10px 18px;font-size:14px}
.btn-l{padding:15px 30px;font-size:15.5px}
.btn-w{width:100%}
.btn-p{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-p:hover{background:var(--blue-dk);border-color:var(--blue-dk)}
.btn-o{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-o:hover{border-color:var(--ink)}

/* ── Заголовки секций ── */
.sh{max-width:760px;margin-bottom:60px}
.sh h2{
  font-size:clamp(27px,3.1vw,38px);font-weight:700;
  line-height:1.24;letter-spacing:-.5px;
}
.sh .sub{font-size:17px;color:var(--grey);margin-top:16px;max-width:600px}

/* ═══ ШАПКА ═══ */
header{
  position:sticky;top:0;z-index:100;
  /* Своя изоляция слоёв: шапка гарантированно выше секций (у них transform в
     .rv-анимации и полноширинные фото создают собственные слои). */
  isolation:isolate;
  /* Сплошной непрозрачный фон: в Safari backdrop-filter на sticky отваливается,
     и контент просвечивал сквозь полупрозрачную шапку. Blur убран намеренно. */
  background:#fff;
  border-bottom:1px solid var(--line);
  /* Отдельный слой композитинга — плавное залипание без рывков. */
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:28px}
.brand{display:flex;align-items:center;gap:11px}
.mk{
  width:36px;height:36px;flex-shrink:0;
  border:1px solid var(--line);border-radius:2px;
  color:var(--blue);display:grid;place-items:center;
}
.mk svg{width:20px;height:20px}
.mk-d{border-color:rgba(255,255,255,.2);color:#fff}
.bt{font-size:18px;font-weight:700;letter-spacing:-.3px}
.nl{display:flex;gap:32px}
.nl a{font-size:14.5px;font-weight:500;color:var(--grey);transition:color .18s}
.nl a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:12px}

/* ═══ ПЕРВЫЙ ЭКРАН ═══ */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 74px)}
.hero-txt{display:flex;align-items:center;padding:80px 40px 80px max(40px, calc((100vw - 1280px)/2 + 40px))}
.hero-inner{max-width:600px}
.tagline{
  display:block;font-family:var(--mono);font-size:12.5px;color:var(--blue);
  padding-bottom:20px;margin-bottom:26px;border-bottom:1px solid var(--line);
  letter-spacing:.3px;
}
.hero h1{
  font-size:clamp(32px,4vw,50px);font-weight:700;
  line-height:1.15;letter-spacing:-1.2px;
}
.hero-txt > .hero-inner > p{
  font-size:17.5px;color:var(--grey);margin:24px 0 36px;max-width:520px;line-height:1.66;
}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px}
.specs{display:flex;gap:40px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--line)}
.specs dt{font-size:22px;font-weight:700;letter-spacing:-.4px;line-height:1.25}
.specs dd{font-size:13px;color:var(--grey-2);margin-top:3px}

.hero-img{position:relative;background:var(--paper-3);overflow:hidden}
.hero-img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) contrast(1.03);
}
.hero-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(20,24,29,.14), transparent 42%);
}

/* ═══ ЦИФРЫ ═══ */
.figures{border-bottom:1px solid var(--line);background:var(--paper)}
.fg{display:grid;grid-template-columns:repeat(4,1fr)}
.f{padding:38px 32px 38px 0;border-right:1px solid var(--line)}
.f:first-child{padding-left:0}
.f:not(:first-child){padding-left:32px}
.f:last-child{border-right:none}
.fn{display:block;font-size:36px;font-weight:700;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums}
.fn em{font-style:normal;font-size:17px;font-weight:600;color:var(--blue)}
.fl{display:block;font-size:13.5px;color:var(--grey);margin-top:10px}

/* ═══ ЧТО МЕНЯЕТСЯ ═══ */
.change{padding:100px 0}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.cc{padding:38px 44px 0 0}
.cc:last-child{padding:38px 0 0 44px;border-left:1px solid var(--line)}
.cc h3{font-size:13px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:26px;color:var(--grey-2)}
.cc:last-child h3{color:var(--blue)}
.cc li{
  position:relative;padding:15px 0 15px 28px;font-size:15.5px;
  border-bottom:1px solid var(--line-2);line-height:1.55;
}
.cc li:last-child{border-bottom:none}
.old li{color:var(--grey)}
.old li::before{content:"—";position:absolute;left:0;color:var(--grey-2);font-family:var(--mono);font-size:13px}
.new li{color:var(--ink)}
.new li::before{content:"→";position:absolute;left:0;color:var(--blue);font-family:var(--mono);font-size:13px}

/* ═══ ПОЛОСА С ФОТО ═══ */
.quote{position:relative;min-height:440px;display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.quote img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.5) brightness(.42) contrast(1.08);
}
.q-in{position:relative}
.q-in p{
  font-size:clamp(26px,3.4vw,42px);font-weight:700;color:#fff;
  line-height:1.28;letter-spacing:-.8px;max-width:620px;
}

/* ═══ КАК РАБОТАЕТ ═══ */
.how{padding:100px 0;background:var(--paper-2)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.st{display:flex;flex-direction:column;padding-top:26px;border-top:1px solid var(--line)}
.st h3{font-size:20px;font-weight:700;letter-spacing:-.3px;margin-bottom:11px}
.st > p{font-size:15px;color:var(--grey);line-height:1.65;margin-bottom:28px}

/* макеты интерфейса — плоские, без теней */
.ui{
  margin-top:auto;background:#fff;border:1px solid var(--line);border-radius:3px;
  font-size:13px;
}
.phone{padding:16px}
.ph-top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--grey-2);padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.ph-h{padding:13px 0 12px}
.ph-h b{display:block;font-size:14px;font-weight:600}
.ph-h span{font-size:11.5px;color:var(--grey-2)}
.ph-r{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-top:1px solid var(--line-2)}
.ph-r > span{font-size:12.5px;color:var(--grey)}
.ph-r b{font-size:13px;font-weight:600}
.ph-r b.ac{color:var(--blue)}
.seg{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.seg i{font-family:var(--mono);font-size:11px;font-style:normal;color:var(--grey-2);padding:4px 9px;border-right:1px solid var(--line)}
.seg i:last-child{border-right:none}
.seg i.on{background:var(--blue);color:#fff}
.ph-b{
  display:block;margin-top:14px;padding:10px;text-align:center;
  background:var(--paper-2);border:1px solid var(--line);border-radius:2px;
  font-size:12.5px;font-weight:600;color:var(--ink-2);
}

.dash{padding:16px}
.d-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.d-top b{font-size:14px;font-weight:600}
.chip{font-family:var(--mono);font-size:10.5px;color:var(--blue);background:var(--blue-lt);padding:3px 8px;border-radius:2px}
.d-m{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.d-m b{display:block;font-size:17px;font-weight:700;letter-spacing:-.3px}
.d-m b.ac{color:var(--blue)}
.d-m span{font-size:11px;color:var(--grey-2)}
.d-r{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line-2)}
.d-r:last-child{border-bottom:none}
.d-r > span{font-size:12.5px;color:var(--grey)}
.s{font-family:var(--mono);font-size:10px;font-style:normal;padding:3px 8px;border-radius:2px;white-space:nowrap}
.s.ok{background:rgba(46,125,79,.1);color:var(--ok)}
.s.wk{background:rgba(181,101,29,.1);color:var(--wk)}
.s.tk{background:var(--blue-lt);color:var(--blue)}

.doc{padding:16px}
.doc-h{display:flex;align-items:center;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid var(--line-2)}
.doc-h .mono{font-size:11px;color:var(--grey)}
.doc-t{padding:6px 0}
.dt-r{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;padding:8px 0;border-bottom:1px solid var(--line-2);font-family:var(--mono);font-size:11.5px}
.dt-r span:not(:first-child){text-align:center}
.dt-h{color:var(--grey-2);font-size:10px;letter-spacing:.4px}
.doc-f{display:flex;align-items:center;justify-content:space-between;padding-top:13px;border-top:1px solid var(--line-2);margin-top:6px}
.doc-f span{font-size:11.5px;color:var(--grey-2)}
.doc-f b{font-family:var(--mono);font-size:12.5px}

/* ═══ ВОЗМОЖНОСТИ ═══ */
.caps{padding:100px 0}
.cg{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cp{padding:34px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cp h3{font-size:17.5px;font-weight:600;letter-spacing:-.2px;margin-bottom:11px}
.cp p{font-size:14.5px;color:var(--grey);line-height:1.65}

/* ═══ БЕЗ БУМАГИ ═══ */
.paper{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.p-img{position:relative;min-height:560px;background:var(--paper-3)}
.p-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7) contrast(1.04)}
.p-txt{display:flex;align-items:center;padding:90px max(40px, calc((100vw - 1280px)/2 + 40px)) 90px 64px;background:var(--paper-2)}
.p-in{max-width:560px}
.p-in h2{font-size:clamp(26px,3vw,36px);font-weight:700;line-height:1.24;letter-spacing:-.6px;margin-bottom:22px}
.p-in p{font-size:16.5px;color:var(--grey);margin-bottom:16px;line-height:1.68}
.specs-d{margin-top:34px;gap:48px}
.specs-d dt{color:var(--blue)}
.specs-d dd{max-width:170px;line-height:1.45}

/* ═══ ЗАЯВКА ═══ */
.lead{padding:100px 0;border-top:1px solid var(--line)}
.lg{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.l-copy h2{font-size:clamp(26px,3vw,36px);font-weight:700;line-height:1.22;letter-spacing:-.6px;margin-bottom:18px}
.l-copy > p{font-size:16.5px;color:var(--grey);margin-bottom:36px;line-height:1.66}
.l-list{border-top:1px solid var(--line);margin-bottom:36px}
.l-list li{padding:18px 0;border-bottom:1px solid var(--line-2)}
.l-list b{display:block;font-size:15px;font-weight:600;margin-bottom:3px}
.l-list span{font-size:14px;color:var(--grey)}
.l-photo{border:1px solid var(--line);border-radius:3px;overflow:hidden}
.l-photo img{width:100%;height:220px;object-fit:cover;filter:saturate(.78) contrast(1.03)}

.l-form{border:1px solid var(--line);border-radius:3px;padding:36px;background:var(--paper-2)}
.l-form h3{font-size:20px;font-weight:700;letter-spacing:-.3px;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fd{display:block;margin-bottom:18px}
.fd > span{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:8px}
.fd input,.fd select,.fd textarea{
  width:100%;padding:12px 14px;
  font-family:var(--ff);font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:2px;
  transition:border-color .18s;
}
.fd textarea{resize:vertical;min-height:80px}
.fd input::placeholder,.fd textarea::placeholder{color:var(--grey-2)}
.fd input:focus,.fd select:focus,.fd textarea:focus{outline:none;border-color:var(--blue)}
.fd input.err,.fd select.err{border-color:var(--wk)}
.note{font-size:12px;color:var(--grey-2);margin-top:14px;line-height:1.5}
.msg{font-size:14px;font-weight:500;margin-top:14px;display:none}
.msg.ok{display:block;color:var(--ok)}
.msg.bad{display:block;color:var(--wk)}

/* ═══ ПОДВАЛ ═══ */
footer{background:var(--ink);color:#fff;padding:70px 0 28px}
.fg2{display:grid;grid-template-columns:1.9fr 1fr 1fr;gap:56px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)}
.fb{display:flex;gap:15px}
.fb b{font-size:18px;font-weight:700;display:block;margin-bottom:10px}
.fb p{font-size:14px;color:rgba(255,255,255,.55);max-width:360px;line-height:1.65}
.fc h5{font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:16px}
.fc a{display:block;font-size:14.5px;color:rgba(255,255,255,.72);padding:6px 0;transition:color .18s}
.fc a:hover{color:#fff}
.fbt{display:flex;justify-content:space-between;padding-top:26px;font-size:13px;color:rgba(255,255,255,.42)}

/* ═══ Сдержанное появление ═══ */
.rv{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
.rv.in{opacity:1;transform:none}

/* ═══ АДАПТИВ ═══ */
@media(max-width:1080px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-txt{padding:64px 40px}
  .hero-inner{max-width:none}
  .hero-img{min-height:420px}
  .paper{grid-template-columns:1fr}
  .p-img{min-height:340px}
  .p-txt{padding:64px 40px}
  .lg{grid-template-columns:1fr;gap:52px}
  .steps{grid-template-columns:1fr;gap:52px}
  .cg{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .nl{display:none}
  .fg{grid-template-columns:1fr 1fr}
  .f{border-bottom:1px solid var(--line);padding-left:0!important}
  .f:nth-child(2n){border-right:none;padding-left:32px!important}
  .cmp{grid-template-columns:1fr}
  .cc{padding:32px 0 0!important;border-left:none!important;border-top:1px solid var(--line)}
  .cc:first-child{border-top:none}
  .cg{grid-template-columns:1fr}
}
@media(max-width:560px){
  .wrap{padding:0 22px}
  .hero-txt,.p-txt{padding:52px 22px}
  .change,.how,.caps,.lead{padding:68px 0}
  .fg,.fr{grid-template-columns:1fr}
  .f{border-right:none;padding-left:0!important}
  .cta{flex-direction:column;align-items:stretch}
  .btn-l{width:100%}
  .specs{gap:26px}
  .quote{min-height:340px}
  .l-form{padding:26px 22px}
  .nav-cta .btn-o{display:none}
  .fg2{grid-template-columns:1fr;gap:36px}
  .fbt{flex-direction:column;gap:10px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}