:root{--bg-primary:linear-gradient(
    135deg,
    hsl(260, 60%, 25%) 0%,
    hsl(280, 70%, 15%) 30%,
    hsl(300, 60%, 20%) 70%,
    hsl(260, 50%, 10%) 100%
  );--bg-card:linear-gradient(135deg, hsla(270, 50%, 25%, 0.95) 0%, hsla(290, 40%, 20%, 0.98) 100%);--bg-glass:hsla(275, 45%, 20%, 0.9);--bg-sidebar:linear-gradient(180deg, hsl(270, 60%, 18%) 0%, hsl(290, 50%, 12%) 100%);--purple-primary:hsl(270, 80%, 70%);--purple-light:hsl(280, 70%, 80%);--purple-dark:hsl(270, 60%, 30%);--purple-accent:hsl(285, 85%, 65%);--purple-bright:hsl(275, 90%, 75%);--white-primary:hsl(0, 0%, 98%);--white-secondary:hsl(0, 0%, 90%);--gray-light:hsl(270, 15%, 70%);--gray-dark:hsl(270, 20%, 8%);--gradient-text:linear-gradient(135deg, hsl(275, 85%, 75%), hsl(285, 75%, 70%));--gradient-progress:linear-gradient(90deg, hsl(275, 80%, 65%), hsl(285, 70%, 70%));--gradient-button:linear-gradient(135deg, hsl(275, 75%, 60%), hsl(285, 65%, 65%));--font-family:"Ubuntu", sans-serif;--shadow-soft:0 8px 32px hsla(275, 40%, 5%, 0.4);--shadow-strong:0 16px 48px hsla(275, 40%, 5%, 0.6);--shadow-floating:0 20px 60px hsla(275, 40%, 5%, 0.5);--shadow-glow:0 0 30px hsla(275, 80%, 60%, 0.3);--transition-fast:0.2s ease;--transition-smooth:0.4s cubic-bezier(0.4, 0, 0.2, 1);--fs-title:36px;--fs-section:24px;--fs-text:16px;--fs-small:14px;--fs-tiny:12px}*{margin:0;padding:0;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--purple-primary) var(--gray-dark)}body{font-family:var(--font-family);background:var(--bg-primary);overflow:hidden;height:100vh;color:var(--white-primary)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--gray-dark);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--gradient-progress);border-radius:4px;transition:var(--transition-fast)}::-webkit-scrollbar-thumb:hover{background:var(--purple-accent)}::-webkit-scrollbar-corner{background:var(--gray-dark)}.portfolio-container{height:100vh;width:100vw;position:relative;overflow:hidden}.progress-bar-container{position:fixed;top:0;left:0;right:0;height:4px;background:var(--gray-dark);z-index:1000;border-bottom:1px solid rgba(82,46,107,.3)}.progress-bar{height:100%;background:var(--gradient-progress);width:0%;transition:width .6s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-glow)}.progress-indicators{position:absolute;top:15px;left:50%;transform:translateX(-50%);display:flex;gap:30px;z-index:1001}.progress-dot{position:relative;width:12px;height:12px;background:var(--gray-dark);border:2px solid var(--purple-dark);border-radius:50%;cursor:pointer;transition:var(--transition-smooth)}.progress-dot.active{background:var(--purple-primary);border-color:var(--purple-primary);box-shadow:var(--shadow-glow)}.progress-label{position:absolute;top:20px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--gray-light);white-space:nowrap;opacity:0;transition:var(--transition-smooth)}.progress-dot:hover .progress-label,.progress-dot.active .progress-label{opacity:1;color:var(--white-secondary)}.scroll-toggle-btn{position:fixed;top:50%;right:30px;transform:translateY(-50%);background:var(--bg-glass);backdrop-filter:blur(20px);border:1px solid rgba(109,61,143,.4);border-radius:50px;padding:15px 20px;cursor:pointer;transition:var(--transition-smooth);z-index:999;box-shadow:var(--shadow-floating);display:flex;flex-direction:column;align-items:center;gap:8px}.scroll-toggle-btn:hover{background:var(--purple-dark);border-color:var(--purple-primary);box-shadow:var(--shadow-glow);transform:translateY(-50%) scale(1.05)}.toggle-icon{font-size:20px;color:var(--purple-bright)}.toggle-text{font-size:11px;color:var(--white-secondary);font-weight:500;text-transform:uppercase;letter-spacing:1px}.scroll-toggle-btn:hover .toggle-text{color:var(--purple-bright)}@media (max-width:768px){.scroll-toggle-btn{display:none}}.floating-profile-btn{position:fixed;bottom:30px;left:30px;background:var(--bg-glass);backdrop-filter:blur(20px);border:1px solid rgba(109,61,143,.4);border-radius:50px;padding:12px 20px;cursor:pointer;transition:var(--transition-smooth);z-index:999;box-shadow:var(--shadow-floating)}.floating-profile-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-glow);border-color:var(--purple-primary)}.profile-btn-content{display:flex;align-items:center;gap:12px}.profile-btn-content img{width:40px;height:40px;border-radius:50%;border:2px solid var(--purple-primary)}.profile-btn-text{color:var(--white-primary);font-weight:500;font-size:14px}.expandable-sidebar{position:fixed;top:0;left:0;width:100%;height:100%;z-index:2000;visibility:hidden;opacity:0;transition:var(--transition-smooth)}.expandable-sidebar.active{visibility:visible;opacity:1}.sidebar-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(14,8,18,.8);backdrop-filter:blur(10px)}.sidebar-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);width:90%;max-width:400px;max-height:90vh;background:var(--bg-sidebar);border:1px solid rgba(109,61,143,.4);border-radius:24px;padding:40px 30px;box-shadow:var(--shadow-floating);overflow-y:auto;transition:var(--transition-smooth)}.expandable-sidebar.active .sidebar-content{transform:translate(-50%,-50%) scale(1)}.sidebar-close{position:absolute;top:20px;right:20px;background:var(--bg-glass);border:1px solid rgba(136,77,179,.3);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--white-secondary);cursor:pointer;transition:var(--transition-fast)}.sidebar-close:hover{background:var(--purple-primary);color:var(--white-primary)}.profile-section{text-align:center;margin-bottom:40px}.avatar-box{width:120px;height:120px;border-radius:20px;overflow:hidden;margin:0 auto 20px;border:3px solid var(--purple-primary);box-shadow:var(--shadow-glow)}.avatar-box img{width:100%;height:100%;object-fit:cover}.profile-info .name{font-size:24px;font-weight:600;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}.profile-info .title{color:var(--purple-light);font-size:14px;font-weight:400;background:var(--purple-dark);padding:6px 16px;border-radius:20px;border:1px solid var(--purple-primary);display:inline-block}.contact-section{margin-bottom:30px}.contact-item{display:flex;align-items:center;gap:15px;margin-bottom:20px;padding:15px;background:var(--bg-glass);border-radius:12px;border:1px solid rgba(136,77,179,.2);transition:var(--transition-smooth)}.contact-item:hover{background:rgba(68,38,89,.6);border-color:var(--purple-primary);transform:translateY(-2px);box-shadow:var(--shadow-soft)}.contact-icon{width:40px;height:40px;background:var(--gradient-button);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--white-primary);font-size:18px}.contact-details{flex:1}.contact-label{display:block;color:var(--gray-light);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}.contact-value{color:var(--white-secondary);font-size:13px;text-decoration:none;transition:var(--transition-fast)}.contact-value:hover{color:var(--purple-accent)}.social-links{display:flex;justify-content:center;gap:15px}.social-link{width:45px;height:45px;background:var(--bg-glass);border:1px solid rgba(136,77,179,.2);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--purple-light);font-size:20px;text-decoration:none;transition:var(--transition-smooth)}.social-link:hover{background:var(--gradient-button);color:var(--white-primary);transform:translateY(-3px);box-shadow:var(--shadow-glow)}.main-content{height:100vh;width:100vw;padding-top:60px}.scroll-container{display:flex;height:100%;overflow-x:hidden;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory}.page{min-width:100%;width:100%;scroll-snap-align:start;padding:40px;overflow-y:auto;overflow-x:hidden;max-width:100vw;height:100%;-webkit-overflow-scrolling:touch}.page-content{max-width:900px;margin:0 auto;padding:0 40px}.page-header{margin-bottom:50px;text-align:center}.page-title{font-size:var(--fs-title);font-weight:700;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;padding-bottom:20px;animation:slideInTitle .8s ease-out}@keyframes slideInTitle{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.page-title::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:4px;background:var(--gradient-text);border-radius:2px;animation:expandLine .8s ease-out .3s both}@keyframes expandLine{0%{width:0}to{width:80px}}.about-text{font-size:var(--fs-text);line-height:1.8;color:var(--white-primary);margin-bottom:60px;background:var(--bg-card);padding:30px;border-radius:20px;border:1px solid rgba(109,61,143,.3);box-shadow:var(--shadow-soft);text-align:center;animation:fadeInUp .6s ease-out .2s both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.section-title{font-size:var(--fs-section);font-weight:600;color:var(--white-primary);margin-bottom:40px;text-align:center;animation:fadeInUp .6s ease-out .4s both}.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:80px}@media (max-width:768px){.services-grid{grid-template-columns:1fr;gap:20px;padding:0 10px}.service-card{padding:25px 20px;margin:0;width:100%;box-sizing:border-box}}@media (max-width:480px){.services-grid{padding:0 5px;gap:15px}.service-card{padding:20px 15px}.page-content{padding:0 15px}}.service-card{padding:30px 25px;background:var(--bg-card);border:1px solid rgba(109,61,143,.3);border-radius:20px;text-align:center;transition:var(--transition-smooth);animation:fadeInUp .6s ease-out calc(.6s + var(--delay, 0)) both}.service-card:nth-child(1){--delay:0.1s}.service-card:nth-child(2){--delay:0.2s}.service-card:nth-child(3){--delay:0.3s}.service-card:nth-child(4){--delay:0.4s}.service-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-glow);border-color:var(--purple-primary);background:linear-gradient(135deg,rgba(69,32,96,.95)0,rgba(61,31,71,.98) 100%)}.service-icon{width:60px;height:60px;background:var(--gradient-button);border-radius:15px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:24px;color:var(--white-primary);transition:var(--transition-smooth);box-shadow:var(--shadow-soft)}.service-card:hover .service-icon{background:var(--purple-accent);transform:scale(1.1);box-shadow:var(--shadow-glow)}.service-title{font-size:18px;font-weight:600;color:var(--white-primary);margin-bottom:15px}.service-description{color:var(--white-secondary);line-height:1.6;font-size:15px}.clients-list{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}.client-item{width:120px;height:120px;border-radius:20px;overflow:hidden;transition:var(--transition-smooth);border:2px solid rgba(136,77,179,.2)}.client-item:hover{transform:scale(1.1);border-color:var(--purple-primary);box-shadow:var(--shadow-glow)}.client-item img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:var(--transition-smooth)}.client-item:hover img{filter:grayscale(0)}.filter-section{margin-bottom:50px;text-align:center}.filter-buttons{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}.filter-btn{background:var(--bg-card);border:1px solid rgba(136,77,179,.2);color:var(--white-secondary);padding:15px 30px;border-radius:30px;font-size:14px;font-weight:500;cursor:pointer;transition:var(--transition-smooth)}.filter-btn:hover,.filter-btn.active{background:var(--gradient-button);color:var(--white-primary);border-color:var(--purple-primary);transform:translateY(-2px);box-shadow:var(--shadow-glow)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px}@media (max-width:768px){.projects-grid{grid-template-columns:1fr;gap:20px;padding:0 10px}.project-card{width:100%;box-sizing:border-box;margin:0}}@media (max-width:480px){.projects-grid{padding:0 5px;gap:15px}}.project-card{background:var(--bg-card);border:1px solid rgba(136,77,179,.2);border-radius:20px;overflow:hidden;transition:var(--transition-smooth)}.project-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-glow);border-color:var(--purple-primary)}.project-image{position:relative;height:220px;overflow:hidden}.project-image img{width:100%;height:100%;object-fit:cover;transition:var(--transition-smooth)}.project-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(27,15,36,.8);display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition-smooth)}.project-card:hover .project-overlay{opacity:1}.project-overlay ion-icon{font-size:36px;color:var(--white-primary)}.project-card:hover .project-image img{transform:scale(1.1)}.project-info{padding:25px}.project-title{font-size:18px;font-weight:600;color:var(--white-primary);margin-bottom:10px}.project-category{color:var(--purple-light);font-size:12px;text-transform:uppercase;letter-spacing:1px;font-weight:500}.contact-form{padding:40px;max-width:600px;background:var(--bg-card);border:1px solid rgba(136,77,179,.2);border-radius:20px;margin:0 auto;box-shadow:var(--shadow-soft);overflow:hidden}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;width:100%}.form-input{background:var(--bg-glass);border:1px solid rgba(136,77,179,.2);border-radius:15px;padding:15px 20px;color:var(--white-primary);font-size:14px;transition:var(--transition-fast);width:100%;box-sizing:border-box;min-width:0}.form-textarea{width:100%;background:var(--bg-glass);border:1px solid rgba(136,77,179,.2);border-radius:15px;padding:15px 20px;color:var(--white-primary);font-size:14px;transition:var(--transition-fast);min-height:120px;resize:vertical;margin-bottom:30px;box-sizing:border-box}.form-input::placeholder,.form-textarea::placeholder{color:var(--gray-light)}.form-input:focus,.form-textarea:focus{outline:0;border-color:var(--purple-primary);box-shadow:0 0 0 3px rgba(163,92,214,.1)}.form-submit{background:var(--gradient-button);color:var(--white-primary);border:0;border-radius:15px;padding:15px 35px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:var(--transition-smooth);margin:0 auto;box-shadow:var(--shadow-soft)}.form-submit:hover{background:var(--purple-accent);transform:translateY(-3px);box-shadow:var(--shadow-glow)}@media (max-width:768px){.contact-form{padding:25px 20px}.form-grid{grid-template-columns:1fr;gap:15px}.form-textarea{min-height:100px;margin-bottom:25px}}@media (max-width:480px){.contact-form{padding:20px 15px}.form-grid{gap:12px}.form-textarea{min-height:90px;margin-bottom:20px}}.page{min-width:100%;width:100%;scroll-snap-align:start;padding:40px;overflow-y:auto;overflow-x:hidden;max-width:100vw;height:100%;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}.page-content{max-width:900px;margin:0 auto;padding:0 40px}@media (max-width:768px){.contact-form{padding:25px 20px;max-width:100%;margin:0 auto;box-sizing:border-box}.form-grid{grid-template-columns:1fr;gap:15px;width:100%}.form-input{width:100%;min-width:0;box-sizing:border-box}.form-textarea{min-height:100px;margin-bottom:25px;width:100%;box-sizing:border-box}.page-content{padding:0 20px;touch-action:pan-y;max-width:100%;box-sizing:border-box}.scroll-container{touch-action:pan-x pan-y;user-select:none}.contact-form{touch-action:pan-y;overflow:visible;user-select:text}.form-input,.form-textarea{touch-action:manipulation;user-select:text}.contact-page{touch-action:pan-y}.contact-page .page-content{min-height:100%;touch-action:pan-y}}@media (max-width:480px){.contact-form{padding:20px 15px;max-width:calc(100vw - 30px);margin:0 auto}.form-grid{gap:12px}.form-input,.form-textarea{padding:12px 15px}.form-textarea{min-height:90px;margin-bottom:20px}}@media (min-width:769px){.scroll-container{cursor:grab}.scroll-container:active{cursor:grabbing}}@media (max-width:768px){.scroll-container{cursor:default}}.scroll-container{display:flex;height:100%;overflow-x:hidden;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none}.form-input,.form-textarea,.contact-form input,.contact-form textarea,.about-text p,.service-description,.project-title,.project-category,.contact-value,.profile-info .name,.profile-info .title{user-select:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text}@media (min-width:769px){.scroll-container{cursor:grab}.scroll-container:active{cursor:grabbing}}@media (max-width:768px){.scroll-container{cursor:default}}@media (max-width:768px){.page{touch-action:pan-y}.scroll-container{touch-action:manipulation}.contact-form,.form-input,.form-textarea{touch-action:manipulation;user-select:text;-webkit-user-select:text}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;opacity:1;visibility:visible;transition:all .8s cubic-bezier(.4,0,.2,1)}.loading-screen.loaded{opacity:0;visibility:hidden;pointer-events:none}.loading-content{display:flex;flex-direction:column;align-items:center;gap:30px}.loading-spinner{width:80px;height:80px;position:relative;border:3px solid var(--gray-dark);border-top:3px solid var(--purple-primary);border-right:3px solid var(--purple-accent);border-radius:50%;animation:spin 1.2s linear infinite;box-shadow:var(--shadow-glow)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.loading-text{font-size:32px;font-weight:700;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:pulse 2s ease-in-out infinite;letter-spacing:2px}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.loading-dots{display:flex;gap:8px;margin-top:10px}.loading-dot{width:8px;height:8px;background:var(--purple-primary);border-radius:50%;animation:bounce 1.4s ease-in-out infinite both}.loading-dot:nth-child(1){animation-delay:-.32s}.loading-dot:nth-child(2){animation-delay:-.16s}.loading-dot:nth-child(3){animation-delay:0s}@keyframes bounce{0%,80%,to{transform:scale(.8);opacity:.5}40%{transform:scale(1.2);opacity:1}}