.isometric-bg {
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    /* Primary approach - more visible */
    background-image: 
        linear-gradient(30deg, rgba(0, 0, 0, 0.08) 12%, transparent 12.5%, transparent 87%, rgba(0, 0, 0, 0.08) 87.5%, rgba(0, 0, 0, 0.08)),
        linear-gradient(150deg, rgba(0, 0, 0, 0.08) 12%, transparent 12.5%, transparent 87%, rgba(0, 0, 0, 0.08) 87.5%, rgba(0, 0, 0, 0.08)),
        linear-gradient(30deg, rgba(0, 0, 0, 0.06) 12%, transparent 12.5%, transparent 87%, rgba(0, 0, 0, 0.06) 87.5%, rgba(0, 0, 0, 0.06)),
        linear-gradient(150deg, rgba(0, 0, 0, 0.06) 12%, transparent 12.5%, transparent 87%, rgba(0, 0, 0, 0.06) 87.5%, rgba(0, 0, 0, 0.06)),
        linear-gradient(60deg, rgba(0, 0, 0, 0.04) 25%, transparent 25.5%, transparent 75%, rgba(0, 0, 0, 0.04) 75%, rgba(0, 0, 0, 0.04)),
        linear-gradient(60deg, rgba(0, 0, 0, 0.04) 25%, transparent 25.5%, transparent 75%, rgba(0, 0, 0, 0.04) 75%, rgba(0, 0, 0, 0.04));
    background-size: 80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}
.isometric-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/* 3D Geometric Shapes */
.geometric-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    animation: subtleFloat 20s ease-in-out infinite;
}

.shape-3d {
    position: absolute;
    opacity: 0.08;
}

.cube-1 {
    top: 15%;
    right: 20%;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #333, #111);
    transform: rotateX(15deg) rotateY(25deg);
    animation: rotate3d 25s linear infinite;
}

.cube-1::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #333, #111);
    transform: translateZ(0);
}

.cube-1::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #555, #222);
    transform: rotateY(90deg) translateZ(60px);
    transform-origin: right;
}

.cube-2 {
    bottom: 25%;
    left: 15%;
    width: 80px;
    height: 80px;
    background: linear-gradient(45deg, #222, #111);
    transform: rotateX(20deg) rotateY(-30deg);
    animation: rotate3d 25s linear infinite;
}

.pyramid-1 {
    top: 30%;
    left: 70%;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 80px solid rgba(0, 0, 0, 0.05);
    transform: rotateX(15deg) rotateY(45deg);
    animation: rotate3d 25s linear infinite;
}

.pyramid-2 {
    bottom: 40%;
    right: 30%;
    width: 0;
    height: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 60px solid rgba(0, 0, 0, 0.03);
    transform: rotateX(-10deg) rotateY(-25deg);
    animation: rotate3d 25s linear infinite;
}

/* Main Content Container */
.main-container {
    position: relative;
    z-index: 10;
    height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3%;
}

.content-wrapper {
    text-align: center;
    max-width: 800px;
    width: 100%;
}

.brand-name {
    font-size: 4rem;
    font-weight: 300;
    color: white;
    margin-bottom: 3rem;
    letter-spacing: -0.02em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.construction-message {
    font-size: 1.5rem;
    color: rgba(0, 0, 0, 0.787);
    font-weight: 500;
    line-height: 1.4;
}

/* Animations */
@keyframes subtleFloat {
    0%, 100% { 
        transform: translateY(0px); 
    }
    50% { 
        transform: translateY(-10px); 
    }
}

@keyframes rotate3d {
    0% { 
        transform: rotateX(15deg) rotateY(25deg) rotateZ(0deg); 
    }
    100% { 
        transform: rotateX(15deg) rotateY(25deg) rotateZ(360deg); 
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .brand-name {
        font-size: 3rem;
    }

    .construction-message {
        font-size: 1.2rem;
        padding: 0 1rem;
    }

    .shape-3d {
        display: none;
    }
}

@media (max-width: 480px) {
    .brand-name {
        font-size: 2.5rem;
    }

    .construction-message {
        font-size: 1.1rem;
    }
}