:root{
  --bg:#05070d; --bg2:#0a1020;
  --glass:rgba(255,255,255,.045); --glass2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.1); --border-glow:rgba(34,211,238,.45);
  --text:#f2f6ff; --muted:#9aa7c2; --dim:#66718c;
  --cyan:#22d3ee; --blue:#60a5fa; --purple:#a78bfa;
  --grad:linear-gradient(120deg,#22d3ee,#60a5fa 45%,#a78bfa);
  --font-d:'Space Grotesk',system-ui,sans-serif; --font-b:'Inter',system-ui,sans-serif; --font-o:'Orbitron',monospace;
  --nav-h:68px; --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{background:var(--bg);color:var(--text);font-family:var(--font-b);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:rgba(34,211,238,.35)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.skip-link{position:fixed;top:-60px;left:16px;z-index:200;background:#0b1226;border:1px solid var(--border);padding:.6rem 1rem;border-radius:10px;transition:top .2s}
.skip-link:focus{top:12px}
.container{width:min(1180px,92vw);margin:0 auto}
.section{padding:clamp(2.6rem,5vw,4.6rem) 0 clamp(1.4rem,2.5vw,2.2rem);position:relative;z-index:1}
.section::before{content:"";position:absolute;inset:14px clamp(10px,3vw,34px);border-radius:36px;background:linear-gradient(165deg,rgba(255,255,255,.016),rgba(255,255,255,.004) 45%,rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);box-shadow:0 18px 54px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);pointer-events:none;z-index:0}
.section::after{content:"";position:absolute;top:16px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(140,180,255,.55),transparent);z-index:0;pointer-events:none}
.section>.container{position:relative;z-index:1}

/* ambient */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
  radial-gradient(1400px 900px at 78% -12%,rgba(58,40,120,.9),transparent 62%),
  radial-gradient(1200px 760px at 12% 40%,rgba(28,60,130,.55),transparent 60%),
  radial-gradient(900px 700px at 82% 92%,rgba(120,28,120,.5),transparent 60%),
  radial-gradient(1300px 900px at 45% 115%,rgba(30,50,130,.55),transparent 65%),#03030c}
.ambient-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:drift 14s ease-in-out infinite alternate}
.orb-a{width:560px;height:560px;left:-160px;top:-140px;background:radial-gradient(circle,rgba(124,90,255,.42),transparent 65%)}
.orb-b{width:640px;height:640px;right:-180px;top:18%;background:radial-gradient(circle,rgba(59,130,246,.36),transparent 65%);animation-delay:-4s}
.orb-c{width:500px;height:500px;left:30%;bottom:-200px;background:radial-gradient(circle,rgba(192,132,252,.34),transparent 65%);animation-delay:-8s}
.orb-d{width:360px;height:360px;left:8%;top:34%;background:radial-gradient(circle,rgba(34,211,238,.24),transparent 65%);animation-delay:-10s}
.milkway{position:absolute;left:-15%;top:4%;width:130%;height:58%;transform:rotate(-12deg);background:linear-gradient(105deg,transparent 12%,rgba(168,140,255,.16) 34%,rgba(96,165,250,.2) 50%,rgba(232,121,249,.15) 66%,transparent 88%);filter:blur(70px);animation:drift 26s ease-in-out infinite alternate}
#starsCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.spotlight{position:fixed;left:50%;top:50%;width:180vmax;height:180vmax;margin:-90vmax 0 0 -90vmax;pointer-events:none;z-index:6;background:radial-gradient(circle,rgba(110,150,255,.07),transparent 45%);mix-blend-mode:screen}
@keyframes drift{to{transform:translate(40px,50px) scale(1.08)}}
.ambient-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(800px 600px at 50% 20%,#000 30%,transparent 75%)}
.ambient-noise{position:absolute;inset:0;opacity:.05;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 baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}

/* cursor */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:150;border-radius:50%}
.cursor-dot{width:7px;height:7px;background:var(--cyan);transform:translate(-50%,-50%)}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(34,211,238,.6);transform:translate(-50%,-50%);transition:width .25s,height .25s,border-color .25s,background .25s}
body.cursor-hover .cursor-ring{width:56px;height:56px;background:rgba(34,211,238,.08);border-color:var(--cyan)}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* glass + buttons */
.glass{background:linear-gradient(155deg,rgba(255,255,255,.04),rgba(255,255,255,.008) 42%,rgba(255,255,255,.025));backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(255,255,255,.09);border-radius:22px;box-shadow:0 16px 46px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.2);position:relative;overflow:hidden}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(620px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 46%);opacity:0;transition:opacity .3s;pointer-events:none}
.glass:hover::before{opacity:1}
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.9rem 1.6rem;border-radius:12px;font-family:var(--font-d);font-weight:600;font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,background .25s,border-color .25s;will-change:transform}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(220px circle at var(--bxx,50%) var(--byy,50%),rgba(255,255,255,.18),transparent 55%);opacity:0;transition:opacity .3s}
.btn::after{content:"";position:absolute;top:-70%;bottom:-70%;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-22deg) translateX(-280%);transition:transform .9s ease;pointer-events:none}
.btn .arrow{transition:transform .25s}
.btn:hover .arrow{transform:translateX(4px)}
.btn:hover::before{opacity:1}
.btn:hover::after{transform:skewX(-22deg) translateX(340%)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:linear-gradient(120deg,#22d3ee,#60a5fa 45%,#a78bfa);color:#04070f;border-color:transparent;box-shadow:0 8px 32px rgba(34,211,238,.35),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-primary:hover{box-shadow:0 14px 46px rgba(96,165,250,.55),inset 0 1px 0 rgba(255,255,255,.5);transform:translateY(-2px)}
.btn-glass{background:rgba(255,255,255,.06);border-color:var(--border)}
.btn-glass:hover{border-color:rgba(34,211,238,.6);box-shadow:0 0 28px rgba(34,211,238,.28),inset 0 1px 0 rgba(255,255,255,.3);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.16);color:var(--muted)}
.btn-ghost:hover{color:#fff;border-color:var(--cyan)}
.btn-sm{padding:.65rem 1.1rem;font-size:.76rem}
.shine{position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.1),transparent 55%);opacity:0;transition:opacity .3s}
.tilt:hover .shine{opacity:1}

