/* ========================================
   FIXENTRA – SERVICES + HOMEPAGE (definitief)
   ======================================== */

/* -------- Design tokens -------- */
:root{
  --fx-surface:#0E1220;
  --fx-border:rgba(255,255,255,.08);
  --fx-radius:22px;
  --fx-shadow:0 12px 40px rgba(0,0,0,.35);

  --fx-text:#F6F8FF;
  --fx-sub:#E6EBF6;
  --fx-seo:#D8DFF0;

  --fx-accent-a:#A175FF;
  --fx-accent-b:#B792FF;
  --fx-accent-c:#FFD347;

  --fx-gap:26px;
}

/* -------- Layout container (contact/FAQ blokken) -------- */
.fixentra-services{
  display:grid;
  row-gap:clamp(56px,6vw,96px);
  padding-block:clamp(24px,4vw,40px);
}
.fixentra-services > .service.hero{ margin:0 !important; }

/* -------- Service kaart -------- */
.fixentra-services .service.hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(300px,1.05fr) minmax(280px,.95fr);
  gap:clamp(20px,3.2vw,44px);
  padding:clamp(24px,4.6vw,56px);
  border:1px solid var(--fx-border);
  border-radius:var(--fx-radius);
  background:
    radial-gradient(80% 140% at var(--glow-x,50%) var(--glow-y,15%), rgba(255,211,71,.12), transparent 62%),
    radial-gradient(80% 100% at 0% 0%, rgba(161,117,255,.18), transparent 56%),
    var(--fx-surface);
  box-shadow:var(--fx-shadow);
  color:var(--fx-text);
  overflow:hidden;                 /* scanlines blijven binnen de kaart */
  isolation:isolate;
}
.fixentra-services .service.hero.service--mirror{
  grid-template-columns:minmax(280px,.95fr) minmax(300px,1.05fr);
}

/* Scanlines – strikt binnen de kaart */
.fixentra-services .service.hero::after{
  content:"";
  position:absolute; inset:0;              /* << niet meer buiten de kaart */
  background:repeating-linear-gradient(
    12deg, rgba(255,255,255,.03) 0 2px, transparent 2px 42px
  );
  pointer-events:none; z-index:0;
}

/* -------- Typografie -------- */
.fixentra-services .service .service-body{ z-index:1; align-self:center; }
.fixentra-services .service .service-body h2{
  margin:.1em 0 .35em;
  font-size:clamp(28px,3.8vw,44px);
  line-height:1.12; letter-spacing:.2px;
}
.fixentra-services .service .service-body .sub{
  margin:0 0 18px; color:var(--fx-sub);
  max-width:72ch; font-size:clamp(16.5px,2vw,19px);
}
.fixentra-services .service .service-body .seo{
  margin:8px 0 0; color:var(--fx-seo);
  max-width:75ch; font-size:clamp(15.5px,1.9vw,18px);
}

/* -------- Benefits: vink + pulse (hover) -------- */
.fixentra-services .service .benefits{
  display:grid; gap:10px; margin:14px 0 18px; overflow:visible;
}
.fixentra-services .service .benefit{
  display:flex; align-items:center; gap:10px;
  font-size:clamp(15.5px,1.8vw,17.5px);
}
.fixentra-services .service .benefit .dot{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg, var(--fx-accent-a), var(--fx-accent-c)) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transform:translateZ(0) scale(1) !important;
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
  color:transparent !important; line-height:0; font-size:0; overflow:visible;
}
.fixentra-services .service .benefit .dot::after{
  content:""; display:block; width:12px; height:12px; margin:auto; background:#fff;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2 4.8 12a1.2 1.2 0 1 1 1.7-1.7l2.8 2.8 8-8a1.2 1.2 0 1 1 1.7 1.7l-9.7 9.7a1.2 1.2 0 0 1-1.7 0z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2 4.8 12a1.2 1.2 0 1 1 1.7-1.7l2.8 2.8 8-8a1.2 1.2 0 1 1 1.7 1.7l-9.7 9.7a1.2 1.2 0 0 1-1.7 0z"/></svg>') center/contain no-repeat;
}
.fixentra-services .service .benefit .dot::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle, rgba(255,211,71,.22) 0%, rgba(161,117,255,.18) 55%, transparent 65%);
  opacity:0; transform:scale(1); transition:opacity .28s ease, transform .28s ease;
}
@keyframes fx-glow{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.65);opacity:0}}
@media (hover:hover){
  .fixentra-services .service .benefit:hover .dot{
    transform:scale(1.12) !important;
    box-shadow:0 0 0 8px rgba(255,211,71,.10), 0 0 0 18px rgba(161,117,255,.10), 0 4px 14px rgba(0,0,0,.35);
    filter:saturate(1.05);
  }
  .fixentra-services .service .benefit:hover .dot::before{
    opacity:1; animation:fx-glow 1.5s ease-out infinite;
  }
}

/* -------- CTA’s -------- */
.fixentra-services .service .cta-row{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:6px;
}
.fixentra-services .service a{ color:#fff; text-decoration:none !important; }
.fixentra-services .service .btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border-radius:16px; font-weight:700; line-height:1;
  border:none; cursor:pointer;
  transition:transform .25s cubic-bezier(.22,.72,.27,.99), box-shadow .25s ease, background-position .45s ease;
}
.fixentra-services .service .btn-primary{
  background:linear-gradient(135deg,var(--fx-accent-a) 0%,var(--fx-accent-b) 30%,var(--fx-accent-c) 100%);
  background-size:200% 200%;
  box-shadow:0 10px 24px rgba(161,117,255,.28), 0 14px 30px rgba(255,211,71,.22);
}
.fixentra-services .service .btn-primary:hover{
  transform:translateY(-2px) scale(1.04);
  background-position:100% 0%;
}
.fixentra-services .service .btn-outline{
  background:transparent; color:#fff; border:2px solid transparent; border-radius:16px; position:relative;
}
.fixentra-services .service .btn-outline::before{
  content:""; position:absolute; inset:0; border-radius:16px; padding:2px;
  background:linear-gradient(135deg,var(--fx-accent-a),var(--fx-accent-c));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.fixentra-services .service .btn-outline:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 0 22px rgba(255,211,71,.24), 0 0 28px rgba(161,117,255,.22);
}

/* -------- Iconen in kaarten -------- */
.fixentra-services .service .service-media{
  position:relative; width:100%; max-width:380px; aspect-ratio:1/1;
  margin-inline:auto; z-index:1; align-self:center; justify-self:center;
}
.fixentra-services .service .icon-stroke{
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

/* -------- Responsive kaarten -------- */
@media (max-width:980px){
  .fixentra-services .service.hero,
  .fixentra-services .service.hero.service--mirror{
    grid-template-columns:1fr; text-align:center;
  }
  .fixentra-services .service .service-media{ max-width:260px; margin:16px auto 0; }
  .fixentra-services .service .cta-row{ justify-content:center; }
}

/* ========================================================
   HERO (Homepage)
   ======================================================== */
.hero .hero-inner{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(20px,3vw,40px); align-items:center;
}
@media (max-width:980px){ .hero .hero-inner{ grid-template-columns:1fr; text-align:center; } }
.hero h1{ font-size:clamp(28px,4vw,54px); line-height:1.08; margin:.1em 0 .2em; }
.hero .lead{ color:var(--fx-seo); font-size:clamp(16px,2vw,19px); max-width:70ch; margin-inline:auto; }
.hero .cta-row{ justify-content:center; }

/* Afbeelding rechts, kleiner, afgerond */
.hero-visual{ position:relative; display:grid; place-items:center; }
.hero-visual img{
  width:100%; max-width:560px; height:auto;
  border-radius:20px;                                /* << afgeronde hoeken */
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

/* ========================================================
   ZO WERKT HET – nummers met pulse (hover/focus)
   ======================================================== */
.process-steps{
  list-style:none; display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.2vw,28px); margin:0; padding:0;
}
@media(max-width:1100px){ .process-steps{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){  .process-steps{ grid-template-columns:1fr; } }

.step{
  background:rgba(255,255,255,.02); border:1px solid var(--fx-border); border-radius:18px;
  padding:clamp(18px,2.2vw,26px); text-align:center; transition:transform .3s ease, box-shadow .3s ease;
}
.step:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(161,117,255,.25); }

/* Cirkel met gradient + pulse */
.num-wrap{
  --size:96px;
  width:var(--size); height:var(--size); margin:0 auto 14px; border-radius:999px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--fx-accent-a),var(--fx-accent-c));
  box-shadow:0 10px 24px rgba(161,117,255,.28), 0 14px 30px rgba(255,211,71,.22);
  position:relative; overflow:visible;
}
.num-wrap::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle, rgba(255,211,71,.22) 0%, rgba(161,117,255,.18) 55%, transparent 65%);
  opacity:0; transform:scale(1); transition:opacity .28s ease, transform .28s ease;
}
.step:hover .num-wrap::before,
.step:focus-within .num-wrap::before{
  opacity:1; animation:fx-glow 1.5s ease-out infinite;
}
.num{ font-weight:900; font-size:clamp(30px,3.2vw,36px); color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.25); }
.step-title{ margin:.3em 0 .25em; font-size:clamp(18px,2vw,22px); font-weight:800; }
.step-text{ margin:0; color:var(--fx-seo); font-size:clamp(15px,1.8vw,17.5px); min-height:72px; }

