*{ margin:0;padding:0;box-sizing:border-box} body{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.5;color:var(--text-primary);background-color:var(--bg-page);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} a{ color:var(--primary);text-decoration:none;transition:color 0.15s ease} a:hover{ color:var(--primary-hover)} .container{ max-width:1200px;margin:0 auto;padding:0 24px} .header{ background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 8px rgba(0,0,0,0.06);position:sticky;top:0;z-index:100;transition:box-shadow 0.25s ease} .header.scrolled{ box-shadow:0 4px 16px rgba(0,0,0,0.12)} .header .container{ display:flex;justify-content:space-between;align-items:center;padding:16px 24px} .logo{ display:flex;align-items:center;gap:10px} .logo-icon{ font-size:28px} .logo-text{ font-size:20px;font-weight:700;color:var(--primary)} .nav{ display:flex;gap:24px;align-items:center} .nav a{ text-decoration:none;color:var(--text-secondary);font-size:15px;font-weight:500;transition:color 0.15s ease} .nav a:hover{ color:var(--primary)} .btn-quote-header,.btn-open-quote{ display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;padding:10px 20px !important;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%) !important;color:#fff !important;border:none !important;border-radius:50px !important;font-size:14px !important;font-weight:600 !important;cursor:pointer !important;transition:all 0.2s ease !important;box-shadow:0 4px 12px rgba(102,126,234,0.35) !important;min-height:44px !important;line-height:1 !important;font-family:inherit !important;white-space:nowrap !important;z-index:999 !important;position:relative !important;touch-action:manipulation !important;-webkit-tap-highlight-color:transparent !important} .btn-quote-header:hover,.btn-open-quote:hover{ transform:translateY(-2px) !important;box-shadow:0 6px 20px rgba(102,126,234,0.45) !important} .btn-quote-header:active,.btn-open-quote:active{ transform:translateY(0) !important} .btn-quote-header .btn-icon{ font-size:18px !important} .hero{ background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:72px 0;text-align:center;position:relative;overflow:hidden} .hero::before{ content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 50%,rgba(255,255,255,0.1) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgba(255,255,255,0.08) 0%,transparent 50%);pointer-events:none} .hero .container{ position:relative;z-index:1} .hero h1{ font-size:40px;font-weight:700;margin-bottom:16px;line-height:1.2} .hero p{ font-size:18px;opacity:0.9;margin-bottom:40px} .search-box{ display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:24px} .search-input{ padding:14px 20px;font-size:16px;border:none;border-radius:12px;min-width:280px;max-width:360px;box-shadow:0 4px 12px rgba(0,0,0,0.1);transition:box-shadow 0.2s ease;font-family:inherit} .search-input:focus{ outline:none;box-shadow:0 6px 20px rgba(0,0,0,0.15)} .search-results-info{ margin-top:16px;font-size:14px;color:rgba(255,255,255,0.85);min-height:20px} .filter-select{ padding:14px 20px;font-size:16px;border:none;border-radius:12px;background:#fff;color:var(--text-primary);min-width:160px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.1);transition:box-shadow 0.2s ease;font-family:inherit} .filter-select:focus{ outline:none;box-shadow:0 6px 20px rgba(0,0,0,0.15)} .hero-stats{ display:flex;justify-content:center;align-items:center;gap:20px;margin-top:24px;flex-wrap:wrap} .stat-item{ background:rgba(255,255,255,0.18);backdrop-filter:blur(8px);padding:10px 20px;border-radius:50px;font-size:15px;color:rgba(255,255,255,0.95);font-weight:500} .stat-item strong{ color:#FFD700;font-size:18px;font-weight:700;margin-right:4px} .stat-divider{ color:rgba(255,255,255,0.4);font-size:14px} .trust-section{ padding:56px 0;background:#fff} .trust-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center} .trust-item{ display:flex;flex-direction:column;align-items:center;gap:12px} .trust-icon{ width:64px;height:64px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff} .trust-number{ font-size:36px;font-weight:700;color:var(--primary);line-height:1} .trust-label{ font-size:15px;color:var(--text-secondary)} .company-section{ padding:56px 0} .section-title{ font-size:28px;color:var(--text-primary);margin-bottom:24px;display:flex;align-items:center;gap:12px;font-weight:700} .section-desc{ color:var(--text-secondary);font-size:16px;margin-bottom:32px;text-align:center} .city-icon{ font-size:28px} .company-count{ font-size:14px;color:var(--text-weak);font-weight:500;background:var(--bg-page);padding:6px 16px;border-radius:50px} .company-list{ display:grid;gap:20px} .company-card{ background:var(--bg-card);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);transition:all var(--transition-normal);border:1px solid var(--border)} .company-card:hover{ transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--primary)} .company-card.hidden{ display:none} .company-card.search-hidden{ display:none} .company-card.featured{ border:2px solid var(--primary);background:linear-gradient(to bottom,#fff 0%,#F0F7FF 100%)} .company-header{ display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px} .company-title-wrap{ display:flex;align-items:center;gap:12px;flex-wrap:wrap} .company-name{ font-size:20px;color:var(--primary);margin:0;font-weight:700} .company-name:hover{ text-decoration:underline;cursor:pointer} .company-name-en{ font-size:14px;color:var(--text-weak);font-weight:400} .company-rating{ background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);padding:8px 12px;border-radius:var(--radius-md);font-size:14px;font-weight:500;white-space:normal;word-break:break-word;display:inline-flex;align-items:center;gap:6px} .company-rating.rating-none{ color:var(--text-weak)} .company-rating .rating-stars{ color:#FFB800} .badge-featured{ background:var(--primary);color:#fff;padding:6px 12px;border-radius:var(--radius-md);font-size:12px;font-weight:600;white-space:nowrap} .badge-verified{ background:var(--success-light);color:#1B5E20 !important;padding:6px 12px;border-radius:var(--radius-md);font-size:12px;font-weight:600;border:1px solid #B7EB8F;cursor:help;transition:all 0.2s ease} .badge-verified:hover{ background:#B7EB8F;color:#1B5E20 !important} .badge-insured{ background:var(--primary-light);color:#0D47A1 !important;padding:6px 12px;border-radius:var(--radius-md);font-size:12px;font-weight:600;border:1px solid #ADC6FF;cursor:help;transition:all 0.2s ease} .badge-insured:hover{ background:#ADC6FF;color:#0D47A1 !important} .badge-high-rating{ background:#FFF7E6;color:#E65100 !important;padding:6px 12px;border-radius:var(--radius-md);font-size:12px;font-weight:600;border:1px solid #FFD591} .company-actions{ display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap} .btn-call{ display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:#D32323;color:#fff !important;text-decoration:none;border-radius:var(--radius-md);font-size:14px;font-weight:600;transition:all 0.2s ease;box-shadow:0 2px 8px rgba(211,35,35,0.25);min-height:48px} .btn-call span{ color:#fff !important} .btn-call .btn-icon{ filter:brightness(0) invert(1)} .btn-call:hover{ background:#B71C1C;transform:translateY(-1px);box-shadow:0 4px 12px rgba(183,28,28,0.35)} .btn-call.btn-secondary{ background:var(--bg-card);color:#0D47A1 !important;border:1px solid #0D47A1;box-shadow:none} .btn-call.btn-secondary:hover{ background:#E8F3FF;color:#0A367D !important;border-color:#0A367D} .btn-call.btn-disabled{ background:var(--text-weak);cursor:not-allowed;box-shadow:none} .btn-call.btn-disabled:hover{ transform:none} .company-info{ margin-bottom:16px} .info-item{ display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:14px;color:var(--text-secondary)} .info-icon{ font-size:16px;color:var(--primary);min-width:20px} .price-highlight{ color:var(--danger);font-weight:600} .company-services{ display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px} .tag{ background:var(--primary-light);color:#0D47A1 !important;padding:8px 16px;border-radius:50px;font-size:13px;font-weight:500;transition:all 0.2s ease;border:none} .tag:hover{ background:var(--primary);color:#fff !important} .company-desc{ color:var(--text-secondary);font-size:14px;line-height:1.6} .company-footer{ display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--border);margin-top:16px} .btn-website{ display:inline-flex;align-items:center;gap:6px;padding:10px 20px;background:#0D47A1;color:#fff !important;text-decoration:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;transition:all 0.2s ease;box-shadow:0 2px 8px rgba(13,71,161,0.25);min-height:44px} .btn-website:hover{ background:#0A367D;transform:translateY(-1px);box-shadow:0 4px 12px rgba(10,54,125,0.35)} .company-wechat{ display:inline-flex;align-items:center;gap:6px;color:var(--success);font-size:14px;font-weight:500;background:#E8FFEE;padding:8px 14px;border-radius:var(--radius-md);border:1px solid #B7EB8F} .btn-report{ padding:10px 16px;background:transparent;color:#333 !important;border:1px solid #999;border-radius:var(--radius-md);font-size:13px;cursor:pointer;transition:all 0.2s ease;min-height:44px} .btn-report:hover{ background:#f5f5f5;color:#000 !important;border-color:#666} .modal{ display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);z-index:1000;justify-content:center;align-items:center} .modal.show{ display:flex} .modal-content{ background:var(--bg-card);border-radius:var(--radius-lg);max-width:480px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.2)} .modal-header{ display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid var(--border)} .modal-header h3{ font-size:20px;color:var(--text-primary);font-weight:600} .modal-close{ background:none;border:none;font-size:28px;color:var(--text-weak);cursor:pointer;line-height:1;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 0.2s ease} .modal-close:hover{ background:var(--bg-page);color:var(--text-primary)} .modal-body{ padding:24px} .modal-company-name{ background:var(--bg-page);padding:16px;border-radius:var(--radius-md);color:var(--primary);font-weight:600;margin-bottom:20px;text-align:center;font-size:16px} .form-group{ margin-bottom:20px} .form-group label{ display:block;margin-bottom:8px;font-size:14px;color:var(--text-secondary);font-weight:500} .form-group select,.form-group input,.form-group textarea{ width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-md);font-size:15px;font-family:inherit;color:var(--text-primary);transition:all 0.2s ease} .form-group select:focus,.form-group input:focus,.form-group textarea:focus{ outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(22,93,255,0.1)} .form-actions{ display:flex;gap:12px;justify-content:flex-end;margin-top:24px} .btn-cancel{ padding:12px 24px;background:var(--bg-page);color:var(--text-secondary);border:none;border-radius:var(--radius-md);cursor:pointer;font-size:14px;font-weight:500;transition:all 0.2s ease;min-height:48px} .btn-cancel:hover{ background:var(--border)} .btn-submit{ padding:12px 24px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;font-size:14px;font-weight:600;transition:all 0.2s ease;box-shadow:0 2px 8px rgba(22,93,255,0.25);min-height:48px} .btn-submit:hover{ background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(22,93,255,0.35)} .modal-note{ margin-top:20px;font-size:13px;color:var(--text-weak);text-align:center} .modal-note a{ color:var(--primary)} .service-guide{ background:#fff;padding:72px 0} .service-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px} .service-item{ text-align:center;padding:32px 24px;background:var(--bg-page);border-radius:var(--radius-lg);transition:all 0.25s ease} .service-item:hover{ transform:translateY(-4px);box-shadow:var(--shadow-md)} .service-icon{ font-size:48px;display:block;margin-bottom:16px} .service-item h3{ font-size:18px;color:var(--text-primary);margin-bottom:8px;font-weight:600} .service-item p{ font-size:14px;color:var(--text-secondary);line-height:1.6} .price-section{ background:var(--bg-page);padding:72px 0} .price-table-wrapper{ overflow-x:auto;margin-bottom:40px;-webkit-overflow-scrolling:touch} .price-table{ width:100%;border-collapse:collapse;background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);min-width:600px} .price-table thead{ background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff} .price-table th{ padding:18px 24px;text-align:left;font-weight:600;font-size:15px} .price-table td{ padding:16px 24px;border-bottom:1px solid var(--border);font-size:14px;color:var(--text-primary)} .price-table tbody tr:last-child td{ border-bottom:none} .price-table tbody tr:hover{ background:var(--bg-page)} .price-table .city-tag{ font-weight:600;color:var(--primary)} .price-factors{ background:var(--bg-card);border-radius:var(--radius-lg);padding:36px;margin-bottom:32px;box-shadow:var(--shadow-sm)} .price-factors h3{ font-size:22px;color:var(--text-primary);margin-bottom:28px;text-align:center;font-weight:600} .factors-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px} .factor-item{ display:flex;gap:16px;padding:20px;background:var(--bg-page);border-radius:var(--radius-md);border-left:4px solid var(--primary)} .factor-icon{ font-size:28px;flex-shrink:0} .factor-content h4{ font-size:16px;color:var(--text-primary);margin-bottom:6px;font-weight:600} .factor-content p{ font-size:14px;color:var(--text-secondary);line-height:1.6} .price-tips{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:28px} .price-tip-card{ display:flex;gap:16px;padding:24px;background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all 0.25s ease} .price-tip-card:hover{ transform:translateY(-2px);box-shadow:var(--shadow-md)} .tip-icon{ font-size:32px;flex-shrink:0} .price-tip-card h4{ font-size:16px;color:var(--text-primary);margin-bottom:6px;font-weight:600} .price-tip-card p{ font-size:14px;color:var(--text-secondary);line-height:1.6} .price-disclaimer{ text-align:center;font-size:14px;color:var(--text-secondary);padding:20px;background:#FFF7E6;border-radius:var(--radius-md);border:1px solid #FFD591} .guide-section{ background:#fff;padding:72px 0} .guide-accordion{ display:flex;flex-direction:column;gap:16px;max-width:900px;margin:0 auto} .guide-card{ background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border);overflow:hidden;transition:all 0.3s ease} .guide-card.active{ box-shadow:var(--shadow-md)} .guide-header{ display:flex;justify-content:space-between;align-items:center;padding:24px 28px;cursor:pointer;transition:background 0.2s ease} .guide-header:hover{ background:var(--bg-page)} .guide-title-wrap{ display:flex;align-items:center;gap:16px} .guide-icon{ font-size:36px} .guide-title{ font-size:18px;color:var(--text-primary);margin-bottom:4px;font-weight:600} .guide-subtitle{ font-size:14px;color:var(--text-secondary)} .guide-arrow{ font-size:14px;color:var(--text-weak);transition:transform 0.3s ease} .guide-arrow.rotated{ transform:rotate(180deg)} .guide-content{ max-height:0;overflow:hidden;transition:max-height 0.3s ease} .guide-body{ padding:0 28px 28px;font-size:15px;line-height:1.8;color:var(--text-secondary)} .guide-body h4{ font-size:16px;color:var(--text-primary);margin-top:24px;margin-bottom:12px;font-weight:600} .guide-body h4:first-child{ margin-top:0} .guide-body p{ margin-bottom:12px} .guide-body ul{ margin:12px 0;padding-left:24px} .guide-body li{ margin-bottom:8px} .guide-tip{ background:#E6F7FF;border-left:4px solid var(--primary);padding:16px 20px;border-radius:0 8px 8px 0;margin-top:24px} .guide-tip p{ margin:0;color:var(--primary);font-size:14px;font-weight:500} .verified-legend{ max-width:900px;margin:48px auto 0;background:var(--bg-page);padding:28px;border-radius:var(--radius-lg)} .verified-legend h3{ font-size:20px;color:var(--text-primary);margin-bottom:24px;text-align:center;font-weight:600} .legend-items{ display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px} .legend-item{ display:flex;align-items:flex-start;gap:12px} .legend-item p{ font-size:14px;color:var(--text-secondary);margin:0;line-height:1.6} .tips{ background:var(--bg-page);padding:72px 0} .tips-list{ list-style:none;max-width:800px;margin:0 auto} .tips-list li{ padding:16px 20px;background:var(--bg-card);margin-bottom:12px;border-radius:var(--radius-md);font-size:15px;color:var(--text-secondary);display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm);transition:all 0.2s ease} .tips-list li:hover{ transform:translateX(4px);box-shadow:var(--shadow-md)} .tips-list li::before{ content:'✓';color:var(--success);font-weight:700;font-size:18px} .faq-section{ background:#fff;padding:72px 0} .faq-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:20px;margin-top:36px} .faq-item{ background:var(--bg-page);border-radius:var(--radius-lg);padding:28px;border:1px solid var(--border);transition:all 0.3s ease} .faq-item:hover{ border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-2px)} .faq-q{ font-size:17px;color:var(--text-primary);margin-bottom:12px;font-weight:600;line-height:1.5} .faq-a{ color:var(--text-secondary);font-size:15px;line-height:1.7} .faq-a p{ margin:0} .footer{ background:var(--text-primary);color:#fff;padding:72px 0 40px} .footer-content{ text-align:center} .footer-logo{ display:inline-flex;align-items:center;gap:10px;margin-bottom:20px} .footer-logo .logo-icon{ font-size:36px} .footer-logo .logo-text{ font-size:26px;font-weight:700;color:#fff} .footer-desc{ font-size:16px;color:rgba(255,255,255,0.8);margin-bottom:12px} .footer-disclaimer{ font-size:13px;color:rgba(255,255,255,0.5);margin-bottom:16px;line-height:1.6} .data-sources{ margin:20px 0;padding:16px 20px;background:rgba(255,255,255,0.05);border-radius:var(--radius-md);border-left:3px solid var(--primary)} .data-sources-title{ font-size:14px;font-weight:600;color:rgba(255,255,255,0.8);margin-bottom:10px} .data-sources-list{ list-style:none;padding:0;margin:0} .data-sources-list li{ font-size:13px;color:rgba(255,255,255,0.5);padding:4px 0;padding-left:16px;position:relative} .data-sources-list li::before{ content:'•';position:absolute;left:0;color:var(--primary)} .footer-copyright{ font-size:13px;color:rgba(255,255,255,0.4);margin-top:24px} .peak-season-banner{ background:linear-gradient(135deg,#ff6b35 0%,#f7931e 100%);color:#fff;padding:14px 24px;display:flex;align-items:center;justify-content:center;gap:20px;position:relative;z-index:99;box-shadow:0 4px 12px rgba(255,107,53,0.35)} .peak-season-banner.hidden{ display:none} .banner-content{ display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center} .banner-icon{ font-size:26px} .banner-text{ font-size:15px;font-weight:500} .banner-link{ color:#fff;text-decoration:underline;font-weight:600;white-space:nowrap} .banner-link:hover{ text-decoration:none;color:#fff} .banner-close{ position:absolute;right:24px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.2);border:none;color:#fff;font-size:22px;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease} .banner-close:hover{ background:rgba(255,255,255,0.3)} .countdown-wrapper{ display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.2);padding:8px 16px;border-radius:50px;margin-left:12px} .countdown-label{ font-size:13px;opacity:0.9} .countdown-number{ font-size:24px;font-weight:700;min-width:30px;text-align:center} .countdown-unit{ font-size:13px;opacity:0.9} .urgency-alert{ display:flex;align-items:center;gap:20px;background:linear-gradient(135deg,#ff4757 0%,#ff6b81 100%);color:#fff;padding:20px 28px;border-radius:var(--radius-lg);margin-bottom:36px;box-shadow:0 6px 20px rgba(255,71,87,0.35)} .urgency-icon{ font-size:40px;flex-shrink:0;animation:pulse 2s infinite} @keyframes pulse{ 0%,100%{ transform:scale(1)} 50%{ transform:scale(1.1)} } .urgency-content{ flex:1} .urgency-content strong{ font-size:17px;display:block;margin-bottom:6px} .urgency-content em{ font-style:normal;color:#FFE66D;font-weight:700} .urgency-tip{ font-size:14px;opacity:0.9} .peak-season-section{ background:linear-gradient(180deg,#FFF7ED 0%,#fff 100%);padding:64px 0;border-bottom:1px solid #FFE8D6} .peak-season-header{ text-align:center;margin-bottom:48px} .peak-season-title{ font-size:36px;color:var(--text-primary);margin-bottom:16px;font-weight:700} .peak-season-subtitle{ font-size:18px;color:var(--text-secondary)} .peak-alert-box{ background:var(--bg-card);border-radius:var(--radius-lg);padding:32px;display:flex;gap:24px;margin-bottom:44px;box-shadow:var(--shadow-md);border:2px solid #FFD591} .peak-alert-box .alert-icon{ font-size:52px;flex-shrink:0} .peak-alert-box h3{ font-size:22px;color:#FF6B35;margin-bottom:18px;font-weight:600} .alert-list{ list-style:none;padding:0;margin:0} .alert-list li{ padding:10px 0;font-size:15px;color:var(--text-secondary);border-bottom:1px dashed var(--border);display:flex;align-items:center;gap:10px} .alert-list li:last-child{ border-bottom:none} .alert-list li::before{ content:'→';color:#FF6B35;font-weight:700} .saving-tips-section{ margin-bottom:44px} .section-subtitle{ font-size:24px;color:var(--text-primary);margin-bottom:28px;text-align:center;font-weight:600} .saving-tips-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px} .saving-tip-card{ background:var(--bg-card);border-radius:var(--radius-lg);padding:28px;display:flex;gap:16px;box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:all 0.25s ease} .saving-tip-card:hover{ transform:translateY(-4px);box-shadow:var(--shadow-lg)} .tip-number{ width:44px;height:44px;background:linear-gradient(135deg,#ff6b35 0%,#f7931e 100%);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;flex-shrink:0} .tip-content h4{ font-size:17px;color:var(--text-primary);margin-bottom:8px;font-weight:600} .tip-content p{ font-size:14px;color:var(--text-secondary);line-height:1.6} .promo-section{ margin-bottom:44px} .promo-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px} .promo-card{ background:var(--bg-card);border-radius:var(--radius-lg);padding:24px;position:relative;box-shadow:var(--shadow-sm);border:1px solid var(--border);overflow:hidden;transition:all 0.25s ease} .promo-card:hover{ transform:translateY(-2px);box-shadow:var(--shadow-md)} .promo-badge{ position:absolute;top:16px;right:-12px;background:linear-gradient(135deg,#ff6b35 0%,#e74c3c 100%);color:#fff;padding:6px 20px;font-size:12px;font-weight:600;border-radius:4px 0 0 4px} .promo-company{ font-size:17px;font-weight:600;color:var(--text-primary);margin-bottom:8px} .promo-detail{ font-size:15px;color:#FF6B35;margin-bottom:12px;font-weight:500} .promo-expire{ font-size:13px;color:var(--text-weak)} .promo-disclaimer{ text-align:center;font-size:13px;color:var(--text-weak);margin-top:24px} .tips-section{ margin-bottom:36px} .tips-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px} .tip-item{ background:linear-gradient(135deg,var(--bg-page) 0%,#fff 100%);border-radius:var(--radius-lg);padding:20px 24px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:all 0.25s ease} .tip-item:hover{ transform:translateY(-2px);box-shadow:var(--shadow-md)} .tip-icon{ font-size:26px;flex-shrink:0} .tip-text{ font-size:14px;color:var(--text-secondary);line-height:1.5} .tip-text strong{ color:#FF6B35;font-weight:600} .calendar-section{ margin-bottom:24px} .calendar-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-bottom:24px} .calendar-month{ background:var(--bg-card);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);border:1px solid var(--border)} .calendar-month h4{ font-size:17px;color:var(--text-primary);margin-bottom:18px;font-weight:600} .calendar-days{ display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px} .day{ padding:8px 12px;border-radius:var(--radius-md);font-size:13px;font-weight:500} .day.good{ background:#E8FFEE;color:var(--success);border:1px solid #B7EB8F} .day.warning{ background:#FFF7E6;color:var(--warning);border:1px solid #FFD591} .day.danger{ background:#FFF1F0;color:var(--danger);border:1px solid #FFCCC7} .calendar-note{ font-size:12px;color:var(--text-weak);line-height:1.5} .calendar-legend{ display:flex;gap:32px;justify-content:center;flex-wrap:wrap;margin-bottom:20px} .legend-item{ display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-secondary)} .day-dot{ width:14px;height:14px;border-radius:50%} .day-dot.good{ background:var(--success)} .day-dot.warning{ background:var(--warning)} .day-dot.danger{ background:var(--danger)} .calendar-tip{ text-align:center;font-size:15px;color:var(--text-secondary);background:#E6F7FF;padding:16px;border-radius:var(--radius-md);border:1px solid #91D5FF} .promo-tag{ position:absolute;top:16px;right:16px;background:linear-gradient(135deg,#ff6b35 0%,#e74c3c 100%);color:#fff;padding:8px 16px;border-radius:50px;font-size:12px;font-weight:600;cursor:pointer;z-index:10;box-shadow:0 4px 12px rgba(255,107,53,0.4);transition:all 0.2s ease} .promo-tag:hover{ transform:scale(1.05);box-shadow:0 6px 16px rgba(255,107,53,0.5)} .promo-tag::after{ content:attr(data-promo);position:absolute;top:calc(100% + 8px);right:0;background:var(--text-primary);color:#fff;padding:12px 16px;border-radius:var(--radius-md);font-size:13px;font-weight:normal;white-space:nowrap;opacity:0;visibility:hidden;transition:all 0.2s ease;z-index:100;max-width:300px;white-space:normal;text-align:left;line-height:1.5;box-shadow:var(--shadow-lg)} .promo-tag:hover::after{ opacity:1;visibility:visible} .company-card.has-promo{ position:relative;padding-top:64px} .btn-wechat{ display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--success);color:#fff;text-decoration:none;border-radius:var(--radius-md);font-size:14px;font-weight:600;transition:all 0.2s ease;cursor:pointer;border:none;box-shadow:0 2px 8px rgba(0,180,42,0.25);min-height:48px;font-family:inherit} .btn-wechat:hover{ background:#009A23;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,180,42,0.35)} .btn-wechat.copied{ background:#52c41a} .btn-wechat .btn-icon{ font-size:18px} .guides-section{ background:var(--bg-page);padding:72px 0} .guides-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;max-width:1200px;margin:0 auto} .guides-section .guide-card{ display:flex;flex-direction:column;background:var(--bg-card);border-radius:var(--radius-lg);padding:32px;text-decoration:none;box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:all 0.3s ease} .guides-section .guide-card:hover{ transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary)} .guides-section .guide-icon{ font-size:52px;margin-bottom:16px} .guides-section .guide-card h3{ font-size:19px;color:var(--text-primary);margin-bottom:12px;font-weight:600} .guides-section .guide-card p{ font-size:15px;color:var(--text-secondary);line-height:1.6;flex-grow:1;margin-bottom:16px} .guides-section .guide-link{ font-size:15px;color:var(--primary);font-weight:600;transition:color 0.2s ease;display:inline-flex;align-items:center;gap:4px} .guides-section .guide-card:hover .guide-link{ color:var(--primary-hover)} .company-card[data-company]{ cursor:pointer;transition:transform 0.25s ease,box-shadow 0.25s ease,border-color 0.25s ease} .company-card[data-company]:hover{ transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary)} .company-card[data-company] .company-name{ transition:color 0.2s ease} .company-card[data-company]:hover .company-name{ color:var(--primary-hover)} .detail-card-link{ text-decoration:none;color:inherit;display:block} .smart-quote-banner{ background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:var(--radius-lg);padding:28px 36px;margin-top:28px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all 0.3s ease;box-shadow:0 8px 24px rgba(102,126,234,0.35);position:relative;overflow:hidden} .smart-quote-banner::before{ content:'';position:absolute;top:-50%;right:-50%;width:100%;height:200%;background:radial-gradient(circle,rgba(255,255,255,0.12) 0%,transparent 50%);animation:shimmer 3s infinite} @keyframes shimmer{ 0%{ transform:rotate(0deg)} 100%{ transform:rotate(360deg)} } .smart-quote-banner:hover{ transform:translateY(-4px);box-shadow:0 12px 32px rgba(102,126,234,0.45)} .quote-banner-left{ display:flex;align-items:center;gap:24px;z-index:1} .quote-banner-icon{ font-size:52px;animation:bounce 2s infinite} @keyframes bounce{ 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-8px)} } .quote-banner-text h3{ color:#fff;font-size:22px;font-weight:700;margin-bottom:6px} .quote-banner-text p{ color:rgba(255,255,255,0.9);font-size:16px} .quote-banner-right{ z-index:1} .quote-banner-btn{ background:#fff;color:#667eea;border:none;padding:16px 32px;border-radius:50px;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(0,0,0,0.15);font-family:inherit} .quote-banner-btn:hover{ background:#f8f9fa;transform:scale(1.05);box-shadow:0 6px 16px rgba(0,0,0,0.2)} .quote-banner-btn .btn-arrow{ font-size:18px;transition:transform 0.3s ease} .smart-quote-banner:hover .btn-arrow{ transform:translateX(4px)} @media (max-width:768px){ .container{ padding:0 16px} .header .container{ flex-direction:column;gap:16px;padding:16px} .nav{ flex-wrap:wrap;justify-content:center;gap:12px} .nav a{ font-size:14px} .hero{ padding:48px 0} .hero h1{ font-size:32px} .hero p{ font-size:16px} .search-box{ flex-direction:column;align-items:center} .search-input,.filter-select{ width:100%;max-width:100%} .section-title{ font-size:24px;flex-wrap:wrap} .company-card{ padding:20px} .company-name{ font-size:18px} .company-title-wrap{ flex-direction:column;align-items:flex-start;gap:10px} .company-header{ flex-direction:column;gap:12px} .company-rating{ align-self:flex-start} .badge-verified,.badge-insured,.badge-high-rating{ font-size:12px;padding:6px 12px} .price-table th,.price-table td{ padding:14px 16px;font-size:14px} .guide-header{ padding:20px} .guide-title-wrap{ flex-direction:column;align-items:flex-start;gap:12px} .guide-icon{ font-size:32px} .guide-title{ font-size:16px} .guide-body{ padding:0 20px 20px;font-size:14px} .guide-body h4{ font-size:15px} .trust-grid{ grid-template-columns:repeat(2,1fr);gap:24px} .trust-icon{ width:56px;height:56px;font-size:24px} .trust-number{ font-size:32px} .trust-label{ font-size:14px} .faq-grid{ grid-template-columns:1fr} .faq-item{ padding:24px} .guides-section .guide-card{ padding:24px} .guides-section .guide-icon{ font-size:44px} .guides-section .guide-card h3{ font-size:17px} .company-card[data-company]:hover{ transform:none} .smart-quote-banner{ flex-direction:column;text-align:center;padding:24px 20px;gap:20px} .quote-banner-left{ flex-direction:column;gap:12px} .quote-banner-icon{ font-size:44px} .quote-banner-text h3{ font-size:20px} .quote-banner-text p{ font-size:15px} .quote-banner-btn{ padding:14px 28px;font-size:15px} .btn-report,.correction-btn,.feedback-btn,.company-footer a,.company-footer button,.btn-website,.company-card .rating-link,.company-card .external-link,.btn-wechat,.modal-close,.banner-close,.btn-cancel,.btn-submit,.btn-call,.banner-link{ min-height:48px;display:inline-flex;align-items:center;justify-content:center} .tag{ min-height:40px;padding:10px 16px;display:inline-flex;align-items:center} .badge-featured,.badge-verified,.badge-insured,.badge-high-rating{ min-height:32px;padding:8px 12px;display:inline-flex;align-items:center} .form-group input,.form-group select,.form-group textarea{ min-height:48px;padding:12px 16px;font-size:16px} } @media (max-width:480px){ .hero h1{ font-size:28px} .price-section,.guide-section,.service-guide,.tips,.guides-section,.faq-section{ padding:48px 0} .section-title{ font-size:22px} .service-grid{ grid-template-columns:1fr} .factors-grid{ grid-template-columns:1fr} .price-tips{ grid-template-columns:1fr} .price-tip-card{ flex-direction:column;align-items:center;text-align:center} .verified-legend{ padding:20px} .legend-items{ grid-template-columns:1fr} .hero-stats{ flex-direction:column;gap:10px} .stat-divider{ display:none} .footer{ padding:48px 0 32px} .peak-season-section{ padding:48px 0} .peak-season-title{ font-size:28px} .peak-alert-box{ flex-direction:column;text-align:center;padding:24px;gap:16px} .peak-alert-box .alert-icon{ font-size:44px} .alert-list li{ justify-content:center} .saving-tips-grid{ grid-template-columns:1fr} .saving-tip-card{ flex-direction:column;align-items:center;text-align:center} .promo-grid{ grid-template-columns:1fr} .promo-tag::after{ right:auto;left:0;max-width:220px} .calendar-grid{ grid-template-columns:1fr} .calendar-legend{ flex-direction:column;align-items:center;gap:12px} .banner-close{ right:12px;width:40px;height:40px} .countdown-wrapper{ margin-left:0;margin-top:8px;width:100%;justify-content:center} .countdown-number{ font-size:28px} .urgency-alert{ flex-direction:column;text-align:center;padding:20px} .urgency-icon{ font-size:36px} .urgency-content strong{ font-size:16px} .trust-grid{ grid-template-columns:1fr;gap:20px} }