/* ===== Theme tokens ===== */
:root,
html[data-theme="light"]{
  --ink:#171717;
  --on-primary:#ffffff;
  --canvas:#fafafa;
  --canvas-elevated:#ffffff;
  --hairline-soft:#f2f2f2;
  --body:#4d4d4d;
  --mute:#8f8f8f;
  --faint:#a1a1a1;
  --hairline:#ebebeb;
  --link:#0070f3;
  --link-deep:#0761d1;
  --link-soft:#d3e5ff;
  --shadow-1:0px 1px 1px rgba(0,0,0,0.04);
  --shadow-2:0px 2px 2px rgba(0,0,0,0.04),0px 8px 16px -4px rgba(0,0,0,0.08);
  --overlay:rgba(250,250,250,0.85);
  --glass-bg:rgba(255,255,255,0.55);
  --glass-border:rgba(255,255,255,0.6);
  --glass-highlight:rgba(255,255,255,0.9);
  --glass-shadow:0px 1px 1px rgba(255,255,255,0.7) inset, 0px -1px 1px rgba(0,0,0,0.04) inset, 0px 12px 32px -8px rgba(0,0,0,0.14), 0px 2px 8px rgba(0,0,0,0.06);
  color-scheme:light;
}
html[data-theme="dark"]{
  --ink:#fafafa;
  --on-primary:#0a0a0a;
  --canvas:#0a0a0a;
  --canvas-elevated:#141414;
  --hairline-soft:#1a1a1a;
  --body:#b3b3b3;
  --mute:#8a8a8a;
  --faint:#666666;
  --hairline:#272727;
  --link:#3291ff;
  --link-deep:#65b3ff;
  --link-soft:#0c2a4d;
  --shadow-1:0px 1px 1px rgba(0,0,0,0.4);
  --shadow-2:0px 2px 2px rgba(0,0,0,0.3),0px 8px 24px -4px rgba(0,0,0,0.6);
  --overlay:rgba(10,10,10,0.85);
  --glass-bg:rgba(20,20,20,0.5);
  --glass-border:rgba(255,255,255,0.12);
  --glass-highlight:rgba(255,255,255,0.16);
  --glass-shadow:0px 1px 1px rgba(255,255,255,0.08) inset, 0px -1px 1px rgba(0,0,0,0.3) inset, 0px 12px 32px -8px rgba(0,0,0,0.5), 0px 2px 8px rgba(0,0,0,0.3);
  color-scheme:dark;
}
:root{
  --violet:#7928ca; --cyan:#50e3c2; --pink:#ff0080; --magenta:#eb367f;
  --dev-start:#007cf0; --dev-end:#00dfd8;
  --pre-start:#7928ca; --pre-end:#ff0080;
  --ship-start:#ff4d4d; --ship-end:#f9cb28;
  --r-sm:6px; --r-md:12px; --r-lg:16px; --r-pill-cat:64px; --r-pill:100px; --r-full:9999px;
  --sp-xxs:4px; --sp-xs:8px; --sp-sm:12px; --sp-md:16px; --sp-lg:24px; --sp-xl:32px;
  --sp-2xl:40px; --sp-3xl:64px; --sp-4xl:96px; --sp-section:128px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',Arial,sans-serif;
  background:var(--canvas);
  color:var(--ink);
  font-size:14px;
  line-height:20px;
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease, color .2s ease;
}
.mono{font-family:'JetBrains Mono','IBM Plex Mono',monospace;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:1200px; margin:0 auto; padding:0 var(--sp-lg);}
section{padding:var(--sp-4xl) 0;}
:focus-visible{outline:2px solid var(--link); outline-offset:2px;}

/* ===== NAV (liquid glass) ===== */
header.nav-bar{
  position:sticky; top:0; z-index:100;
  background:transparent;
  padding:var(--sp-sm) var(--sp-lg) 0;
  pointer-events:none;
}
header.nav-bar::before{ content:none; }
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 10px 10px 18px;
  max-width:1140px; margin:0 auto;
  pointer-events:auto;
  position:relative;
  border-radius:var(--r-full);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  box-shadow:var(--glass-shadow);
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nav-inner::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 40%);
  opacity:0.5; mix-blend-mode:overlay;
}

