/* ==================== START ROADMAP SECTION — SEND THIS ==================== */
/* ========================================================================== */

/*
  ROADMAP PRO
  - 2x2 sólido en escritorio
  - compactación real en alturas bajas
  - modo seguro con scroll interno en viewports extremos
  - contenido siempre accesible, sin cortes
  - hover premium coherente con la web
  - entrada cinematográfica
  - conectores visuales entre fases
  - phase 1 viva y DONE más refinado
  - barrido holográfico sutil en hover
*/

.section__content--roadmap {
  position: relative;
  width: min(100%, 1580px);
  height: 100%;
  margin: 0 auto;
  padding:
    clamp(82px, 7vh, 108px)
    clamp(22px, 2vw, 34px)
    clamp(82px, 7vh, 108px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  transform: none;
  box-sizing: border-box;
}

.roadmap-viewport {
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: visible;
}

.roadmap-grid {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.3vw, 22px);
  overflow: visible;
}

/* ==================== CONNECTORS ==================== */

.roadmap-grid::before,
.roadmap-grid::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

.roadmap-grid::before {
  left: 50%;
  top: clamp(18px, 2vh, 26px);
  bottom: clamp(18px, 2vh, 26px);
  width: 2px;
  transform: translateX(-50%);
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(255,255,255,0.18) 10%,
      rgba(98,195,255,0.45) 32%,
      rgba(180,107,255,0.45) 68%,
      rgba(255,255,255,0.18) 90%,
      transparent 100%
    );
  box-shadow:
    0 0 10px rgba(98,195,255,0.18),
    0 0 20px rgba(180,107,255,0.12);
}

.roadmap-grid::after {
  top: 50%;
  left: clamp(18px, 2vw, 28px);
  right: clamp(18px, 2vw, 28px);
  height: 2px;
  transform: translateY(-50%);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,0.18) 10%,
      rgba(116,255,120,0.42) 28%,
      rgba(98,195,255,0.42) 50%,
      rgba(180,107,255,0.42) 72%,
      rgba(255,138,43,0.42) 90%,
      transparent 100%
    );
  box-shadow:
    0 0 10px rgba(98,195,255,0.14),
    0 0 20px rgba(255,138,43,0.10);
}

/* ==================== CARD ==================== */

.roadmap-card {
  --phase-main-rgb: 98, 195, 255;
  --phase-secondary-rgb: 221, 114, 255;
  --phase-main: rgb(var(--phase-main-rgb));
  --phase-secondary: rgb(var(--phase-secondary-rgb));

  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  border-radius: clamp(18px, 1.5vw, 28px);
  border: 1px solid rgba(255,255,255,0.08);

  background:
    linear-gradient(180deg, rgba(7,12,25,0.94), rgba(4,8,17,0.96)),
    radial-gradient(circle at 50% 0%, rgba(var(--phase-main-rgb), 0.10), transparent 46%);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 0 22px rgba(0,0,0,0.18),
    0 0 42px rgba(var(--phase-main-rgb), 0.08);

  transition:
    transform 550ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 550ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 550ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 550ms cubic-bezier(0.22, 1, 0.36, 1),
    background 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.roadmap-card::before,
.roadmap-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.roadmap-card::before {
  inset: 0;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.02) 16%,
      transparent 34%,
      transparent 66%,
      rgba(255,255,255,0.025) 100%
    );
}

