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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Sora',sans-serif;
    background:#f6f9ff;
    color:#0f172a;
    min-height:100vh;
    overflow-x:hidden;
    position:relative;
    padding:40px 20px 70px;
}

.bg-gradient{
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at top left, rgba(59,130,246,.10), transparent 35%),
        radial-gradient(circle at bottom right, rgba(96,165,250,.08), transparent 30%);
    z-index:-1;
}

.hero{
    max-width:780px;
    margin:0 auto 60px;
    text-align:center;
}

.brand-logo-wrap{
    display:flex;
    justify-content:center;
    margin-bottom:28px;
}

.brand-logo{
    display:block;
    width:min(260px,72vw);
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 14px 28px rgba(15,23,42,.06));
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 20px;
    border-radius:999px;
    background:rgba(255,255,255,.75);
    border:1px solid rgba(255,255,255,.95);
    backdrop-filter:blur(12px);
    box-shadow:0 12px 35px rgba(15,23,42,.05);
    margin-bottom:30px;
    font-size:13px;
    font-weight:600;
    letter-spacing:.3px;
}

.hero h1{
    font-size:clamp(3rem,7vw,5.2rem);
    line-height:1;
    letter-spacing:-3px;
    margin-bottom:24px;
    font-weight:800;
}

.hero h1 span{
    color:#2563eb;
}

.hero p{
    max-width:640px;
    margin:0 auto 36px;
    color:#475569;
    line-height:1.9;
    font-size:1rem;
}

.hero-actions{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{
    padding:18px 28px;
    border-radius:20px;
    text-decoration:none;
    transition:.35s ease;
    font-weight:600;
}

.btn-primary{
    background:#2563eb;
    color:#fff;
    box-shadow:0 18px 45px rgba(37,99,235,.22);
}

.btn-primary:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 50px rgba(37,99,235,.28);
}

.btn-secondary{
    background:rgba(255,255,255,.7);
    border:1px solid rgba(255,255,255,.95);
    color:#0f172a;
}

.btn-secondary:hover{
    transform:translateY(-4px);
}

.stats{
    max-width:980px;
    margin:0 auto 32px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:18px;
}

.stat-card{
    background:rgba(255,255,255,.75);
    border:1px solid rgba(255,255,255,.95);
    border-radius:28px;
    backdrop-filter:blur(14px);
    padding:28px;
    text-align:center;
    box-shadow:0 14px 40px rgba(15,23,42,.05);
}

.stat-card strong{
    display:block;
    margin-bottom:8px;
    font-size:1.5rem;
}

.stat-card span{
    color:#64748b;
    font-size:.95rem;
}

.section-heading{
    text-align:center;
    margin-bottom:24px;
}

.section-heading span{
    font-size:.88rem;
    font-weight:700;
    color:#2563eb;
    text-transform:uppercase;
    letter-spacing:1.5px;
}

.cards{
    max-width:980px;
    margin:0 auto;
    display:grid;
    gap:18px;
}

.card{
    display:flex;
    align-items:center;
    gap:22px;
    padding:28px;
    border-radius:32px;
    background:rgba(255,255,255,.75);
    border:1px solid rgba(255,255,255,.95);
    backdrop-filter:blur(14px);
    text-decoration:none;
    color:#0f172a;
    transition:.35s ease;
    box-shadow:0 16px 45px rgba(15,23,42,.05);
}

.card:hover{
    transform:translateY(-6px);
    border-color:#bfdbfe;
}

.card.featured{
    border-color:#bfdbfe;
    background:linear-gradient(180deg,#ffffff,#f5f9ff);
}

.card-icon{
    min-width:70px;
    width:70px;
    height:70px;
    border-radius:24px;
    background:#eff6ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.7rem;
}

.card-content{
    flex:1;
}

.card-content h3{
    margin-bottom:8px;
    font-size:1.08rem;
}

.card-content p{
    color:#64748b;
    line-height:1.7;
    font-size:.95rem;
}

.card-arrow{
    color:#2563eb;
    font-size:1.4rem;
}

.pillars{
    max-width:980px;
    margin:60px auto 0;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
}

.pillar{
    background:rgba(255,255,255,.75);
    border-radius:28px;
    padding:28px;
    border:1px solid rgba(255,255,255,.95);
    box-shadow:0 14px 40px rgba(15,23,42,.05);
}

.pillar h4{
    margin-bottom:10px;
    font-size:1.05rem;
}

.pillar p{
    color:#64748b;
    line-height:1.8;
}

.socials{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:52px;
}

.socials a{
    padding:14px 20px;
    border-radius:999px;
    background:#fff;
    border:1px solid #e2e8f0;
    color:#0f172a;
    text-decoration:none;
    transition:.3s ease;
}

.socials a:hover{
    transform:translateY(-3px);
    border-color:#bfdbfe;
}

footer{
    margin-top:52px;
    text-align:center;
    color:#64748b;
    font-size:.9rem;
}

.reveal{
    opacity:0;
    transform:translateY(18px);
    transition:all .7s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

@media(max-width:768px){

    .brand-logo{
        width:min(230px,78vw);
    }

    body{
        padding:28px 16px 60px;
    }

    .card{
        flex-direction:column;
        align-items:flex-start;
    }

    .card-arrow{
        display:none;
    }

}