/* ── шрифти: самостійно розміщені, кирилиця й латиниця ── */
@font-face { font-family: "Tektur"; font-weight: 400 900; font-stretch: 75% 100%; font-display: swap;
  src: url("/assets/fonts/tektur-cyrillic-standard-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Tektur"; font-weight: 400 900; font-stretch: 75% 100%; font-display: swap;
  src: url("/assets/fonts/tektur-latin-standard-normal.woff2") 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Geologica"; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/geologica-cyrillic-standard-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geologica"; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/geologica-latin-standard-normal.woff2") 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }

:root {
  --graphite: #1F2526;   /* темна основа */
  --graphite-2: #283031;
  --line-d: #3A4344;
  --concrete: #CFCBBF;   /* текст і штрихи на темному */
  --paper: #ECE9E1;      /* світла основа */
  --paper-2: #E0DCD1;
  --line-l: #C9C4B7;
  --ink: #1F2526;
  --muted-l: #555E5F;
  --muted-d: #A3A89F;
  --signal: #FF5A1F;     /* лише рамки детекцій і стан «увага» */
  --ok: #7FBF8E;
  --disp: "Tektur", "Arial Narrow", sans-serif;
  --text: "Geologica", "Segoe UI", sans-serif;
  --gut: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-d) var(--graphite); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { background: var(--paper); color: var(--ink); font: 300 18px/1.6 var(--text); font-feature-settings: "kern"; overflow-x: hidden; }
::selection { background: var(--signal); color: var(--graphite); }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.wrap { width: min(var(--max), 100% - 2 * var(--gut)); margin-inline: auto; }
.todo { background: rgba(255, 90, 31, .16); box-shadow: inset 0 -1px var(--signal); padding: 0 .2em; font-style: normal; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dark { background: var(--graphite); color: var(--concrete); }
.dark a { color: var(--concrete); }

/* типографіка */
.d1 { font: 300 clamp(44px, 7.2vw, 96px)/1.0 var(--text); letter-spacing: -0.04em; text-wrap: balance; }
.d2 { font: 600 clamp(36px, 5.4vw, 84px)/.92 var(--disp); font-stretch: 75%; text-transform: uppercase; letter-spacing: -0.01em; text-wrap: balance; }
.d3 { font: 500 clamp(26px, 2.6vw, 36px)/1.12 var(--text); letter-spacing: -0.025em; text-wrap: balance; }
.h4 { font: 600 22px/1.15 var(--disp); font-stretch: 82%; letter-spacing: .01em; }
.lead { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.55; max-width: 60ch; }
.muted { color: var(--muted-l); }
.dark .muted { color: var(--muted-d); }
p { max-width: 68ch; text-wrap: pretty; }
.prose p + p { margin-top: 1em; }

/* кнопки й посилання-дії */
.btn { display: inline-flex; align-items: center; gap: 12px; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 600 17px/1 var(--disp); font-stretch: 85%; letter-spacing: .02em; padding: 18px 26px; border-radius: 2px;
  transition: background-color .3s var(--ease), color .3s var(--ease); }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: #333B3C; }
.dark .btn-solid { background: var(--concrete); color: var(--graphite); }
.dark .btn-solid:hover { background: #E4E0D4; }
.btn-ghost { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.btn-ghost:hover { background: rgba(127,127,127,.12); }
.btn .arr { width: 16px; height: 10px; }

/* ── шапка ── */
.hdr { position: fixed; inset: 0 0 auto; z-index: 60; color: var(--concrete); transition: background-color .4s var(--ease), color .4s var(--ease), transform .45s var(--ease); }
.hdr.on-light { color: var(--ink); }
.hdr.solid { background: rgba(31, 37, 38, .94); color: var(--concrete); }
.hdr.solid.on-light { background: rgba(236, 233, 225, .95); color: var(--ink); box-shadow: 0 1px 0 var(--line-l); }
.hdr.hide { transform: translateY(-100%); }
.hdr .wrap { display: flex; align-items: center; height: 76px; gap: 36px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 700 22px var(--disp); font-stretch: 80%; letter-spacing: .04em; }
.logo svg { width: 30px; height: 30px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav > a, .nav > button { background: none; border: 0; cursor: pointer; text-decoration: none; padding: 10px 14px; font: 500 16px var(--text); display: inline-flex; gap: 8px; align-items: center; border-radius: 2px; }
.nav > a:hover, .nav > button:hover, .nav > button[aria-expanded="true"] { background: rgba(127,127,127,.14); }
.nav .chev { width: 10px; height: 6px; transition: transform .3s var(--ease); }
.nav button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.hdr .btn { padding: 14px 20px; font-size: 16px; }
.burger { display: none; background: none; border: 0; width: 44px; height: 44px; margin-left: auto; cursor: pointer; }
.burger i { display: block; width: 24px; height: 2px; background: currentColor; margin: 6px auto; transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mega { position: absolute; left: 0; right: 0; top: 76px; background: var(--graphite); color: var(--concrete); border-top: 1px solid var(--line-d);
  clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .5s var(--ease), visibility 0s .5s; }
.mega.open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .5s var(--ease), visibility 0s; }
.mega .wrap { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; padding: 44px 0 52px; height: auto; align-items: start; }
.mega-intro p { color: var(--muted-d); font-size: 16px; margin-top: 12px; }
.mega-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 32px; }
.mega-list a { display: block; text-decoration: none; padding: 14px 0; border-top: 1px solid var(--line-d); }
.mega-list a b { display: block; font: 600 19px var(--disp); font-stretch: 82%; color: var(--concrete); }
.mega-list a span { display: block; font-size: 15px; color: var(--muted-d); margin-top: 2px; }
.mega-list a:hover b { color: #fff; }

/* мобільне меню */
.mnav { position: fixed; inset: 76px 0 0; background: var(--graphite); color: var(--concrete); z-index: 55; overflow-y: auto; padding: 18px var(--gut) 40px;
  clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .5s var(--ease), visibility 0s .5s; }
.mnav.open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .5s var(--ease), visibility 0s; }
.mnav h3 { font: 600 15px var(--text); color: var(--muted-d); margin: 22px 0 6px; }
.mnav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line-d); text-decoration: none; font: 600 22px var(--disp); font-stretch: 82%; }
.mnav .btn { margin-top: 26px; width: 100%; justify-content: center; }

/* ── перший екран ── */
.hero { position: relative; padding-top: 150px; min-height: 100svh; display: flex; flex-direction: column; }
.hero .top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: end; }
.hero .side { padding-bottom: 12px; }
.hero .side p { color: var(--muted-d); }
.hero .acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .stage { position: relative; margin-top: 56px; flex: 1; min-height: 46vh; }
.hero .stage .scan { position: absolute; inset: 0; }
.hero .caption { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0 26px; color: var(--muted-d); font-size: 15px; border-top: 1px solid var(--line-d); }
.hero .caption b { font-weight: 500; color: var(--concrete); }
.d1 .ln { display: block; overflow: hidden; padding-bottom: .06em; }

/* сцена зі штрихами і рамками */
.scan { position: relative; overflow: hidden; --ink: var(--concrete); }
.scan[data-mode="light"] { --ink: #2B3233; }
.scan canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.det { position: absolute; pointer-events: none; opacity: 0; transform: scale(1.04);
  transition: opacity .35s var(--ease) var(--d), transform .5s var(--ease) var(--d);
  background:
    linear-gradient(var(--signal), var(--signal)) left top / 18px 2px no-repeat, linear-gradient(var(--signal), var(--signal)) left top / 2px 18px no-repeat,
    linear-gradient(var(--signal), var(--signal)) right top / 18px 2px no-repeat, linear-gradient(var(--signal), var(--signal)) right top / 2px 18px no-repeat,
    linear-gradient(var(--signal), var(--signal)) left bottom / 18px 2px no-repeat, linear-gradient(var(--signal), var(--signal)) left bottom / 2px 18px no-repeat,
    linear-gradient(var(--signal), var(--signal)) right bottom / 18px 2px no-repeat, linear-gradient(var(--signal), var(--signal)) right bottom / 2px 18px no-repeat; }
.det span { position: absolute; left: 0; bottom: 100%; margin-bottom: 6px; background: var(--signal); color: var(--graphite); font: 600 13px/1 var(--text); padding: 6px 8px; white-space: nowrap; }
.scan.is-seen .det { opacity: 1; transform: none; }

/* ── секції ── */
.sec { padding: clamp(88px, 12vw, 168px) 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.sec-head .lead { justify-self: end; }

/* рішення: список + липка сцена */
.sol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.sol-list { list-style: none; border-top: 1px solid var(--line-l); }
.sol-list li { border-bottom: 1px solid var(--line-l); }
.sol-list a { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; padding: 26px 0; text-decoration: none; }
.sol-list .t { font: 600 clamp(26px, 2.6vw, 38px)/1 var(--disp); font-stretch: 78%; text-transform: uppercase; transition: color .3s var(--ease), transform .45s var(--ease); }
.sol-list .s { grid-column: 1 / -1; color: var(--muted-l); font-size: 16px; max-width: 54ch; }
.sol-list .go { align-self: center; width: 22px; height: 14px; opacity: 0; transform: translateX(-10px); transition: opacity .3s var(--ease), transform .45s var(--ease); }
.sol-list a:hover .t, .sol-list a:focus-visible .t, .sol-list li.cur .t { transform: translateX(10px); }
.sol-list a:hover .go, .sol-list a:focus-visible .go, .sol-list li.cur .go { opacity: 1; transform: none; }
.sol-view { position: sticky; top: 110px; aspect-ratio: 4 / 3.4; background: var(--graphite); }
.sol-view .scan { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
.sol-view .scan.cur { opacity: 1; }
.sol-view .tag { position: absolute; left: 16px; bottom: 14px; z-index: 2; color: var(--concrete); font-size: 14px; }
.sol-thumb { display: none; }

/* ролі */
.roles { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); }
.role-tabs { display: flex; flex-direction: column; border-left: 1px solid var(--line-d); position: relative; }
.role-tabs button { text-align: left; background: none; border: 0; cursor: pointer; padding: 16px 0 16px 24px; font: 500 18px var(--text); color: var(--muted-d); transition: color .3s var(--ease); }
.role-tabs button[aria-selected="true"] { color: var(--concrete); }
.role-tabs .bar { position: absolute; left: -1px; top: 0; width: 2px; height: 56px; background: var(--concrete); transition: transform .5s var(--ease), height .5s var(--ease); }
.role-panel h3 { font: 300 clamp(28px, 3.2vw, 46px)/1.1 var(--text); letter-spacing: -0.03em; color: #F1EEE6; max-width: 22ch; }
.role-panel ul { list-style: none; margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.role-panel li { padding: 16px 0; border-top: 1px solid var(--line-d); color: var(--muted-d); }
.role-panel li b { display: block; color: var(--concrete); font-weight: 500; margin-bottom: 2px; }
.role-panel a { display: inline-block; margin-top: 30px; }
.role-panel[hidden] { display: none; }

/* конвеєр «як це працює» */
.pipe { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding-top: 44px; }
.pipe::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: var(--line-l); }
.pipe .fill { position: absolute; left: 0; top: 10px; height: 1px; width: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.pipe li { list-style: none; position: relative; }
.pipe li::before { content: ""; position: absolute; top: -40px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); transition: background-color .3s; }
.pipe li.on::before { background: var(--ink); }
.pipe .n { font: 600 15px var(--disp); color: var(--muted-l); }
.pipe h3 { font: 600 24px/1.05 var(--disp); font-stretch: 80%; text-transform: uppercase; margin: 8px 0 10px; }
.pipe p { font-size: 16px; color: var(--muted-l); }

/* розгортання */
.deploy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.fence svg { width: 100%; height: auto; }
.spec { width: 100%; border-collapse: collapse; font-size: 16px; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 15px 0; border-top: 1px solid var(--line-d); }
.spec th { font-weight: 500; color: var(--concrete); width: 42%; padding-right: 20px; }
.spec td { color: var(--muted-d); font-variant-numeric: tabular-nums; }
.light .spec th, .spec.l th { color: var(--ink); border-color: var(--line-l); }
.light .spec td, .spec.l td { color: var(--muted-l); border-color: var(--line-l); }

/* точність */
.acc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); }
.formula { font: 300 clamp(28px, 3vw, 44px)/1.15 var(--text); letter-spacing: -0.03em; }
.formula u { text-decoration: none; box-shadow: inset 0 -.12em 0 var(--signal); }
.stairs { list-style: none; counter-reset: s; }
.stairs li { counter-increment: s; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line-l); }
.stairs li::before { content: counter(s); font: 600 40px/1 var(--disp); font-stretch: 75%; color: var(--muted-l); }
.stairs b { display: block; font-weight: 500; }
.stairs span { color: var(--muted-l); font-size: 16px; }

/* галузі */
.inds { border-top: 1px solid var(--line-d); }
.ind { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 260px; gap: 40px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--line-d); text-decoration: none; }
.ind .t { font: 600 clamp(30px, 3.4vw, 52px)/.95 var(--disp); font-stretch: 75%; text-transform: uppercase; }
.ind p { color: var(--muted-d); font-size: 16px; }
.ind .scan { height: 150px; }
.ind:hover .t { color: #fff; }

/* FAQ */
.faq { border-top: 1px solid var(--line-l); max-width: 980px; }
.faq details { border-bottom: 1px solid var(--line-l); }
.faq summary { list-style: none; cursor: pointer; padding: 26px 56px 26px 0; position: relative; font: 500 21px/1.3 var(--text); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after, .faq summary::before { content: ""; position: absolute; right: 10px; top: 50%; width: 18px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
.faq summary::before { transform: rotate(90deg); }
.faq details[open] summary::before { transform: rotate(0); }
.faq details p { padding: 0 56px 28px 0; color: var(--muted-l); }
.dark .faq, .dark .faq details { border-color: var(--line-d); }
.dark .faq details p { color: var(--muted-d); }

/* фінальний заклик */
.cta { padding: clamp(96px, 12vw, 160px) 0; }
.cta .d2 { max-width: 14ch; }
.cta-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.cta-row p { color: var(--muted-d); margin-bottom: 26px; }

/* підвал */
.ftr { padding: 80px 0 32px; border-top: 1px solid var(--line-d); }
.ftr-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
.ftr h3 { font: 500 15px var(--text); color: var(--muted-d); margin-bottom: 14px; }
.ftr ul { list-style: none; display: grid; gap: 9px; font-size: 16px; }
.ftr a { text-decoration: none; }
.ftr a:hover { text-decoration: underline; }
.ftr .mark { margin-top: 72px; height: clamp(110px, 16vw, 230px); }
.ftr .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 24px; font-size: 14px; color: var(--muted-d); }

/* ── внутрішні сторінки ── */
.page-hero { padding: 170px 0 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; font-size: 15px; color: var(--muted-d); margin-bottom: 30px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.page-hero .grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: end; }
.page-hero .side p { color: var(--muted-d); }
.page-hero .stage { margin-top: 56px; aspect-ratio: 21 / 8; position: relative; }
.page-hero .stage .scan { position: absolute; inset: 0; }
.page-hero.plain { padding-bottom: clamp(72px, 9vw, 120px); }
.split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.split > h2 { position: sticky; top: 110px; }
.events { list-style: none; border-top: 1px solid var(--line-l); }
.events li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line-l); }
.events b { font-weight: 500; }
.events span { color: var(--muted-l); font-size: 16px; }
.dark .events, .dark .events li { border-color: var(--line-d); }
.dark .events span { color: var(--muted-d); }
.limits { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.limits li { padding: 20px 0; border-top: 1px solid var(--line-d); color: var(--muted-d); }
.limits b { display: block; color: var(--concrete); font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a, .chips span { text-decoration: none; padding: 10px 16px; box-shadow: inset 0 0 0 1px var(--line-l); font-size: 16px; }
.chips a:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; border-top: 1px solid var(--line-l); }
.related a { padding: 24px 0; text-decoration: none; border-bottom: 1px solid var(--line-l); }
.related b { display: block; font: 600 22px/1.05 var(--disp); font-stretch: 80%; text-transform: uppercase; }
.related span { display: block; color: var(--muted-l); font-size: 15px; margin-top: 6px; }

/* картка порушення як в інтерфейсі */
.card-ui { background: var(--graphite-2); color: var(--concrete); border: 1px solid var(--line-d); max-width: 520px; }
.card-ui .shot { aspect-ratio: 16 / 9; position: relative; }
.card-ui .shot .scan { position: absolute; inset: 0; }
.card-ui .bd { padding: 22px 24px 24px; }
.card-ui .st { display: inline-block; font: 600 13px var(--text); padding: 5px 10px; color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.card-ui h3 { font: 500 21px/1.25 var(--text); margin: 14px 0 8px; color: #F1EEE6; }
.card-ui p { font-size: 15px; color: var(--muted-d); }
.card-ui .vb { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.card-ui .vb span { text-align: center; padding: 13px 0; font: 600 15px var(--disp); font-stretch: 85%; }
.card-ui .vb .y { background: var(--signal); color: var(--graphite); }
.card-ui .vb .n { box-shadow: inset 0 0 0 1px var(--line-d); }

/* бібліотека правил */
.lib-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; align-items: center; }
.lib-tools button { background: none; border: 0; box-shadow: inset 0 0 0 1px var(--line-l); padding: 10px 16px; cursor: pointer; font-size: 15px; }
.lib-tools button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.lib-tools input { margin-left: auto; width: 260px; border: 0; box-shadow: inset 0 -1px var(--ink); background: transparent; padding: 10px 2px; font-size: 16px; }
.lib { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; border-top: 1px solid var(--ink); }
.lib li { list-style: none; display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-l); }
.lib li[hidden] { display: none; }
.lib .n { font: 600 16px/1.5 var(--disp); color: var(--muted-l); font-variant-numeric: tabular-nums; }
.lib b { font-weight: 500; display: block; }
.lib span { font-size: 15px; color: var(--muted-l); }
.lib em { display: inline-block; font-style: normal; font-size: 13px; margin-top: 6px; color: var(--muted-l); }
.lib em.ready::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3E8E52; margin-right: 7px; vertical-align: 1px; }

/* форма */
.form { display: grid; gap: 18px; }
.form label { display: grid; gap: 8px; font-size: 15px; color: var(--muted-d); }
.form input, .form select, .form textarea { background: transparent; border: 0; box-shadow: inset 0 -1px var(--line-d); padding: 12px 0; font-size: 18px; color: var(--concrete); border-radius: 0; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; box-shadow: inset 0 -2px var(--concrete); }
.form select option { color: var(--ink); }
.form textarea { min-height: 110px; resize: vertical; }
.form .note { font-size: 14px; color: var(--muted-d); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact-ways { list-style: none; margin-top: 40px; border-top: 1px solid var(--line-d); }
.contact-ways li { padding: 18px 0; border-bottom: 1px solid var(--line-d); display: grid; grid-template-columns: 180px 1fr; gap: 16px; }
.contact-ways span { color: var(--muted-d); }

/* завантажувач */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--graphite); display: grid; place-items: center; }
.loader .scan { width: min(760px, 86vw); height: min(230px, 28vw); }
.loader.gone { clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); }

