/* cinema-overlays.css — Hollywood overlay glass. Council3-verified (6 AI panels + 2-layer Claude critic, 2026-06-18).
   KEEPS the video hero / face / logo untouched. Dark glass over the video (white reads cheap over warm skin);
   backdrop-filter ONLY on small FIXED chrome (never animated, never on full-width scroll blocks → mid-Android jank). */

/* 1 — HERO CHROME (top nav buttons + balance) → blend into the video, visible but not loud */
.vhx-topup,.vhx-acct{
  background:rgba(12,10,8,0.55)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.15); backdrop-filter:blur(12px) saturate(1.15);
  border:1px solid rgba(255,255,255,0.10)!important; border-radius:100px!important;
  transform:translateZ(0); font-variant-numeric:tabular-nums slashed-zero; }
@supports not ((backdrop-filter:blur(0)) or (-webkit-backdrop-filter:blur(0))){
  .vhx-topup,.vhx-acct{ background:rgba(12,10,8,0.82)!important } }

/* 2 — CTAs → warm-dark GLASS matching the site (owner 2026-06-18: the loud orange "выглядит дёшево, не вызывает
   доверия, не сочетается со стилем"). Council+2-layer-critic verdict: REMOVE the color, KEEP the craft —
   restraint reads expensive. The money button keeps ONE subtle ember tell (rim + faint tint), no loud fill. */
.vhx-btn,.cta,.sc-btn{
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.10); border-radius:100px;
  transition:transform .12s linear, box-shadow .18s linear, background .18s linear; }
.vhx-btn.ghost{ background:rgba(12,10,8,0.5); color:#f4f1ed!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10); }
/* !important + .vhx prefix to beat index.html line 635 `.vhx .vhx-btn.pri{...135deg orange...}` (specificity 0,3,0) */
.vhx .vhx-btn.pri,.vhx-btn.pri,.cta,.sc-btn{ /* money button = ember-tinted glass: premium + findable, never a loud orange slab */
  background:linear-gradient(180deg, rgba(255,120,60,.20), rgba(255,90,40,.12)), rgba(12,10,8,0.55)!important;
  border-color:rgba(255,140,60,0.35)!important; color:#ffd9c2!important;
  box-shadow:0 0 0 1px rgba(255,140,60,0.20), 0 8px 24px -12px rgba(255,90,40,.45), inset 0 1px 0 rgba(255,255,255,0.12)!important; }
.vhx .vhx-btn.pri:hover{ transform:none; } /* kill the index.html translateY hover (we use :active) */
.vhx-btn:active,.cta:active,.sc-btn:active{ transform:scale(.985); } /* the only motion — tactile = premium */
/* sticky bottom "create video" CTA → same ember-glass so the page reads as ONE style (owner: «всё единое») */
#stickyCreate{ background:linear-gradient(180deg, rgba(255,120,60,.22), rgba(255,90,40,.13)), rgba(12,10,8,0.62)!important;
  color:#ffe3d2!important; border:1px solid rgba(255,140,60,0.38)!important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 0 0 1px rgba(255,140,60,0.18), 0 10px 28px -12px rgba(0,0,0,.6)!important; }
@supports not ((backdrop-filter:blur(0)) or (-webkit-backdrop-filter:blur(0))){
  .vhx-btn.ghost{ background:rgba(12,10,8,0.82) } .vhx-btn.pri,.cta,.sc-btn{ background:rgba(44,22,14,0.92) } }

/* 3 — BELOW-HERO cards → frosted-glass panels: a soft gradient sheen + a 1px top highlight reads like matte
   glass over the dark canvas. NO backdrop-filter on mobile (mid-Android jank); desktop gets a light blur for
   true frost. */
.cmp-row,.feat-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.022))!important;
  border:1px solid rgba(255,255,255,0.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06); }
@media(min-width:881px){
  .cmp-row,.feat-card{ -webkit-backdrop-filter:blur(7px) saturate(1.05); backdrop-filter:blur(7px) saturate(1.05); } }
#pricing a[href]{ box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06); }
.seo-faq details,.seo-faq .qa{ border-color:rgba(255,255,255,0.07); }

/* 6 — POSTPRODUCTION GRAIN (desktop only; static opacity, NO blend over video → GPU-safe). A faint film grain
   unifies the page like graded footage — the "postproduction" signature. Mobile OFF (battery/scroll-jank). */
@media(min-width:881px){
  body::after{ content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.045; mix-blend-mode:normal;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:140px 140px; } }

/* 5 — BRIGHT VIDEO (owner 2026-06-18: «убрать затенение — ухудшает видео»). NO full scrim over the face.
   The H1 stays readable via a 2-layer text-shadow + a LOCAL gradient ONLY behind the letters (isolation:isolate so
   it sits behind the text, NOT behind the whole video — critic-B's vanish/z-index fix). Lighter film-title weight. */
.vhx-h1{ font-weight:600!important; letter-spacing:-.03em; position:relative; isolation:isolate; color:#fffbf5;
  text-shadow:0 1px 3px rgba(0,0,0,.62), 0 2px 14px rgba(0,0,0,.4)!important; }
.vhx-h1::before{ content:""; position:absolute; inset:-6px -14px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,7,6,.42), rgba(8,7,6,0)); border-radius:14px; }
.vhx-hero{ position:relative; }
@media(min-width:881px){ .vhx-h1{ max-width:13ch } }

/* LAYOUT (mobile): kill the empty scroll band + lift the CTAs OFF the face. Pin the H1 at the TOP, push
   lead+CTA+proof to the BOTTOM via margin-top:auto. 100svh (NOT dvh) = stable, no URL-bar reflow gap. */
