:root{
  --bg:#0a0a0b;
  --bg-soft:#101012;
  --line:#1f1f22;
  --text:#f2f2f0;
  --text-dim:#9a9a9e;
  --text-faint:#5a5a5e;
  --accent:#2dd4ff;
  --accent-dim:#17717f;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:var(--font-mono);}

a{color:inherit; text-decoration:none;}
ul{list-style:none;}

::selection{background:var(--accent); color:#000;}

/* ===== Loader ===== */
#loader{
  position:fixed; inset:0; background:var(--bg);
  z-index:1000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px;
  transition:opacity .8s ease, visibility .8s ease;
}
#loader.hidden{opacity:0; visibility:hidden;}
.loader-mark{font-family:var(--font-display); font-size:14px; letter-spacing:.3em; color:var(--text-dim);}
.loader-bar{width:160px; height:1px; background:var(--line); overflow:hidden;}
.loader-bar span{display:block; width:0%; height:100%; background:var(--accent); animation:load 1.6s ease forwards;}
@keyframes load{to{width:100%;}}

/* ===== Canvas ===== */
#scene{
  position:fixed; top:0; left:0;
  width:100%; height:100%;
  z-index:1;
  pointer-events:none;
}

/* ===== Nav ===== */
.nav{
  position:fixed; top:0; left:0; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 48px;
  z-index:100;
  mix-blend-mode:difference;
}
.nav-mark{font-family:var(--font-display); font-weight:600; font-size:14px; letter-spacing:.2em;}
.nav-links{display:flex; gap:36px;}
.nav-links a{font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; color:var(--text-dim); transition:color .3s;}
.nav-links a:hover{color:var(--text);}
.nav-founder{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.05em;
  color:var(--accent); border:1px solid var(--accent-dim);
  padding:7px 14px; border-radius:100px;
  white-space:nowrap; flex-shrink:0; transition:background .3s, color .3s;
}
.nav-founder:hover{background:var(--accent); color:#000;}
.nav-loc{font-family:var(--font-mono); font-size:12px; color:var(--text-dim); display:flex; align-items:center; gap:8px;}
.dot{width:5px; height:5px; border-radius:50%; background:var(--accent); display:inline-block;}

/* ===== Layout shells ===== */
main{position:relative; z-index:2;}

/* ===== Hero ===== */
.hero{
  height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:0 24px;
}
.eyebrow{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:24px;
}
.hero-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(40px, 7vw, 92px);
  line-height:1.05;
  letter-spacing:-.02em;
}
.hero-sub{
  margin-top:24px;
  font-size:clamp(14px,1.6vw,18px);
  color:var(--text-dim);
  font-weight:300;
}
.scroll-cue{
  position:absolute; bottom:48px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em;
  color:var(--text-faint); text-transform:uppercase;
}
.scroll-line{width:1px; height:40px; background:var(--line); position:relative; overflow:hidden;}
.scroll-line i{position:absolute; top:-40px; left:0; width:100%; height:40px; background:var(--accent); animation:scrollline 2s ease-in-out infinite;}
@keyframes scrollline{
  0%{top:-40px;} 50%{top:40px;} 50.01%{top:-40px;} 100%{top:40px;}
}

/* ===== Panel (Profile / Experience / Skills) ===== */
.panel{
  padding:140px 48px;
  border-top:1px solid var(--line);
  background:var(--bg-soft);
}
.panel-grid{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:280px 1fr; gap:64px;
}
.panel-label{display:flex; flex-direction:column; gap:14px;}
.panel-label .index{color:var(--accent); font-size:12px; letter-spacing:.15em;}
.panel-label h2{font-family:var(--font-display); font-size:32px; font-weight:600;}
.sticky-label{position:sticky; top:140px; align-self:start; height:fit-content;}

.panel-body{max-width:680px;}
.panel-body .lead{font-size:21px; line-height:1.5; color:var(--text); font-weight:400; margin-bottom:24px;}
.panel-body p{font-size:15px; line-height:1.75; color:var(--text-dim); margin-bottom:18px;}

/* ===== Education strip ===== */
.strip{padding:64px 48px; border-top:1px solid var(--line);}
.strip-inner{max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:center;}
.strip-school span{color:var(--accent); font-size:11px; letter-spacing:.1em;}
.strip-school h3{font-family:var(--font-display); font-size:22px; font-weight:500; margin-top:8px;}
.strip-tags{display:flex; flex-wrap:wrap; gap:10px; max-width:520px;}
.strip-tags li{
  font-size:11px; color:var(--text-dim);
  border:1px solid var(--line); padding:8px 14px; border-radius:100px;
  letter-spacing:.03em;
}

