/* ==========================================================================
   Boostly Synthesis DS — base.css
   Reset · инженерная типографика (Inter Tight / Golos Text / PT Mono)
   · контейнер, hairline-панели, сетки
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  min-height: 100vh; min-height: 100dvh; overflow-x: clip;
  background: var(--bg); color: var(--text-primary);
  font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--duration-base), color var(--duration-base);
}
img, svg, video, canvas { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
button, a.btn, input, select { touch-action: manipulation; }
hr { border: 0; border-top: 1px solid var(--hairline); }
ul.list-reset, ol.list-reset { list-style: none; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-h3); letter-spacing: var(--tracking-h3); color: var(--text-heading); text-wrap: balance; }
p { text-wrap: pretty; }
strong, b { font-weight: 600; }
::selection { background: var(--accent); color: var(--accent-fg); }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
:focus:not(:focus-visible) { outline: none; }

/* ---------- Typography ---------- */
.display { font-family: var(--font-display); font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-weight: var(--weight-display); color: var(--text-heading); }
h1, .h1 { font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); font-weight: var(--weight-h1); }
h2, .h2 { font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); font-weight: var(--weight-h2); }
h3, .h3 { font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); font-weight: var(--weight-h3); }
h4, .h4 { font-size: var(--text-h4); line-height: var(--leading-h4); letter-spacing: var(--tracking-h4); font-weight: var(--weight-h4); }
h5, .h5 { font-size: var(--text-h5); line-height: var(--leading-h5); letter-spacing: var(--tracking-h5); font-weight: var(--weight-h5); }
.h1, .h2, .h3, .h4, .h5 { font-family: var(--font-display); color: var(--text-heading); }
.lead { font-size: var(--text-lead); line-height: var(--leading-lead); letter-spacing: var(--tracking-lead); color: var(--text-secondary); max-width: 34em; }
.lead-mix { font-size: var(--text-lead); line-height: var(--leading-lead); color: var(--text-tertiary); max-width: 34em; }
.lead-mix b { color: var(--text-primary); font-weight: 400; }
.statement { font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); line-height: 1.32; letter-spacing: -0.015em; color: var(--text-primary); }
.body-sm, small { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.caption { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--text-tertiary); }
code, kbd, pre, samp, .mono { font-family: var(--font-mono); font-size: var(--text-mono); }
.mono-xs { font-family: var(--font-mono); font-size: var(--text-mono-xs); letter-spacing: var(--tracking-mono-xs); }
.mono-num { font-family: var(--font-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.serif { font-family: var(--font-display); }
.muted { color: var(--text-secondary); }
.subtle { color: var(--text-tertiary); }
.c-blue { color: var(--blue-fg); } .c-green { color: var(--green-fg); } .c-rose { color: var(--rose-fg); } .c-amber { color: var(--amber-fg); } .c-accent { color: var(--accent-text); }
.c-mint { color: var(--mint-fg); } .c-lilac { color: var(--lilac-fg); }
.ink { color: var(--accent-text); }
mark, .hl { background: var(--green-tint); color: inherit; padding: 0 .12em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hl--blue { background: var(--blue-tint); } .hl--green { background: var(--green-tint); } .hl--amber { background: var(--amber-tint); } .hl--rose { background: var(--rose-tint); }
/* Лейблы и подписи — sentence case, без разрядки (Hallmark 54/67) */
.label, .eyebrow { font-family: var(--font-sans); font-size: var(--text-caption); line-height: var(--leading-label); letter-spacing: var(--tracking-label); color: var(--text-secondary); font-weight: 500; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-primary); }
.eyebrow--plain, .eyebrow--mint, .eyebrow--lilac { color: var(--text-secondary); }

/* Prose */
.prose { font-size: 1rem; line-height: 1.7; color: var(--text-secondary); max-width: var(--container-narrow); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--text-h3); line-height: 1.2; margin-top: 1.8em; }
.prose h3 { font-size: var(--text-h5); margin-top: 1.5em; }
.prose strong { color: var(--text-primary); font-weight: 600; }
.prose a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose li::marker { color: var(--text-tertiary); }
.prose blockquote { font-family: var(--font-display); font-size: var(--text-h5); line-height: 1.45; color: var(--text-heading); padding: 18px 22px; background: var(--bg-soft); border: 1px solid var(--rail); border-left: 2px solid var(--mint); border-radius: var(--radius-md); }
.prose :not(pre) > code { background: var(--surface-sunken); padding: .1em .4em; border-radius: 6px; font-size: .85em; color: var(--text-primary); border: 1px solid var(--hairline); }
.prose img, .prose figure { border-radius: var(--radius-lg); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(var(--space-10), 5vw, 72px); }
.section--line { border-top: 1px solid var(--rail); }
/* Панель: инженерная секция с hairline-рамкой (вместо «плашки») */
.panel { position: relative; border-top: 1px solid var(--rail); background: var(--panel); color: var(--text-primary); padding-block: clamp(var(--space-12), 8vw, 112px); overflow-x: clip; box-sizing: border-box; }
.panel--blue { background: var(--panel-blue); } .panel--rose { background: var(--panel-rose); } .panel--green { background: var(--panel-green); }
.panel--plain { background: var(--bg-soft); color: var(--text-primary); }
.panel--top { border-top: 1px solid var(--rail); }
.panel--flush { padding-block: 0; }
.grid { display: grid; gap: var(--grid-gap, 16px); width: 100%; min-width: 0; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid > *, .split > *, .hero > *, .docs > *, .feature > *, .app > * { min-width: 0; }
.split { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-16); } .split--wide-right { grid-template-columns: 5fr 7fr; } }
.stack > * + * { margin-top: var(--stack, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--space-3)); }
.center { text-align: center; margin-inline: auto; }
/* Страница в рамке с вертикальными рельсами (Tessel frame) */
.frame { max-width: var(--frame); margin-inline: auto; border-inline: 1px solid var(--rail); position: relative; }
@media (max-width: 767px) { .frame { border-inline: 0; } }
.rule { height: 1px; background: var(--rail); border: 0; }
.rule--accent { background: var(--accent-line); }
/* Угловой моно-ярлык секции (Grafit/Tessel signature) */
.sec-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border: 1px solid var(--rail); border-left: 0; border-top: 0; font-family: var(--font-sans); font-size: var(--text-caption); font-weight: 500; color: var(--text-secondary); background: var(--bg); position: absolute; left: 0; top: 0; z-index: 2; }
.sec-tag--right { left: auto; right: 0; border-left: 1px solid var(--rail); border-right: 0; }
/* Фоновая сетка hairline 1px (Grafit exposed grid) */
.gridlines { background-image: repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 32px), repeating-linear-gradient(0deg, var(--hairline) 0 1px, transparent 1px 32px); }

.skip-link { position: absolute; left: 8px; top: -60px; z-index: var(--z-tooltip); background: var(--key-bg); color: var(--key-fg); padding: 10px 14px; border-radius: var(--radius-sm); font-size: var(--text-body-sm); font-weight: 500; }
.skip-link:focus { top: 8px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: calc(-1 * var(--space-px)); overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }