/* ---- Page resets / layout helpers ------------------------------------- */
  * { box-sizing: border-box; }
  body { margin: 0; }
  img { display: block; max-width: 100%; }
  .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
  .eyebrow { display: inline-block; }
  .mix-bold { font-weight: var(--fw-black); }
  .mix-reg  { font-weight: var(--fw-regular); }

  /* Heading reset — design system gives global heading uppercase; we don't want that */
  h1, h2, h3, h4, h5, h6 { text-transform: none; }

  /* ---- Nav --------------------------------------------------------------- */
  .nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(243, 240, 238, 0.92);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--border-1);
  }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 72px;
  }
  .nav-logo { display: flex; align-items: center; gap: 12px; }
  .nav-logo img { height: 36px; width: auto; }
  .nav-links { display: flex; align-items: center; gap: 32px; font-size: 14px; font-weight: var(--fw-medium); }
  .nav-links a { color: var(--cw-kale); }
  .nav-links a:hover { text-decoration: none; color: var(--cw-burgundy); }
  .nav-links a.btn,
  .nav-links a.btn:hover { color: var(--cw-sky); text-decoration: none; }
  .nav-cta { padding: 10px 20px !important; font-size: 14px !important; }
  @media (max-width: 860px) { .nav-links a:not(.nav-cta) { display: none; } }

  /* ---- Buttons ----------------------------------------------------------- */
  .btn {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 16px 30px;
    background: var(--cw-burgundy); color: var(--cw-sky);
    border: none; border-radius: var(--radius-pill);
    font-family: inherit; font-size: 16px; font-weight: var(--fw-medium);
    cursor: pointer; text-decoration: none;
    transition: background var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  }
  .btn:hover { background: var(--cw-burgundy-dark); color: var(--cw-sky); text-decoration: none; }
  .btn:active { transform: translateY(1px); }
  .btn .arrow { transition: transform var(--duration-base) var(--ease-out); display: inline-block; }
  .btn:hover .arrow { transform: translateX(4px); }
  .btn--lg { padding: 18px 34px; font-size: 17px; }
  .btn--block { width: 100%; justify-content: center; }
  .btn--ghost {
    background: transparent; color: var(--cw-kale);
    border: 1.5px solid var(--cw-kale);
  }
  .btn--ghost:hover { background: var(--cw-kale); color: var(--cw-sky); }

  /* ---- Hero -------------------------------------------------------------- */
  .hero { position: relative; padding: 56px 0 88px; overflow: hidden; }
  .hero-grid {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start;
    position: relative; z-index: 2;
  }
  .hero h1 {
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1.02; letter-spacing: -0.018em;
    margin: 0 0 20px;
  }
  /* Onder de 860px schaalt de kop mee met het scherm. Op een vaste 40px is een woord als
     "antiwitwaswet." (327px) breder dan de tekstkolom (329px op een scherm van 393px), en
     dan blijft het lidwoord ervoor alleen op een regel achter. De bovengrens van 43px is
     wat 5vw op 860px al gaf, dus bovenin het bereik verandert er niets. */
  @media (max-width: 860px) {
    .hero h1 { font-size: clamp(28px, 8vw, 43px); }
  }
  .hero h1 .accent { color: var(--cw-prod-grub); }
  .hero .lead {
    font-size: 19px; line-height: 1.5; color: var(--fg-2);
    margin: 0 0 28px; max-width: 560px;
  }
  .hero-ticks { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; }
  .hero-ticks li {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 16px; font-weight: var(--fw-medium); color: var(--cw-kale);
  }
  .tick {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px;
    background: var(--cw-prod-grub); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 1px;
  }
  .hero-cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
  .hero-cta-row .micro { font-size: 13px; color: var(--fg-3); font-weight: var(--fw-medium); }

  /* Hero corner shape — bleeds off canvas, clipped */
  .hero-shape-a, .hero-shape-b { position: absolute; pointer-events: none; z-index: 0; }
  .hero-shape-a img, .hero-shape-b img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .hero-shape-a { top: -130px; right: -130px; width: 360px; height: 360px; }
  .hero-shape-b { bottom: -70px; left: -110px; width: 240px; height: 240px; }

  /* ---- Form (HubSpot placeholder) --------------------------------------- */
  .form-card {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-3);
    position: relative;
  }
  .form-card .badge-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
  }
  .form-card .free-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--cw-prod-grub); color: #fff;
    padding: 6px 12px; border-radius: 999px;
    font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase;
  }
  .form-card h3 {
    font-size: 24px; font-weight: var(--fw-bold);
    margin: 0 0 6px; line-height: 1.2; letter-spacing: -0.005em;
  }
  .form-card .sub {
    font-size: 14px; color: var(--fg-2); margin: 0 0 22px; line-height: 1.45;
  }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
  .form-row--single { grid-template-columns: 1fr; }
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field label {
    font-size: 12px; font-weight: var(--fw-bold);
    color: var(--fg-2); letter-spacing: 0.04em;
  }
  .field label .req { color: var(--cw-burgundy); }
  .field input, .field select {
    font-family: inherit; font-size: 15px; color: var(--cw-kale);
    padding: 12px 14px;
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
  }
  .field input::placeholder { color: #a89e94; }
  .field input:focus, .field select:focus {
    border-color: var(--cw-prod-grub);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 104, 132, 0.15);
  }
  .field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23003345' stroke-width='2'><path d='M1 1l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
  .form-fine { font-size: 12px; color: var(--fg-3); margin: 14px 0 0; line-height: 1.5; text-align: center; }
  .form-fine a { color: var(--fg-2); text-decoration: underline; }

  /* ---- Trust bar --------------------------------------------------------- */
  .trust {
    background: var(--bg-2); border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1);
    padding: 36px 0;
  }
  .trust-inner {
    display: grid; grid-template-columns: 1.2fr 3fr; gap: 48px; align-items: center;
  }
  .trust-stat .num {
    font-size: 44px; font-weight: var(--fw-black); color: var(--cw-prod-grub);
    line-height: 1; letter-spacing: -0.01em;
  }
  .trust-stat .lbl {
    font-size: 13px; color: var(--fg-2); font-weight: var(--fw-medium); margin-top: 6px;
  }
  .trust-logos {
    position: relative; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .logo-track {
    display: flex; align-items: center; gap: 64px; width: max-content;
    animation: logoscroll 32s linear infinite;
  }
  .trust-logos:hover .logo-track { animation-play-state: paused; }
  .cust-logo {
    height: 40px; width: auto; flex-shrink: 0; display: block;
    opacity: 0.8;
    transition: opacity var(--duration-base) var(--ease-out);
  }
  .cust-logo:hover { opacity: 1; }
  @keyframes logoscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .logo-track { animation: none; }
  }
  @media (max-width: 1100px) {
    .trust-inner { grid-template-columns: 1fr; }
  }

  /* ---- Section common ---------------------------------------------------- */
  section { position: relative; }
  .section { padding: 100px 0; overflow: hidden; }
  .section--white { background: var(--bg-2); }
  /* Keep content above the decorative edge shapes */
  .section > .container { position: relative; z-index: 1; }

  /* ---- Decorative brand edge shapes -------------------------------------- */
  /* Bold CW brand shapes (teardrops, circles, squares, trapeziums) as flat
     color images. They bleed off the left/right canvas edges, never centered,
     one bold color per shape. */
  .edge-shape {
    position: absolute; pointer-events: none; z-index: 0;
    opacity: 0.92;
  }
  .edge-shape svg, .edge-shape img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .edge-shape--r { right: 0; }
  .edge-shape--l { left: 0; }
  .section-head { max-width: 760px; margin: 0 0 56px; }
  .section-eyebrow {
    font-size: 13px; font-weight: var(--fw-bold);
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--cw-prod-grub); margin: 0 0 14px;
  }
  .section-head h2 {
    font-size: clamp(34px, 4vw, 52px); line-height: 1.08; margin: 0 0 16px;
    letter-spacing: -0.012em;
  }
  .section-head p {
    font-size: 19px; color: var(--fg-2); line-height: 1.5; max-width: 640px;
  }

  /* ---- Problem ----------------------------------------------------------- */
  .problem-grid {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
  }
  .problem-list { padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
  .problem-tab {
    font: inherit; text-align: left; width: 100%; cursor: pointer;
    display: flex; gap: 16px; align-items: center;
    padding: 16px 20px;
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .problem-tab:hover { border-color: var(--cw-orange); }
  .problem-tab[aria-selected="true"] {
    border-color: var(--cw-orange);
    box-shadow: 0 0 0 1px var(--cw-orange);
  }
  .problem-tab .x {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px;
    background: var(--cw-orange); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: var(--fw-bold);
  }
  .problem-tab strong { display: block; font-size: 16px; color: var(--cw-kale); flex: 1; }
  .problem-tab .chev { flex-shrink: 0; color: var(--fg-2); transition: transform 0.15s ease; }
  .problem-tab[aria-selected="true"] .chev { transform: translateX(3px); color: var(--cw-orange); }
  .problem-panel {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    min-height: 240px;
  }
  .problem-panel .x {
    width: 34px; height: 34px; border-radius: 999px;
    background: var(--cw-orange); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: var(--fw-bold); font-size: 17px;
    margin-bottom: 16px;
  }
  .problem-panel h3 { font-size: 20px; color: var(--cw-kale); margin: 0 0 12px; }
  .problem-panel p { font-size: 16px; color: var(--fg-2); line-height: 1.6; margin: 0; }

  /* ---- Solution (3 steps) ----------------------------------------------- */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; }
  .step {
    background: var(--bg-1); border-radius: var(--radius-lg);
    padding: 32px 28px;
    border: 1px solid var(--border-1);
    position: relative;
  }
  .step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 999px;
    background: var(--cw-prod-grub); color: #fff;
    font-size: 18px; font-weight: var(--fw-bold);
    margin-bottom: 18px;
  }
  .step h3 { font-size: 22px; margin: 0 0 10px; letter-spacing: -0.005em; }
  .step p { font-size: 15px; color: var(--fg-2); line-height: 1.55; }
  .step { display: flex; flex-direction: column; }
  .step .step-mini { margin: 4px 0 16px; }

  /* Mini app windows inside steps (same style as sneak preview) */
  .step-mini {
    margin-top: 20px;
    background: var(--bg-2); border: 1px solid var(--border-1);
    border-radius: var(--radius-md); box-shadow: var(--shadow-1);
    overflow: hidden;
  }
  .step-mini .sm-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--border-1);
  }
  .step-mini .sm-dot { width: 8px; height: 8px; border-radius: 50%; }
  .step-mini .sm-url {
    flex: 1; display: flex; align-items: center;
    background: var(--bg-1); border: 1px solid var(--border-1);
    border-radius: var(--radius-pill); padding: 3px 10px;
    font-size: 10px; color: var(--fg-3); font-weight: var(--fw-medium);
  }
  .step-mini .sm-body { padding: 12px; background: var(--bg-1); display: flex; flex-direction: column; gap: 7px; }
  .sm-row {
    display: flex; align-items: center; gap: 9px;
    background: var(--bg-2); border: 1px solid var(--border-1);
    border-radius: var(--radius-sm); padding: 8px 10px;
  }
  .sm-row .ci-ico { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: var(--fw-bold); }
  .sm-row .sm-label { font-size: 12px; font-weight: var(--fw-medium); color: var(--cw-kale); flex: 1; line-height: 1.3; }
  .sm-row .scr-chip { padding: 3px 9px; font-size: 10px; transition: background 0.3s ease, color 0.3s ease; }

  /* Step animation states */
  .sm-hide { opacity: 0; transform: translateY(6px); }
  .sm-row, .sm-suggest, .sm-dl, .sm-actions { transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.2s ease; }
  .sm-row.sm-pressed { transform: scale(0.96); }
  .sm-row.sm-active { border-color: var(--cw-orange); }
  .sm-spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--border-1); border-top-color: var(--cw-prod-grub); animation: smspin 0.7s linear infinite; display: inline-block; flex-shrink: 0; }
  @keyframes smspin { to { transform: rotate(360deg); } }
  .sm-suggest { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-sm); padding: 10px 11px; display: flex; flex-direction: column; gap: 8px; }
  .sm-sughead { font-size: 12px; font-weight: var(--fw-medium); color: var(--cw-kale); display: flex; align-items: center; gap: 8px; line-height: 1.3; }
  .sm-sughead strong { color: var(--cw-prod-grub); }
  .sm-actions { display: flex; gap: 8px; }
  .sm-btn { font: inherit; font-size: 11px; font-weight: var(--fw-bold); padding: 5px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-1); background: #fff; color: var(--cw-kale); pointer-events: none; transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
  .sm-btn.sm-pressed { transform: scale(0.94); }
  .sm-btn--ok.sm-chosen { background: #1f8a5b; border-color: #1f8a5b; color: #fff; }
  .sm-dl { height: 6px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
  .sm-dl > span { display: block; height: 100%; background: var(--cw-prod-grub); border-radius: 999px; transform: scaleX(0); transform-origin: left; }
  .sm-dl.filling > span { transition: transform 1.7s linear; transform: scaleX(1); }

  /* ---- Features ---------------------------------------------------------- */
  .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .feature {
    background: var(--bg-2); border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: 0; overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
  }
  .feature:hover {
    transform: translateY(-2px); box-shadow: var(--shadow-2);
    border-color: color-mix(in srgb, var(--fa) 45%, var(--border-1));
  }
  .feature .f-body { padding: 22px 26px 26px; }

  /* Feature vignettes (micro-mockups) */
  .fv {
    position: relative; height: 128px; overflow: hidden; flex-shrink: 0;
    background: color-mix(in srgb, var(--fa) 5%, var(--bg-1));
    border-bottom: 1px solid var(--border-1);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--duration-base) var(--ease-out);
  }
  .feature:hover .fv { background: color-mix(in srgb, var(--fa) 10%, var(--bg-1)); }
  .fv-card {
    position: relative; background: #fff;
    border: 1px solid var(--border-1); border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 51, 69, 0.07);
  }
  .fv-line { height: 5px; border-radius: 999px; background: var(--bg-3); }
  .fv-chipwrap {
    position: absolute; left: 0; right: 0; bottom: -11px;
    display: flex; justify-content: center; pointer-events: none;
  }
  .fv-chip {
    font-size: 10px; font-weight: var(--fw-bold); line-height: 1;
    padding: 4px 9px; border-radius: 999px;
    background: #1f8a5b; color: #fff; white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 51, 69, 0.18);
    opacity: 0;
    animation: fvChip 7s var(--ease-out) infinite;
  }
  @keyframes fvChip {
    0%, 44% { opacity: 0; transform: translateY(5px); }
    52%, 92% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
  }

  /* 1. AI: dossier met hiaat */
  .fv-ai { width: 152px; padding: 13px 13px 15px; display: flex; flex-direction: column; gap: 9px; }
  .fv-ai-gap {
    height: 11px; border-radius: 6px;
    border: 1.5px dashed color-mix(in srgb, var(--fa) 60%, transparent);
    animation: fvGap 7s var(--ease-out) infinite;
  }
  @keyframes fvGap {
    0%, 15%, 100% { background: transparent; }
    30%, 85% { background: color-mix(in srgb, var(--fa) 14%, transparent); }
  }

  /* 2. ID SafeScan: scanlijn */
  .fv-id { width: 150px; height: 82px; padding: 13px; display: flex; gap: 11px; align-items: flex-start; }
  .fv-id-photo { width: 30px; height: 38px; border-radius: 5px; background: color-mix(in srgb, var(--fa) 20%, var(--bg-3)); flex-shrink: 0; }
  .fv-id-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 5px; }
  .fv-id-lines i { display: block; height: 5px; border-radius: 999px; background: var(--bg-3); }
  .fv-id-lines i:nth-child(1) { width: 92%; }
  .fv-id-lines i:nth-child(2) { width: 68%; }
  .fv-id-lines i:nth-child(3) { width: 52%; }
  .fv-scan {
    position: absolute; left: 5px; right: 5px; top: -32%; height: 26px; border-radius: 4px;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--fa) 26%, transparent));
    border-bottom: 2px solid var(--fa);
    opacity: 0;
    animation: fvScan 7s ease-in-out infinite;
  }
  @keyframes fvScan {
    0% { top: -32%; opacity: 0; }
    6% { opacity: 1; }
    36% { top: 92%; opacity: 1; }
    42%, 100% { top: 100%; opacity: 0; }
  }

  /* 3. e-Verificatie: handtekening schrijft zichzelf */
  .fv-sign { position: relative; width: 160px; text-align: center; }
  .fv-sig-write {
    display: block;
    clip-path: inset(-20% 0 -20% 0);
    animation: fvSigWrite 7s ease-in-out infinite;
  }
  @keyframes fvSigWrite {
    0%, 8% { clip-path: inset(-20% 100% -20% 0); }
    45%, 100% { clip-path: inset(-20% 0 -20% 0); }
  }
  .fv-sig-name {
    display: block;
    font-family: 'Caveat', cursive; font-weight: 600;
    font-size: 36px; line-height: 1; color: var(--fa);
    transform: rotate(-3deg);
  }
  .fv-swash { display: block; width: 88px; height: 13px; margin: -3px auto 0; }
  .fv-swash path { fill: none; stroke: var(--fa); stroke-width: 2; stroke-linecap: round; }
  .fv-sign-line { display: block; height: 1.5px; margin: 6px 14px 0; background: var(--border-1); }
  .fv-sign .fv-chipwrap { bottom: -26px; }

  /* 4. Risk Safety Net: bronnenticker */
  .fv-ticker { width: 162px; height: 80px; overflow: hidden; padding: 0 13px; }
  .fv-ticker::before, .fv-ticker::after { content: ""; position: absolute; left: 1px; right: 1px; height: 16px; z-index: 2; }
  .fv-ticker::before { top: 0; background: linear-gradient(to bottom, #fff, transparent); border-radius: 8px 8px 0 0; }
  .fv-ticker::after { bottom: 0; background: linear-gradient(to top, #fff, transparent); border-radius: 0 0 8px 8px; }
  .fv-ticker-track { animation: fvTick 9s linear infinite; }
  .fv-trow {
    height: 26px; display: flex; align-items: center; justify-content: space-between;
    font-size: 10.5px; font-weight: var(--fw-medium); color: var(--cw-kale);
  }
  .fv-trow b { color: #1f8a5b; }
  @keyframes fvTick { to { transform: translateY(-104px); } }

  /* 5. Transactiemonitoring: uitschieter */
  .fv-bars { position: relative; display: flex; align-items: flex-end; gap: 7px; height: 62px; }
  .fv-bars i { width: 11px; border-radius: 3px 3px 0 0; height: var(--h); background: color-mix(in srgb, var(--fa) 32%, var(--bg-3)); }
  .fv-bars i.alert { background: var(--fa); animation: fvBar 7s var(--ease-out) infinite; }
  @keyframes fvBar {
    0%, 18% { height: 34%; }
    30%, 100% { height: var(--h); }
  }
  .fv-bars .fv-chipwrap { bottom: auto; top: -22px; }

  /* 6. CRM: sync Grub <-> CRM */
  .fv-sync { display: flex; align-items: center; }
  .fv-node {
    position: relative; z-index: 1;
    background: #fff; border: 1px solid var(--border-1); border-radius: 8px;
    padding: 9px 14px; font-size: 11px; font-weight: var(--fw-bold); color: var(--cw-kale);
    box-shadow: 0 1px 4px rgba(0, 51, 69, 0.07);
  }
  .fv-node--grub { background: var(--cw-prod-grub); border-color: var(--cw-prod-grub); color: #fff; }
  .fv-wire { position: relative; width: 62px; height: 2px; background: color-mix(in srgb, var(--fa) 35%, var(--bg-3)); }
  .fv-dot { position: absolute; top: 50%; margin-top: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--fa); opacity: 0; animation: fvDotA 4s ease-in-out infinite; }
  .fv-dot.d2 { animation-name: fvDotB; animation-delay: 2s; }
  @keyframes fvDotA {
    0% { left: -4px; opacity: 0; }
    10% { opacity: 1; }
    42% { left: 59px; opacity: 1; }
    52%, 100% { left: 59px; opacity: 0; }
  }
  @keyframes fvDotB {
    0% { left: 59px; opacity: 0; }
    10% { opacity: 1; }
    42% { left: -4px; opacity: 1; }
    52%, 100% { left: -4px; opacity: 0; }
  }
  .feature h3 { font-size: 20px; margin: 0 0 8px; letter-spacing: -0.005em; }
  .feature h3 .tag {
    display: inline-block; vertical-align: middle;
    font-size: 10px; font-weight: var(--fw-bold);
    letter-spacing: 0.1em; text-transform: uppercase;
    background: var(--cw-prod-grub); color: #fff;
    padding: 3px 8px; border-radius: 999px;
    margin-left: 8px;
  }
  .feature p { font-size: 14px; color: var(--fg-2); line-height: 1.55; margin: 0; }
  @media (max-width: 860px) {
    .features, .steps { grid-template-columns: 1fr; }
  }

  /* ---- Lead magnet (lighter than primary CTA) --------------------------- */
  .leadmagnet {
    background: var(--bg-2);
    color: var(--cw-kale);
    padding: 64px 0;
    position: relative; overflow: hidden;
    border-top: 1px solid var(--border-1);
    border-bottom: 1px solid var(--border-1);
  }
  .leadmagnet-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 56px; align-items: center;
    position: relative; z-index: 2;
  }
  .leadmagnet h2 {
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.12; letter-spacing: -0.008em;
    margin: 0 0 14px;
    color: var(--cw-kale);
  }
  .leadmagnet h2 .light { font-weight: var(--fw-regular); color: var(--fg-2); }
  .leadmagnet .lead {
    font-size: 16px; color: var(--fg-2); line-height: 1.55;
    margin: 0 0 20px; max-width: 520px;
  }
  .leadmagnet-pitch {
    display: flex; align-items: flex-start; gap: 20px;
    margin-bottom: 4px;
  }
  .checklist-thumb {
    flex-shrink: 0;
    width: 96px; height: 124px;
    background: #fff;
    border: 1px solid var(--border-2);
    border-radius: 6px;
    box-shadow: var(--shadow-2);
    position: relative;
    transform: rotate(-3deg);
    padding: 12px 10px;
    display: flex; flex-direction: column; gap: 6px;
  }
  .checklist-thumb::before {
    /* Per-pagina te overschrijven: de BE-pagina's zetten
       --checklist-badge: "AMLR" in hun eigen <style>-blok. Zonder override
       blijft het WWFT, zoals op de NL-pagina's. */
    content: var(--checklist-badge, "WWFT");
    position: absolute; top: -8px; right: -10px;
    background: var(--cw-orange); color: #fff;
    font-size: 9px; font-weight: var(--fw-black);
    letter-spacing: 0.12em; padding: 4px 8px;
    border-radius: 4px;
    transform: rotate(6deg);
  }
  .checklist-thumb .line {
    height: 4px; border-radius: 2px;
    background: var(--bg-3);
  }
  .checklist-thumb .line.short { width: 60%; }
  .checklist-thumb .line.mid { width: 80%; }
  .checklist-thumb .line.long { width: 100%; }
  .checklist-thumb .check {
    width: 8px; height: 8px; border-radius: 2px;
    background: var(--cw-prod-grub); flex-shrink: 0;
    display: inline-block; margin-right: 6px;
  }
  .checklist-thumb .row { display: flex; align-items: center; }
  .checklist-thumb .row .line { flex: 1; }
  .leadmagnet-bullets {
    list-style: none; padding: 0; margin: 0 0 20px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px;
  }
  .leadmagnet-bullets li {
    display: flex; gap: 10px; align-items: center;
    font-size: 14px; color: var(--cw-kale); font-weight: var(--fw-medium);
  }
  .leadmagnet-bullets .dot {
    width: 16px; height: 16px; border-radius: 4px;
    background: var(--cw-prod-grub);
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Light variant of the form card */
  .form-card--light {
    background: #fff;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow-2);
  }
  .form-card--light h3 { font-size: 19px; margin: 0 0 4px; }
  .form-card--light .sub { font-size: 13px; margin: 0 0 16px; }
  .form-card--light .form-row { margin-bottom: 10px; }
  .form-card--light .field input,
  .form-card--light .field select { padding: 10px 12px; font-size: 14px; }
  .form-card--light .btn { padding: 12px 22px; font-size: 15px; }

  @media (max-width: 860px) {
    .leadmagnet-grid { grid-template-columns: 1fr; gap: 32px; }
    .leadmagnet-bullets { grid-template-columns: 1fr; }
    .leadmagnet-pitch { flex-direction: column; gap: 16px; }
  }

  /* ---- Social proof ------------------------------------------------------ */
  .proof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 64px; }
  .proof-stat { text-align: left; padding: 24px 28px; border-left: 3px solid var(--cw-prod-grub); }
  .proof-stat .num { font-size: 52px; font-weight: var(--fw-black); color: var(--cw-prod-grub); line-height: 1; letter-spacing: -0.015em; }
  .proof-stat .lbl { font-size: 14px; color: var(--fg-2); margin-top: 8px; line-height: 1.45; }
  /* Clickable testimonial carousel (auto-advances every 3s) */
  .tm-carousel { display: flex; align-items: center; gap: 16px; }
  .tm-viewport { position: relative; overflow: hidden; flex: 1; min-width: 0; }
  .tm-track {
    display: flex; gap: 24px; width: max-content;
    will-change: transform;
  }
  .tm-btn {
    flex-shrink: 0;
    width: 46px; height: 46px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-2); border: 1px solid var(--border-1);
    color: var(--cw-kale); cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  }
  .tm-btn:hover { background: var(--cw-prod-grub); border-color: var(--cw-prod-grub); color: #fff; }
  .tm-btn:active { transform: scale(0.92); }
  .tm-btn svg { width: 20px; height: 20px; }
  .testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .testimonial {
    flex: 0 0 auto; box-sizing: border-box;
    background: var(--bg-2); border: 1px solid var(--border-1);
    border-radius: var(--radius-lg); padding: 28px;
    display: flex; flex-direction: column; gap: 16px;
  }
  .testimonial .qmark {
    font-family: var(--font-display); font-weight: var(--fw-black);
    color: var(--cw-prod-grub); font-size: 56px; line-height: 0.6;
  }
  .testimonial blockquote { margin: 0; font-size: 16px; line-height: 1.5; color: var(--cw-kale); font-weight: var(--fw-medium); }
  .testimonial blockquote .em { font-weight: var(--fw-bold); }
  .testimonial-cite { display: flex; align-items: center; gap: 12px; margin-top: auto; }
  .avatar { width: 48px; height: 48px; border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); color: #fff; font-size: 14px; object-fit: cover; background: var(--bg-3); }
  .testimonial blockquote { min-height: 168px; }
  .cite-name { font-size: 14px; font-weight: var(--fw-bold); color: var(--cw-kale); }
  .cite-role { font-size: 12px; color: var(--fg-2); }
  @media (max-width: 860px) {
    .proof-stats { grid-template-columns: 1fr; }
    /* Het 3-koloms grid (wwft-checklist) bleef ook op een telefoon drie kolommen
       breed, en omdat de sectie overflow:hidden heeft viel de derde quote daar
       buiten beeld. */
    .testimonials { grid-template-columns: 1fr; }
    .testimonial { padding: 22px; gap: 12px; }
    .testimonial .qmark { font-size: 40px; }
    /* min-height: 0 heft de 168px van hierboven op. Die hoogte lijnt de drie
       desktopkaarten uit; op mobiel staat er een kaart in beeld, dus daar is het
       alleen maar lucht onder de korte quotes. */
    .testimonial blockquote { font-size: 15px; line-height: 1.45; min-height: 0; }
    .avatar { width: 40px; height: 40px; }
  }
  /* Nav-knoppen onder de carrousel, zodat de kaart de volle containerbreedte krijgt
     in plaats van wat er naast twee knoppen van 46px overblijft (op een scherm van
     393px was dat 190px kaart, oftewel 140px tekst). measure() in lp.js leest
     .tm-viewport bij load en bij resize, dus die pikt de nieuwe breedte vanzelf op.

     500px en niet 640px: perView in lp.js springt naar twee kaarten zodra de
     viewport >= 440px is, en met de containerpadding van 2x32px gebeurt dat vanaf
     een scherm van 504px. Boven de 500px blijft de carrousel dus zoals hij was. */
  @media (max-width: 500px) {
    .tm-carousel { flex-wrap: wrap; justify-content: center; gap: 14px; }
    .tm-viewport { order: -1; flex: 0 0 100%; }
  }

  /* ---- Product preview (vertical carousel) ------------------------------- */
  .preview-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: center; }
  .preview-tabs { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; }
  .preview-tab {
    position: relative; overflow: hidden;
    display: flex; gap: 16px; align-items: flex-start;
    width: 100%; text-align: left;
    padding: 18px 20px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
  }
  .preview-tab:hover { background: var(--bg-2); }
  .preview-tab.active { background: var(--bg-2); border-color: var(--border-1); box-shadow: var(--shadow-1); }
  .preview-tab .pt-num {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0,104,132,0.1); color: var(--cw-prod-grub);
    font-weight: var(--fw-black); font-size: 15px;
    transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
  }
  .preview-tab.active .pt-num { background: var(--cw-prod-grub); color: #fff; }
  .preview-tab .pt-title { font-size: 17px; font-weight: var(--fw-bold); color: var(--cw-kale); line-height: 1.25; }
  .preview-tab .pt-desc {
    font-size: 14px; color: var(--fg-2); line-height: 1.5;
    max-height: 0; opacity: 0; margin-top: 0;
    overflow: hidden;
    transition: max-height var(--duration-slow) var(--ease-out), opacity var(--duration-base) var(--ease-out), margin-top var(--duration-slow) var(--ease-out);
  }
  .preview-tab.active .pt-desc { max-height: 80px; opacity: 1; margin-top: 6px; }
  .pt-progress {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
    background: var(--cw-prod-grub);
    transform: scaleX(0); transform-origin: left;
  }
  .preview-tab.active .pt-progress { animation: ptfill var(--pt-dur, 7s) linear forwards; }
  .preview.paused .preview-tab.active .pt-progress { animation-play-state: paused; }
  @keyframes ptfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* App window frame */
  .preview-window {
    position: relative; z-index: 1;
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    overflow: hidden;
  }
  .pw-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 18px; border-bottom: 1px solid var(--border-1); background: #fff;
  }
  .pw-dots { display: flex; gap: 6px; }
  .pw-dot { width: 11px; height: 11px; border-radius: 50%; }
  .pw-omnibox {
    flex: 1; display: flex; align-items: center; gap: 8px;
    background: var(--bg-1); border: 1px solid var(--border-1);
    border-radius: var(--radius-pill); padding: 6px 14px;
    font-size: 12px; color: var(--fg-3); font-weight: var(--fw-medium);
  }
  .pw-omnibox .lock { color: var(--cw-prod-grub); display: inline-flex; }
  .pw-viewport { position: relative; height: 452px; overflow: hidden; background: var(--bg-1); }
  .pw-track { display: flex; flex-direction: column; transition: transform var(--duration-slow) var(--ease-in-out); }
  .pw-screen { height: 452px; box-sizing: border-box; padding: 24px 26px; display: flex; flex-direction: column; }

  /* App screen building blocks */
  .scr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
  .scr-h { font-size: 18px; font-weight: var(--fw-bold); color: var(--cw-kale); }
  .scr-sub { font-size: 12.5px; color: var(--fg-3); margin-top: 3px; }
  .scr-pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--cw-prod-grub); color: #fff;
    padding: 8px 14px; border-radius: var(--radius-pill);
    font-size: 12.5px; font-weight: var(--fw-bold);
  }
  .scr-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: var(--radius-pill);
    font-size: 11.5px; font-weight: var(--fw-bold); letter-spacing: 0.01em;
  }
  .chip-green { background: rgba(31,138,91,0.13); color: #1f7a52; }
  .chip-amber { background: rgba(212,174,91,0.2); color: #9d7d2b; }
  .chip-red   { background: rgba(253,63,1,0.12); color: #c23300; }
  .chip-blue  { background: rgba(0,101,225,0.1); color: #0058c4; }
  .chip-grey  { background: var(--bg-3); color: var(--fg-2); }

  /* client rows */
  .scr-rows { display: flex; flex-direction: column; gap: 9px; }
  .scr-row {
    display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center;
    background: var(--bg-2); border: 1px solid var(--border-1);
    border-radius: var(--radius-sm); padding: 12px 14px;
  }
  .scr-av { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: var(--fw-bold); }
  .scr-name { font-size: 14px; font-weight: var(--fw-bold); color: var(--cw-kale); }
  .scr-meta { font-size: 11.5px; color: var(--fg-3); margin-top: 1px; }

  /* checklist */
  .scr-check { display: flex; flex-direction: column; gap: 10px; }
  .scr-ci { display: flex; align-items: center; gap: 12px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-sm); padding: 12px 14px; }
  .scr-ci .ci-ico { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
  .scr-ci .ci-label { font-size: 13.5px; font-weight: var(--fw-medium); color: var(--cw-kale); flex: 1; }

  /* risk meter */
  .scr-meter { margin-top: auto; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: 16px 18px; }
  .scr-meter-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
  .scr-meter-val { font-size: 20px; font-weight: var(--fw-black); color: #1f7a52; }
  .scr-bar { height: 8px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
  .scr-bar > span { display: block; height: 100%; border-radius: 999px; }

  /* timeline */
  .scr-tl { display: flex; flex-direction: column; gap: 0; position: relative; }
  .scr-te { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding-bottom: 16px; position: relative; }
  .scr-te:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 18px; bottom: 0; width: 2px; background: var(--border-1); }
  .scr-te .te-dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 2px; z-index: 1; border: 3px solid var(--bg-1); }
  .scr-te .te-title { font-size: 13.5px; font-weight: var(--fw-bold); color: var(--cw-kale); }
  .scr-te .te-meta { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }

  /* dossier export */
  .scr-doc { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: 18px 20px; flex: 1; display: flex; flex-direction: column; }
  .scr-doc-line { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px dashed var(--border-1); font-size: 13.5px; color: var(--cw-kale); font-weight: var(--fw-medium); }
  .scr-doc-line:last-of-type { border-bottom: none; }
  .scr-tick { width: 22px; height: 22px; border-radius: 50%; background: rgba(31,138,91,0.15); color: #1f7a52; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .scr-export { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
  .scr-export .btn { padding: 12px 22px; font-size: 14px; }
  .scr-stamp { display: inline-flex; align-items: center; gap: 7px; border: 2px solid #1f7a52; color: #1f7a52; border-radius: var(--radius-pill); padding: 7px 14px; font-size: 12px; font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: 0.08em; transform: rotate(-3deg); }

  @media (max-width: 960px) {
    .preview-grid { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pw-track { transition: none; }
    .preview-tab.active .pt-progress { animation: none; transform: scaleX(1); }
    .sm-spin { animation: none; }
    .sm-dl.filling > span { transition: none; }
    .fv-chip { animation: none; opacity: 1; }
    .fv-scan, .fv-dot { display: none; }
    .fv-sig-write { animation: none; clip-path: inset(-20% 0 -20% 0); }
    .fv-ticker-track, .fv-bars i.alert, .fv-ai-gap { animation: none; }
  }

  /* ---- FAQ --------------------------------------------------------------- */
  .faq-list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
  details.faq {
    background: var(--bg-2); border: 1px solid var(--border-1);
    border-radius: var(--radius-md); padding: 20px 24px;
    transition: box-shadow var(--duration-base) var(--ease-out);
  }
  details.faq[open] { box-shadow: var(--shadow-1); border-color: var(--border-2); }
  details.faq summary {
    cursor: pointer; list-style: none; outline: none;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    font-size: 17px; font-weight: var(--fw-bold); color: var(--cw-kale);
  }
  details.faq summary::-webkit-details-marker { display: none; }
  details.faq summary::after {
    content: ""; flex-shrink: 0;
    width: 24px; height: 24px;
    background: var(--cw-prod-grub);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") center/16px no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") center/16px no-repeat;
    transition: transform var(--duration-base) var(--ease-out);
  }
  details.faq[open] summary::after { transform: rotate(180deg); }
  details.faq .answer { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--fg-2); }
  details.faq .answer p + p { margin-top: 10px; }

  /* ---- Final CTA --------------------------------------------------------- */
  .final-cta { padding: 100px 0 120px; position: relative; overflow: hidden; background: var(--bg-2); }
  .final-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 2; }
  .final-cta h2 { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.018em; margin: 0 0 20px; }
  .final-cta h2 .light { font-weight: var(--fw-regular); }
  .final-cta .lead { font-size: 19px; color: var(--fg-2); line-height: 1.5; margin: 0 0 28px; max-width: 520px; }
  .final-shape { position: absolute; pointer-events: none; z-index: 0; bottom: -120px; left: -120px; width: 320px; height: 320px; opacity: 0.92; }
  .final-shape img { width: 100%; height: 100%; object-fit: contain; display: block; }

  /* ---- Footer ------------------------------------------------------------ */
  .footer { background: var(--cw-kale); color: var(--cw-sky); padding: 72px 0 28px; }
  .footer * { color: var(--cw-sky); }
  .footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 40px; }
  .footer-brand .fb-logo { display: flex; align-items: center; gap: 14px; }
  .footer-contact { margin-top: 26px; display: flex; flex-direction: column; gap: 22px; }
  .footer-contact .fc-row { display: flex; align-items: flex-start; gap: 14px; font-size: 16px; line-height: 1.5; }
  .footer-contact .fc-ico { flex-shrink: 0; width: 22px; margin-top: 2px; display: inline-flex; }
  .footer-contact .fc-ico svg { width: 20px; height: 20px; }
  .footer-partners { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
  .footer-partners img { display: block; width: auto; }
  .footer-col h4 { font-size: 21px; font-weight: var(--fw-bold); letter-spacing: 0; text-transform: none; margin: 0 0 26px; opacity: 1; }
  .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
  .footer-col li a { font-size: 16px; opacity: 0.92; transition: opacity var(--duration-fast) var(--ease-out); }
  .footer-col li a:hover { opacity: 1; text-decoration: underline; }
  .footer-rule { margin: 48px 0 26px; border: none; border-top: 1px solid rgba(243,240,238,0.28); }
  .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
  .footer-legal { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
  .footer-copy { font-size: 15px; opacity: 0.92; }
  .footer-links { display: flex; align-items: center; gap: 18px; font-size: 15px; }
  .footer-links a { opacity: 0.92; }
  .footer-links a:hover { opacity: 1; text-decoration: underline; }
  .footer-links .sep { width: 1px; height: 16px; background: rgba(243,240,238,0.35); display: inline-block; }
  .footer-social { display: flex; align-items: center; gap: 14px; }
  .footer-social a {
    width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0;
    background: rgba(243,240,238,0.12);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--duration-fast) var(--ease-out);
  }
  .footer-social a:hover { background: rgba(243,240,238,0.24); }
  .footer-social svg { width: 17px; height: 17px; }
  @media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
  @media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } }

  /* ---- Responsive ------------------------------------------------------- */
  @media (max-width: 960px) {
    .hero-grid, .problem-grid, .leadmagnet-grid, .security-grid, .final-grid { grid-template-columns: 1fr; }
    .section { padding: 72px 0; }
    .hero { padding: 48px 0 72px; }
    .form-row { grid-template-columns: 1fr; }
  }
  /* ---- HubSpot embedded forms (themed to match brand) ------------------- */
  .hs-form-target { margin-top: 4px; }
  .hs-form-iframe { width: 100% !important; min-height: 300px; }
  .hbspt-form, .hs-form { font-family: var(--font-sans); }
  .hs-form fieldset { max-width: none !important; }
  .hs-form .hs-form-field { width: 100% !important; float: none !important; padding: 0 !important; margin-bottom: 12px; }
  .hs-form .hs-form-field > label { display: block; font-size: 12px; font-weight: var(--fw-bold); color: var(--fg-2); letter-spacing: 0.04em; margin-bottom: 6px; }
  .hs-form .hs-form-field > label .hs-form-required { color: var(--cw-burgundy); margin-left: 2px; }
  .hs-form .hs-field-desc { font-size: 11px; color: var(--fg-3); margin: 0 0 6px; }
  .hs-form .input { margin-right: 0 !important; }
  .hs-input {
    width: 100% !important; box-sizing: border-box;
    font-family: inherit; font-size: 15px; color: var(--cw-kale);
    padding: 12px 14px;
    background: var(--bg-1); border: 1px solid var(--border-1);
    border-radius: var(--radius-sm); outline: none;
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
  }
  .hs-input:focus { border-color: var(--cw-prod-grub); background: #fff; box-shadow: 0 0 0 3px rgba(0,104,132,0.15); }
  select.hs-input { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23003345' stroke-width='2'><path d='M1 1l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
  .hs-input[type="checkbox"], .hs-input[type="radio"] { width: auto !important; margin-right: 8px; }
  .hs-form .inputs-list { list-style: none; padding: 0; margin: 0; }
  .hs-form .hs-submit .hs-button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; margin-top: 8px; padding: 16px 30px;
    background: var(--cw-burgundy); color: var(--cw-sky);
    border: none; border-radius: var(--radius-pill);
    font-family: inherit; font-size: 16px; font-weight: var(--fw-medium);
    cursor: pointer; text-decoration: none;
    transition: background var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  }
  .hs-form .hs-submit .hs-button:hover { background: var(--cw-burgundy-dark); }
  .hs-form .hs-submit .hs-button:active { transform: translateY(1px); }
  .hs-form .hs-error-msg, .hs-form .hs-error-msgs label { color: #c23300; font-size: 12px; font-weight: var(--fw-medium); }
  .hs-form .legal-consent-container { font-size: 11px; color: var(--fg-3); line-height: 1.5; }
  .hs-form .legal-consent-container a { color: var(--fg-2); text-decoration: underline; }
  .hs-form .hs-richtext { font-size: 12px; color: var(--fg-3); margin-bottom: 8px; }
  .form-card--light .hs-input { padding: 10px 12px; font-size: 14px; }
  .form-card--light .hs-form .hs-submit .hs-button { padding: 12px 22px; font-size: 15px; }

  /* ===== RESPONSIVE SCALING (added) ===== */
  /* Shapes scale with viewport so they stay in the margins on any device */
  @media (max-width: 760px){
    .hero-shape-a{width:clamp(150px,42vw,360px)!important;height:clamp(150px,42vw,360px)!important;top:-9vw!important;right:-9vw!important}
    .hero-shape-b{width:clamp(120px,32vw,240px)!important;height:clamp(120px,32vw,240px)!important;left:-12vw!important}
    .edge-shape{width:clamp(120px,34vw,280px)!important;height:clamp(120px,34vw,280px)!important;opacity:.5!important}
    .final-shape{width:clamp(160px,46vw,320px)!important;height:clamp(160px,46vw,320px)!important}
  }
  /* App-preview window: clip its cell so the scaled artboard never overflows */
  @media (max-width: 960px){
    .preview-grid{overflow:hidden;grid-template-columns:minmax(0,1fr)!important}
    .preview-tabs, .preview-window{min-width:0}
  }
  .pw-screen{overflow:hidden}
  /* Footer: collapse to one column on phones + break long links */
  .footer-col a, .footer-partners a{overflow-wrap:anywhere}
  .footer-legal, .footer-links{flex-wrap:wrap}
  .fb-logo{flex-wrap:wrap}
  @media (max-width: 560px){
    .footer-grid{grid-template-columns:1fr!important}
  }