/* ==========================================================================
   RaadScope, aanvullende stylesheet voor ALLEEN de homepage.
   Laadt na assets/site.css en bevat twee dingen:
     1. de secties die alleen op de home voorkomen (hero, zoekpaneel, probleem,
        oplossing, functies, voor-wie, pakketten, vertrouwen, FAQ, eind-CTA)
     2. de plekken waar de home bewust ruimer of groter is dan de subpagina's
   Tokens, reset, knoppen, header, footer en fonts staan in site.css.
   ========================================================================== */

/* ---------- Home-afwijkingen op gedeelde componenten ---------- */
/* De home ademt ruimer dan de subpagina's; site.css houdt de compactere maat. */
.pad{ padding-block:clamp(64px, 9vw, 116px); }
/* Op de home volgt de footer direct op de eind-CTA, dus zonder extra marge. */
.site-footer{ margin-top:0; }

/* Sectiekoppen (de subpagina's gebruiken hiervoor .subhero) */
.section-head{ max-width:640px; }
.section-head .eyebrow{ margin-bottom:18px; }
.section-head h2{ font-size:clamp(28px, 3.4vw, 41px); }
.section-head .lead{ margin-top:16px; color:var(--ink-soft); font-size:18.5px; }
.section-head.wide{ max-width:680px; }
.section-head.centered{ max-width:700px; margin-inline:auto; text-align:center; }

/* ===================== Hero ===================== */
.hero{ padding-top:clamp(46px, 7vw, 86px); padding-bottom:clamp(54px, 8vw, 104px); overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(34px, 5vw, 66px); align-items:center; }
/* grid-items mogen krimpen: voorkomt dat nowrap-inhoud in het paneel de kolom (en de pagina) breder maakt dan het scherm op iOS */
.hero-grid > *{ min-width:0; }
.hero h1{ font-size:clamp(36px, 5.1vw, 62px); line-height:1.05; letter-spacing:-.022em; margin-top:22px; overflow-wrap:break-word; }
.hero h1 .accent{ color:var(--blue-700); font-style:italic; }
.hero .sub{ margin-top:22px; font-size:clamp(17.5px,1.5vw,20px); color:var(--ink-soft); max-width:36em; overflow-wrap:break-word; }
.hero-cta{ margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; }
.hero-trust{
  margin-top:26px; display:flex; flex-wrap:wrap; gap:9px 20px;
  font-size:14px; color:var(--muted); font-weight:500;
}
.hero-trust span{ display:inline-flex; align-items:center; gap:8px; }
.hero-trust svg{ width:17px; height:17px; color:var(--green-600); flex:0 0 auto; }

/* faint scope-rings achter de hero */
.hero::before{
  content:""; position:absolute; right:-260px; top:-180px; width:760px; height:760px; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle, transparent 0 27%, rgba(37,99,173,.10) 27% 27.6%, transparent 27.6%),
    radial-gradient(circle, transparent 0 41%, rgba(37,99,173,.08) 41% 41.5%, transparent 41.5%),
    radial-gradient(circle, transparent 0 56%, rgba(27,133,90,.07) 56% 56.5%, transparent 56.5%);
  opacity:.9;
}
.hero .wrap{ position:relative; z-index:1; }

