:root{
  --pri:#1d4ed8; --pri-2:#1e40af; --ink:#0f172a; --muted:#64748b;
  --bg:#ffffff; --soft:#eff4ff; --line:#e2e8f0;
}
.muted{color:var(--muted)}
.text-pri{color:var(--pri)}
.logo{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--pri),var(--pri-2));color:#fff;font-weight:800}
.btn-pri{background:linear-gradient(135deg,var(--pri),var(--pri-2));color:#fff!important;padding:.6rem 1.3rem;border-radius:999px;font-weight:600;border:0;display:inline-block;transition:.2s}
.btn-pri:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(29,78,216,.55)}
.hero{background:radial-gradient(900px 420px at 50% -12%,rgba(29,78,216,.14),transparent),var(--soft); padding-top: 100px; padding-bottom: 50px;}
.hero-badge{display:inline-block;background:#fff;border:1px solid var(--line);color:var(--pri);padding:.4rem 1rem;border-radius:999px;font-weight:600;font-size:.85rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem 1.2rem}
.stat b{font-size:1.6rem;background:linear-gradient(135deg,var(--pri),var(--pri-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.chip{border:1px solid var(--line);background:#fff;color:var(--muted);padding:.5rem 1.1rem;border-radius:999px;font-weight:600;font-size:.9rem;cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--pri);color:var(--pri)}
.chip.active{background:linear-gradient(135deg,var(--pri),var(--pri-2));color:#fff;border-color:transparent}
.card-cs{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;height:100%;display:flex;flex-direction:column;transition:.25s;animation:fade .4s ease}
.card-cs:hover{transform:translateY(-6px);box-shadow:0 22px 44px -22px rgba(29,78,216,.4);border-color:rgba(29,78,216,.25)}
.card-img{position:relative;overflow:hidden;aspect-ratio:4/3}
.card-img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.card-cs:hover .card-img img{transform:scale(1.07)}
.tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);color:var(--pri);font-weight:700;font-size:.72rem;padding:.3rem .7rem;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;z-index:10}
.card-body{padding:1.3rem;display:flex;flex-direction:column;flex:1}
.metrics{display:flex;gap:1.2rem;margin:.9rem 0 1.1rem}
.metrics b{display:block;font-size:1.15rem;color:var(--pri)}
.metrics span{font-size:.72rem;color:var(--muted)}
.read{margin-top:auto;font-weight:700;color:var(--pri)}
.read:hover{color:var(--pri-2)}
.grad{background:linear-gradient(135deg,var(--pri),var(--pri-2));color:#fff;border-radius:24px}
.grad h2{color:#fff}
.grad .muted{color:rgba(255,255,255,.85)!important}
.grad .btn-pri{background:#fff;color:var(--pri)!important}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#work{padding-top:80px}