@font-face{font-family:Geist;src:url(assets/geist-latin.woff2) format("woff2");font-style:normal;font-weight:100 900;font-display:swap}

#slide-8 {
  overflow: hidden;
  background: #fff;
  color: #111827;
  font-family: Geist, Arial, sans-serif;
}

.problem-slide { position: absolute; inset: 0; padding: 72px 112px 82px; }
.problem-heading { text-align: center; }

.problem-heading h2 {
  max-width: 1540px;
  margin: 0 auto;
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.04;
  background-image: linear-gradient(90deg,#111827 0%,#111827 24%,#69727e 36%,#555f6c 42%,#111827 54%,#111827 100%);
  background-position: 0 50%;
  background-repeat: repeat-x;
  background-size: 720px 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brox-title-gradient-wave 5.76s linear infinite;
}

.problem-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  width: 1530px;
  margin: 205px auto 0;
}

.problem-blocks article {
  --problem-card-bg: linear-gradient(145deg,#fff 60%,#fff7f7 100%) padding-box, linear-gradient(135deg,#ff7777 0%,#ff0000 48%,#ff5e5e 100%) border-box;
  --problem-card-shadow: 0 20px 46px rgba(255,0,0,.10), 0 0 36px rgba(255,0,0,.10);
  --problem-card-glow: rgba(255,0,0,.065);
  position: relative;
  display: flex;
  min-height: 390px;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 42px 42px;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: 34px;
  background: var(--problem-card-bg);
  box-shadow: var(--problem-card-shadow);
  color: #111827;
  transform-origin: center;
  will-change: transform, opacity;
  animation: problem-card-tilt 9s cubic-bezier(.77,0,.175,1) infinite both;
}
.problem-blocks article:nth-child(2) { --problem-card-bg: linear-gradient(145deg,#fff 60%,#fffbef 100%) padding-box, linear-gradient(135deg,#ffd56a 0%,#ffb21a 48%,#ff9417 100%) border-box; --problem-card-shadow: 0 20px 46px rgba(255,178,26,.11), 0 0 36px rgba(255,178,26,.11); --problem-card-glow: rgba(255,178,26,.075); animation-delay: -6s; }
.problem-blocks article:nth-child(3) { --problem-card-bg: linear-gradient(145deg,#fff 60%,#f3f8ff 100%) padding-box, linear-gradient(135deg,#79b5ff 0%,#1d6fd1 48%,#0e58bd 100%) border-box; --problem-card-shadow: 0 20px 46px rgba(29,111,209,.11), 0 0 36px rgba(29,111,209,.11); --problem-card-glow: rgba(29,111,209,.075); animation-delay: -3s; }
.problem-blocks article::after { position: absolute; inset: -38% 10% auto; height: 56%; border-radius: 50%; background: var(--problem-card-glow); filter: blur(38px); content: ""; pointer-events: none; animation: problem-card-glow 9s cubic-bezier(.77,0,.175,1) infinite both; }
.problem-blocks article:nth-child(2)::after { animation-delay: -6s; }
.problem-blocks article:nth-child(3)::after { animation-delay: -3s; }
.problem-icon { position: relative; z-index: 1; display: block; width: 42px; height: 42px; }
.problem-blocks svg { display: block; width: 38px; height: 38px; color: #111827; stroke-width: 1.5; animation: problem-card-ink 9s cubic-bezier(.77,0,.175,1) infinite both; }
.problem-blocks article > div { position: relative; z-index: 1; min-height: 150px; }
.problem-blocks h3 { margin: 0 0 10px; color: #111827; font-size: 29px; font-weight: 650; letter-spacing: -.025em; line-height: 1.15; animation: problem-card-ink 9s cubic-bezier(.77,0,.175,1) infinite both; }
.problem-blocks p { max-width: 390px; margin: 0; color: #69727e; font-size: 21px; line-height: 1.48; animation: problem-card-copy 9s cubic-bezier(.77,0,.175,1) infinite both; }
.problem-blocks article:nth-child(2) :is(svg,h3,p) { animation-delay: -6s; }
.problem-blocks article:nth-child(3) :is(svg,h3,p) { animation-delay: -3s; }

@keyframes problem-card-tilt {
  0%, 100% { background: var(--problem-card-bg); box-shadow: var(--problem-card-shadow); transform: perspective(1200px) translateY(0) rotateX(0) rotateY(0) scale(1); filter: blur(0); opacity: 1; }
  8% { background: var(--problem-card-bg); box-shadow: var(--problem-card-shadow); transform: perspective(1200px) translateY(-13px) rotateX(3.2deg) rotateY(-4.8deg) scale(1.027); filter: blur(0); opacity: 1; }
  17% { background: var(--problem-card-bg); box-shadow: var(--problem-card-shadow); transform: perspective(1200px) translateY(-17px) rotateX(-3deg) rotateY(4.6deg) scale(1.038); filter: blur(0); opacity: 1; }
  26% { background: var(--problem-card-bg); box-shadow: var(--problem-card-shadow); transform: perspective(1200px) translateY(-8px) rotateX(1.5deg) rotateY(-2.4deg) scale(1.02); filter: blur(0); opacity: 1; }
  33.333%, 92% { background: linear-gradient(145deg,#f7f8f9 60%,#eff1f3 100%) padding-box, linear-gradient(135deg,#c8cdd3 0%,#aeb5bd 48%,#c8cdd3 100%) border-box; box-shadow: 0 16px 38px rgba(91,99,109,.09); transform: perspective(1200px) translateY(0) rotateX(0) rotateY(0) scale(.985); filter: blur(0); opacity: .82; }
}

@keyframes problem-card-glow {
  0%, 26%, 100% { background: var(--problem-card-glow); }
  33.333%, 92% { background: rgba(142,149,158,.07); }
}

@keyframes problem-card-ink {
  0%, 26%, 100% { color: #111827; }
  33.333%, 92% { color: #737b86; }
}

@keyframes problem-card-copy {
  0%, 26%, 100% { color: #69727e; }
  33.333%, 92% { color: #7c8490; }
}

@media (prefers-reduced-motion: reduce) {
  .problem-heading h2 { color: #111827; background: none; -webkit-text-fill-color: currentColor; animation: none; }
  .problem-blocks article, .problem-blocks article::after, .problem-blocks :is(svg,h3,p) { animation: none; transform: none; }
}