*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333;background-color:#f8f9fa;background-image:linear-gradient(135deg,#f8f9fa,#e9ecef);scroll-behavior:smooth}.container{max-width:1200px;margin:0 auto;padding:0 20px}.header{background:linear-gradient(135deg,#007bff,#0056b3);color:#fff;padding:20px 0;box-shadow:0 4px 20px #0003;position:sticky;top:0;z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header .container{display:flex;flex-direction:column;align-items:center;padding:20px 0}.nav-menu{margin:20px 0}.nav-menu ul{display:flex;gap:30px;list-style:none}.nav-menu ul li a{color:#fff;text-decoration:none;font-size:1.1rem;font-weight:600;transition:color .3s ease;position:relative}.nav-menu ul li a:hover{color:gold}.nav-menu ul li a:after{content:"";position:absolute;bottom:-5px;left:0;width:0;height:2px;background-color:gold;transition:width .3s ease}.nav-menu ul li a:hover:after{width:100%}.logo-text{display:flex;flex-direction:column;text-align:center;margin-bottom:20px}.company-name{font-size:2rem;font-weight:700;margin-bottom:5px}.company-tagline{font-size:.9rem;opacity:.9}@media (max-width: 768px){.company-name{font-size:1.8rem}}.header-info{display:flex;align-items:center;gap:30px}.emergency-call{display:flex;align-items:center;gap:10px}.call-icon{font-size:1.5rem}.call-info{display:flex;flex-direction:column}.call-label{font-size:.8rem;opacity:.9}.phone-number{color:#fff;text-decoration:none;font-size:1.5rem;font-weight:600;transition:color .3s ease}.phone-number:hover{color:gold}.service-time{display:flex;align-items:center;gap:5px;font-size:.9rem}.time-icon{font-size:1.2rem}.hero{background:linear-gradient(#007bffcc,#0056b3cc),url(https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20road%20rescue%20service%20with%20tow%20truck%20at%20night%2C%20realistic%20style%2C%20dark%20background%2C%20emergency%20lights%2C%20professional%20looking&image_size=landscape_16_9);background-size:cover;background-position:center;color:#fff;padding:120px 0;text-align:center;position:relative;overflow:hidden}.hero-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#007bff4d;z-index:1}.hero-content{position:relative;z-index:2}.hero h2{font-size:3.5rem;margin-bottom:20px;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.1)}.hero p{font-size:1.3rem;margin-bottom:40px;max-width:700px;margin-left:auto;margin-right:auto;opacity:.95}.hero-stats{display:flex;justify-content:center;gap:50px;margin-bottom:50px;flex-wrap:wrap}.stat-item{text-align:center}.stat-number{display:block;font-size:2rem;font-weight:700;margin-bottom:5px;color:gold}.stat-label{font-size:.9rem;opacity:.9}.btn-primary{display:inline-block;background:linear-gradient(135deg,gold,#ffed4e);color:#333;padding:18px 40px;border-radius:50px;text-decoration:none;font-size:1.2rem;font-weight:600;transition:all .3s ease;box-shadow:0 4px 12px #ffd7004d;text-transform:uppercase;letter-spacing:1px;position:relative;overflow:hidden}.btn-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.btn-primary:hover:before{left:100%}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 20px #ffd70066;background:linear-gradient(135deg,#ffed4e,gold)}.about{padding:80px 0;background-color:#fff;position:relative;overflow:hidden}.about:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:url(https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=xianglan%20road%20rescue%20logo%2C%20professional%20emblem%2C%20blue%20color%20scheme%2C%20tow%20truck%20icon%2C%20modern%20design%2C%20transparent%20background&image_size=square);background-size:500px;background-repeat:no-repeat;background-position:center;opacity:.1;z-index:1}.about-content{max-width:800px;margin:0 auto;text-align:center;font-size:1.1rem;line-height:1.8;color:#555;position:relative;z-index:2}.about-content p{margin-bottom:20px;font-weight:400}.services{padding:80px 0;background-color:#f8f9fa;background-image:linear-gradient(135deg,#007bff0d,#0056b30d);position:relative}.services:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><circle cx="100" cy="100" r="2" fill="%23007bff" opacity="0.1"/><circle cx="50" cy="50" r="1" fill="%23007bff" opacity="0.05"/><circle cx="150" cy="150" r="1" fill="%23007bff" opacity="0.05"/></svg>');z-index:1}.section-title{text-align:center;font-size:2.8rem;margin-bottom:15px;color:#333;position:relative;font-weight:700;letter-spacing:-.5px}.section-subtitle{text-align:center;font-size:1.2rem;margin-bottom:60px;color:#666;max-width:800px;margin-left:auto;margin-right:auto}.section-title:after{content:"";display:block;width:120px;height:4px;background:linear-gradient(90deg,#007bff,#0056b3);margin:20px auto 0;border-radius:2px;box-shadow:0 2px 8px #007bff4d}.service-section{margin-bottom:80px}.service-section:last-child{margin-bottom:0}.service-section-header{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:40px;position:relative}.service-section-header:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#ddd,transparent);z-index:1}.service-category{font-size:1.8rem;color:#333;font-weight:600;background-color:#f8f9fa;padding:0 30px;position:relative;z-index:2;margin:0}.service-category-en{font-size:1rem;color:#007bff;font-weight:500;text-transform:uppercase;letter-spacing:1px;background-color:#f8f9fa;padding:0 20px;position:relative;z-index:2}.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-top:60px;position:relative;z-index:2}.service-card{background:linear-gradient(135deg,#fff,#f8f9fa);padding:40px;border-radius:20px;text-align:center;transition:all .3s ease;box-shadow:0 8px 30px #0000001f;border:1px solid rgba(0,123,255,.1);position:relative;overflow:hidden;cursor:pointer}.service-card:nth-child(1){border-top:4px solid #007bff}.service-card:nth-child(2){border-top:4px solid #28a745}.service-card:nth-child(3){border-top:4px solid #ffc107}.service-card:nth-child(4){border-top:4px solid #dc3545}.service-card:nth-child(5){border-top:4px solid #17a2b8}.service-card:nth-child(6){border-top:4px solid #6f42c1}.service-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,123,255,.1),transparent);transition:left .5s ease}.service-card:hover:before{left:100%}.service-card:hover{transform:translateY(-15px);box-shadow:0 20px 40px #007bff26;border-color:#007bff4d}.service-card:hover .service-icon{transform:scale(1.1) rotate(5deg);transition:all .3s ease}.service-card:hover .service-title{color:#007bff;transition:color .3s ease}.service-card:hover .service-more{transform:translate(5px);transition:transform .3s ease}.service-icon{font-size:4rem;margin-bottom:25px;display:block}.service-title{font-size:1.4rem;font-weight:600;color:#333;margin-bottom:15px}.service-description{color:#666;line-height:1.6}.service-more{margin-top:15px;color:#007bff;font-weight:600;cursor:pointer;transition:color .3s ease}.service-more:hover{color:#0056b3;text-decoration:underline}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:2000;animation:fadeIn .3s ease}.modal-content{background-color:#fff;border-radius:15px;padding:40px;max-width:800px;width:90%;max-height:90vh;overflow-y:auto;position:relative;animation:zoomIn .3s ease}.modal-close{position:absolute;top:20px;right:20px;background:none;border:none;font-size:2rem;cursor:pointer;color:#666;transition:color .3s ease}.modal-close:hover{color:#333}.modal-title{font-size:2rem;margin-bottom:20px;color:#333;text-align:center}.service-gallery{margin-bottom:30px}.gallery-container{position:relative;width:100%;height:300px;overflow:hidden;border-radius:15px;margin-bottom:20px}.gallery-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease,transform .5s ease;transform:scale(1.1)}.gallery-image.active{opacity:1;transform:scale(1)}.gallery-controls{display:flex;justify-content:center;align-items:center;gap:20px}.gallery-btn{width:40px;height:40px;border-radius:50%;border:none;background:linear-gradient(135deg,#007bff,#0056b3);color:#fff;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.gallery-btn:hover:not(:disabled){transform:scale(1.1);box-shadow:0 4px 12px #007bff66}.gallery-btn:disabled{opacity:.5;cursor:not-allowed}.gallery-indicator{font-size:1rem;color:#666;font-weight:600}@media (max-width: 768px){.gallery-container{height:200px}.gallery-btn{width:35px;height:35px;font-size:1rem}}.modal-description{font-size:1.1rem;line-height:1.6;color:#555;margin-bottom:30px;text-align:center}.modal-btn{display:block;margin:0 auto;text-align:center}@media (max-width: 768px){.modal-content{padding:30px 20px}.service-gallery{grid-template-columns:1fr}.gallery-image{height:180px}.modal-title{font-size:1.8rem}}.process{padding:80px 0;background-color:#fff;background-image:linear-gradient(135deg,#007bff08,#0056b308);position:relative}.process:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150"><path d="M0,75 L150,75" stroke="%23007bff" stroke-width="0.5" opacity="0.1"/><path d="M75,0 L75,150" stroke="%23007bff" stroke-width="0.5" opacity="0.1"/></svg>');z-index:1}.process-steps{display:flex;justify-content:space-between;gap:30px;margin-top:60px;flex-wrap:wrap;position:relative;z-index:2}.process-step{flex:1;min-width:200px;text-align:center;position:relative;padding:40px 20px;background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:20px;transition:all .3s ease;box-shadow:0 4px 15px #00000014;border:1px solid rgba(0,123,255,.1)}.process-step:hover{transform:translateY(-10px);box-shadow:0 15px 30px #0000001f;border-color:#007bff4d}.step-number{display:inline-block;width:60px;height:60px;line-height:60px;color:#fff;border-radius:50%;font-size:1.5rem;font-weight:700;margin-bottom:20px}.process-step:nth-child(1) .step-number{background-color:#007bff}.process-step:nth-child(2) .step-number{background-color:#28a745}.process-step:nth-child(3) .step-number{background-color:#ffc107}.process-step:nth-child(4) .step-number{background-color:#dc3545}.process-step h3{font-size:1.2rem;margin-bottom:15px;color:#333}.process-step p{color:#666;line-height:1.6}.contact{padding:80px 0;background-color:#f8f9fa}.contact-card{background:linear-gradient(135deg,#fff,#f8f9fa);padding:70px;border-radius:25px;text-align:center;box-shadow:0 12px 40px #00000026;max-width:700px;margin:0 auto;border:1px solid rgba(0,123,255,.1);position:relative;overflow:hidden}.contact-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#007bff,#0056b3)}.contact-card h2{font-size:2.2rem;margin-bottom:30px;color:#333;font-weight:700}.emergency-phone{display:block;font-size:3.5rem;font-weight:700;color:#007bff;text-decoration:none;margin-bottom:20px;transition:color .3s ease;text-shadow:0 2px 4px rgba(0,0,0,.1)}.emergency-phone:hover{color:#0056b3}.service-hours{font-size:1.2rem;color:#666;margin-bottom:40px}.contact-info{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;max-width:600px;margin:0 auto}.info-item{display:flex;align-items:center;gap:10px}.info-icon{font-size:1.5rem;color:#007bff}.info-text{color:#555;font-size:1rem}.emergency-fixed{position:fixed;bottom:30px;right:30px;z-index:999}.emergency-btn{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#ff416c,#ff4b2b);color:#fff;padding:15px 25px;border-radius:50px;text-decoration:none;font-weight:600;box-shadow:0 8px 25px #ff416c66;transition:all .3s ease;animation:pulse 2s infinite}.emergency-btn:hover{transform:scale(1.05);box-shadow:0 12px 30px #ff416c99}.btn-icon{font-size:1.5rem}.btn-text{font-size:1.1rem}@keyframes pulse{0%{box-shadow:0 0 #ff416cb3}70%{box-shadow:0 0 0 15px #ff416c00}to{box-shadow:0 0 #ff416c00}}@media (max-width: 768px){.testimonials-grid{grid-template-columns:1fr}.emergency-fixed{bottom:20px;right:20px}.emergency-btn{padding:12px 20px}.btn-text{display:none}.btn-icon{font-size:1.8rem}}.testimonials{padding:80px 0;background-color:#fff;position:relative;overflow:hidden}.testimonials:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(135deg,#007bff08,#0056b308);z-index:1}.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-top:60px;position:relative;z-index:2}.testimonial-card{background:linear-gradient(135deg,#fff,#f8f9fa);padding:40px;border-radius:20px;box-shadow:0 8px 30px #0000001f;border:1px solid rgba(0,123,255,.1);transition:all .3s ease;opacity:0;transform:translateY(30px);transition:all .6s ease}.testimonial-card.active{opacity:1;transform:translateY(0)}.testimonial-card:hover{transform:translateY(-10px);box-shadow:0 15px 30px #00000026}.testimonial-rating{font-size:1.2rem;margin-bottom:20px;color:gold}.testimonial-text{font-size:1.1rem;line-height:1.6;color:#555;margin-bottom:20px;font-style:italic}.testimonial-author{font-weight:600;color:#333;text-align:right}.faq{padding:80px 0;background-color:#f8f9fa;position:relative;overflow:hidden}.faq:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(135deg,#007bff0d,#0056b30d);z-index:1}.faq-items{max-width:800px;margin:60px auto 0;position:relative;z-index:2}.faq-item{background:linear-gradient(135deg,#fff,#f8f9fa);padding:30px;border-radius:15px;margin-bottom:20px;box-shadow:0 4px 15px #00000014;border:1px solid rgba(0,123,255,.1);transition:all .3s ease;opacity:0;transform:translateY(20px);transition:all .6s ease}.faq-item.active{opacity:1;transform:translateY(0)}.faq-item:hover{box-shadow:0 8px 25px #0000001f}.faq-question{font-size:1.2rem;font-weight:600;color:#333;margin-bottom:15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.faq-answer{font-size:1rem;line-height:1.6;color:#555}.footer{background-color:#343a40;color:#fff;padding:60px 0 30px}.footer-content{display:flex;justify-content:space-between;gap:40px;margin-bottom:40px;flex-wrap:wrap}.footer-section{flex:1;min-width:200px}.footer-section h3{font-size:1.2rem;margin-bottom:20px;color:gold}.footer-section p{color:#adb5bd;line-height:1.6}.footer-services{list-style:none}.footer-services li{margin-bottom:10px;color:#adb5bd;transition:color .3s ease}.footer-services li:hover{color:#fff}.footer-phone{margin-bottom:10px;color:#adb5bd}.footer-time{color:#adb5bd}.footer-bottom{border-top:1px solid #495057;padding-top:30px;text-align:center}.copyright{margin-bottom:10px;color:#adb5bd}.icp{color:#adb5bd;text-decoration:none;font-size:.9rem;transition:color .3s ease}.icp:hover{color:#fff}@media (max-width: 768px){.header .container{flex-direction:column;gap:20px;text-align:center}.header-info{flex-direction:column;gap:15px}.hero h2{font-size:2.5rem}.hero p{font-size:1.1rem}.hero-stats{gap:30px}.stat-number{font-size:1.5rem}.process-steps{flex-direction:column;align-items:center}.process-step{width:100%;max-width:400px}.contact-card{padding:40px 20px}.emergency-phone{font-size:2.5rem}.contact-info{flex-direction:column;gap:20px}.footer-content{flex-direction:column;align-items:center;text-align:center}.footer-section{margin-bottom:30px}}@media (max-width: 480px){.company-name{font-size:1.8rem}.phone-number{font-size:1.3rem}.hero{padding:80px 0}.hero h2{font-size:2rem}.section-title{font-size:2.2rem}.services{padding:60px 0}.services-grid{grid-template-columns:1fr}.about,.process,.contact{padding:60px 0}}@keyframes fadeIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes rotateIn{0%{opacity:0;transform:rotate(-10deg) scale(.8)}to{opacity:1;transform:rotate(0) scale(1)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}.service-card{opacity:0;transform:translateY(30px);transition:all .6s ease}.service-card.active{opacity:1;transform:translateY(0);animation:fadeIn .6s ease forwards}.service-card.active:nth-child(1){transition-delay:.1s}.service-card.active:nth-child(2){transition-delay:.2s}.service-card.active:nth-child(3){transition-delay:.3s}.service-card.active:nth-child(4){transition-delay:.4s}.service-card.active:nth-child(5){transition-delay:.5s}.service-card.active:nth-child(6){transition-delay:.6s}.service-icon{opacity:0;transform:scale(.3);transition:all .8s ease}.service-card.active .service-icon{opacity:1;transform:scale(1);animation:bounceIn .8s ease forwards;animation-delay:.2s}.process-step{opacity:0;transform:translateY(30px);transition:all .6s ease}.process-step.active{opacity:1;transform:translateY(0);animation:fadeIn .6s ease forwards}.process-step.active:nth-child(1){transition-delay:.1s}.process-step.active:nth-child(2){transition-delay:.2s}.process-step.active:nth-child(3){transition-delay:.3s}.process-step.active:nth-child(4){transition-delay:.4s}.process-step .step-number{opacity:0;transform:rotate(-10deg) scale(.8);transition:all .8s ease}.process-step.active .step-number{opacity:1;transform:rotate(0) scale(1);animation:rotateIn .8s ease forwards}.contact-card{opacity:0;transform:scale(.8);transition:all .8s ease}.contact-card.active{opacity:1;transform:scale(1);animation:zoomIn .8s ease forwards}.about-content{opacity:0;transform:translateY(30px);transition:all .8s ease}.about-content.active{opacity:1;transform:translateY(0);animation:fadeIn .8s ease forwards}.hero-content h2{animation:slideInLeft .8s ease forwards}.hero-content p{animation:slideInRight .8s ease forwards;animation-delay:.2s}.hero-stats{animation:fadeIn .8s ease forwards;animation-delay:.4s}.btn-primary{animation:bounceIn 1s ease forwards;animation-delay:.6s}.scroll-reveal{opacity:0;transform:translateY(30px);transition:all .6s ease}.scroll-reveal.active{opacity:1;transform:translateY(0)}