/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#0a0a0f;--bg2:#0f0f1a;--surface:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.08);--purple:#8b5cf6;--purple2:#a78bfa;
  --cyan:#06b6d4;--text:#e2e8f0;--muted:#94a3b8;--mono:'JetBrains Mono',monospace;
}
html{scroll-behavior:smooth;font-size:16px;}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;line-height:1.6;overflow-x:hidden;cursor:none;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
em{font-style:italic;color:var(--purple2);}
strong{color:#fff;}

/* ── Canvas ── */
#bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;}

/* ── Custom Cursor ── */
#cursor{position:fixed;width:8px;height:8px;background:var(--purple);border-radius:50%;pointer-events:none;z-index:10001;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s;}
#cursor-follower{position:fixed;width:32px;height:32px;border:1.5px solid rgba(139,92,246,.5);border-radius:50%;pointer-events:none;z-index:10000;transform:translate(-50%,-50%);}
#cursor.hover{width:16px;height:16px;background:var(--purple);}
#cursor-follower.hover{width:48px;height:48px;border-color:var(--purple);}

/* ── Navbar ── */
#navbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.25rem 4rem;transition:all .3s;}
#navbar.scrolled{background:rgba(10,10,15,.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:.9rem 4rem;}
.nav-logo{font-family:var(--mono);font-size:1.3rem;font-weight:700;color:#fff;letter-spacing:-.02em;}
.dot{color:var(--purple);}
.nav-links{display:flex;gap:2rem;}
.nav-link{font-family:var(--mono);font-size:.8rem;color:var(--muted);letter-spacing:.05em;transition:color .2s;position:relative;}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--purple);transition:width .3s;}
.nav-link:hover,.nav-link.active{color:#fff;}
.nav-link:hover::after,.nav-link.active::after{width:100%;}
.nav-cta{font-family:var(--mono);font-size:.8rem;padding:.5rem 1.2rem;border:1px solid var(--purple);color:var(--purple);border-radius:4px;transition:all .2s;}
.nav-cta:hover{background:var(--purple);color:#fff;}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:none;padding:4px;}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);transition:all .3s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{display:none;position:fixed;inset:0;background:rgba(10,10,15,.97);z-index:99;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;}
.mobile-menu.open{display:flex;}
.mm-link{font-family:var(--mono);font-size:1.5rem;color:var(--muted);transition:color .2s;}
.mm-link:hover{color:#fff;}

/* ── Glass Card ── */
.glass-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;backdrop-filter:blur(12px);position:relative;overflow:hidden;}

/* ── Section Base ── */
section{position:relative;z-index:1;padding:6rem 0;}
.section-inner{max-width:1100px;margin:0 auto;padding:0 2rem;}
.section-label{font-family:var(--mono);font-size:.8rem;color:var(--purple);letter-spacing:.1em;margin-bottom:1rem;}
.section-title{font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.1;margin-bottom:2.5rem;color:#fff;}

/* ── Hero ── */
#hero{min-height:100vh;display:flex;align-items:center;padding:0 4rem;}
#hero .section-inner{display:none;}
#hero{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:4rem;padding:0 4rem;width:100%;}
.hero-left{flex:1;max-width:600px;}
.hero-eyebrow{display:flex;align-items:center;gap:.6rem;margin-bottom:1.5rem;}
.status-dot{width:8px;height:8px;background:#22c55e;border-radius:50%;animation:pulse-dot 2s infinite;}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4);}50%{box-shadow:0 0 0 8px rgba(34,197,94,0);}}
.eyebrow-text{font-family:var(--mono);font-size:.8rem;color:var(--muted);letter-spacing:.05em;}
.hero-title{font-size:clamp(3rem,7vw,5.5rem);font-weight:800;line-height:1;letter-spacing:-.03em;color:#fff;margin-bottom:1rem;}
.hero-role{font-family:var(--mono);font-size:1.1rem;color:var(--purple2);margin-bottom:1.5rem;min-height:1.6em;}
.cursor-blink{animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}
.hero-desc{color:var(--muted);font-size:1.05rem;line-height:1.7;margin-bottom:2rem;max-width:520px;}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem;}
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.8rem;background:linear-gradient(135deg,var(--purple),#6d28d9);color:#fff;border-radius:8px;font-weight:600;font-size:.95rem;transition:all .3s;border:none;cursor:none;}
.btn-primary:hover{box-shadow:0 0 30px rgba(139,92,246,.4);transform:translateY(-2px);}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.8rem;border:1px solid var(--border);color:var(--text);border-radius:8px;font-weight:500;font-size:.95rem;transition:all .3s;cursor:none;}
.btn-ghost:hover{border-color:var(--purple);color:var(--purple);}
.btn-arrow{transition:transform .2s;}
.btn-primary:hover .btn-arrow,.btn-ghost:hover .btn-arrow{transform:translateX(4px);}
.hero-meta{display:flex;gap:.75rem;flex-wrap:wrap;}
.meta-chip{font-size:.8rem;padding:.3rem .8rem;background:var(--surface);border:1px solid var(--border);border-radius:20px;color:var(--muted);}
.hero-right{flex-shrink:0;}
.hero-card{padding:2rem;width:320px;}
.card-glow{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 50% 50%,rgba(139,92,246,.08),transparent 60%);pointer-events:none;}
.hc-label{font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem;}
.hc-role{font-size:1rem;font-weight:600;color:#fff;margin-bottom:1rem;}
.hc-divider{height:1px;background:var(--border);margin:1rem 0;}
.hc-stats{display:flex;gap:1rem;justify-content:space-between;}
.hc-stat{text-align:center;}
.hc-num{font-family:var(--mono);font-size:1.8rem;font-weight:700;color:var(--purple2);}
.hc-plus{font-size:1rem;color:var(--purple2);}
.hc-unit{display:block;font-size:.65rem;color:var(--muted);margin-top:.2rem;}
.hc-tags{display:flex;flex-wrap:wrap;gap:.4rem;}
.hc-tag{font-size:.7rem;padding:.25rem .6rem;background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.2);border-radius:4px;color:var(--purple2);}

/* ── About ── */
#about{background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);}
.about-grid{display:grid;grid-template-columns:1fr 380px;gap:4rem;align-items:start;}
.about-text p{color:var(--muted);margin-bottom:1rem;line-height:1.8;}
.skills-grid{margin-top:2rem;display:flex;flex-direction:column;gap:1rem;}
.skill-item{display:flex;flex-direction:column;gap:.4rem;}
.skill-name{font-size:.8rem;color:var(--muted);font-family:var(--mono);}
.skill-bar{display:block;height:3px;background:linear-gradient(90deg,var(--purple),var(--cyan));border-radius:2px;width:0;transition:width 1.2s cubic-bezier(.4,0,.2,1);}
.about-aside{display:flex;flex-direction:column;gap:1rem;}
.aside-block{padding:1.25rem 1.5rem;}
.aside-label{font-family:var(--mono);font-size:.7rem;color:var(--purple);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem;}
.aside-val{font-size:.9rem;color:var(--text);line-height:1.5;}
.aside-sub{font-size:.8rem;color:var(--muted);}

/* ── Experience / Timeline ── */
#experience{background:var(--bg);}
.timeline{display:flex;flex-direction:column;gap:0;position:relative;}
.timeline::before{content:'';position:absolute;left:160px;top:0;bottom:0;width:2px;background:var(--border);}
.tl-item{display:grid;grid-template-columns:160px 1fr;gap:2.5rem;padding-bottom:2.5rem;position:relative;}
.tl-meta{text-align:right;padding-top:.5rem;position:relative;padding-right:1.25rem;}
.tl-date{font-family:var(--mono);font-size:.72rem;color:var(--muted);line-height:1.4;}
.tl-company{font-size:.85rem;font-weight:600;color:var(--purple2);margin-top:.25rem;}
.tl-dot{position:absolute;right:-7px;top:.65rem;width:12px;height:12px;background:var(--purple);border-radius:50%;border:2px solid var(--bg);box-shadow:0 0 12px rgba(139,92,246,.5);z-index:2;}
.tl-body{padding:1.5rem;}
.tl-role{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.25rem;}
.tl-location{font-size:.8rem;color:var(--muted);margin-bottom:.75rem;}
.tl-desc{color:var(--muted);font-size:.9rem;margin-bottom:.75rem;line-height:1.6;}
.tl-list{display:flex;flex-direction:column;gap:.4rem;}
.tl-list li{font-size:.88rem;color:var(--muted);padding-left:1rem;position:relative;line-height:1.5;}
.tl-list li::before{content:'▸';position:absolute;left:0;color:var(--purple);}

/* ── Projects ── */
#projects{background:var(--bg2);}
.projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
.proj-card{padding:1.75rem;border-radius:16px;background:var(--surface);border:1px solid var(--border);transition:all .3s;position:relative;overflow:hidden;}
.proj-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(139,92,246,.05),transparent);opacity:0;transition:opacity .3s;}
.proj-card:hover{border-color:rgba(139,92,246,.3);transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.3);}
.proj-card:hover::before{opacity:1;}
.proj-card.featured{grid-column:1/-1;display:grid;grid-template-columns:1fr 200px;gap:2rem;align-items:center;}
.proj-top{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;}
.proj-icon{font-size:1.5rem;}
.proj-badge{font-family:var(--mono);font-size:.65rem;padding:.2rem .6rem;background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.3);border-radius:4px;color:var(--purple2);}
.proj-title{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:.6rem;}
.proj-desc{font-size:.88rem;color:var(--muted);line-height:1.6;margin-bottom:1rem;}
.proj-impact{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;}
.proj-impact span{font-family:var(--mono);font-size:.7rem;padding:.2rem .6rem;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:4px;color:var(--muted);}
.proj-stack{display:flex;flex-wrap:wrap;gap:.4rem;}
.proj-stack span{font-size:.72rem;padding:.2rem .55rem;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:4px;color:var(--muted);}

