:root{--navy:#0d2a3f;--blue:#12688f;--light:#f3f6f8;--accent:#ffb703;--text:#22313c}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,Arial,sans-serif;background:var(--light);color:var(--text);line-height:1.6}
.wrap{max-width:1050px;margin:auto;padding:0 18px}
.hero{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;padding:60px 0}
.hero .wrap{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.avatar{width:170px;height:170px;border-radius:50%;object-fit:cover;border:5px solid rgba(255,255,255,.25);background:#fff}
h1{margin:0;font-size:38px}.role{font-size:18px;color:var(--accent);font-weight:700;margin:6px 0 14px}
.intro{max-width:640px;font-size:17px}
.btn{display:inline-block;margin:16px 10px 0 0;padding:11px 20px;border-radius:999px;background:var(--accent);color:#20303b;font-weight:700;text-decoration:none}
.btn.secondary{background:rgba(255,255,255,.16);color:#fff}
section{padding:48px 0}h2{font-size:30px;margin:0 0 22px;color:var(--navy)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.card{background:#fff;padding:22px;border-radius:14px;box-shadow:0 3px 12px rgba(0,0,0,.07)}
.card-long{background:#fff;padding:22px;border-radius:14px;box-shadow:0 3px 12px rgba(0,0,0,.07);width:700px;margin-bottom:10px}
.card h3{margin:0 0 8px;color:var(--navy)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
figure{margin:0;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.07)}
img{width:100%;height:210px;object-fit:cover;display:block;background:#dde}
figcaption{padding:12px;font-size:14px;color:#546}
.contact{list-style:none;padding:0}.contact li{margin-bottom:8px}
a{color:var(--blue)}
footer{background:var(--navy);color:#cfe0ea;text-align:center;padding:22px}
@media(max-width:640px){.hero .wrap{justify-content:center;text-align:center}.avatar{margin:auto}}