/* ══════════════════════════════════════════════════════
   FAHRI HADI PRATAMA — Anti-Gravity Futuristic Portfolio
   style.css
══════════════════════════════════════════════════════ */

/* ── VARIABLES ──────────────────────────────────────── */
:root {
  --bg:       #05050e;
  --bg2:      #09091a;
  --surface:  rgba(255,255,255,0.04);
  --border:   rgba(255,255,255,0.07);

  --cx:       #00f7ff;          /* neon cyan  */
  --cx-dim:   rgba(0,247,255,.12);
  --cx-glow:  0 0 20px rgba(0,247,255,.55), 0 0 60px rgba(0,247,255,.2);
  --cx-gs:    0 0 10px rgba(0,247,255,.4),  0 0 28px rgba(0,247,255,.15);

  --mg:       #ff007f;          /* neon magenta */
  --mg-dim:   rgba(255,0,127,.12);
  --mg-glow:  0 0 20px rgba(255,0,127,.55), 0 0 60px rgba(255,0,127,.2);
  --mg-gs:    0 0 10px rgba(255,0,127,.4),  0 0 28px rgba(255,0,127,.15);

  --text:     #bbc4de;
  --dim:      #4a5070;
  --white:    #ffffff;

  --fdisp:  'Orbitron', monospace;
  --fbody:  'Exo 2', sans-serif;
  --fmono:  'JetBrains Mono', monospace;

  --r:      14px;
  --tr:     0.3s cubic-bezier(.4,0,.2,1);
}

/* ── RESET ──────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--bg);color:var(--text);font-family:var(--fbody);font-weight:400;line-height:1.7;overflow-x:hidden;cursor:none}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:none;border:none;background:none}
::selection{background:var(--cx);color:#000}

/* ── SCROLLBAR ──────────────────────────────────────── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--cx),var(--mg));border-radius:4px}

/* ── SPACE CANVAS ───────────────────────────────────── */
#spaceCanvas{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ── THREE.JS 3D CANVAS ─────────────────────────────── */
#threeCanvas{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.75;
}

/* ── NEBULA LAYER ───────────────────────────────────── */
.nebula-layer{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(0,80,120,.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 70%, rgba(100,0,80,.15) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 50% 50%, rgba(0,40,80,.08) 0%, transparent 70%);
}

/* ── PERSPECTIVE GRID FLOOR ─────────────────────────── */
.grid-floor{
  position:fixed;bottom:0;left:0;right:0;height:45vh;z-index:2;pointer-events:none;
  background:
    linear-gradient(to top, rgba(0,247,255,.04) 0%, transparent 100%),
    repeating-linear-gradient(90deg, rgba(0,247,255,.04) 0, rgba(0,247,255,.04) 1px, transparent 1px, transparent 80px),
    repeating-linear-gradient(0deg, rgba(0,247,255,.04) 0, rgba(0,247,255,.04) 1px, transparent 1px, transparent 80px);
  -webkit-mask-image:linear-gradient(to top, black 0%, transparent 100%);
  mask-image:linear-gradient(to top, black 0%, transparent 100%);
  perspective:600px;transform-origin:bottom center;transform:rotateX(60deg)
}

/* ── CUSTOM CURSOR ──────────────────────────────────── */
.cur-dot{
  position:fixed;width:8px;height:8px;background:var(--cx);border-radius:50%;
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
  box-shadow:var(--cx-gs);transition:background .2s
}
.cur-halo{
  position:fixed;width:38px;height:38px;border:1.5px solid rgba(0,247,255,.45);
  border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);
  transition:width .2s,height .2s,border-color .2s
}
.cur-halo.hov{width:54px;height:54px;border-color:var(--mg);box-shadow:var(--mg-gs)}

/* ── GLASS UTILITY ──────────────────────────────────── */
.glass{
  background:rgba(8,12,30,.58);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border:1px solid var(--border);
  border-radius:var(--r)
}

/* ── ANTI-GRAVITY FLOAT ─────────────────────────────── */
.float-el{animation:agFloat 5.5s ease-in-out infinite}
.fd1{animation-delay:0s}
.fd2{animation-delay:1.1s}
.fd3{animation-delay:2.2s}

@keyframes agFloat{
  0%,100%{transform:translateY(0)   rotate(0deg)    scale(1)}
  35%    {transform:translateY(-14px) rotate(.5deg)  scale(1.012)}
  65%    {transform:translateY(-7px)  rotate(-.3deg) scale(1.006)}
}

/* ── REVEAL ON SCROLL ───────────────────────────────── */
.reveal{opacity:0;transform:translateY(48px);transition:opacity .7s cubic-bezier(.23,1,.32,1) var(--gd,.0s),transform .7s cubic-bezier(.23,1,.32,1) var(--gd,.0s)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ── COLOR HELPERS ──────────────────────────────────── */
.cx{color:var(--cx)}
.mg{color:var(--mg)}

/* ════════════════════════════════════
   NAVBAR
════════════════════════════════════ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:300;
  padding:1.2rem 0;transition:all var(--tr)
}
#nav.scrolled{
  background:rgba(5,5,14,.8);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);padding:.75rem 0
}
.nav-inner{
  max-width:1200px;margin-inline:auto;padding-inline:5%;
  display:flex;align-items:center;justify-content:space-between
}
.nav-brand{
  font-family:var(--fdisp);font-size:1.05rem;font-weight:700;
  letter-spacing:.05em;color:var(--white)
}
.nb-lt{color:var(--cx);font-size:1.3rem}
.nb-name{margin:0 .15em}

.nav-links{display:flex;gap:2rem}
.nav-links a{
  font-family:var(--fdisp);font-size:.68rem;letter-spacing:.12em;
  color:var(--dim);transition:color var(--tr)
}
.nav-links a:hover{color:var(--cx);text-shadow:0 0 8px var(--cx)}

.nav-burger{display:none;flex-direction:column;gap:5px;padding:4px}
.nav-burger span{display:block;width:24px;height:2px;background:var(--cx);border-radius:2px;transition:all var(--tr)}

.nav-drawer{
  display:none;flex-direction:column;align-items:center;gap:1.5rem;
  padding:2rem;background:rgba(5,5,14,.95);
  backdrop-filter:blur(20px);border-bottom:1px solid var(--border)
}
.nav-drawer.open{display:flex}
.dr-link{
  font-family:var(--fdisp);font-size:.75rem;letter-spacing:.15em;
  color:var(--dim);transition:color var(--tr)
}
.dr-link:hover{color:var(--cx)}

/* ════════════════════════════════════
   HERO
════════════════════════════════════ */
#hero{
  position:relative;z-index:10;
  min-height:100vh;display:flex;align-items:center;
  padding:6rem 5% 4rem
}
.hero-wrap{
  max-width:1200px;margin-inline:auto;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:3rem
}

