/* ═══════════════════════════════════════════
   CHALLENGE
═══════════════════════════════════════════ */
#challenge { padding: 140px 24px; max-width: 1200px; margin: 0 auto; }
.challenge-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }

.section-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--cyan);
  margin-bottom: 20px; opacity: 0;
}

/* Default section-title state */
.section-title {
  font-family: 'Space Grotesk', sans-serif; font-size: clamp(36px, 5vw, 64px);
  font-weight: 800; line-height: 1.05; margin-bottom: 28px; opacity: 0;
}
.section-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--amber), var(--pink));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Clip-path reveal — only for challenge section title */
#challenge .section-title {
  clip-path: inset(0 100% 0 0);
}
#challenge .section-title.revealed {
  opacity: 1;
  clip-path: inset(0 0% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.16,1,0.3,1);
}

.challenge-desc { font-size: 18px; line-height: 1.8; color: var(--muted); margin-bottom: 36px; opacity: 0; }
.feature-list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.feature-item { display: flex; align-items: center; gap: 16px; font-size: 16px; color: var(--text); opacity: 0; }
.feature-icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.feature-item:nth-child(1) .feature-icon { background: rgba(0,245,255,0.12); }
.feature-item:nth-child(2) .feature-icon { background: rgba(168,85,247,0.12); }
.feature-item:nth-child(3) .feature-icon { background: rgba(16,185,129,0.12); }
.feature-item:nth-child(4) .feature-icon { background: rgba(245,158,11,0.12); }

/* Card stack */
.challenge-right {
  perspective: 1200px; height: 420px;
  display: flex; align-items: center; justify-content: center; opacity: 0;
}
.card-stack { position: relative; width: 300px; height: 380px; }
.product-card {
  position: absolute; width: 280px; height: 360px; border-radius: 20px;
  padding: 28px; display: flex; flex-direction: column; justify-content: space-between;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s;
  cursor: none; transform-style: preserve-3d; overflow: hidden;
}
.product-card:nth-child(1) {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 1px solid rgba(0,245,255,0.2);
  transform: rotate(-6deg) translateY(10px) translateX(-10px);
  z-index: 1; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.product-card:nth-child(2) {
  background: linear-gradient(135deg, #1a0a2e, #2d1b4e);
  border: 1px solid rgba(168,85,247,0.25);
  transform: rotate(3deg) translateY(-5px) translateX(10px);
  z-index: 2; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.product-card:nth-child(3) {
  background: linear-gradient(135deg, #0a1a1a, #0d2626);
  border: 1px solid rgba(16,185,129,0.25);
  transform: rotate(0deg); z-index: 3; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.card-stack:hover .product-card:nth-child(1) { transform: rotate(-12deg) translateY(30px) translateX(-50px); }
.card-stack:hover .product-card:nth-child(2) { transform: rotate(8deg) translateY(-15px) translateX(50px); }
.card-stack:hover .product-card:nth-child(3) { transform: rotate(0deg) translateY(-20px); box-shadow: 0 40px 80px rgba(0,0,0,0.5); }

/* Holographic foil overlay on cards */
.holo-foil {
  position: absolute; inset: 0; border-radius: inherit;
  background: conic-gradient(from var(--foil-angle,0deg) at var(--foil-x,50%) var(--foil-y,50%),
    rgba(0,245,255,0.2) 0deg, rgba(168,85,247,0.2) 90deg,
    rgba(217,70,239,0.2) 180deg, rgba(16,185,129,0.12) 270deg,
    rgba(0,245,255,0.2) 360deg);
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none; mix-blend-mode: screen; z-index: 10;
}
.product-card:hover .holo-foil { opacity: 1; }

.card-month { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.product-card:nth-child(1) .card-month { color: var(--cyan); }
.product-card:nth-child(2) .card-month { color: var(--purple); }
.product-card:nth-child(3) .card-month { color: var(--green); }

.card-name { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700; margin: 12px 0 8px; }
.card-desc { font-size: 13px; color: var(--muted); line-height: 1.6; }
.card-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; border-radius: 20px;
}
.product-card:nth-child(1) .card-status { background: rgba(0,245,255,0.1);   color: var(--cyan); }
.product-card:nth-child(2) .card-status { background: rgba(168,85,247,0.1);  color: var(--purple); }
.product-card:nth-child(3) .card-status { background: rgba(16,185,129,0.1);  color: var(--green); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: status-pulse 1.5s ease-in-out infinite; }
@keyframes status-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }