:root {
  --bg: #060b18;
  --card-bg: rgba(10,16,38,0.75);
  --cyan: #00d4ff;
  --blue: #1a4aff;
  --pink: #ff2d78;
  --pink-soft: #ff6eb4;
  --white: #e8f0ff;
  --accent: #00d4ff;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--white);
  font-family:'Syne',sans-serif;
  overflow-x:hidden;
  cursor:none;
}

/* CURSOR */
#cur{width:10px;height:10px;background:var(--cyan);border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:9999;mix-blend-mode:screen;}
#cur-ring{width:28px;height:28px;border:1px solid var(--cyan);border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:9998;opacity:0.35;}

/* BG */
#bg-grad{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg);}
#bg-grad::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");opacity:0.06;mix-blend-mode:overlay;}
#circuit-cv{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.12;}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.1rem 6vw;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(18px);background:rgba(6,11,24,0.8);border-bottom:1px solid rgba(255,255,255,0.04);}
.nav-logo{font-family:'Orbitron',monospace;font-size:1rem;font-weight:900;background:linear-gradient(90deg,var(--cyan),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:2px;text-decoration:none;}
.nav-links{display:flex;gap:1.8rem;list-style:none;}
.nav-links a{font-family:'Share Tech Mono',monospace;font-size:0.68rem;color:rgba(232,240,255,0.45);text-decoration:none;letter-spacing:2px;text-transform:uppercase;transition:color .3s;position:relative;}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--accent);transition:width .3s;}
.nav-links a:hover{color:var(--accent);}
.nav-links a:hover::after{width:100%;}

/* MAIN */
main{position:relative;z-index:2;}
section{min-height:100vh;padding:0 6vw;}

/* HERO */
#hero{display:flex;align-items:center;justify-content:space-between;padding-top:0;overflow:hidden;position:relative;}
.hero-left{flex:1;}
.hero-tag{font-family:'Share Tech Mono',monospace;font-size:0.75rem;color:var(--cyan);letter-spacing:4px;text-transform:uppercase;margin-bottom:1.2rem;opacity:0;}
.hero-name{font-family:'Orbitron',monospace;font-size:clamp(3.5rem,9vw,8rem);font-weight:900;line-height:0.9;letter-spacing:-2px;margin-bottom:1.5rem;opacity:0;}
.hero-name span{display:inline-block;background:linear-gradient(135deg,var(--cyan),var(--blue),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-sub{font-family:'Share Tech Mono',monospace;font-size:clamp(0.8rem,1.4vw,1rem);color:rgba(232,240,255,0.55);line-height:1.9;max-width:480px;margin-bottom:2.5rem;opacity:0;}
.hero-cta{display:flex;gap:1rem;opacity:0;}
.btn{font-family:'Share Tech Mono',monospace;font-size:0.8rem;letter-spacing:2px;text-transform:uppercase;padding:.8rem 1.8rem;border:none;cursor:pointer;text-decoration:none;transition:all .3s;position:relative;overflow:hidden;}
.btn-p{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#000;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);}
.btn-p::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--cyan),var(--pink));opacity:0;transition:opacity .3s;}
.btn-p:hover::before{opacity:1;}
.btn-o{background:transparent;color:var(--cyan);border:1px solid var(--cyan);clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);}
.btn-o:hover{background:rgba(0,212,255,0.1);}

