/* «Вольт»: шрифты, токены, кнопки, стекло. Общий для лендинга и приложения. */
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/fonts/unbounded-cyrillic-wght-normal.woff2') format('woff2-variations'), url('/fonts/unbounded-cyrillic-wght-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/fonts/unbounded-latin-wght-normal.woff2') format('woff2-variations'), url('/fonts/unbounded-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/manrope-cyrillic-wght-normal.woff2') format('woff2-variations'), url('/fonts/manrope-cyrillic-wght-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/manrope-latin-wght-normal.woff2') format('woff2-variations'), url('/fonts/manrope-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/manrope-latin-ext-wght-normal.woff2') format('woff2-variations'), url('/fonts/manrope-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #120a2a;          /* глубокий индиго — основа */
  --ink-2: #1a0f3d;
  --ink-3: #241553;
  --ink-4: #33206f;
  --lime: #b6ff3b;         /* электрический лайм — «живое», действие */
  --lime-dim: #8fcc2e;
  --pink: #ff3daa;         /* пурпурно-розовый свет — внимание, запрет, скорость */
  --violet: #7a4dff;
  --amber: #ffb340;
  --text: #f4efff;
  --muted: #a99bcf;        /* контраст на --ink ≈ 7:1 */
  --line: rgba(255, 255, 255, .12);
  --glass: rgba(255, 255, 255, .06);
  --glass-2: rgba(255, 255, 255, .1);
  --danger: #ff5c7a;
  --ok: var(--lime);
  --f-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--text); font: 500 16px/1.55 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--lime); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* кнопки: тач-цель не меньше 44 px */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: 0 1.5rem; border-radius: 999px; font: 700 15px/1 var(--f-body); letter-spacing: .005em; text-decoration: none; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .3s var(--ease), background-color .2s, border-color .2s, opacity .2s; position: relative; user-select: none; }
.btn:active { transform: scale(.97); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .45; pointer-events: none; }
.btn-lime { background: var(--lime); color: #0d0620; box-shadow: 0 0 0 0 rgba(182, 255, 59, .5), 0 10px 30px -8px rgba(182, 255, 59, .55); }
.btn-lime:hover { box-shadow: 0 0 0 6px rgba(182, 255, 59, .16), 0 14px 38px -8px rgba(182, 255, 59, .7); transform: translateY(-1px); }
.btn-ghost { background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn-ghost:hover { background: var(--glass-2); border-color: rgba(255, 255, 255, .24); }
.btn-pink { background: var(--pink); color: #fff; box-shadow: 0 10px 30px -10px rgba(255, 61, 170, .7); }
.btn-danger { background: rgba(255, 92, 122, .14); border: 1px solid rgba(255, 92, 122, .5); color: #ffb3c0; }
.btn-sm { min-height: 44px; padding: 0 1.1rem; font-size: 14px; }
.btn-block { display: flex; width: 100%; }

/* стекло */
.glass { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035)); border: 1px solid var(--line); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-radius: 28px; }
.chip { display: inline-flex; align-items: center; gap: .4em; padding: .32em .8em; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.chip-demo { background: rgba(255, 179, 64, .12); border-color: rgba(255, 179, 64, .45); color: #ffd28f; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .22em .6em; }

/* поля */
.field { display: block; }
.field > span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.input { width: 100%; min-height: 50px; padding: 0 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: var(--text); outline: none; transition: border-color .2s, background .2s, box-shadow .2s; font-size: 16px; /* 16px — iOS не зумит поле */ }
textarea.input { padding: 12px 16px; min-height: 110px; resize: vertical; line-height: 1.5; }
.input::placeholder { color: #7f72a6; }
.input:focus { border-color: var(--lime); background: rgba(255, 255, 255, .09); box-shadow: 0 0 0 4px rgba(182, 255, 59, .14); }
.input[aria-invalid='true'] { border-color: var(--danger); }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none' stroke='%23a99bcf' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m1 1 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
select.input option { background: var(--ink-2); color: var(--text); }
.form-err { min-height: 1.4em; color: #ff9db0; font-size: 14px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
