/* ============================================================
   GAGAN DHANAPUNE — Portfolio v3
   Black & White Editorial Theme
   ============================================================ */
:root {
  --black:#000;--off-black:#0a0a0a;--deep:#0f0f0f;--card:#141414;--card2:#1c1c1c;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.14);--border3:rgba(255,255,255,.22);
  --white:#fff;--off-white:#f0f0f0;--grey:#888;--grey2:#555;--grey3:#333;
  --font-d:'Syne',sans-serif;--font-m:'JetBrains Mono',monospace;--font-b:'DM Sans',sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);background:var(--black);color:var(--off-white);line-height:1.6;overflow-x:hidden}

.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px}

/* CURSOR */
.cursor-dot{position:fixed;width:5px;height:5px;border-radius:50%;background:var(--white);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s}
.cursor-ring{position:fixed;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.35);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .15s,height .15s,border-color .2s}
.cursor-ring.hov{width:46px;height:46px;border-color:rgba(255,255,255,.7)}

/* LOADER */
.loader-screen{position:fixed;inset:0;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.05),transparent 32%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.035),transparent 36%),var(--black);z-index:99999;display:flex;align-items:center;justify-content:center;transition:opacity .5s,visibility .5s;overflow:hidden}
.loader-screen.hide{opacity:0;visibility:hidden}
.loader-ambient{position:absolute;inset:-20%;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.04) 80deg,transparent 180deg,rgba(255,255,255,.03) 260deg,transparent 360deg);filter:blur(30px);animation:loaderSpin 28s linear infinite}
.loader-inner{width:min(86vw,360px);text-align:center;position:relative;z-index:2;padding:28px 24px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));backdrop-filter:blur(6px)}
.loader-orbit{position:relative;width:124px;height:124px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center}
.loader-ring{position:absolute;border-radius:50%;border:1px solid}
.lr-1{inset:0;border-color:rgba(255,255,255,.2);animation:loaderSpin 6s linear infinite}
.lr-2{inset:11px;border-color:rgba(255,255,255,.14);border-style:dashed;animation:loaderSpinR 9s linear infinite}
.lr-3{inset:24px;border-color:rgba(255,255,255,.1);animation:loaderPulse 1.8s ease-in-out infinite}
.loader-core-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--white);box-shadow:0 0 24px rgba(255,255,255,.45);animation:loaderPulse 1.2s ease-in-out infinite}
.loader-gd{font-family:var(--font-d);font-size:2.8rem;font-weight:800;color:var(--white);letter-spacing:-2px;position:relative;z-index:2;text-shadow:0 0 20px rgba(255,255,255,.18)}
.loader-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.loader-msg{font-family:var(--font-m);font-size:.66rem;color:var(--grey);letter-spacing:3px;animation:blink .9s ease infinite alternate;text-align:left}
.loader-pct{font-family:var(--font-m);font-size:.72rem;color:var(--white);letter-spacing:1px;min-width:44px;text-align:right}
.loader-bar-wrap{height:3px;background:rgba(255,255,255,.13);border-radius:999px;overflow:hidden;margin-bottom:10px}
.loader-bar{height:100%;width:0;background:linear-gradient(90deg,rgba(255,255,255,.68),var(--white));transition:width .08s linear;border-radius:999px}
.loader-tip{font-size:.62rem;color:var(--grey2);letter-spacing:1.4px;text-transform:uppercase}
@keyframes blink{from{opacity:.3}to{opacity:1}}
@keyframes loaderSpin{to{transform:rotate(360deg)}}
@keyframes loaderSpinR{to{transform:rotate(-360deg)}}
@keyframes loaderPulse{0%,100%{transform:scale(.95);opacity:.65}50%{transform:scale(1.05);opacity:1}}

/* NAV BTN — left side, vertically centered */
.nav-btn{
  position:fixed;
  left:2px;
  top:50%;
  transform:translateY(-50%);
  z-index:2000;
  background:rgba(0,0,0,.82);
  border:1px solid var(--border2);
  border-radius:0 6px 6px 0;
  padding:16px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition:border-color .25s,background .25s,left .25s;
  backdrop-filter:blur(12px);
  writing-mode:initial;
}
.nav-btn:hover{border-color:var(--border3);background:rgba(18,18,18,.95);left:0px;}
.nb-box{display:flex;flex-direction:column;gap:4px;align-items:center}
.nb-line{display:block;height:1.5px;background:var(--white);border-radius:2px;transition:transform .3s var(--ease),opacity .3s,width .3s}
.l1{width:18px}.l2{width:13px}.l3{width:18px}
.nav-btn.open .l1{transform:rotate(45deg) translate(4px,4px)}
.nav-btn.open .l2{opacity:0}
.nav-btn.open .l3{transform:rotate(-45deg) translate(4px,-4px)}
.nb-label{
  font-family:var(--font-m);
  font-size:.58rem;
  color:var(--grey);
  letter-spacing:2.5px;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:rotate(180deg);
}

