/* ==========================================================================
   VECTRA: extensions on top of the design kit (kit.css).
   kit.css is used as is. Everything here is built from its tokens (var(--...)), no new colours.
   Order: base, header, hero, home sections, inner pages, footer, mobile bar, motion.
   ========================================================================== */

/* No shadows anywhere: depth comes from thin lines only (the kit tokens are switched off, hover glows too). */
:root, [data-theme='dark'], .ink { --shadow: none; --shadow-lg: none; }
.btn-accent:hover, .btn-qb:hover { box-shadow: none; }

/* Instrument Serif has no Cyrillic. The second family draws the Russian letters of the serif accent word, glyph by glyph. */
:root { --serif: 'Instrument Serif', 'Playfair Display', Georgia, serif; }
.serif { font-size: 1.04em; }
.ink { --dither: #4b4b4b; }

/* ── Base ── */
/* the browser text cursor (caret browsing) is not drawn on the page; form fields keep theirs */
body { caret-color: transparent; }
input, textarea, select, [contenteditable] { caret-color: auto; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mt-22 { margin-top: 22px; }
.mt-24 { margin-top: 24px; }
.mt-26 { margin-top: 26px; }
.mt-30 { margin-top: 30px; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 300; padding: 10px 16px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; transition: top 0.2s var(--ease); }
.skip:focus { top: 12px; }
/* the dot before section labels: round, one colour, no halo */
.eyebrow::before { border-radius: 50%; box-shadow: none; }
.ico { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mk { fill: currentColor; stroke: none; }
/* the VECTRA mark draws itself again and again everywhere except the logo, which draws once on load.
   The path sits in the sprite, so the drawing is set on the svg and passed down to it. */
.mk { stroke: currentColor; stroke-width: 30; stroke-linejoin: round; stroke-dasharray: 100; animation: mk-loop 5s var(--ease) infinite; }
.vbadge-mark .mk { animation-delay: 0.9s; }
.doc-wm, .card-wm { animation-duration: 8s; }
@keyframes mk-loop {
  0% { stroke-dashoffset: 100; fill-opacity: 0; }
  35% { stroke-dashoffset: 0; fill-opacity: 0; }
  50%, 80% { stroke-dashoffset: 0; fill-opacity: 1; }
  90% { stroke-dashoffset: 0; fill-opacity: 0; }
  100% { stroke-dashoffset: -100; fill-opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .mk { stroke: none; } }
html:not(.js) .reveal { opacity: 1; transform: none; }

.section-head .end { justify-self: end; }
@media (max-width: 860px) { .section-head .end { justify-self: start; } }

/* ── Header: a flat full-width bar instead of the capsule ── */
.site-header { padding-top: 0; background: var(--glass); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border-bottom: 1px solid var(--line); }
.nav { height: 73px; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; border-radius: 0; box-shadow: none; }
.mobile-menu { margin-top: 0; padding: 6px 0 16px; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }

/* ── Header: brand ── */
.brand-mark svg { width: 17px; height: 13px; }
.brand-mark path { fill: currentColor; stroke: currentColor; stroke-width: 30; stroke-linejoin: round; }
.js .brand-mark path { fill-opacity: 0; stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 1.1s var(--ease) 0.1s forwards, fillin 0.5s ease 1.05s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fillin { to { fill-opacity: 1; } }
.brand-text { display: block; line-height: 1; }
.brand-wm { width: 88px; height: 10.2px; fill: currentColor; display: block; }
.brand-text small { margin-top: 5px; }
.nav-cta .ico { width: 16px; height: 16px; }
.nav-actions { gap: 8px; }
/* the menu stands in the middle of the page, not in whatever room is left between the logo and the buttons */
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px; }
.nav .brand { grid-column: 1; justify-self: start; }
.nav-links { grid-column: 2; margin-inline: 0; }
.nav-actions { grid-column: 3; justify-self: end; margin-left: 0; }
.mobile-menu .btn-ghost { background: transparent; }
.nav-links a, .mobile-menu a:not(.btn) { display: inline-flex; align-items: center; gap: 8px; }
.nav-links .ico, .mobile-menu a:not(.btn) .ico { width: 17px; height: 17px; color: var(--muted); transition: color 0.2s; }
.nav-links a:hover .ico, .nav-links a[aria-current='page'] .ico, .mobile-menu a:not(.btn):hover .ico { color: var(--accent-fg); }
.mobile-menu a:not(.btn) { display: flex; gap: 12px; }
@media (max-width: 1140px) { .nav-links { display: flex; } .nav .nav-cta { display: inline-flex; } .menu-btn { display: none; } }
/* four menu items and two buttons need room, so the menu folds into the button a little earlier */
@media (max-width: 1000px) { .nav-links, .nav .nav-cta { display: none; } .menu-btn { display: inline-flex; } }
.menu-btn .i-close { display: none; }
.menu-btn[aria-expanded='true'] .i-menu { display: none; }
.menu-btn[aria-expanded='true'] .i-close { display: block; }

/* ── Hero ── */
.hero .dither, .page-hero .dither, .cta-band .dither { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
/* the smoke is quiet behind the text on the left and full on the right, so the text and buttons stay readable */
.hero .dither { opacity: 0.32; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.35) 45%, #000 85%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.35) 45%, #000 85%); }
.hero .lead { color: color-mix(in srgb, var(--fg) 84%, transparent); text-wrap: balance; }
.hero .btn-ghost { --btn-bg: var(--card); --btn-border: var(--line-2); }
.hero-cta .btn .ico { width: 18px; height: 18px; }

/* first screen: the promise, the buttons, and four situations the visitor can recognise at once */
.ping { position: relative; width: 8px; height: 8px; display: inline-block; flex: none; }
.ping::before, .ping::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); }
.ping::before { opacity: 0.6; animation: ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: 0.6; } 80%, 100% { transform: scale(2.7); opacity: 0; } }
/* the first screen fills the whole screen on every device, the rest of the page is below it */
.hero { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
/* no grid behind the first screen; its lower part dissolves into the next section, so there is no hard edge */
.hero::before { display: none; }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: 0; pointer-events: none; background: linear-gradient(180deg, transparent, var(--bg)); }
.hero-inner { z-index: 1; }
.hero-inner.solo { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); align-items: center; gap: clamp(36px, 4.5vw, 56px); margin-block: auto; padding-block: clamp(48px, 6vw, 88px) clamp(104px, 11vw, 132px); }
@media (max-height: 800px) { .hero-inner.solo { padding-block: 24px 84px; } }
@media (max-width: 960px) { .hero-inner.solo { grid-template-columns: minmax(0, 1fr); } }

/* chat in the first screen */
.chat { display: flex; flex-direction: column; height: min(540px, 70vh); min-height: 440px; border-radius: 24px; background: var(--glass); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border: 1px solid var(--line-2); overflow: hidden; color: var(--fg); }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.chat-ava { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--accent); color: var(--on-accent); }
.chat-ava .ico { width: 20px; height: 15px; }
.chat-head b { display: block; font-size: 0.98rem; font-weight: 600; letter-spacing: -0.01em; }
.chat-head div > span { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 0.78rem; color: var(--muted); }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px; scrollbar-width: thin; }
.msg { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-bot { align-self: flex-start; background: var(--card-2); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
/* cookie and consent notice: bottom left on computers, above the chat button on phones */
.cookie { position: fixed; z-index: 65; left: clamp(12px, 2.4vw, 20px); bottom: calc(clamp(12px, 2.4vw, 20px) + env(safe-area-inset-bottom, 0px)); max-width: 540px; display: flex; align-items: center; gap: 16px; padding: 14px 14px 14px 18px; border-radius: 18px; background: var(--glass); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border: 1px solid var(--line-2); color: var(--fg-2); font-size: 0.84rem; line-height: 1.45; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.45s var(--ease); }
.cookie.show { opacity: 1; transform: none; pointer-events: auto; }
.cookie a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.cookie .btn { flex: none; }
@media (max-width: 640px) { .cookie { left: 12px; right: 12px; max-width: none; bottom: calc(132px + env(safe-area-inset-bottom, 0px)); } }
.ftr-legal { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; }
.ftr-legal a:hover { color: var(--fg); }
.prose.legal-doc { max-width: 820px; }
.prose.legal-doc h2 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
.msg-system { align-self: center; max-width: 92%; padding: 2px 8px; font-size: 0.8rem; color: var(--muted); text-align: center; }
.msg-me { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 6px; }
.msg .btn { margin-top: 10px; }
.msg-typing { display: inline-flex; gap: 5px; padding: 15px 16px; }
.msg-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: typing 1.2s ease-in-out infinite; }
.msg-typing i:nth-child(2) { animation-delay: 0.15s; }
.msg-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.chat-chips button { height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg-2); font-size: 0.84rem; font-weight: 500; transition: border-color 0.2s, color 0.2s; }
.chat-chips button:hover { border-color: var(--accent); color: var(--fg); }
.chat-form { display: flex; align-items: flex-end; gap: 10px; padding: 12px 12px 12px 18px; border-top: 1px solid var(--line); transition: background 0.2s; }
.chat-form:focus-within { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.chat-input { flex: 1; min-height: 44px; max-height: 120px; padding: 11px 0; resize: none; background: none; border: 0; outline: none; color: var(--fg); font-size: 1rem; line-height: 1.4; }
.chat-input::placeholder { color: var(--muted); }
.chat-send { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent); color: var(--on-accent); transition: background 0.2s, transform 0.2s var(--ease); }
.chat-send:hover { background: var(--accent-2); transform: translateY(-1px); }
.chat-send .ico { width: 18px; height: 18px; }
@media (max-width: 960px) { .chat { height: 460px; min-height: 0; } }