/* --- Hero copy --- */
.hero-copy{flex:1;min-width:0}

.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.3rem .9rem;
  border:1px solid rgba(0,247,255,.3);border-radius:20px;
  background:rgba(0,247,255,.07);
  font-family:var(--fmono);font-size:.65rem;letter-spacing:.12em;
  color:var(--cx);margin-bottom:1.5rem
}
.badge-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--cx);animation:blink 1.6s ease-in-out infinite
}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 6px var(--cx)}50%{opacity:.3;box-shadow:none}}

.hero-greet{font-size:1rem;color:var(--dim);letter-spacing:.08em;margin-bottom:.3rem}

.hero-name{font-family:var(--fdisp);font-weight:900;line-height:1.05;margin-bottom:1.4rem}
.hn-top{font-size:clamp(2.2rem,5.5vw,4.4rem);color:var(--white);display:block}
.hn-bot{
  font-size:clamp(2.2rem,5.5vw,4.4rem);display:block;
  background:linear-gradient(135deg,var(--cx),var(--mg));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}

.hero-typer{display:flex;align-items:center;font-size:1.1rem;color:var(--text);margin-bottom:1.2rem}
.typer-pre{color:var(--dim)}
.typer-target{color:var(--cx);font-family:var(--fmono);font-weight:500}
.typer-cur{color:var(--mg);animation:blink 1s step-end infinite;margin-left:2px}

.hero-bio{font-size:1rem;color:var(--dim);max-width:500px;line-height:1.75;margin-bottom:2rem}

.hero-btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2.5rem}

