/* Concept 01. Только токены дизайн-системы; свои — ниже, с ролью. */
:root {
  --oc-hdr: 76px;
  --oc-av: clamp(48px, 4.8vw, 76px);         /* человек в ряду */
  --oc-gap: clamp(12px, 1.3vw, 20px);        /* шаг ряда */
  --oc-glow: color-mix(in srgb, var(--g-neon) 50%, transparent);
  --oc-fade: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);  /* маска, не цвет */
}
*, *::before, *::after { box-sizing: border-box; }
body.oc { margin: 0; overflow-x: hidden; }
.oc-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- шапка ---------- */
.oc-hdr {
  position: absolute; inset: 0 0 auto; z-index: 20; height: var(--oc-hdr); background: transparent;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: 0 var(--gutter);
}
.oc-hdr > img { height: 20px; width: auto; }
.oc-hdr__nav { display: flex; gap: var(--sp-5); font-size: var(--fs-small); }
.oc-hdr__nav a { color: var(--text-muted); text-decoration: none; }
.oc-hdr__nav a:hover { color: var(--text); }
.oc-hdr__end { display: flex; gap: var(--sp-2); }

/* ---------- hero ---------- */
.oc-hero {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  padding: calc(var(--oc-hdr) + var(--sp-2)) 0 var(--sp-6);
  background: radial-gradient(70% 55% at 50% 52%, var(--g-green-black), var(--g-black) 78%);
}
.oc-hero__top { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; padding: 0 var(--gutter); }
.oc-eyebrow { color: var(--accent); }
.oc-title { font-size: clamp(40px, 5.6vw, 84px); max-width: 16ch; }
.oc-sub { max-width: 62ch; }

/* три ряда людей: все едут вправо, средний быстрее; края уходят в фейд */
.oc-feed {
  position: relative; display: grid; align-content: center; padding: var(--sp-4) 0; min-width: 0;
}
.oc-rows { display: grid; gap: var(--oc-gap); min-width: 0; overflow: hidden; -webkit-mask-image: var(--oc-fade); mask-image: var(--oc-fade); }
.oc-row { display: flex; gap: var(--oc-gap); width: max-content; will-change: transform; }
.oc-p { position: relative; flex: none; width: var(--oc-av); height: var(--oc-av); border-radius: 50%;
  transition: opacity .7s var(--ease-out), filter .7s var(--ease-out); }
.oc-p img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.oc-feed.is-filtering .oc-p:not(.is-match) { opacity: .16; filter: grayscale(1); }
.oc-feed.is-locked .oc-p:not(.is-chosen) { opacity: .08; filter: grayscale(1); }
.oc-p.is-chosen::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--g-neon), 0 0 40px var(--oc-glow);
}

/* карточка найденного — как стеклянные карточки промо */
.oc-pop {
  position: absolute; z-index: 3; left: 0; top: 0; width: 196px; padding: var(--sp-3) var(--sp-3) var(--sp-4);
  display: grid; justify-items: center; gap: 2px; text-align: center;
  border: 1px solid var(--glass-line); border-radius: var(--r-md); background: var(--glass-bg); backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.oc-pop__img { width: 64px; height: 64px; border-radius: 50%; margin-bottom: var(--sp-2); }
.oc-pop__name { font-size: var(--fs-body); }
.oc-pop__role { font-size: var(--fs-small); color: var(--accent); }
.oc-pop__meta { font-size: var(--fs-micro); color: var(--text-muted); }
.oc-pop__check { position: absolute; top: var(--sp-2); right: var(--sp-2); color: var(--g-neon); }

/* промпт */
.oc-ask { display: grid; justify-items: center; gap: var(--sp-3); padding: 0 var(--gutter); }
.oc-ask__label { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-small); color: var(--text-muted); }
.oc-prompt { width: min(720px, 100%); background: color-mix(in srgb, var(--g-green-black) 70%, transparent); }
.oc-prompt .prompt__input { font-size: var(--fs-lead); }
.oc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }

/* ---------- 01 / Global capacity (светлая, плотная) ---------- */
.oc-cap { padding: var(--sp-7) 0 var(--sp-8); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); background: var(--bg); overflow: hidden; }
.oc-cap__head { display: flex; justify-content: space-between; gap: var(--sp-4); width: 100%; }
.oc-cap__place { display: flex; align-items: center; gap: var(--sp-2); color: var(--text); }
.oc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g-green-500); }
.oc-pills { display: grid; gap: var(--sp-3); min-width: 0; overflow: hidden; -webkit-mask-image: var(--oc-fade); mask-image: var(--oc-fade); }
.oc-pills__row { display: flex; gap: var(--sp-2); width: max-content; will-change: transform; }
.oc-pills__row span { padding: var(--sp-2) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--fs-small); white-space: nowrap; }
.oc-trust-logos { display: grid; justify-items: center; gap: var(--sp-4); text-align: center; width: 100%; }
.oc-trust-logos > p:first-child { border-top: 1px solid var(--line); padding-top: var(--sp-6); width: 100%; margin: 0; }
.oc-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-7); font-size: var(--fs-lead); font-weight: var(--fw-medium); color: var(--text-muted); }
.oc-partners { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-3); }
.oc-partners li { width: 96px; height: 28px; border: 1px dashed var(--line); border-radius: var(--r-sm); }

/* ---------- Enterprise reassurance ---------- */
.oc-reas { padding: var(--sp-8) 0 var(--sp-9); background: var(--bg); }
.oc-h2 { margin: var(--sp-3) 0 var(--sp-6); font-size: var(--fs-h1); font-weight: var(--fw-regular); letter-spacing: var(--ls-head); line-height: var(--lh-head); }
.oc-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); }
.oc-cards li { display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); }
.oc-cards li .icon-tile { margin-bottom: var(--sp-3); }
.oc-cards b { font-size: var(--fs-body); }
.oc-cards span:not(.icon-tile) { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; }
.oc-nums { margin: var(--sp-7) 0 0; padding-top: var(--sp-6); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.oc-nums div { padding: 0 var(--sp-4); border-left: 1px solid var(--line); }
.oc-nums div:first-child { padding-left: 0; border-left: 0; }
.oc-nums dt { font-size: var(--fs-h2); font-weight: var(--fw-regular); letter-spacing: var(--ls-head); line-height: 1; }
.oc-nums dd { margin: var(--sp-2) 0 0; font-size: var(--fs-small); color: var(--text-muted); }

.oc-end { padding: var(--sp-7) 0; }

/* ---------- планшет и телефон ---------- */
@media (max-width: 1080px) { .oc-hdr__nav { display: none; } .oc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  :root { --oc-hdr: 64px; --oc-av: 56px; --oc-gap: 12px; }
  .oc-hdr > img { height: 16px; }
  .oc-title { font-size: clamp(36px, 10.5vw, 46px); }
  .oc-sub, .oc-chips { display: none; }
  .oc-prompt .prompt__input { font-size: var(--fs-body); }
  .oc-pop { width: 168px; }
  .oc-cap__head { flex-direction: column; gap: var(--sp-2); }
  .oc-logos { gap: var(--sp-2) var(--sp-5); font-size: var(--fs-body); }
  .oc-cards { grid-template-columns: 1fr; }
  .oc-nums { grid-template-columns: 1fr 1fr; row-gap: var(--sp-5); }
  .oc-nums div { border-left: 0; padding: 0; }
}
@media (prefers-reduced-motion: reduce) { .oc-pop { opacity: 1; visibility: visible; } }