*{box-sizing:border-box;margin:0;padding:0}:root{--brand-blue:#38bdf8;--brand-purple:#8b5cf6;--bg-dark:#0f172a;--bg-card:#1e293b66;--text-main:#cbd5e1;--text-bright:#fff}html{scroll-behavior:smooth;scroll-padding-top:90px}body{background-color:var(--bg-dark);color:var(--text-bright);margin:0;font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6;overflow-x:hidden}.hero-bg{z-index:-2;pointer-events:none;position:fixed;inset:0;overflow:hidden}.glow{filter:blur(110px);opacity:.25;will-change:transform;border-radius:50%;width:42vw;height:42vw;transition:transform .15s linear;position:absolute}.glow1{background:radial-gradient(circle,#38bdf852 0%,#0000 70%);top:-10vh;left:-10vw}.glow2{background:radial-gradient(circle,#8b5cf647 0%,#0000 70%);bottom:-12vh;right:-10vw}nav{z-index:1000;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-sizing:border-box;background:#0f172ad9;border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;width:100%;padding:15px 8%;display:flex;position:fixed;top:0}.logo-link{align-items:center;gap:12px;text-decoration:none;display:flex}.logo-text-wrapper{flex-direction:column;justify-content:center;line-height:1.2;display:flex}.main-logo{color:var(--brand-blue);letter-spacing:-.5px;font-size:1.6rem;font-weight:800}.sub-logo{color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;font-size:.7rem;font-weight:400}.nav-logo-img{width:auto;height:45px}.nav-links{gap:25px;margin:0;padding:0;list-style:none;display:flex}.nav-links a{color:var(--text-main);font-size:1rem;font-weight:500;text-decoration:none;transition:color .3s}.nav-links a:hover{color:var(--brand-blue)}.hamburger{cursor:pointer;z-index:1100;display:none}.hamburger .line{background-color:var(--text-bright);width:25px;height:3px;margin:5px;transition:all .3s}header{text-align:center;perspective:1200px;justify-content:center;padding:150px 20px 40px;display:flex}.hero-card{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);max-width:950px;transform-style:preserve-3d;will-change:transform;background:linear-gradient(145deg,#ffffff0d,#ffffff05);border:1px solid #ffffff14;border-radius:32px;padding:40px 50px;transition:transform .2s,box-shadow .3s;position:relative;overflow:hidden;box-shadow:0 25px 50px -12px #0000008c,inset 0 0 0 1px #ffffff08}.hero-card:hover{box-shadow:0 35px 70px -18px #000000a6,inset 0 0 0 1px #ffffff0d}h1{margin:0;font-size:3.5rem;font-weight:800}.hero-tagline{color:#94a3b8;margin:5px 0 15px;font-size:1.4rem}.hero-description{color:var(--text-main);margin-bottom:30px;font-size:1.1rem}.hero-description strong{color:var(--brand-blue)}section{background:var(--bg-card);border:1px solid #ffffff0d;border-radius:32px;width:min(1100px,100% - 32px);margin:40px auto;padding:40px 24px}.hero-shine{pointer-events:none;background:linear-gradient(120deg,#ffffff1a 0%,#ffffff08 25%,#0000 45%);position:absolute;inset:0;transform:translateZ(30px)}.hero-card h1,.hero-tagline,.hero-description,.hero-btns{z-index:2;position:relative;transform:translateZ(30px)}h2{color:var(--brand-blue);border-left:5px solid var(--brand-purple);margin:0 0 40px;padding-left:20px;font-size:2.2rem}.project-card ul{margin-top:16px;padding-left:22px}.project-card li{color:var(--text-main);margin-bottom:10px}.project-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:25px;display:grid}.project-card{background:#1e293b;border-radius:20px;padding:30px;transition:all .3s}.project-card:hover{border-color:#38bdf84d;transform:translateY(-8px)}#experience .project-card{margin-bottom:15px}#experience .project-card:last-child{margin-bottom:0}#skills{text-align:left}.skills-container{flex-wrap:wrap;justify-content:center;gap:20px;margin-top:35px;display:flex}.skill-item{text-align:left;background:#1e293bb3;border:1px solid #38bdf826;border-radius:18px;flex:calc(33.333% - 30px);min-width:280px;max-width:340px;padding:25px;transition:all .3s}.skill-item:hover{border-color:var(--brand-blue);transform:scale(1.02)}.skill-item strong{color:var(--brand-blue);margin-bottom:12px;font-size:1.15rem;display:block}.hero-btns{flex-wrap:wrap;justify-content:center;gap:20px;display:flex}.btn{border-radius:12px;justify-content:center;align-items:center;min-width:200px;padding:14px 32px;font-weight:700;text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s;display:inline-flex}.btn:not(.btn-alt){background:linear-gradient(135deg, var(--brand-blue), var(--brand-purple));color:#fff;box-shadow:0 12px 30px #38bdf82e}.btn-alt{border:2px solid var(--brand-blue);color:var(--brand-blue);background:#ffffff05}.btn:hover{transform:translateY(-3px)}footer{text-align:center;color:#64748b;padding:60px 20px;font-size:.9rem}------------------------------------------------------------ .project-card,.skill-item,.contact-form,section{transition:transform .25s,border-color .25s,box-shadow .25s}------------------------------------------------------------ #contact{background:var(--bg-card);text-align:center;border:1px solid #ffffff0d;border-radius:32px;flex-direction:column;align-items:center;width:min(980px,100% - 32px);margin:40px auto;padding:50px 24px 36px;display:flex}.contact-header{text-align:left;width:100%;max-width:900px;margin:0 auto 36px}.contact-header h2{letter-spacing:3px;border-left:none;margin-bottom:10px;padding-left:0;font-family:Courier New,Courier,monospace}.contact-subtitle{text-align:center;color:#94a3b8;font-size:1.5rem;font-style:bold italic;font-weight:500}.contact-form{background:#0f172a99;border:1px solid #ffffff0d;border-radius:20px;width:100%;max-width:860px;margin:0 auto;padding:34px}.input-group{margin-bottom:20px}.contact-form input,.contact-form textarea{color:#fff;box-sizing:border-box;background:#111827;border:1px solid #1e293b;border-radius:8px;width:100%;padding:15px;font-family:inherit;transition:all .3s}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--brand-blue);background:#0f172a;outline:none}.transmit-btn{color:#000;letter-spacing:2px;cursor:pointer;background:#fff;border:none;border-radius:8px;width:100%;margin-top:10px;padding:18px;font-weight:800;transition:all .4s;box-shadow:0 0 10px #fff3}.transmit-btn:hover{background:#f8fafc;transform:translateY(-2px);box-shadow:0 0 25px #fff9}.social-footer{flex-direction:column;align-items:center;gap:14px;width:100%;margin-top:24px;display:flex}.social-label{color:#64748b;letter-spacing:2px;opacity:.8;font-family:Courier New,Courier,monospace;font-size:.85rem}.social-links{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.social-btn{color:var(--brand-blue);background:#0f172a66;border:1px solid #38bdf84d;border-radius:6px;padding:10px 25px;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .3s}.social-btn:hover{border-color:var(--brand-blue);color:#fff;background:#38bdf81a;transform:translateY(-3px);box-shadow:0 0 15px #38bdf84d}@media screen and (width<=960px){.hamburger{display:block}.nav-links{z-index:1050;background:#0f172afa;flex-direction:column;justify-content:center;align-items:center;width:75%;height:100vh;transition:transform .4s;position:fixed;top:0;right:0;transform:translate(100%)}.nav-links.nav-active{transform:translate(0)}.nav-links li{margin:25px 0}.toggle .line:first-child{transform:rotate(-45deg)translate(-5px,6px)}.toggle .line:nth-child(2){opacity:0}.toggle .line:nth-child(3){transform:rotate(45deg)translate(-5px,-6px)}h1{font-size:2.5rem}section{border-radius:24px;width:calc(100% - 24px);margin:20px auto;padding:28px 18px}.project-card{padding:24px 20px}h2{margin-bottom:28px;padding-left:16px;font-size:1.9rem}--------------------------------------------- .glow{filter:blur(90px);opacity:.28;width:55vw;height:55vw}header{padding:130px 14px 24px}.hero-card{border-radius:24px;padding:28px 20px;transform:none!important}.hero-card h1,.hero-tagline,.hero-description,.hero-btns,.hero-shine{transform:none}----------------------------------------------- #contact{border-radius:24px;width:calc(100% - 24px);margin:20px auto;padding:28px 18px 24px}.contact-header{max-width:100%;margin-bottom:24px}.contact-form{border-radius:18px;max-width:100%;padding:20px 16px}.social-footer{gap:12px;margin-top:20px}------------------------------------------------ .success-message{color:#22c55e;margin-top:20px;font-weight:600}.error-message{color:#ef4444;margin-top:20px;font-weight:600}.transmit-btn:disabled{opacity:.7;cursor:not-allowed}----------------------------------------------------- .animated-bg{z-index:-3;background:linear-gradient(-45deg,#020617,#0f172a,#111827,#1e1b4b,#0c4a6e) 0 0/400% 400%;animation:18s infinite gradientShift;position:fixed;inset:0}@keyframes gradientShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}}
