@import "/fonts.css?v=3";

/* =========================================================================
   ПЛЮС ТЕХ — «Регламент»: документ на гранёной сетке.
   Разделяет линия, а не тень. Свет один: светлая кромка сверху, тёмная снизу.
   ========================================================================= */

:root{
  /* бумага и поверхности */
  --paper:#F4F3F1;
  --surf:#FFFFFF;
  --surf-2:#FAFAF8;
  --surf-3:#EFEEEA;
  /* линии — несущий приём */
  --line:#DCDBD6;
  --line-strong:#C7C6C0;
  --hair:1px;
  /* текст */
  --ink:#101820;
  --ink-2:#57616D;
  --ink-3:#626C77;
  --ink-dis:#8A929B;
  /* синий */
  --blue:#1668BE;
  --blue-ink:#0F4E90;
  --blue-deep:#155F9F;
  --blue-fill:#8ED0F2;
  --blue-fill-2:#A9D9F4;
  /* платина из звезды логотипа */
  --pt-1:#D8E4EC; --pt-2:#8FA6B8; --pt-3:#6E8698;
  /* искра — не более 3% экрана, никогда текст */
  --spark:#F5C24B; --spark-hi:#FFD36E;
  /* один источник света вместо теней */
  --edge-top:#FFFFFF;
  --edge-bottom:#C9CDD3;
  --lift-top:inset 0 1px 0 var(--edge-top);
  --lift-bottom:0 1px 0 var(--edge-bottom);
  --shadow-mobile:0 -12px 32px -20px rgba(10,36,64,.35);
  /* геометрия */
  --r:4px;
  --cut:20px;
  --container:min(1320px, 100% - 3rem);
  --section-pad:clamp(3.5rem, 5.5vw, 6.5rem);
  /* тайминги */
  --e:cubic-bezier(.2,.7,.2,1);
  --t-fast:180ms; --t:260ms; --t-slow:520ms;
  /* шрифты */
  --sans:"Onest","Onest Fallback","Segoe UI",system-ui,Arial,sans-serif;
  --mono:"JetBrains Mono","JBMono Fallback",Consolas,"Courier New",monospace;
  interpolate-size:allow-keywords;
}
/* хэйрлайн на дробном DPR (Windows 125/150%) */
@media (min-resolution:1.25dppx){ :root{ --hair:.75px } }
@media (min-resolution:2dppx){ :root{ --hair:.5px } }

@font-face{font-family:"Onest Fallback";src:local("Segoe UI"),local("Arial");size-adjust:97%;ascent-override:98%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"JBMono Fallback";src:local("Consolas"),local("Courier New");size-adjust:95%;ascent-override:100%;descent-override:22%;line-gap-override:0%}

/* тёмная зона — не тема, а два блока */
.zone--night{
  --night:#0A2440; --night-2:#123B63; --night-3:#0E2E52;
  --ink:#EAF2F9; --ink-2:#A8BED4; --ink-3:#8FA6B8;
  --line:rgba(216,228,236,.18); --line-strong:rgba(216,228,236,.32);
  --surf:#FFFFFF; --surf-2:rgba(255,255,255,.05); --surf-3:rgba(255,255,255,.08);
  --edge-top:rgba(216,236,252,.22); --edge-bottom:rgba(3,8,18,.55);
  background:linear-gradient(160deg,var(--night-2) 0%, var(--night) 58%);
  color:var(--ink);
}

