:root{

    /* Background */

    --bg:#F7F9FC;
    --bg-secondary:#EEF4F8;

    /* Surfaces */

    --surface:#FFFFFF;
    --surface-hover:#FBFCFD;

    /* Typography */

    --text:#18212F;
    --text-soft:#526276;
    --text-muted:#7E8EA2;

    /* Brand */

    --accent:#29B6F6;
    --accent-hover:#13A8EC;

    --mint:#44D7B6;

    /* UI */

    --border:#E5ECF3;
    --border-hover:#BFE6F8;

    /* Icon */

    --icon-bg:#F2F8FC;

    /* Effects */

    --shadow:
        0 10px 25px rgba(20,33,47,.05),
        0 2px 6px rgba(20,33,47,.03);

    --shadow-hover:
        0 18px 45px rgba(20,33,47,.10);

    --radius:22px;

}

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

html{
    scroll-behavior:smooth;
}

body{

    margin:0;
    font-family:'Quicksand',sans-serif;
    color:var(--text);
    background:

        radial-gradient(
            circle at top,
            rgba(41,182,246,.08),
            transparent 40%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(68,215,182,.05),
            transparent 35%
        ),

        linear-gradient(
            180deg,
            var(--bg),
            var(--bg-secondary)
        );

}

.badge{
    display:inline-block;
    margin-bottom:22px;
    padding:8px 16px;
    border-radius:50px;
    background:rgba(255, 255, 255, 0.08);
    border:1px solid rgba(57,197,255,.18);
    color:var(--accent);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;

}

.accent{

    background:linear-gradient(
        135deg,
        var(--accent),
        var(--mint)
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.hero{

    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px 28px;
}

.container{
    width:100%;
    max-width:1180px;
    text-align:center;

}


a {
    text-decoration: none;
    color:var(--accent);
}

a,
a:visited,
a:hover,
a:focus,
a:active{

    color:inherit;
    text-decoration:none;

}

h1{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:clamp(3.5rem,7vw,5.4rem);
    font-weight:800;
    letter-spacing:-2px;
    margin-bottom:18px;
}

.subtitle{
    max-width:720px;
    margin:auto;
    color:var(--text-soft);
    font-size:1.5rem;
    line-height:1.9;

}

.apps{
    margin-top:80px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
    gap:28px;
}

.card{

    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:42px 34px;
    transition:.25s;
    box-shadow:var(--shadow);
}

.card:hover{
    transform:translateY(-6px);
    border-color:var(--border-hover);
    box-shadow:var(--shadow-hover);
}

.icon{
    width:120px;
    height:120px;
    margin:0 auto 24px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:22px;
    background:var(--icon-bg);
    border:1px solid rgba(255,255,255,.05);
}

.icon img{
    width:90px;
    height:90px;
    object-fit:contain;

}

.card h3{

    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:1.45rem;
    margin-bottom:16px;
}

.card p{
    color:var(--text-muted);
    line-height:1.8;
    font-size:1rem;
}

footer {
    padding: 20px;
    text-align: center;
    font-size: 14px;
      margin-top:100px;
}

.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-content a {
    color: inherit;
    text-decoration: none;
}

.footer-content a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .separator {
        display: none;
    }

    .footer-content {
        flex-direction: column;
        gap: 6px;
    }
}