:root{
  --brand:#0b5ed7; --brand-dark:#084298; --ink:#0b1220; --muted:#6c757d;
  --surface:#ffffff; --surface-2:#f5f7fb;
}

/* Global */
*{box-sizing:border-box}
body{font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);-webkit-tap-highlight-color:transparent}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand)}
a:hover{color:var(--brand-dark)}
.btn-brand{background:var(--brand);color:#fff;border:none}
.btn-brand:hover{background:var(--brand-dark);color:#fff}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#000;color:#fff;padding:.5rem .75rem;border-radius:.5rem;z-index:1051}

/* Navbar */
.navbar-brand .brand-text{font-weight:700;letter-spacing:.2px}
.nav-link{padding:.75rem .9rem} /* bigger tap target */
@media (max-width: 991.98px){
  .nav-link{padding:1rem} /* even larger in mobile menu */
}

/* Hero */
.hero{
  min-height:72vh;
  background: linear-gradient(rgba(10,14,30,.55), rgba(10,14,30,.55)), url('/assets/img/hero.png') center/cover no-repeat;
  color:#fff;
}
.hero .btn{min-height:44px} /* touch-friendly */

/* Sections */
.section-pad{padding: clamp(2.5rem, 4vw + 1rem, 5rem) 0}
.section-title{font-weight:700;margin-bottom:.25rem}
.underline{width:64px;height:4px;background:var(--brand);border-radius:999px}

/* Tiles / cards */
.tile{
  background:#fff;border:1px solid #edf1f7;border-radius:1rem;padding:1.25rem;
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.tile:hover{transform: translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.06)}
.feature-icon{
  width:56px;height:56px;display:grid;place-items:center;border-radius:12px;
  background:#eef4ff;color:var(--brand);font-size:1.25rem;
}

/* Notices */
.notice{border:1px solid #edf1f7;border-radius:1rem;padding:1.25rem;background:#fff}
.notice-badge{background:#fff3cd;color:#856404;padding:.35rem .6rem;border-radius:999px;font-size:.8rem}

/* Footer */
footer a{ text-decoration:none }
footer a:hover{ text-decoration:underline }
.footer-links > li + li{margin-top:.4rem}

/* Focus styles */
:focus-visible{outline:3px solid #93c5fd;outline-offset:2px;border-radius:.4rem}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}