/* Six-card challenge section, loaded on the homepage only. */
.home-problem-grid { grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: 1fr; gap: 24px; }
.home-problem-grid .problem-card { display: flex; flex-direction: column; isolation: isolate; min-height: 0; padding: 32px; border: 0; border-radius: 24px; background: transparent; overflow: visible; box-shadow: none; transition: transform 180ms ease-out; }
.home-problem-grid .problem-card::before { content: ''; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--border); border-radius: 24px; background: #fff; mask-image: radial-gradient(circle at calc(100% - 24px) 24px,transparent 34px,#000 35px); filter: drop-shadow(0 4px 8px rgba(13,54,91,.03)); transition: border-color 180ms ease-out,filter 180ms ease-out; pointer-events: none; }
.home-problem-grid .problem-number { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--blue-700); background: #dcedff; font-size: .8rem; letter-spacing: 0; }
.home-problem-grid .problem-number { cursor: default; line-height: 1; transition: background-color 180ms ease-out,color 180ms ease-out,transform 180ms ease-out; }
.home-problem-grid .problem-number::after { content: ''; position: absolute; inset: -3px; border: 2px solid transparent; border-top-color: var(--blue-400); border-right-color: var(--blue-400); border-radius: 50%; opacity: 0; pointer-events: none; }
.home-problem-grid .problem-card:has(a:focus-visible) .problem-number { background: var(--blue-700); color: #fff; transform: scale(1.1); }
.home-problem-grid .problem-card:has(a:focus-visible) .problem-number::after { animation: home-badge-orbit 650ms ease-out both; }
@keyframes home-badge-orbit {
  0% { opacity: 0; transform: rotate(-90deg); }
  15% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: rotate(270deg); }
}
.home-problem-icon { width: 42px; height: 42px; flex-shrink: 0; fill: none; stroke: var(--blue-600); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.home-problem-grid .problem-card h3 { margin: 24px 0 16px; padding-bottom: 18px; border-bottom: 1px solid var(--border); font-size: 1.2rem; line-height: 1.35; }
.home-problem-grid .problem-card p { margin: 0 0 20px; font-size: .9375rem; line-height: 1.7; }
.home-problem-grid .problem-card a { align-self: flex-start; min-height: 44px; margin-top: auto; font-size: .8125rem; line-height: 1.5; }
.home-problem-grid .problem-card a span { transition: transform 180ms ease-out; }
.home-problem-grid .problem-card a:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 5px; border-radius: 2px; }
.home-problem-grid .problem-card:focus-within { transform: translateY(-3px); box-shadow: none; }
.home-problem-grid .problem-card:focus-within::before { border-color: var(--blue-600); filter: drop-shadow(0 8px 12px rgba(13,54,91,.1)); }
@media (hover:hover) and (pointer:fine) {
  .home-problem-grid .problem-card:hover .problem-number { background: var(--blue-700); color: #fff; transform: scale(1.1); }
  .home-problem-grid .problem-card:hover .problem-number::after { animation: home-badge-orbit 650ms ease-out both; }
  .home-problem-grid .problem-card:hover { transform: translateY(-3px); box-shadow: none; }
  .home-problem-grid .problem-card:hover::before { border-color: var(--blue-600); filter: drop-shadow(0 8px 12px rgba(13,54,91,.1)); }
  .home-problem-grid .problem-card a:hover span { transform: translateX(3px); }
}
@media (max-width:1100px) { .home-problem-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .home-problem-grid { grid-template-columns: minmax(0,1fr); grid-auto-rows: auto; } .home-problem-grid .problem-card { padding: 28px; } }
@media (prefers-reduced-motion:reduce) {
  .home-problem-grid .problem-number { transition: none !important; transform: none !important; }
  .home-problem-grid .problem-number::after { animation: none !important; opacity: 0 !important; }
  .home-problem-grid .problem-card,.home-problem-grid .problem-card::before,.home-problem-grid .problem-card a span { transition: none !important; }
  .home-problem-grid .problem-card:is(:hover,:focus-within),.home-problem-grid .problem-card a:is(:hover,:focus-visible) span { transform: none !important; }
}