/* PFP */
.hero-right{flex:0 0 360px;display:flex;align-items:center;justify-content:flex-end;position:relative;opacity:0;}
.pfp-wrap{position:relative;width:280px;height:280px;}
.pr{position:absolute;inset:-18px;border-radius:50%;border:1px solid transparent;border-top-color:var(--cyan);border-right-color:var(--pink);animation:spin 6s linear infinite;}
.pr2{position:absolute;inset:-32px;border-radius:50%;border:1px dashed rgba(0,212,255,0.25);animation:spin 14s linear infinite reverse;}
.pr3{position:absolute;inset:-48px;border-radius:50%;animation:spin 22s linear infinite;}
.pr3::before,.pr3::after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;top:50%;left:-3.5px;margin-top:-3.5px;background:var(--cyan);box-shadow:0 0 10px var(--cyan);}
.pr3::after{left:auto;right:-3.5px;background:var(--pink);box-shadow:0 0 10px var(--pink);}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.pfp-img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid rgba(0,212,255,0.25);background:linear-gradient(135deg,#0d1b3e,#1a0a2e);overflow:hidden;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;}
.pfp-img img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.pfp-fallback{font-family:'Orbitron',monospace;font-size:5rem;font-weight:900;background:linear-gradient(135deg,var(--cyan),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.status-badge{position:absolute;bottom:8px;right:-16px;background:#24242bb2;border:1px solid rgba(0,212,255,0.35);padding:.45rem .9rem;font-family:'Share Tech Mono',monospace;font-size:0.65rem;color:var(--cyan);letter-spacing:2px;clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);z-index:3;}
.s-dot{display:inline-block;width:5px;height:5px;background:#00ff88;border-radius:50%;margin-right:5px;box-shadow:0 0 7px #00ff88;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* SCROLL HINT */
.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;font-family:'Share Tech Mono',monospace;font-size:0.6rem;color:rgba(232,240,255,0.25);letter-spacing:3px;animation:bob 2s ease-in-out infinite;}
.s-line{width:1px;height:45px;background:linear-gradient(to bottom,var(--cyan),transparent);}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}

/* GEO + GLOW */
.geo{position:absolute;pointer-events:none;}
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;}

/* SECTION COMMONS */
.sec-label{font-family:'Share Tech Mono',monospace;font-size:0.68rem;color:var(--accent);letter-spacing:5px;text-transform:uppercase;margin-bottom:.8rem;}
.sec-div{width:55px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--pink));margin:1rem 0;}
.sec-div.center{margin:1rem auto;}
.sec-title{font-family:'Orbitron',monospace;font-size:clamp(1.7rem,3.8vw,3rem);font-weight:700;line-height:1.1;margin-bottom:1.5rem;}
.ac{color:var(--cyan);}
.ap{color:var(--pink);}
.sec-header{text-align:center;margin-bottom:4.5rem;}

/* ABOUT */
#about{display:flex;align-items:center;gap:5vw;padding-top:7rem;padding-bottom:7rem;}
.about-vis{flex:0 0 40%;position:relative;height:380px;}
.a-card{position:absolute;background:var(--card-bg);border:1px solid rgba(0,212,255,0.13);padding:1.4rem;font-family:'Share Tech Mono',monospace;font-size:0.72rem;color:rgba(232,240,255,0.58);line-height:1.85;backdrop-filter:blur(10px);}
.a-card:nth-child(1){top:0;left:0;width:72%;}
.a-card:nth-child(2){top:48%;right:0;width:58%;}
.a-card .ct{font-size:0.62rem;color:var(--cyan);letter-spacing:3px;text-transform:uppercase;margin-bottom:.7rem;}
.stat-row{display:flex;justify-content:space-between;margin-top:.9rem;}
.stat{text-align:center;}
.stat-n{font-family:'Orbitron',monospace;font-size:1.4rem;font-weight:700;color:var(--cyan);}
.stat-l{font-size:0.58rem;color:rgba(232,240,255,0.35);letter-spacing:2px;}
.about-txt{flex:1;}
.bio{font-size:.95rem;color:rgba(232,240,255,0.6);line-height:1.9;margin-bottom:1.4rem;max-width:520px;}
.tag-list{display:flex;flex-wrap:wrap;gap:.5rem;}
.tag{font-family:'Share Tech Mono',monospace;font-size:0.68rem;padding:.28rem .75rem;border:1px solid rgba(0,212,255,0.28);color:var(--cyan);letter-spacing:1px;clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);background:rgba(0,212,255,0.04);transition:all .3s;}
.tag:hover{background:rgba(0,212,255,0.12);border-color:var(--cyan);}

