@import"https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap";:root{--blue-electric: #0052FF;--coral: #FF6B4A;--yellow: #FFD93D;--cream: #FBF8F3;--dark: #1A1A2E;--gray: #6B7280;--font-display: "Syne", sans-serif;--font-mono: "Space Mono", monospace;--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-out-back: cubic-bezier(.34, 1.56, .64, 1)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-mono);background-color:var(--cream);color:var(--dark);overflow-x:hidden;line-height:1.6}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;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)'/%3E%3C/svg%3E");opacity:.03;pointer-events:none;z-index:1000}.cursor{width:24px;height:24px;background-color:var(--blue-electric);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;transition:transform .15s var(--ease-out-expo),background-color .15s ease;transform:translate(-50%,-50%);opacity:.8}.cursor.hover{transform:translate(-50%,-50%) scale(1.5);background-color:var(--coral)}@media (hover: none){.cursor{display:none}}.navbar{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 2.5rem;display:flex;justify-content:space-between;align-items:center;background:transparent;transition:background-color .4s ease,backdrop-filter .4s ease}.navbar.scrolled{background:#fbf8f3e6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.nav-logo{font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:var(--dark);text-decoration:none;position:relative}.nav-logo:after{content:"";position:absolute;bottom:-4px;left:0;width:100%;height:4px;background:var(--coral);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease-out-expo)}.nav-logo:hover:after{transform:scaleX(1);transform-origin:left}.nav-links{display:flex;gap:2.5rem;list-style:none}.nav-link{font-family:var(--font-mono);font-size:.85rem;color:var(--dark);text-decoration:none;position:relative;padding:.5rem 0;transition:color .3s ease}.nav-link:before{content:attr(data-number);position:absolute;top:-.5rem;left:-1rem;font-size:.65rem;color:var(--coral);opacity:0;transform:translateY(5px);transition:all .3s var(--ease-out-expo)}.nav-link:hover:before{opacity:1;transform:translateY(0)}.nav-link:hover{color:var(--blue-electric)}.menu-toggle{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:.5rem}.menu-toggle span{width:28px;height:2px;background:var(--dark);transition:all .3s var(--ease-out-expo)}.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,6px)}.menu-toggle.active span:nth-child(2){opacity:0}.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-6px)}@media (max-width: 768px){.navbar{padding:1rem 1.5rem}.menu-toggle{display:flex;z-index:101}.nav-links{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--cream);flex-direction:column;justify-content:center;align-items:center;gap:2rem;opacity:0;visibility:hidden;transition:all .4s var(--ease-out-expo)}.nav-links.open{opacity:1;visibility:visible}.nav-link{font-size:1.5rem;font-family:var(--font-display);font-weight:600}}.hero{min-height:100vh;display:flex;align-items:center;padding:6rem 2.5rem 3rem;position:relative;overflow:hidden}.hero-content{max-width:900px;position:relative;z-index:2}.hero-tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.75rem;color:var(--gray);margin-bottom:1.5rem;opacity:0;animation:fadeInUp .8s var(--ease-out-expo) .2s forwards}.hero-tag:before{content:"";width:40px;height:2px;background:var(--coral)}.hero-name{font-family:var(--font-display);font-size:clamp(2.5rem,10vw,5.5rem);font-weight:800;line-height:.95;margin-bottom:1rem;opacity:0;animation:fadeInUp .8s var(--ease-out-expo) .4s forwards}.hero-name .highlight{color:var(--blue-electric);position:relative;display:inline-block}.hero-name .highlight:after{content:"";position:absolute;bottom:.1em;left:0;right:0;height:.15em;background:var(--yellow);z-index:-1;transform:scaleX(0);transform-origin:left;animation:lineReveal .6s var(--ease-out-expo) 1s forwards}.hero-title{font-family:var(--font-display);font-size:clamp(1.2rem,3vw,1.75rem);font-weight:500;color:var(--gray);margin-bottom:1.5rem;opacity:0;animation:fadeInUp .8s var(--ease-out-expo) .6s forwards}.hero-description{font-size:.9rem;max-width:480px;color:var(--dark);margin-bottom:2rem;opacity:0;animation:fadeInUp .8s var(--ease-out-expo) .8s forwards}.hero-cta{display:flex;gap:1.5rem;flex-wrap:wrap;opacity:0;animation:fadeInUp .8s var(--ease-out-expo) 1s forwards}.btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:var(--blue-electric);color:#fff;font-family:var(--font-mono);font-size:.8rem;text-decoration:none;border-radius:50px;border:2px solid var(--blue-electric);transition:all .4s var(--ease-out-expo);position:relative;overflow:hidden}.btn-primary:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--dark);transform:translate(-100%);transition:transform .4s var(--ease-out-expo);z-index:-1}.btn-primary:hover{border-color:var(--dark)}.btn-primary:hover:before{transform:translate(0)}.btn-primary svg{transition:transform .3s var(--ease-out-expo)}.btn-primary:hover svg{transform:translate(4px)}.btn-secondary{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:transparent;color:var(--dark);font-family:var(--font-mono);font-size:.8rem;text-decoration:none;border-radius:50px;border:2px solid var(--dark);transition:all .4s var(--ease-out-expo)}.btn-secondary:hover{background:var(--dark);color:var(--cream)}.hero-shapes{position:absolute;top:0;right:0;width:50%;height:100%;pointer-events:none}.shape{position:absolute;border-radius:50%;opacity:0;animation:shapeFloat 20s infinite ease-in-out}.shape-1{width:400px;height:400px;background:linear-gradient(135deg,var(--blue-electric) 0%,transparent 70%);top:10%;right:-10%;animation-delay:0s;opacity:0;animation:shapeFadeIn 1s var(--ease-out-expo) .5s forwards,shapeFloat 20s infinite ease-in-out 1.5s}.shape-2{width:250px;height:250px;background:linear-gradient(135deg,var(--coral) 0%,transparent 70%);top:50%;right:20%;animation-delay:-5s;opacity:0;animation:shapeFadeIn 1s var(--ease-out-expo) .7s forwards,shapeFloat 25s infinite ease-in-out 1.7s}.shape-3{width:150px;height:150px;background:linear-gradient(135deg,var(--yellow) 0%,transparent 70%);top:30%;right:5%;animation-delay:-10s;opacity:0;animation:shapeFadeIn 1s var(--ease-out-expo) .9s forwards,shapeFloat 15s infinite ease-in-out 1.9s}.hero-socials{display:flex;gap:1rem;margin-top:3rem;opacity:0;animation:fadeInUp .8s var(--ease-out-expo) 1.2s forwards}.social-link{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:2px solid var(--dark);border-radius:50%;color:var(--dark);text-decoration:none;transition:all .4s var(--ease-out-expo);position:relative;overflow:hidden}.social-link:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--blue-electric);transform:scale(0);border-radius:50%;transition:transform .4s var(--ease-out-expo);z-index:-1}.social-link:hover{color:#fff;border-color:var(--blue-electric)}.social-link:hover:before{transform:scale(1)}.section{padding:5rem 2.5rem;position:relative}.section-header{display:flex;align-items:center;gap:1.5rem;margin-bottom:3rem}.section-number{font-family:var(--font-display);font-size:.85rem;font-weight:700;color:var(--coral)}.section-title{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700;position:relative}.section-line{flex:1;height:2px;background:linear-gradient(90deg,var(--dark) 0%,transparent 100%);max-width:300px}.skills-section{background:var(--dark);color:var(--cream)}.skills-section .section-line{background:linear-gradient(90deg,var(--cream) 0%,transparent 100%)}.skills-grid{display:grid;gap:2rem}.skill-category{opacity:1;transform:translateY(0)}.skill-category-title{font-family:var(--font-display);font-size:1rem;font-weight:600;margin-bottom:1rem;color:var(--coral);display:flex;align-items:center;gap:.75rem}.skill-category-title:after{content:"";flex:1;height:1px;background:#ffffff1a}.skills-list{display:flex;flex-wrap:wrap;gap:1rem}.skill-item{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:50px;transition:all .4s var(--ease-out-expo)}.skill-item:hover{background:#ffffff1a;border-color:var(--blue-electric);transform:translateY(-3px)}.skill-icon{width:24px;height:24px;object-fit:contain}.skill-name{font-family:var(--font-mono);font-size:.75rem}.projects-section{background:var(--cream);position:relative;overflow:hidden}.projects-section:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:1px;height:100%;background:linear-gradient(180deg,transparent 0%,rgba(26,26,46,.2) 10%,rgba(26,26,46,.2) 90%,transparent 100%)}.projects-section .section-title{color:var(--dark)}.projects-section .section-line{background:linear-gradient(90deg,var(--dark) 0%,transparent 100%)}.projects-timeline{display:flex;flex-direction:column;gap:0;position:relative}.project-item{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center;text-decoration:none;padding:2rem 0;position:relative;transition:all .5s var(--ease-out-expo)}.project-item:hover{background:#1a1a2e08}.project-item__date{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem;padding-right:2rem}.project-item__year{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.5rem);font-weight:800;color:transparent;-webkit-text-stroke:2px var(--dark);line-height:1;transition:all .4s var(--ease-out-expo)}.project-item:hover .project-item__year{color:var(--blue-electric);-webkit-text-stroke:2px transparent;text-shadow:0 0 40px rgba(0,82,255,.3)}.project-item__month{font-family:var(--font-mono);font-size:.7rem;color:var(--gray);text-transform:uppercase;letter-spacing:.1em}.project-item__line{display:flex;align-items:center;justify-content:center;position:relative;width:50px}.project-item__dot{width:12px;height:12px;background:var(--cream);border:3px solid var(--dark);border-radius:50%;position:relative;z-index:2;transition:all .4s var(--ease-out-expo)}.project-item:hover .project-item__dot{background:var(--blue-electric);border-color:var(--blue-electric);transform:scale(1.3);box-shadow:0 0 30px #0052ff66}.project-item__dot:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border:1px solid rgba(26,26,46,.2);border-radius:50%;opacity:0;transition:all .4s var(--ease-out-expo)}.project-item:hover .project-item__dot:before{opacity:1;width:50px;height:50px;border-color:#0052ff4d}.project-item__content{display:flex;gap:1.5rem;align-items:center;padding-left:1.5rem}.project-item__image-wrapper{position:relative;width:260px;flex-shrink:0;border-radius:16px;overflow:hidden;border:2px solid var(--dark);transition:all .5s var(--ease-out-expo);box-shadow:0 4px 20px #1a1a2e1a}.project-item:hover .project-item__image-wrapper{border-color:var(--blue-electric);transform:translateY(-8px) rotate(-1deg);box-shadow:0 20px 40px #1a1a2e26,0 0 60px #0052ff1a}.project-item__image{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform .6s var(--ease-out-expo)}.project-item:hover .project-item__image{transform:scale(1.08)}.project-item__image-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(0,82,255,.1) 0%,transparent 50%,rgba(255,107,74,.1) 100%);opacity:0;transition:opacity .4s ease}.project-item:hover .project-item__image-overlay{opacity:1}.project-item__info{flex:1;position:relative}.project-item__tag{display:inline-block;font-family:var(--font-mono);font-size:.6rem;font-weight:700;color:var(--blue-electric);text-transform:uppercase;letter-spacing:.15em;margin-bottom:.75rem;padding:.3rem .6rem;background:#0052ff26;border-radius:4px;transition:all .3s ease}.project-item:hover .project-item__tag{background:var(--blue-electric);color:#fff}.project-item__title{font-family:var(--font-display);font-size:clamp(1rem,2vw,1.35rem);font-weight:700;color:var(--dark);line-height:1.3;margin-bottom:.75rem;transition:all .4s var(--ease-out-expo)}.project-item:hover .project-item__title{color:var(--blue-electric);transform:translate(10px)}.project-item__arrow{width:38px;height:38px;border:2px solid var(--dark);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--dark);opacity:.4;transition:all .4s var(--ease-out-expo)}.project-item:hover .project-item__arrow{opacity:1;border-color:var(--coral);background:var(--coral);color:#fff;transform:rotate(-45deg)}.project-item--reverse{direction:rtl}.project-item--reverse>*{direction:ltr}.project-item--reverse .project-item__date{align-items:flex-start;padding-right:0;padding-left:1.5rem}.project-item--reverse .project-item__content{flex-direction:row-reverse;padding-left:0;padding-right:1.5rem}.project-item--reverse:hover .project-item__image-wrapper{transform:translateY(-8px) rotate(1deg)}.project-item--reverse:hover .project-item__title{transform:translate(-10px)}@media (max-width: 1024px){.projects-section:before{left:2rem}.project-item{grid-template-columns:auto 1fr;gap:2rem}.project-item__date{display:none}.project-item__line{width:40px}.project-item__content{flex-direction:column;align-items:flex-start;padding-left:1rem}.project-item__image-wrapper{width:100%;max-width:400px}.project-item--reverse{direction:ltr}.project-item--reverse .project-item__content{flex-direction:column;padding-right:0;padding-left:1rem}.project-item--reverse:hover .project-item__title{transform:translate(10px)}}@media (max-width: 768px){.projects-section:before{left:1.5rem}.project-item{padding:2rem 0;gap:1rem}.project-item__line{width:30px}.project-item__dot{width:12px;height:12px;border-width:2px}.project-item__content{gap:1rem}.project-item__info{display:flex;flex-direction:column}.project-item__tag{font-size:.65rem;margin-bottom:.5rem}.project-item__title{font-size:1.1rem}.project-item__arrow{width:36px;height:36px;align-self:flex-start;margin-top:.5rem}}@media (max-width: 1024px){.project-item__info:before{content:attr(data-date);display:block;font-family:var(--font-mono);font-size:.75rem;color:var(--coral);margin-bottom:.5rem;letter-spacing:.1em}}.footer{background:var(--dark);color:var(--cream);padding:3rem 2.5rem;position:relative;overflow:hidden}.footer:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue-electric),var(--coral),var(--yellow))}.footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:2rem;max-width:1200px;margin:0 auto}.footer-brand{font-family:var(--font-display);font-size:1.25rem;font-weight:700}.footer-links{display:flex;gap:2rem}.footer-link{color:var(--cream);text-decoration:none;font-family:var(--font-mono);font-size:.85rem;opacity:.7;transition:opacity .3s ease}.footer-link:hover{opacity:1}.footer-copyright{font-family:var(--font-mono);font-size:.8rem;opacity:.5;text-align:center;margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes lineReveal{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes shapeFadeIn{to{opacity:.6}}@keyframes shapeFloat{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(20px,-30px) rotate(5deg)}50%{transform:translate(-10px,20px) rotate(-5deg)}75%{transform:translate(30px,10px) rotate(3deg)}}@media (max-width: 768px){.hero{padding:5rem 1.25rem 2rem}.section{padding:3rem 1.25rem}.hero-shapes{width:100%;opacity:.3}.section-header{flex-direction:column;align-items:flex-start;gap:1rem}.section-line{display:none}.footer{padding:2rem 1.25rem}.footer-content{flex-direction:column;text-align:center}}.page-enter-active,.page-leave-active{transition:all .4s var(--ease-out-expo)}.page-enter-from{opacity:0;transform:translateY(20px)}.page-leave-to{opacity:0;transform:translateY(-20px)}.project-detail{min-height:100vh;padding-top:80px;background:var(--cream)}.project-detail-container{max-width:100%;padding:1.5rem 4rem 4rem}.back-link{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.75rem;color:var(--gray);text-decoration:none;margin-bottom:2rem;padding:.5rem 1rem;border:2px solid transparent;border-radius:100px;transition:all .3s var(--ease-out-expo)}.back-link:hover{color:var(--dark);border-color:var(--dark);background:#fff}.back-link svg{transition:transform .3s var(--ease-out-expo)}.back-link:hover svg{transform:translate(-4px)}.project-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;align-items:start}.project-visual{position:sticky;top:120px}.project-detail-image{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 4px 6px #0000000d,0 20px 50px #0000001f;transition:transform .5s var(--ease-out-expo),box-shadow .5s var(--ease-out-expo)}.project-detail-image:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:3px solid var(--dark);border-radius:24px;pointer-events:none;z-index:2}.project-detail-image:hover{transform:translateY(-8px);box-shadow:0 8px 12px #00000014,0 30px 60px #0000002e}.project-detail-image img{width:100%;height:auto;display:block}.project-content{padding-top:1rem}.project-detail-tag{display:inline-block;font-family:var(--font-mono);font-size:.65rem;font-weight:700;color:var(--coral);text-transform:uppercase;letter-spacing:.12em;margin-bottom:1rem;padding:.4rem .8rem;background:#fff;border:2px solid var(--coral);border-radius:6px}.project-detail-title{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.5rem);font-weight:800;line-height:1.1;margin-bottom:1rem;color:var(--dark)}.project-detail-title .highlight{color:var(--blue-electric);position:relative}.project-detail-title .highlight:after{content:"";position:absolute;bottom:.05em;left:0;right:0;height:.12em;background:var(--yellow);z-index:-1}.project-detail-description{font-family:var(--font-mono);font-size:.85rem;line-height:1.8;color:var(--gray);margin-bottom:2rem}.project-tech-section{margin-bottom:2rem}.project-tech-section h4{font-family:var(--font-display);font-size:.75rem;font-weight:700;color:var(--dark);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem;display:flex;align-items:center;gap:.75rem}.project-tech-section h4:after{content:"";flex:1;height:2px;background:linear-gradient(90deg,var(--dark) 0%,transparent 100%)}.project-tech-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.75rem}.project-tech-card{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem .75rem;background:#fff;border:2px solid var(--dark);border-radius:12px;transition:all .3s var(--ease-out-expo);cursor:default}.project-tech-card:hover{background:var(--dark);transform:translateY(-4px);box-shadow:0 12px 24px #1a1a2e33}.project-tech-card:hover .tech-name{color:#fff}.project-tech-card img{width:32px;height:32px;object-fit:contain;transition:transform .3s var(--ease-out-expo)}.project-tech-card:hover img{transform:scale(1.15)}.tech-name{font-family:var(--font-mono);font-size:.7rem;font-weight:600;color:var(--dark);text-align:center;transition:color .3s ease}.project-link-section{padding-top:1rem}.project-link{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1.5rem;background:var(--blue-electric);color:#fff;font-family:var(--font-mono);font-size:.8rem;font-weight:600;text-decoration:none;border-radius:100px;border:2px solid var(--blue-electric);transition:all .4s var(--ease-out-expo)}.project-link:hover{background:transparent;color:var(--blue-electric);transform:translate(8px)}.project-link svg{transition:transform .3s var(--ease-out-expo)}.project-link:hover svg{transform:translate(4px,-4px)}.project-decor{position:absolute;width:200px;height:200px;background:var(--yellow);border-radius:50%;opacity:.3;filter:blur(80px);pointer-events:none;z-index:-1}@media (max-width: 1024px){.project-layout{grid-template-columns:1fr;gap:3rem}.project-visual{position:relative;top:0}.project-detail-container{padding:2rem 2rem 4rem}}@media (max-width: 768px){.project-detail{padding-top:80px}.project-detail-container{padding:1.5rem 1.5rem 3rem}.project-tech-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.project-tech-card{padding:1rem .75rem}.project-tech-card img{width:32px;height:32px}.tech-name{font-size:.7rem}.back-link{margin-bottom:2rem}}