/* ============================================================
   HERO v2 (стеклянный) — перенос из process2/site2-merged на главную.
   Всё изолировано под .rk-hero2: токены-переменные, сбросы (*, button, h1)
   и все классы живут только внутри блока и не задевают остальной сайт.
   Классы .btn/.wrap/.chip/.hero/.big/.sub/... в main.css отсутствуют —
   коллизий нет, поэтому они оставлены как есть (матчатся только внутри hero).
   ============================================================ */

/* --- Токены дизайн-системы (были :root, скоуплены на обёртку) --- */
.rk-hero2 {
  --color-primary: #000f9f; --color-primary-hover: #000d80; --color-primary-deep: #000b73; --color-primary-bright: #2338c8; --color-on-primary: #ffffff;
  --color-surface-900: #05071b; --color-surface-800: #0a1140; --color-surface-700: #141d6e; --color-surface-grad-1: #070a2b; --color-surface-grad-2: #0d1893;
  --color-white: #ffffff; --color-surface: #ffffff; --color-surface-subtle: #eef1f7; --color-surface-muted: #e2e7f2;
  --color-text-strong: #14161d; --color-text: #474b58; --color-text-muted: #83879a; --color-text-on-dark: #eef0ff; --color-text-on-dark-muted: #b3bce6;
  --color-border: #dfe3ec; --color-border-subtle: #eaedf4; --color-border-on-dark: rgba(255, 255, 255, .13); --color-border-on-dark-strong: rgba(255, 255, 255, .24);
  --color-up: #2f6d25; --color-up-soft: #5cc169; --color-down: #a83232; --color-error: #dc3545; --color-success: #28a745; --color-warning: #856404;
  --font-family: 'Montserrat', sans-serif; --font-family-mono: ui-monospace, monospace;
  --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 800;
  --font-size-2xs: 11px; --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-md: 15px; --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 22px; --font-size-3xl: 26px; --font-size-4xl: 32px; --font-size-5xl: 40px;
  --font-size-display-sm: clamp(28px, 3.0vw, 38px); --font-size-display-md: clamp(32px, 3.8vw, 50px); --font-size-display-lg: clamp(38px, 5.4vw, 67px);
  --line-height-tight: 1.3; --line-height-base: 1.5; --line-height-relaxed: 1.6;
  --tracking-tight: -.02em; --tracking-snug: -.01em; --tracking-normal: 0; --tracking-wide: .04em; --tracking-caps: .1em;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-section: 96px;
  --layout-max: 1200px; --layout-gutter: 32px; --density: 1;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; --radius-round: 50%;
  --shadow-sm: 0 2px 10px  rgba(20, 28, 60, .06); --shadow-md: 0 12px 34px rgba(18, 26, 60, .10); --shadow-lg: 0 26px 64px rgba(9, 13, 48, .20);
  --glass-bg: rgba(255, 255, 255, .55); --glass-border: rgba(255, 255, 255, .78); --glass-hi: rgba(255, 255, 255, .90); --glass-solid: #ffffff; --glass-blur: 18px;
  --glass-dark-bg: rgba(255, 255, 255, .09); --glass-dark-border: rgba(255, 255, 255, .22); --glass-dark-hi: rgba(255, 255, 255, .35); --glass-dark-solid: rgba(16, 22, 54, .90);
  --transition-fast: .2s ease; --transition-base: .3s ease; --transition-medium: .4s ease-in-out;
  --grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nc2F0dXJhdGUnIHZhbHVlcz0nMCcvPjwvc3ZnPg==");
  --blue: var(--color-primary); --blue-bright: var(--color-primary-bright); --brand-mark: var(--color-primary);
  --accent: var(--color-primary); --accent-deep: var(--color-primary-deep); --accent-soft: #9fb1ff; --on-accent: var(--color-on-primary);
  --navy-900: var(--color-surface-900); --navy-800: var(--color-surface-800); --navy-700: var(--color-surface-700); --navy-grad-1: var(--color-surface-grad-1); --navy-grad-2: var(--color-surface-grad-2);
  --white: var(--color-white); --card: var(--color-surface); --paper: var(--color-surface-subtle); --paper-2: var(--color-surface-muted);
  --ink: var(--color-text-strong); --ink-soft: var(--color-text); --ink-mute: var(--color-text-muted);
  --line: var(--color-border); --line-2: var(--color-border-subtle);
  --d-ink: var(--color-text-on-dark); --d-soft: var(--color-text-on-dark-muted); --d-line: var(--color-border-on-dark); --d-line-strong: var(--color-border-on-dark-strong);
  --green: var(--color-up); --green-soft: var(--color-up-soft); --red: var(--color-down);
  --font-head: var(--font-family); --font-body: var(--font-family); --font-display: var(--font-family);
  --radius: var(--radius-md); --maxw: var(--layout-max); --gutter: var(--layout-gutter); --d: var(--density);
  --glass-brd: var(--glass-border); --glassd-bg: var(--glass-dark-bg); --glassd-brd: var(--glass-dark-border); --glassd-hi: var(--glass-dark-hi); --glassd-solid: var(--glass-dark-solid);
  /* --v2-* псевдонимы */
  --v2-ink: var(--color-text-strong); --v2-ink-2: var(--color-text); --v2-ink-3: var(--color-text-muted);
  --v2-line: var(--color-border); --v2-line-2: var(--color-border-subtle); --v2-paper: var(--color-surface-subtle); --v2-card: var(--color-surface); --v2-blue: var(--color-primary);
  --v2-s1: 24px; --v2-s2: 48px; --v2-s3: 72px;
}

/* --- Светлые переопределения glass-overlay (были :root) --- */
.rk-hero2 {
  --color-surface-900: rgba(255,255,255,.55); --color-surface-800: rgba(255,255,255,.50); --color-surface-700: rgba(255,255,255,.44);
  --color-surface-grad-1: rgba(255,255,255,.52); --color-surface-grad-2: rgba(255,255,255,.40);
  --color-text-on-dark: #14161d; --color-text-on-dark-muted: #3f4551;
  --shadow-sm: 0 2px 10px rgba(9,13,48,.06); --shadow-md: 0 12px 34px rgba(9,13,48,.10); --shadow-lg: 0 26px 64px rgba(9,13,48,.18);
  --gl-bg: rgba(255,255,255,.55); --gl-br: 1px solid rgba(255,255,255,.85); --gl-sh: 0 26px 64px rgba(9,13,48,.18), inset 0 1px 0 rgba(255,255,255,.95); --gl-bl: blur(22px) saturate(185%);
  --sbw: 0px; --gl-bg2: rgba(255,255,255,.08); --gl-sh2: 0 10px 30px rgba(9,13,48,.09), inset 0 1px 0 rgba(255,255,255,.75);
  --accent-soft: #2338c8;
}
@media (max-width: 680px){ .rk-hero2 { --layout-gutter: 20px; } }

/* --- Сбросы (скоуплены) --- */
.rk-hero2, .rk-hero2 *, .rk-hero2 *::before, .rk-hero2 *::after { box-sizing: border-box; }
.rk-hero2 button { font-family: inherit; cursor: pointer; border: none; background: none; }
.rk-hero2 h1 { font-family: var(--font-head); font-weight: 700; color: var(--ink); margin: 0; line-height: 1.12; letter-spacing: -0.015em; }

/* --- Типографика/утилиты --- */
.rk-hero2 .eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-deep); display: inline-flex; align-items: center; gap: 11px; }
.rk-hero2 .eyebrow::before { content: ""; width: 30px; height: 1.5px; background: var(--accent); display: inline-block; }
.rk-hero2 .eyebrow.on-dark { color: var(--accent-soft); }
.rk-hero2 .eyebrow.on-dark::before { background: var(--accent-soft); }
.rk-hero2 .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.rk-hero2 .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* --- Кнопки --- */
.rk-hero2 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 15px; padding: 13px 24px; border-radius: 999px; transition: 0.22s; white-space: nowrap; line-height: 1; text-decoration: none; }
.rk-hero2 .btn-primary { background: var(--accent); color: var(--on-accent); position: relative; overflow: hidden; }
.rk-hero2 .btn-primary:hover { background: var(--color-primary-deep); transform: translateY(-1px); box-shadow: rgba(0, 15, 159, 0.28) 0 6px 18px; }
.rk-hero2 .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.rk-hero2 .btn-ghost:hover { border-color: var(--ink); }
.rk-hero2 .btn-lg { padding: 16px 30px; font-size: 16px; }
.rk-hero2 .btn-primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 38%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-18deg); opacity: 0; }
.rk-hero2 .btn-primary:hover::after { animation: rk2-btnSheen 0.7s ease; }
@keyframes rk2-btnSheen { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }

/* --- Reveal --- */
.rk-hero2 .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
.rk-hero2 .reveal.in { opacity: 1; transform: none; }
.rk-hero2 .reveal.d1 { transition-delay: 0.07s; }
.rk-hero2 .reveal.d2 { transition-delay: 0.14s; }
.rk-hero2 .reveal.d3 { transition-delay: 0.21s; }
.rk-hero2 .reveal.d4 { transition-delay: 0.28s; }
@media (prefers-reduced-motion: reduce){ .rk-hero2 .reveal { opacity: 1 !important; transform: none !important; } }

/* --- Чипы/показатели --- */
.rk-hero2 .chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); }
.rk-hero2 .chip.accent { background: rgba(0, 15, 159, 0.08); color: var(--accent-deep); }
.rk-hero2 .pos { color: var(--green); font-weight: 700; }
.rk-hero2 .neg { color: var(--red); font-weight: 700; }

/* --- Каркас hero --- */
.rk-hero2 .hero { position: relative; overflow: hidden; color: var(--ink); background: transparent; padding-top: 138px; }
.rk-hero2 .hero-grid-lines { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: linear-gradient(var(--d-line) 1px, transparent 1px), linear-gradient(90deg, var(--d-line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%); animation: rk2-gridDrift 26s linear infinite; }
@keyframes rk2-gridDrift { 0% { background-position: 0 0; } 100% { background-position: 64px 64px; } }
.rk-hero2 .hero-inner { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 50px; align-items: center; padding-bottom: 40px; }
.rk-hero2 .hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(37px, 4.7vw, 61px); line-height: 1.03; letter-spacing: -0.02em; color: var(--ink); margin: 22px 0 0; max-width: 15ch; }
.rk-hero2 .hero h1 .hl { color: var(--v2-blue); font-weight: 700; }
.rk-hero2 .hero p { color: var(--ink-soft); }

