/*
Theme Name: Sun Trader
Theme URI: https://www.suntrader.co/
Author: Sun Trader
Description: Single-page theme for Sun Trader - a direct conversion of the original static site. Section copy is editable via Advanced Custom Fields (free), and the three repeating lists (Core Features, Key Features, FAQs) are custom post types. Every field falls back to the original copy, so the theme renders correctly before anything is configured.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: suntrader
Tags: one-column, custom-colors, custom-logo, featured-images, translation-ready
*/

/* 
   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;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
}

.nav-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    text-decoration: none;
    transition: transform 0.25s ease;
}

.nav-whatsapp:hover {
    transform: translateY(-2px) scale(1.08);
}

.nav-whatsapp-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.2));
}

.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 */
}

.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 */
    }
}

/* =========================================================
   Thank You page (page-thank-you.php)
   Reuses the global .checkmark, .btn and .container styles.
   ========================================================= */

.thankyou-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 160px 0 100px;
    background: var(--color-bg-section);
}

.thankyou-card {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: 60px 40px;
    box-shadow: 0 10px 40px rgba(18, 33, 81, 0.08);
}

.thankyou-title {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 16px;
}

.thankyou-text {
    color: var(--color-text-secondary);
    font-size: 1.05rem;
    max-width: 460px;
    margin: 0 auto 12px;
}

.thankyou-subtext {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-bottom: 36px;
}

.thankyou-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 24px;
}

/* The floating WhatsApp button is revealed past the hero fold by script.js;
   there is no hero on this page, so keep it visible. */
.page-template-page-thank-you .whatsapp-btn {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 600px) {
    .thankyou-section {
        padding: 120px 0 80px;
    }

    .thankyou-card {
        padding: 44px 24px;
    }

    .thankyou-actions {
        flex-direction: column;
        width: 100%;
    }

    .thankyou-actions .btn {
        width: 100%;
    }
}