:root{
    --bg:#0f0f12;
    --panel:#1a1a21;
    --panelHover:#20202a;
    --text:#e9e9ee;
    --muted:#acadc0;
    --accent:#9b7cf6; /* purple like pic 2 */
    --ring: rgba(155,124,246,.35);
    --radius:14px;
    --wrap:1100px;
  }
  
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,Segoe UI,Roboto,Helvetica,Arial}
  
  .wrap{max-width:var(--wrap);margin:auto;padding:0 20px}
  
  /* hero */
  .faq-hero{
    background: radial-gradient(1200px 400px at 50% -10%, #241b47 0%, transparent 60%), #14141a;
    padding:80px 0 50px;
    text-align:center;
  }
  .faq-hero h1{margin:0 0 10px;font-size:46px;letter-spacing:.5px}
  .faq-hero p{margin:0 auto;max-width:760px;color:var(--muted)}
  
  /* grid */
  .faq-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    margin:40px 0 28px;
  }
  @media (min-width:900px){
    .faq-grid{grid-template-columns:1fr 1fr}
  }
  
  /* card (using <details>) */
  .faq-card{
    background:var(--panel);
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid #242432;
    transition:background .2s,border-color .2s;
  }
  .faq-card[open]{border-color:var(--accent)}
  .faq-card:hover{background:var(--panelHover)}
  
  .faq-card summary{
    list-style:none;
    cursor:pointer;
    padding:18px 18px 18px 46px;
    position:relative;
    font-weight:600;
    outline:none;
  }
  .faq-card summary::-webkit-details-marker{display:none}
  
  /* plus icon -> turns into minus when open */
  .faq-card .icon{
    position:absolute;left:14px;top:16px;
    width:24px;height:24px;display:grid;place-items:center;
    border-radius:8px;background:#2a2638;color:#d5cffb;
    font-weight:700;line-height:1;border:1px solid #3a3353;
    transition:transform .2s, background .2s, color .2s;
  }
  .faq-card[open] .icon{transform:rotate(45deg); background:#342a5a; color:#fff}
  
  .faq-card .content{
    padding:0 18px 18px 46px;
    color:var(--muted);
  }
  
  /* CTA */
  .faq-cta{
    text-align:center;
    margin:40px 0 80px;
    color:var(--muted);
  }
  .faq-cta .btn{
    display:inline-block;
    margin-top:14px;
    padding:12px 22px;
    border-radius:999px;
    background:var(--accent);
    color:#0f0f12;
    text-decoration:none;
    font-weight:700;
    box-shadow:0 0 0 0 var(--ring);
    transition:transform .15s, box-shadow .15s;
  }
  .faq-cta .btn:hover{transform:translateY(-1px); box-shadow:0 8px 24px -6px var(--ring)}