*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --brand:    rgb(22, 223, 82);
      --brand-dk: #1f9c34;
      --brand-lt: #e8f2fd;
      --text:     #111827;
      --muted:    #6b7280;
      --border:   #d1e3f8;
      --bg:       #f4f8ff;
      --white:    #ffffff;
      --radius:   14px;
      --speed:    0.38s;
    }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--white);
      color: var(--text);
    }

    /* ── Section ── */
    #FAQ {
      background: var(--bg);
      padding: 80px 24px 100px;
      position: relative;
      overflow: hidden;
    }

    /* decorative blobs */
    #FAQ::before, #FAQ::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      opacity: .12;
      pointer-events: none;
    }
    #FAQ::before {
      width: 480px; height: 480px;
      background: var(--brand);
      top: -140px; left: -140px;
    }
    #FAQ::after {
      width: 320px; height: 320px;
      background: var(--brand);
      bottom: -100px; right: -80px;
    }

    .faq-inner {
      max-width: 760px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    /* ── Header ── */
    .faq-header {
      text-align: center;
      margin-bottom: 52px;
    }

    .faq-badge {
      display: inline-block;
      background: var(--brand-lt);
      color: var(--brand);
      font-family: 'Syne', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 6px 18px;
      border-radius: 999px;
      margin-bottom: 18px;
      border: 1px solid var(--border);
    }

    .faq-header h2 {
      font-family: 'Syne', sans-serif;
      font-size: clamp(28px, 5vw, 42px);
      font-weight: 700;
      color: var(--text);
      line-height: 1.2;
      margin-bottom: 14px;
    }
    .faq-header h2 span { color: var(--brand); }

    .faq-header p {
      color: var(--muted);
      font-size: 16px;
      line-height: 1.65;
      max-width: 480px;
      margin: 0 auto;
    }

    /* ── Accordion list ── */
    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* ── Single item ── */
    .faq-item {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(10,116,218,.06);
      transition: box-shadow var(--speed), border-color var(--speed);
    }
    .faq-item.open {
      border-color: var(--brand);
      box-shadow: 0 4px 24px rgba(10,116,218,.14);
    }

    /* ── Trigger button ── */
    .faq-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 22px 24px;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
      color: var(--text);
      transition: background var(--speed);
    }
    .faq-item.open .faq-trigger { background: var(--brand-lt); }

    /* number badge */
    .faq-num {
      flex-shrink: 0;
      width: 34px; height: 34px;
      border-radius: 50%;
      background: var(--brand-lt);
      color: var(--brand);
      font-family: 'Syne', sans-serif;
      font-size: 13px;
      font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      transition: background var(--speed), color var(--speed);
    }
    .faq-item.open .faq-num {
      background: var(--brand);
      color: var(--white);
    }

    .faq-question {
      flex: 1;
      font-family: 'Syne', sans-serif;
      font-size: 16px;
      font-weight: 600;
      line-height: 1.4;
    }

    /* chevron */
    .faq-icon {
      flex-shrink: 0;
      width: 28px; height: 28px;
      border-radius: 50%;
      border: 1.5px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      transition: transform var(--speed), background var(--speed), border-color var(--speed);
      color: var(--brand);
    }
    .faq-item.open .faq-icon {
      transform: rotate(180deg);
      background: var(--brand);
      border-color: var(--brand);
      color: var(--white);
    }
    .faq-icon svg { display: block; }

    /* ── Answer panel ── */
    .faq-panel {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows var(--speed) cubic-bezier(.4,0,.2,1);
    }
    .faq-item.open .faq-panel { grid-template-rows: 1fr; }

    .faq-panel-inner {
      overflow: hidden;
    }

    .faq-answer {
      padding: 0 24px 24px 76px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.75;
    }

    /* ── Footer CTA ── */
    .faq-cta {
      margin-top: 52px;
      text-align: center;
    }
    .faq-cta p {
      color: var(--muted);
      font-size: 15px;
      margin-bottom: 18px;
    }
    .faq-cta a {
      display: inline-block;
      background: var(--brand);
      color: var(--white);
      font-family: 'Syne', sans-serif;
      font-weight: 600;
      font-size: 15px;
      padding: 14px 36px;
      border-radius: 999px;
      text-decoration: none;
      transition: background var(--speed), transform .2s;
      box-shadow: 0 4px 16px rgba(10,116,218,.28);
    }
    .faq-cta a:hover {
      background: var(--brand-dk);
      transform: translateY(-2px);
    }

    @media (max-width: 520px) {
      .faq-answer { padding-left: 24px; }
      .faq-question { font-size: 14px; }
    }