/* SKILLS */
#skills{padding-top:7rem;padding-bottom:7rem;}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.4rem;}
.sk-card{background:var(--card-bg);border:1px solid rgba(0,212,255,0.08);padding:1.8rem;position:relative;overflow:hidden;transition:all .3s;opacity:0;transform:translateY(40px);cursor:default;}
.sk-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(to bottom,var(--cyan),transparent);transition:all .3s;}
.sk-card:hover{border-color:rgba(0,212,255,0.35);transform:translateY(-4px)!important;}
.sk-card:hover::before{width:100%;opacity:0.04;}
.sk-icon{font-size:1.8rem;margin-bottom:.8rem;display:block;line-height:1;color:var(--cyan);}
.sk-icon i{display:inline-block;text-shadow:0 0 12px rgba(0,212,255,0.35);}
.sk-name{font-family:'Orbitron',monospace;font-size:0.85rem;font-weight:700;color:var(--white);margin-bottom:.4rem;letter-spacing:1px;}
.sk-desc{font-family:'Share Tech Mono',monospace;font-size:0.68rem;color:rgba(232,240,255,0.45);line-height:1.7;margin-bottom:1.1rem;}
.bar-bg{height:2px;background:rgba(255,255,255,0.05);overflow:hidden;}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue));width:0%;transition:width 1.6s cubic-bezier(.4,0,.2,1);box-shadow:0 0 6px var(--cyan);}

/* PROJECTS */
#projects{padding-top:7rem;padding-bottom:7rem;}
.proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.8rem;margin-top:2.5rem;}
.proj-card{background:var(--card-bg);border:1px solid rgba(255,45,120,0.09);padding:1.8rem;position:relative;overflow:hidden;transition:all .4s;opacity:0;transform:translateX(-30px);}
.proj-card::after{content:'';position:absolute;bottom:0;right:0;width:55px;height:55px;background:linear-gradient(135deg,transparent 50%,rgba(255,45,120,0.12) 50%);transition:all .4s;}
.proj-card:hover{border-color:rgba(255,45,120,0.35);transform:translateY(-6px)!important;}
.proj-card:hover::after{width:110px;height:110px;}
.proj-num{font-family:'Orbitron',monospace;font-size:2.5rem;font-weight:900;color:rgba(255,45,120,0.1);line-height:1;margin-bottom:.4rem;}
.proj-title{font-family:'Orbitron',monospace;font-size:1rem;font-weight:700;color:var(--white);margin-bottom:.5rem;letter-spacing:.5px;}
.proj-desc{font-size:.82rem;color:rgba(232,240,255,0.5);line-height:1.75;margin-bottom:1.1rem;}
.proj-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.1rem;}
.pt{font-family:'Share Tech Mono',monospace;font-size:0.62rem;padding:.18rem .55rem;background:rgba(255,45,120,0.08);border:1px solid rgba(255,45,120,0.22);color:var(--pink-soft);letter-spacing:1px;}
.proj-link{font-family:'Share Tech Mono',monospace;font-size:0.68rem;color:var(--cyan);text-decoration:none;letter-spacing:2px;text-transform:uppercase;display:inline-flex;align-items:center;gap:.4rem;transition:all .3s;}
.proj-link::after{content:'→';transition:transform .3s;}
.proj-link:hover{color:var(--pink);}
.proj-link:hover::after{transform:translateX(4px);}

/* SOCIALS */
#socials{padding-top:7rem;padding-bottom:7rem;text-align:center;}
.soc-sub{font-family:'Share Tech Mono',monospace;font-size:.82rem;color:rgba(232,240,255,0.35);margin-bottom:3.5rem;letter-spacing:2px;}
.soc-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:1.4rem;margin-bottom:3rem;}
.soc-card{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:1.8rem 2.2rem;background:var(--card-bg);border:1px solid rgba(255,255,255,0.06);text-decoration:none;color:var(--white);min-width:150px;position:relative;overflow:hidden;opacity:0;transform:translateY(30px);transition:all .4s;clip-path:polygon(12px 0%,100% 0%,calc(100% - 12px) 100%,0% 100%);cursor:pointer;}
.soc-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,212,255,0.08),rgba(255,45,120,0.08));opacity:0;transition:opacity .4s;}
.soc-card:hover{transform:translateY(-7px)!important;border-color:rgba(0,212,255,0.35);}
.soc-card:hover::before{opacity:1;}
.soc-icon{font-size:2.2rem;line-height:1;}
.soc-name{font-family:'Orbitron',monospace;font-size:0.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent);}
.soc-handle{font-family:'Share Tech Mono',monospace;font-size:0.65rem;color:rgba(232,240,255,0.35);}
.soc-hint{font-family:'Share Tech Mono',monospace;font-size:0.55rem;color:rgba(232,240,255,0.18);letter-spacing:1px;}

