/* ========================================
   newpage.css - Globoshop 页面自定义样式
   配合 Bootstrap 4 使用
   ======================================== */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* --- CSS Variables --- */
:root {
  --color-primary: #155DFC;
  --color-primary-dark: #0d47c9;
  --color-text-dark: #1a1f36;
  --color-text-body: #4a5565;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-bg-light: #f9fafb;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-purple-600: #9333ea;
  --color-orange-600: #ea580c;
}

/* --- Base Styles --- */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--color-text-dark);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }

/* --- Container Override --- */
.gs-page-content .container,
.gs-navbar .container {
  max-width: 1280px;
}

/* --- Navbar --- */
.gs-navbar {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 1050;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.gs-navbar-inner {
  height: 64px;
}
.gs-brand-area {
  gap: 12px;
}
.gs-brand-logo {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.gs-navbar .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.gs-navbar .brand-text .brand-name {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-text-dark);
}
.gs-navbar .brand-text .brand-sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-primary);
}
.gs-nav-group {
  gap: 4px;
}
.gs-nav-actions {
  gap: 12px;
}
.gs-nav-link {
  padding: 0.5rem 1rem;
  color: var(--color-text-body);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.gs-nav-link:hover {
  color: var(--color-primary);
  background: #eff6ff;
  text-decoration: none;
}
.gs-btn-primary {
  background: var(--color-primary);
  color: #fff !important;
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  transition: background 0.2s;
  border: none;
  display: inline-block;
  text-align: center;
}
.gs-btn-primary:hover {
  background: var(--color-primary-dark);
  color: #fff !important;
  text-decoration: none;
}
.gs-btn-primary.gs-btn-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-size: 1rem;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(21, 93, 252, 0.25);
}
.gs-btn-primary.gs-btn-lg svg {
  flex-shrink: 0;
}
.gs-btn-search {
  padding: 0.5rem;
  color: var(--color-text-body);
  border-radius: 8px;
  transition: all 0.2s;
  background: transparent;
  border: none;
}
.gs-btn-search:hover {
  color: var(--color-primary);
  background: #eff6ff;
}

/* --- Hero Section --- */
.gs-hero {
  padding-top: 80px;
  padding-bottom: 80px;
  background: var(--color-bg-light);
}
.gs-hero .col-12.col-lg-6.d-flex.flex-column {
  align-items: flex-start;
}
.gs-hero .col-12.col-lg-6.d-flex.flex-column > *:not(.gs-hero-badge) {
  align-self: stretch;
}
.gs-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #eff6ff;
  color: var(--color-primary);
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.gs-hero h1 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 1.5rem;
  line-height: 1.15;
}
.gs-hero h1 .text-primary {
  color: var(--color-primary) !important;
}
.gs-hero .hero-desc {
  color: var(--color-text-body);
  font-size: 1.125rem;
  line-height: 1.625;
  margin-bottom: 2rem;
  max-width: 540px;
}
.gs-btn-hero-primary {
  background: var(--color-primary);
  color: #fff;
  padding: 0.875rem 2rem;
  border-radius: 8px;
  font-weight: 700;
  transition: all 0.2s;
  border: none;
  box-shadow: 0 10px 15px -3px rgba(21,93,252,0.2);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.gs-btn-hero-primary:hover {
  background: var(--color-primary-dark);
  color: #fff;
}
.gs-btn-hero-outline {
  background: #fff;
  color: var(--color-primary);
  padding: 0.875rem 2rem;
  border-radius: 8px;
  font-weight: 700;
  border: 1px solid var(--color-primary);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
}
.gs-btn-hero-outline:hover {
  background: #eff6ff;
  color: var(--color-primary);
}

/* Hero Stat Cards */
.gs-hero-stats-row {
  margin: 0 -8px;
}
.gs-hero-stats-col {
  padding: 0 8px;
}
.gs-stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid var(--color-border);
}
.gs-stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}
.gs-stat-card .stat-label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Hero Right Panel */
.gs-hero-panel {
  background: linear-gradient(135deg, #eff6ff, rgba(219,234,254,0.5));
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid rgba(21,93,252,0.2);
  position: relative;
}
.gs-metric-grid {
  max-width: 448px;
  margin: 0 -8px;
}
.gs-metric-col {
  padding: 0 8px;
}
.gs-metric-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s;
}
.gs-metric-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
.gs-metric-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.gs-metric-icon.blue { background: #eff6ff; color: var(--color-primary); }
.gs-metric-icon.green { background: #f0fdf4; color: var(--color-green-600); }
.gs-metric-icon.purple { background: #faf5ff; color: var(--color-purple-600); }
.gs-metric-icon.orange { background: #fff7ed; color: var(--color-orange-600); }

.gs-metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.gs-metric-value.text-blue { color: var(--color-primary); }
.gs-metric-value.text-green { color: var(--color-green-600); }
.gs-metric-value.text-purple { color: var(--color-purple-600); }
.gs-metric-value.text-orange { color: var(--color-orange-600); }

.gs-metric-label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Decorative blurs */
.gs-blur-circle {
  position: absolute;
  border-radius: 9999px;
  filter: blur(40px);
  pointer-events: none;
}
.gs-blur-circle.top-right {
  top: -16px; right: -16px;
  width: 96px; height: 96px;
  background: rgba(21,93,252,0.1);
}
.gs-blur-circle.bottom-left {
  bottom: -16px; left: -16px;
  width: 128px; height: 128px;
  background: rgba(147,197,253,0.2);
}

/* --- Partners Section --- */
.gs-partners {
  padding: 2.5rem 0;
  background: #fff;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
.gs-partners .section-label {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.gs-partner-logos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0.6;
  filter: grayscale(1);
  transition: all 0.5s;
  gap: 2rem;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.gs-partner-logos::-webkit-scrollbar { display: none; }
.gs-partner-logos:hover {
  filter: grayscale(0);
  opacity: 1;
}
.gs-partner-logos span {
  font-size: 1.25rem;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
}

/* --- Features Section --- */
.gs-features {
  padding: 6rem 0;
  background: var(--color-bg-light);
}
.gs-features .gs-section-desc {
  max-width: 768px;
}
.gs-section-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 1rem;
}
.gs-section-desc {
  color: var(--color-text-muted);
  font-size: 1.125rem;
}
.gs-feature-card {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  border: 1px solid var(--color-border);
  transition: all 0.3s;
  height: 100%;
}
.gs-feature-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
  border-color: rgba(21,93,252,0.3);
}
.gs-feature-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(21,93,252,0.1);
  color: #fff;
  transition: transform 0.3s;
}
.gs-feature-card:hover .gs-feature-icon {
  transform: scale(1.1);
}
.gs-feature-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}
.gs-feature-card p {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.625;
  margin-bottom: 1.5rem;
  min-height: 56px;
}
.gs-tag {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  background: #f9fafb;
  color: #4b5563;
  border-radius: 6px;
  border: 1px solid #f3f4f6;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

/* --- Templates Section --- */
.gs-templates {
  padding: 6rem 0;
  background: #fff;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.gs-templates-header {
  gap: 1.5rem;
}
.gs-templates .gs-section-desc {
  max-width: 540px;
}
.gs-view-all-btn {
  color: var(--color-primary);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.3s;
}
.gs-view-all-btn:hover {
  gap: 0.75rem;
  color: var(--color-primary);
  text-decoration: none;
}
.gs-template-card {
  cursor: pointer;
}
.gs-template-card .template-img-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  margin-bottom: 1rem;
  padding-bottom: 133.33%; /* 3:4 aspect ratio */
}
.gs-template-card .template-img-wrap img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}
.gs-template-card:hover .template-img-wrap img {
  transform: scale(1.05);
}
.gs-template-card .template-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0);
  transition: background 0.3s;
}
.gs-template-card:hover .template-overlay {
  background: rgba(0,0,0,0.1);
}
.gs-template-card .template-btn-wrap {
  position: absolute;
  bottom: 1rem; left: 1rem; right: 1rem;
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.3s;
}
.gs-template-card:hover .template-btn-wrap {
  transform: translateY(0);
  opacity: 1;
}
.gs-template-card .template-btn-wrap .btn {
  background: #fff;
  color: var(--color-text-dark);
  font-weight: 700;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 0.75rem;
}
.gs-template-card .template-btn-wrap .btn:hover {
  background: #eff6ff;
}
.gs-template-name {
  font-weight: 700;
  color: var(--color-text-dark);
}
.gs-template-cat {
  font-size: 0.75rem;
  background: #f3f4f6;
  color: #4b5563;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* --- Steps Section --- */
.gs-steps {
  padding: 6rem 0;
  background: var(--color-bg-light);
}
.gs-steps-badge {
  color: var(--color-primary);
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  text-transform: uppercase;
  font-weight: 700;
}
.gs-steps .gs-section-desc {
  max-width: 640px;
}
.gs-step-card {
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 2rem;
  border-radius: 16px;
  transition: all 0.3s;
  position: relative;
  height: 100%;
}
.gs-step-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.gs-step-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #eff6ff;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}
.gs-step-card:hover .gs-step-icon {
  background: var(--color-primary);
  color: #fff;
}
.gs-step-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}
.gs-step-card p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.625;
}

/* --- Pricing Section --- */
.gs-pricing {
  padding: 6rem 0;
  background: #fff;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.gs-toggle-wrap {
  display: inline-flex;
  background: #f3f4f6;
  padding: 4px;
  border-radius: 9999px;
}
.gs-toggle-btn {
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: #6b7280;
  transition: all 0.2s;
  cursor: pointer;
}
.gs-toggle-btn.active {
  background: #fff;
  color: var(--color-text-dark);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.gs-toggle-btn .discount-badge {
  font-size: 0.75rem;
  color: var(--color-green-500);
  margin-left: 0.25rem;
}
.gs-price-card {
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid var(--color-border);
  transition: all 0.3s;
  background: #fff;
  height: 100%;
}
.gs-price-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.gs-price-card.featured {
  border-color: var(--color-primary);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
  transform: scale(1.05);
  position: relative;
  z-index: 10;
}
.gs-price-card .popular-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-primary);
  color: #fff;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
.gs-price-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
}
.gs-price-card .price-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
  min-height: 40px;
}
.gs-price-amount {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-text-dark);
}
.gs-price-period {
  color: #6b7280;
}
.gs-price-btn {
  width: 100%;
  padding: 0.75rem;
  border-radius: 8px;
  font-weight: 700;
  border: none;
  transition: background 0.2s;
  margin-bottom: 2rem;
  cursor: pointer;
}
.gs-price-btn.outline {
  background: #eff6ff;
  color: var(--color-primary);
}
.gs-price-btn.outline:hover { background: #dbeafe; }
.gs-price-btn.filled {
  background: var(--color-primary);
  color: #fff;
}
.gs-price-btn.filled:hover { background: var(--color-primary-dark); }

.gs-check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-body);
  margin-bottom: 1rem;
}
.gs-check-item svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.gs-check-item.disabled {
  color: #9ca3af;
}
.gs-check-item.disabled svg {
  color: #d1d5db;
}

/* --- Testimonials / Use Cases Section --- */
.gs-testimonial {
  padding: 6rem 0;
  background: var(--color-bg-light);
}
.gs-testimonial-img {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
.gs-testimonial-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gs-testimonial-img .img-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}
.gs-testimonial-img .img-caption {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  color: #fff;
}
.gs-testimonial-img .img-caption .label {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #93c5fd;
  margin-bottom: 0.5rem;
}
.gs-testimonial-img .img-caption h3 {
  font-size: 1.5rem;
  font-weight: 700;
}
.gs-testimonial-img .img-caption p {
  margin-top: 0.5rem;
  color: #d1d5db;
}
.gs-usecase-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.gs-usecase-icon {
  margin-top: 0.25rem;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gs-usecase-icon.orange { background: #fff7ed; color: var(--color-orange-600); }
.gs-usecase-icon.blue { background: #eff6ff; color: var(--color-primary); }
.gs-usecase-item h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-dark);
}
.gs-usecase-item p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

/* --- FAQ Section --- */
.gs-faq {
  padding: 6rem 0;
  background: #fff;
  border-top: 1px solid var(--color-border);
}
.gs-faq .container {
  max-width: 768px;
}
.gs-faq-item {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  overflow: hidden;
  margin-bottom: 1rem;
  transition: border-color 0.3s;
}
.gs-faq-item:hover {
  border-color: rgba(21,93,252,0.3);
}
.gs-faq-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
}
.gs-faq-btn .faq-question {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-text-dark);
}
.gs-faq-btn .faq-question.active {
  color: var(--color-primary);
}
.gs-faq-btn svg {
  color: #9ca3af;
  transition: transform 0.3s;
  flex-shrink: 0;
}
.gs-faq-btn svg.rotated {
  transform: rotate(180deg);
  color: var(--color-primary);
}
.gs-faq-answer {
  padding: 0 1.5rem 1.5rem;
  color: var(--color-text-muted);
  line-height: 1.625;
  border-top: 1px dashed #f3f4f6;
  margin-top: 0.5rem;
  padding-top: 0;
}

