*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:#a1a1aa;
  background:#1c1c21;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ── Navbar ── */
.navbar{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  background:#1c1c21;
  backdrop-filter:blur(12px);
  border-bottom:1px solid #2a2a2e;
}
.nav-inner{
  max-width:1152px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
  height:64px;
}
.nav-logo{
  display:flex;align-items:center;gap:.45rem;
  font-weight:700;font-size:1rem;
  color:#e4e4e7;
}
.nav-logo i{
  font-size:1.1rem;
  color:#009639;
}
.nav-links{display:flex;gap:1.5rem}
.nav-links a{
  font-size:.9rem;font-weight:500;
  color:#71717a;
  transition:color .25s;
}
.nav-links a:hover{color:#009639}

/* ── Hero ── */
.hero{
  position:relative;
  padding:76px 24px 48px;
  max-width:1152px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3rem;
  min-height:100vh;
}
.hero-main{flex:1;max-width:592px}
.hero-title{
  font-size:clamp(2.5rem,5.5vw,4rem);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.1;
  margin-bottom:1rem;
}
.hero-title .name{color:#009639}
.hero-title .text{display:block;color:#e4e4e7}
.hero-tagline{
  font-size:1.1rem;
  color:#71717a;
  line-height:1.7;
  margin-bottom:2rem;
  max-width:440px;
}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.btn{
  display:inline-block;
  padding:.6rem 1.4rem;
  border-radius:20px;
  font-size:.88rem;font-weight:600;
  transition:all .25s;
}
.btn-brand{background:#009639;color:#fff}
.btn-brand:hover{opacity:.9}
.btn-alt{border:1px solid #2a2a2e;color:#a1a1aa;background:#1e1e21}
.btn-alt:hover{border-color:#3f3f46;color:#e4e4e7}

.hero-image{
  flex:1;max-width:448px;
  display:flex;align-items:center;justify-content:center;
}
.hero-image img{width:100%;max-width:420px;height:auto}

/* ── Scroll indicator ── */
.scroll-indicator{
  position:absolute;bottom:2.5rem;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  color:#3f3f46;font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  animation:scrollBounce 2s ease-in-out infinite;
}
.scroll-indicator i{font-size:1.2rem}
@keyframes scrollBounce{
  0%,100%{transform:translateX(-50%) translateY(0);opacity:.5}
  50%{transform:translateX(-50%) translateY(5px);opacity:1}
}

/* ── Features / Skills ── */
.features{padding:3rem 24px 5rem;max-width:1152px;margin:0 auto}
.features-header{margin-bottom:2rem}
.features-header h2{
  font-size:1.8rem;font-weight:800;
  color:#e4e4e7;letter-spacing:-.02em;
}
.features-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.feature-card{
  background:#1e1e21;border:1px solid #2a2a2e;
  border-radius:12px;padding:24px;
  transition:border-color .25s;
}
.feature-card:hover{border-color:#3f3f46}
.feature-icon{font-size:1.5rem;margin-bottom:.6rem}
.feature-icon i{font-size:1.5rem;color:#009639}
.feature-card h3{
  font-size:.95rem;font-weight:700;
  color:#e4e4e7;margin-bottom:.4rem;
}
.feature-card p{font-size:.85rem;color:#71717a;line-height:1.6}

/* ── Works list ── */
.works{padding:4rem 24px 5rem;max-width:1152px;margin:0 auto}
.works-page{padding-top:100px}
.works-header{margin-bottom:2.5rem}
.works-more-wrap{text-align:center;margin-top:2rem}
.works-more{
  font-size:.85rem;font-weight:500;color:#71717a;
  display:inline-flex;align-items:center;gap:.3rem;
  transition:color .2s;
}
.works-more:hover{color:#009639}
.works-header h2{
  font-size:1.8rem;font-weight:800;
  color:#e4e4e7;letter-spacing:-.02em;
}
.works-list{display:flex;flex-direction:column}
.work-item{
  display:flex;align-items:baseline;gap:1.5rem;
  padding:1.2rem 0;border-top:1px solid #2a2a2e;
  transition:background .2s;
}
.work-item:last-child{border-bottom:1px solid #2a2a2e}
.work-item:hover{background:rgba(255,255,255,.03)}
.work-tag{
  flex-shrink:0;width:80px;
  font-size:.75rem;font-weight:600;color:#009639;
}

.work-item h3{font-size:.95rem;font-weight:600;color:#e4e4e7;flex:0 0 200px}
.work-item p{font-size:.85rem;color:#71717a;flex:1}

.work-techs{display:flex;gap:.3rem;flex-shrink:0}
.work-techs span{font-size:.72rem;font-weight:500;color:#52525b}

/* ── Work detail page ── */
.work-detail{
  padding:100px 24px 5rem;
  max-width:860px;
  margin:0 auto;
}
.work-detail-back{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.85rem;font-weight:500;color:#71717a;
  margin-bottom:2rem;transition:color .2s;
}
.work-detail-back:hover{color:#009639}
.work-detail h1{
  font-size:2rem;font-weight:800;color:#e4e4e7;
  letter-spacing:-.02em;margin-bottom:.5rem;
}
.work-detail-meta{
  display:flex;gap:1rem;align-items:center;
  margin-bottom:2rem;flex-wrap:wrap;
}
.work-detail-meta .work-tag{width:auto}
.work-detail-body{
  font-size:.95rem;color:#a1a1aa;line-height:1.8;
}
.work-detail-body p{margin-bottom:1.2rem}
.work-detail-body h2{
  font-size:1.3rem;font-weight:700;color:#e4e4e7;
  margin:2rem 0 .8rem;
}
.work-detail-body h3{
  font-size:1.1rem;font-weight:600;color:#e4e4e7;
  margin:1.5rem 0 .6rem;
}
.work-detail-body ul,
.work-detail-body ol{
  padding-left:1.5rem;margin-bottom:1.2rem;
}
.work-detail-body li{margin-bottom:.4rem}
.work-detail-body code{
  background:#27272a;padding:.15em .4em;border-radius:4px;
  font-size:.88em;
}
.work-detail-body pre{
  background:#27272a;border:1px solid #2a2a2e;
  border-radius:8px;padding:1rem;
  overflow-x:auto;margin-bottom:1.2rem;
}
.work-detail-body pre code{background:none;padding:0}
.work-detail-body img{
  max-width:100%;border-radius:8px;
  border:1px solid #2a2a2e;
  margin:1rem 0;
}

/* ── Gallery ── */
.work-gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:12px;margin:1.5rem 0;
}
.work-gallery img{
  width:100%;height:auto;border-radius:8px;
  border:1px solid #2a2a2e;
  transition:border-color .2s;
}
.work-gallery img:hover{border-color:#3f3f46}

/* ── Divider ── */
.divider{border:none;height:1px;background:#2a2a2e;max-width:1152px;margin:0 auto}

/* ── Footer ── */
.footer{text-align:center;padding:2rem 24px;font-size:.8rem;color:#52525b}

/* ── Responsive ── */
@media(max-width:960px){
  .hero{flex-direction:column;text-align:center;min-height:auto;padding-top:100px}
  .hero-main{max-width:100%}
  .hero-tagline{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hero-image{max-width:320px}
}
@media(max-width:768px){
  .features-grid{grid-template-columns:1fr}
  .work-item{flex-wrap:wrap;gap:.5rem}
  .work-tag{width:auto}
  .work-item p{flex-basis:100%}
  .work-gallery{grid-template-columns:1fr}
}