/* ============================================
   DARK CODE — Santo Sarkar Portfolio
   Tokens
   ============================================ */
:root{
  --bg:#050508;
  --bg-elev:#0b0b13;
  --surface:rgba(255,255,255,0.045);
  --surface-strong:rgba(255,255,255,0.07);
  --border:rgba(255,255,255,0.09);
  --purple:#8b5cf6;
  --purple-2:#a855f7;
  --purple-deep:#5b21b6;
  --blue:#38bdf8;
  --silver:#c9cbd6;
  --text:#eef0fa;
  --text-dim:#9496ab;
  --text-faint:#5e6178;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --ease:cubic-bezier(.16,.84,.44,1);
  --radius:20px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:auto;overflow-x:hidden;width:100%;}
html,body{background:var(--bg);color:var(--text);max-width:100%;}
body{
  font-family:var(--font-body);
  font-weight:400;
  overflow-x:hidden;
  position:relative;
  width:100%;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;border:none;background:none;color:inherit;}
::selection{background:var(--purple);color:#fff;}

/* Belt-and-braces guard against any single element (long word, fixed-px
   width, negative-offset decoration) pushing the viewport wider than the
   screen on mobile — the #1 cause of sideways scroll/"drift" on phones. */
h1,h2,h3,h4,p,span,a,li,b{overflow-wrap:break-word;word-break:break-word;}
main,section{max-width:100%;overflow:clip visible;}

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--purple),var(--blue));border-radius:10px;}

/* ============ PRELOADER ============ */
#preloader{
  position:fixed;inset:0;z-index:9999;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none;}
.pre-inner{text-align:center;}
.pre-mark{
  width:56px;height:56px;margin:0 auto 22px;border-radius:16px;
  filter:drop-shadow(0 8px 22px rgba(139,92,246,.55));
  animation:preMarkPulse 2.2s ease-in-out infinite;
}
@keyframes preMarkPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}
.pre-logo{
  font-family:var(--font-display);font-weight:700;font-size:clamp(20px,3.6vw,30px);
  letter-spacing:1.5px;margin-bottom:28px;color:var(--text);
}
.pre-logo span{color:var(--purple);display:block;font-size:.85em;letter-spacing:3px;margin-top:2px;}
.pre-bar{width:min(260px,60vw);height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;margin:0 auto;}
.pre-fill{width:0%;height:100%;background:linear-gradient(90deg,var(--purple),var(--blue));transition:width .2s ease;}
.pre-pct{margin-top:14px;font-family:var(--font-mono);font-size:13px;color:var(--text-dim);letter-spacing:1px;}

/* ============ BG CANVAS / GRAIN ============ */
#bgCanvas{position:fixed;inset:0;z-index:0;width:100%;height:100%;}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ LAYOUT BASICS ============ */
main{position:relative;z-index:2;}
section{position:relative;padding:160px 8vw;max-width:1440px;margin:0 auto;scroll-margin-top:96px;}
@media(max-width:900px){section{padding:110px 6vw;scroll-margin-top:84px;}}

.section-head{margin-bottom:64px;max-width:640px;}
.section-head.center{max-width:640px;margin-left:auto;margin-right:auto;text-align:center;}
.eyebrow{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--purple-2);display:flex;align-items:center;gap:8px;margin-bottom:18px;
}
.section-head.center .eyebrow{justify-content:center;}
.dot-live{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 10px #34d399;display:inline-block;animation:pulse 1.8s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.section-title{
  font-family:var(--font-display);font-weight:600;font-size:clamp(30px,4.2vw,52px);
  line-height:1.1;letter-spacing:-.5px;
}
.section-sub{color:var(--text-dim);font-size:17px;margin-top:16px;max-width:520px;}
.section-head.center .section-sub{margin-left:auto;margin-right:auto;}

/* ============ REVEAL ============ */
/* Visible by default so content never disappears if a script fails to load.
   Only hidden-then-revealed once html.js-ready confirms the animation JS is running. */
.reveal{opacity:1;transform:none;}
html.js-ready .reveal{opacity:0;transform:translateY(36px);}
html.js-ready .reveal.in{animation:revealUp .9s var(--ease) forwards;}
@keyframes revealUp{to{opacity:1;transform:translateY(0);}}

/* ============ BUTTONS ============ */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:15px 30px;border-radius:100px;font-weight:500;font-size:14.5px;letter-spacing:.2px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-3d{transform-style:preserve-3d;}
.btn-primary{
  background:linear-gradient(135deg,var(--purple),var(--purple-deep));
  color:#fff;box-shadow:0 10px 30px -8px rgba(139,92,246,.6);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px -8px rgba(139,92,246,.8);}
.btn-ghost{border:1px solid var(--border);color:var(--text);background:rgba(255,255,255,.02);backdrop-filter:blur(6px);}
.btn-ghost:hover{border-color:var(--purple);transform:translateY(-3px);background:rgba(139,92,246,.08);}
.btn-nav{padding:11px 22px;font-size:13.5px;}

/* ============ NAV ============ */
#siteHeader{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px 8vw;
  padding-top:max(22px, env(safe-area-inset-top));
  transition:padding .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
  background-color:transparent;
  /* GPU-composite the header as its own layer so it doesn't get
     repainted with the rest of the page on every scroll frame —
     this is what stops the header "shaking" on mobile browsers. */
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:background-color;
}
#siteHeader.scrolled{
  padding:14px 8vw;
  padding-top:max(14px, env(safe-area-inset-top));
  background-color:rgba(5,5,8,.82);
  border-bottom:1px solid var(--border);
}
/* backdrop-filter blur is only cheap enough to animate continuously on
   desktop GPUs — on mobile it forces the browser to re-blur the moving
   3D canvas behind the header on every single scroll frame, which is
   the main cause of visible header jitter on phones. Desktop keeps the
   full glass effect; mobile gets an equivalent solid panel instead
   (see the mobile performance block at the bottom of this file). */
@media(min-width:901px){
  #siteHeader.scrolled{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1440px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:18px;}
.brand-mark{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(56,189,248,.6));}
.brand b{color:var(--purple-2);font-weight:600;}
.nav-links{display:flex;gap:36px;}
.nav-links a{font-size:14.5px;color:var(--text-dim);transition:color .25s;position:relative;}
.nav-links a:hover{color:var(--text);}
.nav-links a::after{content:'';position:absolute;bottom:-6px;left:0;width:0;height:1px;background:var(--purple-2);transition:width .3s var(--ease);}
.nav-links a:hover::after{width:100%;}
#burgerBtn{display:none;flex-direction:column;gap:5px;width:26px;}
#burgerBtn span{height:2px;background:var(--text);border-radius:2px;}

#mobileNav{
  position:fixed;inset:0;z-index:200;background:rgba(5,5,10,.98);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transform:translateY(-100%);transition:transform .5s var(--ease);
  -webkit-transform:translateY(-100%);
  overflow-y:auto;
  padding:calc(24px + env(safe-area-inset-top)) 6vw calc(24px + env(safe-area-inset-bottom));
}
#mobileNav.open{transform:translateY(0);-webkit-transform:translateY(0);}
#mobileNav .m-link{font-family:var(--font-display);font-size:26px;font-weight:500;text-align:center;}
#closeMobile{position:absolute;top:calc(26px + env(safe-area-inset-top));right:6vw;font-size:34px;color:var(--text);}

@media(max-width:900px){
  .nav-links,.btn-nav{display:none;}
  #burgerBtn{display:flex;}
}

