.page-faq{
  --faq-orange:#FF6B35;
  --faq-green:#C6FF00;
  --faq-purple:#3A2E5D;
  --faq-wine:#7A2E2E;
  --faq-line:#4A5A78;
  --faq-text:#E8E9ED;
  --faq-muted:#AAB3C8;
  --faq-dark:#141424;
}

.page-faq .faq-hero{
  position:relative;
  padding:clamp(2.25rem,6vw,4.5rem) 0 0;
  overflow:hidden;
}

.page-faq .faq-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(120deg,rgba(58,46,93,.92),rgba(31,42,68,.98) 56%,rgba(20,20,36,.99)),
    repeating-linear-gradient(90deg,transparent 0 44px,rgba(74,90,120,.18) 44px 45px);
}

.page-faq .faq-hero::after{
  content:"";
  position:absolute;
  top:-20%;
  right:-9%;
  width:54%;
  height:150%;
  z-index:-1;
  background:repeating-linear-gradient(-45deg,transparent 0 16px,rgba(198,255,0,.055) 16px 17px);
  transform:skewX(-12deg);
}

.page-faq .faq-hero__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
  padding-bottom:clamp(2.25rem,6vw,4.5rem);
}

.page-faq .faq-hero__kicker{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-bottom:1.2rem;
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--faq-green);
}

.page-faq .faq-hero__kicker::before{
  content:"";
  width:2.1rem;
  height:1px;
  background:var(--faq-green);
}

.page-faq .page-title{
  margin:0 0 1.4rem;
  font-family:var(--font-display);
  font-size:clamp(2rem,6vw,3.6rem);
  line-height:1.04;
  color:var(--faq-text);
  text-transform:none;
}

.page-faq .page-title__main{
  display:block;
}

.page-faq .page-title__accent{
  display:block;
  margin-top:.5rem;
  font-family:var(--font-mono);
  font-size:.56em;
  font-weight:400;
  letter-spacing:.06em;
  color:var(--faq-orange);
}

.page-faq .faq-hero__intro{
  max-width:64ch;
  margin-bottom:2rem;
  font-size:1rem;
  line-height:1.75;
  color:var(--faq-muted);
}

.page-faq .faq-hero__intro strong{
  color:var(--faq-green);
  font-weight:600;
}

.page-faq .faq-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}

.page-faq .faq-hero__visual{
  position:relative;
  justify-self:center;
  transform:rotate(2deg);
}

.page-faq .faq-hero__visual img{
  display:block;
  width:min(300px,78vw);
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  clip-path:polygon(16% 0,100% 0,84% 100%,0 100%);
  border:1px solid rgba(198,255,0,.5);
}

.page-faq .faq-stats{
  border-top:1px solid var(--faq-line);
  border-bottom:1px solid var(--faq-line);
  background:rgba(20,20,36,.55);
}

.page-faq .faq-stats__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}

.page-faq .faq-stat{
  background:transparent;
  border:0;
  text-align:center;
  padding:1.7rem .6rem;
}

.page-faq .faq-stat + .faq-stat{
  position:relative;
}

.page-faq .faq-stat + .faq-stat::before{
  content:"";
  position:absolute;
  left:0;
  top:26%;
  height:48%;
  width:1px;
  background:var(--faq-line);
}

.page-faq .faq-stat__num{
  display:block;
  margin-bottom:.35rem;
  font-family:var(--font-mono);
  font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:700;
  color:var(--faq-green);
}

.page-faq .faq-stat .data-card__label{
  color:var(--faq-muted);
  font-size:.82rem;
}

.page-faq .faq-section__header{
  border-bottom:1px solid var(--faq-line);
  padding-bottom:1rem;
  margin-bottom:1.4rem;
}

.page-faq .faq-section__lead{
  max-width:70ch;
  margin:-.4rem 0 2.4rem;
  color:var(--faq-muted);
  font-size:.96rem;
  line-height:1.7;
}

.page-faq .guide-layout{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  border-top:1px solid var(--faq-line);
}

.page-faq .guide-tab-input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.page-faq .guide-nav{
  display:flex;
  flex-wrap:wrap;
  border-bottom:1px solid var(--faq-line);
  background:rgba(26,26,46,.4);
}

.page-faq .guide-nav__link{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.95rem 1.1rem;
  border-right:1px solid var(--faq-line);
  font-family:var(--font-mono);
  font-size:.83rem;
  color:var(--faq-muted);
  cursor:pointer;
  transition:background .2s,color .2s;
}

.page-faq .guide-nav__num{
  font-size:.73rem;
  color:var(--faq-orange);
}

.page-faq .guide-tab-input:focus-visible ~ .guide-nav label[for="guide-tab-1"],
.page-faq .guide-tab-input:focus-visible ~ .guide-nav label[for="guide-tab-2"],
.page-faq .guide-tab-input:focus-visible ~ .guide-nav label[for="guide-tab-3"]{
  outline:2px solid var(--faq-green);
  outline-offset:-2px;
}

