:root{ --brand:#0a6fb7; --accent:#00a884; --dark:#0f172a; --muted:#f6f8fb; --text:#0b1220; }
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.grid{display:grid;gap:24px}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.grid-4{grid-template-columns:1fr}}
.hero{position:relative;padding:120px 0;background:linear-gradient(135deg,var(--dark),#1f2a44);color:#fff}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.4))}
.hero .container{position:relative;z-index:1}
.btn{display:inline-block;padding:12px 20px;border-radius:10px;background:var(--brand);color:#fff;text-decoration:none}
.card{border:1px solid #e5e7eb;border-radius:14px;background:#fff;text-decoration:none;color:inherit}
.card .card-body{padding:20px}
.card-link{transition:transform .2s ease}
.card-link:hover{transform:translateY(-4px)}
[data-animate]{opacity:0;transform:translateY(18px);transition:all .6s ease}
.animate-in{opacity:1;transform:translateY(0)}