.wordmark{display:flex; align-items:center; gap:var(--sp-xs); font-weight:600; font-size:14px; letter-spacing:-0.28px;}
.wordmark img{width:28px; height:28px; border-radius:var(--r-full); object-fit:cover; border:1px solid var(--hairline);}
nav.links{display:flex; gap:var(--sp-xs);}
.nav-link{
  color:var(--body); font-size:14px; padding:var(--sp-xs) var(--sp-sm);
  border-radius:var(--r-full); transition:background .15s ease, color .15s ease;
}
.nav-link:hover{background:var(--hairline-soft); color:var(--ink);}
.nav-link.active{color:var(--ink); background:var(--hairline-soft);}
.nav-actions{display:flex; gap:var(--sp-xs); align-items:center;}
.btn-ghost-sm{
  background:var(--canvas-elevated); color:var(--ink);
  border:1px solid var(--hairline); font-size:14px; font-weight:500;
  border-radius:var(--r-sm); padding:8px 12px; cursor:pointer;
}
.btn-primary-sm{
  background:var(--ink); color:var(--on-primary);
  font-size:14px; font-weight:500; border:none;
  border-radius:var(--r-sm); padding:8px 12px; cursor:pointer;
}
.theme-toggle{
  width:32px; height:32px; border-radius:var(--r-sm); border:1px solid var(--hairline);
  background:var(--canvas-elevated); color:var(--ink); display:flex; align-items:center;
  justify-content:center; cursor:pointer; flex-shrink:0;
}
.theme-toggle svg{width:16px; height:16px;}
.theme-toggle .icon-moon{display:none;}
html[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
html[data-theme="dark"] .theme-toggle .icon-moon{display:block;}

.menu-trigger{
  display:none; background:var(--canvas-elevated); border:1px solid var(--hairline);
  border-radius:var(--r-sm); padding:8px 10px; font-size:14px; cursor:pointer;
  width:36px; height:36px; align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.menu-trigger span{display:block; width:16px; height:1.5px; background:var(--ink); border-radius:1px; transition:transform .2s ease, opacity .2s ease;}
.menu-trigger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.menu-trigger.open span:nth-child(2){opacity:0;}
.menu-trigger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

.mobile-menu{
  display:none; position:fixed; left:var(--sp-sm); right:var(--sp-sm); top:calc(64px + var(--sp-sm)); z-index:99;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--glass-shadow);
  border-radius:var(--r-lg);
  padding:var(--sp-md) var(--sp-md) var(--sp-lg);
  flex-direction:column; gap:var(--sp-xs);
  opacity:0; transform:translateY(-8px); transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
  max-height:calc(100vh - 84px); overflow-y:auto;
}
.mobile-menu.open{display:flex; opacity:1; transform:translateY(0); pointer-events:auto;}
.mobile-menu a.nav-link{
  font-size:20px; padding:14px 8px; border-bottom:1px solid var(--hairline); border-radius:0;
}
.mobile-menu .mobile-actions{display:flex; gap:var(--sp-sm); margin-top:var(--sp-lg);}
.mobile-menu .mobile-actions .btn-primary-sm,
.mobile-menu .mobile-actions .btn-ghost-sm{flex:1; text-align:center; padding:12px; font-size:15px;}

/* ===== HERO ===== */
.hero-band{
  position:relative; overflow:hidden;
  padding:var(--sp-section) var(--sp-lg) var(--sp-4xl);
  text-align:center;
}
.mesh{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 18% 20%, rgba(0,124,240,0.30), transparent 42%),
    radial-gradient(circle at 82% 15%, rgba(80,227,194,0.28), transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(121,40,202,0.28), transparent 45%),
    radial-gradient(circle at 25% 78%, rgba(255,0,128,0.22), transparent 45%),
    radial-gradient(circle at 50% 45%, rgba(249,203,40,0.18), transparent 55%);
  filter:blur(40px);
  opacity:0.85;
}
html[data-theme="dark"] .mesh{opacity:0.35;}
.hero-content{position:relative; z-index:1; max-width:760px; margin:0 auto;}
.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--mute);
  display:inline-flex; align-items:center; gap:8px;
  background:var(--canvas-elevated); border:1px solid var(--hairline);
  padding:6px 14px; border-radius:var(--r-pill-cat); margin-bottom:var(--sp-lg);
}
.hero-avatar{
  width:96px; height:96px; border-radius:var(--r-full);
  border:1px solid var(--hairline); object-fit:cover; margin:0 auto var(--sp-lg);
  background:var(--canvas-elevated);
}
h1.display{
  font-size:48px; font-weight:600; line-height:48px; letter-spacing:-2.4px;
  margin-bottom:var(--sp-md);
}
.hero-sub{
  font-size:16px; line-height:24px; color:var(--body); max-width:600px;
  margin:0 auto var(--sp-xl);
}
.hero-ctas{display:flex; gap:var(--sp-sm); justify-content:center; flex-wrap:wrap;}
.btn-primary{
  background:var(--ink); color:var(--on-primary); font-size:16px; font-weight:500;
  border:none; border-radius:var(--r-pill); padding:12px 22px; display:inline-block; cursor:pointer;
}
.btn-secondary{
  background:var(--canvas-elevated); color:var(--ink); font-size:16px; font-weight:500;
  border:1px solid var(--hairline); border-radius:var(--r-pill); padding:12px 22px; display:inline-block;
}

