/* ==========================================================================
   /business page components, built on syndric-core.css.
   Six sections: hero (Vragen product UI), the AI scan (offer + request
   form), what you get (example report), systems stay (light map), scan to
   improvement (steps), trust + final CTA. Tokens and motion from the core.
   ========================================================================== */

/* dark sections outside .night get the same badge/sub/dim treatment */
.dark-section .badge{background:#191A16;border-color:#26271F;color:#B9B9B4}
.dark-section .badge::before{color:var(--lime)}
.dark-section .sub{color:#A2A2A0}
.dark-section h2 .dim{color:#57575C}
/* on the business pages the second headline line must stay readable on black */
.biz .dark-section h2 .dim{color:#85857F}

/* ---------- language switch (business pages only) ---------- */
.langswitch{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  background:rgba(0,0,0,.03);box-shadow:0 0 0 1px var(--line) inset;
  font-size:12px;font-weight:600;letter-spacing:.06em}
.langswitch a{padding:4px 9px;border-radius:999px;color:var(--soft);
  transition:color .3s var(--ease),background-color .3s var(--ease)}
.langswitch a:hover{color:var(--ink);transition-duration:.05s}
.langswitch a[aria-current]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(10,10,10,.08)}
header.hdr-dark .langswitch{background:rgba(255,255,255,.05);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset}
header.hdr-dark .langswitch a{color:#8E908A}
header.hdr-dark .langswitch a:hover{color:#fff}
header.hdr-dark .langswitch a[aria-current]{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}

/* ---------- header logo: 32px tall (about 105px wide), in line with
   comparable B2B headers (24-32px); the footer keeps the larger lockup ---------- */
.biz .nav .mark svg{height:32px}
.biz .nav .mark .logo-icon{height:30px}

/* ---------- text wrapping ---------- */
.biz h2,.biz .pfh{text-wrap:balance}
.biz p,.biz .lcell p,.biz .deliv li{text-wrap:pretty}

/* ==========================================================================
   Hero + AI-scan (handoff, October 2026; v2 adds the atmosphere). Colours,
   weights, radii, shadows and fades are the handoff's own values
   (syndric-hero-handoff-v2: styles.css + hero-background-effects.css),
   on purpose: the user asked for exactly what was handed over.
   Desktop: copy left (42), the Vragen product state right (58) with two
   floating cards; the wash sits behind the product only. Tablet stacks.
   Phones (<=680px): the copy, then the AI-scan card is the call to action.
   ========================================================================== */
.hx-in{width:min(1420px,calc(100% - 150px));margin:0 auto;position:relative}
/* layers (handoff v2, hero-background-effects.css): warm off-white canvas >
   faint vertical grid > multi-colour blurred wash > copy and product > cards */
.biz .hx{padding:0;border-top:0;border-bottom:1px solid rgba(231,231,223,.7);background:#F7F7F2;isolation:isolate}
.hx::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(to right,rgba(17,19,17,.04) 1px,transparent 1px);background-size:104px 100%;opacity:.72;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%)}
/* four overlapping fades on the product side: sage upper-mid, mist blue
   upper-right, a broad sage bed under the product, apricot lower-right.
   Recipe from hero-background-effects.css; opacity tuned from .94 to .42 so
   the measured tint matches reference/desktop-target.png (the recipe at .94
   rendered 4-7x stronger than the target) */
.hx-wash{position:absolute;z-index:0;pointer-events:none;left:40%;right:-4%;top:5%;bottom:-8%;
  background:
    radial-gradient(ellipse 52% 42% at 44% 23%,rgba(199,217,181,.42) 0%,rgba(199,217,181,.20) 35%,rgba(199,217,181,.07) 55%,rgba(199,217,181,0) 76%),
    radial-gradient(ellipse 48% 38% at 67% 20%,rgba(211,226,240,.46) 0%,rgba(211,226,240,.22) 34%,rgba(211,226,240,.08) 56%,rgba(211,226,240,0) 78%),
    radial-gradient(ellipse 60% 45% at 53% 76%,rgba(199,217,181,.34) 0%,rgba(199,217,181,.15) 42%,rgba(199,217,181,.05) 60%,rgba(199,217,181,0) 80%),
    radial-gradient(ellipse 40% 34% at 78% 77%,rgba(244,213,188,.34) 0%,rgba(244,213,188,.15) 38%,rgba(244,213,188,.05) 58%,rgba(244,213,188,0) 78%);
  filter:blur(44px) saturate(105%);transform:scale(1.08);opacity:.42;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.20) 8%,rgba(0,0,0,.72) 24%,#000 38%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.20) 8%,rgba(0,0,0,.72) 24%,#000 38%,#000 100%)}
.hx-grid{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:54px;align-items:center;min-height:820px;padding:60px 0 76px}
.hx-copy{position:relative;z-index:2}
.hx-pill{display:inline-flex;align-items:center;gap:14px;margin-bottom:34px;padding:9px 16px;border:1px solid #DCE3D3;border-radius:999px;
  background:rgba(252,252,248,.84);box-shadow:0 2px 10px rgba(30,55,40,.025);font-size:14px;font-weight:600;color:#656C65;
  transition:color .3s var(--ease)}
.hx-pill:hover{color:#111311;transition-duration:.05s}
.hx-pill .arr{color:#53780E;font-size:18px;line-height:1}
.biz .hx h1{margin:0;font-size:clamp(44px,3.65vw,58px);line-height:.98;letter-spacing:-.055em;font-weight:730;color:#111311;text-wrap:balance}
.biz .hx h1 .dim{display:block;margin-top:12px;color:#9B9D94;font-weight:650;text-wrap:balance}
.hx-sub{width:min(610px,94%);margin-top:30px;font-size:18px;line-height:1.48;letter-spacing:-.018em;color:#5D625E}
.hx .herocta{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px;margin:36px 0 0}
.hx .herocta .btn{justify-content:center;min-height:50px;padding:0 22px;border:1px solid transparent;border-radius:10px;font-size:16px;font-weight:600}
.hx .herocta .btn.primary{background:#111311;color:#fff;box-shadow:0 8px 20px rgba(17,19,17,.08)}
.hx .herocta .btn.ghost{background:rgba(255,255,255,.72);border-color:#DBDDD7;box-shadow:none;color:#111311}
.hx-micro{margin-top:14px;font-size:13px;color:#8A8F89}
.hx-micro a{color:inherit;text-decoration:underline;text-decoration-color:rgba(138,143,137,.45);text-underline-offset:3px;transition:color .2s}
.hx-micro a:hover{color:#111311;text-decoration-color:#B8F22E}

/* product window: the Vragen state. Designed at 792px wide (the column at
   1586px); narrower columns scale the whole composition (business.js sets
   zoom), so the floating cards never cover the answer's status labels */
.hx-stage{position:relative;z-index:2;min-width:0}
/* weak local underglow so the product floats over the wash */
.hx-stage::before{content:"";position:absolute;z-index:-1;inset:10% -4% -7% 5%;pointer-events:none;
  background:radial-gradient(ellipse at 43% 65%,rgba(199,217,181,.16),transparent 64%),
    radial-gradient(ellipse at 73% 72%,rgba(244,213,188,.13),transparent 60%);
  filter:blur(24px)}
/* moving colour aura around the product (user reference, October 2026):
   soft sage, mist-blue and apricot fields ring the window (blue over the top,
   apricot to the right and below, sage left and below). Each field drifts on
   its own slow loop so the colours keep mixing. Transform and opacity only,
   so it runs on the compositor; still for reduced motion, paused off screen. */
.hx-aura{position:absolute;z-index:-1;inset:-16% -10% -18% -12%;pointer-events:none}
.hx-aura i{position:absolute;display:block;border-radius:50%;will-change:transform,opacity;
  background:radial-gradient(closest-side,rgba(var(--c),var(--a)) 0%,rgba(var(--c),calc(var(--a)*.55)) 42%,rgba(var(--c),calc(var(--a)*.18)) 72%,rgba(var(--c),0) 100%);
  animation:hxdrift1 var(--t,22s) ease-in-out var(--d,0s) infinite alternate}
.hx-aura i:nth-child(1){--c:211,226,240;--a:1;left:40%;top:-18%;width:54%;height:46%;--t:21s}
.hx-aura i:nth-child(2){--c:199,217,181;--a:.32;left:16%;top:-12%;width:44%;height:38%;--t:25s;--d:-6s;animation-name:hxdrift2}
.hx-aura i:nth-child(3){--c:244,213,188;--a:.75;left:78%;top:6%;width:30%;height:42%;--t:23s;--d:-11s;animation-name:hxdrift3}
.hx-aura i:nth-child(4){--c:199,217,181;--a:.7;left:78%;top:30%;width:32%;height:58%;--t:27s;--d:-4s;animation-name:hxdrift2}
.hx-aura i:nth-child(5){--c:199,217,181;--a:.45;left:4%;top:66%;width:48%;height:38%;--t:24s;--d:-15s}
.hx-aura i:nth-child(6){--c:244,213,188;--a:1;left:42%;top:68%;width:44%;height:36%;--t:20s;--d:-8s;animation-name:hxdrift3}
.hx-aura i:nth-child(7){--c:199,217,181;--a:.52;left:-6%;top:22%;width:26%;height:56%;--t:26s;--d:-13s;animation-name:hxdrift2}
@keyframes hxdrift1{0%{transform:translate3d(0,0,0) scale(1);opacity:.85}50%{transform:translate3d(-7%,9%,0) scale(1.1);opacity:1}100%{transform:translate3d(6%,3%,0) scale(.94);opacity:.9}}
@keyframes hxdrift2{0%{transform:translate3d(0,0,0) scale(1.04);opacity:1}50%{transform:translate3d(8%,-6%,0) scale(.93);opacity:.82}100%{transform:translate3d(-5%,7%,0) scale(1.1);opacity:.95}}
@keyframes hxdrift3{0%{transform:translate3d(0,0,0) scale(.96);opacity:.9}50%{transform:translate3d(-9%,-5%,0) scale(1.08);opacity:1}100%{transform:translate3d(4%,8%,0) scale(1);opacity:.84}}
.hx-aura.is-paused i{animation-play-state:paused}
.hx-win{overflow:hidden;background:rgba(255,255,255,.88);border:1px solid rgba(217,220,214,.95);border-radius:18px;
  box-shadow:0 34px 90px rgba(51,63,43,.105),0 12px 34px rgba(29,37,31,.055),0 1px 0 rgba(255,255,255,.9) inset;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.hx-bar{display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;background:#F6F7FA;border-bottom:1px solid #E4E7E4;
  font-size:12px;color:#4F5650}
.hx-dots{display:flex;gap:6px}
.hx-dots i{display:block;width:10px;height:10px;border-radius:50%;background:#FF655A}
.hx-dots i:nth-child(2){background:#FFBC3D}
.hx-dots i:nth-child(3){background:#29C942}
.hx-title{font-weight:600;white-space:nowrap}
.hx-tag{padding:4px 7px;border:1px solid #D9DDD7;border-radius:5px;background:#fff;font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#8D938D}
.hx-ro{display:flex;align-items:center;gap:7px;margin-left:auto;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#8C938D;white-space:nowrap}
.hx-ro i{width:7px;height:7px;border-radius:50%;background:#B8F22E;box-shadow:0 0 0 3px rgba(184,242,46,.12)}
.hx-shell{display:grid;grid-template-columns:150px minmax(0,1fr);min-height:452px}
.hx-side{display:flex;flex-direction:column;gap:5px;padding:18px 13px;background:rgba(250,250,248,.82);border-right:1px solid #E9EAE6}
.hx-logo{display:block;width:auto;height:22px;margin:2px 0 14px 11px;color:#0A0A0A}
.hx-side span{padding:10px 11px;border-radius:9px;font-size:13px;color:#69706A}
.hx-side span.on{background:#EEF3E7;color:#1C261F;font-weight:650}
.hx-main{position:relative;min-width:0;padding:0 28px 28px}
.hx-head{margin:0 -28px;padding:20px 28px 18px;border-bottom:1px solid #ECEEEB}
.hx-head b{display:block;font-size:20px;font-weight:700;letter-spacing:-.025em;color:#111311}
.hx-head span{display:block;margin-top:4px;font-size:12px;color:#87908A}
.hx-q{width:max-content;max-width:70%;margin:22px 0 12px auto;padding:13px 17px;border-radius:15px 15px 5px 15px;
  background:#F1F3F7;font-size:14px;color:#5A6060}
.hx-a{position:relative;overflow:hidden;max-width:420px;padding:20px 20px 16px 22px;background:#fff;border:1px solid #E5E7E3;border-radius:14px;
  box-shadow:0 8px 25px rgba(35,50,40,.04)}
.hx-a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:#B8F22E}
.hx-who{display:flex;align-items:center;gap:7px;margin-bottom:14px;font-size:13px;font-weight:700;color:#111311}
.hx-who svg{display:block;width:auto;height:18px;color:#0A0A0A}
.hx-a>p{margin-bottom:12px;font-size:14px;color:#5F6560}
.hx-rows{display:grid;gap:9px;list-style:none}
.hx-rows li{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;color:#69706A}
.hx-rows li>span{min-width:0}
.hx-rows b{font-weight:650;color:#2A2E2A}
.hx-rows i{margin:0 9px;font-style:normal;color:#A1A6A1}
/* status labels, handoff colours */
.st{flex:none;padding:6px 9px;border-radius:999px;font-size:11px;font-style:normal;font-weight:650;line-height:1;white-space:nowrap}
.st.amber{color:#9B6710;background:#FFF0C8}
.st.redish{color:#B04D4D;background:#FFE1DF}
.st.orange{color:#A8641F;background:#FFE7C7}
.st.greenish{color:#55721C;background:#E8F7C9}
.hx-src{margin-top:17px;padding-top:12px;border-top:1px solid #F0F0EC;font-size:11px;color:#979C97}
/* floating cards overlap the window, as in the approved reference */
.hx-float{position:absolute;z-index:5;overflow:hidden;background:rgba(255,255,255,.96);border:1px solid #E2E5E1;border-radius:15px;
  box-shadow:0 22px 52px rgba(47,60,39,.12),0 5px 18px rgba(30,38,31,.05)}
.hx-fl{left:-82px;bottom:38px;width:225px}
.hx-fr{right:-52px;bottom:22px;width:255px}
.hx-ft{display:flex;align-items:center;gap:8px;padding:12px 14px;background:#F7F8FB;border-bottom:1px solid #E7E9E7;
  font-size:11px;font-weight:650;color:#4D554F}
.hx-ft i{flex:none;width:7px;height:7px;border-radius:50%;background:#B8F22E}
.hx-fk{padding:10px 14px 0;text-align:center;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#9BA19B}
.hx-fm{margin:9px 14px 14px;padding:12px;background:#F4F7ED;border:1px solid #E6EADF;border-radius:10px;font-size:11px;line-height:1.4;color:#6E766F}
.hx-fm small{display:block;margin-bottom:4px;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#9AA396}
.hx-arow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-top:1px solid #ECEEEA;font-size:10px;color:#515853}
.hx-ft+.hx-arow{border-top:0}
.hx-fr .st{padding:5px 7px;font-size:9px}

/* ==========================================================================
   Sections 2-6 (six-section structure, October 2026). One idea runs through
   the page: Syndric finds where time is lost, works out what it costs and
   gives a concrete first improvement plan. Visual rules: canvas #F7F7F2,
   surface #FCFCF9, text #111311, secondary #73776F, muted headings #9B9D94,
   signal green #B8F22E, sage / mist blue / apricot only as soft atmosphere,
   radius 20-24px, warm grey 1px borders, very soft shadows, lots of space.
   ========================================================================== */
.biz .bz{position:relative;padding:128px 0;border-top:1px solid #ECECE4;background:#F7F7F2;color:#111311}
.bz [id],.bz{scroll-margin-top:72px}
.bz-eb{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:#73776F}
.bz-eb::before{content:"";width:7px;height:7px;border-radius:50%;background:#B8F22E}
.biz .bz-h{margin:18px 0 0;font-size:clamp(34px,3.3vw,50px);font-weight:720;line-height:1.04;letter-spacing:-.045em;color:#111311;text-wrap:balance}
.biz .bz-h .dim{color:#9B9D94;font-weight:650}
.bz-p{max-width:600px;margin-top:20px;font-size:18px;line-height:1.55;color:#73776F;text-wrap:pretty}
.bz-split{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:72px;align-items:start}
.bz-head{max-width:760px}

/* ---------- 2 · the AI scan: one request card right under the hero, with the
   commercial line and the guarantee built in (same content on every screen) ---------- */
.biz .bz-offer{padding:56px 0 104px;border-top:0}
.bz-offer .ask-card{display:grid;grid-template-columns:minmax(0,36fr) minmax(0,64fr);gap:24px 56px;align-items:start;padding:40px 44px}
.ask-intro{padding-top:4px}
.bz-offer .scan-form{margin-top:0}
.ask-terms{margin-top:14px;font-size:14px;font-weight:600;line-height:1.5;color:#3F4540;text-wrap:balance}
.ask-terms span{white-space:nowrap}
.ask-terms i{margin:0 6px 0 9px;font-style:normal;color:#B0B4AA}
.ask-guar{display:flex;align-items:center;gap:9px;margin-top:10px;padding:10px 13px;border:1px solid #DCEBB6;border-radius:11px;
  background:rgba(184,242,46,.13);font-size:14px;font-weight:600;line-height:1.4;color:#2E3A0E}
.ask-guar svg{flex:none;width:17px;height:17px;fill:none;stroke:#3F6E14;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* the premium form card, soft sage / blue in the top-right corner */
.ask-card{position:relative;isolation:isolate;overflow:hidden;padding:40px;border:1px solid #E5E5DD;border-radius:24px;background:#FCFCF9;
  box-shadow:0 30px 80px -40px rgba(42,54,44,.22),0 2px 6px rgba(30,38,31,.03);scroll-margin-top:84px}
.ask-card::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:radial-gradient(circle at 92% 0%,rgba(199,217,181,.5) 0%,rgba(199,217,181,.16) 30%,transparent 52%),
    radial-gradient(circle at 104% 14%,rgba(211,226,240,.55) 0%,rgba(211,226,240,.16) 30%,transparent 50%)}
.biz .ask-h{font-size:30px;font-weight:720;letter-spacing:-.04em;line-height:1.1;color:#111311}
.ask-p{max-width:520px;margin-top:12px;font-size:16px;line-height:1.5;color:#73776F}
.scan-form{margin-top:26px;min-width:0}
.s1-lab{display:block;margin-bottom:10px;font-size:16px;font-weight:650;letter-spacing:-.01em;line-height:1.35;color:#111311}
.s1-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.scan-form input,.scan-form select,.scan-form textarea{width:100%;height:54px;padding:0 16px;border:1px solid #DCDED7;border-radius:12px;
  background:#fff;font:inherit;font-size:16px;color:#111311;outline:none;text-overflow:ellipsis;transition:border-color .2s,box-shadow .2s}
.scan-form textarea{height:auto;min-height:96px;padding:14px 16px;line-height:1.5;resize:vertical}
.scan-form select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2373776F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/16px}
.scan-form select:invalid,.scan-form select.is-empty{color:#9A9F98}
.scan-form ::placeholder{color:#9A9F98}
.scan-form input:focus,.scan-form select:focus,.scan-form textarea:focus{border-color:#A8C47A;box-shadow:0 0 0 4px rgba(184,242,46,.14)}
.scan-form [aria-invalid="true"]{border-color:#B04D4D}
.scan-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 24px;border:0;border-radius:12px;
  background:#B8F22E;font:inherit;font-size:16px;font-weight:700;color:#15220F;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:transform .3s var(--ease),filter .3s var(--ease),opacity .3s}
.scan-cta:hover{filter:brightness(1.03);transform:translateY(-1px);transition-duration:.05s}
.scan-cta:focus-visible{outline:2px solid #111311;outline-offset:2px}
.scan-cta[disabled]{opacity:.6;cursor:progress;transform:none}
.scan-cta .chev{width:16px;height:16px;flex:none}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* folding: each step sits in a grid row that animates between 0fr and 1fr */
.fold{display:grid;grid-template-rows:1fr;opacity:1;visibility:visible;
  transition:grid-template-rows .6s var(--tunnel),opacity .35s ease .12s,visibility 0s}
.fold>div{min-height:0;overflow:hidden;margin:-5px;padding:5px}
.js .scan-form:not(.is-open) .s2-fold,.js .scan-form.is-open .s1-fold,.scan-form.is-done .fold{grid-template-rows:0fr;opacity:0;visibility:hidden;
  transition:grid-template-rows .45s var(--tunnel),opacity .2s ease,visibility 0s linear .45s}
.s2-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:#858B86}
.s2-eyebrow i{font-style:normal}
.s2-eyebrow b{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650;color:#3F4540}
.s2-edit{padding:0;border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:#53780E;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.s2-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.f-wide{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.fld>span{font-size:14px;font-weight:650;color:#111311}
.fld>span i{font-style:normal}
.founder{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-areas:"img who" "txt txt";column-gap:12px;align-items:center;
  padding:14px 16px;background:#F4F7ED;border:1px solid #E6EADF;border-radius:14px}
.founder img{grid-area:img;display:block;width:48px;height:48px;border-radius:50%;object-fit:cover}
.founder-who{grid-area:who}
.founder-who b{display:block;font-size:15px;font-weight:650;color:#111311}
.founder-who small{display:block;margin-top:1px;font-size:13px;color:#6E766F}
.founder p{grid-area:txt;margin-top:10px;font-size:14.5px;line-height:1.5;color:#3F4540}
.s2-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;list-style:none;font-size:13.5px;font-weight:600;color:#3F4540}
.s2-trust li{display:flex;align-items:center;gap:6px}
.s2-trust svg{flex:none;width:16px;height:16px;color:#5A8A12}
.s2-submit{width:100%;margin-top:16px}
.s2-req{margin-top:12px;font-size:12.5px;line-height:1.5;color:#858B86}
.s2-err{margin-top:14px;padding:12px 14px;border-radius:11px;background:#FFF0C8;font-size:14px;line-height:1.5;color:#7A5208}
.s2-err a{font-weight:650;color:inherit;text-decoration:underline;text-underline-offset:3px}
.s2-alt{margin-top:12px;font-size:14px;color:#73776F}
.s2-alt a,.end-small a{font-weight:600;color:#111311;text-decoration:underline;text-decoration-color:#B8F22E;text-decoration-thickness:2px;text-underline-offset:5px}
.scan-done{display:flex;align-items:flex-start;gap:16px;outline:none}
.scan-done[hidden]{display:none}
.done-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#B8F22E;color:#15220F}
.done-ic svg{width:22px;height:22px}
.biz .scan-done h3{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.15;color:#111311}
.scan-done p{margin-top:8px;font-size:16px;line-height:1.5;color:#73776F}

.rp-ic svg,.s1-ic svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* search icon inside the step-1 field */
.s1-field{position:relative;display:block;min-width:0}
.s1-ic{position:absolute;left:16px;top:50%;width:20px;height:20px;margin-top:-10px;color:#9A9F98;pointer-events:none}
.s1-field input{padding-left:46px}

/* ---------- 3 · what you get: one short sentence, then the example result card.
   The card is the proof: three opportunities, hours and euros per year, a
   feasibility chip, "recommended first" on row 1, the disclaimer underneath ---------- */
.biz .bz-report{background:#FCFCF9}
.bz-split-rp{grid-template-columns:minmax(0,40fr) minmax(0,60fr);align-items:center}
.biz .bz-report .bz-h{font-size:clamp(32px,2.7vw,42px)}
.rp{margin:0;overflow:hidden;background:#fff;border:1px solid #E5E5DD;border-radius:22px;
  box-shadow:0 40px 90px -50px rgba(42,54,44,.3),0 2px 6px rgba(30,38,31,.03)}
.rp-bar{display:flex;align-items:center;gap:8px;padding:14px 26px;border-bottom:1px solid #EEEEE7;background:#FAFAF6;font-size:12.5px;color:#73776F}
.rp-logo{display:block;width:auto;height:18px;margin-right:6px;color:#0A0A0A}
.rp-kind{font-weight:650;color:#3F4540}
.rp-top{padding:22px 26px 16px}
.rp-top b{display:block;font-size:22px;font-weight:720;letter-spacing:-.03em;color:#111311}
.rp-top small{display:block;margin-top:4px;font-size:13px;color:#73776F}
.rp-list{margin:0 18px;border:1px solid #EEEEE7;border-radius:16px;overflow:hidden}
.rp-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px 20px;border-bottom:1px solid #EEEEE7}
.rp-item:last-child{border-bottom:0}
.rp-item.is-top{background:linear-gradient(90deg,rgba(184,242,46,.11),rgba(184,242,46,0) 75%)}
.rp-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#E9F0F7;color:#3E5F80}
.rp-item:nth-child(2) .rp-ic{background:#EEF5E3;color:#3F6E14}
.rp-ic svg{width:20px;height:20px}
.rp-main h4{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:17px;font-weight:700;letter-spacing:-.02em;color:#111311}
.rp-badge{padding:4px 9px;border-radius:999px;background:#B8F22E;font-size:11px;font-style:normal;font-weight:700;letter-spacing:0;color:#15220F}
.rp-mline{display:block;margin-top:5px;font-size:14px;color:#73776F}
.rp-chip{padding:6px 11px;border-radius:999px;font-size:12px;font-style:normal;font-weight:650;white-space:nowrap}
.rp-chip.hi{background:#E8F7C9;color:#55721C}
.rp-chip.mid{background:#FFE7C7;color:#A8641F}
.rp-note{padding:14px 26px 18px;font-size:12.5px;color:#858B86}

/* ---------- 4 · Syndric replaces nothing: a calm light map, lines draw in once ---------- */
.bz-systems .bz-head{margin:0 auto;text-align:center}
.bz-systems .bz-p{margin-left:auto;margin-right:auto}
.lmap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:0 130px;
  max-width:980px;margin:64px auto 0;--wire-dir:h}
.lm-col{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.lm-src{align-items:flex-start}
.lm-outs{align-items:flex-end}
.lm-node{padding:12px 18px;border:1px solid #E3E4DB;border-radius:12px;background:#FCFCF9;font-size:15px;font-weight:600;color:#3F4540;
  box-shadow:0 6px 18px -12px rgba(42,54,44,.18)}
.lm-out{display:flex;align-items:center;gap:10px;color:#111311}
.lm-out i{flex:none;width:8px;height:8px;border-radius:50%;background:#B8F22E}
.lm-core{display:flex;align-items:center;gap:12px;padding:20px 26px;border-radius:16px;background:#111311;color:#fff;font-size:18px;font-weight:700;
  letter-spacing:-.02em;box-shadow:0 0 0 6px rgba(184,242,46,.12),0 24px 50px -24px rgba(17,19,17,.5)}
.lm-core svg{display:block;height:28px;width:auto;color:#fff}
.lmap svg.wires path{stroke:#C9CEC0;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--tunnel)}
.lmap svg.wires path:nth-child(n+6){transition-delay:.45s;stroke:#A9C46A}
.lmap.in svg.wires path,.no-js .lmap svg.wires path{stroke-dashoffset:0}
.lm-note{max-width:640px;margin:44px auto 0;text-align:center;font-size:14.5px;line-height:1.6;color:#73776F}

/* ---------- how Syndric helps: steps stay readable, the map follows ---------- */
.biz .sigitem h3{color:#C9C9C4}
.biz .sigitem.on h3{color:#fff}
.biz .sigitem .sh{display:block;color:#8E938C}
.biz .sigitem.on .sh{color:var(--lime)}
.biz .sigitem p{display:block;color:#B4B8AE}
.biz .sigitem.on p{animation:none}
.sysmap{position:relative;width:100%;max-width:620px;display:grid;grid-template-columns:1fr auto 1fr;
  gap:0 48px;align-items:center;padding-top:30px;--wire-dir:h}
.sm-col{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.sm-src{align-items:flex-start}
.sm-mid{align-items:center}
.sm-out{align-items:flex-end}
.sm-lab{position:absolute;bottom:calc(100% + 12px);left:0;white-space:nowrap;
  font-family:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#8E938C}
.sm-out .sm-lab{left:auto;right:0}
.sm-node{background:#121318;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:9px 13px;
  font-size:13px;font-weight:600;color:#C9C9C4;letter-spacing:-.01em;
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease),color .5s var(--ease)}
.sm-out .sm-node{text-align:right}
.sm-node small{display:block;font-size:11px;font-weight:500;color:#8E938C;margin-top:2px;letter-spacing:0;white-space:nowrap}
.sm-core{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  background:#13150F;border:1px solid rgba(166,230,53,.45);border-radius:14px;padding:20px 22px;
  box-shadow:0 0 0 4px rgba(166,230,53,.06),0 0 44px rgba(166,230,53,.1)}
.sm-core b{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.02em}
.sm-core small{font-size:11px;color:#A2A2A0;margin-top:-6px;white-space:nowrap}
@media (min-width:901px) and (max-width:1100px){.sm-core small{display:none}}
.sm-core .sm-logo{display:block;height:34px;width:auto;color:#fff}
.sysmap svg.wires path{stroke:rgba(255,255,255,.14);stroke-width:1.2;transition:stroke .5s var(--ease)}
.sysmap[data-focus="connect"] [data-group="connect"],
.sysmap[data-focus="automate"] [data-group="automate"],
.sysmap[data-focus="understand"] [data-group="understand"],
.sysmap[data-focus="all"] .sm-node{border-color:rgba(166,230,53,.55);color:#fff;box-shadow:0 0 0 3px rgba(166,230,53,.08)}
.sysmap[data-focus="connect"] path[data-group="connect"],
.sysmap[data-focus="automate"] path[data-group="automate"],
.sysmap[data-focus="understand"] path[data-group="understand"]{
  stroke:rgba(166,230,53,.85);stroke-dasharray:5 9;animation:dashflow 1.1s linear infinite}
.sysmap[data-focus="all"] svg.wires path{stroke:rgba(166,230,53,.5)}
.sysmap:not([data-focus=""]) .sm-core{animation:brainpulse 1.6s ease-in-out infinite}
.stage.mapstage{flex-direction:column}


/* desktop and tablet show the dark "how Syndric helps" section, phones the light map */
.sys-wrap{scroll-margin-top:72px}
.biz .bz-how{border-top:0}
@media (min-width:681px){.bz-systems{display:none}}
@media (max-width:680px){.bz-how{display:none}}
@media (max-width:1100px){.sysmap{gap:0 28px}}
@media (max-width:900px){
  .sysmap{grid-template-columns:1fr;gap:40px 0;--wire-dir:v;padding-top:0}
  .sm-col,.sm-src,.sm-out{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
  .sm-lab{position:static;flex-basis:100%;text-align:center;margin:0 0 2px;
    background:linear-gradient(90deg,transparent calc(50% - 70px),#0E0F12 calc(50% - 70px),#0E0F12 calc(50% + 70px),transparent calc(50% + 70px))}
  .sm-node small{display:none}
  .sm-out .sm-node{min-width:128px;text-align:center}
}
@media (prefers-reduced-motion: reduce){.sysmap path,.sysmap .sm-core{animation:none!important}}

/* ---------- 5 · from scan to improvement: typography on one line, no cards ---------- */
.bz-steps::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 85% 30%,rgba(199,217,181,.22),transparent 70%),
    radial-gradient(ellipse 40% 50% at 10% 90%,rgba(199,217,181,.14),transparent 70%)}
.bz-steps .hx-in{position:relative}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;margin-top:64px;padding-top:34px;list-style:none;border-top:1px solid #D9DBD0}
.step{position:relative}
.step::before{content:"";position:absolute;top:-40px;left:0;width:11px;height:11px;border-radius:50%;background:#F7F7F2;border:2px solid #9B9D94}
.step:first-child::before{background:#B8F22E;border-color:#B8F22E}
.step-n{display:block;font-size:14px;font-weight:700;letter-spacing:.06em;color:#9B9D94;font-variant-numeric:tabular-nums}
.biz .step h3{margin-top:10px;font-size:24px;font-weight:720;letter-spacing:-.03em;color:#111311}
.step p{margin-top:10px;max-width:340px;font-size:16px;line-height:1.55;color:#73776F}
.st-price{display:inline-block;margin-top:16px;padding:6px 12px;border-radius:999px;background:#111311;font-size:13px;font-weight:650;color:#fff}
.st-note{display:block;margin-top:10px;max-width:320px;font-size:13px;line-height:1.5;color:#858B86}

/* ---------- 6 · trust + final CTA ---------- */
.faq{display:grid;grid-template-columns:minmax(0,30fr) minmax(0,70fr);gap:56px;margin-top:88px}
.biz .faq-h{font-size:28px;font-weight:720;letter-spacing:-.035em;line-height:1.1;color:#111311}
.qas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.qa{padding:22px 0;border-top:1px solid #E3E4DB}
.biz .qa h3{font-size:17px;font-weight:700;letter-spacing:-.015em;color:#111311}
.qa p{margin-top:8px;font-size:15.5px;line-height:1.55;color:#73776F}
.endcta{margin-top:96px;padding-top:88px;border-top:1px solid #E3E4DB;text-align:center;scroll-margin-top:72px}
.endcta .bz-h{margin-top:0}
.endcta .bz-p{margin-left:auto;margin-right:auto}
.endcta-btns{margin-top:32px}
.endcta .scan-cta{height:58px;padding:0 30px;font-size:17px}
.end-small{margin-top:16px;font-size:13.5px;color:#858B86}

/* ---------- client logos ("Ervaring bij"): calm and monochrome, sliding slowly.
   Two identical sets make the loop seamless; pauses on hover; still for
   reduced motion. ---------- */
.logostrip{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:40px;padding:0}
.ls-label{font-size:12px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:#73776F;white-space:nowrap}
.ls-view{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
.ls-track{display:flex;width:max-content;animation:lsmove 34s linear infinite}
.ls-set{display:flex;flex:none;align-items:center;gap:64px;padding-right:64px;min-height:46px}
.ls-set img{display:block;flex:none;height:var(--h);width:auto;max-width:none;opacity:.6}
.logostrip:hover .ls-track{animation-play-state:paused}
@keyframes lsmove{to{transform:translateX(-50%)}}

/* ---------- connectors, drawn by JS from the live layout ---------- */
svg.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
svg.wires path{fill:none;stroke:#C9D2E0;stroke-width:1.5}

/* ---------- footer: compact, readable grey on dark ---------- */
.biz .site-footer{min-height:0}
.biz .brandcell p{color:#A2A2A0}
.biz .fgcell h5{color:#8E938C}
.biz .fgcell a{color:#C9CCC4}
.biz .footer-bottom{color:#8E938C}
.flinks a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(142,147,140,.5)}
.flinks a:hover{color:#fff}
.s2-req a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .bz-split,.bz-split-rp{gap:48px}
  .lmap{gap:0 72px}
}
@media (max-width:1050px){
  .hx-in{width:min(calc(100% - 48px),940px)}
  .hx-grid{grid-template-columns:minmax(0,1fr);gap:46px;min-height:0;padding:54px 0 72px}
  .hx-copy{max-width:760px}
  .hx-stage{width:100%;max-width:860px}
  /* stacked: the cards hang just below the window, over its bottom edge only */
  .hx-fl{left:18px;top:calc(100% - 24px);bottom:auto}
  .hx-fr{right:18px;top:calc(100% - 24px);bottom:auto}
  .hx-grid{padding-bottom:230px}
  .bz-split,.bz-split-rp{grid-template-columns:minmax(0,1fr)}
  .bz-offer .ask-card{grid-template-columns:minmax(0,1fr);gap:20px}
  .faq{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media (max-width:900px){
  /* the map turns vertical: systems on top, Syndric in the middle, outputs below */
  .lmap{grid-template-columns:minmax(0,1fr);gap:48px 0;--wire-dir:v;margin-top:48px}
  .lm-col,.lm-src,.lm-outs{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
  .lm-mid{align-items:center}
  .lm-node{padding:10px 14px;font-size:14px}
}
@media (max-width:700px){
  .biz .nav{padding-top:10px;padding-bottom:10px}
  /* footer tags stack instead of splitting around the bullet */
  .biz .ftags{flex-direction:column;align-items:flex-start;gap:2px}
  .biz .ftags i{font-size:0;line-height:0;height:0;overflow:hidden}
  .biz .fgcell{padding:32px 24px}
  /* the header CTA steps aside while the hero or closing CTA is on screen */
  .biz .navright .btn{max-width:240px;overflow:hidden;white-space:nowrap;
    transition:max-width .4s var(--ease),padding .4s var(--ease),opacity .3s var(--ease)}
  .biz.hero-cta-in .navright .btn{max-width:0;padding-left:0;padding-right:0;opacity:0;pointer-events:none}
  .nav{gap:16px}
  .navright{gap:10px}
}
@media (max-width:680px){
  /* phones: 20px gutters, everything stacked */
  .hx-in{width:calc(100% - 40px)}
  .biz .hx{border-bottom:0}
  .hx::before{background-size:56px 100%;opacity:.52}
  .hx-wash{left:34%;right:-48%;top:14%;bottom:32%;opacity:.52;filter:blur(34px) saturate(102%);-webkit-mask-image:none;mask-image:none;
    background:radial-gradient(ellipse 58% 44% at 45% 40%,rgba(199,217,181,.32),transparent 74%),
      radial-gradient(ellipse 52% 44% at 65% 48%,rgba(211,226,240,.34),transparent 76%)}
  .hx-grid{gap:0;padding:50px 0 56px}
  .hx-pill{margin-bottom:28px;padding:9px 13px;font-size:12px}
  .hx-pill .arr{display:none}
  /* sized so the lines break as in the mobile reference */
  .biz .hx h1{font-size:clamp(30px,8.7vw,40px);letter-spacing:-.05em}
  .biz .hx h1 .dim{margin-top:9px}
  .hx-sub{width:100%;margin-top:24px;font-size:17px}
  /* one CTA on phones: the scan; the product composition is hidden */
  .hx .herocta{margin-top:28px}
  .hx .herocta .btn.primary{min-width:220px}
  .hx .herocta .btn.ghost,.hx-stage{display:none}

  .biz .bz{padding:72px 0}
  .biz .bz-h{font-size:clamp(30px,8.6vw,36px)}
  .bz-p{margin-top:16px;font-size:16.5px}
  .bz-split,.bz-split-rp{gap:36px}
  /* form card: 326px wide on phones (user spec), step 2 grows downwards */
  .ask-card{width:min(326px,100%);margin:0 auto;padding:24px 20px;border-radius:20px}
  .biz .ask-h{font-size:24px}
  .ask-p{font-size:14.5px;line-height:1.45}
  .scan-form{margin-top:18px}
  .s1-row{grid-template-columns:minmax(0,1fr)}
  .scan-form input,.scan-form select{height:48px}
  .scan-cta{height:48px;width:100%;background:linear-gradient(90deg,#B8F22E,#D5FF2F)}
  .s2-fields{grid-template-columns:minmax(0,1fr);gap:14px}
  .s2-trust{flex-direction:column;gap:8px}

  .rp-bar,.rp-top,.rp-note{padding-left:18px;padding-right:18px}
  .rp-top b{font-size:18px}
  .rp-list{margin:0 12px}
  .rp-item{grid-template-columns:36px minmax(0,1fr) auto;gap:10px;padding:13px 12px}
  .rp-ic{width:36px;height:36px;border-radius:10px}
  .rp-ic svg{width:18px;height:18px}
  .rp-main h4{gap:4px 8px;font-size:14.5px;line-height:1.25}
  .rp-badge{padding:3px 8px;font-size:10.5px}
  .rp-mline{margin-top:3px;font-size:12px}
  .rp-chip{padding:5px 9px;font-size:11px}

  .lm-note{margin-top:32px}
  .steps{grid-template-columns:minmax(0,1fr);gap:36px;margin-top:40px;padding:0 0 0 28px;border-top:0;border-left:1px solid #D9DBD0}
  .step::before{top:4px;left:-35px}
  .biz .step h3{font-size:21px}
  .logostrip{grid-template-columns:minmax(0,1fr);gap:14px}
  .ls-set{gap:40px;padding-right:40px;min-height:40px}
  .ls-set img{height:calc(var(--h) * .84)}
  .ls-track{animation-duration:27s}
  .faq{margin-top:56px}
  .qas{grid-template-columns:minmax(0,1fr)}
  .endcta{margin-top:56px;padding-top:56px}
  .endcta .scan-cta{width:100%}
}
/* ---------- phones: the look of handoff v2 mobile-target.png, without hero buttons:
   pill with a dot, a soft arc, the request card straight under the hero */
@media (max-width:680px){
  .hx-pill{gap:9px;padding:8px 14px 8px 12px;border-color:transparent;background:#EEF4E2;box-shadow:none;font-size:12.5px;color:#2E3A2A}
  .hx-pill::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#63B32E}
  .biz .hx h1{font-weight:760}
  .biz .hx h1 .dim{text-wrap:wrap}
  .hx .herocta,.hx-micro{display:none}
  .hx-grid{padding-bottom:30px}
  /* a large soft sage-to-blue arc on the right of the hero */
  .hx-wash{left:56%;right:auto;top:9%;bottom:auto;width:118%;height:auto;aspect-ratio:1;opacity:1;filter:blur(8px);transform:none;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 66%);mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 66%);border-radius:50%;
    background:radial-gradient(closest-side,rgba(211,226,240,.72) 0%,rgba(205,222,214,.68) 46%,rgba(199,217,181,.6) 70%,rgba(199,217,181,0) 100%)}

  /* the request card follows the hero directly */
  .biz .bz-offer{padding:0 0 64px;border-top:0}
  .bz-offer .ask-card{padding:24px 20px;gap:0}
  .bz-offer .scan-form{margin-top:18px}
  .s1-field input{padding-left:44px}
  .ask-terms{margin-top:12px;font-size:13px}
  .ask-terms i{margin:0 4px 0 6px}
  .ask-guar{padding:9px 11px;font-size:13px}
}
@media (max-width:410px){
  /* too narrow for the full lockup: the brand book says use the icon */
  .nav .mark .logo-full{display:none}
  .nav .mark .logo-icon{display:block}
}
@media (max-width:420px){
  .nav{gap:12px}
  .navright{gap:8px}
  .nav .btn{padding:8px 10px;font-size:13px}
  .langswitch{font-size:11.5px}
  .langswitch a{padding:4px 6px}
}
@media (max-width:370px){
  .nav{padding-left:20px;padding-right:20px}
  .nav .btn{padding:8px;font-size:12.5px}
}
@media (prefers-reduced-motion: reduce){
  .fold{transition:none!important}
  .hx-aura i{animation:none}
  .lmap svg.wires path{transition:none;stroke-dashoffset:0}
  .ls-track{animation:none;width:auto}
  .ls-set[aria-hidden]{display:none}
  .ls-view{-webkit-mask-image:none;mask-image:none}
  .ls-set{flex:1;flex-wrap:wrap;justify-content:center;row-gap:14px;padding:0 16px}
}