/* VIBO.PRO — фирменный слой. Наследует язык «Студии контента»: Druk для крика, Manrope для чтения,
   фиолетово-розовый градиент плитки-логотипа. Тёмная сцена совпадает с фоном картинок персонажа. */
@font-face{font-family:Druk;src:url(fonts/druk-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Manrope;font-weight:400;font-display:swap;src:url(fonts/Manrope-400-cyrillic.woff2) format('woff2');unicode-range:U+0400-04FF}
@font-face{font-family:Manrope;font-weight:400;font-display:swap;src:url(fonts/Manrope-400-latin.woff2) format('woff2')}
@font-face{font-family:Manrope;font-weight:600;font-display:swap;src:url(fonts/Manrope-600-cyrillic.woff2) format('woff2');unicode-range:U+0400-04FF}
@font-face{font-family:Manrope;font-weight:600;font-display:swap;src:url(fonts/Manrope-600-latin.woff2) format('woff2')}
@font-face{font-family:Manrope;font-weight:800;font-display:swap;src:url(fonts/Manrope-700-cyrillic.woff2) format('woff2');unicode-range:U+0400-04FF}
@font-face{font-family:Manrope;font-weight:800;font-display:swap;src:url(fonts/Manrope-700-latin.woff2) format('woff2')}

:root{
  --bg:#07071A;--bg2:#0C0C24;--card:#11112C;--card2:#171738;--line:#24244A;--line2:#34346A;
  --tx:#F3F1FF;--tx2:#B7B3D9;--tx3:#7E7AA8;
  --vi:#6A4CFF;--pk:#FF4FA0;--lime:#C6FF3D;--sky:#5AD1FF;
  --grad:linear-gradient(120deg,var(--vi),var(--pk));
  --disp:Druk,'Arial Black',Impact,sans-serif;--sans:Manrope,system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:18px;--r-lg:28px;--wrap:1200px;--gut:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--bg);color:var(--tx);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:color-mix(in srgb,var(--pk) 40%,transparent)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.disp{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:.005em}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lime{color:var(--lime)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:800 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tx2)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--grad);box-shadow:0 0 12px var(--pk)}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;font:800 15px/1 var(--sans);padding:17px 26px;border-radius:14px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s;white-space:nowrap}
.btn-pri{background:var(--grad);color:#fff;box-shadow:0 10px 40px -10px var(--pk),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-pri:hover{transform:translateY(-2px);box-shadow:0 18px 50px -12px var(--pk),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line2)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn svg{width:18px;height:18px}

/* логотип: плитка-персонаж + слово */
.logo{display:inline-flex;align-items:center;gap:10px}
.logo .tile{width:34px;height:34px;border-radius:10px;background:var(--grad);display:grid;place-items:center;box-shadow:0 0 20px -4px var(--pk);position:relative}
.logo .tile::before,.logo .tile::after{content:"";position:absolute;top:12px;width:6px;height:8px;border-radius:50%;background:#fff}
.logo .tile::before{left:10px}.logo .tile::after{right:10px}
.logo .tile i{position:absolute;bottom:8px;left:50%;width:10px;height:5px;margin-left:-5px;border:2px solid #fff;border-top:0;border-radius:0 0 8px 8px}
.logo .word{font:700 24px/1 var(--disp);letter-spacing:.02em}
.logo .word b{font-weight:700;color:var(--pk)}

/* шапка */
.hdr{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s}
.hdr.solid{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.hdr nav{display:flex;gap:28px;font-weight:600;font-size:14.5px;color:var(--tx2)}
.hdr nav a:hover{color:var(--tx)}
.hdr .btn{padding:12px 18px;font-size:14px}
@media (max-width:900px){.hdr nav{display:none}}

/* секции */
section{position:relative;padding:clamp(72px,10vw,140px) 0}
.sh{max-width:820px;margin-bottom:clamp(36px,5vw,64px)}
.sh h2{font-size:clamp(38px,5.4vw,78px);margin:18px 0 18px}
.sh p{font-size:clamp(16px,1.6vw,19px);color:var(--tx2);max-width:640px}
/* появление — только украшение: содержимое видно всегда, анимация запускается при входе в экран */
.reveal.in{animation:rv .8s var(--ease) both}
@keyframes rv{from{transform:translateY(32px)}}

/* картинки персонажа растворяются в фоне */
.art{-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}