/* ════════════════════════════════════════════════════════════════
   Bandeau « bêta ouverte » — le seul endroit du site qui demande
   quelque chose au visiteur, donc le seul qui ait le droit d'être
   frontal.

   Fichier séparé de styles.css pour la même raison que live.css : ce
   bandeau a une durée de vie (il disparaît le jour de la sortie
   publique) et doit pouvoir partir d'un bloc — un <link>, un <script>,
   une <section>. Les jetons de couleur et de fonte viennent de
   styles.css.
   ════════════════════════════════════════════════════════════════ */

.beta {
  position: relative;
  padding: clamp(34px, 5vw, 64px) clamp(16px, 4vw, 40px);
  background:
    radial-gradient(900px 340px at 50% 0%, rgba(212, 168, 67, .13), transparent 65%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  overflow: hidden;
}
.beta::before, .beta::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 22%, var(--gold) 50%, var(--gold-deep) 78%, transparent);
}
.beta::before { top: 0; }
.beta::after { bottom: 0; }

.beta-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; gap: clamp(20px, 3vw, 34px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  /* Le discours à gauche, les trois étapes à droite : on lit pourquoi,
     puis comment, dans cet ordre. */
  .beta-inner { grid-template-columns: 1.1fr 1fr; }
}

.beta-eyebrow {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
}
/* Le point qui respire : le test est ouvert MAINTENANT, pas « bientôt ». */
.beta-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #61c98a; box-shadow: 0 0 0 0 rgba(97, 201, 138, .55);
  animation: beta-pulse 2.4s ease-out infinite;
}
@keyframes beta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(97, 201, 138, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(97, 201, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(97, 201, 138, 0); }
}
.beta h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 46px); line-height: 1.06;
  margin: 0 0 10px; color: var(--cream); text-wrap: balance;
}
.beta-lede { margin: 0 0 18px; color: var(--muted); font-size: 16px; max-width: 46ch; }
.beta-lede b { color: var(--text); font-weight: 700; }

.beta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.beta-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px; border-radius: 10px;
  font-weight: 800; font-size: 16px; text-decoration: none;
  color: #211a08;
  background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 55%, #b8902f 100%);
  border: 1px solid var(--gold-deep);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.beta-cta:hover { filter: brightness(1.08); }
.beta-cta:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.beta-fine { font-size: 13px; color: var(--muted); }

/* ── Les trois étapes ────────────────────────────────────────────
   Numérotées parce que c'est une SÉQUENCE : on ne peut pas installer
   avant d'avoir rejoint, ni jouer avant d'avoir installé. */
.beta-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.beta-step {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(31, 38, 46, .55);
  border: 1px solid var(--border);
}
.beta-num {
  font-family: var(--display); font-size: 19px; line-height: 1.2;
  color: var(--gold-2); text-align: center;
}
.beta-step-t { display: block; font-weight: 700; font-size: 15px; color: var(--text); }
.beta-step-d { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.45; }

@media (prefers-reduced-motion: reduce) { .beta-dot { animation: none; } }