@media(max-width:880px){
  /* The cinema `.vhx` is display:block, so the hero's `flex:1` (index L628) was IGNORED — that's why the hero
     either overflowed (when I forced 100svh) or collapsed. Make the cinema a flex COLUMN: nav (auto) + hero
     (flex:1) exactly fill one 100svh viewport → no dead band, no overflow. Then split the hero: H1 at the TOP,
     lead+CTA pushed to the BOTTOM (off the face), clearing the fixed CTA bar (#stickyCta ~64px). */
  .vhx{ display:flex!important; flex-direction:column!important; min-height:100svh; }
  .vhx .vhx-hero{ flex:1 1 auto!important; justify-content:flex-start!important; padding-bottom:80px!important; }
  .vhx-lead{ margin-top:auto!important; } }

/* owner: delete the "Сделано в VideoOS" badge under the logo (degrades the clean video look) */
.vhx-badge{ display:none!important; }

/* DE-DUPE the nav account link: .vhx-acct + .vhx-signin both render "My account/Кабинет/Mi cuenta" → /app.
   Hide the secondary .vhx-acct for EVERYONE (the prominent .vhx-signin stays) — fixes the guest 2× "My account"
   the balance.js de-dup couldn't reach (it only runs logged-in). Critic-confirmed P1. */
.vhx-acct{ display:none!important; }
/* tap-target ≥44px (critic a11y): the kept nav account button was 40px */
.vhx-signin{ min-height:44px; display:inline-flex; align-items:center; }

/* DE-DUP the 2nd nav (owner: "найди все дубли, единое целое"). The embedded creator's header
   (.wrap > .top: "VideoOS · ← Главная · ES EN RU · Кабинет · Пополнить · Scout · Мои видео") renders
   redundantly under the hero on the HOMEPAGE — the hero nav already covers it (VideoOS/langs/Кабинет/top-up).
   Hidden here (cinema-overlays = homepage-only); the creator #gen is unaffected (CDP-verified). "← Главная" is
   pointless on the homepage. → one nav. Other "dups" (Применить×2, Auto×3) are legit (distinct actions/settings). */
.wrap > .top{ display:none!important; }

/* BOTTOM SECTIONS under the TOP's style (owner #2 «сделай низ таким же стилем как верх»): the FAQ + pricing were
   flat #0b0b0f text → give them the same warm-dark FROSTED GLASS + ember accents as the hero cards, so the whole
   page reads as ONE piece. FAQ <p> items become glass cards; questions go ember+Golos; pricing cards glass. */
#seoFaq p{ background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018));
  border:1px solid rgba(255,255,255,0.07); border-left:2px solid rgba(255,140,60,0.38); border-radius:13px;
  padding:13px 16px; margin:0 0 10px!important; }
#seoFaq p b{ color:#ffd9c2!important; font-family:'Golos Text','Manrope','Sora',sans-serif; }
#pricing a[href]{ background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02))!important;
  border-color:rgba(255,140,60,0.22)!important; }
.vshell-foot{ border-top:1px solid rgba(255,140,60,0.16); }
.vshell-foot a:hover{ color:#ffb27a!important; }

/* HERO BUTTONS — owner-confirmed (2026-06-18): 3 primary glass (Создать бесплатно / Сделать самому / Заказать
   видео) + 2 small icon-buttons (Редактор / Идеи из ссылки). Council layout: wide FREE primary, then a DIY+ORDER
   row, then the 2 small icons. Warm-dark glass, bottom third, off the face. */
.vhx-cta{ display:flex!important; flex-direction:column; gap:10px!important; align-items:stretch!important; flex-wrap:nowrap!important; }
.vhx-bwide{ width:100%; justify-content:center; }
.vhx-crow{ display:flex; gap:10px; }
.vhx-crow .vhx-btn{ flex:1 1 0; justify-content:center; min-width:0; text-align:center; }
.vhx-cmini{ display:flex; gap:10px; }
.vhx-ico{ display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:1 1 0;
  padding:9px 10px; min-height:44px; border-radius:100px; text-decoration:none; font-size:12.5px; font-weight:600;
  color:#e6dfd7; background:rgba(12,10,8,.42); border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:transform .12s linear, background .18s linear; }
.vhx-ico svg{ width:15px; height:15px; opacity:.85; flex:0 0 auto; }
.vhx-ico:active{ transform:scale(.985); }
@media(min-width:881px){ .vhx-cta{ max-width:520px } .vhx-bwide{ width:auto } .vhx-crow,.vhx-cmini{ flex-wrap:wrap } }

/* PREMIUM HEADING FONT (owner-confirmed: display font for headings + Manrope body). Golos Text = Paratype,
   FULL Cyrillic + tabular numerals → safe for RU + prices (Instrument Sans/Space Grotesk break Cyrillic).
   Body/UI/prices stay Manrope. Verify Cyrillic renders (not fallback) on the live page. */
.vhx-h1, .vhx-eye, .cmp h2, .feat-head, #pricing h2, .seo-faq h2, .studio h2{
  font-family:'Golos Text','Manrope','Sora',sans-serif!important; letter-spacing:-.02em; }
.vhx-h1{ font-weight:700!important; }

/* 4 — SUPPORT FAB → glass chrome, blended (was a loud solid bubble) */
#voChatBtn{
  background:rgba(12,10,8,0.6)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid rgba(255,255,255,0.12)!important;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.6), inset 0 0 0 1px oklch(62% 0.18 25 / .25)!important; }