/* dmv.pro · site.css · собрано из пакета дизайна 260912-handoff: tokens.css + fonts.css + page.css (см. design/README) */
/* dmv.pro · design tokens · 2026-09-12 */
:root{
  /* цвета: фон и поверхности */
  --bg:#05081A;                 /* фон страницы */
  --bg-deep:#04060F;            /* низ длинных страниц, подложка картинок */
  --surface-1:rgba(255,255,255,0.05);   /* стеклянная карточка */
  --surface-2:rgba(255,255,255,0.03);   /* вторая ступень градиента карточки */
  --surface-solid:#0D1330;      /* непрозрачный аналог карточки (для растровых подложек) */
  --surface-row:rgba(255,255,255,0.05); /* строка ключ/значение внутри карточки */
  --surface-accent:rgba(108,155,255,0.08); /* подсвеченная плашка (миссия, факты) */
  --surface-table-head:rgba(108,155,255,0.12);
  /* границы */
  --border:rgba(255,255,255,0.10);
  --border-strong:rgba(255,255,255,0.14);
  --border-accent:rgba(157,184,255,0.25);
  --border-hover:rgba(157,184,255,0.45);
  --border-table:rgba(157,184,255,0.35);
  /* текст */
  --text-1:#FFFFFF;             /* заголовки, основной текст */
  --text-2:#DCE5FA;             /* подписи в карточках */
  --text-3:#B8C2D9;             /* вторичный текст, лиды */
  --text-mute:#7F8DB0;          /* служебные строки (контраст 6.0:1 на --bg) */
  --text-doc:#DDE1E8;           /* текст политики (светло-серый) */
  --text-doc-head:#E6E9F0;
  --text-doc-2:#C9CED8;
  /* акцент */
  --accent:#6C9BFF;             /* точки, индикаторы, свечение */
  --accent-soft:#9DB8FF;        /* моно-кикеры, значения, ссылки на тёмном */
  --accent-light:#CFE0FF;       /* цифры фактов, strong в статьях */
  --brand:#0A3CB4;              /* синий логотипа */
  --brand-deep:#061B4F;
  --amber:#F2B84B;              /* единственный тёплый акцент (картинки, метки) */
  --danger:#FF9DB0;             /* «отказ» в журнале */
  --glow:rgba(108,155,255,0.6);
  /* состояния */
  --link:#FFFFFF; --link-hover:#9DB8FF;
  --nav-hover:rgba(255,255,255,0.10);
  --focus:#9DB8FF;
  /* шрифты */
  --font-sans:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* размеры шрифта (px), минимум 15 */
  --fs-15:15px; --fs-16:16px; --fs-17:17px; --fs-19:19px; --fs-20:20px; --fs-22:22px; --fs-23:23px; --fs-32:32px;
  --fs-h1:clamp(36px,4.4vw,56px);
  --fs-h1-hero:clamp(34px,4.4vw,56px);
  --fs-h2:clamp(30px,3.4vw,44px);
  --fs-h2-s:clamp(28px,3vw,40px);
  --fs-h3:clamp(26px,2.8vw,36px);
  --fs-lead:clamp(17px,1.5vw,19px);
  --fs-quote:clamp(19px,1.8vw,23px);
  --fs-doc-h2:clamp(24px,2.2vw,28px);
  --fs-doc-h1:clamp(34px,4vw,52px);
  /* межстрочные */
  --lh-tight:1.05; --lh-head:1.1; --lh-card:1.25; --lh-ui:1.35; --lh-text:1.5; --lh-body:1.6;
  /* трекинг */
  --ls-h1:-0.03em; --ls-h2:-0.025em; --ls-h3:-0.02em; --ls-mono:0.02em;
  /* радиусы */
  --r-10:10px; --r-12:12px; --r-16:16px; --r-18:18px; --r-20:20px; --r-24:24px; --r-pill:999px;
  /* тени */
  --shadow-card:0 30px 60px -24px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.18);
  --shadow-block:0 40px 80px -40px rgba(0,0,0,0.9);
  --shadow-soft:0 30px 60px -30px rgba(0,0,0,0.8);
  --glow-dot:0 0 14px 3px rgba(108,155,255,0.6);
  --glow-logo:0 0 24px rgba(120,160,255,0.5);
  /* отступы */
  --sp-4:4px; --sp-6:6px; --sp-8:8px; --sp-10:10px; --sp-12:12px; --sp-14:14px; --sp-16:16px; --sp-18:18px; --sp-20:20px; --sp-22:22px; --sp-24:24px; --sp-28:28px; --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-56:56px; --sp-64:64px; --sp-72:72px; --sp-96:96px; --sp-128:128px;
  --gap-cards:16px; --gap-cards-hero:20px; --gap-cols:64px;
  --pad-x:clamp(20px,3.8vw,48px);           /* боковой отступ страницы */
  --pad-section:clamp(72px,9vw,128px);      /* вертикальный отступ секции */
  --pad-section-s:clamp(56px,7vw,96px);
  --pad-block:clamp(24px,3vw,40px);         /* внутренний отступ большого блока */
  /* контейнер */
  --container:1180px;
  /* точки перелома (для справки; в CSS используются числами) */
  --bp-xl:1440px; --bp-l:1024px; --bp-m:768px; --bp-s:390px;
}

