/* features-v2.css — редизайн секций лендинга #features (карточки + 3D-слоты) и #deep (крупные ряды со слайд-слотами).
   Порт из features-block-v2.html / features-rows-v3.html, адаптирован под токены сайта (variables.css) и шрифт Inter.
   Пустые слоты (#scene-* / #slide-*) — под 3D-модели / скриншоты. Reveal — через общий .ex-rev (landing.js). */

/* ═══════════ #features — карточки с 3D ═══════════ */
.caps-sub{
  margin:-24px auto 0;max-width:52ch;text-align:center;
  font-size:18px;line-height:1.6;color:var(--muted);
}
.caps-grid{
  max-width:1160px;margin:56px auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.caps-grid>.ex-rev{display:flex}
.caps-card{
  position:relative;isolation:isolate;flex:1;
  display:flex;flex-direction:column;
  padding:32px 32px 36px;
  border:1px solid var(--line2);border-radius:var(--radius);
  /* 🔴 Kamron 10.08: «чёрное внутри блоков». Здесь стоял глобальный var(--surface) — #030303,
     фон карточек ПРИЛОЖЕНИЯ, где страница чёрная. Лендинг живёт на своём наборе токенов
     (.ex-root: --bg:#090D12), и на синеватом фоне почти чёрная карточка читалась как дыра.
     Файл портировали из отдельной вёрстки, вместе с чужими переменными.
     Берём ступень лендинга — тот же --panel, что у карточек FAQ ниже по странице. */
  background:var(--panel);   /* без рамп-градиента — сплошной фон */
  transition:transform .3s ease,border-color .3s ease;
}
.caps-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 30%);
  mix-blend-mode:overlay;
}
.caps-card:hover{transform:translateY(-4px);border-color:rgba(47,129,247,.3)}

/* ↓ пустое место под 3D ↓ */
.caps-stage{position:relative;height:260px;margin-bottom:26px;display:flex;align-items:center;justify-content:center}
.caps-stage::before{
  content:"";position:absolute;left:50%;top:50%;
  width:296px;height:296px;margin-left:-148px;margin-top:-148px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,129,247,.20),transparent 68%);filter:blur(6px);
}
.caps-slot{position:relative;width:260px;height:260px}   /* ← иконка, по центру карточки */
.caps-slot img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 10px 22px rgba(0,0,0,.35))}
#scene-flow img{transform:scale(1.1)}   /* лупа — чуть крупнее остальных */

.caps-ct{margin:0;font-weight:800;font-size:clamp(1.3rem,1.7vw,1.55rem);line-height:1.12;letter-spacing:-.02em;color:var(--text)}
.caps-tx{margin:16px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}

/* ═══════════ #deep — крупные ряды со слайдами ═══════════ */
.flow-sub{margin:-24px auto 0;max-width:50ch;text-align:center;font-size:18px;line-height:1.6;color:var(--muted)}
/* одинаковые вертикальные зазоры: заголовок→ряд1 == ряд1→ряд2 == ряд2→ряд3 (margin вместо двойного padding) */
.flow-row{
  max-width:1200px;margin:96px auto 0;
  display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:center;
}
.flow-row .flow-copy{grid-area:1 / 1}
.flow-row .flow-stage{grid-area:1 / 2}
.flow-row--flip{grid-template-columns:1.08fr .92fr}
.flow-row--flip .flow-stage{grid-area:1 / 1}
.flow-row--flip .flow-copy{grid-area:1 / 2;padding-left:44px}   /* «Лента с разметкой» — сдвиг текста чуть правее */

.flow-copy{max-width:36ch}
.flow-kicker{margin:0;font-weight:800;font-size:clamp(1.2rem,2vw,1.55rem);letter-spacing:-.02em;color:var(--blue)}
.flow-title{margin:6px 0 0;font-weight:800;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.08;letter-spacing:-.03em;color:var(--text)}
.flow-text{margin:20px 0 0;font-size:16px;line-height:1.65;color:var(--muted)}

.flow-cta{
  display:inline-flex;align-items:center;gap:9px;margin-top:28px;padding:13px 24px;
  font-weight:700;font-size:15px;color:#0A0A0A;background:var(--blue);
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  transition:transform .25s ease,filter .25s ease;
}
.flow-cta svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none}
.flow-cta:hover{transform:translateY(-2px);filter:brightness(1.08)}

/* ↓ большой пустой слайд под 3D / скриншот ↓ */
.flow-stage{position:relative;aspect-ratio:4/3;min-height:440px}
.flow-stage::before{
  content:"";position:absolute;inset:-10%;pointer-events:none;
  background:
    radial-gradient(52% 52% at 50% 42%,rgba(47,129,247,.18),transparent 72%),
    radial-gradient(70% 40% at 50% 96%,rgba(255,255,255,.05),transparent 70%);
}
.flow-slot{position:absolute;inset:0}   /* ← canvas / model-viewer / <img> */

/* ═══════════ responsive ═══════════ */
@media (max-width:1024px){
  .caps-grid{grid-template-columns:1fr;max-width:560px;gap:20px;margin-top:44px}
  .flow-row,.flow-row--flip{grid-template-columns:1fr;gap:40px;margin-top:64px}
  .flow-row .flow-stage,.flow-row--flip .flow-stage{grid-area:auto}
  .flow-row .flow-copy,.flow-row--flip .flow-copy{grid-area:auto;max-width:none;padding-left:0}
  .flow-stage{min-height:320px;aspect-ratio:16/11}
}
@media (prefers-reduced-motion:reduce){.caps-card,.flow-cta{transition:none}.caps-card:hover{transform:none}}