html { scroll-behavior: smooth; background: #faf8f3; }
body { font-family: 'Inter', sans-serif; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 22, 40, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 22, 40, 0.035) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}
/* ERP starfield + cyan grid, for the dark sections */
.starfield {
  background:
    linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px) 0 0 / 60px 60px,
    radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 80% 15%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(2px 2px at 70% 25%, rgba(201, 169, 97, 0.5), transparent),
    linear-gradient(180deg, #050a15 0%, #0a1628 50%, #1a2b4a 100%);
}
.starfield .text-gold-gradient, .bg-gradient-to-r .text-gold-gradient {
  background: linear-gradient(180deg, #f3e2a9 0%, #d4af37 55%, #a8873a 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.text-gold-gradient {
  background: linear-gradient(180deg, #d4af37 0%, #b08d3a 50%, #7a5c1e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mx-ribbon { background: linear-gradient(90deg, #006847 0 33.33%, #ffffff 33.33% 66.66%, #ce1126 66.66% 100%); }

/* Signal rings radiating from the tower in the hero */
.ring { transform-origin: 200px 200px; animation: pulse 4s ease-out infinite; opacity: 0; }
.ring:nth-of-type(2) { animation-delay: 1.33s; }
.ring:nth-of-type(3) { animation-delay: 2.66s; }
@keyframes pulse {
  0% { transform: scale(0.2); opacity: 0.8; }
  100% { transform: scale(1); opacity: 0; }
}
.orbit { transform-origin: 200px 200px; animation: spin 40s linear infinite; }
.orbit-rev { transform-origin: 200px 200px; animation: spin 60s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ring, .orbit, .orbit-rev { animation: none; }
  .ring { opacity: 0.2; }
}

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }