/* =============================================================================
   ELEVANTRO — brand layer (loads LAST, after the Webflow CSS).
   Built from newbranding.md / newglobals.md. The bulk of the palette is already
   applied at the variable level inside the generated CSS (Holly / Neon Teal /
   Azure); this file adds the Geist typeface, premium polish, the new header
   background, and the dark-dominant-hybrid light sections.
   Palette: Holly #021815 · Neon Teal #00D0A5 · Azure #F0FFFD · Cloud #EDEFF7
   ============================================================================= */

/* Geist — self-hosted (no Google Fonts dependency; GDPR-friendly, faster) */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/geist-400.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/geist-500.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/geist-600.woff2") format("woff2"); }

:root {
  --holly:        #021815;
  --holly-raised: #06241F;
  --neon-teal:    #00D0A5;
  --azure:        #F0FFFD;
  --cloud:        #EDEFF7;
  --graphite:     #6E7180;
  --ease:         cubic-bezier(.2, .8, .2, 1);
}

/* ----------------------------------------------------------------------------
   1. TYPE — Geist everywhere text lives (icon fonts are left untouched)
   ---------------------------------------------------------------------------- */
body, input, select, textarea, button, optgroup,
h1, h2, h3, h4, h5, h6, p, a, li, span, blockquote, label, figcaption,
[class*="heading-style"], [class*="text-size"], [class*="text-style"],
.w-nav-link, .button, .stats1_number, .stats_label, .eyebrow {
  font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* Brand "weight" is Medium with tight tracking — not Bold. */
h1, h2, h3, h4,
.heading-style-h1, .heading-style-h2, .heading-style-h3, .heading-style-h4 {
  font-weight: 500;
  letter-spacing: -0.03em;
}
body { letter-spacing: -0.01em; }

/* ----------------------------------------------------------------------------
   2. HEADER — keep the existing header; swap in the new brand background art.
   The 7 cyan "shine" beams are now baked into Header Background.png, so retire
   the old animated layers for a cleaner, on-brand result.
   ---------------------------------------------------------------------------- */
/* Previous-site look, recolored teal: the fine vector grid fills full width with
   small crisp squares, and the diagonal light-beams (.header-shine) sit on top.
   (Header Background.png had a coarse baked-in grid that couldn't go finer.) */
.section_header23 {
  background-image: url("../images/header-grid.svg?v=2");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--holly);
}

/* Logo = green icon (icon-green.png, transparent, ~318×240 @ retina) + live
   "Elevantro" wordmark text beside it. PNG icon avoids the gradient SVG that
   read as blurry on some mobile browsers; the wordmark stays crisp as text. */
.navbar2_logo { width: auto; height: 1.5rem; }
.comparison_logo { width: auto; height: 1.6rem; }

/* ----------------------------------------------------------------------------
   3. POLISH — restrained, premium. Teal is seasoning, not the meal.
   ---------------------------------------------------------------------------- */
.button {
  box-shadow: none;            /* kill the fuzzy always-on teal halo */
  font-weight: 600;            /* was 800 — too heavy */
  border-radius: 12px;
  letter-spacing: -0.01em;
  transition: filter .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease),
              background-color .2s var(--ease), color .2s var(--ease);
}
.button:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 208, 165, .22); }
.button:active { transform: translateY(0); box-shadow: none; }

/* Navbar CTA: keep it on ONE line and sized for the header. The base .button is
   1.2rem/.75rem 1.5rem — too big for the tight grid column on 14"/16" laptops,
   so "Boek een gesprek" / "Book a Call" wrapped to two lines. */
.button.is-navbar { font-size: .95rem; padding: .6rem 1.15rem; white-space: nowrap; }

::selection { background: var(--neon-teal); color: var(--holly); }

:focus-visible {
  outline: 2px solid var(--neon-teal);
  outline-offset: 2px;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ----------------------------------------------------------------------------
   4. VERGELIJKING — dark & on-brand; "others" muted, Elevantro highlighted
   ---------------------------------------------------------------------------- */
#comparison { color: var(--azure); }
#comparison .text-style-tagline { color: var(--neon-teal); }

#comparison .comparison_wrapper { align-items: stretch; }
#comparison .comparison_item {
  display: flex; flex-direction: column;
  background-image: none; border-radius: 1.25rem;
}

