:root{
  --ink:#111;             /* текст */
  --paper:#fff;           /* фон */
  --line:#e9e7e4;         /* линии */
  --gold:#b68a46;         /* акцент-линия */
  --container:1180px;     /* ширина контейнера */
  --header-h:120px;       /* высота шапки */

  /* hero-параметры */
  --hero-dark:.55;
  --hero-blur:6px;
  --hero-overlay:.35;
}

/* базовое */
*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--paper); color:var(--ink);
  /*font-family:Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;*/
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a{ color:inherit; text-decoration:none }
.container{ max-width:var(--container); margin-inline:auto; padding:0 22px }

 /* ===== HEADER ===== */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header__row{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; height:var(--header-h); gap:32px;
}
.brand{ display:flex; align-items:center }
.brand img{ height:70px; width:auto; display:block }

.nav{ justify-self:center }
.menu{ display:flex; gap:28px; list-style:none; margin:0; padding:0 }
.menu a{
  position:relative;
  text-transform:uppercase; letter-spacing:.14em;
  font-weight:800; font-size:.78rem;
  padding:10px 0; opacity:.92; transition:opacity .2s;
  font-family:"Playfair Display", Georgia, "Times New Roman", serif;
}
.menu a:hover{ opacity:1 }
.menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:-10px; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:center; transition:.24s;
}
.menu a:hover::after{ transform:scaleX(1) }

/* mobile nav */
.burger{ display:none }
.drawer{ display:none }
.drawer__backdrop{ display:none }

@media (max-width:980px){
  .nav{ display:none }
  .burger{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:12px;
    border:1px solid var(--line); background:#fff; cursor:pointer; position:relative;
  }
  .burger span{
    position:absolute; left:12px; right:12px; height:2px; background:#111; transition:.2s;
  }
  .burger span:nth-child(1){ top:13px }
  .burger span:nth-child(2){ top:21px }
  .burger span:nth-child(3){ top:29px }
  .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

  .drawer__backdrop{
    position:fixed; inset:0; background:rgba(10,10,10,.42);
    backdrop-filter:blur(2px); z-index:10000; opacity:0; transition:.2s; pointer-events:none; display:block;
  }
  .drawer__backdrop.show{ opacity:1; pointer-events:auto }

  .drawer{
    position:fixed; inset:0 0 0 auto; width:min(82vw,340px);
    background:#fff; border-left:1px solid var(--line);
    transform:translateX(100%); transition:transform .25s ease-out;
    z-index:10010; padding:18px 16px 28px; display:block; box-shadow:-24px 0 48px rgba(0,0,0,.12);
  }
  .drawer.open{ transform:translateX(0) }
  .drawer__close{
    position:absolute; top:10px; right:10px; width:40px; height:40px;
    border-radius:12px; border:1px solid var(--line); background:#fff; font-size:18px; font-weight:800;
  }
  .drawer__list{ list-style:none; margin:50px 0 0; padding:0; display:grid; gap:6px }
  .drawer__list a{ display:block; padding:12px; border-radius:12px; font-weight:800 }
  .drawer__list a:active{ background:#f4f4f4 }
  body.menu-open{ overflow:hidden }
}

/* ===== HERO ===== */
.hero{ position:relative; min-height:76vh; overflow:hidden; border-bottom:1px solid var(--line) }
.hero__wrap{ position:relative; padding: 92px 0 70px }
.hero__bg{ position:absolute; inset:0; overflow:hidden }
.hero__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: brightness(var(--hero-dark)) blur(var(--hero-blur));
}
.hero__bg::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,var(--hero-overlay)) }

