@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Google+Sans:wght@400;500;600&display=swap');

/* ---------- reset ---------- */
.xfaq-section *,
.xfaq-section *::before,
.xfaq-section *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ---------- section — 1280 px centred ---------- */
.xfaq-section {
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    padding: 60px 0;
    /* no overflow on desktop — blobs bleed freely in all directions */
}

.xfaq-container {
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

/* ---------- background blobs ---------- */
.xfaq-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.xfaq-blob-1 {
    width: 134px;
    height: 134px;
    top: 80px;
    left: 774px;
    background: #9A174D;
    filter: blur(185px);
    opacity: 1;
}

.xfaq-blob-2 {
    width: 188px;
    height: 188px;
    top: 211px;
    left: -44px;
    background: #2D9BD9;
    filter: blur(185px);
    opacity: 1;
}

.xfaq-blob-3 {
    width: 196px;
    height: 196px;
    top: 361px;
    left: 1178px;
    background: #73B4D9;
    filter: blur(152px);
    opacity: 1;
}

/* ---------- title ---------- */
.xfaq-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0;
    color: #191919;
    margin-bottom: 18px;
}

/* ---------- description ---------- */
.xfaq-description {
    font-family: 'Google Sans', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 100%;
    letter-spacing: 0;
    color: #778AA9;
    margin-bottom: 48px;
}

/* ---------- accordion ---------- */
.xfaq-accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

/* Background lives on the ITEM, not on the button or answer.
   This is the only way to have a seamless card with zero lines
   or corner artefacts between the question and answer areas. */
.xfaq-item {
    border-radius: 25px;
    overflow: hidden;
    background: #EAEAEA1A;
    /* lighter glass border + soft shadow to match the Figma look */
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 8px 24px rgba(17, 25, 46, 0.06);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.xfaq-item.xfaq-active {
    background: rgba(53, 182, 255, 0.10);
    border-color: transparent;
}

/* ---------- question button — fully transparent, no own radius ---------- */
.xfaq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 54px;
    padding: 14px 29px;
    background: transparent;
    border: none;
    border-radius: 0;
    outline: none;
    cursor: pointer;
    text-align: left;
    gap: 16px;
    -webkit-tap-highlight-color: transparent;
}

.xfaq-question:hover {
    background: rgba(255, 255, 255, 0.06);
}

.xfaq-item.xfaq-active .xfaq-question:hover {
    background: transparent;
}

/* ---------- question text ---------- */
.xfaq-question-text {
    font-family: 'Google Sans', 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 100%;
    letter-spacing: 0;
    color: #778AA9;
    flex: 1;
    /* margin-left: -10px; */
}

.xfaq-item.xfaq-active .xfaq-question-text {
    color: #1a2e4a;
    font-weight: 700;
}

/* Active state: circle border and minus icon → #191919 */
.xfaq-item.xfaq-active .xfaq-icon svg path {
    stroke: #191919 !important;
}

/* ---------- icon ---------- */
.xfaq-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xfaq-icon-plus  { display: block; }
.xfaq-icon-minus { display: none;  }

.xfaq-item.xfaq-active .xfaq-icon-plus  { display: none;  }
.xfaq-item.xfaq-active .xfaq-icon-minus { display: block; }

