.page-faq{
  --faq-panel-radius: 20px;
  --faq-gold-glow: 0 0 0 1px rgba(245,208,97,.16), 0 18px 50px rgba(5,13,30,.45);
}

.page-faq [hidden]{ display:none !important; }

.page-faq .breadcrumb{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-size:.9rem; color:var(--text-muted); margin-bottom:20px;
}
.page-faq .breadcrumb a{ color:var(--text-muted); text-decoration:none; }
.page-faq .breadcrumb a:hover{ color:var(--gold-start); }
.page-faq .breadcrumb span[aria-current="page"]{ color:var(--gold-start); }

.page-faq .faq-hero{
  position:relative; padding:34px 0 30px; overflow:hidden;
  background:
    radial-gradient(720px 260px at 88% -12%, rgba(155,60,255,.32), transparent 62%),
    linear-gradient(135deg, var(--deep-space-blue-light), var(--deep-space-blue) 72%);
}
.page-faq .faq-hero::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--gold-start), var(--neon-purple));
}
.page-faq .faq-hero-grid{ display:grid; gap:26px; align-items:center; }
.page-faq .faq-hero-copy .mono-label{ color:var(--text-muted); letter-spacing:.08em; margin-bottom:10px; }
.page-faq #faq-title{
  font-family:var(--font-head); font-weight:900;
  font-size:clamp(1.9rem, 4.6vw, 3.2rem);
  line-height:1.14; color:var(--text-primary); margin:0 0 16px;
}
.page-faq .faq-hero-desc{
  color:var(--text-secondary); font-size:1.05rem;
  max-width:620px; margin:0 0 24px;
}
.page-faq .faq-hero-art{ order:-1; }
.page-faq .faq-hero-art.image-frame{
  border-radius:var(--faq-panel-radius); box-shadow:var(--faq-gold-glow); overflow:hidden;
}
.page-faq .faq-hero-art img{
  display:block; width:100%; height:auto; object-fit:cover;
}
.page-faq .faq-search{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; max-width:620px;
  background:rgba(255,255,255,.06); border:1px solid var(--border-line);
  border-radius:14px;
  transition:border-color .25s ease, background .25s ease;
}
.page-faq .faq-search:focus-within{
  border-color:var(--gold-start); background:rgba(255,255,255,.09);
}
.page-faq .faq-search svg{
  flex:0 0 auto; width:20px; height:20px; color:var(--gold-start);
}
.page-faq .faq-search input{
  flex:1 1 auto; min-width:0; background:transparent; border:0;
  color:var(--text-primary); font-size:1rem; outline:0;
}
.page-faq .faq-search input::placeholder{ color:var(--text-muted); }
.page-faq .faq-search-hint{
  margin-top:12px; color:var(--text-muted); font-size:.82rem;
}

.page-faq .faq-layout{
  padding:34px 0 60px;
  background:radial-gradient(560px 340px at 12% 8%, rgba(245,208,97,.06), transparent 60%);
}
.page-faq .faq-layout-inner{ display:grid; gap:28px; align-items:start; }

.page-faq .faq-index{
  background:var(--bg-panel); border:1px solid var(--border-line);
  border-radius:var(--faq-panel-radius); padding:22px 20px; position:relative;
}
.page-faq .faq-index h2{
  font-family:var(--font-head); font-size:1.05rem; letter-spacing:.06em;
  color:var(--gold-start); margin:0 0 16px;
}
.page-faq .faq-index ol{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.page-faq .faq-index li a{
  display:block; padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,.03); color:var(--text-secondary);
  font-size:.9rem; text-decoration:none; border:1px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.page-faq .faq-index li a:hover{
  background:rgba(245,208,97,.08); color:var(--text-primary);
  border-color:rgba(245,208,97,.28);
}
.page-faq .faq-index .btn{
  margin-top:18px; width:100%;
  display:inline-flex; justify-content:center; align-items:center;
}

.page-faq .faq-track{ margin-bottom:42px; scroll-margin-top:96px; }
.page-faq .faq-track-title{
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--font-head); font-size:1.35rem;
  margin:0 0 18px; padding-bottom:12px;
  border-bottom:1px solid var(--border-line); color:var(--text-primary);
}
.page-faq .faq-track-num{
  font-family:var(--font-mono); color:var(--neon-purple); font-size:1rem;
}

