/* FAQ – pytanie z rozwijaną odpowiedzią (<details>). Treść: tools/faq.json → tools/generuj.ps1 */
.faq { display: grid; gap: 10px; margin-top: 28px; font-family: Montserrat, sans-serif; }
.faq details { border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; background: rgba(255, 255, 255, .04);
               margin: 0; padding: 0; transition: background .2s, border-color .2s; }
.faq details[open] { background: rgba(61, 107, 255, .09); border-color: rgba(159, 182, 255, .35); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 18px 22px;
               font-weight: 700; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.4; color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; margin-left: auto; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb6ff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: #c9d6ff; }
.faq summary:focus-visible { outline: 2px solid #9fb6ff; outline-offset: -2px; border-radius: 18px; }
.faq .odp { padding: 0 22px 20px; }
.faq .odp p { margin: 0 0 10px; color: #d6dcf5; font-weight: 500; font-size: 15px; line-height: 1.65; }
.faq .odp p:last-child { margin-bottom: 0; }
.faq .odp a { color: #9fb6ff; font-weight: 700; }
.faq-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 28px; }

/* Strona główna: sekcja FAQ bez własnego tła – przez półprzezroczyste karty widać przypiętą salę (canvas #vfaq).
   100vh odstępu u góry i u dołu = zakładka z sąsiednimi sekcjami (patrz komentarz w index.html). */
section.faq-home { height: auto; padding: 85vh 0 115vh; color: #fff; font-family: Montserrat, sans-serif; }   /* pas ma własne 150 px odstępu; +15vh oddechu przed formularzem */
/* Pas pod pytaniami: czarny, krycie 60% (--faq-krycie), wjeżdża na ekran razem z pytaniami i przesłania salę.
   Miękkie krawędzie (120 px) – pas stopniowo nachodzi na tło zamiast ciąć je ostrą linią. */
.faq-pas { --faq-krycie: .6; --k: rgba(0, 0, 0, var(--faq-krycie));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, var(--k) 120px, var(--k) calc(100% - 120px), rgba(0, 0, 0, 0) 100%);
  padding: 150px 0; }
.faq-home h2, .faq-home .kick, .faq-home .fq > p { text-shadow: 0 2px 18px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .6); }
.faq-home .faq details { background: rgba(8, 12, 32, .5); border-color: rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); }
.faq-home .faq details[open] { background: rgba(14, 22, 58, .66); border-color: rgba(159, 182, 255, .45); }
.faq-home .faq summary { text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.faq-home .fq { width: min(980px, 100% - 13vw); margin: 0 auto; }
.faq-home .kick { font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-size: 13px; color: #9fb6ff; margin: 0 0 16px; }
.faq-home h2 { font-weight: 800; line-height: 1.1; margin: 0 0 16px; font-size: clamp(28px, 2.6vw, 44px); }
.faq-home .fq > p { color: #d6dcf5; font-weight: 500; line-height: 1.6; margin: 0; font-size: clamp(15px, 1.1vw, 18px); max-width: 720px; }
.faq-home .btn2 { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 16px; padding: 15px 28px;
                  border-radius: 999px; text-decoration: none; background: #3d6bff; transition: background .2s; }
.faq-home .btn2:hover { background: #2f5cf0; }
.faq-home .btn2.ghost { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); }
.faq-home .btn2.ghost:hover { background: rgba(255, 255, 255, .16); }
@media (max-width: 680px) { .faq-home .fq { width: calc(100% - 32px); } .faq summary { padding: 16px 18px; } .faq .odp { padding: 0 18px 18px; } }