/* ===== SECTION HEADERS ===== */
.section-head{margin-bottom:var(--sp-2xl); text-align:center;}
.section-head .eyebrow{margin-bottom:var(--sp-sm);}
h2.heading-lg{font-size:32px; font-weight:600; line-height:40px; letter-spacing:-1.28px;}
.section-sub{color:var(--body); font-size:16px; margin-top:var(--sp-sm); max-width:560px; margin-left:auto; margin-right:auto;}
.section-head-row{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--sp-2xl); text-align:left; flex-wrap:wrap; gap:var(--sp-md);}
.section-head-row .eyebrow{margin-bottom:var(--sp-sm);}

/* ===== FACTS STRIP ===== */
.facts-strip{
  background:var(--canvas); padding:var(--sp-xl) var(--sp-lg);
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}
.facts-grid{
  max-width:1200px; margin:0 auto; display:grid;
  grid-template-columns:repeat(4,1fr); gap:var(--sp-lg); text-align:center;
}
.fact-num{font-size:24px; font-weight:600; letter-spacing:-0.8px;}
.fact-label{font-size:12px; color:var(--mute); text-transform:uppercase; letter-spacing:0.06em; font-family:'JetBrains Mono',monospace; margin-top:4px;}

/* ===== EDUCATION ===== */
.edu-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-lg);}
.card{
  background:var(--canvas-elevated); border:1px solid var(--hairline);
  border-radius:var(--r-md); padding:var(--sp-lg);
  box-shadow:var(--shadow-1);
}
.card-eyebrow{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--mute); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px;}
.card h3{font-size:20px; font-weight:600; letter-spacing:-0.4px; line-height:28px; margin-bottom:4px;}
.card .meta{color:var(--body); font-size:14px; margin-bottom:8px;}
.badge{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:12px;
  background:var(--link-soft); color:var(--link-deep); padding:4px 10px; border-radius:var(--r-full);
}

/* ===== SKILLS ===== */
.skills-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-lg);}
.skill-card h3{font-size:16px; font-weight:600; margin-bottom:var(--sp-sm); display:flex; align-items:center; gap:8px;}
.pill-tag{
  display:inline-block; font-size:13px; background:var(--hairline-soft); color:var(--ink);
  padding:6px 12px; border-radius:var(--r-full); margin:0 6px 6px 0; border:1px solid var(--hairline);
}

