.page-faq{
  --faq-border: rgba(255,255,255,.08);
  --faq-card-bg: linear-gradient(150deg, rgba(18,44,79,.72), rgba(11,30,58,.95));
  --faq-glow: rgba(255,179,0,.14);
  position:relative;
}
.page-faq .container{
  max-width:1220px;
  margin-inline:auto;
  padding:28px var(--content-gutter) 72px;
}
.page-faq .breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--color-muted);
  margin-bottom:26px;
}
.page-faq .breadcrumb__link{
  color:var(--color-muted);
  text-decoration:none;
  transition:color .3s ease;
}
.page-faq .breadcrumb__link:hover,
.page-faq .breadcrumb__link:focus-visible{
  color:var(--color-amber);
}
.page-faq .breadcrumb__separator{
  color:rgba(168,180,200,.5);
}
.page-faq .breadcrumb__item{
  color:var(--color-body);
}
.page-faq .faq-hero{
  display:grid;
  gap:24px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 8%, rgba(0,210,106,.08), transparent 36%),
    radial-gradient(circle at 8% 100%, rgba(255,179,0,.08), transparent 42%),
    linear-gradient(145deg, rgba(18,44,79,.72), rgba(11,30,58,.92));
  border:1px solid var(--faq-border);
  border-radius:28px;
  box-shadow:var(--shadow-deep);
  padding:26px 18px 18px;
  margin-bottom:56px;
}
.page-faq .faq-hero::before{
  content:"";
  position:absolute;
  width:320px;
  height:320px;
  top:-110px;
  right:-70px;
  background:radial-gradient(circle, rgba(255,179,0,.12), transparent 62%);
  border-radius:50%;
  pointer-events:none;
}
.page-faq .faq-hero__content{
  position:relative;
  z-index:1;
  padding:4px;
}
.page-faq .faq-hero .eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--color-amber);
  background:rgba(255,179,0,.12);
  border-radius:var(--radius-pill);
  padding:6px 14px;
  margin-bottom:18px;
}
.page-faq .faq-hero .page-title{
  font-family:var(--font-heading);
  font-size:clamp(40px, 9vw, 64px);
  line-height:.95;
  letter-spacing:.02em;
  color:var(--color-heading);
  margin:0 0 16px;
  text-wrap:balance;
}
.page-faq .faq-hero .lead-paragraph{
  font-size:15px;
  line-height:1.75;
  color:var(--color-muted);
  max-width:56ch;
  margin:0;
}
.page-faq .faq-hero__media{
  position:relative;
  z-index:1;
  margin:0;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:var(--shadow-deep);
  transform:none;
}
.page-faq .faq-hero__media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.page-faq .faq-hot{
  margin-bottom:56px;
}
.page-faq .faq-hot__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}
.page-faq .faq-title{
  font-family:var(--font-heading);
  font-size:clamp(26px, 4vw, 36px);
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--color-heading);
  margin:0;
}
.page-faq .faq-title-note{
  margin:8px 0 0;
  font-size:14px;
  line-height:1.6;
  color:var(--color-muted);
}
.page-faq .faq-hot__index{
  flex-shrink:0;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.12em;
  color:var(--color-amber);
  background:rgba(255,179,0,.1);
  border:1px solid rgba(255,179,0,.22);
  border-radius:var(--radius-pill);
  padding:8px 14px;
  white-space:nowrap;
}
.page-faq .faq-hot__grid{
  display:grid;
  gap:16px;
}
.page-faq .faq-card{
  position:relative;
  background:var(--faq-card-bg);
  border:1px solid var(--faq-border);
  border-radius:22px 22px 22px 6px;
  overflow:hidden;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.page-faq .faq-card:hover,
.page-faq .faq-card:focus-within{
  border-color:rgba(255,179,0,.35);
  box-shadow:var(--shadow-deep);
  transform:translateY(-2px);
}
.page-faq .faq-card[open]{
  border-color:rgba(255,179,0,.28);
}
.page-faq .faq-card--hot::before{
  content:"";
  position:absolute;
  top:0;
  left:20%;
  width:60%;
  height:2px;
  background:var(--grad-amber);
  border-radius:2px;
  z-index:2;
}
.page-faq .faq-card summary{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px 16px;
  list-style:none;
  cursor:pointer;
}
.page-faq .faq-card summary::-webkit-details-marker{
  display:none;
}
.page-faq .faq-card__num{
  min-width:28px;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--color-amber);
  padding-top:2px;
}
.page-faq .faq-card__q{
  flex:1;
  font-size:15px;
  font-weight:600;
  line-height:1.55;
  color:var(--color-heading);
}
.page-faq .faq-card__icon{
  position:relative;
  flex:0 0 20px;
  width:20px;
  height:20px;
  margin-top:2px;
}
.page-faq .faq-card__icon::before,
.page-faq .faq-card__icon::after{
  content:"";
  position:absolute;
  top:9px;
  right:3px;
  width:14px;
  height:2px;
  border-radius:2px;
  background:var(--color-amber);
  transition:transform .3s ease, opacity .3s ease;
}
.page-faq .faq-card__icon::after{
  transform:rotate(90deg);
}
.page-faq .faq-card[open] .faq-card__icon::after{
  transform:rotate(0deg);
}
.page-faq .faq-card__answer{
  padding:0 16px 18px 58px;
  font-size:14px;
  line-height:1.75;
  color:var(--color-body);
}
.page-faq .faq-card__answer p{
  margin:0;
}
.page-faq .faq-card__answer a{
  color:var(--color-amber);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(255,179,0,.4);
  transition:text-decoration-color .3s ease;
}
.page-faq .faq-card__answer a:hover{
  text-decoration-color:var(--color-amber);
}
.page-faq .faq-card[open] .faq-card__answer{
  animation:faqAnswerIn .3s ease both;
}
@keyframes faqAnswerIn{
  from{
    opacity:0;
    transform:translateY(-6px);
  }
  to{
    opacity:1;
    transform:none;
  }
}
.page-faq .faq-layout{
  display:grid;
  gap:36px;
  margin-bottom:64px;
}
.page-faq .faq-sidebar{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-self:start;
  background:rgba(18,44,79,.5);
  border:1px solid var(--faq-border);
  border-radius:24px 24px 24px 8px;
  padding:20px 16px;
  backdrop-filter:blur(8px);
}
.page-faq .faq-search__label{
  display:block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--color-muted);
  margin-bottom:8px;
}
.page-faq .faq-search__row{
  position:relative;
}
.page-faq .faq-search__icon{
  position:absolute;
  top:50%;
  left:13px;
  width:14px;
  height:14px;
  border:2px solid var(--color-muted);
  border-radius:50%;
  transform:translateY(-60%);
  pointer-events:none;
}
.page-faq .faq-search__icon::after{
  content:"";
  position:absolute;
  top:10px;
  left:9px;
  width:2px;
  height:6px;
  background:var(--color-muted);
  border-radius:2px;
  transform:rotate(-45deg);
}
.page-faq .faq-search__input{
  width:100%;
  background:var(--color-bg-deep);
  border:1px solid var(--faq-border);
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.4;
  color:var(--color-heading);
  padding:12px 14px 12px 38px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.page-faq .faq-search__input::placeholder{
  color:var(--color-muted);
}
.page-faq .faq-search__input:focus{
  outline:none;
  border-color:rgba(255,179,0,.5);
  box-shadow:0 0 0 3px rgba(255,179,0,.12);
}
.page-faq .faq-search__hint{
  margin:0;
  font-size:12px;
  line-height:1.6;
  color:var(--color-muted);
}
.page-faq .faq-sidebar__title{
  margin:0 0 6px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-amber);
}
.page-faq .faq-cats{
  display:grid;
  gap:4px;
}
.page-faq .faq-cats__link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  font-size:14px;
  color:var(--color-body);
  text-decoration:none;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.page-faq .faq-cats__link span:first-child{
  font-size:15px;
  font-weight:500;
}
.page-faq .faq-cats__count{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--color-muted);
}
.page-faq .faq-cats__link:hover,
.page-faq .faq-cats__link:focus-visible{
  background:rgba(255,179,0,.1);
  color:var(--color-amber);
  transform:translateX(4px);
}
.page-faq .faq-sidebar__foot{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--faq-border);
}
.page-faq .faq-sidebar__foot p{
  margin:0 0 10px;
  font-size:13px;
  line-height:1.6;
  color:var(--color-muted);
}
.page-faq .faq-list{
  display:grid;
  gap:44px;
}
.page-faq .faq-section{
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.page-faq .faq-section > .faq-title{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
  font-size:clamp(22px, 3vw, 30px);
}
.page-faq .faq-section > .faq-title::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(255,179,0,.32), transparent);
}
.page-faq .faq-section .faq-card{
  margin-bottom:14px;
}
.page-faq .faq-contact{
  margin-top:12px;
  background:
    radial-gradient(circle at 84% 22%, rgba(255,179,0,.14), transparent 40%),
    radial-gradient(circle at 12% 90%, rgba(0,210,106,.08), transparent 36%),
    linear-gradient(145deg, rgba(18,44,79,.92), rgba(11,30,58,.8));
  border:1px solid var(--faq-border);
  border-radius:28px;
  padding:28px 18px 18px;
  overflow:hidden;
}
.page-faq .faq-contact__grid{
  display:grid;
  gap:24px;
  align-items:center;
}
.page-faq .faq-contact .eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--color-green);
  background:rgba(0,210,106,.1);
  border:1px solid rgba(0,210,106,.22);
  border-radius:var(--radius-pill);
  padding:6px 14px;
  margin-bottom:14px;
}
.page-faq .faq-contact .faq-title{
  font-size:clamp(26px, 4vw, 36px);
  margin-bottom:12px;
}
.page-faq .faq-contact__lead{
  font-size:15px;
  line-height:1.75;
  color:var(--color-muted);
  max-width:48ch;
  margin:0;
}
.page-faq .faq-contact__list{
  list-style:none;
  display:grid;
  gap:12px;
  padding:0;
  margin:22px 0 24px;
}
.page-faq .faq-contact__list li{
  display:grid;
  gap:2px;
  padding-bottom:12px;
  border-bottom:1px dashed rgba(255,255,255,.1);
}
.page-faq .faq-contact__label{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--color-amber);
}
.page-faq .faq-contact__label::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--color-green);
  box-shadow:0 0 12px rgba(0,210,106,.6);
  flex-shrink:0;
}
.page-faq .faq-contact__list li span:last-child{
  font-size:15px;
  line-height:1.55;
  color:var(--color-body);
  word-break:break-word;
}
.page-faq .faq-contact__media{
  margin:0;
  border-radius:24px 24px 24px 6px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-deep);
  aspect-ratio:4/3;
}
.page-faq .faq-contact__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
@media (min-width:700px){
  .page-faq .faq-hero{
    padding:32px 24px 24px;
  }
  .page-faq .faq-hot__grid{
    grid-template-columns:repeat(3, 1fr);
    align-items:start;
  }
  .page-faq .faq-contact{
    padding:36px 28px 28px;
  }
  .page-faq .faq-contact__grid{
    grid-template-columns:1.1fr .9fr;
  }
}
@media (min-width:960px){
  .page-faq .faq-hero{
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:32px;
    padding:40px 36px 36px;
  }
  .page-faq .faq-hero__media{
    margin:0;
    transform:rotate(1deg) translateY(6px);
  }
  .page-faq .faq-layout{
    grid-template-columns:264px 1fr;
    gap:44px;
  }
  .page-faq .faq-sidebar{
    position:sticky;
    top:calc(var(--header-h) + 24px);
    max-height:calc(100vh - var(--header-h) - 48px);
    overflow:auto;
  }
}