/* =========================================================
   demo.css — page de démonstration HELIX.
   Base reprise du bloc <helmet> du composant d'origine,
   plus les adaptations écran qui lui manquaient.
   ========================================================= */

html, body { margin: 0; padding: 0; }
body { background: #06060b; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { color: #a78bfa; }
::selection { background: #a78bfa; color: #06060b; }
input, button { font: inherit; color: inherit; }
html { scroll-behavior: smooth }
:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px }
@keyframes hx-spin { to { rotate: 360deg } }
@keyframes hx-spin-r { to { rotate: -360deg } }
@keyframes hx-float { 0%,100% { translate: 0 0 } 50% { translate: 0 -18px } }
@keyframes hx-grid { to { background-position: 0 220px } }
@keyframes hx-sweep { to { background-position: 240% 50% } }
@keyframes hx-pulse { 0%,100% { opacity: .25; scale: 1 } 50% { opacity: .7; scale: 1.06 } }
@keyframes hx-blink { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }
::-webkit-scrollbar { width: 9px }
::-webkit-scrollbar-thumb { background: #241f3d; border-radius: 6px }

/* =========================================================
   Adaptations écran — absentes du composant d'origine
   ========================================================= */
@media (max-width: 900px) {
  /* Les trois arguments passent en colonne */
  #hx-why > div > div:last-child {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  header > div { padding: 12px 16px !important; gap: 14px !important; }
  /* La navigation déborde : on la retire, les ancres restent joignables
     par le défilement et par les boutons d'appel à l'action */
  header nav { display: none !important; }

  section { padding-left: 16px !important; padding-right: 16px !important; }

  /* L'anneau décoratif recouvre le titre sur écran étroit */
  #hx-market, .hx-rings { }
  [aria-hidden="true"][style*="aspect-ratio"] { display: none !important; }

  /* Les compteurs passent sous le titre */
  #hx-market > div > div:first-child { gap: 16px !important; }
  #hx-market > div > div:first-child > div:last-child { gap: 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}