/* ── адаптив ── */
@media (max-width: 1080px) {
  .nav, .hdr .wrap > .btn { display: none; }
  .burger { display: block; }
  .hero .top, .sec-head, .page-hero .grid, .cta-row, .deploy, .acc, .split, .contact-grid { grid-template-columns: 1fr; }
  .sec-head .lead { justify-self: start; }
  .split > h2 { position: static; }
  .sol { grid-template-columns: 1fr; }
  .sol-view { display: none; }
  .sol-thumb { display: block; grid-column: 1 / -1; height: 180px; margin-top: 10px; position: relative; }
  .sol-thumb .scan { position: absolute; inset: 0; }
  .roles { grid-template-columns: 1fr; }
  .role-tabs { flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--line-d); }
  .role-tabs button { padding: 12px 16px; white-space: nowrap; }
  .role-tabs .bar { display: none; }
  .role-tabs button[aria-selected="true"] { box-shadow: inset 0 -2px var(--concrete); }
  .pipe { grid-template-columns: 1fr; gap: 0; padding: 0 0 0 34px; }
  .pipe::before, .pipe .fill { left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: 100%; }
  .pipe .fill { transform-origin: 50% 0; transform: scaleY(0); }
  .pipe li { padding: 0 0 30px; }
  .pipe li::before { top: 4px; left: -34px; }
  .ind { grid-template-columns: 1fr; gap: 14px; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .related { grid-template-columns: 1fr; }
  .page-hero .stage { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .role-panel ul, .limits, .lib { grid-template-columns: 1fr; }
  .events li { grid-template-columns: 1fr; gap: 4px; }
  .hero .caption { flex-direction: column; gap: 4px; }
  .lib-tools input { width: 100%; margin-left: 0; }
  .ftr-grid { grid-template-columns: 1fr; }
  .contact-ways li { grid-template-columns: 1fr; gap: 2px; }
  .btn { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* правки після перевірки */
.ftr .mark { position: relative; }
.ftr .mark .scan { position: absolute; inset: 0; }
.page-hero .d1 { font-size: clamp(40px, 5.2vw, 76px); line-height: 1.02; }
.card-ui .st { color: #FF8452; box-shadow: inset 0 0 0 1px #FF8452; }
.dark .stairs li { border-color: var(--line-d); } .dark .stairs span, .dark .stairs li::before { color: var(--muted-d); }
.hdr .btn-solid { background: var(--concrete); color: var(--graphite); }
.hdr .btn-solid:hover { background: #E4E0D4; }
.hdr.on-light .btn-solid { background: var(--ink); color: var(--paper); }
.hdr.solid:not(.on-light) .btn-solid, .hdr:has(.mega.open) .btn-solid { background: var(--concrete); color: var(--graphite); }

/* ═══ v3.1: композиція головної ═══ */
/* курсор-приціл над кадрами */
.scan, [data-live] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='none' stroke='%23FF5A1F' stroke-width='1.5'%3E%3Cpath d='M2 11V2h9M25 2h9v9M34 25v9h-9M11 34H2v-9'/%3E%3Cpath d='M18 14v8M14 18h8'/%3E%3C/g%3E%3C/svg%3E") 18 18, crosshair; }

/* перший екран як монітор */
.hero2 { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto auto; overflow: hidden; }
.monitor { position: absolute; inset: 0; }
.live-wrap { position: absolute; inset: 0; }
.live-wrap > .scan { position: absolute; inset: 0; }
.live-wrap:has(> canvas) > .scan { display: none; }
.live-wrap > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vignette { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(31,37,38,.85) 0%, rgba(31,37,38,0) 22%, rgba(31,37,38,0) 48%, rgba(31,37,38,.92) 82%, var(--graphite) 100%); }
.hud { position: absolute; top: 96px; left: var(--gut); right: var(--gut); display: flex; gap: 22px; align-items: center; z-index: 2; pointer-events: none;
  font: 600 14px var(--disp); font-stretch: 85%; letter-spacing: .08em; color: var(--concrete); }
.hud .rec { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); animation: rec 1.6s steps(2, jump-none) infinite; }
.hud .tc { margin-left: auto; font-variant-numeric: tabular-nums; }
@keyframes rec { 50% { opacity: .2; } }
.hero2-copy { position: relative; z-index: 3; align-self: end; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 48px; align-items: end; padding-top: 40vh; pointer-events: none; }
.hero2-copy a, .hero2-copy .btn { pointer-events: auto; }
.d1.xl { font-size: clamp(48px, 8.4vw, 132px); line-height: .94; letter-spacing: -0.045em; color: #F1EEE6; }
.hero2-side .lead { color: var(--concrete); }
.hero2-side .acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero2-note { position: relative; z-index: 3; padding: 22px 0 26px; margin-top: 36px; border-top: 1px solid var(--line-d); font-size: 14px; color: var(--muted-d); max-width: none; }

/* маніфест */
.manifesto { padding: clamp(120px, 16vw, 220px) 0; }
.mf { font: 300 clamp(34px, 5vw, 76px)/1.06 var(--text); letter-spacing: -0.035em; color: #F1EEE6; max-width: 20ch; text-wrap: balance; }
.mf + .mf { margin-top: clamp(64px, 9vw, 140px); }
.mf:nth-child(even) { margin-left: auto; text-align: right; }
.mf .w { display: inline-block; opacity: .14; transition: none; }

/* горизонтальна галерея рішень */
.hgal { background: var(--paper); overflow: hidden; }
.hgal-pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 110px 0 40px; }
.hgal-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 44px; }
.hgal-head .lead { justify-self: end; }
.hgal-track { display: flex; gap: 20px; padding-left: max(var(--gut), calc((100vw - var(--max)) / 2)); will-change: transform; }
.hpanel { flex: 0 0 min(560px, 78vw); text-decoration: none; display: flex; flex-direction: column; }
.hp-img { position: relative; aspect-ratio: 4 / 3; background: var(--graphite); overflow: hidden; }
.hp-img .scan { position: absolute; inset: 0; transition: transform 1.2s var(--ease); }
.hpanel:hover .hp-img .scan { transform: scale(1.03); }
.hp-txt { padding: 20px 0 0; display: grid; gap: 8px; }
.hp-n { font: 600 14px var(--disp); color: var(--muted-l); font-variant-numeric: tabular-nums; }
.hp-txt h3 { font: 600 clamp(28px, 2.6vw, 40px)/.95 var(--disp); font-stretch: 76%; text-transform: uppercase; }
.hp-txt p { color: var(--muted-l); font-size: 16px; }
.hp-go { display: inline-flex; gap: 10px; align-items: center; font: 600 15px var(--disp); font-stretch: 85%; margin-top: 6px; }
.hp-go .arr { transition: transform .4s var(--ease); }
.hpanel:hover .hp-go .arr { transform: translateX(6px); }
.hgal-bar { height: 1px; background: var(--line-l); margin-top: 40px; position: relative; }
.hgal-prog { position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }

/* словник моделі */
.spec-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; border-top: 1px solid var(--ink); padding-top: 28px; }
.spec-col h3 { font: 500 15px var(--text); color: var(--muted-l); margin-bottom: 18px; }
.spec-col ul { list-style: none; display: grid; gap: 6px; }
.tagw { position: relative; display: inline-block; font: 600 clamp(22px, 2vw, 30px)/1.15 var(--disp); font-stretch: 78%; text-transform: uppercase; padding: 4px 8px; margin-left: -8px; transition: color .3s var(--ease); }
.tagw::before { content: ""; position: absolute; inset: 0; opacity: 0; transform: scale(1.12); transition: opacity .25s var(--ease), transform .45s var(--ease);
  background:
    linear-gradient(var(--signal), var(--signal)) left top / 10px 2px no-repeat, linear-gradient(var(--signal), var(--signal)) left top / 2px 10px no-repeat,
    linear-gradient(var(--signal), var(--signal)) right top / 10px 2px no-repeat, linear-gradient(var(--signal), var(--signal)) right top / 2px 10px no-repeat,
    linear-gradient(var(--signal), var(--signal)) left bottom / 10px 2px no-repeat, linear-gradient(var(--signal), var(--signal)) left bottom / 2px 10px no-repeat,
    linear-gradient(var(--signal), var(--signal)) right bottom / 10px 2px no-repeat, linear-gradient(var(--signal), var(--signal)) right bottom / 2px 10px no-repeat; }
.tagw::after { content: attr(data-conf); position: absolute; left: 0; bottom: 100%; font: 600 11px var(--text); background: var(--signal); color: var(--graphite); padding: 3px 5px; opacity: 0; transition: opacity .25s; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.tagw:hover::before, .tagw.hit::before { opacity: 1; transform: none; }
.tagw:hover::after, .tagw.hit::after { opacity: 1; }

/* шторка переходу між сторінками */
.wipe { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-columns: repeat(24, 1fr); pointer-events: none; }
.wipe i { background: var(--graphite); transform: scaleY(0); transform-origin: 50% 0; }
.wipe.cover i { transform: scaleY(1); }

@media (max-width: 1080px) {
  .hero2-copy { grid-template-columns: 1fr; padding-top: 46vh; gap: 20px; }
  .hgal-head { grid-template-columns: 1fr; }
  .hgal-head .lead { justify-self: start; }
  .hgal-pin { min-height: 0; }
  .hgal-track { flex-direction: column; padding: 0 var(--gut); gap: 40px; }
  .hpanel { flex-basis: auto; }
  .hgal-bar { display: none; }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mf:nth-child(even) { text-align: left; margin-left: 0; }
}
@media (max-width: 640px) { .spec-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mf .w { opacity: 1; } .hud .rec { animation: none; } }
.tagw::after { display: none; }
.hp-go .arr, .acts .arr { width: 16px; height: 10px; flex: none; }

/* стрічка середовищ */
.marq { position: relative; z-index: 3; overflow: hidden; border-top: 1px solid var(--line-d); margin-top: 40px; padding: 18px 0; }
.marq-in { display: flex; width: max-content; animation: marq 48s linear infinite; }
.marq-in span { display: flex; align-items: center; }
.marq b { font: 600 clamp(22px, 2.4vw, 34px)/1 var(--disp); font-stretch: 76%; text-transform: uppercase; color: var(--concrete); padding: 0 28px; white-space: nowrap; }
.marq .ret { width: 18px; height: 18px; color: var(--signal); flex: none; }
@keyframes marq { to { transform: translateX(-50%); } }
.hero2-note { margin-top: 0; }
/* інші галузі */
.also { margin: 72px 0 24px; color: var(--muted-d); font-family: var(--text); font-weight: 500; font-size: 16px; }
.also-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
.also-grid a { text-decoration: none; display: grid; gap: 6px; }
.also-img { position: relative; aspect-ratio: 16 / 9; background: #181D1E; overflow: hidden; margin-bottom: 8px; }
.also-img .scan { position: absolute; inset: 0; }
.also-grid b { font: 600 24px/1 var(--disp); font-stretch: 78%; text-transform: uppercase; }
.also-grid span { color: var(--muted-d); font-size: 15px; }
.also-grid a:hover b { color: #fff; }
@media (max-width: 1080px) { .also-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .also-grid { grid-template-columns: 1fr; } .vignette { background: linear-gradient(180deg, rgba(31,37,38,.85) 0%, rgba(31,37,38,.2) 20%, rgba(31,37,38,.55) 45%, rgba(31,37,38,.95) 70%, var(--graphite) 100%); } }
@media (prefers-reduced-motion: reduce) { .marq-in { animation: none; } }
.badge-p { display: inline-block; font: 600 14px var(--text); padding: 6px 12px; margin-bottom: 22px; box-shadow: inset 0 0 0 1px var(--ok); color: var(--ok); } .badge-p.new { box-shadow: inset 0 0 0 1px var(--muted-d); color: var(--muted-d); }

/* ═══ v3.2: правки за критикою ═══ */
/* Tektur лише великими літерами; малі літери — Geologica */
.btn, .hp-go, .h4, .mega-list a b, .mnav a, .card-ui .vb span, .nav > a, .nav > button { font-family: var(--text); font-stretch: 100%; letter-spacing: 0; }
.btn { font-weight: 500; font-size: 16px; }
.h4 { font-weight: 600; font-size: 19px; }
.mega-list a b { font-weight: 600; font-size: 18px; }
.mnav a { font-weight: 500; font-size: 22px; }
.btn:active { transform: scale(.97); }
.btn { transition: background-color .3s var(--ease), color .3s var(--ease), transform .16s var(--ease); }
html { scrollbar-width: thin; scrollbar-color: #555E5F transparent; }

/* посилання в тексті: підкреслення росте */
.prose a, .faq a, .lead a, .role-panel a, .mega-intro a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .3s var(--ease); padding-bottom: 1px; }
.prose a:hover, .faq a:hover, .lead a:hover, .role-panel a:hover, .mega-intro a:hover { background-size: 0 1px; background-position: 100% 100%; }

/* шапка: розмиття, поточний розділ */
.hdr.solid { background: rgba(31, 37, 38, .78); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); }
.hdr.solid.on-light { background: rgba(236, 233, 225, .8); }
.nav [aria-current] { box-shadow: inset 0 -2px currentColor; }

/* перший екран: читабельність */
.vignette { background:
  linear-gradient(180deg, rgba(31,37,38,.9) 0%, rgba(31,37,38,0) 20%, rgba(31,37,38,0) 40%, rgba(31,37,38,.86) 74%, var(--graphite) 100%),
  radial-gradient(120% 70% at 0% 100%, rgba(31,37,38,.9) 0%, rgba(31,37,38,0) 60%),
  radial-gradient(80% 60% at 100% 100%, rgba(31,37,38,.85) 0%, rgba(31,37,38,0) 60%); }
.hero2-side .lead { font-weight: 400; color: #E4E0D4; text-shadow: 0 1px 18px rgba(31,37,38,.9); }
.d1.xl { text-shadow: 0 2px 40px rgba(31,37,38,.55); }
@media (hover: none) { .hover-hint { display: none; } }

/* підписи детекцій масштабуються з кадром */
.scan { container-type: size; }
.det span { font-size: clamp(10px, 1.6cqw, 13px); }
@container (max-width: 520px) { .det span { padding: 3px 5px; } }
@container (max-width: 300px) { .det span { display: none; } }

/* ритм: менше «мертвих» смуг */
.sec { padding: clamp(72px, 9vw, 128px) 0; }
.sec-head { margin-bottom: clamp(40px, 5vw, 72px); }

/* маніфест: ключова фраза «захоплюється» рамкою */
.manifesto { padding: clamp(96px, 12vw, 168px) 0; }
.mf + .mf { margin-top: clamp(48px, 7vw, 104px); }
.mf .w { opacity: 1; }
.lock { position: relative; white-space: nowrap; color: #fff; }
.lock::before { content: ""; position: absolute; inset: -.08em -.16em; opacity: 0; transform: scale(1.15); transition: opacity .3s var(--ease) .1s, transform .7s var(--ease) .1s;
  background:
    linear-gradient(var(--signal), var(--signal)) left top / .4em 2px no-repeat, linear-gradient(var(--signal), var(--signal)) left top / 2px .4em no-repeat,
    linear-gradient(var(--signal), var(--signal)) right top / .4em 2px no-repeat, linear-gradient(var(--signal), var(--signal)) right top / 2px .4em no-repeat,
    linear-gradient(var(--signal), var(--signal)) left bottom / .4em 2px no-repeat, linear-gradient(var(--signal), var(--signal)) left bottom / 2px .4em no-repeat,
    linear-gradient(var(--signal), var(--signal)) right bottom / .4em 2px no-repeat, linear-gradient(var(--signal), var(--signal)) right bottom / 2px .4em no-repeat; }
.lock.hit::before { opacity: 1; transform: none; }

/* галерея: канали камер, різні формати */
.hp-n { display: none; }
.hp-ch { position: absolute; left: 14px; top: 12px; z-index: 2; font: 600 13px var(--disp); letter-spacing: .08em; color: var(--concrete); }
.hpanel.hp-wide { flex-basis: min(820px, 62vw); } .hpanel.hp-wide .hp-img { aspect-ratio: 16 / 10; }
.hpanel.hp-tall { flex-basis: min(380px, 30vw); } .hpanel.hp-tall .hp-img { aspect-ratio: 3 / 4; }
.hpanel.hp-std { flex-basis: min(520px, 40vw); }
.hpanel.hp-type { flex-basis: min(520px, 40vw); }
.hgal-track { padding-right: var(--gut); align-items: flex-start; }

/* сторінка рішення: «плакат» і «розворот» */
.poster { text-align: left; }
.poster-k { font: 500 16px var(--text); color: var(--muted-l); margin-bottom: 28px; }
.poster-big { font: 300 clamp(30px, 4vw, 60px)/1.1 var(--text); letter-spacing: -0.03em; max-width: 22ch; }
.poster-small { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; margin-top: 48px; max-width: 980px; color: var(--muted-l); }
.spread { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 64px); padding-left: 0; padding-right: 0; }
.spread-img { position: relative; min-height: 640px; }
.spread-img .scan { position: sticky; top: 90px; height: min(78vh, 760px); position: -webkit-sticky; }
.spread-txt { padding: 0 var(--gut) 0 0; max-width: 640px; }
.spread-txt .d2 { margin-bottom: 36px; }
.tech { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); }
.tech .d2 { font-size: clamp(30px, 3.4vw, 52px); margin-bottom: 28px; }
.limits.one { grid-template-columns: 1fr; }

/* завантажувач «камера вмикається» */
.loader { grid-template-rows: auto auto; align-content: center; gap: 22px; }
.ld-hud { display: flex; gap: 10px; align-items: center; justify-self: center; font: 600 14px var(--disp); letter-spacing: .1em; color: var(--concrete); }
.ld-hud .rec { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); }

/* переходи між сторінками (Chrome, Safari 18.2+) */
@view-transition { navigation: auto; }
.hdr { view-transition-name: hdr; }
::view-transition-old(root) { animation: vt-out .22s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .42s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* мобільна версія */
@media (max-width: 1080px) {
  .hgal-track { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 0 var(--gut) 8px; scrollbar-width: none; }
  .hgal-track::-webkit-scrollbar { display: none; }
  .hpanel, .hpanel.hp-wide, .hpanel.hp-tall, .hpanel.hp-std, .hpanel.hp-type { flex: 0 0 82vw; scroll-snap-align: start; }
  .hpanel .hp-img, .hpanel.hp-wide .hp-img, .hpanel.hp-tall .hp-img { aspect-ratio: 4 / 3; }
  .spread { grid-template-columns: 1fr; }
  .spread-img { min-height: 0; aspect-ratio: 4 / 3; margin: 0 var(--gut); }
  .spread-img .scan { position: absolute; inset: 0; height: auto; }
  .spread-txt { padding: 0 var(--gut); }
  .tech { grid-template-columns: 1fr; }
  .poster-small { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fence text { font-size: 19px; }
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: 100%; }
  .spec th { padding-bottom: 2px; } .spec td { border-top: 0; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .lock::before { opacity: 1; transform: none; } @view-transition { navigation: none; } }

/* ролики: несиметрична пара */
.films-grid2 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; align-items: end; }
.films-grid2 figure { margin: 0; }
.films-grid2 video { width: 100%; aspect-ratio: 16 / 9; background: #181D1E; display: block; }
.film-b { margin-bottom: 96px; }
.films-grid2 figcaption { margin-top: 12px; font-size: 15px; color: var(--muted-d); }
@media (max-width: 1080px) { .films-grid2 { grid-template-columns: 1fr; } .film-b { margin-bottom: 0; } }

/* ═══ v4: глибина інформації ═══ */
.stchip { display: inline-block; font: 500 13px/1.2 var(--text); padding: 5px 10px; white-space: nowrap; }
.st-proven { color: #6FCF8A; box-shadow: inset 0 0 0 1px rgba(111,207,138,.55); }
.st-config { color: var(--concrete); box-shadow: inset 0 0 0 1px var(--line-d); }
.st-research { color: #FF9A6B; box-shadow: inset 0 0 0 1px rgba(255,154,107,.5); }
[data-hdr="light"] .st-proven { color: #23743A; box-shadow: inset 0 0 0 1px rgba(35,116,58,.5); }
[data-hdr="light"] .st-config { color: var(--muted-l); box-shadow: inset 0 0 0 1px var(--line-l); }
[data-hdr="light"] .st-research { color: #B4400F; box-shadow: inset 0 0 0 1px rgba(180,64,15,.45); }

.outcomes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 40px; border-top: 1px solid var(--line-d); }
.outcomes li { padding: 22px 0 6px; font: 300 clamp(19px, 1.6vw, 24px)/1.3 var(--text); color: #F1EEE6; letter-spacing: -0.01em; }
.anchors { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 22px 0 34px; margin-top: 28px; border-top: 1px solid var(--line-d); font-size: 15px; }
.anchors a { text-decoration: none; color: var(--muted-d); }
.anchors a:hover { color: var(--concrete); }
.ind-hero { padding-bottom: 0; }

.pains { list-style: none; counter-reset: p; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; border-top: 1px solid var(--ink); }
.pains li { counter-increment: p; display: grid; grid-template-columns: 56px 1fr; gap: 0 12px; padding: 26px 0; border-bottom: 1px solid var(--line-l); }
.pains li::before { content: counter(p); grid-row: span 2; font: 600 42px/1 var(--disp); font-stretch: 75%; color: var(--muted-l); }
.pains h3 { font: 500 21px/1.25 var(--text); letter-spacing: -0.01em; }
.pains p { margin-top: 8px; color: var(--muted-l); font-size: 16px; }
.src { font-size: 13px; color: var(--muted-l); white-space: nowrap; }

.sctab { overflow-x: auto; border-top: 1px solid var(--line-d); }
.sctab table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 860px; }
.sctab th, .sctab td { text-align: left; vertical-align: top; padding: 16px 18px 16px 0; border-bottom: 1px solid var(--line-d); }
.sctab thead th { font: 500 13px var(--text); color: var(--muted-d); padding-top: 14px; }
.sctab tbody th { font-weight: 500; color: #F1EEE6; width: 24%; }
.sctab td { color: var(--muted-d); }
.sctab tbody tr:hover { background: rgba(207,203,191,.04); }
.more { margin-top: 26px; }
.more a { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; font-weight: 500; }
.more .arr { width: 16px; height: 10px; }

.two-col { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); }
.norms, .kpis, .ints { list-style: none; border-top: 1px solid var(--line-d); }
.norms li, .kpis li, .ints li { padding: 18px 0; border-bottom: 1px solid var(--line-d); display: grid; gap: 4px; }
.norms b { font-weight: 500; color: #F1EEE6; }
.norms a { color: #F1EEE6; }
.norms span { color: var(--muted-d); font-size: 16px; }
.kpi-int { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); }
.kpi-int .d2 { font-size: clamp(30px, 3.4vw, 52px); margin-bottom: 26px; }
.kpis, .ints { border-color: var(--ink); }
.kpis li, .ints li { border-color: var(--line-l); }
.kpis b, .ints b { font-weight: 500; }
.kpis span, .ints span { color: var(--muted-l); font-size: 16px; }
.ints em { font-style: normal; font-size: 13px; color: var(--muted-l); }

.uc-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)) minmax(0, 1fr); gap: 16px; align-items: end; padding: 14px 0 22px; border-bottom: 1px solid var(--ink); position: sticky; top: 76px; background: var(--paper); z-index: 5; }
.uc-tools label { display: grid; gap: 6px; font-size: 14px; color: var(--muted-l); }
.uc-tools select, .uc-tools input { border: 0; box-shadow: inset 0 -1px var(--ink); background: transparent; padding: 10px 2px; font-size: 16px; border-radius: 0; color: var(--ink); }
.uc-count { margin: 20px 0 6px; color: var(--muted-l); font-size: 15px; }
.uc-list { list-style: none; }
.uc-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 200px; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--line-l); }
.uc-list li[hidden] { display: none; }
.uc-main h3 { font: 500 19px/1.3 var(--text); }
.uc-main p { color: var(--muted-l); font-size: 15.5px; margin-top: 6px; }
.uc-list dl { display: grid; grid-template-columns: 130px 1fr; gap: 4px 14px; font-size: 14.5px; }
.uc-list dt { color: var(--muted-l); }
.uc-list dd { margin: 0; }
.uc-side { display: grid; gap: 8px; align-content: start; justify-items: start; font-size: 14px; }
.uc-type { color: var(--muted-l); }
.uc-empty { padding: 40px 0; }

.arts { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; border-top: 1px solid var(--ink); }
.arts a { display: grid; gap: 10px; padding: 32px 0; border-bottom: 1px solid var(--line-l); text-decoration: none; }
.a-meta { font-size: 14px; color: var(--muted-l); }
.arts h2 { font: 500 clamp(24px, 2.2vw, 32px)/1.15 var(--text); letter-spacing: -0.02em; }
.arts p { color: var(--muted-l); font-size: 16px; }
.a-go { display: inline-flex; gap: 10px; align-items: center; font-weight: 500; }
.a-go .arr { width: 16px; height: 10px; transition: transform .3s var(--ease); }
.arts a:hover .a-go .arr { transform: translateX(6px); }
.art-h { font-size: clamp(36px, 4.6vw, 68px); max-width: 20ch; }
.art-meta { margin-top: 24px; color: var(--muted-d); font-size: 15px; }
.art-grid { display: grid; grid-template-columns: 260px minmax(0, 720px); gap: clamp(32px, 6vw, 96px); }
.toc { position: sticky; top: 100px; align-self: start; font-size: 15px; }
.toc p { font-weight: 600; margin-bottom: 12px; }
.toc ol { list-style: none; display: grid; gap: 8px; border-left: 1px solid var(--line-l); padding-left: 16px; }
.toc a { text-decoration: none; color: var(--muted-l); }
.toc a:hover, .toc a.on { color: var(--ink); }
.art-body { font-size: 18.5px; line-height: 1.7; }
.art-body h2 { font: 500 clamp(24px, 2.2vw, 32px)/1.2 var(--text); letter-spacing: -0.02em; margin: 56px 0 16px; scroll-margin-top: 100px; }
.art-body p { margin: 0 0 1em; }
.art-body ul, .art-body ol { margin: 0 0 1.2em 1.2em; }
.art-body li { margin-bottom: .4em; }
.art-body table { width: 100%; border-collapse: collapse; margin: 8px 0 24px; font-size: 15.5px; display: block; overflow-x: auto; }
.art-body th, .art-body td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line-l); }
.art-body thead th { font-weight: 600; border-bottom: 1px solid var(--ink); }
.tldr { background: var(--paper-2); padding: 24px 28px; margin-bottom: 12px; }
.tldr-h { font-weight: 600; margin-bottom: 8px !important; }
.sources { font-size: 15px; color: var(--muted-l); }
.glos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; border-top: 1px solid var(--ink); }
.glos div { padding: 20px 0; border-bottom: 1px solid var(--line-l); }
.glos dt { font: 600 20px var(--text); scroll-margin-top: 100px; }
.glos dd { margin: 6px 0 0; color: var(--muted-l); font-size: 16px; }

@media (max-width: 1080px) {
  .outcomes, .pains, .two-col, .kpi-int, .arts, .glos { grid-template-columns: 1fr; }
  .uc-tools { grid-template-columns: 1fr 1fr; position: static; }
  .uc-tools .grow { grid-column: 1 / -1; }
  .uc-list li { grid-template-columns: 1fr; gap: 12px; }
  .art-grid { grid-template-columns: 1fr; }
  .toc { position: static; }
}
.uc-note { margin-top: 18px; color: var(--muted-l); font-size: 15px; max-width: 80ch; }

/* текст першого екрана над живою сценою */
.hero2-copy { z-index: 4; }
.hero2-side { background: rgba(31,37,38,.74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 26px 28px 28px; box-shadow: inset 0 0 0 1px var(--line-d); }
.hero2 .live-wrap .det { z-index: 1; }
@media (max-width: 640px) { .hero2 .live-wrap .det span { display: none; } .hero2-side { padding: 20px; } }

/* як ми працюємо */
.phases { list-style: none; border-top: 1px solid var(--ink); }
.phases li { display: grid; grid-template-columns: 90px minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--line-l); }
.ph-n { font: 600 56px/0.9 var(--disp); font-stretch: 75%; color: var(--muted-l); }
.ph-main h2 { font: 500 clamp(24px, 2.2vw, 32px)/1.15 var(--text); letter-spacing: -0.02em; }
.ph-main p { margin-top: 10px; color: var(--muted-l); }
.ph-time { display: inline-block; font-size: 14px; padding: 4px 10px; box-shadow: inset 0 0 0 1px var(--line-l); margin-bottom: 12px; }
.ph-side p { font-size: 16px; color: var(--muted-l); }
.ph-side b { color: var(--ink); font-weight: 600; }
.cmp { min-width: 900px; }
.cmp th.us, .cmp td.us { color: #F1EEE6; background: rgba(207,203,191,.06); }
.cmp thead th { font-size: 15px; color: var(--concrete); }
@media (max-width: 1080px) { .phases li { grid-template-columns: 1fr; gap: 10px; } }

/* норми на світлому, метрики на темному: чергування після мапи */
[data-hdr="light"] .norms { border-color: var(--ink); }
[data-hdr="light"] .norms li { border-color: var(--line-l); }
[data-hdr="light"] .norms b, [data-hdr="light"] .norms a { color: var(--ink); }
[data-hdr="light"] .norms span { color: var(--muted-l); }
.dark .kpis, .dark .ints { border-color: var(--line-d); }
.dark .kpis li, .dark .ints li { border-color: var(--line-d); }
.dark .kpis span, .dark .ints span, .dark .ints em { color: var(--muted-d); }

/* мобільне переповнення: довгі джерела, селекти, зміст статей */
.pains li > *, .uc-tools > *, .art-grid > *, .two-col > *, .kpi-int > *, .tech > *, .split > *, .contact-grid > * { min-width: 0; }
.src { white-space: normal; overflow-wrap: anywhere; }
.uc-tools select, .uc-tools input { width: 100%; min-width: 0; }
.sources a, .art-body a, .norms a, .toc a { overflow-wrap: anywhere; }
.art-body pre, .art-body code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ═══ v5: головна за правками власника ═══ */
/* перший екран: завжди вміщується, текст читається на 3D */
.hero2 { min-height: 100svh; grid-template-rows: 1fr auto; }
.hero2-copy { padding-top: max(24vh, 150px); padding-bottom: 28px; align-items: end; }
.d1.xl { font-size: clamp(36px, min(5.8vw, 9vh), 108px); line-height: .98; max-width: 13ch; text-wrap: balance; }
.vignette { background:
  linear-gradient(90deg, rgba(31,37,38,.88) 0%, rgba(31,37,38,.62) 34%, rgba(31,37,38,.12) 60%, rgba(31,37,38,0) 72%),
  linear-gradient(180deg, rgba(31,37,38,.85) 0%, rgba(31,37,38,0) 18%, rgba(31,37,38,0) 55%, rgba(31,37,38,.9) 88%, var(--graphite) 100%); }
.hero2-side { max-width: 520px; justify-self: end; }
.hero2-side .lead { font-size: clamp(17px, 1.25vw, 20px); line-height: 1.55; }
.hud .tc { letter-spacing: .06em; }
.principles { position: relative; z-index: 3; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--line-d); padding: 20px 0 26px; }
.principles li { display: grid; gap: 4px; }
.principles b { font: 600 15px/1.3 var(--text); color: #F1EEE6; }
.principles span { font-size: 14px; line-height: 1.45; color: var(--muted-d); }

/* компактна сітка галузей: усе на одному екрані */
.sec-head.tight { margin-bottom: clamp(24px, 3vw, 40px); }
.inds2 { padding: clamp(56px, 7vw, 96px) 0; }
.ind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
.itile { display: grid; grid-template-rows: auto auto auto; gap: 6px; text-decoration: none; position: relative; }
.tile-live { position: relative; aspect-ratio: 16 / 7.6; overflow: hidden; background: #181D1E; margin-bottom: 6px; }
.tile-live > .scan { position: absolute; inset: 0; }
.tile-live > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.it-t { font: 600 clamp(20px, 1.6vw, 25px)/1 var(--disp); font-stretch: 78%; text-transform: uppercase; color: var(--concrete); transition: color .25s var(--ease); }
.it-d { font-size: 14px; line-height: 1.4; color: var(--muted-d); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.it-p { position: absolute; top: 10px; right: 10px; font: 500 12px var(--text); color: #6FCF8A; background: rgba(31,37,38,.8); padding: 4px 8px; box-shadow: inset 0 0 0 1px rgba(111,207,138,.5); z-index: 2; }
.itile:hover .it-t { color: #fff; }
.itile:hover .tile-live { outline: 1px solid var(--signal); outline-offset: 0; }
.ind-more { margin-top: 28px; }

/* що помічає камера: напрями з подіями-посиланнями */
.cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--ink); }
.cap { padding: 24px 0 28px; border-bottom: 1px solid var(--line-l); }
.cap h3 { font: 600 clamp(22px, 1.8vw, 28px)/1 var(--disp); font-stretch: 78%; text-transform: uppercase; }
.cap p { margin-top: 10px; color: var(--muted-l); font-size: 15.5px; }
.cap ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.cap a { display: inline-block; text-decoration: none; font-size: 14px; padding: 6px 10px; box-shadow: inset 0 0 0 1px var(--line-l); transition: box-shadow .2s, color .2s; }
.cap a:hover, .cap a:focus-visible { box-shadow: inset 0 0 0 1px var(--signal); color: #B4400F; }

/* AI-модель під задачу */
.cai-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.cai-note { margin-top: 22px; font-size: 15px; color: var(--muted-d); max-width: 52ch; }
.cai-steps { list-style: none; border-top: 1px solid var(--line-d); }
.cai-steps li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--line-d); }
.cai-n { font: 600 34px/1 var(--disp); font-stretch: 75%; color: var(--signal); }
.cai-steps b { display: block; font-weight: 500; font-size: 19px; color: #F1EEE6; }
.cai-steps span { color: var(--muted-d); font-size: 15.5px; }

/* вигоди на світлому тлі */
.light-roles .role-tabs { border-left-color: var(--line-l); }
.light-roles .role-tabs button { color: var(--muted-l); }
.light-roles .role-tabs button[aria-selected="true"] { color: var(--ink); }
.light-roles .role-tabs .bar { background: var(--ink); }
.light-roles .role-panel h3 { color: var(--ink); }
.light-roles .role-panel li { color: var(--muted-l); border-top-color: var(--line-l); }
.light-roles .role-panel li b { color: var(--ink); }
@media (max-width: 1080px) { .light-roles .role-tabs { border-bottom-color: var(--line-l); } .light-roles .role-tabs button[aria-selected="true"] { box-shadow: inset 0 -2px var(--ink); } }

/* ролики */
.films-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.films-row figure { margin: 0; }
.films-row video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--graphite); }
.films-row figcaption { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding-top: 14px; border-bottom: 1px solid var(--line-l); padding-bottom: 14px; }
.films-row figcaption b { font-weight: 500; }
.films-row figcaption span { grid-column: 1; color: var(--muted-l); font-size: 15px; }
.films-row figcaption em { grid-column: 2; grid-row: 1; font-style: normal; color: var(--muted-l); font-variant-numeric: tabular-nums; }

/* розгортання */
.deploy3 { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--line-d); }
.deploy3 li { padding: 26px 0 8px; }
.dp-n { font: 600 15px var(--disp); color: var(--muted-d); }
.deploy3 h3 { font: 600 clamp(26px, 2.2vw, 34px)/1 var(--disp); font-stretch: 76%; text-transform: uppercase; color: #F1EEE6; margin: 10px 0 14px; }
.deploy3 p { color: var(--muted-d); font-size: 16px; }
.dp-when { margin-top: 12px; font-size: 15px !important; }
.dp-when b { color: var(--concrete); font-weight: 500; }
.dp-note { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line-d); color: var(--muted-d); max-width: none; }
.dp-note a { color: var(--concrete); }

/* як ми працюємо: 6 кроків */
.steps6 { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--ink); }
.steps6 li { padding: 22px 0 24px; border-bottom: 1px solid var(--line-l); display: grid; gap: 6px; }
.steps6 span { font: 600 15px var(--disp); color: var(--muted-l); }
.steps6 b { font: 500 20px/1.25 var(--text); }
.steps6 p { color: var(--muted-l); font-size: 15.5px; }