.roadmap-card::after {
  inset: 0;
  z-index: 3;
  padding: 1.5px;
  opacity: 0;

  border: none;
  border-radius: inherit;

  background:
    conic-gradient(
      from var(--roadmap-border-angle, 0deg),

      transparent 0deg,
      transparent 34deg,

      rgba(var(--phase-main-rgb), 0.95) 64deg,
      rgba(255,255,255,0.98) 78deg,
      rgba(var(--phase-secondary-rgb), 0.90) 96deg,

      transparent 126deg,
      transparent 214deg,

      rgba(var(--phase-main-rgb), 0.95) 244deg,
      rgba(255,255,255,0.98) 258deg,
      rgba(var(--phase-secondary-rgb), 0.90) 276deg,

      transparent 306deg,
      transparent 360deg
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;

  filter:
    drop-shadow(0 0 6px rgba(var(--phase-main-rgb), 0.36))
    drop-shadow(0 0 14px rgba(var(--phase-secondary-rgb), 0.22));
}

.roadmap-card:hover::after {
  opacity: 1;
  animation:
    roadmapBorderRotate 2.4s linear infinite,
    roadmapBorderPulse 1.8s ease-in-out infinite;
}

/* ===== DESKTOP: linee dei bordi sempre attive ===== */
/* A riposo TUTTE le card hanno le linee che corrono, ma a META' velocità (4.8s).
   In hover: la card puntata va a velocità NORMALE (2.4s) e le ALTRE si disattivano;
   togliendo l'hover si torna tutte a velocità lenta. (Solo desktop / dispositivi con mouse.) */
@media (min-width: 769px) and (hover: hover) {
  .roadmap-card::after {
    opacity: 1;
    animation:
      roadmapBorderRotate 4.8s linear infinite,
      roadmapBorderPulse 3.6s ease-in-out infinite;
  }
  /* quando una card è in hover, le altre vengono disattivate */
  .roadmap-grid:has(.roadmap-card:hover) .roadmap-card::after {
    opacity: 0;
    animation-play-state: paused;
  }
  /* la card in hover resta accesa a velocità normale (specificità più alta) */
  .roadmap-grid:has(.roadmap-card:hover) .roadmap-card:hover::after {
    opacity: 1;
    animation:
      roadmapBorderRotate 2.4s linear infinite,
      roadmapBorderPulse 1.8s ease-in-out infinite;
    animation-play-state: running;
  }
}

.roadmap-card__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 0;
  padding:
    clamp(14px, 1.2vw, 22px)
    clamp(16px, 1.35vw, 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(10px, 0.8vw, 16px);
  border-radius: inherit;
  overflow: hidden;
}

/* barrido holográfico */
.roadmap-card__inner::before {
  content: "";
  position: absolute;
  inset: -20% -35%;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-14%) rotate(12deg);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 34%,
      rgba(255,255,255,0.04) 44%,
      rgba(var(--phase-main-rgb), 0.16) 50%,
      rgba(255,255,255,0.08) 56%,
      transparent 66%,
      transparent 100%
    );
  filter: blur(9px);
  mix-blend-mode: screen;
  transition:
    opacity 280ms ease,
    transform 280ms ease,
    filter 280ms ease;
}
.roadmap-card:hover .roadmap-card__inner::before {
  opacity: 0.18;
  transform: translateX(-14%) rotate(12deg);
  filter: blur(9px);
  animation: roadmapHoloSweep 900ms cubic-bezier(.16,.84,.22,1) 1;
}
.roadmap-card:hover .roadmap-card__inner:not(:hover)::before {
  opacity: 0.18;
  transform: translateX(-14%) rotate(12deg);
}
/* ==================== INNER LAYOUT ==================== */

.roadmap-card__header {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 1vw, 18px);
  text-align: center;
}
.roadmap-card__eyebrow {
  justify-self: end;
  text-align: right;
  margin: 0;
}

.roadmap-card__title {
  justify-self: center;
  margin: 0;
}

.roadmap-card__status {
  justify-self: start;
  margin: 0;
}
.roadmap-card__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 1.7em;
  padding: 0.34em 0.95em 0.28em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.035);

  font-family: "Orbitron", sans-serif;
  font-size: clamp(0.48rem, 0.45vw + 0.18vh, 0.78rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(214,228,255,0.84);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease,
    background 220ms ease;
}

.roadmap-card__title {
  margin: 0;
  max-width: 100%;
  font-family: "Space Age", "Orbitron", sans-serif;
  font-size: clamp(1.6rem, 1.9vw + 1.15vh, 3.4rem);
  line-height: 0.9;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #eef6ff;
  text-align: center;
  text-shadow:
    0 0 6px rgba(255,255,255,0.68),
    0 0 16px rgba(var(--phase-main-rgb), 0.36),
    0 0 28px rgba(var(--phase-secondary-rgb), 0.20);

  transition: color 220ms ease, text-shadow 220ms ease, transform 220ms ease;
}
.roadmap-card__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75em;
  padding: 0.32em 0.88em 0.24em;
  border-radius: 999px;
  border: 1px solid rgba(var(--phase-main-rgb), 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    radial-gradient(circle at 50% 50%, rgba(var(--phase-main-rgb), 0.12), transparent 78%);

  font-family: "Orbitron", sans-serif;
  font-size: clamp(0.46rem, 0.38vw + 0.16vh, 0.76rem);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(237,243,255,0.94);
  white-space: nowrap;

  box-shadow:
    0 0 10px rgba(var(--phase-main-rgb), 0.10),
    inset 0 0 6px rgba(255,255,255,0.04);

  transition:
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease;
}

