:root { color-scheme: light; }

body {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.holo {
  background: linear-gradient(115deg,
    oklch(0.90 0.055 165) 0%,
    oklch(0.89 0.05 200) 22%,
    oklch(0.90 0.052 292) 46%,
    oklch(0.93 0.045 30) 68%,
    oklch(0.91 0.05 165) 100%
  );
  background-size: 280% 280%;
  animation: holo-pan 14s ease-in-out infinite;
}
@keyframes holo-pan {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.holo-text-pill {
  background: linear-gradient(110deg,
    oklch(0.90 0.055 165), oklch(0.90 0.052 292), oklch(0.92 0.05 30));
  background-size: 200% 100%;
  animation: holo-pan 9s ease-in-out infinite;
}

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }

details.faq { transition: background-color .3s ease; }
details.faq summary { list-style: none; cursor: pointer; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq .faq-icon { transition: transform .35s cubic-bezier(.16,1,.3,1); }
details.faq[open] .faq-icon { transform: rotate(45deg); }
details.faq .faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.16,1,.3,1); }
details.faq[open] .faq-body { grid-template-rows: 1fr; }
details.faq .faq-body > div { overflow: hidden; }

.marquee-track { animation: marquee 32s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .holo, .holo-text-pill, .marquee-track { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}