/* ══ FED.KZ · расширение страницы ═══════════════════════════════════════════
   Сегменты аудитории, роли, инструменты, генеративная графика и эффекты.
   Токены (--accent-rgb, --line-rgb, --dev-rgb …) заданы в index.html; здесь
   они только используются. Порядок секций совпадает с порядком на странице. */

/* ── сегмент аудитории ─────────────────────────────────────────────────── */
:root{
  --seg-rgb: var(--accent-rgb);
  --seg: rgb(var(--seg-rgb));
  --ease: cubic-bezier(.2,.8,.2,1);
}
:root[data-seg="startup"]{ --seg-rgb: var(--signal-rgb) }
:root[data-seg="dev"]{ --seg-rgb: var(--dev-rgb) }

html{ scroll-behavior:smooth }
section[id]{ scroll-margin-top:56px }
.sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.linklike{
  background:none; border:0; padding:0; font:inherit; color:var(--seg); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
.linklike:hover{ text-decoration-thickness:2px }

/* .btn задаёт свой display:inline-flex, поэтому голого [hidden] недостаточно
   (правило автора всегда перебивает user-agent-стиль, вне зависимости от
   специфичности) — на этом стояли скрытые кнопки-входы в раздел «Инструменты». */
.btn[hidden]{ display:none !important }

/* Тексты, привязанные к сегменту: показывается только «свой» вариант. */
html[data-seg="business"] [data-seg-copy]:not([data-seg-copy~="business"]),
html[data-seg="startup"] [data-seg-copy]:not([data-seg-copy~="startup"]),
html[data-seg="dev"] [data-seg-copy]:not([data-seg-copy~="dev"]){ display:none !important }
[data-seg-copy]{ animation:segIn .5s var(--ease) both }
@keyframes segIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* Лид: варианты лежат в одной ячейке, поэтому высота героя не прыгает. */
.lede-stack{ display:grid }
.lede-stack > [data-seg-swap]{
  grid-area:1/1; transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
html[data-seg="business"] .lede-stack > [data-seg-swap]:not([data-seg-swap="business"]),
html[data-seg="startup"] .lede-stack > [data-seg-swap]:not([data-seg-swap="startup"]),
html[data-seg="dev"] .lede-stack > [data-seg-swap]:not([data-seg-swap="dev"]){
  visibility:hidden; opacity:0; transform:translateY(10px); pointer-events:none;
}

/* Подсветка релевантного: остальное приглушается, но остаётся доступным. */
[data-for]{ transition:opacity .35s, filter .35s }
html:not([data-focus="off"])[data-seg="business"] [data-for]:not([data-for~="business"]),
html:not([data-focus="off"])[data-seg="startup"] [data-for]:not([data-for~="startup"]),
html:not([data-focus="off"])[data-seg="dev"] [data-for]:not([data-for~="dev"]){ opacity:.4 }
[data-for]:hover, [data-for]:focus-within{ opacity:1 !important }
/* Карточка, на которую ведёт прямая ссылка (#startups из поиска или ответа ИИ), не приглушается. */
[data-for]:target{ opacity:1 !important }
.seg-note{
  display:block; margin-top:12px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.02em; color:var(--muted);
}
.seg-note b{ color:var(--seg); font-weight:500 }

/* ── навигация ─────────────────────────────────────────────────────────── */
.nav-progress{ position:absolute; left:0; right:0; bottom:-1px; height:2px; pointer-events:none }
.nav-progress i{ display:block; height:100%; background:var(--seg); transform-origin:0 50%; transform:scaleX(0) }
.nav-links a{ position:relative; padding-block:6px }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--seg);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .35s var(--ease);
}
.nav-links a[aria-current="true"]{ color:var(--ink) }
.nav-links a[aria-current="true"]::after, .nav-links a:hover::after{ transform:scaleX(1) }
.nav-cta{ color:var(--ink) }
.nav-cta .long{ display:inline }
.nav-menu{
  display:none; position:relative; width:40px; height:36px; flex:none; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r); background:transparent;
}
.nav-menu i{
  position:absolute; left:11px; right:11px; height:1.5px; background:var(--ink);
  transition:transform .3s var(--ease), top .3s var(--ease);
}
.nav-menu i:first-child{ top:12px }
.nav-menu i:last-child{ top:21px }
.nav.is-open .nav-menu i:first-child{ top:16px; transform:rotate(45deg) }
.nav.is-open .nav-menu i:last-child{ top:16px; transform:rotate(-45deg) }
/* Пункты меню не переносятся на две строки; восемь пунктов помещаются в ряд только от ~1040px. */
.nav-links a, .nav-cta{ white-space:nowrap }
@media (max-width:1040px){
  .nav-in{ gap:12px }
  .nav .nav-cta{ margin-left:auto }
  .nav-menu{ display:block }
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0; margin:0;
    flex-direction:column; gap:0; padding:6px var(--gut) 14px;
    background:var(--bg); border-bottom:1px solid var(--line);
  }
  .nav.is-open .nav-links{ display:flex; animation:segIn .3s var(--ease) both }
  .nav-links a{ padding:13px 0; font-size:15px; color:var(--ink); border-bottom:1px solid var(--line) }
  .nav-links a:last-child{ border-bottom:0 }
  .nav-links a::after{ display:none }
}
@media (max-width:420px){ .nav-cta .long{ display:none } }

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero-shell{ position:relative; isolation:isolate; overflow:hidden }
.hero-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  -webkit-mask-image:radial-gradient(90% 90% at 72% 42%, #000 22%, transparent 78%);
  mask-image:radial-gradient(90% 90% at 72% 42%, #000 22%, transparent 78%);
}
.hero-bg::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgb(var(--ink-rgb) / .2) 1px, transparent 1.5px);
  background-size:26px 26px;
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(520px circle at var(--mx,72%) var(--my,38%), rgb(var(--seg-rgb) / .13), transparent 65%);
}
.hero-bg canvas{ position:absolute; inset:0; width:100%; height:100%; display:block }
@media (max-width:860px){
  .hero-bg{
    -webkit-mask-image:radial-gradient(130% 60% at 50% 20%, #000 22%, transparent 85%);
    mask-image:radial-gradient(130% 60% at 50% 20%, #000 22%, transparent 85%);
  }
}

/* Строка заголовка обрезается только по вертикали (для подъёма); по горизонтали слово не режется. */
.hero h1 .ln{ display:block; clip-path:inset(0 -100vw); padding:.07em 0 .11em; margin:-.07em 0 -.11em }
.hero h1 .ln > span{
  display:inline-block; animation:lnUp 1s var(--ease) both;
  animation-delay:calc(var(--i,0) * 90ms + 80ms);
}
@keyframes lnUp{ from{ transform:translateY(108%) } to{ transform:none } }

.roles-strip{
  display:flex; flex-wrap:wrap; margin:16px 0 0; padding:0; list-style:none;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
}
.roles-strip li{ display:flex; align-items:center }
.roles-strip li:not(:last-child)::after{ content:"/"; margin:0 6px; color:var(--muted); opacity:.45 }
.roles-strip a{
  display:block; position:relative; padding:4px 1px; text-decoration:none; color:var(--muted);
  transition:color .3s;
}
.roles-strip a::after{
  content:""; position:absolute; left:1px; right:1px; bottom:0; height:1px; background:var(--seg);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .45s var(--ease);
}
.roles-strip a.is-on, .roles-strip a:hover, .roles-strip a:focus-visible{ color:var(--ink) }
.roles-strip a.is-on::after, .roles-strip a:hover::after{ transform:scaleX(1) }

.seg-row{ display:flex; align-items:center; gap:12px; margin-top:22px }
.seg-q{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.seg{
  position:relative; margin:0; padding:3px; min-width:0; border:1px solid var(--line); border-radius:var(--r);
  display:grid; grid-template-columns:repeat(3, 1fr);
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  --si:0;
}
html[data-seg="startup"] .seg{ --si:1 }
html[data-seg="dev"] .seg{ --si:2 }
.seg label{ position:relative; z-index:1; display:block; cursor:pointer }
.seg input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer }
.seg label span{
  display:block; padding:9px 18px; text-align:center; white-space:nowrap; border-radius:2px;
  font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--muted);
  transition:color .25s;
}
.seg label:hover span{ color:var(--ink) }
html[data-seg="business"] .seg label:nth-of-type(1) span,
html[data-seg="startup"] .seg label:nth-of-type(2) span,
html[data-seg="dev"] .seg label:nth-of-type(3) span{ color:rgb(var(--surface-rgb)) }
.seg input:focus-visible + span{ outline:2px solid var(--seg); outline-offset:3px }
.seg-ind{
  position:absolute; z-index:0; top:3px; bottom:3px; left:3px; width:calc((100% - 6px) / 3);
  border-radius:2px; background:var(--seg); pointer-events:none;
  transform:translateX(calc(var(--si) * 100%));
  transition:transform .5s var(--ease), background-color .3s;
}
@media (max-width:520px){
  .seg-row{ flex-direction:column; align-items:stretch; gap:8px }
  .seg-q{ display:none }
  .seg label span{ padding:10px 6px }
}

/* Каскад появления элементов героя после названия. */
.hero > div > .eyebrow{ --h:0 }
.hero > div > .roles-strip{ --h:3 }
.hero > div > .seg-row{ --h:4 }
.hero > div > .lede-stack{ --h:5 }
.hero > div > .hero-cta{ --h:6 }
.hero > div > .facts{ --h:7 }
.hero > div > :is(.eyebrow, .roles-strip, .seg-row, .lede-stack, .hero-cta, .facts){
  animation:segIn .9s var(--ease) both; animation-delay:calc(var(--h,0) * 80ms + 120ms);
}

/* ── появление блоков и подсветка под курсором ─────────────────────────── */
.js-on [data-reveal]{
  opacity:0; transform:translateY(16px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay:calc(var(--d,0) * 70ms);
}
.js-on [data-reveal].is-in{ opacity:1; transform:none }
.spot{ position:relative }
.spot::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgb(var(--seg-rgb) / .11), transparent 62%);
}
.spot:hover::after{ opacity:1 }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .js-on [data-reveal]{ opacity:1; transform:none; transition:none }
  .hero h1 .ln > span{ animation:none }
}