/* ============ HERO ============ */
#hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:140px;padding-bottom:60px;}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:70px;}}
@media(max-width:560px){#hero{padding-top:110px;padding-bottom:40px;}}

.hero-title{font-family:var(--font-display);font-weight:600;font-size:clamp(38px,6vw,72px);line-height:1.04;letter-spacing:-1px;margin-bottom:22px;}
.hero-line{display:block;}
.hero-typed{
  background:linear-gradient(90deg,var(--purple-2),var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:.62em;font-weight:500;
}
.caret{color:var(--blue);-webkit-text-fill-color:var(--blue);animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}

.hero-sub{font-size:18px;color:var(--text-dim);max-width:520px;margin-bottom:36px;}
.hero-cta{display:flex;gap:16px;margin-bottom:56px;flex-wrap:wrap;}

.hero-stats{display:flex;gap:44px;flex-wrap:wrap;}
.stat b{display:block;font-family:var(--font-display);font-size:34px;font-weight:600;color:var(--text);}
.stat span{font-size:13px;color:var(--text-faint);letter-spacing:.3px;}
@media(max-width:560px){
  .hero-stats{display:grid;grid-template-columns:repeat(3,auto);gap:22px;}
  .stat b{font-size:26px;}
  .stat span{font-size:11.5px;}
}

/* hero visual / portrait */
.hero-visual{display:flex;justify-content:center;perspective:1200px;}
.portrait-stage{position:relative;width:min(380px,80vw);aspect-ratio:1/1.08;transform-style:preserve-3d;}
.portrait-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(139,92,246,.25);animation:spin 26s linear infinite;}
.portrait-ring.r2{inset:-26px;border-color:rgba(56,189,248,.18);animation-duration:38s;animation-direction:reverse;}
@keyframes spin{to{transform:rotate(360deg);}}
.portrait-glow{position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.35),transparent 70%);filter:blur(30px);}
.portrait-frame{
  position:absolute;inset:6%;border-radius:28px;overflow:hidden;
  border:1px solid var(--border);background:var(--surface);backdrop-filter:blur(6px);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.portrait-frame img{width:100%;height:100%;object-fit:cover;}
.hud-chip{
  position:absolute;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:100px;
  background:rgba(10,10,16,.7);border:1px solid var(--border);backdrop-filter:blur(10px);
  font-family:var(--font-mono);font-size:11.5px;color:var(--text-dim);white-space:nowrap;
}
.hud-dot{width:6px;height:6px;border-radius:50%;background:var(--purple-2);box-shadow:0 0 8px var(--purple-2);}
.hud-dot.blue{background:var(--blue);box-shadow:0 0 8px var(--blue);}
.chip-1{top:6%;left:-8%;}
.chip-2{bottom:20%;right:-12%;}
.chip-3{bottom:0%;left:4%;}
@media(max-width:520px){
  .hud-chip{font-size:10.5px;padding:7px 11px;}
  .chip-1{left:-2%;}
  .chip-2{right:-2%;}
}

.scroll-cue{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none;
}
.scroll-cue span{font-family:var(--font-mono);font-size:10.5px;color:var(--text-faint);letter-spacing:2px;text-transform:uppercase;}
.cue-mouse{width:22px;height:34px;border-radius:12px;border:1.5px solid rgba(255,255,255,.22);display:flex;justify-content:center;padding-top:6px;}
.cue-wheel{width:3px;height:7px;border-radius:2px;background:var(--purple-2);box-shadow:0 0 8px var(--purple-2);animation:cueWheel 1.8s ease-in-out infinite;}
@keyframes cueWheel{0%{opacity:1;transform:translateY(0);}70%{opacity:0;transform:translateY(9px);}100%{opacity:0;transform:translateY(0);}}
@media(max-width:900px),(max-height:720px){.scroll-cue{display:none;}}

/* ============ GLASS CARD BASE ============ */
.glass{background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(14px);border-radius:var(--radius);}

/* ============ ABOUT ============ */
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:center;}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:60px;}}
.about-visual{display:flex;justify-content:center;}
.about-orb-wrap{position:relative;width:min(320px,70vw);aspect-ratio:1;}
.about-photo{
  position:absolute;inset:14%;border-radius:50%;overflow:hidden;border:1px solid var(--border);
  box-shadow:0 0 60px -10px rgba(139,92,246,.45);
}
.about-photo img{width:100%;height:100%;object-fit:cover;}
.orbit-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(139,92,246,.3);animation:spin 30s linear infinite;}
.orbit-ring.o2{inset:-18px;border-color:rgba(56,189,248,.22);animation-duration:44s;animation-direction:reverse;border-style:solid;}

.about-lead{font-size:21px;font-family:var(--font-display);font-weight:500;line-height:1.5;margin-bottom:22px;}
.about-lead b{color:var(--purple-2);}
.about-body{color:var(--text-dim);font-size:16px;line-height:1.75;margin-bottom:38px;}

.about-timeline{display:flex;flex-direction:column;gap:20px;}
.mini-t{display:flex;gap:16px;align-items:flex-start;}
.mt-dot{width:9px;height:9px;border-radius:50%;background:var(--purple-2);margin-top:6px;flex-shrink:0;box-shadow:0 0 10px var(--purple-2);}
.mini-t>div{min-width:0;}
.mini-t b{font-size:14px;font-family:var(--font-mono);color:var(--text);}
.mini-t p{font-size:14.5px;color:var(--text-dim);margin-top:2px;}

/* ============ SKILLS / CAPABILITIES — NEUMORPHISM SYSTEM ============ */
:root{
  --neu-base:#0d0d17;
  --neu-base-2:#0a0a12;
  --neu-shadow-dark:rgba(0,0,0,.62);
  --neu-shadow-light:rgba(255,255,255,.035);
  --neu-shadow-light-strong:rgba(255,255,255,.055);
  --neu-radius:24px;
  --neu-radius-sm:16px;
}

.neu-block{margin-top:88px;}
.neu-block:first-of-type{margin-top:0;}
.neu-block-head{margin-bottom:34px;text-align:center;}
.neu-block-head h3{
  font-family:var(--font-display);font-weight:600;font-size:clamp(21px,2.4vw,27px);
  color:var(--text);letter-spacing:-.2px;
  position:relative;display:inline-block;padding-bottom:14px;
}
.neu-block-head h3::after{
  content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:46px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--purple),var(--blue));
}
.neu-block-head p{margin-top:14px;color:var(--text-dim);font-size:14.5px;max-width:460px;margin-left:auto;margin-right:auto;}