/* "Andere Automation Bedrijven" — muted, de-emphasized */
#comparison .comparison_item:first-child {
  background-color: rgba(6, 36, 31, .4);
  border: 1px solid rgba(240, 255, 253, .08);
}
#comparison .comparison_item:first-child h3,
#comparison .comparison_item:first-child .comparison_card_feature-wrapper { color: #9DA2B3; }

/* Elevantro — the standout: teal glass + brand grid + glow */
#comparison .comparison_item:last-child {
  background-image: linear-gradient(160deg, rgba(0,208,165,.16), rgba(0,208,165,.03) 60%), url("../images/card-grid.svg");
  background-size: auto, cover; background-position: 0 0, 0 0;
  background-color: rgba(6, 36, 31, .5);
  border: 1.5px solid rgba(0, 208, 165, .45);
  box-shadow: 0 0 50px rgba(0, 208, 165, .16);
}
#comparison .comparison_item:last-child h3,
#comparison .comparison_item:last-child .comparison_item_elevantro-logo-wrapper > div,
#comparison .comparison_item:last-child .comparison_card_feature-wrapper { color: var(--azure); }

/* equal-height title rows so the ✕ and ✓ rows line up; comfortable feature text */
#comparison .comparison_title-wrapper,
#comparison .comparison_item_elevantro-logo-wrapper {
  min-height: 2.75rem; display: flex; align-items: center; padding-top: 0; padding-bottom: 0;
}
#comparison .comparison_title-wrapper h3 { font-size: 1.6rem; font-weight: 500; line-height: 1.15; }
#comparison .comparison_card_feature-wrapper { font-size: 1.1rem; }
#comparison .comparison_card_feature-wrapper .icon-embed-xsmall { flex: 0 0 auto; }

/* ----------------------------------------------------------------------------
   5. ABOUT — cap the portrait height so it doesn't run past the copy
   ---------------------------------------------------------------------------- */
.about_pfp {
  width: 18rem;
  height: 22rem;
  object-fit: cover;
  object-position: center 45%;   /* statue visible up top, face centered (between the two earlier crops) */
  align-self: center;
}

/* (Trusted-by logos are static with hover-reveal captions — styled inline in the page.) */

/* ----------------------------------------------------------------------------
   7. TAGLINE PILLS ("Jouw AI-groeipartner", "Populaire systemen", …)
   Smaller, and the busy animated glow becomes a clean static gradient border
   where the teal accent bleeds in and saws off smoothly. (Overrides the inline
   <style> glow, which loads after this file — hence !important.)
   ---------------------------------------------------------------------------- */
.header_tagline_card {
  padding: 6px 15px !important;
  font-size: .8rem !important;
  gap: .4rem !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--holly-raised), var(--holly-raised)) padding-box,
    linear-gradient(115deg, rgba(0, 208, 165, .8), rgba(0, 208, 165, .14) 45%, rgba(0, 208, 165, 0) 72%) border-box !important;
  overflow: visible !important;
}
.header_tagline_card::before { display: none !important; }   /* kill the moving glow */
.header-tagline-image { width: 13px !important; height: auto !important; }

/* ----------------------------------------------------------------------------
   8. SYSTEMS — live automation flows (trigger -> result), JS-sequenced via .on
   ---------------------------------------------------------------------------- */
/* fill the card so the flow doesn't float with a big gap below it */
.bento-grid_card > .flow { flex: 1 1 auto; }
.bento-grid_card > .margin-bottom:has(.flow) { display: flex; flex: 1 1 auto; }
.bento-grid_card > .margin-bottom:has(.flow) > .flow { flex: 1 1 auto; }

