/* ORBOX · LANDING — page layer on top of tokens/orbox-tokens.css.
   Only tokens; the single literal below is the one ТЗ §2.1 mandates. */
:root{--section-pad:128px;--on-brand:#FFFFFF} /* слово Роба 10.08: воздух по высоте + БЕЛОЕ слово на бронзовой кнопке (повторено трижды; 3.35:1 на --brand — осознанное решение заказчика, ховер уходит в --brand-deep 5.81) */
/* Мультиязычность (слово Роба 10.08): арабский падает в IBM Plex Sans Arabic —
   надстройка стека ПОВЕРХ токенов (файл SSOT не тронут); латиница как была:
   Shapiro/Inter стоят раньше и забирают свои глифы. */
:root{--font-text:"Inter","IBM Plex Sans Arabic",system-ui,sans-serif;--font-display:"Shapiro","Inter","IBM Plex Sans Arabic",system-ui,sans-serif;--font-mono:"JetBrains Mono","IBM Plex Sans Arabic",ui-monospace,monospace}
/* Типографический аудит 10.08 (adaptive-typography): fluid-шкала обязана везти
   трекинг за собой — дисплеи, сжавшиеся к 32–40px, не носят −0.03em десктопа. */
@media (max-width:599px){
  .t-hero{letter-spacing:-.015em}
  .t-section{letter-spacing:-.018em}
}
html.night{--bg:var(--night);--bg-soft:var(--night-raised);--bg-deep:var(--night-field);--panel:var(--night-raised);--panel-2:var(--night-field);--card:var(--night-raised);--card-2:var(--night-field);--ink:var(--on-dark);--ink-90:var(--on-dark);--ink-70:var(--on-dark-70);--ink-60:var(--on-dark-60);--ink-40:var(--on-dark-40);--ink-20:var(--line-on-dark);--ink-10:var(--line-on-dark);--ink-06:var(--fill-on-dark);--line:var(--line-on-dark);--line-2:var(--line-on-dark);--line-control:var(--line-control-on-dark);--focus-ring:var(--brand-soft);--placeholder:var(--on-dark-60);--shadow-1:none;--shadow-2:none;--shadow-3:none;--shadow-4:none}
html.night .st-accent{color:var(--brand-soft)}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
:where(a){color:var(--brand-deep);text-decoration-thickness:1px;text-underline-offset:3px}
:where(a:hover){color:var(--ink)}
:where(html.night) :where(a){color:var(--brand-soft)}
:where(html.night) :where(a:hover){color:var(--on-dark)}
/* Слово Роба 10.08: CTA = цвет НАШЕГО символа. Канон SSOT и держит это сам:
   .btn-primary = --brand #A5876B + --on-brand #12161C (5.42:1, тёмное слово на
   бронзе). Страничные отходы (--on-brand:#FFF, фон brand-deep) сняты. */
.ob-navlink{color:var(--ink-70)}
.ob-navlink:hover{color:var(--ink)}
img,svg{display:block}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}

/* ── rails ── */
.ob-rail{width:100%;max-width:var(--app-shell-max);margin-inline:auto;padding-inline:var(--page-pad)}
.ob-rail--text{max-width:var(--content-max)}
.ob-sec{padding-block:var(--section-pad);position:relative}
.ob-head{display:grid;gap:20px;max-width:640px}
.ob-head .t-section{max-width:15em}
.ob-head .t-body-lead{max-width:34em}
.ob-kicker{font-family:var(--font-mono);font-size:var(--fs-kicker);font-weight:500;color:var(--ink-60);letter-spacing:0}

/* ── topbar ── */
.ob-top{position:sticky;top:0;z-index:30;border-bottom:1px solid transparent;transition:background var(--dur-base) var(--ease-ui),border-color var(--dur-base) var(--ease-ui)}
.ob-top.is-stuck{background:color-mix(in srgb, var(--bg) 86%, transparent);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--line)}
/* Apple §12/§14: материал-шапка с честными фолбэками — без поддержки блюра или при
   reduced-transparency плашка становится глухой, читаемость не торгуется */
