/* ============================================================
   协会网主站（ixiehui.com）专用样式
   ============================================================ */

/* ===== 主站配色（独立于分站主题色，用稳重的红+金平台色）===== */
.main-site {
  --primary: #C8252C;
  --primary-dark: #9E1B21;
  --primary-light: #E84A52;
  --primary-soft: #FCEBEA;
  --accent: #C9A961;
  --accent-soft: #F5EBD3;
  --gradient: linear-gradient(135deg, #C8252C 0%, #9E1B21 100%);
  --gradient-hero: linear-gradient(135deg, rgba(158,27,33,0.92) 0%, rgba(90,15,20,0.88) 100%);
}

/* ===== 主站 Hero ===== */
.main-hero {
  position: relative; min-height: 600px; overflow: hidden;
  background: var(--gradient-hero),
    url('https://images.unsplash.com/photo-1511795409834-ef04bbd61622?w=1600&q=80') center/cover no-repeat;
  color: #fff; display: flex; align-items: center;
}
.main-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(201,169,97,0.25) 0%, transparent 50%);
}
.main-hero .container { position: relative; z-index: 2; }
.main-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(8px);
  border-radius: 30px; font-size: 13px; margin-bottom: 24px;
}
.main-hero h1 {
  font-size: 50px; font-weight: 800; line-height: 1.2; margin-bottom: 22px;
  max-width: 800px; letter-spacing: -1px;
}
.main-hero h1 .highlight { color: #F5D77E; }
.main-hero .sub {
  font-size: 18px; line-height: 1.7; opacity: 0.95; max-width: 640px; margin-bottom: 36px;
}
.main-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.main-hero-actions .btn-outline { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.5); }
.main-hero-actions .btn-outline:hover { background: #fff; color: var(--primary); border-color: #fff; }
.main-hero-stats {
  display: flex; gap: 48px; margin-top: 56px; padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.main-hero-stats .stat .num { font-size: 36px; font-weight: 800; color: #F5D77E; line-height: 1; }
.main-hero-stats .stat .label { font-size: 14px; opacity: 0.85; margin-top: 6px; }

/* ===== 能力介绍卡片 ===== */
.capability-card {
  padding: 32px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: var(--transition); position: relative; overflow: hidden;
}
.capability-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--primary-light); }
.capability-card .ico {
  width: 56px; height: 56px; border-radius: 14px; margin-bottom: 18px;
  background: var(--gradient); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.capability-card h3 { font-size: 19px; font-weight: 600; margin-bottom: 10px; }
.capability-card p { font-size: 14px; color: var(--text-3); line-height: 1.7; }

/* ===== 入驻流程 ===== */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative;
}
.step-item {
  text-align: center; padding: 28px 20px; background: #fff; border-radius: var(--radius-lg);
  border: 1px solid var(--border); position: relative;
}
.step-item .num {
  width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--gradient); color: #fff; font-size: 18px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.step-item h4 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.step-item p { font-size: 13px; color: var(--text-3); line-height: 1.6; }

/* ===== 协会展示卡片 ===== */
.assoc-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; transition: var(--transition);
}
.assoc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--primary-light); }
.assoc-card .cover {
  height: 140px; position: relative; overflow: hidden;
}
.assoc-card .cover .theme-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; }
.assoc-card .body { padding: 22px; }
.assoc-card .logo {
  width: 56px; height: 56px; border-radius: 10px; margin-top: -50px; margin-bottom: 12px;
  background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; position: relative;
}
.assoc-card .name { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.assoc-card .desc { font-size: 13px; color: var(--text-3); line-height: 1.6; min-height: 42px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.assoc-card .footer { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.assoc-card .domain { font-size: 12px; color: var(--text-4); }

/* ===== 案例展示（惠爱网）===== */
.case-showcase {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center;
}
.case-mockup {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  border: 1px solid var(--border); background: #fff;
}
.case-mockup .browser-bar {
  padding: 10px 14px; background: #F5F5F5; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
}
.case-mockup .browser-bar .dot { width: 10px; height: 10px; border-radius: 50%; }
.case-mockup .browser-bar .dot.r { background: #FF5F57; }
.case-mockup .browser-bar .dot.y { background: #FEBC2E; }
.case-mockup .browser-bar .dot.g { background: #28C840; }
.case-mockup .browser-bar .url {
  flex: 1; margin-left: 10px; background: #fff; border-radius: 4px; padding: 4px 10px;
  font-size: 12px; color: var(--text-3); border: 1px solid var(--border);
}
.case-mockup .preview { padding: 24px; background: #fff; }
.case-mockup .preview .mock-hero {
  background: linear-gradient(135deg, #C8252C 0%, #9E1B21 100%);
  border-radius: var(--radius); padding: 32px; color: #fff; margin-bottom: 16px;
}
.case-mockup .preview .mock-hero h4 { font-size: 18px; margin-bottom: 6px; }
.case-mockup .preview .mock-hero p { font-size: 12px; opacity: 0.9; }
.case-mockup .preview .mock-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.case-mockup .preview .mock-card { height: 60px; background: var(--primary-soft); border-radius: 6px; }

.case-features li {
  display: flex; gap: 12px; padding: 10px 0; font-size: 15px; align-items: flex-start;
}
.case-features li .check {
  width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;
}

/* ===== CTA 区块 ===== */
.cta-band {
  background: var(--gradient); color: #fff; padding: 64px 0; text-align: center;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
}
.cta-band .container { position: relative; z-index: 2; }
.cta-band h2 { font-size: 32px; font-weight: 800; margin-bottom: 14px; }
.cta-band p { font-size: 16px; opacity: 0.95; margin-bottom: 28px; max-width: 580px; margin-left: auto; margin-right: auto; }
.cta-band .btn { background: #fff; color: var(--primary); }
.cta-band .btn:hover { background: #F5D77E; color: var(--primary-dark); }

/* ===== 主题色展示 ===== */
.theme-showcase { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.theme-demo {
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border);
  transition: var(--transition); cursor: pointer;
}
.theme-demo:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.theme-demo .swatch { height: 80px; }
.theme-demo .swatch.red { background: linear-gradient(135deg, #C8252C, #9E1B21); }
.theme-demo .swatch.blue { background: linear-gradient(135deg, #1565C0, #0D47A1); }
.theme-demo .swatch.gold { background: linear-gradient(135deg, #B8860B, #8B6508); }
.theme-demo .swatch.green { background: linear-gradient(135deg, #2E7D32, #1B5E20); }
.theme-demo .swatch.purple { background: linear-gradient(135deg, #6A1B9A, #4A148C); }
.theme-demo .info { padding: 14px; background: #fff; }
.theme-demo .info .name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.theme-demo .info .desc { font-size: 11px; color: var(--text-3); }

/* ===== 入驻申请表单页 ===== */
.apply-form-wrap {
  max-width: 720px; margin: 0 auto; background: #fff; padding: 40px;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--border);
}
.apply-form-wrap h1 { font-size: 26px; margin-bottom: 8px; }
.apply-form-wrap .sub { color: var(--text-3); margin-bottom: 28px; font-size: 14px; }

/* ===== 响应式 ===== */
@media (max-width: 968px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .theme-showcase { grid-template-columns: repeat(3, 1fr); }
  .case-showcase { grid-template-columns: 1fr; }
  .main-hero h1 { font-size: 38px; }
}
@media (max-width: 768px) {
  .main-hero { min-height: 500px; }
  .main-hero h1 { font-size: 28px; }
  .main-hero .sub { font-size: 15px; }
  .main-hero-stats { gap: 24px; flex-wrap: wrap; }
  .main-hero-stats .stat .num { font-size: 28px; }
  .steps { grid-template-columns: 1fr; }
  .theme-showcase { grid-template-columns: repeat(2, 1fr); }
  .cta-band h2 { font-size: 24px; }
  .apply-form-wrap { padding: 24px; }
}