/* ===================== Zoekresultaat-paneel (demo) ===================== */
.panel{
  background:var(--white); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow-lg); overflow:hidden; position:relative;
}
.panel-top{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:linear-gradient(180deg, #fbfcfe, #f4f7fc); border-bottom:1px solid var(--line);
}
.panel-badge{
  margin-left:auto; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); background:var(--paper); border:1px solid var(--line); padding:4px 9px; border-radius:6px;
}
.searchbar{
  flex:1; display:flex; align-items:center; gap:10px; min-width:0;
  background:#fff; border:1.5px solid var(--blue-200, #cfe0f6); border-radius:10px; padding:10px 13px;
  box-shadow:0 0 0 4px rgba(37,99,173,.08);
}
.searchbar svg{ width:18px; height:18px; color:var(--blue-600); flex:0 0 auto; }
.searchbar .q{ font-size:15px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.searchbar .caret{ width:1.5px; height:18px; background:var(--blue-600); animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .searchbar .caret{ animation:none; } }

.filters{ display:flex; flex-wrap:wrap; gap:8px; padding:14px 16px 4px; }
.chip{
  font-size:13px; font-weight:500; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:6px 12px;
  display:inline-flex; align-items:center; gap:7px; cursor:default;
}
.chip svg{ width:13px; height:13px; opacity:.65; }
.chip.active{ color:var(--blue-800); background:var(--blue-50); border-color:var(--blue-100); }
.chip .pdot{ width:8px; height:8px; border-radius:50%; }

.results-meta{
  padding:12px 16px 6px; font-family:var(--ff-mono); font-size:12px; color:var(--muted);
  display:flex; align-items:center; justify-content:space-between;
}
.results{ padding:6px 14px 16px; display:flex; flex-direction:column; gap:11px; }

.result{
  position:relative; background:#fff; border:1px solid var(--line); border-left:3px solid var(--blue-600);
  border-radius:12px; padding:14px 15px; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.result:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-left-color:var(--green-600); }
.result-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.avatar{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  font-size:12.5px; font-weight:600; color:#fff; font-family:var(--ff-sans);
}
.speaker{ font-weight:600; font-size:14.5px; color:var(--ink); }
.party{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:2px 9px;
}
.party .pdot{ width:8px; height:8px; border-radius:50%; }
.timecode{ margin-left:auto; font-family:var(--ff-mono); font-size:12px; color:var(--blue-700); display:inline-flex; align-items:center; gap:6px; }
.timecode svg{ width:13px; height:13px; }
.meeting{ margin-top:7px; font-size:12.5px; color:var(--muted); }
.snippet{ margin-top:8px; font-size:14.5px; color:var(--ink-soft); line-height:1.55; overflow-wrap:break-word; }
mark{ background:var(--hl); color:var(--ink); padding:0 2px; border-radius:3px; font-weight:600; }
.result-foot{ margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.tag{
  font-size:11.5px; font-weight:500; color:var(--ink-soft); background:var(--paper);
  border:1px solid var(--line); border-radius:7px; padding:4px 9px; display:inline-flex; align-items:center; gap:6px;
}
.tag svg{ width:13px; height:13px; opacity:.7; }
.tag.doc{ color:var(--blue-700); }
.audio{
  margin-left:auto; display:inline-flex; align-items:center; gap:9px;
  color:var(--green-700); background:var(--green-100); border:1px solid #cfe9da; border-radius:8px; padding:5px 11px;
  font-size:12.5px; font-weight:600;
}
.audio svg{ width:14px; height:14px; }
.wave{ display:inline-flex; align-items:flex-end; gap:2px; height:15px; }
.wave i{ width:2.5px; background:var(--green-600); border-radius:2px; opacity:.85; }
/* Hoogte per balkje; stond eerder als inline style op elke <i>. */
.wave i.b5{ height:5px; }   .wave i.b6{ height:6px; }   .wave i.b7{ height:7px; }
.wave i.b8{ height:8px; }   .wave i.b9{ height:9px; }   .wave i.b10{ height:10px; }
.wave i.b11{ height:11px; } .wave i.b12{ height:12px; } .wave i.b13{ height:13px; }
.wave i.b14{ height:14px; } .wave i.b15{ height:15px; }

/* ===================== Probleem ===================== */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.problem-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px;
  box-shadow:var(--shadow-sm);
}
.problem-card .pnum{ font-family:var(--ff-mono); font-size:13px; color:var(--blue-600); font-weight:500; }
.problem-card h3{ font-size:21px; margin-top:12px; }
.problem-card p{ margin-top:10px; color:var(--ink-soft); font-size:16px; }
.problem-icon{
  width:48px; height:48px; border-radius:11px; display:grid; place-items:center; margin-bottom:18px;
  background:var(--blue-50); color:var(--blue-700); border:1px solid var(--blue-100);
}
.problem-icon svg{ width:24px; height:24px; }

/* ===================== Oplossing ===================== */
.solution{ background:linear-gradient(180deg, #fff, #fbfcfe); border-block:1px solid var(--line); }
.solution-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(30px,4vw,60px); align-items:center; }
.solution-grid h2{ font-size:clamp(27px,3.2vw,39px); margin-top:18px; }
.solution-grid .lead{ margin-top:18px; color:var(--ink-soft); font-size:18px; }
.solution-list{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.solution-list li{ display:flex; gap:13px; align-items:flex-start; color:var(--ink-soft); font-size:16.5px; }
.solution-list .ck{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--green-100); color:var(--green-700);
  display:grid; place-items:center; margin-top:1px; border:1px solid #cfe9da;
}
.solution-list .ck svg{ width:14px; height:14px; }

/* "Hoe het werkt" stappen */
.flow{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:var(--shadow-md); }
.flow h3{ font-size:15px; font-family:var(--ff-sans); font-weight:600; color:var(--muted); letter-spacing:.02em; text-transform:uppercase; font-size:12.5px; }
.flow-steps{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:0; }
.flow-steps li{ display:flex; gap:16px; align-items:flex-start; padding:14px 0; position:relative; }
.flow-steps li:not(:last-child){ border-bottom:1px dashed var(--line); }
.flow-steps .sn{
  flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:var(--blue-50); color:var(--blue-700); border:1px solid var(--blue-100);
}
.flow-steps .sn svg{ width:19px; height:19px; }
.flow-steps b{ display:block; font-size:15.5px; color:var(--ink); font-weight:600; }
.flow-steps span{ font-size:14.5px; color:var(--muted); }

/* ===================== Functies ===================== */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:50px; }
.feature{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.feature:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--blue-100); }
.feature .ficon{
  width:50px; height:50px; border-radius:12px; display:grid; place-items:center; margin-bottom:18px;
  background:linear-gradient(160deg, var(--blue-700), var(--blue-900)); color:#fff;
  box-shadow:0 8px 18px -10px rgba(14,42,80,.6);
}
.feature .ficon svg{ width:25px; height:25px; }
.feature h3{ font-size:20px; }
.feature p{ margin-top:11px; color:var(--ink-soft); font-size:15.5px; }
.feature .meta{ margin-top:14px; display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.04em; color:var(--green-700); text-transform:uppercase; }
.feature .meta.premium{ color:var(--blue-700); }
.feature .meta .pdot{ width:7px; height:7px; border-radius:50%; background:currentColor; }