@supports not (backdrop-filter:blur(1px)){.ob-top.is-stuck{background:var(--bg)}}
@media (prefers-reduced-transparency:reduce){.ob-top.is-stuck{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){.ob-top.is-stuck{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--line-2)}}
.ob-top-in{display:flex;align-items:center;gap:32px;min-height:72px}
.ob-logo{display:inline-flex;align-items:center;height:26px;flex:none}
.ob-logo img{height:26px;width:auto}
.ob-logo .ob-logo--night,html.night .ob-logo .ob-logo--day{display:none}
html.night .ob-logo .ob-logo--night{display:block}
.ob-nav{display:flex;align-items:center;gap:28px;margin-inline-start:auto}
.ob-navlink{font-family:var(--font-text);font-size:var(--fs-body);font-weight:500;color:var(--ink-70);text-decoration:none}
.ob-navlink:hover{color:var(--ink)}
.ob-top-act{display:flex;align-items:center;gap:12px}
.ob-top .btn{white-space:nowrap}
.ob-lang{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:3px}
.ob-lang-btn{appearance:none;border:0;background:transparent;border-radius:var(--r-pill);min-height:34px;padding:0 14px;font-family:var(--font-text);font-size:var(--fs-caption);font-weight:500;color:var(--ink-70);cursor:pointer;transition:background var(--dur-fast) var(--ease-ui),color var(--dur-fast) var(--ease-ui)}
.ob-lang-btn[aria-pressed=true]{background:var(--ink);color:var(--card-2)}
.ob-lang-btn:hover{color:var(--ink)}

/* ── 01 hero ── ink-грунт (слово Роба: геро на тёмном). Фрагмент рисует грунт сам;
   секция несёт тот же тон под ним — фолбэк без сцены обязан читаться текстом.
   Лестница — зеркало .ob-bookend, грунт --surface-dark (= ink, «standard dark section»). */
.ob-hero{position:relative;min-height:max(760px,100svh);display:grid;align-items:center;padding-block:96px;overflow:clip;--ink:var(--on-dark);--ink-90:var(--on-dark);--ink-70:var(--on-dark-70);--ink-60:var(--on-dark-60);--ink-40:var(--on-dark-40);--ink-20:var(--line-on-dark);--ink-10:var(--line-on-dark);--ink-06:var(--fill-on-dark);--line:var(--line-on-dark);--line-2:var(--line-on-dark);--focus-ring:var(--brand-soft);--shadow-1:none;--shadow-2:none;--shadow-3:none;--shadow-4:none;background:var(--surface-dark);color:var(--on-dark-70)}
html.night .ob-hero{background:var(--night)}
/* декоративные фоны без маунта: проявление после загрузки — грунт фрагмента (sand до
   первого рендера) не должен вспыхивать на тёмной секции */
.ob-hero-bg,.ob-vision-bg{opacity:0;transition:opacity var(--dur-slow) var(--ease-ui)}
.ob-hero-bg.is-up,.ob-vision-bg.is-up{opacity:1}
.ob-hero-bg{position:absolute;inset:0;z-index:0;border:0;width:100%;height:100%;pointer-events:none}
.ob-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:56px;align-items:center}
.ob-hero-copy{display:grid;gap:28px;justify-items:start}
.ob-hero-copy h1 span{display:block}
/* слово Роба 10.08: геро-тайтл крупнее, сабтайтл акцентнее — страничный шаг поверх шкалы */
.ob-hero .t-hero{font-size:clamp(44px,2.2rem + 2.6vw,78px)}
.ob-hero-sub{font-size:var(--fs-sub-title);font-weight:500}
.ob-hero-sub{font-family:var(--font-text);font-size:var(--fs-body-lead);letter-spacing:.005em;color:var(--ink-70);max-width:34ch}
.ob-hero-reserve{aspect-ratio:1/1;width:100%;max-width:520px;justify-self:center}

/* ── shared: split section ── */
.ob-split{display:grid;gap:64px;align-items:start;margin-top:72px}
.ob-split--stack{grid-template-columns:minmax(0,1fr) minmax(0,62%)}
.ob-sticky{position:sticky;top:104px}

/* ── fragment mounts ── */
.ob-mount{position:relative;width:100%;background:var(--bg)}
.ob-mount>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ob-mount--stack{aspect-ratio:3/2;min-height:560px}
#role{overflow-x:clip} /* выпуск сцены за рейл не даёт документу горизонтальной ширины */
/* до краёв (слово Роба): frame сцены зажат кодом на 1.0 — добираем монтажом.
   Асимметричный выпуск: рой (0.144W) на линию тайтла, конец стрелки (0.96W)
   в правый край рейла, ядро выходит на 53.7% — визуальный центр. */
