:root{--font-display:'DM Sans',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;--font-mono:'JetBrains Mono','SF Mono',monospace}:root{--bg-primary:#f5f2eb;--bg-secondary:#ffffff;--bg-tertiary:#e8e4dc;--bg-card:#ffffff;--bg-card-hover:#fafafa;--text-primary:#1a1a1a;--text-secondary:#5a5a5a;--text-muted:#8a8a8a;--accent-orange:#ff9500;--accent-pink:#ff2d55;--accent-blue:#0071e3;--accent-purple:#875af9;--accent-green:#34c759;--accent-cyan:#32d3eb;--gradient-brand:linear-gradient(135deg,var(--accent-orange),var(--accent-pink));--gradient-hero:linear-gradient(135deg,var(--text-primary) 0%,var(--accent-orange) 50%,var(--accent-pink) 100%);--border-color:#d0ccc4;--border-light:#e8e4dc;--shadow-card:0 4px 24px rgba(0,0,0,0.08);--shadow-hover:0 12px 32px rgba(255,149,0,0.12)}[data-theme="light"]{--bg-primary:#ffffff;--bg-secondary:#f5f5f7;--bg-tertiary:#e5e5e7;--bg-card:#ffffff;--bg-card-hover:#fafafa;--text-primary:#1d1d1f;--text-secondary:#6e6e73;--text-muted:#aeaeb2;--border-color:#d2d2d7;--border-light:#e5e5e7;--shadow-card:0 4px 24px rgba(0,0,0,0.08);--shadow-hover:0 12px 32px rgba(255,149,0,0.15)}[data-theme="dark"]{--bg-primary:#0a0a0a;--bg-secondary:#1c1c1e;--bg-tertiary:#2c2c2e;--bg-card:#1c1c1e;--bg-card-hover:#242426;--text-primary:#f5f5f7;--text-secondary:#98989d;--text-muted:#636366;--border-color:#38383a;--border-light:#2c2c2e;--shadow-card:0 4px 24px rgba(0,0,0,0.3);--shadow-hover:0 12px 32px rgba(255,149,0,0.15)}.dark-page{--bg-primary:#0a0a0a;--bg-secondary:#1c1c1e;--bg-tertiary:#2c2c2e;--bg-card:#1c1c1e;--bg-card-hover:#242426;--text-primary:#f5f5f7;--text-secondary:#98989d;--text-muted:#636366;--border-color:#38383a;--border-light:#2c2c2e;--shadow-card:0 4px 24px rgba(0,0,0,0.3);--shadow-hover:0 12px 32px rgba(255,149,0,0.15)}:root{--agent-taiyang:#ff9500;--agent-xunyu:#0071e3;--agent-guanzhong:#34c759;--agent-fanyong:#875af9;--agent-zhangliang:#ffcc00;--agent-xiaohe:#636366}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-display);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6}.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:12px;font-size:15px;font-weight:600;text-decoration:none;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}.btn-primary{background:var(--gradient-brand);color:white}.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-hover)}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-signin{padding:8px 20px;border-radius:8px;font-size:14px;font-weight:600;background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color);text-decoration:none;transition:all 0.2s}.btn-signin:hover{background:var(--bg-tertiary);border-color:var(--text-secondary)}.btn-secondary:hover{background:var(--bg-tertiary);transform:translateY(-2px);box-shadow:var(--shadow-card)}.theme-toggle{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:8px 12px;cursor:pointer;font-size:16px;transition:all 0.2s}.theme-toggle:hover{background:var(--bg-tertiary)}.nav-toggle{display:none}@media (max-width:768px){.nav-toggle{display:flex !important}}.nav-toggle span{display:block;width:100%;height:2px;background:var(--text-primary);border-radius:2px;transition:all 0.3s ease}.nav-toggle.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}.nav-toggle.active span:nth-child(2){opacity:0}.nav-toggle.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.nav-overlay{display:none}.nav{display:flex;align-items:center;gap:32px;position:static;width:auto;height:auto;background:none;border:none;padding:0}@media (min-width:769px){.nav-toggle{display:none !important}.nav{display:flex !important;right:auto !important;position:static !important;width:auto !important;height:auto !important;background:transparent !important;flex-direction:row !important;padding:0 !important;border:none !important;transform:none !important}.nav-overlay{display:none !important}}@media (max-width:768px){*{max-width:100vw;overflow-x:hidden}body,html{overflow-x:hidden;max-width:100vw}main{padding:60px 16px !important;max-width:100% !important;overflow-x:hidden}.hero{padding:40px 16px 60px !important;overflow-x:hidden}.hero h1{font-size:2rem !important;line-height:1.2}.hero p{font-size:1rem !important;padding:0 8px}.nav-toggle{display:flex !important}.nav{position:fixed;top:0;right:-100%;width:70%;max-width:280px;height:100vh;background:var(--bg-secondary);flex-direction:column;gap:0;padding:80px 24px 24px;transition:right 0.3s ease;border-left:1px solid var(--border-color);z-index:100}.nav.active{right:0}.nav a{padding:16px 0;border-bottom:1px solid var(--border-light);font-size:16px}}.card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:24px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}.card:hover{transform:translateY(-4px);border-color:var(--accent-orange);box-shadow:var(--shadow-hover)}.live-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:rgba(52,199,89,0.15);border:1px solid rgba(52,199,89,0.3);border-radius:12px;font-size:11px;font-weight:600;color:var(--accent-green)}.live-badge .dot{width:6px;height:6px;background:var(--accent-green);border-radius:50%;animation:pulse 1.5s infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}.live-refresh-info{font-size:12px;color:var(--text-secondary);display:flex;align-items:center;gap:4px}.live-refresh-info #refresh-countdown{font-weight:600;color:var(--accent-green);min-width:16px;text-align:center}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{transform:translateX(0)}100%{transform:translateX(50%)}}@keyframes gradientMove{0%{background-position:0% 0%}100%{background-position:200% 0%}}@media (max-width:1024px){:root{font-size:15px}}@media (max-width:768px){:root{font-size:16px}body{-webkit-text-size-adjust:100%}.header-inner{padding:0 16px;height:56px}.logo{font-size:18px}.logo-icon{width:32px;height:32px;font-size:16px}.nav-toggle{display:flex;flex-direction:column;justify-content:space-between;width:24px;height:18px;cursor:pointer;z-index:101}.nav-toggle span{display:block;width:100%;height:2px;background:var(--text-primary);border-radius:2px;transition:all 0.3s ease}.nav-toggle.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}.nav-toggle.active span:nth-child(2){opacity:0}.nav-toggle.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.nav{position:fixed;top:0;right:-100%;width:70%;max-width:280px;height:100vh;background:var(--bg-secondary);flex-direction:column;gap:0;padding:80px 24px 24px;transition:right 0.3s ease;border-left:1px solid var(--border-color);z-index:100}.nav.active{right:0}.nav a{padding:16px 0;border-bottom:1px solid var(--border-light);font-size:16px}.nav-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:99}.nav-overlay.active{display:block}main{padding:40px 16px;max-width:100%;overflow-x:hidden}.flex,.flex-row,[style*="display:flex"],[style*="display:grid"]{flex-wrap:wrap !important;max-width:100% !important;overflow-x:hidden}.grid,.grid-2,.grid-3,.grid-4,.grid-6{display:flex !important;flex-direction:column !important;gap:12px !important;flex-wrap:wrap !important}.agents-grid,.agents-live-grid,.model-providers-grid,.reviews-grid,.services-grid,.products-grid{display:flex !important;flex-direction:column !important;gap:12px !important;flex-wrap:wrap !important;max-width:100%;overflow-x:hidden}.stats-grid,.stats{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:12px !important;max-width:100%}.success-stories,.testimonials{display:flex !important;flex-direction:column !important;gap:16px !important;max-width:100%}.hero .cta-buttons{flex-direction:column;gap:12px;padding:0 8px;align-items:stretch}.hero .cta-buttons .btn{width:100%;justify-content:center;padding:14px 20px}.start-here{margin-top:60px;padding:32px;background:var(--bg-card);border-radius:20px;border:1px solid var(--border-color)}.start-here-header{text-align:center;margin-bottom:24px}.start-badge{display:inline-block;padding:6px 14px;background:linear-gradient(135deg,var(--accent-orange),var(--accent-pink));color:white;font-size:13px;font-weight:600;border-radius:20px;margin-bottom:12px}.start-here-header p{color:var(--text-secondary);font-size:14px;margin:0}.start-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.start-card{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:14px;text-decoration:none;color:var(--text-primary);transition:all 0.2s ease}.start-card:hover{transform:translateY(-2px);border-color:var(--accent-orange);box-shadow:0 8px 20px rgba(255,149,0,0.15)}.start-icon{font-size:24px;flex-shrink:0}.start-content{flex:1;display:flex;flex-direction:column;gap:2px}.start-content strong{font-size:14px;font-weight:600;color:var(--text-primary)}.start-content span{font-size:12px;color:var(--text-secondary)}.start-arrow{font-size:18px;color:var(--text-muted);transition:transform 0.2s ease}.start-card:hover .start-arrow{transform:translateX(4px);color:var(--accent-orange)}@media (max-width:640px){.start-cards{grid-template-columns:1fr}.start-here{margin-top:40px;padding:24px 16px}}.feature-card{padding:20px !important;border-radius:12px !important}.feature-card h3{font-size:1.1rem !important}.feature-card p{font-size:0.9rem !important}.agents-grid{display:flex !important;flex-direction:column;gap:12px}.agents-grid > div{padding:16px}.office-link-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;padding:16px 24px;background:linear-gradient(135deg,rgba(255,149,0,0.1),rgba(255,45,85,0.05));border:1px solid rgba(255,149,0,0.3);border-radius:12px;color:var(--text-primary);font-weight:600;text-decoration:none;transition:all 0.3s ease}.office-link-btn:hover{background:linear-gradient(135deg,rgba(255,149,0,0.2),rgba(255,45,85,0.1));transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,149,0,0.2)}.office-icon{font-size:20px}.office-text{font-size:15px}.model-providers-grid{display:flex !important;flex-direction:column;gap:12px}.model-provider-card{padding:16px !important}.agents-live-grid{display:flex !important;flex-direction:column;gap:12px}.reviews-grid{display:flex !important;flex-direction:column;gap:12px}.review-card{padding:16px !important}.grid{display:flex !important;flex-direction:column;gap:16px}.grid-2,.grid-3,.grid-4,.grid-6{grid-template-columns:1fr}.card{padding:20px;border-radius:12px}.card h3{font-size:1.1rem}.card p{font-size:0.9rem}.agent-card,.agents-grid > div{padding:16px}.agent-card .agent-icon{width:40px;height:40px;font-size:20px}.stats{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:12px}.stat-item{padding:16px 12px}.stat-value{font-size:1.5rem}.live-feed{margin:0 -16px;padding:20px 16px;border-radius:0}.live-feed .feed-item{padding:12px}.testimonials{flex-direction:column}.testimonial-card{padding:16px}.services-grid,.products-grid{display:flex !important;flex-direction:column;gap:16px}.service-card,.product-card{padding:20px}footer{padding:40px 16px}footer .footer-content{flex-direction:column;gap:24px;text-align:center}.newsletter{flex-direction:column;gap:12px}.newsletter input{width:100%}.newsletter button{width:100%}section h2{font-size:1.5rem !important;margin-bottom:8px}section > p{font-size:0.9rem;margin-bottom:24px}.filters{flex-wrap:wrap;gap:8px}.filter-btn{padding:8px 16px;font-size:13px}.timeline{padding-left:20px}.timeline-item{padding-left:16px}}@media (max-width:400px){:root{font-size:14px}}@media (hover:none) and (pointer:coarse){.btn,.card,a,button{min-height:44px;min-width:44px}.btn:active,.card:active{transform:scale(0.97)}}:root{--pixel-scale:1px;--pixel-border:2px solid var(--text-primary);--pixel-shadow:4px 4px 0 var(--text-primary);--pixel-font:'JetBrains Mono',monospace}.pixel-mode{--pixel-scale:2px;--pixel-border:3px solid var(--text-primary);--pixel-shadow:6px 6px 0 var(--text-primary)}@media (max-width:768px){.nav a{min-height:48px;display:flex;align-items:center}.hero{padding:40px 0 60px}.hero h1{font-size:2rem !important;line-height:1.2}.hero p{font-size:1rem !important;padding:0 8px}.stats-grid{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:12px}.stat-item{padding:16px 12px !important}.stat-number{font-size:1.8rem !important}.model-provider-card{flex-direction:row !important;text-align:left !important;gap:12px !important}.agent-card{flex-direction:row !important;gap:16px !important}.agent-icon{width:48px !important;height:48px !important;font-size:24px !important}.review-card{padding:16px !important}.review-text{font-size:0.95rem !important}.service-card{padding:20px !important}.service-icon{font-size:28px !important}.product-card{padding:20px !important}.contact-buttons{flex-direction:column;gap:12px}.contact-buttons .btn{width:100%;justify-content:center}footer{padding:32px 16px}input,textarea{font-size:16px !important}.modal-content{margin:16px;padding:24px 16px !important}.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}img{max-width:100%;height:auto}[data-theme="dark"] .header{background:rgba(10,10,10,0.95)}.dark-page .header{background:rgba(10,10,10,0.95)}}@media (max-width:375px){.hero h1{font-size:1.75rem !important}.start-cards{gap:8px}.start-card{padding:12px 14px}.start-icon{font-size:20px !important}.start-content strong{font-size:13px !important}.start-content span{font-size:11px !important}.stats-grid{grid-template-columns:1fr 1fr !important}.cta-buttons{gap:10px}.btn{padding:12px 16px;font-size:14px}}@media (max-width:768px) and (orientation:landscape){.hero{padding:24px 0 40px}.nav{width:50%;max-width:200px}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.logo-icon,.agent-icon,.service-icon{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}.text-muted-sm{color:var(--text-muted);margin:0 0 4px 0;font-size:11px}.text-secondary-link{color:var(--text-secondary);text-decoration:none;font-size:14px}.text-secondary-simple{margin:0;color:var(--text-secondary)}.text-secondary-link-pad{color:var(--text-secondary);text-decoration:none;font-size:14px;padding:8px 16px}.p-4{padding:4px 0}.mb-4{margin-bottom:4px}.mb-6{margin-bottom:6px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mt-4{margin-top:4px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.m-0{margin:0}.p-0{padding:0}.fs-10{font-size:10px;color:var(--text-muted)}.fs-10-opacity{font-size:10px;color:var(--text-muted);opacity:0.7}.fs-11{font-size:11px;color:var(--text-muted);margin-bottom:6px}.fs-12-muted{font-size:12px;color:var(--text-muted);margin:0}.fs-12-muted-mt{font-size:12px;color:var(--text-muted);margin-top:4px}.fs-13-semibold{font-size:13px;font-weight:600;color:var(--text-primary)}.fs-14-link{color:var(--text-secondary);text-decoration:none;font-size:14px}.fs-16-semibold{font-size:16px;font-weight:600;margin-bottom:8px}.fs-16-semibold-m0{font-size:16px;font-weight:600;margin:0}.fs-24{font-size:24px;margin-bottom:8px}.fs-24-mb12{font-size:24px;margin-bottom:12px}.fs-28{font-size:28px;margin-bottom:8px}.fs-28-mb12{font-size:28px;margin-bottom:12px}.fs-32{font-size:32px;margin-bottom:16px}.card-basic{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:24px}.card-rounded-sm{background:var(--bg-tertiary);border-radius:12px;margin-bottom:12px;overflow:hidden}.card-col-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:13px}.card-pad{flex:1;min-width:140px;padding:16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;text-align:center}.card-hover{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;text-decoration:none;transition:all 0.2s}.card-hover:hover{border-color:var(--accent-orange);transform:translateY(-2px)}.flex-col-center{display:flex;flex-direction:column;align-items:center;gap:6px}.flex-center-gap12{display:flex;align-items:center;gap:12px;margin-bottom:16px}.flex-between{display:flex;justify-content:space-between;align-items:center}.flex-col{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.list-simple{text-align:left;font-size:11px;color:var(--text-secondary);margin-bottom:16px;list-style:none;padding:0}.list-none{list-style:none;padding:0;margin:0}.btn-list{padding:16px 20px;cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}.btn-pad-0-20{padding:0 20px 16px;color:var(--text-secondary);font-size:14px}.text-green{margin:0;color:#22c55e;font-weight:600}.text-accent-orange{color:var(--accent-orange)}.section-pad{padding:20px}.section-center{text-align:center}.section-center-pad{text-align:center;padding:20px}.section-pad-large{padding:40px 24px}.section-pad-xl{padding:60px 24px}.section-max-600{margin:48px auto 40px;max-width:600px;text-align:center}.section-max-700{margin:60px auto;max-width:700px;text-align:center;padding:32px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:20px}.section-max-800{margin:32px auto 48px;max-width:800px}.section-max-900{margin:60px auto;max-width:900px}.section-gradient-green{margin-top:80px;text-align:center;padding:60px 24px;background:linear-gradient(180deg,rgba(34,197,94,0.08) 0%,var(--bg-secondary) 100%);border-radius:16px;border:1px solid rgba(34,197,94,0.2)}.section-gray{margin-top:80px;text-align:center;padding:60px 24px;background:var(--bg-secondary);border-radius:16px;border:1px solid var(--border-color)}.w-full{width:100%}.hidden{display:none}.overflow-hidden{overflow:hidden}/* Agent Status Card Styles */.agent-status-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;text-align:center;min-width:100px}.agent-status-dot{width:8px;height:8px;border-radius:50%;margin-top:4px}.agent-status-dot.online,.dot-green{background:#22c55e}.agent-status-dot.busy,.dot-amber{background:#f59e0b}.agent-status-dot.offline{background:#636366}.fs-11-green{font-size:11px;color:#22c55e;font-weight:600}.fs-11-amber{font-size:11px;color:#f59e0b;font-weight:600}/* Case Card Styles */.case-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:24px}.case-studies{display:flex;flex-direction:column;gap:24px}.text-muted-sm{color:var(--text-muted);margin:0 0 4px 0;font-size:11px}.text-secondary-simple{margin:0;color:var(--text-secondary)}.text-center-fs12-mb8-upper{text-align:center;font-size:12px;color:var(--text-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}.title-center-mb40{text-align:center;margin-bottom:40px;font-size:1.5rem;font-weight:700}.text-center-mb32-simple{text-align:center;margin-bottom:32px}.title-center{text-align:center}.text-center-mb32{text-align:center;margin-bottom:32px}.text-center-mb24{text-align:center;margin-bottom:24px}.text-center-mt16{text-align:center;margin-top:16px}.text-center-mt24{text-align:center;margin-top:24px}.text-center-max600{max-width:600px;margin-left:auto;margin-right:auto}.text-accent-link{color:var(--accent-orange);text-decoration:none}.text-accent-link:hover{text-decoration:underline}.text-secondary-link-13{color:var(--text-secondary);text-decoration:none;font-size:13px}.text-secondary-link-13:hover{color:var(--accent-orange)}.text-green-simple{color:#22c55e}.text-center-fs12-mb24{text-align:center;font-size:12px;color:var(--text-muted);margin-bottom:24px}.text-center-max600{text-align:center;max-width:600px;margin:0 auto}/* Button Tag Styles */.btn-tag{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:10px;color:var(--text-primary);text-decoration:none;font-size:13px;transition:all 0.2s}.btn-tag:hover{background:var(--accent-orange);color:white;border-color:var(--accent-orange);transform:translateY(-2px)}/* Card Block Styles */.card-block{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;text-decoration:none;color:var(--text-primary);transition:all 0.2s}.card-block:hover{border-color:var(--accent-orange);transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,149,0,0.15)}.card-pad20{padding:20px}.card-pad20-center{padding:20px;text-align:center}.card-pad24-center{padding:24px;text-align:center}.card-pad28-center{padding:28px;text-align:center}/* Free Tools Section */.free-tools{margin-top:48px;padding:32px 24px;background:var(--bg-secondary);border-radius:16px;border:1px solid var(--border-color)}.free-tools .text-center-fs12-mb24{font-size:12px;color:var(--text-muted);margin-bottom:24px}/* Pricing Card Mini */.pricing-card-mini{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:20px;text-align:center}.pricing-card-mini.featured{background:linear-gradient(180deg,rgba(135,90,249,0.1) 0%,var(--bg-secondary) 100%);border-color:var(--accent-purple)}.fs-11-mb4{font-size:11px;margin-bottom:4px;color:var(--text-muted)}.fs-12-mb12{font-size:12px;margin-bottom:12px;color:var(--text-secondary)}.fs-12-m0{font-size:12px;margin:0}/* Pricing Preview Section */.pricing-preview.mt-60{margin-top:60px}.pricing-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:800px;margin:0 auto}@media(max-width:768px){.pricing-cards{grid-template-columns:1fr}}/* Services Section */.services{margin-top:60px}.services h2{text-align:center;margin-bottom:40px;font-size:1.5rem;font-weight:700}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:800px;margin:0 auto}@media(max-width:768px){.services-grid{grid-template-columns:1fr}}/* Products Section */.products{margin-top:80px}.products h2{font-size:1.5rem;font-weight:700;margin-bottom:16px}.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:0 auto}@media(max-width:768px){.products-grid{grid-template-columns:1fr}}/* Subscribe Section */.subscribe-section{margin-top:80px;text-align:center;padding:60px 24px;background:linear-gradient(180deg,rgba(34,197,94,0.08) 0%,var(--bg-secondary) 100%);border-radius:16px;border:1px solid rgba(34,197,94,0.2)}.subscribe-section h2{font-size:1.75rem;font-weight:700;margin-bottom:12px}/* Contact Section */.contact{margin-top:80px;text-align:center;padding:60px 24px;background:var(--bg-secondary);border-radius:16px;border:1px solid var(--border-color)}.contact h2{font-size:2rem;font-weight:700;margin-bottom:16px}/* Reviews Grid */.reviews-grid{grid-template-columns:repeat(3,1fr);gap:20px}@media(max-width:900px){.reviews-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.reviews-grid{grid-template-columns:1fr}}/* Features Grid */.features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:80px}@media(max-width:900px){.features{grid-template-columns:1fr}}@media(max-width:768px){.features{grid-template-columns:1fr;gap:16px;margin-top:40px}}/* Quick Entry Grid */.quick-entry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}@media(max-width:768px){.quick-entry-grid{grid-template-columns:repeat(2,1fr)}}/* Title Sizes */.title-2xl{font-size:2rem;font-weight:700;margin-bottom:24px}.title-xl{font-size:1.75rem;font-weight:700;margin-bottom:20px}/* Link Styles */.text-secondary-link{color:var(--text-secondary);text-decoration:none;font-size:14px}.text-secondary-link:hover{color:var(--accent-orange);text-decoration:underline}/* Additional Utility Classes */.fs-14-semibold{font-size:14px;font-weight:600}.fs-14-semibold-mb4{font-size:14px;font-weight:600;margin-bottom:4px}.fs-14-line16{font-size:14px;line-height:1.6}.fs-15-semibold{font-size:15px;font-weight:600}.fs-16-semibold-mb12{font-size:16px;font-weight:600;margin-bottom:12px}.fs-18-semibold-mb12{font-size:18px;font-weight:600;margin-bottom:12px}.fs-20-semibold{font-size:20px;font-weight:600}.fs-28-mb12{font-size:28px;margin-bottom:12px}/* Nav Card Styles */.nav-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;text-decoration:none;transition:all 0.3s}.nav-card:hover{border-color:var(--accent-orange);transform:translateY(-4px);box-shadow:0 12px 32px rgba(255,149,0,0.15)}/* Mobile Bottom Nav Enhancement */@media(max-width:768px){ .bottom-nav{padding:10px 12px !important} .bottom-nav a{font-size:12px !important;padding:6px 10px !important} .nav-card{padding:16px 8px !important} .nav-card span:first-child{font-size:24px !important}}/* Hero CTA Button Glow Animation */@keyframes cta-glow{ 0%{box-shadow:0 8px 32px rgba(255,149,0,0.4)} 100%{box-shadow:0 8px 48px rgba(255,149,0,0.6),0 0 20px rgba(255,149,0,0.3)}}/** * Sun Team - Unified Component Styles * 统一组件样式 - 基于 styles.css 的设计系统 *  * 注意:此文件定义核心组件变量和基础样式 * 页面特定样式见 styles.css 和 index.css *//* ======================================== CSS Variables - Design Tokens (引用自 styles.css) ======================================== */:root { /* Primary Colors - 统一使用 accent-* 命名 */ --color-primary:var(--accent-orange); --color-secondary:var(--accent-pink);  /* Backgrounds */ --bg-dark:#0a0a0a; --bg-dark-secondary:#1c1c1e; --bg-dark-tertiary:#2c2c2e; --bg-light:#ffffff; --bg-light-secondary:#f5f5f7;  /* Text */ --text-dark:#f5f5f7; --text-dark-secondary:#98989d; --text-dark-muted:#636366; --text-light:#1d1d1f; --text-light-secondary:#6e6e73;  /* Borders */ --border-dark:#38383a; --border-light:#d2d2d7;  /* Shadows */ --shadow-sm:0 2px 8px rgba(0,0,0,0.1); --shadow-md:0 4px 16px rgba(0,0,0,0.15); --shadow-lg:0 8px 32px rgba(0,0,0,0.2); --shadow-glow:0 0 40px rgba(255,149,0,0.3);  /* Spacing */ --space-xs:4px; --space-sm:8px; --space-md:16px; --space-lg:24px; --space-xl:32px; --space-2xl:48px;  /* Border Radius - 统一使用 12px 基准 */ --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-full:9999px;  /* Transitions */ --transition-fast:0.15s ease; --transition-base:0.3s ease; --transition-slow:0.5s ease;}/* ======================================== Button Base Styles - 统一按钮规范 ======================================== *//* 基础按钮类 (供其他按钮样式继承) */.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:12px; font-size:15px; font-weight:600; text-decoration:none; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden; cursor:pointer; border:none;}.btn::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); transition:left 0.5s;}.btn:hover::before { left:100%;}/* Primary Button */.btn-primary { background:var(--gradient-brand); color:white; box-shadow:0 4px 24px rgba(255,149,0,0.35);}.btn-primary:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 12px 32px rgba(255,149,0,0.15);}.btn-primary:active { transform:translateY(-1px) scale(1);}.btn-primary:disabled { opacity:0.6; cursor:not-allowed; transform:none;}/* Secondary Button */.btn-secondary { background:var(--bg-secondary); color:var(--text-primary); border:1px solid var(--border-color);}.btn-secondary:hover { background:var(--bg-tertiary); transform:translateY(-2px); box-shadow:var(--shadow-card);}/* Outline Button */.btn-outline { background:transparent; color:var(--text-primary); border:1px solid var(--border-color);}.btn-outline:hover { border-color:var(--accent-orange); color:var(--accent-orange);}/* Button Sizes - 统一尺寸 */.btn-sm { padding:10px 18px; font-size:13px; border-radius:10px;}.btn-lg { padding:16px 32px; font-size:16px; border-radius:14px;}.btn-block { width:100%;}/* ======================================== Card Components - 统一卡片规范 ======================================== *//* 基础卡片 */.card { background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:16px; padding:24px; transition:all 0.3s cubic-bezier(0.4,0,0.2,1);}.card:hover { transform:translateY(-4px); border-color:var(--accent-orange); box-shadow:var(--shadow-hover);}.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-md);}.card-title { font-size:14px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px;}.card-body { flex:1;}/* Feature Card */.feature-card { background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:20px; padding:32px; transition:all 0.4s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden;}.feature-card::before { content:''; position:absolute; top:0; left:0; width:80px; height:80px; background:radial-gradient(circle at top left,rgba(255,149,0,0.15),transparent 70%); border-radius:20px 0 100% 0; transition:all 0.4s;}.feature-card:hover { transform:translateY(-8px); border-color:var(--accent-orange); box-shadow:0 20px 40px rgba(255,149,0,0.15);}.feature-card:hover::before { width:120px; height:120px;}.feature-icon { width:48px; height:48px; background:var(--gradient-brand); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:20px;}/* Agent Card */.agent-card { background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:12px; padding:16px; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); cursor:pointer;}.agent-card:hover { border-color:var(--accent-orange); transform:translateX(8px) scale(1.02); box-shadow:0 8px 32px rgba(255,149,0,0.2);}.agent-card.active { border-color:var(--accent-green); background:rgba(52,199,89,0.05);}/* Pricing Card */.pricing-card { background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:20px; padding:32px; display:flex; flex-direction:column; transition:all 0.4s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden;}.pricing-card::before { content:''; position:absolute; inset:0; border-radius:20px; padding:1px; background:linear-gradient(135deg,transparent 40%,var(--accent-orange),transparent 60%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity var(--transition-base);}.pricing-card:hover { transform:translateY(-8px); border-color:var(--accent-orange); box-shadow:0 20px 40px rgba(255,149,0,0.15);}.pricing-card:hover::before { opacity:1;}.pricing-card.featured { border-color:var(--accent-purple); background:linear-gradient(180deg,rgba(135,90,249,0.08) 0%,var(--bg-secondary) 100%);}.pricing-card.featured::before { background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink),var(--accent-orange)); opacity:1;}.pricing-card.featured:hover { border-color:var(--accent-purple); box-shadow:0 20px 40px rgba(135,90,249,0.25),0 0 60px rgba(135,90,249,0.1); transform:translateY(-12px) scale(1.02);}/* ======================================== Form Components - 统一表单规范 ======================================== */.form-group { margin-bottom:var(--space-md);}.form-label { display:block; font-size:14px; font-weight:500; color:var(--text-primary); margin-bottom:var(--space-sm);}.form-label .optional { color:var(--text-muted); font-weight:400;}.form-input,.form-textarea { width:100%; padding:12px 16px; background:var(--bg-primary); border:1px solid var(--border-color); border-radius:12px; color:var(--text-primary); font-size:15px; font-family:inherit; transition:border-color 0.2s,box-shadow 0.2s; box-sizing:border-box;}.form-input:focus,.form-textarea:focus { outline:none; border-color:var(--accent-cyan); box-shadow:0 0 0 3px rgba(50,211,235,0.1);}.form-input::placeholder,.form-textarea::placeholder { color:var(--text-muted);}.form-textarea { min-height:120px; resize:vertical;}.form-error { color:#ef4444; font-size:12px; margin-top:var(--space-xs); display:none;}.form-group.error .form-input,.form-group.error .form-textarea { border-color:#ef4444;}.form-group.error .form-error { display:block;}/* ======================================== Badge Components - 统一徽章规范 ======================================== */.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:600;}.badge-live { background:rgba(52,199,89,0.15); border:1px solid rgba(52,199,89,0.3); color:var(--accent-green);}.badge-live .dot { width:6px; height:6px; background:var(--accent-green); border-radius:50%; animation:pulse 1.5s infinite;}.badge-featured { background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink)); color:white;}.badge-outline { background:transparent; border:1px solid var(--border-color); color:var(--text-secondary);}/* ======================================== Status Indicators - 统一状态指示器 ======================================== */.status-dot { width:8px; height:8px; border-radius:50%;}.status-dot.online { background:var(--accent-green); box-shadow:0 0 8px var(--accent-green);}.status-dot.busy { background:var(--accent-orange);}.status-dot.idle { background:var(--text-muted);}.status-dot.thinking { background:var(--accent-purple); animation:thinking 1.5s infinite;}/* ======================================== Navigation Components - 统一导航规范 ======================================== */.nav-link { font-size:14px; font-weight:500; color:var(--text-secondary); text-decoration:none; padding:8px 16px; border-radius:8px; transition:all 0.2s;}.nav-link:hover,.nav-link.active { color:var(--text-primary); background:var(--bg-tertiary);}/* Mobile Navigation */.mobile-nav { display:none; position:fixed; bottom:0; left:0; right:0; background:rgba(10,10,10,0.95); backdrop-filter:blur(20px); border-top:1px solid var(--border-color); padding:8px 16px; justify-content:space-around; z-index:1000;}.mobile-nav a { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 12px; font-size:10px; color:var(--text-secondary); text-decoration:none; border-radius:8px; transition:all 0.2s;}.mobile-nav a.active { color:var(--accent-orange);}.mobile-nav a span { font-size:20px;}/* Hamburger Menu */.menu-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; background:transparent; border:none; cursor:pointer; padding:4px; z-index:1001;}.menu-toggle span { display:block; width:24px; height:2px; background:var(--text-primary); border-radius:2px; transition:all 0.3s ease;}.menu-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px);}.menu-toggle.active span:nth-child(2) { opacity:0;}.menu-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px);}/* ======================================== Animations ======================================== */@keyframes pulse { 0%,100% {opacity:1;transform:scale(1);} 50% {opacity:0.5;transform:scale(0.9);}}@keyframes thinking { 0%,100% {opacity:1;} 50% {opacity:0.3;}}@keyframes slideUp { from {opacity:0;transform:translateY(20px);} to {opacity:1;transform:translateY(0);}}@keyframes fadeIn { from {opacity:0;} to {opacity:1;}}.animate-slide-up { animation:slideUp 0.6s ease-out;}.animate-fade-in { animation:fadeIn 0.3s ease-out;}/* ======================================== Mobile Optimizations - 统一移动端适配 ======================================== */@media (max-width:768px) { /* Buttons */ .btn-primary, .btn-secondary, .btn-outline { padding:12px 20px; font-size:14px; min-height:48px;}  .btn-lg { padding:16px 28px; font-size:16px;}  /* Cards */ .card, .feature-card, .pricing-card { padding:16px;}  /* Forms */ .form-input, .form-textarea { font-size:16px;/* Prevent zoom on iOS */ padding:14px 16px;}  /* Mobile Navigation */ .menu-toggle { display:flex;}  .mobile-nav { display:flex;}  /* Touch targets */ .nav-link, .badge, .status-dot { min-height:44px; min-width:44px;}}@media (max-width:480px) { .btn-primary, .btn-secondary, .btn-outline { width:100%;}  .feature-card:hover, .pricing-card:hover { transform:translateY(-4px);}}/* Touch device optimizations */@media (hover:none) { .card:hover, .feature-card:hover, .pricing-card:hover, .agent-card:hover { transform:none;}  .card:active, .feature-card:active, .pricing-card:active, .agent-card:active { transform:scale(0.98);}}/** * Sun Team - Mobile Experience Optimizations * 移动端体验优化样式 *//* ======================================== Mobile-First Base Styles ======================================== *//* Prevent horizontal scroll */html,body { overflow-x:hidden; max-width:100vw;}/* Smooth scrolling */html { scroll-behavior:smooth; -webkit-text-size-adjust:100%;}/* Touch action optimization */* { -webkit-tap-highlight-color:transparent; touch-action:manipulation;}/* ======================================== Responsive Typography ======================================== */@media (max-width:768px) { :root { font-size:14px;}  h1 { font-size:1.75rem !important; line-height:1.2;}  h2 { font-size:1.5rem !important;}  h3 { font-size:1.25rem !important;}  p { font-size:0.95rem;}}@media (max-width:480px) { :root { font-size:13px;}  h1 { font-size:1.5rem !important;}  h2 { font-size:1.25rem !important;}}/* ======================================== Mobile Layout Fixes ======================================== */@media (max-width:768px) { /* Container padding */ main { padding:60px 16px 100px !important; max-width:100% !important;}  .header-inner { padding:0 16px; height:56px;}  /* Hero section */ .hero { padding:40px 16px 60px !important;}  .hero h1 { font-size:2rem !important;}  .hero p { font-size:1rem !important; padding:0 8px;}  /* CTA buttons */ .cta-buttons { flex-direction:column !important; gap:12px !important; padding:0 8px !important;}  .cta-buttons .btn { width:100% !important; justify-content:center !important; padding:14px 20px !important;}  /* Grid layouts */ .grid, .grid-2, .grid-3, .grid-4, .grid-6 { display:flex !important; flex-direction:column !important; gap:12px !important;}  /* Stats grid */ .stats-grid, .stats { display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:12px !important;}  /* Cards grid */ .agents-grid, .agents-live-grid, .model-providers-grid, .reviews-grid, .services-grid, .products-grid, .pricing-grid { display:flex !important; flex-direction:column !important; gap:12px !important;}  /* Feature cards */ .feature-card { padding:20px !important;}  .feature-card h3 { font-size:1.1rem !important;}  .feature-card p { font-size:0.9rem !important;}  /* Agent cards */ .agent-card { flex-direction:row !important; gap:16px !important; padding:16px !important;}  .agent-icon { width:48px !important; height:48px !important; font-size:24px !important;}  /* Pricing cards */ .pricing-card { padding:24px 20px !important;}  .pricing-amount { font-size:2.5rem !important;}  /* Footer */ footer { padding:32px 16px !important; margin-bottom:80px;}  footer .footer-content { flex-direction:column !important; gap:24px !important; text-align:center !important;}  /* Newsletter */ .newsletter { flex-direction:column !important; gap:12px !important;}  .newsletter input, .newsletter button { width:100% !important;}}@media (max-width:480px) { /* Smaller screens */ .hero h1 { font-size:1.75rem !important;}  .pricing-amount { font-size:2rem !important;}  .stats-grid { grid-template-columns:1fr 1fr !important;}  /* Start cards */ .start-cards { gap:8px !important;}  .start-card { padding:12px 14px !important;}  .start-icon { font-size:20px !important;}  .start-content strong { font-size:13px !important;}  .start-content span { font-size:11px !important;}}/* ======================================== Touch Target Optimizations ======================================== */@media (max-width:768px) { /* Minimum touch target size */ .btn, .nav a, .nav button, .feature-card, .agent-card, .pricing-card, .faq-item, .task-filter, .stage-btn { min-height:44px; min-width:44px;}  /* Form inputs */ input, textarea, select { min-height:44px; font-size:16px !important;/* Prevent iOS zoom */}  /* Active states for touch */ .btn:active, .card:active, .agent-card:active, .pricing-card:active { transform:scale(0.97);}}/* ======================================== Table Responsive ======================================== */@media (max-width:768px) { .comparison-table, .ability-table, .relationship-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin;}  .comparison-table th, .comparison-table td, .ability-table th, .ability-table td { padding:12px 8px !important; font-size:12px !important; white-space:nowrap;}}/* ======================================== Modal/Overlay Optimizations ======================================== */@media (max-width:768px) { .modal-content { margin:16px !important; padding:24px 16px !important; max-height:90vh; overflow-y:auto;}  .role-card-content { max-width:90% !important; padding:20px !important;}}/* ======================================== Image Optimizations ======================================== */img { max-width:100%; height:auto; display:block;}/* ======================================== Safe Area Support (iPhone X+) */ ======================================== */@supports (padding:max(0px)) { .header { padding-top:max(0px,env(safe-area-inset-top));}  .mobile-nav { padding-bottom:max(8px,env(safe-area-inset-bottom));}  main { padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right));}}/* ======================================== Reduced Motion Support ======================================== */@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}}/* ======================================== Dark Mode Support ======================================== */@media (prefers-color-scheme:dark) { /* Already dark by default */}/* ======================================== Print Styles ======================================== */@media print { .header, .mobile-nav, .nav-toggle, .menu-toggle { display:none !important;}  main { padding:20px !important;}}/** * Sun Team - Page-Specific Style Fixes * 各页面样式问题修复 *//* ======================================== About Page Fixes ======================================== *//* Ability table horizontal scroll */.about-page .ability-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap;}.about-page .ability-table th,.about-page .ability-table td { white-space:nowrap; padding:10px 8px;}/* Relationship table mobile */@media (max-width:768px) { .about-page .relationship-table { font-size:11px;}  .about-page .relationship-table th, .about-page .relationship-table td { padding:8px 4px;}  .about-page .relation-badge { font-size:9px; padding:2px 4px;}  .about-page .relation-details { font-size:8px;}}/* Shift items mobile */@media (max-width:768px) { .about-page .shift-item { flex-direction:column; gap:12px; text-align:center;}  .about-page .shift-info { text-align:center;}  .about-page .shift-change { align-self:center;}}/* ======================================== Pricing Page Fixes ======================================== *//* Pricing grid responsive */@media (max-width:900px) { .pricing-page .pricing-grid { grid-template-columns:1fr; max-width:400px; margin:0 auto;}}/* Pricing card button alignment */.pricing-page .pricing-card { display:flex; flex-direction:column;}.pricing-page .pricing-features { flex-grow:1;}/* FAQ grid mobile */@media (max-width:768px) { .pricing-page .faq-grid { grid-template-columns:1fr;}  .pricing-page .faq-item { padding:16px;}}/* ======================================== Skills Page Fixes ======================================== *//* Agents grid responsive */@media (max-width:900px) { .skills-page .agents-grid { grid-template-columns:repeat(2,1fr);}}@media (max-width:600px) { .skills-page .agents-grid { grid-template-columns:1fr;}}/* Agent card hover effect consistency */.skills-page .agent-card { transition:all 0.3s cubic-bezier(0.4,0,0.2,1);}.skills-page .agent-card:hover { border-color:var(--accent-orange); transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,0.3);}/* ======================================== Contact Page Fixes ======================================== *//* Contact container mobile */@media (max-width:768px) { .contact-page .contact-container { grid-template-columns:1fr; padding:32px 16px;}  .contact-page .contact-info { order:2;}  .contact-page .contact-form-container { order:1;}  .contact-page .contact-item { flex-direction:column; text-align:center; gap:8px;}  .contact-page .contact-icon { margin:0 auto;}}/* Form input focus states */.contact-page .form-input:focus,.contact-page .form-textarea:focus { border-color:var(--accent-cyan); box-shadow:0 0 0 3px rgba(34,211,238,0.1);}/* ======================================== Vault Page Fixes ======================================== *//* Pricing grid consistency */.vault-page .pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}@media (max-width:900px) { .vault-page .pricing-grid { grid-template-columns:1fr; max-width:400px; margin:0 auto;}}/* FAQ tabs mobile */@media (max-width:768px) { .vault-page .faq-tabs { flex-wrap:wrap; justify-content:center;}  .vault-page .faq-tab { padding:8px 14px; font-size:12px;}}/* Comparison table mobile */@media (max-width:768px) { .vault-page .comparison-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;}  .vault-page .comparison-table th, .vault-page .comparison-table td { padding:12px 8px; font-size:12px;}}/* Modal mobile */@media (max-width:768px) { .vault-page .modal { margin:16px; padding:24px 16px; max-height:90vh; overflow-y:auto;}}/* ======================================== Office Page Fixes ======================================== *//* Pulse grid mobile */@media (max-width:640px) { .office-page .pulse-grid { grid-template-columns:repeat(2,1fr);}  .office-page .pulse-value { font-size:24px;}}/* Two column layout mobile */@media (max-width:1024px) { .office-page .two-col { grid-template-columns:1fr;}}/* Agent cards grid */@media (max-width:640px) { .office-page .grid-6 { grid-template-columns:repeat(2,1fr);}}/* ======================================== Stage Page Fixes ======================================== *//* Main layout mobile */@media (max-width:1024px) { .stage-page main { grid-template-columns:1fr;}  .stage-page .sidebar { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px;}  .stage-page .welcome-card { grid-column:1 / -1;}}/* Dashboard grid mobile */@media (max-width:1024px) { .stage-page .dashboard-grid { grid-template-columns:repeat(2,1fr);}}@media (max-width:640px) { .stage-page .dashboard-grid { grid-template-columns:1fr;}}/* Matrix grid mobile */@media (max-width:768px) { .stage-page .matrix-container { padding:12px;}  .stage-page .matrix-cell { font-size:9px;}}/* Feed list mobile */@media (max-width:768px) { .stage-page .feed-item { flex-wrap:wrap; gap:6px;}  .stage-page .feed-content { width:100%; margin-top:6px;}}/* Task filters mobile */@media (max-width:480px) { .stage-page .tasks-filters { flex-wrap:wrap;}  .stage-page .task-filter { padding:6px 10px; font-size:11px;}}/* Stage controls mobile */@media (max-width:768px) { .stage-page .stage-controls { flex-wrap:wrap; justify-content:center;}  .stage-page .stage-btn span:last-child { display:none;}}/* ======================================== Index/Home Page Fixes ======================================== *//* Hero section mobile */@media (max-width:768px) { .home-page .hero { padding:60px 16px !important;}  .home-page .hero h1 { font-size:2rem !important;}  /* Live agents grid */ .home-page #hero-agents-grid { gap:6px !important;}  .home-page .agent-chip { padding:8px 10px !important; font-size:11px !important;}  .home-page .agent-avatar { width:24px !important; height:24px !important; font-size:12px !important;}}/* Features grid mobile */@media (max-width:768px) { .home-page .features { grid-template-columns:1fr !important; gap:16px !important; margin-top:40px !important;}}/* Stats bar mobile */@media (max-width:768px) { .home-page .stats-bar { flex-direction:column !important; gap:20px !important; padding:24px !important;}}/* Reviews grid mobile */@media (max-width:900px) { .home-page .reviews-grid { grid-template-columns:repeat(2,1fr) !important;}}@media (max-width:600px) { .home-page .reviews-grid { grid-template-columns:1fr !important;}}/* Services grid mobile */@media (max-width:768px) { .home-page .services-grid, .home-page .products-grid { grid-template-columns:1fr !important;}}/* Subscribe bar mobile */@media (max-width:768px) { .home-page .subscribe-bar { padding:12px 16px !important;}  .home-page .subscribe-bar-inner { flex-direction:column !important; gap:12px !important;}  .home-page .subscribe-form { flex-direction:column !important; width:100% !important;}  .home-page .subscribe-input, .home-page .subscribe-btn { width:100% !important;}}/* ======================================== Common Fixes ======================================== *//* Fix for empty content */.empty-state { text-align:center; padding:40px 20px; color:var(--text-muted);}.empty-state-icon { font-size:48px; margin-bottom:12px; opacity:0.5;}/* Loading state */.loading { display:flex; align-items:center; justify-content:center; padding:40px; color:var(--text-secondary);}.loading-spinner { width:20px; height:20px; border:2px solid var(--border-color); border-top-color:var(--accent-orange); border-radius:50%; animation:spin 1s linear infinite; margin-right:10px;}@keyframes spin { to {transform:rotate(360deg);}}/* Scrollbar styling */::-webkit-scrollbar { width:8px; height:8px;}::-webkit-scrollbar-track { background:var(--bg-dark);}::-webkit-scrollbar-thumb { background:var(--bg-dark-tertiary); border-radius:4px;}::-webkit-scrollbar-thumb:hover { background:var(--border-color);}/* Selection color */::selection { background:rgba(255,149,0,0.3); color:var(--text-dark);}/* Focus visible for accessibility */:focus-visible { outline:2px solid var(--accent-orange); outline-offset:2px;}/* Smooth scroll for anchor links */html { scroll-behavior:smooth;}/* Prevent text selection on interactive elements */.btn,.nav-toggle,.menu-toggle,.agent-card,.pricing-card { user-select:none;}/** * Sun Team - 响应式优化样式 * Responsive Optimizations *  * 目标：全设备适配 (Mobile + Tablet + Desktop) * 更新日期:2026-03-12 *//* ======================================== 1. 基础响应式设置 ======================================== *//* 防止水平滚动 */html,body { overflow-x:hidden; max-width:100vw;}/* 平滑滚动 */html { scroll-behavior:smooth; -webkit-text-size-adjust:100%;}/* 触摸优化 */* { -webkit-tap-highlight-color:transparent; touch-action:manipulation;}/* 图片自适应 */img { max-width:100%; height:auto; display:block;}/* ======================================== 2. 平板适配 (769px - 1024px) ======================================== */@media (min-width:769px) and (max-width:1024px) { /* 容器调整 */ .header-inner, main, .pricing-container, .pricing-cards, .features { max-width:100%; padding-left:20px; padding-right:20px;}  /* Hero区域 */ .hero { padding:60px 20px 80px;}  .hero h1 { font-size:2.5rem;}  /* 网格布局调整 */ .features { grid-template-columns:repeat(2,1fr); gap:20px;}  .pricing-cards { grid-template-columns:repeat(2,1fr);}  .pricing-card-mini.featured { transform:scale(1);}  /* Agent网格 */ .agents-grid { gap:12px;}  .agent-chip { padding:10px 16px; font-size:13px;}  /* Stats bar */ .stats-bar { gap:40px; padding:32px;}  .stat-value { font-size:2.2rem;}  /* Live feed grid */ .agents-live-grid { grid-template-columns:repeat(3,1fr);}  /* Reviews */ .reviews-grid { grid-template-columns:repeat(2,1fr);}  /* Quick entry */ .quick-entry-grid { grid-template-columns:repeat(4,1fr);}  /* Case studies */ .case-studies .card-col-2 { grid-template-columns:1fr;}  /* Footer grid */ footer > div:first-child { grid-template-columns:repeat(2,1fr);}}/* ======================================== 3. 移动端适配 (<= 768px) ======================================== */@media (max-width:768px) { /* 强制所有网格布局在移动端变为单列 - 最高优先级 */ [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns:repeat(2"], [style*="display:grid"] { display:flex !important; flex-direction:column !important; gap:12px !important; grid-template-columns:none !important;}  /* 特定组件覆盖 */ section > div[style*="grid-template-columns"] { display:flex !important; flex-direction:column !important; gap:12px !important;}  /* Quick Entry Grid 移动端优化 - 2列 */ section:has(.nav-card) > div[style*="grid-template-columns:repeat(4"] { display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:8px !important;}  /* Pricing Cards 移动端单列 */ .pricing-cards, section:has(.pricing-card-mini) > div { display:flex !important; flex-direction:column !important; gap:16px !important; max-width:400px !important; margin:0 auto !important;}  /* Features section 强制单列 */ section.features, .features { display:flex !important; flex-direction:column !important; gap:16px !important;}  /* Reviews section 强制单列 */ .reviews-grid, section:has(.review-card) > div { display:flex !important; flex-direction:column !important; gap:12px !important;}  /* Services & Products 强制单列 */ section:has(> div > div > h3) > div[style*="grid-template-columns:repeat(3"] { display:flex !important; flex-direction:column !important; gap:12px !important;} /* 字体缩放 */ :root { font-size:14px;}  h1 {font-size:1.75rem !important;line-height:1.2;} h2 {font-size:1.5rem !important;} h3 {font-size:1.25rem !important;}  /* 容器内边距 */ .header-inner { padding:0 16px; height:56px;}  main { padding:60px 16px 100px !important; max-width:100% !important;}  /* Hero区域优化 */ .hero { padding:40px 16px 60px !important;}  .hero h1 { font-size:1.85rem !important; line-height:1.2;}  .hero p { font-size:1rem !important; padding:0 8px;}  /* CTA按钮 */ .cta-buttons { flex-direction:column !important; gap:12px !important; padding:0 8px !important;}  .cta-buttons .btn { width:100% !important; justify-content:center !important; padding:14px 20px !important; font-size:15px;}  /* 网格布局统一处理 */ .grid, .grid-2, .grid-3, .grid-4, .grid-6, [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns:repeat(2"] { display:flex !important; flex-direction:column !important; gap:12px !important;}  /* Feature cards */ .features { grid-template-columns:1fr !important; gap:16px !important; margin-top:40px !important;}  .feature-card { padding:20px !important;}  .feature-card h3 { font-size:1.1rem !important;}  .feature-card p { font-size:0.9rem !important;}  /* Agent cards */ .agents-grid { flex-direction:column !important; align-items:center !important; gap:10px !important;}  .agent-chip { width:100% !important; max-width:280px !important; justify-content:center !important; padding:10px 14px !important; font-size:12px !important;}  .agent-avatar { width:24px !important; height:24px !important; font-size:12px !important;}  /* Agent status cards */ .agent-status-card { min-width:80px !important; padding:12px !important;}  /* Stats bar */ .stats-bar { flex-direction:column !important; gap:20px !important; padding:24px !important;}  .stat-value { font-size:1.8rem !important;}  /* Live feed */ .live-feed { margin:40px -16px !important; padding:20px 16px !important; border-radius:0 !important;}  .agents-live-grid { display:flex !important; flex-direction:column !important; gap:12px !important;}  .agent-live-card { flex-direction:row !important; text-align:left !important; align-items:center !important;}  /* Model providers */ .model-providers { margin:24px -16px !important; padding:20px 16px !important; border-radius:0 !important;}  .model-providers-grid { flex-direction:column !important; gap:10px !important;}  .model-provider-card { flex-direction:row !important; text-align:left !important; gap:12px !important; padding:12px 16px !important;}  /* Demand radar */ .demand-radar { padding:20px 16px !important;}  .demand-radar-pipeline { flex-direction:column !important; gap:12px !important;}  .pipeline-stage { width:100% !important;}  /* Reviews */ .reviews-grid { display:flex !important; flex-direction:column !important; gap:12px !important;}  .review-card { padding:16px !important;}  /* Services & Products */ .services-grid, .products-grid { display:flex !important; flex-direction:column !important; gap:12px !important;}  /* Pricing cards */ .pricing-cards { grid-template-columns:1fr !important; max-width:400px !important; margin:0 auto !important;}  .pricing-card-mini { padding:20px !important;}  /* Case studies */ .case-card { padding:16px !important;}  .case-card .card-col-2 { grid-template-columns:1fr !important; gap:12px !important;}  /* Quick entry links */ .quick-entry-grid { grid-template-columns:repeat(2,1fr) !important;}  .nav-card { padding:16px 8px !important;}  .nav-card span:first-child { font-size:24px !important;}  /* Subscribe section */ .subscribe-section form { flex-direction:column !important; width:100% !important;}  .subscribe-section input, .subscribe-section button { width:100% !important;}  /* Contact section */ .contact form { flex-direction:column !important; width:100% !important;}  /* Footer */ footer { padding:32px 16px 100px !important;}  footer > div:first-child { grid-template-columns:1fr !important; gap:24px !important; text-align:center !important;}  footer ul { justify-content:center !important;}  /* Bottom nav - 修复宽度溢出问题 */ .bottom-nav { padding:10px 8px !important; left:0 !important; right:0 !important; width:100% !important; max-width:100vw !important; box-sizing:border-box !important;}  .bottom-nav > div { max-width:100% !important; padding:0 8px !important; gap:4px !important;}  .bottom-nav a { font-size:11px !important; padding:6px 8px !important; white-space:nowrap !important;}  /* FAQ section */ details { margin-bottom:8px !important;}  summary { padding:12px 16px !important; font-size:14px !important;}  /* Free tools grid */ .free-tools > div { grid-template-columns:1fr !important;}}/* ======================================== 4. 小屏手机适配 (<= 480px) ======================================== */@media (max-width:480px) { :root { font-size:13px;}  h1 {font-size:1.5rem !important;} h2 {font-size:1.25rem !important;}  .hero h1 { font-size:1.6rem !important;}  /* Stats 2列 */ .stats-grid { grid-template-columns:repeat(2,1fr) !important;}  /* Quick entry 2列 */ .quick-entry-grid { grid-template-columns:repeat(2,1fr) !important; gap:8px !important;}  .nav-card { padding:12px 8px !important;}  .nav-card span:first-child { font-size:20px !important;}  .nav-card span:nth-child(2) { font-size:12px !important;}  /* Agent cards 更紧凑 */ .agent-chip { padding:8px 12px !important; font-size:11px !important;}  /* Live feed 更紧凑 */ .agent-live-card { padding:12px !important;}  .agent-live-avatar { width:36px !important; height:36px !important; font-size:16px !important;}  /* Pricing */ .pricing-amount { font-size:2rem !important;}  /* Buttons */ .btn { padding:12px 16px !important; font-size:14px !important;}}/* ======================================== 5. 超小屏适配 (<= 375px) ======================================== */@media (max-width:375px) { .hero h1 { font-size:1.4rem !important;}  /* Agent名字隐藏 */ .agent-chip span:last-child { display:none !important;}  /* Bottom nav 更紧凑 */ .bottom-nav a { font-size:10px !important; padding:4px 8px !important;}  /* Stats 单列 */ .stats-grid { grid-template-columns:1fr !important;}}/* ======================================== 6. 横屏模式优化 ======================================== */@media (max-width:768px) and (orientation:landscape) { .hero { padding:24px 0 40px !important;}  .hero h1 { font-size:1.75rem !important;}  /* Nav 更窄 */ .nav { width:50% !important; max-width:200px !important;}  /* Features 2列 */ .features { grid-template-columns:repeat(2,1fr) !important;}}/* ======================================== 7. 触摸设备优化 ======================================== */@media (hover:none) and (pointer:coarse) { /* 增大触摸目标 */ .btn, .nav a, .nav button, .feature-card, .agent-card, .pricing-card, .faq-item, .task-filter, .stage-btn, .nav-card, .card-block { min-height:44px; min-width:44px;}  /* 表单输入 */ input, textarea, select { min-height:44px; font-size:16px !important;/* 防止iOS缩放 */}  /* 点击反馈 */ .btn:active, .card:active, .agent-card:active, .pricing-card:active, .nav-card:active, .card-block:active { transform:scale(0.97);}  /* 禁用hover效果 */ .card:hover, .feature-card:hover, .pricing-card:hover, .agent-card:hover, .nav-card:hover, .card-block:hover { transform:none;}}/* ======================================== 8. 表格响应式 ======================================== */@media (max-width:768px) { .comparison-table, .ability-table, .relationship-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin;}  .comparison-table th, .comparison-table td, .ability-table th, .ability-table td { padding:12px 8px !important; font-size:12px !important; white-space:nowrap;}}/* ======================================== 9. 模态框/弹窗优化 ======================================== */@media (max-width:768px) { .modal-content { margin:16px !important; padding:24px 16px !important; max-height:90vh; overflow-y:auto;}  .role-card-content { max-width:90% !important; padding:20px !important;}}/* ======================================== 10. Safe Area 支持 (iPhone X+) ======================================== */@supports (padding:max(0px)) { .header { padding-top:max(0px,env(safe-area-inset-top));}  .mobile-nav, .bottom-nav { padding-bottom:max(12px,env(safe-area-inset-bottom));}  main { padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right));}}/* ======================================== 11. 减少动画偏好支持 ======================================== */@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}}/* ======================================== 12. 打印样式 ======================================== */@media print { .header, .mobile-nav, .bottom-nav, .nav-toggle, .menu-toggle { display:none !important;}  main { padding:20px !important;}}/* ======================================== 13. 特定组件修复 ======================================== *//* Pipeline bar 移动端 */@media (max-width:768px) { .pipeline-bar { height:8px !important;}  .demand-radar-progress { margin:16px 0 !important;}}/* Hero agents grid 移动端 */@media (max-width:768px) { #hero-agents-grid { gap:6px !important;}  #hero-agents-grid .agent-chip { padding:6px 10px !important; font-size:11px !important;}}/* Subscribe form 移动端 */@media (max-width:768px) { #subscribe-form { flex-direction:column !important; gap:12px !important;}  #subscribe-email { width:100% !important;}}/* Quick subscribe 移动端 */@media (max-width:768px) { form[onsubmit="handleQuickSubscribe(event)"] { flex-direction:column !important; gap:8px !important;}  form[onsubmit="handleQuickSubscribe(event)"] input, form[onsubmit="handleQuickSubscribe(event)"] button { width:100% !important;}}/* Case studies 移动端 */@media (max-width:768px) { .case-studies { gap:16px !important;}  .case-card .flex-center-gap12 { flex-direction:column !important; text-align:center !important; gap:8px !important;}}/* Footer bottom nav 间距修复 */footer > div:last-of-type { margin-bottom:80px;}/* 防止底部导航遮挡内容 */body { padding-bottom:80px;}/* ======================================== 14. 滚动条美化 ======================================== */::-webkit-scrollbar { width:6px; height:6px;}::-webkit-scrollbar-track { background:var(--bg-primary);}::-webkit-scrollbar-thumb { background:var(--bg-tertiary); border-radius:3px;}::-webkit-scrollbar-thumb:hover { background:var(--border-color);}/* 移动端隐藏滚动条但保持功能 */@media (max-width:768px) { ::-webkit-scrollbar { width:0; height:0;}}/** * Sun Team - Mobile Override Styles * 移动端覆盖样式 - 最高优先级 *  * 此文件确保移动端响应式效果 * 最后加载以覆盖所有其他样式 *//* ======================================== 强制移动端网格布局覆盖 ======================================== */@media (max-width:768px) { /* 强制所有3列网格变为单列 */ .features, section.features { display:flex !important; flex-direction:column !important; gap:16px !important; grid-template-columns:none !important;}  /* Pricing Cards 强制单列 */ .pricing-cards { display:flex !important; flex-direction:column !important; gap:16px !important; max-width:400px !important; margin:0 auto !important; grid-template-columns:none !important;}  /* Reviews 强制单列 */ .reviews-grid { display:flex !important; flex-direction:column !important; gap:12px !important; grid-template-columns:none !important;}  /* Services 强制单列 */ .services-grid, section .services-grid { display:flex !important; flex-direction:column !important; gap:12px !important; grid-template-columns:none !important;}  /* Products 强制单列 */ .products-grid, section .products-grid { display:flex !important; flex-direction:column !important; gap:12px !important; grid-template-columns:none !important;}  /* Quick Entry 2列 */ .quick-entry-grid, section:has(.nav-card) > div { display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:8px !important;}  /* Stats Bar 垂直布局 */ .stats-bar { flex-direction:column !important; gap:20px !important; padding:24px !important;}  /* Agents Grid 垂直布局 */ .agents-grid { flex-direction:column !important; align-items:center !important; gap:10px !important;}  /* Live Feed Grid */ .agents-live-grid { display:flex !important; flex-direction:column !important; gap:12px !important;}  /* Model Providers Grid */ .model-providers-grid { display:flex !important; flex-direction:column !important; gap:10px !important;}  /* Demand Radar Pipeline */ .demand-radar-pipeline { flex-direction:column !important; gap:12px !important;}  .pipeline-stage { width:100% !important;}  /* Footer Grid */ footer > div:first-child { display:flex !important; flex-direction:column !important; gap:24px !important; text-align:center !important; grid-template-columns:none !important;}  /* 底部导航修复 */ .bottom-nav { position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important; width:100% !important; max-width:100vw !important; padding:10px 8px !important; box-sizing:border-box !important;}  .bottom-nav > div { display:flex !important; justify-content:center !important; gap:4px !important; flex-wrap:wrap !important; max-width:100% !important; padding:0 8px !important;}  .bottom-nav a { font-size:11px !important; padding:6px 8px !important; white-space:nowrap !important;}  /* CTA Buttons 垂直布局 */ .cta-buttons { flex-direction:column !important; gap:12px !important; padding:0 8px !important;}  .cta-buttons .btn { width:100% !important; justify-content:center !important;}  /* Case Studies */ .case-card .card-col-2 { display:flex !important; flex-direction:column !important; gap:12px !important; grid-template-columns:none !important;}  /* Subscribe Form */ .subscribe-section form, form[onsubmit*="handleSubscribe"] { flex-direction:column !important; width:100% !important;}  .subscribe-section input, .subscribe-section button, form[onsubmit*="handleSubscribe"] input, form[onsubmit*="handleSubscribe"] button { width:100% !important;}  /* Quick Subscribe Form */ form[onsubmit*="handleQuickSubscribe"] { flex-direction:column !important; gap:8px !important;}  form[onsubmit*="handleQuickSubscribe"] input, form[onsubmit*="handleQuickSubscribe"] button { width:100% !important;}}/* ======================================== 小屏手机 (<= 480px) ======================================== */@media (max-width:480px) { /* Quick Entry 保持2列但更小 */ .quick-entry-grid { gap:6px !important;}  .nav-card { padding:12px 6px !important;}  .nav-card span:first-child { font-size:20px !important;}  .nav-card span:nth-child(2) { font-size:11px !important;}  /* 底部导航更紧凑 */ .bottom-nav a { font-size:10px !important; padding:4px 6px !important;}}/* ======================================== 超小屏 (<= 375px) ======================================== */@media (max-width:375px) { /* Quick Entry 变为单列 */ .quick-entry-grid { grid-template-columns:1fr !important;}  /* 底部导航 */ .bottom-nav a { font-size:9px !important; padding:4px 5px !important;}}/* ======================================== 防止水平滚动 ======================================== */@media (max-width:768px) { html,body { overflow-x:hidden !important; max-width:100vw !important;}  main { padding-bottom:100px !important; overflow-x:hidden !important;}  section { max-width:100% !important; overflow-x:hidden !important;}}