@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;
  overflow-x: clip;
}

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: -34px -28px;
}

.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(180deg, transparent 0%, rgba(247, 249, 252, .72) 58%, rgba(239, 242, 250, .94) 100%),
    linear-gradient(110deg, #e0ecfa 0%, #e8effa 48%, #d8d5f6 100%);
  border-radius: 0 30px 30px 0;
  place-items: center;
  display: grid;
  position: relative;
  overflow: hidden;
}

.dialog-desktop {
  filter: drop-shadow(0 28px 42px #1e294b30);
  width: 92%;
  transform: none;
}

.dialog-desktop.realtor,
.dialog-desktop.automotive,
.dialog-desktop.contractor {
  width: calc(100% + 32px);
}

.dialog-desktop .branch-preview {
  aspect-ratio: 3 / 2;
  border: 0;
  border-radius: 20px;
}

.dialog-mobile {
  display: none;
}

.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: 310px;
  }

  .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/images/concepts/branch-makelaar-device-mockup-wide-phone-square.webp");
}

.dialog-desktop.automotive .branch-preview, .dialog-mobile.automotive .branch-preview {
  background-image: url("../assets/images/concepts/branch-autodealer-device-mockup-wide-phone-square.webp");
}

.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/images/concepts/branch-aannemer-device-mockup-wide-phone-square.webp");
}

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

.branch-card.realtor .branch-preview, .branch-card.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 {
  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: 0;
  position: relative;
}

.dialog-desktop .branch-preview {
  z-index: 2;
  aspect-ratio: 3 / 2;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  position: relative;
  overflow: visible;
  box-shadow: none;
  background-position: center !important;
  background-size: contain !important;
}

.dialog-desktop.realtor .branch-preview,
.dialog-desktop.automotive .branch-preview,
.dialog-desktop.contractor .branch-preview {
  aspect-ratio: 1;
}

.dialog-desktop .branch-preview:before {
  content: none;
}

.dialog-desktop:before {
  content: none;
}

.dialog-desktop:after {
  content: none;
}

.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: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;
  }

  .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: grid;
    order: 1;
  }

  .hero .hero-copy {
    order: 2;
  }

  .hero .hero-trust-bar {
    order: 3;
  }
}

.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 {
  color: #132440;
  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-mark span {
    font-size: 57.6px;
  }

  .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: 500;
  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;
  }
}

/* Homepage tablet alignment and compact about section */
.about-webschets{padding:54px 0}.about-webschets .section-head{margin-bottom:22px}.about-main{min-height:315px;padding:25px;gap:25px}.about-main p{margin-bottom:7px}.about-main .button{margin-top:7px}.about-values{gap:9px}.about-values article{padding-block:17px}
@media (width >= 601px) and (width <= 980px){
  .home-branding{grid-template-columns:minmax(0,.9fr) minmax(330px,1.1fr);gap:22px;min-height:390px;padding:34px 30px}
  .home-branding-copy{max-width:none}.home-branding h2{font-size:clamp(32px,4.3vw,42px)}.home-branding-intro{margin:17px 0 20px;font-size:12px}.home-branding-benefits{grid-template-columns:1fr;gap:10px;margin-bottom:20px}.home-branding-visual{min-height:270px}.home-branding-visual img{width:min(100%,440px)}
  .about-webschets{padding:50px 0}.about-webschets .section-head{margin-bottom:20px}.about-main{grid-template-columns:112px 1fr;min-height:285px;padding:23px;gap:22px}.about-mark{width:105px;height:138px}.about-mark span{font-size:58px}.about-main h3{margin:10px 0 11px;font-size:clamp(23px,3vw,29px)}.about-values article{padding:16px 54px 16px 18px}
  .pricing-simple-grid{align-items:stretch}.pricing-simple-card,.pricing-simple-card:not(.is-featured),.pricing-simple-card.is-featured,.pricing-simple-card:last-child{height:auto;min-height:0}
}

@media (width <= 600px){.about-webschets{padding:44px 0}.about-webschets .section-head{margin-bottom:19px}.about-main{gap:18px;padding:20px}.about-mark{width:92px;height:104px}.about-main h3{margin:9px 0 10px;font-size:25px}.about-values{gap:8px}.about-values article{padding:17px 58px 17px 18px}}

.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: 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;
}

: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 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 .shared-site-header .nav-cta, .concepts-page main :is(button, .cx-button), .concepts-page footer a {
  font-weight: 400 !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;
}

.concept-showcase {
  margin-top: calc(-1 * clamp(120px, 15vh, 190px)) !important;
  padding-top: clamp(88px, 8vw, 108px) !important;
  padding-bottom: clamp(100px, 9vw, 120px) !important;
}

.concept-showcase-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  margin-bottom: clamp(38px, 3vw, 48px);
  display: grid;
}

.concept-showcase-eyebrow {
  background: none;
  margin: 0 0 16px;
  padding: 0;
}

