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

        body, html {
            height: 100%;
            background-color: #000;
            color: #33ff33; /* Classic terminal green */
            font-family: 'Courier New', Courier, monospace;
            overflow: hidden;
        }

        /* Scanline Overlay for the entire experience */
        body::before {
            content: " ";
            display: block;
            position: fixed;
            top: 0; left: 0; bottom: 0; right: 0;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.3) 50%);
            z-index: 999;
            background-size: 100% 4px;
            pointer-events: none;
        }

        /* --- STAGE 1: THE BOOT SEQUENCE --- */
        #boot-screen {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background-color: #020702;
            padding: 40px;
            z-index: 100;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .terminal-line {
            visibility: hidden;
            margin-bottom: 8px;
            font-size: 1.1rem;
            letter-spacing: 1px;
        }

        /* Boot Timings via CSS animations */
        .line1 { animation: typeLine 0s 0.5s forwards; }
        .line2 { animation: typeLine 0s 1.2s forwards; }
        .line3 { animation: typeLine 0s 1.8s forwards; }
        .line4 { animation: typeLine 0s 2.5s forwards; }
        .line5 { animation: typeLine 0s 3.2s forwards; }

        @keyframes typeLine {
            to { visibility: visible; }
        }

        .blink {
            animation: cursorBlink 1s infinite;
        }
        @keyframes cursorBlink {
            0%, 49% { opacity: 1; }
            50%, 100% { opacity: 0; }
        }

        /* --- STAGE 2: THE CRT MONITOR POP --- */
        .crt-turn-on {
            animation: crtPop 0.4s 4.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }

        @keyframes crtPop {
            0% { transform: scaleY(1); opacity: 1; }
            50% { transform: scaleY(0.01) scaleX(1); background: #fff; }
            100% { transform: scaleY(0) scaleX(0); opacity: 0; visibility: hidden; }
        }

        /* --- STAGE 3: THE MAIN CINEMATIC EXPERIENCE --- */
        #main-site {
            position: relative;
            height: 100%;
            width: 100%;
            opacity: 0;
            animation: fadeInSite 1.5s 4.5s ease-out forwards;
        }

        @keyframes fadeInSite {
            to { opacity: 1; }
        }

        .video-background {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1;
            overflow: hidden;
            background-color: #000;
        }

        .video-background video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(100%) contrast(140%) brightness(50%); /* Gritty high-contrast B&W */
        }

        .content-overlay {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 50px;
            color: #fff;
        }

        header {
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
            letter-spacing: 3px;
            font-weight: bold;
        }

        header span {
            color: #33ff33;
        }

        .main-title h1 {
            font-family: 'Arial Black', Impact, sans-serif;
            font-size: 6.5rem;
            line-height: 0.85;
            text-transform: uppercase;
            letter-spacing: -4px;
            max-width: 950px;
        }

        .main-title p {
            font-size: 1.1rem;
            margin-top: 25px;
            letter-spacing: 2px;
            color: #b3b3b3;
            max-width: 650px;
            line-height: 1.5;
        }

        footer {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

        .contact-btn {
            color: #fff;
            text-decoration: none;
            border: 2px solid #fff;
            padding: 15px 35px;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 3px;
            font-weight: bold;
            transition: background 0.2s, color 0.2s, border-color 0.2s;
        }

        .contact-btn:hover {
            background-color: #33ff33;
            border-color: #33ff33;
            color: #000;
        }

        .system-ok {
            font-size: 0.8rem;
            letter-spacing: 1px;
            color: #444;
        }

        @media (max-width: 768px) {
            .content-overlay { padding: 25px !important; }
            .main-title h1 { font-size: 3.5rem; letter-spacing: -2px; }
            footer { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 20px !important; }
        }

@media screen and (max-width: 768px) {
  
  /* Group badge and secure link to have the same reduced width and left align */
  .badge-element,
  img[alt="PROJECT 72 BADGE"],
  .secure-link-container,
  a[href*="id=0"] {
    display: block !important;
    width: 150px !important; /* Increased width to fit text */
    max-width: 150px !important;
    height: auto !important;
    margin-left: 0 !important; /* Force flush left */
    margin-right: auto !important;
    align-self: flex-start !important; /* Override flex centering */
    text-align: center !important; /* Center text neatly inside the button box */
    box-sizing: border-box !important;
  }

  /* Keep typography and touch targets for the secure link */
  .secure-link-container,
  a[href*="id=0"] {
    font-size: 0.75rem !important;
    padding: 8px 12px !important; 
  }

  /* Ensure the filament audio toggle aligns nicely below the link */
  .audio-toggle-element {
    font-size: 0.8rem !important;
    padding: 10px !important;
    margin-top: 0.5rem !important;
    color: #ffffff !important; /* White initially */
    font-weight: bold !important;
  }
}