.ob-mount--lines{aspect-ratio:16/9;min-height:560px;max-height:860px}
/* веер fan (слово Роба 11.08) симметричен — выпуск за рейл снят, композиция по рейлу.
   Сцена резервирует нижнюю полусферу кольца, которой у веера нет — пустой низ
   стягивается маунтом, канон-файл сцены не тронут */
@media (min-width:1200px){.ob-mount--lines{margin-top:-40px;margin-bottom:-40px}}
.ob-fb{position:absolute;inset:0;display:none;align-content:center;justify-items:center;gap:12px;padding:32px;text-align:center;background:var(--ink-06)}
.ob-mount[data-state=loading] .ob-fb,.ob-mount[data-state=error] .ob-fb{display:grid}
.ob-mount[data-state=loading] .ob-fb-msg,.ob-mount[data-state=error] .ob-fb-skel{display:none}
.ob-fb-skel{display:grid;gap:12px;width:min(280px,60%)}
.ob-fb-skel i{display:block;height:8px;border-radius:var(--r-pill);background:var(--ink-10);animation:ob-pulse 1.6s var(--ease-ui) infinite}
.ob-fb-skel i:nth-child(2){width:72%;animation-delay:var(--stagger)}
.ob-fb-skel i:nth-child(3){width:48%;animation-delay:calc(var(--stagger)*2)}
.ob-fb-msg{font-family:var(--font-mono);font-size:var(--fs-kicker);color:var(--ink-70)}
@keyframes ob-pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ── 02 рельс-инфографика (донор 00d, dc→статик) ──
   7 шагов × 4 дорожки участников: полилиния передач, точки «ведёт» + ghost
   «участвует», ховер/пин по колонкам, ридаут aria-live, staged reveal.
   Моно — нулевой трекинг (идиома пака, аудит 00e §7); бронза словом = --brand-deep. */
