:root {
            --color-canvas: #05060f;
            --color-surface-card: rgba(186, 214, 247, 0.035);
            --color-surface-modal: rgba(5, 6, 15, 0.96);
            --color-text-headline: #ffffff;
            --color-text-body: #d1e4fa;
            --color-text-muted: #c7d3ea;
            --color-text-subtle: #9da7ba;
            --color-glass-edge: rgba(186, 215, 247, 0.12);
            --color-gridline: rgba(186, 215, 247, 0.06);
            --color-header-bg: rgba(5, 6, 15, 0.85);
            --color-input-bg: rgba(186, 215, 247, 0.05);
            --color-input-text: #ffffff;
            --color-loading-bg: rgba(5, 6, 15, 0.95);
            --spotlight-opacity: 0.7;
            --card-shadow: inset 0 1px 1px rgba(199, 211, 234, 0.12), inset 0 24px 48px rgba(199, 211, 234, 0.04), 0 25px 35px rgba(6, 6, 14, 0.75), inset 0 0 0 1px rgba(186, 215, 247, 0.08);
            --modal-shadow: inset 0 1px 1px rgba(216, 236, 248, 0.2), inset 0 24px 48px rgba(168, 216, 245, 0.06), 0 16px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(186, 215, 247, 0.15);
            --skywash-gradient: linear-gradient(180deg, #ffffff 0%, #00b4d8 100%);
        }

        html.light-mode {
            --color-canvas: #f8fafc;
            --color-surface-card: rgba(255, 255, 255, 0.92);
            --color-surface-modal: rgba(255, 255, 255, 0.98);
            --color-text-headline: #0b1120;
            --color-text-body: #1e293b;
            --color-text-muted: #334155;
            --color-text-subtle: #64748b;
            --color-glass-edge: rgba(0, 180, 216, 0.25);
            --color-gridline: rgba(0, 180, 216, 0.09);
            --color-header-bg: rgba(248, 250, 252, 0.92);
            --color-input-bg: rgba(241, 245, 249, 0.9);
            --color-input-text: #0f172a;
            --color-loading-bg: rgba(248, 250, 252, 0.98);
            --spotlight-opacity: 0.35;
            --card-shadow: 0 20px 35px -5px rgba(0, 180, 216, 0.14), 0 10px 18px -6px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(0, 180, 216, 0.22);
            --modal-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.2), 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(0, 180, 216, 0.25);
            --skywash-gradient: linear-gradient(180deg, #0284c7 0%, #0f172a 100%);
        }

        * {
            box-sizing: border-box;
            transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
        }

        body {
            background-color: var(--color-canvas);
            color: var(--color-text-body);
            font-family: 'Inter', 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        .blueprint-grid {
            background-size: 80px 80px;
            background-image:
                linear-gradient(to right, var(--color-gridline) 1px, transparent 1px),
                linear-gradient(to bottom, var(--color-gridline) 1px, transparent 1px);
            mask-image: radial-gradient(ellipse 75% 65% at 50% 15%, black 25%, transparent 95%);
            -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 15%, black 25%, transparent 95%);
        }

        .spotlight-halo {
            background: conic-gradient(from 180deg at 50% 0%,
                    transparent 35%,
                    rgba(0, 180, 216, 0.25) 47%,
                    rgba(186, 215, 247, 0.5) 50%,
                    rgba(0, 180, 216, 0.25) 53%,
                    transparent 65%);
            filter: blur(52px);
            opacity: var(--spotlight-opacity);
        }

        .text-skywash {
            background: var(--skywash-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .eyebrow-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, var(--color-glass-edge) 50%, transparent 100%);
        }

        .btn-ghost-pill {
            border-radius: 999px;
            background-color: rgba(0, 180, 216, 0.08);
            box-shadow: inset 0 0 0 1px var(--color-glass-edge);
            color: var(--color-text-body);
            font-weight: 600;
        }

        .btn-ghost-pill:hover {
            background-color: rgba(0, 180, 216, 0.18);
            box-shadow: inset 0 0 0 1px rgba(0, 180, 216, 0.45);
            color: var(--color-text-headline);
        }

        .btn-cta-submit {
            background-color: #00b4d8;
            color: #ffffff;
            font-weight: 600;
            box-shadow: 0 4px 14px rgba(0, 180, 216, 0.35);
        }

        .btn-cta-submit:hover {
            filter: brightness(1.08);
            transform: translateY(-1px);
        }

        .theme-card {
            background-color: var(--color-surface-card);
            box-shadow: var(--card-shadow);
            border: 1px solid var(--color-glass-edge);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        .theme-modal {
            background-color: var(--color-surface-modal);
            box-shadow: var(--modal-shadow);
            border: 1px solid var(--color-glass-edge);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        .nav-link {
            position: relative;
            font-size: 14px;
            font-weight: 600;
            color: var(--color-text-body);
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 999px;
        }

        .nav-link:hover {
            color: #ffffff;
            background-color: rgba(0, 180, 216, 0.12);
        }

        .custom-input {
            background-color: var(--color-input-bg);
            color: var(--color-input-text);
            border: 1px solid var(--color-glass-edge);
        }

        .custom-input::placeholder {
            color: var(--color-text-subtle);
            opacity: 0.8;
        }

        .custom-input:focus {
            border-color: #00b4d8;
            outline: none;
            box-shadow: 0 0 0 2px rgba(0, 180, 216, 0.2);
        }

        .slider-arrow-btn {
            width: 40px;
            height: 40px;
            border-radius: 999px;
            background-color: var(--color-surface-card);
            border: 1px solid var(--color-glass-edge);
            backdrop-filter: blur(12px);
            color: var(--color-text-body);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--card-shadow);
            cursor: pointer;
            transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }

        @media (min-width: 640px) {
            .slider-arrow-btn {
                width: 48px;
                height: 48px;
            }
        }

        .slider-arrow-btn:hover {
            background-color: rgba(0, 180, 216, 0.2);
            border-color: rgba(0, 180, 216, 0.5);
            color: #00b4d8;
            transform: translateY(-50%) scale(1.15) !important;
        }

        .plan-period-btn {
            padding: 8px 24px;
            font-size: 14px;
            font-weight: 600;
            border-radius: 999px;
            transition: all 0.25s ease;
            cursor: pointer;
        }

        .plan-period-btn.active {
            background-color: #00b4d8;
            color: #05060f;
            box-shadow: 0 2px 10px rgba(0, 180, 216, 0.35);
        }

        .plan-period-btn:not(.active) {
            color: var(--color-text-muted);
            background-color: transparent;
        }

        .plan-period-btn:not(.active):hover {
            color: var(--color-text-headline);
        }

        @keyframes subtle-pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.90; transform: scale(1.006); }
        }
        .flash-sale-pulse {
            animation: subtle-pulse 3s ease-in-out infinite;
        }

        @keyframes marquee-rtl {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .marquee-track {
            display: flex;
            width: max-content;
            animation: marquee-rtl 80s linear infinite;
        }
        .marquee-track:hover {
            animation-play-state: paused;
        }

        .testimonial-card-item {
            width: 340px;
            flex-shrink: 0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .testimonial-card-item:hover {
            transform: scale(1.15);
            z-index: 30;
            box-shadow: 0 30px 50px rgba(0, 180, 216, 0.25);
        }

        @keyframes logo-float {
            0%, 100% { transform: translateY(0px) scale(1); }
            50% { transform: translateY(-8px) scale(1.05); }
        }
        @keyframes orbit-rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .animate-logo-float {
            animation: logo-float 2.5s ease-in-out infinite;
        }
        .animate-orbit {
            animation: orbit-rotate 6s linear infinite;
        }

        .loading-screen-bg {
            background-color: var(--color-loading-bg);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
        }