/* RADIAL NAV */
.radial-nav{position:fixed;inset:0;z-index:1900;pointer-events:none;opacity:0;transition:opacity .4s var(--ease)}
.radial-nav.open{pointer-events:all;opacity:1}
.rn-bg{position:absolute;inset:0;background:rgba(0,0,0,.95);backdrop-filter:blur(24px)}
.rn-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:10}
.rn-close{position:absolute;top:-55px;left:50%;transform:translateX(-50%);background:none;border:1px solid var(--border2);color:var(--white);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.rn-close:hover{background:rgba(255,255,255,.1);border-color:var(--white)}
.rn-gd{font-family:var(--font-d);font-size:2rem;font-weight:800;color:var(--white);display:block;margin-bottom:4px}
.rn-tagline{display:block;font-size:.68rem;color:var(--grey);letter-spacing:3px}
.rn-spokes{position:absolute;inset:0;pointer-events:none}
.rn-spoke{position:absolute;top:50%;left:50%;transform-origin:0 0;pointer-events:all;opacity:0;transition:opacity .3s ease}
.radial-nav.open .rn-spoke{opacity:1}
.rn-spoke-line{position:absolute;top:0;left:0;height:1px;background:linear-gradient(to right,rgba(255,255,255,.04),rgba(255,255,255,.25));transform-origin:left center}
.rn-spoke-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--white);top:-2.5px}
.rn-spoke-label{position:absolute;white-space:nowrap;font-family:var(--font-d);font-size:1.3rem;font-weight:700;color:var(--white);text-decoration:none;letter-spacing:-.5px;transition:color .2s,letter-spacing .2s;top:-14px}
.rn-spoke-label:hover{color:var(--grey);letter-spacing:1.5px}
.rn-spoke-num{font-family:var(--font-m);font-size:.6rem;color:var(--grey2);position:absolute;top:12px;white-space:nowrap}
.rn-footer-status{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font-family:var(--font-m);font-size:.68rem;color:var(--grey);letter-spacing:2px;z-index:10}

/* TOPBAR */
.topbar{position:fixed;top:0;left:0;right:0;height:58px;background:linear-gradient(180deg,rgba(0,0,0,.96),rgba(0,0,0,.88));backdrop-filter:blur(20px);border-bottom:1px solid var(--border);z-index:1500;transform:translateY(-100%);transition:transform .35s var(--ease)}
.topbar::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);opacity:.45;animation:tbGlow 4.5s ease-in-out infinite}
.topbar.visible{transform:translateY(0)}
.tb-inner{height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 5%}
.tb-logo{font-family:var(--font-m);font-size:1rem;font-weight:700;color:var(--white);margin-right:32px}
.tb-links{display:flex;gap:2px;flex:1;justify-content:center}
.tb-links a{font-family:var(--font-m);font-size:.68rem;color:var(--grey);text-decoration:none;letter-spacing:1px;padding:6px 10px;border-radius:4px;transition:color .2s,background .2s}
.tb-links a:hover{color:var(--white);background:rgba(255,255,255,.06)}
.tb-status{display:flex;align-items:center;gap:10px}
.tb-open-pill{display:flex;align-items:center;gap:8px;padding:7px 10px 7px 12px;background:linear-gradient(90deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid var(--border2);border-radius:999px;position:relative;overflow:hidden}
.tb-open-pill::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%);transform:translateX(-120%);animation:tbShine 3.8s ease-in-out infinite}
.tb-open-text{font-family:var(--font-m);font-size:.67rem;color:var(--off-white);letter-spacing:1.2px;text-transform:uppercase;position:relative;z-index:1}
.tb-open-role{font-family:var(--font-m);font-size:.6rem;color:var(--grey);padding:3px 7px;border:1px solid rgba(255,255,255,.16);border-radius:999px;letter-spacing:.9px;text-transform:uppercase;position:relative;z-index:1}
.tb-cta{font-family:var(--font-m);font-size:.64rem;letter-spacing:1.3px;text-transform:uppercase;text-decoration:none;color:var(--black);background:var(--white);padding:8px 12px;border-radius:999px;border:1px solid transparent;transition:transform .2s var(--spring),background .2s,color .2s,border-color .2s}
.tb-cta:hover{transform:translateY(-1px);background:transparent;color:var(--white);border-color:var(--border3)}
@keyframes tbShine{0%,35%{transform:translateX(-120%)}50%,100%{transform:translateX(120%)}}
@keyframes tbGlow{0%,100%{opacity:.25}50%{opacity:.58}}

