/* ==========================================================================
   ASHOK KARKI — PORTFOLIO   |   style.css
   Performance-optimised  ·  GPU-accelerated  ·  Dark cyber theme
   ========================================================================== */

/* ---------- 1. RESET & VARIABLES ---------- */
:root {
  --p: #00ff88; --pd: #00cc6a; --pg: rgba(0,255,136,.15);
  --bg: #0a0a0a; --bg2: #0e0e0e; --bg3: #111; --bg4: #1a1a1a;
  --t: #e0e0e0; --tm: #888; --tw: #fff;
  --brd: rgba(255,255,255,.06); --glass: rgba(255,255,255,.04); --gb: rgba(255,255,255,.08);
  --r: 16px;
  --ease: cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --tr: .35s var(--ease);
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg); color: var(--t);
  line-height: 1.7; overflow-x: hidden; cursor: none;
}
::selection { background: var(--p); color: #000; }
a { text-decoration: none; color: inherit; transition: var(--tr); cursor: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* ---------- 2. SCROLLBAR ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--pd); border-radius: 3px; }

/* ---------- 3. CUSTOM CURSOR ---------- */
.cursor-dot {
  position: fixed; top: 0; left: 0; width: 8px; height: 8px;
  background: var(--p); border-radius: 50%;
  pointer-events: none; z-index: 99999;
  will-change: transform; mix-blend-mode: difference;
}
.cursor-ring {
  position: fixed; top: 0; left: 0; width: 40px; height: 40px;
  border: 2px solid rgba(0,255,136,.6); border-radius: 50%;
  pointer-events: none; z-index: 99998;
  will-change: transform, width, height;
  transition: width .3s var(--ease), height .3s var(--ease),
              border-color .3s, background .3s;
}
.cursor-ring.hover {
  width: 60px; height: 60px;
  border-color: rgba(0,255,136,.35);
  background: rgba(0,255,136,.06);
}

/* ---------- 4. SCROLL PROGRESS ---------- */
#scrollProgress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--p), #00ccff, var(--p));
  z-index: 100001; width: 0;
  box-shadow: 0 0 12px var(--p);
  will-change: width;
}

/* ---------- 5. LOADER ---------- */
#loader {
  position: fixed; inset: 0; z-index: 100000;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity .6s ease, visibility .6s ease;
}
#loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-ring {
  width: 70px; height: 70px;
  border: 3px solid rgba(0,255,136,.12);
  border-top-color: var(--p);
  border-radius: 50%;
  animation: spin .9s linear infinite;
  will-change: transform;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text {
  margin-top: 1.5rem;
  font-family: 'Fira Code', monospace;
  font-size: .85rem; color: var(--p);
  letter-spacing: 3px;
  animation: ldPulse 1.4s ease-in-out infinite;
}
@keyframes ldPulse { 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* ---------- 6. NETWORK CANVAS ---------- */
#networkCanvas {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  will-change: auto;
}

/* ---------- 7. NAVBAR ---------- */
nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 10000;
  background: rgba(10,10,10,.78);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--brd);
  will-change: box-shadow;
  transition: box-shadow .3s;
}
nav.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,.5); }
.nav-c {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 2rem;
}
.nav-logo {
  font-family: 'Fira Code', monospace;
  font-size: 1.35rem; font-weight: 700; color: var(--p);
}
.nav-logo span { color: var(--tw); }
.nav-links { display: flex; gap: 1.8rem; }
.nav-links a {
  color: var(--tm); font-size: .87rem; font-weight: 500;
  position: relative; padding: .25rem 0;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px; background: var(--p);
  transition: width .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--p); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: none; background: none; border: none; padding: 4px;
}
.hamburger span {
  width: 24px; height: 2px; background: var(--tw);
  transition: var(--tr); display: block;
}

/* ---------- 8. HERO ---------- */
#hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 7rem 2rem 4rem; overflow: hidden; z-index: 1;
}
.hero-content {
  position: relative; z-index: 2;
  text-align: center; max-width: 850px;
}