/* ---------- answer — transparent, parent provides colour ---------- */
.xfaq-answer {
    max-height: 0;
    overflow: hidden;
    background: transparent;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.xfaq-answer-inner {
    /* No negative margin-top: the parent .xfaq-answer is overflow:hidden (for the
       max-height animation), so pulling the inner up clipped the top of the first
       answer line. Spacing to the question is handled by padding instead. */
    margin-top: 0;
    padding: 4px 29px 24px;
    max-width: 80%;
    font-family: 'Google Sans', 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.65;
    color: #4a6080;
}

.xfaq-answer-inner p { margin-bottom: 10px; }
.xfaq-answer-inner p:last-child { margin-bottom: 0; }

.xfaq-item.xfaq-active .xfaq-answer {
    max-height: 1200px;
}

/* ---------- empty ---------- */
.xfaq-no-items {
    font-family: 'Google Sans', sans-serif;
    color: #778AA9;
    font-size: 18px;
    text-align: center;
    padding: 40px 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Up to 1024px - Tablet */
@media (max-width: 1024px) {
    .xfaq-section       { overflow-x: clip; overflow-y: visible; }
    .xfaq-container     { padding: 0 40px; }
    .xfaq-title         { font-size: 34px; }
    .xfaq-description   { font-size: 19px; }
    .xfaq-question-text { font-size: 19px; }
    .xfaq-answer-inner  { font-size: 19px; }

    /* blob size ~75%, blur stays proportionally large so spread stays soft */
    .xfaq-blob-1 { width: 100px; height: 100px; top: 22px;  left: 59%;  filter: blur(160px); }
    .xfaq-blob-2 { width: 140px; height: 140px; top: 158px; left: -36px; filter: blur(160px); }
    .xfaq-blob-3 { width: 148px; height: 148px; top: 272px; left: 86%;  filter: blur(130px); }
}

/* Up to 768px - Tablet */
@media (max-width: 768px) {
    .xfaq-section       { padding: 40px 0; }
    .xfaq-container     { padding: 0 20px; }
    .xfaq-title         { font-size: 28px; }
    .xfaq-description   { font-size: 16px; margin-bottom: 32px; }
    .xfaq-question      { padding: 16px 20px; min-height: 58px; }
    /* reset the desktop -10px left shift — too close to edge on narrow screens */
    .xfaq-question-text { font-size: 17px; margin-left: 0; margin-bottom: 0; }
    .xfaq-answer-inner  { padding: 4px 20px 20px; font-size: 15px; }
    .xfaq-answer-inner p {
    margin-bottom: 10px;
    margin-top: 10px;
}
    .xfaq-accordion     { gap: 10px; }

    /* blob size ~55%, blur kept 2–3× blob size so they spread like desktop */
    .xfaq-blob-1 { width: 70px;  height: 70px;  top: 16px;  left: 58%;  filter: blur(130px); }
    .xfaq-blob-2 { width: 100px; height: 100px; top: 120px; left: -30px; filter: blur(150px); }
    .xfaq-blob-3 { width: 105px; height: 105px; top: 220px; left: 78%;  filter: blur(120px); }
}

/* Up to 480px - Mobile */
@media (max-width: 480px) {
    .xfaq-container     { padding: 0 16px; }
    .xfaq-title         { font-size: 24px; }
    .xfaq-description   { font-size: 15px; }
    .xfaq-question      { padding: 14px 16px; gap: 10px; }
    .xfaq-question-text { font-size: 15px; margin-left: 0; margin-bottom: 0; }
    /* no negative margin on small screens — it pulled the text past the 16px
       container padding and the item's overflow:hidden clipped it on the left */
    .xfaq-answer-inner  { padding: 4px 16px 18px; font-size: 14px; margin-left: 0; margin-top: 0; }
    .xfaq-icon          { width: 22px; height: 22px; }
    .xfaq-icon svg      { width: 22px; height: 22px; }

    /* blob size ~40%, blur 2.5–3× blob so glow spreads naturally across the narrow screen */
    .xfaq-blob-1 { width: 54px; height: 54px; top: 10px;  left: 55%;  filter: blur(110px); }
    .xfaq-blob-2 { width: 74px; height: 74px; top: 90px;  left: -28px; filter: blur(130px); }
    .xfaq-blob-3 { width: 78px; height: 78px; top: 190px; left: 68%;  filter: blur(110px); }
}

/* ==========================================================================
   Scroll-reveal entrance — "Accordion cascade"
   Premium, slow. Heading fades + rises first, then each FAQ row fades in
   and slides down (translateY(-14px) → 0) with a top-to-bottom stagger.
   opacity + transform ONLY on the item wrapper — the accordion's own
   max-height open/close on .xfaq-answer is never touched, so toggling
   keeps working. No layout shift.
   ========================================================================== */

/* --- hidden (pre-reveal) state --- */
.xfaq-section.xfaq-reveal .xfaq-title,
.xfaq-section.xfaq-reveal .xfaq-description {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.xfaq-section.xfaq-reveal .xfaq-item {
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* heading rises first, description just behind it */
.xfaq-section.xfaq-reveal .xfaq-title       { transition-delay: 0s; }
.xfaq-section.xfaq-reveal .xfaq-description  { transition-delay: 0.12s; }

/* rows cascade top → bottom, starting after the heading */
.xfaq-section.xfaq-reveal .xfaq-item:nth-child(1)  { transition-delay: 0.30s; }
.xfaq-section.xfaq-reveal .xfaq-item:nth-child(2)  { transition-delay: 0.42s; }
.xfaq-section.xfaq-reveal .xfaq-item:nth-child(3)  { transition-delay: 0.54s; }
.xfaq-section.xfaq-reveal .xfaq-item:nth-child(4)  { transition-delay: 0.66s; }
.xfaq-section.xfaq-reveal .xfaq-item:nth-child(5)  { transition-delay: 0.78s; }
.xfaq-section.xfaq-reveal .xfaq-item:nth-child(6)  { transition-delay: 0.90s; }
.xfaq-section.xfaq-reveal .xfaq-item:nth-child(7)  { transition-delay: 1.02s; }
.xfaq-section.xfaq-reveal .xfaq-item:nth-child(8)  { transition-delay: 1.14s; }
.xfaq-section.xfaq-reveal .xfaq-item:nth-child(n+9){ transition-delay: 1.26s; }

/* --- revealed state --- */
.xfaq-section.xfaq-reveal.xfaq-in .xfaq-title,
.xfaq-section.xfaq-reveal.xfaq-in .xfaq-description,
.xfaq-section.xfaq-reveal.xfaq-in .xfaq-item {
    opacity: 1;
    transform: none;
}

/* --- reduced-motion: no entrance animation --- */
@media (prefers-reduced-motion: reduce) {
    .xfaq-section.xfaq-reveal .xfaq-title,
    .xfaq-section.xfaq-reveal .xfaq-description,
    .xfaq-section.xfaq-reveal .xfaq-item {
        opacity: 1;
        transform: none;
        transition: background 0.3s ease,
                    border-color 0.3s ease,
                    box-shadow 0.3s ease;
        transition-delay: 0s;
    }
}