:root{--ink:#10233f;--blue:#1759a8;--sky:#eaf4ff;--gold:#d89b2b;--muted:#637083;--white:#fff}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);line-height:1.65;background:#f8fbff}
a{color:var(--blue);text-decoration:none}.container{width:min(1120px,92%);margin:auto}
header{background:rgba(255,255,255,.96);position:sticky;top:0;z-index:10;box-shadow:0 2px 18px #16395d18}
nav{display:flex;align-items:center;justify-content:space-between;min-height:72px}.brand{font-weight:800;font-size:1.12rem}
.links{display:flex;gap:18px;flex-wrap:wrap}.links a{font-weight:650;color:var(--ink)}
.hero{background:linear-gradient(135deg,#0f3768,#1767b8 58%,#56a7df);color:white;padding:84px 0}
.hero-grid{display:grid;grid-template-columns:1.45fr .55fr;gap:44px;align-items:center}
.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-weight:750;color:#cfe8ff}.hero h1{font-size:clamp(2.5rem,6vw,4.7rem);line-height:1.04;margin:.25em 0}
.hero p{font-size:1.15rem;max-width:760px}.btn{display:inline-block;background:white;color:#164f8e;padding:12px 20px;border-radius:10px;font-weight:750;margin:8px 8px 0 0}
.btn.alt{background:#ffffff1f;color:white;border:1px solid #ffffff80}
section{padding:68px 0}.section-title{font-size:2rem;margin:0 0 24px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:white;padding:24px;border-radius:16px;box-shadow:0 8px 28px #153c6612;border:1px solid #dce9f5}
.card h3{margin-top:0}.tag{display:inline-block;background:var(--sky);padding:6px 10px;border-radius:20px;margin:4px;font-size:.9rem}
.stat{font-size:2rem;font-weight:850;color:var(--blue)}.muted{color:var(--muted)}
.page-head{background:linear-gradient(135deg,#123c70,#2782c8);color:white;padding:52px 0}.page-head h1{font-size:2.6rem;margin:0}
.item{background:white;border-left:4px solid var(--blue);padding:18px 20px;margin:14px 0;border-radius:0 12px 12px 0;box-shadow:0 5px 20px #16395d0d}
footer{background:#0e2746;color:#dcecff;padding:35px 0;margin-top:40px}
@media(max-width:800px){.hero-grid,.grid{grid-template-columns:1fr}.links{display:none}.avatar{width:170px;height:170px}.hero{padding:55px 0}}
.avatar {
    width: 230px;
    height: 230px;
    border-radius: 50%;
    overflow: hidden;
    border: 7px solid rgba(255, 255, 255, 0.45);
    margin: auto;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}