/* 
   Sun Trader Design System
   Strict Rules: 2-Color Gradients, Pitch Black Dark Mode, Clean Light Mode
   Fonts: Space Grotesk (Headings), Titillium Web (Body)
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Titillium+Web:wght@200;300;400;600;700;900&display=swap');

:root {
    /* CUSTOM FONTS */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Titillium Web', sans-serif;

    /* LIGHT MODE (New Default) */

    /* Backgrounds */
    --color-bg-main: #FFFFFF;
    /* FFFFFF */
    --color-bg-section: #F0F4FF;
    /* F0F4FF */
    --color-bg-card: #FFFFFF;

    /* Text */
    --color-text-primary: #122151;
    /* Deep Navy Blue */
    --color-text-secondary: #5A6B8C;
    /* Softer blue-grey for secondary */
    --color-text-muted: #8896AB;

    /* Brand & Buttons */
    --color-brand-blue: #122151;
    /* #122151 - New Brand Blue */
    --color-btn-text: #FFFFFF;

    /* Borders & Glass */
    --color-border: rgba(78, 103, 235, 0.15);
    /* Light blue border */
    --color-glass: rgba(255, 255, 255, 0.9);

    /* Effects */
    --shadow-main: 0 10px 40px rgba(78, 103, 235, 0.15);

    /* Gradients */
    --gradient-hero: linear-gradient(135deg, #FFFFFF 0%, #F0F4FF 100%);
    --gradient-section: linear-gradient(180deg, #FFFFFF 0%, #F0F4FF 100%);
    /* Vibrant Gradient: Dark Brand Blue to Original Vibrant Blue */
    --gradient-section: linear-gradient(180deg, #FFFFFF 0%, #F0F4FF 100%);
    /* Vibrant Gradient: Dark Brand Blue to Original Vibrant Blue */
    --gradient-text: linear-gradient(90deg, #122151 0%, #4E67EB 100%);
    /* Premium Blue Gradient */
    --gradient-premium-blue: linear-gradient(135deg, #050A18 0%, #122151 100%);

    /* Layout */
    --container-width: 1200px;

    --border-radius: 8px;
    /* Slightly Rounded */

    /* Transitions */
    --transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Reset & Base */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    color: var(--color-text-primary);
    font-family: var(--font-body);
    /* Titillium Web */
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;

    /* Clean Light Background */
    background: var(--color-bg-main);
}

h1,
h2,
h3,
h4,
h5,
h6,
.logo,
.hero-title,
.stat-number {
    font-family: var(--font-heading);
    /* Space Grotesk */
    color: var(--color-text-primary);
}

/* Global Section Titles */
.section-title {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 15px;
    /* Reduced from 20px */
    position: relative;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

.no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
    /* Prevent rubber banding */
}

/* Utility Classes */
.container {
    width: 90%;
    max-width: 1100px;
    /* Reduced from 1200px for tighter feel */
    margin: 0 auto;
    padding: 0 20px;
}

/* Flex Utilities to fix alignment */
.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.gap-4 {
    gap: 1rem;
}

.section {
    padding: 100px 0;
    position: relative;
}

/* Text Gradient Animation */
/* Text Gradient Animation - Premium Shine */
/* Text Gradient Animation - Premium Shine */
.text-gradient {
    background: linear-gradient(to right,
            #050A18 0%,
            #050A18 40%,
            #1E3A8A 50%,
            #050A18 60%,
            #050A18 100%);
    background-size: 200% auto;

    color: #122151;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: shineFlow 8s linear infinite;
    display: inline-block;
    font-weight: 800;
}

@keyframes shineFlow {
    0% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    /* Slightly bigger for impact */
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 8px;
    /* Sharp */
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    /* Tech feel */
    letter-spacing: 1px;
}

/* Primary Button */
.btn-primary {
    background: var(--gradient-premium-blue);
    color: #FFFFFF;
    box-shadow: 0 4px 20px rgba(0, 105, 254, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 105, 254, 0.6);
}

/* Secondary Button (Ghost) */
.btn-secondary {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

/* Light Override Removed */

.btn-secondary:hover {
    background: rgba(0, 105, 254, 0.1);
    transform: translateY(-2px);
}

/* Links inside general text or nav */
.btn-ghost {
    color: var(--color-text-secondary);
}

.btn-ghost:hover {
    color: var(--color-brand-blue);
}

/* Dark Outline Button (User Requested) */
.btn-outline-dark {
    background: transparent;
    border: 2px solid #122151;
    /* Dark Blue */
    color: #122151;
    font-weight: 700;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    /* Ensure link underline is gone */
}

.btn-outline-dark:hover {
    background: #122151;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(18, 33, 81, 0.3);
    transform: translateY(-2px);
}




/* =========================================
   SMART FLOATING NAVBAR (Pill Design)
   ========================================= */

.smart-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 15px 40px;
    background: #FFFFFF;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    pointer-events: auto;
}

/* Hide State */
.smart-navbar.nav-hidden {
    transform: translateY(-100%);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* 1. Left: Logo */
.nav-left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.nav-logo {
    height: 40px;
    width: auto;
    display: block;
}

/* 2. Center: Pill Navigation */
.nav-center {
    flex: 2;
    display: flex;
    justify-content: center;
}

.nav-pill-list {
    display: flex;
    align-items: center;
    background: transparent;
    /* Removed background */
    padding: 0;
    gap: 5px;
    border: none;
    /* Removed border */
    box-shadow: none;
    /* Removed shadow */
    list-style: none;
    margin: 0;
}

.nav-pill-link {
    display: block;
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Hover & Active States */
.nav-pill-link:hover {
    background: rgba(18, 33, 81, 0.05);
    /* Subtle Blue Tint */
    color: var(--color-brand-blue);
    transform: translateY(-1px);
}

/* active class logic if you want later */

/* 3. Right: CTA Button */
.nav-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.nav-cta {
    padding: 12px 28px !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
    /* Reduced Radius */
    box-shadow: 0 4px 15px rgba(0, 105, 254, 0.3);
}

/* Responsive Adjustments */
/* Mobile Toggle & Overlay (Default Hidden on Desktop) */
.mobile-toggle,
.mobile-menu-overlay {
    display: none;
}

/* Responsive Adjustments: Mobile Menu Implementation */
@media (max-width: 991px) {
    .smart-navbar {
        top: 0;
        /* Forced Stick to Top */
        padding: 12px 20px;
        /* Comfortable mobile padding */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        /* Ensure shadow is visible */
    }

    /* Hide Desktop Elements */
    .nav-pill-list,
    .nav-center,
    .desktop-only {
        display: none !important;
    }

    .nav-left {
        flex: 1;
    }

    .nav-right {
        flex: 0;
        /* Just fit content */
        display: flex;
        justify-content: flex-end;
    }

    /* Mobile Toggle Button */
    .mobile-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1100;
    }

    .mobile-toggle .bar {
        width: 100%;
        height: 2px;
        background: var(--color-text-primary);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* FULL SCREEN OVERLAY STYLES */
    .mobile-menu-overlay {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #050A18;
        /* Dark Background as requested */
        z-index: 2000;
        pointer-events: auto;
        /* Enable clicks */
        padding: 20px;
        transform: translateY(-100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        overflow-y: auto;
    }

    .mobile-menu-overlay.active {
        transform: translateY(0);
    }

    /* Overlay Header */
    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40px;
    }

    .mobile-nav-logo {
        height: 35px;
        width: auto;
        filter: brightness(0) invert(1);
        /* Make White */
    }

    .mobile-menu-close {
        background: none;
        border: none;
        color: #ffffff !important;
        /* Force White */
        cursor: pointer;
        padding: 5px;
        z-index: 2100;
        /* Above everything */
    }

    .mobile-menu-close svg {
        stroke: #ffffff !important;
        /* Force SVG Line White */
    }

    /* Mobile Links */
    .mobile-menu-links {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: auto;
        /* Push footer down */
    }

    .mobile-link {
        font-family: 'Inter', sans-serif;
        font-size: 1.5rem;
        font-weight: 600;
        color: #FFFFFF;
        text-decoration: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 15px;
        transition: color 0.3s ease;
    }

    .mobile-link:hover {
        color: var(--color-brand-blue);
    }

    .mobile-link .arrow {
        font-size: 1.2rem;
        opacity: 0.7;
    }

    /* Footer Actions */
    .mobile-menu-footer {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 30px;
    }

    .mobile-cta-btn {
        width: 100%;
        text-align: center;
        padding: 16px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
        background: #FFFFFF;
        /* White Background */
        color: var(--color-brand-blue);
        /* Blue Text */
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .mobile-footer-text {
        text-align: center;
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.9rem;
        font-weight: 500;
        margin-top: 10px;
        letter-spacing: 0.5px;
    }
}



/* Hero Section Video Background */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 0;
    overflow: hidden;
    background: var(--color-bg-main);
}

/* 1. Video Element */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.hero-video.loaded {
    opacity: 1;
}

/* Premium Blending Cursor */
/* Premium Blending Cursor */
#hero-cursor {
    position: absolute;
    /* Relative to Hero Section */
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    /* Clear glass fill */
    border: 1px solid rgba(255, 255, 255, 0.9);
    /* Sharp glass edge */
    border-radius: 50%;
    pointer-events: none;
    /* Ignore clicks */
    mix-blend-mode: difference;
    /* Invert effect */
    transform: translate(-50%, -50%) scale(0);
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.08s linear;
    /* Faster response */
    filter: none;
    /* Crystal Clear */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
}

/* 2. Gradient Overlay for Readability */
.hero-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Light Mode: Fade to white at bottom/top */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 50%, #FFFFFF 100%);
    z-index: 1;
    pointer-events: none;
}

/* Light Mode Overrides Removed */

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.hero-subtitle {
    color: var(--color-brand-blue);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.85rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.hero-title {
    margin-bottom: 30px;
    line-height: 1.1;
    font-size: clamp(3.5rem, 10vw, 6.5rem);
    font-weight: 800;
    /* Bolder */
    letter-spacing: -2px;
    color: var(--color-text-primary);

    opacity: 0;
    /* Use the generic class for animation control in HTML, or keep default here */
    animation: fadeInUp 1s cubic-bezier(0.19, 1, 0.22, 1) forwards 0.2s;
}

/* Clean up duplicate text-gradient if it exists, or just ensure hero-title is correct */


.hero-description {
    font-size: 1.5rem;
    max-width: 700px;
    margin: 0 auto 50px;
    color: var(--color-text-secondary);
    font-weight: 600;
    /* Bolder */
    line-height: 1.6;
    letter-spacing: -0.5px;
}

/* New Animation Wrappers */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

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

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.hero-buttons .btn {
    min-width: 220px;
    /* Equal width for desktop */
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 20;
    opacity: 0.8;
}

.mouse-icon {
    width: 26px;
    height: 42px;
    border: 2px solid var(--color-brand-blue);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.wheel {
    width: 4px;
    height: 8px;
    background: var(--color-brand-blue);
    border-radius: 2px;
    animation: scrollWheel 1.5s infinite;
}

.arrow-down {
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--color-brand-blue);
    border-bottom: 2px solid var(--color-brand-blue);
    transform: rotate(45deg);
    animation: scrollArrow 1.5s infinite;
    animation-delay: 0.2s;
}

@keyframes scrollWheel {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(15px);
        opacity: 0;
    }
}

@keyframes scrollArrow {
    0% {
        transform: rotate(45deg) translate(0, 0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: rotate(45deg) translate(5px, 5px);
        opacity: 0;
    }
}

/* Floating Shapes - simplified for strict gradient look */
.hero-visuals {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.floating-shape {
    position: absolute;
    filter: blur(100px);
    opacity: 0.4;
    border-radius: 50%;
}

.shape-1 {
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: var(--color-brand-blue);
    opacity: 0.15;
}

.shape-2 {
    bottom: -20%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: var(--color-brand-blue);
    opacity: 0.1;
}

/* Platform Section */
.platform-section {
    background: var(--gradient-premium-blue);
    position: relative;
    z-index: 1;
    margin-bottom: 50px;
    padding-bottom: 50px;
    color: #FFFFFF;
}

.platform-visual {
    margin-top: 50px;
    position: relative;
    z-index: 2;
}

/* Trading Grid Overlay */
.platform-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Subtle Blue Grid - Light Mode */
    background-image:
        linear-gradient(rgba(78, 103, 235, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(78, 103, 235, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: -1;
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.platform-grid {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
    text-align: center;
}

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

.section-title {
    margin-bottom: 20px;
    font-size: clamp(3rem, 6vw, 4.5rem);
    /* Significantly larger */
    font-weight: 900;
    /* Black/Ultra Bold */
    color: #FFFFFF;
    letter-spacing: -1px;
}



/* Dashboard Mockup - LARGE & BLUE OUTLINE */
.dashboard-mockup {
    background: transparent;
    border: none;
    /* Thick Blue Outline */
    border-radius: 20px;
    /* Sharp corners */
    position: relative;
    box-shadow: none !important;
    /* Inner/Outer glow */
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    width: 100%;
    /* Full Width */
    max-width: 1000px;
    /* Limit max width */
    margin: 0 auto;
}



/* Shine Effect */
/* Shine Effect Removed */
.dashboard-mockup::after {
    display: none;
    /* Removed shine */
}

.dashboard-mockup:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.6),
        0 0 80px rgba(0, 105, 254, 0.4);
}

@keyframes shine {
    0% {
        left: -100%;
    }

    20% {
        left: 200%;
    }

    100% {
        left: 200%;
    }
}

/* Breathing removed in favor of hover interaction for cleaner feel */

/* Image Fit */
.dashboard-img {
    width: 100%;
    height: auto;
    /* Natural height */
    display: block;
    transition: transform 0.5s ease;
}

.dashboard-mockup:hover .dashboard-img {
    transform: scale(1.03);
    /* Zoom active */
}

/* Features Section (Auto-Scrolling Strip) */
.features-section {
    background: var(--color-bg-section);
    /* Light Blue/White */
    padding: 15px 0;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(78, 103, 235, 0.1);
    border-bottom: 1px solid rgba(78, 103, 235, 0.1);
}

.features-scroller {
    display: flex;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    width: 100%;
}

.features-track {
    display: flex;
    gap: 20px;
    animation: infiniteScroll 40s linear infinite;
    width: max-content;
    padding: 5px 0;
    /* Minimal hover space */
}

.features-track:hover {
    animation-play-state: paused;
    /* Pause on hover */
}

@keyframes infiniteScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Premium Strip Card - CLEAN LIGHT MODE */
.feature-strip-card {
    background: #FFFFFF;
    border: 1px solid rgba(78, 103, 235, 0.1);
    box-shadow: 0 4px 10px rgba(78, 103, 235, 0.05);
    padding: 6px 18px;
    /* Tighter padding */
    border-radius: 50px;
    /* Full pill shape */
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: auto;
    /* Let content define width */
    transition: all 0.3s ease;
    cursor: default;
    white-space: nowrap;
    /* Prevent wrapping */
}

.feature-strip-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.strip-icon {
    width: 28px;
    height: 28px;
    background: rgba(0, 105, 254, 0.1);
    color: var(--color-brand-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.strip-icon svg {
    width: 14px;
    /* Smaller icon */
    height: 14px;
}

.strip-info h3 {
    font-size: 0.85rem;
    /* Smaller text */
    color: var(--color-text-primary);
    /* Dark Blue */
    margin-bottom: 0;
    font-weight: 700;
    line-height: 1;
}

.strip-info p {
    font-size: 0.7rem;
    /* Very small secondary text */
    color: var(--color-text-secondary);
    /* Dark Grey/Blue */
    margin: 2px 0 0 0;
    line-height: 1;
    display: block;
    font-weight: 500;
}

/* Gradient Border Effect */


/* Unique Glow Effect on Hover */
/* [Removed Obsolete Strip Card CSS] */




/* [Removed Obsolete/Duplicate Stats, Testimonials, CTA, and Footer CSS] */

/* Animations Helpers */
.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
}

.slide-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.slide-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

.delay-4 {
    transition-delay: 0.4s;
}

/* Responsive */
@media (max-width: 768px) {





    .mobile-menu-close:hover {
        transform: rotate(90deg);
        color: #4E67EB;
    }

    /* Hide links by default on mobile */
    /* PREMIUM MOBILE MENU */
    /* PREMIUM MOBILE MENU - Slide from Left */
    .nav-links {
        display: flex;
        /* Ensure flex layout */
        flex-direction: column;
        justify-content: flex-start;
        /* Top align content */
        align-items: flex-start;
        /* Left align items */

        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        /* Full width */
        max-width: none;
        height: 100vh;

        background: #122151;
        /* Primary Blue Background */
        box-shadow: none;
        /* Removed Shadow */

        padding: 20px 20px 80px 20px;
        /* More bottom padding for scroll */
        /* Safe padding */
        box-sizing: border-box;
        z-index: 9999;
        overflow-y: auto;
        /* Enable scroll if tall */

        /* Slide Transition */
        transform: translateY(-100%);
        opacity: 1;
        /* Always visible opacity-wise, moved off-screen */
        visibility: visible;
        pointer-events: auto;
        /* Always clickable within itself */
        transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
        border: none;
        backdrop-filter: none;
    }

    /* Animation: Scale + Fade for Glass feel */
    /* Active State: Slide In */
    .nav-links.active {
        transform: translateY(0);
        animation: none;
        /* Disable previous fade/scale animation */
    }

    @keyframes glassMenuEntry {
        from {
            opacity: 0;
            transform: scale(1.05);
            filter: blur(20px);
        }

        to {
            opacity: 1;
            transform: scale(1);
            filter: blur(0px);
        }
    }

    /* Mobile Header Styling - WHITE BAR */
    /* Mobile Header Styling - WHITE BAR */
    .mobile-nav-header {
        background: #F0F4FF;
        /* White/Light Blue Tint */
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 30px;
        padding: 20px 25px;
        /* Clean padding */
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .mobile-brand {
        font-family: var(--font-heading);
        font-size: 1.4rem;
        font-weight: 800;
        color: #122151;
        /* Dark Blue */
        background: #FFFFFF;
        padding: 8px 16px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        display: inline-block;
    }

    /* Close Button - Dark now */
    .mobile-menu-close {
        color: #122151 !important;
        /* Dark Blue */
        font-size: 2rem !important;
        opacity: 0.8;
    }

    /* Close Button - Dark now */
    .mobile-menu-close {
        color: #122151 !important;
        /* Dark Blue */
        font-size: 2rem !important;
        opacity: 0.8;
    }

    /* Mobile Menu Items Style */
    .nav-links li {
        width: 100%;
        text-align: left;
        margin: 0;
        padding: 18px 0;
        /* Adjusted padding - not too big, not too small */
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        /* Subtler Separator */
        opacity: 1;
        transform: none;
        animation: none;
    }

    /* Staggered entry for items */
    .nav-links.active li {
        animation: slideInItems 0.5s ease forwards;
        opacity: 0;
    }

    .nav-links.active li:nth-child(2) {
        animation-delay: 0.1s;
    }

    .nav-links.active li:nth-child(3) {
        animation-delay: 0.15s;
    }

    .nav-links.active li:nth-child(4) {
        animation-delay: 0.2s;
    }

    .nav-links.active li:nth-child(5) {
        animation-delay: 0.25s;
    }

    .nav-links.active li:nth-child(6) {
        animation-delay: 0.3s;
    }

    @keyframes slideInItems {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .nav-links a {
        font-size: 1rem;
        /* Smaller, professional font */
        font-weight: 500;
        color: #FFFFFF !important;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        /* Stacked Layout */
        align-items: flex-start;
        /* Left Align */
        gap: 10px;
        /* Gap between Icon and Text */
        transition: padding-left 0.3s ease;
        text-transform: capitalize;
        letter-spacing: 0.5px;
        width: 100%;
    }

    .nav-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        /* Fixed Box */
        height: 42px;
        background: rgba(255, 255, 255, 0.1);
        /* Glass Box */
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        color: #A0B9E5;
        /* Light Blue Icon Color */
    }

    .nav-links a:hover .nav-icon {
        background: var(--color-brand-blue);
        color: #FFFFFF;
        border-color: rgba(255, 255, 255, 0.2);
    }

    .nav-links a svg {
        opacity: 1;
        width: 20px;
        height: 20px;
        stroke-width: 1.5px;
        /* Thinner line */
    }

    .nav-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        /* Soft square */
    }

    .nav-links a svg {
        opacity: 1;
        /* Full opacity */
        width: 18px;
        height: 18px;
        stroke-width: 2px;
    }

    /* Mobile Hover/Active Effect */
    .nav-links li:active {
        background: rgba(255, 255, 255, 0.1);
        /* Blue selection bg */
    }

    /* Premium Arrow Icon */
    /* Reset unnecessary desktop after-elements */
    .nav-links.active a::after {
        display: none;
    }

    /* Close Button Style - Legacy block removal/reset */
    /* Handled above in header section */

    /* Button "Start Trading Now" */
    .mobile-only-actions {
        display: block !important;
        margin-top: 40px;
        width: 100%;
        max-width: none;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        /* Separator */
    }

    /* White Button with Blue Text as requested */
    /* White Button with Blue Text as requested */
    /* White Button with Blue Text as requested - FORCE OVERRIDE */
    .mobile-only-actions .btn,
    a.white-btn-mobile {
        background-color: #FFFFFF !important;
        /* Pure White */
        background: #FFFFFF !important;
        color: #122151 !important;
        /* Bright Blue */
        border: none !important;
        font-weight: 700 !important;
        /* Bold but not heavy */
        padding: 18px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
        opacity: 1 !important;
    }

    .mobile-only-actions .btn:active {
        transform: scale(0.98);
        background: #f0f0f0 !important;
    }

    .mobile-only-actions a.btn:active {
        transform: scale(0.96);
    }

    /* Dark mode button adjustment: Keep white but maybe subtly dimmer or stronger glow */
    [data-theme="dark"] .mobile-only-actions a.btn {
        box-shadow: 0 0 25px rgba(255, 255, 255, 0.1);
    }

    /* Staggered Delays */
    .nav-links.active li:nth-child(2) {
        animation-delay: 0.1s;
    }

    .nav-links.active li:nth-child(3) {
        animation-delay: 0.2s;
    }

    .nav-links.active li:nth-child(4) {
        animation-delay: 0.3s;
    }

    .nav-links.active li:nth-child(5) {
        animation-delay: 0.4s;
    }

    .nav-links.active li:nth-child(6) {
        animation-delay: 0.5s;
    }

    .nav-links.active li:nth-child(7) {
        animation-delay: 0.6s;
    }

    /* Layout Fixes for Grid */
    .platform-grid,
    .footer-content,
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    h1 {
        font-size: 2.5rem;
    }
}

/* Hide Close button on Desktop */
@media (min-width: 769px) {
    .mobile-menu-close {
        display: none;
    }
}

@keyframes easeOutFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* About Us Section */
.about-section {
    position: relative;
    padding: 120px 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-lead {
    font-size: 1.5rem;
    color: var(--color-text-primary);
    margin-bottom: 20px;
    line-height: 1.5;
    font-weight: 500;
}

.about-text {
    color: var(--color-text-secondary);
    margin-bottom: 40px;
    max-width: 90%;
}

.about-stats {
    display: flex;
    flex-direction: row;
    /* Horizontal Stack */
    gap: 30px;
    margin-top: 50px;
    border-top: none;
    padding-top: 0;
    width: 100%;
    /* Full Width */
    justify-content: space-between;
}

.stat-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    /* Equal width */
    min-width: 80px;
    /* Reduced min-width */

    /* Transparent Blue Glass */
    background: rgba(78, 103, 235, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    padding: 20px 15px;
    /* Reduced padding */
    border-radius: 12px;

    /* Subtle Border */
    border: 1px solid rgba(78, 103, 235, 0.15);
    box-shadow: none !important;
    /* REMOVED SHADOW */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Hover Effect */
.stat-item:hover {
    transform: translateY(-5px);
    /* Reduced lift */
    background: rgba(78, 103, 235, 0.15);
    border-color: var(--color-brand-blue);
    box-shadow: 0 15px 35px rgba(78, 103, 235, 0.2);
}

.stat-icon-wrapper {
    margin-bottom: 10px;
    /* Reduced margin */
    color: var(--color-brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    /* Reduced size */
    height: 40px;
    /* Reduced size */
    border-radius: 50%;
    background: rgba(78, 103, 235, 0.1);
    transition: all 0.3s ease;
}

.stat-item:hover .stat-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    background: var(--color-brand-blue);
    color: #FFFFFF;
}

.stat-icon-wrapper svg {
    width: 20px;
    height: 20px;
}

.stat-num {
    font-size: 2rem;
    /* Reduced from 2.5rem */
    font-weight: 700;
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    line-height: 1;
    margin-bottom: 4px;
    position: relative;
    z-index: 3;
}

.stat-label {
    font-size: 0.75rem;
    /* Reduced font size */
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-secondary);
    font-weight: 600;
    opacity: 1;
    position: relative;
    z-index: 3;
}

/* Glass Card for About Values - Light Mode */
.glass-card {
    background: #FFFFFF;
    border: 1px solid rgba(78, 103, 235, 0.15);
    border-radius: 16px;
    /* Sharp */
    padding: 50px;
    box-shadow: 0 20px 40px rgba(78, 103, 235, 0.1);
    transition: transform 0.3s ease;

    /* Tech Corner Accent for Premium Look */
    position: relative;
}

.glass-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    border-bottom: 3px solid var(--color-brand-blue);
    border-right: 3px solid var(--color-brand-blue);
    opacity: 0.8;
}

.glass-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
}

.value-card h3 {
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: var(--color-text-primary);
}

.values-list li {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
}

.values-list li:last-child {
    margin-bottom: 0;
}

.value-icon {
    font-size: 1.8rem;
    background: rgba(0, 105, 254, 0.1);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    /* Sharp */
    border: 1px solid rgba(0, 105, 254, 0.2);
}

.values-list strong {
    display: block;
    color: var(--color-text-primary);
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.values-list p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 992px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-lead {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {

    /* About Section Mobile Fixes */
    /* About Section Mobile Fixes - AGGRESSIVE FORCE */
    .about-stats {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        /* Tiny gap */
        justify-content: space-between !important;
        overflow-x: hidden !important;
        /* Try to fit without scroll first */
        padding-bottom: 0 !important;
        width: 100% !important;
    }

    .stat-item {
        flex: 1 1 0px !important;
        /* Force equal sizing ignoring content */
        min-width: 0 !important;
        /* Allow shrinking below content size */
        width: auto !important;
        padding: 10px 4px !important;
        /* Extremely tight padding */
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .stat-num {
        font-size: 0.9rem !important;
        /* Very small font */
        margin-bottom: 2px !important;
        white-space: nowrap !important;
        /* Prevent text wrapping */
    }

    .stat-label {
        font-size: 0.5rem !important;
        /* Micro label */
        letter-spacing: 0.5px !important;
        white-space: nowrap !important;
    }

    .stat-icon-wrapper {
        width: 24px !important;
        height: 24px !important;
        margin-bottom: 4px !important;
    }

    .stat-icon-wrapper svg {
        width: 12px !important;
        height: 12px !important;
    }

    .glass-card {
        padding: 30px;
        /* Reduced padding */
    }

    .value-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .about-text {
        max-width: 100%;
    }
}

/* -------------------------------------------------------------
   Horizontal Scroll Section (Unique Layout)
   (Keep as is or empty if not used)
*/


/* --------------------------------------------------------
   PARALLAX DIVIDER - PREMIUM MOTION GRADIENT
   -------------------------------------------------------- */
.parallax-divider {
    height: 180px;
    /* Reduced from likely large height */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Animated Gradient Background - Pure Blue Tones */
    background: linear-gradient(270deg, #122151, #4E67EB, #00C6FF, #122151);
    background-size: 400% 400%;
    animation: gradientMove 8s ease infinite;
    /* Faster smooth motion */

    color: #FFFFFF;
    text-align: center;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
    /* Inner shadow for depth */
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.parallax-content {
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

.parallax-content h2 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    /* Responsive font size */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin: 0;
    line-height: 1.1;

    /* Transparent Text with Outline effect */
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);
    color: transparent;
}

.parallax-content h2 .text-white {
    -webkit-text-stroke: 0;
    color: #FFFFFF;
    font-weight: 800;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* Floating Light Rays (Optional Subtle Motion) */
.parallax-divider::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    opacity: 0.5;
    animation: pulseLight 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pulseLight {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.6;
    }
}

@media (max-width: 768px) {
    .parallax-divider {
        height: 180px !important;
        /* Slightly more height for bigger text */
        padding: 0 10px;
        flex-direction: column;
    }

    .parallax-content h2 {
        font-size: 2.2rem !important;
        white-space: normal;
        display: block;
        width: 100%;
        margin: 0;
        line-height: 1.1;
        text-align: center !important;
        /* Force center */
    }

    .parallax-content h2 .text-white {
        font-size: 3.2rem !important;
        /* Requested bigger size */
        display: block;
        width: 100%;
        /* Full width for centering */
        text-align: center !important;
        /* Explicit center */
        margin: 5px 0 0 0;
        font-weight: 800;
        letter-spacing: 2px;
    }
}



/* --------------------------------------------------------
   UI/UX SECTION
   -------------------------------------------------------- */

/* --------------------------------------------------------
   PARALLAX DIVIDER
   -------------------------------------------------------- */
.parallax-divider {
    padding: 80px 0;
    /* Compact height, instead of fixed 400px */
    background-image: url('https://images.unsplash.com/photo-1639322537228-f710d846310a?q=80&w=2832&auto=format&fit=crop');
    /* Abstract Crypto/Tech Image */
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
}

.parallax-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 18, 0.9);
    /* Very dark overlay to make image subtle */
}

.parallax-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.parallax-content h2 {
    font-size: 4rem;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 2px #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.parallax-content .text-white {
    color: #fff;
    -webkit-text-stroke: 0;
}

/* =========================================
       PLATFORM SECTION (DASHBOARD) - BLUE THEME
       ========================================= */
.platform-section {
    padding: 80px 0 100px 0;
    /* Added bottom padding to prevent overlap */
    background: var(--gradient-premium-blue);
    position: relative;
    overflow: hidden;
    text-align: center;
    /* Default Center Align */
}

/* Background decoration */
.platform-section::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
}

.platform-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    position: relative;
    z-index: 1;
    max-width: 1200px;
    /* Wide container */
    margin: 0 auto;
}

/* Typography - Center Align Desktop */
.platform-text {
    max-width: 800px;
    margin: 0 auto;
}

.platform-section .section-title {
    color: #FFFFFF;
    margin-bottom: 25px;
    font-size: 4rem;
    /* Headline Badi */
    line-height: 1.1;
    font-weight: 800;
    text-align: center;
}

.platform-section .text-gradient {
    background: linear-gradient(90deg, #FFFFFF 0%, #E0F2FE 30%, #4ba0ff 50%, #E0F2FE 70%, #FFFFFF 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shineFlow 4s linear infinite;
}

.platform-text p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 40px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Feature List - BOX DESIGN */
.feature-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0;
}

/* Feature List - BOX DESIGN */
.feature-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0;
}

.feature-list li {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 15px 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #FFFFFF;
    /* Base Color White */
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: default;
    transition: transform 0.3s ease;
}

.feature-list li:hover {
    transform: translateY(-3px);
    color: #FFFFFF !important;
    /* FORCE WHITE ON HOVER so it doesn't turn blue */
}

.feature-list li::before {
    content: '✓';
    position: static;
    width: 24px;
    height: 24px;
    background: #fff;
    color: #122151;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 900;
    flex-shrink: 0;
}

/* Dashboard Image - LARGE & SHARP */
.platform-visual {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.dashboard-mockup {
    width: 90%;
    /* Very wide */
    max-width: 1100px;
    border-radius: 0 !important;
    /* SHARP CORNERS */
    box-shadow: none !important;
    /* Strong shadow */
    background: transparent;
    overflow: hidden;
}

.dashboard-img {
    width: 100%;
    height: auto;
    display: block;
    transform: none !important;
    border-radius: 0 !important;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .platform-section {
        padding: 60px 0 80px 0;
        /* Padding bottom on mobile too */
    }

    .platform-section .section-title {
        text-align: left !important;
        font-size: 3rem;
        margin-bottom: 20px;
    }

    .platform-text p {
        text-align: left !important;
        font-size: 1.1rem;
    }

    .platform-grid {
        align-items: flex-start;
        /* Align structure left */
        gap: 40px;
    }

    .platform-text {
        width: 100%;
        padding: 0;
        /* Reduced from 10px or default */
    }

    /* Feature Boxes on Mobile */
    .feature-list {
        justify-content: flex-start;
        /* Left align */
        flex-direction: column;
        /* Stack them */
        width: 100%;
        gap: 15px;
    }

    .feature-list li {
        width: 100%;
        /* Full width bars */
        justify-content: flex-start;
    }

    /* Image on Mobile */
    /* Image on Mobile */
    .platform-visual {
        width: 100%;
        /* Fix cutoff: Fit to container */
        margin-left: 0;
        /* Reset margins */
    }

    .dashboard-mockup {
        width: 100%;
        max-width: 100%;
        border: none !important;
        box-shadow: none !important;
    }
}

/* --------------------------------------------------------
   UI/UX SECTION (BLUE THEME)
   -------------------------------------------------------- */
.ui-ux-section {
    padding: 60px 0;
    overflow: hidden;
    /* Blue Background - Updated Palette */
    background: var(--gradient-premium-blue);
    position: relative;
}

/* Background Elements */
.ui-ux-section::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.ui-ux-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

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

/* Text Colors - White & Black Mix */
.ui-ux-section .section-title {
    color: #FFFFFF;
    font-size: clamp(3.5rem, 5vw, 5rem);
    line-height: 1.1;
    margin-bottom: 30px;
}

.ui-ux-section .text-gradient {
    /* Shining White/Blue Gradient */
    background: linear-gradient(90deg, #FFFFFF 0%, #E0F2FE 25%, #4c6ef5 50%, #E0F2FE 75%, #FFFFFF 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shineFlow 3s linear infinite;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

.ui-ux-desc {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1.25rem;
    max-width: 700px;
    line-height: 1.6;
    margin: 0 auto 50px auto;
    font-weight: 400;
}

.ui-ux-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    width: 100%;
}

.ui-ux-list li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: rgba(255, 255, 255, 0.05);
    /* Slight card background */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px;
    flex: 1 1 300px;
    border-radius: 12px;
    /* Responsive flex basis */
    max-width: 400px;
    text-align: left;
    /* Keep internal text left aligned */
    transition: transform 0.3s ease, background 0.3s ease;
}

.ui-ux-list li:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.ui-icon {
    font-size: 1.6rem;
    background: rgba(255, 255, 255, 0.15);
    /* Lighter Glass */
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    /* Sharp Corners */
    color: #FFFFFF;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Sharper Border */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.ui-ux-list strong {
    color: #FFFFFF !important;
    display: block;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.ui-ux-list p {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.95rem;
    margin: 0;
}

@keyframes floatPhone {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* PHONE VISUALS */
.ui-ux-visual {
    position: relative;
    height: 400px;
    /* Reduced height to reduce gap */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Full width */
    margin-top: 0px;
    /* Removed gap */
}

.phone-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Active State Logic */
.phone-mockup {
    position: absolute;
    width: 380px;
    /* Bigger size */
    height: auto;
    /* Frame is in image now */
    border-radius: 20px;
    border: none;
    overflow: visible;
    /* Allow shadows/glows if any in image */
    background: transparent;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    z-index: 1;
    filter: none;
    /* Removed drop-shadow per user request */
    animation: none;
    /* NO ANIMATION */
}

/* Float Delays - Removed but keeping classes for safety */
.phone-1 {
    animation-delay: 0s;
}

.phone-2 {
    animation-delay: 0s;
}

.phone-3 {
    animation-delay: 0s;
}

.phone-mockup img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Ensure aspect ratio is preserved */
    display: block;
    pointer-events: none;
}

/* Active Class - Comes to front */
.phone-mockup.active {
    z-index: 20 !important;
    /* High z-index */
    transform: scale(1.05) !important;
    /* Slight scale */
    box-shadow: none;
    /* REMOVED SHADOW */
    border-color: transparent;
}

/* Positioning - Desktop - REFERENCE MATCH (FAN) - NO ANIMATION */
.phone-1 {
    top: 50px;
    /* Lower than center */
    left: 50%;
    z-index: 5;
    transform: translateX(-110%) rotate(-15deg) scale(0.9);
    filter: none;
}

.phone-2 {
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(1);
    z-index: 10;
    border-color: transparent;
}

.phone-3 {
    top: 50px;
    /* Lower than center */
    left: 50%;
    right: auto;
    z-index: 5;
    transform: translateX(10%) rotate(15deg) scale(0.9);
    filter: none;
}

/* Adjust active transforms to keep position but scale */
.phone-1.active {
    transform: translateX(-110%) rotate(-15deg) scale(1.05) !important;
}

.phone-2.active {
    transform: translateX(-50%) scale(1.05) !important;
}


.phone-3.active {
    transform: translateX(10%) rotate(15deg) scale(1.05) !important;
}

/* Nice Hover Effect Animation - KEPT BUT SUBTLE */
/* Nice Hover Effect Animation - SPECIFIC PER CARD */
.phone-2:hover:not(.active) {
    z-index: 15;
    transform: translateX(-50%) translateY(-5px) scale(1);
    box-shadow: none;
}

.phone-1:hover:not(.active) {
    z-index: 15;
    transform: translateX(-110%) rotate(0deg) scale(0.95);
    /* Straighten in place */
    box-shadow: none;
}

.phone-3:hover:not(.active) {
    z-index: 15;
    transform: translateX(10%) rotate(0deg) scale(0.95);
    /* Straighten in place */
    box-shadow: none;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .ui-ux-grid {
        grid-template-columns: 1fr;
        gap: 60px;
        /* Adjusted gap */
        text-align: left;
        /* Left Align */
    }

    .ui-ux-content {
        max-width: 100%;
        margin: 0;
        /* Removing auto margins */
        padding: 0;
        /* Slight padding */
    }

    .ui-ux-list {
        align-items: flex-start;
        /* Left align list items */
        text-align: left;
    }

    .ui-ux-visual {
        height: 250px;
        /* Reduced height to reduce gap */
        margin-bottom: 0;
    }

    .phone-mockup {
        width: 200px;
        /* Smaller on mobile per user request */
        height: auto;
    }

    .phone-1 {
        left: 50%;
        top: 40px;
        transform: translateX(-90%) rotate(-15deg) scale(0.9);
    }

    .phone-3 {
        left: 50%;
        top: 40px;
        transform: translateX(-10%) rotate(15deg) scale(0.9);
    }
}



/* =========================================
   PREMIUM STATS SECTION (REVAMPED)
   ========================================= */
.stats-section {
    padding: 60px 0;
    /* Reduced height */
    position: relative;
    overflow: hidden;
    background: var(--color-bg-section);
    /* Light shared background */
}

/* Trading Mesh Gradient Animation */
.stats-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 105, 254, 0.15), transparent 50%),
        /* Blue Core */
        radial-gradient(circle at 10% 20%, rgba(0, 255, 136, 0.05), transparent 40%),
        /* Green Taint (Profit) */
        radial-gradient(circle at 90% 80%, rgba(60, 30, 255, 0.1), transparent 40%),
        /* Deep Purple */
        radial-gradient(circle at 20% 90%, rgba(0, 105, 254, 0.1), transparent 50%);
    background-size: 150% 150%;
    filter: blur(80px);
    /* Soft diffuse look */
    animation: tradingFlow 15s ease-in-out infinite alternate;
    z-index: 1;
}

/* Subtle Grid Overlay for "Chart" feel */
.stats-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 1;
    opacity: 0.5;
    mask-image: radial-gradient(circle, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle, black 40%, transparent 100%);
}

@keyframes tradingFlow {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-30px, 30px) scale(1.1);
    }

    66% {
        transform: translate(20px, -20px) scale(0.95);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    max-width: 1000px;
    /* Compacting width */
    margin: 0 auto;
}

/* Removed Card Styling as requested */
.stat-card {
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
    text-align: center;
    cursor: default;
}

/* Minimal hover scale for text */
.stat-card:hover {
    transform: scale(1.05);
}

.stat-number {
    font-family: 'Inter', sans-serif;
    font-size: 4.5rem;
    font-weight: 800;
    margin-bottom: 5px;
    color: var(--color-brand-blue);
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: var(--color-brand-blue);
    display: inline-block;
}

.stat-label {
    font-size: 1rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

/* No Glow or Box Shadows needed for clean look */
.stat-glow {
    display: none;
}

/* Mobile */
@media (max-width: 768px) {
    .stats-section {
        padding: 40px 0;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .stat-number {
        font-size: 3.5rem;
    }
}

/* =========================================
   PREMIUM REVIEWS SECTION (DUAL MARQUEE)
   ========================================= */
.reviews-section {
    padding: 80px 0;
    /* Slightly reduced padding */
    position: relative;
    overflow: hidden;
    background: var(--color-bg-main);
    text-align: center;
    /* Force center alignment for children */
}

.reviews-section .section-title {
    margin-bottom: 50px;
    text-align: center;
    display: inline-block;
    /* Ensure it respects text-align */
    width: 100%;
}

/* Background Glow - Light Mode */
.reviews-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(78, 103, 235, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
    /* Reduced gap between rows */
    z-index: 2;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.marquee-track {
    display: flex;
    gap: 20px;
    /* Tighter gap */
    width: max-content;
    flex-wrap: nowrap;
}

/* Left Animation */
.track-left {
    animation: scrollLeft 50s linear infinite;
    /* Slower, smoother */
}

/* Right Animation */
.track-right {
    animation: scrollRight 55s linear infinite;
}

/* Pause on Hover */
.marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 10px));
    }
}

@keyframes scrollRight {
    0% {
        transform: translateX(calc(-50% - 10px));
    }

    100% {
        transform: translateX(0);
    }
}

/* Review Card Styling - SHARP & LIGHT */
.review-card {
    width: 320px;
    height: 180px;
    flex-shrink: 0;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(78, 103, 235, 0.15);
    background: #FFFFFF;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
    border-left: 2px solid var(--color-brand-blue);
    box-shadow: 0 4px 15px rgba(78, 103, 235, 0.05);
}

.review-card:hover {
    background: #FFFFFF;
    border-color: var(--color-brand-blue);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(78, 103, 235, 0.15);
}

.stars {
    color: #FFD700;
    font-size: 1rem;
    margin-bottom: 10px;
    letter-spacing: 1px;
    line-height: 1;
}

.review-text {
    font-size: 0.9rem;
    /* Slightly smaller text */
    line-height: 1.5;
    color: var(--color-text-secondary);
    font-style: italic;
    margin-bottom: 10px;
    flex-grow: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    /* Limit text lines */
    -webkit-box-orient: vertical;
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reviewer-avatar {
    width: 32px;
    height: 32px;
    /* Smaller avatar */
    border-radius: 50%;
    /* Sharp avatar */
    background: linear-gradient(135deg, #0069fe, #001f3f);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.reviewer-info strong {
    display: block;
    color: var(--color-text-primary);
    font-size: 0.9rem;
}

.reviewer-info span {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .reviews-section {
        padding: 50px 0;
    }

    .reviews-section .section-title {
        font-size: 2.8rem;
        /* Larger on mobile */
        margin-bottom: 30px;
    }

    .review-card {
        width: 260px;
        height: 160px;
        /* Even more compact on mobile */
        padding: 15px;
    }

    .review-text {
        font-size: 0.85rem;
    }

    .marquee-wrapper {
        mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    }
}





/* =========================================
   KEY FEATURES - 3D GLASS BLUE CARDS (REF: USER IMAGE)
   ========================================= */

.key-features-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background: #FFFFFF;
    z-index: 5;
}


/* Override Container for Full Width Slider on Desktop */
@media (min-width: 992px) {
    .key-features-section .container {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.key-features-header {
    text-align: center;
    margin-bottom: 30px;
    /* Reduced from 60px */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.key-features-header .section-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    margin-bottom: 15px;
    color: #0f172a;
}

.key-features-header p {
    color: #64748b;
    font-size: 1.15rem;
    max-width: 600px;
    margin: 0 auto;
}

/* SLIDER TRACK - FORCE FULL WIDTH BREAKOUT */
.features-list-container {
    display: flex;
    gap: 30px;
    overflow-x: auto;

    /* Force break out of container */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);

    padding: 20px 4% 40px 4%;
    /* add side padding so first card isn't flush */

    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;

    /* Fade Effect Removed */
    mask-image: none;
    -webkit-mask-image: none;
}

.features-list-container::-webkit-scrollbar {
    display: none;
}

/* -------------------------------------------------------------
   THE BLUE 3D CARD
------------------------------------------------------------- */
.feature-row {
    flex: 0 0 auto;
    width: 320px;
    /* Increased from 280px */
    min-width: 320px;
    /* Increased from 280px */
    height: 380px;
    /* Increased from 320px */
    position: relative;

    /* Theme Blue Gradient - Premium */
    background: var(--gradient-premium-blue);
    /* Subtle inner shine */
    box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.05), 0 20px 40px rgba(78, 103, 235, 0.25);

    border-radius: 12px;
    /* Rounded CORNERS */
    padding: 30px;
    /* Slightly reduced padding */
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    box-shadow: 0 20px 40px rgba(78, 103, 235, 0.25);
    /* Brand Blue Shadow */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

    overflow: hidden;
    cursor: default;
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Slightly clearer border */
    scroll-snap-align: center;
}

/* Hover Lift */
.feature-row:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 30px 60px rgba(78, 103, 235, 0.4);
    /* Brand Blue Hover Shadow */
    z-index: 10;
    /* Optional: Brighten gradient slightly on hover */
    /* Optional: Brighten gradient slightly on hover - cleaner shift */
    background: linear-gradient(135deg, #122151 0%, #1e3a8a 50%, #5D75F0 100%);
}

/* 3D BLOB EFFECT (Background Decoration) */
.feature-row::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
    top: -50px;
    right: -50px;
    border-radius: 50%;
    opacity: 0.6;
    pointer-events: none;
    transition: transform 0.6s ease;
}

.feature-row::after {
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.8) 0%, rgba(37, 99, 235, 0) 70%);
    bottom: -50px;
    left: -50px;
    border-radius: 50%;
    opacity: 0.4;
    pointer-events: none;
    transition: transform 0.6s ease;
}

.feature-row:hover::before {
    transform: translate(-20px, 20px);
}

.feature-row:hover::after {
    transform: translate(20px, -20px);
}

/* INNER CONTENT WRAPPER (Z-Index above blobs) */
.f-row-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* TEXT CONTENT */
.f-row-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.f-row-content h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.5px;
}

.f-row-content p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    margin: 0;
    font-weight: 400;
}

/* BOTTOM FOOTER (Badge + Arrow) */
.f-row-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: auto;
    /* Push to bottom */
}

/* PILL BADGE */
.f-pill-badge {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 20px;
    /* SHARP */
    font-size: 0.85rem;
    color: #FFFFFF;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
    white-space: nowrap;
}

/* CIRCLE ARROW BUTTON */
.f-circle-btn {
    width: 45px;
    height: 45px;
    background: #FFFFFF;
    border-radius: 50%;
    /* SHARP */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    /* Blue Icon */
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.feature-row:hover .f-circle-btn {
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.f-circle-btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

/* RESPONSIVE */
.slider-dots-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 5px;
    /* Reduced from 20px */
}

.slider-dot {
    width: 8px;
    height: 8px;
    background-color: #cbd5e1;
    border-radius: 50%;
    transition: all 0.3s;
}

.slider-dot.active {
    background-color: #2563eb;
    width: 25px;
    /* Long pill for active */
    border-radius: 10px;
}

@media (max-width: 992px) {
    .key-features-section {
        padding: 40px 0;
        /* Reduced padding */
    }

    .key-features-header {
        margin-bottom: 25px;
        /* Reduced gap for Mobile */
        padding: 0;
    }

    .key-features-header .section-title {
        font-size: 2.5rem;
        /* Match global mobile size */
    }

    /* Remove Blur/Fade on Mobile */
    .features-list-container {
        mask-image: none;
        -webkit-mask-image: none;
    }

    .feature-row {
        width: 85vw;
        min-width: 85vw;
        height: 300px;
        /* Reduced Mobile Height */
        padding: 25px;
        scroll-snap-align: center;
    }


    .f-row-content h3 {
        font-size: 1.75rem;
    }
}


/* =========================================
   CONTACT US SECTION (FINAL FIX)
   ========================================= */
.contact-section {
    padding-top: 80px;
    padding-bottom: 0px;
    height: 500px;
    /* Slight increase */
    background: #ffffff;
    position: relative;
    z-index: 900;
    overflow: visible;
    display: flex;
    align-items: flex-end;
}

/* Override Container for Full Width Layout */
/* Override Container for Full Width Layout - REMOVED TO FIX ALIGNMENT */
/* .contact-section .container {
    width: 100%;
    max-width: 1400px; 
    padding: 0 40px;
    height: 100%;
} */

/* Use standard container behavior but ensure height is passed down if needed */
.contact-section .container {
    height: 100%;
    /* No custom width overrides */
}

.contact-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 901;
}

/* LEFT COLUMN: TEXT */
.contact-text {
    flex: 1;
    max-width: 650px;
    /* Increased slightly */
    margin-bottom: 80px;
    /* Align with image visual center */
    position: relative;
    z-index: 905;
    text-align: left;
    /* Desktop: Left Align */
    margin-left: 0;
    /* Remove manual shift */
    margin-right: 0;
}

.contact-text .section-title {
    color: #000000;
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 25px;
    text-align: left;
    /* Desktop: Left Align */
    display: block;
}

.contact-text p {
    color: #1a1a1a;
    font-size: 1.15rem;
    margin-bottom: 35px;
    line-height: 1.6;
    font-weight: 500;
    text-align: left;
    /* Desktop: Left Align */
}

/* RIGHT COLUMN: IMAGE CONTAINER */
.contact-image {
    flex: 0 0 50%;
    /* Strictly take 50% width */
    height: 100%;
    position: relative;
    display: block;
    /* Ensure block level */
}

/* THE BULL IMAGE */
.support-img {
    position: absolute;
    bottom: 0;
    right: 0;
    left: auto;
    width: auto;
    height: 180%;
    /* IMAGE BADI KARO (Bigger) */
    /* Massive Pop-out */
    min-width: 600px;
    max-width: none;
    object-fit: contain;
    filter: drop-shadow(-10px 10px 40px rgba(0, 0, 0, 0.3));
    z-index: 910;
    pointer-events: none;
    display: block !important;
    /* Force Show */
    opacity: 1 !important;
    visibility: visible !important;
}