/* --- CTA Section --- */
.gs-cta {
  padding: 5rem 0;
}
.gs-cta-box {
  background: var(--color-primary);
  border-radius: 24px;
  padding: 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(21,93,252,0.2);
}
.gs-cta-box h2 {
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}
.gs-cta-box .cta-desc {
  color: #bfdbfe;
  font-size: 1.125rem;
  max-width: 672px;
  margin: 0 auto 2.5rem;
  position: relative;
  z-index: 1;
}
.gs-cta-btns {
  position: relative;
  z-index: 1;
}
.gs-cta-btn-white {
  background: #fff;
  color: var(--color-primary);
  padding: 1rem 2.5rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.125rem;
  border: none;
  transition: background 0.2s;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  display: inline-block;
}
.gs-cta-btn-white:hover {
  background: #eff6ff;
  color: var(--color-primary);
}
.gs-cta-btn-outline {
  background: transparent;
  color: #fff;
  padding: 1rem 2.5rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.125rem;
  border: 2px solid rgba(255,255,255,0.3);
  transition: background 0.2s;
  display: inline-block;
}
.gs-cta-btn-outline:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.gs-cta-blur1 {
  position: absolute;
  top: 0; left: 0;
  width: 256px; height: 256px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  filter: blur(64px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.gs-cta-blur2 {
  position: absolute;
  bottom: 0; right: 0;
  width: 384px; height: 384px;
  background: rgba(30,58,138,0.2);
  border-radius: 50%;
  filter: blur(64px);
  transform: translate(33%, 33%);
  pointer-events: none;
}

/* --- Utility: Button Group Gap --- */
.gs-btn-group {
  gap: 1rem;
}

/* --- Content Wrapper (mimics Figma bg) --- */
.gs-page-content {
  background: var(--color-bg-light);
  font-family: 'Inter', sans-serif;
  color: var(--color-text-dark);
}

/* --- Responsive --- */
@media (min-width: 768px) {
  .gs-hero h1 {
    font-size: 3rem;
  }
  .gs-section-title {
    font-size: 2.25rem;
  }
  .gs-cta-box {
    padding: 3rem 4rem;
  }
  .gs-cta-box h2 {
    font-size: 3rem;
  }
  .gs-cta-box .cta-desc {
    font-size: 1.25rem;
  }
  .gs-template-card .template-img-wrap {
    padding-bottom: 125%; /* 4:5 on md+ */
  }
}
@media (min-width: 992px) {
  .gs-hero h1 {
    font-size: 3.75rem;
  }
}

/* --- Aspect ratio helper for the testimonial image --- */
.aspect-video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
.aspect-video-wrap img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.aspect-video-wrap .img-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}
.aspect-video-wrap .img-caption {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  color: #fff;
}

/* --- Utility gap helpers (BS4 doesn't have gap) --- */
.flex-gap-4 > * + * { margin-left: 1rem; }
.flex-gap-3 > * + * { margin-left: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* --- Steps connector line (optional, not critical) --- */
@media (min-width: 768px) {
  .gs-steps .row > [class*="col"]:not(:last-child) .gs-step-card::after {
    content: '';
    position: absolute;
    top: 24px;
    right: -1rem;
    width: 2rem;
    height: 2px;
    background: #e5e7eb;
    z-index: 0;
  }
}

/* ========================================
   AIJZ Page - COMSKY AI 智能建站页面样式
   ======================================== */

/* --- AI Hero Section --- */
.aijz-hero {
  padding-top: 80px;
  padding-bottom: 80px;
  background: var(--color-bg-light);
  position: relative;
  overflow: hidden;
}
.aijz-hero-blur {
  position: absolute;
  top: 0;
  right: 0;
  width: 800px;
  height: 800px;
  background: linear-gradient(to bottom left, rgba(243,232,255,0.5), rgba(219,234,254,0.3));
  border-radius: 50%;
  filter: blur(64px);
  transform: translateX(33%) translateY(-25%);
  z-index: 0;
  pointer-events: none;
}
.aijz-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid #dbeafe;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
.aijz-badge .brand-name { color: var(--color-primary); }
.aijz-badge .ai-name {
  background: linear-gradient(to right, #9333ea, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.aijz-hero h1 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 1.5rem;
  line-height: 1.1;
}
.aijz-hero h1 .text-primary { color: var(--color-primary) !important; }
.aijz-hero .hero-desc {
  color: var(--color-text-body);
  font-size: 1.125rem;
  line-height: 1.625;
  margin-bottom: 2rem;
  max-width: 540px;
}
.aijz-btn-gradient {
  background: linear-gradient(to right, var(--color-primary), #6366f1);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-weight: 700;
  border: none;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.aijz-btn-gradient:hover {
  box-shadow: 0 10px 15px -3px rgba(99,102,241,0.25);
  color: #fff;
}
.aijz-btn-outline {
  background: #fff;
  color: var(--color-text-dark);
  padding: 1rem 2rem;
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid #e5e7eb;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.aijz-btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.aijz-check-list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.875rem;
  color: #6b7280;
  flex-wrap: wrap;
}
.aijz-check-list .item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.aijz-check-list svg { color: var(--color-green-500); }

/* Browser Mockup */
.aijz-browser-mockup {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
  border: 1px solid #dbeafe;
  overflow: hidden;
  transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
  transition: transform 0.7s;
}
.aijz-browser-mockup:hover {
  transform: perspective(1000px) rotateY(0) rotateX(0);
}
.aijz-browser-bar {
  background: #f9fafb;
  border-bottom: 1px solid #f3f4f6;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.aijz-browser-dots {
  display: flex;
  gap: 6px;
}
.aijz-browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.aijz-browser-dots .red { background: #f87171; }
.aijz-browser-dots .yellow { background: #fbbf24; }
.aijz-browser-dots .green { background: #4ade80; }
.aijz-browser-url {
  flex: 1;
  margin-left: 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  font-size: 10px;
  color: #9ca3af;
  font-family: monospace;
}
.aijz-browser-content {
  height: 400px;
  background: #f8fafc;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.aijz-browser-grid {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: linear-gradient(rgba(226,232,240,0.6) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(226,232,240,0.6) 1px, transparent 1px);
  background-size: 20px 20px;
}
.aijz-browser-skeleton {
  position: relative;
  z-index: 1;
  opacity: 0.6;
}
.aijz-skeleton-bar {
  height: 12px;
  border-bottom: 2px dashed #bfdbfe;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
}
.aijz-skeleton-bar .logo {
  width: 96px;
  height: 16px;
  background: #dbeafe;
  border-radius: 4px;
}
.aijz-skeleton-bar .nav-items {
  display: flex;
  gap: 1rem;
}
.aijz-skeleton-bar .nav-items span {
  width: 64px;
  height: 12px;
  background: #e5e7eb;
  border-radius: 4px;
}

/* --- Partners Bar (AI page) --- */
.aijz-partners {
  padding: 2rem 0;
  background: #fff;
  border-top: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
}
.aijz-partners .section-label {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: #9ca3af;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.aijz-partners-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  opacity: 0.5;
  filter: grayscale(1);
  transition: all 0.3s;
}
.aijz-partners-logos:hover {
  filter: grayscale(0);
  opacity: 1;
}
.aijz-partners-logos .logo-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}
.aijz-partners-logos .logo-item.blue { color: var(--color-primary); }
.aijz-partners-logos .logo-item.purple { color: #9333ea; }

/* --- AI Features Section --- */
.aijz-features {
  padding: 6rem 0;
  background: var(--color-bg-light);
}
.aijz-feature-card {
  background: #fff;
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  transition: all 0.3s;
  height: 100%;
}
.aijz-feature-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
  border-color: #f3e8ff;
}
.aijz-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: transform 0.3s;
}
.aijz-feature-card:hover .aijz-feature-icon {
  transform: scale(1.1);
}
.aijz-feature-icon.purple { background: rgba(147,51,234,0.1); color: #9333ea; }
.aijz-feature-icon.blue { background: rgba(37,99,235,0.1); color: #2563eb; }
.aijz-feature-icon.indigo { background: rgba(79,70,229,0.1); color: #4f46e5; }
.aijz-feature-icon.green { background: rgba(22,163,74,0.1); color: #16a34a; }
.aijz-feature-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}
.aijz-feature-card p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.625;
}

/* --- Dark Workflow Section --- */
.aijz-workflow {
  padding: 6rem 0;
  background: #1a1f36;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.aijz-workflow-pattern {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('https://www.transparenttextures.com/patterns/cubes.png');
  opacity: 0.05;
  pointer-events: none;
}
.aijz-workflow-blur {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: var(--color-primary);
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.2;
  pointer-events: none;
}
.aijz-workflow-badge {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 0.5rem;
}
.aijz-workflow h2 {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.25;
}
.aijz-workflow .desc {
  color: #9ca3af;
  font-size: 1.125rem;
  margin-bottom: 2rem;
  max-width: 448px;
}
.aijz-step-item {
  display: flex;
  gap: 1rem;
}
.aijz-step-line {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.aijz-step-circle {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  background: #1a1f36;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  transition: all 0.3s;
}
.aijz-step-item:hover .aijz-step-circle {
  background: var(--color-primary);
  color: #fff;
}
.aijz-step-connector {
  width: 2px;
  flex: 1;
  background: #374151;
  margin: 0.5rem 0;
  transition: background 0.3s;
}
.aijz-step-item:hover .aijz-step-connector {
  background: rgba(21,93,252,0.5);
}
.aijz-step-content {
  padding-bottom: 2rem;
}
.aijz-step-content h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.aijz-step-content h4 svg {
  color: #6b7280;
  transition: color 0.3s;
}
.aijz-step-item:hover .aijz-step-content h4 svg {
  color: var(--color-primary);
}
.aijz-step-content p {
  color: #9ca3af;
  font-size: 0.875rem;
  line-height: 1.625;
}

/* Terminal Animation */
.aijz-terminal {
  background: #111827;
  border: 1px solid #374151;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3);
}
.aijz-terminal-bar {
  height: 32px;
  background: #1f2937;
  border-bottom: 1px solid #374151;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: 0.5rem;
}
.aijz-terminal-bar .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.aijz-terminal-bar .dot.red { background: #ef4444; }
.aijz-terminal-bar .dot.yellow { background: #eab308; }
.aijz-terminal-bar .dot.green { background: #22c55e; }
.aijz-terminal-bar .url {
  margin-left: 1rem;
  width: 256px;
  height: 16px;
  background: #111827;
  border-radius: 9999px;
  font-size: 10px;
  color: #6b7280;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
}
.aijz-terminal-content {
  padding: 2rem;
  min-height: 280px;
  background: linear-gradient(to bottom right, #111827, #1f2937);
  display: flex;
  align-items: center;
  justify-content: center;
}
.aijz-terminal-loading {
  text-align: center;
}
.aijz-terminal-loading svg {
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.aijz-terminal-loading h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}
.aijz-terminal-loading .progress-bar {
  width: 256px;
  height: 8px;
  background: #374151;
  border-radius: 9999px;
  margin: 0 auto;
  overflow: hidden;
}
.aijz-terminal-loading .progress-bar .fill {
  height: 100%;
  width: 66%;
  background: var(--color-primary);
  animation: pulse 2s ease-in-out infinite;
}
.aijz-terminal-loading .logs {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: #6b7280;
  font-family: monospace;
  line-height: 1.75;
}

/* --- Case Studies Section --- */
.aijz-cases {
  padding: 6rem 0;
  background: #fff;
}
.aijz-case-card {
  cursor: pointer;
}
.aijz-case-card .img-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  padding-bottom: 125%; /* 4:5 aspect ratio */
}
.aijz-case-card .img-wrap img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.aijz-case-card:hover .img-wrap img {
  transform: scale(1.05);
}
.aijz-case-card .img-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1rem;
  padding-top: 3rem;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  text-align: left;
}
.aijz-case-card .img-caption .tag {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}
.aijz-case-card .img-caption .tag.blue { background: rgba(30,58,138,0.5); color: #93c5fd; }
.aijz-case-card .img-caption .tag.green { background: rgba(20,83,45,0.5); color: #86efac; }
.aijz-case-card .img-caption .tag.purple { background: rgba(88,28,135,0.5); color: #d8b4fe; }
.aijz-case-card .img-caption h3 {
  font-weight: 700;
  color: #fff;
}

/* --- FAQ Section (AI page) --- */
.aijz-faq {
  padding: 6rem 0;
  background: var(--color-bg-light);
}
.aijz-faq-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: border-color 0.3s;
  height: 100%;
}
.aijz-faq-card:hover {
  border-color: #dbeafe;
}
.aijz-faq-card h3 {
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
  display: flex;
  gap: 0.5rem;
}
.aijz-faq-card h3 .q { color: var(--color-primary); }
.aijz-faq-card p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.625;
  padding-left: 1.5rem;
}

/* --- Responsive for AIJZ --- */
@media (min-width: 768px) {
  .aijz-hero h1 {
    font-size: 3.75rem;
  }
  .aijz-workflow h2 {
    font-size: 3rem;
  }
}

/* Bounce animation for terminal bot icon */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes dash {
  to { stroke-dashoffset: 0; }
}

/* --- Hero Browser Advanced Animation --- */
.aijz-browser-content {
  height: 400px;
  background: #f8fafc;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

.aijz-center-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.aijz-center-logo .logo-circle {
  width: 100px;
  height: 100px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 40px rgba(21,93,252,0.15), 0 0 0 8px rgba(21,93,252,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: float 3s ease-in-out infinite;
}
.aijz-center-logo .logo-circle svg {
  width: 48px;
  height: 48px;
}
.aijz-center-logo .orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border: 2px dashed #c7d2fe;
  border-radius: 50%;
  animation: spin 20s linear infinite;
}

/* Floating Labels */
.aijz-float-label {
  position: absolute;
  background: #fff;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 5;
  animation: float 4s ease-in-out infinite;
}
.aijz-float-label.label-translate {
  top: 25%;
  right: 10%;
  color: #16a34a;
  animation-delay: 0.5s;
}
.aijz-float-label.label-translate svg { color: #16a34a; }
.aijz-float-label.label-grid {
  bottom: 20%;
  left: 8%;
  color: #155DFC;
  animation-delay: 1s;
}
.aijz-float-label.label-grid svg { color: #155DFC; }

/* Dashed Connection Lines */
.aijz-dashed-lines {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
}
.aijz-dashed-lines svg {
  width: 100%;
  height: 100%;
}
.aijz-dashed-lines .line {
  stroke: #c7d2fe;
  stroke-width: 2;
  stroke-dasharray: 8 4;
  fill: none;
}
.aijz-dashed-lines .line-green {
  stroke: #86efac;
}
.aijz-dashed-lines .line-purple {
  stroke: #c4b5fd;
}

/* ========================================
   MCN 红人营销页面 (mcn.css) 专属样式
   ======================================== */

/* --- MCN Hero Section --- */
.mcn-hero {
  position: relative;
  padding: 5rem 0;
  background: var(--color-bg-light);
  overflow: hidden;
}
.mcn-hero-blur-purple {
  position: absolute;
  top: 0; right: 0;
  width: 256px; height: 256px;
  background: rgba(192,132,252,0.3);
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}
.mcn-hero-blur-blue {
  position: absolute;
  bottom: 0; left: 0;
  width: 256px; height: 256px;
  background: rgba(147,197,253,0.3);
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}
.mcn-hero h1 {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-bottom: 1.5rem;
  line-height: 1.15;
}
.mcn-hero h1 .text-primary { color: var(--color-primary) !important; }
.mcn-hero .hero-desc {
  color: var(--color-text-body);
  font-size: 1.125rem;
  line-height: 1.625;
  margin-bottom: 2rem;
  max-width: 540px;
}
@media (min-width: 768px) {
  .mcn-hero h1 { font-size: 3rem; }
}
@media (min-width: 992px) {
  .mcn-hero h1 { font-size: 3.75rem; }
}

/* --- MCN Badge --- */
.mcn-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fdf2f8;
  color: #db2777;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

/* --- MCN Buttons --- */
.mcn-btn-primary {
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 2rem;
  border-radius: 12px;
  font-weight: 700;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 10px 25px -5px rgba(21,93,252,0.3);
  transition: all 0.2s;
  cursor: pointer;
}
.mcn-btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}
.mcn-btn-outline {
  background: #fff;
  color: var(--color-text-dark);
  padding: 0.75rem 2rem;
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid #e5e7eb;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
  cursor: pointer;
}
.mcn-btn-outline:hover {
  background: #f9fafb;
}

/* --- MCN Stats --- */
.mcn-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(229,231,235,0.6);
  margin-top: auto;
}
.mcn-stat-value {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}
.mcn-stat-label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* --- MCN Campaign Card (Hero Right) --- */
.mcn-campaign-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
  border: 1px solid #f3f4f6;
  padding: 1.5rem;
  position: relative;
  z-index: 10;
  transform: translateX(1rem);
}
.mcn-campaign-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.mcn-campaign-title {
  font-weight: 700;
  color: #111827;
}
.mcn-campaign-sub {
  font-size: 0.75rem;
  color: #6b7280;
}
.mcn-status-badge {
  background: #dcfce7;
  color: #15803d;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
}
.mcn-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.mcn-metric-box {
  background: #f9fafb;
  padding: 0.75rem;
  border-radius: 8px;
}
.mcn-metric-box .label {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.25rem;
}
.mcn-metric-box .value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-dark);
}
.mcn-performers-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}
.mcn-performer-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 8px;
  transition: background 0.2s;
}
.mcn-performer-item:hover { background: #f9fafb; }
.mcn-performer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.mcn-performer-avatar.orange { background: #fed7aa; }
.mcn-performer-avatar.blue { background: #bfdbfe; }
.mcn-performer-name { font-size: 0.875rem; font-weight: 700; color: #111827; }
.mcn-performer-platform { font-size: 0.75rem; color: #6b7280; }
.mcn-performer-views { font-size: 0.875rem; font-weight: 700; color: var(--color-primary); }

/* --- MCN Floating Cards --- */
.mcn-float-match {
  position: absolute;
  top: 50%;
  left: -32px;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  border: 1px solid #f3f4f6;
  padding: 1rem;
  width: 192px;
  z-index: 20;
}
.mcn-float-match .header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.mcn-float-match .ins-badge {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #ec4899;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
}
.mcn-float-match .title { font-size: 0.75rem; font-weight: 700; color: #111827; }
.mcn-float-match .subtitle { font-size: 0.625rem; color: #6b7280; }
.mcn-float-match .progress-bar {
  height: 6px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
}
.mcn-float-match .progress-bar .fill {
  height: 100%;
  background: #ec4899;
  border-radius: 4px;
}
.mcn-float-roi {
  position: absolute;
  bottom: -24px;
  right: 32px;
  background: var(--color-text-dark);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  padding: 1rem;
  z-index: 20;
}
.mcn-float-roi .header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.mcn-float-roi .label { font-size: 0.75rem; font-weight: 700; }
.mcn-float-roi .value { font-size: 1.5rem; font-weight: 700; }

/* --- MCN Platforms Section --- */
.mcn-platforms {
  padding: 3rem 0;
  background: #fff;
  border-bottom: 1px solid #f3f4f6;
}
.mcn-platforms .section-label {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
}
.mcn-platform-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  opacity: 0.7;
  filter: grayscale(1);
  transition: all 0.5s;
}
.mcn-platform-list:hover {
  opacity: 1;
  filter: grayscale(0);
}
.mcn-platform-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
}
.mcn-platform-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* --- MCN Pain Points Section --- */
.mcn-pain-points {
  padding: 5rem 0;
  background: #fff;
}
.mcn-pain-card {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid var(--color-border);
  text-align: center;
  transition: all 0.3s;
  height: 100%;
}
.mcn-pain-card:hover {
  border-color: #fecdd3;
  box-shadow: 0 10px 25px -5px rgba(244,63,94,0.1);
}
.mcn-pain-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}
.mcn-pain-icon.red { background: #fef2f2; color: #ef4444; }
.mcn-pain-icon.orange { background: #fff7ed; color: #f97316; }
.mcn-pain-icon.yellow { background: #fefce8; color: #eab308; }
.mcn-pain-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}
.mcn-pain-card p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* --- MCN Services Section --- */
.mcn-services {
  padding: 6rem 0;
  background: var(--color-bg-light);
}
.mcn-service-tabs {
  display: inline-flex;
  background: #fff;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mcn-tab-btn {
  padding: 0.625rem 1.5rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}
.mcn-tab-btn:hover { background: #f9fafb; color: #111827; }
.mcn-tab-btn.active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 6px -1px rgba(21,93,252,0.2);
}
.mcn-service-box {
  background: #fff;
  border-radius: 24px;
  padding: 2rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.mcn-service-box h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 1.5rem;
}
.mcn-service-box p {
  color: var(--color-text-muted);
  line-height: 1.625;
  margin-bottom: 2rem;
}
.mcn-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.mcn-check-list li svg {
  color: #22c55e;
  flex-shrink: 0;
  margin-top: 2px;
}
.mcn-check-list li strong {
  color: var(--color-text-dark);
}
.mcn-check-list li p {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}
.mcn-preview-grid {
  background: #f9fafb;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}
.mcn-avatar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 320px;
}
.mcn-avatar-card {
  background: #fff;
  padding: 0.75rem;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  border: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mcn-avatar-placeholder {
  width: 48px;
  height: 48px;
  background: #e5e7eb;
  border-radius: 50%;
  margin-bottom: 0.5rem;
}
.mcn-avatar-card .name-bar {
  height: 12px;
  width: 80px;
  background: #f3f4f6;
  border-radius: 4px;
  margin-bottom: 0.25rem;
}
.mcn-avatar-card .tag-bar {
  height: 8px;
  width: 48px;
  background: #dbeafe;
  border-radius: 4px;
}

/* --- MCN Process Section --- */
.mcn-process {
  padding: 6rem 0;
  background: #fff;
}
.mcn-process-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid #f3f4f6;
  text-align: center;
  transition: all 0.3s;
  height: 100%;
  position: relative;
}
.mcn-process-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.mcn-process-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.mcn-process-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}
.mcn-process-card p {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
}
.mcn-process-arrow {
  position: absolute;
  top: 50%;
  right: -1rem;
  transform: translateY(-50%);
  color: #e5e7eb;
  display: none;
}
@media (min-width: 768px) {
  .mcn-process-arrow { display: block; }
}

/* --- MCN FAQ Section --- */
.mcn-faq {
  padding: 6rem 0;
  background: #fff;
  border-top: 1px solid #f3f4f6;
}
.mcn-faq-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  height: 100%;
  transition: all 0.3s;
}
.mcn-faq-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 4px 12px rgba(21,93,252,0.1);
}
.mcn-faq-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}
.mcn-faq-card p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* --- MCN CTA Section (Dark) --- */
.mcn-cta {
  padding: 5rem 0;
  background: var(--color-text-dark);
  text-align: center;
}
.mcn-cta h2 {
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}
.mcn-cta p {
  color: #9ca3af;
  font-size: 1rem;
  margin-bottom: 2rem;
}
.mcn-cta-btn {
  background: #fff;
  color: var(--color-text-dark);
  padding: 1rem 2rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
  cursor: pointer;
}
.mcn-cta-btn:hover {
  background: #f9fafb;
  transform: translateY(-2px);
}
@media (min-width: 768px) {
  .mcn-cta h2 { font-size: 2.25rem; }
}

/* --- MCN 补充样式（HTML类名匹配） --- */

/* Hero Badge */
.mcn-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fdf2f8;
  color: #db2777;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.mcn-hero-badge svg { width: 16px; height: 16px; }

/* Hero Description */
.mcn-hero-desc {
  color: var(--color-text-body);
  font-size: 1.125rem;
  line-height: 1.625;
  margin-bottom: 2rem;
  max-width: 540px;
}

/* Hero Actions */
.mcn-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
}

/* Hero Stats */
.mcn-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(229,231,235,0.6);
  margin-top: auto;
}
.mcn-stat-item {}
.mcn-stat-num {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}
.mcn-stat-label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Hero Visual */
.mcn-hero-visual {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mcn-blur-purple {
  position: absolute;
  top: 0; right: 0;
  width: 256px; height: 256px;
  background: rgba(192,132,252,0.3);
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}
.mcn-blur-blue {
  position: absolute;
  bottom: 0; left: 0;
  width: 256px; height: 256px;
  background: rgba(147,197,253,0.3);
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}

/* Campaign Card Meta */
.mcn-campaign-meta {
  font-size: 0.75rem;
  color: #6b7280;
}

/* Status Active */
.mcn-status-active {
  background: #dcfce7;
  color: #15803d;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
}

/* Metric Box Labels */
.mcn-metric-label {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.25rem;
}
.mcn-metric-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-dark);
}

/* Performers */
.mcn-performers {
  margin-top: 1rem;
}
.mcn-performers-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}
.mcn-performer-info {
  flex: 1;
}
.mcn-performer-role {
  font-size: 0.75rem;
  color: #6b7280;
}
.mcn-performer-avatar.bg-orange { background: #fed7aa; }
.mcn-performer-avatar.bg-blue { background: #bfdbfe; }

/* Floating Cards */
.mcn-float-card {
  position: absolute;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15);
  border: 1px solid #f3f4f6;
  padding: 1rem;
  z-index: 20;
}
.mcn-float-left {
  top: 50%;
  left: -2rem;
  transform: translateY(-50%);
  width: 192px;
  animation: float 3s ease-in-out infinite;
}
.mcn-float-right {
  bottom: -1.5rem;
  right: 2rem;
}
.mcn-float-dark {
  background: var(--color-text-dark);
  color: #fff;
}
.mcn-float-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.mcn-float-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: #fff;
}
.mcn-float-icon.bg-pink { background: #ec4899; }
.mcn-float-title { font-size: 0.75rem; font-weight: 700; color: #111827; }
.mcn-float-sub { font-size: 0.625rem; color: #6b7280; }
.mcn-progress-bar {
  height: 6px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
}
.mcn-progress-fill {
  height: 100%;
  background: #ec4899;
  border-radius: 4px;
}
.mcn-roi-label { font-size: 0.75rem; font-weight: 700; }
.mcn-roi-value { font-size: 1.5rem; font-weight: 700; }

@keyframes float {
  0%, 100% { transform: translateY(-50%); }
  50% { transform: translateY(calc(-50% - 10px)); }
}

/* Platforms */
.mcn-platforms-title {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
}
.mcn-platforms-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  opacity: 0.7;
  filter: grayscale(1);
  transition: all 0.5s;
}
.mcn-platforms-list:hover {
  opacity: 1;
  filter: grayscale(0);
}
.mcn-platform-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Section Titles */
.mcn-section-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 1rem;
}
.mcn-section-desc {
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto;
}

/* Pain Points */
.mcn-pain-icon.bg-red { background: #fef2f2; color: #ef4444; }
.mcn-pain-icon.bg-orange { background: #fff7ed; color: #f97316; }
.mcn-pain-icon.bg-blue { background: #eff6ff; color: var(--color-primary); }
.mcn-pain-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}
.mcn-pain-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Tabs */
.mcn-tab-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}
.mcn-tabs {
  display: inline-flex;
  background: #fff;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mcn-tab {
  padding: 0.625rem 1.5rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}
.mcn-tab:hover { background: #f9fafb; color: #111827; }
.mcn-tab.active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 6px -1px rgba(21,93,252,0.2);
}

/* Tab Panel 显示/隐藏 */
.mcn-tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mcn-tab-panel.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Service Content */
.mcn-service-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 1.5rem;
}
.mcn-service-desc {
  color: var(--color-text-muted);
  line-height: 1.625;
  margin-bottom: 2rem;
}
.mcn-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mcn-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.mcn-feature-list li svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.mcn-feature-list li strong {
  display: block;
  color: var(--color-text-dark);
  margin-bottom: 0.25rem;
}
.mcn-feature-list li p {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

/* Service Visual */
.mcn-service-visual {
  background: #f9fafb;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid #f3f4f6;
}
.mcn-profile-card {
  background: #fff;
  padding: 0.75rem;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  border: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mcn-profile-avatar {
  width: 48px;
  height: 48px;
  background: #e5e7eb;
  border-radius: 50%;
  margin-bottom: 0.5rem;
}
.mcn-profile-name {
  height: 12px;
  width: 80px;
  background: #f3f4f6;
  border-radius: 4px;
  margin-bottom: 0.25rem;
}
.mcn-profile-tag {
  height: 8px;
  width: 48px;
  background: #dbeafe;
  border-radius: 4px;
}

/* Process Steps */
.mcn-step-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid #f3f4f6;
  text-align: center;
  transition: all 0.3s;
  height: 100%;
  position: relative;
}
.mcn-step-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.mcn-step-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(21,93,252,0.2);
  transition: transform 0.3s;
}
.mcn-step-card:hover .mcn-step-icon {
  transform: scale(1.1);
}
.mcn-step-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}
.mcn-step-desc {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
}
.mcn-step-arrow {
  position: absolute;
  top: 50%;
  right: -1rem;
  transform: translateY(-50%);
  color: #e5e7eb;
}

/* FAQ List */
.mcn-faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mcn-faq-item {
  background: #f9fafb;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid transparent;
  transition: all 0.3s;
}
.mcn-faq-item:hover {
  background: #fff;
  border-color: #f3f4f6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.mcn-faq-q {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
}
.mcn-faq-a {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

/* CTA Inner */
.mcn-cta-inner {
  max-width: 640px;
  margin: 0 auto;
}
.mcn-cta-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .mcn-cta-title { font-size: 2.25rem; }
}
.mcn-cta-desc {
  color: #9ca3af;
  font-size: 1.125rem;
  line-height: 1.625;
  margin-bottom: 2.5rem;
  max-width: 512px;
  margin-left: auto;
  margin-right: auto;
}

/* Button Outline for MCN */
.mcn-btn-outline {
  background: #fff;
  color: var(--color-text-dark);
  padding: 0.75rem 2rem;
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid #e5e7eb;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none;
}
.mcn-btn-outline:hover {
  background: #f9fafb;
  text-decoration: none;
  color: var(--color-text-dark);
}

/* ============================================================
   SEO/SEM/GEO Page Styles (seogeo-*)
   ============================================================ */

/* Page Content Container */
.seo-page-content {
  min-height: 100vh;
  background: #fff;
}
.seo-page-content .container {
  max-width: 1280px;
}

/* --- Hero Section --- */
.seo-hero {
  background: var(--color-bg-light);
  padding: 5rem 0;
  overflow: hidden;
  position: relative;
}

/* Search Tab (顶部搜索框样式) - 已废弃，使用 seo-hero-badge 代替 */
@media (min-width: 992px) {
  .seo-hero {
    padding: 6rem 0;
  }
}
.seo-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(21, 93, 252, 0.06);
  color: var(--color-primary);
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(21, 93, 252, 0.15);
}
.seo-hero-badge svg {
  flex-shrink: 0;
}
.seo-hero h1 {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-bottom: 1.5rem;
  line-height: 1.15;
}
@media (min-width: 768px) {
  .seo-hero h1 {
    font-size: 3rem;
  }
}
@media (min-width: 992px) {
  .seo-hero h1 {
    font-size: 3.5rem;
  }
}
.seo-hero h1 .text-primary {
  color: var(--color-primary);
}
.seo-hero-desc {
  font-size: 1.125rem;
  color: var(--color-text-body);
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 520px;
}
.seo-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
}
.seo-btn-outline {
  background: #fff;
  color: var(--color-text-dark);
  padding: 0.875rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s;
  cursor: pointer;
}
.seo-btn-outline svg {
  flex-shrink: 0;
}
.seo-btn-outline:hover {
  background: #f9fafb;
  text-decoration: none;
  color: var(--color-text-dark);
}

/* Hero Stats */
.seo-hero-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.seo-stat-item {
  text-align: left;
}
.seo-stat-num {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-text-dark);
}
.seo-stat-label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* ===== Hero Dashboard Area ===== */
.seo-dashboard-wrap {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
}

/* 装饰模糊背景 */
.seo-blur-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  pointer-events: none;
}
.seo-blur-tr {
  width: 128px;
  height: 128px;
  background: rgba(21, 93, 252, 0.1);
  top: -16px;
  right: -16px;
}
.seo-blur-bl {
  width: 160px;
  height: 160px;
  background: rgba(147, 197, 253, 0.2);
  bottom: -16px;
  left: -16px;
}

/* 主卡片外层 */
.seo-dashboard-card {
  background: linear-gradient(to bottom right, #eff6ff, rgba(219, 234, 254, 0.5));
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid rgba(21, 93, 252, 0.2);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 内层白色卡片 */
.seo-dashboard-card > .seo-dash-header,
.seo-dashboard-card > .seo-dash-tabs,
.seo-dashboard-card > .seo-dash-body,
.seo-dashboard-card > .seo-dash-footer {
  background: #fff;
}
.seo-dashboard-card > .seo-dash-header {
  border-radius: 12px 12px 0 0;
}
.seo-dashboard-card > .seo-dash-footer {
  border-radius: 0 0 12px 12px;
}

/* 头部 */
.seo-dash-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px 12px 0 0;
}
.seo-dash-icon {
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 16px rgba(21, 93, 252, 0.2);
}
.seo-dash-title {
  font-weight: 700;
  color: var(--color-text-dark);
  font-size: 1rem;
}
.seo-dash-subtitle {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Tab 导航 */
.seo-dash-tabs {
  display: flex;
  gap: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: #fafbfc;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.875rem;
  font-weight: 500;
}
.seo-dash-tab {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.2s;
}
.seo-dash-tab:hover,
.seo-dash-tab.active {
  color: var(--color-primary);
}

/* 内容区 */
.seo-dash-body {
  padding: 1.5rem;
  background: #fff;
}

/* 3个指标卡片 */
.seo-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.seo-metric-card {
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid;
}
.seo-metric-card.blue {
  background: rgba(219, 234, 254, 0.5);
  border-color: rgba(191, 219, 254, 1);
}
.seo-metric-card.green {
  background: rgba(220, 252, 231, 0.5);
  border-color: rgba(187, 247, 208, 1);
}
.seo-metric-card.purple {
  background: rgba(243, 232, 255, 0.5);
  border-color: rgba(233, 213, 255, 1);
}
.seo-metric-label {
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.seo-metric-card.blue .seo-metric-label { color: #2563eb; }
.seo-metric-card.green .seo-metric-label { color: #16a34a; }
.seo-metric-card.purple .seo-metric-label { color: #9333ea; }
.seo-metric-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-dark);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.seo-metric-value .text-success {
  color: #22c55e;
}

/* 流量趋势图 */
.seo-chart-area {
  background: #f9fafb;
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid #f3f4f6;
  position: relative;
  height: 128px;
}
.seo-chart-title {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #6b7280;
}
.seo-chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  height: 100%;
  padding: 0 0.5rem;
}
.seo-bar {
  flex: 1;
  background: rgba(21, 93, 252, 0.2);
  border-radius: 2px 2px 0 0;
  position: relative;
  transition: all 0.3s;
}
.seo-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: var(--color-primary);
  border-radius: 2px 2px 0 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.seo-bar:hover::after {
  opacity: 1;
}

/* 底部状态栏 */
.seo-dash-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: #f9fafb;
  border-top: 1px solid #f3f4f6;
  border-radius: 0 0 12px 12px;
  font-size: 0.625rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.seo-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.seo-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* --- Why Need SEM Section --- */
.seo-why-section {
  padding: 5rem 0;
  background: #fff;
}
.seo-pain-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2rem;
  height: 100%;
  transition: all 0.3s;
}
.seo-pain-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}
.seo-pain-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: transform 0.3s;
}
.seo-pain-card:hover .seo-pain-icon {
  transform: scale(1.1);
}
.seo-pain-icon.bg-red {
  background: #fef2f2;
  color: #ef4444;
}
.seo-pain-icon.bg-orange {
  background: #fff7ed;
  color: #f97316;
}
.seo-pain-icon.bg-blue {
  background: #eff6ff;
  color: var(--color-primary);
}
.seo-pain-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}
.seo-pain-card p {
  font-size: 0.9375rem;
  color: var(--color-text-body);
  line-height: 1.6;
  margin-bottom: 0;
}

/* --- Full-Chain Traffic Section --- */
.seo-fullchain {
  padding: 6rem 0;
  background: var(--color-bg-light);
}
.seo-tabs-wrap {
  display: inline-block;
  justify-content: center;
  margin-bottom: 3rem;
  background: #fff;
  padding: 0.25rem;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  flex-wrap: wrap;
  gap: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  width: auto;
}
.seo-fullchain .text-center {
  margin-bottom: 3rem;
}
.seo-tab-btn {
  padding: 0.625rem 1.5rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}
.seo-tab-btn:hover {
  background: #f9fafb;
  color: var(--color-text-dark);
}
.seo-tab-btn.active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(21, 93, 252, 0.3);
}
.seo-tab-content {
  background: #fff;
  border-radius: 24px;
  padding: 2rem;
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
@media (min-width: 768px) {
  .seo-tab-content {
    padding: 3rem;
  }
}
.seo-tab-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 1.5rem;
}
.seo-tab-desc {
  font-size: 1rem;
  color: var(--color-text-body);
  line-height: 1.7;
  margin-bottom: 2rem;
}
.seo-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.seo-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.seo-feature-list li svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: #22c55e;
}
.seo-feature-list li div {
  display: flex;
  flex-direction: column;
}
.seo-feature-list li strong {
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 0.25rem;
}
.seo-feature-list li span {
  font-size: 0.875rem;
  color: #6b7280;
}