.ob-pill{font-family:var(--font-mono);font-size:var(--fs-kicker);line-height:1.4;padding:5px 10px;border-radius:var(--r-pill);background:var(--ink-06);color:var(--ink-60);white-space:nowrap}
.ob-rig{margin:72px 0 0}
.ob-rig-cap{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between;margin-bottom:30px;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.ob-rig-note,.ob-rig-key{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:0;color:var(--ink-60)}
.ob-rig-legend{display:inline-flex;align-items:center;gap:16px}
.ob-rig-key{display:inline-flex;align-items:center;gap:7px}
.ob-rig-key-dot{width:9px;height:9px;border-radius:50%;background:var(--brand);display:block}
.ob-rig-key-dot--ghost{background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--brand)}
/* перепад ролей по токен-акцентам (слово Роба): дорожка = свой цвет из SSOT */
.ob-rig-lane-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-inline-end:9px;flex:none}
.ob-role-a{background:var(--brand)}
.ob-role-b{background:var(--olive)}
.ob-role-c{background:var(--info)}
.ob-role-d{background:var(--rose)}
.ob-rig-dot--ghost.ob-role-a{background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--brand)}
.ob-rig-dot--ghost.ob-role-b{background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--olive)}
.ob-rig-dot--ghost.ob-role-c{background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--info)}
.ob-rig-dot--ghost.ob-role-d{background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--rose)}
.ob-rig-chart{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 22px;align-items:start}
.ob-rig-lanes{display:grid;grid-template-rows:repeat(4,1fr);height:300px}
.ob-rig-lane{display:flex;align-items:center;font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:0;color:var(--ink-60);white-space:nowrap;transition:color var(--dur-base) var(--ease-ui)}
.ob-rig-lane[data-on=true]{color:var(--brand-deep)}
html.night .ob-rig-lane[data-on=true]{color:var(--brand-soft)}
.ob-rig-field{position:relative}
.ob-rig-plot{position:relative;height:300px}
.ob-rig-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr)}
.ob-rig-cols i{position:relative;background:transparent;transition:background var(--dur-base) var(--ease-ui)}
.ob-rig-cols i::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--brand);opacity:0;transition:opacity var(--dur-base) var(--ease-ui)}
.ob-rig-cols i[data-on=true]{background:var(--ink-06)}
.ob-rig-cols i[data-on=true]::after{opacity:.32}
.ob-rig-guides{position:absolute;inset:0}
.ob-rig-guides i{position:absolute;left:0;right:0;height:1px;background:var(--line)}
.ob-rig-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transition:opacity var(--dur-slow) var(--ease-ui)}
.ob-rig[data-in=true] .ob-rig-line{opacity:1;transition-delay:calc(var(--stagger)*7)}
.ob-rig-dots{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(4,1fr)}
.ob-rig-dot{justify-self:center;align-self:center;width:11px;height:11px;border-radius:50%;background:var(--brand);opacity:0;transform:scale(.6);transition:opacity var(--dur-base) var(--ease-ui),transform var(--dur-base) var(--ease-ui)}
.ob-rig-dot--ghost{background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--brand)}
.ob-rig[data-in=true] .ob-rig-dot{opacity:1;transform:none}
.ob-rig-dot:nth-child(2){transition-delay:calc(var(--stagger)*1)}
.ob-rig-dot:nth-child(3){transition-delay:calc(var(--stagger)*2)}
.ob-rig-dot:nth-child(4){transition-delay:calc(var(--stagger)*3)}
.ob-rig-dot:nth-child(5){transition-delay:calc(var(--stagger)*4)}
.ob-rig-dot:nth-child(6){transition-delay:calc(var(--stagger)*5)}
.ob-rig-dot:nth-child(7){transition-delay:calc(var(--stagger)*6)}
.ob-rig-dot:nth-child(8){transition-delay:calc(var(--stagger)*3)}
.ob-rig-dot:nth-child(9){transition-delay:calc(var(--stagger)*5)}
.ob-rig-dot[data-on=true]{transform:scale(1.45)}
.ob-rig-axis{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--line-2)}
.ob-rig-axis li{display:flex;flex-direction:column;align-items:center;padding:14px 4px 0;font-family:var(--font-display);font-weight:300;font-size:var(--fs-body-lead);letter-spacing:-.01em;color:var(--ink-70);text-align:center;transition:color var(--dur-base) var(--ease-ui)}
.ob-rig-axis li b{font-family:var(--font-mono);font-size:var(--fs-kicker);font-weight:500;letter-spacing:0;color:var(--ink-60);margin-top:5px;transition:color var(--dur-base) var(--ease-ui)}
.ob-rig-axis li[data-on=true]{color:var(--ink)}
.ob-rig-axis li[data-on=true] b{color:var(--brand-deep)}
html.night .ob-rig-axis li[data-on=true] b{color:var(--brand-soft)}
.ob-rig-hits{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr)}
.ob-rig-hits button{appearance:none;border:0;background:transparent;padding:0;margin:0;cursor:pointer;border-radius:var(--r-xs)}
.ob-rig-read{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin:18px 0 0;min-height:38px;padding-top:16px;border-top:1px solid var(--line)}
.ob-rig-read span{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:0}
.ob-rig-read-step{color:var(--ink)}
.ob-rig-read-party{color:var(--brand-deep)}
html.night .ob-rig-read-party{color:var(--brand-soft)}
.ob-rig-read-hint{color:var(--ink-60)}
.ob-rig-list{margin:0;padding:0;list-style:none;display:none}
.ob-rig-list li{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line)}
.ob-rig-li-num{font-family:var(--font-mono);font-size:var(--fs-kicker);font-weight:500;letter-spacing:0;color:var(--ink-60)}
.ob-rig-li-name{flex:1 1 auto;font-family:var(--font-display);font-weight:300;font-size:var(--fs-sub-title);letter-spacing:-.012em;color:var(--ink)}