/* --- Карточка (стекло, светлая) --- */
.rk-hero2 .hero-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 24px; background: var(--gl-bg); backdrop-filter: var(--gl-bl); border: var(--gl-br); box-shadow: var(--gl-sh); color: var(--ink); }
.rk-hero2 .hero-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: linear-gradient(140deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 46%); }
.rk-hero2 .hero-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; padding: 1px; background: linear-gradient(135deg, rgba(159, 177, 255, 0.9), rgba(159, 177, 255, 0) 42%, rgba(92, 193, 105, 0) 60%, rgba(92, 193, 105, 0.6)); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: rk2-borderGlow 4.5s ease-in-out infinite; }
@keyframes rk2-borderGlow { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.8; } }
.rk-hero2 .hero-card > * { position: relative; z-index: 1; }
.rk-hero2 .hero-card-inner { animation: rk2-hcIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes rk2-hcIn { 0% { opacity: 0; transform: translateY(10px) scale(0.99); } 100% { opacity: 1; transform: none; } }
.rk-hero2 .hero-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.rk-hero2 .hero-card-top .nm { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: 16px; }
.rk-hero2 .hero-card-top span { color: var(--ink-soft); }
.rk-hero2 .hero-card .big { font-family: var(--font-head); font-size: 40px; font-weight: 800; color: var(--blue); letter-spacing: -0.02em; line-height: 1; margin: 10px 0 2px; }
.rk-hero2 .hero-card .big .pos { color: var(--green); }
.rk-hero2 .hero-card .big .neg { color: var(--red); }
.rk-hero2 .hero-card .sub { color: var(--ink-soft); font-size: 13px; }
.rk-hero2 .hero-chart { width: 100%; height: 92px; margin-top: 14px; }
.rk-hero2 .hero-card-foot { display: flex; gap: 18px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.rk-hero2 .hero-card-foot div { font-size: 12px; color: var(--ink-soft); }
.rk-hero2 .hero-card-foot b { display: block; font-family: var(--font-head); color: var(--ink); font-size: 17px; font-weight: 700; margin-bottom: 2px; }
@media (prefers-reduced-transparency: reduce){ .rk-hero2 .hero-card { background: rgba(255, 255, 255, 0.96); backdrop-filter: none; } }

/* --- Точки-переключатели карточки --- */
.rk-hero2 .hero-dots { display: flex; gap: 7px; justify-content: center; margin-top: 16px; }
.rk-hero2 .hero-dots .hd { width: 7px; height: 7px; border-radius: 50%; background: rgba(0, 15, 159, 0.2); border: 0; padding: 0; cursor: pointer; transition: width 0.25s, background 0.25s, box-shadow 0.25s; }
.rk-hero2 .hero-dots .hd:hover { background: rgba(0, 15, 159, 0.36); }
.rk-hero2 .hero-dots .hd.on { width: 22px; border-radius: 5px; background: var(--accent-soft); box-shadow: rgba(159, 177, 255, 0.75) 0 0 10px; }

/* --- Фон-график (canvas) и вуаль --- */
.rk-hero2 #rk-waves { position: absolute; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; display: block; }
.rk-hero2 .hero > .wrap, .rk-hero2 .hero .hero-inner { position: relative; z-index: 2; }
.rk-hero2 .hero .hero-grid-lines { z-index: 1; }
.rk-hero2 .hero .rk-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(66% 72% at 17% 47%, rgba(250, 251, 254, 0.68), rgba(250, 251, 254, 0) 62%), linear-gradient(100deg, rgba(250, 251, 254, 0.72) 0%, rgba(250, 251, 254, 0.36) 30%, rgba(250, 251, 254, 0) 56%); }

/* Плавный низ hero: гасим свечной canvas и вуаль к нижней кромке, чтобы не
   было резкой границы перед секцией «Что такое ПИФ». Под hero и под ней —
   одно и то же фиксированное световое поле, поэтому по мере затухания этих
   двух слоёв стык становится незаметным. */
.rk-hero2 #rk-waves,
.rk-hero2 .hero .rk-scrim {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

/* --- Слой v2 (сетка/типографика/чипы/статистика) --- */
.rk-hero2 .v2-hero { padding-top: 104px; padding-bottom: 0; }
.rk-hero2 .v2-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 64px; align-items: center; padding-block: 32px 0; }
/* Обе колонки должны уметь ужиматься ниже своего min-content, иначе на узких
   экранах текстовый блок распирает сетку и уезжает за край. */
.rk-hero2 .v2-hero-inner > * { min-width: 0; }
.rk-hero2 .v2-eyebrow { color: var(--v2-blue); }
.rk-hero2 .v2-eyebrow::before { background: var(--v2-blue); }
.rk-hero2 .v2-h1 { margin: var(--v2-s1) 0 0; max-width: 15ch; font-size: clamp(34px, 4.2vw, 56px); font-weight: 800; line-height: 1.06; letter-spacing: -0.025em; color: var(--v2-ink); text-wrap: balance; }
.rk-hero2 .v2-h1 .hl { color: var(--v2-blue); }
.rk-hero2 .v2-lead { margin: var(--v2-s1) 0 0; max-width: 44ch; font-size: 18px; line-height: 1.55; color: var(--v2-ink-2); }
.rk-hero2 .v2-chips { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: var(--v2-s2); }
.rk-hero2 .v2-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--v2-line); border-radius: var(--radius-pill); background: var(--v2-card); font-size: 13px; font-weight: 500; color: var(--v2-ink-2); }
.rk-hero2 .v2-chip svg { color: var(--v2-blue); flex: 0 0 auto; }
.rk-hero2 .v2-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--v2-s2); }
.rk-hero2 .v2-btn-ghost { border: 1px solid var(--v2-line); background: var(--v2-card); color: var(--v2-ink); }
.rk-hero2 .v2-btn-ghost:hover { border-color: var(--v2-blue); color: var(--v2-blue); }
.rk-hero2 .v2-proof { margin-top: var(--v2-s3); display: grid; grid-template-columns: repeat(3, 1fr); background: var(--v2-card); border: 1px solid var(--v2-line); border-radius: var(--radius-lg); box-shadow: rgba(20, 22, 29, 0.04) 0 2px 4px; overflow: hidden; }
.rk-hero2 .v2-proof-item { padding: 28px 32px; }
.rk-hero2 .v2-proof-item + .v2-proof-item { border-left: 1px solid var(--v2-line-2); }
.rk-hero2 .v2-proof-n { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--v2-ink); font-variant-numeric: tabular-nums; }
.rk-hero2 .v2-proof-u { margin-left: 6px; font-size: 16px; font-weight: 600; color: var(--v2-blue); letter-spacing: 0; }
.rk-hero2 .v2-proof-l { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--v2-ink-2); text-decoration: none; }