/* ---- shared neumorphic surface (chips & role cards) ---- */
.neu-chip,.neu-do-card{
  background:linear-gradient(155deg,#101120,var(--neu-base) 55%,#0b0b14);
  border-radius:var(--neu-radius-sm);
  border:1px solid rgba(255,255,255,.04);
  box-shadow:
    8px 8px 18px var(--neu-shadow-dark),
    -7px -7px 16px var(--neu-shadow-light),
    inset 0 1px 0 rgba(255,255,255,.03);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.neu-chip:hover,.neu-do-card:hover{
  transform:translateY(-5px);
  border-color:rgba(139,92,246,.35);
  box-shadow:
    11px 11px 26px var(--neu-shadow-dark),
    -9px -9px 22px var(--neu-shadow-light-strong),
    0 0 0 1px rgba(139,92,246,.12),
    0 22px 46px -24px rgba(139,92,246,.55);
}

/* ---- icon badges: generic (gradient, inline svg) vs logo (light, brand image) ---- */
.neu-chip-ic svg{width:18px;height:18px;color:#fff;}
.neu-do-ic svg{width:26px;height:26px;color:var(--purple-2);}
.neu-ai-ic svg{width:20px;height:20px;color:var(--blue);}

.neu-chip-ic.is-logo,.neu-do-ic.is-logo{
  background:linear-gradient(155deg,#f5f5fb,#e1e1ec);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7), 0 3px 8px -2px rgba(0,0,0,.55);
}
.neu-chip-ic.is-logo img{width:58%;height:58%;object-fit:contain;display:block;}
.neu-do-ic.is-logo img{width:60%;height:60%;object-fit:contain;display:block;}
.neu-do-ic.is-logo{background:linear-gradient(155deg,#f5f5fb,#e1e1ec);box-shadow:inset 0 1px 1px rgba(255,255,255,.7), 0 3px 8px -2px rgba(0,0,0,.55);}

/* tool tags with brand logo swatch */
.tool-logo-wrap{
  display:inline-flex;align-items:center;justify-content:center;
  height:18px;padding:0 4px;border-radius:5px;flex-shrink:0;
  background:linear-gradient(155deg,#f5f5fb,#e1e1ec);
}
.tool-logo-wrap img{height:11px;width:auto;max-width:36px;object-fit:contain;display:block;}


/* ---- My Skills : neumorphic chip grid ---- */
.neu-chip-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:1040px;margin:0 auto;
}
.neu-chip{
  display:flex;align-items:center;gap:12px;
  padding:14px 22px 14px 14px;border-radius:100px;
}
.neu-chip-ic{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:12px;font-weight:700;color:#fff;letter-spacing:.2px;
  background:linear-gradient(135deg,var(--purple),var(--blue));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.25), 0 3px 8px -2px rgba(139,92,246,.6);
}
.neu-chip-label{font-family:var(--font-display);font-weight:500;font-size:14.5px;color:var(--text);white-space:nowrap;}

/* ---- What I Do : neumorphic role cards ---- */
.neu-do-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.neu-do-card{
  padding:32px 26px;border-radius:var(--neu-radius);
}
.neu-do-ic{
  width:56px;height:56px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:20px;
  background:linear-gradient(155deg,#151628,#0c0c16);
  box-shadow:inset 3px 3px 7px var(--neu-shadow-dark), inset -3px -3px 7px var(--neu-shadow-light-strong);
}
.neu-do-card h4{font-family:var(--font-display);font-weight:600;font-size:16.5px;color:var(--text);line-height:1.3;margin-bottom:10px;}
.neu-do-card p{color:var(--text-dim);font-size:13.5px;line-height:1.65;}

/* ---- AI Tools I Use : premium glassmorphism cards ---- */
.neu-ai-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.neu-ai-card{
  position:relative;padding:28px 26px 26px;border-radius:22px;overflow:hidden;
  background:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.015) 60%);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 20px 40px -30px rgba(0,0,0,.7);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
.neu-ai-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(139,92,246,.55),rgba(56,189,248,.05) 40%,rgba(56,189,248,.4));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;transition:opacity .5s var(--ease);pointer-events:none;
}
.neu-ai-card::after{
  content:'';position:absolute;top:-40%;left:-20%;width:70%;height:140%;
  background:radial-gradient(circle,rgba(139,92,246,.22),transparent 65%);
  opacity:0;transition:opacity .5s var(--ease), transform .6s var(--ease);
  pointer-events:none;transform:translate(-10%,-10%);
}
.neu-ai-card:hover{
  transform:translateY(-8px) scale(1.015);
  border-color:rgba(139,92,246,.4);
  background:linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,.025) 60%);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 34px 60px -26px rgba(139,92,246,.4);
}
.neu-ai-card:hover::before{opacity:1;}
.neu-ai-card:hover::after{opacity:1;transform:translate(0,0);}

.neu-ai-top{display:flex;align-items:center;gap:13px;margin-bottom:20px;position:relative;z-index:1;}
.neu-ai-ic{
  flex-shrink:0;width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(139,92,246,.22),rgba(56,189,248,.1));
  border:1px solid rgba(139,92,246,.28);
  box-shadow:0 6px 16px -6px rgba(139,92,246,.5);
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.neu-ai-card:hover .neu-ai-ic{transform:rotate(-6deg) scale(1.08);border-color:rgba(139,92,246,.55);}
.neu-ai-cat{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--text);line-height:1.3;letter-spacing:-.1px;}
.neu-ai-tools{display:flex;flex-wrap:wrap;gap:9px;position:relative;z-index:1;}
.neu-tool-tag{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.3px;color:var(--purple-2);
  padding:6px 13px 6px 6px;border-radius:100px;
  background:rgba(139,92,246,.09);border:1px solid rgba(139,92,246,.26);
  transition:background .35s,border-color .35s,transform .35s;
}
.neu-tool-tag:hover{background:rgba(139,92,246,.18);border-color:rgba(139,92,246,.5);transform:translateY(-2px);}
.neu-tool-tag.no-logo{padding:7px 14px;}