.hbtn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.5rem;border-radius:8px;
  font-family:var(--fdisp);font-size:.7rem;letter-spacing:.1em;font-weight:700;
  transition:all var(--tr)
}
.hbtn-cyan{background:linear-gradient(135deg,var(--cx),#0090ff);color:#000;box-shadow:0 0 24px rgba(0,247,255,.3)}
.hbtn-cyan:hover{transform:translateY(-3px);box-shadow:0 0 40px rgba(0,247,255,.55)}
.hbtn-mg  {background:linear-gradient(135deg,var(--mg),#c200ff);color:#fff;box-shadow:0 0 24px rgba(255,0,127,.3)}
.hbtn-mg:hover  {transform:translateY(-3px);box-shadow:0 0 40px rgba(255,0,127,.55)}
.hbtn-ghost{border:1px solid var(--border);color:var(--text)}
.hbtn-ghost:hover{border-color:var(--cx);color:var(--cx);box-shadow:0 0 16px rgba(0,247,255,.12)}
.w-full{width:100%;justify-content:center}

.hero-stats{display:flex;align-items:center;gap:1.5rem}
.hs{font-family:var(--fdisp);text-align:center}
.hs-n{font-size:1.8rem;font-weight:900;color:var(--white)}
.hs sup{color:var(--cx);font-size:.9rem}
.hs small{font-size:.6rem;letter-spacing:.12em;color:var(--dim);display:block;margin-top:2px}
.hs-div{width:1px;height:36px;background:var(--border)}

/* --- Hero orb (photo) --- */
.hero-orb{
  position:relative;width:380px;height:380px;
  flex-shrink:0;display:flex;align-items:center;justify-content:center
}

.orb-rings{position:absolute;inset:0}
.orb-ring{
  position:absolute;border-radius:50%;border:1px solid;
  animation:spinRing 10s linear infinite
}
.r1{inset:20px;border-color:rgba(0,247,255,.18);animation-duration:8s}
.r2{inset:0;border-color:rgba(255,0,127,.12);animation-duration:12s;animation-direction:reverse}
.r3{inset:40px;border-color:rgba(0,247,255,.08);animation-duration:16s}
@keyframes spinRing{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.orb-photo{
  position:relative;width:200px;height:200px;border-radius:50%;
  border:2px solid rgba(0,247,255,.4);
  box-shadow:0 0 0 8px rgba(0,247,255,.04),var(--cx-glow);
  overflow:hidden;z-index:2
}
.orb-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.photo-fallback{
  display:none;width:100%;height:100%;
  background:linear-gradient(135deg,rgba(0,247,255,.15),rgba(255,0,127,.1));
  align-items:center;justify-content:center
}
.photo-fallback i{font-size:4rem;color:var(--cx);opacity:.7}
.orb-scan{
  position:absolute;top:-100%;left:0;right:0;height:100%;
  background:linear-gradient(to bottom,transparent,rgba(0,247,255,.12),transparent);
  animation:scanAnim 3s linear infinite
}
@keyframes scanAnim{to{top:100%}}

/* floating tech chips around orb */
.orb-chip{
  position:absolute;
  font-family:var(--fmono);font-size:.65rem;letter-spacing:.1em;
  padding:.25rem .65rem;border-radius:20px;
  background:rgba(8,12,30,.7);border:1px solid;
  backdrop-filter:blur(8px);z-index:3;white-space:nowrap
}
.chip-php  {border-color:rgba(0,247,255,.4);color:var(--cx);top:10%;right:-5%}
.chip-js   {border-color:rgba(255,200,0,.4);color:#ffc800;top:35%;right:-18%}
.chip-py   {border-color:rgba(70,140,255,.4);color:#4694ff;bottom:30%;right:-12%}
.chip-sql  {border-color:rgba(255,0,127,.4);color:var(--mg);bottom:12%;left:-10%}
.chip-godot{border-color:rgba(70,200,120,.4);color:#46c878;top:18%;left:-14%}

/* particle dots behind orb */
.orb-particles{position:absolute;inset:0;z-index:1;pointer-events:none}

/* scroll hint */
.scroll-hint{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:var(--fmono);font-size:.6rem;letter-spacing:.18em;
  color:var(--dim);animation:shBob 2s ease-in-out infinite
}
.sh-line{width:1px;height:36px;background:linear-gradient(to bottom,var(--cx),transparent)}
@keyframes shBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}

/* ════════════════════════════════════
   SECTIONS SHARED
════════════════════════════════════ */
section{position:relative;z-index:10;padding:6rem 5%}
.sec-wrap{max-width:1200px;margin-inline:auto}

.sec-head{text-align:center;margin-bottom:3.5rem}
.sec-tag{
  display:block;font-family:var(--fmono);font-size:.7rem;
  letter-spacing:.2em;color:var(--dim);margin-bottom:.6rem
}
.sec-head h2{
  font-family:var(--fdisp);font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:700;color:var(--white)
}
.sec-sub{font-size:.95rem;color:var(--dim);margin-top:.5rem}

/* ════════════════════════════════════
   ABOUT — Full Layout with Nametag
════════════════════════════════════ */
.about-layout{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:3rem;
  align-items:start
}

/* ── About cards column ── */
.about-cards-col{display:flex;flex-direction:column;gap:1.25rem}

.ag-card{
  padding:1.75rem;position:relative;overflow:hidden;
  transition:transform var(--tr),border-color var(--tr),box-shadow var(--tr)
}
.ag-card::before{
  content:'';position:absolute;top:-30%;right:-20%;
  width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,247,255,.06),transparent 70%);
  pointer-events:none
}
.ag-card:hover{transform:translateY(-6px) !important;border-color:rgba(0,247,255,.3);box-shadow:0 12px 40px rgba(0,0,0,.4),0 0 30px rgba(0,247,255,.08)}

/* ══════════════════════════════════════════════
   NAMETAG SCENE
══════════════════════════════════════════════ */
.nametag-scene{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:0;
  min-height:680px;
  user-select:none
}

/* Ceiling anchor */
.nt-ceiling{
  position:relative;
  width:60px;height:28px;
  display:flex;justify-content:center;align-items:flex-end;
  z-index:5
}
.nt-hook{
  width:28px;height:16px;
  border:2px solid var(--cx);
  border-bottom:none;
  border-radius:14px 14px 0 0;
  box-shadow:0 0 12px rgba(0,247,255,.6),inset 0 0 6px rgba(0,247,255,.2);
  position:relative;background:rgba(0,247,255,.05)
}
.nt-hook::after{
  content:'';position:absolute;
  bottom:-6px;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;
  background:var(--cx);box-shadow:0 0 10px var(--cx)
}

/* SVG rope */
.nt-rope-svg{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;z-index:3;overflow:visible
}

/* ── NAMETAG CARD ── */
.nt-card{
  position:absolute;
  top:24px;
  width:280px;
  border-radius:20px;
  border:1px solid rgba(0,247,255,.25);
  background:rgba(5,8,25,.82);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:
    0 0 0 1px rgba(0,247,255,.08),
    0 8px 40px rgba(0,0,0,.6),
    0 0 80px rgba(0,247,255,.08),
    inset 0 1px 0 rgba(255,255,255,.06);
  cursor:grab;
  transition:box-shadow .3s ease;
  z-index:10;
  transform-origin:top center
}
.nt-card:active{cursor:grabbing}
.nt-card.dragging{
  box-shadow:
    0 0 0 1px rgba(0,247,255,.3),
    0 30px 80px rgba(0,0,0,.8),
    0 0 120px rgba(0,247,255,.2),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Clip */
.nt-clip{
  display:flex;flex-direction:column;align-items:center;
  padding-top:6px;margin-bottom:-2px
}
.nt-clip-bar{
  width:40px;height:8px;
  background:linear-gradient(90deg,rgba(0,247,255,.3),rgba(157,93,229,.4),rgba(0,247,255,.3));
  border-radius:4px;
  border:1px solid rgba(0,247,255,.4);
  box-shadow:0 0 8px rgba(0,247,255,.3)
}
.nt-clip-hole{
  width:10px;height:10px;border-radius:50%;
  border:2px solid rgba(0,247,255,.5);
  background:rgba(0,247,255,.08);
  margin-top:3px;
  box-shadow:0 0 8px rgba(0,247,255,.4)
}

/* Header band */
.nt-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:.55rem 1.1rem .45rem;
  background:linear-gradient(90deg,rgba(0,247,255,.12),rgba(157,93,229,.1),rgba(255,0,127,.06));
  border-top:1px solid rgba(0,247,255,.15);
  border-bottom:1px solid rgba(0,247,255,.1)
}
.nt-header-dots{display:flex;gap:4px}
.nt-header-dots span{
  width:6px;height:6px;border-radius:50%;
  background:rgba(0,247,255,.35)
}
.nt-header-dots span:nth-child(2){background:rgba(157,93,229,.5)}
.nt-header-dots span:nth-child(3){background:rgba(255,0,127,.4)}
.nt-header-label{
  font-family:var(--fmono);font-size:.58rem;
  letter-spacing:.22em;color:rgba(0,247,255,.7)
}
.nt-header-badge{color:rgba(0,247,255,.5);font-size:.85rem}

/* Photo area */
.nt-photo-wrap{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  padding:1.4rem 0 1rem
}
.nt-photo-ring{
  position:absolute;border-radius:50%;border:1px solid;
  animation:ntRingSpin 8s linear infinite
}
.nt-ring-outer{
  width:132px;height:132px;
  border-color:rgba(0,247,255,.2);
  top:50%;left:50%;transform:translate(-50%,-50%)
}
.nt-ring-inner{
  width:114px;height:114px;
  border-color:rgba(157,93,229,.25);
  border-style:dashed;
  top:50%;left:50%;transform:translate(-50%,-50%);
  animation-direction:reverse;animation-duration:12s
}
@keyframes ntRingSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}

.nt-photo-frame{
  position:relative;
  width:100px;height:100px;border-radius:50%;overflow:hidden;
  border:2px solid rgba(0,247,255,.5);
  box-shadow:0 0 0 6px rgba(0,247,255,.06),0 0 30px rgba(0,247,255,.3)
}
.nt-photo-frame img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.nt-photo-fallback{
  display:none;width:100%;height:100%;
  background:linear-gradient(135deg,rgba(0,60,80,.9),rgba(30,0,60,.9));
  align-items:center;justify-content:center;
  font-size:2.4rem;color:var(--cx)
}
.nt-photo-scan{
  position:absolute;top:-100%;left:0;right:0;height:100%;
  background:linear-gradient(to bottom,transparent,rgba(0,247,255,.18),transparent);
  animation:ntScan 2.8s linear infinite
}
@keyframes ntScan{to{top:100%}}

.nt-photo-status{
  display:flex;align-items:center;gap:.35rem;margin-top:.75rem;
  font-family:var(--fmono);font-size:.58rem;letter-spacing:.14em;
  color:rgba(0,247,255,.7)
}
.nt-status-dot{
  width:6px;height:6px;border-radius:50%;
  background:#00ff88;
  box-shadow:0 0 6px #00ff88;
  animation:ntPulseGreen 1.8s ease-in-out infinite
}
@keyframes ntPulseGreen{0%,100%{opacity:1}50%{opacity:.4}}

/* Info */
.nt-info{padding:0 1.25rem 1rem;text-align:center}
.nt-verified{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--fmono);font-size:.58rem;letter-spacing:.12em;
  color:rgba(0,247,255,.6);margin-bottom:.7rem
}
.nt-verified i{color:var(--cx)}
.nt-name{
  font-family:var(--fdisp);font-size:1.05rem;font-weight:700;
  color:var(--white);line-height:1.2;margin-bottom:.35rem
}
.nt-role{
  font-size:.82rem;color:rgba(0,247,255,.75);
  letter-spacing:.04em;margin-bottom:.9rem
}
.nt-divider{
  display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem
}
.nt-div-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(0,247,255,.25))}
.nt-div-line:last-child{background:linear-gradient(270deg,transparent,rgba(0,247,255,.25))}
.nt-divider i{color:rgba(0,247,255,.4);font-size:.75rem}

.nt-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}
.nt-tags span{
  font-family:var(--fmono);font-size:.58rem;letter-spacing:.08em;
  padding:.2rem .55rem;border-radius:20px;
  background:rgba(0,247,255,.07);border:1px solid rgba(0,247,255,.2);
  color:rgba(0,247,255,.65)
}

