:root{--bg:#0f172a;--card:#0b1220;--muted:#9aa4b2;--accent:#7c3aed;--glass:rgba(255,255,255,0.04)}*{box-sizing:border-box}html,body{height:100%}body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial;line-height:1.6;color:#e6eef8;background:linear-gradient(180deg,#071026 0%, #071827 60%);padding:0;margin:0}
.container{max-width:1100px;margin:0 auto;padding:28px}
.site-header{backdrop-filter:blur(6px);position:sticky;top:0;background:transparent;padding:18px 0;z-index:40}
.brand{font-weight:700;color:#fff;font-size:18px}
.brand .dot{color:var(--accent);margin-left:6px}
.nav{float:right}
.nav a{color:rgba(255,255,255,0.85);text-decoration:none;margin-left:18px}
.nav a.cta{background:var(--accent);color:#fff;padding:8px 12px;border-radius:8px}

.hero{padding:40px 0}
.hero-grid{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start}
.hero h1{font-size:44px;margin:0;color:#fff}
.lead{color:#dbe9ff;font-size:18px;margin-top:10px}
.muted{color:var(--muted)}
.actions{margin-top:18px}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;margin-right:10px}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06)}

.hero-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:18px;color:#dbe9ff;box-shadow:0 8px 30px rgba(2,6,23,0.6)}
.photo{height:140px;border-radius:10px;background:linear-gradient(135deg,#1e293b,#0ea5a6);margin-bottom:12px}
.card-body h3{margin:0}
.small{font-size:13px;color:var(--muted)}
.meta{list-style:none;padding-left:0;margin-top:12px;color:var(--muted)}
.meta li{margin-bottom:6px}

.section{padding:40px 0;color:#dbe9ff}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.card{background:var(--glass);padding:18px;border-radius:10px}
.projects{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.proj{background:rgba(255,255,255,0.02);padding:14px;border-radius:8px}

.site-footer{padding:28px 0;border-top:1px solid rgba(255,255,255,0.03);color:var(--muted)}

@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.nav{float:none;margin-top:12px}.grid-3{grid-template-columns:1fr}.projects{grid-template-columns:1fr}}