:root{
  --bg:#0b0d10;
  --panel:#12161b;
  --panel-2:#171c22;
  --text:#f3f5f7;
  --muted:#9ba5b1;
  --line:#272e36;
  --accent:#9ef01a;
  --accent-2:#51e5ff;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"DM Sans",system-ui,sans-serif;
  background:
    radial-gradient(circle at 80% 0%,rgba(81,229,255,.08),transparent 35%),
    radial-gradient(circle at 10% 25%,rgba(158,240,26,.06),transparent 30%),
    var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}
.noise{
  position:fixed; inset:0; pointer-events:none; opacity:.035; z-index:10;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
.container{width:min(var(--max),calc(100% - 40px)); margin-inline:auto}
.nav-wrap{
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(18px);
  background:rgba(11,13,16,.72);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.nav{height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand{
  color:var(--text); text-decoration:none; font:700 1.35rem "Space Grotesk";
  letter-spacing:-.04em;
}
.brand span{color:var(--accent)}
.nav-links{display:flex; gap:28px}
.nav-links a,.text-link{
  color:var(--muted); text-decoration:none; transition:.2s ease;
}
.nav-links a:hover,.text-link:hover{color:var(--text)}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--text); color:#0a0c0f; text-decoration:none;
  padding:14px 20px; border-radius:999px; font-weight:700;
  transition:transform .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-2px); background:white}
.btn-small{padding:10px 16px; font-size:.92rem}
.hero{
  min-height:82vh; display:flex; flex-direction:column; justify-content:center;
  padding-block:90px 70px;
}
.eyebrow,.section-label{
  color:var(--muted); font-size:.78rem; letter-spacing:.16em; font-weight:700;
  text-transform:uppercase;
}
.eyebrow{display:flex; align-items:center; gap:9px; margin-bottom:25px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px var(--accent)}
h1,h2,h3{font-family:"Space Grotesk",sans-serif; margin:0; line-height:1.05}
h1{font-size:clamp(3.4rem,9vw,7.9rem); max-width:1080px; letter-spacing:-.065em}
.gradient-text{
  background:linear-gradient(100deg,var(--accent),#d8ff7c 45%,var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-copy{max-width:700px; color:var(--muted); font-size:clamp(1.1rem,2vw,1.35rem); margin:28px 0}
.hero-actions{display:flex;align-items:center;gap:24px}
.metrics{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-top:75px;border:1px solid var(--line);background:var(--line);border-radius:18px;overflow:hidden;
}
.metrics article{background:rgba(18,22,27,.9);padding:26px}
.metrics strong{display:block;font:600 2rem "Space Grotesk";letter-spacing:-.04em}
.metrics span{color:var(--muted);font-size:.92rem}
.section{padding-block:105px;border-top:1px solid var(--line)}
.section-label{margin-bottom:38px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:90px}
.split h2,.cta h2{font-size:clamp(2.2rem,4vw,4rem);letter-spacing:-.045em}
.copy-stack p{color:var(--muted);font-size:1.12rem;margin-top:0;margin-bottom:20px}
.timeline{display:flex;flex-direction:column}
.timeline-item{
  display:grid;grid-template-columns:300px 1fr;gap:40px;padding:36px 0;border-top:1px solid var(--line);
}
.timeline-item:last-child{border-bottom:1px solid var(--line)}
.timeline-meta{display:flex;flex-direction:column;color:var(--muted);font-size:.9rem}
.timeline-item h3{font-size:1.8rem;margin-bottom:12px}
.timeline-item p{color:var(--muted);max-width:720px;margin:0}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:34px}
.section-head .section-label{margin:0}
.section-head p{margin:0;color:var(--muted)}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.project-card{
  min-height:310px;position:relative;overflow:hidden;padding:32px;border:1px solid var(--line);
  background:linear-gradient(145deg,var(--panel),var(--panel-2));border-radius:22px;
  transition:transform .25s ease,border-color .25s ease;
}
.project-card:hover{transform:translateY(-5px);border-color:#3b4651}
.project-card.featured{grid-column:span 2;min-height:380px}
.project-kicker{color:var(--accent);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.project-card h3{font-size:clamp(1.9rem,3vw,3.1rem);margin:14px 0}
.project-card p{max-width:650px;color:var(--muted);font-size:1.05rem}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}
.tags span{padding:8px 11px;border:1px solid var(--line);border-radius:999px;color:#c4ccd4;font-size:.82rem}
.orb{position:absolute;border-radius:50%;filter:blur(4px)}
.orb-1{
  width:260px;height:260px;right:-40px;bottom:-60px;
  background:radial-gradient(circle at 30% 30%,rgba(158,240,26,.75),rgba(81,229,255,.08) 70%);
  opacity:.6;
}
.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.skills-grid>div{background:var(--panel);padding:30px}
.skills-grid h3{font-size:1.4rem;margin-bottom:10px}
.skills-grid p{color:var(--muted);margin:0}
.cta{
  padding-block:110px;display:flex;justify-content:space-between;align-items:end;gap:50px;border-top:1px solid var(--line)
}
.cta .section-label{margin-bottom:25px}
.cta-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.footer{
  min-height:110px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
  color:var(--muted);font-size:.9rem
}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:none}
@media(max-width:800px){
  .nav-links{display:none}
  .hero{min-height:auto;padding-top:90px}
  .metrics{grid-template-columns:1fr}
  .split,.timeline-item{grid-template-columns:1fr;gap:24px}
  .project-grid{grid-template-columns:1fr}
  .project-card.featured{grid-column:auto}
  .section-head{display:block}
  .section-head p{margin-top:12px}
  .skills-grid{grid-template-columns:1fr}
  .cta{align-items:flex-start;flex-direction:column}
  .footer{flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}
}