/* ==========================================================================
   isai.su — design tokens and layout (v2)
   Принципы: строгая сетка, ограничение длины строки, отсутствие переполнений,
   поддержка латиницы, кириллицы и CJK, доступность (контраст, focus-visible).
   ========================================================================== */

:root{
  /* Палитра: глубокий синий (доверие, институциональность) + нейтральные */
  --navy-900:#0b2743;
  --navy-800:#10365c;
  --navy-700:#17456f;
  --blue-600:#1f5c99;
  --blue-500:#2e75b6;
  --blue-100:#eaf2fa;
  --blue-050:#f5f9fd;
  --ink-900:#16202b;
  --ink-700:#33414f;
  --ink-500:#5b6b7c;
  --line:#d7e1ec;
  --line-soft:#e7eef6;
  --bg:#ffffff;
  --bg-alt:#f7f9fc;
  --accent:#b8862b;          /* латунь: используется скупо, для акцентов */
  --ok:#1f7a45;
  /* Типографика */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
              "Noto Sans","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  /* Ритм */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sp-7:48px; --sp-8:64px; --sp-9:88px;
  --radius-sm:8px; --radius:12px; --radius-lg:18px;
  --maxw:1140px;             /* ширина контентной сетки */
  --measure:72ch;            /* максимальная длина строки текста */
  --shadow-soft:0 1px 2px rgba(11,39,67,.06),0 8px 24px rgba(11,39,67,.06);
  --shadow-card:0 1px 3px rgba(11,39,67,.08);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink-900);
  font-family:var(--font-sans);font-size:16.5px;line-height:1.65;
  overflow-wrap:break-word;               /* длинные слова не выходят за блок */
  word-break:normal;
  text-rendering:optimizeLegibility;
}
/* CJK: чуть больше межстрочный интервал и без переносов по слогам */
html[lang^="zh"] body{line-height:1.8;letter-spacing:.01em}
html[lang^="ru"] body{hyphens:auto}
img,svg,video{max-width:100%;height:auto}
a{color:var(--blue-600);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--blue-500);outline-offset:2px;border-radius:4px}

