/* Nasci FAQ (nf) */
@property --nf-a{syntax:'<angle>';initial-value:0deg;inherits:false;}

.nf{
  padding:var(--nf-pad,clamp(64px,8vh,104px)) 24px;
  background:
    radial-gradient(40% 44% at 4% 6%,color-mix(in srgb,var(--nf-accent,#90E509) 12%,transparent),transparent 62%),
    linear-gradient(180deg,var(--nf-bg1,#F7FAF4) 0%,var(--nf-bg2,#F1F6EC) 100%);
  color:#0C2721;
  font-family:'Satoshi',ui-sans-serif,system-ui,sans-serif;
}
.nf *{margin:0;padding:0;box-sizing:border-box;}
.nf a{text-decoration:none;color:inherit;}
.nf-inner{
  max-width:var(--nf-max,1350px);margin:0 auto;
  display:grid;grid-template-columns:minmax(280px,400px) minmax(0,1fr);
  gap:clamp(30px,4.5vw,72px);
  align-items:start;
}
@media (max-width:940px){.nf-inner{grid-template-columns:minmax(0,1fr);}}

/* -- Linkerkolom -- */
.nf-side{position:sticky;top:28px;}
@media (max-width:940px){.nf-side{position:static;}}
.nf-side h2{
  font-family:'Aloevera','Satoshi',ui-sans-serif,system-ui,sans-serif;
  font-weight:800;font-size:clamp(30px,3.6vw,46px);line-height:1.06;letter-spacing:-.01em;
  color:#0C2721;
}
.nf-side h2 em{font-style:normal;color:var(--nf-accent-dark,#3E7A0B);}
.nf-side > p{margin-top:14px;font-size:15px;line-height:1.7;color:rgba(12,39,33,.62);}

/* adviseurkaart */
.nf-help{
  margin-top:24px;
  position:relative;
  border-radius:22px;overflow:hidden;
  background:linear-gradient(160deg,#123B31 0%,#0C2721 60%,#081F1A 100%);
  color:#fff;padding:22px;
}
.nf-help::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 70% at 92% 6%,color-mix(in srgb,var(--nf-accent,#90E509) 20%,transparent),transparent 62%);
  pointer-events:none;
}
.nf-help > *{position:relative;z-index:1;}
.nf-help-top{display:flex;align-items:center;gap:12px;}
.nf-ava{position:relative;flex:none;display:inline-flex;}
.nf-ava img{border-radius:50%;object-fit:cover;border:2px solid color-mix(in srgb,var(--nf-accent,#90E509) 60%,transparent);}
.nf-ava > span{
  position:absolute;right:1px;bottom:1px;
  width:12px;height:12px;border-radius:50%;background:#31D07B;border:2px solid #0C2721;
}
.nf-help-top b{display:block;font-size:15px;font-weight:900;color:#fff;}
.nf-help-top small{display:block;margin-top:2px;font-size:12px;color:rgba(255,255,255,.6);}
.nf-help p{margin-top:14px;font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.72);}
.nf-cta,.nf-cta:hover,.nf-cta:focus,.nf-cta:visited{
  margin-top:16px;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:7px 7px 7px 22px;border-radius:999px;border:0;
  font-size:14.5px;font-weight:700;line-height:1;color:#fff!important;
  background:linear-gradient(135deg,#82DB05 0%,var(--nf-accent,#90E509) 55%,#A4EF23 100%);
  box-shadow:0 10px 26px rgba(144,229,9,.28),inset 0 1px 0 rgba(255,255,255,.35);
  position:relative;isolation:isolate;overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease;
}
.nf-cta > span:first-child{position:relative;z-index:2;}
.nf-cta::before{
  content:"";position:absolute;left:50%;top:50%;
  width:40px;height:40px;border-radius:50%;background:#0C2721;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);z-index:1;
}
.nf-cta:hover::before{transform:translate(-50%,-50%) scale(16);}
.nf-cta:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.4);}
.nf-cta .circ{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:rgba(255,255,255,.95);color:#0C2721;
  position:relative;z-index:2;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),background-color .35s ease;
}
.nf-cta .circ svg{width:15px;height:15px;}
.nf-cta:hover .circ{transform:rotate(45deg);background:var(--nf-accent,#90E509);}

/* -- Accordeon -- */
.nf-list{display:flex;flex-direction:column;gap:10px;}
.nf-item{
  position:relative;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(12,39,33,.08);
  box-shadow:0 10px 30px rgba(12,39,33,.06);
  transition:background-color .45s ease,border-color .45s ease,box-shadow .4s ease,transform .3s ease;
}
.nf-item:not(.is-open):hover{
  transform:translateX(4px);
  box-shadow:0 18px 44px rgba(12,39,33,.1);
  border-color:color-mix(in srgb,var(--nf-accent,#90E509) 45%,transparent);
}
/* open: donkere merkkaart met lopende lime beam */
.nf-item.is-open{
  background:
    radial-gradient(50% 60% at 92% 6%,color-mix(in srgb,var(--nf-accent,#90E509) 18%,transparent),transparent 62%),
    linear-gradient(160deg,#123B31 0%,#0C2721 58%,#081F1A 100%);
  border-color:transparent;
  box-shadow:0 30px 68px rgba(12,39,33,.28);
}
.nf-item.is-open::before{
  content:"";position:absolute;inset:-1px;border-radius:21px;padding:1.5px;
  background:conic-gradient(from var(--nf-a),transparent 0turn,transparent .7turn,rgba(144,229,9,.9) .82turn,#D9FF7A .88turn,rgba(144,229,9,.9) .94turn,transparent 1turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;animation:nf-beam 5.5s linear infinite;
}
@keyframes nf-beam{to{--nf-a:360deg;}}

/* vraagbalk — alle statussen vastgezet tegen thema-stijlen */
.nf-q,.nf-q:hover,.nf-q:focus,.nf-q:active{
  position:relative;z-index:1;
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 20px;border:none;background:none!important;cursor:pointer;
  font-family:inherit;text-align:left;color:#0C2721!important;
  box-shadow:none;
}
.nf-q span{font-size:15.5px;font-weight:800;line-height:1.35;transition:color .35s ease;}
.nf-item:not(.is-open) .nf-q:hover span{color:var(--nf-accent-dark,#3E7A0B);}
.nf-item.is-open .nf-q span{color:#fff;}
.nf-ic{
  width:38px;height:38px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:rgba(12,39,33,.06);color:#0C2721;
  transition:background-color .35s ease,color .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease;
}
.nf-ic svg{width:15px;height:15px;}
.nf-item:not(.is-open) .nf-q:hover .nf-ic{background:color-mix(in srgb,var(--nf-accent,#90E509) 20%,transparent);}
.nf-item.is-open .nf-ic{
  background:var(--nf-accent,#90E509);color:#0C2721;transform:rotate(135deg);
  box-shadow:0 8px 22px rgba(144,229,9,.4);
}
.nf-a{
  position:relative;z-index:1;
  overflow:hidden;height:0;
  transition:height .45s cubic-bezier(.22,.61,.36,1);
}
.nf-a-in{padding:0 20px 20px;}
/* kernantwoord als lime highlight */
.nf-key{
  display:flex;align-items:center;gap:11px;
  padding:12px 15px;border-radius:14px;
  background:color-mix(in srgb,var(--nf-accent,#90E509) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--nf-accent,#90E509) 28%,transparent);
  margin-bottom:13px;
}
.nf-key svg{width:16px;height:16px;color:var(--nf-accent,#90E509);flex:none;}
.nf-key b{
  font-size:14.5px;font-weight:900;color:#B9F35A;line-height:1.35;
  font-variant-numeric:tabular-nums;
}
.nf-a-in p{
  font-size:14px;line-height:1.75;color:rgba(255,255,255,.68);
  max-width:64ch;
}
.nf-a-in p + p{margin-top:10px;}
/* inhoud fadet gestaffeld in */
.nf-key,.nf-a-in p{opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .45s cubic-bezier(.22,.61,.36,1);}
.nf-item.is-open .nf-key{opacity:1;transform:none;transition-delay:.1s;}
.nf-item.is-open .nf-a-in p{opacity:1;transform:none;transition-delay:.18s;}
.nf-item.is-open .nf-a-in p + p{transition-delay:.26s;}

/* reveal */
.nf-item{opacity:0;transform:translateY(18px);}
.nf-item.is-in{opacity:1;transform:none;}
.nf-side{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1);}
.nf-side.is-in{opacity:1;transform:none;}

@media (max-width:600px){
  .nf-q{padding:16px 15px;gap:12px;}
  .nf-q span{font-size:14.5px;}
  .nf-ic{width:32px;height:32px;}
  .nf-a-in{padding:0 15px 16px;}
  .nf-key{padding:10px 12px;}
  .nf-key b{font-size:13px;}
  .nf-a-in p{font-size:13.5px;}
}

@media (prefers-reduced-motion:reduce){
  .nf-item.is-open::before{animation:none;}
  .nf-item,.nf-side,.nf-key,.nf-a-in p{opacity:1;transform:none;transition:none;}
  .nf-a{transition:none;}
}
