/* ============================================================ Визирь — landing design system Direction: premium dark "techno-stealth". Orange = action accent (brand). Transcript blue/green = product moments. Headings = JetBrains Mono (transcript/terminal identity). Body = system/Inter. ============================================================ */ /* ---------- Fonts ---------- Самохостинг JetBrains Mono (variable, wght 100–800): без запроса к fonts.googleapis.com (рендер-блокировка + из РФ рискованно). Файлы в /assets/fonts/, preload в . */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: local("JetBrains Mono"), url("../assets/fonts/jbm-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: local("JetBrains Mono"), url("../assets/fonts/jbm-latin.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; } /* Метрически подогнанный фолбэк: пока/если JBM не загрузился, Consolas/Courier рендерятся с шириной, близкой к JBM, — заголовок не переверстывается (CLS≈0 на Windows). */ @font-face { font-family: "JetBrains Mono Fallback"; src: local("Consolas"), local("Courier New"); size-adjust: 107%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; } /* ---------- Tokens ---------- */ :root { /* surfaces */ --bg: #07090d; --panel: #0e1218; --panel-2: #11161e; --panel-3: #141b25; --bd: #1b2330; --bd-strong: #2a313c; --hl-top: rgba(255, 255, 255, 0.05); /* inset top catch-light on raised panels */ /* text */ --tx: #e6e9ee; --mut: #9aa4b2; --mut-2: #7b8696; /* action accent (orange) — бренд «Визирь», под логотип; используется ТОЛЬКО для действий/бренда */ --ac: #f5851a; --ac-hover: #ff9a33; --ac-press: #d96f0c; --ac-on: #160b02; --ac-soft: rgba(245, 133, 26, 0.09); --ac-line: rgba(245, 133, 26, 0.34); --ac-glow: rgba(245, 133, 26, 0.45); /* transcript palette (product moments only) */ --intv: #60a5fa; /* interviewer — синий */ --you: #34d399; /* you — мягкий зелёный (увели от оранжевого, чтобы не сливался с акцентом) */ --danger: #f87171; /* type */ --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; /* radii */ --r-sm: 10px; --r: 12px; --r-lg: 16px; --r-pill: 999px; /* shadows */ --sh-card: 0 24px 60px -34px rgba(0, 0, 0, 0.7); --sh-cta: 0 12px 32px -12px var(--ac-glow); --sh-pop: 0 30px 70px -30px rgba(0, 0, 0, 0.85); /* layout */ --maxw: 1180px; --gutter: clamp(20px, 5vw, 24px); /* motion */ --dur: 180ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* z */ --z-nav: 50; --z-menu: 60; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; color-scheme: dark; -webkit-tap-highlight-color: transparent; scroll-padding-top: 80px; } body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--tx); background-color: var(--bg); background-image: radial-gradient(1100px 560px at 50% -12%, #0c1622, var(--bg)); background-repeat: no-repeat; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100dvh; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } :focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; } ::selection { background: rgba(245, 133, 26, 0.28); color: #fff; } /* ---------- Scrollbars ---------- */ * { scrollbar-width: thin; scrollbar-color: var(--bd-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bd-strong); border-radius: var(--r-pill); border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: #39424f; } .solve-mock__code::-webkit-scrollbar { height: 8px; } /* ---------- Layout primitives ---------- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(56px, 9vw, 104px); } .section--tight { padding-block: clamp(36px, 5vw, 64px); } .section + .section { position: relative; } .section + .section::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: linear-gradient(90deg, transparent, var(--bd-strong) 50%, transparent); } .center { text-align: center; } .stack > * + * { margin-top: 1rem; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ac); color: var(--ac-on); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 700; transition: top var(--dur) var(--ease); } .skip-link:focus { top: 12px; } /* ---------- Typography ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); } .eyebrow::before { content: ">"; color: var(--ac); font-weight: 700; } .eyebrow--intv { color: var(--intv); } .eyebrow--intv::before { content: ">"; color: var(--intv); } .eyebrow--you { color: var(--you); } .eyebrow--you::before { content: ">"; color: var(--you); } h1, h2, h3, h4 { font-family: var(--font-mono); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--tx); text-wrap: balance; } /* faster, predictable taps on touch devices for all interactive elements */ .btn, .nav__links a, .nav__mobile a, .nav__brand, .nav__burger, .footer a, .faq-item summary, .demo__toggle label, .price-card a { touch-action: manipulation; } .h1 { font-size: clamp(2.1rem, 5.4vw, 3.9rem); line-height: 1.04; letter-spacing: -0.03em; } .h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.12; } .h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); letter-spacing: -0.01em; line-height: 1.16; } .lead { font-size: clamp(1.02rem, 1.7vw, 1.22rem); line-height: 1.6; color: var(--mut); max-width: 60ch; } .muted { color: var(--mut); } .mono { font-family: var(--font-mono); } .measure { max-width: 65ch; } .fineprint { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--mut-2); } .section-head { max-width: 720px; } .section-head.center { margin-inline: auto; } .section-head .h1 { margin-top: 14px; } .section-head .h2 { margin-top: 12px; } .section-head .lead { margin-top: 16px; } .section-head.center .lead { margin-inline: auto; } .legal .h1 { margin-top: 14px; } /* ---------- Live pill (status badge) ---------- */ .pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border: 1px solid var(--ac-line); border-radius: var(--r-pill); background: var(--ac-soft); box-shadow: inset 0 0 12px rgba(245, 133, 26, 0.05), 0 1px 0 rgba(0, 0, 0, 0.25); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--mut); } .pill .dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); } .pill .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ac); opacity: 0.5; transform-origin: center; } @media (prefers-reduced-motion: no-preference) { /* compositor-only pulse: transform + opacity, no per-frame repaint */ .pill .dot::after { animation: pulse 2s var(--ease) infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.5; } 70%, 100% { transform: scale(2.6); opacity: 0; } } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 13px 22px; border-radius: 11px; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn:active { transform: translateY(1px); } .btn--primary { color: var(--ac-on); background: var(--ac); font-weight: 700; box-shadow: var(--sh-cta); } .btn--primary:hover { background: var(--ac-hover); transform: translateY(-1px); box-shadow: 0 16px 38px -12px var(--ac-glow); } .btn--primary:active { transform: translateY(1px); box-shadow: 0 8px 20px -14px var(--ac-glow); } .btn--ghost { color: var(--tx); background: rgba(255,255,255,0.02); border: 1px solid var(--bd-strong); } .btn--ghost:hover { background: var(--panel-2); border-color: #39424f; } .btn--block { width: 100%; } .btn svg { width: 17px; height: 17px; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } .btn-row.center { justify-content: center; } /* ---------- Hotkey chip ---------- */ .kbd { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--tx); padding: 4px 9px; min-height: 26px; border: 1px solid var(--bd-strong); border-bottom-width: 2px; border-radius: 8px; background: var(--panel-2); white-space: nowrap; } /* ---------- Card ---------- */ .card { border: 1px solid var(--bd); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--panel-2), var(--panel)); padding: clamp(20px, 3vw, 28px); box-shadow: var(--sh-card), inset 0 1px 0 var(--hl-top); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .card:hover { transform: translateY(-3px); border-color: var(--bd-strong); box-shadow: var(--sh-pop), inset 0 1px 0 var(--hl-top); } .card--quiet { background: var(--panel); box-shadow: none; } .card__ic { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--bd-strong); background: var(--ac-soft); color: var(--ac); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .card:hover .card__ic { border-color: var(--ac-line); box-shadow: 0 0 18px -6px var(--ac-glow); } .card__ic svg { width: 21px; height: 21px; } .card .h3 { margin-top: 18px; } .card p { margin-top: 10px; color: var(--mut); } /* ---------- Grids ---------- */ .grid { display: grid; gap: 18px; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; } /* ---------- Steps timeline (real sequence -> transcript style) ---------- */ .steps { display: grid; gap: 0; margin-left: 8px; position: relative; } .steps::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 6px; width: 1px; background: linear-gradient(180deg, var(--bd-strong), var(--bd) 20%, var(--bd) 80%, transparent); } .step { position: relative; padding: 0 0 36px 28px; } .step:last-child { padding-bottom: 0; } .step::before { content: ""; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--bd-strong); } .step__time { font-family: var(--font-mono); font-size: 12px; color: var(--mut-2); letter-spacing: 0.04em; } .step .h3 { margin-top: 7px; } .step p { margin-top: 8px; color: var(--mut); max-width: 56ch; } /* ---------- Transcript bubble ---------- */ .transcript { display: grid; gap: 10px; } .bubble { border: 1px solid var(--bd); border-radius: var(--r); background: var(--panel); padding: 11px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } .bubble__who { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; } .bubble__txt { margin-top: 3px; font-size: 14.5px; color: var(--tx); } .bubble--intv { border-color: rgba(96,165,250,0.28); background: linear-gradient(180deg, rgba(96,165,250,0.06), var(--panel)); } .bubble--intv .bubble__who { color: var(--intv); } .bubble--you { border-color: rgba(52,211,153,0.30); background: linear-gradient(180deg, rgba(52,211,153,0.06), var(--panel)); } .bubble--you .bubble__who { color: var(--you); } /* ---------- Solution mock (faithful to the real single-column «Решение») ---------- */ .solve-mock { border: 1px solid var(--bd); border-radius: var(--r-lg); background: #0a0e14; overflow: hidden; box-shadow: var(--sh-card), inset 0 1px 0 var(--hl-top); } .solve-mock__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--bd); background: linear-gradient(180deg, var(--panel-2), #0a0e14); } .solve-mock__bar .tl { width: 11px; height: 11px; border-radius: 50%; background: var(--bd-strong); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45); } .solve-mock__bar .lbl { margin-left: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--mut-2); } .solve-mock__body { padding: 14px 16px; } .solve-mock__p { font-size: 13.5px; color: var(--mut); line-height: 1.6; margin: 0 0 12px; } .solve-mock__p:last-child { margin: 12px 0 0; } .solve-mock__p b { color: var(--tx); font-weight: 600; } .solve-mock__code { border: 1px solid var(--bd); border-radius: var(--r-sm); background: #070b10; padding: 8px 0; overflow-x: auto; box-shadow: inset 0 2px 10px -6px rgba(0,0,0,0.7), inset 0 1px 0 rgba(0,0,0,0.4); } .solve-mock__code .cl { display: flex; font-family: var(--font-mono); font-size: 13px; line-height: 1.75; white-space: pre; } .solve-mock__code .ln { flex: 0 0 auto; width: 30px; text-align: right; padding-right: 12px; color: var(--mut-2); opacity: 0.55; user-select: none; border-right: 1px solid var(--bd); } .solve-mock__code .lt { color: #cdd6e4; } .solve-mock__code .tok { color: var(--intv); } .solve-mock__code .tok-y { color: var(--you); } .solve-mock__code .tok-g { color: var(--ac); } /* ---------- Pricing ---------- */ .price-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); align-items: start; } .price-card { position: relative; border: 1px solid var(--bd); border-radius: var(--r-lg); background: var(--panel); padding: 28px 24px; display: flex; flex-direction: column; box-shadow: var(--sh-card); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .price-card:hover { transform: translateY(-3px); border-color: var(--bd-strong); } .price-card.is-popular { border-color: var(--ac-line); background: radial-gradient(120% 75% at 50% -8%, rgba(245,133,26,0.12), transparent 58%), linear-gradient(180deg, rgba(245,133,26,0.05), var(--panel)); box-shadow: var(--sh-pop), inset 0 1px 0 rgba(245,133,26,0.18); } .price-card.is-popular:hover { border-color: var(--ac-line); box-shadow: var(--sh-pop), inset 0 1px 0 rgba(245,133,26,0.18); } .price-card__badge { position: absolute; top: -11px; left: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ac-on); background: var(--ac); padding: 4px 10px; border-radius: var(--r-pill); box-shadow: 0 6px 16px -6px var(--ac-glow); } .price-card__name { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.02em; color: var(--mut); } .price-card__price { margin-top: 12px; font-family: var(--font-mono); font-weight: 700; font-size: 2.2rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .price-card__price .per { font-size: 0.95rem; font-weight: 500; color: var(--mut-2); letter-spacing: 0; } .price-card__alt { margin-top: 4px; font-size: 13px; color: var(--mut-2); min-height: 18px; } .price-card__feats { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 10px; border-top: 1px solid var(--bd); padding-top: 22px; } .price-card__feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--tx); } .price-card__feats svg { width: 17px; height: 17px; color: var(--ac); flex: 0 0 auto; margin-top: 2px; } .price-card .btn { margin-top: auto; } /* ---------- FAQ accordion ---------- */ .faq { display: grid; gap: 10px; } .faq-item { border: 1px solid var(--bd); border-radius: var(--r); background: var(--panel); overflow: hidden; } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; font-weight: 600; list-style: none; transition: background var(--dur) var(--ease); } .faq-item summary:hover { background: var(--panel-2); } .faq-item summary:hover .chev { color: var(--tx); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .chev { flex: 0 0 auto; width: 18px; height: 18px; color: var(--mut); transition: transform var(--dur) var(--ease); } .faq-item[open] summary .chev { transform: rotate(180deg); } .faq-item .faq-body { padding: 0 20px 18px; color: var(--mut); max-width: 70ch; } .faq-item .faq-body a { color: var(--ac); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--ac-line); transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease); } .faq-item .faq-body a:hover { color: var(--ac-hover); text-decoration-color: var(--ac); } /* ---------- Compatibility table (honesty) ---------- */ .compat { display: grid; gap: 10px; } .compat__row { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--bd); border-radius: var(--r); background: var(--panel); } .compat__row .mk { font-family: var(--font-mono); font-weight: 700; } .compat__row.ok .mk { color: var(--ac); } .compat__row.no .mk { color: var(--danger); } .compat__row.warn .mk { color: var(--you); } .compat__row b { color: var(--tx); } .compat__row p { color: var(--mut); font-size: 14.5px; margin-top: 3px; } /* ---------- Legal / long-form prose ---------- */ .legal { max-width: 780px; margin-inline: auto; } .legal__meta { margin-top: 12px; font-family: var(--font-mono); font-size: 12.5px; color: var(--mut-2); } .legal__toc { margin: 30px 0 8px; padding: 18px 22px; border: 1px solid var(--bd); border-radius: var(--r); background: var(--panel); } .legal__toc strong { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mut-2); font-weight: 500; } .legal__toc ol { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 7px; } .legal__toc a { color: var(--mut); text-decoration: none; font-size: 14.5px; } .legal__toc a:hover { color: var(--tx); } .legal h2 { font-size: clamp(1.18rem, 2.2vw, 1.5rem); margin-top: 44px; scroll-margin-top: 84px; } .legal h3 { font-size: 1.08rem; margin-top: 24px; } .legal p, .legal li { color: var(--mut); margin-top: 12px; line-height: 1.7; } .legal p strong, .legal li strong { color: var(--tx); font-weight: 600; } .legal ul, .legal ol.list { margin-top: 12px; padding-left: 22px; display: grid; gap: 8px; } .legal a { color: var(--ac); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--ac-line); transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease); } .legal a:hover { color: var(--ac-hover); text-decoration-color: var(--ac); } .legal .note { margin-top: 26px; padding: 16px 18px; border: 1px solid var(--bd-strong); border-radius: var(--r); background: var(--panel-2); } .legal .note p { color: var(--mut); font-size: 14.5px; margin-top: 0; } .legal .upd { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--bd); font-size: 13px; color: var(--mut-2); } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: var(--z-nav); border-bottom: 1px solid var(--bd); background: rgba(7,9,13,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .nav__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 64px; } .nav__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; } .nav__brand img { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--bd); } .nav__brand span { font-family: var(--font-mono); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; } .nav__links { display: flex; align-items: center; gap: 2px; } .nav__links a { position: relative; padding: 8px 12px; font-size: 14px; color: var(--mut); text-decoration: none; border-radius: 8px; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .nav__links a:hover { color: var(--tx); background: rgba(255, 255, 255, 0.04); } .nav__links a[aria-current="page"] { color: var(--tx); } .nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--ac); } .nav__cta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .nav__lang { display: inline-flex; align-items: center; padding: 6px 10px; font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--mut); text-decoration: none; border: 1px solid var(--bd-strong); border-radius: 8px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .nav__lang:hover { color: var(--tx); border-color: var(--ac); background: rgba(255, 255, 255, 0.04); } .nav__burger { display: none; width: 44px; height: 44px; border: 1px solid var(--bd-strong); border-radius: 10px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .nav__burger span { display: block; width: 18px; height: 1.6px; background: var(--tx); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .nav__mobile { display: none; border-top: 1px solid var(--bd); background: rgba(10,14,20,0.98); } .nav__mobile a { display: block; padding: 14px 4px; font-size: 16px; color: var(--tx); text-decoration: none; border-bottom: 1px solid var(--bd); } .nav__mobile a:last-child { border-bottom: 0; } .nav__mobile a[aria-current="page"] { color: var(--ac); } .nav.is-open .nav__mobile { display: block; } .nav.is-open .nav__burger span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); } .nav.is-open .nav__burger span:nth-child(2) { opacity: 0; } .nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); } /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--bd); margin-top: 40px; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-block: 48px; } .footer__brand img { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--bd); } .footer__brand p { margin-top: 12px; color: var(--mut-2); font-size: 14px; max-width: 36ch; } .footer h3 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut-2); font-weight: 500; } .footer ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; } .footer a { color: var(--mut); text-decoration: none; font-size: 14.5px; transition: color var(--dur) var(--ease); } .footer a:hover { color: var(--tx); } .footer__bar { border-top: 1px solid var(--bd); padding-block: 20px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; color: var(--mut-2); font-size: 13px; } /* ---------- Hero ---------- */ .hero { padding-top: clamp(48px, 8vw, 92px); position: relative; } .hero::before { content: ""; position: absolute; left: 50%; top: -32px; transform: translateX(-50%); width: min(880px, 94%); height: 440px; z-index: -1; pointer-events: none; background: radial-gradient(50% 60% at 50% 28%, rgba(245, 133, 26, 0.07), transparent 70%); } .hero__head { text-align: center; max-width: 880px; margin-inline: auto; } .hero .h1 { margin-top: 24px; } .hero .lead { margin: 28px auto 0; } .hero .btn-row { margin-top: 32px; } .hero .fineprint { margin-top: 18px; } /* signature: "share vs you" demo frame */ .demo { margin-top: clamp(40px, 6vw, 64px); position: relative; } .demo::before { content: ""; position: absolute; inset: -10% -6% -14%; z-index: -1; pointer-events: none; background: radial-gradient(60% 55% at 50% 28%, rgba(22, 34, 52, 0.6), transparent 72%); } .demo__frame { position: relative; border: 1px solid var(--bd-strong); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--sh-pop), 0 0 0 1px rgba(255, 255, 255, 0.02), inset 0 1px 0 var(--hl-top); overflow: hidden; } .demo__bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--bd); background: var(--panel-2); } .demo__bar .tl { width: 11px; height: 11px; border-radius: 50%; background: var(--bd-strong); } .demo__bar .tag { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--mut-2); display: inline-flex; align-items: center; gap: 7px; } .demo__stage { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(120% 120% at 72% -10%, #0f1620, #070b11); } /* the overlay the candidate sees */ .demo__overlay { position: absolute; right: 3.2%; top: 8%; width: min(46%, 420px); border: 1px solid rgba(96, 165, 250, 0.22); border-radius: var(--r); background: rgba(12,16,22,0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--sh-pop), 0 0 0 1px rgba(96, 165, 250, 0.10), 0 18px 40px -16px rgba(96, 165, 250, 0.22); padding: 12px; transition: opacity var(--dur) var(--ease); } .ov-tabs { display: flex; gap: 4px; margin-bottom: 10px; } .ov-tabs span { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 7px; border-radius: 6px; color: var(--mut-2); border: 1px solid var(--bd); } .ov-tabs span.on { color: var(--ac-on); background: var(--ac); border-color: var(--ac); } /* CSS-only toggle via hidden radios + :has(); no-JS fallback keeps overlay visible */ .demo__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .demo:has(#demo-intv:checked) .demo__overlay { opacity: 0; } .demo__toggle { display: inline-flex; margin: 18px auto 0; border: 1px solid var(--bd); border-radius: var(--r-pill); padding: 4px; background: var(--panel); gap: 4px; } .demo__toggle label { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 13px; padding: 8px 16px; min-height: 36px; border-radius: var(--r-pill); color: var(--mut); cursor: pointer; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .demo__toggle label:hover { color: var(--tx); } .demo:has(#demo-you:checked) label[for="demo-you"], .demo:has(#demo-intv:checked) label[for="demo-intv"] { color: var(--tx); background: var(--panel-3); } .demo__radio:focus-visible + label { outline: 2px solid var(--ac); outline-offset: 3px; } .demo__cap { text-align: center; margin-top: 12px; } /* ---------- Video-call window mock (hero demo) ---------- */ .demo__bar .url { margin-left: 6px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); background: rgba(7,9,13,0.55); border: 1px solid var(--bd); font-family: var(--font-mono); font-size: 11px; color: var(--mut); max-width: 46%; overflow: hidden; } .demo__bar .url svg { width: 11px; height: 11px; color: var(--you); flex: 0 0 auto; } .call { position: absolute; inset: 0; } .call__share { position: absolute; inset: 0; display: flex; flex-direction: column; } .call__sbar { display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--mut-2); font-family: var(--font-mono); font-size: 11.5px; } .call__sbar svg { width: 13px; height: 13px; color: var(--you); } .call__code { flex: 1; padding: 13px 18px; font-family: var(--font-mono); font-size: clamp(10px, 1.16vw, 13.5px); line-height: 1.85; color: #aeb9c9; overflow: hidden; } .call__code .c { display: block; white-space: pre; } .call__code .k { color: var(--intv); } .call__code .s { color: var(--you); } .call__code .m { color: var(--mut-2); } .call__film { position: absolute; left: 14px; bottom: 58px; display: flex; gap: 10px; } .call__tile { position: relative; width: clamp(72px, 10.5vw, 112px); aspect-ratio: 4 / 3; border-radius: 10px; border: 1px solid var(--bd-strong); overflow: hidden; display: grid; place-items: center; box-shadow: var(--sh-card); } .call__tile--a { background: radial-gradient(120% 120% at 32% 22%, #2c3854, #121826); } .call__tile--y { background: radial-gradient(120% 120% at 32% 22%, #143228, #0e1a15); } .call__tile--a.spk { outline: 2px solid var(--you); outline-offset: -2px; } .call__mono { font-family: var(--font-mono); font-weight: 700; font-size: clamp(15px, 2.3vw, 23px); color: #d4dceb; } .call__nm { position: absolute; left: 6px; bottom: 5px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,0.55); font-family: var(--font-mono); font-size: 9.5px; color: #e6e9ee; white-space: nowrap; } .call__nm svg { width: 10px; height: 10px; color: var(--you); } .call__ctl { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 7px; padding: 6px; border-radius: var(--r-pill); background: rgba(7,9,13,0.6); border: 1px solid var(--bd); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .call__ctl i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); color: var(--tx); } .call__ctl i svg { width: 15px; height: 15px; } .call__ctl i.act { background: var(--ac); color: var(--ac-on); } .call__ctl i.end { background: var(--danger); color: #2a0b0b; width: 42px; border-radius: var(--r-pill); } /* ---------- Визирь overlay content (hero) ---------- */ .ov-head { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; } .ov-rec { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-weight: 700; font-size: 11.5px; color: var(--tx); } .ov-rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--you); } .ov-more { margin-left: auto; color: var(--mut-2); letter-spacing: 2px; font-weight: 700; } .ov-hint { margin-top: 10px; padding: 9px 11px; border: 1px solid var(--ac-line); border-radius: 10px; background: var(--ac-soft); } .ov-hint b { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ac); font-weight: 700; } .ov-hint p { margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--tx); } /* ---------- Live "Решение" panel with line navigation (features) ---------- */ .codepanel { position: relative; } .codepanel .nav-badge { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; flex-direction: column; gap: 6px; } .scan { position: absolute; left: 1px; right: 1px; top: 8px; height: 1.75em; font-size: 13px; border-radius: 4px; background: rgba(245,133,26,0.12); box-shadow: inset 2px 0 0 var(--ac); pointer-events: none; z-index: 0; animation: scan 9s var(--ease) infinite; } .solve-mock__code .cl { position: relative; z-index: 1; } @keyframes scan { 0%, 9% { transform: translateY(0); } 11%, 20% { transform: translateY(1.75em); } 22%, 31% { transform: translateY(3.5em); } 33%, 42% { transform: translateY(5.25em); } 44%, 53% { transform: translateY(7em); } 55%, 64% { transform: translateY(8.75em); } 66%, 75% { transform: translateY(10.5em); } 77%, 100% { transform: translateY(0); } } .navhint { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 12px; border: 1px solid var(--bd-strong); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 12px; color: var(--mut); } .navhint .kbd { animation: keytap 9s var(--ease) infinite; } @keyframes keytap { 0%,8%,20%,100% { transform: translateY(0); border-bottom-width: 2px; } 4%,12% { transform: translateY(1px); border-bottom-width: 1px; } } /* ---------- Ambient animated background (site-wide) ---------- */ .aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } .aurora b { position: absolute; display: block; border-radius: 50%; filter: blur(72px); will-change: transform; } .aurora .b1 { width: 48vw; height: 48vw; left: -10vw; top: -8vw; background: radial-gradient(circle, rgba(245,133,26,0.16), transparent 62%); animation: aur1 28s ease-in-out infinite alternate; } .aurora .b2 { width: 42vw; height: 42vw; right: -8vw; top: 4vw; background: radial-gradient(circle, rgba(60,98,150,0.20), transparent 60%); animation: aur2 34s ease-in-out infinite alternate; } .aurora .b3 { width: 40vw; height: 40vw; left: 32vw; top: 46vh; background: radial-gradient(circle, rgba(245,133,26,0.07), transparent 62%); animation: aur3 40s ease-in-out infinite alternate; } @keyframes aur1 { to { transform: translate3d(7vw, 6vh, 0) scale(1.16); } } @keyframes aur2 { to { transform: translate3d(-6vw, 9vh, 0) scale(1.1); } } @keyframes aur3 { to { transform: translate3d(6vw, -8vh, 0) scale(1.22); } } /* ---------- Animated "how it works" overlay ---------- */ .howdemo { display: grid; place-items: center; min-width: 0; } .vzlive { width: 100%; max-width: 508px; min-width: 0; border: 1px solid var(--bd-strong); border-radius: var(--r-lg); background: rgba(12,16,22,0.94); box-shadow: var(--sh-pop), 0 0 0 1px rgba(96,165,250,0.08), 0 26px 60px -30px rgba(96,165,250,0.20); padding: 14px; overflow: hidden; } .vzlive .ov-tabs { margin-bottom: 0; margin-top: 11px; } .vzlive .ov-tabs span { transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .ov-live { display: inline-flex; align-items: center; gap: 5px; margin-left: 3px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .02em; color: var(--mut-2); } .ov-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--you); } @media (prefers-reduced-motion: no-preference) { .ov-live i { animation: recblink 1.6s var(--ease) infinite; } } @keyframes recblink { 0%, 100% { opacity: 1; } 50% { opacity: .28; } } .vzlive__body { margin-top: 12px; min-height: 244px; display: flex; flex-direction: column; justify-content: center; } /* ---------- Feature windows block (страница «Возможности») ---------- */ .winrows { margin-top: 40px; display: flex; flex-direction: column; gap: clamp(30px, 5vw, 56px); } .winrows .split { align-items: center; } .winrows .split:nth-child(even) .howdemo { order: 2; } @media (max-width: 820px) { .winrows .split:nth-child(even) .howdemo { order: 0; } } .can { margin-top: 22px; } .can__h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut-2); } .can__l { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; } .can__l li { display: flex; gap: 12px; align-items: baseline; font-size: 14.5px; line-height: 1.5; color: var(--tx); } .can__l .keys { flex: 0 0 auto; display: inline-flex; gap: 4px; align-items: center; } .can__l .can__d { color: var(--mut); } .ov-foot { display: flex; gap: 15px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--bd); font-family: var(--font-mono); font-size: 10.5px; color: var(--mut-2); } .ov-foot b { color: var(--tx); font-weight: 600; margin-right: 4px; } .vzapproach { font-size: 12.5px; color: var(--mut); line-height: 1.55; margin-bottom: 10px; } .vzapproach b { color: var(--tx); font-weight: 600; } .vzpane { display: none; min-width: 0; } .vzpane.on { display: block; } @media (prefers-reduced-motion: no-preference) { .vzpane.on { animation: paneIn .34s var(--ease); } } @keyframes paneIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .vzpane .bubble { opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); } .vzpane .bubble.show { opacity: 1; transform: none; } .vztyping { display: inline-flex; gap: 5px; padding: 9px 2px; } .vztyping i { width: 6px; height: 6px; border-radius: 50%; background: var(--mut); } @media (prefers-reduced-motion: no-preference) { .vztyping i { animation: tdot 1.2s var(--ease) infinite; } .vztyping i:nth-child(2) { animation-delay: .15s; } .vztyping i:nth-child(3) { animation-delay: .3s; } } @keyframes tdot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .vztype { font-size: 13px; line-height: 1.62; color: var(--tx); min-height: 1.62em; } .vztype .hl { color: var(--ac); } .vztype.vzcursor::after { content: "▍"; color: var(--ac); margin-left: 1px; } @media (prefers-reduced-motion: no-preference) { .vztype.vzcursor::after { animation: caret 1s steps(1) infinite; } } @keyframes caret { 50% { opacity: 0; } } .vzgen { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 9px; font-family: var(--font-mono); font-size: 11px; color: var(--ac); } .vzgen .kbd { font-size: 11px; min-height: 22px; padding: 2px 6px; } .vzcode .cl { opacity: 0; transition: opacity .22s var(--ease); } .vzcode .cl.show { opacity: 1; } .vzcode .scan { opacity: 0; transition: opacity .3s var(--ease); } .step.is-active::before { background: var(--ac); box-shadow: 0 0 0 4px var(--bg), 0 0 12px 2px var(--ac-glow); } .step.is-active .h3 { color: #fff; } .step.is-active .step__time { color: var(--ac); } .step { transition: opacity var(--dur) var(--ease); } /* ---------- Companion phone mock ---------- */ .phone { width: min(310px, 86%); aspect-ratio: 9 / 19; margin-inline: auto; position: relative; border-radius: 44px; padding: 11px; background: linear-gradient(165deg, #171d27, #0a0e14); border: 1px solid var(--bd-strong); box-shadow: var(--sh-pop), inset 0 1px 0 var(--hl-top); } .phone::before { content: ""; position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 92px; height: 7px; border-radius: 99px; background: #04060a; z-index: 2; } .phone__screen { height: 100%; border-radius: 31px; background: #07090d; border: 1px solid var(--bd); overflow: hidden; padding: 28px 13px 20px; display: flex; flex-direction: column; } .phone__hi { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); width: 100px; height: 4px; border-radius: 99px; background: rgba(255,255,255,0.16); } .phone .ov-tabs { margin: 11px 0 0; gap: 3px; } .phone .ov-tabs span { font-size: 8.5px; padding: 3px 5px; } .phone .transcript { margin-top: 12px; } .phone__foot { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; color: var(--mut-2); } .phone__foot svg { width: 13px; height: 13px; color: var(--you); } /* ---------- Logo / trust strip ---------- */ .trust { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: center; color: var(--mut-2); position: relative; padding: 20px 0; } .trust::before, .trust::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--bd) 15%, var(--bd) 85%, transparent); } .trust::before { top: 0; } .trust::after { bottom: 0; } .trust span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; } .trust svg { width: 16px; height: 16px; color: var(--ac); } /* ---------- CTA band ---------- */ .cta-band { border: 1px solid var(--ac-line); border-radius: var(--r-lg); background: radial-gradient(680px 220px at 50% -30%, var(--ac-soft), transparent 70%), linear-gradient(180deg, var(--panel-2), var(--panel)); padding: clamp(32px, 5vw, 56px); text-align: center; box-shadow: inset 0 1px 0 var(--hl-top); } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .nav__links, .nav__cta { display: none; } .nav__burger { display: flex; } .split { grid-template-columns: 1fr; } .price-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } .grid--3, .grid--2 { grid-template-columns: 1fr; } .demo__overlay { width: 54%; } .footer__grid { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 560px) { .demo__stage { aspect-ratio: auto; } .call { position: relative; aspect-ratio: 16 / 9; } .demo__overlay { position: static; width: auto; margin: 10px; box-shadow: none; } .call__code { font-size: 11px; line-height: 1.7; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }