/* ============================================
   3HTS · FAQ X
   Cinematic FAQ pagina met dark hero + dark accordion cards
   ============================================ */

/* ============================================
   HERO — cinematic donker, FAQ-themed
   ============================================ */
.faq-hero-x{
  position:relative;
  padding:108px 0 60px;
  background:linear-gradient(180deg,#0d1117 0%,#161b22 60%,#0d1117 100%);
  color:#fff;
  overflow:hidden;
}

/* Floating blobs */
.faq-hero-x-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.faq-hero-x-bg span{
  position:absolute;border-radius:50%;
  filter:blur(80px);opacity:.45;
  pointer-events:none;
}
.faq-hero-x-bg span:nth-child(1){
  width:520px;height:520px;
  background:radial-gradient(circle,rgba(232,100,26,.55),transparent 70%);
  top:-100px;left:-150px;
  animation:fhxFloat1 22s ease-in-out infinite;
}
.faq-hero-x-bg span:nth-child(2){
  width:420px;height:420px;
  background:radial-gradient(circle,rgba(80,140,200,.4),transparent 70%);
  top:30%;right:-100px;
  animation:fhxFloat2 26s ease-in-out infinite;
}
.faq-hero-x-bg span:nth-child(3){
  width:360px;height:360px;
  background:radial-gradient(circle,rgba(180,80,200,.32),transparent 70%);
  bottom:-150px;left:40%;
  animation:fhxFloat3 20s ease-in-out infinite;
}
@keyframes fhxFloat1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(150px,90px) scale(1.2)}
}
@keyframes fhxFloat2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-120px,-80px) scale(1.15)}
}
@keyframes fhxFloat3{
  0%,100%{transform:translate(0,0) scale(.9)}
  50%{transform:translate(-180px,-100px) scale(1.1)}
}

/* Mesh */
.faq-hero-x-mesh{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/72px 72px,
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/72px 72px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 30%,transparent 90%);
  opacity:.5;
  animation:fhxMeshDrift 50s linear infinite;
}
@keyframes fhxMeshDrift{
  0%{background-position:0 0,0 0}
  100%{background-position:72px 72px,72px 72px}
}

/* Beams */
.faq-hero-x-beam{
  position:absolute;width:1px;height:160%;
  background:linear-gradient(180deg,transparent 0%,rgba(232,100,26,.5) 50%,transparent 100%);
  z-index:1;pointer-events:none;
}
.faq-hero-x-beam:nth-of-type(1){left:18%;top:-30%;transform:rotate(12deg);animation:fhxBeam 8s ease-in-out infinite}
.faq-hero-x-beam:nth-of-type(2){left:82%;top:-30%;transform:rotate(-12deg);animation:fhxBeam 10s ease-in-out infinite 2s}
@keyframes fhxBeam{
  0%,100%{opacity:.15}
  50%{opacity:.65}
}

/* Sparkles */
.faq-hero-x-sparkles{position:absolute;inset:0;pointer-events:none;z-index:1}
.faq-hero-x-sparkles i{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,.9),0 0 12px rgba(232,100,26,.7);
  opacity:0;
}
.faq-hero-x-sparkles i:nth-child(1){top:14%;left:12%;animation:fhxTwinkle 3s ease-in-out infinite}
.faq-hero-x-sparkles i:nth-child(2){top:24%;left:88%;animation:fhxTwinkle 4s ease-in-out infinite .8s}
.faq-hero-x-sparkles i:nth-child(3){top:60%;left:6%;animation:fhxTwinkle 3.5s ease-in-out infinite 1.6s}
.faq-hero-x-sparkles i:nth-child(4){top:72%;left:94%;animation:fhxTwinkle 4.5s ease-in-out infinite 2.4s}
.faq-hero-x-sparkles i:nth-child(5){top:42%;left:50%;animation:fhxTwinkle 3.2s ease-in-out infinite 3.2s}
.faq-hero-x-sparkles i:nth-child(6){top:84%;left:34%;animation:fhxTwinkle 4s ease-in-out infinite .4s}
.faq-hero-x-sparkles i:nth-child(7){top:18%;left:65%;animation:fhxTwinkle 3.8s ease-in-out infinite 1.2s}
.faq-hero-x-sparkles i:nth-child(8){top:55%;left:78%;animation:fhxTwinkle 3.6s ease-in-out infinite 2.8s}
@keyframes fhxTwinkle{
  0%,100%{opacity:0;transform:scale(.5)}
  50%{opacity:1;transform:scale(1.4)}
}