/* REMOVE OLD FLUFF */
.contact-image::after {
    display: none;
}

.floating-img {
    animation: none;
}

/* MOBILE RESPONSIVE */
@media (max-width: 991px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
        /* Default mobile padding */
    }

    .contact-section {
        height: auto;
        padding: 60px 0 0 0;
        /* Remove bottom padding to let image sit flush */
        z-index: 10;
        overflow: hidden;
        /* Contain on mobile */
    }

    .contact-section .container {
        max-width: 100%;
        padding: 0 20px;
    }

    .contact-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .contact-text {
        text-align: center !important;
        /* Mobile: Center Align */
        margin-bottom: 60px;
        /* Increased gap for Bull Image */
        max-width: 100%;
    }

    .contact-text .section-title {
        text-align: center !important;
        /* Mobile: Center Align */
        font-size: 3rem;
    }

    .contact-text p {
        text-align: center !important;
        /* Mobile: Center Align */
    }

    .contact-image {
        flex: auto;
        width: 100%;
        height: 400px;
        /* Increased height area for mobile */
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    .support-img {
        position: relative;
        height: 120%;
        /* Bigger on mobile */
        min-width: 400px;
        /* Force width */
        width: auto;
        right: auto;
        bottom: -20px;
        /* Push down slightly */
        transform: none;
    }
}


