/* lynteralab.com — main stylesheet
   Tokens first, then components top-to-bottom in page order, then responsive.
   Readability floor: no text below 13px desktop / 14px mobile; secondary ink >= #5c5c5c on #fafafa (AA). */

/* ------------------------------------------------------------ fonts */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2?v=77bc0267") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-500-normal.woff2?v=f7016cd4") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-600-normal.woff2?v=196e3cbc") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-ext-400-normal.woff2?v=1bc0d8e4") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-ext-500-normal.woff2?v=93a0df99") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-ext-600-normal.woff2?v=8fccbdf5") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-cyrillic-400-normal.woff2?v=7dec1409") 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: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-cyrillic-500-normal.woff2?v=eabefad2") 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: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-cyrillic-600-normal.woff2?v=ff40080a") 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: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-cyrillic-ext-400-normal.woff2?v=608b4ac3") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-cyrillic-ext-500-normal.woff2?v=22dc34fd") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-cyrillic-ext-600-normal.woff2?v=484ec8de") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2?v=79936b18") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,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("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2?v=b1c8a895") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,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: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-ext-400-normal.woff2?v=8450d594") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2?v=fa8d8838") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-cyrillic-400-normal.woff2?v=2f3900b1") 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("/assets/fonts/ibm-plex-mono-cyrillic-500-normal.woff2?v=42375444") 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("/assets/fonts/ibm-plex-mono-cyrillic-ext-400-normal.woff2?v=89f877e2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-cyrillic-ext-500-normal.woff2?v=a1a15515") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }

/* ------------------------------------------------------------ tokens */
:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --ink: #1a1a1a;
  --ink-2: #3a3a3a;
  --ink-3: #5c5c5c;      /* secondary text floor — 6.6:1 on #fafafa */
  --line: #e2e2e2;
  --line-2: #d0d0d0;
  --accent: #0066cc;
  --accent-ink: #004c99;
  --op: #0066cc;         /* role: operator */
  --eng: #00a650;        /* role: heads & engineers */
  --oem: #cc6600;        /* role: management & OEM */
  --eng-text: #007a3b;   /* same hues, darkened for text: AA (>=4.5:1) on white and on the grey surfaces */
  --oem-text: #a35200;
  --ok-text: #007a3b;
  --ch: #8844cc;         /* diagram: channels */
  --ok: #00a650;         /* status: running */
  --plan: #0066cc;       /* status: planned maintenance */
  --down: #b91c1c;       /* status: emergency downtime */
  --sans: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1200px;
  --gutter: 24px;
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, dl, dd, dt, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-ink); text-decoration: underline; }
a:focus-visible, .open-app:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.tag { display: inline-block; background: var(--ink); color: #fff; padding: 12px 18px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
.section { padding: 96px 0; }
.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 48px; }
.section__head .eyebrow { margin-bottom: 14px; }
.section__title { font-size: 40px; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; max-width: 820px; }
.section__aside { color: var(--ink-3); text-align: right; white-space: nowrap; }

/* ------------------------------------------------------------ header */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header__in { display: flex; justify-content: space-between; align-items: center; min-height: 88px; gap: 24px; }
.brand { display: flex; flex-direction: column; gap: 3px; color: var(--ink); }
.brand:hover { text-decoration: none; color: var(--ink); }
.brand__name { font-weight: 600; font-size: 22px; letter-spacing: 0.02em; line-height: 1; }
.brand__tag { font-family: var(--mono); font-size: 13px; color: var(--ink-3); letter-spacing: 0.06em; }
.site-header__nav { display: flex; align-items: center; gap: 32px; }
.open-app { color: var(--ink); font-size: 16px; }
.open-app[href]:hover { color: var(--accent); }
.lang { display: flex; gap: 4px; }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--ink-3); }
.lang a:hover { color: var(--ink); text-decoration: none; }
.lang a[aria-current] { color: var(--ink); font-weight: 500; box-shadow: inset 0 -2px 0 var(--accent); }

/* ------------------------------------------------------------ hero */
.hero { padding: 72px 0 64px; }
.hero__in { display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 48px; align-items: center; }
.hero__text { display: flex; flex-direction: column; gap: 32px; }
.hero__title { font-size: 60px; line-height: 1.06; font-weight: 600; letter-spacing: -0.025em; }
.hero__sub { font-size: 21px; line-height: 1.45; color: var(--ink-2); max-width: 560px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 8px 28px; color: var(--ink-3); }
.hero__diagram { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero__diagram-title { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; text-align: center; }

/* diagram (canvas by Lyntera; DOM parts here) */
.diagram { position: relative; width: 600px; height: 600px; margin-top: 4px; }
.diagram canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.diagram__core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20%; height: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 2; pointer-events: none; }
.diagram__core-border { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); background: radial-gradient(ellipse at 40% 35%, rgba(0,102,204,.06) 0%, rgba(255,255,255,.98) 70%); box-shadow: 0 0 0 6px rgba(0,102,204,.06), 0 4px 24px rgba(0,102,204,.12); }
.diagram__core-pulse, .diagram__core-pulse2 { position: absolute; border-radius: 50%; animation: corePulse 2.8s ease-in-out infinite; }
.diagram__core-pulse { inset: -10px; border: 1.5px solid rgba(0,102,204,.18); }
.diagram__core-pulse2 { inset: -22px; border: 1px solid rgba(0,102,204,.09); animation-delay: 1s; }
@keyframes corePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .diagram__core-pulse, .diagram__core-pulse2 { animation: none; } }
.diagram__core-label { position: relative; z-index: 1; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); line-height: 1.3; max-width: 100px; }
.diagram__core-sub { position: relative; z-index: 1; color: var(--ink-3); margin-top: 4px; font-size: 13px; }
.diagram__core-label-short { display: none; }
.diagram__hint { color: var(--accent); margin: -4px 0 -6px; align-self: center; transition: opacity .4s; }
.diagram__text { width: 100%; max-width: 600px; margin-top: 6px; font-size: 14px; line-height: 1.5; }
.diagram__text summary { cursor: pointer; color: var(--ink-3); letter-spacing: .06em; padding: 6px 0; }
.diagram__text summary:hover { color: var(--ink); }
.diagram__text ul { margin: 6px 0 4px; padding-left: 18px; columns: 2; column-gap: 24px; }
.diagram__text li { break-inside: avoid; margin-bottom: 4px; }
.diagram__text strong { font-weight: 500; }
.diagram__hint.is-hidden { opacity: 0; }
.diagram__tip { position: fixed; z-index: 50; background: var(--ink); color: #fff; padding: 8px 12px; font-size: 14px; line-height: 1.4; border-left: 3px solid var(--accent); pointer-events: none; opacity: 0; transition: opacity .15s; white-space: nowrap; max-width: calc(100vw - 24px); }
.diagram__tip.is-visible { opacity: 1; }
.diagram__tip strong { display: block; font-weight: 600; }
.diagram__tip span { font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,.7); }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; color: var(--ink-3); letter-spacing: .06em; margin-top: 4px; }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend__dot--op { background: var(--op); } .legend__dot--eng { background: var(--eng); } .legend__dot--oem { background: var(--oem); } .legend__dot--ch { background: var(--ch); }
.legend__line { width: 20px; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0, var(--accent) 4px, transparent 4px, transparent 8px); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 600px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); margin-top: 8px; }
.stats__item { padding: 16px 10px; text-align: center; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.stats__item:last-child { border-right: 0; }
.stats__item dd { font-size: 24px; font-weight: 600; color: var(--accent); letter-spacing: -.02em; line-height: 1; }
.stats__item dt { color: var(--ink-3); font-size: 13px; letter-spacing: .06em; line-height: 1.3; }

/* ------------------------------------------------------------ services */
.services { padding-top: 88px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.card__num { color: var(--accent); }
.card__title { font-size: 23px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.card__text { color: var(--ink-2); }
.card__note { color: var(--ink-3); font-size: 16px; }
.card__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-3); display: flex; justify-content: space-between; gap: 12px; letter-spacing: .06em; }
.card__terms { color: var(--accent); text-align: right; }

/* ------------------------------------------------------------ scope */
.scope { padding: 0 0 96px; }
.scope .eyebrow { margin-bottom: 20px; }
.scope__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.scope__item { padding: 22px 24px 8px 0; display: flex; flex-direction: column; gap: 8px; }
.scope__item + .scope__item { padding-left: 24px; border-left: 1px solid var(--line); }
.scope__title { font-size: 17px; font-weight: 600; }
.scope__text { font-size: 16px; color: var(--ink-2); }

/* ------------------------------------------------------------ storyboard */
.story { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; padding-top: 34px; counter-reset: frame; }
.frames::before { content: ""; position: absolute; left: 7px; right: 7px; top: 6px; border-top: 1.5px dashed #b8c8dc; }
.frame { display: flex; flex-direction: column; gap: 14px; position: relative; }
.frame::before { content: ""; position: absolute; top: -34px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--op); box-shadow: 0 0 0 4px rgba(0,102,204,.12); }
.frame--eng::before { background: var(--eng); box-shadow: 0 0 0 4px rgba(0,166,80,.12); }
.frame--oem::before { background: var(--oem); box-shadow: 0 0 0 4px rgba(204,102,0,.12); }
.frame__label { color: var(--op); min-height: 38px; letter-spacing: .06em; }
.frame--eng .frame__label { color: var(--eng-text); }
.frame--oem .frame__label { color: var(--oem-text); }
.frame__box { background: var(--surface-2); border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.frame__caption { font-size: 15px; color: var(--ink-2); }
.msg { background: var(--surface); border: 1px solid var(--line); padding: 10px 12px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.msg__meta { display: block; color: var(--ink-3); font-size: 13px; margin-bottom: 4px; letter-spacing: .06em; }
.msg--voice { display: flex; align-items: center; gap: 10px; }
.msg--voice .mono { margin-left: auto; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.msg__avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.msg__wave { display: block; width: 46px; height: 18px; background: repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 6px); mask: linear-gradient(90deg, #000 0, #000 100%); clip-path: polygon(0 35%, 12% 10%, 25% 45%, 38% 0, 50% 55%, 62% 20%, 75% 60%, 88% 25%, 100% 45%, 100% 55%, 88% 75%, 75% 40%, 62% 80%, 50% 45%, 38% 100%, 25% 55%, 12% 90%, 0 65%); }
.msg--photo { background: #e9ecf0; border-color: #dfe3e8; min-height: 64px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.msg--answer { border-left: 3px solid var(--accent); color: var(--ink); }
.frame__machine { color: var(--ink-3); font-size: 13px; letter-spacing: .04em; }
.frame__src { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 13px; line-height: 1.45; }
.frame__src-label { color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.ticket { background: var(--surface); border: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.ticket__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14.5px; flex-wrap: wrap; }
.ticket__status { white-space: nowrap; }
.ticket__status { color: var(--eng-text); }
.ticket__text { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.frame__box--journal { gap: 0; }
.journal__row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; line-height: 1.4; }
.journal__row:last-child { border-bottom: 0; }
.journal__t { color: var(--ink-3); letter-spacing: .04em; }
.journal__t--accent { color: var(--oem-text); }

/* ------------------------------------------------------------ dashboard */
.dash__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); }
.panel__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line); letter-spacing: .06em; }
.panel__sub { color: var(--ink-3); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.tile { padding: 16px 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.tile:last-child { border-right: 0; }
.tile__label { color: var(--ink-3); letter-spacing: .06em; }
.tile__value { font-size: 28px; font-weight: 600; line-height: 1.1; }
.state { padding: 18px 20px 20px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.state__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; letter-spacing: .06em; }
.state__total { color: var(--ink-3); }
.state__bar { display: flex; gap: 2px; height: 22px; }
.state__seg { display: block; flex-basis: 0; }
.state__seg--ok { background: var(--ok); } .state__seg--plan { background: var(--plan); } .state__seg--down { background: var(--down); }
.state__legend { display: flex; gap: 2px; }
.state__item { flex-basis: 0; display: flex; flex-direction: column; gap: 2px; min-width: 176px; }
.state__item:first-child { min-width: 0; }
.state__pct { font-size: 15px; font-weight: 600; }
.state__n { font-weight: 400; color: var(--ink-3); }
.state__label { font-size: 13px; letter-spacing: .06em; }
.state__label--ok { color: var(--ok-text); } .state__label--plan { color: var(--plan); } .state__label--down { color: var(--down); }
.state__label::before { content: "■ "; }
.tree { display: grid; grid-template-columns: minmax(0, 1fr) 236px 56px 56px 56px; }
.tree__cols { display: contents; }
.tree__cols > span { padding: 12px 20px 6px; letter-spacing: .06em; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.tree__cols > span:first-child { grid-column: 1 / 3; }
.tree__col { padding-left: 8px !important; font-size: 13px; white-space: nowrap; }
.tree__col--mgmt { color: var(--oem-text) !important; } .tree__col--head { color: var(--eng-text) !important; } .tree__col--op { color: var(--op) !important; }
.tree__row { display: contents; }
.tree__name, .tree__status { padding: 9px 16px 9px 20px; display: flex; align-items: center; gap: 10px; }
.tree__status { padding-left: 8px; }
.tree__row--l0 .tree__name { font-weight: 600; padding-top: 12px; }
.tree__row--l1 .tree__name { font-weight: 500; padding-left: 40px; }
.tree__row--l2 .tree__name { padding-left: 56px; }
.tree__row--l3 .tree__name { padding-left: 76px; font-size: 15px; }
.tree__row--hl .tree__name, .tree__row--hl .tree__status { background: #f3f6fa; }
.tree__row--muted .tree__name { color: var(--ink-3); }
.tree__row:last-child .tree__name, .tree__row:last-child .tree__status { padding-bottom: 18px; }
.tree__id { color: var(--ink-3); width: 66px; flex-shrink: 0; letter-spacing: .04em; font-size: 13px; }
.tree__caret { width: 0; height: 0; border-left: 5px solid var(--ink-3); border-top: 4px solid transparent; border-bottom: 4px solid transparent; flex-shrink: 0; }
.tree__caret--open { transform: rotate(90deg); }
.tree__status { font-size: 14px; color: var(--ink-3); }
.tree__status--ok { color: var(--ok-text); } .tree__status--plan { color: var(--plan); } .tree__status--down { color: var(--down); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.tree__scope { margin-left: 16px; position: relative; }
.tree__scope--mgmt { border-left: 2px solid var(--oem); } .tree__scope--head { border-left: 2px solid var(--eng); } .tree__scope--op { border-left: 2px solid var(--op); }
/* coverage brackets: short caps at the first and last row of each run */
.tree__scope--start::before, .tree__scope--end::after { content: ""; position: absolute; left: -2px; width: 9px; height: 2px; background: currentColor; }
.tree__scope--start::before { top: 0; } .tree__scope--end::after { bottom: 0; }
.tree__scope--mgmt { color: var(--oem); } .tree__scope--head { color: var(--eng); } .tree__scope--op { color: var(--op); }
.tree__row:last-child .tree__scope { margin-bottom: 18px; }
.roles { display: flex; flex-direction: column; gap: 14px; }
.role { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ink); padding: 20px 20px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.role--op { border-left-color: var(--op); } .role--head { border-left-color: var(--eng); } .role--mgmt { border-left-color: var(--oem); }
.role--eng { background: var(--surface-2); }
.role__title { font-size: 17px; font-weight: 600; }
.role__text { font-size: 15px; color: var(--ink-2); }
.roles__note { font-size: 15px; color: var(--ink-3); margin-top: 6px; }

/* ------------------------------------------------------------ experience + contact */
.about { border-top: 1px solid var(--line); }
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 80px; }
.experience .eyebrow { margin-bottom: 14px; }
.experience__in { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 40px; margin-top: 32px; align-items: start; }
.photo { display: flex; flex-direction: column; gap: 10px; }
.photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--line); }
.photo figcaption { color: var(--ink-3); letter-spacing: .06em; }
.timeline__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.timeline__row:last-child { border-bottom: 1px solid var(--line); }
.timeline dt { color: var(--accent); padding-top: 3px; letter-spacing: .04em; }
.timeline dd { color: var(--ink-2); font-size: 17px; }
.contact { display: flex; flex-direction: column; gap: 20px; }
.contact__email { font-size: 30px; font-weight: 600; letter-spacing: -.02em; word-break: break-all; }
.contact__entity { color: var(--ink-2); }

/* --------------------------------------------------- chinese version */
/* IBM Plex has no CJK glyphs: Latin, digits and punctuation stay in Plex (unicode-range),
   Han characters fall through to the system CJK font that every Chinese device ships with.
   No web font is downloaded for them, so the site still makes no third-party requests. */
html[lang="zh"] {
  --sans: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --mono: "IBM Plex Mono", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", monospace;
}
html[lang="zh"] body { line-height: 1.7; }
/* uppercase and tracking are Latin devices; for Han text they do nothing useful or hurt legibility */
html[lang="zh"] .mono, html[lang="zh"] .eyebrow, html[lang="zh"] .tag, html[lang="zh"] .frame__src-label,
html[lang="zh"] .brand__tag, html[lang="zh"] .lang a, html[lang="zh"] .tree__col, html[lang="zh"] .tree__id,
html[lang="zh"] .site-footer__legal, html[lang="zh"] .stats__item dt, html[lang="zh"] .tile__label, html[lang="zh"] .state__label,
html[lang="zh"] .diagram__text summary, html[lang="zh"] .photo figcaption, html[lang="zh"] .legend { letter-spacing: 0; text-transform: none; }
html[lang="zh"] .hero__title { letter-spacing: 0; }
html[lang="zh"] .section__title { letter-spacing: 0; }
/* Latin bits that should keep their small caps look even on the Chinese page */
html[lang="zh"] .brand__tag { letter-spacing: 0.06em; }

/* ------------------------------------------------------------ footer */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); }
.site-footer__in { padding: 28px 0 32px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; color: var(--ink-3); }
.site-footer__privacy { color: var(--accent); justify-self: end; }
.site-footer__legal { grid-column: 1 / -1; text-transform: none; letter-spacing: .04em; }

/* ------------------------------------------------------------ legal page */
.legal { padding: 72px 0 120px; max-width: 760px; }
.legal__back { display: inline-block; margin-bottom: 32px; color: var(--accent); }
.legal__title { font-size: 40px; font-weight: 600; letter-spacing: -.02em; line-height: 1.12; margin-bottom: 14px; }
.legal__updated { color: var(--ink-3); margin-bottom: 36px; }
.legal__p { color: var(--ink-2); margin-bottom: 18px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .hero__in { grid-template-columns: minmax(0, 1fr) 480px; gap: 32px; }
  .diagram { width: 480px; height: 480px; }
  .hero__title { font-size: 48px; }
  .dash__grid { grid-template-columns: minmax(0, 1fr); }
  .roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roles__note { grid-column: 1 / -1; }
  .about__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
}
@media (max-width: 900px) {
  body { font-size: 16px; }
  .hero { padding: 48px 0 40px; }
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero__title { font-size: 40px; }
  .hero__sub { font-size: 19px; }
  .hero__diagram { align-items: stretch; }
  .hero__diagram-title { font-size: 20px; }
  .diagram { width: min(100%, 420px); height: auto; aspect-ratio: 1; margin-inline: auto; }
  .diagram__core-label-full { display: none; }
  .diagram__core-label-short { display: inline; }
  .stats { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats__item:nth-child(2) { border-right: 0; }
  .stats__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .section { padding: 64px 0; }
  .section__head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 32px; }
  .section__title { font-size: 30px; }
  .section__aside { text-align: left; white-space: normal; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .card { padding: 24px; }
  .scope { padding-bottom: 64px; }
  .scope__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scope__item { padding: 18px 16px 12px 0; }
  .scope__item + .scope__item { padding-left: 16px; }
  .scope__item:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .scope__item:nth-child(4) { border-top: 1px solid var(--line); }
  .frames { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 0; }
  .frames::before { display: none; }
  .frame { padding-left: 26px; }
  .frame::before { top: 4px; }
  .frame__label { min-height: 0; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile { padding: 12px 14px; }
  .tile__value { font-size: 24px; }
  .state__legend { flex-direction: column; gap: 8px; }
  .state__item { min-width: 0; flex-direction: row; align-items: baseline; gap: 12px; }
  .state__pct { white-space: nowrap; }
  /* tree: no brackets; name and status full width, role access on a third row
     aligned under the Рук. / Нач. / Опер. column headers: dot = access, dash = none */
  .tree { grid-template-columns: minmax(0, 1fr) 52px 52px 52px; }
  .tree__cols > span:first-child { grid-column: 1; }
  .tree__col { padding-left: 0 !important; padding-right: 0 !important; text-align: center; font-size: 13px; }
  .tree__name { grid-column: 1 / -1; padding: 10px 16px 2px; align-items: flex-start; }
  .tree__caret { margin-top: 8px; }
  .tree__status { grid-column: 1 / -1; padding: 0 16px 4px; align-items: flex-start; }
  .tree__status .dot { margin-top: 6px; }
  .tree__row--l1 .tree__name { padding-left: 16px; }
  .tree__row--l2 .tree__name { padding-left: 32px; }
  .tree__row--l2 .tree__status { padding-left: 32px; }
  .tree__row--l3 .tree__name { padding-left: 48px; }
  .tree__row--l3 .tree__status { padding-left: 48px; }
  .tree__scope { margin: 0; border-left: 0; display: flex; align-items: center; justify-content: flex-end; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
  .tree__scope--first { grid-column: 1 / 3; }
  .tree__scope::after { content: none; }
  .tree__scope::before { content: "—"; position: static; width: 52px; height: 22px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; line-height: 1; background: none; }
  .tree__scope--mgmt::before, .tree__scope--head::before, .tree__scope--op::before { content: ""; background: radial-gradient(circle, currentColor 5px, transparent 5.5px); }
  .tree__scope--mgmt { color: var(--oem); } .tree__scope--head { color: var(--eng); } .tree__scope--op { color: var(--op); }
  .tree__row--hl .tree__scope { background: #f3f6fa; }
  .tree__row:last-child .tree__name, .tree__row:last-child .tree__status { padding-bottom: 4px; }
  .tree__row:last-child .tree__scope { margin-bottom: 0; padding-bottom: 18px; border-bottom: 0; }
  .tree__row--l3 .tree__name .tree__id { width: auto; }
  .roles { grid-template-columns: minmax(0, 1fr); }
  .experience__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .contact__email { font-size: 24px; }
  .site-header__in { min-height: 72px; }
  .brand__name { font-size: 20px; }
  .site-header__nav { gap: 12px; }
  .open-app { font-size: 15px; }
}
@media (max-width: 480px) {
  .mono, .eyebrow, .tag, .brand__tag, .lang a, .stats__item dt, .ticket__text, .journal__row { font-size: 14px; }
  .tree__col { font-size: 14px; letter-spacing: .02em; }
  .hero__title { font-size: 34px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .tile:last-child { border-bottom: 0; }
  .tile__value { font-size: 22px; }
  .diagram__core { width: 22%; height: 22%; }
  .diagram__core-pulse2 { display: none; }
  .diagram__core-pulse { inset: -6px; }
  .diagram__tip { white-space: normal; }
  .diagram__text ul { columns: 1; }
  .site-footer__in { grid-template-columns: minmax(0, 1fr); }
  .site-footer__legal { grid-column: auto; }
  .site-footer__privacy { justify-self: start; order: 3; margin-top: 4px; }
  .scope__grid { grid-template-columns: minmax(0, 1fr); }
  .scope__item + .scope__item { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .site-header__in { flex-wrap: wrap; padding: 12px 0; }
  .site-header__nav { width: 100%; justify-content: space-between; }
  .section__title { font-size: 26px; }
}