:root{--bg-deep: #09090B;--bg-surface: #18181B;--bg-card: #27272A;--bg-card-hover: #2E2E33;--text-primary: #F4F4F5;--text-secondary: #A1A1AA;--text-muted: #52525B;--accent: #818CF8;--accent-dim: #6366F1;--accent-glow: rgba(129, 140, 248, .15);--accent-glow-strong: rgba(129, 140, 248, .3);--accent-secondary: #C084FC;--border: rgba(255, 255, 255, .08);--shadow-card: 0 8px 32px rgba(0, 0, 0, .3);--shadow-card-hover: 0 20px 60px rgba(0, 0, 0, .4);--font-display: "Syne", sans-serif;--font-body: "DM Sans", sans-serif}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--accent-dim) var(--bg-deep)}body{font-family:var(--font-body);background:var(--bg-deep);color:var(--text-primary);overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");pointer-events:none;z-index:500}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes blobMorph{0%,to{border-radius:42% 58% 70% 30%/45% 45% 55% 55%;transform:rotate(0) scale(1)}25%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}50%{border-radius:30% 60% 70% 40%/50% 60% 30%;transform:rotate(180deg) scale(1.05)}75%{border-radius:55% 45% 40% 60%/35% 65%}}@keyframes charReveal{0%{opacity:0;transform:translateY(60px) rotateX(-40deg);filter:blur(4px)}to{opacity:1;transform:translateY(0) rotateX(0);filter:blur(0)}}.reveal{opacity:0;transform:translateY(40px);transition:all .8s cubic-bezier(.16,1,.3,1)}.reveal.visible{opacity:1;transform:translateY(0)}.reveal-left{opacity:0;transform:translate(-60px);transition:all .8s cubic-bezier(.16,1,.3,1)}.reveal-left.visible{opacity:1;transform:translate(0)}.reveal-right{opacity:0;transform:translate(60px);transition:all .8s cubic-bezier(.16,1,.3,1)}.reveal-right.visible{opacity:1;transform:translate(0)}.reveal-scale{opacity:0;transform:scale(.85);transition:all .8s cubic-bezier(.16,1,.3,1)}.reveal-scale.visible{opacity:1;transform:scale(1)}.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}.reveal-delay-3{transition-delay:.3s}.reveal-delay-4{transition-delay:.4s}.reveal-delay-5{transition-delay:.5s}nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.5rem 3rem;display:flex;justify-content:space-between;align-items:center;background:#09090bcc;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:padding .3s ease,transform .4s cubic-bezier(.16,1,.3,1)}nav.scrolled{padding:1rem 3rem}nav.hidden{transform:translateY(-100%)}.nav-logo{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--text-primary);text-decoration:none;letter-spacing:-.02em}.nav-logo span{color:var(--accent)}.nav-links{display:flex;gap:2.5rem;list-style:none}.nav-links a{font-family:var(--font-body);font-size:.85rem;font-weight:500;color:var(--text-secondary);text-decoration:none;text-transform:uppercase;letter-spacing:.08em;transition:color .3s ease;position:relative}.nav-links a:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-secondary));border-radius:1px;transition:width .3s ease}.nav-links a:hover{color:var(--text-primary)}.nav-links a:hover:after{width:100%}.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}.nav-hamburger span{width:24px;height:2px;background:var(--text-primary);transition:all .3s ease}@media(max-width:768px){nav{padding:1rem 1.5rem}.nav-links{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#09090bf7;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);flex-direction:column;align-items:center;justify-content:center;gap:2rem;z-index:99}.nav-links.open{display:flex}.nav-links a{font-size:1.4rem;font-weight:600}.nav-hamburger{display:flex;z-index:101}.nav-hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.nav-hamburger.open span:nth-child(2){opacity:0}.nav-hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}}.hero{min-height:100vh;width:100%;max-width:none;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;position:relative;padding:6rem 6rem 4rem;overflow:hidden;gap:3rem}.hero:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 80% 60% at 20% 40%,rgba(129,140,248,.08) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 80% 30%,rgba(192,132,252,.06) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 50% 80%,rgba(99,102,241,.05) 0%,transparent 50%);animation:meshShift 15s ease-in-out infinite alternate}@keyframes meshShift{0%{transform:scale(1) translate(0);opacity:1}33%{transform:scale(1.08) translate(-2%,2%);opacity:.85}66%{transform:scale(1.04) translate(1%,-1%);opacity:.95}to{transform:scale(1.1) translate(2%,-2%);opacity:1}}.hero-blob{position:absolute;border-radius:42% 58% 70% 30%/45% 45% 55% 55%;animation:blobMorph 18s ease-in-out infinite;filter:blur(60px);opacity:.5;will-change:border-radius}.hero-blob:nth-child(1){width:500px;height:500px;top:-10%;right:-8%;background:linear-gradient(135deg,#818cf833,#c084fc26);animation-duration:18s}.hero-blob:nth-child(2){width:300px;height:300px;bottom:10%;left:-5%;background:linear-gradient(225deg,#6366f126,#818cf81a);animation-duration:22s;animation-delay:-5s}.hero-blob:nth-child(3){width:200px;height:200px;top:30%;left:40%;background:linear-gradient(45deg,#c084fc1f,#818cf814);animation-duration:15s;animation-delay:-10s}.hero-left{position:relative;z-index:2}.hero-right{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center}.hero-tag{font-family:var(--font-body);font-size:.8rem;font-weight:500;color:var(--accent);text-transform:uppercase;letter-spacing:.25em;margin-bottom:1.5rem;opacity:0;animation:fadeSlideUp .8s ease forwards .3s}.hero-name{font-family:var(--font-display);font-size:clamp(3.5rem,9vw,7rem);font-weight:800;line-height:.95;letter-spacing:-.03em;margin-bottom:0}.hero-name .hero-name-line{display:block}.hero-name .char{display:inline-block;opacity:0;animation:charReveal .6s cubic-bezier(.16,1,.3,1) forwards}.hero-name .accent{color:var(--accent);text-shadow:0 0 60px var(--accent-glow-strong)}.hero-title{font-family:var(--font-body);font-size:clamp(1rem,1.8vw,1.15rem);font-weight:400;color:var(--text-secondary);letter-spacing:.02em;line-height:1.7;margin-bottom:2.5rem;max-width:380px;opacity:0;animation:fadeSlideUp .8s ease forwards .9s}.hero-cta{display:inline-flex;align-items:center;gap:.75rem;padding:1rem 2.2rem;background:var(--accent);border:none;border-radius:8px;color:#09090b;font-family:var(--font-body);font-size:.85rem;font-weight:600;text-decoration:none;letter-spacing:.03em;transition:all .4s cubic-bezier(.16,1,.3,1);opacity:0;animation:fadeSlideUp .8s ease forwards 1.1s}.hero-cta svg{width:16px;height:16px;transition:transform .3s ease}.hero-cta:hover{background:var(--accent-dim);box-shadow:0 0 40px var(--accent-glow-strong),0 8px 24px #6366f14d}.hero-cta:hover svg{transform:translateY(3px)}.scroll-indicator{position:absolute;bottom:3rem;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;opacity:0;animation:fadeIn 1s ease forwards 1.8s}.scroll-indicator span{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.2em}.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--accent-dim),transparent);animation:scrollPulse 2s ease-in-out infinite}@keyframes scrollPulse{0%,to{opacity:1;transform:scaleY(1)}50%{opacity:.3;transform:scaleY(.6)}}@media(max-width:768px){.hero{grid-template-columns:1fr;text-align:center;padding:7rem 1.5rem 4rem;gap:2rem}.hero-right{align-items:center}.hero-title{max-width:100%}.hero-name{font-size:clamp(2.8rem,13vw,5rem)}.hero-blob:nth-child(1){width:300px;height:300px}}@media(max-width:480px){.hero-cta{width:100%;justify-content:center}}#projects,#skills,#contact{padding:8rem 3rem;max-width:1200px;margin:0 auto}.section-label{font-family:var(--font-body);font-size:.75rem;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.25em;margin-bottom:1rem}.section-title{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:1.5rem}.section-desc{font-size:.95rem;color:var(--text-secondary);max-width:500px;line-height:1.8;margin-bottom:4rem}@media(max-width:768px){#projects,#skills,#contact{padding:5rem 1.5rem}}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:2rem;perspective:1000px}.project-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:2.5rem;position:relative;overflow:hidden;transition:all .5s cubic-bezier(.23,1,.32,1);transform-style:preserve-3d;cursor:default}.project-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,var(--accent-glow) 0%,rgba(192,132,252,.08) 50%,transparent 100%);opacity:0;transition:opacity .5s ease}.project-card:hover{transform:translateY(-12px);border-color:#818cf840;box-shadow:var(--shadow-card-hover),0 0 40px var(--accent-glow)}.project-card:hover:before{opacity:1}.project-card h3{font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin-bottom:.75rem;letter-spacing:-.01em;position:relative;z-index:1}.project-card p{font-size:.9rem;color:var(--text-secondary);line-height:1.7;margin-bottom:1.5rem;position:relative;z-index:1}.project-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:var(--accent-glow);border:1px solid rgba(129,140,248,.2);border-radius:12px;margin-bottom:1.5rem;position:relative;z-index:1}.project-icon svg{width:24px;height:24px;color:var(--accent)}.project-status{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:1rem;position:relative;z-index:1}.project-status .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.project-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;position:relative;z-index:1}.project-tags span{font-size:.72rem;font-weight:500;padding:.35rem .8rem;background:#818cf814;border:1px solid rgba(129,140,248,.12);border-radius:100px;color:var(--text-secondary);letter-spacing:.03em}.project-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;color:var(--accent);text-decoration:none;position:relative;z-index:1;transition:gap .3s ease}.project-link svg{width:16px;height:16px;transition:transform .3s ease}.project-link:hover{gap:.9rem}.project-link:hover svg{transform:translate(4px)}@media(max-width:768px){.projects-grid{grid-template-columns:1fr}}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.skill-category{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:2rem;transition:all .4s ease}.skill-category:hover{border-color:#818cf833;transform:translateY(-4px);box-shadow:var(--shadow-card)}.skill-category h3{font-family:var(--font-display);font-size:1.05rem;font-weight:700;margin-bottom:1.5rem;color:var(--accent);letter-spacing:-.01em}.skill-rings{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.skill-ring{display:flex;flex-direction:column;align-items:center;gap:.4rem;position:relative}.skill-ring-circle{position:relative;width:80px;height:80px}.skill-ring-circle svg{width:80px;height:80px;transform:rotate(-90deg);display:block}.ring-bg{fill:none;stroke:var(--bg-surface);stroke-width:5}.ring-fill{fill:none;stroke:url(#ringGradient);stroke-width:5;stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:264;transition:stroke-dashoffset 1.5s cubic-bezier(.16,1,.3,1)}.skill-value{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--text-primary);line-height:1}.skill-value:after{content:"%";font-size:.6rem;font-weight:600;color:var(--text-muted)}.skill-label{font-size:.72rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;text-align:center;margin-top:.2rem}@media(max-width:768px){.skills-grid{grid-template-columns:1fr}}.contact-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}.contact-text{font-size:.95rem;color:var(--text-secondary);line-height:1.8;max-width:400px}.contact-links{display:flex;flex-direction:column;gap:1rem}.contact-link{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;text-decoration:none;color:var(--text-primary);transition:all .4s cubic-bezier(.16,1,.3,1)}.contact-link svg{width:22px;height:22px;color:var(--accent);flex-shrink:0;transition:color .3s ease}.contact-link:hover{border-color:#818cf84d;background:var(--bg-card-hover);transform:translate(8px);box-shadow:0 4px 20px var(--accent-glow)}.contact-link:hover svg{color:var(--accent-secondary)}.contact-link-label{font-size:.7rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}.contact-link-value{font-size:.9rem;font-weight:500}@media(max-width:768px){.contact-wrapper{grid-template-columns:1fr;gap:2rem}}footer{padding:3rem;text-align:center;border-top:1px solid var(--border)}footer p{font-size:.8rem;color:var(--text-muted);letter-spacing:.03em}footer span{color:var(--accent)}
