@media screen and (min-width: 769px) {
    /* Hero section styles */
    .hero {
        position: relative;
        min-height: 100vh;
        width: 100%;
        align-items: center;
        justify-content: center;
        display: flex;
        padding-top: 84px; /* Match nav height + small gap */
        padding-inline: max(2rem, 5vw);
        margin: 0;
        overflow: hidden;
    }

    .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 9, 19, 0.7);
        z-index: -1;
    }

    /* Remove/comment out #background-video styles since we're not using video anymore */
    #background-video {
        display: none;
    }

    .hero .hero-content {
        width: min(100% - max(2rem, 5vw) * 2, 1200px);
        margin-inline: auto;
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(clamp(0.5rem, 1vw, 1rem) * 2);
        text-align: center;
        padding: 0;
    }

    .hero .hero-title {

        min-height: 80px;
        width: 100%;
        max-width: min(1000px, 90%);
        align-items: center;
        justify-content: center;
        display: flex;
        position: relative;
        margin: calc(clamp(0.5rem, 1vw, 1rem) * 3) auto calc(clamp(0.5rem, 1vw, 1rem) * 2);
        padding-top: calc(clamp(0.5rem, 1vw, 1rem) * 4);
        height: 1.2em;
        padding-inline: calc(clamp(0.5rem, 1vw, 1rem) * 2);
        overflow: visible;
        line-height: 1.2;
        opacity: 0;
        animation: fadeInUp 0.8s ease forwards;
    }

    .hero-title .typed-text {
        background: linear-gradient(
            45deg,
            #00ffff 0%,
            #ffffff 25%,
            #00ffff 45%,
            #ffffff 55%,
            #00ffff 75%,
            #ffffff 85%,
            #00ffff 100%
        );
        background-size: 300% 300%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 700;
        font-size: clamp(4.5rem, 7vw, 6.5rem);
        text-align: center;
        position: relative;
        z-index: 1;
        filter: drop-shadow(0 3px 1px rgba(0, 0, 0, 1));
    }

    .cursor {
        position: absolute;
        height: 100%;
        margin-left: 0.2em;
    }

    .hero .hero-content p {
        font-size: clamp(1.8rem, 3vw, 2.4rem);
        max-width: min(900px, 90%);
        padding: 0;
        margin: 0 0 calc(clamp(0.5rem, 1vw, 1rem) * 3) 0;
        color: #ffffff;
        letter-spacing: 0.05em;
        line-height: 1.5;
        font-weight: 900;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 0.8s ease forwards 0.5s;
       
    }

    .hero-content p::before {
        display: none;
    }

    .hero .cta-container {
        opacity: 0;
        animation: fadeInUp 0.8s ease forwards 1s;
    }


    .hero .scroll-indicator {
        position: relative;
        flex-direction: column;
        align-items: center;
        display: flex;
        gap: calc(clamp(0.5rem, 1vw, 1rem) * 2);
        cursor: pointer;
        opacity: 0;
        animation: fadeInUp 0.8s ease forwards 1.5s;
        margin-top: calc(clamp(0.5rem, 1vw, 1rem) * 4);
        margin-bottom: calc(clamp(0.5rem, 1vw, 1rem) * 3);
    }

    .scroll-indicator .mouse {
        width: 62.5px;
        height: 100px;
        border: 3px solid #fff;
        border-radius: 30px;
        position: relative;
        animation: glowBorder 2s ease-in-out infinite;
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.3),
                    inset 0 0 20px rgba(0, 255, 255, 0.3);
        background: rgba(0, 255, 255, 0.05);
    }

    .scroll-indicator .mouse::before {
        content: '';
        position: absolute;
        width: calc(clamp(0.5rem, 1vw, 1rem) * 0.9);
        height: calc(clamp(0.5rem, 1vw, 1rem) * 0.9);
        background: #fff;
        left: 50%;
        transform: translateX(-50%);
        top: calc(clamp(0.5rem, 1vw, 1rem) * 0.8);
        border-radius: 50%;
        animation: scrollDot 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
        box-shadow: 0 0 15px #00ffff,
                    0 0 30px #00ffff;
    }

    .scroll-indicator span {
        font-size: clamp(1.25rem, 2.5vw, 1.5rem);
        letter-spacing: 3px;
        color: #fff;
        text-transform: uppercase;
        animation: glowText 2s ease-in-out infinite;
        text-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
        font-weight: 500;
    }

    .hero-title .typing-text::after {
        content: "|";
        animation: blink 1s infinite step-end;
    }

    /* Animations */
    @keyframes gradientFlow {
        0% {
            background-position: 0% 0%;
        }
        100% {
            background-position: 100% 100%;
        }
    }

    @keyframes logoFlow {
        0% {
            background-position: 0% 50%;
            filter: brightness(1);
        }
        25% {
            background-position: 50% 25%;
            filter: brightness(1.2);
        }
        50% {
            background-position: 100% 50%;
            filter: brightness(1);
        }
        75% {
            background-position: 50% 75%;
            filter: brightness(1.2);
        }
        100% {
            background-position: 0% 50%;
            filter: brightness(1);
        }
    }

    @keyframes rotateColors {
        0% { color: #00ffff; }    /* Cyan */
        12.5% { color: #ff0000; } /* Bright Red */
        25% { color: #00ff00; }   /* Bright Green */
        37.5% { color: #ff00ff; } /* Magenta */
        50% { color: #ffff00; }   /* Yellow */
        62.5% { color: #ff8c00; } /* Orange */
        75% { color: #9932ff; }   /* Purple */
        87.5% { color: #00bfff; } /* Deep Sky Blue */
        100% { color: #00ffff; }  /* Back to Cyan */
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes glowBorder {
        0%, 100% {
            border-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3),
                        inset 0 0 20px rgba(0, 255, 255, 0.3);
        }
        50% {
            border-color: #fff;
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.5),
                        inset 0 0 30px rgba(0, 255, 255, 0.5);
        }
    }

    @keyframes glowText {
        0%, 100% {
            opacity: 0.8;
            text-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
        }
        50% {
            opacity: 1;
            text-shadow: 0 0 25px rgba(0, 255, 255, 0.8);
        }
    }

    @keyframes scrollDot {
        0% {
            top: calc(clamp(0.5rem, 1vw, 1rem) * 0.8);
            opacity: 1;
            box-shadow: 0 0 15px #00ffff,
                        0 0 30px #00ffff;
        }
        50% {
            top: calc(clamp(0.5rem, 1vw, 1rem) * 4.5);
            opacity: 0.5;
            box-shadow: 0 0 25px #00ffff,
                        0 0 40px #00ffff;
        }
        100% {
            top: calc(clamp(0.5rem, 1vw, 1rem) * 0.8);
            opacity: 1;
            box-shadow: 0 0 15px #00ffff,
                        0 0 30px #00ffff;
        }
    }

  
}