/* COPY TOAST */
.copy-toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background:rgba(0,212,255,0.12);border:1px solid var(--cyan);padding:.6rem 1.5rem;font-family:'Share Tech Mono',monospace;font-size:0.72rem;color:var(--cyan);letter-spacing:2px;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);z-index:9999;opacity:0;pointer-events:none;backdrop-filter:blur(10px);}

/* DISCORD SERVER CARD */
.dc-server-card{display:flex;align-items:center;gap:1.4rem;padding:1.4rem 2rem;background:var(--card-bg);border:1px solid rgba(88,101,242,0.28);max-width:500px;margin:0 auto 3rem;transition:all .3s;clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);}
.dc-server-card:hover{border-color:rgba(88,101,242,0.55);}
.dc-srv-img{width:62px;height:62px;border-radius:16px;background:linear-gradient(135deg,#5865F2,#3b4bdb);display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0;overflow:hidden;border:1px solid rgba(88,101,242,0.4);}
.dc-srv-img img{width:100%;height:100%;object-fit:cover;border-radius:16px;}
.dc-srv-info{flex:1;text-align:left;}
.dc-srv-name{font-family:'Orbitron',monospace;font-size:.92rem;font-weight:700;color:var(--white);margin-bottom:.3rem;}
.dc-srv-label{font-family:'Share Tech Mono',monospace;font-size:.62rem;color:rgba(232,240,255,0.35);letter-spacing:2px;}
.dc-join-btn{font-family:'Share Tech Mono',monospace;font-size:.65rem;letter-spacing:2px;text-transform:uppercase;padding:.5rem 1.1rem;background:rgba(88,101,242,0.18);border:1px solid rgba(88,101,242,0.45);color:#7289da;cursor:pointer;text-decoration:none;clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);transition:all .3s;white-space:nowrap;}
.dc-join-btn:hover{background:rgba(88,101,242,0.38);color:var(--white);}

/* TERMINAL */
.terminal{max-width:560px;margin:0 auto;background:rgba(0,0,0,0.65);border:1px solid rgba(0,212,255,0.18);border-radius:4px;overflow:hidden;}
.t-bar{background:rgba(0,212,255,0.04);padding:.45rem .9rem;display:flex;align-items:center;gap:.45rem;border-bottom:1px solid rgba(0,212,255,0.08);}
.td{width:9px;height:9px;border-radius:50%;}
.td:nth-child(1){background:#ff5f56;}
.td:nth-child(2){background:#ffbd2e;}
.td:nth-child(3){background:#27c93f;}
.t-title-bar{font-family:'Share Tech Mono',monospace;font-size:0.65rem;color:rgba(232,240,255,0.3);margin-left:.5rem;letter-spacing:2px;}
.t-body{padding:1.4rem;font-family:'Share Tech Mono',monospace;font-size:.75rem;color:rgba(232,240,255,0.65);line-height:2;}
.tl{display:block;}
.tp{color:var(--cyan);}
.to{color:rgba(232,240,255,0.38);}
.tc{display:inline-block;width:7px;height:13px;background:var(--cyan);vertical-align:middle;animation:blink 1s step-end infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* FOOTER */
footer{position:relative;z-index:2;text-align:center;padding:2.5rem 6vw;border-top:1px solid rgba(255,255,255,0.04);}
.f-name{font-family:'Orbitron',monospace;font-size:1.3rem;font-weight:900;background:linear-gradient(135deg,var(--cyan),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.4rem;}
.f-sub{font-family:'Share Tech Mono',monospace;font-size:0.65rem;color:rgba(232,240,255,0.18);letter-spacing:3px;}

@media (max-width: 900px){
  body{cursor:auto;}
  #cur,#cur-ring{display:none;}
  nav{
    padding:1rem 5vw;
    flex-direction:column;
    align-items:flex-start;
    gap:.8rem;
  }
  .nav-links{
    width:100%;
    max-width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.75rem 1rem;
  }
  .nav-links li{min-width:0;}
  .nav-links a{display:block;}
  section{
    min-height:auto;
    padding:0 5vw;
  }
  #hero{
    flex-direction:column;
    justify-content:center;
    gap:3rem;
    padding-top:8.5rem;
    padding-bottom:5rem;
    text-align:center;
  }
  .hero-left{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .hero-sub{
    max-width:36rem;
  }
  .hero-cta{
    flex-wrap:wrap;
    justify-content:center;
  }
  .hero-right{
    flex:0 0 auto;
    width:100%;
    justify-content:center;
  }
  .scroll-hint{
    bottom:1rem;
  }
  #about{
    flex-direction:column;
    gap:3rem;
    padding-top:5rem;
    padding-bottom:5rem;
  }
  .about-vis{
    flex:none;
    width:100%;
    max-width:34rem;
    height:auto;
    display:grid;
    gap:1rem;
  }
  .about-vis .glow,
  .about-vis svg{
    display:none;
  }
  .a-card{
    position:relative;
    top:auto;
    right:auto;
    left:auto;
    width:100% !important;
  }
  .about-txt{
    width:100%;
    text-align:center;
  }
  .bio{
    max-width:none;
  }
  .tag-list{
    justify-content:center;
  }
  .skills-grid,
  .proj-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .soc-grid{
    gap:1rem;
  }
  .soc-card{
    min-width:min(100%,220px);
    flex:1 1 180px;
  }
  .dc-server-card{
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:1.3rem;
  }
  .dc-srv-info{
    text-align:center;
  }
  .terminal{
    width:100%;
  }
  .t-body{
    font-size:.7rem;
    line-height:1.8;
    word-break:break-word;
  }
}

@media (max-width: 560px){
  nav{
    padding:.9rem 4vw;
  }
  .nav-logo{
    font-size:.92rem;
  }
  .nav-links{
    gap:.65rem .85rem;
  }
  .nav-links a{
    font-size:.62rem;
    letter-spacing:1px;
  }
  .hero-name{
    font-size:clamp(2.7rem,18vw,4.3rem);
    letter-spacing:-1px;
  }
  .hero-tag{
    font-size:.65rem;
    letter-spacing:3px;
  }
  .hero-sub{
    font-size:.76rem;
    line-height:1.75;
  }
  .btn{
    width:100%;
    justify-content:center;
    padding:.85rem 1.2rem;
  }
  .hero-cta{
    width:100%;
  }
  .pfp-wrap{
    width:220px;
    height:220px;
  }
  .pr{inset:-14px;}
  .pr2{inset:-24px;}
  .pr3{inset:-34px;}
  .status-badge{
    right:50%;
    bottom:-10px;
    transform:translateX(50%);
    white-space:nowrap;
  }
  .sec-label{
    font-size:.62rem;
    letter-spacing:3px;
  }
  .sec-title{
    font-size:clamp(1.5rem,9vw,2.2rem);
  }
  .a-card{
    padding:1.1rem;
  }
  .stat-row{
    gap:.75rem;
  }
  .sk-card,
  .proj-card{
    padding:1.3rem;
  }
  .proj-grid{
    gap:1.2rem;
  }
  .dc-server-card{
    gap:1rem;
  }
  .dc-join-btn{
    width:100%;
    text-align:center;
  }
  .terminal .t-body{
    padding:1rem;
    font-size:.66rem;
  }
  footer{
    padding:2rem 4vw;
  }
}