:root{
    --indigo: #1F2D76;
    --teal:   #3a868f;
    --blue:   #225777;
    --bg: #f8fafc;
    --muted: #53607a;
    --radius: 10px;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
body{
    margin:0;
    background:var(--bg);
    color: #0b1220;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
}
header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:18px 24px;
    background:linear-gradient(90deg, rgba(31,45,118,0.06), rgba(34,87,119,0.03));
    border-bottom:1px solid rgba(31,45,118,0.06);
    position:sticky;
    top:0;
    z-index:30;
}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit}
.brand img{height:44px;width:auto;display:block}
nav{display:flex;gap:16px;align-items:center}
nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:600}
nav a:hover{background:rgba(34,87,119,0.06);color:var(--indigo)}
.cta{
    background:linear-gradient(90deg,var(--teal),var(--blue));
    color:white;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700;
    box-shadow: 0 6px 18px rgba(34,87,119,0.12);
}
main{max-width:1200px;margin:28px auto;padding:0 20px}
.hero{
    display:block;
    background:linear-gradient(180deg, rgba(58,134,143,0.04), transparent);
    padding:28px;
    border-radius:var(--radius);
    box-shadow: 0 6px 30px rgba(15,23,42,0.04);
}
.hero h1{
    margin:0 0 12px 0;
    color:var(--indigo);
    font-size:clamp(1.5rem, 3.5vw, 2.2rem);
    line-height:1.05;
}
.hero p{margin:0 0 18px 0;color:var(--muted);max-width:56ch}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-outline{
    padding:10px 14px;border-radius:10px;border:2px solid var(--blue);background:transparent;color:var(--blue);font-weight:700;text-decoration:none;
}
.card{
    padding:18px;border-radius:12px
}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.feature{padding:14px;border-radius:10px;background:linear-gradient(180deg, rgba(31,45,118,0.02), rgba(58,134,143,0.01))}
.feature h3{margin:0 0 8px 0;font-size:1rem;color:var(--indigo)}
.feature p{margin:0;color:var(--muted);font-size:.95rem}
footer{
    margin-top:28px;padding:18px 20px;border-radius:10px;background:#fff;border:1px solid rgba(15,23,42,0.04);
    display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.small{font-size:.9rem;color:var(--muted)}
@media (max-width:980px){
    .hero{grid-template-columns:1fr; text-align:center}
    nav{display:none}
}
@media (max-width:520px){
    header{padding:12px}
    .brand img{height:36px}
    .features{grid-template-columns:1fr}
}