/* SERP Demo Card */
.seo-serp-demo {
  background: #f9fafb;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}
.seo-serp-card {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  padding: 1rem;
  border: 1px solid var(--color-border);
}
.seo-serp-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.seo-google-logo {
  width: 32px;
  height: 32px;
  background: #eff6ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-primary);
}
.seo-serp-bar {
  height: 8px;
  width: 128px;
  background: #f3f4f6;
  border-radius: 4px;
}

/* Copy Button */
.seo-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 1rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-dark);
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 0.75rem;
}
.seo-copy-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
.seo-copy-btn svg {
  color: var(--color-text-muted);
}
.seo-serp-results {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.seo-serp-item {
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: #fff;
}
.seo-serp-item.highlight {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.seo-serp-label {
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.seo-serp-item.highlight .seo-serp-label {
  color: #1d4ed8;
}
.seo-serp-item:not(.highlight) .seo-serp-label {
  color: #9ca3af;
}
.seo-serp-title-bar {
  height: 8px;
  width: 75%;
  border-radius: 4px;
  margin-bottom: 0.25rem;
}
.seo-serp-item.highlight .seo-serp-title-bar {
  background: #bfdbfe;
}
.seo-serp-item:not(.highlight) .seo-serp-title-bar {
  background: #f3f4f6;
}
.seo-serp-desc-bar {
  height: 8px;
  width: 100%;
  border-radius: 4px;
}
.seo-serp-item.highlight .seo-serp-desc-bar {
  background: #dbeafe;
}
.seo-serp-item:not(.highlight) .seo-serp-desc-bar {
  background: #f9fafb;
}

/* --- Services Section --- */
.seo-services {
  padding: 5rem 0;
  background: #fff;
}
.seo-section-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}
.seo-section-desc {
  font-size: 1rem;
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
}
.seo-service-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2rem;
  height: 100%;
  transition: all 0.3s;
}
.seo-service-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  border-color: transparent;
}
.seo-service-card.featured {
  background: linear-gradient(135deg, rgba(21, 93, 252, 0.03), rgba(34, 197, 94, 0.03));
  border-color: rgba(21, 93, 252, 0.15);
}
.seo-service-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: #fff;
}
.seo-service-icon.bg-blue { background: var(--color-primary); }
.seo-service-icon.bg-green { background: var(--color-green-500); }
.seo-service-icon.bg-purple { background: var(--color-purple-600); }
.seo-service-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}
.seo-service-card > p {
  font-size: 0.9375rem;
  color: var(--color-text-body);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.seo-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.seo-check-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-body);
  padding: 0.375rem 0;
}
.seo-check-list .check {
  color: var(--color-green-500);
  font-weight: 700;
}

