/* ===== izinPI Dashboard v1.0 ===== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root {
    --bg: #07111f;
    --surface: rgba(255,255,255,.05);
    --surface-hover: rgba(255,255,255,.08);

    --primary: #3b82f6;
    --primary-light: #60a5fa;

    --text: #f8fafc;
    --muted: #94a3b8;

    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
}

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

body{

    font-family:'Inter',sans-serif;

    background: linear-gradient(180deg, var(--bg), #111827);

    color: var(--text);
    
    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;
}

.container{

    width:100%;
    max-width:900px;

    text-align:center;

}

.logo{

    width:18px;
    height:18px;

    margin:auto;

    border-radius:50%;

    background:#3b82f6;

    box-shadow:
        0 0 12px #3b82f6,
        0 0 30px #2563eb;

    animation:pulse 3s infinite;
}

@keyframes pulse{

0%{
transform:scale(1);
opacity:1;
}

50%{
transform:scale(1.15);
opacity:.8;
}

100%{
transform:scale(1);
opacity:1;
}

}

h1{

    margin-top:18px;

    font-size:3rem;

    font-weight:700;
}

.subtitle{

    margin-top:8px;

    color:#94a3b8;

    font-size:1rem;
}

#date{

    margin-top:35px;

    color:#94a3b8;
}

#clock{

    font-size:2.3rem;

    font-weight:600;

    margin-top:8px;
}

.status{

    display:inline-block;

    margin-top:25px;

    padding:12px 24px;

    background:#0f172a;

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

    border-radius:999px;

    font-weight:600;
}
/* ===== Stats Cards ===== */

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

    margin-top:45px;

}

.card{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(12px);

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

    border-radius:18px;

    padding:28px;

    transition:.25s ease;

}

.card:hover{

    transform:translateY(-6px);

    border-color:#3b82f6;

    box-shadow:0 0 25px rgba(59,130,246,.25);

}

.card h2{

    color:#94a3b8;

    font-size:.95rem;

    font-weight:500;

    margin-bottom:18px;

}

.card span{

    font-size:2rem;

    font-weight:700;

}

/* ===== Services ===== */

.services{

    margin-top:55px;

}

.services h3{

    margin-bottom:20px;

    font-size:1.4rem;

}

.services div{

    width:260px;

    margin:10px auto;

    padding:12px;

    background:rgba(255,255,255,.04);

    border-radius:10px;

}

/* ===== Buttons ===== */

.buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-top:45px;

}

.buttons a{

    text-decoration:none;

    color:white;

    background:#2563eb;

    padding:14px 24px;

    border-radius:999px;

    transition:.25s;

    font-weight:600;

}

.buttons a:hover{

    background:#3b82f6;

    transform:translateY(-3px);

}

/* ===== Footer ===== */

footer{

    margin-top:55px;

    color:#64748b;

    font-size:.9rem;

}