:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#1d1d1f;background:linear-gradient(180deg,#fff,#fafafa);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.header{position:fixed;top:0;left:0;right:0;background:#ffffff26;backdrop-filter:blur(60px) saturate(180%);-webkit-backdrop-filter:blur(60px) saturate(180%);z-index:1000;height:var(--header-height);transition:all .5s cubic-bezier(.4,0,.2,1);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 1px #fff3 inset,0 4px 24px #00000005}.header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,#fff3,#ffffff0d);pointer-events:none;z-index:-1}.header.scrolled{background:#fff3;backdrop-filter:blur(70px) saturate(180%);-webkit-backdrop-filter:blur(70px) saturate(180%);border-bottom:1px solid rgba(255,255,255,.15);box-shadow:0 1px #ffffff4d inset,0 4px 24px #00000008,0 1px #00000003}.header-nav{display:flex;justify-content:space-between;align-items:center;height:100%;position:relative;z-index:1}.logo{display:flex;align-items:center;gap:.5rem}.logo a{font-size:clamp(1.2rem,3vw,1.5rem);font-weight:600;background:linear-gradient(135deg,#1d1d1f,#2997ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none}.logo img{height:40px;width:auto;object-fit:contain}.nav-wrapper{height:100%;display:flex;align-items:center}.nav-links{display:flex;gap:clamp(1.5rem,4vw,2.5rem);list-style:none;margin:0;padding:0;height:100%}.nav-links li{height:100%}.nav-links a{height:100%;display:flex;align-items:center;gap:.5rem;color:#1d1d1f;text-decoration:none;font-size:clamp(.9rem,2vw,1rem);font-weight:600;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;padding:0 .75rem;letter-spacing:-.01em}.nav-icon{font-size:.9em;transition:all .4s cubic-bezier(.4,0,.2,1);opacity:.8}.nav-links a:hover .nav-icon,.nav-links a.active .nav-icon{opacity:1;transform:scale(1.1);color:#2997ff}.nav-links a:before{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%) scaleX(0);width:80%;height:3px;background:linear-gradient(90deg,#2997ff,#2962ff);border-radius:2px 2px 0 0;transition:transform .4s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #2997ff4d}.nav-links a:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:#2997ff;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.4,0,.2,1);opacity:.3}.nav-links a:hover{color:#2997ff;transform:translateY(-1px)}.nav-links a:hover:before,.nav-links a:hover:after{transform:translate(-50%) scaleX(1);transform-origin:center}.nav-links a.active{color:#2997ff}.nav-links a.active:before{transform:translate(-50%) scaleX(1)}.nav-links a.active:after{transform:scaleX(1);transform-origin:left}.mobile-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:.5rem;color:#1d1d1f;font-size:clamp(1.3rem,4vw,1.5rem)}@media (max-width: 768px){.mobile-menu-btn{display:block;z-index:1001}.nav-wrapper{position:fixed;top:var(--header-height);left:0;right:0;bottom:0;background:#fff3;backdrop-filter:blur(70px) saturate(180%);-webkit-backdrop-filter:blur(70px) saturate(180%);border-left:1px solid rgba(255,255,255,.15);box-shadow:-8px 0 32px #00000008,0 1px #ffffff4d inset;transform:translate(100%);transition:transform .3s ease;height:calc(100vh - var(--header-height));display:flex;align-items:flex-start;padding:2rem 0}.nav-wrapper.active{transform:translate(0)}.nav-links{flex-direction:column;width:100%;gap:0;height:auto}.nav-links li{width:100%;height:auto;opacity:0;transform:translate(50px);transition:all .3s ease}.nav-wrapper.active .nav-links li{opacity:1;transform:translate(0)}.nav-links li:nth-child(1){transition-delay:.1s}.nav-links li:nth-child(2){transition-delay:.2s}.nav-links li:nth-child(3){transition-delay:.3s}.nav-links li:nth-child(4){transition-delay:.4s}.nav-links a{padding:1rem 2rem;font-size:clamp(1rem,3vw,1.1rem);justify-content:center;gap:.75rem}.nav-icon{font-size:1.1em}.nav-links a:after{display:none}.nav-links a:hover{background:#2997ff1a;color:#2997ff}.logo img{height:32px}}@media (max-width: 480px){.nav-wrapper{padding:1rem 0}.nav-links a{padding:.8rem 1.5rem}}.main{margin-top:var(--header-height);animation:fadeIn .8s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.hero{min-height:85vh;padding:calc(var(--section-spacing) * 1.2) var(--container-padding);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:linear-gradient(180deg,#fff,#f5f5f7);position:relative;overflow:hidden}.hero:before{content:"";position:absolute;width:200%;height:200%;background:radial-gradient(circle,#2997ff1f,#2997ff0a 40%,#fff0 70%);top:-50%;left:-50%;animation:rotate 30s linear infinite;pointer-events:none}.hero:after{content:"";position:absolute;width:100%;height:100%;background:radial-gradient(circle at 20% 50%,rgba(41,151,255,.06) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(41,151,255,.04) 0%,transparent 50%);top:0;left:0;pointer-events:none}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.hero h1{font-size:clamp(2.5rem,7vw,5rem);font-weight:800;margin-bottom:1.5rem;background:linear-gradient(135deg,#1d1d1f,#2997ff,#1d1d1f);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;position:relative;z-index:1;line-height:1.1;letter-spacing:-.02em;animation:gradientShift 8s ease infinite}@keyframes gradientShift{0%,to{background-position:0% center}50%{background-position:100% center}}.hero p{font-size:clamp(1.1rem,3.5vw,1.8rem);color:#86868b;position:relative;z-index:1;max-width:700px;margin:0 auto;font-weight:400;letter-spacing:-.01em;animation:fadeInUp 1s ease-out .3s both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}section{padding:var(--section-spacing) var(--container-padding);position:relative;scroll-margin-top:calc(var(--header-height) + 2rem)}section h2{font-size:clamp(2.2rem,5.5vw,3.5rem);color:#1d1d1f;margin-bottom:clamp(2.5rem,6vw,4rem);text-align:center;position:relative;font-weight:700;letter-spacing:-.02em}section h2:after{content:"";display:block;width:80px;height:4px;background:linear-gradient(90deg,#2997ff,#2962ff);margin:1.5rem auto;border-radius:2px;box-shadow:0 2px 8px #2997ff4d}.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:clamp(2rem,5vw,3rem);width:100%;padding:1rem 0}.project-placeholder{background:#fff;padding:2rem;border-radius:20px;text-align:center;box-shadow:0 10px 30px #0000000d;transition:all .3s ease;position:relative;overflow:hidden;min-height:300px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#1d1d1f;border:1px solid rgba(0,0,0,.05)}.project-placeholder:hover{transform:translateY(-10px);box-shadow:0 20px 40px #0000001a;border-color:#2997ff33}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem;padding:1rem}.skill-placeholder{background:#fff;padding:1.5rem;border-radius:16px;text-align:center;box-shadow:0 4px 20px #0000000d;transition:all .3s ease;font-weight:500;color:#1d1d1f;border:1px solid rgba(0,0,0,.05)}.skill-placeholder:hover{transform:translateY(-5px);background:#2997ff;color:#fff;box-shadow:0 8px 25px #2997ff4d}.work-section{background:transparent}.contact-section{text-align:center;background:linear-gradient(135deg,#fff,#f5f5f7,#fff);padding:calc(var(--section-spacing) * 1.2) var(--container-padding);margin:0 var(--container-padding);border-radius:clamp(24px,5vw,40px);box-shadow:0 20px 60px #00000014,0 0 0 1px #2997ff0d;position:relative;overflow:hidden}.contact-section:before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(41,151,255,.05) 0%,transparent 70%);pointer-events:none}.contact-section p{font-size:1.2rem;color:#86868b;margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto}.work-with-me{max-width:750px;margin:0 auto 4rem;text-align:left;background:#ffffffe6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:clamp(2rem,4vw,2.5rem);border-radius:24px;box-shadow:0 8px 32px #00000014,0 0 0 1px #2997ff1a;border:1px solid rgba(255,255,255,.5);position:relative;z-index:1;transition:all .4s ease}.work-with-me:hover{transform:translateY(-4px);box-shadow:0 12px 40px #0000001f,0 0 0 1px #2997ff33}.work-with-me h3{font-size:clamp(1.2rem,3vw,1.4rem);color:#1d1d1f;margin-bottom:1rem;font-weight:600}.work-with-me>p{color:#666;font-size:clamp(.95rem,2vw,1.05rem);margin-bottom:1.5rem;max-width:100%;margin-left:0;margin-right:0}.work-with-me ul{list-style:none;padding:0;margin:0}.work-with-me ul li{color:#1d1d1f;font-size:clamp(.9rem,2vw,1rem);margin-bottom:.8rem;padding-left:0;line-height:1.6}.work-with-me ul li:last-child{margin-bottom:0}.contact-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.contact-button{display:inline-flex;align-items:center;gap:.75rem;padding:clamp(1rem,2.5vw,1.25rem) clamp(2rem,5vw,3rem);border-radius:50px;font-size:clamp(1rem,2.5vw,1.15rem);font-weight:600;transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer;border:none;text-decoration:none;position:relative;overflow:hidden}.contact-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.contact-button:hover:before{width:300px;height:300px}.button-icon{font-size:1.3em;position:relative;z-index:1;transition:transform .3s ease}.contact-button:hover .button-icon{transform:scale(1.1) rotate(5deg)}.email-button{background:linear-gradient(135deg,#2997ff,#2962ff);color:#fff;box-shadow:0 8px 24px #2997ff59,0 0 0 1px #ffffff1a inset}.email-button:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 32px #2997ff73,0 0 0 1px #fff3 inset;background:linear-gradient(135deg,#2962ff,#2997ff)}.whatsapp-button{background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;box-shadow:0 8px 24px #25d36659,0 0 0 1px #ffffff1a inset}.whatsapp-button:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 32px #25d36673,0 0 0 1px #fff3 inset;background:linear-gradient(135deg,#128c7e,#25d366)}@media (max-width: 768px){.hero{min-height:50vh;padding:calc(var(--section-spacing) * .6) var(--container-padding)}section{padding:calc(var(--section-spacing) * .7) var(--container-padding)}.work-grid{grid-template-columns:1fr}.contact-section{padding:calc(var(--section-spacing) * .7) var(--container-padding)}}@media (max-width: 480px){.contact-section{padding:2rem var(--container-padding)}.contact-buttons{flex-direction:column;gap:1rem;width:100%;padding:0 1rem}.contact-button{width:100%;justify-content:center}}.about-section{background:linear-gradient(180deg,#fff,#f5f5f7);position:relative}.about-intro{max-width:850px;margin:0 auto 4rem;font-size:clamp(1.15rem,2.5vw,1.4rem);color:#666;text-align:center;line-height:1.8;letter-spacing:-.01em;font-weight:400}.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,500px),1fr));gap:2rem;margin-top:3rem}.about-card{background:#fff;padding:clamp(1.5rem,4vw,2.5rem);border-radius:20px;box-shadow:0 10px 30px #0000000d;border:1px solid rgba(0,0,0,.05)}.about-card h3{color:#2997ff;font-size:clamp(1.3rem,3vw,1.5rem);margin-bottom:2rem;position:relative}.timeline-item{position:relative;padding-left:3rem;padding-bottom:3.5rem;border-left:3px solid #e8e8e8;transition:all .4s cubic-bezier(.4,0,.2,1);margin-bottom:1rem}.timeline-item:hover{border-left-color:#2997ff;padding-left:3.2rem}.timeline-item:last-child{padding-bottom:0;margin-bottom:0}.timeline-item:before{content:"";position:absolute;left:-12px;top:0;width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid #2997ff;box-shadow:0 0 0 6px #2997ff1a,0 4px 12px #2997ff33;transition:all .4s cubic-bezier(.4,0,.2,1);z-index:2}.timeline-item:hover:before{transform:scale(1.3);box-shadow:0 0 0 8px #2997ff26,0 6px 20px #2997ff4d;background:#2997ff}.timeline-item .date{color:#2997ff;font-weight:600;margin-bottom:.8rem;display:block;font-size:.95rem;letter-spacing:.5px}.timeline-item h4{font-size:1.2rem;margin-bottom:.8rem;color:#1d1d1f;font-weight:600}.timeline-item p{color:#666;margin-bottom:1rem;font-size:1rem}.timeline-item ul{list-style:none;padding:0;margin-top:1rem}.timeline-item ul li{position:relative;padding-left:1.8rem;margin-bottom:.8rem;color:#666;line-height:1.6}.timeline-item ul li:before{content:"→";color:#2997ff;position:absolute;left:0;font-weight:700;transition:all .3s ease}.timeline-item:hover ul li:before{transform:translate(3px)}.timeline-item h5{color:#1d1d1f;font-size:1.1rem;margin:1.5rem 0 1rem;font-weight:600}.experience-section,.education-section{background:linear-gradient(180deg,#fff,#f5f5f7)}.experience-section .timeline,.education-section .timeline{max-width:900px;margin:0 auto;background:#fffffff2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:clamp(2.5rem,5vw,4rem);border-radius:28px;box-shadow:0 20px 60px #00000014,0 0 0 1px #2997ff0d;border:1px solid rgba(255,255,255,.5);transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.experience-section .timeline:before,.education-section .timeline:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#2997ff,#2962ff);opacity:0;transition:opacity .4s ease}.experience-section .timeline:hover:before,.education-section .timeline:hover:before{opacity:1}.experience-section .timeline:hover,.education-section .timeline:hover{box-shadow:0 25px 70px #0000001f,0 0 0 1px #2997ff1a;transform:translateY(-4px)}.tech-stack{color:#666;font-size:.9rem;margin:1.2rem 0;font-family:SF Mono,Consolas,Monaco,monospace;background:linear-gradient(135deg,#f8f9fa,#fff);padding:.9rem 1.2rem;border-radius:12px;display:inline-block;border:1px solid #e8e8e8;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #00000008;letter-spacing:.02em}.tech-stack:hover{background:linear-gradient(135deg,#f0f7ff,#e8f4ff);border-color:#2997ff;color:#2997ff;transform:translateY(-2px);box-shadow:0 4px 12px #2997ff26}@media (max-width: 768px){.about-grid{grid-template-columns:1fr}.timeline-item{padding-left:2rem}.timeline-item:before{left:-8px;width:16px;height:16px}}.role-subtitle{color:#2997ff;font-size:.95rem;margin:.5rem 0;font-style:italic}.timeline-item p{color:#666;margin-bottom:.5rem}.timeline-item ul li{line-height:1.5;margin-bottom:.8rem}.project-card{background:#fffffff2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:24px;overflow:hidden;box-shadow:0 10px 40px #00000014,0 0 0 1px #2997ff0d;transition:all .5s cubic-bezier(.4,0,.2,1);border:1px solid rgba(255,255,255,.5);width:100%;height:100%;min-height:clamp(380px,45vw,420px);max-height:clamp(420px,52vw,480px);display:flex;flex-direction:column;position:relative}.project-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#2997ff,#2962ff);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.4,0,.2,1);z-index:1}.project-card:hover{transform:translateY(-12px) scale(1.02);box-shadow:0 25px 60px #0000001f,0 0 0 1px #2997ff26;border-color:#2997ff33}.project-card:hover:before{transform:scaleX(1)}.project-image{position:relative;overflow:hidden;border-radius:12px 12px 0 0;height:220px;background:#f5f5f7}.project-image img{width:100%;height:100%;object-fit:contain;background:#f5f5f7;transition:all .5s ease;display:block}.project-card:hover .project-image img{transform:scale(1.05);filter:blur(3px) brightness(.8)}.project-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#2997ffe6,#2962ffd9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:all .4s cubic-bezier(.4,0,.2,1)}.project-links{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.5rem,2vw,1rem)}.project-link{display:flex;align-items:center;gap:.6rem;padding:clamp(.7rem,2vw,.9rem) clamp(1.2rem,3vw,1.8rem);background:#fffffff2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#1d1d1f;text-decoration:none;border-radius:30px;font-weight:600;transition:all .4s cubic-bezier(.4,0,.2,1);font-size:clamp(.85rem,2vw,.95rem);box-shadow:0 4px 16px #00000026;position:relative;overflow:hidden}.project-link:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#2997ff33;transform:translate(-50%,-50%);transition:width .6s,height .6s}.project-link:hover:before{width:200px;height:200px}.project-link:hover{background:#fff;color:#2997ff;transform:translateY(-3px) scale(1.05);box-shadow:0 8px 24px #0003}.project-card:hover .project-overlay{opacity:1}.project-content{flex:1;padding:clamp(1rem,2.5vw,1.5rem);display:flex;flex-direction:column;overflow:hidden}.project-content h3{font-size:clamp(1.1rem,2.5vw,1.3rem);color:#1d1d1f;margin-bottom:.8rem}.project-content p{color:#86868b;margin-bottom:1.2rem;line-height:1.6;font-size:clamp(.85rem,1.8vw,.95rem);flex-grow:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.technologies{display:flex;flex-wrap:wrap;gap:clamp(.5rem,1.5vw,.75rem);max-height:140px;overflow-y:auto;padding-right:.5rem;align-items:center}.technologies::-webkit-scrollbar{width:6px}.technologies::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.technologies::-webkit-scrollbar-thumb{background:#2997ff;border-radius:10px}.technologies::-webkit-scrollbar-thumb:hover{background:#2972e5}.tech-tag{padding:clamp(.35rem,.8vw,.45rem);background:linear-gradient(135deg,#f5f5f7,#fff);border-radius:10px;font-size:clamp(1rem,1.8vw,1.2rem);color:var(--tech-color, #2997ff);font-weight:600;border:1px solid rgba(41,151,255,.1);transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #00000008;width:clamp(2.2rem,3.5vw,2.6rem);height:clamp(2.2rem,3.5vw,2.6rem);position:relative;cursor:pointer}.tech-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--tech-color, #2997ff);transition:all .3s cubic-bezier(.4,0,.2,1);font-size:inherit}.tech-tag:hover{background:linear-gradient(135deg,#2997ff1a,#2962ff0d);border-color:var(--tech-color, #2997ff);transform:translateY(-4px) scale(1.1);box-shadow:0 6px 16px #2997ff40}.tech-tag:hover .tech-icon{transform:scale(1.15);color:var(--tech-color, #2997ff)}.tech-tag:after{content:attr(title);position:absolute;bottom:calc(100% + .5rem);left:50%;transform:translate(-50%) translateY(-4px);background:#1d1d1ff2;color:#fff;padding:.4rem .8rem;border-radius:8px;font-size:.75rem;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:10;box-shadow:0 4px 12px #0003}.tech-tag:hover:after{opacity:1;transform:translate(-50%) translateY(0)}@media (max-width: 480px){.project-card{min-height:350px;max-height:420px}.technologies{justify-content:flex-start;max-height:100px;gap:.5rem}.tech-tag{width:2rem;height:2rem;font-size:1rem}.project-content p{-webkit-line-clamp:2}}.skills-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(.75rem,2vw,1.25rem)}.skill-category{background:#fffffff2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:clamp(1rem,3vw,1.5rem);border-radius:20px;box-shadow:0 8px 32px #00000014,0 0 0 1px #2997ff0d;transition:all .4s cubic-bezier(.4,0,.2,1);border:1px solid rgba(255,255,255,.5);max-height:fit-content;margin:0 clamp(.7rem,2vw,1.25rem);position:relative;overflow:hidden}.skill-category:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#2997ff,#2962ff);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1)}.skill-category:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 16px 48px #0000001f,0 0 0 1px #2997ff26}.skill-category:hover:before{transform:scaleX(1)}.category-header{display:flex;align-items:center;gap:.5rem;margin-bottom:clamp(.75rem,2vw,1rem)}.category-icon-wrapper{display:flex;align-items:center;justify-content:center;width:clamp(32px,6vw,40px);height:clamp(32px,6vw,40px);background:linear-gradient(135deg,#2997ff1a,#2962ff0d);border-radius:12px;font-size:clamp(1.1rem,2.5vw,1.4rem);color:#2997ff;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #2997ff1a}.skill-category:hover .category-icon-wrapper{transform:scale(1.1) rotate(5deg);background:linear-gradient(135deg,#2997ff33,#2962ff26);box-shadow:0 4px 12px #2997ff33}.skill-category h3{color:#1d1d1f;font-size:clamp(.95rem,2.5vw,1.1rem);font-weight:600;margin:0}.skill-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:clamp(.5rem,1.5vw,.75rem)}.skill-item{background:#ffffffe6;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);padding:clamp(.6rem,1.5vw,.75rem);border-radius:12px;text-align:center;transition:all .4s cubic-bezier(.4,0,.2,1);border:1px solid rgba(41,151,255,.1);position:relative;overflow:hidden;box-shadow:0 2px 8px #00000008}.skill-item:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--hover-color);opacity:0;transition:opacity .3s ease;z-index:0}.skill-item:hover:before{opacity:.1}.skill-icon{font-size:clamp(1.2rem,3vw,1.5rem);margin-bottom:clamp(.3rem,1vw,.4rem);position:relative;z-index:1}.skill-name{display:block;font-size:clamp(.65rem,1.5vw,.75rem);font-weight:500;margin-bottom:.35rem;position:relative;z-index:1;line-height:1.2}.skill-level-bar{height:2px;background:#f5f5f7;border-radius:2px;overflow:hidden;position:relative;z-index:1}.skill-level-fill{height:100%;border-radius:2px;transform-origin:left;animation:fillBar 1.5s ease forwards}@keyframes fillBar{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.skill-item:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 8px 24px #0000001f;border-color:var(--hover-color);background:#fff}.skill-item:hover .skill-icon{transform:scale(1.15) rotate(5deg)}.skill-item:hover .skill-name{color:var(--hover-color);font-weight:700}.skills-section{background:linear-gradient(180deg,#fff,#f5f5f7);padding:6rem 0;margin:0;width:100%;position:relative}.skills-intro{text-align:center;color:#86868b;font-size:clamp(1.1rem,2.5vw,1.3rem);margin-bottom:4rem;font-weight:400;letter-spacing:-.01em}@media (max-width: 480px){.skills-container{grid-template-columns:1fr}.category-header{flex-direction:column;text-align:center;gap:1rem}.skill-items{grid-template-columns:repeat(2,1fr)}}.footer{background:linear-gradient(135deg,#2997ff,#2962ff);padding:3rem 0 2rem;margin-top:auto;position:relative;overflow:hidden}.footer:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.1) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.08) 0%,transparent 50%);pointer-events:none}.footer-content{max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;flex-direction:column;gap:1.5rem;align-items:center;position:relative;z-index:1}.footer-contact,.footer-social{text-align:center;width:100%}.footer-contact p,.footer-social p{color:#fff;font-size:.95rem;line-height:1.6;margin:0}.footer-social a{color:#fff;text-decoration:none;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;font-weight:500;padding:.25rem .5rem;border-radius:6px}.footer-social a:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%) scaleX(0);width:80%;height:2px;background:#fff;transition:transform .4s cubic-bezier(.4,0,.2,1)}.footer-social a:hover{color:#fff;background:#ffffff26;transform:translateY(-2px)}.footer-social a:hover:after{transform:translate(-50%) scaleX(1)}.footer-contact strong,.footer-social strong{font-weight:600}.copyright-section{max-width:1200px;margin:2rem auto 0;padding:1.5rem 2rem 0;border-top:1px solid rgba(255,255,255,.25);position:relative;z-index:1}.copyright{text-align:center;color:#fff;font-size:.9rem}@media (max-width: 768px){.footer{padding:2rem 0 1.5rem}.footer-content{gap:1rem;padding:0 1rem}.footer-contact p,.footer-social p{font-size:.85rem}.copyright-section{padding:1.5rem 1rem 0;margin-top:1.5rem}}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}*{margin:0;padding:0;box-sizing:border-box}:root{--header-height: 60px;--container-padding: 2rem;--section-spacing: 6rem}@media (max-width: 768px){:root{--container-padding: 1.5rem;--section-spacing: 4rem}}@media (max-width: 480px){:root{--container-padding: 1rem;--section-spacing: 3rem}}body{font-family:Inter,-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#1d1d1f;background:#fafafa;overflow-x:hidden}.app{min-height:100vh;display:flex;flex-direction:column}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--container-padding)}html{font-size:16px;scroll-behavior:smooth}@media (max-width: 768px){html{font-size:15px}}@media (max-width: 480px){html{font-size:14px}}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#f5f5f7;border-radius:10px}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2997ff,#2962ff);border-radius:10px;border:2px solid #f5f5f7;transition:background .3s ease}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#2962ff,#2997ff);border:2px solid #e8e8e8}
