.page-faq{
  --faq-sidebar-w:264px;
  --faq-content-w:840px;
  --faq-ease:var(--ease);
  --faq-glow:rgba(57,255,136,.06);
  background:
    linear-gradient(var(--color-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px),
    var(--color-bg);
  background-size:32px 32px;
  padding-bottom:var(--space-3xl);
}

.page-faq .faq-hero{
  position:relative;
  padding:var(--space-2xl) 0 var(--space-xl);
  border-bottom:1px solid var(--color-border);
  overflow:hidden;
}

.page-faq .faq-hero__inner{
  display:grid;
  gap:var(--space-xl);
  align-items:center;
}

.page-faq .faq-hero__content{
  max-width:640px;
}

.page-faq .breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-xs);
  margin-bottom:var(--space-md);
  font-size:14px;
  color:var(--color-muted);
}

.page-faq .breadcrumb a{
  color:var(--color-secondary);
  text-decoration:none;
}

.page-faq .breadcrumb__sep{
  color:var(--color-border);
}

.page-faq .faq-hero__tag{
  margin:0 0 var(--space-sm);
}

.page-faq .faq-hero h1{
  margin:0;
  max-width:11em;
  font-family:var(--font-sans);
  font-size:clamp(30px,5vw,54px);
  line-height:1.16;
  font-weight:900;
  letter-spacing:-0.02em;
  color:var(--color-text);
}

.page-faq .faq-hero__lead{
  margin:var(--space-md) 0 0;
  max-width:560px;
  color:var(--color-muted);
  line-height:1.8;
  font-size:16px;
}

.page-faq .faq-hero__hint{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-sm);
  margin:var(--space-md) 0 0;
  color:var(--color-muted);
  font-size:14px;
}

.page-faq .faq-hero__data{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-xl);
  margin-top:var(--space-lg);
  padding-top:var(--space-md);
  border-top:1px solid var(--color-border);
}

.page-faq .faq-hero__stat{
  display:grid;
  gap:var(--space-2xs);
}

.page-faq .faq-hero__stat-num{
  font-family:var(--font-mono);
  font-size:28px;
  line-height:1;
  color:var(--color-primary);
  letter-spacing:0.02em;
}

.page-faq .faq-hero__stat-label{
  color:var(--color-muted);
  font-size:13px;
  letter-spacing:0.08em;
}

.page-faq .faq-hero__visual{
  position:relative;
  max-width:560px;
}

.page-faq .faq-hero__visual::before{
  content:"";
  position:absolute;
  inset:-12px;
  border:1px dashed rgba(57,255,136,.28);
  border-radius:calc(var(--radius-lg) + 8px);
  z-index:0;
}

.page-faq .faq-hero__visual img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:var(--radius-lg);
  border:1px solid var(--color-border);
  box-shadow:0 18px 48px rgba(0,0,0,.42);
}

.page-faq .faq-hero__code{
  position:absolute;
  z-index:2;
  top:-14px;
  right:18px;
  padding:var(--space-2xs) var(--space-sm);
  background:var(--color-bg);
  border:1px solid var(--color-secondary);
  border-radius:999px;
  color:var(--color-secondary);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.12em;
}

.page-faq .faq-layout{
  display:grid;
  gap:var(--space-xl);
  padding-top:var(--space-xl);
}

.page-faq .faq-sidebar__inner{
  display:grid;
  gap:var(--space-lg);
}

.page-faq .faq-sidebar__nav{
  display:flex;
  gap:var(--space-sm);
  overflow-x:auto;
  padding-bottom:var(--space-sm);
  scroll-snap-type:x proximity;
}

.page-faq .faq-sidebar__nav::-webkit-scrollbar{
  height:4px;
}

.page-faq .faq-sidebar__nav::-webkit-scrollbar-thumb{
  background:var(--color-border);
  border-radius:999px;
}

.page-faq .faq-sidebar__link{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  padding:var(--space-sm) var(--space-md);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-bg-2);
  color:var(--color-muted);
  text-decoration:none;
  font-family:var(--font-sans);
  font-size:14px;
  white-space:nowrap;
  transition:color .25s var(--faq-ease), border-color .25s var(--faq-ease), background .25s var(--faq-ease);
}

.page-faq .faq-sidebar__link:hover,
.page-faq .faq-sidebar__link:focus-visible{
  color:var(--color-primary);
  border-color:rgba(57,255,136,.45);
  background:var(--color-bg-3);
}

.page-faq .faq-sidebar__no{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--color-secondary);
}