/* ===== PROJECTS ===== */
.projects-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-lg);}
.projects-grid.two-col{grid-template-columns:repeat(2,1fr);}
a.project-card{
  background:var(--canvas-elevated); border:1px solid var(--hairline); border-radius:var(--r-md);
  padding:var(--sp-lg); display:flex; flex-direction:column; gap:var(--sp-sm);
  box-shadow:var(--shadow-1); transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
a.project-card:hover{box-shadow:var(--shadow-2); transform:translateY(-2px); border-color:var(--faint);}
.project-top{display:flex; align-items:center; gap:var(--sp-sm);}
.project-icon{width:40px; height:40px; border-radius:var(--r-sm); border:1px solid var(--hairline); object-fit:cover; background:var(--hairline-soft);}
a.project-card h3{font-size:16px; font-weight:600; letter-spacing:-0.2px; color:var(--ink);}
.project-desc{color:var(--body); font-size:14px; line-height:20px; flex-grow:1;}
.project-cta{
  font-size:13px; font-weight:500; color:var(--link); margin-top:auto;
  display:flex; align-items:center; gap:4px;
}
.view-all-card{
  background:var(--hairline-soft); border:1px dashed var(--hairline); border-radius:var(--r-md);
  padding:var(--sp-lg); display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:var(--sp-sm); min-height:100%;
}
.view-all-card h3{font-size:16px; font-weight:600;}
.view-all-card p{font-size:14px; color:var(--body);}

.link-chip{
  font-size:13px; font-weight:500; padding:6px 12px; border-radius:var(--r-sm);
  border:1px solid var(--hairline); background:var(--canvas-elevated); color:var(--ink);
  display:inline-block;
}
.link-chip.accent{background:var(--ink); color:var(--on-primary); border-color:var(--ink);}
.project-links{display:flex; gap:var(--sp-xs); margin-top:auto;}

/* ===== PROJECT DETAIL PAGE ===== */
.project-hero{
  padding:var(--sp-3xl) var(--sp-lg) var(--sp-2xl); border-bottom:1px solid var(--hairline);
  position:relative; overflow:hidden;
}
.project-hero-inner{max-width:800px; margin:0 auto; position:relative; z-index:1;}
.breadcrumb{font-size:13px; color:var(--mute); margin-bottom:var(--sp-lg); display:flex; gap:6px; align-items:center;}
.breadcrumb a{color:var(--mute);}
.breadcrumb a:hover{color:var(--ink);}
.project-hero-top{display:flex; align-items:center; gap:var(--sp-md); margin-bottom:var(--sp-md);}
.project-hero-icon{width:56px; height:56px; border-radius:var(--r-md); border:1px solid var(--hairline); object-fit:cover; background:var(--canvas-elevated);}
.project-hero h1{font-size:32px; font-weight:600; letter-spacing:-1.28px; line-height:40px;}
.project-hero .hero-sub{margin:0; text-align:left; max-width:700px;}
.project-hero-ctas{display:flex; gap:var(--sp-sm); margin-top:var(--sp-xl); flex-wrap:wrap;}
.project-detail-body{max-width:800px; margin:0 auto; padding:var(--sp-3xl) var(--sp-lg);}
.detail-block{margin-bottom:var(--sp-2xl);}
.detail-block h2{font-size:20px; font-weight:600; letter-spacing:-0.4px; margin-bottom:var(--sp-sm);}
.detail-block p{color:var(--body); font-size:15px; line-height:24px;}
.detail-image{border:1px solid var(--hairline); border-radius:var(--r-md); overflow:hidden; margin-bottom:var(--sp-2xl); box-shadow:var(--shadow-1);}
.project-nav-footer{
  display:flex; justify-content:space-between; align-items:center; padding-top:var(--sp-xl);
  border-top:1px solid var(--hairline); gap:var(--sp-md); flex-wrap:wrap;
}

/* ===== CTA / CONTACT ===== */
.cta-band{
  background:var(--canvas); text-align:center; padding:var(--sp-4xl) var(--sp-lg);
  border-top:1px solid var(--hairline);
}
.contact-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-md);
  max-width:640px; margin:var(--sp-xl) auto 0;
}
.contact-item{
  display:flex; align-items:center; gap:10px; padding:var(--sp-sm) var(--sp-md);
  border:1px solid var(--hairline); border-radius:var(--r-sm); background:var(--canvas-elevated);
  font-size:14px; text-align:left;
}
.contact-item .dot{width:8px; height:8px; border-radius:50%; background:var(--link); flex-shrink:0;}

/* ===== FOOTER ===== */
footer{
  background:var(--canvas); border-top:1px solid var(--hairline);
  padding:var(--sp-3xl) var(--sp-lg); text-align:center; color:var(--mute); font-size:13px;
}
footer .socials{display:flex; justify-content:center; gap:var(--sp-sm); margin-bottom:var(--sp-md);}
footer .socials a{
  width:36px; height:36px; border-radius:var(--r-full); border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center; color:var(--ink); font-size:14px;
  background:var(--canvas-elevated);
}

@media (max-width:900px){
  .skills-grid{grid-template-columns:repeat(2,1fr);}
  .projects-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  nav.links{display:none;}
  .menu-trigger{display:flex;}
  h1.display{font-size:34px; line-height:38px; letter-spacing:-1.6px;}
  .facts-grid{grid-template-columns:repeat(2,1fr);}
  .edu-grid, .skills-grid, .projects-grid, .contact-grid, .projects-grid.two-col{grid-template-columns:1fr;}
  .hero-ctas{flex-direction:column; align-items:stretch;}
  .nav-actions .btn-ghost-sm, .nav-actions .btn-primary-sm{display:none;}
  .nav-actions{gap:var(--sp-xs);}
  .project-hero-top{align-items:flex-start;}
}