@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --bg:#090a0c;
  --surface:#101216;
  --surface-2:#15181d;
  --text:#f4f5f7;
  --muted:#9da3ad;
  --line:#252932;
  --accent:#b9ff66;
  --max:1160px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 78% 5%, rgba(185,255,102,.065), transparent 24%),
    var(--bg);
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}

/* Navigation */
.nav{
  max-width:var(--max);
  margin:auto;
  padding:30px 32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.brand{
  font:700 25px 'Space Grotesk',sans-serif;
  letter-spacing:-1px;
}
.brand span{color:var(--accent)}
.nav nav{
  display:flex;
  align-items:center;
  gap:52px;
}
.nav nav a{
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
  transition:color .2s ease;
}
.nav nav a:hover{color:var(--text)}

/* Hero */
.hero{
  max-width:var(--max);
  min-height:82vh;
  margin:auto;
  padding:105px 32px 85px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-copy{max-width:900px}
.eyebrow{
  color:var(--accent);
  font:600 11px 'Space Grotesk',sans-serif;
  letter-spacing:2.5px;
  margin-bottom:20px;
}
.hero h1{
  font:700 clamp(64px,9.5vw,118px)/.9 'Space Grotesk',sans-serif;
  letter-spacing:-6px;
}
.hero h1 span{color:#8d939e}
.role{
  max-width:720px;
  color:var(--text);
  font-size:20px;
  line-height:1.45;
  margin-top:32px;
}
.goal{
  max-width:720px;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
  margin-top:14px;
}
.location{
  color:var(--muted);
  font-size:14px;
  margin-top:10px;
}
.actions{
  display:flex;
  gap:12px;
  margin-top:34px;
  flex-wrap:wrap;
}
.button{
  padding:12px 19px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  transition:.2s ease;
}
.button:hover{transform:translateY(-2px);border-color:#59606c}
.button.primary{background:var(--accent);color:#10120c;border-color:var(--accent)}
.button.secondary{color:var(--text)}
.social-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:78px;
}
.social-strip a{
  border:1px solid var(--line);
  background:rgba(16,18,22,.72);
  padding:9px 15px;
  border-radius:999px;
  color:var(--muted);
  font-size:12px;
  transition:.2s ease;
}
.social-strip a:hover{color:var(--text);border-color:#5a606c;transform:translateY(-2px)}

/* Shared sections */
.section{
  max-width:var(--max);
  margin:auto;
  padding:125px 32px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:75px;
}
.section-label{
  color:var(--muted);
  font:600 11px 'Space Grotesk',sans-serif;
  letter-spacing:1.8px;
  padding-top:7px;
}
.section-content{min-width:0;max-width:850px}
.section h2,.contact h2{
  font:600 clamp(38px,5vw,62px)/1.03 'Space Grotesk',sans-serif;
  letter-spacing:-3px;
  margin-bottom:34px;
}

/* About */
.about-copy>p{
  color:var(--muted);
  max-width:780px;
  margin-bottom:24px;
  font-size:17px;
  line-height:1.85;
}
.about-copy>p:last-child{margin-bottom:0}

/* Education */
.education-timeline{
  position:relative;
  padding-left:42px;
}
.education-timeline::before{
  content:"";
  position:absolute;
  left:6px;
  top:12px;
  bottom:12px;
  width:1px;
  background:var(--line);
}
.education-item{
  position:relative;
  padding:0 0 78px;
}
.education-item:last-child{padding-bottom:0}
.education-marker{
  position:absolute;
  left:-42px;
  top:7px;
  width:14px;
  height:14px;
  border:2px solid #5c6370;
  border-radius:50%;
  background:var(--bg);
}
.education-item.current .education-marker{
  border-color:var(--accent);
  box-shadow:0 0 0 6px rgba(185,255,102,.07);
}
.tag{
  display:inline-block;
  color:var(--accent);
  font:600 10px 'Space Grotesk',sans-serif;
  letter-spacing:1.8px;
  margin-bottom:9px;
}
.education-main h3{
  font:600 27px/1.2 'Space Grotesk',sans-serif;
  margin-bottom:7px;
}
.institution{
  color:var(--text);
  font-size:16px;
}
.muted{
  color:var(--muted);
  font-size:13px;
  margin-top:3px;
}
.education-detail{
  color:var(--muted);
  max-width:760px;
  font-size:14px;
  line-height:1.75;
  margin-top:18px;
}

/* Skills */
.skills-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.skill-group{
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(145deg,var(--surface),rgba(16,18,22,.65));
  padding:24px;
}
.skill-group h3{
  font:600 21px/1.2 'Space Grotesk',sans-serif;
  margin-bottom:16px;
}
.skill-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.skill-tags span{
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  color:var(--muted);
}

/* Interests */
.cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.card{
  background:linear-gradient(145deg,var(--surface),rgba(16,18,22,.65));
  border:1px solid var(--line);
  border-radius:20px;
  padding:30px;
  min-height:255px;
  transition:.25s ease;
}
.card:hover{transform:translateY(-5px);border-color:#444a55}
.card>span{
  color:var(--accent);
  font:600 12px 'Space Grotesk',sans-serif;
}
.card h3{
  font:600 24px/1.15 'Space Grotesk',sans-serif;
  margin:52px 0 12px;
}
.card p{color:var(--muted);font-size:14px;line-height:1.7}

/* Projects */
.project-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.project-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(145deg,var(--surface),rgba(16,18,22,.65));
  padding:26px;
}
.project-card h3{
  font:600 24px/1.2 'Space Grotesk',sans-serif;
  margin-bottom:12px;
}
.project-summary{
  color:var(--muted);
  font-size:15px;
  margin-bottom:14px;
}
.project-meta{
  font-size:13px;
  color:var(--muted);
  margin-bottom:8px;
}
.project-meta strong{color:var(--text)}
.project-link{
  display:inline-block;
  margin-top:10px;
  color:var(--accent);
  font-size:13px;
}

/* Connect — deliberately spacious */
.contact{
  max-width:var(--max);
  margin:auto;
  padding:125px 32px 140px;
  border-top:1px solid var(--line);
}
.contact h2{
  font-size:clamp(48px,7vw,82px);
  margin:15px 0 18px;
}
.contact-intro{
  color:var(--muted);
  margin-bottom:48px;
}
.connect-list{
  width:100%;
  max-width:100%;
  border-top:1px solid var(--line);
}
.connect-list>a{
  min-height:108px;
  padding:27px 18px;
  display:grid;
  grid-template-columns:180px minmax(0,1fr) 24px;
  align-items:center;
  column-gap:34px;
  border-bottom:1px solid var(--line);
  transition:background .2s ease,padding .2s ease;
}
.connect-list>a:hover{
  background:rgba(255,255,255,.018);
  padding-left:28px;
  padding-right:28px;
}
.connect-list strong{
  font:600 21px 'Space Grotesk',sans-serif;
}
.connect-list span{
  color:var(--muted);
  font-size:14px;
  overflow-wrap:anywhere;
}
.connect-list>a::after{
  content:"↗";
  color:var(--accent);
  font-size:18px;
  text-align:right;
}

/* Footer */
footer{
  max-width:var(--max);
  margin:auto;
  padding:28px 32px 48px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  color:#666c76;
  font-size:12px;
}

/* Mobile */
@media(max-width:820px){
  .nav{padding:24px 20px}
  .nav nav{gap:25px}
  .hero{padding:75px 20px 60px;min-height:76vh}
  .hero h1{letter-spacing:-4px}
  .role{font-size:18px}
  .section{
    grid-template-columns:1fr;
    gap:28px;
    padding:90px 20px;
  }
  .section-label{padding-top:0}
  .cards,.skills-grid,.project-list{grid-template-columns:1fr}
  .contact{padding:90px 20px 105px}
  .connect-list>a{
    min-height:96px;
    grid-template-columns:120px minmax(0,1fr) 20px;
    column-gap:20px;
    padding:24px 8px;
  }
  .connect-list strong{font-size:18px}
  footer{padding:25px 20px 35px}
}

@media(max-width:600px){
  .nav nav{display:none}
  .hero h1{font-size:58px;letter-spacing:-3px}
  .social-strip{margin-top:55px}
  .education-timeline{padding-left:30px}
  .education-marker{left:-30px}
  .education-main h3{font-size:23px}
  .connect-list>a{
    grid-template-columns:1fr auto;
    row-gap:6px;
    min-height:88px;
    padding:20px 4px;
  }
  .connect-list strong{grid-column:1}
  .connect-list span{
    grid-column:1;
    font-size:12px;
  }
  .connect-list>a::after{
    grid-column:2;
    grid-row:1 / span 2;
  }
  .connect-list>a:hover{padding-left:12px;padding-right:12px}
  footer{flex-direction:column;gap:8px}
}