/* Base Font and Colors */
body {
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
    position: relative;
    overflow-x: hidden; /* FIX: Prevents horizontal scrolling caused by overflowing elements */
}

/* 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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSJub25uZWUiIHN0cm9rZT0icmdiYSgwLDAsMCwwLjA0KSIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIGQ9Ik0wIC41aDMxbC41LTMxTTU0LjUgMTcuNWwzMC0zME0zMS41IC41bC05LTlNMjAxMW0xMCAwIDIwIi8+PC9zdmc+');
    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); }
}

/* --- CAROUSEL STYLES (Adjusted for Mobile) --- */
.card-stack-container {
    width: 100%; /* FIX: Default to 100% width on all screens, overridden below for desktop */
    max-width: 100%; /* Ensure it doesn't overflow on small screens */
    perspective: 1000px; 
    height: 350px; 
    position: relative;
    margin-left: auto;
    margin-right: auto;
    user-select: none;    
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    -webkit-user-drag: none;
    cursor: default; 
}

/* Apply the fixed 600px width only for wider screens */
@media (min-width: 641px) {
    .card-stack-container {
        width: 600px; /* Apply fixed width for desktop/tablet */
    }
}


/* Mobile adjustment for container size */
@media (max-width: 640px) {
    .card-stack-container {
        /* width: 100%; */
        height: 300px; /* Slightly reduced height */
    }
}


.card {
    position: absolute;
    top: 0;
    left: 50%;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    
    transform: translateX(-50%) scale(0.6) translateZ(-500px); 
    opacity: 0;
    visibility: hidden; 
    z-index: 10; 
    
    width: 250px; 
    height: 350px;
    overflow: hidden; 
    padding: 0; 
    background-color: white; 
    pointer-events: none; 
    transform-style: preserve-3d;
}

/* Mobile adjustment for card size */
@media (max-width: 640px) {
    .card {
        width: 200px; /* Smaller card width */
        height: 300px; /* Smaller card height */
        transform: translateX(-50%) scale(0.5) translateZ(-500px); /* Adjust initial scale/translate */
    }
}


/* Active Card: Front and center */
.card.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1) translateZ(0);
    z-index: 50;
    pointer-events: auto;
    cursor: default; 
}
/* Mobile adjustment for active card */
@media (max-width: 640px) {
    .card.active {
        transform: translateX(-50%) scale(1) translateZ(0);
    }
}


/* Card 1 position before active */
.card.prev1 {
    opacity: 0.8;
    visibility: visible;
    transform: translateX(-150%) scale(0.85) rotateY(15deg) translateZ(-50px);
    z-index: 40;
    pointer-events: auto;
    cursor: pointer; 
}
/* Mobile adjustment for prev1 card */
@media (max-width: 640px) {
    .card.prev1 {
        transform: translateX(-140%) scale(0.75) rotateY(15deg) translateZ(-50px);
    }
}


/* Card 2 positions before active */
.card.prev2 {
    opacity: 0.5;
    visibility: visible;
    transform: translateX(-200%) scale(0.7) rotateY(20deg) translateZ(-150px);
    z-index: 30;
    pointer-events: none; 
}
/* Mobile adjustment for prev2 card (hiding it earlier) */
@media (max-width: 640px) {
    .card.prev2 {
        opacity: 0;
        visibility: hidden;
    }
}


/* Card 1 position after active */
.card.next1 {
    opacity: 0.8;
    visibility: visible;
    transform: translateX(50%) scale(0.85) rotateY(-15deg) translateZ(-50px);
    z-index: 40;
    pointer-events: auto;
    cursor: pointer; 
}
/* Mobile adjustment for next1 card */
@media (max-width: 640px) {
    .card.next1 {
        transform: translateX(40%) scale(0.75) rotateY(-15deg) translateZ(-50px);
    }
}


/* Card 2 positions after active */
.card.next2 {
    opacity: 0.5;
    visibility: visible;
    transform: translateX(100%) scale(0.7) rotateY(-20deg) translateZ(-150px);
    z-index: 30;
    pointer-events: none; 
}
/* Mobile adjustment for next2 card (hiding it earlier) */
@media (max-width: 640px) {
    .card.next2 {
        opacity: 0;
        visibility: hidden;
    }
}


/* Custom style for the pointer on the timeline */
.timeline-pointer {
    transition: left 0.5s ease-in-out;
    width: 3rem; 
    height: 3rem;
    cursor: grab; 
    pointer-events: auto; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem; 
    background-color: white;
    border-radius: 9999px; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    border: 4px solid white; 
    z-index: 10; 
}

/* Custom progress bar fill color */
#progress-fill {
    transition: width 0.5s ease-in-out;
}