/* dmv.pro: локальные шрифты Onest и JetBrains Mono (SIL OFL 1.1), подмножества cyrillic и latin из пакетов @fontsource 5.x */
@font-face{font-family:"Onest";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/onest-cyrillic-400-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/onest-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/onest-cyrillic-500-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/onest-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/onest-cyrillic-600-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/onest-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/onest-cyrillic-700-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/onest-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/onest-cyrillic-800-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/onest-latin-800-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/jetbrains-mono-cyrillic-400-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/jetbrains-mono-cyrillic-500-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* dmv.pro · page.css · без JS, без внешних ресурсов */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text-1);font:400 var(--fs-17)/var(--lh-body) var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--link)}a:hover{color:var(--link-hover)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
h1,h2,h3,p,ul,ol,dl,figure{margin:0}
ul,ol{padding:0;list-style:none}
strong{font-weight:600}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--font-mono);font-size:var(--fs-15);color:var(--accent-soft);letter-spacing:var(--ls-mono)}
.container{max-width:var(--container);margin:0 auto}
.section{padding:var(--pad-section) var(--pad-x)}
.section--s{padding:var(--pad-section-s) var(--pad-x)}
.section--tight{padding:var(--pad-block) var(--pad-x)}
.section--flush-top{padding-top:var(--pad-block)}
.section--flush-bottom{padding-bottom:0}
.section--head{padding:clamp(40px,5vw,72px) var(--pad-x) var(--sp-16)}
.stack{display:flex;flex-direction:column;gap:var(--sp-14)}
.stack--l{gap:var(--sp-20)}
.stack--xl{gap:clamp(48px,6vw,80px)}
.lead{font-size:var(--fs-lead);color:var(--text-3);max-width:720px;text-wrap:pretty}
.lead--wide{max-width:960px;text-wrap:balance}
.h1{font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:600;letter-spacing:var(--ls-h1);text-wrap:balance}
.h2{font-size:var(--fs-h2);line-height:var(--lh-head);font-weight:600;letter-spacing:var(--ls-h2);text-wrap:balance}
.h2--s{font-size:var(--fs-h2-s)}
.h3{font-size:var(--fs-h3);line-height:var(--lh-head);font-weight:600;letter-spacing:var(--ls-h3)}

/* ---- шапка ---- */
.site-header{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-14) var(--sp-32);padding:var(--sp-24) var(--pad-x)}
.brand{display:flex;align-items:center;gap:var(--sp-12);text-decoration:none;color:var(--text-1);margin-right:auto;font-size:var(--fs-16);font-weight:600}
.brand img{width:36px;height:36px;border-radius:50%;object-fit:contain;background:#fff;box-shadow:var(--glow-logo)}
.nav{display:flex;flex-wrap:wrap;gap:var(--sp-4);padding:var(--sp-6);border-radius:var(--r-pill);border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);backdrop-filter:blur(10px)}
.nav a{color:var(--text-1);text-decoration:none;font-size:var(--fs-15);font-weight:500;padding:var(--sp-8) var(--sp-14);border-radius:var(--r-pill)}
.nav a:hover,.nav a[aria-current="page"]{background:var(--nav-hover);color:var(--text-1)}

/* ---- подвал ---- */
.site-footer{padding:0 var(--pad-x) var(--sp-32);font-size:var(--fs-15);line-height:var(--lh-text)}
.site-footer .container{border-top:1px solid var(--border);padding-top:var(--sp-40);display:flex;flex-direction:column;gap:var(--sp-28)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--sp-24) var(--sp-48);align-items:start}
.footer-col{display:flex;flex-direction:column;gap:var(--sp-6);color:var(--text-3)}
.footer-col a{color:var(--text-3);text-underline-offset:4px}
.footer-col a:hover{color:var(--text-1)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--sp-6) var(--sp-16)}
.footer-links a{text-decoration:none}
.footer-note{color:var(--text-mute)}

