/* ============================================================
   FAQ — page-specific (glass system)
   Loads AFTER signalos.css · uses qa- prefixed classes
   ============================================================ */

/* ── PAGE HERO ── */
.page-hero {
  max-width: 820px; margin: 0 auto; text-align: center; position: relative; overflow-x: clip;
  padding: calc(var(--banner-h, 44px) + 150px) 40px 8px;
}
.page-hero h1 {
  font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  letter-spacing: -0.045em; line-height: 1.02; color: #fff; margin-bottom: 18px; text-wrap: balance;
}
.page-hero h1 .grad { background: linear-gradient(120deg, var(--red-2), var(--cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.page-sub { color: var(--t2); font-size: 1.06rem; line-height: 1.7; max-width: 500px; margin: 0 auto; text-wrap: pretty; }

/* ── SEARCH ── */
.qa-search { max-width: 560px; margin: 30px auto 0; position: relative; }
.qa-search input {
  width: 100%; background: var(--glass); border: 1px solid var(--stroke); border-radius: 14px;
  padding: 15px 18px 15px 48px; color: #fff; font-family: var(--body); font-size: 0.96rem;
  backdrop-filter: blur(10px); transition: border-color 0.2s;
}
.qa-search input::placeholder { color: var(--t3); }
.qa-search input:focus { outline: none; border-color: rgba(232,25,60,0.45); }
.qa-search svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--t3); pointer-events: none; }

/* ── CATEGORY CHIPS ── */
.qa-cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 720px; margin: 20px auto 0; }
.qa-cat { padding: 9px 17px; border-radius: 100px; background: var(--glass); border: 1px solid var(--stroke); color: var(--t2); font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: var(--body); transition: all 0.2s; }
.qa-cat:hover { color: #fff; border-color: rgba(255,255,255,0.25); }
.qa-cat.active { background: linear-gradient(135deg, var(--red-2), var(--red)); color: #fff; border-color: transparent; box-shadow: 0 8px 22px -8px rgba(232,25,60,0.6); }

/* ── FAQ LIST ── */
.qa-wrap { max-width: 760px; margin: 52px auto 0; padding: 0 40px; }
.qa-list { display: flex; flex-direction: column; gap: 10px; }
.qa-item { background: var(--glass); border: 1px solid var(--stroke); border-radius: 16px; overflow: hidden; backdrop-filter: blur(14px); transition: border-color 0.3s, background 0.3s; }
.qa-item.open { border-color: rgba(232,25,60,0.3); background: var(--glass-2); }
.qa-item.hide { display: none; }
.qa-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 14px; font-family: var(--body); }
.qa-q-main { display: flex; flex-direction: column; gap: 3px; }
.qa-cat-label { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--cyan); font-weight: 700; }
.qa-q-text { font-size: 0.96rem; font-weight: 600; color: var(--t1); transition: color 0.2s; }
.qa-q:hover .qa-q-text { color: #fff; }
.qa-icon { width: 26px; height: 26px; border: 1px solid var(--stroke); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; color: var(--t2); flex-shrink: 0; transition: all 0.3s; }
.qa-item.open .qa-icon { background: linear-gradient(135deg, var(--red-2), var(--red)); border-color: transparent; color: #fff; transform: rotate(45deg); }
.qa-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s; color: var(--t2); font-size: 0.91rem; line-height: 1.75; padding: 0 24px; }
.qa-item.open .qa-a { max-height: 420px; padding: 0 24px 22px; }
.qa-empty { text-align: center; color: var(--t3); padding: 48px 20px; font-size: 0.95rem; display: none; }
.qa-empty.show { display: block; }

/* ── CTA ── */
.faq-cta { padding: 80px 40px 120px; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .page-hero { padding: calc(var(--banner-h, 56px) + 96px) 18px 4px; }
  .qa-cat { padding: 11px 16px; min-height: 44px; }
  .qa-search input { min-height: 50px; }
  .qa-wrap { padding: 0 18px; margin-top: 40px; }
  .qa-q { padding: 18px 18px; min-height: 56px; }
  .qa-a { padding: 0 18px; }
  .qa-item.open .qa-a { padding: 0 18px 18px; }
  .faq-cta { padding: 56px 18px 80px; }
}