:root{--bg:#0b0c10;--panel:#11131a;--text:#e8eaf0;--muted:#b7bccb;--accent:#3aa0ff;--border:rgba(232,234,240,.12);--r:16px;--max:1100px;}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:linear-gradient(180deg,#08090e,var(--bg));color:var(--text);line-height:1.55}
a{color:inherit;text-decoration:none}a:hover{color:var(--text)}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:rgba(11,12,16,.72);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:14px}
.brand{display:flex;align-items:center;gap:12px;font-weight:650;letter-spacing:.2px}
.mark{width:36px;height:36px;border-radius:12px;border:1px solid var(--border);background:linear-gradient(135deg,rgba(58,160,255,.22),rgba(232,234,240,.08));display:grid;place-items:center;font-size:14px}
.navlinks{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.navlinks a{padding:8px 10px;border-radius:12px;color:var(--muted);border:1px solid transparent}
.navlinks a.active{color:var(--text);border-color:var(--border);background:rgba(232,234,240,.05)}
.navlinks a[href="/"]:not(.active){border-color: rgba(232,234,240,.08);background: rgba(232,234,240,.02);}
.hero{padding:60px 0 26px}.kicker{color:var(--muted);font-weight:600;letter-spacing:.25px}
h1{margin:10px 0 10px;font-size:clamp(30px,4vw,44px);line-height:1.12}.lead{color:var(--muted);font-size:18px;max-width:70ch;margin:0}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;border:1px solid var(--border);background:rgba(232,234,240,.05);color:var(--text)}
.btn.primary{border-color:rgba(58,160,255,.45);background:linear-gradient(135deg,rgba(58,160,255,.24),rgba(232,234,240,.06))}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;padding:18px 0 60px}
.card{border:1px solid var(--border);background:rgba(17,19,26,.72);border-radius:var(--r);padding:16px;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.card h3{margin:0 0 6px;font-size:16px}.card p{margin:0;color:var(--muted)}
.span-4{grid-column:span 4}.span-6{grid-column:span 6}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
.mobile{display:none}@media(max-width:900px){.span-4,.span-6,.span-8{grid-column:span 12}.navlinks{display:none}.mobile{display:block}}
details.mobile summary{list-style:none;cursor:pointer;padding:8px 10px;border-radius:12px;border:1px solid var(--border);background:rgba(232,234,240,.05)}
details.mobile .panel{margin-top:10px;display:grid;gap:8px}details.mobile a{padding:10px 12px;border:1px solid var(--border);border-radius:14px;color:var(--muted);background:rgba(232,234,240,.03)}details.mobile a.active{color:var(--text)}
.meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:14px}.pill{border:1px solid var(--border);border-radius:999px;padding:6px 10px;background:rgba(232,234,240,.04)}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}@media(max-width:900px){.project-grid{grid-template-columns:1fr}}
footer{border-top:1px solid var(--border);padding:24px 0;color:var(--muted)}.small{font-size:13px;color:var(--muted)}hr.sep{border:none;border-top:1px solid var(--border);margin:18px 0}