/* ========================================================
   SOCIAL ICONS (groter, klikbaar)
   ======================================================== */
.social-icons{ display:flex; gap:14px; margin:14px 0 8px; flex-wrap:wrap; }
.social{
  display:grid; place-items:center; width:52px; height:52px; border-radius:999px;
  background:linear-gradient(135deg, rgba(161,117,255,.18), rgba(255,211,71,.18));
  border:1px solid rgba(255,255,255,.10);
  transition:transform .2s ease, box-shadow .2s ease;
}
.social:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.35); }
.social img{ width:28px; height:28px; }

/* ========================================================
   CARROUSEL (3 zichtbaar)
   ======================================================== */
.carousel{ position:relative; width:100%; margin-top:20px; display:flex; flex-direction:column; align-items:center; }
.carousel-viewport{ overflow:hidden; width:100%; display:flex; justify-content:center; }
.carousel-track{
  display:flex; justify-content:center; gap:var(--fx-gap); width:100%;
  will-change:transform; transform:translate3d(0,0,0); transition:transform .45s ease;
  min-height:280px;
}
.service-card{
  flex:0 0 calc((100% - 2*var(--fx-gap))/3);
  display:grid; justify-items:center; text-align:center;
  padding:20px; border:1px solid rgba(255,255,255,.06); border-radius:18px;
  background:rgba(255,255,255,.02); transition:transform .28s ease, box-shadow .28s ease;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(161,117,255,.20); }
.service-card .icon{ width:150px; height:150px; display:grid; place-items:center; }
.service-card img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 22px rgba(0,0,0,.35)); }
.service-card h3{ margin:.6em 0 0; font-size:clamp(16px,2vw,18px); }
.service-card h3 a{ color:#fff; text-decoration:none; }
.service-card h3 a:hover{ color:var(--fx-accent-c); }

.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:linear-gradient(135deg,var(--fx-accent-a),var(--fx-accent-c));
  border:none; border-radius:50%; width:46px; height:46px;
  color:#0b0f1a; font-weight:900; font-size:26px; cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.35); z-index:2;
  transition:transform .25s ease, box-shadow .25s ease;
}
.carousel-btn:hover{ transform:translateY(-50%) scale(1.08); box-shadow:0 12px 26px rgba(161,117,255,.25); }
.carousel-btn.prev{ left:-20px; } .carousel-btn.next{ right:-20px; }
@media(max-width:1280px){ .carousel-btn.prev{ left:0 } .carousel-btn.next{ right:0 } }
@media(max-width:1000px){ .service-card{ flex:0 0 calc((100% - var(--fx-gap))/2); } }
@media(max-width:640px){  .service-card{ flex:0 0 100%; } .carousel-btn{ display:none; } }

/* ========================================================
   Belangrijk: verwijder globale overflow overrides
   (voorkomt strepen over de hele pagina)
   ======================================================== */
.fx-home, .fx-home *,
body, main, section{ overflow:initial !important; }

/* Alleen waar nodig zichtbaarheid toestaan */
.carousel-viewport, .carousel-track{ overflow:visible !important; height:auto !important; }

/* Extra zekerheid: kaarten clippen altijd netjes */
.fx-home .service.hero{ overflow:hidden !important; border-radius:var(--fx-radius); }

/* No-JS fallback (GSAP verzorgt reveals) – laat content zichtbaar */
.reveal{ opacity:1 !important; transform:none !important; }

/* ========================================================
   FIXENTRA — UITBREIDINGEN (alle secties dezelfde look)
   ======================================================== */

/* 1) Zelfde kaart-achtergrond, layout en glows voor ALLE .service blokken */
.fixentra-services .service{
  position:relative;
  display:grid;
  grid-template-columns:minmax(300px,1.05fr) minmax(280px,.95fr);
  gap:clamp(20px,3.2vw,44px);
  padding:clamp(24px,4.6vw,56px);
  border:1px solid var(--fx-border);
  border-radius:var(--fx-radius);
  background:
    radial-gradient(80% 140% at var(--glow-x,50%) var(--glow-y,15%), rgba(255,211,71,.12), transparent 62%),
    radial-gradient(80% 100% at 0% 0%, rgba(161,117,255,.18), transparent 56%),
    var(--fx-surface);
  box-shadow:var(--fx-shadow);
  color:var(--fx-text);
  overflow:hidden;
  isolation:isolate;
}
.fixentra-services .service.service--mirror{
  grid-template-columns:minmax(280px,.95fr) minmax(300px,1.05fr);
}

/* Scanlines op alle kaarten (voorheen alleen .hero) */
.fixentra-services .service::after{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(12deg, rgba(255,255,255,.03) 0 2px, transparent 2px 42px);
  pointer-events:none; z-index:0;
}

/* Subtiele hover-lift + border-glow (modern, niet opdringerig) */
@media (hover:hover){
  .fixentra-services .service:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
  }
  .fixentra-services .service:hover::before{
    content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:1;
    background:linear-gradient(135deg, rgba(161,117,255,.25), rgba(255,211,71,.20));
    -webkit-mask:linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask-composite:xor; mask-composite:exclude;
    padding:1px; opacity:.85;
  }
}

/* 2) Media micro-parallax en tilt (CSS-only, JS optioneel via ScrollTrigger) */
.fixentra-services .service .service-media{ perspective:900px; }
.fixentra-services .service .service-media .icon-stroke{
  transform-style:preserve-3d; transition:transform .4s ease;
}
@media (hover:hover){
  .fixentra-services .service:hover .service-media .icon-stroke{
    transform:translateY(-4px) rotateX(6deg) rotateY(-6deg);
  }
}