/* ---- первый экран ---- */
.hero{position:relative;overflow:hidden;padding-bottom:clamp(40px,4vw,56px);background:radial-gradient(ellipse 80% 60% at 50% 110%,#0E2A7A 0%,rgba(14,42,122,0) 60%),radial-gradient(ellipse 50% 40% at 50% 45%,#12245C 0%,rgba(18,36,92,0) 70%),var(--bg)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:url("/art/bg-stars.svg") center/1280px 900px repeat}
.hero-copy{position:relative;z-index:3;text-align:center;padding:clamp(19px,2.3vw,29px) var(--pad-x) 0;display:flex;flex-direction:column;align-items:center;gap:var(--sp-18)}
.hero-copy .h1{font-size:var(--fs-h1-hero);line-height:1.08;max-width:760px}
.hero-copy p{font-size:var(--fs-lead);line-height:var(--lh-text);max-width:760px;text-wrap:balance}
.hero-row{position:relative;z-index:3;padding:0 var(--pad-x);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:var(--gap-cards-hero)}
.hero-row--top{padding-top:var(--pad-block);align-items:start}
.hero-row--bottom{align-items:end}
.hero-row .card{max-width:300px}
.hero-row .pos-r{justify-self:end}
.hero-row .pos-c{justify-self:center}
.hero-row .drop-s{margin-top:clamp(0px,2.4vw,32px)}
.hero-row .drop-l{margin-top:clamp(0px,4vw,56px)}
.hero-row .drop-xl{margin-top:clamp(0px,8vw,120px)}
.hero-row .lift-l{margin-bottom:clamp(0px,5vw,64px)}
.hero-row .lift-xl{margin-bottom:clamp(0px,7vw,96px)}
.hero-scene{position:relative;height:clamp(120px,14vw,180px);margin-top:calc(-1 * clamp(80px,10vw,140px));pointer-events:none}
.hero-scene img{position:absolute;left:50%;top:calc(50% + 40px);transform:translate(-50%,-50%);width:min(960px,180vw);height:auto}

/* ---- карточка «заголовок · метка · ключ/значение» ---- */
.card{padding:var(--sp-18) var(--sp-20);border-radius:var(--r-18);border:1px solid var(--border-strong);background:linear-gradient(160deg,rgba(255,255,255,0.10),rgba(255,255,255,0.03));backdrop-filter:blur(16px);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--sp-12);color:var(--text-1)}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-12)}
.card-head h3{font-size:var(--fs-15);font-weight:600}
.card-head .mono{color:var(--accent-soft)}
.kv{display:flex;flex-direction:column;gap:var(--sp-8);font-size:var(--fs-15)}
.kv > div{display:flex;justify-content:space-between;gap:var(--sp-8);flex-wrap:wrap;padding:var(--sp-8) var(--sp-10);border-radius:var(--r-10);background:var(--surface-row)}
.kv dt{font-weight:400}
.kv dd{margin:0;font-family:var(--font-mono);color:var(--accent-soft)}
.kv--journal > div{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:var(--sp-10);padding:var(--sp-6) var(--sp-10)}
.kv--journal dd.ok{color:var(--accent-light)} .kv--journal dd.deny{color:var(--danger)}
.kv--flow > div{display:grid;grid-template-columns:10px 1fr;gap:var(--sp-12);align-items:center}
.kv--flow i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.2)}
.kv--flow i.on{background:var(--accent);box-shadow:0 0 10px var(--glow)}
.kv--flow dt{display:flex;justify-content:space-between;gap:var(--sp-8);flex-wrap:wrap}
.kv--flow dt span{font-family:var(--font-mono);color:var(--accent-soft)}
.card-foot{display:flex;justify-content:space-between;gap:var(--sp-8);flex-wrap:wrap;font-size:var(--fs-15);color:var(--text-3)}
.card-foot b{font-weight:400;color:var(--accent-light)}
/* полоса ворот: 8 сегментов */
.gates{display:flex;align-items:center;gap:var(--sp-6)}
.gates li{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.12)}
.gates li.done{background:var(--accent);box-shadow:0 0 10px var(--glow)}
.gates li.active{background:linear-gradient(90deg,var(--accent) 50%,rgba(255,255,255,0.12) 50%)}
/* столбики копий: 14 дней */
.bars{display:flex;align-items:flex-end;gap:5px;height:44px}
.bars li{flex:1;border-radius:2px;background:rgba(157,184,255,0.45)}
.bars li:last-child{background:var(--accent-light)}
.bars .h50{height:50%}.bars .h60{height:60%}.bars .h65{height:65%}.bars .h70{height:70%}.bars .h75{height:75%}.bars .h80{height:80%}.bars .h85{height:85%}.bars .h90{height:90%}.bars .h100{height:100%}

