:root{
  --bg:#080d1a;
  --accent:#4fffb0;
  --accent2:#00c6ff;
  --text:#e8eaf6;
  --muted:#5a6278;
  --card:rgba(255,255,255,0.03);
  --border:rgba(255,255,255,0.07);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:'Syne',sans-serif;overflow-x:hidden;}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none;}
main{position:relative;z-index:1;}
.ct{max-width:1100px;margin:0 auto;padding:0 3rem;}
section{padding:7rem 0;}
.dv{width:100%;height:1px;background:var(--border);}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.3rem 3rem;backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s;}
nav.sc{border-color:var(--border);background:rgba(8,13,26,0.92);}
.nb{font-size:.95rem;font-weight:700;letter-spacing:.04em;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:.6rem;}
.logo-circle{width:32px;height:32px;border-radius:50%;overflow:hidden;border:2px solid var(--accent);flex-shrink:0;box-shadow:0 0 10px rgba(79,255,176,.25);}
.logo-circle img{width:100%;height:100%;object-fit:cover;display:block;}
.nl{display:flex;gap:2rem;list-style:none;}
.nl a{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s;font-family:'DM Mono',monospace;}
.nl a:hover{color:var(--accent);}
.ni{display:flex;gap:1.1rem;align-items:center;}
.ni a{color:var(--muted);text-decoration:none;transition:color .2s;display:flex;align-items:center;}
.ni a:hover{color:var(--accent);}
.ni svg{width:17px;height:17px;}
.hbg{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.3rem;}
.hbg span{width:22px;height:2px;background:var(--muted);border-radius:2px;}
.mob-nav{display:none;position:fixed;inset:0;background:rgba(8,13,26,.97);z-index:99;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;}
.mob-nav.open{display:flex;}
.mob-nav a{font-family:'DM Mono',monospace;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s;}
.mob-nav a:hover{color:var(--accent);}
.mob-close{position:absolute;top:1.5rem;right:1.8rem;background:none;border:none;color:var(--muted);font-size:1.4rem;cursor:pointer;font-family:'DM Mono',monospace;}
.mob-social{display:flex;gap:1.2rem;margin-top:1rem;}
.mob-social a{color:var(--muted);text-decoration:none;display:flex;align-items:center;padding:.4rem;border:1px solid var(--border);border-radius:3px;transition:all .2s;}
.mob-social a:hover{color:var(--accent);border-color:rgba(79,255,176,.4);}
.mob-social svg{width:18px;height:18px;}