/* --- Process Section --- */
.seo-process {
  padding: 5rem 0;
  background: #fff;
}
.seo-step-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  height: 100%;
  position: relative;
  transition: all 0.3s;
}
.seo-step-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.seo-step-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 8px 20px rgba(21, 93, 252, 0.2);
  transition: transform 0.3s;
}
.seo-step-card:hover .seo-step-icon {
  transform: scale(1.1);
}
.seo-step-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
}
.seo-step-card > p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 0;
}
.seo-step-arrow {
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  color: #d1d5db;
}

/* --- FAQ Section --- */
.seo-faq {
  padding: 5rem 0;
  background: #fff;
  border-top: 1px solid var(--color-border);
}
.seo-faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.seo-faq-item {
  background: #f9fafb;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid transparent;
  transition: all 0.3s;
}
.seo-faq-item:hover {
  background: #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
  border-color: var(--color-border);
}
.seo-faq-q {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
}
.seo-faq-a {
  font-size: 0.9375rem;
  color: var(--color-text-body);
  line-height: 1.6;
  margin-bottom: 0;
}

/* --- CTA Section --- */
.seo-cta {
  background: var(--color-text-dark);
  padding: 5rem 0;
}
.seo-cta-inner {
  max-width: 640px;
  margin: 0 auto;
}
.seo-cta-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}
.seo-cta-desc {
  font-size: 1.125rem;
  color: #9ca3af;
  margin-bottom: 2.5rem;
}
.seo-cta-btn {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 1rem 2.5rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.125rem;
  transition: all 0.2s;
  box-shadow: 0 8px 25px rgba(21, 93, 252, 0.4);
}
.seo-cta-btn:hover {
  background: var(--color-primary-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

/* --- Tab Panel Visibility --- */
.seo-tab-panel {
  display: none;
}
.seo-tab-panel.active {
  display: block;
  animation: seoFadeIn 0.3s ease-out;
}
@keyframes seoFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Hero Stats Primary Color --- */
.seo-stat-num.text-primary {
  color: var(--color-primary) !important;
}

/* --- SEM Ads Card (Tab 2) --- */
.seo-ads-card {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  padding: 1.5rem;
  border: 1px solid var(--color-border);
}
.seo-ads-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}
.seo-ads-header span {
  font-weight: 700;
  color: var(--color-text-dark);
}
.seo-ads-metrics {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.seo-ads-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #f9fafb;
  border-radius: 8px;
}
.seo-ads-metric-value {
  font-size: 1.25rem;
  font-weight: 700;
}
.seo-ads-metric-value.text-primary { color: var(--color-primary); }
.seo-ads-metric-value.text-success { color: #22c55e; }
.seo-ads-metric-value.text-warning { color: #f59e0b; }
.seo-ads-metric-label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* --- GEO AI Card (Tab 3) --- */
.seo-ai-card {
  width: 100%;
  max-width: 360px;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid rgba(139, 92, 246, 0.2);
}
.seo-ai-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.seo-ai-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.seo-ai-header span {
  font-weight: 600;
  color: #6d28d9;
  font-size: 0.875rem;
}
.seo-ai-content {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
}
.seo-ai-question {
  font-size: 0.875rem;
  color: #6b7280;
  font-style: italic;
  margin-bottom: 0.75rem;
}
.seo-ai-answer {
  font-size: 0.9375rem;
  color: var(--color-text-dark);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}
.seo-ai-highlight {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(124, 58, 237, 0.1));
  color: #7c3aed;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}
.seo-ai-source {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: #22c55e;
  font-weight: 500;
}

/* ================================================
   Brand Design Page (bd-*)
   ================================================ */

/* --- Page Content Wrapper --- */
.bd-page-content {
  padding-top: 64px;
}

/* --- Hero Section --- */
.bd-hero {
  padding: 6rem 0;
  background: #f9fafb;
  position: relative;
  overflow: hidden;
}
.bd-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(21, 93, 252, 0.08);
  color: var(--color-primary);
  padding: 0.5rem 1rem;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.bd-hero-title {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--color-text-dark);
  line-height: 1.15;
  margin-bottom: 1.5rem;
}
@media (min-width: 992px) {
  .bd-hero-title {
    font-size: 3.5rem;
  }
}
.bd-hero-desc {
  font-size: 1.125rem;
  color: var(--color-text-body);
  line-height: 1.7;
  max-width: 540px;
  margin-bottom: 2rem;
}
.bd-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
}
.bd-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  color: var(--color-text-dark);
  padding: 0.875rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9375rem;
  border: 1px solid #e5e7eb;
  transition: all 0.2s;
}
.bd-btn-outline:hover {
  background: #f9fafb;
  text-decoration: none;
  color: var(--color-text-dark);
}
.bd-hero-stats {
  display: flex;
  gap: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(229, 231, 235, 0.6);
}
.bd-stat-item {
  text-align: left;
}
.bd-stat-num {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}
.bd-stat-label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* --- Studio Preview (Hero Right) --- */
.bd-studio-wrap {
  position: relative;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.8), rgba(219, 234, 254, 0.6));
  border-radius: 16px;
  border: 1px solid rgba(21, 93, 252, 0.1);
}
.bd-blur-circle {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.5;
  pointer-events: none;
}
.bd-blur-tr {
  top: -50px;
  right: -50px;
  background: rgba(99, 102, 241, 0.3);
}
.bd-blur-bl {
  bottom: -50px;
  left: -50px;
  background: rgba(21, 93, 252, 0.3);
}
.bd-studio-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
  z-index: 10;
}
.bd-studio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.75rem 1rem;
}
.bd-window-dots {
  display: flex;
  gap: 0.5rem;
}
.bd-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.bd-dot.red { background: #f87171; }
.bd-dot.yellow { background: #fbbf24; }
.bd-dot.green { background: #4ade80; }
.bd-studio-title {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
}
.bd-dot-placeholder { width: 64px; }
.bd-studio-body {
  display: flex;
  height: 280px;
}
.bd-toolbar {
  width: 48px;
  background: rgba(249, 250, 251, 0.5);
  border-right: 1px solid #f3f4f6;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.bd-tool-btn {
  padding: 0.375rem;
  border-radius: 4px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s;
}
.bd-tool-btn.active {
  background: rgba(21, 93, 252, 0.1);
  color: var(--color-primary);
}
.bd-canvas {
  flex: 1;
  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
  background-size: 20px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.bd-logo-preview {
  position: relative;
  width: 100px;
  height: 100px;
  transform: rotate(12deg);
  transition: transform 0.5s;
}
.bd-logo-preview:hover {
  transform: rotate(0deg);
}
.bd-logo-circle {
  width: 100%;
  height: 100%;
  background: var(--color-primary);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(21, 93, 252, 0.3);
}
.bd-logo-inner {
  width: 50%;
  height: 50%;
  border: 4px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-logo-inner::before {
  content: '';
  width: 50%;
  height: 50%;
  background: #fff;
  border-radius: 2px;
  transform: rotate(45deg);
}
.bd-logo-border {
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border: 2px dashed var(--color-primary);
  border-radius: 24px;
  opacity: 0.5;
}
.bd-selected-tag {
  position: absolute;
  top: -12px;
  right: -12px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.625rem;
  padding: 0.25rem 0.5rem;
  border-radius: 100px;
}
.bd-props-panel {
  width: 160px;
  border-left: 1px solid #f3f4f6;
  background: rgba(249, 250, 251, 0.3);
  padding: 1rem;
}
.bd-prop-group {
  margin-bottom: 1rem;
}
.bd-prop-label {
  font-size: 0.625rem;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.bd-prop-color {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 0.375rem 0.5rem;
  border-radius: 8px;
}
.bd-color-swatch {
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 4px;
  border: 1px solid #e5e7eb;
}
.bd-color-hex {
  font-size: 0.75rem;
  font-family: monospace;
  color: #6b7280;
}
.bd-layers {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.bd-layer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  padding: 0.5rem;
  border-radius: 4px;
  color: #6b7280;
  cursor: pointer;
}
.bd-layer.active {
  background: rgba(21, 93, 252, 0.08);
  color: var(--color-primary);
}

/* Floating Cards */
.bd-float-card {
  position: absolute;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
  z-index: 20;
  animation: bd-float 3s ease-in-out infinite;
}
@keyframes bd-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.bd-float-colors {
  top: -16px;
  right: 40px;
  padding: 0.75rem;
  display: flex;
  gap: 0.5rem;
}
.bd-color-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.bd-color-dot.c1 { background: var(--color-primary); }
.bd-color-dot.c2 { background: #0ea5e9; }
.bd-color-dot.c3 { background: #6366f1; }
.bd-float-status {
  bottom: 40px;
  left: -16px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation-delay: 1s;
}
.bd-status-icon {
  width: 40px;
  height: 40px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #10b981;
}
.bd-status-label {
  font-size: 0.75rem;
  color: #6b7280;
}
.bd-status-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-dark);
}

/* --- Pain Points Section --- */
.bd-pain-section {
  padding: 5rem 0;
  background: #fff;
}
.bd-section-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}
.bd-section-desc {
  font-size: 1rem;
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
}
.bd-pain-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  padding: 2rem;
  height: 100%;
  transition: all 0.3s;
}
.bd-pain-card:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}
.bd-pain-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: transform 0.3s;
}
.bd-pain-card:hover .bd-pain-icon {
  transform: scale(1.1);
}
.bd-pain-icon.bg-red { background: #fef2f2; color: #ef4444; }
.bd-pain-icon.bg-purple { background: #faf5ff; color: #a855f7; }
.bd-pain-icon.bg-blue { background: #eff6ff; color: var(--color-primary); }
.bd-pain-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}
.bd-pain-card p {
  font-size: 0.9375rem;
  color: var(--color-text-body);
  line-height: 1.6;
  margin-bottom: 0;
}

/* --- Services Section (Tabs) --- */
.bd-services {
  padding: 6rem 0;
  background: #f9fafb;
}
.bd-tabs-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bd-tab-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid #f3f4f6;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s;
}
.bd-tab-btn:hover {
  border-color: #e5e7eb;
}
.bd-tab-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 8px 20px rgba(21, 93, 252, 0.3);
}
.bd-tab-icon {
  padding: 0.5rem;
  border-radius: 8px;
  background: #f3f4f6;
  color: #6b7280;
}
.bd-tab-btn.active .bd-tab-icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.bd-tab-text {
  display: flex;
  flex-direction: column;
}
.bd-tab-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-dark);
}
.bd-tab-btn.active .bd-tab-title {
  color: #fff;
}
.bd-tab-sub {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 0.25rem;
}
.bd-tab-btn.active .bd-tab-sub {
  color: rgba(191, 219, 254, 1);
}
.bd-tab-content {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  padding: 2rem;
  min-height: 400px;
}
.bd-tab-content-wrap {
  position: relative;
}
.bd-tab-panel {
  display: none;
}
.bd-tab-panel.active {
  display: block;
  animation: bdFadeIn 0.3s ease;
}
@keyframes bdFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.bd-tab-content-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 1rem;
}
.bd-tab-content-desc {
  font-size: 0.9375rem;
  color: var(--color-text-body);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.bd-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bd-feature-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
}
.bd-feature-list li svg {
  flex-shrink: 0;
  color: #22c55e;
}
.bd-feature-list li span {
  font-size: 0.9375rem;
  color: #4b5563;
}

