/* v22 · FAQ: questions as cards with their own icons, a «Не нашли ответ?» card beside them */
.faq22 { --ink: #0F1923; --red: #E31837; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; align-items: start; max-width: 1120px; margin: 0 auto; }
.faq22 .faq__list { max-width: none; margin: 0; counter-reset: faq; }
.faq22-side { position: sticky; top: 96px; display: grid; justify-items: start; gap: 10px; padding: 28px; border-radius: 24px; background: var(--ink); color: #FBF6EE; box-shadow: 0 30px 60px -36px rgba(15, 25, 35, .6); }
.faq22-side h3 { font-family: 'Unbounded', system-ui, sans-serif; font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.03em; }
.faq22-side p { font-size: 15px; line-height: 1.6; color: rgba(251, 246, 238, .75); }
.faq22-side .j17-cta { margin-top: 8px; }
.faq22-chat { width: 100%; max-width: 300px; height: auto; margin-bottom: 6px; overflow: visible; }
.fc-me { fill: #FBF6EE; } .fc-us { fill: var(--red); } .fc-l { fill: rgba(255, 255, 255, .7); }
.fc-t { font: 700 20px 'Unbounded', system-ui, sans-serif; text-anchor: middle; fill: var(--ink); letter-spacing: .12em; }
.fc-ok { fill: #16A34A; } .fc-okp { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fc-typing circle { fill: rgba(251, 246, 238, .45); }
.faq22-chat * { transform-box: fill-box; }
.fc-b--1 { transform-origin: 0% 100%; } .fc-b--2 { transform-origin: 100% 100%; } .fc-b--3 { transform-origin: 0% 100%; }
.faq22-side .fc-b { animation: fcBub 7s cubic-bezier(.3, 1.5, .5, 1) infinite backwards; }
.faq22-side .fc-b--2 { animation-delay: 1.2s; } .faq22-side .fc-b--3 { animation-delay: 2.4s; }
.faq22-side .fc-typing circle { animation: fcType 1s ease-in-out infinite; }
.faq22-side .fc-typing circle:nth-child(2) { animation-delay: .15s; } .faq22-side .fc-typing circle:nth-child(3) { animation-delay: .3s; }
@keyframes fcBub { 0% { scale: 0; opacity: 0; } 8%, 78% { scale: 1; opacity: 1; } 88%, 100% { scale: 1; opacity: 0; } }
@keyframes fcType { 0%, 100% { translate: 0 0; opacity: .5; } 40% { translate: 0 -5px; opacity: 1; } }

.faq22 .faq__item { margin-bottom: 10px; border: 0; border-radius: 18px; box-shadow: 0 1px 0 rgba(15, 25, 35, .04), 0 14px 30px -24px rgba(15, 25, 35, .4); transition: box-shadow .3s, translate .3s; }
.faq22 .faq__item:hover { translate: 0 -2px; box-shadow: 0 20px 40px -26px rgba(15, 25, 35, .45); }
.faq22 .faq__item--open { box-shadow: 0 0 0 2px #FECDD3, 0 24px 48px -30px rgba(227, 24, 55, .45); }
.faq22 .faq__question { gap: 14px; padding: 16px 18px; font-size: 16.5px; line-height: 1.35; }
.faq22-ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #F9FAFB; transition: background .3s; }
.faq__item--open .faq22-ic { background: #FFF1F2; }
.faq22-ic svg { width: 40px; height: 40px; overflow: visible; }
.faq22-q { flex: 1; min-width: 0; }
.faq22 .faq__arrow { display: grid; place-items: center; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: #F3F4F6; color: var(--ink); transition: rotate .3s, background .3s, color .3s; }
.faq22 .faq__item--open .faq__arrow { transform: none; rotate: 180deg; background: var(--red); color: #fff; }
.faq22 .faq__answer p { padding: 0 20px 20px 84px; font-size: 15.5px; color: #374151; }
.faq22 .faq__item--open .faq__answer p { animation: fqIn .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes fqIn { from { opacity: 0; translate: 0 -6px; } }
/* icon kit */
.faq22-ic * { transform-box: fill-box; transform-origin: center; }
.f-ink { fill: var(--ink); } .f-red { fill: var(--red); } .f-amber { fill: #F5C451; } .f-skin { fill: #F2C7A5; stroke: var(--ink); stroke-width: 1.6; }
.f-paper { fill: #fff; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.f-roof { fill: none; stroke: var(--red); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.f-win { fill: #F5C451; stroke: var(--ink); stroke-width: 1.6; } .f-door { fill: #2F5D50; stroke: var(--ink); stroke-width: 1.6; }
.f-path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.f-t { font: 700 11px 'Unbounded', system-ui, sans-serif; text-anchor: middle; fill: var(--ink); } .f-t--w { fill: #fff; } .f-t--s { font-size: 10px; }
.faq__item:hover .faq22-ic svg, .faq__item--open .faq22-ic svg { animation: fqWiggle .6s ease; }
@keyframes fqWiggle { 0%, 100% { rotate: 0deg; } 30% { rotate: -8deg; } 60% { rotate: 6deg; } }
@media (max-width: 900px) {
    .faq22 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .faq22-side { position: relative; top: 0; order: 2; padding: 22px 18px; border-radius: 20px; }
    .faq22-side .j17-cta { width: 100%; justify-content: center; }
    .faq22 .faq__question { padding: 12px 12px 12px 12px; font-size: 15.5px; gap: 12px; }
    .faq22-ic { width: 44px; height: 44px; }
    .faq22-ic svg { width: 34px; height: 34px; }
    .faq22 .faq__answer p { padding: 0 16px 16px 16px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .faq22 *, .faq22-side * { animation: none !important; } }