/**
 * Hero v3 «Платформа для выполнения инженерных расчетов» — стили секции.
 *
 * Грузится только на страницах с виджетом guru-hero (get_style_depends).
 * Префикс ghero-/gwin-/gmod-/gstats- во избежание коллизий с дизайн-системой
 * guru-landing (тема грузит её CSS глобально).
 *
 * Темы: light по умолчанию, dark через [data-theme="dark"] (ThemeManager
 * темы ставит атрибут на <html>). Медиа-пары: .ghero-m-light/.ghero-m-dark.
 * Брейкпоинты: 1200 (стек колонок), 767 (мобайл) — как в теме.
 */

.ghero{ position:relative; overflow:hidden; background:#F5F9FF;
  font-family:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:#14202E; line-height:1.5;
  /* .main лендинга даёт padding-top:80px под фикс-хедер — подтягиваем
     секцию вверх и компенсируем, чтобы wash/сетка шли сразу от хедера
     без «проплешины» чистого фона */
  margin-top:-80px; padding-top:80px; }
[data-theme="dark"] .ghero{ background:#0d1117; color:#e6edf3; }

/* ── Фоновые слои: wash главной + чертёжная сетка + орбиты + формулы ── */
.ghero-wash{ position:absolute; inset:-80px; pointer-events:none;
  background-image:url('/wp-content/themes/guru/assets/landing/img/background.svg');
  background-position:0 0; background-repeat:round; transform-origin:50% 0;
  animation:ghero-wash-drift 75s ease-in-out infinite alternate; }
[data-theme="dark"] .ghero-wash{ opacity:.18; }
@keyframes ghero-wash-drift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(-30px,22px,0) scale(1.02); } }

.ghero-grid{ position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(30,60,90,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,60,90,.045) 1px, transparent 1px),
    linear-gradient(rgba(30,60,90,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,60,90,.08) 1px, transparent 1px);
  background-size:26px 26px, 26px 26px, 130px 130px, 130px 130px;
  -webkit-mask-image:radial-gradient(1000px 700px at 66% 26%, rgba(0,0,0,.85), transparent 78%);
  mask-image:radial-gradient(1000px 700px at 66% 26%, rgba(0,0,0,.85), transparent 78%); }
[data-theme="dark"] .ghero-grid{
  background-image:
    linear-gradient(rgba(154,163,178,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,163,178,.05) 1px, transparent 1px),
    linear-gradient(rgba(154,163,178,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,163,178,.09) 1px, transparent 1px); }

.ghero-orbits{ position:absolute; left:-320px; top:-420px; width:900px; height:900px; pointer-events:none; }
.ghero-orbits circle{ fill:none; stroke:rgba(var(--primary-color-rgb), .055); stroke-width:2; }
[data-theme="dark"] .ghero-orbits circle{ stroke:rgba(255,255,255,.05); }

.ghero-glyph{ position:absolute; font-family:'Times New Roman',Georgia,serif; font-style:italic; pointer-events:none;
  color:rgba(var(--primary-color-rgb), .35); font-size:20px; opacity:0;
  animation:ghero-glyph 24s ease-in-out infinite; animation-delay:var(--gd,0s); }
[data-theme="dark"] .ghero-glyph{ color:rgba(var(--primary-color-rgb), .3); }
@keyframes ghero-glyph{ 0%,100%{ opacity:0; transform:translateY(8px); } 8%{ opacity:1; transform:translateY(0); } 26%{ opacity:1; } 34%{ opacity:0; transform:translateY(-8px); } }

/* Медиа-пары light/dark */
.ghero-m-dark{ display:none !important; }
[data-theme="dark"] .ghero-m-light{ display:none !important; }
[data-theme="dark"] .ghero-m-dark{ display:block !important; }

.ghero-wrap{ position:relative; max-width:1400px; margin:0 auto; padding-left:20px; padding-right:20px; } /* = .container темы */

/* ═══ Тело: текст слева · окно справа ═══ */
.ghero-body{ position:relative; z-index:2; padding-top:96px;
  display:grid; grid-template-columns:minmax(0,.98fr) minmax(0,1.12fr); gap:48px; align-items:center; }
