/* ============================================================
   ICT3Bruggen — voorpagina
   ============================================================ */

/* ------------------------------------------------------------
   HERO — editorial split
   H1-container is bewust breed (15ch) zodat de kop in 2 regels
   valt en nooit in een smalle kolom van 5-6 regels afbreekt.
   ------------------------------------------------------------ */
.hero{
  position:relative; display:flex; align-items:center;
  min-height:min(92svh, 900px);
  padding-top:calc(var(--header-h) + clamp(44px,6vw,80px));
  padding-bottom:clamp(64px,8vw,104px);
  overflow:clip;
  --mx:0px; --my:0px;
}
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__glow{
  position:absolute; right:-8vw; top:-14vw;
  width:min(62vw,820px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,101,47,.28), rgba(255,101,47,.07) 44%, transparent 68%);
  filter:blur(8px);
  transform:translate(var(--mx),var(--my));
  transition:transform .6s var(--ease-out);
}
.hero__grid{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(14,26,43,.07) 1px, transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 68% 40%, #000 28%, transparent 74%);
          mask-image:radial-gradient(ellipse 80% 70% at 68% 40%, #000 28%, transparent 74%);
}
/* Drie bruggen — het merkmotief, oplopende balken. */
.hero__bars{
  position:absolute; left:-46px; bottom:-30px;
  display:flex; align-items:flex-end; gap:14px; opacity:.5;
}
.hero__bars span{
  width:42px; border-radius:10px 10px 0 0;
  background:linear-gradient(180deg,var(--orange-soft),transparent);
}
.hero__bars span:nth-child(1){ height:90px }
.hero__bars span:nth-child(2){ height:150px }
.hero__bars span:nth-child(3){ height:220px }
.hero__bars span:nth-child(4){ height:300px }

.hero__inner{
  position:relative; z-index:2; width:100%;
  display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(40px,5vw,72px);
  align-items:center;
}
.hero__copy h1{ max-width:15ch; margin:20px 0 24px; }
.hero__copy .lead{ max-width:50ch; }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:36px; }
.hero__actions .btn{ width:auto; }

/* --- Statuspaneel ---
   De zwevende kaarten worden absoluut gepositioneerd t.o.v. .hero__visual.
   Die moet daarom net zo breed zijn als het paneel zelf, anders landen ze
   midden op het paneel in plaats van eromheen. */
.hero__visual{ position:relative; width:min(436px,100%); margin-left:auto; }
.panel{
  position:relative; margin-left:auto; max-width:436px;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-xl);
  box-shadow:var(--sh-lg); padding:28px;
}
.panel__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.panel__dot{ display:flex; align-items:center; gap:9px; font-family:var(--f-head); font-weight:600; font-size:.95rem; }
.panel__dot i{
  width:9px; height:9px; border-radius:50%; background:var(--ok);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%  { box-shadow:0 0 0 0 rgba(22,128,61,.45) }
  70% { box-shadow:0 0 0 9px rgba(22,128,61,0) }
  100%{ box-shadow:0 0 0 0 rgba(22,128,61,0) }
}
.panel__live{
  font-family:var(--f-head); font-weight:700; font-size:.66rem; letter-spacing:.12em;
  color:var(--ok); background:var(--ok-tint); padding:5px 11px; border-radius:var(--r-full);
}
.panel__status{
  display:flex; gap:24px; align-items:center;
  padding-bottom:24px; border-bottom:1px solid var(--line-2);
}
.status-ring{ position:relative; width:110px; height:110px; flex-shrink:0; }
.status-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-bg{ fill:none; stroke:var(--orange-tint); stroke-width:8; }
.ring-fg{
  fill:none; stroke:var(--orange); stroke-width:8; stroke-linecap:round;
  stroke-dasharray:213.6; stroke-dashoffset:213.6;
}
.in .ring-fg,
.no-js .ring-fg{ animation:ringfill 1.7s .2s var(--ease) forwards; }
@keyframes ringfill{ to{ stroke-dashoffset:2 } }
.status-ring__val{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.status-ring__val b{ font-family:var(--f-head); font-size:1.5rem; line-height:1; }
.status-ring__val small{ font-size:.7rem; color:var(--slate); }
.status-meta{ flex:1; display:grid; gap:13px; min-width:0; }
.status-meta__row{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.92rem; }
.status-meta__row span{ color:var(--slate); }
.status-meta__row b{ font-weight:600; font-size:.85rem; text-align:right; }
.ok{ color:var(--ok); }

.panel__bars{ display:flex; align-items:flex-end; gap:6px; height:64px; margin-top:22px; }
.panel__bars i{
  flex:1; height:var(--h); border-radius:4px; transform-origin:bottom;
  background:linear-gradient(180deg,var(--orange),var(--orange-soft));
}
.in .panel__bars i{ animation:growbar 1s var(--ease) backwards; }
.in .panel__bars i:nth-child(odd){  animation-delay:.18s }
.in .panel__bars i:nth-child(even){ animation-delay:.32s }
@keyframes growbar{ from{ transform:scaleY(0); opacity:0 } }

.float-card{
  position:absolute; display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r);
  padding:12px 16px; box-shadow:var(--sh-lg);
  animation:floaty 5s ease-in-out infinite;
}
.float-card b{ display:block; font-family:var(--f-head); font-size:.86rem; }
.float-card small{ display:block; color:var(--slate); font-size:.74rem; }
.float-ic{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--orange-tint); color:var(--orange-600);
}
.float-ic svg{ width:19px; height:19px; }
.float-ic.ok{ background:var(--ok-tint); color:var(--ok); }
/* Net buiten de linkerhoeken, zodat ze het paneel omlijsten en niet de
   koptekst of de grafiek afdekken. */
.float-card--a{ top:-64px;    left:-96px; }
.float-card--b{ bottom:-34px; left:-64px; animation-delay:1.4s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }

/* ------------------------------------------------------------
   PARTNERSTRIP — oneindige marquee
   ------------------------------------------------------------ */
.trust{ background:#fff; border-block:1px solid var(--line); padding-block:26px; overflow:hidden; }
.trust__label{
  font-family:var(--f-head); font-weight:600; font-size:.76rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--slate-2);
  text-align:center; margin-bottom:20px;
}
.marquee{
  display:flex; gap:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:52px; flex-shrink:0;
  padding-right:52px;
  animation:marquee 34s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-100%) } }
.trust__item{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  font-family:var(--f-head); font-weight:600; font-size:1rem; color:var(--ink-600);
}
.trust__item svg{ width:20px; height:20px; color:var(--orange); flex-shrink:0; }

@media (prefers-reduced-motion:reduce){
  .marquee{ mask-image:none; -webkit-mask-image:none; overflow-x:auto; }
  .marquee__track{ animation:none; flex-wrap:wrap; justify-content:center; gap:20px 40px; }
  .marquee__track[aria-hidden="true"]{ display:none; }
}

/* ------------------------------------------------------------
   DIENSTEN — bento op 12 kolommen, altijd zonder gaten

   Elke rij telt precies op tot 12. De verdeling hangt af van het aantal
   kaarten, want een vaste 3-koloms grid laat bij 4 of 5 diensten een lege
   cel achter — precies het gat dat een bento-grid goedkoop laat ogen.

     3 of 6+ kaarten : 4+4+4
     exact 4 kaarten : 6+6 / 6+6
     exact 5 kaarten : 4+4+4 / 6+6
     exact 6 kaarten : 5+4+3 / 3+4+5   (gespiegeld ritme)
   ------------------------------------------------------------ */
.svc-grid{
  display:grid; grid-auto-flow:dense;
  grid-template-columns:repeat(12,1fr); gap:18px;
  margin-top:clamp(40px,5vw,64px);
}
.svc{
  grid-column:span 4;
  display:flex; flex-direction:column; align-items:flex-start;
  position:relative; overflow:hidden; isolation:isolate;
}

/* exact 4 */
.svc-grid:has(> :nth-child(4):last-child) .svc{ grid-column:span 6; }