/* ── Contact ── */
#contact{background:var(--bg);}
.contact-sub{color:var(--muted);font-size:1rem;margin-top:-1.5rem;margin-bottom:2.5rem;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;}
.contact-links{display:flex;flex-direction:column;gap:1rem;}
.contact-item{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;border-radius:12px;transition:all .3s;}
.contact-item:hover{border-color:rgba(139,92,246,.3);transform:translateX(4px);}
.ci-icon{font-size:1.3rem;flex-shrink:0;}
.ci-label{font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.05em;}
.ci-val{font-size:.9rem;color:var(--text);margin-top:.1rem;}
.ci-arrow{margin-left:auto;color:var(--muted);transition:all .3s;}
.contact-item:hover .ci-arrow{color:var(--purple);transform:translateX(4px);}
.contact-form{display:flex;flex-direction:column;gap:1rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.form-group{display:flex;flex-direction:column;gap:.4rem;}
.form-group label{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.05em;}
.form-group input,.form-group textarea{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.75rem 1rem;color:var(--text);font-family:'Inter',sans-serif;font-size:.9rem;transition:border-color .2s;outline:none;resize:none;}
.form-group textarea{min-height:120px;}
.form-group input:focus,.form-group textarea:focus{border-color:var(--purple);}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(148,163,184,.4);}
.form-success{display:none;padding:.75rem 1rem;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);border-radius:8px;color:#22c55e;font-size:.88rem;text-align:center;}
.form-success.show{display:block;}
.form-success.error{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.25);color:#ef4444;}

