.hero {
    margin-top: 80px;
    padding: 6rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: 
                linear-gradient(135deg, rgba(255, 240, 245, 0.46) 0%, rgba(255, 228, 236, 0.44) 50%, rgba(221, 160, 221, 0.43) 100%),
                url('../images/image1.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 50%, rgba(186, 85, 211, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 182, 193, 0.2) 0%, transparent 50%); pointer-events: none; }
.hero-content { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.hero-badge { display: inline-block; background: var(--purple-btn); color: var(--white); padding: 0.5rem 1.5rem; border-radius: 50px; font-size: 0.9rem; font-weight: 700; margin-bottom: 1.5rem; box-shadow: 0 4px 15px rgba(186, 85, 211, 0.3); animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero h1 { font-size: 3.5rem; font-weight: 800; color: var(--purple-dark); margin-bottom: 1rem; line-height: 1.2; text-shadow: 2px 2px 4px rgba(0,0,0,0.05); }
.hero h1 span { color: var(--purple-btn); position: relative; }
.hero h1 span::after { content: ''; position: absolute; bottom: 5px; right: 0; width: 100%; height: 8px; background: linear-gradient(120deg, var(--pink-medium), var(--purple-light)); border-radius: 4px; opacity: 0.4; z-index: -1; }
.hero p { font-size: 1.25rem; color: var(--purple-text); opacity: 0.9; margin-bottom: 2.5rem; max-width: 600px; margin-left: auto; margin-right: auto; text-shadow: 0 1px 2px rgba(255,255,255,0.8); }
.hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-primary { background: linear-gradient(135deg, var(--purple-btn) 0%, var(--purple-dark) 100%); color: var(--white); padding: 1rem 2.5rem; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 1.1rem; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s ease; box-shadow: 0 6px 25px rgba(75, 0, 130, 0.3); border: none; cursor: pointer; font-family: inherit; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 35px rgba(75, 0, 130, 0.4); }
.btn-secondary { background: var(--white); color: var(--purple-dark); padding: 1rem 2.5rem; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 1.1rem; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s ease; box-shadow: 0 4px 15px var(--shadow); border: 2px solid var(--purple-light); }
.btn-secondary:hover { background: var(--pink-light); transform: translateY(-3px); box-shadow: 0 8px 25px var(--shadow-hover); }

@media (max-width: 768px) {
    .hero { min-height: 500px; padding: 4rem 1.5rem; }
    .hero h1 { font-size: 2.2rem; }
}