@import "https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&display=swap";@import "https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{background:radial-gradient(circle,#fff 0%,#d0d0d0 25%,#9d9d9d 50%,#646464 70%,#292929 90%,#000 100%);min-height:100vh;margin:0}.header{z-index:1000;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#14141466;border:1px solid #ffffff1a;border-radius:30px;justify-content:space-between;align-items:center;width:85%;padding:14px 30px;transition:all .4s;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%)}.header.scroll{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#0f0f0fbf}.logo h1{color:#ddd;letter-spacing:2px;font-size:24px;font-weight:600}.logo h1 span{color:#777}ul{gap:30px;list-style:none;display:flex}.links li a{color:#ccc;font-size:17px;font-weight:500;text-decoration:none;transition:all .3s}.links li a:hover{color:#777;text-shadow:0 0 8px #777777b3}.icons{gap:18px;display:flex}.icons li{font-size:22px;transition:all .3s}.icons li a{color:#ccc;text-decoration:none}.icons li a:hover{color:#777;text-shadow:0 0 8px #777c;transform:scale(1.15)}html{scroll-behavior:smooth}@keyframes svg-beam-travel{0%{stroke-dashoffset:100px}to{stroke-dashoffset:0}}.status-li{justify-content:center;align-items:center;width:50px;height:22px;margin-left:5px;display:flex;position:relative}.status-avatar-wrapper{z-index:10;justify-content:center;align-items:center;width:55px;height:55px;animation:3.5s ease-in-out infinite float-3d-large;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.status-avatar{object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 4px 10px #fff3);width:100%;height:100%}.fallback-avatar{color:#888;text-transform:uppercase;background:#222;border:2px solid #555;border-radius:50%;justify-content:center;align-items:center;width:35px;height:35px;font-size:12px;display:flex}.scribble-container{pointer-events:none;opacity:0;z-index:20;color:#8a8a8a;flex-direction:column;align-items:flex-start;transition:all .5s cubic-bezier(.175,.885,.32,1.275);display:flex;position:absolute;top:50px;left:-90px;transform:translateY(-15px)}.status-li:hover .scribble-container{opacity:1;transform:translateY(0)}.scribble-text{white-space:nowrap;font-family:Caveat,cursive;font-size:22px;transform:rotate(-3deg)}.scribble-arrow{margin-top:-15px;margin-left:55px}@keyframes float-3d-large{0%,to{transform:translate(-50%,-50%)translateY(0)rotate(0)}50%{transform:translate(-50%,-50%)translateY(12px)rotate(2deg)}}.hero{width:100%;height:100vh;position:relative;overflow:hidden}.buttn{gap:20px;display:flex;position:absolute;top:85%;left:20%;transform:translate(-50%,-50%)}.buttn a{color:#2b2929;border:2px solid #373737;border-radius:8px;padding:12px 30px;font-size:16px;font-weight:600;text-decoration:none;transition:all .3s}.buttn a:hover{color:#fff;background:#777;transform:translateY(-3px);box-shadow:0 8px 20px #0003}.hero-text{position:absolute;top:50%;left:5%;transform:translate(5%,-50%)}.hero-text h1{color:#ffffff4d;letter-spacing:5px;font-family:Poppins,sans-serif;font-size:170px;font-weight:100}.reveal{opacity:0;transition:all .6s;transform:translateY(40px)}.reveal.active{opacity:1;transform:translateY(0)}.about{max-width:1200px;margin:70px auto;padding:40px}.content{justify-content:center;align-items:flex-start;gap:80px;display:flex}.photo-section{flex-direction:column;align-items:center;gap:20px;display:flex}.photo-card{perspective:1000px;cursor:pointer;width:320px;height:420px}.photo-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s;position:relative}.photo-inner.flip{transform:rotateY(180deg)}.photo-front{backface-visibility:hidden;width:100%;height:100%;position:absolute}.photo-front img{object-fit:cover;filter:grayscale(20%);border-radius:12px;width:100%;height:100%;transition:all .4s;box-shadow:0 20px 50px #0009}.photo-back{backface-visibility:hidden;width:100%;height:100%;position:absolute;transform:rotateY(180deg)}.photo-back img{object-fit:fit;border-radius:12px;width:100%;height:100%;box-shadow:0 20px 50px #0009}.photo-card:hover img{transform:scale(1.05)}.text-about{max-width:520px}.text-about p{color:#333;text-align:left;font-size:18px;line-height:1.9}#about{scroll-margin-top:40px}.spotify-card{background:#00000008;border:1px solid #00000014;border-radius:12px;align-items:center;gap:12px;width:320px;padding:12px;transition:all .3s;display:flex}.spotify-card:hover{background:#0000000f}.spotify-visual{flex-shrink:0;width:45px;height:45px;position:relative}.spotify-visual img{object-fit:cover;border-radius:6px;width:100%;height:100%;transition:all .5s}.spotify-visual img.playing{border:2px solid #1db954;border-radius:50%;animation:8s linear infinite rotate-s}.spotify-details{flex-direction:column;display:flex;overflow:hidden}.spotify-status-label{color:#1db954;font-family:Caveat,cursive;font-size:14px}.spotify-song{color:#333;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:14px;font-weight:600;overflow:hidden}.spotify-artist{color:#777;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:12px;overflow:hidden}@keyframes rotate-s{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.hero-content{flex-direction:column;align-items:flex-start;margin-top:10px;display:flex}.hero-name{color:#555;margin-bottom:10px;font-family:Caveat,cursive;font-size:32px}.hero-title{color:#222;text-align:left;margin:0 0 25px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:44px;font-weight:700;line-height:1.2}.text-about p.hero-description{color:#555;margin-bottom:35px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:17px;line-height:1.7}.hero-buttons{align-items:center;gap:25px;display:flex}.btn-primary{color:#fff;cursor:pointer;background-color:#3b3b3b;border:none;border-radius:8px;padding:12px 24px;font-size:15px;font-weight:600;transition:background-color .3s}.btn-primary:hover{background-color:#1a1a1a}.btn-secondary{color:#333;cursor:pointer;background-color:#0000;border:none;padding:10px 0;font-size:15px;font-weight:600;transition:color .3s}.btn-secondary:hover{color:#000}.hero-roles{color:#888;letter-spacing:1px;margin-top:8px;font-family:monospace;font-size:18px}.hero-roles:after{content:"|";margin-left:5px;animation:1s infinite blink}@keyframes blink{0%,50%,to{opacity:1}25%,75%{opacity:0}}.skills{text-align:center;margin-top:120px}.skills h3{color:#555;margin-bottom:40px;font-size:30px}.skills-slider{width:100%;overflow:hidden}.skills-track{color:#444;align-items:center;gap:70px;width:max-content;font-size:55px;animation:20s linear infinite scrollSkills;display:flex}.skills-track svg{transition:all .3s}.skills-track svg:hover{color:#000;transform:scale(1.2)}@keyframes scrollSkills{0%{transform:translate(0)}to{transform:translate(-50%)}}.skill{color:#444;flex-direction:column;align-items:center;font-size:55px;display:flex}.skill p{color:#666;margin-top:8px;font-size:14px}.project{max-width:1200px;margin:70px auto;padding:40px}.projects-container{grid-template-columns:repeat(3,1fr);gap:30px;display:grid}.project-card{z-index:1;background:#ffffff0d;border-radius:15px;transition:all .35s;position:relative;box-shadow:0 8px 25px #0006}.project-card:hover{z-index:50;transform:translateY(-10px);box-shadow:0 20px 40px #00000026}.project-card img{object-fit:cover;border-top-left-radius:15px;border-top-right-radius:15px;width:100%;height:180px;transition:all .4s}.project-card:hover img{transform:scale(1.05)}.project-card h3{color:#333;margin:15px;font-size:20px}.project-card p{color:#666;margin:0 15px 15px;font-size:14px;line-height:1.5}.skills{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;margin-bottom:12px;display:flex}.skills a{color:#fff;background:#222;border-radius:20px;padding:5px 12px;font-size:12px;text-decoration:none;transition:all .3s}.skills a:hover{background:#555}.btns{justify-content:center;gap:12px;padding-bottom:18px;display:flex}.btn{color:#333;border:1px solid #333;border-radius:25px;padding:7px 16px;font-size:13px;text-decoration:none;transition:all .3s}.btn:hover{color:#fff;background:#333}#project{scroll-margin-top:40px}.services{max-width:1200px;margin:70px auto;padding:40px}.title{color:#625f5f;text-align:center;margin-bottom:70px;font-size:42px;position:relative}.title:after{content:"";background:#3e3e3e;border-radius:2px;width:120px;height:3px;margin:15px auto 0;display:block}.services-container{justify-content:center;gap:40px;margin-top:140px;display:flex}.service-card{text-align:center;border-radius:12px;width:300px;padding:40px;transition:all .3s;box-shadow:0 10px 30px #0000001a}.service-card:hover{background:#c0c7cf;transform:translateY(-10px);box-shadow:0 20px 40px #0003}.service-icon{color:#555;margin-bottom:20px;font-size:45px}.service-card h3{color:#3f3e3e;margin-bottom:15px}.service-card p{color:#343232;line-height:1.6}#serv{scroll-margin-top:40px}.contact{max-width:1200px;margin:100px auto;padding:40px}.title{text-align:center;color:#393838;margin-bottom:60px;font-size:40px}.title:after{content:"";background:#777;width:100px;height:3px;margin:15px auto;display:block}.contact-container{justify-content:space-between;gap:80px;display:flex}.contact-info{max-width:400px}.contact-info h3{color:#202020;margin-bottom:20px;font-size:28px}.contact-info p{color:#242424;margin-bottom:30px}.info-item{color:#232222;align-items:center;gap:15px;margin-bottom:20px;font-size:16px;display:flex}.contact-icon{color:#777;font-size:22px;transition:all .3s;animation:3s ease-in-out infinite iconFloat}.info-item:hover .contact-icon{color:#000;transform:scale(1.3)}@keyframes iconFloat{0%{transform:translateY(0)}50%{transform:translateY(-6px)}to{transform:translateY(0)}}.contact-form{flex-direction:column;gap:20px;width:100%;max-width:500px;display:flex}.contact-form input,.contact-form textarea{color:#fff;background-color:#202020;border:1px solid #837d7d;border-radius:8px;outline:none;padding:14px;font-size:16px}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#aaa}.contact-form button{color:#fff;cursor:pointer;background:#777;border:none;border-radius:8px;padding:14px;font-size:16px;transition:all .3s}.contact-form button:hover{background:#444;transform:translateY(-3px)}#contact{scroll-margin-top:40px}.footer{color:#aaa;background:#111;margin-top:-30px;padding:20px 0}.footer-container{justify-content:space-between;align-items:center;max-width:1200px;margin:auto;display:flex}.social-icons{gap:20px;display:flex}.social-icons a{color:#aaa;font-size:22px;transition:all .3s}.social-icons a:hover{color:#fff;transform:translateY(-4px)scale(1.2)}