.ghero-h1{ margin:0 0 24px; font-size:54px; line-height:1.08; font-weight:700; letter-spacing:-.022em; text-wrap:balance; color:#0E1822; }
[data-theme="dark"] .ghero-h1{ color:#e6edf3; }
.ghero-lead{ margin:0 0 32px; font-size:18px; line-height:1.62; color:#4A5A6C; max-width:620px; text-wrap:pretty; }
.ghero-lead p{ margin:0 0 12px; }
.ghero-lead p:last-child{ margin-bottom:0; }
[data-theme="dark"] .ghero-lead{ color:#9AA3B2; }
.ghero-lead b{ font-weight:700; }

.ghero-cta{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-bottom:20px; }
.ghero-btn-p{ white-space:nowrap; display:inline-flex; align-items:center; gap:10px; background:var(--primary-color); color:#fff !important; font-size:15px; font-weight:600; padding:14px 24px; border-radius:var(--radius-full, 999px); box-shadow:0 10px 32px rgba(var(--primary-color-rgb), .35); border:none; text-decoration:none; transition:.15s; }
.ghero-btn-p:hover{ background:var(--primary-color-hover); color:#fff; box-shadow:0 12px 40px rgba(var(--primary-color-rgb), .48); }
.ghero-btn-s{ white-space:nowrap; display:inline-flex; align-items:center; gap:11px; background:#fff; color:#14202E !important; font-size:14.5px; font-weight:500; padding:13px 20px; border-radius:var(--radius-full, 999px); border:1px solid #DCE6F0; box-shadow:0 6px 18px rgba(20,32,46,.05); text-decoration:none; transition:.15s; }
.ghero-btn-s:hover{ border-color:rgba(var(--primary-color-rgb), .5); color:#0E1822; }
[data-theme="dark"] .ghero-btn-s{ background:rgba(33,38,45,.6); color:#e6edf3 !important; border-color:#30363d; box-shadow:none; }
[data-theme="dark"] .ghero-btn-s:hover{ border-color:rgba(var(--primary-color-rgb), .5); }
.ghero-play{ display:inline-flex; width:26px; height:26px; border-radius:99px; background:var(--primary-color); align-items:center; justify-content:center; flex:none; }
.ghero-note{ font-size:13.5px; color:#7E8C9C; }
.ghero-note b{ color:#3D4854; font-weight:600; }
[data-theme="dark"] .ghero-note{ color:#6e7681; }
[data-theme="dark"] .ghero-note b{ color:#c9d1d9; }

/* ═══ Правая колонка: подложка + окно ═══ */
.gstage{ position:relative; min-height:560px; }
.gstage-fx{ position:absolute; inset:-90px -160px -60px -70px; pointer-events:none; }
.gstage-glow-g{ position:absolute; right:-40px; bottom:-30px; width:620px; height:560px; background:radial-gradient(closest-side, rgba(var(--primary-color-rgb), .16), rgba(var(--primary-color-rgb), .05) 48%, transparent 72%); }
.gstage-glow-b{ position:absolute; left:-20px; top:-40px; width:420px; height:380px; background:radial-gradient(closest-side, rgba(25,119,207,.08), transparent 70%); }
[data-theme="dark"] .gstage-glow-g{ background:radial-gradient(closest-side, rgba(var(--primary-color-rgb), .22), rgba(var(--primary-color-rgb), .07) 48%, transparent 72%); }
[data-theme="dark"] .gstage-glow-b{ background:radial-gradient(closest-side, rgba(59,130,246,.12), transparent 70%); }
.gstage-wire{ color:var(--primary-color); position:absolute; right:-110px; bottom:-60px; width:600px; height:auto; opacity:.5; }
[data-theme="dark"] .gstage-wire{ opacity:.6; }
.gstage-floor{ position:absolute; right:-100px; bottom:-20px; width:560px; height:260px;
  background-image:linear-gradient(rgba(var(--primary-color-rgb), .13) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--primary-color-rgb), .13) 1px, transparent 1px);
  background-size:44px 44px; transform:perspective(500px) rotateX(58deg); transform-origin:bottom;
  -webkit-mask-image:radial-gradient(closest-side at 55% 80%, rgba(0,0,0,.7), transparent);
  mask-image:radial-gradient(closest-side at 55% 80%, rgba(0,0,0,.7), transparent); }

/* Анимация каркаса: чертёж → дыхание узлов → кольца. Бегущего импульса по стержням нет: он шел
   через stroke-dashoffset, а такую анимацию Chrome не отдает видеокарте — пересчет и перерисовка
   всей страницы каждый кадр (замер 05.11.2026). Анимации transform и opacity здесь — на видеокарте. */
.gstage-wire .wg path{ stroke-dasharray:1; animation:gwire-draw 1.5s cubic-bezier(.65,0,.35,1) backwards; }
.gstage-wire .wg--1 path{ animation-delay:.15s; }
.gstage-wire .wg--2 path{ animation-delay:.45s; }
.gstage-wire .wg--3 path{ animation-delay:.8s; }
.gstage-wire .wg--4 path{ animation-delay:1.1s; }
@keyframes gwire-draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
.gstage-wire .wnode{ transform-box:fill-box; transform-origin:center;
  animation:gwire-in .6s ease-out backwards, gwire-breath 7s ease-in-out infinite; animation-delay:1.4s, 2s; }
.gstage-wire .wnode:nth-of-type(3n){ animation-delay:1.5s, -2.3s; }
.gstage-wire .wnode:nth-of-type(3n+1){ animation-delay:1.6s, -4.6s; }
@keyframes gwire-in{ from{ opacity:0; } }
@keyframes gwire-breath{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.3); } }
.gstage-ring{ transform-box:fill-box; transform-origin:center;
  animation:gwire-ring 12s ease-out infinite; animation-delay:var(--rd,4s); }
@keyframes gwire-ring{ 0%,100%{ transform:scale(1); } 2.5%{ transform:scale(1.6); } 7%{ transform:scale(1); } }
/* Герой за экраном (hero-v3.js): его анимации на паузе. В Chrome они на видеокарте и почти
   бесплатны, а Safari и прежние версии Chromium гоняют анимации внутри SVG через главный поток */
.ghero.is-offscreen *{ animation-play-state:paused; }

/* ═══ Окно приложения (blp-стиль) ═══ */
.gwin{ position:relative; z-index:3; }
.gwin-frame{ border-radius:13px;
  background:#fff; border:1px solid #DCE6F0; overflow:hidden;
  box-shadow:0 44px 90px -24px rgba(20,32,46,.3), 0 18px 40px -20px rgba(20,32,46,.18); }
[data-theme="dark"] .gwin-frame{ background:#161B22; border-color:rgba(48,54,61,.8);
  box-shadow:0 50px 100px -20px rgba(0,0,0,.65), 0 24px 48px -24px rgba(0,0,0,.6); }
.gwin-bar{ display:flex; align-items:center; gap:8px; padding:11px 14px; background:#EEF4FB; border-bottom:1px solid #DCE6F0; }
[data-theme="dark"] .gwin-bar{ background:#131922; border-color:#202836; }
.gwin-dots{ display:flex; gap:6px; }
.gwin-dots i{ width:10px; height:10px; border-radius:99px; }
.gwin-dots i:nth-child(1){ background:#E5695F; } .gwin-dots i:nth-child(2){ background:#E6B34D; } .gwin-dots i:nth-child(3){ background:#5BBD68; }
.gwin-title{ flex:1; text-align:center; font-size:11px; color:#54687C; }
[data-theme="dark"] .gwin-title{ color:#8b949e; }
.gwin-saved{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; color:var(--primary-color); background:rgba(var(--primary-color-rgb), .1); border:1px solid rgba(var(--primary-color-rgb), .25); padding:3px 9px; border-radius:99px; }
[data-theme="dark"] .gwin-saved{ color:var(--primary-color); background:rgba(var(--primary-color-rgb), .12); border-color:rgba(var(--primary-color-rgb), .25); }
.gwin-tabs{ display:flex; gap:6px; padding:9px 12px; border-bottom:1px solid #DCE6F0; overflow-x:auto; scrollbar-width:none; }
.gwin-tabs::-webkit-scrollbar{ display:none; }
/* Вкладки шире окна: затухание у края, за которым есть еще вкладки (классы ставит hero-v3.js).
   Второй слой маски — нижняя строка 1px без затухания, чтобы граница ряда шла до края. */
.gwin-tabs.is-more-l, .gwin-tabs.is-more-r{
  --fade-l:#000; --fade-r:#000;
  -webkit-mask-image:linear-gradient(90deg, var(--fade-l), #000 56px, #000 calc(100% - 56px), var(--fade-r)), linear-gradient(#000, #000);
  mask-image:linear-gradient(90deg, var(--fade-l), #000 56px, #000 calc(100% - 56px), var(--fade-r)), linear-gradient(#000, #000);
  -webkit-mask-size:100% 100%, 100% 1px; mask-size:100% 100%, 100% 1px;
  -webkit-mask-position:0 0, 0 100%; mask-position:0 0, 0 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.gwin-tabs.is-more-l{ --fade-l:transparent; }
.gwin-tabs.is-more-r{ --fade-r:transparent; }
[data-theme="dark"] .gwin-tabs{ border-color:#202836; }
.gwin-tab{ border:1px solid #DCE6F0; background:transparent; color:#54687C; font:inherit; font-size:12px; font-weight:600; padding:5.5px 12px; border-radius:100px; white-space:nowrap; cursor:pointer; transition:.15s; }
.gwin-tab:hover{ border-color:var(--primary-color); color:var(--primary-color); }
.gwin-tab.is-active{ background:var(--primary-color); border-color:var(--primary-color); color:#fff; }
[data-theme="dark"] .gwin-tab{ border-color:rgba(255,255,255,.13); color:#9AA3B2; }
[data-theme="dark"] .gwin-tab:hover{ border-color:var(--primary-color); color:var(--primary-color); }
[data-theme="dark"] .gwin-tab.is-active{ background:var(--primary-color); border-color:var(--primary-color); color:#fff; }
.gwin-stage{ position:relative; aspect-ratio:16/10; background:#fff; }
.gwin-stage.is-chk-off .gwin-chk{ display:none; } /* вкладка с «Скрыть карточку проверки» */
[data-theme="dark"] .gwin-stage{ background:#0F141A; }
/* Панели вкладок: постер (пара light/dark) + ленивое видео.
   Видео получает src только при активации вкладки (JS); до готовности
   кадра прозрачно — виден постер; .is-ready проявляет его кроссфейдом. */
.gwin-pane{ position:absolute; inset:0; display:none; }
.gwin-pane.is-active{ display:block; }
.gwin-pane img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gwin-pane video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s ease; }
.gwin-pane.is-ready video{ opacity:1; }
/* overlay-проверки */
.gwin-chk{ position:absolute; right:12px; bottom:12px; z-index:2; min-width:196px; background:#fff; border:1px solid #DCE6F0; border-radius:12px; padding:11px 13px; box-shadow:0 14px 34px -16px rgba(20,32,46,.35); font-size:12.5px; }
[data-theme="dark"] .gwin-chk{ background:rgba(18,23,29,.92); border-color:rgba(255,255,255,.12); box-shadow:0 14px 34px -16px rgba(0,0,0,.6); }
.gwin-chk b{ display:block; font-size:10.5px; letter-spacing:.06em; color:#8A9AAB; text-transform:uppercase; margin-bottom:7px; font-weight:600; }
.gwin-chk-row{ display:flex; justify-content:space-between; gap:16px; padding:2.5px 0; }
.gwin-chk-row i{ font-style:normal; color:#54687C; }
.gwin-chk-row em{ font-style:normal; font-weight:700; color:#14202E; font-variant-numeric:tabular-nums; }
[data-theme="dark"] .gwin-chk-row i{ color:#9AA3B2; }
[data-theme="dark"] .gwin-chk-row em{ color:#E8ECF1; }
.gwin-chk-badge{ display:inline-block; margin-top:7px; padding:3.5px 10px; border-radius:100px; background:rgba(var(--primary-color-rgb), .12); color:var(--primary-color); font-weight:700; font-size:11.5px; }
[data-theme="dark"] .gwin-chk-badge{ background:rgba(var(--primary-color-rgb), .14); color:var(--primary-color); }
/* метрики */
.gwin-metrics{ display:flex; border-top:1px solid #DCE6F0; background:#EEF4FB; }
.gwin-metrics[hidden]{ display:none; } /* полоса другой вкладки (свои метрики у вкладки) */
[data-theme="dark"] .gwin-metrics{ background:#131922; border-color:#202836; }
.gwin-m{ flex:1; padding:9px 14px; display:flex; flex-direction:column; border-right:1px solid #DCE6F0; }
.gwin-m:last-child{ border-right:none; }
[data-theme="dark"] .gwin-m{ border-color:#202836; }
.gwin-m i{ font-style:normal; font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#8A9AAB; }
.gwin-m b{ font-size:14.5px; font-weight:700; font-variant-numeric:tabular-nums; color:#14202E; }
.gwin-m b small{ font-size:10px; font-weight:600; color:#54687C; margin-left:3px; }
[data-theme="dark"] .gwin-m b{ color:#E8ECF1; }
[data-theme="dark"] .gwin-m b small{ color:#9AA3B2; }

/* ═══ Промо-полоса вкладки вместо метрик (поля вкладки promo_*; «Распознавание по фото») ═══
   Высота как у полосы метрик — 55 px, на телефоне — как сетка 2×2 (97,5 px): окно не прыгает при
   смене вкладок. Ссылка-кнопка растянута на всю полосу (::after); кольцо фокуса — рамкой на ::after:
   main.css гасит outline у a:focus-visible с !important. Дизайн — вариант «бейдж» (ревью 29.10.2026). */
.gwin-promo{ position:relative; display:flex; align-items:center; gap:12px; height:55px; box-sizing:border-box;
  padding:0 10px 0 11px; border-top:1px solid #DCE6F0;
  background:linear-gradient(90deg, rgba(var(--primary-color-rgb), .075), rgba(var(--primary-color-rgb), 0) 46%), #EEF4FB;
  transition:background-color .15s; }
.gwin-promo[hidden]{ display:none; }
.gwin-promo::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg, rgba(var(--primary-color-rgb), .7), rgba(var(--primary-color-rgb), .2) 36%, transparent 68%); }
.gwin-promo.is-link:hover{ background-color:#E8F2EF; }
[data-theme="dark"] .gwin-promo{ border-color:#202836;
  background:linear-gradient(90deg, rgba(var(--primary-color-rgb), .09), rgba(var(--primary-color-rgb), 0) 46%), #131922; }
[data-theme="dark"] .gwin-promo.is-link:hover{ background-color:#142420; }

/* плитка-иконка: рамка сканирования и балка на двух опорах; по кадру ходит полупрозрачная полоса скана */
.gwin-promo-ic{ flex:none; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:#1E7E34;
  background:#fff; border:1px solid rgba(var(--primary-color-rgb), .3);
  box-shadow:0 6px 14px -8px rgba(var(--primary-color-rgb), .45); }
[data-theme="dark"] .gwin-promo-ic{ color:#5FD07A;
  background:rgba(var(--primary-color-rgb), .1); border-color:rgba(var(--primary-color-rgb), .3); box-shadow:none; }
.gwin-promo-scan{ opacity:.2; animation:gwin-promo-scan 4s ease-in-out infinite alternate; }
@keyframes gwin-promo-scan{ from{ transform:translateY(-5.5px); } to{ transform:translateY(5px); } }

/* текст: заголовок жирным, пояснение серым; помещаются в строку — одна строка, нет — две */
.gwin-promo-txt{ flex:1; min-width:0; margin:0; line-height:1.32; color:#14202E; }
.gwin-promo-l1, .gwin-promo-l2{ display:inline-block; white-space:nowrap; }
.gwin-promo-l1{ font-size:13.5px; font-weight:700; letter-spacing:-.005em; margin-right:4px; }
.gwin-promo-l2{ font-size:12.5px; font-weight:500; color:#54687C; }
[data-theme="dark"] .gwin-promo-txt{ color:#E8ECF1; }
[data-theme="dark"] .gwin-promo-l2{ color:#9AA3B2; }
.gwin-promo-ai{ display:inline-block; vertical-align:1px; margin-right:5px; padding:2px 5px 1.5px; border-radius:5px;
  font-size:10px; line-height:1.15; font-weight:800; letter-spacing:.05em;
  color:#fff; background:#1E7E34; }
[data-theme="dark"] .gwin-promo-ai{ color:#0D1A12; background:#5FD07A; }
/* дефис «AI-» и подпись кнопки на телефоне — только для копирования и скринридера */
.gwin-promo-hy{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.gwin-promo-l2 strong{ font-weight:700; padding:1px 5px; border-radius:5px;
  color:#186429; background:rgba(var(--primary-color-rgb), .14); }
[data-theme="dark"] .gwin-promo-l2 strong{ color:#6EDC8A;
  background:rgba(var(--primary-color-rgb), .18); }

/* кнопка; ::after растягивает ссылку на всю полосу */
.gwin-promo-btn{ flex:none; display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px 0 14px; border-radius:9px;
  font-size:13px; font-weight:600; white-space:nowrap; text-decoration:none;
  color:#fff !important; background:#1E7E34;
  transition:background-color .15s, box-shadow .15s; }
.gwin-promo-btn::after{ content:""; position:absolute; inset:0; }
.gwin-promo-btn:focus-visible::after{ inset:2px; border:2px solid #1E7E34; border-radius:3px 3px 10px 10px; }
[data-theme="dark"] .gwin-promo-btn:focus-visible::after{ border-color:var(--primary-color); }
.gwin-promo-btn svg{ transition:transform .15s; }
.gwin-promo.is-link:hover .gwin-promo-btn{ background:#17692D; box-shadow:0 10px 22px -10px rgba(var(--primary-color-rgb), 1); }
.gwin-promo.is-link:hover .gwin-promo-btn svg{ transform:translateX(2px); }
[data-theme="dark"] .gwin-promo-btn{ color:#6EDC8A !important;
  background:rgba(var(--primary-color-rgb), .14); border:1px solid rgba(var(--primary-color-rgb), .45); box-shadow:none; }
[data-theme="dark"] .gwin-promo.is-link:hover .gwin-promo-btn{ background:rgba(var(--primary-color-rgb), .22); box-shadow:none; }

/* 1201–1340: окно — правая колонка героя (у́же всего, 592–667 px), вторая строка с кнопкой-подписью
   не помещается — кнопка квадратная со стрелкой, как на телефоне (подпись — для скринридера) */
@media (min-width:1201px) and (max-width:1340px){
  .gwin-promo-btn{ width:32px; padding:0; justify-content:center; }
  .gwin-promo-go{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
@media (max-width:767px){
  .gwin-promo{ height:auto; min-height:97.5px; padding:10px 10px 10px 11px; gap:10px; }
  .gwin-promo-ic{ width:34px; height:34px; }
  .gwin-promo-txt{ text-wrap:balance; }
  .gwin-promo-l1, .gwin-promo-l2{ display:inline; white-space:normal; }
  .gwin-promo-l1{ margin-right:0; }
  .gwin-promo-l2{ font-size:13px; }
  .gwin-promo-btn{ width:34px; height:34px; padding:0; justify-content:center; border-radius:10px; }
  .gwin-promo-go{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
@media (max-width:359px){
  .gwin-promo-ic{ display:none; } /* до 320 px текст с иконкой не помещался в 97,5 px — окно прыгало */
  .gwin-promo-l1{ font-size:12.5px; } .gwin-promo-l2{ font-size:12px; }
}
/* цвета от --primary-color — там, где браузер знает color-mix; выше — готовые hex для старых
   (Safari < 16.2, Chrome < 111): объявление с var() вытеснило бы запасной hex еще при разборе */
@supports (color: color-mix(in srgb, red, blue)){
  .gwin-promo.is-link:hover{ background-color:color-mix(in srgb, var(--primary-color) 6%, #EEF4FB); }
  [data-theme="dark"] .gwin-promo.is-link:hover{ background-color:color-mix(in srgb, var(--primary-color) 8%, #131922); }
  .gwin-promo-ic{ color:color-mix(in srgb, var(--primary-color) 78%, #000); }
  [data-theme="dark"] .gwin-promo-ic{ color:color-mix(in srgb, var(--primary-color) 70%, #fff); }
  .gwin-promo-ai{ background:color-mix(in srgb, var(--primary-color) 78%, #000); }
  [data-theme="dark"] .gwin-promo-ai{ background:color-mix(in srgb, var(--primary-color) 70%, #fff); }
  .gwin-promo-l2 strong{ color:color-mix(in srgb, var(--primary-color) 60%, #000); }
  [data-theme="dark"] .gwin-promo-l2 strong{ color:color-mix(in srgb, var(--primary-color) 62%, #fff); }
  .gwin-promo-btn{ background:color-mix(in srgb, var(--primary-color) 78%, #000); }
  .gwin-promo-btn:focus-visible::after{ border-color:color-mix(in srgb, var(--primary-color) 78%, #000); }
  [data-theme="dark"] .gwin-promo-btn:focus-visible::after{ border-color:var(--primary-color); }
  .gwin-promo.is-link:hover .gwin-promo-btn{ background:color-mix(in srgb, var(--primary-color) 66%, #000); }
  [data-theme="dark"] .gwin-promo-btn{ color:color-mix(in srgb, var(--primary-color) 62%, #fff) !important; }
}
@media (prefers-reduced-motion: reduce){
  .gwin-promo-scan{ animation:none; transform:none; }
  .gwin-promo, .gwin-promo-btn, .gwin-promo-btn svg{ transition:none; }
}

/* ═══ Лента модулей ═══ */
.gmods{ position:relative; z-index:4; padding-top:64px; }
.gmods-head{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
/* Заголовок ленты переносится, кнопки не сжимаются и стоят у правого края — при любой ширине и длине
   заголовка (он правится в Elementor). Был white-space:nowrap: на телефоне строка в 328px выдавливала
   кнопки за экран (на 390px «вперед» уходила за край), на 768px так же — длинный заголовок. Слово, которое
   не влезает в строку целиком, рвется, а не рисуется поверх кнопок. */
.gmods-title{ font-size:16px; font-weight:600; color:#0E1822; min-width:0; text-wrap:balance; overflow-wrap:anywhere; }
[data-theme="dark"] .gmods-title{ color:#e6edf3; }
.gmods-rule{ flex:1; }
.gmods-rule line{ stroke:rgba(20,40,60,.18); }
[data-theme="dark"] .gmods-rule line{ stroke:rgba(255,255,255,.16); }
.gmods-nav{ display:flex; gap:10px; flex:none; margin-left:auto; }
.gmods-arrow{ width:40px; height:40px; border-radius:99px; border:1px solid #DCE6F0; background:#fff; color:#14202E; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(20,32,46,.08); cursor:pointer; transition:.15s; padding:0; }
.gmods-arrow:hover{ border-color:rgba(var(--primary-color-rgb), .55); color:var(--primary-color); }
.gmods-arrow:disabled{ opacity:.35; cursor:default; box-shadow:none; }
.gmods-arrow:disabled:hover{ border-color:#DCE6F0; color:#14202E; }
[data-theme="dark"] .gmods-arrow{ background:rgba(33,38,45,.8); border-color:#30363d; color:#e6edf3; box-shadow:none; }
[data-theme="dark"] .gmods-arrow:hover{ border-color:rgba(var(--primary-color-rgb), .55); color:var(--primary-color); }
[data-theme="dark"] .gmods-arrow:disabled:hover{ border-color:#30363d; color:#e6edf3; }
/* лента: 3 в кадре; поля под hover-эффекты (иначе клипует overflow) */
.gmods-grid{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 32px)/3); gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding:12px 12px 30px; margin:-12px -12px -30px; scroll-padding-left:12px; }
.gmods-grid::-webkit-scrollbar{ display:none; }
.gmod{ scroll-snap-align:start; display:flex; flex-direction:row; align-items:center; gap:18px; background:#fff; border:1px solid #DCE6F0; border-radius:16px; padding:14px; color:#14202E; text-decoration:none; box-shadow:0 10px 30px -18px rgba(20,32,46,.12); transition:.18s; }
[data-theme="dark"] .gmod{ background:rgba(38,46,56,.92); border-color:rgba(255,255,255,.14); color:#fff; box-shadow:none; }
.gmod-img{ width:45%; flex:none; aspect-ratio:16/10; border-radius:11px; overflow:hidden; background:#E9EEFA; border:1px solid #E9F0F8; position:relative; }
[data-theme="dark"] .gmod-img{ background:#0F141A; border-color:#202836; }
/* Кадр в окне карточки: точку и увеличение задает виджет через --gmod-focus/--gmod-zoom
   (поля «Точка кадра» и «Увеличение кадра» у модуля). Умолчания здесь — под снимки балки 16:10. */
.gmod-img img{ width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(var(--gmod-zoom, 1.85)); transform-origin:var(--gmod-focus, 60% 42%); transition:transform .3s ease; }
.gmod:hover .gmod-img img{ transform:scale(calc(var(--gmod-zoom, 1.85) + .15)); }
.gmod-img .ghero-m-dark{ position:absolute; inset:0; }
.gmod-body{ min-width:0; display:flex; flex-direction:column; padding-right:6px; }
.gmod-name{ font-size:16px; font-weight:700; line-height:1.3; margin-bottom:5px; color:inherit; }
.gmod-desc{ font-size:12.5px; line-height:1.55; color:#54687C; text-wrap:pretty; }
[data-theme="dark"] .gmod-desc{ color:#9AA3B2; }
.gmod-go{ margin-top:10px; font-size:12.5px; font-weight:600; }
.gmod-ext{ vertical-align:-1px; margin-left:1px; }
.gmod{ position:relative; } /* скрытый текст .gmod-sr — внутри карточки, а не у края ленты */
.gmod-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* только для скринридера */
/* цветовая семантика модулей */
.gmod--green:hover{ border-color:rgba(var(--primary-color-rgb), .55); box-shadow:0 20px 48px -20px rgba(var(--primary-color-rgb), .35); transform:translateY(-2px); }
.gmod--amber:hover{ border-color:rgba(232,163,61,.6); box-shadow:0 20px 48px -20px rgba(232,163,61,.35); transform:translateY(-2px); }
.gmod--blue:hover{ border-color:rgba(25,119,207,.5); box-shadow:0 20px 48px -20px rgba(25,119,207,.3); transform:translateY(-2px); }
.gmod--cyan:hover{ border-color:rgba(8,145,178,.5); box-shadow:0 20px 48px -20px rgba(8,145,178,.3); transform:translateY(-2px); }
.gmod--coral:hover{ border-color:rgba(221,69,53,.5); box-shadow:0 20px 48px -20px rgba(221,69,53,.28); transform:translateY(-2px); }
.gmod--green .gmod-go{ color:var(--primary-color); } .gmod--amber .gmod-go{ color:#C87E15; }
.gmod--blue .gmod-go{ color:#1977CF; } .gmod--cyan .gmod-go{ color:#0891B2; }
.gmod--coral .gmod-go{ color:#DD4535; }
[data-theme="dark"] .gmod--green .gmod-go{ color:var(--primary-color); }
[data-theme="dark"] .gmod--amber .gmod-go{ color:#E8A33D; }
[data-theme="dark"] .gmod--blue .gmod-go{ color:#6C9BFF; }
[data-theme="dark"] .gmod--cyan .gmod-go{ color:#35C8DF; }
[data-theme="dark"] .gmod--coral .gmod-go{ color:#FF7075; }

/* ═══ Stats bar ═══ */
.gstats{ position:relative; z-index:4; padding-top:40px; padding-bottom:72px; }
.gstats-bar{ display:grid; grid-template-columns:1fr 1fr 1fr 1.25fr; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.85); border-radius:16px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 24px 60px -24px rgba(31,61,43,.18); }
[data-theme="dark"] .gstats-bar{ background:rgba(18,24,30,.72); border-color:rgba(255,255,255,.09); box-shadow:0 24px 60px -24px rgba(0,0,0,.6); }
.gstats-i{ display:flex; align-items:center; gap:14px; padding:22px 26px; border-right:1px solid #E9F0F8; }
.gstats-i:last-child{ border-right:none; }
[data-theme="dark"] .gstats-i{ border-color:rgba(255,255,255,.07); }
.gstats-ic{ width:42px; height:42px; border-radius:11px; border:1px solid rgba(var(--primary-color-rgb), .28); background:rgba(var(--primary-color-rgb), .07); display:flex; align-items:center; justify-content:center; flex:none; }
[data-theme="dark"] .gstats-ic{ border-color:rgba(var(--primary-color-rgb), .25); background:rgba(var(--primary-color-rgb), .08); }
.gstats-ic svg{ stroke:var(--primary-color); }
[data-theme="dark"] .gstats-ic svg{ stroke:var(--primary-color); }
.gstats-num{ font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em; color:#0E1822; }
[data-theme="dark"] .gstats-num{ color:#fff; }
.gstats-lbl{ font-size:12.5px; color:#54687C; margin-top:1px; }
[data-theme="dark"] .gstats-lbl{ color:#7A8494; }
.gstats-norm-t{ font-size:15px; font-weight:700; margin-bottom:6px; color:#0E1822; }
[data-theme="dark"] .gstats-norm-t{ color:#fff; }
.gstats-norms{ display:flex; gap:6px; }
.gstats-norm{ font-size:10.5px; font-weight:600; color:#3D4854; border:1px solid #C9D6E4; background:#fff; padding:2.5px 9px; border-radius:99px; }
[data-theme="dark"] .gstats-norm{ color:#C2CAD5; border-color:rgba(255,255,255,.16); background:transparent; }

/* ═══ Адаптив ═══ */
@media (max-width:1200px){
  .ghero-body{ grid-template-columns:minmax(0,1fr); gap:44px; padding-top:36px; }
  .ghero-h1{ font-size:38px; }
  .gstage{ min-height:0; }
  .gstage-fx{ inset:-60px -80px -40px -40px; }
  .gmods-grid{ grid-auto-columns:calc((100% - 16px)/2); }
  .gstats-bar{ grid-template-columns:1fr 1fr; }
  .gstats-i:nth-child(2){ border-right:none; }
  .gstats-i:nth-child(1), .gstats-i:nth-child(2){ border-bottom:1px solid #E9F0F8; }
  [data-theme="dark"] .gstats-i:nth-child(1), [data-theme="dark"] .gstats-i:nth-child(2){ border-bottom-color:rgba(255,255,255,.07); }
}
@media (max-width:767px){
  .ghero-wrap{ padding-left:20px; padding-right:20px; }
  .ghero-body{ padding-top:24px; gap:36px; }
  .ghero-h1{ font-size:30px; }
  .ghero-lead{ font-size:15.5px; }
  /* Окно переехало внутрь лида (hero-v3.js, initLeadStage): свои поля вместо сетки
     .ghero-body и обычный цвет текста — внутри лида он приглушенный. */
  .ghero-lead > .gstage{ margin:20px 0 24px; color:var(--color-text-primary); }
  .ghero-btn-p, .ghero-btn-s{ width:100%; justify-content:center; }
  .gstage-fx{ inset:-40px -60px -20px -30px; }
  .gstage-wire{ width:420px; right:-80px; }
  .gwin-stage{ aspect-ratio:640/400; }
  .gwin-chk{ display:none; } /* дублируется метриками */
  .gwin-metrics{ display:grid; grid-template-columns:1fr 1fr; }
  .gwin-m{ padding:7px 12px; border-bottom:1px solid #DCE6F0; }
  [data-theme="dark"] .gwin-m{ border-bottom-color:#202836; }
  .gwin-m:nth-child(2n){ border-right:none; }
  .gwin-m:nth-child(n+3){ border-bottom:none; }
  .gwin-m b{ font-size:13px; }
  .gmods{ padding-top:44px; }
  .gmods-grid{ grid-auto-columns:86%; } /* peek следующей — намёк на свайп */
  .gmod{ flex-direction:column; align-items:stretch; gap:12px; }
  .gmod-img{ width:100%; aspect-ratio:16/9; }
  .gmod-body{ padding:0 6px 6px; }
  .gstats{ padding-top:28px; padding-bottom:48px; }
  .gstats-bar{ grid-template-columns:1fr; }
  .gstats-i{ border-right:none; border-bottom:1px solid #E9F0F8; padding:16px 20px; }
  [data-theme="dark"] .gstats-i{ border-bottom-color:rgba(255,255,255,.07); }
  .gstats-i:last-child{ border-bottom:none; }
  .ghero-glyph{ display:none; }
}
@media (max-width:489px){
  /* до 490px линия схлопывается в ноль, но два ее зазора отнимают у заголовка 32px: на 360px это лишняя
     строка, а на 480-489 заголовок переносился, хотя без линии помещался в одну */
  .gmods-rule{ display:none; }
}

/* ═══ Accessibility ═══ */
@media (prefers-reduced-motion: reduce){
  .ghero-wash, .ghero-glyph, .gstage-wire .wg path, .gstage-wire .wnode, .gstage-ring{ animation:none; }
  .ghero-glyph{ opacity:.6; transform:none; }
  .gmod-img img, .gmod, .gwin-tab{ transition:none; }
}