/* ── Hero ────────────────────────────────────────────── */
.hero { padding: 60px 0 40px; text-align: center }
.badge {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px;
    border-radius: 50px; background: var(--green-dim); color: var(--green);
    font-family: var(--mono); font-size: 0.75em; font-weight: 600;
    letter-spacing: 1px; text-transform: uppercase; margin-bottom: 24px;
    border: 1px solid rgba(0, 255, 136, 0.2);
}
.badge--crashed { background: var(--red-dim); color: var(--red); border-color: rgba(255, 51, 102, 0.2); animation: pulse 2s ease-in-out infinite }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.6 } }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1.5s ease-in-out infinite }
@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: 0.3 } }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.15; margin-bottom: 16px; letter-spacing: -0.02em }
.answer {
    font-family: var(--mono); font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 700; margin: 20px 0 30px; line-height: 1;
}
.answer--yes { color: var(--red); text-shadow: var(--glow-red); animation: shake 0.6s ease-in-out }
.answer--no { color: var(--green); text-shadow: var(--glow-green) }
@keyframes shake {
    0%, 100% { transform: translateX(0) scale(1) }
    15% { transform: translateX(-8px) scale(1.02) }
    30% { transform: translateX(8px) scale(1.02) }
    45% { transform: translateX(-5px) scale(1.01) }
    60% { transform: translateX(5px) scale(1.01) }
    75% { transform: translateX(-2px) }
}

/* ── Countdown ──────────────────────────────────────── */
.countdown { display: flex; justify-content: center; gap: 12px; margin: 30px 0 10px; flex-wrap: wrap }
.countdown__unit {
    display: flex; flex-direction: column; align-items: center;
    min-width: 90px; padding: 18px 16px; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--r); transition: all 0.3s ease;
}
.countdown__unit:hover { border-color: var(--border-glow); transform: translateY(-2px) }
.countdown__val { font-family: var(--mono); font-size: 2.2rem; font-weight: 700; line-height: 1; margin-bottom: 6px }
.countdown__lbl { font-size: 0.7em; color: var(--text-dimmer); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600 }
.countdown__since { text-align: center; color: var(--text-dim); font-size: 0.9em; margin-top: 16px; font-style: italic }

/* ── Status grid ────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 40px 0 }
.status-card { padding: 24px }
.status-card .icon { font-size: 1.8rem; margin-bottom: 12px }
.status-card .title { font-size: 0.75em; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-dimmer); font-weight: 600; margin-bottom: 6px }
.status-card .value { font-family: var(--mono); font-size: 1.3rem; font-weight: 700 }
.value--green { color: var(--green) }
.value--red { color: var(--red) }
.value--blue { color: var(--blue) }

/* ── Evidence ───────────────────────────────────────── */
.evidence { margin: 50px 0 }
.evidence__header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px }
.evidence__title { font-size: 1.3rem; font-weight: 700 }
.evidence__line { flex: 1; height: 1px; background: var(--border) }
.evidence__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px }
.evidence__item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; transition: all 0.3s ease }
.evidence__item:hover { border-color: var(--border-glow); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) }
.evidence__item img, .evidence__item iframe { width: 100%; display: block; height: 220px; object-fit: cover; border: none }
.evidence__caption { padding: 14px 18px; font-size: 0.85em; color: var(--text-dim); border-top: 1px solid var(--border); font-style: italic }
.empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; background: var(--bg-card); border: 2px dashed var(--border); border-radius: var(--r); color: var(--text-dimmer); font-size: 0.95em }
.empty .icon { font-size: 2.5rem; margin-bottom: 12px; display: block }

/* ── Responsive (dashboard) ──────────────────────────── */
@media (max-width: 768px) {
    .hero { padding: 40px 0 30px }
    .countdown__unit { min-width: 75px; padding: 14px 12px }
    .countdown__val { font-size: 1.8rem }
    .grid { grid-template-columns: 1fr }
    .evidence__grid { grid-template-columns: 1fr }
}
@media (max-width: 400px) {
    .countdown { gap: 8px }
    .countdown__unit { min-width: 65px; padding: 12px 10px }
    .countdown__val { font-size: 1.5rem }
}