/* ============================ база ============================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  font-synthesis-weight:none; -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg{max-width:100%}
a{color:var(--blue-ink); text-underline-offset:.18em}
:where(a):hover{color:var(--blue)}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0 0 .5em; font-weight:700; text-wrap:balance}
h1{font-size:clamp(2.05rem,1.2rem + 3.6vw,3.5rem); line-height:1.04; letter-spacing:-.035em; font-weight:800}
h2{font-size:clamp(1.7rem,1.15rem + 1.9vw,2.5rem); line-height:1.08; letter-spacing:-.03em}
h3{font-size:clamp(1.1rem,1.02rem + .3vw,1.28rem); line-height:1.25; letter-spacing:-.015em; font-weight:600}
:focus-visible{outline:2px solid var(--blue-ink); outline-offset:2px; border-radius:2px}
.zone--night :focus-visible{outline-color:var(--blue-fill)}
::selection{background:var(--blue-fill); color:var(--ink)}

.wrap{width:var(--container); margin-inline:auto}
.section{padding-block:var(--section-pad)}
.lead{font-size:clamp(1.05rem,1rem + .3vw,1.19rem); line-height:1.55; color:var(--ink-2); max-width:52ch; text-wrap:pretty}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums lining-nums}
.meta{font-family:var(--mono); font-size:.72rem; line-height:1.2; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums lining-nums; font-weight:600; letter-spacing:-.02em}
.vh{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.skip{position:absolute; left:1rem; top:-4rem; z-index:200; background:var(--surf); color:var(--ink); padding:.7rem 1rem; border:var(--hair) solid var(--line); transition:top var(--t-fast) var(--e)}
.skip:focus{top:1rem}

/* заголовок секции: номер + линия */
.head{display:grid; gap:.9rem; margin-bottom:clamp(1.8rem,3vw,2.8rem); max-width:64ch}
.head .meta{display:flex; align-items:center; gap:.8rem}
.head .meta::after{content:""; flex:1; height:var(--hair); background:var(--line)}

/* хэйрлайн-разделитель, который «прочерчивается» */
.rule{height:var(--hair); background:var(--line); transform:scaleX(0); transform-origin:left; transition:transform .8s var(--e)}
.rule.is-in,.no-js .rule{transform:scaleX(1)}

/* ============================ бенто ============================ */
.bento{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--hair); background:var(--line);
  outline:var(--hair) solid var(--line);
}
.cell{background:var(--surf); padding:clamp(1.25rem,2vw,2rem); min-width:0}
.cell--mute{background:var(--surf-2)}
.cell--pad-lg{padding:clamp(1.6rem,2.6vw,2.6rem)}
.colophon{display:grid; gap:.7rem; margin-bottom:1.1rem}
.colophon::after{content:""; height:var(--hair); background:var(--line)}

/* ============================ фаска ============================ */
/* border/box-shadow вдоль диагонали не рисуются — только вложенные clip-path */
.bevel-wrap{display:inline-block; max-width:100%}
.bevel-wrap:has(:focus-visible){outline:2px solid var(--blue-ink); outline-offset:3px; border-radius:2px}
.zone--night .bevel-wrap:has(:focus-visible){outline-color:var(--blue-fill)}
.bevel{--c:var(--cut); padding:1px; background:var(--edge-bottom);
  clip-path:polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%)}
.bevel__in{--c:calc(var(--cut) - 1.5px); background:var(--surf); box-shadow:var(--lift-top);
  clip-path:polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%)}
.bevel :focus-visible{outline:none}

/* ============================ кнопки ============================ */
.btn{
  --bg:var(--blue);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:.8rem 1.4rem; font:600 15px/1.2 var(--sans);
  background:var(--bg); color:#fff; border:0; cursor:pointer; text-decoration:none;
  box-shadow:var(--lift-top); transition:background-color var(--t-fast) var(--e);
}
.btn:hover{--bg:var(--blue-ink); color:#fff}
.btn--lg{min-height:54px; padding:.95rem 1.7rem; font-size:16px}
.btn--wide{width:100%}
.btn--quiet{
  background:transparent; color:var(--ink); box-shadow:none;
  border-bottom:2px solid var(--line-strong); min-height:48px; padding-inline:.2rem;
}
.btn--quiet:hover{color:var(--blue-ink); border-bottom-color:var(--blue)}
.bevel .btn{width:100%}

/* ссылка с раскрывающимся подчёркиванием */
.ul{
  background:linear-gradient(var(--blue),var(--blue)) no-repeat left bottom/0% 1px;
  transition:background-size var(--t) var(--e); text-decoration:none;
}
.ul:hover,.ul:focus-visible{background-size:100% 1px}

/* ============================ шапка ============================ */
.header{
  position:sticky; top:0; z-index:100; background:var(--paper);
  border-bottom:var(--hair) solid var(--line);
}
.header__in{display:flex; align-items:center; gap:1.4rem; min-height:64px}
.brand{display:flex; align-items:center; gap:.6rem; color:var(--ink); text-decoration:none; font-weight:600; letter-spacing:-.02em}
.brand svg{width:28px; height:28px; flex:none}
.brand__sep{width:var(--hair); height:22px; background:var(--line-strong)}
.brand__sub{font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.nav{margin-inline:auto; display:flex; gap:1.5rem}
.nav a{font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); text-decoration:none;
  background:linear-gradient(var(--blue),var(--blue)) no-repeat left bottom/0% 1px; transition:background-size var(--t) var(--e),color var(--t-fast)}
.nav a:hover,.nav a:focus-visible{color:var(--ink); background-size:100% 1px}
.nav a[aria-current="true"]{color:var(--ink); background-size:100% 1px}
.header__tel{font-family:var(--mono); font-weight:600; font-size:1.02rem; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; white-space:nowrap}
.header__cta{display:flex; align-items:center; gap:1rem}
.progress{position:absolute; left:0; right:0; bottom:-2px; height:2px; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--spark),var(--blue)); z-index:101}
.burger{display:none; width:44px; height:44px; align-items:center; justify-content:center; background:transparent; border:var(--hair) solid var(--line); cursor:pointer}
.burger i{display:block; width:18px; height:var(--hair); background:var(--ink); position:relative}
.burger i::before,.burger i::after{content:""; position:absolute; left:0; width:18px; height:var(--hair); background:var(--ink)}
.burger i::before{top:-6px} .burger i::after{top:6px}

/* ============================ герой ============================ */
.hero{padding-block:clamp(2rem,4vw,3.4rem) 0}
.hero .bento{grid-auto-rows:minmax(0,auto)}
.hero__main{grid-column:span 7; display:flex; flex-direction:column; justify-content:center}
.hero__art{grid-column:span 5; display:grid; place-items:center; background:var(--surf-2); padding:clamp(1rem,2vw,1.8rem)}
.hero__price{grid-column:span 4}
.hero__facts{grid-column:span 8}
.hero h1{margin-bottom:1rem}
.mark{background:linear-gradient(var(--spark),var(--spark)) no-repeat left bottom/0% 3px; padding-bottom:2px; transition:background-size .7s var(--e) .25s}
.mark.is-in,.no-js .mark{background-size:100% 3px}
.hero__actions{display:flex; flex-wrap:wrap; gap:1rem; margin:1.8rem 0 1.2rem; align-items:center}
.hero__price{display:flex; flex-direction:column; justify-content:center; gap:.35rem}
.hero__price .num{font-size:clamp(1.55rem,1.2rem + 1.5vw,2.2rem)}
.hero__price .num small{font-size:.58em; color:var(--ink-3); font-weight:500}
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--hair); background:var(--line); margin:0}
.facts>div{background:var(--surf); padding:.2rem 0 0}
.facts .num{display:block; font-size:clamp(1.6rem,1.3rem + 1.4vw,2.4rem); color:var(--ink)}
.facts span{display:block; font-size:.9rem; color:var(--ink-2); margin-top:.2rem}
.hero__facts .facts>div{padding:0 1.2rem 0 0}
.strip{display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; align-items:center; padding-block:1rem}
.strip b{color:var(--ink-3)}
.strip span{font-family:var(--mono); font-size:.76rem; letter-spacing:.04em; color:var(--ink-2)}
.strip span::before{content:"· "; color:var(--pt-2)}

/* схема-логотип */
.diagram{width:100%; height:auto}
.diagram text{font-family:var(--mono); font-size:5px; font-weight:500; letter-spacing:.08em; fill:var(--ink-2)}
.diagram .lbl-core{font-size:4.2px; fill:var(--ink-3); letter-spacing:.1em}
.diagram .leader{stroke:var(--pt-2); stroke-width:.6; stroke-dasharray:2 2}

/* ============================ диагноз ============================ */
.diag{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(1.5rem,3vw,3rem)}
.diag__l{grid-column:1/span 5}
.diag__r{grid-column:7/span 6; padding-top:40px}
@supports (position:sticky){ @media (min-width:1000px){ .diag__l{position:sticky; top:96px; align-self:start} } }
.checks{list-style:none; margin:0; padding:0}
.checks li{display:grid; grid-template-columns:auto 1fr; gap:1rem; padding:1rem 0; border-bottom:var(--hair) solid var(--line); color:var(--ink-2)}
.checks li:first-child{border-top:var(--hair) solid var(--line)}
.checks b{color:var(--ink-3); font-family:var(--mono); font-size:.78rem; font-weight:600; padding-top:.2rem}