.roadmap-card__status--active {
  border-color: rgba(116,255,120,0.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    radial-gradient(circle at 50% 50%, rgba(116,255,120,0.16), transparent 78%);
  color: rgba(220,255,228,0.96);
  box-shadow:
    0 0 10px rgba(116,255,120,0.12),
    inset 0 0 6px rgba(255,255,255,0.04);
}

/* phase 1 viva */
.roadmap-card--phase1 {
  animation: none;
}

.roadmap-card--phase1::before {
  animation: roadmapPhaseOnePulse 3.6s ease-in-out infinite;
}

.roadmap-card--phase1 .roadmap-card__status--active {
  animation: roadmapActiveBadgePulse 2.8s ease-in-out infinite;
}

/* ==================== LIST ==================== */

.roadmap-card__list {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 0.65vw, 12px);
}

.roadmap-goal {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 0.65vw, 12px);

  padding:
    clamp(8px, 0.6vw, 12px)
    clamp(10px, 0.85vw, 16px);

  border-radius: clamp(14px, 0.9vw, 18px);
  border: 1px solid rgba(255,255,255,0.08);

  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
    radial-gradient(circle at 0% 50%, rgba(var(--phase-main-rgb), 0.12), transparent 44%);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.015),
    0 0 14px rgba(0,0,0,0.10);

  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease,
    filter 220ms ease;
}

.roadmap-goal__dot {
  width: clamp(8px, 0.5vw + 0.12vh, 13px);
  height: clamp(8px, 0.5vw + 0.12vh, 13px);
  border-radius: 50%;
  flex-shrink: 0;

  background:
    radial-gradient(circle,
      rgba(255,255,255,0.95) 0%,
      rgba(var(--phase-main-rgb), 0.92) 48%,
      rgba(var(--phase-secondary-rgb), 0.76) 100%);

  box-shadow:
    0 0 6px rgba(var(--phase-main-rgb), 0.56),
    0 0 12px rgba(var(--phase-secondary-rgb), 0.22);

  transition: box-shadow 220ms ease, transform 220ms ease, filter 220ms ease;
}

.roadmap-goal__text {
  min-width: 0;
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(0.72rem, 0.52vw + 0.24vh, 1.18rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: rgba(236,242,252,0.95);
  text-align: left;
  text-wrap: balance;
  overflow-wrap: anywhere;

  transition: color 220ms ease, text-shadow 220ms ease;
}

.roadmap-goal__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(44px, 3.8vw, 72px);
  min-height: clamp(22px, 1.9vw, 34px);
  padding: 0.28em 0.7em 0.2em;
  border-radius: 999px;
  white-space: nowrap;

  font-family: "Orbitron", sans-serif;
  font-size: clamp(0.4rem, 0.28vw + 0.14vh, 0.68rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: #d7ffe0;
  border: 1px solid rgba(116,255,120,0.32);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    radial-gradient(circle at 50% 50%, rgba(116,255,120,0.16), transparent 78%);
  box-shadow:
    0 0 8px rgba(116,255,120,0.10),
    inset 0 0 4px rgba(255,255,255,0.04);

  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease,
    color 220ms ease,
    transform 220ms ease;
}

.roadmap-goal--done {
  border-color: rgba(116,255,120,0.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    radial-gradient(circle at 0% 50%, rgba(116,255,120,0.14), transparent 42%);
}

.roadmap-goal--done .roadmap-goal__dot {
  background:
    radial-gradient(circle,
      rgba(255,255,255,0.96) 0%,
      rgba(116,255,120,0.92) 48%,
      rgba(54,182,92,0.82) 100%);
  box-shadow:
    0 0 6px rgba(116,255,120,0.58),
    0 0 14px rgba(54,182,92,0.24);
}

.roadmap-goal--done .roadmap-goal__text {
  color: rgba(224,255,232,0.96);
  text-shadow: 0 0 10px rgba(116,255,120,0.08);
}

.roadmap-goal--done .roadmap-goal__tag {
  border-color: rgba(116,255,120,0.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)),
    radial-gradient(circle at 50% 50%, rgba(116,255,120,0.22), transparent 78%);
  box-shadow:
    0 0 10px rgba(116,255,120,0.16),
    0 0 22px rgba(54,182,92,0.10),
    inset 0 0 4px rgba(255,255,255,0.05);
}

/* ==================== HOVER ==================== */

/* ===== ROADMAP — SMOOTH HOVER SYSTEM ===== */

#roadmap.is-active .roadmap-card,
#roadmap.is-active .roadmap-card *,
#roadmap.is-active .roadmap-card::before,
#roadmap.is-active .roadmap-card::after {
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 720ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 720ms cubic-bezier(0.22, 1, 0.36, 1),
    background 720ms cubic-bezier(0.22, 1, 0.36, 1),
    color 720ms cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow 720ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* apagamos suavemente las NO activas */
#roadmap.is-active .roadmap-grid:has(.roadmap-card:hover) .roadmap-card:not(:hover) {
  opacity: 0.42 !important;

  filter:
    saturate(0.45)
    brightness(0.55)
    blur(3px) !important;

  transform: scale(0.97) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.008),
    0 0 10px rgba(0,0,0,0.14) !important;
}