/* =========================================
   ANIMATION UTILITIES (GSAP Targets)
   ========================================= */
.anim-fade-right {
    opacity: 0;
    transform: translateX(-50px);
}

.anim-fade-left {
    opacity: 0;
    transform: translateX(50px);
}

.hover-scale {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* =========================================
   PREMIUM FOOTER (REBUILT)
   ========================================= */
.site-footer {
    background: #050A18;
    /* Darker than brand blue for contrast */
    color: #FFFFFF;
    padding: 80px 0 30px;
    position: relative;
    z-index: 100;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 60px;
    margin-bottom: 60px;
}

/* Left Column: Brand */
.footer-brand-col {
    flex: 1;
    min-width: 300px;
    max-width: 450px;
}

.footer-logo {
    height: 45px;
    width: auto;
    filter: brightness(0) invert(1);
    margin-bottom: 25px;
    display: block;
}

.footer-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Social Icons */
.footer-socials {
    display: flex;
    gap: 15px;
}

.social-link {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
}

.social-link:hover {
    background: var(--color-brand-blue);
    border-color: var(--color-brand-blue);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 105, 254, 0.3);
}

/* Right Column: Links */
.footer-links-col {
    display: flex;
    gap: 80px;
    flex-wrap: wrap;
    /* Ensure they wrap securely on very small screens */
}

