/* Index (page d'accueil des visiteurs) : habillage aux couleurs du logo.
   Tout est rangé sous .landing (le <main> de index.html) pour ne toucher aucune autre page. */

/* ---------- Hero ---------- */

/* Halo doré à gauche et bleu à droite, comme les deux cartes du logo */
.landing .hero {
  position: relative;
  padding: 64px 16px 72px;
  background:
    radial-gradient(ellipse 40% 60% at 30% 40%, rgba(234, 183, 17, 0.10), transparent 70%),
    radial-gradient(ellipse 40% 60% at 70% 40%, rgba(18, 181, 240, 0.10), transparent 70%);
}

.landing .hero h1 {
  font-size: 3rem;
  margin: 0 0 8px;
  text-shadow: 0 0 24px rgba(234, 183, 17, 0.35);
}

/* Les deux cartes du logo au-dessus du titre, qui flottent doucement */
.hero-logo {
  display: block;
  width: 140px;
  height: auto;
  margin: 0 auto 16px;
  mix-blend-mode: lighten;   /* le fond noir de l'image se fond dans le halo au lieu de faire un carré */
  animation: flotter 5s ease-in-out infinite;
}

@keyframes flotter {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.landing .hero .btn-primary {
  box-shadow: 0 0 24px rgba(234, 183, 17, 0.35);
}

/* ---------- Cartes "What you get" : la carte dorée du logo ---------- */

/* Double cadre : la bordure dorée + un 2e filet fin à l'intérieur (le ::before) */
.landing .benefits-grid .description_widget {
  position: relative;
  background: linear-gradient(160deg, #1d1f27 0%, #121319 100%);
  border: 1px solid rgba(234, 183, 17, 0.6);
  box-shadow: 0 0 0 1px rgba(234, 183, 17, 0.08), 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.landing .benefits-grid .description_widget::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(234, 183, 17, 0.22);
  border-radius: 10px;
  pointer-events: none;   /* le filet ne bloque pas la sélection du texte */
}

.landing .benefits-grid .description_widget h3 {
  color: #eab711;
}

.landing .benefits-grid .description_widget:hover {
  transform: translateY(-4px);
  border-color: #eab711;
  box-shadow: 0 0 24px rgba(234, 183, 17, 0.25), 0 14px 34px rgba(0, 0, 0, 0.45);
}

/* ---------- Why TwinCard? : un nuage lumineux ---------- */

.landing .why {
  position: relative;
  max-width: 860px;
  margin: 24px auto 64px;
  padding: 40px 48px;
  border-radius: 32px;
  background: rgba(26, 29, 39, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* Le "nuage" : deux halos flous (doré et bleu) qui débordent derrière le bloc */
.landing .why::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: -1;
  border-radius: 48px;
  background:
    radial-gradient(circle at 15% 20%, rgba(234, 183, 17, 0.18), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(18, 181, 240, 0.18), transparent 55%);
  filter: blur(24px);
}

.landing .why h2 {
  margin-top: 0;
}

.landing .why p:last-child {
  margin-bottom: 0;
}

/* Le .why est au-dessus de son halo (z-index: -1) sans passer sous le fond du main */
.landing {
  isolation: isolate;
}

/* ---------- How does it work? : la carte bleue du logo ---------- */

.landing .steps-grid .description_widget {
  position: relative;
  background: linear-gradient(160deg, #161c26 0%, #10141b 100%);
  border: 1px solid rgba(18, 181, 240, 0.55);
  box-shadow: 0 0 18px rgba(18, 181, 240, 0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.landing .steps-grid .description_widget:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 26px rgba(18, 181, 240, 0.30);
}

.landing .steps-grid .description_widget h3 {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Le numéro de l'étape dans une pastille bleue */
.step-num {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #12b5f0;
  color: #12b5f0;
  font-size: 1rem;
  box-shadow: 0 0 12px rgba(18, 181, 240, 0.35);
}

/* ---------- Licences ---------- */

/* Disponible : bordure bleue ; bientôt : un peu effacée */
.landing .licences-grid .description_widget:has(.status:not(.status-soon)) {
  border-color: rgba(18, 181, 240, 0.55);
  box-shadow: 0 0 18px rgba(18, 181, 240, 0.12);
}

.landing .licences-grid .description_widget:has(.status-soon) {
  opacity: 0.75;
  border-style: dashed;
}

/* ---------- Téléphone ---------- */

@media (max-width: 560px) {
  .landing .hero h1 {
    font-size: 2.2rem;
  }

  .hero-logo {
    width: 110px;
  }

  .landing .why {
    margin: 16px 16px 48px;
    padding: 28px 22px;
    border-radius: 24px;
  }
}

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

  .landing .description_widget,
  .landing .description_widget:hover {
    transition: none;
    transform: none;
  }
}