.site-header {
  color: #11324e;
  border-bottom-color: rgba(11, 47, 85, 0.12);
}

.site-header nav a { color: #3f5e77; }
.site-header nav a:hover { color: #0f5fd7; }
.site-header .nav-cta {
  border-color: rgba(20, 100, 244, 0.35);
  color: #0e5fd7;
  background: rgba(255, 255, 255, 0.58);
}
.brand-copy small { color: #69849b; }
.nav-toggle { border-color: rgba(20, 100, 244, 0.35); color: #0e5fd7; }

.hero {
  color: #0b2f55;
  background:
    radial-gradient(circle at 72% 32%, rgba(29, 120, 255, 0.16), transparent 30%),
    radial-gradient(circle at 94% 84%, rgba(0, 174, 202, 0.14), transparent 28%),
    linear-gradient(135deg, #fbfdff 0%, #edf7ff 56%, #dceeff 100%);
}
.hero-grid {
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(24, 88, 145, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 88, 145, 0.12) 1px, transparent 1px);
}
.hero::after { border-color: rgba(20, 100, 244, 0.14); }
.hero .eyebrow { color: #45708f; }
.hero .eyebrow b { font: inherit; }
.hero h1 em { color: #1464f4; }
.hero-lead { color: #496981; }
.button.ghost {
  border-color: rgba(20, 100, 244, 0.3);
  color: #0e5fd7;
  background: rgba(255, 255, 255, 0.52);
}

.hero-proof { gap: 10px; margin-top: 48px; }
.hero-proof li {
  min-width: 0;
  flex: 1;
  border: 1px solid rgba(39, 105, 166, 0.16);
  border-radius: 8px;
  padding: 14px 15px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 10px 25px rgba(27, 89, 145, 0.06);
}
.hero-proof b { font-size: 21px; line-height: 1.2; color: #1464f4; }
.hero-proof span { margin-top: 4px; font-size: 11px; color: #54728a; }

.hero-system {
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 28px;
  background:
    radial-gradient(circle at 48% 45%, rgba(63, 133, 255, 0.32), transparent 34%),
    linear-gradient(145deg, #0c59b8, #073865);
  box-shadow: 0 35px 80px rgba(25, 90, 160, 0.24);
}
.system-flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.system-flow path { fill: none; stroke: rgba(132, 231, 239, 0.3); stroke-width: 1.5; stroke-dasharray: 6 8; }
.system-flow circle { fill: #9af7f1; filter: drop-shadow(0 0 7px #72e8e3); }
.system-core { width: 190px; height: 190px; animation: coreBreath 3.6s ease-in-out infinite; }
.system-core strong { font-size: 48px; letter-spacing: -0.04em; }
.system-core span { font-size: 13px; }
.system-core small { margin-top: 2px; font-size: 12px; }
.system-node { width: 168px; padding: 16px 19px; animation: nodeFloat 5s ease-in-out infinite; }
.system-node b { font-size: 12px; }
.system-node span { margin-top: 3px; font-size: 14px; }
.node-cloud, .node-design { animation-delay: -2.5s; }
.pulse-dot { width: 9px; height: 9px; animation: signalPulse 2.2s ease-in-out infinite; }
.dot-b { animation-delay: -0.7s; }
.dot-c { animation-delay: -1.4s; }

@keyframes coreBreath {
  0%, 100% { box-shadow: 0 0 50px rgba(47, 107, 255, 0.2); }
  50% { box-shadow: 0 0 90px rgba(77, 221, 229, 0.38); }
}
@keyframes nodeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes signalPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.72); }
  50% { opacity: 1; transform: scale(1.25); }
}

.product-stage { background: linear-gradient(135deg, #0d55ad, #083b70 60%, #07506c); }
.product-kicker { display: flex; align-items: center; gap: 12px; }
.product-kicker span {
  border: 1px solid rgba(113, 235, 224, 0.48);
  border-radius: 99px;
  background: rgba(47, 220, 198, 0.12);
  padding: 3px 9px;
  color: #aaf3ea;
  font-size: 10px;
  font-weight: 700;
}
.product-visual.has-image { background: #eaf3fb; }
.product-image { display: block; width: 100%; height: 100%; min-height: 410px; object-fit: contain; padding: 22px; }

.contact { background: #0a4b91; }
.contact-copy { background: linear-gradient(145deg, #0d5db9, #08457f); }
.inquiry-form { background: #0b3762; }
.site-footer { background: #08243c; }
.footer-meta { display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.icp-link { color: #b5d9f2; transition: color 0.2s; }
.icp-link:hover { color: #fff; text-decoration: underline; }

@media (max-width: 720px) {
  .site-header nav { background: #f7fbff; box-shadow: 0 18px 35px rgba(19, 74, 122, 0.18); }
  .site-header nav a { color: #274c69; }
  .hero-proof li { padding: 12px; }
  .hero-proof b { font-size: 18px; }
  .footer-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
  .system-node { width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .system-core, .system-node, .pulse-dot { animation: none; }
  .system-flow circle { display: none; }
}