/* ── роли: орбита и панель ─────────────────────────────────────────────── */
.roles-grid{
  display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr);
  gap:clamp(24px,5vw,72px); align-items:center;
}
.orbit{ position:relative; width:100%; max-width:440px; aspect-ratio:1; margin-inline:auto; user-select:none }
.orbit .ring{
  position:absolute; inset:0; margin:auto; border-radius:50%; border:1px solid var(--line);
  animation:spin var(--t,48s) linear infinite; transition:border-color .45s;
}
.orbit .ring::after{
  content:""; position:absolute; top:-2.5px; left:50%; width:5px; height:5px; margin-left:-2.5px;
  border-radius:50%; background:var(--muted); opacity:.5; transition:background-color .3s, opacity .3s, box-shadow .3s;
}
.orbit .ring.is-on{ border-color:rgb(var(--seg-rgb) / .6) }
.orbit .ring.is-on::after{ background:var(--seg); opacity:1; box-shadow:0 0 0 4px rgb(var(--seg-rgb) / .18) }
@keyframes spin{ to{ rotate:360deg } }
.orbit .core{
  position:absolute; inset:0; margin:auto; width:15%; height:15%; border-radius:50%;
  display:grid; place-items:center; text-align:center; padding:4px;
  font:500 8.5px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); background:radial-gradient(circle, rgb(var(--seg-rgb) / .24), transparent 74%);
}
.orbit .core::before{
  content:""; position:absolute; inset:-34%; border-radius:50%;
  border:1px dashed rgb(var(--seg-rgb) / .3); animation:spin 70s linear infinite reverse;
}
.orbit .beam{
  position:absolute; left:50%; top:50%; height:1px; transform-origin:0 50%; pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, var(--seg) 100%); opacity:.85;
  transition:width .6s var(--ease), transform .6s var(--ease);
}
.orbit .sat{
  position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; padding:0; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  font:500 10px var(--mono); display:grid; place-items:center; cursor:pointer;
  transition:transform .4s var(--ease), background-color .3s, color .3s, border-color .3s, box-shadow .3s;
}
.orbit .sat:hover{ border-color:var(--seg); color:var(--seg) }
.orbit .sat.is-on{
  transform:scale(1.2); background:var(--seg); color:rgb(var(--surface-rgb)); border-color:var(--seg);
  box-shadow:0 0 0 6px rgb(var(--seg-rgb) / .16), 0 0 28px rgb(var(--seg-rgb) / .38); z-index:2;
}
.orbit .sat-label{
  position:absolute; top:50%; left:calc(100% + 12px); transform:translateY(-50%); white-space:nowrap;
  padding:4px 9px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  color:var(--ink); font:500 10.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; pointer-events:none;
  opacity:0; transition:opacity .3s;
}
.orbit .sat[data-side="l"] .sat-label{ left:auto; right:calc(100% + 12px) }
.orbit .sat.is-on .sat-label{ opacity:1 }