.concept-showcase-head h2 {
  max-width: 880px;
  color: var(--ws-ink, #122945);
  font-family: var(--ws-font, "Poppins", Arial, sans-serif);
  letter-spacing: -.04em;
  margin: 0;
  font-size: clamp(38px, 3.4vw, 52px);
  font-weight: 600;
  line-height: 1.08;
}

.concept-showcase-all {
  color: var(--ws-blue, #2d67ff);
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color .25s;
  display: inline-flex;
}

.concept-showcase-all span, .concept-showcase-meta i {
  color: var(--ws-blue, #2d67ff);
  font-style: normal;
  transition: transform .25s;
}

.concept-showcase-grid {
  isolation: isolate;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 24px);
  display: grid;
  position: relative;
}

.concept-showcase-grid:before {
  z-index: -1;
  filter: blur(38px);
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 20% 42%, #457eff33, #0000 38%), radial-gradient(circle at 72% 60%, #7548ff29, #0000 42%);
  border-radius: 50%;
  position: absolute;
  inset: -34px 4% -42px;
}

.concept-showcase-card {
  backdrop-filter: blur(22px) saturate(124%);
  min-width: 0;
  min-height: 100%;
  color: var(--ws-ink, #122945);
  background: linear-gradient(145deg, #ffffff8f, #f4f8ff4d);
  border: 1px solid #d6deeec2;
  border-radius: 18px;
  flex-direction: column;
  padding: clamp(16px, 1.5vw, 20px);
  text-decoration: none;
  transition: transform .3s, border-color .3s, box-shadow .3s;
  display: flex;
  overflow: hidden;
  box-shadow: 0 14px 36px #253d6613, inset 0 1px #ffffffb8;
}

.concept-showcase-visual {
  aspect-ratio: 16 / 9;
  background: #f5f7fc;
  border: 1px solid #cfd8e9b8;
  border-radius: 13px;
  display: block;
  overflow: hidden;
}

.concept-showcase-visual img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .4s cubic-bezier(.2, .75, .2, 1);
  display: block;
}

.concept-showcase-meta {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 50px;
  padding-top: 2px;
  display: flex;
}

.concept-showcase-meta strong {
  color: var(--ws-ink, #122945);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}

.concept-showcase-meta > span {
  color: var(--ws-blue, #2d67ff);
  white-space: nowrap;
  flex: none;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
}

.concept-showcase-card:focus-visible, .concept-showcase-all:focus-visible {
  outline-offset: 4px;
  outline: 3px solid #2d67ff59;
}

@media (hover: hover) {
  .concept-showcase-card:hover {
    border-color: #cdd9f2;
    transform: translateY(-3px);
    box-shadow: 0 18px 42px #1e33571c;
  }

  .concept-showcase-card:hover .concept-showcase-visual img {
    transform: scale(1.01);
  }

  .concept-showcase-card:hover .concept-showcase-meta i, .concept-showcase-all:hover span {
    transform: translateX(3px);
  }

  .concept-showcase-all:hover {
    color: var(--violet, #7137ff);
  }
}

@media (width <= 900px) {
  .concept-showcase {
    margin-top: -100px !important;
    padding-top: 80px !important;
    padding-bottom: 88px !important;
  }

  .concept-showcase-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
  }

  .concept-showcase-all {
    margin: 0;
  }

  .concept-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .concept-showcase-card {
    padding: 18px;
  }
}

@media (width <= 600px) {
  .concept-showcase {
    margin-top: -82px !important;
    padding-top: 72px !important;
    padding-bottom: 80px !important;
  }

  .concept-showcase-head {
    margin-bottom: 28px;
  }

  .concept-showcase-head h2 {
    font-size: clamp(34px, 9vw, 40px);
  }

  .concept-showcase-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .concept-showcase-card {
    border-radius: 18px;
    width: 100%;
    padding: 16px;
  }

  .concept-showcase-meta {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .concept-showcase-card, .concept-showcase-visual img, .concept-showcase-all span, .concept-showcase-meta i {
    transition: none;
  }
}

.branch-showcase.concept-showcase {
  margin-top: 0 !important;
  padding-top: clamp(88px, 8vw, 108px) !important;
  padding-bottom: clamp(100px, 9vw, 120px) !important;
}

.branch-showcase .concept-showcase-visual {
  aspect-ratio: 3 / 2;
  background-color: #f5f7fc;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 16px;
  transition: transform .4s cubic-bezier(.2, .75, .2, 1);
}

.branch-showcase .branch-card.realtor .branch-preview {
  background-image: url("../assets/images/concepts/branch-makelaar-device-mockup-wide-phone.webp");
}

.branch-showcase .branch-card.automotive .branch-preview {
  background-image: url("../assets/images/concepts/branch-autodealer-device-mockup-wide-phone.webp");
}

.branch-showcase .branch-card.contractor .branch-preview {
  background-image: url("../assets/images/concepts/branch-aannemer-device-mockup-wide-phone.webp");
}

@media (hover: hover) {
  .branch-showcase .concept-showcase-card:hover .concept-showcase-visual {
    transform: scale(1.01);
  }
}

@media (width <= 900px) {
  .branch-showcase.concept-showcase {
    margin-top: 0 !important;
    padding-top: 80px !important;
    padding-bottom: 88px !important;
  }
}

@media (width <= 600px) {
  .branch-showcase.concept-showcase {
    margin-top: 0 !important;
    padding-top: 72px !important;
    padding-bottom: 80px !important;
  }

  .branch-showcase .concept-showcase-visual {
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .branch-showcase .concept-showcase-visual {
    transition: none;
  }
}

.home-page .hero + .branch-showcase.concept-showcase {
  padding-top: clamp(38px, 4vw, 52px) !important;
}

@media (width <= 900px) {
  .home-page .hero + .branch-showcase.concept-showcase {
    padding-top: 48px !important;
  }
}

@media (width <= 600px) {
  .home-page .hero + .branch-showcase.concept-showcase {
    padding-top: 40px !important;
  }
}

.home-build-hosting {
  isolation: isolate;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(48px, 6vw, 92px);
  display: grid;
  position: relative;
  margin-top: 0 !important;
  padding-top: clamp(88px, 8vw, 108px) !important;
  padding-bottom: clamp(100px, 9vw, 120px) !important;
}

.home-build-hosting-visual {
  place-items: center;
  min-width: 0;
  margin: 0;
  display: grid;
  position: relative;
}

.home-build-hosting-glow {
  z-index: -1;
  aspect-ratio: 1;
  filter: blur(38px);
  opacity: .78;
  pointer-events: none;
  background: radial-gradient(circle at 36% 42%, #3274ff3d, #0000 48%), radial-gradient(circle at 68% 62%, #7445ff33, #0000 50%);
  border-radius: 50%;
  width: 82%;
  position: absolute;
}

.home-build-hosting-visual img {
  filter: drop-shadow(0 28px 42px #24396324);
  width: 112%;
  max-width: none;
  height: auto;
  margin-left: -9%;
  display: block;
  position: relative;
}

.home-build-hosting-copy {
  min-width: 0;
}

.home-build-hosting-copy .kicker {
  background: none;
  margin: 0 0 16px;
  padding: 0;
}

.home-build-hosting-copy h2 {
  color: var(--ws-ink, #122945);
  font-family: var(--ws-font, "Poppins", Arial, sans-serif);
  letter-spacing: -.04em;
  margin: 0;
  font-size: clamp(38px, 3.4vw, 52px);
  font-weight: 600;
  line-height: 1.08;
}

.home-build-hosting-copy h2 span {
  color: var(--ws-blue, #2d67ff);
}

.home-build-hosting-intro {
  max-width: 600px;
  color: var(--muted, #74839a);
  margin: 24px 0 28px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
}

.home-build-hosting-points {
  border-top: 1px solid #c6d0e4b8;
  border-bottom: 1px solid #c6d0e4b8;
}

.home-build-hosting-points > div {
  grid-template-columns: minmax(135px, .38fr) 1fr;
  gap: 20px;
  padding: 17px 0;
  display: grid;
}

.home-build-hosting-points > div + div {
  border-top: 1px solid #c6d0e494;
}

.home-build-hosting-points strong {
  color: var(--ws-ink, #122945);
  font-size: 12px;
  font-weight: 600;
}

.home-build-hosting-points span {
  color: var(--muted, #74839a);
  font-size: 11px;
  line-height: 1.55;
}

.home-build-hosting-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 30px;
  display: flex;
}

.home-build-hosting-actions .button {
  min-height: 50px;
}

.home-build-hosting-link {
  color: var(--ws-blue, #2d67ff);
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.home-build-hosting-link span {
  color: var(--ws-blue, #2d67ff);
  transition: transform .25s;
}

@media (hover: hover) {
  .home-build-hosting-link:hover span {
    transform: translateX(3px);
  }
}

@media (width <= 900px) {
  .home-build-hosting {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 0 !important;
    padding-top: 80px !important;
    padding-bottom: 88px !important;
  }

  .home-build-hosting-visual {
    width: min(100%, 720px);
    margin-inline: auto;
  }

  .home-build-hosting-visual img {
    width: 108%;
    margin-left: -4%;
  }

  .home-build-hosting-copy {
    max-width: 720px;
  }
}

@media (width <= 600px) {
  .home-build-hosting {
    gap: 18px;
    margin-top: 0 !important;
    padding-top: 72px !important;
    padding-bottom: 80px !important;
  }

  .home-build-hosting-visual img {
    width: 116%;
    margin-left: -8%;
  }

  .home-build-hosting-copy h2 {
    font-size: clamp(34px, 9vw, 40px);
  }

  .home-build-hosting-intro {
    margin: 20px 0 24px;
    font-size: 13px;
  }

  .home-build-hosting-points > div {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 15px 0;
  }

  .home-build-hosting-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: 24px;
  }

  .home-build-hosting-actions .button {
    justify-content: space-between;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-build-hosting-link span {
    transition: none;
  }
}

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: 600 !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;
}

body main > .hero, body main > .page-hero, body main > .process-hero, body main > .contact-hero {
  align-items: center !important;
  gap: 34px !important;
  width: min(1200px, 100% - 48px) !important;
  height: auto !important;
  min-height: 690px !important;
  max-height: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 32px !important;
  padding-bottom: 80px !important;
  overflow: visible !important;
}

body main > .hero h1, body main > .page-hero h1, body main > .process-hero h1, body main > .contact-hero h1 {
  letter-spacing: -5px !important;
  max-width: 700px !important;
  margin: 27px 0 !important;
  font-size: clamp(50px, 6vw, 82px) !important;
  font-weight: 600 !important;
  line-height: .98 !important;
}

body main > .hero .hero-copy > p:not(.kicker):not(.eyebrow), body main > .page-hero .services-hero-copy > p, body main > .process-hero .hero-copy > p:not(.eyebrow), body main > .contact-hero .hero-copy > p:not(.eyebrow) {
  color: #696970 !important;
  max-width: 555px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

body main > .hero .hero-actions, body main > .page-hero .services-hero-cta, body main > .process-hero .hero-actions {
  margin-top: 34px !important;
  margin-bottom: 34px !important;
}

body main > .hero .button, body main > .page-hero .services-hero-cta {
  min-height: 48px !important;
  padding: 0 22px !important;
  font-size: 13px !important;
}

body main > .page-hero .eyebrow, body main > .process-hero .eyebrow, body main > .contact-hero .eyebrow {
  font-size: 11px !important;
}

body main > .hero .hero-visual {
  min-height: 570px !important;
}

body.services-page main > section.page-hero.services-overview-hero {
  zoom: 1 !important;
  grid-template-columns: 47% 53% !important;
  gap: 34px !important;
  width: min(1200px, 100% - 48px) !important;
  height: auto !important;
  min-height: 690px !important;
  max-height: none !important;
  padding-top: 32px !important;
  padding-bottom: 80px !important;
}

body.services-page main > section.page-hero.services-overview-hero .services-hero-copy h1 {
  letter-spacing: -5px !important;
  max-width: 700px !important;
  margin: 27px 0 !important;
  font-size: clamp(50px, 6vw, 82px) !important;
  line-height: .98 !important;
}

body.services-page main > section.page-hero.services-overview-hero .services-hero-copy > p {
  max-width: 555px !important;
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

body.services-page main > section.page-hero.services-overview-hero .services-hero-cta {
  min-height: 48px !important;
  margin-top: 34px !important;
  padding: 0 22px !important;
  font-size: 13px !important;
}

body.services-page .services-hero-copy {
  max-width: 100% !important;
}

@media (width <= 900px) {
  body main > .hero, body main > .page-hero, body main > .process-hero, body main > .contact-hero {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    width: min(1200px, 100% - 32px) !important;
    min-height: auto !important;
    padding-top: 50px !important;
    padding-bottom: 70px !important;
  }

  body.services-page main > section.page-hero.services-overview-hero {
    grid-template-columns: 1fr !important;
    width: min(760px, 100% - 32px) !important;
    min-height: auto !important;
    padding-top: 50px !important;
    padding-bottom: 70px !important;
  }

  body.services-page main > section.page-hero.services-overview-hero .services-hero-copy h1 {
    font-size: 48px !important;
  }
}

@media (width <= 600px) {
  body main > .hero, body main > .page-hero, body main > .process-hero, body main > .contact-hero {
    width: calc(100% - 28px) !important;
    padding-top: 35px !important;
    padding-bottom: 55px !important;
  }

  body main > .hero h1, body main > .page-hero h1, body main > .process-hero h1, body main > .contact-hero h1 {
    letter-spacing: -3px !important;
    margin: 24px 0 !important;
    font-size: 48px !important;
  }

  body main > .hero .hero-copy > p:not(.kicker):not(.eyebrow), body main > .page-hero .services-hero-copy > p, body main > .process-hero .hero-copy > p:not(.eyebrow), body main > .contact-hero .hero-copy > p:not(.eyebrow) {
    font-size: 15px !important;
  }

  body main > .hero .hero-visual {
    min-height: 340px !important;
  }
}

body main > .hero .hero-copy > p:not(.kicker):not(.eyebrow) {
  font-size: 15.3px !important;
}

@media (width <= 600px) {
  body main > .hero .hero-copy > p:not(.kicker):not(.eyebrow) {
    font-size: 13.5px !important;
  }
}

html body main > .hero h1, html body main > .page-hero h1, html body main > .process-hero h1, html body main > .contact-hero h1 {
  letter-spacing: -5px !important;
  font-size: clamp(50px, 6vw, 82px) !important;
  font-weight: 600 !important;
  line-height: .98 !important;
}

html body main > .hero .hero-copy > p:not(.kicker):not(.eyebrow), html body main > .page-hero .services-hero-copy > p, html body main > .process-hero .hero-copy > p:not(.eyebrow), html body main > .contact-hero .hero-copy > p:not(.eyebrow) {
  max-width: 555px !important;
  font-size: 15.3px !important;
  line-height: 1.65 !important;
}

html body.services-page main > section.page-hero.services-overview-hero {
  grid-template-columns: 47% 53% !important;
  gap: 34px !important;
  width: min(1200px, 100% - 48px) !important;
  height: auto !important;
  min-height: 690px !important;
  max-height: none !important;
  padding-top: 32px !important;
  padding-bottom: 80px !important;
  overflow: visible !important;
}

html body.services-page main > section.page-hero.services-overview-hero .services-hero-copy h1 {
  letter-spacing: -5px !important;
  font-size: clamp(50px, 6vw, 82px) !important;
  line-height: .98 !important;
}

html body.services-page main > section.page-hero.services-overview-hero .services-hero-copy > p {
  font-size: 15.3px !important;
  line-height: 1.65 !important;
}

@media (width <= 600px) {
  html body main > .hero h1, html body main > .page-hero h1, html body main > .process-hero h1, html body main > .contact-hero h1, html body.services-page main > section.page-hero.services-overview-hero .services-hero-copy h1 {
    letter-spacing: -3px !important;
    font-size: 48px !important;
    line-height: .98 !important;
  }

  html body main > .hero .hero-copy > p:not(.kicker):not(.eyebrow), html body main > .page-hero .services-hero-copy > p, html body main > .process-hero .hero-copy > p:not(.eyebrow), html body main > .contact-hero .hero-copy > p:not(.eyebrow), html body.services-page main > section.page-hero.services-overview-hero .services-hero-copy > p {
    font-size: 13.5px !important;
  }
}

html body main > .hero {
  box-sizing: border-box !important;
  align-items: center !important;
  min-height: calc(100svh - 70px) !important;
  padding-top: 140px !important;
  padding-bottom: 80px !important;
}

html body main > .hero .hero-copy {
  padding-top: 0 !important;
}

@supports not (height: 100svh) {
  html body main > .hero {
    min-height: calc(100vh - 70px) !important;
  }
}

@media (width <= 600px) {
  html body main > .hero {
    min-height: calc(100svh - 58px) !important;
    padding-top: 82px !important;
    padding-bottom: 55px !important;
  }
}

.hero .hero-eyebrow {
  color: #53647d;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 16px;
  font-size: 8.5px;
  font-weight: 400;
  line-height: 1.2;
}

.hero .hero-eyebrow:before {
  content: "";
  background: #2d67ff;
  width: 20px;
  height: 1px;
  margin: 0 9px 3px 0;
  display: inline-block;
}

html body main > .hero .hero-copy h1 {
  font-size: clamp(47.5px, 5.7vw, 77.9px) !important;
}

@media (width <= 600px) {
  html body main > .hero .hero-copy h1 {
    font-size: 45.6px !important;
  }
}

@media (width >= 901px) {
  html body main > .hero .hero-copy h1 {
    white-space: nowrap !important;
    max-width: none !important;
  }
}

@media (width <= 900px) {
  html body main > .hero .hero-copy h1 {
    white-space: normal !important;
  }
}

html body main > .hero h1, html body main > .page-hero h1, html body main > .process-hero h1, html body main > .contact-hero h1 {
  font-size: clamp(47.5px, 5.7vw, 77.9px) !important;
}

@media (width <= 600px) {
  html body main > .hero h1, html body main > .page-hero h1, html body main > .process-hero h1, html body main > .contact-hero h1 {
    font-size: 45.6px !important;
  }
}

@media (width >= 901px) {
  html body main > .hero {
    min-height: calc(100svh - 215px) !important;
    padding-top: 12px !important;
    padding-bottom: 10px !important;
  }

  html body main > .hero .hero-visual {
    min-height: 440px !important;
  }

  html body main > .hero .hero-copy {
    padding-top: 8px !important;
  }

  html body main > .hero .hero-actions {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
}

@supports not (height: 100svh) {
  @media (width >= 901px) {
    html body main > .hero {
      min-height: calc(100vh - 215px) !important;
    }
  }
}

@media (width >= 901px) {
  html body main > .hero {
    min-height: calc(100svh - 243px) !important;
  }

  html body main > .hero .hero-copy, html body main > .hero .hero-visual {
    position: relative;
    top: -28px;
  }
}

@supports not (height: 100svh) {
  @media (width >= 901px) {
    html body main > .hero {
      min-height: calc(100vh - 243px) !important;
    }
  }
}

@media (width >= 901px) {
  html body main > .hero {
    min-height: calc(100svh - 315px) !important;
    padding-bottom: 0 !important;
  }
}

@supports not (height: 100svh) {
  @media (width >= 901px) {
    html body main > .hero {
      min-height: calc(100vh - 315px) !important;
    }
  }
}

@media (width >= 901px) {
  html body main > .hero {
    align-items: center !important;
    min-height: calc(100svh - 70px) !important;
    padding-top: 130px !important;
    padding-bottom: 80px !important;
  }

  html body main > .hero .hero-copy, html body main > .hero .hero-visual {
    top: auto !important;
  }
}

.hero-trust-bar {
  box-shadow: none;
  backdrop-filter: none;
  background: none;
  border: 0;
  border-radius: 0;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 21px;
  display: grid;
  position: relative;
}

.hero-trust-bar:before {
  content: "";
  background: linear-gradient(90deg, #2864ff85, #2864ff21 42%, #6944ff2e 72%, #0000);
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.hero-trust-bar > div {
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  padding: 0 clamp(15px, 2vw, 28px);
  display: flex;
}

.hero-trust-bar > div:first-child {
  padding-left: 0;
}

.hero-trust-bar > div:last-child {
  padding-right: 0;
}

.hero-trust-bar > div + div {
  border-left: 1px solid #c2cfe48f;
}

.hero-trust-mark {
  color: #2864ff;
  letter-spacing: .12em;
  width: auto;
  height: auto;
  box-shadow: none;
  background: none;
  border-radius: 0;
  flex: none;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
  display: inline-block;
}

.hero-trust-bar > div:first-child .hero-trust-mark {
  color: #ff6f5d;
}

.hero-trust-bar p, .hero-trust-bar strong, .hero-trust-bar small {
  margin: 0;
  display: block;
}

.hero-trust-bar strong {
  color: #172a46;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.hero-trust-bar small {
  color: #6f7e93;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.45;
}

@media (width >= 901px) {
  html body.home-page main > .hero {
    grid-template-rows: minmax(0, auto) auto !important;
    align-content: center !important;
    row-gap: clamp(32px, 3vh + 10px, 40px) !important;
    min-height: calc(100svh - 70px) !important;
    margin-bottom: 24px !important;
    padding-top: clamp(18px, 3vh, 38px) !important;
    padding-bottom: clamp(28px, 4vh, 42px) !important;
  }

  html body.home-page main > .hero .hero-copy, html body.home-page main > .hero .hero-visual, html body.home-page main > .hero .hero-trust-bar {
    position: relative;
    top: -20px !important;
  }

  html body.home-page main > .hero .hero-copy, html body.home-page main > .hero .hero-visual {
    align-self: center !important;
  }

  html body.home-page main > .hero .hero-visual {
    min-height: clamp(430px, 55vh, 500px) !important;
  }
}

@supports not (height: 100svh) {
  @media (width >= 901px) {
    html body.home-page main > .hero {
      min-height: calc(100vh - 70px) !important;
    }
  }
}

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

  .hero-trust-bar > div:nth-child(3) {
    border-left: 0;
  }

  .hero-trust-bar > div:nth-child(n+3) {
    border-top: 1px solid #ccd6e98c;
    margin-top: 16px;
    padding-top: 16px;
  }

  .hero-trust-bar > div:nth-child(3) {
    padding-left: 0;
  }
}

@media (width <= 600px) {
  .hero-trust-bar {
    grid-template-columns: 1fr;
    padding-top: 17px;
  }

  .hero-trust-bar > div {
    padding: 0;
  }

  .hero-trust-bar > div + div {
    border-top: 1px solid #ccd6e985;
    border-left: 0;
    margin-top: 13px;
    padding-top: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-trust-bar {
    scroll-behavior: auto;
  }
}

html body.home-page main#top > section.hero.shell .hero-copy > p.hero-eyebrow {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

html body.home-page main#top > section.hero .hero-copy > h1 > span {
  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;
}

body main > .hero, body main > .page-hero, body main > .process-hero, body main > .contact-hero {
  isolation: isolate !important;
  background: radial-gradient(circle at 82% 18%, #754aff17, #0000 34%), radial-gradient(circle at 12% 82%, #2380ff1a, #0000 36%), none !important;
  border-bottom: 1px solid #cdd9edd9 !important;
  position: relative !important;
}

body main > .page-hero .eyebrow, body main > .process-hero .eyebrow, body main > .contact-hero .eyebrow {
  color: #1768ff !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
  align-items: center !important;
  width: max-content !important;
  margin-bottom: 0 !important;
  font-weight: 600 !important;
  display: inline-flex !important;
}

body main > .hero h1 span, body main > .page-hero h1 span, body main > .process-hero h1 span, body main > .contact-hero h1 span {
  color: #2963ff !important;
}

body main > .hero .hero-visual {
  backdrop-filter: blur(24px) !important;
  background: radial-gradient(circle at 78% 16%, #7f4dff2b, #0000 35%), radial-gradient(circle at 12% 82%, #2387ff2b, #0000 38%), #f2f8ffb8 !important;
  border: 1px solid #ffffffeb !important;
  border-radius: 36px !important;
  padding: 18px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 36px 80px #30589b24 !important;
}

body main > .hero .hero-visual > img {
  border-radius: 24px !important;
  width: 100% !important;
  max-width: 680px !important;
}

body main > .hero .primary, body main > .page-hero .services-hero-cta {
  color: #fff !important;
  background: linear-gradient(120deg, #1768ff, #7040ff) !important;
  border: 0 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  box-shadow: 0 18px 38px #474dff38 !important;
}

body main > .hero .primary:hover, body main > .page-hero .services-hero-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 44px #474dff47 !important;
}

@media (width <= 900px) {
  body main > .hero .hero-visual {
    border-radius: 30px !important;
    justify-self: center !important;
    width: min(680px, 100%) !important;
  }
}

@media (width <= 600px) {
  body main > .hero .hero-visual {
    border-radius: 26px !important;
    padding: 12px !important;
  }
}

body main > .hero .hero-visual > img {
  width: 110% !important;
  max-width: 748px !important;
}

@media (width >= 901px) {
  body main > .hero .hero-visual > img {
    transform: translateX(12%) !important;
  }
}

.home-page {
  --home-type-hero: clamp(48px, 5.2vw, 68px);
  --home-type-section: clamp(34px, 4vw, 50px);
  --home-type-subsection: clamp(27px, 3vw, 40px);
  --home-type-card: clamp(18px, 1.7vw, 22px);
  --home-type-intro: clamp(16px, 1.35vw, 18px);
  --home-type-body: 16px;
  --home-type-card-body: 14px;
  --home-type-button: 14px;
  --home-type-label: 11px;
  --home-type-small: 12px;
}

.home-page, .home-page :is(header, main, footer, button, input, select, textarea) {
  font-family: Poppins, Arial, sans-serif !important;
}

.home-page .shared-site-header nav a {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

.home-page .shared-site-header nav a.active {
  font-weight: 500 !important;
}

.home-page .shared-site-header .nav-cta {
  font-size: var(--home-type-button) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.home-page main :is(.button, button[type="submit"]) {
  font-size: var(--home-type-button) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.home-page main :is(.text-link, .concept-showcase-all, .pricing-simple-cta) {
  font-size: var(--home-type-button) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.home-page main .home-build-hosting-link {
  font-size: var(--home-type-button) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

html body.home-page main#top > section.hero.shell .hero-copy h1 {
  font-size: var(--home-type-hero) !important;
  letter-spacing: -.055em !important;
  font-weight: 700 !important;
  line-height: .98 !important;
}

.home-page main > .hero .hero-copy > p:not(.hero-eyebrow) {
  font-size: var(--home-type-intro) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

html body.home-page main#top > section.hero.shell .hero-copy > p.hero-eyebrow {
  letter-spacing: .14em !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

.home-page .hero-trust-bar strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.home-page .hero-trust-bar small {
  font-size: var(--home-type-small) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.home-page .hero-trust-mark {
  font-size: var(--home-type-small) !important;
  font-weight: 600 !important;
}

.home-page main :is(.concept-showcase-head h2, .home-build-hosting-copy h2, .usp-section-heading h2, .problem-head h2, .home-branding-copy h2, .about-webschets .section-head h2, .process .section-head h2, .testimonial-heading h2, .pricing .section-head h2, .cta h2, .website-scan h2) {
  font-size: var(--home-type-section) !important;
  letter-spacing: -.05em !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
}

.home-page main :is(.home-build-hosting-intro, .usp-section-heading > p, .problem-head > p, .home-branding-intro, .about-webschets .section-head > p, .process .section-head > p, .website-scan .scan-copy > p) {
  font-size: var(--home-type-body) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}

.home-page main :is(.kicker, .about-label, .pricing-simple-label, .pricing-simple-popular) {
  font-size: var(--home-type-label) !important;
  letter-spacing: .12em !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.home-page main article p {
  font-size: var(--home-type-card-body) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

.home-page main article small {
  font-size: var(--home-type-small) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.home-page .usp-card-grid h3, .home-page .scan-advice h3 {
  font-size: var(--home-type-card) !important;
  letter-spacing: -.025em !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.home-page .problem-grid h3, .home-page .about-values h3 {
  font-size: var(--home-type-card) !important;
  letter-spacing: -.025em !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.home-page .about-main h3 {
  font-size: var(--home-type-subsection) !important;
  letter-spacing: -.035em !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
}

.home-page .about-main p, .home-page .testimonial-grid blockquote {
  font-size: var(--home-type-body) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}

.home-page .testimonial-owner {
  font-size: 14px !important;
  font-weight: 600 !important;
}

.home-page .concept-showcase-meta strong {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

.home-page .concept-showcase-meta > span {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.home-page :is(.home-build-hosting-points, .home-branding-benefits) strong {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.home-page .home-build-hosting-points.home-build-hosting-points.home-build-hosting-points span {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

.home-page .home-branding-benefits.home-branding-benefits.home-branding-benefits span {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
}

.home-page .timeline .day b {
  font-size: var(--home-type-label) !important;
  font-weight: 600 !important;
}

.home-page .timeline .day > span {
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

.home-page .timeline .day :is(small, em), .home-page .timeline-detail p {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

.home-page .timeline-detail > span {
  font-size: var(--home-type-small) !important;
  font-weight: 600 !important;
}

.home-page .pricing-simple-card h3 {
  font-size: clamp(26px, 2.3vw, 30px) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
}

.home-page .pricing-simple-card header p, .home-page .pricing-simple-card li {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

.home-page .pricing-simple-price strong {
  font-size: clamp(36px, 3.6vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.home-page .pricing-simple-price :is(small, span), .home-page .pricing-simple-note {
  font-size: var(--home-type-small) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.home-page .cta > p {
  font-size: var(--home-type-body) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

.home-page .cta > p:first-of-type {
  font-size: var(--home-type-label) !important;
  letter-spacing: .14em !important;
  font-weight: 600 !important;
}

.home-page .cta > small {
  font-size: var(--home-type-small) !important;
  font-weight: 400 !important;
}

.home-page .scan-form label {
  font-size: 14px !important;
  font-weight: 500 !important;
}

.home-page .scan-form input {
  font-size: 16px !important;
  font-weight: 400 !important;
}

.home-page footer :is(a, p, span) {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

.home-page footer :is(b, strong) {
  font-size: 13px !important;
  font-weight: 600 !important;
}

.home-page footer .button {
  font-size: var(--home-type-button) !important;
  font-weight: 600 !important;
}

.home-page footer > small {
  font-size: var(--home-type-small) !important;
  font-weight: 400 !important;
}

@media (width <= 900px) {
  .home-page {
    --home-type-hero: clamp(44px, 7vw, 58px);
    --home-type-section: clamp(34px, 5.5vw, 46px);
  }
}

@media (width <= 600px) {
  .home-page {
    --home-type-hero: clamp(40px, 11vw, 46px);
    --home-type-section: clamp(31px, 9vw, 38px);
    --home-type-subsection: 28px;
    --home-type-card: 20px;
    --home-type-intro: 16px;
    --home-type-body: 15px;
    --home-type-card-body: 14px;
    --home-type-button: 14px;
    --home-type-label: 10px;
  }

  .home-page .shared-site-header nav a {
    font-size: 15px !important;
  }

  .home-page .hero-trust-bar small {
    font-size: 11px !important;
  }

  .home-page .pricing-simple-price strong {
    font-size: 36px !important;
  }
}

.home-page .shared-site-header .nav-cta {
  background: #2864ff !important;
  box-shadow: 0 14px 30px #2864ff3d !important;
}

.home-page .shared-site-header .nav-cta:hover {
  background: #2058e8 !important;
  box-shadow: 0 18px 36px #2864ff4d !important;
}

.home-page .hero-trust-bar > .hero-trust-review {
  align-items: center;
  gap: 12px;
}

.home-page .hero-review-badge {
  color: #ff6f5d;
  background: #ffffffb8;
  border: 1px solid #ff6f5d38;
  border-radius: 9px;
  flex: 0 0 31px;
  place-items: center;
  width: 31px;
  height: 31px;
  font-size: 15px;
  line-height: 1;
  display: grid;
  box-shadow: 0 7px 18px #28395d14;
}

.home-page .hero-review-score {
  align-items: center;
  gap: 8px;
  display: flex;
}

.home-page .hero-review-score strong {
  white-space: nowrap;
  font-size: 13px !important;
}

.home-page .hero-review-stars {
  color: #ff6f5d;
  letter-spacing: .06em;
  font-size: 12px;
  line-height: 1;
  display: inline-block;
}

.home-page .hero-trust-review small {
  margin-top: 5px;
}

.home-page #branch-showcase-title > span {
  color: #2864ff;
}

.home-page .usp-section-heading {
  grid-template-columns: minmax(0, 900px);
  gap: 0;
}

.home-page .website-problems {
  margin-top: clamp(32px, 3.6vw, 50px);
  margin-bottom: clamp(32px, 3.6vw, 50px);
  padding: clamp(30px, 3vw, 42px) clamp(22px, 3vw, 40px);
}

.home-page .website-problems .problem-head {
  margin-bottom: 18px;
}

.home-page .website-problems .problem-grid article, .home-page .website-problems .problem-grid article + article, .home-page .website-problems .problem-grid article:nth-child(odd), .home-page .website-problems .problem-grid article:nth-child(2n), .home-page .website-problems .problem-grid article:nth-child(n+3) {
  padding-top: 12px;
  padding-bottom: 12px;
}

.home-page .about-values article {
  backdrop-filter: blur(18px) saturate(140%);
  background: linear-gradient(145deg, #ffffffdf, #eef3ffbd);
  border-color: #fff;
  box-shadow: inset 0 1px #fff, 0 24px 60px #29457b14;
}

.home-page .about-mark > span {
  font-weight: 800;
}

.home-page .about-main > div:last-child > p {
  font-size: 16px !important;
}

@media (hover: hover) and (width >= 901px) {
  .home-page .about-values article:hover {
    background: linear-gradient(135deg, #2864ff 0%, #584bff 58%, #7137ff 100%);
    border-color: #ffffff73;
    transform: translateY(-5px);
    box-shadow: 0 20px 42px #2d4fda47, inset 0 1px #ffffff59;
  }

  .home-page .about-values article:hover h3, .home-page .about-values article:hover p {
    color: #fff;
  }

  .home-page .about-values article:hover p {
    color: #ffffffd6;
  }

  .home-page .about-values article:hover:after {
    opacity: .58;
    filter: brightness(0) invert();
  }
}

@media (width <= 600px) {
  .home-page #over-ons [data-about-card] {
    cursor: default;
    -webkit-tap-highlight-color: transparent;
  }

  .home-page #over-ons [data-about-card].is-active {
    background: linear-gradient(135deg, #2864ff 0%, #584bff 58%, #7137ff 100%);
    border-color: #ffffff73;
    transform: translateY(-5px);
    box-shadow: 0 20px 42px #2d4fda47, inset 0 1px #ffffff59;
  }

  .home-page #over-ons [data-about-card].is-active :is(.about-label, h3, h3 span, p) {
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
  }

  .home-page #over-ons [data-about-card].is-active p {
    color: #ffffffd6 !important;
  }

  .home-page #over-ons .about-values [data-about-card].is-active:after {
    opacity: .58;
    filter: brightness(0) invert();
    transform: translate(-5px, -5px) scale(1.08) rotate(4deg);
  }

  .home-page #over-ons [data-about-card].is-active:before {
    transform: translateX(65%) rotate(8deg);
  }

  .home-page #over-ons .about-main.is-active .about-mark {
    transform: translateY(-4px) rotate(-2deg);
    box-shadow: 22px 30px 58px #1e186e61, inset 4px 4px 9px #ffffff8c, 0 0 0 1px #ffffff47;
  }

  .home-page #over-ons .about-main.is-active .button {
    color: #315eff;
    background: #fff;
    box-shadow: 0 13px 30px #161d6640;
  }
}

.home-page .home-branding {
  background: radial-gradient(circle at 85% 18%, #7446ff1f, #0000 35%), radial-gradient(circle at 58% 88%, #2a70ff1a, #0000 40%), linear-gradient(145deg, #ffffffbd, #f6f8ff85);
  border: 1px solid #ffffffe6;
  border-radius: 36px;
  min-height: 540px;
  overflow: hidden;
  box-shadow: 0 28px 76px #384b7c17, inset 0 1px #fff;
}

.home-page .home-branding:before {
  content: "";
  z-index: 0;
  filter: blur(26px);
  pointer-events: none;
  background: radial-gradient(circle, #4870ff1f, #7e50ff0f 48%, #0000 72%);
  border-radius: 50%;
  width: 70%;
  height: 82%;
  position: absolute;
  top: 8%;
  bottom: auto;
  right: -8%;
  transform: none;
}

.home-page .home-branding-visual {
  align-items: center;
  min-height: 420px;
  padding: 8px 0 12px;
}

.home-page .home-branding-glow {
  opacity: .7;
  filter: blur(34px);
  inset: 8% -2% 2%;
}

.home-page .home-branding-visual:before {
  aspect-ratio: auto;
  background: radial-gradient(circle at 52% 46%, #ffffffd6, #dfe8ff33 48%, #0000 74%);
  border: 0;
  border-radius: 50%;
  width: min(94%, 690px);
  height: auto;
  top: 9%;
  bottom: 7%;
  transform: none;
}

.home-page .home-branding-visual:after {
  filter: blur(16px);
  background: radial-gradient(#22345c29, #4e649214 44%, #0000 74%);
  height: 11%;
  inset: auto 10% 8% 12%;
  transform: scaleX(.82);
}

.home-page .home-branding-visual img {
  filter: drop-shadow(0 10px 11px #1f30561f) drop-shadow(0 24px 26px #42517e1a);
  width: 108%;
  max-width: 760px;
  transform: translateY(0);
}

.home-page .home-branding:hover .home-branding-visual img {
  transform: translateY(-2px) scale(1.008);
}

@media (width >= 901px) {
  html body.home-page main#top > section.hero.shell .hero-visual > img {
    width: 110.25% !important;
    margin-left: 6% !important;
  }

  .home-page .home-build-hosting-visual img {
    width: 106.4%;
    margin-left: -4.5%;
  }
}

@media (width <= 980px) {
  .home-page .home-branding {
    padding: 42px 34px 30px;
  }

  .home-page .home-branding:before {
    width: 100%;
    top: 14%;
    right: -12%;
  }

  .home-page .home-branding-visual {
    min-height: 340px;
  }

  .home-page .home-branding-visual img {
    width: min(108%, 700px);
    transform: none;
  }

  .home-page .home-branding:hover .home-branding-visual img {
    transform: none;
  }
}

@media (width <= 900px) {
  .home-page .home-build-hosting-visual img {
    width: 102.6%;
    margin-left: -1.3%;
  }

  .home-page .about-main > div:last-child > p {
    font-size: 14px !important;
  }
}

@media (width <= 600px) {
  html body.home-page main#top > section.hero.shell {
    gap: clamp(28px, 5svh, 44px) !important;
    min-height: 0 !important;
    padding-top: clamp(120px, 17.5svh, 150px) !important;
    padding-bottom: 22px !important;
  }

  html body.home-page main#top > section.hero.shell .hero-visual {
    width: 100% !important;
    height: clamp(220px, 30svh, 254px) !important;
    min-height: clamp(220px, 30svh, 254px) !important;
    max-height: clamp(220px, 30svh, 254px) !important;
    margin: 0 !important;
  }

  html body.home-page main#top > section.hero.shell .hero-visual > img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: clamp(220px, 30svh, 254px) !important;
    object-fit: contain !important;
  }

  html body.home-page main#top > section.hero.shell .hero-copy h1 {
    letter-spacing: -2.2px !important;
    margin: 8px 0 12px !important;
    font-size: clamp(33px, 9.35vw, 36px) !important;
    line-height: .98 !important;
  }

  html body.home-page main#top > section.hero.shell .hero-copy > p:not(.hero-eyebrow) {
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.48 !important;
  }

  html body.home-page main#top > section.hero.shell .hero-actions {
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 15px 0 0 !important;
  }

  html body.home-page main#top > section.hero.shell .hero-actions > a {
    justify-content: center !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }

  html body.home-page main#top > section.hero.shell .hero-actions .text-link {
    border: 1px solid #d7dce7 !important;
    border-radius: 999px !important;
  }

  html body.home-page main#top > section.hero.shell .hero-trust-bar {
    margin-top: 56px !important;
    top: 0 !important;
  }

  .home-page .hero-review-score {
    flex-wrap: wrap;
    gap: 6px;
  }

  .home-page .hero-review-stars {
    font-size: 11px;
  }

  .home-page .website-problems {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .home-page .website-problems .problem-head {
    margin-bottom: 14px;
  }

  .home-page .home-build-hosting-visual img {
    width: 110.2%;
    margin-left: -5.1%;
  }

  .home-page .home-branding {
    border-radius: 28px;
    padding: 30px 22px 22px;
  }

  .home-page .home-branding-visual {
    min-height: 240px;
    padding: 4px 0 10px;
  }

  .home-page .home-branding-visual img {
    width: 114%;
    transform: none;
  }

  .home-page .home-branding-visual:after {
    inset: auto 2% 6% 3%;
  }

  .home-page .about-main > div:last-child > p {
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-branding-visual img, .home-page .shared-site-header .nav-cta {
    transition: none !important;
  }
}

.home-page .home-branding {
  width: min(1080px, 100% - 48px);
  min-height: 0;
  box-shadow: none;
  backdrop-filter: none;
  background: none;
  border: 0;
  border-radius: 0;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
  gap: clamp(22px, 3vw, 40px);
  margin-top: clamp(36px, 5vw, 64px);
  margin-bottom: clamp(36px, 5vw, 64px);
  padding: clamp(20px, 2.6vw, 34px) 0;
  overflow: visible;
}

.home-page .home-branding:before {
  content: none;
}

.home-page .home-branding .kicker {
  background: none;
  border-radius: 0;
  margin: 0 0 14px;
  padding: 0;
  font-weight: 600;
  line-height: 1.3;
  display: block;
  letter-spacing: 1.32px !important;
  font-size: 11px !important;
}

.home-page .home-branding h2 {
  letter-spacing: -2.7px;
  font-size: clamp(34px, 3.5vw, 48px);
}

.home-page .home-branding-intro {
  max-width: 500px;
  margin: 17px 0 20px;
  line-height: 1.58;
}

.home-page .home-branding-benefits {
  gap: 12px;
  margin-bottom: 21px;
}

.home-page .home-branding-benefits strong {
  margin-bottom: 4px;
}

.home-page .home-branding-visual {
  min-height: 300px;
  padding: 0;
}

.home-page .home-branding-glow {
  opacity: .46;
  inset: 12% 4% 4%;
}

.home-page .home-branding-visual img {
  width: 88%;
  max-width: 580px;
}

@media (width <= 980px) {
  .home-page .home-branding {
    grid-template-columns: 1fr;
    width: min(720px, 100% - 48px);
    padding: 26px 0;
  }

  .home-page .home-branding-visual {
    min-height: 275px;
  }

  .home-page .home-branding-visual img {
    width: min(88%, 560px);
  }
}

@media (width <= 600px) {
  .home-page .home-branding {
    border-radius: 0;
    width: min(100% - 28px, 720px);
    padding: 22px 0 16px;
  }

  .home-page .home-branding h2 {
    letter-spacing: -2.3px;
    font-size: 36px;
  }

  .home-page .home-branding-intro {
    margin: 16px 0 20px;
    font-size: 13px;
  }

  .home-page .home-branding-visual {
    min-height: 210px;
    order: 1;
  }

  .home-page .home-branding-visual img {
    width: 94%;
  }

  .home-page .home-branding-copy {
    order: 2;
  }
}

body.home-page main#top .home-branding .home-branding-copy > p.kicker {
  letter-spacing: 1.32px !important;
  font-size: 11px !important;
}

body.home-page main#top .section-label, body.home-page main#top section .section-label, body.home-page main#top section div > .section-label {
  width: max-content !important;
  max-width: 100% !important;
  min-height: 0 !important;
  box-shadow: none !important;
  color: #2864ff !important;
  letter-spacing: 1.32px !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: 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: 11px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  display: block !important;
  transform: none !important;
}

@media (width <= 600px) {
  body.home-page main#top .section-label, body.home-page main#top section .section-label, body.home-page main#top section div > .section-label {
    letter-spacing: 1.2px !important;
    margin-bottom: 12px !important;
    font-size: 10px !important;
  }
}

html body.home-page main#top > section.hero.shell .hero-copy > p.hero-eyebrow.section-label {
  color: #2864ff !important;
  letter-spacing: 1.32px !important;
  text-transform: uppercase !important;
  margin: 0 0 14px !important;
  font-family: Poppins, Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

@media (width <= 600px) {
  html body.home-page main#top > section.hero.shell .hero-copy > p.hero-eyebrow.section-label {
    letter-spacing: 1.2px !important;
    margin-bottom: 12px !important;
    font-size: 10px !important;
  }
}

html body.home-page main#top .section-label, html body.home-page main#top section .section-label, html body.home-page main#top section div > .section-label, html body.home-page main#top > section.hero.shell .hero-copy > p.hero-eyebrow.section-label, html body.home-page main#top > section.home-branding.shell .home-branding-copy > p.kicker.section-label {
  font-size: 13px !important;
}

html body.home-page .shared-site-header a.nav-cta {
  background: linear-gradient(120deg, #2864ff, #7137ff) !important;
  box-shadow: 0 14px 30px #4538ff2b !important;
}

html body.home-page .shared-site-header a.nav-cta:hover {
  background: linear-gradient(120deg, #2864ff, #7137ff) !important;
  box-shadow: 0 19px 38px #4538ff3d !important;
}

html body.home-page .shared-site-header a.nav-cta {
  font-size: 11px !important;
}

@media (width >= 901px) {
  .home-page .pricing-simple-grid {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.08fr) minmax(0, .82fr) !important;
    align-items: center !important;
    gap: 24px !important;
  }

  .home-page .pricing-simple-card:not(.is-featured) {
    transform-origin: center !important;
    min-height: 470px !important;
    padding: 24px !important;
    transform: scale(.92) !important;
  }

  .home-page .pricing-simple-card:not(.is-featured):hover {
    transform: translateY(-4px) scale(.92) !important;
  }

  .home-page .pricing-simple-card.is-featured {
    z-index: 2 !important;
    min-height: 560px !important;
    padding: 32px !important;
    transform: scale(1.035) !important;
    box-shadow: 0 30px 76px #453dc038, inset 0 1px #fff !important;
  }

  .home-page .pricing-simple-card.is-featured:hover {
    transform: translateY(-5px) scale(1.035) !important;
  }
}

body.home-page main#top {
  --home-section-gap: 24px;
  --home-section-pad: clamp(46px, 5vw, 64px);
  --home-section-radius: 32px;
  --home-section-bg: linear-gradient(145deg, #ffffffd1, #f5f8ff9e);
  --home-section-border: #ffffffeb;
  --home-section-shadow: 0 24px 64px #2a3d6913, inset 0 1px 0 #fffffff2;
}

body.home-page main#top > section {
  box-sizing: border-box !important;
  margin-top: 0 !important;
  margin-bottom: var(--home-section-gap) !important;
}

body.home-page main#top > section.shell:not(.hero):not(.cta) {
  width: min(1200px, 100% - 48px) !important;
  min-height: 0 !important;
  padding: var(--home-section-pad) !important;
  border: 1px solid var(--home-section-border) !important;
  border-radius: var(--home-section-radius) !important;
  background: var(--home-section-bg) !important;
  box-shadow: var(--home-section-shadow) !important;
}

body.home-page main#top > section.hero {
  margin-bottom: var(--home-section-gap) !important;
}

body.home-page main#top > section.about-webschets, body.home-page main#top > section.pricing {
  background: none !important;
  width: 100% !important;
  padding: 0 !important;
}

body.home-page main#top > section.about-webschets > .shell, body.home-page main#top > section.pricing > .shell {
  width: min(1200px, 100% - 48px) !important;
  padding: var(--home-section-pad) !important;
  border: 1px solid var(--home-section-border) !important;
  border-radius: var(--home-section-radius) !important;
  background: var(--home-section-bg) !important;
  box-shadow: var(--home-section-shadow) !important;
  margin: 0 auto !important;
}

body.home-page main#top > section.cta {
  width: min(1200px, 100% - 48px) !important;
  min-height: 480px !important;
  padding: var(--home-section-pad) !important;
  border-radius: var(--home-section-radius) !important;
  border: 1px solid #ffffffeb !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-shadow: 0 26px 68px #3f4aaa1f, inset 0 1px #fff !important;
}

body.home-page main#top > section.home-branding {
  gap: clamp(28px, 4vw, 52px) !important;
}

body.home-page main#top > section.website-problems, body.home-page main#top > section.home-branding, body.home-page main#top > section.process, body.home-page main#top > section.testimonial-grid, body.home-page main#top > section.website-scan {
  margin-top: 0 !important;
}

body.home-page main#top > section.usp-strip {
  margin-top: 0 !important;
  margin-bottom: var(--home-section-gap) !important;
}

body.home-page .ws-footer {
  margin-top: var(--home-section-gap, 24px) !important;
}

@media (width <= 900px) {
  body.home-page main#top {
    --home-section-gap: 18px;
    --home-section-pad: clamp(32px, 6vw, 46px);
    --home-section-radius: 28px;
  }
}

@media (width <= 600px) {
  body.home-page main#top {
    --home-section-gap: 14px;
    --home-section-pad: 26px 20px;
    --home-section-radius: 24px;
  }

  body.home-page main#top > section.shell:not(.hero):not(.cta), body.home-page main#top > section.cta, body.home-page main#top > section.about-webschets > .shell, body.home-page main#top > section.pricing > .shell {
    width: min(100% - 28px, 1200px) !important;
  }

  body.home-page main#top > section.cta {
    min-height: 420px !important;
  }
}

body.home-page main#top > section.shell:not(.hero), body.home-page main#top > section.about-webschets > .shell, body.home-page main#top > section.pricing > .shell {
  isolation: isolate !important;
  overflow: hidden !important;
}

body.home-page main#top > section.shell:not(.hero):not(.cta):not(.website-problems), body.home-page main#top > section.about-webschets > .shell, body.home-page main#top > section.pricing > .shell {
  box-shadow: none !important;
  isolation: auto !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: clamp(44px, 4vw, 56px) 0 !important;
  overflow: visible !important;
}

body.home-page main#top > section.about-webschets {
  background: radial-gradient(circle at 9% 32%, #dce8ff9c 0, #0000 31%), radial-gradient(circle at 91% 68%, #eadfff8f 0, #0000 30%) !important;
}

body.home-page main#top > section.website-problems {
  padding: var(--home-section-pad) !important;
  border-radius: var(--home-section-radius) !important;
  box-shadow: var(--home-section-shadow) !important;
  isolation: isolate !important;
  background: radial-gradient(circle at 12% 0, #2670ff2b, #0000 33%), radial-gradient(circle at 94% 100%, #7c45ff2b, #0000 38%), linear-gradient(135deg, #ffffffc7, #f7f9ff85) !important;
  border: 1px solid #ffffffeb !important;
  overflow: hidden !important;
}

@media (width <= 600px) {
  body.home-page main#top > section.shell:not(.hero):not(.cta):not(.website-problems), body.home-page main#top > section.about-webschets > .shell, body.home-page main#top > section.pricing > .shell {
    padding: 34px 0 !important;
  }

  body.home-page main#top > section.website-problems {
    padding: 26px 20px !important;
  }
}

body.home-page main#top > section.website-problems {
  box-shadow: none !important;
  isolation: auto !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: clamp(44px, 4vw, 56px) 0 !important;
  overflow: visible !important;
}

body.home-page main#top > section.website-problems .problem-head {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
  align-items: start !important;
  gap: clamp(44px, 6vw, 84px) !important;
  margin-bottom: clamp(38px, 4vw, 54px) !important;
  display: grid !important;
}

body.home-page main#top > section.website-problems .problem-head > p {
  grid-area: 1 / 1 !important;
  align-self: start !important;
  max-width: 440px !important;
  margin: 0 !important;
}

body.home-page main#top > section.website-problems .problem-head > div {
  grid-area: 1 / 2 !important;
  min-width: 0 !important;
}

body.home-page main#top > section.website-problems .problem-head h2 {
  margin-bottom: 0 !important;
}

@media (width <= 760px) {
  body.home-page main#top > section.website-problems {
    padding: 34px 0 !important;
  }

  body.home-page main#top > section.website-problems .problem-head {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  body.home-page main#top > section.website-problems .problem-head > div {
    grid-area: 1 / 1 !important;
  }

  body.home-page main#top > section.website-problems .problem-head > p {
    grid-area: 2 / 1 !important;
    max-width: 620px !important;
  }
}

html body.home-page main#top > section.website-problems.shell.website-problems {
  box-shadow: none !important;
  isolation: auto !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: clamp(44px, 4vw, 56px) 0 !important;
  overflow: visible !important;
}

html body.home-page main#top > section.website-problems.shell:before, html body.home-page main#top > section.website-problems.shell:after {
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
  background: none !important;
  animation: none !important;
  display: none !important;
}

@media (width >= 761px) {
  body.home-page main#top > section.website-problems .problem-head {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr) !important;
  }

  body.home-page main#top > section.website-problems .problem-head > div {
    grid-area: 1 / 1 !important;
  }

  body.home-page main#top > section.website-problems .problem-head > p {
    grid-area: 1 / 2 !important;
    justify-self: end !important;
  }
}

@keyframes problemLabelCaretBlink {
  0%, 48% {
    opacity: 1;
  }

  49%, 100% {
    opacity: 0;
  }
}

html body.home-page main#top > section.website-problems .problem-head .kicker.section-label:before {
  opacity: 1;
  content: "" !important;
  vertical-align: -.14em !important;
  background: #2864ff !important;
  border: 0 !important;
  border-radius: 1px !important;
  width: 2px !important;
  height: 1em !important;
  margin: 0 8px 0 0 !important;
  animation: .9s step-end infinite problemLabelCaretBlink !important;
  display: inline-block !important;
  position: static !important;
  box-shadow: 0 0 8px #2864ff73 !important;
}

@media (prefers-reduced-motion: reduce) {
  html body.home-page main#top > section.website-problems .problem-head .kicker.section-label:before {
    opacity: 1 !important;
    animation: none !important;
  }
}

