/* 1. Core Color Palette & CSS Variables */
:root {
    --futuristic-bg: #0f0f23; /* Dark Grey/Blue - Main background base */
    --futuristic-surface: #131628; /* Slightly lighter for cards/panels */
    --futuristic-border: rgba(132, 129, 192, 0.2);
    --futuristic-text: #d8d8e6; /* Off-white for body text */
    --futuristic-text-muted: #8481c0; /* Muted purple/grey for secondary text */

    /* Neon Glow/Accent Colors */
    --glow-blue: #5f99ff;
    --glow-purple: #a56dff;
    --glow-green: #33ff99; /* For success states */

    /* Sizing & Animation */
    --radius-xl: 16px;
    --transition-fast: 0.2s ease-in-out;
    --transition-medium: 0.3s ease-in-out;
    
    /* Spacing for consistency */
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
}

/* 2. Background and Body Styling */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
body {
    background-color: var(--futuristic-bg);
    background-image: radial-gradient(circle at top, #1e1b4b, #0f0f23, #000000);
    color: var(--futuristic-text);
    /* This new stack is clean, professional, and native to the user's OS */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Global Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--futuristic-text);
    font-weight: 600;
    margin: 0;
}

p {
    color: var(--futuristic-text-muted);
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

p:last-child {
    margin-bottom: 0;
}
        #pricing {
            padding: 100px 0;
            background: var(--futuristic-bg); /* Corrected variable */
        }

        .pricing-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: var(--space-32);
            max-width: 1200px;
            margin: 0 auto;
        }

        .pricing-card {
            background: var(--futuristic-surface); /* Corrected variable */
            border: 1px solid var(--futuristic-border); /* Corrected variable */
            border-radius: var(--radius-xl); /* Using theme variable */
            padding: var(--space-32);
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }

        .pricing-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(95, 153, 255, 0.1); /* Theme shadow */
        }
        
        .pricing-card--featured {
            border-color: var(--glow-blue); /* Corrected variable */
            border-width: 2px;
            transform: scale(1.05);
            /* Animation added in style-homepage.css */
        }
        
        .pricing-card--featured:hover {
             transform: scale(1.05) translateY(-10px);
        }

        .pricing-header {
            text-align: center;
            margin-bottom: var(--space-24);
        }

        .pricing-header h3 {
            font-size: 1.5rem; /* Adjusted for theme */
            font-weight: 600;
            margin-bottom: var(--space-8);
            color: var(--futuristic-text); /* Corrected variable */
        }

        .pricing-header p {
            color: var(--futuristic-text-muted); /* Corrected variable */
            min-height: 40px;
        }

        .price {
            font-size: 2.5rem; /* Adjusted for theme */
            font-weight: 700;
            color: var(--futuristic-text); /* Corrected variable */
            text-align: center;
            margin-bottom: var(--space-24);
        }

        .price span {
            font-size: 1rem; /* Adjusted for theme */
            font-weight: 400;
            color: var(--futuristic-text-muted); /* Corrected variable */
        }

        .features-list {
            list-style: none;
            padding: 0;
            margin: 0;
            flex-grow: 1; /* Makes the list take up available space */
        }

        .features-list li {
            padding: var(--space-8) 0;
            display: flex;
            align-items: center;
            gap: var(--space-12);
            color: var(--futuristic-text-muted); /* Corrected variable */
            border-bottom: 1px solid var(--futuristic-border); /* Corrected variable */
            font-size: 0.95rem; /* Adjusted for theme */
        }
        
        .features-list li:last-child {
            border-bottom: none;
        }

        .features-list i {
            color: var(--glow-green); /* Corrected variable */
            font-size: 1.2em;
        }

        .features-list strong {
            color: var(--futuristic-text); /* Corrected variable */
            font-weight: 500;
        }
        
        .features-list .feature-category {
            font-weight: 600;
            color: var(--futuristic-text); /* Corrected variable */
            margin-top: var(--space-24);
            margin-bottom: var(--space-8);
            border-bottom: none;
            padding: 0;
            font-size: 0.8rem; /* Adjusted for theme */
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .features-list .feature-category i {
            display: none;
        }

        .continue-btn {
            margin-top: var(--space-32);
            width: 100%;
        }
        
        /* NEW: Styles for Modern Core Features Section */
        #core-features {
            overflow: hidden; /* For animations */
        }
        .core-features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: var(--space-24);
        }

        .core-feature-card {
            background: var(--futuristic-surface);
            border: 1px solid var(--futuristic-border);
            border-radius: var(--radius-xl);
            padding: var(--space-32);
            display: flex;
            flex-direction: column;
            transition: transform var(--transition-medium), border-color var(--transition-medium), box-shadow var(--transition-medium);
            position: relative;
            overflow: hidden;
        }

        .core-feature-card:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 0%, rgba(95, 153, 255, 0.15), transparent 70%);
            opacity: 0;
            transition: opacity var(--transition-medium);
        }
        
        .core-feature-card:hover {
            transform: translateY(-8px);
            border-color: var(--glow-blue);
            box-shadow: 0 10px 30px rgba(95, 153, 255, 0.1);
        }

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

        .core-feature-card__icon {
            font-size: 2.5rem;
            color: var(--glow-blue);
            margin-bottom: var(--space-16);
            line-height: 1;
        }

        .core-feature-card__title {
            font-size: 1.25rem;
            color: var(--futuristic-text);
            margin-bottom: var(--space-12);
            z-index: 1;
        }

        .core-feature-card__description {
            color: var(--futuristic-text-muted);
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: var(--space-24);
            flex-grow: 1;
            z-index: 1;
        }

        .core-feature-list {
            list-style: none;
            padding: 0;
            margin: 0;
            z-index: 1;
        }

        .core-feature-list li {
            display: flex;
            align-items: center;
            gap: var(--space-12);
            color: var(--futuristic-text-muted);
            font-size: 0.9rem;
            margin-bottom: var(--space-8);
        }

        .core-feature-list li i {
            color: var(--glow-green);
            font-size: 1.1rem;
        }

        /* --- FIX: Style for new chatbot IMG icon --- */