.page-faq #guide-tab-1:checked ~ .guide-nav label[for="guide-tab-1"],
.page-faq #guide-tab-2:checked ~ .guide-nav label[for="guide-tab-2"],
.page-faq #guide-tab-3:checked ~ .guide-nav label[for="guide-tab-3"]{
  background:var(--faq-purple);
  color:var(--faq-text);
}

.page-faq .guide-content{
  min-width:0;
}

.page-faq .guide-panel{
  display:none;
  padding:clamp(1.5rem,4vw,2.6rem);
  border-left:1px solid var(--faq-line);
  border-bottom:1px solid var(--faq-line);
  background:rgba(26,26,46,.32);
}

.page-faq #guide-tab-1:checked ~ .guide-content .guide-panel--tab1,
.page-faq #guide-tab-2:checked ~ .guide-content .guide-panel--tab2,
.page-faq #guide-tab-3:checked ~ .guide-content .guide-panel--tab3{
  display:block;
  animation:faqPanelIn .35s ease both;
}

.page-faq .guide-panel__kicker{
  margin-bottom:.9rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--faq-orange);
}

.page-faq .guide-panel__title{
  margin-bottom:.9rem;
  font-family:var(--font-display);
  font-size:clamp(1.35rem,3vw,2rem);
  line-height:1.2;
  color:var(--faq-text);
}

.page-faq .guide-panel__desc{
  max-width:72ch;
  margin-bottom:1.8rem;
  font-size:.94rem;
  line-height:1.7;
  color:var(--faq-muted);
}

.page-faq .guide-steps{
  margin:0 0 1.5rem;
  padding:0;
  list-style:none;
  counter-reset:guide-step;
  border-top:1px solid var(--faq-line);
}

.page-faq .guide-steps li{
  counter-increment:guide-step;
  display:flex;
  gap:1.1rem;
  padding:1.15rem 0;
  border-bottom:1px solid var(--faq-line);
}

.page-faq .guide-steps li::before{
  content:"0" counter(guide-step);
  min-width:2.1rem;
  font-family:var(--font-mono);
  font-size:.78rem;
  line-height:1.7;
  color:var(--faq-green);
}

.page-faq .guide-steps strong{
  display:block;
  margin-bottom:.3rem;
  font-size:1rem;
  color:var(--faq-text);
}

.page-faq .guide-steps span{
  font-size:.9rem;
  line-height:1.65;
  color:var(--faq-muted);
}

.page-faq .guide-legend{
  display:flex;
  flex-wrap:wrap;
  gap:1.3rem;
  margin-bottom:1.2rem;
  padding-top:.4rem;
}

.page-faq .guide-legend__item{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--faq-muted);
}

.page-faq .guide-legend__dot{
  width:.72rem;
  height:.72rem;
  display:inline-block;
  transform:rotate(45deg);
}

.page-faq .guide-legend__dot--red{
  background:var(--faq-wine);
  box-shadow:0 0 8px rgba(122,46,46,.7);
}

.page-faq .guide-legend__dot--orange{
  background:var(--faq-orange);
}

.page-faq .guide-legend__dot--green{
  background:var(--faq-green);
}

.page-faq .guide-figure{
  margin:0;
  border:1px solid var(--faq-line);
  background:var(--faq-dark);
}

.page-faq .guide-figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:8/6;
  object-fit:cover;
}

.page-faq .guide-figure figcaption{
  padding:.7rem 1rem;
  border-top:1px solid var(--faq-line);
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--faq-muted);
}

.page-faq .guide-filter-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-bottom:1.5rem;
}

.page-faq .guide-filter-card{
  position:relative;
  padding:1.3rem 1.4rem;
  border:1px solid var(--faq-line);
  background:rgba(20,20,36,.5);
}

.page-faq .guide-filter-card__icon{
  position:absolute;
  top:1rem;
  right:1rem;
  font-family:var(--font-display);
  font-size:1.6rem;
  color:var(--faq-green);
  opacity:.6;
}

.page-faq .guide-filter-card h4{
  margin-bottom:.5rem;
  font-size:1rem;
  color:var(--faq-text);
}

.page-faq .guide-filter-card p{
  margin:0;
  font-size:.86rem;
  line-height:1.65;
  color:var(--faq-muted);
}

.page-faq .guide-tip{
  display:flex;
  gap:.7rem;
  padding:.9rem 1.1rem;
  border-left:3px solid var(--faq-orange);
  background:rgba(255,107,53,.08);
  font-size:.86rem;
  line-height:1.6;
  color:var(--faq-text);
}

.page-faq .guide-tip__mark{
  flex-shrink:0;
  padding-top:.1rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.08em;
  color:var(--faq-orange);
}

.page-faq .guide-timeline{
  margin:0;
  padding:0;
  list-style:none;
}

.page-faq .guide-timeline li{
  position:relative;
  margin-left:.35rem;
  padding:0 0 1.8rem 1.9rem;
  border-left:1px solid var(--faq-line);
}

.page-faq .guide-timeline li:last-child{
  border-left-color:transparent;
  padding-bottom:0;
}

.page-faq .guide-timeline li::before{
  content:"";
  position:absolute;
  left:-.32rem;
  top:.3rem;
  width:.6rem;
  height:.6rem;
  background:var(--faq-green);
  transform:rotate(45deg);
}

