:root {
  --indigo: #5048E5;
  --indigo-deep: #3A30C4;
  --indigo-ink: #1E1A52;
  --coral: #FF6B5C;
  --coral-soft: #FFE6E1;
  --coral-ink: #C2402F;
  --gold: #FFC247;
  --gold-soft: #FFF1D2;
  --gold-ink: #9A6B00;
  --mint: #16C7A6;
  --mint-soft: #D4F6EE;
  --mint-ink: #0A7C66;
  --lilac: #ECEAFF;
  --paper: #FBFAFF;
  --ink: #23204A;
  --muted: #6E6A9C;
  --line: #E7E4F7;
  --white: #FFFFFF;
  --font-head: "Montserrat-Bold", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .6, .2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  /* margin: 0; */
  /* background: var(--paper); */
  /* background:yellow!important;
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; */
}

::selection {
  background: var(--indigo);
  color: #fff;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  /* font-family: var(--font-head); */
  /* color: var(--indigo-ink); */
  margin: 0;
}

section,
.hero,
.cta {
  scroll-margin-top: 86px;
}

.kicker {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--indigo);
  background: rgba(80, 72, 229, .08)!important;
}

/* Buttons */
.btn-brand,
.btn-outline-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 600;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: .16s var(--ease);
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(35, 32, 74, .05);
}

.btn-brand svg,
.btn-outline-brand svg {
  transition: transform .18s var(--ease);
}

.btn-brand:hover svg,
.btn-outline-brand:hover svg {
  transform: translateX(3px);
}

.btn-brand {
  background: var(--indigo);
  color: #fff !important;
  padding: 14px 22px;
  font-size: 15px;
  box-shadow: 0 8px 22px rgba(80, 72, 229, .3);
}

.btn-brand:hover,
.btn-brand:focus {
  background: var(--indigo-deep);
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(80, 72, 229, .36);
}

.btn-brand.btn-sm {
  padding: 11px 17px;
  font-size: 14px;
}

.btn-outline-brand {
  background: rgba(251, 250, 255, .85);
  backdrop-filter: blur(6px);
  color: #392fb3;

  padding: 14px 22px;
  font-size: 15px;
  box-shadow: inset 0 0 0 1.6px var(--indigo);
}

.btn-outline-brand:hover,
.btn-outline-brand:focus {
  background: var(--lilac);
  color: var(--indigo-ink) !important;
}

/* Navbar */
.site-nav {
  background: rgba(251, 250, 255, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  padding: .65rem 0;
  transition: border-color .2s, box-shadow .2s;
  z-index: 1030;
}

.site-nav.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px rgba(35, 32, 74, .05);
}

.site-nav .nav-link {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink) !important;
  opacity: .82;
  padding: .5rem .35rem !important;
}

.site-nav .nav-link:hover {
  opacity: 1;
  color: var(--indigo) !important;
}

.logo-lockup {
  display: inline-flex;
  align-items: center;
}

.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
}

.lang a {
  padding: 6px 9px;
  border-radius: 8px;
  color: var(--muted);
  transition: .14s;
}

.lang a:hover {
  color: var(--indigo);
}

.lang a.on {
  background: var(--indigo);
  color: #fff;
}

.custom-toggler {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.custom-toggler span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--indigo-ink);
  border-radius: 2px;
  transition: .2s;
}

.custom-toggler:focus {
  box-shadow: 0 0 0 3px rgba(80, 72, 229, .16);
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 22px 50px rgba(35, 32, 74, .18);
    padding: 14px;
    margin-top: 10px;
  }

  .site-nav .nav-link {
    opacity: 1;
    padding: 12px !important;
    border-radius: 10px;
  }

  .site-nav .nav-link:hover {
    background: var(--lilac);
  }
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 96px 0 110px;
  isolation: isolate;
  min-height: 78vh;
  display: flex;
  align-items: center;
}