/* ── 03 stack ── */
.ob-stack{list-style:none;padding:0}
.ob-stack-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;padding:30px 0 30px 18px;border-top:1px solid var(--line);box-shadow:inset 2px 0 0 transparent;transition:box-shadow var(--dur-slow) var(--ease-ui),padding var(--dur-slow) var(--ease-ui)}
.ob-stack-item:last-child{border-bottom:1px solid var(--line)}
.ob-stack-item[data-active=true]{box-shadow:inset 2px 0 0 var(--brand)}
.ob-stack-num{font-family:var(--font-mono);font-size:var(--fs-kicker);color:var(--ink-40);padding-top:6px;transition:color var(--dur-base) var(--ease-ui)}
.ob-stack-title{font-family:var(--font-display);font-size:var(--fs-card-title);font-weight:500;letter-spacing:-.025em;color:var(--ink);transition:color var(--dur-base) var(--ease-ui)}
/* Плавное раскрытие: height 0↔auto интерполируется, поэтому соседние пункты не прыгают, а едут. */
:root{interpolate-size:allow-keywords}
.ob-stack-body{grid-column:2;font-size:var(--fs-body);color:var(--ink-70);max-width:34em;text-wrap:pretty;height:0;overflow:hidden;opacity:0;transform:translateY(4px);transition:height var(--dur-slow) var(--ease-ui),margin-top var(--dur-slow) var(--ease-ui),opacity var(--dur-base) var(--ease-ui),transform var(--dur-base) var(--ease-ui)}
.ob-stack-item[data-active=true] .ob-stack-body{height:auto;opacity:1;transform:none;margin-top:10px}
@keyframes ob-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@supports not (interpolate-size:allow-keywords){
  .ob-stack-body{transition:opacity var(--dur-base) var(--ease-ui)}
  .ob-stack-item[data-active=true] .ob-stack-body{animation:ob-reveal var(--dur-slow) var(--ease-ui) both}
}
.ob-stack-item{cursor:default}
@media (prefers-reduced-motion:reduce){.ob-stack-body{transition:none}.ob-stack-item[data-active=true] .ob-stack-body{animation:none}}
@media print{.ob-stack-body{height:auto;opacity:1;transform:none;transition:none}}
.ob-stack-item[data-active=true] .ob-stack-num{color:var(--brand-deep)}
html.night .ob-stack-item[data-active=true] .ob-stack-num{color:var(--brand-soft)}

/* ── 03 инверсия (слово Роба: «визуальный перепад») ── ночная полоса --night,
   фрагмент подан ВСЕГДА с &theme=night (srcFor его не дублирует), механика
   связки не тронута. Стыки со светлыми соседями — хейрлайны, теней нет. */
.ob-nightband{--ink:var(--on-dark);--ink-90:var(--on-dark);--ink-70:var(--on-dark-70);--ink-60:var(--on-dark-60);--ink-40:var(--on-dark-40);--ink-20:var(--line-on-dark);--ink-10:var(--line-on-dark);--ink-06:var(--fill-on-dark);--line:var(--line-on-dark);--line-2:var(--line-on-dark);--focus-ring:var(--brand-soft);--shadow-1:none;--shadow-2:none;--shadow-3:none;--shadow-4:none;background:var(--night);color:var(--on-dark-70);border-block:1px solid var(--line-on-dark)}
.ob-nightband--ink{background:var(--surface-dark)}
.ob-nightband .ob-mount{background:transparent}
.ob-nightband .ob-stack-item[data-active=true]{box-shadow:inset 2px 0 0 var(--brand-soft)}
.ob-nightband .ob-stack-item[data-active=true] .ob-stack-num{color:var(--brand-soft)}
/* пин-скролл 03 (слово Роба: «застряли на чёрном и скроллим, пока не проскроллим»):
   секция = длинный пробег, состав пришпилен на весь проход, слои гонит скролл */
.ob-pin{padding-block:0;height:260vh}
.ob-pin-stage{position:sticky;top:0;min-height:100svh;display:grid;align-items:center;overflow:clip;padding-block:40px}
/* пин обязан влезать в вьюпорт целиком: состав плотнее только внутри пина */
.ob-pin .ob-head{gap:12px}
.ob-pin .ob-split{margin-top:36px}
.ob-pin .ob-stack-item{padding:16px 0 16px 18px}
.ob-pin .ob-stack-item[data-active=true] .ob-stack-body{margin-top:8px}
@media (max-width:1199px){
  .ob-pin{height:auto;padding-block:var(--section-pad)}
  .ob-pin-stage{position:static;min-height:0;padding-block:0}
}

/* ── 04 role ── целевой вид (скрин Роба 10.08): свежий converge-orbox verbatim,
   ?embed=1&preset=hero — сцена сама несёт 13 источников, ядро, стрелку и tagline
   «One seamless, managed deal». Страничного текста-дубля нет. */
