/* ============================================================
   Digly marketing site — extensions on top of the DS kit (site.css)
   Adds: responsive behaviour, new section components, tweak variants.
   ============================================================ */

/* ---------- Fluid shell + responsive foundations ---------- */
.site { width: min(1440px, 100%); margin: 0 auto; }

/* Guarantee the icon font applies (even if the CDN helper class is delayed) */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded' !important;
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

:root { --gutter: 32px; }

/* Fluid type overrides on the DS kit */
.hero h1 { font-size: clamp(40px, 7.4vw, 96px); }
.hero .lead { font-size: clamp(17px, 1.8vw, 22px); }
.block h2 { font-size: clamp(30px, 5vw, 64px); }
.cta-banner h2 { font-size: clamp(40px, 7vw, 80px); }

/* Smooth anchor scroll, account for sticky nav */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 120px; }

/* ---------- Navy hero (brief calls for dark heroes on every page) ---------- */
.hero.navy { background: var(--digly-navy); color: #fff; }
.hero.navy h1 { color: #fff; }
.hero.navy h1 em { color: var(--digly-green); }
.hero.navy .lead { color: rgba(255,255,255,.74); }
.hero.navy .eyebrow { background: rgba(255,255,255,.10); color: #fff; box-shadow: none; }
.hero.navy .eyebrow .material-symbols-rounded { color: var(--digly-green); font-size: 18px; }
.hero.navy .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.hero.navy .btn-ghost:hover { background: rgba(255,255,255,.08); }
.hero.navy .blob1, .hero.navy .blob2 { opacity: .75; }
.hero.navy .hero-logos .label { color: rgba(255,255,255,.5); }
.hero.navy .logo-slot { background: rgba(255,255,255,.08); color: #fff; box-shadow: none; }
.hero.navy .logo-slot small { color: rgba(255,255,255,.5); }
.hero-powered { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--digly-green); }
.hero-powered .material-symbols-rounded { font-size: 20px; }
.hero.compact { padding-bottom: 72px; }
.hero.compact h1 { font-size: clamp(36px, 5.6vw, 68px); }
.hero.compact .content { max-width: 860px; }

/* Nav gets a shadow once scrolled */
.nav { transition: box-shadow .25s var(--ease-standard), background .25s; }
.nav.scrolled { box-shadow: 0 14px 40px rgba(6,0,94,.28); }

/* Mobile nav toggle (hidden on desktop) */
.nav .menu-btn {
  display: none; background: rgba(255,255,255,.12); border: 0; cursor: pointer;
  color: #fff; width: 44px; height: 44px; border-radius: 999px;
  align-items: center; justify-content: center; flex: none;
}
.nav .menu-btn .material-symbols-rounded { font-size: 26px; }

/* ---------- Eyebrow on light vs dark already in kit; add green-on-light option ---------- */
.h-eyebrow.green { color: var(--digly-green); }

/* ---------- Partner / tool logo strip (clean slots) ---------- */
.logo-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.logo-strip.center { justify-content: center; }
.logo-slot {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: -0.01em; color: var(--digly-navy);
  background: #fff; border-radius: 999px; padding: 14px 24px;
  box-shadow: var(--sh-1);
}
.logo-slot .dot { width: 12px; height: 12px; border-radius: 4px; background: var(--digly-green); flex: none; }
.logo-slot small { font-size: 11px; color: var(--fg-3); font-weight: 500; letter-spacing: .02em; text-transform: none; }
.dark .logo-strip .logo-slot { background: rgba(255,255,255,.08); color: #fff; box-shadow: none; }
.dark .logo-strip .logo-slot small { color: rgba(255,255,255,.55); }
.hero-logos { margin-top: 56px; }
.hero-logos .label {
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 16px;
}

/* ---------- Feature / problem cards (lighter than yellow-tile steps) ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.feature-card {
  background: #fff; border-radius: 28px; padding: 40px 36px;
  box-shadow: var(--sh-2);
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .18s var(--ease-standard), box-shadow .18s;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.icon-chip {
  width: 60px; height: 60px; border-radius: 18px; flex: none;
  background: rgba(0,213,97,.14); color: var(--digly-navy);
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-chip .material-symbols-rounded { font-size: 32px; font-variation-settings: 'FILL' 1, 'wght' 600; }
.icon-chip.blue { background: rgba(60,45,255,.12); }
.feature-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -0.02em; margin: 0; color: var(--digly-navy); line-height: 1.2; }
.feature-grid .feature-card h3 { min-height: calc(2 * 1.2em); }
.feature-card p { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--fg-3); margin: 0; }
.dark .feature-card { background: rgba(255,255,255,.06); }
.dark .feature-card h3 { color: #fff; }
.dark .feature-card p { color: rgba(255,255,255,.66); }
.dark .icon-chip { background: rgba(0,213,97,.18); color: var(--digly-green); }

/* ---------- 3-step process with connecting line ---------- */
.steps.three { grid-template-columns: repeat(3, 1fr); position: relative; }
.steps.three::before {
  content: ""; position: absolute; top: 76px; left: 12%; right: 12%; height: 0;
  border-top: 2px dashed var(--digly-border); z-index: 0;
}
.dark .steps.three::before { border-color: rgba(255,255,255,.18); }
.steps.three .step { position: relative; z-index: 1; }
.note-italic { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(18px,2vw,24px); color: var(--fg-2); margin-top: 48px; text-align: center; }
.dark .note-italic { color: rgba(255,255,255,.8); }

/* ---------- Two-column split (text + visual) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 56px; }
.split .col-text h2 { margin-top: 12px; }
.split .price-tag { font-family: var(--font-display); font-weight: 800; font-size: 40px; color: var(--digly-navy); letter-spacing: -0.02em; margin: 24px 0 0; }
.split .price-tag span { font-size: 18px; color: var(--fg-3); font-weight: 600; }

/* ============================================================
   TIMELINE — Konnekt year. Variants via [data-timeline]
   ============================================================ */
.timeline-wrap { margin-top: 64px; }

/* default: horizontal rail */
.tl-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 8px; position: relative; }
.tl-rail::before {
  content: ""; position: absolute; left: 5%; right: 5%; top: 26px; height: 3px;
  background: linear-gradient(90deg, var(--digly-green), var(--digly-green-light));
  border-radius: 999px; z-index: 0;
}
.tl-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 10px; gap: 14px; }
.tl-body { display: flex; flex-direction: column; gap: 6px; }
.tl-dot {
  width: 54px; height: 54px; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 4px rgba(0,213,97,.18), var(--sh-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--digly-navy);
}
.tl-dot .material-symbols-rounded { font-size: 28px; font-variation-settings: 'FILL' 1, 'wght' 600; }
.tl-node.is-key .tl-dot { background: var(--digly-green); }
.tl-phase { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--digly-green); }
.tl-title { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: var(--digly-navy); }
.tl-desc { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--fg-3); }
.dark .tl-title { color: #fff; } .dark .tl-desc { color: rgba(255,255,255,.62); }

/* variant: vertical */
[data-timeline="vertical"] .tl-rail {
  grid-auto-flow: row; grid-auto-columns: auto; gap: 0;
  max-width: 720px; margin: 0 auto;
}
[data-timeline="vertical"] .tl-rail::before { left: 26px; right: auto; top: 26px; bottom: 26px; width: 3px; height: auto; }
[data-timeline="vertical"] .tl-node { flex-direction: row; text-align: left; align-items: flex-start; gap: 24px; padding: 0 0 40px; }
[data-timeline="vertical"] .tl-node > .tl-body { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }

/* variant: wheel */
[data-timeline="wheel"] .tl-rail {
  display: block; position: relative; width: 460px; height: 460px; margin: 24px auto 0;
  border: 3px dashed var(--digly-border); border-radius: 999px;
}
[data-timeline="wheel"] .timeline-wrap { padding: 64px 90px; }
[data-timeline="wheel"] .tl-rail::before { display: none; }
[data-timeline="wheel"] .tl-center {
  position: absolute; inset: 122px; border-radius: 999px; background: var(--digly-navy); color:#fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px;
  box-shadow: var(--sh-3);
}
[data-timeline="wheel"] .tl-center .yr { font-family: var(--font-display); font-weight: 800; font-size: 44px; }
[data-timeline="wheel"] .tl-center .lb { font-size: 13px; color: rgba(255,255,255,.7); }
[data-timeline="wheel"] .tl-node { position: absolute; width: 150px; transform: translate(-50%, -50%); }
[data-timeline="wheel"] .tl-desc { display: none; }
.tl-center { display: none; }
[data-timeline="wheel"] .tl-center { display: flex; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing { display: flex; justify-content: center; margin-top: 56px; }
.price-card {
  background: #fff; border-radius: 32px; padding: 56px; max-width: 560px; width: 100%;
  box-shadow: var(--sh-3); position: relative; overflow: hidden;
}
.price-card .price { font-family: var(--font-display); font-weight: 800; font-size: 72px; color: var(--digly-navy); letter-spacing: -0.03em; line-height: 1; }
.price-card .price span { font-size: 22px; font-weight: 600; color: var(--fg-3); }
.price-card .excl { font-size: 14px; color: var(--fg-3); margin-top: 4px; }
.price-list { list-style: none; padding: 0; margin: 32px 0; display: flex; flex-direction: column; gap: 14px; }
.price-list li { display: flex; align-items: center; gap: 14px; font-family: var(--font-body); font-size: 17px; color: var(--digly-navy); }
.price-list li .material-symbols-rounded { color: var(--digly-green); font-size: 24px; font-variation-settings: 'FILL' 1, 'wght' 700; }
.price-card .fineprint { font-size: 13px; color: var(--fg-3); margin: 0 0 24px; }
.price-card .btn-primary { width: 100%; justify-content: center; }
.guarantee { text-align: center; font-family: var(--font-body); font-size: 16px; color: var(--fg-3); margin-top: 28px; }

/* ---------- Fit (voor wie / niet voor wie) ---------- */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.fit-col { background: #fff; border-radius: 28px; padding: 44px; box-shadow: var(--sh-2); }
.fit-col h3 { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; margin: 0 0 24px; color: var(--digly-navy); }
.fit-col .tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; margin-bottom: 20px; }
.fit-col.yes { box-shadow: var(--sh-2), inset 0 0 0 2px rgba(0,213,97,.35); }
.fit-col.yes .tag { background: rgba(0,213,97,.14); color: #06794a; }
.fit-col.no .tag { background: var(--digly-surface-2); color: var(--fg-3); }
.fit-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.fit-list li { display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-body); font-size: 17px; line-height: 1.45; color: var(--fg-2); }
.fit-list li .material-symbols-rounded { font-size: 24px; flex: none; }
.fit-col.yes .fit-list .material-symbols-rounded { color: var(--digly-green); font-variation-settings: 'FILL' 1,'wght' 700; }
.fit-col.no .fit-list .material-symbols-rounded { color: var(--fg-3); }

/* ---------- Case cards ---------- */
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.case-card { background: #fff; border-radius: 28px; padding: 44px; box-shadow: var(--sh-2); display: flex; flex-direction: column; }
.case-card .case-name { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--digly-green); }
.case-card .case-sub { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; color: var(--digly-navy); margin: 8px 0 24px; }
.case-card blockquote { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.4; color: var(--digly-navy); letter-spacing: -0.01em; }
.case-card .by { font-family: var(--font-body); font-size: 15px; color: var(--fg-3); margin-top: 18px; }
.case-card .by b { color: var(--digly-navy); font-weight: 700; }
.case-results { list-style: none; padding: 24px 0 0; margin: 24px 0 0; border-top: 1px solid var(--digly-border); display: flex; flex-direction: column; gap: 12px; }
.case-results li { display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-body); font-size: 16px; line-height: 1.45; color: var(--fg-2); }
.case-results li .material-symbols-rounded { color: var(--digly-green); font-size: 22px; font-variation-settings: 'FILL' 1,'wght' 700; flex: none; }
/* full case (Konnekt page) */
.case-full { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: #fff; border-radius: 32px; overflow: hidden; box-shadow: var(--sh-2); margin-top: 32px; }
.case-full .left { padding: 48px; }
.case-full .right { padding: 48px; background: var(--digly-navy); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.case-full .right blockquote { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.35; color: #fff; margin: 0; letter-spacing: -0.01em; }
.case-full .right .by { color: rgba(255,255,255,.65); margin-top: 20px; font-family: var(--font-body); font-size: 15px; }
.case-full .right .by b { color: #fff; }
.case-block { margin-bottom: 24px; }
.case-block .lbl { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--digly-blue-bright); margin-bottom: 8px; }
.case-block p { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--fg-2); margin: 0; }

/* ---------- Green-tint panel (AI teaser) ---------- */
section.block.green-tint { background: #E7FBF0; border-radius: 40px; margin-top: 32px; position: relative; overflow: hidden; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; background: var(--digly-navy); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .04em;
  padding: 9px 16px; border-radius: 999px;
}
.badge .material-symbols-rounded { font-size: 18px; color: var(--digly-green); }
.btn-ghost.green { box-shadow: inset 0 0 0 2px var(--digly-green); color: #06794a; }
.btn-ghost.green:hover { background: rgba(0,213,97,.08); }
.btn-ghost.on-navy { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.btn-ghost.on-navy:hover { background: rgba(255,255,255,.08); }
/* Non-clickable pill (announcement, no destination) */
.btn-static { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 9999px; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; cursor: default; }
.btn-static.green { color: #06794a; box-shadow: inset 0 0 0 2px var(--digly-green); }
.btn-static.on-navy { color: #fff; background: rgba(0,213,97,.16); box-shadow: inset 0 0 0 1.5px var(--digly-green); }
.btn-static .material-symbols-rounded { font-size: 20px; color: var(--digly-green); }

/* ============================================================
   AI FLOW DIAGRAM — variants via [data-aidiagram]
   ============================================================ */
.flow { margin-top: 56px; }
.flow-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 16px; }
.flow-block { border-radius: 28px; padding: 36px 32px; display: flex; flex-direction: column; gap: 12px; min-height: 200px; justify-content: center; }
.flow-block.navy { background: var(--digly-navy); color: #fff; }
.flow-block.green { background: var(--digly-green); color: var(--digly-navy); box-shadow: var(--sh-glow-green); }
.flow-block .fb-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.flow-block h3 { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; margin: 0; color: inherit; }
.flow-block ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 8px; }
.flow-block li { font-family: var(--font-body); font-size: 15px; line-height: 1.4; }
.flow-block.navy li { color: rgba(255,255,255,.78); }
.flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--digly-green); }
.flow-arrow .material-symbols-rounded { font-size: 40px; font-variation-settings: 'wght' 600; }
.flow-foot { text-align: center; font-family: var(--font-body); font-size: 15px; color: var(--fg-3); margin-top: 28px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; width: 100%; }
.flow-foot .material-symbols-rounded { font-size: 20px; color: var(--digly-green); }

/* variant: stacked layers */
[data-aidiagram="stack"] .flow-row { grid-template-columns: 1fr; gap: 0; max-width: 640px; margin: 0 auto; }
[data-aidiagram="stack"] .flow-arrow { transform: rotate(90deg); padding: 6px 0; }
[data-aidiagram="stack"] .flow-block { min-height: 0; }

/* variant: orbit */
[data-aidiagram="orbit"] .flow-row { display: block; position: relative; width: 520px; height: 460px; margin: 0 auto; }
[data-aidiagram="orbit"] .flow-arrow { display: none; }
[data-aidiagram="orbit"] .flow-block { position: absolute; width: 240px; min-height: 0; }
[data-aidiagram="orbit"] .flow-block.green { left: 50%; top: 50%; transform: translate(-50%,-50%); width: 250px; z-index: 2; }
[data-aidiagram="orbit"] .flow-block.navy:nth-of-type(1) { left: -20px; top: 0; }
[data-aidiagram="orbit"] .flow-block.navy:last-of-type { right: -20px; bottom: 0; left: auto; }

/* ---------- Waitlist form ---------- */
.waitlist { background: #fff; border-radius: 32px; padding: 44px; max-width: 520px; box-shadow: var(--sh-3); }
.waitlist .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.waitlist label { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--digly-navy); letter-spacing: .01em; }
.waitlist input {
  font-family: var(--font-body); font-size: 16px; padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid var(--digly-border); background: var(--digly-bg-soft); color: var(--digly-navy);
  transition: border-color .15s, box-shadow .15s; width: 100%;
}
.waitlist input:focus { outline: none; border-color: var(--digly-green); box-shadow: 0 0 0 4px rgba(0,213,97,.16); }
.waitlist .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.waitlist .btn-primary { width: 100%; justify-content: center; margin-top: 6px; }
.waitlist .smallnote { font-size: 13px; color: var(--fg-3); text-align: center; margin: 16px 0 0; }
.waitlist .success { text-align: center; padding: 24px 8px; }
.waitlist .success .material-symbols-rounded { font-size: 64px; color: var(--digly-green); font-variation-settings: 'FILL' 1; }
.waitlist .success h3 { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--digly-navy); margin: 12px 0 8px; }
.waitlist .success p { color: var(--fg-3); margin: 0; }
.is-hidden { display: none !important; }

/* ---------- Story (Over ons) ---------- */
.story { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; margin-top: 56px; }
.story .photo { }
.story .photo img { width: 100%; max-width: 300px; display: block; }
.story .sig { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--digly-navy); margin-top: 20px; }
.story .sig span { display: block; font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--fg-3); }
.story .body p { font-family: var(--font-body); font-size: 19px; line-height: 1.7; color: var(--fg-2); }
.story .body p:first-child { font-size: 22px; color: var(--digly-navy); font-weight: 500; }

/* team card bio line */
.team-card .bio { font-family: var(--font-body); font-size: 14px; color: var(--fg-3); line-height: 1.5; }
.team-grid.six { grid-template-columns: repeat(3, 1fr); }

/* ---------- Big number ---------- */
.bignum-wrap { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; margin-top: 24px; }
.bignum { font-family: var(--font-display); font-weight: 800; font-size: clamp(120px, 18vw, 220px); color: var(--digly-green); line-height: .85; letter-spacing: -0.04em; }
.bignum-label { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--digly-navy); margin-top: 8px; }

