:root{--theme-ink:#172033;--theme-text:#172033;--theme-muted:#596579;--theme-accent:#315efb;--theme-accent-hover:#2448c7;--theme-accent-dark:#2448c7;--theme-border:#e3e8f0;--theme-surface:#fff;--theme-soft:#f6f8fc;--theme-focus:#1749d1}*{margin:0;padding:0;text-decoration:none;list-style:none}html{scroll-behavior:smooth;scroll-padding-top:80px}body{color:var(--theme-text);background:var(--theme-surface);font-family:var(--font-poppins), sans-serif;margin:0;padding:0;line-height:1.6}a,button,[role=button]{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,[role=button]:focus-visible,.key:focus-visible{outline:3px solid var(--theme-focus);outline-offset:3px}header{isolation:isolate;z-index:1;background:linear-gradient(135deg,#f8fbff 0%,#fff 58%,#f5f7ff 100%,#fff 58%) no-repeat;width:100%;height:auto;min-height:360px;position:relative;overflow:visible}.header-container{box-sizing:border-box;justify-content:center;align-items:center;width:100%;min-height:300px;padding:100px 24px 32px;display:flex;overflow:hidden}.header-info{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;width:100%;max-width:820px;height:auto;margin:0;padding:0;display:flex}.info-title{max-width:100%;color:var(--theme-text);font-family:var(--font-poppins), sans-serif;letter-spacing:-.045em;text-align:center;overflow-wrap:anywhere;margin:0;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.18;position:relative}.info-title span{color:#2563eb;font-size:inherit}.info-title .role-title{z-index:0;color:#0000;font-size:inherit;-webkit-text-stroke:0;white-space:normal;font-weight:700;position:relative}.info-title .role-title:before{content:var(--content);color:#2563eb;visibility:visible;z-index:0;position:absolute;transform:none}.info-des{color:#526078;width:min(100%,620px);font-family:var(--font-poppins), sans-serif;text-align:center;overflow-wrap:anywhere;margin:0;font-size:1rem;font-weight:400;line-height:1.8}.mobile-resume{display:none}.illustration{-webkit-user-select:none;user-select:none;width:50%;height:100%;margin-top:80px}.illut-image{width:100%;height:100%}.image-cover{background:0 0;width:100%;height:100%;position:absolute;top:0}nav{box-sizing:border-box;z-index:9999;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffeb;border-bottom:1px solid #e2e8f0d9;justify-content:space-between;align-items:center;width:100%;height:68px;padding:0 clamp(18px,4vw,56px);display:flex;position:fixed;box-shadow:0 2px 14px #0f172a0a}.logo a{color:var(--theme-text);letter-spacing:-.04em;text-transform:uppercase;-webkit-user-select:none;user-select:none;margin-left:0;font-size:20px;font-weight:750}.nav-list{margin-right:0}.nav-item{letter-spacing:.045em;text-transform:uppercase;padding:0 12px;font-size:12px;font-weight:600;display:inline-block}.a-link{color:#354158;transition:color .16s}.a-link:hover{color:var(--theme-accent)}.resume-button{border:1px solid var(--theme-text);background:var(--theme-text);text-align:center;cursor:pointer;text-transform:capitalize;border-radius:8px;width:auto;min-width:104px;padding:10px;font-size:13px;font-weight:600;transition:background .16s,transform .16s}.resume-button:hover{background:#2d3b54;transform:translateY(-1px)}.resume-link{color:#fff;justify-content:center;align-items:center;gap:8px;display:flex}.nav-list-mobile{display:none}.menu-icons{cursor:pointer;width:20px;margin:0;display:none}.keyboard-container{z-index:999;border:1px solid var(--theme-border);background:var(--theme-surface);border-radius:12px;flex-direction:column;justify-content:center;width:min(100% - 32px,850px);max-width:850px;margin:28px auto 40px;padding:10px;display:flex;position:relative;box-shadow:0 12px 30px #0f172a12}.keyboard-row{justify-content:flex-start;align-items:center;width:100%;display:flex}.keyboard-row .key{color:#354158;cursor:pointer;-webkit-user-select:none;user-select:none;background:#f1f4f9;border:1px solid #e2e8f0;border-radius:6px;flex-direction:column;flex-grow:1;justify-content:center;align-items:center;height:30px;margin:2px;padding:10px;font-size:14px;transition:background .14s,color .14s,border-color .14s;display:flex;position:relative}.keyboard-row .key.active{background:var(--theme-accent);border-color:var(--theme-accent);color:#fff}.keyboard-row .key.backsapce-active{color:#fff;background:#c62828;border-color:#c62828}.key.space{flex-grow:8}.key.space:before{content:"Space"}.portfolio-section{z-index:0;flex-direction:column;align-items:center;width:100%;height:auto;margin-top:120px;display:flex;position:relative;overflow-x:clip}.portfolio-section:before{content:"";z-index:-1;border:2px dashed #28292b;border-radius:50px;width:270px;height:270px;position:absolute;bottom:0;right:-92px;rotate:-20deg}.portfolio-section:after{content:"";z-index:-1;background:#ec8e57de;border-radius:50px;width:270px;height:270px;position:absolute;bottom:0;right:-100px;rotate:-20deg}.portfolio-cont,.expertise-grid{grid-template-columns:repeat(2,1fr);gap:20px;width:950px;height:auto;display:grid}.project{border:1px solid var(--theme-border);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff80;border-radius:16px;flex-direction:column;align-content:center;width:calc(100% - 3rem);padding:1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden;box-shadow:0 4px 16px #0f172a0a}.project:hover{border-color:#c7d2fe;box-shadow:0 14px 34px #0f172a17}.project-title{color:var(--theme-text);letter-spacing:-.04em;margin:10px 0;font-size:clamp(28px,3.4vw,42px);font-weight:700;line-height:1.15}.project-description{color:var(--theme-muted);font-size:14px;font-weight:400;line-height:1.75}.projectinfo-languages{flex-wrap:wrap;gap:15px;margin:20px 0;display:flex}.projectinfo-languages .each-language{color:#464545;text-align:center;text-transform:uppercase;background:#f3f2f2;border-radius:20px;margin-top:-10px;padding:8px 14px;font-size:13px;font-weight:500}.project-button{background:var(--theme-accent);color:#fff;text-align:center;border-radius:8px;width:fit-content;min-width:100px;margin:10px 0;padding:10px 15px;font-size:14px;font-weight:600;transition:background .16s,transform .16s}.project-button:hover{background:var(--theme-accent-dark);opacity:1;transform:translateY(-1px)}.language-list{color:#354158;background:#f1f4f9;border-radius:8px;margin:3px;padding:2px 13px;font-size:13px;display:inline-block}.preview-image{border-radius:7px;width:100%}.about-container{flex-direction:column;align-items:center;width:100%;height:auto;margin:auto;display:flex;position:relative}.about-container:after{content:"";z-index:-1;border:1px solid #1f1f1f;border-radius:30% 70% 70% 30%/30% 30% 70% 70%;width:300px;height:300px;position:absolute;left:-147px}.about-container:before{content:"";z-index:-1;background:#f8e74f7a;border-radius:30% 70% 70% 30%/30% 30% 70% 70%;width:300px;height:300px;position:absolute;top:1%;left:-150px}.about-tab{flex-direction:column;align-items:center;width:100%;max-width:1300px;height:auto;padding:50px 0;display:flex}.about-heading,.portfolio-heading,.contact-heading{color:var(--theme-text);font-family:var(--font-poppins), sans-serif;letter-spacing:-.045em;text-align:center;margin:20px 0;font-size:clamp(30px,4vw,42px);font-weight:750;line-height:1.2;position:relative}.about-heading:before,.portfolio-heading:before,.contact-heading:before{content:"";color:#e8edf7;opacity:.9;z-index:-1;width:100%;height:100%;position:absolute;top:4px;left:0}.about-heading:before{content:"About Me"}.portfolio-heading:before{content:"Portfolio"}.contact-heading:before{content:"Contact"}.about-des{width:60%;color:var(--theme-muted);word-spacing:1px;font-size:13px;font-weight:500;line-height:1.75}.about-expertise-container{max-width:1150px;margin:4rem auto;padding:0 1.5rem;font-family:system-ui,-apple-system,sans-serif}.section-header{text-align:left;margin-bottom:2.5rem}.section-subtitle{color:var(--theme-accent);text-transform:uppercase;letter-spacing:.15em;margin-bottom:.5rem;font-size:.75rem;font-weight:700;display:block}.section-title{color:var(--theme-ink);letter-spacing:-.025em;margin:0;font-size:1.875rem;font-weight:800}.expertise-card{border:1px solid var(--theme-border);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff80;border-radius:16px;flex-direction:column;justify-content:space-between;padding:1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 4px 16px #0f172a0a}.expertise-card:hover{border-color:#c7d2fe;transform:translateY(-4px);box-shadow:0 14px 34px #0f172a17}.figma-card:hover{border-color:#ec489980}.frontend-card:hover{border-color:#f59e0b80}.api-card:hover{border-color:#4f46e580}.card-header{align-items:center;gap:.75rem;margin-bottom:1.25rem;display:flex}.card-icon{background:#eef2ff;border-radius:.75rem;padding:.5rem;font-size:1.5rem;transition:transform .2s}.expertise-card:hover .card-icon{transform:scale(1.1)}.card-main-title{color:var(--theme-ink);margin:0;font-size:1.25rem;font-weight:700;line-height:1.25}.content-block{margin-bottom:1rem}.block-label{text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem;font-size:.65rem;font-weight:700;display:block}.what-label{color:#94a3b8}.why-label{color:var(--theme-accent)}.block-text{color:var(--theme-muted);margin:0;font-size:.875rem;line-height:1.75}.why-block{border-top:1px solid var(--theme-border);margin-top:1rem;margin-bottom:0;padding-top:1rem}.italic-text{color:#64748b;font-style:italic}.social-links{grid-template-columns:repeat(4,auto);gap:5px;margin-top:20px;display:grid}.social-links *{color:#fff;text-align:center;width:120px;padding:8px 11px;font-size:14px;font-weight:500}.linkedin{background:#0a66c2}.github{background:#24292f}.whatsapp{background:#25d366}.email-link{background:#e40e06}.linkedin:hover,.github:hover,.whatsapp:hover,.email-link:hover{opacity:.7}.skill-section{background:#fff;align-items:center;width:100%;height:auto;display:flex}.skill-tab{flex-direction:column;align-items:center;width:100%;height:auto;padding:50px 0;display:flex;position:relative;overflow:hidden}.skill-tab:after{content:"";z-index:-1;border:1px dashed #1f1f1f;width:180px;height:180px;position:absolute;right:-100px;transform:rotate(100deg)}.skill-tab:before{content:"";z-index:-1;background:#98e94cbb;width:170px;height:170px;position:absolute;right:-80px;transform:rotate(100deg)}.skill-heading{color:var(--theme-muted);text-align:center;font-size:18px;font-weight:500}.skills-cont{text-align:center;grid-template-columns:repeat(4,auto);justify-content:center;gap:5px;width:50%;height:auto;margin-top:10px;display:grid}.skill-name{border:2px solid tranparent;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#000;text-align:center;cursor:pointer;background:#eeeded;border-radius:6px;width:160px;padding:10px 0;font-size:15px;font-weight:400}.skill-name:hover{color:var(--theme-accent);background:#eef2ff;border-color:#c7d2fe}.contact-container{flex-direction:column;align-items:center;width:100%;height:auto;margin-bottom:50px;display:flex;position:relative}.contact-container:before{content:"";z-index:-1;background:#9e32f5b4;border-radius:60px;width:300px;height:300px;position:absolute;bottom:20%;left:-195px;transform:rotate(20deg)}.contact-container:after{content:"";z-index:-2;background:0 0;border:2px dotted #1f1f1f;border-radius:60px;width:300px;height:300px;position:absolute;bottom:20%;left:-195px;transform:rotate(20deg)}.contact-heading{padding:0}.contact-handler{flex-direction:column;justify-content:center;align-items:center;gap:10px;width:100%;max-width:500px;display:flex}.contact-info{align-items:center;gap:10px;width:100%;display:flex}.contact-btn{border:1px solid var(--theme-border);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);width:100%;color:var(--theme-ink);cursor:pointer;background:#fff8;border-radius:12px;flex-direction:column;align-items:center;padding:10px 15px;font-size:14px;transition:border-color .16s,box-shadow .16s,transform .16s;display:flex}.contact-btn:hover{opacity:1;border-color:#b8c7ff;transform:translateY(-2px);box-shadow:0 8px 20px #0f172a0f}.contact-btn p{color:var(--theme-muted);margin:5px 0 0;font-size:12px;position:relative}.contact-btn p:before,.contact-btn p:after{content:"";background:var(--theme-border);width:30px;height:1px;position:absolute;top:50%}.contact-btn p:before{left:-35px}.contact-btn p:after{right:-35px}.footer-social-links{grid-template-columns:repeat(4,1fr);gap:10px;width:100%;display:grid}.footer-social-links a{border:1px solid var(--theme-border);background:var(--theme-soft);color:#334155;text-align:center;border-radius:10px;width:100%;padding:30px 0;transition:background .16s,color .16s}.footer-social-links a:hover{color:var(--theme-accent-dark);background:#e9eeff}@media print{.expertise-card{page-break-inside:avoid;box-shadow:none!important;border:1px solid #000!important;transform:none!important}}@media screen and (max-width:1050px){.portfolio-cont,.expertise-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:90%}.skills-cont{grid-template-columns:repeat(3,auto);width:80%}}@media screen and (max-width:900px){.skills-cont{grid-template-columns:repeat(2,minmax(0,1fr));width:90%}.keyboard-container{max-width:700px}}@media screen and (max-width:768px){nav{height:58px;padding:0 20px}.logo a{margin-left:0}.nav-list{display:none}.menu-icons{display:block}.nav-list-mobile{box-sizing:border-box;z-index:9999;background:#fff;width:100%;height:100vh;padding:24px;display:block;position:absolute;top:0;left:0}.close-menu{width:20px;position:absolute;top:20px;right:30px}.nav-item-mobile{text-align:center;text-transform:uppercase;padding:10px}.nav-item-mobile:nth-child(2){margin-top:70px}.resume-button{margin-top:25px;position:absolute;left:50%;transform:translate(-50%,-50%)}.resume-button:hover{transform:translate(-50%,-50%)}header{min-height:0}.header-container{min-height:0;padding:88px 22px 26px}.header-info{gap:13px;margin:0;padding:0}.info-title{letter-spacing:-.035em;font-size:clamp(1.9rem,6vw,2.7rem);line-height:1.25}.info-des{width:100%;font-size:.9rem;line-height:1.75}.mobile-resume{margin-top:6px;display:block;position:relative;top:auto;left:auto}.illustration{display:none}.portfolio-section{margin-top:100px}.portfolio-cont,.expertise-grid{grid-template-columns:minmax(0,1fr);width:min(100% - 32px,600px)}.about-des{width:min(100% - 36px,620px)}.social-links{grid-template-columns:repeat(2,minmax(0,1fr))}.social-links *{width:auto}.skills-cont{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100% - 32px,600px)}.skill-name{box-sizing:border-box;width:auto;min-width:0}.contact-handler{width:min(100% - 32px,500px)}.keyboard-container{display:none}}@media screen and (max-width:550px){header{height:450px}.header-container{height:100%;padding:82px 18px 24px}.info-title{font-size:clamp(1.8rem,8vw,2.5rem);line-height:1.25}.info-title span{height:auto;display:inline}.info-title .role-title{visibility:visible;-webkit-text-stroke:0;display:inline}.info-title .role-title:after{content:none}.info-des{font-size:.875rem}.project-title{font-size:clamp(28px,8vw,36px)}.contact-info{flex-wrap:wrap}.footer-social-links{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-social-links a{box-sizing:border-box;padding:20px 8px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.projectinfo-keyfeatures{flex-direction:column;gap:.75rem;margin:1rem 0;padding:0;list-style:none;display:flex}.each-keyfeature{color:#4a5568;padding-left:1.25rem;font-size:.85rem;line-height:1.5;position:relative}.each-keyfeature:before{content:"•";color:#3182ce;font-weight:700;position:absolute;top:0;left:0}.each-keyfeature b{color:#1a202c;font-weight:600}@media (prefers-color-scheme:dark){.each-keyfeature{color:#cbd5e1}.each-keyfeature b{color:#f8fafc}.each-keyfeature:before{color:#63b3ed}}