*{margin:0;padding:0;box-sizing:border-box}img{max-width:100%}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#fff;line-height:1.6;position:relative;min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100vh;z-index:-1;background:linear-gradient(90deg,#110f14,#2b1435,#1b1435);--dot-color: rgba(255, 255, 255, .103);--dot-size: 1.5px;--dot-spacing: 25px;background-image:radial-gradient(circle,var(--dot-color) var(--dot-size),transparent var(--dot-size)),linear-gradient(90deg,#0f0e11,#1c1435,#250c25);background-size:var(--dot-spacing) var(--dot-spacing),100% 100%;will-change:background-position}h1,h2{font-family:BBH Hegarty,sans-serif;font-weight:400;font-style:normal}header{padding:2rem;text-align:center;background:linear-gradient(90deg,#110f1410,#170b1d00,#1b143500)}header h1{font-size:3rem;margin-bottom:.5rem;text-shadow:2px 2px 4px rgba(0,0,0,.5)}header p{font-size:1.2rem;opacity:.9}nav{background:#0000;padding:1rem;top:0;z-index:100}nav ul{list-style:none;display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}nav a{color:#fff;text-decoration:none;font-weight:600;transition:all .3s ease;padding:.5rem 1rem;border-radius:5px}nav a:hover{background:#fff3;transform:translateY(-2px)}.container{max-width:1200px;margin:0 auto;padding:2rem}section{margin:3rem 0;padding:2rem;border-radius:15px}h2{font-size:2.5rem;margin-bottom:1.5rem;text-align:center;text-shadow:2px 2px 4px rgba(0,0,0,.3);border-bottom:5px dotted rgb(255,255,255);padding:10px}.about-content{display:flex;gap:3rem;align-items:center;flex-wrap:wrap;padding:1.5rem;transition:all .1s ease;position:relative;border-radius:16px;background:linear-gradient(90deg,#ff120070,#c92b081f,#af1a7a6e);background-size:cover;border:3px solid #ffffff83;margin-top:25px}.avatar{width:277px;height:277px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:4rem;box-shadow:0 8px 16px #0000004d;background:#faebd7}.avatar img{max-width:40%;position:absolute;top:-40%;z-index:2}.avatar:after{content:"";position:absolute;top:10px;left:13px;width:300px;height:300px;background:linear-gradient(135deg,#b8bdff2b,#f8c99ccc);opacity:1;transition:opacity .3s ease;pointer-events:none;border-radius:50%;filter:blur(10px)}.about-text{flex:1;min-width:300px}.about-text p.title{font-size:2.8em}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}.skill-card{padding:1.5rem;transition:all .1s ease;position:relative;transform-style:preserve-3d;perspective:1000px;background:linear-gradient(90deg,#25172c,#1b1435);border-radius:16px;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(4.5px);-webkit-backdrop-filter:blur(4.5px);border:2px solid #ffffff83;box-shadow:11px 11px #1b022700!important}.skill-card:hover{cursor:pointer}.skill-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#09002d4d,#ffc0001a);opacity:0;transition:opacity .3s ease;pointer-events:none;border-radius:10px;z-index:1}.skill-card:hover:before{opacity:1}.skill-card:after{content:"";position:absolute;top:var(--mouse-y, 50%);left:var(--mouse-x, 50%);width:85%;height:85%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(203,182,255,.199) 0%,transparent 70%);opacity:0;transition:opacity .55s ease;pointer-events:none;z-index:0}.skill-card:hover:after{opacity:1}.skill-card h3,.skill-card p{position:relative;z-index:2}.skill-card h3{margin-bottom:.5rem;font-size:1.5rem}.projects-grid,.items-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}@media(min-width:768px){.items-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.items-grid{grid-template-columns:repeat(4,1fr)}}.project-card{background:linear-gradient(90deg,#25172c,#1b1435);border-radius:10px;overflow:hidden;transition:all .1s ease;position:relative;transform-style:preserve-3d;perspective:1000px;border:2px solid #ffffff83}.project-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#ffffff4d,#ffffff0d);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:1}.project-card:hover:before{opacity:1}.project-card:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(0,0,0,.3) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:2}.project-card:hover:after{opacity:1}.project-image{width:100%;height:200px;background:linear-gradient(45deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-size:3rem}.project-info{padding:1.5rem}.project-info h3{margin-bottom:.5rem}.contact-form{max-width:600px;margin:2rem auto}.form-group{margin-bottom:1.5rem}label{display:block;margin-bottom:.5rem;font-weight:600}input,textarea{width:100%;padding:.8rem;border:none;border-radius:5px;background:#fff3;color:#fff;font-size:1rem}input::-moz-placeholder,textarea::-moz-placeholder{color:#fff9}input::placeholder,textarea::placeholder{color:#fff9}textarea{min-height:150px;resize:vertical}button{--gradient-glow-x: 100%;--gradient-glow-y: 50%;--bg-color-1: hsla(0, 0%, 100%, 0);--bg-color-2: #ff9b26;--bg-color-3: #ff0c00;--bg-color-4: #fd8925;--bg-stop-1: 100%;--bg-stop-2: 150%;background:radial-gradient(35px 80% at var(--gradient-glow-x) var(--gradient-glow-y),#fff,#ff9b26 91%),radial-gradient(5rem 80% at 100% 50%,#fff,#ff9b26 91%);color:#fff;padding:1rem 2rem;border:none;border-radius:5px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;width:100%}footer{text-align:center;padding:2rem;background:#0000004d;margin-top:3rem}@media(max-width:768px){header h1{font-size:2rem}h2{font-size:1.8rem}.about-content{flex-direction:column;text-align:center;flex-wrap:nowrap}.container{padding:0rem}.avatar img{max-width:124%;position:relative;top:0}nav ul{list-style:none;display:flex;justify-content:center;gap:0rem;flex-wrap:nowrap}nav a{padding:.5rem .7rem}.about-text{margin-top:16px;padding:12px}.about-text p.title{font-size:1.6em}}.project-detail{background:#0000001a;padding:3rem;border-radius:20px;border:1px solid rgba(255,255,255,.1)}.back-link{display:inline-block;margin-bottom:2rem;color:#b7a1ff;font-weight:600;text-decoration:none;font-size:1.1rem;transition:all .2s ease}.back-link:hover{text-decoration:underline;transform:translate(-5px)}.project-header{margin-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:2rem}.project-header h2{font-size:3.5rem;color:#fff;margin-bottom:1rem;text-align:left}.skills-tags{display:flex;gap:10px;flex-wrap:wrap}.skill-tag{padding:5px 12px;border-radius:8px;font-size:.9rem;font-weight:600;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.project-content{display:grid;gap:2rem}.detail-image img{width:100%;border-radius:12px;box-shadow:0 10px 30px #0000004d;border:1px solid rgba(255,255,255,.1)}.description p{font-size:1.1rem;line-height:1.8;color:#e0e0e0;white-space:pre-wrap}button,button#contact-btn{position:relative;overflow:hidden;--gradient-glow-x: 100%;--gradient-glow-y: 50%;--bg-color-1: hsla(0, 0%, 100%, 0);--bg-color-2: #ff9b26;--bg-color-3: #ff0c00;--bg-color-4: #fd8925;--bg-stop-1: 100%;--bg-stop-2: 150%;border-radius:10px;background:radial-gradient(5rem 80% at var(--gradient-glow-x) var(--gradient-glow-y),#fff,#ff9b26 90%),radial-gradient(5rem 80% at 100% 50%,#fff,#ff9b26 90%);transition-duration:.45s;transition-property:--gradient-glow-x,--gradient-glow-y,--bg-color-1,--bg-color-2,--bg-stop-1,--bg-stop-2,transform,box-shadow}button,button#contact-btn span{position:relative;z-index:10}button#contact-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #a15416;--bg-stop-1: -20%;--bg-stop-2: 0%}button#contact-btn:after,button#contact-btn:before{border-radius:.5rem;content:"";inset:1px;pointer-events:none;position:absolute}button#contact-btn:before{background:linear-gradient(225deg,var(--bg-color-3),var(--bg-color-4));z-index:1}@media(min-width:900px){.project-content{grid-template-columns:1fr 1fr;align-items:start}}@media(min-width:1430px){nav{position:fixed;right:2rem;top:25%;transform:translateY(-50%);background:#110f1400;padding:1.5rem;width:auto}nav ul{flex-direction:column;gap:1rem}nav a{display:block;text-align:center;width:100%;background:#3335614d}nav a.active{background:#3c24484d;transform:scale(1.05);color:#fff;border:1px solid rgb(197 179 255 / 52%);box-shadow:0 0 6px #ab48abb3}}