:root {
  --primary: #0066CC;
  --primary-dark: #003366;
  --primary-light: #4D9AE6;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Arial, sans-serif; }

/* prevent horizontal scroll on mobile */
html, body { overflow-x: hidden; max-width: 100%; }

/* Section anchor offset for sticky header */
section[id] { scroll-margin-top: 80px; }

/* ---------- Hero animated data-flow background ---------- */
.data-flow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.data-flow span {
  position: absolute;
  display: block;
  width: 2px;
  height: 120px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(127,184,255,0.55), rgba(255,255,255,0));
  animation: flow linear infinite;
}
@keyframes flow {
  0%   { transform: translateY(-140px); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(720px); opacity: 0; }
}
.data-dot {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(127,184,255,0.5);
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-18px); }
}

/* floating hero card */
.float-card { animation: floaty 6s ease-in-out infinite; }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- FAQ accordion ---------- */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.faq-item.open .faq-answer { max-height: 320px; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .3s ease; }

/* ---------- Card hover ---------- */
.hover-lift { transition: transform .25s ease, box-shadow .25s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -18px rgba(0,51,102,.35); }

/* ---------- Header scrolled state ---------- */
#site-header { transition: box-shadow .3s ease, background-color .3s ease; }
#site-header.scrolled { box-shadow: 0 6px 24px -14px rgba(0,51,102,.45); }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .data-flow span, .data-dot, .float-card { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}