/* ==========================================================================
   005 · Главная — редизайн в стиле /video. Палитра «Закат» по умолчанию.
   ТОЛЬКО оформление: тексты, title/H1, id и порядок блоков не меняются
   (цель Метрики «Нажать генерация» привязана к #generateBtn и пути до него).
   Палитра — CSS-переменные (выбор владельца 04.11 — «Закат»; переключатель палитр для просмотра удалён).
   Подключается ПОСЛЕДНИМ в index.html → перекрывает styles.css / tool-redesign.css.
   ========================================================================== */
:root{
  --hp-1:#f472b6; --hp-1-rgb:244,114,182;   /* основной акцент */
  --hp-2:#f59e0b; --hp-2-rgb:245,158,11;    /* второй акцент */
  --hp-3:#fb7185; --hp-3-rgb:251,113,133;   /* третий (свечения) */
  --hp-soft:#fecdd3; --hp-soft-2:#fed7aa;   /* светлые тона текста на акценте */
  --hp-grad:linear-gradient(115deg,#fb7185 0%,#f472b6 45%,#f59e0b 105%);
  --hp-cta:linear-gradient(120deg,#ec4899 0%,#f97316 70%,#f59e0b 100%);
  --hp-line:linear-gradient(135deg,rgba(251,113,133,.75),rgba(244,114,182,.3) 50%,rgba(245,158,11,.7));
  --hp-cta-shadow:236,72,153;
  --hp-bg:#0a0e1a; --hp-bg-2:#0d1322; --hp-bg-3:#111a2e;
  --hp-panel:rgba(17,24,42,.55); --hp-panel-2:rgba(12,17,30,.82);
  --hp-line-1:rgba(148,163,184,.12); --hp-line-2:rgba(148,163,184,.22);
  --hp-text:#f1f5f9; --hp-text-2:#cbd5e1; --hp-text-3:#94a3b8; --hp-text-4:#64748b;
  --hp-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* переменные старых файлов → в палитру */
  --accent:var(--hp-1); --accent-2:var(--hp-2);
  --ring:0 0 0 4px rgba(var(--hp-1-rgb),.35);
  --tr-accent:var(--hp-1); --tr-accent-2:var(--hp-3); --tr-accent-3:var(--hp-2);
  --tr-border:rgba(var(--hp-1-rgb),.22); --tr-border-hover:rgba(var(--hp-1-rgb),.55);
  --tr-glow:0 0 0 1px rgba(var(--hp-1-rgb),.14),0 18px 50px rgba(8,10,20,.55);
  --tr-glow-hover:0 0 0 1px rgba(var(--hp-1-rgb),.4),0 24px 70px rgba(var(--hp-1-rgb),.2);
}

/* ===== ФОН: свечения сверху + сетка (без fixed-слоёв — легче на телефоне) ===== */
body{
  background:
    radial-gradient(640px 440px at 0% 0%,rgba(var(--hp-3-rgb),.22),transparent 70%),
    radial-gradient(560px 420px at 100% 2%,rgba(var(--hp-2-rgb),.14),transparent 70%),
    radial-gradient(520px 360px at 45% 820px,rgba(var(--hp-1-rgb),.10),transparent 70%),
    var(--hp-bg) !important;
  background-attachment:scroll !important;
  overflow-x:clip;
}
body::before{display:none !important}
body::after{
  display:block !important;
  position:absolute !important; inset:0 0 auto 0 !important; height:1500px;
  background:
    linear-gradient(rgba(148,163,184,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.055) 1px,transparent 1px) !important;
  background-size:56px 56px !important;
  -webkit-mask-image:radial-gradient(ellipse 75% 55% at 50% 0%,#000 20%,transparent 75%);
          mask-image:radial-gradient(ellipse 75% 55% at 50% 0%,#000 20%,transparent 75%);
  opacity:1 !important; transform:none !important; contain:none !important;
}
::selection{background:rgba(var(--hp-1-rgb),.35);color:#fff}
@keyframes hpPulse{0%{box-shadow:0 0 0 0 rgba(var(--hp-2-rgb),.6)}70%{box-shadow:0 0 0 8px rgba(var(--hp-2-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--hp-2-rgb),0)}}

/* ===== HERO v4: заголовок по центру + «СТУДИЯ ГЕНЕРАЦИИ» (как .vp-studio на /video) =====
   Бейдж, H1, абзац и 4 преимущества — прежние тексты и прежнее место в DOM. Раскладку делает CSS:
   .hero — сетка; .hero__grid и его обёртка — display:contents; порядок: бейдж → H1 → абзац → студия →
   преимущества (нижняя строка окна студии, как .vp-studio__foot). Студия — блок HOME_REEL (build-studio.mjs):
   слева поле промпта (печатается пример, можно написать своё) + «Создать» → справа результат + 5 примеров. */
.hero{display:grid !important;grid-template-columns:minmax(0,1fr);justify-items:center;
  padding:clamp(18px,2.8vw,38px) 0 0 !important;text-align:center;overflow:visible}
.hero__grid,.hero__grid > div{display:contents !important}
.hero .badge{order:1}
.hero h1{order:2}
.hero p{order:3}
.hp-studio{order:4}
.hero__features{order:5}
.hero .badge{
  display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;
  font-size:12px;letter-spacing:.08em;color:var(--hp-soft-2);
  background:linear-gradient(180deg,rgba(var(--hp-2-rgb),.18),rgba(var(--hp-2-rgb),.06));
  border:1px solid rgba(var(--hp-2-rgb),.4);box-shadow:none;
}
.hero .badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hp-2);animation:hpPulse 2.2s infinite}
.hero .badge:hover{background:linear-gradient(180deg,rgba(var(--hp-2-rgb),.22),rgba(var(--hp-2-rgb),.08));border-color:rgba(var(--hp-2-rgb),.55);box-shadow:none}
.hero h1{
  font-size:clamp(31px,3.7vw,54px) !important;line-height:1.04 !important;
  letter-spacing:-.04em !important;margin:16px auto 14px !important;color:var(--hp-text) !important;
  text-shadow:none !important;text-wrap:balance;text-align:center !important;max-width:1120px !important;
}
.hero h1 .hero__highlight{
  background:var(--hp-grad) !important;-webkit-background-clip:text !important;background-clip:text !important;
  font-weight:800 !important;filter:drop-shadow(0 8px 34px rgba(var(--hp-1-rgb),.3));
}
.hero h1::selection,.hero h1 .hero__highlight::selection{background:rgba(var(--hp-1-rgb),.35)}
.hero p{color:var(--hp-text-3);font-size:clamp(15px,1.25vw,17px);line-height:1.6;max-width:720px;margin:0 auto clamp(22px,2.6vw,32px) !important;text-wrap:pretty}
.hero p strong{color:var(--hp-text)}
.hero p strong::after{height:6px;background:linear-gradient(90deg,rgba(var(--hp-1-rgb),.28),rgba(var(--hp-2-rgb),.2))}

/* --- окно студии --- */
.hp-studio{
  --hp-h:clamp(330px,27vw,392px);--hp-pad:clamp(16px,1.8vw,22px);--hp-th:calc((var(--hp-h) - 32px) / 5 * .75);
  position:relative;z-index:0;width:100%;max-width:1160px;text-align:left;
  border-radius:28px 28px 0 0;background:var(--hp-panel-2);isolation:isolate;overflow:hidden;
  box-shadow:0 0 140px -50px rgba(var(--hp-cta-shadow),.6);
}
.hp-studio::before{content:"";position:absolute;inset:0 0 -1px;z-index:6;border-radius:inherit;padding:1px 1px 0;background:var(--hp-line);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.85;pointer-events:none}
.hp-studio::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(720px 340px at 10% 0%,rgba(var(--hp-3-rgb),.17),transparent 65%),radial-gradient(640px 320px at 95% 100%,rgba(var(--hp-2-rgb),.13),transparent 65%)}
.hp-studio__bar{display:flex;align-items:center;gap:14px;height:44px;padding:0 18px;border-bottom:1px solid var(--hp-line-1);background:rgba(255,255,255,.02)}
.hp-studio__dots{display:flex;gap:6px}
.hp-studio__dots i{width:10px;height:10px;border-radius:50%;background:#fb7185}
.hp-studio__dots i:nth-child(2){background:#fbbf24}
.hp-studio__dots i:nth-child(3){background:#34d399}
.hp-studio__title{flex:1;text-align:center;font:500 12px var(--hp-mono);color:var(--hp-text-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-studio__title::before{content:"freeimg.io · студия генерации"}
.hp-studio__live{display:inline-flex;align-items:center;gap:7px;font:600 11px var(--hp-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hp-soft-2)}
.hp-studio__live i{width:7px;height:7px;border-radius:50%;background:var(--hp-2);animation:hpPulse 2.2s infinite}
.hp-studio__live::after{content:"live"}
.hp-studio__body{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:var(--hp-h);gap:24px;padding:var(--hp-pad)}

/* слева: «поле промпта» — только анимация (текст печатается сам, ввести ничего нельзя — окно декоративное) */
.hp-studio{-webkit-user-select:none;user-select:none}
.hp-studio__compose{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0}
.hp-studio__field{position:relative;flex:1;display:flex;flex-direction:column;min-height:0;border-radius:20px;
  background:linear-gradient(180deg,rgba(5,8,16,.72),rgba(8,11,22,.6));border:1px solid var(--hp-line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:border-color .45s,box-shadow .45s}
.hp-studio.is-typing .hp-studio__field{border-color:rgba(var(--hp-1-rgb),.55);box-shadow:0 0 0 4px rgba(var(--hp-1-rgb),.1),inset 0 1px 0 rgba(255,255,255,.04)}
.hp-studio__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 0}
.hp-studio__label{font:600 11px var(--hp-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--hp-text-4)}
.hp-studio__label::before{content:"Промпт"}
/* плашка модели фиксированной ширины — смена названия не сдвигает вёрстку */
.hp-studio__model{display:inline-flex;align-items:center;gap:8px;flex:none;width:186px;height:30px;padding:0 12px 0 3px;box-sizing:border-box;border-radius:999px;
  font-size:12.5px;font-weight:650;color:var(--hp-text-2);background:rgba(255,255,255,.04);border:1px solid var(--hp-line-2)}
.hp-studio__model img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none}
.hp-studio__model::after{content:attr(data-name);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* текст: невидимые копии всех промптов в одной ячейке задают высоту = самый длинный (без сдвигов вёрстки),
   поверх — печатающийся текст (data-text) с кареткой. Всё — псевдоэлементы: в тексте страницы их нет */
.hp-studio__type{position:relative;flex:1;min-height:0;display:grid;align-content:center;padding:12px 22px 10px;overflow:hidden;
  font:650 clamp(21px,2vw,29px)/1.38 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:-.022em;color:var(--hp-text)}
/* большой фон-«кавычка» в поле — пустота не выглядит пустой */
.hp-studio__field::after{content:"";position:absolute;right:18px;bottom:62px;width:110px;height:110px;pointer-events:none;opacity:.06;
  background:radial-gradient(circle at 50% 50%,rgba(var(--hp-1-rgb),1),transparent 70%);filter:blur(6px)}
.hp-studio__type > span{grid-area:1/1;min-width:0;overflow-wrap:break-word}
.hp-studio__type > span:not(.hp-studio__txt){visibility:hidden}
.hp-studio__type > span::before{content:attr(data-t);padding-right:5px}
/* каретка — правая граница самого текста (а не отдельный элемент после него): печать не даёт сдвигов вёрстки (CLS) */
.hp-studio__txt::before{content:attr(data-text) !important;padding-right:3px;border-right:2px solid var(--hp-1);animation:hpCaret 1s steps(1) infinite}
.hp-studio.is-typing .hp-studio__txt::before{animation:none}
.hp-studio.is-gen .hp-studio__txt::before{border-right-color:transparent;animation:none}
@keyframes hpCaret{50%{border-right-color:transparent}}
/* настройки: тускнеют, пока печатается промпт, и загораются по очереди перед генерацией */
.hp-studio__chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 14px}
.hp-studio__chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;font:600 11.5px var(--hp-mono);color:var(--hp-text-3);
  background:rgba(255,255,255,.04);border:1px solid var(--hp-line-1);transition:opacity .35s,transform .35s,border-color .35s,color .35s,background .35s}
.hp-studio__chip:nth-child(2){transition-delay:.09s}
.hp-studio__chip:nth-child(3){transition-delay:.18s}
.hp-studio__chip:nth-child(4){transition-delay:.27s}
.hp-studio.is-typing .hp-studio__chip{opacity:.28;transform:translateY(3px)}
.hp-studio.is-set .hp-studio__chip:not(.hp-studio__chip--free){color:var(--hp-text);border-color:rgba(var(--hp-1-rgb),.5);background:rgba(var(--hp-1-rgb),.1)}
.hp-studio__chip--ratio::before{content:"▯ " attr(data-v)}
.hp-studio__chip--res::before{content:attr(data-v)}
.hp-studio__chip--ru::before{content:"RU → EN"}
.hp-studio__chip--free{color:#a7f3d0;background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.35)}
.hp-studio__chip--free::before{content:"бесплатно"}
/* полоса генерации (не кнопка): значок, статус, прогресс, проценты */
.hp-studio__run{position:relative;flex:none;display:flex;align-items:center;gap:12px;height:54px;padding:0 18px;border-radius:15px;overflow:hidden;
  background:rgba(255,255,255,.03);border:1px solid var(--hp-line-2)}
.hp-studio__run::before{content:"";position:absolute;inset:0;background:var(--hp-cta);opacity:0;transition:opacity .45s}
.hp-studio.is-gen .hp-studio__run::before{opacity:.13}
.hp-studio__run > *{position:relative}
.hp-studio__run-ico{width:18px;height:18px;flex:none;color:#34d399;transition:color .3s}
.hp-studio.is-typing .hp-studio__run-ico,.hp-studio.is-set .hp-studio__run-ico{color:var(--hp-text-4)}
.hp-studio.is-gen .hp-studio__run-ico{color:var(--hp-soft);animation:hpSpin 1.1s linear infinite}
@keyframes hpSpin{to{transform:rotate(360deg)}}
.hp-studio__run-state{flex:none;width:96px;font:600 11.5px var(--hp-mono);letter-spacing:.1em;text-transform:uppercase;color:#a7f3d0;white-space:nowrap}
.hp-studio__run-state::before{content:"готово"}
.hp-studio.is-typing .hp-studio__run-state{color:var(--hp-text-4)}
.hp-studio.is-typing .hp-studio__run-state::before{content:"описание"}
.hp-studio.is-set .hp-studio__run-state{color:var(--hp-text-3)}
.hp-studio.is-set .hp-studio__run-state::before{content:"настройки"}
.hp-studio.is-gen .hp-studio__run-state{color:var(--hp-soft-2)}
.hp-studio.is-gen .hp-studio__run-state::before{content:"генерация"}
.hp-studio__run-bar{flex:1;min-width:0;height:6px;border-radius:6px;background:rgba(148,163,184,.14);overflow:hidden}
.hp-studio__run-bar i{display:block;height:100%;border-radius:inherit;background:var(--hp-grad);box-shadow:0 0 14px rgba(var(--hp-1-rgb),.9);
  transform-origin:0 50%;transform:scaleX(var(--p,1));transition:transform .12s linear}
.hp-studio.is-typing .hp-studio__run-bar i{transition:none}
.hp-studio__run-pct{flex:none;width:46px;text-align:right;font:700 13px var(--hp-mono);color:var(--hp-text);font-variant-numeric:tabular-nums}
.hp-studio__run-pct::before{content:attr(data-v) "%"}
/* стрелка ровно в зазоре между полем и результатом: правая часть = картинка (h·3/4) + 12 + миниатюры (--hp-th) */
.hp-studio__arrow{position:absolute;z-index:4;top:calc(var(--hp-pad) + var(--hp-h) / 2);
  right:calc(var(--hp-pad) + var(--hp-h) * .75 + 12px + var(--hp-th) + 12px);display:grid;place-items:center;width:46px;height:46px;margin:-23px -23px 0 0;
  border-radius:50%;color:#fff;background:var(--hp-cta);box-shadow:0 10px 30px -6px rgba(var(--hp-cta-shadow),.85),0 0 0 6px rgba(10,14,26,.9);pointer-events:none}
.hp-studio__arrow svg{width:20px;height:20px;animation:hpNudge 1.6s ease-in-out infinite}
.hp-studio.is-gen .hp-studio__arrow{animation:hpBeat .75s ease-in-out infinite}
@keyframes hpNudge{0%,100%{transform:translateX(-2px)}50%{transform:translateX(3px)}}
@keyframes hpBeat{50%{transform:scale(1.12);box-shadow:0 14px 40px -6px rgba(var(--hp-cta-shadow),1),0 0 0 6px rgba(10,14,26,.9)}}

/* справа: результат 3:4 + колонка из 5 примеров */
.hp-studio__res{display:grid;grid-template-columns:auto auto;gap:12px;min-width:0;min-height:0}
.hp-studio__out{position:relative;height:var(--hp-h);aspect-ratio:3/4;border-radius:20px;overflow:hidden;background:var(--hp-bg-3);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.09);transition:box-shadow .5s}
.hp-studio.is-gen .hp-studio__out{box-shadow:0 26px 60px -24px rgba(0,0,0,.95),0 0 0 1px rgba(var(--hp-1-rgb),.6),0 0 60px -10px rgba(var(--hp-cta-shadow),.6)}
/* проявление: новая картинка из размытия и «зерна» становится чёткой; старая гаснет */
.hp-studio__out > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);filter:blur(22px) saturate(.4) brightness(.8);
  transition:opacity .7s ease,transform 1.6s cubic-bezier(.2,.7,.2,1),filter 1.5s cubic-bezier(.2,.7,.2,1)}
.hp-studio__out > img.is-on{opacity:1;transform:none;filter:none}
.hp-studio__out > img.is-out{opacity:.35;filter:blur(14px) saturate(.5) brightness(.7);transform:scale(1.03);transition:opacity .5s,filter .6s,transform .6s}
.hp-studio__out::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,16,.45),transparent 24%,transparent 62%,rgba(5,8,16,.88))}
/* «шум» диффузии поверх картинки во время генерации (SVG-turbulence, без файлов) */
.hp-studio__noise{position:absolute;inset:-20%;z-index:1;pointer-events:none;opacity:0;mix-blend-mode:overlay;transition:opacity .6s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hp-studio.is-gen .hp-studio__noise{opacity:.55;animation:hpGrain .45s steps(4) infinite}
@keyframes hpGrain{0%{transform:translate(0,0)}25%{transform:translate(-6%,4%)}50%{transform:translate(5%,-5%)}75%{transform:translate(-4%,-3%)}100%{transform:translate(3%,5%)}}
.hp-studio__scan{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent 42%,rgba(var(--hp-1-rgb),.5) 50%,transparent 58%);background-size:100% 260%}
.hp-studio.is-gen .hp-studio__scan{opacity:1;animation:hpScan 1.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes hpScan{from{background-position:0 110%}to{background-position:0 -30%}}
/* статус на картинке */
.hp-studio__status{position:absolute;left:12px;top:12px;z-index:4;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;
  font:600 11px var(--hp-mono);letter-spacing:.06em;text-transform:uppercase;color:#a7f3d0;background:rgba(6,40,30,.78);border:1px solid rgba(52,211,153,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:color .3s,background .3s,border-color .3s}
.hp-studio__status::before{content:"✓ готово"}
.hp-studio.is-typing .hp-studio__status,.hp-studio.is-set .hp-studio__status{color:var(--hp-text-3);background:rgba(10,14,26,.72);border-color:rgba(255,255,255,.16)}
.hp-studio.is-typing .hp-studio__status::before,.hp-studio.is-set .hp-studio__status::before{content:"ожидание"}
.hp-studio.is-gen .hp-studio__status{color:var(--hp-soft-2);background:rgba(10,14,26,.72);border-color:rgba(var(--hp-2-rgb),.5)}
.hp-studio.is-gen .hp-studio__status::before{content:"генерация…"}
/* подпись модели внизу картинки */
.hp-studio__name{position:absolute;left:14px;right:14px;bottom:12px;z-index:4;font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .4s}
.hp-studio.is-gen .hp-studio__name{opacity:0}
.hp-studio__name::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#34d399;vertical-align:1px;box-shadow:0 0 8px #34d399}
.hp-studio__name::after{content:attr(data-name)}
/* примеры: активный — градиентная рамка + полоска времени до следующего (как в сторис) */
.hp-studio__scenes{display:flex;flex-direction:column;justify-content:space-between;gap:8px;height:var(--hp-h);width:var(--hp-th)}
.hp-studio__scene{position:relative;flex:1 1 0;min-height:0;width:100%;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;
  background:var(--hp-bg-3);border:1px solid var(--hp-line-2);opacity:.5;transition:opacity .3s,border-color .3s,transform .3s,box-shadow .3s}
.hp-studio__scene img{display:block;width:100%;height:100%;object-fit:cover}
.hp-studio__scene:hover{opacity:.9}
.hp-studio__scene[data-on]{opacity:1;border:2px solid transparent;
  background:linear-gradient(var(--hp-bg-2),var(--hp-bg-2)) padding-box,var(--hp-grad) border-box;box-shadow:0 8px 22px -8px rgba(var(--hp-cta-shadow),.8)}
.hp-studio__scene > i{position:absolute;left:4px;right:4px;bottom:4px;height:3px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden;opacity:0;transition:opacity .3s}
.hp-studio__scene[data-on] > i{opacity:1}
.hp-studio__scene > i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.hp-studio__scene[data-on].is-run > i::after{animation:hpStory var(--hp-cycle,8s) linear forwards}
@keyframes hpStory{to{transform:scaleX(1)}}

/* нижняя строка окна: 4 преимущества (ul.hero__features — прежний текст), без коробок — подписи с иконками */
.hero__features{
  position:relative;display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:0 !important;
  width:100%;max-width:1160px !important;margin:0 !important;padding:0 !important;list-style:none;text-align:left;
  border-radius:0 0 28px 28px;background:rgba(8,11,22,.6);border-top:1px solid var(--hp-line-1);isolation:isolate;overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
}
.hero__features::before{content:"";position:absolute;inset:-1px 0 0;z-index:2;border-radius:inherit;padding:0 1px 1px;background:var(--hp-line);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.85;pointer-events:none}
.hero__feature{
  position:relative;display:flex !important;align-items:flex-start;gap:11px;padding:16px 20px 18px !important;border:0 !important;border-radius:0 !important;
  background:none !important;color:var(--hp-text-4);font-size:13px !important;line-height:1.45;transition:background .25s;
}
.hero__feature + .hero__feature::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:linear-gradient(180deg,transparent,var(--hp-line-2),transparent)}
.hero__feature:hover{transform:none !important;background:radial-gradient(260px 110px at 20% 0%,rgba(var(--hp-1-rgb),.1),transparent 70%) !important}
.hero__feature > span{min-width:0}
.hero__feature strong{display:block;color:var(--hp-text);font-size:14.5px;font-weight:750;letter-spacing:-.01em;margin-bottom:2px;white-space:nowrap}
.hero__icon{flex:none;width:18px !important;height:18px !important;margin-top:1px;padding:0;color:var(--hp-1) !important;background:none !important;border:0 !important;box-shadow:none !important;
  filter:drop-shadow(0 0 8px rgba(var(--hp-1-rgb),.55))}
.hero__feature:nth-child(2) .hero__icon{color:var(--hp-3) !important}
.hero__feature:nth-child(3) .hero__icon{color:var(--hp-2) !important}
.hero__feature:nth-child(4) .hero__icon{color:var(--hp-soft) !important}

/* --- адаптив --- */
@media (max-width:1100px){
  .hp-studio{--hp-h:clamp(300px,34vw,360px)}
  .hp-studio__body{gap:18px}
  .hero__features{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .hero__feature:nth-child(3)::before{display:none}
  .hero__feature:nth-child(n+3){border-top:1px solid var(--hp-line-1) !important}
}
@media (max-width:860px){
  /* планшет/телефон: поле сверху, результат ниже (картинка 4:3 + примеры поверх нижнего края) */
  .hp-studio{--hp-h:auto}
  .hp-studio__body{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:14px}
  .hp-studio__arrow{display:none}
  .hp-studio__compose{order:1}
  .hp-studio__res{order:2;grid-template-columns:minmax(0,1fr);position:relative}
  .hp-studio__type{min-height:0;align-content:start;font-size:clamp(18px,3vw,22px);padding:10px 16px 10px}
  .hp-studio__field::after{display:none}
  .hp-studio__out{height:auto;width:100%;aspect-ratio:4/3}
  .hp-studio__out > img{object-position:50% 38%}
  .hp-studio__out::after{background:linear-gradient(180deg,rgba(5,8,16,.5),transparent 26%,transparent 50%,rgba(5,8,16,.92))}
  .hp-studio__name{bottom:auto;top:46px;left:14px}
  .hp-studio__scenes{position:absolute;left:10px;right:10px;bottom:10px;z-index:4;flex-direction:row;justify-content:center;height:auto;width:auto;gap:8px}
  .hp-studio__scene{flex:0 0 auto;width:clamp(44px,10vw,60px);height:auto;aspect-ratio:3/4;border-radius:10px;opacity:.75}
  .hp-studio__scene:hover{transform:translateY(-2px)}
  .hp-studio__name{bottom:auto;top:46px}
}
@media (max-width:640px){
  .hero{padding:12px 0 0 !important}
  .hero h1{margin:12px auto 10px !important;line-height:1.08 !important}
  .hero p{font-size:15px;line-height:1.55;margin-bottom:18px !important}
  .hp-studio{border-radius:22px 22px 0 0;--hp-pad:12px}
  .hp-studio__bar{height:38px;padding:0 14px}
  .hp-studio__dots i{width:8px;height:8px}
  .hp-studio__title{font-size:11px}
  .hp-studio__live{display:none}
  .hp-studio__field{border-radius:16px}
  .hp-studio__head{padding:12px 12px 0}
  .hp-studio__type{padding:10px 12px 8px;font-size:17px}
  .hp-studio__model{width:164px}
  .hp-studio__chips{padding:0 12px 12px}
  .hp-studio__chip--res{display:none}
  .hp-studio__run{height:48px;padding:0 14px;gap:10px}
  .hp-studio__run-state{width:84px;font-size:11px}
  .hp-studio__out{border-radius:16px}
  /* преимущества — 4 строки-подписи: значок, **заголовок** — пояснение */
  .hero__features{grid-template-columns:1fr !important;border-radius:0 0 22px 22px;padding:6px 0 !important}
  .hero__feature{padding:9px 16px !important;font-size:13px !important;gap:10px}
  .hero__feature::before{display:none}
  .hero__feature:nth-child(n+2){border-top:0 !important}
  .hero__feature strong{display:inline;font-size:13.5px;white-space:normal;margin:0}
}
@media (prefers-reduced-motion:reduce){
  .hp-studio__arrow,.hp-studio__arrow svg,.hp-studio__txt::before,.hp-studio__live i,.hp-studio__noise,.hp-studio__scan,.hp-studio__run-ico{animation:none !important}
  .hp-studio__out > img,.hp-studio__chip{transition:none}
  .hp-studio__scene > i{display:none}
}

/* ===== СТУДИЯ: генератор как окно приложения (как .vp-studio на /video) =====
   Полоса окна — псевдоэлемент ::after, а НЕ элемент в DOM: так путь до #generateBtn
   (цель Метрики «Нажать генерация», btn_path) не меняется. */
.generator-container{
  --hp-bar:44px;
  isolation:isolate;
  padding-top:calc(var(--hp-bar) + 26px) !important;
  border-radius:28px !important;
  background:
    radial-gradient(700px 320px at 15% 0%,rgba(var(--hp-3-rgb),.16),transparent 65%),
    radial-gradient(700px 320px at 90% 100%,rgba(var(--hp-2-rgb),.12),transparent 65%),
    var(--hp-panel-2) !important;
  border:1px solid var(--hp-line-1) !important;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 120px -40px rgba(var(--hp-cta-shadow),.45) !important;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.generator-container::before{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;padding:1px;background:var(--hp-line) !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.8;pointer-events:none;
}
.generator-container::after{
  content:"freeimg.io · генератор картинок";
  position:absolute;left:0;right:0;top:0;height:var(--hp-bar);z-index:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;padding:0 70px;box-sizing:border-box;
  font:500 12px var(--hp-mono);color:var(--hp-text-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-bottom:1px solid var(--hp-line-1);border-radius:28px 28px 0 0;
  background:
    radial-gradient(circle 5px at 23px 50%,#fb7185 98%,transparent),
    radial-gradient(circle 5px at 39px 50%,#fbbf24 98%,transparent),
    radial-gradient(circle 5px at 55px 50%,#34d399 98%,transparent),
    rgba(255,255,255,.02);
}
@media (min-width:1440px){.generator-container{padding-top:calc(var(--hp-bar) + 34px) !important}}
@media (max-width:767px){
  .generator-container{--hp-bar:38px;border-radius:20px !important;padding-top:calc(var(--hp-bar) + 18px) !important}
  .generator-container::after{font-size:11px;border-radius:20px 20px 0 0;padding:0 56px;
    background:radial-gradient(circle 4px at 18px 50%,#fb7185 98%,transparent),radial-gradient(circle 4px at 31px 50%,#fbbf24 98%,transparent),radial-gradient(circle 4px at 44px 50%,#34d399 98%,transparent),rgba(255,255,255,.02)}
}

/* Карточка модели */
.model-trigger{
  background:linear-gradient(135deg,rgba(var(--hp-1-rgb),.12),rgba(var(--hp-2-rgb),.05) 60%),var(--hp-panel) !important;
  border-color:var(--hp-line-2) !important;box-shadow:none !important;
}
.model-trigger:hover{border-color:rgba(var(--hp-1-rgb),.5) !important;box-shadow:0 18px 40px -20px rgba(var(--hp-1-rgb),.55) !important}
.model-trigger::after{background:radial-gradient(120% 90% at 0% -20%,rgba(var(--hp-3-rgb),.16),transparent 60%) !important}
.model-trigger::before{background:var(--hp-grad) !important;box-shadow:0 0 12px rgba(var(--hp-1-rgb),.7) !important}
.model-trigger__media{box-shadow:0 0 0 1px rgba(var(--hp-1-rgb),.3),0 6px 18px rgba(0,0,0,.4) !important}
.model-trigger__overline{color:var(--hp-text-4) !important;font-family:var(--hp-mono);font-weight:600 !important}
.model-trigger__name{color:var(--hp-text) !important}
.model-trigger__cta{background:rgba(var(--hp-1-rgb),.1) !important;border-color:rgba(var(--hp-1-rgb),.3) !important;color:var(--hp-soft) !important}
.model-trigger:hover .model-trigger__cta{background:rgba(var(--hp-1-rgb),.2) !important;border-color:rgba(var(--hp-1-rgb),.6) !important;color:#fff !important}
.model-trigger__badge[data-badge="pro"]{background:linear-gradient(135deg,rgba(var(--hp-3-rgb),.95),rgba(var(--hp-1-rgb),.9)) !important;color:#fff !important;box-shadow:0 0 14px rgba(var(--hp-1-rgb),.35) !important}
.model-trigger__badge[data-badge="premium"]{background:var(--hp-cta) !important;color:#fff !important;box-shadow:0 0 16px rgba(var(--hp-cta-shadow),.45) !important}

/* Поля, лейблы, подсказки */
.label-enhanced{color:var(--hp-text) !important}
.label-badge{background:rgba(var(--hp-1-rgb),.12) !important;border-color:rgba(var(--hp-1-rgb),.32) !important;color:var(--hp-soft) !important;font-family:var(--hp-mono);letter-spacing:.06em !important}
.textarea-enhanced,.input-enhanced,.select-enhanced{background:rgba(5,8,16,.7) !important;border-color:var(--hp-line-2) !important;color:var(--hp-text) !important}
.textarea-enhanced:hover,.input-enhanced:hover{border-color:rgba(var(--hp-1-rgb),.35) !important}
.textarea-enhanced:focus,.input-enhanced:focus,.select-enhanced:focus{border-color:rgba(var(--hp-1-rgb),.6) !important;box-shadow:0 0 0 4px rgba(var(--hp-1-rgb),.12) !important}
.textarea-enhanced::placeholder{color:var(--hp-text-4) !important}
.helper-enhanced{border-left-color:rgba(var(--hp-1-rgb),.45) !important;color:var(--hp-text-3) !important}
.helper-icon{color:var(--hp-text-4) !important}
.label-value{color:var(--hp-soft) !important;background:rgba(var(--hp-1-rgb),.14) !important;border-color:rgba(var(--hp-1-rgb),.3) !important}


/* Плитки соотношения, разрешение, сегменты, степперы */
.ratio-tile,.resolution-tile{background:rgba(255,255,255,.03) !important;border-color:var(--hp-line-2) !important;color:var(--hp-text-2) !important}
.ratio-tile:hover,.resolution-tile:hover{background:rgba(var(--hp-1-rgb),.06) !important;border-color:rgba(var(--hp-1-rgb),.45) !important}
.ratio-tile.is-active,.resolution-tile.is-active{
  color:#fff !important;
  background:radial-gradient(120% 120% at 50% 0%,rgba(var(--hp-1-rgb),.28),transparent 70%),rgba(var(--hp-1-rgb),.1) !important;
  border-color:rgba(var(--hp-1-rgb),.75) !important;
  box-shadow:0 0 0 1px rgba(var(--hp-1-rgb),.5),0 8px 22px rgba(var(--hp-1-rgb),.25) !important;
}
.ratio-tile.is-active .ratio-tile__glyph{color:var(--hp-soft) !important}
.segmented{background:rgba(5,8,16,.7) !important;border-color:var(--hp-line-2) !important}
.segmented__item{color:var(--hp-text-3)}
.segmented__item.is-active{color:#fff;background:var(--hp-cta) !important;box-shadow:0 6px 16px rgba(var(--hp-cta-shadow),.35) !important}
.num-stepper__btn{color:var(--hp-soft) !important;background:rgba(var(--hp-1-rgb),.08) !important;border-color:rgba(var(--hp-1-rgb),.28) !important}
@media (hover:hover){.num-stepper__btn:hover{color:#fff !important;background:rgba(var(--hp-1-rgb),.22) !important;border-color:rgba(var(--hp-1-rgb),.6) !important;box-shadow:0 6px 16px rgba(var(--hp-1-rgb),.3) !important}}
.num-stepper__btn:active{background:rgba(var(--hp-1-rgb),.4) !important;border-color:rgba(var(--hp-1-rgb),.9) !important}
#steps.range-enhanced,#cfg.range-enhanced{background:linear-gradient(90deg,var(--hp-3) 0%,var(--hp-2) var(--range-fill,0%),rgba(148,163,184,.18) var(--range-fill,0%),rgba(148,163,184,.18) 100%) !important}
#steps.range-enhanced::-webkit-slider-thumb,#cfg.range-enhanced::-webkit-slider-thumb{border-color:var(--hp-1) !important;background:#fff !important;box-shadow:0 2px 10px rgba(var(--hp-1-rgb),.55),0 0 0 4px rgba(var(--hp-1-rgb),.12) !important}
#steps.range-enhanced::-moz-range-thumb,#cfg.range-enhanced::-moz-range-thumb{border-color:var(--hp-1) !important;background:#fff !important}
.reference-add-btn{border-color:rgba(var(--hp-1-rgb),.5) !important;background:rgba(var(--hp-1-rgb),.07) !important;color:var(--hp-soft) !important}
.reference-add-btn:hover{border-color:rgba(var(--hp-1-rgb),.8) !important;background:rgba(var(--hp-1-rgb),.14) !important}
.reference-thumb{border-color:rgba(var(--hp-1-rgb),.35) !important}
.advanced-controls{background:rgba(255,255,255,.02) !important;border:1px solid var(--hp-line-1) !important}
.advanced-controls:hover,.advanced-controls[open]{border-color:rgba(var(--hp-1-rgb),.35) !important}
.advanced-controls-summary{background:none !important}
.advanced-controls-summary::before{background:linear-gradient(90deg,transparent,rgba(var(--hp-1-rgb),.35),transparent) !important}
.advanced-controls-summary:hover{background:rgba(var(--hp-1-rgb),.05) !important}
.advanced-controls-icon{color:var(--hp-1) !important}
.advanced-controls-content{background:rgba(5,8,16,.35) !important}

/* Кнопка «Сгенерировать» (id и текст прежние) + счётчик */
#generateBtn.button--primary.button--enhanced{
  background:var(--hp-cta) !important;border:0 !important;
  box-shadow:0 10px 30px -8px rgba(var(--hp-cta-shadow),.6),inset 0 1px 0 rgba(255,255,255,.25) !important;
}
#generateBtn.button--primary.button--enhanced::before{
  opacity:1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);
  background-size:250% 100%;background-position:120% 0;transition:background-position .7s ease;
}
#generateBtn.button--primary.button--enhanced:hover{box-shadow:0 16px 40px -10px rgba(var(--hp-cta-shadow),.75),inset 0 1px 0 rgba(255,255,255,.3) !important}
#generateBtn.button--primary.button--enhanced:hover::before{background-position:-20% 0}
.counter-badge{background:rgba(255,255,255,.03) !important;border:1px solid var(--hp-line-2) !important}
.counter-badge-text{color:var(--hp-text-3) !important}
.counter-badge-text strong{color:var(--hp-soft-2) !important}


/* Разделитель «Результат генерации» — как eyebrow на /video */
.generator-divider{margin:30px 0 !important}
.divider-line{background:linear-gradient(90deg,transparent,rgba(var(--hp-1-rgb),.45),transparent) !important}
.divider-text{
  font:600 12px var(--hp-mono) !important;letter-spacing:.14em !important;color:var(--hp-text-2) !important;
  background:linear-gradient(var(--hp-bg-3),var(--hp-bg-3)) padding-box,var(--hp-line) border-box !important;
  border:1px solid transparent !important;box-shadow:0 0 24px -6px rgba(var(--hp-1-rgb),.6);
}

/* Холст результата + кнопки под ним */
.generator-result .output{
  border:1px solid var(--hp-line-2) !important;
  background:
    radial-gradient(circle at 50% 38%,rgba(var(--hp-1-rgb),.1),transparent 62%),
    repeating-conic-gradient(rgba(148,163,184,.035) 0% 25%,transparent 0% 50%) 50%/36px 36px,
    linear-gradient(180deg,rgba(13,19,34,.8),rgba(10,14,26,.9)) !important;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.generator-result .output:hover{border-color:rgba(var(--hp-1-rgb),.35) !important}
.generator-result .output__icon{
  color:#fff !important;border:1px solid rgba(var(--hp-3-rgb),.35) !important;
  background:linear-gradient(145deg,rgba(var(--hp-3-rgb),.3),rgba(var(--hp-2-rgb),.14)) !important;
  box-shadow:0 18px 40px -14px rgba(var(--hp-1-rgb),.7),inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.generator-result .output__text strong{color:var(--hp-text)}
.button--ghost.button--enhanced{background:rgba(255,255,255,.04) !important;border:1px solid var(--hp-line-2) !important;color:var(--hp-text) !important;box-shadow:none !important}
.button--ghost.button--enhanced:hover{background:rgba(255,255,255,.08) !important;border-color:rgba(var(--hp-3-rgb),.5) !important}
.output__expand-btn:hover{background:rgba(var(--hp-1-rgb),.5);border-color:rgba(var(--hp-1-rgb),.7)}

/* Загрузка: оформление в css/adaptive-loader.css (005 — общий вид для главной и инструментов) */

/* История генераций */
.generation-history{background:rgba(255,255,255,.02) !important;border-color:var(--hp-line-1) !important}
.history-header::after{background:linear-gradient(90deg,transparent,rgba(var(--hp-1-rgb),.4),transparent) !important}
.history-icon{background:linear-gradient(145deg,rgba(var(--hp-3-rgb),.34),rgba(var(--hp-2-rgb),.18)) !important;box-shadow:none !important}
.history-count{color:var(--hp-soft) !important;background:rgba(var(--hp-1-rgb),.12) !important;border-color:rgba(var(--hp-1-rgb),.3) !important}
.history-card{border-color:var(--hp-line-2) !important}
.history-card:hover{border-color:rgba(var(--hp-1-rgb),.5) !important;box-shadow:0 12px 30px -12px rgba(var(--hp-1-rgb),.5) !important}

/* ===== ЗАГОЛОВКИ РАЗДЕЛОВ (тексты прежние, меняется только вид) ===== */
.section-title,#features > .container > h2,#blog-preview .page-title,#seo h2,#faq-title{
  color:var(--hp-text) !important;-webkit-text-fill-color:currentColor !important;background:none !important;
  font-weight:800 !important;letter-spacing:-.025em !important;line-height:1.12 !important;text-wrap:balance;
}
.section-title{font-size:clamp(26px,3.2vw,38px) !important}
.section-subtitle{color:var(--hp-text-3) !important;font-size:clamp(15px,1.4vw,17px) !important;text-wrap:pretty}
.home-tools .ht-accent{background:var(--hp-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 24px rgba(var(--hp-1-rgb),.3))}
/* короткая градиентная черта над заголовком раздела */
.home-tools .section-header::before,.ai-models-section .section-header::before{
  content:"";display:block;width:64px;height:3px;margin:0 auto 18px;border-radius:3px;background:var(--hp-grad);
  box-shadow:0 0 18px rgba(var(--hp-1-rgb),.6);
}
.section{padding:clamp(48px,6vw,84px) 0 0 !important}

/* ===== ВСЕ ИНСТРУМЕНТЫ ===== */
.ht-card{background:var(--hp-bg-2);border-color:var(--hp-line-2);box-shadow:0 30px 70px -30px rgba(0,0,0,.75)}
.ht-card:hover{border-color:rgba(var(--hp-1-rgb),.55);box-shadow:0 28px 70px rgba(8,10,20,.6),0 0 0 1px rgba(var(--hp-1-rgb),.4),0 20px 55px rgba(var(--hp-1-rgb),.22)}
.ht-card:focus-visible{border-color:rgba(var(--hp-2-rgb),.65);box-shadow:0 0 0 4px rgba(var(--hp-1-rgb),.4)}
.ht-card__badge{background:var(--hp-cta);box-shadow:0 8px 22px rgba(var(--hp-cta-shadow),.45)}
.ht-card:hover .ht-card__cta{background:var(--hp-cta)}
.ht-dot.is-active{background:var(--hp-grad)}
/* описание и кнопка — отдельными строками (раньше «Открыть» вставала в строку с концом описания:
   .ht-card__desc и .ht-card__cta — <span> внутри инлайн-потока) */
.ht-card__desc{display:block;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;max-height:none !important;overflow:hidden}
.ht-card__cta{display:flex !important;width:max-content;margin-top:14px !important}
.ht-card__media::after{background:linear-gradient(180deg,rgba(8,11,20,0) 28%,rgba(8,11,20,.4) 50%,rgba(8,11,20,.85) 76%,rgba(8,11,20,.97) 100%) !important}
/* планшет 769–1100: 2×2 горизонтальными карточками. В home-tools.css это правило задумано, но не работает —
   базовое .ht-card{aspect-ratio:3/4} стоит в файле ниже и перебивает его (карточки 446×595, блок 1442 px) */
@media (min-width:769px) and (max-width:1100px){.ht-card{aspect-ratio:4/3}}

/* ===== МОДЕЛИ v2: bento-витрина — работа модели на всю карточку, текст поверх, цена =====
   Весь текст карточки (описание, «Лучше подходит для», чипы) остаётся в разметке; в покое —
   заголовок + 2 строки описания + чипы, при наведении/фокусе раскрывается список задач. */
.ai-models-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;grid-auto-flow:dense;gap:16px !important}
.ai-model-card{
  --mx:50%;--my:50%;
  position:relative;min-height:420px;border-radius:24px !important;overflow:hidden !important;cursor:pointer;
  background:var(--hp-bg-2) !important;border:1px solid var(--hp-line-1) !important;box-shadow:0 30px 70px -40px rgba(0,0,0,.85) !important;
  isolation:isolate;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .45s !important;
}
.ai-model-card:nth-child(1),.ai-model-card:nth-child(5){grid-column:span 2}
.ai-model-card:hover,.ai-model-card:focus-visible{transform:translateY(-6px) !important;border-color:rgba(var(--hp-1-rgb),.45) !important;
  box-shadow:0 34px 70px -30px rgba(var(--hp-cta-shadow),.55) !important;outline:none}
.ai-model-card::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(380px circle at var(--mx) var(--my),rgba(var(--hp-1-rgb),.75),rgba(var(--hp-2-rgb),.3) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ai-model-card:hover::before{opacity:1}
.ai-model-card__header{position:absolute !important;inset:0;z-index:0}
.ai-model-card__image-wrapper{position:absolute !important;inset:0;aspect-ratio:auto !important;background:var(--hp-bg-3) !important}
.ai-model-card__image{position:absolute;inset:0;width:100%;height:100% !important;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1) !important}
.ai-model-card:hover .ai-model-card__image{transform:scale(1.06) !important}
.ai-model-card__image-wrapper::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,8,16,.25) 0%,transparent 22%,transparent 38%,rgba(5,8,16,.72) 62%,rgba(5,8,16,.96) 100%)}
.ai-model-card__badge{top:14px !important;left:14px;right:auto !important;height:26px;display:inline-flex;align-items:center;padding:0 11px !important;border-radius:999px !important;font-size:11px !important;letter-spacing:.04em !important;box-shadow:none !important}
.ai-model-card__badge--free{background:rgba(6,40,30,.86) !important;border:1px solid rgba(52,211,153,.55) !important;color:#a7f3d0 !important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ai-model-card__badge--basic,.ai-model-card__badge--pro{background:rgba(10,14,26,.72) !important;border:1px solid rgba(255,255,255,.18) !important;color:#fff !important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ai-model-card__badge--premium{background:var(--hp-cta) !important;border:0 !important;color:#fff !important;box-shadow:0 8px 20px -8px rgba(var(--hp-cta-shadow),.8) !important}
/* цена из реестра (data-credits) — справа сверху; у бесплатных — «гостям бесплатно» */
.ai-model-card[data-credits]:not([data-credits=""])::after{
  content:"от " attr(data-credits) " кр.";position:absolute;top:14px;right:14px;z-index:2;height:26px;display:inline-flex;align-items:center;padding:0 10px;
  border-radius:999px;font:600 11px var(--hp-mono);color:#fff;background:rgba(10,14,26,.72);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ai-model-card[data-badge="free"]::after{content:"гостям бесплатно" !important}
.ai-model-card__content{position:relative;z-index:2;display:flex !important;flex-direction:column;justify-content:flex-end;min-height:100%;
  padding:70px 20px 20px !important;gap:10px !important}
/* аватар (обложка модели) — слева от заголовка; position по сетке контента */
.ai-model-card__avatar{display:block;width:40px;height:40px;border-radius:12px;object-fit:cover;margin-bottom:2px;
  border:2px solid rgba(255,255,255,.85);box-shadow:0 10px 24px -8px rgba(0,0,0,.9)}
.ai-model-card__title{color:#fff !important;font-size:clamp(18px,1.5vw,21px) !important;font-weight:800 !important;letter-spacing:-.02em !important;
  text-shadow:0 2px 18px rgba(0,0,0,.6) !important;margin:0 !important}
.ai-model-card__description{color:rgba(226,232,240,.86) !important;font-size:14px !important;line-height:1.5 !important;margin:0 !important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.ai-model-card__use-cases{display:grid;grid-template-rows:0fr;margin:0 !important;padding:0 !important;border:0 !important;opacity:0;
  transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1),opacity .35s}
.ai-model-card__use-cases > *{min-height:0;overflow:hidden}
.ai-model-card:hover .ai-model-card__use-cases,.ai-model-card:focus-visible .ai-model-card__use-cases{grid-template-rows:1fr;opacity:1}
.ai-model-card:hover .ai-model-card__description,.ai-model-card:focus-visible .ai-model-card__description{-webkit-line-clamp:4}
.use-case-label{display:none !important}
.use-case-list{gap:4px !important;padding-top:2px !important}
.use-case-list li{color:rgba(241,245,249,.9) !important;font-size:13px !important;padding-left:16px !important}
.use-case-list li::before{content:"" !important;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--hp-grad)}
/* чипы: одна строка высотой 26px, не поместившийся чип уходит на 2-ю строку и скрыт целиком
   (раньше — обрезка посередине слова «Детализ…», «Нео…») */
.ai-model-card__features{gap:6px !important;padding-top:0 !important;margin-top:0 !important;flex-wrap:wrap !important;overflow:hidden;
  height:26px;align-content:flex-start;-webkit-mask-image:none;mask-image:none}
.feature-chip{flex:none;white-space:nowrap}
.feature-chip{height:26px;padding:0 10px !important;border-radius:999px !important;background:rgba(10,14,26,.6) !important;border:1px solid rgba(255,255,255,.14) !important;
  color:rgba(241,245,249,.9) !important;font-size:11.5px !important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.feature-chip:hover{transform:none !important}
/* при наведении цена справа сверху сменяется на «Попробовать →» (вся карточка кликабельна) */
.ai-model-card:hover::after,.ai-model-card:focus-visible::after{content:"Попробовать →" !important;font-family:inherit;font-weight:700;font-size:12px;
  background:var(--hp-cta);border-color:transparent;box-shadow:0 8px 20px -8px rgba(var(--hp-cta-shadow),.8)}
/* вторая широкая среди скрытых — чтобы в раскрытом списке (17 карточек) ряды были полными */
.ai-model-card:nth-child(12){grid-column:span 2}
.ai-models-toggle{
  height:52px;padding:0 26px !important;border-radius:14px !important;border:1px solid var(--hp-line-2) !important;
  background:rgba(255,255,255,.04) !important;color:var(--hp-text) !important;box-shadow:none !important;
}
.ai-models-toggle:hover{background:rgba(255,255,255,.08) !important;border-color:rgba(var(--hp-3-rgb),.5) !important;box-shadow:0 14px 34px -14px rgba(var(--hp-1-rgb),.5) !important}
.ai-models-toggle::before{display:none}
@media (max-width:1100px){
  .ai-models-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  /* 2 колонки: широкая 1-я + 5 обычных дали бы «дырку» в последнем ряду — делаем широкой и 6-ю
     (свёрнуто: 2+2+2+2 = полные ряды); в раскрытом списке (17) широкая ещё 17-я → тоже без дырок */
  .ai-model-card:nth-child(5),.ai-model-card:nth-child(12){grid-column:auto}
  .ai-model-card:nth-child(6),.ai-model-card:nth-child(17){grid-column:span 2}
}
@media (max-width:640px){
  .ai-models-grid{grid-template-columns:1fr !important;gap:12px !important}
  .ai-model-card:nth-child(1),.ai-model-card:nth-child(6),.ai-model-card:nth-child(17){grid-column:auto}
  .ai-model-card{min-height:360px}
  .ai-model-card__use-cases{grid-template-rows:1fr;opacity:1}
}
@media (hover:none){
  .ai-model-card__use-cases{grid-template-rows:1fr;opacity:1}
}

/* ===== ВОЗМОЖНОСТИ v4: bento без иконок (по замечанию владельца) — тексты прежние =====
   «По описанию» и «Реализм» — картинка на всю карточку, заголовок и текст внизу поверх затемнения;
   «Бесплатный старт» — слева текст, справа кольцо «3 из 3» + аватары бесплатных моделей. Декор — aria-hidden. */
#features > .container > h2{font-size:clamp(26px,3.2vw,38px) !important;margin-bottom:26px !important;text-align:center}
.features{grid-template-columns:1.2fr 1fr !important;grid-template-rows:auto minmax(0,1fr);gap:16px !important;align-items:stretch}
.features .feature-card{
  --mx:50%;--my:50%;position:relative;overflow:hidden;isolation:isolate;min-height:0 !important;padding:26px !important;
  display:flex !important;flex-direction:column;justify-content:flex-end;
  background:var(--hp-panel-2) !important;border:1px solid var(--hp-line-1) !important;border-radius:24px !important;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.85) !important;transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .4s !important;
}
.features .feature-card:first-child{grid-row:span 2;min-height:560px !important}
.features .feature-card:nth-child(3){min-height:300px !important}
.features .feature-card::before{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(380px circle at var(--mx) var(--my),rgba(var(--hp-1-rgb),.7),rgba(var(--hp-2-rgb),.28) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.features .feature-card:hover{transform:translateY(-5px);border-color:rgba(var(--hp-1-rgb),.35) !important;box-shadow:0 34px 70px -34px rgba(var(--hp-cta-shadow),.5) !important}
.features .feature-card:hover::before{opacity:1}
.features .feature-card h3{position:relative;z-index:2;color:#fff;font-weight:800;font-size:clamp(20px,1.9vw,26px) !important;letter-spacing:-.025em;line-height:1.15;margin:0 0 8px !important;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.features .feature-card p{position:relative;z-index:2;color:rgba(226,232,240,.88);font-size:15px !important;line-height:1.6;max-width:520px;margin:0 !important;text-shadow:0 1px 10px rgba(0,0,0,.5)}
/* картинка на всю карточку + затемнение снизу под текст */
.hp-fviz{position:absolute;inset:0;z-index:0;margin:0;border-radius:inherit;overflow:hidden;background:var(--hp-bg-3)}
.hp-fviz > img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.features .feature-card:hover .hp-fviz > img{transform:scale(1.04)}
.hp-fviz--prompt::after,.hp-fviz--real::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,9,18,.25) 0%,transparent 26%,transparent 42%,rgba(6,9,18,.78) 70%,rgba(6,9,18,.96) 100%)}
.hp-fviz--prompt > img{object-position:50% 40%}
.hp-fviz__chip{position:absolute;left:18px;right:18px;top:18px;z-index:2;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:15px;
  font-size:14px;font-weight:600;color:#fff;background:rgba(10,14,26,.72);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.8)}
.hp-fviz__chip i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--hp-2);animation:hpPulse 2.2s infinite}
.hp-fviz--real > img{object-position:50% 50%}
.hp-fviz__lens{position:absolute;right:12%;top:22px;z-index:2;width:110px;height:110px;border-radius:50%;pointer-events:none;
  background:url(/assets/home/f-real-lg.webp) 62% 42%/420% auto no-repeat;border:2px solid rgba(255,255,255,.88);
  box-shadow:0 18px 44px -10px rgba(0,0,0,.9),0 0 0 6px rgba(10,14,26,.35)}
/* «Бесплатный старт»: текст слева, визуал справа (визуал — в потоке, не на фоне) */
.features .feature-card:nth-child(2){display:grid !important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;column-gap:24px;
  background:radial-gradient(360px 200px at 100% 50%,rgba(var(--hp-1-rgb),.14),transparent 70%),var(--hp-panel-2) !important}
.features .feature-card:nth-child(2) h3{grid-column:1;grid-row:1;text-shadow:none}
.features .feature-card:nth-child(2) p{grid-column:1;grid-row:2;color:var(--hp-text-3);text-shadow:none}
.hp-fviz--free{position:relative;inset:auto;grid-column:2;grid-row:1 / span 2;align-self:center;display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:0;background:none;border:0;overflow:visible}
.hp-fviz__ring{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;
  background:conic-gradient(var(--hp-1),var(--hp-2),var(--hp-1));padding:3px;box-shadow:0 14px 36px -10px rgba(var(--hp-cta-shadow),.85)}
.hp-fviz__ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--hp-bg-2)}
.hp-fviz__ring b,.hp-fviz__ring small{position:relative;line-height:1}
.hp-fviz__ring b{font-size:32px;font-weight:800;color:#fff}
.hp-fviz__ring small{font-size:11px;color:var(--hp-text-3);margin-top:4px}
.hp-fviz__avs{display:flex;flex-wrap:nowrap;padding-left:10px}
.hp-fviz__avs img{flex:none;width:30px;height:30px;margin-left:-10px;border-radius:50%;border:2px solid var(--hp-bg-2);box-shadow:0 6px 14px -6px rgba(0,0,0,.8);transition:transform .25s}
.hp-fviz__avs img:nth-child(n+7){display:none}
.features .feature-card:hover .hp-fviz__avs img{transform:translateY(-2px)}
.hp-fviz__cap{font:600 11.5px var(--hp-mono);color:var(--hp-soft-2);white-space:nowrap}
@media (max-width:1024px){
  .features{grid-template-columns:1fr 1fr !important;grid-template-rows:none}
  .features .feature-card:first-child{grid-row:auto;grid-column:1/-1;min-height:420px !important}
  .features .feature-card:nth-child(3){min-height:300px !important}
  .hp-fviz__lens{width:84px;height:84px;top:18px;right:18px}
}
@media (max-width:760px){
  .features{grid-template-columns:1fr !important;gap:12px !important}
  .features .feature-card{padding:20px !important;border-radius:20px !important}
  .features .feature-card:first-child{min-height:400px !important}
  .features .feature-card:nth-child(3){min-height:280px !important}
  .features .feature-card:nth-child(3){min-height:320px !important}
  .hp-fviz__chip{left:12px;right:12px;top:12px;padding:10px 12px;font-size:13px}
  .hp-fviz__lens{width:80px;height:80px;top:16px;right:16px}
}
/* «Бесплатный старт» в узкой карточке (2 колонки на 761–1100 и телефон ≤ 460): визуал строкой под текстом */
@media (max-width:460px),(min-width:761px) and (max-width:1100px){
  .features .feature-card:nth-child(2){grid-template-columns:minmax(0,1fr);align-content:end;row-gap:0}
  .hp-fviz--free{grid-column:1;grid-row:3;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;margin-top:18px;gap:12px}
  .hp-fviz__ring{width:72px;height:72px}
  .hp-fviz__ring b{font-size:24px}
}

/* ===== БЛОГ (переопределяет inline <style> блока; специфичность выше) ===== */
section#blog-preview{
  margin-top:clamp(48px,6vw,84px) !important;
  background:var(--hp-panel-2) !important;border:1px solid var(--hp-line-1) !important;border-radius:28px !important;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
}
section#blog-preview .page-title{font-size:clamp(26px,3.2vw,38px) !important}
section#blog-preview .page-sub{color:var(--hp-text-3)}
section#blog-preview .card{background:var(--hp-panel) !important;border:1px solid var(--hp-line-1) !important;border-radius:20px !important;transition:transform .35s,border-color .35s,box-shadow .35s}
section#blog-preview .card:hover{transform:translateY(-5px);border-color:rgba(var(--hp-1-rgb),.38) !important;box-shadow:0 24px 50px -22px rgba(var(--hp-cta-shadow),.5)}
section#blog-preview .card .date{color:var(--hp-text-4);font-family:var(--hp-mono);font-size:12px}
section#blog-preview .card .title a{color:var(--hp-text) !important;font-weight:750}
section#blog-preview .card .title a:hover{color:var(--hp-soft) !important}
section#blog-preview .card .excerpt{color:var(--hp-text-3)}
section#blog-preview .card .read{background:rgba(var(--hp-1-rgb),.08) !important;border:1px solid rgba(var(--hp-1-rgb),.3);color:var(--hp-text) !important;box-shadow:none !important;max-width:none}
section#blog-preview .card .read:hover{background:var(--hp-cta) !important;border-color:transparent;box-shadow:0 12px 28px -10px rgba(var(--hp-cta-shadow),.7) !important}
section#blog-preview .open-blog{background:rgba(255,255,255,.04);border:1px solid var(--hp-line-2);color:var(--hp-text);border-radius:14px;font-weight:700}
section#blog-preview .open-blog:hover{background:rgba(255,255,255,.08);border-color:rgba(var(--hp-3-rgb),.5)}

/* ===== SEO-ТЕКСТ ===== */
#seo .seo-content{
  max-width:880px;padding:clamp(22px,3.5vw,40px) !important;border-radius:22px;
  background:var(--hp-panel);border:1px solid var(--hp-line-1);color:var(--hp-text-3);
}
#seo h2{font-size:clamp(22px,2.6vw,30px) !important;margin-top:0 !important}
#seo h3{color:var(--hp-text) !important}
#seo strong{color:var(--hp-text-2)}
#seo ul{list-style:none !important;padding-left:0 !important;margin-left:0 !important}
#seo li{position:relative;padding-left:20px}
#seo li::before{content:"";position:absolute;left:2px;top:.65em;width:7px;height:7px;border-radius:50%;background:var(--hp-grad)}

/* ===== FAQ (как .vp-qa на /video; разметка прежняя) ===== */
.faq{padding-bottom:clamp(48px,6vw,84px) !important}
#faq-title{font-size:clamp(26px,3.2vw,38px) !important;margin-bottom:22px !important}
.faq__list{gap:10px !important}
.faq__item{background:var(--hp-panel) !important;border:1px solid var(--hp-line-1) !important;box-shadow:none !important;transition:border-color .25s,background .25s}
.faq__item:hover{border-color:rgba(var(--hp-1-rgb),.3) !important}
.faq__item[open]{border-color:rgba(var(--hp-1-rgb),.35) !important;background:rgba(30,22,40,.6) !important}
.faq__summary h3{font-size:16.5px !important;font-weight:650;color:var(--hp-text)}
.faq__icon{width:28px !important;height:28px !important;flex:0 0 28px !important;border-radius:8px !important;color:var(--hp-text-2);background:rgba(255,255,255,.05);border:1px solid var(--hp-line-2) !important;transition:background .25s,transform .3s}
.faq__icon::before,.faq__icon::after{width:12px !important;transition:transform .3s,opacity .3s}
.faq__item[open] .faq__icon{background:var(--hp-cta);border-color:transparent !important;color:#fff;transform:rotate(180deg)}
.faq__content{color:var(--hp-text-3) !important}
.faq__summary:focus-visible{outline:2px solid var(--hp-1);outline-offset:3px}

/* ===== Навбар и футер — тонко, в тон палитры ===== */
:root{--footer-border:rgba(var(--hp-1-rgb),.18);--footer-link-hover:var(--hp-soft)}

/* ===== Уменьшенная анимация ===== */
@media (prefers-reduced-motion:reduce){
  .hero .badge::before{animation:none}
}


/* ===== Кнопки навбара/футера на главной — в палитре (на остальных страницах пока прежние) ===== */
#loginBtn{background:var(--hp-cta) !important;border-color:transparent !important;box-shadow:0 10px 26px -10px rgba(var(--hp-cta-shadow),.7) !important}
#loginBtn:hover{background:var(--hp-cta) !important;filter:brightness(1.08);box-shadow:0 14px 32px -10px rgba(var(--hp-cta-shadow),.85) !important}
.scroll-to-top{background:var(--hp-cta) !important;border-color:transparent !important;box-shadow:0 10px 28px -8px rgba(var(--hp-cta-shadow),.7) !important}

/* ===== Каталог моделей (модалка) — акценты в палитре ===== */
.model-catalog__overlay{background:radial-gradient(ellipse at 50% 0%,rgba(var(--hp-1-rgb),.16),transparent 60%),rgba(6,9,18,.74) !important}
.model-catalog__panel{background:radial-gradient(ellipse 700px 400px at 50% 0%,rgba(var(--hp-1-rgb),.12),transparent),linear-gradient(160deg,rgba(17,22,38,.97),rgba(10,14,26,.98)) !important;box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(var(--hp-1-rgb),.14) inset !important}
.model-catalog__title{background:linear-gradient(135deg,#fff,var(--hp-soft)) !important;-webkit-background-clip:text !important;background-clip:text !important}
.model-catalog__search-input{border-color:var(--hp-line-2) !important}
.model-catalog__search-input:focus{border-color:rgba(var(--hp-1-rgb),.6) !important;box-shadow:0 0 0 4px rgba(var(--hp-1-rgb),.14) !important}
.model-catalog__tab:hover,.model-catalog__select-trigger:hover,.model-catalog__select-native:hover{border-color:rgba(var(--hp-1-rgb),.4) !important}
.model-catalog__tab.is-active{background:var(--hp-cta) !important;box-shadow:0 6px 18px rgba(var(--hp-cta-shadow),.4) !important}
.model-catalog__option.is-selected,.model-catalog__option:focus-visible{background:rgba(var(--hp-1-rgb),.16) !important}
.model-catalog__grid::-webkit-scrollbar-thumb{background:rgba(var(--hp-1-rgb),.4) !important}
.mc-card:hover{border-color:rgba(var(--hp-1-rgb),.55) !important;box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 24px rgba(var(--hp-1-rgb),.22) !important}
.mc-card.is-active{border-color:rgba(var(--hp-1-rgb),.75) !important;box-shadow:0 0 0 1px rgba(var(--hp-1-rgb),.6),0 18px 44px rgba(var(--hp-1-rgb),.28) !important}
.mc-card__tick{background:var(--hp-cta) !important;box-shadow:0 4px 14px rgba(var(--hp-cta-shadow),.6) !important}

/* ===== Референс: крестик ровно на правом верхнем углу превью (был в 6px от края при превью 64px —
   красный круг висел посередине верхней половины). overflow:visible, чтобы значок выходил за угол;
   скругление картинки — на самом <img>. ===== */
.reference-previews{gap:14px !important;padding:8px 8px 0 0}
.reference-thumb{width:72px !important;height:72px !important;overflow:visible !important;border-radius:14px !important;border:1px solid var(--hp-line-2) !important;background:var(--hp-bg-3) !important;box-shadow:0 10px 24px -12px rgba(0,0,0,.8)}
.reference-thumb img{border-radius:13px}
.reference-thumb__remove{
  top:-8px !important;right:-8px !important;left:auto !important;
  width:24px !important;height:24px !important;padding:0 !important;border-radius:50% !important;
  display:grid !important;place-items:center;transform:none;
  color:#fff !important;background:#1b2234 !important;
  border:2px solid var(--hp-bg) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.22),0 4px 12px rgba(0,0,0,.55) !important;
}
.reference-thumb__remove svg{width:11px;height:11px}
.reference-thumb__remove::after{content:"";position:absolute;inset:-6px;border-radius:50%} /* зона нажатия ~36px */
.reference-thumb__remove:hover,.reference-thumb__remove:focus-visible{background:#ef4444 !important;box-shadow:0 0 0 1px rgba(239,68,68,.6),0 6px 16px rgba(239,68,68,.45) !important;transform:scale(1.06) !important}
/* видео-режим: крупное превью первого кадра — крестик внутри угла */
.reference-field--video .reference-thumb{width:100% !important;max-width:260px;height:auto !important}
.reference-field--video .reference-thumb img{border-radius:15px}
.reference-field--video .reference-thumb__remove{top:8px !important;right:8px !important;width:30px !important;height:30px !important;border-color:transparent !important;background:rgba(10,14,24,.78) !important}

/* ===== Номера разделов, как на /video (декор через ::before — в текст страницы не попадают) ===== */
.home-tools .section-header::before,.ai-models-section .section-header::before{display:none}
#tools .section-header,#ai-models .section-header,#features > .container,#blog-preview > .container,#faq > .container{--hp-n:"01";--hp-l:"Инструменты"}
#ai-models .section-header{--hp-n:"02";--hp-l:"Нейросети"}
#features > .container{--hp-n:"03";--hp-l:"Возможности"}
#blog-preview > .container{--hp-n:"04";--hp-l:"Блог"}
#faq > .container{--hp-n:"05";--hp-l:"Вопросы"}
#tools .section-header::after,#ai-models .section-header::after{content:none}
#tools .section-header > :first-child::before,#ai-models .section-header > :first-child::before,
#features > .container > h2::before,#blog-preview > .container > .page-title::before,#faq-title::before{
  content:var(--hp-n) "  " var(--hp-l);display:block;width:max-content;margin:0 auto 16px;padding:5px 12px 5px 10px;border-radius:999px;
  font:600 11.5px/1.2 var(--hp-mono);letter-spacing:.14em;text-transform:uppercase;white-space:pre;
  color:var(--hp-text-2);-webkit-text-fill-color:var(--hp-text-2);
  background:linear-gradient(var(--hp-bg-3),var(--hp-bg-3)) padding-box,var(--hp-line) border-box;border:1px solid transparent;
  box-shadow:0 0 24px -8px rgba(var(--hp-1-rgb),.6);
}
/* блог и вопросы — заголовок по центру, как у остальных разделов (единый ритм страницы) */
section#blog-preview .page-title,section#blog-preview .page-sub,#faq-title{text-align:center !important}
section#blog-preview .page-sub{max-width:640px;margin-left:auto !important;margin-right:auto !important;margin-bottom:26px !important}
section#blog-preview .mt-6{text-align:center}
#faq-title{margin-bottom:26px !important}

/* ===== Плавное появление при прокрутке =====
   v3: прячется ТОЛЬКО то, что js/home-fx.js сам пометил классом .hp-rv и за чем следит (ниже первого экрана).
   Всё, что дорисовано скриптами позже (блог, «Показать ещё»), класса не имеет — видно всегда. */
.hp-rv,.features .feature-card.hp-rv,.ai-models-grid .ai-model-card.hp-rv{opacity:0;translate:0 24px;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--hp-rv-d,0ms),translate .7s cubic-bezier(.2,.7,.2,1) var(--hp-rv-d,0ms),transform .45s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .45s !important}
.hp-rv.in,.features .feature-card.hp-rv.in,.ai-models-grid .ai-model-card.hp-rv.in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.hp-rv{opacity:1;translate:none}}
@media print{.hp-rv{opacity:1 !important;translate:none !important}}
/* подсветка генератора после «Создать» / выбора модели — в js/home-fx.js (Web Animations, без классов на .generator-container) */

/* ===== 007 · Мини-блок у «Сгенерировать» (#genCounter, рисует js/integrations/runware.js → renderGenMeter) =====
   Гость: точки-лимит + «Осталось генераций: X из 3». Вошедший: [монета] баланс │ цена генерации;
   не хватает — янтарный + «Пополнить», 0 — красный. Клик у вошедшего → тарифы.
   Элемент и текст в index.html прежние; стили по #genCounter — до работы JS вид тот же. */
#genCounter.counter-badge{
  display:inline-flex !important;align-items:center;justify-content:center;gap:10px;flex-wrap:nowrap;
  min-height:56px;padding:0 18px !important;border-radius:16px !important;
  border:1px solid transparent !important;
  background:linear-gradient(var(--hp-bg-3),var(--hp-bg-3)) padding-box,
    linear-gradient(135deg,rgba(var(--hp-3-rgb),.5),rgba(148,163,184,.16) 45%,rgba(var(--hp-2-rgb),.45)) border-box !important;
  box-shadow:0 12px 30px -18px rgba(var(--hp-1-rgb),.65) !important;
  font-size:13.5px;line-height:1.2;color:var(--hp-text-3);white-space:nowrap;user-select:none;
  transition:transform .2s,box-shadow .2s,filter .2s;
}
#genCounter .counter-badge-text{font-size:13.5px;font-weight:500}
#genCounter .counter-badge-text strong{margin-left:3px;font-weight:800}
.gen-meter__dots{display:inline-flex;gap:4px;flex:none}
.gen-meter__dots i{width:8px;height:8px;border-radius:50%;background:rgba(148,163,184,.22)}
.gen-meter__dots i.is-on{background:var(--hp-grad);box-shadow:0 0 8px rgba(var(--hp-1-rgb),.7)}
#genCounter.is-guest.is-empty .counter-badge-text strong{color:#fca5a5 !important}

#genCounter.is-user{cursor:pointer}
#genCounter.is-user:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 16px 34px -16px rgba(var(--hp-1-rgb),.8) !important}
#genCounter.is-user:focus-visible{outline:2px solid #fecdd3;outline-offset:2px}
.gen-meter__bal{display:inline-flex;align-items:center;gap:6px;color:var(--hp-text-3);font-weight:600}
.gen-meter__bal b{font-size:15.5px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.gen-meter__ic{width:17px;height:17px;flex:none;color:var(--hp-2);filter:drop-shadow(0 0 6px rgba(var(--hp-2-rgb),.5))}
.gen-meter__sep{width:1px;height:22px;flex:none;background:linear-gradient(180deg,transparent,var(--hp-line-2),transparent)}
.gen-meter__cost{color:var(--hp-text-3);font-weight:500}
.gen-meter__cost b{color:var(--hp-soft-2);font-weight:800;font-variant-numeric:tabular-nums}
.gen-meter__top{display:inline-flex;align-items:center;gap:4px;flex:none;height:26px;padding:0 10px;border-radius:999px;
  font-size:12.5px;font-weight:700;color:#fff;background:var(--hp-cta);box-shadow:0 6px 16px -6px rgba(var(--hp-cta-shadow),.9)}
.gen-meter__top svg{width:13px;height:13px}
#genCounter.is-low{background:linear-gradient(var(--hp-bg-3),var(--hp-bg-3)) padding-box,linear-gradient(135deg,rgba(245,158,11,.75),rgba(245,158,11,.25)) border-box !important}
#genCounter.is-low .gen-meter__bal b{color:#fbbf24}
#genCounter.is-empty.is-user{background:linear-gradient(var(--hp-bg-3),var(--hp-bg-3)) padding-box,linear-gradient(135deg,rgba(239,68,68,.75),rgba(239,68,68,.25)) border-box !important}
#genCounter.is-empty .gen-meter__bal b,#genCounter.is-empty .gen-meter__ic{color:#f87171}

@media (max-width:1023px){
  #genCounter.counter-badge{display:flex !important;width:100%;min-height:48px}
}
@media (max-width:560px){
  #genCounter.counter-badge{min-height:46px;padding:0 14px !important;gap:9px;border-radius:14px !important}
}
@media (max-width:400px){
  #genCounter.counter-badge{gap:7px;padding:0 10px !important;font-size:12.5px}
  #genCounter .counter-badge-text{font-size:12.5px}
  .gen-meter__bal b{font-size:14.5px}
  .gen-meter__top{padding:0 8px;font-size:12px}
}


/* ===== 007 · Каталог-знакомство перед первой генерацией (.mc-intro — js/model-selector.js) ===== */
.mc-intro{display:flex;align-items:center;gap:12px;margin:0 22px 12px;padding:12px 12px 12px 14px;border-radius:16px;
  border:1px solid transparent;
  background:linear-gradient(135deg,rgba(40,20,38,.96),rgba(18,20,36,.96)) padding-box,var(--hp-line) border-box;
  box-shadow:0 14px 34px -20px rgba(var(--hp-1-rgb),.9);animation:mcIntroIn .35s cubic-bezier(.2,.8,.2,1)}
.mc-intro[hidden]{display:none}
@keyframes mcIntroIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mc-intro__ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;color:#fff;background:var(--hp-cta);
  box-shadow:0 6px 16px -6px rgba(var(--hp-cta-shadow),.9)}
.mc-intro__ic svg{width:18px;height:18px}
.mc-intro__txt{flex:1;min-width:0;font-size:13.5px;line-height:1.4;color:var(--hp-text-2)}
.mc-intro__txt b{color:#fff;font-weight:700}
.mc-intro__txt em{font-style:normal;font-weight:700;color:var(--hp-soft)}
.mc-intro__go{position:relative;display:inline-flex;align-items:center;gap:7px;flex:none;height:40px;padding:0 16px;border:0;border-radius:12px;
  cursor:pointer;overflow:hidden;font-family:inherit;font-size:13.5px;font-weight:700;line-height:1;color:#fff;white-space:nowrap;background:var(--hp-cta);
  box-shadow:0 10px 24px -10px rgba(var(--hp-cta-shadow),.95),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .2s,filter .2s}
.mc-intro__go::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);animation:mcShine 4s ease-in-out infinite .8s}
@keyframes mcShine{0%,100%{left:-120%}30%,60%{left:140%}}
.mc-intro__go:hover{transform:translateY(-1px);filter:brightness(1.08)}
.mc-intro__go:focus-visible{outline:2px solid #fecdd3;outline-offset:2px}
.mc-intro__go svg{width:15px;height:15px;transition:transform .2s}
.mc-intro__go:hover svg{transform:translateX(3px)}
@media (max-width:560px){
  .mc-intro{flex-wrap:wrap;gap:10px;margin:0 var(--mc-pad,16px) 10px;padding:11px 12px}
  .mc-intro__ic{width:30px;height:30px;border-radius:10px}
  .mc-intro__txt{font-size:12.5px;flex-basis:calc(100% - 44px)}
  .mc-intro__go{width:100%;justify-content:center;height:42px}
}

/* ===== 007 · «Сменить» видна и на телефоне =====
   ≤560: плашка «Бесплатно» уходит под название (иначе на 360 px названию оставалось ~50 px),
   справа — пилюля «Сменить ⌄». Пока каталог ни разу не открывали (html.mc-unseen) — мягкая пульсация. */
@media (max-width:560px){
  .model-trigger{display:grid !important;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px !important;row-gap:5px;align-items:center}
  .model-trigger__media{grid-row:1 / span 2;grid-column:1}
  .model-trigger__info{grid-row:1;grid-column:2;align-self:end}
  .model-trigger__actions{display:contents !important}
  .model-trigger__badge{grid-row:2;grid-column:2;justify-self:start;align-self:start}
  .model-trigger__cta{grid-row:1 / span 2;grid-column:3;gap:5px !important;padding:8px 10px 8px 12px !important}
  .model-trigger__cta-text{display:inline !important;font-size:12px}
  .model-trigger__cta .model-trigger__chevron{width:14px;height:14px}
}
@media (max-width:400px){
  .model-trigger{column-gap:10px !important}
  .model-trigger__cta{padding:7px 8px 7px 10px !important}
  .model-trigger__cta-text{font-size:11.5px}
}
html.mc-unseen .model-trigger__cta{animation:mcPulse 2.4s ease-in-out infinite 1.5s}
@keyframes mcPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--hp-1-rgb),0)}50%{box-shadow:0 0 0 5px rgba(var(--hp-1-rgb),.22)}}
@media (prefers-reduced-motion:reduce){
  html.mc-unseen .model-trigger__cta,.mc-intro__go::before,.mc-intro{animation:none}
}