:root{--bg:#0f0f0f;--bg2:#181818;--green:#6cff52;--blue:#3ec5ff}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:#fff;font-family:Outfit,sans-serif;overflow-x:hidden}#progress-bar{background:linear-gradient(90deg, var(--green), var(--blue));transform-origin:0%;z-index:9999;width:100%;height:4px;position:fixed;top:0;left:0}#loader{z-index:99999;background:#0f0f0f;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.spinner{border:5px solid #333;border-top:5px solid var(--green);border-radius:50%;width:60px;height:60px}.gradient-text{background:linear-gradient(90deg, var(--green), var(--blue));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}::-webkit-scrollbar{background:var(--bg);width:10px}::-webkit-scrollbar-thumb{background:linear-gradient(to bottom, var(--green), var(--blue));border-radius:5px}nav{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:999;background:#0f0f0fcc;justify-content:space-between;align-items:center;width:100%;padding:1rem 8%;transition:padding .4s,background .4s,box-shadow .4s;display:flex;position:fixed;top:0}nav.scrolled{background:#1d1a1acc;padding:.5rem 8%;box-shadow:0 5px 20px #00000080}.logo{opacity:.8;font-family:Great Vibes,cursive;font-size:2rem;text-decoration:none}.logo:hover{opacity:1}.alucard{align-items:center;gap:3em;list-style:none;display:flex}.alucard a,.alucard-mobile a{color:#fff;padding-bottom:4px;font-size:1.25rem;text-decoration:none;transition:all .3s;position:relative}.alucard a:after,.alucard-mobile a:after{content:"";background:linear-gradient(90deg, var(--green), var(--blue));width:0%;height:2px;transition:all .3s;position:absolute;bottom:0;left:0}.alucard a:hover:after,.alucard-mobile a:hover:after,.alucard a.active:after,.alucard-mobile a.active:after{width:100%}.alucard-mobile{display:none}#menu{color:#fff;cursor:pointer;font-size:3rem;display:none}.tmbl{background:linear-gradient(90deg, var(--green), var(--blue));color:var(--bg);border-radius:50px;padding:.6em 1.5em;font-size:1em;font-weight:700;text-decoration:none;transition:all .3s;box-shadow:0 4px 15px #6cff5233}.tmbl:hover{color:#000;box-shadow:0 6px 20px #6cff5266}section{min-height:100vh;padding:6rem 9% 2rem}.hero{height:200vh;padding:0;position:relative;overflow:visible}.hero-inner{isolation:isolate;justify-content:center;align-items:center;height:100vh;display:flex;position:sticky;top:0;overflow:hidden}.hero-bg{z-index:0;position:absolute;inset:0;overflow:hidden}.hero-bg img{object-fit:cover;object-fit:cover;width:100%;height:100%}.hero-bg-cover{background:#0000004d;position:absolute;inset:0}.gradient-cover-top{mix-blend-mode:multiply;background:linear-gradient(#00000080,#0000);width:100%;height:40%;position:absolute;top:0;left:0}.gradient-cover-bottom{mix-blend-mode:multiply;background:linear-gradient(#0000,#000000b3);width:100%;height:50%;position:absolute;bottom:0;left:0}.hero-content{z-index:2;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.hero-text-center{text-align:center;color:#fff;max-width:54rem}.hero-greeting{letter-spacing:.15em;text-transform:uppercase;opacity:.6;margin-bottom:1.5rem;font-size:1.125rem;font-weight:300}.hero-title{letter-spacing:-.02em;margin-bottom:.75rem;font-size:5rem;font-weight:200;line-height:1.05}.hero-title i{font-style:italic;font-weight:400}.hero-role{opacity:.85;margin-bottom:1rem;font-size:1.5rem;font-weight:200}.hero-em{background:linear-gradient(90deg, var(--green), var(--blue));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-style:italic;font-weight:400}.hero-sep{opacity:.3;margin:0 .75rem;font-weight:200}.hero-location{opacity:.5;margin-bottom:2.5rem;font-size:1.125rem;font-weight:200}.hero-location .gonta-ganti{color:var(--green);font-weight:400}.hero-cta-wrapper{display:inline-flex;position:relative}.hero-cta{color:#fff;letter-spacing:.05em;text-transform:uppercase;border:1px solid #ffffff40;border-radius:50px;align-items:center;gap:.5rem;padding:.9em 2.2em;font-size:.9rem;font-weight:400;text-decoration:none;transition:all .3s;display:inline-flex;position:relative;overflow:visible}.hero-cta:hover{background:#ffffff14;border-color:#ffffff80}.wave-ring{border:1px solid #ffffff4d;border-radius:50px;animation:2.5s ease-out infinite wave-pulse;position:absolute;inset:-4px}.wave-ring-2{animation-delay:.8s}.wave-ring-3{animation-delay:1.6s}@keyframes wave-pulse{0%{opacity:0;transform:scale(1)}25%{opacity:1;transform:scale(1.08)}75%{opacity:.5;transform:scale(1.25)}to{opacity:0;transform:scale(1.35)}}.hero-description{z-index:2;opacity:.6;color:#fff;max-width:21rem;font-size:1rem;font-weight:200;line-height:1.5;position:absolute;bottom:5rem;left:3rem}.scroll-caption{z-index:2;letter-spacing:.15em;text-transform:uppercase;color:var(--green,#dfd8cf);align-items:center;gap:.25rem;font-size:.75rem;font-weight:300;display:flex;position:absolute;bottom:2.5rem;left:50%;transform:translate(-50%)}.about-section{background:#121212;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.bg-blobs{z-index:-1;pointer-events:none;position:absolute;inset:0;overflow:hidden}.blob{filter:blur(80px);opacity:.08;border-radius:50%;position:absolute}.blob-green{background:var(--green)}.blob-blue{background:var(--blue)}.blob.small{width:18rem;height:18rem}.blob.left{top:5rem;left:2.5rem}.blob.right{bottom:5rem;right:2.5rem}.about-container{flex-direction:row;align-items:center;gap:4rem;width:100%;max-width:72rem;display:flex}.about-content{flex-direction:column;flex:1;gap:2rem;display:flex}.section-title{margin-bottom:.5rem;font-size:3rem;font-weight:700;line-height:1.2}.section-title.centered{text-align:center;margin-bottom:3rem}.title-underline{background:linear-gradient(90deg, var(--green), var(--blue));border-radius:999px;width:280px;height:4px;margin-top:.75rem}.font-semibold{font-weight:600}.about-text{color:#9ca3af;font-size:1rem;line-height:1.75}.stats{gap:1.5rem;margin-top:.5rem;display:flex}.stat-item{text-align:center}.stat-value{background:linear-gradient(90deg, var(--green), var(--blue));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2rem;font-weight:800}.stat-label{color:#6b7280;margin-top:.25rem;font-size:.75rem}.about-image-wrapper{flex:1;justify-content:center;display:flex;position:relative}.about-glow{background:linear-gradient(90deg, var(--green), var(--blue));filter:blur(40px);opacity:.3;border-radius:50%;width:28rem;height:28rem;position:absolute}.about-image-border{background:linear-gradient(90deg, var(--green), var(--blue));border-radius:50%;width:25rem;height:25rem;padding:3px;position:relative;top:1rem}.about-image{object-fit:cover;border-radius:50%;width:100%;height:100%}.skills-title{margin-bottom:1rem;font-size:1.5rem;font-weight:700}.skills-grid{grid-template-columns:repeat(2,1fr);gap:.75rem;display:grid}.skill-card{cursor:default;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:.75rem;align-items:center;gap:.75rem;padding:.75rem 1rem;display:flex}.skill-icon{font-size:1.125rem}.skill-name{font-size:.875rem;font-weight:500}#project{padding-top:4rem;padding-bottom:4rem}.projects-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;max-width:72rem;margin:0 auto;display:grid}.project-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:1rem;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 10px 30px #0000004d}.project-card img{object-fit:cover;width:100%;height:12rem}.project-body{flex-direction:column;flex:1;padding:1.5rem;display:flex}.project-body h2{margin-bottom:.5rem;font-size:1.25rem;font-weight:700}.project-body p{color:#9ca3af;flex:1;margin-bottom:1rem;font-size:.875rem}.project-tags{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;display:flex}.tag{border-radius:999px;padding:.25rem .75rem;font-size:.75rem}.tag-blue{color:#60a5fa;background:#3b82f633}.tag-green{color:#4ade80;background:#22c55e33}.tag-purple{color:#c084fc;background:#a855f733}.tag-yellow{color:#facc15;background:#eab30833}.tag-red{color:#f87171;background:#ef444433}.tag-pink{color:#f472b6;background:#ec489933}.project-btn{text-align:center;color:#fff;background:linear-gradient(90deg,#212121,#212121);border-radius:.5rem;padding:.5rem;font-size:.875rem;font-weight:700;text-decoration:none;transition:all .3s;display:block}.project-btn:hover{background:linear-gradient(90deg, var(--blue), var(--green));color:#000}.contact-section{background:#121212;flex-direction:column;justify-content:center;align-items:center;padding-left:9%;padding-right:9%;display:flex}.contact-form{flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:36rem;display:flex}.field-group{flex-direction:column;align-items:flex-start;gap:.5rem;width:100%;display:flex}.field-label{opacity:.9;font-size:1rem;font-weight:600}.field-input{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:.75rem;outline:none;width:100%;padding:.75rem 1rem;font-size:1rem;transition:all .3s}.field-input::placeholder{color:#6b7280}.field-input:focus{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}.field-input.datalist{background:#232323;border:2px solid #3c3c3c;border-radius:1rem}.field-input.datalist:focus{border-color:var(--green)}textarea.field-input{resize:vertical;min-height:140px}.submit-btn{background:linear-gradient(90deg, var(--green), var(--blue));color:#000;letter-spacing:.05em;cursor:pointer;border:none;border-radius:.75rem;width:100%;margin-top:1rem;padding:1rem;font-size:1.125rem;font-weight:700;transition:all .3s}footer{background:var(--bg);padding:60px 10%}.footer-container{grid-template-columns:repeat(3,1fr);gap:40px;display:grid}.footer-col h3{margin-bottom:20px;font-size:1.5rem}.footer-col p{color:#aaa;line-height:1.6}.cbox{align-items:center;gap:10px;margin-bottom:10px;display:flex}.cbox i{color:var(--green);font-size:20px}.social-icons{gap:15px;margin-top:10px;display:flex}.social-icons a{border:2px solid var(--green);width:45px;height:45px;color:var(--green);border-radius:50%;justify-content:center;align-items:center;font-size:22px;text-decoration:none;transition:all .3s;display:flex}.social-icons a:hover{background:var(--green);color:#000;box-shadow:0 0 10px var(--green), 0 0 20px var(--green), 0 0 40px var(--green)}.footer-bottom{text-align:center;border-top:1px solid #333;margin-top:40px;padding-top:20px;font-size:14px}.scroll-top{z-index:100;cursor:pointer;display:flex;position:fixed;bottom:7.5rem;right:2rem}.scroll-top img{width:40px;height:40px}@media (width<=968px){section{padding:1rem 9%}nav .tmbl{display:none}#menu{display:block}.alucard{display:none}.alucard-mobile{text-align:center;z-index:1000;background:#000000e6;flex-direction:column;width:100%;padding:1em 3em;list-style:none;display:flex;position:absolute;top:100%;left:0}.alucard-mobile a{margin:2em 0;font-size:1.5em;display:block}.hero-title{font-size:3.5rem}.hero-role{font-size:1.25rem}.hero-description{display:none}}@media (width<=768px){.hero-title{font-size:2.75rem}.hero-greeting{margin-bottom:1rem;font-size:.875rem}.hero-role{font-size:1.1rem}.hero-location{margin-bottom:2rem;font-size:1rem}.scroll-caption{bottom:1.5rem}.hero-description{display:none}.about-container{text-align:center;flex-direction:column;gap:1rem}.about-image-wrapper{order:-1}.about-glow{width:10rem;height:10rem}.about-image-border{width:7.5rem;height:7.5rem}.stats{justify-content:center}footer{padding:40px 5%}.footer-container{text-align:center;grid-template-columns:1fr;gap:30px}.cbox,.social-icons{justify-content:center}.projects-grid{grid-template-columns:repeat(2,1fr);gap:1rem}.project-card img{height:9rem}}.carousel-container{max-width:72rem;margin:0 auto}.carousel-viewport{border-radius:1rem;overflow:hidden}.carousel-viewport .project-card{border:1px solid #ffffff1a}.carousel-viewport .project-card img{object-fit:cover;width:100%;height:12rem}.carousel-nav{justify-content:center;align-items:center;gap:1.5rem;margin-top:1.5rem;display:flex}.carousel-btn{color:#fff;cursor:pointer;background:#ffffff0d;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;transition:all .3s;display:flex}.carousel-btn:hover{border-color:var(--green);background:#ffffff1f}.carousel-dots{gap:.5rem;display:flex}.carousel-dot{cursor:pointer;background:#fff3;border:none;border-radius:50%;width:.5rem;height:.5rem;padding:0;transition:all .3s}.carousel-dot.active{background:var(--green);border-radius:999px;width:1.25rem}