a {
    color: var(--glow-blue);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--glow-purple);
}
.timeline {
    /* This creates the main "box" */
    background: var(--futuristic-surface);
    border: 1px solid var(--futuristic-border);
    border-radius: var(--radius-xl);
    padding: var(--space-32);
    max-width: 800px; /* Constrains width for readability */
    margin: 0 auto; /* Centers the box */
    position: relative;
    overflow: hidden;
}

.timeline-item {
    position: relative;
    padding-left: 60px; /* Creates space for the icon */
    padding-bottom: var(--space-24);
    margin-bottom: var(--space-24);
    /* Adds a connecting line between steps */
    border-left: 2px solid var(--futuristic-border);
    margin-left: 19px; /* Aligns with the icon center */
}

/* Stops the line on the last item */
.timeline-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-left-color: transparent; /* Hide line on last item */
}

.timeline-icon {
    /* Styles the icon (e.g., the user-plus-fill) */
    position: absolute;
    left: -20px; /* Centers the icon on the line */
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--futuristic-bg);
    border: 2px solid var(--glow-blue);
    color: var(--glow-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    z-index: 1;
}

.timeline-content {
    /* Styles the text content */
    position: relative;
    top: -5px; /* Adjusts text alignment vertically */
}

.timeline-content h3 {
    font-size: 1.15rem;
    color: var(--futuristic-text);
    margin-bottom: var(--space-8);
}

.timeline-content p {
    color: var(--futuristic-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}
/* Layout */
.container {
  width: 100%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 1rem;
}
/* style-homepage.css */

/* 1. Style for the new "Watch Demo" button */
.hero__demo-cta {
    /* Adjust margin for positioning below the animation */
    margin-top: 5em; /* Or adjust as needed */
    text-align: center; /* Center the button */
}
.btn--demo {
    /* Make it solid using the theme's blue/purple */
    background: linear-gradient(135deg, var(--glow-blue), var(--glow-purple)); /* CHANGED */
    color: #FFFFFF; /* White text for contrast */ /* CHANGED */
    font-size: 1.1rem;
    font-weight: 600;
    padding: var(--space-16) var(--space-32);
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-12);
    transition: all var(--transition-fast);
    text-shadow: none;
    /* Update glow effect to match */
    box-shadow: 0 5px 20px rgba(127, 91, 228, 0.25); /* CHANGED */
}

.btn--demo:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 25px rgba(127, 91, 228, 0.4); /* CHANGED */
    filter: brightness(1.1);
}

.btn--demo i {
    font-size: 1.3rem;
}
/* 2. NEW Style for the Iframe */
/* This ensures the iframe fills the video wrapper */
.video-player-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Remove iframe border */
}
/* 2. Style for the Video Modal Overlay (the blurry background) */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-medium), visibility var(--transition-medium);
}