.page-faq .faq-sidebar__contact{
  padding:var(--space-md);
  background:var(--color-bg-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
}

.page-faq .faq-sidebar__contact-title{
  margin:0 0 var(--space-xs);
  color:var(--color-text);
  font-weight:700;
}

.page-faq .faq-sidebar__contact-text{
  margin:0 0 var(--space-md);
  color:var(--color-muted);
  font-size:14px;
  line-height:1.8;
}

.page-faq .faq-sidebar__contact .btn{
  width:100%;
}

.page-faq .faq-content{
  display:grid;
  gap:var(--space-3xl);
  max-width:var(--faq-content-w);
}

.page-faq .faq-section{
  scroll-margin-top:calc(var(--header-h) + var(--space-lg));
}

.page-faq .faq-section__head{
  display:flex;
  align-items:center;
  gap:var(--space-md);
  padding-bottom:var(--space-sm);
  border-bottom:1px solid var(--color-border);
}

.page-faq .faq-section__no{
  font-family:var(--font-mono);
  color:var(--color-primary);
  font-size:14px;
  letter-spacing:0.1em;
}

.page-faq .faq-section__badge{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:0 0 44px;
  background:var(--color-bg-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  color:var(--color-secondary);
}

.page-faq .faq-section__badge svg{
  width:22px;
  height:22px;
}

.page-faq .faq-section__head h2{
  margin:0;
  color:var(--color-text);
  font-family:var(--font-sans);
  font-size:clamp(22px,3vw,32px);
  font-weight:900;
  letter-spacing:-0.02em;
}

.page-faq .faq-section__intro{
  margin:var(--space-md) 0 0;
  max-width:640px;
  color:var(--color-muted);
  line-height:1.8;
}

.page-faq .faq-list{
  display:grid;
  gap:var(--space-sm);
  margin-top:var(--space-lg);
}

.page-faq .faq-item{
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-bg-2);
  transition:border-color .3s var(--faq-ease), box-shadow .3s var(--faq-ease);
}

.page-faq .faq-item[open]{
  border-color:rgba(57,255,136,.35);
  box-shadow:0 10px 30px var(--faq-glow);
}

.page-faq .faq-item__summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  padding:var(--space-sm) var(--space-md);
  cursor:pointer;
  color:var(--color-text);
  font-size:15px;
  font-weight:700;
  line-height:1.5;
}

.page-faq .faq-item__summary::-webkit-details-marker{
  display:none;
}

.page-faq .faq-item__state{
  position:relative;
  width:26px;
  height:26px;
  flex:0 0 26px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-sm);
  background:var(--color-bg-3);
  border:1px solid var(--color-border);
  color:var(--color-primary);
  transition:transform .3s var(--faq-ease), border-color .3s var(--faq-ease);
}

.page-faq .faq-item__state::before{
  content:"+";
  font-family:var(--font-mono);
  font-size:16px;
  line-height:1;
}

.page-faq .faq-item[open] .faq-item__state{
  transform:rotate(45deg);
  border-color:var(--color-primary);
}

.page-faq .faq-item__body{
  padding:0 var(--space-md) var(--space-md);
  background:linear-gradient(180deg, rgba(57,255,136,.06), rgba(0,229,255,.03) 70%, transparent);
  border-radius:0 0 var(--radius-md) var(--radius-md);
}

.page-faq .faq-item__body p{
  margin:0 0 var(--space-sm);
  color:var(--color-muted);
  line-height:1.8;
  font-size:15px;
}

.page-faq .faq-item__body p:last-child{
  margin-bottom:0;
}

.page-faq .faq-item a,
.page-faq .faq-section__cta-text a{
  color:var(--color-secondary);
  text-decoration:none;
  border-bottom:1px solid rgba(0,229,255,.3);
}

.page-faq .faq-feedback{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-sm);
  padding-top:var(--space-sm);
  margin-top:var(--space-md);
  border-top:1px dashed var(--color-border);
}

.page-faq .faq-feedback__label{
  color:var(--color-muted);
  font-size:13px;
}

.page-faq .faq-feedback__opt{
  cursor:pointer;
}

.page-faq .faq-feedback__chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:var(--space-2xs) var(--space-sm);
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:999px;
  color:var(--color-muted);
  font-size:13px;
  transition:all .2s var(--faq-ease);
}

.page-faq .faq-feedback__chip:hover{
  border-color:var(--color-secondary);
  color:var(--color-text);
}

.page-faq .faq-feedback__opt input:checked + .faq-feedback__chip{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:#0B0F19;
}

.page-faq .faq-feedback__opt input:focus-visible + .faq-feedback__chip{
  outline:2px solid var(--color-secondary);
  outline-offset:2px;
}

.page-faq .faq-media{
  margin-top:var(--space-xl);
  padding:var(--space-sm);
  background:var(--color-bg-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
}

.page-faq .faq-media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:calc(var(--radius-lg) - 8px);
}

.page-faq .faq-media__caption{
  margin-top:var(--space-sm);
  color:var(--color-muted);
  font-size:13px;
  text-align:center;
}

.page-faq .faq-section__cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-sm);
  margin-top:var(--space-lg);
  padding:var(--space-md);
  background:var(--color-bg-2);
  border:1px dashed var(--color-border);
  border-radius:var(--radius-md);
}

.page-faq .faq-section__cta-text{
  margin:0;
  max-width:560px;
  color:var(--color-muted);
  font-size:14px;
  line-height:1.8;
}

@media (min-width:768px){
  .page-faq .faq-hero__inner{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  }

  .page-faq .faq-hero__visual{
    max-width:none;
    margin-left:auto;
  }
}

@media (min-width:1024px){
  .page-faq .faq-layout{
    grid-template-columns:var(--faq-sidebar-w) minmax(0,1fr);
    gap:var(--space-2xl);
    align-items:start;
  }

  .page-faq .faq-sidebar__inner{
    position:sticky;
    top:calc(var(--header-h) + var(--space-lg));
  }

  .page-faq .faq-sidebar__nav{
    flex-direction:column;
    align-items:stretch;
    overflow-x:visible;
    padding-bottom:0;
  }

  .page-faq .faq-sidebar__link{
    white-space:normal;
    flex:none;
  }

  .page-faq .faq-content{
    max-width:none;
  }
}