/* ========================================
   8. 响应式断点（Responsive）
   ======================================== */

/* 移动端适配 */
@media (max-width: 768px) {
  /* 调整区块内边距 */
  .section {
    padding: 60px 16px 80px;
  }

  /* 隐藏进度指示器 */
  .progress-indicator {
    display: none;
  }

  /* 调整下一区块按钮 */
  .next-section-btn {
    bottom: 20px;
    padding: 10px 20px;
    font-size: 0.875rem;
  }

  /* ===== 政策卡片网格 ===== */
  .policy-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .policy-card {
    padding: 24px 20px;
  }

  .policy-highlight {
    flex-direction: column;
    text-align: center;
    padding: 16px 20px;
  }

  .policy-highlight-icon {
    margin-bottom: 8px;
  }

  /* ===== 温度对比摘要 ===== */
  .temp-summary-grid {
    flex-direction: column;
    gap: 12px;
  }

  .temp-summary-card {
    min-width: unset;
    width: 100%;
  }

  .temp-summary-divider {
    width: 60px;
    height: 2px;
    margin: 0;
  }

  /* ===== 原理对比卡片 ===== */
  .principle-comparison {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .principle-card {
    padding: 24px 20px;
  }

  .principle-flow {
    flex-direction: column;
    align-items: stretch;
  }

  .flow-arrow {
    transform: rotate(90deg);
    text-align: center;
    padding: 8px 0;
  }

  /* ===== 经济效益 ===== */
  .economics-hero {
    padding: 28px 20px;
  }

  .economics-scenario {
    flex-direction: column;
    gap: 16px;
  }

  .scenario-divider {
    width: 60px;
    height: 1px;
  }

  .economics-highlight {
    flex-direction: column;
    text-align: center;
    padding: 16px;
  }

  .economics-data-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .comparison-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .comparison-card {
    padding: 24px 20px;
  }

  .economics-benefits {
    flex-direction: column;
    gap: 16px;
  }

  /* ===== SVG动画舞台 ===== */
  #animStage {
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;
    border-radius: 12px;
  }

  /* 隐藏动画模块的图例和提示 */
  #animation > .container > div[style*="text-align:center"] {
    display: none;
  }

  #animation > .container > div[style*="justify-content:center"][style*="gap:36px"] {
    display: none;
  }

  /* ===== 计算器模块 ===== */
  .calculator-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .calc-panel {
    padding: 24px 20px;
  }

  .calc-input {
    font-size: 1.25rem;
    padding: 12px 14px;
  }

  .result-value {
    font-size: 2.25rem;
  }

  /* ===== 案例网格 ===== */
  .cases-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .case-card {
    padding: 20px;
  }

  /* ===== 服务网格 ===== */
  .service-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .service-card {
    padding: 24px 20px;
  }

  /* ===== 三包政策时间轴 ===== */
  .warranty-timeline {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }

  .warranty-line {
    display: none;
  }

  .warranty-item {
    min-width: unset;
    width: 100%;
    padding: 0;
  }

  /* ===== 合作方式卡片 ===== */
  .cooperation-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cooperation-card {
    padding: 28px 20px;
  }

  .emc-profit-share {
    flex-direction: column;
  }

  /* ===== 设备优势模块 - 标签页系统 ===== */
  .tab-btn {
    padding: 12px 8px;
    gap: 4px;
    border-width: 2px;
    border-radius: 12px;
  }

  .tab-icon {
    font-size: 1.25rem;
  }

  .tab-title {
    font-size: 0.8125rem;
    line-height: 1.3;
  }

  .tab-subtitle {
    font-size: 0.625rem;
    display: none;
  }

  .advantages-tabs-content {
    border-radius: 16px;
    min-height: 500px;
  }

  .tab-panel {
    padding: 24px;
  }

  .advantage-detail-header {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    scroll-margin-top: 80px;
  }

  .detail-icon-large {
    width: 72px;
    height: 72px;
  }

  .detail-icon-large svg {
    width: 36px;
    height: 36px;
  }

  .detail-title-group h3 {
    font-size: 1.25rem;
  }

  .detail-subtitle {
    font-size: 0.875rem;
  }

  .comparison-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .comparison-table-header,
  .comparison-table-row {
    grid-template-columns: 90px 1fr 1fr;
  }

  .table-cell {
    padding: 10px 8px;
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
    min-width: 0;
  }

  .table-highlight {
    border-right-width: 1px;
  }

  .table-label {
    border-right: 1px solid var(--gray-300);
  }

  .highlight-badge, .normal-badge {
    padding: 4px 8px;
    font-size: 0.625rem;
    white-space: normal;
    word-break: break-word;
    text-align: center;
  }

  .highlight-value, .normal-value {
    font-size: 0.6875rem;
    white-space: normal;
    word-break: break-word;
    text-align: center;
  }

  .value-good {
    padding: 4px 8px !important;
    font-size: 0.625rem !important;
    border-width: 1.5px !important;
  }

  .value-great {
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
    border-width: 1.5px !important;
  }

  .value-bad {
    padding: 4px 8px !important;
    font-size: 0.625rem !important;
  }

  .advantage-point {
    padding: 16px;
    gap: 12px;
  }

  .point-icon {
    width: 40px;
    height: 40px;
  }

  .point-icon svg {
    width: 20px;
    height: 20px;
  }

  .point-content h4 {
    font-size: 1rem;
  }

  .point-content p {
    font-size: 0.8125rem;
  }

  .roi-calculation {
    padding: 24px;
  }

  .roi-header h4 {
    font-size: 1rem;
  }

  .roi-comparison {
    flex-direction: column;
    gap: 16px;
  }

  .roi-divider {
    font-size: 1.25rem;
  }

  .roi-item {
    padding: 20px;
  }

  .roi-value {
    font-size: 1.125rem;
  }

  .efficiency-bar-group {
    margin-bottom: 20px;
  }

  .efficiency-label {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .label-title {
    font-size: 0.875rem;
  }

  .label-value {
    font-size: 1rem;
  }

  .efficiency-bar {
    height: 24px;
  }

  .frequency-item {
    margin-bottom: 16px;
  }

  .frequency-range {
    font-size: 1.25rem;
  }

  .frequency-bar {
    height: 20px;
  }

  .protection-levels {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .protection-level {
    padding: 20px;
  }

  .protection-title {
    font-size: 1.125rem;
  }

  .protection-feature {
    font-size: 0.8125rem;
    gap: 10px;
  }

  .feature-icon {
    width: 24px;
    height: 24px;
    font-size: 0.875rem;
  }

  .safety-notice, .safety-warning {
    flex-direction: column;
    padding: 24px;
    gap: 16px;
  }

  .notice-icon, .warning-icon {
    width: 56px;
    height: 56px;
  }

  .notice-icon svg, .warning-icon svg {
    width: 28px;
    height: 28px;
  }

  .notice-content h4, .warning-content h4 {
    font-size: 1.125rem;
  }

  .notice-content p, .warning-content p {
    font-size: 0.875rem;
  }

  .notice-content li, .warning-content li {
    font-size: 0.875rem;
  }

  .notice-highlight, .warning-highlight {
    font-size: 0.875rem !important;
    padding: 12px;
  }

  .roi-formula {
    flex-direction: column;
    gap: 16px;
  }

  .formula-value {
    font-size: 1.25rem;
  }

  .formula-operator {
    font-size: 1.5rem;
  }

  .advantages-summary {
    flex-direction: column;
    text-align: center;
    padding: 24px;
    gap: 16px;
  }

  .summary-icon {
    width: 64px;
    height: 64px;
  }

  .summary-icon svg {
    width: 32px;
    height: 32px;
  }

  .summary-text strong {
    font-size: 1.25rem;
  }

  .summary-text p {
    font-size: 0.9375rem;
  }

  /* 标签页底部导航 */
  .tab-panel-footer {
    flex-direction: column;
    gap: 12px;
    padding: 20px 0;
  }

  .tab-nav-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
    font-size: 0.8125rem;
  }

  .tab-nav-indicator {
    order: -1;
  }

  /* ===== 产品参数 ===== */
  .spec-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px;
  }

  /* 产品参数 - 检测报告和核心指标双列网格 */
  #product > .container > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 产品参数 - 技术参数网格 */
  #product > .container > div[style*="grid-template-columns:1fr 1fr"]:last-of-type {
    grid-template-columns: 1fr !important;
  }

  #product > .container > div[style*="grid-template-columns:1fr 1fr"] > div[style*="padding:28px"] {
    padding: 20px !important;
  }

  #product > .container > div[style*="grid-template-columns:1fr 1fr"] > div[style*="padding:28px"]:last-child {
    padding: 20px !important;
  }

  /* ===== 英雄区域 ===== */
  .hero-title {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
  }

  .hero-cta {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* ===== 区块头部 ===== */
  .section-header {
    margin-bottom: 40px;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .section-desc {
    font-size: 0.9375rem;
  }
}

/* 平板横屏适配 */
@media (min-width: 768px) and (max-width: 1100px) {
  /* 技术原理动画模块优化 - 更激进压缩 */
  #animation {
    padding: 40px 20px 80px !important;
    min-height: auto !important;
  }
  
  #animation .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
  }
  
  #animation .section-header {
    margin-bottom: 8px !important;
  }
  
  #animation .section-label {
    font-size: 0.6875rem !important;
    padding: 4px 10px !important;
  }
  
  #animation .section-title {
    font-size: 1.375rem !important;
    margin-bottom: 2px !important;
  }
  
  #animation .section-desc {
    font-size: 0.75rem !important;
    margin-bottom: 4px !important;
  }
  
  #animStage {
    max-width: 880px !important;
    max-height: 240px !important;
  }
  
  /* 隐藏 phaseLabel 状态提示，节省空间 */
  #animation > .container > div[style*="text-align:center"] {
    display: none !important;
  }
  
  /* 隐藏图例，节省空间 */
  #animation > .container > div[style*="justify-content:center"][style*="gap:36px"] {
    display: none !important;
  }
  
  /* 优化按钮 */
  #animation > .container > div[style*="justify-content:center"][style*="gap:14px"] {
    gap: 8px !important;
    margin-top: 10px !important;
  }
  
  #animation > .container > div[style*="justify-content:center"][style*="gap:14px"] button {
    padding: 8px 20px !important;
    font-size: 0.8125rem !important;
    border-radius: 10px !important;
  }
  
  /* 优化流程卡片 - 改为横向排列在SVG下方 */
  #animation > .container > div[style*="grid-template-columns:repeat(3,1fr)"] {
    margin-top: 12px !important;
    max-width: 860px !important;
    gap: 10px !important;
  }
  
  #animation > .container > div[style*="grid-template-columns:repeat(3,1fr)"] > div {
    padding: 12px 10px !important;
  }
  
  #animation > .container > div[style*="grid-template-columns:repeat(3,1fr)"] > div > div:first-child {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 6px !important;
    border-radius: 8px !important;
  }
  
  #animation > .container > div[style*="grid-template-columns:repeat(3,1fr)"] > div > div:first-child svg {
    width: 16px !important;
    height: 16px !important;
  }
  
  #animation > .container > div[style*="grid-template-columns:repeat(3,1fr)"] > div > div:nth-child(2) {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
  }
  
  #animation > .container > div[style*="grid-template-columns:repeat(3,1fr)"] > div > div:last-child {
    font-size: 0.6875rem !important;
    line-height: 1.3 !important;
    color: #94a3b8 !important;
  }
}

/* 平板适配 */
@media (min-width: 768px) {
  /* 平板端样式 */
}

/* 桌面端适配 */
@media (min-width: 1024px) {
  /* 桌面端样式 */
}

/* 大屏幕适配 */
@media (min-width: 1280px) {
  /* 大屏幕样式 */
}