.video-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 35, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 3. Style for the Modal Content (the player) */
.video-modal-content {
    position: relative;
    width: 70%; /* 70% of screen as requested */
    max-width: 1000px; /* Max size on large desktops */
    background: var(--futuristic-surface);
    border: 1px solid var(--futuristic-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 2001;
    overflow: hidden; /* Ensures video corners are rounded */

    /* Animation for popup */
    transform: scale(0.9);
    transition: transform var(--transition-medium);
}

/* 4. Style for the Video Player Wrapper */
.video-player-wrapper {
    position: relative;
    /* 16:9 Aspect Ratio */
    padding-top: 56.25%; 
    height: 0;
    background: #000;
}

.video-player-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Hide default controls */
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

/* 5. Style for the Close Button */
.video-modal-close {
    position: absolute;
    top: var(--space-12);
    right: var(--space-12);
    z-index: 2002;
    background: rgba(15, 15, 35, 0.5);
    border: 1px solid var(--futuristic-border);
    color: var(--futuristic-text);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.video-modal-close:hover {
    background: var(--glow-blue);
    color: var(--futuristic-bg);
}

/* 6. Style for the Custom Controls */
.video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--space-16);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-32);
    opacity: 0; /* Hidden by default */
    transition: opacity var(--transition-fast);
}

.video-player-wrapper:hover .video-controls {
    opacity: 1; /* Show on hover */
}

.video-controls button {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8);
    border-radius: 8px;
}
.video-controls button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}
.video-controls button#videoPlayPause {
    font-size: 2.5rem; /* Make play button bigger */
}
.video-controls button span {
    font-size: 0.8rem;
    font-weight: 500;
}

/* 7. Style for the Replay Button */
.video-replay-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    z-index: 2001;
    background: rgba(15, 15, 35, 0.8);
    border: 1px solid var(--glow-blue);
    color: var(--futuristic-text);
    border-radius: var(--radius-xl);
    padding: var(--space-16) var(--space-24);
    display: flex;
    align-items: center;
    gap: var(--space-12);
    font-size: 1.2rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-medium);
    opacity: 0;
    visibility: hidden;
}

.video-replay-button:hover {
    transform: translate(-50%, -50%) scale(1);
    background: var(--glow-blue);
    color: var(--futuristic-bg);
}

/* 8. Active state for Modal */
.video-modal.active {
    opacity: 1;
    visibility: visible;
}
.video-modal.active .video-modal-content {
    transform: scale(1);
}

/* 9. Responsive adjustments for Modal */
@media (max-width: 1024px) {
    .video-modal-content {
        width: 85%; /* 85% for tablets */
    }
}

@media (max-width: 600px) {
    .video-modal-content {
        width: 95%; /* 95% for mobile */
    }
    .video-controls {
        gap: var(--space-24);
    }
    .video-controls button span {
        display: none; /* Hide '10s' text on mobile */
    }
    .video-controls button#videoPlayPause {
        font-size: 2rem;
    }
}
section {
    padding: 100px 0;
    overflow-x: hidden; /* Prevent horizontal scroll from animations */
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-32);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  font-size: 2.5rem;
  margin-bottom: var(--space-16);
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--futuristic-text-muted);
}


.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--futuristic-surface) !important; /* ADDED !important */
    border-bottom: 1px solid var(--futuristic-border);
    transition: background var(--transition-medium);
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.nav__brand {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.nav__logo {
    height: 60px;
    width: auto;
    /* Removed: filter: invert(1) brightness(1.5); */
}

.nav__logo-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--futuristic-text);
}

.nav__menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-32);
}

.nav__link {
    color: var(--futuristic-text-muted);
    font-weight: 500;
    transition: color var(--transition-fast);
}

.nav__link:hover, .nav__link.active {
    color: var(--glow-blue);
    text-shadow: 0 0 8px rgba(95, 153, 255, 0.5);
}

.nav__buttons {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

/* START: Style for the mobile toggle button */
.nav__toggle {
    display: none; /* Hidden by default */
    background: none;
    border: none;
    color: var(--futuristic-text);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1010; /* Ensure it's on top */
}
/* END: Style for the mobile toggle button */


/* START: Added for mobile responsiveness */
.nav__buttons-mobile {
    display: none; /* Hide on desktop */
    flex-direction: column;
    width: 100%;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--futuristic-border);
}
.nav__buttons-mobile .btn {
    width: 100%;
    text-align: center;
}
/* END: Added for mobile responsiveness */