/* Design Preview */
.bd-design-preview {
  background: #f9fafb;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-grid-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(21, 93, 252, 0.08) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(21, 93, 252, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.5;
}
.bd-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  position: relative;
  z-index: 2;
}
.bd-preview-sketch {
  aspect-ratio: 1;
  background: #fff;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}
.bd-sketch-circle {
  width: 48px;
  height: 48px;
  border: 1px solid #9ca3af;
  border-radius: 50%;
  margin-bottom: 0.5rem;
}
.bd-preview-sketch span,
.bd-preview-final span:last-child {
  font-size: 0.75rem;
  color: #9ca3af;
}
.bd-preview-final {
  aspect-ratio: 1;
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
  position: relative;
}
.bd-final-tag {
  position: absolute;
  top: 0;
  right: 0;
  background: #22c55e;
  color: #fff;
  font-size: 0.625rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0 8px 0 4px;
}
.bd-final-logo {
  width: 48px;
  height: 48px;
  background: var(--color-text-dark);
  border-radius: 16px 0 16px 0;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-final-dot {
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
}
.bd-preview-final span:last-child {
  font-weight: 700;
  color: var(--color-text-dark);
}
.bd-preview-rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.bd-ring {
  position: absolute;
  border: 1px solid rgba(21, 93, 252, 0.15);
  border-radius: 50%;
}
.bd-ring.r1 { width: 200px; height: 200px; }
.bd-ring.r2 { width: 140px; height: 140px; }

/* VI Demo */
.bd-vi-demo {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.bd-vi-card {
  width: 80px;
  height: 100px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  border-left: 4px solid var(--color-primary);
}
.bd-vi-envelope {
  width: 100px;
  height: 70px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  position: relative;
}
.bd-vi-envelope::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25px;
  background: var(--color-primary);
  border-radius: 4px 4px 0 0;
}
.bd-vi-folder {
  width: 90px;
  height: 110px;
  background: linear-gradient(135deg, #f9fafb, #e5e7eb);
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Package Demo */
.bd-package-demo {
  display: flex;
  gap: 2rem;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.bd-box {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--color-primary) 0%, #0d47c9 100%);
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(21, 93, 252, 0.3);
  transform: rotate(-5deg);
}
.bd-bottle {
  width: 40px;
  height: 100px;
  background: linear-gradient(180deg, #f9fafb 0%, #e5e7eb 100%);
  border-radius: 8px 8px 4px 4px;
  position: relative;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.bd-bottle::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 15px;
  background: var(--color-primary);
  border-radius: 4px 4px 0 0;
}

/* Promo Demo */
.bd-promo-demo {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.bd-poster {
  width: 100px;
  height: 140px;
  background: linear-gradient(135deg, #fff 0%, #f3f4f6 100%);
  border-radius: 4px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}
.bd-poster::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: var(--color-primary);
}
.bd-brochure {
  width: 120px;
  height: 80px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  display: flex;
}
.bd-brochure::before {
  content: '';
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, #f9fafb, #e5e7eb);
  border-radius: 4px 0 0 4px;
}

/* --- Process Section --- */
.bd-process {
  padding: 5rem 0;
  background: #fff;
}
.bd-step-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  height: 100%;
  position: relative;
  transition: all 0.3s;
}
.bd-step-card:hover {
  border-color: rgba(21, 93, 252, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.bd-step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(21, 93, 252, 0.08);
  color: var(--color-primary);
  font-size: 1.125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  transition: all 0.3s;
}
.bd-step-card:hover .bd-step-num {
  background: var(--color-primary);
  color: #fff;
}
.bd-step-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.25rem;
}
.bd-step-card p {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}
.bd-step-arrow {
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
  color: #e5e7eb;
  z-index: 2;
}

/* --- FAQ Section --- */
.bd-faq {
  padding: 5rem 0;
  background: #f9fafb;
}
.bd-faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.bd-faq-item {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid #f3f4f6;
  transition: all 0.3s;
}
.bd-faq-item:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}
.bd-faq-q {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
}
.bd-faq-a {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 0;
}

/* --- CTA Section --- */
.bd-cta {
  background: var(--color-text-dark);
  padding: 5rem 0;
}
.bd-cta-inner {
  max-width: 640px;
  margin: 0 auto;
}
.bd-cta-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.5rem;
}
.bd-cta-desc {
  font-size: 1.125rem;
  color: #9ca3af;
  margin-bottom: 2.5rem;
}
.bd-cta-btn {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 1rem 2.5rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.125rem;
  transition: all 0.2s;
  box-shadow: 0 8px 25px rgba(21, 93, 252, 0.4);
}
.bd-cta-btn:hover {
  background: #2563eb;
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

/* ========================================
   Social Media Page Styles (sm-*)
   海外社媒代运营页面样式
   ======================================== */

/* --- Hero Section --- */
.sm-hero-badge {
  background: rgba(21, 93, 252, 0.1);
  color: var(--color-primary);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 500;
}
.sm-hero-badge svg { flex-shrink: 0; }

.sm-hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-text-dark);
  line-height: 1.15;
}
@media (min-width: 768px) {
  .sm-hero-title { font-size: 3rem; }
}
@media (min-width: 992px) {
  .sm-hero-title { font-size: 3.5rem; }
}

.sm-hero-desc {
  color: var(--color-text-body);
  font-size: 1.125rem;
  line-height: 1.7;
  max-width: 560px;
}

.sm-btn-primary {
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(21, 93, 252, 0.3);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
}
.sm-btn-primary:hover {
  background: var(--color-primary-dark);
  color: #fff;
  transform: translateY(-2px);
}

.sm-btn-outline {
  background: #fff;
  color: var(--color-text-dark);
  padding: 0.75rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
}
.sm-btn-outline:hover {
  background: #f9fafb;
  color: var(--color-text-dark);
}

/* Stats */
.sm-stats { border-color: rgba(0,0,0,0.1) !important; }
.sm-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}
.sm-stat-label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Hero Visual Card */
.sm-hero-visual {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sm-hero-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.1);
  border: 1px solid #f3f4f6;
  width: 100%;
  max-width: 400px;
  overflow: hidden;
}
.sm-card-header {
  background: #f9fafb;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sm-platform-icons { display: flex; }
.sm-platform-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  margin-left: -8px;
}
.sm-platform-icon:first-child { margin-left: 0; }
.sm-platform-icon.fb { background: #dbeafe; color: #2563eb; }
.sm-platform-icon.ig { background: #fce7f3; color: #db2777; }
.sm-platform-icon.tt { background: #1f2937; color: #fff; }
.sm-card-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #374151;
}
.sm-window-dots {
  display: flex;
  gap: 6px;
}
.sm-window-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.sm-window-dots .dot.red { background: #f87171; }
.sm-window-dots .dot.yellow { background: #fbbf24; }
.sm-window-dots .dot.green { background: #4ade80; }

.sm-card-body { padding: 1.25rem; }

/* Schedule Item */
.sm-schedule-item {
  background: rgba(21, 93, 252, 0.05);
  border: 1px solid rgba(21, 93, 252, 0.1);
  border-radius: 8px;
  padding: 0.75rem;
  display: flex;
  gap: 0.75rem;
}
.sm-schedule-icon {
  width: 48px;
  height: 48px;
  background: rgba(21, 93, 252, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}
.sm-schedule-content { flex: 1; }
.sm-schedule-time {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}
.sm-schedule-bar {
  height: 8px;
  background: rgba(21, 93, 252, 0.2);
  border-radius: 4px;
  margin-bottom: 0.25rem;
}
.sm-schedule-bar.short { width: 50%; }

/* Chart Area */
.sm-chart-area {
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  padding: 0.75rem;
}
.sm-chart-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
}
.sm-chart-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: #22c55e;
  background: #f0fdf4;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.sm-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 96px;
}
.sm-bar {
  flex: 1;
  background: rgba(21, 93, 252, 0.1);
  border-radius: 2px 2px 0 0;
  transition: background 0.2s;
}
.sm-bar:hover { background: var(--color-primary); }

/* Interactions */
.sm-interactions { margin-top: 0.5rem; }
.sm-interaction-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.sm-interaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  transition: background 0.2s;
}
.sm-interaction-item:hover { background: #f9fafb; }
.sm-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  margin-right: 0.5rem;
}
.sm-user-avatar.purple { background: #f3e8ff; color: #9333ea; }
.sm-user-avatar.green { background: #dcfce7; color: #16a34a; }
.sm-user-action { color: #6b7280; }
.sm-time { color: #9ca3af; }

/* Floating Notification */
.sm-floating-notification {
  position: absolute;
  top: 80px;
  right: -24px;
  background: #fff;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  border: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: smFloat 3s ease-in-out infinite;
}
@keyframes smFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.sm-notif-icon {
  width: 40px;
  height: 40px;
  background: #fef2f2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ef4444;
  position: relative;
}
.sm-notif-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid #fff;
}
.sm-notif-label {
  font-size: 0.75rem;
  color: #6b7280;
}
.sm-notif-text {
  font-size: 0.875rem;
  font-weight: 700;
  color: #111827;
}

/* --- Platform Section --- */
.sm-platform-list {
  gap: 2rem;
  opacity: 0.7;
  filter: grayscale(1);
  transition: all 0.5s;
}
.sm-platform-list:hover {
  opacity: 1;
  filter: grayscale(0);
}
.sm-platform-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sm-platform-item span {
  font-weight: 700;
  color: #475569;
}
@media (min-width: 768px) {
  .sm-platform-list { gap: 4rem; }
}

/* --- Pain Points Section --- */
.sm-section-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  .sm-section-title { font-size: 2rem; }
}

.sm-pain-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  padding: 2rem;
  height: 100%;
  transition: all 0.3s;
}
.sm-pain-card:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}
.sm-pain-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: transform 0.3s;
}
.sm-pain-card:hover .sm-pain-icon { transform: scale(1.1); }
.sm-pain-icon.gray { background: #f3f4f6; color: #9ca3af; }
.sm-pain-icon.red { background: #fef2f2; color: #ef4444; }
.sm-pain-icon.orange { background: #fff7ed; color: #f97316; }
.sm-pain-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}
.sm-pain-desc {
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 0;
}

/* --- Services Tab Section --- */
.sm-tab-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sm-tab-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid #f3f4f6;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 200px;
}
.sm-tab-btn:hover {
  background: #f9fafb;
}
.sm-tab-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 4px 15px rgba(21, 93, 252, 0.3);
}
.sm-tab-icon {
  padding: 0.5rem;
  border-radius: 8px;
  background: #f3f4f6;
}
.sm-tab-btn.active .sm-tab-icon {
  background: rgba(255,255,255,0.2);
}
.sm-tab-title {
  font-size: 0.875rem;
  font-weight: 700;
}
.sm-tab-subtitle {
  font-size: 0.75rem;
  margin-top: 0.125rem;
  opacity: 0.7;
}
.sm-tab-btn.active .sm-tab-subtitle {
  color: rgba(255,255,255,0.8);
}

/* Tab Content */
.sm-tab-content-wrap {
  position: relative;
}
.sm-tab-panel {
  display: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  padding: 2rem;
  min-height: 400px;
}
.sm-tab-panel.active {
  display: block;
  animation: smFadeIn 0.3s ease;
}
@keyframes smFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.sm-panel-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 1rem;
}
.sm-panel-desc {
  color: #6b7280;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.sm-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sm-feature-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #374151;
  padding: 0.5rem 0;
}
.sm-feature-list li svg { flex-shrink: 0; }

/* Panel Previews */
.sm-panel-preview {
  background: #f9fafb;
  border-radius: 12px;
  padding: 1.5rem;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Content Preview */
.sm-content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  width: 100%;
  max-width: 280px;
}
.sm-content-card {
  background: #fff;
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid #f3f4f6;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
}
.sm-content-card.dashed {
  border-style: dashed;
  align-items: center;
  justify-content: center;
}
.sm-content-img {
  flex: 1;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sm-content-img.pink { background: #fce7f3; color: #f9a8d4; }
.sm-content-img.blue { background: #dbeafe; color: #93c5fd; }
.sm-content-img.purple { background: #f3e8ff; color: #c4b5fd; }
.sm-content-bar {
  height: 6px;
  background: #f3f4f6;
  border-radius: 3px;
  margin-bottom: 0.25rem;
}
.sm-content-bar.short { width: 66%; }
.sm-content-more {
  width: 32px;
  height: 32px;
  background: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}

/* Operation Preview */
.sm-calendar-preview {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  width: 100%;
  max-width: 300px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.sm-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.sm-calendar-month {
  font-weight: 700;
  color: var(--color-text-dark);
}
.sm-calendar-nav {
  display: flex;
  gap: 0.5rem;
  color: #9ca3af;
}
.sm-calendar-nav span {
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}
.sm-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}
.sm-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  border-radius: 8px;
  color: #6b7280;
}
.sm-day.scheduled {
  background: rgba(21, 93, 252, 0.1);
  color: var(--color-primary);
  font-weight: 600;
}
.sm-day.highlight {
  background: var(--color-primary);
  color: #fff;
}

/* Ads Preview */
.sm-ads-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 280px;
}
.sm-ads-stat {
  background: #fff;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sm-ads-label {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
}
.sm-ads-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-dark);
}
.sm-ads-change {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.sm-ads-change.up {
  background: #dcfce7;
  color: #16a34a;
}

/* Influencer Preview */
.sm-influencer-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 300px;
}
.sm-influencer-card {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.sm-influencer-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.25rem;
}
.sm-influencer-avatar.purple {
  background: linear-gradient(135deg, #8b5cf6, #d946ef);
}
.sm-influencer-info { flex: 1; }
.sm-influencer-name {
  font-weight: 700;
  color: var(--color-text-dark);
}
.sm-influencer-fans {
  font-size: 0.875rem;
  color: #6b7280;
}
.sm-influencer-badge {
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
}
.sm-influencer-badge.koc {
  background: #f97316;
}

/* --- Process Section --- */
.sm-process-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px) {
  .sm-process-steps {
    flex-direction: row;
    justify-content: space-between;
  }
}
.sm-step {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  flex: 1;
  position: relative;
  transition: all 0.2s;
}
.sm-step:hover {
  border-color: rgba(21, 93, 252, 0.2);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.sm-step-num {
  width: 40px;
  height: 40px;
  background: rgba(21, 93, 252, 0.1);
  color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  margin: 0 auto 1rem;
  transition: all 0.2s;
}
.sm-step:hover .sm-step-num {
  background: var(--color-primary);
  color: #fff;
}
.sm-step-title {
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.25rem;
}
.sm-step-desc {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0;
}
.sm-step-arrow {
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
  color: #e5e7eb;
}

/* --- FAQ Section --- */
.sm-faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sm-faq-item {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.2s;
}
.sm-faq-item:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.sm-faq-q {
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
}
.sm-faq-a {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 0;
}

/* --- CTA Section --- */
.sm-cta .sm-btn-primary {
  padding: 1rem 2.5rem;
  font-size: 1.125rem;
  box-shadow: 0 8px 25px rgba(21, 93, 252, 0.4);
}

/* ========================================
   App Store Page Styles (as-*)
   数字应用商城页面样式
   ======================================== */

/* --- Hero Section --- */
.as-hero-badge {
  background: rgba(21, 93, 252, 0.1);
  color: var(--color-primary);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 500;
  align-self: flex-start;
}
.as-hero-badge svg { flex-shrink: 0; }

.as-hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-text-dark);
  line-height: 1.15;
}
@media (min-width: 768px) {
  .as-hero-title { font-size: 3rem; }
}
@media (min-width: 992px) {
  .as-hero-title { font-size: 3.5rem; }
}

