/* ============================================================================
   /faq — central Q&A page (.fq-*)
   41 questions in 4 categories + a summary band. Structure mirrors the
   /products overview conventions: canonical 31px eyebrow chip with the
   light-up hover, site H1 standard (solid line + ONE static violet→pink→
   orange punch), quiet glass items, colour on glyphs + small labels only,
   one-time reveals, permanent pulse only on the real CTA.
   The accordion question rows are real clickables (button costume allowed).
   ============================================================================ */

.fq { display: block; }
.fq section { position: relative; max-width: 1180px; margin-inline: auto; padding: 2.7rem 1.5rem; }

/* ---------------------------------------------------------------- HERO */
.fq-hero { text-align: center; padding-top: 4rem; padding-bottom: 1.2rem; }

/* eyebrow chip — canonical 31px metrics + the blog-pill light-up hover */
.fq-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; line-height: 1; font-weight: 700; letter-spacing: .04em;
  padding: .5rem .95rem; border-radius: 12px; text-decoration: none;
  color: var(--accent-violet);
  background: color-mix(in srgb, var(--accent-violet) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-violet) 50%, transparent);
  transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.fq-eyebrow i { font-size: .85em; }
.fq-eyebrow:hover {
  background: var(--accent-violet); border-color: var(--accent-violet); color: #fff;
  transform: translateY(-3px); box-shadow: 0 8px 22px var(--accent-violet-glow);
}

/* H1 — site headline standard (the !important recipe outranks the global
   h1 gradients in both themes, incl. body.light-theme h1) */
.fq-h1 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.18;
  /* wide enough for the whole first sentence incl. "MR.ROBOT," on ONE line at
     desktop sizes — at 900px the wordmark wrapped alone to a middle line
     (user 2026-07-04); the gradient punch line stays its own block below */
  max-width: min(94vw, 1160px); margin: 1.2rem auto .9rem;
}
.fq-h1 .fq-line {
  display: block;
  background: none !important;
  -webkit-text-fill-color: var(--heading-color) !important; color: var(--heading-color) !important;
  text-shadow: none !important; animation: none !important; filter: none !important;
}
.fq-h1 .fq-grad {
  display: block;
  background-image: linear-gradient(90deg, var(--accent-violet), var(--accent-pink), var(--accent-orange)) !important;
  background-size: 100% auto !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  text-shadow: none !important; animation: none !important; filter: none !important;
  width: fit-content; max-width: 100%; margin-inline: auto;
}

.fq-sub {
  max-width: 680px; margin: 0 auto;
  font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.65; color: var(--text-secondary);
}

/* category chips — real anchor links, canonical chip metrics + light-up hover */
.fq-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.9rem; }
.fq-cat-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; line-height: 1; font-weight: 600;
  padding: .5rem .95rem; border-radius: 12px; text-decoration: none;
  color: var(--cc);
  background: color-mix(in srgb, var(--cc) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--cc) 40%, transparent);
  transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.fq-cat-link i { font-size: .85em; }
.fq-cat-link b { font-weight: 700; font-size: .72rem; opacity: .75; }
.fq-cat-link:hover, .fq-cat-link:focus-visible {
  background: var(--cc); border-color: var(--cc); color: #fff;
  transform: translateY(-3px); box-shadow: 0 8px 22px var(--cg, color-mix(in srgb, var(--cc) 35%, transparent));
}
.fq-cat-link:hover b, .fq-cat-link:focus-visible b { opacity: 1; }

/* ---------------------------------------------------------------- CATEGORY SECTIONS */
.fq-sec { max-width: 940px; scroll-margin-top: 96px; padding-block: 2.2rem; }
.fq-sec-top { text-align: center; max-width: 780px; margin: 0 auto 1.7rem; }

/* section marker — a FILLED category chip, matching the site's section-label /
   step-badge convention (solid accent fill, white text, 12px radius).
   (2026-07-04, user: the bare "01 | icon" typography read as stray characters
   floating between sentences — unclear to a visitor.) */
.fq-sec-label {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 800; font-size: .82rem;
  line-height: 1; letter-spacing: .12em; color: #fff;
  padding: .5rem .95rem; border-radius: 12px;
  background: var(--cc);
  box-shadow: 0 8px 22px var(--cg);
  margin-bottom: .95rem;
}
.fq-sec-label i { font-size: .9rem; }
.fq-sec-num { font-family: var(--font-display); font-weight: 800; font-size: .82rem; }

.fq-sec-title {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 2.9vw, 2rem); line-height: 1.25; color: var(--heading-color);
  margin: 0 0 .6rem; border-bottom: 0; padding-bottom: 0; /* kill the global h2 red underline */
}
.fq-sec-lede { max-width: 640px; margin: 0 auto; font-size: .96rem; line-height: 1.6; color: var(--text-secondary); }

/* ---------------------------------------------------------------- Q&A ITEMS */
.fq-list { display: flex; flex-direction: column; gap: .75rem; }
.fq-item {
  border-radius: 16px; scroll-margin-top: 96px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.fq-item:hover { border-color: var(--glass-border-hover); }
.fq-item.open { border-color: color-mix(in srgb, var(--cc) 45%, transparent); }

.fq-qh { margin: 0; padding: 0; font-size: inherit; }
.fq-q {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  padding: 1.05rem 1.15rem; cursor: pointer; text-align: start;
  background: transparent; border: none; border-radius: 16px;
  font-family: var(--font-main); font-weight: 600; font-size: 1.02rem; line-height: 1.45;
  color: var(--heading-color);
}
.fq-num {
  flex-shrink: 0; display: grid; place-items: center;
  min-width: 26px; height: 26px; padding-inline: .3rem; border-radius: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  color: var(--cc); background: color-mix(in srgb, var(--cc) 13%, transparent);
  transition: background .25s, color .25s;
}
.fq-item.open .fq-num { background: var(--cc); color: #fff; }
.fq-qt { flex: 1; }
.fq-chev { flex-shrink: 0; font-size: .8rem; color: var(--text-secondary); transition: transform .3s; }
.fq-item.open .fq-chev { transform: rotate(180deg); }

/* collapsed answer stays in the DOM (SEO/AEO) — grid-rows collapse */
.fq-ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.fq-item.open .fq-ans { grid-template-rows: 1fr; }
.fq-ans-in { overflow: hidden; min-height: 0; }
.fq-ans-in p {
  margin: 0; padding: 0 1.15rem 1.15rem;
  padding-inline-start: calc(1.15rem + 26px + .8rem); /* align under the question text */
  font-size: .97rem; line-height: 1.7; color: var(--text-secondary);
}

/* ---------------------------------------------------------------- SUMMARY BAND */
.fq-sum-sec { max-width: 940px; scroll-margin-top: 96px; padding-block: 2.2rem; }
.fq-sum {
  position: relative; overflow: hidden; text-align: center;
  padding: 2.6rem 2rem; border-radius: 24px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent-pink) 14%, transparent) 0%, transparent 55%),
    radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--accent-violet) 14%, transparent) 0%, transparent 55%),
    var(--surface-elevated);
  border: 1px solid var(--glass-border-hover); box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
/* filled chip + glow (user 2026-07-04: "שיהיה לו אפקט של תאורה"), pulsing
   SLOWLY like a heart (user 2026-07-04: gentle zoom-in/zoom-out, easy on the
   eyes — NOT a fast lub-dub — with a glow halo breathing around the button) */
.fq-sum-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; line-height: 1; font-weight: 700; letter-spacing: .04em;
  padding: .5rem .95rem; border-radius: 12px; margin-bottom: 1rem;
  color: #fff;
  background: var(--accent-pink);
  border: 1px solid var(--accent-pink);
  box-shadow: 0 8px 22px var(--accent-pink-glow), 0 0 14px 2px var(--accent-pink-glow);
  animation: fqSumPulse 3s ease-in-out infinite;
}
.fq-sum-chip i { font-size: .85em; }
@keyframes fqSumPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 22px var(--accent-pink-glow), 0 0 14px 2px var(--accent-pink-glow);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 10px 30px var(--accent-pink-glow), 0 0 34px 8px var(--accent-pink-glow);
  }
}
.fq-sum-q {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.35rem, 2.7vw, 1.9rem); line-height: 1.3; color: var(--heading-color);
  margin: 0 0 .8rem; border-bottom: 0; padding-bottom: 0;
}
.fq-sum-a { max-width: 720px; margin: 0 auto; font-size: 1.02rem; line-height: 1.7; color: var(--text-secondary); }

/* ---------------------------------------------------------------- CTA */
.fq-cta-sec { padding-top: 1.2rem; }
.fq-cta-card {
  position: relative; overflow: hidden; text-align: center; max-width: 820px; margin: 0 auto;
  padding: 3rem 2rem; border-radius: 26px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent-orange) 14%, transparent) 0%, transparent 55%),
    radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--accent-violet) 16%, transparent) 0%, transparent 55%),
    var(--surface-elevated);
  border: 1px solid var(--glass-border-hover); box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}
.fq-cta-title {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 2.9vw, 2.1rem); color: var(--heading-color);
  margin: 0 0 1.4rem; border-bottom: 0; padding-bottom: 0;
}
.fq-cta-row { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; align-items: center; }

/* primary = the site primary CTA look (real button → pulse allowed; the only
   pulsing element on this page) */
.fq-btn {
  display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; text-decoration: none; border: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff;
  padding: 1rem 1.9rem; border-radius: 12px;
  background: var(--gradient-primary); background-size: 170% 170%; box-shadow: 0 10px 28px var(--primary-glow);
  animation: pulseGlow 3.5s ease-in-out infinite;
  transition: transform .2s cubic-bezier(.175, .885, .32, 1.275), box-shadow .25s, background-position .4s;
}
.fq-btn:hover { transform: translateY(-3px); background-position: 100% 0; box-shadow: 0 14px 38px var(--primary-glow); }
.fq-btn i { transition: transform .25s; }
[dir="ltr"] .fq-btn i { transform: scaleX(-1); }
.fq-btn:hover i { transform: translateX(-5px); }
[dir="ltr"] .fq-btn:hover i { transform: scaleX(-1) translateX(-5px); }

/* secondary CTA in the takeoff coral key (user 2026-07-04: like the coloured
   secondary on About) — tinted at rest, fills + lights up on hover; the pulse
   stays exclusive to the primary (one pulsing CTA per screen) */
.fq-btn-ghost {
  background: color-mix(in srgb, var(--primary-color) 14%, transparent);
  color: var(--primary-color); box-shadow: none; animation: none;
  border: 1px solid color-mix(in srgb, var(--primary-color) 50%, transparent);
}
.fq-btn-ghost:hover {
  background: var(--primary-color); border-color: var(--primary-color); color: #fff;
  box-shadow: 0 8px 22px var(--primary-glow);
}

/* ---------------------------------------------------------------- REVEALS
   one-time scroll reveals (motion budget), staggered by --i */
.fq-rv { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; transition-delay: calc(var(--i, 0) * 70ms); }
.fq-rv.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- LIGHT THEME
   accent hexes are tuned for the dark bg — darken accent TEXT for contrast
   (same approach as products.css); tinted chip surfaces stay */
body.light-theme .fq-eyebrow { color: color-mix(in srgb, var(--accent-violet) 62%, #0a1424); }
body.light-theme .fq-eyebrow:hover { color: #fff; }
body.light-theme .fq-cat-link { color: color-mix(in srgb, var(--cc) 62%, #0a1424); }
body.light-theme .fq-cat-link:hover, body.light-theme .fq-cat-link:focus-visible { color: #fff; }
/* .fq-sec-label is a FILLED accent chip (white text) — correct in BOTH themes,
   so it deliberately gets NO light-theme darkening (the section-label rule). */
body.light-theme .fq-num { color: color-mix(in srgb, var(--cc) 62%, #0a1424); }
body.light-theme .fq-item.open .fq-num { color: #fff; }
/* .fq-sum-chip is a FILLED chip (white on pink) — correct in both themes */
body.light-theme .fq-btn-ghost { color: color-mix(in srgb, var(--primary-color) 62%, #0a1424); }
body.light-theme .fq-btn-ghost:hover { color: #fff; }
body.light-theme .fq-sum { box-shadow: 0 20px 50px rgba(15, 23, 42, .12); }
body.light-theme .fq-cta-card { box-shadow: 0 24px 60px rgba(15, 23, 42, .14); }

/* ---------------------------------------------------------------- MOTION OFF */
@media (prefers-reduced-motion: reduce) {
  .fq-rv { opacity: 1; transform: none; transition: none; }
  .fq-btn { animation: none; }
  .fq-ans { transition: none; }
  .fq-eyebrow:hover, .fq-cat-link:hover, .fq-btn:hover { transform: none; }
}

/* ---------------------------------------------------------------- MOBILE
   (kept at file end — later blocks must win over the base clamps; re-assert
   start-aligned Q&A text against the global ≤900px centering) */
@media (max-width: 900px) {
  .fq section { padding: 2.2rem 1rem; }
  .fq-hero { padding-top: 2.8rem; }
  /* unscoped (no .fq prefix) so the embedded accordions on home + the 12
     product pages get the same mobile re-asserts as /faq itself */
  .fq-q { text-align: start; margin-inline: 0; }
  .fq-ans-in, .fq-ans-in p { text-align: start; margin-inline: 0; }
  .fq-item { width: 100%; margin-inline: 0; }
  .fq-ans-in p { padding-inline-start: 1.15rem; } /* full width on small screens */
}
@media (max-width: 480px) {
  .fq-q { font-size: .97rem; padding: .95rem 1rem; gap: .65rem; }
  .fq-sum, .fq-cta-card { padding: 2.2rem 1.2rem; }
  .fq-btn { width: 100%; justify-content: center; }
}