.roles-body{ min-width:0 }
.role-tabs{ display:flex; flex-wrap:wrap; gap:6px }
.role-tab{
  font:500 11.5px var(--mono); padding:7px 13px; border:1px solid var(--line); border-radius:99px;
  background:transparent; color:var(--muted); cursor:pointer;
  transition:border-color .25s, color .25s, background-color .25s, opacity .35s;
}
.role-tab:hover{ color:var(--ink); border-color:var(--muted) }
.role-tab[aria-selected="true"]{ border-color:var(--seg); color:var(--seg); background:rgb(var(--seg-rgb) / .08) }
.role-panels{ margin-top:16px }
.roles-live .role-panel:not(.is-active){ display:none }
.role-panel{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:clamp(20px,3vw,32px);
}
.role-panel + .role-panel{ margin-top:14px }
.roles-live .role-panel + .role-panel{ margin-top:0 }
.role-panel.is-active{ animation:segIn .5s var(--ease) both }
.role-k{ font:500 10.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--seg) }
.role-panel h3{ margin-top:10px; font-size:clamp(20px,2.4vw,26px) }
.role-when{
  margin-top:12px; font-size:15px; color:var(--muted); font-style:italic;
  padding-left:12px; border-left:2px solid var(--line);
}
.role-cols{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(18px,3vw,36px); margin-top:22px }
.role-cols h4{
  margin:0 0 10px; font:500 10.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.role-cols li{ position:relative; padding-left:18px; font-size:14.5px; line-height:1.5 }
.role-cols li + li{ margin-top:8px }
.role-cols li::before{ content:"→"; position:absolute; left:0; color:var(--seg); font-family:var(--mono) }
.role-meta{
  margin-top:22px; padding-top:14px; border-top:1px dashed var(--line);
  font:500 11.5px/1.5 var(--mono); letter-spacing:.02em; color:var(--accent);
}
.role-act{ margin-top:18px }
@media (max-width:900px){
  .roles-grid{ grid-template-columns:1fr }
  .role-cols{ grid-template-columns:1fr }
  .orbit{ max-width:340px }
}

/* ── инструменты ───────────────────────────────────────────────────────── */
.lab-tabs{
  display:grid; grid-template-columns:repeat(3, 1fr); border:1px solid var(--line);
  border-radius:var(--r) var(--r) 0 0; background:var(--surface); overflow:hidden;
}
.lab-tab{
  position:relative; display:flex; flex-direction:column; gap:5px; text-align:left;
  padding:18px 20px 20px; border:0; border-right:1px solid var(--line); background:transparent;
  color:var(--ink); font:inherit; cursor:pointer; transition:background-color .25s, opacity .35s;
}
.lab-tab:last-child{ border-right:0 }
.lab-tab::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--seg);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .5s var(--ease);
}
.lab-tab[aria-selected="true"]{ background:color-mix(in srgb, var(--seg) 6%, var(--surface)) }
.lab-tab[aria-selected="true"]::after{ transform:scaleX(1) }
.lab-tab:hover{ background:color-mix(in srgb, var(--seg) 4%, var(--surface)) }
.lt-k{ font:500 10.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--seg) }
.lt-t{ font:500 17px/1.25 var(--display); letter-spacing:-.02em }
.lt-d{ font-size:13px; line-height:1.4; color:var(--muted) }
@media (max-width:760px){
  .lab-tabs{ grid-template-columns:1fr }
  .lab-tab{ border-right:0; border-bottom:1px solid var(--line); padding:14px 16px }
  .lab-tab:last-child{ border-bottom:0 }
  .lt-d{ display:none }
}
.tool{
  border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r) var(--r);
  background:var(--surface); padding:clamp(20px,3.4vw,40px); overflow:hidden;
}
.tool[hidden]{ display:none }
.tool:not([hidden]){ animation:segIn .5s var(--ease) both }
.tool-lead{ font-size:14.5px; color:var(--muted); max-width:58ch }
.tool-note{ margin-top:8px; font-size:13.5px; color:var(--muted) }
.tool-fine{ margin-top:14px; font:400 11.5px/1.55 var(--mono); color:var(--muted) }