/* --- Адаптив --- */
/* 860–1080: две колонки сохраняем, только поджимаем зазор — правый блок
   ужимается (minmax(0,440)), а не падает вниз раньше времени. */
@media (max-width: 1080px){
  .rk-hero2 .hero-inner { gap: 36px; }
  .rk-hero2 .v2-hero-inner { gap: 40px; }
}
/* ≤900: hero становится ОДНОколоночным. Карточку фонда при этом НЕ опускаем
   под текст, а убираем совсем (правило ниже): под текстом она только удлиняла
   первый экран. Порог опущен с 1000 до 900 — на планшетах и небольших ноутбуках
   карточка остаётся сбоку дольше. */
@media (max-width: 900px){
  /* Карточка исчезает ровно в тот момент, когда перестаёт помещаться сбоку. */
  .rk-hero2 .v2-hero-card-col { display: none; }
  .rk-hero2 .v2-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 32px 0; }
  /* Заголовок без ограничения ширины и крупный (тянется по ширине экрана,
     с запасом, чтобы «Профессиональное» всегда влезало в одну строку).
     Селекторы с .v2-hero-inner — повышенная специфичность, чтобы гарантированно
     перебить базовые правила. */
  .rk-hero2 .v2-hero-inner .v2-h1 { max-width: none; font-size: clamp(22px, 7.5vw, 60px); }
  .rk-hero2 .v2-hero-inner .v2-lead { max-width: none; }
  /* Чипы раскладываем в ряды, заполняющие ширину (2–4 в ряд по месту). */
  .rk-hero2 .v2-hero-inner .v2-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}
/* ≤860: одноколоночный и для второго hero-варианта (другие страницы). */
@media (max-width: 860px){
  .rk-hero2 .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 760px){
  .rk-hero2 .v2-hero { padding-top: 96px; }
  /* График на телефонах НЕ приглушаем: ни прозрачности, ни плотной вуали —
     показываем так же, как на десктопе. Раньше он глушился (opacity .4 +
     белая вуаль), потому что считался от всей высоты hero и лез под текст;
     теперь он компактный (FIELD_CAP в hero2.js) и не мешает. */
  .rk-hero2 .v2-proof { grid-template-columns: 1fr; margin-top: var(--v2-s2); }
  .rk-hero2 .v2-proof-item + .v2-proof-item { border-left: 0; border-top: 1px solid var(--v2-line-2); }
  .rk-hero2 .v2-proof-item { padding: 22px 24px; }
  .rk-hero2 .v2-proof-n { font-size: 34px; }
  .rk-hero2 .v2-cta .btn { width: 100%; justify-content: center; }
  /* H1 на телефонах масштабируется правилом в блоке ≤860 (9vw−4px). */
  .rk-hero2 .v2-chip { max-width: 100%; }
}