/**
 * IT Live — Premium Effects CSS v1.0
 * Upgrade van basic templates naar dadakwerken5-niveau.
 * Laad dit NAAST de bestaande inline CSS in full-website.php.
 *
 * Features:
 *   1. Brand-tinted shadows (--shadow-brand)
 *   2. Smooth scroll-reveal met stagger
 *   3. Premium hover effecten (shimmer, compound transforms)
 *   4. Glass morphism kaarten
 *   5. Gradient text op titels
 *   6. Counter-animatie styling
 *   7. Parallax hero met premium overlay
 *   8. Scroll progress bar
 *   9. Typography refinement
 *  10. Material Design easing
 *
 * BREAKPOINT SYSTEM (Standaard):
 *   - Mobile: max-width: 640px
 *   - Tablet: max-width: 1024px
 *   - Desktop: max-width: 1440px
 *   - Large: max-width: 1920px
 *
 * Vereist: premium-effects.js voor scroll/counter/parallax logica.
 * Werkt samen met full-website.php inline CSS (geen conflicten).
 */

/* ══════════════════════════════════════════════════════════════
   0. EXTENDED CSS VARIABLES (brand-aware)
   ══════════════════════════════════════════════════════════════ */
:root{
  /* ── CONTRAST FIX: --dim was #64748b (te licht op wit, WCAG fail) ── */
  /* Nu #374151 — donkerder grijs, WCAG AA compliant op alle achtergronden */
  --dim: #374151 !important;

  /* ── SHADOW SYSTEM (standaard, brand-aware) ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12);
  --shadow-xl: 0 20px 48px rgba(0,0,0,.16);

  /* Brand-tinted shadows — JS zet --c-r, --c-g, --c-b vanuit --c */
  --shadow-brand: 0 8px 32px rgba(var(--c-rgb, 0,0,0), .12);
  --shadow-brand-lg: 0 20px 60px rgba(var(--c-rgb, 0,0,0), .18);
  --shadow-brand-hover: 0 20px 40px rgba(var(--c-rgb, 0,0,0), .22);

  /* ── COLOR VARIABLES (consolidatie) ── */
  --text-dark: #111827;
  --text-light: #374151;
  --text-lighter: #4b5563;
  --text-muted: #64748b;
  --text-white: #fff;
  --bg-light: #f1f5f9;
  --bg-lighter: #e2e8f0;
  --border-light: #e2e8f0;

  /* Premium easing (Material Design) */
  --ease-premium: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Spacing tokens */
  --section-pad: clamp(48px, 8vw, 96px);
  --card-radius: 20px;
  --card-pad: 28px;
}

/* Vaste nav: native scroll / hash-links (match scroll-margin op #pe-main / [id] ≈ 88px) */
html{
  scroll-padding-top: 88px;
}

/* ══════════════════════════════════════════════════════════════
   0b. GLOBAL CONTRAST FIXES — alle tekst WCAG AA compliant
   GEEN !important hier — theme CSS (bold-dark etc) laadt LATER
   en moet deze regels kunnen overschrijven.
   ══════════════════════════════════════════════════════════════ */

