:root {
    --landing-font: 'Inter', sans-serif;
    --landing-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --brand-gradient: linear-gradient(90deg, #3b82f6, #93c5fd);
    --primary-btn-bg: linear-gradient(90deg, #1d4ed8 0%, #60a5fa 100%);
    --primary-btn-hover-bg: linear-gradient(90deg, #2563eb 0%, #93c5fd 100%);
    --cursor-glow-bg: radial-gradient(circle, rgba(96, 165, 250, 0.12) 0%, rgba(96, 165, 250, 0.05) 30%, rgba(96, 165, 250, 0) 70%);
}

.landing-primary-btn {
    background: var(--primary-btn-bg) !important;
}
.landing-primary-btn:hover {
    background: var(--primary-btn-hover-bg) !important;
}

.swiper { width: 100%; padding-top: 50px; padding-bottom: 50px; }
        .swiper-slide { background-position: center; background-size: cover; width: 380px; height: auto; }
        .swiper-pagination-bullet { background: #fff; }
    

        .swiper-button-next, .swiper-button-prev {
            color: #ffffff !important;
            transition: all 0.3s ease;
            width: 60px;
            height: 60px;
            z-index: 10;
        }
        .swiper-button-next::after, .swiper-button-prev::after {
            font-size: 3.5rem !important;
            font-weight: 900;
        }
        .swiper-button-next:hover, .swiper-button-prev:hover {
            transform: scale(1.2);
            color: #00d2ff !important;
        }
        /* Ensure swiper wrapper height accommodates shadows properly */
        .swiper {
            padding-top: 60px;
            padding-bottom: 60px;
        }
        /* Darken inactive slides slightly more to emphasize 3D folding screen depth */
        .swiper-slide:not(.swiper-slide-active) {
            filter: brightness(0.5);
            transition: filter 0.3s ease;
        }
        .swiper-slide.swiper-slide-active {
            filter: brightness(1);
            transition: filter 0.3s ease;
        }

        /* Inactive slides styling (Glassmorphism) */
        .swiper-slide .card {
            transition: all 0.4s ease;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            background: rgba(255, 255, 255, 0.03) !important;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
        }
        /* Inactive card hover effect */
        .swiper-slide:not(.swiper-slide-active) .card:hover {
            border: 1px solid rgba(59, 130, 246, 0.5) !important;
            box-shadow: 0 0 25px rgba(59, 130, 246, 0.25) !important;
            background: rgba(255, 255, 255, 0.05) !important;
        }
        
        /* Active (center) slide glowing styling */
        .swiper-slide-active .card {
            border: 2px solid #3b82f6 !important;
            box-shadow: 0 0 35px rgba(59, 130, 246, 0.6), inset 0 0 15px rgba(59, 130, 246, 0.2) !important;
            background: rgba(255, 255, 255, 0.08) !important;
            transform: scale(1.03);
        }
        .swiper-slide-active .card:hover {
            box-shadow: 0 0 45px rgba(59, 130, 246, 0.8), inset 0 0 20px rgba(59, 130, 246, 0.3) !important;
        }
        
        /* Customize the swiper shadows to use the background's dark navy instead of black */
        .swiper-slide-shadow-left {
            background-image: linear-gradient(to left, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0)) !important;
            border-radius: 16px;
        }
        .swiper-slide-shadow-right {
            background-image: linear-gradient(to right, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0)) !important;
            border-radius: 16px;
        }

        .swiper-slide .select-plan-btn {
            border: 2px solid rgba(59, 130, 246, 0.4) !important;
            color: rgba(96, 165, 250, 0.9) !important;
            transition: all 0.3s ease;
            background: transparent !important;
        }
        .swiper-slide .select-plan-btn:hover {
            background: rgba(59, 130, 246, 0.12) !important;
            border-color: #60a5fa !important;
            color: #60a5fa !important;
            transform: scale(1.02);
        }
        .swiper-slide-active .select-plan-btn {
            background: var(--primary-btn-bg) !important;
            color: #ffffff !important;
            border: none !important;
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4) !important;
        }
        .swiper-slide-active .select-plan-btn:hover {
            background: var(--primary-btn-hover-bg) !important; /* Brighter gradient on hover */
            transform: scale(1.04);
            box-shadow: 0 6px 22px rgba(59, 130, 246, 0.7) !important;
            color: #ffffff !important;
        }

        /* Package Title Gradients based on Plan ID */
        .plan-title-trial {
            background: linear-gradient(45deg, #9ca3af, #e5e7eb);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .plan-title-lite {
            background: linear-gradient(45deg, #3b82f6, #60a5fa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .plan-title-plus {
            background: linear-gradient(45deg, #3b82f6, #1d4ed8);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .plan-title-pro {
            background: linear-gradient(45deg, #2563eb, #60a5fa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .plan-title-premium {
            background: linear-gradient(45deg, #fbbf24, #f59e0b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        /* Fallback for other plans */
        .swiper-slide .card-title:not([class*="plan-title-"]) {
            background: linear-gradient(45deg, #00d2ff, #00f0ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Update active card background to have a rich subtle gradient */
        .swiper-slide-active .card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 210, 255, 0.04) 100%) !important;
        }

        /* Custom scrollbar to match dark navy/blue theme */
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        ::-webkit-scrollbar-track {
            background: #0f172a; /* Dark navy */
        }
        ::-webkit-scrollbar-thumb {
            background: #3b82f6; /* Electric Blue */
            border-radius: 5px;
            border: 2px solid #0f172a;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #60a5fa; /* Ice Blue */
        }
        
        /* Firefox */
        html {
            scrollbar-color: #3b82f6 #0f172a;
            scrollbar-width: thin;
        }

        /* Dark Glassmorphism Login Modal Overlay (Brightened Blue) */
        #login-container .card {
            background: linear-gradient(135deg, rgba(9, 50, 89, 0.98) 0%, rgba(7, 38, 68, 0.98) 100%) !important; /* Premium Blue Gradient */
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
            border: 1px solid rgba(96, 165, 250, 0.25) !important; /* Soft ice-blue border */
            color: #ffffff !important;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
        }
        
        #login-container .card-header {
            background: transparent !important;
            border-bottom: none !important;
        }
        
        #login-container h4, 
        #login-container label {
            color: #ffffff !important;
        }
        
        #login-container .text-muted,
        #login-container p {
            color: rgba(255, 255, 255, 0.6) !important;
        }
        
        /* Dark themed form inputs (Slightly lighter blue) */
        #login-container .form-control {
            background: rgba(255, 255, 255, 0.07) !important;
            border: 1px solid rgba(96, 165, 250, 0.2) !important;
            color: #ffffff !important;
        }
        
        #login-container .form-control:focus {
            background: rgba(255, 255, 255, 0.1) !important;
            border-color: #60a5fa !important;
            box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25) !important;
            color: #ffffff !important;
        }
        
        /* Dropdown select styling */
        #login-container .form-select {
            background-color: #082c4e !important;
            border: 1px solid rgba(96, 165, 250, 0.2) !important;
            color: #ffffff !important;
        }
        
        #login-container .form-select option {
            background-color: #082c4e !important;
            color: #ffffff !important;
        }
        
        /* Floating labels compat */
        #login-container .form-floating > label {
            color: rgba(255, 255, 255, 0.6) !important;
        }
        #login-container .form-floating > .form-control:focus ~ label,
        #login-container .form-floating > .form-control:not(:placeholder-shown) ~ label {
            color: #60a5fa !important;
        }
        
        /* Submit button matching Sapphire theme */
        #btnSubmit {
            background: var(--primary-btn-bg) !important;
            border: none !important;
            color: #ffffff !important;
            transition: all 0.3s ease;
        }
        #btnSubmit:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4) !important;
            background: var(--primary-btn-hover-bg) !important;
            color: #ffffff !important;
        }
        
        /* Toggle mode link */
        #btnToggleMode {
            color: #60a5fa !important;
            transition: color 0.2s ease;
        }
        #btnToggleMode:hover {
            color: #93c5fd !important;
            text-decoration: underline !important;
        }

        /* Close button override to white */
        #login-container .btn-close {
            filter: invert(1) grayscale(100%) brightness(200%) !important;
        }

        /* Darker overlay backdrop for login container */
        #login-container {
            background: rgba(15, 23, 42, 0.6) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
        }

        /* Prevent browser autofill from turning inputs white */
        #login-container input:-webkit-autofill,
        #login-container input:-webkit-autofill:hover, 
        #login-container input:-webkit-autofill:focus, 
        #login-container input:-webkit-autofill:active {
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: #ffffff !important;
            transition: background-color 5000s ease-in-out 0s;
            box-shadow: inset 0 0 0px 1000px #082c4e !important;
        }

        /* Fix Bootstrap floating labels showing white background blocks on dark theme */
        #login-container .form-floating > label::after {
            background-color: transparent !important;
        }
        #login-container .form-floating > .form-control:focus ~ label::after,
        #login-container .form-floating > .form-control:not(:placeholder-shown) ~ label::after {
            background-color: #082c4e !important; /* Matches brightened blue */
            border-radius: 4px;
        }

        /* Interactive Mouse Cursor Glow Spotlight */
        #cursor-glow {
            position: fixed;
            width: 450px;
            height: 450px;
            background: var(--cursor-glow-bg);
            border-radius: 50%;
            pointer-events: none; /* Crucial: click-through */
            transform: translate(-50%, -50%);
            z-index: 1; /* Behind text and cards, in front of background */
            mix-blend-mode: screen;
            opacity: 0;
            transition: opacity 0.5s ease;
            will-change: left, top;
        }
        
        /* Ensure main content containers sit above the glow and snow canvas */
        #landing-container .text-center,
        #landing-container .container {
            position: relative;
            z-index: 2;
        }
        #snowCanvas {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            z-index: 0 !important;
            pointer-events: none !important;
        }
        #cursor-glow {
            z-index: 1 !important;
        }
/* Add backdrop for manually shown modals */
.modal.show { background-color: rgba(0, 0, 0, 0.65); backdrop-filter: blur(2px); }