/* ---- сетки карточек ---- */
.grid{display:grid;gap:var(--gap-cards)}
.grid--areas{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.grid--projects{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.grid--steps{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.grid--stack{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:14px;align-items:start}
.grid--req{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:var(--sp-12)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.tile{display:flex;flex-direction:column;gap:var(--sp-10);padding:var(--sp-26,26px);border-radius:var(--r-20);border:1px solid var(--border);background:linear-gradient(160deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));color:var(--text-1);text-decoration:none;min-height:200px}
.tile:hover{border-color:var(--border-hover);color:var(--text-1)}
.tile h3{font-size:var(--fs-22);font-weight:600;line-height:var(--lh-card);text-wrap:balance}
.tile p{font-size:var(--fs-15);color:var(--text-3);line-height:var(--lh-text);text-wrap:pretty}
.tile .mono + h3{margin-top:0}
/* плитка с мотивом в правом нижнем углу */
.tile--motif{position:relative;overflow:hidden;min-height:0;padding-bottom:22px}
.tile--motif::before{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;border:1px solid rgba(157,184,255,0.18);pointer-events:none}
.tile--motif .motif{position:absolute;right:14px;bottom:10px;width:76px;height:57px;opacity:0.45;pointer-events:none}
.tile--motif h3,.tile--motif p,.tile--motif .status,.tile--motif .mono{position:relative;z-index:1}
.tile--motif p{padding-right:64px}
.tile--project .motif{right:16px;top:18px;bottom:auto;width:96px;height:72px;opacity:0.5}
.tile--project h3{max-width:calc(100% - 100px)}
.tile--project p{padding-right:0}
.status{align-self:flex-start;font-family:var(--font-mono);font-size:var(--fs-15);padding:5px 11px;border-radius:var(--r-pill);background:rgba(108,155,255,0.15);color:var(--accent-light)}
.status + h3{margin-top:var(--sp-6)}
.row-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--sp-12) var(--sp-32)}
.more{font-size:var(--fs-16);font-weight:500;color:var(--accent-soft);text-decoration:none}.more:hover{color:var(--text-1)}

/* ---- плашка миссии и фактов ---- */
.plate{padding:var(--pad-block);border-radius:var(--r-24);border:1px solid var(--border-accent);background:var(--surface-accent)}
.plate--facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:var(--gap-cards);align-items:center}
.plate--facts .quote{grid-column:1/-1}
.plate{position:relative;overflow:hidden}
.plate-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.55;pointer-events:none}
.plate > *:not(.plate-art){position:relative}
.quote{font-size:var(--fs-quote);line-height:var(--lh-ui);font-weight:500;text-wrap:balance;max-width:820px}
.fact{display:flex;flex-direction:column;gap:var(--sp-4)}
.fact b{font-size:var(--fs-32);font-weight:600;letter-spacing:-0.02em;line-height:1;color:var(--accent-light);font-variant-numeric:tabular-nums}
.fact span{font-size:var(--fs-15);color:var(--text-3);line-height:var(--lh-ui)}

/* ---- экспертиза: большой блок области ---- */
.area{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--sp-28) var(--sp-56,56px);align-items:center;padding:var(--pad-block);border-radius:var(--r-24);border:1px solid rgba(255,255,255,0.08);background:linear-gradient(160deg,rgba(255,255,255,0.05),rgba(255,255,255,0.01));box-shadow:var(--shadow-block)}
.area{position:relative;overflow:hidden}
.area-art{position:absolute;left:0;top:0;height:100%;width:min(52%,560px);object-fit:cover;object-position:left center;opacity:0.22;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent);mask-image:linear-gradient(90deg,#000 40%,transparent)}
.area > *:not(.area-art){position:relative}
.area-text{display:flex;flex-direction:column;gap:var(--sp-14)}
.area-text .lead-s{font-size:18px;font-weight:500;text-wrap:pretty}
.area-text .body{font-size:var(--fs-16);color:var(--text-3);line-height:var(--lh-body);text-wrap:pretty}
.area-figure{display:flex;flex-direction:column;gap:var(--gap-cards);justify-content:center}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-top:var(--sp-6)}
.chips li{font-size:var(--fs-15);padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--border-accent);color:var(--accent-light)}

/* ---- подход ---- */
.glow-section{position:relative;overflow:hidden}
.glow-section::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1200px;height:1200px;border-radius:50%;background:radial-gradient(circle,rgba(40,100,255,0.22) 0%,rgba(40,100,255,0) 60%);filter:blur(40px);pointer-events:none}
.glow-section > .container{position:relative}
.glow-section.section--flush-top{padding-bottom:clamp(16px,2vw,26px)}
#future{margin-top:clamp(-48px,-6vw,-24px);padding-top:var(--pad-block)}
.stages{display:flex;flex-direction:column;gap:var(--sp-14);padding:var(--sp-22) var(--sp-24);border-radius:var(--r-20);border:1px solid var(--border-accent);background:var(--surface-accent)}
.stages-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-8) var(--sp-24);font-size:var(--fs-15)}
.stages-head b{font-weight:600}
.stages ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(110px,100%),1fr));gap:var(--sp-6)}
.stages li{display:flex;flex-direction:column;gap:var(--sp-8);font-size:var(--fs-15);color:var(--text-3);white-space:nowrap}
.stages li::before{content:"";height:6px;border-radius:3px;background:var(--accent);box-shadow:0 0 10px rgba(108,155,255,0.5)}
.stages li span{font-family:var(--font-mono);color:var(--accent-soft)}
.step{position:relative;display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-22);border-radius:var(--r-20);border:1px solid var(--border);background:rgba(8,12,30,0.6);backdrop-filter:blur(14px);min-height:180px}
.step:hover{border-color:var(--border-hover)}
.step .icon{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:var(--r-12);display:grid;place-items:center;background:rgba(108,155,255,0.12);color:var(--accent-soft);box-shadow:0 0 18px rgba(108,155,255,0.25)}
.step .icon svg{width:20px;height:20px}
.step h3{font-size:var(--fs-20);font-weight:600;line-height:1.2;padding-right:56px}
.step p{font-size:var(--fs-15);color:var(--text-3);line-height:var(--lh-text);text-wrap:pretty}

