/* CYBERNYX V1.2 — FAQ page. Uses v12.css tokens only. */

.faq-main{padding:88px 0 128px}
.faq-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:72px;align-items:start}

/* category index */
.faq-cats{position:sticky;top:112px}
.faq-cats-t{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.faq-cats ul{list-style:none;border-top:1px solid var(--ink)}
.faq-cats li a{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--muted);text-decoration:none;transition:color .2s}
.faq-cats li a::before{content:"";width:6px;height:6px;border-radius:1px;background:transparent;transition:background .2s;flex:none}
.faq-cats li a:hover{color:var(--ink)}
.faq-cats li a.active{color:var(--ink);font-weight:500}
.faq-cats li a.active::before{background:var(--neon)}

/* sections */
.faq-section{scroll-margin-top:100px}
.faq-section + .faq-section{margin-top:72px}
.faq-section .label{margin-bottom:8px}

/* accordion */
.faq-item{border-bottom:1px solid var(--line)}
.faq-section .faq-item:first-of-type{border-top:1px solid var(--ink)}
.faq-h{font:inherit;letter-spacing:0;line-height:inherit;margin:0}
.faq-q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:22px 0;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--body);font-size:17px;font-weight:600;line-height:1.45;color:var(--ink)}
.faq-q:hover .faq-q-text{color:#000}
.faq-q:focus-visible{outline-offset:4px}
.faq-q-text{flex:1;min-width:0}

/* minimal +/− indicator */
.faq-icon{position:relative;flex:none;width:14px;height:14px;margin-top:6px}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:0;top:50%;width:14px;height:1.5px;margin-top:-.75px;background:var(--ink);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.faq-icon::after{transform:rotate(90deg)}
.faq-item.open .faq-icon::after{transform:rotate(0)}

/* smooth height: grid row 0fr -> 1fr */
.faq-a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .35s cubic-bezier(.2,.7,.2,1),visibility 0s linear .35s}
.faq-item.open .faq-a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .35s cubic-bezier(.2,.7,.2,1),visibility 0s}
.faq-a-in{overflow:hidden;min-height:0;max-width:720px;padding-right:38px}
.faq-a-in > :first-child{margin-top:0}
.faq-a-in > :last-child{margin-bottom:24px}
.faq-a p,.faq-a li{font-size:16px;color:var(--muted);line-height:1.7}
.faq-a p + p,.faq-a p + ul,.faq-a ul + p{margin-top:12px}
.faq-a strong{color:var(--ink);font-weight:600}
.faq-a ul{list-style:none;display:grid;gap:6px}
.faq-a li{position:relative;padding-left:18px}
.faq-a li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;background:var(--line-2);border-radius:1px}

/* without JS every answer stays readable */
html:not(.js) .faq-a{grid-template-rows:1fr;visibility:visible}
html:not(.js) .faq-icon{display:none}

/* closing */
.faq-cta{margin-top:88px;padding-top:36px;border-top:1px solid var(--ink);display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.faq-cta h2{font-size:clamp(26px,2.6vw,32px);font-weight:600}
.faq-cta p{color:var(--muted);margin-top:8px}
.faq-cta-btns{display:flex;gap:12px;flex-wrap:wrap}

@media(max-width:900px){
  .faq-main{padding:56px 0 88px}
  .faq-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .faq-cats{position:static}
  .faq-cats ul{display:flex;flex-wrap:wrap;gap:0 22px;border-top:0}
  .faq-cats li a{border-bottom:0;padding:6px 0}
}
@media(max-width:560px){
  .faq-q{font-size:16px;gap:16px;padding:20px 0}
  .faq-a-in{padding-right:0}
  .faq-section + .faq-section{margin-top:56px}
  .faq-cta{margin-top:64px}
  .faq-cta-btns{width:100%}
  .faq-cta-btns .btn{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){.faq-a,.faq-item.open .faq-a{transition:none}}