/* Decoratieve vraagtekens (wireframe shapes) */
.faq-hero-x-shapes{position:absolute;inset:0;pointer-events:none;z-index:1}
.faq-hero-x-shapes svg{
  position:absolute;
  fill:none;stroke-width:1.4;
}
.faq-hero-x-shapes svg:nth-child(1){
  top:8%;left:4%;width:160px;height:160px;
  stroke:rgba(232,100,26,.22);
  animation:fhxRotate 32s linear infinite;
}
.faq-hero-x-shapes svg:nth-child(2){
  bottom:6%;right:4%;width:140px;height:140px;
  stroke:rgba(80,160,255,.22);
  animation:fhxRotate 26s linear infinite reverse;
}
.faq-hero-x-shapes svg:nth-child(3){
  top:50%;right:14%;width:90px;height:90px;
  stroke:rgba(232,100,26,.18);
  animation:fhxRotate 20s linear infinite;
}
@keyframes fhxRotate{
  to{transform:rotate(360deg)}
}

/* Hero inner */
.faq-hero-x-inner{
  position:relative;z-index:5;
  max-width:1100px;width:100%;
  margin:0 auto;padding:0 var(--pad-x);
  display:flex;flex-direction:column;align-items:center;gap:20px;
  text-align:center;
}

.faq-hero-x-kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;
  background:rgba(232,100,26,.1);
  border:1px solid rgba(232,100,26,.25);
  border-radius:99px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
  font-weight:700;color:var(--orange-light);text-transform:uppercase;
  opacity:0;transform:translateY(20px);
  animation:fhxFadeUp .9s var(--ease-out) .2s both;
}
.faq-hero-x-kicker::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 12px rgba(232,100,26,.8);
  animation:pxPulse 1.4s ease-in-out infinite;
}

.faq-hero-x-inner h1{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(30px,3.2vw,48px);line-height:.96;
  letter-spacing:-.02em;color:#fff;
  text-transform:uppercase;margin:0;
  max-width:18ch;
  opacity:0;transform:translateY(20px);
  animation:fhxFadeUp .9s var(--ease-out) .35s both;
}
.faq-hero-x-inner h1 em{
  font-family:var(--f-italic);font-style:italic;font-weight:400;
  color:var(--orange);text-transform:none;letter-spacing:.005em;
}
@keyframes fhxFadeUp{
  to{opacity:1;transform:none}
}

.faq-hero-x-lead{
  font-size:16px;line-height:1.55;
  color:rgba(255,255,255,.78);
  max-width:58ch;margin:0;
  opacity:0;transform:translateY(20px);
  animation:fhxFadeUp .9s var(--ease-out) .5s both;
}

.faq-hero-x-actions{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:14px;
  opacity:0;transform:translateY(20px);
  animation:fhxFadeUp .9s var(--ease-out) .65s both;
}

/* Outline button op donkere hero — wit met subtle border */
.faq-hero-x .btn-outline{
  color:#fff !important;
  border-color:rgba(255,255,255,.3) !important;
  background:rgba(255,255,255,.04) !important;
}
.faq-hero-x .btn-outline:hover{
  color:#fff !important;
  border-color:var(--orange) !important;
  background:rgba(232,100,26,.08) !important;
}

/* Stats badge row */
.faq-hero-x-stats{
  display:flex;gap:32px;flex-wrap:wrap;justify-content:center;margin-top:24px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
  width:100%;max-width:680px;
  opacity:0;transform:translateY(20px);
  animation:fhxFadeUp .9s var(--ease-out) .8s both;
}
.faq-hero-x-stat{
  display:flex;flex-direction:column;gap:4px;align-items:center;
}
.faq-hero-x-stat-num{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(24px,2.4vw,34px);line-height:1;
  color:var(--orange);
}
.faq-hero-x-stat-lbl{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  color:rgba(255,255,255,.55);text-transform:uppercase;
  font-weight:600;
}

