body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #000000;
            color: #ffffff;
            overflow-x: hidden;
        }

        .heading-space {
            font-family: 'Space Grotesk', sans-serif;
            letter-spacing: 0.5em;
        }

        /* Fixed Star Canvas Background */
        #star-canvas {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }

        /* Subtle Cyber Grid Background */
        .bg-cyber-grid {
            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: 80px 80px;
        }

        .mono-code {
            font-family: 'JetBrains Mono', monospace;
        }

        /* Title Gradient */
        .hero-title-gradient {
            background: linear-gradient(180deg, #FFFFFF 0%, #A1A1AA 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Red Curved Underline */
        .red-underline {
            position: relative;
            display: inline-block;
            color: #ef233c;
        }
        .red-underline::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 0;
            width: 100%;
            height: 4px;
            background: #ef233c;
            border-radius: 9999px;
            box-shadow: 0 0 12px #ef233c;
        }

        /* Single Medium-Length Beam Purchase Button */
        @keyframes spin-border-light {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes spin-border-light {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .superdesign-btn-wrapper {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 1.5px;
            border-radius: 9999px;
            overflow: hidden;
            cursor: pointer;
            background: rgba(239, 35, 60, 0.2);
            box-shadow: 0 0 20px rgba(239, 35, 60, 0.25);
            transition: all 0.3s ease;
        }

        .superdesign-btn-wrapper::before {
            content: '';
            position: absolute;
            top: -250%;
            bottom: -250%;
            left: -100%;
            right: -100%;
            background: conic-gradient(
                from 0deg, 
                transparent 0%, 
                transparent 70%, 
                rgba(239, 35, 60, 0.5) 80%, 
                #ef233c 90%, 
                #ff4d6d 96%, 
                transparent 100%
            );
            filter: drop-shadow(0 0 10px rgba(239, 35, 60, 0.8));
            animation: spin-border-light 3s linear infinite;
            z-index: 0;
            pointer-events: none;
        }

        .superdesign-btn-wrapper:hover {
            box-shadow: 0 0 35px rgba(239, 35, 60, 0.55);
            transform: translateY(-1px);
        }

        .superdesign-btn-inner {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.9rem 2.5rem;
            border-radius: 9999px;
            background: rgba(6, 6, 9, 0.92);
            color: #ffffff;
            font-weight: 700;
            font-size: 0.9rem;
            backdrop-filter: blur(8px);
            transition: all 0.3s ease;
        }

        .superdesign-btn-wrapper:hover .superdesign-btn-inner {
            background: rgba(239, 35, 60, 0.18);
        }

        .superdesign-btn-wrapper iconify-icon {
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .superdesign-btn-wrapper:hover iconify-icon {
            transform: translateX(6px);
        }

        .glass-pill {
            background: rgba(10, 10, 14, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(16px);
        }
        .glass-pill:hover {
            border-color: rgba(255, 255, 255, 0.18);
        }

        /* 3D GRADIENT BLINDS CARD STYLING */
        .blinds-container {
            position: relative;
            overflow: hidden;
            border-radius: 1.5rem;
            background: #060609;
            border: 1px solid rgba(239, 35, 60, 0.3);
            box-shadow: 0 0 25px rgba(239, 35, 60, 0.15);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            min-height: 200px;
        }

        .blinds-container:hover {
            border-color: rgba(239, 35, 60, 0.8);
            box-shadow: 0 0 45px rgba(239, 35, 60, 0.35);
            transform: translateY(-2px);
        }

        .blinds-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0.95;
            transition: opacity 0.4s ease;
            pointer-events: none;
            z-index: 1;
        }

        .blinds-card-content {
            position: relative;
            z-index: 2;
            background: rgba(0, 0, 0, 0.12);
            backdrop-filter: blur(2px);
            min-height: 100%;
        }

        .card-title {
            color: #ffffff;
            transition: color 0.3s ease;
        }
        .blinds-container:hover .card-title {
            color: #ef233c;
        }

        /* DASHBOARD TOGGLES & SLIDERS */
        .toggle-switch {
            width: 32px;
            height: 16px;
            background: #27272a;
            border-radius: 999px;
            position: relative;
            transition: background 0.3s;
            cursor: pointer;
        }
        .toggle-switch::after {
            content: '';
            position: absolute;
            left: 2px;
            top: 2px;
            width: 12px;
            height: 12px;
            background: white;
            border-radius: 50%;
            transition: transform 0.3s;
        }
        input:checked + .toggle-switch {
            background: #ef233c;
        }
        input:checked + .toggle-switch::after {
            transform: translateX(16px);
        }

        .custom-slider {
            -webkit-appearance: none;
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 999px;
            outline: none;
        }
        .custom-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 8px;
            height: 16px;
            background: #ef233c;
            border-radius: 2px;
            cursor: pointer;
            box-shadow: 0 0 10px #ef233c;
        }

        .dropdown-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
            opacity: 1;
        }
        .dropdown-open .dropdown-menu {
            max-height: 200px;
            opacity: 1;
            border: 1px solid rgba(255,255,255,0.15);
            margin-top: 4px;
        }
        .chevron-rot {
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .dropdown-open .chevron-rot {
            transform: rotate(180deg);
        }

        .tab-content {
            display: none;
        }
        .tab-content.active-tab {
            display: block;
        }

        /* Modal Overlays */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(12px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            opacity: 0 !important;
            pointer-events: none !important;
            transition: opacity 0.3s ease;
        }
        .modal-overlay.active {
            opacity: 1 !important;
            pointer-events: auto !important;
        }

        /* Scroll Reveal Animations */
        .reveal-on-scroll {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: opacity, transform;
        }

        .reveal-on-scroll.is-visible {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
        .reveal-on-scroll.is-visible {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
        .reveal-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        .hidden-stage {
            display: none !important;
        }

/* Vertical Text Clip Slide-Down Letter-by-Letter Animation */
.clip-text-animate {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 1.15;
}

.clip-text-animate .letter {
    display: inline-block;
    transform: translateY(-115%);
    opacity: 0;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--char-index, 0) * 35ms);
    will-change: transform, opacity;
}

.clip-text-animate.is-animated .letter {
    transform: translateY(0);
    opacity: 1;
}