/* 4. Hero Section */
#home.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-top: 70px; /* Offset for header */
}

.hero__background {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(95, 153, 255, 0.1), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(165, 109, 255, 0.1), transparent 40%);
    z-index: 0;
}

.hero .container {
    position: relative;
    z-index: 1;
}

.hero__content {
    max-width: 800px;
    margin: 0 auto;
}

.hero__title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    margin-bottom: var(--space-16);
    background: linear-gradient(135deg, #ffffff, #c0c0c0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.hero__title-main, .hero__title-sub {
    display: block;
}

.hero__subtitle {
    font-size: 1.25rem;
    color: var(--futuristic-text-muted);
    margin: 0 auto var(--space-32) auto;
    max-width: 600px;
}
/* NEW: 3D Icon Carousel Styles */
/* NEW: 3D Icon Carousel Styles */
.hero__scene {
    perspective: 1000px; /* Creates the 3D space */
    margin-top: 3rem;
    height: 50px; /* CHANGED: Was 60px */
    position: relative;
}

.hero__animation {
    height: 100%;
    width: 100%;
    position: relative;
    transform-style: preserve-3d;
    backface-visibility: hidden; 
}

.icon-carousel {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: carousel-rotate 45s linear infinite;
    backface-visibility: hidden; 
}

/* This new wrapper holds the 3D properties */
.carousel-icon-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 30px;  /* CHANGED: Was 40px */
    height: 30px; /* CHANGED: Was 40px */
    transform-style: preserve-3d;
    backface-visibility: hidden; 
}

