: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; }
#cta input::placeholder, #cta textarea::placeholder { color: rgba(255,255,255,0.5); }

/* 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;} }

/* 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}

/* ========= Burger menu button ========= */
.va-burger{display:none;background:none;border:none;padding:8px;cursor:pointer;z-index:61}
.va-burger span{display:block;width:22px;height:2px;background:var(--dark);margin:5px 0;border-radius:2px;transition:all 0.3s}

/* ========= Mobile overlay nav ========= */
.va-mobile-nav{display:none;position:fixed;inset:0;z-index:55;background:rgba(255,255,255,0.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:80px 24px 24px;overflow-y:auto;flex-direction:column;gap:4px}
.va-mobile-nav.open{display:flex}
.va-mobile-nav a,.va-mobile-nav summary{display:block;padding:12px 16px;font-size:16px;font-weight:500;color:var(--dark);text-decoration:none;border-radius:10px}
.va-mobile-nav a:hover,.va-mobile-nav summary:hover{background:var(--accent-soft);color:var(--accent)}
.va-mobile-nav a.active{color:var(--accent)}
.va-mobile-nav details{border:none}
.va-mobile-nav details summary{list-style:none;cursor:pointer}
.va-mobile-nav details summary::-webkit-details-marker{display:none}
.va-mobile-nav details[open] summary{color:var(--accent)}
.va-mobile-nav details .va-mobile-sub{padding-left:16px}
.va-mobile-nav details .va-mobile-sub a{font-size:14px;padding:8px 16px;color:var(--muted)}

/* ========= Responsive: Tablet (<=900px) ========= */
@media (max-width: 900px) {
  /* Hide desktop nav, show burger */
  .va-nav{display:none !important}
  .va-btn-cta{display:none !important}
  .va-burger{display:block}

  /* Page container */
  #mount > div{padding:20px 16px 40px !important;max-width:100% !important}

  /* Header */
  #mount > div > header{padding:10px 16px !important;gap:16px !important;margin-bottom:16px !important}

  /* Hero */
  #mount > div > section[data-reveal]:first-of-type{padding:36px 24px !important;min-height:220px !important;border-radius:16px !important}
  #mount > div > section[data-reveal]:first-of-type h1{font-size:clamp(24px, 5vw, 36px) !important}

  /* CTA section */
  section[id="cta"]{grid-template-columns:1fr !important;padding:36px 24px !important;gap:24px !important;border-radius:16px !important}

  /* CTA form input rows */
  section[id="cta"] form > div[style*="grid-template-columns"]{grid-template-columns:1fr !important}

  /* Footer */
  footer{padding:32px 24px 24px !important;border-radius:16px !important}
  footer > div > div:last-child{gap:20px 24px !important}

  /* Cards — reduce padding */
  .va-grid-12 > div{padding:20px !important}

  /* Flex row layouts — stack */
  div[style*="flex: 1 1 360px"],div[style*="flex: 1 1 400px"],div[style*="flex: 1 1 340px"],div[style*="flex: 1 1 300px"],div[style*="flex:1 1 360px"],div[style*="flex:1 1 400px"]{flex:1 1 100% !important;min-width:0 !important}

  /* Equipment grid */
  div[style*="repeat(3, 1fr)"]{grid-template-columns:repeat(2, 1fr) !important}

  /* Bullet grid — single column */
  ul[style*="1fr 1fr"]{grid-template-columns:1fr !important}

  /* Section heading spacing */
  div[style*="margin: 56px"]{margin:32px 4px 16px !important}

  /* Configurator card — stack */
  div[style*="grid-template-columns: 1fr auto"]{grid-template-columns:1fr !important}

  /* Stats grid 3 cols → 1 */
  div[style*="repeat(3,1fr)"]{grid-template-columns:1fr !important}
}

/* ========= Responsive: Phone (<=560px) ========= */
@media (max-width: 560px) {
  /* Page container */
  #mount > div{padding:12px 10px 32px !important}

  /* Header */
  #mount > div > header{padding:8px 12px !important;border-radius:0 0 12px 12px !important}

  /* Hero */
  #mount > div > section[data-reveal]:first-of-type{padding:28px 18px !important;min-height:180px !important;border-radius:14px !important;margin-bottom:16px !important}
  #mount > div > section[data-reveal]:first-of-type h1{font-size:clamp(22px, 6vw, 30px) !important;letter-spacing:-0.8px !important}
  #mount > div > section[data-reveal]:first-of-type p{font-size:13px !important}

  /* CTA */
  section[id="cta"]{padding:28px 16px !important;border-radius:14px !important}
  section[id="cta"] h2{font-size:22px !important}
  section[id="cta"] button[type="submit"]{width:100%;text-align:center}

  /* Footer */
  footer{padding:24px 16px 20px !important;border-radius:14px !important}
  footer > div > div:last-child{flex-direction:column !important;gap:20px !important}

  /* Cards */
  div[style*="background: rgb(255, 255, 255)"],div[style*="background:#fff"],div[style*="background: #fff"]{padding:18px !important}

  /* Equipment grid — single column */
  div[style*="repeat(3, 1fr)"],div[style*="repeat(2, 1fr)"]{grid-template-columns:1fr !important}

  /* Training cards — single column */
  div[style*="span 6"]{grid-column:span 1 !important}

  /* Blog/news card grid */
  div[style*="repeat(auto-fill"]{grid-template-columns:1fr !important}

  /* Footer bottom bar — stack */
  footer > div:last-child{flex-direction:column !important;text-align:center}

  /* DvaiSubnav pills — scroll horizontal */
  div[style*="gap:8px"][style*="flex-wrap:wrap"]{flex-wrap:nowrap !important;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}

  /* Accent card with grid */
  div[style*="grid-template-columns: 1fr auto"]{grid-template-columns:1fr !important;padding:24px 18px !important}
  div[style*="grid-template-columns: 1fr auto"] a{width:100%;text-align:center}
}

/* ===== v3 mobile layout hardening (2026-08-31) ===== */
@media (max-width: 900px) {
  #mount > div, #mount-a > div { padding: 20px 16px 40px !important; max-width: 100% !important; }
  [style*="grid-template-columns: 360px 1fr"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1.2fr 1fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  #mount > div, #mount-a > div { padding: 12px 10px 32px !important; }
  #mount [style*="grid-template-columns"],
  #mount-a [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  #mount img, #mount-a img, #mount iframe, #mount-a iframe { max-width: 100%; }
}

/* burger to the right + home hero mobile clearance (2026-08-31) */
.va-burger { margin-left: auto; }
@media (max-width: 560px) {
  .va-hero-content { padding: 72px 18px 24px !important; }
}
@media (max-width: 900px) {
  .va-hero-content { padding-top: 60px !important; }
}