/* ===== Timeline ===== */
.timeline{display:flex; flex-direction:column;}
.t-item{
  display:grid; grid-template-columns:140px 1fr; gap:32px;
  padding:32px 0; border-top:1px solid var(--line);
}
.t-item:last-child{border-bottom:1px solid var(--line);}
.t-date{font-size:12px; color:var(--text-faint); padding-top:4px;}
.t-content h3{font-family:var(--font-display); font-size:19px; font-weight:600; margin-bottom:6px;}
.t-org{font-size:11px; color:var(--accent); margin-bottom:10px; letter-spacing:.04em;}
.t-content p:last-child{font-size:14px; line-height:1.7; color:var(--text-dim); max-width:560px;}

/* ===== Projects ===== */
.project-list{display:flex; flex-direction:column;}
.project-card{
  display:grid; grid-template-columns:48px 1fr 24px; gap:24px; align-items:start;
  padding:32px 0; border-top:1px solid var(--line);
  transition:padding-left .35s ease, border-color .35s ease;
}
.project-list a:last-child{border-bottom:1px solid var(--line);}
.project-card:hover{padding-left:12px; border-color:var(--accent);}
.project-num{color:var(--text-faint); font-size:13px; padding-top:4px;}
.project-info h3{
  font-family:var(--font-display); font-size:19px; font-weight:600;
  display:flex; align-items:center; gap:14px; margin-bottom:8px;
}
.status{font-size:10px; color:var(--accent); letter-spacing:.05em; font-weight:500;}
.project-cat{font-size:11px; color:var(--text-faint); letter-spacing:.04em; margin-bottom:10px; text-transform:uppercase;}
.project-info p:not(.project-cat):not(.project-stack){font-size:14px; line-height:1.7; color:var(--text-dim); max-width:560px; margin-bottom:12px;}
.project-stack{font-size:11px; color:var(--text-faint); letter-spacing:.03em;}
.project-arrow{
  font-size:18px; color:var(--text-faint); padding-top:2px;
  transition:transform .35s ease, color .35s ease;
}
.project-card:hover .project-arrow{transform:translateX(6px); color:var(--accent);}

/* ===== Skills ===== */
.skill-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line);}
.skill-card{background:var(--bg-soft); padding:32px;}
.skill-card.span-full{grid-column:1 / -1;}
.skill-card h4{color:var(--accent); font-size:12px; letter-spacing:.08em; margin-bottom:14px; text-transform:uppercase;}
.skill-card p{font-size:14px; line-height:1.7; color:var(--text-dim);}

/* ===== Vision ===== */
.vision{
  min-height:90vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:140px 24px;
  border-top:1px solid var(--line);
}
.vision h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(28px,5vw,56px);
  line-height:1.2;
  margin:20px 0 28px;
}
.vision-sub{max-width:520px; color:var(--text-dim); font-size:15px; line-height:1.7; margin-bottom:40px;}
.contact-cta{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.05em;
  border:1px solid var(--line); padding:14px 28px; border-radius:100px;
  transition:border-color .3s, color .3s;
}
.contact-cta:hover{border-color:var(--accent); color:var(--accent);}

.contact-links{
  display:flex; gap:28px; margin-top:32px;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}
.contact-links a{color:var(--text-dim); transition:color .3s;}
.contact-links a:hover{color:var(--accent);}

/* ===== Footer ===== */
.footer{
  display:flex; justify-content:space-between;
  padding:28px 48px;
  border-top:1px solid var(--line);
  font-size:11px; color:var(--text-faint);
}

/* ===== Responsive ===== */
@media (max-width:880px){
  .nav{padding:18px 20px; gap:12px;}
  .nav-mark{font-size:12px; letter-spacing:.12em;}
  .nav-links{display:none;}
  .nav-founder{font-size:10px; padding:8px 12px;}
  .panel{padding:96px 24px;}
  .panel-grid{grid-template-columns:1fr; gap:32px;}
  .sticky-label{position:static;}
  .strip-inner{flex-direction:column; align-items:flex-start;}
  .t-item{grid-template-columns:1fr; gap:8px;}
  .skill-grid{grid-template-columns:1fr;}
  .project-card{grid-template-columns:32px 1fr; padding:24px 0;}
  .project-arrow{display:none;}
  .footer{flex-direction:column; gap:8px; padding:24px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .scroll-line i{animation:none;}
}