/* ============================================================
   CREATIVE CIRCLE — corporate, betrouwbaar, blank en transparant.
   (Zij hebben het zelf niet door. Dat is de grap.)
   ============================================================ */

@font-face {
    font-family: 'Inter';
    src: url('/fonts/creative-circle/inter-var.woff2') format('woff2');
    font-weight: 400 800;
    font-display: swap;
}

.cc-page {
    font-family: 'Inter', system-ui, sans-serif;
    --cc-blue: #4199CC;
    --cc-navy: #15556B;
    --cc-grey: #64748B;
    --cc-bg: #F5F7F9;
    --cc-ease: cubic-bezier(.25, .6, .3, 1);
}

/* ---- reveals: subtiel en zakelijk, zelfde failsafe-contract als de rest ---- */
.cc-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--cc-ease), transform .7s var(--cc-ease); }
.cc-reveal.cc-in { opacity: 1; transform: none; }
@keyframes cc-failsafe { to { opacity: 1; transform: none; } }
.cc-reveal:not(.cc-armed) { animation: cc-failsafe .6s var(--cc-ease) 2.8s forwards; }

/* ---- corporate kaarten ---- */
.cc-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-top: 3px solid var(--cc-blue);
    transition: box-shadow .3s var(--cc-ease), transform .3s var(--cc-ease);
}
.cc-card:hover { box-shadow: 0 12px 30px -10px rgba(21, 85, 107, .25); transform: translateY(-3px); }

/* KPI-tellers */
.cc-kpi { border-left: 3px solid var(--cc-blue); }

/* slider */
.cc-slide-track { display: flex; transition: transform .7s var(--cc-ease); }
.cc-thumb { outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .3s, opacity .3s; }
.cc-thumb.cc-active { outline-color: var(--cc-navy); opacity: 1 !important; }

/* de subtielste hover die een bureau kan leveren */
.cc-btn { transition: background-color .25s var(--cc-ease), transform .25s var(--cc-ease); }
.cc-btn:hover { transform: translateY(-1px); }

/* gecapte canvas zoals de andere brandsites */
.cc-page { max-width: 1680px; margin-inline: auto; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    .cc-reveal { transition-duration: .01s; }
}