/* Base Font and Colors */
body {
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
    position: relative;
}

/* Subtle Noise/Grain Overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Subtle noise effect (you might need a noise pattern image for a better effect) */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMCwwLDAsMC4wNCkiIHN0cm9va2Utd2lkdGg9IjEuNSI+PHBhdGggZD0iTTAgLjVoMzFsLjUtMzFNNTQuNSAxNy41bDMwLTMwTTMxLjUgLjVsLTktOU0yIDExbTEwIDBoMjAiLz48L3N2ZyI+');
    opacity: 0.1; /* Very subtle */
    pointer-events: none;
    z-index: -1;
}

.gradient-bg {
    background: linear-gradient(90deg, #7512B1 -3.6%, #A345DC 49.84%, #DD3A95 104.58%);
}

/* Added missing definition for the AI bubble in the 'How It Works' section (Step 2) */
.gradient-primary {
    background: linear-gradient(to right, #a345dc, #7512b1); 
}

/* --- Hero Image Tilt Container --- */
.hero-image-container {
    perspective: 1000px;
    /* Allows 3D transformation context */
}

#heroImage {
    transition: transform 0.2s ease-out;
}

/* --- Active Navigation Link --- */
.nav-link {
    position: relative;
    padding-bottom: 5px;
}
.nav-link.active-nav-link {
    color: #9333ea; /* Purple color */
    font-weight: 600;
}
.nav-link.active-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #a345dc, #dd3a95);
    border-radius: 9999px;
}
/* Mobile nav links adjust the underline positioning */
#mobile-menu .nav-link.active-nav-link::after {
    bottom: 0;
    left: 0;
    width: 100%;
}


/* --- CARD SIZING FIX: Serve Cards (Ideal For) --- */
.serve-card {
    height: 480px; /* Fixed height for consistency */
    box-sizing: border-box; /* Ensure padding/border don't affect height */
}

/* --- CARD SIZING FIX: Step Cards (How It Works) --- */
.step-card {
    min-height: 600px; /* Fixed height for consistency */
    box-sizing: border-box; 
}


/* Animations (From your existing style.css) */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
.heart-beat {
    animation: heartbeat 1.5s ease-in-out infinite;
    /* Change colors to match the gradient */
    background: linear-gradient(to right, #a345dc, #dd3a95);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; 
}
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
    75% { transform: scale(1.05); }
}

.slide-in-left {
    animation: slideInLeft 0.8s ease-out forwards;
}

.slide-in-right {
    animation: slideInRight 0.8s ease-out forwards;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

@keyframes slideInLeft {
    from { transform: translateX(-100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeInUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* --- CRISIS SECTION STYLING --- */

/* Pulsating glow for the internal warning box */
.crisis-feature-glow {
    animation: crisisGlow 1.8s ease-in-out infinite;
}
@keyframes crisisGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 69, 0, 0.4), 0 0 0 0 rgba(255, 69, 0, 0.2); }
    50% { box-shadow: 0 0 25px rgba(255, 69, 0, 0.7), 0 0 0 5px rgba(255, 69, 0, 0); }
}