:root {
  --blue: #0083c6;
  --deep: #014e9b;
  --ink: #14334d;
  --muted: #607387;
  --amber: #ff9e1b;
  --pale: #f2f7fa;
  --line: #dde7ee;
  --radius: 18px;
  --r-card: 22px;
  --r-field: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, Arial, sans-serif;
  background: white;
  line-height: 1.65;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
summary,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  line-height: 1.12;
  letter-spacing: -0.045em;
}
h1 {
  font-size: clamp(44px, 4.7vw, 72px);
  font-weight: 750;
}
h2 {
  font-size: clamp(32px, 3.4vw, 49px);
  font-weight: 700;
}
h3 {
  font-size: 23px;
  letter-spacing: -0.025em;
}
p {
  color: var(--muted);
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 5px;
}
.wrap {
  max-width: 1240px;
  margin: auto;
  padding: 0 38px;
}
.section {
  padding: 100px 0;
}
.eyebrow {
  display: flex;
  gap: 10px;
  align-items: center;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 2px;
  color: var(--deep);
  margin-bottom: 20px;
}
.eyebrow:before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--amber);
}
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  align-items: end;
  margin-bottom: 42px;
}
.section-head h2 {
  max-width: 630px;
}
.section-head p {
  max-width: 360px;
  font-size: 15px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--amber);
  color: #083e71;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 0 #e0830b;
  transition:
    transform 0.25s var(--ease),
    background 0.2s,
    box-shadow 0.25s var(--ease);
}
.btn:hover {
  background: #ffb647;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #e0830b, 0 14px 24px -10px #e0830b99;
}
.btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #e0830b;
}
.btn.blue {
  background: var(--deep);
  color: white;
  box-shadow: 0 4px 0 #013a74;
}
.btn.blue:hover {
  background: var(--blue);
}
.btn.outline {
  background: transparent;
  box-shadow: none;
  border-color: #ccdce9;
  color: var(--deep);
}
.btn.white {
  background: white;
  box-shadow: 0 4px 0 #c9dceb;
  color: var(--deep);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--deep);
}
.text-link:hover {
  color: var(--blue);
}
.arrow {
  font-size: 20px;
  line-height: 1;
}
.topbar {
  background: #f4f7fa;
  border-bottom: 1px solid #e9eff3;
  font-size: 10px;
  color: #4d687f;
}
.topbar .wrap {
  height: 31px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar .right {
  display: flex;
  gap: 23px;
}
.topbar a:hover {
  text-decoration: underline;
}
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.nav-inner {
  height: 83px;
  display: flex;
  align-items: center;
  gap: 30px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}
.brand img {
  width: 145px;
  height: 42px;
  object-fit: contain;
}
.brand span {
  border-left: 1px solid #d7e2e9;
  padding-left: 15px;
  line-height: 1.1;
  font-size: 14px;
  font-weight: 700;
  color: var(--deep);
}
.brand span small {
  display: block;
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 500;
  margin-top: 4px;
  color: var(--muted);
}
.nav-links {
  display: flex;
  gap: 25px;
  align-items: center;
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--blue);
}
.nav-cta {
  padding: 11px 18px;
  font-size: 12px;
}
.menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  font-size: 24px;
  color: var(--deep);
}
.hero {
  background: linear-gradient(115deg, #024b93 0%, #027bbb 65%, #16a5d4 100%);
  color: white;
  position: relative;
  overflow: hidden;
}
.hero:after {
  content: "";
  position: absolute;
  width: 690px;
  height: 690px;
  border: 1px solid #ffffff17;
  border-radius: 50%;
  right: -220px;
  top: -190px;
  box-shadow:
    0 0 0 85px #ffffff06,
    0 0 0 170px #ffffff04;
  pointer-events: none;
}
.hero-inner {
  min-height: 638px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 35px;
  padding-top: 58px;
  padding-bottom: 70px;
  position: relative;
  z-index: 1;
}
.hero .eyebrow {
  color: #cdeafb;
  font-size: 10px;
  letter-spacing: 1.8px;
}
.hero h1 {
  max-width: 520px;
}
.hero h1 em {
  font-style: normal;
  color: #ffb445;
}
.hero .intro {
  max-width: 440px;
  color: #d5eaf6;
  line-height: 1.7;
  font-size: 16px;
  margin: 26px 0 29px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 23px;
  flex-wrap: wrap;
}
.hero .text-link {
  color: white;
}
.hero-note {
  display: flex;
  gap: 18px;
  color: #cae8f8;
  font-size: 10px;
  margin-top: 26px;
}
.hero-note span:before {
  content: "✓";
  color: #ffbb51;
  margin-right: 6px;
}
.hero-visual {
  position: relative;
  padding: 50px 0 40px;
  min-width: 0;
}
.desktop {
  border: 8px solid #253b4f;
  border-bottom-width: 13px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 25px 65px #00315c60;
  position: relative;
  overflow: hidden;
}
.desktop-top {
  height: 25px;
  background: #f1f5f8;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
}
.desktop-top i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b6c7d5;
}
.desktop-top span {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  color: #8296a8;
  font-size: 7px;
  pointer-events: none;
}
.desktop img {
  width: 100%;
  height: auto;
}
.laptop-foot {
  height: 12px;
  background: linear-gradient(#d2dde4, #8497aa);
  border-radius: 2px 2px 50% 50%;
  width: 110%;
  margin-left: -5%;
  box-shadow: 0 16px 20px #003b6130;
}
.floating-label {
  position: absolute;
  top: 13px;
  right: 3px;
  background: #fff;
  color: var(--deep);
  font-size: 11px;
  padding: 9px 15px;
  border-radius: 999px;
  box-shadow: 0 8px 25px #00406524;
  display: flex;
  align-items: center;
  gap: 8px;
}
.green-dot {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background: #42ac80;
  display: inline-block;
}
.hero-product-tag {
  margin-top: 24px;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: #d4edf8;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-product-tag img {
  width: 89px;
  border-radius: 5px;
}
.hero-phone {
  position: absolute;
  right: -18px;
  bottom: 4px;
  width: 132px;
  transform: rotate(5deg);
  filter: drop-shadow(0 18px 15px #00325055);
}
.phone {
  width: 100%;
  aspect-ratio: 0.475;
  border: 5px solid #172733;
  border-radius: 28px;
  background: white;
  box-shadow:
    inset 0 0 0 1px #62727f,
    0 13px 25px #13344e1c;
  overflow: hidden;
  position: relative;
}
.phone .status {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  height: 7.2%;
  background: #108fca;
  color: #08151e;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8%;
  font-size: clamp(7px, 0.75vw, 11px);
  font-weight: 650;
}
.phone .island {
  position: absolute;
  z-index: 4;
  top: 2.2%;
  left: 36%;
  width: 29%;
  height: 3.3%;
  border-radius: 20px;
  background: #111b23;
}
.phone .screen {
  position: absolute;
  top: 7.1%;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  background: white;
}
.phone .screen img {
  position: absolute;
  max-width: none;
  width: 100%;
  top: -7.6%;
  left: 0;
}
.phone .home-indicator {
  position: absolute;
  z-index: 4;
  bottom: 1%;
  left: 35%;
  width: 30%;
  height: 3px;
  border-radius: 10px;
  background: #172733;
}
.phone.presence .screen img,
.phone.menu .screen img {
  width: 123.7%;
  left: -11.8%;
  top: -17.8%;
}
.phone.presence .screen,
.phone.menu .screen {
  bottom: 2.4%;
}
.phone.help .screen img {
  top: -7.6%;
}
.trusted {
  border-bottom: 1px solid var(--line);
  padding: 28px 0 31px;
}
.trusted-label {
  font-size: 11px;
  text-align: center;
  color: #698096;
  margin-bottom: 23px;
}
.trusted-label strong {
  color: var(--deep);
}
.logo-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 35px;
}
.logo-row img {
  width: 125px;
  height: 45px;
  object-fit: contain;
}
.logo-row .square-logo {
  width: 75px;
  height: 57px;
}
.product-section {
  background: white;
}
.product-tabs {
  display: inline-flex;
  max-width: 100%;
  position: relative;
  gap: 4px;
  margin-top: 34px;
  padding: 6px;
  background: var(--pale);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
}
.product-tabs::-webkit-scrollbar {
  display: none;
}
.product-tabs button {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: #6b8193;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  transition: color 0.25s;
}
.product-tabs button:hover {
  color: var(--deep);
}
.product-tabs button[aria-selected="true"] {
  color: var(--deep);
}
.product-panel {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
  align-items: center;
  padding-top: 42px;
}
.product-copy .number {
  font-size: 11px;
  font-weight: 700;
  color: #8096a7;
  margin-bottom: 20px;
  display: block;
}
.product-copy h3 {
  font-size: 32px;
  max-width: 360px;
}
.product-copy p {
  font-size: 14px;
  margin: 20px 0;
}
.checks {
  padding: 0;
  list-style: none;
  font-size: 13px;
  margin: 22px 0 28px;
}
.checks li {
  padding: 7px 0;
  display: flex;
  gap: 11px;
}
.checks li:before {
  content: "✓";
  color: var(--blue);
  font-weight: 800;
}
.product-image {
  background: #eaf4fa;
  border: 1px solid #deedf5;
  border-radius: 28px;
  padding: 24px;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.product-image > img {
  max-height: 410px;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 14px 35px #194a711c;
}
.image-zoom {
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  cursor: zoom-in;
}
.image-zoom img {
  border-radius: 6px;
  width: 100%;
  box-shadow: 0 10px 26px #244a7520;
}
.caption {
  font-size: 10px;
  color: #6b899c;
  position: absolute;
  bottom: 7px;
  left: 24px;
}
.module-link {
  margin-top: 40px;
  padding-top: 23px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.module-link p {
  font-size: 13px;
}
.light {
  background: var(--pale);
}
.branch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 19px;
}
.branch-card {
  display: block;
  background: white;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 4px 12px #183b5905;
}
.branch-image {
  height: 205px;
  overflow: hidden;
}
.branch-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.branch-card:hover img {
  transform: scale(1.05);
}
.branch-body {
  padding: 23px;
}
.branch-body h3 {
  font-size: 20px;
  margin-bottom: 12px;
}
.branch-body p {
  font-size: 12px;
  line-height: 1.7;
  min-height: 60px;
}
.branch-body .text-link {
  margin-top: 18px;
  font-size: 11px;
}
.app-section {
  overflow: hidden;
}
.app-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 85px;
  align-items: center;
}
.phones-stage {
  height: 495px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background: radial-gradient(
    ellipse,
    #e7f5fc 0%,
    #f6fafc 60%,
    transparent 70%
  );
}
.phones-stage .phone {
  width: 190px;
  flex-shrink: 0;
}
.phones-stage .phone:first-child {
  transform: rotate(-7deg) translateY(14px);
}
.phones-stage .phone:nth-child(2) {
  transform: rotate(6deg) translateY(-10px);
}
.app-copy h2 {
  margin-bottom: 22px;
}
.app-copy > p {
  font-size: 15px;
}
.app-icon-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-size: 11px;
  color: var(--muted);
}
.app-icon-line img {
  width: 43px;
  border-radius: 9px;
}
.app-icon-line strong {
  display: block;
  font-size: 13px;
  color: var(--deep);
}
.store-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 25px;
}
.store-btn {
  background: #122d43;
  border: 1px solid #122d43;
  border-radius: 999px;
  color: white;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 8px 16px;
  min-width: 150px;
  transition: transform 0.25s var(--ease), background 0.2s;
}
.store-btn:hover {
  transform: translateY(-2px);
  background: var(--deep);
}
.store-btn svg {
  width: 23px;
  height: 26px;
  fill: currentColor;
}
.store-btn small {
  display: block;
  font-size: 8px;
  line-height: 1.3;
}
.store-btn strong {
  font-size: 15px;
  line-height: 1.3;
}
.fineprint {
  font-size: 10px !important;
  line-height: 1.7;
  margin-top: 16px !important;
  color: #7b8fa0;
}
.app-gallery-link {
  display: inline-block;
  font-size: 12px;
  color: var(--deep);
  border: 0;
  background: transparent;
  margin-top: 18px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.integration-band {
  background: #ecf5fb;
  border-block: 1px solid #e0edf6;
}
.integration-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 75px;
  align-items: center;
}
.integration-copy p {
  font-size: 14px;
  margin: 23px 0;
}
.integration-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.integration-logo {
  height: 105px;
  background: white;
  border: 1px solid #deebf4;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.integration-logo img {
  max-width: 100%;
  max-height: 47px;
  object-fit: contain;
}
.integration-logo span {
  font-size: 18px;
  font-weight: 700;
  color: var(--deep);
}
.customer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.customer-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 350px;
  display: flex;
  align-items: end;
  color: white;
}
.customer-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.customer-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 10%, #062a47e0);
}
.customer-card:hover > img {
  transform: scale(1.03);
}
.customer-copy {
  position: relative;
  z-index: 1;
  padding: 30px;
}
.customer-copy small {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c8e3f4;
}
.customer-copy h3 {
  font-size: 28px;
  margin: 12px 0;
}
.customer-copy p {
  color: #d8e7f2;
  font-size: 13px;
  max-width: 390px;
}
.customer-copy .text-link {
  color: white;
  margin-top: 19px;
}
.all-clients {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 20px;
  margin-top: 42px;
  align-items: center;
}
.all-clients img {
  width: 100%;
  height: 58px;
  object-fit: contain;
}
.service-section {
  background: #f7f9fb;
}
.service-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
}
.service-intro p {
  font-size: 15px;
  margin: 25px 0;
  max-width: 400px;
}
.experience {
  display: flex;
  gap: 20px;
  align-items: center;
  padding-top: 27px;
  border-top: 1px solid #dce6ed;
  margin-top: 35px;
}
.experience strong {
  font-size: 56px;
  line-height: 1;
  color: var(--blue);
  letter-spacing: -3px;
}
.experience span {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.step {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid #dce6ed;
}
.step:first-child {
  padding-top: 0;
}
.step-index {
  font-size: 12px;
  flex: 0 0 31px;
  color: var(--blue);
  padding-top: 5px;
  font-weight: 700;
}
.step h3 {
  font-size: 21px;
  margin-bottom: 10px;
}
.step p {
  font-size: 13px;
}
.faq-layout {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 80px;
}
.faq-intro p {
  font-size: 14px;
  margin-top: 23px;
}
.faq-intro .text-link {
  margin-top: 22px;
}
details {
  border-bottom: 1px solid var(--line);
  padding: 21px 0;
}
details:first-child {
  border-top: 1px solid var(--line);
}
summary {
  list-style: none;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
summary::-webkit-details-marker {
  display: none;
}
summary:after {
  content: "+";
  color: var(--blue);
  font-size: 22px;
  line-height: 1;
}
details[open] summary:after {
  content: "−";
}
details p {
  padding-top: 15px;
  font-size: 13px;
  max-width: 580px;
}
.cta-section {
  padding: 0 0 90px;
}
.cta-box {
  background: linear-gradient(110deg, #014e9b, #008ac9);
  border-radius: 32px;
  padding: 55px 60px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  overflow: hidden;
}
.cta-box:before {
  content: "";
  position: absolute;
  right: 90px;
  top: -155px;
  width: 340px;
  height: 340px;
  border: 35px solid #ffffff07;
  border-radius: 50%;
  pointer-events: none;
}
.cta-box h2 {
  font-size: 39px;
}
.cta-box p {
  color: #d2eaf8;
  font-size: 14px;
  margin-top: 15px;
}
.cta-box .btn {
  flex-shrink: 0;
  z-index: 1;
}
footer {
  background: #f3f6f9;
  border-top: 1px solid var(--line);
  padding: 56px 0 22px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 35px;
}
.footer-brand img {
  width: 160px;
  height: 45px;
  object-fit: contain;
  object-position: left;
}
.footer-brand p {
  font-size: 12px;
  margin: 18px 0;
  max-width: 240px;
}
.footer-grid h3 {
  font-size: 13px;
  letter-spacing: 0;
  margin: 8px 0 18px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 12px;
  color: var(--muted);
}
.footer-links a:hover {
  color: var(--blue);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #dce6ed;
  margin-top: 43px;
  padding-top: 21px;
  font-size: 10px;
  color: #73889b;
}
.subhero {
  padding: 65px 0 62px;
  background: linear-gradient(115deg, #edf6fc, #f7fafc);
  border-bottom: 1px solid var(--line);
}
.breadcrumbs {
  font-size: 11px;
  color: #7b92a5;
  margin-bottom: 23px;
  display: flex;
  gap: 10px;
}
.subhero h1 {
  font-size: clamp(38px, 4vw, 58px);
  max-width: 800px;
}
.subhero p {
  font-size: 16px;
  max-width: 630px;
  margin-top: 23px;
}
.subhero .btn {
  margin-top: 25px;
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  align-items: center;
}
.detail-grid > img {
  border-radius: 15px;
  max-height: 460px;
  width: 100%;
  object-fit: cover;
}
.detail-grid p {
  margin: 20px 0;
  font-size: 15px;
}
.module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.module-card {
  padding: 29px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: white;
}
.module-card .icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #e9f5fc;
  color: var(--blue);
  margin-bottom: 24px;
  border-radius: 50%;
}
.module-card h3 {
  font-size: 22px;
}
.module-card p {
  font-size: 13px;
  margin: 17px 0 22px;
}
.icon svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 75px;
  align-items: start;
}
.contact-info > p {
  font-size: 15px;
  margin: 20px 0 30px;
}
.contact-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.contact-item small {
  display: block;
  font-size: 11px;
  color: var(--muted);
}
.contact-item a,
.contact-item strong {
  font-size: 20px;
  font-weight: 650;
  color: var(--deep);
}
.form-box {
  padding: 36px;
  background: var(--pale);
  border: 1px solid var(--line);
  border-radius: 28px;
}
.form-box h3 {
  margin-bottom: 10px;
}
.form-box > p {
  font-size: 12px;
  margin-bottom: 25px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.field label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 7px;
}
.field.full {
  grid-column: 1/-1;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px;
  background: white;
  border: 1px solid #c9d8e3;
  border-radius: var(--r-field);
  color: var(--ink);
  font-size: 13px;
}
.field textarea {
  min-height: 110px;
  resize: vertical;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 2px solid #0083c640;
  border-color: var(--blue);
}
.form-box button {
  margin-top: 20px;
}
.form-status {
  margin-top: 14px;
  font-size: 12px;
  color: var(--deep);
}
.screens-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px;
  padding: 25px;
  background: var(--pale);
  border-radius: 20px;
}
.screens-grid .phone .status {
  font-size: 10px;
}
.screens-grid figcaption {
  text-align: center;
  font-size: 11px;
  margin-top: 18px;
  color: var(--muted);
}
figure {
  margin: 0;
}
.platform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 50px;
  align-items: center;
}
.platform-grid figure {
  background: #f7fafc;
  padding: 25px;
  border-radius: 15px;
}
.platform-grid img {
  width: 100%;
  height: 300px;
  object-fit: contain;
}
.platform-grid figcaption {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 15px;
}
.modal {
  border: 0;
  padding: 0;
  border-radius: 12px;
  max-width: 95vw;
  max-height: 92vh;
  background: #fff;
  box-shadow: 0 25px 90px #00172c55;
}
.modal::backdrop {
  background: #001a36bb;
  backdrop-filter: blur(5px);
}
.modal button {
  position: absolute;
  right: 10px;
  top: 10px;
  background: white;
  border: 1px solid #d6e3ed;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  font-size: 23px;
}
.modal img {
  max-height: 86vh;
  width: auto;
  max-width: 92vw;
  object-fit: contain;
}
.skip {
  position: absolute;
  top: -60px;
  left: 20px;
  z-index: 100;
  background: white;
  padding: 10px;
}
.skip:focus {
  top: 10px;
}
.mobile-call {
  display: none;
}
@media (min-width: 1450px) {
  .wrap {
    max-width: 1350px;
  }
  .hero-inner {
    min-height: 700px;
  }
  .hero h1 {
    font-size: 76px;
  }
  .hero-phone {
    width: 155px;
  }
}
@media (max-width: 1050px) {
  .wrap {
    padding: 0 26px;
  }
  .nav-inner {
    gap: 18px;
  }
  .nav-links {
    gap: 16px;
  }
  .brand span {
    display: none;
  }
  .hero-inner {
    gap: 28px;
    min-height: 580px;
  }
  .hero h1 {
    font-size: 54px;
  }
  .hero-phone {
    width: 112px;
    right: -8px;
  }
  .product-panel {
    gap: 35px;
  }
  .branch-grid {
    gap: 12px;
  }
  .branch-body {
    padding: 18px;
  }
  .branch-image {
    height: 160px;
  }
  .integration-layout,
  .app-layout,
  .service-layout,
  .faq-layout {
    gap: 40px;
  }
  .phones-stage {
    gap: 9px;
  }
  .phones-stage .phone {
    width: 160px;
  }
  .all-clients {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }
  .screens-grid {
    gap: 18px;
  }
  .logo-row {
    gap: 25px;
  }
  .logo-row img {
    max-width: 110px;
  }
}
@media (max-width: 760px) {
  .wrap {
    padding: 0 21px;
  }
  .section {
    padding: 65px 0;
  }
  .topbar .wrap {
    font-size: 9px;
    height: 27px;
  }
  .topbar .right a:first-child {
    display: none;
  }
  .nav-inner {
    height: 70px;
    gap: 10px;
  }
  .brand img {
    width: 128px;
  }
  .brand span {
    display: block;
    font-size: 12px;
    padding-left: 10px;
  }
  .brand span small {
    font-size: 8px;
  }
  .nav-cta {
    margin-left: auto;
    font-size: 10px;
    padding: 9px 12px;
  }
  .menu-toggle {
    display: block;
    padding: 0 2px;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: white;
    padding: 22px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 15px #18364c10;
    gap: 0;
    align-items: stretch;
    font-size: 14px;
  }
  .nav-links.open {
    display: flex;
    flex-direction: column;
  }
  .nav-links a {
    padding: 12px;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    padding-top: 45px;
    padding-bottom: 42px;
    gap: 5px;
  }
  .hero h1 {
    font-size: 49px;
    max-width: 470px;
  }
  .hero .intro {
    font-size: 14px;
    margin: 21px 0 24px;
    max-width: 470px;
  }
  .hero .eyebrow {
    font-size: 9px;
  }
  .hero-actions {
    gap: 23px;
  }
  .hero-note {
    font-size: 9px;
    margin-top: 21px;
  }
  .hero-visual {
    padding: 38px 15px 25px;
    max-width: 560px;
    width: 100%;
    margin: auto;
  }
  .hero-phone {
    width: 24%;
    right: 0;
    bottom: 0;
  }
  .desktop {
    border-width: 6px;
    border-radius: 11px;
  }
  .hero-product-tag {
    margin-top: 15px;
  }
  .floating-label {
    top: 8px;
    right: 20px;
    font-size: 9px;
    padding: 6px 10px;
  }
  .hero-product-tag img {
    width: 65px;
  }
  .hero-product-tag {
    font-size: 9px;
    padding-right: 27%;
  }
  .phone {
    border-width: 4px;
    border-radius: 22px;
  }
  .phone .status {
    font-size: 7px;
  }
  .logo-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 23px;
    justify-items: center;
  }
  .logo-row img {
    height: 33px;
    width: 100px;
  }
  .logo-row .square-logo {
    height: 40px;
    width: 55px;
  }
  .trusted {
    padding: 25px 0;
  }
  .trusted-label {
    font-size: 10px;
  }
  .section-head {
    display: block;
    margin-bottom: 30px;
  }
  .section-head p {
    margin-top: 20px;
    max-width: 100%;
    font-size: 14px;
  }
  h2 {
    font-size: 35px;
  }
  .eyebrow {
    font-size: 9px;
    margin-bottom: 16px;
  }
  .product-tabs {
    gap: 2px;
    display: flex;
  }
  .product-tabs button {
    padding: 10px 15px;
  }
  .product-tabs button {
    font-size: 12px;
  }
  .product-panel {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 30px;
  }
  .product-copy h3 {
    font-size: 28px;
  }
  .product-copy p {
    font-size: 14px;
  }
  .product-copy .number {
    margin-bottom: 10px;
  }
  .product-image {
    min-height: 270px;
    padding: 20px 15px 25px;
  }
  .product-image > img {
    max-height: 320px;
  }
  .module-link {
    align-items: start;
    gap: 20px;
  }
  .module-link p {
    font-size: 11px;
    max-width: 180px;
  }
  .module-link .text-link {
    font-size: 11px;
    flex-shrink: 0;
  }
  .branch-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .branch-body h3 {
    font-size: 19px;
  }
  .branch-body p {
    font-size: 11px;
    min-height: 73px;
  }
  .branch-body {
    padding: 17px 14px;
  }
  .branch-image {
    height: 155px;
  }
  .branch-body .text-link {
    font-size: 10px;
    gap: 7px;
  }
  .app-layout,
  .integration-layout,
  .service-layout,
  .faq-layout,
  .detail-grid,
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .app-copy {
    grid-row: 1;
  }
  .phones-stage {
    height: 405px;
    gap: 24px;
  }
  .phones-stage .phone {
    width: 157px;
  }
  .phones-stage .phone .status {
    font-size: 8px;
  }
  .integration-grid {
    gap: 10px;
  }
  .integration-logo {
    height: 80px;
    padding: 17px;
  }
  .integration-logo span {
    font-size: 14px;
  }
  .customer-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .customer-card {
    min-height: 300px;
  }
  .customer-copy {
    padding: 25px;
  }
  .customer-copy h3 {
    font-size: 26px;
  }
  .all-clients {
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);
  }
  .all-clients img {
    height: 42px;
  }
  .experience {
    margin-top: 25px;
  }
  .faq-layout {
    gap: 30px;
  }
  .cta-section {
    padding-bottom: 55px;
  }
  .cta-box {
    padding: 35px 27px;
    display: block;
    border-radius: 26px;
  }
  .cta-box h2 {
    font-size: 32px;
  }
  .cta-box p {
    font-size: 13px;
  }
  .cta-box .btn {
    margin-top: 25px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .footer-brand {
    grid-column: 1/-1;
  }
  .footer-brand p {
    max-width: 330px;
  }
  .footer-bottom {
    gap: 15px;
    flex-direction: column;
    font-size: 9px;
  }
  .subhero {
    padding: 40px 0;
  }
  .subhero h1 {
    font-size: 40px;
  }
  .subhero p {
    font-size: 14px;
  }
  .module-grid {
    grid-template-columns: 1fr;
  }
  .form-box {
    padding: 25px 20px;
  }
  .form-grid {
    gap: 15px;
  }
  .field {
    grid-column: 1/-1;
  }
  .contact-item a {
    font-size: 21px;
  }
  .screens-grid {
    grid-template-columns: 1fr 1fr;
    padding: 18px;
    gap: 25px;
  }
  .screens-grid .phone .status {
    font-size: 7px;
  }
  .platform-grid {
    grid-template-columns: 1fr;
  }
  .platform-grid img {
    height: 260px;
  }
  .detail-grid > img {
    max-height: 350px;
  }
  .mobile-call {
    display: block;
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    background: var(--deep);
    color: white;
    border-radius: 50%;
    height: 46px;
    width: 46px;
    box-shadow: 0 6px 20px #0d406942;
    display: grid;
    place-items: center;
    transition: transform 0.35s var(--ease), opacity 0.25s;
  }
  .js .mobile-call:not(.show) {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    pointer-events: none;
  }
  .mobile-call svg {
    width: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
  }
}
.brand .brand-lockup {
  display: flex;
  border: 0;
  padding: 0;
  gap: 9px;
  align-items: center;
}
.brand .brand-lockup img {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
}
.brand-lockup b {
  font-size: 19px;
  letter-spacing: -0.65px;
  color: var(--deep);
}
.footer-brand .brand > span:last-child {
  display: none;
}
.footer-brand .brand-lockup img {
  width: 40px;
  height: 40px;
}
.footer-brand .brand-lockup b {
  font-size: 22px;
}
@media (max-width: 1050px) {
  .brand .brand-lockup {
    display: flex;
  }
}
@media (max-width: 760px) {
  .brand-lockup b {
    font-size: 16px;
  }
  .brand .brand-lockup img {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .brand {
    gap: 9px;
  }
  .nav .brand > span:last-child {
    display: none;
  }
  .brand .brand-lockup {
    gap: 7px;
  }
}

/* ---------- v2: interactie ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--amber);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 60;
  pointer-events: none;
}
.nav {
  transition: box-shadow 0.3s;
}
.nav.scrolled {
  box-shadow: 0 8px 24px -16px #0d406966;
}
.nav-links a {
  position: relative;
}
.nav-links a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transition: transform 0.3s var(--ease);
}
.nav-links a:hover:after,
.nav-links a.active:after {
  transform: scaleX(1);
}
.arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
a:hover > .arrow,
button:hover > .arrow,
.branch-card:hover .arrow,
.customer-card:hover .arrow {
  transform: translate(3px, -3px);
}
.hero .text-link:hover .arrow {
  transform: translateY(3px);
}

/* tabs: schuivende pil met voortgangslijn */
.tab-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  background: white;
  border-radius: 999px;
  box-shadow: 0 4px 14px -6px #0d40694d;
  transition:
    transform 0.45s var(--ease),
    width 0.45s var(--ease);
  overflow: hidden;
}
.tab-indicator i {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--amber);
  transform-origin: left;
  transform: scaleX(0);
}
.product-tabs.manual .tab-indicator i {
  transform: scaleX(1) !important;
}
.product-panel.swap > * {
  animation: panelIn 0.5s var(--ease) both;
}
.product-panel.swap > :nth-child(2) {
  animation-delay: 0.06s;
}
@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
.image-zoom img {
  transition: transform 0.4s var(--ease);
}
.image-zoom:hover img {
  transform: scale(1.02);
}

/* kaarten tillen op */
.branch-card,
.module-card,
.integration-logo,
.customer-card {
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    border-color 0.25s;
}
.branch-card:hover,
.module-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -22px #0d406966;
}
.module-card:hover {
  border-color: #bfdcef;
}
.module-card .icon {
  transition: transform 0.4s var(--ease), background 0.25s, color 0.25s;
}
.module-card:hover .icon {
  background: var(--blue);
  color: white;
  transform: rotate(-8deg) scale(1.08);
}
.integration-logo:hover {
  transform: translateY(-4px);
  border-color: #bfdcef;
  box-shadow: 0 16px 30px -20px #0d406966;
}
.customer-card:hover {
  transform: translateY(-4px);
}
.logo-row img,
.all-clients img {
  transition: transform 0.3s var(--ease);
}
.logo-row img:hover,
.all-clients img:hover {
  transform: scale(1.08);
}
.step {
  transition: padding-left 0.3s var(--ease);
}
.step:hover {
  padding-left: 8px;
}
.step-index {
  transition: color 0.2s;
}
.step:hover .step-index {
  color: var(--amber);
}

/* hero */
.desktop,
.hero-phone,
.floating-label {
  transition: transform 0.5s var(--ease);
  will-change: transform;
}
.green-dot {
  box-shadow: 0 0 0 0 #42ac8088;
  animation: dotPulse 2.2s infinite;
}
@keyframes dotPulse {
  70% {
    box-shadow: 0 0 0 8px #42ac8000;
  }
  100% {
    box-shadow: 0 0 0 0 #42ac8000;
  }
}

/* faq */
summary {
  transition: color 0.2s;
}
summary:hover {
  color: var(--blue);
}
summary:after {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pale);
  font-size: 18px;
  transition:
    transform 0.35s var(--ease),
    background 0.2s,
    color 0.2s;
}
details[open] summary:after {
  content: "+";
  transform: rotate(45deg);
  background: var(--blue);
  color: white;
}
details[open] p {
  animation: panelIn 0.4s var(--ease) both;
}

/* binnenkomen bij scrollen */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s var(--ease) var(--d, 0ms),
    transform 0.7s var(--ease) var(--d, 0ms);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal.in.branch-card:hover,
.reveal.in.module-card:hover {
  transform: translateY(-6px);
  transition-delay: 0ms;
}
.reveal.in.integration-logo:hover,
.reveal.in.customer-card:hover {
  transform: translateY(-4px);
  transition-delay: 0ms;
}

/* keuzehulp */
.configurator {
  background: linear-gradient(180deg, white, var(--pale));
  padding-top: 0;
}
.config-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: start;
}
.config-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--deep);
  margin: 0 0 14px;
}
.config-label:not(:first-child) {
  margin-top: 30px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 14px;
  border-radius: 999px;
  border: 1.5px solid #cfe0ec;
  background: white;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  transition:
    transform 0.25s var(--ease),
    border-color 0.2s,
    background 0.2s,
    color 0.2s;
}
.chip:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}
.chip:active {
  transform: scale(0.96);
}
.chip-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #b5ccdd;
  display: grid;
  place-items: center;
  transition: background 0.2s, border-color 0.2s;
}
.chip-dot:after {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform 0.25s var(--ease);
}
.chip[aria-pressed="true"] {
  background: var(--deep);
  border-color: var(--deep);
  color: white;
}
.chip[aria-pressed="true"] .chip-dot {
  background: var(--amber);
  border-color: var(--amber);
}
.chip[aria-pressed="true"] .chip-dot:after {
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}
.chip.size {
  padding: 10px 18px;
}
.chip.size[aria-checked="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}
.config-result {
  background: linear-gradient(140deg, #014e9b, #0083c6);
  color: white;
  border-radius: 28px;
  padding: 30px;
  position: sticky;
  top: 110px;
  overflow: hidden;
}
.config-result:before {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 28px solid #ffffff0d;
  pointer-events: none;
}
.config-result-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.config-count {
  flex: 0 0 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--amber);
  color: #083e71;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
}
.config-count.bump {
  animation: bump 0.4s var(--ease);
}
@keyframes bump {
  40% {
    transform: scale(1.18);
  }
}
.config-result-head strong {
  display: block;
  font-size: 17px;
  line-height: 1.25;
}
.config-result-head small {
  color: #cfe8f7;
  font-size: 12px;
}
.config-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.config-list li {
  animation: panelIn 0.4s var(--ease) both;
}
.config-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border-radius: 18px;
  background: #ffffff14;
  border: 1px solid #ffffff1f;
  transition: background 0.2s;
}
.config-list a:hover {
  background: #ffffff26;
}
.config-list .icon {
  flex: 0 0 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  color: var(--blue);
  display: grid;
  place-items: center;
}
.config-list .icon svg {
  width: 19px;
  height: 19px;
}
.config-list span:not(.icon):not(.arrow) {
  flex: 1;
  min-width: 0;
}
.config-list b {
  display: block;
  font-size: 14px;
  line-height: 1.3;
}
.config-list small {
  display: block;
  font-size: 11px;
  color: #cfe8f7;
}
.config-list .empty {
  font-size: 13px;
  color: #cfe8f7;
  padding: 12px 0;
}
.config-result .fineprint {
  color: #cfe8f7;
}
@media (max-width: 760px) {
  .config-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .config-result {
    position: relative;
    top: auto;
    padding: 24px 20px;
  }
  .chip {
    font-size: 12px;
    padding: 10px 14px 10px 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
  .desktop,
  .hero-phone,
  .floating-label {
    transform: none !important;
  }
}
/* lange Nederlandse woorden breken netjes af op smalle schermen */
h1,
h2,
h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}
.detail-grid > *,
.contact-layout > *,
.app-layout > * {
  min-width: 0;
}

