:root{
  --primary:#0b5ed7;
  --primary-dark:#083b7a;
  --secondary:#102a43;
  --accent:#f7c948;
  --soft:#f5f8fc;
  --text:#334e68;
  --muted:#829ab1;
  --border:#e5eaf0;
}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);line-height:1.7}
.navbar{background:rgba(255,255,255,.97);box-shadow:0 2px 18px rgba(16,42,67,.08)}
.navbar-brand img{height:48px;width:auto}
.nav-link{font-weight:600;color:#334e68!important}
.nav-link:hover,.nav-link.active{color:var(--primary)!important}
.btn-ppid{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700;border-radius:10px}
.btn-ppid:hover{background:#084db2;border-color:#084db2;color:#fff}
.hero{min-height:720px;display:flex;align-items:center;padding-top:105px;background:radial-gradient(circle at 90% 10%,rgba(247,201,72,.25),transparent 28%),radial-gradient(circle at 10% 90%,rgba(11,94,215,.13),transparent 30%),linear-gradient(135deg,#f8fbff,#eef5ff)}
.hero-logo{max-width:430px;width:90%;filter:drop-shadow(0 18px 30px rgba(16,42,67,.12))}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#e8f1ff;color:var(--primary);border-radius:999px;padding:.45rem .8rem;font-weight:800;font-size:.78rem;letter-spacing:.04em}
.section{padding:90px 0}
.section-soft{background:var(--soft)}
.section-title{color:var(--secondary);font-weight:800;font-size:clamp(1.8rem,3vw,2.5rem)}
.section-subtitle{max-width:780px;margin:auto;color:#627d98}
.card-modern{height:100%;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(16,42,67,.06);transition:.25s}
.card-modern:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(16,42,67,.11)}
.icon-box{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:#e9f2ff;color:var(--primary);font-size:1.3rem}
.quote{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;border-radius:24px;padding:40px;box-shadow:0 18px 40px rgba(8,59,122,.18)}
.motto{font-size:1.2rem;font-weight:800}
.stat{border-left:4px solid var(--accent);background:#fff;padding:18px 20px;border-radius:12px;box-shadow:0 8px 24px rgba(16,42,67,.07)}
.service-card{position:relative;overflow:hidden}
.service-card:before{content:"";position:absolute;left:0;top:0;width:5px;height:100%;background:var(--primary)}
.service-number{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e9f2ff;color:var(--primary);font-weight:800;flex:none}
.list-clean{padding-left:1.15rem}
.list-clean li{margin-bottom:.65rem}
.badge-soft{background:#eef5ff;color:var(--primary);font-weight:700}
.timeline{position:relative;padding-left:30px;border-left:2px solid #d9e5f5}
.timeline-item{position:relative;margin-bottom:28px}
.timeline-item:before{content:"";position:absolute;left:-40px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--primary);border:4px solid #e9f2ff}
.org-image{max-width:100%;height:auto;border-radius:16px;box-shadow:0 15px 35px rgba(16,42,67,.10)}
.info-category{border:1px solid var(--border);border-radius:18px;padding:28px;height:100%;background:#fff}
.info-category .category-icon{font-size:2rem;color:var(--primary)}
.download-card{border:1px solid var(--border);border-radius:14px;padding:18px;background:#fff}
.faq .accordion-item{border:1px solid var(--border);border-radius:12px!important;margin-bottom:12px;overflow:hidden}
.faq .accordion-button{font-weight:700;color:var(--secondary);background:#fff}
.faq .accordion-button:not(.collapsed){color:var(--primary);background:#f4f8ff;box-shadow:none}
.contact-box{border:1px solid var(--border);border-radius:16px;padding:22px;background:#fff}
.footer{background:#0b1f33;color:#d9e2ec}
.footer a{color:#d9e2ec;text-decoration:none}
.footer a:hover{color:#fff}
.small-muted{color:var(--muted);font-size:.9rem}
.back-top{position:fixed;right:20px;bottom:20px;width:44px;height:44px;border:0;border-radius:50%;background:var(--primary);color:#fff;display:none;z-index:999}
.back-top.show{display:grid;place-items:center}
@media(max-width:991px){
  .hero{padding-top:125px}
  .hero-logo{max-width:320px;margin-top:30px}
}