.problem-section {
    position: relative;
    overflow: hidden;
    margin: 90px 0 0;
    padding: 94px 0 116px;
    color: #b5c4dc;
    background: radial-gradient(circle at 50% 60%, rgba(22, 107, 254, .14), transparent 48%), #0c162e;
}

.problem-layout { display: block; }
.problem-copy { max-width: 680px; margin: 0 auto 56px; text-align: center; opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s ease; }
.problem-section.is-visible .problem-copy { opacity: 1; transform: none; }
.problem-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; color: #8ab4ff; font-size: 11px; font-weight: 700; letter-spacing: .22em; }
.problem-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.problem-copy h2 { margin-bottom: 18px; color: #f8fafc; font-size: clamp(34px, 4vw, 48px); letter-spacing: -.045em; line-height: 1.13; }
.problem-copy p { max-width: 650px; margin: 0 auto; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.75; }

.problem-visual { position: relative; width: min(100%, 980px); max-width: none; height: 600px; margin: 0 auto; }
.problem-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.problem-links path { fill: none; stroke: #4f8cff; stroke-width: 1.5; stroke-dasharray: 2 4; stroke-dashoffset: 900; opacity: .75; transition: stroke-dashoffset 1.9s ease .2s; }
.problem-section.is-visible .problem-links path:not(.problem-flow) { stroke-dashoffset: 0; }
.problem-links .problem-flow { stroke: #b9d3ff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 9 19; stroke-dashoffset: 0; opacity: 0; transition: opacity .4s ease 1.7s; }
.problem-section.is-visible .problem-flow { opacity: .95; animation: problem-flow 1.15s linear 1.7s infinite; }
.problem-links circle { fill: #4f8cff; transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform .35s ease .8s; }
.problem-section.is-visible .problem-links circle { transform: scale(1); }

.problem-hub { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 258px; height: 172px; padding: 26px 18px 16px; transform: translate(-50%, -50%) scale(.94); border: 1px solid rgba(138, 180, 255, .7); border-radius: 22px; background: linear-gradient(145deg, #fff, #f1f6ff); color: #15233c; box-shadow: 0 20px 70px rgba(0, 0, 0, .28), 0 0 44px rgba(22, 107, 254, .2); opacity: 0; transition: opacity .7s ease .15s, transform .7s cubic-bezier(.2, .8, .2, 1) .15s; }
.problem-section.is-visible .problem-hub { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.problem-hub-window { position: absolute; top: 13px; left: 16px; display: flex; gap: 5px; }
.problem-hub-window i { width: 6px; height: 6px; border-radius: 50%; background: #ff7365; }
.problem-hub-window i:nth-child(2) { background: #ffbf4f; }
.problem-hub-window i:nth-child(3) { background: #34c98d; }
.problem-hub-brand { display: flex; align-items: center; gap: 10px; color: #0c162e; font-size: 30px; font-weight: 800; letter-spacing: -.05em; }
.problem-hub-brand img { width: 54px; height: 54px; object-fit: contain; }
.problem-hub small { margin-top: 7px; color: #70809b; font-size: 11px; letter-spacing: .02em; }

.problem-card { position: absolute; z-index: 1; right: auto; left: auto; width: 205px; opacity: 0; transform: translateY(20px) scale(.96); transition: opacity .65s ease, transform .65s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--card-delay); }
.problem-section.is-visible .problem-card { opacity: 1; transform: none; }
.problem-section.is-visible .problem-card:hover { transition-delay: 0ms; }
.problem-card-inner { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; column-gap: 10px; min-height: 92px; padding: 13px 34px 13px 13px; border: 1px solid #dae5f6; border-radius: 19px; background: #fff; box-shadow: 0 14px 35px rgba(0, 0, 0, .2), 0 0 20px rgba(22, 107, 254, .06); }
.problem-section.is-visible .problem-card-inner { animation: problem-glow 5s ease-in-out infinite; animation-delay: var(--float-delay); }
.problem-section.is-visible .problem-card:hover .problem-card-inner { border-color: #8ab4ff; box-shadow: 0 16px 40px rgba(0, 0, 0, .22), 0 0 24px rgba(79, 140, 255, .25); animation-play-state: paused; }
.problem-card-icon { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #e9f5ff; color: #1682d5; }
.problem-card-icon svg { width: 20px; height: 20px; }
.problem-card-icon--chat { background: #e6f8f3; color: #00a886; }
.problem-card-icon--friends { background: #f1ecff; color: #8258ef; }
.problem-card-icon--groups { background: #e8f1ff; color: #5279ed; }
.problem-card-icon--members { background: #e9f8f5; color: #249e89; }
.problem-card-icon--search { background: #eef2ff; color: #6277d9; }
.problem-card-icon--campaigns { background: #fff3e4; color: #ee9c20; }
.problem-card-icon--tasks { background: #fff0e9; color: #f17750; }
.problem-card strong { align-self: end; color: #101c35; font-size: 13px; font-weight: 700; line-height: 1.25; }
.problem-card small { align-self: start; min-width: 0; margin-top: 4px; color: #70809b; font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
.problem-connected { position: absolute; top: 50%; right: 10px; display: grid; place-items: center; width: 19px; height: 19px; transform: translateY(-50%); border: 1px solid #a9dfc7; border-radius: 50%; background: #e9f9f1; color: #138d65; font-size: 12px; font-weight: 800; }
.problem-card--chat { top: 3%; left: 1%; }
.problem-card--groups { top: 30%; left: 1%; }
.problem-card--members { top: 57%; left: 1%; }
.problem-card--tasks { top: 84%; left: 1%; }
.problem-card--accounts { top: 3%; right: 1%; }
.problem-card--friends { top: 30%; right: 1%; }
.problem-card--search { top: 57%; right: 1%; }
.problem-card--campaigns { top: 84%; right: 1%; }

@keyframes problem-glow { 0%, 100% { box-shadow: 0 14px 35px rgba(0, 0, 0, .2), 0 0 20px rgba(22, 107, 254, .06); } 50% { box-shadow: 0 14px 35px rgba(0, 0, 0, .2), 0 0 28px rgba(22, 107, 254, .18); } }
@keyframes problem-flow { to { stroke-dashoffset: -28; } }

@media (max-width: 800px) and (min-width: 641px) {
    .problem-visual { height: 560px; }
    .problem-card { width: 175px; }
    .problem-card-inner { min-height: 82px; padding: 10px 29px 10px 9px; column-gap: 7px; }
    .problem-card-icon { width: 31px; height: 31px; }
    .problem-card strong { font-size: 11px; }
    .problem-card small { font-size: 9px; }
    .problem-hub { width: 210px; height: 150px; }
}

@media (max-width: 640px) {
    .problem-section { margin: 66px 0 0; padding: 68px 0 78px; }
    .problem-copy { margin-bottom: 42px; }
    .problem-copy h2 { margin-bottom: 16px; }
    .problem-copy p { line-height: 1.65; }
    .problem-visual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; height: auto; padding-top: 180px; }
    .problem-visual::before { content: ''; position: absolute; top: 148px; bottom: 24px; left: 50%; width: 2px; background: repeating-linear-gradient(to top, #8ab4ff 0 8px, rgba(138, 180, 255, .24) 8px 20px); }
    .problem-section.is-visible .problem-visual::before { animation: problem-mobile-flow 1s linear infinite; }
    .problem-links { display: none; }
    .problem-hub { top: 0; width: min(250px, 76%); height: 146px; transform: translateX(-50%) scale(.94); }
    .problem-section.is-visible .problem-hub { transform: translateX(-50%) scale(1); }
    .problem-hub-brand { font-size: 25px; }
    .problem-hub-brand img { width: 45px; height: 45px; }
    .problem-card { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; min-width: 0; }
    .problem-card::before { content: ''; position: absolute; top: 50%; width: 6px; border-top: 1px dashed rgba(138, 180, 255, .7); }
    .problem-card--chat::before, .problem-card--groups::before, .problem-card--members::before, .problem-card--tasks::before { right: -6px; }
    .problem-card--accounts::before, .problem-card--friends::before, .problem-card--search::before, .problem-card--campaigns::before { left: -6px; }
    .problem-card--chat { grid-column: 1; grid-row: 1; }
    .problem-card--accounts { grid-column: 2; grid-row: 1; }
    .problem-card--groups { grid-column: 1; grid-row: 2; }
    .problem-card--friends { grid-column: 2; grid-row: 2; }
    .problem-card--members { grid-column: 1; grid-row: 3; }
    .problem-card--search { grid-column: 2; grid-row: 3; }
    .problem-card--tasks { grid-column: 1; grid-row: 4; }
    .problem-card--campaigns { grid-column: 2; grid-row: 4; }
    .problem-card-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-height: 120px; padding: 13px 11px; }
    .problem-card-icon { flex: none; width: 31px; height: 31px; }
    .problem-card strong, .problem-card small { align-self: auto; margin: 0; }
    .problem-connected { top: 19px; right: 9px; transform: none; }
}

@keyframes problem-mobile-flow { to { background-position-y: -20px; } }

@media (prefers-reduced-motion: reduce) {
    .problem-copy, .problem-hub, .problem-card, .problem-links circle { opacity: 1; transition: none; }
    .problem-copy, .problem-card { transform: none; }
    .problem-links path { stroke-dashoffset: 0; transition: none; }
    .problem-section.is-visible .problem-flow { opacity: 0; animation: none; }
    .problem-section.is-visible .problem-visual::before { animation: none; }
    .problem-section.is-visible .problem-card-inner { animation: none; }
}