/* =========================
   Why Flashmunk
   - PC：保留大气质感（更克制）
   - Mobile：极简顺滑衔接（中文友好 + 字重不发黑）
   ========================= */

#why_flashmunk{
  position: relative;
  padding: 40px 0 84px;
  background: transparent;
  overflow: hidden;
}

/* PC 背景光晕：更淡，别抢戏 */
#why_flashmunk::before{
  content:"";
  position:absolute;
  left: 50%;
  top: -160px;
  width: 860px;
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side,
    rgba(59,130,246,.12),
    rgba(59,130,246,0) 70%);
  pointer-events:none;
  z-index: 0;
}
#why_flashmunk::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -240px;
  width: 860px;
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side,
    rgba(15,23,42,.08),
    rgba(15,23,42,0) 72%);
  pointer-events:none;
  z-index: 0;
}

#why_flashmunk .wf-inner{
  position: relative;
  z-index: 1;
  width: min(1410px, 100% - 80px);
  margin-inline: auto;
  box-sizing: border-box;
}

/* Head */
#why_flashmunk .wf-head{
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 22px;
}

/* kicker（PC/通用） */
#why_flashmunk .wf-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.14);
}
#why_flashmunk .wf-kicker-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(59,130,246,.85);
  box-shadow: 0 10px 22px rgba(59,130,246,.22);
}
#why_flashmunk .wf-kicker-text{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;   /* 英文好看；手机端会覆盖更克制 */
  color: rgba(15,23,42,.78);
}

#why_flashmunk .wf-title{
  margin: 0;
  font-size: 20px;
  font-weight: 850;         /* 比你原来 900 稍微收一点 */
  letter-spacing: .2px;
  line-height: 1.15;
  background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #5e6fb4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#why_flashmunk .wf-title::after{
  content:"";
  display:block;
  width: 220px;
  height: 10px;
  margin-top: 14px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(59,130,246,.28),
      rgba(59,130,246,0) 65%),
    linear-gradient(90deg,
      rgba(15,23,42,0),
      rgba(15,23,42,.18),
      rgba(15,23,42,0));
  border-radius: 999px;
}

#why_flashmunk .wf-sub{
  margin: 0;
  font-size: 13px;
  font-weight: 420;
  color: #6b7280;
  max-width: 640px;
  line-height: 1.7;
}

/* Cards base */
#why_flashmunk .wf-card{
  position: relative;
  border-radius: 20px;
  padding: 22px 22px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  align-items: flex-start;
  overflow: hidden;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 16px 40px rgba(15,23,42,.06);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

#why_flashmunk .wf-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 56px rgba(15,23,42,.10);
}

/* icon */
#why_flashmunk .wf-icon{
  width: 64px;
  height: 64px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.06);
  color: #111827;
}
#why_flashmunk .wf-icon .material-icons{
  font-size: 28px;
  line-height: 1;
  opacity: .9;
}

/* text */
#why_flashmunk .wf-content{
  min-width: 0;
  display: grid;
  gap: 8px;
}
#why_flashmunk .wf-name{
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}
#why_flashmunk .wf-desc{
  font-size: 12.5px;
  font-weight: 420;
  color: #6b7280;
  line-height: 1.7;
}

/* =========================
   Primary / Secondary layout
   ========================= */
#why_flashmunk .wf-grid-primary{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 14px;
  margin-bottom: 18px;
}
#why_flashmunk .wf-grid-secondary{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* Primary card (PC) */
#why_flashmunk .wf-card--primary{
  border-radius: 24px;
  padding: 28px 28px;
  grid-template-columns: 78px minmax(0, 1fr);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,250,251,.92));
  border: 1px solid rgba(59,130,246,.14);
  box-shadow: 0 22px 66px rgba(15,23,42,.12);
}
#why_flashmunk .wf-card--primary .wf-icon{
  width: 78px;
  height: 78px;
  border-radius: 26px;
  background: radial-gradient(circle at 30% 30%,
    rgba(59,130,246,.14),
    rgba(255,255,255,.96) 60%);
  border: 1px solid rgba(59,130,246,.16);
}
#why_flashmunk .wf-card--primary .wf-icon .material-icons{ font-size: 32px; }
#why_flashmunk .wf-card--primary .wf-name{ font-size: 15px; font-weight: 760; }
#why_flashmunk .wf-card--primary .wf-desc{ font-size: 13px; }

/* Secondary card (PC) */
#why_flashmunk .wf-card--secondary{
  border-radius: 18px;
  padding: 18px 18px;
  grid-template-columns: 56px minmax(0, 1fr);
  box-shadow: 0 14px 34px rgba(15,23,42,.06);
}
#why_flashmunk .wf-card--secondary .wf-icon{
  width: 56px;
  height: 56px;
  border-radius: 18px;
}
#why_flashmunk .wf-card--secondary .wf-icon .material-icons{ font-size: 24px; }
#why_flashmunk .wf-card--secondary .wf-name{ font-size: 13.5px; font-weight: 700; }
#why_flashmunk .wf-card--secondary .wf-desc{ font-size: 12.2px; }

/* =========================
   Responsive (<=1200)
   ========================= */
@media (max-width: 1200px){
  #why_flashmunk{
    padding: 52px 0 68px;
  }
  #why_flashmunk .wf-grid-secondary{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  #why_flashmunk .wf-title::after{
    width: 200px;
  }
}
@media (max-width: 900px){
  #why_flashmunk .wf-grid-primary{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* =========================================================
   Mobile（<=768px）—— 重新设计：极简 + 顺滑衔接 + 中文友好
   ========================================================= */
@media (max-width: 768px){

  /* 手机端：不要整屏光晕（看起来像“另一个页面”） */
  #why_flashmunk::before,
  #why_flashmunk::after{
    content: none;
  }

  /* ✅ 关键：不再上移，不负 margin；用“轻过渡”中和衔接 */
  #why_flashmunk{
    padding: 18px 0 24px;
    background: transparent;
  }

  /* 顶部轻过渡：一条淡淡分隔 + 轻渐变（克制、不花） */
  #why_flashmunk .wf-inner{
    width: min(100% - 24px, 640px);
    margin-inline: auto;
    box-sizing: border-box;

    padding: 14px 12px 14px;
    border-radius: 16px;

    background: rgba(255,255,255,.96);
    border: 1px solid rgba(15,23,42,.06);
    box-shadow: 0 12px 24px rgba(15,23,42,.05);
  }

  /* inner 顶部“模块分隔”让过渡自然 */
  #why_flashmunk .wf-inner::before{
    content:"";
    display:block;
    height: 1px;
    width: 100%;
    background: rgba(15,23,42,.06);
    margin: 0 0 12px 0;
  }
  /* 顶部再加一点点柔和渐变（非常淡） */
  #why_flashmunk .wf-inner::after{
    content:"";
    position:absolute;
    left:0; right:0;
    top: 0;
    height: 36px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(180deg,
      rgba(59,130,246,.06),
      rgba(59,130,246,0));
    pointer-events:none;
    z-index: 0;
  }

  /* 头部：手机端左对齐，更像“介绍模块” */
  #why_flashmunk .wf-head{
    position: relative;
    z-index: 1;
    justify-items: start;
    text-align: left;
    gap: 8px;
    margin-bottom: 12px;
  }

  /* kicker：中文环境字距收起来；字重别粗 */
  #why_flashmunk .wf-kicker{
    padding: 6px 10px;
    gap: 8px;
    background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.12);
  }
  #why_flashmunk .wf-kicker-text{
    font-size: 11px;
    font-weight: 520;          /* ✅ 不粗 */
    letter-spacing: .06em;     /* ✅ 中文更舒服 */
  }

  /* 主标题：保留厚度，但不要“黑块” */
  #why_flashmunk .wf-title{
    font-size: 17px;
    font-weight: 780;
    color: #0f172a;
    background: none;
    -webkit-text-fill-color: initial;
    letter-spacing: 0;
  }
  #why_flashmunk .wf-title::after{ display:none; }

  /* 副标题：干净一行/两行都舒服，不做花里胡哨块 */
  #why_flashmunk .wf-sub{
    max-width: none;
    font-size: 12px;
    font-weight: 420;
    color: #475569;
    line-height: 1.65;
  }

  /* 主打两张：手机端堆叠，极简卡片 */
  #why_flashmunk .wf-grid-primary{
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 12px;
  }
  #why_flashmunk .wf-card--primary{
    border-radius: 14px;
    padding: 14px 12px;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;

    background: rgba(255,255,255,.98);
    border: 1px solid rgba(59,130,246,.14);
    box-shadow: 0 10px 18px rgba(15,23,42,.05);
  }
  #why_flashmunk .wf-card--primary .wf-icon{
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.14);
  }
  #why_flashmunk .wf-card--primary .wf-icon .material-icons{
    font-size: 22px;
    opacity: .9;
  }
  #why_flashmunk .wf-card--primary .wf-name{
    font-size: 13.6px;
    font-weight: 650;     /* ✅ 降粗 */
    line-height: 1.28;
  }
  #why_flashmunk .wf-card--primary .wf-desc{
    font-size: 12px;
    font-weight: 420;
    line-height: 1.6;
    color: #64748b;
  }

  /* 辅助四张：手机端 2 列（更像“卖点列表”） */
  #why_flashmunk .wf-grid-secondary{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #why_flashmunk .wf-card--secondary{
    border-radius: 14px;
    padding: 12px 12px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;

    background: rgba(255,255,255,.98);
    border: 1px solid rgba(15,23,42,.06);
    box-shadow: 0 10px 18px rgba(15,23,42,.04);
  }
  #why_flashmunk .wf-card--secondary .wf-icon{
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(15,23,42,.03);
    border: 1px solid rgba(15,23,42,.06);
  }
  #why_flashmunk .wf-card--secondary .wf-icon .material-icons{
    font-size: 20px;
    opacity: .86;
  }
  #why_flashmunk .wf-card--secondary .wf-name{
    font-size: 12.8px;
    font-weight: 620;    /* ✅ 降粗 */
    line-height: 1.22;
  }
  #why_flashmunk .wf-card--secondary .wf-desc{
    font-size: 11.6px;
    font-weight: 420;
    line-height: 1.52;
    color: #6b7280;

    display: -webkit-box;
    -webkit-line-clamp: 2;          /* 二列时避免太高 */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 中文断行更自然 */
  #why_flashmunk .wf-name,
  #why_flashmunk .wf-desc{
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* 更窄机型：2 列会挤 -> 1 列 */
@media (max-width: 420px){
  #why_flashmunk .wf-grid-secondary{
    grid-template-columns: 1fr;
  }
}