/* ─── Hero ─── */
.roof-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0f172a 100%);
    min-height: 100vh;
}
.roof-overlay {
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(249,115,22,0.12) 0%, transparent 70%);
}

/* ─── Fade in up ─── */
.fade-in-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-up.visible { opacity: 1; transform: translateY(0); }

/* ─── Damage cards ─── */
.damage-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.damage-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }