/* ============================================================
   AI/ML landing — design system
   Paper + graphite + one accent. Mono reserved for labels/data.
   ============================================================ */

/* IBM Plex Sans — variable (100–700), self-hosted subsets: cyrillic + latin */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;
  src:url(fonts/plex-sans-var-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;
  src:url(fonts/plex-sans-var-latin.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;}

/* IBM Plex Mono — 400 / 500 */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/plex-mono-400-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/plex-mono-400-latin.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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/plex-mono-500-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/plex-mono-500-latin.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;}

:root{
  /* surfaces */
  --paper:      #F5F5F2;
  --paper-2:    #ECECE7;
  --surface:    #FFFFFF;

  /* ink */
  --ink:        #15181B;
  --ink-2:      #4A5157;
  --ink-3:      #79818A;

  /* rules */
  --rule:       #DFE0DB;
  --rule-2:     #C7C9C2;

  /* single accent */
  --accent:     #0F6B50;
  --accent-2:   #0B5540;
  --tint:       #E6F0EC;

  /* data colours — only for project types and charts */
  --c-llm:      #2F5FA6;
  --c-ml:       #A8560A;
  --c-opt:      #8A3E62;
  --c-cv:       #0F6B50;
  --c-anom:     #B03A2E;

  /* layout */
  --maxw:       1280px;
  --gut:        clamp(20px, 4.2vw, 40px);
  --header-h:   64px;

  /* type */
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg{max-width:100%;height:auto;display:block}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.1875rem;         /* 19px */
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(48px,6vw,80px)}
.section--tight{padding-block:clamp(40px,5vw,64px)}
.section--paper2{background:var(--paper-2)}
.section--surface{background:var(--surface)}
.rule-top{border-top:1px solid var(--rule)}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:0.9375rem;         /* 15px */
  font-weight:500;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--ink-3);
  display:flex;align-items:center;gap:.6em;
  margin-bottom:1.25rem;
}
.eyebrow::before{
  content:"";width:9px;height:9px;flex:none;
  background:var(--accent);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
.eyebrow--plain::before{display:none}

h1,.h1{
  font-size:clamp(2.125rem,1.6rem + 2.6vw,3.25rem);
  line-height:1.06;
  letter-spacing:-0.022em;
  font-weight:600;
  text-wrap:balance;
}
h2,.h2{
  font-size:clamp(2.25rem,1.7rem + 2.3vw,2.875rem);  /* 36 → 46 */
  line-height:1.12;
  letter-spacing:-0.018em;
  font-weight:600;
  text-wrap:balance;
}
h3,.h3{
  font-size:clamp(1.3125rem,1.15rem + .65vw,1.625rem);
  line-height:1.25;
  letter-spacing:-0.012em;
  font-weight:600;
}
h4,.h4{font-size:1.125rem;line-height:1.35;font-weight:600;letter-spacing:-0.006em}

.lead{font-size:clamp(1.1875rem,1.1rem + .4vw,1.375rem);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.measure{max-width:62ch}
.measure-narrow{max-width:52ch}
.muted{color:var(--ink-2)}
.small{font-size:1.0625rem;line-height:1.5;color:var(--ink-2)}
.caption{font-size:0.9375rem;line-height:1.45;color:var(--ink-3)}
.mono{font-family:var(--mono)}

.section-head{margin-bottom:clamp(32px,4vw,56px)}
.section-head h2,.section-head .h2{max-width:26ch}
.section-head .lead{margin-top:.75rem}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--accent);--btn-fg:#fff;--btn-bd:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-size:1.0625rem;font-weight:500;line-height:1;
  padding:.95em 1.5em;
  border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);
  border-radius:2px;
  text-decoration:none;cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn:hover{--btn-bg:var(--accent-2);--btn-bd:var(--accent-2)}
.btn:active{transform:translateY(1px)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--rule-2)}
.btn--ghost:hover{--btn-bg:transparent;--btn-fg:var(--accent);--btn-bd:var(--accent)}
.btn--sm{font-size:1rem;padding:.7em 1.1em}
.btn--block{width:100%}

:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:2px;
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.site-header__inner{
  height:100%;display:flex;align-items:center;gap:clamp(16px,3vw,40px);
}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:600;letter-spacing:-0.02em;font-size:1.125rem;flex:none}
.logo__mark{flex:none}
.nav{display:flex;gap:clamp(14px,2vw,28px);margin-left:auto}
.nav a{
  text-decoration:none;font-size:1rem;color:var(--ink-2);
  padding:.35em 0;border-bottom:1px solid transparent;transition:color .15s, border-color .15s;
}
.nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.site-header .btn{flex:none;margin-left:auto}
@media (max-width:900px){.nav{display:none}}
@media (max-width:560px){.site-header .btn{display:none}}

/* ---------- hero ---------- */
.hero{padding-top:clamp(40px,5.5vw,76px);padding-bottom:clamp(36px,4.5vw,64px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,4vw,56px);align-items:center}
@media (min-width:960px){
  .hero__grid{grid-template-columns:minmax(0,6fr) minmax(0,6.4fr);gap:clamp(32px,4vw,64px)}
}
.hero h1{margin-bottom:1.25rem}
.hero__sub{margin-bottom:2rem;max-width:56ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.125rem}
.hero__note{max-width:50ch}
.hero__viz{min-width:0;width:100%;max-width:680px;justify-self:center}
@media (max-width:599px){
  .hero__grid{gap:28px}
  .hero .eyebrow{font-size:.75rem;letter-spacing:.07em}
  .hero__sub{margin-bottom:1.5rem}
}
@media (max-width:560px){
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%}
}

/* variant switch: both variants live in the DOM, CSS picks one — no layout shift */
.hero__v{display:none}
html[data-hero="a"] .hero__v[data-v="a"],
html:not([data-hero]) .hero__v[data-v="a"],
html[data-hero="b"] .hero__v[data-v="b"]{display:block}

/* ---------- hero schema ---------- */
.schema{width:100%}
.schema--wide{display:block}
.schema .s-node{fill:var(--surface);stroke:var(--rule-2);stroke-width:1}
.schema .s-core{fill:var(--tint);stroke:var(--accent);stroke-width:1.25}
.schema .s-core-row{fill:var(--surface);stroke:none}
.schema .s-label{font-family:var(--mono);font-size:14px;fill:var(--ink-2)}
.schema .s-label--core{fill:var(--ink);font-weight:500;font-size:13px}
.schema .s-col{font-family:var(--mono);font-size:12px;letter-spacing:.12em;fill:var(--ink-3);text-transform:uppercase}
.schema .s-wire{fill:none;stroke:var(--rule-2);stroke-width:1}
.schema .s-flow{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 8;opacity:.9}
.schema .s-arrow{fill:none;stroke:var(--rule-2);stroke-width:1}

/* ---------- схема первого экрана: маршрут «источник → метод → результат» ----------
   Схема проигрывает конкретные связки из практики. Подсветка — единственное,
   что меняется; при выключенном JS схема остаётся полной и статичной. */
.schema .s-route{
  stroke:var(--accent);stroke-width:1.75;opacity:0;
  stroke-linecap:round;stroke-linejoin:round;
}
.schema .s-cell rect{transition:fill .35s ease, stroke .35s ease}
.schema .s-cell text{transition:fill .35s ease}
.schema .s-cell[tabindex]{cursor:pointer}

.schema .s-cell.is-lit .s-node,
.schema .s-cell.is-lit rect{fill:var(--tint);stroke:var(--accent)}
.schema .s-cell.is-lit text{fill:var(--ink)}
.schema .s-cell.is-lit .s-label--core{font-weight:500}

@media (prefers-reduced-motion: no-preference){
  .schema .s-route.is-on{
    opacity:1;
    stroke-dasharray:var(--len);
    animation:s-trace 1.25s cubic-bezier(.4,.5,.2,1) both;
  }
  @keyframes s-trace{
    from{stroke-dashoffset:var(--len)}
    70%{stroke-dashoffset:0;opacity:1}
    to{stroke-dashoffset:0;opacity:.25}
  }

  /* сборка схемы при первом показе */
  .hero__viz .schema.is-in .s-node,.hero__viz .schema.is-in .s-core-row{
    transform-box:fill-box;transform-origin:center;
    animation:dz-pop .5s cubic-bezier(.2,.8,.2,1) both;
  }
  .hero__viz .schema.is-in .s-core{animation:dz-pop .6s cubic-bezier(.2,.8,.2,1) .1s both}
  .hero__viz .schema.is-in .s-wire{animation:hero-wire .5s ease-out .35s both}
  @keyframes hero-wire{from{opacity:0}to{opacity:1}}
  .schema--wide .s-cell[data-src="0"] .s-node{animation-delay:.06s}
  .schema--wide .s-cell[data-src="1"] .s-node{animation-delay:.10s}
  .schema--wide .s-cell[data-src="2"] .s-node{animation-delay:.14s}
  .schema--wide .s-cell[data-src="3"] .s-node{animation-delay:.18s}
  .schema--wide .s-cell[data-src="4"] .s-node{animation-delay:.22s}
  .schema--wide .s-cell[data-src="5"] .s-node{animation-delay:.26s}
  .schema--wide .s-cell[data-src="6"] .s-node{animation-delay:.30s}
  .schema--wide .s-cell[data-core] .s-core-row{animation-delay:calc(.34s + var(--j,0) * .05s)}
  .schema--wide .s-cell[data-res="0"] .s-node{animation-delay:.52s}
  .schema--wide .s-cell[data-res="1"] .s-node{animation-delay:.56s}
  .schema--wide .s-cell[data-res="2"] .s-node{animation-delay:.60s}
  .schema--wide .s-cell[data-res="3"] .s-node{animation-delay:.64s}
  .schema--wide .s-cell[data-res="4"] .s-node{animation-delay:.68s}
  .schema--wide .s-cell[data-res="5"] .s-node{animation-delay:.72s}
  .schema--wide .s-cell[data-res="6"] .s-node{animation-delay:.76s}
}
@media (prefers-reduced-motion: no-preference){
  .schema .s-flow{animation:flow 2.6s linear infinite}
}
@keyframes flow{to{stroke-dashoffset:-24}}
.schema__cap{margin-top:.75rem}

/* ---------- trust bar ---------- */
.trustbar{border-block:1px solid var(--rule);background:var(--surface)}
.trustbar__inner{
  display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem 2rem;
  padding-block:1.125rem;
  font-family:var(--mono);font-size:0.9375rem;letter-spacing:.01em;color:var(--ink-2);
}
@media (min-width:820px){.trustbar__inner{grid-template-columns:repeat(3,minmax(0,1fr))}}
.trustbar__item{display:flex;align-items:flex-start;gap:.6rem}
.trustbar__item::before{content:"";width:6px;height:6px;background:var(--accent);flex:none;margin-top:.55em}