/* Scroll indicator */
.faq-hero-x-scroll{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;
  color:rgba(255,255,255,.55);text-transform:uppercase;font-weight:600;
  pointer-events:none;
}
.faq-hero-x-scroll-line{
  width:1px;height:22px;
  background:linear-gradient(180deg,rgba(232,100,26,.7) 0%,transparent 100%);
  animation:fhxScrollPulse 2s ease-in-out infinite;
}
@keyframes fhxScrollPulse{
  0%,100%{opacity:.4;height:22px}
  50%{opacity:1;height:32px}
}
@media(max-width:700px){
  .faq-hero-x-scroll{display:none}
}

/* ============================================
   CATEGORY SECTIONS — licht met dark cards
   ============================================ */
.faq-cat-x{
  padding:80px 0;
  position:relative;
  background:var(--paper);
  border-top:1px solid var(--line);
}
.faq-cat-x:nth-of-type(even){
  background:var(--paper-2);
}
.faq-cat-x::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 40% at 20% 0%,rgba(232,100,26,.05) 0%,transparent 60%);
}

.faq-cat-x-inner{
  position:relative;z-index:1;
  max-width:1200px;margin:0 auto;padding:0 var(--pad-x);
  display:grid;grid-template-columns:340px 1fr;gap:60px;align-items:start;
}
@media(max-width:960px){
  .faq-cat-x-inner{grid-template-columns:1fr;gap:30px}
}

/* Sticky category header */
.faq-cat-x-head{
  position:sticky;top:120px;
  display:flex;flex-direction:column;gap:14px;
}
@media(max-width:960px){
  .faq-cat-x-head{position:static}
}

.faq-cat-x-mega{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(80px,12vw,160px);line-height:.85;
  color:rgba(232,100,26,.12);
  letter-spacing:-.04em;
  -webkit-text-stroke:1px rgba(232,100,26,.25);
  margin:0;
  pointer-events:none;
}
.faq-cat-x-kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;
  background:rgba(232,100,26,.08);
  border:1px solid rgba(232,100,26,.2);
  border-radius:99px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
  font-weight:700;color:var(--orange);text-transform:uppercase;
  align-self:flex-start;
}
.faq-cat-x-kicker::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 10px rgba(232,100,26,.6);
}
.faq-cat-x-head h2{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(22px,2.2vw,34px);line-height:1.05;
  color:var(--ink);letter-spacing:-.01em;margin:0;
  text-transform:uppercase;
}
.faq-cat-x-head h2 em{
  font-family:var(--f-italic);font-style:italic;font-weight:400;
  color:var(--orange);text-transform:none;letter-spacing:.005em;
}
.faq-cat-x-head p{
  font-size:15px;line-height:1.65;color:var(--ink-2);
  margin:0;max-width:38ch;
}

/* Decoratie lijn onder kop */
.faq-cat-x-deco{
  display:flex;align-items:center;gap:8px;
  margin-top:10px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
  color:var(--mute);text-transform:uppercase;font-weight:600;
}
.faq-cat-x-deco::after{
  content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(232,100,26,.4) 0%,transparent 100%);
}

/* ============================================
   FAQ ACCORDION — donker cinematic cards
   ============================================ */
.faq-x-list{
  display:flex;flex-direction:column;gap:14px;
}

.faq-x-item{
  position:relative;
  background:linear-gradient(160deg,rgba(22,27,34,.96) 0%,rgba(13,17,23,.98) 100%);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  transition:border-color .4s var(--ease-out),box-shadow .4s var(--ease-out),transform .4s var(--ease-out);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}

/* Top gradient line — wordt vol bij open */
.faq-x-item::before{
  content:"";
  position:absolute;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,transparent 0%,var(--orange) 50%,#ff8a3d 100%);
  box-shadow:0 0 14px rgba(232,100,26,.7);
  transition:width .8s var(--ease-out);
  z-index:2;
}
.faq-x-item.is-open::before,
.faq-x-item:hover::before{width:100%}

/* Subtle glow rechts onder */
.faq-x-item::after{
  content:"";
  position:absolute;bottom:-50%;right:-30%;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,100,26,.15) 0%,transparent 70%);
  opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease-out);
  z-index:0;
}
.faq-x-item:hover::after,
.faq-x-item.is-open::after{opacity:1}

