/* ============================================================
   ГОЛОС МЕСТА — «Voice OS»: гибрид нашего neo-brutalist (жёлтый/мята/лаванда/коралл, жёсткие тени)
   и стиля «Пожить в Инно!» (хром-3D, стекло, моно-подписи, зерно, терминал, бегущая лента).
   Всё под префиксом .vo; голые теги — через :where() (нулевая специфичность), чтобы не воевать с Тильдой.
   ============================================================ */
.vo, .vo *, .vo *::before, .vo *::after { box-sizing: border-box; }
.vo {
  --ink: #09090b; --ink2: #121216; --ink3: #1a1a20;
  --paper: #f4f1e4; --paper2: #e9e5d2; --white: #fffdf5;
  --y: #f2f38a; --g: #b8f7c2; --l: #d9d3ff; --c: #ffb5a6;
  --tx: #fffdf5; --mu: rgba(255, 255, 255, .66); --ln: rgba(255, 255, 255, .14);
  --tl: #121216; --ml: rgba(18, 18, 22, .64); --ll: rgba(18, 18, 22, .13);
  --accent: var(--y);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --fh: 'Unbounded', 'Arial Black', Arial, sans-serif;
  --fb: 'Onest', 'Segoe UI', Arial, sans-serif;
  --fm: 'JetBrains Mono', 'Consolas', monospace;
  position: relative; width: 100%; min-width: 0; overflow: hidden; isolation: isolate;
  background: var(--ink); color: var(--tx);
  font: 400 17px/1.6 var(--fb); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.vo :where(a) { color: inherit; text-decoration: none; }
.vo :where(button, input, textarea, select, summary) { font: inherit; color: inherit; }
.vo :where(button) { cursor: pointer; }
.vo :where(h1, h2, h3, p, ul, ol, figure, dl) { margin: 0; padding: 0; }
.vo :where(ul, ol) { list-style: none; }
.vo :where(img) { display: block; max-width: 100%; }
.vo [hidden] { display: none !important; }
.vo :focus-visible { outline: 3px solid var(--l); outline-offset: 3px; }
.vo-wrap { width: min(1240px, 100% - 48px); margin: 0 auto; }
.vo-mono { font-family: var(--fm); font-size: .74rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- оверлеи: загрузка, прогресс, курсор, зерно ---------- */
.vo-boot { position: fixed; inset: 0; z-index: 400; display: none; place-items: center; background: var(--ink); transition: transform .9s var(--ease), opacity .4s; }
.vo.js .vo-boot { display: grid; }
.vo-boot.out { transform: translateY(-100%); }
.vo-boot__in { width: min(440px, 82vw); }
.vo-boot__log { min-height: 9.4em; font: 400 .85rem/1.9 var(--fm); color: var(--mu); }
.vo-boot__log b { color: var(--y); font-weight: 500; }
.vo-boot__bar { height: 2px; margin-top: 20px; overflow: hidden; background: #26262e; }
.vo-boot__bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--y), var(--g), var(--l)); }
.vo-boot__pct { margin-top: 10px; text-align: right; color: var(--y); }
.vo-prog { position: fixed; z-index: 300; top: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--y), var(--g), var(--l)); }
.vo-cursor { position: fixed; z-index: 350; left: 0; top: 0; display: none; pointer-events: none; }
.vo-cursor i { display: block; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--y); mix-blend-mode: difference; transition: transform .25s var(--ease); }
.vo-cursor.big i { transform: scale(3.2); }
@media (hover: hover) and (pointer: fine) { .vo.js.fx .vo-cursor { display: block; } }
.vo-grain { position: fixed; z-index: 340; inset: -50%; pointer-events: none; opacity: .07; mix-blend-mode: overlay; animation: vo-grain 1.2s steps(6) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%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"); }
@keyframes vo-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -2%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* ---------- шапка-таблетка ---------- */
.vo-hdr { position: fixed; z-index: 320; top: 16px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; transition: transform .5s var(--ease); }
.vo-hdr.hide { transform: translateY(-140%); }
.vo-hdr__in { pointer-events: auto; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 22px; width: min(1180px, 100% - 28px); min-height: 62px; padding: 8px 10px 8px 18px; border-radius: 999px;
  background: rgba(10, 10, 12, .62); border: 1px solid var(--ln); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 60px rgba(0, 0, 0, .28); transition: background .4s, border-color .4s, color .4s; }
.vo-hdr.on-light .vo-hdr__in { background: rgba(255, 253, 245, .7); border-color: var(--ll); color: var(--tl); }
.vo-brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; font: 800 .86rem/1 var(--fh); letter-spacing: -.01em; text-transform: uppercase; }
.vo-brand__mark { position: relative; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: var(--ink); background: var(--y); box-shadow: 3px 3px 0 var(--g); }
.vo-brand__mark::after { content: ""; width: 15px; height: 15px; border: 3px solid currentColor; border-top-color: transparent; border-radius: 50%; transform: rotate(45deg); animation: vo-spin 6s linear infinite; }
@keyframes vo-spin { to { transform: rotate(405deg); } }
.vo-nav { display: flex; align-items: center; gap: 4px; }
.vo-nav a:not(.vo-btn) { position: relative; padding: 9px 13px; border-radius: 999px; font: 500 .74rem/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); transition: color .25s, background .25s; }
.vo-hdr.on-light .vo-nav a:not(.vo-btn) { color: var(--ml); }
.vo-nav a:not(.vo-btn):hover, .vo-nav a.act { color: var(--ink); background: var(--y); }
.vo-burger { display: none; position: relative; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--ln); background: transparent; }
.vo-burger span, .vo-burger span::before { position: absolute; left: 12px; width: 18px; height: 2px; border-radius: 2px; background: currentColor; content: ""; transition: transform .3s var(--ease); }
.vo-burger span { top: 21px; } .vo-burger span::before { left: 0; top: -6px; box-shadow: 0 12px 0 currentColor; }
.vo-burger[aria-expanded="true"] span { background: transparent; }
.vo-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); box-shadow: none; }
.vo-burger[aria-expanded="true"] span::after { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(-45deg); }
.vo-btn.vo-fab { position: fixed; z-index: 310; right: 14px; bottom: 14px; display: none; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .4s, transform .4s var(--ease); }
.vo-btn.vo-fab.show { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- кнопки ---------- */
.vo-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 14px 24px; overflow: hidden; border: 1px solid transparent; border-radius: 14px; font: 700 .95rem/1 var(--fb); text-align: center; white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s; will-change: transform; }
.vo-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); pointer-events: none; }
.vo-btn:hover::before { transform: translateX(120%); }
.vo-btn__ar { display: inline-block; transition: transform .25s var(--ease); }
.vo-btn:hover .vo-btn__ar { transform: translateX(5px); }
.vo-btn--y { color: var(--ink); background: var(--y); box-shadow: 6px 6px 0 var(--g); }
.vo-btn--y:hover { box-shadow: 9px 9px 0 var(--g); }
.vo-btn--light { color: var(--ink); background: #fff; box-shadow: 6px 6px 0 var(--l); }
.vo-btn--light:hover { box-shadow: 9px 9px 0 var(--l); }
.vo-btn--dark { color: #fff; background: var(--ink); box-shadow: 6px 6px 0 var(--y); }
.vo-btn--dark:hover { box-shadow: 9px 9px 0 var(--y); }
.vo-btn--ghost { color: #fff; background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.vo-btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
.vo-btn--sm { min-height: 44px; padding: 11px 18px; border-radius: 999px; font-size: .84rem; box-shadow: 3px 3px 0 var(--g); }
.vo-btn--block { width: 100%; }
.vo-btn:active { transform: translateY(1px); }

/* ---------- типографика ---------- */
.vo-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font: 500 .74rem/1 var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--y); }
.vo-kicker .vo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 0 rgba(184, 247, 194, .6); animation: vo-ping 1.8s infinite; }
@keyframes vo-ping { 70% { box-shadow: 0 0 0 9px rgba(184, 247, 194, 0); } 100% { box-shadow: 0 0 0 0 rgba(184, 247, 194, 0); } }
.vo-sec--light .vo-kicker { color: var(--ink); }
.vo-sec--light .vo-kicker .vo-dot { background: var(--ink); box-shadow: none; animation: none; }
.vo-h1 { font: 800 clamp(2.3rem, 6.2vw, 5.8rem)/.98 var(--fh); letter-spacing: -.04em; text-transform: uppercase; overflow-wrap: anywhere; }
.vo-h2 { font: 800 clamp(1.5rem, 3.9vw, 3.3rem)/1.06 var(--fh); letter-spacing: -.035em; text-transform: uppercase; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
.vo-h3 { font: 700 1.15rem/1.2 var(--fh); letter-spacing: -.02em; }
.vo-hl { display: inline-block; margin-top: .06em; padding: .02em .16em .08em; border-radius: .16em; color: var(--ink); background: var(--y); box-shadow: .1em .1em 0 var(--g); transform: rotate(-1.2deg); }
.vo-chrome { background: linear-gradient(180deg, #fff 0, #a9a9b4 48%, #44444e 52%, #e8e8ee 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.vo-lead { max-width: 580px; margin-top: 26px; font-size: clamp(1rem, 1.5vw, 1.18rem); color: var(--mu); }
.vo-sec--light .vo-lead, .vo-sec--light .vo-p { color: var(--ml); }
.vo-p { color: var(--mu); }
.vo-dot-y { color: var(--y); }

/* анимации появления */
.vo.js .vo-rv { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.vo.js .vo-rv.in { opacity: 1; transform: none; }
.vo-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.vo-split .w > span { display: inline-block; transition: transform 1s var(--ease); transition-delay: var(--d, 0s); }
.vo.js .vo-split .w > span { transform: translateY(112%); }
.vo.js .vo-split.in .w > span { transform: none; }

/* стекло */
.vo-glass { background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .13); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.vo-spot { position: relative; }
.vo-spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(242, 243, 138, .16), transparent 60%); }
.vo-spot:hover::after { opacity: 1; }
.vo-tilt { transform-style: preserve-3d; transition: transform .8s var(--ease), box-shadow .4s; will-change: transform; }

/* ---------- HERO ---------- */
.vo-hero { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: 130px 0 90px; overflow: hidden; background: var(--ink); }
.vo-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.vo-hero__bg::before { content: ""; position: absolute; inset: 0; opacity: .5;
  background: radial-gradient(40% 50% at 12% 30%, rgba(242, 243, 138, .17), transparent 70%), radial-gradient(38% 46% at 86% 24%, rgba(184, 247, 194, .15), transparent 70%), radial-gradient(34% 40% at 70% 90%, rgba(217, 211, 255, .13), transparent 70%); animation: vo-drift 16s ease-in-out infinite alternate; }
@keyframes vo-drift { to { transform: translate(-2%, 3%) scale(1.06); } }
.vo-hero__bg::after { content: ""; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 20%, transparent 85%); mask-image: radial-gradient(70% 70% at 50% 40%, #000 20%, transparent 85%); }
.vo-hero__word { position: absolute; left: -2vw; bottom: -4vw; z-index: 0; font: 800 clamp(8rem, 27vw, 30rem)/.8 var(--fh); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .08); white-space: nowrap; pointer-events: none; user-select: none; will-change: transform; }
.vo-hero__canvas { pointer-events: none; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s; }
.vo-hero__canvas.on { opacity: 1; }
.vo-hero.no3d::after { content: ""; position: absolute; z-index: 1; right: 8%; top: 22%; width: min(38vw, 460px); aspect-ratio: 1; border-radius: 42% 58% 55% 45% / 50% 40% 60% 50%; background: radial-gradient(circle at 30% 30%, #fff 0, #9a9aa6 18%, #25252c 55%, #0b0b0e 100%); box-shadow: 0 0 0 10px rgba(242, 243, 138, .12), 0 40px 120px rgba(184, 247, 194, .15); animation: vo-morph 10s ease-in-out infinite; }
@keyframes vo-morph { 50% { border-radius: 58% 42% 40% 60% / 45% 58% 42% 55%; transform: rotate(8deg); } }
.vo-hero__in { position: relative; z-index: 3; }
.vo-hero__copy { max-width: 700px; }
.vo-h1 .vo-hl { margin-top: .12em; }
.vo.js .vo-hero .vo-kicker, .vo.js .vo-hero .vo-lead, .vo.js .vo-hero .vo-cta, .vo.js .vo-hero .vo-term, .vo.js .vo-hero .vo-proofs { opacity: 0; transform: translateY(22px); transition: opacity 1s .45s, transform 1s .45s var(--ease); }
.vo.ready .vo-hero .vo-kicker, .vo.ready .vo-hero .vo-lead, .vo.ready .vo-hero .vo-cta, .vo.ready .vo-hero .vo-term, .vo.ready .vo-hero .vo-proofs { opacity: 1; transform: none; }
.vo-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.vo-term { display: flex; align-items: center; gap: 8px; min-height: 1.6em; margin-top: 30px; font: 400 .84rem/1.4 var(--fm); color: #c4c4cf; }
.vo-term b { color: var(--y); font-weight: 500; }
.vo-term i { display: inline-block; width: .55em; height: 1.05em; background: var(--y); animation: vo-blink 1s steps(2) infinite; }
@keyframes vo-blink { 50% { opacity: 0; } }
.vo-proofs { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 22px; }
.vo-proof { display: inline-flex; align-items: center; gap: 9px; font: 500 .74rem/1.3 var(--fm); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.vo-proof i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: var(--ink); background: var(--g); font-style: normal; font-size: 11px; font-weight: 900; }

/* плавающие чипы и постер-детали */
.vo-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 16px; white-space: nowrap; animation: vo-float 7s ease-in-out infinite; }
.vo-chip b { font: 700 1rem var(--fh); letter-spacing: -.02em; }
.vo-chip .vo-mono { color: var(--mu); font-size: .62rem; }
.vo-chip--1 { right: 7%; top: 24%; animation-delay: -1s; } .vo-chip--2 { right: 33%; bottom: 17%; animation-delay: -3s; } .vo-chip--3 { right: 4%; bottom: 33%; animation-delay: -2s; }
@keyframes vo-float { 50% { transform: translateY(-14px); } }
.vo-cross { position: absolute; z-index: 2; color: rgba(255, 255, 255, .35); font: 300 22px/1 var(--fm); pointer-events: none; }
.vo-coords { position: absolute; z-index: 3; top: 112px; right: 28px; text-align: right; color: var(--mu); font-size: .66rem; line-height: 1.7; pointer-events: none; }
.vo-vert { position: absolute; z-index: 3; right: 18px; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%); color: rgba(255, 255, 255, .4); font-size: .62rem; letter-spacing: .3em; pointer-events: none; }
.vo-scrollhint { position: absolute; z-index: 3; left: 50%; bottom: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); color: rgba(255, 255, 255, .5); font-size: .62rem; pointer-events: none; }
.vo-scrollhint i { width: 1px; height: 38px; background: linear-gradient(var(--y), transparent); animation: vo-scrolldot 2s ease-in-out infinite; transform-origin: top; }
@keyframes vo-scrolldot { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* демо-плеер */
.vo-demo { position: absolute; z-index: 5; right: 5%; bottom: 8%; width: min(330px, calc(100% - 40px)); padding: 16px; border: 2px solid var(--ink); border-radius: 24px; color: var(--ink); background: var(--g); box-shadow: 9px 9px 0 var(--l); transform: rotate(-2deg); }
.vo-demo__top { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 13px; align-items: center; }
.vo-demo__btn { display: grid; width: 50px; height: 50px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #fff; background: var(--ink); transition: transform .25s var(--ease), background .25s; }
.vo-demo__btn:hover { transform: scale(1.08); background: #2a2a2f; }
.vo-demo__btn svg { width: 20px; height: 20px; fill: currentColor; }
.vo-demo__btn .pa { display: none; } .vo-demo.act .vo-demo__btn .pl { display: none; } .vo-demo.act .vo-demo__btn .pa { display: block; }
.vo-demo__lab { margin-bottom: 4px; font: 600 .6rem/1.2 var(--fm); letter-spacing: .1em; text-transform: uppercase; }
.vo-demo__t { font: 700 .92rem/1.2 var(--fh); letter-spacing: -.02em; }
.vo-eq { display: flex; align-items: center; gap: 3px; height: 26px; margin-top: 12px; }
.vo-eq i { width: 3px; height: 7px; border-radius: 4px; background: var(--ink); animation: vo-eq .8s ease-in-out infinite alternate; animation-play-state: paused; }
.vo-eq i:nth-child(2n) { height: 15px; animation-delay: .12s; } .vo-eq i:nth-child(3n) { height: 22px; animation-delay: .24s; } .vo-eq i:nth-child(4n) { height: 11px; animation-delay: .36s; }
.vo-demo.act .vo-eq i { animation-play-state: running; }
@keyframes vo-eq { from { transform: scaleY(.4); } to { transform: scaleY(1.2); } }
.vo-demo__q { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s, opacity .25s, margin-top .3s; font-size: .76rem; font-weight: 600; line-height: 1.5; }
.vo-demo.act .vo-demo__q { max-height: 140px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(9, 9, 11, .2); opacity: 1; }

/* ---------- бегущая лента ---------- */
.vo-ribbon { position: relative; z-index: 6; margin: -22px 0 -12px; padding: 17px 0; overflow: hidden; color: var(--ink); background: var(--y); box-shadow: 0 16px 50px -20px rgba(242, 243, 138, .55); transform: rotate(-1.4deg) scale(1.03); }
.vo-ribbon__track { display: flex; gap: 34px; width: max-content; animation: vo-marq 30s linear infinite; font: 700 clamp(1.05rem, 2.2vw, 1.8rem)/1 var(--fh); text-transform: uppercase; letter-spacing: -.02em; white-space: nowrap; }
.vo-ribbon__track i { font-style: normal; } .vo-ribbon__track .o { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
@keyframes vo-marq { to { transform: translateX(-50%); } }

/* ---------- секции ---------- */
.vo-sec { position: relative; padding: 130px 0; }
.vo-sec--light { z-index: 2; margin-top: -48px; padding-top: 170px; border-radius: 48px 48px 0 0; color: var(--tl); background: var(--paper); }
.vo-sec--dark { z-index: 3; margin-top: -48px; padding-top: 170px; border-radius: 48px 48px 0 0; background: var(--ink); }
.vo-sec--mint { z-index: 4; margin-top: -48px; padding-top: 170px; border-radius: 48px 48px 0 0; color: var(--ink); background: var(--g); }
.vo-sec--mint::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .2; background-image: radial-gradient(var(--ink) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; }
.vo-sec__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); gap: 50px; align-items: end; margin-bottom: 56px; }
.vo-sec__head .vo-p { max-width: 420px; }

/* bento-карточки (преимущества) */
.vo-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.vo-card { position: relative; min-height: 380px; overflow: hidden; border: 2px solid var(--ink); border-radius: 30px; color: var(--ink); }
.vo-card--y { grid-column: span 5; padding: 32px; background: var(--y); box-shadow: 10px 10px 0 var(--g); }
.vo-card--g { grid-column: span 7; padding: 32px; background: var(--g); box-shadow: 10px 10px 0 var(--l); }
.vo-card--c { grid-column: span 12; display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr); min-height: 360px; background: #fff6d8; box-shadow: 10px 10px 0 var(--c); }
.vo-card__n { position: absolute; top: 28px; right: 30px; font: 700 .8rem var(--fm); color: rgba(9, 9, 11, .3); }
.vo-card__ic { display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid rgba(9, 9, 11, .75); border-radius: 16px; background: rgba(255, 255, 255, .45); font-size: 1.5rem; }
.vo-card__t { max-width: 560px; font: 800 clamp(1.3rem, 2.5vw, 2.1rem)/1.05 var(--fh); letter-spacing: -.04em; text-transform: uppercase; }
.vo-card__p { max-width: 500px; margin-top: 16px; color: rgba(9, 9, 11, .68); font-size: .95rem; font-weight: 500; }
.vo-card__body { position: absolute; left: 32px; right: 32px; bottom: 32px; }
.vo-card__copy { display: flex; flex-direction: column; justify-content: space-between; gap: 36px; padding: 34px; }
.vo-card__media { position: relative; min-height: 340px; overflow: hidden; }
.vo-card__media img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.vo-card__badge { position: absolute; z-index: 2; right: 22px; bottom: 22px; max-width: 220px; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 18px; background: var(--l); box-shadow: 5px 5px 0 var(--y); font: 700 .86rem/1.25 var(--fh); transform: rotate(-3deg); }
.vo-card__map { position: absolute; top: 26px; right: 24px; width: 43%; height: 180px; overflow: hidden; border: 2px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 rgba(9, 9, 11, .16); transform: rotate(3deg); }
.vo-card__map img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.06); }
.vo-card__map::after { content: ""; position: absolute; left: 53%; top: 50%; width: 40px; height: 40px; border: 2px solid var(--ink); border-radius: 50% 50% 50% 8px; background: var(--c); box-shadow: 4px 4px 0 var(--ink); transform: translate(-50%, -50%) rotate(-45deg); animation: vo-pin 2.4s ease-in-out infinite; }
@keyframes vo-pin { 50% { transform: translate(-50%, -62%) rotate(-45deg); } }

/* «как работает»: терминал + код-окно */
.vo-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.vo-steps { display: grid; gap: 14px; margin-top: 36px; }
.vo-steps li { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 22px; border-radius: 22px; }
.vo-steps__n { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: var(--ink); background: var(--y); font: 800 .8rem var(--fh); }
.vo-steps__cmd { margin-bottom: 4px; color: var(--g); font: 500 .78rem/1.4 var(--fm); }
.vo-steps__t { font: 700 1.05rem/1.2 var(--fh); letter-spacing: -.02em; }
.vo-steps__p { margin-top: 6px; color: var(--mu); font-size: .92rem; }
.vo-code { overflow: hidden; border-radius: 22px; background: #0d0d11; border: 1px solid var(--ln); box-shadow: 12px 12px 0 var(--l); }
.vo-code__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--ln); color: var(--mu); font: 500 .7rem var(--fm); }
.vo-code__bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .vo-code__bar i:nth-child(2) { background: #febc2e; } .vo-code__bar i:nth-child(3) { background: #28c840; }
.vo-code__bar span { margin-left: 8px; }
.vo-code pre { margin: 0; padding: 20px 22px 24px; min-height: 17.5em; overflow-x: auto; color: #c8c8d4; font: 400 .82rem/1.75 var(--fm); white-space: pre-wrap; word-break: break-word; }
.vo-code .k { color: var(--l); } .vo-code .s { color: var(--g); } .vo-code .n { color: var(--y); } .vo-code .c { color: #777789; } .vo-code .p { color: var(--c); }
.vo-code .cur { display: inline-block; width: .55em; height: 1em; vertical-align: -.12em; background: var(--y); animation: vo-blink 1s steps(2) infinite; }

/* города */
.vo-cities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.vo-city { position: relative; display: flex; min-height: 460px; flex-direction: column; justify-content: flex-end; overflow: hidden; border: 2px solid var(--ink); border-radius: 30px; color: #fff; background: var(--ink2); transition: box-shadow .3s; }
.vo-city--a { box-shadow: 10px 10px 0 var(--y); } .vo-city--b { box-shadow: 10px 10px 0 var(--g); }
.vo-city__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.vo-city:hover .vo-city__img { transform: scale(1.07); }
.vo-city__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .88)); }
.vo-city__body { position: relative; padding: 28px; }
.vo-city__tag { display: inline-block; margin-bottom: 14px; padding: 7px 11px; border-radius: 999px; color: var(--ink); background: var(--y); font: 600 .62rem/1 var(--fm); letter-spacing: .1em; text-transform: uppercase; }
.vo-city--b .vo-city__tag { background: var(--g); }
.vo-city__name { font: 800 clamp(1.6rem, 2.6vw, 2.3rem)/1 var(--fh); letter-spacing: -.045em; text-transform: uppercase; }
.vo-city__p { margin-top: 12px; color: rgba(255, 255, 255, .78); font-size: .92rem; }
.vo-city__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; color: rgba(255, 255, 255, .65); font: 500 .7rem var(--fm); letter-spacing: .04em; }
.vo-city__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--y); font: 700 .86rem var(--fb); }
.vo-city--b .vo-city__go { color: var(--g); }
.vo-city--soon { align-items: center; justify-content: center; text-align: center; border: 2px dashed rgba(18, 18, 22, .35); background: transparent; box-shadow: none; color: var(--tl); }
.vo-city--soon .vo-city__p { color: var(--ml); } .vo-city--soon .vo-city__tag { background: var(--ink); color: #fff; }
.vo-city__code { margin-top: 14px; font: 500 .82rem var(--fm); color: var(--ml); }
.vo-city__code i { display: inline-block; width: .5em; height: 1em; vertical-align: -.1em; background: var(--ink); animation: vo-blink 1s steps(2) infinite; }

/* оплата */
.vo-pay__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .78fr); gap: 80px; align-items: center; }
.vo-pay__kicker { display: inline-flex; margin-bottom: 22px; padding: 9px 12px; border: 1px solid var(--ink); border-radius: 999px; font: 600 .66rem/1 var(--fm); letter-spacing: .1em; text-transform: uppercase; }
.vo-pay__note { display: flex; align-items: center; gap: 12px; margin-top: 28px; font: 600 .8rem var(--fm); }
.vo-price { position: relative; padding: 32px; border: 2px solid var(--ink); border-radius: 30px; color: #fff; background: var(--ink); box-shadow: 12px 12px 0 var(--y), 24px 24px 0 var(--l); transform: rotate(1deg); }
.vo-price__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.vo-price__lab { color: var(--y); font: 600 .66rem/1.3 var(--fm); letter-spacing: .1em; text-transform: uppercase; }
.vo-price__badge { padding: 8px 10px; border-radius: 999px; color: var(--ink); background: var(--c); font: 700 .6rem/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; }
.vo-price__sum { margin: 20px 0 4px; font: 800 clamp(3rem, 6vw, 4.8rem)/.9 var(--fh); letter-spacing: -.06em; }
.vo-price__cap { color: rgba(255, 255, 255, .55); font-size: .82rem; }
.vo-price__list { display: grid; gap: 13px; margin: 28px 0; padding: 24px 0; border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); }
.vo-price__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 11px; color: rgba(255, 255, 255, .85); font-size: .9rem; font-weight: 500; }
.vo-price__list i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: var(--ink); background: var(--g); font-style: normal; font-size: 11px; font-weight: 900; }
.vo-price__small { margin-top: 18px; color: rgba(255, 255, 255, .5); font-size: .74rem; text-align: center; }
.vo-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.vo-chipbtn { padding: 11px 18px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: transparent; color: #fff; font: 700 .86rem/1 var(--fb); transition: color .2s, background .2s, border-color .2s, transform .2s; }
.vo-chipbtn:hover { border-color: rgba(255, 255, 255, .6); transform: translateY(-2px); }
.vo-chipbtn.on { color: var(--ink); background: var(--y); border-color: var(--y); }

/* FAQ */
.vo-faq__list { display: grid; max-width: 920px; gap: 12px; margin-top: 44px; }
.vo-faq details { border: 1px solid var(--ln); border-radius: 22px; background: var(--ink2); transition: border-color .25s, background .25s; }
.vo-faq details[open] { border-color: rgba(242, 243, 138, .5); background: var(--ink3); }
.vo-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; font: 700 1rem/1.3 var(--fh); letter-spacing: -.02em; list-style: none; cursor: pointer; }
.vo-faq summary::-webkit-details-marker { display: none; }
.vo-faq summary::before { content: attr(data-q); flex: 0 0 auto; color: var(--y); font: 500 .72rem var(--fm); letter-spacing: .08em; }
.vo-faq summary span { flex: 1; }
.vo-faq summary::after { content: "+"; display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--ink); background: var(--y); font: 800 1.2rem/1 var(--fb); transition: transform .3s var(--ease); }
.vo-faq details[open] summary::after { transform: rotate(45deg); }
.vo-faq details p { padding: 0 26px 24px 26px; color: var(--mu); font-size: .96rem; }