/* Footer: QR + Barcode */
.nt-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.25rem 1.1rem;
  border-top:1px solid rgba(0,247,255,.1)
}
.nt-qr{
  width:48px;height:48px;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,247,255,.25) 0,rgba(0,247,255,.25) 2px,transparent 2px,transparent 5px),
    repeating-linear-gradient(90deg,rgba(0,247,255,.25) 0,rgba(0,247,255,.25) 2px,transparent 2px,transparent 5px);
  border:1px solid rgba(0,247,255,.3);
  border-radius:4px;
  position:relative;overflow:hidden
}
.nt-qr::after{
  content:'';position:absolute;inset:3px;
  border:2px solid rgba(0,247,255,.4);border-radius:2px
}

.nt-barcode{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.nt-bars{
  display:flex;gap:2px;align-items:flex-end;height:32px
}
.nt-bars span{
  display:block;width:3px;
  background:rgba(0,247,255,.5);border-radius:1px
}
.nt-barcode > span{
  font-family:var(--fmono);font-size:.5rem;
  letter-spacing:.06em;color:rgba(0,247,255,.4)
}

/* Holographic shimmer */
.nt-holo{
  position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:linear-gradient(
    135deg,
    transparent 0%,rgba(0,247,255,.04) 20%,transparent 40%,
    rgba(157,93,229,.05) 60%,transparent 80%,rgba(255,0,127,.03) 100%
  );
  animation:ntHolo 4s linear infinite
}
@keyframes ntHolo{
  0%  {background-position:0% 0%}
  100%{background-position:200% 200%}
}

/* Drag hint */
.nt-drag-hint{
  position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:.4rem;
  font-family:var(--fmono);font-size:.6rem;letter-spacing:.1em;
  color:rgba(0,247,255,.4);
  animation:ntHintBob 2s ease-in-out infinite;
  white-space:nowrap;transition:opacity .5s ease
}
.nt-drag-hint.hidden{opacity:0;pointer-events:none}
.nt-drag-hint i{animation:ntHintWave 1.5s ease-in-out infinite}
@keyframes ntHintBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
@keyframes ntHintWave{0%,100%{transform:rotate(-15deg)}50%{transform:rotate(15deg)}}

/* Card shadow on ground */
.nt-shadow{
  position:absolute;
  bottom:-20px;
  width:220px;height:20px;
  background:radial-gradient(ellipse,rgba(0,247,255,.15) 0%,transparent 70%);
  filter:blur(8px);
  transition:all .1s;
  pointer-events:none;z-index:1
}

.agc-icon{
  width:46px;height:46px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,247,255,.1);border:1px solid rgba(0,247,255,.25);
  color:var(--cx);font-size:1.15rem;margin-bottom:1.2rem
}
.agc-icon.mg{background:rgba(255,0,127,.1);border-color:rgba(255,0,127,.25);color:var(--mg)}
.ag-card h3{font-family:var(--fdisp);font-size:.9rem;font-weight:700;color:var(--white);margin-bottom:.7rem}
.ag-card p{font-size:.95rem;color:var(--dim);line-height:1.75}

