/* Het ontwerp van de marketingsite: ceocapital.co en de pagina's die
   daaronder hangen (/solutions, /industries).

   Dit stond inline in index.html. Zodra er een tweede en derde pagina in
   dezelfde stijl bij kwamen, was de keuze: overschrijven en uit elkaar laten
   lopen, of één bron. Dit bestand is een LETTERLIJKE verplaatsing van dat
   blok -- geen enkele regel is onderweg veranderd -- zodat de homepage er
   precies hetzelfde uitziet als ervoor.

   home-v2.html houdt bewust zijn eigen inline blok: dat is een variant met
   een andere typografie in de hero, en die hoort niet mee te veranderen als
   hier iets wordt aangepast. */
  /* General Sans wordt niet van Fontshare geladen: het beveiligingsbeleid van
     deze site (public/_headers) staat als externe stijlbron alleen
     fonts.googleapis.com toe, dus die link werd geblokkeerd en de koppen vielen
     terug op Inter. Zelf gehost valt het onder font-src 'self'. */
  @font-face{ font-family:"General Sans"; src:url("/fonts/generalsans-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
  @font-face{ font-family:"General Sans"; src:url("/fonts/generalsans-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
  @font-face{ font-family:"General Sans"; src:url("/fonts/generalsans-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

  :root{
    --bg:#0a0e17; --bg-2:#0d1220; --panel:#121826; --panel-2:#1a2233; --panel-3:#151c2c;
    --line:#232d40; --line-soft:#1a2233; --line-strong:#33405a;
    --text:#eaeef7; --muted:#96a2ba; --subtle:#6a7488;
    --primary:#2563eb; --primary-hover:#3b82f6; --primary-tint:rgba(37,99,235,.14);
    --good:#34d399; --good-tint:rgba(52,211,153,.12);
    --sans:"Inter Tight", "Inter", system-ui, sans-serif;
    --display:"General Sans", "Inter Tight", "Inter", system-ui, sans-serif;
    --ui:"Inter", system-ui, sans-serif;
    --sub:"Bai Jamjuree", "Inter", system-ui, sans-serif;
    /* Vier maten voor alle kleine tekst. Niet alles even groot, wel uit één
       reeks — zo blijft het verschil tussen een FAQ-antwoord en een footerlink
       betekenisvol in plaats van toevallig.
         lede  = introzin onder een sectiekop
         body  = lopende tekst in kaarten, FAQ-antwoorden
         small = footer, secundaire regels
         micro = juridisch, metadata
         label = hoofdletterlabels (die blijven in --ui) */
    --t-lede:1rem; --t-body:.94rem; --t-small:.86rem; --t-micro:.75rem; --t-label:.7rem;
    --lh-prose:1.6; --lh-tight:1.5;
    /* Diepte uit licht, niet uit randen — gelijk aan portal.css en styles.css. */
    --shadow-sm:0 1px 1px rgba(255,255,255,.035), 0 2px 6px -4px rgba(0,0,0,.7);
    --shadow-md:0 1px 1px rgba(255,255,255,.035), 0 18px 40px -22px rgba(0,0,0,.9);
    --sunk:inset 0 2px 5px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.05);
    --raise:0 1px 0 rgba(255,255,255,.07) inset, 0 2px 6px -2px rgba(0,0,0,.6);
    --r-lg:20px; --r-md:14px; --r-sm:10px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth; overflow-x:hidden;}
  body{
    font-family:var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    color:var(--text); letter-spacing:-0.01em;
    background:var(--bg);
    min-height:100vh; min-height:100dvh;
    /* clip i.p.v. hidden: knipt net zo goed af, maar maakt body geen eigen
       scrollcontainer, zodat position:sticky (kop op mobiel) werkt. */
    overflow-x:hidden; overflow-x:clip;
  }
  img{max-width:100%; display:block;}
  .container{ max-width:1120px; margin:0 auto; padding:0 24px; }
  .container-wide{ max-width:1320px; margin:0 auto; padding:0 24px; }

  /* ===== Nav ===== */
  /* Bewust niet sticky: de balk scrollt gewoon mee weg. */
  .nav{ position:relative; z-index:40; background:rgba(10,14,23,.72); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line-soft); }
  .nav-row{ display:flex; align-items:center; justify-content:space-between; height:68px; }
  .nav-left{ display:flex; align-items:center; gap:40px; }
  .nav-logo img{ height:36px; }
  .nav-links{ display:flex; align-items:center; gap:30px; list-style:none; }
  .nav-links a{ color:var(--muted); text-decoration:none; font-family:var(--ui); font-size:var(--t-small); font-weight:500; transition:color .15s ease; }
  .nav-links a:hover{ color:var(--text); }
  .nav-right{ display:flex; align-items:center; gap:10px; }
  .nav-burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; padding:8px; background:none; border:0; cursor:pointer; }
  .nav-burger span{ display:block; width:100%; height:2px; background:var(--text); border-radius:2px; }

  .mnav-backdrop{ position:fixed; inset:0; z-index:59; background:rgba(6,9,16,.6); visibility:hidden; opacity:0; transition:opacity .25s ease, visibility 0s linear .25s; }
  body.mnav-open .mnav-backdrop{ visibility:visible; opacity:1; transition:opacity .25s ease, visibility 0s; }
  .mnav-panel{ position:fixed; top:0; right:0; bottom:0; width:min(84vw,340px); z-index:60; background:var(--panel); border-left:1px solid var(--line-soft); padding:20px 22px 28px; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); overflow-y:auto; }
  body.mnav-open .mnav-panel{ transform:translateX(0); }
  .mnav-top{ display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; margin-bottom:8px; border-bottom:1px solid var(--line-soft); }
  .mnav-close{ width:36px; height:36px; border-radius:9px; border:1px solid var(--line-strong); background:var(--panel-2); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .mnav-close svg{ width:18px; height:18px; }
  .mnav-link{ display:block; color:var(--text); text-decoration:none; font-family:var(--ui); font-size:var(--t-lede); font-weight:500; padding:15px 2px; border-bottom:1px solid var(--line-soft); }
  .mnav-cta{ margin-top:20px; text-align:center; }
  body.mnav-open{ overflow:hidden; }
  @media(min-width:901px){ .mnav-backdrop, .mnav-panel{ display:none!important; } .mnav-cta{ display:none; } }
  @media(max-width:900px){ .nav-burger{ display:inline-flex; } .nav-right .nav-login{ display:none; } }
  .btn{ font-family:var(--ui); display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 20px; border-radius:10px; font-size:var(--t-small); font-weight:600; letter-spacing:.005em; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:all .16s ease; white-space:nowrap; }
/* De inlogknop: een eigen oppervlak dat omhoog komt, in plaats van een dun
     lijntje. Op een donkere achtergrond leest een outline-knop als uitgeschakeld. */
  .btn-ghost{ color:var(--text); border-color:transparent;
    background:linear-gradient(180deg,#223052 0%,#18213a 100%);
    box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 2px 6px -2px rgba(0,0,0,.65); }
  .btn-ghost:hover{ color:#fff; filter:brightness(1.12); transform:translateY(-1px); }
  .btn-ghost:active{ filter:brightness(.98); transform:translateY(0); }
  .btn-primary{ color:#fff; border-color:transparent;
    background:
      radial-gradient(90% 120% at 28% 14%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 62%),
      linear-gradient(180deg, #3a6ad8 0%, #1c3f9c 100%);
    box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 10px 22px -14px rgba(28,63,156,.75); }
  /* De achtergrond blijft staan; alleen het licht wordt iets sterker. Hem
     vervangen door een platte kleur gaf een harde kleuromslag bij elke klik. */
  .btn-primary:hover{ filter:brightness(1.07); transform:translateY(-1px);
    box-shadow:0 1px 0 rgba(255,255,255,.26) inset, 0 14px 26px -14px rgba(28,63,156,.85); }
  .btn-primary:active{ filter:brightness(.97); transform:translateY(0);
    box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 6px 14px -10px rgba(28,63,156,.8); }
  .btn-lg{ padding:14px 26px; font-size:var(--t-body); border-radius:12px; }

  /* ===== Hero ===== */
  /* flow-root: met overflow:clip valt de ondermarge anders buiten de kop. */
  .hero{ position:relative; padding:88px 0 0; overflow:hidden; overflow:clip; display:flow-root; }
  .hero::before{
    content:""; position:absolute; inset:0 0 auto 0; height:640px;
    background:radial-gradient(900px 480px at 50% -10%, rgba(37,99,235,.20) 0%, rgba(10,14,23,0) 65%);
    pointer-events:none;
  }
  .hero-inner{ position:relative; text-align:center; }
  .hero h1{ font-family:var(--display); font-weight:600; font-size:clamp(2.1rem,7vw,4.5rem); line-height:1.1; letter-spacing:-.04em; max-width:17ch; margin:0 auto 20px; color:#f7f9fd; text-wrap:balance; }
  @media (max-width:899px){ .hero h1{ font-size:clamp(1.45rem,calc(9.2vw - 5px),2.6rem); } } /* mobiel: twee regels, zoals desktop */
  @media (max-width:600px){ .hero h1{ max-width:none; } }
  @media (min-width:900px){ .hero h1{ font-size:clamp(3.5rem,4.2vw,4.5rem); } }
  .hero .lede{ font-family:var(--sub); font-weight:400; max-width:46ch; margin:0 auto 36px; color:var(--muted); font-size:clamp(.95rem,1.5vw,1.1rem); line-height:1.5; text-wrap:pretty; }
  .hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:64px; }

  /* dashboard mockup: echte demo-dashboard screenshot */
  .hero-shot{ position:relative; max-width:900px; margin:0 auto; padding:0 24px 0; }
  .shot-frame{
    background:linear-gradient(180deg,#1a2235,#141a26); border:none; border-radius:16px 16px 0 0;
    box-shadow:var(--shadow-md); overflow:hidden; position:relative;
  }
  .shot-real{ display:block; width:100%; height:auto; }
  .shot-fade{ position:absolute; left:0; right:0; bottom:0; height:120px; background:linear-gradient(180deg, rgba(10,14,23,0) 0%, var(--bg) 92%); pointer-events:none; }

  /* ===== Marquee ===== */
  .marquee-section{ padding:56px 0 64px; border-top:1px solid var(--line-soft); }
  .marquee-label{ text-align:center; font-family:var(--ui); font-size:var(--t-label); color:var(--subtle); margin-bottom:30px; }
  /* Logoband (stijl "LogoMarquee"): eenkleurige logo's, zachte vervaging aan beide kanten. */
  .marquee-wrap{ position:relative; overflow:hidden; max-width:1280px; margin:0 auto; padding:8px 0;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 25%,#000 75%,transparent); mask-image:linear-gradient(to right,transparent,#000 25%,#000 75%,transparent); }
  .marquee-track{ display:flex; gap:42px; width:max-content; align-items:center; transform:translate3d(0,0,0); backface-visibility:hidden; will-change:transform; }
  .marquee-track img{ display:block; height:20px; width:auto; flex:0 0 auto; opacity:.8; pointer-events:none; user-select:none; }
  .marquee-track img.hoog{ height:28px; }
  @media (max-width:768px){
    .marquee-wrap{ -webkit-mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent); mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent); }
    .marquee-track img{ height:16px; }
    .marquee-track img.hoog{ height:23px; }
  }

  /* ===== Feature 3-up ===== */
  .section{ padding:88px 0; }
  .sec-head{ text-align:center; max-width:640px; margin:0 auto 52px; }
  .sec-eyebrow{ font-family:var(--ui); font-size:var(--t-label); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--primary-hover); margin-bottom:14px; }
  .sec-title{ font-family:var(--display); font-weight:600; font-size:clamp(1.55rem,3vw,2.15rem); letter-spacing:-.03em; color:#f4f6fb; line-height:1.22; text-wrap:balance; }
  .sec-lede{ font-family:var(--sub); margin-top:14px; max-width:48ch; color:var(--muted); font-size:var(--t-lede); line-height:var(--lh-prose); text-wrap:pretty; }
  .sec-head .sec-lede{ margin-left:auto; margin-right:auto; }

  .partners-head{ font-family:var(--ui); font-size:var(--t-label); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--primary-hover); margin-bottom:48px; text-align:center; }
  /* Een gecentreerde rij die zelf afbreekt: met vijf logo's van verschillende
     breedte gaf een vast raster lege gaten. Op een telefoon worden ze kleiner
     zodat ze zo lang mogelijk op één rij blijven. */
  .partners-grid{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:28px 48px; max-width:920px; margin:0 auto; }
  .partner-card{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
  .partner-logo{ height:46px; display:flex; align-items:center; justify-content:center; }
  .partner-logo img{ max-height:100%; max-width:100%; width:auto; }
  .partner-logo img[src*="gobaopay"]{ border-radius:7px; max-height:135%; }
  /* Op een telefoon krimpen de logo's mee, zodat ze zo lang mogelijk op één rij
     blijven; op de allersmalste schermen breekt de rij gecentreerd af. */
  @media (max-width:640px){ .partners-grid{ gap:16px 14px; max-width:100%; } .partner-logo{ height:26px; } .partners-head{ margin-bottom:30px; } }
  @media (max-width:380px){ .partners-grid{ gap:12px 10px; } .partner-logo{ height:20px; } }

  /* Netwerksectie: de kleine regel onder de kaarten over wie de betalingen verwerkt. */
  #network .cardgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  @media (max-width:1100px){ #network .cardgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:640px){ #network .cardgrid{ grid-template-columns:1fr; } }
  .net-note{ font-family:var(--sub); font-size:var(--t-small, .86rem); color:var(--muted); text-align:center; max-width:62ch; margin:28px auto 0; text-wrap:pretty; }
  .feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px 20px; padding:14px 6px 6px; }
  .feat-card{ position:relative; background:linear-gradient(180deg,#1a2235,#141a26); border:none; box-shadow:var(--shadow-md); border-radius:18px; padding:30px 24px;
    box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 -1px 0 rgba(0,0,0,.3) inset, 0 24px 40px -22px rgba(0,0,0,.65);
    transition:transform .3s cubic-bezier(.22,.8,.22,1), box-shadow .3s ease, border-color .3s ease; }
  .feat-card:hover{ transform:translateY(-6px) scale(1.02); border-color:rgba(37,99,235,.45); z-index:2;
    box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 -1px 0 rgba(0,0,0,.3) inset, 0 32px 54px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(37,99,235,.18); }
  /* 3D-merkiconen: geen tegel eronder, het icoon heeft zijn eigen glow */
  .feat-card h3{ font-family:var(--display); font-size:1.08rem; font-weight:600; color:var(--text); margin-bottom:8px; letter-spacing:-.02em; }
  .feat-card p{ font-family:var(--sub); font-size:var(--t-body); line-height:var(--lh-prose); color:var(--muted); text-wrap:pretty; }

  /* ===== Split (dark panel) sections ===== */
  .split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
  .split.reverse{ direction:rtl; } .split.reverse > *{ direction:ltr; }
  .split-copy h2{ font-family:var(--display); font-weight:600; font-size:clamp(1.55rem,2.7vw,2.05rem); letter-spacing:-.03em; color:#f4f6fb; line-height:1.24; margin-bottom:16px; text-wrap:balance; }
  .split-copy p{ font-family:var(--sub); font-weight:400; color:var(--muted); font-size:var(--t-lede); line-height:var(--lh-prose); margin-bottom:26px; max-width:44ch; }
  .check-list{ display:flex; flex-direction:column; gap:14px; margin-bottom:30px; }
  .check-item{ display:flex; align-items:flex-start; gap:12px; }
  .check-item .ck{ flex:0 0 auto; width:23px; height:23px; border-radius:50%; margin-top:1px;
    display:flex; align-items:center; justify-content:center; color:#5eead4;
    background:radial-gradient(circle at 32% 28%, rgba(94,234,212,.4), rgba(52,211,153,.14) 70%);
    border:1px solid rgba(94,234,212,.4);
    box-shadow:0 0 0 1px rgba(52,211,153,.06), 0 0 14px -2px rgba(52,211,153,.55); }
  .check-item .ck svg{ width:12px; height:12px; }
  .check-item div{ font-family:var(--sub); font-size:var(--t-body); color:var(--text); line-height:var(--lh-prose); }
  .check-item b{ font-weight:600; }
  .check-item span{ color:var(--muted); }

  .split-visual{ position:relative; }
  .visual-card{ background:linear-gradient(180deg,#1a2235,#141a26); border:none; box-shadow:var(--shadow-md); border-radius:var(--r-lg); overflow:hidden;
    box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 -1px 0 rgba(0,0,0,.3) inset, 0 28px 48px -22px rgba(0,0,0,.65);
    transition:transform .3s cubic-bezier(.22,.8,.22,1), box-shadow .3s ease; }
  .visual-card:hover{ transform:translateY(-4px); box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 -1px 0 rgba(0,0,0,.3) inset, 0 36px 60px -20px rgba(0,0,0,.7); }
  .visual-pad{ padding:26px; }

  /* mini stat card visual (payments split) */
  .mini-stats{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-bottom:14px; }
  .mini-stat{ background:#0d121c; border:none; box-shadow:var(--sunk); border-radius:12px; padding:16px; min-width:0; }
  .mini-stat .l{ font-family:var(--ui); font-size:var(--t-label); color:var(--subtle); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
  .mini-stat .v{ font-family:var(--ui); font-weight:700; font-size:1.3rem; color:var(--text); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mini-bars{ display:flex; align-items:flex-end; gap:6px; height:70px; margin-top:10px; }
  .mini-bars i{ flex:1; background:linear-gradient(180deg,#3b82f6,#2563eb); border-radius:4px 4px 0 0; opacity:.85; }

  /* chargeback visual */
  .cb-list{ display:flex; flex-direction:column; gap:10px; }
  .cb-row{ display:flex; align-items:center; justify-content:space-between; background:#0d121c; border:none; box-shadow:var(--sunk); border-radius:11px; padding:13px 16px; }
  .cb-row .l{ display:flex; align-items:center; gap:11px; }
  .cb-ic{ flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .cb-ic.warn{ color:#fbbf24; background:radial-gradient(circle at 32% 28%, rgba(251,191,36,.4), rgba(240,185,11,.14) 70%);
    border:1px solid rgba(251,191,36,.4); box-shadow:0 0 0 1px rgba(240,185,11,.06), 0 0 14px -2px rgba(240,185,11,.55); }
  .cb-ic.ok{ color:#5eead4; background:radial-gradient(circle at 32% 28%, rgba(94,234,212,.4), rgba(52,211,153,.14) 70%);
    border:1px solid rgba(94,234,212,.4); box-shadow:0 0 0 1px rgba(52,211,153,.06), 0 0 14px -2px rgba(52,211,153,.55); }
  .cb-row .name{ font-family:var(--ui); font-size:var(--t-small); font-weight:600; color:var(--text); }
  .cb-row .sub{ font-family:var(--ui); font-size:var(--t-micro); color:var(--subtle); margin-top:2px; }
  .cb-row .amt{ font-family:var(--ui); font-size:var(--t-small); font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }

  .int-shot-card{ padding:0; background:var(--panel); max-width:460px; margin:0 auto; }
  .int-shot{ display:block; width:100%; height:auto; }

  /* ===== Growth (bento) ===== */
  .bento-num-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px 20px; margin-bottom:28px; padding:14px 6px 6px; }
  .bento-num{ position:relative; background:linear-gradient(180deg,#1a2235,#141a26); border:none; box-shadow:var(--shadow-md); border-radius:18px; padding:28px 24px;
    box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 -1px 0 rgba(0,0,0,.3) inset, 0 24px 40px -22px rgba(0,0,0,.65);
    transform:rotate(var(--tilt,0deg)); transition:transform .3s cubic-bezier(.22,.8,.22,1), box-shadow .3s ease, border-color .3s ease; }
  .bento-num:nth-child(1){ --tilt:1.3deg; }
  .bento-num:nth-child(2){ --tilt:-1.1deg; margin-top:10px; }
  .bento-num:nth-child(3){ --tilt:1.5deg; }
  .bento-num:hover{ transform:rotate(0deg) translateY(-6px) scale(1.02); border-color:rgba(37,99,235,.45); z-index:2;
    box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 -1px 0 rgba(0,0,0,.3) inset, 0 32px 54px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(37,99,235,.18); }
  .bento-num .n{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:11px;
    background:linear-gradient(150deg,#4c86ff,#1c4fd1); color:#fff; font-family:var(--ui); font-weight:700; font-size:var(--t-small); margin-bottom:18px;
    font-variant-numeric:tabular-nums; transform:rotate(-4deg);
    box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 -8px 12px rgba(0,0,0,.22) inset, 0 12px 20px -8px rgba(28,79,209,.6); }
  .bento-num h3{ font-family:var(--display); font-size:1.05rem; font-weight:600; color:var(--text); letter-spacing:-.02em; margin-bottom:7px; }
  .bento-num p{ font-family:var(--sub); font-size:var(--t-body); color:var(--muted); line-height:var(--lh-prose); text-wrap:pretty; }
  .bento-cta{ background:linear-gradient(180deg,#1b2740,#101828); border:none; box-shadow:var(--shadow-md); border-radius:var(--r-lg); padding:36px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
    box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 40px -22px rgba(0,0,0,.6); }
  .bento-cta h3{ font-family:var(--display); font-weight:600; font-size:1.25rem; letter-spacing:-.025em; color:#f4f6fb; margin-bottom:9px; }
  .bento-cta p{ font-family:var(--sub); color:var(--muted); font-size:var(--t-body); line-height:var(--lh-prose); max-width:44ch; text-wrap:pretty; }

  /* ===== Final CTA ===== */
  .cta-band{ position:relative; border-radius:28px; overflow:hidden; background:linear-gradient(180deg,#16254d 0%,#0a0e17 70%); border:none; box-shadow:var(--shadow-md); padding:72px 40px; text-align:center; }
  .cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 50% 0%, rgba(37,99,235,.28), transparent 70%); pointer-events:none; }
  .cta-band-inner{ position:relative; }
  .cta-band h2{ font-family:var(--display); font-weight:600; font-size:clamp(1.6rem,3.2vw,2.3rem); color:#f7f9fd; letter-spacing:-.04em; margin-bottom:14px; text-wrap:balance; }
  .cta-band p{ font-family:var(--sub); font-weight:400; color:var(--muted); max-width:46ch; margin:0 auto 30px; font-size:var(--t-lede); line-height:var(--lh-prose); }

  /* ===== FAQ: onderwerp-tabs + accordeon (omgezet uit de React-component "FAQ tabs") ===== */
  .faq-wrap{ position:relative; isolation:isolate; max-width:820px; }
  .faq-glow{ position:absolute; z-index:-1; top:-60px; left:50%; width:min(680px,100%); height:340px; transform:translateX(-50%);
    background:radial-gradient(closest-side, rgba(255,255,255,.07), rgba(255,255,255,0)); filter:blur(30px); pointer-events:none; }
  /* FAQ zonder blauw: wit en neutraal grijs, zoals de witte knoppen. */
  .faq-wrap .sec-eyebrow{ color:rgba(244,246,251,.7); }
  .faq-wrap .sec-head{ margin-bottom:36px; }
  /* Eén rij; past hij niet (smalle telefoon), dan schuift de rij horizontaal. */
  .faq-tabs{ display:flex; flex-wrap:nowrap; justify-content:safe center; gap:10px; margin:0 auto 32px; max-width:100%;
    overflow-x:auto; scrollbar-width:none; padding:4px; }
  .faq-tabs::-webkit-scrollbar{ display:none; }
  .faq-tab{ position:relative; isolation:isolate; overflow:hidden; flex:0 0 auto; white-space:nowrap; padding:10px 20px; border-radius:999px; cursor:pointer;
    border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03);
    font-family:var(--ui); font-size:var(--t-small); font-weight:600; color:var(--muted);
    transition:color .3s ease, border-color .3s ease; }
  .faq-tab::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
    background:linear-gradient(180deg,#ffffff 0%,#e9eef8 100%); transform:translateY(101%); transition:transform .45s cubic-bezier(.22,1,.36,1); }
  .faq-tab:hover{ color:var(--text); border-color:rgba(255,255,255,.3); }
  .faq-tab.is-active{ color:#0a0e17; border-color:rgba(255,255,255,.9); box-shadow:inset 0 -1px 0 rgba(10,14,23,.08), 0 10px 26px -16px rgba(0,0,0,.8); }
  .faq-tab.is-active::before{ transform:translateY(0); }
  .faq-tab:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
  .faq-panel{ display:flex; flex-direction:column; gap:12px; }
  .faq-panel[hidden]{ display:none; }
  .faq-panel.is-active{ animation:faq-in .4s cubic-bezier(.22,1,.36,1) both; }
  @keyframes faq-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
  .faq-item{ background:linear-gradient(180deg,#17191f,#111318); border:1px solid rgba(255,255,255,.07); border-radius:16px; overflow:hidden;
    box-shadow:0 16px 28px -20px rgba(0,0,0,.7); transition:border-color .25s ease, background .25s ease; }
  .faq-item:hover{ border-color:rgba(255,255,255,.14); }
  .faq-item.open{ border-color:rgba(255,255,255,.22); }
  .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 22px; background:none; border:none; text-align:left; cursor:pointer; font-family:var(--display); font-size:var(--t-lede); font-weight:600; letter-spacing:-.015em; color:var(--text); }
  .faq-q:focus-visible{ outline:2px solid #fff; outline-offset:-4px; border-radius:16px; }
  .faq-plus{ flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:var(--subtle);
    background:rgba(255,255,255,.05); transition:transform .3s cubic-bezier(.22,1,.36,1), background .25s ease, color .25s ease; }
  .faq-plus svg{ width:16px; height:16px; }
  .faq-item.open .faq-plus{ transform:rotate(45deg); color:#0a0e17; background:linear-gradient(180deg,#ffffff,#e9eef8); }
  .faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
  .faq-item.open .faq-a{ grid-template-rows:1fr; }
  .faq-a-in{ font-family:var(--sub); min-height:0; overflow:hidden; color:var(--muted); font-size:var(--t-body); line-height:var(--lh-prose); text-wrap:pretty; }
  .faq-a-in p{ max-width:62ch; padding:0 22px 22px; }
  @media (max-width:600px){
    .faq-tabs{ gap:6px; margin-bottom:24px; justify-content:flex-start; margin-left:-24px; margin-right:-24px; padding:4px 24px; }
    .faq-tabs{ -webkit-mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent); mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent); }
    .faq-tab{ padding:8px 14px; }
    .faq-q{ padding:18px 18px; gap:14px; }
    .faq-a-in p{ padding:0 18px 18px; }
  }
  @media (prefers-reduced-motion: reduce){
    .faq-tab, .faq-tab::before, .faq-plus, .faq-a{ transition:none; }
    .faq-panel.is-active{ animation:none; }
  }

  /* ===== Footer ===== */
  .footer{ border-top:1px solid var(--line-soft); padding:64px 0 32px; margin-top:40px; }
  .footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
  .footer-brand img{ height:26px; margin-bottom:14px; opacity:.95; }
  .footer-brand p{ font-family:var(--sub); color:var(--subtle); font-size:var(--t-small); line-height:var(--lh-prose); max-width:26ch; text-wrap:pretty; }
  .lang-switch{ display:flex; gap:6px; margin-top:18px; }
  .lang-btn{ font-family:var(--ui); font-size:var(--t-micro); font-weight:600; color:var(--subtle); background:transparent; border:1px solid var(--line-strong); border-radius:7px; padding:6px 11px; cursor:pointer; transition:all .15s ease; }
  .lang-btn:hover{ color:var(--text); border-color:#44536f; }
  .lang-btn.active{ color:#fff; background:var(--primary); border-color:var(--primary); }
  .footer-col h4{ font-family:var(--ui); font-size:var(--t-label); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--subtle); margin-bottom:16px; }
  .footer-col a{ display:block; font-family:var(--sub); color:var(--muted); text-decoration:none; font-size:var(--t-small); margin-bottom:11px; transition:color .15s ease; }
  .footer-col a:hover{ color:var(--text); }
  .footer-bottom{ border-top:1px solid var(--line-soft); padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
  .footer-legal{ color:var(--subtle); font-family:var(--sub); font-size:var(--t-micro); line-height:var(--lh-prose); max-width:760px; }
  .footer-meta{ color:var(--subtle); font-family:var(--sub); font-size:var(--t-micro); }

  /* ===== Responsive ===== */
  @media (max-width:900px){
    .nav-links{ display:none; }
    .split{ grid-template-columns:1fr; gap:36px; }
    .split.reverse{ direction:ltr; }
    .split-visual{ order:-1; }
    .split-int.split{ text-align:center; }
    .split-int .split-copy p{ margin-left:auto; margin-right:auto; }
    .split-int .int-shot-card{ max-width:300px; }
    .feat-grid{ grid-template-columns:1fr; gap:20px; }
    .feat-card:nth-child(2){ margin-top:0; }
    .bento-num-row{ grid-template-columns:1fr; gap:20px; }
    .bento-num:nth-child(2){ margin-top:0; }
    .footer-top{ grid-template-columns:1fr 1fr; gap:32px 24px; }
  }
  @media (max-width:600px){
    .hero{ padding-top:64px; }
    .section{ padding:64px 0; }
    .hero-cta{ margin-bottom:44px; }
    .footer-top{ grid-template-columns:1fr; }
    .cta-band{ padding:52px 24px; border-radius:20px; }
    .bento-cta{ padding:28px 22px; }
    .nav-right{ gap:6px; }
    .nav-right .btn{ padding:8px 14px; font-size:var(--t-micro); }
    .nav-right .btn-ghost.nav-login{ padding:8px 12px; }
  }

  /* ===== "Start now" funnel (identiek aan de live homepage) ===== */
  .fn-ov{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:16px;
    background:rgba(5,8,14,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
  .fn-ov.show{ display:flex; }
  @media (min-width:560px){ .fn-ov{ align-items:center; padding:24px; } }
  .fn-modal{ position:relative; width:100%; max-width:460px; background:linear-gradient(180deg,#141a26,#0d1220); border:none; box-shadow:var(--shadow-md);
    border-radius:20px; padding:26px 22px 22px; box-shadow:0 20px 60px rgba(0,0,0,.55);
    max-height:90vh; overflow-y:auto; animation:fnpop .2s ease; }
  @keyframes fnpop{ from{ transform:scale(.96); opacity:.5 } to{ transform:none; opacity:1 } }
  .fn-x{ position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:50%; border:none;
    background:rgba(255,255,255,.06); color:var(--muted); font-size:14px; cursor:pointer; line-height:1; }
  .fn-x:hover{ background:rgba(255,255,255,.12); color:#fff; }
  .fn-head{ font-family:var(--display); font-weight:600; font-size:1.32rem; color:#f4f6fb; text-align:center; margin:2px 26px 8px; letter-spacing:-.025em; }
  .fn-sub{ font-family:var(--ui); font-weight:400; text-align:center; color:var(--muted); font-size:.92rem; line-height:1.5; margin:0 auto 20px; max-width:34ch; }
  .fn-sec{ color:#5bbf9a; font-weight:600; }
  .fn-progress-top{ display:flex; justify-content:space-between; font-family:var(--ui); font-size:.66rem; font-weight:600; letter-spacing:.08em; color:var(--muted); margin-bottom:8px; }
  .fn-progress-top #fn-pct{ color:#5bbf9a; }
  .fn-bar{ height:5px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; margin-bottom:24px; }
  .fn-bar-fill{ height:100%; background:linear-gradient(90deg,#146c4f,#2a9d76); border-radius:3px; transition:width .3s ease; }
  .fn-q{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
  .fn-ic{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:rgba(31,122,92,.16); color:#5bbf9a;
    display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:700; }
  .fn-qt{ font-family:var(--display); font-weight:600; font-size:1.18rem; color:#f4f6fb; letter-spacing:-.02em; }
  .fn-qd{ font-family:var(--ui); font-weight:400; color:var(--muted); font-size:.9rem; line-height:1.5; margin-top:3px; }
  .fn-two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .fn-ic svg{ width:21px; height:21px; }
  /* Dropdown voor de categorievraag. 16px lettergrootte, anders zoomt iOS in
     zodra het veld focus krijgt. */
  .fn-selwrap{ position:relative; }
  .fn-selwrap::after{ content:"▾"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
    color:var(--muted); pointer-events:none; font-size:.85rem; }
  .fn-select{ width:100%; appearance:none; -webkit-appearance:none; padding:15px 40px 15px 15px; border-radius:12px;
    background:#0d121c; border:none; box-shadow:var(--sunk); color:#eef1f6; font-family:var(--ui);
    font-size:1rem; font-weight:500; line-height:1.3; cursor:pointer; transition:all .14s ease; }
  .fn-select:hover{ border-color:rgba(31,122,92,.55); }
  .fn-select:focus{ outline:none; border-color:#1f7a5c; box-shadow:0 0 0 1px rgba(31,122,92,.35); }
  .fn-select option{ background:#11161c; color:#eef1f6; }
  .fn-choice{ padding:16px; border-radius:12px; background:linear-gradient(180deg,#1b2436,#141b29); border:none; box-shadow:var(--raise);
    color:#eef1f6; font-family:var(--ui); font-size:.95rem; font-weight:500; cursor:pointer; transition:all .14s ease; }
  .fn-choice:hover{ border-color:rgba(31,122,92,.55); background:rgba(31,122,92,.07); }
  .fn-choice.sel{ border-color:#1f7a5c; background:rgba(31,122,92,.16); box-shadow:0 0 0 1px rgba(31,122,92,.35), 0 0 14px rgba(31,122,92,.22); }
  .fn-opts{ display:flex; flex-direction:column; gap:9px; }
  .fn-opt{ display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:12px; text-align:left;
    background:#0d121c; border:none; box-shadow:var(--sunk); color:#eef1f6; font-family:var(--ui);
    font-size:.92rem; font-weight:500; cursor:pointer; transition:all .14s ease; }
  .fn-opt:hover{ border-color:rgba(31,122,92,.55); background:rgba(31,122,92,.07); }
  .fn-opt.sel{ border-color:#1f7a5c; background:rgba(31,122,92,.16); box-shadow:0 0 0 1px rgba(31,122,92,.35), 0 0 14px rgba(31,122,92,.22); }
  .fn-ml{ flex:1; }
  .fn-mi{ height:26px; width:auto; flex:0 0 auto; }
  .fn-mi-none{ width:26px; text-align:center; color:var(--muted); }
  .fn-mi-emoji{ width:26px; text-align:center; font-size:20px; line-height:26px; flex:0 0 auto; }
  .fn-seemore{ width:100%; margin-top:9px; padding:11px; border-radius:11px; background:rgba(255,255,255,.02);
    border:1px dashed var(--line-strong); color:var(--muted); font-family:var(--ui); font-size:.86rem; font-weight:500; cursor:pointer; transition:all .14s ease; }
  .fn-seemore:hover{ color:#5bbf9a; border-color:rgba(31,122,92,.55); }
  .fn-more-list{ margin-top:9px; animation:fnfade .22s ease; }
  @keyframes fnfade{ from{ opacity:0; transform:translateY(-5px) } to{ opacity:1; transform:none } }
  .fn-check{ flex:0 0 auto; opacity:0; color:#5bbf9a; font-weight:700; transition:opacity .12s; }
  .fn-opt.sel .fn-check{ opacity:1; }
  .fn-search, .fn-other{ width:100%; padding:12px 14px; border-radius:11px; background:var(--panel-2);
    border:none; box-shadow:var(--sunk); color:#fff; font-family:var(--ui); font-size:.9rem; margin-bottom:12px; }
  .fn-search:focus, .fn-other:focus{ outline:none; border-color:var(--line-strong); }
  .fn-other{ margin-top:9px; margin-bottom:0; }
  .fn-clist{ display:flex; flex-direction:column; gap:8px; max-height:38vh; overflow-y:auto; padding-right:2px; }
  .fn-country{ display:flex; align-items:center; justify-content:space-between; padding:13px 15px; border-radius:11px;
    background:#0d121c; border:none; box-shadow:var(--sunk); color:#eef1f6; font-family:var(--ui);
    font-size:.92rem; cursor:pointer; transition:all .14s ease; }
  .fn-country:hover{ border-color:rgba(31,122,92,.55); }
  .fn-country.sel{ border-color:#1f7a5c; background:rgba(31,122,92,.16); box-shadow:0 0 0 1px rgba(31,122,92,.35), 0 0 14px rgba(31,122,92,.22); }
  .fn-detected{ font-family:var(--ui); color:#5bbf9a; font-size:.78rem; font-weight:600; }
  .fn-nav{ display:flex; flex-direction:column; gap:14px; margin-top:18px; align-items:center; }
  .fn-cta{ width:100%; display:flex; align-items:center; justify-content:center; gap:9px; padding:14px; border-radius:12px; border:none;
    background:linear-gradient(135deg,#146c4f,#0d3d2e); color:#eafff4;
    font-family:var(--ui); font-size:.95rem; font-weight:600; letter-spacing:-.005em; cursor:pointer;
    box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 8px 20px -8px rgba(20,108,79,.55);
    transition:filter .15s, box-shadow .15s, transform .15s; }
  .fn-cta:hover:not(:disabled){ filter:brightness(1.08); transform:translateY(-1px); }
  .fn-cta:disabled{ background:rgba(255,255,255,.06); color:var(--muted); cursor:not-allowed; box-shadow:none; transform:none; }
  .fn-back{ background:none; border:none; color:var(--muted); font-family:var(--ui); font-size:.86rem; cursor:pointer; }
  .fn-back:hover{ color:#fff; }
  .fn-wa{ width:100%; display:flex; align-items:center; justify-content:center; gap:9px; padding:15px; border-radius:12px;
    border:none; background:linear-gradient(135deg,#146c4f,#0d3d2e); color:#eafff4;
    font-family:var(--ui); font-size:.98rem; font-weight:600; letter-spacing:-.005em; cursor:pointer; margin-bottom:8px;
    box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 8px 20px -8px rgba(20,108,79,.55);
    transition:filter .15s, box-shadow .15s, transform .15s; }
  .fn-wa:hover{ filter:brightness(1.08); transform:translateY(-1px); }
  .fn-wanote{ font-family:var(--ui); text-align:center; color:#5bbf9a; font-size:.78rem; font-weight:500; margin:2px 0 14px; }

  /* ===== WhatsApp support (floating) ===== */
  .wa-float{ position:fixed; right:20px; bottom:20px; z-index:60; width:56px; height:56px; border-radius:50%;
    background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 26px -6px rgba(37,211,102,.55), 0 0 0 1px rgba(255,255,255,.08); transition:transform .16s ease, box-shadow .16s ease; }
  .wa-float:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 14px 32px -6px rgba(37,211,102,.65), 0 0 0 1px rgba(255,255,255,.1); }
  .wa-float svg{ width:28px; height:28px; }
  @media (max-width:600px){ .wa-float{ right:16px; bottom:16px; width:52px; height:52px; } .wa-float svg{ width:26px; height:26px; } }


  /* ============================================================
     Herbruikbare onderdelen voor /solutions en /industries.

     Eén kaart, één raster, één statuslabel -- zodat een oplossing of
     bedrijfstak erbij zetten neerkomt op een blok HTML kopiëren en niet op
     opnieuw stijl bedenken. De kaart zelf is .feat-card van de homepage; hier
     staat alleen wat die twee pagina's extra nodig hebben.
     ============================================================ */

  /* Waaiert zelf uit: drie kolommen op een desktop, twee op een tablet, één op
     een telefoon. De homepage houdt bewust zijn vaste .feat-grid van drie,
     want daar staan er altijd precies drie. */
  .cardgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:28px 20px; padding:14px 6px 6px; }
  .cardgrid .feat-card{ display:flex; flex-direction:column; }

  /* Het statuslabel is er niet voor de sier. Niet alles wat een klant kan
     krijgen loopt via ons eigen platform: een deel gaat via een partner, en
     een deel hangt af van een beoordeling door de onderliggende provider. Dat
     hoort op de kaart te staan, niet in de kleine lettertjes onderaan. */
  .tag{ align-self:flex-start; display:inline-flex; align-items:center; gap:7px; margin-top:18px;
    font-family:var(--ui); font-size:var(--t-micro); font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    padding:5px 11px; border-radius:99px; }
  .tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
  .cardgrid .feat-card .tag{ margin-top:auto; }
  /* Het label staat onderaan (margin-top:auto); het element erboven houdt
     altijd 20px afstand, ook als er alleen een alinea boven staat. */
  .cardgrid .feat-card > :nth-last-child(2){ margin-bottom:20px; }
  .tag-live{    color:#74e0a8; background:rgba(16,185,129,.10); box-shadow:inset 0 0 0 1px rgba(116,224,168,.20); }
  .tag-partner{ color:#f0c478; background:rgba(234,179,8,.10);  box-shadow:inset 0 0 0 1px rgba(240,196,120,.22); }
  .tag-review{  color:#9db4e8; background:rgba(37,99,235,.13);  box-shadow:inset 0 0 0 1px rgba(157,180,232,.22); }

  .card-list{ margin:14px 0 0; padding:0; list-style:none; display:grid; gap:7px; }
  .card-list li{ position:relative; padding-left:17px; font-family:var(--sub); font-size:var(--t-body);
    color:var(--muted); line-height:var(--lh-prose); text-wrap:pretty; }
  .card-list li::before{ content:""; position:absolute; left:0; top:.66em; width:5px; height:5px;
    border-radius:50%; background:var(--primary-hover); opacity:.8; }

  /* De kop van een onderliggende pagina: dezelfde taal als de homepage-hero,
     maar lager, want hier staat geen productafbeelding onder. */
  .page-hero{ position:relative; padding:128px 0 56px; text-align:center; }
  .page-hero::before{ content:""; position:absolute; inset:0 0 auto 0; height:420px; pointer-events:none;
    background:radial-gradient(760px 380px at 50% -12%, rgba(37,99,235,.18) 0%, rgba(10,14,23,0) 70%); }
  .page-hero .container{ position:relative; }
  .page-hero h1{ font-family:var(--display); font-weight:600; font-size:clamp(1.9rem,4.6vw,3.1rem);
    line-height:1.12; letter-spacing:-.035em; max-width:20ch; margin:0 auto 18px; color:#f7f9fd; text-wrap:balance; }
  .page-hero .lede{ font-family:var(--sub); font-weight:400; max-width:52ch; margin:0 auto 32px;
    color:var(--muted); font-size:var(--t-lede); line-height:var(--lh-prose); text-wrap:pretty; }
  @media(max-width:900px){ .page-hero{ padding:104px 0 40px; } }

  /* Een nuchtere regel onder een sectie: wat we niet beloven. Opzettelijk
     rustig vormgegeven -- het is geen waarschuwing, het is gewoon waar. */
  .note{ font-family:var(--sub); font-size:var(--t-label); color:var(--subtle); line-height:var(--lh-tight);
    max-width:90ch; margin:30px auto 0; text-align:center; text-wrap:pretty; }
  .note a{ color:var(--primary-hover); text-decoration:none; }
  .note a:hover{ text-decoration:underline; }

  /* Een kaart die ergens heen leidt: de link onderaan, en het hele vlak
     klikbaar via een onzichtbare laag -- zodat er niet twee links in één
     kaart staan voor schermlezers. */
  .card-link{ margin-top:18px; font-family:var(--ui); font-size:var(--t-small); font-weight:600;
    color:var(--primary-hover); text-decoration:none; }
  .card-link::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
  .card-link:hover{ text-decoration:underline; }

  /* Branche-tegels op de homepage: kleiner dan een .feat-card, vier naast
     elkaar, zodat acht branches in twee rijen passen in plaats van drie. */
  .ind-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  .ind-tile{ position:relative; display:block; text-decoration:none; padding:20px 20px 18px; border-radius:16px;
    background:linear-gradient(180deg,#1a2235,#141a26); box-shadow:var(--shadow-md); transition:transform .18s ease, box-shadow .18s ease; }
  .ind-tile:hover{ transform:translateY(-3px); box-shadow:0 0 0 1px rgba(37,99,235,.45), var(--shadow-md); }
  .ind-tile h3{ font-family:var(--display); font-size:var(--t-lede); font-weight:600; color:var(--text); letter-spacing:-.02em; margin-bottom:6px; }
  .ind-tile p{ font-family:var(--sub); font-size:var(--t-small); line-height:var(--lh-prose); color:var(--muted); text-wrap:pretty; }
  @media(max-width:900px){ .ind-grid{ grid-template-columns:repeat(2,1fr); } }
  @media(max-width:520px){ .ind-grid{ grid-template-columns:1fr; } }

  .sec-more{ text-align:center; margin-top:34px; }

  /* Twee knoppen naast elkaar in een CTA-blok; op een telefoon onder elkaar
     en even breed. */
  .cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
  .bento-cta .cta-row{ justify-content:flex-end; }
  @media(max-width:520px){ .cta-row{ flex-direction:column; align-items:stretch; width:100%; } }

  /* Een branche op /industries: titel en uitleg links, wat we leveren rechts.
     Elk blok heeft een id zodat de homepage-tegels er direct naartoe springen;
     scroll-margin houdt de kop vrij van de vaste navigatiebalk. */
  .ind-row{ display:grid; grid-template-columns:1fr 1.15fr; gap:48px; padding:44px 0; border-top:1px solid var(--line-soft); scroll-margin-top:90px; }
  .ind-row:first-child{ border-top:none; padding-top:8px; }
  .ind-row h2{ font-family:var(--display); font-weight:600; font-size:clamp(1.3rem,2.2vw,1.6rem); letter-spacing:-.03em; color:#f4f6fb; line-height:1.25; margin-bottom:12px; text-wrap:balance; }
  .ind-row .ind-lede{ font-family:var(--sub); color:var(--muted); font-size:var(--t-body); line-height:var(--lh-prose); text-wrap:pretty; }
  .ind-row .card-list{ margin-top:0; }
  .ind-row .tag{ margin-top:16px; }
  @media(max-width:900px){ .ind-row{ grid-template-columns:1fr; gap:18px; padding:36px 0; } }
  .ind-row .card-link::after{ display:none; }

  /* Chinese koppen: alleen afbreken waar de tekst dat toestaat (leesteken of
     een ​ in de vertaling), niet midden in een woord als 量身打|造. */
  :lang(zh) .hero h1, :lang(zh) .page-hero h1{ word-break:keep-all; }

/* Bewegende blauwe lichtbundels achter de pagina (zie public/beams.js). */
.beams-bg{ position:fixed; inset:0; width:100vw; height:100vh; z-index:-1; pointer-events:none; filter:blur(6px); }
/* Homepage: de bundels alleen in de kop, onderaan zacht uitlopend naar de gewone achtergrond. */
.hero .beams-hero{ position:absolute; inset:0; width:100%; height:100%; z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%); }
.hero-inner, .hero-shot{ z-index:1; }
/* Homepage: ook bundels in de voet, bovenaan zacht inlopend vanuit de gewone achtergrond. */
.footer{ position:relative; overflow:hidden; }
.footer .beams-voet{ position:absolute; inset:0; width:100%; height:100%; z-index:0;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 55%,transparent 100%); mask-image:linear-gradient(0deg,#000 0%,#000 55%,transparent 100%); }
.footer > :not(.beams-voet){ position:relative; z-index:1; }
/* Homepage-kop: dashboard in een apparaatlijst, 3D gekanteld tot je scrollt (zie public/hero-3d.js).
   Zonder JavaScript staat hij gewoon plat. */
.hero{ padding-bottom:88px; }
.hero-shot{ max-width:1040px; perspective:1000px; }
.hero .shot-frame{
  border-radius:28px; padding:10px;
  background:linear-gradient(180deg,#1c2539 0%,#121827 100%);
  border:3px solid rgba(143,176,255,.14);
  box-shadow:0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003,
             0 0 0 1px rgba(0,0,0,.35), 0 0 80px -20px rgba(59,130,246,.25);
  transform:rotateX(var(--rx,0deg)) scale(var(--sc,1)); transform-origin:50% 50%;
}
.hero-3d-aan .shot-frame{ will-change:transform; }
.hero .shot-real{ border-radius:18px; }
.hero .shot-fade{ display:none; }
.hero-3d-aan .hero-inner{ transform:translateY(var(--ty,0px)); will-change:transform; }
@media (max-width:768px){
  .hero{ padding-bottom:56px; }
  .hero-shot{ padding:0 8px; }
  .hero .shot-frame{ border-radius:18px; padding:5px; border-width:2px; }
  .hero .shot-real{ border-radius:13px; }
}

/* ===== "Track growth in real time": statistiekwidget (zie home-widgets.js) ===== */
/* Alleen de widget, zonder achtergrondvlak; midden naast de tekst. */
.stats-stage{ display:flex; align-items:center; justify-content:center; height:100%; }
.split-visual:has(> .stats-stage){ align-self:center; }
.stats-widget{ width:100%; max-width:440px; display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:linear-gradient(180deg,#1a2438,#131a29); border-radius:24px; padding:24px 26px;
  box-shadow:0 0 0 1px rgba(143,176,255,.12), 0 24px 50px -24px rgba(0,0,0,.9), 0 0 60px -24px rgba(59,130,246,.45); }
.sw-left{ display:flex; flex-direction:column; width:50%; min-width:0; }
.sw-top{ display:flex; align-items:center; gap:8px; color:var(--muted); font-family:var(--ui); font-size:var(--t-small); white-space:nowrap; }
.sw-chg{ display:inline-flex; align-items:center; gap:2px; color:#60a5fa; font-weight:700; }
.sw-chg svg{ width:15px; height:15px; }
.sw-amt{ margin-top:8px; font-family:var(--display); font-weight:700; font-size:clamp(1.8rem,3.4vw,2.35rem); letter-spacing:-.03em; color:#f4f6fb; font-variant-numeric:tabular-nums; }
.sw-chart{ width:50%; height:68px; }
.sw-chart svg{ width:100%; height:100%; overflow:visible; }

/* ===== "Built for how your business sells": verloopkaarten in CEO Capital-blauw ===== */
.g-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
@media (max-width:1100px){ .g-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .g-grid{ grid-template-columns:minmax(0,1fr); gap:14px; } }
.g-card{ position:relative; display:flex; flex-direction:column; min-height:250px; overflow:hidden; isolation:isolate;
  border-radius:20px; padding:24px 22px 22px; text-decoration:none; color:var(--text);
  box-shadow:0 0 0 1px rgba(143,176,255,.10), 0 18px 36px -22px rgba(0,0,0,.9);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
.g-card:hover, .g-card:focus-visible{ transform:translateY(-4px) scale(1.03);
  box-shadow:0 0 0 1px rgba(143,176,255,.22), 0 28px 50px -22px rgba(0,0,0,.95), 0 0 50px -20px rgba(59,130,246,.55); }
.g-card:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
/* Eén blauwfamilie; .g-alt is een tikje dieper voor wat afwisseling in de stroom. */
.g-card{ background:linear-gradient(140deg,#1f3466 0%,#121b31 72%); }
.g-card.g-alt{ background:linear-gradient(140deg,#1a2c58 0%,#10182c 72%); }
.g-badge{ display:inline-flex; align-items:center; gap:8px; width:fit-content; margin-bottom:16px; padding:5px 11px; border-radius:999px;
  font-family:var(--ui); font-size:var(--t-micro); font-weight:600; color:rgba(234,238,247,.85);
  background:rgba(10,14,23,.45); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); backdrop-filter:blur(6px); }
.g-badge i{ width:7px; height:7px; border-radius:50%; background:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.18); }
.g-dot-amber .g-badge i{ background:#f0c478; box-shadow:0 0 0 3px rgba(240,196,120,.18); }
.g-card h3{ font-family:var(--display); font-weight:600; font-size:1.2rem; letter-spacing:-.02em; color:#f4f6fb; margin-bottom:8px; }
.g-card p{ font-family:var(--sub); font-size:var(--t-small); line-height:1.55; color:rgba(234,238,247,.68); max-width:26ch; flex-grow:1; }
.g-cta{ margin-top:18px; display:inline-flex; align-items:center; gap:7px; font-family:var(--ui); font-size:var(--t-small); font-weight:600; color:#f4f6fb; }
.g-cta svg{ width:16px; height:16px; transition:transform .3s ease; }
.g-card:hover .g-cta svg{ transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){ .g-card, .g-cta svg{ transition:none; } }

/* ===== "Infrastructure that grows": bento met eigen productbeelden ===== */
.bento-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.bento-card{ position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:10px; background:#0a0f1a;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), inset 0 -20px 80px -20px rgba(96,134,240,.16);
  transition:box-shadow .3s ease; }
.bento-card:hover{ box-shadow:0 0 0 1px rgba(143,176,255,.2), inset 0 -20px 80px -20px rgba(96,134,240,.28); }
.bc-a{ grid-column:span 3; border-top-left-radius:32px; border-bottom-left-radius:32px; }
.bc-b{ grid-column:span 3; border-top-right-radius:32px; border-bottom-right-radius:32px; }
.bento-graphic{ position:relative; height:21rem; overflow:hidden; }
.bento-graphic img{ position:absolute; display:block; height:auto; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.bento-card:hover .bento-graphic img{ transform:scale(1.03); }
.bg-checkout{ width:72%; left:14%; top:28px; border-radius:16px; box-shadow:0 30px 60px -30px rgba(0,0,0,.9); }
.bento-text{ position:relative; z-index:2; margin-top:-110px; padding:28px 30px 30px; min-height:12rem;
  background:linear-gradient(180deg, rgba(10,15,26,.55) 0%, rgba(10,15,26,.9) 42%, #0a0f1a 100%);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.bento-eyebrow{ font-family:var(--ui); font-size:var(--t-label); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8fb0ff; }
.bento-text h3{ margin-top:6px; font-family:var(--display); font-weight:600; font-size:1.5rem; letter-spacing:-.025em; color:#f4f6fb; }
.bento-text p:not(.bento-eyebrow){ margin-top:8px; max-width:560px; font-family:var(--sub); font-size:var(--t-small); line-height:1.6; color:rgba(234,238,247,.72); }
@media (max-width:900px){
  .bc-a, .bc-b{ grid-column:span 6; border-radius:10px; }
  .bc-a{ border-top-left-radius:28px; border-top-right-radius:28px; }
  .bc-b{ border-bottom-left-radius:28px; border-bottom-right-radius:28px; }
  .bento-graphic{ height:17rem; }
  .bento-text{ margin-top:-80px; padding:24px 22px 24px; min-height:0; }
  .bento-text h3{ font-size:1.25rem; }
}
@media (max-width:600px){
  .g-card{ min-height:0; padding:20px 20px 18px; }
  .g-card p{ max-width:30ch; }
  .g-cta{ margin-top:14px; }
}
/* Bento: "Read more" onder de tekst; dispute-illustratie in de tweede kaart. */
.bento-text .bento-btn{ margin-top:16px; }
.bento-card .bento-text{ flex-grow:1; }
.bento-disputes{ display:flex; align-items:center; justify-content:center; padding:28px 28px 0;
  background:radial-gradient(420px 220px at 50% 40%, rgba(59,130,246,.18), transparent 70%); }
.bento-disputes .cb-list{ width:100%; max-width:420px; }
/* Statistiekwidget: groei groen, daling rood. */
.sw-chg{ color:#34d399; }
.sw-chg.daalt{ color:#f87171; }
.sw-chg.daalt svg{ transform:rotate(180deg); }

/* ===== "Built for how your business sells": tekst links, bewegende kaarten rechts ===== */
.ind-split{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:56px; align-items:center; }
.ind-copy h2{ font-family:var(--display); font-weight:600; font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1.12; letter-spacing:-.035em; color:#f4f6fb; margin:10px 0 18px; text-wrap:balance; }
.ind-copy p{ font-family:var(--sub); color:var(--muted); font-size:var(--t-lede); line-height:var(--lh-prose); max-width:44ch; margin-bottom:28px; text-wrap:pretty; }
.btn.btn-pijl{ border-radius:999px; padding:12px 22px; gap:8px; }
.btn-pijl svg{ width:16px; height:16px; transition:transform .2s ease; }
.btn-pijl:hover svg{ transform:translateX(4px); }

.ind-kolommen{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; height:520px; }
.ind-kolom{ overflow:hidden; height:100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%); }
.ind-stroom{ display:flex; flex-direction:column; gap:16px; will-change:transform; }
.ind-stroom.omhoog{ animation:ind-omhoog 38s linear infinite; }
.ind-stroom.omlaag{ animation:ind-omlaag 38s linear infinite; }
.ind-kolommen:hover .ind-stroom, .ind-rij:hover .ind-rijstroom{ animation-play-state:paused; }
/* Drie gelijke reeksen onder elkaar: een derde opschuiven en het beeld is naadloos. */
@keyframes ind-omhoog{ from{ transform:translateY(0); } to{ transform:translateY(calc(-100% / 3 - 16px / 3)); } }
@keyframes ind-omlaag{ from{ transform:translateY(calc(-100% / 3 - 16px / 3)); } to{ transform:translateY(0); } }

/* Compacte kaart in de stroom. */
.g-card.g-mini{ min-height:0; padding:18px 18px 18px; border-radius:16px; }
.g-mini .g-badge{ margin-bottom:12px; }
.g-mini h3{ font-size:var(--t-lede); margin-bottom:6px; }
.g-mini p{ font-size:var(--t-micro); max-width:none; }
/* De kaarten in de stroom zijn geen links: alleen "Explore industries" klikt door. */
.g-card.g-mini, .g-card.g-mini:hover{ transform:none; cursor:default; box-shadow:0 0 0 1px rgba(143,176,255,.10), 0 18px 36px -22px rgba(0,0,0,.9); }

.ind-rij{ display:none; }
/* De kolommen vervagen boven en onder (~70px); dat telt al als witruimte,
   dus minder padding, anders oogt de afstand tot de buren groter dan elders. */
.section.ind-sectie{ padding:32px 0; }
@media (max-width:1000px){ .section.ind-sectie{ padding:64px 0; } }
@media (max-width:1000px){
  .ind-split{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .ind-copy{ text-align:center; }
  .ind-copy p{ margin-left:auto; margin-right:auto; }
  .ind-kolommen{ display:none; }
  .ind-rij{ display:block; overflow:hidden; margin:0 -24px; padding:6px 0 10px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); }
  .ind-rijstroom{ display:flex; gap:14px; width:max-content; animation:ind-links 55s linear infinite; will-change:transform; }
  .ind-rijstroom .g-card{ width:250px; flex:0 0 auto; }
  @keyframes ind-links{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 7px)); } }
}
@media (prefers-reduced-motion: reduce){
  .ind-stroom, .ind-rijstroom{ animation:none; }
  .ind-rij{ overflow-x:auto; }
}
/* "Let's find your setup" als afsluiter onder de FAQ: de FAQ-onderkant geeft al de ruimte. */
.section.cta-onderaan{ padding-top:0; }

/* ===== "We find the payment setup": kaartcarrousel (stijl "Apple card carousel") ===== */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sc-head{ max-width:640px; margin-bottom:40px; }
.sc-head .sec-lede{ margin-left:0; }
/* De strook loopt tot de rand van het scherm, maar begint op de lijn van de inhoud. */
.sc-strip{ --sc-rand:max(24px, calc((100% - 1120px) / 2 + 24px));
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; scroll-snap-type:x proximity; scroll-padding-inline:var(--sc-rand);
  padding:12px var(--sc-rand) 16px; cursor:grab; }
.sc-strip::-webkit-scrollbar{ display:none; }
.sc-strip.sleept{ cursor:grabbing; scroll-snap-type:none; }
.sc-strip.sleept .sc-card{ pointer-events:none; }
.sc-strip:focus-visible{ outline:2px solid #fff; outline-offset:-2px; }
.sc-track{ display:flex; gap:22px; width:max-content; }
.sc-card{ position:relative; display:flex; flex-direction:column; width:320px; height:460px; flex:0 0 auto; overflow:hidden; isolation:isolate;
  scroll-snap-align:start; border-radius:22px; padding:26px; text-decoration:none; color:#f4f6fb;
  background:linear-gradient(160deg,#1d3061 0%,#121b31 62%,#0d1424 100%);
  box-shadow:0 0 0 1px rgba(143,176,255,.12), 0 24px 44px -26px rgba(0,0,0,.9);
  }
.sc-text{ position:relative; z-index:2; display:flex; flex-direction:column; gap:10px; }
.sc-cat{ font-family:var(--ui); font-size:var(--t-small); font-weight:600; color:rgba(234,238,247,.7); }
.sc-title{ font-family:var(--display); font-weight:600; font-size:1.55rem; line-height:1.18; letter-spacing:-.025em; color:#f4f6fb; text-wrap:balance; }
.sc-visual{ position:absolute; left:0; right:0; bottom:0; height:58%; z-index:1; overflow:hidden; }
.sc-logos{ position:absolute; left:26px; right:26px; top:8px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.sc-logos span{ display:grid; place-items:center; height:52px; border-radius:12px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.sc-logos img{ max-width:70%; max-height:20px; width:auto; height:auto; opacity:.85; }
.sc-panel{ position:absolute; left:26px; right:26px; top:8px; padding:18px; border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 20px 40px -24px rgba(0,0,0,.9); }
.sc-label{ font-family:var(--ui); font-size:var(--t-micro); color:rgba(234,238,247,.6); }
.sc-amount{ margin-top:6px; font-family:var(--display); font-weight:700; font-size:1.7rem; letter-spacing:-.03em; color:#f4f6fb; font-variant-numeric:tabular-nums; }
.sc-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px;
  font-family:var(--ui); font-size:var(--t-micro); color:rgba(234,238,247,.75); }
.sc-pill{ padding:3px 9px; border-radius:999px; font-weight:600; color:#34d399; background:rgba(52,211,153,.12); }
.sc-chips, .sc-files{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.sc-chips span, .sc-files span{ padding:5px 10px; border-radius:999px; font-family:var(--ui); font-size:var(--t-micro); font-weight:600;
  color:rgba(234,238,247,.75); background:rgba(255,255,255,.06); }
.sc-chips span.on{ color:#0a0e17; background:#f4f6fb; }
.sc-files span{ border-radius:8px; }
.sc-list .sc-row{ margin-top:0; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:var(--t-small); color:#eaeef7; }
.sc-list .sc-row:last-child{ border-bottom:0; }
.sc-ok{ width:8px; height:8px; border-radius:50%; background:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.18); }
.sc-controls{ display:flex; align-items:center; margin-top:28px; }
@media (max-width:600px){
  .sc-head{ margin-bottom:28px; }
  .sc-track{ gap:16px; }
  .sc-card{ width:272px; height:400px; padding:22px; border-radius:20px; }
  .sc-title{ font-size:1.3rem; }
  .sc-logos, .sc-panel{ left:22px; right:22px; }
}

/* Bento: meer lucht tussen de twee kaarten. */
.bento-grid{ gap:28px; }
@media (max-width:900px){ .bento-grid{ gap:20px; } }
/* "Get started today" bij Track growth: op mobiel in het midden. */
@media (max-width:900px){ #payments .split-copy > .btn{ display:flex; width:fit-content; margin-left:auto; margin-right:auto; } }
/* FAQ-tabs: positioneringsbasis, zodat de actieve tab in het midden van de rij geschoven kan worden. */
.faq-tabs{ position:relative; }

/* ===== Footer (stijl "Footer section"): afgeronde bovenkant, zachte witte gloed,
   kolommen die bij het in beeld komen vervaagd binnenvallen (public/footer.js). ===== */
.footer{ max-width:1152px; margin:40px auto 0; padding:64px 0 36px; border-top:1px solid rgba(255,255,255,.1);
  border-radius:48px 48px 0 0; background:radial-gradient(35% 128px at 50% 0%, rgba(255,255,255,.08), transparent); }
.footer > .footer-glow-line{ position:absolute; z-index:1; top:0; left:50%; width:33%; height:1px; transform:translate(-50%,-50%);
  border-radius:999px; background:rgba(255,255,255,.22); filter:blur(2px); pointer-events:none; }
.footer .footer-top{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:48px; margin-bottom:44px; }
.footer-cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; }
.footer-brand .lang-switch{ margin-top:18px; }
.footer-brand .footer-meta{ margin-top:20px; }
.footer-col a.footer-social{ display:flex; align-items:center; gap:8px; }
.footer-social svg{ width:16px; height:16px; flex:0 0 auto; }
.footer .footer-legal{ max-width:none; padding-top:22px; border-top:1px solid var(--line-soft); }
.f-anim-aan .f-anim{ opacity:0; filter:blur(4px); transform:translateY(-8px);
  transition:opacity .8s ease var(--f-delay,0s), filter .8s ease var(--f-delay,0s), transform .8s ease var(--f-delay,0s); }
.f-anim-aan .f-anim.in{ opacity:1; filter:none; transform:none; }
@media (max-width:1000px){ .footer .footer-top{ grid-template-columns:minmax(0,1fr); gap:40px; } }
@media (max-width:600px){
  .footer{ padding:48px 0 28px; border-radius:32px 32px 0 0; }
  .footer-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 20px; }
  .footer .footer-top{ gap:36px; margin-bottom:32px; }
}
/* Carrousel: alle beelden in hetzelfde doorschijnende/witte paneelthema. */
.sc-btn{ display:inline-flex; align-items:center; justify-content:center; padding:7px 12px; border-radius:999px;
  font-family:var(--ui); font-size:var(--t-micro); font-weight:600; color:rgba(234,238,247,.85); background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.sc-btn-wit{ color:#0a0e17; background:linear-gradient(180deg,#ffffff,#e9eef8); box-shadow:none; }
.sc-co-pay{ display:flex; width:100%; margin-top:14px; padding:10px 12px; border-radius:999px; font-size:var(--t-small); }
.sc-soon{ align-self:flex-start; padding:4px 10px; border-radius:999px; font-family:var(--ui); font-size:var(--t-micro); font-weight:600;
  color:#0a0e17; background:linear-gradient(180deg,#ffffff,#e9eef8); }
.sc-dim{ opacity:.6; }
.sc-stip{ width:28px; height:6px; border-radius:999px; background:rgba(255,255,255,.14); }
/* Paneel midden in het onderste deel van de kaart; "Coming soon" rechtsboven, zodat alle titels op één lijn staan. */
.sc-card{ height:440px; }
.sc-visual{ display:flex; align-items:center; padding:0 26px 10px; }
.sc-visual > .sc-panel, .sc-visual > .sc-logos{ position:static; width:100%; }
.sc-soon{ position:absolute; top:-3px; right:0; }
@media (max-width:600px){
  .sc-card{ height:390px; }
  .sc-visual{ padding:0 22px 8px; }
}
/* Betaallink en checkout: zelfde opbouw als het uitbetalingspaneel (label, bedrag, één regel). */
.sc-link{ padding:6px 6px 6px 12px; border-radius:999px; background:rgba(10,14,23,.4); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.sc-link > span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-mini-logos{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:14px; }
.sc-mini-logos span{ display:grid; place-items:center; height:32px; border-radius:8px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.sc-mini-logos img{ max-width:64%; max-height:14px; width:auto; height:auto; opacity:.85; }
/* Disputes: op mobiel als kaart in de carrousel (naast Integrations), niet in de bento. */
.sc-alleen-mobiel{ display:none; }
.sc-pill-amber{ color:#f0c478; background:rgba(240,196,120,.12); }
.sc-v-disputes .sc-row > span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:900px){
  .sc-card.sc-alleen-mobiel{ display:flex; }
  .bento-card.bc-b{ display:none; }
  .bc-a{ border-radius:28px; }
}

/* ===== Track growth: groeiwidget met periodetabs en vlakgrafiek (zie home-widgets.js) ===== */
.stats-widget.sw2{ display:block; max-width:460px; padding:22px 22px 18px; border-radius:24px; }
.sw-kop{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.sw2 .sw-amt{ margin-top:6px; }
.sw-tabs{ display:flex; gap:2px; padding:3px; border-radius:999px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.sw-tabs button{ padding:6px 10px; border:0; border-radius:999px; background:none; cursor:pointer;
  font-family:var(--ui); font-size:var(--t-micro); font-weight:600; color:var(--muted); transition:background .25s ease, color .25s ease; }
.sw-tabs button:hover{ color:var(--text); }
.sw-tabs button.on{ color:#0a0e17; background:linear-gradient(180deg,#ffffff,#e9eef8); }
.sw-tabs button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.sw2 .sw-chart{ position:relative; width:100%; height:150px; margin-top:18px; }
.sw2 .sw-chart svg{ width:100%; height:100%; overflow:visible; }
.sw-grid line{ stroke:rgba(255,255,255,.06); stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:3 4; }
.sw-punt{ position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:#93c5fd;
  box-shadow:0 0 0 4px rgba(96,165,250,.25), 0 0 18px rgba(96,165,250,.8); opacity:0; transform:scale(.4); transition:opacity .3s ease, transform .3s ease; }
.sw-punt.aan{ opacity:1; transform:none; animation:sw-puls 2.4s ease-in-out infinite; }
@keyframes sw-puls{ 0%,100%{ box-shadow:0 0 0 4px rgba(96,165,250,.25), 0 0 18px rgba(96,165,250,.8); } 50%{ box-shadow:0 0 0 8px rgba(96,165,250,.08), 0 0 26px rgba(96,165,250,.9); } }
@media (max-width:600px){
  .stats-widget.sw2{ padding:18px 16px 14px; }
  .sw-kop{ flex-direction:column; gap:12px; }
  .sw2 .sw-chart{ height:120px; }
}
@media (prefers-reduced-motion: reduce){ .sw-punt.aan{ animation:none; } }

/* Bullets onder Track growth: rustiger -- kleine blauwe stip, dunne scheidingslijnen. */
.check-list.sw-lijst{ gap:0; margin-bottom:30px; max-width:46ch; }
.sw-lijst .check-item{ align-items:baseline; gap:12px; padding:12px 0; border-top:1px solid rgba(255,255,255,.06); }
.sw-lijst .check-item:last-child{ border-bottom:1px solid rgba(255,255,255,.06); }
.sw-lijst .stip{ flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.15); transform:translateY(-2px); }
.sw-lijst .check-item div{ font-size:var(--t-small); line-height:1.55; }
.sw-lijst .check-item b{ font-weight:500; color:#eaeef7; }

/* ===== Local payments: wereldbol (zie public/globe.js) ===== */
.glb-kaart{ position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:24px;
  border-radius:32px; padding:8px 8px 8px 56px; background:#0a0f1a;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), inset 0 -20px 80px -20px rgba(96,134,240,.16); }
.glb-kaart::before{ content:""; position:absolute; top:-120px; right:18%; width:420px; height:420px; border-radius:50%;
  background:rgba(59,130,246,.10); filter:blur(80px); pointer-events:none; }
.glb-copy{ position:relative; z-index:1; padding:48px 0; }
.glb-titel{ font-family:var(--display); font-weight:600; font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.1; letter-spacing:-.035em; color:#f4f6fb; margin:10px 0 16px; text-wrap:balance; }
.glb-verloop{ background:linear-gradient(90deg,#60a5fa,#93c5fd); -webkit-background-clip:text; background-clip:text; color:transparent; }
.glb-tekst{ font-family:var(--sub); color:var(--muted); font-size:var(--t-lede); line-height:var(--lh-prose); max-width:46ch; margin-bottom:30px; text-wrap:pretty; }
.glb-feiten{ display:flex; align-items:center; gap:20px; flex-wrap:nowrap; }
.glb-sep{ width:1px; height:34px; background:rgba(255,255,255,.1); }
.glb-v{ font-family:var(--display); font-weight:600; font-size:1.35rem; letter-spacing:-.02em; color:#f4f6fb; }
.glb-l{ margin-top:2px; font-family:var(--ui); font-size:var(--t-micro); color:var(--muted); }
.glb-beeld{ position:relative; z-index:1; aspect-ratio:1; width:100%; max-width:520px; justify-self:end; }
#globe{ display:block; width:100%; height:100%; cursor:grab; touch-action:pan-y; }
#globe.sleept{ cursor:grabbing; }
@media (max-width:900px){
  .glb-kaart{ grid-template-columns:minmax(0,1fr); padding:36px 24px 8px; border-radius:28px; gap:0; }
  .glb-copy{ padding:0; text-align:center; }
  .glb-tekst{ margin-left:auto; margin-right:auto; }
  .glb-feiten{ justify-content:center; gap:16px; }
  .glb-beeld{ justify-self:center; max-width:420px; }
}
@media (max-width:600px){
  .glb-feiten{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-items:start; }
  .glb-sep{ display:none; }
  .glb-v{ font-size:1.1rem; }
}

/* Glass fold (public/glass-fold.js) vervangt de lichtbundels: scherp glas, geen vervaging. */
.beams-bg.glas{ filter:none; }
.hero .beams-hero.glas{ opacity:.8; }
/* Leesbaarheid: een zachte donkere vlek achter kop en ondertitel, zodat het glas daar niet door de tekst heen licht. */
.hero-inner{ position:relative; }
.hero-inner::before{ content:""; position:absolute; z-index:-1; left:50%; top:46%; width:min(920px,110%); height:150%;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(10,14,23,.78) 0%, rgba(10,14,23,.5) 55%, rgba(10,14,23,0) 100%); }
.footer .beams-voet.glas{ opacity:.55; }
/* "Explore industries": op mobiel onder de bewegende kaarten, op desktop naast de tekst. */
.ind-knop-mobiel{ display:none; }
@media (max-width:1000px){
  .ind-knop-desktop{ display:none; }
  .btn.ind-knop-mobiel{ display:flex; width:fit-content; margin:22px auto 0; }
}

/* ===== Industries-pagina in de stijl van de homepage ===== */
/* Kop met glass fold-achtergrond (public/glass-fold.js) en een donkere vlek achter de tekst. */
.page-hero-glas{ overflow:hidden; }
.page-hero-glas::before{ display:none; }
.page-hero-glas .beams-hero{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.75;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 100%); }
.page-hero-glas .container{ position:relative; z-index:1; }
.page-hero-glas .container::before{ content:""; position:absolute; z-index:-1; left:50%; top:50%; width:min(900px,110%); height:140%;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(10,14,23,.8) 0%, rgba(10,14,23,.5) 55%, rgba(10,14,23,0) 100%); }

/* Branches als kaarten: zelfde blauwfamilie als de bewegende kaarten op de homepage. */
.ind-raster{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.ind-raster .ind-row{ display:flex; flex-direction:column; gap:0; padding:28px 28px 24px; border:none; border-radius:24px;
  background:linear-gradient(140deg,#1f3466 0%,#121b31 72%); box-shadow:0 0 0 1px rgba(143,176,255,.10), 0 18px 36px -22px rgba(0,0,0,.9);
  transition:box-shadow .3s ease; }
.ind-raster .ind-row:nth-child(4n+2), .ind-raster .ind-row:nth-child(4n+3){ background:linear-gradient(140deg,#1a2c58 0%,#10182c 72%); }
.ind-raster .ind-row:first-child{ padding-top:28px; }
.ind-raster .ind-row:hover{ box-shadow:0 0 0 1px rgba(143,176,255,.22), 0 24px 44px -22px rgba(0,0,0,.95); }
.ind-raster .ind-row > div{ display:flex; flex-direction:column; }
/* Status bovenaan, als pil. */
.ind-raster .ind-row .tag{ order:-1; margin:0 0 16px; }
.ind-raster .ind-row h2{ font-size:1.35rem; margin-bottom:10px; }
.ind-raster .ind-row .ind-lede{ font-size:var(--t-small); }
/* Opsomming: rustige stip en dunne lijnen, zoals bij Track growth. */
.ind-raster .ind-row .card-list{ margin-top:20px; gap:0; }
.ind-raster .ind-row .card-list li{ padding:10px 0 10px 16px; font-size:var(--t-small); color:#d5dcea; border-top:1px solid rgba(255,255,255,.07); }
.ind-raster .ind-row .card-list li::before{ top:1.15em; width:6px; height:6px; background:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.15); }
.ind-raster + .note{ margin-top:32px; }
@media (max-width:900px){
  .ind-raster{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .ind-raster .ind-row{ padding:24px 22px 20px; border-radius:22px; }
}
/* Ronde witte knop naast de blauwe (zoals op de homepage). */
.page-hero .btn.btn-white, .cta-band .btn.btn-white{ border-radius:999px; }
/* Wereldbol rustiger: alleen de kop en de bol, geen uitleg. */
.glb-kaart .glb-titel{ font-size:clamp(2.2rem,4vw,3.4rem); line-height:1.06; margin:0; }
@media (max-width:900px){ .glb-kaart .glb-copy{ padding-top:8px; } .glb-kaart .glb-titel{ font-size:clamp(1.9rem,8vw,2.4rem); } }
/* Bento "Higher conversion": checkout als glaspaneel (public/co-paneel.css) i.p.v. schermafbeelding. */
.bento-co{ display:flex; align-items:flex-start; justify-content:center; padding:30px 24px 0;
  background:radial-gradient(420px 240px at 50% 30%, rgba(59,130,246,.22), transparent 70%); }

/* FAQ in de twee blauwen van de site: donkerblauwe kaarten (zoals de branchekaarten),
   lichtblauw voor wat actief of open is. */
.faq-wrap .sec-eyebrow{ color:#93c5fd; }
.faq-glow{ background:radial-gradient(closest-side, rgba(59,130,246,.22), rgba(59,130,246,0)); }
.faq-tab{ border-color:rgba(143,176,255,.2); background:rgba(31,52,102,.25); }
.faq-tab:hover{ border-color:rgba(147,197,253,.4); }
.faq-tab::before{ background:linear-gradient(180deg,#bfdbfe 0%,#93c5fd 100%); }
.faq-tab.is-active{ color:#0a1a3a; border-color:rgba(191,219,254,.9); box-shadow:0 10px 26px -14px rgba(96,165,250,.7); }
.faq-item{ background:linear-gradient(140deg,#1a2c58 0%,#10182c 72%); border-color:rgba(143,176,255,.12); }
.faq-item:hover{ border-color:rgba(147,197,253,.28); }
.faq-item.open{ background:linear-gradient(140deg,#1f3466 0%,#121b31 72%); border-color:rgba(147,197,253,.5); }
.faq-plus{ background:rgba(147,197,253,.1); color:#93c5fd; }
.faq-item.open .faq-plus{ color:#0a1a3a; background:linear-gradient(180deg,#bfdbfe,#93c5fd); }
/* Kop: de dashboardafbeelding sluit aan op de lijn onder de kop (geen ruimte ertussen).
   De onderrand van het kader valt net onder de lijn, zodat het beeld eruit lijkt te komen. */
.hero{ padding-bottom:0; }
.hero-shot{ margin-bottom:-2px; }
.hero .shot-frame{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
@media (max-width:600px){ .hero{ padding-bottom:0; } }
/* In de bento: checkout iets kleiner, zodat meer van het formulier in beeld is. */
.bento-co .co-paneel{ transform:scale(.8); transform-origin:top center; flex:0 0 auto; }
@media (max-width:900px){ .bento-co .co-paneel{ transform:scale(.74); } }

/* ===== Footer: leesbaarder, vlaggen als taalkeuze, © helemaal onderaan, compact op mobiel ===== */
.footer .footer-brand p{ color:rgba(234,238,247,.78); }
.footer .footer-col h4{ color:rgba(234,238,247,.6); }
.footer .footer-col a{ color:rgba(234,238,247,.86); }
.footer .footer-col a:hover{ color:#fff; }
.footer .footer-legal{ color:rgba(234,238,247,.6); }
.footer .footer-copy{ margin-top:10px; color:rgba(234,238,247,.6); }
/* Taalkeuze als vlaggen (zelfde als op de login). */
.footer .lang-switch{ gap:8px; }
.footer .lang-btn{ display:grid; place-items:center; width:30px; height:22px; padding:0; border-radius:5px; border:0; background:none; cursor:pointer;
  opacity:.5; filter:saturate(.7); box-shadow:0 0 0 1px rgba(255,255,255,.12); transition:opacity .2s ease, filter .2s ease, transform .15s ease, box-shadow .2s ease; overflow:hidden; }
.footer .lang-btn svg{ width:100%; height:100%; display:block; }
.footer .lang-btn:hover{ opacity:.85; transform:translateY(-1px); }
.footer .lang-btn.active{ opacity:1; filter:none; background:none; box-shadow:0 0 0 2px rgba(255,255,255,.85); }
.footer .lang-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media (max-width:600px){
  .footer{ padding:36px 0 22px; border-radius:24px 24px 0 0; margin-top:24px; }
  .footer .footer-top{ gap:24px; margin-bottom:22px; }
  .footer .footer-brand img{ height:22px !important; margin-bottom:10px; }
  .footer .footer-brand p{ font-size:var(--t-micro); }
  .footer .lang-switch{ margin-top:12px; }
  .footer-cols{ gap:20px 16px; }
  .footer .footer-col h4{ margin-bottom:8px; }
  .footer .footer-col a{ font-size:var(--t-micro); margin-bottom:7px; }
  .footer .footer-legal{ padding-top:16px; font-size:var(--t-label); }
  .footer .footer-copy{ font-size:var(--t-label); margin-top:6px; }
}

/* ===== Navigatiebalk transparant: logo en menuknop zweven op de achtergrond ===== */
.nav{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:0; margin-bottom:calc(-1 * var(--nav-h, 68px)); }
/* De kop eronder schuift onder de balk door; de inhoud houdt dezelfde afstand. */
.hero{ padding-top:calc(88px + var(--nav-h, 68px)); }
.page-hero{ padding-top:calc(128px + 12px); }
@media (max-width:600px){ .hero{ padding-top:calc(64px + var(--nav-h, 68px)); } }
@media(max-width:900px){ .page-hero{ padding-top:calc(104px + 12px); } }
/* Menuknop: klein vierkant in het donkerblauw van de oude balk. */
.nav-burger{ width:40px; height:40px; padding:11px 10px; border-radius:11px;
  background:rgba(10,14,23,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(143,176,255,.18); }
.nav-burger:hover{ box-shadow:inset 0 0 0 1px rgba(143,176,255,.32); }
/* Bento: de volledige checkout van /checkout, verkleind zodat hij helemaal past. */
.bento-graphic.bento-co{ height:auto; padding:30px 24px 26px; align-items:center; }
.bento-co .co-paneel{ transform:none; zoom:.72; }
.bc-a .bento-text{ margin-top:-20px; }
@media (max-width:900px){ .bento-co .co-paneel{ transform:none; zoom:.66; } .bc-a .bento-text{ margin-top:-16px; } }
/* Disputes-kaart even hoog als de checkout-kaart: beeld vult de ruimte, tekst onderaan. */
.bc-b .bento-graphic.bento-disputes{ flex:1 1 auto; height:auto; min-height:21rem; }
.bc-b .bento-text{ flex-grow:0; }
@media (max-width:900px){ .bc-b .bento-graphic.bento-disputes{ min-height:17rem; } }
/* Menuknop: alleen een rand, geen schaduw of vervaging. */
.nav-burger, .nav-burger:hover{ backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; border:1px solid rgba(143,176,255,.22); background:rgba(10,14,23,.72); }
/* Verkleinen met transform i.p.v. zoom (zoom zette het kaartlogo buiten het veld). */
.bento-co .co-paneel{ zoom:1; transform:scale(.72); transform-origin:top center; margin-bottom:calc(var(--co-h, 516px) * -.28); }
@media (max-width:900px){ .bento-co .co-paneel{ zoom:1; transform:scale(.66); margin-bottom:calc(var(--co-h, 516px) * -.34); } }
/* De oude screenshot-regel (img absoluut) niet laten gelden voor de logo's in de checkout. */
.bento-co .co-paneel img{ position:static; transform:none; transition:none; }

/* ===== Solutions-pagina in de stijl van de homepage (glass fold-kop staat bij .page-hero-glas) ===== */
.sol-raster{ gap:20px; padding:8px 0 0; }
.sol-raster .feat-card{ padding:26px 24px 22px; border-radius:24px;
  background:linear-gradient(140deg,#1f3466 0%,#121b31 72%); box-shadow:0 0 0 1px rgba(143,176,255,.10), 0 18px 36px -22px rgba(0,0,0,.9); transition:box-shadow .3s ease; }
.sol-raster .feat-card:nth-child(even){ background:linear-gradient(140deg,#1a2c58 0%,#10182c 72%); }
.sol-raster .feat-card:hover{ box-shadow:0 0 0 1px rgba(143,176,255,.22), 0 24px 44px -22px rgba(0,0,0,.95); }
.sol-raster .feat-card .tag{ order:-1; margin:0 0 16px; }
.sol-raster .feat-card h3{ font-size:1.2rem; color:#f4f6fb; }
.sol-raster .feat-card p{ font-size:var(--t-small); }
.sol-raster .card-list{ margin-top:18px; gap:0; }
.sol-raster .card-list li{ padding:9px 0 9px 16px; font-size:var(--t-small); color:#d5dcea; border-top:1px solid rgba(255,255,255,.07); }
.sol-raster .card-list li::before{ top:1.1em; width:6px; height:6px; background:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.15); }

/* Logoband: alle methodes uit de checkout, groter en met meer ruimte. */
.marquee-track{ gap:68px; }
.marquee-track img{ height:28px; opacity:.85; }
.marquee-track img.hoog{ height:36px; }
@media (max-width:768px){ .marquee-track{ gap:44px; } .marquee-track img{ height:22px; } .marquee-track img.hoog{ height:29px; } }
.marquee-track img.laag{ height:21px; }
@media (max-width:768px){ .marquee-track img.laag{ height:17px; } }
/* Eenvoudige checkout: gewoon verkleinen (de img-regel staat al op static). */
.bento-co .co-paneel{ transform:none !important; margin-bottom:0 !important; zoom:.8; }
@media (max-width:900px){ .bento-co .co-paneel{ zoom:.74; } }
/* FAQ-tabs: zelfde pillen als de rest van de homepage (Dag/Week-tabs, witte knoppen). */
.faq-tab{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); color:var(--muted); }
.faq-tab:hover{ border-color:rgba(255,255,255,.24); color:var(--text); }
.faq-tab::before{ background:linear-gradient(180deg,#ffffff 0%,#e9eef8 100%); }
.faq-tab.is-active{ color:#0a0e17; border-color:transparent; box-shadow:0 8px 20px -14px rgba(0,0,0,.7); }
@media (max-width:600px){ .faq-tab.is-active{ box-shadow:none; } .faq-tabs{ padding-bottom:6px; } }

/* ===== Local payments: dezelfde wereldbol en kopstijl als Home in het portaal ===== */
.vd-titel{ margin:0; font-family:var(--display); font-weight:600; font-size:clamp(28px,4vw,44px); letter-spacing:-.035em; line-height:1.1; color:#f4f6fb; text-wrap:balance; }
.vd-verloop{ background:linear-gradient(90deg,#60a5fa,#93c5fd); -webkit-background-clip:text; background-clip:text; color:transparent; }
.vd-bol{ position:relative; width:100%; max-width:560px; aspect-ratio:1; margin:0 auto; }
.vd-bol::before{ content:""; position:absolute; inset:12%; border-radius:50%; background:radial-gradient(closest-side, rgba(59,130,246,.22), rgba(59,130,246,0)); filter:blur(30px); }
.vd-bol canvas{ position:absolute; inset:0; width:100%; height:100%; }
.vd-cobe{ opacity:0; transition:opacity .8s ease; cursor:grab; contain:layout paint size; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.vd-laag{ pointer-events:none; }
.glb-nieuw .glb-beeld{ aspect-ratio:auto; }
/* Verloop per regel herhalen: zo hebben beide regels ("wherever your" / "customers are") dezelfde blauwtint. */
.vd-verloop{ -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* ---- Kop: kaartenwaaier (stijl "HomeSection", zonder GSAP) ----------------
   Elke kaart staat absoluut in het midden en schuift via --x/--y/--s/--z naar
   zijn plek. Startstand: klein en onzichtbaar; met .in (public/hero-3d.js)
   komt eerst de voorste kaart, daarna de buren (--d = vertraging).
   Daarna zweven ze licht; de hele waaier kantelt bij het scrollen (--rx/--sc). */
.hero-stapel{ max-width:1180px; margin-bottom:0; padding:0 24px; }
.stapel{ position:relative; width:100%; aspect-ratio:1180/600; margin:0 auto; container-type:inline-size;
  transform:translateY(var(--py,0px)) rotateX(var(--rx,0deg)) scale(var(--sc,1)); transform-origin:50% 60%; transform-style:preserve-3d; }
.hero-3d-aan .stapel{ will-change:transform; }
.sk{ position:absolute; left:50%; top:4%; width:64%; margin:0; z-index:var(--z);
  /* --uit/--zoom/--groei staan op 0 (het inzoomeffect op mobiel is eruit);
     de berekening laat ze staan zodat het later weer aan kan. */
  transform:translate(-50%,0) translate(calc(var(--x) + var(--r,0) * var(--uit,0) * 48cqw),var(--y)) scale(calc(var(--s) * (1 + var(--groei,0) * var(--zoom,0))));
  transform-origin:50% 100%;
  transition:transform .8s cubic-bezier(.215,.61,.355,1) var(--d), opacity .6s ease var(--d), filter .6s ease var(--d); }
.sk-tel{ width:21%; top:2%; }
.sk-kader{ border-radius:22px; padding:7px; overflow:hidden;
  background:linear-gradient(180deg,#1c2539 0%,#121827 100%);
  border:3px solid rgba(143,176,255,.16);
  box-shadow:0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 0 0 1px rgba(0,0,0,.35), 0 0 80px -20px rgba(59,130,246,.3);
  animation:sk-zweef 7s ease-in-out infinite; animation-delay:calc(var(--d) * -4); }
.sk-kader img{ display:block; width:100%; height:auto; border-radius:15px; }
.sk-tel .sk-kader{ border-radius:30px; padding:6px; }
.sk-tel .sk-kader img{ border-radius:24px; }
.sk:not(.sk-voor) .sk-kader img{ filter:brightness(.72) saturate(.9); }
.sk-tel .sk-kader img{ filter:brightness(.86) !important; }
.sk-voor .sk-kader{ border-color:rgba(147,197,253,.28); box-shadow:0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 0 0 1px rgba(0,0,0,.35), 0 0 110px -18px rgba(59,130,246,.55); }
@keyframes sk-zweef{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
/* Startstand vóór de intro (alleen met JavaScript; zonder JS staat alles meteen goed). */
.stapel.wacht .sk{ transform:translate(-50%,0) translate(0,6%) scale(.5); opacity:0; transition:none; }
.stapel.wacht .sk-voor{ transform:translate(-50%,0) translate(0,6%) scale(.5); }
@media (max-width:768px){
  .hero-stapel{ padding:0 8px; }
  .stapel{ aspect-ratio:390/262; }
  .sk{ width:76%; }
  .sk:not(.sk-voor):not(.sk-tel){ --s:.8 !important; --y:2% !important; }
  .sk:nth-child(1){ --x:-15cqw !important; } .sk:nth-child(2){ --x:15cqw !important; }
  .sk-tel{ width:24%; --x:39cqw !important; --y:14% !important; --s:.8 !important; }
  .sk-kader{ border-radius:14px; padding:4px; border-width:2px; }
  .sk-kader img{ border-radius:10px; }
  .sk-tel .sk-kader{ border-radius:18px; } .sk-tel .sk-kader img{ border-radius:14px; }
}
@media (prefers-reduced-motion: reduce){
  .sk{ transition:none; } .sk-kader{ animation:none; }
}
/* De voorste kaart is het hogere dashboard (grafiek + wereldbol); de kaarten
   erachter staan halverwege die hoogte. */
@media (min-width:769px){
  .stapel{ aspect-ratio:1180/850; }
  .sk:nth-child(1), .sk:nth-child(2){ --y:58% !important; }
  .sk-tel{ --y:58% !important; }
}
@media (max-width:768px){
  /* Mobiel: dezelfde waaier als op desktop, kleiner. Voorste kaart (het
     dashboard) in het midden; Orders links, Links en de telefoon rechts. */
  .hero-stapel{ padding:0 4px; }
  .stapel{ aspect-ratio:390/330; }
  .sk{ width:70%; }
  .sk:nth-child(1){ --x:-17cqw !important; --y:44% !important; --s:.84 !important; }
  .sk:nth-child(2){ --x:17cqw !important; --y:44% !important; --s:.84 !important; }
  .sk-tel{ width:23%; --x:39cqw !important; --y:40% !important; --s:.86 !important; }
  .stapel.klaar .sk{ transition:none; }
  /* Lichtere schaduw op telefoons (minder werk per frame). */
  .sk-kader{ box-shadow:0 14px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.35) !important; }
  .sk-voor .sk-kader{ box-shadow:0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.35), 0 0 60px -16px rgba(59,130,246,.45) !important; }
}
}