/* Badge */
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--pg); border: 1px solid rgba(0,255,136,.2);
  padding: .45rem 1.2rem; border-radius: 50px;
  font-size: .82rem; color: var(--p);
  margin-bottom: 1.5rem;
  opacity: 0; animation: fadeInDown .8s ease forwards .6s;
}
.hero-badge .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--p);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,255,136,.55); }
  50%     { box-shadow: 0 0 0 10px rgba(0,255,136,0); }
}
@keyframes fadeInDown { from { opacity:0; transform:translateY(-25px); } to { opacity:1; transform:translateY(0); } }

/* Glitch Name */
.glitch-wrap {
  position: relative; display: inline-block;
  margin-bottom: 1rem;
  opacity: 0; animation: fadeInUp 1s ease forwards .8s;
}
.glitch-name {
  font-size: clamp(2.8rem,7vw,5rem);
  font-weight: 900; color: var(--tw);
  letter-spacing: -2px; line-height: 1.1;
  position: relative;
}
.glitch-name .hl { color: var(--p); }
.glitch-name::before,
.glitch-name::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; overflow: hidden;
}
.glitch-name::before {
  color: var(--p); animation: g1 4s infinite linear alternate-reverse;
  clip-path: inset(0 0 75% 0);
}
.glitch-name::after {
  color: #ff0055; animation: g2 3.5s infinite linear alternate-reverse;
  clip-path: inset(75% 0 0 0);
}
@keyframes g1 {
  0%  { transform:translate(0); }
  20% { transform:translate(-3px,2px); }
  40% { transform:translate(2px,-2px); }
  60% { transform:translate(-2px,1px); }
  80% { transform:translate(3px,-1px); }
  100%{ transform:translate(0); }
}
@keyframes g2 {
  0%  { transform:translate(0); }
  25% { transform:translate(3px,-2px); }
  50% { transform:translate(-2px,3px); }
  75% { transform:translate(2px,1px); }
  100%{ transform:translate(0); }
}

/* Typing */
.hero-typing {
  font-family: 'Fira Code', monospace;
  font-size: clamp(.95rem,2vw,1.25rem);
  color: var(--p); min-height: 2rem;
  margin-bottom: 1.5rem;
  opacity: 0; animation: fadeInUp 1s ease forwards 1s;
}
.typing-cursor {
  display: inline-block; width: 2px; height: 1.15em;
  background: var(--p); margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,100%{ opacity:1; } 50%{ opacity:0; } }

.hero-desc {
  font-size: 1.02rem; color: var(--tm);
  max-width: 600px; margin: 0 auto 2rem;
  opacity: 0; animation: fadeInUp 1s ease forwards 1.2s;
}
.hero-stats {
  display: flex; justify-content: center; gap: 3rem;
  margin-bottom: 2.5rem;
  opacity: 0; animation: fadeInUp 1s ease forwards 1.4s;
}
.hero-stat { text-align: center; }
.hero-stat .num {
  font-size: 2rem; font-weight: 800; color: var(--p);
  font-family: 'Fira Code', monospace;
}
.hero-stat .label {
  font-size: .72rem; color: var(--tm);
  text-transform: uppercase; letter-spacing: 1.5px;
}
.hero-buttons {
  display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
  opacity: 0; animation: fadeInUp 1s ease forwards 1.6s;
}
@keyframes fadeInUp { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }

/* ---------- 9. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 2rem; border-radius: 50px;
  font-size: .93rem; font-weight: 600;
  cursor: none; border: none; position: relative; overflow: hidden;
  transition: transform .3s var(--spring), box-shadow .3s;
  will-change: transform;
}
.btn .ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.25);
  transform: scale(0); animation: ripple .6s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
.btn-primary {
  background: var(--p); color: #000;
  box-shadow: 0 4px 25px rgba(0,255,136,.25);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 40px rgba(0,255,136,.4); }
.btn-outline {
  background: transparent; color: var(--p);
  border: 2px solid rgba(0,255,136,.3);
}
.btn-outline:hover {
  background: var(--pg); border-color: var(--p);
  transform: translateY(-3px);
}

/* ---------- 10. FLOATING SHAPES ---------- */
.hero-shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.shape {
  position: absolute; border: 2px solid rgba(0,255,136,.12);
  will-change: transform; animation: shapeF 18s ease-in-out infinite;
}
.shape.circle { width: 55px; height: 55px; border-radius: 50%; top: 14%; left: 9%; animation-duration: 20s; }
.shape.triangle {
  width: 0; height: 0; border: none;
  border-left: 28px solid transparent; border-right: 28px solid transparent;
  border-bottom: 48px solid rgba(0,255,136,.06);
  top: 22%; right: 14%; animation-duration: 22s; animation-delay: 2s;
}
.shape.square { width: 38px; height: 38px; bottom: 22%; left: 18%; animation-duration: 24s; animation-delay: 4s; }
.shape.diamond { width: 32px; height: 32px; transform-origin: center; top: 62%; right: 11%; animation-duration: 17s; animation-delay: 1s; }
.shape.hex { width: 45px; height: 45px; border-radius: 22%; top: 72%; left: 58%; animation-duration: 26s; animation-delay: 6s; }
@keyframes shapeF {
  0%  { transform: translateY(0) rotate(0deg); opacity:.25; }
  25% { transform: translateY(-35px) rotate(90deg); opacity:.55; }
  50% { transform: translateY(18px) rotate(180deg); opacity:.25; }
  75% { transform: translateY(-18px) rotate(270deg); opacity:.5; }
  100%{ transform: translateY(0) rotate(360deg); opacity:.25; }
}

/* ---------- 11. SECTION COMMON ---------- */
section { padding: 6rem 2rem; position: relative; z-index: 1; }
.s-c { max-width: 1100px; margin: 0 auto; }
.s-hdr { text-align: center; margin-bottom: 3.5rem; }
.s-tag {
  font-family: 'Fira Code', monospace;
  font-size: .82rem; color: var(--p);
  text-transform: uppercase; letter-spacing: 3px;
  margin-bottom: .7rem;
}
.s-title {
  font-size: clamp(1.9rem,4vw,2.7rem);
  font-weight: 800; color: var(--tw); letter-spacing: -1px;
}
.scramble-text { display: inline-block; }
.s-line { width: 55px; height: 3px; background: var(--p); margin: 1rem auto 0; border-radius: 2px; }

/* ---------- 12. SVG WAVE DIVIDERS ---------- */
.wave-div { width: 100%; overflow: hidden; line-height: 0; position: relative; z-index: 1; }
.wave-div svg { width: 100%; height: 80px; display: block; }
.wave-div .wp { transition: d .6s ease; }
.wave-div.flip { transform: rotate(180deg); }

/* ---------- 13. REVEAL ANIMATIONS ---------- */
.rv      { opacity:0; transform:translateY(50px);  transition: opacity .85s ease-out, transform .85s var(--spring); will-change: opacity, transform; }
.rv-left { opacity:0; transform:translateX(-80px); transition: opacity .8s ease-out, transform .8s var(--spring); will-change: opacity, transform; }
.rv-right{ opacity:0; transform:translateX(80px);  transition: opacity .8s ease-out, transform .8s var(--spring); will-change: opacity, transform; }
.rv-scale{ opacity:0; transform:scale(.7);         transition: opacity .8s ease-out, transform .8s var(--spring); will-change: opacity, transform; }
.rv-rotate{opacity:0; transform:rotate(-8deg) translateY(40px); transition: opacity .8s ease-out, transform .8s var(--spring); will-change: opacity, transform; }
.rv-blur { opacity:0; filter:blur(12px);           transition: opacity .9s ease-out, filter .9s ease-out; will-change: opacity, filter; }
.rv.active      { opacity:1; transform:translateY(0); }
.rv-left.active { opacity:1; transform:translateX(0); }
.rv-right.active{ opacity:1; transform:translateX(0); }
.rv-scale.active{ opacity:1; transform:scale(1); }
.rv-rotate.active{opacity:1; transform:rotate(0) translateY(0); }
.rv-blur.active { opacity:1; filter:blur(0); }

/* ---------- 14. STAGGER ---------- */
.stagger > * {
  opacity: 0; transform: translateY(28px);
  transition: opacity .55s ease-out, transform .55s var(--spring);
  will-change: opacity, transform;
}
.stagger.active > * { opacity: 1; transform: translateY(0); }