/* ════════════════════════════════════
   SKILLS
════════════════════════════════════ */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2.5rem}
.sk-col{padding:2rem;background:rgba(8,12,30,.4);border:1px solid var(--border);border-radius:var(--r)}
.sk-colh{
  font-family:var(--fdisp);font-size:.8rem;font-weight:700;
  color:var(--white);letter-spacing:.08em;
  display:flex;align-items:center;gap:.6rem;margin-bottom:1.5rem
}
.sk-colh i{color:var(--cx)}
.sk-list{display:flex;flex-direction:column;gap:1rem}
.sk-item{}
.ski-label{
  display:flex;align-items:center;gap:.5rem;
  font-size:.9rem;color:var(--text);margin-bottom:.45rem
}
.ski-label i{width:18px;text-align:center;color:var(--cx)}
.ski-bar{height:4px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.ski-fill{height:100%;width:0;border-radius:4px;transition:width 1.2s cubic-bezier(.23,1,.32,1)}
.cx-fill{background:linear-gradient(90deg,var(--cx),#0090ff)}
.mg-fill{background:linear-gradient(90deg,var(--mg),#c200ff)}

/* ════════════════════════════════════
   PROJECTS
════════════════════════════════════ */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.75rem}
.proj-card{
  position:relative;overflow:hidden;
  transition:transform var(--tr),border-color var(--tr),box-shadow var(--tr)
}
.proj-card:hover{transform:translateY(-10px) !important;border-color:rgba(0,247,255,.35);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(0,247,255,.1)}

.pc-num{
  position:absolute;top:1rem;right:1.25rem;
  font-family:var(--fdisp);font-size:2rem;font-weight:900;
  color:rgba(0,247,255,.07);line-height:1
}
.mg-num{color:rgba(255,0,127,.07)}

.pc-thumb{
  height:150px;position:relative;
  display:flex;align-items:center;justify-content:center;overflow:hidden
}
.cyan-thumb{background:linear-gradient(135deg,rgba(0,40,60,.8),rgba(0,80,100,.4))}
.mg-thumb  {background:linear-gradient(135deg,rgba(60,0,40,.8),rgba(100,0,60,.4))}
.pct-icon{font-size:2.5rem;color:var(--cx);z-index:2;position:relative}
.mg-thumb .pct-icon{color:var(--mg)}

.pct-dots{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(0,247,255,.15) 1px,transparent 1px);
  background-size:20px 20px
}
.mg-thumb .pct-dots{background-image:radial-gradient(rgba(255,0,127,.15) 1px,transparent 1px)}

.pc-body{padding:1.5rem}
.pc-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.ptag{
  font-family:var(--fmono);font-size:.62rem;letter-spacing:.08em;
  padding:.2rem .6rem;border-radius:20px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--dim)
}
.ptag.cx{background:var(--cx-dim);border-color:rgba(0,247,255,.3);color:var(--cx)}
.ptag.mg{background:var(--mg-dim);border-color:rgba(255,0,127,.3);color:var(--mg)}

.pc-body h3{font-family:var(--fdisp);font-size:.95rem;font-weight:700;color:var(--white);line-height:1.3;margin-bottom:.75rem}
.pc-body p{font-size:.9rem;color:var(--dim);line-height:1.7;margin-bottom:1rem}

.pc-feats{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.25rem}
.pc-feats li{font-size:.82rem;color:var(--dim);display:flex;align-items:center;gap:.4rem}
.pc-feats i{color:var(--cx);font-size:.65rem}

.pc-links{display:flex;gap:.75rem;flex-wrap:wrap}
.plnk{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem 1rem;border-radius:7px;
  font-family:var(--fdisp);font-size:.62rem;letter-spacing:.08em;
  transition:all var(--tr)
}
.cx-lnk{background:var(--cx-dim);border:1px solid rgba(0,247,255,.3);color:var(--cx)}
.cx-lnk:hover{background:rgba(0,247,255,.2);box-shadow:var(--cx-gs)}
.mg-lnk{background:var(--mg-dim);border:1px solid rgba(255,0,127,.3);color:var(--mg)}
.mg-lnk:hover{background:rgba(255,0,127,.2);box-shadow:var(--mg-gs)}
.ghost-lnk{border:1px solid var(--border);color:var(--dim)}
.ghost-lnk:hover{border-color:var(--cx);color:var(--cx)}

/* ════════════════════════════════════
   CERTIFICATES
════════════════════════════════════ */
.certs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem}

.cert-card{
  position:relative;padding:1.5rem;overflow:hidden;
  transition:transform var(--tr),border-color var(--tr),box-shadow var(--tr)
}
.cert-card:hover{transform:translateY(-8px) !important;border-color:rgba(0,247,255,.35);box-shadow:0 16px 50px rgba(0,0,0,.45),0 0 30px rgba(0,247,255,.1)}

/* shimmer sweep on hover */
.cert-shine{
  position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
  transition:left .6s ease;pointer-events:none
}
.cert-card:hover .cert-shine{left:150%}

.cert-ribbon{
  position:absolute;top:.9rem;right:.9rem;
  color:rgba(0,247,255,.25);font-size:.85rem
}
.cert-body{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}

.cert-icon{
  width:44px;height:44px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem
}
.cx-icon{background:var(--cx-dim);border:1px solid rgba(0,247,255,.25);color:var(--cx)}
.mg-icon{background:var(--mg-dim);border:1px solid rgba(255,0,127,.25);color:var(--mg)}

.cert-text h4{font-family:var(--fdisp);font-size:.8rem;font-weight:700;color:var(--white);margin-bottom:.25rem}
.cert-text p{font-size:.8rem;color:var(--dim)}
.cert-year{
  display:inline-block;margin-top:.3rem;
  font-family:var(--fmono);font-size:.6rem;letter-spacing:.1em;
  padding:.15rem .5rem;border-radius:4px;
  background:rgba(0,247,255,.08);border:1px solid rgba(0,247,255,.2);color:var(--cx)
}

.cert-bar{height:2px;width:100%;border-radius:2px;margin-top:auto}
.cx-bar{background:linear-gradient(90deg,var(--cx),transparent)}
.mg-bar{background:linear-gradient(90deg,var(--mg),transparent)}

/* ── Cert card clickable hint ── */
.cert-card { cursor: pointer; }
.cert-view-hint {
  display:flex;align-items:center;gap:.4rem;
  font-family:var(--fmono);font-size:.6rem;letter-spacing:.1em;
  color:var(--cx);opacity:0;
  margin-bottom:.65rem;
  transform:translateY(4px);
  transition:opacity .25s, transform .25s;
}
.cert-card:hover .cert-view-hint { opacity:.8; transform:translateY(0); }

/* ══════════════════════════════════════════════════
   CERTIFICATE MODAL — Canvas Based (No Layout Bugs)
══════════════════════════════════════════════════ */
.cert-modal-overlay {
  position:fixed;inset:0;z-index:800;
  background:rgba(2,2,12,.93);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;
  gap:1rem;
  padding:1.5rem;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.cert-modal-overlay.open {
  opacity:1;pointer-events:all;
}

.cert-modal-box {
  position:relative;
  background:transparent;
  transform:scale(.9) translateY(20px);
  transition:transform .35s cubic-bezier(.23,1,.32,1);
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  width:100%;max-width:1000px;
}
.cert-modal-overlay.open .cert-modal-box {
  transform:scale(1) translateY(0);
}

#certCanvas {
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  box-shadow:0 0 50px rgba(0,247,255,.15), 0 30px 80px rgba(0,0,0,.8);
}

.cert-modal-close {
  position:absolute;top:1.2rem;right:1.2rem;z-index:10;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:var(--text);font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;
}
.cert-modal-close:hover { background:rgba(255,0,127,.15);border-color:var(--mg);color:var(--mg); }

.cert-modal-actions {
  display:flex;gap:.75rem;align-items:center;
}
.cma-btn {
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--fbody);font-size:.78rem;font-weight:600;
  padding:.55rem 1.25rem;border-radius:10px;
  cursor:pointer;border:none;transition:all .2s;letter-spacing:.04em;
}
.cma-dl {
  background:linear-gradient(135deg,var(--cx),#9b5de5);
  color:#000;box-shadow:0 4px 18px rgba(0,247,255,.3);
}
.cma-dl:hover { transform:translateY(-2px);box-shadow:0 6px 28px rgba(0,247,255,.45); }
.cma-close2 {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12) !important;
  color:var(--text);
  position:static !important;width:auto !important;height:auto !important;
  border-radius:10px !important;font-size:.78rem !important;
}
.cma-close2:hover { background:rgba(255,0,127,.12);border-color:var(--mg) !important;color:var(--mg); }

