/* ============================================================
   OVAS Solutions — shared design system
   ============================================================ */
:root{ --ovas-red:#d3242c; --ovas-black:#0a0a0b; --ovas-gray:#8b9093; --ovas-blue:#0095d7; }
html,body{ background:#fbfbfc; color:#101114; -webkit-font-smoothing:antialiased; }
body{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; overflow-x:hidden; }
.font-display{ font-family:'Michroma',sans-serif; letter-spacing:-.02em; }

/* Grain / texture overlay */
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4; z-index:0;
  background-image:radial-gradient(rgba(16,17,20,.035) 1px, transparent 1px);
  background-size:22px 22px;
}
.mesh{
  background:
    radial-gradient(60% 55% at 12% 8%, rgba(211,36,44,.12), transparent 60%),
    radial-gradient(48% 50% at 92% 4%, rgba(0,149,215,.12), transparent 60%),
    radial-gradient(60% 60% at 78% 92%, rgba(211,36,44,.06), transparent 60%);
}
.mesh-blue{
  background:
    radial-gradient(55% 55% at 10% 10%, rgba(0,149,215,.16), transparent 60%),
    radial-gradient(50% 50% at 90% 6%, rgba(211,36,44,.10), transparent 60%);
}
.glass{ background:rgba(255,255,255,.65); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.glass-dark{ background:rgba(12,13,16,.6); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }

.text-gradient{ background:linear-gradient(100deg,#d3242c 0%,#e23f3a 38%,#0095d7 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.text-gradient-blue{ background:linear-gradient(100deg,#0095d7 0%,#12a6e8 60%,#d3242c 150%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }
.reveal[data-d="5"]{ transition-delay:.4s } .reveal[data-d="6"]{ transition-delay:.48s }

@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.float{ animation:float 7s ease-in-out infinite; }
@keyframes floatB{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(10px)} }
.floatB{ animation:floatB 6s ease-in-out infinite; }

.card-hover{ transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s; }
.card-hover:hover{ transform:translateY(-6px); box-shadow:0 30px 70px -30px rgba(16,17,20,.35); }

/* primaire knop = OVAS blauw (klassenaam behouden voor compatibiliteit) */
.btn-red{ background:linear-gradient(180deg,#12a6e8,#0086c4); box-shadow:0 10px 26px -10px rgba(0,149,215,.7),inset 0 1px 0 rgba(255,255,255,.25); transition:transform .25s, filter .25s; }
.btn-red:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.btn-blue{ background:linear-gradient(180deg,#12a6e8,#0086c4); box-shadow:0 10px 26px -10px rgba(0,149,215,.7),inset 0 1px 0 rgba(255,255,255,.25); transition:transform .25s, filter .25s; }
.btn-blue:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.btn-ghost-blue{ color:#0086c4; border:1px solid rgba(0,149,215,.35); background:rgba(0,149,215,.06); transition:all .25s; }
.btn-ghost-blue:hover{ background:rgba(0,149,215,.12); border-color:rgba(0,149,215,.55); }
.logo-img{ height:2.5rem; width:auto; }

.marquee{ display:flex; gap:3.5rem; width:max-content; animation:scrollx 32s linear infinite; }
@keyframes scrollx{ to{ transform:translateX(-50%) } }

.link-underline{ position:relative; }
.link-underline::after{ content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0; background:var(--ovas-red); transition:width .3s; }
.link-underline:hover::after{ width:100%; }
.nav-active{ color:#101114; }
.nav-active::after{ width:100%; }

details.faq > summary{ list-style:none; cursor:pointer; }
details.faq > summary::-webkit-details-marker{ display:none; }
details.faq .chev{ transition:transform .3s; }
details.faq[open] .chev{ transform:rotate(45deg); }

/* Contact form */
.field{ width:100%; border:1px solid rgba(16,17,20,.12); background:#fff; border-radius:.85rem; padding:.85rem 1rem; font-size:15px; transition:border-color .2s, box-shadow .2s; }
.field:focus{ outline:none; border-color:var(--ovas-blue); box-shadow:0 0 0 4px rgba(0,149,215,.12); }
.turnstile-container{ margin:6px 0 4px; }
.form-note{ display:none; border-radius:.85rem; padding:.85rem 1rem; font-size:14px; font-weight:600; }
.form-note.ok{ display:block; background:rgba(16,185,129,.1); color:#047857; }
.form-note.err{ display:block; background:rgba(211,36,44,.1); color:#b3141b; }

@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none} .float,.floatB,.marquee{animation:none} }

/* Diensten dropdown */
.nav-dd-menu{ position:absolute; left:0; top:100%; padding-top:14px; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:60; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu{ opacity:1; visibility:visible; transform:translateY(0); }
#diensten-trigger{ cursor:pointer; }

/* Nieuwsartikel-typografie */
.article{ color:#33363d; font-size:17px; line-height:1.75; }
.article > * + *{ margin-top:1.15rem; }
.article h2{ font-family:'Michroma',sans-serif; font-size:1.4rem; line-height:1.3; margin-top:2.2rem; color:#101114; letter-spacing:-.01em; }
.article h3{ font-weight:700; font-size:1.18rem; margin-top:1.9rem; color:#101114; }
.article h4{ font-weight:700; font-size:1.02rem; margin-top:1.4rem; color:#101114; }
.article ul{ list-style:disc; padding-left:1.35rem; }
.article li{ margin-top:.45rem; }
.article li::marker{ color:#0095d7; }
.article a{ color:#0086c4; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.article strong{ color:#101114; font-weight:700; }
.article img{ border-radius:1rem; margin:1.75rem 0; width:100%; height:auto; }
.article blockquote{ border-left:3px solid #0095d7; padding:.4rem 0 .4rem 1.1rem; color:#4b4e55; font-style:italic; }
.article blockquote cite{ display:block; margin-top:.5rem; font-style:normal; font-weight:600; color:#101114; }

.article ol{ list-style:decimal; padding-left:1.45rem; }
.article ol li{ margin-top:.5rem; }
.article ol li::marker{ color:#0095d7; font-weight:700; }

.nav-dd-menu.nav-dd-right{ left:auto; right:0; }