*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(135deg,#f5f1eb,#ede7dc);color:#2c2c2c;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:400;line-height:1.6;min-height:100vh}.navBar{display:flex;align-items:center;justify-content:space-between;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:20px 60px;position:relative;z-index:100;width:100%;box-shadow:0 2px 20px #00000014;border-bottom:1px solid rgba(255,255,255,.2);cursor:none}.navBar:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),rgba(212,165,116,.15) 0%,rgba(212,165,116,.05) 30%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .4s cubic-bezier(.4,0,.2,1);z-index:-1;border-radius:inherit}.navBar:hover:before{opacity:1}.navBar:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),rgba(212,165,116,.08) 0%,transparent 40%);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:-1;border-radius:inherit}.navBar:hover:after{opacity:1}.navBar a{text-decoration:none;color:#2c2c2c;font-weight:600;font-size:18px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}.logo-link{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:700;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative}.logo-link:hover{transform:translateY(-2px);text-shadow:0 4px 12px rgba(212,165,116,.3)}.logo-avatar{width:50px;height:50px;border-radius:12px;image-rendering:auto;border:3px solid #d4a574;box-shadow:0 8px 24px #d4a57466,0 4px 12px #00000026,0 2px 6px #0000001a,inset 0 2px 4px #fff6;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;animation:floatingMascot 4s ease-in-out infinite;object-fit:cover;background:linear-gradient(135deg,#f5f1eb,#ede7dc);filter:brightness(1.1) contrast(1.05)}@keyframes floatingMascot{0%,to{transform:translateY(0) rotate(0);box-shadow:0 8px 24px #00000026,0 4px 12px #0000001a,0 2px 6px #0000000d}50%{transform:translateY(-3px) rotate(1deg);box-shadow:0 12px 32px #0003,0 6px 16px #00000026,0 3px 8px #00000014}}.logo-avatar:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);transform:translate(-100%);transition:transform .6s cubic-bezier(.4,0,.2,1);z-index:1}.logo-avatar:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#f5f1eb,#ede7dc);border-radius:8px;z-index:-1;opacity:.8}.logo-link:hover .logo-avatar{transform:scale(1.15) rotate(8deg) translateY(-2px);box-shadow:0 12px 32px #d4a57480,0 6px 16px #0003,0 3px 8px #00000026,inset 0 2px 6px #ffffff80;filter:brightness(1.15) contrast(1.1);border-color:#c49b63;animation:none}.logo-link:hover .logo-avatar:before{transform:translate(100%)}.logo-avatar:hover{animation:boxedGlitch .4s ease-in-out}@keyframes boxedGlitch{0%,to{transform:scale(1.15) rotate(8deg) translateY(-2px);filter:brightness(1.15) contrast(1.1) hue-rotate(0deg)}25%{transform:scale(1.2) rotate(6deg) translateY(-3px) translate(2px);filter:brightness(1.25) contrast(1.15) hue-rotate(15deg) saturate(1.2)}50%{transform:scale(1.15) rotate(10deg) translateY(-1px) translate(-2px);filter:brightness(1.2) contrast(1.25) hue-rotate(-10deg) saturate(1.3)}75%{transform:scale(1.18) rotate(7deg) translateY(-2px) translate(1px);filter:brightness(1.18) contrast(1.2) hue-rotate(8deg) saturate(1.1)}}.navBar a:hover{color:#d4a574;transform:translateY(-1px)}.navBar a:after{content:"";position:absolute;width:0;height:2px;bottom:-5px;left:0;background:linear-gradient(90deg,#d4a574,#c49b63);transition:width .3s cubic-bezier(.4,0,.2,1)}.navBar a:hover:after{width:100%}.nav-links{display:flex;align-items:center;gap:30px;list-style:none;padding:0;margin:0}.nav-links li a{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:500;padding:8px 16px;border-radius:12px;transition:all .3s cubic-bezier(.4,0,.2,1)}.nav-links li a:hover{background:#d4a5741a;transform:translateY(-2px);box-shadow:0 4px 12px #d4a57433}.build-break-repeat{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:500;padding:12px 20px;border-radius:16px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.build-break-repeat:hover{background:#d4a57426;transform:translateY(-2px);box-shadow:0 6px 20px #d4a57440}.build-text{transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer}.build-text:hover{animation:wiggle .6s ease-in-out;color:#d4a574}.break-text{transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer}.break-text:hover{animation:crack .8s ease-in-out;color:#d4a574;text-shadow:0 0 10px rgba(212,165,116,.5)}.repeat-text{transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer}.repeat-text:hover{animation:bounce .6s ease-in-out;color:#d4a574}.repeat-text.spinning{animation:spinLoop 1s ease-in-out;color:#d4a574}.build-icon,.break-icon,.repeat-icon{font-size:18px;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-block}.build-break-repeat:hover .build-icon{animation:wiggle .6s ease-in-out;transform:scale(1.2)}.build-break-repeat:hover .break-icon{animation:crack .8s ease-in-out;transform:scale(1.2)}.build-break-repeat:hover .repeat-icon{animation:bounce .6s ease-in-out;transform:scale(1.2)}.arrow{font-size:18px;color:#d4a574;font-weight:700;transition:all .3s ease}.build-break-repeat:hover .arrow{transform:scale(1.1);text-shadow:0 0 8px rgba(212,165,116,.6)}@keyframes wiggle{0%,to{transform:rotate(0) scale(1)}25%{transform:rotate(-3deg) scale(1.05)}50%{transform:rotate(3deg) scale(1.1)}75%{transform:rotate(-2deg) scale(1.05)}}@keyframes crack{0%,to{transform:scale(1) rotate(0)}10%{transform:scale(1.05) rotate(-1deg)}20%{transform:scale(.98) rotate(1deg)}30%{transform:scale(1.02) rotate(-.5deg)}40%{transform:scale(.99) rotate(.5deg)}50%{transform:scale(1.01) rotate(-.3deg)}60%{transform:scale(.995) rotate(.3deg)}70%{transform:scale(1.005) rotate(-.2deg)}80%{transform:scale(.998) rotate(.2deg)}90%{transform:scale(1.002) rotate(-.1deg)}}@keyframes bounce{0%,to{transform:translateY(0) scale(1)}25%{transform:translateY(-4px) scale(1.05)}50%{transform:translateY(-8px) scale(1.1)}75%{transform:translateY(-4px) scale(1.05)}}@keyframes spinLoop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(90deg) scale(1.1)}50%{transform:rotate(180deg) scale(1.2)}75%{transform:rotate(270deg) scale(1.1)}to{transform:rotate(360deg) scale(1)}}@media (max-width: 600px){.navBar{flex-direction:column;text-align:center;gap:20px;padding:25px 20px;cursor:auto;align-items:center}.logo-link{flex-direction:column;gap:15px;font-size:20px;align-items:center;animation:fadeInUp .8s ease-out}.logo-avatar{width:40px;height:40px;animation:fadeInUp .6s ease-out;animation-delay:.2s;animation-fill-mode:both}.nav-links{flex-direction:column;gap:15px;width:100%;align-items:center}.nav-links li{width:100%;display:flex;justify-content:center}.build-break-repeat{font-size:14px;padding:12px 20px;gap:8px;line-height:1.8;animation:fadeInUp .8s ease-out;animation-delay:.4s;animation-fill-mode:both;justify-content:center;flex-wrap:wrap}.build-icon,.break-icon,.repeat-icon,.arrow{font-size:16px}.build-text,.break-text,.repeat-text{font-size:14px}}@media (min-width: 601px) and (max-width: 768px){.navBar{flex-direction:column;text-align:center;gap:15px;padding:20px;cursor:auto;align-items:center}.logo-link{font-size:22px;gap:10px}.logo-avatar{width:45px;height:45px}.build-break-repeat{font-size:16px;padding:10px 18px;gap:7px}.build-icon,.break-icon,.repeat-icon,.arrow{font-size:18px}}.hero{display:flex;justify-content:space-between;align-items:center;min-height:85vh;padding:40px 60px;width:100%;background:linear-gradient(135deg,#f5f1eb,#ede7dc)}.hero-left{width:50%;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:20px}.avatar{width:140px;height:140px;border-radius:50%;box-shadow:0 8px 32px #d4a5744d,0 4px 16px #0000001a;transition:all .4s cubic-bezier(.4,0,.2,1);border:3px solid rgba(255,255,255,.8)}.avatar:hover{transform:scale(1.05) translateY(-5px);box-shadow:0 12px 40px #d4a57466,0 8px 24px #00000026}#typing-text:after{content:"|";animation:blink .8s infinite;color:#d4a574}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.hero h1{font-size:3.5rem;font-weight:700;margin-top:20px;max-width:600px;color:#2c2c2c;line-height:1.2;letter-spacing:-.02em;background:linear-gradient(135deg,#2c2c2c,#4a4a4a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero p{font-size:1.25rem;max-width:600px;color:#6b6b6b;font-weight:400;line-height:1.7;opacity:.9;transition:all .3s ease}.hero p:hover{color:#5a5a5a;transform:translate(5px)}.hero-right{width:50%;max-height:500px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px;overflow-y:auto;padding-right:15px;padding-top:20px}.hero-right::-webkit-scrollbar{width:6px}.hero-right::-webkit-scrollbar-track{background:#d4a5741a;border-radius:3px}.hero-right::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#d4a574,#c49b63);border-radius:3px}.hero-right::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#c49b63,#b8915a)}.project-card{width:100%;height:180px;border-radius:20px;overflow:hidden;position:relative;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);background:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;color:#2c2c2c;box-shadow:0 4px 20px #00000014,0 2px 8px #d4a5741a;border:1px solid rgba(255,255,255,.3)}.project-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 12px 40px #00000026,0 8px 24px #d4a57440;border-color:#d4a5744d}.project-card img{width:100%;height:100%;object-fit:cover;border-radius:20px;transition:all .4s cubic-bezier(.4,0,.2,1)}.project-card:hover img{transform:scale(1.05)}.project-card:after{content:attr(data-title);position:absolute;bottom:15px;left:15px;right:15px;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:12px 16px;border-radius:12px;font-size:14px;font-weight:600;color:#2c2c2c;opacity:0;transform:translateY(10px);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000001a;border:1px solid rgba(212,165,116,.2)}.project-card:hover:after{opacity:1;transform:translateY(0)}@media (max-width: 768px){.hero{flex-direction:column;min-height:auto;padding:30px 20px;gap:30px}.hero-left{width:100%;align-items:center;text-align:center}.avatar{width:120px;height:120px}.hero h1{font-size:2.5rem}.hero p{font-size:1.1rem}.hero-right{width:100%;grid-template-columns:repeat(1,1fr);max-height:400px;gap:16px}.project-card{height:160px}}.footer{display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#2c2c2c,#3a3a3a);color:#f5f1eb;padding:60px 60px 40px;width:100%;box-sizing:border-box;position:relative;overflow:hidden}.footer:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#d4a574,transparent)}.footer-top{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:1200px;margin-bottom:25px}.contact-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#d4a574,#c49b63);color:#2c2c2c;font-family:Inter,sans-serif;font-weight:600;font-size:18px;padding:16px 32px;border:none;border-radius:16px;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 6px 20px #d4a5744d,0 2px 8px #0000001a;text-transform:uppercase;letter-spacing:1px;position:relative;overflow:hidden}.contact-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .6s cubic-bezier(.4,0,.2,1)}.contact-btn:hover:before{left:100%}.contact-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 32px #d4a57466,0 6px 16px #00000026}.contact-btn:active{transform:translateY(-1px) scale(1.02)}.footer-socials{display:flex;gap:20px}.social-icon{display:flex;align-items:center;justify-content:center;padding:12px;border-radius:50%;transition:all .4s cubic-bezier(.4,0,.2,1);background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.social-icon:hover{transform:translateY(-3px) scale(1.1);background:#d4a57433;box-shadow:0 8px 24px #d4a5744d,0 4px 12px #0000001a;border-color:#d4a5744d}.footer-text{font-size:18px;text-align:center;margin-bottom:20px;font-weight:500;color:#d4a574;transition:all .3s ease}.footer-text:hover{transform:scale(1.05);text-shadow:0 0 20px rgba(212,165,116,.5)}.footer-bottom{font-size:14px;text-align:center;width:100%;color:#a0a0a0;font-weight:400;transition:all .3s ease}.footer-bottom:hover{color:#d4a574}@media (max-width: 768px){.footer{padding:40px 20px 30px}.footer-top{flex-direction:column;align-items:center;gap:20px}.footer-socials{justify-content:center;gap:16px}.contact-btn{font-size:16px;padding:14px 28px}.footer-text{font-size:16px;margin-bottom:15px}}*{transition:color .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.contact-btn:focus,.social-icon:focus,.project-card:focus{outline:2px solid #d4a574;outline-offset:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.hero-left,.hero-right{animation:fadeInUp .8s cubic-bezier(.4,0,.2,1)}.hero-right{animation-delay:.2s}@media (max-width: 600px){.navBar{animation:fadeIn .6s ease-out}}