@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Slab:wght@500;700&display=swap");
:root { --ink:#333; --mute:#555; --paper:#fff; --blue:#1172a6; --navy:#0b3d5c; --mist:#f4f7fa; }
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:Roboto,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); line-height:1.65; }
img { max-width:100%; display:block; }
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { font-family:"Roboto Slab",Georgia,serif; line-height:1.2; }
.header { background:#fff; box-shadow:0 1px 0 #e6e6e6; position:sticky; top:0; z-index:40; }
.header-inner { max-width:1120px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:12px 20px; gap:16px; }
.logo img { height:42px; width:auto; }
.nav { display:flex; flex-wrap:wrap; gap:16px; }
.nav a { color:#222; font-weight:700; font-size:14px; }
.nav a:hover { color:var(--blue); text-decoration:none; }
.hero { max-width:1120px; margin:0 auto; padding:56px 24px; display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; }
.hero h1 { font-size:34px; margin-bottom:14px; color:var(--navy); }
.wrap { max-width:1080px; margin:0 auto; padding:52px 24px; }
.wrap h2 { font-size:28px; margin-bottom:14px; color:var(--navy); }
.wrap h3 { font-size:20px; margin:18px 0 8px; }
.wrap p, .wrap li { margin-bottom:12px; color:var(--mute); }
.wrap ul { margin:0 0 16px 20px; }
.band { background:var(--mist); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.card { background:#fff; border:1px solid #e4e4e4; padding:20px; }
.people { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.person { display:grid; grid-template-columns:140px 1fr; gap:16px; align-items:start; }
.person img { width:140px; height:140px; object-fit:cover; }
.btn { display:inline-block; background:var(--blue); color:#fff; padding:10px 18px; font-weight:700; }
.btn:hover { background:#0d5c86; text-decoration:none; color:#fff; }
.form { display:grid; gap:10px; max-width:520px; }
.form input, .form textarea { border:1px solid #ccc; padding:10px 12px; font:inherit; }
.form button { background:var(--blue); color:#fff; border:0; padding:10px 18px; font-weight:700; cursor:pointer; }
.footer { background:var(--navy); color:#dce8f0; padding:22px 24px; text-align:center; font-size:14px; }
.footer a { color:#fff; }
@media (max-width:800px) {
  .hero, .people, .person { grid-template-columns:1fr; }
  .header-inner { flex-wrap:wrap; }
}