:root{--bg-color:#0a0a0f;--text-color:#e0e0e0;--secondary-text-color:#b0b0b0;--accent-purple:#6a05ad;--accent-blue:#2e86de;--glass-bg:#ffffff0d;--glass-border:#ffffff26;--gradient-1:linear-gradient(45deg, var(--accent-blue), var(--accent-purple));--gradient-2:linear-gradient(135deg, var(--accent-purple), var(--accent-blue));--max-width:1200px;--border-radius:12px;--transition-speed:.3s ease-in-out;--section-padding:80px 20px}html{scroll-behavior:smooth}.portfolio-page{background-color:var(--bg-color);color:var(--text-color);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;overflow-x:hidden}.portfolio-page .container{max-width:var(--max-width);margin:0 auto;padding:0 20px}.portfolio-page .section-title{text-align:center;background:var(--gradient-1);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:60px;padding-bottom:15px;font-size:2.8em;font-weight:700;position:relative}.portfolio-page .section-title:after{content:"";background:var(--gradient-1);border-radius:2px;width:80px;height:4px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.portfolio-page .glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:var(--border-radius);transition:transform var(--transition-speed), box-shadow var(--transition-speed);padding:30px;position:relative;overflow:hidden}.portfolio-page .glass-card:before{content:"";opacity:0;z-index:0;background:radial-gradient(circle at 0 0,#2e86de1a 0%,#0000 50%),radial-gradient(circle at 100% 100%,#6a05ad1a 0%,#0000 50%);transition:opacity .5s;position:absolute;inset:0}.portfolio-page .glass-card:hover:before{opacity:1}.portfolio-page .glass-card:hover{transform:translateY(-8px);box-shadow:0 10px 30px #0000004d}.portfolio-page .fade-in-up{opacity:0;will-change:opacity, transform;transition:opacity .8s ease-out,transform .8s ease-out;transform:translateY(20px)}.portfolio-page .fade-in-up.visible{opacity:1;transform:translateY(0)}.portfolio-page .header{-webkit-backdrop-filter:blur(15px);z-index:1000;background:#0a0a0fcc;border-bottom:1px solid #ffffff0d;padding:15px 0;transition:background .3s,box-shadow .3s;position:sticky;top:0}.portfolio-page .header.scrolled{-webkit-backdrop-filter:blur(12px);background:#0a0a0feb;box-shadow:0 1px 20px #0000004d}.portfolio-page .nav-container{justify-content:space-between;align-items:center;display:flex}.portfolio-page .logo{background:var(--gradient-1);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.8em;font-weight:700;text-decoration:none}.portfolio-page .nav-links{align-items:center;gap:30px;list-style:none;display:flex}.portfolio-page .nav-links a{color:var(--secondary-text-color);transition:color var(--transition-speed);font-weight:500;text-decoration:none;position:relative}.portfolio-page .nav-links a:after{content:"";background:var(--gradient-1);width:0;height:2px;transition:width var(--transition-speed);position:absolute;bottom:-5px;left:0}.portfolio-page .nav-links a:hover,.portfolio-page .nav-links a.active{color:var(--text-color)}.portfolio-page .nav-links a:hover:after,.portfolio-page .nav-links a.active:after{width:100%}.portfolio-page .profile-photo-frame{background:var(--gradient-1);border-radius:50%;width:140px;height:140px;margin:0 auto 30px;padding:3px;animation:3s ease-in-out infinite portfolio-float}.portfolio-page .profile-photo{width:100%;height:100%;color:var(--accent-blue);letter-spacing:2px;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);border:2px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;font-size:2.5em;font-weight:800;display:flex}@keyframes portfolio-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.portfolio-page .hero{text-align:center;min-height:90vh;padding:var(--section-padding);background:radial-gradient(circle at 10% 20%,#2e86de1a 0%,#0000 40%),radial-gradient(circle at 90% 80%,#6a05ad1a 0%,#0000 40%);flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.portfolio-page .hero h1{background:var(--gradient-1);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:15px;font-size:4.5em;font-weight:800;line-height:1.1}.portfolio-page .hero h2{color:var(--text-color);margin-bottom:25px;font-size:2.2em;font-weight:600}.portfolio-page .hero p{color:var(--secondary-text-color);max-width:800px;margin-bottom:40px;font-size:1.3em;font-weight:300}.portfolio-page .hero-buttons{flex-wrap:wrap;justify-content:center;gap:20px;display:flex}.portfolio-page .btn{transition:all var(--transition-speed);z-index:1;cursor:pointer;color:var(--text-color);border:none;border-radius:50px;justify-content:center;align-items:center;padding:15px 30px;font-size:1.1em;font-weight:600;text-decoration:none;display:inline-flex;position:relative;overflow:hidden}.portfolio-page .btn:before{content:"";background:var(--gradient-1);-webkit-mask-composite:xor;z-index:-1;border-radius:50px;padding:2px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.portfolio-page .btn-primary{background:var(--gradient-1);color:#fff;padding:17px 32px}.portfolio-page .btn-primary:hover{opacity:.9;transform:translateY(-3px);box-shadow:0 8px 20px #2e86de66}.portfolio-page .btn-secondary{color:var(--text-color);background-color:#0000;border:2px solid #0000}.portfolio-page .btn-secondary:hover{background:var(--gradient-1);color:#fff;opacity:.9;transform:translateY(-3px);box-shadow:0 8px 20px #6a05ad66}.portfolio-page .btn svg{margin-right:10px}.portfolio-page .about{padding:var(--section-padding)}.portfolio-page .about-content{color:var(--secondary-text-color);text-align:center;flex-direction:column;gap:30px;max-width:900px;margin:0 auto;font-size:1.1em;line-height:1.8;display:flex}.portfolio-page .about-content strong{color:var(--text-color);font-weight:600}.portfolio-page .about-content span.highlight{background:var(--gradient-1);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-weight:700}.portfolio-page .experience{padding:var(--section-padding)}.portfolio-page .experience-grid{flex-direction:column;gap:25px;display:flex}.portfolio-page .experience-item{flex-direction:column;justify-content:space-between;padding:30px;display:flex}.portfolio-page .experience-item h3{background:var(--gradient-1);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0 0 8px;font-size:1.5em;font-weight:700}.portfolio-page .experience-item p{color:var(--accent-blue);margin-bottom:15px;font-size:.95em}.portfolio-page .experience-item ul{margin-top:10px;padding:0;list-style:none}.portfolio-page .experience-item ul li{color:var(--secondary-text-color);margin-bottom:4px;padding-left:18px;font-size:.95em;line-height:1.7;position:relative}.portfolio-page .experience-item ul li:before{content:"▹";color:var(--accent-blue);position:absolute;left:0}.portfolio-page .projects{padding:var(--section-padding)}.portfolio-page .projects-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px;display:grid}.portfolio-page .project-item{flex-direction:column;padding:30px;transition:transform .3s,border-color .3s;display:flex}.portfolio-page .project-item:hover{border-color:#6366f166;transform:translateY(-4px)}.portfolio-page .project-icon{margin-bottom:15px;font-size:2em}.portfolio-page .project-item h3{background:var(--gradient-2);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0 0 10px;font-size:1.4em;font-weight:700}.portfolio-page .project-item p{color:var(--secondary-text-color);flex-grow:1;margin-bottom:15px;font-size:.95em;line-height:1.6}.portfolio-page .skills{padding:var(--section-padding)}.portfolio-page .skills-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px;display:grid}.portfolio-page .skill-category{padding:25px}.portfolio-page .skill-category h3{background:var(--gradient-1);-webkit-text-fill-color:transparent;text-align:center;-webkit-background-clip:text;margin-bottom:20px;font-size:1.4em;font-weight:700}.portfolio-page .skill-tags{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.portfolio-page .skill-item{color:var(--text-color);white-space:nowrap;transition:all var(--transition-speed);background:#6366f11a;border:1px solid #6366f133;border-radius:20px;padding:6px 16px;font-size:.85em;font-weight:500}.portfolio-page .skill-item:hover{background:var(--accent-purple);border-color:var(--accent-purple);color:#fff;transform:translateY(-2px);box-shadow:0 0 15px #6a05ad80}.portfolio-page .contact{padding:var(--section-padding)}.portfolio-page .contact-content{text-align:center;flex-direction:column;align-items:center;gap:20px;padding:40px;font-size:1.15em;display:flex}.portfolio-page .contact-content p{color:var(--secondary-text-color);line-height:1.7}.portfolio-page .social-links{justify-content:center;align-items:center;gap:25px;margin-top:25px;display:flex}.portfolio-page .social-links a{color:var(--secondary-text-color);transition:color var(--transition-speed), transform var(--transition-speed);align-items:center;font-size:1.8em;text-decoration:none;display:inline-flex}.portfolio-page .social-links a:hover{color:var(--accent-blue);transform:translateY(-4px)scale(1.1)}.portfolio-page .footer{text-align:center;color:var(--secondary-text-color);border-top:1px solid #ffffff0d;margin-top:60px;padding:40px 20px;font-size:.9em}@media (width<=992px){.portfolio-page .nav-links{gap:20px}.portfolio-page .hero h1{font-size:3.5em}.portfolio-page .hero h2{font-size:1.8em}.portfolio-page .hero p{font-size:1.1em}.portfolio-page .section-title{margin-bottom:40px;font-size:2.2em}.portfolio-page .projects-grid,.portfolio-page .skills-grid{grid-template-columns:1fr}}@media (width<=768px){.portfolio-page .nav-container{flex-direction:column;gap:15px}.portfolio-page .nav-links{flex-wrap:wrap;justify-content:center;gap:15px 25px}.portfolio-page .hero{min-height:80vh}.portfolio-page .hero h1{font-size:2.8em}.portfolio-page .hero h2{font-size:1.5em}.portfolio-page .hero p{font-size:1em}.portfolio-page .hero-buttons{flex-direction:column;gap:15px}.portfolio-page .btn{width:80%;max-width:300px;margin:0 auto}.portfolio-page .section-title{font-size:1.8em}.portfolio-page .about-content{font-size:1em}}@media (width<=480px){.portfolio-page .logo{font-size:1.5em}.portfolio-page .hero h1{font-size:2.2em}.portfolio-page .hero h2{font-size:1.2em}.portfolio-page .btn{padding:12px 20px;font-size:1em}.portfolio-page .section-title{margin-bottom:30px;font-size:1.6em}.portfolio-page .glass-card{padding:20px}.portfolio-page .experience-item h3,.portfolio-page .project-item h3,.portfolio-page .skill-category h3{font-size:1.4em}.portfolio-page .skill-item{padding:6px 14px;font-size:.85em}.portfolio-page .contact-content{font-size:1em}}
