@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

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

body{

    font-family:'Bebas Neue',sans-serif;

    min-height:100vh;

    overflow-y:auto;

    overflow-x:hidden;

    background:
        radial-gradient(
            circle at center,
            #1d1d1d 0%,
            #0c0c0c 45%,
            #040404 100%
        );
}

/* textura grafite */

body::before{

    content:"";

    position:fixed;

    inset:0;

    opacity:.08;

    background:
    repeating-linear-gradient(
        90deg,
        transparent,
        transparent 2px,
        rgba(255,255,255,.04) 3px
    );

    pointer-events:none;
}

/* vinheta */

body::after{

    content:"";

    position:fixed;

    inset:0;

    background:
    radial-gradient(
        circle,
        transparent 40%,
        rgba(0,0,0,.55) 100%
    );

    pointer-events:none;
}

.container{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:100%;
}

/* PEIXE */

.logo{

    width:900px;

    max-width:55vw;

    margin-top:150px;

    margin-bottom:30px;

    opacity:.95;

    cursor:pointer;

    filter:
        brightness(1.6)
        contrast(1.2);

    transition:.4s;
}

.logo:hover{

    transform:scale(1.05);

    filter:
        brightness(1.9)
        contrast(1.3);
}

/* CONTADOR */

#countdown{

    color:#e22f2f;

    font-size:4rem;

    letter-spacing:8px;

    margin-top:-150px;

    margin-bottom:100px;

    text-shadow:
        0 0 12px rgba(255,0,0,.8),
        0 0 30px rgba(255,0,0,.35);
}

/* MODAL */

.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.88);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;
}

.modal-content{

    width:420px;

    background:#080808;

    border:1px solid rgba(255,0,0,.25);

    padding:40px;

    display:flex;

    flex-direction:column;

    gap:18px;

    box-shadow:
        0 0 40px rgba(255,0,0,.15);
}

.modal-content h2{

    color:#ff1c1c;

    text-align:center;

    letter-spacing:4px;

    font-size:2rem;

    margin-bottom:10px;
}

.modal-content input{

    background:#111;

    border:none;

    outline:none;

    padding:16px;

    color:white;

    font-size:1rem;
}

.modal-content input::placeholder{

    color:#777;
}

.access-btn{

    background:#b30000;

    color:white;

    border:none;

    padding:16px;

    cursor:pointer;

    font-family:'Bebas Neue',sans-serif;

    font-size:1.2rem;

    letter-spacing:4px;

    transition:.3s;
}

.access-btn:hover{

    background:#d00000;

    box-shadow:
        0 0 20px rgba(255,0,0,.4);
}

/* ========================= */
/* AGENT PANEL */
/* ========================= */

.agent-panel{

    position:relative;

    z-index:2;

    width:900px;

    max-width:90%;

    text-align:center;
}

.agent-logo{

    width:220px;

    margin-bottom:25px;
}

.agent-classification{

    color:#ff1c1c;

    letter-spacing:4px;

    font-size:1.4rem;

    margin-bottom:20px;
}

.agent-panel h1{

    color:white;

    font-size:3rem;

    letter-spacing:4px;

    margin-bottom:40px;
}

.agent-info{

    display:flex;

    flex-direction:column;

    gap:20px;

    margin-bottom:50px;
}

.info-box{

    background:#0c0c0c;

    border:1px solid rgba(255,0,0,.2);

    padding:20px;
}

.label{

    display:block;

    color:#777;

    font-size:1rem;

    letter-spacing:3px;

    margin-bottom:10px;
}

.value{

    color:white;

    font-size:1.5rem;

    letter-spacing:3px;
}

.documents h2{

    color:#ff1c1c;

    letter-spacing:4px;

    margin-bottom:25px;
}

.doc-button{

    display:block;

    width:100%;

    margin-bottom:15px;

    background:#111;

    color:white;

    border:1px solid rgba(255,0,0,.2);

    padding:20px;

    cursor:pointer;

    font-family:'Bebas Neue',sans-serif;

    font-size:1.2rem;

    letter-spacing:3px;

    transition:.3s;
}

.doc-button:hover{

    background:#1a1a1a;

    border-color:#ff1c1c;
}
/* ========================= */
/* AGENT PHOTO CARD */
/* ========================= */

.agent-card{

    position:fixed;

    top:40px;

    left:40px;

    z-index:999;
}

.agent-photo{

    width:180px;

    height:220px;

    object-fit:cover;

    border:2px solid rgba(255,0,0,.25);

    background:#111;

    display:block;
}

.agent-id{

    width:180px;

    background:#0c0c0c;

    border:1px solid rgba(255,0,0,.15);

    padding:12px;

    text-align:center;

    letter-spacing:2px;

    color:#777;
}

.agent-id span{

    display:block;

    margin-top:8px;

    color:white;

    font-size:1.3rem;

    letter-spacing:3px;
}.download-button{

    display:block;

    width:100%;

    margin-top:15px;

    padding:18px;

    background:#111;

    color:#fff;

    text-decoration:none;

    text-align:center;

    letter-spacing:3px;

    font-size:1.2rem;

    border:2px solid #333;

    transition:.3s;
}

.download-button:hover{

    background:#222;

    border-color:#8b0000;

    color:#fff;

    box-shadow:
        0 0 15px rgba(139,0,0,.4);
}
/* ========================= */
/* ACCESS DENIED */
/* ========================= */

.denied-popup{

    position: fixed;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    background: rgba(0,0,0,0.95);

    color: #ff2b2b;

    border: 2px solid #ff2b2b;

    padding: 20px 40px;

    font-size: 28px;
    letter-spacing: 4px;

    display: none;

    z-index: 9999;

    font-family: monospace;

    box-shadow:
    0 0 20px rgba(255,0,0,.5);

}.classified{

    background:#7a1010;

    color:white;

    padding:10px 20px;

    font-weight:bold;

    font-size:1.3rem;

    text-align:center;

    border:2px solid #4d0000;

}

.classified-sub{

    text-align:center;

    font-size:.7rem;

    color:#7a1010;

    margin-top:4px;

    letter-spacing:1px;

}