/* ---------- Closing CTA (centered) ---------- */
.cta-close { text-align: center; }
.cta-close h2 { margin: 0 auto; max-width: 900px; }
.cta-close .actions { display: flex; gap: 14px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.cta-close .micro { font-family: var(--font-body); font-size: 15px; color: rgba(255,255,255,.6); margin-top: 24px; }

/* ---------- Liantis partner band ---------- */
.partner-band { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; background: #fff; border-radius: 32px; padding: 48px; box-shadow: var(--sh-2); margin-top: 24px; }
.partner-band .mark { font-family: var(--font-display); font-weight: 800; font-size: 36px; color: var(--digly-navy); letter-spacing: -0.02em; }
.partner-band p { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--fg-2); margin: 0; }

/* ============================================================
   ASK-AI band — "vraag het aan je favoriete AI"
   ============================================================ */
.askai { background: var(--digly-bg); border-radius: 40px; border: 2px solid var(--digly-navy); padding: 72px 64px; position: relative; overflow: hidden; text-align: center; }
.askai .inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.askai h2 { font-size: clamp(28px, 3.6vw, 46px); margin: 0; text-wrap: balance; }
.askai p { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--fg-2); margin: 22px auto 0; max-width: 580px; text-wrap: pretty; }
.askai-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; }
.askai-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 9999px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  color: var(--digly-navy); background: var(--digly-bg); text-decoration: none;
  box-shadow: inset 0 0 0 1.5px var(--digly-navy);
  transition: transform .18s var(--ease-standard), box-shadow .18s, background .18s;
}
.askai-btn:hover { transform: translateY(-2px); background: rgba(0,213,97,.12); box-shadow: inset 0 0 0 1.5px var(--digly-green), var(--sh-2); }
.askai-btn:active { transform: scale(.97); }
.askai-btn .material-symbols-rounded { font-size: 22px; color: var(--digly-green); }
.askai .askai-blob { position: absolute; left: -110px; top: -120px; width: 300px; transform: rotate(-14deg); opacity: .45; z-index: 0; }
.askai .askai-lily { position: absolute; right: 40px; bottom: -14px; width: 210px; height: auto; z-index: 1; pointer-events: none; }
@media (max-width: 1180px) { .askai .askai-lily { width: 160px; right: 12px; opacity: .85; } }
@media (max-width: 960px) { .askai .askai-lily { display: none; } }
.askai .hint { font-family: var(--font-body); font-size: 14px; color: var(--fg-3); margin-top: 24px; }
@media (max-width: 720px) {
  .askai { padding: 48px 24px; border-radius: 28px; }
  .askai-btns { flex-direction: column; }
  .askai-btn { justify-content: center; }
  .askai .askai-blob, .askai .askai-lily { display: none; }
}

