/* AgentsLabs redesign — gedeelde basisstijlen voor de vernieuwde pagina's.
   Pagina-specifieke opmaak staat inline in de HTML (design-systeem van claude.ai/design). */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:#05060a;color:#b9c1d4;font-family:'Space Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(34,211,238,.28);color:#fff}
a{color:#dfe6f3}
a:hover{color:#7de7f8}
[hidden]{display:none!important}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:#1a2030;border-radius:8px}
::-webkit-scrollbar-track{background:#07080d}

a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #22d3ee;outline-offset:3px}

/* Formulier */
input:focus,select:focus,textarea:focus{outline:none;border-color:#22d3ee!important;box-shadow:0 0 0 4px rgba(34,211,238,.14)}
input::placeholder,textarea::placeholder{color:#7c879d}
select option{background:#101828;color:#f4f6fb}

/* Skip-link */
.al-skip{position:absolute;left:-9999px;top:0;z-index:400;background:#f4f6fb;color:#05060a;padding:.7rem 1.1rem;border-radius:10px}
.al-skip:focus{left:1rem!important;top:1rem!important}

/* Hover-varianten (inline styles vragen om !important) */
.hv-nav:hover{color:#fff!important;background:rgba(255,255,255,.05)!important}
.hv-fff:hover{color:#fff!important}
.hv-cta:hover{box-shadow:0 0 0 1px rgba(34,211,238,.55),0 16px 50px -12px rgba(122,134,255,.6)!important}
.hv-ghost:hover{border-color:var(--acc,#22d3ee)!important;color:#7de7f8!important}
.hv-link:hover{color:#7de7f8!important}
.hv-white:hover{color:#f4f6fb!important}
.hv-card:hover{border-color:rgba(34,211,238,.45)!important}
.hv-card:hover .card-zoom{transform:scale(1.045)}
.hv-row:hover{background:rgba(255,255,255,.025)!important}
.hv-row:hover [data-hovtitle]{transform:translateX(8px);color:#7de7f8!important}
.hv-row:hover [data-hovarrow]{transform:translateX(6px);color:#7de7f8!important}

/* FAQ-accordeon */
summary.faq-q::-webkit-details-marker{display:none}
summary.faq-q::after{content:'+';flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(34,211,238,.3);color:var(--acc,#22d3ee);font-size:1.2rem;transition:transform .3s ease}
details[open]>summary.faq-q::after{content:'\2212'}

/* Animaties */
@keyframes al-rise{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes al-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes al-blink{0%,55%{opacity:1}56%,100%{opacity:0}}
@keyframes al-pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 10px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
@keyframes al-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes al-scrollcue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

@media (max-width:959px){
  #al-links{display:none!important}
  #al-menu-btn{display:inline-flex!important}
}
@media (max-width:420px){
  [style*="minmax(280px,1fr)"],
  [style*="minmax(290px,1fr)"],
  [style*="minmax(300px,1fr)"],
  [style*="minmax(310px,1fr)"],
  [style*="minmax(320px,1fr)"]{grid-template-columns:minmax(0,1fr)!important}
  .al-badge{font-size:.66rem!important; letter-spacing:.08em!important; padding:.45rem .75rem!important; gap:.45rem!important}
}
@media (max-width:639px){
  .al-metric-grid{grid-template-columns:1fr!important}
  .al-fact-list{grid-template-columns:1fr!important;gap:.25rem!important}
  .al-fact-list dd{margin:0 0 .75rem!important}
}
@media (max-width:359px){
  #al-head>div,#al-menu>div,main>section>div,footer>div{padding-left:1.25rem!important;padding-right:1.25rem!important}
  main a,main button,#al-menu a{box-sizing:border-box;max-width:100%;overflow-wrap:anywhere}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}
@media (forced-colors: active){
  [data-grad]{background:none!important;-webkit-text-fill-color:CanvasText!important;color:CanvasText!important}
  a,button{forced-color-adjust:auto}
}

/* Analyticsvoorkeuren */
.consent-panel{position:fixed;z-index:500;right:1rem;bottom:1rem;left:1rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;max-width:980px;margin:0 auto;padding:1rem 1.15rem;color:#dfe6f3;background:rgba(11,16,29,.98);border:1px solid rgba(255,255,255,.22);border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.45)}
.consent-panel[hidden],.consent-manage[hidden]{display:none!important}
.consent-panel__content{min-width:0}
.consent-panel h2{margin:0 0 .25rem;color:#f4f6fb;font-size:1rem}
.consent-panel p{margin:0;font-size:.9rem;line-height:1.5}
.consent-panel a{color:#7de7f8;text-decoration:underline;text-underline-offset:3px}
.consent-panel__actions{display:flex;flex:none;gap:.65rem}
.consent-button,.consent-manage{min-height:44px;padding:.65rem 1rem;border:1px solid rgba(255,255,255,.28);border-radius:999px;font:600 .88rem/1.2 'Space Grotesk',system-ui,sans-serif;cursor:pointer}
.consent-button--primary{color:#05060a;background:#7de7f8;border-color:#7de7f8}
.consent-button--secondary{color:#f4f6fb;background:transparent}
.consent-manage{position:fixed;z-index:490;left:1rem;bottom:1rem;color:#f4f6fb;background:rgba(11,16,29,.96)}
.consent-button:focus-visible,.consent-manage:focus-visible{outline:2px solid #22d3ee;outline-offset:3px}
@media (max-width:700px){.consent-panel{align-items:stretch;flex-direction:column;gap:.9rem}.consent-panel__actions{display:grid;grid-template-columns:1fr}}

/* Long-form prose (case studies, blog articles) */
.al-prose h2{margin:2.4rem 0 0;color:#f4f6fb;font-weight:700;letter-spacing:-.03em;line-height:1.12;font-size:clamp(1.45rem,2.6vw,1.9rem)}
.al-prose h2:first-child{margin-top:0}
.al-prose h3{margin:1.9rem 0 0;color:#f4f6fb;font-weight:700;letter-spacing:-.02em;line-height:1.2;font-size:1.25rem}
.al-prose p{margin:1rem 0 0;color:#8a94ab;font-size:1.05rem;text-wrap:pretty}
.al-prose strong{color:#dfe6f3}
.al-prose em{color:#b9c1d4}
.al-prose ul,.al-prose ol{margin:1.1rem 0 0;padding-left:1.3rem;color:#8a94ab;font-size:1.05rem}
.al-prose li{margin-top:.7rem;padding-left:.3rem}
.al-prose li::marker{color:var(--acc,#22d3ee)}
.al-prose a{color:#7de7f8;text-decoration:underline;text-underline-offset:3px}
.al-prose blockquote{margin:1.4rem 0 0;padding:.3rem 0 .3rem 1.2rem;border-left:3px solid var(--acc,#22d3ee);color:#b9c1d4;font-style:italic}
.al-prose .note-box{margin:1.6rem 0 0;padding:1.2rem 1.4rem;background:rgba(34,211,238,.05);border:1px solid rgba(34,211,238,.22);border-radius:14px}
.al-prose .note-box p{margin:0;color:#b9c1d4}