/* --- Navbar --- */
/* --- Navbar --- */
.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 30px;
    display: flex;
    justify-content: flex-start;
    /* Changed from space-between */
    align-items: center;
    background: rgba(5, 11, 20, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 243, 255, 0.2);
    z-index: 1000;
}

/* ... existing styles ... */

/* Removed duplicate .nav-links block */

/* ... existing styles ... */

.social-links {
    display: flex;
    gap: 15px;
    margin-left: auto;
    /* Push to far right */
}

.social-item {
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(0, 243, 255, 0.3);
    border-radius: 4px;
    background: rgba(0, 243, 255, 0.05);
    transition: all 0.3s ease;
}

.social-item svg,
.social-item img {
    /* Support both svg and img */
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: transform 0.3s ease;
    /* changed from fill for img support */
    object-fit: contain;
}

.social-item:hover {
    background: rgba(0, 243, 255, 0.2);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
    color: #00f3ff;
    border-color: #00f3ff;
    transform: translateY(-2px);
}

.social-item:hover svg {
    fill: #00f3ff;
}

.navbar-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.navbar-logo-link:hover {
    transform: scale(1.1);
}

.navbar-icon {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 0 5px rgba(0, 243, 255, 0.5));
}

.nav-links {
    display: flex;
    gap: 30px;
    margin-left: 30px;
    /* Space from logo */
}

.nav-item {
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    transition: color 0.3s ease;
}

.nav-item:hover {
    color: #00f3ff;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.8);
}

.nav-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #00f3ff;
    transition: width 0.3s ease;
}

.nav-item:hover::after {
    width: 100%;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-left: auto;
    /* Push to far right */
}

.social-item {
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(0, 243, 255, 0.3);
    border-radius: 4px;
    background: rgba(0, 243, 255, 0.05);
    transition: all 0.3s ease;
}

.social-item svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: fill 0.3s ease;
}

.social-item:hover {
    background: rgba(0, 243, 255, 0.2);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
    color: #00f3ff;
    border-color: #00f3ff;
    transform: translateY(-2px);
}

.nav-item.disabled {
    color: rgba(255, 255, 255, 0.5);
    cursor: default;
    pointer-events: none;
    /* Prevents clicking */
}

.nav-item.disabled:hover {
    color: rgba(255, 255, 255, 0.5);
    text-shadow: none;
}

.nav-item.disabled::after {
    display: none;
}

/* --- Mobile Tweaks (Navbar & Reset) --- */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    z-index: 1001;
}

.mobile-menu-btn span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: #00f3ff;
    transition: all 0.3s ease;
}

/* Transform to X when active */
.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

@media (max-width: 768px) {
    .navbar {
        padding: 15px 20px;
        justify-content: space-between;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: rgba(5, 11, 20, 0.98);
        backdrop-filter: blur(15px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.4s ease-in-out;
        z-index: 999;
        margin-left: 0;
        gap: 40px;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-item {
        font-size: 1.5rem;
    }

    .social-links {
        margin-left: 0;
        /* Center in mobile menu if desired, or keep in header */
        /* For this design, let's move social links into the menu or keep them visible? 
           Keeping them visible in header might crowd it. Let's hide them in header and show in menu, 
           OR just keep them in menu. 
           Current HTML structure has them separate. Let's adjust CSS to maybe hide them or stack them.
           Actually, let's visually verify. For now, we'll keep social links in navbar but hide text links.
        */
    }

    /* Hide social links from header on mobile, maybe add them to nav-links via JS? 
       Or just keep them small. Let's hide them for now to save space, or make them smaller.
    */
    .social-links {
        display: none;
    }

    /* We will need to append social links to the mobile menu via JS or just have a duplicates. 
       Let's stick to the plan: focus on nav links first. 
    */

    .navbar-logo-link {
        z-index: 1001;
        /* Keep logo above menu overlay */
    }
}

/* --- General Setup --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #050b14;
    color: #ffffff;
    font-family: 'Orbitron', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

/* --- Container --- */
.container {
    max-width: 700px;
    width: 100%;
    animation: fadeIn 2s ease-in-out;
}

/* --- Logo Styling --- */
.logo {
    width: 100%;
    max-width: 650px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(0, 243, 255, 0.15);
    margin-bottom: 30px;
}

/* --- Text Styling --- */
h1 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #00f3ff;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #ffffff;
    text-transform: titlecase;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
    max-width: 800px;
    line-height: 1.4;
}

p {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    color: #aebbc9;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* --- Footer --- */
.footer {
    font-size: 0.8rem;
    color: #5d6d7e;
    margin-top: 40px;
}

/* --- Animations --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* --- Mobile Tweaks (Generic) --- */
@media (max-width: 768px) {
    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    .container {
        padding: 0 15px;
    }

    .logo {
        margin-top: 60px;
        /* Space for navbar */
    }
}