.faq-x-item:hover{
  border-color:rgba(232,100,26,.35);
  box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 0 1px rgba(232,100,26,.12);
}
.faq-x-item.is-open{
  border-color:rgba(232,100,26,.45);
  box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 40px rgba(232,100,26,.12);
}

/* Question button */
.faq-x-q{
  position:relative;z-index:1;
  width:100%;
  display:flex;align-items:center;gap:20px;
  padding:24px 28px;
  background:transparent;border:0;
  text-align:left;cursor:pointer;
  font:inherit;color:inherit;
}
.faq-x-q-no{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;
  color:var(--orange);font-weight:700;
  min-width:28px;
}
.faq-x-q-text{
  flex:1;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(16px,1.4vw,20px);line-height:1.3;
  color:#fff;letter-spacing:-.005em;
}

/* Animated + → × toggle */
.faq-x-q-toggle{
  flex-shrink:0;
  width:36px;height:36px;
  border:1px solid rgba(232,100,26,.4);
  border-radius:50%;
  background:rgba(232,100,26,.08);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  transition:all .4s var(--ease-out);
}
.faq-x-q-toggle::before,
.faq-x-q-toggle::after{
  content:"";
  position:absolute;
  background:var(--orange);
  transition:transform .4s var(--ease-out);
}
.faq-x-q-toggle::before{
  width:14px;height:2px;
}
.faq-x-q-toggle::after{
  width:2px;height:14px;
}
.faq-x-item.is-open .faq-x-q-toggle{
  background:var(--orange);
  border-color:var(--orange);
  transform:rotate(135deg);
}
.faq-x-item.is-open .faq-x-q-toggle::before,
.faq-x-item.is-open .faq-x-q-toggle::after{
  background:#fff;
}

/* Answer panel */
.faq-x-a{
  position:relative;z-index:1;
  max-height:0;overflow:hidden;
  transition:max-height .5s var(--ease-out);
}
.faq-x-a-inner{
  padding:0 28px 24px 76px;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:20px;
}
.faq-x-a p{
  margin:0;
  font-size:15px;line-height:1.7;
  color:rgba(255,255,255,.72);
}
.faq-x-item.is-open .faq-x-a{
  max-height:600px;
}

@media(max-width:640px){
  .faq-x-q{padding:18px 20px;gap:14px}
  .faq-x-a-inner{padding:18px 20px 22px 20px}
  .faq-x-q-text{font-size:15px}
}

/* ============================================
   EMPTY/CTA SECTIE
   ============================================ */
.faq-empty-x{
  padding:80px 0;
  background:linear-gradient(180deg,#0d1117 0%,#161b22 100%);
  color:#fff;
  position:relative;overflow:hidden;
  text-align:center;
}
.faq-empty-x::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%,rgba(232,100,26,.12),transparent 50%),
    radial-gradient(circle at 85% 80%,rgba(28,79,168,.1),transparent 50%);
}
.faq-empty-x-mesh{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/80px 80px,
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/80px 80px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 30%,transparent 90%);
  opacity:.5;
  animation:fhxMeshDrift 60s linear infinite;
}
.faq-empty-x-inner{
  position:relative;z-index:1;
  max-width:760px;margin:0 auto;padding:0 var(--pad-x);
  display:flex;flex-direction:column;align-items:center;gap:22px;
}
.faq-empty-x h3{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(22px,2.2vw,34px);line-height:1.05;
  color:#fff;letter-spacing:-.01em;margin:0;
  text-transform:uppercase;
}
.faq-empty-x h3 em{
  font-family:var(--f-italic);font-style:italic;font-weight:400;
  color:var(--orange);text-transform:none;
}
.faq-empty-x p{
  font-size:16px;line-height:1.65;color:rgba(255,255,255,.75);
  margin:0;max-width:54ch;
}
.faq-empty-x-cta{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px;
}

/* Outline button op donker */
.faq-empty-x .btn-outline{
  color:#fff !important;
  border-color:rgba(255,255,255,.3) !important;
  background:rgba(255,255,255,.04) !important;
}
.faq-empty-x .btn-outline:hover{
  color:#fff !important;
  border-color:var(--orange) !important;
}