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

:root{
  --bg:#08090b;
  --panel:#101216;
  --text:#f5f5f2;
  --muted:#9da1a9;
  --line:#252830;
  --accent:#b8ff4d;
  --accent2:#d7ff9c;
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
.nav{height:78px;max-width:var(--max);margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line)}
.brand{font:700 22px "Space Grotesk",sans-serif;letter-spacing:.08em}
.brand span,.hero h1 span,h2 span{color:var(--accent)}
nav{display:flex;gap:28px}
nav a{font-size:13px;color:#c6c8cc;transition:.2s}
nav a:hover{color:var(--accent)}
.nav-btn{font-size:13px;border:1px solid var(--line);padding:10px 16px;border-radius:999px}
.hero{min-height:680px;max-width:var(--max);margin:auto;padding:100px 24px 80px;display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:60px;position:relative;overflow:hidden}
.hero-glow{position:absolute;width:480px;height:480px;border-radius:50%;background:rgba(184,255,77,.06);filter:blur(80px);right:-100px;top:50px}
.eyebrow,.section-label,.project-type,.year{font-size:11px;letter-spacing:.18em;color:var(--accent);font-weight:700}
.hero h1{font:700 clamp(48px,7vw,88px)/.98 "Space Grotesk",sans-serif;letter-spacing:-.055em;margin:20px 0 28px}
.hero-text{max-width:600px;color:var(--muted);font-size:18px}
.hero-text strong{color:var(--text)}
.hero-actions{display:flex;gap:12px;margin-top:32px}
.btn{padding:13px 20px;border-radius:8px;font-weight:700;font-size:14px}
.primary{background:var(--accent);color:#0a0c08}
.secondary{border:1px solid var(--line)}
.quick-stats{display:flex;gap:32px;margin-top:60px}
.quick-stats div{display:flex;flex-direction:column}
.quick-stats strong{font:600 16px "Space Grotesk"}
.quick-stats small{color:var(--muted);font-size:11px;margin-top:2px}
.hero-card{height:390px;border:1px solid var(--line);background:linear-gradient(145deg,#15181d,#0c0d10);border-radius:24px;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.profile-mark{width:130px;height:130px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(184,255,77,.5);font:700 70px "Space Grotesk";color:var(--accent);background:#0b0d0e}
.hero-card p{font:600 20px "Space Grotesk";margin-top:25px}
.hero-card span{color:var(--muted);font-size:13px}
.orbit{position:absolute;width:220px;height:220px;border:1px dashed #3a3e46;border-radius:50%}
.section{max-width:var(--max);margin:auto;padding:110px 24px}
.section h2,.contact-section h2{font:600 clamp(38px,5vw,62px)/1.02 "Space Grotesk";letter-spacing:-.04em;margin-top:18px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:90px;margin-top:55px}
.about-copy{color:var(--muted);font-size:16px}
.about-copy p+p{margin-top:18px}
.tags,.project-tags,.tool-list{display:flex;flex-wrap:wrap;gap:8px}
.tags{margin-top:30px}
.tags span,.project-tags span,.tool-list span{border:1px solid var(--line);padding:7px 11px;border-radius:999px;font-size:11px;color:#c5c8ce}
.dark-section{max-width:none;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-left:max(24px,calc((100vw - var(--max))/2 + 24px));padding-right:max(24px,calc((100vw - var(--max))/2 + 24px))}
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:55px;border-top:1px solid var(--line)}
.skills-grid article{padding:28px 25px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.skills-grid article:nth-child(3n){border-right:0}
.skills-grid span{color:var(--accent);font-size:11px}
.skills-grid h3{font:600 25px "Space Grotesk";margin:28px 0 8px}
.skills-grid p{color:var(--muted);font-size:14px}
.project-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-top:18px}
.project-head p{color:var(--muted);max-width:470px}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:55px}
.project{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0d0f12;transition:.25s}
.project:hover{transform:translateY(-5px);border-color:#4a4f58}
.project-number{height:180px;background:linear-gradient(135deg,#191c21,#0b0d0f);display:flex;align-items:center;justify-content:center;font:600 70px "Space Grotesk";color:#30343b}
.project-body{padding:26px}
.project h3{font:600 28px "Space Grotesk";margin:8px 0 12px}
.project-body>p:not(.project-type){color:var(--muted);font-size:14px}
.project-tags{margin-top:20px}
.note,.edit-note{color:#6f747d;font-size:11px;margin-top:20px}
.experience-wrap{display:grid;grid-template-columns:1fr 1fr;gap:90px;margin-top:55px}
.timeline{border-left:1px solid var(--line)}
.timeline-item{padding:0 0 35px 28px;position:relative}
.timeline-item:before{content:"";width:7px;height:7px;background:var(--accent);border-radius:50%;position:absolute;left:-4px;top:5px}
.timeline-item h3{font:600 23px "Space Grotesk";margin:7px 0}
.timeline-item p{color:var(--muted);font-size:14px}
.tools{padding-bottom:80px}
.tool-list{margin-top:35px}
.tool-list span{font-size:14px;padding:10px 15px}
.contact-section{max-width:var(--max);margin:auto;padding:120px 24px 100px}
.contact-section>p{color:var(--muted);max-width:560px;margin-top:22px}
.contact-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:35px}
.contact-links a{border:1px solid var(--line);padding:13px 17px;border-radius:8px;font-size:13px}
.contact-links a:hover{border-color:var(--accent);color:var(--accent)}
footer{max-width:var(--max);margin:auto;border-top:1px solid var(--line);padding:25px 24px;display:flex;justify-content:space-between;color:#656a72;font-size:11px}
@media(max-width:850px){
  nav{display:none}
  .hero{grid-template-columns:1fr;padding-top:75px}
  .hero-card{max-width:420px;width:100%;margin:auto}
  .two-col,.project-head,.experience-wrap{grid-template-columns:1fr;gap:35px}
  .skills-grid{grid-template-columns:1fr 1fr}
  .skills-grid article:nth-child(3n){border-right:1px solid var(--line)}
  .skills-grid article:nth-child(2n){border-right:0}
  .projects-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .nav{padding:0 16px}.nav-btn{display:none}
  .section,.contact-section{padding-left:18px;padding-right:18px}
  .dark-section{padding-left:18px;padding-right:18px}
  .hero{padding:65px 18px}
  .hero h1{font-size:48px}
  .quick-stats{gap:18px;flex-wrap:wrap}
  .skills-grid{grid-template-columns:1fr}
  .skills-grid article,.skills-grid article:nth-child(2n){border-right:0}
  footer{padding:20px 18px;gap:15px;flex-direction:column}
}