/* [project]/src/themes/datasculpt-bv/theme.scss.css [app-client] (css) */
:root {
  --blue: #2c86c7;
  --blue-bright: #3d9fe3;
  --blue-dark: #17679f;
  --ink: #111416;
  --muted: #667078;
  --line: #dfe5e8;
  --pale: #f3f7f9;
  --white: #fff;
  --shadow: 0 24px 70px #18334621;
  --radius: 26px;
  --container: 1240px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font-family: Inter, Avenir Next, Avenir, Segoe UI, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

body.menu-open {
  overflow: hidden;
}

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

button, input {
  font: inherit;
}

button {
  color: inherit;
}

img, svg {
  max-width: 100%;
  display: block;
}

.container {
  width: min(100% - 48px,var(--container));
  margin-inline: auto;
}

.skip-link {
  z-index: 999;
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  padding: 10px 16px;
  position: fixed;
  top: 8px;
  left: 8px;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: none;
}

.eyebrow {
  color: var(--blue);
  letter-spacing: .18em;
  text-transform: uppercase;
  align-items: center;
  gap: 17px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.eyebrow:before {
  content: "";
  background: currentColor;
  flex: none;
  width: 5px;
  height: 5px;
  margin: -7px 8px 0 0;
  box-shadow: 7px 7px, 14px 7px, 14px 14px;
}

.hero .eyebrow:before {
  display: none;
}

.eyebrow--light {
  color: #8acdf8;
}

.eyebrow-mark {
  width: 9px;
  height: 9px;
  position: relative;
}

.eyebrow-mark:before, .eyebrow-mark:after {
  content: "";
  background: var(--blue);
  width: 4px;
  height: 4px;
  box-shadow: 5px 5px 0 var(--blue);
  position: absolute;
}

.eyebrow-mark:after {
  box-shadow: none;
  opacity: .45;
  left: 5px;
}

h1, h2, h3, p {
  margin-top: 0;
}

h1, h2, h3 {
  letter-spacing: -.04em;
  line-height: 1.07;
}

h1 {
  margin-bottom: 28px;
  font-size: clamp(47px, 5.15vw, 78px);
  font-weight: 650;
}

h2 {
  margin: 14px 0 0;
  font-size: clamp(38px, 4.15vw, 62px);
  font-weight: 620;
}

h1 em, h2 em {
  color: var(--blue);
  font-style: normal;
  font-weight: inherit;
}

.section {
  padding: 128px 0;
}

.section-heading {
  grid-template-columns: 1.25fr .75fr;
  align-items: end;
  gap: 80px;
  margin-bottom: 66px;
  display: grid;
  position: relative;
}

.section-heading:after {
  content: "";
  background: var(--ink);
  width: 7px;
  height: 7px;
  box-shadow: -9px 9px 0 #11141629,-18px 18px 0 var(--blue),-9px 27px 0 #11141614;
  opacity: .72;
  position: absolute;
  top: 0;
  right: 0;
}

.section-heading > p {
  max-width: 480px;
  color: var(--muted);
  margin: 0 0 4px auto;
  font-size: 18px;
}

.section-heading--center {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  display: flex;
}

.section-heading--center p {
  margin: 0;
}

.button-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 13px;
  display: flex;
}

.button {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 18px;
  min-height: 54px;
  padding: 0 23px;
  font-size: 14px;
  font-weight: 720;
  transition: transform .25s, box-shadow .25s, background .25s;
  display: inline-flex;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px #1114162e;
}

.button span {
  font-size: inherit;
}

.button > span + span {
  font-size: 17px;
}

.button--small {
  min-height: 43px;
  padding: 0 17px;
  font-size: 13px;
}

.button--ghost {
  color: var(--ink);
  background: none;
  border-color: #ccd4d8;
}

.button--ghost:hover {
  background: #fff;
}

.button--white {
  color: var(--ink);
  background: #fff;
  border-color: #fff;
}

.button--dark-ghost {
  background: #07131d4d;
  border-color: #ffffff45;
}

.play {
  border: 1px solid #fff6;
  border-radius: 50%;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 8px;
  font-style: normal;
  display: inline-grid;
}

.site-header {
  z-index: 100;
  height: 82px;
  transition: background .3s, box-shadow .3s, height .3s;
  position: fixed;
  inset: 0 0 auto;
}

.site-header.scrolled {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #ffffffe6;
  height: 70px;
  box-shadow: 0 1px #1428321a;
}

.nav-wrap {
  align-items: center;
  height: 100%;
  display: flex;
}

.brand {
  align-items: center;
  width: 208px;
  display: flex;
}

.brand img {
  width: 100%;
  height: auto;
}

.desktop-nav {
  align-items: center;
  gap: 32px;
  height: 100%;
  margin: 0 auto;
  display: flex;
}

.nav-link {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 650;
  position: relative;
}

.nav-link:after {
  content: "";
  background: var(--blue);
  height: 1px;
  transition: right .25s;
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 100%;
}

.nav-link:hover:after {
  right: 0;
}

.nav-link--dropdown {
  align-items: center;
  gap: 6px;
  display: flex;
}

.nav-link--dropdown .nav-dropdown-arrow {
  color: var(--blue);
  font-size: 15px;
  transition: transform .25s;
}

.nav-dropdown:hover .nav-dropdown-arrow, .nav-link--dropdown[aria-expanded="true"] .nav-dropdown-arrow {
  transform: rotate(180deg);
}

.mega-menu {
  opacity: 0;
  visibility: hidden;
  background: #fffffffa;
  border: 1px solid #e3e9eb;
  border-radius: 18px;
  grid-template-columns: .75fr 1.6fr;
  gap: 28px;
  width: min(920px, 100vw - 48px);
  padding: 28px;
  transition: all .22s;
  display: grid;
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  transform: translate(-50%, -8px);
  box-shadow: 0 24px 70px #102b3d2e;
}

.nav-dropdown:hover .mega-menu, .nav-dropdown:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%);
}

.mega-intro {
  background: var(--pale);
  border-radius: 13px;
  padding: 21px;
}

.mega-intro h2 {
  margin: 13px 0;
  font-size: 27px;
}

.mega-intro p {
  color: var(--muted);
  font-size: 14px;
}

.text-link, .card-link {
  align-items: center;
  gap: 15px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
}

.text-link span, .card-link span {
  transition: transform .25s;
}

.text-link:hover span, .card-link:hover span {
  transform: translate(3px, -3px);
}

.mega-products {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  display: grid;
}

.mega-product {
  border-radius: 10px;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  transition: background .2s;
  display: grid;
}

.mega-product:hover {
  background: #f3f7f9;
}

.mega-product strong, .mega-product small {
  display: block;
}

.mega-product strong {
  font-size: 13px;
}

.mega-product small {
  color: var(--muted);
  font-size: 10px;
}

.mega-product b {
  color: var(--blue);
  font-weight: 500;
}