/* exact 5 — laatste twee breder zodat de tweede rij dichtloopt */
.svc-grid:has(> :nth-child(5):last-child) .svc:nth-child(n+4){ grid-column:span 6; }

/* exact 6 */
.svc-grid:has(> :nth-child(6):last-child) .svc:nth-child(1),
.svc-grid:has(> :nth-child(6):last-child) .svc:nth-child(6){ grid-column:span 5; }
.svc-grid:has(> :nth-child(6):last-child) .svc:nth-child(2),
.svc-grid:has(> :nth-child(6):last-child) .svc:nth-child(5){ grid-column:span 4; }
.svc-grid:has(> :nth-child(6):last-child) .svc:nth-child(3),
.svc-grid:has(> :nth-child(6):last-child) .svc:nth-child(4){ grid-column:span 3; }
.svc::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(ellipse 70% 60% at 20% 0%, var(--orange-tint), transparent 70%);
  transition:opacity .4s var(--ease);
}
.svc:hover::before{ opacity:1; }
.svc__ic{
  width:54px; height:54px; border-radius:15px; margin-bottom:20px;
  display:grid; place-items:center;
  background:var(--orange-tint); color:var(--orange-600);
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.svc__ic svg{ width:26px; height:26px; }
.svc:hover .svc__ic{ background:var(--orange); color:#fff; transform:scale(1.06) rotate(-4deg); }
.svc h3{ margin-bottom:10px; }
.svc p{ color:var(--slate); font-size:.97rem; }
.svc__more{
  margin-top:auto; padding-top:18px;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-head); font-weight:600; font-size:.9rem; color:var(--orange-600);
}
.svc__more svg{ width:16px; height:16px; transition:transform .28s var(--ease); }
.svc:hover .svc__more svg{ transform:translateX(5px); }

/* ------------------------------------------------------------
   CIJFERS
   ------------------------------------------------------------ */
.stats__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  padding-block:clamp(48px,6vw,72px);
}
.stat{ text-align:center; padding-inline:12px; border-right:1px solid rgba(255,255,255,.11); }
.stat:last-child{ border-right:0; }
.stat__val{
  display:block; font-family:var(--f-head); font-weight:700; line-height:1;
  font-size:clamp(2.3rem,4.2vw,3.3rem); color:var(--orange);
  font-variant-numeric:tabular-nums;
}
.stat__val small{ font-size:.42em; font-weight:600; color:var(--ink-on-muted); margin-left:3px; }
.stat__label{ display:block; margin-top:12px; color:var(--ink-on-muted); font-size:.95rem; }

/* ------------------------------------------------------------
   WAAROM WIJ
   ------------------------------------------------------------ */
.why{ background:#fff; }
.why__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,5.5vw,72px); align-items:center; }
.why__panel{
  background:linear-gradient(165deg,var(--orange-tint),#fff);
  border:1px solid var(--orange-soft); border-radius:var(--r-xl);
  padding:clamp(26px,3vw,34px); box-shadow:var(--sh);
}
.why__panel-top{
  padding-bottom:22px; margin-bottom:22px;
  border-bottom:1px dashed var(--orange-soft);
}
.why__badge{
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1px solid var(--orange-soft); color:var(--orange-700);
  font-family:var(--f-head); font-weight:600; font-size:.8rem;
  padding:7px 13px; border-radius:var(--r-full);
}
.why__badge svg{ width:14px; height:14px; }
/* Het prototype toonde "vanaf € —". Een leeg prijsvakje kost conversie:
   we noemen expliciet wat er wél vaststaat. */
.why__claim{
  display:block; margin-top:18px;
  font-family:var(--f-head); font-weight:700; font-size:clamp(1.5rem,2.4vw,1.95rem);
  line-height:1.15; color:var(--ink);
}
.why__claim-sub{ display:block; margin-top:8px; font-size:.92rem; color:var(--slate); font-weight:500; font-family:var(--f-body); }
.why__list{ display:grid; gap:14px; margin-bottom:26px; }
.why__list li{ display:flex; align-items:center; gap:12px; font-weight:500; font-size:.98rem; }
.why__list svg{
  width:21px; height:21px; flex-shrink:0; padding:4px;
  color:#fff; background:var(--orange); border-radius:50%;
}
.why__points{ display:grid; grid-template-columns:1fr 1fr; gap:28px 32px; margin-top:36px; }
.why__point{ display:flex; gap:15px; }
.why__pic{
  width:46px; height:46px; border-radius:12px; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--orange-tint); color:var(--orange-600);
}
.why__pic svg{ width:23px; height:23px; }
.why__point h3{ font-size:1.1rem; margin-bottom:6px; }
.why__point p{ color:var(--slate); font-size:.92rem; line-height:1.55; }