/* ---------- 15. ABOUT ---------- */
#about { background: var(--bg3); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.about-text p { margin-bottom: 1.2rem; color: var(--tm); font-size: 1.02rem; }
.about-text .hl { color: var(--p); font-weight: 600; }
.about-info { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

/* ---------- 16. TILT CARD ---------- */
.tilt-card {
  will-change: transform;
  transform-style: preserve-3d;
  transition: transform .4s ease, box-shadow .3s;
}
.tilt-card .glare {
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.1), transparent 60%);
}
.tilt-card:hover .glare { opacity: 1; }
.about-info-item {
  background: var(--glass); border: 1px solid var(--gb);
  border-radius: 12px; padding: 1.2rem;
  position: relative; overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.about-info-item:hover {
  border-color: rgba(0,255,136,.25);
  box-shadow: 0 8px 28px rgba(0,255,136,.07);
}
.about-info-item .icon { font-size: 1.4rem; color: var(--p); margin-bottom: .45rem; }
.about-info-item .lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--tm); margin-bottom: .2rem; }
.about-info-item .val { font-size: .92rem; font-weight: 600; color: var(--tw); }

/* ---------- 17. EXPERIENCE / TIMELINE ---------- */
.timeline { position: relative; padding-left: 2.5rem; }
.timeline-line {
  position: absolute; left: 6px; top: 0;
  width: 2px; height: 0;
  background: linear-gradient(180deg, var(--p), rgba(0,255,136,.08));
  box-shadow: 0 0 8px rgba(0,255,136,.25);
  transition: height 1.6s ease-out;
  will-change: height;
}
.timeline-item { position: relative; margin-bottom: 2.5rem; padding-left: 2rem; }
.timeline-dot {
  position: absolute; left: -2.5rem; top: .35rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 2px solid rgba(0,255,136,.35);
  z-index: 2; transition: .5s var(--ease);
  will-change: transform, box-shadow;
}
.timeline-dot.active {
  background: var(--p); border-color: var(--p);
  box-shadow: 0 0 18px rgba(0,255,136,.6), 0 0 36px rgba(0,255,136,.15);
  transform: scale(1.25);
}
.timeline-card {
  background: var(--glass); border: 1px solid var(--gb);
  border-radius: var(--r); padding: 2rem;
  position: relative; overflow: hidden;
  transition: border-color .3s, transform .35s var(--spring), box-shadow .3s;
}
.timeline-card:hover {
  border-color: rgba(0,255,136,.2);
  transform: translateX(8px);
  box-shadow: 0 8px 25px rgba(0,255,136,.05);
}
.timeline-date { font-family: 'Fira Code', monospace; font-size: .83rem; color: var(--p); margin-bottom: .45rem; }
.timeline-role { font-size: 1.25rem; font-weight: 700; color: var(--tw); margin-bottom: .2rem; }
.timeline-company { font-size: .95rem; color: var(--tm); margin-bottom: .7rem; }
.timeline-desc { color: var(--tm); font-size: .93rem; line-height: 1.8; }
.timeline-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }

/* ---------- 18. TAGS ---------- */
.tag {
  background: var(--pg); border: 1px solid rgba(0,255,136,.12);
  color: var(--p); font-size: .72rem; font-weight: 500;
  padding: .28rem .7rem; border-radius: 50px;
  transition: transform .25s var(--spring);
  cursor: default;
}
.tag:hover { transform: translateY(-2px) scale(1.05); }

/* ---------- 19. EDUCATION ---------- */
#education { background: var(--bg3); }
.edu-card {
  background: var(--glass); border: 1px solid var(--gb);
  border-radius: var(--r); padding: 2.5rem;
  max-width: 700px; margin: 0 auto;
  position: relative; overflow: hidden;
  transition: border-color .3s, transform .35s var(--spring), box-shadow .3s;
}
.edu-card::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--p); box-shadow: 0 0 12px rgba(0,255,136,.25);
}
.edu-card:hover {
  border-color: rgba(0,255,136,.2);
  transform: translateY(-5px);
  box-shadow: 0 12px 38px rgba(0,255,136,.07);
}
.edu-degree { font-size: 1.45rem; font-weight: 800; color: var(--tw); margin-bottom: .2rem; }
.edu-school { font-size: 1.05rem; color: var(--p); margin-bottom: .45rem; }
.edu-period { font-family: 'Fira Code', monospace; font-size: .83rem; color: var(--tm); margin-bottom: 1rem; }
.edu-hl { list-style: none; }
.edu-hl li { position: relative; padding-left: 1.5rem; margin-bottom: .45rem; color: var(--tm); }
.edu-hl li::before { content: '\25B9'; position: absolute; left: 0; color: var(--p); }