/* PULSE DOT */
.pulse-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.4);animation:pulseA 2.5s ease infinite}
.pulse-dot.sm{width:5px;height:5px}
@keyframes pulseA{0%{box-shadow:0 0 0 0 rgba(255,255,255,.4)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* TICKER */
.ticker{position:fixed;bottom:0;left:0;right:0;height:30px;background:rgba(0,0,0,.88);border-top:1px solid var(--border);z-index:600;overflow:hidden;display:flex;align-items:center}
.ticker-inner{display:flex;gap:55px;white-space:nowrap;animation:tickS 40s linear infinite;font-family:var(--font-m);font-size:.66rem;color:var(--grey2);letter-spacing:1px}
.ticker-inner span:nth-child(odd){color:var(--grey)}
@keyframes tickS{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* SHARED */
.mono-tag{font-family:var(--font-m);font-size:.7rem;color:var(--grey);letter-spacing:2px}
.sec{padding:100px 5% 80px;position:relative}
.sec-tag{display:block;margin-bottom:14px}
.sec-h{font-family:var(--font-d);font-size:clamp(2.2rem,4vw,3.4rem);font-weight:800;line-height:1.0;letter-spacing:-1.5px;margin-bottom:56px;color:var(--white)}
.aw{color:var(--grey);-webkit-text-stroke:1px rgba(255,255,255,.25)}
.reveal-section>*{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-section.visible>*{opacity:1;transform:translateY(0)}
.reveal-section.visible>*:nth-child(2){transition-delay:.1s}
.reveal-section.visible>*:nth-child(3){transition-delay:.2s}
.reveal-section.visible>*:nth-child(4){transition-delay:.3s}

/* HOME */
.home{min-height:100vh;padding:0 5%;display:flex;flex-direction:column;justify-content:center;padding-top:70px;padding-bottom:80px;position:relative;overflow:hidden}
.home::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 70% 50%,rgba(255,255,255,.018) 0%,transparent 70%);pointer-events:none}
.home-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:center;max-width:1400px;margin:0 auto;width:100%;position:relative;z-index:1}
.home-pre{margin-bottom:16px}
.hero-name{font-family:var(--font-d);font-size:clamp(3.5rem,6.5vw,5.8rem);font-weight:800;line-height:.9;letter-spacing:-3px;margin-bottom:26px}
.hn-a{display:block;color:var(--white)}
.hn-b{display:block;color:transparent;-webkit-text-stroke:1.5px var(--white)}
.tw-row{font-family:var(--font-m);font-size:1.02rem;color:var(--grey);margin-bottom:26px;min-height:28px}
#typewriter{color:var(--white)}
.tw-cur{color:var(--white);animation:blink .7s ease infinite}
.hero-desc{color:var(--grey);font-size:.98rem;line-height:1.88;max-width:500px;margin-bottom:40px}
.hero-stats{display:flex;align-items:center;gap:22px;margin-bottom:42px;padding:22px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);flex-wrap:wrap}
.hs{display:flex;flex-direction:column;gap:4px}
.hs-num{font-family:var(--font-d);font-size:2.1rem;font-weight:800;color:var(--white);letter-spacing:-1px}
.hs-lbl{font-family:var(--font-m);font-size:.62rem;color:var(--grey);letter-spacing:1.5px;text-transform:uppercase}
.hs-div{width:1px;height:46px;background:var(--border2)}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn-p,.btn-s{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:4px;font-family:var(--font-m);font-size:.75rem;font-weight:500;letter-spacing:1px;text-transform:uppercase;text-decoration:none;transition:all .3s var(--spring)}
.btn-p{background:var(--white);color:var(--black)}
.btn-p:hover{background:var(--off-white);transform:translateY(-3px);box-shadow:0 10px 30px rgba(255,255,255,.12)}
.btn-s{background:transparent;border:1px solid var(--border2);color:var(--grey)}
.btn-s:hover{border-color:var(--white);color:var(--white);transform:translateY(-3px)}
.btn-p span,.btn-s span{transition:transform .3s var(--spring)}
.btn-p:hover span,.btn-s:hover span{transform:translate(3px,-2px)}