/* scroll hint at the bottom of the first screen, fades out once the page is scrolled */
.cue-wrap { position: absolute; left: 0; right: 0; bottom: clamp(20px, 3.5vh, 36px); z-index: 2; display: flex; justify-content: center; pointer-events: none; transition: opacity 0.3s var(--ease); }
.cue-wrap.gone { opacity: 0; }
.cue-wrap.gone .scroll-cue { pointer-events: none; }
.scroll-cue { pointer-events: auto; display: block; padding: 8px; color: var(--muted); transition: color 0.2s; animation: cue-in 0.6s ease-out 1s both; }
.scroll-cue:hover { color: var(--accent-fg); }
.mouse { position: relative; display: block; width: 24px; height: 38px; border: 1.8px solid currentColor; border-radius: 12px; }
.mouse i { position: absolute; left: 50%; top: 7px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 0; } 25%, 75% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
@keyframes cue-in { from { opacity: 0; } }
/* "engineers online" sits right after the first line of the heading, just above its letters; the heading is as wide as that line */
.hero-head { display: flex; align-items: flex-start; gap: 20px; }
.hero-head h1 { flex: 0 1 auto; min-width: 0; }
.hero-head .live-pill { flex: none; margin-top: -20px; }
@media (max-width: 960px) { .hero-head { flex-direction: column; gap: 22px; } .hero-head .live-pill { order: -1; margin-top: 0; } }
.live-pill { display: inline-flex; align-items: center; gap: 9px; height: 28px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--glass); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-fg); white-space: nowrap; }
.hero-inner.solo h1 { max-width: 11.4em; margin: 0 0 22px; font-size: clamp(2.6rem, 4.6vw, 4.4rem); }
.hero-inner.solo .lead { max-width: 680px; }

