/* ========================================
   SCANINSIGHTS 3D WEBSITE - COMPLETE CSS
   ======================================== */

/* === ROOT VARIABLES === */
:root {
    --primary-green: #15803d;
    --primary-green-light: #16a34a;
    --primary-green-dark: #14532d;
    --dark-bg: #0a0e1a;
    --dark-bg-secondary: #1a2332;
    --dark-bg-tertiary: #0f4a3d;
    --text-white: #ffffff;
    --text-gray: rgba(255, 255, 255, 0.75);
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
}

/* === RESET & BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Account for fixed header */
    overflow-x: hidden;
}

/* Scroll Progress Indicator */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-green), var(--primary-green-light));
    z-index: 9999;
    transition: width 0.1s ease-out;
    box-shadow: 0 2px 10px rgba(21, 128, 61, 0.5);
}

/* Back to Top Button - Centered at Bottom */
.back-to-top {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 999;
    box-shadow: 0 4px 20px rgba(21, 128, 61, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.back-to-top:hover {
    transform: translateX(-50%) translateY(-5px) scale(1.05);
    box-shadow: 0 6px 25px rgba(21, 128, 61, 0.6);
}

.back-to-top:active {
    transform: translateX(-50%) translateY(-2px) scale(0.98);
}

.back-to-top i {
    color: white;
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        width: 45px;
        height: 45px;
    }
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--dark-bg);
    color: var(--text-white);
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 100vw;
}

/* === PERFORMANCE OPTIMIZATIONS === */
/* GPU acceleration for animated elements */
.feature-card-3d,
.pricing-card,
.testimonial-card,
.btn-3d,
.floating-orb {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    contain: layout style paint;
}

/* Optimize images */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* === NAVIGATION === */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(10, 14, 26, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    max-width: 1600px; /* CHANGED from 1400px */
    margin: 0 auto;
}

.nav-logo .logo {
    height: 50px;
    width: auto;
}



.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.nav-link {
    color: var(--text-white);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-green);
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link-contact {
    background: var(--primary-green);
    color: white;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.nav-link-contact::after {
    display: none;
}

.nav-link-contact:hover {
    background: var(--primary-green-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(21, 128, 61, 0.3);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.mobile-menu-close {
    display: none;
}

/* ========================================
   OPTION B: SIDE BY SIDE HERO DESIGN
   ======================================== */

.hero-split-3d {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 1.5rem 3rem;
    position: relative;
    overflow: hidden;
}

/* Sharp Background (NOT Blurred) */
.hero-background-sharp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-background-sharp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
    transition: opacity 0.8s ease;
}

.hero-split-3d:hover .hero-background-sharp img {
    opacity: 0.4;
}

.background-overlay-subtle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(10, 14, 26, 0.85) 0%, 
        rgba(21, 128, 61, 0.3) 50%,
        rgba(10, 14, 26, 0.85) 100%);
}

.gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-bg-secondary) 50%, var(--dark-bg-tertiary) 100%);
    animation: gradientShift 15s ease infinite;
    background-size: 200% 200%;
    z-index: 0;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.particles {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(21, 128, 61, 0.6);
    border-radius: 50%;
    animation: float 20s infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(-100vh) translateX(100px);
        opacity: 0;
    }
}

/* Container for Two Cards Side by Side */
.hero-split-container {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    perspective: 2000px;
    align-items: center;
}

/* LEFT CARD: Hero Text */
.hero-card-left {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(30px);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 
        0 40px 100px rgba(0, 0, 0, 0.6),
        0 0 80px rgba(21, 128, 61, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.3);
    padding: 2.5rem;
    transform-style: preserve-3d;
    transform: translateZ(80px);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    animation: floatCardLeft 6s ease-in-out infinite;
}

@keyframes floatCardLeft {
    0%, 100% {
        transform: translateZ(80px) translateY(0px);
    }
    50% {
        transform: translateZ(80px) translateY(-15px);
    }
}

/* Reduce float distance on mobile to prevent going under nav */
@media (max-width: 768px) {
    @keyframes floatCardLeft {
        0%, 100% {
            transform: translateZ(80px) translateY(0px);
        }
        50% {
            transform: translateZ(80px) translateY(-5px);
        }
    }
    
    @keyframes floatCardRight {
        0%, 100% {
            transform: translateZ(80px) translateY(0px);
        }
        50% {
            transform: translateZ(80px) translateY(-5px);
        }
    }
    
    .hero-split-3d {
        min-height: auto;
        padding: 9rem 1rem 3rem; /* Increased top padding to add more space from nav */
    }
    
    .hero-card-left {
        padding: 2.5rem 1.5rem;
    }
    
    .hero-card-right {
        padding: 1.5rem;
    }
}

.hero-card-left:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 50px 120px rgba(0, 0, 0, 0.7),
        0 0 100px rgba(21, 128, 61, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
    transform: translateZ(100px) translateY(0px);
    animation-play-state: paused;
}

.card-content {
    text-align: center;
}

.hero-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #15803d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 2.5rem;
    line-height: 1.8;
    font-weight: 400;
}

/* RIGHT CARD: Image Card */
.hero-card-right {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(30px);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 
        0 40px 100px rgba(0, 0, 0, 0.6),
        0 0 80px rgba(21, 128, 61, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.3);
    padding: 1.5rem;
    transform-style: preserve-3d;
    transform: translateZ(80px);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    animation: floatCardRight 6s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes floatCardRight {
    0%, 100% {
        transform: translateZ(80px) translateY(0px);
    }
    50% {
        transform: translateZ(80px) translateY(-15px);
    }
}

.hero-card-right:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 50px 120px rgba(0, 0, 0, 0.7),
        0 0 100px rgba(21, 128, 61, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
    transform: translateZ(100px) translateY(0px) scale(1.02);
    animation-play-state: paused;
}

.image-card-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.image-card-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    transition: transform 0.3s ease;
}

.hero-card-right:hover .image-card-wrapper img {
    transform: scale(1.05);
}

.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    padding: 2rem;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.hero-card-right:hover .image-overlay {
    transform: translateY(0);
}

.image-overlay h3 {
    font-size: 1.5rem;
    color: #15803d;
    margin-bottom: 0.5rem;
    font-weight: 700;
    text-shadow: 
        -2px -2px 0 #fff,
        2px -2px 0 #fff,
        -2px 2px 0 #fff,
        2px 2px 0 #fff,
        -1px 0 0 #fff,
        1px 0 0 #fff,
        0 -1px 0 #fff,
        0 1px 0 #fff,
        0 0 15px rgba(255, 255, 255, 0.9);
}

.image-overlay p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Responsive - Stack on Mobile/Tablet */
@media (max-width: 1024px) {
    .hero-split-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .hero-card-left,
    .hero-card-right {
        max-width: 600px;
        margin: 0 auto;
        width: 100%;
    }
}


.cta-container {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-3d {
    padding: 1.2rem 2.5rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    color: white;
    box-shadow: 
        0 12px 35px rgba(21, 128, 61, 0.5),
        0 0 25px rgba(21, 128, 61, 0.3);
}

.btn-primary:hover {
    transform: translateY(-6px);
    box-shadow: 
        0 22px 55px rgba(21, 128, 61, 0.7),
        0 0 50px rgba(21, 128, 61, 0.6);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-6px);
}

/* === SECTION TITLE === */
.section-title {
    text-align: center;
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: white;
    margin-bottom: 4rem;
    background: linear-gradient(135deg, #ffffff 0%, var(--primary-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* === FEATURES SECTION === */
.features-3d {
    position: relative;
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--dark-bg) 0%, var(--dark-bg-secondary) 100%);
}

.features-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    perspective: 1000px;
}

.feature-card-3d {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 25px;
    padding: 2.5rem;
    border: 1px solid var(--glass-border);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

.feature-card-3d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(21, 128, 61, 0.15), transparent);
    opacity: 0;
    transition: opacity 0.5s;
}

.feature-card-3d:hover {
    transform: translateY(-18px);
    box-shadow: 0 35px 70px rgba(21, 128, 61, 0.4);
    border-color: rgba(21, 128, 61, 0.3);
}

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

.feature-icon {
    width: 75px;
    height: 75px;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: white;
    margin-bottom: 1.8rem;
    box-shadow: 0 12px 35px rgba(21, 128, 61, 0.5);
    transition: transform 0.3s ease;
}

.feature-card-3d:hover .feature-icon {
    transform: rotateY(360deg) scale(1.1);
}

.feature-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
}

.feature-description {
    font-size: 1.05rem;
    color: var(--text-gray);
    line-height: 1.7;
}

/* === VIDEO SECTION === */
.video-section {
    padding: 4rem 0;
    background: var(--dark-bg);
}

.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    aspect-ratio: 16/9;
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* === AMBASSADOR SECTION === */
.ambassador-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--dark-bg-secondary) 0%, var(--dark-bg) 100%);
    overflow: visible;
}

