/* Герой главной: бесшовный паттерн «Лён» рисуется по скроллу слоями (фон → средний план → передний план). */
body:has(.vg-hero){overflow-x:clip}
.vg-hero{--vg-paper:#fff;--vg-ink:#2c2b26;--vg-soft:#6b6f80;--vg-flax:#4d5c9a;--vg-hud:#1d1d1f;--vg-hud-fg:#efefef;
  position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:calc(-1 * var(--vg-head, 64px));height:560vh;color:var(--vg-ink)}
/* lvh — высота экрана без адресной строки: не меняется, когда телефон прячет строку при прокрутке (с dvh сцена дёргалась и холст вытягивался) */
.vg-hero-stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:var(--vg-paper)}
.vg-hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.vg-hero-ov{position:absolute;pointer-events:none}
.vg-hero-intro{inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 16px}
.vg-hero-card{width:100%;max-width:760px;background:rgba(255,255,255,.9);padding:30px 40px 24px;display:flex;flex-direction:column;gap:10px;align-items:center;box-shadow:0 0 0 1px rgba(77,92,154,.22)}
.vg-hero-eyebrow{font-family:var(--font-meta);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--vg-flax)}
.vg-hero h1{font-family:var(--font-ui);font-weight:500;font-size:clamp(32px,4.4vw,60px);line-height:1.06;letter-spacing:-.02em;margin:0;text-wrap:balance}
.vg-hero h1 em,.vg-hero h2 em{font-style:normal;color:var(--vg-flax)}
.vg-hero-hint{font-size:14px;color:var(--vg-soft);display:flex;flex-direction:column;gap:8px;align-items:center;margin-top:6px}
/* стрелка вниз под подсказкой */
.vg-hero-hint i{order:2;display:block;width:9px;height:9px;border-right:1.5px solid var(--vg-flax);border-bottom:1.5px solid var(--vg-flax);transform:rotate(45deg);animation:vgBob 1.6s ease-in-out infinite}
@keyframes vgBob{0%,100%{transform:translateY(-2px) rotate(45deg);opacity:.5}50%{transform:translateY(4px) rotate(45deg);opacity:1}}
@media(prefers-reduced-motion:reduce){.vg-hero-hint i{animation:none}}
.vg-hero-layers{left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--vg-hud);color:var(--vg-hud-fg);font-family:var(--font-meta);font-size:11.5px;border-radius:6px;width:250px;box-shadow:0 6px 24px rgba(20,24,50,.2);overflow:hidden;opacity:0}
.vg-hero-layers header{padding:7px 11px;display:flex;justify-content:space-between;border-bottom:1px solid #333;opacity:.7}
.vg-ly{display:grid;grid-template-columns:16px 12px 1fr auto;gap:9px;align-items:center;padding:7px 11px;font-variant-numeric:tabular-nums;transition:background .25s}
.vg-ly+.vg-ly{border-top:1px solid #2b2b2b}
.vg-ly .eye{width:14px;height:9px;border:1.2px solid currentColor;border-radius:50%;opacity:.25;position:relative}
.vg-ly .eye::after{content:"";position:absolute;left:4px;top:1.5px;width:3px;height:3px;border-radius:50%;background:currentColor}
.vg-ly .sw{width:12px;height:12px;border-radius:2px}
.vg-ly .n{opacity:.45}
.vg-ly.on{background:#2f3c73}
.vg-ly.on .n,.vg-ly.vis .n{opacity:1}
.vg-ly.vis .eye{opacity:1}
.vg-hero-final{display:flex;flex-direction:column;gap:16px;max-width:27rem;background:rgba(255,255,255,.93);padding:30px 32px;box-shadow:0 10px 40px rgba(40,50,100,.12);opacity:0}
.vg-hero h2{font-family:var(--font-ui);font-weight:500;font-size:clamp(32px,3.8vw,52px);line-height:1.04;letter-spacing:-.02em;margin:0;text-wrap:balance}
.vg-hero-final p{margin:0;color:var(--vg-soft);font-size:16px;line-height:1.55}
.vg-hero-btns{display:flex;flex-wrap:wrap;gap:10px;pointer-events:none}
.vg-hero-btn{font:500 15px/1 var(--font-ui);padding:15px 22px;border-radius:999px;text-decoration:none;border:1px solid var(--vg-flax);color:var(--vg-flax);background:transparent}
.vg-hero-btn.pri{background:var(--vg-flax);color:#fff}
.vg-hero-btn:hover{filter:brightness(1.08)}
.vg-hero-btn:focus-visible{outline:2px solid var(--vg-ink);outline-offset:3px}
/* ПК: финальная карточка шире, заголовок в две строки */
@media(min-width:760px){.vg-hero-final{max-width:640px;padding:36px 40px}.vg-hero-final p{max-width:46ch}}
@media(max-width:759px){
  .vg-hero{--vg-head:108px}
  .vg-hero-layers{width:auto;right:max(16px,env(safe-area-inset-right,0px));font-size:10.5px}
  .vg-hero-final{padding:22px 20px}
  .vg-hero-final p{font-size:15px}
}
/* Без JS: статичный паттерн и сразу финальная карточка. */
.vg-hero:not(.is-ready) .vg-hero-final{opacity:1;left:7%;top:50%;transform:translateY(-50%)}
.vg-hero:not(.is-ready) .vg-hero-intro{display:none}
.vg-hero:not(.is-ready){height:auto}
.vg-hero:not(.is-ready) .vg-hero-stage{position:relative;height:100vh;height:100dvh}
.vg-hero:not(.is-ready) .vg-hero-layers{display:none}