.hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding: 10rem 3rem 4rem; }
    .hero-bg-logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
    .hero-bg-logo img { width: min(700px, 90vw); opacity: 0.07; }
    .hero-inner { position: relative; z-index: 2; max-width: 1000px; width: 100%; }
    .hero-eyebrow { font-family: var(--hyde); font-size: 0.65rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--red); margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 0.6s 0.2s ease forwards; }
    .hero-title { font-family: var(--carnage); font-size: clamp(60px, 11vw, 160px); line-height: 0.9; color: var(--red); text-shadow: 0 0 60px rgba(167,0,0,0.5), 0 0 120px rgba(167,0,0,0.2), 2px 2px 0px #000; white-space: nowrap; opacity: 0; animation: fadeUp 0.7s 0.4s ease forwards; }
    .hero-divider { width: 0; height: 2px; background: var(--red); margin: 2rem 0; opacity: 0; animation: expandWidth 0.6s 0.9s ease forwards; }
    .hero-sub { font-family: var(--carnage); font-size: clamp(1.1rem, 2.5vw, 1.6rem); line-height: 1.5; color: var(--white); max-width: 600px; opacity: 0; animation: fadeUp 0.6s 1s ease forwards; }
    .hero-cta { display: flex; gap: 1.2rem; margin-top: 3rem; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.6s 1.2s ease forwards; }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes expandWidth { from { opacity: 0; width: 0; } to { opacity: 1; width: 60px; } }
    @media (max-width: 768px) { .hero { padding: 8rem 1.5rem 3rem; } .hero-title { white-space: normal; font-size: clamp(56px, 14vw, 120px); } }