/* PHOTO */
.home-right{display:flex;justify-content:center;align-items:center}
.photo-wrap{position:relative;width:460px;height:540px}
.photo-ring{position:absolute;border-radius:50%;border:1px solid;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.pr1{width:520px;height:520px;border-color:rgba(255,255,255,.05);animation:spinS 40s linear infinite}
.pr2{width:580px;height:580px;border-color:rgba(255,255,255,.03);border-style:dashed;animation:spinS 65s linear infinite reverse}
.pr3{width:460px;height:460px;border-color:rgba(255,255,255,.04);animation:spinS 26s linear infinite}
@keyframes spinS{to{transform:translate(-50%,-50%) rotate(360deg)}}
.photo-corner{position:absolute;width:22px;height:22px;border-color:rgba(255,255,255,.45);border-style:solid}
.pc-tl{top:0;left:0;border-width:2px 0 0 2px}.pc-tr{top:0;right:0;border-width:2px 2px 0 0}
.pc-bl{bottom:0;left:0;border-width:0 0 2px 2px}.pc-br{bottom:0;right:0;border-width:0 2px 2px 0}
.photo-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;height:500px;border-radius:210px 210px 190px 190px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.photo-img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(10%) contrast(1.04)}
.photo-tag{position:absolute;background:var(--card);border:1px solid var(--border2);border-radius:4px;padding:7px 13px;font-family:var(--font-m);font-size:.68rem;color:var(--white);letter-spacing:1px;white-space:nowrap;animation:tagF 4s ease-in-out infinite alternate}
.pt-a{top:55px;left:-35px;animation-delay:0s}
.pt-b{bottom:75px;right:-25px;animation-delay:1s}
.pt-c{bottom:30px;left:-15px;animation-delay:2s}
@keyframes tagF{from{transform:translateY(-5px)}to{transform:translateY(5px)}}
.scroll-hint{position:absolute;bottom:46px;left:5%;display:flex;align-items:center;gap:14px;opacity:.28}
.sh-bar{width:50px;height:1px;background:var(--white);animation:shP 2s ease-in-out infinite}
@keyframes shP{0%,100%{width:50px}50%{width:80px}}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.ap{color:var(--grey);font-size:.99rem;line-height:1.92;margin-bottom:18px}
.about-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.about-pills span{padding:5px 15px;border:1px solid var(--border2);border-radius:2px;font-family:var(--font-m);font-size:.7rem;color:var(--grey);letter-spacing:1px;transition:all .25s}
.about-pills span:hover{border-color:var(--white);color:var(--white)}
.term-card{background:var(--deep);border:1px solid var(--border2);border-radius:8px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);transition:border-color .3s}
.term-card:hover{border-color:var(--border3)}
.term-top{display:flex;align-items:center;gap:7px;padding:12px 16px;background:rgba(255,255,255,.02);border-bottom:1px solid var(--border)}
.td{width:11px;height:11px;border-radius:50%}.td-r{background:#ff5f57}.td-y{background:#febc2e}.td-g{background:#28c840}
.term-fname{font-family:var(--font-m);font-size:.7rem;color:var(--grey);margin-left:8px}
.term-body{padding:22px;font-family:var(--font-m);font-size:.8rem;line-height:1.95;white-space:pre;overflow-x:auto}
.tk{color:#93c5fd}.tv{color:#86efac}.tv.tw-g{color:#fff}.tn{color:#fca5a5}.tcmt{color:var(--grey2)}

/* SKILLS — primary circles */
.primary-skills-row{margin-bottom:50px;padding:32px;background:var(--card);border:1px solid var(--border);border-radius:8px}
.psk-label{display:block;margin-bottom:20px}
.psk-items{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.psk-item{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:default}
.psk-ring{position:relative;width:72px;height:72px}
.psk-ring svg{width:72px;height:72px}
.psk-ring span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-m);font-size:.66rem;color:var(--white);letter-spacing:.5px;text-align:center}
.psk-pct{font-family:var(--font-m);font-size:.68rem;color:var(--grey)}

/* SKILL CATS */
.skill-cats{display:flex;flex-direction:column;gap:2px}
.scat{border:1px solid var(--border);border-radius:4px;overflow:hidden;transition:border-color .25s}
.scat:hover{border-color:var(--border2)}
.scat-hd{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;cursor:pointer;user-select:none;transition:background .2s}
.scat-hd:hover{background:rgba(255,255,255,.03)}
.scat-title{font-family:var(--font-d);font-size:.95rem;font-weight:700;color:var(--off-white)}
.scat-toggle{font-family:var(--font-m);font-size:1.1rem;color:var(--grey);transition:transform .3s var(--ease)}
.scat.open .scat-toggle{transform:rotate(45deg);color:var(--white)}
.scat-body{max-height:0;overflow:hidden;transition:max-height .4s var(--ease),padding .3s}
.scat.open .scat-body{max-height:300px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;padding:4px 22px 20px}
.chip{padding:6px 14px;border:1px solid var(--border);border-radius:2px;font-family:var(--font-m);font-size:.72rem;color:var(--grey);cursor:default;transition:all .22s}
.chip:hover{border-color:var(--border3);color:var(--white);background:rgba(255,255,255,.04)}
.chip.primary{border-color:var(--border2);color:var(--off-white);background:rgba(255,255,255,.04)}
.chip.primary:hover{border-color:var(--white);color:var(--white);background:rgba(255,255,255,.08)}

/* PROJECTS — horizontal scroll */
.proj-scroll-wrap{position:relative}
.proj-scroll{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;cursor:grab}
.proj-scroll::-webkit-scrollbar{display:none}
.proj-scroll.dragging{cursor:grabbing}
.proj-card-h{min-width:360px;max-width:360px;background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden;scroll-snap-align:start;transition:border-color .35s,transform .35s;flex-shrink:0;display:flex;flex-direction:column}
.proj-card-h:hover{border-color:var(--border3);transform:translateY(-5px);box-shadow:0 18px 50px rgba(0,0,0,.7)}
.pch-number{position:absolute;top:12px;right:14px;font-family:var(--font-d);font-size:2.5rem;font-weight:800;color:rgba(255,255,255,.04);line-height:1;transition:color .3s}
.proj-card-h:hover .pch-number{color:rgba(255,255,255,.08)}
.pch-img{height:190px;overflow:hidden;position:relative;flex-shrink:0}
.pch-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(25%);transition:transform .6s var(--ease),filter .4s}
.proj-card-h:hover .pch-img img{transform:scale(1.06);filter:grayscale(0%)}
.pch-dark{background:var(--card2)}
.pch-ov{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,var(--card) 100%)}
.pch-body{padding:20px;flex:1;display:flex;flex-direction:column;position:relative}
.pch-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.pch-tags span{padding:2px 8px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:2px;font-family:var(--font-m);font-size:.64rem;color:var(--grey)}
.pch-body h3{font-family:var(--font-d);font-size:1.12rem;font-weight:700;color:var(--white);margin-bottom:9px}
.pch-body p{color:var(--grey);font-size:.86rem;line-height:1.75;flex:1;margin-bottom:14px}
.pch-result{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.res-badge{padding:3px 9px;background:rgba(255,255,255,.07);border:1px solid var(--border2);border-radius:2px;font-family:var(--font-m);font-size:.65rem;color:var(--off-white)}
.res-badge.sm{font-size:.62rem}
.pch-links{display:flex;gap:12px;flex-wrap:wrap}
.plink{font-family:var(--font-m);font-size:.75rem;color:var(--grey);text-decoration:none;transition:color .2s,letter-spacing .2s}
.plink:hover{color:var(--white);letter-spacing:.8px}
.proj-scroll-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}
.psn-btn{background:var(--card);border:1px solid var(--border2);color:var(--white);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:.9rem;transition:all .25s;display:flex;align-items:center;justify-content:center}
.psn-btn:hover{background:var(--card2);border-color:var(--border3)}
.psn-dots{display:flex;gap:6px;align-items:center}
.psn-dot{width:5px;height:5px;border-radius:50%;background:var(--grey2);transition:background .25s,width .25s}
.psn-dot.active{background:var(--white);width:16px;border-radius:3px}