body.modal-open { overflow:hidden; }

/* ════════════════════════════════════
   GITHUB
════════════════════════════════════ */
.gh-layout{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:1.5rem}

/* Profile card — full-width row */
.gh-profile{
  grid-column:1/-1;
  display:flex;align-items:center;gap:2rem;padding:2rem;
  position:relative;overflow:hidden;
  transition:transform var(--tr),border-color var(--tr),box-shadow var(--tr);
  cursor:pointer
}
.gh-profile:hover{transform:translateY(-5px);border-color:rgba(0,247,255,.4);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 50px rgba(0,247,255,.1)}
.ghp-glow{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 50% 120% at 15% 50%,rgba(0,247,255,.06),transparent);
  pointer-events:none
}

/* orbit animation on github icon */
.ghp-avatar{position:relative;width:80px;height:80px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ghp-orbit{position:absolute;border-radius:50%;border:1px dashed rgba(0,247,255,.25);animation:spinRing 8s linear infinite}
.ghp-o1{inset:-8px}
.ghp-o2{inset:-18px;animation-duration:14s;animation-direction:reverse}
.ghp-orb-dot{
  position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  width:8px;height:8px;background:var(--cx);border-radius:50%;
  box-shadow:0 0 10px var(--cx)
}
.ghp-icon{font-size:2.8rem;color:var(--white);z-index:2;position:relative}
.ghp-pulse{
  position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(0,247,255,.3);
  animation:ghPulse 2s ease-out infinite
}
@keyframes ghPulse{
  0%{transform:scale(.9);opacity:.8}
  100%{transform:scale(1.5);opacity:0}
}

.ghp-info{flex:1}
.ghp-username{display:block;font-family:var(--fdisp);font-size:1.3rem;font-weight:700;color:var(--white);margin-bottom:.3rem}
.ghp-handle{display:block;font-family:var(--fmono);font-size:.75rem;color:var(--dim)}
.ghp-badge{
  padding:.45rem 1.1rem;border-radius:6px;flex-shrink:0;
  font-family:var(--fdisp);font-size:.65rem;font-weight:700;letter-spacing:.1em;
  background:var(--cx-dim);border:1px solid rgba(0,247,255,.35);color:var(--cx);
  transition:all var(--tr)
}
.gh-profile:hover .ghp-badge{background:rgba(0,247,255,.2);box-shadow:var(--cx-gs)}

/* Heatmap */
.gh-heatmap{
  grid-column:1/-1;padding:1.75rem;
}
.ghh-title{
  font-family:var(--fdisp);font-size:.72rem;letter-spacing:.1em;
  color:var(--dim);margin-bottom:1rem;
  display:flex;align-items:center;gap:.5rem
}
.ghh-title i{color:var(--mg)}
.ghh-grid{
  display:grid;
  grid-template-columns:repeat(53,1fr);
  grid-template-rows:repeat(7,1fr);
  gap:3px;height:96px;margin-bottom:1rem
}
.gh-cell{border-radius:2px;transition:transform .15s,box-shadow .15s}
.gh-cell:hover{transform:scale(1.4);box-shadow:0 0 6px var(--cx)}
.lv0{background:rgba(255,255,255,.04)}
.lv1{background:rgba(0,247,255,.15)}
.lv2{background:rgba(0,247,255,.35)}
.lv3{background:rgba(0,247,255,.6)}
.lv4{background:var(--cx);box-shadow:0 0 6px rgba(0,247,255,.5)}

.ghh-legend{display:flex;align-items:center;gap:.5rem;font-size:.65rem;color:var(--dim)}
.ghl-box{width:12px;height:12px;border-radius:2px}

/* Repos grid */
.gh-repos{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.gh-repo{
  padding:1.25rem;
  transition:transform var(--tr),border-color var(--tr),box-shadow var(--tr)
}
.gh-repo:hover{transform:translateY(-5px) !important;border-color:rgba(0,247,255,.3);box-shadow:0 12px 40px rgba(0,0,0,.4),0 0 25px rgba(0,247,255,.08)}
.ghr-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem}
.ghr-head i{color:var(--cx);font-size:.85rem}
.ghr-name{font-family:var(--fmono);font-size:.78rem;color:var(--cx);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ghr-pub{
  font-size:.55rem;padding:.15rem .45rem;border-radius:20px;
  border:1px solid rgba(0,247,255,.3);color:var(--cx);
  font-family:var(--fmono);letter-spacing:.06em;flex-shrink:0
}
.ghr-desc{font-size:.82rem;color:var(--dim);line-height:1.6;margin-bottom:1rem}
.ghr-foot{display:flex;gap:1rem;font-size:.75rem;color:var(--dim)}
.ghr-foot span{display:flex;align-items:center;gap:.3rem}

/* ════════════════════════════════════
   CONTACT
════════════════════════════════════ */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:2rem;align-items:start}

.cti-card{padding:2rem}
.cti-card h3{font-family:var(--fdisp);font-size:1.2rem;font-weight:700;color:var(--white);line-height:1.3;margin-bottom:.75rem}
.cti-card > p{font-size:.9rem;color:var(--dim);margin-bottom:1.75rem;line-height:1.75}

.cti-links{display:flex;flex-direction:column;gap:.75rem}
.cti-lnk{
  display:flex;align-items:center;gap:1rem;padding:1rem;
  border-radius:10px;border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  transition:all var(--tr)
}
.cti-lnk:hover{border-color:rgba(0,247,255,.3);background:rgba(0,247,255,.04);transform:translateX(4px)}
.ctil-icon{
  width:38px;height:38px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1rem
}
.ctil-lbl{display:block;font-family:var(--fdisp);font-size:.65rem;letter-spacing:.1em;color:var(--dim);margin-bottom:.15rem}
.ctil-val{display:block;font-size:.85rem;color:var(--text)}
.ctil-arr{color:var(--dim);font-size:.75rem;margin-left:auto;transition:transform var(--tr)}
.cti-lnk:hover .ctil-arr{transform:translateX(4px);color:var(--cx)}

.ctf-inner{padding:2rem}
.ctf-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ctf-group{margin-bottom:1.25rem}
.ctf-group label{display:block;font-family:var(--fdisp);font-size:.65rem;letter-spacing:.1em;color:var(--dim);margin-bottom:.5rem}
.ctf-group input,
.ctf-group textarea{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:8px;padding:.7rem 1rem;
  color:var(--white);font-family:var(--fbody);font-size:.95rem;
  outline:none;resize:vertical;
  transition:border-color var(--tr),box-shadow var(--tr)
}
.ctf-group input:focus,
.ctf-group textarea:focus{border-color:rgba(0,247,255,.4);box-shadow:0 0 0 3px rgba(0,247,255,.07)}
.ctf-group input::placeholder,
.ctf-group textarea::placeholder{color:var(--dim)}

/* ════════════════════════════════════
   FOOTER
════════════════════════════════════ */
footer{
  position:relative;z-index:10;
  padding:2.5rem 5%;
  border-top:1px solid var(--border);
  background:rgba(5,5,14,.6)
}
.footer-inner{max-width:1200px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.f-brand{font-family:var(--fdisp);font-size:1rem;font-weight:700;color:var(--white)}
footer p{font-size:.85rem;color:var(--dim)}
.f-socials{display:flex;gap:1rem}
.f-socials a{
  width:34px;height:34px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);color:var(--dim);font-size:.9rem;
  transition:all var(--tr)
}
.f-socials a:hover{border-color:var(--cx);color:var(--cx);box-shadow:var(--cx-gs)}

/* Back to top */
#backTop{
  position:fixed;bottom:2rem;right:2rem;z-index:100;
  width:40px;height:40px;border-radius:10px;
  background:var(--cx-dim);border:1px solid rgba(0,247,255,.35);
  color:var(--cx);font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:all var(--tr)
}
#backTop.show{opacity:1;pointer-events:all}
#backTop:hover{background:rgba(0,247,255,.2);box-shadow:var(--cx-gs)}

