/* Our Services / What We Do Best (uit de homepage-test :8150, 11 nov 2026). Alles onder .sfs. */
.sfs{--ease:cubic-bezier(.22,1,.36,1);--line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.13);position:relative;padding:clamp(80px,10vw,140px) 0;background:transparent;color:#F4F5FA;font-family:Roboto,system-ui,sans-serif}
.sfs-wrap{width:min(1260px,100% - 32px);margin-inline:auto}
.sfs-head{display:grid;justify-items:center;text-align:center;gap:20px;margin-bottom:28px}
.sfs-tag{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font:600 11px/1 Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#ff8a92;background:color-mix(in srgb,#E83642 11%,transparent);border:1px solid color-mix(in srgb,#E83642 28%,transparent)}
.sfs-tag i{width:6px;height:6px;border-radius:50%;background:#E83642;box-shadow:0 0 10px #E83642}
.sfs-h2{margin:0;font:800 clamp(40px,5.6vw,84px)/1.02 Poppins,sans-serif;letter-spacing:-.045em;word-spacing:.04em;color:#fff}
.sfs-grad{background:linear-gradient(95deg,#E83642,#FF8A3D 60%,#ffd29a);-webkit-background-clip:text;background-clip:text;color:transparent}
.sfs-sub{margin:0;max-width:520px;font-size:17px;line-height:1.6;color:#A9AEC4}
.sfs-grid{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.sfs-card{--c:#E83642;--mx:50%;--my:120%;position:relative;display:grid;align-content:start;gap:10px;padding:22px 20px 20px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));overflow:hidden;isolation:isolate;color:inherit;text-decoration:none;transition:border-color .6s,transform .5s var(--ease)}
.sfs-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s;background:radial-gradient(340px circle at var(--mx) var(--my),color-mix(in srgb,var(--c) 22%,transparent),transparent 60%)}
.sfs-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(220px circle at var(--mx) var(--my),color-mix(in srgb,var(--c) 90%,transparent),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.sfs-grid.lit .sfs-card::after{opacity:1}
.sfs-grid.lit .sfs-card::before{opacity:.55}
.sfs-card:hover{border-color:color-mix(in srgb,var(--c) 50%,transparent);transform:translateY(-4px)}
.sfs-card:hover::before,.sfs-card.hot::before{opacity:1}
.sfs-card.hot{border-color:color-mix(in srgb,var(--c) 40%,transparent)}
.sfs-card .ic{position:relative;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:4px;background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,transparent);transition:transform .6s var(--ease),box-shadow .5s}
.sfs-card .ic img{width:30px;height:30px;animation:sfsIcf 5s ease-in-out infinite;animation-delay:calc(var(--i) * -.55s)}
.sfs-card.hot .ic{box-shadow:0 0 24px -6px var(--c);transform:scale(1.06)}
@keyframes sfsIcf{50%{transform:translateY(-3px) rotate(-4deg)}}
.sfs-card h3{margin:0;font:600 16px/1.25 Poppins,sans-serif;letter-spacing:-.01em;color:#fff}
.sfs-card p{margin:0;font-size:13.5px;line-height:1.45;color:#A9AEC4}
.sfs-card .ar{position:absolute;top:22px;right:20px;color:var(--c);font-style:normal;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .4s var(--ease)}
.sfs-card:hover .ar{opacity:1;transform:none}
.sfs-card .wm{position:absolute;right:-26px;top:-22px;width:130px;height:130px;z-index:-1;opacity:.05;filter:blur(.5px);transform:rotate(-12deg) scale(.92);transition:opacity .7s,transform 1.1s var(--ease);pointer-events:none}
.sfs-card .orb{position:absolute;right:-28px;top:-24px;width:134px;height:134px;z-index:-1;border-radius:50%;border:1px dashed color-mix(in srgb,var(--c) 40%,transparent);opacity:.25;transition:opacity .7s;animation:sfsSpin 30s linear infinite;animation-delay:calc(var(--i) * -3s)}
.sfs-card .orb::after{content:"";position:absolute;left:50%;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
.sfs-card:hover .wm,.sfs-card.hot .wm{opacity:.13;transform:rotate(-12deg) scale(1)}
.sfs-card:hover .orb,.sfs-card.hot .orb{opacity:1}
@keyframes sfsSpin{to{transform:rotate(360deg)}}
@media (max-width:1100px){.sfs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.sfs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sfs-card{padding:18px 16px}}
@media (prefers-reduced-motion:reduce){.sfs *,.sfs *::before,.sfs *::after{animation:none!important;transition:none!important}}

/* Filters (Digital Foundation, Customer Growth, Customer Experience, Smart Business) */
.sfs-filters{position:relative;display:flex;gap:4px;padding:5px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);width:max-content;max-width:100%;overflow-x:auto;margin:0 auto 26px;scrollbar-width:none}
.sfs-filters::-webkit-scrollbar{display:none}
.sfs-filters button{position:relative;z-index:1;height:40px;padding:0 16px;border:0;border-radius:12px;background:none;font:500 14px Poppins,sans-serif;color:#A9AEC4;white-space:nowrap;cursor:pointer;transition:color .4s}
.sfs-filters button:hover,.sfs-filters button.on{color:#fff}
.sfs-pill{position:absolute;top:5px;left:5px;height:40px;width:0;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));border:1px solid var(--line-2);transition:left .6s var(--ease),width .6s var(--ease)}
.sfs-card{transition:border-color .6s,transform .5s var(--ease),opacity .5s,filter .5s}
.sfs-card.dim{opacity:.22;filter:grayscale(1)}
@media (max-width:720px){.sfs-filters{width:100%;justify-content:flex-start}}