: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;
  }
}