/* Hero Background - Full Width & Height with Cogwheel Animation */
.hero-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: linear-gradient(135deg, #0088cc 0%, #34d399 100%);
}

.hero-background .network-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    z-index: 0;
    background-image: 
        radial-gradient(circle at 25px 25px, rgba(255, 255, 255, 0.2) 2px, transparent 0),
        radial-gradient(circle at 75px 75px, rgba(255, 255, 255, 0.2) 2px, transparent 0);
    background-size: 100px 100px;
}

/* Ensure content appears above the background */
.content-wrapper {
    position: relative;
    z-index: 1;
    min-height: 100vh; /* Ensures content area is at least full height */
}

/* Adjustments to the gear animation for full screen */
.hero-background .container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hero-background .machine {
    width: 180%;
    height: auto;
    fill: rgb(255, 255, 255);
    filter: blur(5px);
    opacity: 0.2;
    transform: scaleX(-1);
}