/*
  WebAssisto — homepage stylesheet (production pilot)
  Source: extracted verbatim from the <style> block inside the approved
  "WebAssisto Site C.dc.html" Designer export, plus a small set of
  additions (marked below) needed because the Designer runtime's
  {{ binding }} / <sc-if> conditional rendering was replaced with plain
  CSS classes driven by assets/js/site.js.
*/

body { margin:0; }
.c-root, .c-root * { box-sizing: border-box; font-family: 'Inter', system-ui, sans-serif; }
.c-root h1, .c-root h2, .c-root .c-display { font-family: 'Space Grotesk', system-ui, sans-serif; }
.c-nav-link { position:relative; padding-bottom:4px; transition: color 0.2s ease; text-decoration:none; }
.c-footer-link { text-decoration:none; color:#8a887e; transition:color 0.2s ease; }
.c-footer-link:hover { color:#d4ff5f; text-decoration:underline; text-underline-offset:3px; }
.c-nav-link::after { content:''; position:absolute; left:0; bottom:0; width:100%; height:1.5px; background:#d4ff5f; transform:scaleX(0); transform-origin:left; transition: transform 0.2s ease; }
.c-nav-link:hover { color:#eceae4 !important; }
.c-nav-link:hover::after { transform:scaleX(1); }
.c-nav-link-active { color:#d4ff5f !important; }
.c-nav-link-active::after { transform:scaleX(1) !important; }
.c-btn-header:hover { background:#c2f24a; border-color:#c2f24a; }
@media (max-width:680px) {
  .c-wz-grid { grid-template-columns:1fr !important; gap:32px !important; }
  .c-wz-line { display:none !important; }
  .c-wz-step { position:relative; padding-left:26px; border-left:2px solid rgba(236,234,228,0.15); }
}
@media (max-width:860px) and (min-width:641px) {
  .c-pk-grid { grid-template-columns:repeat(2,1fr) !important; gap:20px !important; }
}
@media (max-width:640px) {
  .c-pk-grid { grid-template-columns:1fr !important; gap:24px !important; }
}
@media (max-width:820px) {
  .c-ct-grid { grid-template-columns:1fr !important; }
  .c-ct-visual { height:320px !important; margin-top:8px; margin-bottom:8px; max-width:480px; margin-left:auto; margin-right:auto; }
  .c-ct-heading { white-space:normal !important; }
}
.c-ct-heading { white-space:nowrap; }
@keyframes c-ct-bar-name { 0%,3% { width:0%; } 13%,72% { width:100%; } 90%,100% { width:0%; } }
@keyframes c-ct-bar-email { 0%,15% { width:0%; } 25%,72% { width:100%; } 90%,100% { width:0%; } }
@keyframes c-ct-msg1 { 0%,27% { width:0%; } 33%,72% { width:82%; } 90%,100% { width:0%; } }
@keyframes c-ct-msg2 { 0%,33% { width:0%; } 39%,72% { width:94%; } 90%,100% { width:0%; } }
@keyframes c-ct-msg3 { 0%,39% { width:0%; } 45%,72% { width:56%; } 90%,100% { width:0%; } }
@keyframes c-ct-click-pulse { 0%,49% { opacity:0; transform:scale(0.7); } 52% { opacity:0.8; transform:scale(1.15); } 58%,100% { opacity:0; transform:scale(1.3); } }
@keyframes c-ct-dot-move { 0%,50% { offset-distance:0%; opacity:0; } 54% { opacity:1; } 68% { offset-distance:100%; opacity:1; } 72%,100% { offset-distance:100%; opacity:0; } }
@keyframes c-ct-status-fade { 0%,66% { opacity:0; transform:translateY(6px); } 74%,90% { opacity:1; transform:translateY(0); } 98%,100% { opacity:0; } }
@keyframes c-ct-confirm-fade { 0%,76% { opacity:0; } 84%,90% { opacity:1; } 98%,100% { opacity:0; } }
.c-ct-bar-name { animation: c-ct-bar-name 10s ease-in-out infinite; }
.c-ct-bar-email { animation: c-ct-bar-email 10s ease-in-out infinite; }
.c-ct-msg1 { animation: c-ct-msg1 10s ease-in-out infinite; }
.c-ct-msg2 { animation: c-ct-msg2 10s ease-in-out infinite; }
.c-ct-msg3 { animation: c-ct-msg3 10s ease-in-out infinite; }
.c-ct-click { animation: c-ct-click-pulse 10s ease-in-out infinite; }
.c-ct-dot { offset-path: path('M0,4 C60,4 90,60 160,60 S 260,60 300,60'); offset-rotate:0deg; animation: c-ct-dot-move 10s ease-in-out infinite; }
.c-ct-status { animation: c-ct-status-fade 10s ease-in-out infinite; }
.c-ct-confirm { animation: c-ct-confirm-fade 10s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .c-ct-bar-name, .c-ct-bar-email, .c-ct-msg1, .c-ct-msg2, .c-ct-msg3, .c-ct-click, .c-ct-dot, .c-ct-status, .c-ct-confirm { animation:none !important; }
  .c-ct-bar-name, .c-ct-bar-email, .c-ct-msg1 { width:100% !important; }
  .c-ct-msg2 { width:94% !important; }
  .c-ct-msg3 { width:56% !important; }
  .c-ct-status, .c-ct-confirm { opacity:1 !important; transform:none !important; }
  .c-ct-dot { opacity:0 !important; }
}
@keyframes hero-fade-up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.hero-audience { animation: hero-fade-up 0.7s ease-out 0.5s both; }
@keyframes c-over-float-a { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes c-over-float-b { 0%,100% { transform:translateY(0); } 50% { transform:translateY(8px); } }
@keyframes c-over-glow { 0%,100% { opacity:0.35; transform:scale(1); } 50% { opacity:0.55; transform:scale(1.08); } }
.c-over-visual { order:2; }
.c-over-tag { animation: c-over-float-a 5.5s ease-in-out infinite; }
.c-over-tag-b { animation: c-over-float-b 6.5s ease-in-out infinite; }
.c-over-glow { animation: c-over-glow 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .c-over-tag, .c-over-tag-b, .c-over-glow, .c-over-cursor { animation:none !important; } }
.c-card:hover { transform: translateY(-5px); box-shadow: 0 20px 38px rgba(20,21,26,0.16); }
.c-btn-primary:hover { background: #c4ef4d; }
.c-btn-dark:hover { background: #23252f; }
.c-top-btn { transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, opacity 0.25s ease, visibility 0.25s ease; }
.c-top-btn:hover { background:#c4ef4d; transform:translateY(-3px); box-shadow:0 10px 24px rgba(212,255,95,0.35); }
.c-top-btn:focus-visible { outline:2px solid #4a90e2; outline-offset:3px; }
@media (prefers-reduced-motion: reduce) { .c-top-btn { transition:opacity 0.2s ease, visibility 0.2s ease; } .c-top-btn:hover { transform:none; } }
.c-input:focus { outline: none; border-color: #ff6b4a !important; box-shadow: 0 0 0 3px rgba(255,107,74,0.18); }
@keyframes c-blink { 0%, 45% { opacity:1; } 50%, 95% { opacity:0; } 100% { opacity:1; } }
@keyframes c-type { from { width: 0; } to { width: 8.6ch; } }
@keyframes c-dash { to { stroke-dashoffset: -200; } }
@keyframes c-dotmove { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
.c-caret { display:inline-block; width:2px; background:#d4ff5f; margin-left:3px; animation: c-blink 1.1s step-end infinite; }
.c-typed { display:inline-block; overflow:hidden; white-space:nowrap; width:8.6ch; animation: c-type 2.4s steps(9) 1; }
.c-flowline { stroke-dasharray: 10 10; animation: c-dash 3.5s linear infinite; }
.c-dot { offset-rotate: 0deg; animation: c-dotmove 5s linear infinite; }
@keyframes hero-wire { 0%, 3% { opacity: 0; } 6%, 27% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes hero-build { 0%, 30% { opacity: 0; } 36%, 60% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes hero-final { 0%, 63% { opacity: 0; transform: scale(0.98); } 70%, 100% { opacity: 1; transform: scale(1); } }
@keyframes hero-mobile { 0%, 63% { opacity: 0; transform: translate(14px,14px); } 72%, 100% { opacity: 1; transform: translate(0,0); } }
@keyframes hero-cursor { 0%, 35% { opacity: 0; left: 28%; top: 62%; } 40% { opacity: 1; left: 28%; top: 62%; } 52%, 60% { opacity: 1; left: 62%; top: 38%; } 66%, 100% { opacity: 0; left: 62%; top: 38%; } }
@keyframes hero-click { 0%, 51% { opacity: 0; transform: scale(0.5); } 54% { opacity: 0.7; transform: scale(1.6); } 60%, 100% { opacity: 0; transform: scale(1.8); } }
.hero-layer-wire { animation: hero-wire 8s ease-in-out infinite; }
.hero-layer-build { animation: hero-build 8s ease-in-out infinite; }
.hero-layer-final { animation: hero-final 8s ease-in-out infinite; }
.hero-layer-mobile { animation: hero-mobile 8s ease-in-out infinite; }
.hero-cursor-dot { animation: hero-cursor 8s ease-in-out infinite; }
.hero-cursor-click { animation: hero-click 8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .c-caret, .c-typed, .c-flowline, .c-dot, .c-card, .c-btn-primary, .c-btn-dark,
  .hero-layer-wire, .hero-layer-build, .hero-layer-final, .hero-layer-mobile, .hero-cursor-dot, .hero-cursor-click { animation: none !important; transition: none !important; }
  .c-typed { width: 8.6ch; }
  .hero-layer-wire, .hero-layer-build, .hero-cursor-dot, .hero-cursor-click { opacity: 0 !important; }
  .hero-layer-final, .hero-layer-mobile { opacity: 1 !important; transform: none !important; }
}
.c-menu-btn { display:none; background:none; border:none; cursor:pointer; padding:8px; border-radius:8px; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; }
.c-menu-btn:focus-visible { outline:2px solid #4a90e2; outline-offset:2px; }
.c-mobile-link { text-decoration:none; color:#eceae4; font-size:17px; font-weight:600; padding:15px 4px; display:block; border-bottom:1px solid rgba(236,234,228,0.08); }
.c-mobile-link:focus-visible { outline:2px solid #4a90e2; outline-offset:2px; }
@media (max-width:960px) {
  .c-nav-links-desktop, .c-nav-cta-desktop { display:none !important; }
  .c-menu-btn { display:flex !important; }
}
@media (max-width:900px) {
  .c-hero-grid { grid-template-columns:1fr !important; gap:40px !important; padding-bottom:64px !important; }
  .c-hero-visual { max-width:480px; margin:0 auto; width:100%; }
  .c-hero-mockup-body { height:260px !important; }
  .c-hero-title { font-size:40px !important; }
  .c-aanbod-grid { grid-template-columns:repeat(2,1fr) !important; }
  .c-over-grid { grid-template-columns:1fr !important; gap:40px !important; }
  .c-over-text { order:1; }
  .c-over-visual { order:2; }
}
@media (max-width:600px) {
  .c-aanbod-grid { grid-template-columns:1fr !important; }
  .c-hero-title { font-size:32px !important; }
}
@media (max-width:820px) {
  .c-footer-grid { grid-template-columns:1fr 1fr !important; gap:28px !important; }
  .c-footer-business { grid-column:1 / -1; }
  .c-footer-bottom { flex-direction:column; align-items:flex-start !important; gap:14px !important; }
}
@media (max-width:560px) {
  .c-footer-grid { grid-template-columns:1fr !important; gap:24px !important; }
  .c-footer-bottom { align-items:center !important; text-align:center; }
  .c-footer-bottom > div:last-child { justify-content:center !important; }
}
.c-root a:focus-visible, .c-root button:focus-visible {
  outline:2px solid #4a90e2; outline-offset:3px; border-radius:6px;
}
.c-input:focus-visible { outline:2px solid #4a90e2; outline-offset:2px; }

/* ============================================================
   Additions for the static production pilot (not in the original
   Designer <style> block). These replace behavior that used to be
   driven by {{ binding }} / <sc-if> and is now handled by
   assets/js/site.js toggling plain classes/attributes.
   ============================================================ */

/* Skip-to-content link (new — original had no keyboard bypass for the nav) */
.c-skip-link {
  position:absolute; left:12px; top:-60px; z-index:100;
  background:#d4ff5f; color:#14151a; font-weight:700; font-size:14px;
  padding:10px 16px; border-radius:8px; text-decoration:none;
  transition:top 0.15s ease;
}
.c-skip-link:focus { top:12px; }

/* Mobile menu button icon swap — was <sc-if value="{{ menuOpen }}"> */
.c-menu-icon-close { display:none; }
.c-menu-btn[aria-expanded="true"] .c-menu-icon-open { display:none; }
.c-menu-btn[aria-expanded="true"] .c-menu-icon-close { display:block; }

/* Mobile nav panel — was <sc-if value="{{ menuOpen }}"> wrapping an inline-styled div */
.c-mobile-panel {
  position:fixed; inset:0; z-index:39; background:#14151a;
  padding:96px 32px 32px; display:none; flex-direction:column; overflow-y:auto;
}
.c-mobile-panel.is-open { display:flex; }
.c-mobile-cta {
  margin-top:24px; text-align:center; background:#d4ff5f; color:#14151a;
  font-weight:700; font-size:15px; padding:14px; border-radius:9px; text-decoration:none;
}

/* Contact form input border — was inline style:border:1.5px solid {{ nameBorder }} */
.c-input { border:1.5px solid #d9d6cc; }
.c-input.has-error { border-color:#c94a2c; }
.c-field-error { font-size:12px; color:#c94a2c; margin-top:5px; }

/* Back-to-top button — was a fully inline `topBtnStyle` object built in JS */
.c-top-btn {
  position:fixed; right:28px; bottom:28px; z-index:50;
  width:52px; height:52px; border-radius:14px; background:#d4ff5f; border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,0.35);
  opacity:0; visibility:hidden;
}
.c-top-btn.is-visible { opacity:1; visibility:visible; }

/* Inline mailto/website contact links (Round 7) — new, additive rule only.
   Keeps the exact current visible color/weight of the wrapped <strong>/
   <span> untouched (color:inherit, no underline by default) and adds an
   underline only on hover/focus so the text still reads as clickable. */
.c-mail-link { color:inherit; text-decoration:none; }
.c-mail-link:hover, .c-mail-link:focus-visible { text-decoration:underline; }

/* ============================================================
   SITEWIDE — WebAssisto interactive-button marker effect (Round 14).
   Originally piloted (Round 13) as .c-btn-demo-hover on a single
   Homepage button; promoted here to one reusable, sitewide component
   applied to every real button/CTA in the production build. Applied
   ADDITIVELY alongside each button's own existing variant class
   (c-btn-primary, c-btn-header, c-btn-ghost, c-mobile-cta, c-demo-cta,
   c-soon-btn-primary, c-soon-btn-ghost, or none) — never replacing it.
   Existing colors, sizes, padding and border-radius are untouched;
   this block only adds the marker/label motion layer.

   Expected markup inside each affected <a>/<button>:
     <span class="c-btn-interactive-marker" aria-hidden="true">
       <span></span><span></span><span></span>
     </span>
     <span class="c-btn-interactive-label">...visible text...</span>

   Plain text links (nav, footer, mailto, inline legal/body links, the
   underlined-style "terug"/"boven" links) deliberately do NOT get this
   class — see SITEWIDE_BUTTONS_AND_PACKAGE_404_REPORT.txt for the full
   per-page inventory and inclusion/exclusion reasoning.
   ============================================================ */
.c-btn-interactive {
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
}
.c-btn-interactive:hover,
.c-btn-interactive:focus,
.c-btn-interactive:focus-visible,
.c-btn-interactive:active,
.c-btn-interactive:visited {
  text-decoration: none !important;
}
.c-btn-interactive-marker {
  position: absolute;
  left: 10px;
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translate(-14px, -50%);
  transition: transform 0.22s ease-out, opacity 0.22s ease-out;
  pointer-events: none;
  z-index: 1;
}
.c-btn-interactive-marker span {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  border: 1px solid rgba(20,21,26,0.25);
  display: block;
}
.c-btn-interactive-label {
  display: inline-block;
  transform: translateX(0);
  transition: transform 0.22s ease-out;
}
/* (hover: hover) guards against a "stuck" marker on touch devices,
   where :hover can otherwise persist after a tap. */
@media (hover: hover) {
  .c-btn-interactive:hover .c-btn-interactive-marker {
    opacity: 1;
    transform: translate(0, -50%);
  }
  .c-btn-interactive:hover .c-btn-interactive-label {
    transform: translateX(11px);
  }
}
.c-btn-interactive:focus-visible .c-btn-interactive-marker {
  opacity: 1;
  transform: translate(0, -50%);
}
.c-btn-interactive:focus-visible .c-btn-interactive-label {
  transform: translateX(11px);
}
@media (prefers-reduced-motion: reduce) {
  .c-btn-interactive-marker,
  .c-btn-interactive-label {
    transition: none;
  }
}

/* Mobile fix: contact section */
@media (max-width: 820px) {
  #c-contact {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .c-ct-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 72px !important;
  }

  #contactForm,
  .c-ct-thanks {
    width: 100% !important;
    max-width: none !important;
  }

  #contactForm input,
  #contactForm textarea,
  #contactForm button {
    box-sizing: border-box;
  }

  .c-ct-visual {
    width: 100%;
  }
}