/* ========== Global Styles ========== */
:root{
  --blue:#0a74da;
  --blue-dark:#0554a3;
  --bg:#f6f9ff;
  --text:#213547;
  --muted:#4a5568;
  --white:#ffffff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

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

header.site-header{
  background:var(--blue);
  color:var(--white);
  padding:22px 0;
  position:sticky;
  top:0;
  z-index:10;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff}
.brand__logo{
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(145deg, #2b8cf0, #0a74da);
  display:inline-block;
}
.brand__name{font-weight:700; letter-spacing:.3px}
.nav a{color:#fff; text-decoration:none; font-weight:600; opacity:.95}
.nav a:hover{opacity:1; text-decoration:underline}

.hero{
  background:linear-gradient(180deg, #ffffff 0%, #f0f6ff 100%);
  padding:64px 0;
  text-align:center;
}
.hero h1{font-size:2.2rem; margin:0 0 10px; color:var(--blue)}
.hero p.lead{font-size:1.1rem; color:var(--muted); margin:0 auto; max-width:760px}
.cta{
  display:inline-block; margin-top:22px; padding:12px 24px;
  background:var(--blue); color:#fff; border-radius:10px; text-decoration:none; font-weight:700;
  transition:.2s ease-in-out;
}
.cta:hover{background:var(--blue-dark); transform:translateY(-1px)}

.section{padding:56px 0}
.section h2{color:var(--blue); margin:0 0 14px; font-size:1.6rem}
.grid{
  display:grid; gap:18px; 
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.card{
  background:#fff; border:1px solid #e8edf8; border-radius:14px; padding:18px;
  box-shadow:0 2px 10px rgba(16,65,136,.06);
}
.card h3{margin:6px 0 8px; color:var(--blue); font-size:1.1rem}
.card p{margin:0; color:var(--muted)}

.faq details{
  background:#fff; border:1px solid #e8edf8; border-radius:12px; padding:14px 16px; margin-bottom:10px
}
.faq summary{cursor:pointer; font-weight:700; color:var(--blue)}
.faq p{margin:10px 0 0; color:var(--muted)}

.footer{
  background:var(--blue); color:#fff; padding:26px 0; margin-top:20px;
}
.footer a{color:#fff; text-decoration:underline}
.small{font-size:.92rem}

/* Accessibility helpers */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Responsive tweaks */
@media (prefers-reduced-motion: reduce) {
  *{transition:none !important; animation:none !important}
}