.pricing-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
    padding-top: 20px; /* Space for the absolutely positioned badge */
}

.pricing-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 2.5rem;
    border: 2px solid var(--glass-border);
    transition: all 0.4s ease;
    position: relative;
    cursor: pointer;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(21, 128, 61, 0.3);
    border-color: var(--primary-green);
}

.plan-badge {
    display: none;
}

/* Responsive badge sizing for smaller phones */
@media (max-width: 430px) {
    .plan-badge {
        font-size: 0.75rem;
        padding: 0.4rem 1rem;
        top: -12px;
    }
}

.plan-header {
    text-align: center;
    margin-bottom: 2rem;
}

.plan-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.plan-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.3rem;
}

.currency {
    font-size: 1.5rem;
    color: var(--primary-green);
    font-weight: 600;
}

.amount {
    font-size: 3rem;
    color: var(--primary-green);
    font-weight: 700;
}

.vat {
    font-size: 1rem;
    color: var(--text-gray);
}

.plan-features h4 {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.plan-features ul {
    list-style: none;
}

.plan-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--text-gray);
}

.plan-features li i {
    color: var(--primary-green);
}

.plan-selection {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: var(--primary-green);
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s;
}

.pricing-card:hover .plan-selection {
    opacity: 1;
}

/* Simple period and subtext styling for weekly pricing */
.plan-price .period {
    font-size: 1.2rem;
    color: var(--text-gray);
    font-weight: 500;
    margin-left: 0.2rem;
}

.plan-subtext {
    font-size: 0.95rem;
    color: var(--text-gray);
    margin-top: 0.5rem;
    font-style: italic;
    text-align: center;
}

/* Hover animation on the price amount */
.pricing-card:hover .amount {
    animation: pulsePrice 1s ease infinite;
}

@keyframes pulsePrice {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
        text-shadow: 0 0 20px rgba(21, 128, 61, 0.5);
    }
}

/* === AMBASSADOR FORM === */
.ambassador-form-container {
    max-width: 800px;
    margin: 0 auto;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    overflow: hidden;
}

.form-header {
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    padding: 2rem;
    text-align: center;
}

.form-header h3 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.form-header p {
    opacity: 0.9;
}

.ambassador-form {
    padding: 2rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.ambassador-form input,
.ambassador-form select,
.ambassador-form textarea {
    width: 100%;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: white;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.ambassador-form input:focus,
.ambassador-form select:focus,
.ambassador-form textarea:focus {
    outline: none;
    border-color: var(--primary-green);
    background: rgba(255, 255, 255, 0.15);
}

.ambassador-form textarea {
    resize: vertical;
    min-height: 120px;
}

.ambassador-form select option {
    background: var(--dark-bg-secondary);
    color: white;
}

/* === AWARDS SECTION === */
.awards-section {
    padding: 4rem 0;
    background: var(--dark-bg);
}

.awards-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.awards-img {
    width: 100%;
    max-width: 700px;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    margin-bottom: 2rem;
    transition: transform 0.3s ease;
}

.awards-img:hover {
    transform: scale(1.02);
}

.awards-text {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    padding: 2rem;
    border-radius: 15px;
    border-left: 4px solid var(--primary-green);
}

.awards-text h3 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: var(--primary-green);
}

.awards-text p {
    font-size: 1.2rem;
    color: var(--text-gray);
}

/* === TESTIMONIALS === */
.testimonials-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--dark-bg-secondary) 0%, var(--dark-bg) 100%);
}

.testimonials-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.testimonial-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 2.5rem;
    border: 1px solid var(--glass-border);
    transition: all 0.4s ease;
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(21, 128, 61, 0.3);
}

.testimonial-content {
    margin-bottom: 2rem;
}

.testimonial-content p {
    font-size: 1.2rem;
    font-style: italic;
    color: var(--text-gray);
    line-height: 1.8;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.testimonial-author img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid var(--primary-green);
}

.testimonial-author h4 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.testimonial-author span {
    color: var(--text-gray);
    font-size: 0.9rem;
}

/* === FOOTER === */
.footer {
    background: var(--dark-bg-secondary);
    padding: 4rem 0 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

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

.footer-col h4 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: var(--primary-green);
}

.footer-logo {
    height: 60px;
    margin-bottom: 1rem;
}

.footer-tagline {
    color: var(--text-gray);
    font-style: italic;
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: 0.75rem;
    color: var(--text-gray);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-col li i {
    color: var(--primary-green);
}

.footer-col ul li a {
    color: var(--text-gray);
    text-decoration: none;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-col ul li a:hover {
    color: var(--primary-green);
}

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

.social-links a {
    width: 40px;
    height: 40px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--primary-green);
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-gray);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 400px;
        height: 100vh;
        background: rgba(10, 14, 26, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 5rem 2rem;
        transition: right 0.4s ease;
        z-index: 1001;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-toggle {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

    .bars-container {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .bar {
        width: 25px;
        height: 3px;
        background: white;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .mobile-menu-close {
        display: block;
        position: absolute;
        top: 2rem;
        right: 2rem;
        background: none;
        border: none;
        color: white;
        font-size: 2rem;
        cursor: pointer;
    }

    .card-3d {
        padding: 2.5rem 1.5rem;
    }

    .cta-container {
        flex-direction: column;
    }

    .btn-3d {
        width: 100%;
        justify-content: center;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .features-container,
    .pricing-container,
    .testimonials-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.8rem;
    }
    
    /* Enhanced mobile select dropdown and input styling */
    .ambassador-form select,
    .form-group select,
    .contact-form select {
        font-size: 1rem;
        padding: 1.2rem 1rem;
        min-height: 50px;
    }
    
    .ambassador-form input,
    .form-group input,
    .contact-form input {
        font-size: 1rem;
        padding: 1.2rem 1rem;
        min-height: 50px;
    }
    
    .ambassador-form textarea,
    .form-group textarea,
    .contact-form textarea {
        font-size: 1rem;
        padding: 1.2rem 1rem;
    }
}

/* ========================================
   VIDEO INSIDE AMBASSADOR SECTION
   ======================================== */

.video-demo-container {
    margin-top: 3rem;
    margin-bottom: 4rem;
    text-align: center;
}

.video-title {
    font-size: 2rem;
    color: var(--primary-green);
    margin-bottom: 2rem;
    font-weight: 700;
}

/* ========================================
   AWARDS WINNER SECTION - NEW
   ======================================== */

.awards-winner-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--dark-bg) 0%, var(--dark-bg-secondary) 100%);
    position: relative;
    overflow: hidden;
}

.awards-winner-content {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 30px;
    border: 1px solid var(--glass-border);
    padding: 3rem;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 
        0 25px 70px rgba(0, 0, 0, 0.4),
        0 0 120px rgba(21, 128, 61, 0.2);
    transition: all 0.4s ease;
    position: relative;
}

.awards-winner-content:hover {
    transform: translateY(-10px);
    box-shadow: 
        0 35px 90px rgba(0, 0, 0, 0.5),
        0 0 150px rgba(21, 128, 61, 0.3);
}

.award-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(21, 128, 61, 0.4);
}

.award-badge i {
    font-size: 1.5rem;
}

/* Responsive award badge sizing for smaller phones */
@media (max-width: 430px) {
    .award-badge {
        font-size: 1rem;
        padding: 0.8rem 1.5rem;
        gap: 0.6rem;
    }
    
    .award-badge i {
        font-size: 1.2rem;
    }
}

.awards-winner-img {
    width: 100%;
    max-width: 600px;
    border-radius: 20px;
    margin: 2rem auto;
    display: block;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s ease;
}

.awards-winner-content:hover .awards-winner-img {
    transform: scale(1.05);
}

.awards-winner-text h3 {
    font-size: 2.5rem;
    color: var(--primary-green);
    margin-bottom: 1rem;
    font-weight: 700;
}

