/* 
The only reason we have this file is because of the main page header.
The header is too big for mobile, so we need to hack it.

Also, becouse the original eng was vibe coding, and still is vibe coding, so we need to hack it.

unlucky?

Want to help us?

We pay!
support@tryhiding.com
*/
.content .row {
    min-height: 37.5rem;
}

.content-header {
    text-align: left;
    padding-right: 1.875rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 37.5rem;
}

.content-header h1 {
    font-size: 5rem !important;
    line-height: 1.2;
    margin-bottom: 1.25rem;
}

.header-buttons {
    margin-top: 1.875rem;
}

.header-video {
    margin-top: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: auto;
}

.header-video .video-wrapper {
    width: 100%;
}

.header-video img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    .content .row {
        min-height: auto;
    }

    .content-header {
        text-align: center;
        padding-right: 0;
        min-height: auto;
    }

    .header-video {
        margin-top: 1.875rem;
        min-height: auto;
    }

    .header-video .video-wrapper {
        width: 100%;
        margin-left: 0;
    }
}

.video-controls {
    text-align: center;
    /* margin-top: 1rem; */
    font-size: 0.875rem;
    color: #ffffff2d;
    padding-right: 0;
}

.video-switch {
    cursor: pointer;
    /* padding: 0.5rem; */
    transition: color 0.3s ease;
    color: #ffffffb0;
}

.video-switch.active {
    color: var(--highlight-color);
    font-weight: bold;
}

.video-switch:hover {
    color: var(--highlight-color);
}

.logo-scroll-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    overflow: hidden;
}

.gradient-overlay-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 100%;
    background: linear-gradient(to right, #042023 0%, transparent 100%);
    z-index: 2;
}

.gradient-overlay-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
    height: 100%;
    background: linear-gradient(to left, #042023 0%, transparent 100%);
    z-index: 2;
}

.logo-scroll-inner {
    display: flex;
    animation: scroll 20s linear infinite;
    width: max-content;
}

.logo-scroll-inner img {
    height: 40px;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.logo-scroll-inner img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .logo-scroll-container {
        max-width: 100%;
    }
}

/* Download Banner Styles */
.download-banner {
    background: #f7f7f7;
    padding: 60px 0;
}

.download-content {
    text-align: center;
}

.download-content h3 {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.download-content p {
    color: #cccccc;
    font-size: 1.2rem;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.download-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.download-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 2rem;
    background: #f7f7f7;
    color: #333;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    min-width: 200px;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}


.download-btn i, .download-btn img {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.download-btn span {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    transition: all 0.3s ease;
}

.download-btn small {
    font-size: 0.9rem;
    color: #666;
    transition: all 0.3s ease;
}

.windows-btn i {
    color: #0078d4;
}

.mac-btn i,
.mac-silicon-btn i {
    color: #080808;
}

/* Gag button styles */
.mainframe-btn {
    position: relative;
}


.mainframe-btn:hover img {
    filter: invert(1) brightness(1.2);
}


.neuralink-btn {
    position: relative;
}


.neuralink-btn:hover img {
    filter: brightness(1.2) drop-shadow(0 0 5px rgba(255,255,255,0.7));
}


/* Fun animations */
@keyframes wink {
    0%, 90%, 100% { opacity: 1; }
    95% { opacity: 0; }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Add some sparkle effect for the gag buttons */
.mainframe-btn:hover, .neuralink-btn:hover {
    overflow: visible;
}

.mainframe-btn:hover::after {
    content: "✨";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    animation: sparkle 2s ease-in-out infinite;
}

.neuralink-btn:hover::after {
    content: "⚡";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { 
        opacity: 0; 
        transform: translateX(-50%) translateY(0px);
    }
    50% { 
        opacity: 1; 
        transform: translateX(-50%) translateY(-5px);
    }
}

@media (max-width: 768px) {
    .download-content h3 {
        font-size: 2rem;
    }
    
    .download-content p {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    
    .download-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .download-btn {
        width: 100%;
        max-width: 300px;
    }
    
    /* Reduce animations on mobile for better performance */
    .download-btn:hover {
        transform: none;
    }
    
    .mainframe-btn:hover, .neuralink-btn:hover {
        transform: none;
    }
}

/* Download disclaimer styling */
.download-disclaimer {
    text-align: center;
    margin-top: 30px;
}

.download-disclaimer p {
    color: #666;
    font-size: 0.95rem;
    margin: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: inline-block;
    max-width: 600px;
    backdrop-filter: blur(10px);
}

.download-disclaimer i {
    color: #4a90e2;
    margin-right: 8px;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .download-disclaimer {
        margin-top: 20px;
    }
    
    .download-disclaimer p {
        font-size: 0.9rem;
        padding: 12px 16px;
        margin: 0 10px;
    }
}