/* ---- responsive ---- */
@media(max-width:1100px){
  .neu-do-grid,.neu-ai-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:900px){
  .neu-block{margin-top:64px;}
  .neu-do-grid,.neu-ai-grid{grid-template-columns:repeat(2,1fr);gap:18px;}
  .neu-chip-grid{gap:12px;}
}
@media(max-width:560px){
  .neu-do-grid,.neu-ai-grid{grid-template-columns:1fr;}
  .neu-do-card,.neu-ai-card{padding:26px 22px;}
  .neu-chip{padding:12px 18px 12px 12px;}
  .neu-chip-label{font-size:13.5px;}
}

/* ============ DARK CODE BRAND ============ */
#darkcode{background:radial-gradient(ellipse at 30% 50%,rgba(139,92,246,.08),transparent 60%);}
.dc-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center;}
@media(max-width:900px){.dc-inner{grid-template-columns:1fr;gap:50px;}}
.dc-visual{position:relative;aspect-ratio:1;border-radius:28px;overflow:hidden;border:1px solid var(--border);background:rgba(255,255,255,.02);}
.dc-visual canvas{width:100%;height:100%;display:block;}
.dc-text{font-size:17px;color:var(--text-dim);margin:20px 0 30px;max-width:540px;line-height:1.7;}
.dc-highlight{
  color:var(--text);font-weight:600;background:linear-gradient(90deg,rgba(139,92,246,.22),rgba(56,189,248,.16));
  padding:1px 8px;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.dc-points{display:flex;flex-direction:column;gap:16px;margin-bottom:38px;}
.dc-point{display:flex;align-items:center;gap:16px;font-size:15px;color:var(--text);}
.dc-point span{font-family:var(--font-mono);font-size:12px;color:var(--purple-2);border:1px solid rgba(139,92,246,.4);border-radius:8px;padding:4px 8px;}

/* ---- official social / website links ---- */
.dc-socials{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px;}
.dc-social{
  display:inline-flex;align-items:center;gap:9px;padding:10px 18px 10px 12px;border-radius:100px;
  background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(8px);
  font-family:var(--font-display);font-size:13.5px;font-weight:500;color:var(--text-dim);
  transition:color .3s,border-color .3s,transform .3s,background .3s,box-shadow .3s;
}
.dc-social-ic{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);color:var(--text-dim);transition:color .3s,background .3s;
}
.dc-social-ic svg{width:14px;height:14px;}
.dc-social:hover{color:#fff;transform:translateY(-3px);border-color:transparent;}
.dc-social[data-brand="web"]:hover{background:linear-gradient(135deg,var(--purple),var(--blue));box-shadow:0 14px 30px -12px rgba(139,92,246,.6);}
.dc-social[data-brand="web"]:hover .dc-social-ic{background:rgba(255,255,255,.22);color:#fff;}
.dc-social[data-brand="facebook"]:hover{background:#1877F2;box-shadow:0 14px 30px -12px rgba(24,119,242,.7);}
.dc-social[data-brand="facebook"]:hover .dc-social-ic{background:rgba(255,255,255,.22);color:#fff;}
.dc-social[data-brand="youtube"]:hover{background:#FF0000;box-shadow:0 14px 30px -12px rgba(255,0,0,.6);}
.dc-social[data-brand="youtube"]:hover .dc-social-ic{background:rgba(255,255,255,.22);color:#fff;}
.dc-social[data-brand="instagram"]:hover{background:linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);box-shadow:0 14px 30px -12px rgba(214,41,118,.6);}
.dc-social[data-brand="instagram"]:hover .dc-social-ic{background:rgba(255,255,255,.28);color:#fff;}
.dc-social[data-brand="linkedin"]:hover{background:#0A66C2;box-shadow:0 14px 30px -12px rgba(10,102,194,.65);}
.dc-social[data-brand="linkedin"]:hover .dc-social-ic{background:rgba(255,255,255,.22);color:#fff;}
@media(max-width:480px){
  .dc-social{padding:9px 14px 9px 10px;font-size:12.5px;}
  .dc-social-ic{width:22px;height:22px;}
  .dc-social-ic svg{width:12px;height:12px;}
}

/* ============ PROJECTS ============ */
.proj-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px;}
.proj-filter{
  padding:9px 18px;border-radius:100px;font-size:13px;border:1px solid var(--border);color:var(--text-dim);
  transition:all .3s var(--ease);
}
.proj-filter:hover{color:var(--text);border-color:var(--purple);}
.proj-filter.active{background:linear-gradient(135deg,var(--purple),var(--purple-deep));color:#fff;border-color:transparent;}

.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;perspective:1400px;}
@media(max-width:980px){.proj-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.proj-grid{grid-template-columns:1fr;}}

.proj-card{
  position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--border);
  background:var(--surface);backdrop-filter:blur(10px);
  transform-style:preserve-3d;transition:border-color .4s,box-shadow .4s;
  opacity:1;transform:none;
}
html.js-ready .proj-card{opacity:0;transform:translateY(30px);}
html.js-ready .proj-card.in{animation:revealUp .8s var(--ease) forwards;}
.proj-card:hover{border-color:rgba(139,92,246,.5);box-shadow:0 30px 60px -20px rgba(139,92,246,.35);}
.proj-thumb{
  height:180px;display:flex;align-items:flex-end;padding:16px;position:relative;overflow:hidden;
}
.proj-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;z-index:0;transition:transform .5s var(--ease);}
.proj-card:hover .proj-thumb img{transform:scale(1.05);}
.proj-thumb::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.7) 100%),linear-gradient(160deg,rgba(255,255,255,.12),transparent 60%);}
.proj-thumb span{
  position:relative;z-index:1;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;
  padding:6px 12px;border-radius:100px;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);color:#fff;
}
.proj-body{padding:22px;}
.proj-body h4{font-family:var(--font-display);font-size:18px;font-weight:600;margin-bottom:8px;}
.proj-body p{font-size:14px;color:var(--text-dim);margin-bottom:16px;line-height:1.6;}
.proj-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.proj-tags span{font-family:var(--font-mono);font-size:10.5px;color:var(--text-faint);border:1px solid var(--border);padding:4px 9px;border-radius:6px;}
.proj-link{font-size:13.5px;color:var(--purple-2);font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:gap .3s;}
.proj-link:hover{gap:10px;}

/* ============ EXPERIENCE TIMELINE ============ */
.timeline-3d{position:relative;max-width:800px;margin:0 auto;padding-left:40px;}
.tl-path{position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:rgba(255,255,255,.08);border-radius:2px;}
.tl-fill{position:absolute;top:0;left:0;width:100%;height:0%;background:linear-gradient(var(--purple),var(--blue));border-radius:2px;box-shadow:0 0 12px var(--purple-2);}
.tl-item{position:relative;margin-bottom:44px;}
.tl-item:last-child{margin-bottom:0;}
.tl-node{
  position:absolute;left:-40px;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--bg);border:2px solid var(--purple-2);box-shadow:0 0 14px rgba(139,92,246,.7);
}
.tl-card{
  background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(10px);
  border-radius:18px;padding:26px 28px;transition:border-color .3s,transform .3s;
}
.tl-card:hover{border-color:rgba(139,92,246,.4);transform:translateX(6px);}
.tl-date{font-family:var(--font-mono);font-size:12px;color:var(--purple-2);letter-spacing:.5px;}
.tl-card h4{font-family:var(--font-display);font-size:19px;margin:8px 0 8px;font-weight:600;}
.tl-card p{color:var(--text-dim);font-size:14.5px;line-height:1.6;}

/* ============ EDUCATION ============ */
.edu-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media(max-width:760px){.edu-grid{grid-template-columns:1fr;}}
.edu-card{
  display:flex;align-items:center;gap:20px;padding:30px;border-radius:20px;
  background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(10px);
  transition:border-color .3s,transform .3s;
}
.edu-card:hover{border-color:rgba(139,92,246,.4);transform:translateY(-4px);}
.edu-ic{flex-shrink:0;width:44px;height:44px;color:var(--purple-2);}
.edu-ic svg{width:100%;height:100%;}
.edu-card>div{min-width:0;}
.edu-card h4{font-family:var(--font-display);font-size:18px;font-weight:600;margin-bottom:6px;}
.edu-card .sub{color:var(--text-dim);font-size:14px;margin-bottom:10px;}
.badge{display:inline-block;font-family:var(--font-mono);font-size:11px;padding:4px 10px;border-radius:100px;background:rgba(52,211,153,.12);color:#34d399;border:1px solid rgba(52,211,153,.3);}
.edu-meta{display:flex;gap:22px;flex-wrap:wrap;row-gap:10px;}
.edu-meta div{display:flex;flex-direction:column;}
.edu-meta span{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.5px;}
.edu-meta b{font-family:var(--font-mono);font-size:14px;color:var(--text);}
@media(max-width:420px){
  .edu-card{padding:22px;gap:14px;}
  .edu-meta{gap:14px;}
}

/* ============ TRAINING & CERTIFICATIONS ============ */
.train-timeline{position:relative;max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:26px;}
.train-path{
  position:absolute;top:6px;bottom:6px;left:27px;width:2px;
  background:linear-gradient(var(--purple),var(--blue));opacity:.35;border-radius:2px;
}
@media(max-width:640px){.train-path{left:23px;}}
.train-item{position:relative;display:flex;gap:22px;align-items:flex-start;}
.train-node{
  position:relative;z-index:1;flex-shrink:0;width:56px;height:56px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(145deg,var(--purple),var(--purple-deep));
  box-shadow:0 10px 26px -8px rgba(139,92,246,.65), inset 0 1px 0 rgba(255,255,255,.25);
}
.train-node svg{width:24px;height:24px;}
@media(max-width:640px){.train-node{width:46px;height:46px;border-radius:13px;}.train-node svg{width:20px;height:20px;}}
.train-card{
  flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(10px);
  border-radius:18px;padding:24px 26px;transition:border-color .3s,transform .3s,box-shadow .3s;
}
.train-card:hover{border-color:rgba(139,92,246,.4);transform:translateX(6px);box-shadow:0 20px 44px -26px rgba(139,92,246,.5);}
.train-card h4{font-family:var(--font-display);font-size:18.5px;font-weight:600;margin:10px 0 4px;}
.train-org{font-family:var(--font-mono);font-size:12.5px;color:var(--purple-2);letter-spacing:.3px;margin-bottom:10px;}
.train-card p{color:var(--text-dim);font-size:14px;line-height:1.65;}
@media(max-width:640px){.train-card{padding:18px 20px;}}

/* ============ CONTACT ============ */
.contact-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:stretch;}
@media(max-width:900px){.contact-wrap{grid-template-columns:1fr;}}

.terminal{
  border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#0a0a12;
  display:flex;flex-direction:column;
}
.term-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--border);}
.term-bar span{width:11px;height:11px;border-radius:50%;background:#3a3a46;}
.term-bar span:nth-child(1){background:#ff5f57;}
.term-bar span:nth-child(2){background:#febc2e;}
.term-bar span:nth-child(3){background:#28c840;}
.term-bar b{margin-left:10px;font-family:var(--font-mono);font-size:12px;color:var(--text-faint);font-weight:400;}
.term-body{padding:28px;font-family:var(--font-mono);font-size:14px;line-height:2;flex:1;}
.term-line{color:var(--text-dim);}
.term-line .prompt{color:var(--purple-2);margin-right:8px;font-weight:600;}
.term-line.out{color:var(--text);padding-left:18px;margin-bottom:16px;white-space:pre-wrap;overflow-wrap:anywhere;}
.term-body{max-width:100%;overflow-x:hidden;}
@media(max-width:420px){.term-body{padding:20px;font-size:12.5px;line-height:1.85;}}
.term-json{color:var(--text-dim);}
.term-key{color:var(--blue);}
.term-val{color:#a7f3d0;}
.term-cursor-blink{animation:blink 1s step-end infinite;color:var(--purple-2);}

.contact-form{
  background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(10px);
  border-radius:18px;padding:32px;display:flex;flex-direction:column;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:520px){.form-row{grid-template-columns:1fr;}}
.field{margin-bottom:20px;display:flex;flex-direction:column;gap:8px;}
.field label{font-size:12.5px;color:var(--text-faint);font-family:var(--font-mono);letter-spacing:.5px;}
.field input,.field textarea{
  background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;
  padding:13px 16px;color:var(--text);font-family:var(--font-body);font-size:14.5px;
  transition:border-color .3s,background .3s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--purple-2);background:rgba(139,92,246,.06);}
.field textarea{min-height:120px;resize:vertical;}
.submit-btn{width:100%;margin-top:4px;}
.form-note{margin-top:16px;font-size:13px;color:var(--text-faint);text-align:center;}

/* ============ FOOTER ============ */
#siteFooter{
  border-top:1px solid var(--border);padding:80px 8vw 34px;position:relative;z-index:2;
  background:radial-gradient(ellipse at 20% 0%,rgba(139,92,246,.07),transparent 55%);
}
.footer-inner{max-width:1440px;margin:0 auto;}

.footer-top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:60px;
  padding-bottom:52px;border-bottom:1px solid var(--border);margin-bottom:28px;
}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr;gap:40px;}}
@media(max-width:600px){.footer-top{grid-template-columns:1fr;gap:38px;}}