.awards-winner-text p {
    font-size: 1.3rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.award-details {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .awards-winner-content {
        padding: 2rem 1.5rem;
    }
    
    .awards-winner-text h3 {
        font-size: 2rem;
    }
    
    .awards-winner-text p {
        font-size: 1.1rem;
    }
}

/* ========================================
   FLOATING CTA BUTTON
   ======================================== */

.floating-cta {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    color: white;
    padding: 1rem 1.8rem;
    border-radius: 50px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 10px 40px rgba(21, 128, 61, 0.5);
    z-index: 999;
    transition: all 0.4s ease;
    animation: floatButton 3s ease-in-out infinite;
    opacity: 0;
}

.floating-cta.visible {
    opacity: 1;
}

@keyframes floatButton {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.floating-cta:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 50px rgba(21, 128, 61, 0.7);
}

.floating-cta i {
    font-size: 1.3rem;
}

@media (max-width: 768px) {
    .floating-cta {
        bottom: 20px;
        right: 20px;
        padding: 0.9rem 1.5rem;
        font-size: 1rem;
    }
    
    .floating-cta span {
        display: none;
    }
    
    .floating-cta i {
        font-size: 1.5rem;
    }
}

/* ========================================
   TRUST BADGES SECTION
   ======================================== */

/* ========================================
   TRUST BADGES - INFINITE SCROLLING BANNER
   ======================================== */

.trust-badges-section {
    padding: 2rem 0;
    background: var(--dark-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.trust-badges-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.trust-badges-track {
    display: flex;
    gap: 3rem;
    animation: scroll-infinite 30s linear infinite;
    width: max-content;
}

@keyframes scroll-infinite {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.trust-badges-marquee:hover .trust-badges-track {
    animation-play-state: paused;
}

.trust-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    color: var(--text-gray);
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
}

.trust-badge i {
    font-size: 1.5rem;
    color: var(--primary-green);
}

.trust-badge:hover {
    color: var(--primary-green);
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .trust-badges-track {
        gap: 2rem;
        animation-duration: 20s;
    }
    
    .trust-badge {
        font-size: 0.85rem;
        gap: 0.6rem;
    }
    
    .trust-badge i {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .trust-badges-track {
        gap: 1.5rem;
        animation-duration: 15s;
    }
}

/* ========================================
   STATISTICS SECTION
   ======================================== */

.statistics-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--dark-bg) 0%, var(--dark-bg-secondary) 100%);
    position: relative;
    overflow: hidden;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.stat-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 25px;
    border: 1px solid var(--glass-border);
    padding: 3rem 2rem;
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.stat-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 20px 60px rgba(21, 128, 61, 0.3);
}

.stat-icon {
    font-size: 3.5rem;
    color: var(--primary-green);
    margin-bottom: 1.5rem;
}

.stat-number {
    font-size: clamp(3rem, 5vw, 4rem);
    font-weight: 800;
    background: linear-gradient(135deg, #ffffff 0%, var(--primary-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    line-height: 1;
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.stat-number::after {
    content: '+';
    margin-left: 5px;
}

.stat-label {
    color: var(--text-gray);
    font-size: 1.1rem;
    font-weight: 500;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1024px) {
    .stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .stat-card {
        padding: 2rem 1.5rem;
    }
    
    .stat-icon {
        font-size: 2.5rem;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .stat-label {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .stats-container {
        display: none; /* Hide card version on mobile */
    }
    
    .stat-card {
        padding: 2rem 1.5rem;
    }
}

/* Mobile-Only Stats as Text */
.stats-text-mobile {
    display: none; /* Hidden by default */
}

@media (max-width: 480px) {
    .stats-text-mobile {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 2rem 0;
    }
    
    .stat-text-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.75rem;
    }
    
    .stat-text-item i {
        font-size: 3rem;
        color: var(--primary-green);
    }
    
    .stat-number-text {
        font-size: 3rem;
        font-weight: 800;
        background: linear-gradient(135deg, #ffffff 0%, var(--primary-green) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
    }
    
    .stat-number-text::after {
        content: '+';
        margin-left: 2px;
    }
    
    .stat-label-text {
        color: var(--text-gray);
        font-size: 1.1rem;
        font-weight: 500;
        line-height: 1.4;
    }
}

/* ========================================
   MOBILE CAROUSEL - OPTIMIZED FOR SMALL SCREENS
   ======================================== */

.mobile-scroll-wrapper {
    width: 100%;
    position: relative;
}

/* Hide arrows and hints on desktop/tablet - ONLY SHOW ON MOBILE */
.scroll-arrow,
.scroll-pagination,
.scroll-hint,
.pricing-details-toggle {
    display: none;
}

/* Reduce section spacing on mobile only */
@media (max-width: 480px) {
    /* Reduce spacing between sections */
    .features-3d,
    .ambassador-section,
    .impact-carousel-section,
    .awards-winner-section,
    .testimonials-section,
    .bottom-cta-section-new {
        padding: 2.5rem 0 !important;
    }
    
    .statistics-section {
        padding: 2rem 0 !important;
    }
    
    .section-title {
        margin-bottom: 2rem !important;
    }
    
    .section-subtitle {
        margin-bottom: 2rem !important;
    }
    
    /* NOW show arrows and hints on mobile */
    .scroll-arrow,
    .scroll-pagination,
    .scroll-hint {
        display: flex;
    }
    
    /* Main wrapper adjustments */
    .mobile-scroll-wrapper {
        position: relative;
        margin: 0;
        padding: 0;
        contain: layout style;
    }
    
    /* Scroll Container - Optimized with Enhanced Snap */
    .mobile-scroll-container {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scroll-snap-stop: always;
        padding: 0.5rem 1rem;
        /* Better momentum and snap */
        overscroll-behavior-x: contain;
        touch-action: pan-y pan-x pinch-zoom;
        /* Prevent infinite scroll */
        max-width: 100%;
    }
    
    .mobile-scroll-container::-webkit-scrollbar {
        display: none;
    }
    
    /* Navigation Arrows - Better Design */
    .scroll-arrow {
        position: absolute;
        top: 40%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        background: linear-gradient(135deg, rgba(21, 128, 61, 0.95), rgba(22, 163, 74, 0.95));
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 100;
        box-shadow: 0 4px 15px rgba(21, 128, 61, 0.4);
        transition: all 0.3s ease;
        color: white;
        font-size: 1.1rem;
    }
    
    .scroll-arrow:active {
        transform: translateY(-50%) scale(0.92);
        box-shadow: 0 2px 8px rgba(21, 128, 61, 0.6);
    }
    
    .scroll-arrow-left {
        left: -8px;
    }
    
    .scroll-arrow-right {
        right: -8px;
    }
    
    .scroll-arrow.hidden {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%) scale(0.8);
    }
    
    /* Pagination Dots - Visual Indicator */
    .scroll-pagination {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 1.25rem;
        padding: 0;
    }
    
    .pagination-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        cursor: pointer;
    }
    
    .pagination-dot.active {
        background: var(--primary-green);
        width: 28px;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(21, 128, 61, 0.4);
        transform: scale(1.1);
    }
    
    /* Hint Text - Subtle */
    .scroll-hint {
        text-align: center;
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.8rem;
        margin-top: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        opacity: 1 !important; /* Always visible */
        transition: none; /* No transition */
    }
    
    /* Keep persistent hints always visible */
    .scroll-hint.scroll-hint-persistent,
    .scroll-hint.hidden {
        opacity: 1 !important;
        display: flex !important;
    }
    
    .scroll-hint i {
        color: var(--primary-green);
        font-size: 1rem;
        animation: swipeHint 1.5s ease-in-out infinite;
    }
    
    @keyframes swipeHint {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(6px); }
    }
    
    /* ===================================
       WHY CHOOSE SECTION - MOBILE OPTIMIZED
       =================================== */
    
    .mobile-scroll-wrapper .features-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 1rem;
        grid-template-columns: none !important;
        padding: 0;
    }
    
    .mobile-scroll-wrapper .feature-card-3d {
        min-width: calc(100% - 2rem);
        max-width: calc(100% - 2rem);
        flex-shrink: 0;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        padding: 2rem 1.5rem !important;
        margin: 0;
        background: rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(20px) !important;
        border-radius: 20px !important;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        touch-action: pan-y pan-x pinch-zoom;
    }
    
    .mobile-scroll-wrapper .feature-card-3d:active {
        transform: scale(0.98);
    }
    
    .mobile-scroll-wrapper .feature-card-3d .feature-icon {
        font-size: 2.2rem !important;
        margin-bottom: 1rem !important;
        height: auto !important;
        width: auto !important;
    }
    
    .mobile-scroll-wrapper .feature-card-3d .feature-icon i {
        font-size: 2.2rem !important;
    }
    
    .mobile-scroll-wrapper .feature-card-3d .feature-title {
        font-size: 1.25rem !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.3 !important;
    }
    
    .mobile-scroll-wrapper .feature-card-3d .feature-description {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        color: rgba(255, 255, 255, 0.85) !important;
    }
    
    /* ===================================
       PRICING SECTION - MOBILE REDESIGNED
       =================================== */
    
    /* Hide the carousel approach for pricing on mobile */
    .ambassador-section .mobile-scroll-wrapper .mobile-scroll-container {
        overflow-x: visible !important;
        overflow-y: visible !important;
        scroll-snap-type: none !important;
    }
    
    .ambassador-section .mobile-scroll-wrapper .pricing-container {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: 1.5rem !important;
        grid-template-columns: none !important;
        padding: 0 !important;
        padding-top: 20px !important; /* Space for the badge */
    }
    
    .ambassador-section .mobile-scroll-wrapper .pricing-card {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        flex-shrink: 1 !important;
        scroll-snap-align: none !important;
        padding: 1.75rem 1.5rem !important;
        margin: 0 !important;
        cursor: pointer;
        position: relative;
        touch-action: pan-y pinch-zoom !important;
    }
    
    /* Hide arrows and pagination for pricing section */
    .ambassador-section .mobile-scroll-wrapper .scroll-arrow,
    .ambassador-section .mobile-scroll-wrapper .scroll-pagination,
    .ambassador-section .mobile-scroll-wrapper .scroll-hint {
        display: none !important;
    }
    
    /* Pricing card header - always visible */
    .ambassador-section .mobile-scroll-wrapper .pricing-card .plan-badge {
        font-size: 0.75rem !important;
        padding: 0.35rem 0.85rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .ambassador-section .mobile-scroll-wrapper .pricing-card .plan-header {
        margin-bottom: 1rem !important;
    }
    
    .ambassador-section .mobile-scroll-wrapper .pricing-card .plan-header h3 {
        font-size: 1.3rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .ambassador-section .mobile-scroll-wrapper .pricing-card .plan-price {
        margin: 0.75rem 0 !important;
    }
    
    .ambassador-section .mobile-scroll-wrapper .pricing-card .plan-price .currency {
        font-size: 1.3rem !important;
    }
    
    .ambassador-section .mobile-scroll-wrapper .pricing-card .plan-price .amount {
        font-size: 2.5rem !important;
    }
    
    .ambassador-section .mobile-scroll-wrapper .pricing-card .plan-price .period {
        font-size: 0.95rem !important;
    }
    
    .ambassador-section .mobile-scroll-wrapper .pricing-card .plan-subtext {
        font-size: 0.8rem !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* "Click to see details" button */
    .pricing-details-toggle {
        display: inline-flex !important;
        align-items: center;
        gap: 0.5rem;
        color: var(--primary-green);
        font-size: 0.9rem;
        font-weight: 600;
        margin-top: 0.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .pricing-details-toggle i {
        font-size: 0.8rem;
        transition: transform 0.3s ease;
    }
    
    .pricing-details-toggle.active i {
        transform: rotate(180deg);
    }
    
    /* Pricing features - hidden by default, expandable */
    .ambassador-section .mobile-scroll-wrapper .pricing-card .plan-features {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: all 0.4s ease;
        margin-top: 0 !important;
    }
    
    .ambassador-section .mobile-scroll-wrapper .pricing-card.expanded .plan-features {
        max-height: 1000px;
        opacity: 1;
        margin-top: 1rem !important;
    }
    
    .ambassador-section .mobile-scroll-wrapper .pricing-card .plan-features h4 {
        font-size: 0.95rem !important;
        margin-bottom: 0.75rem !important;
        color: var(--primary-green);
    }
    
    .ambassador-section .mobile-scroll-wrapper .pricing-card .plan-features ul {
        gap: 0.5rem !important;
    }
    
    .ambassador-section .mobile-scroll-wrapper .pricing-card .plan-features ul li {
        font-size: 0.85rem !important;
        padding: 0.4rem 0 !important;
        line-height: 1.4 !important;
    }
    
    .ambassador-section .mobile-scroll-wrapper .pricing-card .plan-features ul li i {
        font-size: 0.85rem !important;
    }
    
    /* Remove plan selection icon on mobile */
    .ambassador-section .mobile-scroll-wrapper .pricing-card .plan-selection {
        display: none !important;
    }
}

/* Extra Small Screens - iPhone SE and smaller */
@media (max-width: 375px) {
    .scroll-arrow {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .scroll-arrow-left {
        left: -6px;
    }
    
    .scroll-arrow-right {
        right: -6px;
    }
    
    .mobile-scroll-wrapper .feature-card-3d,
    .mobile-scroll-wrapper .pricing-card {
        padding: 1.75rem 1.25rem !important;
    }
    
    .mobile-scroll-wrapper .feature-card-3d .feature-title {
        font-size: 1.15rem !important;
    }
    
    .mobile-scroll-wrapper .pricing-card .plan-price .amount {
        font-size: 2.5rem !important;
    }
}

/* ===================================
   TESTIMONIALS CAROUSEL - MOBILE ONLY
   =================================== */

@media (max-width: 480px) {
    .testimonials-wrapper .mobile-scroll-container {
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        padding: 0.5rem 1rem;
    }
    
    .testimonials-wrapper .testimonials-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 1rem;
        grid-template-columns: none !important;
        padding: 0;
    }
    
    .testimonials-wrapper .testimonial-card {
        min-width: calc(100% - 2rem);
        max-width: calc(100% - 2rem);
        flex-shrink: 0;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
    
    /* Reduce bottom CTA section size on mobile */
    .bottom-cta-section-new {
        padding: 2rem 0 !important;
    }
    
    .cta-card-glass {
        padding: 2rem 1.5rem !important;
    }
    
    .cta-card-glass h2 {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .cta-card-glass p {
        font-size: 0.95rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .cta-buttons-row {
        gap: 1rem !important;
        flex-direction: column !important;
    }
    
    .cta-buttons-row .btn-3d {
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
        width: 100%;
    }
    
    .cta-badges {
        gap: 0.75rem !important;
        flex-wrap: wrap !important;
        margin-top: 1.5rem !important;
    }
    
    .cta-badges span {
        font-size: 0.8rem !important;
    }
}

/* ========================================
   HOW IT WORKS SECTION
   ======================================== */

.how-it-works-section {
    padding: 4rem 0;
    background: var(--dark-bg);
}

.section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: var(--text-gray);
    margin-top: -2rem;
    margin-bottom: 4rem;
}

.steps-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: stretch;
    max-width: 1400px;
    margin: 0 auto;
}

.step-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 25px;
    border: 1px solid var(--glass-border);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.step-card:nth-child(odd) {
    /* Remove any special styling */
}

.step-card:nth-child(odd) {
    /* Remove the span rule */
}

.step-arrow {
    display: none;
}

@keyframes arrowPulse {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(5px); opacity: 0.7; }
}

.step-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 25px 60px rgba(21, 128, 61, 0.3);
}

.step-number {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    box-shadow: 0 5px 20px rgba(21, 128, 61, 0.5);
}

.step-icon {
    font-size: 3rem;
    color: var(--primary-green);
    margin-bottom: 1.5rem;
}

.step-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: white;
}

.step-card p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
}

@media (max-width: 1200px) {
    .steps-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .steps-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .step-card {
        max-width: 100%;
    }
}

/* ========================================
   TECHNOLOGY SHOWCASE SECTION
   ======================================== */

.tech-showcase-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--dark-bg-secondary) 0%, var(--dark-bg) 100%);
}

.tech-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.tech-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 25px;
    border: 1px solid var(--glass-border);
    padding: 2.5rem;
    transition: all 0.4s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.tech-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(21, 128, 61, 0.3);
}

.tech-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.tech-card-header i {
    font-size: 2.5rem;
    color: var(--primary-green);
}

.tech-card-header h3 {
    font-size: 1.6rem;
    color: white;
}

.tech-card-body {
    margin-bottom: 1.5rem;
    position: relative;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-image {
    width: 100%;
    border-radius: 15px;
    opacity: 0.7;
}

.tech-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 2rem;
}

.detection-label {
    background: rgba(21, 128, 61, 0.9);
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.detection-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 2rem;
}

.detection-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(21, 128, 61, 0.5);
    animation: pulse 3s ease-in-out infinite;
}

.detection-circle i {
    font-size: 3.5rem;
    color: white;
}

.detection-labels-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.detection-label-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(21, 128, 61, 0.2);
    padding: 1rem 1.5rem;
    border-radius: 50px;
    border: 2px solid var(--primary-green);
    transition: all 0.3s ease;
}

.detection-label-item:hover {
    background: rgba(21, 128, 61, 0.3);
    transform: translateX(10px);
}

.detection-label-item i {
    color: var(--primary-green);
    font-size: 1.2rem;
}

.detection-label-item span {
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
}

.analytics-preview {
    width: 100%;
}

.metric {
    margin-bottom: 2rem;
}

.metric-label {
    display: block;
    color: var(--text-gray);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.progress-bar {
    width: 100%;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-green), var(--primary-green-light));
    border-radius: 15px;
    transition: width 2s ease;
    animation: progressAnimation 2s ease-in-out;
}

@keyframes progressAnimation {
    from { width: 0; }
}

.metric-value {
    color: var(--primary-green);
    font-size: 1.5rem;
    font-weight: 700;
}

.mobile-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.mobile-icon {
    font-size: 8rem;
    color: var(--primary-green);
    opacity: 0.3;
}

.notification-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(21, 128, 61, 0.4);
    animation: slideIn 1s ease-in-out infinite alternate;
}

@keyframes slideIn {
    from { transform: translateX(-10px); }
    to { transform: translateX(10px); }
}

.tech-card p {
    color: var(--text-gray);
    line-height: 1.7;
    font-size: 1.05rem;
}

/* ========================================
   IMPROVED TESTIMONIALS
   ======================================== */

.star-rating {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.star-rating i {
    color: #ffd700;
    font-size: 1.2rem;
}

/* Bottom CTA Section - Identical to Home Page */
.bottom-cta {
    padding: 4rem 0;
    background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.bottom-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
    animation: pulseGlow 6s ease-in-out infinite;
}

.bottom-cta .container {
    position: relative;
    z-index: 2;
}

.bottom-cta h2 {
    font-size: clamp(2rem, 4vw, 2.5rem);
    color: white;
    margin-bottom: 1rem;
    font-weight: 800;
}

.bottom-cta p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 2.5rem;
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.cta-features {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-features span {
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cta-features i {
    font-size: 1.2rem;
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .bottom-cta {
        padding: 4rem 0;
    }
    
    .bottom-cta h2 {
        font-size: 1.8rem;
    }
    
    .bottom-cta p {
        font-size: 1.05rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-buttons .btn-3d {
        width: 100%;
        max-width: 300px;
    }
    
    .cta-features {
        gap: 1rem;
    }
    
    .cta-features span {
        font-size: 0.95rem;
    }
}

/* ========================================
   IPHONE 14 PRO IMPROVEMENTS (390px width)
   ======================================== */

@media (max-width: 430px) {
    /* Hero Section */
    .hero-split-3d {
        padding: 6rem 0.8rem 2rem;
    }
    
    .hero-split-container {
        gap: 1.5rem;
    }
    
    .hero-card-left,
    .hero-card-right {
        padding: 1.8rem 1.2rem;
    }
    
    .hero-title {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }
    
    .btn-3d {
        padding: 0.9rem 1.5rem;
        font-size: 0.95rem;
    }
    
    /* Trust Badges */
    .trust-badge {
        font-size: 0.75rem;
    }
    
    .trust-badge i {
        font-size: 1.2rem;
    }
    
    /* Statistics */
    .stat-card {
        padding: 1.5rem 1rem;
    }
    
    .stat-number {
        font-size: 2.2rem;
    }
    
    .stat-label {
        font-size: 0.85rem;
    }
    
    /* Features */
    .feature-card-3d {
        padding: 1.8rem 1.2rem;
    }
    
    .feature-title {
        font-size: 1.2rem;
    }
    
    .feature-description {
        font-size: 0.9rem;
    }
    
    /* Section Titles */
    .section-title {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }
    
    .section-subtitle {
        font-size: 0.9rem;
        margin-bottom: 2rem;
    }
    
    /* Tech Cards */
    .tech-card {
        padding: 1.8rem 1.2rem;
    }
    
    .tech-card-header h3 {
        font-size: 1.3rem;
    }
    
    /* Pricing Cards */
    .pricing-card {
        padding: 1.8rem 1.2rem;
    }
    
    .plan-price .amount {
        font-size: 2.5rem;
    }
    
    /* Testimonials */
    .testimonial-card {
        padding: 1.5rem 1.2rem;
    }
    
    /* Bottom CTA */
    .bottom-cta-content h2 {
        font-size: 1.8rem;
    }
    
    .bottom-cta-content p {
        font-size: 1rem;
    }
    
    .btn-large {
        padding: 1.1rem 2rem;
        font-size: 1rem;
    }
}

/* ========================================
   IPAD IMPROVEMENTS (768px - 1024px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    /* Hero Section */
    .hero-split-container {
        gap: 2rem;
        padding: 0 2rem;
    }
    
    .hero-card-left,
    .hero-card-right {
        padding: 2.5rem 2rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    /* Statistics - 2 columns on iPad */
    .stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        padding: 0 2rem;
    }
    
    .stat-card {
        padding: 2.5rem 2rem;
    }
    
    /* Features - 2 columns on iPad */
    .features-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        padding: 0 2rem;
    }
    
    /* How It Works - Stack on iPad */
    .steps-container {
        flex-direction: column;
        gap: 2rem;
        padding: 0 2rem;
    }
    
    .step-card {
        max-width: 500px;
        width: 100%;
    }
    
    .step-arrow {
        display: none;
    }
    
    /* Tech Showcase - 2 columns */
    .tech-showcase-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        padding: 0 2rem;
    }
    
    /* Pricing - 2 columns */
    .pricing-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        padding: 0 2rem;
    }
    
    .pricing-card:last-child {
        grid-column: 1 / -1;
        max-width: 500px;
        margin: 0 auto;
    }
    
    /* Testimonials */
    .testimonials-container {
        gap: 2rem;
        padding: 0 2rem;
    }
    
    /* Section padding */
    .container {
        padding: 0 2rem;
    }
}

/* ========================================
   SMALL TABLETS (600px - 768px)
   ======================================== */

@media (min-width: 600px) and (max-width: 767px) {
    .stats-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .features-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tech-showcase-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .pricing-container {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   STANDARDIZED SECTION SPACING
   ======================================== */

.hero-split-3d,
.trust-badges-section,
.statistics-section,
.features-3d,
.how-it-works-section,
.tech-showcase-section,
.ambassador-section,
.awards-winner-section,
.testimonials-section,
.bottom-cta-section {
    padding: 4rem 0;
}

/* Hero gets extra top padding for nav */
.hero-split-3d {
    padding: 8rem 1.5rem 5rem;
}

/* Trust badges is smaller divider */
.trust-badges-section {
    padding: 3rem 0;
}

/* Mobile consistent spacing */
@media (max-width: 768px) {
    .hero-split-3d,
    .statistics-section,
    .features-3d,
    .how-it-works-section,
    .tech-showcase-section,
    .ambassador-section,
    .awards-winner-section,
    .testimonials-section,
    .bottom-cta-section {
        padding: 4rem 1rem;
    }
    
    .hero-split-3d {
        padding: 7rem 1rem 4rem;
    }
    
    .trust-badges-section {
        padding: 2rem 1rem;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .hero-split-3d,
    .statistics-section,
    .features-3d,
    .how-it-works-section,
    .tech-showcase-section,
    .ambassador-section,
    .awards-winner-section,
    .testimonials-section,
    .bottom-cta-section {
        padding: 4.5rem 2rem;
    }
    
    .hero-split-3d {
        padding: 8rem 2rem 4.5rem;
    }
    
    .trust-badges-section {
        padding: 2.5rem 2rem;
    }
}

/* ========================================
   OUR IMPACT CAROUSEL SECTION - FIXED
   ======================================== */

.impact-carousel-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--dark-bg-secondary) 0%, var(--dark-bg) 100%);
    position: relative;
    overflow: hidden;
}

.carousel-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
}

.carousel-wrapper {
    overflow: hidden;
    border-radius: 30px;
    position: relative;
    width: 100%;
}

.carousel-track {
    display: flex;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    width: 100%;
}