/* ── Footer ── */
footer{position:relative;z-index:1;border-top:1px solid var(--border);padding:2rem 0;}
.footer-inner{max-width:1100px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
.footer-logo{font-family:var(--mono);font-size:1.1rem;font-weight:700;color:#fff;}
.footer-copy{font-size:.8rem;color:var(--muted);}
.footer-links{display:flex;gap:1.5rem;}
.footer-links a{font-size:.8rem;color:var(--muted);transition:color .2s;}
.footer-links a:hover{color:var(--purple);}

/* ── Scroll Top ── */
#scrollTop{position:fixed;bottom:2rem;right:2rem;z-index:50;width:44px;height:44px;background:var(--purple);color:#fff;border:none;border-radius:50%;font-size:1.1rem;cursor:none;opacity:0;transform:translateY(20px);transition:all .3s;display:flex;align-items:center;justify-content:center;}
#scrollTop.visible{opacity:1;transform:translateY(0);}
#scrollTop:hover{background:var(--purple2);box-shadow:0 0 20px rgba(139,92,246,.4);}

/* ── Scroll Reveal Animations ── */
.reveal-fade,.reveal-left,.reveal-right,.scroll-reveal{opacity:0;transition:opacity .7s ease,transform .7s ease;}
.reveal-fade{transform:translateY(20px);}
.reveal-left{transform:translateX(-40px);}
.reveal-right{transform:translateX(40px);}
.scroll-reveal{transform:translateY(30px);}
.reveal-fade.revealed,.reveal-left.revealed,.reveal-right.revealed,.scroll-reveal.revealed{opacity:1;transform:none;}
.fade-up{opacity:0;transform:translateY(20px);animation:fadeUp .7s ease forwards;}
.delay-1{animation-delay:.15s;}
.delay-2{animation-delay:.3s;}
.delay-3{animation-delay:.45s;}
.delay-4{animation-delay:.6s;}
@keyframes fadeUp{to{opacity:1;transform:none;}}
.word-reveal{display:inline-block;opacity:0;transform:translateY(30px);animation:fadeUp .6s ease forwards;}
.word-reveal.delay-1{animation-delay:.2s;}

/* ── Responsive ── */
@media(max-width:900px){
  #hero{flex-direction:column;padding:6rem 2rem 3rem;text-align:center;min-height:auto;}
  .hero-left{max-width:100%;}
  .hero-actions{justify-content:center;}
  .hero-meta{justify-content:center;}
  .hero-right{width:100%;}
  .hero-card{width:100%;max-width:360px;margin:0 auto;}
  .about-grid{grid-template-columns:1fr;}
  .timeline::before{left:0;}
  .tl-item{grid-template-columns:1fr;padding-left:1.5rem;}
  .tl-meta{text-align:left;}
  .tl-dot{left:-1.75rem;right:auto;}
  .projects-grid{grid-template-columns:1fr;}
  .proj-card.featured{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  #navbar{padding:1rem 1.5rem;}
  #navbar.scrolled{padding:.8rem 1.5rem;}
  .nav-links,.nav-cta{display:none;}
  .hamburger{display:flex;}
  .footer-inner{flex-direction:column;text-align:center;}
}

/* ── Word-by-word stagger reveal ── */
.word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  animation: wordUp 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes wordUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Clip-path section title reveal ── */
.title-clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.77,0,0.175,1);
}
.title-clip.title-revealed {
  clip-path: inset(0 0% 0 0);
}

/* ── Glass card cursor spotlight ── */
.glass-card {
  position: relative;
  overflow: hidden;
}
.glass-card.spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(139,92,246,0.18) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.2s;
}
.glass-card.spotlight > * {
  position: relative;
  z-index: 1;
}

