:root{--pencil-black: #2b2b2b;--pencil-pink: #ff5964;--pencil-orange: #ff9f1c;--pencil-yellow: #ffe74c;--pencil-green: #38b000;--pencil-blue: #35a7ff;--pencil-purple: #9d4edd;--paper-bg: #fcf9f2;} *{margin: 0;padding: 0;box-sizing: border-box;} html,body{width: 100%;overflow-x: hidden;} body{font-family: 'Mali','Itim',system-ui,-apple-system,sans-serif;background-color: var(--paper-bg);background-image: linear-gradient(rgba(43,43,43,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(43,43,43,0.04) 1px,transparent 1px);background-size: 24px 24px;min-height: 100vh;padding: 0;color: var(--pencil-black);} .container{max-width: 1200px;margin: 0 auto;background: #ffffff;border-radius: 0;box-shadow: 8px 8px 0px rgba(43,43,43,0.1);border-left: 3px solid var(--pencil-black);border-right: 3px solid var(--pencil-black);overflow: hidden;width: 100%;} .services-container{max-width: 1200px;margin: 0 auto;width: 100%;padding: 0 15px;} .header{background: #ffffff;border-bottom: 3px dashed var(--pencil-black);color: var(--pencil-black);padding: 30px 15px;text-align: center;width: 100%;} .header h1{font-size: 2.5rem;margin-bottom: 10px;color: var(--pencil-black);display: inline-flex;align-items: center;justify-content: center;gap: 12px;} .gold-text-gradient{color: var(--pencil-orange);text-shadow: 1px 1px 0px var(--pencil-black);} .header p{font-size: 1.1rem;opacity: 0.9;color: var(--pencil-black);} .tab-container{display: flex;background: #ffffff;border-bottom: 3px solid var(--pencil-black);overflow-x: auto;-webkit-overflow-scrolling: touch;width: 100%;} .tab-button{flex: 1;min-width: 120px;padding: 20px;background: none;border: none;cursor: pointer;font-size: 1.05rem;font-weight: 600;color: var(--pencil-black);transition: all 0.2s ease;position: relative;display: flex;align-items: center;justify-content: center;gap: 8px;} .tab-button:hover{background: rgba(255,89,100,0.08);color: var(--pencil-pink);} .tab-button.active{color: var(--pencil-black);background: var(--pencil-yellow);} .tab-button.active::after{content: '';position: absolute;bottom: 0;left: 0;right: 0;height: 4px;background: var(--pencil-orange);} .tab-icon{font-size: 1.2rem;} .content-container{padding: 10px 5px;min-height: 500px;width: 100%;} .tab-content{display: none;animation: fadeIn 0.4s ease-in-out;width: 100%;} .tab-content.active{display: block;} @keyframes fadeIn{from{opacity: 0;transform: translateY(10px);} to{opacity: 1;transform: translateY(0);}} .services-section{padding: 40px 0;background: transparent;width: 100%;} .services-title{text-align: center;font-size: 2.5rem;font-weight: 700;color: var(--pencil-black);margin-bottom: 50px;position: relative;padding: 0 15px;} .services-title::after{content: '';display: block;width: 120px;height: 6px;background: var(--pencil-pink);margin: 15px auto 0;border-radius: 20px;} .services-grid{display: grid;grid-template-columns: repeat(2,1fr);gap: 30px;width: 100%;} .card-link{text-decoration: none;display: block;color: inherit;transition: all 0.2s ease;} .card-link:hover{transform: translate(-2px,-2px);} .service-card{background: #ffffff;border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;padding: 25px 20px;box-shadow: 6px 6px 0px var(--pencil-black);transition: all 0.2s ease;text-align: center;border: 3px solid var(--pencil-black);height: 100%;display: flex;flex-direction: column;position: relative;overflow: hidden;} .card-link:hover .service-card{box-shadow: 8px 8px 0px var(--card-accent,var(--pencil-pink));background: #ffffff;} .icon-wrapper{width: 80px;height: 80px;background: #ffffff;border: 3px solid var(--pencil-black);border-radius: 50% 45% 52% 48% / 45% 52% 48% 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 20px;transition: all 0.2s ease;box-shadow: 3px 3px 0px var(--pencil-black);} .card-link:hover .icon-wrapper{background: var(--pencil-yellow);transform: rotate(5deg);} .icon-wrapper i{font-size: 2.5rem;color: var(--pencil-black);transition: 0.2s;} .card-link:hover .icon-wrapper i{color: var(--pencil-black);} .service-card h3{font-size: 1.5rem;font-weight: 700;color: var(--pencil-black);margin-bottom: 15px;} .service-card>p{font-size: 1rem;line-height: 1.6;color: #444;margin: 0 0 15px 0;} .service-description{max-height: 100px;overflow: hidden;transition: max-height 0.5s ease-out;position: relative;text-align: left;margin-bottom: 10px;} .service-description.expanded{max-height: 1500px;} .service-description:not(.expanded)::after{content: '';position: absolute;bottom: 0;left: 0;right: 0;height: 60px;background: linear-gradient(transparent,#ffffff);pointer-events: none;transition: opacity 0.3s ease;} .service-description.expanded::after{opacity: 0;} .service-description p{margin-bottom: 10px;font-size: 0.95rem;line-height: 1.6;color: #444;} .service-description p:last-child{margin-bottom: 0;} .read-more-btn{display: inline-flex;align-items: center;gap: 8px;margin: 0 auto 15px auto;padding: 8px 20px;background: #ffffff;color: var(--pencil-black);border-radius: 12px 6px 12px 6px/6px 12px 6px 12px;font-size: 0.9rem;font-weight: 600;cursor: pointer;transition: all 0.2s ease;border: 2.5px solid var(--pencil-black);position: relative;z-index: 10;box-shadow: 3px 3px 0px var(--pencil-black);-webkit-tap-highlight-color: transparent;touch-action: manipulation;} .read-more-btn:hover{background: var(--pencil-yellow);color: var(--pencil-black);transform: translate(-1px,-1px);box-shadow: 4px 4px 0px var(--pencil-black);} .read-more-btn:active{transform: translate(1px,1px);box-shadow: 1px 1px 0px var(--pencil-black);} .read-more-btn i{font-size: 0.8rem;transition: transform 0.3s ease;} .read-more-btn.expanded i{transform: rotate(180deg);} .share-buttons-container{display: flex;gap: 10px;margin-top: auto;padding-top: 15px;border-top: 3px dashed var(--pencil-black);position: relative;z-index: 10;} .share-btn{flex: 1;padding: 10px;border: 2.5px solid var(--pencil-black);border-radius: 10px 5px 10px 5px/5px 10px 5px 10px;cursor: pointer;font-weight: 600;font-size: 0.9rem;transition: all 0.2s ease;display: flex;align-items: center;justify-content: center;gap: 8px;font-family: inherit;box-shadow: 3px 3px 0px var(--pencil-black);-webkit-tap-highlight-color: transparent;touch-action: manipulation;} .share-btn:active{transform: translate(1px,1px);box-shadow: 1px 1px 0px var(--pencil-black);} .share-btn-primary{background: var(--pencil-pink);color: #ffffff;} .share-btn-primary:hover{transform: translate(-1px,-1px);box-shadow: 4px 4px 0px var(--pencil-black);background: var(--pencil-pink);} .share-btn-secondary{background: #ffffff;color: var(--pencil-black);} .share-btn-secondary:hover{background: var(--pencil-yellow);color: var(--pencil-black);transform: translate(-1px,-1px);box-shadow: 4px 4px 0px var(--pencil-black);} .content-card{background: #ffffff;border: 3px solid var(--pencil-black);border-radius: 15px 5px 15px 5px/5px 15px 5px 15px;padding: 25px;margin-bottom: 25px;border-left: 8px solid var(--pencil-pink);box-shadow: 5px 5px 0px rgba(43,43,43,0.08);} .content-card h2{color: var(--pencil-black);margin-bottom: 15px;font-size: 1.8rem;font-weight: 700;} .content-card p{color: #444;line-height: 1.6;margin-bottom: 15px;} .feature-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(250px,1fr));gap: 20px;margin-top: 20px;} .feature-item{background: #ffffff;border: 3px solid var(--pencil-black);padding: 25px;border-radius: 12px 25px 12px 25px/25px 12px 25px 12px;box-shadow: 4px 4px 0px var(--pencil-black);text-align: center;transition: all 0.2s ease;} .feature-item:hover{border-color: var(--pencil-black);transform: translate(-2px,-2px);box-shadow: 6px 6px 0px var(--pencil-blue);} .feature-item h3{color: var(--pencil-black);font-weight: 700;} .feature-item p{color: #444;} .feature-icon{font-size: 3rem;color: var(--pencil-blue);margin-bottom: 15px;} .btn{display: inline-block;padding: 12px 25px;background: var(--pencil-pink);color: #ffffff;text-decoration: none;border: 3px solid var(--pencil-black);border-radius: 30px 10px 30px 10px/10px 30px 10px 30px;transition: all 0.2s ease;border: none;cursor: pointer;font-size: 1rem;font-weight: 700;box-shadow: 4px 4px 0px var(--pencil-black);border: 3px solid var(--pencil-black);} .btn:hover{transform: translate(-2px,-2px);box-shadow: 6px 6px 0px var(--pencil-black);background: var(--pencil-pink);color: #ffffff;} .stats{display: grid;grid-template-columns: repeat(auto-fit,minmax(200px,1fr));gap: 20px;margin-top: 20px;} .stat-card{background: #ffffff;border: 3px solid var(--pencil-black);padding: 20px;border-radius: 15px 5px 15px 5px/5px 15px 5px 15px;text-align: center;box-shadow: 4px 4px 0px var(--pencil-black);} .stat-number{font-size: 2.5rem;font-weight: bold;color: var(--pencil-purple);display: block;} .stat-label{color: #555;font-size: 0.9rem;margin-top: 5px;} .corner-ribbon{position: fixed;top: 60px;right: -75px;background: var(--pencil-pink);color: #ffffff;padding: 10px 120px;font-size: 0.9rem;font-weight: 700;text-transform: uppercase;transform: rotate(45deg);z-index: 99999;box-shadow: 4px 4px 0px var(--pencil-black);border-top: 3px solid var(--pencil-black);border-bottom: 3px solid var(--pencil-black);letter-spacing: 1px;} .corner-ribbon.left{left: -100px;right: auto;transform: rotate(-45deg);} .help-show-btn{position: fixed;top: 20px;right: 15px;width: 40px;height: 40px;border-radius: 50% 45% 50% 40% / 45% 50% 40% 50%;background: var(--pencil-yellow);color: var(--pencil-black);border: 3px solid var(--pencil-black);cursor: pointer;box-shadow: 3px 3px 0px var(--pencil-black);display: flex;align-items: center;justify-content: center;font-size: 20px;z-index: 9999;transition: all 0.2s ease;} @media (max-width: 768px){.help-show-btn{top: 50px;right: 15px;}} .help-show-btn:hover{transform: translate(-1px,-1px);box-shadow: 4px 4px 0px var(--pencil-black);} .help-floating{position: fixed;top: 60px;right: 20px;width: 300px;background: #fff9db;border: 3px solid var(--pencil-black);border-radius: 4px 25px 4px 25px / 25px 4px 25px 4px;box-shadow: 6px 6px 0px var(--pencil-black);z-index: 10000;overflow: hidden;transition: all 0.3s ease;color: var(--pencil-black);transform: rotate(-1.5deg);} .help-floating.hidden{display: none;} .help-header{background: #ffe066;color: var(--pencil-black);border-bottom: 3px solid var(--pencil-black);padding: 15px;display: flex;justify-content: space-between;align-items: center;} .help-title{font-weight: 700;} .help-close{background: none;border: none;color: var(--pencil-black);font-size: 24px;cursor: pointer;line-height: 1;font-weight: 700;} .help-content{padding: 20px;text-align: center;} .help-tips{list-style: none;padding: 0;margin: 15px 0 0;text-align: left;} .help-tips li{padding: 8px 0;border-bottom: 2px dashed rgba(0,0,0,0.1);color: #444;} .help-tips li:last-child{border-bottom: none;} .loading{display: inline-block;width: 20px;height: 20px;border: 3px solid rgba(0,0,0,0.15);border-top: 3px solid var(--pencil-pink);border-radius: 50%;animation: spin 1s linear infinite;margin-left: 10px;} @keyframes spin{0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);}} .toast{position: fixed;bottom: 30px;left: 50%;transform: translateX(-50%) translateY(100px);background: var(--pencil-green);color: white;padding: 15px 30px;border-radius: 15px 5px 15px 5px / 5px 15px 5px 15px;border: 3px solid var(--pencil-black);box-shadow: 5px 5px 0px var(--pencil-black);display: flex;align-items: center;gap: 10px;opacity: 0;transition: all 0.3s ease;z-index: 100000;font-weight: 700;font-size: 1rem;pointer-events: none;width: 90%;max-width: 400px;justify-content: center;} .toast.show{opacity: 1;transform: translateX(-50%) translateY(0);} .toast i{font-size: 1.2rem;} @media (max-width: 1024px){.services-grid{grid-template-columns: repeat(2,1fr);gap: 20px;}} @media (max-width: 768px){body{padding: 0;} .container{border-radius: 0;width: 100%;border-left: none !important;border-right: none !important;box-shadow: none !important;max-width: 100% !important;padding-left: 0 !important;padding-right: 0 !important;} .header{padding: 20px 15px;} .header h1{font-size: 1.8rem;} .header p{font-size: 1rem;} .tab-container{width: 100%;} .tab-button{min-width: auto;flex: 1;padding: 15px 10px;font-size: 0.9rem;} .tab-icon{font-size: 1rem;} .content-container{padding: 1px 0.5px;width: 100%;} .content-card{padding: 15px 10px !important;border-left: none !important;border-right: none !important;border-radius: 0 !important;box-shadow: none !important;margin-left: 0 !important;margin-right: 0 !important;margin-bottom: 15px !important;} .feature-grid{grid-template-columns: 1fr;gap: 15px;padding: 0 10px;} .stats{grid-template-columns: repeat(2,1fr);gap: 15px;padding: 0 10px;} .tab-content>.btn{margin-left: 10px;margin-right: 10px;} .services-section{padding: 10px 0;} .services-container{padding: 0 !important;} .services-title{font-size: 1.6rem;margin-bottom: 30px;padding: 0 10px;} .services-grid{grid-template-columns: 1fr;gap: 15px;} .service-card{padding: 10px 5px;border-radius: 16px;} .icon-wrapper{width: 60px;height: 60px;margin-bottom: 15px;} .icon-wrapper i{font-size: 1.8rem;} .service-card h3{font-size: 1.2rem;margin-bottom: 10px;} .service-card>p{font-size: 0.9rem;line-height: 1.5;} .service-description{max-height: 80px;} .service-description p{font-size: 0.85rem;} .read-more-btn{padding: 8px 20px;font-size: 0.85rem;margin-bottom: 10px;} .share-buttons-container{padding-top: 10px;} .share-btn{padding: 10px;font-size: 0.85rem;} .share-btn span{display: none;} .share-btn i{font-size: 1.1rem;}} @media (max-width: 480px){.header h1{font-size: 1.5rem;} .tab-button{padding: 12px 8px;font-size: 0.8rem;} .tab-icon{display: none;} .services-title{font-size: 1.4rem;} .service-card{padding: 15px 12px;} .icon-wrapper{width: 50px;height: 50px;} .icon-wrapper i{font-size: 1.5rem;} .service-card h3{font-size: 1.1rem;} .service-card>p{font-size: 0.85rem;} .stats{grid-template-columns: 1fr;} .corner-ribbon{font-size: 0.7rem;padding: 6px 75px;top: 25px;right: -60px;}} @media (max-width: 375px){.services-title{font-size: 1.2rem;} .service-card{padding: 12px 10px;} .share-btn{padding: 8px;}} @media (max-height: 500px) and (orientation: landscape){.services-grid{grid-template-columns: repeat(2,1fr);}} .quote-icon{position: relative;top: -15px;} .sticky-menu{background: #ffffff;transition: all 0.3s ease;width: 100%;z-index: 1000;border-bottom: 3px solid var(--pencil-black);} .sticky-menu.stuck{position: fixed;top: 0;left: 0;right: 0;box-shadow: 0 4px 0px rgba(0,0,0,0.1);animation: slideDown 0.3s ease;} @keyframes slideDown{from{transform: translateY(-100%);} to{transform: translateY(0);}} body.has-sticky-menu{padding-top: 60px;} .sticky-menu.stuck+*{margin-top: 60px;} @media (max-width: 768px){.sticky-menu.stuck+*{margin-top: 120px;}} .sticky-menu.stuck .tab-container{background: #ffffff !important;border-bottom: 3px solid var(--pencil-black) !important;} .sticky-menu.stuck .tab-button{color: var(--pencil-black) !important;} .sticky-menu.stuck .tab-button.active{background: var(--pencil-yellow) !important;color: var(--pencil-black) !important;} .btn-primary{background: var(--pencil-pink) !important;border: 3px solid var(--pencil-black) !important;color: var(--pencil-black) !important;font-weight: 700 !important;box-shadow: 4px 4px 0px var(--pencil-black) !important;border-radius: 12px 6px 12px 6px/6px 12px 6px 12px !important;} .btn-primary:hover{box-shadow: 6px 6px 0px var(--pencil-black) !important;transform: translate(-2px,-2px);color: var(--pencil-black) !important;} #contactForm input,#contactForm textarea{background: #ffffff !important;border: 3px solid var(--pencil-black) !important;color: var(--pencil-black) !important;border-radius: 10px 5px 10px 5px/5px 10px 5px 10px !important;transition: all 0.2s ease;} #contactForm input:focus,#contactForm textarea:focus{border-color: var(--pencil-pink) !important;outline: none;box-shadow: 4px 4px 0px rgba(43,43,43,0.15) !important;background: #ffffff !important;} #contactForm label{color: var(--pencil-black) !important;} .human-check-container{background: #ffffff !important;border: 3px solid var(--pencil-black) !important;border-radius: 10px !important;box-shadow: 4px 4px 0px rgba(43,43,43,0.08);} .human-check-container label{color: var(--pencil-black) !important;} .captcha-question{background: var(--pencil-yellow) !important;color: var(--pencil-black) !important;border: 2px dashed var(--pencil-black) !important;} .wechat-popup{display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.6);z-index: 100000;justify-content: center;align-items: center;} .popup-content{background-color: #ffffff;border: 3px solid var(--pencil-black);padding: 2.5rem 2rem 2rem 2rem;border-radius: 15px 5px 15px 5px/5px 15px 5px 15px;position: relative;max-width: 320px;width: 90%;text-align: center;box-shadow: 6px 6px 0px var(--pencil-black);} .popup-content img{max-width: 100%;margin-top: 1rem;border: 3px solid var(--pencil-black);border-radius: 8px;} .popup-content h4{margin-bottom: 1rem;color: var(--pencil-black);font-size: 1.1rem;line-height: 1.4;} .close-btn{position: absolute;top: 10px;left: 15px;font-size: 1.8rem;font-weight: bold;background: none;border: none;cursor: pointer;color: var(--pencil-black);width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;transition: color 0.2s ease;} .close-btn:hover{color: var(--pencil-pink);} .close-button{margin-top: 1.5rem;padding: 0.6rem 1.5rem;border: 3px solid var(--pencil-black);border-radius: 30px;background: var(--pencil-yellow);color: var(--pencil-black);font-weight: 700;cursor: pointer;transition: all 0.2s ease;font-size: 0.95rem;box-shadow: 3px 3px 0px var(--pencil-black);} .close-button:hover{transform: translate(-1px,-1px);box-shadow: 4px 4px 0px var(--pencil-black);} .main-footer{background: #ffffff;border-top: 3px dashed var(--pencil-black);color: var(--pencil-black);padding: 3rem 1.5rem 2rem 1.5rem;text-align: center;width: 100%;} .footer-social h3{color: var(--pencil-black);font-size: 1.2rem;margin-bottom: 1.5rem;font-weight: 700;} .social-icons{display: flex;justify-content: center;gap: 1rem;margin: 1rem 0;} .social-icons a{display: inline-flex;align-items: center;justify-content: center;width: 44px;height: 44px;border-radius: 50% 40% 45% 50% / 40% 45% 50% 55%;background-color: #ffffff;border: 3px solid var(--pencil-black);color: var(--pencil-black);transition: all 0.2s ease;text-decoration: none !important;font-size: 1.2rem;box-shadow: 3px 3px 0px var(--pencil-black);} .social-icons a:hover{background: var(--pencil-yellow);color: var(--pencil-black);border-color: var(--pencil-black);transform: translate(-2px,-2px);box-shadow: 5px 5px 0px var(--pencil-black);} .footer-bottom{margin-top: 2rem;font-size: 0.9rem;color: #555;border-top: 2px dashed rgba(0,0,0,0.1);padding-top: 1.5rem;} #stats-text{border-top: 2px dashed rgba(0,0,0,0.1) !important;color: #555 !important;} #stats-text a i{color: var(--pencil-pink);} #stats-text a i:hover{color: var(--pencil-orange);} .mourning-ribbon{position: fixed;top: 0;left: 0;z-index: 999999;pointer-events: none;} .mourning-ribbon img{width: 145px;height: auto;margin-top: 10px;margin-left: 15px;filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));opacity: 0.9;transition: opacity 0.3s ease;} .mourning-ribbon img:hover{opacity: 1;} @media (max-width: 768px){.mourning-ribbon img{width: 35px;margin-top: 55px;margin-left: 10px;}}