/* 3) Typo-accenten voor koppen en subregels */
.fixentra-services .service .service-body h2{
  background:linear-gradient(135deg, var(--fx-accent-c), var(--fx-accent-a));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fixentra-services .service .service-body .sub{
  opacity:.95;
}

/* 4) KPI-pills (optioneel te gebruiken in HTML als .kpis > .pill) */
.kpis{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 4px; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:linear-gradient(135deg, rgba(161,117,255,.18), rgba(255,211,71,.18));
  border:1px solid rgba(255,255,255,.10); font-weight:700; font-size:14px; color:#fff;
}

/* 5) Sticky CTA knop (globaal inzetbaar: voeg <a class="btn-floating"> toe) */
.btn-floating{
  position:fixed; right:22px; bottom:22px; z-index:999;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px; border-radius:999px; font-weight:800;
  background:linear-gradient(135deg, var(--fx-accent-a), var(--fx-accent-c));
  color:#0b0f1a; box-shadow:0 12px 40px rgba(0,0,0,.45);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-floating:hover{ transform:translateY(-2px) scale(1.04); filter:saturate(1.05); }
@media (max-width:820px){ .btn-floating{ right:16px; bottom:16px; padding:12px 16px; } }

/* 6) FAQ-blokken (modern, harmonica-ready maar ook mooi statisch) */
.faq{ display:grid; gap:12px; margin-top:16px; }
.faq-item{
  border:1px solid var(--fx-border); border-radius:16px; padding:16px 18px;
  background:rgba(255,255,255,.02);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.faq-item:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(161,117,255,.20); }
.faq-q{ font-weight:800; margin:0 0 6px; }
.faq-a{ color:var(--fx-seo); margin:0; }

/* 7) CTA-rij: lichte spacing-upgrade en focus states (a11y + modern feel) */
.fixentra-services .service .cta-row{ gap:16px; }
.fixentra-services .service .btn:focus-visible{
  outline:2px solid var(--fx-accent-c); outline-offset:3px;
}

/* 8) Extra responsieve verfijningen voor kleinere schermen */
@media (max-width:980px){
  .fixentra-services .service,
  .fixentra-services .service.service--mirror{ grid-template-columns:1fr; text-align:center; }
  .fixentra-services .service .service-media{ max-width:280px; margin:16px auto 0; }
}

/* 9) Optionele “feature grid” binnen service-body (3 kolommen, auto wrap) */
.feature-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(12px,2vw,18px); margin:12px 0 2px;
}
@media (max-width:900px){ .feature-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .feature-grid{ grid-template-columns:1fr; } }
.feature{
  border:1px solid var(--fx-border); border-radius:14px; padding:12px 14px;
  background:rgba(255,255,255,.02); color:var(--fx-sub); font-size:15px;
}

/* 10) Micro-motion op benefits-regels (harmoniseert met bestaande pulse) */
@media (hover:hover){
  .fixentra-services .service .benefit{
    transition:transform .18s ease;
  }
  .fixentra-services .service .benefit:hover{
    transform:translateX(2px);
  }
}

/* 11) Veiligheid: harde clipping voor alle service-kaarten (scrol-artefacts) */
.fixentra-services .service{ -webkit-mask-image:radial-gradient(white, black); }

/* =========================================================
   FIXENTRA — Interactives: Count-Up, FAQ, Compare
   ========================================================= */

/* 1) COUNT-UP — nette cijferopmaak */
.fixentra-services [data-count-to]{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing:.3px;
  display:inline-block;
  min-width:2ch; /* voorkomt verspringen bij 0 -> 10 -> 100 */
}

/* 4) FAQ — basisstijl voor animated accordion */
.fixentra-services [data-faq]{
  display:grid; gap:12px; margin-top:16px;
}
.fixentra-services [data-faq-item]{
  border:1px solid var(--fx-border);
  border-radius:16px;
  background:rgba(255,255,255,.02);
  overflow:hidden; /* panel clip */
  transition:box-shadow .25s ease, transform .25s ease;
}
.fixentra-services [data-faq-item]:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(161,117,255,.18);
}
.fixentra-services [data-faq-toggle]{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 16px; color:#fff; text-decoration:none;
}
.fixentra-services [data-faq-toggle] span{
  font-weight:800;
}
.fixentra-services [data-faq-toggle]::after{
  content:"";
  flex:0 0 20px; height:20px;
  background:#fff;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="black" d="M7.4 9.4a1 1 0 0 1 1.4 0L12 12.6l3.2-3.2a1 1 0 1 1 1.4 1.4l-3.9 3.9a1 1 0 0 1-1.4 0L7.4 10.8a1 1 0 0 1 0-1.4z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="black" d="M7.4 9.4a1 1 0 0 1 1.4 0L12 12.6l3.2-3.2a1 1 0 1 1 1.4 1.4l-3.9 3.9a1 1 0 0 1-1.4 0L7.4 10.8a1 1 0 0 1 0-1.4z"/></svg>') center/contain no-repeat;
  transition:transform .25s ease, opacity .2s ease;
  opacity:.9;
}
.fixentra-services [data-faq-item].is-open [data-faq-toggle]::after{
  transform:rotate(180deg);
}
.fixentra-services [data-faq-panel]{
  height:0; overflow:hidden;
  padding:0 16px; /* visueel mooi zodra open */
}
.fixentra-services [data-faq-panel] > *{
  margin:12px 0 16px; color:var(--fx-seo);
}

/* 7) BEFORE/AFTER — sliderbasis, responsief en toegankelijk */
.fixentra-services [data-compare]{
  position:relative;
  display:block;
  width:100%;
  max-width:920px;
  margin:18px auto 4px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--fx-border);
  background:rgba(255,255,255,.02);
  user-select:none;
}
.fixentra-services [data-compare] img{
  display:block; width:100%; height:auto;
  object-fit:cover;
}
.fixentra-services [data-compare] [data-compare-top]{
  position:absolute; inset:0;
  clip-path:inset(0 50% 0 0); /* start in het midden */
  transition:clip-path .08s linear;
}
.fixentra-services [data-compare-handle]{
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; background:linear-gradient(180deg, var(--fx-accent-a), var(--fx-accent-c));
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
  cursor:ew-resize;
}
.fixentra-services [data-compare-handle] span{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:38px; height:38px; border-radius:999px;
  background:linear-gradient(135deg, var(--fx-accent-a), var(--fx-accent-c));
  box-shadow:0 10px 22px rgba(0,0,0,.35);
}
@media (max-width:680px){
  .fixentra-services [data-compare]{ border-radius:14px; }
  .fixentra-services [data-compare-handle] span{ width:32px; height:32px; }
}