.faq { position: relative; isolation: isolate; overflow: hidden; background: #111310; border-top: 1px solid rgba(246,246,242,.13); font-family: Archivo, Manrope, sans-serif; }
.faq::before { content: ""; position: absolute; z-index: -1; width: 650px; height: 650px; top: -350px; left: -250px; background: radial-gradient(circle, rgba(126,224,74,.08), transparent 68%); pointer-events: none; }
.faq__inner { width: min(1280px, calc(100% - 96px)); margin: auto; padding: clamp(88px, 8vw, 128px) 0; display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: clamp(56px, 7vw, 100px); align-items: start; }
.faq__intro { position: sticky; top: 40px; }
.faq h2 { margin: 0; font-size: clamp(2.75rem, 4.5vw, 4.5rem); line-height: 1.04; font-weight: 600; letter-spacing: -.045em; }
.faq h2 em { color: #7ee04a; font-family: "Instrument Serif", Georgia, serif; font-weight: 400; }
.faq__lede { color: #b6b8ae; max-width: 34ch; margin: 26px 0 0; font-size: 1rem; line-height: 1.75; }
.faq__index { margin-top: 48px; max-width: 280px; }
.faq__count { display: flex; align-items: baseline; gap: 16px; font-variant-numeric: tabular-nums; }
#faq-current { color: #7ee04a; font-size: 5rem; line-height: 1; font-weight: 500; letter-spacing: -.07em; }
.faq__total { color: #93988d; font: .875rem "JetBrains Mono", monospace; }
.faq__topic { display: block; margin-top: 16px; color: #c3c7bc; font: .75rem "JetBrains Mono", monospace; line-height: 1.5; }
.faq__meter { height: 2px; background: rgba(246,246,242,.12); margin-top: 20px; overflow: hidden; }
.faq__meter span { display: block; width: 100%; height: 100%; background: #7ee04a; transform: scaleX(.2); transform-origin: left; transition: transform .55s cubic-bezier(.22,1,.36,1); }
.faq__questions { position: relative; border-top: 1px solid rgba(246,246,242,.16); }
.faq__rail { position: absolute; left: 0; top: 0; width: 2px; height: var(--faq-height, 0px); transform: translateY(var(--faq-top, 0px)); background: #7ee04a; box-shadow: 0 0 16px rgba(126,224,74,.3); pointer-events: none; z-index: 2; transition: transform .5s cubic-bezier(.22,1,.36,1), height .45s ease, opacity .25s ease; }
.faq__item { position: relative; border-bottom: 1px solid rgba(246,246,242,.16); transition: background .35s ease; }
.faq__item[open] { background: linear-gradient(110deg, rgba(126,224,74,.07), rgba(126,224,74,.01) 80%); }
.faq__item summary { list-style: none; display: grid; grid-template-columns: 26px minmax(0,1fr) 32px; align-items: center; gap: 18px; cursor: pointer; padding: 29px 24px; min-height: 100px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline-offset: -4px; border-radius: 4px; }
.faq__number { font: .75rem "JetBrains Mono", monospace; color: #93988d; transition: color .3s ease; }
.faq__question { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.45; letter-spacing: -.015em; font-weight: 500; color: #d8dcd2; transition: color .25s ease; }
.faq__item summary:hover .faq__question, .faq__item[open] .faq__question { color: #f6f6f2; }
.faq__item[open] .faq__number { color: #7ee04a; }
.faq__plus { position: relative; display: block; width: 32px; height: 32px; border: 1px solid rgba(246,246,242,.2); border-radius: 50%; transition: background .3s ease, border-color .3s ease; }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; background: #bec4b6; width: 10px; height: 1px; left: 10px; top: 15px; transition: transform .35s ease, background .3s ease; }
.faq__plus::after { transform: rotate(90deg); }
.faq__item[open] .faq__plus { background: #7ee04a; border-color: #7ee04a; }
.faq__item[open] .faq__plus::before, .faq__item[open] .faq__plus::after { background: #111310; }
.faq__item[open] .faq__plus::after { transform: rotate(0); }
.faq__answer { overflow: hidden; }
.faq__answer-inner { padding: 0 74px 30px 68px; }
.faq__answer p { font-size: 1rem; line-height: 1.8; color: #b6b8ae; margin: 0 0 16px; }
.faq__answer p:last-child { margin-bottom: 0; }
.faq__tag { display: inline-block; border: 1px solid rgba(126,224,74,.24); border-radius: 5px; padding: 7px 10px; color: #b6e99c; font-size: .75rem; line-height: 1.5; }
.faq__answer-link { display: inline-flex; align-items: center; gap: 16px; color: #7ee04a; font-size: .875rem; line-height: 1.6; padding: 5px 0; border-bottom: 1px solid rgba(126,224,74,.3); }
@media (max-width: 900px) {
  .faq__inner { width: calc(100% - 44px); grid-template-columns: 1fr; gap: 44px; padding: 80px 0; }
  .faq__intro { position: static; }
  .faq h2 br { display: none; }
  .faq h2 { max-width: 16ch; }
  .faq__index { display: none; }
}
@media (max-width: 620px) {
  .faq__inner { width: calc(100% - 36px); padding: 64px 0; }
  .faq h2 { font-size: clamp(2.5rem, 10vw, 3.5rem); }
  .faq__item summary { grid-template-columns: 20px minmax(0,1fr) 28px; gap: 12px; padding: 24px 12px; }
  .faq__plus { width: 28px; height: 28px; }
  .faq__plus::before, .faq__plus::after { left: 8px; top: 13px; }
  .faq__answer-inner { padding: 0 18px 28px 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq *, .faq *::before, .faq *::after { transition: none !important; animation: none !important; }
}