:root{--bg-color: #050505;--text-primary: #ffffff;--text-secondary: #a3a3a3;--spidey-red: #ff003c;--spidey-blue: #0011ff;--venom-black: #111111;--spider-yellow: #ffea00;--nav-bg: rgba(5, 5, 5, .7);--border-color: rgba(255, 255, 255, .1);--card-bg: rgba(17, 17, 17, .6);--card-hover-bg: rgba(255, 0, 60, .1);--font-heading: "Syne", sans-serif;--font-body: "Space Grotesk", sans-serif}[data-theme=light]{--bg-color: #f4f4f0;--text-primary: #050505;--text-secondary: #555555;--spidey-red: #df1f2d;--spidey-blue: #2b3784;--venom-black: #e0e0e0;--spider-yellow: #ffb800;--nav-bg: rgba(244, 244, 240, .8);--border-color: rgba(0, 0, 0, 1);--card-bg: #ffffff;--card-hover-bg: #fdfdfd}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--bg-color);background-image:linear-gradient(to bottom,rgba(5,5,5,.7),rgba(5,5,5,.9)),url(https://images.unsplash.com/photo-1608889175123-8ee362201f81?q=80&w=2000&auto=format&fit=crop);background-size:cover;background-position:center;background-attachment:fixed;color:var(--text-primary);font-family:var(--font-body);overflow-x:hidden;overflow-y:auto;-webkit-font-smoothing:antialiased}.app-container{position:relative;width:100vw;min-height:100vh;overflow-x:hidden}.content-layer{position:relative;z-index:10;pointer-events:auto}nav{position:fixed;top:0;width:100%;padding:1.5rem 5%;display:flex;justify-content:space-between;align-items:center;z-index:100;background:var(--nav-bg);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-bottom:2px solid var(--border-color)}[data-theme=light] nav{border-bottom:3px solid var(--text-primary)}.logo{font-family:var(--font-heading);font-weight:800;font-size:1.8rem;letter-spacing:-2px;text-transform:uppercase;color:var(--text-primary);position:relative}.logo:after{content:"WEB";position:absolute;top:-10px;right:-30px;background:var(--spidey-red);color:#fff;font-size:.6rem;padding:2px 6px;border-radius:10px;transform:rotate(15deg)}.nav-links{display:flex;gap:2.5rem}.nav-links a{color:var(--text-primary);text-decoration:none;font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;position:relative;overflow:hidden}.nav-links a:before{content:"";position:absolute;bottom:0;left:-100%;width:100%;height:2px;background:var(--spidey-red);transition:.3s ease}.nav-links a:hover:before{left:0}section{min-height:100vh;padding:10rem 5% 5rem;display:flex;flex-direction:column;justify-content:center}.hero{position:relative;text-align:left}.hero p.subtitle{font-family:var(--font-body);color:var(--spidey-red);font-weight:700;letter-spacing:4px;text-transform:uppercase;margin-bottom:1rem}.hero h1{font-family:var(--font-heading);font-size:clamp(4rem,10vw,9rem);font-weight:800;line-height:.9;margin-bottom:2rem;text-transform:uppercase;letter-spacing:-4px}.hero h1 span{color:transparent;-webkit-text-stroke:2px var(--text-primary);display:block}[data-theme=light] .hero h1 span{-webkit-text-stroke:3px var(--text-primary)}.hero .glitch-text{position:relative;display:inline-block}.hero .glitch-text:before,.hero .glitch-text:after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;background:var(--bg-color)}.hero .glitch-text:before{left:3px;text-shadow:-2px 0 var(--spidey-red);clip:rect(24px,550px,90px,0);animation:glitch-anim-2 3s infinite linear alternate-reverse}.hero .glitch-text:after{left:-3px;text-shadow:-2px 0 var(--spidey-blue);clip:rect(85px,550px,140px,0);animation:glitch-anim 2.5s infinite linear alternate-reverse}@keyframes glitch-anim{0%{clip:rect(34px,9999px,14px,0)}20%{clip:rect(78px,9999px,83px,0)}40%{clip:rect(12px,9999px,54px,0)}60%{clip:rect(98px,9999px,21px,0)}80%{clip:rect(44px,9999px,62px,0)}to{clip:rect(56px,9999px,3px,0)}}@keyframes glitch-anim-2{0%{clip:rect(15px,9999px,94px,0)}20%{clip:rect(88px,9999px,23px,0)}40%{clip:rect(32px,9999px,84px,0)}60%{clip:rect(68px,9999px,41px,0)}80%{clip:rect(54px,9999px,12px,0)}to{clip:rect(26px,9999px,73px,0)}}.hero p.desc{font-size:clamp(1.2rem,2vw,1.8rem);color:var(--text-secondary);max-width:600px;line-height:1.5;margin-bottom:3rem;font-weight:500}.hero-buttons{display:flex;gap:1.5rem;flex-wrap:wrap}.btn{padding:1.2rem 3rem;font-family:var(--font-heading);font-weight:800;text-decoration:none;font-size:1.2rem;letter-spacing:2px;text-transform:uppercase;transition:all .2s ease;position:relative;overflow:hidden;z-index:1}.btn.primary{background:var(--spidey-red);color:#fff;border:2px solid var(--spidey-red)}[data-theme=light] .btn.primary{box-shadow:8px 8px 0 var(--text-primary);border:3px solid var(--text-primary)}.btn.primary:before{content:"";position:absolute;top:0;left:0;width:0%;height:100%;background:var(--text-primary);z-index:-1;transition:.3s ease}.btn.primary:hover:before{width:100%}.btn.primary:hover{color:var(--bg-color);box-shadow:4px 4px 0 var(--spidey-blue);transform:translate(-4px,-4px)}.section-title{font-family:var(--font-heading);font-size:clamp(3rem,7vw,6rem);font-weight:800;margin-bottom:4rem;text-transform:uppercase;letter-spacing:-2px;color:transparent;-webkit-text-stroke:1px var(--text-secondary);position:relative;display:inline-block}[data-theme=light] .section-title{-webkit-text-stroke:2px var(--text-primary)}.section-title:after{content:"";position:absolute;bottom:-10px;left:0;width:50px;height:8px;background:var(--spidey-red)}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:3rem;z-index:10}.skill-card{background:var(--card-bg);border:2px solid var(--border-color);padding:3rem 2.5rem;transition:all .3s cubic-bezier(.25,.46,.45,.94);position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}[data-theme=light] .skill-card{border:3px solid var(--text-primary);box-shadow:8px 8px 0 var(--text-primary)}.skill-card:before{content:"";position:absolute;top:-2px;left:-2px;width:20px;height:20px;border-top:4px solid var(--spidey-red);border-left:4px solid var(--spidey-red);transition:.3s}.skill-card:hover{transform:translateY(-10px) rotate(-1deg);border-color:var(--spidey-red)}[data-theme=light] .skill-card:hover{box-shadow:12px 12px 0 var(--spidey-red)}.skill-card h3{font-family:var(--font-heading);font-size:2rem;margin-bottom:1.5rem;color:var(--text-primary);text-transform:uppercase;font-weight:800}.skill-card p{color:var(--text-secondary);line-height:1.6;font-size:1.1rem}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:4rem;z-index:10}.project-card{background:transparent;border-top:3px solid var(--text-primary);padding:2rem 0;transition:all .4s ease;cursor:pointer;position:relative;display:flex;flex-direction:column}.project-card:hover{border-top-color:var(--spidey-red);padding-left:20px}.project-content h3{font-family:var(--font-heading);font-size:3rem;margin-bottom:1rem;font-weight:800;text-transform:uppercase;transition:.3s}.project-card:hover h3{color:var(--spidey-red)}.project-content p{color:var(--text-secondary);line-height:1.6;margin-bottom:2rem;font-size:1.2rem;max-width:80%}.tech-stack{font-size:.9rem;font-weight:700;color:var(--bg-color);background:var(--text-primary);padding:.5rem 1.2rem;text-transform:uppercase;align-self:flex-start;letter-spacing:1px}.contact-card{background:var(--spidey-blue);padding:5rem 4rem;width:100%;margin:0 auto;position:relative;overflow:hidden;text-align:center}[data-theme=light] .contact-card{border:4px solid var(--text-primary);box-shadow:15px 15px 0 var(--text-primary)}.contact-card .section-title{color:#fff;-webkit-text-stroke:0}.contact-card .section-title:after{background:var(--spider-yellow);left:50%;transform:translate(-50%)}.contact-card p{color:#fffc}footer{padding:3rem 5%;border-top:2px dashed var(--border-color);display:flex;justify-content:space-between;align-items:center;margin-top:5rem}.social-links{display:flex;gap:2rem}.social-links a{color:var(--text-primary);font-size:1.8rem;transition:transform .3s ease,color .3s ease}.social-links a:hover{color:var(--spidey-red);transform:scale(1.2) rotate(10deg)}.marquee{width:100%;overflow:hidden;white-space:nowrap;background:var(--spidey-red);padding:1rem 0;position:absolute;bottom:10%;left:0;transform:rotate(-3deg) scale(1.1);z-index:5}.marquee-content{display:inline-block;animation:marquee 20s linear infinite;font-family:var(--font-heading);font-size:2rem;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:4px}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}@media (max-width: 768px){.nav-links{display:none}.marquee{transform:rotate(-5deg) scale(1.1)}}