:root{
  --surface: #0c1220;
  --card: rgba(255,255,255,0.04);
  --card-hover: rgba(255,255,255,0.06);
  --text: #e7ebf3;
  --muted: #9aa3b2;
  --brand1: #a855f7;
  --brand2: #f472b6;
  --ring: rgba(168,85,247,.35);
  --divider: rgba(255,255,255,.08);
}

.container{max-width:1000px;margin:0 auto;padding:0 20px}

.page-hero{
  padding:56px 0 12px;
}
.hero-title{
  font-weight:800; letter-spacing:.3px; font-size: clamp(28px, 3.2vw, 44px);
  color: var(--text); line-height:1.1; margin:0 0 10px; position:relative;
}
.hero-title:after{
  content:""; display:block; height:4px; width:120px; margin-top:14px;
  border-radius:999px; background: linear-gradient(90deg,var(--brand1),var(--brand2));
  box-shadow: 0 0 30px rgba(168,85,247,.35);
}
.hero-sub{color:var(--muted); margin:6px 0 6px}

.faqs-section{padding:8px 0 60px}
.faq-list{display:flex; flex-direction:column; gap:12px}

.faq-card{
  background: var(--card);
  border:1px solid var(--divider);
  border-radius:16px; overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transition: background .2s ease, border-color .2s ease, transform .05s ease;
}
.faq-card:hover{ background: var(--card-hover); border-color: rgba(168,85,247,.25) }

.show p{
    margin: 0px!important;
}

.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:18px 18px; background:transparent; border:0; cursor:pointer;
  color:var(--text); font-size:1.05rem; text-align:left;     border-radius: 0!important;
}
.faq-q:focus{ outline:none; box-shadow: 0 0 0 3px var(--ring); border-radius:14px }
.faq-q-text{font-weight:600}

.faq-chevron{opacity:.9; transition: transform .2s ease, opacity .2s ease}
.faq-q[aria-expanded="true"] .faq-chevron{ transform: rotate(180deg); opacity:1 }

.faq-a{
  display:none;     padding: 17px 20px 20px 20px;
  color:#cbd5e1; line-height:1.7; border-top:1px solid var(--divider);
}
.faq-a.show{ display:block }

.faq-a a{color:#c4b5fd; text-decoration:underline}
.faq-a ul{padding-left:18px; margin:8px 0}
.faq-a li{margin:6px 0}

.empty{color:var(--muted); padding:20px 0; text-align:center}

/* subtle divider under hero */
.page-hero + .faqs-section .container{ border-top:1px solid var(--divider) }