/* ── HERO CARD ── */
.faq-page { max-width:1100px; margin:0 auto; padding:48px 24px 80px; }

.faq-hero-card {
  background:#0e0e0e; border:1px solid rgba(255,255,255,.07); border-radius:24px;
  padding:52px 56px; display:flex; align-items:center; gap:48px;
  position:relative; overflow:hidden; margin-bottom:40px;
}
.faq-hero-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at -10% 50%, rgba(205,0,240,.15) 0%, transparent 65%);
  pointer-events:none;
}
.faq-hero-left { flex:1; position:relative; }
.faq-hero-badge {
  display:inline-flex; align-items:center; gap:8px; padding:5px 14px; border-radius:9999px;
  border:1px solid rgba(205,0,240,.25); background:rgba(205,0,240,.1);
  font-size:11px; font-weight:700; color:#CD00F0; text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:20px;
}
.faq-hero-card h1 {
  font-size:clamp(1.8rem,3vw,2.8rem); font-weight:800; color:#fff;
  letter-spacing:-.03em; line-height:1.15; margin-bottom:12px;
}
.faq-hero-card h1 span { color:#CD00F0; }
.faq-hero-card > .faq-hero-left > p {
  font-size:15px; color:rgba(255,255,255,.45); line-height:1.7; margin-bottom:28px; max-width:400px;
}
.faq-search-wrap { position:relative; max-width:400px; }
.faq-search-icon {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:rgba(255,255,255,.3); pointer-events:none;
}
.faq-search {
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:13px 16px 13px 42px; color:#fff; font-size:14px;
  font-family:inherit; outline:none; transition:border-color .2s, background .2s; box-sizing:border-box;
}
.faq-search:focus { border-color:rgba(205,0,240,.5); background:rgba(255,255,255,.08); }
.faq-search::placeholder { color:rgba(255,255,255,.25); }

.faq-hero-right {
  flex-shrink:0; width:520px; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:visible;
}
.faq-hero-illus { width:520px; height:520px; position:relative; overflow:visible; }
.faq-illus-circle { position:absolute; border-radius:50%; }
.faq-illus-c1 {
  width:200px; height:200px; top:0; left:20px;
  background:radial-gradient(circle at 40% 40%, rgba(205,0,240,.35) 0%, rgba(100,0,120,.2) 40%, transparent 70%);
  border:1px solid rgba(205,0,240,.2);
}
.faq-illus-c2 {
  width:130px; height:130px; top:35px; left:55px;
  background:rgba(205,0,240,.08); border:1px solid rgba(205,0,240,.15);
}
.faq-illus-center {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:72px; height:72px; border-radius:18px;
  background:linear-gradient(135deg,rgba(205,0,240,.3),rgba(150,0,180,.2));
  border:1px solid rgba(205,0,240,.4);
  display:flex; align-items:center; justify-content:center; color:#CD00F0;
}
.faq-illus-dot { position:absolute; border-radius:50%; background:#CD00F0; }
.faq-illus-dot1 { width:8px; height:8px; top:18px; right:24px; opacity:.7; }
.faq-illus-dot2 { width:5px; height:5px; bottom:22px; left:18px; opacity:.5; }
.faq-illus-dot3 { width:6px; height:6px; top:10px; left:30px; opacity:.4; background:#e879f9; }
.faq-illus-ring { position:absolute; border-radius:50%; border:1px dashed rgba(205,0,240,.2); }
.faq-illus-r1 { width:240px; height:240px; top:-20px; left:0; }

/* ── TOPICS ── */
.faq-topics-title {
  font-size:13px; font-weight:700; color:rgba(255,255,255,.3); letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:16px;
}
.faq-topics-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:40px;
}
.faq-topic-card {
  background:#0e0e0e; border:1px solid rgba(255,255,255,.07); border-radius:16px;
  padding:20px 20px 18px; cursor:pointer; transition:border-color .2s, transform .2s;
  display:flex; flex-direction:column; gap:12px; user-select:none;
}
.faq-topic-card:hover { border-color:rgba(255,255,255,.18); transform:translateY(-2px); }
.faq-topic-card.active { border-color:rgba(205,0,240,.4); background:rgba(205,0,240,.06); }
.faq-topic-icon {
  width:40px; height:40px; border-radius:11px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.5); transition:background .2s, color .2s, border-color .2s; flex-shrink:0;
}
.faq-topic-card.active .faq-topic-icon { background:rgba(205,0,240,.12); border-color:rgba(205,0,240,.25); color:#CD00F0; }
.faq-topic-label { font-size:13px; font-weight:700; color:rgba(255,255,255,.6); transition:color .2s; line-height:1.3; }
.faq-topic-card.active .faq-topic-label { color:#fff; }
.faq-topic-count { font-size:11px; color:rgba(255,255,255,.25); font-weight:500; }
.faq-topic-card.active .faq-topic-count { color:rgba(205,0,240,.7); }

/* ── ACCORDION ── */
.faq-list { display:flex; flex-direction:column; gap:8px; }
.faq-item {
  background:#0e0e0e; border:1px solid rgba(255,255,255,.07);
  border-radius:14px; overflow:hidden; transition:border-color .2s;
}
.faq-item.open { border-color:rgba(205,0,240,.3); }
.faq-q {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px; cursor:pointer; user-select:none;
}
.faq-q-text { font-size:14px; font-weight:600; color:#fff; line-height:1.45; }
.faq-item.open .faq-q-text { color:#CD00F0; }
.faq-chevron {
  flex-shrink:0; width:22px; height:22px; border-radius:7px;
  background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center;
  transition:transform .25s, background .2s; color:rgba(255,255,255,.4);
}
.faq-item.open .faq-chevron { transform:rotate(180deg); background:rgba(205,0,240,.15); color:#CD00F0; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .32s ease; }
.faq-item.open .faq-a { max-height:600px; }
.faq-a-inner {
  padding:14px 22px 18px; font-size:14px; color:rgba(255,255,255,.55); line-height:1.75;
  border-top:1px solid rgba(255,255,255,.05);
}
.faq-a-inner a { color:#CD00F0; text-decoration:none; }
.faq-a-inner a:hover { text-decoration:underline; }
.faq-a-inner strong { color:rgba(255,255,255,.8); font-weight:600; }

/* ── NO RESULTS ── */
.faq-no-results { text-align:center; padding:56px 24px; display:none; }
.faq-no-results svg { opacity:.15; margin-bottom:14px; }
.faq-no-results p { font-size:15px; color:rgba(255,255,255,.35); }

/* ── CTA CARD ── */
.faq-cta-card {
  background:#0e0e0e; border:1px solid rgba(255,255,255,.07); border-radius:20px;
  padding:40px; display:flex; align-items:center; gap:28px;
  position:relative; overflow:hidden; margin-top:48px;
}
.faq-cta-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 100% at 100% 50%, rgba(205,0,240,.1) 0%, transparent 60%);
  pointer-events:none;
}
.faq-cta-logo {
  flex-shrink:0; width:64px; height:64px; border-radius:16px;
  background:rgba(205,0,240,.1); border:1px solid rgba(205,0,240,.2);
  display:flex; align-items:center; justify-content:center;
}
.faq-cta-logo img { width:40px; height:40px; object-fit:contain; border-radius:8px; }
.faq-cta-body { flex:1; position:relative; }
.faq-cta-body h3 { font-size:20px; font-weight:800; color:#fff; margin-bottom:6px; }
.faq-cta-body p { font-size:14px; color:rgba(255,255,255,.4); line-height:1.6; }
.faq-cta-actions { display:flex; gap:10px; flex-shrink:0; position:relative; }
.faq-btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:11px; font-size:14px; font-weight:700;
  background:linear-gradient(110deg,#CD00F0,45%,#e566ff,55%,#CD00F0);
  background-size:200% 100%; animation:faq-shine 3s linear infinite;
  color:#fff; border:none; cursor:pointer; font-family:inherit;
  text-decoration:none; white-space:nowrap;
}
@keyframes faq-shine { to { background-position:-200% center; } }
.faq-btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:11px; font-size:14px; font-weight:600;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.1); cursor:pointer; font-family:inherit;
  transition:all .2s; text-decoration:none; white-space:nowrap;
}
.faq-btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; }

mark { background:rgba(205,0,240,.25); color:#e879f9; border-radius:3px; padding:0 2px; }

@media(max-width:900px) {
  .faq-topics-grid { grid-template-columns:repeat(2,1fr); }
  .faq-hero-right { display:none; }
  .faq-hero-card { padding:36px 28px; }
  .faq-cta-card { flex-wrap:wrap; gap:20px; }
  .faq-cta-actions { width:100%; }
}
@media(max-width:600px) {
  .faq-page { padding:24px 16px 60px; }
  .faq-hero-card { padding:28px 20px; border-radius:18px; }
  .faq-topics-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .faq-q { padding:14px 16px; }
  .faq-a-inner { padding:12px 16px 14px; }
  .faq-cta-card { padding:28px 20px; }
  .faq-cta-actions { flex-direction:column; }
  .faq-btn-primary, .faq-btn-ghost { justify-content:center; }
}