/* ---- статья с картинкой ---- */
.article{display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}
.article-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--sp-32) var(--gap-cols);align-items:start}
.article-row--end{align-items:end}
.article-row--3-2{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--sp-32) var(--sp-48)}
.article-intro{display:flex;flex-direction:column;gap:var(--sp-24)}
.article-text{display:flex;flex-direction:column;gap:var(--sp-20);font-size:var(--fs-17);line-height:var(--lh-body)}
.article-text p{text-wrap:pretty}
.article-text strong{color:var(--accent-light)}
.figure{position:relative;width:100%;border:1px solid var(--border);border-radius:var(--r-20);overflow:hidden;box-shadow:var(--shadow-block);background:var(--bg)}
.figure img{width:100%;height:100%;object-fit:cover}
.figure--4-3{aspect-ratio:4/3}
.figure--r16{border-radius:var(--r-16)}
.figure-label{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);pointer-events:none;font-family:var(--font-mono);font-size:clamp(15px,1.6vw,20px);font-weight:700;letter-spacing:0.04em;color:#5A3A08;text-shadow:0 0 6px rgba(255,220,150,0.6)}
.figure--tint img{filter:hue-rotate(-6deg) saturate(1) contrast(1.05)}
.figure--tint::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--brand);mix-blend-mode:color;opacity:0.14}
.figure--zoom img{width:110%;height:110%;margin:-1.4% 0 0 -5%;max-width:none}

/* ---- о нас / реквизиты ---- */
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--sp-40) var(--gap-cols);align-items:start}
.about-text{display:flex;flex-direction:column;gap:var(--sp-20);font-size:clamp(17px,1.4vw,19px);line-height:1.55}
.about-text p{text-wrap:pretty}
.about-text .quote{padding:var(--sp-22) var(--sp-24);border-radius:var(--r-20);border:1px solid var(--border-accent);background:var(--surface-accent)}
.ring-section{position:relative;overflow:hidden}
.ring-section::before{content:"";position:absolute;right:-300px;top:-200px;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(40,100,255,0.28) 0%,rgba(40,100,255,0) 60%);filter:blur(40px);pointer-events:none}
.ring-section::after{content:"";position:absolute;right:-160px;top:40px;width:520px;height:520px;border-radius:50%;border:1px solid rgba(157,184,255,0.18);background:conic-gradient(from 0deg,rgba(157,184,255,0) 0 85%,rgba(157,184,255,0.25) 100%);pointer-events:none}
.ring-section > .container{position:relative}
.req{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-16) var(--sp-18);border-radius:var(--r-16);border:1px solid var(--border);background:rgba(255,255,255,0.04)}
.req dt{font-size:var(--fs-15);color:var(--accent-soft)}
.req dd{margin:0;font-size:var(--fs-16);line-height:1.45;font-variant-numeric:tabular-nums;text-wrap:pretty}
.req a{color:var(--text-1);text-decoration:none}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:var(--sp-8) var(--sp-32);padding:var(--sp-18) var(--sp-20);border-radius:var(--r-16);border:1px solid rgba(255,255,255,0.08)}
.info dt{font-size:var(--fs-15);color:var(--accent-soft)}
.info dd{margin:0;grid-column:span 2;font-size:var(--fs-16);line-height:1.55;color:var(--text-2);text-wrap:pretty}
.info dd a{color:var(--text-1);text-underline-offset:4px}

