:root{
  --bg:#ffffff;
  --text:#16181d;
  --muted:#5f6570;
  --accent:#5b8cff;
  --accent-soft:#eef3ff;
  --card:#f7f9fc;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif:"Fraunces","Merriweather", Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}

.hero{
  position:relative;overflow:hidden;min-height:58vh;
  display:grid;grid-template-rows:auto 1fr;background:linear-gradient(180deg, var(--accent-soft), #fff);
  border-bottom: 1px solid #e7eaf0;
}
.topnav{
  display:flex;justify-content:flex-end;align-items:center;
  gap:18px;padding:18px 24px;font-weight:700
}
.topnav a{color:var(--text)}
.topnav .navlinks a{opacity:.85}
.topnav .navlinks a:hover{opacity:1}

.hero-inner{
  display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding:48px 24px;max-width:1000px;margin:0 auto;
}
.hero h1{
  font-family:var(--serif);
  font-size: clamp(28px, 6vw, 48px);
  line-height:1.2;margin:0;
}
.hero p{font-size: clamp(16px, 2.2vw, 20px);color:var(--muted);max-width:70ch;margin:0}
.cta{
  display:inline-block;margin-top:12px;padding:12px 18px;border-radius:12px;background:var(--accent);color:white;font-weight:800;
  box-shadow:0 10px 30px rgba(91,140,255,.25)
}
.cta:hover{transform:translateY(-1px)}
#grid{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.2}

/* Sections */
.section{padding:48px 24px}
.section h2{font-family:var(--serif); margin:0 0 16px 0; font-size: clamp(24px, 4.2vw, 34px);}
.lead{color:var(--muted);max-width:70ch}

/* Cards and grids */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:10px}
.card{
  background:var(--card);border:1px solid #e7eaf0;border-radius:16px;padding:18px;
  transition:transform .15s ease, box-shadow .15s ease
}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.card h3{margin:0 0 8px 0;font-family:var(--serif)}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:var(--accent-soft);color:#3a51a3;font-weight:700}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
@media (max-width: 860px){ .grid-2{grid-template-columns:1fr} }

/* Footer */
footer{padding:28px 24px;border-top:1px solid #e7eaf0;color:var(--muted);font-size:14px;text-align:center}
img.responsive{max-width:100%;height:auto;border-radius:12px;border:1px solid #e7eaf0}