.carousel-slide {
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

.impact-card {
    background: var(--glass-bg);
    backdrop-filter: blur(30px);
    border-radius: 30px;
    border: 1px solid var(--glass-border);
    overflow: hidden;
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.4),
        0 0 100px rgba(21, 128, 61, 0.2);
    transition: all 0.4s ease;
    transform-style: preserve-3d;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.impact-card:hover {
    box-shadow: 
        0 40px 100px rgba(0, 0, 0, 0.5),
        0 0 120px rgba(21, 128, 61, 0.3);
    transform: translateY(-5px);
}

.impact-image-wrapper {
    width: 100%;
    height: 350px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.impact-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.impact-card:hover .impact-image-wrapper img {
    transform: scale(1.05);
}

.impact-content {
    padding: 2.5rem;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.impact-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 10px 30px rgba(21, 128, 61, 0.4);
    flex-shrink: 0;
}

.impact-icon i {
    font-size: 2rem;
    color: white;
}

.impact-content h3 {
    font-size: 1.8rem;
    color: var(--primary-green);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.impact-content h4 {
    font-size: 1.3rem;
    color: white;
    margin-bottom: 1rem;
    font-weight: 600;
}

.impact-content p {
    font-size: 1rem;
    color: var(--text-gray);
    line-height: 1.7;
    max-width: 600px;
}

/* Carousel Buttons */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(21, 128, 61, 0.9);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    width: 55px;
    height: 55px;
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.carousel-btn:hover {
    background: var(--primary-green);
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 8px 30px rgba(21, 128, 61, 0.6);
}

.carousel-btn:active {
    transform: translateY(-50%) scale(1.05);
}

.carousel-btn-prev {
    left: 0;
}

.carousel-btn-next {
    right: 0;
}

/* Carousel Indicators */
.carousel-indicators {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2.5rem;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.indicator:hover {
    background: rgba(21, 128, 61, 0.5);
    transform: scale(1.2);
}

.indicator.active {
    background: var(--primary-green);
    border-color: var(--primary-green);
    width: 35px;
    border-radius: 8px;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .carousel-container {
        padding: 0 4rem;
    }
}

@media (max-width: 768px) {
    .carousel-container {
        padding: 0 3rem;
    }
    
    .impact-image-wrapper {
        height: 250px;
    }
    
    .impact-content {
        padding: 2rem 1.5rem;
    }
    
    .impact-icon {
        width: 60px;
        height: 60px;
    }
    
    .impact-icon i {
        font-size: 1.8rem;
    }
    
    .impact-content h3 {
        font-size: 1.5rem;
    }
    
    .impact-content h4 {
        font-size: 1.1rem;
    }
    
    .impact-content p {
        font-size: 0.95rem;
    }
    
    .carousel-btn {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .carousel-container {
        padding: 0 2.5rem;
    }
    
    .impact-image-wrapper {
        height: 200px;
    }
    
    .impact-content {
        padding: 1.5rem 1rem;
    }
    
    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* ========================================
   SCANINSIGHTS APP PAGE STYLES
   ======================================== */

/* App Hero Full Width Card */
.hero-card-full {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(30px);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 
        0 40px 100px rgba(0, 0, 0, 0.6),
        0 0 80px rgba(21, 128, 61, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.3);
    padding: 3rem 4rem;
    transform-style: preserve-3d;
    transform: translateZ(80px);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    animation: floatCard 6s ease-in-out infinite;
    max-width: 1300px;
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

/* Prevent hero cards from scroll flip but keep floating animation */
.hero-card-full.scroll-animate,
.hero-card-full.scroll-animate-card {
    opacity: 1 !important;
}

.hero-card-full.animate-in,
.hero-card-full.scroll-animate.animate-in {
    opacity: 1 !important;
}

/* Ensure hero cards keep their original transform and animation */
#aboutHeroCard,
#appHeroCard {
    opacity: 1 !important;
}

/* Override any scroll animation transforms on hero cards */
.hero-split-3d .hero-card-full {
    transform: translateZ(80px) !important;
    animation: floatCard 6s ease-in-out infinite !important;
}

/* Keep the 3D tilt effect on mouse movement */
.hero-card-full:hover {
    transform-style: preserve-3d;
}

.app-hero .hero-split-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(21, 128, 61, 0.4);
}

.app-badge i {
    font-size: 1.3rem;
}

/* Benefits Split Section */
.benefits-split-section {
    padding: 4rem 0;
    background: var(--dark-bg);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.benefits-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 25px;
    border: 1px solid var(--glass-border);
    padding: 3rem;
    overflow-x: hidden;
    transition: all 0.4s ease;
}

.benefits-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(21, 128, 61, 0.3);
}

.vet-benefits {
    border-top: 3px solid #22c55e;
}

.farmer-benefits {
    border-top: 3px solid #06b6d4;
}

.benefits-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.benefits-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(21, 128, 61, 0.4);
}

.benefits-icon i {
    font-size: 2rem;
    color: white;
}

.benefits-header h3 {
    font-size: 2rem;
    color: white;
    font-weight: 700;
}

.benefit-item {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
}

.benefit-item:last-child {
    border-bottom: none;
}

.benefit-item > i {
    color: var(--primary-green);
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.3rem;
}

.benefit-item h4 {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.benefit-item p {
    color: var(--text-gray);
    line-height: 1.6;
}

/* Detection Capabilities */
.detection-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--dark-bg-secondary) 0%, var(--dark-bg) 100%);
}

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

.detection-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.4s ease;
}

.detection-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 20px 50px rgba(21, 128, 61, 0.3);
}

.detection-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.detection-icon i {
    font-size: 1.8rem;
    color: white;
}

.detection-card h3 {
    color: white;
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.detection-card p {
    color: var(--text-gray);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* App Demo Section */
.app-demo-section {
    padding: 4rem 0;
    background: var(--dark-bg);
}

.app-demo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.demo-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 25px;
    border: 1px solid var(--glass-border);
    padding: 3rem 2rem;
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    transition: all 0.4s ease;
}

.demo-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(21, 128, 61, 0.3);
}

.step-number-large {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: white;
    margin: 0 auto 1.5rem;
    box-shadow: 0 10px 30px rgba(21, 128, 61, 0.4);
}

.demo-step h3 {
    color: white;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    text-align: center;
}

.demo-step p {
    color: var(--text-gray);
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.7;
}

.demo-icon {
    text-align: center;
    color: var(--primary-green);
    opacity: 0.6;
}

.demo-arrow {
    color: var(--primary-green);
    animation: arrowPulse 2s ease-in-out infinite;
}

/* App CTA Section */
.app-cta-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-light) 50%, var(--primary-green) 100%);
    background-size: 200% 200%;
    animation: gradientFlow 8s ease infinite;
    position: relative;
    overflow: hidden;
}

.app-cta-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.app-cta-content h2 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    color: white;
    margin-bottom: 1rem;
    font-weight: 800;
}

.app-cta-content p {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 3rem;
}

.cta-stats {
    display: flex;
    gap: 4rem;
    justify-content: center;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.stat-mini {
    text-align: center;
}

.stat-number-mini {
    font-size: 3rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.stat-label-mini {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 1024px) {
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .benefits-card {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .hero-card-full {
        padding: 2.5rem 1.5rem;
        width: 95%;
        max-width: none;
    }
    
    .app-badge {
        font-size: 0.85rem;
        padding: 0.6rem 1.2rem;
        gap: 0.5rem;
    }
    
    .app-badge i {
        font-size: 1rem;
    }
    
    .app-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    /* Benefits section mobile fix */
    .benefits-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }
    
    .benefits-card {
        padding: 2rem 1.5rem;
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .benefits-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .benefits-header h3 {
        font-size: 1.5rem;
    }
    
    .benefit-item {
        padding: 1rem 0;
        gap: 1rem;
        flex-wrap: wrap;
        width: 100%;
    }
    
    .benefit-item h4 {
        font-size: 1rem;
    }
    
    .benefit-item p {
        font-size: 0.9rem;
    }
    
    .detection-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .detection-card {
        padding: 1.5rem 1rem;
    }
    
    .detection-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 1rem;
    }
    
    .detection-icon i {
        font-size: 1.5rem;
    }
    
    .detection-card h3 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .detection-card p {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    
    .app-demo-container {
        flex-direction: column;
    }
    
    .demo-arrow {
        transform: rotate(90deg);
    }
    
    .cta-stats {
        gap: 2rem;
    }
}

@media (max-width: 480px) {
    /* Showcase Feature Cards Mobile Swipe */
    .mobile-scroll-wrapper.showcase-wrapper .mobile-scroll-container {
        display: flex;
        gap: 1rem;
        padding: 0 1rem;
    }
    
    .mobile-scroll-wrapper.showcase-wrapper .ai-features-grid,
    .mobile-scroll-wrapper.showcase-wrapper .report-features-grid {
        display: flex;
        gap: 1rem;
        grid-template-columns: unset;
    }
    
    .mobile-scroll-wrapper.showcase-wrapper .ai-feature-item {
        min-width: 280px;
        max-width: 280px;
        flex-shrink: 0;
        scroll-snap-align: center;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    .mobile-scroll-wrapper.showcase-wrapper .ai-feature-item:active {
        transform: scale(0.98);
    }
    
    .mobile-scroll-wrapper.showcase-wrapper .report-feature-box {
        min-width: 280px;
        max-width: 280px;
        flex-shrink: 0;
        scroll-snap-align: center;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    .mobile-scroll-wrapper.showcase-wrapper .report-feature-box:active {
        transform: scale(0.98);
    }
    
    /* Keep detection grid as 2x2 on mobile */
    .detection-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .detection-card {
        padding: 1.5rem 1rem;
    }
    
    .detection-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 1rem;
    }
    
    .detection-icon i {
        font-size: 1.5rem;
    }
    
    .detection-card h3 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .detection-card p {
        font-size: 0.85rem;
        line-height: 1.4;
    }
}

/* ========================================
   AI & REPORTS SHOWCASE SECTIONS - UPDATED
   ======================================== */

.ai-showcase-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--dark-bg) 0%, var(--dark-bg-secondary) 100%);
}

.reports-showcase-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--dark-bg-secondary) 0%, var(--dark-bg) 100%);
}

/* Vertical Layout for AI Section */
.showcase-vertical {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-top: 3rem;
}

.showcase-details-top {
    width: 100%;
}

.showcase-header-row {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    margin-bottom: 3rem;
}

.showcase-icon-large {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 15px 40px rgba(21, 128, 61, 0.5);
}

.showcase-icon-large i {
    font-size: 3rem;
    color: white;
}

.showcase-text-header {
    flex: 1;
}

.showcase-text-header h3 {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 1rem;
    font-weight: 800;
    line-height: 1.2;
}

