:root {
  --accent: #2457ff;
  --accent-strong: #1840d8;
  --accent-soft: #e8edff;
  --accent-glow: rgba(36, 87, 255, .18);
}

.eyebrow,
.plain-tech-grid h3,
.book-finder-grid h3,
.lane-card > svg,
.tech-item svg,
.capability-item svg {
  color: var(--accent);
}

.brand::after {
  content: "";
  display: inline-block;
  width: .48rem;
  height: .48rem;
  margin-left: .42rem;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: .08rem;
}

.button-primary {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(36, 87, 255, .22);
}

.button-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  box-shadow: 0 14px 38px rgba(36, 87, 255, .28);
}

.text-link:hover,
.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--accent);
}

.hero::before {
  background: radial-gradient(circle, rgba(36,87,255,.16), rgba(36,87,255,0) 70%);
}

.metric strong {
  color: var(--ink);
}

.metric:first-child strong,
.big-result strong {
  color: var(--accent);
}

.proof-card:hover,
.tech-item:hover,
.capability-item:hover,
.system-node:hover,
.gtm-node:hover {
  border-color: rgba(36,87,255,.28);
}

.proof-card:hover::after {
  background: linear-gradient(90deg, var(--accent), transparent);
}

.system-node svg,
.gtm-node svg {
  color: var(--accent);
}

.system-node:hover,
.gtm-node:hover {
  box-shadow: 0 20px 48px rgba(36,87,255,.10);
}

.system-node:hover svg,
.gtm-node:hover svg {
  transform: translateY(-2px) scale(1.04);
}

.browser-shot::before {
  background: linear-gradient(90deg, #ff605c 0 8px, transparent 8px 14px, #ffbd44 14px 22px, transparent 22px 28px, #00ca4e 28px 36px, transparent 36px);
}

.systems {
  background:
    radial-gradient(circle at 92% 8%, rgba(36,87,255,.10), transparent 24%),
    #edf1f8;
}

.capabilities {
  background:
    radial-gradient(circle at 8% 0%, rgba(36,87,255,.22), transparent 28%),
    #121816;
}

.status-pill {
  border-color: rgba(36,87,255,.30);
  color: var(--accent-strong);
  background: rgba(232,237,255,.76);
}

:focus-visible {
  outline-color: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  .system-node svg,
  .gtm-node svg {
    transition: transform .22s ease, color .22s ease;
  }
}
