*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--background);

    color:var(--text);

    line-height:1.7;

    transition:
        background var(--transition),
        color var(--transition);

}

img{

    display:block;
    max-width:100%;

}

a{

    color:inherit;
    text-decoration:none;

}

button{

    font:inherit;
    border:none;
    outline:none;
    cursor:pointer;

}

section{

    width:min(100%,var(--max-width));

    margin:auto;

    padding:96px 24px;

}

.section-header{

    text-align:center;

    margin-bottom:48px;

}

.section-tag{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:999px;

    background:var(--surface);

    color:var(--primary);

    font-size:.9rem;

    font-weight:600;

}

.section-header h2{

    font-size:2.2rem;

    margin-bottom:14px;

}

.section-header p{

    color:var(--text-muted);

    max-width:700px;

    margin:auto;

}

.card-grid{

    display:grid;

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

    gap:24px;

}

.card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:28px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.card:hover{

    background:var(--surface-hover);

    transform:translateY(-6px);

}

.card h3{

    margin-bottom:12px;

    font-size:1.2rem;

}

.card p{

    color:var(--text-secondary);

}

.btn{

    display:inline-flex;

    justify-content:center;
    align-items:center;

    gap:10px;

    padding:14px 28px;

    border-radius:999px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:var(--transition);

}

.btn:hover{

    background:var(--primary-hover);

    transform:translateY(-3px);

}

.btn-outline{

    background:transparent;

    color:var(--text);

    border:2px solid var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

.hero-actions{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:32px;

    flex-wrap:wrap;

}

footer{

    margin-top:60px;

    padding:48px 24px;

    text-align:center;

    border-top:1px solid var(--border);

}

.footer-content{

    width:min(100%,900px);

    margin:auto;

}

.footer-content h2{

    margin-bottom:12px;

}

.footer-content p{

    color:var(--text-muted);

}

.footer-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin:28px 0;

}

.footer-links a{

    color:var(--primary);

    font-weight:600;

}

.footer-links a:hover{

    text-decoration:underline;

}

#copyright{

    font-size:.9rem;

}