/* ===== FAQ PAGE ===== */

    .faq-hero {
      padding: 40px 0 0;
    }
    .faq-h1 {
      font-size: 42px;
      font-weight: 900;
      color: var(--text);
      margin-bottom: 12px;
      line-height: 1.1;
    }
    .faq-sub {
      font-size: 15px;
      color: var(--text-muted);
      margin-bottom: 32px;
    }

    /* --- Filter tabs --- */
    .faq-filter {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 40px;
    }
    .faq-filter__btn {
      display: inline-flex;
      align-items: center;
      padding: 9px 20px;
      border: 1.5px solid var(--border);
      border-radius: 50px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-muted);
      cursor: pointer;
      transition: background .2s, border-color .2s, color .2s;
      white-space: nowrap;
      user-select: none;
      background: transparent;
      font-family: inherit;
    }
    .faq-filter__btn:hover {
      border-color: var(--blue);
      color: var(--blue);
    }
    .faq-filter__btn.is-active {
      background: var(--blue);
      border-color: var(--blue);
      color: var(--white);
    }

    /* --- FAQ list --- */
    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-bottom: 60px;
    }
    .faq-item {
      border-bottom: 1px solid var(--border);
    }
    .faq-item:first-child {
      border-top: 1px solid var(--border);
    }

    /* Hide non-matching items — controlled via JS */
    .faq-item.is-hidden { display: none; }

    /* Accordion toggle */
    .faq-item input[type="checkbox"] { display: none; }
    .faq-item__q {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 22px 0;
      cursor: pointer;
      font-size: 17px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.35;
      list-style: none;
      transition: color .2s;
    }
    .faq-item__q:hover { color: var(--blue); }
    .faq-item__icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--gray-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      line-height: 1;
      color: var(--blue);
      font-weight: 900;
      transition: background .2s, transform .3s;
    }
    .faq-item__a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease;
    }
    .faq-item__a-inner {
      padding-bottom: 22px;
      font-size: 15px;
      color: var(--text-muted);
      line-height: 1.7;
    }
    .faq-item__a-inner a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
    .faq-item__a-inner ul { margin: 10px 0 4px 0; display: flex; flex-direction: column; gap: 4px; }
    .faq-item__a-inner li { display: flex; gap: 6px; }
    .faq-item input[type="checkbox"]:checked ~ .faq-item__q .faq-item__icon {
      background: var(--blue);
      color: var(--white);
      transform: rotate(45deg);
    }
    .faq-item input[type="checkbox"]:checked ~ .faq-item__a {
      max-height: 800px;
    }

    /* --- Expert CTA block --- */
    .faq-expert {
      background: var(--gray-bg);
      border-radius: 20px;
      padding: 36px 40px;
      display: flex;
      align-items: center;
      gap: 28px;
      margin-bottom: 64px;
    }
    .faq-expert__avatar {
      flex-shrink: 0;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: var(--blue);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      overflow: hidden;
    }
    .faq-expert__body { flex: 1; }
    .faq-expert__title {
      font-size: 17px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 6px;
    }
    .faq-expert__text {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.6;
    }

    /* --- Related blog --- */
    .faq-blog { padding: 60px 0; background: var(--white); }
    .faq-blog__title {
      font-size: 26px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 28px;
    }
    .faq-blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .faq-blog-card {
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: box-shadow .2s;
    }
    .faq-blog-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
    .faq-blog-card__img {
      height: 160px;
      background: var(--gray-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 52px;
    }
    .faq-blog-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
    .faq-blog-card__title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.4;
      transition: color .2s;
    }
    .faq-blog-card__title:hover { color: var(--blue); }
    .faq-blog-card__excerpt {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
      flex: 1;
    }
    .faq-blog-card__meta {
      font-size: 12px;
      color: var(--text-light);
      margin-top: 4px;
    }

    /* --- Form section --- */
    .faq-form {
      background: var(--navy);
      border-radius: 28px;
      padding: 60px;
      margin: 0 40px 60px;
    }
    .faq-form__title {
      font-size: 30px;
      font-weight: 800;
      color: var(--white);
      margin-bottom: 6px;
    }
    .faq-form__sub {
      font-size: 15px;
      color: rgba(255,255,255,.55);
      margin-bottom: 8px;
    }
    .faq-form__contacts {
      font-size: 14px;
      color: rgba(255,255,255,.55);
      margin-bottom: 36px;
    }
    .faq-form__contacts a { color: var(--blue); font-weight: 700; }
    .ff-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 20px; }
    .ff-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }

    @media (max-width: 960px) {
      .faq-h1 { font-size: 32px; }
      .faq-expert { flex-direction: column; text-align: center; padding: 28px 24px; }
      .faq-blog-grid { grid-template-columns: 1fr 1fr; }
      .faq-form { margin: 0 24px 60px; padding: 40px 24px; }
      .ff-row3 { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 640px) {
      .faq-h1 { font-size: 26px; }
      .faq-item__q { font-size: 15px; }
      .faq-blog-grid { grid-template-columns: 1fr; }
      .faq-form { margin: 0 16px 40px; padding: 32px 20px; }
      .ff-row3 { grid-template-columns: 1fr; }
      .ff-row2 { grid-template-columns: 1fr; }
    }