:root{
  --bg:#071017;
  --panel:#0b1220;
  --muted:#9aa6b2;
  --accent:#00e6a8;
  --glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'JetBrains Mono', monospace;
  background:linear-gradient(180deg,#061018 0%, #041018 60%);
  color:#dbe9ef;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:1100px;margin:0 auto;padding:48px 24px}
.hero{min-height:100vh;display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:center}
.site-title{font-size:clamp(38px,9vw,88px);margin:0 0 8px;color:var(--accent);letter-spacing:-2px}
.site-title .accent{color:var(--accent)}
.tagline{color:var(--muted);margin:0 0 18px;font-size:18px}
.socials{display:flex;gap:12px;margin-bottom:18px}
.socials a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:6px;background:transparent;border:1px solid rgba(255,255,255,0.03);transition:all .18s}
.socials a:hover{color:#fff;border-color:rgba(0,230,168,0.12);box-shadow:0 6px 18px rgba(0,230,168,0.06)}
.hint{color:var(--muted);font-size:13px;margin-top:16px}
.avatar-wrap{display:flex;justify-content:center}
.avatar{width:320px;height:320px;border-radius:14px;border:1px solid rgba(255,255,255,0.04);background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);box-shadow: 0 10px 40px rgba(0,0,0,0.6)}

/* Projects */
.section-title{font-size:28px;margin:0 0 18px;color:var(--accent)}
.projects{padding:60px 0;background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.02) 100%)}
.projects-grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.card{background:var(--panel);padding:20px;border-radius:10px;border:1px solid var(--glass);transition:transform .2s,box-shadow .2s}
.card h3{margin:0 0 8px}
.card .muted{color:var(--muted);font-size:14px;margin:0 0 12px}
.card .meta{font-size:12px;color:var(--muted)}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 50px rgba(0,0,0,0.6)}
.card:focus{outline:2px solid rgba(0,230,168,0.12);box-shadow:0 10px 30px rgba(0,230,168,0.04);transform:translateY(-6px)}

.tags{display:flex;gap:8px;margin:8px 0 12px;flex-wrap:wrap}
.tag{background:rgba(0,0,0,0.18);color:var(--muted);padding:6px 8px;border-radius:999px;font-size:12px;border:1px solid rgba(255,255,255,0.02)}
.tag:hover{color:#fff}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,8,0.7);display:none;align-items:center;justify-content:center;padding:24px;z-index:60}
.modal-backdrop.open{display:flex}
.modal{background:linear-gradient(180deg,var(--panel), #07121a);max-width:820px;width:100%;border-radius:12px;padding:24px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 30px 80px rgba(0,0,0,0.7)}
.modal h3{margin-top:0}
.modal .detail{display:block;margin:12px 0}
.modal .project-link{display:inline-block;margin-top:12px;color:var(--accent)}
.modal-close{position:absolute;right:18px;top:18px;background:transparent;border:0;color:var(--muted);font-size:18px;cursor:pointer}

/* small responsive tweak for modal */
@media (max-width:640px){
  .modal{padding:18px}
}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.9,.3,1)}
.reveal.visible{opacity:1;transform:none}

/* Responsive */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr 260px}
  .avatar{width:240px;height:240px}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .hero-grid{grid-template-columns:1fr;gap:20px;text-align:center}
  .avatar{width:200px;height:200px;margin:0 auto}
  .socials{justify-content:center}
  .projects-grid{grid-template-columns:1fr}
  .site-title{font-size:42px}
}

/* small terminal-like touches */
.site-title::after{content:';';color:var(--accent);opacity:0.85;margin-left:6px}
.projects .card::before{content:'';display:block;height:1px;margin-bottom:12px;background:linear-gradient(90deg, rgba(0,230,168,0.08), transparent)}