:root {
        --shadow-color: rgba(0, 0, 0, 0.8);
        --primary-color: #3f51b5;
        --secondary-color: #ff5722;
        --light-bg: #ffffff;
        --dark-bg: #121212;
        --light-text: #333333;
        --dark-text: #f5f5f5;
    }
    
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        body:not(.light-mode) {
            --bg-color: var(--dark-bg);
            --text-color: var(--dark-text);
        }
        
        body:not(.light-mode) .bg-light {
            background-color: #1e1e1e !important;
        }
        
        body:not(.light-mode) .bg-white,
        body:not(.light-mode) .step-item,
        body:not(.light-mode) .testimonial-card,
        body:not(.light-mode) .pricing-card,
        body:not(.light-mode) .feature-box {
            background-color: #2d2d2d !important;
            color: var(--dark-text) !important;
        }
        
        body:not(.light-mode) .text-dark,
        body:not(.light-mode) .text-body {
            color: var(--dark-text) !important;
        }
        
        body:not(.light-mode) .border {
            border-color: #444 !important;
        }
        
        body:not(.light-mode) .accordion-button {
            background-color: #2d2d2d;
            color: var(--dark-text);
        }
        
        body:not(.light-mode) .accordion-body {
            background-color: #333;
            color: var(--dark-text);
        }
    }
    
   :root {
            --shadow-color: rgba(0, 0, 0, 0.8);
            --primary-color: #3f51b5;
            --secondary-color: #ff5722;
            --light-bg: #ffffff;
            --dark-bg: #121212;
            --light-text: #333333;
            --dark-text: #f5f5f5;
        }
        
        /* Dark mode support */
        @media (prefers-color-scheme: dark) {
            body:not(.light-mode) {
                --bg-color: var(--dark-bg);
                --text-color: var(--dark-text);
            }
            
            body:not(.light-mode) .hero {
                background: linear-gradient(135deg, #0d47a1 0%, #ad1457 100%) !important;
            }
            
            body:not(.light-mode) .hero-star {
                background: rgba(255, 255, 255, 0.6) !important;
            }
        }
        
        .hero {
            background: linear-gradient(135deg, #64b5f6 0%, #f48fb1 100%);
            color: #333;
            padding: 4rem 0;
            border-radius: 0;
            position: relative;
            overflow: hidden;
            min-height: 500px;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="18" y="18" width="4" height="4" fill="%23ffffff" opacity="0.3"/><rect x="78" y="38" width="3" height="3" fill="%23ffffff" opacity="0.4"/><rect x="38" y="78" width="2" height="2" fill="%23ffffff" opacity="0.3"/><rect x="68" y="8" width="3" height="3" fill="%23ffffff" opacity="0.5"/></svg>') repeat;
            opacity: 0.2;
            animation: float 20s ease-in-out infinite;
            z-index: 1;
        }
        
        .hero .container {
            position: relative;
            z-index: 3;
        }
        
        /* Animated star blocks */
        .hero-star {
            position: absolute;
            background: rgba(255, 255, 255, 0.4);
            border-radius: 0;
            animation: starTwinkle 3s ease-in-out infinite;
            z-index: 2;
        }
        
        .hero-star:nth-child(1) {
            top: 20%;
            left: 10%;
            width: 8px;
            height: 8px;
            animation-delay: 0s;
            animation-duration: 4s;
        }
        
        .hero-star:nth-child(2) {
            top: 60%;
            left: 80%;
            width: 6px;
            height: 6px;
            animation-delay: 1s;
            animation-duration: 3.5s;
        }
        
        .hero-star:nth-child(3) {
            top: 30%;
            left: 70%;
            width: 4px;
            height: 4px;
            animation-delay: 2s;
            animation-duration: 5s;
        }
        
        .hero-star:nth-child(4) {
            top: 80%;
            left: 20%;
            width: 5px;
            height: 5px;
            animation-delay: 0.5s;
            animation-duration: 3s;
        }
        
        .hero-star:nth-child(5) {
            top: 10%;
            left: 50%;
            width: 7px;
            height: 7px;
            animation-delay: 1.5s;
            animation-duration: 4.5s;
        }
        
        .hero-star:nth-child(6) {
            top: 70%;
            left: 60%;
            width: 3px;
            height: 3px;
            animation-delay: 2.5s;
            animation-duration: 3.8s;
        }
        
        .hero-star:nth-child(7) {
            top: 40%;
            left: 15%;
            width: 6px;
            height: 6px;
            animation-delay: 0.8s;
            animation-duration: 4.2s;
        }
        
        .hero-star:nth-child(8) {
            top: 15%;
            left: 85%;
            width: 4px;
            height: 4px;
            animation-delay: 1.8s;
            animation-duration: 3.3s;
        }
        
        @keyframes starTwinkle {
            0%, 100% {
                opacity: 0;
                transform: scale(0.5) rotate(0deg);
            }
            50% {
                opacity: 1;
                transform: scale(1) rotate(180deg);
            }
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0px) translateX(0px);
            }
            25% {
                transform: translateY(-10px) translateX(5px);
            }
            50% {
                transform: translateY(-5px) translateX(-3px);
            }
            75% {
                transform: translateY(-15px) translateX(8px);
            }
        }
        
        .hero-badge {
            transition: all 0.3s ease;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }
        
        .hero-badge:hover {
            transform: translateY(-5px);
            border-color: rgba(255, 255, 255, 0.6);
        }
        
        .floating-image {
            transform-style: preserve-3d;
            animation: float 6s ease-in-out infinite;
        }
        
        .btn-light {
            background-color: rgba(255, 255, 255, 0.9);
            border-color: rgba(255, 255, 255, 0.9);
            color: #333;
            transition: all 0.3s ease;
        }
        
        .btn-light:hover {
            background-color: #fff;
            border-color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .btn-outline-light {
            border-color: rgba(255, 255, 255, 0.7);
            color: #333;
        }
        
        .btn-outline-light:hover {
            background-color: rgba(255, 255, 255, 0.9);
            border-color: rgba(255, 255, 255, 0.9);
            color: #333;
            transform: translateY(-2px);
        }
        
        /* Dark mode adjustments for text */
        @media (prefers-color-scheme: dark) {
            body:not(.light-mode) .hero {
                color: var(--dark-text);
            }
            
            body:not(.light-mode) .hero .btn-light {
                background-color: rgba(255, 255, 255, 0.1);
                border-color: rgba(255, 255, 255, 0.3);
                color: var(--dark-text);
            }
            
            body:not(.light-mode) .hero .btn-light:hover {
                background-color: rgba(255, 255, 255, 0.2);
                border-color: rgba(255, 255, 255, 0.5);
                color: var(--dark-text);
            }
            
            body:not(.light-mode) .hero .btn-outline-light {
                border-color: rgba(255, 255, 255, 0.5);
                color: var(--dark-text);
            }
            
            body:not(.light-mode) .hero .btn-outline-light:hover {
                background-color: rgba(255, 255, 255, 0.1);
                border-color: rgba(255, 255, 255, 0.7);
                color: var(--dark-text);
            }
        }
        
        .hero-badge {
            transition: all 0.3s ease;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }
        
        .hero-badge:hover {
            transform: translateY(-5px);
            border-color: rgba(255, 255, 255, 0.6);
        }
        
        .floating-image {
            transform-style: preserve-3d;
            animation: float 6s ease-in-out infinite;
        }
        
        .btn-light {
            background-color: rgba(255, 255, 255, 0.9);
            border-color: rgba(255, 255, 255, 0.9);
            color: #333;
            transition: all 0.3s ease;
        }
        
        .btn-light:hover {
            background-color: #fff;
            border-color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .btn-outline-light {
            border-color: rgba(255, 255, 255, 0.7);
            color: #333;
        }
        
        .btn-outline-light:hover {
            background-color: rgba(255, 255, 255, 0.9);
            border-color: rgba(255, 255, 255, 0.9);
            color: #333;
            transform: translateY(-2px);
        }
        
        /* Dark mode adjustments for text */
        @media (prefers-color-scheme: dark) {
            body:not(.light-mode) .hero {
                color: var(--dark-text);
            }
            
            body:not(.light-mode) .hero .btn-light {
                background-color: rgba(255, 255, 255, 0.1);
                border-color: rgba(255, 255, 255, 0.3);
                color: var(--dark-text);
            }
            
            body:not(.light-mode) .hero .btn-light:hover {
                background-color: rgba(255, 255, 255, 0.2);
                border-color: rgba(255, 255, 255, 0.5);
                color: var(--dark-text);
            }
            
            body:not(.light-mode) .hero .btn-outline-light {
                border-color: rgba(255, 255, 255, 0.5);
                color: var(--dark-text);
            }
            
            body:not(.light-mode) .hero .btn-outline-light:hover {
                background-color: rgba(255, 255, 255, 0.1);
                border-color: rgba(255, 255, 255, 0.7);
                color: var(--dark-text);
            }
        }
    
    .feature-box {
        border-radius: 12px;
        overflow: hidden;
        transition: all 0.3s ease;
        border: 2px solid #000000;
        box-shadow: 12px 12px 0 var(--shadow-color);
    }
    
    .feature-box:hover {
        transform: translate(4px, 4px);
        box-shadow: 8px 8px 0 var(--shadow-color);
    }
    
    .subdomain-checker {
        background-color: #00796b;
    }
    
    .email-checker {
        background-color: #1565c0;
    }
    
    .btn-primary {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        transition: all 0.3s ease;
    }
    
    .btn-primary:hover {
        background-color: #303f9f;
        border-color: #303f9f;
        transform: translateY(-2px);
        box-shadow: 6px 6px 0 var(--shadow-color);
    }
    
    .section-title {
        position: relative;
        padding-bottom: 15px;
        margin-bottom: 30px;
    }
    
    .section-title:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 70px;
        height: 3px;
        background-color: var(--primary-color);
    }
    
    .steps-container {
        position: relative;
    }
    
    .steps-container:before {
        content: '';
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: calc(100% - 40px);
        background-color: #e0e0e0;
        z-index: 0;
    }
    
    .step-item {
        position: relative;
        z-index: 1;
        padding: 20px;
        background-color: white;
        border-radius: 10px;
        border: 2px solid #000000;
        box-shadow: 8px 8px 0 var(--shadow-color);
        margin-bottom: 30px;
    }
    
    .step-number {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: var(--primary-color);
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
        font-weight: bold;
        margin-right: 15px;
    }
    
    .testimonial-card {
        padding: 25px;
        border-radius: 10px;
        border: 2px solid #000000;
        box-shadow: 8px 8px 0 var(--shadow-color);
        margin: 15px 0;
        background-color: white;
        transition: all 0.3s ease;
    }
    
    .testimonial-card:hover {
        transform: translate(4px, 4px);
        box-shadow: 4px 4px 0 var(--shadow-color);
    }
    
    .testimonial-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 15px;
    }
    
    .pricing-card {
        border-radius: 12px;
        overflow: hidden;
        transition: all 0.3s ease;
        border: 2px solid #000000;
        box-shadow: 12px 12px 0 var(--shadow-color);
        background-color: white;
        margin: 20px 0;
    }
    
    .pricing-card:hover {
        transform: translate(4px, 4px);
        box-shadow: 8px 8px 0 var(--shadow-color);
    }
    
    .pricing-card-header {
        background-color: var(--primary-color);
        color: white;
        padding: 20px;
        text-align: center;
    }
    
    .pricing-card-price {
        font-size: 3rem;
        font-weight: bold;
    }
    
    .pricing-card-body {
        padding: 30px;
    }
    
    .bg-gradient-primary {
        background: linear-gradient(135deg, #3f51b5 0%, #5c6bc0 100%);
        color: white;
    }
    
    .floating-image {
        transform-style: preserve-3d;
        animation: float 6s ease-in-out infinite;
    }
    
    @keyframes float {
        0% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-20px);
        }
        100% {
            transform: translateY(0px);
        }
    }
    
    .url-checker {
    background-color: #9c27b0;
}