/* контакты и футер */
.vo-contact { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 48px; }
.vo-contact--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vo-ccard { display: flex; min-height: 140px; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 30px; border-radius: 26px; transition: transform .3s var(--ease), border-color .3s; }
.vo-ccard:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .35); }
.vo-ccard__l { display: block; margin-bottom: 9px; color: rgba(255, 255, 255, .5); font: 500 .66rem/1.2 var(--fm); letter-spacing: .1em; text-transform: uppercase; }
.vo-ccard__v { display: block; overflow: hidden; font: 800 clamp(1.1rem, 2vw, 1.7rem)/1.1 var(--fh); letter-spacing: -.03em; text-overflow: ellipsis; }
.vo-ccard__ic { display: grid; width: 52px; height: 52px; flex: 0 0 auto; place-items: center; border-radius: 16px; color: var(--ink); background: var(--y); font-size: 1.4rem; transition: transform .3s var(--ease); }
.vo-ccard:hover .vo-ccard__ic { transform: rotate(8deg) scale(1.08); }
.vo-foot { padding: 90px 0 30px; background: var(--ink); }
.vo-foot__word { position: relative; margin-bottom: 50px; font: 800 clamp(2.6rem, 11.4vw, 11rem)/.95 var(--fh); letter-spacing: -.05em; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .25); }
.vo-foot__word::before { content: attr(data-t); position: absolute; left: 0; top: 0; width: 100%; color: var(--y); -webkit-text-stroke: 0; white-space: pre; clip-path: inset(0 calc(100% - var(--fill, 0%)) 0 0); }
.vo-foot__row { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-top: 24px; border-top: 1px solid var(--ln); color: rgba(255, 255, 255, .45); font-size: .8rem; }
.vo-foot__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.vo-foot__links a:hover { color: #fff; }
.vo-credits { margin-top: 18px; color: rgba(255, 255, 255, .3); font-size: .72rem; line-height: 1.5; }
.vo-crumbs { margin-bottom: 20px; color: rgba(255, 255, 255, .5); font: 500 .72rem var(--fm); letter-spacing: .04em; }
.vo-crumbs a { text-decoration: underline; text-underline-offset: 3px; } .vo-crumbs a:hover { color: #fff; }

/* лендинг города: факты и остановки */
.vo-about { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.vo-about > * { min-width: 0; }
.vo-about .vo-h2 { font-size: clamp(1.35rem, 2.7vw, 2.4rem); }
.vo-about p + p { margin-top: 18px; }
.vo-about .vo-p { font-size: 1.05rem; }
.vo-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.vo-fact { padding: 18px 16px; border: 2px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: 5px 5px 0 var(--y); }
.vo-fact b { display: block; font: 800 clamp(1.4rem, 3vw, 2.1rem)/1 var(--fh); letter-spacing: -.04em; }
.vo-fact span { display: block; margin-top: 6px; color: var(--ml); font: 500 .64rem/1.3 var(--fm); letter-spacing: .06em; text-transform: uppercase; }
.vo-stops { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 44px; }
.vo-stop { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 2px solid var(--ink); border-radius: 26px; color: var(--tl); background: #fff; box-shadow: 6px 6px 0 var(--stop-shadow, var(--ink)); transition: box-shadow .3s; }
.vo-stop:hover { box-shadow: 9px 9px 0 var(--g); }
.vo-stop__img { position: relative; height: 170px; background: #1a1a20 center / cover no-repeat; }
.vo-stop__n { position: absolute; z-index: 1; top: 14px; left: 14px; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: var(--ink); background: var(--y); border: 2px solid var(--ink); font: 800 .8rem var(--fh); }
.vo-stop__lock { position: absolute; z-index: 1; top: 14px; right: 14px; padding: 6px 10px; border-radius: 999px; color: #fff; background: rgba(9, 9, 11, .72); font: 500 .6rem var(--fm); letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(6px); }
.vo-stop__b { padding: 18px 20px 22px; }
.vo-stop__t { font: 800 1rem/1.15 var(--fh); letter-spacing: -.02em; text-transform: uppercase; }
.vo-stop__p { margin-top: 8px; color: var(--ml); font-size: .88rem; }
.vo-locknote { margin-top: 14px; font: 500 .74rem var(--fm); letter-spacing: .04em; }

/* «спасибо» */
.vo-thanks { display: grid; min-height: 100vh; place-items: center; padding: 120px 0 80px; position: relative; overflow: hidden; background: var(--ink); }
.vo-thanks__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s; pointer-events: none; }
.vo-thanks__canvas.on { opacity: 1; }
.vo-thanks__card { position: relative; z-index: 3; width: min(640px, 100% - 40px); margin: 0 auto; padding: 44px 40px; border: 2px solid var(--ink); border-radius: 30px; color: var(--ink); background: var(--g); box-shadow: 12px 12px 0 var(--y), 24px 24px 0 var(--l); text-align: center; }
.vo-thanks__t { font: 800 clamp(1.6rem, 4.6vw, 2.8rem)/1.02 var(--fh); letter-spacing: -.045em; text-transform: uppercase; }
.vo-thanks__p { margin: 18px 0 26px; color: rgba(9, 9, 11, .7); }
.vo-thanks__act { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.vo-key { display: flex; gap: 10px; margin-top: 26px; }
.vo-key input { flex: 1; min-width: 0; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 12px; color: var(--ink); background: #fff; }
.vo-key__msg { min-height: 20px; margin-top: 10px; font: 600 .76rem var(--fm); }

/* ---------- адаптив ---------- */
@media (max-width: 1100px) {
  .vo-nav a:not(.vo-btn):nth-child(n+4) { display: none; }
  .vo-pay__grid { grid-template-columns: 1fr; gap: 56px; } .vo-price { width: min(100%, 560px); }
  .vo-how { grid-template-columns: 1fr; gap: 40px; }
  .vo-about { grid-template-columns: 1fr; gap: 30px; }
  .vo-sec__head { grid-template-columns: 1fr; gap: 20px; }
  .vo-chip--2 { display: none; }
}
@media (max-width: 959px) {
  .vo-burger { display: block; }
  .vo-nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px; border-radius: 26px; background: rgba(10, 10, 12, .92); border: 1px solid var(--ln); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .vo-nav.open { display: flex; }
  .vo-nav a:not(.vo-btn), .vo-nav a:not(.vo-btn):nth-child(n+4) { display: block; padding: 14px 16px; border-radius: 14px; color: rgba(255, 255, 255, .85) !important; font-size: .8rem; }
  .vo-hdr.on-light .vo-nav { background: rgba(255, 253, 245, .95); border-color: var(--ll); }
  .vo-hdr.on-light .vo-nav a:not(.vo-btn) { color: var(--tl) !important; }
  .vo-hero { display: block; padding-top: 130px; min-height: auto; padding-bottom: 60px; }
  .vo-hero__canvas { position: relative; display: block; width: 100%; height: min(100vw, 470px); margin-top: 8px; }
  .vo-hero__in { position: relative; z-index: 3; }
  .vo-demo { position: relative; right: auto; bottom: auto; margin: 54px auto 0; width: min(100%, 360px); }
  .vo-coords, .vo-vert, .vo-chip, .vo-cross { display: none; }
  .vo-bento { gap: 20px; } .vo-card--y, .vo-card--g { grid-column: span 6; } .vo-card--c { grid-template-columns: 1fr 1fr; }
  .vo-cities { grid-template-columns: 1fr 1fr; } .vo-city--soon { grid-column: span 2; min-height: 220px; }
  .vo-btn.vo-fab { display: inline-flex; }
}
@media (max-width: 639px) {
  .vo { font-size: 16px; }
  .vo-wrap { width: min(1240px, 100% - 32px); }
  .vo-hdr { top: 10px; } .vo-hdr__in { min-height: 56px; padding: 6px 8px 6px 14px; }
  .vo-brand { font-size: .74rem; } .vo-brand__mark { width: 32px; height: 32px; }
  .vo-sec { padding: 90px 0; } .vo-sec--light, .vo-sec--dark, .vo-sec--mint { padding-top: 120px; border-radius: 32px 32px 0 0; margin-top: -32px; }
  .vo-cta { flex-direction: column; align-items: stretch; } .vo-cta .vo-btn { width: 100%; }
  .vo-bento { gap: 20px; } .vo-card--y, .vo-card--g, .vo-card--c { grid-column: span 12; } .vo-card--y, .vo-card--g { min-height: 380px; padding: 24px; }
  .vo-card--c { grid-template-columns: 1fr; } .vo-card__body { left: 24px; right: 24px; bottom: 24px; } .vo-card__map { width: 52%; height: 140px; }
  .vo-cities { grid-template-columns: 1fr; } .vo-city--soon { grid-column: auto; } .vo-city { min-height: 420px; }
  .vo-steps li { grid-template-columns: 46px minmax(0, 1fr); padding: 16px; }
  .vo-code pre { font-size: .72rem; padding: 16px; }
  .vo-contact--2 { grid-template-columns: 1fr; } .vo-ccard { min-height: 120px; padding: 22px; }
  .vo-price { padding: 26px 22px; box-shadow: 8px 8px 0 var(--y), 16px 16px 0 var(--l); }
  .vo-faq summary { padding: 18px; font-size: .92rem; } .vo-faq details p { padding: 0 18px 20px; }
  .vo-foot__row { flex-direction: column; align-items: flex-start; }
  .vo-facts { gap: 8px; } .vo-fact { padding: 14px 10px; }
  .vo-thanks__card { padding: 30px 20px; box-shadow: 8px 8px 0 var(--y); } .vo-key { flex-direction: column; }
  .vo-ribbon { margin: -14px 0 -8px; padding: 13px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vo *, .vo *::before, .vo *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .vo.js .vo-rv, .vo.js .vo-split .w > span { opacity: 1; transform: none; }
  .vo-grain { display: none; }
}