.hero-title {
    font-family: var(--sera-font-display);
    font-weight: 400;
    letter-spacing: 0.03em;
}

.feature-title,
.privacy-heading,
.passion-title,
.download-title,
.contact-heading {
    font-family: var(--sera-font-display);
}

.feature-card {
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--sera-primary), var(--sera-secondary));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-card[data-color="menstruation"]::before {
    background: linear-gradient(90deg, var(--sera-cycle-menstruation), var(--sera-primary));
}

.feature-card[data-color="follicular"]::before {
    background: linear-gradient(90deg, var(--sera-cycle-follicular), var(--sera-primary));
}

.feature-card[data-color="ovulation"]::before {
    background: linear-gradient(90deg, var(--sera-cycle-ovulation), var(--sera-primary));
}

.feature-card[data-color="luteal"]::before {
    background: linear-gradient(90deg, var(--sera-cycle-luteal), var(--sera-primary));
}

.privacy-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.privacy-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sera-shadow-md);
}

.passion-card {
    position: relative;
    overflow: hidden;
}

.passion-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(232, 84, 158, 0.08) 0%, transparent 70%);
    animation: float 20s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -30px) rotate(120deg); }
    66% { transform: translate(-20px, 20px) rotate(240deg); }
}

.download-btn {
    position: relative;
    overflow: hidden;
}

.download-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
}

.download-btn:hover::before {
    width: 300px;
    height: 300px;
}

.lang-badge {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lang-badge:hover {
    transform: translateY(-2px);
    box-shadow: var(--sera-shadow-sm);
}

.nav-title {
    font-family: var(--sera-font-display);
    font-weight: 500;
}