/* ---------- v3: telefoons in het Nederlands ---------- */
.phone {
  container-type: inline-size;
}
.app-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #2b3a46;
  font-family: Inter, Arial, sans-serif;
  font-size: 5.3cqw;
  line-height: 1.3;
  text-align: left;
}
.app-bar {
  position: relative;
  background: #108fca;
  color: #fff;
  text-align: center;
  font-weight: 600;
  padding: 4cqw 8cqw 5cqw;
  font-size: 1.08em;
}
.app-back {
  position: absolute;
  left: 4cqw;
  top: 50%;
  transform: translateY(-55%);
  font-size: 1.6em;
  line-height: 1;
}
.app-form {
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
  padding: 3cqw 5cqw 0;
  flex: 1;
}
.app-field {
  display: grid;
  grid-template-columns: 26cqw 1fr auto;
  align-items: center;
  gap: 2cqw;
  padding: 2.4cqw 0;
  border-bottom: 1px solid #d6dee5;
}
.app-field small {
  color: #1b8ccc;
  font-size: 0.92em;
}
.app-cal,
.app-check i {
  width: 4.4cqw;
  height: 4.4cqw;
  border: 1.5px solid #5b6b78;
  border-radius: 1cqw;
}
.app-caret {
  width: 0;
  height: 0;
  border-left: 1.6cqw solid transparent;
  border-right: 1.6cqw solid transparent;
  border-top: 2cqw solid #5b6b78;
}
.app-check {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.4cqw 0;
  font-size: 0.92em;
}
.app-note {
  height: 18cqw;
  border: 1px solid #d6dee5;
  border-radius: 1.4cqw;
  padding: 2cqw;
  color: #9aa7b2;
  font-size: 0.9em;
}
.app-small {
  margin: 1cqw 0 0;
  color: #2b3a46;
  font-size: 0.85em;
}
.app-pill {
  display: block;
  width: 32cqw;
  padding: 1.4cqw 0;
  border-radius: 99px;
  background: #1b8ccc;
  color: #fff;
  text-align: center;
  font-size: 0.8em;
}
.app-save {
  display: grid;
  place-items: center;
  width: 15cqw;
  height: 15cqw;
  margin: 2cqw auto 7cqw;
  border-radius: 50%;
  background: #23a047;
  color: #fff;
  font-size: 0.62em;
  font-weight: 600;
}
.phone-trio {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 560px;
  margin: auto;
  aspect-ratio: 1 / 0.92;
}
.phone-trio:before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 2%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d6edf9, #b9dcf1);
}
.phone-trio > div {
  position: absolute;
  filter: drop-shadow(0 18px 18px #0d406938);
  transition: transform 0.5s var(--ease);
}
.trio-left {
  width: 34%;
  left: 6%;
  top: 9%;
  transform: rotate(-6deg);
}
.trio-right {
  width: 34%;
  right: 6%;
  top: 9%;
  transform: rotate(6deg);
}
.trio-mid {
  width: 38%;
  left: 31%;
  top: 17%;
  z-index: 2;
}
.phone-trio:hover .trio-left {
  transform: rotate(-9deg) translateX(-4%);
}
.phone-trio:hover .trio-right {
  transform: rotate(9deg) translateX(4%);
}
.phone-trio:hover .trio-mid {
  transform: translateY(-3%);
}
.detail-grid > .phone-trio {
  max-width: 520px;
}
.platform-grid figure .phone-trio {
  max-width: 340px;
}
.screens-grid.three {
  grid-template-columns: repeat(3, minmax(0, 230px));
  justify-content: center;
  gap: 60px;
}
@media (max-width: 760px) {
  .screens-grid.three {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

/* ---------- v3: keuzehulp, eigen aantal en logo ---------- */
.config-own {
  margin-top: 22px;
}
.config-own label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  margin-bottom: 8px;
}
.config-number-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 18px 4px 4px;
  border: 1.5px solid #cfe0ec;
  border-radius: 999px;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.config-number-wrap:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px #0083c622;
}
.config-number-wrap input {
  width: 150px;
  border: 0;
  outline: 0;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--pale);
  font-size: 14px;
  font-weight: 650;
  color: var(--deep);
}
.config-number-wrap span {
  font-size: 13px;
  color: var(--muted);
}
.config-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-top: 18px;
}
.config-foot .fineprint {
  margin: 0 !important;
  max-width: 260px;
}
.config-logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  box-shadow: 0 8px 20px -10px #00203f66;
}
.config-logo img {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}
.config-logo b {
  color: var(--deep);
  font-size: 15px;
  letter-spacing: -0.4px;
}

/* ---------- v3: klantlogo's even groot en in beweging ---------- */
.logo-row img,
.all-clients img {
  width: var(--w);
  height: var(--h);
  max-width: 100%;
  object-fit: contain;
}
.all-clients {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
  margin-top: 42px;
}
.client-slot {
  height: 116px;
  display: grid;
  place-items: center;
  padding: 18px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 24px;
  transition:
    border-color 1.2s,
    box-shadow 1.2s;
}
.all-clients.rotating {
  grid-template-columns: repeat(5, 1fr);
}
.all-clients.rotating .client-slot:nth-child(n + 6) {
  display: none;
}
.client-slot img {
  transition:
    opacity 1.3s ease,
    transform 1.3s var(--ease);
}
.client-slot.out img {
  opacity: 0;
  transform: translateY(-10px) scale(0.94);
}
.client-slot.in-logo {
  border-color: #9fcdea;
  box-shadow: 0 16px 34px -20px #0083c699;
}
.client-slot.in-logo img {
  animation: logoIn 1.6s var(--ease) both;
}
@keyframes logoIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
}
@media (max-width: 1050px) {
  .all-clients.rotating {
    grid-template-columns: repeat(4, 1fr);
  }
  .all-clients.rotating .client-slot:nth-child(n + 5) {
    display: none;
  }
}
@media (max-width: 760px) {
  .logo-row img,
  .all-clients img {
    width: calc(var(--w) * 0.7);
    height: calc(var(--h) * 0.7);
  }
  .client-slot {
    height: 88px;
    padding: 10px;
    border-radius: 18px;
  }
  .all-clients {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
  }
}
@media (max-width: 560px) {
  .all-clients.rotating {
    grid-template-columns: repeat(3, 1fr);
  }
  .all-clients.rotating .client-slot:nth-child(n + 4) {
    display: none;
  }
  .logo-row img,
  .all-clients img {
    width: calc(var(--w) * 0.6);
    height: calc(var(--h) * 0.6);
  }
}

/* ---------- v4: strak, met meer AvanTimes-kleur ---------- */
:root {
  --r-btn: 10px;
  --r-card: 16px;
  --r-block: 20px;
  --grad: linear-gradient(115deg, #024b93 0%, #027bbb 62%, #16a5d4 100%);
}

/* logo */
.brand .brand-lockup img.brand-logo {
  width: auto;
  height: 36px;
  border-radius: 0;
  object-fit: contain;
}
.footer-brand .brand-lockup img.brand-logo {
  width: auto;
  height: 40px;
}
.config-logo {
  padding: 8px 14px;
  border-radius: 10px;
}
.config-logo img {
  width: auto;
  height: 26px;
  border-radius: 0;
}
@media (max-width: 760px) {
  .brand .brand-lockup img.brand-logo {
    height: 30px;
  }
}

/* knoppen: vlak en strak */
.btn {
  border-radius: var(--r-btn);
  box-shadow: none;
  padding: 15px 22px;
  letter-spacing: -0.1px;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s var(--ease);
}
.btn:hover {
  background: #ffad33;
  transform: none;
  box-shadow: none;
}
.btn:active {
  transform: translateY(1px);
  box-shadow: none;
}
.btn.blue,
.btn.white {
  box-shadow: none;
}
.nav-cta {
  padding: 11px 16px;
}
.store-btn {
  border-radius: var(--r-btn);
}
.store-btn:hover {
  transform: none;
}
.chip {
  border-radius: var(--r-btn);
  border-width: 1px;
  font-weight: 550;
}
.chip:hover,
.chip:active {
  transform: none;
}
.chip-dot {
  border-radius: 5px;
  width: 16px;
  height: 16px;
}
.config-number-wrap {
  border-radius: var(--r-btn);
  border-width: 1px;
}
.config-number-wrap input {
  border-radius: 7px;
}
.product-tabs,
.product-tabs button,
.tab-indicator {
  border-radius: var(--r-btn);
}
.product-tabs {
  padding: 5px;
}
.tab-indicator {
  top: 5px;
  bottom: 5px;
}
.floating-label {
  border-radius: 8px;
}
summary:after {
  border-radius: 8px;
}

/* afronding: rustig en consequent */
.branch-card,
.module-card,
.integration-logo,
.client-slot,
.config-list a {
  border-radius: var(--r-card);
}
.customer-card,
.cta-box,
.product-image,
.form-box,
.config-result,
.phones-stage,
.screens-grid,
.platform-grid figure {
  border-radius: var(--r-block);
}
.module-card .icon {
  border-radius: 10px;
}
.module-card:hover .icon {
  transform: none;
}
.config-count {
  border-radius: 14px;
}
@media (max-width: 760px) {
  .cta-box {
    border-radius: var(--r-block);
  }
}

/* kleur in de koppen */
h2 em,
h1 em {
  font-style: normal;
  color: var(--blue);
}
.hero h1 em {
  color: #ffb445;
}
.eyebrow:before {
  height: 3px;
  border-radius: 2px;
}

/* subhero's: blauw verloop zoals de homepage */
.subhero {
  background: var(--grad);
  border-bottom: 0;
  color: white;
  position: relative;
  overflow: hidden;
}
.subhero:after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -160px;
  top: -220px;
  border-radius: 50%;
  border: 1px solid #ffffff17;
  box-shadow:
    0 0 0 70px #ffffff06,
    0 0 0 140px #ffffff04;
  pointer-events: none;
}
.subhero .wrap {
  position: relative;
  z-index: 1;
}
.subhero h1 {
  color: white;
}
.subhero p {
  color: #d5eaf6;
}
.subhero .eyebrow {
  color: #cdeafb;
}
.breadcrumbs,
.breadcrumbs a {
  color: #b9dcf1;
}
.breadcrumbs a:hover {
  color: white;
}

/* lichte secties: lichtblauwe tint */
.light {
  background: #eaf4fb;
}
.configurator {
  background: linear-gradient(180deg, white, #eaf4fb);
}

/* koppelingen: blauw vlak */
.integration-band {
  background: var(--grad);
  border: 0;
  color: white;
}
.integration-band h2 {
  color: white;
}
.integration-band h2 em,
.service-section h2 em {
  color: #ffb445;
}
.integration-band .eyebrow,
.service-section .eyebrow {
  color: #cdeafb;
}
.integration-band p {
  color: #d5eaf6;
}
.integration-band .text-link {
  color: white;
}
.integration-logo {
  border-color: transparent;
  box-shadow: 0 12px 30px -18px #00203f80;
}

/* service: donkerder blauw vlak, groot getal in amber */
.service-section {
  background: linear-gradient(160deg, #014e9b 0%, #0067ae 55%, #0083c6 100%);
  color: white;
}
.service-section h2,
.service-section h3 {
  color: white;
}
.service-section p,
.service-section .experience span {
  color: #cfe6f5;
}
.service-section .text-link {
  color: white;
}
.service-section .experience,
.service-section .step {
  border-color: #ffffff2b;
}
.service-section .experience strong {
  color: #ffb445;
}
.service-section .step-index {
  color: #ffb445;
}

/* productbeeld op een blauw vlak */
.product-image {
  background: var(--grad);
  border: 0;
}
.product-image .caption {
  color: #cfe6f5;
}

/* klantkaarten: blauwe overloop i.p.v. grijs */
.customer-card:after {
  background: linear-gradient(180deg, #014e9b00 25%, #014e9bd9 100%);
}

/* checks: gevulde blauwe bolletjes */
.checks li:before {
  content: "✓";
  flex: 0 0 20px;
  height: 20px;
  border-radius: 50%;
  background: #e1f1fb;
  color: var(--blue);
  font-size: 11px;
  display: grid;
  place-items: center;
  margin-top: 2px;
}

/* footer met een blauwe bovenrand */
footer {
  background: #eef6fc;
  border-top: 4px solid var(--blue);
}

/* app-icoon duidelijker */
.app-icon-line {
  display: inline-flex;
  gap: 16px;
  padding: 12px 22px 12px 12px;
  margin-bottom: 28px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 14px 30px -22px #0d406980;
  font-size: 14px;
}
.app-icon-line img {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  box-shadow: 0 8px 18px -8px #0d406980;
}
.app-icon-line strong {
  font-size: 21px;
  letter-spacing: -0.4px;
  line-height: 1.2;
}
.app-icon-line span {
  line-height: 1.4;
}
.app-field {
  grid-template-columns: 1fr auto;
  grid-template-areas: "l l" "v i";
  row-gap: 0.6cqw;
  padding: 1.8cqw 0;
}
.app-field small {
  grid-area: l;
  font-size: 0.8em;
}
.app-field span {
  grid-area: v;
}
.app-field i {
  grid-area: i;
}
.app-screen .app-small {
  margin: 1cqw 0 0;
  font-size: 0.85em;
  line-height: 1.3;
  color: #2b3a46;
}

/* ======================================================
   v5: premium – makkelijk, modern, overzichtelijk
   ====================================================== */
:root {
  --r-btn: 999px;
  --r-card: 24px;
  --r-block: 32px;
  --r-field: 14px;
  --bg-soft: #f5f8fb;
  --sh-1: 0 1px 2px rgba(10, 37, 64, 0.05), 0 10px 30px -14px rgba(10, 37, 64, 0.16);
  --sh-2: 0 2px 6px rgba(10, 37, 64, 0.06), 0 30px 60px -24px rgba(10, 37, 64, 0.3);
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection {
  background: #0083c633;
}
h2 {
  font-size: clamp(34px, 4.1vw, 56px);
  letter-spacing: -0.045em;
  line-height: 1.06;
}
.section {
  padding: 120px 0;
}
.section-head p {
  font-size: 16px;
  line-height: 1.6;
}

/* knoppen: pil, vlak met een zachte glans */
.btn {
  border-radius: var(--r-btn);
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 650;
  background: linear-gradient(180deg, #ffb13d 0%, #ff9e1b 100%);
  color: #083e71;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 10px 24px -12px rgba(255, 140, 0, 0.75);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    filter 0.2s;
}
.btn:hover {
  background: linear-gradient(180deg, #ffb13d 0%, #ff9e1b 100%);
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 16px 30px -12px rgba(255, 140, 0, 0.8);
}
.btn:active {
  transform: scale(0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-lg {
  padding: 17px 30px;
  font-size: 15px;
}
.btn-glass,
.btn-glass:hover {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: none;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.btn-glass:hover {
  background: rgba(255, 255, 255, 0.2);
  filter: none;
}
.btn.blue {
  background: var(--deep);
  box-shadow: 0 10px 24px -12px rgba(1, 78, 155, 0.7);
}
.btn.outline {
  border-radius: var(--r-btn);
}
.nav-cta {
  padding: 10px 18px;
  font-size: 13px;
}
.store-btn {
  border-radius: 14px;
  transition: transform 0.35s var(--ease), background 0.2s;
}
.store-btn:hover {
  transform: translateY(-1px);
}

/* navigatie: glas */
.topbar {
  background: white;
  border-bottom: 1px solid rgba(10, 37, 64, 0.06);
  font-size: 11px;
}
.nav {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(10, 37, 64, 0.06);
}
.nav.scrolled {
  box-shadow: 0 10px 30px -22px rgba(10, 37, 64, 0.45);
}
.nav-inner {
  height: 72px;
}
.nav-links {
  font-size: 13px;
  font-weight: 550;
  gap: 30px;
}
.nav-links a:after {
  display: none;
}
.nav-links a {
  transition: color 0.2s;
}

/* hero */
.hero.hero-premium {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #01376e 0%, #014e9b 34%, #0274bb 60%, #1a9bd7 78%, #cfe9f8 92%, #ffffff 100%);
  color: white;
}
.hero.hero-premium:after {
  display: none;
}
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-glow i {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  animation: drift 22s ease-in-out infinite alternate;
}
.hero-glow i:nth-child(1) {
  width: 520px;
  height: 520px;
  left: -140px;
  top: -120px;
  background: #0083c6;
}
.hero-glow i:nth-child(2) {
  width: 420px;
  height: 420px;
  right: -120px;
  top: 40px;
  background: #23b3ea;
  animation-duration: 26s;
}
.hero-glow i:nth-child(3) {
  width: 360px;
  height: 360px;
  left: 42%;
  top: 180px;
  background: #ff9e1b;
  opacity: 0.16;
  animation-duration: 30s;
}
@keyframes drift {
  to {
    transform: translate(60px, 40px) scale(1.08);
  }
}
.hero-center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 92px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-size: 12.5px;
  font-weight: 550;
  color: #e3f2fc;
  transition: background 0.25s;
}
.hero-badge:hover {
  background: rgba(255, 255, 255, 0.18);
}
.hero-badge-logo {
  display: grid;
  place-items: center;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: #0b2f57;
}
.hero-badge-logo img {
  height: 18px;
  width: auto;
}
.hero-premium h1 {
  max-width: 14ch;
  margin-top: 28px;
  font-size: clamp(50px, 7.6vw, 108px);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.058em;
}
.hero-premium h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #ffd08a 0%, #ffb445 45%, #ff9e1b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-premium .intro {
  max-width: 610px;
  margin: 26px auto 0;
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.hero-premium .hero-actions {
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}
.hero-premium .hero-note {
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 24px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.78);
}
.hero-premium .hero-note span:before {
  color: #ffc56b;
}
.hero-stage {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin-top: 70px;
  padding-bottom: 56px;
}
.hero-device {
  transform-origin: 50% 0;
  will-change: transform;
}
.hero-premium .desktop {
  border: 10px solid #0d2034;
  border-bottom-width: 14px;
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 50px 100px -30px rgba(0, 20, 50, 0.65);
}
.hero-premium .desktop-top {
  height: 26px;
}
.hero-premium .laptop-foot {
  height: 14px;
  border-radius: 0 0 22px 22px / 0 0 14px 14px;
  background: linear-gradient(#e3eaf0, #9fb0c0);
  box-shadow: 0 30px 40px -20px rgba(0, 30, 60, 0.4);
}
.hero-premium .hero-phone {
  position: absolute;
  right: -2%;
  bottom: 6%;
  width: 168px;
  transform: rotate(4deg);
  filter: drop-shadow(0 30px 30px rgba(0, 25, 55, 0.35));
  will-change: transform;
}
.glass-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--sh-2);
  color: var(--deep);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  will-change: transform;
}
.glass-chip img {
  height: 22px;
  width: auto;
  border-radius: 6px;
}
.chip-a {
  left: -3%;
  top: 16%;
}
.chip-b {
  left: 5%;
  bottom: 9%;
  padding-left: 7px;
}
.chip-c {
  right: 13%;
  top: -22px;
}
@media (max-width: 1050px) {
  .chip-a {
    left: 0;
  }
  .hero-premium .hero-phone {
    width: 130px;
    right: 0;
  }
}
@media (max-width: 760px) {
  .hero-center {
    padding-top: 52px;
  }
  .hero-badge {
    font-size: 11px;
  }
  .hero-premium h1 {
    font-size: 48px;
    margin-top: 22px;
  }
  .hero-premium .intro {
    font-size: 16px;
  }
  .hero-premium .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 340px;
  }
  .hero-premium .hero-note {
    font-size: 11px;
  }
  .hero-stage {
    margin-top: 44px;
    padding-bottom: 34px;
  }
  .hero-premium .desktop {
    border-width: 6px;
    border-bottom-width: 9px;
    border-radius: 14px;
  }
  .hero-premium .hero-phone {
    width: 27%;
    right: 0;
    bottom: 2%;
  }
  .chip-b,
  .chip-c {
    display: none;
  }
  .chip-a {
    top: -16px;
    left: 4px;
    font-size: 11px;
    padding: 7px 12px;
  }
}

/* logo's onder de hero */
.trusted {
  border-bottom: 0;
  padding: 34px 0 20px;
}
.trusted-label {
  font-size: 12.5px;
}

/* kaarten: zacht en ruim */
.branch-card,
.module-card,
.integration-logo,
.client-slot {
  border-radius: var(--r-card);
  border: 1px solid rgba(10, 37, 64, 0.06);
  box-shadow: var(--sh-1);
}
.branch-card:hover,
.module-card:hover,
.integration-logo:hover {
  box-shadow: var(--sh-2);
  transform: translateY(-4px);
}
.reveal.in.branch-card:hover,
.reveal.in.module-card:hover,
.reveal.in.integration-logo:hover {
  transform: translateY(-4px);
}
.branch-body {
  padding: 26px;
}
.module-card {
  padding: 32px;
}
.module-card .icon {
  border-radius: 14px;
  width: 44px;
  height: 44px;
}
.customer-card,
.cta-box,
.product-image,
.form-box,
.config-result,
.screens-grid,
.platform-grid figure {
  border-radius: var(--r-block);
}
.customer-card {
  box-shadow: var(--sh-1);
}
.config-list a {
  border-radius: 18px;
}
.client-slot.in-logo {
  box-shadow: var(--sh-2);
  border-color: rgba(0, 131, 198, 0.25);
}

/* tabs, chips en velden: rond en rustig */
.product-tabs,
.product-tabs button,
.tab-indicator {
  border-radius: 999px;
}
.product-tabs {
  background: #eef3f7;
  border: 0;
  padding: 5px;
}
.tab-indicator {
  box-shadow: 0 2px 10px -2px rgba(10, 37, 64, 0.18);
}
.chip {
  border-radius: 999px;
  border: 1px solid rgba(10, 37, 64, 0.12);
  padding: 11px 18px 11px 13px;
  font-weight: 550;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s,
    transform 0.35s var(--ease);
}
.chip:hover {
  border-color: var(--blue);
}
.chip:active {
  transform: scale(0.97);
}
.chip.size {
  padding: 10px 18px;
}
.chip-dot {
  border-radius: 50%;
  width: 18px;
  height: 18px;
}
.config-number-wrap {
  border-radius: 999px;
  border: 1px solid rgba(10, 37, 64, 0.12);
}
.config-number-wrap input {
  border-radius: 999px;
}
.config-count {
  border-radius: 50%;
}
.config-logo {
  border-radius: 999px;
}
.field input,
.field select,
.field textarea {
  border-radius: var(--r-field);
  border-color: rgba(10, 37, 64, 0.14);
  padding: 13px 14px;
}
.floating-label {
  border-radius: 999px;
}
summary:after {
  border-radius: 50%;
}
.module-card:hover .icon {
  transform: scale(1.06);
}

/* rustige achtergronden */
.light,
.service-section.light {
  background: var(--bg-soft);
}
.configurator {
  background: white;
}
.config-layout {
  background: var(--bg-soft);
  border-radius: var(--r-block);
  padding: 40px;
}
.screens-grid {
  background: white;
  box-shadow: var(--sh-1);
}
.platform-grid figure {
  background: white;
  box-shadow: var(--sh-1);
}
footer {
  background: var(--bg-soft);
  border-top: 1px solid rgba(10, 37, 64, 0.06);
}

/* subpagina's: dezelfde premium sfeer */
.subhero {
  padding: 96px 0 88px;
  background:
    radial-gradient(600px 400px at 85% 10%, rgba(35, 179, 234, 0.45), transparent 70%),
    radial-gradient(500px 360px at 10% 110%, rgba(255, 158, 27, 0.14), transparent 70%),
    linear-gradient(160deg, #01376e 0%, #014e9b 45%, #0274bb 100%);
}
.subhero:after {
  display: none;
}
.subhero h1 {
  font-size: clamp(40px, 5.2vw, 72px);
  letter-spacing: -0.052em;
  line-height: 1.02;
}
.subhero p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.82);
}
.subhero .btn {
  margin-top: 32px;
}

/* blauwe vlakken: verloop met zachte gloed */
.integration-band {
  background:
    radial-gradient(700px 400px at 90% 0%, rgba(35, 179, 234, 0.4), transparent 70%),
    linear-gradient(160deg, #01376e 0%, #014e9b 50%, #0274bb 100%);
}
.service-section {
  background:
    radial-gradient(600px 380px at 0% 100%, rgba(255, 158, 27, 0.12), transparent 70%),
    linear-gradient(160deg, #014e9b 0%, #0067ae 55%, #0083c6 100%);
}
.cta-box {
  background:
    radial-gradient(500px 300px at 85% 0%, rgba(35, 179, 234, 0.5), transparent 70%),
    linear-gradient(140deg, #01376e, #0274bb);
  padding: 64px 68px;
}
.cta-box:before {
  display: none;
}
.product-image {
  background:
    radial-gradient(400px 260px at 80% 0%, rgba(255, 255, 255, 0.25), transparent 70%),
    linear-gradient(160deg, #014e9b, #0083c6);
}
@media (max-width: 760px) {
  .section {
    padding: 80px 0;
  }
  .config-layout {
    padding: 22px 16px;
    border-radius: 24px;
  }
  .cta-box {
    padding: 40px 26px;
  }
  .subhero {
    padding: 56px 0 52px;
  }
  .subhero h1 {
    font-size: 40px;
  }
  .subhero p {
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow i {
    animation: none;
  }
  .hero-device,
  .hero-premium .hero-phone,
  .glass-chip {
    transform: none !important;
  }
}

/* v5b: e-mail, logo's en slogan in de hero */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.hero-badge {
  padding: 5px 16px 5px 5px;
  font-size: 13px;
  letter-spacing: 0.1px;
}
.hero-badge-logo {
  width: 28px;
  height: 28px;
  padding: 0;
  background: white;
}
.hero-badge-logo img {
  width: 22px;
  height: 22px;
}
.hero-mail {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 520px;
  margin-top: 36px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 20px 50px -24px rgba(0, 20, 50, 0.6);
  transition:
    background 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}
.hero-mail:focus-within {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.12),
    0 20px 50px -24px rgba(0, 20, 50, 0.6);
}
.hero-mail input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: white;
  font-size: 16px;
  padding: 12px 8px 12px 20px;
}
.hero-mail input::placeholder {
  color: rgba(255, 255, 255, 0.68);
}
.hero-mail .btn {
  flex-shrink: 0;
  padding: 14px 22px;
}
.hero-mail.invalid {
  border-color: #ffc56b;
}
.hero-mail.shake {
  animation: shake 0.45s var(--ease);
}
@keyframes shake {
  20%,
  60% {
    transform: translateX(-6px);
  }
  40%,
  80% {
    transform: translateX(6px);
  }
}
.hero-mail.sent .btn {
  filter: brightness(1.08);
}
.hero-mail-note {
  margin-top: 14px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
  min-height: 1.6em;
}
.hero-logos {
  width: 100%;
  max-width: 980px;
  margin-top: 44px;
}
.hero-logos > p {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 14px;
}
.hero-logos strong {
  color: white;
}
.hero-logo-viewport {
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 50px -26px rgba(0, 20, 50, 0.6);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hero-logo-track {
  display: flex;
  width: max-content;
  animation: logoMarquee 48s linear infinite;
}
.hero-logo-viewport:hover .hero-logo-track {
  animation-play-state: paused;
}
.hero-logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  height: 78px;
  padding: 0 34px;
}
.hero-logo img {
  width: calc(var(--w) * 0.78);
  height: calc(var(--h) * 0.78);
  object-fit: contain;
}
@keyframes logoMarquee {
  to {
    transform: translateX(-50%);
  }
}
.hero-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s;
}
.hero-more:hover {
  color: white;
}
.hero-more:hover .arrow {
  transform: translateY(3px);
}
.hero-stage {
  margin-top: 54px;
}
.chip-c {
  right: -3%;
  top: 30%;
}
.section-head h2 {
  max-width: 780px;
}
@media (max-width: 760px) {
  .hero-mail {
    flex-direction: column;
    align-items: stretch;
    border-radius: 26px;
    padding: 6px;
  }
  .hero-mail input {
    padding: 13px 16px;
    text-align: center;
  }
  .hero-logo {
    height: 62px;
    padding: 0 20px;
  }
  .hero-logo img {
    width: calc(var(--w) * 0.6);
    height: calc(var(--h) * 0.6);
  }
  .hero-logos {
    margin-top: 34px;
  }
  .hero-badge {
    font-size: 11.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo-track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }
  .hero-logo[aria-hidden="true"] {
    display: none;
  }
}

/* ======================================================
   v6: feiten, Excel-vergelijking, citaten, uitsneden
   ====================================================== */
.facts {
  padding: 46px 0 10px;
}
.facts-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.fact {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  border-radius: var(--r-card);
  background: var(--bg-soft);
  min-width: 0;
}
.fact .icon {
  flex: 0 0 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: white;
  color: var(--blue);
  box-shadow: var(--sh-1);
}
.fact .icon svg {
  width: 20px;
  height: 20px;
}
.fact strong {
  display: block;
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -0.5px;
  color: var(--deep);
  line-height: 1.2;
}
.fact span:not(.icon) {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
@media (max-width: 1050px) {
  .facts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .facts-grid {
    grid-template-columns: 1fr 1fr;
  }
  .fact {
    padding: 14px;
    gap: 10px;
  }
  .fact:last-child {
    grid-column: 1 / -1;
  }
  .fact .icon {
    flex-basis: 36px;
    height: 36px;
  }
  .fact strong {
    font-size: 16px;
  }
}

/* Excel tegenover Astrow Web */
.compare {
  padding-top: 40px;
}
.compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 22px;
  align-items: stretch;
}
.compare-card {
  position: relative;
  border-radius: var(--r-block);
  padding: 30px 32px 34px;
  min-width: 0;
}
.compare-card h3 {
  font-size: 26px;
  margin: 22px 0 18px;
}
.compare-card.old {
  background-color: #f7f8f9;
  background-image:
    linear-gradient(#e6eaee 1px, transparent 1px),
    linear-gradient(90deg, #e6eaee 1px, transparent 1px);
  background-size: 100% 34px, 96px 100%;
  border: 1px solid #e3e8ec;
  color: #5d6b78;
  transform: rotate(-0.6deg);
  transition: transform 0.5s var(--ease);
}
.compare-card.old:hover {
  transform: rotate(-1.4deg) translateY(2px);
}
.compare-card.old h3 {
  color: #46545f;
}
.compare-card.new {
  background:
    radial-gradient(420px 260px at 90% 0%, rgba(35, 179, 234, 0.45), transparent 70%),
    linear-gradient(150deg, #014e9b, #0083c6);
  color: white;
  box-shadow: var(--sh-2);
}
.compare-card.new h3 {
  color: white;
}
.compare-card.new .checks {
  font-size: 15px;
}
.compare-card.new .checks li:before {
  background: rgba(255, 255, 255, 0.18);
  color: white;
}
.compare-card.new .btn {
  margin-top: 6px;
}
.file-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: white;
  font: 600 12.5px/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: #3b4752;
  box-shadow: var(--sh-1);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compare-card.new .file-tab {
  font-family: Inter, Arial, sans-serif;
  color: var(--deep);
}
.xls {
  flex: 0 0 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: #1d6f42;
  color: white;
  font: 800 12px/1 Inter, Arial, sans-serif;
}
.file-tab img {
  height: 24px;
  width: auto;
  border-radius: 7px;
}
.crosses {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
}
.crosses li {
  display: flex;
  gap: 11px;
  padding: 7px 0;
}
.crosses li:before {
  content: "✕";
  flex: 0 0 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  background: #fbe3e1;
  color: #c0392b;
}
.compare-arrow {
  display: grid;
  place-items: center;
}
.compare-arrow span {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: white;
  color: var(--blue);
  font-size: 22px;
  box-shadow: var(--sh-2);
}
@media (max-width: 860px) {
  .compare-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .compare-arrow span {
    transform: rotate(90deg);
  }
  .compare-card {
    padding: 24px 22px 26px;
  }
  .compare-card h3 {
    font-size: 22px;
  }
}

/* klantcitaten */
.quote-spot {
  position: relative;
  margin-top: 28px;
  padding: 48px 56px 40px;
  border-radius: var(--r-block);
  background: var(--bg-soft);
  overflow: hidden;
}
.quote-mark {
  position: absolute;
  right: 36px;
  top: -40px;
  font: 800 220px/1 Georgia, serif;
  color: rgba(0, 131, 198, 0.1);
  pointer-events: none;
}
.quote-slide {
  display: none;
  margin: 0;
}
.quote-slide.active {
  display: block;
  animation: panelIn 0.6s var(--ease) both;
}
.quote-slide blockquote {
  margin: 22px 0 26px;
  max-width: 900px;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.quote-logo {
  display: inline-grid;
  place-items: center;
  height: 64px;
  padding: 0 20px;
  border-radius: 18px;
  background: white;
  box-shadow: var(--sh-1);
}
.quote-logo img {
  width: calc(var(--w) * 0.75);
  height: calc(var(--h) * 0.75);
  object-fit: contain;
}
.quote-slide figcaption,
.quote-card figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  font-size: 13px;
  color: var(--muted);
}
.quote-slide figcaption b,
.quote-card figcaption b {
  display: block;
  font-size: 15px;
  color: var(--deep);
}
.quote-dots {
  display: flex;
  gap: 8px;
  margin-top: 26px;
}
.quote-dots button {
  border: 0;
  background: transparent;
  padding: 8px 2px;
}
.quote-dots i {
  display: block;
  width: 26px;
  height: 4px;
  border-radius: 4px;
  background: rgba(10, 37, 64, 0.15);
  transition:
    width 0.4s var(--ease),
    background 0.3s;
}
.quote-dots [aria-selected="true"] i {
  width: 44px;
  background: var(--blue);
}
.quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 28px;
}
.quote-card {
  margin: 0;
  padding: 28px;
  border-radius: var(--r-card);
  background: white;
  border: 1px solid rgba(10, 37, 64, 0.06);
  box-shadow: var(--sh-1);
  display: flex;
  flex-direction: column;
}
.quote-card blockquote {
  margin: 18px 0 22px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--ink);
  flex: 1;
}
.quote-card .quote-logo {
  justify-self: start;
  align-self: flex-start;
  height: 54px;
  box-shadow: none;
  background: var(--bg-soft);
}
.quote-card.inline {
  margin: 8px 0 26px;
  background: var(--bg-soft);
  box-shadow: none;
}
.quote-card.inline .quote-logo {
  display: none;
}
.quote-card.inline blockquote {
  margin-top: 0;
}
@media (max-width: 760px) {
  .quote-spot {
    padding: 30px 22px 24px;
  }
  .quote-mark {
    font-size: 150px;
    right: 14px;
    top: -26px;
  }
  .quote-grid {
    grid-template-columns: 1fr;
  }
  .quote-card {
    padding: 22px;
  }
  .quote-card blockquote {
    font-size: 16px;
  }
}

/* ingezoomde uitsnede op het productbeeld */
.product-image {
  overflow: visible;
}
.zoom-callout {
  position: absolute;
  left: -26px;
  bottom: 36px;
  z-index: 2;
  --cw: 250px;
  --ch: 120px;
}
.zoom-lens {
  width: var(--cw);
  height: var(--ch);
  border-radius: 18px;
  border: 4px solid white;
  background-color: white;
  background-image: var(--zimg);
  background-repeat: no-repeat;
  background-size: var(--zs) var(--zh);
  background-position: calc(var(--cw) / 2 - var(--fx) * var(--zs)) calc(var(--ch) / 2 - var(--fy) * var(--zh));
  box-shadow: var(--sh-2);
}
.zoom-label {
  position: absolute;
  top: -15px;
  left: 16px;
  z-index: 1;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--amber);
  color: #083e71;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(255, 140, 0, 0.8);
}
.product-panel.swap .zoom-callout {
  animation: popIn 0.7s var(--ease) 0.2s both;
}
@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.92);
  }
}
.product-image.phones {
  background: var(--bg-soft);
  padding: 24px 12px;
}
.product-image.phones .phone-trio {
  max-width: 420px;
}
@media (max-width: 760px) {
  .zoom-callout {
    left: 10px;
    bottom: 14px;
    --cw: 190px;
    --ch: 92px;
  }
  .zoom-lens {
    border-radius: 14px;
    border-width: 3px;
  }
}

/* ======================================================
   v7: rustiger – minder tegelijk, meer ruimte
   ====================================================== */
.scroll-progress {
  display: none;
}
.hero-glow i:nth-child(3) {
  display: none;
}
.hero-glow i {
  opacity: 0.35;
}
.hero-mail-note {
  min-height: 0;
  margin-top: 10px;
}
.hero-mail-note:empty {
  margin: 0;
}
.hero-logos {
  margin-top: 48px;
}
/* koppen: alleen in de hero een gekleurd woord */
h2 em,
.integration-band h2 em,
.service-section h2 em {
  color: inherit;
}
/* feitenstrook: lichte regel in plaats van kaartjes */
.facts {
  padding: 40px 0 0;
}
.facts-grid {
  gap: 0;
  border-top: 1px solid rgba(10, 37, 64, 0.08);
  border-bottom: 1px solid rgba(10, 37, 64, 0.08);
}
.fact {
  background: none;
  border-radius: 0;
  padding: 22px 20px;
  gap: 12px;
}
.fact + .fact {
  border-left: 1px solid rgba(10, 37, 64, 0.08);
}
.fact .icon {
  display: none;
}
.fact strong {
  font-size: 20px;
}
@media (max-width: 1050px) {
  .fact + .fact {
    border-left: 0;
  }
}
/* vergelijking: geen kanteling of pijl */
.compare-card.old,
.compare-card.old:hover {
  transform: none;
}
.compare-card.old {
  background-image: none;
  background-color: var(--bg-soft);
  border-color: transparent;
}
.compare-grid {
  grid-template-columns: 1fr 1fr;
}
.compare-arrow {
  display: none;
}
/* rustigere beweging */
.reveal {
  transform: translateY(12px);
  transition:
    opacity 0.6s var(--ease) var(--d, 0ms),
    transform 0.6s var(--ease) var(--d, 0ms);
}
.branch-card:hover,
.module-card:hover,
.integration-logo:hover,
.reveal.in.branch-card:hover,
.reveal.in.module-card:hover,
.reveal.in.integration-logo:hover {
  transform: translateY(-2px);
}
.customer-card:hover,
.reveal.in.customer-card:hover {
  transform: none;
}
.branch-card:hover img {
  transform: scale(1.03);
}
.step:hover {
  padding-left: 0;
}
.quote-mark {
  display: none;
}
.tab-indicator i {
  display: none;
}
/* blauwe vlakken: zonder extra gloed */
.integration-band,
.subhero {
  background: linear-gradient(160deg, #01376e 0%, #014e9b 50%, #0274bb 100%);
}
.service-section {
  background: linear-gradient(160deg, #014e9b 0%, #0067ae 60%, #0083c6 100%);
}
.cta-box {
  background: linear-gradient(140deg, #01376e, #0274bb);
}
.product-image {
  background: linear-gradient(160deg, #014e9b, #0083c6);
}

/* ======================================================
   v8: hero minder fel, logo's zonder balk, blokjes terug,
   producttabs met korte uitleg
   ====================================================== */
.hero.hero-premium {
  background: linear-gradient(170deg, #0a2d55 0%, #0d3f74 55%, #12518f 100%);
  padding-bottom: 76px;
}
.hero-glow i {
  opacity: 0.18;
}
.hero-glow i:nth-child(1) {
  background: #2a7fc0;
}
.hero-glow i:nth-child(2) {
  background: #3b8fcf;
}
.hero-premium .hero-badge {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}
.hero-premium h1 em {
  background: linear-gradient(100deg, #ffc978 0%, #ffad3a 60%, #f59a1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-mail {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
.hero-logos {
  margin-top: 56px;
}
.hero-logos > p {
  color: rgba(255, 255, 255, 0.65);
}
.hero-logo-viewport {
  background: none;
  box-shadow: none;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero-logo {
  height: 72px;
  padding: 0 32px;
}
.hero-logo img {
  width: calc(var(--w) * 0.82);
  height: calc(var(--h) * 0.82);
  opacity: 0.88;
  transition: opacity 0.25s;
}
.hero-logo img:hover {
  opacity: 1;
}
@media (max-width: 760px) {
  .hero.hero-premium {
    padding-bottom: 52px;
  }
  .hero-logo {
    height: 56px;
    padding: 0 20px;
  }
  .hero-logo img {
    width: calc(var(--w) * 0.62);
    height: calc(var(--h) * 0.62);
  }
}

/* feitenstrook weer als blokjes */
.facts {
  padding: 48px 0 0;
}
.facts-grid {
  gap: 14px;
  border: 0;
}
.fact,
.fact + .fact {
  border: 0;
  background: var(--bg-soft);
  border-radius: var(--r-card);
  padding: 18px;
  gap: 14px;
}
.fact .icon {
  display: grid;
}
.fact strong {
  font-size: 18px;
}

/* producttabs: korte uitleg in drie regels */
.feature-list {
  display: grid;
  gap: 14px;
  margin: 24px 0 28px;
}
.feature-list > div {
  display: grid;
  gap: 2px;
  padding-left: 16px;
  border-left: 2px solid #d6e8f5;
  transition: border-color 0.25s;
}
.feature-list > div:hover {
  border-color: var(--blue);
}
.feature-list b {
  font-size: 15px;
  font-weight: 650;
  color: var(--ink);
}
.feature-list span {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}
.product-copy p {
  font-size: 16px;
  line-height: 1.6;
  margin: 16px 0 0;
}
.detail-grid .feature-list {
  margin: 26px 0;
}
.zoom-callout {
  display: none;
}
.phone-duo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  width: 100%;
}
.phone-duo > div {
  width: min(190px, 42%);
  filter: drop-shadow(0 18px 18px rgba(13, 64, 105, 0.22));
}
.phone-duo > div:first-child {
  transform: rotate(-4deg) translateY(-6px);
}
.phone-duo > div:last-child {
  transform: rotate(4deg) translateY(10px);
}
@media (max-width: 600px) {
  .fact .icon {
    display: none;
  }
  .fact {
    padding: 14px 16px;
  }
}

/* v9: rommel aan de Excel-kant, watermerk aan de Astrow-kant */
.compare-card {
  overflow: hidden;
}
.compare-card h3 {
  margin-top: 4px;
}
.compare-card.new {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.compare-card.new .checks {
  position: relative;
  z-index: 1;
}
.compare-card.new .btn {
  position: relative;
  z-index: 1;
  margin-top: auto;
}
.watermark {
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 360px;
  height: 360px;
  background: url(/assets/logo/avantimes-beeldmerk-wit.svg) center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}
.mess {
  position: relative;
  margin-top: 26px;
  padding-right: 34px;
}
.xl-window {
  background: white;
  border: 1px solid #d9dee3;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 28px -18px rgba(10, 37, 64, 0.35);
  font-family: "Aptos", "Segoe UI", Calibri, Arial, sans-serif;
  font-size: 12px;
  color: #262626;
}
.xl-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #1d6f42;
  color: white;
  font-size: 11.5px;
  font-weight: 600;
}
.xl-title .xls {
  flex: 0 0 18px;
  height: 18px;
  border-radius: 4px;
  background: white;
  color: #1d6f42;
  font-size: 10px;
}
.xl-formula {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-bottom: 1px solid #e3e6e9;
  color: #555;
  font-size: 11px;
}
.xl-formula span {
  min-width: 34px;
  padding: 1px 6px;
  border: 1px solid #d9dee3;
  border-radius: 3px;
}
.xl-formula i {
  font-style: italic;
  color: #888;
}
.xl-formula code {
  font: 11px/1 Consolas, monospace;
}
.xl-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.xl-grid th {
  background: #f3f4f5;
  color: #6b6b6b;
  font-weight: 400;
  font-size: 11px;
  border: 1px solid #e3e6e9;
  padding: 3px 0;
  width: auto;
}
.xl-grid tr th:first-child {
  width: 26px;
}
.xl-grid td {
  border: 1px solid #e3e6e9;
  padding: 4px 6px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xl-grid td:first-of-type {
  text-align: left;
}
.xl-grid td.h {
  font-weight: 700;
  text-align: left;
}
.xl-grid td.err {
  color: #c0392b;
  font-weight: 600;
  outline: 2px solid #1d6f42;
  outline-offset: -2px;
}
.xl-grid td.empty {
  background: #fff6d6;
}
.xl-grid td.q {
  color: #c0392b;
}
.toast {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 270px;
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(10, 37, 64, 0.06);
  box-shadow: 0 16px 34px -16px rgba(10, 37, 64, 0.4);
  font-family: -apple-system, "SF Pro Text", Inter, Arial, sans-serif;
}
.toast div {
  flex: 1;
  min-width: 0;
}
.toast b {
  display: block;
  font-size: 12.5px;
  color: #1c1c1e;
}
.toast span:not(.toast-av):not(.toast-ic) {
  display: block;
  font-size: 12px;
  color: #48484a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast small {
  align-self: flex-start;
  font-size: 10.5px;
  color: #8e8e93;
}
.toast-av,
.toast-ic {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 700;
  font-size: 13px;
}
.toast-av {
  background: #25a35a;
}
.toast-ic {
  border-radius: 9px;
  background: #2f7de1;
  font-size: 15px;
}
.toast-chat {
  right: 0;
  top: -30px;
  transform: rotate(1.5deg);
}
.toast-mail {
  right: 18px;
  bottom: -18px;
  transform: rotate(-1deg);
}
@media (max-width: 760px) {
  .mess {
    padding-right: 0;
    margin-bottom: 26px;
  }
  .toast-chat {
    top: -26px;
  }
  .toast-mail {
    right: 6px;
  }
  .watermark {
    width: 260px;
    height: 260px;
    right: -60px;
    bottom: -60px;
  }
}
@media (max-width: 860px) {
  .compare-grid {
    grid-template-columns: 1fr;
  }
  .compare-card.new .btn {
    margin-top: 10px;
  }
}
.watermark {
  opacity: 0.06;
}

/* v10: navigatie als los, rustig blok */
.nav,
.nav.scrolled {
  top: 10px;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0 16px;
  margin-top: 10px;
}
.nav .nav-inner {
  max-width: 1240px;
  height: 68px;
  padding: 0 14px 0 22px;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.07);
  border-radius: 20px;
  box-shadow: 0 10px 30px -18px rgba(10, 37, 64, 0.35);
  transition: box-shadow 0.3s;
}
.nav.scrolled .nav-inner {
  box-shadow: 0 16px 40px -18px rgba(10, 37, 64, 0.45);
}
@media (min-width: 1450px) {
  .nav .nav-inner {
    max-width: 1350px;
  }
}
@media (max-width: 760px) {
  .nav,
  .nav.scrolled {
    top: 8px;
    padding: 0 10px;
    margin-top: 8px;
  }
  .nav .nav-inner {
    height: 60px;
    padding: 0 10px 0 14px;
    border-radius: 16px;
  }
  .nav-links {
    top: 68px;
    left: 10px;
    right: 10px;
    border-radius: 16px;
    border: 1px solid rgba(10, 37, 64, 0.07);
  }
}
.hero.hero-premium,
.subhero {
  margin-top: 10px;
}

/* branchepagina's */
.quote-card.wide {
  margin-top: 22px;
}
.quote-card.wide blockquote {
  font-size: 20px;
}
.branch-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.branch-mini a {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 18px 10px 10px;
  border-radius: var(--r-card);
  background: white;
  border: 1px solid rgba(10, 37, 64, 0.06);
  box-shadow: var(--sh-1);
  transition: box-shadow 0.3s, transform 0.3s var(--ease);
}
.branch-mini a:hover {
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.branch-mini img {
  width: 76px;
  height: 64px;
  object-fit: cover;
  border-radius: 14px;
}
.branch-mini span {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
  min-width: 0;
}
.branch-mini b {
  display: block;
  font-size: 15px;
  color: var(--ink);
}
.detail-grid .crosses {
  margin-top: 22px;
  font-size: 16px;
}
@media (max-width: 860px) {
  .branch-mini {
    grid-template-columns: 1fr;
  }
}

/* v11: koppelingen als netwerk, AvanTimes-merkteken in subhero's */
.subhero-mark {
  position: absolute;
  right: max(4%, calc((100vw - 1240px) / 2));
  top: 50%;
  width: 380px;
  height: 380px;
  transform: translateY(-50%);
  background: url(/assets/logo/avantimes-beeldmerk-wit.svg) center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}
@media (max-width: 900px) {
  .subhero-mark {
    width: 240px;
    height: 240px;
    right: -60px;
    opacity: 0.06;
  }
}
.int-more {
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  text-align: right;
}
.hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  min-width: 0;
}
.hub-stage {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #eef6fc 0%, #f7fbfe 55%, transparent 72%);
}
.hub-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hub-lines line {
  stroke: #9fcbe8;
  stroke-width: 0.45;
  stroke-dasharray: 1.2 1.6;
  stroke-linecap: round;
  animation: flow 2.4s linear infinite;
  animation-delay: calc(var(--i) * -0.4s);
}
@keyframes flow {
  to {
    stroke-dashoffset: -5.6;
  }
}
.hub-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 27%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: white;
  box-shadow:
    0 0 0 10px rgba(0, 131, 198, 0.08),
    0 0 0 22px rgba(0, 131, 198, 0.04),
    var(--sh-2);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  z-index: 2;
}
.hub-core img {
  width: 42%;
  height: auto;
}
.hub-core b {
  font-size: clamp(11px, 1.1vw, 13px);
  color: var(--deep);
  white-space: nowrap;
}
.hub-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 27%;
  aspect-ratio: 2 / 1.1;
  border-radius: 18px;
  background: white;
  border: 1px solid rgba(10, 37, 64, 0.06);
  box-shadow: var(--sh-1);
  display: grid;
  place-items: center;
  padding: 10% 12%;
  z-index: 1;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
.hub-node:hover {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: var(--sh-2);
}
.hub-node img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.hub-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  background: var(--bg-soft);
  font-size: 13.5px;
  font-weight: 550;
  color: var(--deep);
  transition: background 0.2s;
}
.hub-more:hover {
  background: #e6f1f9;
}
.hub-more span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: white;
  font-weight: 700;
}
@media (max-width: 760px) {
  .hub-node {
    border-radius: 12px;
  }
  .int-more {
    text-align: left;
  }
  .hub-more {
    font-size: 12.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hub-lines line {
    animation: none;
  }
}
.hub-node img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}
.hub-node {
  aspect-ratio: 2 / 1.05;
  padding: 8% 14%;
}
.hub-node {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hub-node img {
  width: 76%;
  height: auto;
  max-height: 72%;
  object-fit: contain;
}
.hub-node {
  padding: 12px 16px;
}
.hub-node img {
  width: 100%;
  max-height: 100%;
}
@media (max-width: 760px) {
  .hub-node {
    padding: 8px 10px;
  }
}

/* ======================================================
   v12: rustige keuzehulp, iets doorzichtige navigatie,
   nieuwe contactpagina met supportticket
   ====================================================== */
.nav .nav-inner {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  backdrop-filter: saturate(170%) blur(18px);
}
.nav-links {
  background: transparent;
}
@media (max-width: 760px) {
  .nav-links.open {
    background: white;
  }
}

/* feiten: vier blokjes */
.facts-grid {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1050px) {
  .facts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .fact:last-child {
    grid-column: auto;
  }
}

/* keuzehulp: nette rasters i.p.v. losse pillen */
.config-choices .chips[role="group"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.config-choices .chip:not(.size) {
  width: 100%;
  border-radius: 14px;
  padding: 13px 14px;
  background: white;
  border: 1px solid rgba(10, 37, 64, 0.08);
  text-align: left;
  font-size: 13.5px;
  line-height: 1.25;
}
.config-choices .chip:not(.size):hover {
  border-color: rgba(0, 131, 198, 0.45);
}
.config-choices .chip[aria-pressed="true"] {
  background: #e7f3fb;
  border-color: var(--blue);
  color: var(--deep);
}
.config-choices .chip-dot {
  flex: 0 0 18px;
  border-radius: 6px;
}
.config-choices .chip[aria-pressed="true"] .chip-dot {
  background: var(--blue);
  border-color: var(--blue);
}
.config-choices .chips[role="radiogroup"] {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 4px;
  background: white;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 14px;
}
.config-choices .chip.size {
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 10px 6px;
  justify-content: center;
  font-size: 13px;
  white-space: nowrap;
}
.config-choices .chip.size:hover {
  background: var(--bg-soft);
}
.config-choices .chip.size[aria-checked="true"] {
  background: var(--blue);
  color: white;
}
.config-own {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.config-own label {
  margin: 0;
}
.config-number-wrap {
  border-radius: 14px;
  padding: 4px 14px 4px 4px;
}
.config-number-wrap input {
  border-radius: 10px;
  width: 130px;
}
.config-label:not(:first-child) {
  margin-top: 26px;
}
@media (max-width: 760px) {
  .config-choices .chips[role="group"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .config-choices .chips[role="radiogroup"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 4px;
  }
  .config-choices .chip:not(.size) {
    font-size: 12.5px;
    padding: 11px 10px;
  }
}

/* contact */
.contact-v2 .contact-layout {
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
}
.contact-side {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}
.contact-hello {
  position: relative;
  overflow: hidden;
  padding: 34px 32px 30px;
  border-radius: var(--r-block);
  background: linear-gradient(150deg, #0a2d55 0%, #0d4a8a 60%, #1268ad 100%);
  color: white;
}
.hello-mark {
  position: absolute;
  right: -60px;
  bottom: -70px;
  width: 260px;
  height: 260px;
  background: url(/assets/logo/avantimes-beeldmerk-wit.svg) center / contain no-repeat;
  opacity: 0.08;
  animation: slowSpin 60s linear infinite;
}
@keyframes slowSpin {
  to {
    transform: rotate(360deg);
  }
}
.hello-logo {
  display: inline-flex;
  padding: 8px 14px;
  background: white;
  border-radius: 12px;
}
.hello-logo img {
  height: 28px;
  width: auto;
}
.contact-hello h2 {
  color: white;
  margin-top: 22px;
  font-size: clamp(30px, 3vw, 40px);
}
.contact-hello p {
  color: rgba(255, 255, 255, 0.82);
  margin-top: 12px;
  font-size: 15.5px;
  max-width: 380px;
  position: relative;
}
.hello-slogan {
  display: inline-block;
  margin-top: 22px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 158, 27, 0.16);
  color: #ffc56b;
  font-size: 13px;
  font-weight: 600;
}
.contact-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.c-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--r-card);
  background: white;
  border: 1px solid rgba(10, 37, 64, 0.07);
  box-shadow: var(--sh-1);
  min-width: 0;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    border-color 0.2s;
}
.c-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
  border-color: rgba(0, 131, 198, 0.3);
}
.c-tile span:last-child {
  min-width: 0;
}
.c-tile small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
}
.c-tile b {
  display: block;
  font-size: 14px;
  color: var(--deep);
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.c-ic {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #e7f3fb;
  color: var(--blue);
  transition: background 0.2s, color 0.2s;
}
.c-tile:hover .c-ic {
  background: var(--blue);
  color: white;
}
.c-ic svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-main {
  min-width: 0;
}
.form-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: #eef3f7;
}
.form-tabs button {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  padding: 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
  color: #6b8193;
  transition: color 0.25s;
}
.form-tabs button[aria-selected="true"] {
  color: var(--deep);
}
.form-tabs-pill {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(50% - 5px);
  border-radius: 999px;
  background: white;
  box-shadow: 0 2px 10px -2px rgba(10, 37, 64, 0.18);
  transition: transform 0.45s var(--ease);
}
.form-tabs.sup .form-tabs-pill {
  transform: translateX(100%);
}
.contact-v2 .form-box {
  background: white;
  border: 1px solid rgba(10, 37, 64, 0.07);
  box-shadow: var(--sh-1);
  animation: panelIn 0.45s var(--ease) both;
}
.contact-v2 .form-box > p {
  font-size: 13px;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.human-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.human-q {
  font-weight: 700;
  color: var(--deep);
  font-size: 15px;
  white-space: nowrap;
}
.human-row input {
  max-width: 110px;
}
.human-ok {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e3f6ec;
  color: #14784a;
  font-weight: 800;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.25s,
    transform 0.35s var(--ease);
}
.human.ok .human-ok {
  opacity: 1;
  transform: none;
}
.support-form.sent {
  border-color: rgba(30, 158, 98, 0.35);
}
@media (max-width: 760px) {
  .contact-v2 .contact-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .contact-tiles {
    grid-template-columns: 1fr;
  }
  .contact-hello {
    padding: 26px 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hello-mark {
    animation: none;
  }
}
.c-support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--r-card);
  background: #fff6e8;
  border: 1px solid #ffe1b3;
  color: #6b4400;
  font-size: 13.5px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.c-support b {
  display: block;
  color: #4a2f00;
  font-size: 15px;
}
.c-support:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(255, 140, 0, 0.6);
}
.config-choices .chip:not(.size) {
  min-width: 0;
  overflow-wrap: anywhere;
}
.config-choices .chip:not(.size) {
  hyphens: auto;
}
.config-number-wrap input {
  width: 110px;
}

/* v13: "Grip" niet afgesneden, supportknop, kleurverschil tussen secties */
.hero-premium h1 em {
  display: inline-block;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  line-height: 1;
}
.nav-support {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0, 131, 198, 0.3);
  background: #eef7fd;
  color: var(--deep);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}
.nav-support:hover {
  background: #dff0fb;
  border-color: var(--blue);
}
.nav-support-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #23a35a;
  box-shadow: 0 0 0 3px rgba(35, 163, 90, 0.18);
}
.nav-inner {
  gap: 14px;
}
.nav-links {
  margin-right: 10px;
}
.nav-support-m {
  display: none;
}
@media (max-width: 1050px) {
  .nav-support {
    padding: 9px 12px;
  }
}
@media (max-width: 760px) {
  .nav-support {
    display: none;
  }
  .nav-links.open .nav-support-m {
    display: block;
    margin-top: 8px;
    padding: 12px;
    border-radius: 12px;
    background: #eef7fd;
    color: var(--deep);
    font-weight: 650;
  }
}

/* feitenstrook: eigen kleur, los van het witte blok eronder */
.facts {
  background: #eaf4fb;
  padding: 26px 0;
}
.fact,
.fact + .fact {
  background: white;
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.04);
}
.fact .icon {
  background: var(--blue);
  color: white;
  box-shadow: none;
}

/* vergelijking wit, keuzehulp op lichtblauw */
.compare {
  background: white;
  padding-bottom: 110px;
}
.configurator {
  background: #eaf4fb;
  padding-top: 110px;
}
.config-layout {
  background: white;
  box-shadow: var(--sh-1);
}
@media (max-width: 760px) {
  .compare {
    padding-bottom: 72px;
  }
  .configurator {
    padding-top: 72px;
  }
}
@media (max-width: 760px) {
  .nav-links.open {
    gap: 2px;
    padding: 12px;
  }
  .nav-links.open a {
    padding: 12px 14px;
    line-height: 1.3;
    border-radius: 12px;
  }
  .nav-links.open a:not(.nav-support-m):hover {
    background: var(--bg-soft);
  }
}

/* ======================================================
   v14: softwarepagina
   ====================================================== */
.subhero-split .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.subhero-split .subhero-mark {
  display: none;
}
.subhero-split h1 {
  max-width: 620px;
}
.sw-hero-copy {
  min-width: 0;
}
.sw-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.subhero-split .sw-hero-actions .btn {
  margin-top: 0;
}
.sw-visual {
  min-width: 0;
}
.sw-panel {
  padding: 18px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 60px -30px rgba(0, 20, 50, 0.6);
}
.sw-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 14px;
  font-size: 13px;
  font-weight: 650;
  color: white;
}
.sw-panel-head img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: white;
  padding: 2px;
}
.sw-panel-head i {
  margin-left: auto;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}
.sw-base {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: white;
  color: var(--ink);
}
.sw-base .icon {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--amber);
  color: #083e71;
}
.sw-base small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
}
.sw-base b {
  font-size: 17px;
  color: var(--deep);
}
.sw-base em {
  margin-left: auto;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 650;
  color: #14784a;
  background: #e3f6ec;
  padding: 5px 10px;
  border-radius: 999px;
}
.sw-mods {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.sw-mod {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 6px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: white;
  font-size: 11.5px;
  font-weight: 550;
  text-align: center;
  min-width: 0;
  animation: modOn 9.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 1.2s);
}
.sw-mod span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sw-mod .icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  transition: background 0.4s;
}
.sw-mod .icon svg {
  width: 19px;
  height: 19px;
}
@keyframes modOn {
  0%,
  14%,
  100% {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
  }
  4%,
  10% {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 197, 107, 0.7);
  }
}

/* de basis */
.sw-feature {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.sw-feature-copy {
  min-width: 0;
}
.sw-feature-copy p {
  font-size: 16px;
  margin-top: 16px;
}
.sw-feature-img {
  min-width: 0;
  padding: 22px;
  border-radius: var(--r-block);
  background: linear-gradient(160deg, #0a2d55, #0d4a8a 60%, #1268ad);
  box-shadow: var(--sh-2);
}
.sw-feature-img img {
  border-radius: 10px;
}

/* hoe het werkt */
.sw-flow {
  padding: 0 0 100px;
}
.flow {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  counter-reset: flow;
}
.flow:before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 27px;
  height: 2px;
  background: repeating-linear-gradient(90deg, #b9dcf1 0 8px, transparent 8px 14px);
}
.flow li {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
  min-width: 0;
}
.flow-ic .icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: white;
  color: var(--blue);
  border: 1px solid #d6e8f5;
  box-shadow: var(--sh-1);
  margin-bottom: 8px;
}
.flow li:last-child .flow-ic .icon {
  background: var(--amber);
  color: #083e71;
  border-color: var(--amber);
}
.flow b {
  font-size: 16px;
  color: var(--ink);
}
.flow li > span:last-child {
  font-size: 13.5px;
  color: var(--muted);
  max-width: 230px;
}

/* modules met filter */
.sw-filter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  margin-bottom: 26px;
  border-radius: 999px;
  background: white;
  border: 1px solid rgba(10, 37, 64, 0.07);
}
.sw-filter button {
  border: 0;
  background: transparent;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: #6b8193;
  transition: background 0.25s, color 0.25s;
}
.sw-filter button:hover {
  color: var(--deep);
}
.sw-filter button[aria-pressed="true"] {
  background: var(--deep);
  color: white;
}
.sw-grid .module-card.pop {
  animation: panelIn 0.45s var(--ease) both;
}
.sw-app {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding: 16px 22px 16px 16px;
  border-radius: var(--r-card);
  background: white;
  border: 1px solid rgba(10, 37, 64, 0.06);
  box-shadow: var(--sh-1);
  font-size: 13.5px;
  color: var(--muted);
  transition: box-shadow 0.3s, transform 0.3s var(--ease);
}
.sw-app:hover {
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.sw-app b {
  display: block;
  font-size: 16px;
  color: var(--ink);
}
.sw-app > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.sw-app-ic img {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}

@media (max-width: 960px) {
  .subhero-split .wrap,
  .sw-feature {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .flow {
    grid-template-columns: 1fr 1fr;
    row-gap: 30px;
  }
  .flow:before {
    display: none;
  }
}
@media (max-width: 560px) {
  .sw-mods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sw-filter {
    border-radius: 18px;
  }
  .sw-filter button {
    padding: 9px 13px;
    font-size: 12.5px;
  }
  .sw-flow {
    padding-bottom: 70px;
  }
  .sw-feature-img {
    padding: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sw-mod {
    animation: none;
  }
}
.flow li {
  align-content: start;
}
.sw-app-card {
  background: linear-gradient(150deg, #0a2d55, #0d4a8a 60%, #1268ad);
  border-color: transparent;
  color: white;
}
.sw-app-card h3 {
  color: white;
}
.sw-app-card p {
  color: rgba(255, 255, 255, 0.78);
}
.sw-app-card .text-link {
  color: white;
}
.sw-app-card .sw-app-ic img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin-bottom: 24px;
}

/* ======================================================
   v15: chat rechtsonder + stroom door de stappenbalk
   ====================================================== */
.mobile-call {
  display: none !important;
}
.chat {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  font-family: Inter, Arial, sans-serif;
}
.chat-launch {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: white;
  box-shadow:
    0 0 0 6px rgba(0, 131, 198, 0.12),
    0 14px 34px -10px rgba(1, 78, 155, 0.55);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.3s;
}
.chat-launch:hover {
  transform: scale(1.06);
}
.chat-launch img {
  width: 40px;
  height: 40px;
  transition: opacity 0.2s, transform 0.35s var(--ease);
}
.chat-launch-x {
  position: absolute;
  font-size: 28px;
  line-height: 1;
  color: var(--deep);
  opacity: 0;
  transform: rotate(-90deg);
  transition: opacity 0.2s, transform 0.35s var(--ease);
}
.chat.open .chat-launch img {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}
.chat.open .chat-launch-x {
  opacity: 1;
  transform: none;
}
.chat-launch:after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #23a35a;
  border: 2px solid white;
}
.chat.open .chat-launch:after {
  display: none;
}
.chat-teaser {
  position: absolute;
  right: 72px;
  bottom: 10px;
  width: max-content;
  max-width: 230px;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  background: white;
  color: var(--ink);
  font-size: 13px;
  box-shadow: var(--sh-2);
  cursor: pointer;
  animation: panelIn 0.5s var(--ease) both;
}
.chat-teaser b {
  color: var(--deep);
}
.chat-panel {
  position: absolute;
  right: 0;
  bottom: 76px;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: min(540px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background: #f5f8fb;
  border: 1px solid rgba(10, 37, 64, 0.08);
  box-shadow: 0 30px 70px -20px rgba(10, 37, 64, 0.45);
  transform-origin: 100% 100%;
  animation: chatIn 0.4s var(--ease) both;
}
@keyframes chatIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
}
.chat-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 16px 18px;
  background: linear-gradient(150deg, #0a2d55, #0d4a8a 60%, #1268ad);
  color: white;
  overflow: hidden;
}
.chat-head:after {
  content: "";
  position: absolute;
  right: -40px;
  top: -50px;
  width: 150px;
  height: 150px;
  background: url(/assets/logo/avantimes-beeldmerk-wit.svg) center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
}
.chat-av {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  display: grid;
  place-items: center;
}
.chat-av img {
  width: 30px;
  height: 30px;
}
.chat-head b {
  display: block;
  font-size: 15px;
}
.chat-head small {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.75);
}
.chat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
}
.chat-close {
  margin-left: auto;
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: white;
  font-size: 20px;
  line-height: 1;
}
.chat-close:hover {
  background: rgba(255, 255, 255, 0.24);
}
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}
.msg {
  max-width: 84%;
  padding: 10px 13px;
  font-size: 13.5px;
  line-height: 1.5;
  animation: panelIn 0.35s var(--ease) both;
}
.msg.bot {
  align-self: flex-start;
  background: white;
  color: var(--ink);
  border-radius: 4px 16px 16px 16px;
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.06);
}
.msg.me {
  align-self: flex-end;
  background: var(--deep);
  color: white;
  border-radius: 16px 4px 16px 16px;
}
.msg.typing {
  display: flex;
  gap: 4px;
  padding: 13px 14px;
}
.msg.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9fb4c7;
  animation: dots 1s infinite ease-in-out;
}
.msg.typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.msg.typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes dots {
  40% {
    transform: translateY(-4px);
    background: var(--blue);
  }
}
.chat-opts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin: 2px 0 6px;
  animation: panelIn 0.4s var(--ease) both;
}
.chat-opts button {
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(0, 131, 198, 0.35);
  background: white;
  color: var(--deep);
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.chat-opts button:hover:not(:disabled) {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}
.chat-opts.used {
  display: none;
}
.chat-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  animation: panelIn 0.4s var(--ease) both;
}
.chat-links a {
  padding: 8px 13px;
  border-radius: 12px;
  background: #fff3df;
  color: #6b4400;
  font-size: 12.5px;
  font-weight: 650;
}
.chat-links a:first-child {
  background: var(--amber);
  color: #083e71;
}
.chat-input {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: white;
  border-top: 1px solid rgba(10, 37, 64, 0.06);
}
.chat-input input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(10, 37, 64, 0.12);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  outline: 0;
}
.chat-input input:focus {
  border-color: var(--blue);
}
.chat-input button {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--blue);
  color: white;
  display: grid;
  place-items: center;
}
.chat-input svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-foot {
  margin: 0;
  padding: 0 12px 10px;
  background: white;
  font-size: 10.5px;
  text-align: center;
  color: #8b9bab;
}
.chat-foot a {
  color: var(--deep);
}
@media (max-width: 560px) {
  .chat {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .chat-launch {
    width: 54px;
    height: 54px;
  }
  .chat-launch img {
    width: 36px;
    height: 36px;
  }
  .chat-panel {
    position: fixed;
    right: 10px;
    left: 10px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    height: min(560px, calc(100vh - 120px));
  }
}

/* stroom door de stappen: rustig en geleidelijk */
.flow:after {
  content: "";
  position: absolute;
  left: 12%;
  top: 25px;
  width: 90px;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent, rgba(0, 131, 198, 0.55), rgba(255, 158, 27, 0.7), transparent);
  filter: blur(1.5px);
  animation: flowRun 12s ease-in-out infinite;
  pointer-events: none;
}
@keyframes flowRun {
  0% {
    transform: translateX(-40px);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(76vw - 20px));
    opacity: 0;
  }
}
@supports (width: 1cqw) {
  .flow {
    container-type: inline-size;
  }
  @keyframes flowRun {
    0% {
      transform: translateX(-40px);
      opacity: 0;
    }
    8% {
      opacity: 1;
    }
    88% {
      opacity: 1;
    }
    100% {
      transform: translateX(calc(76cqw - 60px));
      opacity: 0;
    }
  }
}
.flow-ic .icon {
  animation: flowGlow 12s ease-in-out infinite;
  animation-delay: calc(var(--i) * 3s - 0.6s);
}
@keyframes flowGlow {
  0%,
  16%,
  100% {
    box-shadow: var(--sh-1);
    transform: none;
  }
  6% {
    box-shadow:
      0 0 0 8px rgba(0, 131, 198, 0.1),
      var(--sh-1);
    transform: scale(1.05);
  }
}
@media (max-width: 960px) {
  .flow:after {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .flow:after,
  .flow-ic .icon {
    animation: none;
  }
}

/* v16: koppelingen levendiger */
.hub-core b {
  font-size: clamp(12px, 1.2vw, 15px);
}
.hub-core small {
  font-size: clamp(9.5px, 0.85vw, 11px);
  color: var(--muted);
  margin-top: -4px;
}
.hub-ball {
  fill: var(--blue);
}
.hub-ball.in {
  fill: var(--amber);
}
.hub-node {
  animation: bob 6s ease-in-out infinite;
}
.hub-node:nth-of-type(2n) {
  animation-delay: -3s;
}
.hub-node:nth-of-type(3n) {
  animation-duration: 7s;
}
@keyframes bob {
  50% {
    translate: 0 -5px;
  }
}
.hub-core {
  animation: corePulse 4s ease-in-out infinite;
}
@keyframes corePulse {
  50% {
    box-shadow:
      0 0 0 14px rgba(0, 131, 198, 0.1),
      0 0 0 30px rgba(0, 131, 198, 0.05),
      var(--sh-2);
  }
}
.int-steps {
  background: #eaf4fb;
}
.int-steps .flow-ic .icon {
  background: white;
}
.int-ask {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding: 24px 28px;
  border-radius: var(--r-card);
  background: white;
  box-shadow: var(--sh-1);
}
.int-ask b {
  display: block;
  font-size: 18px;
  color: var(--ink);
}
.int-ask span {
  font-size: 14px;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .hub-node,
  .hub-core {
    animation: none;
  }
  .hub-ball {
    display: none;
  }
}
[hidden] {
  display: none !important;
}

/* v17: knoppen vlak, zonder zwevende gloed */
.btn,
.btn:hover,
.btn.blue,
.btn.white,
.btn-lg,
.nav-cta,
.hero-mail .btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn {
  background: var(--amber);
}
.btn:hover {
  background: #ffab33;
  filter: none;
  transform: none;
}
.btn:active {
  transform: scale(0.98);
  box-shadow: none;
}
.btn.blue {
  background: var(--deep);
  box-shadow: none;
}
.btn.blue:hover {
  background: #0160b8;
}
.btn-glass,
.btn-glass:hover {
  box-shadow: none;
}

/* v18: feitenstrook als zwevende balk over de onderrand van de hero */
.hero.hero-premium {
  padding-bottom: 120px;
}
.facts {
  position: relative;
  z-index: 3;
  background: transparent;
  padding: 0;
  margin-top: -52px;
}
.facts-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 8px;
  border-radius: 22px;
  background: white;
  border: 1px solid rgba(10, 37, 64, 0.06);
  box-shadow: 0 24px 50px -24px rgba(10, 37, 64, 0.45);
}
.fact,
.fact + .fact {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 16px 18px;
  gap: 12px;
}
.fact + .fact {
  border-left: 1px solid #e9eff4;
}
.fact .icon {
  display: grid;
  flex: 0 0 40px;
  height: 40px;
  background: #e7f3fb;
  color: var(--blue);
}
.fact strong {
  font-size: 18px;
}
.product-section {
  padding-top: 96px;
}
@media (max-width: 1050px) {
  .facts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .fact + .fact {
    border-left: 0;
  }
  .fact:nth-child(2n) {
    border-left: 1px solid #e9eff4;
  }
  .fact:nth-child(n + 3) {
    border-top: 1px solid #e9eff4;
  }
}
@media (max-width: 600px) {
  .hero.hero-premium {
    padding-bottom: 84px;
  }
  .facts {
    margin-top: -40px;
  }
  .facts-grid {
    padding: 4px;
    border-radius: 18px;
  }
  .fact,
  .fact + .fact {
    padding: 14px 12px;
  }
  .fact .icon {
    display: none;
  }
  .fact strong {
    font-size: 16px;
  }
  .product-section {
    padding-top: 64px;
  }
}
.facts-grid {
  width: calc(100% - 76px);
  max-width: 1164px;
  margin-inline: auto;
}
@media (min-width: 1450px) {
  .facts-grid {
    max-width: 1274px;
  }
}
@media (max-width: 1050px) {
  .facts-grid {
    width: calc(100% - 52px);
  }
}
@media (max-width: 760px) {
  .facts-grid {
    width: calc(100% - 42px);
  }
}