.showcase-intro {
    font-size: 1.2rem;
    color: var(--text-gray);
    line-height: 1.8;
}

/* AI Features Grid - 2x2 */
.ai-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.ai-feature-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 15px;
    border-left: 4px solid var(--primary-green);
    transition: all 0.3s ease;
}

.ai-feature-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(10px);
}

.ai-feature-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(21, 128, 61, 0.3);
}

.ai-feature-icon i {
    font-size: 1.5rem;
    color: white;
}

.ai-feature-item h4 {
    color: white;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.ai-feature-item p {
    color: var(--text-gray);
    line-height: 1.6;
}

/* Image at Bottom */
.showcase-image-bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.showcase-img-large {
    width: 100%;
    max-width: 1200px;
    height: auto;
    border-radius: 25px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease;
}

.showcase-img-large:hover {
    transform: translateY(-10px);
    box-shadow: 0 40px 100px rgba(21, 128, 61, 0.4);
}

/* Report Features Grid - 3x2 */
.report-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.report-feature-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem 1.5rem;
    border-radius: 15px;
    border-top: 3px solid var(--primary-green);
    text-align: center;
    transition: all 0.3s ease;
}

.report-feature-box:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(21, 128, 61, 0.3);
}

.report-feature-box i {
    color: var(--primary-green);
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.report-feature-box h4 {
    color: white;
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.report-feature-box p {
    color: var(--text-gray);
    line-height: 1.6;
    font-size: 1rem;
}

/* Mobile Report Image Styling */
.mobile-report-img {
    max-width: 600px;
    margin: 0 auto;
    display: block;
}

/* Remove old report styles that are no longer needed */
.report-features-list,
.report-cta {
    display: none;
}

/* Reports Section - Keep Side by Side */
.showcase-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-top: 3rem;
}

.showcase-split.reverse {
    direction: rtl;
}

.showcase-split.reverse > * {
    direction: ltr;
}

.showcase-image-container {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease;
}

.showcase-image-container:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 40px 100px rgba(21, 128, 61, 0.4);
}

.showcase-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 25px;
}

.mobile-mockup {
    max-width: 80%;
    margin: 0 auto;
    display: block;
}

.showcase-details {
    padding: 2rem;
}

.showcase-details h3 {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
}

/* Report Features List */
.report-features-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.report-feature-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.report-feature-item:last-child {
    border-bottom: none;
}

.report-feature-item i {
    color: var(--primary-green);
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.report-feature-item span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    line-height: 1.6;
}

.report-feature-item strong {
    color: white;
    font-weight: 600;
}

.report-cta {
    margin-top: 2rem;
}

/* Responsive - UPDATE */
@media (max-width: 1024px) {
    .ai-features-grid {
        grid-template-columns: 1fr;
    }
    
    .report-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .showcase-header-row {
        flex-direction: column;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .hero-card-full {
        padding: 2.5rem 2rem;
        width: 90%;
    }
    
    .report-features-grid {
        grid-template-columns: 1fr;
    }
    
    .showcase-text-header h3 {
        font-size: 2rem;
    }
    
    .showcase-intro {
        font-size: 1.05rem;
    }
    
    .ai-feature-item {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-card-full {
        padding: 2rem 1.5rem;
        width: 95%;
    }
}

/* ========================================
   TECHNOLOGY SHOWCASE SECTION
   ======================================== */

.technology-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--dark-bg-secondary) 0%, var(--dark-bg) 100%);
    position: relative;
}

.tech-intro-box {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    padding: 2.5rem;
    text-align: center;
    max-width: 1000px;
    margin: 2rem auto 4rem;
}

.tech-intro-box p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
}

.tech-components-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.tech-component-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 25px;
    border: 1px solid var(--glass-border);
    padding: 3rem 2rem;
    position: relative;
    transition: all 0.4s ease;
    overflow: hidden;
}

.tech-component-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary-green), transparent);
}

.tech-component-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(21, 128, 61, 0.3);
    border-color: var(--primary-green);
}

.component-number {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 800;
    color: white;
    box-shadow: 0 8px 20px rgba(21, 128, 61, 0.4);
}

.component-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(21, 128, 61, 0.2), rgba(34, 197, 94, 0.2));
    border: 2px solid var(--primary-green);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.component-icon i {
    font-size: 2.5rem;
    color: var(--primary-green);
}

.tech-component-card h3 {
    font-size: 1.6rem;
    color: white;
    margin-bottom: 1rem;
    font-weight: 700;
}

.badge-custom {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    color: white;
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    max-width: 100%;
    word-wrap: break-word;
}

/* Mobile: smaller badge text */
@media (max-width: 768px) {
    .badge-custom {
        font-size: 0.65rem;
        padding: 0.4rem 0.8rem;
        letter-spacing: 0.3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 90%;
    }
}

.component-desc {
    color: var(--text-gray);
    line-height: 1.7;
    margin-bottom: 2rem;
    font-size: 1.05rem;
}

.component-features {
    list-style: none;
    padding: 0;
}

.component-features li {
    color: rgba(255, 255, 255, 0.9);
    padding: 0.8rem 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.component-features li:last-child {
    border-bottom: none;
}

.component-features i {
    color: var(--primary-green);
    font-size: 1.1rem;
}

/* Integration Flow */
.tech-integration-box {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 25px;
    border: 1px solid var(--glass-border);
    padding: 3rem;
    margin-top: 4rem;
}

.tech-integration-box h3 {
    font-size: 2rem;
    color: white;
    text-align: center;
    margin-bottom: 3rem;
    font-weight: 700;
}

.tech-integration-box h3 i {
    color: var(--primary-green);
    margin-right: 1rem;
}

.integration-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.flow-step {
    flex: 1;
    min-width: 180px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 2px solid var(--primary-green);
}

.flow-number {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    margin: 0 auto 1rem;
}

.flow-step p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    font-size: 1.05rem;
}

.flow-arrow {
    color: var(--primary-green);
    font-size: 2rem;
    font-weight: 800;
}

/* Mobile breakpoint for integration flow */
@media (max-width: 768px) {
    .tech-intro-box {
        padding: 2rem 1.5rem;
    }
    
    .tech-integration-box {
        padding: 2rem 1.5rem;
        margin-top: 3rem;
    }
    
    .tech-integration-box h3 {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .integration-flow {
        flex-direction: column;
        gap: 1rem;
    }
    
    .flow-step {
        width: 100%;
        min-width: auto;
        padding: 1.5rem 1rem;
    }
    
    .flow-arrow {
        transform: rotate(90deg);
        font-size: 1.5rem;
    }
    
    .flow-number {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .flow-step p {
        font-size: 0.95rem;
    }
    
    .tech-cta-box {
        padding: 2rem 1.5rem;
    }
}

/* Tech CTA */
.tech-cta-box {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-light) 100%);
    border-radius: 25px;
    padding: 3rem;
    text-align: center;
    margin-top: 4rem;
}

.tech-cta-box h3 {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 1rem;
    font-weight: 800;
}

.tech-cta-box p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 2rem;
}

/* UPDATE Responsive section for Technology Cards */
@media (max-width: 1400px) {
    .tech-components-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .tech-components-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .tech-component-card {
        padding: 2rem 1.5rem;
    }
    
    .component-number {
        font-size: 1.2rem;
        width: 35px;
        height: 35px;
    }
    
    .component-icon {
        font-size: 2rem;
    }
    
    .tech-component-card h3 {
        font-size: 1.1rem;
    }
    
    .component-desc {
        font-size: 0.9rem;
    }
    
    .component-features li {
        font-size: 0.85rem;
    }
    
    .tech-intro-box p {
        font-size: 1rem;
    }
    
    .tech-cta-box h3 {
        font-size: 1.8rem;
    }
}

/* Innovation Section */
.innovation-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--dark-bg) 0%, var(--dark-bg-secondary) 100%);
}

.innovation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.innovation-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 25px;
    border: 1px solid var(--glass-border);
    padding: 3rem 2rem;
    text-align: center;
    transition: all 0.4s ease;
}

.innovation-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(21, 128, 61, 0.3);
}

.innovation-card i {
    color: var(--primary-green);
    margin-bottom: 1.5rem;
}

.innovation-card h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: white;
}

.innovation-card p {
    color: var(--text-gray);
    line-height: 1.7;
}

/* Timeline Section */
.milestones-section {
    padding: 4rem 0;
    background: var(--dark-bg);
}

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

.timeline-item {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    transition: all 0.4s ease;
}

.timeline-item:hover {
    transform: translateY(-10px);
    border-color: var(--primary-green);
}