/* intro */
#intro{position:fixed;inset:0;z-index:100;background:#030509;display:flex;align-items:center;justify-content:center;transition:opacity .7s,visibility .7s}
#intro.done{opacity:0;visibility:hidden}
#introCanvas{position:absolute;inset:0;width:100%;height:100%}
.intro-inner{text-align:center;position:relative;padding:2rem;perspective:1000px;animation:introUp 1.2s ease both .2s}
@keyframes introUp{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:blur(0)}}
.intro-orbit{position:absolute;left:50%;top:46%;width:min(580px,90vw);height:min(580px,90vw);transform:translate(-50%,-50%);border:1px dashed rgba(34,211,238,.28);border-radius:50%;animation:orbitSpin 24s linear infinite;pointer-events:none}
.intro-orbit::after{content:"";position:absolute;top:-5px;left:50%;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
.intro-eyebrow{font-family:var(--font-o);font-size:.7rem;letter-spacing:.4em;color:var(--cyan);display:flex;gap:.7rem;align-items:center;justify-content:center}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.4;transform:scale(.8)}}
.intro-name{font-family:var(--font-d);font-size:clamp(2rem,6vw,4.4rem);line-height:1.02;margin:1rem 0 .4rem;display:flex;flex-direction:column;transform-style:preserve-3d;animation:nameSpin 7s ease-in-out 2.2s infinite}
.intro-name>span{display:block;opacity:0;transform:rotateX(-90deg);transform-origin:50% 100%;backface-visibility:hidden;animation:nameFlip 1s cubic-bezier(.2,.75,.25,1) forwards}
.intro-name>span:nth-child(2){animation-delay:.45s}
@keyframes nameFlip{from{opacity:0;transform:rotateX(-90deg) translateY(26px)}55%{opacity:1}to{opacity:1;transform:rotateX(0) translateY(0)}}
@keyframes nameSpin{0%,100%{transform:rotateY(-7deg)}50%{transform:rotateY(7deg)}}
@keyframes orbitSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.intro-name .thin{font-weight:400;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro-sub{font-family:var(--font-o);letter-spacing:.45em;font-size:.78rem;color:#cdd8f3}
.intro-tag{color:var(--muted);margin-top:.7rem;font-size:.95rem}
.intro-bar{width:min(340px,70vw);height:2px;background:rgba(255,255,255,.12);margin:1.6rem auto 0;border-radius:2px;overflow:hidden}
.intro-bar-fill{height:100%;width:0;background:var(--grad)}
#skipIntro{position:absolute;bottom:26px;right:26px}

/* nav */
#navbar{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(1180px,94vw);z-index:90}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .9rem .7rem 1.2rem;border-radius:16px;background:rgba(8,12,24,.35);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.09);transition:background .3s,box-shadow .3s}
#navbar.scrolled .nav-inner{background:rgba(8,12,24,.78);box-shadow:0 12px 40px rgba(0,0,0,.5)}
.logo{font-family:var(--font-o);font-weight:700;letter-spacing:.15em;font-size:1.05rem}
.logo-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);margin-left:4px}
.nav-links{display:flex;gap:1.3rem;list-style:none;align-items:center}
.nav-links a{font-family:var(--font-d);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);position:relative;padding:.35rem 0;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--grad);border-radius:2px;transition:width .3s}
.nav-links a.active::after,.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:.8rem}
.status-pill{display:flex;align-items:center;gap:.5rem;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#bdf3ff;border:1px solid rgba(34,211,238,.35);background:rgba(34,211,238,.08);padding:.45rem .85rem;border-radius:999px;font-family:var(--font-d)}
.status-dot{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 10px #34d399;animation:pulse 1.8s infinite}
.menu-btn{display:none;flex-direction:column;gap:5px;padding:.6rem}
.menu-btn span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.3s}
.nav-cta-mobile{display:none}
.nav-progress{height:2px;margin-top:8px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.nav-progress div{height:100%;width:0;background:var(--grad)}

/* hero */
.hero{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:calc(var(--nav-h) + 40px) 0 4.4rem;position:relative}
.hero-inner{width:min(1120px,92vw);margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.eyebrow{font-family:var(--font-o);font-size:.68rem;letter-spacing:.38em;color:var(--cyan);display:inline-flex;align-items:center;gap:1rem}
.eyebrow-line{display:inline-block;width:38px;height:1px;background:var(--cyan)}
.hero-portrait-lg{margin:1.4rem 0 2.8rem}
.portrait-ring{position:relative;width:clamp(118px,16vw,172px);height:clamp(118px,16vw,172px);margin:0 auto;border-radius:50%;padding:5px;background:linear-gradient(135deg,rgba(34,211,238,.85),rgba(96,165,250,.4) 45%,rgba(167,139,250,.85));box-shadow:0 18px 54px rgba(0,0,0,.5),0 0 44px rgba(99,140,255,.3);animation:float 6s ease-in-out infinite}
.portrait-ring img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;border-radius:50%;display:block;filter:grayscale(40%) contrast(1.05);border:3px solid rgba(6,9,18,.7)}
.portrait-glow{position:absolute;top:50%;left:50%;width:120%;height:120%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(120,150,255,.5),rgba(120,150,255,.1) 45%,transparent 68%);filter:blur(18px);z-index:-1}
.portrait-badge{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 14px);white-space:nowrap;display:flex;gap:.5rem;align-items:center;font-family:var(--font-d);font-size:.66rem;letter-spacing:.22em;color:#d8f6ff;border:1px solid rgba(34,211,238,.4);background:rgba(8,13,28,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:.45rem .95rem;border-radius:999px}
.hero-name{font-family:var(--font-d);font-size:clamp(2.5rem,6.2vw,4.8rem);line-height:1.04;margin:.45rem 0 .45rem;font-weight:700;letter-spacing:-.02em;display:inline-block}
.hero-line{display:block}
.gradient{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-role{margin:.4rem 0 1.05rem}
.role-box{font-family:var(--font-o);font-size:.74rem;letter-spacing:.35em;border:1px solid rgba(34,211,238,.4);padding:.6rem 1.15rem;border-radius:999px;background:rgba(34,211,238,.07);color:#d8f6ff;display:inline-block}
.hero-desc{color:var(--muted);max-width:54ch;margin:.15rem auto;font-size:1.03rem}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:1.9rem}
.command-deck{display:grid;grid-template-columns:1.16fr .84fr;gap:1.05rem;margin-top:2.7rem;width:100%;text-align:left;align-items:stretch}
.deck-terminal{padding:1.1rem 1.3rem;font-family:monospace;font-size:.84rem;line-height:1.9;overflow:hidden}
.term-head{display:flex;gap:7px;align-items:center;margin-bottom:.8rem;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:.55rem}
.term-head span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.25)}
.term-head span:nth-child(1){background:#f87171}.term-head span:nth-child(2){background:#fbbf24}.term-head span:nth-child(3){background:#34d399}
.term-head b{margin-left:auto;font-family:var(--font-o);font-size:.58rem;letter-spacing:.28em;color:var(--muted);font-weight:500}
.deck-terminal code{display:block;color:#8ff3ff;white-space:nowrap}
.deck-terminal code.dim{color:var(--muted)}
.deck-terminal .ok{color:#34d399}
.term-cursor{display:inline-block;color:var(--cyan);animation:pulse 1s infinite}
.deck-right{display:grid;gap:1rem;align-content:stretch}
.deck-card{padding:1.1rem 1.3rem}
.deck-label{font-family:var(--font-o);font-size:.6rem;letter-spacing:.3em;color:var(--cyan);display:block;margin-bottom:.7rem}
.status-list{display:grid;gap:.55rem}
.status-list div{display:flex;gap:.6rem;align-items:center;font-size:.84rem;color:#dbe6ff}
.status-list i{width:8px;height:8px;border-radius:50%;flex:none}
.s-ok{background:#34d399;box-shadow:0 0 10px #34d399}.s-run{background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 1.6s infinite}
.status-list span{font-weight:600;font-family:var(--font-d)}
.status-list em{color:var(--muted);font-style:normal;margin-left:auto}
.status-list .ok{color:#34d399}
@keyframes float{50%{transform:translateY(-12px)}}
.scroll-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.7rem;color:var(--dim);font-family:var(--font-o);font-size:.62rem;letter-spacing:.35em}
.mouse{width:22px;height:34px;border:1px solid rgba(255,255,255,.3);border-radius:12px;display:flex;justify-content:center;padding-top:6px}
.wheel{width:3px;height:8px;border-radius:3px;background:var(--cyan);animation:wheel 1.6s infinite}
@keyframes wheel{50%{transform:translateY(8px);opacity:0}}

/* sections */
.section-eyebrow{font-family:var(--font-o);font-size:.68rem;letter-spacing:.35em;color:var(--cyan);margin-bottom:.7rem}
.section-title{font-family:var(--font-d);font-size:clamp(1.9rem,4.4vw,3.2rem);letter-spacing:-.01em;margin-bottom:1rem}
.section-sub{color:var(--muted);max-width:62ch;margin-bottom:2.2rem}
.panel-tag{font-family:var(--font-o);font-size:.62rem;letter-spacing:.3em;color:var(--cyan);border:1px solid rgba(34,211,238,.3);display:inline-block;padding:.4rem .8rem;border-radius:999px;margin-bottom:1.2rem;background:rgba(34,211,238,.06)}
.lead{font-size:1.12rem}
.panel p+p{margin-top:.9rem}
.muted{color:var(--muted)}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:1.4rem}
.panel,.journey{padding:clamp(1.4rem,3vw,2.4rem)}
.about-actions{display:flex;gap:.7rem;margin-top:1.4rem;flex-wrap:wrap}
.journey h3{font-family:var(--font-d);font-size:1.5rem;margin-bottom:1.2rem}
.qual-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.qual{border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:1rem;background:rgba(255,255,255,.03)}
.qual strong{display:block;font-family:var(--font-d)}
.qual em{color:var(--muted);font-style:normal;font-size:.82rem}
.q-icon{display:inline-flex;color:var(--cyan);margin-bottom:.4rem}
.journey-foot{margin-top:1.1rem;color:var(--muted);font-size:.85rem;display:flex;gap:.6rem;align-items:center}

/* skills */
.skills-grid{display:grid;gap:1.6rem}
.skill-cat h3{font-family:var(--font-d);font-size:1rem;letter-spacing:.2em;text-transform:uppercase;color:#dbe6ff;margin-bottom:.9rem}
.skill-cat h3 span{color:var(--cyan);margin-right:.6rem;font-family:var(--font-o);font-size:.75rem}
.skill-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.9rem}
.skill{padding:1.3rem;transition:transform .25s,border-color .25s,box-shadow .25s}
.skill:hover{border-color:rgba(34,211,238,.5);box-shadow:0 0 30px rgba(34,211,238,.18),0 20px 60px rgba(0,0,0,.45)}
.s-icon{font-size:1.4rem}
.skill h4{font-family:var(--font-d);margin:.6rem 0 .3rem}
.skill p{color:var(--muted);font-size:.88rem;min-height:2.6em}
.s-level{display:inline-block;margin-top:.7rem;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--cyan);border-top:1px solid rgba(255,255,255,.1);padding-top:.6rem;font-family:var(--font-o)}
.core-chips{display:flex;flex-wrap:wrap;gap:.7rem}
.core-chip{padding:.75rem 1.2rem;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);font-family:var(--font-d);font-size:.85rem;transition:.25s}
.core-chip:hover{border-color:var(--cyan);box-shadow:0 0 20px rgba(34,211,238,.25);transform:translateY(-2px)}

/* projects */
.projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.project{padding:0;cursor:pointer;transition:border-color .3s,box-shadow .3s}
.project:hover{border-color:rgba(34,211,238,.5);box-shadow:0 0 34px rgba(34,211,238,.16),0 24px 70px rgba(0,0,0,.5)}
.proj-visual{height:190px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
.v-web{background:linear-gradient(135deg,rgba(11,21,48,.55),rgba(16,29,66,.4));position:relative}
.pv-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(34,211,238,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.15) 1px,transparent 1px);background-size:26px 26px}
.pv-window{position:absolute;top:18px;left:18px;right:18px;height:120px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(5,9,20,.5);display:flex;gap:6px;padding:10px}
.pv-window span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.pv-lines{position:absolute;left:34px;right:34px;top:60px;display:grid;gap:10px}
.pv-lines i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--cyan),var(--purple));opacity:.7}
.pv-lines i:nth-child(2){width:70%}.pv-lines i:nth-child(3){width:45%}
.v-py{background:rgba(7,11,22,.55);font-family:monospace;color:#7ef0ff;padding:1.4rem;justify-content:flex-start}
.v-py span{color:var(--muted)}
.pv-cursor{animation:pulse 1s infinite;color:var(--cyan)}
.v-ai{background:radial-gradient(circle at 50% 40%,rgba(167,139,250,.35),transparent 65%),rgba(10,15,34,.5);flex-direction:column;gap:.8rem;color:#dcd2ff;font-family:var(--font-d);font-size:.8rem;letter-spacing:.15em}
.profile-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem}
.avatar{width:76px;height:76px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:700;font-size:1.3rem;color:#06121a;background:var(--grad);border:2px solid rgba(34,211,238,.6);box-shadow:0 0 24px rgba(34,211,238,.35);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(35%) contrast(1.05)}
.avatar.no-photo::after{content:"DK"}
.profile-id strong{display:block;font-family:var(--font-d);font-size:1.05rem}
.profile-id em{color:var(--muted);font-style:normal;font-size:.82rem}
.v-topic{background:linear-gradient(135deg,rgba(11,26,46,.55),rgba(20,34,77,.4));flex-direction:column;gap:.9rem;color:#cdeffd;font-family:var(--font-d);font-size:.72rem;letter-spacing:.15em}
.pv-cards{display:flex}
.pv-cards i{width:56px;height:74px;border-radius:10px;border:1px solid rgba(34,211,238,.5);background:rgba(8,14,30,.8);margin-left:-18px;box-shadow:0 10px 26px rgba(0,0,0,.5)}
.pv-cards i:first-child{margin-left:0;transform:rotate(-8deg)}
.pv-cards i:last-child{transform:rotate(8deg)}
.pv-cards i:nth-child(2){background:linear-gradient(180deg,rgba(34,211,238,.35),rgba(167,139,250,.3))}
.v-interview{background:radial-gradient(circle at 50% 35%,rgba(52,211,153,.25),transparent 65%),rgba(8,16,32,.5);flex-direction:column;gap:.7rem;color:#d3f7e6;font-family:var(--font-d);font-size:.72rem;letter-spacing:.15em}
.pv-mic{width:52px;height:52px;border-radius:50%;border:1px solid rgba(52,211,153,.6);display:flex;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:0 0 22px rgba(52,211,153,.4);animation:pulse 2s infinite}
.proj-live{position:absolute;top:12px;right:12px;font-family:var(--font-o);font-size:.6rem;letter-spacing:.25em;color:#06121a;background:var(--grad);padding:.45rem .8rem;border-radius:999px;font-weight:700}
.proj-live:hover{filter:brightness(1.12)}
.pv-nodes{display:flex;gap:14px}
.pv-nodes i{width:14px;height:14px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan);animation:pulse 2s infinite}
.pv-nodes i:nth-child(2){background:var(--blue);animation-delay:.3s}.pv-nodes i:nth-child(3){background:var(--purple);animation-delay:.6s}.pv-nodes i:nth-child(4){background:#34d399;animation-delay:.9s}
.proj-body{padding:1.3rem}
.proj-index{font-family:var(--font-o);font-size:.65rem;letter-spacing:.3em;color:var(--cyan)}
.proj-body h3{font-family:var(--font-d);font-size:1.2rem;margin:.5rem 0}
.proj-body p{color:var(--muted);font-size:.9rem}
.tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.tags span{font-size:.7rem;letter-spacing:.1em;padding:.35rem .7rem;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:#cbd7f2;background:rgba(255,255,255,.04);font-family:var(--font-d)}
.proj-actions{margin-top:1rem}
.projects-note{margin-top:1.2rem;color:var(--dim);font-size:.88rem}

/* modal */
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:1.2rem}
.modal.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,4,10,.7);backdrop-filter:blur(8px)}
.modal-card{max-width:560px;width:100%;padding:2rem;animation:mIn .35s ease;max-height:88vh;overflow:auto}
@keyframes mIn{from{opacity:0;transform:scale(.94) translateY(14px)}}
.modal-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:10px;border:1px solid var(--border);color:var(--muted)}
.modal-close:hover{color:#fff;border-color:var(--cyan)}
.modal-card h3{font-family:var(--font-d);font-size:1.6rem;margin:.5rem 0}
.modal-card h4{font-family:var(--font-o);font-size:.65rem;letter-spacing:.3em;color:var(--cyan);margin:1.2rem 0 .6rem}
.modal-card ul{padding-left:1.1rem;color:var(--muted)}
.modal-actions{display:flex;gap:.7rem;margin-top:1.4rem;flex-wrap:wrap}

/* timeline */
.timeline{position:relative;padding-left:8px;margin-top:1rem}
.t-line{position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:rgba(255,255,255,.1);border-radius:2px}
.t-fill{width:100%;height:0;background:var(--grad)}
.t-item{position:relative;padding:0 0 1.4rem 3rem}
.t-node{position:absolute;left:0;top:22px;width:18px;height:18px;border-radius:50%;background:#0a1226;border:2px solid var(--cyan);box-shadow:0 0 16px rgba(34,211,238,.8);animation:pulse 2.2s infinite}
.t-card{padding:1.6rem}
.t-date{font-family:var(--font-o);font-size:.65rem;letter-spacing:.3em;color:var(--cyan)}
.t-card h3{font-family:var(--font-d);font-size:1.35rem;margin:.4rem 0 .1rem}
.t-sub{color:#d6e2ff;font-weight:600}
.t-card p{color:var(--muted)}
.t-badge{display:inline-flex;align-items:center;gap:.5rem;margin-top:.9rem;font-size:.75rem;border:1px solid rgba(52,211,153,.4);color:#a7f3d0;background:rgba(52,211,153,.08);padding:.4rem .8rem;border-radius:999px}

/* mindset */
.mind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.mind{padding:1.5rem}
.m-num{font-family:var(--font-o);color:var(--cyan);font-size:.7rem;letter-spacing:.3em}
.mind h3{font-family:var(--font-d);margin:.6rem 0 .3rem;letter-spacing:.1em}
.mind p{color:var(--muted);font-size:.9rem}
.m-bar{height:4px;background:rgba(255,255,255,.1);border-radius:4px;margin-top:1rem;overflow:hidden}
.m-bar i{display:block;height:100%;width:var(--w);background:var(--grad);border-radius:4px}

/* thinking */
.think{min-height:380px;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(10,8,26,.22),rgba(16,12,36,.08))}
.think-visual{position:relative;flex:1;overflow:hidden}
#thinkCanvas{width:100%;height:340px;display:block}
.think-scan{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(103,232,249,.8),transparent);animation:scanY 5s linear infinite;pointer-events:none}
@keyframes scanY{0%{top:-2px;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
.think-stages{display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap;padding:1.1rem;border-top:1px solid rgba(255,255,255,.08);font-family:var(--font-o);font-size:.68rem;letter-spacing:.3em;color:var(--muted);position:relative;z-index:1}
.think-stages .hl{color:#06121a;background:var(--grad);padding:.4rem .9rem;border-radius:999px}
.think-code{text-align:center;padding-bottom:1.3rem;color:var(--dim);font-family:monospace;font-size:.85rem}

/* resume */
.resume-card{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;padding:clamp(1.6rem,4vw,3rem);align-items:center;overflow:hidden}
.resume-card h2{font-family:var(--font-d);font-size:clamp(1.8rem,4vw,2.8rem)}
.resume-card p{color:var(--muted);margin:.7rem 0 1.4rem}
.resume-btns{display:flex;gap:.8rem;flex-wrap:wrap}
.resume-hint{font-size:.78rem;color:var(--dim)!important;margin-top:1rem!important}
.resume-right{display:flex;justify-content:center}
.paper{width:230px;height:300px;background:linear-gradient(180deg,#f4f7ff,#dbe4f7);border-radius:12px;color:#0b1226;padding:1.1rem;position:relative;transform:rotate(4deg);box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden;animation:float 6s ease-in-out infinite}
.paper-head{display:flex;gap:6px;margin-bottom:1rem}
.paper-head span{width:26px;height:6px;border-radius:3px;background:#0b1226;opacity:.2}
.paper strong{font-family:var(--font-d);font-size:.8rem}
.paper em{display:block;font-style:normal;font-size:.65rem;color:#3b4a6b;margin:.2rem 0 .8rem}
.paper i{display:block;height:7px;border-radius:4px;background:#0b1226;opacity:.14;margin-bottom:8px}
.paper i.short{width:55%}
.paper-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.7) 48%,transparent 60%);transform:translateX(-100%);animation:paperShine 3.8s infinite}
@keyframes paperShine{60%,100%{transform:translateX(100%)}}

/* contact */
.contact-title{font-family:var(--font-d);font-size:clamp(2.1rem,5.4vw,4rem);line-height:1}
.contact-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:2rem}
.c-card{padding:1.8rem;display:block;transition:.3s}
.c-card:hover{border-color:var(--border-glow);box-shadow:0 0 30px rgba(34,211,238,.2);transform:translateY(-3px)}
.c-icon{font-size:1.6rem}
.c-label{font-family:var(--font-o);font-size:.62rem;letter-spacing:.3em;color:var(--cyan);display:block;margin:.7rem 0 .3rem}
.c-card strong{font-family:var(--font-d);font-size:1.02rem;word-break:break-all}
.c-card em{display:block;color:var(--muted);font-style:normal;font-size:.82rem;margin-top:.3rem}
.pulse-soft{animation:pulse 2s infinite;color:#34d399}
.contact-note{margin-top:1.4rem;color:var(--dim)}
.social-row{display:flex;gap:.8rem;justify-content:center;margin-top:1.6rem;flex-wrap:wrap}
.foot-social{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap}
.foot-social a{color:var(--cyan);font-size:.82rem;font-family:var(--font-d);letter-spacing:.08em}
.foot-social a:hover{color:#fff}

/* footer */
footer{border-top:1px solid rgba(255,255,255,.08);padding:2.2rem 0;background:rgba(4,6,12,.6);backdrop-filter:blur(10px)}
.foot-inner{display:flex;flex-direction:column;gap:1rem;text-align:center}
.foot-brand{text-align:center}
.foot-brand strong{font-family:var(--font-d);letter-spacing:.08em}
.foot-brand span{display:block;font-family:var(--font-o);font-size:.62rem;letter-spacing:.35em;color:var(--cyan);margin-top:.3rem}
.foot-links{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
.foot-links a{color:var(--muted);font-size:.82rem}
.foot-links a:hover{color:#fff}
.copy{color:var(--dim);font-size:.78rem}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .7s ease,transform .7s ease,filter .7s ease}
.reveal.visible{opacity:1;transform:none;filter:blur(0)}

/* responsive */
@media(max-width:1024px){
  .projects-grid{grid-template-columns:1fr 1fr}
  .mind-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .command-deck{grid-template-columns:1fr}
  .about-grid,.resume-card,.contact-grid{grid-template-columns:1fr}
  .deck-terminal code{overflow-x:auto;padding-bottom:4px}
  .nav-links{position:fixed;top:calc(var(--nav-h) + 18px);left:50%;transform:translateX(-50%) translateY(-12px);width:min(480px,94vw);flex-direction:column;background:rgba(8,12,24,.96);border:1px solid var(--border);border-radius:16px;padding:1.2rem;opacity:0;visibility:hidden;transition:.3s}
  .nav-links.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  .menu-btn{display:flex}
  .nav-cta-mobile{display:block}
  .status-pill{display:none}
  .core-wrap{height:380px}
}
@media(max-width:560px){
  .projects-grid{grid-template-columns:1fr}
  .mind-grid{grid-template-columns:1fr}
  .qual-grid{grid-template-columns:1fr}
  #skipIntro{bottom:16px;right:16px}
  .section::before{inset:8px 8px;border-radius:26px}
  .section::after{left:8%;right:8%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;filter:none}
}

/* ===== FULL TRANSPARENCY OVERRIDE =====
   Strips every solid/translucent fill AND frosted blur from sections,
   containers, cards, panels, grids, badges, nav, footer and form fields,
   so the main futuristic background flows continuously behind everything.
   Only text, borders (kept subtle), glows, shadows, images and icons define
   components. CTA gradient on .btn-primary is preserved on purpose. */
.glass, .panel, .journey, .qual, .skill, .core-chip, .tags span, .project,
.t-card, .mind, .think, .resume-card, .c-card, .deck-terminal, .deck-card,
.modal-card, .nav-inner, .nav-links, .proj-visual, .v-web, .v-py, .v-ai,
.v-topic, .v-interview, .pv-window, .role-box, .status-pill, .panel-tag,
.portrait-badge, .t-badge, .chip, .hl, .proj-live, .avatar, .nav-progress,
footer, .paper, .portrait-ring, .pv-cards i, .paper-shine {
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.section::before {
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.btn, .btn-glass, .btn-ghost {
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.btn-primary { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
input, textarea, select {
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.modal-backdrop {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.role-box, .status-pill, .portrait-badge, .t-badge, .proj-live, .panel-tag, .hl {
  color: #bdf3ff;
  border-color: rgba(34, 211, 238, .45);
}
.avatar.no-photo::after { color: #67e8f9; }
.portrait-ring { border: 1px solid rgba(34, 211, 238, .55); }
.paper { border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); color: #cdd7f0; }
.paper strong { color: #eef3ff; }
.paper em { color: #9aa7c2; }
.paper i, .paper-head span { background: rgba(205, 215, 240, .5) !important; }