.page-faq{
  --faq-cyan: var(--color-accent-cyan);
  --faq-green: var(--color-accent-green);
  --faq-orange: var(--color-accent-orange);
  --faq-purple: var(--color-accent-purple);
  --faq-section: var(--faq-green);
  position: relative;
  padding-bottom: var(--space-7);
}
.page-faq::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0,229,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.045) 1px, transparent 1px);
  background-size: 36px 36px;
}
.page-faq > *{
  position: relative;
  z-index: 1;
}
.page-faq .faq-breadcrumb{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  font-family: var(--font-data);
  font-size: 13px;
  color: var(--color-text-secondary);
}
.page-faq .faq-breadcrumb a{
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.page-faq .faq-breadcrumb a:hover{
  color: var(--faq-cyan);
}
.page-faq .faq-breadcrumb__sep{
  color: var(--color-border-strong);
}

.page-faq .faq-hero{
  position: relative;
}
.page-faq .faq-hero__media{
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-secondary-bg);
  box-shadow: var(--shadow-card);
}
.page-faq .faq-hero__media img{
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}
.page-faq .faq-hero__content{
  position: relative;
  z-index: 2;
  margin: -36px var(--space-3) 0;
  padding: var(--space-5) var(--space-4) var(--space-4);
  background:
    linear-gradient(135deg, rgba(0,229,255,.09) 0%, transparent 42%),
    linear-gradient(45deg, transparent 70%, rgba(123,47,255,.06) 100%),
    var(--color-secondary-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.page-faq .faq-hero__content .c-section-label{
  color: var(--faq-cyan);
  letter-spacing: .08em;
}
.page-faq .faq-hero__content h1{
  margin: 10px 0 6px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 900;
  color: var(--color-text-primary);
  letter-spacing: .01em;
}
.page-faq .faq-hero__subtitle{
  display: inline-block;
  margin: 6px 0 10px;
  padding-left: var(--space-2);
  border-left: 3px solid var(--faq-green);
  font-family: var(--font-data);
  font-size: 14px;
  font-weight: 700;
  color: var(--faq-green);
}
.page-faq .faq-hl{
  color: var(--faq-green);
  font-weight: 700;
}
.page-faq .faq-hero__desc{
  margin: 10px 0 0;
  max-width: 72ch;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.75;
}

.page-faq .faq-quicksearch{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-2);
  background: rgba(10,17,40,.55);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}
.page-faq .faq-quicksearch__label{
  padding-right: var(--space-2);
  border-right: 1px solid var(--color-border-strong);
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--color-text-secondary);
}
.page-faq .faq-quicksearch__tag{
  padding: 6px 12px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  background: var(--color-elevated-bg);
  color: var(--color-text-primary);
  font-size: 13px;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.page-faq .faq-quicksearch__tag:hover{
  border-color: var(--faq-cyan);
  color: var(--faq-cyan);
  box-shadow: var(--shadow-float);
}

.page-faq .faq-shell{
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.page-faq .faq-index{
  padding: var(--space-4);
  background: var(--color-secondary-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  height: fit-content;
}
.page-faq .faq-index .c-section-label{
  color: var(--faq-purple);
  letter-spacing: .12em;
}
.page-faq .faq-index__nav{
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.page-faq .faq-index__nav::-webkit-scrollbar{
  display: none;
}
.page-faq .faq-index__link{
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--space-2);
  padding: 10px 12px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.page-faq .faq-index__link:hover,
.page-faq .faq-index__link:focus-visible{
  border-color: var(--faq-cyan);
  color: var(--color-text-primary);
  background: rgba(0,229,255,.06);
}
.page-faq .faq-index__link.is-active{
  border-color: var(--faq-cyan);
  color: var(--color-text-primary);
  background: rgba(0,229,255,.08);
}
.page-faq .faq-index__num{
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--faq-green);
}
.page-faq .faq-index__assist{
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}
.page-faq .faq-index__assist-title{
  margin: 0 0 6px;
  color: var(--color-text-primary);
  font-size: 15px;
  font-weight: 700;
}
.page-faq .faq-index__assist-text{
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.7;
}
.page-faq .faq-index__assist .c-btn{
  width: 100%;
  text-align: center;
}
.page-faq .faq-content{
  display: grid;
  gap: var(--space-3);
}

.page-faq .faq-section{
  scroll-margin-top: calc(var(--header-height) + var(--space-3));
  padding: var(--space-4);
  background: rgba(16,27,61,.38);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base);
}
.page-faq .faq-section--benefits{
  --faq-section: var(--faq-green);
}
.page-faq .faq-section--nav{
  --faq-section: var(--faq-cyan);
}
.page-faq .faq-section--data{
  --faq-section: var(--faq-purple);
}
.page-faq .faq-section--account{
  --faq-section: var(--faq-orange);
}
.page-faq .faq-section__head{
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}
.page-faq .faq-section__head .c-section-label{
  color: var(--faq-section);
  letter-spacing: .1em;
}
.page-faq .faq-section__head h2{
  margin: 4px 0 0;
  color: var(--color-text-primary);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 900;
}
.page-faq .faq-section__head h2::before{
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  background: linear-gradient(135deg, var(--faq-section) 0 50%, transparent 50%);
  border: 1px solid rgba(255,255,255,.16);
  vertical-align: middle;
}
.page-faq .faq-section__head > p:last-child{
  margin: 6px 0 0;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.7;
}
.page-faq .faq-section::after{
  content: "";
  display: block;
  width: 76px;
  height: 4px;
  margin-top: var(--space-5);
  background: linear-gradient(90deg, var(--faq-section), transparent);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
}

.page-faq .faq-guide-media{
  overflow: hidden;
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-secondary-bg);
}
.page-faq .faq-guide-media img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-faq .faq-list{
  display: grid;
  gap: var(--space-3);
}
.page-faq .faq-card{
  background: rgba(22,33,74,.5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}
.page-faq .faq-card[open]{
  border-color: var(--color-border-strong);
  background: var(--color-elevated-bg);
  box-shadow: var(--shadow-card);
}
.page-faq .faq-card__q{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 16px 18px;
  margin: 0;
  cursor: pointer;
  list-style: none;
  color: var(--color-text-primary);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}
.page-faq .faq-card__q::-webkit-details-marker{
  display: none;
}
.page-faq .faq-card__q:focus-visible{
  outline: none;
  box-shadow: inset 0 0 0 2px var(--faq-cyan);
}
.page-faq .faq-card__num{
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid rgba(57,255,20,.35);
  border-radius: var(--radius-sm);
  background: rgba(57,255,20,.09);
  color: var(--faq-green);
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .05em;
}
.page-faq .faq-card__title{
  flex: 1 1 auto;
}
.page-faq .faq-card__icon{
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-left: auto;
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.page-faq .faq-card__icon::before,
.page-faq .faq-card__icon::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--faq-cyan);
  transform: translate(-50%, -50%);
}
.page-faq .faq-card__icon::before{
  width: 10px;
  height: 2px;
}
.page-faq .faq-card__icon::after{
  width: 2px;
  height: 10px;
}
.page-faq .faq-card[open] .faq-card__icon{
  border-color: rgba(57,255,20,.5);
  background: rgba(57,255,20,.12);
}
.page-faq .faq-card[open] .faq-card__icon::before{
  background: var(--faq-green);
}
.page-faq .faq-card[open] .faq-card__icon::after{
  background: var(--faq-green);
  transform: translate(-50%, -50%) rotate(90deg);
}
.page-faq .faq-card__a{
  max-height: 0;
  padding: 0 18px;
  overflow: hidden;
  opacity: 0;
  transition: max-height .3s ease-out, opacity .3s ease-out, padding .3s ease-out;
}
.page-faq .faq-card[open] .faq-card__a{
  max-height: 800px;
  padding-top: 0;
  padding-bottom: 18px;
  opacity: 1;
}
.page-faq .faq-card__a p{
  margin: 0 0 10px;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.75;
}
.page-faq .faq-card__a p:last-child{
  margin-bottom: 0;
}
.page-faq .faq-card__a ul{
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding-left: 18px;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.7;
}
.page-faq .faq-card__a li::marker{
  color: var(--faq-cyan);
}
.page-faq .faq-card__a strong{
  color: var(--color-text-primary);
  font-weight: 700;
}
.page-faq .faq-card__a a{
  color: var(--faq-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,229,255,.4);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.page-faq .faq-card__a a:hover{
  color: var(--faq-green);
  border-bottom-color: var(--faq-green);
}
.page-faq .faq-mail{
  padding: 2px 6px;
  border: 1px solid rgba(0,229,255,.25);
  border-radius: var(--radius-sm);
  background: rgba(0,229,255,.08);
  color: var(--faq-cyan);
  font-family: var(--font-data);
  font-size: 13px;
  word-break: break-all;
}

@media (min-width: 900px){
  .page-faq{
    padding-bottom: var(--space-8);
  }
  .page-faq .faq-hero__media img{
    height: 300px;
  }
  .page-faq .faq-hero__content{
    margin: -72px 40px 0;
    padding: var(--space-6);
  }
  .page-faq .faq-hero__content h1{
    font-size: 36px;
  }
  .page-faq .faq-hero__desc{
    font-size: 15px;
    line-height: 1.8;
  }
  .page-faq .faq-quicksearch{
    margin-top: var(--space-5);
    padding: var(--space-3);
  }
  .page-faq .faq-shell{
    grid-template-columns: 272px minmax(0, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-7);
    align-items: start;
  }
  .page-faq .faq-index{
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    padding: var(--space-5) var(--space-4);
  }
  .page-faq .faq-index__nav{
    flex-direction: column;
    gap: var(--space-2);
    overflow: visible;
  }
  .page-faq .faq-index__link{
    flex: 0 0 auto;
    width: 100%;
    white-space: normal;
    padding: 12px 14px;
  }
  .page-faq .faq-index__link:hover,
  .page-faq .faq-index__link:focus-visible{
    border-color: var(--faq-cyan);
    color: var(--color-text-primary);
    background: rgba(0,229,255,.06);
  }
  .page-faq .faq-content{
    gap: var(--space-5);
  }
  .page-faq .faq-section{
    padding: var(--space-5);
  }
  .page-faq .faq-section__head h2{
    font-size: 26px;
  }
  .page-faq .faq-section__head > p:last-child{
    font-size: 15px;
  }
  .page-faq .faq-card__q{
    padding: 18px 22px;
    font-size: 16px;
  }
  .page-faq .faq-card__a{
    padding: 0 22px;
  }
  .page-faq .faq-card[open] .faq-card__a{
    padding-bottom: 22px;
  }
  .page-faq .faq-card__a p,
  .page-faq .faq-card__a ul{
    font-size: 15px;
  }
}