/* ════════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */
@media(max-width:1050px){
  .about-layout{grid-template-columns:1fr;justify-items:center}
  .nametag-scene{min-height:560px;width:100%;max-width:340px}
  .about-cards-col{width:100%}
}

@media(max-width:900px){
  .hero-wrap{flex-direction:column;text-align:center;padding-top:2rem}
  .hero-bio{margin-inline:auto}
  .hero-btns{justify-content:center}
  .hero-stats{justify-content:center}
  .hero-orb{width:280px;height:280px}
  .chip-js,.chip-py,.chip-godot{display:none}

  .gh-layout{grid-template-columns:1fr}
  .gh-profile{grid-column:1}
  .gh-heatmap{grid-column:1}
  .gh-repos{grid-column:1}

  .contact-grid{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;text-align:center}
}

@media(max-width:600px){
  section{padding:4rem 5%}
  .nav-links{display:none}
  .nav-burger{display:flex}
  .ctf-row{grid-template-columns:1fr}
  .hero-name .hn-top,.hero-name .hn-bot{font-size:2rem}
  .ghh-grid{grid-template-columns:repeat(26,1fr);height:80px}
  .gh-cell:nth-child(n+183){display:none}
  .orb-photo{width:160px;height:160px}
  .nt-card{width:250px}
}