/* ---------- 20. SKILLS ---------- */
.skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 1.4rem; }
.skill-item {
  background: var(--glass); border: 1px solid var(--gb);
  border-radius: 12px; padding: 1.15rem 1.4rem;
  transition: border-color .3s, box-shadow .3s;
}
.skill-item:hover { border-color: rgba(0,255,136,.2); box-shadow: 0 5px 20px rgba(0,255,136,.05); }
.skill-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .65rem; }
.skill-name { font-weight: 600; font-size: .92rem; color: var(--tw); }
.skill-pct { font-family: 'Fira Code', monospace; font-size: .82rem; color: var(--p); }
.skill-bar { height: 5px; background: rgba(255,255,255,.05); border-radius: 3px; overflow: visible; position: relative; }
.skill-fill {
  height: 100%; border-radius: 3px; width: 0;
  background: linear-gradient(90deg, var(--p), var(--pd));
  transition: width 1.6s var(--ease);
  position: relative; will-change: width;
}
.skill-fill::after {
  content: ''; position: absolute; right: -4px; top: -3px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--p);
  box-shadow: 0 0 10px var(--p), 0 0 22px rgba(0,255,136,.25);
  opacity: 0; transition: opacity .4s .6s;
}
.skill-fill.glow::after { opacity: 1; }

/* ---------- 21. CERTIFICATIONS ---------- */
#certifications { background: var(--bg3); }
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.4rem; }
.cert-card {
  background: var(--glass); border: 1px solid var(--gb);
  border-radius: var(--r); padding: 1.7rem;
  position: relative; overflow: hidden;
  opacity: 0; transform: perspective(800px) rotateY(90deg);
  transition: transform .65s var(--spring), opacity .65s ease,
              border-color .3s, box-shadow .3s;
  will-change: transform, opacity;
}
.cert-card.flip-in { opacity: 1; transform: perspective(800px) rotateY(0); }
.cert-card:hover {
  border-color: rgba(0,255,136,.25);
  box-shadow: 0 10px 32px rgba(0,255,136,.07);
}
.cert-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--pg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .9rem; font-size: 1.15rem; color: var(--p);
}
.cert-name { font-size: .95rem; font-weight: 700; color: var(--tw); margin-bottom: .3rem; }
.cert-issuer { font-size: .82rem; color: var(--p); margin-bottom: .2rem; }
.cert-date { font-size: .78rem; color: var(--tm); }

/* ---------- 22. PROJECTS ---------- */
.project-card {
  background: var(--glass); border: 1px solid var(--gb);
  border-radius: var(--r); padding: 2.5rem;
  max-width: 800px; margin: 0 auto;
  position: relative; overflow: hidden;
  transition: border-color .3s, transform .35s var(--spring), box-shadow .3s;
}
.project-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--p), #00ccff, var(--p));
  background-size: 200% 100%;
  animation: gradSlide 4s linear infinite;
}
@keyframes gradSlide { 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
.project-card:hover {
  border-color: rgba(0,255,136,.2);
  transform: translateY(-5px);
  box-shadow: 0 14px 42px rgba(0,255,136,.07);
}
.project-title { font-size: 1.55rem; font-weight: 800; color: var(--tw); margin-bottom: .45rem; }
.project-subtitle { color: var(--tm); font-size: 1.02rem; margin-bottom: 1.4rem; }
.project-features { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-bottom: 1.4rem; }
.feature { display: flex; align-items: flex-start; gap: .45rem; font-size: .88rem; color: var(--tm); }
.feature i { color: var(--p); font-size: .78rem; margin-top: .25rem; }
.project-tech { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.4rem; }
.project-link {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--p); font-weight: 600;
  border-bottom: 1px solid transparent; transition: var(--tr);
}
.project-link:hover { border-bottom-color: var(--p); }

