/* ==========================================================================
   AEO PRO · ДИЗАЙН-СИСТЕМА ПРОДУКТА
   AEO-Agency — редакционный сайт. AEO Pro — рабочее программное обеспечение:
   поверхности интерфейса, таблицы, состояния, моноширинные метки для данных.
   Родство с агентством сохраняется в типографике и тёмной базе, различие —
   в акценте (бирюзовый основной, янтарный только для предупреждений).
   ========================================================================== */

:root{
  color-scheme: dark;

  --bg:#080a0c;
  --surface:#0d1114;
  --surface-2:#121719;
  --surface-3:#171d20;
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.16);
  --control-line:rgba(255,255,255,.32);
  --ink:#eef2f2;
  --muted:#97a3a4;
  --dim:#727e80;
  --acc:#4ad3c8;
  --acc-weak:rgba(74,211,200,.11);
  --acc-line:rgba(74,211,200,.42);
  --warn:#ffb020;                 /* предупреждения, приоритеты, AEO-сигналы */
  --warn-weak:rgba(255,176,32,.12);
  --bad:#ff6b6b;
  --ok:#5ad48a;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-3xs: 10.5px;
  --fs-2xs: 11.5px;
  --fs-xs:  13px;
  --fs-sm:  14.5px;
  --fs-md:  16px;
  --fs-base: 17px;
  --fs-lg:  clamp(19px, 1.6vw, 21px);
  --fs-xl:  clamp(20px, 2.2vw, 26px);
  --fs-2xl: clamp(24px, 2.9vw, 38px);
  --fs-3xl: clamp(34px, 4.2vw, 56px);

  --lh-tight: 1.06;
  --lh-snug: 1.34;
  --lh-base: 1.6;

  --head:60px;
  --pad:clamp(18px,4.4vw,48px);
  --wrap:1340px;
  --sec:clamp(56px,8vh,104px);     /* интервал между крупными секциями */
  --r:4px;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:calc(var(--head) + 12px) }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-base); line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.025em; text-wrap:balance }
p,li,dd{ text-wrap:pretty }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
a{ color:inherit }
img,svg{ max-width:100% }
::selection{ background:var(--acc); color:#07100f }
:focus-visible{ outline:2px solid var(--acc); outline-offset:3px }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad) }
.mono{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-variant-numeric:tabular-nums }
.num{ font-variant-numeric:tabular-nums lining-nums }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#07100f; padding:10px 16px; font-family:var(--mono); font-size:var(--fs-2xs) }
.skip:focus{ left:8px; top:8px }
hr.rule{ border:0; border-top:1px solid var(--line); margin:0 }
.tlink{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--acc-line) }
.tlink:hover{ color:var(--acc); border-bottom-color:var(--acc) }

/* ---------------------------------------------------------------- кнопки -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:11px 20px; border-radius:var(--r); white-space:nowrap;
  font:inherit; font-size:var(--fs-sm); font-weight:600; text-decoration:none; cursor:pointer;
  color:#07100f; background:var(--acc); border:1px solid var(--acc);
}
.btn:hover{ background:#68e2d8; border-color:#68e2d8 }
.btn-line{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:11px 20px; border-radius:var(--r); white-space:nowrap;
  font:inherit; font-size:var(--fs-sm); font-weight:500; text-decoration:none; cursor:pointer;
  color:var(--ink); background:transparent; border:1px solid var(--control-line);
}
.btn-line:hover{ border-color:var(--acc); color:var(--acc) }
.btn-text{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--acc); text-decoration:none; border-bottom:1px solid transparent }
.btn-text:hover{ border-bottom-color:var(--acc) }

/* ---------------------------------------------------------------- статусы -- */
.st{
  display:inline-block; padding:2px 8px; border-radius:2px;
  font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.12em; text-transform:uppercase;
  border:1px solid currentColor;
}
.st-available{ color:var(--acc) }
.st-beta{ color:var(--warn) }
.st-soon{ color:var(--dim) }