/* калькулятор */
.calc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(24px,4vw,56px); align-items:start }
.calc-in .fld{ margin-top:22px }
.fld-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px }
.fld label{ font-size:14px; font-weight:600; line-height:1.35 }
.fld output{ font:500 14px var(--mono); color:var(--seg); white-space:nowrap }
.fld-hint{ margin-top:8px; font-size:12.5px; color:var(--muted) }
.rng{ -webkit-appearance:none; appearance:none; display:block; width:100%; height:22px; margin:0; background:transparent; cursor:pointer; --p:50% }
.rng:focus-visible{ outline:none }
.rng::-webkit-slider-runnable-track{ height:3px; border-radius:2px; background:linear-gradient(90deg, var(--seg) var(--p), var(--line) var(--p)) }
.rng::-moz-range-track{ height:3px; border-radius:2px; background:var(--line) }
.rng::-moz-range-progress{ height:3px; border-radius:2px; background:var(--seg) }
.rng::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; margin-top:-6.5px; border-radius:50%;
  background:var(--surface); border:2px solid var(--seg); box-shadow:0 0 0 0 rgb(var(--seg-rgb) / .2); transition:box-shadow .25s;
}
.rng::-moz-range-thumb{ width:12px; height:12px; border-radius:50%; background:var(--surface); border:2px solid var(--seg) }
.rng:hover::-webkit-slider-thumb, .rng:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 6px rgb(var(--seg-rgb) / .18) }
.fld .num, .brief input[type="text"], .brief textarea{
  display:block; width:100%; padding:11px 13px; color:var(--ink); background:var(--sunk);
  border:1px solid var(--line); border-radius:var(--r); transition:border-color .25s;
}
.fld .num{ font:500 14px var(--mono); text-align:left }
.brief input[type="text"], .brief textarea{ font:14.5px/1.5 var(--body); resize:vertical }
.fld .num:focus, .brief input[type="text"]:focus, .brief textarea:focus{ outline:none; border-color:var(--seg) }
.calc-out{ padding:clamp(18px,2.4vw,28px); border:1px solid var(--line); border-radius:var(--r); background:var(--sunk) }
.big{ display:flex; flex-direction:column; gap:8px }
.big span{ font:700 clamp(30px,4.4vw,46px)/1 var(--display); letter-spacing:-.03em; word-break:break-word }
.big small{ font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.kv{ margin-top:18px; border-top:1px solid var(--line) }
.kv li{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px dashed var(--line); font-size:14px; color:var(--muted) }
.kv li b{ color:var(--ink); font-family:var(--mono); font-weight:500; text-align:right }
.chart{ margin:18px 0 0 }
.chart svg{ display:block; width:100%; height:auto; overflow:visible }
.ch-grid{ stroke:rgb(var(--line-rgb)); stroke-width:1 }
.ch-axis{ fill:var(--muted); font:400 9px var(--mono) }
.ch-a{ fill:none; stroke:rgb(var(--ink-rgb) / .5); stroke-width:1.6 }
.ch-b{ fill:none; stroke:var(--seg); stroke-width:2 }
.ch-gap{ fill:rgb(var(--seg-rgb) / .14); stroke:none }
.ch-dot{ fill:var(--seg) }
.ch-lbl{ fill:var(--ink); font:500 9.5px var(--mono); paint-order:stroke; stroke:var(--sunk); stroke-width:3px; stroke-linejoin:round }
.ch-lbl.dim{ fill:var(--muted) }
@media (max-width:900px){ .calc{ grid-template-columns:1fr } }

/* технический чек-ап */
.check{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start }
.check-mode{
  display:inline-flex; margin:18px 0 0; padding:3px; min-width:0; border:1px solid var(--line);
  border-radius:var(--r); background:var(--sunk); flex-wrap:wrap;
}
.check-mode label{ position:relative; display:block; cursor:pointer }
.check-mode input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer }
.check-mode span{ display:block; padding:8px 14px; font:500 12px var(--mono); color:var(--muted); border-radius:2px; transition:background-color .25s, color .25s }
.check-mode input:checked + span{ background:var(--seg); color:rgb(var(--surface-rgb)) }
.check-mode input:focus-visible + span{ outline:2px solid var(--seg); outline-offset:2px }
.cq-axis{ margin-top:26px; padding-bottom:8px; border-bottom:1px solid var(--line); font:500 10.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--seg) }
.cq{ padding:14px 0; margin:0; min-width:0; border:0; border-bottom:1px dashed var(--line) }
.cq legend{ float:left; width:100%; padding:0; font-size:14.5px; line-height:1.45 }
.cq-opts{ clear:both; display:flex; flex-wrap:wrap; gap:6px; padding-top:10px }
.cq-opts label{ position:relative }
.cq-opts input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer }
.cq-opts span{
  display:block; padding:6px 14px; font:500 12px var(--mono); border:1px solid var(--line);
  border-radius:99px; color:var(--muted); transition:background-color .25s, color .25s, border-color .25s;
}
.cq-opts label:hover span{ border-color:var(--muted); color:var(--ink) }
.cq-opts input:checked + span{ background:var(--seg); border-color:var(--seg); color:rgb(var(--surface-rgb)) }
.cq-opts input:focus-visible + span{ outline:2px solid var(--seg); outline-offset:2px }
.check-out{ position:sticky; top:84px; padding:clamp(18px,2.4vw,28px); border:1px solid var(--line); border-radius:var(--r); background:var(--sunk) }
.radar{ margin:0 }
.radar svg{ display:block; width:100%; max-width:400px; height:auto; margin-inline:auto; overflow:visible }
.rd-ring{ fill:none; stroke:rgb(var(--line-rgb)); stroke-width:1 }
.rd-axis{ stroke:rgb(var(--line-rgb)); stroke-width:1 }
.rd-area{ fill:rgb(var(--seg-rgb) / .2); stroke:var(--seg); stroke-width:2; stroke-linejoin:round }
.rd-dot{ fill:var(--seg) }
.rd-lbl{ fill:var(--muted); font:500 9.5px var(--mono); letter-spacing:.04em }
.rd-lbl.weak{ fill:var(--ink) }
.check-score{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin-top:6px }
.check-score b{ font:700 clamp(34px,4vw,46px)/1 var(--display); letter-spacing:-.03em }
.check-score > span{ font:500 11px var(--mono); letter-spacing:.06em; color:var(--muted) }
.check-verdict{ margin-top:10px; font-size:15px; font-weight:600; line-height:1.4 }
.check-tips{ margin-top:6px }
.check-tips li{ position:relative; margin-top:12px; padding-left:16px; font-size:14px; line-height:1.5; color:var(--muted) }
.check-tips li::before{ content:"→"; position:absolute; left:0; color:var(--seg); font-family:var(--mono) }
.check-tips b{ color:var(--ink); font-weight:600 }
.check-out .btn{ margin-top:18px }
@media (max-width:900px){ .check{ grid-template-columns:1fr } .check-out{ position:static } }

