body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',Arial,sans-serif;background:#f5f5f7;color:#1d1d1f;scroll-behavior:smooth}
.nav{position:sticky;top:0;background:rgba(255,255,255,.8);backdrop-filter:blur(12px);display:flex;justify-content:space-between;padding:18px 10%;border-bottom:1px solid #ddd}
nav a{text-decoration:none;color:#1d1d1f;margin-left:20px}
.hero{text-align:center;padding:90px 20px}
.profile{width:180px;height:180px;border-radius:50%;object-fit:cover;box-shadow:0 10px 30px rgba(0,0,0,.15)}
h1 span{color:#0071e3}
section{padding:70px 10%}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.card{background:#fff;border-radius:18px;padding:20px;box-shadow:0 10px 25px rgba(0,0,0,.08)}
footer{text-align:center;padding:40px;color:#666}
@media(prefers-color-scheme:dark){
body{background:#000;color:#f5f5f7}
.nav{background:rgba(20,20,20,.8);border-color:#333}
nav a{color:#f5f5f7}
.card{background:#151515}
}