/* ===================== Voor wie ===================== */
.audience{ background:var(--blue-900); color:#eaf1fa; border-block:1px solid var(--blue-900); }
.audience::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(700px 360px at 88% -10%, rgba(59,130,214,.22), transparent 60%),
    radial-gradient(620px 340px at 4% 110%, rgba(27,133,90,.16), transparent 60%);
}
.audience .wrap{ position:relative; }
.audience .eyebrow{ color:#bcd6f5; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); }
.audience h2{ color:#fff; font-size:clamp(27px,3.2vw,39px); }
.audience .lead{ color:#bcd0e8; margin-top:16px; max-width:640px; font-size:18px; }
.aud-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:48px; }
.aud-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
  padding:22px; transition:transform .18s ease, background .2s ease, border-color .2s ease;
}
.aud-card:hover{ transform:translateY(-4px); background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); }
.aud-card .aicon{ width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.1); color:#cfe2f8; margin-bottom:16px; }
.aud-card .aicon svg{ width:21px; height:21px; }
.aud-card h3{ color:#fff; font-size:18px; }
.aud-card p{ color:#a9c0dc; font-size:14px; margin-top:8px; }
.aud-card .more{ display:inline-flex; align-items:center; gap:6px; margin-top:13px; color:#9ec2f0; font-size:13.5px; font-weight:600; }
.aud-card .more:hover{ color:#fff; }
.aud-card .more svg{ width:14px; height:14px; }
.aud-foot{ margin-top:30px; color:#90aacb; font-size:14.5px; }

/* ===================== Pakketten =====================
   site.css bevat de basis van .plan, want /prijzen gebruikt dezelfde kaarten.
   Hieronder alleen wat op de home anders is, plus de onderdelen die alleen
   hier bestaan. Let op .price en li::before: op /prijzen staat de prijs als
   losse tekst en zijn de lijstitems kaal, dus zet site.css daar een serif-font
   op .price en een vinkje via li::before. Op de home zit de prijs in
   .amount/.note en heeft elk item een eigen .ck, dus die twee worden hier
   teruggedraaid. Zonder dat krijgt de home dubbele vinkjes en een prijsnotitie
   in de verkeerde letter. */
.plans{ margin-top:52px; }
.plan{ padding:30px 28px; height:100%; transition:transform .18s ease, box-shadow .22s ease; }
.plan:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.plan.featured{ position:relative; }
.plan.featured::after{
  content:"Meest compleet"; position:absolute; top:-13px; left:28px;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  background:var(--blue-800); color:#fff; padding:5px 12px; border-radius:999px;
}
.plan .pname{ font-size:24px; color:var(--ink); }
.plan .ptag{ min-height:42px; }
.plan .price{ margin-top:18px; padding-top:18px; font:inherit; color:inherit; }
.plan .price .amount{ font-family:var(--ff-display); font-size:23px; color:var(--blue-800); font-weight:600; }
.plan .price .note{ display:block; font-size:13px; color:var(--muted); margin-top:4px; }
.plan ul{ margin:22px 0 26px; gap:12px; }
.plan li{ align-items:flex-start; }
.plan li::before{ content:none; }
.plan li .ck{ flex:0 0 auto; width:21px; height:21px; border-radius:50%; background:var(--green-100); color:var(--green-700); display:grid; place-items:center; margin-top:1px; }
.plan li .ck svg{ width:13px; height:13px; }
.plan li.muted{ color:var(--muted); }
.plan li.muted .ck{ background:var(--paper); color:var(--muted); }
.plan .btn{ width:100%; }

/* ===================== Vertrouwen ===================== */
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.trust{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  box-shadow:var(--shadow-sm); display:flex; gap:16px; align-items:flex-start;
}
.trust .ticon{ flex:0 0 auto; width:46px; height:46px; border-radius:11px; display:grid; place-items:center; background:var(--green-100); color:var(--green-700); border:1px solid #cfe9da; }
.trust .ticon svg{ width:23px; height:23px; }
.trust h3{ font-size:18px; }
.trust p{ margin-top:7px; color:var(--ink-soft); font-size:14.5px; }

/* ===================== FAQ ===================== */
.faq-list{ max-width:820px; margin:44px auto 0; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.faq-item summary{ list-style:none; cursor:pointer; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--ff-display); font-size:19px; font-weight:500; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .faq-ico{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--blue-50); color:var(--blue-700); display:grid; place-items:center; transition:transform .2s ease, background .2s ease; }
.faq-item summary .faq-ico svg{ width:15px; height:15px; }
.faq-item[open] summary .faq-ico{ transform:rotate(45deg); background:var(--blue-100); }
.faq-item .faq-body{ padding:0 24px 22px; color:var(--ink-soft); font-size:16px; line-height:1.62; }
.faq-item summary:focus-visible{ outline:3px solid var(--blue-500); outline-offset:-3px; border-radius:6px; }

/* ===================== Eind-CTA =====================
   De basis van .cta-box staat in site.css (de subpagina's hebben hem ook);
   op de home is het blok een maat groter. */
.cta-final{ padding-block:clamp(64px,9vw,110px); }
.cta-box{ padding:clamp(40px,6vw,72px); }
.cta-box h2{ font-size:clamp(30px,4vw,50px); margin-top:20px; }
.cta-box p{ margin:18px auto 0; font-size:18.5px; }
.cta-box .actions{ margin-top:34px; }
.cta-box .email{ margin-top:22px; font-family:var(--ff-mono); font-size:14px; color:#bcd6f5; }
.cta-box .email a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.4); }

/* ===================== Scroll-reveal (alleen mét JS) ===================== */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1 !important; transform:none !important; transition:none; }
}

/* hero laad-animatie (pure CSS, geen JS nodig) */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference){
  .hero .anim{ opacity:0; animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) forwards; }
  .hero .d1{ animation-delay:.05s; } .hero .d2{ animation-delay:.16s; }
  .hero .d3{ animation-delay:.27s; } .hero .d4{ animation-delay:.38s; }
  .hero .d5{ animation-delay:.5s; }
}

/* ===================== Responsive (alleen de home-secties) ===================== */
@media (max-width: 1000px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-panel-wrap{ max-width:560px; }
  .solution-grid{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .aud-grid{ grid-template-columns:repeat(3,1fr); }
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .plan.featured{ order:-1; }
}
@media (max-width: 720px){
  body{ font-size:16.5px; }
  .grid-3, .grid-2{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns:1fr; }
  .aud-grid{ grid-template-columns:1fr 1fr; }
  .trust-grid{ grid-template-columns:1fr; }
}
@media (max-width: 460px){
  .aud-grid{ grid-template-columns:1fr; }
  .hero-cta .btn{ width:100%; justify-content:center; }
}