.footer-nav-group h4 {
    color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

.footer-nav-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-group li {
    margin-bottom: 15px;
}

.footer-nav-group a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-nav-group a:hover {
    color: #FFFFFF;
    transform: translateX(5px);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Bottom Bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    text-align: center;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
    margin: 0;
}

/* Responsive Footer */
@media (max-width: 991px) {
    .footer-top {
        flex-direction: column;
        gap: 50px;
    }

    .footer-links-col {
        width: 100%;
        justify-content: space-between;
        /* Spread columns nicely */
        gap: 40px;
    }
}

@media (max-width: 576px) {
    .footer-links-col {
        flex-direction: column;
        gap: 40px;
    }

    .footer-brand-col {
        max-width: 100%;
        text-align: left;
        /* Keep clean left align */
    }

    .footer-socials {
        justify-content: flex-start;
        /* Align with text */
    }
}

/* =========================================
   CONTACT MODAL FORM
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 20, 0.6);
    /* Deep dark overlay */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 20px;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-container {
    background: #FFFFFF;
    width: 100%;
    max-width: 460px;
    /* Slightly wider to accommodate padding */
    border-radius: 20px;
    /* Very rounded premium feel */
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.2);
    padding: 40px;
    /* Massive internal padding as requested */
    position: relative;
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    overflow: hidden;
}

.modal-overlay.active .modal-container {
    transform: translateY(0) scale(1);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #98A2B3;
    /* Slate 400 - Subtle visible on white */
    cursor: pointer;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 20;
}

.modal-close:hover {
    background: #F2F4F7;
    color: #121212;
    transform: rotate(90deg);
}

.modal-header {
    text-align: center;
    background: var(--gradient-premium-blue);
    padding: 40px 30px;
    /* Spacious header */
    border-radius: 16px;
    /* Nested card look */
    margin-bottom: 0;
    /* Form touches or gap? Let's give it gap via form padding */
    box-shadow: 0 10px 30px rgba(0, 80, 200, 0.15);
}

.modal-logo {
    height: 32px;
    width: auto;
    margin-bottom: 15px;
    filter: brightness(0) invert(1);
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.modal-header h3 {
    font-size: 1.5rem;
    color: #FFFFFF !important;
    /* Forced White */
    margin-bottom: 10px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.modal-header p {
    color: rgba(255, 255, 255, 0.9) !important;
    /* Forced Whiteish */
    font-size: 0.95rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.5;
}

/* Form Styles */
.contact-form {
    padding: 20px 25px 25px;
    /* Balanced padding */
}

.contact-form .form-group {
    margin-bottom: 16px;
    text-align: left;
}

.contact-form label {
    display: block;
    font-size: 0.85rem;
    color: #344054;
    /* Slate 700 */
    margin-bottom: 6px;
    font-weight: 600;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #D0D5DD;
    /* Slate 300 */
    border-radius: 8px;
    /* Modern smooth radius */
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    color: #101828;
    background: #FFFFFF;
    transition: all 0.2s ease;
}

.contact-form input::placeholder {
    color: #98A2B3;
    /* Slate 400 */
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-brand-blue);
    box-shadow: 0 0 0 4px rgba(18, 33, 81, 0.1);
}

.contact-form textarea {
    resize: none;
}

.btn-block {
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    text-transform: none;
    /* More conversational/modern */
    letter-spacing: 0.3px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

/* Mobile Responsive Modal */
@media (max-width: 480px) {
    .modal-container {
        max-width: 90%;
        margin: 0 auto;
        border-radius: 16px;
        /* Restore Radius */
        height: auto;
        max-height: 90vh;
        /* Prevent overflow */
        display: block;
        overflow-y: auto;
    }

    .modal-header {
        padding: 40px 25px;
        flex-shrink: 0;
    }

    .contact-form {
        padding: 25px;
        flex-grow: 1;
        background: #fff;
    }

    .modal-close {
        top: 20px;
        right: 20px;
        color: #fff;
    }
}

/* Contact Form Success View */
.success-view {
    animation: fadeIn 0.5s ease;
}

.checkmark-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.checkmark {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #ffffff;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #00c853;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #00c853;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke: #fff;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {

    0%,
    100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #00c853;
    }
}

/* Core Features Section */
.core-features-section {
    padding-top: 60px;
    padding-bottom: 120px;
    background: var(--color-bg-section);
    /* Subtle difference from Hero */
    position: relative;
    z-index: 2;
}

.core-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 60px;
}

.core-feature-card {
    background: rgba(255, 255, 255, 0.7);
    /* Glassy white */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    padding: 25px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* New Grid Layout: Icon Left, Content Right */
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon title"
        "icon desc";
    gap: 8px 20px;
    /* Vertical gap 8px, Horizontal 20px */
    align-items: start;

    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.core-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 105, 254, 0.15);
    background: #FFFFFF;
    border-color: rgba(78, 103, 235, 0.3);
}

/* Icon Wrapper */
.feature-icon-wrapper {
    grid-area: icon;
    width: 60px;
    /* Slightly larger for better left balance */
    height: 60px;
    background: rgba(78, 103, 235, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    /* Remove bottom margin */
    transition: all 0.3s ease;
}

.core-feature-card:hover .feature-icon-wrapper {
    background: var(--color-brand-blue);
    transform: scale(1.1) rotate(5deg);
}

.feature-icon {
    color: var(--color-brand-blue);
    transition: all 0.3s ease;
}

.core-feature-card:hover .feature-icon {
    color: #FFFFFF;
}

.feature-title {
    grid-area: title;
    font-size: 1.2rem;
    /* Slightly reduced for better fit */
    font-weight: 700;
    margin-bottom: 0;
    /* Handled by grid gap */
    align-self: end;
    /* Align to bottom of first row */
    line-height: 1.2;
    color: var(--color-text-primary);
}

.feature-desc {
    grid-area: desc;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
    align-self: start;
    /* Align to top of second row */
}

/* Responsive adjustments */
@media (max-width: 768px) {

    /* Global Mobile Alignments - EXCEPT Hero */
    .section-title,
    h2,
    h3 {
        text-align: left !important;
        font-size: 2.5rem;
        /* Reduce form 4rem or default */
        line-height: 1.1;
    }

    /* Fix Review Headline Alignment on Mobile */
    .reviews-section .section-title {
        text-align: center !important;
    }

    .section-title br {
        display: none;
        /* Hide breaks on mobile to save space */
    }

    /* Ensure Hero stays centered */
    .hero-title,
    .hero-subtitle,
    .hero-description {
        text-align: center !important;
    }

    /* Stack Hero Buttons on Mobile */
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }


    /* Core Features - Vertical Stack (No Slider) */
    .core-features-grid {
        display: grid;
        grid-template-columns: 1fr;
        /* Stack vertically */
        gap: 15px;
        /* Tighter gap */
        overflow-x: visible;
        /* Remove scroll */
        scroll-snap-type: none;
        padding-bottom: 0;
        margin-top: 40px;
    }

    /* Remove Scrollbar styling */
    .core-features-grid::-webkit-scrollbar {
        height: 0;
        width: 0;
        display: none;
    }

    .core-feature-card {
        min-width: 0;
        /* Reset */
        scroll-snap-align: none;
        padding: 15px;
        /* Compact padding */
        border-radius: 8px;
        /* Slightly smaller radius */

        /* Maintain Grid Layout (Icon Left) but compact */
        gap: 0 15px;
    }

    .feature-icon-wrapper {
        width: 48px;
        /* Smaller icon on mobile */
        height: 48px;
    }

    .feature-title {
        font-size: 1.1rem;
    }

    .feature-desc {
        font-size: 0.9rem;
    }

    .container {
        padding: 0 10px;
        /* Reduced from 20px as requested */
    }

    /* Adjust centralized elements if needed */
    .text-center {
        text-align: left !important;
    }

    /* About Section Mobile Optimizations */
    .about-section {
        padding: 40px 0;
        /* Simpler padding */
    }

    .about-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .about-stats {
        margin-top: 25px;
        flex-direction: column;
        /* Stack vertically for impact */
        gap: 15px;
    }

    .stat-item {
        width: 100%;
        min-width: 100%;
        margin-bottom: 0;
    }

    .value-card {
        padding: 20px;
    }

    .values-list li {
        margin-bottom: 20px;
    }

    /* Animation Speedup on Mobile */
    .slide-up,
    .fade-in,
    .fade-in-up {
        animation-duration: 0.5s !important;
        /* Fast animations */
        animation-delay: 0s !important;
        /* Instant start */
    }

    /* Dashboard Mobile Refinement */
    .dashboard-mockup {
        border-radius: 12px;
        box-shadow: none !important;
        /* Nice shadow */
        overflow: hidden;
        border: none;
        margin-top: 20px;
    }

    .dashboard-img {
        width: 100%;
        height: auto;
        display: block;
        transform: none !important;
        /* Force remove any lingering JS transform */
    }
}

