/* ═══════════════════════════════════════════════
   TRITON FAQ — Page-Specific Styles
   Global design system: ../global.css
   ═══════════════════════════════════════════════ */


/* ════════════════════════════════════════════════
   FAQ HERO — Shorter than standard hero (utility page)
   ════════════════════════════════════════════════ */
.faq-hero-bg{
  background:url('../../media/images/backgrounds/faq-hero-bg.jpg') center/cover no-repeat
}
.faq-hero{
  height:auto;min-height:60vh;
  align-items:center;
  padding-top:12rem;padding-bottom:6rem
}
.faq-hero .hero-ct{padding-bottom:0}
.faq-hero .hero-ct .bc-list{padding:0;max-width:none;margin-bottom:1.5rem}
.faq-hero .hero-t{
  font-size:clamp(2.6rem,6vw,5.5rem);
  max-width:18ch
}
.faq-hero .hero-sub{max-width:60ch}
.faq-hero .hero-vid::after{
  background:linear-gradient(180deg,
    rgba(1,24,39,.7) 0%,
    rgba(1,24,39,.4) 30%,
    rgba(1,24,39,.5) 60%,
    rgba(1,24,39,.97) 100%)
}


/* ════════════════════════════════════════════════
   CATEGORY NAVIGATION — Anchor pills
   ════════════════════════════════════════════════ */
.faq-cats{
  background:linear-gradient(180deg,var(--bp) 0%,rgba(3,47,79,.3) 100%);
  padding:clamp(3rem,6vw,5rem) 0
}
.faq-cats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem
}
.faq-cat-card{
  display:flex;flex-direction:column;
  align-items:center;gap:.8rem;
  padding:1.6rem 1rem;
  background:rgba(1,24,39,.6);
  border:1px solid rgba(133,255,199,.1);
  cursor:pointer;
  transition:all .4s cubic-bezier(.16,1,.3,1);
  text-align:center
}
.faq-cat-card:hover{
  border-color:rgba(133,255,199,.3);
  transform:translateY(-4px);
  background:rgba(0,100,102,.12)
}
.faq-cat-card i{
  font-size:1.5rem;
  color:var(--aq);
  opacity:.7;
  transition:opacity .3s
}
.faq-cat-card:hover i{opacity:1}
.faq-cat-card span{
  font-family:var(--h);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
  transition:color .3s
}
.faq-cat-card:hover span{color:var(--w)}


/* ════════════════════════════════════════════════
   FAQ SECTIONS — Alternating backgrounds
   ════════════════════════════════════════════════ */
.faq-section{
  padding:clamp(5rem,10vw,8rem) 0;
  position:relative;overflow:hidden
}
.faq-section:nth-child(odd){
  background:linear-gradient(180deg,rgba(3,47,79,.2) 0%,rgba(1,24,39,.9) 100%)
}
.faq-section:nth-child(even){
  background:linear-gradient(180deg,rgba(1,24,39,.9) 0%,rgba(3,47,79,.2) 100%)
}

/* Category intro — GEO direct-answer block */
.faq-cat-intro{
  font-size:clamp(1.05rem,1.3vw,1.2rem);
  line-height:1.8;
  color:rgba(255,255,255,.72);
  max-width:800px;
  margin-bottom:clamp(2.5rem,5vw,3.5rem)
}

/* Section CTA below each FAQ category */
.faq-section-cta{
  margin-top:clamp(2rem,4vw,3rem);
  max-width:900px;
  margin-left:auto;
  margin-right:auto
}
.faq-section-cta a{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--h);font-weight:700;
  font-size:1rem;color:var(--aq);
  transition:all .3s;
  padding:.5rem 0;
  border-bottom:1px solid rgba(133,255,199,.2)
}
.faq-section-cta a:hover{
  border-color:var(--aq);
  transform:translateX(4px)
}
.faq-section-cta a i{
  font-size:.85rem;
  transition:transform .3s
}
.faq-section-cta a:hover i{
  transform:translateX(4px)
}


/* ════════════════════════════════════════════════
   EXPERT QUOTE — CEO attribution (GEO)
   ════════════════════════════════════════════════ */
.faq-quote-block{
  max-width:900px;
  margin:clamp(2.5rem,5vw,4rem) auto 0;
  padding:2rem 2.5rem;
  background:rgba(0,100,102,.08);
  border-left:3px solid var(--aq);
  position:relative
}
.faq-quote-block p{
  font-size:1.1rem;
  line-height:1.7;
  color:rgba(255,255,255,.85)
}
.faq-quote-block cite{
  display:block;
  margin-top:1rem;
  font-style:normal;
  font-weight:700;
  font-size:.95rem;
  color:var(--aq)
}

.link-underline {
  color: var(--aq);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ════════════════════════════════════════════════
   FAQ ANSWER — Internal links within answers
   ════════════════════════════════════════════════ */
.faq-a-inner a{
  color:var(--aq);
  border-bottom:1px solid rgba(133,255,199,.2);
  transition:border-color .3s
}
.faq-a-inner a:hover{
  border-color:var(--aq)
}
.faq-a-inner strong{
  color:var(--aq);
  font-weight:700
}


/* ════════════════════════════════════════════════
   FINAL CTA — "Still Have Questions?"
   ════════════════════════════════════════════════ */
.faq-final-cta{
  text-align:center;
  background:linear-gradient(180deg,rgba(0,100,102,.15) 0%,rgba(1,24,39,.95) 100%);
  position:relative
}
.faq-final-cta .s-inner{
  max-width:700px
}
.faq-final-cta .section-h{
  font-size:clamp(2.2rem,5vw,3.8rem)
}
.faq-final-body{
  font-size:clamp(1.1rem,1.4vw,1.25rem);
  line-height:1.8;
  color:rgba(255,255,255,.72);
  margin:1.5rem 0 clamp(2.5rem,5vw,3.5rem)
}
.faq-cta-btns{
  display:flex;gap:1.2rem;
  justify-content:center;
  flex-wrap:wrap
}


/* ════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤1024px)
   ════════════════════════════════════════════════ */
@media(max-width:1024px){
  .faq-cats-grid{grid-template-columns:repeat(4,1fr);gap:.8rem}
  .faq-cat-card{padding:1.3rem .8rem}
}

/* ════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤768px)
   ════════════════════════════════════════════════ */
@media(max-width:768px){
  .faq-hero{min-height:auto;padding-top:10rem;padding-bottom:4rem}
  .faq-hero .hero-t{font-size:clamp(2rem,8vw,3rem)}

  .faq-cats-grid{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .faq-cat-card{padding:1.2rem .8rem;gap:.5rem}
  .faq-cat-card i{font-size:1.2rem}
  .faq-cat-card span{font-size:.72rem}

  .faq-section{padding:clamp(3.5rem,8vw,5rem) 0}

  .faq-quote-block{padding:1.5rem;margin-top:2rem}
  .faq-quote-block p{font-size:1rem}

  .faq-cta-btns{flex-direction:column}
  .faq-cta-btns .btn{width:100%}
}

/* ════════════════════════════════════════════════
   RESPONSIVE — Small mobile (≤480px)
   ════════════════════════════════════════════════ */
@media(max-width:480px){
  .faq-hero{padding-top:8rem;padding-bottom:3rem}
  .faq-cats-grid{grid-template-columns:1fr 1fr;gap:.5rem}
  .faq-cat-card span{font-size:.68rem;letter-spacing:.04em}
}