:root{--c:#00f0ff;--b:#0066ff;--v:#a855f7;--bg:#050510}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Space Grotesk',system-ui,sans-serif;color:#e8f4ff;background:linear-gradient(180deg,#050510,#0a0a20 50%,#050510);overflow-x:hidden;cursor:none}
a{color:inherit;text-decoration:none;cursor:none}
b{background:linear-gradient(90deg,var(--c),var(--v));-webkit-background-clip:text;background-clip:text;color:transparent}
.glass{background:rgba(255,255,255,.05);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(0,240,255,.28);border-radius:20px;box-shadow:0 0 30px rgba(0,102,255,.15),inset 0 0 20px rgba(255,255,255,.03)}
.cursor{position:fixed;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 18px 6px rgba(0,240,255,.6);pointer-events:none;z-index:999;transition:width .2s,height .2s}
.aurora{position:fixed;inset:0;z-index:-1;background:radial-gradient(40% 30% at 20% 20%,rgba(168,85,247,.18),transparent),radial-gradient(40% 30% at 80% 70%,rgba(0,102,255,.18),transparent);animation:aur 14s ease-in-out infinite alternate}
@keyframes aur{to{transform:translate(4%,6%) scale(1.15);filter:hue-rotate(40deg)}}
.nav{position:fixed;top:14px;left:50%;translate:-50% 0;z-index:100;display:flex;gap:28px;align-items:center;padding:10px 26px;border-radius:50px;transition:top .3s,background .3s}
.nav.stuck{top:0;border-radius:0 0 24px 24px;background:rgba(5,5,16,.7)}
.logo{font-weight:700;color:var(--c)}
.links{display:flex;gap:6px;perspective:400px}
.links a{padding:6px 12px;display:block}
.links span{display:inline-block;transition:transform .6s,color .3s;transform-style:preserve-3d}
.links a:hover span{transform:rotateX(360deg);color:var(--c);text-shadow:0 0 12px var(--c)}
.hero{position:relative;height:100vh;min-height:620px;display:grid;place-items:center;perspective:1000px}
#c-hero,#c-portal{position:absolute;inset:0;width:100%;height:100%}
.hero-card{position:relative;z-index:2;padding:48px 56px;text-align:center;max-width:680px;margin:0 20px}
.eyebrow{letter-spacing:.4em;text-transform:uppercase;font-size:.75rem;color:var(--v)}
h1{font-size:clamp(3.5rem,11vw,7rem);font-weight:700;line-height:1;margin:10px 0;color:#fff;text-shadow:0 0 30px var(--c),0 0 70px var(--b)}
.tag{opacity:.85;margin-bottom:28px}
.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 28px;border-radius:50px;font-weight:500;color:#04101c;background:linear-gradient(90deg,var(--c),var(--b));box-shadow:0 0 24px rgba(0,240,255,.45);transition:transform .3s,box-shadow .3s}
.btn:hover{transform:translateY(-4px) rotateX(12deg) scale(1.05);box-shadow:0 12px 40px rgba(0,240,255,.7)}
.btn.ghost{background:transparent;color:var(--c);border:1px solid var(--c)}
.sec{padding:110px 6vw;max-width:1200px;margin:auto;perspective:1200px}
h2{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:36px;text-align:center}
.rv{opacity:0;transform:translateZ(-120px) translateY(40px);transition:opacity .9s,transform .9s}
.rv.in{opacity:1;transform:none}
.about{padding:40px;transition:transform .15s}
.about>p{font-size:1.2rem;margin-bottom:28px;opacity:.9}
.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
h3{color:var(--c);margin-bottom:12px;font-weight:500}
.chip{display:inline-block;margin:4px 6px 4px 0;padding:6px 14px;border-radius:30px;font-size:.85rem;background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.5);animation:fl 4s ease-in-out infinite;transition:transform .3s,box-shadow .3s}
.chip:nth-child(2n){animation-delay:-1.3s}.chip:nth-child(3n){animation-delay:-2.6s}
.chip:hover{transform:translateZ(30px) scale(1.15);box-shadow:0 0 18px var(--v)}
@keyframes fl{50%{translate:0 -6px}}
.skills-wrap{position:relative;height:540px}
#c-skills{width:100%;height:100%;cursor:pointer}
.skill-info{position:absolute;left:0;bottom:0;padding:18px 24px;max-width:320px}
.hint{text-align:center;opacity:.6;margin:-20px 0 20px}
.stage{height:380px;perspective:1100px;cursor:grab;touch-action:pan-y;user-select:none}
.ring{position:relative;width:260px;height:320px;margin:20px auto;transform-style:preserve-3d}
.pcard{position:absolute;inset:0;transform-style:preserve-3d}
.pin{height:100%;padding:24px;display:flex;flex-direction:column;gap:10px;transition:transform .4s,box-shadow .4s;background:rgba(10,12,32,.7)}
.pin:hover{transform:translateZ(50px) translateY(-16px) scale(1.05);box-shadow:0 20px 50px rgba(0,240,255,.35)}
.pin p{font-size:.9rem;opacity:.8;flex:1}.pin a{color:var(--c)}
.tl{position:relative;max-width:760px;margin:auto}
.tl::before{content:"";position:absolute;left:50px;top:0;bottom:0;width:2px;background:linear-gradient(var(--c),var(--v));box-shadow:0 0 14px var(--c)}
.tl::after{content:"";position:absolute;left:46px;width:10px;height:60px;border-radius:10px;background:linear-gradient(transparent,#fff);filter:blur(2px);animation:pulse 3.5s linear infinite}
@keyframes pulse{from{top:-60px}to{top:100%}}
.ms{display:flex;align-items:center;gap:26px;margin-bottom:40px}
.ms .glass{padding:16px 22px;flex:1}
.node{flex:none;width:102px;height:102px;margin-left:0;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),rgba(0,240,255,.25) 40%,rgba(10,10,40,.8));border:1px solid var(--c);box-shadow:0 0 30px rgba(0,240,255,.5);animation:fl 5s ease-in-out infinite}
.contact{position:relative;min-height:100vh;display:grid;place-items:center;text-align:center;overflow:hidden}
.cwrap{position:relative;z-index:2;padding:20px}
.btn.big{font-size:1.5rem;padding:22px 48px;margin:10px 0 36px}
.clinks{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.clinks a{padding:12px 26px;transition:transform .3s,box-shadow .3s}
.clinks a:hover{transform:translateY(-6px) rotateX(15deg);box-shadow:0 0 30px var(--c)}
.foot{margin:0 4vw 20px;padding:28px 32px;position:relative;z-index:3}
.fgrid{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;font-size:.9rem}
.fgrid>div:last-child{text-align:right}.fl{display:flex;gap:16px}.fl a:hover{color:var(--c)}
.fname{font-weight:700;transition:.3s}.fname:hover{color:var(--c);text-shadow:0 0 10px var(--c),0 0 30px var(--c)}
.copy{text-align:center;margin-top:20px;opacity:.6;font-size:.8rem}
.nogl .hero,.nogl .contact{background:radial-gradient(circle at 50% 40%,rgba(0,240,255,.25),transparent 50%),repeating-radial-gradient(circle at 50% 50%,transparent 0 40px,rgba(168,85,247,.2) 41px 42px)}
.nogl canvas{display:none}.nogl .skills-wrap{height:auto;min-height:120px}
@media(max-width:760px){.links a{padding:6px 7px;font-size:.85rem}.logo{display:none}.nav{gap:0}.hero-card{padding:32px 22px}.fgrid{grid-template-columns:1fr;text-align:center}.fgrid>div:last-child{text-align:center}.fl{justify-content:center}.node{width:76px;height:76px;font-size:.85rem}.tl::before{left:37px}.tl::after{left:33px}body,a{cursor:auto}.cursor{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}