/* воронка */
.funnel{margin-top:2.5rem; display:grid; gap:6px}
.fstep{display:grid; grid-template-columns:minmax(0,1fr) minmax(9rem,15rem); gap:1.2rem; align-items:center}
.fstep i{
  display:block; height:38px; width:var(--w); margin-inline:auto;
  background:var(--pt-1); box-shadow:var(--lift-top);
  clip-path:polygon(0 0,100% 0,calc(100% - var(--t)) 100%,var(--t) 100%);
}
.fstep--end i{background:linear-gradient(180deg,var(--blue-fill),#4AAAE4); clip-path:none}
.fstep b{font-family:var(--mono); font-size:.85rem; font-weight:600; color:var(--ink); display:block}
.fstep small{display:block; font-size:.78rem; color:var(--ink-3); border-left:var(--hair) solid var(--pt-2); padding-left:.6rem; margin-top:.25rem}
.funnel__note{margin-top:1.2rem; font-size:.9rem; color:var(--ink-2); max-width:56ch}

/* ============================ услуги ============================ */
.services{
  grid-template-areas:
    "crm crm crm crm crm int int int int int int int"
    "crm crm crm crm crm bp  bp  bp  mig mig dev dev"
    "edu edu edu edu edu edu edu edu edu edu edu edu";
}
.s-crm{grid-area:crm} .s-int{grid-area:int} .s-bp{grid-area:bp} .s-mig{grid-area:mig} .s-dev{grid-area:dev} .s-edu{grid-area:edu}
.cell--svc{position:relative; container-type:inline-size; transition:background-color var(--t-fast) var(--e)}
.cell--svc::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--blue); transform:scaleY(0); transform-origin:bottom; transition:transform var(--t) var(--e)}
.cell--svc:hover,.cell--svc:focus-within{background:var(--surf-3)}
.cell--svc:hover::before,.cell--svc:focus-within::before{transform:scaleY(1)}
.cell--svc p{color:var(--ink-2); font-size:.97rem; line-height:1.55; margin:0}
.bars{display:grid; gap:5px; margin-top:1.4rem}
.bars div{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.8rem; align-items:center; font-family:var(--mono); font-size:.74rem; color:var(--ink-3)}
.bars i{display:block; height:10px; width:var(--w); background:linear-gradient(180deg,var(--blue-fill),#4AAAE4); box-shadow:var(--lift-top)}
.bars .track{background:var(--surf-3); box-shadow:none}
.s-edu{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,2rem)}
.s-edu>div:first-child{grid-column:1/-1}
.s-edu dt{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.4rem}
.s-edu dd{margin:0; color:var(--ink-2); font-size:.95rem}
@container (max-width:30rem){ .s-edu{grid-template-columns:1fr} }

/* ============================ процесс ============================ */
.steps{display:grid; grid-template-columns:auto 1.7fr 1.7fr auto 2fr; gap:var(--hair); background:var(--line); outline:var(--hair) solid var(--line); list-style:none; margin:0; padding:0}
.steps>li{display:contents}
.steps .c{background:var(--surf); padding:1rem 1.1rem; display:flex; flex-direction:column; justify-content:center; gap:.3rem; min-width:0}
.steps__hd .c{background:var(--surf-2); font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.steps>li:hover .c{background:var(--surf-3)}
.steps .c--n{font-family:var(--mono); font-weight:600; color:var(--blue-ink); white-space:nowrap}
.steps .c--d{color:var(--ink-2); font-size:.95rem}
.steps .c--r{font-size:.95rem}
.steps .c--t{font-family:var(--mono); font-size:.85rem; white-space:nowrap; color:var(--ink)}
.steps .k{display:none; font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.steps__ft .c{background:var(--surf-2); border-top:var(--hair) solid var(--line-strong); font-weight:600}
.gantt{display:grid; grid-template-columns:repeat(8,1fr); gap:2px; align-items:center}
.gantt i{grid-column:var(--s)/span var(--l); block-size:8px; background:linear-gradient(180deg,var(--blue-fill),#4AAAE4); box-shadow:var(--lift-top)}

/* ============================ доказательства ============================ */
.proof__t{grid-column:span 7}
.proof__q{grid-column:span 5; display:flex; flex-direction:column; justify-content:center; gap:1.2rem}
.proof__s{grid-column:span 12}
.ba{display:grid; gap:1rem; margin:1.4rem 0 0}
.ba>div{display:grid; grid-template-columns:1fr auto; gap:.4rem 1rem; align-items:baseline; padding-bottom:.9rem; border-bottom:var(--hair) solid var(--line)}
.ba dt{font-size:.95rem; color:var(--ink-2)}
.ba dd{margin:0; font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.ba dd s{color:var(--ink-dis); text-decoration-color:var(--pt-2)}
.ba dd b{color:var(--blue-ink)}
.ba .mb{grid-column:1/-1; display:grid; gap:3px}
.ba .mb i{display:block; height:6px; width:var(--w); background:var(--pt-1)}
.ba .mb i.now{background:linear-gradient(180deg,var(--blue-fill),#4AAAE4); box-shadow:var(--lift-top)}
.quote{font-size:1.28rem; line-height:1.45; font-weight:500; margin:0}
.quote__mark{width:34px; height:34px}
.statuses{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--hair); background:var(--line)}
.statuses div{background:var(--surf); padding:1.1rem 1.2rem; font-size:.92rem; color:var(--ink-2)}
.statuses b{display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.35rem}

/* ============================ отрасли ============================ */
.ind__chips{display:flex; flex-wrap:wrap; gap:var(--hair); background:var(--line); outline:var(--hair) solid var(--line); margin-bottom:var(--hair)}
.ind input{position:absolute; opacity:0; width:1px; height:1px}
.ind__chips label{
  flex:1 1 auto; text-align:center; background:var(--surf-2); padding:.85rem 1rem; cursor:pointer;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; color:var(--ink-3);
  border-bottom:2px solid transparent; transition:background-color var(--t-fast) var(--e),color var(--t-fast) var(--e); min-height:44px; display:flex; align-items:center; justify-content:center;
}
.ind__chips label:hover{background:var(--surf-3); color:var(--ink)}
.ind input:focus-visible+label{outline:2px solid var(--blue-ink); outline-offset:-2px}
.ind__panel{display:none; background:var(--surf); padding:clamp(1.4rem,2.5vw,2.2rem); outline:var(--hair) solid var(--line); animation:fade 160ms var(--e)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.ind__grid{display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(1.2rem,2.5vw,2.5rem)}
.ind__grid dt{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.3rem}
.ind__grid dd{margin:0 0 1.1rem; color:var(--ink-2); font-size:.97rem}
.tags{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; padding-top:1.2rem; border-top:var(--hair) solid var(--line)}
.tags span{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--ink-3); border:var(--hair) solid var(--line); padding:.3rem .6rem}
.ind:has(#i1:checked) .p1,.ind:has(#i2:checked) .p2,.ind:has(#i3:checked) .p3,.ind:has(#i4:checked) .p4,
.ind:has(#i5:checked) .p5,.ind:has(#i6:checked) .p6,.ind:has(#i7:checked) .p7,.ind:has(#i8:checked) .p8{display:block}
.ind:has(#i1:checked) [for=i1],.ind:has(#i2:checked) [for=i2],.ind:has(#i3:checked) [for=i3],.ind:has(#i4:checked) [for=i4],
.ind:has(#i5:checked) [for=i5],.ind:has(#i6:checked) [for=i6],.ind:has(#i7:checked) [for=i7],.ind:has(#i8:checked) [for=i8]{
  background:var(--surf); color:var(--ink); border-bottom-color:var(--blue); box-shadow:var(--lift-top)
}

/* ============================ стоимость ============================ */
.scale{margin-bottom:2.2rem}
.scale__bar{position:relative; display:grid; grid-template-columns:1fr 1.4fr 1.6fr; gap:var(--hair); background:var(--line); outline:var(--hair) solid var(--line)}
.scale__bar div{background:var(--surf-2); padding:.9rem 1rem; font-family:var(--mono); font-size:.76rem; color:var(--ink-3)}
.scale__bar div b{display:block; color:var(--ink); font-size:.9rem; margin-bottom:.2rem}
.scale__mark{position:absolute; left:var(--x,18%); top:-7px; width:12px; height:12px; margin-left:-6px; background:var(--spark);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); transition:left var(--t) var(--e)}
.plans:has(.c-start:hover,.c-start:focus-within) .scale__mark{--x:16%}
.plans:has(.c-biz:hover,.c-biz:focus-within) .scale__mark{--x:52%}
.plans:has(.c-max:hover,.c-max:focus-within) .scale__mark{--x:84%}

.matrix{display:grid; grid-template-columns:1.6fr repeat(3,minmax(0,1fr)); gap:var(--hair); background:var(--line); outline:var(--hair) solid var(--line)}
.matrix>*{background:var(--surf); padding:.85rem 1rem; font-size:.93rem; display:flex; align-items:center; min-width:0}
.matrix .c-row{color:var(--ink-2)}
.matrix .hd{background:var(--surf-2); flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:.25rem; padding:1.4rem 1rem 1.1rem}
.matrix .hd h3{margin:0}
.matrix .hd .num{font-size:1.35rem; color:var(--ink)}
.matrix .hd .meta{color:var(--ink-3)}
.matrix .m{justify-content:center; font-family:var(--mono); color:var(--blue); font-weight:600}
.matrix .m--no{color:var(--ink-dis)}
.matrix .m--txt{font-size:.78rem; color:var(--ink-2); font-weight:500; text-align:center; justify-content:center}
.matrix .c-biz{background:var(--surf); position:relative}
.matrix .c-start,.matrix .c-max{background:var(--surf-2)}
.matrix .hd.c-biz{box-shadow:var(--lift-top),0 18px 40px -28px rgba(10,36,64,.30)}
.matrix .c-biz::after{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--blue)}
.matrix .plan-badge{position:absolute; top:.5rem; left:1rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; color:var(--blue-ink)}
.matrix .foot{background:var(--surf-2); border-top:var(--hair) solid var(--line-strong)}
.matrix-switch{display:flex; gap:var(--hair); background:var(--line); outline:var(--hair) solid var(--line); margin-bottom:1.2rem; width:max-content; max-width:100%}
.matrix-switch input{position:absolute; opacity:0; width:1px; height:1px}
.matrix-switch label{background:var(--surf-2); padding:.6rem 1.1rem; cursor:pointer; font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; color:var(--ink-3); min-height:44px; display:flex; align-items:center}
.plans:has(#box:checked) .p-cloud,.plans:has(#cloud:checked) .p-box{display:none}
.plans:has(#cloud:checked) [for=cloud],.plans:has(#box:checked) [for=box]{background:var(--surf); color:var(--ink); box-shadow:var(--lift-top)}
.matrix-switch input:focus-visible+label{outline:2px solid var(--blue-ink); outline-offset:-2px}
.honest{margin-top:1.6rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--hair); background:var(--line); outline:var(--hair) solid var(--line)}
.honest div{background:var(--surf-2); padding:1.1rem 1.2rem; font-size:.88rem; color:var(--ink-2)}
.honest b{display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.4rem}
.plan-chips{display:none}

/* ============================ FAQ ============================ */
.faq{columns:2; column-gap:clamp(2rem,4vw,4rem)}
.faq details{break-inside:avoid; border-bottom:var(--hair) solid var(--line)}
.faq details:first-of-type{border-top:var(--hair) solid var(--line)}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer;
  padding:1.05rem 0; font-weight:600; font-size:1.06rem; list-style:none; min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; flex:none; width:9px; height:9px; margin-right:.2rem;
  border-right:1.5px solid var(--pt-3); border-bottom:1.5px solid var(--pt-3);
  transform:rotate(45deg) translateY(-2px); transition:transform var(--t) var(--e),border-color var(--t-fast);
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px); border-color:var(--blue)}
.faq summary:hover{color:var(--blue-ink)}
.faq p{margin:0 0 1.1rem; color:var(--ink-2); font-size:.97rem; max-width:60ch}
.faq:has(details[open]) details:not([open]) summary{color:var(--ink-2)}
@supports (interpolate-size:allow-keywords){
  .faq details::details-content{block-size:0; overflow:hidden;
    transition:block-size .34s var(--e), content-visibility .34s allow-discrete; transition-behavior:allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* ============================ CTA и форма ============================ */
.edge{display:block; width:100%; height:24px}
.cta__in{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(1.5rem,3vw,3.5rem); padding-block:clamp(2.6rem,5vw,4.5rem)}
.cta__l{grid-column:1/span 5}
.cta__r{grid-column:7/span 6}
.cta__list{list-style:none; margin:1.6rem 0; padding:0; display:grid; gap:.9rem}
.cta__list li{display:grid; grid-template-columns:auto 1fr; gap:.8rem; color:var(--ink-2); font-size:.98rem}
.cta__list b{color:var(--blue-fill); font-family:var(--mono); font-size:.8rem}
.form{background:var(--surf); padding:clamp(1.4rem,2.4vw,2rem); display:grid; gap:1rem; color:var(--ink)}
.form{--ink:#101820; --ink-2:#57616D; --ink-3:#626C77}
.form .fld{display:grid; gap:.4rem}
.form label{font-family:var(--mono); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:#626C77}
.form input,.form textarea{
  font:inherit; font-size:.98rem; color:#101820; background:#FAFAF8;
  border:var(--hair) solid var(--line-strong); border-radius:var(--r); padding:.75rem .85rem; min-height:48px; width:100%;
}
.form textarea{min-height:88px; resize:vertical}
.form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--blue-ink); outline-offset:1px; border-color:var(--blue)}
.form input[aria-invalid="true"]{border-color:#B3261E}
.form .err{color:#B3261E; font-size:.8rem; min-height:0}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.form__consent{display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:start; font-size:.82rem; color:#57616D; text-transform:none; letter-spacing:0; font-family:var(--sans)}
.form__consent input{width:20px; height:20px; min-height:0; margin-top:.1rem}
.form__ok{background:#EAF6EC; border:var(--hair) solid #BBD9C1; padding:.9rem 1rem; font-size:.92rem; color:#1B5E20}
.trust{font-family:var(--mono); font-size:.7rem; line-height:1.5; letter-spacing:.06em; color:#626C77}

/* ============================ футер ============================ */
.footer{padding-block:clamp(2.5rem,4vw,3.5rem) 1.5rem}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2rem; margin-bottom:2.2rem}
.footer h4{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1rem}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.footer a{color:var(--ink-2); text-decoration:none; font-size:.86rem}
.footer a:hover{color:var(--ink)}
.footer p{font-size:.86rem; color:var(--ink-2)}
.footer__legal{border-top:var(--hair) solid var(--line); padding-top:1.4rem; display:grid; gap:.5rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--ink-3)}

/* ============================ липкая панель ============================ */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:120; display:none;
  grid-template-columns:1fr 1.2fr; gap:.7rem; align-items:center;
  padding:.55rem .9rem calc(.55rem + env(safe-area-inset-bottom));
  background:rgba(244,243,241,.96); backdrop-filter:blur(8px);
  border-top:var(--hair) solid var(--line); box-shadow:var(--shadow-mobile);
  transform:translateY(110%);
}
.mbar.is-on{transform:none; transition:transform var(--t) var(--e)}
.mbar__call{display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; font-family:var(--mono); font-size:.82rem; color:var(--ink); text-decoration:none; border:var(--hair) solid var(--line-strong); background:var(--surf)}

/* ============================ появление ============================ */
.rv{opacity:0; transform:translateY(12px); transition:opacity var(--t-slow) var(--e),transform var(--t-slow) var(--e); transition-delay:calc(var(--i,0)*60ms)}
.rv.is-in,.no-js .rv{opacity:1; transform:none}
@supports (animation-timeline:view()){
  .rv{opacity:1; transform:none; animation:rv linear both; animation-timeline:view(); animation-range:entry 8% cover 30%}
  @keyframes rv{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
}
@supports (animation-timeline:scroll()){
  .progress{animation:grow linear both; animation-timeline:scroll(root block)}
  @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ============================ адаптив ============================ */
@media (max-width:1180px){
  .services{grid-template-areas:
    "crm crm crm crm crm crm int int int int int int"
    "bp  bp  bp  bp  mig mig mig mig dev dev dev dev"
    "edu edu edu edu edu edu edu edu edu edu edu edu"}
}
@media (max-width:1000px){
  .header__in{gap:1rem}
  .nav{position:fixed; inset:64px 0 auto; flex-direction:column; gap:0; background:var(--paper); border-bottom:var(--hair) solid var(--line);
    padding:.5rem 1.5rem 1.5rem; margin:0; display:none; box-shadow:0 18px 40px -30px rgba(10,36,64,.5)}
  .nav.is-open{display:flex}
  .nav a{padding:1rem 0; border-bottom:var(--hair) solid var(--line); font-size:.8rem}
  .burger{display:flex; margin-left:auto}
  .header__cta .btn{display:none}
  .hero__main,.hero__art,.hero__price,.hero__facts{grid-column:1/-1}
  .hero__art{order:-1}
  .diag__l,.diag__r{grid-column:1/-1}
  .diag__r{padding-top:0}
  .services{grid-template-areas:
    "crm crm crm crm crm crm crm crm crm crm crm crm"
    "int int int int int int int int int int int int"
    "bp  bp  bp  bp  bp  bp  mig mig mig mig mig mig"
    "dev dev dev dev dev dev dev dev dev dev dev dev"
    "edu edu edu edu edu edu edu edu edu edu edu edu"}
  .proof__t,.proof__q,.proof__s{grid-column:1/-1}
  .cta__l,.cta__r{grid-column:1/-1}
  .faq{columns:1}
  .ind__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  html{scroll-padding-top:76px}
  .facts,.statuses,.honest,.s-edu{grid-template-columns:1fr}
  .facts>div{padding:.9rem 0}
  .hero__facts .facts>div{padding:.9rem 0}
  .fstep{grid-template-columns:1fr; gap:.4rem}
  .fstep i{width:min(var(--w),100%)}
  /* процесс: строки-блоки, подписи из HTML становятся видимыми */
  .steps{grid-template-columns:1fr; outline:none; background:transparent; gap:0}
  .steps__hd{display:none!important}
  .steps>li{display:block; background:var(--surf); outline:var(--hair) solid var(--line); margin-bottom:.7rem; padding:.4rem 0}
  .steps .c{padding:.55rem 1.1rem}
  .steps .k{display:block; margin-bottom:.15rem}
  .steps .c--g{display:none}
  /* тарифы: одна колонка + переключатель */
  .plan-chips{display:flex; gap:var(--hair); background:var(--line); outline:var(--hair) solid var(--line); margin-bottom:1rem}
  .plan-chips label{flex:1; background:var(--surf-2); padding:.7rem; text-align:center; cursor:pointer; font-family:var(--mono); font-size:.75rem; color:var(--ink-3); min-height:44px; display:flex; align-items:center; justify-content:center}
  .plan-chips input{position:absolute; opacity:0; width:1px; height:1px}
  .plans:has(#pl-start:checked) [for=pl-start],.plans:has(#pl-biz:checked) [for=pl-biz],.plans:has(#pl-max:checked) [for=pl-max]{background:var(--surf); color:var(--ink); box-shadow:var(--lift-top)}
  .matrix{grid-template-columns:1fr auto}
  .plans:has(#pl-start:checked) .c-biz,.plans:has(#pl-start:checked) .c-max,
  .plans:has(#pl-biz:checked) .c-start,.plans:has(#pl-biz:checked) .c-max,
  .plans:has(#pl-max:checked) .c-start,.plans:has(#pl-max:checked) .c-biz{display:none}
  .scale__bar{grid-template-columns:1fr}
  .scale__mark{display:none}
  .form__row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .mbar{display:grid}
  main{padding-bottom:72px}
  .ind__chips label{flex:1 1 40%}
}
@media (max-width:560px){
  .brand__sub,.brand__sep{display:none}
  .header__tel{font-size:.92rem}
  .ind__chips label{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
  .rv{opacity:1; transform:none}
  .rule{transform:scaleX(1)}
  .mark{background-size:100% 3px}
}
@media print{
  .header,.mbar,.progress{display:none}
  body{background:#fff}
}