:root{--bg:#0f172a;--card:#071023;--muted:#9aa4bf;--text:#e6eef8;--accent:#38bdf8;--glass:#ffffff0a;--radius:12px;--container:1100px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(1200px 600px at 10% 10%, #38bdf80f, transparent), var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}.navbar{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:50;background:linear-gradient(#02061799,#02061766);justify-content:space-between;align-items:center;gap:1rem;padding:1rem 2rem;transition:padding .28s cubic-bezier(.2,.9,.2,1),box-shadow .28s,-webkit-backdrop-filter .28s,backdrop-filter .28s;display:flex;position:sticky;top:0}.navbar .brand{letter-spacing:.6px;flex:none;margin:0;font-weight:700;line-height:0;transition:transform .28s,font-size .28s}.brand-link{border-radius:10px;align-items:center;text-decoration:none;transition:transform .22s;display:inline-flex}.brand-link:hover{transform:translateY(-1px)scale(1.03)}.brand-link:focus-visible{outline-offset:6px;outline:3px solid #38bdf859}.brand-logo{filter:drop-shadow(0 0 1px #ffffffe6)drop-shadow(0 6px 16px #38bdf847);width:auto;height:42px;transition:height .28s cubic-bezier(.2,.9,.2,1);display:block}.navbar ul{gap:1rem;margin:0;padding:0;list-style:none;display:flex}.navbar a{color:var(--text);border-radius:8px;padding:6px 10px;text-decoration:none;transition:all .22s}.navbar a:hover,.navbar a:focus{background:var(--glass);outline:none;transform:translateY(-2px)}.navbar a.active{background:linear-gradient(90deg,#38bdf81f,#6366f112);box-shadow:0 6px 18px #02061799}.navbar--shrink{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:.5rem 1.25rem;box-shadow:0 6px 20px #02061773}.navbar--shrink .brand-logo{height:32px}.navbar--shrink a{border-radius:6px;padding:4px 8px}.navbar--shrink .brand,.navbar--shrink ul li a{line-height:1.1}.nav-end{align-items:center;margin-left:.6rem;display:flex}.lang-toggle{width:40px;height:40px;color:var(--text);cursor:pointer;background:0 0;border:1px solid #ffffff0a;border-radius:10px;place-items:center;padding:0;font-size:18px;display:inline-grid;position:relative}.lang-toggle:focus{outline-offset:4px;outline:3px solid #38bdf824}.lang-toggle .flag-main{display:block}.nav-end{position:relative}.lang-popup{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;background:linear-gradient(#030712fa,#030712eb);border:1px solid #ffffff08;border-radius:14px;align-items:center;gap:14px;padding:10px 14px;transition:opacity .18s,transform .18s;display:flex;position:absolute;top:calc(100% + 12px);right:0;transform:translateY(-6px)scale(.98);box-shadow:0 18px 50px #02061799}.nav-end:focus-within .lang-popup,.nav-end:hover .lang-popup{opacity:1;pointer-events:auto;transform:translateY(0)scale(1)}.nav-scroll{flex:auto;justify-content:center;align-items:center;gap:1rem;display:flex}.nav-scroll ul{flex:none;gap:1rem;margin:0;padding:0;list-style:none;display:flex}.nav-scroll .nav-end{flex:none}.nav-scroll::-webkit-scrollbar{display:none}.nav-scroll a{scroll-snap-align:center}@media (max-width:760px){.navbar{padding:.6rem .9rem}.brand{flex:none;margin-left:8px}.brand-logo{height:34px}.navbar--shrink .brand-logo{height:28px}.nav-scroll{-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;justify-content:flex-start;gap:.5rem;overflow-x:auto}.nav-scroll ul{gap:.6rem}}.lang-option{cursor:pointer;background:0 0;border:0;border-radius:10px;justify-content:center;align-items:center;padding:6px;display:flex}.lang-option:focus{outline-offset:6px;outline:3px solid #38bdf824}.big-flag{font-size:34px;line-height:1;display:block}.swap-symbol{color:#fff9;font-size:20px}@media (max-width:520px){.lang-popup{justify-content:center;gap:10px;left:6px;right:6px}.big-flag{font-size:28px}.swap-symbol{font-size:18px}}@media (prefers-reduced-motion:reduce){.lang-popup{transition:none;transform:none}}.title-gradient{background:linear-gradient(90deg,#60a5fa,#a78bfa 60%);color:#0000;-webkit-background-clip:text;background-clip:text;font-weight:800}@media (prefers-reduced-motion:reduce){.lang-toggle{transition:none}}.hero{background-image:url(/Bg_picture.jpg);background-position:50%;background-size:cover;background-attachment:fixed;justify-content:center;align-items:center;min-height:100vh;padding:4rem 1rem;display:flex;position:relative}.hero:before{content:"";pointer-events:none;z-index:0;background:#0f172ab5;position:absolute;inset:0}.hero:after{content:"";background:linear-gradient(transparent,var(--bg));pointer-events:none;z-index:0;height:140px;position:absolute;bottom:0;left:0;right:0}.wordmark-bg{z-index:-1;pointer-events:none;opacity:.55;position:fixed;inset:0}.hero-inner{max-width:var(--container);text-align:center;z-index:1;padding:2rem;position:relative}.eyebrow{color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:.5rem;font-size:.85rem}.hero-title{margin:0 0 .5rem;font-size:clamp(2.2rem,5vw,4rem)}.name-gradient{background:linear-gradient(90deg,#60a5fa,#a78bfa 60%);color:#0000;letter-spacing:.6px;-webkit-background-clip:text;background-clip:text;font-weight:800}.animated-name{white-space:pre;vertical-align:middle;min-width:12ch;display:inline-block}.type-cursor{background:var(--text);vertical-align:middle;opacity:.95;transform-origin:50%;width:2px;height:1.02em;margin-left:8px;animation:1s step-start infinite blink;display:inline-block}@keyframes blink{0%{opacity:1}50%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.type-cursor{opacity:.8;animation:none}.animated-name{transition:none}}.hero-sub{color:var(--muted);margin:.25rem 0 1rem}.hero-desc{max-width:70ch;color:var(--muted);margin:.75rem auto 1.5rem;line-height:1.6}.hero-ctas{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;margin-top:1rem;display:flex}.btn{cursor:pointer;border:0;border-radius:10px;align-items:center;gap:.6rem;padding:.6rem 1rem;font-weight:600;text-decoration:none;display:inline-flex}.btn.primary{background:linear-gradient(90deg,var(--accent),#a78bfa);color:#021025;transition:background .22s,transform .12s,box-shadow .12s;box-shadow:0 8px 30px #6366f11f}.btn.primary:hover{background:var(--bg);color:var(--text);transform:translateY(-2px);box-shadow:0 14px 40px #02061799}.btn.primary:focus{outline-offset:4px;outline:3px solid #38bdf824}.btn.outline{color:var(--text);background:0 0;border:1px solid #ffffff0f}.icon-link{color:var(--muted);opacity:.9;border-radius:8px;place-items:center;padding:6px;display:inline-grid}.scroll-hint{margin-top:3rem;display:inline-block}.scroll-hint span{border:2px solid #ffffff1f;border-radius:14px;width:28px;height:44px;display:block;position:relative}.scroll-hint span:after{content:"";background:#fff9;border-radius:50%;width:6px;height:6px;animation:1.6s infinite scroll;position:absolute;top:8px;left:50%;transform:translate(-50%)}@keyframes scroll{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,18px)}}.section{max-width:var(--container);margin:0 auto;padding:4rem 1rem}.muted{color:var(--muted)}.skills-grid,.projects-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem;display:grid}.tabs-wrapper{margin-top:1rem}.tabs{flex-wrap:wrap;gap:.6rem;margin-bottom:1rem;display:flex}.tab{color:var(--text);cursor:pointer;background:0 0;border:1px solid #ffffff0a;border-radius:999px;padding:.5rem .9rem;font-weight:600;transition:transform .18s,box-shadow .18s}.tab:hover{background:var(--glass);transform:translateY(-3px)}.tab.selected{background:linear-gradient(90deg,#38bdf81f,#a78bfa0f);border-color:#6366f11f;box-shadow:0 10px 30px #02061773}.tab:focus{outline-offset:4px;outline:3px solid #38bdf824}.tab-panels{min-height:120px}.panel[hidden]{display:none}:root{--skill-card-height:150px;--skill-card-height-mobile:110px}section#skills .skills-grid .card{height:var(--skill-card-height);min-height:var(--skill-card-height);max-height:var(--skill-card-height);flex-direction:column;justify-content:space-between;padding:1rem;display:flex;overflow:hidden}@media (max-width:920px){section#skills .skills-grid .card{height:var(--skill-card-height-mobile);min-height:var(--skill-card-height-mobile);max-height:var(--skill-card-height-mobile)}}.card strong{font-size:1rem}.card .small{color:var(--muted);font-size:.85rem}.card{border-radius:var(--radius);background:linear-gradient(#ffffff05,#ffffff03);flex-direction:column;padding:0;transition:transform .35s cubic-bezier(.2,.9,.2,1),box-shadow .35s;display:flex;overflow:hidden}.card:hover{transform:translateY(-8px);box-shadow:0 20px 50px #02061799}.card-img{object-fit:cover;background:linear-gradient(135deg,#ffffff05,#ffffff03);width:100%;height:160px}.card-img.placeholder{height:160px;color:var(--muted);background:linear-gradient(135deg,#ffffff03,#ffffff05);justify-content:center;align-items:center;font-size:2rem;display:flex}.card-body{flex-direction:column;gap:.8rem;padding:1.1rem 1.2rem;display:flex}.card h3{margin:0;font-size:1.05rem}.card .muted{font-size:.95rem}.tags{flex-wrap:wrap;gap:.5rem;display:flex}.tag{color:var(--muted);background:#ffffff08;border-radius:999px;padding:4px 8px;font-size:.8rem}.card-actions{gap:.6rem;margin-top:.5rem;display:flex}.card.in-progress{filter:grayscale(.9);opacity:.6;cursor:default}.card.in-progress:hover{box-shadow:none;transform:none}.card.in-progress .card-img{filter:grayscale()}.status-badge{color:var(--muted);background:#ffffff0a;border-radius:999px;align-items:center;gap:.4rem;padding:6px 10px;font-size:.8rem;font-weight:600;display:inline-flex}.link-more{font:inherit;color:var(--accent);cursor:pointer;white-space:nowrap;background:0 0;border:0;padding:0;font-weight:600}.link-more:hover{text-decoration:underline}.link-more:focus-visible{outline-offset:2px;border-radius:4px;outline:2px solid #38bdf866}.project-modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:80;background:linear-gradient(#02061799,#02061799);place-items:center;padding:24px;display:grid;position:fixed;inset:0}.project-modal{background:linear-gradient(#ffffff05,#ffffff03);border:1px solid #ffffff08;border-radius:16px;width:100%;max-width:980px;position:relative;overflow:hidden;box-shadow:0 30px 80px #020617b3}.project-modal .modal-body{grid-template-columns:420px 1fr;align-items:start;gap:1rem;padding:20px;display:grid}.project-modal .modal-img{object-fit:cover;border:1px solid #ffffff08;border-radius:10px;width:100%;height:auto;max-height:280px}.project-carousel{border-radius:10px;display:block;position:relative;overflow:hidden}.project-carousel .carousel-track{will-change:transform;gap:12px;transition:transform .36s cubic-bezier(.2,.9,.2,1);display:flex}.project-carousel .carousel-slide{background:#02061759;flex:0 0 100%;place-items:center;min-width:100%;height:clamp(280px,60vh,480px);display:grid}.project-carousel .carousel-slide img{object-fit:contain;border-radius:10px;width:auto;max-width:100%;height:auto;max-height:100%}.project-carousel .carousel-control{z-index:2;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);background:#020617b8;border:1px solid #ffffff47;border-radius:999px;place-items:center;width:44px;height:44px;padding:0 0 3px;font-size:28px;line-height:1;transition:background .2s,border-color .2s,transform .2s;display:grid;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 4px 18px #00000080}.project-carousel .carousel-control:hover{background:var(--accent);border-color:var(--accent);color:#020617;transform:translateY(-50%)scale(1.08)}.project-carousel .carousel-control:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.project-carousel .control-prev{left:12px}.project-carousel .control-next{right:12px}.project-carousel .carousel-dots{justify-content:center;gap:8px;margin-top:10px;display:flex}.project-carousel .carousel-dots button{cursor:pointer;background:#ffffff47;border:0;border-radius:999px;width:10px;height:10px}.project-carousel .carousel-dots button[aria-pressed=true]{background:var(--accent);box-shadow:0 6px 20px #38bdf81f}.project-modal .modal-content{padding:6px 4px}.modal-close{color:var(--text);cursor:pointer;background:#ffffff05;border:0;border-radius:10px;width:36px;height:36px;font-size:18px;position:absolute;top:12px;right:12px}.modal-close:focus{outline-offset:4px;outline:3px solid #38bdf824}@media (max-width:880px){.project-modal .modal-body{grid-template-columns:1fr;gap:12px}.project-modal{max-width:680px}.project-modal .modal-img{height:auto;max-height:180px}}.contact-form{gap:.8rem;max-width:680px;display:grid}input,textarea{background:var(--card);color:var(--text);border:1px solid #ffffff08;border-radius:10px;padding:.75rem}button.btn{align-self:flex-start}.contact-grid{grid-template-columns:1fr 360px;align-items:start;gap:1.25rem;display:grid}@media (max-width:920px){.contact-grid{grid-template-columns:1fr}}.map-card{background:linear-gradient(#ffffff05,#ffffff03);border:1px solid #ffffff08;border-radius:14px;flex-direction:column;gap:.75rem;padding:1rem;display:flex}.map-wrap{aspect-ratio:16/10;border:1px solid #ffffff08;border-radius:10px;width:100%;overflow:hidden}.map-wrap iframe{border:0;width:100%;height:100%;display:block}.map-card a{color:var(--accent);text-decoration:underline}.map-and-info{align-items:stretch;gap:1rem;display:flex}.map-and-info .map-card{flex-direction:column;flex:1;min-width:320px;display:flex}.map-and-info .map-card .map-wrap{flex:1}.contact-info{background:linear-gradient(#02061799,#02061766);border:1px solid #ffffff08;border-radius:12px;flex-direction:column;justify-content:flex-start;align-self:stretch;width:300px;padding:18px;display:flex}.contact-info .info-item{border-bottom:1px solid #ffffff08;align-items:flex-start;gap:12px;padding:12px 0;display:flex}.contact-info .info-item:last-child{border-bottom:0}.info-icon{background:#ffffff05;border-radius:8px;place-items:center;width:34px;height:34px;font-size:20px;line-height:1;display:grid}.info-title{letter-spacing:1px;color:var(--text);margin-bottom:6px;font-size:.82rem;font-weight:700}.info-value{color:var(--muted);font-size:.95rem}.contact-info a{color:inherit;text-decoration:none}.contact-info a:focus{outline-offset:6px;outline:3px solid #38bdf824}.contact-photo{background:linear-gradient(#02061799,#02061766);border:1px solid #ffffff08;border-radius:12px;justify-content:center;align-self:stretch;align-items:center;width:300px;margin-top:.5rem;padding:1rem;display:flex}.contact-photo img{object-fit:cover;border:2px solid #ffffff0a;border-radius:12px;width:100%;max-width:220px;height:auto;transition:transform .35s cubic-bezier(.2,.9,.2,1),box-shadow .35s;box-shadow:0 10px 30px #02061780}.contact-photo img:hover{transform:translateY(-4px)scale(1.02);box-shadow:0 20px 50px #02061799}@media (max-width:920px){.map-and-info{flex-direction:column}.contact-info{width:100%}.contact-photo{width:100%;margin-top:1rem}.contact-photo img{max-width:180px}}@media (max-width:520px){.contact-photo img{border-radius:10px;max-width:150px}}.facepile{--face-a-size:108px;--face-b-size:88px;--overlap:calc(var(--face-b-size) * .4);justify-content:center;align-items:center;gap:0;margin-bottom:.8rem;display:flex}.facepile .face{object-fit:cover;border:5px solid #020617a6;border-radius:999px;transition:transform .28s cubic-bezier(.2,.9,.2,1),box-shadow .28s;display:block;box-shadow:0 14px 40px #020617a6}.face-a{width:var(--face-a-size);height:var(--face-a-size);margin-right:calc(var(--overlap) * -1);z-index:3}.face-b{width:var(--face-b-size);height:var(--face-b-size);z-index:1;filter:contrast(.98)}.facepile .face:hover{z-index:4;transform:scale(1.06);box-shadow:0 22px 50px #020617b3}@media (max-width:920px){.facepile{--face-a-size:92px;--face-b-size:76px}}@media (max-width:520px){.facepile{--face-a-size:76px;--face-b-size:60px;margin-bottom:.4rem}}.scroll-to-top{z-index:60;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);width:56px;height:56px;color:var(--text);opacity:0;cursor:pointer;background:linear-gradient(#ffffff05,#ffffff03);border:1px solid #ffffff0a;border-radius:999px;place-items:center;transition:all .28s cubic-bezier(.2,.9,.2,1);display:grid;position:fixed;bottom:20px;right:20px;transform:translateY(8px)scale(.96);box-shadow:0 10px 30px #02061780}.scroll-to-top.show{opacity:1;transform:translateY(0)scale(1)}.scroll-to-top:focus{outline-offset:4px;outline:3px solid #38bdf82e}.progress-ring{color:var(--accent);display:block}.progress-ring .ring-bg{stroke:#ffffff0a}.progress-ring .ring{stroke:var(--accent);stroke-linecap:round;transform-origin:50%;transition:stroke-dashoffset .18s linear;transform:rotate(-90deg)}.scroll-to-top .arrow{color:#020617e6;transition:transform .18s;transform:translateY(1px)}.scroll-to-top:hover .arrow{transform:translateY(-2px)scale(1.03)}@media (prefers-reduced-motion:reduce){.scroll-to-top,.progress-ring .ring{transition:none}}.footer{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center;background:linear-gradient(#02061799,#02061766);border-top:1px solid #ffffff08;margin-top:3rem;padding:2rem 1rem}.footer-content{max-width:var(--container);margin:0 auto}.footer-text{color:var(--muted);letter-spacing:.3px;margin:0;font-size:.95rem}.footer-brand{border-radius:12px;justify-content:center;align-items:center;margin-bottom:.9rem;transition:transform .22s;display:inline-flex}.footer-brand:hover{transform:translateY(-2px)}.footer-brand:focus-visible{outline-offset:6px;outline:3px solid #38bdf859}.footer-logo{filter:drop-shadow(0 0 1px #ffffffd9)drop-shadow(0 8px 20px #38bdf838);width:auto;height:58px;display:block}@media (max-width:520px){.footer-logo{height:48px}}@media (prefers-reduced-motion:reduce){.brand-link,.footer-brand,.brand-logo{transition:none}.brand-link:hover,.footer-brand:hover{transform:none}}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (max-width:600px){.hero-desc{max-width:90%}.card-img{height:140px}}
