/* ==========================================================================
   main.css — additions on top of webflow.css
   Initial (pre-animation) states for everything js/main.js animates.
   They only apply while <html> has the "anim-ready" class, which main.js
   removes again if GSAP can't load, so content is never stuck hidden.
   ========================================================================== */

/* ---- Brand: logo mark + wordmark (same height as the template's logo) --- */
.brand-logo-wrapper {
  align-items: center;
  gap: 0.75rem;
  height: 3.3rem;
  display: flex;
}
.brand-logo-mark {
  width: auto;
  height: 2.6rem;
}
.brand-logo-text {
  font-family: var(--_typography---font-family--heading-font);
  color: var(--colors--simple-black);
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
@media screen and (max-width: 991px) {
  .brand-logo-wrapper { height: 3.125rem; gap: 0.65rem; }
  .brand-logo-mark { height: 2.4rem; }
  .brand-logo-text { font-size: 1.7rem; }
}
@media screen and (max-width: 479px) {
  .brand-logo-wrapper { height: 2.5rem; gap: 0.5rem; }
  .brand-logo-mark { height: 1.95rem; }
  .brand-logo-text { font-size: 1.4rem; }
}

/* ---- Brand gradient (taken from the logo: cyan -> azure -> cobalt) ----- */
:root {
  --brand-gradient: linear-gradient(100deg, #10b6f2 0%, #2f86f6 45%, #2457f5 100%);
  --brand-tint: rgba(36, 87, 245, 0.14);
  --brand-marker: rgba(16, 182, 242, 0.22);
}
/* coloured words in the big section titles get the logo gradient */
.section-heading .primary-color,
.highlight {
  background-image: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Key phrases: bold, no highlight ----------------------------------- */
strong.mark {
  color: var(--colors--simple-black);
  font-weight: 600;
}
.faq-item-wrapper.w--current strong.mark { color: inherit; }

/* ---- Onze impact: cards (icons keep the original design) --------------- */
.result-card:not(.img) {
  transition: box-shadow 0.45s, border-color 0.45s;
}
.result-card:not(.img)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background-image: var(--brand-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.result-card:not(.img):hover {
  box-shadow: 0 1.25rem 2.5rem -1.25rem rgba(16, 32, 80, 0.18);
}
.result-card:not(.img):hover::before { transform: scaleX(1); }
.impact-tag {
  position: absolute;
  top: 2rem;
  right: 2rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--colors--plaster-of-paris);
  border-radius: 999px;
  background-color: #f6f7f9;
  color: #5b6472;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.impact-tag.is-green {
  border-color: #cfe9dc;
  background-color: #eef8f3;
  color: #237a52;
}
.result-card-sub-heading { color: var(--colors--deep-gray); }


/* ---- Waarom wij: numbered items, active item stands out ---------------- */
.value-num {
  display: inline-block;
  min-width: 2.4rem;
  margin-right: 0.6rem;
  font-family: var(--_typography---font-family--heading-font);
  font-weight: 400;
  color: var(--colors--pastel-grey);
  transition: color 0.4s;
}
.value-item-title { transition: color 0.4s; }
.value-item.w--current .value-num {
  background-image: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.value-item .value-item-inner { transition: background-color 0.4s, box-shadow 0.4s; border-radius: 1rem; }
.value-item.w--current .value-item-inner {
  background-color: var(--colors--white);
  box-shadow: 0 1rem 2.25rem -1.25rem rgba(16, 32, 80, 0.25);
}
.value-item.w--current .value-item-inner._01 { padding-top: var(--_spacing---padding--padding-2xl); }
.value-item.w--current .value-item-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.25rem;
  bottom: 1.25rem;
  width: 3px;
  border-radius: 3px;
  background-image: var(--brand-gradient);
}
.value-item.w--current .value-item-icon { color: var(--colors--primary); }
.value-item.w--current .value-item-divider { opacity: 0; }
.value-item-description { padding-left: 3rem; }
@media screen and (max-width: 767px) {
  .value-item.w--current .value-item-inner { padding-left: 1.25rem; padding-right: 1.25rem; }
  .value-num { min-width: 2rem; }
  .value-item-description { padding-left: 2.6rem; }
}

/* ---- Onze diensten: each service has its own muted accent colour ------- */
.service-card._01 { --svc: #3d5a9e; --svc-bg: #eef2f9; --svc-line: #d9e1f0; } /* websites: slate blue */
.service-card._02 { --svc: #4c4f9c; --svc-bg: #efeff8; --svc-line: #dcdcef; } /* web-apps: indigo   */
.service-card._03 { --svc: #2f7a63; --svc-bg: #edf6f2; --svc-line: #d3e9df; } /* SEO: sage green     */
.service-card._04 { --svc: #96652d; --svc-bg: #f8f2ea; --svc-line: #eedfcb; } /* marketing: bronze   */
.service-icon {
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  padding: 0.65rem;
  border: 1px solid var(--svc-line);
  border-radius: 0.75rem;
  background-color: var(--svc-bg);
  color: var(--svc);
}
.service-icon svg { width: 100%; height: 100%; display: block; }
.service-chip {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--svc-line);
  border-radius: 999px;
  background-color: var(--svc-bg);
  color: var(--svc);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.service-features-wrapper { list-style: none; padding-left: 0; }
.service-feature {
  position: relative;
  padding-left: 1.6rem;
}
.service-feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--svc, var(--colors--primary));
  opacity: 0.75;
}


/* ---- Fade up (slide from bottom 3rem) ---------------------------------- */
.anim-ready
  :is(
    .about-left,
    .about-heading,
    .about-btn-wrapper,
    .about-cards-wrapper,
    .section-sub-heading,
    .service-section-bottom,
    .pricing-section-bottom,
    .footer-contents,
    .insight-details-top,
    .utility-hero-btn-wrapper,
    .utility-hero-sub-heading,
    ._404-image,
    .utility-block-title,
    .all-headings,
    .all-paragraphs,
    .utility-btns-wrapper,
    .license-item-title,
    .license-blocks-wrapper,
    .changelog-block
  ) {
  opacity: 0;
  transform: translate3d(0, 3rem, 0);
}

/* ---- Webflow presets (slide in / grow / shrink) ------------------------- */
.anim-ready
  :is(
    .faq-section-image,
    .faq-btn-wrapper,
    .faq-item-wrapper,
    .contact-image,
    .contact-form-input-field,
    .contact-form .submit-btn-wrapper,
    .value-images-wrapper,
    .value-item,
    .insight-main-image,
    .insight-title,
    .insight-description-block,
    .color-block
  ) {
  opacity: 0;
}

/* ---- Counters ---------------------------------------------------------- */
.counter-numbers-wrapper._02 {
  transform: translate3d(0, -89%, 0);
}

/* ---- 3D flip headings: back face starts rotated away ------------------- */
.heading-3d-back {
  transform: translate3d(0, 100%, 0) rotateX(-90deg);
}

/* ---- Result cards ------------------------------------------------------ */
@media (min-width: 992px) {
  .anim-ready .result-card._01 {
    transform: translate3d(10%, 0, 0) rotateZ(-7deg);
  }
  .anim-ready .result-card._02 {
    transform: translate3d(-95%, 0, 0) rotateZ(8deg);
  }
  .anim-ready .result-card._03 {
    transform: translate3d(-210%, 0, 0) rotateZ(-17deg);
  }
  .anim-ready .result-card._04 {
    transform: translate3d(210%, 0, 0) rotateZ(17deg);
  }
  .anim-ready .result-card._05 {
    transform: translate3d(95%, 0, 0) rotateZ(-8deg);
  }
  .anim-ready .result-card._06 {
    transform: translate3d(-10%, 0, 0) rotateZ(7deg);
  }
}
@media (max-width: 991px) {
  .anim-ready .result-card {
    opacity: 0;
  }
}

/* ---- Services: on phones every part of a card also reveals separately -- */
@media (max-width: 767px) {
  .anim-ready :is(.service-title, .service-card-short-description, .service-features-wrapper) {
    opacity: 0;
    transform: translate3d(0, 3rem, 0);
  }
  .anim-ready .service-image {
    opacity: 0;
  }
}

/* ---- Insight cards (desktop hover reveal) ------------------------------ */
@media (min-width: 992px) {
  .anim-ready .insight-section-bottom :is(.insight-card-contents, [data-insight-slide-stagger="true"]) {
    opacity: 0;
  }
}

/* ---- Active tab states (main.js animates every change after load) ------ */
.faq-item-wrapper.w--current .faq-item {
  background-color: var(--colors--simple-black);
}
.faq-item-wrapper.w--current .faq-question {
  color: var(--colors--white);
}
.faq-item-wrapper.w--current .faq-answer {
  color: var(--color-shades--white-90);
}
.faq-item-wrapper.w--current .faq-icon {
  transform: rotate(180deg);
}
.value-item.w--current .value-item-icon {
  transform: rotate(135deg);
}
.price-item.w--current .pricing-card-heading {
  color: var(--colors--primary);
}

/* ---- FAQ: closed answers ------------------------------------------------ */
.faq-item-wrapper:not(.w--current) .faq-answer-block {
  height: 0;
}
.faq-item-wrapper:not(.w--current) .faq-answer {
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.95);
}

/* ---- "Choose us" accordion: closed items -------------------------------- */
.value-item:not(.w--current) :is(.value-item-description-wrap, .value-image-wrap) {
  height: 0;
}
.value-item:not(.w--current) .value-image-wrap {
  opacity: 0;
}
.value-images-wrapper .value-image:not(._01) {
  opacity: 0;
}
@media (max-width: 767px) {
  .value-item.w--current .value-item-bottom-gap {
    height: 0;
  }
  .value-item.w--current .value-item-divider {
    opacity: 0;
  }
}

/* ---- Divider lines that sweep in on hover ------------------------------ */
.value-item-divider-line,
.service-card-divider-line {
  transform: translate3d(-101%, 0, 0);
}

/* ---- Buttons: second (hover) label waits below ------------------------- */
:is(.primary-btn-text, .submit-btn-text, .secondary-btn-text).is-absolute {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 100%, 0);
}
.secondary-btn-icon.is-absolute {
  transform: translate3d(100%, 0, 0);
}

/* ---- Review / insight sliders ------------------------------------------ */
.review-text:not(._01) {
  opacity: 0;
}
.review-author-info {
  opacity: 0;
}
.w-slider .w-slide {
  will-change: transform;
}
.w-slider-nav > div {
  cursor: pointer;
}

/* ---- Mobile nav overlay ------------------------------------------------- */
.w-nav-overlay [data-nav-menu-open] {
  background-color: var(--colors--white);
}