/* verified badge, used in the hero, the report and the support card */
.vbadge { display: inline-flex; align-items: center; gap: 12px; padding: 9px 18px 9px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--fg); text-align: left; }
.vbadge-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; flex: none; }
.vbadge-mark .ico { width: 18px; height: 14px; }
.vbadge b { display: block; font-size: 0.92rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
.vbadge small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 0.68rem; color: var(--muted); letter-spacing: 0.02em; }


/* ── Home: services ── */
.svc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.svc-top .card-icon { margin: 0; }
.svc-card.wide .body { padding: clamp(24px, 3vw, 34px); }
.svc-card.wide h3 { font-size: 1.5rem; }
.svc-card .pkg { max-width: 18ch; }
.svc-card .price small { font-size: 0.8rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
/* the support card is light, like the closing "Напишите, что случилось" block: lime glow and the dither */
.svc-card.full { grid-column: span 12; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 48px); border-color: transparent; --dither: var(--on-inverse); }
.svc-card.full::after { content: ''; position: absolute; z-index: -1; width: 460px; height: 460px; border-radius: 50%; right: -140px; top: -220px; background: var(--accent); filter: blur(120px); opacity: 0.35; pointer-events: none; }
.svc-card.full .dither { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: 0.1; image-rendering: pixelated; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 70%); mask-image: linear-gradient(90deg, transparent 5%, #000 70%); }
.svc-card.full:hover { border-color: transparent; }
.full-main .eyebrow { color: color-mix(in srgb, var(--on-inverse) 65%, transparent); }
.full-main h3 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); letter-spacing: -0.04em; margin: 16px 0 22px; }
.full-main .check-list { gap: 12px; font-size: 1rem; color: color-mix(in srgb, var(--on-inverse) 85%, transparent); }
.full-side { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.full-price { font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 650; letter-spacing: -0.05em; line-height: 1; }
.full-price small { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: color-mix(in srgb, var(--on-inverse) 60%, transparent); }
@media (max-width: 900px) { .svc-card.full { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .full-side .btn { width: 100%; } }

/* ── Home: report ── */
.doc-mock { position: relative; overflow: hidden; max-width: 480px; }
.doc-mock > * { position: relative; }
.doc-wm { position: absolute !important; right: -34px; bottom: -22px; width: 220px; height: 167px; opacity: 0.06; color: var(--fg); }
/* the same mark as on the sample report, large and pale, fills the empty part of the lime "12 years" card */
.stat-mark { position: relative; overflow: hidden; isolation: isolate; }
.card-wm { position: absolute; z-index: -1; right: -48px; bottom: -36px; width: 300px; height: 227px; color: var(--on-accent); opacity: 0.1; pointer-events: none; }
@media (max-width: 640px) { .card-wm { width: 190px; height: 144px; right: -28px; bottom: -28px; } }
.doc-mock .top .mono { font-size: 1.05rem; margin-top: 8px; }
.doc-mock .line > span:first-child { color: var(--muted); flex: none; }
.doc-mock .line > span:last-child { text-align: right; }
.ok-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 0.75rem; font-weight: 600; padding: 5px 10px; border-radius: 99px; background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok); white-space: nowrap; }
.ok-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.doc-mock .vbadge { margin-top: 22px; width: 100%; }
.doc-mock .pay-methods span { letter-spacing: 0; }
.fineprint { border-left: 2px solid var(--accent); padding-left: 16px; margin-top: 26px; font-size: 0.92rem; color: var(--fg-2); max-width: 34em; }

