/* MassiveGRID — Competitor comparison pages */
/* Page-specific hero overrides */
.hero { position: relative; min-height: 80vh; display: flex; flex-direction: column; justify-content: center; padding: 10rem 3rem 6rem; z-index: 1; }
.hero-content { max-width: 1000px; margin: 0 auto; text-align: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--accent-gold-dim); border: 1px solid rgba(245, 166, 35, 0.3); border-radius: 100px; font-size: 0.85rem; color: var(--accent-gold); margin-bottom: 2rem; animation: fadeInUp 0.8s ease forwards; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; letter-spacing: -0.03em; animation: slideUp 0.5s ease forwards; }
.hero h1 .gradient-text { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-subtitle { font-size: 1.25rem; color: var(--text-secondary); max-width: 700px; margin: 0 auto 2.5rem; line-height: 1.7; animation: fadeInUp 0.8s ease 0.2s forwards; opacity: 0; }
.cta-box { max-width: 900px; }
.cta-subtitle { max-width: 600px; margin-left: auto; margin-right: auto; }
/* ── Mobile & Tablet Performance (≤1024px) ── */
/* Animations are killed globally by critical.css * selector. Explicit backup: */
@media (max-width: 1024px) {
    .hero-badge, .hero h1, .hero-subtitle { animation: none; opacity: 1; }
}
@media (max-width: 768px) { .hero { padding: 8rem 1.5rem 4rem; } }
@media (max-width: 480px) { .hero h1 { font-size: 2rem; } }