/* quitamos efectos internos de las NO activas, pero con transición */
#roadmap.is-active .roadmap-grid:has(.roadmap-card:hover) .roadmap-card:not(:hover)::after,
#roadmap.is-active .roadmap-grid:has(.roadmap-card:hover) .roadmap-card:not(:hover) .roadmap-card__inner::before {
  opacity: 0 !important;
  animation: none !important;
}

#roadmap.is-active .roadmap-grid:has(.roadmap-card:hover) .roadmap-card:not(:hover) .roadmap-card__title,
#roadmap.is-active .roadmap-grid:has(.roadmap-card:hover) .roadmap-card:not(:hover) .roadmap-card__eyebrow,
#roadmap.is-active .roadmap-grid:has(.roadmap-card:hover) .roadmap-card:not(:hover) .roadmap-card__status,
#roadmap.is-active .roadmap-grid:has(.roadmap-card:hover) .roadmap-card:not(:hover) .roadmap-goal {
  text-shadow: none !important;
  box-shadow: none !important;
}

/* tarjeta activa */
#roadmap.is-active .roadmap-card:hover {
  z-index: 6;

  opacity: 1 !important;

  transform:
    translateY(-2px)
    scale(1.015) !important;

  border-color: rgba(var(--phase-main-rgb), 0.24);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.025),
    0 0 34px rgba(0,0,0,0.26),
    0 0 68px rgba(var(--phase-main-rgb), 0.18),
    0 0 96px rgba(var(--phase-secondary-rgb), 0.10) !important;

  filter:
    saturate(1.12)
    brightness(1.08) !important;
}

/* borde energético */
#roadmap.is-active .roadmap-card:hover::after {
  opacity: 1 !important;
  animation:
    roadmapBorderRotate 2.4s linear infinite,
    roadmapBorderPulse 1.8s ease-in-out infinite;
}

#roadmap.is-active .roadmap-card:hover .roadmap-card__eyebrow {
  color: rgba(244,248,255,0.96);
  border-color: rgba(var(--phase-main-rgb), 0.22);

  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)),
    radial-gradient(circle at 50% 50%, rgba(var(--phase-main-rgb), 0.13), transparent 78%);

  box-shadow:
    0 0 12px rgba(var(--phase-main-rgb), 0.12),
    inset 0 0 7px rgba(255,255,255,0.04);
}

#roadmap.is-active .roadmap-card:hover .roadmap-card__title {
  color: rgba(var(--phase-main-rgb), 0.97);

  text-shadow:
    0 0 7px rgba(var(--phase-main-rgb), 0.74),
    0 0 16px rgba(var(--phase-main-rgb), 0.62),
    0 0 30px rgba(var(--phase-secondary-rgb), 0.38),
    0 0 46px rgba(var(--phase-secondary-rgb), 0.18);
}

#roadmap.is-active .roadmap-card:hover .roadmap-card__status {
  border-color: rgba(var(--phase-main-rgb), 0.46);

  box-shadow:
    0 0 16px rgba(var(--phase-main-rgb), 0.18),
    inset 0 0 7px rgba(255,255,255,0.045);
}

#roadmap.is-active .roadmap-card:hover .roadmap-goal {
  border-color: rgba(var(--phase-main-rgb), 0.17);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.018),
    0 0 20px rgba(var(--phase-main-rgb), 0.08);
}

#roadmap.is-active .roadmap-card:hover .roadmap-goal__dot {
  box-shadow:
    0 0 8px rgba(var(--phase-main-rgb), 0.72),
    0 0 18px rgba(var(--phase-secondary-rgb), 0.28);
}

#roadmap.is-active .roadmap-card:hover .roadmap-goal__text {
  color: rgba(245,249,255,0.98);
}

#roadmap.is-active .roadmap-card:hover .roadmap-goal__tag {
  transform: translateY(-1px);
}
/* ==================== PHASE COLORS ==================== */

.roadmap-card--phase1 {
  --phase-main-rgb: 116, 255, 120;
  --phase-secondary-rgb: 38, 154, 74;
}

.roadmap-card--phase2 {
  --phase-main-rgb: 98, 195, 255;
  --phase-secondary-rgb: 71, 97, 255;
}

.roadmap-card--phase3 {
  --phase-main-rgb: 180, 107, 255;
  --phase-secondary-rgb: 90, 43, 158;
}

.roadmap-card--phase4 {
  --phase-main-rgb: 255, 138, 43;
  --phase-secondary-rgb: 158, 74, 26;
}

/* ==================== CINEMATIC ENTRY ==================== */

#roadmap.is-active .roadmap-grid::before {
  animation: roadmapConnectorGlowV 1.2s ease-out both;
}

#roadmap.is-active .roadmap-grid::after {
  animation: roadmapConnectorGlowH 1.2s ease-out both 0.08s;
}

#roadmap:not(.is-active) .roadmap-card {
  opacity: 0;
}

#roadmap.is-active .roadmap-card {
  opacity: 1;
}

#roadmap.is-active .roadmap-card:nth-child(1) {
  animation: roadmapCardIntro 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0s;
}

#roadmap.is-active .roadmap-card:nth-child(2) {
  animation: roadmapCardIntro 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}

#roadmap.is-active .roadmap-card:nth-child(3) {
  animation: roadmapCardIntro 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.36s;
}

#roadmap.is-active .roadmap-card:nth-child(4) {
  animation: roadmapCardIntro 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.54s;
}

/* ==================== COMPACT HEIGHT ==================== */

@media (max-height: 900px) {
  .section__content--roadmap {
    padding-top: clamp(74px, 6.4vh, 94px);
    padding-bottom: clamp(74px, 6.4vh, 94px);
  }

  .roadmap-grid {
    gap: 14px;
  }

  .roadmap-card__inner {
    padding: 14px 16px;
    gap: 10px;
  }

  .roadmap-card__list {
    gap: 8px;
  }

  .roadmap-goal {
    padding: 8px 10px;
  }
}

@media (max-height: 780px) {
  .section__content--roadmap {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  .roadmap-card__inner {
    padding: 12px 14px;
    gap: 8px;
  }

  .roadmap-card__eyebrow {
    font-size: clamp(0.42rem, 0.38vw + 0.12vh, 0.62rem);
  }

  .roadmap-card__title {
    font-size: clamp(1.3rem, 1.25vw + 0.95vh, 2.5rem);
  }

  .roadmap-card__status {
    font-size: clamp(0.42rem, 0.28vw + 0.12vh, 0.62rem);
  }

  .roadmap-goal__text {
    font-size: clamp(0.64rem, 0.42vw + 0.16vh, 0.92rem);
  }

  .roadmap-goal__tag {
    min-width: 40px;
    min-height: 20px;
    font-size: clamp(0.36rem, 0.22vw + 0.10vh, 0.56rem);
  }

  .roadmap-goal {
    padding: 7px 9px;
  }
}

@media (max-height: 680px) {
  .roadmap-grid {
    gap: 10px;
  }

  .roadmap-card__inner {
    padding: 10px 12px;
    gap: 7px;
  }

  .roadmap-card__header {
    gap: 5px;
  }

  .roadmap-card__list {
    gap: 6px;
  }

  .roadmap-goal {
    padding: 6px 8px;
    gap: 7px;
  }

  .roadmap-goal__text {
    line-height: 1.02;
  }
}

/* ==================== WIDTH ADAPTATION ==================== */

@media (max-width: 1100px) {
  .section__content--roadmap {
    padding-left: 18px;
    padding-right: 18px;
  }

  .roadmap-grid {
    gap: 12px;
  }

  .roadmap-card__inner {
    padding: 14px 14px;
  }
}

@media (max-width: 860px) {
  .roadmap-goal__text {
    font-size: clamp(0.66rem, 0.58vw + 0.18vh, 0.96rem);
  }

  .roadmap-goal {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .roadmap-goal__tag {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
  }
}

/* ==================== EXTREME SAFE MODE ==================== */
/* Aquí preferimos scroll interno ANTES que cortar o perder contenido */

@media (max-width: 760px), (max-height: 560px) {
  .roadmap-viewport {
    overflow: auto;
    padding-right: 4px;
  }

  .roadmap-viewport::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .roadmap-viewport::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.16);
    border-radius: 999px;
  }

  .roadmap-grid {
    height: auto;
    min-height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 12px;
  }

  .roadmap-grid::before,
  .roadmap-grid::after {
    display: none;
  }

  .roadmap-card {
    min-height: 180px;
    animation: none !important;
  }

  .roadmap-card__inner {
    padding: 14px;
  }

  .roadmap-card__title {
    font-size: clamp(1.35rem, 1.8vw + 1vh, 2.2rem);
  }

  .roadmap-goal__text {
    font-size: clamp(0.72rem, 0.56vw + 0.20vh, 0.92rem);
  }
}

/* ==================== KEYFRAMES ==================== */

@keyframes roadmapCardIntro {
  0% {
    opacity: 0;
    transform: translateY(64px) scale(0.94);
    filter: blur(10px) brightness(1.18);
  }
  12% {
    opacity: 1;
    transform: translateY(52px) scale(0.955);
    filter: blur(8px) brightness(1.12);
  }
  55% {
    opacity: 1;
    transform: translateY(-6px) scale(1.015);
    filter: blur(1.2px) brightness(1.06);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) brightness(1);
  }
}

@keyframes roadmapConnectorGlowV {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleY(0.2);
    filter: blur(8px);
  }
  100% {
    opacity: 0.55;
    transform: translateX(-50%) scaleY(1);
    filter: blur(0);
  }
}

@keyframes roadmapConnectorGlowH {
  0% {
    opacity: 0;
    transform: translateY(-50%) scaleX(0.2);
    filter: blur(8px);
  }
  100% {
    opacity: 0.55;
    transform: translateY(-50%) scaleX(1);
    filter: blur(0);
  }
}

@keyframes roadmapHoloSweep {
  0% {
    transform: translateX(-42%) rotate(12deg);
    opacity: 0;
  }
  18% {
    opacity: 0.95;
  }
  78% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(42%) rotate(12deg);
    opacity: 0;
  }
}

@keyframes roadmapPhaseOnePulse {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.02),
      0 0 22px rgba(0,0,0,0.18),
      0 0 42px rgba(116,255,120,0.08);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.02),
      0 0 26px rgba(0,0,0,0.18),
      0 0 56px rgba(116,255,120,0.12);
  }
}

@keyframes roadmapActiveBadgePulse {
  0%, 100% {
    box-shadow:
      0 0 10px rgba(116,255,120,0.12),
      inset 0 0 6px rgba(255,255,255,0.04);
  }
  50% {
    box-shadow:
      0 0 16px rgba(116,255,120,0.18),
      0 0 28px rgba(54,182,92,0.08),
      inset 0 0 6px rgba(255,255,255,0.04);
  }
}

@keyframes roadmapBorderRotate {
  0% {
    --roadmap-border-angle: 0deg;
  }

  100% {
    --roadmap-border-angle: 360deg;
  }
}

@keyframes roadmapBorderPulse {
  0%, 100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }
}
.roadmap-goal__text {
  min-width: 0;
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(0.72rem, 0.52vw + 0.24vh, 1.18rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: rgba(236,242,252,0.95);
  text-align: left;
  text-wrap: balance;
  overflow-wrap: anywhere;

  transition: color 220ms ease, text-shadow 220ms ease;
}

.roadmap-goal__text.is-typing {
  color: rgba(242,247,255,0.98);
}

.roadmap-typing-tail {
  color: rgba(255,255,255,0.98);
  text-shadow:
    0 0 4px rgba(var(--phase-main-rgb), 0.95),
    0 0 10px rgba(var(--phase-main-rgb), 0.78),
    0 0 18px rgba(var(--phase-secondary-rgb), 0.48);
  animation: roadmapTypingPulse 180ms ease-out infinite alternate;
}

@keyframes roadmapTypingPulse {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(1.22);
  }
}
/* ======================================================================== */
/* ====================== END ROADMAP SECTION — SEND THIS ================== */
/* ======================================================================== */

/* ==========================================================================
   MOBILE (≤768px) — ROADMAP: 4 card in colonna, tutte uguali, una sola
   schermata senza scroll. Niente eyebrow, niente tag DONE; titolo + stato a
   destra; testi su una sola riga. Stili "hover" sempre attivi (glow ridotto).
   Cascata di ingresso: card da sinistra → accensione titolo → scrittura testi
   → glow esterno → contorno gradiente. Totale ~2,3s (slide card ~1,2s).
   ========================================================================== */

/* indice di fase per gli scaglionamenti (0..3) */
.roadmap-card--phase1 { --rm-i: 0; }
.roadmap-card--phase2 { --rm-i: 1; }
.roadmap-card--phase3 { --rm-i: 2; }
.roadmap-card--phase4 { --rm-i: 3; }

@media (max-width: 768px) {
  /* --- layout: 4 card in colonna, niente scroll ---
     padding alto/basso per stare tra la barra HUD in alto (80px) e quella in
     basso (80px), così la 4ª card non finisce sotto i pulsanti. */
  .section__content--roadmap {
    padding: 88px 12px 90px !important;
    align-items: center !important;
  }

  .roadmap-viewport {
    /* overflow visible: quando una card viene toccata e si ingrandisce di poco,
       i bordi/angoli non vengono più tagliati. Niente scroll perché la sezione è
       full-screen fissa e il contenuto è già dimensionato per stare nello schermo. */
    overflow: visible !important;
    height: 100%;
    padding-right: 0 !important;
  }

  .roadmap-grid {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .roadmap-grid::before,
  .roadmap-grid::after {
    display: none !important;   /* niente connettori in colonna */
  }

  /* card tutte uguali; glow esterno persistente ma ridotto (no overlap) */
  .roadmap-card {
    min-height: 0 !important;
    border-color: rgba(var(--phase-main-rgb), 0.26);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.025),
      0 0 14px rgba(0,0,0,0.24),
      0 0 22px rgba(var(--phase-main-rgb), 0.13);
  }

  .roadmap-card__inner {
    padding: 9px 12px !important;
    gap: 7px !important;
    grid-template-rows: auto 1fr !important;
  }

  /* niente barrido holográfico su mobile (perf) */
  .roadmap-card__inner::before { display: none !important; }

  /* --- header: niente eyebrow; titolo + stato allineati a destra --- */
  .roadmap-card__header {
    grid-template-columns: 1fr auto auto !important;
    gap: 8px !important;
  }
  .roadmap-card__eyebrow { display: none !important; }

  .roadmap-card__title {
    grid-column: 2 !important;
    justify-self: end !important;
    font-size: clamp(1.05rem, 5.2vw, 1.6rem) !important;
    /* glow persistente (stile hover sempre attivo) */
    color: rgba(var(--phase-main-rgb), 0.98);
    text-shadow:
      0 0 6px rgba(var(--phase-main-rgb), 0.7),
      0 0 14px rgba(var(--phase-main-rgb), 0.5),
      0 0 26px rgba(var(--phase-secondary-rgb), 0.30);
  }

  .roadmap-card__status {
    grid-column: 3 !important;
    justify-self: end !important;
  }

  /* --- goal: una sola riga, testo adattivo, niente tag DONE --- */
  .roadmap-card__list {
    gap: 5px !important;
  }

  .roadmap-goal {
    grid-template-columns: auto 1fr auto !important;
    gap: 8px !important;
    padding: 5px 9px !important;
  }

  /* DONE rimesso: tag con contorno sul lato destro del container del testo */
  .roadmap-goal__tag {
    display: inline-flex !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    min-width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0.22em 0.55em 0.18em !important;
    font-size: clamp(0.34rem, 1.7vw, 0.52rem) !important;
  }

  .roadmap-goal__text {
    grid-column: 2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    text-wrap: nowrap !important;
    overflow-wrap: normal !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    font-size: clamp(0.46rem, 2.5vw, 0.74rem) !important;
  }

  /* le righe "DONE" (ora senza tag) → testo neon verde pulsante */
  .roadmap-goal--done .roadmap-goal__text {
    color: rgba(206,255,214,0.98) !important;
    animation: roadmapDoneNeon 1.8s ease-in-out infinite;
  }

  /* ====================== CASCATA DI INGRESSO (mobile) ======================
     Tempistica per card i (0..3): base = i * 0.23s  →  slide card scaglionate
     su ~1,2s totali. Ogni sub-animazione parte quando la precedente è a metà:
       slide   : +0.00s  (0.50s)
       titolo  : +0.25s  (0.45s)
       testi   : +0.475s (0.40s, scaglionati per riga)
       glow    : +0.75s  (0.45s)
       bordo   : +0.975s (0.60s)  → ultima card finisce ~2,3s
     ====================================================================== */

  /* card: entra da fuori schermo a sinistra + glow esterno che cresce */
  #roadmap.is-active .roadmap-card {
    animation:
      roadmapMobIn 0.5s cubic-bezier(.22,1,.36,1) backwards,
      roadmapMobGlow 0.45s ease backwards !important;
    animation-delay:
      calc(var(--rm-i) * 0.23s),
      calc(var(--rm-i) * 0.23s + 0.75s) !important;
  }

  /* titolo: accensione */
  #roadmap.is-active .roadmap-card__title {
    animation: roadmapMobTitle 0.45s ease backwards;
    animation-delay: calc(var(--rm-i) * 0.23s + 0.25s);
  }

  /* testi: "scrittura" con wipe da sinistra, righe scaglionate */
  #roadmap.is-active .roadmap-goal {
    animation: roadmapMobGoal 0.4s ease backwards;
  }
  #roadmap.is-active .roadmap-goal:nth-child(1) {
    animation-delay: calc(var(--rm-i) * 0.23s + 0.475s);
  }
  #roadmap.is-active .roadmap-goal:nth-child(2) {
    animation-delay: calc(var(--rm-i) * 0.23s + 0.595s);
  }
  #roadmap.is-active .roadmap-goal:nth-child(3) {
    animation-delay: calc(var(--rm-i) * 0.23s + 0.715s);
  }

  /* contorno gradiente: sempre attivo (rotazione + pulse) ma compare per ultimo */
  #roadmap.is-active .roadmap-card::after {
    opacity: 1;
    animation:
      roadmapBorderRotate 2.4s linear infinite,
      roadmapBorderPulse 1.8s ease-in-out infinite,
      roadmapMobBorderIn 0.6s ease backwards;
    animation-delay:
      0s,
      0s,
      calc(var(--rm-i) * 0.23s + 0.975s);
  }
}

@keyframes roadmapMobIn {
  0%   { opacity: 0; transform: translateX(-120vw); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes roadmapMobGlow {
  0% {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.01),
      0 0 8px rgba(0,0,0,0.18);
  }
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.025),
      0 0 14px rgba(0,0,0,0.24),
      0 0 22px rgba(var(--phase-main-rgb), 0.13);
  }
}

@keyframes roadmapMobTitle {
  0%   { opacity: 0; filter: brightness(0.5); }
  100% { opacity: 1; filter: brightness(1); }
}

@keyframes roadmapMobGoal {
  0%   { opacity: 0; transform: translateX(-12px); clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; transform: translateX(0);     clip-path: inset(0 0 0 0); }
}

@keyframes roadmapMobBorderIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes roadmapDoneNeon {
  0%, 100% {
    text-shadow:
      0 0 4px rgba(116,255,120,0.5),
      0 0 10px rgba(116,255,120,0.28);
  }
  50% {
    text-shadow:
      0 0 8px rgba(116,255,120,0.95),
      0 0 18px rgba(116,255,120,0.6),
      0 0 28px rgba(54,182,92,0.4);
  }
}