/* ---------- 23. CONTACT ---------- */
#contact { background: var(--bg3); }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px,1fr)); gap: 1.4rem; max-width: 900px; margin: 0 auto; }
.contact-card {
  background: var(--glass); border: 1px solid var(--gb);
  border-radius: var(--r); padding: 1.8rem;
  text-align: center; position: relative; overflow: hidden;
  transition: border-color .3s, transform .35s var(--spring), box-shadow .3s;
}
.contact-card:hover {
  border-color: rgba(0,255,136,.25);
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,255,136,.07);
}
.contact-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--pg);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .9rem; font-size: 1.25rem; color: var(--p);
}
.contact-label { font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--tm); margin-bottom: .3rem; }
.contact-value { font-weight: 600; color: var(--tw); font-size: .92rem; word-break: break-all; }
.contact-value a { color: var(--p); }
.contact-value a:hover { text-decoration: underline; }

/* ---------- 24. FOOTER ---------- */
footer {
  text-align: center; padding: 0 0 2rem;
  border-top: 1px solid var(--brd);
  position: relative; z-index: 1; overflow: hidden;
}
.marquee { overflow: hidden; white-space: nowrap; padding: 1.2rem 0; border-bottom: 1px solid var(--brd); margin-bottom: 1.8rem; }
.marquee-inner { display: inline-block; animation: mq 30s linear infinite; will-change: transform; }
.marquee-inner span { font-family: 'Fira Code', monospace; font-size: .82rem; color: var(--tm); margin: 0 1.8rem; }
.marquee-inner .sep { color: var(--p); }
@keyframes mq { 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }
.footer-links { display: flex; justify-content: center; gap: 1.4rem; margin-bottom: 1.4rem; }
.footer-links a {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--glass); border: 1px solid var(--gb);
  display: flex; align-items: center; justify-content: center;
  color: var(--tm); transition: var(--tr);
}
.footer-links a:hover {
  color: var(--p); border-color: rgba(0,255,136,.3);
  background: var(--pg); transform: translateY(-3px);
}
.footer-text { color: var(--tm); font-size: .83rem; }
.footer-text .heart { color: var(--p); display: inline-block; animation: hbeat 1.4s infinite; }
@keyframes hbeat { 0%,100%{ transform:scale(1); } 14%{ transform:scale(1.3); } 28%{ transform:scale(1); } 42%{ transform:scale(1.25); } 56%{ transform:scale(1); } }

/* ---------- 25. BACK TO TOP ---------- */
#btt {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 9999;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--p); color: #000; border: none; cursor: none;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transform: translateY(20px) rotate(180deg);
  transition: opacity .35s, visibility .35s, transform .4s var(--spring), box-shadow .3s;
  box-shadow: 0 4px 18px rgba(0,255,136,.3);
  will-change: transform, opacity;
}
#btt.visible { opacity: 1; visibility: visible; transform: translateY(0) rotate(0); }
#btt:hover { transform: translateY(-3px) scale(1.1); box-shadow: 0 8px 28px rgba(0,255,136,.45); }

/* ---------- 26. MOUSE TRAIL PARTICLES ---------- */
.trail-dot {
  position: fixed; pointer-events: none; z-index: 99997;
  border-radius: 50%; background: var(--p);
  will-change: transform, opacity;
  animation: trailFade .6s ease-out forwards;
}
@keyframes trailFade {
  0%   { opacity: .7; transform: scale(1); }
  100% { opacity: 0;  transform: scale(0); }
}

/* ---------- 27. RESPONSIVE ---------- */
@media (max-width: 768px) {
  body { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none !important; }
  .nav-links {
    display: none; flex-direction: column;
    position: absolute; top: 100%; left: 0; width: 100%;
    background: rgba(10,10,10,.96); backdrop-filter: blur(20px);
    padding: 1rem 2rem 1.5rem; gap: .9rem;
    border-bottom: 1px solid var(--brd);
  }
  .nav-links.open { display: flex; }
  .hamburger { display: flex; }
  .hero-stats { gap: 1.5rem; }
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-info { grid-template-columns: 1fr 1fr; }
  .project-features { grid-template-columns: 1fr; }
  .skills-grid { grid-template-columns: 1fr; }
  .hero-shapes .shape { display: none; }
  section { padding: 4rem 1.25rem; }
  .btn { padding: .75rem 1.5rem; font-size: .88rem; }
}
@media (max-width: 480px) {
  .about-info { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}