*{margin:0;padding:0;box-sizing:border-box}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;vertical-align:middle}:root{--primary-color: #1a1a1a;--primary-dark: #000000;--secondary-color: #2563eb;--accent-color: #374151;--text-primary: #1a1a1a;--text-secondary: #6b7280;--text-light: #9ca3af;--background: #ffffff;--background-secondary: #f3f4f6;--background-dark: #1a1a1a;--surface: #ffffff;--surface-dark: #374151;--border: #f3f4f6;--border-dark: #374151;--accent-sage: #c4c67a;--accent-teal: #9dd9d9;--accent-purple: #c77dcd;--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)}body{font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6;color:var(--text-primary);background-color:var(--background);scroll-behavior:smooth}.container{max-width:1200px;margin:0 auto;padding:0 3rem}.navbar{position:fixed;top:0;width:100%;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:1000;transition:all .3s ease}.nav-container{max-width:1200px;margin:0 auto;padding:0 3rem;display:flex;justify-content:space-between;align-items:center;height:70px}.nav-logo .logo-text{font-size:1.5rem;font-weight:700;color:var(--primary-color)}.nav-menu{display:flex;list-style:none;gap:2rem}.nav-link{text-decoration:none;color:var(--text-primary);font-weight:500;transition:color .3s ease;position:relative}.nav-link:hover{color:var(--primary-color)}.nav-link:after{content:"";position:absolute;width:0;height:2px;bottom:-5px;left:0;background-color:var(--primary-color);transition:width .3s ease}.nav-link:hover:after{width:100%}.hamburger{display:none;flex-direction:column;cursor:pointer}.hamburger span{width:25px;height:3px;background:var(--text-primary);margin:3px 0;transition:.3s}.hero{min-height:calc(100vh - 70px);display:flex;align-items:stretch;position:relative;overflow:hidden;margin-top:70px;background-color:#0a0a0a;padding:0 3rem}#home-section-background{position:absolute;top:0;left:0;width:50%;height:100%;z-index:0;overflow:hidden}#home-section-background canvas{display:block}#home-section-content{position:relative;z-index:1;width:100%;display:flex;align-items:center}.hero:before{display:none}#architecture-section-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden}#architecture-section-background canvas{display:block}#architecture .container{position:relative;z-index:1}#demos-section-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden}#demos-section-background canvas{display:block}#demos .container{position:relative;z-index:1}#curriculum-section-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden}#curriculum-section-background canvas{display:block}#curriculum .container{position:relative;z-index:1}.hero-content{width:100%;margin-left:50%;padding:3rem 4rem;position:relative;z-index:1;background:transparent;display:flex;align-items:center;justify-content:center}.hero-text{max-width:600px;text-align:left}.hero-title{font-size:3rem;font-weight:700;color:#fff;margin-bottom:.75rem;line-height:1.1}.hero-subtitle{font-size:1.25rem;font-weight:400;color:#ffffffe6;margin-bottom:1.25rem}.hero-description{font-size:1rem;color:#fffc;margin-bottom:2.5rem;max-width:700px;line-height:1.6}.hero-stats{display:flex;gap:3rem;margin-bottom:3rem}.stat-item{text-align:center}.stat-number{display:block;font-size:2.5rem;font-weight:700;color:#fff;line-height:1}.stat-label{font-size:.875rem;color:#ffffffb3;font-weight:500}.hero-cta{display:flex;gap:1rem;flex-wrap:wrap}.btn-primary,.btn-secondary{padding:1rem 2rem;border-radius:8px;text-decoration:none;font-weight:600;transition:all .3s ease;display:inline-block}.btn-primary{background:var(--accent-teal);color:var(--primary-color);box-shadow:var(--shadow-lg)}.btn-primary:hover{background:var(--accent-sage);transform:translateY(-2px);box-shadow:var(--shadow-xl)}.btn-secondary{background:transparent;color:#fff;border:2px solid var(--accent-purple)}.btn-secondary:hover{background:var(--accent-purple);border-color:var(--accent-purple);color:var(--primary-color)}.section{padding:4rem 0}.section-dark{background:linear-gradient(135deg,var(--background-dark) 0%,var(--surface-dark) 100%);color:#fff;position:relative}.section-dark:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent-sage) 0%,var(--accent-teal) 50%,var(--accent-purple) 100%)}.section-header{text-align:left;max-width:900px;margin:0 auto 3rem}.section-title{font-size:2rem;font-weight:600;margin-bottom:1rem;color:inherit}.section-subtitle{font-size:1rem;color:var(--text-secondary);line-height:1.6;text-align:left}.section-dark .section-subtitle{color:#ffffffb3}.analytics-banner{margin:0 auto 3rem;max-width:900px;width:100%}.banner-image{width:100%;height:auto;display:block}.overview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}.overview-card{background:var(--surface);padding:2.5rem;border-radius:16px;box-shadow:var(--shadow);transition:all .3s ease;text-align:center;margin:0 1rem}.overview-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl);border-left:4px solid var(--accent-teal)}.card-icon{font-size:3rem;margin-bottom:1.5rem;display:block}.card-icon .material-symbols-outlined{font-size:3rem;color:var(--secondary-color)}.overview-card h3{font-size:1.25rem;font-weight:600;margin-bottom:1rem;color:var(--text-primary)}.overview-card p{color:var(--text-secondary);line-height:1.6}.architecture-content{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}.architecture-diagram{display:flex;flex-direction:column;gap:1.5rem}.arch-layer{background:var(--surface-dark);padding:1.5rem;border-radius:12px;border-left:4px solid var(--primary-color)}.arch-layer h3{color:#fff;font-size:1.125rem;font-weight:600;margin-bottom:1rem}.arch-components{display:flex;flex-wrap:wrap;gap:.5rem}.component{background:var(--accent-sage);color:#fff;padding:.5rem .75rem;border-radius:6px;font-size:.875rem;font-weight:500}.frontend-component{background:var(--accent-purple);color:#000}.application-component{background:var(--accent-teal);color:#000}.data-component{background:var(--accent-sage);color:#000}.architecture-features{display:flex;flex-direction:column;gap:2rem}.feature-item h4{color:#fff;font-size:1.125rem;font-weight:600;margin-bottom:.5rem}.feature-item p{color:#fffc;line-height:1.6}.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}.feature-category{background:var(--surface);padding:2.5rem 2rem;border-radius:12px;box-shadow:var(--shadow);margin:0 1rem}.feature-category h3{font-size:1.25rem;font-weight:600;margin-bottom:1.5rem;color:var(--primary-color)}.feature-list{list-style:none;display:flex;flex-direction:column;gap:.75rem}.feature-list li{position:relative;padding-left:0;color:var(--text-secondary);line-height:1.5;display:flex;align-items:center;gap:.5rem}.feature-icon{color:var(--accent-purple);font-size:18px!important;flex-shrink:0}.demos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem}.demo-card{background:var(--surface-dark);border-radius:16px;overflow:hidden;transition:all .3s ease;margin:0 1rem}.demo-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl)}.demo-video{position:relative;background:#000;width:100%}.demo-video video,.demo-video iframe{width:100%;height:auto;aspect-ratio:16/9;display:block}.demo-info{padding:1.5rem}.demo-info h3{font-size:1.25rem;font-weight:600;margin-bottom:.75rem;color:#fff}.demo-info p{color:#fffc;line-height:1.6;margin-bottom:1rem}.demo-tags{display:flex;flex-wrap:wrap;gap:.5rem}.tag{background:var(--accent-purple);color:var(--primary-color);padding:.25rem .75rem;border-radius:20px;font-size:.75rem;font-weight:500}.tech-stack{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}.tech-category{background:var(--surface);padding:2.5rem 2rem;border-radius:12px;box-shadow:var(--shadow);margin:0 1rem}.tech-category h3{font-size:1.25rem;font-weight:600;margin-bottom:1.5rem;color:var(--primary-color)}.tech-grid{display:flex;flex-direction:column;gap:1rem}.tech-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:var(--background-secondary);border-radius:8px;border-left:3px solid var(--primary-color)}.tech-name{font-weight:600;color:var(--text-primary)}.tech-role{font-size:.875rem;color:var(--text-secondary)}.curriculum-content{max-width:1000px;margin:0 auto}.cv-header{text-align:center;background:var(--surface-dark);padding:2.5rem 2rem;border-radius:12px;box-shadow:var(--shadow-lg);margin-bottom:3rem}.cv-name{color:var(--accent-teal);font-size:2.5rem;font-weight:700;margin-top:20px;margin-bottom:1rem}.cv-title{color:#fff;font-size:1.5rem;font-weight:500;margin-bottom:2rem}.cv-contact{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;color:var(--text-light);font-size:.95rem;margin-bottom:2rem}.cv-contact span{display:flex;align-items:center;gap:.5rem}.cv-contact .material-symbols-outlined{font-size:1.2rem;color:var(--secondary-color)}.cv-download{margin-top:0}.btn-resume-download{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent-purple);color:var(--primary-color);text-decoration:none;padding:.75rem 1.5rem;border-radius:25px;font-weight:500;font-size:.95rem;transition:all .3s ease;box-shadow:var(--shadow);border:2px solid transparent}.btn-resume-download:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);background:var(--accent-sage)}.btn-resume-download:active{transform:translateY(0)}.btn-resume-download .material-symbols-outlined{font-size:1.25rem}.experience-timeline{position:relative}.experience-item{position:relative;margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:1px solid rgba(55,65,81,.3)}.experience-item:last-child{border-bottom:none}.experience-header{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:.5rem}.experience-header h4{color:#fff;font-size:1.3rem;font-weight:600;margin:0;flex:1}.experience-location{color:var(--secondary-color);font-weight:500;font-size:.95rem}.experience-duration{color:var(--primary-color);font-weight:500;font-size:.95rem;background:var(--accent-teal);padding:.25rem .75rem;border-radius:20px}.experience-subtitle{color:var(--text-light);font-style:italic;margin-bottom:1rem;font-size:1rem}.achievements-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:1.5rem}.achievement-card{background:#2563eb0d;border:1px solid rgba(37,99,235,.2);padding:1.5rem;border-radius:8px;text-align:center;transition:transform .2s ease}.achievement-card:hover{transform:translateY(-2px);background:#2563eb1a}.achievement-icon{font-size:2rem;margin-bottom:1rem}.achievement-icon .material-symbols-outlined{font-size:2.5rem;color:var(--secondary-color)}.achievement-card h4{color:var(--neutral-white);font-size:1.1rem;font-weight:600;margin-bottom:.75rem}.achievement-card p{color:var(--text-light);font-size:.9rem;line-height:1.5}.education-school{color:var(--text-light);font-size:1rem;margin:.5rem 0}.education-year{color:var(--secondary-color);font-weight:500;font-size:.9rem}.cv-section{margin-bottom:3rem;background:var(--surface-dark);padding:2rem;border-radius:12px;box-shadow:var(--shadow-lg)}.cv-section h3{color:#fff;font-size:1.5rem;font-weight:600;margin-bottom:1.5rem;border-bottom:2px solid var(--primary-color);padding-bottom:.5rem}.cv-summary{color:var(--text-light);font-size:1.1rem;line-height:1.8;text-align:justify}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:1.5rem}.skill-category h4{color:var(--background);font-size:1.1rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:center}.skill-category h4:before{content:"▶";margin-right:.5rem;color:var(--secondary-color)}.skill-list,.responsibility-list,.achievement-list,.education-list{list-style:none;margin:0;padding:0}.skill-list li,.responsibility-list li,.achievement-list li,.education-list li{color:var(--text-light);padding:.5rem 0 .5rem 1.5rem;position:relative;line-height:1.6;border-bottom:1px solid rgba(55,65,81,.3)}.skill-list li:last-child,.responsibility-list li:last-child,.achievement-list li:last-child,.education-list li:last-child{border-bottom:none}.skill-list li:before{content:"●";position:absolute;left:0;color:var(--secondary-color);font-weight:700}.responsibility-list li:before,.achievement-list li:before,.education-list li:before{content:"✓";position:absolute;left:0;color:var(--secondary-color);font-weight:700}.project-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem;margin-top:1.5rem}.project-info h4,.project-achievements h4{color:var(--accent-color);font-size:1.1rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:center}.project-info h4:before{content:"📋";margin-right:.5rem}.project-achievements h4:before{content:"🏆";margin-right:.5rem}.education-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:1.5rem}.education-item h4{color:var(--background);font-size:1.1rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.education-item h4 .material-symbols-outlined{font-size:1.5rem;color:var(--secondary-color)}@media(max-width:768px){.curriculum-content{margin:0 1rem}.cv-header{padding:2rem 1.5rem;margin-bottom:2rem}.cv-name{font-size:2rem}.cv-title{font-size:1.2rem}.cv-contact{flex-direction:column;gap:.75rem;text-align:center}.cv-section{padding:1.5rem;margin-bottom:2rem}.skills-grid{grid-template-columns:1fr;gap:1.5rem}.achievements-grid{grid-template-columns:1fr;gap:1rem}.education-content{grid-template-columns:1fr;gap:1.5rem}.experience-header{flex-direction:column;align-items:flex-start;gap:.5rem}.experience-header h4{font-size:1.1rem}.skill-list li,.responsibility-list li,.achievement-list li,.education-list li{font-size:.9rem;padding:.4rem 0 .4rem 1.2rem}}.project-filters{display:flex;flex-wrap:wrap;gap:.75rem;margin:2rem 0;justify-content:center}.filter-btn{background:var(--surface);color:var(--text-secondary);border:2px solid var(--border);padding:.5rem 1rem;border-radius:25px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .3s ease;font-family:inherit}.filter-btn:hover{border-color:var(--primary-color);color:var(--primary-color);transform:translateY(-1px)}.filter-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.filter-btn:focus{outline:2px solid var(--primary-color);outline-offset:2px}.projects-content{margin-top:2rem}.project-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:2rem;margin-top:2rem}@media(min-width:768px){.project-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1200px){.project-grid{grid-template-columns:repeat(3,1fr)}}.project-card{background:var(--surface);border-radius:12px;padding:2rem 1.5rem;box-shadow:var(--shadow);transition:all .3s ease,opacity .4s ease,transform .4s ease;border:1px solid var(--border);display:flex;flex-direction:column;gap:1rem;margin:0 1rem}.project-card.hidden{opacity:0;transform:translateY(20px);pointer-events:none}.project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.project-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.project-header h3{font-size:1.3rem;font-weight:600;color:var(--text-primary);margin:0;flex:1}.project-status{background:var(--accent-sage);color:var(--primary-dark);padding:.25rem .75rem;border-radius:20px;font-size:.8rem;font-weight:500;white-space:nowrap}.project-description{color:var(--text-secondary);line-height:1.6;flex:1}.project-description p{margin:0}.project-tech{display:flex;flex-wrap:wrap;gap:.5rem}.tech-tag{background:var(--accent-teal);color:var(--primary-color);padding:.25rem .75rem;border-radius:20px;font-size:.85rem;font-weight:500}.project-links{display:flex;gap:1rem;margin-top:auto}.project-link,.project-github{color:var(--primary-color);text-decoration:none;font-weight:500;padding:.5rem 1rem;border-radius:6px;border:2px solid var(--primary-color);transition:all .3s ease;text-align:center;flex:1}.project-link:hover,.project-github:hover{background:var(--primary-color);color:#fff;transform:translateY(-1px)}@media(max-width:767px){.section{padding:3rem 0}.project-filters{gap:.5rem;margin:1.5rem 0}.filter-btn{padding:.4rem .8rem;font-size:.85rem}.project-card{padding:1.25rem}.project-header{flex-direction:column;align-items:stretch;gap:.5rem}.project-header h3{font-size:1.2rem}.project-links{flex-direction:column;gap:.75rem}.project-link,.project-github{padding:.75rem 1rem;font-size:.9rem}}.footer{background:var(--background-dark);color:#fff;padding:3rem 0 1rem}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:2rem}.footer-section h4{font-size:1.125rem;font-weight:600;margin-bottom:1rem;color:#fff}.footer-section p{color:#fffc;line-height:1.6;margin-bottom:1rem}.footer-link{color:var(--primary-color);text-decoration:none;font-weight:500}.footer-link:hover{text-decoration:underline}.footer-metrics{list-style:none;display:flex;flex-direction:column;gap:.5rem}.footer-metrics li{color:#fffc}.footer-metrics strong{color:var(--secondary-color)}.footer-bottom{border-top:1px solid var(--border-dark);padding-top:1rem;text-align:center}.footer-bottom p{color:#fff9;font-size:.875rem}@media(max-width:1024px){.hamburger{display:flex}.nav-menu{position:fixed;left:-100%;top:70px;flex-direction:column;background-color:#fff;width:100%;text-align:center;transition:.3s;box-shadow:0 10px 27px #0000000d;padding:2rem 0}.nav-menu.active{left:0}#home-section-background{width:45%}#home-section-content{margin-left:45%;padding:3rem 2rem}.hero-text{max-width:500px}.hero-content{background:transparent}.architecture-content{grid-template-columns:1fr;gap:2rem}.hero-stats{gap:2rem}.demos-grid{grid-template-columns:1fr}.features-grid,.overview-grid,.tech-stack{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.hero{margin-top:70px;min-height:auto;flex-direction:column;padding:0 1.5rem}#home-section-background{position:relative;width:100%;height:40vh;left:0}#home-section-content{margin-left:0;width:100%;padding:2rem 1.5rem;min-height:60vh}.hero-content{background:transparent}.hero-text{max-width:100%}.hero-title{font-size:2.25rem}.hero-subtitle{font-size:1.1rem}.hero-stats{flex-direction:column;gap:1.5rem;text-align:center}.hero-cta{justify-content:center}.analytics-banner{margin:0 auto 2rem;padding:0 1rem}.banner-image{border-radius:6px}.section-title{font-size:1.75rem}.section-header{margin-bottom:2rem}.overview-grid,.features-grid,.tech-stack,.demos-grid{grid-template-columns:1fr}.demo-card{min-width:unset}}@media(max-width:480px){.container,.nav-container,.hero-content{padding:0 1.5rem}.hero-title{font-size:1.75rem}.section{padding:3rem 0}.overview-card,.feature-category,.tech-category,.project-card{padding:1.5rem}.projects-grid{grid-template-columns:1fr;gap:2rem}}
