*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    }
    
    body {
        height: 100vh;
        display: flex;
        flex-direction: column; /* stack header, cards, description, footer vertically */
        justify-content: space-between; /* space between top content and footer */
        align-items: center;
        background: linear-gradient(135deg, #214478, #afe9dd);
        color: white;
        padding: 40px 20px; /* optional: add some padding */
        font-family:"Inter",system-ui,sans-serif;
    }

    /* body{
    
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    
    
    
    background:linear-gradient(
    135deg,
    #214478,
    #afe9dd

    );
    
    color:white;
    }
     */
    h1 {
        font-size: 7em;
    }

    .container{
    text-align:center;
    max-width:640px;
    padding:40px;
    }
    
    .title{
    font-family:"Space Grotesk",sans-serif;
    font-size:3.8rem;
    letter-spacing:1px;
    margin-bottom:40px;
    }
    
    .cards{
    display:flex;
    gap:20px;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:32px;
    }
    
    .card{
    background:rgba(255,255,255,0.12);
    backdrop-filter:blur(10px);
    
    border-radius:14px;
    
    padding:18px 26px;
    
    min-width:200px;
    
    transition:transform .2s ease, box-shadow .2s ease;
    }
    
    .card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(0,0,0,0.25);
    }
    
    .card-label{
    font-size:.8rem;
    letter-spacing:1px;
    text-transform:uppercase;
    opacity:.75;
    margin-bottom:6px;
    }
    
    .card-value{
    font-size:1.05rem;
    font-weight:500;
    color:white;
    text-decoration:none;
    }
    
    .card-value:hover{
    text-decoration:underline;
    }
    
    .description{
    font-size:.95rem;
    line-height:1.6;
    opacity:.9;
    }
    
    .footer {
        margin-top: 40px;
        font-size: 0.85rem;
        opacity: 0.8;
        text-align: center;
        line-height: 1.5;
    }
    
    .footer a {
        color: rgba(255,255,255,0.9);
        text-decoration: none;
        transition: color 0.2s ease;
    }
    
    .footer a:hover {
        color: #ec4899; /* accent hover color */
    }