:root 
    {
        --primary: #2563eb;
        --primary-light: #3b82f6;
        --dark: #1e293b;
        --light: #f8fafc;
    }
html, body 
    {
        height: 100%;
        margin: 0;
    }
body 
    {
        margin: 0;
        font-family: Arial, sans-serif;
        background: var(--light);
        color: var(--dark);
        display: flex;
        flex-direction: column;
    }
header 
    {
        background: var(--primary);
        color: white;
        padding: 1.2rem 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
header h1 
    {
        margin: 0;
        font-size: 1.6rem;
    }
nav a 
    {
        color: white;
        margin-left: 1rem;
        text-decoration: none;
        font-weight: bold;
    }
.hero 
    {
        padding: 4rem 2rem;
        text-align: center;
        background: var(--primary-light);
        color: white;
    }
.hero h2 
    {
        margin: 0 0 1rem;
        font-size: 2.4rem;
    }
.container 
    {
        max-width: 900px;
        margin: 2rem auto;
        padding: 0 1rem;
        flex: 1;
    }
.card 
    {
        background: white;
        padding: 1.5rem;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        margin-bottom: 1.5rem;
    }
footer 
    {
        text-align: center;
        padding: 1.5rem;
        background: var(--dark);
        color: white;
        margin-top: 3rem;
    }