:root{
  --bg:#0b0c10; --fg:#e5e7eb; --muted:#9ca3af; --accent:#60a5fa; --card:#111827;
  --max: 960px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji","Segoe UI Emoji"; background:var(--bg); color:var(--fg)}
a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
a:focus, button:focus{outline:2px dashed var(--accent); outline-offset:2px}
header{padding:64px 20px 24px; border-bottom:1px solid #1f2937; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 60%)}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
h1{font-size:clamp(28px,5vw,44px); line-height:1.15; margin:0 0 8px}
h2{font-size:clamp(22px,3vw,28px); margin:0 0 8px}
h3{font-size:clamp(18px,2.5vw,22px); margin:0 0 6px}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.lead{color:var(--muted); max-width:60ch; margin:6px 0 0}
nav{display:flex; gap:16px; margin-top:16px; flex-wrap:wrap}
nav a{padding:6px 10px; border-radius:999px; background:#111; text-decoration:none}
main{padding:32px 0 80px}
.section{padding:48px 0; border-top:1px solid #1f2937}
.grid{display:grid; gap:16px}
.projects{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
.card{background:var(--card); border:1px solid #1f2937; padding:16px; border-radius:14px}
.card:hover{border-color:#374151}
.badge{display:inline-block; font-size:12px; padding:2px 8px; border:1px solid #374151; border-radius:999px; color:var(--muted); margin-right:6px}
footer{padding:24px 20px; border-top:1px solid #1f2937; color:var(--muted)}
.btn{display:inline-block; background:var(--accent); color:#081018; padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:600}
.btn:hover{filter:brightness(1.05)}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
img{max-width:100%; height:auto; display:block; border-radius:10px; border:1px solid #1f2937}
.placeholder{background:linear-gradient(135deg,#1f2937,#0f172a); aspect-ratio:16/9; border-radius:10px; border:1px solid #1f2937}
.meta{font-size:14px; color:var(--muted)}
ul.meta{list-style:none; padding:0; margin:6px 0 0; display:flex; gap:10px; flex-wrap:wrap}
hr.sep{border:0; border-top:1px solid #1f2937; margin:24px 0}
/* Small enhancements */
.project h3 a{text-decoration:none}
.project h3 a:hover{ text-decoration:underline }
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 24px;
  padding: 24px;
  border-radius: 16px;
}
.icon-btn {
  display: grid;
  place-items: center;
  gap: 10px;
  height: 120px;
  border-radius: 14px;
  background: #2a2f3a;
  border: 1px solid #1f2937;
  color: #fff; text-decoration: none;
}
.icon-btn:hover { border-color: #374151; transform: translateY(-1px); }
.icon-btn svg { width: 40px; height: 40px; }
.icon-label { font-size: 14px; color: var(--muted); font-weight: 600; }