html body.home-page main#top > section.website-problems .problem-head .kicker.section-label:before {
  margin-right: 8px !important;
}

html body.home-page main#top > section.website-problems .problem-grid article h3, html body.home-page main#top > section.website-problems .problem-grid article p {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

html body.home-page main#top > section.website-problems .problem-grid article h3 {
  color: #111318 !important;
}

html body.home-page main#top > section.website-problems .problem-grid article h3 span {
  color: #2864ff !important;
}

html body.home-page main#top > section.website-problems .problem-grid article p {
  color: #74829c !important;
}

html body.home-page main#top > section.website-problems .problem-grid article h3, html body.home-page main#top > section.website-problems .problem-grid article h3 span {
  font-size: 16px !important;
  font-weight: 500 !important;
}

html body.home-page main#top > section.hero.shell .hero-copy {
  min-width: 0 !important;
  padding-right: clamp(18px, 2.2vw, 34px) !important;
}

html body.home-page main#top > section.hero.shell .hero-copy > h1 {
  letter-spacing: clamp(-3.8px, -.24vw, -2.4px) !important;
  overflow-wrap: normal !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: clamp(48px, 5.2vw, 68px) !important;
  line-height: .98 !important;
}

@media (width <= 1100px) and (width >= 901px) {
  html body.home-page main#top > section.hero.shell .hero-copy > h1 {
    font-size: clamp(48px, 5.2vw, 60px) !important;
  }
}