.hero-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(56% 44% at 50% 44%, rgba(251, 250, 255, .97), rgba(251, 250, 255, 0) 72%),
    linear-gradient(180deg, var(--lilac) 0%, transparent 50%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
}

.hero-title {
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.08;
  font-size: clamp(2rem, 5vw, 3.75rem);
  margin: 0 auto 24px;
  max-width: 900px;
  text-wrap: balance;
  text-shadow: 0 0 28px #FBFAFF, 0 0 14px #FBFAFF;
}

.hl {
  display: inline;
  padding: 0 .14em;
  border-radius: 5px;
  color: var(--indigo-ink);
  background-image: linear-gradient(transparent 54%, var(--mark, #C9C4FF) 54%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-image .3s var(--ease);
}

.hero-sub {
  display: inline-block;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 62ch;
  margin: 0 0 34px;
  font-weight: 500;
  padding: 8px 30px;
  text-shadow: 0 0 8px #FBFAFF;
  background: radial-gradient(ellipse 76% 132% at 50% 50%, rgba(251, 250, 255, .96) 0%, rgba(251, 250, 255, .92) 46%, rgba(251, 250, 255, 0) 100%);
}

.cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 38px;
}

.trust {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.trust .chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px 9px 12px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(35, 32, 74, .05);
}

/* Sections */
.sec {
  padding: 96px 0;
  position: relative;
}

.sec-head {
  max-width: 90%;
  margin: 0 auto 56px;
}

.sec-head h2 {
  font-weight: 800;
  font-size: clamp(1.85rem, 3.5vw, 2.625rem);
  letter-spacing: -.02em;
  margin: 14px 0 0;
  text-wrap: balance;
}

.sec-head p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  margin: 16px 0 0;
}

.sec-tint {
  background: linear-gradient(180deg, var(--lilac), var(--paper));
  overflow: hidden;
  isolation: isolate;
}

.sec-prijzen {
  background: linear-gradient(180deg, var(--lilac), var(--white));
}

.sec-pattern {
  position: absolute;
  left: 0;
  right: 0;
  top: -20%;
  height: 140%;
  z-index: -1;
  pointer-events: none;
}

.sec-pattern.dots {
  background-image: radial-gradient(rgba(80, 72, 229, .09) 1.3px, transparent 1.3px);
  background-size: 26px 26px;
}

.sec-pattern.rings {
  background-image: repeating-radial-gradient(
    circle at 8% 4%,
    transparent 0 76px,
    rgba(80, 72, 229, .055) 76px 78px
  );
}

/* Philosophy */
.philo-lead {
  max-width: 840px;
  margin: 0 auto 64px;
}

.philo-lead .big {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.5vw, 1.875rem);
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--indigo-ink);
  margin: 0;
  text-wrap: balance;
}

.philo-lead .big .q {
  color: var(--coral-ink);
}

.philo-lead .sub {
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--muted);
  margin: 20px auto 0;
  max-width: 62ch;
}

.pnode {
  padding: 24px 8px 6px;
  border-top: 3px solid var(--line);
  height: 100%;
}

.pnode .idx {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .14em;
}

.pnode h3 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 27px;
  letter-spacing: -.012em;
  margin: 7px 0 13px;
}

.pnode p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--muted);
}

.pn-indigo {
  border-top-color: var(--indigo);
}

.pn-indigo .idx,
.pn-indigo h3 {
  color: var(--indigo);
}

.pn-mint {
  border-top-color: var(--mint);
}

.pn-mint .idx,
.pn-mint h3 {
  color: var(--mint-ink);
}

.pn-gold {
  border-top-color: var(--gold);
}

.pn-gold .idx,
.pn-gold h3 {
  color: var(--gold-ink);
}

.punch {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.5vw, 1.875rem);
  line-height: 1.34;
  letter-spacing: -.015em;
  color: var(--indigo-ink);
  margin: 60px 0 0;
  text-wrap: balance;
}