.product-dot {
  background: #eaf4fa;
  border-radius: 8px;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.product-dot:after {
  content: "";
  border: 2px solid var(--blue);
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
}

.narrow-dot:after {
  border-color: #7b61d1;
  border-radius: 50%;
}

.catalog-dot {
  background: #e7f7ef;
}

.catalog-dot:after {
  border-color: #15905d;
}

.bokyding-dot {
  background: #fff2e9;
}

.bokyding-dot:after {
  border-color: #e47731;
}

.party-dot {
  background: #fff0f4;
}

.party-dot:after {
  border-color: #d84e79;
}

.ticket-dot {
  background: #eef0f5;
}

.ticket-dot:after {
  border-color: #2f3a52;
}

.menu-toggle {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  width: 42px;
  height: 42px;
  padding: 0;
  display: none;
}

.menu-toggle span {
  background: var(--ink);
  width: 18px;
  height: 1px;
  margin: 5px auto;
  transition: all .25s;
  display: block;
}

.mobile-menu {
  display: none;
}

.hero {
  background: linear-gradient(#fbfdfe 0%, #fff 88%);
  min-height: 900px;
  padding: 180px 0 46px;
  position: relative;
  overflow: hidden;
}

.hero:before {
  content: "";
  z-index: 0;
  opacity: .075;
  background: url("/_next/static/media/data-blocks.0quly-e4-nz8k.svg") center / contain no-repeat;
  width: 235px;
  height: 382px;
  position: absolute;
  bottom: -42px;
  right: -76px;
}

.hero-grid {
  opacity: .35;
  background-image: linear-gradient(#2c86c714 1px, #0000 1px), linear-gradient(90deg, #2c86c714 1px, #0000 1px);
  background-size: 55px 55px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to right, #0000, #000 43% 80%, #0000), linear-gradient(#000, #0000 83%);
  mask-image: linear-gradient(to right, #0000, #000 43% 80%, #0000), linear-gradient(#000, #0000 83%);
}

.hero-glow {
  filter: blur(2px);
  pointer-events: none;
  border-radius: 50%;
  position: absolute;
}

.hero-glow--one {
  background: radial-gradient(circle, #2c86c72b, #2c86c700 68%);
  width: 750px;
  height: 750px;
  top: -80px;
  right: -210px;
}

.hero-glow--two {
  background: radial-gradient(circle, #5cb2e81f, #2c86c700 68%);
  width: 520px;
  height: 520px;
  top: 180px;
  left: -320px;
}

.hero-layout {
  z-index: 1;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 45px;
  display: grid;
  position: relative;
}

.hero-copy {
  padding-top: 15px;
}

.hero-copy h1 {
  max-width: 690px;
  margin-top: 20px;
}

.hero-intro {
  color: #59646b;
  max-width: 620px;
  margin-bottom: 35px;
  font-size: 19px;
  line-height: 1.7;
}

.hero-proof {
  border-top: 1px solid var(--line);
  align-items: center;
  gap: 16px;
  max-width: 500px;
  margin-top: 44px;
  padding-top: 28px;
  display: flex;
}

.hero-proof p {
  color: var(--muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.hero-proof strong {
  color: var(--ink);
  font-weight: 750;
}

.avatar-stack {
  display: flex;
}

.avatar-stack span {
  background: var(--ink);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-right: -8px;
  font-size: 9px;
  font-weight: 800;
  display: grid;
}

.avatar-stack span:nth-child(2) {
  background: var(--blue);
}

.avatar-stack span:nth-child(3) {
  color: var(--blue-dark);
  background: #d9e9f2;
}

.hero-visual {
  perspective: 1200px;
  min-height: 590px;
  position: relative;
}

.portfolio-board {
  z-index: 2;
  color: #fff;
  transform-origin: center;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
  background: #111a20;
  width: 630px;
  height: 548px;
  padding: 20px;
  transition: transform .25s ease-out;
  position: absolute;
  top: 13px;
  left: 8px;
  transform: rotateY(-2deg)rotateZ(-.5deg);
  box-shadow: 0 35px 80px #18303f33;
}

.portfolio-board:before {
  content: "";
  pointer-events: none;
  background-image: linear-gradient(#ffffff06 1px, #0000 1px), linear-gradient(90deg, #ffffff06 1px, #0000 1px);
  background-size: 24px 24px;
  position: absolute;
  inset: 0;
}

.board-header, .board-footer {
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}

.board-header {
  border-bottom: 1px solid #ffffff21;
  height: 43px;
  padding-bottom: 14px;
}

.board-brand {
  align-items: center;
  gap: 12px;
  display: flex;
}

.board-brand > span:last-child strong, .board-brand > span:last-child small {
  display: block;
}

.board-brand strong {
  letter-spacing: .18em;
  font-size: 9px;
}

.board-brand small {
  color: #69808d;
  letter-spacing: .2em;
  font-size: 6px;
}

.board-mark {
  width: 26px;
  height: 22px;
  position: relative;
}

.board-mark i {
  background: #fff;
  width: 5px;
  height: 5px;
  position: absolute;
}

.board-mark i:first-child {
  top: 0;
  left: 0;
}

.board-mark i:nth-child(2) {
  background: var(--blue-bright);
  top: 6px;
  left: 8px;
}

.board-mark i:nth-child(3) {
  top: 14px;
  left: 0;
}

.board-mark i:nth-child(4) {
  top: 14px;
  left: 18px;
}

.board-brand-logo {
  filter: brightness(0) invert();
  width: 128px;
  height: auto;
  display: block;
}

.board-status {
  color: #8ba0ab;
  letter-spacing: .16em;
  align-items: center;
  gap: 7px;
  font-size: 7px;
  font-weight: 700;
  display: flex;
}

.board-status i {
  background: #4fbd88;
  width: 5px;
  height: 5px;
  box-shadow: 0 0 0 4px #4fbd881a;
}

.portfolio-matrix {
  z-index: 1;
  grid-template-rows: 1fr .78fr .7fr;
  grid-template-columns: 1.18fr .82fr .82fr;
  gap: 7px;
  height: 425px;
  padding: 13px 0;
  display: grid;
  position: relative;
}

.software-module {
  min-width: 0;
  color: var(--ink);
  background: #f5f7f8;
  border: 1px solid #ffffff1a;
  padding: 14px;
  transition: transform .25s, filter .25s;
  position: relative;
  overflow: hidden;
}

.software-module:hover {
  z-index: 3;
  filter: brightness(1.025);
  transform: translateY(-3px);
}

.module-head {
  color: #87939a;
  letter-spacing: .13em;
  justify-content: space-between;
  align-items: center;
  font-size: 6px;
  display: flex;
}

.module-head span {
  color: currentColor;
  font-weight: 800;
}

.module-head small {
  font-size: 5px;
}

.module-beeber {
  background: #fbf4f8;
  grid-area: 1 / 1 / 3 / 3;
  padding: 22px;
}

.module-beeber:after {
  content: "";
  background: #e00072;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 52px;
  right: 18px;
  box-shadow: 9px 0 #111a20, 18px 9px #e0007233, 9px 18px #111a201f;
}

.module-name {
  align-items: center;
  margin: 25px 0 1px;
  display: flex;
}

.module-name img {
  width: 158px;
  height: auto;
}

.module-beeber > p {
  color: #725e69;
  font-size: 9px;
}

.process-route {
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  display: grid;
  position: absolute;
  bottom: 25px;
  left: 22px;
  right: 22px;
}

.process-route span {
  z-index: 2;
  color: #6f5d67;
  text-align: center;
  background: #fff;
  border: 1px solid #eadde4;
  padding: 10px 6px;
  font-size: 6px;
  position: relative;
}

.process-route span i {
  background: #e00072;
  width: 6px;
  height: 6px;
  margin: 0 auto 5px;
  display: block;
}

.process-route > b {
  color: #a1abb0;
  font-size: 8px;
}

.process-route > em {
  z-index: 3;
  background: #111a20;
  width: 5px;
  height: 5px;
  animation: 4.5s linear infinite dataTravel;
  position: absolute;
  top: 9px;
  left: 12%;
}

.module-narrow {
  color: #fff;
  background: #493c7d;
  grid-area: 1 / 3;
}

.module-narrow > strong {
  margin-top: 17px;
  font-size: 16px;
  line-height: .92;
  display: block;
}

.screen-sequence {
  align-items: end;
  gap: 4px;
  display: flex;
  position: absolute;
  bottom: 13px;
  left: 14px;
  right: 14px;
}

.screen-sequence i {
  background: linear-gradient(145deg, #f39a68, #bd4f8a);
  flex: 1;
  height: 29px;
}

.screen-sequence i:nth-child(2) {
  background: linear-gradient(145deg, #836bd2, #4f3b94);
  height: 42px;
}

.screen-sequence i:nth-child(3) {
  background: #af9be9;
  height: 22px;
}

.module-catalog {
  color: #125b43;
  background: #dff1e8;
  grid-area: 2 / 3;
}

.module-catalog > strong {
  margin-top: 12px;
  font-size: 13px;
  display: block;
}

.data-stack {
  margin-top: 11px;
}

.data-stack span {
  border-top: 1px solid #125b4321;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 5px;
  padding: 5px 0;
  display: grid;
}

.data-stack i {
  background: #16805d;
  width: 7px;
  height: 7px;
}

.data-stack b {
  background: #125b4330;
  height: 3px;
}

.data-stack em {
  font-size: 5px;
  font-style: normal;
}

.module-bokyding {
  color: #a44e19;
  background: #f8e9dc;
  grid-area: 3 / 1;
}

.module-bokyding > strong, .module-party > strong, .module-ticket > strong {
  margin-top: 9px;
  font-size: 13px;
  display: block;
}

.rental-slots {
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  margin-top: 15px;
  display: grid;
}

.rental-slots i {
  background: #fff;
  border: 1px solid #e7c9b3;
  height: 13px;
}

.rental-slots i:nth-child(3), .rental-slots i:nth-child(4), .rental-slots i:nth-child(7) {
  background: #e67833;
  border-color: #e67833;
}

.module-party {
  color: #fff;
  background: #47233c;
  grid-area: 3 / 2;
}

.module-party > strong span {
  color: #ef6ba2;
}

.photo-sequence {
  grid-template-columns: repeat(2, 16px);
  gap: 3px;
  display: grid;
  position: absolute;
  bottom: 11px;
  right: 12px;
}

.photo-sequence i {
  background: #d76294;
  height: 16px;
}

.photo-sequence i:nth-child(2) {
  background: #754a81;
}

.photo-sequence i:nth-child(3) {
  background: #eaa061;
  grid-column: 2;
}

.module-ticket {
  color: #27344f;
  background: #e4e8f0;
  grid-area: 3 / 3;
}

.ticket-stripes {
  align-items: stretch;
  gap: 3px;
  height: 22px;
  margin-top: 13px;
  display: flex;
}

.ticket-stripes i {
  background: #27344f;
  width: 4px;
}

.ticket-stripes i:nth-child(2), .ticket-stripes i:nth-child(5) {
  height: 60%;
}

.ticket-stripes i:nth-child(3) {
  width: 8px;
}

.board-footer {
  color: #607582;
  letter-spacing: .15em;
  border-top: 1px solid #ffffff21;
  height: 39px;
  font-size: 5px;
  font-weight: 700;
}

.board-footer div {
  align-items: center;
  gap: 10px;
  display: flex;
}

.board-footer div i {
  background: #2f4653;
  width: 4px;
  height: 4px;
}

.board-footer div i:nth-child(2), .board-footer div i:nth-child(4) {
  background: var(--blue);
}

.portfolio-pixels {
  z-index: 1;
  width: 160px;
  height: 180px;
  position: absolute;
  bottom: -2px;
  right: -3px;
}

.portfolio-pixels i {
  background: #111a20;
  width: 28px;
  height: 28px;
  position: absolute;
}

.portfolio-pixels i:first-child {
  top: 0;
  right: 0;
}

.portfolio-pixels i:nth-child(2) {
  background: var(--blue);
  top: 34px;
  right: 34px;
}

.portfolio-pixels i:nth-child(3) {
  top: 68px;
  right: 68px;
}

.portfolio-pixels i:nth-child(4) {
  opacity: .3;
  top: 102px;
  right: 34px;
}

.portfolio-pixels i:nth-child(5) {
  background: #2c86c74d;
  top: 136px;
  right: 102px;
}

@keyframes dataTravel {
  from {
    left: 12%;
  }

  to {
    left: 84%;
  }
}

.hero-bottom {
  z-index: 1;
  color: #8a959c;
  letter-spacing: .17em;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin-top: 75px;
  font-size: 8px;
  font-weight: 750;
  display: grid;
  position: relative;
}

.hero-bottom div {
  background: #dce3e6;
  height: 1px;
}

.hero-bottom p {
  letter-spacing: .06em;
  margin: 0;
}

@keyframes drift {
  50% {
    transform: translateY(-9px);
  }
}

.products-section {
  background: #f4f7f8;
  position: relative;
  overflow: hidden;
}

.products-section:before {
  content: "";
  opacity: .055;
  background: url("/_next/static/media/data-blocks.0quly-e4-nz8k.svg") center / contain no-repeat;
  width: 215px;
  height: 350px;
  position: absolute;
  top: 410px;
  left: -120px;
  transform: scaleX(-1);
}

.product-grid {
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
  display: grid;
}

.product-card {
  border-radius: var(--radius);
  isolation: isolate;
  background: #fff;
  border: 1px solid #e0e6e9;
  grid-column: span 5;
  min-height: 550px;
  padding: 46px;
  transition: transform .35s, box-shadow .35s;
  position: relative;
  overflow: hidden;
}

.product-card .product-copy:after {
  content: "";
  opacity: .18;
  background: currentColor;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 4px;
  right: 2px;
  box-shadow: 7px 0, 14px 7px, 7px 14px;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 65px #1b3e531f;
}

.product-card--large, .product-card--wide {
  grid-column: span 7;
}

.product-card:after {
  content: "";
  z-index: -1;
  background: radial-gradient(circle, #2c86c71c, #0000 68%);
  border-radius: 50%;
  width: 420px;
  height: 420px;
  position: absolute;
  bottom: -250px;
  right: -210px;
}

.product-copy {
  z-index: 3;
  max-width: 460px;
  position: relative;
}

.product-category {
  color: var(--blue-dark);
  letter-spacing: .12em;
  text-transform: uppercase;
  background: #fff9;
  border: 1px solid #2c86c733;
  border-radius: 4px;
  margin-bottom: 24px;
  padding: 6px 9px;
  font-size: 8px;
  font-weight: 800;
  display: inline-block;
}

.product-wordmark {
  letter-spacing: -.04em;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  font-size: 26px;
  font-weight: 750;
  display: flex;
}

.product-wordmark > span:first-child:not(.bee-icon) {
  color: #fff;
  background: currentColor;
  border-radius: 8px;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 16px;
  display: grid;
}

.product-wordmark > span:first-child:not(.bee-icon):first-letter {
  color: #fff;
}

.bee-icon {
  color: #fff;
  background: #1674ae;
  border-radius: 8px;
  place-items: center;
  width: 31px;
  height: 31px;
  font-size: 16px;
  display: grid;
}

.product-card h3 {
  max-width: 400px;
  margin: 0 0 15px;
  font-size: 31px;
}

.product-card p {
  max-width: 440px;
  color: var(--muted);
  margin-bottom: 26px;
  font-size: 14px;
}

.product-ui {
  z-index: 2;
  position: absolute;
  overflow: hidden;
  box-shadow: 0 20px 55px #1f445b2e;
}

.product-card--beeber {
  background: linear-gradient(145deg, #fff 45%, #e9f5fb);
}

.beeber-ui {
  background: #fff;
  border: 1px solid #d8e1e6;
  border-radius: 13px 13px 0 0;
  width: 560px;
  height: 276px;
  bottom: -22px;
  right: -34px;
  transform: rotate(-2deg);
}

.ui-top {
  border-bottom: 1px solid #e7ecee;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  display: flex;
}

.ui-top i {
  background: #d7dfe3;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.ui-top i:first-child {
  background: var(--blue);
}

.ui-top span {
  color: #a0a8ad;
  margin-left: auto;
  font-size: 7px;
}

.beeber-panel {
  grid-template-columns: 42px 1fr;
  height: 244px;
  display: grid;
}

.panel-side {
  background: #172027;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
  display: flex;
}

.panel-side b {
  background: var(--blue);
  color: #fff;
  border-radius: 5px;
  place-items: center;
  width: 23px;
  height: 23px;
  font-size: 9px;
  display: grid;
}

.panel-side i {
  border: 1px solid #657078;
  border-radius: 2px;
  width: 11px;
  height: 11px;
}

.panel-main {
  background: #f5f7f8;
  padding: 23px;
}

.panel-main > small {
  letter-spacing: .16em;
  color: #8c979c;
  font-size: 6px;
}

.panel-main h4 {
  margin: 3px 0 15px;
  font-size: 14px;
}

.mini-stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  display: grid;
}

.mini-stats span {
  background: #fff;
  border: 1px solid #e4e9eb;
  border-radius: 5px;
  padding: 10px;
}

.mini-stats b, .mini-stats i {
  display: block;
}

.mini-stats b {
  font-size: 14px;
}

.mini-stats i {
  color: #8b969c;
  font-size: 6px;
  font-style: normal;
}

.mini-list {
  background: #fff;
  border: 1px solid #e4e9eb;
  border-radius: 5px;
  margin-top: 8px;
  padding: 8px 11px;
}

.mini-list i {
  background: linear-gradient(90deg, #d9e1e5 22%, #0000 22% 30%, #edf0f2 30%);
  border-radius: 2px;
  height: 7px;
  margin: 7px 0;
  display: block;
}

.product-card--narrow:before {
  content: "";
  background: linear-gradient(120deg, #0000 50%, #ffffff14);
  position: absolute;
  inset: 0;
}

.narrow-wordmark > span:first-child {
  color: #34245f !important;
  background: #b5a2ff !important;
}

.signage-mock {
  z-index: 1;
  width: 255px;
  position: absolute;
  bottom: -10px;
  right: 36px;
  transform: perspective(700px)rotateY(-8deg);
}

.signage-screen {
  background: linear-gradient(135deg, #ff995f, #d94e84 48%, #5847b6);
  border: 7px solid #181621;
  border-radius: 7px;
  height: 260px;
  padding: 44px 26px;
  position: relative;
  box-shadow: 0 22px 40px #110b2a73;
}

.signage-screen:after {
  content: "";
  border: 1px solid #ffffff40;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  position: absolute;
  top: 15px;
  right: -30px;
}

.screen-pill {
  letter-spacing: .1em;
  background: #fff3;
  border-radius: 9px;
  padding: 3px 7px;
  font-size: 6px;
  position: absolute;
  top: 14px;
  left: 16px;
}

.signage-screen strong {
  font-size: 29px;
  line-height: .98;
}

.signage-screen strong em {
  color: #ffd0b7;
  font-style: normal;
}

.signage-screen small {
  position: absolute;
  bottom: 17px;
  left: 26px;
}

.signage-base {
  clip-path: polygon(35% 0, 65% 0, 73% 72%, 100% 82%, 100% 100%, 0 100%, 0 82%, 27% 72%);
  background: linear-gradient(90deg, #17141e, #4a4558, #17141e);
  width: 75px;
  height: 27px;
  margin: auto;
}

.catalog-wordmark {
  color: #147353;
}

.catalog-wordmark > span:first-child {
  background: #147353 !important;
}

.catalog-ui {
  background: #ffffffeb;
  border: 1px solid #cfe3d9;
  border-radius: 12px 12px 0 0;
  height: 238px;
  padding: 18px;
  position: absolute;
  bottom: 0;
  left: 38px;
  right: 38px;
  box-shadow: 0 18px 45px #1e5a4121;
}

.catalog-bar {
  align-items: center;
  padding-bottom: 12px;
  display: flex;
}

.catalog-bar i {
  background: #167455;
  border-radius: 5px;
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.catalog-bar span {
  font-size: 10px;
  font-weight: 700;
}

.catalog-bar b {
  color: #fff;
  background: #167455;
  border-radius: 4px;
  margin-left: auto;
  padding: 6px 9px;
  font-size: 6px;
}

.catalog-row {
  border-top: 1px solid #e7eeea;
  grid-template-columns: 32px 1.5fr .7fr .8fr;
  align-items: center;
  gap: 8px;
  height: 47px;
  font-size: 7px;
  display: grid;
}

.catalog-row.header {
  color: #8b9992;
  letter-spacing: .1em;
  height: 25px;
  font-size: 5px;
}

.catalog-row > span b, .catalog-row > span small {
  display: block;
}

.catalog-row > span small {
  color: #8a9690;
  font-size: 5px;
}

.catalog-row em {
  color: #227b59;
  background: #e6f6ee;
  border-radius: 6px;
  width: max-content;
  padding: 3px 6px;
  font-size: 5px;
  font-style: normal;
}

.pic {
  border-radius: 4px;
  width: 25px;
  height: 25px;
}

.pic.mint {
  background: linear-gradient(135deg, #b5e2cc, #e4f4ec);
}

.pic.blue {
  background: linear-gradient(135deg, #93c9e7, #e3f1f9);
}

.pic.sand {
  background: linear-gradient(135deg, #dec295, #f3eadc);
}

progress {
  accent-color: #1b9568;
  width: 100%;
  height: 4px;
}

.bokyding-wordmark {
  color: #d66927;
}

.bokyding-wordmark > span:first-child {
  background: #e67833 !important;
}

.calendar-ui {
  background: #ffffffeb;
  border: 1px solid #ecdccd;
  border-radius: 13px 13px 0 0;
  width: 400px;
  padding: 25px;
  position: absolute;
  bottom: -1px;
  right: 35px;
  box-shadow: 0 20px 50px #6b432226;
}

.cal-head {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.cal-head span b, .cal-head span small {
  display: block;
}

.cal-head span b {
  font-size: 13px;
}

.cal-head span small {
  color: #8e8b88;
  font-size: 7px;
}

.cal-head button {
  background: #fff;
  border: 1px solid #e5ddd7;
  border-radius: 4px;
  padding: 5px 9px;
  font-size: 6px;
}

.week {
  text-align: center;
  color: #928e8a;
  grid-template-columns: repeat(5, 1fr);
  margin: 19px 0 15px;
  font-size: 6px;
  display: grid;
}

.week b {
  color: #39332f;
  border-radius: 5px;
  place-items: center;
  width: 23px;
  height: 23px;
  margin-top: 4px;
  font-size: 8px;
  display: inline-grid;
}

.week .today b {
  color: #fff;
  background: #e67833;
}

.booking {
  border: 1px solid #eee5df;
  border-radius: 6px;
  grid-template-columns: 5px 1fr auto;
  align-items: center;
  gap: 9px;
  height: 44px;
  margin-top: 7px;
  padding: 7px;
  display: grid;
}

.booking > i {
  background: #e67833;
  border-radius: 3px;
  height: 100%;
}

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

.booking span b {
  font-size: 7px;
}

.booking span small {
  color: #9b9692;
  font-size: 5px;
}

.booking em {
  color: #36815d;
  background: #e9f6ef;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 5px;
  font-style: normal;
}

.booking--two > i {
  background: #4d87b1;
}

.booking--two em {
  color: #55778d;
  background: #edf1f5;
}

.party-wordmark span {
  color: #ff74aa;
}

.phone-ui {
  background: #f7edf4;
  border: 6px solid #17131b;
  border-radius: 27px;
  width: 190px;
  height: 330px;
  padding: 30px 12px 12px;
  position: absolute;
  bottom: -35px;
  right: 43px;
  transform: rotate(5deg);
  box-shadow: 0 25px 50px #0a050d66;
}

.phone-notch {
  background: #17131b;
  border-radius: 8px;
  width: 55px;
  height: 12px;
  position: absolute;
  top: 8px;
  left: 63px;
}

.photo-grid {
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  display: grid;
}

.photo-grid i {
  background: linear-gradient(135deg, #f5b677, #b94776);
  border-radius: 7px;
  height: 105px;
}

.photo-grid i:nth-child(2) {
  background: linear-gradient(135deg, #85488a, #3a214f);
}

.photo-grid i:nth-child(3) {
  background: linear-gradient(135deg, #5b95b3, #e58d9c);
  height: 80px;
}

.photo-grid i:nth-child(4) {
  background: linear-gradient(135deg, #dab275, #68394b);
  height: 80px;
}

.upload-pill {
  color: #fff;
  text-align: center;
  background: #db4e88;
  border-radius: 12px;
  padding: 8px;
  font-size: 7px;
  font-weight: 700;
  position: absolute;
  bottom: 14px;
  left: 22px;
  right: 22px;
}

.product-card--ticket {
  background: linear-gradient(145deg, #fff, #e9edf4);
}

.ticket-wordmark {
  color: #27344f;
}

.ticket-ui {
  border-radius: 14px;
  grid-template-columns: 1fr 90px;
  height: 145px;
  display: grid;
  position: absolute;
  bottom: 45px;
  left: 35px;
  right: 35px;
  overflow: hidden;
  transform: rotate(-4deg);
  box-shadow: 0 18px 40px #202f4c33;
}

.ticket-stub {
  color: #fff;
  background: linear-gradient(135deg, #293652, #4b6092);
  padding: 22px;
  position: relative;
}

.ticket-stub:after {
  content: "";
  background: radial-gradient(circle at 8px 8px, #0000 7px, #f4f6fa 7.5px) 0 0 / 16px 16px;
  width: 16px;
  height: 100%;
  position: absolute;
  top: 0;
  right: -8px;
}

.ticket-stub small {
  letter-spacing: .2em;
  color: #a7c6ff;
  font-size: 6px;
  display: block;
}

.ticket-stub strong {
  margin-top: 11px;
  font-size: 18px;
  line-height: 1;
  display: block;
}

.ticket-stub span {
  text-align: center;
  font-size: 6px;
  line-height: 1;
  position: absolute;
  top: 28px;
  right: 22px;
}

.ticket-stub span b {
  font-size: 18px;
}

.ticket-code {
  background: #fff;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  padding: 38px 17px;
  display: grid;
}

.ticket-code i {
  background: #26324d;
}

.ticket-code i:nth-child(2n) {
  height: 50%;
}

.ticket-code i:nth-child(3n) {
  margin-top: 15px;
}

.more-software {
  background: #fff;
  border: 1px solid #dfe5e8;
  border-radius: 18px;
  grid-template-columns: .75fr 1.7fr auto;
  align-items: center;
  gap: 32px;
  margin-top: 25px;
  padding: 34px 38px;
  display: grid;
}

.more-intro h3 {
  margin: 8px 0 0;
  font-size: 21px;
}

.mini-products {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  display: grid;
}

.mini-products > a {
  background: #f4f7f8;
  border-radius: 8px;
  grid-template-columns: 35px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 9px;
  display: grid;
}

.mini-products .mini-icon {
  width: 35px;
  height: 35px;
  color: var(--blue);
  background: #fff;
  border-radius: 7px;
  place-items: center;
  font-size: 7px;
  font-weight: 800;
  display: grid;
}

.mini-products strong, .mini-products small {
  display: block;
}

.mini-products strong {
  font-size: 9px;
}

.mini-products small {
  color: #8a949a;
  font-size: 6px;
}

.mini-products b {
  color: var(--blue);
  font-size: 9px;
}

.mini-products .mini-product {
  background: #fff;
  border: 1px solid #e5eaed;
  border-radius: 10px;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 9px;
  min-width: 0;
  min-height: 104px;
  padding: 13px 14px;
  transition: transform .2s, box-shadow .2s;
  display: flex;
}

.mini-products .mini-product:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px #17364a17;
}

.mini-logo {
  align-items: center;
  height: 54px;
  display: flex;
}

.mini-logo img {
  object-fit: contain;
  object-position: left center;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 52px;
  display: block;
}

.mini-product--skills .mini-logo img {
  width: 132px;
}

.mini-product--plaagdier .mini-logo img {
  width: 108px;
}

.mini-product--jouwactie .mini-logo img {
  width: 105px;
}

.mini-detail {
  border-top: 1px solid #edf0f2;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  display: flex;
}

.mini-products .mini-detail small {
  color: #7d8990;
  font-size: 7px;
}

.mini-products .mini-detail b {
  color: var(--blue);
  font-size: 10px;
}

.featured {
  background: #f4f7f8;
  padding-top: 0;
}

.featured-card {
  color: #fff;
  background: radial-gradient(circle at 80% 20%, #2c86c780, #0000 30%), linear-gradient(135deg, #0c1e2a, #12374e 62%, #15567f);
  border-radius: 32px;
  grid-template-columns: .75fr 1.25fr;
  gap: 40px;
  min-height: 680px;
  padding: 80px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.featured-card:before {
  content: "";
  z-index: 1;
  opacity: .065;
  background: url("/_next/static/media/data-blocks-light.0c3f1zisnrl6-.svg") center / contain no-repeat;
  width: 260px;
  height: 422px;
  position: absolute;
  bottom: -125px;
  left: -112px;
  transform: rotate(90deg);
}

.featured-card:after {
  content: "";
  background-image: linear-gradient(#ffffff09 1px, #0000 1px), linear-gradient(90deg, #ffffff09 1px, #0000 1px);
  background-size: 45px 45px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to right, #0000, #000);
  mask-image: linear-gradient(to right, #0000, #000);
}

.featured-copy {
  z-index: 2;
  position: relative;
}

.featured-logo {
  align-items: center;
  gap: 11px;
  margin: 24px 0 28px;
  font-size: 30px;
  font-weight: 750;
  display: flex;
}

.featured-logo span {
  background: var(--blue);
  border-radius: 9px;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 17px;
  display: grid;
}

.featured-copy h2 {
  margin: 0 0 25px;
  font-size: 55px;
}

.featured-copy p {
  color: #bfced7;
  font-size: 15px;
  line-height: 1.8;
}

.featured-copy .button-row {
  margin-top: 35px;
}

.featured-visual {
  z-index: 2;
  min-height: 520px;
  position: relative;
}

.feature-app {
  background: #f4f7f8;
  border: 1px solid #ffffff40;
  border-radius: 17px;
  grid-template-columns: 64px 1fr;
  width: 655px;
  height: 480px;
  display: grid;
  position: absolute;
  top: 30px;
  left: 20px;
  overflow: hidden;
  transform: rotate(1.5deg);
  box-shadow: 0 35px 80px #00090f61;
}

.feature-side {
  background: #0a151c;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  padding-top: 21px;
  display: flex;
}

.feature-side b {
  background: var(--blue);
  border-radius: 8px;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 13px;
  display: grid;
}

.feature-side i {
  border: 1px solid #5b6870;
  border-radius: 3px;
  width: 15px;
  height: 15px;
}

.feature-main {
  color: var(--ink);
  padding: 35px;
}

.feature-head {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.feature-head span small, .feature-head span strong {
  display: block;
}

.feature-head small {
  color: #8b959a;
  letter-spacing: .14em;
  font-size: 7px;
}

.feature-head strong {
  font-size: 18px;
}

.feature-head > i {
  background: var(--ink);
  color: #fff;
  border-radius: 50%;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 8px;
  font-style: normal;
  display: grid;
}

.feature-stats {
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin: 27px 0 11px;
  display: grid;
}

.feature-stats > span {
  background: #fff;
  border: 1px solid #e0e6e8;
  border-radius: 8px;
  padding: 15px 17px;
  position: relative;
}

.feature-stats small, .feature-stats strong, .feature-stats em {
  display: block;
}

.feature-stats small {
  color: #8c969b;
  font-size: 7px;
}

.feature-stats strong {
  font-size: 18px;
}

.feature-stats em {
  color: #28946a;
  font-size: 6px;
  font-style: normal;
  position: absolute;
  bottom: 15px;
  right: 14px;
}

.feature-chart {
  background: #fff;
  border: 1px solid #e0e6e8;
  border-radius: 8px;
  height: 190px;
  padding: 18px;
}

.feature-chart span small, .feature-chart span b {
  display: block;
}

.feature-chart span small {
  color: #8d989d;
  letter-spacing: .14em;
  font-size: 6px;
}

.feature-chart span b {
  font-size: 13px;
}

.feature-chart svg {
  width: 100%;
  height: 130px;
}

.f-fill {
  fill: url("#featureFill");
}

.f-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2px;
}

.feature-tasks {
  background: #fff;
  border: 1px solid #e0e6e8;
  border-radius: 8px;
  margin-top: 11px;
  padding: 15px;
}

.feature-tasks > small {
  color: #8d989d;
  letter-spacing: .14em;
  margin-bottom: 5px;
  font-size: 6px;
  display: block;
}

.feature-tasks > span {
  border-top: 1px solid #edf0f2;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  display: grid;
}

.feature-tasks > span i {
  background: var(--blue);
  border-radius: 2px;
  width: 7px;
  height: 7px;
}

.feature-tasks > span b {
  font-size: 7px;
}

.feature-tasks > span em {
  color: #879197;
  font-size: 6px;
  font-style: normal;
}

.feature-float {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #0d212ecc;
  border: 1px solid #ffffff40;
  border-radius: 11px;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  display: flex;
  position: absolute;
  bottom: 0;
  right: -10px;
  box-shadow: 0 20px 40px #00080d4d;
}

.feature-float > span {
  background: #45b981;
  border-radius: 8px;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.feature-float small, .feature-float strong {
  display: block;
}

.feature-float small {
  color: #8eb1c7;
  letter-spacing: .12em;
  font-size: 6px;
}

.feature-float strong {
  font-size: 10px;
}

.solutions {
  padding-bottom: 70px;
  position: relative;
  overflow: hidden;
}

.solutions:before {
  content: "";
  opacity: .045;
  background: url("/_next/static/media/data-blocks.0quly-e4-nz8k.svg") center / contain no-repeat;
  width: 185px;
  height: 300px;
  position: absolute;
  top: 155px;
  right: -100px;
}

.solution-grid {
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  display: grid;
}

.solution-card {
  border-radius: var(--radius);
  flex-direction: column;
  justify-content: space-between;
  min-height: 555px;
  padding: 52px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.solution-card--light {
  background: linear-gradient(145deg, #edf7fc, #f8fbfd);
  border: 1px solid #dce9f0;
}

.solution-card--dark {
  color: #fff;
  background: linear-gradient(145deg, #10171c, #172c38);
}

.solution-number {
  color: #a6b0b5;
  letter-spacing: .18em;
  font-size: 11px;
  position: absolute;
  top: 42px;
  right: 48px;
}

.solution-icon {
  align-self: flex-end;
  width: 155px;
  height: 155px;
  position: relative;
}

.solution-icon span {
  background: var(--blue);
  border-radius: 4px;
  width: 28px;
  height: 28px;
  position: absolute;
  box-shadow: 0 10px 25px #2c86c733;
}

.solution-icon span:first-child {
  top: 20px;
  left: 15px;
}

.solution-icon span:nth-child(2) {
  opacity: .75;
  top: 52px;
  left: 67px;
}

.solution-icon span:nth-child(3) {
  opacity: .28;
  top: 5px;
  right: 8px;
}

.solution-icon span:nth-child(4) {
  opacity: .5;
  bottom: 20px;
  right: 17px;
}

.solution-icon--nodes i {
  z-index: 2;
  background: #172c38;
  border: 3px solid #78bdea;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: absolute;
}

.solution-icon--nodes i:first-child {
  top: 25px;
  left: 2px;
}

.solution-icon--nodes i:nth-child(2) {
  top: 5px;
  right: 3px;
}

.solution-icon--nodes i:nth-child(3) {
  bottom: 4px;
  right: 4px;
}

.solution-icon--nodes i:nth-child(4) {
  bottom: 3px;
  left: 4px;
}

.solution-icon--nodes svg {
  position: absolute;
  inset: 0;
}

.solution-icon--nodes path {
  fill: none;
  stroke: #427894;
  stroke-width: 2px;
  stroke-dasharray: 4 5;
}

.solution-card h3 {
  max-width: 500px;
  margin: 12px 0 17px;
  font-size: 38px;
}

.solution-card p {
  color: #68757c;
  max-width: 500px;
  font-size: 15px;
}

.solution-card--dark p {
  color: #a9bac4;
}

.card-link--light {
  color: #fff;
}

.expertise {
  padding-top: 60px;
}

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

.expertise-card {
  border-right: 1px solid var(--line);
  min-height: 340px;
  padding: 38px 28px;
  transition: background .25s;
  position: relative;
}

.expertise-card:last-child {
  border: 0;
}

.expertise-card:hover {
  background: #f5f8f9;
}

.line-icon {
  width: 54px;
  height: 54px;
  color: var(--blue);
  background: #eef6fa;
  border-radius: 13px;
  place-items: center;
  margin-bottom: 70px;
  display: grid;
}

.line-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 30px;
  height: 30px;
}

.expertise-card .num {
  color: #a5aeb3;
  font-size: 9px;
  position: absolute;
  top: 44px;
  right: 26px;
}

.expertise-card h3 {
  font-size: 21px;
}

.expertise-card p {
  color: var(--muted);
  font-size: 13px;
}

.expertise-card > a {
  width: 34px;
  height: 34px;
  color: var(--blue);
  border: 1px solid #d4dce0;
  border-radius: 50%;
  place-items: center;
  transition: all .25s;
  display: grid;
  position: absolute;
  bottom: 28px;
  right: 26px;
}

.expertise-card:hover > a {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  transform: rotate(45deg);
}

.integrations {
  color: #fff;
  background: #0d1820;
  position: relative;
  overflow: hidden;
}

.integrations:before {
  content: "";
  opacity: .045;
  background: url("/_next/static/media/data-blocks-light.0c3f1zisnrl6-.svg") center / contain no-repeat;
  width: 250px;
  height: 405px;
  position: absolute;
  bottom: -115px;
  right: -100px;
}

.integration-grid {
  opacity: .25;
  background-image: linear-gradient(#64b8ec1a 1px, #0000 1px), linear-gradient(90deg, #64b8ec1a 1px, #0000 1px);
  background-size: 50px 50px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to right, #0000, #000 30%, #000);
  mask-image: linear-gradient(to right, #0000, #000 30%, #000);
}

.integration-layout {
  grid-template-columns: .8fr 1.2fr;
  align-items: center;
  gap: 80px;
  display: grid;
  position: relative;
}

.integration-copy h2 {
  margin: 20px 0 26px;
}

.integration-copy h2 em {
  color: #78c0ee;
}

.integration-copy p {
  color: #a9bac5;
  max-width: 570px;
  font-size: 17px;
  line-height: 1.8;
}

.integration-copy .button {
  margin-top: 20px;
}

.integration-map {
  height: 550px;
  position: relative;
}

.connection-lines {
  width: 100%;
  height: 500px;
  position: absolute;
  inset: 22px 0 0;
}

.connection-lines path {
  fill: none;
  stroke: url("#lineGrad");
  stroke-width: 1px;
  stroke-dasharray: 4 7;
  opacity: .55;
}

.map-node {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #1d3747cc;
  border: 1px solid #82c8f147;
  border-radius: 18px;
  align-content: center;
  place-items: center;
  width: 94px;
  height: 94px;
  display: grid;
  position: absolute;
  box-shadow: 0 16px 30px #0000002e;
}

.map-node span, .map-node strong {
  font-size: 13px;
}

.map-node small {
  color: #7fa1b5;
  font-size: 7px;
}

.map-node--core {
  background: linear-gradient(145deg, #163a52, #102735);
  border-color: #68bff499;
  width: 145px;
  height: 145px;
  top: 178px;
  left: calc(50% - 72px);
  box-shadow: 0 0 55px #2c86c740;
}

.node-mark {
  width: 40px;
  height: 32px;
  margin-bottom: 8px;
  position: relative;
}

.node-mark i {
  background: #fff;
  width: 7px;
  height: 7px;
  position: absolute;
}

.node-mark i:first-child {
  top: 0;
  left: 0;
}

.node-mark i:nth-child(2) {
  background: var(--blue-bright);
  top: 7px;
  left: 14px;
}

.node-mark i:nth-child(3) {
  top: 20px;
  left: 0;
}

.node-mark i:nth-child(4) {
  top: 0;
  left: 28px;
}

.node-mark i:nth-child(5) {
  background: var(--blue-bright);
  top: 20px;
  left: 28px;
}

.map-node--one {
  top: 25px;
  left: 4%;
}

.map-node--two {
  top: 35px;
  right: 3%;
}

.map-node--three {
  bottom: 34px;
  right: 0;
}

.map-node--four {
  bottom: 20px;
  left: 0;
}

.map-node--five {
  top: -10px;
  left: calc(50% - 47px);
}

.process {
  background: #f6f8f9;
}

.timeline {
  grid-template-columns: repeat(4, 1fr);
  display: grid;
  position: relative;
}

.timeline:before {
  content: "";
  background: #ccd6db;
  height: 1px;
  position: absolute;
  top: 25px;
  left: 0;
  right: 0;
}

.timeline-step {
  padding: 62px 40px 0 0;
  position: relative;
}

.step-dot {
  color: #7f8b91;
  background: #f6f8f9;
  border: 1px solid #cdd7dc;
  border-radius: 50%;
  place-items: center;
  width: 51px;
  height: 51px;
  font-size: 9px;
  transition: all .25s;
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
}

.timeline-step:hover .step-dot {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 8px #2c86c71a;
}

.timeline-step > span {
  color: var(--blue);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 800;
}

.timeline-step h3 {
  margin: 16px 0 12px;
  font-size: 22px;
}

.timeline-step p {
  max-width: 230px;
  color: var(--muted);
  font-size: 13px;
}

.about-layout {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 100px;
  display: grid;
}

.about-art {
  border-radius: var(--radius);
  background: linear-gradient(145deg, #dcebf3, #f5f9fb);
  height: 540px;
  position: relative;
  overflow: hidden;
}

.about-grid {
  background-image: linear-gradient(#2c86c71f 1px, #0000 1px), linear-gradient(90deg, #2c86c71f 1px, #0000 1px);
  background-size: 40px 40px;
  position: absolute;
  inset: 0;
  transform: perspective(400px)rotateX(50deg)scale(1.4)translateY(140px);
}

.sculpture {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)rotate(-10deg);
}

.cube {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(135deg, #4ca0d8, #1d6fa8);
  width: 70px;
  height: 70px;
  position: absolute;
  box-shadow: inset -12px -12px 20px #093f6438, 0 22px 45px #195b853b;
}

.c1 {
  top: 15px;
  left: 30px;
}

.c2 {
  top: 55px;
  left: 105px;
  transform: scale(1.2);
}

.c3 {
  top: 8px;
  right: 15px;
  transform: scale(.72);
}

.c4 {
  opacity: .7;
  top: 125px;
  left: 12px;
  transform: scale(.8);
}

.c5 {
  top: 160px;
  left: 100px;
  transform: scale(1.45);
}

.c6 {
  top: 125px;
  right: 2px;
}

.c7 {
  opacity: .6;
  bottom: 2px;
  right: 25px;
  transform: scale(.65);
}

.about-label {
  color: #5e7d90;
  letter-spacing: .12em;
  font-size: 8px;
  font-weight: 700;
  position: absolute;
  bottom: 20px;
  left: 24px;
}

.about-copy h2 {
  margin: 22px 0 28px;
  font-size: 48px;
}

.about-copy p {
  color: var(--muted);
  font-size: 16px;
}

.about-copy .button {
  margin-top: 20px;
}

.cta-section {
  padding: 0 0 110px;
}

.cta-card {
  color: #fff;
  background: radial-gradient(circle at 90% 10%, #74caff73, #0000 35%), linear-gradient(130deg, #1d73ac, #2c86c7 60%, #246f9f);
  border-radius: 30px;
  padding: 90px;
  position: relative;
  overflow: hidden;
}

.cta-card:before {
  content: "";
  border: 1px solid #ffffff29;
  border-radius: 50%;
  width: 460px;
  height: 460px;
  position: absolute;
  top: -160px;
  right: -120px;
  box-shadow: 0 0 0 70px #ffffff06, 0 0 0 140px #ffffff05;
}

.cta-card h2 {
  margin: 19px 0;
  font-size: 60px;
  position: relative;
}

.cta-card h2 em {
  color: #fff;
}

.cta-card > p {
  color: #d7edfa;
  max-width: 600px;
  font-size: 17px;
  position: relative;
}

.cta-card .button-row {
  margin-top: 34px;
  position: relative;
}

.mail-link {
  border-bottom: 1px solid #ffffff73;
  align-items: center;
  gap: 10px;
  margin-left: 18px;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
}

.cta-pixels {
  width: 130px;
  height: 130px;
  position: absolute;
  bottom: 70px;
  right: 100px;
}

.cta-pixels i {
  background: #ffffff61;
  width: 18px;
  height: 18px;
  position: absolute;
}

.cta-pixels i:first-child {
  top: 0;
  left: 0;
}

.cta-pixels i:nth-child(2) {
  top: 20px;
  left: 30px;
}

.cta-pixels i:nth-child(3) {
  top: 0;
  left: 75px;
}

.cta-pixels i:nth-child(4) {
  top: 55px;
  left: 55px;
}

.cta-pixels i:nth-child(5) {
  top: 40px;
  right: 0;
}

.cta-pixels i:nth-child(6) {
  bottom: 15px;
  left: 10px;
}

.cta-pixels i:nth-child(7) {
  bottom: 0;
  right: 20px;
}

.cta-pixels i:nth-child(8) {
  width: 8px;
  height: 8px;
  bottom: 0;
  left: 40px;
}

.cta-pixels i:nth-child(9) {
  width: 8px;
  height: 8px;
  top: 5px;
  right: 5px;
}

.footer {
  border-top: 1px solid var(--line);
  background: #f8fafb;
  padding: 76px 0 30px;
}

.footer-top {
  grid-template-columns: 1.4fr repeat(3, .8fr) 1fr;
  gap: 50px;
  padding-bottom: 70px;
  display: grid;
}

.footer-brand img {
  width: 215px;
}

.footer-brand p {
  max-width: 260px;
  color: var(--muted);
  margin: 24px 0;
  font-size: 13px;
}

.footer-brand > a {
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
}

.footer-col h3, address h3 {
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 22px;
  font-size: 10px;
}

.footer-col a {
  color: #5f6a71;
  margin: 10px 0;
  font-size: 12px;
  transition: color .2s;
  display: block;
}

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

address {
  font-style: normal;
}

address p {
  color: #5f6a71;
  font-size: 12px;
}

address a {
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
}

.footer-bottom {
  border-top: 1px solid var(--line);
  color: #849097;
  grid-template-columns: 1fr 1fr 1fr;
  padding-top: 24px;
  font-size: 10px;
  display: grid;
}

.footer-bottom > span:nth-child(2) {
  text-align: center;
}

.footer-bottom > div {
  text-align: right;
}

.back-top {
  color: var(--ink);
  font-weight: 700;
}

.about-art:before {
  content: "";
  z-index: 1;
  opacity: .1;
  background: url("/_next/static/media/data-blocks.0quly-e4-nz8k.svg") center / contain no-repeat;
  width: 150px;
  height: 244px;
  position: absolute;
  top: -42px;
  right: -28px;
}

.footer {
  position: relative;
  overflow: hidden;
}

.footer:before {
  content: "";
  opacity: .055;
  background: url("/_next/static/media/data-blocks.0quly-e4-nz8k.svg") center / contain no-repeat;
  width: 130px;
  height: 211px;
  position: absolute;
  bottom: -20px;
  right: -53px;
}

.footer-top, .footer-bottom {
  z-index: 1;
  position: relative;
}

.catalog-dot {
  background: #eaf4fb;
  overflow: hidden;
}

.catalog-dot:after {
  display: none;
}

.catalog-dot img {
  width: 27px;
  height: auto;
}

.bokyding-dot {
  background: #f0ecfa;
  overflow: hidden;
}

.bokyding-dot:after {
  display: none;
}

.bokyding-dot img {
  object-fit: contain;
  width: 25px;
  height: 25px;
}

.module-catalog {
  color: #1e73a8;
  background: #eaf4fb;
}

.module-catalog .module-head {
  color: #6689a1;
}

.module-catalogflow-logo {
  width: 90px;
  height: auto;
  margin: 5px auto 0;
  display: block;
}

.module-catalog .data-stack {
  margin-top: 4px;
}

.module-catalog .data-stack span {
  border-color: #1e73a824;
}

.module-catalog .data-stack i {
  background: #1e73a8;
}

.module-catalog .data-stack b {
  background: #1e73a833;
}

.module-bokyding {
  color: #4b3294;
  background: #f0ecfa;
}

.module-bokyding .module-head {
  color: #7868a4;
}

.module-bokyding-logo {
  mix-blend-mode: multiply;
  width: 105px;
  height: auto;
  margin-top: 8px;
  display: block;
}

.module-bokyding .rental-slots {
  margin-top: 11px;
}

.module-bokyding .rental-slots i {
  background: #fff;
  border-color: #d8d0eb;
}

.module-bokyding .rental-slots i:nth-child(3), .module-bokyding .rental-slots i:nth-child(4), .module-bokyding .rental-slots i:nth-child(7) {
  background: #4b3294;
  border-color: #4b3294;
}

.product-card--catalog {
  color: #17212a;
  background: linear-gradient(145deg, #fff 28%, #e4f1f8);
}

.product-card--catalog .product-category {
  color: #1e73a8;
  border-color: #1e73a838;
}

.catalogflow-official-logo {
  width: 175px;
  margin: 0 0 20px;
}

.catalogflow-official-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.product-card--catalog .catalog-ui {
  border-color: #c9dfec;
  box-shadow: 0 18px 45px #1e73a824;
}

.product-card--catalog .catalog-bar i, .product-card--catalog .catalog-bar b {
  background: #1e73a8;
}

.product-card--catalog .catalog-row em {
  color: #1e73a8;
  background: #e6f1f8;
}

.product-card--catalog progress {
  accent-color: #1e73a8;
}

.product-card--bokyding {
  background: linear-gradient(145deg, #fff 35%, #eee9f8);
}

.product-card--bokyding .product-category {
  color: #4b3294;
  border-color: #4b329433;
}

.bokyding-official-logo {
  width: 180px;
  margin: 0 0 20px;
}

.bokyding-official-logo img {
  mix-blend-mode: multiply;
  width: 100%;
  height: auto;
  display: block;
}

.product-card--bokyding .calendar-ui {
  border-color: #ded7ec;
  box-shadow: 0 20px 50px #4b329424;
}

.product-card--bokyding .week .today b, .product-card--bokyding .booking > i {
  background: #4b3294;
}

.product-card--bokyding .booking--two > i {
  background: #7966b2;
}

.party-dot {
  background: #f0edfa;
  overflow: hidden;
}

.party-dot:after {
  display: none;
}

.party-dot img {
  object-fit: contain;
  width: 25px;
  height: 27px;
}

.module-party {
  color: #17161a;
  background: #eeeaf8;
}

.module-party .module-head {
  color: #766a98;
}

.module-partyshare-brand {
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  display: flex;
}

.module-partyshare-brand img {
  object-fit: contain;
  width: 28px;
  height: 31px;
}

.module-partyshare-brand strong {
  letter-spacing: -.04em;
  font-size: 11px;
}

.module-party .photo-sequence i {
  background: #604c9f;
}

.module-party .photo-sequence i:nth-child(2) {
  background: #17161a;
}

.module-party .photo-sequence i:nth-child(3) {
  background: #8b79bf;
}

.product-card--party {
  color: #17161a;
  background: linear-gradient(145deg, #fff 30%, #ece8f7);
}

.product-card--party .product-category {
  color: #604c9f;
  border-color: #604c9f38;
}

.product-card--party p {
  color: #686476;
}

.product-card--party .card-link {
  color: #17161a;
}

.partyshare-official-logo {
  width: 140px;
  margin: 0 0 18px;
}

.partyshare-official-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.product-card--party .phone-ui {
  background: #f4f1fb;
  box-shadow: 0 25px 50px #36276547;
}

.product-card--party .photo-grid i {
  background: linear-gradient(135deg, #8d7ac2, #4a377f);
}

.product-card--party .photo-grid i:nth-child(2) {
  background: linear-gradient(135deg, #33284e, #6d589f);
}

.product-card--party .photo-grid i:nth-child(3) {
  background: linear-gradient(135deg, #b5a9d8, #604c9f);
}

.product-card--party .photo-grid i:nth-child(4) {
  background: linear-gradient(135deg, #17161a, #7663ad);
}

.product-card--party .upload-pill {
  background: #604c9f;
}

.ticket-dot {
  background: #edf3fb;
  overflow: hidden;
}

.ticket-dot:after {
  display: none;
}

.ticket-dot img {
  object-fit: contain;
  width: 24px;
  height: 24px;
}

.module-ticket {
  color: #091e3e;
  background: #e8eef7;
}

.module-ticket .module-head {
  color: #657797;
}

.module-etickr-brand {
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  display: flex;
}

.module-etickr-brand img {
  object-fit: contain;
  width: 27px;
  height: 27px;
}

.module-etickr-brand strong {
  letter-spacing: -.04em;
  font-size: 11px;
}

.module-ticket .ticket-stripes {
  height: 17px;
  margin: 0;
  position: absolute;
  bottom: 12px;
  left: 14px;
  right: 14px;
}

.module-ticket .ticket-stripes i {
  background: #091e3e;
}

.product-card--ticket {
  color: #091e3e;
  background: linear-gradient(145deg, #fff 30%, #e6edf8);
}

.product-card--ticket .product-category {
  color: #628ac7;
  border-color: #628ac747;
}

.product-card--ticket p {
  color: #627087;
}

.etickr-official-logo {
  width: 210px;
  margin: 0 0 20px;
}

.etickr-official-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.product-card--ticket .ticket-stub {
  background: linear-gradient(135deg, #091e3e, #294b7d);
}

.product-card--ticket .ticket-stub small {
  color: #a9c4ec;
}

.product-card--ticket .ticket-code i {
  background: #091e3e;
}

.narrow-dot {
  background: #edf4fb;
}

.narrow-dot:after {
  display: none;
}

.narrow-dot img {
  width: 23px;
  height: auto;
}

.module-narrow {
  color: #151b20;
  background: #e9f1fa;
}

.module-narrow .module-head {
  color: #6686aa;
}

.module-narrow-brand {
  align-items: center;
  gap: 7px;
  margin-top: 17px;
  display: flex;
}

.module-narrow-brand img {
  width: 28px;
  height: auto;
}

.module-narrow-brand strong {
  letter-spacing: -.035em;
  font-size: 10px;
}

.module-narrow .screen-sequence i {
  background: #9ebde0;
}

.module-narrow .screen-sequence i:nth-child(2) {
  background: #2a67b2;
}

.module-narrow .screen-sequence i:nth-child(3) {
  background: #111a20;
}

.product-card--narrow {
  color: #151b20;
  background: linear-gradient(150deg, #fff 24%, #e5eef8 100%);
}

.product-card--narrow:before {
  background: linear-gradient(120deg, #0000 50%, #2a67b209);
}

.product-card--narrow .product-category {
  color: #2a67b2;
  border-color: #2a67b238;
}

.product-card--narrow p {
  color: #61707c;
}

.product-card--narrow .card-link {
  color: #151b20;
}

.narrowsculpt-wordmark {
  margin-bottom: 25px;
}

.narrowsculpt-wordmark img {
  width: 220px;
  height: auto;
}

.narrowsculpt-photos {
  z-index: 1;
  width: 290px;
  height: 292px;
  position: absolute;
  bottom: -18px;
  right: -10px;
}

.narrowsculpt-photo {
  background: #dce7ef;
  border: 5px solid #fff;
  margin: 0;
  position: absolute;
  overflow: hidden;
  box-shadow: 0 22px 48px #1835523d;
}

.narrowsculpt-photo img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.narrowsculpt-photo--main {
  border-radius: 13px 0 0;
  width: 250px;
  height: 280px;
  bottom: 0;
  right: 0;
  transform: rotate(-1deg);
}

.narrowsculpt-photo--main img {
  object-position: 50% 27%;
}

.narrowsculpt-photo--main span {
  color: #2a67b2;
  letter-spacing: .12em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #ffffffe6;
  border-radius: 5px;
  padding: 6px 9px;
  font-size: 6px;
  font-weight: 800;
  position: absolute;
  top: 12px;
  right: 12px;
}

.narrowsculpt-photo--detail {
  z-index: 2;
  border-radius: 10px;
  width: 126px;
  height: 174px;
  bottom: 25px;
  left: 0;
  transform: rotate(-4deg);
}

.narrowsculpt-photo--detail img {
  object-position: 50% 24%;
}

.beeber-dot {
  background: #fff;
  border: 1px solid #e7eaec;
  overflow: hidden;
}

.beeber-dot:after {
  display: none;
}

.beeber-dot img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.beeber-product-name {
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  display: flex;
}

.beeber-product-name img {
  border: 1px solid #eceff1;
  border-radius: 12px;
  width: 52px;
  height: 52px;
  box-shadow: 0 9px 20px #1e222514;
}

.beeber-product-name span {
  letter-spacing: -.045em;
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
}

.beeber-wordmark {
  gap: 14px;
  margin-bottom: 17px;
}

.beeber-wordmark img {
  height: auto;
}

.beeber-wordmark .beeber-app-icon {
  border: 1px solid #eceff1;
  border-radius: 12px;
  width: 52px;
  box-shadow: 0 9px 20px #1e222514;
}

.beeber-wordmark .beeber-logo-lockup {
  width: 145px;
}

.product-card--beeber {
  background: linear-gradient(145deg, #fff 42%, #fbedf4);
  min-height: 570px;
}

.product-card--beeber:after {
  background: radial-gradient(circle, #e000721a, #0000 68%);
}

.product-card--beeber .product-copy {
  max-width: 320px;
}

.product-card--beeber .panel-side b {
  background: #e00072;
}

.product-card--beeber .mini-list i {
  background: linear-gradient(90deg, #e6d6de 22%, #0000 22% 30%, #f1e9ed 30%);
}

.product-card--beeber h3 {
  font-size: 29px;
}

.product-card--beeber p {
  font-size: 13px;
}

.product-card--beeber .beeber-ui {
  width: 400px;
  height: 255px;
  bottom: -8px;
  right: -18px;
  transform: rotate(-1deg);
}

.product-card--beeber .beeber-panel {
  height: 223px;
}

.product-card--beeber .panel-side img {
  border-radius: 6px;
  width: 27px;
  height: 27px;
}

.product-card--beeber .panel-main {
  padding: 20px;
}

.product-card--beeber .ui-top i:first-child {
  background: #e00072;
}

.featured-card {
  background: radial-gradient(circle at 80% 20%, #e0007242, #0000 31%), linear-gradient(135deg, #17131a, #30202b 60%, #4a1731);
}

.featured-logo {
  clip-path: none;
  background: none;
  width: 218px;
  margin: 24px 0 28px;
  padding: 0;
}

.featured-logo img {
  filter: brightness(0) invert();
  width: 100%;
  height: auto;
}

.featured-card .feature-side b, .featured-card .feature-tasks > span i {
  background: #e00072;
}

.featured-card .f-line {
  stroke: #e00072;
}

.featured-card .feature-chart .f-fill {
  opacity: .7;
}

.featured-card .feature-side img {
  border-radius: 8px;
  width: 34px;
  height: 34px;
}

.beeber-wordmark .beeber-logo-lockup {
  object-fit: cover;
  object-position: top;
  width: 145px;
  height: 38px;
}

.product-card--beeber {
  min-height: 600px;
}

.beeber-real-ui {
  z-index: 2;
  background: #fff;
  border: 1px solid #dfd5da;
  border-radius: 10px 0 0;
  width: 450px;
  height: 270px;
  position: absolute;
  bottom: -8px;
  right: -18px;
  overflow: hidden;
  transform: rotate(-.7deg);
  box-shadow: 0 22px 55px #48193124;
}

.real-ui-bar, .device-bar {
  background: #fff;
  border-bottom: 1px solid #ece7ea;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  display: flex;
}

.real-ui-bar i, .device-bar i {
  background: #d6dfe3;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.real-ui-bar i:first-child, .device-bar i:first-child {
  background: #e00072;
}

.real-ui-bar span, .device-bar span {
  color: #9aa3a8;
  letter-spacing: .08em;
  margin-left: auto;
  font-size: 6px;
}

.beeber-real-ui > img {
  object-fit: cover;
  object-position: top left;
  width: 100%;
  height: calc(100% - 28px);
}

.feature-screen-real {
  background: #fff;
  border: 1px solid #ffffff4d;
  border-radius: 14px;
  width: 675px;
  height: 420px;
  position: absolute;
  top: 56px;
  left: -6px;
  overflow: hidden;
  transform: rotate(1deg);
  box-shadow: 0 32px 70px #00000057;
}

.feature-screen-real > img {
  object-fit: cover;
  object-position: top left;
  width: 100%;
  height: calc(100% - 28px);
}

.feature-phone-real {
  z-index: 3;
  background: #fff;
  border: 7px solid #171318;
  border-radius: 29px;
  width: 165px;
  height: 355px;
  position: absolute;
  bottom: -15px;
  right: -38px;
  overflow: hidden;
  transform: rotate(-4deg);
  box-shadow: 0 28px 55px #0000006b;
}

.feature-phone-real img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.phone-speaker {
  z-index: 2;
  background: #171318;
  border-radius: 8px;
  width: 48px;
  height: 12px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

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

.js .reveal {
  opacity: 0;
  transition: opacity .7s, transform .7s cubic-bezier(.2, .65, .25, 1);
  transition-delay: var(--delay, 0s);
  transform: translateY(22px);
}

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

@media (max-width: 1120px) {
  .desktop-nav {
    gap: 20px;
  }

  .header-cta {
    display: none;
  }

  .hero-layout {
    grid-template-columns: 1fr 1fr;
  }

  .main-interface {
    width: 570px;
    left: -35px;
  }

  .float-card--planning {
    right: -5px;
  }

  .product-card, .product-card--large, .product-card--wide {
    grid-column: span 6;
  }

  .more-software {
    grid-template-columns: 1fr;
  }

  .featured-card {
    padding: 60px;
  }

  .feature-app {
    width: 590px;
    left: 0;
  }

  .footer-top {
    grid-template-columns: 1.3fr repeat(2, 1fr);
  }

  .footer-col:nth-of-type(3), .footer-top address {
    margin-top: 15px;
  }
}

@media (max-width: 900px) {
  .section {
    padding: 95px 0;
  }

  .desktop-nav, .header-cta {
    display: none;
  }

  .menu-toggle {
    margin-left: auto;
    display: block;
  }

  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(3px)rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-3px)rotate(-45deg);
  }

  .mobile-menu {
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    background: #fffffffa;
    padding: 35px 24px;
    transition: transform .3s;
    display: block;
    position: fixed;
    inset: 70px 0 0;
    transform: translateX(100%);
  }

  .mobile-menu.open {
    transform: none;
  }

  .mobile-menu nav {
    flex-direction: column;
    gap: 0;
    display: flex;
  }

  .mobile-menu nav > a:not(.button) {
    border-bottom: 1px solid var(--line);
    letter-spacing: -.03em;
    padding: 18px 0;
    font-size: 24px;
    font-weight: 650;
  }

  .mobile-menu .button {
    margin-top: 30px;
  }

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

  .hero-layout {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 700px;
  }

  .hero-visual {
    min-height: 600px;
    margin-top: 15px;
  }

  .main-interface {
    width: min(680px, 92vw);
    left: 4%;
  }

  .float-card--planning {
    right: 0;
  }

  .hero-bottom {
    margin-top: 25px;
  }

  .section-heading {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 45px;
  }

  .section-heading > p {
    margin: 0;
  }

  .product-card, .product-card--large, .product-card--wide {
    grid-column: span 12;
    min-height: 540px;
  }

  .product-card--narrow, .product-card--party {
    min-height: 610px;
  }

  .signage-mock {
    right: 10%;
  }

  .phone-ui {
    right: 12%;
  }

  .more-software {
    padding: 28px;
  }

  .mini-products {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .featured-card {
    grid-template-columns: 1fr;
    min-height: 1060px;
    padding: 60px;
  }

  .featured-copy {
    max-width: 600px;
  }

  .featured-visual {
    min-height: 480px;
  }

  .feature-app {
    width: 100%;
    left: 0;
  }

  .feature-float {
    right: 0;
  }

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

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

  .expertise-card:nth-child(2) {
    border-right: 0;
  }

  .expertise-card:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }

  .integration-layout {
    grid-template-columns: 1fr;
  }

  .integration-map {
    width: 100%;
    max-width: 650px;
    margin: auto;
  }

  .timeline {
    grid-template-columns: 1fr 1fr;
    gap: 50px 0;
  }

  .timeline:before {
    display: none;
  }

  .timeline-step {
    padding-top: 60px;
  }

  .about-layout {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .about-art {
    height: 440px;
  }

  .cta-card {
    padding: 70px 55px;
  }

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

  .footer-brand {
    grid-column: span 3;
  }

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

  .footer-bottom > span:nth-child(2) {
    display: none;
  }
}

@media (max-width: 620px) {
  .container {
    width: min(100% - 32px,var(--container));
  }

  .site-header {
    height: 70px;
  }

  .brand {
    width: 175px;
  }

  .section {
    padding: 76px 0;
  }

  h1 {
    font-size: 45px;
  }

  h2 {
    font-size: 38px;
  }

  .hero {
    padding-top: 120px;
  }

  .hero-intro {
    font-size: 16px;
  }

  .button-row {
    align-items: stretch;
  }

  .hero-copy .button {
    flex: 1;
  }

  .hero-proof {
    margin-top: 35px;
  }

  .hero-visual {
    min-height: 460px;
    margin-top: 35px;
  }

  .main-interface {
    transform-origin: 0 0;
    width: 560px;
    left: 0;
    transform: scale(.67);
  }

  .float-card--planning {
    top: 5px;
    right: -8px;
    transform: scale(.85);
  }

  .float-card--sync {
    bottom: 45px;
    left: -5px;
    transform: scale(.85);
  }

  .float-card--apps {
    display: none;
  }

  .orbit--one {
    width: 400px;
    height: 400px;
    left: 0;
  }

  .orbit--two {
    display: none;
  }

  .hero-bottom {
    grid-template-columns: auto 1fr;
  }

  .hero-bottom p {
    display: none;
  }

  .product-card, .product-card--large, .product-card--wide {
    min-height: 590px;
    padding: 32px;
  }

  .product-card h3 {
    font-size: 28px;
  }

  .product-card--beeber {
    min-height: 610px;
  }

  .beeber-ui {
    transform-origin: 100% 100%;
    width: 500px;
    right: -90px;
    transform: scale(.88)rotate(-2deg);
  }

  .product-card--narrow {
    min-height: 630px;
  }

  .signage-mock {
    right: 35px;
    transform: scale(.9);
  }

  .product-card--catalog {
    min-height: 620px;
  }

  .catalog-ui {
    transform-origin: 0 100%;
    left: 24px;
    right: -90px;
    transform: scale(.9);
  }

  .product-card--bokyding {
    min-height: 620px;
  }

  .calendar-ui {
    width: 390px;
    right: -60px;
  }

  .product-card--party {
    min-height: 650px;
  }

  .phone-ui {
    right: 38px;
  }

  .ticket-ui {
    left: 24px;
    right: 24px;
  }

  .mini-products {
    grid-template-columns: 1fr;
  }

  .more-software .button {
    width: 100%;
  }

  .featured-card {
    border-radius: 22px;
    min-height: 980px;
    padding: 38px 28px;
  }

  .featured-copy h2 {
    font-size: 40px;
  }

  .featured-copy .button {
    width: 100%;
  }

  .featured-visual {
    min-height: 380px;
  }

  .feature-app {
    transform-origin: 0 0;
    width: 620px;
    transform: scale(.64)rotate(1.5deg);
  }

  .feature-float {
    bottom: 12px;
    right: -5px;
  }

  .solution-card {
    min-height: 520px;
    padding: 35px;
  }

  .solution-card h3 {
    font-size: 32px;
  }

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

  .expertise-card {
    min-height: 270px;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .line-icon {
    margin-bottom: 38px;
  }

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

  .integration-map {
    transform-origin: top;
    height: 470px;
    transform: scale(.85);
  }

  .connection-lines {
    width: 600px;
    left: 50%;
    transform: translateX(-50%);
  }

  .map-node--one {
    left: -10%;
  }

  .map-node--two {
    right: -10%;
  }

  .map-node--three {
    right: -12%;
  }

  .map-node--four {
    left: -12%;
  }

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

  .timeline-step {
    padding: 0 0 0 72px;
  }

  .timeline-step .step-dot {
    top: 0;
  }

  .timeline-step:after {
    content: "";
    background: #ccd6db;
    width: 1px;
    position: absolute;
    top: 52px;
    bottom: -50px;
    left: 25px;
  }

  .timeline-step:last-child:after {
    display: none;
  }

  .about-art {
    height: 380px;
  }

  .about-copy h2 {
    font-size: 38px;
  }

  .cta-section {
    padding-bottom: 70px;
  }

  .cta-card {
    padding: 54px 28px;
  }

  .cta-card h2 {
    font-size: 41px;
  }

  .cta-card .button {
    width: 100%;
  }

  .mail-link {
    margin: 14px auto 0;
  }

  .cta-pixels {
    opacity: .35;
    right: -20px;
  }

  .footer {
    padding-top: 55px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px 25px;
  }

  .footer-brand, .footer-top address {
    grid-column: span 2;
  }

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, :before, :after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

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

@media (max-width: 620px) {
  .section-heading:after {
    display: none;
  }

  .hero:before {
    width: 145px;
    height: 235px;
    bottom: 30px;
    right: -65px;
  }
}

@media (max-width: 1120px) and (min-width: 901px) {
  .portfolio-board {
    transform-origin: 0;
    left: -38px;
    transform: scale(.84)rotateZ(-.5deg);
  }

  .portfolio-pixels {
    right: -4px;
  }
}

@media (max-width: 900px) and (min-width: 621px) {
  .portfolio-board {
    left: 50%;
    transform: translateX(-50%)rotateZ(-.5deg);
  }
}

@media (max-width: 620px) {
  .hero-visual {
    min-height: 410px;
    margin-top: 35px;
  }

  .portfolio-board {
    transform-origin: 0 0;
    top: 0;
    left: 0;
    transform: scale(.59)rotateZ(-.5deg);
  }

  .portfolio-pixels {
    transform-origin: 100% 100%;
    bottom: -2px;
    right: -38px;
    transform: scale(.72);
  }

  .product-card--beeber {
    min-height: 660px;
  }

  .beeber-real-ui {
    width: 430px;
    height: 260px;
    bottom: -5px;
    right: -104px;
  }

  .featured-visual {
    min-height: 330px;
  }

  .feature-screen-real {
    transform-origin: 0 0;
    width: 600px;
    height: 375px;
    top: 28px;
    left: 0;
    transform: scale(.46)rotate(1deg);
  }

  .feature-phone-real {
    border-width: 5px;
    border-radius: 20px;
    width: 104px;
    height: 225px;
    bottom: 18px;
    right: -4px;
  }

  .phone-speaker {
    width: 34px;
    height: 8px;
    top: 5px;
  }
}

.product-card--catalog, .product-card--bokyding, .product-card--party, .product-card--ticket {
  min-height: 650px;
}

@media (max-width: 620px) {
  .product-card--catalog, .product-card--bokyding, .product-card--party, .product-card--ticket {
    min-height: 690px;
  }
}

.nav-link--active {
  color: var(--blue-dark);
}

.nav-link--active:after {
  right: 0;
}

.page-hero {
  background: linear-gradient(#fbfdfe, #fff);
  min-height: 790px;
  padding: 190px 0 105px;
  position: relative;
  overflow: hidden;
}

.page-hero:after {
  content: "";
  opacity: .07;
  background: url("/_next/static/media/data-blocks.0quly-e4-nz8k.svg") center / contain no-repeat;
  width: 190px;
  height: 310px;
  position: absolute;
  bottom: -35px;
  right: -55px;
}

.page-grid {
  opacity: .38;
  background-image: linear-gradient(#2c86c714 1px, #0000 1px), linear-gradient(90deg, #2c86c714 1px, #0000 1px);
  background-size: 55px 55px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#000, #0000 92%);
  mask-image: linear-gradient(#000, #0000 92%);
}

.page-hero-layout {
  z-index: 1;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: 75px;
  min-width: 0;
  display: grid;
  position: relative;
}

.page-hero-copy {
  min-width: 0;
}

.page-hero-copy h1 {
  max-width: 680px;
  margin: 22px 0 30px;
  font-size: 72px;
  line-height: .98;
}

.page-hero-copy > p {
  color: #5d6970;
  max-width: 610px;
  margin: 0 0 34px;
  font-size: 18px;
  line-height: 1.75;
}

.software-hero-visual {
  perspective: 900px;
  min-height: 490px;
  position: relative;
}

.software-hero-stack {
  position: absolute;
  inset: 0;
}

.software-hero-stack:before {
  content: "";
  background: #f2f7fab8;
  border: 1px solid #d9e3e8;
  border-radius: 26px;
  position: absolute;
  inset: 25px 15px 20px 35px;
  transform: rotate(-2deg);
  box-shadow: 0 35px 80px #1b3e531f;
}

.brand-tile {
  z-index: 2;
  background: #fff;
  border: 1px solid #dde5e9;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  padding: 18px;
  transition: transform .25s;
  display: flex;
  position: absolute;
  box-shadow: 0 16px 35px #16374b1a;
}

.brand-tile:hover {
  transform: translateY(-5px)rotate(0) !important;
}

.brand-tile img {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.brand-tile--beeber {
  background: linear-gradient(145deg, #fff, #fbeef5);
  justify-content: flex-start;
  gap: 13px;
  width: 250px;
  height: 145px;
  top: 70px;
  left: 0;
  transform: rotate(-3deg);
}

.brand-tile--beeber img {
  border-radius: 13px;
  width: 55px;
  height: 55px;
}

.brand-tile--beeber strong {
  letter-spacing: -.05em;
  font-size: 36px;
}

.brand-tile--narrow {
  width: 245px;
  height: 120px;
  top: 15px;
  right: 0;
  transform: rotate(2deg);
}

.brand-tile--narrow img {
  width: 185px;
}

.brand-tile--catalog {
  background: #edf6fb;
  width: 230px;
  height: 160px;
  top: 155px;
  right: 15px;
  transform: rotate(-1deg);
}

.brand-tile--catalog img {
  width: 145px;
}

.brand-tile--boky {
  background: #f1edfa;
  width: 245px;
  height: 110px;
  top: 238px;
  left: 45px;
  transform: rotate(2deg);
}

.brand-tile--boky img {
  mix-blend-mode: multiply;
  width: 170px;
}

.brand-tile--party {
  background: #f3effa;
  width: 210px;
  height: 125px;
  bottom: 12px;
  left: 10px;
  transform: rotate(-2deg);
}

.brand-tile--party img {
  height: 90px;
}

.brand-tile--ticket {
  background: #edf3fa;
  width: 260px;
  height: 135px;
  bottom: 0;
  right: 18px;
  transform: rotate(2deg);
}

.brand-tile--ticket img {
  width: 195px;
}

.software-catalogue {
  background: #f4f7f8;
}

.catalogue-grid {
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  display: grid;
}

.catalogue-card {
  background: #fff;
  border: 1px solid #dfe6e9;
  border-radius: 24px;
  flex-direction: column;
  min-height: 520px;
  padding: 44px;
  transition: transform .3s, box-shadow .3s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.catalogue-card:after {
  content: "";
  background: #ffffff57;
  border-radius: 50%;
  width: 190px;
  height: 190px;
  position: absolute;
  bottom: -95px;
  right: -65px;
}

.catalogue-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 60px #1b3e531c;
}

.catalogue-number {
  color: #111a2047;
  letter-spacing: .16em;
  font-size: 9px;
  font-weight: 800;
  position: absolute;
  top: 30px;
  right: 32px;
}

.catalogue-brand {
  align-items: center;
  height: 78px;
  margin-bottom: 26px;
  display: flex;
}

.catalogue-brand img {
  object-fit: contain;
  object-position: left center;
  max-width: 225px;
  max-height: 76px;
  display: block;
}

.catalogue-brand--beeber {
  gap: 13px;
}

.catalogue-brand--beeber img {
  border: 1px solid #eceff1;
  border-radius: 13px;
  width: 55px;
  height: 55px;
}

.catalogue-brand--beeber strong {
  letter-spacing: -.05em;
  font-size: 42px;
}

.catalogue-brand--catalog {
  height: 112px;
  margin-top: -15px;
  margin-bottom: 12px;
}

.catalogue-brand--catalog img {
  width: 180px;
  max-height: 110px;
}

.catalogue-brand--boky img {
  mix-blend-mode: multiply;
  width: 200px;
}

.catalogue-brand--party {
  height: 105px;
  margin-top: -12px;
  margin-bottom: 11px;
}

.catalogue-brand--party img {
  width: 130px;
  max-height: 105px;
}

.catalogue-brand--ticket img {
  width: 215px;
}

.catalogue-category {
  width: max-content;
  color: var(--blue);
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .8;
  border: 1px solid;
  border-radius: 4px;
  margin-bottom: 17px;
  padding: 6px 9px;
  font-size: 7px;
  font-weight: 800;
}

.catalogue-card :is(h2, h3) {
  max-width: 470px;
  margin: 0 0 15px;
  font-size: 35px;
  line-height: 1.08;
}

.catalogue-card p {
  color: #657078;
  max-width: 510px;
  margin: 0 0 24px;
  font-size: 14px;
}

.tag-row {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 30px;
  display: flex;
}

.tag-row span {
  color: #66737b;
  letter-spacing: .04em;
  background: #ffffffa6;
  border: 1px solid #1325311a;
  border-radius: 20px;
  padding: 6px 9px;
  font-size: 7px;
  font-weight: 700;
}

.catalogue-card .card-link {
  z-index: 2;
  margin-top: auto;
  position: relative;
}

.catalogue-card--beeber {
  background: linear-gradient(145deg, #fff, #faedf4);
}

.catalogue-card--beeber .catalogue-category {
  color: #d8006f;
}

.catalogue-card--narrow {
  background: linear-gradient(145deg, #fff, #e7f0f9);
}

.catalogue-card--narrow .catalogue-category {
  color: #2a67b2;
}

.catalogue-card--catalog {
  background: linear-gradient(145deg, #fff, #e5f1f8);
}

.catalogue-card--catalog .catalogue-category {
  color: #1e73a8;
}

.catalogue-card--boky {
  background: linear-gradient(145deg, #fff, #eee9f8);
}

.catalogue-card--boky .catalogue-category {
  color: #4b3294;
}

.catalogue-card--party {
  background: linear-gradient(145deg, #fff, #eeeaf8);
}

.catalogue-card--party .catalogue-category {
  color: #604c9f;
}

.catalogue-card--ticket {
  background: linear-gradient(145deg, #fff, #e7eef8);
}

.catalogue-card--ticket .catalogue-category {
  color: #628ac7;
}

.compact-portfolio {
  background: #fff;
}

.compact-brand-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  display: grid;
}

.compact-brand {
  background: #fff;
  border: 1px solid #dfe6e9;
  border-radius: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
  min-height: 245px;
  padding: 35px;
  transition: transform .25s, box-shadow .25s;
  display: flex;
}

.compact-brand:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px #193a4d1a;
}

.compact-brand img {
  object-fit: contain;
  max-width: 245px;
  max-height: 130px;
  display: block;
}

.compact-brand:first-child img {
  width: 250px;
}

.compact-brand:nth-child(2) img {
  width: 205px;
}

.compact-brand:nth-child(3) img {
  width: 190px;
}

.compact-brand p {
  color: #7a868d;
  margin: 0;
  font-size: 11px;
}

.product-choice {
  background: #fff;
  padding-top: 0;
}

.choice-panel {
  color: #fff;
  background: linear-gradient(130deg, #101b23, #18384c 65%, #226790);
  border-radius: 28px;
  grid-template-columns: 1.2fr .8fr;
  align-items: end;
  gap: 80px;
  padding: 75px;
  display: grid;
}

.choice-panel h2 {
  max-width: 650px;
  margin: 20px 0 0;
  font-size: 49px;
}

.choice-panel p {
  color: #c7d5dd;
  font-size: 15px;
}

.choice-panel .button {
  margin-top: 24px;
}

.custom-blueprint {
  color: #fff;
  background: #111b22;
  border: 1px solid #1e3442;
  border-radius: 23px;
  height: 500px;
  padding: 21px;
  position: relative;
  overflow: hidden;
  transform: rotate(-1deg);
  box-shadow: 0 35px 80px #14324533;
}

.custom-blueprint:before {
  content: "";
  background-image: linear-gradient(#ffffff09 1px, #0000 1px), linear-gradient(90deg, #ffffff09 1px, #0000 1px);
  background-size: 28px 28px;
  position: absolute;
  inset: 0;
}

.blueprint-head, .blueprint-foot {
  z-index: 2;
  align-items: center;
  display: flex;
  position: relative;
}

.blueprint-head {
  color: #78909e;
  border-bottom: 1px solid #ffffff21;
  height: 42px;
}

.blueprint-head > span {
  gap: 5px;
  display: flex;
}

.blueprint-head i {
  background: #526774;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.blueprint-head i:first-child {
  background: var(--blue);
}

.blueprint-head small {
  letter-spacing: .15em;
  margin-left: 13px;
  font-size: 6px;
}

.blueprint-head b {
  color: #4fbd88;
  letter-spacing: .15em;
  margin-left: auto;
  font-size: 6px;
}

.blueprint-canvas {
  z-index: 2;
  height: 360px;
  position: relative;
}

.blueprint-node {
  background: #17262f;
  border: 1px solid #ffffff1f;
  width: 195px;
  padding: 22px;
  position: absolute;
}

.blueprint-node small, .blueprint-node strong, .blueprint-node span {
  display: block;
}

.blueprint-node small {
  color: #77909f;
  letter-spacing: .14em;
  margin-bottom: 13px;
  font-size: 6px;
}

.blueprint-node strong {
  font-size: 19px;
}

.blueprint-node span {
  color: #80929d;
  margin-top: 9px;
  font-size: 7px;
}

.node-question {
  top: 72px;
  left: 18px;
}

.node-solution {
  background: #18384c;
  border-color: #2c86c780;
  top: 72px;
  right: 18px;
}

.node-solution:after {
  content: "";
  background: var(--blue);
  width: 7px;
  height: 7px;
  position: absolute;
  top: 13px;
  right: 13px;
  box-shadow: 10px 0 #2c86c74d, 0 10px #ffffff26;
}

.blueprint-route {
  height: 50px;
  position: absolute;
  top: 122px;
  left: 225px;
  right: 225px;
}

.blueprint-route:before {
  content: "";
  background: #365160;
  height: 1px;
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
}

.blueprint-route i {
  background: #4b6472;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 21px;
}

.blueprint-route i:first-child {
  left: 0;
}

.blueprint-route i:nth-child(2) {
  background: var(--blue);
  left: 25%;
}

.blueprint-route i:nth-child(3) {
  left: 50%;
}

.blueprint-route i:nth-child(4) {
  background: var(--blue);
  left: 75%;
}

.blueprint-route i:nth-child(5) {
  right: 0;
}

.blueprint-modules {
  gap: 8px;
  display: flex;
  position: absolute;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
}

.blueprint-modules span {
  color: #78909e;
  background: #14242d;
  border: 1px solid #314a59;
  place-items: center;
  width: 55px;
  height: 55px;
  font-size: 7px;
  font-weight: 800;
  display: grid;
}

.blueprint-modules span:nth-child(2) {
  border-color: var(--blue);
  color: #fff;
  background: #1e668f;
}

.blueprint-foot {
  color: #5e7582;
  letter-spacing: .13em;
  border-top: 1px solid #ffffff21;
  justify-content: space-between;
  height: 51px;
  font-size: 5px;
  font-weight: 800;
}

.custom-signals {
  background: #f4f7f8;
}

.signal-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  display: grid;
}

.signal-card {
  background: #fff;
  border: 1px solid #dce4e8;
  border-radius: 19px;
  min-height: 330px;
  padding: 38px;
}

.signal-card > span {
  width: 42px;
  height: 42px;
  color: var(--blue);
  border: 1px solid #ccd8de;
  border-radius: 50%;
  place-items: center;
  font-size: 8px;
  font-weight: 800;
  display: grid;
}

.signal-card h3 {
  margin: 50px 0 17px;
  font-size: 27px;
}

.signal-card p {
  color: #68757c;
  font-size: 13px;
}

.build-types {
  background: #fff;
}

.build-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  display: grid;
}

.build-card {
  background: #f7f9fa;
  border: 1px solid #dfe6e9;
  border-radius: 21px;
  min-height: 535px;
  padding: 37px;
  position: relative;
  overflow: hidden;
}

.build-label {
  color: #829098;
  letter-spacing: .14em;
  font-size: 7px;
  font-weight: 800;
  position: absolute;
  top: 24px;
  right: 25px;
}

.build-card h3 {
  margin: 35px 0 15px;
  font-size: 29px;
}

.build-card p {
  color: #68747b;
  font-size: 13px;
}

.build-card ul {
  border-top: 1px solid #dbe3e7;
  margin: 30px 0 0;
  padding: 22px 0 0;
  list-style: none;
}

.build-card li {
  color: #536169;
  margin: 11px 0;
  padding-left: 18px;
  font-size: 11px;
  position: relative;
}

.build-card li:before {
  content: "";
  background: var(--blue);
  width: 6px;
  height: 6px;
  position: absolute;
  top: 6px;
  left: 0;
}

.build-icon {
  background: #fff;
  border: 1px solid #d8e3e8;
  border-radius: 12px;
  align-items: end;
  gap: 8px;
  height: 145px;
  padding: 23px;
  display: flex;
}

.build-icon i {
  background: #c8dfec;
  flex: 1;
  height: 60%;
}

.build-icon i:nth-child(2) {
  background: var(--blue);
  height: 100%;
}

.build-icon i:nth-child(3) {
  background: #15232c;
  height: 42%;
}

.build-phone {
  background: #fff;
  border: 5px solid #17232b;
  border-radius: 20px;
  width: 105px;
  height: 155px;
  margin: auto;
  padding: 30px 12px 12px;
  transform: rotate(4deg);
  box-shadow: 0 17px 30px #21425524;
}

.build-phone i {
  background: #17232b;
  border-radius: 6px;
  width: 32px;
  height: 7px;
  position: absolute;
  top: 10px;
  left: 34px;
}

.build-phone span {
  background: #d7e8f2;
  border-radius: 5px;
  height: 25px;
  margin-bottom: 7px;
  display: block;
}

.build-phone span:nth-of-type(2) {
  background: #77b9df;
}

.build-phone span:nth-of-type(3) {
  width: 65%;
}

.build-nodes {
  height: 145px;
  position: relative;
}

.build-nodes i {
  z-index: 2;
  background: #172630;
  border: 5px solid #fff;
  border-radius: 8px;
  width: 34px;
  height: 34px;
  position: absolute;
  box-shadow: 0 8px 20px #1a37481f;
}

.build-nodes i:first-child {
  background: var(--blue);
  top: 0;
  left: calc(50% - 17px);
}

.build-nodes i:nth-child(2) {
  top: 55px;
  left: 15px;
}

.build-nodes i:nth-child(3) {
  top: 55px;
  right: 15px;
}

.build-nodes i:nth-child(4) {
  bottom: 0;
  left: calc(50% - 17px);
}

.build-nodes svg {
  fill: none;
  stroke: #8aa5b5;
  stroke-width: 2px;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.custom-process {
  background: #f4f7f8;
}

.process-rail {
  border-top: 1px solid #cfd9de;
}

.process-phase {
  border-bottom: 1px solid #cfd9de;
  grid-template-columns: 90px 1fr;
  padding: 38px 0;
  display: grid;
}

.phase-num {
  width: 50px;
  height: 50px;
  color: var(--blue);
  border: 1px solid #c9d5db;
  border-radius: 50%;
  place-items: center;
  font-size: 8px;
  font-weight: 800;
  display: grid;
}

.process-phase > div {
  grid-template-columns: 130px 1.2fr 1fr;
  align-items: start;
  gap: 35px;
  display: grid;
}

.process-phase small {
  color: var(--blue);
  letter-spacing: .13em;
  text-transform: uppercase;
  padding-top: 8px;
  font-size: 8px;
  font-weight: 800;
}

.process-phase h3 {
  margin: 0;
  font-size: 28px;
}

.process-phase p {
  color: #68747b;
  margin: 0;
  font-size: 13px;
}

.custom-principles {
  background: #f4f7f8;
  padding-top: 0;
}

.principles-panel {
  color: #fff;
  background: linear-gradient(135deg, #101b23, #17384c);
  border-radius: 28px;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  padding: 75px;
  display: grid;
}

.principles-intro h2 {
  margin: 20px 0 0;
  font-size: 46px;
}

:is(.principle-list > div:not(.ds-repeat), .principle-list > .ds-repeat > div) {
  border-bottom: 1px solid #ffffff21;
  grid-template-columns: 36px 1fr 1.2fr;
  gap: 18px;
  padding: 22px 0;
  display: grid;
}

:is(.principle-list > div:not(.ds-repeat), .principle-list > .ds-repeat > div):first-child {
  padding-top: 0;
}

.principle-list span {
  color: #6fc2f2;
  font-size: 7px;
}

.principle-list strong {
  font-size: 14px;
}

.principle-list p {
  color: #9db1bd;
  margin: 0;
  font-size: 11px;
}

@media (max-width: 1120px) {
  .page-hero-layout {
    grid-template-columns: 1fr 1fr;
    gap: 35px;
  }

  .page-hero-copy h1 {
    font-size: 61px;
  }

  .software-hero-visual {
    transform-origin: center;
    transform: scale(.87);
  }

  .choice-panel, .principles-panel {
    gap: 45px;
    padding: 60px;
  }
}

@media (max-width: 900px) {
  .page-hero {
    min-height: auto;
    padding: 150px 0 90px;
  }

  .page-hero-layout {
    grid-template-columns: 1fr;
  }

  .page-hero-copy {
    max-width: 720px;
  }

  .software-hero-visual {
    width: 620px;
    max-width: 100%;
    margin: 20px auto 0;
    transform: none;
  }

  .custom-blueprint {
    margin-top: 25px;
  }

  .catalogue-grid, .compact-brand-grid, .signal-grid, .build-grid {
    grid-template-columns: 1fr;
  }

  .compact-brand {
    min-height: 210px;
  }

  .signal-card {
    min-height: 280px;
  }

  .build-card {
    min-height: auto;
  }

  .choice-panel, .principles-panel {
    grid-template-columns: 1fr;
  }

  .process-phase > div {
    grid-template-columns: 110px 1fr;
  }

  .process-phase p {
    grid-column: 2;
  }

  .footer-top {
    margin-top: 0;
  }
}

@media (max-width: 620px) {
  .page-hero {
    padding: 120px 0 70px;
  }

  .page-hero-layout, .page-hero-copy {
    width: 100%;
    min-width: 0;
  }

  .page-hero-copy h1 {
    max-width: 100%;
    font-size: 46px;
  }

  .page-hero-copy > p {
    max-width: 100%;
    font-size: 16px;
  }

  .page-hero-copy .button-row {
    flex-direction: column;
  }

  .page-hero-copy .button {
    width: 100%;
  }

  .software-hero-visual {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 275px;
    margin: 20px 0 0;
    transform: none;
  }

  .software-hero-stack {
    transform-origin: 0 0;
    width: 610px;
    height: 500px;
    inset: auto;
    transform: scale(.53);
  }

  .brand-tile--catalog, .brand-tile--ticket {
    right: 35px;
  }

  .catalogue-card {
    min-height: 560px;
    padding: 32px;
  }

  .catalogue-card :is(h2, h3) {
    font-size: 30px;
  }

  .compact-brand {
    padding: 28px;
  }

  .choice-panel, .principles-panel {
    padding: 45px 28px;
  }

  .choice-panel h2, .principles-intro h2 {
    font-size: 37px;
  }

  .custom-blueprint {
    height: 430px;
    padding: 15px;
    transform: none;
  }

  .blueprint-node {
    width: 128px;
    padding: 14px;
  }

  .node-question {
    left: 5px;
  }

  .node-solution {
    right: 5px;
  }

  .blueprint-node strong {
    font-size: 13px;
  }

  .blueprint-node span {
    font-size: 6px;
  }

  .blueprint-route {
    left: 133px;
    right: 133px;
  }

  .blueprint-modules span {
    width: 45px;
    height: 45px;
  }

  .signal-card, .build-card {
    padding: 30px;
  }

  .process-phase {
    grid-template-columns: 58px 1fr;
  }

  .process-phase > div {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .process-phase p {
    grid-column: 1;
  }

  :is(.principle-list > div:not(.ds-repeat), .principle-list > .ds-repeat > div) {
    grid-template-columns: 30px 1fr;
  }

  .principle-list p {
    grid-column: 2;
  }
}

.connection-console {
  color: #fff;
  background: #101b22;
  border: 1px solid #1e3442;
  border-radius: 23px;
  height: 500px;
  padding: 21px;
  position: relative;
  overflow: hidden;
  transform: rotate(.7deg);
  box-shadow: 0 35px 80px #14324533;
}

.connection-console:before {
  content: "";
  background-image: linear-gradient(#ffffff09 1px, #0000 1px), linear-gradient(90deg, #ffffff09 1px, #0000 1px);
  background-size: 28px 28px;
  position: absolute;
  inset: 0;
}

.connection-console-head, .connection-console-foot {
  z-index: 3;
  color: #728896;
  align-items: center;
  display: flex;
  position: relative;
}

.connection-console-head {
  border-bottom: 1px solid #ffffff21;
  height: 42px;
}

.connection-console-head > span {
  gap: 5px;
  display: flex;
}

.connection-console-head > span i {
  background: #526774;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.connection-console-head > span i:first-child {
  background: var(--blue);
}

.connection-console-head small {
  letter-spacing: .15em;
  margin-left: 13px;
  font-size: 6px;
}

.connection-console-head b {
  color: #72c99f;
  letter-spacing: .14em;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 6px;
  display: flex;
}

.connection-console-head b i {
  background: #4fbd88;
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 4px #4fbd881a;
}

.connection-canvas {
  z-index: 2;
  height: 365px;
  position: relative;
}

.connection-route {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.connection-route path {
  fill: none;
  stroke: #3d6175;
  stroke-width: 1.5px;
  stroke-dasharray: 5 7;
}

.connection-route .route-mid {
  stroke: #2c86c7;
}

.connection-route circle {
  fill: #63bce9;
}

.connection-system, .connection-hub {
  background: #17262ff0;
  border: 1px solid #ffffff1f;
  flex-direction: column;
  justify-content: center;
  display: flex;
  position: absolute;
}

.connection-system {
  width: 145px;
  height: 82px;
  padding: 15px 18px;
}

.connection-system small {
  color: #68818f;
  letter-spacing: .14em;
  font-size: 5px;
}

.connection-system strong {
  font-size: 17px;
}

.connection-system span {
  color: #7c909b;
  font-size: 6px;
}

.connection-system--crm {
  top: 50px;
  left: 10px;
}

.connection-system--erp {
  bottom: 30px;
  left: 10px;
}

.connection-system--web {
  top: 50px;
  right: 10px;
}

.connection-system--app {
  bottom: 30px;
  right: 10px;
}

.connection-hub {
  background: linear-gradient(145deg, #183d54, #122a38);
  border-color: #58b1e68c;
  align-items: center;
  width: 180px;
  height: 135px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 45px #2c86c730;
}

.connection-hub strong {
  font-size: 18px;
}

.connection-hub span {
  color: #7892a0;
  margin-top: 5px;
  font-size: 6px;
}

.connection-hub-mark {
  width: 38px;
  height: 28px;
  margin-bottom: 8px;
  position: relative;
}

.connection-hub-mark i {
  background: #fff;
  width: 7px;
  height: 7px;
  position: absolute;
}

.connection-hub-mark i:first-child {
  top: 0;
  left: 0;
}

.connection-hub-mark i:nth-child(2) {
  background: var(--blue-bright);
  top: 7px;
  left: 13px;
}

.connection-hub-mark i:nth-child(3) {
  bottom: 0;
  left: 0;
}

.connection-hub-mark i:nth-child(4) {
  top: 0;
  right: 0;
}

.connection-hub-mark i:nth-child(5) {
  background: var(--blue-bright);
  bottom: 0;
  right: 0;
}

.data-pulse {
  background: #6fc5ff;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
  box-shadow: 0 0 0 5px #6fc5ff14;
}

.data-pulse--one {
  animation: 3s ease-in-out infinite pulseMove;
  top: 88px;
  left: 27%;
}

.data-pulse--two {
  animation: 3.4s ease-in-out infinite reverse pulseMove;
  bottom: 69px;
  right: 27%;
}

@keyframes pulseMove {
  50% {
    opacity: .4;
    transform: translateX(55px);
  }
}

.connection-console-foot {
  letter-spacing: .13em;
  border-top: 1px solid #ffffff21;
  justify-content: space-between;
  height: 51px;
  font-size: 5px;
  font-weight: 800;
}

.connection-signals {
  background: #f4f7f8;
}

.connection-types {
  background: #fff;
}

.connector-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  display: grid;
}

.connector-card {
  background: #f7f9fa;
  border: 1px solid #dfe6e9;
  border-radius: 21px;
  min-height: 470px;
  padding: 37px;
  position: relative;
  overflow: hidden;
}

.connector-label {
  color: #829098;
  letter-spacing: .14em;
  font-size: 7px;
  font-weight: 800;
  position: absolute;
  top: 24px;
  right: 25px;
}

.connector-card h3 {
  margin: 36px 0 15px;
  font-size: 29px;
}

.connector-card p {
  color: #68747b;
  font-size: 13px;
}

.connector-visual {
  background: #fff;
  border: 1px solid #d9e3e8;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  height: 190px;
  margin-top: 20px;
  display: flex;
}

.connector-visual--api {
  gap: 25px;
}

.connector-visual--api > b {
  color: #9bb2bf;
  font-size: 68px;
  font-weight: 300;
}

.connector-visual--api span {
  flex-direction: column;
  gap: 9px;
  display: flex;
}

.connector-visual--api i {
  background: #c8dce8;
  width: 65px;
  height: 7px;
  display: block;
}

.connector-visual--api i:nth-child(2) {
  background: var(--blue);
  width: 90px;
}

.connector-visual--sync {
  gap: 17px;
}

.connector-visual--sync span {
  color: #476879;
  border: 1px solid #c8d7df;
  border-radius: 11px;
  place-items: center;
  width: 62px;
  height: 62px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.connector-visual--sync i {
  color: #fff;
  background: var(--blue);
  border-radius: 50%;
  place-items: center;
  width: 62px;
  height: 62px;
  font-size: 26px;
  font-style: normal;
  display: grid;
}

.connector-visual--flow {
  gap: 0;
}

.connector-visual--flow span {
  background: #eaf3f8;
  border: 1px solid #bed2dd;
  border-radius: 9px;
  width: 48px;
  height: 48px;
}

.connector-visual--flow span:last-child {
  background: #17384c;
  border-color: #17384c;
}

.connector-visual--flow i {
  background: #8aa8b8;
  width: 34px;
  height: 1px;
}

.connector-visual--flow i:after {
  content: "";
  border-top: 1px solid #8aa8b8;
  border-right: 1px solid #8aa8b8;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 28px;
  display: block;
  transform: rotate(45deg);
}

.data-journey {
  background: #fff;
  padding-top: 0;
}

.data-journey-panel {
  color: #fff;
  background: linear-gradient(135deg, #101b23, #17384c);
  border-radius: 28px;
  grid-template-columns: .8fr 1.2fr;
  gap: 85px;
  padding: 75px;
  display: grid;
}

.data-journey-copy h2 {
  margin: 22px 0 20px;
  font-size: 45px;
}

.data-journey-copy p {
  color: #9fb4c0;
  font-size: 14px;
}

.data-journey-track {
  border-top: 1px solid #ffffff24;
  margin: 0;
  padding: 0;
  list-style: none;
}

.data-journey-track li {
  border-bottom: 1px solid #ffffff24;
  grid-template-columns: 46px 1fr;
  padding: 20px 0;
  display: grid;
  position: relative;
}

.data-journey-track li > span {
  color: #6fc2f2;
  font-size: 7px;
}

.data-journey-track strong, .data-journey-track small {
  display: block;
}

.data-journey-track strong {
  font-size: 14px;
}

.data-journey-track small {
  color: #8fa6b3;
  margin-top: 4px;
  font-size: 9px;
}

.connection-assurance {
  background: #f4f7f8;
  padding-top: 0;
}

.assurance-panel {
  color: #fff;
  background: linear-gradient(130deg, #12374e, #1e6e9d);
  border-radius: 28px;
  grid-template-columns: 1.05fr .95fr;
  gap: 80px;
  padding: 72px;
  display: grid;
}

.assurance-panel h2 {
  margin: 22px 0 0;
  font-size: 44px;
}

.assurance-list {
  border-top: 1px solid #ffffff2e;
}

:is(.assurance-list > div:not(.ds-repeat), .assurance-list > .ds-repeat > div) {
  border-bottom: 1px solid #ffffff2e;
  grid-template-columns: 45px 1fr;
  gap: 15px;
  padding: 22px 0;
  display: grid;
}

.assurance-list span {
  color: #9edcff;
  font-size: 7px;
}

.assurance-list strong {
  font-size: 13px;
}

@media (max-width: 1120px) {
  .connection-console {
    transform-origin: center;
    transform: scale(.9);
  }

  .data-journey-panel, .assurance-panel {
    gap: 45px;
    padding: 60px;
  }
}

@media (max-width: 900px) {
  .connection-console {
    margin-top: 25px;
    transform: none;
  }

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

  .connector-card {
    min-height: auto;
  }

  .data-journey-panel, .assurance-panel {
    grid-template-columns: 1fr;
  }

  .data-journey-copy {
    max-width: 620px;
  }
}

@media (max-width: 620px) {
  .connection-console {
    height: 410px;
    margin-top: 25px;
    padding: 14px;
  }

  .connection-console-head small, .connection-console-head b {
    font-size: 5px;
  }

  .connection-canvas {
    height: 300px;
  }

  .connection-system {
    width: 95px;
    height: 66px;
    padding: 10px;
  }

  .connection-system small {
    font-size: 4px;
  }

  .connection-system strong {
    font-size: 13px;
  }

  .connection-system span {
    font-size: 5px;
  }

  .connection-system--crm {
    top: 35px;
    left: 0;
  }

  .connection-system--erp {
    bottom: 25px;
    left: 0;
  }

  .connection-system--web {
    top: 35px;
    right: 0;
  }

  .connection-system--app {
    bottom: 25px;
    right: 0;
  }

  .connection-hub {
    width: 122px;
    height: 105px;
  }

  .connection-hub strong {
    font-size: 14px;
  }

  .connection-hub span {
    text-align: center;
    max-width: 95px;
  }

  .connection-route {
    width: 110%;
    inset: 0 -5%;
  }

  .data-pulse {
    display: none;
  }

  .connection-console-foot {
    height: 40px;
  }

  .connection-console-foot span:nth-child(2) {
    display: none;
  }

  .connector-card {
    padding: 30px;
  }

  .connector-visual {
    height: 165px;
  }

  .data-journey-panel, .assurance-panel {
    padding: 45px 28px;
  }

  .data-journey-copy h2, .assurance-panel h2 {
    font-size: 36px;
  }

  .assurance-panel {
    gap: 40px;
  }
}

.about-workbench {
  color: #fff;
  background: #101b22;
  border: 1px solid #1f3441;
  border-radius: 23px;
  height: 500px;
  padding: 21px;
  position: relative;
  overflow: hidden;
  transform: rotate(-.7deg);
  box-shadow: 0 35px 80px #14324533;
}

.about-workbench:before {
  content: "";
  background-image: linear-gradient(#ffffff09 1px, #0000 1px), linear-gradient(90deg, #ffffff09 1px, #0000 1px);
  background-size: 28px 28px;
  position: absolute;
  inset: 0;
}

.workbench-head, .workbench-foot {
  z-index: 3;
  color: #728896;
  align-items: center;
  display: flex;
  position: relative;
}

.workbench-head {
  border-bottom: 1px solid #ffffff21;
  height: 42px;
}

.workbench-head > span {
  gap: 5px;
  display: flex;
}

.workbench-head > span i {
  background: #526774;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.workbench-head > span i:first-child {
  background: var(--blue);
}

.workbench-head small {
  letter-spacing: .15em;
  margin-left: 13px;
  font-size: 6px;
}

.workbench-head b {
  color: #7694a5;
  letter-spacing: .15em;
  margin-left: auto;
  font-size: 5px;
}

.workbench-question {
  z-index: 3;
  background: #173a4f;
  border: 1px solid #65bcf07a;
  width: 310px;
  padding: 24px;
  position: absolute;
  top: 95px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 40px #2c86c726;
}

.workbench-question small, .workbench-question strong, .workbench-question span {
  display: block;
}

.workbench-question small {
  color: #76b9df;
  letter-spacing: .14em;
  font-size: 6px;
}

.workbench-question strong {
  margin-top: 7px;
  font-size: 21px;
}

.workbench-question span {
  color: #87a1b0;
  margin-top: 6px;
  font-size: 7px;
}

.workbench-line {
  z-index: 2;
  border-top: 1px solid #345363;
  height: 75px;
  position: absolute;
  top: 216px;
  left: 10%;
  right: 10%;
}

.workbench-line:before {
  content: "";
  background: #345363;
  width: 1px;
  height: 75px;
  position: absolute;
  top: -75px;
  left: 50%;
}

.workbench-line:after {
  content: "";
  background: #345363;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.workbench-line i {
  background: #5b7a8b;
  width: 7px;
  height: 7px;
  position: absolute;
  bottom: -3px;
}

.workbench-line i:first-child {
  left: 0;
}

.workbench-line i:nth-child(2) {
  background: var(--blue);
  left: 50%;
}

.workbench-line i:nth-child(3) {
  right: 0;
}

.workbench-outcomes {
  z-index: 3;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  display: grid;
  position: absolute;
  top: 290px;
  left: 22px;
  right: 22px;
}

.workbench-outcomes a {
  background: #17262f;
  border: 1px solid #ffffff1f;
  min-height: 115px;
  padding: 16px;
  transition: all .25s;
}

.workbench-outcomes a:hover {
  background: #193649;
  border-color: #4e9dcc;
  transform: translateY(-3px);
}

.workbench-outcomes span, .workbench-outcomes strong, .workbench-outcomes small {
  display: block;
}

.workbench-outcomes span {
  color: #668393;
  letter-spacing: .13em;
  font-size: 5px;
}

.workbench-outcomes strong {
  margin-top: 15px;
  font-size: 15px;
}

.workbench-outcomes small {
  color: #78909d;
  margin-top: 7px;
  font-size: 6px;
  line-height: 1.45;
}

.workbench-foot {
  letter-spacing: .13em;
  border-top: 1px solid #ffffff21;
  gap: 12px;
  height: 51px;
  font-size: 5px;
  font-weight: 800;
  position: absolute;
  bottom: 0;
  left: 21px;
  right: 21px;
}

.workbench-foot i {
  background: #334c5b;
  flex: 1;
  height: 1px;
}

.about-statement {
  background: #f4f7f8;
}

.about-statement-grid {
  grid-template-columns: 1fr .9fr;
  align-items: start;
  gap: 110px;
  display: grid;
}

.about-statement-title h2 {
  margin: 22px 0 0;
  font-size: 56px;
}

.about-statement-copy {
  padding-top: 41px;
}

.about-statement-copy p {
  color: #5e6c74;
  font-size: 17px;
  line-height: 1.85;
}

.about-statement-copy p + p {
  margin-top: 24px;
}

.about-routes {
  background: #fff;
}

.about-route-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  display: grid;
}

.about-route-card {
  background: #f7f9fa;
  border: 1px solid #dce4e8;
  border-radius: 21px;
  flex-direction: column;
  min-height: 470px;
  padding: 38px;
  transition: transform .25s, box-shadow .25s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.about-route-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 55px #193a4d1c;
}

.about-route-card--dark {
  color: #fff;
  background: #111c23;
}

.about-route-num {
  color: #99a8b0;
  letter-spacing: .14em;
  font-size: 7px;
  position: absolute;
  top: 27px;
  right: 27px;
}

.about-route-mark {
  height: 155px;
  margin: 18px 0 35px;
  position: relative;
}

.about-route-card > small {
  color: var(--blue);
  letter-spacing: .13em;
  text-transform: uppercase;
  font-size: 7px;
  font-weight: 800;
}

.about-route-card h3 {
  margin: 12px 0 13px;
  font-size: 29px;
}

.about-route-card p {
  color: #6d7880;
  font-size: 13px;
}

.about-route-card--dark p {
  color: #9db0ba;
}

.about-route-card > b {
  margin-top: auto;
  font-size: 11px;
}

.about-route-mark--product i {
  background: #d9eaf4;
  width: 52px;
  height: 52px;
  position: absolute;
}

.about-route-mark--product i:first-child {
  background: var(--blue);
  top: 15px;
  left: 17%;
}

.about-route-mark--product i:nth-child(2) {
  background: #a7d0e7;
  top: 48px;
  left: 43%;
}

.about-route-mark--product i:nth-child(3) {
  background: #172832;
  top: 4px;
  right: 12%;
}

.about-route-mark--product i:nth-child(4) {
  background: #6aafda;
  bottom: 0;
  right: 26%;
}

.about-route-mark--custom i {
  background: #172832;
  border: 1px solid #527184;
  width: 65px;
  height: 65px;
  position: absolute;
  transform: rotate(45deg);
}

.about-route-mark--custom i:first-child {
  top: 20px;
  left: 18%;
}

.about-route-mark--custom i:nth-child(2) {
  background: #1e668f;
  border-color: #2c86c7;
  top: 55px;
  left: 42%;
}

.about-route-mark--custom i:nth-child(3) {
  top: 8px;
  right: 15%;
}

.about-route-mark--connect {
  justify-content: center;
  align-items: center;
  display: flex;
}

.about-route-mark--connect i {
  background: #17384c;
  border: 7px solid #fff;
  border-radius: 13px;
  width: 57px;
  height: 57px;
  box-shadow: 0 10px 25px #193d5226;
}

.about-route-mark--connect i:last-child {
  background: var(--blue);
}

.about-route-mark--connect span {
  background: #90abba;
  width: 90px;
  height: 1px;
  position: relative;
}

.about-route-mark--connect span:before, .about-route-mark--connect span:after {
  content: "";
  background: #90abba;
  width: 9px;
  height: 9px;
  position: absolute;
  top: -4px;
}

.about-route-mark--connect span:before {
  left: 20px;
}

.about-route-mark--connect span:after {
  background: var(--blue);
  right: 20px;
}

.about-principles {
  background: #f4f7f8;
}

.about-principles-grid {
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 100px;
  display: grid;
}

.about-sculpture {
  background: linear-gradient(145deg, #dcebf3, #f7fafc);
  border-radius: 25px;
  height: 560px;
  position: relative;
  overflow: hidden;
}

.about-sculpture-grid {
  background-image: linear-gradient(#2c86c71c 1px, #0000 1px), linear-gradient(90deg, #2c86c71c 1px, #0000 1px);
  background-size: 43px 43px;
  position: absolute;
  inset: 0;
  transform: perspective(450px)rotateX(54deg)scale(1.5)translateY(145px);
}

.about-shape {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(135deg, #58a6d8, #1d6fa8);
  width: 105px;
  height: 105px;
  position: absolute;
  box-shadow: inset -15px -15px 24px #06365738;
}

.about-shape--one {
  top: 15%;
  left: 17%;
  transform: rotate(-12deg);
}

.about-shape--two {
  width: 145px;
  height: 145px;
  top: 28%;
  left: 43%;
  transform: rotate(9deg);
}

.about-shape--three {
  opacity: .62;
  width: 75px;
  height: 75px;
  top: 10%;
  right: 8%;
}

.about-shape--four {
  opacity: .78;
  width: 85px;
  height: 85px;
  bottom: 18%;
  left: 18%;
}

.about-shape--five {
  width: 115px;
  height: 115px;
  bottom: 12%;
  right: 13%;
  transform: rotate(-8deg);
}

.about-sculpture > span {
  color: #52758a;
  letter-spacing: .14em;
  font-size: 7px;
  font-weight: 800;
  position: absolute;
  bottom: 24px;
  left: 27px;
}

.about-principles-copy h2 {
  margin: 22px 0 38px;
  font-size: 48px;
}

.about-principle-list {
  border-top: 1px solid #ccd8de;
}

:is(.about-principle-list > div:not(.ds-repeat), .about-principle-list > .ds-repeat > div) {
  border-bottom: 1px solid #ccd8de;
  grid-template-columns: 48px 155px 1fr;
  gap: 20px;
  padding: 24px 0;
  display: grid;
}

.about-principle-list span {
  color: var(--blue);
  padding-top: 3px;
  font-size: 7px;
}

.about-principle-list strong {
  font-size: 14px;
}

.about-principle-list p {
  color: #68757c;
  margin: 0;
  font-size: 11px;
}

.about-place {
  background: #f4f7f8;
  padding-top: 0;
}

.place-panel {
  color: #fff;
  background: #101b22;
  border-radius: 28px;
  grid-template-columns: 1.1fr .9fr;
  min-height: 560px;
  display: grid;
  overflow: hidden;
}

.place-map {
  position: relative;
  overflow: hidden;
}

.place-map-grid {
  background-image: linear-gradient(#6fc5ff1a 1px, #0000 1px), linear-gradient(90deg, #6fc5ff1a 1px, #0000 1px);
  background-size: 42px 42px;
  position: absolute;
  inset: -20%;
  transform: rotate(-7deg);
}

.place-marker {
  background: #183d53bf;
  border: 1px solid #6ec5ff73;
  border-radius: 50%;
  place-items: center;
  width: 86px;
  height: 86px;
  display: grid;
  position: absolute;
  top: 45%;
  left: 48%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 38px #378fc40d, 0 0 0 76px #378fc408;
}

.place-marker i {
  background: var(--blue-bright);
  width: 13px;
  height: 13px;
  box-shadow: 0 0 0 7px #6fc5ff1a;
}

.place-marker span {
  color: #7295a9;
  letter-spacing: .13em;
  text-align: center;
  width: 100px;
  font-size: 6px;
  position: absolute;
  top: 105px;
}

.place-pixels i {
  background: #fff;
  width: 11px;
  height: 11px;
  position: absolute;
}

.place-pixels i:first-child {
  top: 17%;
  left: 12%;
}

.place-pixels i:nth-child(2) {
  background: var(--blue);
  top: 22%;
  left: 18%;
}

.place-pixels i:nth-child(3) {
  top: 27%;
  left: 12%;
}

.place-pixels i:nth-child(4) {
  bottom: 18%;
  right: 15%;
}

.place-pixels i:nth-child(5) {
  background: var(--blue);
  bottom: 24%;
  right: 21%;
}

.place-pixels i:nth-child(6) {
  bottom: 30%;
  right: 15%;
}

.place-copy {
  background: linear-gradient(145deg, #17384c, #205f86);
  flex-direction: column;
  justify-content: center;
  padding: 70px;
  display: flex;
}

.place-copy h2 {
  margin: 23px 0;
  font-size: 43px;
}

.place-copy p {
  color: #b8cad4;
  font-size: 14px;
}

.place-copy .button {
  width: max-content;
  margin-top: 20px;
}

@media (max-width: 1120px) {
  .about-workbench {
    transform-origin: center;
    transform: scale(.9);
  }

  .about-statement-grid {
    gap: 60px;
  }

  .about-route-card {
    padding: 32px;
  }

  .about-principles-grid {
    gap: 55px;
  }

  .place-copy {
    padding: 55px;
  }
}

@media (max-width: 900px) {
  .about-workbench {
    margin-top: 25px;
    transform: none;
  }

  .about-statement-grid, .about-principles-grid {
    grid-template-columns: 1fr;
  }

  .about-statement-copy {
    padding-top: 0;
  }

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

  .about-route-card {
    min-height: 410px;
  }

  .about-principles-copy {
    order: -1;
  }

  .about-sculpture {
    height: 470px;
  }

  .place-panel {
    grid-template-columns: 1fr;
  }

  .place-map {
    min-height: 430px;
  }

  .place-copy {
    padding: 60px;
  }
}

@media (max-width: 620px) {
  .about-workbench {
    height: 440px;
    padding: 14px;
  }

  .workbench-head small {
    font-size: 5px;
  }

  .workbench-head b {
    display: none;
  }

  .workbench-question {
    width: 230px;
    padding: 18px;
    top: 80px;
  }

  .workbench-question strong {
    font-size: 17px;
  }

  .workbench-line {
    height: 55px;
    top: 184px;
    left: 6%;
    right: 6%;
  }

  .workbench-line:before {
    height: 55px;
    top: -55px;
  }

  .workbench-outcomes {
    gap: 5px;
    top: 245px;
    left: 8px;
    right: 8px;
  }

  .workbench-outcomes a {
    min-height: 125px;
    padding: 11px;
  }

  .workbench-outcomes strong {
    font-size: 12px;
  }

  .workbench-outcomes small {
    font-size: 5px;
  }

  .workbench-foot {
    height: 38px;
    left: 14px;
    right: 14px;
  }

  .about-statement-title h2 {
    font-size: 40px;
  }

  .about-statement-copy p {
    font-size: 15px;
  }

  .about-route-card {
    min-height: 420px;
    padding: 30px;
  }

  .about-principles-copy h2 {
    font-size: 38px;
  }

  :is(.about-principle-list > div:not(.ds-repeat), .about-principle-list > .ds-repeat > div) {
    grid-template-columns: 32px 1fr;
    gap: 10px;
  }

  .about-principle-list p {
    grid-column: 2;
  }

  .about-sculpture {
    height: 390px;
  }

  .about-shape--two {
    left: 35%;
  }

  .place-map {
    min-height: 340px;
  }

  .place-copy {
    padding: 45px 28px;
  }

  .place-copy h2 {
    font-size: 36px;
  }

  .place-copy .button {
    width: 100%;
  }
}

.contact-card {
  color: #fff;
  background: #101b22;
  border: 1px solid #1f3441;
  border-radius: 23px;
  height: 500px;
  padding: 21px;
  position: relative;
  overflow: hidden;
  transform: rotate(.7deg);
  box-shadow: 0 35px 80px #14324533;
}

.contact-card-grid {
  background-image: linear-gradient(#ffffff09 1px, #0000 1px), linear-gradient(90deg, #ffffff09 1px, #0000 1px);
  background-size: 28px 28px;
  position: absolute;
  inset: 0;
}

.contact-card-head {
  z-index: 2;
  color: #728896;
  border-bottom: 1px solid #ffffff21;
  align-items: center;
  height: 42px;
  display: flex;
  position: relative;
}

.contact-card-head > span {
  gap: 5px;
  display: flex;
}

.contact-card-head > span i {
  background: #526774;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.contact-card-head > span i:first-child {
  background: var(--blue);
}

.contact-card-head small {
  letter-spacing: .15em;
  margin-left: 13px;
  font-size: 6px;
}

.contact-card-head b {
  color: #70c99d;
  letter-spacing: .14em;
  margin-left: auto;
  font-size: 6px;
}

.contact-card-mark {
  z-index: 2;
  width: 72px;
  height: 57px;
  margin: 52px 0 25px;
  position: relative;
}

.contact-card-mark i {
  background: #fff;
  width: 13px;
  height: 13px;
  position: absolute;
}

.contact-card-mark i:first-child {
  top: 0;
  left: 0;
}

.contact-card-mark i:nth-child(2) {
  background: var(--blue-bright);
  top: 13px;
  left: 24px;
}

.contact-card-mark i:nth-child(3) {
  bottom: 0;
  left: 0;
}

.contact-card-mark i:nth-child(4) {
  top: 0;
  right: 0;
}

.contact-card-mark i:nth-child(5) {
  background: var(--blue-bright);
  bottom: 0;
  right: 0;
}

.contact-card-label {
  z-index: 2;
  color: #718c9b;
  letter-spacing: .15em;
  font-size: 6px;
  font-weight: 800;
  display: block;
  position: relative;
}

.contact-card-mail {
  z-index: 2;
  letter-spacing: -.035em;
  border-bottom: 1px solid #ffffff29;
  justify-content: space-between;
  align-items: center;
  margin-top: 9px;
  padding-bottom: 20px;
  font-size: 27px;
  font-weight: 650;
  display: flex;
  position: relative;
}

.contact-card-mail span {
  color: #6fc5ff;
  font-size: 18px;
}

.contact-card-address {
  z-index: 2;
  grid-template-columns: 95px 1fr auto;
  align-items: end;
  gap: 20px;
  display: grid;
  position: absolute;
  bottom: 65px;
  left: 21px;
  right: 21px;
}

.contact-card-address small {
  color: #718c9b;
  letter-spacing: .15em;
  align-self: start;
  font-size: 6px;
  font-weight: 800;
}

.contact-card-address p {
  color: #b1c0c9;
  margin: 0;
  font-size: 10px;
  line-height: 1.7;
}

.contact-card-address a {
  color: #78c4ef;
  font-size: 8px;
  font-weight: 800;
}

.contact-card-foot {
  z-index: 2;
  color: #607987;
  letter-spacing: .13em;
  border-top: 1px solid #ffffff21;
  align-items: center;
  gap: 12px;
  height: 48px;
  font-size: 5px;
  font-weight: 800;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 21px;
  right: 21px;
}

.contact-card-foot i {
  background: #304956;
  flex: 1;
  height: 1px;
}

.contact-form-section {
  background: #f4f7f8;
}

.contact-form-layout {
  grid-template-columns: 1.25fr .75fr;
  align-items: start;
  gap: 22px;
  display: grid;
}

.contact-form {
  background: #fff;
  border: 1px solid #dce4e8;
  border-radius: 22px;
  padding: 46px;
}

.form-grid {
  grid-template-columns: 1fr 1fr;
  gap: 25px 18px;
  display: grid;
}

.contact-form label {
  display: block;
}

.contact-form label > span {
  color: #53636c;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-size: 8px;
  font-weight: 800;
  display: block;
}

.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  color: var(--ink);
  font: inherit;
  background: #fbfcfd;
  border: 1px solid #ced9de;
  border-radius: 8px;
  outline: none;
  padding: 15px 16px;
  font-size: 13px;
  transition: border-color .2s, box-shadow .2s;
}

.contact-form textarea {
  resize: vertical;
  min-height: 175px;
  line-height: 1.65;
}

.contact-form input::placeholder, .contact-form textarea::placeholder {
  color: #9aa5ab;
}

.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px #2c86c717;
}

.form-wide {
  grid-column: 1 / -1;
}

.form-submit {
  align-items: center;
  gap: 22px;
  margin-top: 28px;
  display: flex;
}

.form-submit p {
  color: #849097;
  max-width: 285px;
  margin: 0;
  font-size: 9px;
  line-height: 1.55;
}

.form-status {
  min-height: 22px;
  color: var(--blue);
  margin: 15px 0 0;
  font-size: 10px;
  font-weight: 700;
}

.contact-guide {
  color: #fff;
  background: linear-gradient(145deg, #101b23, #17384c);
  border-radius: 22px;
  padding: 45px;
  position: sticky;
  top: 115px;
}

.contact-guide h3 {
  margin: 26px 0 35px;
  font-size: 31px;
}

.contact-guide-list {
  border-top: 1px solid #ffffff24;
}

:is(.contact-guide-list > div:not(.ds-repeat), .contact-guide-list > .ds-repeat > div) {
  border-bottom: 1px solid #ffffff24;
  grid-template-columns: 34px 1fr;
  gap: 15px;
  padding: 20px 0;
  display: grid;
}

.contact-guide-list span {
  color: #71c5f2;
  font-size: 7px;
}

.contact-guide-list p {
  color: #acbec8;
  margin: 0;
  font-size: 11px;
}

.contact-guide > a {
  color: #9bb1be;
  margin-top: 32px;
  font-size: 9px;
  display: block;
}

.contact-guide > a strong {
  color: #fff;
  margin-top: 6px;
  font-size: 12px;
  display: block;
}

.contact-next {
  background: #fff;
}

.contact-next-grid {
  border-top: 1px solid #d4dee3;
  border-bottom: 1px solid #d4dee3;
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.contact-next-step {
  border-right: 1px solid #d4dee3;
  grid-template-columns: 48px 1fr;
  gap: 15px;
  min-height: 315px;
  padding: 38px 30px;
  display: grid;
}

.contact-next-step:last-child {
  border-right: 0;
}

.contact-next-step > span {
  width: 38px;
  height: 38px;
  color: var(--blue);
  border: 1px solid #cbd7dd;
  border-radius: 50%;
  place-items: center;
  font-size: 7px;
  display: grid;
}

.contact-next-step small {
  color: var(--blue);
  letter-spacing: .13em;
  text-transform: uppercase;
  font-size: 7px;
  font-weight: 800;
}

.contact-next-step h3 {
  margin: 42px 0 14px;
  font-size: 25px;
}

.contact-next-step p {
  color: #69757c;
  font-size: 12px;
}

@media (max-width: 1120px) {
  .contact-card {
    transform-origin: center;
    transform: scale(.9);
  }

  .contact-form, .contact-guide {
    padding: 38px;
  }
}

@media (max-width: 900px) {
  .contact-card {
    margin-top: 25px;
    transform: none;
  }

  .contact-form-layout {
    grid-template-columns: 1fr;
  }

  .contact-guide {
    position: relative;
    top: auto;
  }

  .contact-next-grid {
    grid-template-columns: 1fr;
  }

  .contact-next-step {
    border-bottom: 1px solid #d4dee3;
    border-right: 0;
    min-height: 220px;
  }

  .contact-next-step:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 620px) {
  .contact-card {
    height: 425px;
    padding: 14px;
  }

  .contact-card-head small {
    font-size: 5px;
  }

  .contact-card-mark {
    margin: 40px 0 22px;
  }

  .contact-card-mail {
    font-size: 21px;
  }

  .contact-card-address {
    grid-template-columns: 1fr auto;
    bottom: 55px;
    left: 14px;
    right: 14px;
  }

  .contact-card-address small {
    grid-column: 1 / -1;
  }

  .contact-card-address p {
    font-size: 8px;
  }

  .contact-card-foot {
    height: 40px;
    left: 14px;
    right: 14px;
  }

  .contact-form {
    padding: 28px;
  }

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

  .form-wide {
    grid-column: auto;
  }

  .form-submit {
    flex-direction: column;
    align-items: stretch;
  }

  .form-submit .button {
    width: 100%;
  }

  .contact-guide {
    padding: 34px 28px;
  }

  .contact-next-step {
    grid-template-columns: 40px 1fr;
    padding: 30px 20px;
  }

  .contact-next-step h3 {
    margin-top: 30px;
  }
}

[hidden] {
  display: none !important;
}

.product-detail-page {
  --product-accent: #e00072;
  --product-surface: #fbedf4;
  --product-ink: #19141a;
}

.product-detail-page main {
  transition: opacity .18s;
}

.js .product-detail-page:not(.product-ready) main {
  opacity: 0;
}

.product-detail-hero {
  background: linear-gradient(#f8fbfc 0, #fff 72%);
  min-height: 850px;
  padding: 132px 0 105px;
  position: relative;
  overflow: hidden;
}

.product-detail-hero .page-grid {
  opacity: .55;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.product-detail-hero .container {
  z-index: 2;
  position: relative;
}

.product-detail-hero .reveal {
  opacity: 1;
  transform: none;
}

.product-switcher {
  border-top: 1px solid #d9e3e7;
  border-bottom: 1px solid #d9e3e7;
  grid-template-columns: repeat(6, 1fr);
  display: grid;
}

.product-switcher a {
  color: #75838b;
  white-space: nowrap;
  align-items: center;
  gap: 10px;
  padding: 18px 13px;
  font-size: 10px;
  font-weight: 750;
  transition: color .2s, background .2s;
  display: flex;
  position: relative;
}

.product-switcher a:target {
  outline: 0;
}

.product-switcher a + a {
  border-left: 1px solid #e1e8eb;
}

.product-switcher a span {
  color: #a8b2b8;
  letter-spacing: .08em;
  font-size: 6px;
}

.product-switcher a:hover, .product-switcher a[aria-current="page"] {
  color: var(--product-ink);
  background: #fff;
}

.product-switcher a[aria-current="page"]:after {
  content: "";
  background: var(--product-accent);
  height: 3px;
  position: absolute;
  bottom: -1px;
  left: 13px;
  right: 13px;
}

.product-detail-layout {
  grid-template-columns: .84fr 1.16fr;
  align-items: center;
  gap: 72px;
  margin-top: 65px;
  display: grid;
}

.product-detail-copy {
  z-index: 2;
  position: relative;
}

.product-detail-category {
  border: 1px solid color-mix(in srgb, var(--product-accent) 35%, #d8e2e7);
  color: var(--product-accent);
  letter-spacing: .16em;
  text-transform: uppercase;
  background: #fff;
  border-radius: 7px;
  padding: 10px 14px;
  font-size: 7px;
  font-weight: 850;
  display: inline-block;
}

.product-detail-brand {
  align-items: center;
  gap: 18px;
  min-height: 85px;
  margin: 30px 0 20px;
  display: flex;
}

.product-detail-brand img {
  object-fit: contain;
  object-position: left center;
  width: auto;
  max-width: 275px;
  height: 68px;
  display: block;
}

.product-detail-brand strong {
  letter-spacing: -.045em;
  font-size: 36px;
}

.product-detail-brand--icon img {
  border: 1px solid #e1e7ea;
  border-radius: 17px;
  width: 70px;
  height: 70px;
  box-shadow: 0 12px 30px #193a4d17;
}

.product-detail-copy h1 {
  letter-spacing: -.065em;
  max-width: 560px;
  margin: 0;
  font-size: 68px;
  line-height: .98;
}

.product-detail-copy h1 span, .product-detail-copy h1 em {
  display: block;
}

.product-detail-copy h1 em {
  color: var(--product-accent);
  margin-top: 4px;
  font-style: normal;
}

.product-detail-copy > p {
  color: #66737b;
  max-width: 560px;
  margin: 27px 0 0;
  font-size: 16px;
  line-height: 1.75;
}

.product-detail-tags {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
  display: flex;
}

.product-detail-tags span {
  color: #65727a;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #fff;
  border: 1px solid #dbe3e7;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 7px;
  font-weight: 800;
}

.product-detail-copy .button-row {
  margin-top: 32px;
}

.product-accent-button {
  border-color: var(--product-accent);
  background: var(--product-accent);
}

.product-accent-button:hover {
  filter: brightness(.94);
}

.product-showcase {
  background: linear-gradient(145deg, #fff, var(--product-surface));
  border: 1px solid #d8e2e6;
  border-radius: 27px;
  height: 560px;
  transition: background .35s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 32px 75px #1c3c4f26;
}

.product-showcase-grid {
  background-image: linear-gradient(color-mix(in srgb, var(--product-accent) 8%, transparent) 1px, transparent 1px),linear-gradient(90deg, color-mix(in srgb, var(--product-accent) 8%, transparent) 1px, transparent 1px);
  background-size: 35px 35px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#000, #0000 85%);
  mask-image: linear-gradient(#000, #0000 85%);
}

.product-visual {
  position: absolute;
  inset: 35px;
  overflow: hidden;
}

.visual-logo {
  z-index: 3;
  object-fit: contain;
  object-position: left center;
  width: auto;
  max-width: 225px;
  height: 58px;
  position: absolute;
  top: 25px;
  left: 26px;
}

.product-visual--beeber {
  background: #fff;
  border: 1px solid #d8e0e4;
  border-radius: 18px 0 0;
  inset: 72px -100px -52px 36px;
  transform: rotate(-1deg);
  box-shadow: 0 25px 55px #1e36432b;
}

.product-browser-bar {
  color: #a3adb2;
  background: #fff;
  border-bottom: 1px solid #dfe5e8;
  align-items: center;
  gap: 7px;
  height: 49px;
  padding: 0 18px;
  display: flex;
}

.product-browser-bar i {
  background: #d4dee2;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.product-browser-bar i:first-child {
  background: var(--product-accent);
}

.product-browser-bar span {
  letter-spacing: .06em;
  margin-left: auto;
  font-size: 6px;
}

.product-visual--beeber > img {
  object-fit: cover;
  object-position: left top;
  width: 100%;
  height: calc(100% - 49px);
  display: block;
}

.product-visual--narrow {
  inset: 33px;
}

.narrow-photo {
  object-fit: cover;
  border-radius: 13px;
  display: block;
  position: absolute;
  box-shadow: 0 18px 38px #132e3e38;
}

.narrow-photo--one {
  width: 61%;
  height: 73%;
  bottom: 0;
  right: 0;
}

.narrow-photo--two {
  width: 47%;
  height: 54%;
  bottom: 14px;
  left: 0;
}

.product-visual--narrow .visual-logo {
  background: #ffffffeb;
  border-radius: 10px;
  max-width: 250px;
  height: 66px;
  padding: 12px 15px;
  top: 14px;
  left: 13px;
  box-shadow: 0 12px 30px #193a4d1a;
}

.product-visual--catalog {
  background: linear-gradient(140deg, #f7fcff, #dcecf4);
  border-radius: 18px;
}

.product-visual--catalog .visual-logo {
  max-width: 205px;
}

.catalog-detail-table {
  background: #ffffffe0;
  border: 1px solid #c9dce6;
  border-radius: 13px;
  padding: 18px;
  position: absolute;
  top: 118px;
  left: 26px;
  right: 26px;
  box-shadow: 0 18px 40px #1a4d6b1f;
}

.catalog-detail-table span {
  border-bottom: 1px solid #dbe6eb;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 18px 5px;
  display: grid;
}

.catalog-detail-table span:last-child {
  border-bottom: 0;
}

.catalog-detail-table i {
  background: var(--product-accent);
  width: 9px;
  height: 9px;
}

.catalog-detail-table b {
  font-size: 11px;
}

.catalog-detail-table em {
  color: #6f818b;
  font-size: 7px;
  font-style: normal;
}

.product-visual--bokyding {
  background: linear-gradient(145deg, #faf8ff, #e4ddf4);
  border-radius: 18px;
}

.product-visual--bokyding .visual-logo {
  image-rendering: auto;
  width: 77px;
  height: 77px;
}

.boky-calendar {
  background: #fff;
  border-radius: 16px;
  padding: 23px;
  position: absolute;
  top: 128px;
  left: 27px;
  right: 27px;
  box-shadow: 0 20px 45px #36276726;
}

.boky-calendar-head {
  border-bottom: 1px solid #e6e1ef;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 17px;
  display: flex;
}

.boky-calendar-head b {
  font-size: 13px;
}

.boky-calendar-head span {
  color: #81799a;
  font-size: 7px;
}

.boky-days {
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 20px;
  display: grid;
}

.boky-days i {
  aspect-ratio: 1;
  background: #eeeaf7;
  border-radius: 6px;
}

.boky-days i.busy {
  background: var(--product-accent);
  box-shadow: inset 0 0 0 5px #ffffffb8;
}

.product-visual--party {
  background: linear-gradient(145deg, #faf8ff, #e7e1f4);
  border-radius: 18px;
}

.product-visual--party .visual-logo {
  max-width: 210px;
}

.party-detail-phone {
  background: #fff;
  border: 7px solid #2e2649;
  border-radius: 31px;
  width: 205px;
  height: 355px;
  padding: 42px 17px 17px;
  position: absolute;
  bottom: -35px;
  right: 35px;
  transform: rotate(5deg);
  box-shadow: 0 25px 45px #2e26492e;
}

.party-detail-notch {
  background: #2e2649;
  border-radius: 8px;
  width: 58px;
  height: 8px;
  position: absolute;
  top: 12px;
  left: 67px;
}

.party-detail-photos {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  display: grid;
}

.party-detail-photos i {
  background: linear-gradient(145deg, #caaddd, #694fa1);
  border-radius: 7px;
  height: 78px;
}

.party-detail-photos i:nth-child(2) {
  background: linear-gradient(145deg, #f4b1c9, #ad4f82);
}

.party-detail-photos i:nth-child(3) {
  background: linear-gradient(145deg, #ffd1b2, #dd805c);
}

.party-detail-photos i:nth-child(4) {
  background: linear-gradient(145deg, #98c6e2, #5765a1);
}

.party-detail-phone > span {
  color: #5d4c96;
  text-align: center;
  margin-top: 13px;
  font-size: 9px;
  font-weight: 800;
  display: block;
}

.party-detail-code {
  color: #fff;
  background: var(--product-accent);
  text-align: center;
  border: 8px solid #fff;
  border-radius: 14px;
  place-items: center;
  width: 112px;
  height: 112px;
  font-size: 31px;
  font-weight: 850;
  line-height: .7;
  display: grid;
  position: absolute;
  bottom: 48px;
  left: 38px;
  box-shadow: 0 14px 30px #2e26492e;
}

.party-detail-code small {
  letter-spacing: .12em;
  font-size: 5px;
}

.product-visual--etickr {
  background: linear-gradient(145deg, #f8faff, #dfe7f4);
  border-radius: 18px;
}

.product-visual--etickr .visual-logo {
  max-width: 190px;
}

.etickr-detail-ticket {
  color: #fff;
  background: linear-gradient(135deg, var(--product-ink), var(--product-accent));
  border-radius: 17px;
  grid-template-columns: 1fr 1px 115px;
  align-items: center;
  height: 220px;
  padding: 32px;
  display: grid;
  position: absolute;
  top: 145px;
  left: 30px;
  right: 30px;
  transform: rotate(-2deg);
  box-shadow: 0 20px 45px #1f345b38;
}

.etickr-detail-ticket > div small, .etickr-detail-ticket > div strong, .etickr-detail-ticket > div span {
  display: block;
}

.etickr-detail-ticket > div small {
  letter-spacing: .15em;
  font-size: 6px;
}

.etickr-detail-ticket > div strong {
  margin: 12px 0 35px;
  font-size: 31px;
}

.etickr-detail-ticket > div span {
  color: #ffffffa8;
  letter-spacing: .1em;
  font-size: 6px;
}

.etickr-detail-ticket > i {
  border-left: 1px dashed #ffffff57;
  height: 160px;
}

.etickr-detail-ticket > b {
  justify-content: center;
  gap: 4px;
  display: flex;
  transform: rotate(90deg);
}

.etickr-detail-ticket u {
  background: #fff;
  width: 6px;
  height: 68px;
  display: block;
}

.etickr-detail-ticket u:nth-child(2) {
  width: 2px;
}

.etickr-detail-ticket u:nth-child(4) {
  width: 10px;
}

.product-screen-stack {
  position: absolute;
  inset: 0;
}

.product-screen {
  background: #fff;
  border: 1px solid #1924301f;
  border-radius: 12px;
  margin: 0;
  position: absolute;
  overflow: hidden;
  box-shadow: 0 22px 48px #1c263a33;
}

.product-screen img {
  object-fit: cover;
  object-position: left top;
  width: 100%;
  height: 100%;
  display: block;
}

.product-screen--dashboard {
  aspect-ratio: 3536 / 1870;
  width: 112%;
  top: 58px;
  right: -78px;
}

.product-screen--login {
  aspect-ratio: 2142 / 1484;
  border: 5px solid #fff;
  width: 48%;
  bottom: 24px;
  left: 4px;
  transform: rotate(-2deg);
}

.product-screen-stack--etickr .product-screen--dashboard {
  top: 62px;
  right: -82px;
}

.product-screen-stack--etickr .product-screen--login {
  aspect-ratio: 1294 / 1668;
  width: 30%;
  bottom: 19px;
  left: 18px;
  transform: rotate(2deg);
}

.product-value-section {
  background: color-mix(in srgb, var(--product-surface) 63%, #f4f7f8);
}

.product-value-grid {
  grid-template-columns: 1.1fr .9fr;
  align-items: start;
  gap: 100px;
  display: grid;
}

.product-value-title h2 {
  max-width: 760px;
  margin: 22px 0 0;
  font-size: 53px;
}

.product-value-title h2:after {
  content: "";
  background: var(--product-accent);
  width: 58px;
  height: 5px;
  margin-top: 30px;
  display: block;
}

.product-value-copy {
  color: #5f6d75;
  padding-top: 45px;
  font-size: 17px;
  line-height: 1.8;
}

.product-features-section {
  background: #fff;
}

.product-features-section .section-heading em {
  color: var(--product-accent);
}

.product-feature-grid {
  border-top: 1px solid #d6e0e4;
  border-bottom: 1px solid #d6e0e4;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 55px;
  display: grid;
}

.product-feature-card {
  border-right: 1px solid #d6e0e4;
  min-height: 315px;
  padding: 30px 26px;
}

.product-feature-card:last-child {
  border-right: 0;
}

.product-feature-card > span {
  border: 1px solid color-mix(in srgb, var(--product-accent) 40%, #d0dae0);
  width: 42px;
  height: 42px;
  color: var(--product-accent);
  border-radius: 50%;
  place-items: center;
  font-size: 7px;
  display: grid;
}

.product-feature-card h3 {
  margin: 70px 0 15px;
  font-size: 23px;
}

.product-feature-card p {
  color: #68757d;
  font-size: 12px;
}

.product-steps-section {
  color: #fff;
  background: var(--product-ink);
}

.product-steps-section .eyebrow {
  color: color-mix(in srgb, var(--product-accent) 70%, white);
}

.product-steps-section .section-heading h2 {
  color: #fff;
}

.product-steps-section .section-heading h2 em {
  color: var(--product-accent);
}

.product-steps-section .section-heading p {
  color: #9aaab3;
}

.product-step-rail {
  border-top: 1px solid #ffffff29;
  border-bottom: 1px solid #ffffff29;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 55px;
  display: grid;
}

:is(.product-step-rail > div:not(.ds-repeat), .product-step-rail > .ds-repeat > div) {
  border-right: 1px solid #ffffff29;
  min-height: 220px;
  padding: 28px;
}

:is(.product-step-rail > div:not(.ds-repeat), .product-step-rail > .ds-repeat > div):last-child {
  border-right: 0;
}

.product-step-rail span {
  color: var(--product-accent);
  font-size: 7px;
}

.product-step-rail small, .product-step-rail strong {
  display: block;
}

.product-step-rail small {
  color: #82939d;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-top: 55px;
  font-size: 7px;
  font-weight: 800;
}

.product-step-rail strong {
  margin-top: 11px;
  font-size: 18px;
}

.product-closing {
  background: #fff;
  padding: 0 0 115px;
}

.product-closing-head {
  color: #7e8b92;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid #d7e0e4;
  justify-content: space-between;
  align-items: center;
  padding: 23px 0;
  font-size: 7px;
  font-weight: 800;
  display: flex;
}

.product-closing-head strong {
  color: var(--product-accent);
  font-size: 8px;
}

.product-closing-grid {
  grid-template-columns: 1.08fr .92fr;
  gap: 105px;
  padding-top: 82px;
  display: grid;
}

.product-closing-copy {
  padding-left: 27px;
  position: relative;
}

.product-closing-copy:before {
  content: "";
  background: var(--product-accent);
  width: 5px;
  height: 77px;
  position: absolute;
  top: 0;
  left: 0;
}

.product-closing-copy h2 {
  letter-spacing: -.055em;
  max-width: 690px;
  margin: 22px 0 25px;
  font-size: 55px;
  line-height: 1.05;
}

.product-closing-copy > p {
  color: #64727a;
  max-width: 650px;
  font-size: 16px;
  line-height: 1.8;
}

.product-closing-copy .button-row {
  margin-top: 34px;
}

.product-closing-mail {
  border-bottom: 1px solid #afbbc1;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.product-closing-mail span {
  color: var(--product-accent);
  font-size: 15px;
}

.product-fit-list {
  border-top: 1px solid #cfd9de;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-fit-list li {
  border-bottom: 1px solid #cfd9de;
  grid-template-columns: 38px 1fr 12px;
  align-items: start;
  gap: 15px;
  padding: 25px 0;
  display: grid;
  position: relative;
}

.product-fit-list li:after {
  content: "";
  background: var(--product-accent);
  width: 10px;
  height: 10px;
  margin-top: 8px;
}

.product-fit-list li:nth-child(2):after {
  opacity: .6;
}

.product-fit-list li:nth-child(3):after {
  opacity: .25;
}

.product-fit-list li > span {
  color: var(--product-accent);
  padding-top: 5px;
  font-size: 7px;
  font-weight: 850;
}

.product-fit-list small, .product-fit-list strong {
  display: block;
}

.product-fit-list small {
  color: #8b969c;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-size: 6px;
  font-weight: 850;
}

.product-fit-list strong {
  max-width: 390px;
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 1120px) {
  .product-detail-layout {
    gap: 42px;
  }

  .product-detail-copy h1 {
    font-size: 58px;
  }

  .product-showcase {
    height: 520px;
  }

  .product-switcher a {
    padding-inline: 8px;
  }

  .product-feature-card {
    padding: 27px 20px;
  }

  .product-feature-card h3 {
    font-size: 20px;
  }
}

@media (max-width: 900px) {
  .product-detail-hero {
    padding: 118px 0 85px;
  }

  .product-switcher {
    scrollbar-width: none;
    display: flex;
    overflow-x: auto;
  }

  .product-switcher::-webkit-scrollbar {
    display: none;
  }

  .product-switcher a {
    justify-content: center;
    min-width: 145px;
  }

  .product-detail-layout {
    grid-template-columns: 1fr;
    margin-top: 55px;
  }

  .product-detail-copy {
    max-width: 720px;
  }

  .product-showcase {
    width: 100%;
    max-width: 720px;
    height: 540px;
    margin: 5px auto 0;
  }

  .product-value-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .product-value-copy {
    max-width: 720px;
    padding-top: 0;
  }

  .product-feature-grid {
    grid-template-columns: 1fr 1fr;
  }

  .product-feature-card:nth-child(2) {
    border-right: 0;
  }

  .product-feature-card:nth-child(-n+2) {
    border-bottom: 1px solid #d6e0e4;
  }

  .product-step-rail {
    grid-template-columns: 1fr;
  }

  :is(.product-step-rail > div:not(.ds-repeat), .product-step-rail > .ds-repeat > div) {
    border-bottom: 1px solid #ffffff29;
    border-right: 0;
    min-height: 165px;
  }

  :is(.product-step-rail > div:not(.ds-repeat), .product-step-rail > .ds-repeat > div):last-child {
    border-bottom: 0;
  }

  .product-step-rail small {
    margin-top: 35px;
  }

  .product-closing-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .product-closing-copy, .product-fit-list {
    max-width: 720px;
  }
}

@media (max-width: 620px) {
  .product-detail-hero {
    padding: 103px 0 68px;
  }

  .product-switcher {
    margin-right: -20px;
  }

  .product-switcher a {
    min-width: 130px;
    padding: 15px 8px;
  }

  .product-detail-layout {
    margin-top: 43px;
  }

  .product-detail-brand {
    min-height: 65px;
    margin: 25px 0 17px;
  }

  .product-detail-brand img {
    max-width: 230px;
    height: 58px;
  }

  .product-detail-brand--icon img {
    border-radius: 14px;
    width: 58px;
    height: 58px;
  }

  .product-detail-brand strong {
    font-size: 31px;
  }

  .product-detail-copy h1 {
    font-size: 47px;
  }

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

  .product-detail-copy .button-row {
    flex-direction: column;
  }

  .product-detail-copy .button {
    width: 100%;
  }

  .product-showcase {
    border-radius: 20px;
    height: 420px;
  }

  .product-visual {
    inset: 20px;
  }

  .product-visual--beeber {
    inset: 54px -115px -35px 20px;
  }

  .product-browser-bar {
    height: 40px;
  }

  .product-visual--beeber > img {
    height: calc(100% - 40px);
  }

  .product-visual--narrow {
    inset: 20px;
  }

  .product-visual--narrow .visual-logo {
    max-width: 205px;
    height: 52px;
  }

  .narrow-photo--one {
    width: 67%;
    height: 70%;
  }

  .narrow-photo--two {
    width: 54%;
    height: 50%;
  }

  .visual-logo {
    max-width: 190px;
    height: 50px;
    top: 18px;
    left: 18px;
  }

  .catalog-detail-table {
    padding: 12px;
    top: 98px;
    left: 17px;
    right: 17px;
  }

  .catalog-detail-table span {
    padding: 14px 3px;
  }

  .product-visual--bokyding .visual-logo {
    width: 62px;
    height: 62px;
  }

  .boky-calendar {
    padding: 18px;
    top: 105px;
    left: 18px;
    right: 18px;
  }

  .party-detail-phone {
    width: 165px;
    height: 300px;
    bottom: -28px;
    right: 14px;
  }

  .party-detail-code {
    width: 90px;
    height: 90px;
    bottom: 35px;
    left: 18px;
  }

  .etickr-detail-ticket {
    grid-template-columns: 1fr 1px 72px;
    height: 190px;
    padding: 22px;
    top: 118px;
    left: 17px;
    right: 17px;
  }

  .etickr-detail-ticket > div strong {
    font-size: 25px;
  }

  .product-screen--dashboard {
    width: 118%;
    top: 48px;
    right: -68px;
  }

  .product-screen--login {
    width: 51%;
    bottom: 16px;
  }

  .product-screen-stack--etickr .product-screen--dashboard {
    top: 52px;
    right: -72px;
  }

  .product-screen-stack--etickr .product-screen--login {
    width: 34%;
    bottom: 13px;
    left: 9px;
  }

  .product-value-title h2 {
    font-size: 39px;
  }

  .product-value-copy {
    font-size: 15px;
  }

  .product-feature-grid {
    grid-template-columns: 1fr;
  }

  .product-feature-card, .product-feature-card:nth-child(2) {
    border-bottom: 1px solid #d6e0e4;
    border-right: 0;
    min-height: 245px;
  }

  .product-feature-card:last-child {
    border-bottom: 0;
  }

  .product-feature-card h3 {
    margin-top: 45px;
    font-size: 22px;
  }

  .product-closing {
    padding-bottom: 80px;
  }

  .product-closing-head {
    padding: 18px 0;
  }

  .product-closing-grid {
    gap: 48px;
    padding-top: 55px;
  }

  .product-closing-copy {
    padding-left: 18px;
  }

  .product-closing-copy:before {
    width: 4px;
    height: 58px;
  }

  .product-closing-copy h2 {
    font-size: 40px;
  }

  .product-closing-copy > p {
    font-size: 14px;
  }

  .product-closing-copy .button-row {
    flex-direction: column;
    align-items: stretch;
  }

  .product-closing-copy .button {
    width: 100%;
  }

  .product-closing-mail {
    width: max-content;
  }

  .product-fit-list li {
    grid-template-columns: 30px 1fr 10px;
    gap: 10px;
    padding: 22px 0;
  }
}

.ds-repeat {
  display: contents;
}

picture {
  max-width: 100%;
  display: block;
}

picture img {
  object-fit: inherit;
  border-radius: inherit;
  width: 100%;
  height: 100%;
}

:focus-visible {
  outline-offset: 4px;
  outline: 3px solid #17679f;
}

.site-header {
  background: #fffffff5;
}

.desktop-nav .ds-repeat > li {
  list-style: none;
}

.mobile-menu.open {
  display: block;
}

.product-detail-page {
  min-width: 0;
}

@media (max-width: 600px) {
  h1 {
    font-size: clamp(34px, 10vw, 47px);
  }
}

.header-menu {
  margin: 0;
  padding: 0;
}

.mega-title {
  letter-spacing: -.04em;
  font-size: 27px;
  font-weight: 650;
  line-height: 1.1;
}

.mega-menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%);
}

.mega-product--no-icon {
  grid-template-columns: 1fr auto;
}

@media (min-width: 901px) {
  .mobile-menu.open {
    display: none;
  }
}

.eyebrow:not(.eyebrow--light), .expertise-card .num, .timeline-step > span, .step-dot span, .signal-card > span, .connector-label, .phase-num, .process-phase small, .build-label, .about-route-card small, .about-route-num, .about-principle-list span, .contact-next-step > span, .contact-next-step small, .product-detail-category, .product-closing-head strong, .product-fit-list > li > span, .product-closing-mail span {
  color: #17679f;
}

.cta-card .eyebrow--light {
  color: #8acdf8;
}

.product-closing-head > span, .product-fit-list small, .compact-brand p, .form-submit p, .process-phase p, .about-route-card p, .about-principle-list p {
  color: #52616b;
}

.product-steps-section .eyebrow, .product-steps-section .section-heading h2 em, .product-step-rail span, .product-step-rail small, .about-route-card--dark small {
  color: #bbdff5;
}

.product-accent-button {
  background: var(--product-ink);
  border-color: var(--product-ink);
}

.mobile-menu[hidden] {
  display: none;
}

.product-switcher, .product-detail-copy, .section-heading > *, .button-row > * {
  min-width: 0;
}

@media (max-width: 600px) {
  .product-detail-copy h1 {
    overflow-wrap: anywhere;
    font-size: clamp(30px, 10vw, 47px);
  }

  .button {
    white-space: normal;
    text-align: center;
    padding-inline: 16px;
  }
}

.about-route-card--dark .about-route-num, .about-route-card--dark p {
  color: #bbdff5;
}

.product-feature-card > span {
  color: #17679f;
}

.compact-brand {
  min-width: 0;
}

.compact-brand img {
  max-width: 100%;
}

@media (max-width: 600px) {
  .product-closing-copy h2, .product-value-title h2 {
    overflow-wrap: anywhere;
    font-size: clamp(30px, 10vw, 40px);
  }

  .product-closing-mail {
    max-width: 100%;
  }

  .software-hero-stack {
    width: 100%;
    max-width: 100%;
    overflow: clip;
  }

  .compact-brand {
    padding-inline: 24px;
  }
}

@media (min-width: 901px) {
  .hero-layout {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }

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

  .hero-copy h1 {
    font-size: clamp(47px, 5.15vw, 78px);
  }
}

.block-options {
  color: #101416;
  background: #fff;
  border: 1px solid #dce4e8;
  border-radius: 12px;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  padding: 20px;
  display: flex;
}

.block-options > div {
  gap: 6px;
  display: grid;
}

/* [project]/src/themes/datasculpt-bv/blocks/About/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/AboutPlace/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/AboutRoutes/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/AboutStatement/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/BuildTypes/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/CompactPortfolio/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/Contact/contact.scss.css [app-client] (css) */
.block-contact {
  padding: 90px 0;
}

.contact-grid {
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  display: grid;
}

.contact-intro {
  color: var(--t-muted);
}

.contact-intro .section-title {
  color: var(--t-dark);
}

@media (max-width: 880px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* [project]/src/themes/datasculpt-bv/blocks/ContactFormSection/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/ContactNext/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/CtaSection/block.scss.css [app-client] (css) */
.cta-section {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/CustomPrinciples/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/CustomSignals/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/DataJourney/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/Expertise/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/Featured/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

.featured-copy .eyebrow--light {
  color: #8acdf8;
}

@media (min-width: 1121px) {
  .featured-copy .button-row {
    flex-wrap: nowrap;
  }
}

/* [project]/src/themes/datasculpt-bv/blocks/Hero/block.scss.css [app-client] (css) */
.unified-hero, .unified-hero .unified-hero__layout, .unified-hero .unified-hero__copy {
  min-width: 0;
}

.unified-hero .unified-hero__brand img {
  object-fit: contain;
  width: auto;
  max-width: 220px;
  height: 64px;
}

.unified-hero .unified-hero__brand--icon img {
  width: 58px;
  height: 58px;
}

.unified-hero .hero-options {
  z-index: 3;
  color: #111416;
  background: #fff;
  border: 1px solid #dfe5e8;
  border-radius: 10px;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px;
  display: flex;
  position: relative;
}

.unified-hero .hero-options > div {
  gap: 6px;
  font-size: 12px;
  display: grid;
}

.unified-hero[data-visual="none"] .unified-hero__layout {
  grid-template-columns: 1fr;
}

.unified-hero[data-visual="none"] .unified-hero__copy {
  max-width: 760px;
}

.unified-hero[data-motion="static"] *, .unified-hero[data-motion="static"] :before, .unified-hero[data-motion="static"] :after {
  animation: none !important;
}

@media (min-width: 1121px) {
  .unified-hero .unified-hero__copy .button-row {
    flex-wrap: nowrap;
  }
}

@media (max-width: 620px) {
  .unified-hero .unified-hero__copy h1 {
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .unified-hero *, .unified-hero :before, .unified-hero :after {
    animation: none !important;
  }
}

/* [project]/src/themes/datasculpt-bv/blocks/ImageText/imagetext.scss.css [app-client] (css) */
.block-imagetext {
  padding: 90px 0;
}

.block-imagetext .cms-select-attr {
  position: absolute;
  top: -34px;
  left: 0;
}

.block-imagetext.side-right .imagetext-media {
  order: 2;
}

.imagetext-grid {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
  display: grid;
  position: relative;
}

.imagetext-img img {
  border-radius: var(--t-radius);
  width: 100%;
  height: auto;
  box-shadow: 0 18px 50px #171e3c24;
}

.imagetext-text {
  color: var(--t-muted);
  font-size: 17px;
}

@media (max-width: 880px) {
  .imagetext-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .block-imagetext.side-right .imagetext-media {
    order: 0;
  }
}

/* [project]/src/themes/datasculpt-bv/blocks/Integrations/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/News/news.scss.css [app-client] (css) */
.block-news {
  background: var(--t-light);
  padding: 90px 0;
}

.news-grid {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px;
  display: grid;
}

.news-card {
  border-radius: var(--t-radius);
  background: #fff;
  flex-direction: column;
  text-decoration: none;
  transition: transform .15s;
  display: flex;
  overflow: hidden;
  box-shadow: 0 6px 28px #171e3c0f;
}

.news-card:hover {
  transform: translateY(-4px);
}

.news-card time {
  color: var(--t-muted);
  font-size: 13px;
}

.news-card h3 {
  margin: 6px 0 8px;
  font-size: 19px;
}

.news-card p {
  color: var(--t-muted);
  margin: 0;
  font-size: 14px;
}

.news-cover img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

.news-card-body {
  padding: 20px 22px 24px;
}

/* [project]/src/themes/datasculpt-bv/blocks/Process/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/ProductChoice/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/ProductClosing/block.scss.css [app-client] (css) */
.product-closing {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/ProductFeaturesSection/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/ProductValueSection/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/ProductsSection/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

.products-section .mini-detail {
  color: #52616b;
  font-size: 7px;
}

.products-section .mini-detail small {
  color: inherit;
}

/* [project]/src/themes/datasculpt-bv/blocks/Solutions/block.scss.css [app-client] (css) */
.section {
  min-width: 0;
}

/* [project]/src/themes/datasculpt-bv/blocks/Timeline/timeline.scss.css [app-client] (css) */
.block-timeline {
  background: var(--t-light);
  padding: 90px 0;
  overflow: hidden;
}

.tl-wrap {
  position: relative;
}

.tl-path {
  width: 100%;
  height: 100%;
  color: var(--t-primary);
  z-index: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.tl-items {
  z-index: 1;
  flex-direction: column;
  gap: 70px;
  padding: 30px 0;
  display: flex;
  position: relative;
}

.tl-item {
  align-items: center;
  gap: 26px;
  display: grid;
  position: relative;
}

.tl-item .cms-select-attr {
  z-index: 66;
  margin: 0;
  position: absolute;
  top: -30px;
  left: 0;
}

.tl-item.tl-year {
  grid-template-columns: 18px 1fr;
}

.tl-item.tl-image {
  grid-template-columns: 1fr 18px;
}

.tl-item.tl-image .tl-card {
  justify-self: end;
  max-width: 520px;
}

.tl-item.tl-split {
  grid-template-columns: 1fr 18px 1fr;
}

.tl-dot {
  background: var(--t-primary);
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 2px var(--t-primary);
  border: 4px solid #fff;
  border-radius: 99px;
  flex-shrink: 0;
  justify-self: center;
}

.tl-card {
  border-radius: var(--t-radius);
  background: #fff;
  padding: 26px 30px;
  box-shadow: 0 6px 28px #171e3c14;
}

.tl-year {
  color: var(--t-primary);
  letter-spacing: .08em;
  font-size: 14px;
  font-weight: 800;
}

.tl-title {
  margin: 6px 0 8px;
}

.tl-img img {
  object-fit: cover;
  border-radius: 10px;
  width: 100%;
  max-height: 320px;
}

@media (max-width: 880px) {
  .tl-item.tl-split {
    grid-template-columns: 1fr;
  }

  .tl-item.tl-split .tl-dot {
    display: none;
  }
}

/* [project]/src/themes/datasculpt-bv/blocks/Usp/usp.scss.css [app-client] (css) */
.block-usp {
  background: var(--t-light);
  padding: 90px 0;
}

.usp-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
  display: grid;
}

.usp-item {
  border-radius: var(--t-radius);
  background: #fff;
  padding: 30px 26px;
  box-shadow: 0 6px 28px #171e3c0f;
}

.usp-icon {
  color: var(--t-primary);
  font-size: 34px !important;
}

.usp-icon.cms-icon {
  width: 34px;
  height: 34px;
}

.usp-text {
  color: var(--t-muted);
  margin: 14px 0 0;
}

/*# sourceMappingURL=src_themes_datasculpt-bv_0cpj7ub._.css.map*/