/* ------------------------------------------------------------
   BEVEILIGING — donkere band met scrub-onthulling
   ------------------------------------------------------------ */
.security{ position:relative; overflow:clip; padding-block:clamp(80px,10vw,140px); }
.security__bg{ position:absolute; inset:0; pointer-events:none; }
.security__bg::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 60% at 80% 30%, rgba(255,101,47,.20), transparent 60%);
}
.security__shield{
  position:absolute; right:-5%; bottom:-12%; width:480px; aspect-ratio:1;
  border-radius:50%; border:1px solid rgba(255,255,255,.07);
}
.security__shield::before,
.security__shield::after{
  content:""; position:absolute; inset:60px; border-radius:50%;
  border:1px solid rgba(255,255,255,.05);
}
.security__shield::after{ inset:140px; border-color:rgba(255,101,47,.14); }
.security__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(40px,5vw,64px); align-items:center;
}
.security__lead{ font-size:clamp(1.1rem,1.5vw,1.32rem); line-height:1.6; margin:20px 0 30px; max-width:56ch; }
.security__feats{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; }
.sec-feat{ display:flex; align-items:center; gap:11px; font-size:.95rem; color:var(--ink-on); }
.sec-feat svg{
  width:19px; height:19px; flex-shrink:0; padding:4px;
  color:#fff; background:var(--orange); border-radius:50%;
}
.security__viz{ display:grid; place-items:center; }
.shield-card{
  position:relative; width:min(240px,70vw); aspect-ratio:1; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border-radius:30px; border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  /* Image-scale-paradigma: begint klein, groeit bij binnenkomst. */
  scale:.86; opacity:.4; transition:scale .9s var(--ease), opacity .9s var(--ease);
}
.no-js .shield-card,
.reveal.in .shield-card,
.security__viz.in .shield-card{ scale:1; opacity:1; }
.shield-ic{ width:84px; height:84px; color:var(--orange); margin-bottom:6px; }
.shield-ic svg{ width:100%; height:100%; }
.shield-card b{ font-family:var(--f-head); font-size:1.1rem; color:#fff; }
.shield-card small{ color:var(--ink-on-muted); font-size:.82rem; }
.shield-scan{
  position:absolute; left:0; right:0; height:60px; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,101,47,.28),transparent);
  animation:scan 3.4s ease-in-out infinite;
}
@keyframes scan{ 0%,100%{ top:-60px } 50%{ top:100% } }

/* ------------------------------------------------------------
   REGIO
   ------------------------------------------------------------ */
/* De .town- en .map-componenten staan in style.css: contact.php gebruikt ze ook. */
.local{ background:var(--paper); }
.local__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,64px); align-items:center; }

/* ------------------------------------------------------------
   REFERENTIES — carrousel
   ------------------------------------------------------------ */
.testi{ background:#fff; }
.testi__viewport{
  margin-top:clamp(40px,5vw,60px);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  padding-bottom:6px;
}
.testi__viewport::-webkit-scrollbar{ display:none; }
.testi__track{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:20px; }
.testi__card{ scroll-snap-align:start; display:flex; flex-direction:column; gap:18px; }
.stars{ color:var(--orange); letter-spacing:3px; font-size:1rem; }
.testi__card blockquote{ font-size:1.05rem; line-height:1.55; color:var(--ink-700); font-weight:500; }
.testi__card figcaption{ display:flex; align-items:center; gap:13px; margin-top:auto; padding-top:6px; }
.avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; object-fit:cover;
  background:var(--orange-tint); color:var(--orange-700);
  font-family:var(--f-head); font-weight:600; font-size:.95rem;
}
.testi__card figcaption b{ display:block; font-family:var(--f-head); font-size:.96rem; }
.testi__card figcaption small{ color:var(--slate); font-size:.82rem; }