.as-hero-desc {
  color: var(--color-text-body);
  font-size: 1.125rem;
  line-height: 1.7;
  max-width: 560px;
}

.as-btn-primary {
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(21, 93, 252, 0.3);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
}
.as-btn-primary:hover {
  background: var(--color-primary-dark);
  color: #fff;
  transform: translateY(-2px);
}

.as-btn-outline {
  background: #fff;
  color: var(--color-text-dark);
  padding: 0.75rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
}
.as-btn-outline:hover {
  background: #f9fafb;
  color: var(--color-text-dark);
}

/* Stats */
.as-stats { border-color: rgba(0,0,0,0.1) !important; }
.as-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}
.as-stat-label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Hero Visual */
.as-hero-visual {
  background: linear-gradient(135deg, #eff6ff, rgba(219, 234, 254, 0.5));
  border: 1px solid rgba(21, 93, 252, 0.2);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.as-app-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
  width: 100%;
}
.as-app-card {
  background: #fff;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  animation: asFloat 3s ease-in-out infinite;
}
.as-app-card:nth-child(1) { animation-delay: 0s; }
.as-app-card:nth-child(2) { animation-delay: 0.3s; }
.as-app-card:nth-child(3) { animation-delay: 0.6s; }
.as-app-card:nth-child(4) { animation-delay: 0.9s; }
@keyframes asFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.as-app-card.blue { border-left: 4px solid #3b82f6; }
.as-app-card.green { border-left: 4px solid #22c55e; }
.as-app-card.orange { border-left: 4px solid #f97316; }
.as-app-card.purple { border-left: 4px solid #8b5cf6; }

.as-app-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
}
.as-app-icon.blue { background: #eff6ff; color: #3b82f6; }
.as-app-icon.green { background: #f0fdf4; color: #22c55e; }
.as-app-icon.orange { background: #fff7ed; color: #f97316; }
.as-app-icon.purple { background: #faf5ff; color: #8b5cf6; }

.as-app-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #374151;
}
.as-app-bars {
  margin-top: 0.5rem;
}
.as-app-bars div {
  height: 6px;
  background: #f3f4f6;
  border-radius: 3px;
  margin-bottom: 0.25rem;
}
.as-app-bars div.short { width: 66%; }

.as-data-core {
  background: linear-gradient(to right, #fff, #f9fafb);
  padding: 1.25rem 2rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border: 1px solid #e5e7eb;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-text-dark);
  display: flex;
  align-items: center;
}

/* --- Section Title --- */
.as-section-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  .as-section-title { font-size: 2rem; }
}

/* --- Value Section --- */
.as-value-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  padding: 2rem;
  height: 100%;
  transition: all 0.3s;
}
.as-value-card:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}
.as-value-icon {
  width: 56px;
  height: 56px;
  background: rgba(21, 93, 252, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}
.as-value-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}
.as-value-desc {
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 0;
}

/* --- Categories Section --- */
.as-cat-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  padding: 2rem;
  height: 100%;
  transition: all 0.2s;
}
.as-cat-card:hover {
  border-color: rgba(21, 93, 252, 0.2);
}
.as-cat-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.as-cat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.as-cat-icon.blue { background: #eff6ff; color: #3b82f6; }
.as-cat-icon.purple { background: #faf5ff; color: #8b5cf6; }
.as-cat-icon.green { background: #f0fdf4; color: #22c55e; }
.as-cat-icon.orange { background: #fff7ed; color: #f97316; }
.as-cat-icon.indigo { background: #eef2ff; color: #6366f1; }
.as-cat-icon.slate { background: #f8fafc; color: #475569; }

.as-cat-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin: 0;
}
.as-cat-desc {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 1rem;
  min-height: 40px;
}
.as-cat-bars {
  display: flex;
  gap: 0.5rem;
}
.as-cat-bars span {
  height: 8px;
  width: 48px;
  background: #f3f4f6;
  border-radius: 4px;
}

/* --- How To Section --- */
.as-steps {
  position: relative;
}
.as-step-item {
  display: flex;
  gap: 1.25rem;
  position: relative;
  padding-bottom: 2.5rem;
}
.as-step-item.last { padding-bottom: 0; }
.as-step-item.last .as-step-line { display: none; }

.as-step-line {
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: #f3f4f6;
}
.as-step-num {
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(21, 93, 252, 0.3);
  position: relative;
  z-index: 1;
}
.as-step-content { flex: 1; }
.as-step-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
}
.as-step-desc {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

/* Workspace Preview */
.as-workspace-preview {
  background: linear-gradient(135deg, #f9fafb, #eff6ff);
  border-radius: 24px;
  padding: 2rem;
  border: 1px solid rgba(21, 93, 252, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}
.as-workspace-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.12);
  border: 1px solid #f3f4f6;
  width: 100%;
  max-width: 360px;
  overflow: hidden;
}
.as-workspace-header {
  background: var(--color-text-dark);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.as-window-dots {
  display: flex;
  gap: 6px;
}
.as-window-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.as-window-dots span.red { background: #f87171; }
.as-window-dots span.yellow { background: #fbbf24; }
.as-workspace-title {
  font-size: 0.75rem;
  color: #9ca3af;
}
.as-workspace-body { padding: 1.5rem; }
.as-workspace-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.as-workspace-icon {
  width: 40px;
  height: 40px;
  background: rgba(21, 93, 252, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.as-workspace-label {
  font-weight: 700;
  color: #374151;
}

.as-apps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.as-mini-app {
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.2s;
}
.as-mini-app:hover { background: #f3f4f6; }
.as-mini-app span {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
}
.as-mini-app.add {
  grid-column: span 2;
  border: 2px dashed #e5e7eb;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
}
.as-mini-app.add:hover {
  border-color: rgba(21, 93, 252, 0.3);
  color: var(--color-primary);
}

.as-mini-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.as-mini-icon.purple { background: #f3e8ff; color: #9333ea; }
.as-mini-icon.green { background: #dcfce7; color: #22c55e; }
.as-mini-icon.orange { background: #ffedd5; color: #f97316; }
.as-mini-icon.blue { background: #dbeafe; color: #3b82f6; }

/* --- FAQ Section --- */
.as-faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.as-faq-item {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.2s;
}
.as-faq-item:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.as-faq-q {
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
}
.as-faq-a {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 0;
}

/* ========================================
   Takealot Entry Page Styles (ta-*)
   ======================================== */

/* Hero Section */
.ta-hero {
  padding-top: 80px;
  padding-bottom: 80px;
}
.ta-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #eff6ff;
  color: var(--color-primary);
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
}
.ta-hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-text-dark);
  line-height: 1.15;
}
@media (min-width: 768px) {
  .ta-hero-title { font-size: 3rem; }
}
.ta-hero-title .text-primary {
  color: var(--color-primary) !important;
}
.ta-hero-desc {
  color: var(--color-text-gray);
  font-size: 1.125rem;
  line-height: 1.625;
  max-width: 540px;
}
.ta-btn-primary {
  background: var(--color-primary);
  color: #fff !important;
  padding: 0.875rem 2rem;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(21, 93, 252, 0.3);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
}
.ta-btn-primary:hover {
  background: var(--color-primary-dark);
  color: #fff !important;
  text-decoration: none;
}
.ta-btn-outline {
  background: #fff;
  color: var(--color-text-dark);
  padding: 0.875rem 2rem;
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid #e5e7eb;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
}
.ta-btn-outline:hover {
  background: #f9fafb;
  color: var(--color-text-dark);
  text-decoration: none;
}

/* Stats */
.ta-stats {
  border-color: rgba(229, 231, 235, 0.6) !important;
}
.ta-stat-value {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}
.ta-stat-label {
  font-size: 0.875rem;
  color: var(--color-text-light);
  font-weight: 500;
}

/* Seller Portal Preview */
.ta-seller-portal {
  background: linear-gradient(135deg, #eff6ff, rgba(219, 234, 254, 0.5));
  border: 1px solid rgba(21, 93, 252, 0.2);
  border-radius: 24px;
  padding: 2rem;
  width: 100%;
  max-width: 520px;
  overflow: hidden;
}
.ta-portal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1.5rem;
}
.ta-portal-logo {
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(21, 93, 252, 0.2);
}
.ta-portal-name {
  font-weight: 700;
  color: var(--color-text-dark);
  font-size: 1rem;
}
.ta-portal-sub {
  font-size: 0.75rem;
  color: var(--color-text-light);
  font-weight: 500;
}
.ta-portal-stats {
  margin-bottom: 1.5rem;
}
.ta-portal-stat {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid #f3f4f6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.ta-portal-stat-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #9ca3af;
  margin-bottom: 0.25rem;
}
.ta-portal-stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-dark);
}
.ta-portal-stat-change {
  font-size: 0.625rem;
  font-weight: 700;
  margin-top: 0.25rem;
}
.ta-portal-stat-change.green { color: #22c55e; }
.ta-portal-stat-change.blue { color: var(--color-primary); }

/* Chart */
.ta-portal-chart {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid #f3f4f6;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
}
.ta-chart-bar {
  width: 100%;
  background: linear-gradient(to top, var(--color-primary), #3b82f6);
  border-radius: 3px 3px 0 0;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.ta-chart-bar:hover { opacity: 1; }

/* Portal Footer */
.ta-portal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid #e5e7eb;
  font-size: 0.625rem;
  text-transform: uppercase;
  font-weight: 600;
  color: #9ca3af;
}
.ta-portal-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ta-status-dot {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* Section Title */
.ta-section-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 1rem;
}

/* Why Cards */
.ta-why-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  padding: 2rem;
  height: 100%;
  transition: all 0.3s;
}
.ta-why-card:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}
.ta-why-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: transform 0.3s;
}
.ta-why-card:hover .ta-why-icon {
  transform: scale(1.1);
}
.ta-why-icon.blue { background: #eff6ff; color: var(--color-primary); }
.ta-why-icon.orange { background: #fff7ed; color: #f97316; }
.ta-why-icon.purple { background: #faf5ff; color: #9333ea; }
.ta-why-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}
.ta-why-desc {
  font-size: 0.875rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: 0;
}

/* Service Section */
.ta-service-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.ta-tab-btn {
  padding: 0.625rem 1.5rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  background: #fff;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #e5e7eb;
}
.ta-tab-btn:hover {
  background: #f9fafb;
  color: var(--color-text-dark);
}
.ta-tab-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(21, 93, 252, 0.25);
}
.ta-tab-panel {
  display: none;
}
.ta-tab-panel.active {
  display: block;
}
.ta-service-card {
  background: #fff;
  border-radius: 24px;
  padding: 2.5rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}
.ta-service-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 1rem;
}
.ta-service-desc {
  color: var(--color-text-light);
  line-height: 1.625;
  margin-bottom: 2rem;
}
.ta-service-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ta-service-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.ta-service-list li svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.ta-service-list li strong {
  display: block;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.25rem;
}
.ta-service-list li p {
  font-size: 0.875rem;
  color: #9ca3af;
  margin-bottom: 0;
}

/* Service Visual */
.ta-service-visual {
  background: #f9fafb;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

/* Application Card */
.ta-application-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  width: 100%;
  max-width: 340px;
  border: 1px solid #f3f4f6;
}
.ta-app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.ta-app-title {
  font-weight: 700;
  color: var(--color-text-dark);
}
.ta-app-check {
  width: 32px;
  height: 32px;
  background: #dcfce7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #22c55e;
}
.ta-app-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ta-app-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid #f3f4f6;
  background: #f9fafb;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
}
.ta-app-item.pending {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: var(--color-primary);
}
.ta-app-status {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
}
.ta-app-status.green {
  background: #dcfce7;
  color: #16a34a;
}
.ta-app-status.blue {
  background: #dbeafe;
  color: var(--color-primary);
}

/* Logistics Card */
.ta-logistics-card {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  width: 100%;
  max-width: 380px;
  border: 1px solid #f3f4f6;
}
.ta-logistics-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.ta-route-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.ta-route-icon {
  font-size: 2rem;
}
.ta-route-point span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-dark);
}
.ta-route-line {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  position: relative;
}
.ta-route-line::before {
  content: '';
  position: absolute;
  width: 80%;
  height: 2px;
  background: linear-gradient(to right, #bfdbfe, var(--color-primary), #bfdbfe);
  border-radius: 1px;
}
.ta-logistics-options {
  display: flex;
  gap: 0.75rem;
}
.ta-option {
  flex: 1;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  text-align: center;
  transition: all 0.2s;
}
.ta-option.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.ta-option-mode {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.25rem;
}
.ta-option.active .ta-option-mode { color: #fff; }
.ta-option-time {
  font-size: 0.75rem;
  color: #9ca3af;
}
.ta-option.active .ta-option-time { color: rgba(255,255,255,0.8); }

/* Operation Card */
.ta-operation-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  width: 100%;
  max-width: 380px;
  border: 1px solid #f3f4f6;
}
.ta-op-header {
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
}
.ta-op-metrics {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.ta-op-metric {
  flex: 1;
  text-align: center;
}
.ta-op-metric-label {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-bottom: 0.25rem;
}
.ta-op-metric-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #22c55e;
}
.ta-op-chart-area {
  height: 80px;
  background: linear-gradient(135deg, #eff6ff, #f0fdf4);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.ta-op-chart-line {
  position: absolute;
  bottom: 20%;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(to right, var(--color-primary), #22c55e);
}
.ta-op-chart-line::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 40px;
  bottom: 0;
  background: linear-gradient(to top, rgba(34, 197, 94, 0.1), transparent);
}

/* Process Steps */
.ta-step-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  height: 100%;
  position: relative;
  transition: all 0.3s;
}
.ta-step-card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.ta-step-num {
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin: 0 auto 1rem;
  box-shadow: 0 8px 20px rgba(21, 93, 252, 0.2);
  transition: transform 0.3s;
}
.ta-step-card:hover .ta-step-num {
  transform: scale(1.1);
}
.ta-step-num.green {
  background: #22c55e;
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.2);
}
.ta-step-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
}
.ta-step-desc {
  font-size: 0.875rem;
  color: #9ca3af;
  line-height: 1.5;
  margin-bottom: 0;
}
.ta-step-arrow {
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  color: #e5e7eb;
  z-index: 1;
}

/* FAQ */
.ta-faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ta-faq-item {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.2s;
}
.ta-faq-item:hover {
  border-color: #bfdbfe;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.ta-faq-q {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
  display: flex;
  gap: 0.75rem;
}
.ta-q-mark {
  color: var(--color-primary);
  font-style: italic;
  font-family: Georgia, serif;
}
.ta-faq-a {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 0;
  padding-left: 2rem;
}

/* ========================================
   Club Page Styles (cb-*)
   全球出海企业家俱乐部
   ======================================== */

/* Hero Section */
.cb-hero {
  background: #f9fafb;
  padding: 5rem 0;
  overflow: hidden;
  position: relative;
}
.cb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #eff6ff;
  color: var(--color-primary);
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.cb-hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-text-dark);
  line-height: 1.15;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .cb-hero-title { font-size: 3rem; }
}
@media (min-width: 992px) {
  .cb-hero-title { font-size: 3.5rem; }
}
.cb-hero-desc {
  font-size: 1.125rem;
  color: #4a5565;
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 560px;
}
.cb-hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
}
.cb-btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  border-radius: 12px;
  font-weight: 700;
  padding: 0.75rem 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 10px 25px -5px rgba(21,93,252,0.3);
}
.cb-btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
.cb-btn-outline {
  border-radius: 12px;
  font-weight: 700;
  padding: 0.75rem 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-color: #e5e7eb;
  color: var(--color-text-dark);
}
.cb-btn-outline:hover {
  background: #f9fafb;
  color: var(--color-text-dark);
}
.cb-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(229,231,235,0.6);
}
.cb-stat-value {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}
.cb-stat-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

/* Hero Visual */
.cb-hero-visual {
  background: linear-gradient(135deg, #eff6ff, rgba(219,234,254,0.5));
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid rgba(21,93,252,0.2);
  width: 100%;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.cb-blur {
  position: absolute;
  width: 16rem;
  height: 16rem;
  border-radius: 9999px;
  filter: blur(64px);
  pointer-events: none;
}
.cb-blur-1 {
  top: 0;
  right: 0;
  background: rgba(21,93,252,0.1);
}
.cb-blur-2 {
  bottom: 0;
  left: 0;
  background: #f3e8ff;
}

/* Member Card */
.cb-member-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1.586 / 1;
  background: linear-gradient(135deg, #1a1f36, #0f172a);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
  transition: transform 0.5s;
  z-index: 10;
}
.cb-member-card:hover {
  transform: scale(1.02);
}
.cb-card-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255,255,255,0.05), transparent);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  z-index: 20;
}
.cb-member-card:hover .cb-card-glow {
  opacity: 1;
}
.cb-card-blur {
  position: absolute;
  top: 0;
  right: 0;
  width: 16rem;
  height: 16rem;
  background: var(--color-primary);
  opacity: 0.2;
  border-radius: 9999px;
  filter: blur(80px);
  transform: translate(33%, -33%);
}
.cb-card-content {
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 10;
}
.cb-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.cb-card-brand h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 1.2;
  margin: 0;
}
.cb-brand-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #4d8eff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 0.25rem;
}
.cb-card-logo {
  color: rgba(255,255,255,0.1);
}
.cb-card-members {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}
.cb-members-avatars {
  display: flex;
}
.cb-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid #1a1f36;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-left: -0.75rem;
}
.cb-avatar:first-child {
  margin-left: 0;
}
.cb-members-count {
  font-size: 0.75rem;
  color: #9ca3af;
}
.cb-members-count span {
  color: #fff;
  font-weight: 700;
}
.cb-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.cb-tier-label,
.cb-id-label {
  font-size: 0.625rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
}
.cb-tier-value {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-weight: 500;
  font-size: 0.875rem;
}
.cb-tier-value svg {
  color: #ffd700;
}
.cb-id-value {
  color: #fff;
  font-family: monospace;
  font-size: 1.125rem;
  letter-spacing: 0.1em;
}
.cb-id {
  text-align: right;
}