/* HERO */
#home{min-height:100vh;display:flex;align-items:center;padding-top:3rem;}
.hi{max-width:700px;}
.ey{font-family:'DM Mono',monospace;font-size:.74rem;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;margin-bottom:1.1rem;opacity:0;animation:fu .7s .2s forwards;}
.hn{font-size:clamp(2.5rem,5vw,4.2rem);font-weight:800;line-height:1.0;letter-spacing:-.02em;opacity:0;animation:fu .7s .35s forwards;}
.hn span{color:var(--accent);}
.hr{font-family:'DM Mono',monospace;font-size:.82rem;color:var(--muted);margin:1.1rem 0 1.4rem;opacity:0;animation:fu .7s .5s forwards;}
.hd{font-size:.98rem;line-height:1.8;color:rgba(232,234,246,0.7);max-width:430px;opacity:0;animation:fu .7s .65s forwards;}
.hc{margin-top:1.8rem;opacity:0;animation:fu .7s .8s forwards;}
.cem{font-family:'DM Mono',monospace;font-size:.72rem;letter-spacing:.06em;color:var(--muted);margin-bottom:.7rem;display:flex;align-items:center;gap:.45rem;}
.cem span{color:var(--accent);}
.hsl{display:flex;gap:.5rem;align-items:center;margin-bottom:1rem;}
.hsl a{color:var(--muted);text-decoration:none;display:flex;align-items:center;padding:.38rem .55rem;border:1px solid var(--border);border-radius:3px;transition:all .2s;}
.hsl a:hover{color:var(--accent);border-color:rgba(79,255,176,.4);}
.hsl svg{width:15px;height:15px;}
.btns{display:flex;gap:.9rem;flex-wrap:wrap;}
.btn{padding:.68rem 1.5rem;font-family:'DM Mono',monospace;font-size:.78rem;letter-spacing:.06em;border-radius:3px;text-decoration:none;display:inline-flex;align-items:center;gap:.45rem;transition:all .22s;border:none;cursor:pointer;}
.btp{background:var(--accent);color:#050810;font-weight:700;}
.btp:hover{background:#fff;transform:translateY(-2px);}
/* SUPERMAN */
.superman-container {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

#supermanTrail {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}

.superman {
  position: absolute;
  width: 130px;
  height: 140px;
  z-index: 2;
  will-change: transform, left, top;
  filter: drop-shadow(0 0 30px rgba(255,200,50,0.25)) drop-shadow(0 0 15px rgba(255,0,0,0.15));
  pointer-events: none;
}

.superman svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* SECTION LABELS */
.sl{font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;margin-bottom:.55rem;}
.sl::before{content:'/ ';}
h2.st{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:700;letter-spacing:-.02em;margin-bottom:.9rem;}
.sln{width:44px;height:2px;background:var(--accent);margin:0 0 2.8rem;}

/* ABOUT */
.ag{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;}
.at p{font-size:.97rem;line-height:1.85;color:rgba(232,234,246,.75);margin-bottom:1.1rem;}
.at p strong{color:var(--accent);font-weight:600;}
.ask{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem;}
.sk{font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.08em;padding:.32rem .75rem;border:1px solid var(--border);border-radius:2px;color:var(--muted);transition:all .2s;}
.sk:hover{border-color:var(--accent);color:var(--accent);}
.about-photo-wrap{position:relative;display:flex;align-items:flex-start;justify-content:center;}
.about-photo-wrap .img-placeholder{width:100%;max-width:340px;height:400px;border-radius:6px;border:1px solid var(--border);background:linear-gradient(135deg,#0d1a2e,#0a2a1a);display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:'DM Mono',monospace;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;}
.about-photo-wrap::before{content:'';position:absolute;inset:-6px;border:1px solid rgba(79,255,176,.18);border-radius:8px;pointer-events:none;}
.about-photo-label{position:absolute;bottom:.8rem;left:.8rem;font-family:'DM Mono',monospace;font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:rgba(8,13,26,.82);padding:.22rem .55rem;border-radius:2px;}

/* PROJECTS */
.proj-section-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2rem;flex-wrap:wrap;gap:1rem;}
.proj-section-header a{font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.1em;color:var(--accent);text-decoration:none;opacity:.7;transition:opacity .2s;}
.proj-section-header a:hover{opacity:1;}
.feat-carousel{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--border);background:var(--card);margin-bottom:1.4rem;}
.feat-slides{display:flex;transition:transform .5s cubic-bezier(.77,0,.18,1);}
.feat-slide{min-width:100%;position:relative;}
.feat-slide-img{width:100%;height:380px;object-fit:cover;display:block;}
.feat-slide-img-placeholder{width:100%;height:380px;background:linear-gradient(135deg,#0d1a2e,#0a2a1a);display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:'DM Mono',monospace;font-size:.8rem;}
.feat-slide-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,13,26,.95) 0%,rgba(8,13,26,.5) 45%,transparent 70%);}
.feat-slide-body{position:absolute;bottom:0;left:0;right:0;padding:2rem 2.2rem;}
.feat-slide-tag{font-family:'DM Mono',monospace;font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem;display:block;}
.feat-slide-title{font-size:1.55rem;font-weight:700;margin-bottom:.55rem;line-height:1.2;}
.feat-slide-desc{font-size:.88rem;line-height:1.7;color:rgba(232,234,246,.7);max-width:600px;margin-bottom:1rem;}
.feat-slide-stack{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1rem;}
.feat-slide-stack span{font-family:'DM Mono',monospace;font-size:.62rem;padding:.18rem .5rem;background:rgba(79,255,176,.08);border:1px solid rgba(79,255,176,.2);border-radius:2px;color:var(--accent);}
.feat-slide-links{display:flex;gap:.9rem;}
.feat-slide-links a{font-family:'DM Mono',monospace;font-size:.72rem;color:var(--muted);text-decoration:none;transition:color .2s;display:flex;align-items:center;gap:.3rem;}
.feat-slide-links a:hover{color:var(--accent);}
.feat-prev,.feat-next{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.6);font-size:1.3rem;width:44px;height:44px;border-radius:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-family:'DM Mono',monospace;z-index:10;backdrop-filter:blur(6px);}
.feat-prev{left:1rem;}
.feat-next{right:1rem;}
.feat-prev:hover,.feat-next:hover{border-color:var(--accent);color:var(--accent);}
.feat-dots{display:flex;gap:.5rem;justify-content:center;margin-top:.75rem;}
.feat-dot{width:28px;height:2px;background:var(--border);border:none;border-radius:1px;cursor:pointer;transition:background .25s,width .25s;}
.feat-dot.active{background:var(--accent);width:44px;}
.mini-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.mini-card{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:1.4rem;transition:all .28s;cursor:pointer;position:relative;overflow:hidden;}
.mini-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(79,255,176,.05) 0%,transparent 60%);opacity:0;transition:opacity .3s;}
.mini-card:hover{border-color:rgba(79,255,176,.3);transform:translateY(-3px);}
.mini-card:hover::before{opacity:1;}
.mini-card-img{width:100%;height:110px;object-fit:cover;border-radius:3px;margin-bottom:.9rem;border:1px solid var(--border);display:block;}
.mini-card-img-placeholder{width:100%;height:110px;background:linear-gradient(135deg,#0d1a2e,#0a2a1a);border-radius:3px;margin-bottom:.9rem;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.6rem;font-family:'DM Mono',monospace;}
.mini-card-tag{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.45rem;display:block;}
.mini-card-title{font-size:.92rem;font-weight:700;margin-bottom:.4rem;}
.mini-card-links{display:flex;gap:.7rem;margin-top:.7rem;}
.mini-card-links a{font-family:'DM Mono',monospace;font-size:.67rem;color:var(--muted);text-decoration:none;transition:color .2s;}
.mini-card-links a:hover{color:var(--accent);}
.qt-tag{color:var(--accent2)!important;}
.qt-stack span{background:rgba(0,198,255,.08)!important;border-color:rgba(0,198,255,.2)!important;color:var(--accent2)!important;}
.qt-link a{color:var(--accent2)!important;}

/* ART */
.art-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2.8rem;flex-wrap:wrap;gap:1rem;}
.art-header a{font-family:'DM Mono',monospace;font-size:.8rem;letter-spacing:.08em;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 0;border-bottom:1px solid rgba(79,255,176,.3);transition:border-color .2s,gap .2s;}
.art-header a:hover{border-color:var(--accent);gap:.65rem;}
.adesc{font-size:.97rem;line-height:1.85;color:rgba(232,234,246,.7);max-width:580px;margin-bottom:2.2rem;}
.art-grid{columns:3;column-gap:1rem;margin-bottom:2rem;}
.art-grid-item{break-inside:avoid;margin-bottom:1rem;position:relative;overflow:hidden;border-radius:6px;border:1px solid var(--border);cursor:pointer;transition:border-color .3s,transform .3s;background:var(--card);}
.art-grid-item:hover{border-color:rgba(79,255,176,.4);transform:scale(1.01);}
.art-grid-item .art-placeholder{width:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0d1a2e,#0a2a1a);color:var(--muted);font-family:'DM Mono',monospace;font-size:.7rem;padding:3rem 0;}
.art-grid-num{position:absolute;bottom:.6rem;left:.7rem;font-family:'DM Mono',monospace;font-size:.6rem;color:var(--accent);letter-spacing:.1em;background:rgba(8,13,26,.75);padding:.15rem .45rem;border-radius:2px;opacity:0;transition:opacity .3s;}
.art-grid-item:hover .art-grid-num{opacity:1;}

/* CONTACT */
#contact{border-top:1px solid var(--border);text-align:center;padding:6rem 0 4rem;}
.csub{font-family:'DM Mono',monospace;font-size:.78rem;color:var(--muted);margin-bottom:2.2rem;}
.fl{display:flex;justify-content:center;gap:2rem;margin-top:3.5rem;font-family:'DM Mono',monospace;font-size:.7rem;}
.fl a{color:var(--muted);text-decoration:none;transition:color .2s;}
.fl a:hover{color:var(--accent);}
.fcp{margin-top:1.8rem;font-family:'DM Mono',monospace;font-size:.63rem;color:rgba(90,98,120,.45);}

/* ANIMATIONS */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s;}
.rv.vis{opacity:1;transform:none;}
.bl{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;opacity:.08;}
.bl1{width:480px;height:480px;background:var(--accent);top:-100px;right:-80px;animation:bf 12s ease-in-out infinite alternate;}
.bl2{width:360px;height:360px;background:var(--accent2);bottom:8%;left:-70px;animation:bf 16s 4s ease-in-out infinite alternate;}
@keyframes fu{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
@keyframes fi{from{opacity:0;}to{opacity:1;}}
@keyframes bf{from{transform:translate(0,0) scale(1);}to{transform:translate(28px,36px) scale(1.08);}}
@keyframes twinkle{0%,100%{opacity:.3;}50%{opacity:1;}}

/* RESPONSIVE */
@media(max-width:900px){
  .hi{grid-template-columns:1fr;gap:2rem;padding-top:6rem;}
  .ag{grid-template-columns:1fr;}
  .mini-cards{grid-template-columns:1fr 1fr;}
  .art-grid{columns:2;}
}
@media(max-width:768px){
  nav{padding:1.1rem 1.4rem;}
  .nl,.ni{display:none;}
  #home{padding-top:5rem;}
  .hbg{display:flex;}
  .ct{padding:0 1.4rem;}
  section{padding:5rem 0;}
  .mini-cards{grid-template-columns:1fr;}
  .feat-slide-img,.feat-slide-img-placeholder{height:260px;}
  .hd{max-width:100%;}
}
@media(max-width:480px){
  .ct{padding:0 1rem;}
  #home{min-height:auto;padding:4rem 0 2rem;}
  section{padding:3.5rem 0;}
  .hn{font-size:2rem;}
  .hd{font-size:.88rem;max-width:100%;}
  .hr{font-size:.74rem;}
  .ey{font-size:.65rem;}
  .art-grid{columns:1;}
  .art-grid-item{max-height:75vh;overflow:hidden;}
  .art-grid-item img{width:100%!important;height:100%!important;object-fit:cover;}
  .feat-slide-img,.feat-slide-img-placeholder{height:200px;}
  .feat-slide-body{padding:1rem 1rem;}
  .feat-slide-title{font-size:1.1rem;}
  .feat-slide-desc{font-size:.78rem;}
  .feat-prev,.feat-next{width:48px;height:48px;font-size:1rem;}
  .feat-prev{left:.5rem;}
  .feat-next{right:.5rem;}
  .ag{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2rem;}
  .ag .ask{justify-content:center;}
  .ask{gap:.4rem;}
  .sk{font-size:.62rem;padding:.25rem .5rem;}
  .mini-card{padding:1rem;}
  .fl{gap:1rem;flex-wrap:wrap;}
  .hi{gap:1.5rem;}
}

/* GAME SECTION */
.game-section {
  margin-top: 3rem;
  border-top: 1px solid var(--border);
  padding-top: 2rem;
}
.game-section #titleScreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
}
.game-section #mainTitle {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  letter-spacing: 3px;
  margin-bottom: 1rem;
  color: #00ff88;
  font-family: 'DM Mono', monospace;
}
.game-section #warningText {
  max-width: 500px;
  opacity: 0.8;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  line-height: 1.6;
  font-family: 'DM Mono', monospace;
  color: #00ff88;
}
.game-section button {
  padding: 8px 18px;
  margin: 6px;
  background: black;
  color: #00ff88;
  border: 1px solid #00ff88;
  cursor: pointer;
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  transition: 0.3s;
}
.game-section button:hover {
  background: #00ff88;
  color: black;
}
.game-section #dashboard {
  display: none;
}
.game-section .dashboardGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.game-section .panel {
  border: 1px solid #00ff88;
  padding: 12px;
  box-shadow: 0 0 8px rgba(0,255,136,0.3);
  background: rgba(0,0,0,0.3);
}
.game-section .panel h2 {
  font-size: 0.78rem;
  margin-bottom: 0.6rem;
  color: #00ff88;
  font-family: 'DM Mono', monospace;
  letter-spacing: 1px;
}
.game-section #terminal {
  font-size: 0.72rem;
  line-height: 1.5;
  font-family: 'DM Mono', monospace;
  color: #00ff88;
  min-height: 80px;
}
.game-section #terminal input {
  background: black;
  color: #00ff00;
  border: 1px solid #00ff00;
  padding: 5px 8px;
  outline: none;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  width: 90%;
  margin-top: 4px;
}
.game-section .barContainer {
  width: 100%;
  height: 14px;
  background: rgba(0,0,0,0.5);
  margin-bottom: 10px;
  border: 1px solid rgba(0,255,136,0.3);
}
.game-section .bar {
  height: 100%;
  width: 50%;
  background: #00ff88;
}
.game-section .monitorGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.game-section .monitor {
  border: 1px solid #00ff88;
  padding: 10px;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: #00ff88;
  background: rgba(0,0,0,0.3);
}
.game-section .redMode {
  animation: redPulse 1s infinite alternate;
}
@keyframes redPulse {
  from { background: #000; }
  to { background: #200000; }
}
.game-section .flicker {
  animation: flickerAnim 0.2s infinite;
}
@keyframes flickerAnim {
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}
.game-section .corrupted {
  background: #ff0033;
}
.hardGlitch {
  filter: contrast(200%) brightness(150%);
}
.game-section #restartBtn {
  background: black;
  color: #00ff88;
  border: 2px solid #00ff88;
  padding: 8px 16px;
  margin-top: 10px;
  cursor: pointer;
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  transition: 0.3s;
}
.game-section #restartBtn:hover {
  background: #00ff88;
  color: black;
}

@media(max-width:768px){
  .game-section .dashboardGrid {
    grid-template-columns: 1fr;
  }
  .game-section .panel {
    padding: 10px;
  }
}
@media(max-width:480px){
  .game-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
  }
  .game-section #mainTitle {
    font-size: 1rem;
  }
  .game-section #warningText {
    font-size: 0.72rem;
  }
  .game-section .dashboardGrid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .game-section .panel {
    padding: 8px;
  }
}