/* ----------------------------------------------------------------- шапка -- */
.hdr{
  position:sticky; top:0; z-index:90;
  background:rgba(8,10,12,.9);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.hdr-in{ height:var(--head); display:flex; align-items:center; gap:clamp(12px,2.2vw,28px) }
.brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; white-space:nowrap; font-size:var(--fs-md); font-weight:600; letter-spacing:-.03em }
.brand .mark{ width:19px; height:19px; flex:0 0 auto; display:block }
.brand span{ color:var(--muted); font-weight:400 }
.nav{ margin-left:auto }
.nav-l{ display:flex; align-items:center; gap:clamp(6px,1.4vw,20px) }
.nav-l a{ font-size:var(--fs-sm); color:var(--muted); text-decoration:none; padding:9px 2px; white-space:nowrap }
.nav-l a:hover{ color:var(--ink) }
.hdr .enter{ flex:0 0 auto; font-size:var(--fs-sm); color:var(--muted); text-decoration:none; white-space:nowrap }
.hdr .enter:hover{ color:var(--ink) }
.hdr .btn{ min-height:40px; padding:9px 16px }
.burger{ display:none; flex:0 0 auto; margin-left:auto; background:none; border:1px solid var(--line-2); border-radius:var(--r); width:44px; height:44px; color:var(--ink); cursor:pointer }
.burger i{ display:block; width:16px; height:1px; margin:3px auto; background:currentColor }
.mnav{ border-top:1px solid var(--line); background:var(--bg) }
.mnav[hidden]{ display:none }
.mnav ul{ padding:4px 0 14px }
.mnav a{ display:block; padding:14px 0; border-bottom:1px solid var(--line); font-size:var(--fs-base); text-decoration:none }
.mnav-act{ display:flex; flex-wrap:wrap; gap:10px; padding:16px 0 4px }

@media (max-width:1000px){
  .nav, .hdr > .hdr-in > .btn, .hdr > .hdr-in > .enter{ display:none }
  .burger{ display:block }
}
@media (min-width:1001px){ .mnav{ display:none } }

/* хлебные крошки */
.crumbs{ padding:16px 0 0 }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:8px; font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.12em; text-transform:uppercase; color:var(--dim) }
.crumbs li + li::before{ content:"/"; margin-right:8px; color:var(--line-2) }
.crumbs a{ color:var(--muted); text-decoration:none }
.crumbs a:hover{ color:var(--acc) }

/* ------------------------------------------------------------ первый экран -- */
.hero{ padding:clamp(38px,6vh,74px) 0 var(--sec) }
.hero-in{ display:grid; grid-template-columns:minmax(0,52fr) minmax(0,48fr); gap:clamp(28px,4vw,60px); align-items:center }
.eyebrow{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.18em; text-transform:uppercase; color:var(--dim) }
.hero h1{ margin-top:16px; font-size:var(--fs-3xl); line-height:var(--lh-tight) }
.hero .lede{ margin-top:20px; max-width:52ch; font-size:var(--fs-md); line-height:var(--lh-base); color:var(--muted) }
.cnote{ display:block; margin-top:10px; font-size:var(--fs-xs); color:var(--dim) }
code{ font-family:var(--mono); font-size:.92em; color:var(--muted) }
.hero-act{ margin-top:clamp(22px,3.4vh,30px); display:flex; flex-wrap:wrap; gap:12px; align-items:center }
.hero-link{ margin-top:14px }
.hero-trust{ margin-top:16px; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:var(--fs-xs); color:var(--dim) }
.hero-trust li{ position:relative; padding-left:14px }
.hero-trust li::before{ content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--acc-line) }