.page-faq .faq-item{
  background:linear-gradient(135deg, rgba(26,58,107,.38), rgba(11,29,58,.56));
  border:1px solid var(--border-line); border-left:3px solid var(--gold-start);
  border-radius:14px; margin-bottom:14px; overflow:hidden;
  transition:box-shadow .25s ease, border-color .25s ease;
}
.page-faq .faq-item:hover{
  box-shadow:0 12px 34px rgba(5,13,30,.38); border-left-color:var(--neon-purple);
}
.page-faq .faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  padding:18px 20px; color:var(--text-primary);
  font-weight:600; font-size:1.02rem;
}
.page-faq .faq-item summary::-webkit-details-marker{ display:none; }
.page-faq .faq-item summary::before{
  content:"＋"; color:var(--neon-purple);
  font-family:var(--font-mono); font-weight:700; line-height:1;
}
.page-faq .faq-item[open] summary::before{ content:"－"; color:var(--gold-start); }
.page-faq .faq-answer{
  padding:0 20px 20px 48px; color:var(--text-secondary); line-height:1.75;
}
.page-faq .faq-answer p{ margin:0 0 12px; }
.page-faq .faq-answer ul,
.page-faq .faq-answer ol{ margin:0 0 14px; padding-left:1.25em; }
.page-faq .faq-answer li{ margin-bottom:6px; }
.page-faq .faq-inline-link{
  color:var(--gold-start); text-decoration:none;
  border-bottom:1px dashed rgba(245,208,97,.55);
}
.page-faq .faq-inline-link:hover{
  color:var(--gold-end); border-bottom-style:solid;
}

.page-faq .faq-answer-media.image-frame{
  margin:16px 0; overflow:hidden; border-radius:14px;
  background:linear-gradient(135deg, rgba(155,60,255,.16), rgba(11,29,58,.4));
}
.page-faq .faq-answer-media img{
  display:block; width:100%; height:auto; object-fit:cover;
}

.page-faq .faq-steps{
  list-style:none; counter-reset:faqStep;
  margin:14px 0 16px; padding:0; display:grid; gap:12px;
}
.page-faq .faq-steps li{
  position:relative; counter-increment:faqStep;
  padding:11px 14px 11px 46px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); border-radius:12px;
  color:var(--text-secondary);
  animation:pageFaqStepIn .5s ease both;
}
.page-faq .faq-steps li:nth-child(2){ animation-delay:.14s; }
.page-faq .faq-steps li:nth-child(3){ animation-delay:.28s; }
.page-faq .faq-steps li::before{
  content:counter(faqStep, decimal);
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold-start), var(--gold-end));
  color:#081226; font-family:var(--font-mono); font-weight:700;
  font-size:.85rem; display:flex; align-items:center; justify-content:center;
}
@keyframes pageFaqStepIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

.page-faq .faq-cta{
  padding:48px 0;
  background:linear-gradient(135deg, rgba(155,60,255,.14), rgba(245,208,97,.06)), var(--deep-space-blue);
  border-top:1px solid var(--border-line);
}
.page-faq .faq-cta-inner{ display:grid; gap:22px; align-items:center; }
.page-faq .faq-cta h2{
  font-family:var(--font-head); font-size:1.7rem;
  margin:0 0 10px; color:var(--gold-start);
}
.page-faq .faq-cta p{
  margin:0; color:var(--text-secondary); max-width:72ch;
}
.page-faq .faq-cta-actions{
  display:flex; flex-wrap:wrap; gap:12px;
}

@media (min-width: 900px){
  .page-faq .faq-hero-grid{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  }
  .page-faq .faq-hero-art{ order:2; }
  .page-faq .faq-layout-inner{
    grid-template-columns:300px minmax(0,1fr);
  }
  .page-faq .faq-index{
    position:sticky; top:24px;
  }
  .page-faq .faq-index ol{ grid-template-columns:1fr; }
  .page-faq .faq-cta-inner{
    grid-template-columns:minmax(0,1fr) auto;
  }
}

@media (min-width: 1240px){
  .page-faq .faq-layout-inner{
    grid-template-columns:320px minmax(0,1fr);
  }
  .page-faq .faq-hero{ padding:46px 0 38px; }
  .page-faq .faq-layout{ padding:48px 0 72px; }
}