*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;min-height:100vh;display:flex;flex-direction:column}html{scroll-behavior:smooth}.navbar{position:fixed;top:0;width:100%;height:50px;background-color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 20px;box-shadow:0 2px 5px #0000001a;z-index:1000}.nav-left{display:flex;align-items:center;gap:15px;transform:translate(-50px);transition:transform .5s ease}.nav-left.visible{transform:translate(0)}.nav-avatar{width:35px;height:35px;border-radius:50%;object-fit:cover;opacity:0;transition:opacity .5s ease}.nav-avatar.visible{opacity:1}.nav-title{color:#339;font-size:1.2rem;font-weight:700}.menu-icon{display:block;cursor:pointer;padding:5px;z-index:1001}.bar{width:25px;height:2px;background-color:#000;margin:6px 0;transition:all .3s ease}.menu-icon.active .bar:nth-child(1){transform:rotate(-45deg) translate(-5px,6px)}.menu-icon.active .bar:nth-child(2){opacity:0}.menu-icon.active .bar:nth-child(3){transform:rotate(45deg) translate(-5px,-6px)}.nav-menu{position:absolute;top:50px;right:0;background-color:#fff;width:200px;padding:15px 0;box-shadow:0 2px 5px #0000001a;border-radius:0 0 5px 5px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s ease;list-style:none}.nav-menu.active{opacity:1;visibility:visible;transform:translateY(0)}.nav-menu li{list-style:none}.nav-menu li a{color:#339;text-decoration:none;padding:12px 25px;display:block;transition:all .3s ease}.nav-menu li a:hover,.nav-menu li a.active{background-color:#f5f5f5;color:#252578}.profile-section{padding:0 20px;background-color:#fff;height:100vh;display:flex;align-items:center;justify-content:center;position:relative}.profile-container{max-width:800px;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:30px;padding-top:50px}.profile-avatar{width:150px;height:150px;border-radius:50%;overflow:hidden;border:4px solid #f5f5f5;box-shadow:0 4px 10px #0000001a}.profile-avatar img{width:100%;height:100%;object-fit:cover}.profile-info h1{font-size:2.5rem;color:#339;margin-bottom:10px}.profile-title{font-size:1.2rem;color:#666;margin-bottom:20px}.profile-description p{font-size:1.1rem;line-height:1.6;color:#444;margin-bottom:15px}.profile-description p:last-child{margin-bottom:0}.scroll-hint{position:absolute;bottom:40px;left:50%;transform:translate(-50%);text-align:center;color:#339;opacity:.8;animation:fadeInOut 2s infinite}.scroll-hint p{font-size:14px;margin-bottom:8px}.scroll-hint i{font-size:20px;animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}@keyframes fadeInOut{0%,to{opacity:.5}50%{opacity:1}}.carousel{padding:0;background-color:#f5f5f5;width:100%;display:flex;justify-content:center;min-height:60vh}.carousel-container{width:100%;max-width:1200px;height:450px;position:relative;margin:20px 40px;align-self:center;border-radius:10px;overflow:hidden;box-shadow:0 4px 10px #0000001a}.carousel-slide{position:absolute;width:100%;height:100%;opacity:0;transition:opacity .5s ease;display:flex;justify-content:center;align-items:center}.carousel-slide.active{opacity:1}.carousel-slide img{max-width:100%;max-height:100%;object-fit:contain}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.7);border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.carousel-button:hover{background:rgba(255,255,255,.9)}.carousel-button.prev{left:10px}.carousel-button.next{right:10px}.carousel-button i{color:#339;font-size:20px}.showcase-section{padding:40px;background-color:#fff}.showcase-container{max-width:1200px;margin:0 auto;display:flex;gap:40px;justify-content:center}.showcase-card{flex:1;max-width:500px;background-color:#fff;border-radius:15px;box-shadow:0 4px 20px #0000001a;padding:30px;transition:transform .3s ease}.showcase-card:hover{transform:translateY(-5px)}.card-header{display:flex;align-items:center;gap:15px;margin-bottom:20px}.card-header i{font-size:24px;color:#339}.card-header h2{font-size:1.8rem;color:#000;margin:0}.card-content{display:flex;flex-direction:column;gap:20px}.card-content p{font-size:1.1rem;line-height:1.6;color:#666}.card-button{display:inline-block;padding:12px 25px;background-color:#339;color:#fff;text-decoration:none;border-radius:25px;align-self:flex-start;transition:all .3s ease}.card-button:hover{background-color:#252578;transform:translateY(-2px)}.services-section{padding:60px 0;background-color:#f8f8f8}.services-container{max-width:1200px;margin:0 auto;padding:0 20px}.services-header{text-align:center;margin-bottom:50px}.services-header i{font-size:40px;color:#339;margin-bottom:20px}.services-header h2{font-size:2rem;color:#333;margin-bottom:15px}.services-header p{font-size:1.1rem;color:#666}.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}.service-card{background:#ffffff;padding:30px;border-radius:15px;text-align:center;box-shadow:0 4px 15px #0000001a;transition:transform .3s ease}.service-card:hover{transform:translateY(-5px)}.service-card i{font-size:40px;color:#339;margin-bottom:20px}.service-card h3{font-size:1.5rem;color:#333;margin-bottom:15px}.service-card p{color:#666;line-height:1.6}.contact-price{text-align:center;margin-top:50px;padding:20px}.price-button{background-color:#339;color:#fff;border:none;padding:15px 40px;font-size:1.2rem;border-radius:30px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:all .3s ease;box-shadow:0 4px 15px #0000001a}.price-button:hover{background-color:#252578;transform:translateY(-3px)}.contact-price p{margin-top:15px;color:#666;font-size:1rem}.social-links{width:100%;height:100px;background-color:#f8f8f8;display:flex;justify-content:center;align-items:center;padding:0 60px;margin-top:auto}.social-icons{display:flex;gap:40px}.social-icon{color:#339;text-decoration:none;font-size:22px;transition:all .3s ease;padding:10px}.social-icon:hover{color:#00a8ff;transform:translateY(-3px)}.page-header{margin-top:50px;padding:60px 20px;background-color:#fff;text-align:center}.header-content{max-width:800px;margin:0 auto}.header-content i{font-size:40px;color:#339;margin-bottom:20px}.header-content h1{font-size:2.5rem;color:#339;margin-bottom:10px}.header-content p{font-size:1.2rem;color:#666}.life-content{padding:40px 20px;background-color:#f5f5f5}.life-section{max-width:1200px;margin:0 auto 60px;background:#ffffff;border-radius:16px;padding:40px;box-shadow:0 4px 20px #0000000f}.life-section-header{margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #eef0ff;text-align:left}.life-section-header h2{font-size:1.6rem;color:#339;font-weight:600;margin-bottom:10px;line-height:1.4}.life-section-header p{font-size:1rem;color:#888;font-style:italic}.life-subsections{display:flex;flex-direction:column;gap:40px}.life-subsection-header{margin-bottom:20px;padding-left:15px;border-left:4px solid #333399}.life-subsection-header h3{font-size:1.25rem;color:#333;font-weight:600;margin-bottom:5px}.life-subsection-header p{font-size:.9rem;color:#999}.life-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}.life-photo{display:flex;flex-direction:column;background:#ffffff;border-radius:10px;overflow:hidden;border:1px solid #eef0ff;transition:transform .3s ease,box-shadow .3s ease}.life-photo:not(.no-image){cursor:pointer}.life-photo:not(.no-image):hover{transform:translateY(-4px);box-shadow:0 8px 20px #33339926}.life-photo-img{width:100%;aspect-ratio:4 / 3;overflow:hidden;background:#f0f0f0}.life-photo-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}.life-photo:not(.no-image):hover .life-photo-img img{transform:scale(1.05)}.life-photo-caption{padding:12px 14px;display:flex;flex-direction:column;text-align:left}.life-photo-caption h4{font-size:.95rem;color:#339;font-weight:600;margin-bottom:4px;line-height:1.4}.life-photo-date{font-size:.78rem;color:#999;margin-bottom:8px}.life-photo-desc{font-size:.85rem;color:#555;line-height:1.55;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.life-photo.no-image{background:linear-gradient(135deg,#fafbff 0%,#eef0ff 100%);border-color:#e0e4ff}.life-photo.no-image .life-photo-caption{padding:18px 16px}.life-photo.no-image .life-photo-desc{-webkit-line-clamp:6}@media (max-width: 768px){.life-photo-grid{grid-template-columns:repeat(2,1fr);gap:10px}.life-photo-caption{padding:10px 12px}.life-photo-caption h4{font-size:.85rem}.life-photo-date{font-size:.7rem;margin-bottom:6px}.life-photo-desc{font-size:.75rem;line-height:1.45;-webkit-line-clamp:2}.life-photo.no-image .life-photo-caption{padding:14px 12px}.life-photo.no-image .life-photo-desc{-webkit-line-clamp:4}}@media (max-width: 768px){.life-content{padding:20px 12px}.life-section{padding:20px;margin-bottom:30px;border-radius:12px}.life-section-header h2{font-size:1.15rem}.life-section-header p{font-size:.85rem}.life-subsection-header h3{font-size:1rem}.life-subsection-header p{font-size:.8rem}.life-subsections{gap:25px}.life-photo-grid{grid-template-columns:repeat(2,1fr);gap:10px}.life-photo-text{padding:12px}.life-photo-text h4{font-size:.85rem}.life-photo-date{font-size:.7rem;margin-bottom:6px}.life-photo-desc{font-size:.75rem;line-height:1.4;-webkit-line-clamp:3}}.portfolio-content{padding:40px;background-color:#f5f5f5;min-height:60vh}.portfolio-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:30px}.portfolio-item{background:#ffffff;border-radius:10px;padding:30px;box-shadow:0 4px 10px #0000001a;transition:transform .3s ease}.portfolio-item:hover{transform:translateY(-5px)}.portfolio-item h3{font-size:1.5rem;color:#000;margin-bottom:15px}.portfolio-item-desc{color:#666;line-height:1.6;margin-bottom:20px}.portfolio-item-tech{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.portfolio-item-tech span{background:#f0f0f0;padding:5px 12px;border-radius:15px;font-size:.9rem;color:#333}.portfolio-item-link{display:inline-block;padding:10px 20px;background-color:#339;color:#fff;text-decoration:none;border-radius:20px;transition:all .3s ease}.portfolio-item-link:hover{background-color:#252578;transform:translateY(-2px)}.back-to-top{position:fixed;right:30px;bottom:100px;width:40px;height:40px;background-color:#339;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s ease;z-index:999;box-shadow:0 2px 10px #0003}.back-to-top.visible{opacity:1;visibility:visible}.back-to-top:hover{background-color:#252578;transform:translateY(-3px)}.floating-buttons{position:fixed;right:20px;bottom:100px;display:flex;flex-direction:column;gap:10px;z-index:1000}.back-to-home{height:45px;background-color:#339;color:#fff;border-radius:25px;display:flex;align-items:center;padding:0 20px;text-decoration:none;transition:all .3s ease}.back-to-home i{margin-right:8px;font-size:1.2rem}.back-to-home span{font-size:14px;white-space:nowrap}.back-to-home:hover{background-color:#252578;transform:translateY(-3px)}.qr-modal,.qq-modal,.phone-modal,.price-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:2000}.qr-container,.qq-container,.phone-container,.price-container{background-color:#fff;padding:30px 40px;border-radius:20px;text-align:center;position:relative;box-shadow:0 5px 20px #0003;max-width:90%}.qr-container img{width:300px;height:300px;object-fit:cover;border-radius:15px;margin-bottom:20px}.qr-container p{color:#333;font-size:18px;font-weight:500}.qq-number,.phone-number{font-size:2rem;color:#339;font-weight:700;margin:20px 0;user-select:all}.copy-qq,.copy-phone,.copy-price-phone{background-color:#339;color:#fff;border:none;padding:10px 25px;border-radius:25px;font-size:1rem;cursor:pointer;transition:all .3s ease}.copy-qq:hover,.copy-phone:hover,.copy-price-phone:hover{background-color:#252578;transform:translateY(-2px)}.copy-qq.copied,.copy-phone.copied,.copy-price-phone.copied{background-color:#28a745}.close-modal,.close-qq-modal,.close-phone-modal,.close-price-modal{position:absolute;top:12px;right:12px;background:#f5f5f5;border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;transition:all .3s ease}.close-modal:hover,.close-qq-modal:hover,.close-phone-modal:hover,.close-price-modal:hover{background:#e0e0e0;transform:rotate(90deg)}.price-content{display:flex;justify-content:space-around;align-items:center;margin:20px 0;gap:30px}.price-qr{flex:1;max-width:250px}.price-qr img{width:100%;height:auto;border-radius:10px;margin-bottom:10px}.price-phone{flex:1;padding:20px;background-color:#f5f5f5;border-radius:10px}.price-number{font-size:1.8rem;color:#339;font-weight:700;margin:15px 0;letter-spacing:1px}.price-tip{color:#666;margin-top:10px}.image-viewer{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000e6;display:flex;justify-content:center;align-items:center;z-index:2000}.close-viewer{position:absolute;top:20px;right:30px;color:#fff;font-size:40px;cursor:pointer;z-index:2001}#viewer-image{max-width:90%;max-height:80vh;object-fit:contain}.image-description{position:absolute;bottom:20px;left:0;width:100%;text-align:center;color:#fff;padding:10px;font-size:16px}.viewer-info{position:absolute;top:20px;left:50%;transform:translate(-50%);text-align:center;color:#fff;z-index:2001}.viewer-title{font-size:1.5rem;color:#fff;margin-bottom:5px}.viewer-date{font-size:1rem;color:#fffc}.viewer-prev,.viewer-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.2);border:none;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;transition:all .3s ease}.viewer-prev{left:30px}.viewer-next{right:30px}.viewer-prev:hover,.viewer-next:hover{background:rgba(255,255,255,.3)}.certificate-viewer{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000e6;display:flex;justify-content:center;align-items:center;z-index:2000}.certificate-viewer img{max-width:90%;max-height:90vh;object-fit:contain}.close-certificate{position:absolute;top:20px;right:30px;color:#fff;font-size:40px;cursor:pointer;z-index:2001;background:none;border:none}.timeline-nav{position:fixed;right:30px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.95);padding:8px;border-radius:10px;box-shadow:0 2px 10px #00000014;z-index:100;max-height:70vh;overflow-y:auto;min-width:140px;backdrop-filter:blur(6px)}.timeline-year{border-bottom:1px solid #f0f0f0}.timeline-year:last-child{border-bottom:none}.timeline-year-label{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;cursor:pointer;font-weight:600;color:#339;font-size:.95rem;transition:background .2s;user-select:none}.timeline-year-label:hover{background:#f5f5fc;border-radius:6px}.timeline-year-label i{font-size:.75rem;color:#999}.timeline-year-items{padding:4px 0 8px}.timeline-item{padding:8px 12px;cursor:pointer;border-left:2px solid transparent;transition:all .2s;border-radius:4px}.timeline-item:hover{background:#f5f5fc;border-left-color:#339}.timeline-date{display:inline-block;font-size:.7rem;color:#999;margin-right:6px}.timeline-title{font-size:.85rem;color:#333}.timeline-subitems{margin-top:4px;margin-left:8px;display:none}.timeline-item:hover .timeline-subitems{display:block}.timeline-subitem{padding:3px 6px;font-size:.75rem;color:#666;cursor:pointer;border-radius:3px}.timeline-subitem:hover{color:#339;background:#eef0ff}@media (max-width: 768px){.timeline-nav{right:8px;padding:6px;min-width:120px;max-height:60vh}.timeline-year-label{padding:8px 10px;font-size:.85rem}.timeline-item{padding:6px 10px}.timeline-title{font-size:.78rem}}@media (max-width: 768px){.profile-avatar{width:150px;height:150px}.profile-info h1{font-size:2rem}.carousel-container{height:350px;max-width:90%}.carousel-button{width:30px;height:30px}.carousel-button i{font-size:16px}.showcase-container{flex-direction:column;gap:30px}.showcase-card{padding:20px}.card-header h2{font-size:1.5rem}.services-grid{grid-template-columns:1fr}.life-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:10px}.life-item img{height:150px}.life-item-info{padding:8px}.life-item-info h3{font-size:.8rem}.life-item-info p,.life-item-info .description{font-size:.7rem}.life-category h2{font-size:1.5rem}.life-subcategory h3{font-size:1.3rem}.portfolio-content{padding:20px}.portfolio-grid{grid-template-columns:1fr}.portfolio-item{padding:20px}.page-header{padding:40px 20px}.header-content h1{font-size:2rem}.header-content i{font-size:30px}.social-links{height:auto;padding:20px;flex-direction:column;gap:15px}.social-icons{gap:30px}.social-icon{font-size:20px;padding:8px}.timeline-nav{right:10px;padding:10px}.timeline-item{padding:8px}.timeline-date{font-size:.7rem}.timeline-title{font-size:.9rem}.timeline-subitem{font-size:.8rem;padding:4px 8px}.viewer-prev,.viewer-next{width:40px;height:40px;font-size:20px}.viewer-prev{left:15px}.viewer-next{right:15px}#viewer-image{max-height:50vh}.viewer-title{font-size:1rem}.image-description{font-size:12px}.price-content{flex-direction:column}.price-container{padding:20px}.qr-container img{width:250px;height:250px}.back-to-top{right:20px;bottom:90px;width:35px;height:35px}.back-home{right:20px;bottom:90px;padding:10px 16px}}.portfolio-category{display:inline-block;padding:4px 12px;background-color:#eef0ff;color:#339;font-size:.8rem;border-radius:12px;margin-bottom:12px;font-weight:500;letter-spacing:.5px}.skills-section{padding:60px 0;background-color:#fff}.skills-container{max-width:1200px;margin:0 auto;padding:0 20px}.skills-header{text-align:center;margin-bottom:50px}.skills-header i{font-size:40px;color:#339;margin-bottom:20px}.skills-header h2{font-size:2rem;color:#333;margin-bottom:15px}.skills-header p{font-size:1.1rem;color:#666}.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}.skill-card{background:#f8f9fc;padding:30px;border-radius:15px;transition:transform .3s ease,box-shadow .3s ease}.skill-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px #3333991a}.skill-card h3{font-size:1.3rem;color:#339;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #eef0ff}.skill-tags{display:flex;flex-wrap:wrap;gap:10px}.skill-tags span{display:inline-block;padding:6px 14px;background-color:#fff;color:#333;border:1px solid #e0e0e0;border-radius:20px;font-size:.9rem;transition:all .3s ease}.skill-tags span:hover{background-color:#339;color:#fff;border-color:#339;transform:translateY(-2px)}@media (max-width: 768px){.skills-grid{grid-template-columns:1fr}.skill-card{padding:20px}.skill-card h3{font-size:1.1rem}.skill-tags span{font-size:.85rem;padding:5px 12px}}.profile-badge{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:25px}.profile-badge span{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background-color:#eef0ff;color:#339;border-radius:20px;font-size:.9rem}.profile-badge span i{font-size:.85rem}.strengths-section{padding:60px 0;background-color:#f8f8f8}.strengths-container{max-width:1200px;margin:0 auto;padding:0 20px}.strengths-header{text-align:center;margin-bottom:50px}.strengths-header i{font-size:40px;color:#339;margin-bottom:20px}.strengths-header h2{font-size:2rem;color:#333;margin-bottom:15px}.strengths-header p{font-size:1.1rem;color:#666}.strengths-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}.strength-card{background:#ffffff;padding:30px;border-radius:15px;border-left:4px solid #333399;transition:transform .3s ease,box-shadow .3s ease}.strength-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px #3333991a}.strength-card i{font-size:28px;color:#339;margin-bottom:15px}.strength-card h3{font-size:1.25rem;color:#333;margin-bottom:12px}.strength-card p{color:#666;line-height:1.7;font-size:.95rem}@media (max-width: 768px){.profile-badge{gap:8px}.profile-badge span{font-size:.8rem;padding:5px 10px}.strengths-grid{grid-template-columns:1fr;gap:20px}.strength-card{padding:20px}.strength-card h3{font-size:1.1rem}}.page-fade-enter-active,.page-fade-leave-active{transition:opacity .25s ease,transform .25s ease}.page-fade-enter-from{opacity:0;transform:translateY(8px)}.page-fade-leave-to{opacity:0;transform:translateY(-8px)}@media (prefers-reduced-motion: reduce){.page-fade-enter-active,.page-fade-leave-active{transition:none}}.life-item-noimg{width:100%;height:120px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8f9fc 0%,#eef0ff 100%);color:#339;font-size:28px;opacity:.5}