.c1-problem {
  --problem-side: clamp(90px,9.22vw,118px);
  width: min(1440px,100%);
  min-height: 900px;
  margin-inline: auto;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: #06040c;
  font-family: Inter,ui-sans-serif,system-ui,sans-serif;
}

.c1-problem-atmosphere,.c1-problem-atmosphere > span { position: absolute; inset: 0; pointer-events: none; }
.c1-problem-atmosphere { z-index: -2; overflow: hidden; background: linear-gradient(180deg,#06040c 0%,#08050e 16%,#0b0710 52%,#06040c 100%); }
.c1-problem-atmosphere::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%,rgba(224,90,42,.1),transparent 31%),radial-gradient(ellipse at 11% 48%,rgba(104,13,111,.32),transparent 34%),radial-gradient(ellipse at 89% 62%,rgba(224,90,42,.18),transparent 28%); mask-image: linear-gradient(to bottom,transparent 0,#000 100px); }
.c1-problem-atmosphere::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(6,4,12,.12),rgba(6,4,12,0) 44%,rgba(6,4,12,.72) 94%,#06040c); }
.c1-problem-glow { width: 44%; height: 50%; inset: 28% auto auto -20% !important; border-radius: 50%; background: rgba(171,53,156,.17); filter: blur(100px); }
.c1-problem-lines { inset: 9% -8% 6% 64% !important; opacity: .18; background: repeating-linear-gradient(105deg,transparent 0 22px,rgba(255,255,255,.15) 23px,transparent 24px 44px); mask-image: linear-gradient(90deg,transparent,#000 28%,#000 70%,transparent); transform: skewX(-8deg); }

.c1-problem-header { width: min(760px,calc(100% - (var(--problem-side) * 2))); margin: 50px auto 36px; text-align: center; }
.c1-problem-kicker { margin: 0 0 15px; color: #f87549; font-size: 10px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.c1-problem-heading > div { display: flex; align-items: center; justify-content: center; gap: 16px; }
.c1-problem-heading i { width: 68px; height: 32px; flex: 0 0 68px; background: linear-gradient(90deg,transparent 0%,rgba(171,53,156,.18) 30%,rgba(216,58,170,.84) 88%,rgba(248,117,73,.48) 100%) center/100% 2px no-repeat; filter: drop-shadow(0 0 7px rgba(216,58,170,.34)); }
.c1-problem-heading i:last-child { background-image: linear-gradient(90deg,rgba(248,117,73,.48) 0%,rgba(216,58,170,.84) 12%,rgba(171,53,156,.18) 70%,transparent 100%); }
.c1-problem-heading h2 { max-width: 592px; margin: 0; font: 800 38px/1.14 Manrope,sans-serif; letter-spacing: -.025em; text-wrap: balance; overflow-wrap: normal; }
.c1-problem-heading > p:last-child { max-width: 640px; margin: 16px auto 0; color: rgba(255,255,255,.58); font: 400 15px/1.55 Manrope,sans-serif; }

.c1-problem-grid { width: min(1000px,calc(100% - (var(--problem-side) * 2))); margin: 0 auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.c1-problem-grid article { min-height: 148px; padding: 22px 24px; display: grid; grid-template-columns: 38px 1fr auto; gap: 16px; align-items: start; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: linear-gradient(118deg,rgba(62,5,77,.74) -8%,rgba(82,21,61,.42) 48%,rgba(224,90,42,.26) 118%); box-shadow: inset 0 1px rgba(255,255,255,.05),0 20px 60px rgba(0,0,0,.22); }
.c1-problem-grid article::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(#8d11a3,#d536a9,#f87549); box-shadow: 2px 0 16px rgba(225,65,211,.45); }
.c1-problem-grid article::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg,rgba(213,65,169,.45),rgba(248,117,73,.5),transparent); }
.c1-problem-number { color: #f87549; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.c1-problem-grid h3 { margin: 0; font: 700 22px/1.15 Manrope,sans-serif; }
.c1-problem-grid p { margin: 11px 0 0; color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.5; }
.c1-problem-grid b { align-self: center; color: #fff; font-size: 10px; line-height: 1.35; letter-spacing: .1em; text-align: right; text-transform: uppercase; }

.c1-problem-verdict { width: min(980px,calc(100% - (var(--problem-side) * 2))); margin: 26px auto 0; padding: 22px 30px; display: grid; grid-template-columns: .42fr 1.58fr; gap: 28px; align-items: center; border: 1px solid rgba(248,117,73,.35); background: rgba(7,5,10,.62); box-shadow: 0 18px 60px rgba(0,0,0,.24),0 0 45px rgba(224,90,42,.08); }
.c1-problem-verdict span,.c1-problem-next span { color: #f87549; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.c1-problem-verdict strong { font: 600 17px/1.42 Manrope,sans-serif; }
.c1-problem-scale { width:min(900px,calc(100% - (var(--problem-side) * 2))); margin:24px auto 0; color:rgba(255,255,255,.66); text-align:center; font:500 15px/1.55 Manrope,sans-serif; }
.c1-problem-quote { width:min(820px,calc(100% - (var(--problem-side) * 2))); margin:24px auto 34px; padding:20px 28px; border:1px solid rgba(248,117,73,.3); border-left:3px solid #f87549; border-radius:12px; background:linear-gradient(110deg,rgba(82,21,61,.32),rgba(224,90,42,.12)); box-shadow:0 16px 44px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.04); color:#fff; text-align:center; font:600 16px/1.45 Manrope,sans-serif; }
.c1-problem-next { width: min(920px,calc(100% - (var(--problem-side) * 2))); min-height: 66px; margin: 24px auto 34px; padding: 14px 24px; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; border-top: 1px solid rgba(248,117,73,.24); border-bottom: 1px solid rgba(255,255,255,.08); text-align: center; }
.c1-problem-next strong { font: 600 16px/1.35 Manrope,sans-serif; }
.c1-problem-next i { color: #f87549; font-style: normal; font-size: 20px; }

@media (min-width:981px) and (max-height:850px) {
  .c1-problem { min-height: 780px; }
  .c1-problem-header { margin-top: 40px; margin-bottom: 28px; }
  .c1-problem-heading h2 { max-width: 680px; font-size: 38px; }
  .c1-problem-heading > p:last-child { margin-top: 16px; font-size: 14px; line-height: 1.55; }
  .c1-problem-grid { gap: 14px; }
  .c1-problem-grid article { min-height: 128px; padding: 18px 20px; }
  .c1-problem-grid h3 { font-size: 19px; }
  .c1-problem-grid p { margin-top: 9px; font-size: 12px; line-height: 1.5; }
  .c1-problem-verdict { margin-top: 20px; padding: 17px 24px; }
  .c1-problem-verdict strong { font-size: 14px; line-height: 1.45; }
  .c1-problem-scale { margin-top: 17px; font-size: 13px; line-height: 1.5; }
  .c1-problem-quote { margin-top:17px; margin-bottom:22px; padding:15px 20px; font-size:14px; }
  .c1-problem-next { min-height: 56px; margin-top: 17px; margin-bottom: 22px; padding: 12px 20px; }
  .c1-problem-next strong { font-size: 14px; }
}

@media (min-width:681px) and (max-width:980px) {
  .c1-problem { --problem-side: 44px; min-height: 850px; }
  .c1-problem-header { width: min(720px,calc(100% - (var(--problem-side) * 2))); margin-top: 32px; }
  .c1-problem-heading > div { gap: 12px; }
  .c1-problem-heading i { width: 48px; height: 26px; flex-basis: 48px; }
  .c1-problem-heading h2 { max-width: 590px; font-size: clamp(34px,4.5vw,42px); }
  .c1-problem-heading > p:last-child { font-size: 14px; }
  .c1-problem-grid article { min-height: 174px; grid-template-columns: 28px 1fr; }
  .c1-problem-grid article b { grid-column: 2; }
  .c1-problem-next { margin-bottom: 36px; }
}

@media (max-width:680px) {
  .c1-problem { --problem-side: 20px; min-height: 0; }
  .c1-problem-header { width: calc(100% - 40px); margin: 32px auto 28px; text-align: center; }
  .c1-problem-kicker { margin-bottom: 13px; font-size: 9px; }
  .c1-problem-heading > div { gap: 7px; }
  .c1-problem-heading i { width: 32px; height: 22px; flex-basis: 32px; }
  .c1-problem-heading h2 { max-width: 270px; font-size: 28px; line-height: 1.12; }
  .c1-problem-heading > p:last-child { margin-top: 18px; font-size: 15px; line-height: 1.5; }
  .c1-problem-grid { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 12px; }
  .c1-problem-grid article { min-height: 0; padding: 22px 18px; grid-template-columns: 1fr; gap: 10px; text-align: center; }
  .c1-problem-number { justify-self: center; }
  .c1-problem-grid h3 { font-size: 19px; }
  .c1-problem-grid p { font-size: 13px; }
  .c1-problem-grid article b { grid-column: auto; text-align:center; }
  .c1-problem-verdict { width: calc(100% - 40px); margin-top: 22px; padding: 21px; grid-template-columns: 1fr; gap: 10px; text-align: center; }
  .c1-problem-verdict strong { font-size: 16px; }
  .c1-problem-scale { width:calc(100% - 40px); margin-top:20px; text-align:center; font-size:14px; }
  .c1-problem-quote { width:calc(100% - 40px); margin:24px auto 32px; padding:17px 15px; border-left-width:2px; font-size:14px; }
  .c1-problem-next { width: calc(100% - 40px); min-height: 86px; margin: 30px auto 32px; padding: 14px 10px; grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .c1-problem-next span { grid-column: 1/-1; }
  .c1-problem-next strong { font-size: 14px; }
  .c1-problem-next i { justify-self: center; }
  .c1-problem-lines { opacity: .1; }
}

@media (max-width:380px) {
  .c1-problem-heading i { width: 28px; flex-basis: 28px; }
  .c1-problem-heading h2 { font-size: 27px; }
}

@media (prefers-reduced-motion:reduce) {
  .c1-problem *, .c1-problem *::before, .c1-problem *::after { transition-duration: .01ms !important; }
}