/* Floating Badges */
.cb-float-badge {
  position: absolute;
  background: #fff;
  padding: 0.75rem;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
  border: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 20;
  animation: cb-bounce 3s ease-in-out infinite;
}
.cb-float-right {
  right: 2rem;
  top: 33%;
}
.cb-float-left {
  left: 2rem;
  bottom: 33%;
  animation-delay: 0.7s;
}
@keyframes cb-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.cb-float-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cb-float-icon.green {
  background: #dcfce7;
  color: #16a34a;
}
.cb-float-icon.blue {
  background: #dbeafe;
  color: var(--color-primary);
}
.cb-float-label {
  font-size: 0.75rem;
  color: #6b7280;
}
.cb-float-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-dark);
}

/* Section Titles */
.cb-section-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 1rem;
}
.cb-section-desc {
  font-size: 1rem;
  color: #6b7280;
  max-width: 640px;
  margin: 0 auto;
}

/* Why Join Section */
.cb-why {
  background: #fff;
  padding: 5rem 0;
}
.cb-why-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  padding: 2rem;
  height: 100%;
  transition: all 0.3s;
}
.cb-why-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
  transform: translateY(-4px);
}
.cb-why-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: transform 0.3s;
}
.cb-why-card:hover .cb-why-icon {
  transform: scale(1.1);
}
.cb-why-icon.yellow {
  background: #fef9c3;
  color: #eab308;
}
.cb-why-icon.blue {
  background: #dbeafe;
  color: var(--color-primary);
}
.cb-why-icon.purple {
  background: #f3e8ff;
  color: #9333ea;
}
.cb-why-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}
.cb-why-desc {
  font-size: 0.9375rem;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Benefits Section with Tabs */
.cb-benefits {
  background: #f9fafb;
  padding: 6rem 0;
}
.cb-tab-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}
.cb-tab-btns {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  background: #fff;
  padding: 0.25rem;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.cb-tab-btn {
  padding: 0.625rem 1.5rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}
.cb-tab-btn:hover {
  background: #f9fafb;
  color: var(--color-text-dark);
}
.cb-tab-btn.active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 6px -1px rgba(21,93,252,0.3);
}
.cb-tab-content {
  background: #fff;
  border-radius: 24px;
  padding: 2rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  min-height: 400px;
}
@media (min-width: 768px) {
  .cb-tab-content { padding: 3rem; }
}
.cb-tab-panel {
  display: none;
}
.cb-tab-panel.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

