/* ── Meyka Landing Page Styles ────────────────────────────────── */

/* Hero mockup float animation */
@keyframes float {
    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }
    40% {
        transform: translateY(-10px) rotate(0.4deg);
    }
    70% {
        transform: translateY(-5px) rotate(-0.3deg);
    }
}

.newsletter-float {
    animation: float 7s ease-in-out infinite;
    will-change: transform;
}

/* Gradient headline text */
.gradient-text {
    background: linear-gradient(135deg, #357232 0%, #5aaa55 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Feature card hover lift */
.feature-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px -8px rgba(53, 114, 50, 0.15);
}

/* Pricing card highlight ring */
.pricing-popular {
    position: relative;
}

.pricing-popular::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    background: linear-gradient(135deg, #357232, #5aaa55);
    z-index: -1;
}

/* Step number glow */
.step-number {
    position: relative;
}

.step-number::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(53, 114, 50, 0.15) 0%, transparent 70%);
    z-index: -1;
}

/* CTA section background noise texture overlay */
.cta-section {
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(53, 114, 50, 0.12) 0%, transparent 65%);
    pointer-events: none;
}

.cta-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(53, 114, 50, 0.08) 0%, transparent 65%);
    pointer-events: none;
}