/* Întrebări frecvente (09.10.2026), before contact. Gabi chose the intro from V3 (Codex: eyebrow, two-tone title,
   lead, link) and the question boxes from V4 (Claude). The „+" is two bars drawn in the middle of its circle instead of
   the text glyph, which sat below the centre. */
.faq-section{position:relative;isolation:isolate;overflow:clip;background-color:#08090c;color:#f5f5f7;padding:clamp(88px,10vw,130px) 0 clamp(24px,4vw,56px)}
.faq-inner{width:calc(100% - 2 * var(--skroll-content-gutter,40px));max-width:var(--skroll-content-max,1200px);margin:auto;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:start}

/* Intro, as in V3; the eyebrow is the one every V2 section has, grey with the violet dot (Gabi, 09.10). */
.faq-eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 16px;font-size:10px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:#9aa2b5}
.faq-eyebrow:before{content:'';width:5px;height:5px;border-radius:50%;background:#b6a0ff;box-shadow:0 0 14px #8254ff}
.faq-intro h2{margin:0 0 24px;font-size:clamp(36px,4vw,58px);font-weight:500;line-height:1.08;letter-spacing:-.045em}
.faq-intro h2 span{color:#858894}
.faq-lead{max-width:340px;font-size:15px;line-height:1.8;color:#9195a1}
.faq-intro>a{display:inline-block;margin-top:24px;color:#cdbfff;font-size:14px;text-decoration:none}
.faq-intro>a:focus-visible{outline:2px solid #b6a0ff;outline-offset:5px;border-radius:3px}

/* Question boxes, as in V4. The text is not selectable (Gabi, 09.10). faq.js eases the box open and shut; while it
   closes, .is-closing already shows the closed look, and [open] goes away only when the box has folded. The lighter
   open gradient fades in on :before, because a gradient background cannot transition. */
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{position:relative;isolation:isolate;overflow:hidden;border:1px solid #ffffff12;border-radius:18px;background:linear-gradient(180deg,#121117,#0d0d11);box-shadow:inset 0 1px 0 #ffffff0d;-webkit-user-select:none;user-select:none;transition:border-color .3s}
.faq-item:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#16131f,#0e0d13);opacity:0;transition:opacity .35s;pointer-events:none}
.faq-item[open]:not(.is-closing){border-color:#b6a0ff40}
.faq-item[open]:not(.is-closing):before{opacity:1}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;cursor:pointer;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.01em;color:#f5f5f7}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:'';flex:none;width:28px;height:28px;border-radius:50%;border:1px solid #ffffff1f;color:#cdbfff;background:linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat;transition:transform .35s cubic-bezier(.22,1,.36,1),background-color .3s,color .3s,border-color .3s}
.faq-item[open]:not(.is-closing) summary:after{transform:rotate(45deg);background-color:#b6a0ff;color:#140d24;border-color:#b6a0ff}
.faq-item summary:focus-visible{outline:2px solid #cdbfff;outline-offset:-2px;border-radius:18px}
.faq-answer{padding:0 22px 22px}
.faq-answer p{margin:0;max-width:620px;font-size:15px;line-height:1.75;color:#a3a6b2}
/* Answers Gabi still has to supply (prices, domain/hosting, help with content, support): visible on purpose. */
mark.faq-todo{padding:1px 6px;border-radius:6px;border:1px dashed #b6a0ff99;background:#b6a0ff1f;color:#e6ddff;font-weight:500;-webkit-box-decoration-break:clone;box-decoration-break:clone}

@media(max-width:900px){.faq-inner{grid-template-columns:1fr;gap:32px}}
@media(max-width:767px){.faq-lead{max-width:none}}
@media(max-width:700px){.faq-eyebrow{font-size:11px;letter-spacing:.14em}.faq-item summary{padding:18px;font-size:15px}.faq-answer{padding:0 18px 18px}}