/* EXPERIENCE — flip cards */
.exp-hint{display:block;margin-bottom:28px;opacity:.5}
.exp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.flip-card{height:340px;perspective:1000px;cursor:pointer}
.flip-card.low-priority .flip-front{border-color:var(--border)}
.flip-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.flip-card:hover .flip-inner,.flip-card:focus .flip-inner{transform:rotateY(180deg);outline:none}
.flip-front,.flip-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:8px;padding:24px;overflow:hidden}
.flip-front{background:var(--card);border:1px solid var(--border2);display:flex;flex-direction:column;gap:8px}
.flip-back{background:var(--card2);border:1px solid var(--border3);transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.fc-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.fc-type{padding:3px 10px;border-radius:2px;font-family:var(--font-m);font-size:.62rem;letter-spacing:1px;font-weight:600}
.data-type{background:rgba(255,255,255,.08);border:1px solid var(--border2);color:var(--off-white)}
.dev-type{background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--grey)}
.fc-date{font-size:.64rem}
.flip-front h3{font-family:var(--font-d);font-size:1.05rem;font-weight:700;color:var(--white)}
.flip-front h4{font-family:var(--font-m);font-size:.75rem;color:var(--grey);letter-spacing:1px}
.flip-front p{color:var(--grey);font-size:.82rem;line-height:1.72;flex:1}
.fc-tags{display:flex;flex-wrap:wrap;gap:5px}
.fc-tags span{padding:2px 8px;border:1px solid var(--border);border-radius:2px;font-family:var(--font-m);font-size:.64rem;color:var(--grey2)}
.fc-result-chips{display:flex;flex-wrap:wrap;gap:5px}
.fc-flip-hint{font-size:.62px;opacity:.4;margin-top:auto;font-size:.62rem}
.fb-cert-wrap{width:100%;max-height:220px;overflow:hidden;border-radius:4px;border:1px solid var(--border2);display:flex;align-items:center;justify-content:center}
.fb-cert-wrap img{width:100%;height:220px;object-fit:cover;object-position:top}
.fb-cert-pdf{width:100%;height:220px;border:0;background:#111}
.fb-no-cert{display:none;width:100%;height:120px;align-items:center;justify-content:center;font-family:var(--font-m);font-size:.72rem;color:var(--grey);border:1px dashed var(--border2);border-radius:4px}
.fb-no-cert.pdf-fallback{display:flex;height:220px;border:0;background:rgba(255,255,255,.02)}
.fb-info{text-align:center;display:flex;flex-direction:column;gap:5px;align-items:center}
.fb-cert-link{margin-top:4px;font-family:var(--font-m);font-size:.68rem;color:var(--grey);text-decoration:none;letter-spacing:1px;transition:color .2s,letter-spacing .2s}
.fb-cert-link:hover{color:var(--white);letter-spacing:1.5px}

/* CERTIFICATIONS */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.cert-card{background:var(--card);border:1px solid var(--border);border-radius:6px;overflow:hidden;cursor:pointer;transition:all .35s var(--ease)}
.cert-card:hover{border-color:var(--border3);transform:translateY(-5px);box-shadow:0 16px 50px rgba(0,0,0,.6)}
.cert-img{height:160px;overflow:hidden;position:relative}
.cert-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(35%);transition:transform .5s var(--ease),filter .4s}
.cert-card:hover .cert-img img{transform:scale(1.06);filter:grayscale(0%)}
.cert-img.no-preview{position:relative;display:block;background:linear-gradient(135deg,var(--card2) 0%,var(--card) 100%);min-height:160px}
.cert-pdf-preview{position:absolute;inset:0;width:100%;height:100%;border:0;background:#111}
.cert-file-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-m);font-size:.68rem;color:var(--grey2);letter-spacing:2px;text-transform:uppercase;text-align:center;pointer-events:none}
.cert-img.no-preview.has-pdf-preview>.cert-file-placeholder{display:none}
.cert-hover{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;font-family:var(--font-m);font-size:.72rem;letter-spacing:3px;color:var(--white);opacity:0;transition:opacity .3s}
.cert-card:hover .cert-hover{opacity:1}
.cert-info{padding:15px 17px}
.cert-org{display:block;font-family:var(--font-m);font-size:.62rem;color:var(--grey2);letter-spacing:2px;text-transform:uppercase;margin-bottom:4px}
.cert-info h4{font-family:var(--font-d);font-size:.9rem;font-weight:600;color:var(--off-white)}

