:root {
  --sans: 'Geist', 'IBM Plex Sans', -apple-system, system-ui, sans-serif;
  --mono: 'Geist Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --serif: 'Instrument Serif', Georgia, serif;
  --bg: #e8e8ec;
  --bg-strong: #f4f4f6;
  --bg-page: #dcdce1;
  --dark: #1a1a1a;
  --muted: #888;
  --accent: #3352ff;
  --accent-soft: #eef1ff;
  --accent-grad: linear-gradient(135deg, #4060ff 0%, #6b8aff 50%, #a78bfa 100%);
}
html, body { margin:0; padding:0; background: var(--bg-page); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; }
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

/* Reveal-on-scroll animation */  [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

html, body { background: var(--bg); }

/* Shared editorial list with <em> inside */
ul li em {
  font-style: normal;
  font-family: var(--mono); font-size: 12px; color: var(--accent);
  margin-right: 8px;
}
/* bullet list with arrows (Variant A) */
.card ul li, ul.bullet li {
  font-size: 14px; padding: 3px 0 3px 16px; position: relative; color: var(--dark);
  list-style: none;
}
/* spec list in variant B */
.spec-list-b {
  list-style: none; margin-top: 16px; padding: 0;
}
.spec-list-b li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.08); font-size: 14px;
}
.spec-list-b li:last-child { border-bottom: none; }
.spec-list-b li span {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.spec-list-b li em {
  font-style: normal; font-family: var(--sans); font-size: 14px;
  color: var(--dark); font-weight: 500; margin-right: 0;
}

/* spec list in variant A — two-column rows */
.spec-list-a {
  list-style: none; margin-top: 14px; padding: 0;
}
.spec-list-a li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: 14px;
}
.spec-list-a li:last-child { border-bottom: none; }
.spec-list-a li > svg { flex: 0 0 auto; }
.spec-list-a li span {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  flex: 1 1 auto;
}
.spec-list-a li em {
  font-style: normal; font-family: var(--sans);
  font-size: 14px; color: var(--dark); font-weight: 500;
  margin-left: auto;
}

/* bullet list in variant A — icon + text rows */
.va-bullet-li {
  display: flex; align-items: center; gap: 10px;
}

/* Variant A — responsive 12-col grid (services & why) */
.va-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: stretch;
}
/* At narrower widths switch to 6 cols (each span halves visually → items wrap) */
@media (max-width: 900px) {
  .va-grid-12 { grid-template-columns: repeat(6, 1fr); }
  .va-grid-12 > * { grid-column: span 3 !important; }
}
@media (max-width: 560px) {
  .va-grid-12 { grid-template-columns: 1fr; }
  .va-grid-12 > * { grid-column: span 1 !important; }
}

/* ========= Nav links: pill hover ========= */
.va-nav a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.va-nav a:hover {
  background: rgba(51, 82, 255, 0.08);
  color: var(--accent);
}

/* ========= Buttons: hover states ========= */
.va-btn {
  position: relative;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.25s ease,
              box-shadow 0.25s ease,
              border-color 0.25s ease,
              color 0.2s ease;
}
.va-btn:hover {
  transform: translateY(-1px);
}
.va-btn:active {
  transform: translateY(0);
  transition-duration: 0.08s;
}
/* Primary (dark bg, white text) */
.va-btn-primary:hover {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px -8px var(--accent);
}
/* Primary on hero (white bg, dark text) */
.va-btn-primary-hero:hover {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px -10px rgba(0,0,0,0.4);
}
/* Ghost on hero (transparent/border white) */
.va-btn-ghost-hero:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.6) !important;
}
/* Ghost on card (transparent/border dark) */
.va-btn-ghost:hover {
  background: var(--dark) !important;
  color: #fff !important;
  border-color: var(--dark) !important;
}

/* Card clickable hover */
.va-card-clickable {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}
.va-card-clickable:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -12px rgba(20,40,80,0.18);
  border-color: rgba(59,130,246,0.25) !important;
}
.va-card-clickable:hover .va-disclosure {
  transform: translate(4px, -4px) rotate(0deg);
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
.va-disclosure {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.25s ease,
              color 0.2s ease,
              border-color 0.25s ease;
}

/* Tag hover */
.va-tag {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: default;
}
.va-tag:hover {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: transparent !important;
}

/* Header CTA (accent pill) */
.va-btn-cta:hover {
  background: var(--dark) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,0.5);
}
/* CTA form submit */
.va-btn-cta-submit:hover {
  background: #fff !important;
  color: var(--dark) !important;
  box-shadow: 0 8px 22px -10px rgba(255,255,255,0.45);
}
/* Speed demo cursor blink */
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* Anchor jumps: offset targets below the sticky header + smooth scroll */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 100px; }
@media (max-width: 900px) { [id] { scroll-margin-top: 120px; } }


/* ========= Dropdown menus (static — иначе до загрузки JS меню видны развёрнутыми) ========= */
.va-dd{position:relative;display:flex;align-items:center}
.va-dd-trigger{cursor:pointer;display:flex;align-items:center;gap:4px}
.va-dd-trigger svg{transition:transform 0.2s}
.va-dd:hover .va-dd-trigger svg{transform:rotate(180deg)}
.va-dd-menu{position:absolute;top:100%;left:-12px;padding:8px 0;min-width:200px;background:#fff;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,0.12);border:1px solid rgba(0,0,0,0.06);opacity:0;pointer-events:none;transform:translateY(4px);transition:all 0.2s ease;z-index:60}
.va-dd:hover>.va-dd-menu{opacity:1;pointer-events:auto;transform:translateY(0)}
.va-dd-item{display:flex;align-items:center;justify-content:space-between;padding:9px 16px;font-size:13px;font-weight:500;color:var(--dark);text-decoration:none;transition:background 0.12s,color 0.12s;white-space:nowrap;border-radius:0}
.va-dd-item:hover{background:var(--accent-soft);color:var(--accent)}
.va-dd-item.active{color:var(--accent)}
.va-dd-sub{position:relative}
.va-dd-sub>.va-dd-menu{left:100%;top:-8px;min-width:180px}
.va-dd-sub:hover>.va-dd-menu{opacity:1;pointer-events:auto;transform:translateY(0)}
.va-dd-sep{height:1px;background:rgba(0,0,0,0.06);margin:6px 12px}
.va-ft-link:hover{color:rgba(255,255,255,1)!important}