:root{ --blue:#0b63d6; --light:#f6fbff; }

    body{font-family:Inter,system-ui,Arial;margin:0;background:var(--light);color:#0a2540}

    .site-header{background:linear-gradient(90deg,var(--blue),#0b78ff);color:white;padding:12px 20px;position:sticky;top:0;z-index:50}

    .nav{display:flex;align-items:center;justify-content:space-between}

    .brand{font-weight:700;color:white;text-decoration:none}

    .menu{list-style:none;display:flex;gap:14px;margin:0;padding:0}

    .menu a{color:white;text-decoration:none}

    .btn{background:white;color:var(--blue);padding:8px 12px;border-radius:8px}

    .hero{padding:80px 20px;background:linear-gradient(180deg,rgba(11,99,214,0.08),transparent);} 

    .hero-inner{max-width:980px;margin:0 auto;text-align:left}

    .cta{display:inline-block;padding:12px 18px;border-radius:10px;background:var(--blue);color:white;text-decoration:none}

    .hero-inner{opacity:0;transform:translateY(6px);animation:fadeUp .9s ease-out forwards}

    @keyframes fadeUp{to{opacity:1;transform:none}}

    .container{max-width:1100px;margin:40px auto;padding:0 20px}

    .cards{display:flex;gap:16px}
    .card{background:white;padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(10,20,40,0.06);flex:1}

@media(max-width:768px){.menu{display:none}.cards{flex-direction:column}}