/* Overal waar --dim of lichte grijs als tekst wordt gebruikt op wit/licht bg */
p, li, td, th, label,
.lead, .sec-sub,
.svc p, .svc-desc,
.step p, .review-text, .review-loc,
.stat-lbl, .stat-label,
.hv-lbl,
.blog-card-excerpt, .blog-card-meta, .blog-meta, .blog-date,
.article-meta,
.sidebar-box h4, .sidebar-card h4, .sidebar-section h3,
.sidebar-desc, .sidebar-newsletter p,
.faq-a,
.cat-card p,
.info-desc, .value-desc, .about-desc, .team-role,
.pricing-desc, .feature-desc, .contact-desc,
.dienst-subtitle, .dienst-desc,
.card-desc{
  color: var(--text-light, #374151);
}

/* Headings: donker — maar NIET in hero/cta/page-hero (donkere achtergrond) */
:is(.section, .sec, .sec-alt, .faq-section, .reviews-section, .steps-section, main, article, .blog, .dienst-detail, .contact-page, .about-page) :is(h1,h2,h3,h4,h5,h6),
.svc h3, .svc-title,
.step h4,
.review-name, .review-author .review-name,
.blog-title, .blog-card h3,
.sidebar-box h3, .sidebar-title,
.faq-q, .faq-q span,
.cat-card h3,
.dienst-title,
.card-title, .contact-title, .info-title,
.value-title, .about-title, .pricing-title{
  color: var(--text-dark, #111827);
}

/* HERO + CTA + PAGE-HERO: tekst wit — maar NIET de cards (die zijn wit met donkere tekst) */
.hero h1, .hero h2, .hero h3,
.hero p:not(.hv-card *),
.hero > .w > .hero-grid > div:first-child,
.hero > .w > .hero-grid > div:first-child *,
.hero-badge, .hero-desc,
.hero .btn-outline,
.hero-icon-float,
.page-hero h1, .page-hero p,
.cta-strip h1, .cta-strip h2, .cta-strip p,
.itw-hero h1, .itw-hero p{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/* Hero em: lichte accent kleur */
.hero h1 em, .page-hero h1 em{
  color: var(--cl, #d1fae5) !important;
  -webkit-text-fill-color: var(--cl, #d1fae5) !important;
  text-shadow: 0 0 20px rgba(var(--c-rgb,0,0,0),.4);
}
/* Hero stat cards: DONKERE tekst op WITTE achtergrond */
.hv-card, .hv-card *{
  color: var(--text-dark, #111827) !important;
  -webkit-text-fill-color: var(--text-dark, #111827) !important;
}
.hv-card .hv-lbl{
  color: var(--text-light, #374151) !important;
  -webkit-text-fill-color: var(--text-light, #374151) !important;
}

/* Sidebar pills/tags: donkere tekst, geen var(--c) op lichte bg */
.sidebar-pill, .blog-tag, .blog-category, .tag{
  color: var(--text-dark, #1e293b);
}

/* Nav logo: donker genoeg op witte header */
.logo-l1{
  color: var(--text-lighter, #4b5563);
}

/* IT Live bar: donkerder tekst */
.itlive-bar{
  color: var(--text-lighter, #4b5563);
}

/* Meta info: klein maar leesbaar */
.blog-card-meta, .article-meta, .blog-meta{
  color: var(--text-lighter, #4b5563);
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   1. TYPOGRAPHY REFINEMENT
   ══════════════════════════════════════════════════════════════ */
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: no-preference){
  html{
    scroll-behavior: smooth;
  }
}

::selection{
  background: color-mix(in srgb, var(--c) 32%, #e0e7ff);
  color: #0f172a;
}
:focus-visible{
  outline: 2px solid var(--c);
  outline-offset: 3px;
}

/* Skip naar inhoud: zichtbaar bij Tab */
.pe-skip-link{
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100000;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
  color: #fff !important;
  background: var(--c);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  transform: translateY(-160%);
  transition: transform .25s var(--ease-premium);
}
.pe-skip-link:focus{
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Ankers / skip target: niet onder vaste nav verdwijnen */
#pe-main,
.sec [id],
article [id],
.dienst-detail [id]{
  scroll-margin-top: 88px;
}

@media (prefers-reduced-motion: no-preference){
  .sec h2[id]:target,
  .sec h3[id]:target,
  article h2[id]:target,
  article h3[id]:target{
    animation: peTargetFlash .75s ease;
  }
}
@keyframes peTargetFlash{
  0%{ background-color: color-mix(in srgb, var(--c) 20%, transparent); }
  100%{ background-color: transparent; }
}

/* Mobiel menu open: voorkom body-scroll (builder nav + overlay) */
@media (max-width: 900px){
  body.pe-nav-open{
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }
}

/* Formuliervelden: duidelijke focus ring (WCAG) */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

input[type="file"]::file-selector-button{
  margin-right: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: var(--c);
  color: #fff !important;
  font-weight: 600;
  font-size: .82rem;
  cursor: pointer;
  transition: filter .2s ease, transform .15s ease;
}
input[type="file"]::file-selector-button:hover{
  filter: brightness(1.06);
}
input[type="file"]::file-selector-button:active{
  transform: scale(0.98);
}

progress{
  display: block;
  width: 100%;
  max-width: 360px;
  height: 10px;
  margin: 0.5rem 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-light, #e2e8f0);
  vertical-align: middle;
  accent-color: var(--c);
}
progress::-webkit-progress-bar{
  background: var(--bg-light, #f1f5f9);
  border-radius: 6px;
}
progress::-webkit-progress-value{
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 55%, #1e293b));
  border-radius: 6px;
}
progress::-moz-progress-bar{
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 55%, #1e293b));
  border-radius: 6px;
}

meter{
  width: 100%;
  max-width: 320px;
  height: 14px;
  vertical-align: middle;
  accent-color: var(--c);
}

/* ══════════════════════════════════════════════════════════════
   1b. PROSE LINKS — secties / artikelen (geen knoppen)
   ══════════════════════════════════════════════════════════════ */
.sec p a:not([class]),
.sec li a:not([class]),
article p a:not([class]):not(.btn):not([class*="btn-"]),
.dienst-detail .w p a:not([class*="btn"]){
  color: var(--c);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c) 45%, #94a3b8);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.sec p a:not([class]):hover,
.sec li a:not([class]):hover,
article p a:not([class]):not(.btn):hover,
.dienst-detail .w p a:not([class*="btn"]):hover{
  text-decoration-color: var(--c);
  color: var(--cd);
}

/* Footer: lijstlinks (niet .f-social iconen) */
footer ul a{
  transition: color .2s ease;
}
footer ul a:hover{
  color: var(--c);
}

/* ══════════════════════════════════════════════════════════════
   1c. PROSE — tabellen, blockquote, media (blog / lange tekst)
   ══════════════════════════════════════════════════════════════ */
.sec blockquote,
article blockquote,
.dienst-detail blockquote{
  margin: 1.25rem 0;
  padding: 0.75rem 0 0.75rem 1.25rem;
  border-left: 4px solid var(--c);
  background: color-mix(in srgb, var(--cl) 65%, #fff);
  border-radius: 0 12px 12px 0;
  color: #1e293b;
  font-style: normal;
}
.sec blockquote p:last-child,
article blockquote p:last-child{
  margin-bottom: 0;
}

.pe-table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.sec table,
article table,
.dienst-detail table{
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.sec th,
.sec td,
article th,
article td,
.dienst-detail th,
.dienst-detail td{
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}
.sec thead th,
article thead th{
  background: var(--cl, #f1f5f9);
  font-weight: 700;
  color: #0f172a;
}
.sec tbody tr:hover,
article tbody tr:hover{
  background: #f8fafc;
}

iframe[src*="youtube"],
iframe[src*="vimeo"],
.sec iframe,
article iframe{
  max-width: 100%;
  border-radius: 12px;
}

picture{
  display: block;
  max-width: 100%;
}

/* Responsive embed-wrapper: <div class="pe-ratio pe-ratio--16-9"><iframe …></div> */
.pe-ratio{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #0f172a;
}
.pe-ratio--16-9{
  aspect-ratio: 16 / 9;
}
.pe-ratio--4-3{
  aspect-ratio: 4 / 3;
}
.pe-ratio > iframe,
.pe-ratio > video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

abbr[title]{
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

/* Screenreader-only label */
.pe-sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.pe-sr-only:focus-visible{
  position: fixed !important;
  left: 12px !important;
  top: 12px !important;
  z-index: 100001 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  background: #0f172a !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
  outline: 2px solid var(--c) !important;
  outline-offset: 2px !important;
}

.sec img,
article img,
.dienst-detail .w img{
  max-width: 100%;
  height: auto;
}

figure{
  margin: 1.25rem 0;
}
.sec figure,
article figure{
  display: table;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}
.sec figcaption,
article figcaption{
  display: table-caption;
  caption-side: bottom;
  font-size: .82rem;
  color: var(--dim);
  margin-top: 10px;
  line-height: 1.45;
  text-align: center;
}

.sec hr,
article hr{
  border: none;
  height: 1px;
  margin: 1.5rem 0;
  background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
}

.sec dl,
article dl{
  margin: 1rem 0;
}
.sec dt,
article dt{
  font-weight: 700;
  color: #0f172a;
  margin-top: 0.85rem;
}
.sec dt:first-child,
article dt:first-child{
  margin-top: 0;
}
.sec dd,
article dd{
  margin: 0.2rem 0 0.65rem 0;
  color: #374151;
  line-height: 1.55;
}

sub,
sup{
  font-size: .75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup{ bottom: 0.4ex; }
sub{ top: 0.25ex; }

.sec pre,
article pre,
.dienst-detail pre{
  margin: 1rem 0;
  padding: 16px 18px;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 12px;
  overflow-x: auto;
  font-size: .84rem;
  line-height: 1.55;
  border: 1px solid #1e293b;
}
.sec code,
article code,
.dienst-detail code{
  font-family: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace;
  font-size: .88em;
}
.sec p code,
article p code,
.dienst-detail p code,
.sec li code,
article li code{
  background: var(--cl, #f1f5f9);
  color: #0f172a;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--c) 12%, #e2e8f0);
}

mark{
  background: color-mix(in srgb, var(--c) 22%, #fef08a);
  color: #0f172a;
  padding: 0 .12em;
  border-radius: 2px;
}

kbd{
  font-family: ui-monospace, monospace;
  font-size: .82em;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid #cbd5e1;
  background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
  box-shadow: 0 1px 0 #94a3b8;
  color: #334155;
}

/* Native <details> (optioneel naast .faq-item) */
details.pe-details,
article details{
  margin-bottom: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 0 16px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
details.pe-details[open],
article details[open]{
  border-color: var(--c);
  box-shadow: var(--shadow-brand, 0 4px 20px rgba(0,0,0,.06));
}
details.pe-details summary,
article details summary{
  cursor: pointer;
  font-weight: 700;
  font-size: .9rem;
  color: #0f172a;
  padding: 14px 0;
  list-style: none;
  border-radius: 8px;
}
details.pe-details summary:focus-visible,
article details summary:focus-visible{
  outline: 2px solid var(--c);
  outline-offset: 3px;
}
details.pe-details summary::-webkit-details-marker,
article details summary::-webkit-details-marker{
  display: none;
}
details.pe-details summary::after,
article details summary::after{
  content: '';
  float: right;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: rotate(45deg);
  transition: transform .25s var(--ease-premium);
}
details.pe-details[open] summary::after,
article details[open] summary::after{
  transform: rotate(225deg);
  border-color: var(--c);
}

/* Cookie banner (builder #cookieBanner): slide-in */
@media (prefers-reduced-motion: no-preference){
  #cookieBanner{
    animation: peCookieIn .48s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
}
@keyframes peCookieIn{
  from{
    transform: translateY(110%);
    opacity: 0;
  }
  to{
    transform: translateY(0);
    opacity: 1;
  }
}
#cookieBanner{
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  padding-left: calc(24px + env(safe-area-inset-left, 0px)) !important;
  padding-right: calc(24px + env(safe-area-inset-right, 0px)) !important;
}

/* Hoger contrast (OS-instelling) */
@media (prefers-contrast: more){
  .card,
  .svc,
  .review,
  .step,
  .faq-item{
    border-width: 2px !important;
    border-color: #0f172a !important;
  }
  .sec th,
  .sec td,
  article th,
  article td,
  .pe-table-wrap{
    border-color: #0f172a !important;
  }
  :focus-visible{
    outline-width: 3px;
    outline-offset: 2px;
  }
}

/* Sectie-scheidingslijn (optioneel <hr class="pe-section-divider">) */
.pe-section-divider{
  border: none;
  height: 2px;
  max-width: 120px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  opacity: .55;
  border-radius: 2px;
}

/* Trust strip: iets meer “premium” */
@media (prefers-reduced-motion: no-preference){
  .trust-item{
    transition: transform .25s var(--ease-premium), color .2s ease, opacity .2s ease;
  }
  .trust-item:hover{
    transform: translateY(-3px);
  }
}

/* Tighter letter-spacing op grote titels */
h1{ letter-spacing: -.03em }
h2{ letter-spacing: -.02em }
.hero h1{
  font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.03em;
}

/* Gradient accent op <em> in titels — ALLEEN op lichte achtergronden (secties) */
.section h2 em,
.sec h2 em{
  font-style: normal;
  background: linear-gradient(135deg, var(--c), var(--cd));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero em: WIT met glow — geen gradient text op donkere achtergrond */
.hero h1 em,
.page-hero h1 em{
  font-style: normal;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 0 40px rgba(255,255,255,.4), 0 0 80px rgba(var(--c-rgb,37,99,235),.3);
  animation: heroGlow 3s ease-in-out infinite alternate;
}
@keyframes heroGlow{
  from{ text-shadow: 0 0 30px rgba(255,255,255,.3), 0 0 60px rgba(var(--c-rgb,37,99,235),.2) }
  to{ text-shadow: 0 0 50px rgba(255,255,255,.5), 0 0 100px rgba(var(--c-rgb,37,99,235),.4) }
}
/* Hero p ook altijd wit */
.hero p,
.page-hero p{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* Telefoon links: altijd goed leesbaar */
a[href^="tel:"]{
  color: var(--cd, #1e293b) !important;
  font-weight: 700;
}
.hero a[href^="tel:"],
.page-hero a[href^="tel:"],
.itw-hero a[href^="tel:"]{
  color: #fff !important;
}

/* Hero lead tekst: verfijnd met accent border */
.hero p{
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  max-width: 500px;
  border-left: 3px solid var(--c);
  padding-left: 16px;
}

/* Hero badge: glow */
.hero-badge{
  box-shadow: 0 2px 12px rgba(var(--c-rgb, 0,0,0), .15);
  transition: all .3s var(--ease-premium);
}

/* ══════════════════════════════════════════════════════════════
   2. SCROLL PROGRESS BAR
   ══════════════════════════════════════════════════════════════ */
.scroll-progress{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--c), var(--cd));
  z-index: 9999;
  transition: none;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   3. SCROLL-REVEAL ANIMATIONS
   ══════════════════════════════════════════════════════════════ */
/* Elementen starten onzichtbaar, JS voegt .is-visible toe */
.reveal,
.pe-scroll-reveal{
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s var(--ease-premium),
              transform .7s var(--ease-premium);
}
.reveal.is-visible,
.pe-scroll-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Stagger: elk kind .1s later */
.reveal-stagger > .reveal:nth-child(1),
.reveal-stagger > .pe-scroll-reveal:nth-child(1){ transition-delay: 0s }
.reveal-stagger > .reveal:nth-child(2),
.reveal-stagger > .pe-scroll-reveal:nth-child(2){ transition-delay: .08s }
.reveal-stagger > .reveal:nth-child(3),
.reveal-stagger > .pe-scroll-reveal:nth-child(3){ transition-delay: .16s }
.reveal-stagger > .reveal:nth-child(4),
.reveal-stagger > .pe-scroll-reveal:nth-child(4){ transition-delay: .24s }
.reveal-stagger > .reveal:nth-child(5),
.reveal-stagger > .pe-scroll-reveal:nth-child(5){ transition-delay: .32s }
.reveal-stagger > .reveal:nth-child(6),
.reveal-stagger > .pe-scroll-reveal:nth-child(6){ transition-delay: .4s }
.reveal-stagger > .reveal:nth-child(7),
.reveal-stagger > .pe-scroll-reveal:nth-child(7){ transition-delay: .48s }
.reveal-stagger > .reveal:nth-child(8),
.reveal-stagger > .pe-scroll-reveal:nth-child(8){ transition-delay: .56s }
.reveal-stagger > .reveal:nth-child(9),
.reveal-stagger > .pe-scroll-reveal:nth-child(9){ transition-delay: .64s }

/* Reveal from left/right */
.reveal-left{
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .7s var(--ease-premium), transform .7s var(--ease-premium);
}
.reveal-right{
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .7s var(--ease-premium), transform .7s var(--ease-premium);
}
.reveal-left.is-visible,
.reveal-right.is-visible{
  opacity: 1;
  transform: translateX(0);
}

/* Scale-in for stats/icons */
.reveal-scale{
  opacity: 0;
  transform: scale(.85);
  transition: opacity .6s var(--ease-premium), transform .6s var(--ease-bounce);
}
.reveal-scale.is-visible{
  opacity: 1;
  transform: scale(1);
}

/* ══════════════════════════════════════════════════════════════
   4. PREMIUM CARD EFFECTS
   ══════════════════════════════════════════════════════════════ */

/* Service cards: compound hover */
.svc{
  border-radius: var(--card-radius) !important;
  padding: var(--card-pad) !important;
  transition: transform .4s var(--ease-premium),
              box-shadow .4s var(--ease-premium),
              border-color .3s ease !important;
  position: relative;
  overflow: hidden;
}

/* Shimmer sweep on hover */
.svc::after{
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.08),
    transparent
  );
  transform: skewX(-25deg);
  transition: left .6s var(--ease-premium);
  pointer-events: none;
  z-index: 1;
}
.svc:hover::after{
  left: 125%;
}

/* Deeper hover transform + kleur-transformatie */
.svc:hover{
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-brand-hover) !important;
  border-color: var(--c) !important;
  background: linear-gradient(135deg, var(--c), var(--cd)) !important;
  color: #fff !important;
}
.svc:hover h3,
.svc:hover .svc-title,
.svc:hover p,
.svc:hover .svc-desc{
  color: #fff !important;
}
.svc:hover .svc-link{
  color: rgba(255,255,255,.85) !important;
}
.svc:hover .svc-link:hover{
  color: #fff !important;
}

/* Icon: invert on card hover */
.svc-icon{
  transition: all .4s var(--ease-premium);
  border-radius: 14px !important;
}
.svc:hover .svc-icon{
  transform: scale(1.1);
  background: rgba(255,255,255,.2) !important;
  color: #fff !important;
}

/* Sub-items: wit op hover */
.svc:hover .svc-sub-item,
.svc:hover .svc-sub-list span,
.svc:hover .svc-sub-list li{
  color: rgba(255,255,255,.8) !important;
}

/* ── Review cards ── */
.review{
  border-radius: var(--card-radius) !important;
  transition: transform .35s var(--ease-premium),
              box-shadow .35s var(--ease-premium),
              border-color .3s ease !important;
}
.review:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-brand) !important;
  border-color: var(--c) !important;
}

/* ── Step cards ── */
.step{
  border-radius: var(--card-radius) !important;
  transition: all .4s var(--ease-premium) !important;
}
.step:hover{
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-brand) !important;
  border-color: var(--c) !important;
  background: linear-gradient(135deg, var(--c), var(--cd)) !important;
  color: #fff !important;
}
.step:hover h4{ color: #fff !important }
.step:hover p{ color: rgba(255,255,255,.85) !important }
.step:hover::before{
  background: #fff !important;
  color: var(--c) !important;
}

/* ── FAQ items ── */
.faq-item{
  border-radius: 16px !important;
  transition: border-color .3s var(--ease-premium),
              box-shadow .3s var(--ease-premium) !important;
}
.faq-item[open]{
  box-shadow: var(--shadow-brand) !important;
}

/* Vloeiend open/dicht (override inline display:none/block uit builder) */
.faq-item .faq-a{
  display: block !important;
  max-height: 0;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  transition: max-height .45s var(--ease-premium),
              opacity .32s ease,
              padding .32s ease;
}
.faq-item.open .faq-a,
.faq-item[open] .faq-a{
  max-height: min(120vh, 2400px);
  opacity: 1;
  padding: 0 18px 16px !important;
}
@media (prefers-reduced-motion: reduce){
  .faq-item .faq-a,
  .faq-item.open .faq-a,
  .faq-item[open] .faq-a{
    transition: none;
  }
}

/* ── Category cards ── */
.cat-card{
  border-radius: var(--card-radius) !important;
  transition: transform .35s var(--ease-premium),
              box-shadow .35s var(--ease-premium) !important;
}
.cat-card:hover{
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-brand-hover) !important;
}

/* ══════════════════════════════════════════════════════════════
   5. PREMIUM HERO
   ══════════════════════════════════════════════════════════════ */

/* Hero background: premium double-gradient overlay */
.hero{
  position: relative;
  padding: clamp(60px, 10vw, 100px) 0 clamp(48px, 8vw, 80px) !important;
}

/* Premium blob: richer animation */
.hv-blob{
  animation: hvmorph 12s ease-in-out infinite !important;
  background: linear-gradient(135deg, var(--cl) 0%, color-mix(in srgb, var(--c) 25%, transparent) 50%, var(--cl) 100%) !important;
  filter: blur(1px);
}

/* Subtiele animated mesh over standaard hero-overlay (classic .hero uit builder) */
@media (prefers-reduced-motion: no-preference){
  .hero .hero-ov{
    overflow: hidden;
  }
  .hero .hero-ov::after{
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 90% 60% at 15% 35%, rgba(255,255,255,.07) 0%, transparent 55%),
      radial-gradient(ellipse 70% 50% at 85% 65%, rgba(255,255,255,.06) 0%, transparent 50%);
    animation: heroMeshDrift 22s ease-in-out infinite alternate;
    mix-blend-mode: soft-light;
  }
}
@keyframes heroMeshDrift{
  from{ opacity: .85; transform: scale(1) translate(0, 0); }
  to{ opacity: 1; transform: scale(1.04) translate(1%, -1%); }
}

/* Subtiele “particle” glans over hero-foto (classic .hero-bg; geen extra HTML) */
@media (prefers-reduced-motion: no-preference){
  .hero .hero-bg::after{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .22;
    mix-blend-mode: soft-light;
    background-image:
      radial-gradient(1.5px 1.5px at 10% 22%, rgba(255,255,255,.75) 50%, transparent 52%),
      radial-gradient(1px 1px at 62% 38%, rgba(255,255,255,.45) 50%, transparent 52%),
      radial-gradient(1.2px 1.2px at 82% 72%, rgba(255,255,255,.55) 50%, transparent 52%),
      radial-gradient(1px 1px at 35% 85%, rgba(255,255,255,.4) 50%, transparent 52%),
      radial-gradient(1.4px 1.4px at 88% 28%, rgba(255,255,255,.6) 50%, transparent 52%);
    background-size: 100% 100%;
    animation: peHeroParticlesDrift 26s ease-in-out infinite alternate;
  }
}
@keyframes peHeroParticlesDrift{
  from{ opacity: .18; transform: translate(0, 0) scale(1); }
  to{ opacity: .28; transform: translate(-1.2%, 0.8%) scale(1.02); }
}

/* Floating cards: ALTIJD leesbaar — solide witte bg, donkere tekst, geen transparantie */
.hv-card{
  background: #fff !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.5);
}
.hv-card .hv-val{
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}
.hv-card .hv-lbl{
  color: #374151 !important;
}
.hv-card .hv-ico{
  color: var(--c);
}
.hv-card:hover{
  box-shadow: 0 16px 48px rgba(0,0,0,.16) !important;
  transform: translateY(-8px) scale(1.02);
}

/* Hero buttons: premium hover + KLEUR FIX voor ALLE prefixes */
.hero .btn-primary,
.hero .mc-btn-primary,
.hero .cb-btn-primary,
.hero .wa-btn-primary,
.hero a.btn-primary,
.hero a.mc-btn-primary,
.hero a[class*="btn-primary"]{
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(var(--c-rgb, 0,0,0), .3);
  transition: all .35s var(--ease-premium) !important;
}
.hero .btn-primary:hover,
.hero .mc-btn-primary:hover,
.hero .cb-btn-primary:hover,
.hero .wa-btn-primary:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(var(--c-rgb, 0,0,0), .4) !important;
  color: #fff !important;
}
.hero .btn-outline,
.hero .mc-btn-ghost,
.hero .cb-btn-ghost,
.hero .wa-btn-ghost{
  transition: all .35s var(--ease-premium) !important;
  color: var(--ink) !important;
}
.hero .btn-outline:hover,
.hero .mc-btn-ghost:hover{
  background: var(--cl) !important;
  border-color: var(--c) !important;
  color: var(--c) !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════════════════════════
   6. STATS BAR — Premium
   ══════════════════════════════════════════════════════════════ */
.stats{
  padding: 48px 0 !important;
  position: relative;
}
/* Glow rail top */
.stats::before{
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  border-radius: 3px;
  opacity: .5;
}

.stat-val,
.stat-v{
  font-size: 1.7rem !important;
  font-weight: 900;
  color: var(--cd) !important;
  -webkit-text-fill-color: var(--cd);
}
.stat-icon{
  font-size: 1.5rem !important;
  filter: drop-shadow(0 0 6px rgba(var(--c-rgb, 0,0,0), .15));
}

/* ══════════════════════════════════════════════════════════════
   7. SECTION UPGRADES
   ══════════════════════════════════════════════════════════════ */
.section{
  padding: var(--section-pad) 0 !important;
}

/* Section badge: subtle glow */
.section-badge{
  box-shadow: 0 2px 12px rgba(var(--c-rgb, 0,0,0), .1);
  border: 1px solid color-mix(in srgb, var(--c) 20%, transparent);
  transition: all .3s var(--ease-premium);
}
.section-badge:hover{
  box-shadow: 0 4px 16px rgba(var(--c-rgb, 0,0,0), .18);
}

/* Section h2: enhanced */
.section h2{
  font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
  letter-spacing: -.02em;
  margin-bottom: 10px !important;
}

/* ══════════════════════════════════════════════════════════════
   8. CTA SECTION — Premium gradient
   ══════════════════════════════════════════════════════════════ */
.cta-bottom{
  background: linear-gradient(135deg, var(--cd) 0%, var(--c) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 28px !important;
  padding: clamp(48px, 8vw, 80px) clamp(24px, 5vw, 60px) !important;
  position: relative;
  overflow: hidden;
}
.cta-bottom::before{
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(255,255,255,.08) 0%, transparent 70%);
  pointer-events: none;
}
.cta-bottom h2{
  color: #fff !important;
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
}
.cta-bottom p{
  color: rgba(255,255,255,.85) !important;
  font-size: 1rem !important;
}
.cta-bottom .btn{
  background: #fff !important;
  color: var(--cd) !important;
  font-weight: 800;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  transition: all .35s var(--ease-premium) !important;
}
.cta-bottom .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}

/* ══════════════════════════════════════════════════════════════
   9. USP STRIP — Premium
   ══════════════════════════════════════════════════════════════ */
.usp-strip{
  padding: 32px 0 !important;
}
.usp i{
  filter: drop-shadow(0 0 4px rgba(var(--c-rgb, 0,0,0), .2));
  transition: transform .3s var(--ease-bounce);
}
.usp:hover i{
  transform: scale(1.2);
}

/* ══════════════════════════════════════════════════════════════
   10. NAV — Premium scroll effect
   ══════════════════════════════════════════════════════════════ */
nav{
  transition: box-shadow .3s var(--ease-premium),
              background .3s var(--ease-premium) !important;
}
nav.scrolled{
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Logo sizing: viewBox 320x80 (4:1) — height bepaalt breedte */
.nav-logo-img{
  height: 56px !important;
  width: auto !important;
  max-width: 240px !important;
  object-fit: contain;
}
.footer-logo-img{
  height: 44px;
  width: auto;
  max-width: 220px;
  margin-bottom: 10px;
  object-fit: contain;
}
/* Mobile: iets kleiner */
@media(max-width:640px){
  .nav-logo-img{
    height: 42px !important;
    max-width: 180px !important;
  }
}
/* Logo text: donker op lichte nav (theme CSS overschrijft voor dark) */
nav .logo-text .logo-l1{ color: #4b5563 }
nav .logo-text .logo-l2{ color: var(--c) }

/* Nav CTA button: brand shadow */
.nav-cta{
  box-shadow: 0 2px 8px rgba(var(--c-rgb, 0,0,0), .2);
  transition: all .3s var(--ease-premium) !important;
}
.nav-cta:hover{
  box-shadow: 0 4px 16px rgba(var(--c-rgb, 0,0,0), .3) !important;
  transform: translateY(-1px) !important;
}

/* Hamburger → X wanneer mobiel menu open (sibling na .nav-links) */
.hamburger{
  justify-content: center;
  gap: 0;
}
.hamburger span{
  transform-origin: center;
  transition: transform .35s var(--ease-premium), opacity .25s ease;
}
.nav-links.open ~ .hamburger span:nth-child(1){
  transform: translateY(6px) rotate(45deg);
}
.nav-links.open ~ .hamburger span:nth-child(2){
  opacity: 0;
  transform: scaleX(0);
}
.nav-links.open ~ .hamburger span:nth-child(3){
  transform: translateY(-6px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce){
  .hamburger span{ transition: none; }
}

/* Mobiel menu: bottom sheet i.p.v. drawer (inline builder-CSS wint zonder !important) */
@media (max-width: 900px){
  .nav-links{
    top: auto !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(92vh, 100dvh) !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 20px 20px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -12px 44px rgba(15, 23, 42, 0.22) !important;
    transform: translateY(100%) !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.82, 0.25, 1) !important;
  }
  .nav-links.open{
    transform: translateY(0) !important;
  }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce){
  .nav-links{
    transition-duration: 0.12s !important;
  }
}
html.pe-reduced-motion .nav-links{
  transition-duration: 0.12s !important;
}

/* ══════════════════════════════════════════════════════════════
   11. BACK-TO-TOP BUTTON
   ══════════════════════════════════════════════════════════════ */
.back-to-top{
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all .35s var(--ease-premium);
  box-shadow: 0 4px 16px rgba(var(--c-rgb, 0,0,0), .3);
}
.back-to-top.visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover{
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 24px rgba(var(--c-rgb, 0,0,0), .4);
}

/* ══════════════════════════════════════════════════════════════
   12. COUNTER ANIMATION (stat values)
   ══════════════════════════════════════════════════════════════ */
.stat-val[data-count],
.stat-v[data-count]{
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════
   13. RESPONSIVE PREMIUM OVERRIDES
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px){
  :root{
    --card-pad: 22px;
    --card-radius: 16px;
  }
  .hero h1{
    font-size: clamp(1.8rem, 6vw, 2.6rem) !important;
  }
  .back-to-top{
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 640px){
  :root{
    --section-pad: 40px;
    --card-pad: 20px;
    --card-radius: 14px;
  }
  .hero{
    padding: 48px 0 36px !important;
  }
  .hero .btn{
    width: 100%;
    justify-content: center;
    max-width: 320px;
  }
  .hero-btns{
    flex-direction: column;
  }
  .stats::before{
    display: none;
  }
  /* Disable shimmer on mobile (performance) */
  .svc::after{
    display: none;
  }
  .scroll-progress{
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   14. PRINT — hide decorative elements
   ══════════════════════════════════════════════════════════════ */
@media print{
  .scroll-progress,
  .back-to-top,
  .itl-theme-switcher,
  .hv-blob,
  .svc::after,
  .stats::before,
  .pe-toast,
  #cookieBanner{
    display: none !important;
  }
  .reveal,
  .pe-scroll-reveal{
    opacity: 1 !important;
    transform: none !important;
  }
  body{
    orphans: 3;
    widows: 3;
  }
  h2, h3, h4{
    page-break-after: avoid;
    break-after: avoid;
  }
  .card, .review, .step, .faq-item{
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ══════════════════════════════════════════════════════════════
   15. CARDS — subtiele 3D-tilt + image zoom (builder .cards)
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) and (min-width: 901px){
  .cards > .card{
    transition: transform .35s var(--ease-premium),
                box-shadow .35s var(--ease-premium),
                border-color .3s ease;
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }
  .cards > .card:hover{
    transform: translateY(-6px) perspective(820px) rotateX(1.1deg) rotateY(-1.1deg);
  }
}
.cards > .card > img:first-child{
  display: block;
  width: 100%;
  transition: transform .5s var(--ease-premium);
}
@media (prefers-reduced-motion: no-preference){
  .cards > .card:has(> img:first-child){
    overflow: hidden;
  }
  .cards > .card:hover > img:first-child{
    transform: scale(1.05);
  }
}

/* ══════════════════════════════════════════════════════════════
   16. LAZY BLUR-UP (img[data-src] → JS zet .pe-blur-up)
   ══════════════════════════════════════════════════════════════ */
img.pe-blur-up{
  filter: blur(14px);
  transform: scale(1.03);
  transition: filter .45s var(--ease-premium), transform .45s var(--ease-premium);
}
img.pe-blur-up.pe-is-loaded{
  filter: none;
  transform: none;
}

/* ITW carrousel — focus + dot-buttons (JS: .pe-carousel-a11y) */
.itw-carousel.pe-carousel-a11y:focus-visible{
  outline: 2px solid var(--c);
  outline-offset: 4px;
  border-radius: 12px;
}
.itw-carousel .itw-carousel-dots button.itw-carousel-dot{
  appearance: none;
  width: 10px;
  height: 10px;
  padding: 0;
  margin: 0 4px;
  border: none;
  border-radius: 50%;
  background: #cbd5e1;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.2s ease, transform 0.2s ease;
}
.itw-carousel .itw-carousel-dots button.itw-carousel-dot.active,
.itw-carousel .itw-carousel-dots button.itw-carousel-dot[aria-current="true"]{
  background: var(--c);
  transform: scale(1.12);
}
.itw-carousel .itw-carousel-dots button.itw-carousel-dot:focus-visible{
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

/* ITW tabs — focus ring (JS: tablist / role=tab) */
.itw-tabs .itw-tab-btn:focus-visible{
  outline: 2px solid var(--c);
  outline-offset: 2px;
  border-radius: 8px;
}
.itw-tabs .itw-tabs-nav[aria-orientation="vertical"]{
  flex-direction: column;
  align-items: stretch;
}

/* ══════════════════════════════════════════════════════════════
   17b. IMAGE + OVERLAY (optioneel: .pe-img-hover + .pe-img-hover__cap)
   ══════════════════════════════════════════════════════════════ */
.pe-img-hover{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--card-radius, 16px);
}
.pe-img-hover > img{
  width: 100%;
  height: auto;
  display: block;
  transition: transform .5s var(--ease-premium);
}
.pe-img-hover::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(15, 23, 42, .58) 100%);
  opacity: 0;
  transition: opacity .35s var(--ease-premium);
  pointer-events: none;
}
.pe-img-hover .pe-img-hover__cap{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  color: #fff !important;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s var(--ease-premium);
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference){
  .pe-img-hover:hover > img{ transform: scale(1.06); }
  .pe-img-hover:hover::after{ opacity: 1; }
  .pe-img-hover:hover .pe-img-hover__cap{
    opacity: 1;
    transform: translateY(0);
  }
}

/* ══════════════════════════════════════════════════════════════
   17. TOAST (window.peToast)
   ══════════════════════════════════════════════════════════════ */
.pe-toast{
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
  max-width: min(360px, calc(100vw - 48px));
  padding: 14px 18px;
  border-radius: 14px;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.45;
  color: #fff !important;
  background: linear-gradient(135deg, var(--c), var(--cd));
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
  z-index: 10050;
  opacity: 0;
  transform: translateX(120%);
  transition: opacity .35s var(--ease-premium), transform .4s var(--ease-bounce);
  pointer-events: none;
}
.pe-toast.pe-toast--show{
  opacity: 1;
  transform: translateX(0);
}
.pe-toast.pe-toast--error{
  background: linear-gradient(135deg, #b91c1c, #991b1b);
}
.pe-toast.pe-toast--ok{
  background: linear-gradient(135deg, #047857, #059669);
}
@media (max-width: 640px){
  .pe-toast{
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    left: calc(16px + env(safe-area-inset-left, 0px));
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce){
  .pe-toast{
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .pe-toast.pe-toast--show{
    transform: translateY(0);
  }
}

/* Gallery lightbox (.itw-gallery / .gallery-masonry — JS zet .pe-lightbox-overlay) */
.pe-lightbox-overlay{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.92);
  cursor: pointer;
  animation: peLbFadeIn 0.28s ease;
}
.pe-lightbox-inner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 92vh;
  cursor: default;
}
.pe-lightbox-frame{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90vw;
}
.pe-lightbox-inner img,
.pe-lightbox-frame img{
  max-width: 90vw;
  max-height: min(78vh, 90vh);
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  object-fit: contain;
}
.pe-lightbox-counter{
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  user-select: none;
}
.pe-lightbox-close{
  position: absolute;
  top: -4px;
  right: -4px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.15s ease;
}
.pe-lightbox-close:hover{
  background: rgba(255, 255, 255, 0.32);
}
.pe-lightbox-close:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.pe-lightbox-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
  transition: background 0.2s ease, transform 0.15s ease;
}
.pe-lightbox-prev{
  left: max(4px, env(safe-area-inset-left));
}
.pe-lightbox-next{
  right: max(4px, env(safe-area-inset-right));
}
.pe-lightbox-nav:hover{
  background: rgba(255, 255, 255, 0.34);
}
.pe-lightbox-nav:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}
body.pe-lightbox-open{
  overflow: hidden;
  touch-action: none;
}
@keyframes peLbFadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .pe-lightbox-overlay{
    animation: none;
  }
}

/* Tab op achtergrond: minder CPU/GPU (html.pe-tab-hidden) */
html.pe-tab-hidden .hero .hero-bg::after,
html.pe-tab-hidden .hero .hero-ov::after,
html.pe-tab-hidden .hv-blob,
html.pe-tab-hidden .gradient-animate,
html.pe-tab-hidden .hero-v .hero-v__bg::after{
  animation-play-state: paused !important;
}

/* Data-besparing / Lite mode (browser “minder data”) */
@media (prefers-reduced-data: reduce){
  .hero .hero-bg::after,
  .hero-v .hero-v__bg::after{
    content: none !important;
  }
  .hero .hero-ov::after{
    animation: none !important;
    opacity: 0.75 !important;
  }
  .hv-blob,
  .gradient-animate,
  .skeleton{
    animation: none !important;
  }
}
html.pe-reduced-data .hero .hero-bg::after,
html.pe-reduced-data .hero-v .hero-v__bg::after{
  content: none !important;
}
html.pe-reduced-data .hero .hero-ov::after{
  animation: none !important;
  opacity: 0.75 !important;
}
html.pe-reduced-data .hv-blob,
html.pe-reduced-data .gradient-animate,
html.pe-reduced-data .skeleton{
  animation: none !important;
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL PRIMARY BUTTON (platformregel)
   ══════════════════════════════════════════════════════════════ */
.btn-primary,
button.btn-primary,
a.btn-primary,
[class*="btn-primary"]:not(.btn-hero--primary):not([class*="btn-hero--outline"]){
  color: #fff !important;
}

@media (prefers-reduced-motion: no-preference){
  .btn:active,
  a.btn-c:active,
  a.btn-w:active,
  a.btn-ol:active,
  .nav-cta:active{
    transform: translateY(1px) scale(0.99);
    transition-duration: .08s;
  }
}

/* ══════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION — sitebreed
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior: auto;
  }
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .pe-scroll-reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero h1 em,
  .page-hero h1 em{
    animation: none !important;
  }
  .hv-blob{
    animation: none !important;
  }
  .hero .hero-ov::after{
    animation: none !important;
  }
  .hero .hero-bg::after,
  .hero-v .hero-v__bg::after{
    animation: none !important;
    opacity: .12 !important;
  }
  .img-reveal{
    clip-path: inset(0 0 0 0) !important;
    transition: none !important;
  }
  .scroll-progress{
    display: none !important;
  }
  .animate-pulse,
  .animate-float,
  .animate-glow,
  .skeleton{
    animation: none !important;
  }
  .gradient-animate{
    animation: none !important;
  }
  img.pe-blur-up{
    filter: none !important;
    transform: none !important;
  }
  .cards > .card:hover{
    transform: none !important;
  }
  .cards > .card:hover > img:first-child{
    transform: none !important;
  }
  .pe-img-hover:hover > img{
    transform: none !important;
  }
  .trust-item:hover{
    transform: none !important;
  }
  #cookieBanner{
    animation: none !important;
  }
  .sec h2[id]:target,
  .sec h3[id]:target,
  article h2[id]:target,
  article h3[id]:target{
    animation: none !important;
  }
}
html.pe-reduced-motion .reveal,
html.pe-reduced-motion .reveal-left,
html.pe-reduced-motion .reveal-right,
html.pe-reduced-motion .reveal-scale,
html.pe-reduced-motion .pe-scroll-reveal{
  opacity: 1 !important;
  transform: none !important;
}
html.pe-reduced-motion .sec h2[id]:target,
html.pe-reduced-motion .sec h3[id]:target,
html.pe-reduced-motion article h2[id]:target,
html.pe-reduced-motion article h3[id]:target{
  animation: none !important;
}
html.pe-reduced-motion .hero .hero-bg::after,
html.pe-reduced-motion .hero-v .hero-v__bg::after{
  animation: none !important;
  opacity: .12 !important;
}

/* ══════════════════════════════════════════════════════════════
   WEBFLOW-NIVEAU ANIMATIES — v2
   ══════════════════════════════════════════════════════════════ */

/* Entrance animaties */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes flipInX{from{opacity:0;transform:perspective(400px) rotateX(10deg)}to{opacity:1;transform:perspective(400px) rotateX(0)}}
@keyframes slideInUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}

/* Attention seekers */
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-12px)}60%{transform:translateY(-6px)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes glow{0%,100%{box-shadow:0 0 4px rgba(var(--c-rgb,8,145,178),.3)}50%{box-shadow:0 0 20px rgba(var(--c-rgb,8,145,178),.5)}}

/* Continuous */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Utility classes */
.animate-fadeInUp{animation:fadeInUp .6s var(--ease-premium,ease) both}
.animate-fadeInLeft{animation:fadeInLeft .6s var(--ease-premium,ease) both}
.animate-fadeInRight{animation:fadeInRight .6s var(--ease-premium,ease) both}
.animate-scaleIn{animation:scaleIn .5s var(--ease-premium,ease) both}
.animate-pulse{animation:pulse 2s ease-in-out infinite}
.animate-float{animation:float 3s ease-in-out infinite}
.animate-glow{animation:glow 2s ease-in-out infinite}

/* Stagger delays */
.delay-1{animation-delay:.1s}
.delay-2{animation-delay:.2s}
.delay-3{animation-delay:.3s}
.delay-4{animation-delay:.4s}
.delay-5{animation-delay:.5s}

/* Hover transforms — Webflow-stijl */
.hover-lift{transition:transform .3s var(--ease-premium,ease),box-shadow .3s}
.hover-lift:hover{transform:translateY(-6px);box-shadow:var(--shadow-brand-hover,0 12px 32px rgba(0,0,0,.12))}

.hover-grow{transition:transform .3s var(--ease-premium,ease)}
.hover-grow:hover{transform:scale(1.04)}

.hover-tilt{transition:transform .3s var(--ease-premium,ease)}
.hover-tilt:hover{transform:perspective(600px) rotateY(4deg) rotateX(2deg)}

.hover-shine{position:relative;overflow:hidden}
.hover-shine::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%);transform:translateX(-100%);transition:transform .6s}
.hover-shine:hover::after{transform:translateX(100%)}

.hover-border-accent{transition:border-color .3s,box-shadow .3s}
.hover-border-accent:hover{border-color:var(--c,#0891b2);box-shadow:0 0 0 2px rgba(var(--c-rgb,8,145,178),.1)}

/* Scroll-triggered parallax layers */
.parallax-slow{will-change:transform;transition:transform .1s linear}
.parallax-medium{will-change:transform;transition:transform .15s linear}

/* Gradient text */
.text-gradient{background:var(--gradient-accent,linear-gradient(135deg,#0891b2,#7c3aed));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Glassmorphism card */
.glass-card{background:rgba(255,255,255,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px rgba(0,0,0,.08)}

/* Neumorphism card */
.neu-card{background:#f0f0f3;box-shadow:6px 6px 12px #d1d1d4,-6px -6px 12px #ffffff;border-radius:16px;border:none}

/* Animated gradient background */
.gradient-animate{background:linear-gradient(135deg,var(--c,#0891b2),var(--ca,#7c3aed),var(--c,#0891b2));background-size:200% 200%;animation:gradientShift 4s ease infinite}

/* Number counter (enhanced) */
.counter-value{font-variant-numeric:tabular-nums;transition:all .3s}

/* Image reveal */
.img-reveal{clip-path:inset(0 100% 0 0);transition:clip-path .8s var(--ease-premium,ease)}
.img-reveal.is-visible{clip-path:inset(0 0 0 0)}

/* Underline animation */
.underline-animate{position:relative}
.underline-animate::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--c,#0891b2);transition:width .3s var(--ease-premium,ease)}
.underline-animate:hover::after{width:100%}

/* Responsive preview frame (voor builder) */
.preview-frame{border:2px solid #e2e8f0;border-radius:12px;overflow:hidden;transition:width .4s,height .4s;margin:0 auto}
.preview-frame.desktop{width:100%;max-width:1200px}
.preview-frame.tablet{width:768px;max-width:100%}
.preview-frame.mobile{width:375px;max-width:100%}

/* Skeleton loading */
.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;animation:skeleton 1.5s ease infinite;border-radius:8px}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Tooltip */
.tooltip{position:relative}
.tooltip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) scale(.9);background:#0f172a;color:#fff;padding:4px 10px;border-radius:6px;font-size:.72rem;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s}
.tooltip:hover::after{opacity:1;transform:translateX(-50%) scale(1)}

/* Badge pulse (voor notificaties) */
.badge-pulse{position:relative}
.badge-pulse::after{content:'';position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:#dc2626;animation:pulse 2s ease-in-out infinite}

/* Line-clamp (cards, excerpts) */
.pe-line-clamp-2,
.pe-line-clamp-3{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pe-line-clamp-2{
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.pe-line-clamp-3{
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* Eén regel ellipsis */
.pe-truncate{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   FASE B: EXTRA ANIMATIES (Stagger, Card Scale, CTA Pulse)
   ══════════════════════════════════════════════════════════════ */

/* 1. STAGGER EFFECT — services cards verschijnen na elkaar */
.itw-services .itw-card {
  opacity: 0;
  transform: translateY(24px);
  animation: reveal-fade-up .6s var(--ease-premium) forwards;
}

.itw-services .itw-card:nth-child(1) { animation-delay: 0.1s; }
.itw-services .itw-card:nth-child(2) { animation-delay: 0.2s; }
.itw-services .itw-card:nth-child(3) { animation-delay: 0.3s; }
.itw-services .itw-card:nth-child(4) { animation-delay: 0.4s; }
.itw-services .itw-card:nth-child(5) { animation-delay: 0.5s; }
.itw-services .itw-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes reveal-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 2. CARD HOVER VERBETERD — scale + shadow */
.itw-card {
  transition: all .3s var(--ease-premium);
}

.itw-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 48px rgba(0,0,0,.12) !important;
}

/* 3. CTA PULSE ANIMATION — "Bel direct" button */
.itw-cta .itw-btn--primary {
  animation: pulse-cta 2s var(--ease-smooth) 0s 3; /* 3x loop */
  position: relative;
}

@keyframes pulse-cta {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--c-rgb, 0,0,0), .4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(var(--c-rgb, 0,0,0), 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--c-rgb, 0,0,0), 0);
  }
}

/* 4. HERO PARALLAX — subtiel scroll effect */
.hero-bg img {
  transition: transform .3s ease-out;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-bg img:hover {
    transform: scale(1.05);
  }
}

/* 5. STAT COUNTERS — scale animation */
.itw-stat {
  opacity: 0;
  animation: stat-reveal .6s var(--ease-premium) forwards;
}

.itw-stat:nth-child(1) { animation-delay: 0.2s; }
.itw-stat:nth-child(2) { animation-delay: 0.3s; }
.itw-stat:nth-child(3) { animation-delay: 0.4s; }
.itw-stat:nth-child(4) { animation-delay: 0.5s; }

@keyframes stat-reveal {
  from { opacity: 0; transform: scale(.85); }
  to { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════
   FASE C: UTILITY CLASSES (inline styles → CSS classes)
   ══════════════════════════════════════════════════════════════ */

/* Bottom notice bar (ITLive cookie/update bar) */
.pe-notice-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #0f172a;
  color: #e2e8f0;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 800;
  font-size: .82rem;
  box-shadow: var(--shadow-lg);
  flex-wrap: wrap;
}

/* Modal backdrop */
.pe-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 12px;
}

/* Modal content */
.pe-modal-content {
  background: var(--text-white);
  border-radius: 20px;
  padding: 32px;
  max-width: 480px;
  width: 90%;
  box-shadow: var(--shadow-xl);
  position: relative;
}

/* Close button */
.pe-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #94a3b8;
  transition: color .2s ease;
  padding: 4px;
}

.pe-modal-close:hover {
  color: var(--text-dark);
}

/* Modal title */
.pe-modal-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--text-dark);
}

/* Modal subtitle */
.pe-modal-subtitle {
  color: var(--c);
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: 12px;
}

/* Modal body text */
.pe-modal-body {
  color: #475569;
  line-height: 1.65;
  font-size: .9rem;
  margin-bottom: 16px;
}

/* Link dengan underline */
.pe-link-underline {
  color: var(--c);
  text-decoration: underline;
}

/* Button variants */
.pe-btn-primary {
  background: var(--c, #0891b2);
  color: var(--text-white);
  border: none;
  padding: 8px 18px;
  border-radius: 50px;
  font-weight: 700;
  cursor: pointer;
  font-size: .8rem;
  flex-shrink: 0;
  transition: all .2s ease;
}

.pe-btn-primary:hover {
  filter: brightness(1.1);
}

.pe-btn-secondary {
  background: transparent;
  color: #94a3b8;
  border: 1px solid #334155;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: .8rem;
  cursor: pointer;
  transition: all .2s ease;
}

.pe-btn-secondary:hover {
  background: var(--bg-lighter);
  color: var(--text-dark);
}

/* Separator */
.pe-separator {
  color: #cbd5e1;
  margin: 0 6px;
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM WIDGET STYLES — Voordelen, Garantie, Lead Form
   ══════════════════════════════════════════════════════════════ */

/* Voordelen cards — hover lift */
.voordeel-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,.08) !important;
  border-color: var(--c) !important;
}

/* Voordelen stagger animatie */
.voordelen-grid .voordeel-card {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal-fade-up .6s var(--ease-premium) forwards;
}
.voordelen-grid .voordeel-card:nth-child(1) { animation-delay: .1s; }
.voordelen-grid .voordeel-card:nth-child(2) { animation-delay: .2s; }
.voordelen-grid .voordeel-card:nth-child(3) { animation-delay: .3s; }
.voordelen-grid .voordeel-card:nth-child(4) { animation-delay: .4s; }

/* Garantie sectie — responsive */
@media (max-width: 1024px) {
  .sec [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Lead form inputs — focus ring */
.sec input:focus,
.sec textarea:focus {
  border-color: var(--c) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 12%, transparent);
  outline: none;
}

/* Lead form button — pulse op load */
.sec .btn-c {
  transition: all .3s var(--ease-premium);
}
.sec .btn-c:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

/* Card with border and background */
.pe-card-light {
  background: var(--text-white);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
}

/* Icon box (values, team) */
.pe-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--cl);
  color: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin: 0 auto 12px;
}

/* Card title */
.pe-card-title {
  font-weight: 800;
  font-size: .95rem;
  margin-bottom: 4px;
  color: var(--text-dark);
}

/* Card description */
.pe-card-desc {
  font-size: .82rem;
  color: #475569;
}

/* Team avatar (circular) */
.pe-team-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cl);
  color: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 auto 12px;
}

/* Team role label */
.pe-team-role {
  font-size: .78rem;
  color: var(--c);
  font-weight: 600;
  margin-bottom: 6px;
}

/* Certification item */
.pe-cert-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--text-white);
  border: 1px solid var(--border-light);
  border-radius: 10px;
}