:root{--bg: #d1ebfc;--card: #f6f6f6;--text: #000000;--muted: #14191c;--accent: #a9d3f6;--accent-dark: #49a7ff;--heart: #ff7aa2;--container-width: 1100px;--radius: 14px;--shadow: 0 6px 22px rgba(16, 40, 64, .08);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}.container{max-width:var(--container-width);margin:0 auto;padding:28px}.site-header{position:fixed;top:12px;left:50%;transform:translate(-50%);width:calc(100% - 40px);max-width:1250px;background:#ffffff1f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;box-shadow:0 6px 22px #1028401f;border:1px solid rgba(0,0,0,.08);z-index:9999;transition:all .3s ease}.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1.4rem;gap:20px}.brand{display:flex;align-items:center;position:relative}.man-animation{position:relative;width:80px}.greeting-message{position:absolute;top:50%;left:110%;transform:translateY(-50%);font-size:18px;font-weight:600;color:#000;opacity:0;animation:appearSlide 2s forwards}@keyframes appearSlide{0%{opacity:0;transform:translateY(-50%) translate(-20px)}10%{opacity:1;transform:translateY(-50%) translate(0)}80%{opacity:1;transform:translateY(-50%) translate(0)}to{opacity:0;transform:translateY(-50%) translate(20px)}}.nav{display:flex;gap:12px;align-items:center}.nav-link{background:none;border:none;padding:8px 12px;cursor:pointer;color:var(--text, #8a8a8a);border-radius:10px;font-weight:600;transition:all .3s ease}.nav-link:hover{background:#4fa5ff1f}.nav-link.active{background:#4fa5ff40;color:#1e90ff}.menu-btn{display:none}@media (max-width: 768px){.nav{position:absolute;top:64px;right:16px;flex-direction:column;background:#fffffff2;padding:12px;border-radius:12px;display:none;box-shadow:var(--shadow)}.nav.open{display:flex}.menu-btn{display:block;background:transparent;border:0}}.menu-btn .bar{display:block;width:25px;height:3px;margin:5px 0;background-color:var(--text, #333);transition:all .3s ease}.home{padding:120px 20px 60px;display:flex;justify-content:center;align-items:center}.home-container{display:grid;grid-template-columns:1fr 400px;gap:50px;align-items:center;background:#fafafa1f;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:28px;padding:60px;max-width:1400px;box-shadow:0 14px 36px #7e7e7e26;position:relative}.home-left .hi{font-size:62px;margin:0;font-weight:700}.name{display:inline-block;color:#01a6ff}.letter{position:relative;display:inline-block;cursor:pointer;transition:all .3s ease;color:#01a6ff}.letter:hover{background:linear-gradient(90deg,#49a7ff,#ff7aa2);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.letter .bubble{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-10px) scale(.5);opacity:0;background:#fffefe;color:#000;font-size:18px;padding:2px 6px;border-radius:12px;white-space:nowrap;pointer-events:none;transition:all .1s ease;z-index:10;-webkit-background-clip:initial;-webkit-text-fill-color:initial}.letter:hover .bubble{transform:translate(-40%) translateY(-10px) scale(.5);opacity:1;animation:floatBubble .4s ease forwards}@keyframes floatBubble{0%{transform:translate(-50%) translateY(-10px) scale(.5);opacity:0}to{transform:translate(-50%) translateY(-20px) scale(1);opacity:1}}.role{font-size:30px;font-weight:600;background:linear-gradient(90deg,#d29d00,#720909);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:12px 0}.cursor{opacity:1;animation:blink 1s infinite}@keyframes blink{50%{opacity:0}}.domain{font-size:23px;line-height:1.6;max-width:500px;margin-bottom:20px;font-weight:500;background:linear-gradient(90deg,#d86767,#22786c,#9e5e0a,#1e4949);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:gradientShift 6s ease infinite,fadeIn 2s ease forwards;opacity:0}@keyframes fadeIn{to{opacity:1}}.domain:hover{background:linear-gradient(90deg,#136980,#e97b7b,#841466,#c81010);-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:all 1.2s ease}.home-buttons{display:flex;gap:16px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 32px;font-weight:600;border-radius:16px;cursor:pointer;transition:all .35s ease;text-decoration:none;color:#000;position:relative;overflow:hidden;z-index:1;font-size:16px;box-shadow:0 6px 15px #00000026}.chat-btn{background:linear-gradient(90deg,#49a7ff,#ff7aa2);background-size:200% 200%;animation:gradientShift 4s ease infinite;border:1px solid rgba(255,255,255,.2)}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.chat-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 10px 20px #00000040,0 0 12px #ff7aa280}.chat-btn:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:#ffffff26;transform:rotate(45deg) scale(0);transition:transform .5s ease;pointer-events:none}.chat-btn:hover:after{transform:rotate(45deg) scale(1)}.chat-btn span{text-shadow:0 1px 3px rgba(0,0,0,.25)}.profile-ring{width:280px;height:280px;border-radius:50%;background:linear-gradient(135deg,var(--accent) 0%,var(--heart) 100%);display:flex;align-items:center;justify-content:center;padding:6px;box-shadow:0 10px 25px #0003,0 0 15px #49a7ff4d,0 0 25px #ff7aa240;transition:transform .4s ease,box-shadow .4s ease}.profile-ring:hover{transform:scale(1.05);box-shadow:0 15px 35px #00000040,0 0 20px #49a7ff66,0 0 35px #ff7aa259}.profile-pic{width:100%;height:100%;object-fit:cover;border-radius:50%;background:#fff;padding:5px;box-shadow:inset 0 2px 8px #0000001a;transition:transform .3s ease,filter .3s ease}.profile-pic:hover{transform:scale(1.08);filter:brightness(1.05)}.skills-container{width:100%;max-width:1100px;background:#0000;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:28px;padding:60px;box-shadow:0 14px 36px #7e7e7e26;text-align:center}.skills-container h2{font-size:30px;margin-bottom:20px;color:#fffc;background:linear-gradient(90deg,#49a7ff,#ff7aa2,#f7c04a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:discoLight 5s linear infinite}.skill-icon{position:relative;width:80px;height:80px;border-radius:24px;background:#ffffff1f;display:flex;align-items:center;justify-content:center;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;box-shadow:0 6px 18px #0003}.skill-icon img{max-width:40px;max-height:40px}.skill-name{position:absolute;bottom:-38px;left:50%;transform:translate(-50%) translateY(0);background:#ffffff26;color:#000;padding:6px 14px;border-radius:14px;font-size:14px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.skill-icon:hover .skill-name{opacity:1;transform:translate(-50%) translateY(-10px)}.skill-icon:hover{transform:translateY(-6px) scale(1.1);box-shadow:0 12px 24px #0000004d}.skills-left-heading h2{font-size:35px;font-weight:800;margin-bottom:18px;letter-spacing:1px;text-align:left;width:100%;background:linear-gradient(90deg,#b2156e,#ba8105,#0b9b79,#4d7803,#d8318f);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:discoLight 3.5s linear infinite}.skills.section{padding:80px 20px;display:flex;justify-content:center;align-items:center}.skills-container{width:100%;max-width:1075px;background:#ffffff14;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:28px;padding:60px;box-shadow:0 14px 36px #7e7e7e26;text-align:center;position:relative}.skills-left-heading{width:100%;margin-bottom:50px;text-align:left}.skills-left-heading h2{font-size:35px;font-weight:1000;margin:0;letter-spacing:1px;background:linear-gradient(90deg,#b2156e,#ba8105,#0b9b79,#4d7803,#d8318f);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:discoLight 3.5s linear infinite}.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:37px;justify-items:center;align-items:center}.skill-icon{position:relative;width:90px;height:90px;border-radius:24px;background:#ffffff1f;display:flex;align-items:center;justify-content:center;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;box-shadow:0 6px 18px #00000040}.skill-icon img{max-width:48px;max-height:48px}.skill-name{position:absolute;bottom:-40px;left:50%;transform:translate(-50%) translateY(0);background:#ffffff26;color:#000;padding:6px 14px;border-radius:14px;font-size:14px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.skill-icon:hover .skill-name{opacity:1;transform:translate(-50%) translateY(-12px)}.skill-icon:hover{transform:translateY(-6px) scale(1.12);box-shadow:0 12px 24px #00000059}@media (max-width: 900px){.skills-grid{grid-template-columns:repeat(2,1fr);gap:28px}}.projects{padding:50px 0}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.projects-heading{font-size:35px;font-weight:800;margin-bottom:30px;letter-spacing:1px;background:linear-gradient(90deg,#b2156e,#ba8105,#0b9b79,#4d7803,#d8318f);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:discoLight 3.5s linear infinite;margin-left:61px}.project-card{background:#ffffff0f;border-radius:12px;overflow:hidden;cursor:pointer;box-shadow:0 4px 14px #00000026;transition:transform .3s ease,box-shadow .3s ease;padding:10px}.project-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 10px 24px #00000038}.project-card img{width:100%;height:160px;object-fit:cover;border-radius:10px;display:block;margin-bottom:10px;transition:transform .4s ease}.project-card:hover img{transform:scale(1.05)}.project-card .project-info{padding:6px;font-weight:700;text-align:center}.project-card .project-info h3{font-size:16px;margin-bottom:8px;transition:color .3s ease}.project-card:hover .project-info h3{color:#0af}.view-code-btn{display:inline-block;font-size:13px;padding:6px 12px;border-radius:6px;background:#83c9eb;color:#000;font-weight:600;text-decoration:none;transition:all .3s ease}.view-code-btn:hover{background:linear-gradient(90deg,#49a7ff,#ff7aa2);transform:translateY(-2px)}.modal-overlay{position:fixed;inset:0;background:#0810207a;display:flex;align-items:flex-start;justify-content:center;z-index:60;padding-top:110px;animation:fadeIn .3s ease forwards}.modal{width:min(800px,95%);background:#fff;padding:18px;border-radius:10px;position:relative;animation:slideDown .35s ease forwards}.modal-close{position:absolute;right:10px;top:8px;border:0;background:transparent;font-size:18px;cursor:pointer}.modal-video{width:100%;height:420px;background:#000;border-radius:8px;margin:10px 0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{transform:translateY(-30px);opacity:0}to{transform:translateY(0);opacity:1}}.resume{padding:56px 0}.resume-download{display:inline-block;background:linear-gradient(90deg,var(--accent-dark),var(--heart));color:#fff;padding:12px 20px;border-radius:12px;font-weight:700;text-decoration:none;box-shadow:0 0 12px #7fc6ff99;transition:all .3s ease-in-out;margin-top:18px;cursor:pointer;overflow:hidden}.resume-download:hover{transform:scale(1.05);box-shadow:0 0 18px #7fc6ffe6,0 0 28px #ff7aa299}.resume-download:active{transform:scale(.97)}.connect-container{text-align:center;padding:60px 20px;color:#fff}.connect-container h2{font-size:35px;font-weight:800;margin-bottom:18px;letter-spacing:1px;background:linear-gradient(90deg,#b2156e,#ba8105,#0b9b79,#4d7803,#d8318f);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:discoLight 3.5s linear infinite}@keyframes discoLight{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.connect-container p{font-size:18px;font-weight:500;margin-bottom:32px;color:#000;text-align:center}.socials-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin:0 auto}.socials-grid a{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:12px;background:#ffffff1a;color:#000;font-weight:600;text-decoration:none;box-shadow:0 4px 12px #00000026;transition:all .3s ease,background .3s ease,color .3s ease}.socials-grid a:hover{background:linear-gradient(90deg,#49a7ff,#ff7aa2);color:#fff;transform:translateY(-3px)}.contact-btn{position:fixed;bottom:30px;right:30px;background:#60bcea;color:#fff;border:none;border-radius:50%;width:60px;height:60px;font-size:28px;cursor:pointer;box-shadow:0 4px 12px #0000004d;transition:all .3s ease;z-index:1000}.contact-btn:hover{background:#07c;transform:translateY(-3px)}.contact-popup{position:fixed;bottom:100px;right:30px;width:350px;background:#e6f4ff;border-radius:16px;padding:20px;box-shadow:0 12px 28px #00000040;display:none;flex-direction:column;z-index:999;border-top:4px solid #90d5f8}.contact-popup.show{display:flex;animation:popUp .3s ease forwards}@keyframes popUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.contact-popup h3{margin-bottom:12px;color:#07c;font-size:22px;text-align:center}.contact-popup input,.contact-popup textarea{width:100%;padding:10px 12px;margin:8px 0;border-radius:10px;border:1px solid rgba(0,170,255,.3);font-size:15px;outline:none}.contact-popup input:focus,.contact-popup textarea:focus{border-color:#0af;box-shadow:0 0 6px #0af6}.contact-popup textarea{min-height:100px;resize:none}.contact-popup .btn-primary{width:100%;margin-top:10px;background:#8acff1;color:#000;border:none;padding:10px;border-radius:10px;font-weight:600;cursor:pointer;transition:all .3s ease}.contact-popup .btn-primary:hover{background:#aad3f3;transform:translateY(-2px);box-shadow:0 4px 12px #6cc1fe66}.status-message{font-size:14px;margin-top:6px;text-align:center;color:#7cc0f1}.footer{width:100%;padding:20px 0;text-align:center;color:#000;border-top:1px solid rgba(255,255,255,.1);position:relative;bottom:0;left:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.footer-container{width:90%;max-width:1200px;margin:0 auto;display:flex;justify-content:center;align-items:center}.footer p{margin:0;font-size:.95rem}.footer a{color:gold;text-decoration:none;transition:color .3s ease}.footer a:hover{color:#fff}@media (max-width:1000px){.grid{grid-template-columns:1fr 300px}.projects-grid{grid-template-columns:repeat(2,1fr)}.about-grid,.contact-grid{grid-template-columns:1fr}}@media (max-width:700px){.grid{grid-template-columns:1fr;gap:18px}.profile-ring{width:200px;height:200px}.projects-grid{grid-template-columns:1fr}.container{padding:18px}.nav-link{padding:10px;text-align:left}}.about.section{padding:80px 20px;display:flex;justify-content:center;align-items:center}.about-container{display:grid;grid-template-columns:1fr 400px;gap:50px;align-items:center;background:#ffffff14;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:28px;padding:60px;max-width:1400px;box-shadow:0 14px 36px #7e7e7e26;position:relative}.about-left h2{font-size:35px;font-weight:800;margin-bottom:24px;letter-spacing:1px;background:linear-gradient(90deg,#b2156e,#ba8105,#0b9b79,#4d7803,#d8318f);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:discoLight 3.5s linear infinite}@keyframes discoLight{0%{background-position:0% 50%}25%{background-position:50% 50%}50%{background-position:100% 50%}75%{background-position:50% 50%}to{background-position:0% 50%}}.about-left p{font-size:18px;line-height:1.6;color:#000;margin-bottom:30px;max-width:500px}.about-right{display:flex;align-items:center;justify-content:center}.animation-placeholder{width:100%;height:300px;display:flex;align-items:center;justify-content:center;font-size:100px;color:#49a7ffcc;animation:float 4s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.resume-btn{display:inline-flex;align-items:center;justify-content:center;position:relative;width:70px;height:50px;padding:0 16px;border-radius:50px;font-weight:600;text-decoration:none;color:#000;overflow:hidden;background:linear-gradient(135deg,#49a7ffcc,#ff7aa2cc,#f7c04acc);background-size:300% 300%;animation:cloudShift 5s ease infinite;cursor:pointer;box-shadow:0 6px 18px #00000026;transition:all .4s ease}.resume-btn .arrow{font-size:22px;transition:transform .3s ease;z-index:2;margin-left:65px}.resume-btn .resume-text{opacity:0;margin-right:10px;white-space:nowrap;font-size:16px;font-weight:600;transition:opacity .3s ease,transform .3s ease;z-index:2}.resume-btn:hover{width:160px;padding:0 20px;box-shadow:0 12px 28px #00000040}.resume-btn:hover .arrow{transform:translate(-35px)}.resume-btn:hover .resume-text{opacity:1;transform:translate(0)}@keyframes cloudShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.resume-btn:before{content:"";position:absolute;top:-8px;left:-8px;width:calc(100% + 16px);height:calc(100% + 16px);border-radius:50px;background:#ffffff0d;filter:blur(10px);z-index:1}