 :root {
            --moss: #2a3326;
            --dust: #d1ccbd;
            --dark: #0d0d0d;
            --rust: #8b4513;
        }

        body {
            background-color: var(--dark);
            color: var(--dust);
            font-family: 'Roboto', sans-serif;
            margin: 0;
            line-height: 1.6;
        }

        .logo {
            font-family: 'Cinzel', serif;
            font-size: 3.5rem;
            letter-spacing: 12px;
            color: #fff;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        header {
           height: 100vh;
           position: relative;
           overflow: hidden;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           text-align: center;
        }

        header::before {
           content: "";
           position: absolute;
           top: 0; left: 0; right: 0; bottom: 0;
           background: linear-gradient(to top, var(--dark), transparent),
                        url('../images/T_Temp_Bg.jpg');
           background-size: cover;
           background-position: center;
           filter: blur(18px) brightness(0.7); 
           transform: scale(1.1); 
           z-index: 0;
           -webkit-mask-image: linear-gradient(to top, transparent 5%, black 40%);
           mask-image: linear-gradient(to top, transparent 5%, black 40%);
           animation: flicker-2 1.5s infinite alternate;
        }

        @keyframes flicker {
            0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
            20%, 24%, 55% { opacity: 0.4; }
        }

        @keyframes flicker-2 {
           0%, 100% { opacity: 0.75; }
           25% { opacity:0.2; }
           35% { opacity: 0.7; }
           50% { opacity: 0.5; }
           60% { opacity: 0.65; }
           75% { opacity: 0.3; }
        }

        .particles {
          position: absolute;
          top: 0; left: 0; width: 100%; height: 100%;
          background:url("https://transparenttextures.com/patterns/green-dust-and-scratches.png"); /* Subtle dust texture */
          pointer-events: none;
          animation: drift 30s linear infinite;
          opacity: 0.3;
          z-order:1;
          -webkit-mask-image: linear-gradient(to top, transparent 5%, black 40%);
          mask-image: linear-gradient(to top, transparent 5%, black 40%);
        }
        .particles-2 {
          position: absolute;
          top: 0; left: 0; width: 100%; height: 100%;
          background: url("https://transparenttextures.com/patterns/stardust.png"); /* Subtle dust texture */
          pointer-events: none;
          animation: drift-2 30s linear infinite;
          opacity: 0.3;
          z-order:2
          -webkit-mask-image: linear-gradient(to top, transparent 5%, black 40%);
          mask-image: linear-gradient(to top, transparent 5%, black 40%);
        }
        .logo, .subtitle, .cta-btn { position: relative; z-index: 2; }

       @keyframes drift {
          from { background-position: 0 0; }
          to { background-position: 500px 1000px; }
       }
       @keyframes drift-2 {
          from { background-position: 0 0; }
          to { background-position: 500px 1500px; }
       }

        .subtitle {
            font-weight: 300;
            letter-spacing: 5px;
            text-transform: uppercase;
            animation: flicker 5s infinite;
        }

        .cta-btn {
            margin-top: 30px;
            padding: 12px 35px;
            background: rgba(255,255,255,0.05);
            border: 1px solid var(--dust);
            color: var(--dust);
            text-transform: uppercase;
            letter-spacing: 3px;
            cursor: pointer;
            transition: 0.5s;
        }

        .cta-btn:hover {
            background: var(--dust);
            color: var(--dark);
        }

        .content {
            max-width: 900px;
            margin: -100px auto 100px;
            background: rgba(13, 13, 13, 0.95);
            padding: 60px;
            box-shadow: 0 -50px 100px rgba(0,0,0,1);
            z-order:5;
        }

    h2 { 
        font-family: 'Special Elite', system-ui; 
        color: #fff; 
        text-transform: uppercase;
        letter-spacing: 2px;
        border-bottom: 2px solid var(--rust); 
        display: inline-block;
        margin-bottom: 20px;

        text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
        opacity: 0.9;
    }

        .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }

        .feature h4 { 
        font-family: 'Special Elite', system-ui; color: var(--rust); margin-bottom: 5px; }
footer {
    padding: 60px 20px;
    background: #050505;
    text-align: center;
    border-top: 1px solid rgba(139, 69, 19, 0.3); /* Subtle Rust Border */
    color: #444; /* Faded text */
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.footer-links {
    margin-bottom: 20px;
}

.footer-links a {
    color: var(--dust);
    text-decoration: none;
    margin: 0 15px;
    transition: 0.3s;
    opacity: 0.6;
}

.footer-links a:hover {
    opacity: 1;
    color: var(--rust);
}

.copyright {
    margin-top: 10px;
    font-family: 'Cinzel', serif;
}

.server-time {
    color: #2ecc71; /* Green signal */
    font-size: 0.7rem;
    margin-top: 5px;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .logo {
        font-size: 2.2rem; /* Shrink logo so it doesn't wrap */
        letter-spacing: 6px;
    }

    .subtitle {
        font-size: 0.8rem;
        letter-spacing: 3px;
        padding: 0 20px; /* Prevent text hitting the edges */
    }

    .content {
        margin: -50px 15px 50px; /* Smaller overlap and side margins */
        padding: 40px 25px;
    }

    h2 {
        font-size: 1.8rem; /* Smaller typewriter header */
    }

    .grid {
        grid-template-columns: 1fr; /* Stack features vertically */
        gap: 30px;
    }

    footer {
        padding: 40px 10px;
    }

    .footer-links a {
        display: block; /* Stack links for easier tapping */
        margin: 10px 0;
    }
}
