@import "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap";

:root {
  --ink: #0a0a0c;
  --muted: #696970;
  --blue: #2864ff;
  --violet: #7137ff;
  --coral: #ff725c;
  --paper: #f4f4f1;
  --line: #deded9;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  margin: 0;
  font-family: DM Sans, sans-serif;
  overflow-x: clip;
}

.noise {
  pointer-events: none;
  opacity: .035;
  z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  position: fixed;
  inset: 0;
}

.shell {
  width: min(1200px, 100% - 48px);
  margin: auto;
}

.nav {
  z-index: 10;
  justify-content: space-between;
  align-items: center;
  height: 82px;
  display: flex;
  position: relative;
}

.logo {
  color: var(--ink);
  letter-spacing: -1.2px;
  font: 600 23px Manrope;
  text-decoration: none;
}

.logo span:first-child {
  color: var(--blue);
}

.nav nav {
  gap: 34px;
  display: flex;
}

.nav nav a, .nav-cta {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.nav nav a {
  transition: all .2s;
}

.nav nav a:hover {
  color: var(--blue);
}

.nav-cta {
  background: var(--ink);
  color: #fff;
  border-radius: 100px;
  padding: 13px 18px;
}

.nav-cta span, .button span {
  margin-left: 9px;
}

.menu {
  background: none;
  border: 0;
  font-size: 22px;
  display: none;
}

.hero {
  grid-template-columns: 47% 53%;
  align-items: center;
  min-height: 730px;
  padding: 46px 0 80px;
  display: grid;
}

.hero h1, .section-head h2, .cta h2 {
  letter-spacing: -5px;
  margin: 27px 0;
  font: 600 clamp(50px, 6vw, 82px) / .98 Manrope;
}

.hero h1 span, .section-head h2 span {
  color: var(--blue);
}

.hero-copy > p {
  max-width: 555px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.hero-actions {
  align-items: center;
  gap: 28px;
  margin: 34px 0;
  display: flex;
}

.button {
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  padding: 16px 22px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
}

.primary {
  background: linear-gradient(120deg,var(--blue),var(--violet));
  color: #fff;
  box-shadow: 0 12px 30px #2864ff35;
}

.text-link {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.text-link i {
  border: 1px solid #cbcbd0;
  border-radius: 50%;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  font-size: 8px;
  display: inline-grid;
}

.proof {
  align-items: center;
  gap: 14px;
  display: flex;
}

.proof b, .proof small {
  font-size: 11px;
  display: block;
}

.proof b span {
  color: #ff7a59;
  letter-spacing: 1px;
}

.proof small {
  color: var(--muted);
  margin-top: 3px;
}

.hero-visual {
  min-height: 570px;
  transform-style: preserve-3d;
  place-items: center;
  display: grid;
  position: relative;
}

.hero-visual img {
  z-index: 2;
  filter: drop-shadow(0 35px 45px #15236b38);
  mix-blend-mode: multiply;
  border-radius: 30px;
  width: 122%;
  max-width: none;
  position: relative;
}

.orb {
  filter: blur(35px);
  border-radius: 50%;
  position: absolute;
}

.orb-one {
  background: #315dff34;
  width: 440px;
  height: 440px;
  right: -30px;
}

.orb-two {
  background: #ff76592c;
  width: 220px;
  height: 220px;
  bottom: 30px;
  left: 80px;
}

@keyframes scroll {
  to {
    transform: translateX(-50%);
  }
}

.process {
  padding: 150px 0;
}

.kicker {
  letter-spacing: 2.3px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 600;
}

.week {
  align-items: center;
  gap: 8px;
  display: flex;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.week b {
  letter-spacing: -8px;
  text-shadow: 8px 12px 25px #28109570;
  font: 600 112px / .8 Manrope;
}

.week span {
  writing-mode: vertical-rl;
  letter-spacing: 3px;
  font-size: 11px;
  font-weight: 600;
}

.section-head {
  justify-content: space-between;
  align-items: end;
  margin-bottom: 65px;
  display: flex;
}

.section-head h2 {
  margin: 20px 0 0;
  font-size: clamp(45px, 5.5vw, 72px);
}

.section-head p {
  color: #92929c;
  width: 35%;
  margin-bottom: 5px;
  font-size: 14px;
  line-height: 1.7;
}

.case {
  border-radius: 28px;
  min-height: 560px;
  padding: 34px;
  position: relative;
  overflow: hidden;
}

.process .section-head p {
  color: var(--muted);
}

.timeline {
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(5, 1fr);
  display: grid;
}

.day {
  border: 0;
  border-right: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
  background: none;
  padding: 28px 18px;
  transition: all .3s;
  position: relative;
}

.day:first-child {
  border-left: 1px solid var(--line);
}

.day:before {
  content: "";
  background: #aaa;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  position: absolute;
  top: -5px;
  left: 18px;
}

.day b, .day span, .day small {
  display: block;
}

.day span {
  margin: 26px 0 7px;
  font: 600 18px Manrope;
}

.day.active {
  background: #fff;
  box-shadow: 0 16px 35px #0000000b;
}

.day.active:before {
  background: var(--blue);
  box-shadow: 0 0 0 6px #dbe4ff;
}

.day.active span {
  color: var(--blue);
}

.timeline-detail {
  border-left: 2px solid var(--blue);
  gap: 30px;
  width: 58%;
  margin: 28px 0 0 auto;
  padding: 8px 0 8px 20px;
  display: flex;
}

.timeline-detail span {
  color: var(--blue);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
}

.timeline-detail p {
  color: var(--muted);
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.pricing {
  background: #e9e9e5;
  padding: 140px 0;
}

.pricing .section-head p {
  color: var(--muted);
}

.price-toggle button.active {
  background: #fff;
  box-shadow: 0 4px 12px #0001;
}

.price-card {
  background: #fff;
  border-radius: 26px;
  grid-template-columns: 1fr .55fr;
  align-items: center;
  gap: 25px;
  padding: 36px;
  display: grid;
  box-shadow: 0 20px 60px #0b0b1510;
}

.price-card h3 {
  margin: 10px 0;
  font: 600 30px Manrope;
}

.price-card p {
  color: var(--muted);
  max-width: 470px;
  font-size: 13px;
  line-height: 1.6;
}

.price small, .price strong, .price span {
  display: block;
}

.price small, .price span {
  color: #888;
  font-size: 9px;
}

.price strong {
  margin: 6px 0;
  font: 600 37px Manrope;
}

.price-card ul {
  border-top: 1px solid #eee;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin: 0;
  padding: 25px 0;
  font-size: 12px;
  list-style: none;
  display: grid;
}

.price-card li {
  color: #444;
}

.price-card li:first-letter {
  color: var(--blue);
}

.price-card > .button {
  justify-self: end;
}

.cta {
  color: #fff;
  text-align: center;
  background: #17112e;
  border-radius: 34px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 520px;
  margin-top: 100px;
  margin-bottom: 100px;
  padding: 60px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.cta-orb {
  filter: blur(12px);
  opacity: .85;
  background: radial-gradient(circle, #5a46ff 0, #5430e5 22%, #b83b9f 50%, #0000 69%);
  border-radius: 50%;
  width: 600px;
  height: 600px;
  position: absolute;
}

.cta > :not(.cta-orb) {
  position: relative;
}

.cta > p:first-of-type {
  letter-spacing: 2px;
  font-size: 9px;
}

.cta h2 {
  margin: 14px 0;
  font-size: clamp(42px, 5vw, 68px);
}

.cta h2 em {
  color: #dfd3ff;
  font-style: normal;
}

.cta > p {
  font-size: 13px;
}

.light-button {
  color: #1c1435;
  background: #fff;
  margin: 20px;
}

.cta small {
  color: #c3bbda;
  font-size: 9px;
}

footer {
  border-top: 1px solid var(--line);
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 40px 0;
  display: grid;
}

footer p, footer small {
  color: #888;
  font-size: 10px;
}

footer div {
  gap: 25px;
  display: flex;
}

footer div a {
  color: #333;
  font-size: 11px;
  text-decoration: none;
}

.reveal {
  opacity: 0;
  transition: all .8s cubic-bezier(.2, .75, .2, 1);
  transform: translateY(26px);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

@media (width <= 900px) {
  .nav nav {
    display: none;
  }

  .menu {
    display: block;
  }

  .nav-cta {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 50px;
  }

  .hero-visual {
    min-height: 450px;
  }

  .hero-visual img {
    width: 110%;
  }

  .section-head {
    display: block;
  }

  .section-head p {
    width: 70%;
  }

  .timeline {
    border: 0;
    grid-template-columns: 1fr;
  }

  .day {
    border: 0;
    border-top: 1px solid var(--line);
  }

  .day:before {
    display: none;
  }

  .timeline-detail {
    width: 100%;
  }

  .price-card {
    grid-template-columns: 1fr;
  }

  .price-card > .button {
    justify-self: start;
  }

  footer {
    grid-template-columns: 1fr;
  }
}

@media (width <= 600px) {
  .shell {
    width: min(100% - 28px, 1200px);
  }

  .nav {
    height: 66px;
  }

  .hero {
    min-height: auto;
    padding: 35px 0 55px;
  }

  .hero h1, .section-head h2, .cta h2 {
    letter-spacing: -3px;
  }

  .hero h1 {
    font-size: 48px;
  }

  .hero-copy > p {
    font-size: 15px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .hero-visual {
    min-height: 340px;
  }

  .process, .pricing {
    padding: 90px 0;
  }

  .section-head p {
    width: 100%;
  }

  .case {
    min-height: 500px;
    padding: 25px;
  }

  .price-card {
    padding: 25px;
  }

  .price-card ul {
    grid-template-columns: 1fr;
  }

  .cta {
    width: calc(100% - 28px);
    min-height: 460px;
    margin-top: 70px;
    margin-bottom: 70px;
    padding: 30px;
  }

  .cta .button {
    padding: 15px;
  }

  .cta-orb {
    width: 470px;
    height: 470px;
  }

  footer div {
    flex-wrap: wrap;
  }
}

.hero {
  grid-template-columns: 43% 57%;
}

.hero-copy > p {
  max-width: 490px;
}

@media (width <= 900px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-copy > p {
    max-width: 555px;
  }
}

.nav nav a.active {
  color: var(--blue);
  position: relative;
}

.nav nav a.active:after {
  content: "";
  background: var(--blue);
  height: 2px;
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
}

.page-hero {
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: end;
  gap: 80px;
  padding: 110px 0 95px;
  display: grid;
}

.page-hero .kicker {
  grid-column: 1 / -1;
  margin: 0;
}

.page-hero h1 {
  letter-spacing: -6px;
  margin: 0;
  font: 600 clamp(58px, 7vw, 96px) / .95 Manrope;
}

.page-hero h1 span {
  color: var(--blue);
}

.page-hero > p:last-child {
  color: var(--muted);
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.75;
}

.portfolio {
  grid-template-columns: 1fr 1fr;
  gap: 72px 24px;
  padding: 72px 0 140px;
  display: grid;
}

.code {
  color: #747bff;
  background: #111;
}

.live {
  color: #101010;
  background: #ddff4e;
}

.live i {
  background: #25b45c;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-bottom: 20px;
  box-shadow: 0 0 0 8px #fff;
}

.package-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 75px 0 140px;
  display: grid;
}

.package-grid article {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 26px;
  flex-direction: column;
  min-height: 610px;
  padding: 34px;
  display: flex;
}

.package-grid article > span {
  letter-spacing: 1.5px;
  color: var(--blue);
  font-size: 8px;
  font-weight: 600;
}

.package-grid h2 {
  margin: 14px 0;
  font: 600 31px Manrope;
}

.package-grid p {
  color: var(--muted);
  min-height: 70px;
  font-size: 13px;
  line-height: 1.65;
}

.package-grid strong {
  margin-top: 22px;
  font: 600 35px Manrope;
}

.package-grid small {
  color: #888;
  margin: 7px 0 25px;
  font-size: 9px;
}

.package-grid ul {
  border-top: 1px solid #ddd;
  flex: 1;
  margin: 0;
  padding: 25px 0;
  list-style: none;
}

.package-grid li {
  margin: 14px 0;
  font-size: 12px;
}

.package-grid li:before {
  content: "✓";
  color: var(--blue);
  margin-right: 10px;
  font-weight: 600;
}

.included {
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  padding: 130px 0;
  display: grid;
}

.included h2, .faq h2 {
  margin: 14px 0;
  font: 600 45px Manrope;
}

.included-grid {
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  display: grid;
}

.included-grid article {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
}

.included-grid b {
  color: var(--blue);
  font-size: 22px;
}

.included-grid h3 {
  font: 600 17px Manrope;
}

.included-grid p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.faq details {
  border-top: 1px solid var(--line);
  padding: 22px 0;
}

.faq summary {
  cursor: pointer;
  font: 600 16px Manrope;
}

.faq details p {
  color: var(--muted);
  max-width: 700px;
  font-size: 13px;
  line-height: 1.7;
}

.form-status {
  color: #239457;
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
}

.mobile-nav {
  display: none !important;
}

@media (width <= 900px) {
  .page-hero {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 80px 0;
  }

  .portfolio {
    gap: 50px 18px;
  }

  .package-grid, .included {
    grid-template-columns: 1fr;
  }
}

@media (width <= 600px) {
  .page-hero h1 {
    letter-spacing: -3.5px;
    font-size: 47px;
  }

  .page-hero {
    padding: 65px 0;
  }

  .portfolio {
    grid-template-columns: 1fr;
    padding-top: 40px;
  }

  .package-grid {
    padding-top: 45px;
  }

  .included {
    gap: 35px;
    padding: 80px 0;
  }

  .included-grid {
    grid-template-columns: 1fr;
  }
}

.sector-filter {
  background: #e6e6e2;
  border-radius: 100px;
  gap: 6px;
  padding: 4px;
  display: flex;
}

.sector-filter button {
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 100px;
  padding: 9px 13px;
  font: 600 9px DM Sans;
}

.sector-filter button.active {
  background: #fff;
  box-shadow: 0 3px 10px #0001;
}

.sector-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 76px 24px;
  padding: 70px 0 145px;
  display: grid;
}

.sector-card {
  min-width: 0;
  transition: all .35s;
}

.sector-card.is-hidden {
  display: none;
}

.sector-card.sector-wide {
  grid-column: 1 / -1;
}

.sector-shot {
  aspect-ratio: 4 / 3;
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 45px #1414200d;
}

.sector-wide .sector-shot {
  aspect-ratio: 2;
}

.sector-shot.image-shot img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.sector-info {
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  padding: 22px 4px 0;
  display: flex;
}

.sector-info > div {
  max-width: 650px;
}

.sector-info span {
  letter-spacing: 1.5px;
  color: var(--blue);
  font-size: 8px;
  font-weight: 600;
}

.sector-info h2 {
  margin: 8px 0;
  font: 600 27px Manrope;
}

.sector-info p {
  color: var(--muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
}

.sector-info a {
  color: var(--ink);
  white-space: nowrap;
  border-bottom: 1px solid #aaa;
  padding-bottom: 4px;
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
}

@media (width <= 900px) {
  .sector-wide .sector-shot {
    aspect-ratio: 4 / 3;
  }
}

@media (width <= 600px) {
  .sector-filter {
    max-width: 100%;
    overflow: auto;
  }

  .sector-grid {
    grid-template-columns: 1fr;
    gap: 52px;
    padding-top: 40px;
  }

  .sector-card.sector-wide {
    grid-column: auto;
  }

  .sector-shot, .sector-wide .sector-shot {
    aspect-ratio: 4 / 3;
    border-radius: 20px;
  }

  .sector-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

@media (width >= 901px) {
  .hero {
    grid-template-columns: 48% 52%;
    column-gap: 34px;
  }

  .hero-visual {
    min-width: 0;
  }

  .hero-visual img {
    justify-self: end;
    width: 100%;
    max-width: 680px;
  }

  .hero-copy {
    z-index: 5;
    position: relative;
  }
}

.hero-visual img {
  mix-blend-mode: normal;
  border-radius: 0;
}

.hero-visual .orb {
  display: none;
}

.text-link i {
  border-color: #c4c4c9;
  width: 26px;
  height: 26px;
  margin-right: 7px;
  transition: transform .25s, border-color .25s, background .25s;
}

.text-link i svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 12px;
  height: 12px;
}

.text-link:hover i {
  border-color: var(--blue);
  color: var(--blue);
  background: #e9eeff;
  transform: translate(2px, -2px);
}

.hero-actions .button, .hero-actions .text-link {
  white-space: nowrap;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  height: 52px;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
}

.hero-actions .text-link {
  background: #fff8;
  border: 1px solid #d1d1d6;
}

.hero-actions .text-link:hover {
  background: #f6f8ff;
  border-color: #aebbe8;
}

.branch-grid {
  grid-template-columns: 1fr 1fr;
  gap: 52px 20px;
  display: grid;
}

.branch-card {
  min-width: 0;
}

.branch-preview {
  aspect-ratio: 4 / 3;
  color: #151515;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
}

@media (width <= 800px) {
  .branch-grid {
    grid-template-columns: 1fr;
  }

  .branch-preview {
    aspect-ratio: 4 / 3;
  }
}

.branch-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

.branch-card {
  background: #fff;
  border-radius: 24px;
  flex-direction: column;
  padding: 8px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 24px 55px #05060b24;
}

.branch-preview {
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px #ffffff38;
}

@media (width <= 800px) {
  .branch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .branch-preview {
    aspect-ratio: 4 / 4.7;
  }
}

@media (width <= 560px) {
  .branch-preview {
    aspect-ratio: 4 / 4.5;
  }
}

.branch-card {
  backdrop-filter: blur(12px);
  background: #ffffffd9;
  border: 1px solid #fff;
  border-radius: 18px;
  padding: 6px;
  box-shadow: 0 16px 38px #48527b12;
}

.branch-preview {
  aspect-ratio: 16 / 9;
  border-radius: 13px;
}

@media (width <= 800px) {
  .branch-preview {
    aspect-ratio: 16 / 9;
  }
}

.branch-grid {
  gap: 18px;
}

.branch-card {
  min-height: 390px;
}

.branch-preview {
  aspect-ratio: 16 / 10;
  flex: none;
}

@media (width <= 980px) and (width >= 801px) {
  .branch-card {
    min-height: 370px;
  }
}

@media (width <= 800px) {
  .branch-card {
    min-height: 0;
  }
}

.branch-preview {
  width: 100%;
}

.branch-card {
  border-color: #fff;
  transition: transform .28s, box-shadow .28s;
  box-shadow: 0 18px 38px #29365c1c;
}

.branch-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 48px #29365c2b;
}

.branch-card {
  cursor: pointer;
}

.branch-card:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

.branch-dialog {
  width: min(1120px, 100% - 32px);
  max-width: none;
  color: var(--ink);
  background: #f7f7f4;
  border: 0;
  border-radius: 30px;
  padding: 0;
  box-shadow: 0 40px 120px #08081555;
}

.branch-dialog::backdrop {
  backdrop-filter: blur(10px);
  background: #0b0b12a8;
}

.branch-dialog-shell {
  grid-template-columns: .8fr 1.2fr;
  min-height: 620px;
  display: grid;
  position: relative;
}

.branch-dialog-close {
  z-index: 5;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d8d8da;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 24px;
  position: absolute;
  top: 20px;
  right: 20px;
}

.branch-dialog-copy {
  flex-direction: column;
  align-items: flex-start;
  padding: 58px 42px;
  display: flex;
}

.branch-dialog-copy .kicker {
  color: var(--blue);
}

.branch-dialog-copy h2 {
  letter-spacing: -3px;
  margin: 18px 0;
  font: 600 47px / .98 Manrope;
}

.branch-dialog-copy > p:not(.kicker) {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.branch-dialog-points {
  gap: 10px;
  margin: 24px 0;
  display: grid;
}

.branch-dialog-points span {
  font-size: 11px;
  font-weight: 600;
}

.branch-dialog-points span:before {
  content: "✓";
  width: 20px;
  height: 20px;
  color: var(--blue);
  background: #e4ebff;
  border-radius: 50%;
  place-items: center;
  margin-right: 9px;
  display: inline-grid;
}

.branch-palette {
  gap: 7px;
  margin: 0 0 28px;
  display: flex;
}

.branch-palette i {
  border: 2px solid #fff;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  box-shadow: 0 2px 6px #0002;
}

.branch-dialog-copy .button {
  margin-top: auto;
}

.branch-dialog-visuals {
  background: linear-gradient(145deg, #dfe5f7, #b5c0ec 55%, #e0d1f2);
  border-radius: 0 30px 30px 0;
  place-items: center;
  display: grid;
  position: relative;
  overflow: hidden;
}

.dialog-desktop {
  filter: drop-shadow(0 25px 35px #1e294b35);
  width: 75%;
  transform: translate(-5%, -5%);
}

.dialog-desktop .branch-preview {
  aspect-ratio: 16 / 10;
  border: 7px solid #17191f;
  border-radius: 13px;
}

.dialog-mobile {
  filter: drop-shadow(0 20px 25px #1e294b55);
  width: 30%;
  position: absolute;
  bottom: 9%;
  right: 8%;
}

.dialog-mobile .branch-preview {
  aspect-ratio: 9 / 16;
  border: 7px solid #17191f;
  border-radius: 25px;
}

.dialog-mobile .preview-bar {
  display: none;
}

.dialog-mobile .realtor-hero, .dialog-mobile .auto-hero, .dialog-mobile .salon-hero, .dialog-mobile .contractor-hero {
  height: 100%;
}

.dialog-note {
  gap: 8px;
  display: flex;
  position: absolute;
  bottom: 19px;
  left: 25px;
  right: 25px;
}

.dialog-note span {
  letter-spacing: 1px;
  color: #334067;
  background: #fffa;
  border-radius: 100px;
  padding: 7px 9px;
  font-size: 7px;
  font-weight: 600;
}

@media (width <= 800px) {
  .branch-dialog-shell {
    grid-template-columns: 1fr;
  }

  .branch-dialog-copy {
    padding: 50px 28px 35px;
  }

  .branch-dialog-copy h2 {
    font-size: 39px;
  }

  .branch-dialog-visuals {
    border-radius: 30px 30px 0 0;
    order: -1;
    min-height: 470px;
  }

  .branch-dialog-copy .button {
    margin-top: 15px;
  }
}

.branch-card .branch-preview, .branch-dialog .branch-preview {
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}

.branch-card .branch-preview > *, .branch-dialog .branch-preview > * {
  display: none;
}

.branch-card.realtor .branch-preview, .dialog-desktop .realtor .branch-preview, .dialog-mobile .realtor .branch-preview {
  background-image: url("../assets/concept-makelaar-poppins-green-homepage.png");
}

.branch-card.automotive .branch-preview, .dialog-desktop .automotive .branch-preview, .dialog-mobile .automotive .branch-preview {
  background-image: url("../assets/concept-autodealer-light-homepage.png");
}

.branch-card.salon .branch-preview, .dialog-desktop .salon .branch-preview, .dialog-mobile .salon .branch-preview {
  background-image: url("../assets/concept-kapper-homepage.png");
}

.branch-card.contractor .branch-preview, .dialog-desktop .contractor .branch-preview, .dialog-mobile .contractor .branch-preview {
  background-image: url("../assets/concept-aannemer-homepage.png");
}

.dialog-mobile .branch-preview {
  background-position: 18% 0;
}

.dialog-desktop.realtor .branch-preview, .dialog-mobile.realtor .branch-preview {
  background-image: url("../assets/concept-makelaar-poppins-green-homepage.png");
}

.dialog-desktop.automotive .branch-preview, .dialog-mobile.automotive .branch-preview {
  background-image: url("../assets/concept-autodealer-light-homepage.png");
}

.dialog-desktop.salon .branch-preview, .dialog-mobile.salon .branch-preview {
  background-image: url("../assets/concept-kapper-homepage.png");
}

.dialog-desktop.contractor .branch-preview, .dialog-mobile.contractor .branch-preview {
  background-image: url("../assets/concept-aannemer-homepage.png");
}

.dialog-mobile.realtor .branch-preview {
  background-image: url("../assets/concept-makelaar-poppins-green-mobile.png");
}

.branch-card.realtor .branch-preview, .dialog-desktop.realtor .branch-preview, .branch-card.automotive .branch-preview, .dialog-desktop.automotive .branch-preview, .dialog-mobile.realtor .branch-preview, .dialog-mobile.automotive .branch-preview {
  background-color: #fff;
  background-position: center;
  background-size: contain;
}

.dialog-mobile.automotive .branch-preview {
  background-image: url("../assets/concept-autodealer-light-mobile.png");
}

.dialog-mobile.salon .branch-preview {
  background-image: url("../assets/concept-kapper-mobile.png");
}

.branch-card.contractor .branch-preview, .dialog-desktop.contractor .branch-preview {
  background-color: #fff;
  background-position: center;
  background-size: contain;
}

.dialog-mobile.contractor .branch-preview {
  background-color: #fff;
  background-image: url("../assets/concept-aannemer-mobile.png");
  background-position: center;
  background-size: contain;
}

.dialog-mobile .branch-preview {
  background-position: top;
  background-size: cover;
}

.dialog-desktop {
  isolation: isolate;
  padding-bottom: 18px;
  position: relative;
}

.dialog-desktop .branch-preview {
  z-index: 2;
  aspect-ratio: 16 / 10;
  background-color: #fff;
  border: 10px solid #12151a;
  border-bottom-width: 13px;
  border-radius: 17px 17px 10px 10px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #ffffff24, 0 20px 38px #19213a30;
  background-position: center !important;
  background-size: contain !important;
}

.dialog-desktop .branch-preview:before {
  content: "";
  z-index: 4;
  background: #12151a;
  border-radius: 0 0 8px 8px;
  width: 17%;
  height: 12px;
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: inset 0 -1px #343944;
}

.dialog-desktop:before {
  content: "";
  z-index: 3;
  background: #aeb5c0;
  border-radius: 0 0 5px 5px;
  width: 16%;
  height: 3px;
  position: absolute;
  bottom: 14px;
  left: 42%;
}

.dialog-desktop:after {
  content: "";
  z-index: 1;
  clip-path: polygon(3% 0, 97% 0, 100% 58%, 96% 100%, 4% 100%, 0 58%);
  background: linear-gradient(#f5f6f8 0, #b9c0c9 48%, #7e8793 58%, #dce0e5 100%);
  border-radius: 2px 2px 10px 10px;
  height: 21px;
  position: absolute;
  bottom: 0;
  left: -6%;
  right: -6%;
  box-shadow: 0 12px 18px #17213a2b;
}

.dialog-mobile {
  isolation: isolate;
}

.dialog-mobile .branch-preview {
  z-index: 2;
  aspect-ratio: 9 / 19.5;
  background-color: #fff;
  border: 9px solid #171a1f;
  border-radius: 34px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #69717d, 0 20px 28px #17213a38;
  background-position: center !important;
  background-size: contain !important;
}

.dialog-mobile .branch-preview:before {
  content: "";
  z-index: 5;
  background: #090b0e;
  border-radius: 999px;
  width: 34%;
  height: 14px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.dialog-mobile .branch-preview:after {
  content: "";
  z-index: 6;
  background: #24303b;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  position: absolute;
  top: 13px;
  left: 57%;
}

.dialog-mobile:before {
  content: "";
  z-index: 1;
  background: #626a75;
  border-radius: 3px 0 0 3px;
  width: 4px;
  height: 13%;
  position: absolute;
  top: 22%;
  left: -3px;
  box-shadow: 0 31px #626a75, 0 61px #626a75;
}

.dialog-mobile:after {
  content: "";
  z-index: 3;
  background: #626a75;
  border-radius: 0 3px 3px 0;
  width: 3px;
  height: 19%;
  position: absolute;
  top: 29%;
  right: -2px;
}

main {
  background: var(--paper);
}

.process {
  background: none;
  padding-top: 110px;
  padding-bottom: 110px;
}

.process .section-head {
  margin-bottom: 54px;
}

.pricing .section-head {
  margin-bottom: 50px;
}

.price-card {
  border: 1px solid #fff;
  box-shadow: 0 24px 70px #27417115;
}

.cta {
  background: linear-gradient(145deg, #263fb7 0%, #5a36e8 50%, #963fcb 100%);
  min-height: 480px;
  margin-top: 88px;
  margin-bottom: 88px;
  box-shadow: 0 30px 80px #4f3abc30;
}

.cta-orb {
  opacity: .55;
}

@media (width <= 900px) {
  .process, .pricing {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .cta {
    margin-top: 72px;
    margin-bottom: 72px;
  }
}

@media (width <= 600px) {
  .process, .pricing {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .pricing .section-head, .process .section-head {
    margin-bottom: 38px;
  }

  .cta {
    min-height: 430px;
    margin-top: 58px;
    margin-bottom: 58px;
  }
}

.branch-card {
  border: 1px solid #fff;
  box-shadow: 0 16px 42px #29365c16;
}

.branch-grid {
  align-items: stretch;
  gap: 15px;
}

.branch-card {
  background: #fff;
  border-radius: 20px;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s;
  overflow: hidden;
  transform: translateZ(0);
}

.branch-card:hover {
  border-color: #d8e2ff;
  transform: translateY(-7px);
  box-shadow: 0 26px 55px #29365c24;
}

.branch-card .branch-preview {
  aspect-ratio: 16 / 10.4;
  background-color: #eef2f8;
  border-radius: 0;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.branch-card:hover .branch-preview {
  transform: scale(1.018);
}

@media (width <= 800px) {
  .branch-card .branch-preview {
    aspect-ratio: 16 / 10;
  }
}

.nav {
  border: 1px solid #0000;
  border-radius: 22px;
  width: min(1236px, 100% - 24px);
  padding: 0 18px;
  transition: height .25s, background .25s, border-color .25s, box-shadow .25s, backdrop-filter .25s;
  position: sticky;
  top: 12px;
}

.hero {
  min-height: 690px;
  padding-top: 32px;
}

.branch-card:after {
  content: "Bekijk concept ↗";
  z-index: 4;
  color: #26364e;
  letter-spacing: .7px;
  opacity: 0;
  backdrop-filter: blur(10px);
  background: #ffffffdc;
  border-radius: 100px;
  padding: 7px 10px;
  font-size: 7px;
  font-weight: 600;
  transition: all .25s;
  position: absolute;
  top: 10px;
  right: 10px;
  transform: translateY(-4px);
}

.branch-card:hover:after, .branch-card:focus-visible:after {
  opacity: 1;
  transform: none;
}

.pricing .price-card {
  padding: 30px 34px;
}

.pricing .price-card ul {
  padding-top: 20px;
  padding-bottom: 20px;
}

.cta {
  color: #172746;
  background: radial-gradient(circle at 50% 120%, #bda9ff 0, #0000 42%), linear-gradient(145deg, #f9fbff, #e8efff 50%, #f1e8ff);
  border: 1px solid #fff;
  box-shadow: 0 28px 75px #4f3a8c1e;
}

.cta-orb {
  opacity: .7;
  background: radial-gradient(circle, #6b58ff44 0, #9b55df22 35%, #0000 70%);
}

.cta h2 em {
  color: #5b42df;
}

.cta small {
  color: #69758a;
}

.cta .light-button {
  color: #fff;
  background: #14233e;
  box-shadow: 0 13px 30px #14233e25;
}

.footer-rich {
  grid-template-columns: 1.2fr .7fr .9fr 1fr;
  align-items: start;
  padding-top: 64px;
  padding-bottom: 34px;
  position: relative;
}

.footer-brand {
  display: block;
}

.footer-rich p {
  margin-top: 18px;
  line-height: 1.65;
}

.footer-column {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.footer-column b {
  letter-spacing: 1.3px;
  color: #20314c;
  margin-bottom: 4px;
  font-size: 10px;
}

.footer-column a, .footer-column span {
  color: #697487;
  font-size: 10px;
  text-decoration: none;
}

.footer-column a:hover {
  color: var(--blue);
}

.footer-mini-cta {
  background: #fff;
  border: 1px solid #e4e8f0;
  border-radius: 18px;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding: 18px;
  display: flex;
}

.footer-mini-cta strong {
  font: 600 14px Manrope;
}

.footer-mini-cta .button {
  padding: 11px 15px;
  font-size: 10px;
}

.footer-copy {
  border-top: 1px solid var(--line);
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 28px;
  padding-top: 20px;
}

@media (width <= 900px) {
  .nav {
    top: 8px;
  }

  .footer-rich {
    grid-template-columns: 1fr 1fr;
  }

  .footer-mini-cta, .footer-copy {
    grid-column: 1 / -1;
  }
}

@media (width <= 600px) {
  .nav {
    width: calc(100% - 16px);
    padding: 0 12px;
  }

  .nav.scrolled {
    height: 58px;
  }

  .hero {
    min-height: auto;
    padding-top: 28px;
  }

  .branch-card:after {
    opacity: 1;
    transform: none;
  }

  .footer-rich {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-mini-cta, .footer-copy {
    grid-column: auto;
  }

  .footer-column {
    gap: 12px;
  }
}

.process {
  isolation: isolate;
  background: radial-gradient(circle at 8% 12%, #dceaff 0, #0000 32%), radial-gradient(circle at 92% 88%, #eee3ff 0, #0000 30%), linear-gradient(145deg, #fbfdff, #f1f5fb);
  border: 1px solid #fff;
  border-radius: 34px;
  padding-left: 34px;
  padding-right: 34px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 26px 75px #29457b12;
}

.process:before {
  content: "";
  z-index: -1;
  filter: blur(8px);
  background: linear-gradient(145deg, #4a71ff33, #9b4dff26);
  border-radius: 50%;
  width: 280px;
  height: 280px;
  position: absolute;
  top: -120px;
  right: -100px;
}

.process .kicker {
  background: #ffffffc9;
  border: 1px solid #fff;
  border-radius: 100px;
  padding: 7px 11px;
  display: inline-flex;
  box-shadow: 0 7px 20px #29457b10;
}

.process .section-head h2 {
  font-size: clamp(48px, 5.6vw, 72px);
}

.timeline {
  isolation: isolate;
  border: 0;
  gap: 9px;
  padding-top: 48px;
  position: relative;
}

.timeline:before, .timeline:after {
  content: "";
  z-index: 2;
  pointer-events: none;
  border-radius: 3px;
  height: 3px;
  position: absolute;
  top: 20px;
  left: 10%;
  right: 10%;
}

.timeline:after {
  width: calc(var(--progress, 0%) * .8);
  background: linear-gradient(90deg,var(--blue),#5572ff 48%,var(--violet));
  transition: width .72s cubic-bezier(.22, .75, .18, 1);
  right: auto;
  box-shadow: 0 0 14px #5269ff55;
}

.day, .day:first-child {
  z-index: 1;
  background: #f9fbffd9;
  border: 1px solid #0000;
  border-radius: 19px;
  min-height: 155px;
  padding: 35px 18px 22px;
  transition: background .55s cubic-bezier(.2, .8, .2, 1), transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s, border-color .55s, color .4s;
}

.day:before {
  z-index: 3;
  background: #aab7ca;
  border: 3px solid #f3f7fc;
  width: 11px;
  height: 11px;
  display: block;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
}

.day span {
  margin-top: 20px;
}

.day small {
  font-size: 10px;
}

.day.active:before {
  background: var(--blue);
  transition: background .45s, box-shadow .55s;
  box-shadow: 0 0 0 6px #dce6ff, 0 0 20px #2864ff66;
}

.day.active b {
  color: var(--violet);
}

.timeline-detail {
  border: 1px solid #fff;
  border-left: 3px solid var(--blue);
  background: #ffffffa3;
  border-radius: 0 18px 18px 0;
  width: 64%;
  min-height: 88px;
  margin-top: 28px;
  padding: 20px 22px;
  transition: all .3s;
  box-shadow: 0 12px 34px #29457b0d;
}

.timeline-detail span {
  background: #e7edff;
  border-radius: 100px;
  align-self: flex-start;
  padding: 5px 8px;
}

.timeline-detail p {
  font-size: 13px;
}

@media (width <= 900px) {
  .process {
    padding-left: 28px;
    padding-right: 28px;
  }

  .timeline {
    gap: 7px;
  }

  .day, .day:first-child {
    border: 1px solid #e3e8f1;
  }

  .timeline:before, .timeline:after {
    display: none;
  }
}

@media (width <= 600px) {
  .process {
    border-radius: 28px;
    width: calc(100% - 20px);
    padding: 68px 18px;
  }

  .timeline {
    gap: 8px;
    padding-top: 0;
  }

  .day, .day:first-child {
    min-height: 100px;
    padding: 18px;
  }

  .day span {
    margin: 7px 0 4px;
  }

  .day.active {
    transform: translateX(5px);
  }

  .timeline-detail {
    min-height: 120px;
    margin-top: 18px;
    display: block;
  }

  .timeline-detail span {
    margin-bottom: 12px;
    display: inline-block;
  }
}

.process {
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: visible;
}

.process:before {
  background: radial-gradient(circle at 10% 18%,#e1ecff 0,transparent 31%),radial-gradient(circle at 91% 82%,#eee5ff 0,transparent 29%),linear-gradient(180deg,var(--paper),#f8faff);
  filter: none;
  border-radius: 0;
  width: 100vw;
  height: auto;
  inset: 0 auto 0 50%;
  transform: translateX(-50%);
}

.process .section-head, .process .timeline, .process .timeline-detail {
  position: relative;
}

@media (width <= 900px) {
  .process {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (width <= 600px) {
  .process {
    border-radius: 0;
    width: min(100% - 28px, 1200px);
    padding: 72px 0;
  }
}

.timeline:before, .timeline:after {
  height: 2px;
  box-shadow: none;
}

.timeline:before {
  background: #cfd8e6;
}

.timeline:after {
  background: linear-gradient(90deg, #2864ff, #6747ed);
}

.day, .day:first-child {
  box-shadow: none;
  background: #fbfcfedf;
  border-color: #e7ebf2;
  border-radius: 13px;
}

.day:before {
  background: #9facc0;
  border-width: 2px;
  width: 9px;
  height: 9px;
}

.day.active:before {
  box-shadow: 0 0 0 5px #dfe7ff;
}

.timeline-detail {
  box-shadow: none;
  border-color: #e1e6ef;
  border-left-color: var(--blue);
  background: #ffffffb8;
  border-radius: 0 13px 13px 0;
}

.timeline-detail span {
  background: #e8eeff;
  border-radius: 6px;
}

.timeline:before, .timeline:after {
  z-index: 0;
  top: 19px;
}

.day:before {
  z-index: 3;
  box-sizing: content-box;
  background: #9caabd;
  border: 3px solid #f7f9fd;
  width: 10px;
  height: 10px;
  top: -35px;
}

.day, .day:first-child {
  z-index: 1;
  backdrop-filter: blur(16px) saturate(140%);
  background: linear-gradient(145deg, #ffffffd9, #f4f7fcb8);
  border: 1px solid #fff;
  border-radius: 20px;
  min-height: 158px;
  padding: 38px 20px 23px;
  box-shadow: inset 0 1px #fff, 0 10px 28px #304b7210;
}

.day b {
  color: #8290a5;
  font-size: 10px;
}

.day span {
  letter-spacing: -.35px;
  color: #22334c;
  font-size: 19px;
}

.day small {
  color: #78869a;
}

.day.active {
  background: linear-gradient(145deg, #fff, #f0f4ff);
  border-color: #fff;
  transform: translateY(-5px);
  box-shadow: inset 0 1px #fff, 0 20px 44px #31518b1b;
}

.day.active:before {
  background: #2864ff;
  border-color: #fff;
  box-shadow: 0 0 0 5px #dfe7ff, 0 5px 13px #2864ff38;
}

.timeline-detail {
  border-color: #fff;
  border-left-color: var(--blue);
  backdrop-filter: blur(14px);
  background: #ffffffc9;
  box-shadow: inset 0 1px #fff, 0 12px 30px #304b7210;
}

.pricing {
  background: radial-gradient(circle at 8% 8%, #e5edff 0, #0000 27%), radial-gradient(circle at 94% 90%, #f0e7ff 0, #0000 25%), linear-gradient(#f7f9fc, #eef2f8);
  border-top: 1px solid #e0e6ef;
  border-bottom: 1px solid #e0e6ef;
  padding-top: 100px;
  padding-bottom: 100px;
}

.pricing .section-head {
  align-items: center;
  margin-bottom: 38px;
}

.pricing .section-head h2 {
  font-size: clamp(48px, 5.3vw, 70px);
}

.pricing .section-head p {
  color: #657084;
  max-width: 430px;
}

.price-toggle button.active {
  color: #17263e;
  background: #fff;
  box-shadow: 0 5px 15px #263d6814;
}

.pricing .price-card {
  backdrop-filter: blur(18px);
  background: linear-gradient(145deg, #ffffffed, #f9fbffdc);
  border: 1px solid #fff;
  border-radius: 22px;
  padding: 34px 38px;
  box-shadow: inset 0 1px #fff, 0 22px 60px #29457b13;
}

.pricing .price-card h3 {
  letter-spacing: -.7px;
  font-size: 29px;
}

.pricing .price-card p {
  color: #657084;
}

.pricing .price strong {
  color: #17263e;
  letter-spacing: -1.5px;
  font-size: 40px;
}

.pricing .price-card ul {
  border-color: #e5e9f0;
}

.pricing .price-card li {
  color: #46536a;
}

.pricing .price-card > .button {
  padding: 14px 20px;
  box-shadow: 0 12px 26px #4456dc25;
}

@media (width <= 900px) {
  .pricing {
    padding-top: 84px;
    padding-bottom: 84px;
  }
}

@media (width <= 600px) {
  .pricing {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .pricing .price-card {
    border-radius: 18px;
    padding: 26px 22px;
  }
}

.pricing, footer {
  border-top: 0;
  border-bottom: 0;
}

.pricing {
  background: radial-gradient(circle at 8% 8%,#e5edff 0,transparent 27%),radial-gradient(circle at 94% 90%,#f0e7ff 0,transparent 25%),linear-gradient(180deg,#f5f7fb 0%,#eef2f8 72%,var(--paper) 100%);
}

.process {
  padding-top: 104px;
  padding-bottom: 96px;
}

.pricing {
  padding-top: 96px;
  padding-bottom: 104px;
}

footer {
  border-top: 0;
}

@media (width <= 900px) {
  .process {
    padding-top: 84px;
    padding-bottom: 84px;
  }

  .pricing {
    padding-top: 82px;
    padding-bottom: 90px;
  }
}

@media (width <= 600px) {
  .process {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .pricing {
    padding-top: 70px;
    padding-bottom: 78px;
  }
}

main {
  background: radial-gradient(ellipse 55% 17% at 9% 23%,#dfeaff 0,transparent 72%),radial-gradient(ellipse 50% 18% at 92% 36%,#eee4ff 0,transparent 72%),radial-gradient(ellipse 56% 19% at 8% 55%,#e2edff 0,transparent 72%),radial-gradient(ellipse 52% 18% at 91% 69%,#eee5ff 0,transparent 72%),radial-gradient(ellipse 58% 18% at 12% 84%,#e4edff 0,transparent 72%),linear-gradient(180deg,#f7f8f7 0%,#f5f7fa 33%,#f7f8fb 62%,#f1f4f8 82%,var(--paper) 100%);
  background-repeat: no-repeat;
}

.process:before, .pricing {
  background: none;
}

.price-card, .day, .branch-card {
  backdrop-filter: blur(16px) saturate(135%);
}

@media (width <= 600px) {
  main {
    background: radial-gradient(ellipse 95% 13% at 5% 22%,#e2ecff 0,transparent 75%),radial-gradient(ellipse 90% 14% at 100% 43%,#eee5ff 0,transparent 75%),radial-gradient(ellipse 95% 15% at 0% 67%,#e3edff 0,transparent 75%),radial-gradient(ellipse 90% 13% at 100% 84%,#eee6ff 0,transparent 75%),linear-gradient(180deg,#f7f8f7,#f3f6fa 55%,var(--paper));
  }
}

.price-toggle button[data-price="signature"].active {
  color: #5a36d6;
  background: linear-gradient(135deg, #fff, #f0eaff);
}

.price #priceValue {
  white-space: nowrap;
  line-height: 1.05;
}

@media (width <= 600px) {
  .price #priceValue {
    white-space: normal;
  }
}

.pricing .price-card {
  isolation: isolate;
  backdrop-filter: blur(24px) saturate(138%);
  background: radial-gradient(circle at 92% 8%, #7e4cff21 0, #0000 34%), radial-gradient(circle at 7% 92%, #2864ff1c 0, #0000 38%), linear-gradient(135deg, #ffffffad, #f5f8ff7a);
  border-color: #ffffffc7;
  position: relative;
  box-shadow: inset 0 1px #ffffffe6, 0 24px 70px #2741711f;
}

.nav {
  backdrop-filter: blur(18px) saturate(135%);
  background: #f7f9fca6;
  border-color: #ffffffb8;
  height: 70px;
  transition: background .25s, border-color .25s, box-shadow .25s;
  top: 10px;
  box-shadow: 0 10px 32px #233a680d;
}

.nav.scrolled {
  backdrop-filter: blur(20px) saturate(145%);
  background: #f7f9fccc;
  border-color: #ffffffd9;
  height: 70px;
  box-shadow: 0 14px 38px #233a6815;
}

@media (width <= 900px) {
  .nav, .nav.scrolled {
    height: 64px;
    top: 8px;
  }
}

@media (width <= 600px) {
  .nav, .nav.scrolled {
    height: 58px;
  }
}

.service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 76px 0 120px;
  display: grid;
}

.service-grid article {
  backdrop-filter: blur(16px) saturate(135%);
  background: linear-gradient(145deg, #ffffffdf, #f1f5ffbd);
  border: 1px solid #fff;
  border-radius: 26px;
  min-height: 360px;
  padding: 34px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #fff, 0 20px 55px #29457b12;
}

.service-grid article:nth-child(2), .service-grid article:nth-child(4) {
  background: linear-gradient(145deg, #ffffffdf, #f3edffbf);
}

.service-grid article > span {
  letter-spacing: 1.6px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 600;
}

.service-grid article > b {
  width: 58px;
  height: 58px;
  color: var(--violet);
  background: linear-gradient(145deg, #edf3ff, #e7ddff);
  border-radius: 18px;
  place-items: center;
  font-size: 25px;
  display: grid;
  position: absolute;
  top: 25px;
  right: 30px;
  box-shadow: 0 12px 25px #4057a51a;
}

.service-grid h2 {
  letter-spacing: -1.2px;
  margin: 94px 0 13px;
  font: 600 30px / 1.1 Manrope;
}

.service-grid p {
  max-width: 430px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.service-grid ul {
  border-top: 1px solid #e2e7ef;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 18px 0 0;
  list-style: none;
  display: flex;
}

.service-grid li {
  color: #526078;
  background: #fff;
  border-radius: 100px;
  padding: 7px 10px;
  font-size: 9px;
}

.service-grid li:before {
  content: "✓";
  color: var(--blue);
  margin-right: 5px;
}

@media (width <= 800px) {
  .service-grid {
    grid-template-columns: 1fr;
    padding-top: 62px;
    padding-bottom: 90px;
  }

  .service-grid article {
    min-height: 330px;
  }
}

@media (width <= 600px) {
  .service-grid {
    padding-top: 48px;
    padding-bottom: 72px;
  }

  .service-grid article {
    border-radius: 21px;
    min-height: 310px;
    padding: 26px;
  }

  .service-grid h2 {
    margin-top: 82px;
    font-size: 26px;
  }

  .service-grid article > b {
    top: 22px;
    right: 23px;
  }
}

.service-grid {
  padding-top: 58px;
  padding-bottom: 96px;
}

.service-grid article:not(.hosting-service) {
  min-height: 285px;
  padding: 28px;
}

.service-grid article:not(.hosting-service) h2 {
  margin-top: 67px;
  font-size: 27px;
}

.service-grid article:not(.hosting-service) p {
  margin-bottom: 0;
}

.service-grid article:not(.hosting-service) ul {
  margin-top: 15px;
  padding-top: 14px;
}

.service-grid article:not(.hosting-service) li {
  padding: 6px 9px;
}

@media (width <= 800px) {
  .service-grid {
    padding-top: 50px;
    padding-bottom: 80px;
  }

  .service-grid article:not(.hosting-service) {
    min-height: 265px;
  }
}

@media (width <= 600px) {
  .service-grid {
    padding-top: 40px;
    padding-bottom: 68px;
  }

  .service-grid article:not(.hosting-service) {
    min-height: 250px;
    padding: 23px;
  }

  .service-grid article:not(.hosting-service) h2 {
    margin-top: 60px;
    font-size: 24px;
  }
}

.nav:not(.scrolled) {
  box-shadow: none;
  backdrop-filter: none;
  background: none;
  border-color: #0000;
}

.nav.scrolled {
  backdrop-filter: blur(22px) saturate(145%);
  background: #f7f8f7c9;
  border-color: #ffffffdf;
  box-shadow: 0 14px 38px #263b6417;
}

.process-page {
  --process-gap: clamp(64px,8vw,112px);
  color: #112541;
  background: radial-gradient(circle at 8% 18%, #dcecff 0, #0000 28%), radial-gradient(circle at 92% 45%, #eee5ff 0, #0000 30%), linear-gradient(#fafbf9 0%, #f7faff 48%, #fbfafc 100%);
}

.process-page main {
  overflow: hidden;
}

.process-page main > section {
  margin-top: var(--process-gap);
  margin-bottom: var(--process-gap);
}

.process-page h1, .process-page h2, .process-page h3 {
  letter-spacing: -.045em;
}

.process-page h1 {
  margin: 22px 0 28px;
  font-size: clamp(54px, 6.25vw, 94px);
  line-height: .96;
}

.process-page h2 {
  margin: 16px 0 22px;
  font-size: clamp(40px, 4.4vw, 68px);
  line-height: 1.02;
}

.process-page h3 {
  font-size: clamp(22px, 2vw, 31px);
  line-height: 1.1;
}

.process-page .accent {
  color: var(--blue);
}

.process-page .button {
  justify-content: center;
  align-items: center;
  gap: 16px;
  display: inline-flex;
}

.process-page .button span {
  font-size: 1.3em;
  line-height: 1;
}

.process-hero {
  grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr);
  align-items: center;
  gap: 5vw;
  min-height: 780px;
  padding-top: 120px;
  display: grid;
}

.process-hero-copy > p:not(.eyebrow):not(.lead) {
  color: #647187;
  max-width: 640px;
  line-height: 1.7;
}

.process-hero-visual {
  min-height: 570px;
  position: relative;
}

.process-steps {
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  display: grid;
}

.process-faq details[open] summary:after {
  content: "−";
}

@media (width <= 980px) {
  .process-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 145px;
  }

  .process-hero-visual {
    min-height: 510px;
  }
}

@media (width <= 720px) {
  .process-page {
    --process-gap: 58px;
  }

  .process-page h1 {
    font-size: clamp(46px, 14vw, 66px);
  }

  .process-page h2 {
    font-size: clamp(36px, 11vw, 50px);
  }

  .process-hero {
    padding-top: 110px;
  }

  .process-hero-visual {
    min-height: 380px;
  }

  .process-steps {
    display: block;
  }
}

@media (width <= 460px) {
  .process-hero-visual {
    min-height: 320px;
  }
}

.website-scan {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(32px, 6vw, 84px);
  padding: clamp(72px, 8vw, 112px) 0;
  display: grid;
}

.scan-copy h2 {
  letter-spacing: -.055em;
  margin: 18px 0 24px;
  font-size: clamp(42px, 5vw, 72px);
  line-height: .96;
}

.scan-copy h2 span {
  color: #2f67ff;
}

.scan-copy > p {
  color: #687185;
  max-width: 520px;
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 1.65;
}

.scan-pill-row {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  display: flex;
}

.scan-pill-row span {
  background: #ffffff9e;
  border: 1px solid #2f67ff2e;
  border-radius: 999px;
  padding: 10px 15px;
  font-size: 13px;
}

.scan-panel {
  backdrop-filter: blur(22px);
  background: linear-gradient(135deg, #ffffffd1, #e8f1ffb8 55%, #f3ebffa8);
  border: 1px solid #ffffffe6;
  border-radius: 32px;
  padding: clamp(24px, 3vw, 38px);
  box-shadow: 0 28px 70px #2a519121;
}

.scan-form label {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #315078;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  display: block;
}

.scan-field {
  background: #ffffffd9;
  border: 1px solid #506c9b2e;
  border-radius: 19px;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 7px;
  display: grid;
}

.scan-field input {
  min-width: 0;
  font: inherit;
  color: #13233e;
  background: none;
  border: 0;
  outline: 0;
  padding: 0 15px;
}

.scan-field input::placeholder {
  color: #919aab;
}

.scan-field button {
  color: #fff;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(120deg, #2473ff, #7436ff);
  border: 0;
  border-radius: 14px;
  padding: 15px 20px;
  font-weight: 600;
}

.scan-field button:disabled {
  cursor: wait;
  opacity: .72;
}

.scan-status {
  color: #5d6c82;
  min-height: 23px;
  margin: 13px 3px 0;
  font-size: 13px;
}

.scan-status.is-error {
  color: #d44949;
}

.scan-progress {
  background: #2f67ff1f;
  border-radius: 999px;
  height: 4px;
  margin: 13px 3px 0;
  overflow: hidden;
}

.scan-progress i {
  border-radius: inherit;
  background: linear-gradient(90deg, #2875ff, #7a39ff);
  width: 38%;
  height: 100%;
  animation: 1.2s ease-in-out infinite scan-progress;
  display: block;
}

@keyframes scan-progress {
  from {
    transform: translateX(-110%);
  }

  to {
    transform: translateX(370%);
  }
}

.scan-results {
  margin-top: 24px;
}

.scan-score-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  display: grid;
}

.scan-score-grid article {
  background: #ffffffa8;
  border: 1px solid #ffffffd9;
  border-radius: 20px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.scan-score-grid article:after {
  content: "";
  width: var(--score, 0%);
  background: linear-gradient(90deg, #2b74ff, #7950ff);
  height: 4px;
  transition: width .7s;
  position: absolute;
  bottom: 0;
  left: 0;
}

.scan-score-grid span, .scan-score-grid small {
  color: #708097;
  font-size: 11px;
  display: block;
}

.scan-score-grid strong {
  letter-spacing: -.04em;
  color: #13233e;
  margin: 7px 0 2px;
  font-size: 34px;
  display: block;
}

.scan-advice {
  border-top: 1px solid #5d769e26;
  margin-top: 24px;
  padding-top: 21px;
}

.scan-advice h3 {
  margin: 0 0 13px;
  font-size: 19px;
}

.scan-advice ul {
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.scan-advice li {
  color: #53647b;
  padding-left: 24px;
  font-size: 13px;
  line-height: 1.5;
  position: relative;
}

.scan-advice li:before {
  content: "✓";
  color: #2f67ff;
  font-weight: 600;
  position: absolute;
  left: 0;
}

.scan-note {
  color: #8590a1;
  margin-top: 18px;
  font-size: 10px;
  line-height: 1.5;
}

@media (width <= 900px) {
  .website-scan {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .scan-copy > p {
    max-width: 620px;
  }
}

@media (width <= 600px) {
  .website-scan {
    padding: 58px 0;
  }

  .scan-copy h2 {
    font-size: 42px;
  }

  .scan-field {
    grid-template-columns: 1fr;
  }

  .scan-field input {
    min-height: 48px;
  }

  .scan-field button {
    width: 100%;
  }

  .scan-score-grid {
    grid-template-columns: 1fr;
  }

  .scan-score-grid article {
    grid-template-columns: 1fr auto;
    align-items: center;
    display: grid;
  }

  .scan-score-grid article strong {
    grid-area: 1 / 2 / 3;
  }

  .scan-score-grid article small {
    grid-column: 1;
  }

  .scan-score-grid article:after {
    width: 4px;
    height: var(--score, 0%);
  }
}

.website-problems {
  padding-top: calc(var(--section-space)*.68);
  padding-bottom: calc(var(--section-space)*.68);
}

.problem-head {
  grid-template-columns: 1.15fr .85fr;
  align-items: end;
  gap: 72px;
  margin-bottom: 30px;
  display: grid;
}

.problem-head h2 {
  letter-spacing: -3.8px;
  margin: 15px 0 0;
  font-size: clamp(42px, 5vw, 68px);
  line-height: .98;
}

.problem-head h2 span {
  color: var(--blue);
}

.problem-head > p {
  max-width: 500px;
  color: var(--muted);
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.75;
}

.problem-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  display: grid;
}

.problem-grid article {
  min-height: 172px;
  box-shadow: none;
  background: none;
  padding: 25px 26px 27px;
  position: relative;
}

.problem-grid article + article {
  border-left: 1px solid #cfdaeb;
}

.problem-grid article:after {
  display: none;
}

.problem-grid article > span {
  color: var(--blue);
  letter-spacing: 1.4px;
  font-size: 9px;
  font-weight: 600;
  display: block;
}

.problem-grid h3 {
  letter-spacing: -.7px;
  max-width: 210px;
  margin: 34px 0 11px;
  font-size: 20px;
  line-height: 1.12;
}

.problem-grid p {
  z-index: 1;
  color: #718096;
  margin: 0;
  font-size: 10.5px;
  line-height: 1.6;
  position: relative;
}

@media (width <= 900px) {
  .problem-head {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .problem-grid {
    grid-template-columns: 1fr 1fr;
  }

  .problem-grid article:nth-child(odd) {
    border-left: 0;
  }

  .problem-grid article:nth-child(2n) {
    border-left: 1px solid #cfdaeb;
  }

  .problem-grid article:nth-child(n+3) {
    border-top: 1px solid #cfdaeb;
  }
}

@media (width <= 600px) {
  .website-problems {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .problem-head h2 {
    letter-spacing: -2.5px;
    font-size: 40px;
  }

  .problem-head > p {
    font-size: 12px;
  }

  .problem-grid {
    grid-template-columns: 1fr;
  }

  .problem-grid article, .problem-grid article:nth-child(2n) {
    border-left: 0;
    min-height: 0;
    padding: 22px 0;
  }

  .problem-grid article + article {
    border-top: 1px solid #cfdaeb;
  }

  .problem-grid h3 {
    margin-top: 20px;
  }
}

.concepts-page main {
  overflow: hidden;
}

.concepts-page h1, .concepts-page h2, .concepts-page h3 {
  font-family: Manrope, sans-serif;
}

.concepts-page h1 span, .concepts-page h2 span {
  color: var(--blue);
}

.concept-hero-stage {
  perspective: 1300px;
  min-height: 530px;
  position: relative;
}

.concept-hero-stage:before {
  content: "";
  filter: blur(45px);
  background: linear-gradient(130deg, #5290ff47, #8654ff43);
  border-radius: 50%;
  position: absolute;
  inset: 5% 2%;
}

.concept-filters button.active, .branch-choices button.active {
  background: linear-gradient(120deg,var(--blue),var(--violet));
  color: #fff;
  border-color: #0000;
  box-shadow: 0 8px 22px #4255df28;
}

.concept-tile.is-hidden {
  display: none;
}

.business-options button.active {
  background: #fff;
  transform: translateX(8px);
  box-shadow: 0 18px 40px #243d7517;
}

.concepts-page .cta {
  margin-top: 30px;
}

@media (width <= 950px) {
  .concept-hero-stage {
    min-height: 500px;
  }
}

@media (width <= 650px) {
  .concepts-page .concept-hero.reveal {
    opacity: 1;
    transform: none;
  }

  .concept-hero-stage {
    min-height: 350px;
    margin-top: 10px;
  }

  .business-options button.active {
    transform: none;
  }
}

.concepts-page {
  background: #f8fafc;
}

.concepts-page main {
  background: radial-gradient(circle at 8% 13%, #e3efff 0, #0000 25%), radial-gradient(circle at 88% 28%, #eee5ff 0, #0000 27%), radial-gradient(circle at 14% 62%, #e8f3ff 0, #0000 24%), radial-gradient(circle at 88% 82%, #f0e8ff 0, #0000 25%), linear-gradient(#fbfcfe 0%, #f6f9fd 52%, #fbfcfe 100%);
}

.concepts-page main > section {
  background-color: #0000;
}

.concept-hero-stage {
  aspect-ratio: 1.16;
  isolation: isolate;
  width: 100%;
  min-height: 0;
  overflow: visible;
}

.concept-hero-stage:before {
  opacity: .72;
  filter: blur(55px);
  inset: 12% 8%;
}

@media (width <= 950px) {
  .concept-hero-stage {
    width: min(760px, 100%);
    min-height: 0;
    margin-inline: auto;
  }
}

@media (width <= 650px) {
  .concept-hero-stage {
    aspect-ratio: 1.08;
    min-height: 0;
    margin-top: 24px;
  }

  .concepts-page .concept-hero-stage {
    order: -1;
    margin: 0 0 28px;
  }
}

.services-page .page-hero {
  padding-bottom: 64px;
}

.services-page .page-hero h1 {
  letter-spacing: -4.8px;
  font-size: clamp(46px, 5.6vw, 77px);
}

.services-page .service-grid, .services-page .responsive-showcase, .services-page .service-detail, .services-page .included, .services-page .standard-included, .services-page .faq {
  padding-top: 56px;
  padding-bottom: 56px;
}

.services-page .cta {
  margin-top: 56px;
  margin-bottom: 56px;
}

@media (width <= 900px) {
  .services-page .page-hero {
    padding-bottom: 56px;
  }

  .services-page .service-grid, .services-page .responsive-showcase, .services-page .service-detail, .services-page .included, .services-page .standard-included, .services-page .faq {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .services-page .cta {
    margin-top: 48px;
    margin-bottom: 48px;
  }
}

@media (width <= 600px) {
  .services-page .page-hero {
    padding-bottom: 44px;
  }

  .services-page .page-hero h1 {
    letter-spacing: -2.8px;
    font-size: 38px;
  }

  .services-page .service-grid, .services-page .responsive-showcase, .services-page .service-detail, .services-page .included, .services-page .standard-included, .services-page .faq {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .services-page .cta {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}

.faq {
  padding: 48px 0 78px;
  max-width: 1200px !important;
}

.faq-head {
  grid-template-columns: 1.25fr .75fr;
  align-items: end;
  gap: 60px;
  margin-bottom: 22px;
  display: grid;
}

.faq-head h2 {
  letter-spacing: -2.5px;
  margin: 10px 0 0;
  font: 600 clamp(38px, 4.25vw, 56px) / 1 Poppins, Manrope, sans-serif;
}

.faq-head h2 span {
  color: var(--blue);
}

.faq-head > p {
  max-width: 430px;
  color: var(--muted);
  margin: 0 0 3px;
  font-size: 15px;
  line-height: 1.55;
}

.faq-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 9px;
  display: grid;
}

.faq-column {
  align-content: start;
  gap: 9px;
  display: grid;
}

.faq details {
  background: linear-gradient(135deg, #ffffffeb, #f7f9ffbd);
  border: 1px solid #fffffff0;
  border-radius: 18px;
  padding: 0 20px;
  transition: box-shadow .25s, transform .25s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px #31508c10, inset 0 0 0 1px #709aff17;
}

.faq details[open] {
  box-shadow: 0 18px 48px #31508c1f, inset 0 0 0 1px #2c68ff29;
}

.faq summary {
  box-sizing: border-box;
  cursor: pointer;
  align-items: center;
  height: 74px;
  padding: 12px 48px 12px 0;
  font: 600 14px / 1.35 Poppins, Manrope, sans-serif;
  list-style: none;
  display: flex;
  position: relative;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:after {
  content: "+";
  width: 30px;
  height: 30px;
  color: var(--blue);
  background: #e4edffe6;
  border-radius: 50%;
  place-items: center;
  font: 400 20px / 1 Poppins, sans-serif;
  transition: transform .25s, color .25s, background .25s;
  display: grid;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.faq details[open] summary:after {
  color: #fff;
  background: linear-gradient(135deg, #176eff, #7444ff);
  transform: translateY(-50%) rotate(45deg);
}

.faq details p {
  max-width: 690px;
  color: var(--muted);
  margin: -1px 40px 17px 0;
  font-size: 12.5px;
  line-height: 1.65;
}

.faq details:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle, #5972ff1f, #0000 68%);
  border-radius: 50%;
  width: 140px;
  height: 140px;
  position: absolute;
  bottom: -70px;
  right: -45px;
}

.faq-contact {
  box-sizing: border-box;
  color: #fff;
  background: linear-gradient(135deg, #126fff, #6c3cff);
  border-radius: 18px;
  flex-direction: column;
  justify-content: center;
  height: 157px;
  padding: 20px 150px 20px 28px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 42px #315acb35;
}

.faq-contact:after {
  content: "?";
  color: #ffffff24;
  font: 600 138px / 1 Poppins, sans-serif;
  position: absolute;
  bottom: -37px;
  right: 24px;
}

.faq-contact span {
  letter-spacing: 1.6px;
  font-size: 9px;
  font-weight: 600;
}

.faq-contact h3 {
  margin: 6px 0 9px;
  font-size: 19px;
  line-height: 1.15;
}

.faq-contact p {
  color: #ffffffe0;
  max-width: 440px;
  margin: 0 0 4px;
  font-size: 11.5px;
  line-height: 1.4;
}

.faq-contact a {
  z-index: 1;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  position: relative;
}

.faq-contact a b {
  margin-left: 5px;
  font-weight: 400;
}

@media (width <= 760px) {
  .faq {
    padding: 44px 20px 64px;
  }

  .faq-head {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 20px;
  }

  .faq-head h2 {
    letter-spacing: -2px;
    font-size: 38px;
  }

  .faq-head > p {
    font-size: 14px;
  }

  .faq-list {
    grid-template-columns: 1fr;
  }

  .faq summary {
    height: auto;
    min-height: 62px;
    font-size: 14px;
  }

  .faq details p {
    margin-right: 20px;
  }

  .faq-contact {
    height: auto;
    min-height: 157px;
    padding-right: 90px;
  }
}

.service-grid {
  grid-template-rows: repeat(2, 210px);
  grid-template-columns: repeat(18, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  padding-top: 48px;
  padding-bottom: 66px;
  position: relative;
}

.service-grid:before {
  display: none;
}

.service-grid-intro {
  grid-area: 1 / 1 / 3 / 6;
  align-self: center;
  padding: 0 42px 0 4px;
}

.service-grid-intro h2 {
  letter-spacing: -2px;
  margin: 17px 0 18px;
  font-size: clamp(30px, 2.8vw, 40px);
  line-height: 1.04;
}

.service-grid-intro h2 span {
  color: var(--blue);
}

.service-grid-intro > p:last-child {
  max-width: 300px;
  color: var(--muted);
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
}

.service-grid article:not(.hosting-service) {
  border-radius: 22px;
  min-height: 0;
  padding: 22px;
}

.service-grid article:first-of-type {
  grid-area: 1 / 6 / 3 / 11;
  padding: 25px;
}

.service-grid article:nth-of-type(2) {
  grid-area: 1 / 11 / auto / 15;
}

.service-grid article:nth-of-type(3) {
  grid-area: 1 / 15 / auto / 19;
}

.service-grid article:nth-of-type(4) {
  grid-area: 2 / 11 / auto / 19;
  padding: 24px;
}

.service-grid article:nth-of-type(2n) {
  transform: none;
}

.service-grid article:not(.hosting-service) > b {
  border-radius: 13px;
  width: 40px;
  height: 40px;
  font-size: 17px;
  top: 19px;
  right: 20px;
}

.service-grid article:not(.hosting-service) h2 {
  letter-spacing: -.6px;
  margin: 52px 0 10px;
  font-size: 18px;
  line-height: 1.16;
}

.service-grid article:first-of-type h2 {
  margin-top: 76px;
  font-size: 21px;
}

.service-grid article:nth-of-type(4) h2 {
  margin-top: 46px;
  font-size: 20px;
}

.service-grid article:not(.hosting-service) p {
  max-width: 100%;
  margin: 0;
  font-size: 10.5px;
  line-height: 1.62;
}

.service-grid article:not(.hosting-service) ul {
  gap: 8px;
  margin-top: 13px;
  padding-top: 11px;
  display: flex;
}

.service-grid article:first-of-type ul {
  display: grid;
}

.service-grid article:nth-of-type(2) ul, .service-grid article:nth-of-type(3) ul {
  display: none;
}

.service-grid article:nth-of-type(4) ul {
  margin-top: 15px;
}

.service-grid article:not(.hosting-service) li {
  background: none;
  padding: 0;
  font-size: 8px;
  line-height: 1.4;
}

@media (width <= 1000px) {
  .service-grid {
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .service-grid-intro {
    grid-area: auto / 1 / auto / -1;
    padding: 0 0 25px;
  }

  .service-grid-intro > p:last-child {
    max-width: 620px;
  }

  .service-grid article:nth-of-type(n) {
    grid-area: auto;
    min-height: 235px;
  }

  .service-grid article:not(.hosting-service) ul {
    display: grid;
  }
}

@media (width <= 600px) {
  .service-grid {
    grid-template-columns: 1fr;
  }

  .service-grid article:nth-of-type(n) {
    min-height: 225px;
  }
}

.feature-tile[open] {
  background: linear-gradient(145deg, #fafdff, #e8efff);
  box-shadow: inset 0 1px #fff, 0 24px 55px #29457b17;
}

.feature-tile[open] summary {
  min-height: 130px;
}

.feature-tile[open] summary > i {
  color: #fff;
  background: linear-gradient(135deg, #176eff, #7444ff);
  transform: rotate(45deg);
}

.responsive-showcase {
  grid-template-columns: minmax(0, 58%) minmax(0, 42%);
  align-items: center;
  gap: 28px;
  padding: 92px 0;
  display: grid;
}

.responsive-copy h2 {
  letter-spacing: -3px;
  margin: 18px 0 22px;
  font-size: clamp(34px, 3.84vw, 51px);
  line-height: 1.02;
}

.responsive-copy h2 span {
  color: var(--blue);
}

.responsive-copy > p:not(.kicker) {
  max-width: 430px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.72;
}

.responsive-copy > div {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  display: flex;
}

.responsive-copy > div span {
  color: #44536a;
  background: #ffffffa8;
  border: 1px solid #dce5f6;
  border-radius: 100px;
  padding: 8px 11px;
  font-size: 10px;
}

.device-stage {
  place-items: center;
  min-height: 540px;
  display: grid;
  position: relative;
}

.device-stage img {
  filter: drop-shadow(0 28px 42px #20345b25);
  width: 96%;
  max-width: none;
  display: block;
}

@media (width <= 1000px) {
  .responsive-showcase {
    grid-template-columns: 1fr;
    padding: 76px 0;
  }

  .responsive-copy > p:not(.kicker) {
    max-width: 650px;
  }

  .device-stage {
    width: 100%;
    max-width: 760px;
    min-height: 0;
    margin: auto;
  }

  .device-stage img {
    width: 100%;
  }
}

@media (width <= 650px) {
  .responsive-showcase {
    padding: 60px 0;
  }

  .responsive-copy h2 {
    letter-spacing: -2px;
    font-size: 32px;
  }

  .device-stage {
    margin-top: 20px;
  }
}

.services-page .responsive-showcase {
  padding-top: 24px !important;
}

.services-page .responsive-showcase .device-stage {
  min-height: 470px;
}

.services-page .responsive-showcase .device-stage img {
  transform: translateY(-46px);
}

.services-page .included {
  grid-template-columns: 1fr;
  gap: 44px;
  padding-top: 72px;
  padding-bottom: 82px;
  display: grid;
}

.services-page .included > div:first-child {
  justify-content: space-between;
  align-items: end;
  gap: 50px;
  display: flex;
}

.services-page .included > div:first-child h2 {
  max-width: 720px;
  margin-bottom: 0;
}

.services-page .included-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  display: grid;
  position: relative;
}

.services-page .included-grid:before {
  content: "";
  background: linear-gradient(90deg, #2864ff22, #2864ff, #7548ff, #7548ff22);
  height: 1px;
  position: absolute;
  top: 24px;
  left: 5%;
  right: 5%;
}

.services-page .included-grid article {
  min-width: 0;
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 62px 28px 0 0;
  position: relative;
}

.services-page .included-grid article + article {
  padding-left: 28px;
}

.services-page .included-grid b {
  z-index: 1;
  color: #2864ff;
  background: linear-gradient(145deg, #e5edff, #f2eaff);
  border: 1px solid #fff;
  border-radius: 16px;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 13px;
  font-weight: 600;
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 14px 32px #29487715;
}

.services-page .included-grid article + article b {
  left: 28px;
}

.services-page .included-grid h3 {
  color: #192e4c;
  margin: 0 0 12px;
  font-family: Poppins, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.services-page .included-grid p {
  color: #718198;
  max-width: 240px;
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
}

@media (width <= 900px) {
  .services-page .responsive-showcase .device-stage {
    min-height: 0;
  }

  .services-page .responsive-showcase .device-stage img {
    transform: none;
  }

  .services-page .included > div:first-child {
    display: block;
  }

  .services-page .included-grid {
    grid-template-columns: 1fr 1fr;
    gap: 42px 26px;
  }

  .services-page .included-grid:before {
    display: none;
  }

  .services-page .included-grid article, .services-page .included-grid article + article {
    padding: 58px 0 0;
  }

  .services-page .included-grid article + article b {
    left: 0;
  }
}

@media (width <= 600px) {
  .services-page .included-grid {
    grid-template-columns: 1fr;
  }

  .services-page .included {
    gap: 32px;
    padding-top: 52px;
    padding-bottom: 60px;
  }
}

.services-page .route-explorer {
  padding-top: 84px;
  padding-bottom: 96px;
  display: block;
}

.services-page .route-explorer > .route-explorer-head {
  grid-template-columns: 1.08fr .92fr;
  align-items: end;
  gap: clamp(50px, 8vw, 120px);
  margin-bottom: 54px;
  display: grid;
}

.route-explorer-head h2 {
  letter-spacing: -.055em;
  margin: 14px 0 0;
  font-family: Poppins, sans-serif;
  font-size: clamp(38px, 4.4vw, 62px);
  font-weight: 600;
  line-height: 1.02;
}

.route-explorer-head h2 span {
  color: #2864ff;
}

.route-explorer-head > p {
  color: #718198;
  max-width: 500px;
  margin: 0 0 7px;
  font-size: 14px;
  line-height: 1.75;
}

.route-explorer-body {
  background: linear-gradient(135deg, #f8fbffdd, #edf4ffca 52%, #f2edffcc);
  border: 1px solid #fff;
  border-radius: 34px;
  grid-template-columns: .72fr 1.28fr;
  min-height: 490px;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: 0 28px 75px #29487714;
}

.route-explorer-body:before {
  content: "";
  pointer-events: none;
  background-image: linear-gradient(#2864ff0b 1px, #0000 1px), linear-gradient(90deg, #2864ff0b 1px, #0000 1px);
  background-size: 46px 46px;
  position: absolute;
  inset: 0;
  mask-image: linear-gradient(90deg, #000, #0000 58%);
}

.route-compass {
  place-items: center;
  min-width: 0;
  display: grid;
  position: relative;
}

.route-compass:after {
  content: "";
  filter: blur(8px);
  background: radial-gradient(circle, #2864ff19 0, #7548ff0c 44%, #0000 70%);
  border-radius: 50%;
  width: 340px;
  height: 340px;
  position: absolute;
}

.route-compass-ring {
  border: 1px solid #2864ff25;
  border-radius: 50%;
  position: absolute;
}

.route-compass-ring-one {
  width: 310px;
  height: 310px;
}

.route-compass-ring-two {
  border-style: dashed;
  width: 220px;
  height: 220px;
  animation: 24s linear infinite route-ring-spin;
}

.route-compass-core {
  z-index: 2;
  color: #fff;
  background: linear-gradient(145deg, #2864ff, #7548ff);
  border-radius: 48px;
  place-items: center;
  width: 154px;
  height: 154px;
  display: grid;
  position: relative;
  transform: rotate(-4deg);
  box-shadow: 0 28px 58px #4058be3a;
}

.route-compass-core small {
  letter-spacing: .18em;
  font-size: 8px;
  font-weight: 600;
}

.route-compass-core strong {
  letter-spacing: -.04em;
  margin: -18px 0;
  font-size: 25px;
  font-weight: 600;
}

.route-compass-core span {
  border: 1px solid #fff6;
  border-radius: 11px;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 14px;
  display: grid;
}

.route-compass-node {
  z-index: 2;
  background: #2864ff;
  border: 3px solid #edf3ff;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  position: absolute;
  box-shadow: 0 0 0 5px #2864ff13;
}

.route-compass-node-one {
  top: 18%;
  left: 50%;
}

.route-compass-node-two {
  background: #7548ff;
  bottom: 33%;
  right: 13%;
}

.route-compass-node-three {
  background: #ff715e;
  bottom: 23%;
  left: 17%;
}

.route-list {
  z-index: 2;
  align-content: center;
  padding: 32px clamp(28px, 4vw, 58px) 32px 0;
  display: grid;
  position: relative;
}

.route-row {
  border-bottom: 1px solid #dce5f1;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 25px 0;
  display: grid;
}

.route-row > b {
  color: #2864ff;
  background: #fffa;
  border: 1px solid #fff;
  border-radius: 15px;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 11px;
  font-weight: 600;
  display: grid;
  box-shadow: 0 12px 28px #29487710;
}

.route-row > div > span {
  color: #2864ff;
  letter-spacing: .14em;
  font-size: 9px;
  font-weight: 600;
}

.route-row h3 {
  color: #192e4c;
  margin: 5px 0;
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 600;
}

.route-row p {
  color: #718198;
  max-width: 430px;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.route-row > strong {
  color: #192e4c;
  text-align: right;
  white-space: nowrap;
  min-width: 125px;
  font-size: 20px;
  font-weight: 500;
}

.route-row > strong small {
  color: #8694a7;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 5px;
  font-size: 8px;
  font-weight: 500;
  display: block;
}

.route-assurance {
  align-items: center;
  gap: 13px;
  padding-top: 22px;
  display: flex;
}

.route-assurance > span {
  color: #2864ff;
  background: #e5edff;
  border-radius: 10px;
  flex: 0 0 30px;
  place-items: center;
  height: 30px;
  font-size: 12px;
  display: grid;
}

.route-assurance p {
  color: #718198;
  margin: 0;
  font-size: 11px;
}

.route-assurance p strong {
  color: #314863;
  font-weight: 600;
}

@keyframes route-ring-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-compass-ring-two {
    animation: none;
  }
}

@media (width <= 900px) {
  .services-page .route-explorer > .route-explorer-head {
    grid-template-columns: 1fr;
    gap: 22px;
    display: grid;
  }

  .route-explorer-body {
    grid-template-columns: 1fr;
  }

  .route-compass {
    min-height: 330px;
  }

  .route-list {
    padding: 0 28px 34px;
  }

  .route-explorer-body:before {
    mask-image: linear-gradient(#000, #0000 48%);
  }
}

@media (width <= 600px) {
  .services-page .route-explorer {
    padding-top: 58px;
    padding-bottom: 68px;
  }

  .services-page .route-explorer > .route-explorer-head {
    margin-bottom: 34px;
  }

  .route-explorer-body {
    border-radius: 26px;
  }

  .route-compass {
    min-height: 285px;
  }

  .route-compass-ring-one {
    width: 250px;
    height: 250px;
  }

  .route-compass-ring-two {
    width: 180px;
    height: 180px;
  }

  .route-compass-core {
    border-radius: 40px;
    width: 130px;
    height: 130px;
  }

  .route-row {
    grid-template-columns: 42px 1fr;
    gap: 15px;
  }

  .route-row > b {
    width: 40px;
    height: 40px;
  }

  .route-row > strong {
    text-align: left;
    grid-column: 2;
    min-width: 0;
  }

  .route-list {
    padding: 0 21px 28px;
  }
}

.service-detail {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 68px;
  padding: 76px 0;
  scroll-margin-top: 120px;
  display: grid;
}

.service-detail-copy h2 {
  letter-spacing: -2.8px;
  margin: 17px 0 22px;
  font-size: clamp(37px, 4vw, 54px);
  line-height: 1.02;
}

.service-detail-copy h2 span {
  color: var(--blue);
}

.service-detail-copy > p:not(.kicker) {
  max-width: 570px;
  color: var(--muted);
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
}

.service-detail-points {
  gap: 9px;
  margin-top: 26px;
  display: grid;
}

.service-detail-points article {
  background: #ffffffa5;
  border: 1px solid #fff;
  border-radius: 17px;
  padding: 14px 16px;
  box-shadow: inset 0 1px #fff, 0 10px 26px #29457b0b;
}

.service-detail-points b, .service-detail-points span {
  display: block;
}

.service-detail-points b {
  color: #22334b;
  font-size: 11px;
}

.service-detail-points span {
  color: #748196;
  margin-top: 4px;
  font-size: 9.5px;
  line-height: 1.55;
}

.service-detail-copy > .button {
  margin-top: 22px;
  padding: 13px 16px;
  font-size: 10px;
}

.service-detail-visual {
  background: radial-gradient(circle at 72% 22%, #fff 0 7%, #0000 32%), linear-gradient(145deg, #deebff, #e9e2ff);
  border: 1px solid #fff;
  border-radius: 38px;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 410px;
  padding: 48px;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: perspective(900px) rotateY(-4deg) rotateX(2deg);
  box-shadow: inset 0 1px #fff, 0 28px 70px #29457b18;
}

.service-detail-visual > span {
  background: linear-gradient(145deg,var(--blue),var(--violet));
  color: #fff;
  border-radius: 38px;
  place-items: center;
  width: 145px;
  height: 145px;
  font-size: 54px;
  font-weight: 600;
  display: grid;
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-7deg);
  box-shadow: 24px 30px 55px #4b51ca3c, inset 3px 3px 8px #ffffff6e;
}

.service-detail-visual strong {
  z-index: 2;
  color: #20314a;
  font-size: 27px;
  position: relative;
}

.service-detail-visual small {
  z-index: 2;
  color: #6c7890;
  letter-spacing: .5px;
  margin-top: 5px;
  font-size: 9px;
  position: relative;
}

.service-detail-visual i {
  opacity: .55;
  border: 1px solid #ffffffa6;
  border-radius: 50%;
  position: absolute;
}

.service-detail-visual i:first-of-type {
  width: 240px;
  height: 240px;
  top: -70px;
  right: -75px;
}

.service-detail-visual i:nth-of-type(2) {
  width: 130px;
  height: 130px;
  bottom: 44px;
  left: -36px;
}

.service-detail-visual i:nth-of-type(3) {
  background: var(--coral);
  opacity: .85;
  border: 0;
  width: 48px;
  height: 48px;
  bottom: 36px;
  right: 34px;
}

.development-detail .service-detail-visual {
  background: radial-gradient(circle at 28% 18%, #fff 0 7%, #0000 31%), linear-gradient(145deg, #eee7ff, #dce9ff);
  transform: perspective(900px) rotateY(4deg) rotateX(2deg);
}

.development-detail .service-detail-visual > span {
  font-size: 35px;
  transform: translate(-50%, -50%) rotate(6deg);
}

.hosting-detail .service-detail-visual {
  background: radial-gradient(circle at 70% 20%, #fff 0 8%, #0000 33%), linear-gradient(145deg, #e3f2ff, #e8e5ff);
}

.hosting-detail .service-detail-visual > span {
  background: linear-gradient(145deg, #278cff, #6657ee);
}

@media (width <= 900px) {
  .service-detail {
    grid-template-columns: 1fr;
    gap: 35px;
    padding: 62px 0;
  }

  .development-detail .service-detail-visual {
    order: 2;
  }

  .service-detail-visual {
    min-height: 340px;
    transform: none !important;
  }

  .service-detail-copy > p:not(.kicker) {
    max-width: 680px;
  }
}

@media (width <= 600px) {
  .service-detail {
    gap: 28px;
    padding: 52px 0;
  }

  .service-detail-copy h2 {
    letter-spacing: -2px;
    font-size: 35px;
  }

  .service-detail-visual {
    border-radius: 28px;
    min-height: 285px;
    padding: 30px;
  }

  .service-detail-visual > span {
    border-radius: 31px;
    width: 112px;
    height: 112px;
    font-size: 43px;
  }

  .development-detail .service-detail-visual > span {
    font-size: 28px;
  }
}

.standard-included {
  padding: 30px 0 105px;
}

.standard-included-head {
  grid-template-columns: 1.12fr .88fr;
  align-items: end;
  column-gap: 64px;
  margin-bottom: 34px;
  display: grid;
}

.standard-included-head > .kicker {
  grid-area: 1 / 1;
  margin: 0 0 14px;
}

.standard-included-head h2 {
  letter-spacing: -2.8px;
  grid-area: 2 / 1;
  margin: 0;
  font-size: clamp(37px, 4vw, 53px);
  line-height: 1.02;
}

.standard-included-head h2 span {
  color: var(--blue);
}

.standard-included-head > p:last-child {
  max-width: 430px;
  color: var(--muted);
  grid-area: 1 / 2 / 3;
  margin: 0 0 5px;
  font-size: 13px;
  line-height: 1.7;
}

.standard-included-grid {
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  display: grid;
}

.standard-included-grid > article {
  background: linear-gradient(145deg, #ffffffdf, #edf3ffc4);
  border: 1px solid #fff;
  border-radius: 28px;
  padding: 28px;
  box-shadow: inset 0 1px #fff, 0 22px 58px #29457b12;
}

.standard-included-grid > .hosting-included {
  background: linear-gradient(145deg, #ffffffdf, #eee8ffc9);
}

.standard-card-head {
  border-bottom: 1px solid #dfe6f1;
  align-items: center;
  gap: 16px;
  padding-bottom: 22px;
  display: flex;
}

.standard-card-head i {
  background: linear-gradient(145deg,var(--blue),var(--violet));
  color: #fff;
  border-radius: 17px;
  flex: 0 0 52px;
  place-items: center;
  width: 52px;
  height: 52px;
  font-size: 22px;
  font-style: normal;
  display: grid;
  box-shadow: 9px 13px 26px #4c54d52d, inset 2px 2px 5px #ffffff6b;
}

.hosting-included .standard-card-head i {
  background: linear-gradient(145deg, #218cff, #6759ed);
}

.standard-card-head span {
  letter-spacing: 1.5px;
  color: var(--blue);
  font-size: 8px;
  font-weight: 600;
}

.standard-card-head h3 {
  letter-spacing: -.7px;
  margin: 6px 0 0;
  font-size: 21px;
}

.standard-included ul {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.hosting-included ul {
  grid-template-columns: 1fr;
}

.standard-included li {
  background: #ffffff96;
  border: 1px solid #fff;
  border-radius: 15px;
  padding: 14px 14px 14px 40px;
  position: relative;
}

.standard-included li:before {
  content: "✓";
  width: 17px;
  height: 17px;
  color: var(--blue);
  background: #e4ecff;
  border-radius: 50%;
  place-items: center;
  font-size: 8px;
  font-weight: 600;
  display: grid;
  position: absolute;
  top: 15px;
  left: 14px;
}

.standard-included li b, .standard-included li span {
  display: block;
}

.standard-included li b {
  color: #26374f;
  font-size: 11px;
}

.standard-included li span {
  color: #788699;
  margin-top: 4px;
  font-size: 9.5px;
  line-height: 1.5;
}

.standard-note {
  background: linear-gradient(120deg, #ffffffad, #e8efffb8);
  border: 1px solid #fff;
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  margin: 14px 0 0;
  padding: 15px 17px;
  display: flex;
}

.standard-note b {
  color: #26374f;
  font-size: 10px;
}

.standard-note span {
  color: #718096;
  max-width: 340px;
  font-size: 9px;
  line-height: 1.5;
}

.hosting-included > a {
  color: var(--blue);
  margin-top: 18px;
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
}

.hosting-included > a span {
  margin-left: 7px;
}

@media (width <= 900px) {
  .standard-included {
    padding-bottom: 82px;
  }

  .standard-included-head, .standard-included-grid {
    grid-template-columns: 1fr;
  }

  .standard-included-head > .kicker, .standard-included-head h2, .standard-included-head > p:last-child {
    grid-area: auto / 1;
  }

  .standard-included-head > p:last-child {
    max-width: 620px;
    margin: 18px 0 0;
  }

  .hosting-included ul {
    grid-template-columns: 1fr 1fr;
  }
}

@media (width <= 600px) {
  .standard-included {
    padding: 20px 0 65px;
  }

  .standard-included-head {
    gap: 0;
  }

  .standard-included-head h2 {
    letter-spacing: -2px;
    font-size: 36px;
  }

  .standard-included-grid > article {
    border-radius: 23px;
    padding: 21px;
  }

  .standard-included ul, .hosting-included ul {
    grid-template-columns: 1fr;
  }

  .standard-note {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .hero .hero-visual {
    display: none;
  }
}

.hero-visual img {
  filter: drop-shadow(0 38px 52px #3848a43d);
  width: 134.2%;
}

.hero-visual:before {
  content: "";
  filter: blur(72px);
  pointer-events: none;
  background: linear-gradient(120deg, #3478ff2b 5%, #5963ff25 48%, #8a43ff22 78%, #a34cff1b 100%);
  border-radius: 50%;
  width: 98%;
  height: 78%;
  position: absolute;
  transform: translate(4%, 3%);
}

.orb-one {
  filter: blur(66px);
  background: linear-gradient(145deg, #2864ff29, #7137ff23);
}

.orb-two {
  filter: blur(62px);
  background: linear-gradient(145deg, #684cff20, #a34cff1b);
}

@media (width <= 900px) and (width >= 601px) {
  .hero-visual img {
    width: 121%;
  }

  .hero-visual:before {
    width: 82%;
    height: 68%;
  }
}

.hero-actions .text-link {
  align-items: center;
  display: inline-flex;
}

.hero-actions .text-link i {
  order: 2;
  margin-left: 9px;
  margin-right: 0;
}

.timeline .day:before {
  top: -36px;
}

.timeline .day.active {
  transform: none;
}

.timeline .day:before {
  transform-origin: center;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), background .45s, box-shadow .55s;
  transform: translateX(-50%) scale(1);
}

.timeline .day.active:before {
  transform: translateX(-50%) scale(1.16);
}

.process .timeline-detail {
  margin-left: 0;
  margin-right: auto;
}

@media (width <= 600px) {
  .process .timeline-detail {
    margin-left: 0;
    margin-right: 0;
  }
}

.usp-strip {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 10px 0 18px;
  display: grid;
}

.usp-strip article {
  backdrop-filter: blur(16px) saturate(140%);
  background: linear-gradient(145deg, #ffffffdb, #edf3ffc2);
  border: 1px solid #fff;
  border-radius: 22px;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 18px;
  min-height: 150px;
  padding: 22px;
  display: grid;
  box-shadow: inset 0 1px #fff, 0 16px 38px #29457b10;
}

.usp-strip article:nth-child(2) {
  background: linear-gradient(145deg, #fffd, #eee9ffc7);
}

.usp-strip article:nth-child(3) {
  background: linear-gradient(145deg, #fffd, #e8f3ffc7);
}

.usp-strip span {
  letter-spacing: 1.4px;
  color: var(--blue);
  font-size: 7px;
  font-weight: 600;
}

.usp-strip h2 {
  letter-spacing: -.6px;
  margin: 6px 0;
  font: 600 20px / 1.1 Manrope;
}

.usp-strip p {
  color: #667287;
  max-width: 235px;
  margin: 0;
  font-size: 10.5px;
  line-height: 1.55;
}

.usp-icon {
  background: linear-gradient(145deg, #fff, #cbd9ff);
  border-radius: 20px;
  place-items: center;
  width: 68px;
  height: 68px;
  display: grid;
  position: relative;
  transform: rotate(-7deg);
  box-shadow: 10px 14px 25px #344e8b28, inset 4px 4px 8px #fff, inset -5px -6px 12px #5574c82a;
}

.usp-icon:before {
  content: "";
  border: 1px solid #ffffffab;
  border-radius: 15px;
  position: absolute;
  inset: 7px;
}

.usp-icon i {
  color: #315eff;
  text-shadow: 0 5px 12px #315eff42;
  font: 600 25px Manrope;
  position: relative;
}

.dev-icon {
  background: linear-gradient(145deg, #f8f6ff, #d4c9ff);
  transform: rotate(6deg);
  box-shadow: 10px 14px 25px #543a9d26, inset 4px 4px 8px #fff, inset -5px -6px 12px #744cd52c;
}

.dev-icon i {
  color: #7137ff;
  font-size: 17px;
}

.host-icon {
  background: linear-gradient(145deg, #fff, #c9e5ff);
  transform: rotate(-4deg);
  box-shadow: 10px 14px 25px #2864a826, inset 4px 4px 8px #fff, inset -5px -6px 12px #388cd52a;
}

.host-icon i {
  color: #2581d8;
  font-size: 29px;
}

.usp-strip article {
  transition: transform .3s, box-shadow .3s;
}

.usp-strip article:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 1px #fff, 0 22px 44px #29457b18;
}

@media (width <= 900px) {
  .usp-strip {
    grid-template-columns: 1fr;
  }

  .usp-strip article {
    min-height: 125px;
  }

  .usp-strip p {
    max-width: none;
  }
}

@media (width <= 600px) {
  .usp-strip {
    gap: 10px;
    padding: 4px 0 12px;
  }

  .usp-strip article {
    border-radius: 18px;
    grid-template-columns: 62px 1fr;
    min-height: 112px;
    padding: 17px;
  }

  .usp-icon {
    border-radius: 17px;
    width: 56px;
    height: 56px;
  }

  .usp-strip h2 {
    font-size: 18px;
  }

  .usp-strip p {
    font-size: 10px;
  }
}

body {
  background: #f7f8f7;
}

.usp-link {
  color: inherit;
  border-radius: 22px;
  text-decoration: none;
  display: block;
}

.usp-link article {
  height: 100%;
}

.usp-link:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

.usp-link article > div:last-child:after {
  content: "Ontdek meer  >";
  color: var(--blue);
  letter-spacing: .15px;
  margin-top: 11px;
  font-size: 8px;
  font-weight: 600;
  transition: transform .2s;
  display: block;
}

.usp-link:hover article > div:last-child:after {
  transform: translateX(3px);
}

body:not(.process-page) main > .hero {
  min-height: max(820px, 100svh);
  margin-bottom: clamp(120px, 15vh, 190px);
}

body:not(.process-page) main > .home-usp-reveal {
  opacity: 0;
  margin-bottom: clamp(100px, 10vw, 160px);
  transition: opacity .8s cubic-bezier(.2, .75, .2, 1), transform .8s cubic-bezier(.2, .75, .2, 1);
  transform: translateY(48px);
}

body:not(.process-page) main > .home-usp-reveal.visible {
  opacity: 1;
  transform: none;
}

body:not(.process-page) main > .home-usp-reveal .usp-link {
  opacity: 0;
  transition: opacity .55s, transform .7s cubic-bezier(.2, .75, .2, 1);
  transform: translateY(28px);
}

body:not(.process-page) main > .home-usp-reveal.visible .usp-link {
  opacity: 1;
  transform: none;
}

body:not(.process-page) main > .home-usp-reveal.visible .usp-link:nth-child(2) {
  transition-delay: .1s;
}

body:not(.process-page) main > .home-usp-reveal.visible .usp-link:nth-child(3) {
  transition-delay: .2s;
}

.usp-strip.home-usp-reveal {
  display: block;
}

.usp-section-heading {
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr);
  align-items: end;
  gap: clamp(42px, 7vw, 100px);
  margin-bottom: clamp(36px, 5vw, 62px);
  display: grid;
}

.usp-section-heading span {
  color: #2d67ff;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 14px;
  font-size: 10px;
  font-weight: 600;
  display: block;
}

.usp-section-heading h2 {
  color: #122945;
  letter-spacing: -.055em;
  margin: 0;
  font-size: clamp(50px, 6vw, 82px);
  line-height: .98;
}

.usp-section-heading h2 em {
  color: #2d67ff;
  font-style: normal;
}

.usp-section-heading > p {
  color: #71819a;
  margin: 0 0 5px;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.65;
}

.usp-card-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  display: grid;
}

.usp-strip .usp-card-grid h3 {
  letter-spacing: -.6px;
  margin: 6px 0;
  font: 600 20px / 1.1 Manrope;
}

@media (width <= 900px) {
  .usp-section-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .usp-card-grid {
    grid-template-columns: 1fr;
  }

  body:not(.process-page) main > .hero {
    min-height: max(780px, 100svh);
    margin-bottom: 100px;
  }

  body:not(.process-page) main > .home-usp-reveal {
    margin-bottom: 100px;
  }
}

@media (width <= 600px) {
  body:not(.process-page) main > .hero {
    min-height: max(760px, 100svh);
    margin-bottom: 82px;
  }

  body:not(.process-page) main > .home-usp-reveal {
    margin-bottom: 82px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.process-page) main > .home-usp-reveal, body:not(.process-page) main > .home-usp-reveal .usp-link {
    transition: none;
    transform: none;
  }
}

.button span, .nav-cta span {
  font-family: Poppins, sans-serif;
  font-weight: 400;
  line-height: 1;
}

@font-face {
  font-family: Poppins;
  src: url("../assets/fonts/poppins-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Poppins;
  src: url("../assets/fonts/poppins-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body, body * {
  font-family: Poppins, sans-serif !important;
}

.nav-cta, .sector-browser button, .cta .light-button {
  box-shadow: 0 12px 28px #4d54db2e;
  background: linear-gradient(120deg,var(--blue),var(--violet)) !important;
  color: #fff !important;
  border-color: #0000 !important;
}

.nav-cta span {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3Cpath d='M8 14h2M14 14h2M8 17.5h2M14 17.5h2'/%3E%3C/svg%3E") center / contain no-repeat;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin: 0;
  font-size: 0;
  display: inline-block;
}

.nav-cta {
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  line-height: 1;
  display: inline-flex;
}

:root {
  --section-space: 88px;
  --section-title: clamp(44px,5vw,66px);
  --section-copy: 15px;
  --section-head-gap: 42px;
}

.process, .pricing {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

.process .section-head h2, .pricing .section-head h2 {
  font-size: var(--section-title);
  letter-spacing: -3.2px;
  line-height: 1.02;
}

.process .section-head, .pricing .section-head {
  margin-bottom: var(--section-head-gap);
  padding-bottom: 0;
}

.process .section-head p, .pricing .section-head p {
  font-size: var(--section-copy);
  line-height: 1.7;
}

.kicker {
  letter-spacing: 2.1px;
  font-size: 10px;
  line-height: 1.2;
}

.process .day span, .price-card h3 {
  line-height: 1.15;
}

.cta {
  margin-top: var(--section-space);
  margin-bottom: var(--section-space);
}

@media (width <= 900px) {
  :root {
    --section-space: 72px;
    --section-title: clamp(40px,7vw,56px);
    --section-copy: 14px;
    --section-head-gap: 36px;
  }
}

@media (width <= 600px) {
  :root {
    --section-space: 58px;
    --section-title: 40px;
    --section-copy: 14px;
    --section-head-gap: 30px;
  }

  .process .section-head h2, .pricing .section-head h2 {
    letter-spacing: -2.2px;
  }

  .process .section-head, .pricing .section-head {
    margin-bottom: var(--section-head-gap);
  }
}

.usp-strip span {
  letter-spacing: 1.25px;
  font-size: 10px;
}

.about-webschets {
  padding: var(--section-space) 0;
  background: radial-gradient(circle at 8% 15%, #dce8ff 0, #0000 27%), radial-gradient(circle at 92% 82%, #eadfff 0, #0000 29%), linear-gradient(145deg, #f8fafc, #f5f4fa);
  position: relative;
  overflow: hidden;
}

.about-webschets:before {
  content: "";
  pointer-events: none;
  background: #ffffff32;
  border: 1px solid #fff;
  border-radius: 34px;
  position: absolute;
  inset: 22px max(14px, 50% - 620px);
  box-shadow: inset 0 1px #fff;
}

.about-webschets .shell {
  position: relative;
}

.about-webschets .kicker {
  min-height: 29px;
  color: var(--blue);
  background: #ffffffb8;
  border: 1px solid #d6e1fa;
  border-radius: 100px;
  align-items: center;
  padding: 0 12px;
  display: inline-flex;
  box-shadow: 0 8px 22px #29457b10;
}

.about-webschets .section-head {
  margin: 0 0 var(--section-head-gap);
  align-items: end;
}

.about-webschets .section-head h2 {
  font-size: var(--section-title);
  letter-spacing: -3.2px;
  margin-top: 22px;
  line-height: 1.02;
}

.about-webschets .section-head h2 span {
  color: var(--blue);
}

.about-webschets .section-head p {
  width: 38%;
  max-width: 460px;
  color: var(--muted);
  font-size: var(--section-copy);
  margin-bottom: 5px;
  line-height: 1.7;
}

.about-story {
  grid-template-columns: 1.35fr .65fr;
  align-items: stretch;
  gap: 16px;
  display: grid;
}

.about-main {
  backdrop-filter: blur(18px) saturate(140%);
  background: linear-gradient(145deg, #ffffffdf, #eef3ffbd);
  border: 1px solid #fff;
  border-radius: 28px;
  grid-template-columns: 185px 1fr;
  align-items: center;
  gap: 38px;
  min-height: 430px;
  padding: 38px;
  display: grid;
  box-shadow: inset 0 1px #fff, 0 24px 60px #29457b14;
}

.about-mark {
  background: linear-gradient(145deg, #2d6bff, #7137ff);
  border-radius: 44px;
  place-items: center;
  width: 170px;
  height: 220px;
  display: grid;
  position: relative;
  overflow: hidden;
  transform: rotate(-5deg);
  box-shadow: 20px 28px 55px #3a45b944, inset 4px 4px 9px #fff5;
}

.about-mark span {
  z-index: 2;
  color: #fff;
  letter-spacing: -10px;
  font-size: 82px;
  font-weight: 600;
  position: relative;
  transform: translateX(-4px);
}

.about-mark i {
  border: 1px solid #ffffff4d;
  border-radius: 50%;
  width: 105px;
  height: 105px;
  position: absolute;
}

.about-mark i:first-of-type {
  top: -20px;
  right: -34px;
}

.about-mark i:nth-of-type(2) {
  width: 135px;
  height: 135px;
  bottom: -15px;
  left: -48px;
}

.about-mark i:nth-of-type(3) {
  background: var(--coral);
  border: 0;
  width: 18px;
  height: 18px;
  bottom: 28px;
  right: 18px;
  box-shadow: 0 8px 18px #4d244855;
}

.about-label {
  letter-spacing: 1.8px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 600;
}

.about-main h3 {
  letter-spacing: -1.4px;
  max-width: 520px;
  margin: 15px 0 17px;
  font-size: clamp(25px, 2.6vw, 36px);
  line-height: 1.12;
}

.about-main p {
  color: #667287;
  max-width: 600px;
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.72;
}

.about-main .button {
  margin-top: 12px;
  padding: 13px 17px;
  font-size: 11px;
}

.about-values {
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  display: grid;
}

.about-values article {
  background: #ffffffb8;
  border: 1px solid #fff;
  border-radius: 22px;
  padding: 24px 25px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #fff, 0 15px 38px #29457b10;
}

.about-values article:after {
  content: "";
  background: linear-gradient(145deg, #d8e4ff, #e6dcff);
  border-radius: 50%;
  width: 72px;
  height: 72px;
  position: absolute;
  top: -25px;
  right: -23px;
}

.about-values span {
  z-index: 1;
  letter-spacing: 1.4px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 600;
  position: relative;
}

.about-values h3 {
  letter-spacing: -.6px;
  margin: 13px 0 7px;
  font-size: 20px;
  line-height: 1.15;
}

.about-values p {
  color: #6a7485;
  max-width: 310px;
  margin: 0;
  font-size: 10.5px;
  line-height: 1.55;
}

@media (width <= 900px) {
  .about-webschets .section-head {
    align-items: flex-start;
  }

  .about-webschets .section-head p {
    width: 100%;
    max-width: 620px;
  }

  .about-story {
    grid-template-columns: 1fr;
  }

  .about-main {
    grid-template-columns: 150px 1fr;
  }

  .about-mark {
    border-radius: 36px;
    width: 140px;
    height: 185px;
  }

  .about-values {
    grid-template-rows: none;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (width <= 600px) {
  .about-webschets:before {
    border-radius: 27px;
    inset: 12px 8px;
  }

  .about-webschets .section-head h2 {
    letter-spacing: -2.2px;
  }

  .about-main {
    border-radius: 24px;
    grid-template-columns: 1fr;
    gap: 27px;
    padding: 25px;
  }

  .about-mark {
    border-radius: 30px;
    width: 112px;
    height: 126px;
    transform: rotate(-4deg);
  }

  .about-mark span {
    font-size: 59px;
  }

  .about-main h3 {
    font-size: 27px;
  }

  .about-main p {
    font-size: 12px;
  }

  .about-values {
    grid-template-columns: 1fr;
  }

  .about-values article {
    padding: 22px;
  }

  .about-values p {
    font-size: 11px;
  }
}

.about-webschets {
  padding: 68px 0;
}

.about-webschets .section-head {
  margin-bottom: 30px;
}

.about-webschets .section-head h2 {
  margin-top: 17px;
}

.about-main {
  grid-template-columns: 155px 1fr;
  gap: 30px;
  min-height: 390px;
  padding: 30px;
}

.about-mark {
  border-radius: 38px;
  width: 145px;
  height: 184px;
}

.about-mark span {
  font-size: 72px;
}

.about-main h3 {
  margin: 12px 0 14px;
  font-size: clamp(24px, 2.35vw, 33px);
}

.about-main p {
  margin-bottom: 9px;
  line-height: 1.65;
}

.about-main .button {
  margin-top: 9px;
}

.about-values article {
  padding: 20px 74px 20px 22px;
}

.about-values article:after {
  background: linear-gradient(145deg, #d6e3ff, #ded5ff);
  width: 44px;
  height: 44px;
  top: 18px;
  right: 18px;
  box-shadow: inset 0 1px #fff, 0 8px 18px #5a67bd18;
}

.about-values h3 {
  margin: 10px 0 5px;
}

@media (width <= 900px) {
  .about-webschets {
    padding: 62px 0;
  }

  .about-main {
    grid-template-columns: 135px 1fr;
    min-height: 365px;
  }

  .about-mark {
    width: 125px;
    height: 160px;
  }

  .about-values article {
    padding: 21px 68px 21px 22px;
  }
}

@media (width <= 600px) {
  .about-webschets {
    padding: 54px 0;
  }

  .about-webschets .section-head {
    margin-bottom: 25px;
  }

  .about-main {
    grid-template-columns: 1fr;
    gap: 23px;
    min-height: 0;
    padding: 23px;
  }

  .about-mark {
    width: 108px;
    height: 122px;
  }

  .about-values article {
    padding: 20px 68px 20px 21px;
  }

  .about-values article:after {
    width: 40px;
    height: 40px;
    top: 16px;
    right: 16px;
  }
}

.about-webschets {
  background: radial-gradient(circle at 9% 32%, #dce8ff9c 0, #0000 31%), radial-gradient(circle at 91% 68%, #eadfff8f 0, #0000 30%);
}

.about-webschets:before {
  display: none;
}

.about-values article:after {
  width: 76px;
  height: 76px;
  box-shadow: none;
  opacity: .14;
  background-color: #0000;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 0;
  top: 50%;
  right: 19px;
  transform: translateY(-50%);
}

.about-values article:first-child:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%232864ff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='26' cy='26' r='10'/%3E%3Ccircle cx='55' cy='30' r='8'/%3E%3Cpath d='M9 60c2-13 10-20 20-20s18 7 20 20M45 47c4-5 9-7 14-6 7 1 12 7 13 17'/%3E%3C/svg%3E");
}

.about-values article:nth-child(2):after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%237137ff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='40' cy='40' r='27'/%3E%3Ccircle cx='40' cy='40' r='17'/%3E%3Ccircle cx='40' cy='40' r='6'/%3E%3Cpath d='m44 36 21-21M55 15h10v10'/%3E%3C/svg%3E");
}

.about-values article:nth-child(3):after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%232474d9' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 10v10M40 60v10M10 40h10M60 40h10M19 19l7 7M54 54l7 7M61 19l-7 7M26 54l-7 7'/%3E%3Ccircle cx='40' cy='40' r='16'/%3E%3Ccircle cx='40' cy='40' r='5'/%3E%3C/svg%3E");
}

@media (width <= 600px) {
  .about-values article {
    padding-right: 88px;
  }

  .about-values article:after {
    width: 62px;
    height: 62px;
    top: 50%;
    right: 15px;
  }
}

.about-mark span {
  letter-spacing: -7px;
  align-items: baseline;
  display: flex;
  transform: none;
}

.about-mark span b {
  color: var(--coral);
  font: inherit;
  letter-spacing: -2px;
  margin-left: 3px;
}

.about-mark i:nth-of-type(3) {
  display: none;
}

.about-values article {
  padding-right: 92px;
}

.about-values article:after {
  opacity: .13;
  width: 122px;
  height: 122px;
  top: auto;
  bottom: -34px;
  right: -31px;
  transform: none;
}

@media (width <= 600px) {
  .about-values article {
    padding-right: 76px;
  }

  .about-values article:after {
    width: 102px;
    height: 102px;
    top: auto;
    bottom: -29px;
    right: -27px;
  }
}

.testimonial-grid {
  grid-template-columns: 1.18fr .91fr .91fr;
  align-items: center;
  gap: 15px;
  padding: 58px 0 64px;
  display: grid;
}

.testimonial-heading {
  flex-direction: column;
  justify-content: flex-start;
  align-self: stretch;
  padding: 22px 24px 0 0;
  display: flex;
}

.testimonial-heading h2 {
  letter-spacing: -2.2px;
  white-space: nowrap;
  margin: 15px 0 0;
  font-size: clamp(29px, 3.15vw, 42px);
  line-height: 1.05;
}

.testimonial-heading h2 span {
  color: var(--blue);
}

.testimonial-grid > article {
  background: linear-gradient(145deg, #ffffffdf, #edf3ffc4);
  border: 1px solid #fff;
  border-radius: 22px;
  flex-direction: column;
  min-height: 195px;
  padding: 22px 24px;
  display: flex;
  overflow: hidden;
  box-shadow: inset 0 1px #fff, 0 18px 46px #29457b11;
}

.testimonial-grid > article:nth-child(3) {
  background: linear-gradient(145deg, #ffffffdf, #f1ebffc7);
}

.testimonial-stars {
  color: var(--coral);
  letter-spacing: 2px;
  font-size: 12px;
}

.testimonial-owner {
  color: #26364e;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 600;
  display: block;
}

.testimonial-grid blockquote {
  color: #273951;
  letter-spacing: -.2px;
  flex: 1;
  align-items: center;
  margin: 15px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  display: flex;
}

@media (width <= 900px) {
  .testimonial-grid {
    grid-template-columns: 1fr 1fr;
    padding: 62px 0 68px;
  }

  .testimonial-heading {
    grid-column: 1 / -1;
    padding-bottom: 8px;
  }

  .testimonial-heading h2 {
    white-space: normal;
  }

  .testimonial-grid > article {
    min-height: 195px;
  }
}

@media (width <= 600px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
    padding: 52px 0 58px;
  }

  .testimonial-heading {
    grid-column: auto;
    padding: 0 0 8px;
  }

  .testimonial-heading h2 {
    font-size: 35px;
  }

  .testimonial-grid > article {
    min-height: 185px;
    padding: 22px;
  }
}

.price-vat {
  background: #ffffff8f;
  border: 1px solid #dce5f6;
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  gap: 13px;
  width: min(100%, 300px);
  padding: 9px 11px;
  color: #43536b !important;
  margin-top: 11px !important;
  display: flex !important;
}

.price-vat small {
  letter-spacing: .7px;
  color: #74849a !important;
  font-size: 7px !important;
}

.price-vat b {
  color: var(--coral);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
}

.price-vat.is-hidden {
  display: none !important;
}

.process .timeline {
  background: none;
  border-top: 0;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-top: 38px;
}

.process .timeline:before, .process .timeline:after {
  height: 2px;
  top: 18px;
  left: 12.5%;
  right: 12.5%;
}

.process .timeline:after {
  width: calc(var(--progress, 0%) * .75);
  right: auto;
}

.process .day {
  text-align: left;
  transform-origin: center;
  min-height: 245px;
  transform-style: preserve-3d;
  background: linear-gradient(145deg, #ffffffdf, #edf3ffbf);
  border-radius: 23px;
  padding: 24px 21px 21px;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s, background .4s;
  overflow: visible;
  transform: scale(.9);
  box-shadow: inset 0 1px #fff, 0 17px 38px #29457b13;
  border: 1px solid #fff !important;
}

.process .day:nth-child(2), .process .day:nth-child(4) {
  background: linear-gradient(145deg, #ffffffdf, #f1ebffc4);
}

.process .day:before {
  transform-origin: center;
  border: 2px solid #fff;
  width: 10px;
  height: 10px;
  display: block;
  top: -43px;
  left: 50%;
  transform: translateX(-50%) scale(1.111);
  box-shadow: 0 0 0 4px #dfe7f7;
}

.process .day:after {
  content: "";
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: 23px 23px, 100% 100%;
  border-radius: 14px;
  width: 43px;
  height: 43px;
  display: block;
  position: absolute;
  top: 18px;
  right: 18px;
  transform: rotate(3deg);
  box-shadow: 8px 11px 22px #38539b20, inset 2px 2px 5px #fff;
}

.process .day:first-child:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232864ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m15.3 8.7-2.1 4.5-4.5 2.1 2.1-4.5 4.5-2.1Z'/%3E%3C/svg%3E"), linear-gradient(145deg, #fff, #d8e4ff);
}

.process .day:nth-child(2):after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237137ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13.2 4.2 6.6 6.6-8.5 8.5-6.8.2.2-6.8 8.5-8.5Z'/%3E%3Cpath d='m10.8 6.6 6.6 6.6M4.7 12.7l6.6 6.6'/%3E%3C/svg%3E"), linear-gradient(145deg, #fff, #e4dcff);
  transform: rotate(-3deg);
}

.process .day:nth-child(3):after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237137ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 7-5 5 5 5M16 7l5 5-5 5M14.5 4.5l-5 15'/%3E%3C/svg%3E"), linear-gradient(145deg, #fff, #e4dcff);
  transform: rotate(-3deg);
}

.process .day:nth-child(4):after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232864ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.2V12a8 8 0 1 1-4.7-7.3'/%3E%3Cpath d='m20 5-9 9-3-3'/%3E%3C/svg%3E"), linear-gradient(145deg, #fff, #d8e4ff);
}

.process .day b {
  letter-spacing: .8px;
  color: #6c7e98;
  font-size: 8px;
}

.process .day span {
  margin: 62px 0 5px;
  font-size: 20px;
  line-height: 1.12;
}

.process .day small {
  color: #74839a;
  font-size: 9.5px;
}

.process .day em {
  color: #65748b;
  border-top: 1px solid #dce4f1;
  margin-top: 16px;
  padding-top: 14px;
  font-size: 10px;
  font-style: normal;
  line-height: 1.55;
  display: block;
}

.process .day.active {
  background: linear-gradient(145deg, #fff 0%, #e8efff 52%, #eee5ff 100%);
  transform: scale(1);
  box-shadow: inset 0 1px #fff, inset 0 0 0 1px #ffffffb8, 0 28px 58px #4355a43b, 0 0 34px #6657ff18;
  border-color: #d8e3ff !important;
}

.process .day.active:before {
  background: var(--blue);
  top: -27px;
  transform: translateX(-50%) scale(1.18);
  box-shadow: 0 0 0 6px #dfe7ff, 0 5px 17px #2864ff55;
}

.process .day:first-child.active:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m15.3 8.7-2.1 4.5-4.5 2.1 2.1-4.5 4.5-2.1Z'/%3E%3C/svg%3E"),linear-gradient(145deg,var(--blue),var(--violet));
}

.process .day:nth-child(2).active:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13.2 4.2 6.6 6.6-8.5 8.5-6.8.2.2-6.8 8.5-8.5Z'/%3E%3Cpath d='m10.8 6.6 6.6 6.6M4.7 12.7l6.6 6.6'/%3E%3C/svg%3E"),linear-gradient(145deg,var(--blue),var(--violet));
}

.process .day:nth-child(3).active:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 7-5 5 5 5M16 7l5 5-5 5M14.5 4.5l-5 15'/%3E%3C/svg%3E"),linear-gradient(145deg,var(--blue),var(--violet));
}

.process .day:nth-child(4).active:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.2V12a8 8 0 1 1-4.7-7.3'/%3E%3Cpath d='m20 5-9 9-3-3'/%3E%3C/svg%3E"),linear-gradient(145deg,var(--blue),var(--violet));
}

.process .day.active:after {
  box-shadow: 9px 13px 25px #4d54db35, inset 2px 2px 5px #ffffff64;
}

.process .timeline-detail {
  display: none;
}

.process {
  padding-bottom: 70px;
}

@media (width <= 900px) {
  .process .timeline {
    background: none;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding-top: 0;
  }

  .process .day {
    min-height: 225px;
  }

  .process .day:before {
    display: none;
  }

  .process .day.active {
    transform: scale(1);
  }
}

@media (width <= 600px) {
  .process .timeline {
    grid-template-columns: 1fr;
  }

  .process .day {
    min-height: 210px;
  }

  .process .day span {
    margin-top: 55px;
  }

  .process {
    padding-bottom: 58px;
  }
}

.about-webschets, .process, .testimonial-grid, .pricing {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

.testimonial-grid {
  padding-bottom: calc(var(--section-space)*.55);
}

.about-webschets, .pricing {
  padding-top: calc(var(--section-space)*.55);
}

.nav {
  z-index: 1000;
  backdrop-filter: blur(18px) saturate(135%);
  background: #f7f8f7a8;
  border-color: #ffffffc4;
  box-shadow: 0 10px 32px #263b6410;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

.form-feedback {
  color: #c7ff51;
  min-height: 1.4em;
  margin: 0;
  font-size: .9rem;
}

.website-problems {
  background: radial-gradient(circle at 8% 12%, #346fff1f, #0000 34%), radial-gradient(circle at 94% 88%, #7443ff1f, #0000 38%), #ffffff94;
  border: 1px solid #ffffffe6;
  border-radius: 32px;
  margin-top: clamp(42px, 5vw, 72px);
  margin-bottom: clamp(42px, 5vw, 72px);
  padding: clamp(38px, 4.2vw, 58px) clamp(22px, 3vw, 40px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 70px #4053911a, inset 0 1px #fff;
}

.website-problems:before {
  content: "";
  pointer-events: none;
  background: linear-gradient(135deg, #ffffffb3, #0000 45%);
  position: absolute;
  inset: 0;
}

.website-problems > * {
  z-index: 1;
  position: relative;
}

.website-problems .problem-head {
  grid-template-columns: 1.08fr .72fr;
  align-items: end;
  gap: clamp(30px, 5vw, 76px);
  margin-bottom: 30px;
}

.website-problems .problem-head h2 {
  letter-spacing: -3.2px;
  margin-top: 13px;
  font-size: clamp(38px, 4.25vw, 59px);
  line-height: .98;
}

.website-problems .problem-head > p {
  max-width: 440px;
  padding-bottom: 3px;
  font-size: 13px;
  line-height: 1.72;
}

.website-problems .problem-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.website-problems .problem-grid article {
  background: #ffffffb8;
  border-radius: 20px;
  min-height: 166px;
  padding: 22px 20px 20px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  box-shadow: 0 12px 32px #495b8f12, inset 0 1px #fffffff2;
  border: 1px solid #d2dcf0c7 !important;
}

.website-problems .problem-grid article:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px #495b8f1f;
  border-color: #4b71ff47 !important;
}

.website-problems .problem-grid article > span {
  min-width: 34px;
  height: 25px;
  color: var(--blue);
  letter-spacing: 1px;
  background: #edf3ff;
  border-radius: 999px;
  place-items: center;
  padding: 0 9px;
  font-size: 9px;
  display: inline-grid;
}

.website-problems .problem-grid h3 {
  letter-spacing: -.55px;
  margin: 24px 0 9px;
  font-size: 18px;
  line-height: 1.16;
}

.website-problems .problem-grid p {
  font-size: 10.5px;
  line-height: 1.62;
}

@media (width <= 900px) {
  .website-problems {
    border-radius: 26px;
  }

  .website-problems .problem-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .website-problems .problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 600px) {
  .website-problems {
    border-radius: 22px;
    margin-top: 32px;
    margin-bottom: 32px;
    padding: 32px 18px;
  }

  .website-problems .problem-head h2 {
    letter-spacing: -2.3px;
    font-size: 38px;
  }

  .website-problems .problem-head > p {
    font-size: 12px;
  }

  .website-problems .problem-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .website-problems .problem-grid article {
    min-height: 0;
    padding: 20px;
  }

  .website-problems .problem-grid h3 {
    margin-top: 17px;
  }
}

.website-problems .problem-grid {
  border-top: 1px solid #becce5b8;
  border-bottom: 1px solid #becce5b8;
  gap: 0;
}

.website-problems .problem-grid article {
  min-height: 164px;
  box-shadow: none;
  background: none;
  border-radius: 0;
  padding: 24px 26px 25px;
  transition: none;
  border: 0 !important;
}

.website-problems .problem-grid article + article {
  border-left: 1px solid #becce5b8 !important;
}

.website-problems .problem-grid article:hover {
  box-shadow: none;
  transform: none;
  border-color: #becce5b8 !important;
}

.website-problems .problem-grid article > span {
  background: none;
  border-radius: 0;
  min-width: 0;
  height: auto;
  padding: 0;
  display: block;
}

@media (width <= 900px) {
  .website-problems .problem-grid article:nth-child(odd) {
    border-left: 0 !important;
  }

  .website-problems .problem-grid article:nth-child(2n) {
    border-left: 1px solid #becce5b8 !important;
  }

  .website-problems .problem-grid article:nth-child(n+3) {
    border-top: 1px solid #becce5b8 !important;
  }
}

@media (width <= 600px) {
  .website-problems .problem-grid article, .website-problems .problem-grid article:nth-child(2n) {
    border-left: 0 !important;
  }

  .website-problems .problem-grid article + article {
    border-top: 1px solid #becce5b8 !important;
  }
}

.website-problems {
  isolation: isolate;
  background: radial-gradient(circle at 12% 0, #2670ff2b, #0000 33%), radial-gradient(circle at 94% 100%, #7c45ff2b, #0000 38%), linear-gradient(135deg, #ffffffc7, #f7f9ff85);
  border-color: #fffffff5;
  box-shadow: 0 30px 90px #41549621, inset 0 1px #fff, inset 0 0 70px #667eff0a;
}

.website-problems:after {
  content: "";
  z-index: 0;
  background: linear-gradient(90deg, #0000, #2d6bff 22%, #7548ff 52%, #0000 86%);
  height: 2px;
  position: absolute;
  top: 0;
  left: 40px;
  right: 40px;
  box-shadow: 0 0 22px #405effbf;
}

.website-problems .kicker {
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.website-problems .kicker:before {
  content: "";
  border: 2px solid #2d6bff;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 12px #2d6bff;
}

.website-problems .problem-head h2 span {
  background: linear-gradient(90deg, #2769ff, #6648ff);
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
}

.website-problems .problem-grid {
  background: linear-gradient(90deg, #ffffff1f, #5e74ff09, #ffffff1f);
  border-color: #8ea4d27a;
  position: relative;
}

.website-problems .problem-grid article {
  overflow: hidden;
}

.website-problems .problem-grid article:before {
  content: "";
  opacity: .75;
  background: linear-gradient(90deg, #2d6bff, #0000);
  width: 42px;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
}

.website-problems .problem-grid article > span {
  letter-spacing: 1.6px;
  text-shadow: 0 0 14px #2d6bff66;
  font-size: 10px;
  font-weight: 600;
}

.website-problems .problem-grid h3 {
  font-weight: 600;
}

.website-problems .problem-grid article:hover {
  background: linear-gradient(#ffffff2e, #4b69ff0b);
}

@media (width <= 600px) {
  .website-problems:after {
    left: 22px;
    right: 22px;
  }

  .website-problems:before {
    background-size: 26px 26px, 26px 26px, 100% 100%;
  }
}

.website-problems:before {
  background: linear-gradient(135deg, #ffffff94, #0000 44%) 0 0 / 100% 100%;
  -webkit-mask-image: none;
  mask-image: none;
}

.website-problems .problem-grid {
  background: none;
  border: 0;
  gap: clamp(22px, 3vw, 46px);
}

.website-problems .problem-grid article, .website-problems .problem-grid article + article, .website-problems .problem-grid article:nth-child(odd), .website-problems .problem-grid article:nth-child(2n), .website-problems .problem-grid article:nth-child(n+3) {
  min-height: 0;
  padding: 18px 0;
  background: none !important;
  border: 0 !important;
}

.website-problems .problem-grid article:before {
  display: none;
}

@media (width <= 900px) {
  .website-problems .problem-grid {
    row-gap: 12px;
  }
}

@media (width <= 600px) {
  .website-problems .problem-grid article, .website-problems .problem-grid article + article {
    padding: 15px 0;
    border: 0 !important;
  }
}

@media (width >= 901px) {
  .website-problems .problem-grid article:nth-child(4) h3 {
    letter-spacing: -.65px;
    white-space: nowrap;
    font-size: 17px;
  }
}

.price-vat {
  background: none;
  border: 0;
  border-radius: 0;
  width: auto;
  padding: 0;
  color: inherit !important;
  margin-top: 16px !important;
  display: block !important;
}

.price-vat small {
  letter-spacing: .9px;
  margin-top: 4px;
  font-weight: 600;
  display: block;
  color: #74849a !important;
  font-size: 7px !important;
}

.price-vat b {
  letter-spacing: -.8px;
  color: #1e2e45;
  white-space: nowrap;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.1;
  display: block;
}

@media (width <= 600px) {
  .price-vat b {
    font-size: 20px;
  }
}

.pricing .price-vat b {
  font-weight: 500;
}

.about-values article {
  transition: transform .35s cubic-bezier(.2, .75, .2, 1), background .35s, box-shadow .35s, border-color .35s;
}

.about-values article > * {
  z-index: 2;
  transition: color .3s, transform .35s;
  position: relative;
}

.about-values article:after {
  transition: filter .35s, opacity .35s, transform .45s cubic-bezier(.2, .75, .2, 1);
}

.about-values article:before {
  content: "";
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, #0000 35%, #ffffff38 49%, #0000 63%);
  transition: transform .7s;
  position: absolute;
  inset: -40%;
  transform: translateX(-65%) rotate(8deg);
}

@media (hover: hover) {
  .about-values article:hover {
    background: linear-gradient(135deg, #2864ff 0%, #6445ff 55%, #7137ff 100%);
    border-color: #ffffff73;
    transform: translateY(-5px);
    box-shadow: 0 20px 42px #4349d547, inset 0 1px #ffffff59;
  }

  .about-values article:hover span, .about-values article:hover h3, .about-values article:hover p {
    color: #fff;
  }

  .about-values article:hover p {
    color: #ffffffd1;
  }

  .about-values article:hover:after {
    opacity: .58;
    filter: brightness(0) invert();
    transform: translate(-5px, -5px) scale(1.08) rotate(4deg);
  }

  .about-values article:hover:before {
    transform: translateX(65%) rotate(8deg);
  }

  .about-values article:hover h3 {
    transform: translateX(3px);
  }
}

.branch-work.branch-section-redesign .branch-card:focus-visible {
  outline-offset: 4px;
  outline: 3px solid #2864ff;
}

.process .day.passed:before {
  background: #2864ff;
  border-color: #fff;
  transform: translateX(-50%) scale(1.08);
  box-shadow: 0 0 0 5px #dfe7ff, 0 4px 12px #2864ff4d;
}

.design-icon svg {
  fill: none;
  stroke: #315eff;
  stroke-width: 1.75px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 5px 6px #315fff33);
  width: 29px;
  height: 29px;
  position: relative;
}

.usp-strip .usp-link article {
  box-shadow: none;
  backdrop-filter: none;
  background: none;
  border-color: #0000;
}

.usp-strip .usp-link:hover article, .usp-strip .usp-link:focus-visible article {
  backdrop-filter: blur(16px) saturate(140%);
  background: linear-gradient(145deg, #ffffffeb, #edf3ffdb);
  border-color: #fffffff2;
  box-shadow: inset 0 1px #fff, 0 22px 44px #29457b1f;
}

.usp-link article > div:last-child:after {
  color: #315eff;
  letter-spacing: .01em;
  margin-top: 13px;
  font-size: 12px;
  font-weight: 600;
  transition: color .2s, transform .2s;
}

.usp-link:hover article > div:last-child:after, .usp-link:focus-visible article > div:last-child:after {
  color: #ff6b5b;
  transform: translateX(4px);
}

@media (width >= 901px) {
  .usp-strip article {
    min-height: 132px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .usp-strip {
    gap: 13px;
    padding-bottom: 9px;
  }

  .usp-strip article {
    border-radius: 20px;
    grid-template-columns: 68px 1fr;
    gap: 16px;
    min-height: 119px;
    padding: 14px 20px;
  }

  .usp-icon {
    border-radius: 18px;
    width: 61px;
    height: 61px;
  }

  .usp-icon:before {
    border-radius: 14px;
    inset: 6px;
  }

  .design-icon svg {
    width: 26px;
    height: 26px;
  }

  .dev-icon i {
    font-size: 15px;
  }

  .host-icon i {
    font-size: 26px;
  }

  .usp-strip span {
    letter-spacing: 1.1px;
    font-size: 9px;
  }

  .usp-strip h2 {
    margin: 5px 0;
    font-size: 18px;
  }

  .usp-strip p {
    font-size: 9.5px;
    line-height: 1.5;
  }

  .usp-link article > div:last-child:after {
    margin-top: 11px;
    font-size: 10.8px;
  }

  .usp-strip {
    padding-top: 0;
    padding-bottom: 0;
  }

  .usp-strip h2 {
    font-weight: 500;
  }

  .usp-strip {
    margin-top: 32px;
  }
}

.about-main {
  transition: transform .35s cubic-bezier(.2, .75, .2, 1), background .35s, box-shadow .35s, border-color .35s;
  position: relative;
  overflow: hidden;
}

.about-main > * {
  z-index: 2;
  position: relative;
}

.about-main h3, .about-main p, .about-main .about-label {
  transition: color .3s, transform .35s;
}

.about-main:before {
  content: "";
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, #0000 35%, #ffffff38 49%, #0000 63%);
  transition: transform .7s;
  position: absolute;
  inset: -40%;
  transform: translateX(-65%) rotate(8deg);
}

.about-main .about-mark, .about-main .button {
  transition: transform .4s cubic-bezier(.2, .75, .2, 1), box-shadow .35s, background .3s, color .3s;
}

@media (hover: hover) {
  .about-main:hover {
    background: linear-gradient(135deg, #2864ff 0%, #6445ff 55%, #7137ff 100%);
    border-color: #ffffff73;
    transform: translateY(-5px);
    box-shadow: 0 20px 42px #4349d547, inset 0 1px #ffffff59;
  }

  .about-main:hover h3, .about-main:hover .about-label {
    color: #fff;
  }

  .about-main:hover p {
    color: #ffffffd1;
  }

  .about-main:hover h3 {
    transform: translateX(3px);
  }

  .about-main:hover:before {
    transform: translateX(65%) rotate(8deg);
  }

  .about-main:hover .about-mark {
    transform: translateY(-4px) rotate(-2deg);
    box-shadow: 22px 30px 58px #1e186e61, inset 4px 4px 9px #ffffff8c, 0 0 0 1px #ffffff47;
  }

  .about-main:hover .button {
    color: #315eff;
    background: #fff;
    box-shadow: 0 13px 30px #161d6640;
  }
}

#webdesign .service-detail-points article, #development .service-detail-points article, #hosting .service-detail-points article {
  box-shadow: none;
  background: none;
  border-color: #0000;
}

.home-branding {
  isolation: isolate;
  min-height: 500px;
  box-shadow: none;
  backdrop-filter: none;
  background: none;
  border: 0;
  border-radius: 0;
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  align-items: center;
  gap: clamp(24px, 4vw, 54px);
  margin-top: 24px;
  margin-bottom: 24px;
  padding: clamp(38px, 4vw, 56px);
  display: grid;
  position: relative;
  overflow: visible;
}

.home-branding:before {
  content: none;
}

.home-branding-copy {
  z-index: 2;
  min-width: 0;
  position: relative;
}

.home-branding .kicker {
  color: var(--blue);
  letter-spacing: 1.8px;
  background: #e7edff;
  border-radius: 100px;
  margin: 0 0 17px;
  padding: 8px 12px;
  font-size: 9px;
  display: inline-flex;
}

.home-branding h2 {
  letter-spacing: -3.2px;
  color: var(--ink);
  margin: 0;
  font: 600 clamp(38px, 4.2vw, 56px) / .98 Manrope, sans-serif;
}

.home-branding h2 span {
  color: var(--blue);
}

.home-branding-intro {
  color: #667187;
  max-width: 590px;
  margin: 22px 0 25px;
  font-size: 14px;
  line-height: 1.68;
}

.home-branding-benefits {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 26px;
  display: grid;
}

.home-branding-benefits div {
  padding-left: 18px;
  position: relative;
}

.home-branding-benefits div:before {
  content: "";
  background: #5be09d;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 4px;
  left: 0;
  box-shadow: 0 0 0 5px #5be09d1f;
}

.home-branding-benefits strong, .home-branding-benefits span {
  display: block;
}

.home-branding-benefits strong {
  color: #17243c;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
}

.home-branding-benefits span {
  color: #778197;
  font-size: 10px;
  line-height: 1.55;
}

.home-branding-link {
  background: linear-gradient(120deg,var(--blue),var(--violet));
  color: #fff;
  border-radius: 100px;
  align-items: center;
  gap: 16px;
  min-height: 49px;
  padding: 5px 6px 5px 20px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
  display: inline-flex;
  box-shadow: 0 14px 30px #4538ff2b;
}

.home-branding-link span {
  background: #ffffff25;
  border: 1px solid #fff5;
  border-radius: 50%;
  place-items: center;
  width: 37px;
  height: 37px;
  display: grid;
}

.home-branding-link svg {
  fill: none;
  stroke: #fff;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 17px;
}

.home-branding-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 19px 38px #4538ff3d;
}

.home-branding-visual {
  min-width: 0;
  min-height: 350px;
  box-shadow: none;
  isolation: isolate;
  background: none;
  border: 0;
  border-radius: 0;
  place-items: center;
  margin: 0;
  padding: 0;
  display: grid;
  position: relative;
  overflow: visible;
}

.home-branding-glow {
  z-index: 0;
  filter: blur(22px);
  pointer-events: none;
  background: radial-gradient(at 60% 42%, #744eff36 0, #744eff1a 34%, #0000 66%), radial-gradient(at 28% 61%, #2f7dff33 0, #2f7dff14 36%, #0000 68%);
  border-radius: 50%;
  display: block;
  position: absolute;
  inset: 2% -9% 0 -7%;
}

.home-branding-visual:before {
  content: "";
  z-index: 1;
  aspect-ratio: 1;
  pointer-events: none;
  border: 1px solid #4270ff26;
  border-radius: 50%;
  width: min(76%, 520px);
  position: absolute;
}

.home-branding-visual:after {
  content: "";
  z-index: 1;
  filter: blur(11px);
  pointer-events: none;
  background: radial-gradient(#121d3057 0, #21314e3b 34%, #394c741a 58%, #0000 75%);
  border-radius: 50%;
  height: 13%;
  position: absolute;
  bottom: 14%;
  left: 11%;
  right: 2%;
  transform: scaleX(.94);
}

.home-branding-visual img {
  z-index: 2;
  filter: drop-shadow(0 12px 9px #131f3738) drop-shadow(0 28px 24px #37477033);
  border-radius: 0;
  width: 106%;
  max-width: 760px;
  height: auto;
  transition: transform .45s cubic-bezier(.2, .75, .2, 1);
  display: block;
  position: relative;
  transform: none;
}

.home-branding:hover .home-branding-visual img {
  transform: translateY(-5px) scale(1.006);
}

.home-branding-visual figcaption {
  z-index: 3;
  backdrop-filter: blur(16px);
  background: #ffffffe0;
  border: 1px solid #fff;
  border-radius: 15px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  display: flex;
  position: absolute;
  bottom: 5%;
  right: 4%;
  box-shadow: 0 14px 30px #384d7624;
}

.home-branding-visual figcaption i {
  background: #5be09d;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 5px #5be09d20;
}

.home-branding-visual figcaption span, .home-branding-visual figcaption strong, .home-branding-visual figcaption small {
  display: block;
}

.home-branding-visual figcaption strong {
  color: #1a2941;
  font-size: 11px;
  font-weight: 600;
}

.home-branding-visual figcaption small {
  color: #7d8799;
  margin-top: 3px;
  font-size: 8px;
}

@keyframes brandingPulse {
  50% {
    opacity: .75;
    transform: scale(1.08);
  }
}

@keyframes brandingOrbit {
}

@media (width <= 980px) {
  .home-branding {
    grid-template-columns: 1fr;
    padding: 44px 38px;
  }

  .home-branding-copy {
    max-width: 720px;
  }

  .home-branding-visual {
    min-height: 340px;
  }

  .home-branding-visual img {
    width: min(100%, 680px);
    transform: none;
  }

  .home-branding:hover .home-branding-visual img {
    transform: translateY(-7px);
  }
}

@media (width <= 600px) {
  .home-branding {
    border-radius: 28px;
    min-height: 0;
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 34px 22px 24px;
  }

  .home-branding h2 {
    letter-spacing: -2.5px;
    font-size: 38px;
  }

  .home-branding-intro {
    margin: 20px 0 24px;
    font-size: 13px;
  }

  .home-branding-benefits {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .home-branding-visual {
    border-radius: 0;
    min-height: 230px;
    padding: 0;
  }

  .home-branding-glow {
    inset: 0 -12% -4%;
  }

  .home-branding-visual img {
    border-radius: 0;
    width: 106%;
  }

  .home-branding-visual figcaption {
    padding: 9px 11px;
    bottom: 4%;
    right: 3%;
  }

  .home-branding-link {
    justify-content: space-between;
    width: 100%;
  }
}

.home-page .hero-eyebrow {
  letter-spacing: .16em !important;
  font-size: 7.5px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

.home-branding-visual .home-branding-glow:after {
  content: "";
  filter: blur(13px);
  background: radial-gradient(#1d2c4840, #374b781a 45%, #0000 72%);
  border-radius: 50%;
  height: 13%;
  position: absolute;
  bottom: 14%;
  left: 13%;
  right: 6%;
}

.pricing-simple .section-head {
  align-items: end;
  margin-bottom: 42px;
}

.pricing-simple-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
  display: grid;
}

.pricing-simple-card {
  backdrop-filter: blur(18px) saturate(130%);
  background: linear-gradient(145deg, #ffffffc7, #f6f9ff94);
  border: 1px solid #c9d4e6d1;
  border-radius: 25px;
  flex-direction: column;
  min-width: 0;
  min-height: 535px;
  padding: 30px;
  transition: transform .28s, border-color .28s, box-shadow .28s;
  display: flex;
  position: relative;
  box-shadow: 0 18px 45px #263b6714, inset 0 1px #fffffff2;
}

.pricing-simple-card:hover {
  border-color: #5c77ff5c;
  transform: translateY(-4px);
  box-shadow: 0 24px 55px #2d3d7021, inset 0 1px #fff;
}

.pricing-simple-card.is-featured {
  background: radial-gradient(circle at 92% 6%, #7043ff21, #0000 31%), linear-gradient(145deg, #ffffffe6, #f3f5ffad);
  border-color: #485cff6b;
  box-shadow: 0 22px 55px #453dc024, inset 0 1px #fff;
}

.pricing-simple-popular {
  background: var(--coral);
  color: #fff;
  letter-spacing: .8px;
  border-radius: 100px;
  padding: 6px 9px;
  font-size: 7px;
  font-weight: 600;
  line-height: 1;
  position: absolute;
  top: 22px;
  right: 22px;
  box-shadow: 0 8px 20px #ff725c40;
}

.pricing-simple-card header {
  border-bottom: 1px solid #d3dbe9eb;
  min-height: 126px;
  padding-bottom: 23px;
}

.pricing-simple-label {
  color: var(--blue);
  letter-spacing: 1.45px;
  margin-bottom: 11px;
  font-size: 8px;
  font-weight: 600;
  display: block;
}

.pricing-simple-card h3 {
  color: #172842;
  letter-spacing: -1.2px;
  margin: 0 0 9px;
  font: 600 28px / 1.1 Poppins, Arial, sans-serif;
}

.pricing-simple-card header p {
  color: #728097;
  max-width: 285px;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.pricing-simple-price {
  padding: 23px 0 21px;
}

.pricing-simple-price small, .pricing-simple-price strong, .pricing-simple-price span {
  display: block;
}

.pricing-simple-price small {
  color: #7d899c;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
  font-size: 7px;
  font-weight: 600;
}

.pricing-simple-price strong {
  color: #1c2e48;
  letter-spacing: -1.5px;
  font: 500 31px / 1 Poppins, Arial, sans-serif;
}

.pricing-simple-price span {
  color: #8490a2;
  margin-top: 7px;
  font-size: 8px;
}

.pricing-simple-card ul {
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  display: grid;
}

.pricing-simple-card li {
  color: #4f5f76;
  padding-left: 21px;
  font-size: 11px;
  line-height: 1.5;
  position: relative;
}

.pricing-simple-card li:before {
  content: "✓";
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
  position: absolute;
  top: 0;
  left: 0;
}

.pricing-simple-cta {
  color: #233652;
  background: #ffffff94;
  border: 1px solid #c2cde0eb;
  border-radius: 100px;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  margin-top: auto;
  padding: 0 17px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
  display: flex;
}

.pricing-simple-cta span {
  color: var(--coral);
  font-size: 14px;
  transition: transform .25s;
}

.pricing-simple-cta:hover {
  background: linear-gradient(120deg,var(--blue),var(--violet));
  color: #fff;
  border-color: #0000;
  transform: translateY(-2px);
}

.pricing-simple-cta:hover span {
  color: #fff;
  transform: translate(3px, -1px);
}

.pricing-simple-note {
  color: #7d899a;
  text-align: center;
  max-width: 720px;
  margin: 24px auto 0;
  font-size: 9px;
  line-height: 1.6;
}

@media (width <= 900px) {
  .pricing-simple-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-simple-card:last-child {
    grid-column: 1 / -1;
    min-height: 480px;
  }

  .pricing-simple-card:last-child header p {
    max-width: 520px;
  }
}

@media (width <= 600px) {
  .pricing-simple .section-head {
    align-items: flex-start;
    margin-bottom: 30px;
  }

  .pricing-simple-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .pricing-simple-card, .pricing-simple-card:last-child {
    border-radius: 21px;
    grid-column: auto;
    min-height: 0;
    padding: 24px;
  }

  .pricing-simple-card header {
    min-height: 0;
  }

  .pricing-simple-popular {
    top: 20px;
    right: 20px;
  }

  .pricing-simple-card h3 {
    font-size: 26px;
  }

  .pricing-simple-price strong {
    font-size: 29px;
  }
}

@media (width >= 901px) {
  .pricing-simple-grid {
    grid-template-columns: .94fr 1fr .94fr;
    align-items: center;
    gap: 22px;
  }

  .pricing-simple-card:not(.is-featured) {
    min-height: 505px;
    padding: 27px;
  }
}

.pricing-simple-card {
  border: 0;
  box-shadow: 0 18px 48px #2b3c621a, inset 0 1px #ffffffeb;
}

.pricing-simple-card:hover {
  border-color: #0000;
  box-shadow: 0 24px 58px #2b3c6224, inset 0 1px #fff;
}

.pricing-simple-card.is-featured {
  border: 0;
  box-shadow: 0 25px 62px #453dc02b, inset 0 1px #fff;
}

@media (width <= 900px) {
  .pricing-simple-card:not(.is-featured) {
    min-height: 505px;
  }

  .pricing-simple-card.is-featured {
    min-height: 535px;
  }
}

@media (width <= 600px) {
  .pricing-simple-card:not(.is-featured), .pricing-simple-card.is-featured {
    min-height: 0;
  }
}

.shared-site-header {
  --header-blue: #3157e1;
  z-index: 1000;
  width: min(1236px, 100% - 24px) !important;
  height: 70px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  background: none !important;
  border: 1px solid #0000 !important;
  border-radius: 22px !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 0 auto !important;
  padding: 0 18px !important;
  font-family: DM Sans, Arial, sans-serif !important;
  transition: height .28s, background .25s, border-color .25s, box-shadow .25s, backdrop-filter .25s !important;
  display: flex !important;
  position: sticky !important;
  top: 10px !important;
}

.shared-site-header.scrolled, .shared-site-header.is-scrolled {
  backdrop-filter: blur(22px) saturate(145%) !important;
  background: #f7f8f7c9 !important;
  border-color: #ffffffde !important;
  box-shadow: 0 14px 38px #263b6417 !important;
}

.shared-site-header .logo {
  color: #171b25 !important;
  letter-spacing: -1.3px !important;
  white-space: nowrap !important;
  align-items: center !important;
  font-family: Manrope, DM Sans, sans-serif !important;
  font-size: 23px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
}

.shared-site-header .logo span:first-child {
  color: var(--header-blue) !important;
}

.shared-site-header nav {
  align-items: center !important;
  gap: clamp(18px, 2.3vw, 34px) !important;
  display: flex !important;
}

.shared-site-header nav a {
  color: #596171 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  position: relative !important;
}

.shared-site-header nav a:hover, .shared-site-header nav a.active {
  color: var(--header-blue) !important;
}

.shared-site-header nav a.active:after {
  content: "" !important;
  background: var(--header-blue) !important;
  height: 2px !important;
  position: absolute !important;
  bottom: -10px !important;
  left: 0 !important;
  right: 0 !important;
}

.shared-site-header .nav-cta {
  color: #fff !important;
  background: #171b25 !important;
  border-radius: 12px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
}

.shared-site-header .menu {
  color: #171b25 !important;
  cursor: pointer !important;
  background: none !important;
  border: 0 !important;
  font-size: 24px !important;
  display: none !important;
}

@media (width <= 900px) {
  .shared-site-header {
    height: 64px !important;
    top: 8px !important;
  }

  .shared-site-header nav {
    visibility: hidden !important;
    opacity: 0 !important;
    backdrop-filter: blur(20px) !important;
    background: linear-gradient(145deg, #fffffff8, #f0f3fff2) !important;
    border: 1px solid #ffffffed !important;
    border-radius: 24px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    max-height: calc(100vh - 88px) !important;
    padding: 10px !important;
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    overflow-y: auto !important;
    box-shadow: 0 24px 60px #253b7029, inset 0 1px #fff !important;
  }

  .menu-open .shared-site-header nav {
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
    transform: none !important;
  }

  .shared-site-header nav a {
    color: #132440 !important;
    border-radius: 14px !important;
    padding: 13px 14px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    transition: color .2s, background .2s, transform .2s !important;
  }

  .shared-site-header nav > a:hover, .shared-site-header nav > a:focus-visible {
    color: #2864ff !important;
    background: #e9efff !important;
    transform: translateX(2px) !important;
  }

  .shared-site-header nav > a.active {
    color: #fff !important;
    background: linear-gradient(120deg, #2864ff, #7137ff) !important;
    box-shadow: 0 10px 24px #4538ff29 !important;
  }

  .shared-site-header nav a.active:after, .shared-site-header .nav-cta {
    display: none !important;
  }

  .shared-site-header .menu {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: auto !important;
    padding: 8px !important;
    text-align: center !important;
    display: block !important;
  }
}

@media (width <= 600px) {
  .shared-site-header {
    width: calc(100% - 16px) !important;
    height: 58px !important;
    padding: 0 12px !important;
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
  }
}

html body, html body *, html body :before, html body :after {
  font-family: Poppins, Arial, sans-serif !important;
}

.shared-site-header .nav-cta {
  color: #fff !important;
  background: #ff725c !important;
  box-shadow: 0 10px 24px #ff725c3d !important;
}

.shared-site-header .nav-cta span {
  color: #fff !important;
}

.shared-site-header .nav-cta .nav-cta-icon {
  background: #ffffff21 !important;
  border: 1px solid #ffffff61 !important;
  border-radius: 50% !important;
  flex: 0 0 24px !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  margin-left: 2px !important;
  transition: transform .2s, background .2s !important;
  display: inline-grid !important;
}

.shared-site-header .nav-cta .nav-cta-icon svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  width: 14px !important;
  height: 14px !important;
}

.shared-site-header .nav-cta:hover .nav-cta-icon {
  background: #ffffff38 !important;
  transform: translate(2px, -2px) !important;
}

.shared-site-header .nav-cta:hover {
  background: #ef624d !important;
}

.shared-site-header nav a:not(.active) {
  font-weight: 400 !important;
}

.shared-site-header nav a:not(.active) {
  color: #171b25 !important;
}

.shared-site-header .header-services {
  align-items: center !important;
  gap: 1px !important;
  display: flex !important;
  position: relative !important;
}

.shared-site-header .header-services-toggle {
  color: #596171 !important;
  cursor: pointer !important;
  background: none !important;
  border: 0 !important;
  border-radius: 8px !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  transition: background .2s, transform .2s !important;
  display: grid !important;
}

.shared-site-header .header-services-toggle:hover, .shared-site-header .header-services.is-open .header-services-toggle {
  color: var(--header-blue) !important;
  background: #e7edff !important;
}

.shared-site-header .header-services-toggle svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  width: 14px !important;
  height: 14px !important;
  transition: transform .22s !important;
}

.shared-site-header .header-services:hover:not(.is-collapsed) .header-services-toggle svg, .shared-site-header .header-services:focus-within .header-services-toggle svg, .shared-site-header .header-services.is-open .header-services-toggle svg {
  transform: rotate(180deg) !important;
}

.shared-site-header .header-services-dropdown {
  z-index: 1100 !important;
  backdrop-filter: blur(24px) saturate(145%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform-origin: top !important;
  background: #f9fbfff5 !important;
  border: 1px solid #fffffff2 !important;
  border-radius: 24px !important;
  width: min(570px, 100vw - 32px) !important;
  padding: 13px !important;
  transition: opacity .2s, transform .2s, visibility .2s !important;
  position: absolute !important;
  top: calc(100% + 23px) !important;
  left: 50% !important;
  transform: translate(-50%, -8px) !important;
  box-shadow: 0 28px 70px #22376930, inset 0 1px #fff !important;
}

.shared-site-header .header-services:hover:not(.is-collapsed) .header-services-dropdown, .shared-site-header .header-services:focus-within .header-services-dropdown, .shared-site-header .header-services.is-open .header-services-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%) !important;
}

.shared-site-header .header-services-dropdown:before {
  content: "" !important;
  height: 25px !important;
  position: absolute !important;
  top: -24px !important;
  left: 0 !important;
  right: 0 !important;
}

.shared-site-header .header-services-heading {
  justify-content: space-between !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 8px 10px 13px !important;
  display: flex !important;
}

.shared-site-header .header-services-heading > span {
  color: #65738a !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}

.shared-site-header .header-services-heading > a {
  color: #3157e1 !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
}

.shared-site-header .header-services-heading > a:after {
  display: none !important;
}

.shared-site-header .header-services-heading > a b {
  font-size: 11px !important;
}

.shared-site-header .header-services-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 7px !important;
  display: grid !important;
}

.shared-site-header .header-services-grid > a {
  background: #ffffffa8 !important;
  border: 1px solid #0000 !important;
  border-radius: 17px !important;
  grid-template-columns: 43px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 11px !important;
  min-height: 76px !important;
  padding: 10px !important;
  transition: transform .2s, background .2s, border-color .2s, box-shadow .2s !important;
  display: grid !important;
}

.shared-site-header .header-services-grid > a:hover {
  background: #fff !important;
  border-color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 26px #2c44751a !important;
}

.shared-site-header .header-services-grid > a.is-current {
  background: linear-gradient(145deg, #fffffff5, #e7edffeb) !important;
  border-color: #3157e147 !important;
  box-shadow: 0 12px 28px #3157e121, inset 0 1px #fff !important;
}

.shared-site-header .header-services-grid > a.is-current:before {
  content: "HUIDIGE PAGINA" !important;
  color: #fff !important;
  letter-spacing: .08em !important;
  background: #3157e1 !important;
  border-radius: 999px !important;
  padding: 3px 6px !important;
  font-size: 5.5px !important;
  font-weight: 600 !important;
  position: absolute !important;
  top: 7px !important;
  right: 9px !important;
}

.shared-site-header .header-services-grid > a.is-current .service-menu-icon {
  color: #fff !important;
  background: linear-gradient(145deg, #3157e1, #7048ef) !important;
  box-shadow: 0 8px 18px #3157e13b, inset 0 1px #ffffff59 !important;
}

.shared-site-header .header-services-grid > a.is-current strong, .shared-site-header .header-services-grid > a.is-current > b {
  color: #3157e1 !important;
}

.shared-site-header .header-services-grid > a:after {
  display: none !important;
}

.shared-site-header .service-menu-icon {
  color: #3157e1 !important;
  background: linear-gradient(145deg, #eaf1ff, #e8e2ff) !important;
  border-radius: 14px !important;
  place-items: center !important;
  width: 43px !important;
  height: 43px !important;
  font-style: normal !important;
  display: grid !important;
  box-shadow: inset 0 1px #fff !important;
}

.shared-site-header .service-menu-icon svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.65px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  width: 22px !important;
  height: 22px !important;
}

.shared-site-header .icon-development {
  color: #6b42e9 !important;
}

.shared-site-header .icon-hosting {
  color: #2773da !important;
}

.shared-site-header .icon-branding {
  color: #e75f4d !important;
  background: linear-gradient(145deg, #fff0eb, #eee5ff) !important;
}

.shared-site-header .header-services-grid > a > span {
  min-width: 0 !important;
  display: block !important;
}

.shared-site-header .header-services-grid strong, .shared-site-header .header-services-grid small {
  display: block !important;
}

.shared-site-header .header-services-grid strong {
  color: #20314c !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.shared-site-header .header-services-grid small {
  color: #7a879b !important;
  margin-top: 4px !important;
  font-size: 7.5px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

.shared-site-header .header-services-grid > a > b {
  color: #8290aa !important;
  font-size: 11px !important;
  transition: color .2s, transform .2s !important;
}

.shared-site-header .header-services-grid > a:hover > b {
  color: #3157e1 !important;
  transform: translate(2px, -2px) !important;
}

@media (width <= 900px) {
  .shared-site-header .header-services {
    grid-template-columns: 1fr auto !important;
    gap: 0 !important;
    display: grid !important;
  }

  .shared-site-header .header-services > a {
    padding-right: 4px !important;
  }

  .shared-site-header .header-services-toggle {
    width: 44px !important;
    height: 44px !important;
    margin-right: 2px !important;
  }

  .shared-site-header .header-services-dropdown {
    width: 100% !important;
    max-height: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 15px !important;
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: max-height .28s, padding .28s, margin .28s !important;
    position: static !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .shared-site-header.shared-site-header .header-services:not(.is-open) .header-services-dropdown {
    pointer-events: none !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .shared-site-header.shared-site-header .header-services.is-open .header-services-dropdown {
    pointer-events: auto !important;
    max-height: 430px !important;
    margin: 2px 0 8px !important;
    padding: 8px !important;
    transform: none !important;
  }

  .shared-site-header .header-services-dropdown:before, .shared-site-header .header-services-heading {
    display: none !important;
  }

  .shared-site-header .header-services-grid {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .shared-site-header .header-services-grid > a {
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    min-height: 58px !important;
    padding: 8px 10px !important;
  }

  .shared-site-header .service-menu-icon {
    border-radius: 12px !important;
    width: 38px !important;
    height: 38px !important;
  }

  .shared-site-header .service-menu-icon svg {
    width: 19px !important;
    height: 19px !important;
  }
}

@media (width >= 901px) {
  .shared-site-header {
    align-items: flex-start !important;
  }

  .shared-site-header > .logo {
    margin-top: 20px !important;
  }

  .shared-site-header > nav {
    margin-top: 23px !important;
  }

  .shared-site-header > .nav-cta {
    margin-top: 13px !important;
  }

  .shared-site-header .header-services {
    position: static !important;
  }

  .shared-site-header:has(.header-services:hover:not(.is-collapsed)), .shared-site-header:has(.header-services:focus-within), .shared-site-header:has(.header-services.is-open) {
    backdrop-filter: blur(24px) saturate(150%) !important;
    background: #f7f8fbf0 !important;
    border-color: #ffffffeb !important;
    border-radius: 22px !important;
    align-items: flex-start !important;
    height: 196px !important;
    transition: height .28s, background .25s, border-color .25s, box-shadow .25s !important;
    box-shadow: 0 30px 65px #2237692b, inset 0 1px #fff !important;
  }

  .shared-site-header:has(.header-services:hover:not(.is-collapsed)) > .logo, .shared-site-header:has(.header-services:focus-within) > .logo, .shared-site-header:has(.header-services.is-open) > .logo {
    margin-top: 20px !important;
  }

  .shared-site-header:has(.header-services:hover:not(.is-collapsed)) > nav, .shared-site-header:has(.header-services:focus-within) > nav, .shared-site-header:has(.header-services.is-open) > nav {
    margin-top: 23px !important;
  }

  .shared-site-header:has(.header-services:hover:not(.is-collapsed)) > .nav-cta, .shared-site-header:has(.header-services:focus-within) > .nav-cta, .shared-site-header:has(.header-services.is-open) > .nav-cta {
    margin-top: 13px !important;
  }

  .shared-site-header .header-services-dropdown {
    width: auto !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 7px 0 16px !important;
    position: absolute !important;
    top: 70px !important;
    left: 17px !important;
    right: 17px !important;
    transform: translateY(-6px) !important;
  }

  .shared-site-header .header-services:hover:not(.is-collapsed) .header-services-dropdown, .shared-site-header .header-services:focus-within .header-services-dropdown, .shared-site-header .header-services.is-open .header-services-dropdown {
    transform: translateY(0) !important;
  }

  .shared-site-header .header-services-dropdown:before {
    height: 9px !important;
    top: -8px !important;
  }

  .shared-site-header .header-services-heading {
    padding: 0 2px 10px !important;
  }

  .shared-site-header .header-services-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .shared-site-header .header-services-grid > a {
    grid-template-columns: 45px minmax(0, 1fr) auto !important;
    min-height: 78px !important;
    padding: 11px !important;
  }
}

html body .shared-site-header a.nav-cta {
  color: #fff !important;
  background: linear-gradient(120deg, #2864ff, #7137ff) !important;
  border: 0 !important;
  border-radius: 100px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 49px !important;
  padding: 5px 6px 5px 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: transform .25s, box-shadow .25s !important;
  display: inline-flex !important;
  box-shadow: 0 14px 30px #4538ff2b !important;
}

html body .shared-site-header a.nav-cta > .nav-cta-icon {
  color: #fff !important;
  background: #ffffff26 !important;
  border: 1px solid #ffffff54 !important;
  border-radius: 50% !important;
  flex: 0 0 37px !important;
  place-items: center !important;
  width: 37px !important;
  height: 37px !important;
  margin: 0 !important;
  transition: transform .25s, background .25s !important;
  display: grid !important;
}

html body .shared-site-header a.nav-cta > .nav-cta-icon svg {
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 1.7px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  width: 17px !important;
  height: 17px !important;
}

html body .shared-site-header a.nav-cta:hover {
  background: linear-gradient(120deg, #2864ff, #7137ff) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 19px 38px #4538ff3d !important;
}

html body .shared-site-header a.nav-cta:hover > .nav-cta-icon {
  background: #ffffff38 !important;
  transform: translateX(2px) !important;
}

@media (width >= 901px) {
  html body .shared-site-header > .logo {
    align-items: center !important;
    height: 70px !important;
    margin-top: 0 !important;
  }

  html body .shared-site-header:has(.header-services:hover:not(.is-collapsed)) > .logo, html body .shared-site-header:has(.header-services:focus-within) > .logo, html body .shared-site-header:has(.header-services.is-open) > .logo {
    height: 70px !important;
    margin-top: 0 !important;
  }

  html body .shared-site-header > nav {
    align-items: center !important;
    gap: 35px !important;
    display: flex !important;
  }

  html body .shared-site-header > nav > a {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body .shared-site-header > nav > .header-services {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body .shared-site-header > nav > a, html body .shared-site-header > nav > .header-services > a {
    font-size: 14px !important;
    line-height: 1 !important;
  }

  html body header#site-header.shared-site-header > nav > a, html body header#site-header.shared-site-header > nav > .header-services > a {
    font-size: 14px !important;
  }

  html body header#site-header.shared-site-header > nav {
    gap: 35px !important;
  }

  html body header#site-header.shared-site-header:has(.header-services:hover:not(.is-collapsed)), html body header#site-header.shared-site-header:has(.header-services:focus-within), html body header#site-header.shared-site-header:has(.header-services.is-open) {
    height: 220px !important;
  }

  html body .shared-site-header .header-services-heading {
    padding: 2px 4px 12px !important;
  }

  html body .shared-site-header .header-services-heading > span, html body .shared-site-header .header-services-heading > a {
    font-size: 11px !important;
  }

  html body .shared-site-header .header-services-grid > a {
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    gap: 13px !important;
    min-height: 94px !important;
    padding: 13px !important;
  }

  html body .shared-site-header .service-menu-icon {
    border-radius: 16px !important;
    width: 52px !important;
    height: 52px !important;
  }

  html body .shared-site-header .service-menu-icon svg {
    width: 27px !important;
    height: 27px !important;
  }

  html body .shared-site-header .header-services-grid strong {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
  }

  html body .shared-site-header .header-services-grid small {
    margin-top: 5px !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
  }

  html body .shared-site-header .header-services-grid > a > b {
    font-size: 14px !important;
  }
}

html body .shared-site-header a.nav-cta {
  gap: clamp(6px, .84vw, 10px) !important;
  min-height: 43px !important;
  padding: 4px 15px 4px 18px !important;
}

html body .shared-site-header a.nav-cta > .nav-cta-icon {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-grid !important;
}

html body .shared-site-header a.nav-cta > .nav-cta-icon svg {
  width: 16px !important;
  height: 16px !important;
}

html body .shared-site-header a.nav-cta:hover > .nav-cta-icon {
  background: none !important;
}

html body header#site-header.shared-site-header > a.nav-cta {
  color: #fff !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  background: linear-gradient(120deg, #2864ff, #7137ff) !important;
  border: 0 !important;
  border-radius: 100px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(6.6px, .924vw, 10px) !important;
  width: auto !important;
  min-width: 0 !important;
  height: clamp(39.6px, 3.993vw, 43px) !important;
  min-height: clamp(39.6px, 3.993vw, 43px) !important;
  padding: 4px clamp(11px, 1.397vw, 15px) 4px clamp(13.2px, 1.672vw, 18px) !important;
  font-size: clamp(9.9px, 1.023vw, 11px) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  display: inline-flex !important;
}

html body header#site-header.shared-site-header > a.nav-cta > .nav-cta-icon {
  color: #fff !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  flex: 0 0 clamp(15.4px, 1.672vw, 18px) !important;
  place-items: center !important;
  width: clamp(15.4px, 1.672vw, 18px) !important;
  min-width: clamp(15.4px, 1.672vw, 18px) !important;
  height: clamp(15.4px, 1.672vw, 18px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-grid !important;
}

html body header#site-header.shared-site-header > a.nav-cta > .nav-cta-icon svg {
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 1.7px !important;
  width: clamp(14.3px, 1.485vw, 16px) !important;
  height: clamp(14.3px, 1.485vw, 16px) !important;
}

html body header#site-header.shared-site-header > a.nav-cta:hover > .nav-cta-icon {
  background: none !important;
}

@media (width >= 901px) {
  html body header#site-header.shared-site-header .header-services-grid > a {
    backdrop-filter: blur(18px) saturate(150%) !important;
    background: linear-gradient(145deg, #ffffff6b, #e2ebff40) !important;
    border: 1px solid #ffffffad !important;
    box-shadow: inset 0 1px #ffffffc7, 0 10px 26px #293d7014 !important;
  }

  html body header#site-header.shared-site-header .header-services-grid > a:hover {
    background: linear-gradient(145deg, #ffffff94, #e1eaff61) !important;
    border-color: #ffffffe0 !important;
    box-shadow: inset 0 1px #ffffffeb, 0 14px 30px #293d701f !important;
  }
}

html, body, body *, body :before, body :after, button, input, select, textarea {
  font-family: Poppins, Arial, sans-serif !important;
}

html body main > section:first-child .hero-eyebrow, html body main > section:first-child .unified-hero-label, html body main > section:first-child .wd-eyebrow {
  box-shadow: none !important;
  background: none !important;
  border-color: #0000 !important;
}

body:not(.home-page) {
  --site-type-hero: clamp(48px, 5.2vw, 68px);
  --site-type-section: clamp(34px, 4vw, 50px);
  --site-type-subsection: clamp(26px, 2.7vw, 36px);
  --site-type-card: clamp(19px, 1.6vw, 23px);
  --site-type-intro: clamp(17px, 1.3vw, 20px);
  --site-type-body: 16px;
  --site-type-card-body: 14px;
  --site-type-button: 14px;
  --site-type-label: 13px;
  --site-type-small: 12px;
  --site-type-ink: #14233d;
  --site-type-muted: #697892;
}

body:not(.home-page) .shared-site-header nav a {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

body:not(.home-page) .shared-site-header nav a.active {
  font-weight: 500 !important;
}

body:not(.home-page) :is(.nav-cta, main .button, main [class*="button"], main button[type="submit"]) {
  font-size: var(--site-type-button) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

html body:not(.home-page) main > section:first-child h1, html body:not(.home-page) main > section[class*="hero"] h1 {
  color: var(--site-type-ink) !important;
  font-size: var(--site-type-hero) !important;
  letter-spacing: -.045em !important;
  font-weight: 600 !important;
  line-height: .98 !important;
}

body:not(.home-page) main > section:first-child :is([class*="copy"] > p, .unified-hero-text) {
  max-width: 590px;
  color: var(--site-type-muted) !important;
  font-size: var(--site-type-intro) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

body:not(.home-page) main :is(.kicker, .section-label, .cx-label, .unified-hero-label, .wd-eyebrow, .hero-eyebrow, [class$="-label"]) {
  min-height: 0 !important;
  box-shadow: none !important;
  color: #2864ff !important;
  font-size: var(--site-type-label) !important;
  letter-spacing: 1.32px !important;
  text-transform: uppercase !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

html body:not(.home-page) main > section:not(:first-child) h2, html body:not(.home-page) main section [class*="heading"] > h2, html body:not(.home-page) main section [class*="copy"] > h2 {
  color: var(--site-type-ink) !important;
  font-size: var(--site-type-section) !important;
  letter-spacing: -.035em !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
}

body:not(.home-page) main section h2 em, body:not(.home-page) main section h2 span, body:not(.home-page) main section h1 em, body:not(.home-page) main section h1 span {
  font-weight: inherit !important;
}

html body:not(.home-page) main section h3 {
  color: var(--site-type-ink) !important;
  font-size: var(--site-type-card) !important;
  letter-spacing: -.025em !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

html body:not(.home-page) main section [class*="copy"] > h3, html body:not(.home-page) main section [class*="story"] > h3 {
  font-size: var(--site-type-subsection) !important;
  letter-spacing: -.035em !important;
  line-height: 1.15 !important;
}

body:not(.home-page) main section :is([class*="copy"] > p, [class*="heading"] > p, [class*="intro"], [class*="lead"]) {
  color: var(--site-type-muted) !important;
  font-size: var(--site-type-body) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}

body:not(.home-page) main section article p, body:not(.home-page) main section [class*="card"] p, body:not(.home-page) main section li {
  font-size: var(--site-type-card-body) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

body:not(.home-page) main section small {
  font-size: var(--site-type-small) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

body:not(.home-page) main section :is(strong, b) {
  font-weight: 600;
}

body:not(.home-page) main :is(.text-link, [class*="-link"], [class*="-cta"]) {
  font-size: var(--site-type-button) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

body:not(.home-page) .hero-trust-bar strong, body:not(.home-page) .unified-trust-bar strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

body:not(.home-page) .hero-trust-bar small, body:not(.home-page) .unified-trust-bar small {
  font-size: var(--site-type-small) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

body:not(.home-page) :is(.hero-trust-mark, .unified-trust-bar [class*="mark"]) {
  font-size: var(--site-type-small) !important;
  font-weight: 600 !important;
}

body:not(.home-page) main label {
  font-size: 14px !important;
  font-weight: 500 !important;
}

body:not(.home-page) main :is(input, textarea, select) {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

body:not(.home-page) footer :is(a, p, span) {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

body:not(.home-page) footer :is(b, strong) {
  font-size: 13px !important;
  font-weight: 600 !important;
}

body:not(.home-page) footer small {
  font-size: var(--site-type-small) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

body:not(.home-page) main :is(.cx-feature-mockup, .cx-stage-device, .cx-screen, [class*="device"], [class*="screen"]) :is(h1, h2, h3, p, span, small, strong, b, a) {
  font-size: revert !important;
  line-height: revert !important;
  letter-spacing: revert !important;
}

@media (width <= 900px) {
  body:not(.home-page) {
    --site-type-hero: clamp(44px, 7vw, 58px);
    --site-type-section: clamp(34px, 5.5vw, 46px);
  }
}

@media (width <= 600px) {
  body:not(.home-page) {
    --site-type-hero: clamp(40px, 11vw, 46px);
    --site-type-section: clamp(31px, 9vw, 38px);
    --site-type-subsection: 28px;
    --site-type-card: 20px;
    --site-type-intro: 16px;
    --site-type-body: 15px;
    --site-type-card-body: 14px;
    --site-type-label: 13px;
  }
}

html body.webdesign-page main :is(h1, h2, h3), html body.webdesign-page main :is(h1, h2, h3) :is(span, em, strong, b) {
  font-weight: 600 !important;
}

html body.webdesign-page main > section:first-child :is(h1, h2), html body.webdesign-page main > section:first-child :is(h1, h2) :is(span, em, strong, b), html body.webdesign-page main .wd-service-intro-copy > h2, html body.webdesign-page main .wd-service-intro-copy > h2 :is(span, em, strong, b) {
  font-synthesis: none !important;
  font-variation-settings: "wght" 400 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  font-family: Poppins, Arial, sans-serif !important;
  font-weight: 400 !important;
}

html body:not(.home-page) {
  --site-section-space: clamp(88px, 9vw, 120px);
  --site-section-space-mobile: 72px;
}

html body:not(.home-page) main > section:not(:first-child) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html body:not(.home-page) main > section:not(:first-child):not([class*="wrap"]), html body:not(.home-page) main > section[class*="wrap"] {
  padding-top: var(--site-section-space) !important;
  padding-bottom: var(--site-section-space) !important;
}

html body:not(.home-page) main > section:last-child {
  margin-bottom: var(--site-section-space) !important;
}

@media (width <= 700px) {
  html body:not(.home-page) main > section:not(:first-child):not([class*="wrap"]), html body:not(.home-page) main > section[class*="wrap"] {
    padding-top: var(--site-section-space-mobile) !important;
    padding-bottom: var(--site-section-space-mobile) !important;
  }

  html body:not(.home-page) main > section:last-child {
    margin-bottom: var(--site-section-space-mobile) !important;
  }
}

.site-logo-image {
  width: 142px;
  max-width: 100%;
  height: auto;
  display: block;
}

.shared-site-header .logo {
  flex: none;
  width: 151.5px;
}

.shared-site-header .site-logo-image {
  width: 151.5px;
}

footer .site-logo-image {
  width: 142px;
}

@media (width <= 600px) {
  .shared-site-header .logo, .shared-site-header .site-logo-image {
    width: 125.4px;
  }
}

.ws-footer {
  isolation: isolate;
  color: #18263c;
  backdrop-filter: blur(26px);
  background: radial-gradient(circle at 12% 15%, #276cff24, #0000 32%), radial-gradient(circle at 88% 88%, #7040ff21, #0000 30%), #f1f7ffc7;
  border: 0;
  border-top: 1px solid #ffffffeb;
  border-radius: 0;
  margin: clamp(52px, 7vw, 90px) 0 0;
  padding: clamp(18px, 2.2vw, 30px) clamp(24px, 5vw, 76px);
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #fff;
  width: 100% !important;
  max-width: none !important;
}

.ws-footer * {
  box-sizing: border-box;
}

.ws-footer a {
  color: inherit;
  text-decoration: none;
}

.ws-footer-glow {
  z-index: -1;
  filter: blur(10px);
  pointer-events: none;
  border-radius: 50%;
  position: absolute;
}

.ws-footer-glow-one {
  background: #7447ff21;
  width: 240px;
  height: 240px;
  top: -100px;
  right: -90px;
}

.ws-footer-glow-two {
  background: #1d78ff1f;
  width: 190px;
  height: 190px;
  bottom: -120px;
  left: 28%;
}

.ws-footer-status i {
  background: #78ffa7;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 5px #78ffa724;
}

.ws-footer-main {
  grid-template-columns: minmax(260px, 1.7fr) repeat(3, minmax(135px, .7fr));
  gap: clamp(24px, 3.2vw, 52px);
  padding: clamp(28px, 3.5vw, 44px) 8px 26px;
  display: grid;
}

.ws-footer-brand {
  min-width: 0;
  display: block;
}

.ws-footer-logo {
  width: 150px;
  display: inline-flex;
}

.ws-footer-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.ws-footer-brand p {
  color: #65738a;
  max-width: 390px;
  margin: 15px 0;
  font-size: 12px;
  line-height: 1.65;
}

.ws-footer-pills {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.ws-footer-pills span {
  color: #53647e;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: #ffffff9e;
  border: 1px solid #275dbe1f;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
}

.ws-footer-column {
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  display: flex;
}

.ws-footer-column strong {
  color: #1b2d49;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 7px;
  font-size: 11px;
}

.ws-footer-column a, .ws-footer-column > span {
  color: #69778d;
  font-size: 12px;
  line-height: 1.45;
  transition: color .2s, transform .2s;
}

.ws-footer-column a:hover {
  color: #1768ff;
  transform: translateX(3px);
}

.ws-footer-column a span {
  color: #2c68ff;
  margin-left: 5px;
}

.ws-footer-contact a:first-of-type {
  color: #245fff;
  font-weight: 700;
}

.ws-footer-bottom {
  color: #758197;
  border-top: 1px solid #37558721;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 8px 2px;
  display: flex;
}

.ws-footer-bottom p, .ws-footer-bottom a, .ws-footer-status {
  margin: 0;
  font-size: 10px;
}

.ws-footer-status {
  color: #40526d;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  display: inline-flex;
}

.ws-footer-status i {
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 4px #78ffa721;
}

.ws-footer-bottom a {
  color: #40526d;
  font-weight: 700;
}

.ws-footer-bottom a span {
  color: #1768ff;
  margin-left: 6px;
}

@media (width <= 900px) {
  .ws-footer-main {
    grid-template-columns: 1.35fr 1fr 1fr;
  }

  .ws-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (width <= 620px) {
  .ws-footer {
    border-radius: 0;
    margin-top: 54px;
    padding: 12px;
    width: 100% !important;
  }

  .ws-footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 30px 22px;
    padding: 32px 10px 24px;
  }

  .ws-footer-brand, .ws-footer-contact {
    grid-column: 1 / -1;
  }

  .ws-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 10px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-footer-column a {
    transition: none;
  }
}

html body footer.ws-footer {
  isolation: isolate !important;
  color: #fff !important;
  backdrop-filter: none !important;
  background: linear-gradient(135deg, #174fe8 0%, #2864ff 52%, #5138d8 100%) !important;
  border-top: 1px solid #ffffff3d !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px #ffffff2e !important;
}

html body footer.ws-footer:before {
  content: "" !important;
  z-index: 0 !important;
  filter: brightness(0) invert() !important;
  opacity: .09 !important;
  pointer-events: none !important;
  background: url("../assets/webschets-logo.svg") center / contain no-repeat !important;
  width: min(64vw, 920px) !important;
  height: 74% !important;
  position: absolute !important;
  top: 50% !important;
  right: -3% !important;
  transform: translateY(-50%) !important;
}

html body footer.ws-footer .ws-footer-main, html body footer.ws-footer .ws-footer-bottom {
  z-index: 2 !important;
  position: relative !important;
}

html body footer.ws-footer .ws-footer-glow {
  z-index: 1 !important;
  opacity: .36 !important;
}

html body footer.ws-footer .ws-footer-logo img {
  filter: brightness(0) invert() !important;
}

html body footer.ws-footer .ws-footer-brand p, html body footer.ws-footer .ws-footer-column a, html body footer.ws-footer .ws-footer-column > span, html body footer.ws-footer .ws-footer-bottom, html body footer.ws-footer .ws-footer-bottom p, html body footer.ws-footer .ws-footer-bottom a, html body footer.ws-footer .ws-footer-status {
  color: #ffffffd1 !important;
}

html body footer.ws-footer .ws-footer-column strong, html body footer.ws-footer .ws-footer-contact a:first-of-type, html body footer.ws-footer .ws-footer-column a:hover {
  color: #fff !important;
}

html body footer.ws-footer .ws-footer-column a span, html body footer.ws-footer .ws-footer-bottom a span {
  color: #bcd0ff !important;
}

html body footer.ws-footer .ws-footer-pills span {
  color: #ffffffe6 !important;
  background: #ffffff1a !important;
  border-color: #ffffff42 !important;
  box-shadow: inset 0 1px #ffffff14 !important;
}

html body footer.ws-footer .ws-footer-bottom {
  border-top-color: #ffffff38 !important;
}

html body footer.ws-footer .ws-footer-status i {
  background: #78ffa7 !important;
  box-shadow: 0 0 0 4px #78ffa729 !important;
}

@media (width <= 620px) {
  html body footer.ws-footer:before {
    opacity: .07 !important;
    width: 125vw !important;
    height: 58% !important;
    right: -26% !important;
  }
}

html body footer.ws-footer:before {
  content: "WEBSCHETS." !important;
  filter: none !important;
  color: #fff !important;
  letter-spacing: -.075em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  opacity: .14 !important;
  background: none !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  font-family: Poppins, Arial, sans-serif !important;
  font-size: clamp(118px, 17vw, 270px) !important;
  font-weight: 800 !important;
  line-height: .82 !important;
  display: flex !important;
  top: 50% !important;
  left: 4% !important;
  right: auto !important;
  transform: translateY(-50%) !important;
}

@media (width <= 620px) {
  html body footer.ws-footer:before {
    opacity: .11 !important;
    font-size: clamp(94px, 31vw, 180px) !important;
    left: -12% !important;
  }
}

html body footer.ws-footer:before {
  font-size: clamp(94px, 13.6vw, 216px) !important;
  inset: auto auto 0 14% !important;
  transform: none !important;
}

@media (width <= 620px) {
  html body footer.ws-footer:before {
    font-size: clamp(75px, 24.8vw, 144px) !important;
    inset: auto auto 0 -2% !important;
    transform: none !important;
  }
}

html body footer.ws-footer:before {
  letter-spacing: -.055em !important;
  opacity: .075 !important;
  font-size: clamp(82px, 10.5vw, 168px) !important;
  font-weight: 800 !important;
  inset: auto auto -.045em 50% !important;
  transform: translateX(-45%) !important;
  -webkit-mask-image: linear-gradient(90deg, #0000 0%, #000 12% 88%, #0000 100%) !important;
  mask-image: linear-gradient(90deg, #0000 0%, #000 12% 88%, #0000 100%) !important;
}

@media (width <= 620px) {
  html body footer.ws-footer:before {
    opacity: .065 !important;
    font-size: clamp(68px, 20vw, 112px) !important;
    bottom: -.035em !important;
    left: 50% !important;
    transform: translateX(-48%) !important;
  }
}

html body footer.ws-footer:before {
  letter-spacing: -.015em !important;
  font-size: clamp(90px, 11.55vw, 185px) !important;
  -webkit-mask-image: linear-gradient(to top, #0000 0%, #00000047 18%, #000000b3 44%, #000 78% 100%) !important;
  mask-image: linear-gradient(to top, #0000 0%, #00000047 18%, #000000b3 44%, #000 78% 100%) !important;
}

@media (width <= 620px) {
  html body footer.ws-footer:before {
    font-size: clamp(75px, 22vw, 123px) !important;
  }
}

html body footer.ws-footer:before {
  letter-spacing: .015em !important;
  font-size: clamp(108px, 13.86vw, 222px) !important;
}

@media (width <= 620px) {
  html body footer.ws-footer:before {
    font-size: clamp(90px, 26.4vw, 148px) !important;
  }
}

:where(article, [class*="-card"], [class*="-panel"]) > strong:first-of-type, .timeline .day > span, .process .day > span {
  font-weight: 600 !important;
}

body.process-page #route {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
  overflow: hidden !important;
}

body.process-page {
  --process-type-hero: clamp(47.5px,5.7vw,77.9px);
  --process-type-section: clamp(42px,4.75vw,66px);
  --process-type-card: clamp(19px,1.65vw,25px);
  --process-type-body: clamp(15px,1.25vw,18px);
}

body.process-page, body.process-page :is(header, main, footer, button, input, select, textarea) {
  font-family: Poppins, Arial, sans-serif !important;
}

body.process-page main :is(h1, h2, h3) {
  font-family: Poppins, Arial, sans-serif !important;
  font-weight: 600 !important;
}

body.process-page main > .process-hero h1 {
  font-size: var(--process-type-hero) !important;
  letter-spacing: -.055em !important;
  line-height: .98 !important;
}

body.process-page main :is(.process-payment-copy h2, .process-copy h2, .process-heading h2, .wd-faq-heading h2, .wd-final-cta h2) {
  font-size: var(--process-type-section) !important;
  letter-spacing: -.05em !important;
  line-height: 1 !important;
}

body.process-page main :is(.process-hero-copy > p, .process-payment-copy > p, .process-copy > p, .process-heading > p, .wd-final-cta > p) {
  font-family: Poppins, Arial, sans-serif !important;
  font-size: var(--process-type-body) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

body.process-page main :is(.wd-eyebrow, button, .wd-button, li), body.process-page main article :is(p, small, span, i, em), body.process-page .shared-site-header nav a, body.process-page footer :is(p, a, span, small) {
  font-family: Poppins, Arial, sans-serif !important;
  font-weight: 400 !important;
}

body.process-page main article :is(h2, h3, strong, b), body.process-page main summary {
  font-family: Poppins, Arial, sans-serif !important;
  font-weight: 600 !important;
}

body.process-page main .support-grid article > h3 {
  font-size: var(--process-type-card) !important;
  line-height: 1.2 !important;
}

body.process-page main :is(button, .wd-button) {
  font-size: 13px !important;
  font-weight: 400 !important;
}

body.process-page .shared-site-header .nav-cta, body.process-page footer a {
  font-weight: 400 !important;
}

body.process-page main .wd-eyebrow {
  font-size: 10px !important;
  font-weight: 400 !important;
}

.cx-page {
  --cx-blue: #2864ff;
  --cx-violet: #7447f5;
  --cx-ink: #101b31;
  --cx-muted: #697892;
  --cx-line: #6f89b92e;
  background: var(--paper);
  color: var(--cx-ink);
  font-family: Poppins, sans-serif;
}

.cx-page main {
  background: radial-gradient(ellipse 55% 17% at 9% 23%,#dfeaff 0,transparent 72%),radial-gradient(ellipse 50% 18% at 92% 36%,#eee4ff 0,transparent 72%),radial-gradient(ellipse 56% 19% at 8% 55%,#e2edff 0,transparent 72%),radial-gradient(ellipse 52% 18% at 91% 69%,#eee5ff 0,transparent 72%),radial-gradient(ellipse 58% 18% at 12% 84%,#e4edff 0,transparent 72%),linear-gradient(180deg,#f7f8f7 0%,#f5f7fa 33%,#f7f8fb 62%,#f1f4f8 82%,var(--paper) 100%);
  background-repeat: no-repeat;
  overflow: hidden;
}

.cx-page h1, .cx-page h2, .cx-page h3, .cx-page p {
  margin-top: 0;
}

.cx-page h1, .cx-page h2, .cx-page h3 {
  color: var(--cx-ink);
  font-family: Poppins, sans-serif;
}

.cx-page em {
  color: var(--cx-blue);
  font-style: normal;
}

.cx-page img {
  max-width: 100%;
  display: block;
}

.cx-label {
  min-height: 31px;
  color: var(--cx-blue);
  letter-spacing: .16em;
  white-space: nowrap;
  background: #e7eeffe6;
  border-radius: 999px;
  align-items: center;
  padding: 0 13px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.cx-button {
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 26px;
  min-height: 58px;
  padding: 0 23px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
  display: inline-flex;
}

.cx-button:hover {
  transform: translateY(-3px);
}

.cx-button span {
  border-radius: 50%;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
}

.cx-hero .cx-button-primary {
  background: linear-gradient(120deg,var(--cx-blue),var(--cx-violet));
  color: #fff;
  font-weight: 500 !important;
  box-shadow: 0 18px 38px #484fe738;
}

.cx-button-primary span {
  background: #ffffff2b;
}

.cx-heading {
  grid-template-columns: 1.2fr .8fr;
  align-items: end;
  gap: 80px;
  margin-bottom: 46px;
  display: grid;
}

.cx-heading h2 {
  letter-spacing: -.055em;
  margin: 17px 0 0;
  font-size: clamp(42px, 5.1vw, 70px);
  font-weight: 600;
  line-height: 1.03;
}

.cx-heading > p {
  max-width: 470px;
  color: var(--cx-muted);
  margin: 0 0 5px;
  font-size: 15px;
  line-height: 1.75;
}

.cx-hero {
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 48px;
  min-height: calc(100vh - 90px);
  padding-top: 70px;
  padding-bottom: 104px;
  display: grid;
  position: relative;
}

.cx-hero-copy {
  z-index: 3;
  position: relative;
}

.cx-hero h1 {
  letter-spacing: -.068em;
  margin: 23px 0 24px;
  font-size: clamp(58px, 6.4vw, 91px);
  font-weight: 600;
  line-height: .98;
}

.cx-hero-copy > p {
  max-width: 580px;
  color: var(--cx-muted);
  font-size: 16px;
  line-height: 1.75;
}

.cx-hero-actions {
  align-items: center;
  gap: 24px;
  margin-top: 33px;
  display: flex;
}

.cx-hero-note {
  color: #6d7d94;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  font-weight: 500;
  display: flex;
}

.cx-hero-note i {
  background: #66dfaa;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 6px #66dfaa24;
}

.cx-hero-visual {
  perspective: 1200px;
  min-height: 575px;
  position: relative;
}

.cx-orbit {
  border: 1px solid #3c6aff2b;
  border-radius: 50%;
  position: absolute;
}

.cx-orbit-one {
  inset: 7% 3% 4% 8%;
}

.cx-orbit-two {
  border-style: dashed;
  inset: 17% 14% 14% 20%;
}

.cx-screen {
  backdrop-filter: blur(18px);
  background: #ffffffc2;
  border: 1px solid #fffffff5;
  border-radius: 22px;
  margin: 0;
  padding: 7px;
  position: absolute;
  overflow: hidden;
  box-shadow: 0 34px 70px #20346338;
}

.cx-screen img {
  object-fit: cover;
  object-position: top;
  border-radius: 14px;
  width: 100%;
  height: 100%;
}

.cx-screen-main {
  z-index: 2;
  aspect-ratio: 1.5;
  width: 76%;
  top: 16%;
  right: 2%;
}

.cx-screen-left {
  z-index: 1;
  aspect-ratio: 1.5;
  width: 46%;
  top: 6%;
  left: 2%;
  transform: rotate(-7deg);
}

.cx-screen-phone {
  z-index: 3;
  border-radius: 28px;
  width: 20%;
  height: 55%;
  padding: 6px;
  bottom: 0;
  right: 8%;
  transform: rotate(5deg);
}

.cx-screen-phone img {
  border-radius: 22px;
}

.cx-browser {
  align-items: center;
  gap: 5px;
  height: 25px;
  padding: 0 8px;
  display: flex;
}

.cx-browser i {
  background: #dce3ef;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.cx-browser i:first-child {
  background: #ff8276;
}

.cx-browser b {
  display: none;
}

.cx-screen-main > img {
  height: calc(100% - 25px);
}

.cx-float-tag {
  z-index: 5;
  backdrop-filter: blur(16px);
  color: #526179;
  letter-spacing: .1em;
  background: #ffffffd6;
  border: 1px solid #fff;
  border-radius: 13px;
  align-items: center;
  gap: 18px;
  padding: 12px 13px;
  font-size: 8px;
  font-weight: 700;
  display: flex;
  position: absolute;
  box-shadow: 0 15px 35px #293e6f24;
}

.cx-float-tag b {
  background: linear-gradient(135deg,var(--cx-blue),var(--cx-violet));
  color: #fff;
  border-radius: 8px;
  place-items: center;
  width: 23px;
  height: 23px;
  font-size: 10px;
  display: grid;
}

.cx-tag-one {
  bottom: 17%;
  left: 7%;
}

.cx-tag-two {
  top: 6%;
  right: 0;
}

.cx-sector {
  padding-top: 120px;
  padding-bottom: 120px;
}

.cx-sector-explorer {
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 16px;
  display: grid;
}

.cx-sector-nav {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.cx-sector-nav button {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 18px;
  grid-template-columns: 36px 1fr;
  gap: 0 13px;
  min-height: 76px;
  padding: 13px 16px;
  transition: all .25s;
  display: grid;
}

.cx-sector-nav button:hover, .cx-sector-nav button.is-active {
  background: #ffffffb3;
  border-color: #fffffff2;
  box-shadow: 0 16px 34px #2a3e6a17;
}

.cx-sector-nav button span {
  width: 36px;
  height: 36px;
  color: var(--cx-blue);
  background: #e8eeffe6;
  border-radius: 12px;
  grid-row: 1 / 3;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  display: grid;
}

.cx-sector-nav button b {
  color: var(--cx-ink);
  font: 600 15px Poppins;
}

.cx-sector-nav button small {
  color: #8793a6;
  margin-top: 3px;
  font: 400 9px Poppins;
}

.cx-sector-nav button.is-active span {
  background: linear-gradient(135deg,var(--cx-blue),var(--cx-violet));
  color: #fff;
}

.cx-sector-stage {
  background: linear-gradient(135deg, #ffffffb8, #e8efff94);
  border: 1px solid #fffffff0;
  border-radius: 35px;
  grid-template-columns: .72fr 1.28fr;
  align-items: center;
  gap: 25px;
  min-height: 515px;
  padding: 36px;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: 0 26px 60px #2a3e6a1c, inset 0 1px #fff;
}

.cx-sector-stage:before {
  content: "";
  aspect-ratio: 1;
  filter: blur(40px);
  background: #794af924;
  border-radius: 50%;
  width: 60%;
  position: absolute;
  bottom: -36%;
  right: -12%;
}

.cx-stage-copy {
  z-index: 2;
  position: relative;
}

.cx-stage-copy > span {
  color: var(--cx-blue);
  letter-spacing: .15em;
  font-size: 9px;
  font-weight: 700;
}

.cx-stage-copy h3 {
  letter-spacing: -.05em;
  margin: 18px 0 16px;
  font-size: clamp(32px, 3.5vw, 50px);
  font-weight: 600;
  line-height: 1.04;
}

.cx-stage-copy p {
  color: var(--cx-muted);
  font-size: 12px;
  line-height: 1.75;
}

.cx-stage-copy div {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 21px;
  display: flex;
}

.cx-stage-copy i {
  color: #6c7a90;
  background: #ffffffa6;
  border: 1px solid #b4c2dc73;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 8px;
  font-style: normal;
}

.cx-stage-device {
  z-index: 2;
  background: #fff;
  border-radius: 21px;
  padding: 7px;
  position: relative;
  overflow: hidden;
  transform: perspective(900px) rotateY(-5deg);
  box-shadow: 0 28px 58px #1f315b38;
}

.cx-stage-device img {
  aspect-ratio: 1.5;
  object-fit: cover;
  object-position: top;
  border-radius: 13px;
  width: 100%;
}

.cx-stage-index {
  color: #8492a8;
  letter-spacing: .12em;
  font-size: 8px;
  font-weight: 700;
  position: absolute;
  bottom: 23px;
  right: 28px;
}

.cx-feature-wrap, .cx-method-wrap {
  background: linear-gradient(125deg, #e0edffc2, #f0e8ffbd);
  border-block: 1px solid #ffffffe6;
  padding: 110px 0;
}

.cx-feature {
  grid-template-columns: .7fr 1.3fr;
  align-items: center;
  gap: 70px;
  display: grid;
}

.cx-feature-copy h2 {
  letter-spacing: -.06em;
  margin: 20px 0;
  font-size: clamp(45px, 5.4vw, 72px);
  font-weight: 600;
  line-height: 1.02;
}

.cx-feature-copy > p {
  color: var(--cx-muted);
  font-size: 14px;
  line-height: 1.75;
}

.cx-feature-copy dl {
  margin: 34px 0 0;
}

.cx-feature-copy dl div {
  border-top: 1px solid var(--cx-line);
  grid-template-columns: 90px 1fr;
  padding: 14px 0;
  display: grid;
}

.cx-feature-copy dt {
  color: #8c98aa;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 9px;
  font-weight: 700;
}

.cx-feature-copy dd {
  color: #33435d;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
}

.cx-feature-mockup {
  min-height: 550px;
  position: relative;
}

.cx-feature-browser {
  background: #fff;
  border: 1px solid #fff;
  border-radius: 28px;
  padding: 8px;
  position: absolute;
  inset: 4% 2% 9% 0;
  overflow: hidden;
  transform: rotate(1.5deg);
  box-shadow: 0 35px 75px #20345e33;
}

.cx-feature-browser img {
  object-fit: cover;
  object-position: top;
  border-radius: 19px;
  width: 100%;
  height: calc(100% - 25px);
}

.cx-feature-phone {
  z-index: 3;
  background: #151c2d;
  border-radius: 28px;
  width: 22%;
  height: 61%;
  padding: 6px;
  position: absolute;
  bottom: 0;
  right: -2%;
  transform: rotate(4deg);
  box-shadow: 0 26px 55px #1723454d;
}

.cx-feature-phone img {
  object-fit: cover;
  object-position: top;
  border-radius: 22px;
  width: 100%;
  height: 100%;
}

.cx-metric {
  z-index: 4;
  backdrop-filter: blur(15px);
  background: #ffffffd6;
  border: 1px solid #fff;
  border-radius: 16px;
  flex-direction: column;
  padding: 15px 18px;
  display: flex;
  position: absolute;
  bottom: 5%;
  left: -4%;
  box-shadow: 0 18px 38px #2a3d6924;
}

.cx-metric b {
  color: var(--cx-blue);
  font-size: 14px;
}

.cx-metric small {
  color: #7f8ca1;
  margin-top: 3px;
  font-size: 8px;
}

.cx-gallery {
  padding-top: 125px;
  padding-bottom: 125px;
}

.cx-device-switch button.is-active {
  background: linear-gradient(120deg,var(--cx-blue),var(--cx-violet));
  color: #fff;
}

.cx-final {
  background: linear-gradient(125deg,var(--cx-blue),var(--cx-violet));
  color: #fff;
  border-radius: 38px;
  grid-template-columns: 1.25fr .75fr;
  align-items: end;
  gap: 80px;
  margin-top: 120px;
  margin-bottom: 100px;
  padding: 65px;
  display: grid;
  box-shadow: 0 30px 70px #3d3fd640;
}

.cx-final .cx-label {
  color: #fff;
  background: #ffffff29;
}

.cx-final h2 {
  color: #fff;
  letter-spacing: -.06em;
  margin: 23px 0 0;
  font-size: clamp(45px, 5.2vw, 70px);
  font-weight: 600;
  line-height: 1.02;
}

.cx-final h2 em {
  color: #d6ddff;
}

.cx-final > div:last-child p {
  color: #ffffffc2;
  font-size: 13px;
  line-height: 1.7;
}

html body.cx-page main .cx-final .cx-button-light {
  color: var(--cx-ink);
  background: #fff;
  font-weight: 500 !important;
  margin-top: 19px;
  box-shadow: 0 16px 35px #1a1b5c2e;
}

.cx-button-light span {
  color: #fff;
  background: #ff6c5f;
}

@media (width <= 1000px) {
  .cx-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 90px;
  }

  .cx-hero-visual {
    min-height: 550px;
  }

  .cx-heading, .cx-feature {
    grid-template-columns: 1fr;
  }

  .cx-heading {
    gap: 25px;
  }

  .cx-heading > p {
    max-width: 650px;
  }

  .cx-sector-explorer {
    grid-template-columns: 1fr;
  }

  .cx-sector-nav {
    grid-template-columns: repeat(3, 1fr);
    display: grid;
  }

  .cx-feature {
    gap: 35px;
  }

  .cx-feature-copy {
    max-width: 680px;
  }

  .cx-final {
    grid-template-columns: 1fr;
  }
}

@media (width <= 700px) {
  .cx-page main {
    background: radial-gradient(ellipse 95% 13% at 5% 22%,#e2ecff 0,transparent 75%),radial-gradient(ellipse 90% 14% at 100% 43%,#eee5ff 0,transparent 75%),radial-gradient(ellipse 95% 15% at 0% 67%,#e3edff 0,transparent 75%),radial-gradient(ellipse 90% 13% at 100% 84%,#eee6ff 0,transparent 75%),linear-gradient(180deg,#f7f8f7,#f3f6fa 55%,var(--paper));
  }

  .cx-label {
    font-size: 8px;
  }

  .cx-page .shell {
    width: min(100% - 32px, 1236px);
  }

  .cx-hero {
    padding-top: 60px;
    padding-bottom: 65px;
  }

  .cx-hero h1 {
    letter-spacing: -.055em;
    font-size: 49px;
  }

  .cx-hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .cx-hero-visual {
    min-height: 350px;
    margin-top: 15px;
  }

  .cx-screen-main {
    width: 82%;
    top: 18%;
  }

  .cx-screen-left {
    width: 48%;
  }

  .cx-screen-phone {
    width: 23%;
    height: 55%;
    right: 4%;
  }

  .cx-tag-two {
    display: none;
  }

  .cx-heading h2, .cx-feature-copy h2, .cx-final h2 {
    letter-spacing: -.045em;
    font-size: 39px;
  }

  .cx-sector, .cx-gallery {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .cx-sector-nav {
    scroll-snap-type: x mandatory;
    flex-direction: row;
    padding-bottom: 8px;
    display: flex;
    overflow: auto;
  }

  .cx-sector-nav button {
    scroll-snap-align: start;
    flex: 0 0 185px;
  }

  .cx-sector-nav {
    scrollbar-color: #5b45ff #e8edff;
  }

  .cx-sector-nav::-webkit-scrollbar {
    height: 7px;
  }

  .cx-sector-nav::-webkit-scrollbar-track {
    background: #e8edff;
    border-radius: 999px;
  }

  .cx-sector-nav::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #2864ff, #7137ff, #2864ff);
    background-size: 200% 100%;
    border-radius: 999px;
    animation: cx-sector-swipe 2.4s linear infinite;
  }

  .cx-sector-stage {
    grid-template-columns: 1fr;
    min-height: 570px;
    padding: 25px;
  }

  .cx-stage-copy {
    order: 2;
  }

  .cx-stage-device {
    order: 1;
    transform: none;
  }

  .cx-feature-wrap, .cx-method-wrap {
    padding: 78px 0;
  }

  .cx-feature-mockup {
    min-height: 360px;
  }

  .cx-feature-phone {
    width: 27%;
  }

  .cx-final {
    border-radius: 30px;
    margin-top: 78px;
    margin-bottom: 65px;
    padding: 36px 25px;
  }

  .cx-button {
    min-height: 54px;
    font-size: 11px;
  }
}

@keyframes cx-sector-swipe {
  to {
    background-position: 200% 0;
  }
}

.cx-hero-mockup {
  isolation: isolate;
  align-items: center;
  margin: 0;
  display: flex;
}

.cx-hero-mockup:before, .cx-hero-mockup > .cx-orbit, .cx-hero-mockup > .cx-screen, .cx-hero-mockup > .cx-float-tag {
  display: none;
}

.cx-hero-mockup-image {
  z-index: 2;
  filter: drop-shadow(0 30px 38px #21356329);
  object-fit: contain;
  width: 112%;
  height: auto;
  margin-left: -6%;
  position: relative;
  max-width: none !important;
}

.cx-mockup-status {
  z-index: 4;
  backdrop-filter: blur(16px);
  background: #fffc;
  border: 1px solid #fffffff0;
  border-radius: 15px;
  grid-template-columns: 9px auto;
  gap: 0 9px;
  padding: 12px 16px;
  display: grid;
  position: absolute;
  bottom: 12%;
  right: 3%;
  box-shadow: 0 16px 35px #273a681f;
}

.cx-mockup-status i {
  background: #64dfaa;
  border-radius: 50%;
  grid-row: 1 / 3;
  align-self: center;
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 5px #64dfaa24;
}

.cx-mockup-status b {
  color: #35455f;
  font-size: 10px;
  font-weight: 600;
}

.cx-mockup-status small {
  color: #8491a4;
  margin-top: 2px;
  font-size: 8px;
}

@media (width <= 700px) {
  .cx-hero-copy {
    order: 2;
  }

  .cx-hero-mockup {
    order: 1;
    min-height: 330px;
    margin-top: 0;
    margin-bottom: 8px;
  }

  .cx-hero-mockup-image {
    width: 122%;
    margin-left: -11%;
  }

  .cx-mockup-status {
    padding: 10px 12px;
    bottom: 7%;
    right: 1%;
  }

  .cx-mockup-status small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cx-page * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

.cx-hero h1 {
  font-size: clamp(50px, 6vw, 82px);
}

.cx-hero-mockup-image {
  width: 101%;
  margin-left: -.5%;
}

.cx-hero .cx-button span {
  font-size: 0;
  transition: transform .25s, background .25s;
  position: relative;
}

.cx-hero .cx-button span:before {
  content: "";
  background: currentColor;
  border-radius: 2px;
  width: 1.5px;
  height: 11px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.cx-hero .cx-button span:after {
  content: "";
  border-bottom: 1.5px solid;
  border-right: 1.5px solid;
  width: 7px;
  height: 7px;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.cx-hero .cx-button:hover span {
  transform: translateY(2px);
}

@media (width <= 700px) {
  .cx-hero h1 {
    font-size: 48px;
  }

  .cx-hero-mockup-image {
    width: 110%;
    margin-left: -5%;
  }
}

.cx-hero .cx-button span:before, .cx-hero .cx-button span:after {
  display: none;
}

.cx-hero .cx-button span {
  font-size: initial;
}

.cx-hero .cx-button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 16px;
  height: 16px;
  transition: transform .25s;
}

.cx-hero .cx-button:hover svg {
  transform: translateY(2px);
}

.cx-sector-nav button span svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 18px;
  height: 18px;
}

.cx-feature-phone {
  background: linear-gradient(145deg, #616771 0, #0a0c11 14%, #171a20 84%, #676d78 100%);
  border: 1px solid #ffffff8a;
  border-radius: 35px;
  padding: 5px;
  overflow: visible;
  box-shadow: 0 30px 62px #0f193157, inset 0 0 0 1px #ffffff1f;
}

.cx-feature-phone:before {
  content: "";
  z-index: 5;
  background: #050609;
  border-radius: 999px;
  width: 39%;
  height: 13px;
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 1px 2px #ffffff24;
}

.cx-feature-phone:after {
  content: "";
  background: linear-gradient(#4d535c, #16191e, #555b65);
  border-radius: 0 3px 3px 0;
  width: 3px;
  height: 53px;
  position: absolute;
  top: 28%;
  right: -3px;
}

.cx-feature-phone img {
  border-radius: 30px;
  box-shadow: inset 0 0 0 1px #0003;
}

.cx-concept-explainer {
  grid-template-columns: .82fr 1.18fr;
  align-items: center;
  gap: 78px;
  padding-top: 125px;
  padding-bottom: 125px;
  display: grid;
}

.cx-explainer-copy h2 {
  letter-spacing: -.058em;
  margin: 19px 0 23px;
  font-size: clamp(45px, 5.1vw, 70px);
  font-weight: 600;
  line-height: 1.03;
}

.cx-explainer-copy > p {
  max-width: 570px;
  color: var(--cx-muted);
  font-size: 14px;
  line-height: 1.75;
}

.cx-explainer-steps {
  margin-top: 35px;
}

.cx-explainer-steps article {
  border-bottom: 1px solid var(--cx-line);
  grid-template-columns: 78px 1fr;
  align-items: start;
  gap: 20px;
  padding: 18px 0;
  display: grid;
}

.cx-explainer-steps article:first-child {
  border-top: 1px solid var(--cx-line);
}

.cx-explainer-steps article > span {
  color: var(--cx-blue);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 700;
}

.cx-explainer-steps strong, .cx-explainer-steps small {
  display: block;
}

.cx-explainer-steps strong {
  color: var(--cx-ink);
  font-size: 13px;
  font-weight: 600;
}

.cx-explainer-steps small {
  color: #7e8ca1;
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.55;
}

.cx-concept-machine {
  isolation: isolate;
  min-height: 590px;
  position: relative;
}

.cx-concept-machine:before {
  content: "";
  filter: blur(22px);
  background: radial-gradient(circle, #6757f933, #306cff12 48%, #0000 70%);
  border-radius: 50%;
  position: absolute;
  inset: 16%;
}

@keyframes cxMachineOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cxMachineFloat {
  0%, 100% {
    translate: 0;
  }

  50% {
    translate: 0 -11px;
  }
}

@media (width <= 1000px) {
  .cx-concept-explainer {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .cx-explainer-copy {
    max-width: 700px;
  }

  .cx-concept-machine {
    min-height: 530px;
  }
}

@media (width <= 700px) {
  .cx-concept-explainer {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .cx-concept-explainer .cx-concept-machine {
    order: -1;
  }

  .cx-explainer-copy h2 {
    letter-spacing: -.045em;
    font-size: 39px;
  }

  .cx-explainer-steps article {
    grid-template-columns: 70px 1fr;
  }

  .cx-concept-machine {
    min-height: 430px;
  }
}

.cx-concept-image {
  isolation: isolate;
  place-items: center;
  min-height: 520px;
  margin: 0;
  display: grid;
  overflow: visible;
}

.cx-concept-image:before {
  filter: blur(34px);
  background: radial-gradient(#3977ff2e, #7148ff14 47%, #0000 72%);
  inset: 12% 4%;
}

.cx-concept-image img {
  z-index: 1;
  object-fit: contain;
  filter: drop-shadow(0 28px 36px #27396729);
  width: 112%;
  max-width: none;
  height: auto;
  display: block;
  position: relative;
}

@media (width <= 1000px) {
  .cx-concept-image {
    min-height: 0;
  }

  .cx-concept-image img {
    width: min(100%, 820px);
    max-width: 100%;
  }
}

@media (width <= 700px) {
  .cx-concept-image {
    min-height: 0;
  }

  .cx-concept-image img {
    width: 108%;
    max-width: none;
  }
}

.cx-hero-signal {
  backdrop-filter: blur(18px);
  background: linear-gradient(110deg, #ffffffa3, #eef4ff85, #f3ebff94);
  border: 1px solid #fffffff2;
  border-radius: 22px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 34px;
  min-height: 72px;
  padding: 12px 18px;
  display: grid;
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  box-shadow: 0 18px 48px #263c7017;
}

.cx-signal-status, .cx-signal-tag {
  color: #65748b;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  align-items: center;
  font-size: 8px;
  font-weight: 600;
  display: flex;
}

.cx-signal-status i {
  background: #58dfa0;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  margin-right: 9px;
  animation: 2.4s ease-in-out infinite cxSignalPulse;
  box-shadow: 0 0 0 6px #58dfa021;
}

.cx-hero-signal p {
  color: #263651;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin: 0;
  font-size: 12px;
  display: flex;
}

.cx-hero-signal p strong {
  font-weight: 500;
}

.cx-hero-signal p b {
  color: #8a74f8;
  font-weight: 500;
}

.cx-hero-signal p em {
  color: var(--cx-blue);
  font-style: normal;
  font-weight: 600;
}

.cx-signal-tag {
  color: var(--cx-blue);
  background: #ffffff9e;
  border: 1px solid #4e72d729;
  border-radius: 999px;
  justify-self: end;
  padding: 9px 13px;
}

@keyframes cxSignalPulse {
  50% {
    box-shadow: 0 0 0 10px #58dfa000;
  }
}

.cx-method-wrap {
  background: linear-gradient(135deg, #e2eeffb8, #f1e9ffad);
  padding: 120px 0;
  overflow: hidden;
}

.cx-positioning {
  grid-template-columns: .72fr 1.28fr;
  align-items: center;
  gap: 76px;
  display: grid;
}

.cx-positioning-copy h2 {
  letter-spacing: -.06em;
  margin: 20px 0 24px;
  font-size: clamp(45px, 5vw, 68px);
  font-weight: 600;
  line-height: 1.02;
}

.cx-positioning-copy > p {
  max-width: 510px;
  color: var(--cx-muted);
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
}

@keyframes cxMapOrbit {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes cxMapFloat {
  50% {
    transform: translateY(-7px);
  }
}

@media (width <= 1000px) {
  .cx-hero-signal {
    grid-column: 1 / -1;
    margin-top: 22px;
    position: static;
  }

  .cx-positioning {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .cx-positioning-copy {
    max-width: 720px;
  }
}

@media (width <= 700px) {
  .cx-hero-signal {
    grid-template-columns: 1fr auto;
    gap: 13px;
    padding: 16px;
  }

  .cx-hero-signal p {
    flex-wrap: wrap;
    grid-area: 2 / 1 / auto / -1;
    justify-content: flex-start;
    gap: 8px;
    font-size: 10px;
  }

  .cx-signal-tag {
    font-size: 6px;
  }

  .cx-method-wrap {
    padding: 82px 0;
  }

  .cx-positioning-copy h2 {
    font-size: 39px;
  }
}

.cx-monitor-showcase {
  grid-template-columns: .72fr 1.28fr;
  align-items: center;
  gap: 64px;
  padding-top: 94px;
  padding-bottom: 116px;
  display: grid;
}

.cx-monitor-copy h2 {
  letter-spacing: -.06em;
  margin: 18px 0 25px;
  font-size: clamp(47px, 5.2vw, 70px);
  font-weight: 600;
  line-height: 1.02;
}

.cx-monitor-copy > p {
  max-width: 510px;
  color: var(--cx-muted);
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
}

.cx-monitor-proof {
  border-top: 1px solid var(--cx-line);
  align-items: center;
  gap: 13px;
  margin-top: 28px;
  padding-top: 21px;
  display: flex;
}

.cx-monitor-proof > i {
  background: #5bdba0;
  border-radius: 50%;
  width: 11px;
  height: 11px;
  box-shadow: 0 0 0 7px #5bdba021;
}

.cx-monitor-proof span {
  flex-direction: column;
  display: flex;
}

.cx-monitor-proof strong {
  color: #263750;
  font-size: 11px;
  font-weight: 600;
}

.cx-monitor-proof small {
  color: #7f8ca1;
  margin-top: 3px;
  font-size: 9px;
}

.cx-monitor-visual {
  isolation: isolate;
  place-items: center;
  min-height: 560px;
  margin: 0;
  display: grid;
  position: relative;
}

.cx-monitor-halo {
  z-index: -1;
  aspect-ratio: 1;
  filter: blur(62px);
  background: linear-gradient(135deg, #3777ff3d, #7e47f630);
  border-radius: 50%;
  width: 78%;
  position: absolute;
}

.cx-monitor-visual > img {
  z-index: 2;
  filter: drop-shadow(0 34px 34px #1c2e5333);
  width: 112%;
  max-width: none;
  height: auto;
  display: block;
  position: relative;
}

.cx-monitor-visual figcaption {
  z-index: 3;
  backdrop-filter: blur(16px);
  background: #ffffffc7;
  border: 1px solid #fffffff2;
  border-radius: 17px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  display: flex;
  position: absolute;
  bottom: 8%;
  right: 1%;
  box-shadow: 0 18px 40px #283a6521;
}

.cx-monitor-visual figcaption > i {
  background: #5cdea0;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 6px #5cdea021;
}

.cx-monitor-visual figcaption span {
  flex-direction: column;
  display: flex;
}

.cx-monitor-visual figcaption strong {
  color: #293951;
  font-size: 10px;
  font-weight: 600;
}

.cx-monitor-visual figcaption small {
  color: #8190a4;
  margin-top: 2px;
  font-size: 8px;
}

.cx-direction-board {
  backdrop-filter: blur(18px);
  background: #ffffff80;
  border: 1px solid #fffffff0;
  border-radius: 34px;
  overflow: hidden;
  box-shadow: 0 28px 65px #283b661a;
}

.cx-direction-head {
  border-bottom: 1px solid var(--cx-line);
  justify-content: space-between;
  align-items: center;
  padding: 21px 25px;
  display: flex;
}

.cx-direction-row {
  border-bottom: 1px solid var(--cx-line);
  grid-template-columns: 75px 1fr 1.35fr;
  align-items: center;
  gap: 22px;
  padding: 22px 25px;
  display: grid;
}

.cx-direction-row > span {
  color: var(--cx-blue);
  letter-spacing: .12em;
  font-size: 8px;
  font-weight: 700;
}

.cx-direction-row strong {
  color: #253750;
  font-size: 13px;
  font-weight: 600;
}

.cx-direction-row p {
  color: #748299;
  margin: 0;
  font-size: 10px;
  line-height: 1.55;
}

.cx-direction-outcome {
  background: linear-gradient(120deg, #2a6cff1f, #7341f424);
  padding: 27px 190px 27px 25px;
  position: relative;
}

.cx-direction-outcome:before {
  content: "";
  background: linear-gradient(var(--cx-blue),var(--cx-violet));
  width: 4px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.cx-direction-outcome span {
  color: #596b86;
  font-size: 9px;
  font-weight: 600;
  position: absolute;
  bottom: 27px;
  right: 24px;
}

@media (width <= 1000px) {
  .cx-monitor-showcase {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .cx-monitor-copy {
    max-width: 700px;
  }

  .cx-monitor-visual {
    min-height: 500px;
  }

  .cx-positioning {
    grid-template-columns: 1fr;
  }

  .cx-direction-board {
    max-width: 800px;
  }
}

@media (width <= 700px) {
  .cx-monitor-showcase {
    padding-top: 75px;
    padding-bottom: 82px;
  }

  .cx-monitor-copy h2 {
    font-size: 39px;
  }

  .cx-monitor-visual {
    min-height: 350px;
  }

  .cx-monitor-visual > img {
    width: 123%;
  }

  .cx-monitor-visual figcaption {
    bottom: 0;
    right: 0;
  }

  .cx-direction-row {
    grid-template-columns: 62px 1fr;
    gap: 10px 16px;
    padding: 19px;
  }

  .cx-direction-row p {
    grid-column: 2;
  }

  .cx-direction-outcome {
    padding: 24px 20px;
  }

  .cx-direction-outcome span {
    margin-top: 15px;
    display: block;
    position: static;
  }
}

@media (width >= 1001px) {
  .cx-monitor-showcase {
    grid-template-columns: 1.28fr .72fr;
  }
}

.cx-hero .cx-button-primary {
  white-space: nowrap;
}

.cx-monitor-visual > img {
  width: 101%;
}

.cx-direction-board {
  background: #ffffff6b;
  border-radius: 26px;
  box-shadow: 0 22px 48px #283b6614;
}

body.cx-page {
  background: radial-gradient(ellipse 55% 17% at 9% 23%,#dfeaff 0,transparent 72%),
    radial-gradient(ellipse 50% 18% at 92% 36%,#eee4ff 0,transparent 72%),
    radial-gradient(ellipse 56% 19% at 8% 55%,#e2edff 0,transparent 72%),
    radial-gradient(ellipse 52% 18% at 91% 69%,#eee5ff 0,transparent 72%),
    radial-gradient(ellipse 58% 18% at 12% 84%,#e4edff 0,transparent 72%),
    linear-gradient(180deg,#f7f8f7 0%,#f5f7fa 33%,#f7f8fb 62%,#f1f4f8 82%,var(--paper) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body.cx-page main {
  background: none;
}

body.cx-page .cx-feature-wrap, body.cx-page .cx-method-wrap, body.cx-page .cx-monitor-showcase, body.cx-page .cx-sector {
  background: none;
  border-top: 0;
  border-bottom: 0;
}

@media (width <= 700px) {
  body.cx-page {
    background: radial-gradient(ellipse 95% 13% at 5% 22%,#e2ecff 0,transparent 75%),
      radial-gradient(ellipse 90% 14% at 100% 43%,#eee5ff 0,transparent 75%),
      radial-gradient(ellipse 95% 15% at 0% 67%,#e3edff 0,transparent 75%),
      radial-gradient(ellipse 90% 13% at 100% 84%,#eee6ff 0,transparent 75%),
      linear-gradient(180deg,#f7f8f7,#f3f6fa 55%,var(--paper));
    background-attachment: scroll;
  }

  body.cx-page main {
    background: none;
  }
}

.cx-direction-head {
  padding: 17px 23px;
}

.cx-direction-row {
  grid-template-columns: 72px 1fr 1.4fr;
  padding: 18px 23px;
}

.cx-direction-row strong {
  font-weight: 400;
}

.cx-direction-outcome {
  padding: 22px 180px 22px 23px;
}

.cx-direction-outcome strong {
  font-weight: 400;
}

.cx-direction-outcome span {
  font-weight: 400;
  bottom: 22px;
}

@media (width <= 700px) {
  .cx-monitor-visual > img {
    width: 111%;
  }

  .cx-direction-row {
    padding: 17px;
  }

  .cx-direction-outcome {
    padding: 22px 18px;
  }
}

html body.cx-page main .cx-label {
  color: #2864ff !important;
  letter-spacing: 1.32px !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  min-height: 0 !important;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  display: inline-block !important;
}

html body.cx-page main .cx-final .cx-label {
  color: #ffffffe6 !important;
}

@media (width <= 700px) {
  html body.cx-page main .cx-label {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
}

html body.cx-page.cx-page main > section.cx-hero.cx-hero .cx-label.unified-hero-label {
  letter-spacing: 1.32px !important;
  margin: 0 0 14px !important;
}

.cx-feature-phone {
  aspect-ratio: 9 / 19.5;
  box-sizing: border-box;
  width: 25%;
  height: auto;
  bottom: 1%;
  right: -1%;
}

.cx-feature-phone img {
  object-fit: cover;
  object-position: top center;
  width: 100%;
  height: 100%;
  display: block;
}

@media (width <= 700px) {
  .cx-feature-phone {
    aspect-ratio: 9 / 19.5;
    width: 36%;
    min-width: 118px;
    max-width: 150px;
    height: auto;
    right: -2%;
  }
}

.cx-feature-copy dl {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 38px 0 0;
  display: grid;
}

.cx-feature-copy dl div {
  border: 0;
  min-width: 0;
  padding: 2px 0 2px 15px;
  display: block;
  position: relative;
}

.cx-feature-copy dl div:before {
  content: "";
  opacity: .72;
  background: linear-gradient(#2864ff, #7137ff);
  border-radius: 999px;
  width: 2px;
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
}

.cx-feature-copy dt {
  color: #2864ff;
  letter-spacing: .12em;
  margin: 0 0 7px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
}

.cx-feature-copy dd {
  color: #263a58;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

@media (width <= 700px) {
  .cx-feature-copy dl {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 30px;
  }
}

.cx-feature-copy dl {
  flex-direction: column;
  gap: 16px;
  margin-top: 34px;
  display: flex;
}

.cx-feature-copy dl div {
  border: 0;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  padding: 0 0 0 17px;
  display: grid;
}

.cx-feature-copy dl div:before {
  opacity: 1;
  background: linear-gradient(135deg, #2864ff, #7137ff);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  top: 7px;
  bottom: auto;
  box-shadow: 0 0 0 5px #2864ff14;
}

.cx-feature-copy dt {
  white-space: nowrap;
  margin: 0;
}

.cx-feature-copy dd {
  font-size: 12px;
  line-height: 1.5;
}

@media (width <= 700px) {
  .cx-feature-copy dl {
    gap: 15px;
    display: flex;
  }

  .cx-feature-copy dl div {
    grid-template-columns: 72px minmax(0, 1fr);
  }
}

.cx-feature-copy dl div:before {
  box-sizing: border-box;
  background: none;
  border: 2px solid #4b6fff;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 5px #2864ff12;
}

.cx-explainer-steps {
  flex-direction: column;
  gap: 18px;
  margin-top: 34px;
  display: flex;
}

.cx-explainer-steps article, .cx-explainer-steps article:first-child {
  border: 0;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 0 0 0 17px;
  display: grid;
  position: relative;
}

.cx-explainer-steps article:before {
  content: "";
  box-sizing: border-box;
  background: none;
  border: 2px solid #4b6fff;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 7px;
  left: 0;
  box-shadow: 0 0 0 5px #2864ff12;
}

.cx-explainer-steps article > span {
  color: #2864ff;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-top: 2px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
}

.cx-explainer-steps article strong {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.cx-explainer-steps article small {
  margin-top: 4px;
  line-height: 1.55;
}

.cx-direction-board {
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  flex-direction: column;
  gap: 18px;
  padding: 0;
  display: flex;
  overflow: visible;
}

.cx-direction-head {
  background: none;
  border: 0;
  padding: 0 0 6px 17px;
}

.cx-direction-row {
  border: 0;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: start;
  gap: 5px 14px;
  padding: 0 0 0 17px;
  display: grid;
  position: relative;
}

.cx-direction-row:before, .cx-direction-outcome:before {
  content: "";
  box-sizing: border-box;
  background: none;
  border: 2px solid #4b6fff;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 7px;
  bottom: auto;
  left: 0;
  box-shadow: 0 0 0 5px #2864ff12;
}

.cx-direction-row > span {
  padding-top: 2px;
  font-size: 9px;
  font-weight: 600;
}

.cx-direction-row strong {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.cx-direction-row p {
  grid-column: 2;
  font-size: 10px;
  line-height: 1.55;
}

html body.cx-page .cx-direction-outcome small {
  font-size: 9px;
  font-weight: 500 !important;
}

.cx-direction-outcome strong {
  margin-top: 7px;
  font-size: 15px;
  font-weight: 500;
}

.cx-direction-outcome span {
  margin-top: 9px;
  font-size: 9px;
  display: block;
  position: static;
}

@media (width <= 700px) {
  .cx-explainer-steps article, .cx-explainer-steps article:first-child, .cx-direction-row {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .cx-direction-board {
    gap: 17px;
  }

  .cx-direction-outcome {
    padding: 0 0 0 17px;
  }
}

.cx-direction-board {
  backdrop-filter: blur(18px);
  background: #ffffff6b;
  border: 1px solid #fffffff0;
  border-radius: 26px;
  padding: 0;
  display: block;
  overflow: hidden;
  box-shadow: 0 22px 48px #283b6614;
}

.cx-direction-head {
  border-bottom: 1px solid var(--cx-line);
  background: none;
  justify-content: space-between;
  align-items: center;
  padding: 17px 23px;
  display: flex;
}

.cx-direction-head span {
  color: var(--cx-blue);
  letter-spacing: .14em;
  font-size: 8px;
  font-weight: 700;
}

.cx-direction-head small {
  color: #8996aa;
  font-size: 8px;
  font-weight: 500;
}

.cx-direction-row {
  border-bottom: 1px solid var(--cx-line);
  grid-template-columns: 72px 1fr 1.4fr;
  align-items: center;
  gap: 22px;
  padding: 18px 23px;
  display: grid;
  position: relative;
}

.cx-direction-row:before {
  content: none;
}

.cx-direction-row > span {
  color: var(--cx-blue);
  letter-spacing: .12em;
  padding-top: 0;
  font-size: 8px;
  font-weight: 700;
}

.cx-direction-row strong {
  color: #253750;
  font-size: 13px;
  font-weight: 500 !important;
  line-height: normal;
}

.cx-direction-row p {
  color: #748299;
  grid-column: auto;
  margin: 0;
  font-size: 10px;
  line-height: 1.55;
}

.cx-direction-outcome {
  background: linear-gradient(120deg, #2a6cff1f, #7341f424);
  border: 0;
  padding: 22px 180px 22px 23px;
  position: relative;
}

.cx-direction-outcome:before {
  content: "";
  background: linear-gradient(var(--cx-blue),var(--cx-violet));
  width: 4px;
  height: auto;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.cx-direction-outcome small {
  color: var(--cx-blue);
  letter-spacing: .14em;
  font-size: 7px;
  font-weight: 500 !important;
  display: block;
}

.cx-direction-outcome strong {
  color: #21334d;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500 !important;
  line-height: 1.3;
  display: block;
}

.cx-direction-outcome span {
  color: #596b86;
  margin-top: 0;
  font-size: 9px;
  font-weight: 400;
  display: inline;
  position: absolute;
  bottom: 22px;
  right: 24px;
}

.cx-direction-outcome b {
  color: var(--cx-blue);
  margin-left: 6px;
}

.cx-explainer-steps article > span {
  color: #2864ff !important;
  letter-spacing: .12em !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.cx-explainer-steps article strong {
  color: #263a58 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

.cx-explainer-steps article small {
  color: #8793a6;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.55;
}

@media (width <= 700px) {
  .cx-direction-row {
    grid-template-columns: 62px 1fr;
    gap: 10px 16px;
    padding: 17px;
  }

  .cx-direction-row p {
    grid-column: 2;
  }

  .cx-direction-outcome {
    padding: 22px 18px;
  }

  .cx-direction-outcome span {
    margin-top: 15px;
    display: block;
    position: static;
  }
}

.cx-explainer-steps article, .cx-explainer-steps article:first-child {
  align-items: center;
}

.cx-explainer-steps article:before {
  top: 50%;
  transform: translateY(-50%);
}

.cx-explainer-steps article > span {
  align-self: center;
  padding-top: 0;
}

.cx-explainer-steps article > div {
  align-self: center;
}

.cx-explainer-steps article strong {
  display: block;
  font-weight: 600 !important;
}

.cx-feature-copy dd, .cx-explainer-steps article strong {
  color: #263a58 !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.cx-explainer-steps article strong {
  margin: 0;
}

.cx-feature-copy dt, .cx-explainer-steps article > span {
  white-space: nowrap;
  align-self: center;
  color: #2864ff !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Poppins, sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.cx-feature-browser > img {
  object-fit: contain !important;
  object-position: center top !important;
  background: #fff !important;
  width: 100% !important;
  height: calc(100% - 25px) !important;
  display: block !important;
}

.cx-feature-phone {
  overflow: hidden !important;
}

.cx-feature-phone > img {
  object-fit: cover !important;
  object-position: center top !important;
  background: #fff !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.cx-explainer-steps article > div {
  align-items: center;
  min-height: 28px;
  display: flex;
}

html body.cx-page main .cx-final h2, html body.cx-page main .cx-final h2 em, html body.cx-page main .cx-final h2 span {
  color: #fff !important;
}

html body.cx-page main .cx-final .cx-button-light > span {
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
  color: #111827 !important;
  background: none !important;
  border-radius: 0 !important;
  margin-left: 0 !important;
}

:root {
  --ws-font: "Poppins", Arial, sans-serif;
  --ws-ink: #122945;
  --ws-muted: #71819a;
  --ws-blue: #2d67ff;
  --ws-shell: 1200px;
  --ws-gutter: 48px;
  --ws-section-space: clamp(92px, 9vw, 144px);
  --ws-section-space-compact: clamp(68px, 7vw, 108px);
  --ws-title-hero: clamp(48px, 5.2vw, 68px);
  --ws-title-section: clamp(34px, 4vw, 50px);
  --ws-title-card: clamp(19px, 1.65vw, 25px);
  --ws-body: clamp(15px, 1.25vw, 18px);
  --ws-body-small: 13px;
  --ws-label: 10px;
}

html {
  scroll-padding-top: 100px;
}

body {
  font-family: var(--ws-font);
}

.shell {
  width: min(var(--ws-shell), calc(100% - var(--ws-gutter)));
}

body main > :is(.hero, .page-hero, .wd-service-intro, .cx-hero, .process-hero, .contact-hero) h1 {
  font-family: var(--ws-font) !important;
  font-size: var(--ws-title-hero) !important;
  letter-spacing: -.055em !important;
  font-weight: 600 !important;
  line-height: .98 !important;
}

main :is(.section-head, .problem-head, .usp-section-heading, .contact-heading, .process-heading, .wd-faq-heading) > :is(h2, div > h2), main :is(.wd-intro-copy, .wd-motion-copy, .wd-case-copy, .process-copy, .process-payment-copy, .process-route-feature-copy, .form-copy, .direct-grid > div, .brand-v2-copy) > h2, main section > .shell > :is(h2) {
  font-family: var(--ws-font) !important;
  font-size: var(--ws-title-section) !important;
  letter-spacing: -.05em !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

main h2 em, main h2 span:not(.popular-badge):not(.nav-cta-icon) {
  font-style: normal;
}

body main > :is(.hero, .page-hero, .wd-service-intro, .cx-hero, .process-hero, .contact-hero) :is(.hero-copy, .services-hero-copy, .cx-hero-copy) > p:not(.kicker):not(.eyebrow):not(.hero-eyebrow), main :is(.section-head, .problem-head, .usp-section-heading, .contact-heading, .process-heading, .wd-faq-heading) > p, main :is(.wd-intro-copy, .wd-motion-copy, .wd-case-copy, .process-copy, .process-payment-copy, .process-route-feature-copy, .form-copy, .direct-grid > div, .brand-v2-copy) > p {
  color: var(--ws-muted) !important;
  font-family: var(--ws-font) !important;
  font-size: var(--ws-body) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

main :is(.kicker, .wd-eyebrow, .eyebrow, .cx-label, .about-label) {
  text-transform: uppercase;
  font-family: var(--ws-font) !important;
  font-size: var(--ws-label) !important;
  letter-spacing: .14em !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

main article > h3, main article > div > h3 {
  font-family: var(--ws-font);
  font-size: var(--ws-title-card);
  letter-spacing: -.025em;
  font-weight: 600;
  line-height: 1.2;
}

main article > p, main article > div > p {
  font-family: var(--ws-font);
  font-size: var(--ws-body-small);
  line-height: 1.6;
}

main :is(.button, .wd-button, .cx-button, .services-hero-cta), .shared-site-header .nav-cta {
  min-height: 48px;
  padding: 0 20px;
  font-family: var(--ws-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

body main > section:not(:first-child):not(.usp-strip):not(.contact-strip):not(.service-page-links):not(.wd-final-cta):not(.cta):not(.cx-final) {
  margin-top: 0;
}

body main > section.shell:not(:first-child):not(.usp-strip):not(.wd-final-cta):not(.cta):not(.cx-final) {
  padding-top: var(--ws-section-space-compact);
  padding-bottom: var(--ws-section-space-compact);
}

body main > section:not(.shell):not(:first-child):not(.contact-strip):not(.service-page-links):not(.wd-final-cta):not(.cta) > .shell {
  padding-top: var(--ws-section-space);
  padding-bottom: var(--ws-section-space);
}

.shared-site-header {
  width: min(1236px, 100% - 24px) !important;
  height: 70px !important;
  font-family: var(--ws-font) !important;
  border-radius: 22px !important;
  margin: 0 auto !important;
  padding: 0 18px !important;
  top: 10px !important;
}

.shared-site-header nav a {
  font-size: 13px !important;
  font-weight: 500 !important;
}

.shared-site-header nav a.active {
  font-weight: 600 !important;
}

@media (width <= 900px) {
  :root {
    --ws-section-space: 96px;
    --ws-section-space-compact: 72px;
  }

  .shared-site-header {
    height: 64px !important;
    top: 8px !important;
  }

  main :is(.section-head, .problem-head, .usp-section-heading, .contact-heading, .process-heading, .wd-faq-heading) {
    gap: 22px !important;
  }
}

@media (width <= 600px) {
  :root {
    --ws-gutter: 28px;
    --ws-section-space: 78px;
    --ws-section-space-compact: 62px;
    --ws-title-hero: clamp(40px, 11vw, 46px);
    --ws-title-section: clamp(31px, 9vw, 38px);
    --ws-title-card: 20px;
    --ws-body: 15px;
    --ws-body-small: 12.5px;
    --ws-label: 9px;
  }

  .shared-site-header {
    width: calc(100% - 16px) !important;
    height: 58px !important;
    padding: 0 12px !important;
  }

  main :is(.button, .wd-button, .cx-button, .services-hero-cta) {
    width: auto;
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.home-page, .home-page :is(header, main, footer, button, input, select, textarea) {
  font-family: Poppins, Arial, sans-serif !important;
}

.home-page main :is(h1, h2, h3) {
  font-family: Poppins, Arial, sans-serif !important;
  font-weight: 600 !important;
}

.home-page main > .hero h1 {
  font-size: var(--ws-title-hero) !important;
}

.home-page main :is(.section-head h2, .problem-head h2, .usp-section-heading h2, .home-branding-copy h2, .testimonial-heading h2, .cta h2, .website-scan h2) {
  font-size: var(--ws-title-section) !important;
  letter-spacing: -.05em !important;
  line-height: 1 !important;
}

.home-page main :is(.hero-copy > p:not(.hero-eyebrow), .section-head > p, .problem-head > p, .usp-section-heading > p, .home-branding-copy > p, .about-main p, .testimonial-grid blockquote, .cta > p, .website-scan p) {
  font-family: Poppins, Arial, sans-serif !important;
  font-size: var(--ws-body) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

.home-page main article :is(p, small, span, i, em), .home-page main :is(.kicker, .hero-eyebrow, .about-label), .home-page .shared-site-header nav a, .home-page main :is(.button, .text-link), .home-page footer :is(p, a, span, small) {
  font-family: Poppins, Arial, sans-serif !important;
  font-weight: 400 !important;
}

.home-page main article :is(h2, h3, strong, b), .home-page .testimonial-owner, .home-page .price-card :is(h3, strong) {
  font-family: Poppins, Arial, sans-serif !important;
  font-weight: 600 !important;
}

.home-page main :is(.button, .text-link) {
  font-size: 13px !important;
}

.home-page .shared-site-header .nav-cta, .home-page main :is(button, .button, .text-link, .day), .home-page footer a {
  font-weight: 400 !important;
}

.home-page main :is(.kicker, .hero-eyebrow, .about-label) {
  font-size: var(--ws-label) !important;
}

.services-page, .services-page :is(header, main, footer, button, input, select, textarea) {
  font-family: Poppins, Arial, sans-serif !important;
}

.services-page main :is(h1, h2, h3) {
  font-family: Poppins, Arial, sans-serif !important;
  font-weight: 600 !important;
}

.services-page main > .page-hero h1 {
  font-size: var(--ws-title-hero) !important;
}

.services-page main :is(.service-page-links h2, .service-grid > div:first-child > h2, .responsive-showcase h2, .service-detail h2, .route-explorer-head h2, .standard-included > h2, .faq-head h2, .cta h2) {
  font-size: var(--ws-title-section) !important;
  letter-spacing: -.05em !important;
  line-height: 1 !important;
}

.services-page main :is(.services-hero-copy > p, .service-page-links > p, .service-grid > div:first-child > p, .responsive-showcase > div > p, .service-detail-copy > p, .route-explorer-head > p, .standard-included > p, .faq-head > p, .cta > p) {
  font-family: Poppins, Arial, sans-serif !important;
  font-size: var(--ws-body) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

.services-page main article :is(p, small, span, i, em), .services-page main :is(.kicker, .eyebrow), .services-page .shared-site-header nav a, .services-page main :is(button, .button, .services-hero-cta), .services-page footer :is(p, a, span, small) {
  font-family: Poppins, Arial, sans-serif !important;
  font-weight: 400 !important;
}

.services-page main article :is(h2, h3, strong, b), .services-page main .route-row strong {
  font-family: Poppins, Arial, sans-serif !important;
  font-weight: 600 !important;
}

.services-page main article > h2, .services-page main article > div > h2, .services-page main article > h3, .services-page main article > div > h3 {
  font-size: var(--ws-title-card) !important;
  line-height: 1.2 !important;
}

.services-page main :is(button, .button, .services-hero-cta) {
  font-size: 13px !important;
}

.services-page .shared-site-header .nav-cta, .services-page main :is(button, .button, .services-hero-cta), .services-page footer a {
  font-weight: 400 !important;
}

.services-page main :is(.kicker, .eyebrow) {
  font-size: var(--ws-label) !important;
}

.concepts-page, .concepts-page :is(header, main, footer, button, input, select, textarea) {
  font-family: Poppins, Arial, sans-serif !important;
}

.concepts-page main :is(h1, h2, h3) {
  font-family: Poppins, Arial, sans-serif !important;
  font-weight: 600 !important;
}

.concepts-page main > .cx-hero h1 {
  font-size: var(--ws-title-hero) !important;
}

.concepts-page main :is(.cx-heading h2, .cx-feature-copy h2, .cx-monitor-copy h2, .cx-positioning-copy h2, .cx-final h2) {
  font-size: var(--ws-title-section) !important;
  letter-spacing: -.05em !important;
  line-height: 1 !important;
}

.concepts-page main :is(.cx-hero-copy > p, .cx-heading > p, .cx-feature-copy > p, .cx-monitor-copy > p, .cx-positioning-copy > p, .cx-final > div > p) {
  font-family: Poppins, Arial, sans-serif !important;
  font-size: var(--ws-body) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

.concepts-page main :is(.cx-label, button, .cx-button), .concepts-page main article :is(p, small, span, i, em), .concepts-page .shared-site-header nav a, .concepts-page footer :is(p, a, span, small) {
  font-family: Poppins, Arial, sans-serif !important;
  font-weight: 400 !important;
}

.concepts-page main article :is(h2, h3, strong, b), .concepts-page main .cx-stage-copy h3 {
  font-family: Poppins, Arial, sans-serif !important;
  font-weight: 600 !important;
}

.concepts-page main article > h3, .concepts-page main article > div > h3, .concepts-page main .cx-stage-copy h3 {
  font-size: var(--ws-title-card) !important;
  line-height: 1.2 !important;
}

.concepts-page main :is(button, .cx-button) {
  font-size: 13px !important;
}

.concepts-page main :is(button, .cx-button), .concepts-page footer a {
  font-weight: 500 !important;
}

.concepts-page .shared-site-header .nav-cta {
  font-weight: 600 !important;
}

.concepts-page main .cx-label {
  font-size: var(--ws-label) !important;
}

.process-page, .process-page :is(header, main, footer, button, input, select, textarea) {
  font-family: Poppins, Arial, sans-serif !important;
}

.process-page main :is(h1, h2, h3) {
  font-family: Poppins, Arial, sans-serif !important;
  font-weight: 600 !important;
}

.process-page main > .process-hero h1 {
  font-size: var(--ws-title-hero) !important;
}

.process-page main :is(.process-payment-copy h2, .process-route-feature-copy h2, .process-copy h2, .process-heading h2, .wd-faq-heading h2, .wd-final-cta h2) {
  font-size: var(--ws-title-section) !important;
  letter-spacing: -.05em !important;
  line-height: 1 !important;
}

.process-page main :is(.process-hero-copy > p, .process-payment-copy > p, .process-route-feature-copy > p, .process-copy > p, .process-heading > p, .wd-faq-heading > p, .wd-final-cta > p) {
  font-family: Poppins, Arial, sans-serif !important;
  font-size: var(--ws-body) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

.process-page main :is(.wd-eyebrow, button, .wd-button), .process-page main article :is(p, small, span, i, em), .process-page main :is(li, summary), .process-page .shared-site-header nav a, .process-page footer :is(p, a, span, small) {
  font-family: Poppins, Arial, sans-serif !important;
  font-weight: 400 !important;
}

.process-page main article :is(h2, h3, strong, b), .process-page main summary {
  font-family: Poppins, Arial, sans-serif !important;
  font-weight: 600 !important;
}

.process-page main :is(.support-grid, .process-steps) article > h3 {
  font-size: var(--ws-title-card) !important;
  line-height: 1.2 !important;
}

.process-page main :is(button, .wd-button) {
  font-size: 13px !important;
}

.process-page .shared-site-header .nav-cta, .process-page main :is(button, .wd-button), .process-page footer a {
  font-weight: 400 !important;
}

.process-page main .wd-eyebrow {
  font-size: var(--ws-label) !important;
}

:is(.home-build-hosting-points, .home-branding-benefits, .service-detail-points, .process-payment-points, .form-proof, .brand-v2-points) {
  flex-direction: column !important;
  gap: 16px !important;
  margin-top: 34px !important;
  display: flex !important;
}

:is(.home-build-hosting-points > div, .home-branding-benefits > div, .service-detail-points > article, .process-payment-points > span, .form-proof > article, .brand-v2-points > .brand-v2-point) {
  min-width: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  grid-template-columns: minmax(78px, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 0 0 17px !important;
  display: grid !important;
  position: relative !important;
}

:is(.home-build-hosting-points > div, .home-branding-benefits > div, .service-detail-points > article, .process-payment-points > span, .form-proof > article, .brand-v2-points > .brand-v2-point):before {
  content: "" !important;
  box-sizing: border-box !important;
  background: none !important;
  border: 2px solid #4b6fff !important;
  border-radius: 50% !important;
  width: 7px !important;
  height: 7px !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  transform: translateY(-50%) !important;
  box-shadow: 0 0 0 5px #2864ff12 !important;
}

.form-proof > article > i, .brand-v2-point > i {
  color: #0000 !important;
  box-sizing: border-box !important;
  background: none !important;
  border: 2px solid #4b6fff !important;
  border-radius: 50% !important;
  width: 7px !important;
  height: 7px !important;
  margin: 0 !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  transform: translateY(-50%) !important;
  box-shadow: 0 0 0 5px #2864ff12 !important;
}

.form-proof > article:before, .brand-v2-point:before {
  content: none !important;
}

.form-proof > article {
  grid-template-columns: minmax(0, 1fr) !important;
}

.form-proof > article > div, .brand-v2-point > div {
  min-width: 0 !important;
}

.form-proof b, .brand-v2-point strong {
  color: #263a58 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.form-proof small, .brand-v2-point span {
  color: #8793a6 !important;
  margin-top: 4px !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  display: block !important;
}

.process-payment-points > span {
  grid-template-columns: 78px minmax(0, 1fr) !important;
}

.cx-direction-board, .route-list, .faq-list, .wd-faq-list, table {
  --proof-list-excluded: 1;
}

@media (width <= 700px) {
  :is(.home-build-hosting-points > div, .home-branding-benefits > div, .service-detail-points > article, .process-payment-points > span, .brand-v2-points > .brand-v2-point) {
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }
}

html body.webdesign-page {
  --service-section-space: clamp(64px, 7vw, 92px);
}

html body.webdesign-page main {
  background: none !important;
}

html body.webdesign-page main > section:not(.wd-service-intro):not(.wd-final-cta):not(.brand-v2-cta) {
  box-sizing: border-box !important;
  padding-top: var(--service-section-space) !important;
  padding-bottom: var(--service-section-space) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html body.webdesign-page main > .wd-final-cta {
  margin-top: var(--service-section-space) !important;
  margin-bottom: var(--service-section-space) !important;
}

html body.webdesign-page main > .brand-v2-cta {
  margin-top: var(--service-section-space) !important;
  margin-bottom: 0 !important;
}

html body.webdesign-page main > section + section {
  background-clip: padding-box;
}

@media (width <= 900px) {
  html body.webdesign-page {
    --service-section-space: clamp(52px, 9vw, 72px);
  }
}

@media (width <= 600px) {
  html body.webdesign-page {
    --service-section-space: 48px;
  }
}

@media (width >= 901px) {
  html body.webdesign-page main > .wd-service-intro .wd-service-intro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: clamp(48px, 6vw, 76px) !important;
  }

  html body.webdesign-page main > .wd-service-intro .wd-service-intro-copy > h2 {
    width: 100% !important;
    max-width: none !important;
    min-height: 2.2em !important;
  }
}

html body.webdesign-page main > .wd-service-intro .wd-service-intro-copy {
  min-width: 0 !important;
}

html body.webdesign-page main > .wd-service-intro .wd-service-explanation {
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  display: grid !important;
}

html body.webdesign-page main > .wd-service-intro .wd-service-explanation > p {
  grid-template-columns: minmax(150px, .72fr) minmax(0, 1.28fr) !important;
  align-items: start !important;
  gap: 18px !important;
  min-height: 68px !important;
  margin: 0 !important;
  padding: 11px 0 !important;
  display: grid !important;
}

@media (width <= 900px) {
  html body.webdesign-page main > .wd-service-intro .wd-service-intro-copy {
    width: 100% !important;
  }
}

@media (width <= 600px) {
  html body.webdesign-page main > .wd-service-intro .wd-service-explanation > p {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    min-height: 0 !important;
  }
}

html body.webdesign-page main :is(h1, h2, h3), html body.webdesign-page main :is(h1, h2, h3) :is(span, em, strong, b) {
  text-shadow: none;
  font-synthesis: none !important;
  font-variation-settings: "wght" 500 !important;
  -webkit-text-stroke: 0 !important;
  font-family: Poppins, Arial, sans-serif !important;
  font-weight: 500 !important;
}

html body.webdesign-page main section :is(h1, h2, h3), html body.webdesign-page main section :is(h1, h2, h3) :is(span, em, strong, b) {
  font-synthesis: none !important;
  font-variation-settings: normal !important;
  -webkit-text-stroke-width: 0 !important;
  text-shadow: none !important;
  font-family: Poppins, Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

html body.webdesign-page.webdesign-page.webdesign-page main > section h1, html body.webdesign-page.webdesign-page.webdesign-page main > section h2, html body.webdesign-page.webdesign-page.webdesign-page main > section h3, html body.webdesign-page.webdesign-page.webdesign-page main > section :is(h1, h2, h3) :is(span, em, strong, b) {
  font-synthesis: none !important;
  font-variation-settings: "wght" 500 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  font-family: Poppins, Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

.unified-page-hero {
  box-sizing: border-box !important;
  grid-template-columns: 45% 55% !important;
  align-items: center !important;
  column-gap: 12px !important;
  width: min(100% - 48px, 1236px) !important;
  min-height: calc(100svh - 70px) !important;
  margin-inline: auto !important;
  padding: 42px 0 58px !important;
  display: grid !important;
  position: relative !important;
  overflow: visible !important;
}

.unified-page-hero > .unified-hero-copy {
  z-index: 2 !important;
  align-self: center !important;
  width: 100% !important;
  max-width: 505px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

.unified-page-hero .unified-hero-label {
  color: #2864ff !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 28px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  display: flex !important;
}

.unified-page-hero .unified-hero-label:before {
  content: "" !important;
  background: #2864ff !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 1px !important;
}

.unified-page-hero .unified-hero-title, .unified-page-hero .unified-hero-copy > h1 {
  color: #080b12 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance !important;
  max-width: 505px !important;
  margin: 0 0 20px !important;
  font-family: Poppins, Manrope, sans-serif !important;
  font-size: clamp(46px, 4.35vw, 62px) !important;
  font-weight: 600 !important;
  line-height: .98 !important;
}

.unified-page-hero .unified-hero-title span, .unified-page-hero .unified-hero-title em, .unified-page-hero .unified-hero-copy > h1 span, .unified-page-hero .unified-hero-copy > h1 em {
  color: #2864ff !important;
  background: linear-gradient(110deg, #2864ff 10% 52%, #7137ff 100%) !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  font-style: normal !important;
}

.unified-page-hero .unified-hero-text, .unified-page-hero .unified-hero-copy > p:not(.unified-hero-label) {
  color: #718097 !important;
  letter-spacing: 0 !important;
  max-width: 489px !important;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

.unified-page-hero .unified-hero-actions {
  align-items: center !important;
  gap: 24px !important;
  margin: 28px 0 0 !important;
  display: flex !important;
}

.unified-page-hero .unified-hero-button {
  color: #fff !important;
  background: linear-gradient(115deg, #246eff, #7137ff) !important;
  border: 0 !important;
  border-radius: 999px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 56px !important;
  padding: 0 25px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  box-shadow: 0 17px 36px #3d4de133 !important;
}

.unified-page-hero .unified-hero-button span {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  font-size: 16px !important;
}

.unified-page-hero > .unified-hero-visual {
  isolation: isolate !important;
  align-self: center !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(430px, 55vh, 500px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  position: relative !important;
  overflow: visible !important;
}

.unified-page-hero > .unified-hero-visual:before {
  content: "" !important;
  z-index: -1 !important;
  aspect-ratio: 1 !important;
  filter: blur(18px) !important;
  background: radial-gradient(circle, #486fff2e, #e2ddff21 49%, #0000 72%) !important;
  border-radius: 50% !important;
  width: 78% !important;
  position: absolute !important;
}

.unified-page-hero > .unified-hero-visual > img {
  z-index: 1 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 34px 38px #1f2f5b29) !important;
  width: 105% !important;
  max-width: none !important;
  height: auto !important;
  max-height: 500px !important;
  margin: 0 0 0 7.5% !important;
  display: block !important;
  position: relative !important;
  transform: none !important;
}

.unified-page-hero .contact-promises, .unified-page-hero .cx-hero-note, .unified-page-hero > .cx-hero-signal {
  display: none !important;
}

@media (width <= 900px) {
  .unified-page-hero {
    grid-template-columns: 1fr !important;
    row-gap: 22px !important;
    min-height: 0 !important;
    padding: 80px 0 64px !important;
  }

  .unified-page-hero > .unified-hero-copy {
    max-width: 620px !important;
  }

  .unified-page-hero > .unified-hero-visual {
    width: min(100%, 760px) !important;
    min-height: 420px !important;
    margin-inline: auto !important;
  }

  .unified-page-hero > .unified-hero-visual > img {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

@media (width <= 600px) {
  .unified-page-hero {
    row-gap: 18px !important;
    width: min(100% - 32px, 1236px) !important;
    padding: 52px 0 48px !important;
  }

  .unified-page-hero .unified-hero-label {
    margin-bottom: 20px !important;
    font-size: 11px !important;
  }

  .unified-page-hero .unified-hero-title, .unified-page-hero .unified-hero-copy > h1 {
    letter-spacing: -.05em !important;
    margin-bottom: 17px !important;
    font-size: clamp(40px, 12vw, 48px) !important;
  }

  .unified-page-hero .unified-hero-text, .unified-page-hero .unified-hero-copy > p:not(.unified-hero-label) {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  .unified-page-hero .unified-hero-actions {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-top: 23px !important;
  }

  .unified-page-hero .unified-hero-button {
    min-height: 54px !important;
  }

  .unified-page-hero > .unified-hero-visual {
    min-height: 300px !important;
  }

  .unified-page-hero > .unified-hero-visual > img {
    max-height: 340px !important;
  }
}

html, html body {
  overflow-x: clip !important;
}

html body main > section.unified-page-hero.shell {
  box-sizing: border-box !important;
  grid-template-columns: 45% 55% !important;
  align-items: center !important;
  column-gap: 12px !important;
  width: min(100% - 48px, 1236px) !important;
  min-height: calc(100svh - 70px) !important;
  margin: 0 auto !important;
  padding: 42px 0 58px !important;
  display: grid !important;
}

html body main > section.unified-page-hero > .unified-hero-copy {
  align-self: center !important;
  width: 100% !important;
  max-width: 505px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body main > section.unified-page-hero .unified-hero-copy > .unified-hero-label {
  letter-spacing: .12em !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 17px !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  display: flex !important;
}

html body main > section.unified-page-hero .unified-hero-copy > h1.unified-hero-title {
  letter-spacing: -.055em !important;
  max-width: 505px !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  font-size: clamp(46px, 4.35vw, 62px) !important;
  font-weight: 600 !important;
  line-height: .98 !important;
}

html body main > section.unified-page-hero .unified-hero-copy > p.unified-hero-text {
  letter-spacing: 0 !important;
  max-width: 489px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  display: block !important;
}

html body main > section.unified-page-hero .unified-hero-copy > .unified-hero-actions {
  align-items: center !important;
  gap: 24px !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
}

html body main > section.unified-page-hero .unified-hero-copy .unified-hero-button {
  border-radius: 999px !important;
  justify-content: center !important;
  align-items: center !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 25px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  display: inline-flex !important;
}

html body main > section.unified-page-hero > .unified-hero-visual {
  align-self: center !important;
  place-items: center !important;
  width: 100% !important;
  min-height: clamp(430px, 55vh, 500px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
}

html body main > section.unified-page-hero > .unified-hero-visual > img {
  object-fit: contain !important;
  width: 105% !important;
  max-width: none !important;
  max-height: 500px !important;
  margin: 0 0 0 7.5% !important;
}

@media (width <= 900px) {
  html body main > section.unified-page-hero.shell {
    grid-template-columns: 1fr !important;
    row-gap: 22px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 80px 0 64px !important;
  }

  html body main > section.unified-page-hero > .unified-hero-visual {
    width: min(100%, 760px) !important;
    min-height: 420px !important;
    margin-inline: auto !important;
  }

  html body main > section.unified-page-hero > .unified-hero-visual > img {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

@media (width <= 600px) {
  html body main > section.unified-page-hero.shell {
    row-gap: 18px !important;
    width: min(100% - 32px, 1236px) !important;
    padding: 52px 0 48px !important;
  }

  html body main > section.unified-page-hero .unified-hero-copy > .unified-hero-label {
    min-height: 15px !important;
    margin-bottom: 20px !important;
    font-size: 11px !important;
  }

  html body main > section.unified-page-hero .unified-hero-copy > h1.unified-hero-title {
    margin-bottom: 17px !important;
    font-size: clamp(40px, 12vw, 48px) !important;
  }

  html body main > section.unified-page-hero .unified-hero-copy > p.unified-hero-text {
    font-size: 14px !important;
  }

  html body main > section.unified-page-hero .unified-hero-copy > .unified-hero-actions {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-top: 23px !important;
  }

  html body main > section.unified-page-hero .unified-hero-copy .unified-hero-button {
    height: 54px !important;
    min-height: 54px !important;
  }

  html body main > section.unified-page-hero > .unified-hero-visual {
    min-height: 300px !important;
  }

  html body main > section.unified-page-hero > .unified-hero-visual > img {
    max-height: 340px !important;
  }
}

html body.services-page main > section.page-hero.services-overview-hero.unified-page-hero.shell {
  grid-template-columns: 45% 55% !important;
  width: min(100% - 48px, 1236px) !important;
  min-height: calc(100svh - 70px) !important;
  margin: 0 auto !important;
  padding: 42px 0 58px !important;
}

html body.services-page main > section.page-hero.services-overview-hero.unified-page-hero .services-hero-copy.unified-hero-copy > h1.unified-hero-title {
  letter-spacing: -.055em !important;
  max-width: 505px !important;
  margin: 0 0 20px !important;
  font-size: clamp(46px, 4.35vw, 62px) !important;
  font-weight: 600 !important;
  line-height: .98 !important;
}

html body.services-page main > section.page-hero.services-overview-hero.unified-page-hero .services-hero-copy.unified-hero-copy > p.unified-hero-text {
  max-width: 489px !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

@media (width <= 900px) {
  html body.services-page main > section.page-hero.services-overview-hero.unified-page-hero.shell {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 80px 0 64px !important;
  }
}

@media (width <= 600px) {
  html body.services-page main > section.page-hero.services-overview-hero.unified-page-hero.shell {
    width: min(100% - 32px, 1236px) !important;
    padding: 52px 0 48px !important;
  }

  html body.services-page main > section.page-hero.services-overview-hero.unified-page-hero .services-hero-copy.unified-hero-copy > h1.unified-hero-title {
    font-size: clamp(40px, 12vw, 48px) !important;
  }

  html body.services-page main > section.page-hero.services-overview-hero.unified-page-hero .services-hero-copy.unified-hero-copy > p.unified-hero-text {
    font-size: 14px !important;
  }
}

@media (width >= 901px) {
  html body main > section.unified-page-hero > .unified-hero-copy {
    align-self: start !important;
    margin-top: clamp(37px, 37.8svh - 235px, 66px) !important;
  }

  html body main > section.unified-page-hero > .unified-hero-visual {
    align-self: start !important;
    margin-top: clamp(-30px, 59.5svh - 458px, 14px) !important;
  }

  html body.concepts-page main > section.cx-hero.unified-page-hero .cx-hero-copy.unified-hero-copy > p.unified-hero-text {
    max-width: 489px !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
}

html body main > section.unified-page-hero.reveal {
  opacity: 1 !important;
  transform: none !important;
}

html body main > section.unified-page-hero > .unified-trust-bar {
  z-index: 3 !important;
  width: 100% !important;
  box-shadow: none !important;
  opacity: 1 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 0 !important;
  padding: 21px 0 0 !important;
  display: grid !important;
  position: absolute !important;
  bottom: clamp(28px, 4vh, 42px) !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
}

html body main > section.unified-page-hero > .unified-trust-bar:before {
  content: "" !important;
  background: linear-gradient(90deg, #2864ff85, #2864ff21 42%, #6944ff2e 72%, #0000) !important;
  height: 1px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

html body main > section.unified-page-hero > .unified-trust-bar > div {
  background: none !important;
  border: 0 !important;
  align-items: flex-start !important;
  gap: 11px !important;
  min-width: 0 !important;
  padding: 0 clamp(15px, 2vw, 28px) !important;
  display: flex !important;
}

html body main > section.unified-page-hero > .unified-trust-bar > div:first-child {
  padding-left: 0 !important;
}

html body main > section.unified-page-hero > .unified-trust-bar > div:last-child {
  padding-right: 0 !important;
}

html body main > section.unified-page-hero > .unified-trust-bar > div + div {
  border-left: 1px solid #c2cfe48f !important;
}

.unified-trust-bar .hero-trust-mark {
  color: #2864ff !important;
  letter-spacing: .12em !important;
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  flex: none !important;
  margin-top: 2px !important;
  padding: 0 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  display: inline-block !important;
}

.unified-trust-bar > div:first-child .hero-trust-mark {
  color: #ff6f5d !important;
}

.unified-trust-bar p, .unified-trust-bar strong, .unified-trust-bar small {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.unified-trust-bar strong {
  color: #172a46 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.unified-trust-bar small {
  color: #6f7e93 !important;
  margin-top: 4px !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

@media (width <= 900px) {
  html body main > section.unified-page-hero > .unified-trust-bar {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 22px !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
  }

  html body main > section.unified-page-hero > .unified-trust-bar > div:nth-child(3) {
    border-left: 0 !important;
    padding-left: 0 !important;
  }

  html body main > section.unified-page-hero > .unified-trust-bar > div:nth-child(n+3) {
    border-top: 1px solid #ccd6e98c !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
  }
}

@media (width <= 600px) {
  html body main > section.unified-page-hero > .unified-trust-bar {
    order: 3 !important;
    grid-template-columns: 1fr !important;
    margin-top: 18px !important;
    padding-top: 17px !important;
  }

  html body main > section.unified-page-hero > .unified-trust-bar > div {
    padding: 0 !important;
  }

  html body main > section.unified-page-hero > .unified-trust-bar > div + div {
    border-top: 1px solid #ccd6e985 !important;
    border-left: 0 !important;
    margin-top: 13px !important;
    padding-top: 13px !important;
  }
}

@media (width >= 901px) {
  html body main > section.unified-page-hero > .unified-trust-bar {
    width: calc(100% + 12px) !important;
    bottom: clamp(90px, 12.6vh, 100px) !important;
    right: auto !important;
  }

  html body.services-page main > section.page-hero.services-overview-hero.unified-page-hero > .unified-trust-bar {
    width: calc(100% + 12px) !important;
    right: auto !important;
  }

  .unified-trust-bar .hero-trust-mark, .unified-trust-bar small {
    font-size: 12px !important;
  }

  html body main > section.unified-page-hero > .unified-trust-bar, html body.services-page main > section.page-hero.services-overview-hero.unified-page-hero > .unified-trust-bar {
    width: min(100vw - 51px, 1248px) !important;
    min-height: 77.34px !important;
  }

  html body main > section.unified-page-hero .unified-hero-copy h1, html body main#top > section.unified-page-hero .unified-hero-copy h1 {
    font-size: clamp(42px, 4.1vw, 52px) !important;
    line-height: .98 !important;
  }

  html body main#top#top > section.unified-page-hero .unified-hero-copy h1 {
    font-size: clamp(44px, 5.2vw, 58px) !important;
    line-height: .98 !important;
  }

  html body main#top#top > section.unified-page-hero .unified-hero-copy h1, html body main#top#top > section.unified-page-hero .unified-hero-copy h1 > span, html body main#top#top > section.unified-page-hero .unified-hero-copy h1 > em {
    white-space: nowrap !important;
  }

  html body main > section.unified-page-hero.unified-page-hero.unified-page-hero .unified-hero-copy.unified-hero-copy h1.unified-hero-title {
    white-space: nowrap !important;
    font-size: clamp(44px, 5.2vw, 58px) !important;
    line-height: .98 !important;
  }

  html body main > section.unified-page-hero.unified-page-hero.unified-page-hero .unified-hero-copy.unified-hero-copy h1.unified-hero-title > span, html body main > section.unified-page-hero.unified-page-hero.unified-page-hero .unified-hero-copy.unified-hero-copy h1.unified-hero-title > em {
    white-space: nowrap !important;
  }

  html body.services-page.services-page main > section.services-overview-hero.unified-page-hero.unified-page-hero .services-hero-copy.unified-hero-copy h1.unified-hero-title {
    white-space: nowrap !important;
    font-size: clamp(40px, 3.7vw, 48px) !important;
    line-height: .98 !important;
  }
}

html body main :is(.home-build-hosting-points, .home-branding-benefits, .service-detail-points, .process-payment-points, .form-proof, .brand-v2-points, .cx-feature-copy dl, .cx-explainer-steps) {
  flex-direction: column !important;
  gap: 16px !important;
  margin-top: 34px !important;
  display: flex !important;
}

html body main :is(.home-build-hosting-points > div, .home-branding-benefits > div, .service-detail-points > article, .process-payment-points > span, .form-proof > article, .brand-v2-point, .cx-feature-copy dl > div, .cx-explainer-steps > article) {
  min-width: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 0 0 17px !important;
  display: grid !important;
  position: relative !important;
}

html body main :is(.home-build-hosting-points > div, .home-branding-benefits > div, .service-detail-points > article, .process-payment-points > span, .form-proof > article, .brand-v2-point, .cx-feature-copy dl > div, .cx-explainer-steps > article):before {
  content: "" !important;
  box-sizing: border-box !important;
  background: none !important;
  border: 2px solid #4b6fff !important;
  border-radius: 50% !important;
  width: 7px !important;
  height: 7px !important;
  position: absolute !important;
  inset: 50% auto auto 0 !important;
  transform: translateY(-50%) !important;
  box-shadow: 0 0 0 5px #2864ff12 !important;
}

html body main :is(.home-build-hosting-points > div > strong, .home-branding-benefits > div > strong, .service-detail-points > article > b, .process-payment-points > span > b, .cx-feature-copy dt, .cx-explainer-steps article > span) {
  white-space: nowrap !important;
  color: #2864ff !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Poppins, Arial, sans-serif !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  display: block !important;
}

html body main :is(.home-build-hosting-points > div > span, .home-branding-benefits > div > span, .service-detail-points > article > span, .process-payment-points > span > small, .cx-feature-copy dd, .cx-explainer-steps article strong) {
  color: #263a58 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Poppins, Arial, sans-serif !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  display: block !important;
}

html body main .form-proof > article, html body main .brand-v2-point {
  grid-template-columns: minmax(0, 1fr) !important;
}

html body main .form-proof > article > i, html body main .brand-v2-point > i {
  display: none !important;
}

html body main .form-proof > article > div, html body main .brand-v2-point > div {
  min-width: 0 !important;
}

html body main .form-proof b, html body main .brand-v2-point strong {
  color: #263a58 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
  font-family: Poppins, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  display: block !important;
}

html body main .form-proof small, html body main .brand-v2-point span, html body main .cx-explainer-steps article small {
  color: #8793a6 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 4px 0 0 !important;
  font-family: Poppins, Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  display: block !important;
}

html body main .cx-direction-board {
  --shared-proof-excluded: 1;
}

@media (width <= 700px) {
  html body main :is(.home-build-hosting-points > div, .home-branding-benefits > div, .service-detail-points > article, .process-payment-points > span, .cx-feature-copy dl > div, .cx-explainer-steps > article) {
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }
}

html body main :is(.home-build-hosting-points.home-build-hosting-points.home-build-hosting-points > div > strong, .home-branding-benefits.home-branding-benefits.home-branding-benefits > div > strong, .service-detail-points.service-detail-points.service-detail-points > article > b, .process-payment-points.process-payment-points.process-payment-points > span > b, .cx-feature-copy.cx-feature-copy.cx-feature-copy dt, .cx-explainer-steps.cx-explainer-steps.cx-explainer-steps article > span) {
  letter-spacing: .12em !important;
  color: #2864ff !important;
  text-transform: uppercase !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html body main :is(.home-build-hosting-points.home-build-hosting-points.home-build-hosting-points > div > span, .home-branding-benefits.home-branding-benefits.home-branding-benefits > div > span, .service-detail-points.service-detail-points.service-detail-points > article > span, .process-payment-points.process-payment-points.process-payment-points > span > small, .cx-feature-copy.cx-feature-copy.cx-feature-copy dd, .cx-explainer-steps.cx-explainer-steps.cx-explainer-steps article strong) {
  letter-spacing: 0 !important;
  color: #263a58 !important;
  text-transform: none !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

html body main :is(.home-build-hosting-points.home-build-hosting-points.home-build-hosting-points > div, .home-branding-benefits.home-branding-benefits.home-branding-benefits > div, .service-detail-points.service-detail-points.service-detail-points > article, .process-payment-points.process-payment-points.process-payment-points > span, .cx-feature-copy.cx-feature-copy.cx-feature-copy dl > div, .cx-explainer-steps.cx-explainer-steps.cx-explainer-steps > article) {
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 0 0 0 17px !important;
}

html body main .form-proof.form-proof.form-proof > article, html body main .brand-v2-points.brand-v2-points.brand-v2-points > .brand-v2-point {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 0 0 17px !important;
}

html body main .form-proof.form-proof.form-proof b, html body main .brand-v2-points.brand-v2-points.brand-v2-points .brand-v2-point strong {
  letter-spacing: 0 !important;
  color: #263a58 !important;
  text-transform: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

html body main .form-proof.form-proof.form-proof small, html body main .brand-v2-points.brand-v2-points.brand-v2-points .brand-v2-point span {
  color: #8793a6 !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

html body main .form-proof.form-proof.form-proof > article, html body main .brand-v2-points.brand-v2-points.brand-v2-points > .brand-v2-point {
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 14px !important;
}

html body main .form-proof.form-proof.form-proof b, html body main .brand-v2-points.brand-v2-points.brand-v2-points .brand-v2-point strong {
  white-space: nowrap !important;
  color: #2864ff !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  align-self: center !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html body main .form-proof.form-proof.form-proof small, html body main .brand-v2-points.brand-v2-points.brand-v2-points .brand-v2-point span {
  color: #263a58 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  align-self: center !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

@media (width <= 700px) {
  html body main .form-proof.form-proof.form-proof > article, html body main .brand-v2-points.brand-v2-points.brand-v2-points > .brand-v2-point {
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }
}

html body main :is(.home-build-hosting-points.home-build-hosting-points.home-build-hosting-points > div, .home-branding-benefits.home-branding-benefits.home-branding-benefits > div, .service-detail-points.service-detail-points.service-detail-points > article, .process-payment-points.process-payment-points.process-payment-points > span, .form-proof.form-proof.form-proof > article, .brand-v2-points.brand-v2-points.brand-v2-points > .brand-v2-point, .cx-feature-copy.cx-feature-copy.cx-feature-copy dl > div, .cx-explainer-steps.cx-explainer-steps.cx-explainer-steps > article) {
  grid-template-columns: 140px minmax(0, 1fr) !important;
}

html body main :is(.home-build-hosting-points > div > strong, .home-branding-benefits > div > strong, .service-detail-points > article > b, .process-payment-points > span > b, .form-proof > article b, .brand-v2-point strong, .cx-feature-copy dt, .cx-explainer-steps article > span) {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (width <= 700px) {
  html body main :is(.home-build-hosting-points.home-build-hosting-points.home-build-hosting-points > div, .home-branding-benefits.home-branding-benefits.home-branding-benefits > div, .service-detail-points.service-detail-points.service-detail-points > article, .process-payment-points.process-payment-points.process-payment-points > span, .form-proof.form-proof.form-proof > article, .brand-v2-points.brand-v2-points.brand-v2-points > .brand-v2-point, .cx-feature-copy.cx-feature-copy.cx-feature-copy dl > div, .cx-explainer-steps.cx-explainer-steps.cx-explainer-steps > article) {
    grid-template-columns: 112px minmax(0, 1fr) !important;
  }
}

html body.webdesign-page main section h1, html body.webdesign-page main section h2, html body.webdesign-page main section h3, html body.webdesign-page main section :is(h1, h2, h3) :is(span, em, strong, b), html body.webdesign-page.webdesign-page.webdesign-page main > section h1, html body.webdesign-page.webdesign-page.webdesign-page main > section h2, html body.webdesign-page.webdesign-page.webdesign-page main > section h3, html body.webdesign-page.webdesign-page.webdesign-page main > section :is(h1, h2, h3) :is(span, em, strong, b), html body.concepts-page.concepts-page.concepts-page main > section h1, html body.concepts-page.concepts-page.concepts-page main > section h2, html body.concepts-page.concepts-page.concepts-page main > section h3, html body.concepts-page.concepts-page.concepts-page main > section :is(h1, h2, h3) :is(span, em, strong, b) {
  font-synthesis: none !important;
  font-variation-settings: "wght" 500 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  font-family: Poppins, Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

html body.concepts-page.concepts-page.concepts-page main > section.cx-final h2, html body.concepts-page.concepts-page.concepts-page main > section.cx-final h2 :is(span, em, strong, b) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}

html body.concepts-page.concepts-page main {
  --concept-section-gap: 24px;
  --concept-section-space: clamp(46px, 5vw, 64px);
}

html body.concepts-page.concepts-page main > section {
  box-sizing: border-box !important;
  margin-top: 0 !important;
  margin-bottom: var(--concept-section-gap) !important;
}

html body.concepts-page.concepts-page main > section.cx-sector, html body.concepts-page.concepts-page main > section.cx-feature-wrap, html body.concepts-page.concepts-page main > section.cx-gallery, html body.concepts-page.concepts-page main > section.cx-monitor-showcase, html body.concepts-page.concepts-page main > section.cx-method-wrap {
  padding-top: var(--concept-section-space) !important;
  padding-bottom: var(--concept-section-space) !important;
}

html body.concepts-page.concepts-page main > section.cx-final {
  margin-top: 0 !important;
  margin-bottom: var(--concept-section-gap) !important;
  padding: var(--concept-section-space) !important;
}

html body.concepts-page.concepts-page .ws-footer {
  margin-top: 0 !important;
}

@media (width <= 900px) {
  html body.concepts-page.concepts-page main {
    --concept-section-gap: 18px;
    --concept-section-space: clamp(32px, 6vw, 46px);
  }
}

@media (width <= 600px) {
  html body.concepts-page.concepts-page main {
    --concept-section-gap: 14px;
    --concept-section-space: 26px;
  }
}

html body.webdesign-page.process-page.process-page.process-page main > section.process-payment.process-payment {
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.process-page.process-page main > section.process-payment > .process-payment-grid {
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr) !important;
  align-items: center !important;
  gap: clamp(36px, 5vw, 64px) !important;
  padding-top: clamp(42px, 5vw, 58px) !important;
  padding-bottom: clamp(42px, 5vw, 58px) !important;
  display: grid !important;
}

html body.process-page.process-page .process-payment-copy {
  grid-column: 1 !important;
  max-width: 500px !important;
}

html body.process-page.process-page .process-payment-visual {
  grid-column: 2 !important;
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 auto !important;
}

html body.process-page.process-page .process-payment-copy h2 {
  margin: 14px 0 16px !important;
}

html body.process-page.process-page .process-payment-copy > p {
  max-width: 470px !important;
}

html body.process-page.process-page .process-payment-points {
  gap: 12px !important;
  margin-top: 22px !important;
}

@media (width <= 820px) {
  html body.process-page.process-page main > section.process-payment > .process-payment-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  html body.process-page.process-page .process-payment-copy {
    grid-area: 1 / 1 !important;
    max-width: 650px !important;
  }

  html body.process-page.process-page .process-payment-visual {
    grid-area: 2 / 1 !important;
    width: min(100%, 620px) !important;
  }
}

@media (width <= 520px) {
  html body.process-page.process-page main > section.process-payment > .process-payment-grid {
    gap: 20px !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  html body.process-page.process-page .process-payment-copy h2 {
    margin: 12px 0 14px !important;
  }

  html body.process-page.process-page .process-payment-points {
    margin-top: 18px !important;
  }
}

html body.webdesign-page.process-page.process-page.process-page .process-payment-points.process-payment-points > span {
  grid-template-columns: 140px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  display: grid !important;
}

html body.webdesign-page.process-page.process-page.process-page .process-payment-points.process-payment-points > span > b {
  grid-area: 1 / 1 !important;
  width: auto !important;
}

html body.webdesign-page.process-page.process-page.process-page .process-payment-points.process-payment-points > span > small {
  grid-area: 1 / 2 !important;
  width: auto !important;
}

@media (width <= 520px) {
  html body.webdesign-page.process-page.process-page.process-page .process-payment-points.process-payment-points > span {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 10px !important;
  }
}

html body.process-page.process-page main .wd-eyebrow {
  width: fit-content !important;
  box-shadow: none !important;
  color: #2864ff !important;
  letter-spacing: 1.32px !important;
  text-transform: uppercase !important;
  text-align: left !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  font-family: Poppins, Arial, sans-serif !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  display: block !important;
}

html body.process-page.process-page #route .process-route-feature-copy > p {
  max-width: 36rem !important;
  margin: 0 !important;
}

html body.process-page.process-page.process-page main span.wd-eyebrow.wd-eyebrow {
  color: #2864ff !important;
  letter-spacing: 1.32px !important;
  text-transform: uppercase !important;
  width: fit-content !important;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  font-family: Poppins, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  display: block !important;
}

html body.process-page .process-strategy-visual {
  place-items: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  display: grid !important;
}

html body.process-page .process-strategy-visual img {
  object-fit: contain !important;
  filter: drop-shadow(0 28px 42px #26448c2e) !important;
  width: min(100%, 820px) !important;
  height: auto !important;
  display: block !important;
}

html body.process-page .process-design {
  color: #fff !important;
  background: radial-gradient(circle at 14% 10%, #ffffff29, #0000 34%), radial-gradient(circle at 88% 84%, #ffffff1a, #0000 31%), linear-gradient(135deg, #2864ff 0%, #465cf8 48%, #7040f2 100%) !important;
}

html body.process-page .process-design .process-heading-light .wd-eyebrow, html body.process-page .process-design .process-heading-light h2, html body.process-page .process-design .process-heading-light h2 em, html body.process-page .process-design .process-heading-light > p {
  color: #fff !important;
}

html body.process-page .process-design .process-heading-light > p {
  opacity: .9 !important;
}

html body.process-page .process-design .browser-frame, html body.process-page .process-design .design-studio aside {
  color: #fff !important;
  backdrop-filter: blur(18px) !important;
  background: #ffffff1c !important;
  border-color: #ffffff47 !important;
  box-shadow: 0 28px 68px #1b207040 !important;
}

html body.process-page .process-design .studio-status small, html body.process-page .process-design .studio-status b, html body.process-page .process-design .design-studio aside article small, html body.process-page .process-design .design-studio aside article p, html body.process-page .process-design .design-studio aside article b, html body.process-page .process-design .studio-score, html body.process-page .process-design .studio-score strong {
  color: #fff !important;
}

html body.process-page .process-design .design-studio aside article, html body.process-page .process-design .studio-status {
  background: #ffffff17 !important;
  border-color: #ffffff38 !important;
}

@media (width <= 820px) {
  html body.process-page .process-strategy-visual img {
    width: min(100%, 680px) !important;
  }
}

html body.process-page.process-page.process-page main > section.process-design.process-design span.wd-eyebrow.wd-eyebrow {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body.process-page.process-page main > section.process-design.process-design {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html body.process-page.process-page main > section.process-design.process-design > .shell {
  padding-top: clamp(48px, 5vw, 64px) !important;
  padding-bottom: clamp(48px, 5vw, 64px) !important;
}

html body.process-page.process-page .process-design .design-studio > aside, html body.process-page.process-page .process-design .design-studio > aside .studio-status, html body.process-page.process-page .process-design .design-studio > aside article, html body.process-page.process-page .process-design .design-studio > aside .studio-score {
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  background: none !important;
}

html body.process-page.process-page .support-section > .process-heading {
  border-bottom: 0 !important;
}

html body.webdesign-page.process-page.process-page.process-page main > section.process-design.process-design.process-design {
  padding: 0 !important;
  padding-block: 0 !important;
}

html body.webdesign-page.process-page.process-page {
  background: #f7f8f7 !important;
}

html body.webdesign-page.process-page.process-page main {
  --process-section-gap: 24px;
  --process-section-space: clamp(40px, 4.3vw, 52px);
  background: radial-gradient(55% 17% at 9% 23%, #dfeaff 0, #0000 72%), radial-gradient(50% 18% at 92% 36%, #eee4ff 0, #0000 72%), radial-gradient(56% 19% at 8% 55%, #e2edff 0, #0000 72%), radial-gradient(52% 18% at 91% 69%, #eee5ff 0, #0000 72%), radial-gradient(58% 18% at 12% 84%, #e4edff 0, #0000 72%), linear-gradient(#f7f8f7 0%, #f5f7fa 33%, #f7f8fb 62%, #f1f4f8 82%, #f4f4f1 100%) !important;
}

html body.webdesign-page.process-page.process-page main > section {
  box-sizing: border-box !important;
  margin-top: 0 !important;
  margin-bottom: var(--process-section-gap) !important;
}

html body.webdesign-page.process-page.process-page main > :is(.process-hero, .process-payment, .process-overview, .process-route-feature, .process-phase, .launch-section, .support-section, .wd-faq) {
  background-color: #0000 !important;
  background-image: none !important;
}

html body.webdesign-page.process-page.process-page main > :is(.process-overview, .process-route-feature, .process-phase, .launch-section, .support-section, .wd-faq) {
  padding-top: var(--process-section-space) !important;
  padding-bottom: var(--process-section-space) !important;
}

html body.webdesign-page.process-page.process-page main > section.process-payment.process-payment, html body.webdesign-page.process-page.process-page main > section.process-design.process-design {
  margin-bottom: var(--process-section-gap) !important;
}

html body.webdesign-page.process-page.process-page main > section.wd-final-cta.process-final-cta {
  margin-top: 0 !important;
  margin-bottom: var(--process-section-gap) !important;
}

html body.webdesign-page.process-page.process-page .ws-footer, html body.webdesign-page.process-page.process-page > footer {
  margin-top: 0 !important;
}

@media (width <= 900px) {
  html body.webdesign-page.process-page.process-page main {
    --process-section-gap: 18px;
    --process-section-space: clamp(32px, 6vw, 46px);
  }
}

@media (width <= 600px) {
  html body.webdesign-page.process-page.process-page main {
    --process-section-gap: 14px;
    --process-section-space: 26px;
  }
}

html body.webdesign-page.process-page.process-page.process-page.process-page main > section[class] {
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: var(--process-section-gap) !important;
  margin-left: 0 !important;
}

html body.webdesign-page.process-page.process-page.process-page.process-page main > section.process-route-feature.process-route-feature, html body.webdesign-page.process-page.process-page.process-page.process-page main > section.process-overview.process-overview, html body.webdesign-page.process-page.process-page.process-page.process-page main > section.process-phase.process-phase, html body.webdesign-page.process-page.process-page.process-page.process-page main > section.launch-section.launch-section, html body.webdesign-page.process-page.process-page.process-page.process-page main > section.support-section.support-section, html body.webdesign-page.process-page.process-page.process-page.process-page main > section.wd-faq.wd-faq {
  padding-top: var(--process-section-space) !important;
  padding-bottom: var(--process-section-space) !important;
}

html body.webdesign-page.process-page.process-page.process-page.process-page main > section.process-payment.process-payment, html body.webdesign-page.process-page.process-page.process-page.process-page main > section.process-design.process-design {
  margin-bottom: var(--process-section-gap) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html body.webdesign-page.process-page.process-page.process-page.process-page main > section.wd-final-cta.process-final-cta {
  margin-bottom: var(--process-section-gap) !important;
}

html body.webdesign-page.process-page main > section#route.process-route-feature {
  margin-top: 0 !important;
  margin-bottom: var(--process-section-gap) !important;
  padding-top: var(--process-section-space) !important;
  padding-bottom: var(--process-section-space) !important;
  background-color: #0000 !important;
  background-image: none !important;
}

html body#top.webdesign-page.process-page.process-page main > section#route.process-route-feature {
  margin: 0 0 var(--process-section-gap) !important;
  padding: var(--process-section-space) 0 !important;
  background: none !important;
}