/* ---------- status chips (evidence hierarchy) ---------- */
.chip{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--mono);font-size:0.875rem;font-weight:500;line-height:1;
  padding:.42em .7em;border-radius:2px;white-space:nowrap;
}
.chip::before{content:"";width:6px;height:6px;flex:none;border-radius:50%}
.chip--prod{background:var(--accent);color:#fff}
.chip--prod::before{background:#fff}
.chip--pilot{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.chip--pilot::before{background:var(--accent)}
.chip--proto{background:transparent;color:var(--ink-2);border:1px dashed var(--rule-2)}
.chip--proto::before{background:var(--ink-3)}
.chip--rnd{background:transparent;color:var(--ink-3);border:1px dotted var(--rule-2)}
.chip--rnd::before{background:transparent;box-shadow:inset 0 0 0 1px var(--ink-3)}

/* ---------- tags ---------- */
.tags{display:flex;flex-wrap:wrap;gap:.4rem .5rem;font-family:var(--mono);font-size:0.875rem}
.tags li{color:var(--ink-3);padding:.25em .5em;border:1px solid var(--rule);background:var(--surface);border-radius:2px}
.tags li[data-t="llm"]{color:var(--c-llm);border-color:color-mix(in srgb,var(--c-llm) 28%,var(--rule))}
.tags li[data-t="ml"]{color:var(--c-ml);border-color:color-mix(in srgb,var(--c-ml) 28%,var(--rule))}
.tags li[data-t="opt"]{color:var(--c-opt);border-color:color-mix(in srgb,var(--c-opt) 28%,var(--rule))}
.tags li[data-t="cv"]{color:var(--c-cv);border-color:color-mix(in srgb,var(--c-cv) 28%,var(--rule))}
.tags li[data-t="anom"]{color:var(--c-anom);border-color:color-mix(in srgb,var(--c-anom) 28%,var(--rule))}

/* ---------- major cases ---------- */
.cases{display:grid;gap:clamp(28px,3.5vw,44px)}
.case{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:3px;
  overflow:clip;
  display:grid;grid-template-columns:minmax(0,1fr);
}
@media (min-width:880px){
  .case{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}
  .case:nth-child(even) .case__viz{order:-1;border-left:none;border-right:1px solid var(--rule)}
}
.case__body{padding:clamp(24px,3vw,40px)}
.case__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:1rem}
.case__idx{font-family:var(--mono);font-size:0.875rem;color:var(--ink-3);letter-spacing:.06em}
.case h3{margin-bottom:.75rem}
.case__task{
  font-family:var(--mono);font-size:0.9375rem;line-height:1.5;color:var(--ink-2);
  padding-left:.9rem;border-left:2px solid var(--accent);margin-bottom:1rem;
}
.case__desc{font-size:1.125rem;line-height:1.55;color:var(--ink-2);text-wrap:pretty;margin-bottom:1.25rem;max-width:52ch}
.case-story p+p{margin-top:.85rem}
.case__usage{font-size:1rem;font-weight:500;color:var(--accent);margin-bottom:1.5rem;padding-left:.8rem;border-left:2px solid var(--accent)}
.case__result{
  display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;
  padding:.85rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  margin-bottom:1.25rem;
}
.case__result dt{font-family:var(--mono);font-size:0.875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);flex:none}
.case__result dd{margin:0;font-size:1.0625rem;font-weight:500;color:var(--ink)}
.case .tags{margin-bottom:1.25rem}
.case__viz{
  background:var(--paper-2);
  border-top:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(18px,2.4vw,28px);
}
@media (min-width:880px){
  .case__viz{border-top:none;border-left:1px solid var(--rule)}
  /* Схема закреплена сверху: раскрытие подробностей растит карточку, но не двигает картинку. */
  .case__viz{align-items:flex-start}
  .case__viz>*{position:sticky;top:calc(var(--header-h) + 28px)}
}

/* details disclosure */
.disclose{border-top:1px solid var(--rule);padding-top:1rem}
.disclose>summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:0.9375rem;font-weight:500;color:var(--accent);
}
.disclose>summary::-webkit-details-marker{display:none}
.disclose>summary::after{content:"+";font-size:1.1em;line-height:1;transition:transform .18s ease}
.disclose[open]>summary::after{content:"–"}
.disclose>summary:hover{color:var(--accent-2)}
.disclose__body{padding-top:1.25rem}
.disclose__body h4{margin-bottom:.6rem}
.disclose__body h4+*{margin-bottom:1.25rem}
.disclose__body>*:last-child{margin-bottom:0}

.ticks li,.dots li{position:relative;padding-left:1.15rem;font-size:1.0625rem;line-height:1.5;color:var(--ink-2);margin-bottom:.4rem}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--accent)}
.dots li::before{content:"";position:absolute;left:1px;top:.6em;width:5px;height:5px;border:1px solid var(--rule-2);background:var(--surface)}

.note{
  background:var(--tint);border-left:2px solid var(--accent);
  padding:.9rem 1.1rem;font-size:1.0625rem;line-height:1.5;color:var(--ink-2);border-radius:0 2px 2px 0;
}