/* Global Premium Dashboard Styling (Desktop + Mobile) */
.dashboard-mockup {
    position: relative;
    border-radius: 0 !important;
    overflow: hidden;
    /* box-shadow: 0 25px 80px rgba(0, 60, 150, 0.15); REMOVED SHADOW */
    box-shadow: none !important;
    /* Deep premium shadow */
    background: transparent;
    transition: transform 0.4s ease;
}

.dashboard-mockup:hover {
    transform: translateY(-5px);
    box-shadow: none !important;
}

.dashboard-img {
    width: 100%;
    height: auto;
    display: block;
    display: block;
    border-radius: 0 !important;
    /* Inner radius matching border */
}

/* =========================================
   NEW FAQ SECTION DESIGN (USER REQUESTED)
   ========================================= */
.faq-section {
    position: relative;
    padding: 100px 0 160px 0;
    /* Clean white background */
    background: #FFFFFF;
    overflow: hidden;
}

.faq-header {
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.faq-label {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-brand-blue);
    /* Brand Blue for the label */
    margin-bottom: 10px;
}

/* Inherit Global Section Title, only helper tweaks here if needed */
.faq-header .section-title {
    /* Removing overrides to match global style exacty */
    margin-bottom: 10px;
    color: var(--color-brand-blue) !important;
}

/* Accordion Container */
.faq-accordion {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* FAQ Item */
.faq-item {
    border-radius: 8px;
    /* Sharp Corners */
    background: #F0F4FF;
    /* Light blue tint matching theme bg-section */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
    position: relative;
    border: 1px solid transparent;
    /* Prepare for border transition */
}

.faq-item.active {
    background: #FFFFFF;
    border-radius: 8px;
    /* Sharp Corners */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border-color: var(--color-brand-blue);
    /* Blue border when active */
}

/* Trigger Button */
.faq-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    /* Slightly taller */
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--color-text-primary);
    /* Deep Blue */
    font-weight: 600;
    font-size: 1.1rem;
    /* Slightly larger */
    transition: color 0.3s ease;
}

.faq-item.active .faq-trigger {
    color: var(--color-brand-blue);
    /* Highlight active question */
    padding-bottom: 15px;
}

/* Icon */
.faq-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    /* Circle icon is fine, or do we want square? User said "proper perfect". Circle usually looks better for +/-. Keep circle. */
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--color-brand-blue);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    border: 1px solid rgba(78, 103, 235, 0.1);
}

.faq-item:hover .faq-icon {
    transform: scale(1.05);
    border-color: var(--color-brand-blue);
}

.faq-item.active .faq-icon {
    background: var(--color-brand-blue);
    color: #FFFFFF;
    border-color: var(--color-brand-blue);
}

.plus-icon,
.minus-icon {
    position: absolute;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.plus-icon {
    opacity: 1;
    transform: rotate(0deg);
}

.minus-icon {
    opacity: 0;
    transform: rotate(-180deg);
    /* Start rotated for effect */
}

.faq-item.active .plus-icon {
    opacity: 0;
    transform: rotate(180deg);
}

.faq-item.active .minus-icon {
    opacity: 1;
    transform: rotate(0deg);
}

/* Content Area */
.faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0;
}

.faq-item.active .faq-content {
    grid-template-rows: 1fr;
    opacity: 1;
}

.faq-body {
    overflow: hidden;
    padding: 0 30px 30px 30px;
    color: var(--color-text-secondary);
    font-weight: 400;
    line-height: 1.7;
    font-size: 1rem;
}

.faq-body ul {
    margin-top: 15px;
    padding-left: 20px;
    list-style-type: none;
    /* Custom bullets */
}

.faq-body li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 15px;
}

.faq-body li::before {
    content: "•";
    color: var(--color-brand-blue);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Mobile Tweaks */
@media(max-width: 768px) {
    .faq-section {
        padding: 60px 0;
    }

    /* Ensure global headline styles work */
    .section-title {
        font-size: 2.5rem;
        /* Already global but reinforcing if needed */
    }

    .faq-trigger {
        padding: 20px;
        font-size: 1rem;
    }

    .faq-body {
        padding: 0 20px 20px 20px;
    }

    .faq-icon {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }

}


/* =========================================
   CTA SECTION
   ========================================= */
.cta-section {
    padding: 60px 0;
}

/* Force Wider Container for CTA only if needed, OR just stretch card */
@media (min-width: 1200px) {
    .cta-section .container {
        max-width: 1300px;
        /* Make it wider than standard content */
    }
}

.cta-card {
    background: var(--gradient-premium-blue);
    border-radius: 40px;
    padding: 40px 60px;
    /* Reduced vertical padding */
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    color: #FFFFFF;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    min-height: 320px;
    /* Reduced height further */
}

/* Add some subtle bg glow */
.cta-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 80%;
    height: 150%;
    background: radial-gradient(circle, rgba(78, 103, 235, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.cta-content {
    flex: 1;
    max-width: 500px;
    z-index: 2;
    position: relative;
}

.cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 15px;
    color: #FFFFFF;
}

.cta-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 25px;
    line-height: 1.5;
}

.cta-btn {
    padding: 14px 28px;
    font-size: 0.95rem;
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--color-brand-blue) !important;
    text-transform: capitalize;
    font-weight: 700;
}

.cta-btn:hover {
    background: #f8fafc;
    color: #1e3a8a !important;
    transform: translateY(-5px);
    box-shadow: none !important;
    /* REMOVED SHADOW */
}

.cta-visual {
    flex: 1;
    /* Giving less space to pushing content */
    display: flex;
    justify-content: flex-end;
    /* Align to right */
    position: absolute;
    /* Take out of flow to control exact position */
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 1;
    pointer-events: none;
}

/* Dual Phone Positioning - Matching Image */
.cta-mockup {
    position: absolute;
    width: auto;
    height: 110%;
    /* Make them large, overflowing slightly top/bottom is okay */
    top: -5%;
    object-fit: contain;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5));
    transition: transform 0.5s ease;
}

/* Phone 1 (Left - Splash - Tilted Left) */
.mockup-1 {
    z-index: 10;
    right: 280px;
    /* Position relative to right edge */
    transform: rotate(-8deg);
    /* Tilted Left */
}

/* Phone 2 (Right - Dashboard - Tilted Right) */
.mockup-2 {
    z-index: 5;
    right: 50px;
    /* Further right */
    transform: rotate(8deg) translateY(20px);
    /* Tilted Right */
}

.cta-card:hover .mockup-1 {
    transform: rotate(-6deg) scale(1.02);
}

.cta-card:hover .mockup-2 {
    transform: rotate(10deg) translateY(20px) scale(0.98);
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .cta-section .container {
        padding: 0;
    }

    .cta-card {
        flex-direction: column;
        align-items: center;
        /* Center align for better mobile balance */
        padding: 40px 20px 0 20px;
        /* Remove bottom padding, let visual take space */
        text-align: center;
        border-radius: 24px;
        min-height: auto;
        overflow: hidden;
        /* Ensure clipping */
    }

    .cta-content {
        max-width: 100%;
        margin-bottom: 20px;
        /* Space between text and phones */
        z-index: 20;
    }

    .cta-title {
        font-size: 2rem;
        text-align: center !important;
    }

    .cta-text {
        text-align: center !important;
    }

    .cta-visual {
        position: relative;
        /* Back to flow */
        width: 100%;
        height: 350px;
        /* Fixed height for the visual area */
        bottom: auto;
        top: auto;
        right: auto;
        left: auto;
        justify-content: center;
        margin-top: 10px;
    }

    .cta-mockup {
        height: 320px;
        position: absolute;
        bottom: -20px;
        /* Align to bottom of visual container */
    }

    .mockup-1 {
        right: 50%;
        margin-right: -40px;
        /* Centered-ish overlap */
        transform: rotate(-5deg);
        z-index: 2;
    }

    .mockup-2 {
        right: 50%;
        margin-right: -160px;
        /* Spread out */
        margin-bottom: -10px;
        transform: rotate(5deg);
        z-index: 1;
    }
}

/* Desktop UI Image in UI/UX Section */
.desktop-ui-wrapper {
    width: 100%;
    max-width: 1000px;
    margin-top: 80px;
    /* Increased gap as requested */
    position: relative;
    z-index: 2;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none !important;
    /* REMOVED SHADOW FORCEFULLY */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.desktop-ui-img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .desktop-ui-wrapper {
        margin-top: 20px;
        width: 95%;
        /* Slightly smaller than full width */
        margin-left: auto;
        margin-right: auto;
        max-width: none;
        border-radius: 8px;
        /* Soft corners */
        box-shadow: none !important;
    }

}

/* =========================================
   CONTACT MODAL FORM (PREMIUM CLEAN WHITE)
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 20, 0.7);
    /* Darker overlay */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    padding: 20px;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-container {
    background: #FFFFFF;
    width: 100%;
    max-width: 440px;
    border-radius: 24px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
    padding: 0;
    position: relative;
    transform: translateY(40px) scale(0.95);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: visible;
    /* Allow dropdowns to spill out */
    display: flex;
    flex-direction: column;
}

.modal-overlay.active .modal-container {
    transform: translateY(0) scale(1);
}

/* --- REFINED CLOSE BUTTON --- */
.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #f1f5f9;
    /* Soft gray */
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 40px;
    /* Larger touch target */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 20;
    line-height: 1;
    padding-bottom: 2px;
    /* Visual correction */
}

.modal-close:hover {
    background: #ff4d4d;
    /* Modern Red for close */
    color: #FFFFFF;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 5px 15px rgba(255, 77, 77, 0.3);
}

.modal-header {
    text-align: center;
    background: #FFFFFF;
    padding: 40px 30px 10px 30px;
    position: relative;
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    /* Maintain rounded corners with overflow:visible */
}

.modal-header::after {
    display: none;
}

.modal-logo {
    height: 38px;
    width: auto;
    margin-bottom: 15px;
    filter: invert(1) brightness(0);
    display: block;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

.modal-header h3 {
    font-size: 1.75rem;
    color: #0f172a !important;
    margin-bottom: 8px;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.modal-header p {
    color: #64748b !important;
    font-size: 0.95rem;
    margin: 0;
    font-weight: 500;
}

.contact-form {
    padding: 20px 35px 40px 35px;
    background: #FFFFFF;
    flex-grow: 1;
    border-radius: 0 0 24px 24px;
    /* Maintain rounded bottom */
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
    position: relative;
    z-index: 10;
    /* Needed for z-index context */
}

/* Ensure Phone Input sits on top of Email Input for Dropdown */
.form-group:has(.iti) {
    z-index: 20;
}

.contact-form label {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.contact-form input {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    color: #0f172a;
    background: #f8fafc;
    transition: all 0.3s ease;
    height: 54px;
    /* Fixed height for consistency */
}

.contact-form input:focus {
    outline: none;
    border-color: #122151;
    /* Brand Blue */
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(18, 33, 81, 0.1);
}

/* --- REFINED PHONE INPUT --- */
.iti {
    width: 100%;
    display: block;
}

/* Fix container alignment */
.iti__flag-container {
    border-radius: 12px 0 0 12px;
}

/* Ensure Dropdown sits 'above' the input styling and inputs don't overlap flag */
.iti--separate-dial-code .iti__selected-flag {
    background-color: transparent;
    border-radius: 12px 0 0 12px;
}

.iti--separate-dial-code input {
    padding-left: 90px !important;
    /* More space for dial code */
}

/* FULL WIDTH DROPDOWN (UPWARD EXPANSION) - FORCED */
/* FULL WIDTH DROPDOWN (UPWARD EXPANSION) - FORCED */
.iti__country-list {
    /* Standard Absolute Positioning */
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    max-height: 250px;
    background: white;
    z-index: 100000 !important;
    /* Ensure on top */
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Hide the duplicate container wrapper if v19 adds one, target the list directly for direction */
.iti__container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    pointer-events: none;
    /* Let clicks pass through if empty */
}

/* Enable pointer events on the list itself */
.iti__country-list {
    pointer-events: auto;
}

/* Search Box Styling (if present in v19+) */
.iti__search-input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    margin: 5px;
    box-sizing: border-box;
}

/* Country Items */
.iti__country {
    padding: 12px 15px;
    border-bottom: 1px solid #f1f5f9;
}

.iti__country:last-child {
    border-bottom: none;
}


/* --- REFINED SUBMIT BUTTON (DARK BLUE) --- */
.btn-block {
    width: 100%;
    margin-top: 25px;
    padding: 18px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 12px;
    text-transform: none;
    letter-spacing: 0.5px;
    box-shadow: 0 10px 20px rgba(18, 33, 81, 0.2);
    /* Dark Blue Shadow */
    background: #122151;
    /* SOLID DARK BLUE */
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-block:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(18, 33, 81, 0.3);
    background: #0a1330;
    /* Even darker on hover */
}

/* Modal Footer Text */
.modal-footer-text {
    text-align: center;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 15px;
    font-weight: 500;
}

/* Success View (Enhanced - Dark Blue) */
.success-view {
    padding: 60px 40px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    border-radius: 0 0 24px 24px;
    animation: fadeIn 0.5s ease;
}

.checkmark-wrapper {
    width: 100px;
    height: 100px;
    margin-bottom: 30px;
    position: relative;
    border-radius: 50%;
    background: #eef2ff;
    /* Light Blue Bg */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 0 rgba(18, 33, 81, 0.7);
    /* Brand Blue Pulse */
    animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(18, 33, 81, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(18, 33, 81, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(18, 33, 81, 0);
    }
}

/* Animated Checkmark */
.checkmark {
    width: 60px;
    height: 60px;
    display: block;
    stroke-width: 3;
    stroke: #122151;
    /* Brand Blue Stroke */
    stroke-miterlimit: 10;
    fill: none;
    animation: scaleCheck 0.3s ease-in-out 0.5s both;
}

/* Ensure Inner Circle and Check are Dark Blue */
.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #122151 !important;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke: #122151 !important;
    /* Force Dark Blue */
    animation: stroke 0.5s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scaleCheck {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

/* Mobile Responsive (Compact & Centered) */
@media (max-width: 480px) {
    .modal-container {
        max-width: 90%;
        border-radius: 20px;
        transform: translateY(10px) scale(0.96);
        /* Less offset */
        border: 1px solid #e2e8f0;
        /* Clean border definition */
    }

    .modal-header {
        padding: 30px 20px 20px 20px;
        border-radius: 24px 24px 0 0;
        /* Maintain rounded top */
        /* Balanced Spacing */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .modal-header h3 {
        font-size: 1.4rem;
        /* Clean Bold Typography */
        text-align: center;
        margin: 0 auto 10px auto;
        /* Balanced bottom margin */
        width: 100%;
        line-height: 1.3;
        color: #0f172a;
    }

    .modal-header p {
        font-size: 0.9rem;
        text-align: center;
        margin: 0 auto;
        width: 100%;
        padding: 0 10px;
        color: #64748b;
        /* Prevent edge touching */
    }

    .modal-logo {
        height: 26px;
        margin: 0 auto 10px auto;
        display: block;
    }

    .contact-form {
        padding: 10px 18px 20px 18px;
        /* Much tighter form padding */
    }

    .form-group {
        margin-bottom: 12px;
        /* Reduce gap */
    }

    .contact-form label {
        font-size: 0.65rem;
        margin-bottom: 4px;
        font-weight: 700;
        color: #64748b;
    }

    .contact-form input {
        padding: 0 14px;
        /* Horizontal padding only */
        height: 44px;
        /* Compact Height */
        font-size: 0.9rem;
        border-radius: 10px;
        line-height: 44px;
        /* Vertically Center Text */
    }

    /* Adjust phone input padding for smaller height */
    .iti--separate-dial-code input {
        padding-left: 75px !important;
    }

    .iti__selected-flag {
        padding-left: 10px;
    }

    .btn-block {
        padding: 12px;
        height: 48px;
        /* Match Button to nice touch target */
        font-size: 0.95rem;
        margin-top: 15px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-close {
        top: 12px;
        right: 12px;
        width: 28px;
        height: 28px;
        font-size: 1rem;
        background: #f1f5f9;
        /* Ensure visibility */
    }

    .modal-footer-text {
        font-size: 0.6rem;
        margin-top: 10px;
    }
}

/* =========================================
   12. SLIDER SMOOTHNESS (SCROLL SNAP)
   ========================================= */
.features-list-container {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* iOS momentum */
}

.feature-row {
    scroll-snap-align: center;
    /* Snap to center of viewpoint */
    scroll-snap-stop: always;
    /* Force stop at each item (no flying) */
}

/* =========================================
   13. FOOTER STYLES (REDESIGNED)
   ========================================= */
.site-footer {
    background: #0f172a;
    /* Dark Navy */
    color: #cbd5e1;
    padding: 80px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 60px;
}

/* 1. Left: Brand Section */
.footer-brand {
    flex: 1;
    min-width: 280px;
    max-width: 400px;
}

.footer-logo-img {
    height: 32px;
    /* Adjusted height for cleaner look */
    width: auto;
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
    /* Ensure white logo */
    display: block;
}

.footer-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #94a3b8;
}

/* 2. Right: Links Section */
.footer-links {
    display: flex;
    gap: 80px;
    /* Space between columns */
}

.footer-column h4 {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column ul li a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.footer-column ul li a:hover {
    color: #3b82f6;
    /* Brand Blue Hover */
}

/* 3. Bottom: Copyright */
.footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
    text-align: center;
}

.footer-copyright p {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .site-footer {
        padding: 60px 0 30px;
    }

    .footer-wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .footer-brand {
        max-width: 100%;
        text-align: left;
    }

    .footer-links {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        gap: 60px;
        /* Maintain gap between columns on mobile */
    }

    .footer-column {
        flex: 0 0 auto;
    }
}

/* =========================================
   SCROLL TO TOP BUTTON
   ========================================= */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #050A18;
    /* Dark Blue */
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    /* White Border */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background: #0056D6;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 105, 254, 0.4);
}

.scroll-top-btn svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 768px) {
    .scroll-top-btn {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}

/* =========================================
   WHATSAPP BUTTON
   ========================================= */
.whatsapp-btn {
    position: fixed;
    bottom: 90px;
    /* Positioned above the scroll-top-btn (30px + 50px + 10px gap) */
    right: 30px;
    width: 60px;
    height: 60px;
    /* Background Removed */
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 900;
    /* Shadow Removed */
    box-shadow: none;

    /* Animation Initial State */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.whatsapp-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.whatsapp-btn:hover {
    transform: translateY(-5px) scale(1.1);
}

.whatsapp-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Add drop shadow to the image itself for visibility */
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

@media (max-width: 768px) {
    .whatsapp-btn {
        bottom: 80px;
        /* Adjusted for mobile */
        right: 20px;
        width: 60px;
        /* Increased from 50px */
        height: 60px;
        /* Increased from 50px */
    }
}