@media (max-width: 1080px) {
  .principles { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .ind-grid { grid-template-columns: 1fr 1fr; }
  .cap-grid, .deploy3, .steps6 { grid-template-columns: 1fr 1fr; }
  .cai-grid { grid-template-columns: 1fr; }
  .films-row { grid-template-columns: 1fr; }
  .hero2-side { justify-self: start; }
}
@media (max-width: 640px) {
  .hero2-copy { padding-top: 34vh; }
  .principles { grid-template-columns: 1fr; }
  .ind-grid, .cap-grid, .deploy3, .steps6 { grid-template-columns: 1fr; }
  .tile-live { aspect-ratio: 16 / 8; }
}

/* перемикач мови */
.lang { text-decoration: none; font: 600 14px var(--text); letter-spacing: .06em; padding: 8px 10px; box-shadow: inset 0 0 0 1px currentColor; opacity: .85; }
.lang:hover { opacity: 1; }
@media (max-width: 1080px) { .hdr .lang { margin-left: auto; } .burger { margin-left: 8px; } }

/* контакти: усе на одному екрані */
.contact-hero { padding-top: 110px; padding-bottom: 48px; min-height: 100svh; }
.contact-hero .crumbs { margin-bottom: 18px; }
.contact-hero .d1 { font-size: clamp(36px, min(4.6vw, 8vh), 72px); }
.contact-hero .contact-ways { margin-top: 28px; }
.contact-hero .contact-ways li { padding: 12px 0; }
.form { gap: 14px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.f-chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.f-chips legend { font-size: 15px; color: var(--muted-d); margin-bottom: 8px; padding: 0; }
.chip { display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-block; padding: 8px 12px; font-size: 14.5px; color: var(--concrete); box-shadow: inset 0 0 0 1px var(--line-d); transition: box-shadow .2s, background-color .2s, color .2s; }
.chip:hover span { box-shadow: inset 0 0 0 1px var(--muted-d); }
.chip input:checked + span { background: var(--concrete); color: var(--graphite); box-shadow: none; }
.chip input:focus-visible + span { outline: 2px solid var(--concrete); outline-offset: 2px; }
.form textarea { min-height: 72px; }
@media (max-width: 640px) { .f-row { grid-template-columns: 1fr; } }

/* підпис рамки завжди графітом на помаранчевому: .also-grid span перефарбовував його в сірий (axe, контраст 1.28) */
.scan .det span, .also-grid .scan .det span { color: var(--graphite); }

/* 15.10: вузький заголовок на десктопі — праворуч від нього відкривається просвіт, куди live.js ставить дію сцени (Максим: «щоб не ховалася за текст») */
@media (min-width: 1100px) { .hero2 .d1.xl { max-width: 11ch; text-wrap: balance; } }
/* 15.10: менший шрифт заголовка на десктопі — праворуч широкий просвіт для сцени */
@media (min-width: 1100px) { .hero2 .d1.xl { font-size: clamp(44px, min(4.4vw, 7.6vh), 84px); max-width: 11ch; } }

/* 15.10: перший екран у дві колонки — текст ліворуч, сцена праворуч на всю половину (Максим: «малий масштаб») */
@media (min-width: 1100px) {
  .hero2-copy { grid-template-columns: minmax(0, 34rem) 1fr; gap: 26px; align-items: start; align-content: end; }
  .hero2-copy > .d1, .hero2-copy > .hero2-side { grid-column: 1; justify-self: start; }
  .hero2 .d1.xl { font-size: clamp(40px, min(3.9vw, 7.2vh), 76px); max-width: 12ch; }
  .hero2-side { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding: 0; max-width: 31rem; }
  .hero2-side .lead { font-size: clamp(16px, 1.15vw, 19px); }
  .hero2-side .acts { margin-top: 22px; }
}

/* пастка для ботів у формі заявки: людині не видно, бот заповнює */
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }