/* =========================================================
   ABOUT PREVIEW
========================================================= */

.about-preview {

  padding: 10px 20px 40px;

}

.about-preview-inner {

  max-width: 760px;

  margin: 0 auto;

  padding: 26px;

  border-radius: 28px;

  background: var(--card);

  border: 1px solid var(--border);

  backdrop-filter: blur(var(--card-blur));

  -webkit-backdrop-filter: blur(var(--card-blur));

  box-shadow: var(--card-shadow);

}

.about-preview h2 {

  font-size: 1.2rem;

  font-weight: 700;

  color: var(--text);

  margin-bottom: 16px;

  letter-spacing: .2px;

}

.about-preview p {

  color: var(--text-soft);

  line-height: 1.8;

  font-size: .95rem;

  margin-bottom: 14px;

}

.about-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 20px;

}

.about-tags span {

  padding: 9px 14px;

  border-radius: 999px;

  background: var(--surface-2);

  border: 1px solid var(--border);

  color: var(--text-soft);

  font-size: .82rem;

  font-weight: 500;

  transition:
    transform var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast);

}

.about-tags span:hover {

  border-color: var(--accent);

  color: var(--accent);

  transform: translateY(-2px);

}


/* =========================================================
   FAQ SECTION
========================================================= */

.faq-section {

  padding: 0 20px 70px;

}

.faq-inner {

  max-width: 760px;

  margin: 0 auto;

}

.faq-section h2 {

  text-align: center;

  font-size: 1.3rem;

  font-weight: 700;

  color: var(--text);

  margin-bottom: 28px;

}

.faq-list {

  display: flex;

  flex-direction: column;

  gap: 14px;

}


/* =========================================================
   FAQ ITEM
========================================================= */

.faq-item {

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: 24px;

  overflow: hidden;

  backdrop-filter: blur(var(--card-blur));

  -webkit-backdrop-filter: blur(var(--card-blur));

  box-shadow: var(--card-shadow);

  transition:
    border-color var(--motion-base),
    transform var(--motion-fast);

}

.faq-item:hover {

  border-color: var(--accent);

  transform: translateY(-2px);

}


/* =========================================================
   SUMMARY
========================================================= */

.faq-item summary {

  list-style: none;

  cursor: pointer;

  position: relative;

  padding: 18px 22px;

  color: var(--text);

  font-size: .95rem;

  font-weight: 600;

  line-height: 1.5;

}

.faq-item summary::-webkit-details-marker {

  display: none;

}


/* =========================================================
   PLUS / MINUS ICON
========================================================= */

.faq-item summary::after {

  content: "+";

  position: absolute;

  right: 22px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--accent);

  font-size: 1.25rem;

  font-weight: 500;

  transition:
    transform var(--motion-base),
    color var(--motion-base);

}

.faq-item[open] summary::after {

  content: "−";

}


/* =========================================================
   FAQ CONTENT
========================================================= */

.faq-item p {

  padding:
    0 22px 22px;

  color: var(--text-soft);

  line-height: 1.8;

  font-size: .92rem;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .about-preview {

    padding:
      0 14px 34px;

  }

  .about-preview-inner {

    padding: 22px;

    border-radius: 24px;

  }

  .about-preview h2 {

    font-size: 1.08rem;

  }

  .about-preview p {

    font-size: .92rem;

  }

  .about-tags {

    gap: 8px;

  }

  .about-tags span {

    font-size: .78rem;

    padding: 8px 12px;

  }

  .faq-section {

    padding:
      0 14px 60px;

  }

  .faq-section h2 {

    font-size: 1.15rem;

    margin-bottom: 22px;

  }

  .faq-item {

    border-radius: 22px;

  }

  .faq-item summary {

    padding: 17px 18px;

    font-size: .92rem;

  }

  .faq-item p {

    padding:
      0 18px 18px;

    font-size: .89rem;

  }

}


.faq-item {

  transition:
    border-color var(--motion-base),
    background var(--motion-base),
    transform .25s ease;

}

.faq-item[open] {

  border-color: var(--accent);

  background:
    color-mix(
      in srgb,
      var(--accent) 3%,
      var(--card)
    );

}

.faq-item p {

  animation: faqFade .22s ease;

}

@keyframes faqFade {

  from {

    opacity: 0;

    transform: translateY(-4px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}
.faq-item summary {

  -webkit-tap-highlight-color: transparent;

  user-select: none;

}

.faq-item summary:focus {

  outline: none;

}