.flow {
  display: flex; flex-direction: column; justify-content: center; align-items: stretch;
  gap: 0; width: 100%; max-width: 470px; padding: .5rem 32px;
  align-self: center; margin-inline: auto;   /* centred so wide cards stay balanced */
}
@media (max-width: 767px) { .flow { max-width: none; padding-inline: 18px; } }
.flow .icon { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* node ------------------------------------------------------------------------ */
.flow-node {
  position: relative; display: flex; align-items: center; gap: .75rem;
  padding: .72rem .9rem; border-radius: 13px;
  background: linear-gradient(180deg, rgba(0,208,165,.05), rgba(2,24,21,.5));
  border: 1px solid rgba(0,208,165,.16);
  box-shadow: inset 0 1px 0 rgba(240,255,253,.04);
  color: #9DA2B3;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease),
              background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.flow-node.on {
  border-color: rgba(0,208,165,.7); color: var(--azure);
  background: linear-gradient(180deg, rgba(0,208,165,.17), rgba(0,208,165,.05));
  box-shadow: 0 0 0 1px rgba(0,208,165,.5), 0 0 30px rgba(0,208,165,.3), inset 0 1px 0 rgba(240,255,253,.07);
  transform: translateX(2px) scale(1.015);
}
.flow-node__chip {
  flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: rgba(0,208,165,.12); color: var(--neon-teal); border: 1px solid rgba(0,208,165,.25);
  transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.flow-node.on .flow-node__chip {
  background: var(--neon-teal); color: var(--holly); box-shadow: 0 0 18px rgba(0,208,165,.6); transform: scale(1.05);
}
.flow-node__text { display: flex; flex-direction: column; line-height: 1.25; font-size: .97rem; min-width: 0; }
.flow-node__kicker { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  color: var(--neon-teal); opacity: .8; margin-bottom: .15rem; }

/* status pip: trigger = live pulsing dot, other completed steps = crisp check - */
.flow-node__pip { margin-left: auto; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid rgba(0,208,165,.3); position: relative; display: grid; place-items: center;
  transition: border-color .4s var(--ease), background .4s var(--ease); }
.flow-node.on .flow-node__pip { border-color: var(--neon-teal); }
.flow-node__pip .pip-check {
  width: 11px; height: 11px; fill: none; stroke: var(--holly);
  stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(.4); transition: opacity .3s var(--ease), transform .35s var(--ease);
}
.flow-node:not(.is-trigger).on .flow-node__pip { background: var(--neon-teal); border-color: var(--neon-teal); }
.flow-node:not(.is-trigger).on .flow-node__pip .pip-check { opacity: 1; transform: scale(1); }
/* trigger → a clear lightning "zap" instead of a ring+dot */
.flow-node.is-trigger .flow-node__pip { border: none; width: 24px; height: 24px; }
.pip-bolt { display: none; }
.flow-node.is-trigger .flow-node__pip .pip-bolt { display: block; width: 18px; height: 18px;
  fill: rgba(0,208,165,.55); stroke: none; transition: fill .4s var(--ease), filter .4s var(--ease); }
.flow-node.is-trigger.on .flow-node__pip .pip-bolt { fill: var(--neon-teal);
  filter: drop-shadow(0 0 7px rgba(0,208,165,.8)); animation: bolt-pulse 1.4s ease-in-out infinite; }
@keyframes bolt-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* connector: continuously flowing wire + travelling pulse + optional delay chip */
.flow-link { position: relative; display: flex; justify-content: center; height: 34px; }
.flow-link.has-chip { height: 52px; }
.flow-link::before {
  content: ""; width: 2px; height: 100%;
  background-image: linear-gradient(rgba(0,208,165,.6) 0 45%, transparent 45% 100%);
  background-size: 2px 12px; opacity: .3;
  animation: wire-flow .7s linear infinite; transition: opacity .4s var(--ease);
}
.flow-link.on::before { opacity: .95; }
@keyframes wire-flow { to { background-position-y: 12px; } }
.flow-link__pulse {
  position: absolute; left: 50%; top: 0; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: var(--neon-teal); box-shadow: 0 0 14px 3px rgba(0,208,165,.85); opacity: 0;
}
.flow-link.on .flow-link__pulse { animation: flow-pulse .62s ease forwards; }
@keyframes flow-pulse { 0% { top:0; opacity:0; transform:scale(.6); } 20% { opacity:1; transform:scale(1); }
  80% { opacity:1; } 100% { top:100%; opacity:0; transform:scale(.6); } }
.flow-link__chip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1;
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: #9DA2B3;
  background: #06241f; border: 1px solid rgba(0,208,165,.25); border-radius: 999px;
  padding: .22rem .6rem; white-space: nowrap; transition: color .4s, border-color .4s, box-shadow .4s; }
.flow-link.on .flow-link__chip { color: var(--azure); border-color: rgba(0,208,165,.6); box-shadow: 0 0 14px rgba(0,208,165,.25); }

/* hiring rows ----------------------------------------------------------------- */
.flow--hire { gap: .7rem; }
.flow-hire { display: flex; align-items: center; gap: .7rem; padding: .68rem .9rem; border-radius: 13px;
  background: linear-gradient(180deg, rgba(0,208,165,.05), rgba(2,24,21,.5));
  border: 1px solid rgba(0,208,165,.16); box-shadow: inset 0 1px 0 rgba(240,255,253,.04);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
.flow-hire.on { border-color: rgba(0,208,165,.5); box-shadow: 0 0 24px rgba(0,208,165,.18), inset 0 1px 0 rgba(240,255,253,.06); }
.flow-hire__av { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; font-weight: 600; color: var(--neon-teal); background: rgba(0,208,165,.12); border: 1px solid rgba(0,208,165,.3); }
.flow-hire__name { color: var(--azure); font-size: .97rem; }
.flow-hire__badge { margin-left: auto; position: relative; display: inline-grid; }
.flow-hire__badge > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .65rem; border-radius: 999px; font-size: .72rem; white-space: nowrap; transition: opacity .45s var(--ease); }
.b-review { color: #9DA2B3; background: rgba(157,162,179,.12); border: 1px solid rgba(157,162,179,.25); }
.b-hired { color: var(--holly); background: var(--neon-teal); opacity: 0; box-shadow: 0 0 16px rgba(0,208,165,.5); }
.flow-hire.on .b-review { opacity: 0; }
.flow-hire.on .b-hired { opacity: 1; }
.b-spin { width: 11px; height: 11px; border: 2px solid rgba(157,162,179,.4); border-top-color: #9DA2B3;
  border-radius: 50%; animation: b-spin .8s linear infinite; }
@keyframes b-spin { to { transform: rotate(360deg); } }

/* reduced motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .flow-node, .flow-link, .flow-hire { transition: none; }
  .flow-link::before { animation: none; opacity: .5; }
  .flow-link__pulse, .b-spin, .flow-node.is-trigger.on .flow-node__pip::after { animation: none; }
}

/* ----------------------------------------------------------------------------
   9. LANGUAGE SWITCH — clean bordered pill
   ---------------------------------------------------------------------------- */
.language-switch, .language-switch-mobile {
  border: 1px solid rgba(0, 208, 165, .22);
  border-radius: 12px;          /* match the CTA button next to it */
  padding: .7rem 1.05rem;
  gap: .5rem;
  font-size: .9rem;
  line-height: 1;
  color: var(--azure);
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.language-switch:hover, .language-switch-mobile:hover {
  border-color: rgba(0, 208, 165, .6); color: var(--neon-teal); background: rgba(0, 208, 165, .07);
}
.language-switch .belgium-flag, .language-switch-mobile .belgium-flag {
  width: 17px; height: 17px; border-radius: 50%; object-fit: cover;
}

/* ----------------------------------------------------------------------------
   10. SYSTEMS — "50+ more + custom" note under the bento grid
   ---------------------------------------------------------------------------- */
.systems-more { text-align: center; margin-top: clamp(2rem, 4vw, 3.5rem); }
.systems-more p { max-width: 54ch; margin: 0 auto 1.5rem; font-size: 1.125rem; line-height: 1.5; color: #9DA2B3; }
.systems-more .button { font-size: 1rem; }