/* ── Skill bar spring base ── */
.skill-bar {
  width: 0;
  transition: width 1.2s cubic-bezier(0.34,1.56,0.64,1);
}

/* ── 3D card tilt base ── */
.proj-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── Marquee Ticker ── */
.marquee-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: .85rem 0;
}
.marquee-wrap::before,
.marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 140px;
  z-index: 2;
  pointer-events: none;
}
.marquee-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg2) 0%, transparent 100%);
}
.marquee-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg2) 0%, transparent 100%);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: marquee-scroll 40s linear infinite;
  will-change: transform;
}
.marquee-track:hover {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-item {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 1.75rem;
  flex-shrink: 0;
  transition: color .3s;
}
.marquee-item:hover {
  color: var(--purple2);
}
.marquee-item.italic {
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--purple2);
  opacity: .7;
}
.marquee-item.italic:hover {
  opacity: 1;
}
.marquee-sep {
  color: var(--purple);
  font-size: .65rem;
  flex-shrink: 0;
  opacity: .6;
  filter: drop-shadow(0 0 4px rgba(139,92,246,.6));
}

/* ── Scroll progress bar ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--purple), var(--cyan));
  box-shadow: 0 0 12px rgba(139,92,246,.6);
  z-index: 200;
  pointer-events: none;
}

/* ── Aurora blobs in hero ──
   No filter:blur and no negative offsets: a blurred blob clipped by
   the section box leaves a visible hard seam at the box edge. These
   are pure radial gradients that fade to transparent well inside. */
#hero { position: relative; overflow: hidden; }
.aurora {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}
.aurora-1 {
  width: 640px; height: 640px;
  top: 2%; right: 0;
  background: radial-gradient(circle, rgba(139,92,246,.18), transparent 60%);
  animation: aurora-drift 14s ease-in-out infinite alternate;
}
.aurora-2 {
  width: 540px; height: 540px;
  bottom: 2%; left: 0;
  background: radial-gradient(circle, rgba(6,182,212,.12), transparent 60%);
  animation: aurora-drift 18s ease-in-out infinite alternate-reverse;
}
@keyframes aurora-drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-50px,30px) scale(1.1); }
}
.hero-left, .hero-right { position: relative; z-index: 1; }