.ob-role-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.ob-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.ob-tag{font-family:var(--font-mono);font-size:var(--fs-kicker);padding:7px 12px;border:1px solid var(--ink-20);border-radius:var(--r-pill);color:var(--ink-70)}
.ob-mount--lines{margin-top:24px}
/* слоган — страничной типографикой под стрелкой выхода (скрин Роба 20:10);
   в сцене он погашен её же параметром &tagline=0 */
.ob-role-sum{position:absolute;left:50%;transform:translateX(-50%);bottom:11%;z-index:1;pointer-events:none;margin:0;text-align:center} /* слово Роба 11.08: под шариком, по центру */
.ob-role-sum span{font-family:var(--font-display);font-size:calc(var(--fs-section)*0.8);font-weight:500;letter-spacing:-.024em;line-height:1.14;color:var(--ink)} /* капелькой мельче секционного (слово Роба) */
@media (max-width:899px){
  .ob-role-sum{left:50%;transform:translateX(-50%);right:auto;top:auto;bottom:5%;text-align:center}
  .ob-role-sum span{font-size:var(--fs-card-title)}
}

/* ── 05 market ── */
.ob-segments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.ob-seg{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md)}
.ob-seg-name{font-family:var(--font-display);font-size:var(--fs-sub-title);font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.ob-seg--phase{border-color:var(--brand);background:var(--brand-glow)}
html.night .ob-seg--phase{border-color:var(--brand-soft);background:var(--fill-on-dark)}
/* ── 05 market ── сухо и сжато (слово Роба 20:14): заголовок слева, знак Orbox
   малым графическим элементом напротив, ростер плотный на весь рейл. */
.ob-market{position:relative;overflow:clip;padding-bottom:calc(var(--section-pad)*1.35)}
/* ── 05: иерархия пересобрана (слово Роба 22:32) — заголовок главный слева,
   справа визуальная игра (arcs, прозрачный bare), сегменты крупными тегами-
   пилюлями, лид Brokerage бронзой с Phase 1 ── */
.ob-market-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px;align-items:center}
.ob-market-copy{display:grid;gap:28px;justify-items:start}
.ob-market .t-section{font-size:clamp(38px,2rem + 1.9vw,58px)} /* слово Роба: заголовок крупнее, сабтайтл прежний */
.ob-market-play{position:relative;min-height:500px}
.ob-market-play-frame{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;opacity:0;transition:opacity var(--dur-slow) var(--ease-ui)}
.ob-market-play-frame.is-up{opacity:1}
.ob-seg-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;max-width:640px}
.ob-seg-tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:500;font-size:var(--fs-body-lead);letter-spacing:-.012em;line-height:1.2;color:var(--ink);padding:9px 18px;border-radius:var(--r-pill);background:var(--ink-06);transition:background var(--dur-fast) var(--ease-ui)}
@media (hover:hover) and (pointer:fine){.ob-seg-tag:hover{background:var(--ink-10)}}
.ob-seg-tag--lead{background:var(--brand);color:var(--on-brand)}
@media (hover:hover) and (pointer:fine){.ob-seg-tag--lead:hover{background:var(--brand-deep)}}
.ob-seg-phase{font-family:var(--font-mono);font-size:var(--fs-kicker);font-weight:500;letter-spacing:0;padding:4px 10px;border-radius:var(--r-pill);background:var(--brand-glow);color:var(--brand-deep)}
@media (max-width:1199px){.ob-market-split{grid-template-columns:minmax(0,1fr)}.ob-market-play{min-height:360px}}
 /* воздух до каркасного глобуса Vision (слово Роба) */


/* ── 06 vision ── композиция донора 00d на нашем 06-mesh-field: сцена с запасом
   за края секции (перескан −26%/−18%, 136×152%), текст-плита inline-block на
   грунте — плоская, прямые края (слово Роба; паспорт фрагмента знает). */
.ob-vision{position:relative;overflow:clip;min-height:min(108vh,1080px);display:grid;align-items:center;padding-block:calc(var(--section-pad)*1.4)}
.ob-vision-bg{position:absolute;top:-26%;left:-18%;width:136%;height:152%;z-index:0;border:0;pointer-events:none}
.ob-vision-in{position:relative;z-index:1;display:inline-block;max-width:min(100%,780px);background:var(--bg);padding:clamp(24px,3vw,40px) clamp(24px,3vw,44px)}
.ob-vision-in .ob-kicker{margin-bottom:24px}
.ob-vision-rail{position:relative;z-index:1}
.ob-vision-lead{font-family:var(--font-display);font-size:var(--fs-section);font-weight:500;letter-spacing:-.028em;line-height:1.05;color:var(--ink);text-wrap:balance;max-width:16em;margin-bottom:20px}
.ob-vision-copy{font-family:var(--font-text);font-size:var(--fs-sub-title);line-height:1.55;color:var(--ink-70);max-width:34em;text-wrap:pretty}

