* {
    box-sizing: border-box;
}


body {
    margin: 0;
    min-height: 100vh;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    color:white;

    overflow-x:hidden;
}


.background {
    position:fixed;
    inset:0;

    background:
        radial-gradient(
            circle at top left,
            #2563eb,
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            #9333ea,
            transparent 35%
        ),
        #050505;

    z-index:-1;
}



header {

    text-align:center;

    padding:60px 20px 30px;

}


header h1 {

    font-size:3.5rem;

    margin:0;

}


header p {

    color:#aaa;

    font-size:1.3rem;

}


.clock {

    margin-top:20px;

    color:#ddd;

}



main {

    max-width:1100px;

    margin:auto;

    padding:20px;

}



section {

    margin-bottom:50px;

}


h2 {

    margin-bottom:20px;

}



.services {

    display:grid;

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

    gap:20px;

}



.card {

    display:flex;

    align-items:center;

    gap:20px;


    padding:25px;


    text-decoration:none;

    color:white;


    background:
        rgba(255,255,255,0.08);


    border:
        1px solid
        rgba(255,255,255,0.15);


    backdrop-filter:blur(15px);


    border-radius:20px;


    transition:
        transform .25s,
        background .25s;

}



.card:hover {

    transform:
        translateY(-8px)
        scale(1.02);


    background:
        rgba(255,255,255,0.16);

}



.icon {

    font-size:40px;

}



.card h3 {

    margin:0 0 5px;

}


.card p {

    margin:0;

    color:#bbb;

}



footer {

    text-align:center;

    padding:30px;

    color:#888;

}