/* ══════════════════════════════════════════════
   DOWNLOAD CV BUTTON — Hero + Navbar
══════════════════════════════════════════════ */

/* Hero CV button */
.hbtn-cv {
  position:relative;
  background: linear-gradient(135deg, #0ff 0%, #9b5de5 50%, #ff007f 100%);
  background-size: 200% 200%;
  animation: cvGradShift 3s ease infinite;
  color: #000 !important;
  font-weight: 800;
  box-shadow: 0 0 28px rgba(0,247,255,.35), 0 0 55px rgba(155,93,229,.2);
  border-radius: 10px;
  overflow: hidden;
  letter-spacing: .12em;
}
.hbtn-cv::before {
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(120deg, transparent 25%, rgba(255,255,255,.35) 50%, transparent 75%);
  transform:translateX(-100%) skewX(-20deg);
  transition:transform .6s ease;
}
.hbtn-cv:hover::before { transform:translateX(200%) skewX(-20deg); }
.hbtn-cv:hover {
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 0 45px rgba(0,247,255,.55), 0 0 80px rgba(155,93,229,.3);
  color:#000 !important;
}
.hbtn-cv i { font-size:.9rem; }

@keyframes cvGradShift {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Navbar CV button */
.nav-cv-btn {
  display:inline-flex !important;
  align-items:center;
  gap:.4rem;
  padding:.35rem .9rem !important;
  background:linear-gradient(135deg,rgba(0,247,255,.15),rgba(155,93,229,.1)) !important;
  border:1px solid rgba(0,247,255,.3) !important;
  border-radius:7px !important;
  color:var(--cx) !important;
  font-size:.62rem !important;
  letter-spacing:.1em;
  transition:all .25s !important;
  text-shadow:none !important;
  white-space:nowrap;
}
.nav-cv-btn:hover {
  background:linear-gradient(135deg,rgba(0,247,255,.25),rgba(155,93,229,.2)) !important;
  border-color:var(--cx) !important;
  box-shadow:0 0 16px rgba(0,247,255,.3) !important;
  transform:translateY(-1px);
}

/* Mobile drawer CV */
.dr-cv {
  display:inline-flex !important;
  align-items:center;gap:.5rem;
  color:var(--cx) !important;
  background:rgba(0,247,255,.08) !important;
  border:1px solid rgba(0,247,255,.2);
  border-radius:8px;
  padding:.5rem 1.2rem !important;
}

/* ══════════════════════════════════════════════
   PERFORMANCE OPTIMIZATIONS
══════════════════════════════════════════════ */

/* Use will-change only for actively animating elements */
.float-el { will-change: transform; }
.orb-ring  { will-change: transform; }
.cur-dot, .cur-halo { will-change: left, top; }

/* Contain layout/paint for heavy sections */
#skills, #projects, #certs, #github {
  contain: layout style;
}

/* Reduce repaints on glass cards */
.glass {
  will-change: auto;
  transform: translateZ(0); /* promote to GPU layer */
}

/* Pause heavy animations when tab hidden */
@media (prefers-reduced-motion: reduce) {
  .float-el, .orb-ring, .orb-scan,
  .badge-dot, .blink, .orb-chip { animation: none !important; }
}

/* Optimize image rendering */
.orb-photo img, .nt-photo-frame img {
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
}


/* ══════════════════════════════════════════════════
   PERFORMANCE — GPU layer promotion + containment
══════════════════════════════════════════════════ */
#spaceCanvas, #threeCanvas {
  will-change: auto;        /* let browser decide */
  transform: translateZ(0); /* GPU composite layer */
}
.glass {
  transform: translateZ(0);
}
section {
  contain: layout style;    /* limit repaint scope */
}
.cert-card, .proj-card, .tl-item {
  contain: layout;
}
/* Reduce blur cost on mobile */
@media (max-width: 768px) {
  .glass {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .cert-modal-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #threeCanvas {
    display: none; /* hide 3D on mobile — huge perf win */
  }
}
/* Font display swap — prevent render blocking */
@font-face { font-display: swap; }