.footer-brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:600;font-size:19px;margin-bottom:14px;}
.footer-brand img{width:34px;height:34px;border-radius:9px;filter:drop-shadow(0 4px 14px rgba(139,92,246,.5));}
.footer-brand b{color:var(--purple-2);}
.footer-role{font-family:var(--font-mono);font-size:12.5px;color:var(--purple-2);letter-spacing:1px;text-transform:uppercase;margin-bottom:16px;}
.footer-desc{color:var(--text-dim);font-size:14px;line-height:1.7;max-width:340px;margin-bottom:22px;}

.footer-social{display:flex;gap:12px;}
.footer-social a{
  width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border);color:var(--text-dim);
  transition:color .3s,border-color .3s,transform .3s,background .3s;
}
.footer-social a svg{width:16px;height:16px;}
.footer-social a:hover{color:#fff;border-color:transparent;transform:translateY(-3px);background:linear-gradient(135deg,var(--purple),var(--blue));}

.footer-col h5{
  font-family:var(--font-mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:20px;
}
.footer-col{display:flex;flex-direction:column;gap:13px;min-width:0;}
.footer-col a{color:var(--text-dim);font-size:14.5px;transition:color .25s,transform .25s;overflow-wrap:anywhere;}
.footer-col a:hover{color:var(--purple-2);transform:translateX(3px);}
.footer-loc{color:var(--text-faint);font-size:13.5px;font-family:var(--font-mono);}

.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
}
#siteFooter .footer-bottom p{color:var(--text-faint);font-size:13.5px;}
.footer-links a{color:var(--text-dim);font-size:13.5px;transition:color .3s;}
.footer-links a:hover{color:var(--purple-2);}
@media(max-width:600px){#siteFooter{padding:60px 6vw 28px;}}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

/* ============ MOBILE PERFORMANCE ============
   backdrop-filter panels sitting on top of the animated background canvas
   are the main cause of shaking/jank on phones: the browser has to
   re-blur the moving canvas behind every glass panel on every frame.
   Cutting blur radius sharply (rather than removing it) keeps the look
   while making that cost cheap enough for mobile GPUs. The header and
   mobile nav are full-viewport, always-on-screen overlays, so for those
   two specifically we drop the blur entirely and fall back to a solid
   panel — visually almost identical, but it removes the single biggest
   source of scroll jitter on phones. */
@media (max-width:900px){
  .btn-ghost,.hud-chip,.proj-thumb span,.tl-card,.edu-card,
  .contact-form,.terminal,.glass,.neu-ai-card,.train-card{
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  #siteHeader.scrolled{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background-color:rgba(5,5,8,.94);
  }
  #mobileNav{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(5,5,10,.99);
  }
}

/* Reduce unnecessary continuous animation on small phones: the orbiting
   rings around the hero portrait / about photo are purely decorative,
   so on the smallest screens we freeze them on their current frame
   instead of running them forever — one less thing competing for GPU
   time while the page is being scrolled and the 3D canvas is rendering. */
@media (max-width:480px){
  .portrait-ring,.orbit-ring{animation-play-state:paused;}
}