.page-faq .guide-timeline__label{
  display:block;
  margin-bottom:.3rem;
  font-family:var(--font-mono);
  font-size:.82rem;
  color:var(--faq-green);
}

.page-faq .guide-timeline__text{
  font-size:.92rem;
  line-height:1.65;
  color:var(--faq-muted);
}

.page-faq .faq-questions{
  background:linear-gradient(180deg,transparent,rgba(26,26,46,.45));
}

.page-faq .faq-quicknav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55rem;
  margin-bottom:2rem;
}

.page-faq .faq-quicknav__title{
  margin-right:.35rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.14em;
  color:var(--faq-muted);
}

.page-faq .faq-quicknav__chip{
  display:inline-block;
  padding:.4rem .85rem;
  border:1px solid var(--faq-line);
  background:rgba(20,20,36,.4);
  font-family:var(--font-mono);
  font-size:.74rem;
  color:var(--faq-muted);
  transition:transform .2s,color .2s,border-color .2s;
}

.page-faq .faq-quicknav__chip:hover{
  color:var(--faq-green);
  border-color:var(--faq-green);
  transform:translateY(-2px);
}

.page-faq .faq-list{
  border-top:1px solid var(--faq-line);
  counter-reset:faq-item;
}

.page-faq .faq-item{
  counter-increment:faq-item;
  border-bottom:1px solid var(--faq-line);
  background:rgba(20,20,36,.3);
  transition:background .25s;
}

.page-faq .faq-item[open]{
  background:rgba(58,46,93,.3);
}

.page-faq .faq-item summary{
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  padding:1.3rem 1.1rem;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-mono);
  font-size:.92rem;
  font-weight:600;
  color:var(--faq-text);
}

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

.page-faq .faq-item summary::before{
  content:"Q" counter(faq-item,decimal-leading-zero);
  flex-shrink:0;
  padding:.1rem .4rem;
  border:1px solid var(--faq-line);
  font-size:.68rem;
  font-weight:400;
  color:var(--faq-orange);
}

.page-faq .faq-item summary::after{
  content:"+";
  flex-shrink:0;
  margin-left:auto;
  font-size:1.35rem;
  line-height:1;
  color:var(--faq-orange);
  transition:transform .25s;
}

.page-faq .faq-item[open] summary::after{
  content:"−";
  transform:rotate(180deg);
}

.page-faq .faq-item__body{
  max-width:78ch;
  padding:0 1.1rem 1.4rem 3rem;
  font-size:.9rem;
  line-height:1.7;
  color:var(--faq-muted);
}

.page-faq .faq-item__body a{
  color:var(--faq-green);
  text-decoration:underline;
  text-underline-offset:3px;
}

.page-faq .faq-contact__panel{
  position:relative;
  padding:clamp(1.6rem,4vw,2.6rem);
  border:1px solid var(--faq-line);
  background:linear-gradient(135deg,var(--faq-purple),rgba(20,20,36,.92));
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px));
  overflow:hidden;
}

.page-faq .faq-contact__panel::before{
  content:"03";
  position:absolute;
  right:.8rem;
  bottom:-.2rem;
  font-family:var(--font-display);
  font-size:7rem;
  line-height:1;
  color:rgba(232,233,237,.06);
  pointer-events:none;
}

.page-faq .faq-contact__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.6rem;
}

.page-faq .faq-contact__card{
  position:relative;
  z-index:1;
}

.page-faq .faq-contact__card h3{
  margin-bottom:.9rem;
  padding-bottom:.55rem;
  border-bottom:1px solid rgba(198,255,0,.2);
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faq-green);
}

.page-faq .faq-contact__card p{
  margin:0 0 .7rem;
  font-size:.9rem;
  line-height:1.65;
  color:var(--faq-text);
}

.page-faq .faq-contact__card a{
  display:inline-block;
  margin-right:.9rem;
  color:var(--faq-green);
  text-decoration:none;
}

.page-faq .faq-contact__card a:hover{
  text-decoration:underline;
}

@media (min-width:768px){
  .page-faq .faq-hero__inner{
    grid-template-columns:1fr 300px;
  }

  .page-faq .faq-stat{
    padding:2.25rem .6rem;
  }

  .page-faq .guide-layout{
    grid-template-columns:280px 1fr;
  }

  .page-faq .guide-nav{
    flex-direction:column;
    border-bottom:0;
    border-right:1px solid var(--faq-line);
  }

  .page-faq .guide-nav__link{
    border-right:0;
    border-bottom:1px solid var(--faq-line);
    padding:1.2rem 1.2rem;
  }

  .page-faq .guide-filter-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .page-faq .faq-contact__grid{
    grid-template-columns:repeat(3,1fr);
  }

  .page-faq .faq-item summary{
    padding:1.4rem 1.5rem;
  }

  .page-faq .faq-item__body{
    padding-right:1.5rem;
  }
}

@media (min-width:1100px){
  .page-faq .faq-hero__inner{
    grid-template-columns:minmax(0,1fr) 340px;
  }
}

@keyframes faqPanelIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