.punch mark {
  background: linear-gradient(transparent 56%, #C2F1E3 56%);
  color: inherit;
  padding: 0 .1em;
}

/* Pricing */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0pxl;
  padding: 30px 26px;
  box-shadow: 0 8px 26px rgba(35, 32, 74, .05);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  margin-bottom:100px;
}

.plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(35, 32, 74, .1);
}

.plan.feat {
  border: 1.6px solid var(--indigo);
  box-shadow: 0 18px 44px rgba(80, 72, 229, .18);
}

.plan .sla {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--indigo);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 15px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(80, 72, 229, .32);
}

.plan .website {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background:#66D962;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 15px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(80, 72, 229, .32);
}


.plan h3 {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.01em;
  margin: 25px;
  text-align:center;
}

.plan .lead {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 20px;
  min-height: 66px;
}

.plan .price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0 0 4px;
}

.plan .price .from {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
}

.plan .price .amt {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -.02em;
  color: #392fb3;
  line-height: 1;
}

.plan .price .amt.sm {
  font-size: 24px;
}

.plan .price .per {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
}

.plan .foot {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 22px;
}

.plan > ul {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.plan > ul > li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.4;
  color:#392fb3;
  flex-wrap: wrap;
}



.plan > ul > li > .sublist {
  /* display: block; */
  flex: 0 0 100%;
  margin: 0 0 0 26px;
  padding: 0 0 0 18px;
  list-style: circle;
}



.plan > ul > li > .sublist > li,
.plan > ul > li > .sublist > li > ul.sub-sublist > li,
.plan > ul > li > .sub-sublist > li, 
.plan > ul > li > .sub-sublist > li button,
.plan > ul > li > .sub-sublist > li ul.sub-sublist > li
{
  display: list-item!important;
  font-size: 14.5px!important;
  line-height: 1.8!important;
  color:#392fb3!important;
}

.plan > ul > li > .sublist > li > svg,
.plan > ul > li > .sublist > li > ul.sub-sublist > li > svg,
.plan > ul li ul.sub-sublist > li > svg {
  display: none;
}

.plan > ul > li > button.btn.btn-link,
.plan > ul > li > .sublist > li button.btn.btn-link {
  font-size: 14.5px!important;
  line-height: 1.4;
  color:#392fb3;
  text-decoration: underline!important;
}




.plan > ul > li > button.btn.btn-link:hover,
.plan > ul > li > button.btn.btn-link:focus,
.plan > ul > li > .sublist > li button.btn.btn-link:hover,
.plan > ul > li > .sublist > li button.btn.btn-link:focus {
  font-size: 14.5px!important;
  line-height: 1.4;
  text-decoration: underline!important;
}

.plan li svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--mint-ink);
}

.plan .plan-cta .btn-brand,
.plan .plan-cta .btn-outline-brand {
  width: 100%;
  justify-content: center;
}

.price-note {
  max-width: 760px;
  margin: 34px auto 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* Solutions */
.sol {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--scb, var(--indigo));
  border-radius: 18px;
  padding: 30px 28px;
  box-shadow: 0 8px 26px rgba(35, 32, 74, .05);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

.sol:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(35, 32, 74, .1);
}

.sol .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin-bottom: 18px;
  color: var(--sc, var(--indigo));
  background: color-mix(in srgb, var(--scb, var(--indigo)) 12%, transparent);
}

.sol .ic svg {
  width: 24px;
  height: 24px;
}

.sol h3 {
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}

.sol > p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 22px;
}

.sol-list {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.sol-list .lbl {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sc, var(--indigo));
  margin-bottom: 13px;
}

.sol-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sol-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.sol-list li svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--sc, var(--indigo));
}

.sol-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--sc, var(--indigo));
}

.sol-more svg {
  transition: transform .18s var(--ease);
}

.sol-more:hover svg {
  transform: translateX(3px);
}

.sol-indigo {
  --sc: var(--indigo);
  --scb: var(--indigo);
}

.sol-gold {
  --sc: var(--gold-ink);
  --scb: var(--gold);
}

.sol-mint {
  --sc: var(--mint-ink);
  --scb: var(--mint);
}

.sol-coral {
  --sc: var(--coral-ink);
  --scb: var(--coral);
}

/* Steps / approach */
.steps {
  max-width: 940px;
  margin: 0 auto;
  position: relative;
}

.steps::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 2px;
  margin-left: -1px;
  background: var(--line);
}

.step {
  position: relative;
  margin-bottom: 36px;
}

.step:last-child {
  margin-bottom: 0;
}

.step .num {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.6px var(--stepc);
}

.step .num span {
  background: var(--paper);
  padding: 6px 9px;
  display: inline-block;
}

.step .body {
  width: calc(50% - 54px);
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--stepc);
  border-radius: 16px;
  padding: 24px 26px;
  box-shadow: 0 8px 26px rgba(35, 32, 74, .05);
}

.step .body::before {
  content: "";
  position: absolute;
  top: 28px;
  width: 32px;
  height: 2px;
  background: var(--line);
}

.step:nth-child(odd) .body {
  margin-right: auto;
}

.step:nth-child(odd) .body::before {
  right: -32px;
}

.step:nth-child(even) .body {
  margin-left: auto;
}

.step:nth-child(even) .body::before {
  left: -32px;
}

.step h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px;
}

.step p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}

.step .body > * + * {
  margin-top: 10px;
}

.step .ask {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--stepc);
}

.step .em {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}

.step .seq {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.step .seq li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.step .seq li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--stepc);
}

.step {
  --stepc: var(--indigo);
}

.step:nth-child(2) {
  --stepc: var(--coral);
}

.step:nth-child(3) {
  --stepc: var(--mint);
}

.step:nth-child(4) {
  --stepc: var(--gold);
}

/* Outcomes */
.outcomes {
  max-width: 1040px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(35, 32, 74, .08);
  overflow: hidden;
}

.oc {
  padding: 34px 26px;
  height: 100%;
}

@media (min-width: 1200px) {
  .oc {
    border-left: 1px solid var(--line);
  }

  .outcomes > :first-child .oc {
    border-left: 0;
  }



}

.oc .big {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.015em;
  line-height: 1.24;
  margin: 0 0 11px;
}

.outcomes > :nth-child(1) .big {
  color: var(--indigo);
}

.outcomes > :nth-child(2) .big {
  color: var(--gold-ink);
}

.outcomes > :nth-child(3) .big {
  color: var(--mint-ink);
}

.outcomes > :nth-child(4) .big {
  color: var(--coral-ink);
}

.oc p:last-child {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* FAQ */
.faq-accordion {
  max-width: 760px;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(35, 32, 74, .04);
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-item .accordion-button {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
  color: var(--indigo-ink);
  background: #fff;
  box-shadow: none !important;
  padding: 18px 22px;
}

.faq-item .accordion-button:not(.collapsed) {
  color: var(--indigo);
  background: #fff;
}

.faq-item .accordion-button::after {
  background-image: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--lilac);
  content: "+";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--indigo);
  transform: none;
  transition: transform .22s var(--ease);
}

.faq-item .accordion-button:not(.collapsed)::after {
  content: "–";
  transform: none;
}

.faq-item .accordion-body {
  color: var(--muted);
  line-height: 1.65;
  font-size: 15.5px;
  padding: 0 22px 20px;
}

/* Contact CTA */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--indigo-ink);
  color: #fff;
  text-align: center;
  padding: 96px 0 104px;
  isolation: isolate;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .7;
  background: linear-gradient(180deg, rgba(80, 72, 229, .4), transparent 55%);
}

.contact-inner {
  max-width: 760px;
}

.contact-inner .kicker {
  color: #fff;
  opacity: .78;
}

.cta h2 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(1.85rem, 3.5vw, 2.625rem);
  letter-spacing: -.02em;
  max-width: 20ch;
  margin: 14px auto 16px;
  text-wrap: balance;
}

.contact-sub {
  font-size: 18px;
  color: rgba(255, 255, 255, .74);
  max-width: 54ch;
  margin: 0 auto 40px;
  line-height: 1.55;
}

.form-card {
  background: #fff;
  border-radius: 18px;
  padding: 34px;
  text-align: left;
  box-shadow: 0 30px 80px rgba(10, 8, 40, .4);
  color: var(--ink);
}

.f-group {
  margin-bottom: 20px;
}

.f-label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.f-label .opt {
  text-transform: none;
  letter-spacing: 0;
  opacity: .7;
  font-weight: 500;
}

.f-label .req {
  color: var(--coral);
  font-weight: 700;
  margin-left: 2px;
}

.f-input,
.f-area,
.f-select {
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: none !important;
}

.f-area {
  resize: vertical;
  min-height: 128px;
  line-height: 1.5;
}

.f-input:focus,
.f-area:focus,
.f-select:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(80, 72, 229, .16) !important;
  background: var(--paper);
}

.was-validated .f-input:invalid,
.was-validated .f-area:invalid {
  border-color: var(--coral);
}

.svc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.svc {
  cursor: pointer;
  margin: 0;
}

.svc input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.svc span {
  display: inline-block;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  transition: .14s var(--ease);
}

.svc span:hover {
  border-color: var(--indigo);
}

.svc input:checked + span {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}

.form-foot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}

.form-foot .fine {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.flash {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 20px;
}

.flash-ok {
  background: rgba(22, 199, 166, .14);
  border: 1px solid rgba(22, 199, 166, .5);
  color: var(--mint-ink);
  font-weight: 600;
}

.flash-err {
  background: rgba(255, 107, 92, .12);
  border: 1px solid rgba(255, 107, 92, .5);
  color: var(--coral-ink);
  font-weight: 600;
}

/* Footer */
.ft {
  padding: 56px 0 40px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.ft-tag {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 30ch;
}

.ft-h {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.ft a {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  opacity: .82;
  margin-bottom: 10px;
  transition: .14s;
}

.ft a:hover {
  opacity: 1;
  color: var(--indigo);
}

.ft-bottom {
  margin: 36px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 991.98px) {
  .hero {
    padding: 70px 0 80px;
    min-height: 0;
  }

  .hero-sub {
    font-size: 17px;
  }

  .sec,
  .cta {
    padding: 68px 0;
  }

  .cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-row .btn-brand,
  .cta-row .btn-outline-brand {
    width: 100%;
    justify-content: center;
  }

  .plan .lead {
    min-height: 0;
  }

  .steps {
    max-width: 560px;
  }

  .steps::before {
    left: 22px;
    margin-left: 0;
  }

  .step {
    margin-bottom: 20px;
  }

  .step .num {
    left: 22px;
    top: 20px;
    font-size: 27px;
  }

  .step .num span {
    padding: 4px 7px;
  }

  .step:nth-child(odd) .body,
  .step:nth-child(even) .body {
    width: auto;
    margin: 0 0 0 54px;
  }

  .step .body::before {
    display: none;
  }

  .form-card {
    padding: 24px;
  }

  .outcomes .oc {
    border-top: 1px solid var(--line);
  }

  .outcomes > :first-child .oc {
    border-top: 0;
  }
}

@media (max-width: 575.98px) {
  .hero-title {
    font-size: 1.95rem;
  }

  .trust .chip {
    font-size: 11.5px;
    padding: 6px 11px 6px 9px;
  }
}

/* Reduced motion: keep elements visible even if GSAP is skipped */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .plan:hover,
  .sol:hover {
    transform: none;
  }
}







.only-small-viewports {
    display: block;
  }


.only-wide-viewports {
  display: none;
}



@media (min-width: 1801px) {

  .only-small-viewports {
    display:none;
  }

  .only-wide-viewports {
    display: block;
  }

  .plan {
    margin-bottom:0px;
  }

}