/* ── Home: process ── */
.process { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: stretch; }
@media (max-width: 960px) { .process { grid-template-columns: minmax(0, 1fr); } }
/* the steps and the access card are the same height: both stretch to the row, the items are spread evenly */
.timeline { list-style: none; display: grid; grid-auto-rows: 1fr; }
.timeline li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 22px; padding-bottom: 30px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:not(:last-child)::before, .timeline li:not(:last-child)::after { content: ''; position: absolute; left: 23px; top: 52px; bottom: 4px; width: 2px; border-radius: 2px; }
.timeline li:not(:last-child)::before { background: var(--line-2); }
.timeline li:not(:last-child)::after { background: var(--accent); transform-origin: top; transition: transform 0.6s var(--ease); }
.timeline li:nth-child(2)::after { transition-delay: 0.35s; }
.timeline li:nth-child(3)::after { transition-delay: 0.7s; }
.timeline li:nth-child(4)::after { transition-delay: 1.05s; }
.timeline.reveal:not(.in) li::after { transform: scaleY(0); }
.timeline .num { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line-2); font-family: var(--mono); font-size: 0.82rem; color: var(--accent-fg); }
.timeline h3 { font-size: 1.2rem; margin: 3px 0 6px; }
.timeline p { color: var(--fg-2); font-size: 0.95rem; }
.access-card { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; background: var(--card); color: var(--fg); }
.access-card .card-icon { background: var(--accent); color: var(--on-accent); }
.acc-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.acc-head .card-icon { margin: 0; flex: none; }
.acc-head h3 { margin: 0; }
.access-card .sub { margin: 4px 0 0; font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.acc-list { list-style: none; display: grid; gap: 18px; flex: 1; align-content: space-between; }
.acc-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.acc-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--card-2); color: var(--accent-fg); }
.acc-ic .ico { width: 18px; height: 18px; }
.acc-list b { display: block; font-size: 0.98rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.acc-list li div > span { display: block; margin-top: 2px; font-size: 0.88rem; color: var(--fg-2); }

/* ── Home: trust ── */
.bento .stat-num { display: flex; align-items: baseline; gap: 2px; }
.bento .card .stat-num + p { margin-top: 14px; }
.stars { display: inline-flex; gap: 3px; margin-top: 14px; color: var(--accent-fg); }
.stars .ico { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.feature-dark .check-list li::before { background-color: var(--accent); }

.rev { margin-top: clamp(48px, 6vw, 80px); }
.rev-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 28px; margin-bottom: 26px; }
.rev-head .eyebrow { margin-bottom: 14px; }
.rev-note { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; color: var(--fg-2); }
.rev-note .ico { width: 18px; height: 18px; color: var(--accent-fg); }
.rev-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 0 6px; }
.rev-track::-webkit-scrollbar { display: none; }
.rev-track:focus-visible { outline-offset: 6px; }
.rev-card { flex: 0 0 min(430px, 86%); scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: clamp(20px, 2.2vw, 26px); }
@media (min-width: 961px) { .rev-card { flex-basis: calc((100% - 36px) / 3); } }
.rev-who-row { display: flex; align-items: center; gap: 12px; }
.rev-who-row .avatar { width: 44px; height: 44px; font-size: 0.9rem; }
.rev-who { min-width: 0; }
.rev-who b { display: block; font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-who span { display: block; font-family: var(--mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.02em; margin-top: 2px; }
.rev-order { font-size: 0.84rem; line-height: 1.45; color: var(--fg-2); border: 1px dashed var(--line-2); border-radius: var(--radius-xs); padding: 9px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev-order b { color: var(--accent-fg); font-weight: 600; }
.rev-q { margin: 0; font-size: 0.97rem; line-height: 1.65; color: var(--fg); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden; }
.rev-card.open .rev-q { display: block; -webkit-line-clamp: unset; line-clamp: unset; }
.rev-more { display: none; align-self: flex-start; font-size: 0.88rem; font-weight: 550; color: var(--accent-fg); text-decoration: none; }
.rev-card.long .rev-more { display: inline-block; }
.rev-bar { display: flex; align-items: center; gap: 20px; margin-top: 22px; }
.rev-all { flex: none; }
.rev-prog { position: relative; flex: 1; height: 3px; min-width: 80px; background: var(--line-2); border-radius: 3px; overflow: hidden; }
.rev-prog i { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: var(--accent); border-radius: 3px; transition: left 0.3s var(--ease), width 0.3s var(--ease); }
.rev-btns { display: flex; gap: 8px; flex: none; }
.rev-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line-2); color: var(--fg); transition: transform 0.25s var(--ease), border-color 0.2s, background 0.2s; }
.rev-btn:hover { border-color: var(--fg-2); transform: translateY(-1px); }
.rev-btn .ico { width: 18px; height: 18px; }
.rev-btn.prev .ico { transform: rotate(180deg); }
@media (max-width: 560px) { .rev-bar { flex-wrap: wrap; gap: 14px; } .rev-all { order: 3; width: 100%; } .rev-prog { order: 1; } .rev-btns { order: 2; } }

.award { display: flex; flex-direction: column; min-width: 0; }
.award.first { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--card)), var(--card) 58%); }
.award-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
.award-top .card-icon { margin: 0; }
.award-place { display: flex; align-items: baseline; gap: 10px; }
.award-place b { font-size: clamp(3rem, 4.4vw, 3.8rem); font-weight: 600; letter-spacing: -0.05em; line-height: 0.9; }
.award-place i { font-size: 1.5rem; color: var(--accent-fg); }
.award-body { flex: 1; padding-bottom: 20px; }
.award h4 { font-size: 1.15rem; line-height: 1.25; margin-bottom: 6px; letter-spacing: -0.02em; }
.award-sub { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.award-score { margin-top: 18px; font-size: 2rem; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.award-score small { font-size: 0.85rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.award-tag { display: inline-flex; margin-top: 12px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.02em; color: var(--accent-fg); border: 1px solid color-mix(in srgb, var(--accent-fg) 35%, transparent); border-radius: 99px; padding: 4px 11px; }
.award-more { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.award-more details { flex: 1; min-width: 0; }
.award-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.78rem; color: var(--accent-fg); }
.award-more summary::-webkit-details-marker { display: none; }
.award-more summary .ico { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.award-more details[open] summary .ico { transform: rotate(180deg); }
.award-src { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); transition: color 0.2s; flex: none; }
.award-src:hover { color: var(--fg); }
.award-src .ico { width: 13px; height: 13px; }
.aw-dl { display: grid; gap: 12px; margin: 12px 0 0; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.aw-dl dt { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.aw-dl dd { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--fg); }
.award-case { border-top: 1px dashed var(--line-2); padding-top: 16px; font-size: 0.9rem; color: var(--fg-2); }
.award-case b { color: var(--fg); font-weight: 600; }

/* ── Cards with a code cover (blog) ── */
.post-cover { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--radius); background: var(--bg); color: var(--fg); border: 1px solid var(--line-2); isolation: isolate; }
.post-cover::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(ellipse 90% 100% at 20% 10%, #000 20%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 90% 100% at 20% 10%, #000 20%, transparent 80%); }
.post-cover .card-icon { position: absolute; top: 18px; left: 18px; margin: 0; background: var(--accent); color: var(--on-accent); }
.post-word { position: absolute; left: 22px; bottom: 18px; font-family: var(--serif); font-style: italic; font-size: clamp(2rem, 3vw, 2.7rem); line-height: 1; color: var(--accent); letter-spacing: -0.01em; }
.post-card .post-cover { transition: border-color 0.25s, transform 0.35s var(--ease); }
.post-card:hover .post-cover { border-color: var(--fg-2); transform: translateY(-3px); }
.post-card.featured .post-cover { aspect-ratio: 16 / 10.5; }
.post-card .icon-link { margin-top: 4px; }

/* ── Inner pages ── */
/* the grid of the page heading runs behind the floating menu, like on the home page, so it does not start with a hard edge under it */
.page-hero { --dither: #4b4b4b; }
.page-hero .dither { position: absolute; opacity: 0.3; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }
.page-hero::before { display: none; }
.page-hero { margin-top: -74px; padding-top: calc(74px + clamp(48px, 8vw, 96px)); }
.page-hero .tag-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.page-hero h1 { max-width: 16em; }
.chip-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.chip-nav a { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 8px 0 18px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-2); font-size: 0.92rem; font-weight: 550; letter-spacing: -0.01em; transition: transform 0.25s var(--ease), border-color 0.2s; }
.chip-nav a:hover { transform: translateY(-1px); border-color: var(--fg-2); }
.chip-nav a i { font-style: normal; min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-family: var(--mono); font-size: 0.72rem; font-weight: 500; }
.group-head { margin-bottom: clamp(28px, 4vw, 44px); }
.group-head .eyebrow { margin-bottom: 16px; }
.group-head .lead { margin-top: 14px; max-width: 640px; }
.group + .group { margin-top: clamp(64px, 8vw, 104px); }
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.price-grid.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.price-grid.six > .price-card { grid-column: span 2; }
.price-grid.six > .price-card.half { grid-column: span 3; }
@media (max-width: 1040px) {
  .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-grid.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-grid.six > .price-card, .price-grid.six > .price-card.half { grid-column: auto; }
  .price-grid > .price-card.wide { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .price-grid, .price-grid.six { grid-template-columns: minmax(0, 1fr); } }
.price-card { display: flex; flex-direction: column; position: relative; overflow: hidden; isolation: isolate; }
.price-card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.price-card .card-icon { margin-bottom: 22px; }
.price-card h3 { font-size: clamp(1.2rem, 1.7vw, 1.4rem); }
.price-card .for { margin-top: 6px; color: var(--muted); font-size: 0.88rem; }
.price-tag { font-size: clamp(1.8rem, 2.5vw, 2.3rem); font-weight: 650; letter-spacing: -0.045em; line-height: 1; margin: 22px 0 2px; white-space: nowrap; }
.price-tag small { font-size: 0.9rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.price-tag.neg { font-size: 1.3rem; letter-spacing: -0.03em; padding: 6px 0 5px; }
.price-card .desc { margin-top: 14px; color: var(--fg-2); font-size: 0.94rem; }
.price-card .check-list { margin: 20px 0 26px; font-size: 0.92rem; }
.price-card .btn { margin-top: auto; width: 100%; }
.price-card .desc:has(+ .btn) { margin-bottom: 24px; }
.price-card.feature-dark .for, .price-card.feature-dark .price-tag small { color: color-mix(in srgb, var(--on-inverse) 60%, transparent); }
.price-card.feature-dark .desc { color: color-mix(in srgb, var(--on-inverse) 72%, transparent); }
.price-card.feature-dark .check-list { color: color-mix(in srgb, var(--on-inverse) 88%, transparent); }
.price-card.feature-dark .card-icon { background: var(--accent); color: var(--on-accent); }
.price-card.wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.price-card.wide .btn { width: auto; align-self: flex-start; margin-top: 0; }
.price-card.wide .wide-body .check-list { margin: 0 0 24px; }
.price-card.wide .wide-body .vbadge { margin: 0 0 14px; }
.price-card.wide .wide-note { color: var(--fg-2); font-size: 0.92rem; max-width: 34em; margin-bottom: 22px; }
@media (max-width: 900px) { .price-card.wide { grid-template-columns: minmax(0, 1fr); } }
/* the consultation card is light, like the closing "Напишите, что случилось" block: lime glow and the dither */
.price-card.wide.feature-dark { --dither: var(--on-inverse); }
.price-card.wide.feature-dark::after { content: ''; position: absolute; z-index: -1; width: 420px; height: 420px; border-radius: 50%; right: -120px; top: -200px; background: var(--accent); filter: blur(120px); opacity: 0.35; pointer-events: none; }
.price-card .dither { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: 0.1; image-rendering: pixelated; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 70%); mask-image: linear-gradient(90deg, transparent 5%, #000 70%); }
.price-card.feature-dark .wide-note { color: color-mix(in srgb, var(--on-inverse) 72%, transparent); }
@media (max-width: 480px) { .price-card.wide .btn { width: 100%; white-space: normal; } }

/* article page */
.prose { max-width: none; }
.prose .btn { color: var(--btn-fg); text-decoration: none; }
.prose .lead-p { font-size: 1.15rem; line-height: 1.7; color: var(--fg); max-width: 42em; }
.prose h2:first-child { margin-top: 0; }
.topics { list-style: none; counter-reset: t; padding: 0 !important; margin-top: 1em; }
.topics li { counter-increment: t; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); color: var(--fg); }
.topics li:last-child { border-bottom: 1px solid var(--line); }
.topics li::before { content: counter(t, decimal-leading-zero); font-family: var(--mono); font-size: 0.82rem; color: var(--accent-fg); padding-top: 4px; }
.prose .topics li + li { margin-top: 0; }
.soon { margin-top: 2.2em; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 20px 24px; border-radius: var(--radius); background: var(--card-2); border: 1px solid var(--line); }
.soon p { max-width: 34em; color: var(--fg-2); }
.soon p b { color: var(--fg); font-weight: 600; }
.buy-card .eyebrow { margin-bottom: 14px; }
.buy-card h3 { font-size: 1.3rem; }
.buy-card .meta { margin-top: 6px; font-family: var(--mono); font-size: 0.76rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.buy-card .about { color: var(--fg-2); font-size: 0.94rem; }
.buy-card .icon-link { justify-content: center; }
/* ── Blog articles ── */
.art-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 20px; font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.art-toc { padding: 20px 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.art-toc b { display: block; margin-bottom: 10px; font-family: var(--mono); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.art-toc ol { margin: 0; display: grid; gap: 4px; font-size: 0.96rem; }
.prose .art-toc a { color: var(--fg-2); text-decoration: none; }
.prose .art-toc a:hover { color: var(--accent-fg); }
.prose .art-toc + .lead-p { margin-top: 1.6em; }
.art-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-block: 2.2em; padding: 22px 24px; border-radius: var(--radius); background: var(--card-2); border: 1px solid var(--line-2); }
.art-cta b { display: block; color: var(--fg); font-size: 1.06rem; font-weight: 600; }
.art-cta p { margin-top: 4px; max-width: 34em; font-size: 0.95rem; }
.table-wrap { overflow-x: auto; margin-block: 1.4em; }
.table-wrap table { min-width: 560px; }
.prose code { padding: 2px 6px; border-radius: 6px; background: var(--card-2); font-family: var(--mono); font-size: 0.86em; color: var(--fg); overflow-wrap: anywhere; }
.prose .note { font-size: 0.95rem; }
.prose .faq { margin-top: 1em; }
.prose .faq summary { color: var(--fg); }
.prose .faq .answer p { margin: 0; }
.aside-note { margin-top: 14px; font-size: 0.84rem; color: var(--muted); text-align: center; }
.blog-group { margin: clamp(56px, 7vw, 88px) 0 28px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
@media (max-width: 640px) { .art-cta .btn { width: 100%; } .faq .answer { padding-right: 0; } }
.more-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 24px; margin-bottom: 36px; }

/* ── CTA band ── */
.cta-band { isolation: isolate; }
.cta-band .dither { opacity: 0.1; z-index: -1; -webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 70%); mask-image: linear-gradient(90deg, transparent 5%, #000 70%); }
.cta-band { --dither: var(--on-inverse); }
.cta-band .btn-ghost { --btn-fg: inherit; --btn-border: color-mix(in srgb, currentColor 30%, transparent); }
.cta-band .btn-ghost:hover { border-color: currentColor; }
.cta-band .btn-accent { --btn-bg: var(--accent); --btn-fg: var(--on-accent); }
.cta-band .h2 { max-width: 14em; }
.cta-band .eyebrow { color: inherit; opacity: 0.75; }

/* ── Footer ── */
.footer-grid { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
.footer-grid .about { margin-top: 18px; max-width: 340px; color: var(--fg-2); }
.footer-tag { margin-top: 18px; font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.34em; color: var(--muted); }
.footer-grid .contact a span { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.footer-grid .contact li { align-items: flex-start; }
.footer-wordmark { line-height: 0; margin-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(20px, 3vw, 36px); pointer-events: none; user-select: none; }
.footer-wordmark svg { width: 100%; height: auto; fill: none; stroke: var(--line-2); stroke-width: 1; }
.footer-wordmark path { vector-effect: non-scaling-stroke; }
/* the last line of the page is not hidden under the round chat button */
@media (max-width: 1440px) { .footer-bottom { padding-right: 124px; } }
.ftr-ver { font-family: var(--mono); font-size: 0.92em; letter-spacing: 0.02em; }
.footer-bottom .ftr-req { font-family: var(--mono); font-size: 0.74rem; }
/* bottom line: requisites and the documents on the left, copyright and version on the right */
.footer-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 8px; align-items: center; }
.footer-bottom .ftr-req, .footer-bottom .ftr-legal { grid-column: 1; }
.footer-bottom > :last-child { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
@media (max-width: 760px) { .footer-bottom { grid-template-columns: minmax(0, 1fr); } .footer-bottom > :last-child { grid-column: 1; grid-row: auto; text-align: left; } }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Chat in the corner: a round button that opens the same conversation as the first screen ── */
.chat-fab { --fab: 112px; --core: 60px; --fab-gap: clamp(12px, 2.4vw, 20px); position: fixed; right: var(--fab-gap); bottom: calc(var(--fab-gap) + env(safe-area-inset-bottom, 0px)); z-index: 70; width: var(--fab); height: var(--fab); border-radius: 50%; display: grid; place-items: center; opacity: 0; transform: translateY(16px) scale(0.8); pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.45s var(--ease); }
.chat-fab.show { opacity: 1; transform: none; pointer-events: auto; }
/* glass disc under the turning text, so it reads over dark, light and lime blocks alike */
.chat-fab::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--glass); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border: 1px solid var(--line-2); transition: opacity 0.3s var(--ease), transform 0.4s var(--ease); }
/* the ring turns all the time; under the pointer a second, inner turn joins in, so it speeds up smoothly without jumping */
.fab-ring { position: absolute; inset: 0; animation: fab-spin 16s linear infinite; transition: opacity 0.3s var(--ease); }
.fab-ring svg { display: block; width: 100%; height: 100%; overflow: visible; animation: fab-spin 5s linear infinite paused; }
.chat-fab:hover .fab-ring svg { animation-play-state: running; }
.fab-ring text { font-family: var(--mono); font-size: 10px; font-weight: 500; fill: var(--fg); }
.fab-ring .sep { fill: var(--accent); }
@keyframes fab-spin { to { transform: rotate(360deg); } }
.fab-core { position: relative; width: var(--core); height: var(--core); border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); transition: transform 0.35s var(--ease), background 0.2s; }
.chat-fab:hover .fab-core { background: var(--accent-2); }
.fab-core .ico { grid-area: 1 / 1; width: 26px; height: 26px; transition: transform 0.4s var(--ease), opacity 0.2s; }
.fab-core .i-x { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.chat-fab.on .i-open { opacity: 0; transform: rotate(90deg) scale(0.6); }
.chat-fab.on .i-x { opacity: 1; transform: none; }
/* under the pointer the chat icon gives way to the VECTRA mark, which starts drawing itself from scratch */
.fab-core .i-mk { opacity: 0; transform: scale(0.6); animation: none; }
.chat-fab:not(.on):hover .i-open { opacity: 0; transform: scale(0.6); }
.chat-fab:not(.on):hover .i-mk { opacity: 1; transform: none; animation: mk-loop 3.2s var(--ease) infinite; }
/* while the chat is open only the lime button stays, as a close button */
.chat-fab.on::before { opacity: 0; transform: scale(0.7); }
.chat-fab.on .fab-ring { opacity: 0; }
/* a new answer while the chat is closed */
.fab-core .dot { position: absolute; top: 1px; right: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--danger); border: 2px solid var(--accent); transform: scale(0); transition: transform 0.3s var(--ease); }
.chat-fab.has-new .dot { transform: none; }
@media (max-width: 640px) { .chat-fab { --fab: 96px; --core: 52px; } .fab-core .ico { width: 23px; height: 23px; } }

.chat.chat-pop { position: fixed; z-index: 80; right: calc(clamp(12px, 2.4vw, 20px) + 8px); bottom: calc(clamp(12px, 2.4vw, 20px) + 104px + env(safe-area-inset-bottom, 0px)); width: 384px; max-width: calc(100vw - 32px); height: min(580px, calc(100vh - 150px)); min-height: 0; background: color-mix(in srgb, var(--card) 96%, transparent); transform-origin: 100% 100%; opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.96); transition: opacity 0.25s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0.45s; }
.chat.chat-pop.open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s var(--ease), transform 0.45s var(--ease), visibility 0s; }
.chat-pop .chat-list { overscroll-behavior: contain; }
.chat-close { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; display: none; place-items: center; flex: none; color: var(--fg-2); transition: background 0.2s, color 0.2s; }
.chat-close:hover { color: var(--fg); background: var(--card-2); }
.chat-close .ico { width: 22px; height: 22px; }

/* phones: the chat slides up over the whole screen and follows the keyboard */
html.chat-lock, html.chat-lock body { overflow: hidden; }

/* anchors from the menu put the section heading just under the top bar instead of below the section's own top padding */
html { scroll-padding-top: 112px; }
.section[id] { scroll-margin-top: calc(-1 * clamp(72px, 10vw, 136px)); }
@media (max-width: 640px) {
  .chat.chat-pop { left: 0; right: 0; bottom: auto; top: var(--vvt, 0px); width: 100%; max-width: none; height: 100vh; height: var(--vvh, 100dvh); border: 0; border-radius: 0; background: var(--bg); opacity: 1; transform: translateY(100%); transition: transform 0.45s var(--ease), visibility 0s linear 0.45s; }
  .chat.chat-pop.open { transform: none; transition: transform 0.45s var(--ease), visibility 0s; }
  .chat-pop .chat-head { gap: 10px; padding: calc(12px + env(safe-area-inset-top, 0px)) 8px 12px 16px; }
  .chat-pop .chat-head div { min-width: 0; }
  .chat-pop .chat-head div > span { font-size: 0.74rem; }
  .chat-pop .chat-form { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .chat-pop.kb .chat-form { padding-bottom: 12px; }
  .chat-close { display: grid; }
  .chat-fab.on { opacity: 0; pointer-events: none; }
}

/* ── Small screens ── */
@media (max-width: 640px) {
  .section-head { gap: 18px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .cta-band .row .btn { width: 100%; }
}

/* ── Reduced motion: the kit already switches animations off, so show the final state of ours ── */
@media (prefers-reduced-motion: reduce) {
  .js .brand-mark path { fill-opacity: 1; stroke-dashoffset: 0; }
  .timeline.reveal:not(.in) li::after { transform: none; }
  .rev-track { scroll-behavior: auto; }
}