.hero__content{
  --hero-left:6%;
  --hero-top:100%;
  --title-size:clamp(44px,7.8vw,85px);
  --lead-size:clamp(5px,1.7vw,12px);

  position:absolute; left:var(--hero-left); top:var(--hero-top);
  max-width:min(780px,86vw); color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.5);
}
.eyebrow{
  font-family:"Playfair Display", Georgia, serif; text-transform:uppercase;
  letter-spacing:.28em; font-weight:700; font-size:12.5px; opacity:.95; display:inline-block; position:relative;
}
.eyebrow::before,.eyebrow::after{
  content:""; display:inline-block; vertical-align:middle; width:42px; height:1px; background:rgba(255,255,255,.6); margin:0 10px;
}
.title{ font-family:"Playfair Display", Georgia, serif; font-weight:800; font-size:var(--title-size); line-height:1.04; margin:.1em 0 .1em; color:#fff }
.title--tight{ letter-spacing:-.01em }
.title--narrow{ max-width:12ch }
.lead{ font-size:var(--lead-size); color:#f2f2f2; opacity:.96 }

@media (max-width:700px){ .hero__content{ --hero-left:6%; --hero-top:12% } }

/* ===== Marquee ===== */
.cat-marquee{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fafafa; white-space:nowrap }
.cat-marquee__inner{
  display:inline-block; padding:14px 0; font-family:"Playfair Display", serif; font-size:14px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; animation:marquee 28s linear infinite;
}
.cat-marquee__inner b{ font-weight:800 }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ===== CATALOG ===== */
.catalog{ padding:60px 0 56px; background:#fff }
.catalog__title{
  font-family:"Playfair Display", Georgia, serif; font-size:clamp(22px,3.2vw,36px); letter-spacing:.02em; margin:0 0 18px; color:#111;
}

/* фильтры */
.filters{ border:1px solid var(--line); border-radius:14px; padding:10px 12px; margin:6px 0 18px; background:#fafafa }
.filters[aria-disabled="true"]{ opacity:.65 }
.filters__row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.filters__label{ font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-family:"Playfair Display", serif; font-size:12px; color:#333 }
.filters__chips{ display:flex; gap:8px; flex-wrap:wrap }
.filter-chip{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px; border-radius:999px; border:1px solid #e6e3df; background:#fff; cursor:pointer;
  font-weight:700; letter-spacing:.04em; font-size:13px; transition:.18s border-color,.18s background,.18s color;
}
.filter-chip[data-active="true"]{ background:#111; color:#fff; border-color:#111 }
.filter-chip[disabled]{ cursor:not-allowed; opacity:.6 }
.filters__note{ margin-left:auto; font-size:12px; color:#777 }

/* grid */
.card-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px }
.card{ grid-column:span 4 }
@media (max-width:1024px){ .card{ grid-column:span 6 } }
@media (max-width:620px){ .card{ grid-column:span 12 } }

/* карточка */
.card__wrap{
  background:#fff; border:1px solid #e9e7e4; border-radius:16px; overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor:pointer;
}
.card__wrap:hover{ box-shadow:0 26px 60px rgba(0,0,0,.14); border-color:#e1ded9; transform:translateY(-6px) }
.card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#f6f5f3 }
.card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease }
.card__wrap:hover .card__media img{ transform:scale(1.05) }
.card__body{ padding:14px 14px 16px }
.card__title{ font-family:"Playfair Display", Georgia, serif; font-weight:800; font-size:18px; color:#111 }
.card__meta{ color:#777; font-size:13px; margin-top:6px }

/* ===== MODAL (Preview, Steam-like) ===== */
:where([hidden]){ display:none !important; }
.modal{ position:fixed; inset:0; z-index:10000; display:none; }
.modal.open{ display:block; }
.modal__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.58); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .2s ease;
}
.modal.open .modal__backdrop{ opacity:1 }
.modal__dialog{
  position:absolute; inset:20px; margin:auto; max-width: min(1200px, 96vw); max-height: 92vh;
  background:#fff; border:1px solid #e9e7e4; border-radius:16px; overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.25); display:grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}
@media (max-width: 900px){ .modal__dialog{ grid-template-columns:1fr; } }
.modal__close{
  position:absolute; top:10px; right:10px; z-index:3;
  width:42px; height:42px; border-radius:12px; border:1px solid #e6e3df; background:#fff;
  font-weight:800; font-size:18px; cursor:pointer;
}

/* left side */
.pv-media{ display:grid; grid-template-rows: 1fr auto; min-width:0; min-height:0; padding:12px; border-right:1px solid #f0eeeb }
@media (max-width:900px){ .pv-media{ border-right:0; border-bottom:1px solid #f0eeeb } }

.pv-viewport{ position:relative; background:#0b0b0b; border-radius:14px; overflow:hidden; min-height:clamp(260px, 56vh, 760px) }
.pv-slider{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center }
.pv-slide{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s ease; pointer-events:none }
.pv-slide.is-active{ opacity:1; pointer-events:auto }
.pv-slide img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block }

.pv-slide .pv-ytbox{ position:absolute; inset:0; background:#000; display:flex; align-items:center; justify-content:center }
.pv-slide .pv-ytbox iframe{ width:100%; height:100%; border:0 }

.pv-prev,.pv-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:10px; border:1px solid #e6e3df; background:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:5; opacity:.92;
}
.pv-prev{ left:8px } .pv-next{ right:8px }

.pv-thumbs{ list-style:none; margin:10px 0 0; padding:0; display:flex; gap:10px; overflow-x:auto }
.pv-thumbs li{ flex:0 0 auto }
.pv-thumb{
  position:relative; width:64px; height:64px; padding:0; border-radius:12px; overflow:hidden;
  border:2px solid transparent; background:#fff; cursor:pointer;
}
.pv-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.pv-thumb.is-active{ border-color:#111 }
.pv-thumb--video::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:0; height:0; border-left:14px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));
}

/* right side */
.pv-info{ padding:16px 16px 18px; overflow:auto; min-height:0 }
.pv-title{
  font-family:"Playfair Display", Georgia, serif; font-weight:800;
  font-size: clamp(20px, 3vw, 32px); margin:6px 0 2px;
}
.pv-tags{ color:#666; font-size:13px; margin-bottom:10px }
.pv-licenses{ border:1px solid #eee; border-radius:12px; padding:10px; background:#fafafa }
.pv-legend{
  font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  font-family:"Playfair Display", serif; font-size:12px; margin-bottom:6px; color:#333;
}
.lic-row{
  display:flex; gap:10px; align-items:flex-start; padding:10px; border-radius:10px;
  border:1px solid #e6e3df; background:#fff; margin:8px 0;
}
.lic-row:hover{ border-color:#ddd }
.lic-row input{ margin-top:3px }
.lic-body{ flex:1 }
.lic-name{ font-weight:800; font-size:14px; margin-bottom:4px }
.lic-note{ color:#666; font-size:13px; line-height:1.45 }

.pv-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px }
.btn{
  display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 16px;
  border-radius:12px; border:1px solid #e6e3df; background:#fff; cursor:pointer;
  font-weight:800; letter-spacing:.06em; font-size:13px; text-decoration:none; color:#111;
}
.btn--dark{ background:#111; color:#fff; border-color:#111 }
.btn--ghost:hover{ background:#f6f6f6 }

/* MOBILE header layout: brand | burger */
@media (max-width: 980px){
  .header__row{
    display: grid;
    grid-template-columns: 1fr auto; /* 2 колонки: логотип слева, бургер справа */
    align-items: center;
    gap: 16px;
  }

  /* меню прячем полностью */
  .nav{ display: none; }

  /* бургер отправляем в правый край */
  .burger{
    justify-self: end;        /* прижать к правому краю */
    grid-column: 2;           /* явно во вторую колонку */
    margin-left: auto;        /* на всякий случай */
  }

  /* увеличим «клик-зону», чтобы было удобней */
  .burger{
    width: 48px; height: 48px;
  }
  .burger span{ left: 12px; right: 12px; }
}
/* ===== Footer (light, под твои переменные) ===== */
.zf-footer{
  /* локальные токены футера */
  --bg:      var(--paper);
  --card:    #fff;
  --ink1:    var(--ink);
  --ink2:    #666;           /* вторичный текст */
  --border:  var(--line);
  --accent:  var(--gold);
  --radius:  16px;

  background:var(--bg);
  color:var(--ink1);
  border-top:1px solid var(--border);
}
.zf-wrap{ max-width:var(--container); margin:0 auto; padding:56px 22px }
.zf-h2{ font-family:"Playfair Display", Georgia, serif; font-weight:800;
        font-size:clamp(20px,2.4vw,28px); letter-spacing:.02em; margin:0 0 14px }
.zf-h3{ font-weight:800; font-size:clamp(14px,1.6vw,16px); color:var(--ink2); margin:18px 0 6px }
.zf-about p{ margin:0 0 10px; color:var(--ink2) }

.zf-licenses{ margin-top:40px }
.zf-grid{ display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:960px){ .zf-grid{ grid-template-columns:1fr } }

.zf-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 16px;
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.zf-card:hover{ box-shadow:0 26px 60px rgba(0,0,0,.08); border-color:#e1ded9; transform:translateY(-4px) }
.zf-card-title{ font-family:"Playfair Display", Georgia, serif; font-weight:800; margin:2px 0 10px; font-size:18px }

.zf-list{ list-style:none; margin:0; padding:0 }
.zf-list li{ position:relative; padding-left:18px; margin:9px 0; color:var(--ink2) }
.zf-list li::before{
  content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%;
  background:var(--accent);
}

.zf-legal{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px }
.zf-chip{
  display:inline-block; padding:8px 12px; border-radius:999px;
  border:1px solid var(--border); color:var(--ink1);
  text-decoration:none; font-weight:800; letter-spacing:.06em; font-size:13px;
}
.zf-chip:hover{ background:#f6f6f6 }

.zf-contact{ margin-top:42px }
.zf-link{
  color:var(--accent); border-bottom:1px dashed color-mix(in oklab, var(--accent) 55%, transparent);
  text-decoration:none;
}
.zf-link:hover{ border-bottom-color:transparent }

.zf-socials{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px }
.zf-social{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border); border-radius:12px; color:var(--ink1); text-decoration:none }
.zf-social:hover{ background:#f8f8f8 }
.zf-social svg{ width:18px; height:18px; fill:currentColor }

.zf-copy{ margin-top:28px; border-top:1px solid var(--border); padding-top:16px; color:#777 }

/* Опция: тёмный вариант */
.zf-footer.theme-dark{
  --bg:#0c0c0d; --card:#121214; --ink1:#eee; --ink2:#cfcac0;
  --border: rgba(255,255,255,.08);
}



/* =============================
   INNER PAGES — GLOBAL
   ============================= */
.page-section{ padding:56px 0 }
.small-muted{ color:#777; font-size:13px }

/* ----- Page Hero (общий для всех inner страниц) ----- */
.hero--page{
  position:relative; min-height:56vh; display:grid; align-items:center;
  padding:clamp(70px,9vw,110px) 0 42px; color:#fff; isolation:isolate;
}
.hero--page .hero__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden }
.hero--page .hero__bg video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.45) }
.hero--page .hero__overlay{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.58));
}
.hero--page .title{
  font-family:"Playfair Display", Georgia, serif; font-weight:800;
  line-height:1.05; letter-spacing:.01em; font-size:clamp(36px,6vw,72px); margin:0 0 .2em;
}
.hero--page .lead{ max-width:900px; color:rgba(255,255,255,.85); font-size:clamp(14px,1.8vw,18px) }

/* =============================
   LICENSING PAGE
   ============================= */
.lic-intro{ color:#555; max-width:900px; margin:12px 0 20px }

.plan-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:18px 0 6px }
@media (max-width:980px){ .plan-grid{ grid-template-columns:1fr } }

.plan-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 16px;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.plan-card:hover{ box-shadow:0 26px 60px rgba(0,0,0,.08); border-color:#e1ded9; transform:translateY(-4px) }
.plan-name{ font-family:"Playfair Display", Georgia, serif; font-weight:800; font-size:20px; margin:2px 0 6px }
.plan-note{ color:#666; font-size:13px; margin-bottom:10px }
.plan-price{ font-weight:800; letter-spacing:.02em; margin:6px 0 12px }
.plan-cta{ display:flex; gap:10px; flex-wrap:wrap }

.plan-perks{ list-style:none; padding:0; margin:12px 0 0 }
.plan-perks li{ position:relative; padding-left:18px; margin:8px 0; color:#555 }
.plan-perks li::before{
  content:""; position:absolute; left:0; top:.58em; width:6px; height:6px; border-radius:50%;
  background:var(--gold);
}

/* таблица сравнения */
.table-compare{
  width:100%; border-collapse:collapse; border:1px solid var(--line);
  border-radius:14px; overflow:hidden; margin-top:16px; background:#fff;
}
.table-compare th,.table-compare td{ padding:12px 14px; border-top:1px solid var(--line); text-align:left }
.table-compare thead th{ background:#fafafa; font-weight:800; }
.table-compare tbody tr:hover{ background:#fbfbfb }

/* =============================
   VERIFY PAGE
   ============================= */
.ver-wrap{ padding:42px 0 64px }
.ver-form{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 18px;
}
.ver-input{
  flex:1 1 320px; height:44px; padding:0 14px; border:1px solid var(--line);
  border-radius:12px; background:#fff; font:inherit;
}
.ver-btn{ height:44px; padding:0 16px; border-radius:12px; border:1px solid var(--line); background:#fff; font-weight:800; cursor:pointer }
.ver-btn--dark{ background:#111; color:#fff; border-color:#111 }

.badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  font-weight:800; font-size:13px; border:1px solid var(--line); background:#fff;
}
.badge.is-ok{ color:#106b2d; border-color:#cfead7; background:#e9f6ee }
.badge.is-bad{ color:#8d1b1b; border-color:#f1c7c7; background:#fbecec }

.ver-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:16px }
@media (max-width:900px){ .ver-grid{ grid-template-columns:1fr } }

.ver-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px;
}
.ver-row{ display:grid; grid-template-columns:180px 1fr; gap:10px; padding:10px; border-radius:10px; /*border:1px solid var(--line)*/; background:#fff; margin:8px 0 }
.ver-row b{ font-weight:800 }
.ver-prev{ background:#0b0b0b; border-radius:14px; min-height:240px; display:flex; align-items:center; justify-content:center; overflow:hidden }
.ver-prev img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block }

/* =============================
   CERTIFICATE PAGE
   ============================= */
.cert-wrap{ padding:42px 0 64px }
.cert-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:16px }
@media (max-width:900px){ .cert-grid{ grid-template-columns:1fr } }

.cert-preview{
  background:#0b0b0b; border-radius:16px; min-height:300px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border:1px solid #eae7e2;
}
.cert-preview img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block }

.cert-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px }
.cert-list{ margin:10px 0 0; padding:0; list-style:none }
.cert-list li{ display:grid; grid-template-columns:160px 1fr; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; margin:8px 0; background:#fff }
.cert-list b{ font-weight:800 }

/* печать сертификата — чистая версия */
@media print{
  .header, .hero--page, .footer, .cat-marquee{ display:none !important }
  .cert-wrap{ padding:0 }
  .cert-grid{ grid-template-columns:1fr }
  body{ background:#fff }
}

/* =============================
   FOOTER (inner pages, простой)
   ============================= */
.footer{ border-top:1px solid var(--line); background:#fff }
.footer .footer__wrap{ max-width:var(--container); margin:0 auto; padding:24px 22px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between }
.footer__copy{ color:#777 }
.footer__nav{ display:flex; gap:12px; flex-wrap:wrap }
.footer__nav a{ padding:8px 12px; border-radius:999px; border:1px solid var(--line); font-weight:800; letter-spacing:.06em; font-size:13px }
.footer__nav a:hover{ background:#f6f6f6 }

/* === HERO: mobile readability & layout === */
@media (max-width: 700px){
  .hero{
    /* занимаем экран полностью, учитывая адресную строку мобильных */
    min-height: 100svh;  /* свежие браузеры */
    min-height: 100dvh;  /* fallback */
  }
  .hero__wrap{
    /* отталкиваемся от высоты шапки, чтобы заголовок не пр прятался */
    padding: calc(70px + env(safe-area-inset-top)) 0 54px;
  }
  .hero__content{
    /* позиция и ширина текста */
    --hero-left: 6%;
    --hero-top: 16%;
    max-width: 88vw;
    text-align: left;
  }
  .hero .title{
    /* аккуратный масштаб без “перегиба” */
    font-size: clamp(32px, 10.5vw, 52px);
    line-height: 1.06;
    text-wrap: balance;      /* ровные строки, если поддерживается */
  }
  .hero .lead{
    font-size: clamp(12px, 3.6vw, 16px);
  }
  /* чуть сильнее затемняем фон на мобиле для контраста */
  .hero__bg::after{
    background: linear-gradient(180deg, rgba(0,0,0,.46), rgba(0,0,0,.68));
  }
  .hero__video{
    /* чутка темнее и меньше блюра, чтобы не “мылить” текст */
    filter: brightness(.55) blur(4px);
  }
}
@media (max-width:700px){
  .hero.hero--center-mobile .hero__content{
    left: 50%;
    transform: translateX(-50%);   /* выравниваем по центру */
    text-align: center;
    max-width: 92vw;
  }
}
/* === HERO: фиксируем центр и читаемость на мобиле === */
@media (max-width: 980px){
  .hero{
    min-height: 100svh;      /* стабильная высота экрана */
    position: relative;
  }
  .hero__wrap{
    /* небольшой зазор под шапку, чтобы не перекрывалось */
    padding: calc(var(--header-h) + 12px) 0 56px;
  }
  .hero__content{
    /* ЖЁСТКИЙ центр экрана */
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 92vw;
    text-align: center;
  }
  .hero .title{
    font-size: clamp(32px, 10vw, 52px);
    line-height: 1.06;
    text-wrap: balance;
  }
  .hero .lead{
    font-size: clamp(12px, 3.6vw, 16px);
  }
  /* чуть сильнее затемняем фон для контраста текста */
  .hero__bg::after{
    background: linear-gradient(180deg, rgba(0,0,0,.46), rgba(0,0,0,.68));
  }
  .hero__video{ filter: brightness(.55) blur(4px); }
}
/* === HERO: идеальный центр и крупный размер на мобиле === */
@media (max-width: 980px){
  /* 1) Высота экрана МИНУС шапка, чтобы ничего не пряталось */
  .hero{
    min-height: calc(100svh - var(--header-h));
    display: grid;
    align-items: center;           /* вертикальный центр */
    position: relative;
  }

  /* 2) Убираем абсолютное позиционирование у текста */
  .hero__content{
    position: static !important;   /* вместо absolute */
    left: auto !important;
    top: auto !important;
    transform: none !important;
    max-width: 92vw;
    margin: 0 auto;                /* горизонтальный центр */
    text-align: center;
  }

  /* 3) Крупный, но управляемый размер заголовка */
  .hero .title{
    font-size: clamp(40px, 12.5vw, 64px);
    line-height: 1.06;
    text-wrap: balance;
  }
  .hero .lead{
    font-size: clamp(13px, 3.8vw, 17px);
  }

  /* 4) Чуть сильнее затемняем видео на фоне для читаемости */
  .hero__bg::after{
    background: linear-gradient(180deg, rgba(0,0,0,.48), rgba(0,0,0,.7));
  }
  .hero__video{ filter: brightness(.55) blur(4px); }

  /* 5) Снимаем лишние внешние отступы-”подушки” у враппера */
  .hero__wrap{ padding: 0 0 56px; }
}





/* agree + disabled buy */
.agree{
  display:flex; align-items:center; gap:8px; font-size:13px; color:#555;
}
.agree input{ width:16px; height:16px; }

.btn[aria-disabled="true"]{
  opacity:.55;
  pointer-events:none;
  cursor:not-allowed;
}