/* ── Gradient hero name ── */
.hero-title .word-reveal {
  background: linear-gradient(120deg, #fff 30%, var(--purple2) 70%, var(--cyan) 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Career changelog: version badges & status chips ── */
.tl-version {
  display: inline-block;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  padding: .12rem .5rem;
  border-radius: 4px;
  background: rgba(139,92,246,.1);
  border: 1px solid rgba(139,92,246,.3);
  color: var(--purple2);
  margin-bottom: .35rem;
}
.tl-version.latest {
  background: rgba(139,92,246,.22);
  border-color: rgba(139,92,246,.6);
  box-shadow: 0 0 12px rgba(139,92,246,.3);
}
.tl-status {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .04em;
  padding: .15rem .5rem;
  border-radius: 20px;
  background: rgba(148,163,184,.08);
  border: 1px solid rgba(148,163,184,.2);
  color: var(--muted);
  vertical-align: middle;
  margin-left: .5rem;
  white-space: nowrap;
}
.tl-status.live {
  background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.3);
  color: #22c55e;
}

/* ── Project status chip ── */
.proj-status {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .04em;
  padding: .15rem .5rem;
  border-radius: 20px;
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.25);
  color: #22c55e;
  margin-left: auto;
}

/* ── Footer version tag ── */
.footer-version {
  font-family: var(--mono);
  font-size: .68rem;
  padding: .1rem .45rem;
  border-radius: 4px;
  background: rgba(139,92,246,.1);
  border: 1px solid rgba(139,92,246,.25);
  color: var(--purple2);
  margin-left: .4rem;
}

/* ── Selection & scrollbar theming ── */
::selection { background: rgba(139,92,246,.45); color: #fff; }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--bg); }
html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--purple), var(--cyan));
  border-radius: 5px;
  border: 2px solid var(--bg);
}

/* ── Film grain texture ── */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .032;
  pointer-events: none;
  z-index: 9997;
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0,0); }
  10% { transform: translate(-5%,-8%); }
  30% { transform: translate(3%,-12%); }
  50% { transform: translate(-8%,4%); }
  70% { transform: translate(6%,8%); }
  90% { transform: translate(-3%,5%); }
}