@media (width <= 900px) {
  html body.home-page main#top > section.hero.shell .hero-copy {
    padding-right: 0 !important;
  }

  html body.home-page main#top > section.hero.shell .hero-copy > h1 {
    font-size: clamp(44px, 8vw, 62px) !important;
  }
}

html body.home-page main#top > section.hero.shell .hero-copy > h1, html body.home-page main#top > section.hero.shell .hero-copy > h1 span {
  font-weight: 500 !important;
}

body.home-page main#top > section h2 {
  max-width: 24ch;
  font-size: clamp(34px, 4vw, 50px) !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}

body.home-page #over-ons .section-head h2, body.home-page #over-ons .about-main h3 {
  color: #101d36 !important;
}

body.home-page #over-ons .about-main h3 {
  color: #101d36 !important;
  transition: color .25s !important;
}

body.home-page #over-ons .about-main h3 span {
  color: #2864ff !important;
  background: linear-gradient(110deg, #2864ff 10% 52%, #7137ff 100%) !important;
  font-weight: 500 !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

body.home-page #over-ons .about-values article h3 {
  color: #2864ff !important;
  font-weight: 500 !important;
  transition: color .25s !important;
}

body.home-page #over-ons .about-main:hover h3, body.home-page #over-ons .about-main:focus-within h3, body.home-page #over-ons .about-values article:hover h3, body.home-page #over-ons .about-values article:focus-within h3 {
  color: #fff !important;
}

/* Persoonlijke eigenaarskaart */
body.home-page #over-ons .about-values{display:block;min-width:0}
body.home-page #over-ons .about-values .about-owner-card{display:grid;height:100%;min-height:315px;padding:0;overflow:hidden;grid-template-rows:minmax(0,1.18fr) auto;border:1px solid rgba(84,112,171,.16);border-radius:22px;background:rgba(255,255,255,.76);box-shadow:0 16px 44px rgba(29,61,124,.08);isolation:isolate}
body.home-page #over-ons .about-values .about-owner-card:before,body.home-page #over-ons .about-values .about-owner-card:after{display:none!important;content:none!important}
.about-owner-photo{position:relative;min-height:0;overflow:hidden;background:linear-gradient(145deg,#eaf1ff,#f5efff)}
.about-owner-photo:after{position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(to top,rgba(255,255,255,.96),transparent);content:"";pointer-events:none}
.about-owner-photo img{display:block;width:100%;height:100%;min-height:190px;object-fit:cover;object-position:center 29%;transition:transform .5s cubic-bezier(.22,.8,.25,1)}
.about-owner-copy{position:relative;z-index:1;padding:20px 22px 22px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(245,248,255,.94))}
.about-owner-role{display:block;color:#2864ff;font-size:10px;font-weight:700;letter-spacing:.15em}
body.home-page #over-ons .about-values .about-owner-card h3{margin:7px 0 8px;color:#142843;font-size:25px;line-height:1.08;transform:none!important}
body.home-page #over-ons .about-values .about-owner-card p{margin:0;color:#6d7f98;font-size:13px;line-height:1.65;transform:none!important}
@media(hover:hover){body.home-page #over-ons .about-values .about-owner-card:hover{transform:translateY(-3px);box-shadow:0 22px 55px rgba(29,61,124,.13)}body.home-page #over-ons .about-values .about-owner-card:hover .about-owner-photo img{transform:scale(1.035)}}
@media(max-width:900px){body.home-page #over-ons .about-values .about-owner-card{min-height:285px;grid-template-columns:minmax(170px,.8fr) 1.2fr;grid-template-rows:1fr}.about-owner-photo img{min-height:285px}.about-owner-copy{display:flex;flex-direction:column;justify-content:center;padding:24px}}
@media(max-width:600px){body.home-page #over-ons .about-values .about-owner-card{min-height:0;grid-template-columns:1fr;grid-template-rows:260px auto}.about-owner-photo img{min-height:260px}.about-owner-copy{padding:20px}.about-owner-role{font-size:9px}body.home-page #over-ons .about-values .about-owner-card h3{font-size:23px}body.home-page #over-ons .about-values .about-owner-card p{font-size:12px}}

/* Compactere portretpresentatie */
body.home-page #over-ons .about-owner-photo{display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.98),rgba(235,242,255,.9) 58%,rgba(238,230,255,.86))}
body.home-page #over-ons .about-owner-photo:before{position:absolute;width:74%;aspect-ratio:1;border-radius:28px;background:linear-gradient(145deg,rgba(40,100,255,.14),rgba(113,63,255,.12));filter:blur(18px);content:""}
body.home-page #over-ons .about-owner-photo:after{display:none}
body.home-page #over-ons .about-owner-photo img{position:relative;z-index:1;width:min(78%,285px);height:auto;min-height:0;aspect-ratio:1;object-fit:cover;object-position:center 29%;border:1px solid rgba(255,255,255,.9);border-radius:24px;background:#fff;box-shadow:0 18px 38px rgba(45,71,135,.16)}
@media(max-width:900px){body.home-page #over-ons .about-owner-photo{padding:20px}body.home-page #over-ons .about-owner-photo img{width:min(82%,230px);min-height:0}}
@media(max-width:600px){body.home-page #over-ons .about-values .about-owner-card{grid-template-rows:245px auto}body.home-page #over-ons .about-owner-photo{padding:18px}body.home-page #over-ons .about-owner-photo img{width:min(72%,210px);min-height:0;border-radius:20px}}

/* Strakke, rustige eigenaarspresentatie */
body.home-page #over-ons .about-values .about-owner-card{grid-template-rows:260px auto}
body.home-page #over-ons .about-owner-photo{display:block;padding:0;overflow:hidden;border-bottom:1px solid rgba(84,112,171,.14);background:#f5f7fb}
body.home-page #over-ons .about-owner-photo:before,body.home-page #over-ons .about-owner-photo:after{display:none;content:none}
body.home-page #over-ons .about-owner-photo img{display:block;width:100%;max-width:none;height:100%;min-height:0;aspect-ratio:auto;object-fit:cover;object-position:center 27%;border:0;border-radius:0;background:#fff;box-shadow:none;transform:none}
body.home-page #over-ons .about-owner-copy{padding:20px 22px 22px;background:#fff}
@media(hover:hover){body.home-page #over-ons .about-values .about-owner-card:hover .about-owner-photo img{transform:scale(1.018)}}
@media(max-width:900px){body.home-page #over-ons .about-values .about-owner-card{grid-template-columns:minmax(210px,.85fr) 1.15fr;grid-template-rows:1fr}body.home-page #over-ons .about-owner-photo{padding:0;border-right:1px solid rgba(84,112,171,.14);border-bottom:0}body.home-page #over-ons .about-owner-photo img{width:100%;height:100%;min-height:285px}}
@media(max-width:600px){body.home-page #over-ons .about-values .about-owner-card{grid-template-columns:1fr;grid-template-rows:245px auto}body.home-page #over-ons .about-owner-photo{padding:0;border-right:0;border-bottom:1px solid rgba(84,112,171,.14)}body.home-page #over-ons .about-owner-photo img{width:100%;height:245px;min-height:0;border-radius:0}}

/* Portret 30% kleiner en links uitgelijnd */
body.home-page #over-ons .about-values .about-owner-card{grid-template-rows:182px auto}
body.home-page #over-ons .about-owner-photo{display:flex;height:182px;align-items:stretch;justify-content:flex-start;background:linear-gradient(110deg,#f5f7fb 0,#f5f7fb 70%,#fff 70%)}
body.home-page #over-ons .about-owner-photo img{width:70%;height:100%;object-fit:cover;object-position:center 25%}
@media(max-width:900px){body.home-page #over-ons .about-values .about-owner-card{grid-template-columns:minmax(150px,.7fr) 1.3fr;grid-template-rows:1fr}body.home-page #over-ons .about-owner-photo{width:100%;height:100%;min-height:230px;background:#f5f7fb}body.home-page #over-ons .about-owner-photo img{width:70%;height:100%;min-height:230px}}
@media(max-width:600px){body.home-page #over-ons .about-values .about-owner-card{grid-template-columns:1fr;grid-template-rows:172px auto}body.home-page #over-ons .about-owner-photo{height:172px;min-height:0;background:linear-gradient(110deg,#f5f7fb 0,#f5f7fb 70%,#fff 70%)}body.home-page #over-ons .about-owner-photo img{width:70%;height:172px;min-height:0}}

/* Beelden blijven zichtbaar wanneer een scrollanimatie vertraagd of geblokkeerd wordt. */
body.home-page .hero-visual.reveal,
body.home-page .home-build-hosting.reveal,
body.home-page .concept-showcase.reveal {
  opacity: 1;
  transform: none;
}

body.home-page .hero-visual img,
body.home-page .home-build-hosting-visual img,
body.home-page .concept-showcase-visual {
  opacity: 1;
  visibility: visible;
}

/* Portret met rustige witruimte en een subtiele Webschets-gradient. */
body.home-page #over-ons .about-owner-photo {
  box-sizing: border-box;
  align-items: flex-end;
  padding: 14px 0 0 14px;
  background: linear-gradient(135deg, #f8faff 0%, #edf3ff 54%, #f2ebff 100%);
}

body.home-page #over-ons .about-owner-photo img {
  width: 62%;
  height: calc(100% - 6px);
  object-fit: cover;
  object-position: center top;
  background: #fff;
}

/* Groter transparant portret zonder achtergrondgradient */
body.home-page #over-ons .about-values .about-owner-card {
  grid-template-rows: 230px auto;
}

body.home-page #over-ons .about-owner-photo {
  height: 230px;
  padding: 6px 8px 0;
  background: #fff;
}

/* Groter en realistischer portret; tekst blijft leesbaar bij hover */
body.home-page #over-ons .about-values .about-owner-card {
  grid-template-rows: 270px auto;
}

body.home-page #over-ons .about-owner-photo {
  height: 270px;
}

body.home-page #over-ons .about-owner-card:hover .about-owner-copy,
body.home-page #over-ons .about-owner-card:focus-within .about-owner-copy {
  background: radial-gradient(circle at 88% 12%, rgba(113, 55, 255, .18), transparent 56%), linear-gradient(135deg, rgba(255,255,255,.98), rgba(235,241,255,.96) 55%, rgba(243,233,255,.96)) !important;
}

body.home-page #over-ons .about-owner-card:hover .about-owner-role,
body.home-page #over-ons .about-owner-card:focus-within .about-owner-role {
  color: #2864ff !important;
}

body.home-page #over-ons .about-values .about-owner-card:hover h3,
body.home-page #over-ons .about-values .about-owner-card:focus-within h3 {
  color: #2864ff !important;
}

body.home-page #over-ons .about-values .about-owner-card:hover p,
body.home-page #over-ons .about-values .about-owner-card:focus-within p {
  color: #6d7f98 !important;
}

@media(max-width:900px) {
  body.home-page #over-ons .about-values .about-owner-card {
    grid-template-rows: 250px auto;
  }
  body.home-page #over-ons .about-owner-photo {
    height: 250px;
  }
}

@media(max-width:600px) {
  body.home-page #over-ons .about-values .about-owner-card {
    grid-template-rows: 225px auto;
  }
  body.home-page #over-ons .about-owner-photo {
    height: 225px;
  }
}

/* Tekst in de eigenaarskaart blijft altijd Webschets-blauw */
body.home-page #over-ons .about-values .about-owner-card .about-owner-copy,
body.home-page #over-ons .about-values .about-owner-card .about-owner-copy *,
body.home-page #over-ons .about-values .about-owner-card:hover .about-owner-copy,
body.home-page #over-ons .about-values .about-owner-card:hover .about-owner-copy *,
body.home-page #over-ons .about-values .about-owner-card:focus-within .about-owner-copy,
body.home-page #over-ons .about-values .about-owner-card:focus-within .about-owner-copy * {
  color: #2864ff !important;
  -webkit-text-fill-color: #2864ff !important;
}

body.home-page #over-ons .about-owner-photo img {
  width: auto;
  max-width: 96%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

@media(max-width:900px) {
  body.home-page #over-ons .about-values .about-owner-card {
    grid-template-rows: 220px auto;
  }
  body.home-page #over-ons .about-owner-photo {
    height: 220px;
    min-height: 0;
  }
}

@media(max-width:600px) {
  body.home-page #over-ons .about-values .about-owner-card {
    grid-template-rows: 205px auto;
  }
  body.home-page #over-ons .about-owner-photo {
    height: 205px;
  }
}

@media(max-width:900px) {
  body.home-page #over-ons .about-owner-photo {
    padding: 16px 0 0 16px;
    background: linear-gradient(135deg, #f8faff 0%, #edf3ff 54%, #f2ebff 100%);
  }
  body.home-page #over-ons .about-owner-photo img {
    width: 64%;
    min-height: 0;
  }
}

@media(max-width:600px) {
  body.home-page #over-ons .about-owner-photo {
    padding: 12px 0 0 12px;
  }
  body.home-page #over-ons .about-owner-photo img {
    width: 64%;
    height: calc(100% - 4px);
  }
}

/* Eigenaarskaart zonder portret */
body.home-page #over-ons .about-values .about-owner-card {
  display: grid;
  min-height: 315px;
  height: 100%;
  grid-template-rows: 182px auto;
}

body.home-page #over-ons .about-values .about-owner-copy {
  width: 100%;
  padding: clamp(28px, 3vw, 40px);
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,244,255,.95) 58%, rgba(245,238,255,.94));
}

@media(max-width:900px) {
  body.home-page #over-ons .about-values .about-owner-card {
    grid-template-columns: 1fr;
    grid-template-rows: 182px auto;
  }
}

@media(max-width:600px) {
  body.home-page #over-ons .about-values .about-owner-card {
    grid-template-rows: 172px auto;
  }
}

/* Hoogwaardig transparant WebP-portret in het bestaande gradientvlak */
body.home-page #over-ons .about-owner-photo {
  align-items: flex-end;
  justify-content: center;
  padding: 12px 12px 0;
}

body.home-page #over-ons .about-owner-photo img {
  width: auto;
  max-width: 82%;
  height: calc(100% - 2px);
  min-height: 0;
  object-fit: contain;
  object-position: center bottom;
  background: transparent;
}


body.home-page #over-ons .about-main:hover h3 span, body.home-page #over-ons .about-main:focus-within h3 span {
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}

body.home-page #over-ons .about-mark > span {
  font-weight: 800 !important;
}

body.home-page #werk .concept-showcase-card {
  padding-bottom: 10px !important;
}

body.home-page #werk .concept-showcase-meta {
  align-items: center !important;
  height: 38px !important;
  min-height: 38px !important;
  padding-top: 0 !important;
  display: flex !important;
}

html body.home-page main#top > section {
  box-shadow: none !important;
  background-color: #0000 !important;
  background-image: none !important;
  border-top-color: #0000 !important;
  border-bottom-color: #0000 !important;
}

html body.home-page main#top > section.about-webschets:before, html body.home-page main#top > section.about-webschets.about-webschets, html body.home-page main#top > section.cta.cta {
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
}

html body.home-page main#top > section.website-scan {
  margin-bottom: 0 !important;
}

html body.home-page footer.ws-footer {
  margin-top: 0 !important;
}

html body.home-page main#top > section.cta.cta {
  backdrop-filter: blur(22px) saturate(125%) !important;
  background: radial-gradient(circle at 50% 115%, #8467ff29, #0000 46%), linear-gradient(145deg, #ffffff85, #e5edff61 52%, #efe6ff6b) !important;
  border: 1px solid #ffffffb8 !important;
  box-shadow: 0 24px 60px #34468e17, inset 0 1px #ffffffd1 !important;
}

/* Definitieve eigenaarspresentatie */
body.home-page #over-ons .about-values .about-owner-card {
  grid-template-columns: 1fr;
  grid-template-rows: 270px auto;
}

body.home-page #over-ons .about-owner-photo {
  height: 270px;
  min-height: 0;
  padding: 4px 6px 0;
  background: #fff;
}

body.home-page #over-ons .about-owner-photo img {
  width: auto;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center bottom;
  background: transparent;
}

body.home-page #over-ons .about-owner-card:hover .about-owner-copy,
body.home-page #over-ons .about-owner-card:focus-within .about-owner-copy {
  background: #fff !important;
}

body.home-page #over-ons .about-owner-card:hover .about-owner-role,
body.home-page #over-ons .about-owner-card:focus-within .about-owner-role,
body.home-page #over-ons .about-values .about-owner-card:hover h3,
body.home-page #over-ons .about-values .about-owner-card:focus-within h3 {
  color: #2864ff !important;
}

body.home-page #over-ons .about-values .about-owner-card:hover p,
body.home-page #over-ons .about-values .about-owner-card:focus-within p {
  color: #6d7f98 !important;
}

@media(max-width:900px) {
  body.home-page #over-ons .about-values .about-owner-card {
    grid-template-rows: 250px auto;
  }
  body.home-page #over-ons .about-owner-photo {
    height: 250px;
    padding: 4px 6px 0;
    background: #fff;
  }
  body.home-page #over-ons .about-owner-photo img {
    width: auto;
    height: 100%;
  }
}

/* Definitief: alle eigenaarskaarttekst blijft blauw in iedere staat */
html body.home-page #over-ons .about-values .about-owner-card .about-owner-copy,
html body.home-page #over-ons .about-values .about-owner-card .about-owner-copy *,
html body.home-page #over-ons .about-values .about-owner-card:hover .about-owner-copy,
html body.home-page #over-ons .about-values .about-owner-card:hover .about-owner-copy *,
html body.home-page #over-ons .about-values .about-owner-card:focus-within .about-owner-copy,
html body.home-page #over-ons .about-values .about-owner-card:focus-within .about-owner-copy * {
  color: #2864ff !important;
  -webkit-text-fill-color: #2864ff !important;
}

/* De beschrijving blijft grijs; functietitel en naam blijven blauw */
html body.home-page #over-ons .about-values .about-owner-card .about-owner-copy p,
html body.home-page #over-ons .about-values .about-owner-card:hover .about-owner-copy p,
html body.home-page #over-ons .about-values .about-owner-card:focus-within .about-owner-copy p {
  color: #6d7f98 !important;
  -webkit-text-fill-color: #6d7f98 !important;
}

/* Blauw-paarse Webschets-gradient achter het transparante portret */
html body.home-page #over-ons .about-values .about-owner-card .about-owner-photo {
  background: linear-gradient(135deg, #2864ff 0%, #4857ff 48%, #7137ff 100%) !important;
}

/* Subtiel merkdetail in het portretvlak */
html body.home-page #over-ons .about-values .about-owner-card .about-owner-photo::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block !important;
  width: auto;
  aspect-ratio: auto;
  border-radius: 0;
  content: "" !important;
  background: rgba(255, 255, 255, .30);
  filter: none;
  -webkit-mask-image: url("../assets/webschets-logo.svg"), url("../assets/webschets-logo.svg"), url("../assets/webschets-logo.svg"), url("../assets/webschets-logo.svg"), url("../assets/webschets-logo.svg"), url("../assets/webschets-logo.svg"), url("../assets/webschets-logo.svg");
  mask-image: url("../assets/webschets-logo.svg"), url("../assets/webschets-logo.svg"), url("../assets/webschets-logo.svg"), url("../assets/webschets-logo.svg"), url("../assets/webschets-logo.svg"), url("../assets/webschets-logo.svg"), url("../assets/webschets-logo.svg");
  -webkit-mask-size: 138px auto, 96px auto, 112px auto, 82px auto, 174px auto, 116px auto, 94px auto;
  mask-size: 138px auto, 96px auto, 112px auto, 82px auto, 174px auto, 116px auto, 94px auto;
  -webkit-mask-position: 8px 32px, 282px 22px, 164px 82px, 18px 132px, 68px 202px, 306px 170px, 228px 232px;
  mask-position: 8px 32px, 282px 22px, 164px 82px, 18px 132px, 68px 202px, 306px 170px, 228px 232px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: rotate(-7deg);
  transform-origin: center;
  pointer-events: none;
}

html body.home-page #over-ons .about-values .about-owner-card .about-owner-photo img {
  position: relative;
  z-index: 1;
}

html body.home-page #over-ons .about-values .about-owner-card:hover .about-owner-photo::before,
html body.home-page #over-ons .about-values .about-owner-card:focus-within .about-owner-photo::before {
  background: linear-gradient(135deg, rgba(40, 100, 255, .24), rgba(113, 55, 255, .24));
}

/* Typografie eigenaarskaart */
html body.home-page #over-ons .about-values .about-owner-card .about-owner-role {
  font-size: 11px !important;
}

html body.home-page #over-ons .about-values .about-owner-card h3 {
  font-weight: 600 !important;
}

html body.home-page #over-ons .about-values .about-owner-card .about-owner-photo {
  transition: background .3s ease !important;
}

html body.home-page #over-ons .about-values .about-owner-card:hover .about-owner-photo,
html body.home-page #over-ons .about-values .about-owner-card:focus-within .about-owner-photo {
  background: #fff !important;
}

@media(max-width:600px) {
  body.home-page #over-ons .about-values .about-owner-card {
    grid-template-rows: 225px auto;
  }
  body.home-page #over-ons .about-owner-photo {
    height: 225px;
    padding: 4px 6px 0;
  }
  body.home-page #over-ons .about-owner-photo img {
    width: auto;
    height: 100%;
  }
  html body.home-page #over-ons .about-values .about-owner-card .about-owner-photo::before {
    inset: -24px -20px;
    -webkit-mask-size: 108px auto, 78px auto, 88px auto, 66px auto, 136px auto, 90px auto, 74px auto;
    mask-size: 108px auto, 78px auto, 88px auto, 66px auto, 136px auto, 90px auto, 74px auto;
    -webkit-mask-position: 4px 28px, 210px 18px, 120px 68px, 8px 108px, 46px 166px, 230px 142px, 168px 190px;
    mask-position: 4px 28px, 210px 18px, 120px 68px, 8px 108px, 46px 166px, 230px 142px, 168px 190px;
  }
}