/* ---------- Section heading helper ---------- */.sec-head { max-width: 820px; }
.sec-head.center { margin: 0 auto; text-align: center; }

/* ============================================================
   HERO VARIANTS via [data-hero]
   ============================================================ */
.hero .hero-visual { display: none; }
/* centered */
[data-hero="centered"] .hero .content { max-width: 980px; margin: 0 auto; text-align: center; }
[data-hero="centered"] .hero .hero-actions { justify-content: center; }
[data-hero="centered"] .hero .hero-logos { display: flex; flex-direction: column; align-items: center; }
[data-hero="centered"] .hero .lead { margin-left: auto; margin-right: auto; }
/* split */
[data-hero="split"] .hero .content { max-width: none; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
[data-hero="split"] .hero .hero-visual { display: block; }

/* hero visual panel (used by split) */
.hero-visual .panel {
  background: var(--digly-navy); border-radius: 28px; padding: 32px; color: #fff;
  box-shadow: var(--sh-3); position: relative; overflow: hidden;
}
.hero-visual .panel .row-line { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.hero-visual .panel .row-line:last-child { border-bottom: 0; }
.hero-visual .panel .ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(0,213,97,.16); color: var(--digly-green); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hero-visual .panel .ic .material-symbols-rounded { font-size: 22px; }
.hero-visual .panel .txt b { font-family: var(--font-display); font-weight: 700; display: block; font-size: 15px; }
.hero-visual .panel .txt span { font-size: 13px; color: rgba(255,255,255,.6); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .feature-grid, .steps, .steps.three, .team-grid, .team-grid.six, .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .steps.three::before { display: none; }
  .split, .story, .bignum-wrap, .partner-band, .case-full { grid-template-columns: 1fr; }
  [data-hero="split"] .hero .content { grid-template-columns: 1fr; }
  .cta-banner { flex-direction: column; align-items: flex-start; gap: 28px; }
}

@media (max-width: 720px) {
  :root { --gutter: 18px; }
  .nav { margin: 14px; padding: 12px 12px 12px 20px; top: 14px; gap: 16px; flex-wrap: wrap; }
  .nav .links {
    display: none; order: 3; width: 100%; flex-direction: column; gap: 4px;
    justify-content: flex-start; padding-top: 8px;
  }
  .nav.open .links { display: flex; }
  .nav .links a { padding: 12px 8px; width: 100%; border-radius: 12px; }
  .nav .links a:hover { background: rgba(255,255,255,.08); }
  .nav .menu-btn { display: inline-flex; }
  .nav .cta { font-size: 13px; padding: 12px 16px; }

  .hero { margin: 14px 14px 0; padding: 48px 24px 56px; border-radius: 28px; }
  section.block { padding: 56px 24px; margin: 0 14px; }
  section.block.dark, section.block.green-tint { border-radius: 28px; }
  .cta-banner { margin: 16px; padding: 48px 28px; border-radius: 28px; }
  .feature-grid, .steps, .steps.three, .team-grid, .team-grid.six, .tools-grid, .fit-grid, .case-grid { grid-template-columns: 1fr; }
  .flow-row { grid-template-columns: 1fr; }
  .flow-arrow { transform: rotate(90deg); }
  .price-card, .fit-col, .case-card, .feature-card, .waitlist { padding: 32px 24px; }
  .case-full .left, .case-full .right { padding: 32px 24px; }
  .waitlist .row2 { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr 1fr; margin: 0 14px; }
  .foot-bottom { margin: 0 14px; flex-direction: column; gap: 10px; text-align: center; }
  .tl-rail { grid-auto-flow: row; grid-auto-columns: auto; }
  .tl-rail::before { left: 26px; right: auto; top: 26px; bottom: 26px; width: 3px; height: auto; }
  .tl-node { flex-direction: row; text-align: left; align-items: flex-start; gap: 18px; padding: 0 0 32px; }
  .tl-node .tl-body { display: flex; flex-direction: column; gap: 5px; padding-top: 3px; }
  [data-timeline="wheel"] .tl-rail { width: 100%; height: auto; border: 0; }
  [data-timeline="wheel"] .timeline-wrap { padding: 0; }
  [data-timeline="wheel"] .tl-center { display: none; }
  [data-timeline="wheel"] .tl-node { position: static; transform: none; width: auto; }
  [data-timeline="wheel"] .tl-desc { display: block; }
  [data-aidiagram="orbit"] .flow-row { display: block; width: 100%; height: auto; }
  [data-aidiagram="orbit"] .flow-block { position: static !important; transform: none !important; width: 100% !important; margin-bottom: 16px; }
}

/* Konnekt traject: groepering jaar 1 / elk jaar */
.tl-groups{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;margin-top:32px}
.tl-groups .g{border:2px solid var(--digly-navy);border-bottom:0;border-radius:12px 12px 0 0;height:18px;display:flex;justify-content:center}
.tl-groups .g span{transform:translateY(22px);height:max-content;font-family:var(--font-display);font-weight:800;font-size:15px;padding:8px 18px;border-radius:9999px;background:var(--digly-navy);color:#fff;white-space:nowrap}
.tl-groups .y1{grid-column:span 3}
.tl-groups .yall{grid-column:span 6;border-color:var(--digly-green)}
.tl-groups .yall span{background:var(--digly-green);color:var(--digly-navy)}
.tl-groups{padding-bottom:40px}
[data-timeline="vertical"] .tl-groups,[data-timeline="wheel"] .tl-groups{display:none}
.tl-node{padding:0 4px}
.tl-title{text-wrap:balance}
@media (max-width:1180px){
.tl-groups{display:none}
.tl-rail{grid-auto-flow:row;grid-auto-columns:auto;max-width:720px;margin:0 auto}
.tl-rail::before{left:26px;right:auto;top:26px;bottom:26px;width:3px;height:auto}
.tl-node{flex-direction:row;text-align:left;align-items:flex-start;gap:18px;padding:0 0 28px}
.tl-node .tl-body{padding-top:3px}
}

.logo-slot.more{background:var(--digly-green);color:var(--digly-navy);box-shadow:none}

/* Commercieel onafhankelijk */
.indep{position:relative;overflow:hidden}
.indep-inner{position:relative;z-index:2}
.indep-head{max-width:820px}
.indep-head h2{text-wrap:balance}
.indep-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:56px}
.indep-card{display:flex;gap:24px;align-items:flex-start;background:rgba(255,255,255,.06);border-radius:28px;padding:36px}
.indep-card .tile{flex:none;width:64px;height:64px;border-radius:18px;background:var(--digly-yellow,#EAC75C);color:var(--digly-navy);display:inline-flex;align-items:center;justify-content:center}
.indep-card .tile .material-symbols-rounded{font-size:34px;font-variation-settings:'FILL' 1,'wght' 600}
.indep-card h3{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-0.02em;line-height:1.2;color:#fff;margin:0}
.indep-card p{font-family:var(--font-body);font-size:16px;line-height:1.55;color:rgba(255,255,255,.78);margin:10px 0 0}
.indep-card.key{background:var(--digly-green);grid-column:1/-1;align-items:center}.indep-card.key h3{font-size:28px}.indep-card.key p{font-size:18px}
.indep-card.key .tile{background:var(--digly-navy);color:var(--digly-green)}
.indep-card.key h3,.indep-card.key p{color:var(--digly-navy)}
@media (max-width:860px){.indep-grid{grid-template-columns:minmax(0,1fr)}.indep-card{padding:28px 24px;gap:18px}}

/* Testimonials */
.tm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));grid-auto-rows:1fr;gap:24px;margin-top:48px}
.tm{margin:0;height:100%;box-sizing:border-box;background:#fff;border-radius:28px;padding:32px;box-shadow:var(--sh-2);display:flex;flex-direction:column;gap:20px}
.tm blockquote{margin:0;font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.4;letter-spacing:-0.01em;color:var(--digly-navy);text-wrap:pretty;flex:1}
.tm blockquote::before{content:"\201C";display:block;font-size:56px;line-height:.6;color:var(--digly-green);margin-bottom:10px}
.tm figcaption{display:flex;flex-direction:column;gap:2px;font-family:var(--font-body);font-size:15px;color:var(--fg-3)}
.tm figcaption b{font-family:var(--font-display);font-size:16px;color:var(--digly-navy)}
.tm a{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--digly-blue-bright,#3C2DFF);text-decoration:none}
.tm a .material-symbols-rounded{font-size:18px;transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.tm a:hover .material-symbols-rounded{transform:translateX(3px)}

/* Interview pages */
.iv-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:20px;font-family:var(--font-body);font-weight:600;font-size:15px;color:rgba(255,255,255,.8);text-decoration:none}
.iv-back:hover{color:var(--digly-green)}
.iv-back .material-symbols-rounded{font-size:18px}
.iv-grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:56px;align-items:start}
.iv-side{position:sticky;top:110px}
.iv-card{background:#fff;border-radius:28px;padding:32px;box-shadow:var(--sh-2)}
.iv-lbl{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#06794a}
.iv-name{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-0.02em;color:var(--digly-navy);margin-top:12px}
.iv-org{font-family:var(--font-body);font-size:15px;color:var(--fg-3);margin-top:2px}
.iv-card dl{margin:24px 0 0;display:flex;flex-direction:column;gap:14px;padding-top:20px;border-top:1px solid var(--digly-border,#E4E2FA)}
.iv-card dt{font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--fg-3)}
.iv-card dd{margin:2px 0 0;font-family:var(--font-body);font-size:16px;font-weight:500;color:var(--digly-navy)}
.iv-body{max-width:760px;display:flex;flex-direction:column;gap:40px}
.iv-quote{margin:0;background:var(--digly-navy);color:#fff;border-radius:28px;padding:40px 44px;font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.4vw,28px);line-height:1.35;letter-spacing:-0.015em;text-wrap:pretty}
.iv-quote::before{content:"\201C";display:block;font-size:72px;line-height:.6;color:var(--digly-green);margin-bottom:14px}
.iv-quote cite{display:block;margin-top:20px;font-style:normal;font-family:var(--font-body);font-weight:500;font-size:15px;letter-spacing:0;color:rgba(255,255,255,.75)}
.iv-sec h2{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.2vw,26px);letter-spacing:-0.02em;line-height:1.25;color:var(--digly-navy);margin:0 0 14px;text-wrap:balance}
.iv-sec p{font-family:var(--font-body);font-size:18px;line-height:1.65;color:var(--fg-2);margin:0 0 14px;text-wrap:pretty}
.iv-next{display:flex;flex-direction:column;gap:8px;background:#fff;border-radius:28px;padding:32px;box-shadow:var(--sh-2);text-decoration:none;transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s cubic-bezier(.2,.7,.2,1)}
.iv-next:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.iv-next b{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-0.02em;color:var(--digly-navy)}
.iv-next .by{display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:15px;color:var(--digly-blue-bright,#3C2DFF);font-weight:600}
.iv-next .by .material-symbols-rounded{font-size:18px}
@media (max-width:900px){.iv-grid{grid-template-columns:minmax(0,1fr);gap:32px}.iv-side{position:static}.iv-quote{padding:32px 28px}}

.iv-pull{margin:0;padding:8px 0 8px 0;font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.6vw,32px);line-height:1.25;letter-spacing:-0.02em;color:var(--digly-navy);text-wrap:balance;display:flex;flex-direction:column;gap:14px}
.iv-pull::before{content:"";width:56px;height:6px;border-radius:9999px;background:var(--digly-green)}
.iv-sec p strong{color:var(--digly-navy);font-weight:600}
.iv-site{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--digly-blue-bright,#3C2DFF);text-decoration:none}
.iv-site:hover{text-decoration:underline}
.iv-site .material-symbols-rounded{font-size:18px}

.iv-avatar{position:relative;width:100%;aspect-ratio:1;margin:-8px 0 16px}
.iv-avatar-bg{position:absolute;inset:0;background:var(--digly-green);border-radius:22px;transform:rotate(-4deg)}
.iv-avatar image-slot{position:absolute;inset:0;width:100%;height:100%;background:#EFEEFF}
.iv-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.iv-avatar image-slot{inset:10%;width:80%;height:80%}.iv-avatar-bg{inset:10%}
.tm figcaption:has(.tm-av){display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:12px}.tm figcaption:has(.tm-av)>div{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:68px}.tm-av{width:64px;height:64px;flex:none;object-fit:contain}
.team-rows{display:flex;flex-direction:column;gap:48px;margin-top:48px}.team-row{display:flex;justify-content:center;flex-wrap:wrap;gap:32px}.team-row .team-card{flex:0 1 280px;min-width:0}

@media (min-width:900px){.lead .lead-nw{white-space:nowrap}.hero .col-text:has(.lead-nw),.hero .lead:has(.lead-nw){max-width:none}}
.logo-slot.pref{background:#F7EBC7;font-weight:700}

/* Rode draad: koers → software → AI */
.draad{margin-top:56px}
.draad-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:stretch}
.draad-card{background:#fff;border-radius:28px;padding:34px;box-shadow:var(--sh-2);display:flex;flex-direction:column;gap:14px}
.draad-card .tile{width:72px;height:72px;border-radius:20px;background:var(--digly-yellow);color:var(--digly-navy);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(217,170,27,.25)}
.draad-card .tile .material-symbols-rounded{font-size:38px;font-variation-settings:'FILL' 1,'wght' 600}
.draad-card .num{font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--digly-green)}
.draad-card h3{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-0.02em;margin:0;color:var(--digly-navy);line-height:1.15}
.draad-card p{font-family:var(--font-body);font-size:16px;line-height:1.55;color:var(--fg-2);margin:0}
.draad-card ul{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:10px}
.draad-card li{display:flex;gap:10px;align-items:flex-start;font-family:var(--font-body);font-size:15px;line-height:1.45;color:var(--fg-2)}
.draad-card li .material-symbols-rounded{flex:none;font-size:20px;color:var(--digly-green);font-variation-settings:'FILL' 1,'wght' 700}
.draad-card.ai{background:var(--digly-navy);box-shadow:var(--sh-3)}
.draad-card.ai .tile{background:var(--digly-green);box-shadow:0 8px 24px rgba(0,213,97,.3)}
.draad-card.ai h3{color:#fff}.draad-card.ai p,.draad-card.ai li{color:rgba(255,255,255,.86)}
.draad-arrow{align-self:center;width:44px;height:44px;border-radius:50%;background:var(--digly-green);color:var(--digly-navy);display:flex;align-items:center;justify-content:center}
.draad-arrow .material-symbols-rounded{font-size:26px;font-variation-settings:'FILL' 1,'wght' 700}
.draad-loop{margin-top:16px;background:#fff;border:2px dashed var(--digly-blue-bright);border-radius:24px;padding:20px 28px;display:flex;align-items:center;gap:16px;font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--fg-2)}
.draad-loop b{color:var(--digly-navy);font-family:var(--font-display)}
.draad-loop .material-symbols-rounded{flex:none;font-size:30px;color:var(--digly-blue-bright)}
@media (max-width:1024px){.draad-row{grid-template-columns:minmax(0,1fr)}.draad-arrow{justify-self:center;transform:rotate(90deg)}}

.legal-body{max-width:820px;margin:0 auto;background:#fff;border-radius:28px;box-shadow:var(--sh-2);padding:56px 64px}
.legal-body h2{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-0.01em;line-height:1.2;color:var(--digly-navy);margin:40px 0 12px;text-wrap:balance}
.legal-body h2:first-of-type{margin-top:28px}
.legal-body h3{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--digly-navy);margin:24px 0 8px}
.legal-body p,.legal-body li{font-family:var(--font-body);font-size:16px;line-height:1.65;color:var(--fg-2);margin:0 0 14px;text-wrap:pretty}
.legal-body ul{margin:0 0 18px;padding-left:22px}.legal-body li{margin-bottom:6px}
.legal-body strong{color:var(--digly-navy)}
.legal-body a{color:var(--digly-blue-bright);text-decoration:underline;text-underline-offset:3px}
.legal-body a:hover{color:var(--digly-navy)}
.legal-other{display:flex;align-items:center;gap:10px;margin-top:40px!important;padding-top:24px;border-top:1px solid var(--digly-border)}
.legal-other .material-symbols-rounded{color:var(--digly-green);font-size:22px}
@media (max-width:720px){.legal-body{padding:32px 24px;border-radius:20px}}
.foot-legal{display:flex;gap:10px;align-items:center}
.foot-legal a{color:inherit;text-decoration:none}.foot-legal a:hover{color:var(--digly-blue-bright);text-decoration:underline}

.nav .links a.nav-ita{display:inline-flex;align-items:center;gap:6px;color:var(--digly-green);border:1.5px solid var(--digly-green);border-radius:9999px;padding:6px 14px;margin:-7px 0;transition:background .22s cubic-bezier(.2,.7,.2,1),color .22s cubic-bezier(.2,.7,.2,1)}.nav .links a.nav-ita:hover{background:var(--digly-green);color:var(--digly-navy)}.nav .links a.nav-ita .material-symbols-rounded{font-size:16px}
.nav .links a,.nav .cta{white-space:nowrap}
@media (max-width:1240px){.nav .links{gap:26px}}
@media (max-width:1180px){.nav{flex-wrap:wrap}.nav .links{display:none;order:3;width:100%;flex:none;flex-direction:column;gap:4px;justify-content:flex-start;padding-top:8px}.nav.open .links{display:flex}.nav .links a{padding:12px 8px;width:100%;border-radius:12px}.nav .links a:hover{background:rgba(255,255,255,.08)}.nav .menu-btn{display:inline-flex}.nav .cta{margin-left:auto}.nav .links a.nav-ita{margin:4px 0 0;width:auto;align-self:flex-start;padding:10px 16px}}

/* Over ons: team & rollen */
.team2-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.team2-lily{display:flex;align-items:center;gap:14px;background:#fff;border-radius:24px;padding:16px 24px 16px 16px;box-shadow:var(--sh-2)}
.team2-lily img{width:56px;height:56px;object-fit:contain}
.team2-lily b{display:block;font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--digly-navy);line-height:1.1}
.team2-lily span{font-family:var(--font-body);font-size:15px;color:var(--fg-3)}
.role-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:48px}
.role-card{background:#fff;border-radius:24px;padding:28px 24px;box-shadow:var(--sh-2);display:flex;flex-direction:column;gap:12px;transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s cubic-bezier(.2,.7,.2,1)}
.role-card:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.role-card .tile{width:56px;height:56px;border-radius:16px;background:var(--digly-yellow,#EAC75C);color:var(--digly-navy);display:inline-flex;align-items:center;justify-content:center;margin-bottom:6px}
.role-card .tile .material-symbols-rounded{font-size:30px;font-variation-settings:'FILL' 1,'wght' 600}
.role-card h3{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-0.02em;line-height:1.15;color:var(--digly-navy);margin:0;text-wrap:balance}
.role-card p{font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--fg-2);margin:0}
.role-card.navy{background:var(--digly-navy)}.role-card.navy h3{color:#fff}.role-card.navy p{color:rgba(255,255,255,.82)}
.role-card.green{background:var(--digly-green)}.role-card.green .tile{background:var(--digly-navy);color:var(--digly-green)}.role-card.green p{color:var(--digly-navy)}
.team2-foot{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:56px;text-align:center}
.team2-avas{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;width:100%}
.team2-avas img{width:100%;max-width:180px;height:auto;aspect-ratio:1;margin:0 auto;object-fit:contain;display:block;transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.team2-avas img:hover{transform:translateY(-4px)}
.team2-foot p{font-family:var(--font-body);font-size:20px;line-height:1.5;color:var(--fg-2);margin:0;max-width:560px;text-wrap:pretty}
@media (max-width:900px){.team2-avas{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1100px){.role-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.role-grid{grid-template-columns:minmax(0,1fr)}.team2-avas{gap:4px}}

/* ============================================================
   TELEFOON (max 720px): enkel kleine schermen, desktop blijft ongewijzigd
   ============================================================ */
html, body { overflow-x: clip; }
/* menu: logo links, knop + menu rechts op één rij (telefoon en tablet) */
@media (max-width: 1180px) {
  .nav { align-items: center; }
  .nav .cta { margin-left: auto; }
  .nav .menu-btn { flex: none; }
}
@media (max-width: 720px) {
  .nav { padding: 10px 12px 10px 18px; gap: 10px; }
  .nav .brand img { height: 26px; }
  .nav .cta { font-size: 13px; padding: 10px 14px; gap: 6px; }
  .nav .cta .material-symbols-rounded { display: none; }

  /* footer: onder elkaar in plaats van vier kolommen */
  footer.foot { grid-template-columns: 1fr 1fr; padding: 40px 24px 24px; margin: 0 14px; gap: 28px 20px; }
  footer.foot .brand.col { grid-column: 1 / -1; }
  footer.foot .brand p { max-width: none; }
  footer.foot .col a { overflow-wrap: anywhere; }
  .foot-bottom { margin: 0 14px; padding: 20px 24px; }
  .foot-legal { justify-content: center; flex-wrap: wrap; }

  /* lange woorden en links mogen afbreken */
  h1, h2, h3, p, li, a { overflow-wrap: break-word; }
  .btn-primary, .btn-ghost { max-width: 100%; white-space: normal; text-align: center; justify-content: center; }
  img, svg, video, table { max-width: 100%; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost { flex: 1 1 100%; }
  .eco-layer { padding: 16px 18px; gap: 14px; }
  .eco-layer > div { min-width: 0; }
  .eco-layer h3 { font-size: 17px; overflow-wrap: break-word; hyphens: auto; }
  .eco-layer .tile-s { flex: none; }
  .tm-grid { grid-auto-rows: auto; }
}

@media (max-width: 360px) {
  .nav { padding: 8px 8px 8px 14px; gap: 8px; }
  .nav .brand img { height: 22px; }
  .nav .cta { font-size: 12px; padding: 9px 11px; }
}

/* Social media in de footer */
.foot-social{display:flex;gap:10px;margin-top:14px}
.foot .col .foot-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border-radius:50%;background:var(--digly-navy);color:#fff;transition:background .22s cubic-bezier(.2,.7,.2,1),color .22s cubic-bezier(.2,.7,.2,1),transform .22s cubic-bezier(.2,.7,.2,1)}
.foot .col .foot-social a:hover,.foot .col .foot-social a:focus-visible{background:var(--digly-green);color:var(--digly-navy);transform:translateY(-2px)}
.foot-social svg{display:block;width:18px;height:18px}