/* ── Nav logo dot pulse on hover ── */
.nav-logo:hover .dot {
  color: var(--cyan);
  display: inline-block;
  animation: dot-bounce .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes dot-bounce {
  0% { transform: translateY(0); }
  40% { transform: translateY(-6px) scale(1.3); }
  100% { transform: translateY(0); }
}

/* ── Gradient stat numbers ── */
.hc-num {
  background: linear-gradient(120deg, var(--purple2), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Changelog diff-style bullets ── */
.tl-list li::before {
  content: '+';
  color: #22c55e;
  font-family: var(--mono);
  font-weight: 700;
}

/* ── Per-project accent colors ── */
.projects-grid .proj-card:nth-child(1) { --accent-rgb: 139,92,246; }
.projects-grid .proj-card:nth-child(2) { --accent-rgb: 6,182,212; }
.projects-grid .proj-card:nth-child(3) { --accent-rgb: 34,197,94; }
.projects-grid .proj-card:nth-child(4) { --accent-rgb: 245,158,11; }
.projects-grid .proj-card:nth-child(5) { --accent-rgb: 236,72,153; }
.projects-grid .proj-card:nth-child(6) { --accent-rgb: 59,130,246; }
.proj-card { --accent-rgb: 139,92,246; }
.proj-card:hover {
  border-color: rgba(var(--accent-rgb), .35);
  box-shadow: 0 20px 40px rgba(0,0,0,.3), 0 0 24px rgba(var(--accent-rgb), .12);
}
.proj-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 11px;
  font-size: 1.35rem;
  background: rgba(var(--accent-rgb), .1);
  border: 1px solid rgba(var(--accent-rgb), .25);
}

/* ── Contact availability line ── */
.contact-availability {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--muted);
  margin-top: -1.5rem;
  margin-bottom: 2.5rem;
}

/* ── Editorial serif italic accents ── */
.section-title em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.08em;
  letter-spacing: .01em;
  background: linear-gradient(110deg, var(--purple2), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: .08em;
}
.marquee-item.italic {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .85rem;
}

/* ── Animated gradient logo ── */
.nav-logo, .footer-logo {
  background: linear-gradient(90deg, #fff, var(--purple2), var(--cyan), #fff);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: logo-shift 7s linear infinite;
}
.nav-logo .dot, .footer-logo .dot { -webkit-text-fill-color: var(--purple); }
@keyframes logo-shift {
  from { background-position: 0% 0; }
  to   { background-position: 300% 0; }
}

/* ── Hero card: rotating gradient border + avatar ── */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.hero-card {
  border: 1px solid transparent;
  background:
    linear-gradient(#12121e, #12121e) padding-box,
    conic-gradient(from var(--angle),
      rgba(139,92,246,.05) 0%,
      rgba(139,92,246,.9) 12%,
      rgba(6,182,212,.9) 28%,
      rgba(139,92,246,.05) 45%,
      rgba(139,92,246,.05) 100%) border-box;
  animation: border-spin 6s linear infinite;
}
@keyframes border-spin { to { --angle: 360deg; } }
.hc-top {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1rem;
}
.hc-top .hc-role { margin-bottom: 0; }
.hc-avatar {
  position: relative;
  flex-shrink: 0;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(139,92,246,.25), rgba(6,182,212,.18));
}
.hc-avatar::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from var(--angle), transparent 0%, var(--purple) 30%, var(--cyan) 55%, transparent 75%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: border-spin 4s linear infinite;
}
.hc-avatar svg {
  width: 40px;
  height: 40px;
  animation: bot-bob 3.5s ease-in-out infinite;
}
@keyframes bot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
#robot-eyes ellipse {
  filter: drop-shadow(0 0 3px rgba(6,182,212,.8));
}
#robot-eyes, #robot-eyes-happy {
  transition: opacity .15s ease;
}
#robot-eyes-happy {
  opacity: 0;
  filter: drop-shadow(0 0 3px rgba(6,182,212,.8));
}
.hc-avatar.happy #robot-eyes { opacity: 0; }
.hc-avatar.happy #robot-eyes-happy { opacity: 1; }
#robot-mouth {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .2s ease;
}
.hc-avatar.happy #robot-mouth { transform: scale(1.3); }
.hc-avatar.happy svg {
  animation: bot-hop .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bot-hop {
  0% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

/* ── Ghost section numbers ── */
.section-inner { position: relative; }
.section-inner::before {
  position: absolute;
  top: -3.5rem;
  right: 0;
  font-family: var(--mono);
  font-size: clamp(5rem, 12vw, 9rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(139,92,246,.14);
  pointer-events: none;
  z-index: 0;
}
#about .section-inner::before { content: '01'; }
#experience .section-inner::before { content: '02'; }
#projects .section-inner::before { content: '03'; }
#contact .section-inner::before { content: '04'; }

/* ── Primary button shimmer sweep ── */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  animation: shimmer 3.2s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { left: -80%; }
  45%  { left: 130%; }
  100% { left: 130%; }
}

/* ── Gradient timeline spine ── */
.timeline::before {
  background: linear-gradient(180deg, var(--purple) 0%, var(--cyan) 55%, transparent 100%);
  box-shadow: 0 0 10px rgba(139,92,246,.25);
}

/* ── Ambient section glows ──
   Painted as background layers that fade out inside the section box,
   so nothing is clipped at section edges (no seams). */
#about {
  background:
    radial-gradient(45% 50% at 0% 40%, rgba(139,92,246,.07), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}
#projects {
  background:
    radial-gradient(45% 50% at 100% 35%, rgba(6,182,212,.06), transparent 70%),
    var(--bg2);
}
#contact {
  background:
    radial-gradient(50% 45% at 35% 55%, rgba(139,92,246,.06), transparent 70%),
    var(--bg);
}

/* ── Reduced motion: respect OS-level animation preferences ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto;}
  #bg-canvas{display:none;}
  .marquee-track{animation:none !important;transform:none !important;}
  .aurora{display:none;}
  /* reveal animations must not leave content invisible */
  .scroll-reveal,.reveal-fade,.reveal-left,.reveal-right,
  .fade-up,.word-reveal{opacity:1 !important;transform:none !important;}
  .title-clip{clip-path:none !important;}
  .skill-bar{transition:none !important;}
}

/* ── Touch devices: restore native cursor (custom cursor is mouse-only) ── */
@media (hover:none),(pointer:coarse){
  body,a,button,.hamburger,.btn-primary,.btn-ghost{cursor:auto !important;}
  #cursor,#cursor-follower{display:none !important;}
}