/* ACHIEVEMENTS */
.ach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ach-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:26px;transition:border-color .3s,transform .3s}
.ach-card:hover{border-color:var(--border3);transform:translateY(-4px)}
.ach-featured{border-color:var(--border2)}
.ach-wide{grid-column:1/-1}
.ach-label{display:block;margin-bottom:10px}
.ach-card h3{font-family:var(--font-d);font-size:1.1rem;font-weight:700;color:var(--white);margin-bottom:10px}
.ach-card p{color:var(--grey);font-size:.86rem;line-height:1.75;margin-bottom:16px}
.ach-link{font-family:var(--font-m);font-size:.75rem;color:var(--grey);text-decoration:none;transition:color .2s,letter-spacing .2s}
.ach-link:hover{color:var(--white);letter-spacing:.8px}
.ach-links{display:flex;gap:14px;flex-wrap:wrap}

/* Achievement flip cards — hover to flip like internship cards */
.ach-flip-card{padding:0;perspective:1000px;cursor:pointer;height:auto;min-height:360px}
.ach-flip-inner{position:relative;width:100%;height:100%;min-height:360px;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.ach-flip-card:hover .ach-flip-inner,.ach-flip-card:focus .ach-flip-inner{transform:rotateY(180deg);outline:none}
.ach-flip-front,.ach-flip-back{position:absolute;inset:0;padding:26px;display:flex;flex-direction:column;backface-visibility:hidden;border-radius:8px}
.ach-flip-front{background:var(--card);border:1px solid var(--border)}
.ach-flip-back{background:var(--card2);border:1px solid var(--border3);transform:rotateY(180deg)}
.ach-flip-hint{margin-top:auto;opacity:.4;font-size:.62rem}

/* Mini certificate slider used in achievement flip back */
.mini-cert-slider{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.mini-track-wrap{overflow:visible;border-radius:6px;border:0}
.mini-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;transition:none}
.mini-slide{min-width:0;background:var(--card);border:1px solid var(--border);border-radius:4px;overflow:hidden}
.mini-frame{width:100%;height:170px;background:#0b0b0b;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mini-frame object{width:100%;height:100%;border:0}
.mini-frame img{width:100%;height:100%;object-fit:contain;padding:6px;filter:grayscale(20%);transition:filter .3s}
.mini-frame:hover img{filter:grayscale(0%)}
.mini-pdf{width:100%;height:100%;border:0;background:#111}
.mini-placeholder{display:none;width:100%;height:100%;align-items:center;justify-content:center;font-family:var(--font-m);font-size:.68rem;color:var(--grey);text-align:center;padding:10px}
.mini-placeholder.show{display:flex}
.mini-actions{display:flex;gap:8px;justify-content:space-between;padding:9px;border-top:1px solid var(--border)}
.mini-nav,.mini-prev,.mini-next,.mini-stat{display:none}

/* HackerRank hex badge */
.hr-badge-wrap{display:flex;align-items:center;gap:20px;margin:12px 0 16px;flex-wrap:wrap}
.hr-hex{position:relative;width:80px;flex-shrink:0}
.hr-hex svg{width:80px;height:auto;filter:drop-shadow(0 4px 14px rgba(212,175,55,.4));transition:filter .3s}
.hr-hex:hover svg{filter:drop-shadow(0 6px 22px rgba(212,175,55,.65))}
.hr-badge-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-m);font-size:.7rem;font-weight:700;color:#000;letter-spacing:.5px}
.hr-stars-wrap{display:flex;flex-direction:column;gap:8px}
.hr-stars{display:flex;gap:3px}
.hr-star{font-size:1.3rem;color:var(--grey2);transition:color .2s}
.hr-star.filled{color:#d4af37;text-shadow:0 0 8px rgba(212,175,55,.5)}
.hr-meta{display:flex;flex-direction:column;gap:4px}
.hr-level{color:#d4af37 !important;font-size:.72rem !important}
.hr-points{font-size:.66rem !important;opacity:.7}

/* Top 10 badge */
.ach-badge-big{display:flex;align-items:baseline;gap:6px;margin:10px 0}
.abb-num{font-family:var(--font-m);font-size:1rem;color:var(--grey)}
.abb-unit{font-family:var(--font-d);font-size:3.5rem;font-weight:800;color:var(--white);letter-spacing:-2px;line-height:1}

/* Achievement stats */
.ach-stat-row{display:flex;gap:20px;margin:8px 0 16px;flex-wrap:wrap}
.ast{display:flex;flex-direction:column;gap:3px}
.ast-n{font-family:var(--font-d);font-size:1.5rem;font-weight:800;color:var(--white);letter-spacing:-1px}
.ast-l{font-family:var(--font-m);font-size:.62rem;color:var(--grey);letter-spacing:1.5px;text-transform:uppercase}

/* Google Cloud slider */
.gc-slider-wrap{position:relative;margin-top:16px}
.gc-slider{display:flex;gap:14px;overflow:hidden;border-radius:6px}
.gc-slide{min-width:calc(25% - 11px);border-radius:4px;overflow:hidden;border:1px solid var(--border);background:var(--card)}
.gc-slide-frame{width:100%;height:140px;background:#0b0b0b;display:flex;align-items:center;justify-content:center}
.gc-slide img{width:100%;height:100%;object-fit:contain;object-position:center;filter:grayscale(20%);transition:filter .3s;padding:6px}
.gc-slide:hover img{filter:grayscale(0%)}
.gc-placeholder{width:100%;height:100%;background:var(--card2);display:none;align-items:center;justify-content:center;font-family:var(--font-m);font-size:.68rem;color:var(--grey)}
.gc-slide-actions{display:flex;gap:8px;justify-content:space-between;padding:9px;border-top:1px solid var(--border)}
.gc-open-link,.gc-view-btn{flex:1;height:30px;display:flex;align-items:center;justify-content:center;font-family:var(--font-m);font-size:.62rem;letter-spacing:1px;text-transform:uppercase;border-radius:3px;text-decoration:none;cursor:pointer;transition:all .2s}
.gc-open-link{background:rgba(255,255,255,.04);border:1px solid var(--border2);color:var(--grey)}
.gc-open-link:hover{border-color:var(--border3);color:var(--white)}
.gc-view-btn{background:transparent;border:1px solid var(--border);color:var(--grey)}
.gc-view-btn:hover{border-color:var(--border3);color:var(--white);background:rgba(255,255,255,.04)}
.gc-nav{display:flex;gap:8px;margin-top:12px}
.gc-prev,.gc-next{background:var(--card);border:1px solid var(--border2);color:var(--white);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:.85rem;transition:all .25s;display:flex;align-items:center;justify-content:center}
.gc-prev:hover,.gc-next:hover{border-color:var(--border3);background:var(--card2)}
.gc-stat{display:block;margin-top:10px;opacity:.5}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .3s ease}
.lightbox.open{pointer-events:all;opacity:1}
.lb-bg{position:absolute;inset:0;background:rgba(0,0,0,.93);backdrop-filter:blur(22px)}
.lb-box{position:relative;z-index:2;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;gap:14px;transform:scale(.92);transition:transform .35s var(--spring)}
.lightbox.open .lb-box{transform:scale(1)}
.lb-close{position:absolute;top:-18px;right:-18px;width:38px;height:38px;background:var(--card);border:1px solid var(--border2);border-radius:50%;color:var(--white);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;z-index:3}
.lb-close:hover{background:rgba(255,255,255,.14)}
.lb-ttl{font-family:var(--font-m);font-size:.72rem;color:var(--grey);letter-spacing:2px;text-align:center}
.lb-img{max-width:85vw;max-height:80vh;border-radius:6px;border:1px solid var(--border2);display:block;object-fit:contain}

/* CONTACT */
#contact{padding-bottom:100px}
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:start}
.contact-intro{color:var(--grey);font-size:1.02rem;line-height:1.85;margin-bottom:36px}
.ci-list{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
.ci{display:flex;flex-direction:column;gap:4px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.ci:last-child{border-bottom:none}
.ci-k{font-size:.63rem;letter-spacing:2px}
.ci-v{color:var(--off-white);font-size:.92rem;font-weight:500;text-decoration:none;transition:color .2s}
a.ci-v:hover{color:var(--white)}
.soc-row{display:flex;flex-direction:column;gap:9px}
.soc-card{display:flex;align-items:center;gap:14px;padding:13px 17px;background:var(--card);border:1px solid var(--border);border-radius:4px;text-decoration:none;transition:all .3s var(--ease)}
.soc-card:hover{border-color:var(--border3);transform:translateX(5px)}
.soc-n{font-weight:600;color:var(--white);font-size:.88rem}
.soc-h{margin-left:auto;font-family:var(--font-m);font-size:.7rem;color:var(--grey2)}
.form-shell{background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:border-color .3s}
.form-shell:hover{border-color:var(--border2)}
.form-hd{padding:13px 22px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--border)}
.form-shell form{padding:26px 22px}
.fg{margin-bottom:16px}
.fg label{display:block;font-family:var(--font-m);font-size:.63rem;color:var(--grey2);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.fg input,.fg textarea{width:100%;padding:11px 13px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:4px;color:var(--white);font-family:var(--font-b);font-size:.9rem;transition:all .25s;outline:none}
.fg input:focus,.fg textarea:focus{border-color:var(--border3);background:rgba(255,255,255,.06)}
.fg textarea{min-height:115px;resize:vertical}
.form-btn{width:100%;padding:13px;background:var(--white);border:none;border-radius:4px;color:var(--black);font-family:var(--font-m);font-size:.78rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .3s var(--spring)}
.form-btn:hover{background:var(--off-white);transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,255,255,.1)}
.fa{transition:transform .3s var(--spring)}
.form-btn:hover .fa{transform:translateX(6px)}
.form-ok{display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:48px 22px;text-align:center}
.form-ok.show{display:flex}
.fok-check{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--white)}
.fok-msg{font-family:var(--font-d);font-size:1.15rem;font-weight:700;color:var(--white)}
.fok-sub{font-size:.86rem;color:var(--grey)}

/* FOOTER */
footer{padding:26px 5% 54px;border-top:1px solid var(--border)}
.foot-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.foot-logo{font-family:var(--font-m);font-size:.98rem;font-weight:700;color:var(--white);margin-right:12px}
.foot-links{display:flex;gap:18px}
.foot-links a{font-family:var(--font-m);font-size:.7rem;color:var(--grey);text-decoration:none;transition:color .2s}
.foot-links a:hover{color:var(--white)}

/* SCROLLBAR */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}
::selection{background:var(--white);color:var(--black)}

/* RESPONSIVE */
@media(max-width:1200px){.ach-grid{grid-template-columns:1fr 1fr}.ach-wide{grid-column:1/-1}}
@media(max-width:1100px){
  .home-grid{grid-template-columns:1fr;gap:54px}
  .home-left{order:2;max-width:100%}.home-right{order:1}
  .hero-desc{max-width:100%}
  .about-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .photo-wrap{width:340px;height:420px}
  .photo-frame{width:300px;height:380px}
}
@media(max-width:900px){.ach-grid{grid-template-columns:1fr}}
@media(max-width:768px){
  .tb-links{display:none}
  .tb-open-role,.tb-cta{display:none}
  .tb-open-pill{padding:7px 11px}
  .sec{padding:80px 5% 60px}
  .hero-name{font-size:3rem}
  .exp-grid{grid-template-columns:1fr}
  .cert-grid{grid-template-columns:1fr 1fr}
  .gc-slide{min-width:calc(50% - 7px)}
}
@media(max-width:480px){
  .cert-grid{grid-template-columns:1fr}
  .photo-wrap{width:280px;height:340px}
  .photo-frame{width:240px;height:300px}
  .psk-items{gap:16px}
  .proj-card-h{min-width:290px}
}