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

:root{
  --bg:#08090d;
  --panel:#101218;
  --panel2:#141720;
  --text:#f2f4f7;
  --muted:#9299a7;
  --line:#252a35;
  --accent:#9dff00;
  --cyan:#63e6ff;
  --max:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Space Grotesk",sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.bg-grid{
  position:fixed;inset:0;pointer-events:none;opacity:.16;z-index:-1;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:linear-gradient(to bottom,black,transparent 80%);
}
.navbar{
  height:78px;max-width:var(--max);margin:auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  position:relative;z-index:10;
}
.logo{font-family:"DM Mono",monospace;font-size:20px;font-weight:500}
.logo span{color:var(--accent)}
nav{display:flex;gap:30px;color:var(--muted);font-size:14px}
nav a{transition:.2s}
nav a:hover{color:var(--accent)}
.menu-btn{display:none;background:none;border:0;color:var(--text);font-size:24px}

.hero{
  max-width:var(--max);min-height:calc(100vh - 78px);margin:auto;padding:80px 24px;
  display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:70px;
}
.eyebrow,.tag,.section-label{
  font-family:"DM Mono",monospace;
  font-size:11px;letter-spacing:2px;
}
.eyebrow,.section-label{color:var(--accent)}
.hero h1{
  font-size:clamp(50px,7vw,92px);line-height:.98;letter-spacing:-4px;
  margin:22px 0 28px;font-weight:700;
}
.hero h1 span,h2 span{color:var(--accent)}
.hero-text{max-width:600px;color:var(--muted);font-size:18px}
.hero-actions{display:flex;gap:12px;margin-top:36px}
.btn{padding:13px 20px;border:1px solid var(--line);font-weight:600;font-size:14px;transition:.2s}
.btn.primary{background:var(--accent);color:#08090d;border-color:var(--accent)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

.hero-card{
  background:rgba(16,18,24,.9);border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.35);transform:rotate(1.5deg);
}
.terminal-top{height:42px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;padding:0 16px}
.terminal-top i{width:9px;height:9px;border-radius:50%;background:#4b5160}
.terminal{padding:28px 25px;font-family:"DM Mono",monospace;font-size:13px;line-height:2}
.cyan{color:var(--cyan)}.green{color:var(--accent)}
.cursor{animation:blink 1s infinite}
@keyframes blink{50%{opacity:0}}

.section{max-width:var(--max);margin:auto;padding:115px 24px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;margin-top:45px}
h2{font-size:clamp(40px,5vw,66px);line-height:1.03;letter-spacing:-2.5px}
.about-text{color:var(--muted);font-size:17px;max-width:560px}
.about-text p+p{margin-top:20px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin:30px 0 45px}
.section-heading p{color:var(--muted)}
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.project{
  position:relative;min-height:310px;padding:30px;
  background:linear-gradient(145deg,var(--panel),#0d0f14);
  border:1px solid var(--line);overflow:hidden;transition:.3s;
}
.project:hover{transform:translateY(-5px);border-color:#4b5362}
.project.featured{grid-column:span 2;min-height:340px}
.project-number{font-family:"DM Mono",monospace;color:#535a67;font-size:12px}
.project-icon{
  position:absolute;right:26px;top:20px;font-size:42px;color:#313745;
}
.project-content{position:absolute;left:30px;right:30px;bottom:30px}
.tag{color:var(--muted);margin-bottom:10px}
.project h3{font-size:26px;margin-bottom:10px}
.project p:not(.tag){color:var(--muted);max-width:620px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.chips span,.skill-list span{
  border:1px solid var(--line);padding:5px 9px;
  font-family:"DM Mono",monospace;font-size:10px;color:#b7bdc8;
}
.skills-section{padding-top:80px}
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.skill-block{border-top:1px solid var(--line);padding-top:20px}
.skill-block h3{margin-bottom:18px;font-size:20px}
.skill-list{display:flex;flex-wrap:wrap;gap:8px}
.quote-section{text-align:center;padding:130px 24px}
.quote-mark{font-size:70px;line-height:1;color:var(--accent)}
blockquote{font-size:clamp(28px,4vw,50px);line-height:1.2;letter-spacing:-1.5px}
blockquote span{color:var(--muted)}
.contact-box{
  margin-top:40px;padding:55px;display:flex;justify-content:space-between;gap:50px;
  border:1px solid var(--line);background:var(--panel);
}
.contact-links{display:flex;flex-direction:column;gap:15px;min-width:280px}
.contact-links a{font-family:"DM Mono",monospace;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:12px}
.contact-links a:hover{color:var(--accent);border-color:var(--accent)}
footer{
  max-width:var(--max);margin:auto;padding:30px 24px 50px;
  border-top:1px solid var(--line);display:flex;justify-content:space-between;
  color:var(--muted);font-family:"DM Mono",monospace;font-size:10px;
}
footer a:hover{color:var(--accent)}

@media(max-width:800px){
  nav{display:none}
  .menu-btn{display:block}
  .hero{grid-template-columns:1fr;padding-top:55px;gap:50px}
  .hero h1{letter-spacing:-3px}
  .hero-card{transform:none}
  .about-grid{grid-template-columns:1fr;gap:35px}
  .section-heading{display:block}
  .section-heading p{margin-top:12px}
  .projects-grid{grid-template-columns:1fr}
  .project.featured{grid-column:auto}
  .skills-grid{grid-template-columns:1fr}
  .contact-box{display:block;padding:35px}
  .contact-links{margin-top:40px}
}