/* Optional: Add hover effects for all checkers */
.subdomain-checker:hover,
.email-checker:hover,
.url-checker:hover {
    transform: translate(4px, 4px);
    box-shadow: 8px 8px 0 var(--shadow-color);
}

    .centered-box {
        border-radius: 12px;
        padding: 30px;
        border: 2px solid #000000;
        box-shadow: 12px 12px 0 var(--shadow-color);
        height: 100%;
        transition: all 0.3s ease;
    }
    
    .centered-box:hover {
        transform: translate(4px, 4px);
        box-shadow: 8px 8px 0 var(--shadow-color);
    }

      .image-container {
            position: relative;
            display: inline-block;
            image-rendering: pixelated;
            image-rendering: -moz-crisp-edges;
            image-rendering: crisp-edges;
        }

        .original-image {
            display: block;
            max-width: 100%;
            height: auto;
        }

        /* QR Code scanning lines - positioned exactly over your QR code */



        /* Laser beams from person to phone */
        .laser-beam {
            position: absolute;
            height: 1px;
            background: linear-gradient(90deg, #ff4444, rgba(255, 68, 68, 0.5), transparent);
            box-shadow: 0 0 3px #ff4444;
            opacity: 0;
            animation: laserScan 4s ease-in-out infinite;
            z-index: 2;
            transform-origin: left center;
        }

        /* Position laser from person's hand to QR code - moved down */
        .laser-beam:nth-child(6) {
            top: 50%;
            right: 31%;
            width: 35%;
            animation-delay: 0s;
        }

        .laser-beam:nth-child(7) {
            top: 51%;
            right: 31%;
            width: 35%;
            animation-delay: 0.1s;
        }

        .laser-beam:nth-child(8) {
            top: 52%;
            right: 31%;
            width: 35%;
            animation-delay: 0.2s;
        }

        /* Success indicator */
        .scan-success {
            position: absolute;
            top: 88%;
            left: 50%;
            transform: translateX(-50%);
            color: #00ff00;
            font-size: clamp(10px, 2.5vw, 16px);
            font-weight: bold;
            opacity: 0;
            animation: successShow 5s ease-in-out infinite;
            animation-delay: 3s;
            font-family: 'Courier New', monospace;
            z-index: 3;
            text-shadow: 0 0 6px #00ff00;
            white-space: nowrap;
        }

        @keyframes scanVertical {
            0%, 100% {
                opacity: 0;
                transform: translateY(-10px);
            }
            20%, 80% {
                opacity: 1;
            }
            50% {
                transform: translateY(20px);
            }
        }

        @keyframes laserScan {
            0%, 100% {
                opacity: 0;
                transform: scaleX(0);
            }
            30%, 70% {
                opacity: 0.9;
                transform: scaleX(1);
            }
        }

        @keyframes successShow {
            0%, 65%, 100% {
                opacity: 0;
                transform: translateX(-50%) scale(1);
            }
            70%, 98% {
                opacity: 1;
                transform: translateX(-50%) scale(1.1);
            }
        }