/* ZeeFrames — quiz "Узнайте, какой сайт подойдёт вашему бизнесу" (AMDC content).
   v5 (01.10.2026): one more block of zeeframes.com. It is the home page FAQ section
   ("Questions? We've Got Answers") with the quiz in it, same size and values:
   - section: --color-black-300 #0B0B0B, 80px 0 (32px on phones), container 1400 / 80 → 60 → 40 → 16;
   - left column: max 409px, the uppercase lime eyebrow 14px, h2 36/40 500 (margin 32 0 12),
     text 16/21 #D5D5D5, then a row at margin-top 32 where the site has the pill and the Clutch widget:
     here the six-step progress in the widget's manner and "Назад";
   - right column: .accordion cards, gap 16: padding 20, radius 12, 1px #3C3C3C, white 4% fill,
     backdrop blur 20, title 16px 500; .accordion-icon 24px, radius 6, #2B2A2A / #373636, the plus
     stroked #6D6D6D; the open card and its icon in lime. The question is the open card, the answers
     are the closed ones; a picked answer opens like an accordion (lime border, lime icon, check);
   - result: the open card with the site type, .accordion-body text 16/24, and .btn-component
     .btn-primary with the .btn-animate-swap hover (text swaps, fill goes, border and text turn lime).
   At 1440 the section is 636px tall, as the FAQ. Classes are prefixed .zqz-. Behaviour: quiz.js. */

.zqz {
    --zqz-primary: var(--color-primary, #F3FE00);
    --zqz-white: var(--color-white, #FFFFFF);
    --zqz-bg: var(--color-black-300, #0B0B0B);
    --zqz-ink: var(--color-black-200, #0D0D0D);
    --zqz-text: var(--color-gray-495, #D5D5D5);
    --zqz-mute: #6D6D6D;
    --zqz-line: var(--color-black-400, #3C3C3C);
    --zqz-fill: var(--color-white-04, rgba(255, 255, 255, 0.04));
    --zqz-icon: #2B2A2A;
    --zqz-icon-line: #373636;

    position: relative;
    padding: 80px 0;
    background-color: var(--zqz-bg);
    color: var(--zqz-white);
    font-family: "Inter Tight", sans-serif;
    font-size: 16px;
    line-height: normal;
}

.zqz *, .zqz *::before, .zqz *::after { box-sizing: border-box; margin: 0; padding: 0; }
.zqz :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
.zqz :where(ol, ul) { list-style: none; }
.zqz [hidden] { display: none !important; }
.zqz svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.zqz-container { max-width: 1400px; margin: 0 auto; padding: 0 var(--zqz-gutter, 80px); }
.zqz-layout { display: flex; column-gap: 48px; row-gap: 32px; }

/* ── left: the FAQ intro ── */
.zqz-intro { width: 100%; max-width: 409px; flex-shrink: 0; }
.zqz-eyebrow { font-size: 14px; text-transform: uppercase; color: var(--zqz-primary); }
.zqz-title { margin: 32px 0 12px; font-size: 36px; line-height: 40px; font-weight: 500; text-wrap: balance; }
.zqz-desc { font-size: 16px; line-height: 21px; color: var(--zqz-text); }

.zqz-meta { display: flex; align-items: center; gap: 32px; margin-top: 32px; }
.zqz-progress { display: flex; flex-direction: column; gap: 6px; }
.zqz-dots { display: flex; gap: 2px; margin-left: -4px; }
.zqz-dot { display: block; width: 22px; height: 22px; padding: 4px !important; }
.zqz-dot::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--zqz-icon-line);
    background-color: var(--zqz-icon);
    transition: background-color 0.25s, border-color 0.25s;
}
.zqz-dot.is-done::before { background-color: var(--zqz-primary); border-color: var(--zqz-primary); }
.zqz-dot.is-active::before { border-color: var(--zqz-primary); }
.zqz-dot:hover:not(:disabled)::before { border-color: var(--zqz-primary); }
.zqz-dot:disabled { cursor: default; }
.zqz-count { font-size: 13px; line-height: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zqz-mute); }

.zqz-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 20px;
    color: var(--zqz-text) !important;
    transition: color 0.3s, opacity 0.3s;
}
.zqz-back svg { width: 16px; height: 16px; }
.zqz-back:hover:not(:disabled) { color: var(--zqz-primary) !important; }
.zqz-back:disabled { opacity: 0; pointer-events: none; }

/* ── right: the accordions ── */
.zqz-steps { flex-grow: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.zqz-step {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
}
.zqz-step.is-active { opacity: 1; visibility: visible; transition: opacity 0.3s ease-in-out, visibility 0s; }
.zqz-final:not(.is-active) { visibility: hidden; }
.zqz-opts { display: flex; flex-direction: column; gap: 16px; }

.zqz-card, .zqz-opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px !important;
    border-radius: 12px;
    border: 1px solid var(--zqz-line) !important;
    background-color: var(--zqz-fill) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: var(--zqz-white) !important;
    transition: border-color 0.3s ease-in-out;
}
.zqz-card--q, .zqz-card--result, .zqz-opt:hover, .zqz-opt[aria-pressed="true"] { border-color: var(--zqz-primary) !important; }

.zqz-q, .zqz-card-text { flex-grow: 1; min-width: 0; font-size: 16px; line-height: normal; font-weight: 500; }
.zqz-q:focus, .zqz-result:focus { outline: none; }
.zqz-q-sub { font-weight: 400; color: var(--zqz-text); }
.zqz-num { flex-shrink: 0; font-size: 14px; line-height: 24px; color: var(--zqz-mute); }

.zqz-icon {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--zqz-icon-line);
    background-color: var(--zqz-icon);
    transition: background-color 0.25s, border-color 0.25s;
}
.zqz-icon svg { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; transition: 0.25s; }
.zqz-plus { color: var(--zqz-mute); transform: translate(-50%, -50%) rotate(0deg); }
.zqz-check { color: var(--zqz-ink); opacity: 0; transform: translate(-50%, -50%) rotate(-90deg); }
.zqz-opt[aria-pressed="true"] .zqz-icon, .zqz-icon--on { background-color: var(--zqz-primary); border-color: var(--zqz-primary); }
.zqz-opt[aria-pressed="true"] .zqz-plus { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.zqz-opt[aria-pressed="true"] .zqz-check, .zqz-icon--on .zqz-check { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }

/* "Дальше" of the multi-choice question: .btn-primary, down to the 24px of the card row */
.zqz-next {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 12px !important;
    border-radius: 99999px;
    border: 1px solid var(--zqz-primary) !important;
    background-color: var(--zqz-primary) !important;
    color: var(--zqz-ink) !important;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    transition: background-color 0.6s, color 0.6s;
}
.zqz-next svg { width: 14px; height: 14px; }
.zqz-next:hover { background-color: transparent !important; color: var(--zqz-primary) !important; }

/* ── result ── */
.zqz-card--result { flex-direction: column; align-items: stretch; gap: 0; }
.zqz-result-head { display: flex; align-items: flex-start; gap: 16px; }
.zqz-result { flex-grow: 1; font-size: 24px; line-height: 32px; font-weight: 500; }
.zqz-result-head .zqz-icon { margin-top: 4px; }
.zqz-text { padding-top: 10px; font-size: 16px; line-height: 24px; color: var(--zqz-text); }
.zqz-text--you { color: var(--zqz-white); white-space: pre-line; }   /* one line per answer */
.zqz-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 24px; }

.zqz-btn {                                      /* .btn-component.btn-primary.btn-animate-swap */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 24px;
    border-radius: 99999px;
    border: 1px solid var(--zqz-primary);
    background-color: var(--zqz-primary);
    color: var(--zqz-ink);
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    text-decoration: none;
    overflow: hidden;
    transition: background-color 0.6s, border-color 0.6s, color 0.6s;
}
.zqz-btn svg { width: 20px; height: 20px; }
.zqz-btn-label, .zqz-btn svg, .zqz-btn-swap { transition: opacity 0.3s ease-in-out; }
.zqz-btn-swap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; }
.zqz-btn:hover { background-color: transparent; color: var(--zqz-primary); }
.zqz-btn:hover .zqz-btn-label, .zqz-btn:hover svg { opacity: 0; }
.zqz-btn:hover .zqz-btn-swap { opacity: 1; }

.zqz-again { font-size: 14px; line-height: 20px; color: var(--zqz-text) !important; transition: color 0.3s; }
.zqz-again:hover { color: var(--zqz-primary) !important; }

/* focus in the site's lime */
.zqz :focus-visible { outline: 2px solid var(--zqz-primary); outline-offset: 3px; }
.zqz-opt:focus-visible { outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .zqz *, .zqz *::before, .zqz *::after { transition: none !important; animation: none !important; }
}

/* ── the site's steps ── */
@media (max-width: 1204px) { .zqz { --zqz-gutter: 60px; } }
@media (max-width: 991px) {
    .zqz { --zqz-gutter: 40px; }
    .zqz-intro { max-width: 320px; }
    .zqz-title { font-size: 30px; line-height: 36px; }
}
@media (max-width: 768px) {                     /* .md-flex-wrap */
    .zqz-layout { flex-wrap: wrap; }
    .zqz-intro { max-width: none; }
    .zqz-step:not(.is-active) { display: none; }
}
@media (max-width: 575px) {                     /* .sm_py_32, .sm_fs_28 */
    .zqz { --zqz-gutter: 16px; padding: 32px 0; }
    .zqz-title { margin-top: 24px; font-size: 28px; line-height: 34px; }
    .zqz-meta { margin-top: 24px; }
    .zqz-card, .zqz-opt { padding: 16px !important; }
    .zqz-card--q { flex-wrap: wrap; row-gap: 12px; }
    .zqz-card--q .zqz-q { flex-basis: 100%; order: -1; }
    .zqz-result { font-size: 20px; line-height: 28px; }
    .zqz-btn { padding: 10px 16px; white-space: normal; text-align: center; }
    .zqz-cta .zqz-btn { width: 100%; }
    .zqz-cta { justify-content: center; }
}