/* This styles the image *inside* the wrapper */
.carousel-icon {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/* 6 icons = 360 / 6 = 60 degrees apart */
/* CHANGED: Radius (translateZ) from 160px to 120px */
.carousel-icon-wrapper:nth-child(1) { transform: rotateY(0deg) translateZ(120px); }
.carousel-icon-wrapper:nth-child(2) { transform: rotateY(60deg) translateZ(120px); }
.carousel-icon-wrapper:nth-child(3) { transform: rotateY(120deg) translateZ(120px); }
.carousel-icon-wrapper:nth-child(4) { transform: rotateY(180deg) translateZ(120px); }
.carousel-icon-wrapper:nth-child(5) { transform: rotateY(240deg) translateZ(120px); }
.carousel-icon-wrapper:nth-child(6) { transform: rotateY(300deg) translateZ(120px); }

@keyframes carousel-rotate {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}
/* 5. Section and Card Styling */
.feature-card, 
.integration-card, 
.benefit-card, 
.pricing-card,
.core-feature-card { /* Added core-feature-card here */
    background: var(--futuristic-surface);
    border: 1px solid var(--futuristic-border);
    border-radius: var(--radius-xl);
    padding: var(--space-32);
    transition: transform var(--transition-medium), border-color var(--transition-medium), box-shadow var(--transition-medium);
    height: 100%; /* For consistent grid layout */
}

.feature-card:hover,
.integration-card:hover,
.benefit-card:hover,
.pricing-card:hover,
.core-feature-card:hover { /* Added core-feature-card here */
    transform: translateY(-8px);
    border-color: var(--glow-blue);
    box-shadow: 0 10px 30px rgba(95, 153, 255, 0.1);
}

/* Grids */
.features-grid, .integrations-grid, .benefits-grid, .core-features-grid { /* Added core-features-grid */
    display: grid;
    gap: var(--space-24);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Card Specifics */
.feature-card, .benefit-card {
    text-align: center;
}

.feature-card__icon, .benefit-card__icon {
    font-size: 2.5rem;
    color: var(--glow-blue);
    margin-bottom: var(--space-16);
    display: inline-block;
}

.feature-card__title, .integration-card__title, .benefit-card__title {
    font-size: 1.25rem;
    margin-bottom: var(--space-12);
    color: var(--futuristic-text);
}

.integration-card__icon {
    font-size: 2rem;
    color: var(--glow-blue);
    margin-bottom: var(--space-16);
}

.integration-card strong { color: var(--futuristic-text); font-weight: 500; }

/* Platforms section */
.platforms-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 2rem;
}

.platform-item {
  text-align: center;
}

/* Updated styles for image icons */
.platform-icon {
  height: 35px; /* Set a consistent height */
  width: 35px;  /* Set a consistent width */
  object-fit: contain;
  opacity: 0.7; /* Start slightly faded */
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.platform-item:hover .platform-icon {
  transform: scale(1.1); /* Enlarge on hover */
  opacity: 1.0; /* Become fully visible on hover */
}

.platform-item span {
  display: block;
  margin-top: var(--space-8);
  color: var(--futuristic-text-muted);
}

/* 6. Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-24);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.btn--primary {
    background: linear-gradient(135deg, var(--glow-blue), var(--glow-purple));
    color: #FFFFFF;
    border: none;
    box-shadow: 0 5px 15px rgba(127, 91, 228, 0.2);
}

.btn--primary:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(127, 91, 228, 0.3);
}

.btn--outline {
    background: transparent;
    border: 1px solid var(--futuristic-border);
    color: var(--futuristic-text-muted);
}

.btn--outline:hover {
    border-color: var(--glow-blue);
    color: var(--glow-blue);
    background: rgba(95, 153, 255, 0.1);
}

/* 7. Footer */
.footer {
    background: #06070e;
    padding: 60px 0 30px 0;
    border-top: 1px solid var(--futuristic-border);
    color: var(--futuristic-text-muted);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.footer-column h3, .footer-column h4 {
    color: var(--futuristic-text);
    margin-bottom: 1rem;
}

.footer-column a {
    display: block;
    color: var(--futuristic-text-muted);
    margin-bottom: 0.75rem;
}

.footer-column a:hover {
    color: var(--glow-blue);
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a i {
    font-size: 1.25rem;
    transition: color var(--transition-fast);
}

.footer-bottom {
    text-align: center;
    font-size: 0.875rem;
    opacity: 0.7;
    padding-top: 2rem;
    border-top: 1px solid var(--futuristic-border);
}
.footer-disclaimer { margin-bottom: 1rem; }

/* START: Added Modern Animations */

/* 8. Modern Animation Keyframes */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 15px var(--glow-blue);
    }
    50% {
        box-shadow: 0 0 25px var(--glow-blue), 0 0 40px rgba(95, 153, 255, 0.5);
    }
}

/* Apply pulse animation to featured pricing card */
.pricing-card--featured {
    animation: pulse-glow 3s infinite ease-in-out;
}

/* 9. Modern Scroll-In Animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animations for grid items */
.animate-on-scroll.in-view:nth-child(2) { transition-delay: 0.1s; }
.animate-on-scroll.in-view:nth-child(3) { transition-delay: 0.2s; }
.animate-on-scroll.in-view:nth-child(4) { transition-delay: 0.3s; }
.animate-on-scroll.in-view:nth-child(5) { transition-delay: 0.4s; }
.animate-on-scroll.in-view:nth-child(6) { transition-delay: 0.5s; }
/* END: Added Modern Animations */


/* Responsive */
@media (max-width: 768px) {
    .nav__menu { 
        display: none; 
        flex-direction: column;
        align-items: stretch;
        position: fixed; /* Use fixed for full-screen overlay */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--futuristic-bg);
        padding: var(--space-24);
        padding-top: 80px; /* Leave space for toggle */
        z-index: 1001; /* Below toggle but above content */
        overflow-y: auto;
    }
    
    .nav__toggle { 
        display: block; 
    }
    
    .nav__buttons.mobile-hidden { 
        display: none; 
    }
    
    .nav__menu.mobile-open {
        display: flex;
    }
    
    .nav__menu.mobile-open li { 
        width: 100%; 
    }
    
    .nav__menu.mobile-open .nav__link { 
        display: block; 
        padding: 1rem; 
        text-align: center; 
        font-size: 1.2rem;
    }

    /* Make mobile buttons visible in open menu */
    .nav__menu.mobile-open .nav__buttons-mobile {
        display: flex;
    }

    .section-title { font-size: 2rem; }
    .hero__title { font-size: clamp(2.5rem, 10vw, 3rem); }
    .hero__subtitle { font-size: 1.125rem; }
}
/* --- MOBILE CHAT WIDGET FIX (FULL SCREEN & LEFT CLOSE BUTTON) --- */

/* 1. Defines the button, but hides it on desktop */
#chat-widget-header-close {
    display: none; /* Hide on desktop by default */
    background: none;
    border: none;
    color: var(--label-color, #9CA3AF);
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}