/* ============================== REALSAVVY – HOME HERO AEO vFinal ============================== */ /* Animated subtle gradient motion */ @keyframes rs-hero-fade { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Title fade + scale animation */ @keyframes rs-hero-title-in { 0% { opacity: 0; transform: translateY(18px) scale(0.97); } 60% { opacity: 1; transform: translateY(0) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .rs-home-hero { background: radial-gradient(circle at 72% 15%, rgba(252,68,68,0.65) 0%, rgba(252,68,68,0.18) 22%, transparent 55%), linear-gradient(125deg, #111315, #1b1d21, #000000, #2a2d33); background-size: 200% 200%; animation: rs-hero-fade 18s ease infinite; color: #ffffff; padding: 9.5rem 12rem 6rem; width: 100%; text-align: center; } .rs-home-hero-inner { max-width: 900px; margin: 0 auto; } .rs-home-hero-title { font-size: 2.95rem; line-height: 1.1; margin: 0 0 1.3rem; font-weight: 600; animation: rs-hero-title-in 0.7s ease-out 0.2s both; } .rs-home-hero-subtitle { font-size: 1.15rem; color: #e3e4e6; margin: 0 0 1rem; line-height: 1.6; } .rs-home-hero-support { font-size: 1rem; color: #c8c9cb; margin: 0 auto 2.6rem; line-height: 1.65; max-width: 760px; } .rs-home-hero-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .rs-btn { padding: 1rem 1.8rem; text-decoration: none; border-radius: 50px; font-size: 1rem; font-weight: 500; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } /* Primary (Red CTA) */ .rs-btn-primary { background: #FC4444; color: #ffffff; border-color: #FC4444; } .rs-btn-primary:hover { background: #df3b3b; border-color: #df3b3b; transform: translateY(-2px); } /* Secondary Outline Button */ .rs-btn-secondary { background: transparent; color: #ffffff; border-color: rgba(255,255,255,0.75); } .rs-btn-secondary:hover { background: #ffffff; color: #000000; transform: translateY(-2px); } .rs-hero-undernote { font-size: 0.95rem; margin-top: 0.75rem; color: #bfc0c2; line-height: 1.55; max-width: 650px; margin-left: auto; margin-right: auto; } /* Responsive */ @media (max-width: 1100px) { .rs-home-hero { padding: 8rem 6rem 4.5rem; } .rs-home-hero-title { font-size: 2.4rem; } } @media (max-width: 800px) { .rs-home-hero { padding: 6rem 2rem 4rem; } .rs-home-hero-title { font-size: 2.1rem; } } @media (max-width: 600px) { .rs-home-hero { padding: 5rem 1.25rem 3.5rem; } .rs-home-hero-buttons { flex-direction: column; } .rs-btn { width: 100%; } }