:root {
  --bg: #080910;
  --bg-2: #0f111a;
  --panel: #0f1118;
  --text: #e5e7eb;
  --muted: #a3abb8;
  --accent: #6aa8ff;
  --accent-2: #34d399;
  --accent-3: #9b8bff;
  --border: #1f2430;
  --radius: 12px;
  --shadow: 0 16px 60px rgba(0,0,0,0.45);
  --glow: 0 0 0 1px rgba(106,168,255,0.2), 0 20px 60px rgba(106,168,255,0.12);
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: radial-gradient(circle at 20% 20%, rgba(106,168,255,0.08), transparent 38%),
              radial-gradient(circle at 80% 10%, rgba(52,211,153,0.07), transparent 36%),
              radial-gradient(circle at 50% 90%, rgba(155,139,255,0.07), transparent 40%),
              linear-gradient(145deg, var(--bg), var(--bg-2));
  color: var(--text);
  font: 16px/1.65 "Inter", "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  min-height: 100%;
}

h1, h2, h3 {
  font-family: "Source Serif 4", ui-serif, Georgia, serif;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; margin: 0 0 6px 0; }
h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; margin: 0 0 10px 0; }
h3 { font-size: clamp(18px, 1.8vw, 20px); line-height: 1.35; margin: 0 0 6px 0; }

section { scroll-margin-top: 80px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.top {
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(180%) blur(10px);
  background: rgba(8,9,16,0.82);
  z-index: 10;
}

nav {
  max-width: 980px;
  margin: auto;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e9ecf5;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  box-shadow: var(--glow);
}

.links a {
  margin-left: var(--space-3);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid transparent;
  transition: all 140ms ease;
}
.links a:hover, .links a:focus-visible {
  background: rgba(255,255,255,0.06);
  border-color: rgba(96,165,250,0.35);
  outline: none;
  transform: translateY(-1px);
}
.links a.active { color: var(--accent); background: rgba(96,165,250,0.12); }

/* Mobile nav */
.menu-toggle { display: none; background: #121318; color: var(--text); border: 1px solid var(--border); padding: 8px 10px; border-radius: 8px; }
@media (max-width: 820px){
  .menu-toggle{display:inline-block}
  .links{position:absolute;left:0;right:0;top:56px;background:#0e1016;border-bottom:1px solid var(--border);display:none;flex-direction:column;gap:8px;padding:12px 18px}
  .links.open{display:flex}
  nav{position:relative}
  .links a{margin:0;padding:8px 10px}
}

.hero {
  max-width: 980px;
  margin: 32px auto 0;
  padding: 28px 18px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(96,165,250,0.08), rgba(52,211,153,0.06), rgba(155,139,255,0.04));
  border: 1px solid rgba(96,165,250,0.22);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero::before { background: radial-gradient(circle at 20% 30%, rgba(106,168,255,0.16), transparent 45%); mix-blend-mode: screen; }
.hero::after  { background: radial-gradient(circle at 80% 10%, rgba(52,211,153,0.14), transparent 40%); mix-blend-mode: screen; }

.tag { color: var(--accent); font-weight: 600; margin: .25rem 0 0; }

section {
  max-width: 980px;
  margin: 28px auto;
  padding: 0 18px;
  position: relative;
}
section h2 { display: inline-block; padding-bottom: 6px; border-bottom: 2px solid rgba(96,165,250,0.5); }

.affil{color: var(--muted);}

.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:center}
.hero-photo{display:flex;justify-content:center}
.avatar{width:260px;max-width:100%;border-radius:14px;border:1px solid var(--border);box-shadow:0 8px 22px rgba(0,0,0,.35)}
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-photo{order:-1;margin-bottom:12px}
  .avatar{width:180px}
}

.projects-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width: 900px){ .projects-grid{grid-template-columns:1fr 1fr} }
.project{
  background:linear-gradient(160deg, rgba(255,255,255,0.02), rgba(255,255,255,0.05));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.project::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 20% 20%,rgba(106,168,255,0.12),transparent 45%);opacity:0;transition:opacity 180ms ease;pointer-events:none}
.project:hover::after{opacity:1}

ul, ol { padding-left: 18px; }

.post-list{list-style:none;padding:0;margin:10px 0;display:flex;flex-direction:column;gap:10px}
.post-list li{background:linear-gradient(160deg, rgba(255,255,255,0.02), rgba(255,255,255,0.05));border:1px solid rgba(255,255,255,0.05);border-radius:12px;padding:12px;box-shadow:var(--shadow)}
.post-list .date{display:inline-block;color:var(--muted);font-size:12px;margin-right:8px}
.post-list a{font-weight:600}
.post-list .desc{display:block;color:var(--muted)}
.blog-cta{margin-top:12px}

.btn{display:inline-block;border:1px solid var(--border);padding:10px 14px;border-radius:12px;color:var(--text);margin-right:10px;background:rgba(255,255,255,0.04);box-shadow:0 10px 30px rgba(0,0,0,0.25);transition:transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease}
.btn:hover,.btn:focus-visible{transform:translateY(-1px);border-color:rgba(106,168,255,0.4);box-shadow:var(--glow);text-decoration:none}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));border:none;color:#0b0c10;font-weight:700;box-shadow:0 10px 30px rgba(96,165,250,0.35)}
.affil{color:var(--muted);margin:.25rem 0 0}
.badges{margin-top:6px;display:flex;gap:8px}
.badge{display:inline-block;border:1px solid var(--border);padding:2px 8px;border-radius:999px;font-size:12px;color:var(--muted)}

.news-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
@media (min-width: 900px){ .news-grid{grid-template-columns:1fr 1fr} }
.news-article{border:1px solid rgba(255,255,255,0.05);padding:16px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.05));box-shadow:var(--shadow);position:relative;overflow:hidden}
.news-article::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(96,165,250,0.12),rgba(52,211,153,0.08));opacity:0;transition:opacity 180ms ease;pointer-events:none}
.news-article:hover::before{opacity:1}
.news-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:8px}
.news-header h3{margin:0;font-size:18px;line-height:1.4;flex:1}
.news-date{color:var(--muted);font-size:14px;white-space:nowrap}
.news-article p{margin:0;color:var(--text);line-height:1.6}
.news-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.news-meta a{color:var(--accent)}

.project{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid transparent}
.project:last-child{border-bottom:none}
.project h3{margin:0 0 8px 0;font-size:18px;color:var(--text)}
.tech-stack{color:var(--muted);font-size:13px;margin:0 0 12px 0;font-style:italic}
.project ul{margin:0;padding-left:20px;color:var(--text)}
.project li{margin-bottom:8px;line-height:1.6}
.project-links{margin-top:12px;color:var(--accent);font-size:14px}
.project-links a{color:var(--accent);text-decoration:none;margin-right:16px}
.project-links a:hover{text-decoration:underline}

footer {
  border-top: 1px solid var(--border);
  padding: 18px;
  text-align: center;
  color: var(--muted);
}