/* ── 07+08 тёмный bookend: закрывающий бит страницы ── */
.ob-bookend{--ink:var(--on-dark);--ink-90:var(--on-dark);--ink-70:var(--on-dark-70);--ink-60:var(--on-dark-60);--ink-40:var(--on-dark-40);--ink-20:var(--line-on-dark);--ink-10:var(--line-on-dark);--ink-06:var(--fill-on-dark);--line:var(--line-on-dark);--line-2:var(--line-on-dark);--focus-ring:var(--brand-soft);--shadow-1:none;--shadow-2:none;--shadow-3:none;--shadow-4:none;background:var(--night);color:var(--on-dark-70)}
html.night #cta{border-top:1px solid var(--line)}
.ob-bookend .ob-sec{padding-block:var(--section-pad)}

/* ── 07 CTA ── полоса ink (слово Роба: перепад «сероватым» от ночного футера),
   генеративка снята по слову Роба 10.08 — состав по референс-скрину:
   центр, две кнопки, email, хейрлайн. */
.ob-bookend--ink{background:var(--surface-dark)}
#cta{position:relative;overflow:clip;display:grid;align-items:center;min-height:min(70vh,700px);padding-block:calc(var(--section-pad)*0.5) clamp(260px,36vh,330px)} /* подбито (слово Роба): сфера выглядывает сильнее, состав в центре зоны над ней — воздух сверху и снизу эквивалентен */
/* «планета» (слово Роба): Thinking Sphere оверскейлом, верхушка выглядывает
   из-под футера; грунт сцены = ink полосы (?ground=ink), стыка нет */
.ob-cta-orb{position:absolute;left:50%;bottom:-746px;transform:translateX(-50%);width:1200px;height:1200px;border:0;pointer-events:none;z-index:0;opacity:0;transition:opacity var(--dur-slow) var(--ease-ui)}
.ob-cta-orb.is-up{opacity:1}
.ob-cta-in{position:relative;z-index:1;display:grid;justify-items:center;text-align:center}
.ob-cta-copy{display:grid;justify-items:center;gap:22px}
.ob-cta-copy .t-hero{max-width:17em;font-weight:300}
.ob-cta-sub{font-family:var(--font-text);font-size:var(--fs-sub-title);font-weight:400;letter-spacing:.005em;line-height:1.5;color:var(--ink-70);max-width:40ch}
.ob-cta-act{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:14px}
.ob-bookend--ink .btn-dark{background:var(--night);color:var(--on-dark)}
@media (hover:hover) and (pointer:fine){.ob-bookend--ink .btn-dark:hover{background:var(--night-hover)}} /* ховер обязан быть видим (Apple §1): ink-pressed на ink-полосе неотличим */
.ob-bookend .ob-mount{background:transparent}


/* ── 08 footer ── донор 00d на SSOT: три колонки (слоган+CTA / Read / Elsewhere),
   легал-строка на хейрлайне, БОЛЬШОЙ вордмарк понизу. Ночь = --night через общий
   .ob-bookend; верхнего бордера нет — 07 и 08 сшиты в одну полосу без шва. */
