:root{
  --bg:#050815;
  --panel:#0b1022;
  --ink:#e8eefc;
  --muted:#9fb0cf;
  --brand:#6aa8ff;
  --brand2:#66ffe3;
  --chip:#101733;
  --card:#0a1028;
  --glow:0 0 1px rgba(102,255,227,.4), 0 0 12px rgba(102,255,227,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 400px at 70% -10%, rgba(106,168,255,.18),transparent 60%), radial-gradient(900px 500px at 5% 10%, rgba(102,255,227,.12),transparent 60%), var(--bg);color:var(--ink);font-family:Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial}
a{color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
/* Glassy topbar */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,16,40,.6);backdrop-filter: blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.6px}
.logo .swirl{width:18px;height:18px;border-radius:50%;background:conic-gradient(from 0deg, var(--brand), var(--brand2), var(--brand));box-shadow:0 0 16px rgba(106,168,255,.4)}
.nav a{opacity:.9;text-decoration:none;margin-left:18px;font-size:14px}
.nav a:hover{opacity:1}
/* Hero */
.hero{position:relative;padding:68px 0 28px}
.hero .grid{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:center}
.hero h1{font-size:48px;line-height:1.08;margin:10px 0 6px}
.hero p.lead{color:var(--muted);font-size:18px;margin:6px 0 18px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 18px}
.badge{background:linear-gradient(180deg,#0b1438,#09102c);border:1px solid rgba(255,255,255,.08);padding:6px 10px;border-radius:10px;font-size:12px;box-shadow:var(--glow)}
.cta{display:flex;gap:12px;align-items:center;margin-top:8px}
.btn{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#071026;border:none;border-radius:12px;padding:12px 16px;font-weight:800;cursor:pointer;text-decoration:none;box-shadow:0 12px 30px rgba(106,168,255,.25)}
.btn.secondary{background:#0f1738;color:var(--ink);border:1px solid rgba(255,255,255,.12)}
.hero .media{position:relative;border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.hero img{display:block;width:100%;height:auto}
.hero .portrait{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,#0b1022,#0a0f20);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:12px;box-shadow:var(--glow)}
.hero .portrait img{width:84px;height:84px;border-radius:14px;border:1px solid rgba(255,255,255,.14)}
.hero .portrait .name{font-weight:900}
/* Section */
.section{padding:46px 0}
.section h2{font-size:28px;margin:0 0 6px}
.section p.sub{color:var(--muted);margin:0 0 16px}
/* Skills grid */
.skills{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.skill-card{grid-column:span 6;background:linear-gradient(180deg,var(--card),#0b1130);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;display:grid;grid-template-columns:1.15fr 1.6fr;box-shadow:var(--glow)}
.skill-card img{width:100%;height:100%;object-fit:cover}
.skill-card .body{padding:16px}
.skill-card h3{margin:0 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#0e1736;border:1px solid rgba(255,255,255,.08);padding:4px 10px;border-radius:999px;font-size:12px}
/* Timeline */
.timeline{position:relative;margin-top:10px}
.timeline:before{content:"";position:absolute;left:18px;top:0;bottom:0;width:2px;background:linear-gradient(var(--brand),var(--brand2))}
.ti{position:relative;padding-left:48px;margin:14px 0}
.ti .dot{position:absolute;left:11px;top:4px;width:14px;height:14px;border-radius:50%;background:conic-gradient(from 0deg, var(--brand), var(--brand2), var(--brand));box-shadow:0 0 0 4px rgba(106,168,255,.18)}
.ti .row{display:flex;align-items:baseline;gap:10px}
.ti .role{font-weight:900}
.ti .when{color:var(--muted);font-size:13px}
.ti .place{color:var(--muted);font-size:13px}
.ti ul{margin:8px 0 0;padding-left:16px;color:#d7dff0}
/* Projects */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{grid-column:span 4;background:linear-gradient(180deg,var(--card),#0b1130);border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--glow)}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card .body{padding:12px 14px}
.card .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.card .tag{font-size:11px;background:#0e1736;border:1px solid rgba(255,255,255,.08);padding:3px 8px;border-radius:999px}
/* Contact and Resumes */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.box{background:linear-gradient(180deg,var(--card),#0b1130);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px;box-shadow:var(--glow)}
.mini{color:var(--muted);font-size:13px}
.resume-links a{display:inline-block;margin:6px 8px 0 0;padding:7px 12px;border-radius:999px;text-decoration:none;background:#0e1736;border:1px solid rgba(255,255,255,.12)}
/* Footer */
footer{padding:24px 0;color:var(--muted);text-align:center;border-top:1px solid rgba(255,255,255,.06)}

/* THEME VARIANTS */
:root[data-theme="light"]{
  --bg:#f6f8fc;
  --panel:#ffffff;
  --ink:#131729;
  --muted:#4c5a73;
  --brand:#2f6dff;
  --brand2:#00bcd4;
  --chip:#eef2fb;
  --card:#ffffff;
  --glow:none;
}
:root[data-theme="light"] .nav{background:rgba(255,255,255,.8);border-bottom:1px solid rgba(0,0,0,.06)}
:root[data-theme="light"] .logo .swirl{box-shadow:none}
:root[data-theme="light"] .hero .portrait{background:#fff;border-color:rgba(0,0,0,.06)}
:root[data-theme="light"] .badge{background:#eef2fb;border-color:rgba(0,0,0,.06)}
:root[data-theme="light"] .btn.secondary{background:#eef2fb;color:#131729;border:1px solid rgba(0,0,0,.08)}
:root[data-theme="light"] .skill-card,
:root[data-theme="light"] .card,
:root[data-theme="light"] .box{background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:none}
:root[data-theme="light"] .timeline:before{background:linear-gradient(var(--brand),var(--brand2))}
:root[data-theme="light"] .ti .dot{box-shadow:none}
:root[data-theme="light"] footer{border-top:1px solid rgba(0,0,0,.08)}

/* Responsive */
@media (max-width: 1000px){
  .hero .grid{grid-template-columns:1fr}
  .skills .skill-card{grid-column:span 12}
  .card{grid-column:span 6}
  .contact{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .card{grid-column:span 12}
}


/* Light-mode contrast fixes */
:root[data-theme="light"] .badge,
:root[data-theme="light"] .chip,
:root[data-theme="light"] .card .tag{
  background:#eef2fb;
  border-color:#dbe3f5;
  color:#0b1330;
}
:root[data-theme="light"] .resume-links a{
  background:#eef2fb;
  border:1px solid rgba(0,0,0,.12);
  color:#0b1330;
}
:root[data-theme="light"] .mini,
:root[data-theme="light"] .hero .mini{
  color:#4c5a73;
}
:root[data-theme="light"] .card .body strong{
  color:#0b1330;
}
:root[data-theme="light"] .btn{
  color:#071026;
}
:root[data-theme="light"] .contact .box a{
  color:#0b1330;
  text-decoration: underline;
  text-underline-offset: 2px;
}