/* ---------------------------------------------------------------- layout */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-5)}
section{padding:var(--sp-8) 0}
section.tight{padding:var(--sp-7) 0}
section.alt{background:var(--bg-alt);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.lead,.sub{max-width:var(--measure)}
.sub{color:var(--ink-500);margin:var(--sp-2) 0 var(--sp-6)}

h1,h2,h3,h4{line-height:1.22;margin:0 0 var(--sp-3);text-wrap:balance;letter-spacing:-.01em}
html[lang^="zh"] h1,html[lang^="zh"] h2,html[lang^="zh"] h3{letter-spacing:0}
h1{font-size:clamp(28px,4.6vw,42px);font-weight:750;color:var(--navy-900)}
h2{font-size:clamp(22px,3vw,29px);font-weight:700;color:var(--navy-800)}
h3{font-size:clamp(18px,2.1vw,20px);font-weight:650;color:var(--blue-600)}
h4{font-size:16.5px;font-weight:650;color:var(--navy-800)}
p{margin:0 0 var(--sp-4);text-wrap:pretty}
p,li{max-width:var(--measure)}          /* ровный текстовый столбец */
ul.clean,ol.clean{list-style:none;padding:0;margin:0 0 var(--sp-5)}
ul.clean li{position:relative;padding:var(--sp-2) 0 var(--sp-2) 26px;border-bottom:1px dashed var(--line-soft);max-width:none}
ul.clean li:last-child{border-bottom:0}
ul.clean li::before{content:"";position:absolute;left:4px;top:19px;width:8px;height:8px;border-radius:2px;background:var(--blue-500)}
ul.plain{padding-left:20px}
ul.plain li{margin-bottom:var(--sp-2)}

/* --------------------------------------------------------------- header */
header.top{position:sticky;top:0;z-index:60;background:var(--navy-800);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.08),0 6px 18px rgba(11,39,67,.18)}
header.top .bar{display:flex;align-items:center;gap:var(--sp-5);min-height:68px;flex-wrap:wrap;padding:6px 0}
.brand{display:flex;align-items:center;gap:var(--sp-4);color:#fff;min-width:0}
.brand:hover{text-decoration:none}
/* Знак — векторный (svg), а не текст в квадрате: кириллическая аббревиатура
   «ИСБИИ» шире латинской «ISAI» и в фиксированном квадрате вылезала за рамку. */
.brand .mark{flex:0 0 auto;width:42px;height:42px;display:block;color:#c9a253}
.brand .name{display:flex;flex-direction:column;min-width:0}
.brand .name b{font-size:15px;font-weight:650;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .name span{font-size:11.5px;color:#bcd3ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav.main{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:2px}
nav.main a{color:#dbe9f7;padding:8px 11px;border-radius:var(--radius-sm);font-size:14.5px;white-space:nowrap}
nav.main a:hover{background:rgba(255,255,255,.12);text-decoration:none}
nav.main a[aria-current="page"]{background:#fff;color:var(--navy-800);font-weight:600}
.lang{display:flex;align-items:center;gap:2px;padding-left:var(--sp-3);margin-left:var(--sp-2);
  border-left:1px solid rgba(255,255,255,.22)}
.lang a,.lang span{padding:6px 9px;border-radius:var(--radius-sm);font-size:13.5px;color:#cfe0f2;white-space:nowrap}
.lang a:hover{background:rgba(255,255,255,.12);text-decoration:none}
.lang .on{background:rgba(255,255,255,.16);color:#fff;font-weight:600}
.access-chip{display:flex;align-items:center;gap:var(--sp-2);margin-left:var(--sp-3);font-size:13px;color:#cfe0f2}
.access-chip a{color:#fff;text-decoration:underline}

/* ----------------------------------------------------------------- hero */
.hero{background:linear-gradient(158deg,var(--navy-900) 0%,var(--navy-800) 45%,var(--blue-600) 100%);color:#fff;
  padding:clamp(40px,7vw,76px) 0 clamp(36px,6vw,64px)}
.hero h1{color:#fff;max-width:22ch}
.hero .lead{font-size:clamp(16.5px,2vw,19px);color:#e3eefa;max-width:64ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}
.crumbs{font-size:13.5px;color:#bcd3ea;margin-bottom:var(--sp-4)}
.crumbs a{color:#dbe9f7}

/* -------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:12px 20px;border-radius:10px;font-weight:600;font-size:15.5px;line-height:1.2;
  border:1.5px solid transparent;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.btn:hover{text-decoration:none}
.btn.primary{background:#fff;color:var(--navy-800);border-color:#fff}
.btn.primary:hover{background:var(--blue-100)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.btn.ghost:hover{background:rgba(255,255,255,.14)}
.btn.solid{background:var(--blue-600);color:#fff;border-color:var(--blue-600)}
.btn.solid:hover{background:var(--navy-800);border-color:var(--navy-800)}
.btn.quiet{background:var(--blue-050);color:var(--navy-800);border-color:var(--line)}
.btn.quiet:hover{background:var(--blue-100)}

/* ----------------------------------------------------------------- grid */
.grid{display:grid;gap:var(--sp-5)}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.grid.g4{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr))}

/* ---------------------------------------------------------------- cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--sp-5);
  box-shadow:var(--shadow-card);min-width:0}
.card.acc{border-left:4px solid var(--blue-500)}
.card>*:last-child{margin-bottom:0}
.card h3{margin-top:0}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4);text-align:center}
.stat b{display:block;font-size:clamp(26px,3.4vw,32px);line-height:1.1;color:var(--navy-800);font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:13.5px;color:var(--ink-500);margin-top:var(--sp-1)}

/* ---------------------------------------------------------------- price */
.price{font-weight:700;color:var(--navy-800);margin:var(--sp-3) 0 var(--sp-1);font-variant-numeric:tabular-nums}
.price .price-value{white-space:normal}
/* Цены публикуются ОТКРЫТО — требование приказа Минцифры России от 21.11.2025
   № 511: сведения о достоверной стоимости должны быть в свободном доступе, без
   регистрации. Разбор юриста подтвердил, что прятать цены за формой нельзя.
   Раньше .price-value скрывался до «демо-доступа»; теперь диапазоны видны
   всегда, а за заявкой остаётся расширенный прайс-лист и калькулятор. */
.price-value{display:inline}
.price-note{font-size:13.5px;color:var(--ink-500);margin:0}
.price-locked{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-3) 0 var(--sp-1);
  padding:var(--sp-3);border:1px dashed var(--line);border-radius:var(--radius-sm);background:var(--blue-050);
  font-size:14px;color:var(--ink-700)}
.price-locked .ico{flex:0 0 auto}
.price-locked a{font-weight:600}
.is-hidden{display:none !important}

/* --------------------------------------------------------------- tables */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:#fff}
.table-wrap table{margin:0}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:var(--sp-3) var(--sp-4);text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
th{background:var(--blue-050);color:var(--navy-800);font-weight:650;white-space:normal}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:#fbfdff}
td .note,td small{color:var(--ink-500)}
.table-wrap table{min-width:560px}   /* на узком экране таблица прокручивается, а не сжимается */

/* -------------------------------------------------------------- notices */
.notice,.ok,.warn{border-radius:var(--radius);padding:var(--sp-4) var(--sp-5);margin:var(--sp-5) 0;font-size:15px;max-width:var(--measure)}
.notice{background:#fff8e6;border:1px solid #ecd9a3;border-left:4px solid var(--accent);color:#584617}
.ok{background:#eef8f1;border:1px solid #c9e6d3;border-left:4px solid var(--ok);color:#1d4c33}
.warn{background:#fdf2f2;border:1px solid #eccfcf;border-left:4px solid #b3453f;color:#5c2420}

/* ------------------------------------------------------------------ cta */
.cta{background:var(--navy-800);color:#fff;border-radius:var(--radius-lg);padding:clamp(24px,4vw,40px)}
.cta h2{color:#fff;margin-top:0}
.cta p{color:#dce9f6}
.cta .actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-4)}

/* ----------------------------------------------------------------- form */
/* Поля компактные: высота элемента уменьшена примерно на треть от прежней —
   крупные поля на телефоне выглядели неповоротливо. */
form{display:grid;gap:var(--sp-4);max-width:600px}
.field{display:grid;gap:4px}
label{font-size:12.5px;color:var(--ink-500)}
input,textarea,select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;
  font:inherit;font-size:14.5px;line-height:1.35;color:var(--ink-900);background:#fff;min-width:0}
input:focus,textarea:focus,select:focus{border-color:var(--blue-500);outline:none;box-shadow:0 0 0 3px rgba(46,117,182,.18)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--ink-700)}
.check input{width:auto;margin-top:3px;flex:0 0 auto}
.form-note{font-size:12.5px;color:var(--ink-500);max-width:var(--measure)}

/* Своё сообщение об ошибке вместо системного пузыря браузера: системный
   не стилизуется и на телефоне выходит крупнее самой формы. */
.form-error{margin:0;font-size:12.5px;line-height:1.4;color:#8c2f2a;
  display:flex;gap:6px;align-items:flex-start;max-width:var(--measure)}
.form-error .ico{flex:0 0 auto;font-weight:700}
.field.has-error input,.field.has-error textarea,.field.has-error select{
  border-color:#b3453f;box-shadow:0 0 0 3px rgba(179,69,63,.12)}
.check.has-error span{color:#8c2f2a}
.check.has-error input{outline:2px solid #b3453f;outline-offset:1px}

/* --------------------------------------------------------------- footer */
footer.bot{background:var(--navy-900);color:#b9cde2;padding:var(--sp-8) 0 var(--sp-6);font-size:14.5px;margin-top:var(--sp-8)}
footer.bot .cols{display:grid;gap:var(--sp-6);grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
footer.bot h4{color:#fff;margin:0 0 var(--sp-3)}
footer.bot p,footer.bot li{max-width:none}
footer.bot a{color:#dbe9f7}
footer.bot .legal{border-top:1px solid #1c3f63;margin-top:var(--sp-6);padding-top:var(--sp-4);font-size:13.5px;color:#93aecb;max-width:var(--measure)}

/* Подпись страницы: дата, версия сборки, правообладатель */
.page-meta{max-width:var(--measure);color:var(--ink-500);font-size:13px;margin:0;padding:var(--sp-6) 0 var(--sp-4)}
html[class*="a11y-c"] .page-meta{color:inherit!important}
.ru-required{background:rgba(255,255,255,.05);border:1px solid #1c3f63;border-radius:var(--radius);padding:var(--sp-4);margin-top:var(--sp-4)}
.ru-required p{margin:0 0 6px;font-size:13.5px}

/* ----------------------------------------------------------- responsive */
@media (max-width:820px){
  .wrap{padding:0 var(--sp-4)}
  nav.main{width:100%;margin-left:0;justify-content:flex-start;row-gap:2px;padding-bottom:4px}
  nav.main a{font-size:14px;padding:7px 9px}
  .lang{border-left:0;padding-left:0;margin-left:0}
  header.top .bar{gap:var(--sp-3)}
  section{padding:var(--sp-7) 0}
}
@media (max-width:420px){
  body{font-size:16px}
  .btn{width:100%}
  .hero .actions{flex-direction:column;align-items:stretch}
}
@media print{
  header.top,footer.bot,.cta,.access-chip{display:none}
  body{font-size:11pt}
}

/* ==========================================================================
   Второй уровень навигации (разделы по аудиториям)
   Держим отдельной строкой под основным меню: основное меню остаётся
   коротким, а разделы доступны с любой страницы.
   ========================================================================== */
nav.subnav{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;
  border-top:1px solid rgba(255,255,255,.14);margin-top:2px;padding:5px 0 9px}
nav.subnav a{color:#cfe0f2;font-size:13.5px;line-height:1.3;padding:4px 9px;border-radius:8px;
  text-decoration:none;white-space:nowrap}
nav.subnav a:hover{background:rgba(255,255,255,.10);color:#fff;text-decoration:none}
nav.subnav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.16);font-weight:650}
@media (max-width:820px){
  nav.subnav{padding-bottom:7px}
  nav.subnav a{font-size:13px;padding:4px 7px;white-space:normal}
}

/* ==========================================================================
   Версия для слабовидящих (ГОСТ Р 52872-2019)
   Управление: размер шрифта, цветовая схема, изображения.
   Классы ставятся на <html>: a11y-s1..s3, a11y-c1..c3, a11y-noimg.
   ========================================================================== */
.a11y-panel{position:fixed;top:0;left:0;right:0;z-index:90;background:#fff;color:var(--ink-900);
  border-bottom:2px solid var(--navy-800);box-shadow:0 6px 22px rgba(11,39,67,.18);
  padding:var(--sp-4) 0;display:none}
.a11y-panel.is-open{display:block}
.a11y-panel .wrap{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);align-items:center}
.a11y-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;color:var(--ink-700)}
.a11y-group>span{font-weight:600;color:var(--navy-800)}
.a11y-group button{font:inherit;font-size:14px;padding:6px 12px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink-900);cursor:pointer;min-width:44px;min-height:38px}
.a11y-group button:hover{border-color:var(--blue-500)}
.a11y-group button[aria-pressed="true"]{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.a11y-hint{font-size:13px;color:var(--ink-500);width:100%}
body.a11y-open{padding-top:0}
.a11y-toggle{background:none;border:0;padding:0;font:inherit;color:#dbe9f7;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.a11y-toggle:hover{color:#fff}

/* Размер шрифта: масштабируем всю страницу целиком, а не только абзацы */
@supports (zoom:1){
  html.a11y-s1 body{zoom:1.12}
  html.a11y-s2 body{zoom:1.25}
  html.a11y-s3 body{zoom:1.4}
}
@supports not (zoom:1){
  html.a11y-s1 body{font-size:19px}
  html.a11y-s2 body{font-size:22px}
  html.a11y-s3 body{font-size:25px}
}

/* Цветовые схемы: гасим декоративные фоны, оставляем контраст текста */
html.a11y-c1 body,html.a11y-c2 body,html.a11y-c3 body{background:#fff}
html.a11y-c1 header.top,html.a11y-c1 footer.bot,html.a11y-c1 section.alt,
html.a11y-c1 .card,html.a11y-c1 .stat,html.a11y-c1 .notice,html.a11y-c1 .ok,html.a11y-c1 .warn,
html.a11y-c1 .cta,html.a11y-c1 .price-block,html.a11y-c1 th,
html.a11y-c2 header.top,html.a11y-c2 footer.bot,html.a11y-c2 section.alt,
html.a11y-c2 .card,html.a11y-c2 .stat,html.a11y-c2 .notice,html.a11y-c2 .ok,html.a11y-c2 .warn,
html.a11y-c2 .cta,html.a11y-c2 .price-block,html.a11y-c2 th,
html.a11y-c3 header.top,html.a11y-c3 footer.bot,html.a11y-c3 section.alt,
html.a11y-c3 .card,html.a11y-c3 .stat,html.a11y-c3 .notice,html.a11y-c3 .ok,html.a11y-c3 .warn,
html.a11y-c3 .cta,html.a11y-c3 .price-block,html.a11y-c3 th{
  background:transparent!important;border-color:currentColor!important;box-shadow:none!important;color:inherit!important}
html.a11y-c1 body,html.a11y-c2 body,html.a11y-c3 body,
html.a11y-c1 header.top *,html.a11y-c2 header.top *,html.a11y-c3 header.top *,
html.a11y-c1 footer.bot *,html.a11y-c2 footer.bot *,html.a11y-c3 footer.bot *,
html.a11y-c1 h1,html.a11y-c1 h2,html.a11y-c1 h3,html.a11y-c1 h4,
html.a11y-c2 h1,html.a11y-c2 h2,html.a11y-c2 h3,html.a11y-c2 h4,
html.a11y-c3 h1,html.a11y-c3 h2,html.a11y-c3 h3,html.a11y-c3 h4{color:inherit!important}
html.a11y-c1,html.a11y-c1 body{background:#fff!important;color:#000!important}
html.a11y-c1 a{color:#0033aa!important}
html.a11y-c2,html.a11y-c2 body{background:#000!important;color:#fff!important}
html.a11y-c2 a{color:#ffe45c!important}
html.a11y-c2 header.top,html.a11y-c2 .a11y-panel{background:#000!important;color:#fff!important}
html.a11y-c3,html.a11y-c3 body{background:#f7f3e8!important;color:#3b2f1c!important}
html.a11y-c3 a{color:#7a3e00!important}
html.a11y-c1 .btn,html.a11y-c2 .btn,html.a11y-c3 .btn{
  background:transparent!important;color:inherit!important;border:2px solid currentColor!important}
html.a11y-c1 *,html.a11y-c2 *,html.a11y-c3 *{text-shadow:none!important}
html.a11y-c1 .a11y-panel,html.a11y-c2 .a11y-panel,html.a11y-c3 .a11y-panel{
  border-bottom:2px solid currentColor}
/* Схемы для слабовидящих показывают разделы всегда: панель разделов раскрывается
   кнопкой, а кнопка красится в currentColor и без JS не видна. Доступность
   важнее компактности. */
html.a11y-c1 header.top.v4 nav.subnav,html.a11y-c2 header.top.v4 nav.subnav,
html.a11y-c3 header.top.v4 nav.subnav{display:flex!important;flex-wrap:wrap!important;
  overflow:visible!important}
html[class*="a11y-c"] .brand .mark{background:transparent!important;border:1px solid currentColor!important}

/* Изображения: отключаем по требованию, оставляя текстовые подписи */
html.a11y-noimg img,html.a11y-noimg picture,html.a11y-noimg svg{display:none!important}