/* Benefit Cards */
.cb-benefit-card {
  background: #f9fafb;
  border-radius: 12px;
  padding: 1.5rem;
  height: 100%;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.cb-benefit-card:hover {
  background: #fff;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  border-color: #f3f4f6;
}
.cb-benefit-icon {
  width: 3rem;
  height: 3rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.cb-benefit-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
}
.cb-benefit-desc {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Process Section */
.cb-process {
  background: #fff;
  padding: 6rem 0;
}
.cb-process-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  height: 100%;
  position: relative;
  transition: all 0.2s;
}
.cb-process-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.cb-process-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 16px;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 10px 15px -3px rgba(21,93,252,0.2);
  transition: transform 0.3s;
}
.cb-process-card:hover .cb-process-icon {
  transform: scale(1.1);
}
.cb-process-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
}
.cb-process-desc {
  font-size: 0.8125rem;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 0;
}
.cb-process-arrow {
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  color: #e5e7eb;
  z-index: 1;
}

/* FAQ Section */
.cb-faq {
  background: #fff;
  padding: 6rem 0;
  border-top: 1px solid #f3f4f6;
}
.cb-faq-item {
  background: #f9fafb;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.cb-faq-item:hover {
  background: #fff;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  border-color: #f3f4f6;
}
.cb-faq-q {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
}
.cb-faq-a {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 0;
}

/* CTA Section */
.cb-cta {
  background: #1a1f36;
  padding: 5rem 0;
}
.cb-cta-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.5rem;
}
.cb-cta-desc {
  font-size: 1.125rem;
  color: #9ca3af;
  margin-bottom: 2.5rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.cb-cta-btn {
  background: var(--color-primary);
  border-color: var(--color-primary);
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.125rem;
  padding: 1rem 2.5rem;
  box-shadow: 0 20px 25px -5px rgba(30,64,175,0.5);
}
.cb-cta-btn:hover {
  background: #2563eb;
  border-color: #2563eb;
}

/* ========================================
   EOR / Globofiy 海外人才服务页面 (er-*)
   ======================================== */

/* Hero Section */
.er-hero {
  background: #f9fafb;
  padding: 5rem 0;
  overflow: hidden;
}
.er-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #eff6ff;
  color: var(--color-primary);
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.er-hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-text-dark);
  line-height: 1.15;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .er-hero-title { font-size: 3rem; }
}
@media (min-width: 992px) {
  .er-hero-title { font-size: 3.75rem; }
}
.er-hero-desc {
  font-size: 1.125rem;
  color: #4a5565;
  line-height: 1.625;
  margin-bottom: 2rem;
  max-width: 560px;
}
.er-hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
}
.er-btn-primary {
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 2rem;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 10px 15px -3px rgba(21,93,252,0.3);
  transition: all 0.2s;
}
.er-btn-primary:hover {
  background: #0d47c9;
  color: #fff;
  transform: translateY(-1px);
}
.er-btn-outline {
  background: #fff;
  color: var(--color-text-dark);
  padding: 0.75rem 2rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-weight: 700;
  transition: all 0.2s;
}
.er-btn-outline:hover {
  background: #f9fafb;
  color: var(--color-text-dark);
}
.er-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(229, 231, 235, 0.6);
}
.er-stat-item {}
.er-stat-num {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}
.er-stat-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

/* Portal Card */
.er-portal-wrapper {
  background: linear-gradient(135deg, #eff6ff, rgba(191, 219, 254, 0.5));
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid rgba(21, 93, 252, 0.2);
  position: relative;
  overflow: hidden;
}
.er-portal-wrapper::before {
  content: '';
  position: absolute;
  top: -1rem;
  right: -1rem;
  width: 8rem;
  height: 8rem;
  background: rgba(21, 93, 252, 0.1);
  border-radius: 50%;
  filter: blur(48px);
}
.er-portal-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.er-portal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}
.er-portal-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--color-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 10px 15px -3px rgba(21, 93, 252, 0.2);
}
.er-portal-title {
  font-weight: 700;
  color: var(--color-text-dark);
}
.er-portal-subtitle {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
}
.er-portal-body {
  padding: 1.5rem;
  background: #fafbfc;
}
.er-employee-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.er-employee-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.er-employee-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.er-employee-avatar {
  width: 2.5rem;
  height: 2.5rem;
  background: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}
.er-employee-name {
  font-weight: 700;
  color: var(--color-text-dark);
  font-size: 0.875rem;
}
.er-employee-role {
  font-size: 0.75rem;
  color: #6b7280;
}
.er-employee-right {
  text-align: right;
}
.er-employee-location {
  font-size: 0.75rem;
  color: #6b7280;
}
.er-status-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  margin-top: 0.25rem;
}
.er-status-active {
  background: #dcfce7;
  color: #15803d;
}
.er-status-onboarding {
  background: #dbeafe;
  color: #1d4ed8;
}

/* Services Section */
.er-services {
  background: #fff;
  padding: 6rem 0;
}
.er-section-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 1rem;
}
.er-section-desc {
  font-size: 1rem;
  color: #6b7280;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.er-tabs-nav {
  display: inline-flex;
  background: #f3f4f6;
  padding: 0.375rem;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  gap: 0.5rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  justify-content: center;
}
.er-tab-btn {
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
}
.er-tab-btn:hover {
  background: rgba(156, 163, 175, 0.3);
  color: #1f2937;
}
.er-tab-btn.active {
  background: #fff;
  color: var(--color-primary);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.er-tabs-content {
  background: #f9fafb;
  border-radius: 24px;
  padding: 2rem;
  border: 1px solid #f3f4f6;
}
@media (min-width: 768px) {
  .er-tabs-content { padding: 3rem; }
}
.er-tab-panel {
  display: none;
}
.er-tab-panel.active {
  display: block;
}
.er-tab-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 1.5rem;
}
.er-tab-desc {
  font-size: 1rem;
  color: #6b7280;
  line-height: 1.625;
  margin-bottom: 2rem;
}
.er-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.er-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.er-feature-list li i {
  color: var(--color-primary);
  margin-top: 0.125rem;
  flex-shrink: 0;
}
.er-feature-list li span {
  font-size: 0.875rem;
  color: var(--color-text-dark);
}
.er-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.er-stat-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s;
}
.er-stat-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.er-stat-card-num {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}
.er-stat-card-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.25rem;
}
.er-stat-card-desc {
  font-size: 0.75rem;
  color: #6b7280;
}

/* Process Section */
.er-process {
  background: #f9fafb;
  padding: 6rem 0;
  position: relative;
}
.er-process-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #e5e7eb;
  z-index: 0;
  transform: translateY(-50%);
}
.er-process-card {
  background: #fff;
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  position: relative;
  z-index: 1;
  height: 100%;
  transition: transform 0.2s;
}
.er-process-card:hover {
  transform: translateY(-4px);
}
.er-process-icon {
  width: 4rem;
  height: 4rem;
  background: #eff6ff;
  color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 1.5rem;
  border: 4px solid #fff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}
.er-process-card:hover .er-process-icon {
  background: var(--color-primary);
  color: #fff;
}
.er-process-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}
.er-process-desc {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.625;
  margin-bottom: 0;
}

/* Why Choose Section */
.er-why-choose {
  background: #fff;
  padding: 6rem 0;
}
.er-why-desc {
  font-size: 1.125rem;
  color: #6b7280;
  margin-bottom: 2rem;
}
.er-advantage-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.er-advantage-item {
  display: flex;
  gap: 1rem;
}
.er-advantage-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.er-icon-blue {
  background: #eff6ff;
  color: var(--color-primary);
}
.er-icon-green {
  background: #dcfce7;
  color: #16a34a;
}
.er-icon-orange {
  background: #ffedd5;
  color: #ea580c;
}
.er-advantage-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0;
}
.er-advantage-desc {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.25rem;
  margin-bottom: 0;
}

/* Visual Animation */
.er-visual-wrapper {
  background: #f9fafb;
  border-radius: 24px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.er-pulse-circle {
  position: absolute;
  border-radius: 50%;
  animation: er-pulse 2s ease-in-out infinite;
}
.er-pulse-1 {
  inset: 0;
  background: rgba(191, 219, 254, 0.2);
}
.er-pulse-2 {
  inset: 2rem;
  background: rgba(191, 219, 254, 0.4);
  animation-delay: 0.075s;
}
.er-pulse-3 {
  inset: 4rem;
  background: rgba(191, 219, 254, 0.6);
  animation-delay: 0.15s;
}
@keyframes er-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.er-center-logo {
  width: 6rem;
  height: 6rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  position: relative;
  z-index: 10;
}
.er-center-logo img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.er-float-icon {
  position: absolute;
  background: #fff;
  padding: 0.75rem;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 5;
  animation: er-bounce 1s infinite;
}
.er-float-icon i {
  font-size: 1.5rem;
}
.er-float-top {
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  animation-delay: 0;
}
.er-float-top i { color: #9333ea; }
.er-float-bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  animation-delay: 0.1s;
}
.er-float-bottom i { color: #16a34a; }
.er-float-left {
  left: 0;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  animation-delay: 0.2s;
}
.er-float-left i { color: #ea580c; }
.er-float-right {
  right: 0;
  top: 50%;
  transform: translateX(50%) translateY(-50%);
  animation-delay: 0.3s;
}
.er-float-right i { color: #2563eb; }
@keyframes er-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.er-float-top { animation: er-bounce-top 1s infinite; }
.er-float-bottom { animation: er-bounce-bottom 1s infinite; }
.er-float-left { animation: er-bounce-left 1s infinite; }
.er-float-right { animation: er-bounce-right 1s infinite; }
@keyframes er-bounce-top {
  0%, 100% { top: 0; transform: translateX(-50%) translateY(-50%); }
  50% { top: -10px; transform: translateX(-50%) translateY(-50%); }
}
@keyframes er-bounce-bottom {
  0%, 100% { bottom: 0; transform: translateX(-50%) translateY(50%); }
  50% { bottom: -10px; transform: translateX(-50%) translateY(50%); }
}
@keyframes er-bounce-left {
  0%, 100% { left: 0; transform: translateX(-50%) translateY(-50%); }
  50% { left: -10px; transform: translateX(-50%) translateY(-50%); }
}
@keyframes er-bounce-right {
  0%, 100% { right: 0; transform: translateX(50%) translateY(-50%); }
  50% { right: -10px; transform: translateX(50%) translateY(-50%); }
}

/* FAQ Section */
.er-faq {
  background: #f9fafb;
  padding: 6rem 0;
  border-top: 1px solid #f3f4f6;
}
.er-faq-list {
  max-width: 56rem;
  margin: 0 auto;
}
.er-faq-item {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: border-color 0.2s;
}
.er-faq-item:hover {
  border-color: #bfdbfe;
}
.er-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}
.er-faq-question h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-dark);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}
.er-faq-q {
  color: var(--color-primary);
  font-family: Georgia, serif;
  font-style: italic;
  flex-shrink: 0;
}
.er-faq-arrow {
  color: #9ca3af;
  transition: transform 0.3s;
  flex-shrink: 0;
}
.er-faq-item.active .er-faq-arrow {
  transform: rotate(180deg);
  color: var(--color-primary);
}
.er-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
}
.er-faq-item.active .er-faq-answer {
  max-height: 500px;
}
.er-faq-answer p {
  padding: 0 1.5rem 1.5rem 3rem;
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.625;
  margin: 0;
  border-left: 2px solid #eff6ff;
  margin-left: 1.5rem;
}
.seo-serp-results button {
    display: none;
}