.timeline-year {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ffffff 0%, var(--primary-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
}

.timeline-item h3 {
    color: var(--primary-green);
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
}

.timeline-item p {
    color: var(--text-gray);
    line-height: 1.6;
}

/* ===================================================================
   SCROLL 3D ANIMATION EFFECTS
   =================================================================== */

/* Base state for sections - Enhanced with perspective */
.scroll-animate {
    opacity: 0;
    transform: translateY(50px) translateZ(0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

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

/* Direction-based animations for visual variety */
.scroll-animate.animate-from-left {
    transform: translateX(-40px) translateY(30px);
}

.scroll-animate.animate-from-left.animate-in {
    transform: translateX(0) translateY(0);
}

.scroll-animate.animate-from-right {
    transform: translateX(40px) translateY(30px);
}

.scroll-animate.animate-from-right.animate-in {
    transform: translateX(0) translateY(0);
}

/* Progressive visibility enhancement */
.scroll-animate.fully-visible {
    opacity: 1;
}

/* Base state for cards - Enhanced with scale */
.scroll-animate-card {
    opacity: 0;
    transform: translateY(35px) scale(0.95);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

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

/* Base state for images - Enhanced with blur-to-focus */
.scroll-animate-image {
    opacity: 0;
    transform: scale(0.90) translateY(30px);
    filter: blur(8px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}

.scroll-animate-image.animate-in {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0px);
}

/* Section titles - Extra emphasis animation */
.scroll-animate-title {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

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

/* Special 3D effect for hero cards on scroll */
.hero-card-3d {
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Enhanced stagger animation for grids - More intelligent timing */
.stat-card:nth-child(1) { transition-delay: 0.05s; }
.stat-card:nth-child(2) { transition-delay: 0.1s; }
.stat-card:nth-child(3) { transition-delay: 0.15s; }
.stat-card:nth-child(4) { transition-delay: 0.2s; }

/* Feature cards get a wave effect */
.feature-card:nth-child(1) { transition-delay: 0.1s; }
.feature-card:nth-child(2) { transition-delay: 0.15s; }
.feature-card:nth-child(3) { transition-delay: 0.2s; }
.feature-card:nth-child(4) { transition-delay: 0.25s; }

/* Smooth transitions for all interactive elements */
.scroll-animate * {
    transition: inherit;
}

/* Micro-animation: Subtle floating effect when fully visible */
.scroll-animate-card.fully-visible {
    animation: subtle-float 3s ease-in-out infinite;
}

@keyframes subtle-float {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-5px) scale(1);
    }
}

/* Prevent animations from replaying on resize */
@media (prefers-reduced-motion: no-preference) {
    .scroll-animate,
    .scroll-animate-card,
    .scroll-animate-image,
    .scroll-animate-title {
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                    filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }
}

/* About Us Hero Card - Custom Size */
.about-hero-card {
    max-width: 1100px !important;
    width: 80% !important;
    padding: 2rem 3rem !important;
}

.about-hero .hero-title {
    font-size: 2.8rem !important;
}

.about-hero .hero-subtitle {
    font-size: 1.15rem !important;
}

@media (max-width: 768px) {
    .about-hero-card {
        width: 90% !important;
        padding: 2rem 1.5rem !important;
    }
}

.about-hero {
    min-height: 85vh;
}

.about-hero .hero-background-sharp img {
    opacity: 0.3;
}

/* === 4-COLUMN FEATURES LAYOUT === */
.features-four-columns {
    grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 768px) {
    .features-four-columns {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 1rem;
    }
    
    .feature-card-3d {
        padding: 2rem 1.5rem;
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .features-four-columns {
        padding: 0 0.5rem;
    }
    /* Additional optimizations... */
}

/* GPU Acceleration */
.feature-card-3d {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* === REDESIGNED BOTTOM CTA SECTION === */
.bottom-cta-section-new {
    padding: 4rem 0;
    background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-bg-secondary) 100%);
    position: relative;
    overflow: hidden;
}

/* === TEAM SECTION (About Page) === */
.team-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--dark-bg-secondary) 0%, var(--dark-bg) 100%);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
}

.team-member {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid var(--glass-border);
    text-align: center;
    transition: transform 0.3s ease;
}

.team-member:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(21, 128, 61, 0.3);
}

.team-member img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid var(--primary-green);
    margin-bottom: 1.5rem;
    object-fit: cover;
}

.team-member h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.member-role {
    color: var(--primary-green);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

/* Mobile: 2 columns for team */
@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .team-member {
        padding: 1.5rem 1rem;
    }
    
    .team-member img {
        width: 100px;
        height: 100px;
    }
    
    .team-member h3 {
        font-size: 1.1rem;
    }
    
    .member-role {
        font-size: 0.9rem;
    }
}

.bottom-cta-section-new::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(21, 128, 61, 0.1) 0%, transparent 70%);
}

.cta-card-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    padding: 4rem 3rem;
    text-align: center;
    position: relative;
    z-index: 1;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.cta-card-glass h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #ffffff 0%, var(--primary-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cta-card-glass p {
    font-size: 1.2rem;
    color: var(--text-gray);
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons-row {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.cta-badges {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-badges span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-gray);
    font-size: 0.95rem;
}

.cta-badges span i {
    color: var(--primary-green);
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .cta-card-glass {
        padding: 3rem 2rem;
    }
    
    .cta-buttons-row {
        flex-direction: column;
    }
    
    .cta-badges {
        flex-direction: column;
        gap: 1rem;
    }
}

/* === FIX ABOUT PAGE HERO CARD === */
.about-hero-new .hero-card-full {
    max-width: 900px !important;
    width: 75% !important;
    margin: 0 auto !important;
    padding: 3.0rem 3.5rem !important;
}

.about-hero-new .hero-split-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

@media (max-width: 768px) {
    .about-hero-new .hero-card-full {
        width: 90% !important;
        padding: 2.5rem 2rem !important;
    }
}
/* ========================================
   UNIFIED BACKGROUND - NO COLOR SEPARATION
   ======================================== */

/* Remove all section background variations */
section {
    background: var(--dark-bg) !important;
}

.hero-split-3d,
.trust-badges-section,
.statistics-section,
.features-3d,
.how-it-works-section,
.impact-carousel-section,
.technology-section,
.ambassador-section,
.testimonials-section,
.awards-winner-section,
.bottom-cta-section-new,
.story-section,
.team-section,
.values-section,
.contact-section,
.faq-section,
.map-section,
.detection-section,
.benefits-split-section,
.pregnancy-diagnosis-section,
.ai-showcase-section,
.reports-showcase-section {
    background: var(--dark-bg) !important;
}

/* ========================================
   SCAN LINE - ONLY ON FOOTER SECTION
   ======================================== */

/* Scan line only on footer section element */
footer {
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(21, 128, 61, 0.8) 50%, 
        transparent 100%);
    box-shadow: 0 0 15px rgba(21, 128, 61, 1);
    animation: scanLineFooter 3s linear infinite;
    z-index: 10;
    pointer-events: none;
}

@keyframes scanLineFooter {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ========================================
   ANIMATED GRID (TEXTURE)
   ======================================== */

/* Animated grid pattern */
body::after {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.03;
    background-image: 
        linear-gradient(rgba(21, 128, 61, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21, 128, 61, 0.3) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 40s linear infinite;
}

@keyframes gridMove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}

/* ========================================
   ENHANCED 3D SHADOWS
   ======================================== */

/* Enhanced depth shadows on cards */
.feature-card-3d,
.detection-card,
.benefits-card,
.stat-card,
.testimonial-card,
.pricing-card,
.team-member,
.step-card {
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.4),
        0 5px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.feature-card-3d:hover,
.detection-card:hover,
.benefits-card:hover,
.stat-card:hover,
.testimonial-card:hover,
.pricing-card:hover,
.team-member:hover,
.step-card:hover {
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 15px 30px rgba(21, 128, 61, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Ensure content is above background */
header,
section,
.container {
    position: relative;
    z-index: 1;
}


/* ========================================
   PROPER MOBILE CARDS - EXACTLY AS REQUESTED
   ======================================== */

@media (max-width: 768px) {
    /* Proper mobile cards - NOT forced squares */
    .features-four-columns .feature-card-3d {
        padding: 1.8rem;
        min-height: auto;
        height: auto;
        aspect-ratio: unset; /* Remove any forced aspect ratio */
    }
    
    .features-four-columns .feature-icon {
        width: 55px;
        height: 55px;
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }
    
    .features-four-columns .feature-title {
        font-size: 1.1rem;
        margin-bottom: 0.8rem;
    }
    
    .features-four-columns .feature-description {
        font-size: 0.9rem;
        line-height: 1.6;
    }
}

.nav-logo a {
    display: inline-block;
    line-height: 0;
}

/* Fix logo position on extra large screens */
@media (min-width: 1600px) {
    .nav {
        max-width: 1800px;
        padding: 1rem 4rem;
    }
    
    .nav-logo {
        flex-shrink: 0; /* Prevents logo from shrinking */
    }
    
    .nav-menu {
        margin-left: auto; /* Pushes menu to the right */
    }
}