/* терминал */
.term-wrap{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:clamp(20px,3vw,40px); align-items:start }
.term{
  border:1px solid #232b3b; border-radius:var(--r); background:#0b0e14; color:#d7dde9; overflow:hidden;
  font:13px/1.6 var(--mono); box-shadow:0 24px 50px -30px rgb(0 0 0 / .65); transition:border-color .3s;
}
.term:focus-within{ border-color:rgb(var(--seg-rgb) / .7) }
.term-bar{ display:flex; align-items:center; gap:6px; padding:9px 13px; background:#121722; border-bottom:1px solid #232b3b; color:#7d879c; font-size:11px }
.term-bar i{ width:9px; height:9px; border-radius:50%; background:#2b3448 }
.term-bar span{ margin-left:8px }
.term-log{ height:clamp(260px,42vh,380px); overflow-y:auto; padding:14px 16px; white-space:pre-wrap; word-break:break-word; scrollbar-width:thin }
.term-log:focus-visible{ outline:2px solid var(--seg); outline-offset:-2px }
.term-log .t-cmd{ color:#eef2fb }
.term-log .t-cmd::before{ content:"guest@fed.kz:~$ "; color:#63b9ff }
.term-log .t-out{ color:#a9b3c7 }
.term-log .t-hi{ color:#63b9ff }
.term-log .t-err{ color:#ff9a7a }
.term-log a{ color:#63b9ff }
.term-line{ display:flex; align-items:center; gap:8px; margin:0; padding:10px 16px; border-top:1px solid #232b3b; background:#0b0e14 }
.ps1{ color:#63b9ff; white-space:nowrap }
.term-line input{ flex:1; min-width:0; padding:0; background:transparent; border:0; color:#eef2fb; font:inherit; caret-color:#63b9ff }
.term-line input::placeholder{ color:#4d566b }
.term-line input:focus{ outline:none }
.term-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px }
.term-chips button{
  padding:8px 13px; font:500 12px var(--mono); color:var(--ink); background:transparent;
  border:1px solid var(--line); border-radius:var(--r); cursor:pointer; transition:border-color .25s, color .25s;
}
.term-chips button:hover{ border-color:var(--seg); color:var(--seg) }
@media (max-width:900px){ .term-wrap{ grid-template-columns:1fr } }

/* ── метод: шаги с прогрессом ──────────────────────────────────────────── */
.step{ cursor:default }
.step h3{ transition:color .4s }
.step::before{ transition:background-color .4s, border-color .4s, box-shadow .4s }
.step .dl{
  margin-top:12px; font:500 10.5px/1.45 var(--mono); letter-spacing:.03em; color:var(--accent);
  opacity:.55; transition:opacity .4s;
}
.step .dl::before{ content:"→ "; }
.step.is-on .dl, .step:hover .dl{ opacity:1 }
.step.is-on h3{ color:var(--seg) }
.step.is-on::before{ background:var(--seg); border-color:var(--seg); box-shadow:0 0 0 4px rgb(var(--seg-rgb) / .16) }
.rail.is-live .runner{ animation:none; left:calc(var(--rx,10%) - 3.5px); transition:left .9s var(--ease) }
.rail.is-live::after{
  content:""; position:absolute; left:10%; top:14px; height:1px; background:var(--seg);
  width:max(0px, calc(var(--rx,10%) - 10%)); transition:width .9s var(--ease);
}
@media (max-width:760px){
  .rail.is-live .runner{ left:1px; top:calc(var(--ry,8px) - 3.5px); transition:top .9s var(--ease) }
  .rail.is-live::after{
    left:4px; top:8px; width:1px; height:max(0px, calc(var(--ry,8px) - 8px)); transition:height .9s var(--ease);
  }
}

/* ── проекты: флагман и модули ─────────────────────────────────────────── */
.flagship{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(20px,4vw,56px); align-items:center;
  margin-bottom:16px; padding:clamp(22px,3.4vw,40px); overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
}
.flagship > *{ min-width:0 }
.flagship .proj-top{ flex-wrap:wrap; gap:8px 12px }
.flag-txt .proj-top h3{ font-size:clamp(24px,3vw,34px) }
.flag-txt p{ margin-top:14px; font-size:15px; color:var(--muted) }
.flag-txt .meta{
  margin-top:18px; padding-top:14px; border-top:1px dashed var(--line);
  font:400 11px var(--mono); letter-spacing:.02em; color:var(--muted);
}
.flag-links{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:16px; font:500 12px var(--mono) }
.flag-links a{ color:var(--seg); text-decoration:none }
.flag-links a:hover{ text-decoration:underline; text-underline-offset:3px }
.modmap{ width:100%; max-width:480px; margin-inline:auto }
.modmap-cap{ margin-bottom:10px; text-align:center; font:500 10.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.modlist{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px }
.modlist li{ padding:5px 11px; font:500 11px var(--mono); color:var(--muted); border:1px solid var(--line); border-radius:99px }
.modmap.is-live .modlist{ display:none }
.modring{ position:relative; width:100%; aspect-ratio:1 }
.modring::before{ content:""; position:absolute; inset:9%; border-radius:50%; border:1px dashed var(--line) }
.modcore{
  position:absolute; z-index:2; left:50%; top:50%; width:22%; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; display:grid; place-items:center; text-align:center;
  font:700 clamp(11px,1.8vw,15px)/1.1 var(--display); letter-spacing:-.02em;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:0 0 calc(var(--n,0) * 3px) rgb(var(--seg-rgb) / .5); transition:box-shadow .5s, border-color .4s;
}
.modcore.has-n{ border-color:var(--seg) }
.modspoke{
  position:absolute; z-index:1; left:50%; top:50%; height:1px; transform-origin:0 50%;
  background:var(--line); transition:background-color .35s;
}
.modspoke.is-on{ background:linear-gradient(90deg, rgb(var(--seg-rgb) / .25), var(--seg)) }
.modspoke.is-on::after{
  content:""; position:absolute; top:-2px; left:100%; width:5px; height:5px; margin-left:-5px; border-radius:50%;
  background:var(--seg); animation:spoke 1.8s linear infinite; animation-delay:calc(var(--k,0) * -.3s);
}
@keyframes spoke{ 0%{ left:100%; opacity:0 } 15%{ opacity:1 } 85%{ opacity:1 } 100%{ left:0; opacity:0 } }
.mod{
  position:absolute; z-index:3; transform:translate(-50%,-50%); min-width:64px; padding:6px 10px;
  font:500 11px var(--mono); text-align:center; white-space:nowrap; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); border-radius:99px; cursor:pointer;
  transition:color .3s, border-color .3s, background-color .3s, box-shadow .3s;
}
.mod:hover{ color:var(--ink); border-color:var(--muted) }
.mod[aria-pressed="true"]{
  color:var(--ink); border-color:var(--seg); background:color-mix(in srgb, var(--seg) 12%, var(--surface));
  box-shadow:0 0 18px -4px rgb(var(--seg-rgb) / .6);
}
.mod:focus-visible{ outline:2px solid var(--seg); outline-offset:3px }
.modsum{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 16px; margin-top:8px; font:500 12px var(--mono); color:var(--muted) }
.modsum b{ color:var(--seg); font-weight:500 }
.modsum .btn{ padding:9px 16px; font-size:12px }
@media (max-width:900px){ .flagship{ grid-template-columns:1fr } }
@media (max-width:480px){
  .mod{ min-width:0; padding:5px 7px; font-size:10px }
  .modring{ aspect-ratio:4/5 }
}

.proj-cta{ background:var(--sunk) }
.proj-act{ margin-top:auto; padding-top:6px }

/* Глифы проектов оживают при наведении. */
.proj .glyph svg *{ transform-box:fill-box }
.g-bar{ transform-origin:50% 100% }
.g-node, .g-spin{ transform-origin:50% 50% }
.proj:hover .g-wave{ animation:gPulse 1.5s ease-in-out infinite }
.proj:hover .g-flow{ stroke-dasharray:3 3; animation:gFlow .7s linear infinite }
.proj:hover .g-bar{ animation:gBar 1.7s ease-in-out infinite; animation-delay:calc(var(--k,0) * 130ms) }
.proj:hover .g-line{ stroke-dasharray:140; animation:gDraw 1.3s var(--ease) both }
.proj:hover .g-node{ animation:gNode 1.7s ease-in-out infinite; animation-delay:calc(var(--k,0) * 260ms) }
.proj:hover .g-drop{ animation:gDrop 1.7s var(--ease) infinite }
.proj:hover .g-spin{ animation:gSpin 2.2s linear infinite }
@keyframes gPulse{ 0%,100%{ opacity:.25 } 50%{ opacity:1 } }
@keyframes gFlow{ to{ stroke-dashoffset:-12 } }
@keyframes gBar{ 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(.7) } }
@keyframes gDraw{ from{ stroke-dashoffset:140 } to{ stroke-dashoffset:0 } }
@keyframes gNode{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.22) } }
@keyframes gDrop{ 0%{ transform:translateY(-30px); opacity:0 } 25%{ opacity:.9 } 80%{ transform:none; opacity:.9 } 100%{ opacity:0 } }
@keyframes gSpin{ to{ transform:rotate(360deg) } }

/* ── экспертиза: изометрия слоёв ───────────────────────────────────────── */
.stack-grid{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(20px,4vw,56px); align-items:start;
}
.iso-wrap{ position:sticky; top:84px; width:100%; max-width:480px; margin-inline:auto }
.iso-wrap svg{ display:block; width:100%; height:auto; overflow:visible }
.stack-side{ min-width:0 }
.stack-side .layer{ grid-template-columns:1fr; gap:10px; padding:16px 20px }
.stack-side .layer::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--seg);
  transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease);
}
.stack-side .layer.is-active{ background:color-mix(in srgb, var(--seg) 6%, var(--surface)) }
.stack-side .layer.is-active::before{ transform:scaleY(1) }
.layer-btn{
  padding:0; border:0; background:none; color:inherit; font:inherit; letter-spacing:inherit;
  text-align:left; cursor:pointer;
}
.layer-btn:hover{ color:var(--seg) }
.layer-detail{
  margin-top:14px; padding:16px 20px 18px; min-height:128px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
}
.ld-k{ font:500 10.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--seg) }
.ld-why{ margin-top:8px; font-size:14.5px; line-height:1.55 }
.ld-where{ margin-top:10px; font:400 11.5px/1.5 var(--mono); color:var(--muted) }
.ld-where::before{ content:"Где применено: "; color:var(--accent) }
.ld-where:empty{ display:none }
@media (max-width:900px){
  .stack-grid{ grid-template-columns:1fr }
  .iso-wrap{ position:static; max-width:380px }
}

.iso .plate{ cursor:pointer; transition:transform .6s var(--ease), opacity .45s }
.iso .plate .top{ fill:rgb(var(--surface-rgb) / .8); stroke:rgb(var(--line-rgb)); stroke-width:1; transition:fill .4s, stroke .4s }
.iso .plate .sl{ fill:rgb(var(--sunk-rgb)); stroke:rgb(var(--line-rgb)); stroke-width:1; transition:stroke .4s }
.iso .plate .sr{ fill:rgb(var(--sunk-rgb) / .7); stroke:rgb(var(--line-rgb)); stroke-width:1; transition:stroke .4s }
.iso .plate .gr{ stroke:rgb(var(--line-rgb)); stroke-width:.6; opacity:.75 }
.iso .pt{ fill:rgb(var(--seg-rgb) / .38); stroke:rgb(var(--seg-rgb) / .9); stroke-width:.8; stroke-linejoin:round }
.iso .pl{ fill:rgb(var(--seg-rgb) / .2); stroke:rgb(var(--seg-rgb) / .9); stroke-width:.8; stroke-linejoin:round }
.iso .pr{ fill:rgb(var(--seg-rgb) / .1); stroke:rgb(var(--seg-rgb) / .9); stroke-width:.8; stroke-linejoin:round }
.iso .pln{ fill:none; stroke:rgb(var(--seg-rgb) / .85); stroke-width:1; stroke-linecap:round; stroke-linejoin:round }
.iso .pdash{ fill:none; stroke:rgb(var(--seg-rgb) / .65); stroke-width:1; stroke-dasharray:2 3 }
.iso .pdot{ fill:var(--seg) }
.iso .plabel{ fill:var(--muted); font:500 10px var(--mono); letter-spacing:.1em; transition:fill .3s }
.iso.has-active .plate:not(.is-active){ opacity:.5 }
.iso .plate.is-active{ transform:translateY(-14px) }
.iso .plate.is-active .top{ fill:rgb(var(--seg-rgb) / .1); stroke:var(--seg) }
.iso .plate.is-active .sl, .iso .plate.is-active .sr{ stroke:var(--seg) }
.iso .plate.is-active .plabel{ fill:var(--seg) }
.iso .beam{ fill:none; stroke:rgb(var(--seg-rgb) / .5); stroke-width:1; stroke-dasharray:2 6; animation:beam 1s linear infinite }
@keyframes beam{ to{ stroke-dashoffset:-16 } }
.iso .pkt{ fill:var(--seg); opacity:0; animation:pkt 3.6s linear infinite; animation-delay:calc(var(--k,0) * -.9s) }
@keyframes pkt{
  0%{ transform:translateY(0); opacity:0 } 8%{ opacity:1 } 92%{ opacity:1 }
  100%{ transform:translateY(calc(var(--h) * -1)); opacity:0 }
}
.iso .ping{ fill:none; stroke:var(--seg); stroke-width:1.2; opacity:0; transform-box:fill-box; transform-origin:center }
.iso .plate.is-active .ping{ animation:ping 1.9s var(--ease) infinite }
@keyframes ping{ 0%{ transform:scale(.55); opacity:.8 } 100%{ transform:scale(1.12); opacity:0 } }
.iso.is-paused *{ animation-play-state:paused !important }

/* ── материалы: миниатюры ──────────────────────────────────────────────── */
.vid.has-thumb{ grid-template-columns:auto auto minmax(0,1fr) auto }
.vthumb{
  position:relative; width:118px; height:66px; overflow:hidden; color:var(--accent);
  border:1px solid var(--line); border-radius:3px; background:linear-gradient(140deg, var(--surface), var(--sunk));
  transition:border-color .3s;
}
.vthumb svg{ display:block; width:100%; height:100% }
.vthumb .vt-dur{
  position:absolute; right:5px; bottom:4px; padding:1px 5px; border-radius:2px;
  background:rgb(0 0 0 / .62); color:#fff; font:500 9px var(--mono); letter-spacing:.04em;
}
.vid:hover .vthumb{ border-color:var(--seg) }
.vthumb .vt-a{ transition:transform .5s var(--ease) }
.vid:hover .vthumb .vt-a{ transform:translateX(3px) }
@media (max-width:640px){
  .vid.has-thumb{ grid-template-columns:1fr auto }
  .vthumb{ display:none }
}

/* ── контакт: конструктор запроса ──────────────────────────────────────── */
.contact{ align-items:start }
.contact-main .links{ margin-top:36px }
@media (max-width:980px){ .contact{ grid-template-columns:1fr } }
.brief{
  padding:clamp(20px,3vw,32px); border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
}
.brief-h h3{ font-size:20px }
.bf{ min-width:0; margin:20px 0 0; padding:0; border:0 }
.bf > legend, .bf > label{
  display:block; float:none; width:100%; margin:0 0 9px; padding:0;
  font:500 10.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.bf legend em{ font-style:normal; text-transform:none; letter-spacing:0; opacity:.85 }
.pills{ display:flex; flex-wrap:wrap; gap:6px }
.pills label{ position:relative }
.pills input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer }
.pills span{
  display:block; padding:7px 13px; font:500 12px var(--mono); color:var(--muted);
  border:1px solid var(--line); border-radius:99px; transition:background-color .25s, border-color .25s, color .25s;
}
.pills label:hover span{ border-color:var(--muted); color:var(--ink) }
.pills input:checked + span{ background:rgb(var(--seg-rgb) / .12); border-color:var(--seg); color:var(--ink) }
.pills input:focus-visible + span{ outline:2px solid var(--seg); outline-offset:2px }
.bf-check{ display:flex; align-items:flex-start; gap:10px; margin-top:18px; font-size:13px; line-height:1.45; color:var(--muted); cursor:pointer }
.bf-check input{ flex:none; margin:2px 0 0; accent-color:var(--seg) }
/* Поле, не прошедшее проверку при отправке (обязательный контакт или задача), подсвечено сигнальным цветом. */
.brief input[aria-invalid="true"], .brief textarea[aria-invalid="true"],
.brief input[aria-invalid="true"]:focus, .brief textarea[aria-invalid="true"]:focus{ border-color:var(--signal) }
.brief-act{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px }
.btn:disabled{ cursor:default; opacity:.65; transform:none; box-shadow:none }
.form-status{ margin-top:12px; overflow-wrap:anywhere }
/* Экран после успешной отправки: заменяет тело формы внутри той же карточки.
   focus() переносит внимание сюда — стандартное кольцо фокуса намеренно не убрано. */
.brief-done:not([hidden]){ animation:segIn .5s var(--ease) both }
.brief-done-k{ font:500 10.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--seg) }
.brief-done h3{ margin-top:10px; font-size:22px }
.brief-done p{ margin-top:8px; color:var(--muted); font-size:14.5px; max-width:38ch }
.brief-done .btn{ margin-top:22px }
.form-status:empty{ display:none }
.chat-note{ padding:8px 14px; border-bottom:1px solid var(--line); font-size:11px; line-height:1.4; color:var(--muted) }
.msg .sugg{ margin-top:6px }

/* Плавающая голова стоит в правом нижнем углу: оставляем ей место в подвале.
   Только при включённом чате — с data-assistant="off" голова в угол не уезжает. */
@media (max-width:1200px){ html:not([data-assistant="off"]) footer{ padding-right:120px } }
@media (max-width:640px){ html:not([data-assistant="off"]) footer{ padding-right:92px } }

/* ── SEO-разделы: подзаголовок H1, кнопки услуг, «Об Александре», выступления, вопросы ─ */
/* Подзаголовок внутри H1 (ключевые услуги для поиска): основной шрифт, чтобы не сливался с моно-строкой ролей ниже. */
.hero h1 .h1-sub{
  display:block; margin-top:16px; font-family:var(--body); font-size:clamp(16px,1.7vw,20px); font-weight:600;
  letter-spacing:-.01em; text-transform:none; color:var(--ink); line-height:1.35; max-width:36ch;
  animation:segIn .9s var(--ease) both; animation-delay:280ms;
}
.svc-acts{ display:flex; flex-wrap:wrap; gap:2px 16px; margin-top:12px }
.svc-act{ display:inline-block; padding-block:6px; font:500 12px var(--mono); color:var(--accent); text-decoration:none }
.svc-act:hover{ text-decoration:underline; text-underline-offset:3px }
.svc[id], .faq-item, #brief, .speaker{ scroll-margin-top:72px }
.proj .meta a{ color:var(--accent); text-decoration:none }
.proj .meta a:hover{ text-decoration:underline; text-underline-offset:3px }

.about{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start }
.about-bio{ font-size:16.5px; line-height:1.65; max-width:62ch }
.about-facts{ margin:0; border-top:1px solid var(--line) }
.about-facts div{ display:flex; gap:14px; padding:10px 0; border-bottom:1px solid var(--line) }
.about-facts dt{ width:104px; flex:none; padding-top:3px; font:500 10.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.about-facts dd{ margin:0; min-width:0; font-size:14.5px; overflow-wrap:anywhere }
.about-facts a{ color:var(--accent); text-decoration:none }
@media (max-width:760px){ .about{ grid-template-columns:1fr } }

.speaker{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); margin-bottom:clamp(32px,5vw,56px) }
.speaker h3, .vids-h{ font-size:19px; letter-spacing:-.02em; line-height:1.25 }
.speaker p{ margin-top:14px; font-size:15.5px; color:var(--muted) }
.speaker p a{ color:var(--accent) }
.talks{ margin-top:14px; border-top:1px solid var(--line) }
.talks li{ padding:12px 0; border-bottom:1px solid var(--line); font-size:15px; color:var(--muted) }
.talks b{ color:var(--ink); font-weight:600 }
.vids-h{ margin-bottom:14px }
@media (max-width:760px){ .speaker{ grid-template-columns:1fr } }

.faq{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:14px }
.faq-item{ padding:22px 24px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface) }
.faq-item h3{ font-size:17px; line-height:1.3; letter-spacing:-.01em }
.faq-item p{ margin-top:10px; font-size:15px; color:var(--muted) }
.faq-item a{ color:var(--accent) }

/* Контакт: почта и телефон → форма → профили (на телефоне форма не уезжает вниз). */
.contact{ grid-template-areas:"main brief" "more brief"; grid-template-rows:auto 1fr }
.contact-main{ grid-area:main }
.contact > .brief{ grid-area:brief }
.contact-more{ grid-area:more; margin-top:0 }
@media (max-width:980px){ .contact{ grid-template-areas:"main" "brief" "more"; grid-template-rows:none } }
.bf-check[hidden]{ display:none }

/* ── телефоны: первый экран, читаемость, пальцы ────────────────────────── */
@media (max-width:860px){
  .hero{ padding-block:16px 36px; gap:6px }
  .slot{ max-width:188px }
  .hero h1{ margin-block:12px 0 }
  .roles-strip{ margin-top:10px }
  .seg-row{ margin-top:14px }
  .hero .lede{ margin-top:14px }
  .hero .hero-cta{ margin-top:20px }
  /* Единственная постоянно видимая кнопка на телефоне — делаем её заметной. */
  .nav .nav-cta{ background:var(--seg); border-color:var(--seg); color:rgb(var(--surface-rgb)) }
}
/* Узкие телефоны (до 360px): голова меньше и отступы плотнее, чтобы кнопка «Обсудить задачу»
   попадала в первый экран. */
@media (max-width:640px){
  .hero{ padding-top:8px }
  .slot{ max-width:136px }
  .hero h1 .h1-sub{ margin-top:8px; font-size:15px }
  .roles-strip{ margin-top:6px }
  .seg-row{ margin-top:12px }
  .hero .lede{ margin-top:12px }
  .hero .hero-cta{ margin-top:16px }
}

/* Мелкие моно-подписи на телефоне: минимум 12px. */
@media (max-width:640px){
  .eyebrow, .svc-id, .step .k, .step .dl, .fact .l, .links .k, .role-k, .role-cols h4,
  .ld-k, .modmap-cap, .bf > legend, .bf > label, .roles-strip, .tag, .vid .kind,
  .brief-done-k, .about-facts dt{ font-size:12px; letter-spacing:.08em }
  .proj .meta, .svc .out, .role-meta, .ld-where, .vid .num, .seg-note, .tool-fine,
  .modlist li, .flag-txt .meta, .chip, footer, .svc-act{ font-size:12px }
  .orbit .core{ font-size:10px }
}
.bf legend em{ opacity:1 }

/* iOS Safari увеличивает страницу при фокусе на поле со шрифтом меньше 16px. */
.brief input[type="text"], .brief textarea{ font-size:16px }

/* Цели касания на сенсорных экранах. */
@media (pointer: coarse){
  .nav-menu{ width:44px; height:44px }
  .nav-menu i:first-child{ top:16px }
  .nav-menu i:last-child{ top:26px }
  .nav.is-open .nav-menu i:first-child, .nav.is-open .nav-menu i:last-child{ top:21px }
  .nav-cta{ padding-block:12px }
  .roles-strip a{ padding-block:10px }
  .role-tab{ padding:11px 15px; min-height:44px }
  .role-tabs, .pills{ gap:8px }
  .pills span{ padding:11px 15px; min-height:44px; display:flex; align-items:center }
  .mod{ padding-block:9px }
  .flag-links a, .svc .out a, .svc-act{ display:inline-flex; align-items:center; min-height:44px; padding-block:10px }
  .linklike{ padding-block:10px; margin-block:-10px }
  .layer{ position:relative }
  .layer-btn::after{ content:""; position:absolute; inset:0 }
}

/* Кольца орбиты вращаются как квадратные блоки и выходили за экран (scrollWidth больше ширины окна). */
#roles > .wrap{ overflow:hidden; overflow:clip }

/* ═ конец ═ */