/* ---------- minor cases ---------- */
.cases-mini{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:3px;overflow:hidden;margin-top:clamp(28px,3.5vw,44px)}
@media (min-width:700px){.cases-mini{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){
  .cases-mini{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cases-mini--stories{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.case-mini{background:var(--surface);padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;gap:.85rem}
.case-mini__viz{background:var(--paper-2);border:1px solid var(--rule);border-radius:2px;padding:10px}
.cases-mini--stories .case-mini__viz{aspect-ratio:26/15;position:relative}
.cases-mini--stories .case-mini__viz>.dz{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
.case-mini h4{min-height:2.7em}
.case-mini__usage{font-size:1rem;line-height:1.5;font-weight:500;color:var(--accent);padding-left:.8rem;border-left:2px solid var(--accent)}
.case-mini__desc{font-size:1rem;line-height:1.5;color:var(--ink-2);flex:1}
.case-mini .chip{align-self:flex-start}
.case-mini .tags{font-size:0.8125rem}
.more-projects{margin-top:32px;border-top:1px solid var(--rule-2)}
.more-projects__head{display:flex;align-items:baseline;gap:16px;padding:22px 0;list-style:none;cursor:pointer}
.more-projects__head::-webkit-details-marker{display:none}
.more-projects__head::after{content:"+";margin-left:auto;font-family:var(--mono);color:var(--accent)}
.more-projects[open]>.more-projects__head::after{content:"−"}
.more-projects__title{font-size:1.25rem;font-weight:600}
.more-projects__description{font-size:.9375rem;color:var(--ink-2)}
.more-projects .cases-mini{margin-block:0}
@media(max-width:699px){
  .more-projects__head{flex-wrap:wrap;gap:4px 16px}
  .more-projects__description{order:2;flex-basis:100%}
}

/* ---------- expertise ---------- */
.expertise{display:grid;gap:32px 40px}
.expertise__cta{margin-top:40px;font-size:1.125rem;line-height:1.6}
.expertise__cta a{color:var(--accent);text-underline-offset:.18em}
.expertise__cta a:hover{color:var(--accent-2)}
@media (min-width:720px){.expertise{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){.expertise{grid-template-columns:repeat(3,minmax(0,1fr))}}
.exp{padding-block:22px 0;border-top:1px solid var(--rule-2);display:flex;flex-direction:column;gap:.65rem}
.exp__label{font-family:var(--mono);font-size:.875rem;color:var(--accent)}
.exp h3{font-size:1.3125rem}
.exp>p:last-child{font-size:1.0625rem;line-height:1.6;color:var(--ink-2)}
.exp__top{display:flex;align-items:center;gap:.7rem}
.exp__dot{width:10px;height:10px;flex:none;border-radius:1px}
.exp[data-t="llm"] .exp__dot{background:var(--c-llm)}
.exp[data-t="ml"] .exp__dot{background:var(--c-ml)}
.exp[data-t="rec"] .exp__dot{background:var(--c-opt)}
.exp[data-t="opt"] .exp__dot{background:var(--ink-2)}
.exp[data-t="cv"] .exp__dot{background:var(--c-cv)}
.exp[data-t="anom"] .exp__dot{background:var(--c-anom)}
.exp[data-t="mlops"] .exp__dot{background:var(--accent);border-radius:50%}
.exp__gloss{font-size:1rem;line-height:1.5;color:var(--ink-2);margin-top:-.35rem}
.exp ul li{font-size:1rem;line-height:1.5;color:var(--ink-2);padding-left:1rem;position:relative;margin-bottom:.3rem}
.exp ul li::before{content:"";position:absolute;left:0;top:.65em;width:5px;height:1px;background:var(--rule-2)}

/* ---------- steps (a real sequence — numbering earns its place) ---------- */
.steps{border-top:1px solid var(--rule)}
.step{
  display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;
  padding-block:clamp(24px,3vw,34px);border-bottom:1px solid var(--rule);
}
@media (min-width:860px){
  .step{grid-template-columns:56px minmax(0,4fr) minmax(0,6fr);gap:clamp(20px,3vw,40px);align-items:start}
}
.step__num{font-family:var(--mono);font-size:0.9375rem;font-weight:500;letter-spacing:.1em;color:var(--accent)}
.step h3{font-size:1.3125rem}
.step>p{font-size:1.0625rem;line-height:1.6;color:var(--ink-2)}
.step__lead{color:var(--ink-2);font-size:1.0625rem;margin-top:.4rem}

/* ---------- infra ---------- */
.infra{display:grid;gap:clamp(28px,4vw,56px)}
.section--ink{background:#173C31;color:var(--surface)}
.section--ink .eyebrow{color:#BED4C9}
.section--ink .eyebrow::before{background:#8CC5AA}
.section--ink .lead{color:#D2E0D8;margin-top:24px;font-size:1.1875rem}
.infra__facts{display:grid;gap:24px}
.infra__facts>div{border-top:1px solid #FFFFFF35;padding-top:20px}
.infra__facts h3{font-size:1.1875rem;margin-bottom:8px}
.infra__facts p{font-size:1.0625rem;color:#D2E0D8;line-height:1.6}
@media (min-width:900px){.infra{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:clamp(22px,2.6vw,32px)}
.panel+.panel{margin-top:1.25rem}
.panel h4{margin-bottom:1rem}
.kv{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.kv__row{background:var(--surface);padding:.9rem 1.1rem;display:grid;gap:.25rem}
@media (min-width:600px){.kv__row{grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:1.25rem;align-items:baseline}}
.kv__k{font-family:var(--mono);font-size:0.9375rem;color:var(--ink-3)}
.kv__v{font-size:1.0625rem;color:var(--ink-2)}

/* ---------- team ---------- */
.team-about{display:grid;gap:24px 56px}
@media(min-width:900px){.team-about{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}}
.team{display:grid;gap:clamp(20px,2.5vw,28px)}
@media (min-width:700px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.team{grid-template-columns:repeat(4,minmax(0,1fr))}}
.person{background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:clamp(18px,2vw,24px)}
.person__ph{
  aspect-ratio:1;background:var(--paper-2);border:1px dashed var(--rule-2);border-radius:2px;
  display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
  font-family:var(--mono);font-size:0.875rem;color:var(--ink-3);text-align:center;padding:1rem;
}
.person__role{font-family:var(--mono);font-size:0.875rem;color:var(--accent);letter-spacing:.04em;margin:.2rem 0 .6rem}
.stackline{
  font-family:var(--mono);font-size:1rem;line-height:1.9;color:var(--ink-2);
  margin-top:clamp(24px,3vw,36px);padding-top:1.25rem;border-top:1px solid var(--rule);
}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--rule)}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__item>summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:baseline;gap:1rem;
  padding-block:clamp(18px,2.2vw,24px);
  font-size:1.1875rem;font-weight:500;letter-spacing:-0.008em;
}
.faq__item>summary::-webkit-details-marker{display:none}
.faq__item>summary::after{
  content:"+";margin-left:auto;font-family:var(--mono);color:var(--accent);font-size:1.25rem;line-height:1;flex:none;
}
.faq__item[open]>summary::after{content:"–"}
.faq__item>summary:hover{color:var(--accent)}
.faq__a{padding-bottom:clamp(18px,2.2vw,24px);max-width:70ch;color:var(--ink-2);font-size:1.125rem}
.faq__a p+p{margin-top:.75rem}

/* ---------- form ---------- */
.contact{display:grid;gap:28px 56px}
#contact .contact{grid-template-areas:"intro" "form" "after"}
.contact__intro{grid-area:intro;min-width:0}
.contact__intro .lead{margin-top:1rem}
.contact__form{grid-area:form;min-width:0}
.contact__after{grid-area:after;min-width:0}
.contact__after h3{font-size:1.1875rem;margin-bottom:.6rem}
.contact__after>p{font-size:1.0625rem;color:var(--ink-2);max-width:46ch}
@media (min-width:940px){
  .contact{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  #contact .contact{grid-template-areas:"intro form" "after form";grid-template-rows:auto 1fr;align-items:start}
}
.form{background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:clamp(22px,3vw,36px)}
.field{margin-bottom:1.15rem}
.field__label{display:block;font-size:1rem;color:var(--ink-2);margin-bottom:.45rem}
.field__req{color:var(--accent)}
.field input,.field textarea,.field select{
  width:100%;background:var(--paper);border:1px solid var(--rule-2);border-radius:2px;
  padding:.75rem .85rem;font-size:1.0625rem;line-height:1.45;color:var(--ink);
  transition:border-color .15s, background-color .15s;
}
.field input:focus,.field textarea:focus,.field select:focus{background:var(--surface);border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--tint)}
.field textarea{min-height:7rem;resize:vertical}
.form__extras{margin-block:0 1.4rem}
.form__extras>summary{font-family:var(--sans);font-size:1rem}
.form__extras .disclose__body{padding-bottom:0}
.form__extras .field:last-child{margin-bottom:.5rem}
.field ::placeholder{color:#6B737A;opacity:1}
.field__hint{font-size:0.9375rem;color:var(--ink-3);margin-top:.4rem}

/* D. свой указатель у выпадающего списка */
.field select{
  appearance:none;-webkit-appearance:none;
  background-color:var(--paper);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%234A5157' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:11px 8px;
  padding-right:2.4rem;cursor:pointer;
}

/* C. поле выбора файла */
.filefield{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.filefield input[type="file"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.filefield__btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:500;line-height:1;padding:.7em 1.1em;
  border:1px solid var(--rule-2);border-radius:2px;background:var(--paper);
  cursor:pointer;transition:border-color .15s, color .15s;
}
.filefield__btn:hover{border-color:var(--accent);color:var(--accent)}
.filefield input[type="file"]:focus-visible + .filefield__btn{outline:2px solid var(--accent);outline-offset:2px}
.filefield__name{font-size:1rem;color:var(--ink-3);min-width:0;overflow-wrap:anywhere}
.field-row{display:grid;gap:1.15rem}
@media (min-width:560px){.field-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}}
.field-row .field{margin-bottom:1.15rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__consent{font-size:0.9375rem;color:var(--ink-3);margin-top:.9rem;max-width:48ch}
.form__consent a{color:var(--ink-2)}
.form__error{
  display:none;margin-top:1rem;padding:.8rem 1rem;border-radius:2px;
  background:color-mix(in srgb,var(--c-anom) 8%,var(--surface));
  border:1px solid color-mix(in srgb,var(--c-anom) 35%,var(--rule));
  color:var(--c-anom);font-size:1rem;
}
.form.is-error .form__error{display:block}
.field.is-invalid input,.field.is-invalid textarea{border-color:var(--c-anom)}
.contact__aside .kv{margin-top:1.5rem}
.channels{display:flex;flex-direction:column;gap:.6rem;margin-top:1.5rem}
.channels a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  text-decoration:none;padding:.85rem 1rem;background:var(--surface);
  border:1px solid var(--rule);border-radius:2px;font-size:1.0625rem;transition:border-color .15s,color .15s;
}
.channels a:hover{border-color:var(--accent);color:var(--accent)}
.channels .mono{font-size:0.9375rem;color:var(--ink-3)}
.channels a:hover .mono{color:var(--accent)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#C9CEd2;padding-block:clamp(40px,5vw,64px)}
.site-footer a{color:#E8EBEC;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22)}
.site-footer a:hover{border-bottom-color:var(--accent);color:#fff}
.footer__grid{display:grid;gap:clamp(24px,3vw,40px)}
@media (min-width:760px){.footer__grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}}
.site-footer .logo{color:#fff}
.footer__col h4{font-family:var(--mono);font-size:0.9375rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#8E979D;margin-bottom:.9rem}
.footer__col li{margin-bottom:.5rem;font-size:1rem}
.footer__col a{overflow-wrap:anywhere}
.footer__legal{margin-top:clamp(28px,3.5vw,44px);padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.14);font-size:0.9375rem;color:#8E979D;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}

/* ---------- mobile sticky CTA ---------- */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--rule);
  display:none;
  transition:transform .2s ease,visibility .2s;
}
.mobile-cta.is-hidden{transform:translateY(110%);visibility:hidden;pointer-events:none}
@media (max-width:640px){
  .mobile-cta{display:block}
  body{padding-bottom:76px}
}

/* ---------- reveal (only when JS is on) ---------- */
html.js .reveal{opacity:0;transform:translateY(10px)}
html.js .reveal.is-in{opacity:1;transform:none;transition:opacity .5s ease, transform .5s cubic-bezier(.2,.6,.2,1)}
@media (prefers-reduced-motion: reduce){
  html.js .reveal{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ---------- thank-you page ---------- */
.thanks{padding-block:clamp(56px,8vw,110px)}
.thanks__badge{
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:0.9375rem;
  color:var(--accent);border:1px solid var(--accent);border-radius:2px;padding:.45em .8em;margin-bottom:1.5rem;
}
.next{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:3px;overflow:hidden;margin-top:clamp(28px,3.5vw,44px)}
@media (min-width:760px){.next{grid-template-columns:repeat(3,minmax(0,1fr))}}
.next__item{background:var(--surface);padding:clamp(20px,2.4vw,28px)}
.next__num{font-family:var(--mono);font-size:0.875rem;letter-spacing:.1em;color:var(--accent);margin-bottom:.6rem}

.print-only{display:none}

/* ============================================================
   Схемы кейсов: типографика и анимация.
   Словарь один на все восемь схем, чтобы они читались как система.
   Финальное состояние — это состояние по умолчанию: если JS не
   отработал и класс .is-in не появился, схема просто статична.
   ============================================================ */
.dz{width:100%;max-width:520px;height:auto;display:block}
.dz text{font-family:var(--mono)}

@media (prefers-reduced-motion: no-preference){

  /* линия прочерчивается; длину контура генератор кладёт в --len */
  .dz.is-in .dz-draw{
    stroke-dasharray:var(--len);
    animation:dz-draw 1.1s cubic-bezier(.22,.7,.25,1) both;
    animation-delay:calc(.12s + var(--i, 0) * .06s);
  }
  @keyframes dz-draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}

  /* столбец растёт от основания */
  .dz.is-in .dz-grow{
    transform-box:fill-box;transform-origin:bottom;
    animation:dz-grow .6s cubic-bezier(.22,.7,.25,1) both;
    animation-delay:calc(.18s + var(--i, 0) * .07s);
  }
  @keyframes dz-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

  /* полоса растёт слева направо */
  .dz.is-in .dz-grow-x{
    transform-box:fill-box;transform-origin:left;
    animation:dz-grow-x .7s cubic-bezier(.22,.7,.25,1) both;
    animation-delay:calc(.2s + var(--i, 0) * .08s);
  }
  @keyframes dz-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  /* точки, ячейки, карточки — появление ступенькой */
  .dz.is-in .dz-pop{
    transform-box:fill-box;transform-origin:center;
    animation:dz-pop .42s cubic-bezier(.2,.8,.2,1) both;
    animation-delay:calc(.25s + var(--i, 0) * .045s);
  }
  @keyframes dz-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}

  /* подсветка аномального участка */
  .dz.is-in .dz-alert{animation:dz-alert .9s ease-out .9s both}
  @keyframes dz-alert{from{opacity:0}60%{opacity:1}to{opacity:1}}

  /* поток данных внутри схемы — только при наведении на карточку */
  .dz-flow{stroke-dasharray:0}
  .case:hover .dz-flow,.case:focus-within .dz-flow,
  .case-mini:hover .dz-flow,.case-mini:focus-within .dz-flow{
    stroke-dasharray:4 6;
    animation:dz-flow 1s linear infinite;
  }
  @keyframes dz-flow{to{stroke-dashoffset:-10}}

  /* при наведении главный элемент схемы слегка подаётся вперёд */
  .dz-lead{transform-box:fill-box;transform-origin:center;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
  .case:hover .dz-lead,.case:focus-within .dz-lead,
  .case-mini:hover .dz-lead,.case-mini:focus-within .dz-lead{transform:scale(1.03)}
}

/* карточка отзывается на наведение всей плоскостью */
.case,.case-mini{transition:border-color .25s ease, box-shadow .25s ease}
.case:hover,.case:focus-within{border-color:var(--rule-2);box-shadow:0 1px 24px -12px rgba(21,24,27,.28)}
.case-mini:hover,.case-mini:focus-within{box-shadow:0 1px 20px -12px rgba(21,24,27,.3)}
.case__viz,.case-mini__viz{transition:background-color .25s ease}
.case:hover .case__viz{background:#E7E7E1}
.case-mini:hover .case-mini__viz{background:#E7E7E1}

/* ---------- handoff placeholders (см. README) ---------- */
.ph{
  background:color-mix(in srgb, var(--c-ml) 9%, transparent);
  box-shadow:inset 0 -1px 0 color-mix(in srgb, var(--c-ml) 45%, transparent);
  border-radius:1px;
}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:.7rem 1rem;text-decoration:none;font-size:1rem;
}
.skip-link:focus{left:.5rem;top:.5rem}

.channels a{flex-wrap:wrap;row-gap:4px}
.channels a span{max-width:100%;overflow-wrap:anywhere}