*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui;background:#0A1224;color:#EAF1FF}
.wrap{max-width:1100px;margin:0 auto;padding:40px 20px}
.hero{display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:center;padding:40px 20px;border-bottom:1px solid #183058;background:radial-gradient(1000px 400px at -10% -20%,rgba(0,173,239,.15),transparent)}
.portrait{width:220px;height:220px;border-radius:50%;object-fit:cover;border:2px solid rgba(0,173,239,.5);box-shadow:0 0 20px rgba(0,173,239,.25)}
.name{font-family:Poppins,system-ui;font-weight:800;font-size:48px;line-height:1.1;margin:0 0 6px;color:#EAF1FF}
.headline{margin:0 0 8px}
.motto{color:#cfe7ff;margin:0 0 10px}
.intro{max-width:640px;color:#dbe8ff}
.nav a{margin-right:12px;color:#00ADEF;text-decoration:none}
h1,h2{font-family:Poppins,system-ui}
h2{margin:24px 0 12px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:#0F1B3A;border:1px solid #183058;border-radius:16px;padding:18px}
.btn{display:inline-block;margin-top:10px;background:#00ADEF;color:#001018;padding:8px 12px;border-radius:10px;font-weight:700;text-decoration:none}
.tag{display:inline-block;margin-top:10px;color:#9DB4D6}
.timeline>div{background:#0F1B3A;border:1px solid #183058;border-radius:16px;padding:14px;margin:8px 0}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.gallery figure{margin:0;padding:8px;background:#0F1B3A;border:1px solid #183058;border-radius:14px}
.gallery img{width:100%;height:auto;max-height:260px;object-fit:contain;border-radius:12px;display:block}
figcaption{text-align:center;color:#9DB4D6;margin-top:6px;font-size:14px}

footer{text-align:center;padding:30px 0;border-top:1px solid #183058;color:#9DB4D6}
@media(max-width:800px){.hero{grid-template-columns:1fr}.name{font-size:34px}}