.testi__nav{ display:none; gap:10px; justify-content:center; margin-top:26px; }
.testi__nav button{
  width:46px; height:46px; border-radius:var(--r-full);
  border:1px solid var(--line); background:#fff;
  display:grid; place-items:center; color:var(--ink);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.testi__nav button:hover{ border-color:var(--orange-soft); background:var(--orange-tint); }
.testi__nav svg{ width:18px; height:18px; }

/* ------------------------------------------------------------
   CTA-BAND
   ------------------------------------------------------------ */
.cta-band{ padding:var(--pad); }
.cta-band__inner{
  position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(118deg,var(--orange-700),var(--orange) 58%,#ff7f4d);
  border-radius:var(--r-xl); box-shadow:var(--sh-orange);
  padding:clamp(52px,7.5vw,96px) var(--pad);
}
.cta-band__inner > *{ position:relative; z-index:2; }
.cta-band__inner h2{ color:#fff; max-width:18ch; margin-inline:auto; }
.cta-band__inner p{
  color:rgba(255,255,255,.9); max-width:56ch;
  margin:16px auto 32px; font-size:clamp(1.02rem,1.3vw,1.15rem);
}
.cta-band__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-band__actions .btn{ width:auto; }
.cta-band__actions .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.45); }
.cta-band__actions .btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.cta-band__bars{
  position:absolute; right:-20px; bottom:-20px; z-index:1;
  display:flex; align-items:flex-end; gap:12px; opacity:.16; pointer-events:none;
}
.cta-band__bars span{ width:40px; border-radius:9px 9px 0 0; background:#fff; }
.cta-band__bars span:nth-child(1){ height:70px }
.cta-band__bars span:nth-child(2){ height:120px }
.cta-band__bars span:nth-child(3){ height:180px }
.cta-band__bars span:nth-child(4){ height:250px }

/* ------------------------------------------------------------
   RESPONSIEF
   ------------------------------------------------------------ */
@media (max-width:1080px){
  .hero__inner{ grid-template-columns:1fr; gap:64px; }
  .hero__copy h1{ max-width:13ch; }
  .hero__visual{ margin-inline:0; }
  /* Tablet: altijd twee gelijke kolommen — 6+6 loopt bij elk aantal dicht. */
  .svc-grid .svc,
  .svc-grid:has(> :nth-child(5):last-child) .svc:nth-child(n+4),
  .svc-grid:has(> :nth-child(6):last-child) .svc{ grid-column:span 6; }
  .why__grid,.security__inner,.local__grid{ grid-template-columns:1fr; }
  .security__viz{ order:-1; }
  .testi__track{ grid-auto-columns:minmax(min(78vw,420px),1fr); }
  .testi__nav{ display:flex; }
  .stats__grid{ grid-template-columns:1fr 1fr; gap:36px 20px; }
  .stat:nth-child(2){ border-right:0; }
}
@media (max-width:640px){
  .hero{ min-height:auto; }
  .hero__copy h1{ max-width:11ch; }
  .hero__bars{ display:none; }
  .svc-grid .svc,
  .svc-grid:has(> :nth-child(5):last-child) .svc:nth-child(n+4),
  .svc-grid:has(> :nth-child(6):last-child) .svc{ grid-column:1 / -1; }
  .why__points,.security__feats{ grid-template-columns:1fr; }
  .float-card--a{ top:-16px; left:0; }
  .float-card--b{ bottom:-16px; left:auto; right:0; }
  .hero__visual{ padding-block:22px; }
  .float-card small{ display:none; }
  .stats__grid{ grid-template-columns:1fr; gap:30px; }
  .stat{ border-right:0; }
}