.problem-card {
    display:flex; align-items:center; gap:18px; min-height:104px;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .problem-card:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(8,38,74,.08); border-color:rgba(18,105,176,.22); }
  .problem-icon {
    flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center;
    border-radius:15px; background:#FFF0EF; color:#E53935;
  }
  .problem-icon svg { width:25px; height:25px; fill:none; stroke:#E53935; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

  .magic-promise-card {
    display:flex;
    min-height:270px;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:20px;
    padding:28px 22px;
    border:1px solid #e2e8f0;
    border-radius:24px;
    background:#fff;
    color:#102A43;
    font-weight:800;
    line-height:1.5;
    text-align:center;
    box-shadow:0 4px 18px rgba(8,38,74,.04);
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .magic-promise-card:hover {
    transform:translateY(-2px);
    border-color:rgba(18,105,176,.22);
    box-shadow:0 12px 28px rgba(8,38,74,.07);
  }
  .magic-promise-check {
    display:grid;
    place-items:center;
    flex:0 0 46px;
    width:46px;
    height:46px;
    margin-top:0;
    border-radius:999px;
    background:#FF6B12;
    color:#fff;
    font-size:22px;
    font-weight:900;
    line-height:1;
  }
  @media (max-width:639px) {
    .magic-promise-card { min-height:190px; padding:24px 18px; }
    .magic-promise-check { flex-basis:42px; width:42px; height:42px; font-size:20px; }
  }

  .who-card {
    display:flex; align-items:center; gap:16px; min-height:86px; padding:20px 24px;
    border:1px solid #e2e8f0; border-radius:20px; background:#fff; color:#102A43;
    font-weight:600; line-height:1.55; box-shadow:0 4px 18px rgba(8,38,74,.04);
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .who-card:hover { transform:translateY(-2px); border-color:rgba(18,105,176,.22); box-shadow:0 12px 28px rgba(8,38,74,.07); }
  .who-check {
    display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px;
    border-radius:999px; background:#FF6B12; color:#fff; font-size:15px; font-weight:900; line-height:1;
  }
  .live-status-dot { position:relative; display:inline-flex; width:10px; height:10px; align-items:center; justify-content:center; }
  .live-status-dot::before {
    content:""; position:absolute; width:10px; height:10px; border-radius:999px;
    background:rgba(34,197,94,.28); animation:livePulse 1.6s ease-out infinite;
  }
  .live-status-dot > span {
    position:relative; z-index:1; display:block; width:7px; height:7px; border-radius:999px;
    background:#22C55E; box-shadow:0 0 8px rgba(34,197,94,.55); animation:liveBlink 1.6s ease-in-out infinite;
  }
  @keyframes liveBlink { 0%,100%{opacity:1} 50%{opacity:.48} }
  @keyframes livePulse { 0%{transform:scale(.65);opacity:.7} 70%,100%{transform:scale(1.9);opacity:0} }
  @media (prefers-reduced-motion:reduce) {
    .live-status-dot::before,.live-status-dot>span { animation:none; }
  }
  @media (max-width:639px) {
    .problem-card { min-height:92px; gap:14px; }
    .problem-icon { flex-basis:44px; width:44px; height:44px; border-radius:13px; }
    .problem-icon svg { width:22px; height:22px; }
    .who-card { min-height:78px; padding:17px 18px; gap:13px; }
    .who-check { flex-basis:26px; width:26px; height:26px; font-size:14px; }
  }