/* v19: "Software van Astrow" licht met tijdlijn (variant A) */
.service-section {
  background: #eaf4fb;
  color: var(--ink);
}
.service-section h2,
.service-section h3 {
  color: var(--ink);
}
.service-section .eyebrow {
  color: var(--deep);
}
.service-section p,
.service-section .experience span {
  color: var(--muted);
}
.service-section .text-link {
  color: var(--deep);
}
.service-layout {
  align-items: center;
}
.service-section .experience {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 10px 20px 10px 14px;
  border: 0;
  border-radius: 999px;
  background: white;
  box-shadow: var(--sh-1);
}
.service-section .experience strong {
  font-size: 26px;
  letter-spacing: -1px;
  color: var(--amber);
}
.service-section .experience span {
  font-size: 13.5px;
  color: var(--ink);
}
.svc-timeline {
  position: relative;
}
.svc-timeline:before {
  content: "";
  position: absolute;
  left: 21px;
  top: 22px;
  bottom: 40px;
  width: 2px;
  background: #bfdcef;
}
.service-section .step,
.service-section .step:first-child {
  position: relative;
  gap: 18px;
  padding: 0 0 30px;
  border: 0;
}
.service-section .step:last-child {
  padding-bottom: 0;
}
.service-section .step:hover {
  padding-left: 0;
}
.service-section .step-index {
  position: relative;
  z-index: 1;
  flex: 0 0 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: white;
  font-size: 16px;
  box-shadow: 0 0 0 6px #eaf4fb;
  transition: background 0.25s;
}
.service-section .step:last-child .step-index {
  background: var(--amber);
  color: #083e71;
}
.service-section .step:hover .step-index {
  background: var(--deep);
  color: white;
}
.service-section .step h3 {
  margin: 8px 0 6px;
  font-size: 20px;
}
.service-section .step p {
  font-size: 14.5px;
}
.service-section .experience {
  display: flex;
  width: max-content;
  max-width: 100%;
}

/* ======================================================
   v20: hero H5 – wisselend woord, branchekeuze, logo's op vaste plekken
   ====================================================== */
.hero-slogan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #9fd0ee;
}
.hero-slogan:before,
.hero-slogan:after {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--amber);
}
.hero-premium h1.hero-rot-h {
  max-width: none;
  margin-top: 22px;
}
.hero-rot {
  display: grid;
  height: 1.08em;
  overflow: hidden;
  color: #ffb445;
}
.hero-rot > span {
  grid-area: 1 / 1;
  justify-self: center;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(70%);
  animation: rotWord 14s infinite;
}
.hero-rot > span:nth-child(2) {
  animation-delay: 3.5s;
}
.hero-rot > span:nth-child(3) {
  animation-delay: 7s;
}
.hero-rot > span:nth-child(4) {
  animation-delay: 10.5s;
}
@keyframes rotWord {
  0% {
    opacity: 0;
    transform: translateY(70%);
  }
  4%,
  22% {
    opacity: 1;
    transform: none;
  }
  26%,
  100% {
    opacity: 0;
    transform: translateY(-70%);
  }
}
.hero-branches {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 30px;
}
.hero-branches > span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
}
.hero-branches > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.hero-branches a {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  color: white;
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.hero-branches a:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: #083e71;
}
.hero-logos {
  margin-top: 44px;
}
.hero-logo-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}
.hero-slot {
  display: grid;
  place-items: center;
  height: 64px;
  padding: 0 12px;
  transition:
    opacity 0.9s ease,
    transform 0.9s var(--ease);
}
.hero-slot.out {
  opacity: 0;
  transform: translateY(-8px);
}
.hero-slot img {
  width: calc(var(--w) * 0.8);
  height: calc(var(--h) * 0.8);
  max-width: 100%;
  object-fit: contain;
  opacity: 0.88;
}
@media (max-width: 560px) {
  .hero-logo-slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hero-slot:nth-child(n + 4) {
    display: none;
  }
  .hero-slot img {
    width: calc(var(--w) * 0.6);
    height: calc(var(--h) * 0.6);
  }
  .hero-slogan {
    font-size: 10.5px;
    letter-spacing: 2px;
  }
  .hero-slogan:before,
  .hero-slogan:after {
    width: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-rot > span {
    animation: none;
  }
  .hero-rot > span:first-child {
    opacity: 1;
    transform: none;
  }
}

/* v21: Excel naar overzicht met AvanTimes */
.compare-grid {
  position: relative;
}
.compare-card h3 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ct-ic {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.ct-ic.xl {
  background: #1d6f42;
  color: white;
  font: 800 15px/1 Inter, Arial, sans-serif;
}
.ct-ic.av {
  background: white;
  border-radius: 50%;
}
.ct-ic.av img {
  width: 26px;
  height: 26px;
}
.compare-arrows {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 6px;
  width: 150px;
  transform: translateX(-50%);
  pointer-events: none;
}
.compare-arrows svg {
  display: block;
  width: 100%;
  overflow: visible;
}
.compare-arrows path {
  fill: none;
  stroke: var(--amber);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.compare-arrows .ca1 {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: caDraw 4s ease-in-out infinite;
}
.compare-arrows .ca-head {
  opacity: 0;
  animation: caHead 4s ease-in-out infinite;
}
@keyframes caDraw {
  0% {
    stroke-dashoffset: 150;
  }
  35%,
  85% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes caHead {
  0%,
  30% {
    opacity: 0;
  }
  38%,
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.compare-arrows .ca-small {
  display: none;
}
.compare-card.new {
  padding-top: 30px;
}
.new-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  margin: 6px 0 24px;
}
.new-list > div {
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: 12px;
}
.new-list > div:before {
  content: "✓";
  grid-row: span 2;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  color: white;
  font-size: 12px;
  font-weight: 800;
}
.new-list b {
  font-size: 16px;
  color: white;
}
.new-list span {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}
.new-week {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 14px;
  width: 100%;
  margin-bottom: 26px;
  padding: 14px 18px;
  border-radius: 16px;
  background: white;
  color: var(--ink);
}
.new-week > span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.new-week i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #23a35a;
}
.new-week b {
  grid-column: 1;
  font-size: 15px;
  color: var(--deep);
}
.new-week em {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 650;
  color: #14784a;
  background: #e3f6ec;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 860px) {
  .compare-arrows {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 46px;
    margin: -4px auto;
    order: 1;
  }
  .compare-arrows svg:first-child {
    display: none;
  }
  .compare-arrows .ca-small {
    display: block;
    transform: rotate(90deg);
  }
  .compare-card.old {
    order: 0;
  }
  .compare-card.new {
    order: 2;
  }
  .compare-grid {
    display: flex;
    flex-direction: column;
  }
  .new-week {
    grid-template-columns: 1fr;
  }
  .new-week em {
    grid-row: auto;
    grid-column: 1;
    justify-self: start;
    margin-top: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .compare-arrows .ca1 {
    animation: none;
    stroke-dashoffset: 0;
  }
  .compare-arrows .ca-head {
    animation: none;
    opacity: 1;
  }
}
/* pijl tussen de kopjes */
.compare-arrows,
.compare-arrows svg {
  animation: none;
}
.compare-arrows {
  top: 30px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: white;
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 6px rgba(255, 158, 27, 0.15),
    0 10px 24px -10px rgba(10, 37, 64, 0.45);
  animation: caNudge 2.4s ease-in-out infinite;
}
.compare-arrows svg {
  width: 24px;
  height: 24px;
}
.compare-arrows svg path {
  stroke: var(--amber);
  stroke-width: 2.6;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 1;
  animation: none;
}
@keyframes caNudge {
  50% {
    box-shadow:
      0 0 0 11px rgba(255, 158, 27, 0.08),
      0 10px 24px -10px rgba(10, 37, 64, 0.45);
  }
}
.compare-arrows svg {
  animation: caMove 2.4s ease-in-out infinite;
}
@keyframes caMove {
  50% {
    transform: translateX(3px);
  }
}
@media (max-width: 860px) {
  .compare-arrows {
    width: 48px;
    height: 48px;
    margin: -22px auto;
    z-index: 3;
  }
  .compare-arrows svg:first-child {
    display: block;
    transform: rotate(90deg);
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .compare-arrows,
  .compare-arrows svg {
    animation: none;
  }
}

/* ======================================================
   v22: productblok als rustig uitschuivende panelen (P4)
   ====================================================== */
.pp {
  display: flex;
  gap: 12px;
  height: 500px;
  margin-top: 34px;
}
.pp-panel {
  position: relative;
  flex: 0 0 96px;
  min-width: 0;
  border-radius: var(--r-block);
  background: var(--bg-soft);
  overflow: hidden;
  transition:
    flex-grow 1.4s cubic-bezier(0.65, 0, 0.35, 1),
    flex-basis 1.4s cubic-bezier(0.65, 0, 0.35, 1),
    background-color 1.2s ease;
}
.pp-panel.on {
  flex: 1 1 auto;
  background: linear-gradient(150deg, #0a2d55 0%, #0d4a8a 60%, #1268ad 100%);
}
.pp-panel:not(.on):hover {
  background: #e6f0f7;
}
.pp-head {
  position: absolute;
  inset: 0 auto 0 0;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 26px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.8s ease;
}
.pp-head .icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: white;
  color: var(--blue);
  box-shadow: var(--sh-1);
}
.pp-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.pp-bar {
  display: none;
}
.pp-panel.on .pp-head {
  inset: 0 0 auto 0;
  width: auto;
  flex-direction: row;
  justify-content: flex-start;
  padding: 26px 30px 0;
  color: white;
  cursor: default;
}
.pp-panel.on .pp-head .icon {
  background: rgba(255, 255, 255, 0.14);
  color: white;
  box-shadow: none;
}
.pp-panel.on .pp-title {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
}
.pp-panel.on .pp-bar {
  display: block;
  margin-left: auto;
  width: 90px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.pp-bar b {
  display: block;
  height: 100%;
  background: var(--amber);
  transform-origin: left;
  transform: scaleX(0);
}
.pp.manual .pp-bar {
  display: none !important;
}
.pp-body {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 28px;
  align-items: center;
  padding: 90px 30px 28px;
  color: white;
  opacity: 0;
  visibility: hidden;
  min-width: 760px;
  transition:
    opacity 0.9s ease,
    visibility 0s linear 0.9s;
}
.pp-panel.on .pp-body {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.1s ease 0.6s,
    visibility 0s;
}
.pp-copy {
  min-width: 0;
}
.pp-copy h3 {
  font-size: clamp(24px, 2.4vw, 32px);
  color: white;
  letter-spacing: -0.035em;
}
.pp-copy p {
  margin-top: 12px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
}
.pp-points {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 14.5px;
}
.pp-points li {
  display: flex;
  gap: 10px;
}
.pp-points li:before {
  content: "✓";
  flex: 0 0 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
  font-size: 11px;
  font-weight: 800;
}
.pp-copy .text-link {
  color: white;
}
.pp-vis {
  min-width: 0;
  display: grid;
  place-items: center;
}
.pp-shot {
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
}
.pp-shot img {
  border-radius: 10px;
  max-height: 330px;
  width: auto;
  object-fit: contain;
}
.pp-vis .phone-trio {
  max-width: 360px;
}
.pp-vis .phone-trio:before {
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
}
.pp-vis .phone-duo > div {
  width: min(150px, 42%);
}
@media (max-width: 1050px) {
  .pp-body {
    min-width: 640px;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 860px) {
  .pp {
    flex-direction: column;
    height: auto;
    gap: 10px;
  }
  .pp-panel,
  .pp-panel.on {
    flex: 0 0 auto;
  }
  .pp-head,
  .pp-panel.on .pp-head {
    position: relative;
    inset: auto;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    padding: 16px 18px;
  }
  .pp-title,
  .pp-panel.on .pp-title {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 16px;
  }
  .pp-body {
    position: relative;
    inset: auto;
    min-width: 0;
    grid-template-columns: 1fr;
    padding: 0 18px;
    max-height: 0;
    transition:
      max-height 1.2s cubic-bezier(0.65, 0, 0.35, 1),
      opacity 0.8s ease,
      padding 1.2s ease;
  }
  .pp-panel.on .pp-body {
    max-height: 1100px;
    padding: 4px 18px 22px;
  }
  .pp-shot img {
    max-height: 220px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pp-panel,
  .pp-body {
    transition: none !important;
  }
}
@media (max-width: 860px) {
  .pp-panel.on .pp-bar {
    display: none;
  }
}

/* v23: app-blok medewerkers / leidinggevenden (A4) */
.app-roles-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.app-roles-head .eyebrow {
  justify-content: center;
}
.app-roles-head p {
  margin-top: 14px;
  font-size: 16px;
}
.app-roles-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 46px;
}
.role-card {
  padding: 28px;
  border-radius: var(--r-block);
  background: var(--bg-soft);
}
.role-card.dark {
  background: linear-gradient(150deg, #0a2d55 0%, #0d4a8a 60%, #1268ad 100%);
  color: white;
}
.role-tag {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: white;
  color: var(--deep);
  font-size: 13px;
  font-weight: 700;
}
.role-card ul {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: 16px;
}
.role-card li {
  display: flex;
  gap: 12px;
  align-items: center;
}
.role-card li:before {
  content: "✓";
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e1f1fb;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
}
.role-card.dark li:before {
  background: rgba(255, 255, 255, 0.16);
  color: white;
}
.role-phone {
  width: 210px;
  filter: drop-shadow(0 24px 24px rgba(13, 64, 105, 0.22));
}
.app-roles-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 36px;
  text-align: center;
}
.app-roles-foot .store-buttons {
  justify-content: center;
  margin-top: 0;
}
.app-roles-foot .fineprint a {
  color: var(--deep);
  font-weight: 650;
}
@media (max-width: 860px) {
  .app-roles-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 22px;
  }
  .role-card {
    width: 100%;
  }
  .role-phone {
    order: -1;
    width: 180px;
  }
}
.app-roles-head {
  max-width: 820px;
}
.app-roles-head h2 {
  text-wrap: balance;
}

/* v24: branchepagina als fotomozaïek (B4) */
.br-mosaic {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-rows: 280px 280px;
  gap: 14px;
}
.br-intro {
  grid-column: 1;
  grid-row: 1;
  padding: 30px;
  border-radius: var(--r-block);
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.br-intro h2 {
  font-size: clamp(28px, 2.8vw, 38px);
}
.br-intro p {
  margin-top: 12px;
  font-size: 15px;
}
.br-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  border-radius: var(--r-block);
  background-size: cover;
  background-position: center;
  color: white;
  transition: background-size 0.8s var(--ease);
}
.br-tile:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 40, 80, 0) 30%, rgba(1, 40, 80, 0.9) 100%);
  transition: opacity 0.4s;
}
.br-tile > div {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 22px;
}
.br-tile b {
  font-size: 22px;
  letter-spacing: -0.02em;
}
.br-tile span {
  font-size: 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
  max-width: 34ch;
}
.br-tile small {
  font-size: 12px;
  font-weight: 650;
  color: #ffc56b;
}
.br-tile em {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  margin-top: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s, transform 0.35s var(--ease);
}
.br-tile:hover em,
.br-tile:focus-visible em {
  opacity: 1;
  transform: none;
}
.br-tile.t0 {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.br-tile.t1 {
  grid-column: 3;
  grid-row: 1;
}
.br-tile.t2 {
  grid-column: 1;
  grid-row: 2;
}
.br-tile.t3 {
  grid-column: 3;
  grid-row: 2;
}
.br-other {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding: 24px 28px;
  border-radius: var(--r-card);
  background: #eaf4fb;
}
.br-other > div {
  flex: 1 1 420px;
  min-width: 0;
}
.br-other b {
  display: block;
  font-size: 18px;
  color: var(--ink);
}
.br-other span {
  font-size: 14.5px;
  color: var(--muted);
}
@media (max-width: 960px) {
  .br-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .br-intro {
    grid-column: 1 / -1;
  }
  .br-tile.t0,
  .br-tile.t1,
  .br-tile.t2,
  .br-tile.t3 {
    grid-column: auto;
    grid-row: auto;
    min-height: 260px;
  }
  .br-tile em {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 560px) {
  .br-mosaic {
    grid-template-columns: 1fr;
  }
  .br-intro {
    padding: 24px;
  }
}

/* v25 – branchetegels beter leesbaar */
.br-tile:before{background:linear-gradient(180deg,rgba(1,40,80,.05) 0%,rgba(1,40,80,.25) 30%,rgba(1,40,80,.72) 58%,rgba(1,32,66,.95) 100%)}
.br-tile b,.br-tile span,.br-tile small{text-shadow:0 1px 12px rgba(1,30,60,.45)}

/* v26 – koppelingen-hero M3: van registratie naar pakket */
.int-hero .wrap{grid-template-columns:.92fr 1.08fr}
.int-flow{min-width:0}
.if-net{position:relative;width:100%;max-width:540px;margin-left:auto;aspect-ratio:440/400}
.if-net>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.if-line{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.1}
.if-line.s{stroke-dasharray:3 4}
.if-dot{fill:#fff;filter:drop-shadow(0 0 4px rgba(255,255,255,.9))}
.if-lab{position:absolute;top:-2%;transform:translateX(-50%);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.58);font-weight:650;white-space:nowrap}
.if-src{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:7px 12px 7px 10px;white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.if-src svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.if-core{position:absolute;transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center;gap:8px;background:#fff;color:#014e9b;font-weight:750;font-size:14.5px;letter-spacing:-.01em;padding:11px 16px 11px 11px;border-radius:999px;box-shadow:0 14px 34px -12px rgba(0,20,50,.55)}
.if-core img{width:26px;height:26px}
.if-core:before{content:"";position:absolute;inset:-10px;border-radius:999px;border:1px solid rgba(255,255,255,.35);animation:ifpulse 4.5s ease-out infinite}
@keyframes ifpulse{0%{opacity:.7;transform:scale(.92)}100%{opacity:0;transform:scale(1.18)}}
.if-n{position:absolute;transform:translate(-50%,-50%);z-index:1;width:96px;height:38px;border-radius:999px;background:#fff;display:grid;place-items:center;box-shadow:0 10px 26px -14px rgba(0,20,50,.6);--s:.64}
.if-n img{width:calc(var(--lw) * var(--s));height:auto;max-width:none;max-height:none}
.if-more{background:transparent;border:1px dashed rgba(255,255,255,.55);box-shadow:none;color:rgba(255,255,255,.9);font-size:10.5px;line-height:1.25;text-align:center;font-weight:550}
.int-intro{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.int-intro p{margin-top:0}
@media (prefers-reduced-motion:reduce){.if-core:before{animation:none}.if-dot{display:none}}
@media (max-width:960px){.int-hero .wrap{grid-template-columns:1fr;gap:34px}.if-net{margin:10px auto 0}.int-intro{grid-template-columns:1fr;gap:16px}}
@media (max-width:560px){.if-n{width:72px;height:30px;--s:.5}.if-more{font-size:9px}.if-src{font-size:10px;padding:5px 8px;gap:4px}.if-src svg{width:12px;height:12px}.if-core{font-size:12px;padding:8px 12px 8px 8px;gap:6px}.if-core img{width:20px;height:20px}.if-core:before{inset:-7px}.if-lab{font-size:9px;letter-spacing:1px}}

/* v27 – stroom buigt om de bolletjes heen */
.flow.flow-js:after{display:none}
.flow-stream{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:0}
.flow li{z-index:1}
.flow-stream path{fill:none;stroke-linecap:round;opacity:0}
.fs-tail{stroke:rgba(0,131,198,.55);stroke-width:3.5;filter:blur(1.2px)}
.fs-head{stroke:rgba(255,158,27,.85);stroke-width:3.5;filter:blur(1px)}

/* v28 – Over ons: tegels (O5) */
.ab-bento-sec{padding-top:56px}
.ab-bento{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:190px 190px auto;gap:14px}
.ab-t{position:relative;border-radius:var(--r-block,32px);background:#fff;border:1px solid #e1ecf4;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;color:var(--ink);text-decoration:none;box-shadow:0 18px 40px -30px rgba(10,37,64,.35);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
a.ab-t:hover{transform:translateY(-3px);box-shadow:0 24px 44px -28px rgba(10,37,64,.45)}
.ab-t .c-ic{margin-bottom:auto}
.ab-t b{font-size:17px;letter-spacing:-.01em}
.ab-t span{font-size:14px;color:var(--muted);line-height:1.5}
.ab-photo{grid-row:span 2;background-size:cover;background-position:center;overflow:hidden;border:0}
.ab-photo:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,40,80,.05) 25%,rgba(1,32,66,.92))}
.ab-photo>div{position:relative;display:grid;gap:5px;color:#fff}
.ab-photo b{font-size:24px}.ab-photo span{color:rgba(255,255,255,.84);max-width:420px}
.ab-year{background:linear-gradient(150deg,#0559a6,#0a72bd);border:0;color:#fff}
.ab-year strong{font-size:56px;font-weight:800;letter-spacing:-.05em;line-height:1;margin-bottom:auto}
.ab-year span{color:rgba(255,255,255,.84)}
.ab-quote{background:#014e9b;border:0}
.ab-quote blockquote{margin:0 0 auto;color:#fff;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.4}
.ab-quote small{color:#ffc56b;font-weight:650;font-size:13px}
.ab-li{grid-column:1/-1;flex-direction:row;align-items:center;gap:14px;padding:18px 24px}
.ab-li img{width:30px;height:30px}
.ab-li span{margin-left:auto;color:var(--blue);font-weight:600}
.ab-how .experience strong{font-size:inherit}
@media (max-width:960px){.ab-bento{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:auto}.ab-photo{grid-column:1/-1;grid-row:auto;min-height:260px}.ab-t{min-height:180px}.ab-li{min-height:0}}
@media (max-width:560px){.ab-bento{grid-template-columns:minmax(0,1fr)}.ab-t{min-height:150px}.ab-li{flex-wrap:wrap}.ab-li span{margin-left:0;flex-basis:100%}}
.ab-t .c-ic{align-self:flex-start;margin-bottom:auto}
.ab-li{justify-content:flex-start}
@media (max-width:560px){.ab-photo{min-height:250px}.ab-li{min-height:0}}
.ab-t .c-ic{width:44px;height:44px;flex:0 0 auto}
.ab-t .c-ic{color:#0083c6}

/* v29 – Over ons: ons verhaal (van prikklok tot app) */
.story-sec{background:#eaf4fb}
.story-head{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;margin-bottom:56px}
.story-head p{margin:0;font-size:18px;color:var(--muted);max-width:460px}
.story{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;position:relative;--line:0}
.story:before,.story:after{content:"";position:absolute;left:0;right:0;top:140px;height:2px;border-radius:2px}
.story:before{background:#cfe3f1}
.story:after{background:linear-gradient(90deg,#0083c6,#4fb0e3 70%,#ff9e1b);transform-origin:left;transform:scaleX(0);transition:transform 7.5s cubic-bezier(.45,.05,.35,1)}
.story.run:after{transform:scaleX(1)}
.story li{position:relative;display:grid;align-content:start;gap:4px;opacity:.35;transform:translateY(10px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i) * 1.25s + .2s)}
.story.run li{opacity:1;transform:none}
.sv{height:116px;display:grid;place-items:center;margin-bottom:16px}
.story-dot{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #b9d7ec;margin:0 0 14px;position:relative;z-index:1;transition:background .6s,border-color .6s,box-shadow .6s;transition-delay:calc(var(--i) * 1.25s + .2s)}
.story.run .story-dot{border-color:#0083c6;background:#0083c6;box-shadow:0 0 0 5px rgba(0,131,198,.14)}
.story.run li:last-child .story-dot{border-color:#ff9e1b;background:#ff9e1b;box-shadow:0 0 0 6px rgba(255,158,27,.2)}
.story li>small{font-size:11.5px;letter-spacing:1.3px;text-transform:uppercase;font-weight:750;color:var(--blue)}
.story li>b{font-size:17px;color:var(--ink);letter-spacing:-.01em}
.story li>p{margin:2px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.story-foot{margin:46px 0 0;padding:20px 26px;background:#fff;border-radius:22px;border:1px solid #dbe9f4;font-size:15px;color:var(--muted)}
.story-foot b{color:var(--ink)}
/* beeldjes */
.sv>div{width:100%;max-width:150px;height:104px;border-radius:16px;box-shadow:0 14px 30px -20px rgba(10,37,64,.45)}
.sv-card{background:#fbf5e6;border:1px solid #eadfc4;padding:10px 12px;display:grid;gap:3px;align-content:start;position:relative;font:600 11px/1.3 ui-monospace,Menlo,Consolas,monospace;color:#5b4a2c;rotate:-3deg}
.sv-card i{font-style:normal;font-size:9.5px;letter-spacing:1px;color:#9a8459;border-bottom:1px solid #e3d6b6;padding-bottom:4px;margin-bottom:2px}
.sv-card span b{display:inline-block;width:28px;color:#b0452f}
.sv-card em{position:absolute;right:10px;bottom:10px;width:22px;height:22px;border-radius:50%;border:2px solid rgba(176,69,47,.45)}
.sv-dos{background:#0c1a12;padding:12px;display:grid;gap:5px;align-content:start;font:600 10.5px/1.3 ui-monospace,Menlo,Consolas,monospace;color:#5ff59a;text-shadow:0 0 6px rgba(95,245,154,.45)}
.sv-dos u{display:inline-block;width:7px;height:11px;background:#5ff59a;margin-left:3px;vertical-align:-1px;text-decoration:none;animation:svblink 1.1s steps(1) infinite}
@keyframes svblink{50%{opacity:0}}
.sv-start{background:#fff;display:flex!important;align-items:center;justify-content:center;gap:10px}
.sv-start img{width:42px;height:42px}
.sv-start .p{width:26px;height:26px;border-radius:50%;background:#dcecf8;position:relative}
.sv-start .p:after{content:"";position:absolute;left:50%;top:100%;width:34px;height:14px;transform:translateX(-50%);border-radius:14px 14px 4px 4px;background:#dcecf8;margin-top:3px}
.sv-start .p{margin-bottom:18px}
.sv-web{background:#fff;padding:0 0 10px;display:grid;gap:7px;align-content:start;overflow:hidden}
.sv-web i{display:flex;gap:4px;padding:8px 10px;background:#f1f6fa;border-bottom:1px solid #e3edf5;margin-bottom:4px}
.sv-web i b{width:6px;height:6px;border-radius:50%;background:#c9dbe8}
.sv-web span{display:block;height:8px;border-radius:6px;background:linear-gradient(90deg,#0083c6,#7cc3ea);margin:0 12px;opacity:.85}
.sv-web span:nth-child(3){background:#ffc56b}
.sv-app{max-width:70px!important;height:112px!important;border-radius:16px!important;background:#fff;border:3px solid #14334d;display:grid;place-items:center;align-content:center;gap:8px}
.sv-app span{font-weight:750;font-size:16px;color:var(--ink);letter-spacing:-.02em}
.sv-app b{font-size:9px;color:#0f7a4a;background:#e5f6ee;border-radius:999px;padding:3px 6px}
.sv-ai{background:linear-gradient(150deg,#0559a6,#0a72bd);display:grid;place-items:center;align-content:center;gap:6px;color:#fff}
.sv-ai svg{width:30px;height:30px;fill:#ffc56b;stroke:none;animation:svspark 4s ease-in-out infinite}
.sv-ai span{font-size:12px;font-weight:650}
@keyframes svspark{50%{transform:scale(1.12) rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.story:after,.story li,.story-dot{transition:none}.sv-dos u,.sv-ai svg{animation:none}}
@media (max-width:1100px){.story{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}.story:before,.story:after{display:none}.story-dot{display:none}}
@media (max-width:760px){.story-head{grid-template-columns:1fr;gap:14px;margin-bottom:34px}
.story{grid-template-columns:1fr;gap:0;padding-left:26px}
.story:before,.story:after{display:block;left:6px;right:auto;top:6px;bottom:6px;width:2px;height:auto}
.story:after{transform:scaleY(0);transform-origin:top;background:linear-gradient(180deg,#0083c6,#4fb0e3 70%,#ff9e1b)}
.story.run:after{transform:scaleY(1)}
.story li{grid-template-columns:96px 1fr;column-gap:16px;align-items:start;padding-bottom:26px}
.story li>*:not(.sv):not(.story-dot){grid-column:2}
.story .sv{grid-row:1/span 3;grid-column:1;height:auto;margin:0}
.sv>div{max-width:96px;height:72px;font-size:8.5px}
.sv-card{padding:7px 8px;gap:1px}.sv-card i{font-size:7.5px}.sv-card span b{width:20px}.sv-card em{width:14px;height:14px;right:6px;bottom:6px}
.sv-dos{padding:8px;font-size:7.5px}
.sv-start img{width:30px;height:30px}.sv-start .p{width:18px;height:18px;margin-bottom:12px}.sv-start .p:after{width:24px;height:10px}
.sv-app{max-width:50px!important;height:80px!important}.sv-app span{font-size:12px}.sv-app b{font-size:7px}
.sv-ai svg{width:22px;height:22px}.sv-ai span{font-size:9.5px}
.story-dot{display:block;position:absolute;left:-26px;top:2px;margin:0}
.story li>small{grid-row:1}}

/* v30 – Excel-blok rustiger (E1) */
.compare .crosses li:before{content:"";flex:0 0 12px;width:12px;height:2px;border-radius:2px;background:#9fb0bf;margin-top:11px;display:block}
.compare .crosses li{color:#3d5266}
.compare .xl-title{background:#f4f6f8;color:#3b4a57;border-bottom:1px solid #e3e6e9}
.compare .xl-title .xls{background:#1d6f42;color:#fff}
.compare .toast-chat{display:none}
.compare .toast-mail{transform:none;box-shadow:0 10px 24px -16px rgba(10,37,64,.35)}
.compare .xl-grid td.empty{background:transparent}
.compare .compare-arrows,.compare .compare-arrows svg{animation:none!important}
.compare .compare-arrows{width:46px;height:46px;top:34px;box-shadow:none;border:1px solid #dfe8f0}
.compare .compare-arrows svg{width:20px;height:20px}
.compare .compare-arrows svg path{stroke:#0083c6;stroke-width:2.2}
@media (max-width:860px){.compare .compare-arrows{width:44px;height:44px}}

/* ======================================================
   v31: premium – rustiger typografie, vlakke kaarten, stille hovers,
   productschermen als uitsnede in een strak frame
   ====================================================== */
h1, h2, h3 { font-feature-settings: "ss01" on, "cv11" on; }
h1, .subhero h1 { font-size: clamp(36px, 4.2vw, 58px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.06; }
.hero-premium h1, .hero h1, .hero-premium h1.hero-rot-h { font-size: clamp(42px, 6vw, 82px); font-weight: 650; letter-spacing: -0.035em; line-height: 1.02; }
h2, .section-head h2, .cta-box h2 { font-size: clamp(28px, 3vw, 42px); font-weight: 650; letter-spacing: -0.025em; line-height: 1.1; }
.br-intro h2, .contact-hello h2 { font-size: clamp(26px, 2.4vw, 34px); }
h3 { font-weight: 600; letter-spacing: -0.012em; }
.eyebrow, .hero .eyebrow { text-transform: none; letter-spacing: 0.01em; font-size: 14px; font-weight: 600; color: var(--blue); margin-bottom: 16px; }
.subhero .eyebrow, .on-blue .eyebrow, .story-sec .eyebrow { color: inherit; }
.subhero .eyebrow { color: #9fd0ee; }
.eyebrow:before { width: 16px; height: 2px; }
.customer-copy small { text-transform: none; letter-spacing: 0.01em; }

/* kaarten: vlak, dunne rand */
.module-card, .branch-card, .integration-logo, .customer-card, .quote-card, .c-tile, .ab-t, .sw-app,
.branch-mini a, .int-ask, .config-layout, .contact-v2 .form-box, .role-card, .story-foot, .br-other,
.reveal.in.module-card, .reveal.in.branch-card, .reveal.in.integration-logo, .reveal.in.customer-card {
  box-shadow: none !important;
  border: 1px solid #e3ebf2;
}
.customer-card, .compare-card.new, .ab-photo, .ab-year, .ab-quote, .role-card.dark { border-color: transparent; }

/* hovers: alleen een licht kleurverschil, niets beweegt */
.module-card:hover, .branch-card:hover, .integration-logo:hover, .customer-card:hover, .c-tile:hover, a.ab-t:hover,
.sw-app:hover, .branch-mini a:hover, .reveal.in.module-card:hover, .reveal.in.branch-card:hover,
.reveal.in.integration-logo:hover, .reveal.in.customer-card:hover, .hub-node:hover, .chip:hover, .chip:active,
.store-btn:hover, .c-support:hover, .chat-launch:hover, .btn:hover, .btn-glass:hover, .compare-card.old:hover {
  transform: none !important;
  translate: none !important;
  box-shadow: none !important;
}
.module-card:hover, .branch-card:hover, .c-tile:hover, a.ab-t:hover, .branch-mini a:hover, .integration-logo:hover,
.reveal.in.module-card:hover, .reveal.in.branch-card:hover { border-color: #c6dbeb; background-color: #fbfdff; }
.branch-card:hover img, .customer-card:hover > img, .image-zoom:hover img, .module-card:hover .icon,
a:hover > .arrow, button:hover > .arrow, .branch-card:hover .arrow, .customer-card:hover .arrow,
.hero .text-link:hover .arrow, .hero-more:hover .arrow, .phone-trio:hover .trio-left,
.phone-trio:hover .trio-mid, .phone-trio:hover .trio-right { transform: none !important; translate: none !important; }
.btn:hover { filter: brightness(1.04); }
.text-link:hover { opacity: 0.8; }

/* minder beweging tegelijk */
.green-dot, .hero:after, .hero-premium:after, .subhero-mark { animation: none !important; }

/* productschermen als rustige uitsnede in een strak frame */
.shot-frame { margin: 0; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #dfe8f0; box-shadow: 0 30px 60px -38px rgba(10, 37, 64, 0.5); }
.shot-bar { display: flex; gap: 6px; padding: 10px 12px; background: #f5f8fb; border-bottom: 1px solid #e6edf3; }
.shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: #d5e0ea; }
.shot-frame img, .image-zoom .shot-frame img, .pp-shot .shot-frame img { display: block; width: 100%; height: auto; max-height: none; border: 0; border-radius: 0; box-shadow: none; object-fit: cover; }
.image-zoom:has(.shot-frame) { background: none; border: 0; padding: 0; box-shadow: none; }
.pp-shot.has-frame { padding: 0; background: none; width: 100%; max-width: 520px; }
.pp-shot.has-frame .shot-frame { border-color: rgba(255, 255, 255, 0.25); }

/* ======================================================
   v32: amber alleen op de hoofdknop + één diepdonkerblauw rustpunt (serviceblok)
   ====================================================== */
.hero-rot, .hero h1 em, .hero-premium h1 em { color:#a9dcf7 !important; background:none !important; -webkit-text-fill-color:#a9dcf7 !important; }
.hero-slogan:before, .hero-slogan:after { background: rgba(255,255,255,.35); }
.eyebrow:before { background: currentColor; opacity: .45; }
.hero-glow i:nth-child(3) { background:#2a8fd6; }
.subhero { background: radial-gradient(600px 400px at 85% 10%, rgba(35,179,234,.4), transparent 70%), linear-gradient(160deg,#01376e 0%,#014e9b 45%,#0274bb 100%); }
.config-count, .sw-base .icon, .zoom-label, .pp-bar b, .tab-indicator i,
.nav-links a:after, .scroll-progress, .chip[aria-pressed="true"] .chip-dot { background: var(--blue) !important; border-color: var(--blue) !important; color:#fff; }
.flow li:last-child .flow-ic .icon { background:#fff; border-color:#d6e8f5; color:var(--blue); }
.story:after { background: linear-gradient(90deg,#7cc3ea,#0083c6); }
.story.run li:last-child .story-dot { background: var(--deep); border-color: var(--deep); box-shadow:0 0 0 6px rgba(1,78,155,.14); }
.fs-head { stroke: rgba(1,78,155,.75); }
.hub-ball.in { fill: var(--blue); }
.br-tile small, .ab-quote small, .hello-slogan { color:#a9dcf7; background: transparent; }
.hero-branches a:hover { background:#fff; border-color:#fff; color: var(--deep); }
.chat-links a:first-child { background: var(--deep); color:#fff; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline-color:#4fb0e3; }
.new-week em { color:#0f7a4a; }
/* rustpunt: één diepdonkerblauw blok */
.service-section { position:relative; overflow:hidden; background: linear-gradient(170deg,#061a33 0%,#0a2e57 100%) !important; color:#fff; padding-top:130px; padding-bottom:130px; }
.service-section:after { content:""; position:absolute; right:-120px; bottom:-140px; width:520px; height:520px; background:url(/assets/logo/avantimes-beeldmerk-wit.svg) center/contain no-repeat; opacity:.04; pointer-events:none; }
.service-section .wrap { position:relative; z-index:1; }
.service-section h2, .service-section h3 { color:#fff; }
.service-section h2 em { color:#a9dcf7; font-style:normal; }
.service-section .eyebrow { color:#a9dcf7; }
.service-section p { color: rgba(255,255,255,.7); }
.service-section .text-link { color:#fff; }
.service-section .experience { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); box-shadow:none; }
.service-section .experience strong { color:#fff; }
.service-section .experience span { color: rgba(255,255,255,.7); }
.svc-timeline:before { background: rgba(255,255,255,.16); }
.service-section .step-index, .service-section .step:last-child .step-index { background:#0a2e57; color:#fff; border:1px solid rgba(255,255,255,.3); box-shadow:0 0 0 6px #0a2e57; }
.service-section .step:hover .step-index { background:#0a2e57; }

/* v33: chatknop donker, past rustiger in de site */
.chat-launch { background: linear-gradient(160deg, #0a2e57 0%, #014e9b 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 14px 30px -14px rgba(6,26,51,.7); }
.chat-launch img { width: 30px; height: 30px; }
.chat-launch-x { color: #fff; }
.chat-launch:after { border-color: #0a2e57; width: 11px; height: 11px; }
@media (max-width: 760px) { .chat-launch img { width: 27px; height: 27px; } }

/* v34: veelgestelde vragen op de homepage – drie antwoorden uitgelicht (F5) */
.hf-top { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 34px; }
.hf-top h2 { max-width: 640px; margin: 0; }
.hf-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hf-c { border: 1px solid #e3ebf2; border-radius: 22px; padding: 28px; background: #fff; }
.hf-c span { font-size: 13px; font-weight: 600; color: #8aa0b3; }
.hf-c h3 { font-size: 19px; margin: 10px 0 10px; letter-spacing: -0.012em; }
.hf-c p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.hf-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.hf-more details, .hf-more details:first-child { border: 1px solid #e3ebf2; border-radius: 18px; padding: 16px 20px; align-self: start; margin: 0; background: #fff; }
.hf-more summary { font-size: 15px; padding: 0; }
.hf-more details p { margin: 10px 0 0; font-size: 14.5px; }
@media (max-width: 900px) { .hf-g, .hf-more { grid-template-columns: 1fr; } .hf-top { flex-direction: column; align-items: start; } }
/* v35: tweede knop altijd glas, nooit amber */
.btn.btn-glass, .btn.btn-glass:hover { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.btn.btn-glass:hover { background: rgba(255,255,255,.16); }

/* v36: Over ons – tijdlijn zoals AMANO (A) */
.tl-sec { background: #fff; }
.tl-sec h2 { margin-bottom: 40px; }
.tl-bar { display: flex; justify-content: space-between; position: relative; padding-bottom: 6px; margin-bottom: 44px; overflow-x: auto; scrollbar-width: none; }
.tl-bar::-webkit-scrollbar { display: none; }
.tl-bar:after { content: ""; position: absolute; left: 0; right: 0; bottom: 11px; border-top: 2px dotted #8fc8ea; }
.tl-bar button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; display: grid; justify-items: center; gap: 10px; padding: 0 8px; font: 500 19px/1 Inter, Arial, sans-serif; color: var(--blue); white-space: nowrap; }
.tl-bar button span { height: 40px; display: flex; align-items: flex-end; transition: font-size .45s var(--ease), color .3s; }
.tl-bar button i { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); transition: transform .3s, box-shadow .3s; }
.tl-bar button.on span { font-size: 34px; font-weight: 650; letter-spacing: -0.02em; }
.tl-bar button.on i { transform: scale(1.35); box-shadow: 0 0 0 5px rgba(0, 131, 198, .15); }
.tl-bar button.hl span { color: var(--deep); }
.tl-bar button:hover span { color: var(--deep); }
.tl-stage { position: relative; min-height: 280px; }
.tl-slide { position: absolute; inset: 0; display: grid; grid-template-columns: 360px 1fr; gap: 56px; align-items: center; opacity: 0; transform: translateY(8px); transition: opacity .9s ease, transform .9s ease; pointer-events: none; }
.tl-slide.on { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.tl-vis { height: 270px; border-radius: 24px; background: #fff; border: 1px solid #e3ebf2; display: grid; place-items: center; overflow: hidden; padding: 22px; }
.tl-vis .tv-contain { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.tl-vis .tv-logo { width: 80%; height: auto; }
.tl-vis .tv-cover { width: calc(100% + 44px); height: calc(100% + 44px); max-width: none; object-fit: cover; object-position: left top; }
.tv-astrow { width: calc(100% + 44px); height: calc(100% + 44px); margin: -22px; display: grid; place-items: center; background: #0073a9; position: relative; }
.tv-astrow img { width: 66%; }
.tv-astrow em { position: absolute; right: 16px; bottom: 14px; font-style: normal; font-weight: 650; font-size: 13px; color: #fff; background: rgba(255, 255, 255, .18); border-radius: 999px; padding: 4px 11px; }
.tv-phone { height: 100%; aspect-ratio: 9 / 18; border: 5px solid #14334d; border-radius: 22px; overflow: hidden; background: #fff; }
.tv-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tl-vis:has(.tv-cover), .tl-vis:has(.tv-astrow) { padding: 22px; }
.tl-txt strong { display: block; font-size: 48px; font-weight: 600; color: var(--blue); letter-spacing: -0.03em; line-height: 1; }
.tl-txt h3 { font-size: 24px; margin: 12px 0 8px; }
.tl-txt p { margin: 0; font-size: 17px; color: var(--muted); max-width: 520px; }
.tl-slide.hl .tl-txt strong { color: var(--deep); }
.tl-slide.hl .tl-vis { border-color: #bcd9ee; background: #f6fbff; }
.tl-sec .story-foot { margin-top: 48px; }
@media (prefers-reduced-motion: reduce) { .tl-slide, .tl-bar button span { transition: none; } }
@media (max-width: 860px) {
  .tl-bar { justify-content: flex-start; gap: 22px; margin-bottom: 30px; }
  .tl-bar button { font-size: 16px; }
  .tl-bar button.on span { font-size: 26px; }
  .tl-slide { grid-template-columns: 1fr; gap: 22px; }
  .tl-vis { height: 220px; }
  .tl-txt strong { font-size: 36px; }
  .tl-txt p { font-size: 16px; }
}
.tl-vis { position: relative; }
.tl-vis .tv-contain { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.tl-vis .tv-cover { position: absolute; inset: 0; width: 100%; height: 100%; }
.tv-astrow { position: absolute; inset: 0; width: auto; height: auto; margin: 0; }
.tl-vis .tv-contain { position: absolute; inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); }
.tl-vis .tv-logo { position: relative; } .tv-phone { position: absolute; top: 18px; bottom: 18px; left: 50%; transform: translateX(-50%); height: auto; }

/* v37: klantenpagina met alle klantverhalen van avantimes.nl */
.cs-feat { display: grid; grid-template-columns: 1.3fr 1fr; border: 1px solid #e3ebf2; border-radius: 28px; overflow: hidden; background: #fff; }
.cs-feat-l { padding: 44px; display: grid; align-content: start; gap: 22px; }
.cs-feat-l blockquote { margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
.cs-feat-l .btn { justify-self: start; }
.cs-feat-r { background: linear-gradient(170deg, #061a33, #0a2e57); color: #fff; padding: 40px; display: grid; gap: 18px; align-content: start; }
.cs-feat-r small { display: block; font-size: 12.5px; color: #a9dcf7; margin-bottom: 3px; }
.cs-feat-r b { font-weight: 550; font-size: 16px; line-height: 1.45; }
.cs-feat-r div + div { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 16px; }
.cs-feat-r .text-link { color: #fff; margin-top: 6px; }
.cs-logo img { max-height: 46px; width: auto; }
.cs-word { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--deep); }
.cs-who b { display: block; font-size: 15px; color: var(--ink); }
.cs-who span { font-size: 13.5px; color: var(--muted); }
.cs-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.cs-photo { position: relative; display: block; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 9; color: #fff; }
.cs-photo img { width: 100%; height: 100%; object-fit: cover; }
.cs-photo:before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1, 32, 66, 0) 35%, rgba(1, 32, 66, 0.9)); z-index: 1; }
.cs-photo > div { position: absolute; left: 26px; right: 26px; bottom: 22px; z-index: 2; display: grid; gap: 4px; }
.cs-photo small { color: #a9dcf7; font-size: 12.5px; }
.cs-photo b { font-size: 21px; }
.cs-photo span { font-size: 14.5px; color: rgba(255, 255, 255, 0.85); }
.cs-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.cs-filter button { border: 1px solid #dbe7f0; background: #fff; border-radius: 999px; padding: 9px 16px; font: 600 14px Inter, Arial, sans-serif; color: #3d566d; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.cs-filter button.on { background: var(--deep); border-color: var(--deep); color: #fff; }
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cs-card { background: #fff; border: 1px solid #e3ebf2; border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.cs-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 46px; }
.cs-top .cs-logo img { max-height: 38px; max-width: 150px; }
.cs-tag { font-size: 12px; font-weight: 600; color: var(--deep); background: #eef6fc; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.cs-card blockquote { margin: 0; font-size: 16.5px; font-weight: 550; line-height: 1.45; color: var(--ink); }
.cs-dl { margin: 0; display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid #eef3f7; }
.cs-dl dt { font-size: 12px; font-weight: 600; color: #8aa0b3; }
.cs-dl dd { margin: 2px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.cs-card .text-link { margin-top: auto; }
@media (max-width: 960px) { .cs-feat { grid-template-columns: 1fr; } .cs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cs-feat-l, .cs-feat-r { padding: 28px 22px; } .cs-photos, .cs-grid { grid-template-columns: 1fr; } }
.cs-you { background: linear-gradient(160deg, #0a2e57, #014e9b); border-color: transparent; color: #fff; justify-content: center; } .cs-you h3 { color: #fff; font-size: 21px; margin: 0; } .cs-you p { margin: 0; color: rgba(255,255,255,.78); } .cs-you .cs-tag { align-self: flex-start; background: rgba(255,255,255,.14); color: #fff; } .cs-you .btn { align-self: flex-start; }
@media (max-width: 620px) { .cs-photo { aspect-ratio: 4 / 3.4; } .cs-photo:before { background: linear-gradient(180deg, rgba(1,32,66,.05) 20%, rgba(1,32,66,.95) 75%); } }
.cs-top .cs-logo img { max-height: 42px; max-width: 160px; object-fit: contain; }
.cs-top .cs-logo img, .cs-feat .cs-logo img { width: auto !important; height: 44px !important; max-width: 170px; object-fit: contain; object-position: left center; }

/* v38: uitgelicht klantverhaal K1 – beeld en cijfers */
.cs-k1 { display: grid; grid-template-columns: 1fr 1.15fr; border: 1px solid #e3ebf2; border-radius: 28px; overflow: hidden; background: #fff; }
.cs-k1-ph { position: relative; min-height: 460px; background-size: cover; background-position: center; }
.cs-k1-ph span { position: absolute; left: 20px; bottom: 20px; background: rgba(255, 255, 255, 0.92); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--ink); }
.cs-k1-c { padding: 48px; display: grid; gap: 22px; align-content: center; }
.cs-k1-c .cs-logo img { height: 50px !important; width: auto !important; }
.cs-k1-c blockquote { margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
.cs-k1-f { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #e3ebf2; border-bottom: 1px solid #e3ebf2; }
.cs-k1-f div { padding: 16px 14px 16px 0; }
.cs-k1-f div + div { padding-left: 18px; border-left: 1px solid #e3ebf2; }
.cs-k1-f strong { display: block; font-size: 32px; font-weight: 650; color: var(--deep); letter-spacing: -0.03em; line-height: 1.1; }
.cs-k1-f span { font-size: 13px; color: var(--muted); }
.cs-k1-a { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
@media (max-width: 900px) { .cs-k1 { grid-template-columns: 1fr; } .cs-k1-ph { min-height: 240px; } .cs-k1-c { padding: 28px 22px; } .cs-k1-f strong { font-size: 26px; } }

/* v39: uitgelicht klantverhaal V1 – foto met glazen kaart */
.cs-v1 { position: relative; min-height: 580px; border-radius: 30px; overflow: hidden; background-size: cover; background-position: 30% center; display: flex; justify-content: flex-end; align-items: center; padding: 30px; }
.cs-v1-tag { position: absolute; left: 24px; bottom: 24px; background: rgba(255, 255, 255, 0.92); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--ink); }
.cs-v1-card { width: min(540px, 100%); background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 24px; padding: 34px; display: grid; gap: 18px; box-shadow: 0 40px 80px -40px rgba(0, 10, 30, 0.6); }
.cs-v1-card .cs-logo img { height: 48px !important; width: auto !important; }
.cs-v1-card blockquote { margin: 0; font-size: clamp(22px, 2.3vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.22; color: var(--ink); }
.cs-v1-st { display: flex; gap: 8px; }
.cs-v1-st div { flex: 1; background: rgba(243, 248, 252, 0.95); border-radius: 16px; padding: 12px 14px; }
.cs-v1-st strong { display: block; font-size: 26px; font-weight: 650; color: var(--deep); letter-spacing: -0.03em; line-height: 1.1; }
.cs-v1-st span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
@media (max-width: 900px) {
  .cs-v1 { min-height: 0; padding: 260px 14px 14px; background-size: auto 300px; background-position: center top; background-repeat: no-repeat; background-color: #e9eef2; }
  .cs-v1-tag { display: none; }
  .cs-v1-card { padding: 24px 20px; }
  .cs-v1-st div { padding: 10px; }
  .cs-v1-st strong { font-size: 22px; }
}

/* v40: kortere homepage – links onder het productblok */
.home-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
.home-links a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #dbe7f0; background: #fff; border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--deep); transition: background .25s, border-color .25s; }
.home-links a:hover { background: #f4f9fd; border-color: #c6dbeb; }
.home-links a .arrow { font-size: 13px; }
/* v41: klantenservice als rustige tekstlink */
.nav-support, .nav-support:hover { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 6px !important; height: auto !important; font-weight: 500; font-size: 14.5px; color: var(--muted) !important; }
.nav-support:hover { color: var(--deep) !important; }
.nav-support-dot { display: none !important; }

/* ======================================================
   v42: mobiel – rustiger en duimvriendelijk
   ====================================================== */
.mbar, .hero-mob-cta, .pp-mob { display: none; }
@media (max-width: 760px) {
  /* 1. topbalk weg */
  .topbar { display: none !important; }
  /* 2. geen dubbele demo-knop bovenin */
  .nav .nav-cta { display: none !important; }
  /* 3. één grote knop in plaats van het e-mailveld */
  .hero-mail, .hero-mail-note { display: none !important; }
  .hero-mob-cta { display: flex; justify-content: center; width: 100%; max-width: 420px; margin: 26px auto 0; height: 56px; font-size: 16px; }
  /* 5. branches op één regel, horizontaal scrollen */
  .hero-branches > div { display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 8px; padding: 2px 16px 6px; margin: 0 -16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hero-branches > div::-webkit-scrollbar { display: none; }
  .hero-branches a { flex: 0 0 auto; padding: 9px 14px; font-size: 13.5px; min-height: 40px; display: inline-flex; align-items: center; }
  /* 6. klikvlakken minimaal 44 px */
  .text-link, .module-link a, .cs-card .text-link, .footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .quote-dots button { width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; }
  /* 7. app-scherm in plaats van onleesbaar bureaubladscherm */
  .pp-desk-only { display: none !important; }
  .pp-mob { display: flex; justify-content: center; padding: 6px 0 4px; }
  .pp-mob .phone { width: 190px; }
  /* 8. links onder het productblok als nette lijst */
  .home-links { display: grid; gap: 0; border-top: 1px solid #e3ebf2; }
  .home-links a { display: flex; justify-content: space-between; align-items: center; border: 0; border-bottom: 1px solid #e3ebf2; border-radius: 0; background: none; padding: 14px 2px; min-height: 52px; font-size: 15px; }
  /* 9. Excel: geen berichtje over de tabel */
  .compare .toast-mail, .compare .toast-chat { display: none !important; }
  .compare .mess { padding-right: 0; margin-bottom: 0; }
  .compare .xl-window { overflow-x: auto; }
  /* 11. feitenstrook leesbaar */
  .fact span:not(.icon) { font-size: 14px !important; line-height: 1.4; }
  .fact strong { font-size: 18px; }
  /* 10. vaste actiebalk onderin */
  .mbar { display: grid; grid-template-columns: 64px 64px 1fr; gap: 6px; align-items: center; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 90; padding: 6px; border-radius: 20px; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(10, 37, 64, 0.1); box-shadow: 0 16px 36px -14px rgba(10, 37, 64, 0.45); transform: translateY(140%); transition: transform 0.4s var(--ease); }
  .mbar.show { transform: none; }
  .mbar-i { height: 52px; border: 0; background: #f2f7fb; border-radius: 14px; display: grid; place-items: center; align-content: center; gap: 2px; color: var(--deep); font: 600 11px Inter, Arial, sans-serif; cursor: pointer; text-decoration: none; }
  .mbar-i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mbar-cta { height: 52px; border-radius: 14px; background: var(--amber); color: #0a2d55; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 650; font-size: 15.5px; text-decoration: none; }
  body { padding-bottom: 84px; }
  .nav.open ~ .mbar, body.menu-open .mbar { transform: translateY(140%); }
}
@media (prefers-reduced-motion: reduce) { .mbar { transition: none; } }
@media (max-width: 760px) {
  .hero-branches > div { margin: 0; padding: 2px 0 6px; justify-content: flex-start !important; }
  .nav .menu-toggle { margin-left: auto; }
}
.nav-demo-m, .nav-tel-m { display: none; }
@media (max-width: 760px) {
  .hero-branches, .hero-branches > div { width: 100%; max-width: 100%; min-width: 0; }
  .hero-center { min-width: 0; }
  .nav-links.open .nav-demo-m, .nav.open .nav-demo-m, .nav-links .nav-demo-m { display: flex; justify-content: center; align-items: center; height: 50px; margin-top: 10px; border-radius: 999px; background: var(--amber); color: #0a2d55 !important; font-weight: 650; }
  .nav-links .nav-tel-m { display: flex; justify-content: center; align-items: center; height: 46px; color: var(--deep) !important; font-weight: 600; }
  .nav-links .nav-demo-m:after, .nav-links .nav-tel-m:after { display: none !important; }
}

/* v43: toegang – monitor in een donkere, moderne setting */
.acc-vis { position: relative; margin: 0; border-radius: 30px; overflow: hidden; min-height: 460px; display: grid; place-items: center; padding: 60px 30px; background: radial-gradient(520px 340px at 70% 10%, rgba(35, 179, 234, 0.35), transparent 70%), linear-gradient(165deg, #061a33 0%, #0a2e57 60%, #0b3f78 100%); }
.acc-vis:after { content: ""; position: absolute; inset: 0; background: url(/assets/logo/avantimes-beeldmerk-wit.svg) right -90px bottom -110px / 360px no-repeat; opacity: 0.05; pointer-events: none; }
.acc-glow { position: absolute; left: 50%; top: 52%; width: 70%; height: 46%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(79, 176, 227, 0.45), transparent); filter: blur(20px); }
.acc-mon { position: relative; z-index: 1; width: min(420px, 82%); height: auto; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.55)); }
.acc-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: 16px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6); }
.acc-chip b { display: block; font-size: 13.5px; font-weight: 600; }
.acc-chip small { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.75); }
.acc-chip svg { width: 20px; height: 20px; fill: none; stroke: #a9dcf7; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 20px; }
.acc-chip .ok { width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 4px rgba(61, 220, 132, 0.2); flex: 0 0 10px; }
.acc-chip.a1 { left: 22px; top: 26px; }
.acc-chip.a2 { right: 22px; top: 42%; }
.acc-chip.a3 { left: 30px; bottom: 26px; }
@media (max-width: 760px) {
  .acc-vis { min-height: 0; padding: 90px 14px 100px; }
  .acc-mon { width: 88%; }
  .acc-chip { padding: 9px 12px; }
  .acc-chip.a1 { left: 12px; top: 14px; }
  .acc-chip.a2 { display: none; }
  .acc-chip.a3 { left: 12px; right: 12px; bottom: 14px; }
}
.acc-chip { background: rgba(6, 26, 51, 0.62); border-color: rgba(255,255,255,.2); } .acc-chip.a2 { top: auto; bottom: 96px; right: 18px; }

/* v44: feitenstrook met iPhone-foto */
.fx-card { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); background: #fff; border-radius: 30px; overflow: hidden; box-shadow: 0 30px 70px -40px rgba(10, 37, 64, 0.45); border: 1px solid #e6eef5; }
.fx-photo { margin: 0; position: relative; min-height: 420px; background: #061a33; }
.fx-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.fx-body { padding: 44px 48px; display: grid; align-content: center; gap: 18px; }
.fx-eye { font-size: 14px; font-weight: 600; color: var(--blue); }
.fx-h { margin: 0; font-size: clamp(24px, 2.4vw, 32px) !important; line-height: 1.15; }
.fx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.fx-i { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 18px; background: #f4f8fb; border: 1px solid #e8f0f6; }
.fx-i .icon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--blue); box-shadow: none; border: 1px solid #e3edf5; }
.fx-i .icon svg { width: 19px; height: 19px; }
.fx-i strong { display: block; font-size: 18px; font-weight: 650; color: var(--deep); letter-spacing: -0.02em; line-height: 1.2; }
.fx-i span:not(.icon) { display: block; font-size: 14px; line-height: 1.4; color: var(--muted); }
@media (max-width: 900px) {
  .fx-card { grid-template-columns: 1fr; }
  .fx-photo { min-height: 0; aspect-ratio: 4 / 3.6; }
  .fx-body { padding: 26px 20px 24px; }
  .fx-grid { gap: 8px; }
  .fx-i { padding: 12px; gap: 10px; }
  .fx-i .icon { display: none; }
}
.fx-photo img { object-position: 50% 50%; } @media (max-width: 900px) { .fx-photo { aspect-ratio: 1 / 1.05; } }
@media (min-width: 901px) { .fx-photo { min-height: 520px; } .fx-photo img { object-position: 50% 58%; } }
@media (min-width: 901px) { .fx-photo img { object-position: 50% 36%; } }
/* v45: pijlen als strak lijnicoon (geen emoji) */
.arrow { display: inline-flex; align-items: center; justify-content: center; font-size: 1em; line-height: 1; vertical-align: -0.12em; }
.arrow svg { width: 1em; height: 1em; display: block; }
.btn .arrow, .mbar-cta .arrow { font-size: 1.05em; }

/* ======================================================
   v46: iPhone-foto over het hele scherm, feiten zwevend rond de telefoon
   ====================================================== */
.hero.hero-premium { padding-bottom: 90px; }
.facts { margin-top: 0 !important; padding: 0 !important; background: #061a33; }
.facts .wrap { max-width: none; padding: 0; }
.fx-card { display: block; position: relative; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; min-height: 680px; background: linear-gradient(90deg, rgba(4,16,34,.55) 0%, rgba(4,16,34,.25) 40%, rgba(4,16,34,0) 60%), url(/assets/app-iphone-wide.webp) right center / cover no-repeat #061a33; }
.fx-photo { display: none; }
.fx-body { position: static; width: min(100%, 470px); margin-left: max(20px, calc((100vw - 1180px) / 2 + 20px)); padding: 170px 0; background: none; border: 0; box-shadow: none; gap: 20px; }
.fx-eye { color: #a9dcf7; }
.fx-h { color: #fff; font-size: clamp(30px, 3.4vw, 46px) !important; }
.fx-body .text-link { color: #fff; }
.fx-grid { display: block; margin: 0; }
.fx-i { position: absolute; width: 250px; padding: 12px 14px; border-radius: 18px; background: rgba(6, 26, 51, 0.62); border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6); }
.fx-i .icon { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); color: #a9dcf7; }
.fx-i strong { color: #fff; font-size: 16px; }
.fx-i span:not(.icon) { color: rgba(255, 255, 255, 0.75); font-size: 13px; }
.fx-i:nth-child(1) { right: calc(40% - 30px); top: 130px; }
.fx-i:nth-child(3) { right: calc(40% - 30px); bottom: 150px; }
.fx-i:nth-child(2) { left: calc(78% - 40px); top: 210px; }
.fx-i:nth-child(4) { left: calc(78% - 40px); bottom: 90px; }
@media (max-width: 1100px) and (min-width: 901px) { .fx-body { width: min(100%, 400px); } .fx-i { width: 220px; } }
@media (max-width: 900px) {
  .fx-card { min-height: 0; background: linear-gradient(180deg, rgba(6,26,51,0) 0, rgba(6,26,51,0) 300px, #061a33 470px), url(/assets/app-iphone-wide.webp) 70% top / auto 520px no-repeat #061a33; }
  .fx-body { margin: 0; width: 100%; padding: 400px 20px 44px; }
  .fx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .fx-i { position: static; width: auto; }
  .fx-i .icon { display: none; }
}
/* v47: variant 3 – grote cijfers (vervangt zwevende kaartjes) */
.fx-body { width: min(100%, 640px); padding: 110px 0; }
.fx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.fx-i { position: static; width: auto; display: block; padding: 22px 20px 18px 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.fx-i:nth-child(even) { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.fx-i:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.fx-i .icon { display: none; }
.fx-i strong { font-size: 38px; font-weight: 300; letter-spacing: -0.04em; margin-bottom: 4px; color: #fff; }
.fx-i span:not(.icon) { font-size: 14px; color: rgba(255, 255, 255, 0.72); }
@media (max-width: 900px) {
  .fx-body { padding: 400px 20px 44px; width: 100%; }
  .fx-grid { gap: 0; }
  .fx-i { padding: 18px 12px 14px 0; }
  .fx-i:nth-child(even) { padding-left: 14px; }
  .fx-i strong { font-size: 28px; }
}
.fx-body { text-shadow: 0 1px 14px rgba(4,16,34,.55); } .fx-i span:not(.icon) { color: rgba(255,255,255,.8); }

/* ======================================================
   v48: telefoons als echte iPhone (titanium rand, zwarte rand, Dynamic Island,
   echte statusbalk-iconen, zijknoppen en glasreflectie)
   ====================================================== */
.phone {
  border: 0 !important;
  overflow: visible !important;
  aspect-ratio: 0.486 !important;
  border-radius: 16% / 7.8% !important;
  background: linear-gradient(135deg, #e9ebee 0%, #a7adb4 14%, #6b737b 32%, #c8ccd1 50%, #7c838a 70%, #b9bec4 86%, #eef0f2 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 0 0 2px rgba(40, 46, 54, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.4),
    0 40px 70px -32px rgba(4, 22, 44, 0.55),
    0 14px 26px -16px rgba(4, 22, 44, 0.35) !important;
}
.phone:before { content: ""; position: absolute; inset: 0.75% 1.55%; border-radius: 14.6% / 7.1%; background: #050608; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.ph-glass { position: absolute; inset: 1.95% 4.05%; border-radius: 12.8% / 6.1%; overflow: hidden; background: #fff; z-index: 1; container-type: inline-size; }
.ph-glass:after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 26%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
/* zijknoppen */
.phone > .ph-btn { position: absolute; left: -1.6%; top: 17%; width: 1.9%; height: 25%; border-radius: 2px 0 0 2px; z-index: 0;
  background: linear-gradient(180deg, transparent 0 4%, #8e959c 4% 16%, transparent 16% 30%, #8e959c 30% 60%, transparent 60% 68%, #8e959c 68% 98%, transparent 98%); }
.phone:after { content: ""; position: absolute; right: -1.6%; top: 27%; width: 1.9%; height: 14%; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #6f777f, #a3aab1); z-index: 0; }
/* statusbalk zoals iOS */
.phone .ph-glass .status { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 6.2% !important; padding: 0 7% 0 10% !important; display: flex !important; align-items: center !important; justify-content: space-between !important;
  font-size: 4.6cqw !important; font-weight: 600 !important; letter-spacing: -0.01em; color: #fff !important; background: #108fca !important; z-index: 3; font-family: -apple-system, "SF Pro Text", Inter, Arial, sans-serif; }
.phone .ph-glass .status .tm { padding-top: 0.6cqw; }
.phone .ph-glass .status .sb { display: inline-flex; align-items: center; gap: 1.6cqw; }
.phone .ph-glass .status svg { height: 3.2cqw; width: auto; fill: #fff; }
.phone .ph-glass .status .bat { width: 6.6cqw; height: 3.2cqw; border: 0.4cqw solid rgba(255, 255, 255, 0.55); border-radius: 1cqw; padding: 0.35cqw; position: relative; display: inline-block; }
.phone .ph-glass .status .bat:after { content: ""; position: absolute; right: -1.2cqw; top: 30%; width: 0.6cqw; height: 40%; border-radius: 0 1px 1px 0; background: rgba(255, 255, 255, 0.55); }
.phone .ph-glass .status .bat i { display: block; width: 72%; height: 100%; border-radius: 0.4cqw; background: #fff; }
.phone .ph-glass .island { position: absolute !important; z-index: 5 !important; top: 1.35% !important; left: 50% !important; transform: translateX(-50%); width: 31% !important; height: 3.55% !important; border-radius: 999px !important; background: #000 !important; }
.phone .ph-glass .screen { top: 6.1% !important; }
.phone .ph-glass .home-indicator { z-index: 7 !important; bottom: 0.9% !important; left: 50% !important; transform: translateX(-50%); width: 36% !important; height: 0.55% !important; min-height: 3px; border-radius: 99px !important; background: #111 !important; opacity: 0.85; }
.phone.verlof .ph-glass .screen, .phone.nl .ph-glass .screen, .phone.help .ph-glass .screen { bottom: 0 !important; }
/* schaduw in groepen niet dubbel */
.role-phone { filter: none; }
/* v49: zachte overloop van hero naar telefoonfoto */
.fx-card:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 260px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #114d89 0%, rgba(17, 77, 137, 0.82) 22%, rgba(12, 55, 102, 0.45) 55%, rgba(6, 26, 51, 0) 100%); }
.fx-body { position: relative; z-index: 1; }
@media (max-width: 900px) { .fx-card:before { height: 180px; } }
/* v50: productblok schuift als afgerond vel over de telefoonfoto */
.facts + .product-section, .product-section { position: relative; z-index: 2; margin-top: -48px; border-radius: 44px 44px 0 0; background: #fff; box-shadow: 0 -24px 50px -30px rgba(4, 16, 34, 0.55); }
.fx-card { padding-bottom: 48px; }
@media (max-width: 900px) { .product-section { margin-top: -28px; border-radius: 28px 28px 0 0; } .fx-card { padding-bottom: 28px; } }
.facts { z-index: 1 !important; }

/* v51: vier vervolgkaarten onder het productblok */
.hl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.hl-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 20px 46px 20px 20px; border-radius: 24px; background: #f4f8fb; border: 1px solid #e6eff6; color: var(--ink); text-decoration: none; transition: background 0.25s, border-color 0.25s; min-height: 96px; }
.hl-card:hover { background: #eef5fb; border-color: #c6dbeb; }
.hl-card .icon { width: 42px; height: 42px; border-radius: 14px; background: #fff; color: var(--blue); display: grid; place-items: center; box-shadow: none; border: 1px solid #e3edf5; margin: 0; }
.hl-card .icon svg { width: 20px; height: 20px; }
.hl-card b { display: block; font-size: 15.5px; font-weight: 600; color: var(--deep); line-height: 1.3; }
.hl-card small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.hl-card > .arrow { position: absolute; right: 18px; top: 22px; color: var(--deep); font-size: 15px; }
@media (max-width: 1050px) { .hl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hl-grid { grid-template-columns: 1fr; gap: 8px; } .hl-card { min-height: 0; padding: 16px 44px 16px 16px; } }
.hl-label { margin: 34px 0 0; font-size: 14px; font-weight: 600; color: var(--muted); }

/* v50 vervolglinks: schermbrede band met onscherpe fotoachtergrond, gecentreerd, licht bij hover */
.product-section:has(> .hl) { padding-bottom: 0; }
.hl { position: relative; isolation: isolate; overflow: hidden; margin-top: 72px; background: #061a33; color: #fff; padding: 56px 0 60px; }
.hl:before { content: ""; position: absolute; inset: -60px; z-index: -2; background: url(assets/app-iphone-wide.webp) 70% 50% / cover no-repeat; filter: blur(30px) saturate(1.15); transform: scale(1.08); }
.hl:after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,16,34,.74) 0%, rgba(4,16,34,.5) 55%, rgba(4,16,34,.38) 100%); }
.hl-k { margin: 0 0 18px; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.hl-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.2); }
.hl-cols a { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 34px 18px 30px; color: #fff; text-decoration: none; }
.hl-cols a + a { border-left: 1px solid rgba(255,255,255,.2); }
.hl-cols a:before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .45s ease; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(150, 205, 255, .34), rgba(150, 205, 255, .1) 45%, transparent 70%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)); }
.hl-cols a:after { content: ""; position: absolute; left: 18%; right: 18%; top: -1px; height: 1px; opacity: 0; transition: opacity .45s ease; background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); }
.hl-cols a:hover:before, .hl-cols a:hover:after, .hl-cols a:focus-visible:before { opacity: 1; }
.hl-cols b { font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; }
.hl-cols small { font-size: 15px; color: rgba(255,255,255,.72); line-height: 1.4; text-wrap: balance; transition: color .3s; }
.hl-cols a:hover small { color: rgba(255,255,255,.92); }
.hl-cols a:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
@media (max-width: 900px) {
  .hl { margin-top: 48px; padding: 34px 0 20px; }
  .hl-k { margin-bottom: 8px; }
  .hl-cols { grid-template-columns: 1fr; border-top: 0; }
  .hl-cols a { padding: 20px 8px; }
  .hl-cols a + a { border-left: 0; border-top: 1px solid rgba(255,255,255,.2); }
  .hl-cols a:after { display: none; }
  .hl-cols b { font-size: 26px; }
  .hl-cols small { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .hl-cols a:before, .hl-cols a:after { transition: none; } }
.hl-cols a:active:before { opacity: 1; transition: none; }
/* v50b: band met afgeronde zijkanten */
.hl { margin-left: 16px; margin-right: 16px; border-radius: 40px; }
@media (max-width: 900px) { .hl { margin-left: 10px; margin-right: 10px; border-radius: 28px; } }

/* v51 Excel of AvanTimes: schakelaar die elke 4 seconden wisselt */
.cmp5 { padding-top: 96px; }
.cmp-k { margin: 0 0 14px; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.cmp-h { margin: 0 auto; text-align: center; font-size: clamp(34px, 4.2vw, 58px); font-weight: 400; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); max-width: 900px; }
.cmp-h span { color: #8aa0b5; }
.cmp-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: max-content; margin: 36px auto 0; padding: 5px; border-radius: 999px; background: #eef4f9; border: 1px solid #e1eaf2; }
.cmp-seg > i { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: #fff; box-shadow: 0 8px 20px -12px rgba(10,37,64,.45); transition: transform .55s cubic-bezier(.65,0,.35,1); transform: translateX(100%); }
.cmp-seg[data-on="0"] > i { transform: translateX(0); }
.cmp-seg button { position: relative; z-index: 1; overflow: hidden; border: 0; background: none; padding: 12px 26px; min-width: 168px; border-radius: 999px; font: 600 15px Inter, Arial, sans-serif; color: #6f859a; cursor: pointer; transition: color .4s; }
.cmp-seg button.on { color: var(--deep); }
.cmp-seg button:after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--blue); opacity: 0; transform: scaleX(0); transform-origin: left; }
.cmp5.run .cmp-seg button.on:after { opacity: .5; animation: cmpRun 4s linear forwards; }
.cmp5.run:hover .cmp-seg button.on:after, .cmp5.run:focus-within .cmp-seg button.on:after { animation-play-state: paused; }
@keyframes cmpRun { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cmp-pane { margin-top: 44px; }
.cmp-pane.on { animation: cmpIn .55s ease both; }
@keyframes cmpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cmp-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #dfe8f0; }
.cmp-four > div { padding: 30px 20px 4px; text-align: center; }
.cmp-four > div + div { border-left: 1px solid #dfe8f0; }
.cmp-four b { display: block; font-size: clamp(20px, 1.9vw, 26px); font-weight: 400; letter-spacing: -.015em; color: var(--ink); line-height: 1.2; text-wrap: balance; }
.cmp-four span { display: block; margin-top: 8px; font-size: 15px; color: var(--muted); text-wrap: balance; }
.cmp-pane.x .cmp-four b { color: #8396a9; }
.cmp-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 40px; }
.cmp-week { display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; border-radius: 999px; background: #fff; border: 1px solid #e3edf5; box-shadow: 0 14px 34px -24px rgba(10,37,64,.4); font-size: 15px; color: var(--ink); }
.cmp-week i { width: 8px; height: 8px; border-radius: 50%; background: #1aa35a; box-shadow: 0 0 0 4px rgba(26,163,90,.14); }
.cmp-week b { font-weight: 600; }
.cmp-week em { font-style: normal; font-weight: 600; font-size: 13px; color: #147a44; background: #e6f6ed; padding: 6px 12px; border-radius: 999px; }
.cmp-sheet { max-width: 620px; margin: 40px auto 0; }
.cmp-sheet .xl-window { transform: none; }
@media (max-width: 900px) {
  .cmp5 { padding-top: 64px; }
  .cmp-seg button { min-width: 0; padding: 11px 18px; font-size: 14px; }
  .cmp-four { grid-template-columns: 1fr; border-top: 0; }
  .cmp-four > div { padding: 20px 0; }
  .cmp-four > div + div { border-left: 0; border-top: 1px solid #dfe8f0; }
  .cmp-week { flex-wrap: wrap; justify-content: center; border-radius: 22px; text-align: center; }
  .cmp-sheet { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) { .cmp-seg > i, .cmp-pane.on { transition: none; animation: none; } }
/* v51: beide panelen in dezelfde cel, zodat de pagina niet verspringt bij wisselen */
.cmp-panes { display: grid; margin-top: 44px; }
.cmp-panes > .cmp-pane { grid-area: 1 / 1; margin-top: 0; }
.cmp-pane:not(.on) { visibility: hidden; opacity: 0; }
.cmp-week s { text-decoration: none; }
@media (max-width: 900px) { .cmp-week s { display: none; } .cmp-week { column-gap: 8px; } }

/* v52 klantverhalen: echte foto met citaat in glazen kaart */
.qp { position: relative; isolation: isolate; overflow: hidden; margin-top: 52px; min-height: 600px; border-radius: 40px; background: #061a33; }
.qp-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s .8s; }
.qp-slide.on { opacity: 1; visibility: visible; transition: opacity .8s ease; }
.qp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 8s ease-out; }
.qp-slide.on .qp-bg { transform: scale(1); }
.qp-slide:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,16,34,.72) 0%, rgba(4,16,34,.35) 50%, rgba(4,16,34,.05) 100%), linear-gradient(0deg, rgba(4,16,34,.55), rgba(4,16,34,0) 40%); }
.qp-slide[data-side="right"]:after { background: linear-gradient(270deg, rgba(4,16,34,.72) 0%, rgba(4,16,34,.35) 50%, rgba(4,16,34,.05) 100%), linear-gradient(0deg, rgba(4,16,34,.55), rgba(4,16,34,0) 40%); }
.qp-card { position: absolute; z-index: 1; left: 48px; bottom: 100px; width: min(600px, calc(100% - 96px)); padding: 34px; border-radius: 28px; background: rgba(10, 28, 52, .38); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); color: #fff; transform: translateY(10px); opacity: 0; transition: transform .7s ease .15s, opacity .7s ease .15s; }
.qp-slide.on .qp-card { transform: none; opacity: 1; }
.qp-slide[data-side="right"] .qp-card { left: auto; right: 48px; }
.qp-logo { display: inline-grid; place-items: center; height: 54px; padding: 0 18px; border-radius: 14px; background: #fff; }
.qp-logo img { max-height: 30px !important; max-width: 140px; width: auto !important; height: auto !important; object-fit: contain; }
.qp-card blockquote { margin: 22px 0 0; font-size: clamp(22px, 2.3vw, 30px); font-weight: 400; letter-spacing: -.015em; line-height: 1.25; text-wrap: balance; }
.qp-card figcaption { margin-top: 22px; }
.qp-card figcaption b { display: block; font-size: 16px; font-weight: 600; }
.qp-card figcaption span { display: block; margin-top: 2px; font-size: 14px; color: rgba(255,255,255,.72); }
.qp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); }
.qp-tag { font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); }
.qp-foot a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; text-decoration: none; }
.qp-foot a:hover { color: #bfe2fb; }
.qp-ctl { position: absolute; z-index: 2; left: 48px; right: 48px; bottom: 30px; display: flex; align-items: center; justify-content: space-between; }
.qp-bars { display: flex; gap: 8px; }
.qp-bars button { position: relative; width: 52px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.qp-bars button:after, .qp-bars button:before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; border-radius: 2px; }
.qp-bars button:after { background: rgba(255,255,255,.32); }
.qp-bars button:before { z-index: 1; background: #fff; transform: scaleX(0); transform-origin: left; }
.qp-bars button.on:before { transform: scaleX(1); }
.qp.run .qp-bars button.on:before { animation: qpRun 8s linear forwards; }
.qp.run:hover .qp-bars button.on:before, .qp.run:has(:focus-visible) .qp-bars button.on:before { animation-play-state: paused; }
@keyframes qpRun { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.qp-nav { display: flex; gap: 10px; }
.qp-nav button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .25s; }
.qp-nav button:hover { background: rgba(255,255,255,.24); }
.qp-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qp-end { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; margin-top: 34px; text-align: center; }
.qp-end span { color: var(--muted); font-size: 15px; }
.qp-end a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; border: 1px solid #dbe7f0; background: #fff; font-weight: 600; color: var(--deep); text-decoration: none; transition: border-color .25s, background .25s; }
.qp-end a:hover { border-color: #a9cbe4; background: #f8fbfe; }
@media (max-width: 900px) {
  .qp { min-height: 640px; border-radius: 28px; margin-top: 36px; }
  .qp-slide:after, .qp-slide[data-side="right"]:after { background: linear-gradient(0deg, rgba(4,16,34,.8) 0%, rgba(4,16,34,.45) 55%, rgba(4,16,34,.05) 100%); }
  .qp-card, .qp-slide[data-side="right"] .qp-card { left: 12px; right: 12px; width: auto; bottom: 78px; padding: 22px; border-radius: 22px; }
  .qp-card blockquote { font-size: 20px; margin-top: 16px; }
  .qp-logo { height: 46px; padding: 0 14px; }
  .qp-ctl { left: 18px; right: 18px; bottom: 18px; }
  .qp-bars button { width: 40px; }
}
@media (prefers-reduced-motion: reduce) { .qp-slide, .qp-card, .qp-bg { transition: none; } }
/* v52b: foto's lichter en zichtbaarder, kaart compacter; mobiel foto boven, kaart eronder */
.qp-slide:after { background: linear-gradient(90deg, rgba(4,16,34,.55) 0%, rgba(4,16,34,.18) 48%, rgba(4,16,34,0) 70%), linear-gradient(0deg, rgba(4,16,34,.45), rgba(4,16,34,0) 30%); }
.qp-slide[data-side="right"]:after { background: linear-gradient(270deg, rgba(4,16,34,.55) 0%, rgba(4,16,34,.18) 48%, rgba(4,16,34,0) 70%), linear-gradient(0deg, rgba(4,16,34,.45), rgba(4,16,34,0) 30%); }
.qp-card { width: min(540px, calc(100% - 96px)); padding: 30px; background: rgba(8, 24, 46, .5); }
.qp-card blockquote { font-size: clamp(21px, 2vw, 27px); }
@media (max-width: 900px) {
  .qp { min-height: 700px; }
  .qp-bg { height: 300px; bottom: auto; }
  .qp-slide:after, .qp-slide[data-side="right"]:after { background: linear-gradient(180deg, rgba(6,26,51,0) 0, rgba(6,26,51,0) 160px, #061a33 300px); }
  .qp-card, .qp-slide[data-side="right"] .qp-card { background: rgba(255,255,255,.07); }
}
@media (max-width: 900px) { .qp-card, .qp-slide[data-side="right"] .qp-card { width: auto; } }

/* v52 statistiek onder de Excel-schakelaar */
.cmp-stat { display: grid; grid-template-columns: auto minmax(0, 420px); justify-content: center; align-items: center; gap: 12px 32px; margin: 56px auto 0; padding-top: 40px; border-top: 1px solid #dfe8f0; }
.cmp-stat strong { font-size: clamp(56px, 7vw, 96px); font-weight: 300; letter-spacing: -.05em; line-height: .9; color: var(--deep); white-space: nowrap; }
.cmp-stat p { margin: 0; font-size: 18px; line-height: 1.45; color: var(--ink); text-wrap: balance; }
.cmp-stat a { display: block; margin-top: 8px; font-size: 13px; color: #8aa0b5; text-decoration: none; }
.cmp-stat a:hover { color: var(--deep); text-decoration: underline; }
@media (max-width: 900px) { .cmp-stat { grid-template-columns: 1fr; text-align: center; margin-top: 40px; padding-top: 30px; } .cmp-stat p { font-size: 16px; } }
.cmp-pane .cmp-stat { margin-top: 36px; padding-top: 32px; }
.cmp-pane .cmp-stat strong { font-size: clamp(52px, 6vw, 80px); }
@media (max-width: 900px) { .cmp-pane .cmp-stat { margin-top: 24px; padding-top: 24px; } }

/* v52c: rustig scheidingslijntje tussen Excel-blok en klantverhalen */
.cmp5 { padding-bottom: 72px; }
.qp-section { padding-top: 0; }
.sep { display: block; width: min(720px, 100%); height: 1px; margin: 0 auto 72px; border: 0; background: linear-gradient(90deg, rgba(1,78,155,0), rgba(1,78,155,.22) 30%, rgba(1,78,155,.22) 70%, rgba(1,78,155,0)); position: relative; overflow: visible; }
.sep:after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px #fff, 0 0 0 6px rgba(1,78,155,.15); }
@media (max-width: 900px) { .cmp5 { padding-bottom: 48px; } .sep { margin-bottom: 48px; } }

/* v53 serviceblok: tijdlijn met kleur en AvanTimes-logo */
.svc2 { position: relative; isolation: isolate; overflow: hidden; padding: 110px 0 120px; background: linear-gradient(180deg, #f1f8fd 0%, #e8f3fb 55%, #f6fafd 100%); text-align: center; }
.svc2:before, .svc2:after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.svc2:before { width: 520px; height: 520px; left: -160px; top: -120px; background: radial-gradient(circle, rgba(0,131,198,.22), rgba(0,131,198,0) 70%); }
.svc2:after { width: 600px; height: 600px; right: -200px; bottom: -220px; background: radial-gradient(circle, rgba(1,78,155,.18), rgba(1,78,155,0) 70%); }
.svc2-logo { display: inline-flex; align-items: center; padding: 14px 24px; border-radius: 999px; background: #fff; box-shadow: 0 18px 40px -24px rgba(1,78,155,.45); border: 1px solid #e3eef7; }
.svc2-logo img { display: block; height: 34px; width: auto; }
.svc2-h { margin: 30px auto 0; font-size: clamp(34px, 4.2vw, 58px); font-weight: 400; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }
.svc2-h em { font-style: normal; color: var(--blue); background: linear-gradient(90deg, #0083c6, #014e9b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.svc2-sub { margin: 18px auto 0; max-width: 560px; font-size: 18px; color: var(--muted); text-wrap: balance; }
.svc2-tl { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 64px 0 0; padding: 0; }
.svc2-tl:before, .svc2-tl:after { content: ""; position: absolute; top: 21px; left: 16.66%; right: 16.66%; height: 3px; border-radius: 3px; background: #d4e6f3; }
.svc2-tl:after { background: linear-gradient(90deg, #0083c6, #014e9b); transform: scaleX(0); transform-origin: left; transition: transform 2.4s cubic-bezier(.4,0,.2,1); }
.svc2.in .svc2-tl:after { transform: scaleX(1); }
.svc2-tl li { position: relative; z-index: 1; padding: 0 26px; }
.svc2-dot { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; background: #fff; border: 2px solid #c6dcec; color: #8aa0b5; font: 600 16px Inter, Arial, sans-serif; transition: background .5s, border-color .5s, color .5s, box-shadow .5s; }
.svc2.in .svc2-dot { background: linear-gradient(135deg, #0083c6, #014e9b); border-color: transparent; color: #fff; box-shadow: 0 0 0 8px rgba(0,131,198,.12), 0 12px 24px -10px rgba(1,78,155,.6); }
.svc2.in li:nth-child(2) .svc2-dot { transition-delay: 1.1s; }
.svc2.in li:nth-child(3) .svc2-dot { transition-delay: 2.2s; }
.svc2-tl i { display: block; margin-top: 22px; font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.svc2-tl h3 { margin: 8px 0 0; font-size: clamp(24px, 2.3vw, 32px); font-weight: 400; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.svc2-tl p { margin: 10px auto 0; max-width: 300px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.svc2-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; margin-top: 52px; }
.svc2-exp { display: inline-flex; align-items: baseline; gap: 10px; padding: 12px 22px; border-radius: 999px; background: rgba(255,255,255,.7); border: 1px solid #dbe9f4; font-size: 15px; color: var(--muted); }
.svc2-exp b { font-size: 26px; font-weight: 400; letter-spacing: -.02em; color: var(--deep); }
.svc2-row a { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 999px; background: var(--deep); color: #fff; font-weight: 600; text-decoration: none; transition: background .25s; }
.svc2-row a:hover { background: #0a3f80; }
@media (max-width: 900px) {
  .svc2 { padding: 72px 0 80px; text-align: left; }
  .svc2-logo { padding: 11px 18px; } .svc2-logo img { height: 28px; }
  .svc2-h, .svc2-sub { text-align: center; }
  .svc2-logo { display: flex; width: max-content; margin: 0 auto; }
  .svc2-tl { grid-template-columns: 1fr; gap: 34px; margin-top: 44px; padding-left: 58px; }
  .svc2-tl:before, .svc2-tl:after { left: 20px; right: auto; top: 22px; bottom: 22px; width: 3px; height: auto; }
  .svc2-tl:after { transform: scaleY(0); transform-origin: top; background: linear-gradient(180deg, #0083c6, #014e9b); }
  .svc2.in .svc2-tl:after { transform: scaleY(1); }
  .svc2-tl li { padding: 0; }
  .svc2-dot { position: absolute; left: -58px; top: 0; margin: 0; }
  .svc2-tl i { margin-top: 0; padding-top: 4px; }
  .svc2-tl p { margin-left: 0; }
  .svc2-row { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .svc2-tl:after, .svc2-dot { transition: none !important; } }
@media (max-width: 900px) {
  .svc2-tl:before, .svc2-tl:after { display: none; }
  .svc2-tl li:not(:last-child):after { content: ""; position: absolute; left: -38px; top: 50px; bottom: -28px; width: 3px; border-radius: 3px; background: #d4e6f3; transition: background .6s; }
  .svc2.in .svc2-tl li:not(:last-child):after { background: linear-gradient(180deg, #0083c6, #014e9b); }
  .svc2.in .svc2-tl li:nth-child(2):after { transition-delay: 1.1s; }
}

/* v53b: 40+ en knop samen in één moderne glazen pil, zonder pijl */
.svc2-pill { position: relative; display: inline-flex; align-items: center; gap: 22px; padding: 8px 8px 8px 28px; border-radius: 999px; background: linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.62)) padding-box, linear-gradient(135deg, rgba(0,131,198,.45), rgba(255,255,255,.9) 45%, rgba(1,78,155,.35)) border-box; border: 1px solid transparent; box-shadow: 0 24px 50px -30px rgba(1,78,155,.55), inset 0 1px 0 rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.svc2-pill .svc2-exp { display: inline-flex; align-items: center; gap: 12px; padding: 0 22px 0 0; border: 0; border-radius: 0; background: none; border-right: 1px solid rgba(1,78,155,.14); }
.svc2-pill .svc2-exp b { font-size: 34px; font-weight: 300; letter-spacing: -.04em; line-height: 1; color: var(--deep); }
.svc2-pill .svc2-exp small { font-size: 12.5px; line-height: 1.3; font-weight: 500; letter-spacing: .01em; color: #5b7690; text-align: left; }
.svc2-row .svc2-pill a { padding: 16px 28px; border-radius: 999px; background: linear-gradient(135deg, #0a8fd4 0%, #014e9b 70%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 22px -12px rgba(1,78,155,.8); color: #fff; font-weight: 600; letter-spacing: .005em; transition: box-shadow .3s ease, filter .3s ease; }
.svc2-row .svc2-pill a:hover { background: linear-gradient(135deg, #0a8fd4 0%, #014e9b 70%); filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 14px 30px -12px rgba(0,131,198,.75); }
@media (max-width: 560px) {
  .svc2-pill { gap: 14px; padding: 7px 7px 7px 18px; }
  .svc2-pill .svc2-exp { gap: 8px; padding-right: 14px; }
  .svc2-pill .svc2-exp b { font-size: 28px; }
  .svc2-pill .svc2-exp small { font-size: 11px; }
  .svc2-row .svc2-pill a { padding: 14px 18px; font-size: 14px; }
}
@media (max-width: 560px) {
  .svc2-pill { flex-direction: column; gap: 14px; width: 100%; max-width: 340px; padding: 18px 8px 8px; border-radius: 30px; }
  .svc2-pill .svc2-exp { padding: 0; border-right: 0; }
  .svc2-pill .svc2-exp b { font-size: 32px; }
  .svc2-pill .svc2-exp small { font-size: 12px; white-space: nowrap; }
  .svc2-row .svc2-pill a { width: 100%; text-align: center; padding: 16px 20px; font-size: 15px; }
}
@media (max-width: 560px) { .svc2-row .svc2-pill a { justify-content: center; } }

/* v54 veelgestelde vragen: glazen kaarten op het doorlopende lichtblauw van het serviceblok */
.svc2 { padding-bottom: 72px; }
.svc2:after { bottom: auto; top: 25%; opacity: .8; }
.hf2 { position: relative; isolation: isolate; overflow: hidden; padding: 0 0 110px; background: linear-gradient(180deg, #f6fafd 0%, #e9f3fb 45%, #f6fafd 100%); }
.hf2:before { content: ""; position: absolute; z-index: -1; width: 560px; height: 560px; left: 50%; top: 32%; margin-left: -280px; border-radius: 50%; background: radial-gradient(circle, rgba(0,131,198,.16), rgba(0,131,198,0) 70%); filter: blur(50px); pointer-events: none; }
.hf2 .sep { margin-bottom: 72px; }
.hf2 .sep:after { box-shadow: 0 0 0 5px #f6fafd, 0 0 0 6px rgba(1,78,155,.15); }
.hf2-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.hf2 .hf-c { position: relative; overflow: hidden; margin: 0; padding: 30px; border-radius: 28px; background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 24px 50px -34px rgba(1,78,155,.5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hf2 .hf-c:before { content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, #0083c6, #014e9b); }
.hf2 .hf-c span { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--blue); }
.hf2 .hf-c h3 { margin: 10px 0 0; font-size: 24px; font-weight: 400; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); }
.hf2 .hf-c p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.hf2-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 16px; }
.hf2-more details { border-radius: 22px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .3s; }
.hf2-more details[open] { background: rgba(255,255,255,.8); }
.hf2-more summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 20px 20px 24px; cursor: pointer; font-size: 17px; font-weight: 400; line-height: 1.35; color: var(--ink); }
.hf2-more summary::-webkit-details-marker { display: none; }
.hf2-more summary:before, .hf2-more summary:after { display: none !important; content: none !important; }
.hf2-more .pm { flex: none; position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #d3e3ef; background: rgba(255,255,255,.7); transition: background .3s, border-color .3s, transform .3s; }
.hf2-more .pm:before, .hf2-more .pm:after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--deep); transition: transform .3s, background .3s; }
.hf2-more .pm:after { transform: rotate(90deg); }
.hf2-more details[open] .pm { background: var(--deep); border-color: var(--deep); transform: rotate(180deg); }
.hf2-more details[open] .pm:before, .hf2-more details[open] .pm:after { background: #fff; }
.hf2-more details[open] .pm:after { transform: rotate(0); }
.hf2-more summary:hover .pm { border-color: #a9cbe4; }
.hf2-more details p { margin: 0; padding: 0 24px 22px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.hf2 .svc2-row { margin-top: 48px; }
.hf2-pill .hf2-q { padding-right: 4px; font-size: 15px; color: #4b6378; }
@media (max-width: 900px) {
  .svc2 { padding-bottom: 56px; }
  .hf2 { padding-bottom: 72px; }
  .hf2 .sep { margin-bottom: 48px; }
  .hf2-cards, .hf2-more { grid-template-columns: 1fr; }
  .hf2-cards { margin-top: 36px; }
  .hf2 .hf-c { padding: 26px 22px; border-radius: 24px; }
  .hf2 .hf-c:before { left: 22px; right: 22px; }
}
@media (max-width: 560px) { .hf2-pill .hf2-q { padding: 0; text-align: center; } }

/* v54b: vragen schuiven als wit blad over het serviceblok, zoals het productblok bovenaan */
.svc2 { padding-bottom: 116px; }
.hf2 { z-index: 1; margin-top: -44px; padding-top: 88px; border-radius: 44px 44px 0 0; background: linear-gradient(180deg, #fff 0%, #f3f8fc 30%, #e9f3fb 65%, #f6fafd 100%); box-shadow: 0 -24px 50px -34px rgba(1,78,155,.35); }
.hf2:after { content: ""; position: absolute; left: 50%; top: 14px; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: #d6e5f1; }
@media (max-width: 900px) {
  .svc2 { padding-bottom: 84px; }
  .hf2 { margin-top: -28px; padding-top: 64px; border-radius: 28px 28px 0 0; }
}

/* v55 afsluiting: demo-blok en footer samen als één donker blad */
.endcta { position: relative; z-index: 2; isolation: isolate; overflow: hidden; margin-top: -44px; padding: 104px 0 64px; border-radius: 44px 44px 0 0; background: linear-gradient(170deg, #0a2a52 0%, #061a33 60%); color: #fff; box-shadow: 0 -24px 50px -34px rgba(1,30,60,.6); }
.endcta:before { content: ""; position: absolute; z-index: -1; width: 700px; height: 700px; right: -220px; top: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(0,131,198,.35), rgba(0,131,198,0) 70%); filter: blur(40px); pointer-events: none; }
.endcta-g { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 48px; align-items: center; }
.endcta-h { margin: 0; font-size: clamp(34px, 4.2vw, 58px); font-weight: 400; letter-spacing: -.03em; line-height: 1.05; color: #fff; }
.endcta-h span { color: rgba(255,255,255,.55); }
.endcta p { margin: 18px 0 0; max-width: 520px; font-size: 18px; line-height: 1.5; color: rgba(255,255,255,.72); }
.endcta-acts { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px; justify-self: end; }
.endcta-acts > a { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border-radius: 999px; font-size: 16px; font-weight: 600; text-decoration: none; }
.endcta-acts .btn { margin: 0; }
.endcta-alt { color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.26); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .25s, border-color .25s; }
.endcta-alt:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
footer.ft { position: relative; z-index: 2; margin: 0; padding: 56px 0 28px; border: 0; border-radius: 44px 44px 0 0; background: #061a33; color: rgba(255,255,255,.62); }
body:has(.endcta) footer.ft, #app:has(.endcta) footer.ft { border-radius: 0; }
#app:has(.endcta) footer.ft .wrap { border-top: 1px solid rgba(255,255,255,.12); padding-top: 56px; }
#app:has(.endcta) footer.ft { padding-top: 0; }
footer.ft .ft-logo { display: inline-flex; padding: 10px 16px; border-radius: 999px; background: #fff; }
footer.ft .ft-logo img { display: block; height: 30px; width: auto; }
footer.ft .footer-brand p { margin: 18px 0 0; color: rgba(255,255,255,.62); font-size: 15px; line-height: 1.6; }
footer.ft h3 { margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
footer.ft .footer-links a, footer.ft .footer-links span { color: rgba(255,255,255,.7); text-decoration: none; }
footer.ft .footer-links a:hover { color: #fff; }
footer.ft .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5); }
footer.ft .footer-bottom a { color: rgba(255,255,255,.62); text-decoration: none; }
footer.ft .footer-bottom a:hover { color: #fff; }
@media (max-width: 900px) {
  .endcta { margin-top: -28px; padding: 72px 0 44px; border-radius: 28px 28px 0 0; }
  .endcta-g { grid-template-columns: 1fr; gap: 28px; }
  .endcta-acts { max-width: none; justify-self: stretch; }
  footer.ft { border-radius: 28px 28px 0 0; }
  #app:has(.endcta) footer.ft .wrap { padding-top: 44px; }
}
/* v55b: lijn binnen de kolommen; mobiel geen witte strook onder de footer, compactere links */
#app:has(.endcta) footer.ft .wrap { border-top: 0; padding-top: 0; }
#app:has(.endcta) footer.ft .footer-grid { border-top: 1px solid rgba(255,255,255,.12); padding-top: 56px; }
@media (max-width: 900px) {
  body { padding-bottom: 0; }
  footer.ft { padding-bottom: 112px; }
  footer.ft .footer-links { gap: 0; }
  #app:has(.endcta) footer.ft .footer-grid { padding-top: 40px; }
}

/* v56 Software-pagina: donkere hero met laptop (stijl fotoblok), wit blad, modules per onderwerp */
.swp-hero { position: relative; isolation: isolate; overflow: hidden; padding: 150px 0 140px; color: #fff; background: #061a33; }
.swp-hero:before { content: ""; position: absolute; inset: -80px; z-index: -2; background: url(assets/app-iphone-wide.webp) 85% 50% / cover no-repeat; filter: blur(34px) saturate(1.2); transform: scale(1.1); opacity: .9; }
.swp-hero:after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,16,34,.92) 0%, rgba(4,16,34,.72) 42%, rgba(4,16,34,.25) 75%, rgba(4,16,34,.15) 100%), linear-gradient(0deg, rgba(4,16,34,.5), rgba(4,16,34,0) 35%); }
.swp-hero-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.swp-logo { display: inline-flex; padding: 11px 18px; border-radius: 999px; background: #fff; box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); }
.swp-logo img { display: block; height: 30px; width: auto; }
.swp-crumbs { display: flex; gap: 8px; margin-top: 30px; font-size: 13px; color: rgba(255,255,255,.5); }
.swp-crumbs a { color: inherit; text-decoration: none; }
.swp-k { margin: 14px 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.swp-hero .swp-k { color: #7cc4f0; }
.swp-h1 { margin: 0; max-width: none; font-size: clamp(42px, 5vw, 72px); font-weight: 400; letter-spacing: -.035em; line-height: 1.02; color: #fff; }
.swp-h1 span { color: rgba(255,255,255,.55); }
.swp-sub { margin: 18px 0 0; max-width: 520px; font-size: 18px; line-height: 1.5; color: var(--muted); }
.swp-hero .swp-sub { color: rgba(255,255,255,.75); }
.swp-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.swp-acts .btn { margin: 0; }
.swp-glass { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border-radius: 999px; color: #fff; font-weight: 600; text-decoration: none; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.26); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .25s; }
.swp-glass:hover { background: rgba(255,255,255,.16); }
.swp-stats { display: grid; grid-template-columns: 1fr 1fr; margin-top: 44px; max-width: 560px; border-top: 1px solid rgba(255,255,255,.18); }
.swp-stats div { padding: 22px 22px 18px 0; }
.swp-stats div:nth-child(even) { padding-left: 26px; border-left: 1px solid rgba(255,255,255,.18); }
.swp-stats div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.18); }
.swp-stats strong { display: block; font-size: clamp(32px, 3.4vw, 46px); font-weight: 400; letter-spacing: -.03em; line-height: 1; }
.swp-stats span { display: block; margin-top: 8px; font-size: 15px; color: rgba(255,255,255,.72); }
.swp-laptop { margin: 0 -14% 0 0; filter: drop-shadow(0 50px 60px rgba(0,0,0,.45)); }
.swp-laptop img { display: block; width: 100%; height: auto; }
.swp-sheet { position: relative; z-index: 2; margin-top: -44px; padding: 104px 0; border-radius: 44px 44px 0 0; background: #fff; box-shadow: 0 -24px 50px -34px rgba(1,30,60,.5); }
.swp-sheet:after { content: ""; position: absolute; left: 50%; top: 14px; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: #d6e5f1; }
.swp-h2 { margin: 0; max-width: none; font-size: clamp(34px, 4.2vw, 58px); font-weight: 400; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }
.swp-h2 span { color: #8aa0b5; }
.swp-heart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.swp-list { margin-top: 28px; border-top: 1px solid #dfe8f0; }
.swp-list div { padding: 18px 0; border-bottom: 1px solid #edf2f7; }
.swp-list b, .swp-items b { display: block; font-size: 20px; font-weight: 400; letter-spacing: -.01em; color: var(--ink); }
.swp-list span, .swp-items span { display: block; margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.swp-line { display: inline-flex; align-items: center; min-height: 50px; margin-top: 26px; padding: 0 24px; border-radius: 999px; border: 1px solid #d3e3ef; background: #fff; color: var(--deep); font-weight: 600; text-decoration: none; transition: border-color .25s; }
.swp-line:hover { border-color: #a9cbe4; }
.swp-tl { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 80px 0 0; padding: 0; }
.swp-tl:before { content: ""; position: absolute; top: 21px; left: 12.5%; right: 12.5%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #0083c6, #014e9b); }
.swp-tl li { position: relative; z-index: 1; padding: 0 18px; text-align: center; }
.swp-dot { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; background: linear-gradient(135deg, #0083c6, #014e9b); color: #fff; font: 600 16px Inter, Arial, sans-serif; box-shadow: 0 0 0 8px rgba(0,131,198,.12); }
.swp-tl b { display: block; margin-top: 20px; font-size: 22px; font-weight: 400; letter-spacing: -.015em; color: var(--ink); }
.swp-tl li > span:last-child { display: block; max-width: 230px; margin: 8px auto 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.swp-mods { padding: 104px 0; background: #f6fafd; text-align: center; }
.swp-seg { display: grid; grid-template-columns: repeat(3, 1fr); width: min(720px, 100%); margin: 36px auto 0; padding: 5px; border-radius: 999px; background: #eef4f9; border: 1px solid #e1eaf2; }
.swp-seg button { position: relative; overflow: hidden; border: 0; background: none; padding: 12px 10px; border-radius: 999px; font: 600 15px Inter, Arial, sans-serif; color: #6f859a; cursor: pointer; transition: background .4s, color .4s, box-shadow .4s; }
.swp-seg button.on { background: #fff; color: var(--deep); box-shadow: 0 8px 20px -12px rgba(10,37,64,.45); }
.swp-seg button:after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--blue); opacity: 0; transform: scaleX(0); transform-origin: left; }
.swp-mods.run .swp-seg button.on:after { opacity: .5; animation: swpRun 6s linear forwards; }
.swp-mods.run:hover .swp-seg button.on:after, .swp-mods.run:has(:focus-visible) .swp-seg button.on:after { animation-play-state: paused; }
@keyframes swpRun { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.swp-pane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 52px; text-align: left; }
.swp-pane[hidden] { display: none; }
.swp-pane.on { animation: swpIn .5s ease both; }
@keyframes swpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.swp-items { border-top: 1px solid #dfe8f0; }
.swp-items a { display: block; padding: 22px 0; border-bottom: 1px solid #edf2f7; text-decoration: none; }
.swp-items a:hover b { color: var(--blue); }
@media (max-width: 900px) {
  .swp-hero { padding: 110px 0 90px; }
  .swp-hero-g, .swp-heart, .swp-pane { grid-template-columns: 1fr; gap: 32px; }
  .swp-laptop { margin: 0 -18px 0 0; order: 2; }
  .swp-stats { margin-top: 32px; }
  .swp-sheet { margin-top: -28px; padding: 64px 0; border-radius: 28px 28px 0 0; }
  .swp-tl { grid-template-columns: 1fr; gap: 30px; margin-top: 52px; padding-left: 58px; }
  .swp-tl:before { left: 20px; right: auto; top: 22px; bottom: 22px; width: 3px; height: auto; background: linear-gradient(180deg, #0083c6, #014e9b); }
  .swp-tl li { padding: 0; text-align: left; }
  .swp-dot { position: absolute; left: -58px; top: 0; margin: 0; }
  .swp-tl b { margin-top: 6px; }
  .swp-tl li > span:last-child { margin-left: 0; }
  .swp-mods { padding: 64px 0; }
  .swp-seg { grid-template-columns: 1fr; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) { .swp-pane.on { animation: none; } }
@media (min-width: 901px) {
  .swp-hero-g { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .swp-h1 { font-size: clamp(40px, 4.4vw, 64px); }
  .swp-laptop { margin: 0 -8% 0 -6%; transform: translateY(-20px); }
}

/* v57 Software-hero gecentreerd zonder laptop; laptop staat nu bij "Het hart" */
.swp-hero-c { padding: 140px 0 150px; text-align: center; }
.swp-hero-c:after { background: radial-gradient(120% 90% at 50% 0%, rgba(4,16,34,.55), rgba(4,16,34,.85) 70%), linear-gradient(0deg, rgba(4,16,34,.5), rgba(4,16,34,0) 35%); }
.swp-wl { display: block; height: 44px; width: auto; margin: 0 auto; }
.swp-hero-c .swp-crumbs, .swp-hero-c .swp-acts { justify-content: center; }
.swp-hero-c .swp-sub { margin-left: auto; margin-right: auto; }
.swp-hero-c .swp-h1 { font-size: clamp(42px, 5.6vw, 80px); }
.swp-row4 { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 940px; margin: 56px auto 0; border-top: 1px solid rgba(255,255,255,.18); }
.swp-row4 div { padding: 24px 14px 0; }
.swp-row4 div + div { border-left: 1px solid rgba(255,255,255,.18); }
.swp-row4 strong { display: block; font-size: clamp(32px, 3.4vw, 46px); font-weight: 400; letter-spacing: -.03em; line-height: 1; }
.swp-row4 span { display: block; margin-top: 8px; font-size: 15px; color: rgba(255,255,255,.72); }
.swp-laptop2 { margin: 0 -6% 0 0; filter: drop-shadow(0 34px 40px rgba(10,37,64,.28)); }
.swp-laptop2 img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .swp-hero-c { padding: 110px 0 100px; }
  .swp-wl { height: 36px; }
  .swp-row4 { grid-template-columns: 1fr 1fr; margin-top: 40px; }
  .swp-row4 div:nth-child(3) { border-left: 0; }
  .swp-row4 div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.18); margin-top: 20px; }
  .swp-laptop2 { margin: 0 -10px; }
}

/* v58 kerngetallen Software: groot dun getal met blauw lichtlijntje, links uitgelijnd */
.swp-row4 { display: flex; gap: 40px; max-width: 980px; border-top: 0; text-align: left; }
.swp-row4 div { flex: 1; position: relative; padding: 22px 0 0; }
.swp-row4 div + div { border-left: 0; }
.swp-row4 div:before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #7cc4f0, rgba(124,196,240,0)); }
.swp-row4 strong { font-size: clamp(44px, 4.6vw, 64px); font-weight: 300; letter-spacing: -.045em; line-height: .95; }
.swp-row4 span { margin-top: 10px; font-size: 14.5px; line-height: 1.4; }
@media (max-width: 900px) {
  .swp-row4 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .swp-row4 div:nth-child(n+3) { border-top: 0; margin-top: 0; }
}

/* v59 Branches: donkere kop met gestapelde werkvloerfoto's, mozaïek als wit blad */
.brh { position: relative; isolation: isolate; overflow: hidden; padding: 130px 0 150px; color: #fff; background: linear-gradient(170deg, #0a2a52 0%, #061a33 60%); }
.brh:before { content: ""; position: absolute; z-index: -1; width: 760px; height: 760px; right: -240px; top: -320px; border-radius: 50%; background: radial-gradient(circle, rgba(0,131,198,.38), rgba(0,131,198,0) 70%); filter: blur(40px); }
.brh-g { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.brh .swp-wl { margin: 0; }
.brh-h1 { margin: 0; max-width: none; font-size: clamp(40px, 4.4vw, 62px); font-weight: 400; letter-spacing: -.035em; line-height: 1.03; color: #fff; }
.brh-h1 span { color: rgba(255,255,255,.55); }
.brh .swp-sub { color: rgba(255,255,255,.75); }
.brh-row { display: flex; gap: 24px; margin-top: 44px; }
.brh-row a { flex: 1; position: relative; padding-top: 20px; color: #fff; text-decoration: none; }
.brh-row a:before { content: ""; position: absolute; left: 0; top: 0; width: 36px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #7cc4f0, rgba(124,196,240,0)); transition: width .4s; }
.brh-row a:hover:before { width: 100%; }
.brh-row b { display: block; font-size: 22px; font-weight: 300; letter-spacing: -.02em; }
.brh-row span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,.65); }
.brh-stack { position: relative; height: 480px; }
.brh-stack i { position: absolute; width: 62%; aspect-ratio: 4 / 5; border-radius: 28px; background: #0a2a52 center / cover; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 40px 60px -30px rgba(0,0,0,.6); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.brh-stack i:nth-child(1) { left: 0; top: 30px; transform: rotate(-5deg); }
.brh-stack i:nth-child(2) { left: 20%; top: 0; z-index: 2; }
.brh-stack i:nth-child(3) { right: 0; top: 40px; transform: rotate(5deg); z-index: 1; }
.brh-stack:hover i:nth-child(1) { transform: rotate(-8deg) translateX(-14px); }
.brh-stack:hover i:nth-child(3) { transform: rotate(8deg) translateX(14px); }
.brh + .br-mosaic-sec { position: relative; z-index: 2; margin-top: -44px; padding-top: 96px; border-radius: 44px 44px 0 0; background: #fff; box-shadow: 0 -24px 50px -34px rgba(1,30,60,.5); }
.brh + .br-mosaic-sec:after { content: ""; position: absolute; left: 50%; top: 14px; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: #d6e5f1; }
.brh + .br-mosaic-sec .br-intro { background: transparent; border: 0; box-shadow: none; }
.brh + .br-mosaic-sec .br-intro .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.brh + .br-mosaic-sec .br-intro .eyebrow:before { display: none; }
.brh + .br-mosaic-sec .br-intro h2 { font-weight: 400; letter-spacing: -.03em; font-size: clamp(32px, 3.2vw, 44px); line-height: 1.08; }
.brh-pill .hf2-q { text-align: left; } .brh-pill .hf2-q b { display: block; color: var(--ink); font-weight: 600; }
.br-mosaic-sec .svc2-row { margin-top: 44px; }
@media (max-width: 900px) {
  .brh { padding: 110px 0 100px; }
  .brh-g { grid-template-columns: 1fr; gap: 36px; }
  .brh-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .brh-stack { height: 340px; }
  .brh + .br-mosaic-sec { margin-top: -28px; padding-top: 64px; border-radius: 28px 28px 0 0; }
  .brh-pill .hf2-q { text-align: center; }
}

/* v60 Koppelingen-pagina: donkere kop met stroom, wit blad met tijdlijn, pakketten, voorbeeldregel, klant, afspraken, FAQ */

.kp .k{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.kp .h2{margin:0 auto;max-width:none;font-size:clamp(34px,4.2vw,58px);font-weight:400;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.kp .h2 span{color:#8aa0b5}
.kp .sub{margin:18px auto 0;max-width:560px;font-size:18px;line-height:1.5;color:var(--muted)}
.kp .c{text-align:center}
/* hero */
.kph{position:relative;isolation:isolate;overflow:hidden;padding:140px 0 150px;color:#fff;background:#061a33;text-align:center}
.kph:before{content:"";position:absolute;inset:-80px;z-index:-2;background:url(assets/app-iphone-wide.webp) 85% 50%/cover;filter:blur(34px) saturate(1.2);transform:scale(1.1);opacity:.9}
.kph:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 50% 0%,rgba(4,16,34,.55),rgba(4,16,34,.86) 70%)}
.kph .k{color:#7cc4f0}.kph .h1{margin:0;max-width:none;font-size:clamp(42px,5.6vw,80px);font-weight:400;letter-spacing:-.035em;line-height:1.02;color:#fff}.kph .h1 span{color:rgba(255,255,255,.55)}
.kph .sub{color:rgba(255,255,255,.75)}
.kph .acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
/* stroom: bronnen -> AvanTimes -> pakketten */
.kpf{position:relative;display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;max-width:1060px;margin:64px auto 0}
.kpf .col{display:flex;flex-direction:column;gap:10px}
.kpf .chip{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);font-size:14.5px;font-weight:500;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap}
.kpf .chip svg{width:17px;height:17px;fill:none;stroke:#9fd6f7;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kpf .line{position:relative;height:2px;margin:0 18px;background:linear-gradient(90deg,rgba(124,196,240,.15),rgba(124,196,240,.5),rgba(124,196,240,.15));overflow:hidden;border-radius:2px}
.kpf .line i{position:absolute;top:-1px;left:0;width:80px;height:4px;border-radius:4px;background:linear-gradient(90deg,rgba(124,196,240,0),#9fd6f7,rgba(124,196,240,0));animation:kpRun 6s cubic-bezier(.45,0,.25,1) infinite}
.kpf .line+.core+.line i{animation-delay:3s}
@keyframes kpRun{from{transform:translateX(-80px)}to{transform:translateX(420px)}}
.kpf .core{display:grid;place-items:center;gap:10px;padding:22px 26px;border-radius:28px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);box-shadow:0 0 0 10px rgba(124,196,240,.06),0 30px 60px -30px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.kpf .core img{height:30px;width:auto}
.kpf .core small{font-size:12.5px;color:rgba(255,255,255,.7)}
.kpf .lg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kpf .lg span{display:grid;place-items:center;width:104px;height:46px;border-radius:14px;background:rgba(255,255,255,.94)}
.kpf .lg img{max-width:72px;max-height:24px;width:auto;height:auto}
.kpf .lg em{grid-column:1/-1;font-style:normal;text-align:center;font-size:12.5px;color:rgba(255,255,255,.65);padding-top:4px}
/* wit blad met tijdlijn */
.kps{position:relative;z-index:2;margin-top:-44px;padding:104px 0;border-radius:44px 44px 0 0;background:#fff;box-shadow:0 -24px 50px -34px rgba(1,30,60,.5)}
.kps:after{content:"";position:absolute;left:50%;top:14px;width:44px;height:4px;margin-left:-22px;border-radius:4px;background:#d6e5f1}
.kps .cols{display:grid;grid-template-columns:repeat(3,1fr);margin-top:72px;border-top:1px solid #dfe8f0;text-align:center}
.kps .cols>div{padding:30px 28px 0}.kps .cols>div+div{border-left:1px solid #dfe8f0}
.kps .cols b{display:block;font-size:22px;font-weight:400;letter-spacing:-.015em;color:var(--ink)}
.kps .cols span{display:block;margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--muted)}
/* pakketten */
.kpg{position:relative;isolation:isolate;overflow:hidden;padding:104px 0;background:linear-gradient(180deg,#f1f8fd 0%,#e8f3fb 55%,#f6fafd 100%)}
.kpg:before{content:"";position:absolute;z-index:-1;width:560px;height:560px;left:-160px;top:-140px;border-radius:50%;background:radial-gradient(circle,rgba(0,131,198,.2),rgba(0,131,198,0) 70%);filter:blur(60px)}
.kpg .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}
.kpg .card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:18px;padding:26px;border-radius:26px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);box-shadow:0 24px 50px -36px rgba(1,78,155,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-align:left}
.kpg .card:before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(0,131,198,.12),transparent 70%)}
.kpg .card:hover:before{opacity:1}
.kpg .card .lo{display:grid;place-items:center;height:64px;border-radius:16px;background:#fff;border:1px solid #edf2f7}
.kpg .card .lo img{max-width:110px;max-height:30px;width:auto;height:auto}
.kpg .card b{display:block;font-size:20px;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.kpg .card small{display:block;margin-top:4px;font-size:14px;color:var(--muted)}
.kpg .card.ask{background:linear-gradient(140deg,#014e9b,#0083c6);border-color:transparent;color:#fff;justify-content:space-between}
.kpg .card.ask b{color:#fff;font-size:22px}.kpg .card.ask small{color:rgba(255,255,255,.8);font-size:15px;line-height:1.5}
.kpg .card.ask a{align-self:flex-start;padding:13px 22px;border-radius:999px;background:#fff;color:var(--deep);font-weight:600;text-decoration:none}
.kpg .note{margin:28px auto 0;max-width:640px;font-size:14px;color:#8aa0b5}
/* afspraken */
.kpa{padding:104px 0;background:#fff}
.kpa .split{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.kpa .h2{margin:0}
.kpa .list{border-top:1px solid #dfe8f0}
.kpa .list div{display:grid;grid-template-columns:48px 1fr;gap:8px;padding:24px 0;border-bottom:1px solid #edf2f7}
.kpa .list i{font-style:normal;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--blue);padding-top:6px}
.kpa .list b{display:block;font-size:22px;font-weight:400;letter-spacing:-.015em;color:var(--ink)}
.kpa .list span{display:block;margin-top:6px;font-size:15.5px;line-height:1.55;color:var(--muted)}
/* faq */
.kpq{padding:0 0 110px;background:#fff}
.kpq .acc{max-width:860px;margin:44px auto 0;border-top:1px solid #dfe8f0;text-align:left}
.kpq details{border-bottom:1px solid #dfe8f0}
.kpq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 4px;cursor:pointer;font-size:clamp(19px,1.7vw,23px);font-weight:400;color:var(--ink)}
.kpq summary::-webkit-details-marker{display:none}.kpq summary:before,.kpq summary:after{display:none!important;content:none!important}
.kpq .pm{flex:none;position:relative;width:36px;height:36px;border-radius:50%;border:1px solid #d3e3ef;transition:background .3s,border-color .3s,transform .3s}
.kpq .pm:before,.kpq .pm:after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--deep);transition:transform .3s,background .3s}
.kpq .pm:after{transform:rotate(90deg)}
.kpq details[open] .pm{background:var(--deep);border-color:var(--deep);transform:rotate(180deg)}
.kpq details[open] .pm:before,.kpq details[open] .pm:after{background:#fff}.kpq details[open] .pm:after{transform:rotate(0)}
.kpq details p{margin:0;padding:0 64px 26px 4px;font-size:16.5px;line-height:1.6;color:var(--muted)}
@media (max-width:900px){
 .kph{padding:110px 0 100px}
 .kpf{grid-template-columns:1fr;justify-items:center;gap:0}
 .kpf .col{flex-direction:row;flex-wrap:wrap;justify-content:center}
 .kpf .line{width:2px;height:44px;margin:14px 0;background:linear-gradient(180deg,rgba(124,196,240,.15),rgba(124,196,240,.5),rgba(124,196,240,.15))}
 .kpf .line i{width:4px;height:30px;left:-1px;top:0;background:linear-gradient(180deg,rgba(124,196,240,0),#9fd6f7,rgba(124,196,240,0));animation-name:kpRunV}
 .kpf .lg{grid-template-columns:repeat(3,1fr)}
 .kps{margin-top:-28px;padding:64px 0;border-radius:28px 28px 0 0}
 .kps .cols{grid-template-columns:1fr;border-top:0;margin-top:44px}.kps .cols>div{padding:20px 0}.kps .cols>div+div{border-left:0;border-top:1px solid #dfe8f0}
 .kpg,.kpa{padding:64px 0}.kpg .grid{grid-template-columns:1fr 1fr;gap:10px}.kpg .card{padding:18px;border-radius:20px}
 .kpa .split{grid-template-columns:1fr;gap:28px}
 .kpq details p{padding-right:0}
}
@keyframes kpRunV{from{transform:translateY(-30px)}to{transform:translateY(60px)}}
@media (prefers-reduced-motion:reduce){.kpf .line i{animation:none;opacity:0}}

/* v60 aanvullingen koppelingen */
.kpg .card small.do{margin-top:10px;padding-top:12px;border-top:1px solid #edf2f7;color:var(--ink);font-size:14.5px;line-height:1.45}
.kpx{padding:104px 0 0;background:#fff;text-align:center}
.kpx .tbl{max-width:980px;margin:48px auto 0;border-radius:24px;overflow:hidden;border:1px solid #e3edf5;box-shadow:0 30px 60px -44px rgba(10,37,64,.5);text-align:left;background:#fff}
.kpx .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:#f4f8fb;border-bottom:1px solid #e3edf5;font-size:13px;color:#5b7690}
.kpx .bar b{color:var(--ink);font-weight:600}
.kpx .bar .st{display:inline-flex;align-items:center;gap:8px;color:#147a44;font-weight:600}.kpx .bar .st i{width:7px;height:7px;border-radius:50%;background:#1aa35a;box-shadow:0 0 0 4px rgba(26,163,90,.14)}
.kpx table{width:100%;border-collapse:collapse;font-size:15px}
.kpx th{padding:14px 20px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8aa0b5;text-align:left;border-bottom:1px solid #edf2f7}
.kpx td{padding:16px 20px;color:var(--ink);border-bottom:1px solid #f1f5f9;font-variant-numeric:tabular-nums}
.kpx tr:last-child td{border-bottom:0}
.kpx td.n,.kpx th.n{text-align:right}
.kpx .fine{margin:16px auto 0;max-width:640px;font-size:13.5px;color:#8aa0b5}
.kpc{padding:104px 0 0;background:#fff}
.kpc figure{position:relative;margin:0;display:grid;grid-template-columns:1fr 1fr;border-radius:36px;overflow:hidden;background:linear-gradient(170deg,#0a2a52,#061a33);color:#fff;min-height:420px}
.kpc .ph{background:#0a2a52 center/cover}
.kpc .tx{padding:52px;display:flex;flex-direction:column;justify-content:center}
.kpc .lg{align-self:flex-start;display:inline-grid;place-items:center;height:52px;padding:0 16px;border-radius:14px;background:#fff}
.kpc .lg img{max-height:28px;width:auto}
.kpc blockquote{margin:24px 0 0;font-size:clamp(22px,2.3vw,30px);font-weight:400;letter-spacing:-.015em;line-height:1.25;text-wrap:balance}
.kpc figcaption{margin-top:22px}.kpc figcaption b{display:block;font-size:16px;font-weight:600}.kpc figcaption span{display:block;margin-top:2px;font-size:14px;color:rgba(255,255,255,.7)}
.kpc a{align-self:flex-start;margin-top:24px;color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:3px}
@media (max-width:900px){
 .kpx,.kpc{padding-top:64px}.kpx .tbl{overflow-x:auto}.kpx table{min-width:560px}
 .kpc figure{grid-template-columns:1fr;border-radius:28px}.kpc .ph{height:220px}.kpc .tx{padding:28px 22px}
}
/* v60b: wat er doorgaat als drie kolommen in plaats van voorbeeldtabel */
.kpx-cols { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1040px; margin: 52px auto 0; border-top: 1px solid #dfe8f0; }
.kpx-cols div { padding: 30px 28px 0; }
.kpx-cols div + div { border-left: 1px solid #dfe8f0; }
.kpx-cols b { display: block; font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; letter-spacing: -.02em; color: var(--ink); }
.kpx-cols span { display: block; max-width: 300px; margin: 10px auto 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.kpx .fine { margin-top: 28px; }
@media (max-width: 900px) { .kpx-cols { grid-template-columns: 1fr; border-top: 0; margin-top: 36px; } .kpx-cols div { padding: 20px 0; } .kpx-cols div + div { border-left: 0; border-top: 1px solid #dfe8f0; } }
.kpx-cols b { font-size: clamp(20px, 1.9vw, 26px); text-wrap: balance; }
/* v61 "Wat er doorgaat" als stroom naar het pakket (optie 2) */
.kpx-flow { display: grid; grid-template-columns: minmax(0, 1fr) 120px 300px; align-items: center; max-width: 1040px; margin: 56px auto 0; }
.kpx-src { display: grid; grid-template-rows: repeat(3, 84px); gap: 12px; text-align: left; }
.kpx-src > div { display: flex; align-items: center; gap: 16px; padding: 0 20px 0 14px; border-radius: 22px; background: #fff; border: 1px solid #e3edf5; box-shadow: 0 16px 34px -26px rgba(1,78,155,.45); }
.kpx-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: #e8f3fb; color: var(--blue); }
.kpx-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kpx-src b { display: block; font-size: 19px; font-weight: 400; letter-spacing: -.015em; color: var(--ink); }
.kpx-src span span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.kpx-wire { height: 276px; }
.kpx-wire svg { width: 100%; height: 100%; overflow: visible; }
.kpx-wire path { fill: none; stroke: #bcd8ec; stroke-width: 2; vector-effect: non-scaling-stroke; }
.kpx-wire circle { fill: #0083c6; }
.kpx-dst { padding: 30px; border-radius: 28px; background: linear-gradient(160deg, #0a2a52, #061a33); color: #fff; text-align: left; box-shadow: 0 30px 60px -34px rgba(1,30,60,.7); }
.kpx-dst small { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7cc4f0; }
.kpx-dst b { display: block; margin-top: 10px; font-size: 26px; font-weight: 400; letter-spacing: -.02em; line-height: 1.15; color: #fff; }
.kpx-lg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.kpx-lg span { display: grid; place-items: center; height: 40px; border-radius: 12px; background: rgba(255,255,255,.94); }
.kpx-lg img { max-width: 62px; max-height: 20px; width: auto; height: auto; }
@media (max-width: 900px) {
  .kpx-flow { grid-template-columns: 1fr; margin-top: 36px; }
  .kpx-src { grid-template-rows: none; }
  .kpx-src > div { padding: 14px 16px 14px 12px; }
  .kpx-wire { position: relative; height: 56px; }
  .kpx-wire svg { display: none; }
  .kpx-wire:before { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; margin-left: -1px; background: linear-gradient(180deg, #bcd8ec, #0083c6); }
}
@media (prefers-reduced-motion: reduce) { .kpx-wire circle { display: none; } }

/* v62 telefoons: menu en aanwezigheid vullen het hele scherm; Android-variant */
.phone.presence .screen img, .phone.menu .screen img { width: 100% !important; left: 0 !important; top: 0 !important; }
.phone.presence .ph-glass .screen, .phone.menu .ph-glass .screen { bottom: 0 !important; }
.phone.android { aspect-ratio: .47 !important; border-radius: 12% / 5.6% !important; background: linear-gradient(135deg, #3a3f45 0%, #23272c 30%, #4a5058 55%, #22262b 80%, #3b4047 100%) !important; }
.phone.android:before { inset: 1% 2.2%; border-radius: 10.6% / 5% ; background: #0b0c0e; }
.phone.android .ph-glass { inset: 2.2% 4.4%; border-radius: 8.4% / 3.9%; }
.phone.android .ph-glass .island { top: 1.6% !important; width: 4.6% !important; height: 2.2% !important; border-radius: 50% !important; box-shadow: inset 0 0 0 1px #1d2228; }
.phone.android .ph-glass .status { padding: 0 6% 0 7% !important; font-family: Roboto, Inter, Arial, sans-serif; font-weight: 500 !important; height: 5.6% !important; }
.phone.android .ph-glass .status .bat { width: 3.6cqw; height: 5.6cqw; border-radius: .9cqw; padding: .35cqw; display: inline-flex; align-items: flex-end; }
.phone.android .ph-glass .status .bat:after { right: auto; left: 30%; top: -1.1cqw; width: 40%; height: .7cqw; border-radius: 1px 1px 0 0; }
.phone.android .ph-glass .status .bat i { width: 100%; height: 76%; }
.phone.android .ph-glass .screen { top: 5.5% !important; }
.phone.android .ph-glass .home-indicator { width: 30% !important; bottom: 1% !important; opacity: .55; }
.phone.android > .ph-btn { left: auto; right: -1.4%; top: 19%; width: 1.6%; height: 20%; border-radius: 0 2px 2px 0; background: linear-gradient(180deg, #2e3338 0 34%, transparent 34% 44%, #2e3338 44% 100%); }
.phone.android:after { display: none; }

/* v62 App-pagina (optie 1): donkere kop met iPhone-foto, wit blad met drie telefoons en rollen */
.aph1 { position: relative; isolation: isolate; overflow: hidden; min-height: 640px; padding: 130px 0 150px; color: #fff; background: #061a33; }
.aph1-bg { position: absolute; top: 0; bottom: 0; right: 0; width: 62%; z-index: -2; background: url(assets/app-iphone-foto.webp) 50% 40% / cover; }
.aph1:after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #061a33 0%, #061a33 38%, rgba(6,26,51,.6) 52%, rgba(6,26,51,0) 75%); }
.aph1 .swp-wl { margin: 0; }
.aph1 .swp-k { color: #7cc4f0; }
.aph1-h { margin: 0; max-width: 600px; font-size: clamp(42px, 5.2vw, 72px); font-weight: 400; letter-spacing: -.035em; line-height: 1.02; color: #fff; }
.aph1-h span { color: rgba(255,255,255,.55); }
.aph1 .swp-sub { color: rgba(255,255,255,.75); }
.aph1 .store-buttons { margin-top: 28px; }
.aph1-fine { margin: 18px 0 0; max-width: 520px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.5); }
.aps { position: relative; z-index: 2; margin-top: -44px; padding: 104px 0; border-radius: 44px 44px 0 0; background: #fff; box-shadow: 0 -24px 50px -34px rgba(1,30,60,.5); }
.aps:after { content: ""; position: absolute; left: 50%; top: 14px; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: #d6e5f1; }
.aps-trio { display: flex; justify-content: center; align-items: flex-end; gap: 44px; margin-top: 56px; }
.aps-trio figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.aps-trio .phone { position: relative !important; width: 230px; margin: 0; transform: none; }
.aps-trio figure:nth-child(2) .phone { width: 262px; }
.aps-trio figcaption { font-size: 15px; color: var(--muted); }
.aps-roles { display: grid; grid-template-columns: 1fr 1fr; margin-top: 80px; border-top: 1px solid #dfe8f0; text-align: left; }
.aps-roles > div { padding: 34px 40px 0; }
.aps-roles > div + div { border-left: 1px solid #dfe8f0; }
.aps-roles h3 { margin: 0 0 16px; font-size: 28px; font-weight: 400; letter-spacing: -.02em; color: var(--ink); }
.aps-roles ul { margin: 0; padding: 0; }
.aps-roles li { list-style: none; padding: 14px 0; border-top: 1px solid #edf2f7; font-size: 16px; color: var(--muted); }
.aps-roles li:before { display: none; }
@media (max-width: 900px) {
  .aph1 { min-height: 0; padding: 110px 0 90px; }
  .aph1-bg { width: 100%; opacity: .35; }
  .aph1:after { background: linear-gradient(180deg, rgba(6,26,51,.6), rgba(6,26,51,.92)); }
  .aps { margin-top: -28px; padding: 64px 0; border-radius: 28px 28px 0 0; }
  .aps-trio { gap: 10px; }
  .aps-trio figure:nth-child(1), .aps-trio figure:nth-child(3) { display: none; }
  .aps-trio figure:nth-child(2) .phone { width: 220px; }
  .aps-roles { grid-template-columns: 1fr; margin-top: 48px; }
  .aps-roles > div { padding: 24px 0; }
  .aps-roles > div + div { border-left: 0; }
}

/* v63 App: rollen als glazen kaarten, downloadband als afscheiding voor de vragen */
.aps-roles2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 80px; text-align: left; }
.aps-roles2 > div { position: relative; overflow: hidden; padding: 34px; border-radius: 28px; background: linear-gradient(180deg, #f6fafd, #fff); border: 1px solid #e3edf5; box-shadow: 0 24px 50px -36px rgba(1,78,155,.45); }
.aps-roles2 > div:before { content: ""; position: absolute; left: 34px; right: 34px; top: 0; height: 2px; background: linear-gradient(90deg, #0083c6, #014e9b); }
.aps-roles2 .lab { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.aps-roles2 h3 { margin: 8px 0 0; font-size: 28px; font-weight: 400; letter-spacing: -.02em; color: var(--ink); }
.aps-roles2 ul { margin: 20px 0 0; padding: 0; list-style: none; }
.aps-roles2 li { display: flex; align-items: center; gap: 14px; padding: 12px 0; font-size: 16.5px; color: var(--ink); }
.aps-roles2 li:before { display: none; }
.aps-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #e8f3fb; color: var(--blue); }
.aps-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.aps { padding-bottom: 40px; }
.apdl { position: relative; z-index: 2; margin: 0 16px; padding: 40px 24px; border-radius: 40px; overflow: hidden; isolation: isolate; background: #061a33; color: #fff; text-align: center; }
.apdl:before { content: ""; position: absolute; inset: -60px; z-index: -2; background: url(assets/app-iphone-wide.webp) 60% 50% / cover; filter: blur(30px); transform: scale(1.08); }
.apdl:after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(4,16,34,.6); }
.apdl-in { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; }
.apdl b { font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; letter-spacing: -.02em; }
.apdl .store-buttons { margin: 0; }
.apdl + .kpq { padding-top: 80px; }
@media (max-width: 900px) {
  .aps-roles2 { grid-template-columns: 1fr; margin-top: 48px; }
  .aps-roles2 > div { padding: 26px 22px; }
  .apdl { margin: 0 10px; border-radius: 28px; }
}

/* v64 modulepagina's (optie 2): donkere kop zoals Software, wit blad met kenmerken + beeld, alle andere modules zichtbaar */
.mdp-hero .swp-h1 { font-size: clamp(40px, 5.2vw, 74px); }
.mdp-sheet .swp-heart { align-items: center; }
.mdp-note { margin: 24px 0 0; max-width: 460px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.mdp-vis .image-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.mdp-vis .shot-frame { border-radius: 18px; }
.mdp-laptop { margin: 0 -6% 0 0; filter: drop-shadow(0 34px 40px rgba(10,37,64,.28)); }
.mdp-laptop img { display: block; width: 100%; height: auto; }
.mdp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 52px; }
.mdp-grid .card { flex-direction: row !important; align-items: flex-start; gap: 16px !important; text-decoration: none; transition: box-shadow .3s, transform .3s; }
.mdp-grid .card:hover { box-shadow: 0 30px 60px -34px rgba(1,78,155,.6); }
.mdp-grid .card .icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #e8f3fb; color: var(--blue); border: 0; box-shadow: none; margin: 0; }
.mdp-grid .card .icon svg { width: 20px; height: 20px; }
.mdp-grid .card .mdp-app { background: none; overflow: hidden; border-radius: 12px; }
.mdp-grid .card .mdp-app img { width: 44px; height: 44px; }
.mdp-grid .card b { font-size: 19px; }
.mdp-grid .card small { font-size: 14px; line-height: 1.5; }
.mdp-allbtn { margin-top: 36px; }
@media (max-width: 1000px) { .mdp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .mdp-grid { grid-template-columns: 1fr; gap: 10px; } .mdp-grid .card { padding: 18px; } }
.mdp-hero .swp-h1, .mdp-sheet .swp-h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.mdp-sheet .swp-h2 { font-size: clamp(30px, 3.6vw, 52px); }
@media (max-width: 600px) { .mdp-hero .swp-h1 { font-size: 36px; } }

/* v65 woordmerk AstrowWeb naast het AvanTimes-logo */
.brand { gap: 14px; }
.brand .brand-div { width: 1px; height: 30px; background: #d6e2ec; flex: none; padding: 0 !important; }
.brand .brand-aw { display: flex !important; flex-direction: column; justify-content: center; gap: 3px; padding: 0 !important; border: 0 !important; margin: 0 !important; }
.brand .brand-aw img { display: block; height: 15px; width: auto; }
.brand .brand-aw small { display: block; margin: 0 !important; font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #6f859a; line-height: 1; }
.ft-logo { align-items: center; gap: 12px; }
.ft-logo i { width: 1px; height: 22px; background: #d6e2ec; }
footer.ft .ft-logo img.ft-aw { height: 12px; }
@media (max-width: 760px) {
  .brand { gap: 10px; }
  .brand .brand-div { height: 24px; }
  .brand .brand-aw img { height: 12px; }
  .brand .brand-aw small { font-size: 8px; }
}
/* v66: AstrowWeb vervangt het woord AvanTimes; het ronde AvanTimes-icoon blijft */
.brand.brand-aw2 { display: flex; align-items: center; gap: 10px; }
.brand.brand-aw2 .brand-icon { display: block; width: 38px; height: 38px; border-radius: 50%; flex: none; }
.brand.brand-aw2 .brand-aw img { height: 17px; }
.brand.brand-aw2 .brand-aw small { font-size: 9px; letter-spacing: .12em; }
footer.ft .ft-logo { gap: 9px; padding: 8px 16px 8px 8px; }
footer.ft .ft-logo img.ft-icon { height: 30px; width: 30px; border-radius: 50%; }
footer.ft .ft-logo img.ft-aw { height: 14px; }
@media (max-width: 760px) {
  .brand.brand-aw2 .brand-icon { width: 32px; height: 32px; }
  .brand.brand-aw2 .brand-aw img { height: 14px; }
  .brand.brand-aw2 .brand-aw small { font-size: 8px; }
}
/* v67: zonder regel "van AvanTimes" onder het woordmerk */
.brand.brand-aw2 .brand-aw img { height: 19px; }
@media (max-width: 760px) { .brand.brand-aw2 .brand-aw img { height: 16px; } }

/* v68 bronvermelding bij klantcitaten */
.bron { display: inline-block; margin-top: 14px; font-size: 12.5px; font-weight: 400 !important; line-height: 1.4; color: #8aa0b5 !important; text-decoration: none; border: 0 !important; padding: 0 !important; background: none !important; }
.bron:hover { color: var(--deep) !important; text-decoration: underline; }
.qp-foot .bron, .kpc .bron, .cs-v1 .bron { color: rgba(255,255,255,.6) !important; margin-top: 0; }
.qp-foot .bron:hover, .kpc .bron:hover, .cs-v1 .bron:hover { color: #fff !important; }
.kpc .bron { margin-top: 22px; align-self: flex-start; }
.cs-card .bron { margin-top: 18px; }
.cs-v1 .bron { color: #8aa0b5 !important; margin-top: 16px; }
.cs-v1 .bron:hover { color: var(--deep) !important; }
/* v68: drie kerngetallen in het fotoblok (Woerden eruit) */
.fx-grid { grid-template-columns: repeat(3, 1fr); }
.fx-i, .fx-i:nth-child(even) { padding: 22px 18px 18px 0; border-left: 0; border-top: 0 !important; }
.fx-i + .fx-i { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
@media (max-width: 900px) { .fx-i, .fx-i:nth-child(even) { padding: 18px 8px 14px 0; } .fx-i + .fx-i { padding-left: 12px; } .fx-i strong { font-size: 24px; } .fx-i span:not(.icon) { font-size: 12.5px; } }
/* v69: kerngetallen strak uitgelijnd: drie gelijke kolommen, cijfer + label op twee regels */
.fx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.fx-i, .fx-i:nth-child(even) { padding: 24px 16px 4px 0; }
.fx-i + .fx-i { padding-left: 24px; }
.fx-i > div { display: flex; flex-direction: column; gap: 8px; }
.fx-i strong { font-size: 44px; line-height: 1; margin: 0; font-variant-numeric: tabular-nums; }
.fx-i span:not(.icon) { font-size: 14px; line-height: 1.45; white-space: nowrap; }
@media (max-width: 1279px) and (min-width: 901px) { .fx-body { width: min(100%, 500px); } .fx-i strong { font-size: 38px; } .fx-i span:not(.icon) { font-size: 13px; } }
@media (max-width: 900px) {
  .fx-grid { grid-template-columns: 1fr; margin-top: 10px; }
  .fx-i, .fx-i:nth-child(even), .fx-i + .fx-i { padding: 14px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14) !important; }
  .fx-i:first-child { border-top: 0 !important; }
  .fx-i > div { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 14px; }
  .fx-i strong { font-size: 32px; }
  .fx-i span:not(.icon) { font-size: 13.5px; white-space: normal; }
  .fx-i span br { display: none; }
}
@media (max-width: 900px) { .fx-i > div { grid-template-columns: 112px 1fr; } .fx-i strong { font-size: 30px; } }
/* v70: klantenpagina: donkere kop met witte logo's, vier uitgelichte klanten, mozaïek met klantverhalen */
.kl-hero { padding-bottom: 150px !important; }
.kl-mq { position: relative; margin-top: 64px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.kl-mq-t { display: flex; align-items: center; width: max-content; animation: klMq 50s linear infinite; }
.kl-mq:hover .kl-mq-t { animation-play-state: paused; }
@keyframes klMq { to { transform: translateX(-50%); } }
.kl-wl { display: grid; place-items: center; height: 72px; padding: 0 34px; }
.kl-wl img { width: calc(var(--w) * 0.82); height: calc(var(--h) * 0.82); object-fit: contain; opacity: .82; transition: opacity .3s; }
.kl-wl:hover img { opacity: 1; }
.kl-head { text-align: center; }
.kl-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 36px 0 34px; }
.kl-tabs button { position: relative; overflow: hidden; height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid #d6e4ef; background: #fff; color: #3d566d; font: 600 14.5px Inter, sans-serif; cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.kl-tabs button:hover { border-color: #9cc3e0; }
.kl-tabs button.on { background: #eef6fc; border-color: #b9d6ec; color: var(--deep); }
.kl-tabs button i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.kl-feat.run .kl-tabs button.on i { animation: klRun 6s linear forwards; }
.kl-feat:hover .kl-tabs button.on i, .kl-feat:focus-within .kl-tabs button.on i { animation-play-state: paused; }
@keyframes klRun { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kl-pn { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 470px; border-radius: 36px; overflow: hidden; background: #f4f8fb; border: 1px solid #e6eef5; }
.kl-pn[hidden] { display: none; }
.kl-pn.on { animation: klIn .6s ease; }
@keyframes klIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.kl-pn > img { width: 100%; height: 100%; object-fit: cover; }
.kl-tx { display: flex; flex-direction: column; justify-content: center; padding: 48px; }
.kl-lg { align-self: flex-start; display: inline-grid; place-items: center; height: 56px; padding: 0 16px; border-radius: 14px; background: #fff; border: 1px solid #e6eef5; }
.kl-lg img { width: var(--w); height: var(--h); max-width: 140px; max-height: 34px; object-fit: contain; }
.kl-tx blockquote { margin: 26px 0 0; font-size: clamp(23px, 2.3vw, 31px); font-weight: 400; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.kl-who { margin-top: 16px; }
.kl-who b { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.kl-who span { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.kl-tx dl { display: grid; grid-template-columns: 1fr 1fr; margin: 26px 0 0; border-top: 1px solid #dfe8f0; }
.kl-tx dl div { padding: 16px 18px 0 0; }
.kl-tx dl div + div { padding-left: 18px; border-left: 1px solid #dfe8f0; }
.kl-tx dt { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8aa0b5; }
.kl-tx dd { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: #3d566d; }
.kl-tx .bron { margin-top: 18px; }
.kl-all { padding: 40px 0 120px; background: #fff; }
.kl-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); grid-auto-flow: dense; gap: 14px; margin-top: 48px; }
.kl-c { display: flex; flex-direction: column; padding: 24px; border-radius: 26px; background: #f4f8fb; border: 1px solid #e6eef5; }
.kl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kl-c .kl-lg { height: 48px; padding: 0 12px; }
.kl-c .kl-lg img { max-width: 110px; max-height: 28px; }
.kl-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: #e8f2fa; color: var(--deep); font-size: 12px; font-weight: 600; white-space: nowrap; }
.kl-c blockquote { margin: 18px 0 0; font-size: 17px; font-weight: 400; line-height: 1.42; color: var(--ink); }
.kl-c .kl-who { margin-top: 14px; }
.kl-c .kl-who b { font-size: 14.5px; }
.kl-c .kl-who span { font-size: 13px; }
.kl-c .bron { margin-top: auto; padding-top: 14px; }
.kl-tile { position: relative; grid-column: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; padding: 28px; border-radius: 26px; overflow: hidden; background: #0a2a52; color: #fff; isolation: isolate; }
.kl-tile > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.kl-tile:hover > img { transform: scale(1.03); }
.kl-tile:before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(4, 16, 34, .88), rgba(4, 16, 34, 0) 65%); }
.kl-chip { align-self: flex-start; max-width: 460px; margin: 0; padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; font-size: 18px; line-height: 1.35; }
.kl-chip small { display: block; margin-top: 8px; font-size: 13px; opacity: .75; }
.kl-tile .bron { margin-top: 10px; color: rgba(255, 255, 255, .6) !important; }
.kl-tile .bron:hover { color: #fff !important; }
.kl-you { grid-column: span 2; justify-content: center; padding: 32px; background: linear-gradient(160deg, #0a3a6e, #061a33); border: 0; color: #fff; }
.kl-you .kl-tag { align-self: flex-start; background: rgba(255, 255, 255, .12); color: #fff; }
.kl-you h3 { margin: 14px 0 0; font-size: 26px; font-weight: 400; letter-spacing: -.02em; line-height: 1.15; color: #fff; }
.kl-you p { margin: 10px 0 22px; color: rgba(255, 255, 255, .72); font-size: 15.5px; line-height: 1.5; }
.kl-you .btn { align-self: flex-start; }
@media (max-width: 1000px) { .kl-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .kl-hero { padding-bottom: 96px !important; }
  .kl-mq { margin-top: 40px; }
  .kl-wl { height: 60px; padding: 0 22px; }
  .kl-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin: 28px -20px 22px; padding: 0 20px; scrollbar-width: none; }
  .kl-tabs button { flex: none; }
  .kl-pn { grid-template-columns: 1fr; min-height: 0; border-radius: 28px; }
  .kl-pn > img { height: 230px; }
  .kl-tx { padding: 26px 22px; }
  .kl-tx dl { grid-template-columns: 1fr; }
  .kl-tx dl div + div { padding-left: 0; border-left: 0; border-top: 1px solid #dfe8f0; margin-top: 14px; }
  .kl-all { padding: 24px 0 72px; }
  .kl-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .kl-tile, .kl-you { grid-column: auto; min-height: 380px; }
  .kl-you { min-height: 0; }
}
/* v71: homepage-kop in de stijl van de site: donker, onscherpe telefoonfoto, dunne kop, vier klantlogo's die per groep wisselen */
.hhx { position: relative; isolation: isolate; overflow: hidden; padding: 120px 0 130px; color: #fff; background: #061a33; text-align: center; }
.hhx:before { content: ""; position: absolute; inset: -80px; z-index: -2; background: url(assets/app-iphone-wide.webp) 80% 50% / cover no-repeat; filter: blur(36px) saturate(1.2); transform: scale(1.1); opacity: .85; }
.hhx:after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #061a33 0%, rgba(6,26,51,0) 26%), radial-gradient(120% 90% at 50% 0%, rgba(4,16,34,.5), rgba(4,16,34,.86) 70%); }
.hhx-wl { display: block; width: auto; height: 42px; margin: 0 auto; }
.hhx-k { margin: 26px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #7cc4f0; }
.hhx-h1 { margin: 16px auto 0; max-width: none; font-size: clamp(46px, 6vw, 86px); font-weight: 400; letter-spacing: -.04em; line-height: 1.02; color: #fff; }
.hhx-g { color: rgba(255,255,255,.55); }
.hhx-rw { display: inline-grid; vertical-align: top; overflow: hidden; height: 1.08em; padding-bottom: .06em; }
.hhx-rw > span { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(100%); animation: hhxRw 12s infinite; }
.hhx-rw > span:nth-child(2) { animation-delay: 3s; }
.hhx-rw > span:nth-child(3) { animation-delay: 6s; }
.hhx-rw > span:nth-child(4) { animation-delay: 9s; }
.hhx-h1:hover .hhx-rw > span { animation-play-state: paused; }
@keyframes hhxRw { 0% { opacity: 0; transform: translateY(100%); } 4%, 23% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { .hhx-rw > span { animation: none; } .hhx-rw > span:first-child { opacity: 1; transform: none; } }
.hhx-sub { margin: 22px auto 0; max-width: 600px; font-size: 19px; line-height: 1.5; color: rgba(255,255,255,.78); }
.hhx-mail { display: flex; align-items: center; gap: 6px; width: min(560px, 100%); margin: 34px auto 0; padding: 6px 6px 6px 24px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.24); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: border-color .25s; }
.hhx-mail:focus-within { border-color: rgba(255,255,255,.5); }
.hhx-mail input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; color: #fff; font: 400 16.5px Inter, sans-serif; outline: 0; padding: 0; box-shadow: none; }
.hhx-mail input::placeholder { color: rgba(255,255,255,.62); }
.hhx-mail .btn { flex: none; min-height: 50px; padding: 0 26px; }
.hhx-mail.invalid { border-color: #ffb445; }
.hhx-mail.shake { animation: hhxShake .4s; }
@keyframes hhxShake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.hhx-note { min-height: 0; margin: 12px 0 0; font-size: 14px; color: rgba(255,255,255,.8); }
.hhx-note:empty { display: none; }
.hhx-br { margin-top: 30px; }
.hhx-br > span { display: block; font-size: 14px; color: rgba(255,255,255,.6); }
.hhx-br > div { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hhx-br a { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; transition: background .25s, border-color .25s; }
.hhx-br a:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
.hhx-logos { margin-top: 64px; }
.hhx-logos > p { margin: 0; font-size: 14px; color: rgba(255,255,255,.62); }
.hhx-logos strong { color: #fff; font-weight: 600; }
.hhx-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(820px, 100%); margin: 18px auto 0; }
.hhx-slot { display: grid; place-items: center; height: 76px; padding: 0 14px; }
.hhx-slot + .hhx-slot { border-left: 1px solid rgba(255,255,255,.1); }
.hhx-slot img { width: calc(var(--w) * .8); height: calc(var(--h) * .8); max-width: 100%; object-fit: contain; opacity: .85; transition: transform .65s cubic-bezier(.2,.7,.2,1), opacity .65s ease; }
.hhx-slot.up img { transform: translateY(-18px); opacity: 0; }
.hhx-slot.dn img { transform: translateY(18px); opacity: 0; transition: none; }
/* fotoblok eronder: overloop van de donkere kop */
.fx-card:before { background: linear-gradient(180deg, #061a33 0%, rgba(6,26,51,.7) 30%, rgba(6,26,51,0) 100%) !important; }
@media (max-width: 900px) {
  .hhx { padding: 96px 0 84px; }
  .hhx-h1 { font-size: clamp(40px, 11vw, 56px); }
  .hhx-sub { font-size: 17px; }
  .hhx-mail { padding-left: 18px; }
  .hhx-mail input { font-size: 15px; }
  .hhx-mail .btn { padding: 0 18px; font-size: 14.5px; }
  .hhx-logos { margin-top: 44px; }
  .hhx-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4px; }
  .hhx-slot { height: 64px; }
  .hhx-slot:nth-child(3) { border-left: 0; }
}
/* v73: uitsteeksel boven de footer met de slogan (alleen waar de footer op wit volgt) */
.ft-tab { position: absolute; left: 50%; top: -50px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; height: 51px; padding: 0 30px; border-radius: 26px 26px 0 0; background: #061a33; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; }
.ft-tab:before, .ft-tab:after { content: ""; position: absolute; bottom: 0; width: 26px; height: 26px; pointer-events: none; }
.ft-tab:before { left: -26px; background: radial-gradient(circle at 0 0, transparent 25.5px, #061a33 26px); }
.ft-tab:after { right: -26px; background: radial-gradient(circle at 100% 0, transparent 25.5px, #061a33 26px); }
.ft-tab em { font-style: normal; color: #7cc4f0; }
.ft-clock { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1.6px solid rgba(255,255,255,.55); }
.ft-clock:before { content: ""; position: absolute; left: 50%; top: 50%; width: 1.6px; height: 6px; margin-left: -.8px; background: rgba(255,255,255,.75); transform: translateY(-100%); border-radius: 1px; }
.ft-clock i { position: absolute; left: 50%; top: 50%; width: 1.6px; height: 8px; margin-left: -.8px; background: #7cc4f0; border-radius: 1px; transform-origin: 50% 0; transform: rotate(180deg); animation: ftTick 30s linear infinite; }
@keyframes ftTick { to { transform: rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .ft-clock i { animation: none; } }
#app:has(.endcta) .ft-tab { display: none; }
@media (max-width: 560px) { .ft-tab { top: -42px; height: 43px; padding: 0 20px; font-size: 14px; gap: 10px; } .ft-tab:before, .ft-tab:after { width: 20px; height: 20px; } .ft-tab:before { left: -20px; background: radial-gradient(circle at 0 0, transparent 19.5px, #061a33 20px); } .ft-tab:after { right: -20px; background: radial-gradient(circle at 100% 0, transparent 19.5px, #061a33 20px); } }
/* v74: contactpagina (ontwerp 3): eerst kiezen, dan het juiste formulier */
.ctp-hero { padding-bottom: 150px !important; }
.ctp-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(980px, 100%); margin: 52px auto 0; text-align: left; }
.ctp-pick button { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 26px; border-radius: 26px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; font: inherit; text-align: left; cursor: pointer; transition: background .25s, border-color .25s, transform .25s, color .25s; }
.ctp-pick button:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); transform: translateY(-3px); }
.ctp-pick button.on { background: #fff; border-color: #fff; color: var(--deep); }
.ctp-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 50%; background: rgba(255,255,255,.1); color: #7cc4f0; }
.ctp-pick button.on .ctp-ic { background: #eef6fc; color: var(--blue); }
.ctp-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ctp-pick b { font-size: 20px; font-weight: 400; letter-spacing: -.01em; }
.ctp-pick span:last-child { font-size: 14.5px; line-height: 1.45; opacity: .75; }
.ctp-sheet { scroll-margin-top: 90px; }
.ctp-two { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }
.ctp-two .contact-main { margin: 0; }
.ctp-two .form-box { position: relative; border-radius: 30px; box-shadow: 0 30px 60px -40px rgba(1,30,60,.45); }
.ctp-two .form-box:after { content: ""; position: absolute; right: 30px; bottom: 30px; width: 46px; height: 46px; background: url(assets/logo/avantimes-beeldmerk-kleur.svg) center / contain no-repeat; pointer-events: none; }
.ctp-side .swp-h2 { font-size: clamp(28px, 3vw, 40px); }
.ctp-rows { margin-top: 28px; border-top: 1px solid #e6eef5; }
.ctp-rows a { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid #e6eef5; color: var(--ink); text-decoration: none; }
.ctp-rows a:hover b { color: var(--blue); }
.ctp-rows .c-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #eef6fc; color: var(--blue); }
.ctp-rows .c-ic svg { width: 19px; height: 19px; }
.ctp-li { flex: none; display: grid; place-items: center; width: 44px; height: 44px; }
.ctp-li svg { width: 30px; height: 30px; display: block; }
.ctp-rows small { display: block; font-size: 12.5px; color: #8396a9; }
.ctp-rows b { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; transition: color .2s; }
@media (max-width: 900px) {
  .ctp-hero { padding-bottom: 90px !important; }
  .ctp-pick { grid-template-columns: 1fr; margin-top: 36px; }
  .ctp-pick button { padding: 20px; }
  .ctp-two { grid-template-columns: 1fr; gap: 36px; }
  .ctp-two .form-box:after { right: 22px; bottom: 24px; width: 40px; height: 40px; }
}
/* v74: slogan boven de footer als zwevende pil op de rand, rustiger en strakker */
.ft-tab { top: 0; transform: translate(-50%, -50%); height: auto; padding: 10px 22px 10px 12px; gap: 12px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 500; box-shadow: 0 18px 40px -18px rgba(4,16,34,.55), 0 0 0 1px rgba(10,37,64,.06); z-index: 3; }
.ft-tab:before, .ft-tab:after { display: none; }
.ft-tab em { color: var(--blue); }
.ft-clock { width: 34px; height: 34px; border: 0; background: linear-gradient(160deg, #0a3a6e, #061a33); }
.ft-clock:before { width: 2px; height: 8px; margin-left: -1px; background: rgba(255,255,255,.85); }
.ft-clock i { width: 2px; height: 10px; margin-left: -1px; background: #7cc4f0; }
footer.ft { padding-top: 72px; }
@media (max-width: 560px) { .ft-tab { top: 0; height: auto; padding: 8px 18px 8px 10px; font-size: 14px; } .ft-clock { width: 30px; height: 30px; } }

/* v74: AvanTimes-logopakket: footer met het witte liggende logo, zonder vlak (wit logo op donker) */
footer.ft .ft-logo.ft-logo-at { padding: 0; border-radius: 0; background: none; }
footer.ft .ft-logo.ft-logo-at img { height: 40px; width: auto; }
/* v75: Over AvanTimes (ontwerp 1): donkere kop met kerngetallen, verhaal in tekst met het beeldmerk, drie stappen, citaat, tegels */
.abt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(760px, 100%); margin: 56px auto 0; border-top: 1px solid rgba(255,255,255,.16); }
.abt-stats div { padding: 22px 16px 0; }
.abt-stats div + div { border-left: 1px solid rgba(255,255,255,.14); }
.abt-stats strong { display: block; font-size: 44px; font-weight: 300; letter-spacing: -.04em; line-height: 1; color: #fff; }
.abt-stats span { display: block; margin-top: 8px; font-size: 14px; color: rgba(255,255,255,.72); }
.abt-two { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
.abt-two .swp-h2 { font-size: clamp(32px, 3.4vw, 48px); }
.abt-mark { display: block; width: 64px; height: 64px; margin-top: 32px; }
.abt-two p { margin: 0 0 18px; font-size: 18px; line-height: 1.65; color: var(--muted); }
.abt-two .abt-lead { font-size: clamp(21px, 2vw, 26px); line-height: 1.45; letter-spacing: -.01em; color: var(--ink); }
.abt-two .abt-still { margin-top: 28px; padding-top: 24px; border-top: 1px solid #dfe8f0; color: var(--ink); }
.abt-how { padding: 104px 0; background: linear-gradient(180deg, #f1f8fd 0%, #e8f3fb 60%, #f6fafd 100%); }
.abt-head { text-align: center; }
.abt-head .swp-sub { margin-left: auto; margin-right: auto; }
.abt-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.abt-steps div { padding: 30px; border-radius: 28px; background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 24px 50px -36px rgba(1,78,155,.5); }
.abt-steps i { display: block; font-style: normal; font-size: 46px; font-weight: 300; letter-spacing: -.05em; line-height: 1; color: var(--deep); }
.abt-steps h3 { margin: 16px 0 0; font-size: 21px; font-weight: 400; letter-spacing: -.015em; color: var(--ink); }
.abt-steps p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.abt-q { padding-bottom: 104px; }
.abt-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.abt-tiles a { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: 24px; background: #f4f8fb; border: 1px solid #e6eef5; color: var(--ink); text-decoration: none; transition: background .25s, border-color .25s; }
.abt-tiles a:hover { background: #eef6fc; border-color: #c6dbeb; }
.abt-tiles .c-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--blue); border: 1px solid #e3edf5; }
.abt-tiles .c-ic svg { width: 20px; height: 20px; }
.abt-tiles b { display: block; font-size: 16.5px; font-weight: 600; }
.abt-tiles small { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
@media (max-width: 900px) {
  .abt-stats strong { font-size: 30px; } .abt-stats div { padding: 16px 8px 0; } .abt-stats span { font-size: 12.5px; }
  .abt-two, .abt-steps, .abt-tiles { grid-template-columns: 1fr; }
  .abt-two { gap: 20px; }
  .abt-mark { width: 52px; height: 52px; margin-top: 22px; }
  .abt-how, .abt-q { padding: 64px 0; }
}
/* v76: privacyverklaring */
.prv-hero { padding: 130px 0 120px !important; }
.prv-body { max-width: 760px; margin: 0 auto; }
.prv-body h2 { margin: 44px 0 12px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 400; letter-spacing: -.015em; color: var(--ink); }
.prv-body h2:first-child { margin-top: 0; }
.prv-body p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.7; color: var(--muted); }
.prv-body a { color: var(--blue); }
@media (max-width: 900px) { .prv-hero { padding: 96px 0 80px !important; } }

/* ===== v78 · branchepagina's: klantverhaal als kop ===== */
.brp-hero{position:relative;isolation:isolate;overflow:hidden;padding:150px 0 170px;color:#fff;background:#061a33}
.brp-hero:before{content:"";position:absolute;inset:0;z-index:-2;background:var(--bg) var(--pos,50% 50%)/cover no-repeat}
.brp-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,16,34,.95) 0%,rgba(4,16,34,.88) 42%,rgba(4,16,34,.6) 100%),linear-gradient(0deg,rgba(4,16,34,.6),rgba(4,16,34,0) 40%)}
.brp-hero .swp-wl.brp-wl{margin:0}
.brp-hero .swp-h1{font-size:clamp(38px,4.2vw,60px)}
.brp-hero .swp-sub{color:rgba(255,255,255,.82)}
.brp-g{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:end}
.brp-q{margin:0;padding:32px;border-radius:30px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.brp-q .lg{display:inline-grid;place-items:center;height:52px;padding:0 16px;border-radius:14px;background:#fff}
.brp-q .lg img{max-height:30px!important;max-width:200px!important;width:auto!important;height:auto!important}
.brp-q blockquote{margin:22px 0 0;font-size:22px;font-weight:300;line-height:1.42;letter-spacing:-.01em}
.brp-q figcaption{margin-top:20px}
.brp-q figcaption b{display:block;font-size:16px;font-weight:600}
.brp-q figcaption span{display:block;margin-top:2px;font-size:14px;color:rgba(255,255,255,.68)}
.brp-q .bron{display:inline-block;margin-top:14px;font-size:13px;text-decoration:none}
.brp-c{text-align:center}
.brp-k{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.brp-h2{margin:0 auto;max-width:none;font-size:clamp(34px,4.2vw,58px);font-weight:400;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.brp-h2 span{color:#8aa0b5}
.brp-h2.l{margin:0;font-size:clamp(30px,3.4vw,46px);line-height:1.08}
.brp-i{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#eef6fc;color:var(--blue)}
.brp-i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.brp-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:60px;text-align:left}
.brp-g3>div{display:flex;flex-direction:column;gap:8px;padding:30px;border-radius:28px;background:#f6fafd;border:1px solid #e9f1f8}
.brp-g3 .brp-i{background:#fff;margin-bottom:14px}
.brp-g3 small{font-size:14px;color:#8aa0b5;text-decoration:line-through;text-decoration-color:rgba(138,160,181,.5)}
.brp-g3 b{font-size:22px;font-weight:400;letter-spacing:-.015em;color:var(--ink)}
.brp-g3 span:not(.brp-i){font-size:15.5px;line-height:1.55;color:var(--muted)}
.brp-ph{padding:0 0 104px;background:#fff}
.brp-ph .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.brp-ph figure{position:relative;margin:0;border-radius:32px;overflow:hidden;min-height:420px;background:#0a2a52}
.brp-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.brp-ph figure.scr img{object-fit:contain;padding:30px 30px 110px;background:linear-gradient(170deg,#0a2a52,#061a33)}
.brp-ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 28px;color:#fff;background:linear-gradient(0deg,rgba(4,16,34,.85),rgba(4,16,34,0))}
.brp-ph figcaption b{display:block;font-size:21px;font-weight:400}
.brp-ph figcaption span{display:block;margin-top:4px;font-size:14.5px;color:rgba(255,255,255,.75)}
.brp-mg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:52px;text-align:left}
.brp-mg a{display:flex;flex-direction:column;gap:16px;padding:26px;border-radius:24px;background:#fff;border:1px solid #e6eef5;color:var(--ink);text-decoration:none;transition:border-color .25s}
.brp-mg a:hover{border-color:#a9cbe4}
.brp-mg b{display:block;font-size:19px;font-weight:400;letter-spacing:-.01em}
.brp-mg small{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.kpq.brp-q2{padding-top:104px}
.brp-o{padding:0 0 110px;background:#fff}
.brp-og{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.brp-og a{position:relative;display:flex;align-items:flex-end;min-height:260px;padding:24px;border-radius:28px;overflow:hidden;background:#0a2a52 center/cover;color:#fff;text-decoration:none;isolation:isolate}
.brp-og a:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(4,16,34,.82),rgba(4,16,34,.05) 65%);transition:background .3s}
.brp-og a:hover:before{background:linear-gradient(0deg,rgba(1,78,155,.85),rgba(4,16,34,.1) 70%)}
.brp-og b{display:block;font-size:24px;font-weight:400;letter-spacing:-.015em}
.brp-og small{display:block;margin-top:4px;font-size:14.5px;color:rgba(255,255,255,.78)}
@media (max-width:900px){
 .brp-hero{padding:96px 0 100px}
 .brp-g,.brp-ph .wrap{grid-template-columns:1fr}
 .brp-g{gap:36px}
 .brp-q{padding:24px}.brp-q blockquote{font-size:19px}
 .brp-g3,.brp-og{grid-template-columns:1fr}
 .brp-mg{grid-template-columns:1fr 1fr}
 .brp-ph{padding-bottom:64px}.brp-ph figure{min-height:300px}
 .kpq.brp-q2{padding-top:64px}.brp-o{padding-bottom:64px}
 .brp-og a{min-height:200px}
}
@media (max-width:560px){.brp-mg{grid-template-columns:1fr}}

/* ===== v79 · formulieren versturen via de eigen server ===== */
.form-box.sent{border-color:rgba(30,158,98,.35)}
.form-box.sent .form-status{margin-top:16px;padding:14px 16px;border-radius:14px;background:#e9f7ef;color:#16663f;font-weight:500;line-height:1.5}
.form-box button[type="submit"]:disabled{opacity:.6;cursor:progress}


/* ===== v80 · verlofpagina uitgebreid ===== */
.vl-k{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.vl-h2{margin:0;font-size:clamp(32px,3.8vw,52px);font-weight:400;letter-spacing:-.03em;line-height:1.06;color:var(--ink)}
.vl-h2 span{color:#8aa0b5}
.vl-i{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#eef6fc;color:var(--blue)}
.vl-i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* stappen */
.vl-steps{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid #e6eef5}
.vl-steps li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid #e6eef5}
.vl-steps i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(140deg,#014e9b,#0083c6);color:#fff;font-style:normal;font-weight:600}
.vl-steps b{display:block;font-size:20px;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.vl-steps li>span>span{display:block;margin-top:5px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.vl-note{margin:22px 0 0;font-size:15.5px;line-height:1.55;color:var(--muted)}
/* functies */
.vl-fg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:52px;text-align:left}
.vl-fg>div{display:flex;flex-direction:column;gap:8px;padding:28px;border-radius:24px;background:#fff;border:1px solid #e6eef5}
.vl-fg .vl-i{margin-bottom:10px}
.vl-fg b{font-size:20px;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.vl-fg>div>span:last-child{font-size:15px;line-height:1.55;color:var(--muted)}
/* zonder en met */
.vl-cmp{padding:104px 0 0;background:#fff}
.vl-ct{margin-top:40px;border-radius:28px;border:1px solid #e6eef5;overflow:hidden}
.vl-ct .hd,.vl-ct .rw{display:grid;grid-template-columns:.7fr 1fr 1fr}
.vl-ct .hd span{padding:14px 22px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8aa0b5;background:#f6fafd}
.vl-ct .hd span:last-child{color:var(--blue);background:#eef6fc}
.vl-ct .rw{border-top:1px solid #e6eef5}
.vl-ct .rw>*{padding:20px 22px;font-size:15.5px;line-height:1.5}
.vl-ct .rw b{font-weight:500;color:var(--ink);font-size:17px}
.vl-ct .was{color:#8aa0b5}
.vl-ct .nu{color:var(--ink);background:#fbfdff}
/* kennisblok */
.vl-kn{padding:104px 0;background:#fff}
.vl-kng{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.vl-p{margin:20px 0 0;font-size:17px;line-height:1.6;color:var(--muted)}
.vl-rules{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid #e6eef5}
.vl-rules li{padding:14px 0;border-bottom:1px solid #e6eef5;font-size:15.5px;line-height:1.5;color:var(--muted)}
.vl-rules b{color:var(--ink);font-weight:600;margin-right:6px}
.vl-src{margin:18px 0 0;font-size:13px;line-height:1.5;color:#8aa0b5}
.vl-src a{color:inherit}
.vl-tab{padding:30px;border-radius:30px;background:linear-gradient(170deg,#0a2a52,#061a33);color:#fff}
.vl-tab .hd{display:grid;grid-template-columns:110px 1fr;gap:16px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.14);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7cc4f0}
.vl-tab .rw{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.vl-tab .rw>span:first-child{font-size:17px;font-weight:300}
.vl-tab .rw>span:last-child{display:flex;align-items:center;gap:12px}
.vl-tab .rw i{display:block;height:10px;border-radius:10px;background:linear-gradient(90deg,#0083c6,#7cc4f0)}
.vl-tab .rw b{white-space:nowrap;font-size:16px;font-weight:600}
.vl-tab p{margin:18px 0 0;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.7)}
/* branches */
.vl-br{padding:0 0 104px;background:#fff}
.vl-bg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:40px}
.vl-bg a{display:flex;flex-direction:column;gap:8px;padding:26px;border-radius:24px;background:#f6fafd;border:1px solid #e9f1f8;text-decoration:none;transition:border-color .25s}
.vl-bg a:hover{border-color:#a9cbe4}
.vl-bg b{font-size:20px;font-weight:400;color:var(--ink)}
.vl-bg span{font-size:15px;line-height:1.5;color:var(--muted)}
/* koppelingen */
.vl-kp{padding:0 0 0;background:#fff}
.vl-kpg{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;padding:48px;border-radius:36px;background:linear-gradient(180deg,#f1f8fd,#e8f3fb)}
.vl-kpg h2{margin:18px 0 0;font-size:clamp(26px,2.6vw,36px);font-weight:400;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.vl-kpg p{margin:12px 0 0;font-size:16px;line-height:1.55;color:var(--muted)}
.vl-ln{display:inline-flex;margin-top:20px;padding:12px 20px;border-radius:999px;background:#fff;border:1px solid #d6e5f1;color:var(--deep);font-weight:600;text-decoration:none}
.vl-lg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.vl-lg span{display:grid;place-items:center;height:76px;border-radius:18px;background:#fff;border:1px solid #e6eef5}
.vl-lg img{max-width:110px;max-height:30px;width:auto;height:auto}
.vl-lg em{grid-column:1/-1;font-style:normal;font-size:14px;color:#8aa0b5;text-align:center}
.kpq.vl-q{padding-top:104px}
.vl-all{padding-top:0}
@media (max-width:900px){
 .vl-fg,.vl-bg{grid-template-columns:1fr}
 .vl-ct .hd{display:none}.vl-ct .rw{grid-template-columns:1fr}.vl-ct .rw>*{padding:8px 18px}.vl-ct .rw b{padding-top:18px}.vl-ct .nu{padding-bottom:18px}.vl-cmp{padding-top:64px}
 .vl-kng,.vl-kpg{grid-template-columns:1fr;gap:32px}
 .vl-kpg{padding:28px}
 .vl-kn{padding:64px 0}.vl-br{padding-bottom:64px}.kpq.vl-q{padding-top:64px}
 .vl-tab{padding:22px}.vl-tab .hd,.vl-tab .rw{grid-template-columns:80px 1fr}
 .vl-lg{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ===== v82 · prijzenpagina: prijsindicatie op maat ===== */
.pr-hero{position:relative;isolation:isolate;overflow:hidden;padding:130px 0 150px;color:#fff;background:#061a33}
.pr-hero:before{content:"";position:absolute;inset:-80px;z-index:-2;background:url(/assets/app-iphone-wide.webp) 80% 50%/cover no-repeat;filter:blur(36px) saturate(1.2);transform:scale(1.1);opacity:.85}
.pr-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 30% 0%,rgba(4,16,34,.5),rgba(4,16,34,.88) 70%)}
.pr-hero .swp-wl{margin:0}
.pr1-g{display:grid;grid-template-columns:1fr minmax(0,540px);gap:56px;align-items:start}
.pr1-g .swp-h1{font-size:clamp(38px,4.2vw,60px)}
.pr-k{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.pr-k2{margin:40px 0 14px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7cc4f0}
.pr-h2{margin:0;font-size:clamp(32px,3.8vw,52px);font-weight:400;letter-spacing:-.03em;line-height:1.06;color:var(--ink)}
.pr-h2 span{color:#8aa0b5}
.pr-p{margin:18px 0 0;max-width:460px;font-size:17px;line-height:1.55;color:var(--muted)}
.pr-i{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#eef6fc;color:var(--blue)}
.pr-i svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pr-fac{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pr-fac>div{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.pr-fac .pr-i{width:38px;height:38px;background:rgba(255,255,255,.1);color:#7cc4f0}
.pr-fac b{display:block;font-size:16px;font-weight:500;color:#fff}
.pr-fac small{display:block;margin-top:3px;font-size:14px;line-height:1.45;color:rgba(255,255,255,.7)}
/* formulier */
.pr-form{padding:34px;border-radius:30px;background:rgba(255,255,255,.97);border:1px solid #e6eef5;box-shadow:0 30px 60px -40px rgba(1,30,60,.6);color:var(--ink);text-align:left}
.pr-form h2{margin:0;font-size:24px;font-weight:400;letter-spacing:-.015em;color:var(--ink)}
.pr-form>p{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.pr-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.pr-grid>label,.pr-grid fieldset{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;border:0;min-width:0}
.pr-grid .full{grid-column:1/-1}
.pr-grid>label>span,.pr-grid legend{padding:0;font-size:13.5px;font-weight:600;color:var(--ink)}
.pr-grid legend{margin-bottom:8px}
.pr-grid legend small{margin-left:6px;font-weight:400;color:#8aa0b5}
.pr-grid input:not([type=checkbox]),.pr-grid select,.pr-grid textarea{width:100%;min-height:48px;padding:0 14px;border-radius:14px;border:1px solid #d9e5ef;background:#fbfdff;font:inherit;font-size:15px;color:var(--ink)}
.pr-grid textarea{min-height:90px;padding:12px 14px;resize:vertical}
.pr-grid input:focus,.pr-grid select:focus,.pr-grid textarea:focus{outline:2px solid rgba(0,131,198,.35);border-color:var(--blue)}
/* modules: gelijk uitgelijnd in twee kolommen */
.pr-mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pr-mod{position:relative;display:flex;align-items:center;gap:10px;min-height:46px;padding:10px 12px;border-radius:14px;border:1px solid #d9e5ef;background:#fbfdff;cursor:pointer;transition:border-color .2s,background .2s}
.pr-mod:hover{border-color:#a9cbe4}
.pr-mod input{position:absolute;opacity:0;pointer-events:none}
.pr-mod i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;border:1.5px solid #b7cde0;background:#fff;transition:background .2s,border-color .2s}
.pr-mod i:after{content:"";width:9px;height:5px;margin-top:-2px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);opacity:0}
.pr-mod span{font-size:14.5px;line-height:1.3;color:#3d566d}
.pr-mod:has(input:checked){border-color:#014e9b;background:#eef6fc}
.pr-mod input:checked+i{background:#014e9b;border-color:#014e9b}
.pr-mod input:checked+i:after{opacity:1}
.pr-mod input:checked~span{color:var(--ink);font-weight:500}
.pr-mod input:focus-visible+i{outline:2px solid rgba(0,131,198,.5);outline-offset:2px}
.pr-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin-top:22px;padding:0 26px;border:0;border-radius:999px;background:linear-gradient(140deg,#014e9b,#0083c6);color:#fff;font:inherit;font-weight:600;font-size:15.5px;cursor:pointer}
.pr-btn:disabled{opacity:.6;cursor:progress}
.pr-st{margin:14px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.pr-st:empty{display:none}
.pr-form.sent{border-color:rgba(30,158,98,.35)}
.pr-form.sent .pr-st{padding:14px 16px;border-radius:14px;background:#e9f7ef;color:#16663f;font-weight:500}
/* wat je krijgt */
.pr-inc{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.pr-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pr-list li{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:20px;background:#f6fafd;border:1px solid #e9f1f8;font-size:16px;color:var(--ink)}
.pr-list .pr-i{width:34px;height:34px;background:#fff;color:#1e9e62}
.kpq.pr-q{padding-top:104px}
@media (max-width:1100px){.pr1-g{grid-template-columns:1fr;gap:40px}.pr-form{max-width:640px}}
@media (max-width:900px){
 .pr-hero{padding:96px 0 90px}
 .pr-inc{grid-template-columns:1fr;gap:32px}
 .pr-grid,.pr-fac{grid-template-columns:1fr}
 .pr-form{padding:22px}
 .kpq.pr-q{padding-top:64px}
}
@media (max-width:420px){.pr-mods{grid-template-columns:1fr}}
.pr-hero .swp-k{color:#7cc4f0}
.pr-hero .swp-sub{color:rgba(255,255,255,.78)}
.pr1-g{grid-template-columns:1fr minmax(0,500px)}
.pr1-g .swp-h1{font-size:clamp(36px,3.8vw,54px)}
/* menu met zes onderdelen: niet laten afbreken op kleinere schermen */
.nav-links a,.nav-cta,.nav-support{white-space:nowrap}
@media (max-width:1200px) and (min-width:901px){.nav-support{display:none!important}}
@media (max-width:960px){.pr1-g{grid-template-columns:1fr;gap:40px}}

/* v83 · astrowweb.nl als gebruikerssite */
.aw-hero .swp-sub{max-width:640px}
.aw-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:min(1080px,100%);margin:48px auto 0;text-align:left}
.aw-tiles a{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:24px;border-radius:24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;text-decoration:none;transition:background .25s,border-color .25s,transform .25s}
.aw-tiles a:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);transform:translateY(-3px)}
.aw-tiles .vl-i{background:rgba(255,255,255,.12);color:#7cc4f0;margin-bottom:10px}
.aw-tiles .vl-i svg,.aw-help-rows .vl-i svg,.vl-fg .vl-i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.aw-tiles b{font-size:20px;font-weight:400;letter-spacing:-.01em}
.aw-tiles span:last-child{font-size:14.5px;line-height:1.45;opacity:.78}
.aw-acts{margin-top:28px;gap:12px;flex-wrap:wrap}
.aw-help{padding:clamp(64px,8vw,110px) 0;background:#f4f8fb}
.aw-help-g{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.aw-help-rows{border-top:1px solid #e1eaf2}
.aw-help-rows a{display:flex;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid #e1eaf2;color:var(--ink);text-decoration:none}
.aw-help-rows a:hover b{color:var(--blue)}
.aw-help-rows small{display:block;font-size:12.5px;color:#8396a9}
.aw-help-rows b{display:block;margin-top:2px;font-size:16px;font-weight:600;transition:color .2s}
.aw-fine{grid-column:1/-1;margin:6px 0 0;font-size:13.5px;line-height:1.5;color:#8396a9}
.aw-fine.c{text-align:center;margin-top:28px}
.aw-org{padding:0 0 clamp(56px,7vw,96px)}
.aw-org-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 32px;border-radius:24px;background:#eef6fc}
.aw-org-in b{display:block;font-size:19px;font-weight:600;color:var(--ink)}
.aw-org-in span{display:block;margin-top:4px;color:var(--muted)}
.footer-links .ft-adr{display:inline-flex;align-items:center;min-height:44px;font-size:inherit;color:inherit;opacity:.85}
@media (max-width:960px){.aw-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.aw-help-g{grid-template-columns:1fr}.aw-org-in{flex-direction:column;align-items:flex-start}}
@media (max-width:560px){.aw-tiles{grid-template-columns:1fr;margin-top:32px}.aw-tiles a{padding:20px}}