.ob-foot{padding-block:clamp(72px,8vw,120px) 0;overflow:clip}
.ob-foot-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,4vw,72px);align-items:start}
.ob-foot-brand .ob-kicker{margin-bottom:22px}
.ob-foot-slogan{font-family:var(--font-display);font-weight:500;font-size:var(--fs-card-title);line-height:1.2;letter-spacing:-.014em;color:var(--ink);max-width:20ch}
.ob-foot-brand .btn{margin-top:34px}
.ob-foot-mail{display:flex;width:fit-content;align-items:center;min-height:44px;margin-top:10px;font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:0;color:var(--ink-60);text-decoration:none}
.ob-foot-mail:hover{color:var(--ink)}
.ob-foot-col{display:flex;flex-direction:column;align-items:flex-start;margin-top:-10px}
.ob-foot-head{margin-bottom:14px;font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:0;color:var(--ink-60)}
.ob-foot-link{position:relative;display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-family:var(--font-text);font-size:var(--fs-body-lead);font-weight:400;letter-spacing:0;line-height:1.4;color:var(--ink-70);text-decoration:none;transition:color var(--dur-fast) var(--ease-ui),padding-left var(--dur-base) var(--ease-ui)}
.ob-foot-link::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--brand);transition:width var(--dur-base) var(--ease-ui)}
.ob-foot-link:hover{color:var(--ink);padding-left:20px}
.ob-foot-link:hover::before{width:13px}
.ob-foot-base{margin-top:clamp(56px,7vw,108px);padding-top:26px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between}
.ob-foot-legal{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:0;color:var(--ink-60)}
.ob-foot-mark{display:block;width:100%;height:auto;max-width:none;margin-top:clamp(34px,4.5vw,72px);opacity:.3}

@media (max-width:1199px){
  .ob-split--stack,.ob-role-head{grid-template-columns:minmax(0,1fr)}
  .ob-sticky{position:static}
  .ob-mount--stack{max-width:840px;margin-inline:auto}
  .ob-hero-in{grid-template-columns:minmax(0,1fr)}
  .ob-hero-reserve{display:none}
  .ob-segments{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1099px){
  #cta{min-height:0;padding-block:var(--section-pad)}
}
@media (max-width:899px){
  :root{--section-pad:80px;--page-pad:20px}
  .ob-top .btn{display:none} /* CTA живёт в геро и внизу; шапка 390 = лого + язык */
  .ob-cta-orb{width:760px;height:760px;bottom:-560px}
  .ob-rig-chart{display:none}
  .ob-rig-list{display:block}
  .ob-nav{display:none}
  .ob-hero{min-height:max(640px,100svh)}
  .ob-mount--stack{aspect-ratio:auto;min-height:520px}
  .ob-mount--lines{aspect-ratio:auto;min-height:480px;max-height:none}
  .ob-segments{grid-template-columns:minmax(0,1fr)}
  .ob-foot-grid{grid-template-columns:minmax(0,1fr)}
  .ob-vision{min-height:560px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ob-fb-skel i,.ob-step,.ob-stack-item,.ob-top,.ob-hero-bg,.ob-vision-bg{animation:none;transition:none}
}

/* ── арабское превью (слово Роба 10.08: страница целиком; строки — ryba до
   утверждения клиентом). Связное письмо не терпит разрядки: любой letter-spacing
   рвёт соединения — трекинг в ноль всей странице. Дисплеи получают запас
   интерлиньяжа под выносы и диакритики. RTL-деталь: активная риска пина 03
   переезжает на правую кромку пункта вместе с чтением справа налево. ── */
html[lang="ar"] *{letter-spacing:0}
html[lang="ar"] .t-hero{line-height:1.22}
html[lang="ar"] :is(.t-section,.ob-vision-lead,.ob-foot-slogan,.ob-stack-title){line-height:1.3}
html[dir="rtl"] .ob-pin .ob-stack-item{padding:16px 18px 16px 0}
html[dir="rtl"] .ob-nightband .ob-stack-item[data-active=true]{box-shadow:inset -2px 0 0 var(--brand-soft)}
/* инфографика 02: точки живут в grid и зеркалятся сами, полилиния — в физических
   координатах SVG; зеркало ставит ход ломаной в чтение справа налево */
html[dir="rtl"] .ob-rig-line{transform:scaleX(-1)}

/* React keeps inactive locale spans hidden from both layout and accessibility. */
.ob-showcase [data-locale="en"]{display:contents}
.ob-showcase [data-locale="ar"]{display:none}
html[lang="ar"] .ob-showcase [data-locale="en"]{display:none}
html[lang="ar"] .ob-showcase [data-locale="ar"]{display:contents}

/* Presentation-only accessibility helpers for localized inline and landmark text. */
.ob-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.ob-showcase [data-locale="en"].ob-locale-inline{display:inline}
.ob-showcase [data-locale="ar"].ob-locale-inline{display:none}
html[lang="ar"] .ob-showcase [data-locale="en"].ob-locale-inline{display:none}
html[lang="ar"] .ob-showcase [data-locale="ar"].ob-locale-inline{display:inline}