/* ------------------------------------------------- экран продукта в hero -- */
.pscreen{ border:1px solid var(--line-2); border-radius:6px; background:var(--surface); overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.45) }
.ps-bar{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface-2) }
.ps-dot{ width:8px; height:8px; border-radius:50%; background:var(--acc); flex:0 0 auto }
.ps-name{ font-size:var(--fs-sm); font-weight:600 }
.ps-meta{ font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.08em; text-transform:uppercase; color:var(--dim) }
.ps-bar .ps-btn{
  margin-left:auto; font:inherit; font-family:var(--mono); font-size:var(--fs-3xs);
  letter-spacing:.1em; text-transform:uppercase; color:var(--acc);
  background:transparent; border:1px solid var(--acc-line); border-radius:2px; padding:5px 9px; cursor:pointer;
  transition:background .16s, border-color .16s;
}
.ps-bar .ps-btn:hover{ background:var(--acc-weak); border-color:var(--acc) }
.ps-bar .ps-btn:active{ transform:translateY(1px) }
.ps-body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,210px) }
.ps-main{ padding:16px; border-right:1px solid var(--line) }
.ps-kpi{ 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 }
.ps-kpi div{ background:var(--surface); padding:11px 12px }
.ps-kpi dt{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); line-height:1.3 }
.ps-kpi dd{ margin:6px 0 0; font-size:20px; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.ps-kpi .up{ color:var(--acc) }
.ps-kpi .down{ color:var(--warn) }
.ps-eng{ margin-top:14px; display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.ps-eng b{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); font-weight:400; margin-right:2px }
.ps-eng button{
  font:inherit; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
  padding:5px 8px; border:1px solid var(--line-2); border-radius:2px; color:var(--muted);
  background:transparent; cursor:pointer; transition:color .16s, border-color .16s, background .16s;
}
.ps-eng button:hover{ color:var(--ink); border-color:var(--control-line) }
.ps-eng button.on{ color:var(--acc); border-color:var(--acc-line); background:var(--acc-weak) }

.ps-chart{ margin-top:12px; display:flex; align-items:flex-end; gap:4px; height:76px }
.ps-chart i{
  flex:1 1 0; display:block; position:relative;
  background:linear-gradient(180deg, var(--acc-line), rgba(74,211,200,.08));
  border-top:1px solid var(--acc);
  /* смена движка и первое появление — единственные поводы для движения:
     столбик едет к новому значению, а не пульсирует просто так */
  transition:height .46s cubic-bezier(.22,.7,.2,1);
}
.ps-chart i.mark::after{
  content:""; position:absolute; left:50%; top:-9px; width:5px; height:5px; margin-left:-2.5px;
  border-radius:50%; background:var(--warn);
  transition:opacity .3s .2s, transform .3s .2s;
}
/* отметка правки исчезает вместе со сменой ряда, а не мигает поверх чужих данных */
.ps-chart i:not(.mark)::after{ opacity:0 }
.ps-chart.is-swapping i{ transition-duration:.34s }
.ps-kpi dd{ transition:color .2s }
.ps-axis{ margin-top:7px; display:flex; justify-content:space-between; font-family:var(--mono); font-size:9px; color:var(--dim) }
.ps-side{ padding:16px 14px }
.ps-side h4{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); font-weight:400 }
.ps-task{ margin-top:10px; padding:9px 0; border-top:1px solid var(--line); font-size:11.5px; line-height:1.4 }
.ps-task b{ display:block; font-weight:500; color:var(--ink) }
.ps-task span{ font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim) }
.ps-task .p-high{ color:var(--warn) }
.ps-task .p-mid{ color:var(--muted) }
.ps-note{ padding:9px 14px; border-top:1px solid var(--line); background:var(--surface-2); font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; color:var(--dim) }
.ps-cap{ margin-top:12px; font-size:var(--fs-xs); color:var(--dim) }

/* ----------------------------------------------------------------- секции -- */
.blk{ padding:var(--sec) 0 }
.hl{ display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:clamp(16px,3vw,40px); align-items:start }
.hl h2{ font-size:var(--fs-2xl); line-height:var(--lh-snug) }
.hl .lead{ margin-top:14px; max-width:66ch; color:var(--muted); font-size:var(--fs-md) }

/* факты под первым экраном */
.facts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border-block:1px solid var(--line) }
.facts li{ background:var(--bg); padding:20px clamp(14px,2vw,24px) }
.facts b{ display:block; font-size:clamp(22px,2.4vw,30px); font-weight:600; letter-spacing:-.03em; color:var(--acc); font-variant-numeric:tabular-nums }
.facts span{ display:block; margin-top:6px; font-size:var(--fs-xs); color:var(--muted); line-height:1.45 }

/* связность: четыре механики */
.mech{ margin-top:clamp(24px,4vh,42px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line) }
.mech li{ background:var(--bg); padding:clamp(20px,2.6vw,30px) }
.mech .n{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.14em; color:var(--acc) }
.mech h3{ margin-top:8px; font-size:var(--fs-lg) }
.mech p{ margin-top:10px; color:var(--muted); font-size:var(--fs-md) }

/* цепочка проекта */
.chain{ margin-top:clamp(22px,3.4vh,34px); display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.chain span{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.1em; text-transform:uppercase; padding:7px 11px; border:1px solid var(--line-2); border-radius:2px; color:var(--muted) }
.chain span.key{ color:var(--acc); border-color:var(--acc-line); background:var(--acc-weak) }
.chain i{ color:var(--dim); font-style:normal }

/* рабочий процесс */
.flow{ margin-top:clamp(26px,4.4vh,46px); border-top:1px solid var(--line) }
.flow li{ display:grid; grid-template-columns:minmax(0,54px) minmax(0,1fr) minmax(0,1fr); gap:clamp(14px,2.6vw,34px); padding:20px 0; border-bottom:1px solid var(--line) }
.flow .n{ font-family:var(--mono); font-size:var(--fs-2xs); color:var(--acc); padding-top:4px }
.flow h3{ font-size:var(--fs-lg) }
.flow .in{ margin-top:8px; font-size:var(--fs-xs); color:var(--dim); font-family:var(--mono); letter-spacing:.04em }
.flow .out{ color:var(--muted); font-size:var(--fs-md) }

/* модули */
.mods{ margin-top:clamp(26px,4.4vh,46px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line) }
.mods > li{ background:var(--bg); padding:clamp(20px,2.6vw,30px); display:flex; flex-direction:column }
/* нечётная последняя карточка занимает обе колонки: иначе пустая ячейка
   светится фоном-разделителем и читается как сломанная вёрстка */
.mods > li:last-child:nth-child(odd){ grid-column:1 / -1 }
.mods .mhead{ display:flex; align-items:center; gap:12px; justify-content:space-between }
.mods h3{ font-size:var(--fs-xl) }
.mods .mtask{ margin-top:12px; color:var(--muted); font-size:var(--fs-md) }
.mods dl{ margin:16px 0 0; display:grid; grid-template-columns:minmax(0,84px) minmax(0,1fr); gap:7px 14px; font-size:var(--fs-sm) }
.mods dt{ font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding-top:3px }
.mods dd{ margin:0; color:var(--muted) }
.mods .mchecks{ margin-top:14px; display:flex; flex-wrap:wrap; gap:6px }
.mods .mchecks span{ font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.04em; color:var(--dim); border:1px solid var(--line); border-radius:2px; padding:3px 7px }
.mods .mact{ margin-top:auto; padding-top:18px }

/* roadmap */
.road{ margin-top:clamp(22px,3.4vh,34px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2.4vw,26px) }
.road li{ border-top:1px solid var(--line-2); padding-top:16px }
.road h3{ margin-top:10px; font-size:var(--fs-md) }
.road p{ margin-top:8px; font-size:var(--fs-sm); color:var(--dim) }

/* тур по интерфейсу */
.tabs{ margin-top:clamp(26px,4.4vh,46px) }
.tablist{ display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--line) }
.tablist button{
  font:inherit; font-size:var(--fs-sm); color:var(--muted); background:none; cursor:pointer;
  border:0; border-bottom:2px solid transparent; padding:10px 14px; min-height:44px;
}
.tablist button:hover{ color:var(--ink) }
.tablist button[aria-selected="true"]{ color:var(--acc); border-bottom-color:var(--acc) }
.tabpanel{ padding-top:24px; display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(18px,3vw,40px); align-items:start }
.tabpanel[hidden]{ display:none }
.tabpanel h3{ font-size:var(--fs-lg) }
.tabpanel p{ margin-top:10px; color:var(--muted); font-size:var(--fs-md) }
.tabpanel .dec{ margin-top:12px; font-size:var(--fs-sm); color:var(--dim) }

/* таблица-состояние внутри тура */
.tbl{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.tbl caption{ text-align:left; font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding:0 0 8px }
.tbl th, .tbl td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--line) }
.tbl th{ font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); font-weight:400; background:var(--surface-2) }
.tbl td{ color:var(--muted); font-variant-numeric:tabular-nums }
.tbl tr:last-child td{ border-bottom:0 }
.tbl .hi{ color:var(--warn) }
.tbl .good{ color:var(--acc) }
.tbl-wrap{ overflow-x:auto }
/* на узком экране таблица уезжает вбок — об этом надо предупредить,
   иначе колонки просто выглядят обрезанными */
.tbl-hint{ display:none; margin-bottom:8px; font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.1em; text-transform:uppercase; color:var(--dim) }
@media (max-width:760px){ .tbl-hint{ display:block } }

/* роли */
.roles{ margin-top:clamp(26px,4.4vh,46px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,3vw,36px) }
.roles li{ border-top:1px solid var(--acc-line); padding-top:18px; display:flex; flex-direction:column }
.roles h3{ font-size:var(--fs-lg) }
.roles ul{ margin-top:12px }
.roles ul li{ border:0; padding:4px 0 4px 14px; position:relative; color:var(--muted); font-size:var(--fs-sm) }
.roles ul li::before{ content:""; position:absolute; left:0; top:12px; width:5px; height:5px; border-radius:50%; background:var(--acc-line) }
.roles .ract{ margin-top:auto; padding-top:16px }

/* быстрая проверка */
.check{ margin-top:clamp(24px,4vh,40px); max-width:820px }
.check-form{ display:flex; flex-wrap:wrap; gap:10px }
.check-form input[type="url"]{
  flex:1 1 340px; min-width:0; min-height:44px; padding:12px 14px;
  font:inherit; font-size:var(--fs-md); color:var(--ink);
  background:var(--surface); border:1px solid var(--control-line); border-radius:var(--r);
}
.check-form input::placeholder{ color:var(--dim) }
.check-form input[aria-invalid="true"]{ border-color:var(--bad) }
.check-hint{ margin-top:10px; font-size:var(--fs-xs); color:var(--dim) }
.check-state{ margin-top:14px; font-size:var(--fs-sm); color:var(--muted); min-height:1.2em }
.check-state.err{ color:var(--warn) }
.check-out[hidden]{ display:none }
.check-out{ margin-top:clamp(20px,3.4vh,30px); border-top:1px solid var(--line); padding-top:22px }
.check-top{ display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,36px); align-items:baseline }
.check-score{ display:flex; align-items:baseline; gap:10px }
.check-score b{ font-size:clamp(36px,5vw,52px); font-weight:600; letter-spacing:-.04em; color:var(--acc); line-height:1 }
.check-score span{ color:var(--muted); font-size:var(--fs-md) }
.check-stat{ display:flex; gap:clamp(12px,2.4vw,26px); font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--dim) }
.check-stat b{ color:var(--ink); font-weight:400 }
.check-list{ margin-top:18px; border-top:1px solid var(--line) }
.check-list li{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; padding:10px 0; border-bottom:1px solid var(--line); font-size:var(--fs-md); color:var(--muted) }
.check-list .m{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; padding-top:4px }
.check-list li.f .m{ color:var(--warn) }
.check-list li.w .m{ color:var(--ink) }
.check-list li.o .m{ color:var(--dim) }
.check-list li.o span:last-child{ color:var(--dim) }
.check-list li[hidden]{ display:none }
.check-act{ margin-top:20px; display:flex; flex-wrap:wrap; gap:12px; align-items:center }
.check-dis{ margin-top:14px; font-size:var(--fs-xs); color:var(--dim); max-width:70ch }

/* ранний доступ и тарифы */
.access{ margin-top:clamp(26px,4.4vh,46px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:clamp(20px,3.4vw,46px); align-items:start }
.access dl{ margin:0; border-top:1px solid var(--line) }
.access .row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; padding:13px 0; border-bottom:1px solid var(--line) }
.access dt{ color:var(--muted); font-size:var(--fs-md) }
.access dd{ margin:0; font-size:var(--fs-md) }
.access .card{ border:1px solid var(--line-2); border-radius:var(--r); padding:22px; background:var(--surface) }
.access .card p{ margin-top:10px; color:var(--muted); font-size:var(--fs-sm) }
.access .card .btn{ margin-top:18px; width:100% }

/* API, интеграции, безопасность */
.api{ margin-top:clamp(26px,4.4vh,46px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(20px,3.4vw,46px); align-items:start }
.api p{ color:var(--muted); font-size:var(--fs-md) }
.api p + p{ margin-top:14px }
pre.code{
  margin:0; padding:20px; overflow-x:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--mono); font-size:var(--fs-xs); line-height:1.66; color:var(--muted);
}
pre.code b{ color:var(--acc); font-weight:400 }
pre.code i{ color:var(--dim); font-style:normal }
.plist{ margin-top:16px }
.plist li{ display:flex; gap:10px; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm); color:var(--muted) }
.plist li:last-child{ border-bottom:0 }

/* развилка с агентством — одна компактная полоса, не половина страницы */
.fork{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(16px,3vw,40px); align-items:center;
  border:1px solid var(--line-2); border-radius:var(--r); padding:clamp(20px,3vw,30px); background:var(--surface);
}
.fork h2{ font-size:var(--fs-xl) }
.fork p{ margin-top:10px; color:var(--muted); font-size:var(--fs-md); max-width:72ch }

/* вопросы */
.faq{ margin-top:clamp(26px,4.4vh,46px); border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{ list-style:none; cursor:pointer; padding:17px 0; display:flex; gap:16px; justify-content:space-between; align-items:baseline; min-height:44px }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; color:var(--acc); font-family:var(--mono) }
.faq details[open] summary::after{ content:"–" }
.faq .q{ font-size:var(--fs-lg); font-weight:600; letter-spacing:-.02em; margin:0 }
.faq .a{ padding:0 0 20px; max-width:78ch; color:var(--muted); font-size:var(--fs-md) }

/* финал */
.end{ padding:var(--sec) 0 }
.end h2{ font-size:var(--fs-2xl); max-width:24ch }
.end p{ margin-top:14px; max-width:62ch; color:var(--muted); font-size:var(--fs-md) }
.end .sa{ margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; align-items:center }

/* подвал */
footer.site{ border-top:1px solid var(--line); padding:clamp(34px,5vh,56px) 0 }
.fcols{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(18px,3vw,38px) }
.fcols h3{ font-family:var(--mono); font-size:var(--fs-3xs); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); font-weight:400 }
.fcols ul{ margin-top:12px }
.fcols li{ padding:5px 0 }
.fcols a{ font-size:var(--fs-sm); color:var(--muted); text-decoration:none }
.fcols a:hover{ color:var(--ink) }
.fcols .soon{ font-size:var(--fs-sm); color:var(--dim) }
.fbot{ margin-top:clamp(24px,4vh,40px); padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 26px; font-size:var(--fs-xs); color:var(--dim) }

/* ------------------------------------------------------------- адаптив -- */
@media (max-width:1100px){
  .ps-body{ grid-template-columns:minmax(0,1fr) }
  .ps-main{ border-right:0; border-bottom:1px solid var(--line) }
  .fcols{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (max-width:1000px){
  .hero-in{ grid-template-columns:minmax(0,1fr); gap:clamp(26px,5vh,44px) }
  .hl{ grid-template-columns:minmax(0,1fr); gap:14px }
  .facts{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .mech, .mods{ grid-template-columns:minmax(0,1fr) }
  .roles, .road{ grid-template-columns:minmax(0,1fr); gap:24px }
  .api, .access, .tabpanel{ grid-template-columns:minmax(0,1fr) }
  .flow li{ grid-template-columns:minmax(0,40px) minmax(0,1fr); gap:12px }
  .flow .out{ grid-column:2 }
  .fork{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:640px){
  .facts{ grid-template-columns:minmax(0,1fr) }
  .fcols{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .ps-kpi{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .check-list li{ grid-template-columns:80px minmax(0,1fr); gap:10px }
  .hero-act .btn, .hero-act .btn-line{ width:100% }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}