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

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #050505; color: #f4f4f4; font-family: Inter, sans-serif;
  overflow-x: hidden; line-height: 1.6;
}
body:before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-2;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 60px 60px;
}
.noise { position:fixed; inset:0; pointer-events:none; opacity:.045; z-index:10;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.orb { position:fixed; width:380px; height:380px; border-radius:50%; filter:blur(100px);
  opacity:.12; pointer-events:none; z-index:-1; background:#fff; animation:float 12s ease-in-out infinite; }
.orb-one { top:8%; left:-180px; } .orb-two { bottom:0; right:-180px; animation-delay:-5s; }
@keyframes float { 50% { transform:translate(80px,-50px) scale(1.15); } }

.nav { position:fixed; top:22px; left:50%; transform:translateX(-50%); width:min(920px, calc(100% - 32px));
  padding:14px 20px; display:flex; justify-content:space-between; align-items:center; z-index:20; }
.glass { background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px rgba(255,255,255,.08), 0 20px 80px rgba(0,0,0,.25);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.logo { font:700 22px "Space Grotesk"; color:#fff; text-decoration:none; }
.logo span { opacity:.45; }
.nav-links { display:flex; gap:28px; }
.nav-links a { color:#aaa; text-decoration:none; font-size:13px; transition:.25s; }
.nav-links a:hover { color:#fff; }

.hero { min-height:100vh; max-width:1050px; margin:auto; padding:180px 28px 80px; display:flex; flex-direction:column; justify-content:center; }
.eyebrow, .section-label { letter-spacing:.22em; font-size:11px; color:#777; font-weight:700; }
.hero h1 { font:600 clamp(60px, 10vw, 125px)/.95 "Space Grotesk"; letter-spacing:-.07em; margin:22px 0 30px; max-width:950px; }
.hero h1 span { color:#999; }
.hero-text { max-width:650px; color:#aaa; font-size:17px; }
.hero-actions { display:flex; gap:12px; margin-top:38px; }
.button { color:#ddd; border:1px solid #333; padding:13px 18px; border-radius:99px; text-decoration:none; font-size:13px; transition:.3s; }
.button:hover { transform:translateY(-3px); border-color:#777; }
.button.primary { background:#eee; color:#050505; border-color:#eee; font-weight:700; }
.scroll-hint { margin-top:80px; color:#666; font-size:10px; letter-spacing:.2em; }
.scroll-hint span { margin-left:10px; }

.section { max-width:1050px; margin:auto; padding:140px 28px; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-top:55px; align-items:start; }
.section h2 { font:600 clamp(48px,7vw,85px)/.95 "Space Grotesk"; letter-spacing:-.06em; }
.section h2 em { color:#777; font-style:normal; }
.about-copy { padding:30px; border-radius:24px; color:#aaa; }
.about-copy p + p { margin-top:22px; }
.about-copy strong { color:#eee; font-weight:500; }

.social-links {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:12px;
}

.linkedin-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  text-decoration:none;
  color:#f4f4f4;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 1px rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.22);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:.25s ease;
}
.linkedin-button:hover {
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.25);
  background:rgba(255,255,255,.09);
}

.projects h2 { margin-top:50px; }
.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:60px; }
.project-card { min-height:390px; padding:30px; border-radius:26px; position:relative; overflow:hidden; transition:.4s; }
.project-card:hover { transform:translateY(-8px); border-color:#444; }
.project-number { color:#666; font-size:11px; letter-spacing:.15em; }
.project-icon { margin-top:70px; color:#777; font:700 12px "Space Grotesk"; letter-spacing:.25em; }
.project-card h3 { font:600 32px "Space Grotesk"; margin:14px 0 12px; letter-spacing:-.04em; }
.project-card p { color:#888; font-size:14px; max-width:450px; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:25px; }
.tags span { border:1px solid #292929; color:#777; border-radius:99px; padding:6px 10px; font-size:10px; }

.minimal { padding-top:30px; padding-bottom:160px; }
.currently { margin-top:45px; padding:35px; border-radius:24px; display:flex; justify-content:space-between; align-items:center; }
.currently p { font:500 24px "Space Grotesk"; }
.currently span { color:#666; font-size:12px; }

footer { border-top:1px solid #181818; padding:30px 28px; max-width:1050px; margin:auto; display:flex; justify-content:space-between; gap:20px; color:#555; font-size:9px; letter-spacing:.12em; }

.reveal { opacity:0; transform:translateY(25px); animation:reveal .9s forwards; }
.reveal:nth-child(1){animation-delay:.1s}.reveal:nth-child(2){animation-delay:.2s}
.reveal:nth-child(3){animation-delay:.35s}.reveal:nth-child(4){animation-delay:.5s}
@keyframes reveal { to { opacity:1; transform:none; } }

@media(max-width:700px) {
  .nav-links { gap:15px; }
  .hero { padding-top:150px; }
  .hero h1 { font-size:58px; }
  .hero-text { font-size:15px; }
  .about-grid, .project-grid { grid-template-columns:1fr; gap:25px; }
  .section { padding:100px 20px; }
  .currently, footer { flex-direction:column; align-items:flex-start; }
  .project-card { min-height:350px; }
}