/* ---- инструментарий ---- */
.cosmic{position:relative;overflow:hidden}
.cosmic::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 40% at 15% 20%,rgba(10,60,180,0.45) 0%,rgba(10,60,180,0) 70%),radial-gradient(ellipse 50% 45% at 85% 70%,rgba(60,120,255,0.28) 0%,rgba(60,120,255,0) 70%),radial-gradient(ellipse 40% 30% at 50% 100%,rgba(120,60,200,0.22) 0%,rgba(120,60,200,0) 70%)}
.cosmic::after{content:"";position:absolute;inset:0;pointer-events:none;background:url("/art/bg-stars.svg") center/1280px 900px repeat;opacity:0.8}
.cosmic > .container{position:relative}
.tool{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-20) var(--sp-22);border-radius:var(--r-18);border:1px solid var(--border);box-shadow:var(--shadow-soft)}
.tool:hover{border-color:rgba(157,184,255,0.5)}
.tool--a{background:linear-gradient(160deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02))}
.tool--b{background:linear-gradient(160deg,rgba(10,60,180,0.28),rgba(6,27,79,0.22))}
.tool--c{background:radial-gradient(ellipse at 80% 100%,rgba(108,155,255,0.14),rgba(5,8,26,0.6) 70%)}
.tool--d{background:linear-gradient(200deg,rgba(60,120,255,0.12),rgba(5,8,26,0.7))}
.tool::before{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;border:1px solid rgba(157,184,255,0.18);pointer-events:none}
.tool--a::before{background:radial-gradient(circle at 30% 30%,rgba(157,184,255,0.18),transparent 60%)}
.tool--b::before{background:conic-gradient(from 200deg,rgba(157,184,255,0) 0 75%,rgba(157,184,255,0.35) 100%)}
.tool--d::before{background:radial-gradient(circle,rgba(242,184,75,0.16),transparent 60%)}
.tool-meta{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-8);font-family:var(--font-mono);font-size:var(--fs-15)}
.tool-meta .n{color:var(--accent-soft)} .tool-meta .g{color:var(--text-mute)}
.tool h3{position:relative;z-index:1;font-size:19px;font-weight:600;line-height:var(--lh-card);max-width:calc(100% - 84px)}
.tool p{position:relative;z-index:1;font-size:var(--fs-15);color:var(--text-2);line-height:var(--lh-text);text-wrap:pretty}
.tool .motif{position:absolute;right:14px;top:34px;width:72px;height:54px;pointer-events:none;opacity:0.45}
.tool--plate{border-color:var(--border-accent);background:var(--surface-accent)}
.tool--plate .big{font-size:19px;font-weight:500;color:var(--text-1)}
.tool--plate .small{font-size:var(--fs-16);color:var(--text-2);line-height:1.55}

/* ---- документ (политика) ---- */
.doc{border-radius:var(--r-24);border:1px solid var(--border);background:linear-gradient(160deg,rgba(255,255,255,0.05),rgba(255,255,255,0.01));padding:clamp(28px,4vw,56px) clamp(20px,4vw,56px);display:flex;flex-direction:column;gap:var(--sp-40);font-size:var(--fs-17);line-height:var(--lh-body);color:var(--text-doc)}
.doc section{display:flex;flex-direction:column;gap:var(--sp-14);max-width:760px}
.doc section.wide{max-width:none}
.doc h2{font-size:var(--fs-doc-h2);line-height:1.15;font-weight:800;letter-spacing:-0.02em;color:var(--text-doc-head);margin-bottom:6px;text-wrap:balance}
.doc p,.doc li{text-wrap:pretty}
.doc ul{list-style:disc;padding-left:24px;display:flex;flex-direction:column;gap:var(--sp-8);max-width:760px}
.doc a{color:var(--text-doc-head);text-underline-offset:4px}
.doc-h1{font-size:var(--fs-doc-h1);line-height:1.02;font-weight:800;letter-spacing:-0.03em;max-width:900px;text-wrap:balance}
.doc-date{font-size:var(--fs-lead);color:var(--text-doc-2)}
.table-wrap{overflow-x:auto;border:1px solid rgba(255,255,255,0.12);border-radius:var(--r-12);max-width:100%}
.table-wrap--m{max-width:960px}
table{border-collapse:collapse;width:100%;font-size:var(--fs-15);line-height:var(--lh-text)}
table.w-l{min-width:1100px} table.w-m{min-width:640px}
thead tr{background:var(--surface-table-head)}
th{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--border-table);border-right:1px solid var(--border);font-weight:700;color:var(--text-doc-head)}
td{vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
th:last-child,td:last-child{border-right:0}
td.n{font-weight:700} th.n{width:44px} th.w45{width:45%}

/* ---- 404 ---- */
.nf{position:relative;overflow:hidden;min-height:560px;display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,8vw,112px) var(--pad-x)}
.nf::before{content:"";position:absolute;right:-200px;top:50%;transform:translateY(-50%);width:760px;height:760px;border-radius:50%;background:radial-gradient(circle,rgba(40,100,255,0.35) 0%,rgba(40,100,255,0) 60%);filter:blur(40px);pointer-events:none}
.nf::after{content:"";position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:420px;height:420px;border-radius:50%;border:1px solid rgba(157,184,255,0.22);background:conic-gradient(from 0deg,rgba(157,184,255,0) 0 85%,rgba(157,184,255,0.3) 100%);pointer-events:none}
.nf .container{position:relative;width:100%;display:flex;flex-direction:column;gap:var(--sp-18)}
.nf p{font-size:var(--fs-19);color:var(--text-3);max-width:560px}
.nf a{text-underline-offset:4px}

/* ---- адаптив ---- */
@media (max-width:1024px){
  .article-row--3-2{grid-template-columns:1fr}
  .hero-row .drop-l,.hero-row .drop-xl,.hero-row .lift-l,.hero-row .lift-xl{margin:0}
  .hero-row .card{max-width:none}
  .hero-row .pos-r,.hero-row .pos-c{justify-self:stretch}
}
@media (max-width:768px){
  .site-header{gap:var(--sp-12)}
  .brand{margin-right:0;width:100%}
  .nav{width:100%;justify-content:space-between}
  .nav a{padding:var(--sp-8) var(--sp-10)}
  .area{align-items:start}
  .hero-scene{height:clamp(180px,34vw,260px);margin-top:0}
  .hero-scene img{top:50%;width:min(720px,170vw)}
  .info dd{grid-column:auto}
  .grid--stack{grid-template-columns:1fr 1fr}
}
@media (max-width:390px){
  .nav a{font-size:var(--fs-15);padding:var(--sp-8)}
  .grid--stack,.stages ol{grid-template-columns:1fr}
  .stages ol{grid-template-columns:repeat(2,1fr)}
  .kv--journal > div{grid-template-columns:44px 1fr;grid-auto-rows:auto}
  .kv--journal dd{grid-column:2}
  .fact b{font-size:28px}
}
@media (prefers-reduced-motion:no-preference){
  .hero-scene img{animation:none}
}

/* дополнения при переносе (12.09.2026): единственный inline style пакета вынесен в класс; рамки
   незаполненных значений генератора – в цветах дизайна */
.figure[data-ratio="4-285"]{aspect-ratio:4/2.85}
/* четыре области – всегда одной полосой на широком экране (решение владельца 12.09.2026): 4 → 2 → 1 колонка */
.grid--areas{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.grid--areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid--areas{grid-template-columns:minmax(0,1fr)}}
/* плитки областей и плашка фактов – как в макете: плитки одной высоты с воздухом снизу, факты в четыре колонки, цифры крупнее */
.grid--areas .tile{min-height:250px}
.plate--facts{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:var(--sp-32,32px)}
.fact b{font-size:36px}
@media (max-width:1024px){.grid--areas .tile{min-height:0}.plate--facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.plate--facts{grid-template-columns:minmax(0,1fr)}}
/* ссылки подвала без подчёркивания (почта, «Все реквизиты»), как остальные разделы; подчёркивание – только под курсором */
.footer-col a{text-decoration:none}.footer-col a:hover{text-decoration:underline}
/* одна ширина содержимого на всех страницах (12.09.2026): у секций-контейнеров содержимое лежит внутри бокового
   отступа (1180 − 2·отступ), а у вложенных .container отступа не было и блоки выходили шире. Выравниваем вложенные */
.section>.container,.section--s>.container,.section--head>.container,.ring-section>.container{max-width:calc(var(--container) - 2 * var(--pad-x))}
/* анимация (animation.md пакета, 12.09.2026): карточки первого экрана парят, столбики копий дышат (и на «Экспертизе»),
   кольца «О нас» и 404 вращаются; корабли по орбитам, свечение и блик – внутри /art/hero-orbit-live.svg.
   Всё выключено при prefers-reduced-motion: reduce (тогда и сфера статичная – через <picture>) */
@media (prefers-reduced-motion:no-preference){
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  /* фазы карточек – как в макете (задержки 2 / 1.5 / 4 / 3 с), но через отрицательные задержки: карточка с backdrop-filter
     при старте анимации переезжает на отдельный слой, и запуск посреди просмотра виден как мигание; will-change
     закрепляет слой с первого кадра */
  .hero-row .card,.bars li{will-change:transform}
  /* мигание карточек на первом экране: backdrop-filter поверх живой сферы пересчитывает размытие каждый кадр
     и мерцает; у парящих карточек размытие снято, фон – полупрозрачный плотный, без потери вида */
  .hero-row .card{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(160deg,rgba(28,34,64,0.9),rgba(12,16,38,0.9))}
  .hero-row .card{animation:float 9s ease-in-out infinite}
  .hero-row--top>:nth-child(2) .card{animation-duration:12s;animation-delay:-10s}
  .hero-row--bottom>:nth-child(1) .card{animation-duration:11s;animation-delay:-9.5s}
  .hero-row--bottom>:nth-child(2) .card{animation-duration:14s;animation-delay:-10s}
  .hero-row--bottom>:nth-child(3) .card{animation-duration:13s;animation-delay:-10s}
  @keyframes bar{0%,100%{transform:scaleY(0.4)}50%{transform:scaleY(1)}}
  .bars li{transform-origin:bottom;animation:bar 6s ease-in-out infinite}
  .bars li:nth-child(4n+2){animation-duration:7s}.bars li:nth-child(4n+3){animation-duration:8s}.bars li:nth-child(4n+4){animation-duration:9s}
  /* фаза столбика i – как в макете (задержка i×0.3 с), но через отрицательную задержку: без стартового прыжка
     с полной высоты в первый кадр (0.4) в первые четыре секунды после открытия страницы */
  .bars li:nth-child(1){animation-delay:-6.0s}
  .bars li:nth-child(2){animation-delay:-6.7s}
  .bars li:nth-child(3){animation-delay:-7.4s}
  .bars li:nth-child(4){animation-delay:-8.1s}
  .bars li:nth-child(5){animation-delay:-4.8s}
  .bars li:nth-child(6){animation-delay:-5.5s}
  .bars li:nth-child(7){animation-delay:-6.2s}
  .bars li:nth-child(8){animation-delay:-6.9s}
  .bars li:nth-child(9){animation-delay:-3.6s}
  .bars li:nth-child(10){animation-delay:-4.3s}
  .bars li:nth-child(11){animation-delay:-5.0s}
  .bars li:nth-child(12){animation-delay:-5.7s}
  .bars li:nth-child(13){animation-delay:-2.4s}
  .bars li:nth-child(14){animation-delay:-3.1s}
  @keyframes spin{to{transform:rotate(360deg)}}
  .ring-section::after{animation:spin 80s linear infinite}
  @keyframes spin-nf{from{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}
  .nf::after{animation:spin-nf 70s linear infinite}
}
/* меню из пяти пунктов на узком экране переносится на две строки – пункты по центру, а не растянуты по краям */
@media (max-width:768px){.nav{justify-content:center}}
/* карточки инструментария – одной высоты в ряду (владелец, 12.09.2026) */
.grid--stack{align-items:stretch}
/* первая полоса внутренних страниц: текст по центру по высоте – сверху и снизу одинаковый отступ (владелец, 12.09.2026).
   Заголовок: было 72 сверху и 16 + 40 снизу; теперь снизу столько же, сколько сверху, а отступ следующей секции – в счёт этого.
   Политика: шапка внутри обычной секции (128 сверху) – снизу вдвое меньше, 64 (владелец, 12.09.2026) */
.section--head{padding-bottom:clamp(40px,5vw,72px)}
.section--head+.section--flush-top{padding-top:0}
main>.section--flush-bottom:first-child{padding-bottom:calc(var(--pad-section) / 2 - var(--pad-block))}
/* «Подход» и «Проекты»: между карточками и следующим разделом статьи – один и тот же отступ --pad-section-s
   (56…96 px) вместо наезда макета на «Подходе» и двойного отступа на «Проектах» (владелец, 12.09.2026) */
.glow-section.section--flush-top{padding-bottom:0}
#future{margin-top:0;padding-top:var(--pad-section-s)}
.section:has(+#research){padding-bottom:0}
#research{padding-top:var(--pad-section-s)}
/* политика: большая таблица целей на широком экране умещается в документ без прокрутки (владелец, 12.09.2026):
   на экранах от 1100 px снимаем минимальную ширину 1100 и чуть уплотняем ячейки; на узких – прокрутка, как в макете */
@media (min-width:1100px){
  table.w-l{min-width:0;table-layout:fixed}
  table.w-l th,table.w-l td{padding:10px 12px}
  table.w-l th.n{width:34px}
  table.w-l th:nth-child(2){width:15%}table.w-l th:nth-child(3){width:17%}table.w-l th:nth-child(4){width:24%}
  table.w-l th:nth-child(5){width:23%}
}
/* звёзды на всех страницах (владелец, 12.09.2026): плитка bg-stars.svg (tools/gen_stars.py, точки разного размера)
   подложена под всю страницу; первый экран и «Инструментарий» рисуют её сами поверх своих градиентов */
body{position:relative;isolation:isolate}
body::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("/art/bg-stars.svg") center top/1280px 900px repeat}
/* «О нас»: между первой полосой и «Регистрационными данными» – вдвое меньше (было 128 + 40 = 168, стало 84);
   перед подвалом на всех страницах – в полтора раза меньше (было 128, стало ≈ 85) (владелец, 12.09.2026) */
.ring-section+.section--flush-top{padding-top:0}
.ring-section{padding-bottom:calc(var(--pad-section) / 2 + var(--pad-block) / 2)}
main>section:last-child{padding-bottom:calc(var(--pad-section) / 1.5)}
/* журнал вызовов на «Экспертизе»: третий статус «утверждено» – зелёный (владелец, 12.09.2026); контраст с карточкой проверен */
:root{--success:#8FE3B4}
.kv--journal dd.approved{color:var(--success)}
/* «О нас»: между плитками реквизитов и блоком «Работы и услуги» – втрое больше (14 → 42 px) (владелец, 12.09.2026) */
#requisites>.grid--req{margin-bottom:calc(2 * var(--sp-14))}
/* наведение: только цвет рамки, плавно (рекомендация animation.md) */
.tile,.tool,.step,.proj{transition:border-color 150ms ease}
.ph{display:inline-block;padding:0 6px;border:2px solid #F2B84B;border-radius:6px;background:rgba(242,184,75,0.12);color:#FFE2A8;font:inherit}