:root {
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --hero-bg: #0F093B;
  --footer-bg: #0b1929;
  --purple: #6a2bf3;
  --cyan: #22e2dd;
  --ink: #120f33;
  --white: #ffffff;
  --text-soft: rgba(255, 255, 255, 0.85);
  --text-dim: rgba(255, 255, 255, 0.72);
  --line: rgba(255, 255, 255, 0.1);
  --container: 1380px;
  --gutter: 40px;
  --header-h: 70px;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  line-height: 1.5;
  font-size: 1.0rem;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.site-header__inner,
.hero__inner,
.intro__inner,
.platform__inner,
.demo__inner,
.story__inner,
.process__inner,
.fit__inner,
.spot__inner,
.contact__inner,
.page-head__inner,
.shot__inner,
.tbband__inner,
.overview__inner,
.features__inner,
.tryit__inner,
.proof__inner,
.ways__inner,
.search__inner,
.mmb__inner,
.supply__inner,
.suppliers__inner,
.stories__inner,
.started__inner,
.work__inner,
.plan__inner,
.tbq__inner,
.talk__inner,
.indev__inner,
.legal__inner,
.lf__inner, 
.questions__inner,
.site-footer__inner {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  text-box: trim-both cap alphabetic;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s;
}

.btn--sm {
  min-height: 40px;
  padding: 0 18px 0.25em;
  font-size: 0.875rem;
}

.btn--lg {
  min-height: 46px;
  padding: 0 26px 0.25em;
  font-size: 1rem;
  font-weight: 600;
}

.btn--outline {
  border-color: rgba(255, 255, 255, 0.9);
  color: var(--white);
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.08);
}

.site-header__actions .btn--outline {
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.site-header__actions .btn--outline:hover {
  color: var(--purple);
  background: var(--white);
  border-color: var(--white);
}

.btn--purple {
  background: var(--purple);
  border-color: var(--purple);
  color: var(--white);
}

.btn--purple:hover {
  background: #5a1fe0;
  border-color: #5a1fe0;
}

.btn--cyan {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--ink);
}

.btn--cyan:hover {
  background: #45ebe6;
  border-color: #45ebe6;
}

.btn__arrow {
  position: relative;
  top: 0.125em;
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  color: var(--white);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.3s;
}

.site-header.is-scrolled {
  background: var(--hero-bg);
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 64px;
  min-height: var(--header-h);
}

.site-header__logo {
  flex: none;
  justify-self: start;
}

.site-header__logo img {
  width: auto;
  height: 38px;
}

.site-header__menu {
  display: contents;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.site-nav a {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.site-nav a:hover {
  opacity: 0.75;
}

.site-header__actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 13px;
}

.site-header__toggle {
  display: none;
}

.site-header__login {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.site-header__login:hover {
  color: var(--purple);
  background: var(--white);
  border-color: var(--white);
}

.site-header__login svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-nav__login {
  display: none;
}

.lang-switch {
  position: relative;
}

.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 8px;
  font-family: inherit;
  color: var(--white);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.lang-switch__btn:hover,
.lang-switch.is-open .lang-switch__btn {
  background: rgba(255, 255, 255, 0.1);
}

.lang-switch__btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
}

.lang-switch.is-open .lang-switch__btn svg {
  transform: rotate(180deg);
}

.lang-switch img {
  flex: none;
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
}

.lang-switch__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
  display: none;
  min-width: 170px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border: 1px solid #e3e6ee;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 9, 59, 0.18);
}

.lang-switch.is-open .lang-switch__menu {
  display: block;
}

.lang-switch__menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.lang-switch__menu a:hover {
  background: #f3f5f8;
}

.lang-switch__menu a[aria-current] {
  color: var(--purple);
  background: #efeafe;
}

.lang-switch__menu img {
  box-shadow: 0 0 0 1px rgba(15, 9, 59, 0.12);
}

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 112px) 0 112px;
  color: var(--white);
  background: var(--hero-bg);
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
    width: 80%;
  background: url('../img/hero-bg.jpg') right bottom / cover no-repeat;
  opacity: 0.7;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "copy media"
    "stat media";
  column-gap: 24px;
  row-gap: 60px;
}

.hero__copy {
  grid-area: copy;
  align-self: end;
}

.hero__title {
  max-width: 9.8em;
  margin: 0;
  font-size: 4rem;
  font-weight: 700;
    line-height: 1.1;
  letter-spacing: -0.03em;
}

.hero__title-accent {
  background: linear-gradient(90deg, #19face 0%, #1cf1cf 9%, #24d9d4 23%, #33b2dc 42%, #477ce6 63%, #6039f4 86%, #700efd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: transparent;
}

.hero__lead {
  max-width: 540px;
  margin: 28px 28px 0 0;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--text-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}

.hero__media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-area: media;
  align-self: center;
  justify-self: end;
  width: 85%;
}

.device {
  position: relative;
  grid-area: 1 / 1;
  margin-bottom: 42px;
  padding: 10px;
  background: #1e1d27;
  border-radius: 16px;
  outline: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 40px 70px -25px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.device__screen {
  overflow: hidden;
  background: #fff;
  border-radius: 4px;
}

.device__stand {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 18%;
  height: 34px;
  transform: translateX(-50%);
  background: linear-gradient(#8e92a0, #5d6170);
  clip-path: polygon(22% 0, 78% 0, 92% 100%, 8% 100%);
}

.device__base {
  position: absolute;
  top: calc(100% + 34px);
  left: 50%;
  width: 46%;
  height: 8px;
  transform: translateX(-50%);
  background: linear-gradient(#a3a7b4, #6b6f7d);
  border-radius: 6px 6px 3px 3px;
}

.device__phone {
  position: relative;
  grid-area: 1 / 1;
  align-self: end;
  justify-self: start;
  width: 28%;
  margin: 60px 0 0 -24%;
  padding: 8px;
  background: #130930;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 26px;
    box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.7), 14px 18px 40px rgba(0, 0, 0, 0.55);
}

.device__phone img {
  width: 100%;
  border-radius: 19px;
}

.dash {
  width: 1000px;
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.25;
  color: #080c4a;
  background: #fff;
}

.d-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 11px;
  color: #333;
  background: #fff;
}

.d-title img {
  width: auto;
  height: 12px;
}

.d-menu {
  display: flex;
  gap: 16px;
  padding: 2px 10px 4px;
  font-size: 11px;
  color: #111;
}

.d-tabs {
  padding: 0 6px;
  border-bottom: 1px solid #9db3d6;
}

.d-tabs span {
  display: inline-block;
  padding: 3px 12px;
  font-size: 12px;
  color: #fff;
  background: #a9c4ec;
}

.d-canvas {
  padding: 20px 34px 30px;
}

.d-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 50px;
  margin-bottom: 16px;
}

.d-welcome {
  font-size: 30px;
}

.d-retailer {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 24px;
  text-align: center;
  white-space: nowrap;
}

.d-retailer u {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #2f6bd8;
}

.d-grid {
  display: grid;
  grid-template-columns: 1fr 268px;
  gap: 14px;
  align-items: start;
}

.d-left {
  display: grid;
  gap: 14px;
}

.d-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.d-panel {
  padding: 14px 14px 16px;
  color: #fff;
  background: #080c4a;
  border-radius: 12px;
}

.d-panel h4,
.d-stats h4 {
  margin: 0 0 12px;
  font: 400 19px var(--font);
  color: inherit;
}

.d-tiles {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
}

.d-tile {
  flex: none;
  width: 74px;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
}

.d-tile i {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin-bottom: 6px;
  background: #d6b28c;
}

.d-tile svg {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.d-todo-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.d-todo-h span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
}

.d-todo-h i {
  width: 9px;
  height: 9px;
  background: #fff;
  border-radius: 2px;
}

.d-task {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: start;
  gap: 10px;
  margin-bottom: 8px;
  padding-left: 9px;
  font-size: 11.5px;
  border-left: 3px solid transparent;
}

.d-task p {
  margin: 0;
}

.d-task span {
  font-size: 9.5px;
  white-space: nowrap;
}

.d-task em {
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.d-task.over {
  border-left-color: #e5484d;
}

.d-task.over em {
  color: #ff6b6b;
}

.d-task.today {
  border-left-color: #f5a623;
}

.d-task.today em {
  color: #f5b13d;
}

.d-done p {
  text-decoration: line-through;
  opacity: 0.85;
}

.d-add {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 10px;
}

.d-add b {
  display: block;
  flex: 1.6;
  padding: 2px 5px;
  font: 400 9.5px var(--font);
  color: #8a8fa8;
  background: #fff;
}

.d-add b.d-due {
  flex: 1;
  white-space: nowrap;
}

.d-add svg {
  flex: none;
  width: 13px;
  height: 13px;
}

.d-add span {
  font-size: 11px;
}

.d-stats {
  padding: 14px 16px 12px;
  color: #080c4a;
  background: #d6b28c;
  border-radius: 12px;
}

.d-stats h5 {
  margin: 9px 0 2px;
  font: 700 13px var(--font);
}

.d-st {
  display: grid;
  grid-template-columns: 1fr 80px 48px;
  padding: 1.5px 0;
  font-size: 12px;
}

.d-st b {
  font-weight: 400;
  text-align: right;
}

.d-st em {
  font-size: 10.5px;
  font-style: normal;
  text-align: right;
}

.d-st .up {
  color: #13734a;
}

.d-st .dn {
  color: #b4232f;
}

.d-stats small {
  display: block;
  margin-top: 12px;
  font-size: 9px;
}

.hero__caption {
  display: block;
  padding-top: 12px;
  font-size: 0.6875rem;
  color: #b9c3d6;
  text-align: center;
}

.hero__stat {
  grid-area: stat;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 24px;
}

.hero__stat-num {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cyan);
}

.hero__stat-text {
  padding: 2px 0 2px 24px;
  border-left: 2px solid rgba(255, 255, 255, 0.35);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text-soft);
}

.page-head {
  position: relative;
  overflow: hidden;
    min-height: 440px;
  padding: calc(var(--header-h) + 34px) 0 60px;
  color: var(--white);
  background: var(--hero-bg);
}

.page-head::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80%;
  background: url('../img/page-head-bg3.jpg') right bottom / cover no-repeat;
  opacity: 0.7;
}

.page-head__inner {
  position: relative;
  z-index: 1;
}

.page-head__crumb {
  margin: 0 0 30px;
  font-size: 0.875rem;
  color: #b9c3d6;
}

.page-head__crumb a {
  text-decoration: underline;
}

.page-head__logo {
  width: 130px;
  margin: 0 0 24px;
}

.page-head__logo--wide {
  width: 210px;
}

.page-head__logo--lf {
  width: 340px;
}

.page-head__title {
  max-width: 20ch;
  margin: 0;
  font-size: 3.875rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.page-head__lead {
  max-width: 60ch;
  margin: 16px 0 0;
  font-size: 1.25rem;
  line-height: 1.6;
  color: #b9c3d6;
}

.page-head__by {
  max-width: 60ch;
  margin: 12px 0 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: #9fe9da;
}

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

@media (max-width: 1199.98px) {
  .page-head__title {
    font-size: 3.25rem;
  }
}

@media (max-width: 1099.98px) {
  .page-head::before {
    width: 100%;
    background-position: center bottom;
  }
}

@media (max-width: 899.98px) {
  .page-head {
    min-height: 380px;
    padding: calc(var(--header-h) + 48px) 0 40px;
  }

  .page-head__title {
    font-size: 2.75rem;
  }

  .page-head__lead {
    font-size: 1.125rem;
  }
}

@media (max-width: 559.98px) {
  .page-head {
    min-height: 0;
    padding: calc(var(--header-h) + 32px) 0 32px;
  }

  .page-head__logo {
    width: 110px;
    margin-bottom: 20px;
  }

  .page-head__logo--wide {
    width: 180px;
  }

  .page-head__logo--lf {
    width: 260px;
  }

  .page-head__title {
    font-size: 2.25rem;
  }

  .page-head__lead {
    font-size: 1.0625rem;
  }

    .page-head__actions .btn {
    flex: 1 1 100%;
  }

  .page-head__by {
    font-size: 0.9375rem;
  }
}

.shot {
  padding: 64px 0;
  background: #f3f5f8;
}

.device--lg {
  max-width: 1040px;
  margin: 0 auto 66px;
  box-shadow: 0 40px 70px -25px rgba(0, 0, 0, 0.65);
}

.shot__caption {
  margin: 8px 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #395265;
  text-align: center;
}

@media (max-width: 899.98px) {
  .shot {
    padding: 48px 0;
  }
}

@media (max-width: 559.98px) {
  .shot {
    padding: 40px 0;
  }

  .device--lg {
    margin-bottom: 26px;
  }

    .shot__caption {
    font-size: 0.8125rem;
  }
}

.overview {
  padding: 40px 0 96px;
  color: #130930;
  background: #f3f5f8;
}

.overview__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
}

.overview__title {
  margin: 0;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #130930;
}

.overview__accent {
  color: var(--purple);
}

.overview__lead {
  max-width: 800px;
  margin: 18px 0 0;
  font-size: 1.2rem;
  line-height: 1.55;
  color: #130930;
}

.overview__video {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 7 / 3;
  margin-top: 28px;
  padding: 32px 24px;
  color: var(--white);
  text-align: center;
  border-radius: 18px;
  background:
    radial-gradient(520px 240px at 88% 75%, rgba(112, 14, 253, 0.5), transparent 70%),
    radial-gradient(460px 200px at 8% 100%, rgba(40, 90, 220, 0.45), transparent 70%),
    linear-gradient(160deg, #0f1d55, #0b0d3a 55%, #1a0b52);
  box-shadow: 0 24px 60px rgba(40, 20, 120, 0.22);
}

.overview__wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.overview__play {
  position: relative;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin-bottom: 26px;
  border-radius: 50%;
  background: #19face;
  box-shadow: 0 0 0 12px rgba(25, 250, 206, 0.12), 0 0 40px rgba(25, 250, 206, 0.35);
}

.overview__play svg {
  width: 28px;
  height: 28px;
  margin-left: 3px;
  fill: #0f093b;
}

.overview__video-title {
  position: relative;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

.overview__time {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 6px 14px;
  font-size: 0.875rem;
  color: #c9d3e3;
  background: rgba(60, 90, 200, 0.3);
  border-radius: 999px;
}

.overview__time svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.facts {
  margin: 0;
  padding: 0 36px;
  list-style: none;
  background: var(--white);
  border: 1px solid #e3e6ee;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(15, 9, 59, 0.06);
}

.facts__item {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  column-gap: 28px;
  padding: 32px 0;
}

.facts__item + .facts__item {
  border-top: 1px solid #e6e9f1;
}

.facts__icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  color: var(--purple);
  background: #efeafe;
  border-radius: 50%;
}

.facts__icon--teal {
  color: #13b5a0;
  background: #d8f6f1;
}

.facts__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.facts__title {
  margin: 14px 0 10px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: #130930;
}

.facts__text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #395265;
}

@media (max-width: 1099.98px) {
  .overview__inner {
    gap: 32px;
  }

  .overview__title {
    font-size: 2.75rem;
  }

  .facts {
    padding: 0 28px;
  }
}

@media (max-width: 899.98px) {
  .overview {
    padding: 24px 0 72px;
  }

  .overview__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 559.98px) {
  .overview {
    padding: 16px 0 56px;
  }

  .overview__title {
    font-size: 2.125rem;
  }

  .overview__lead {
    font-size: 1.0625rem;
  }

  .overview__video {
    aspect-ratio: auto;
    min-height: 240px;
  }

  .overview__play {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
  }

  .overview__play svg {
    width: 24px;
    height: 24px;
  }

  .overview__video-title {
    font-size: 1rem;
  }

  .facts {
    padding: 0 20px;
    border-radius: 18px;
  }

  .facts__item {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px;
    padding: 24px 0;
  }

  .facts__icon {
    width: 48px;
    height: 48px;
  }

  .facts__icon svg {
    width: 24px;
    height: 24px;
  }

  .facts__title {
    margin-top: 10px;
    font-size: 1.25rem;
  }

  .facts__text {
    font-size: 1rem;
  }
}
.features {
  padding: 0 0 96px;
  color: #130930;
  background: #f3f5f8;
}

.features__title {
  margin: 0 0 30px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
 
  color: #130930;
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 24px;
  padding: 24px 28px 26px 24px;
  background: var(--white);
  border: 1px solid #e3e6ee;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.03), 0 10px 30px rgba(15, 9, 59, 0.04);
}

.feature__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--purple);
  background: #efeafe;
  border-radius: 50%;
}

.feature__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature__title {
  margin: 8px 0 8px;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.3;
  color: #130930;
}

.feature__text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #395265;
}

.feature__tag {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: #5b0bd1;
  border: 1.5px dashed #700efd;
  border-radius: 999px;
}

@media (max-width: 1199.98px) {
  .features {
    padding: 0 0 72px;
  }

  .features__title {
    font-size: 2.5rem;
  }
}

@media (max-width: 899.98px) {
  .features__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 559.98px) {
  .features {
    padding: 0 0 56px;
  }

  .features__title {
    margin-bottom: 28px;
    font-size: 2rem;
  }

  .feature {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    padding: 20px;
  }

  .feature__icon {
    width: 44px;
    height: 44px;
  }

  .feature__icon svg {
    width: 20px;
    height: 20px;
  }

  .feature__title {
    margin-top: 6px;
    font-size: 1.125rem;
  }

  .feature__text {
    font-size: 1rem;
  }
}


.tryit {
  padding: 0 0 96px;
  color: #130930;
  background: #f3f5f8;
}

.tryit__title {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #130930;
}

.tryit__lead {
  max-width: calc(100% - 310px);
  margin: 14px 0 0;
  font-size: 1.2rem;
  line-height: 1.55;
  color: #395265;
}

.tryit__lead b {
  color: #130930;
}

.dp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  align-items: start;
  gap: 40px;
  margin-top: 28px;
}

.dp-main {
  min-width: 0;
}

.dp-steps {
  display: flex;
  flex-wrap: wrap;
    gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.dp-steps li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #130930;
  background: var(--white);
  border: 1px solid #d5d9e3;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.04), 0 6px 16px rgba(15, 9, 59, 0.04);
}

.dp-steps li b {
  display: grid;
  place-items: center;
    flex: none;
  width: 22px;
  height: 22px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #130930;
  background: #dfe3ec;
  border-radius: 50%;
}

.dp-steps li.now {
  color: var(--purple);
  background: linear-gradient(180deg, #f3edff, #ebe2fd);
  border-color: rgba(112, 14, 253, 0.45);
  box-shadow: 0 6px 18px rgba(112, 14, 253, 0.14);
}

.dp-steps li.now b {
  color: var(--white);
  background: linear-gradient(135deg, #7a1efe, #5e03fc);
}

.dp-steps li.done {
  color: #0f6b44;
  background: linear-gradient(180deg, #effaf4, #e3f5eb);
  border-color: rgba(19, 115, 74, 0.35);
  box-shadow: 0 6px 18px rgba(19, 115, 74, 0.1);
}

.dp-steps li.done b {
  font-size: 0;
  color: var(--white);
  background: linear-gradient(135deg, #1f9a63, #0f6b44);
}

.dp-steps li.done b::after {
  content: "\2713";
  font-size: 0.8rem;
}

.dp-hint {
  margin: 0 0 12px;
  padding: 10px 14px;
  font-size: 0.95rem;
  background: rgba(112, 14, 253, 0.08);
  border-left: 3px solid #700efd;
  border-radius: 6px;
}

.dp-toast {
  display: none;
}

.dp-app {
  overflow: hidden;
  font-size: 12px;
  color: #111;
  background: var(--white);
  border: 1px solid #c3cbd8;
  border-radius: 10px;
  box-shadow: 0 24px 50px -30px rgba(8, 12, 74, 0.45);
}

.ir-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 11px;
}

.ir-title img {
  width: auto;
  height: 13px;
}

.ir-menu {
  display: flex;
  gap: 14px;
  padding: 1px 8px 4px;
  font-size: 11px;
}

.ir-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 186px;
  min-height: 470px;
  border-top: 1px solid #c9d4e4;
}

.ir-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid #c9d4e4;
}

.ir-tabs {
  display: flex;
  font-size: 11.5px;
  border-bottom: 1px solid #9db3d6;
}

.ir-tabs span {
  padding: 3px 10px;
}

.ir-tabs .on {
  color: var(--white);
  background: #a9c4ec;
}

.ir-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid #d7deea;
}

.ir-h {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: #0b1f6b;
}

.ir-h small {
  font-size: 13px;
}

.ir-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11.5px;
  color: #111;
}

.ir-acts .sel {
  padding: 0 3px;
  background: #e3eefb;
  outline: 1px solid #9db3d6;
}

.ir-view {
  flex: 1;
  min-width: 0;
  min-height: 330px;
  padding: 8px;
}

.ir-cnt {
  margin-bottom: 5px;
  font-size: 11.5px;
  font-weight: 700;
}

.ir-tw {
  overflow-x: auto;
}

.ir-t {
  width: 100%;
  min-width: 470px;
  font-size: 11px;
  border-collapse: collapse;
}

.ir-t th {
  padding: 3px 4px;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
  background: #f0f1f4;
  border: 1px solid #d9dce3;
  border-width: 0 1px 1px 0;
}

.ir-t td {
  padding: 4px;
  white-space: nowrap;
  vertical-align: middle;
  border-bottom: 1px solid #eef0f4;
}

.ir-t td:last-child,
.ir-t th:last-child {
  width: 26px;
  padding-right: 2px;
}

.ir-t .r {
  text-align: right;
}

.ir-t tr[data-id] {
  cursor: grab;
}

.ir-t tbody tr:hover {
  background: #f6f2ea;
}

.ir-t tr.in {
  background: #e7f6e2;
}

.ir-t tr.dragging {
  opacity: 0.5;
}

.ir-grip {
  width: 14px;
  padding: 0 0 0 3px;
  color: #9aa0aa;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.ir-grip span {
  display: inline-block;
  padding: 2px 1px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.ir-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  max-width: 240px;
  overflow: hidden;
  padding: 7px 11px;
  font: 600 13px system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #1c2a44;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--white);
  border: 1.5px solid #700efd;
  border-radius: 8px;
  box-shadow: 0 10px 24px -8px rgba(19, 9, 48, 0.45);
  pointer-events: none;
}

@media (hover: none) {
  .ir-t .ir-grip {
    width: 30px;
    padding: 0 4px;
  }

  .ir-grip span {
    padding: 6px 4px;
    font-size: 18px;
  }
}

.ir-fl {
  line-height: 1.45;
}

.ir-fl i {
  color: #222;
}

.ir-fl sup {
  font-size: 8px;
}

.ir-fl .big {
  font-size: 13.5px;
}

.ir-car {
  display: inline-block;
  padding: 2px 5px;
  font-size: 8px;
  font-weight: 700;
  color: var(--white);
  border-radius: 2px;
}

.ir-car.EK {
  background: #d71921;
}

.ir-car.BA {
  background: #1b3b7a;
}

.ir-flag {
  display: inline-block;
  margin-right: 2px;
  padding: 1px 4px;
  font-size: 10px;
}

.ir-flag.SH {
  color: #943a00;
  background: #ffba94;
}

.ir-flag.BAG {
  color: #ffd9c2;
  background: #8c3a00;
}

.ir-flag.J {
  color: var(--white);
  background: #0b1f6b;
}

.ir-own {
  padding: 0 5px;
  font-weight: 700;
  color: #5b0bd1;
  background: #efe6ff;
  border-radius: 3px;
}

.ir-add {
  width: 22px;
  height: 20px;
  font-size: 12px;
  line-height: 1;
  color: #0b1f6b;
  background: var(--white);
  border: 1px solid #b9c1cf;
  border-radius: 3px;
  cursor: pointer;
}

tr.in .ir-add {
  color: var(--white);
  background: #2e9e14;
  border-color: #2e9e14;
}

.ir-prog {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 11.5px;
}

.ir-prog[hidden] {
  display: none;
}

.ir-prog i {
  display: block;
  width: 140px;
  height: 11px;
  background: #f2f3f5;
  border: 1px solid #c9ced8;
}

.ir-prog b {
  display: block;
  width: 100%;
  height: 100%;
  background: #2db300;
}

.ir-btabs {
  display: flex;
  flex-wrap: wrap;
  font-size: 11.5px;
  background: #fafafc;
  border-top: 1px solid #c9d4e4;
}

.ir-btabs > * {
  padding: 3px 7px;
  font: inherit;
  color: #111;
  background: none;
  border: 0;
  border-right: 1px solid #dde1e8;
}

.ir-btabs .dis {
  color: #555;
}

.ir-btabs button {
  cursor: pointer;
}

.ir-btabs button:disabled {
  color: #9aa0aa;
  cursor: default;
}

.ir-btabs button.ok {
  background: #b8f09e;
}

.ir-btabs button.on {
  color: var(--white);
  background: #2e9e14;
}

.ir-btabs button[data-v="search"].on {
  background: #0061ad;
}

.ir-status {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 4px 8px;
  font-size: 11px;
  border-top: 1px solid #e3e6ec;
}

.ir-sf {
  display: grid;
  gap: 10px;
  max-width: 560px;
}

.ir-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.ir-grid label {
  display: block;
  font-size: 11.5px;
  color: #111;
}

.ir-grid input {
  display: block;
  width: 100%;
  margin-top: 3px;
  padding: 3px 6px;
  font: inherit;
  font-size: 12px;
  color: #111;
  background: var(--white);
  border: 1px solid #a9afba;
  border-radius: 0;
}

.ir-list {
  height: 62px;
  margin-top: 3px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid #a9afba;
}

.ir-list span {
  display: block;
  padding: 1px 6px;
  font-size: 11.5px;
}

.ir-list .pick {
  color: var(--white);
  background: #52babd;
}

.ir-tog {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 11.5px;
}

.ir-tog span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ir-tog span::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 12px;
  border-radius: 6px;
  background: radial-gradient(circle at 25% 50%, #fff 3.5px, #c9cdd5 4px);
}

.ir-tog .on::before {
  background: radial-gradient(circle at 75% 50%, #fff 3.5px, #8b5cf6 4px);
}

.ir-pax {
  width: 260px;
  font-size: 11.5px;
  border-collapse: collapse;
}

.ir-pax th,
.ir-pax td {
  padding: 2px 6px;
  font-weight: 400;
  text-align: right;
  border: 1px solid #c9ced8;
}

.ir-pax th:first-child,
.ir-pax td:first-child {
  text-align: left;
}

.ir-pax .hl {
  background: #c9c9cf;
}

.ir-search {
  justify-self: start;
  min-width: 220px;
  padding: 5px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--white);
  background: #0b1f6b;
  border: 1px solid #0b1f6b;
  cursor: pointer;
}

.ir-search:hover {
  background: #13308f;
}

.ir-busy {
  display: grid;
  gap: 8px;
  max-width: 340px;
  padding: 30px 8px;
  font-size: 12px;
}

.ir-busy i {
  display: block;
  height: 11px;
  overflow: hidden;
  background: #f2f3f5;
  border: 1px solid #c9ced8;
}

.ir-busy b {
  display: block;
  width: 30%;
  height: 100%;
  background: #2db300;
  animation: irload 1s ease-in-out infinite;
}

.ir-bk {
  display: flex;
  flex-direction: column;
  background: var(--white);
  transition: background-color 0.15s, box-shadow 0.15s;
}

.ir-bk.over {
  background: #fff7ec;
  box-shadow: inset 0 0 0 2px #d6b28c;
}

.ir-bkt {
  padding: 3px 8px;
  font-size: 12.5px;
  color: #f70000;
  border-bottom: 1px solid #d7deea;
}

.ir-bki {
  padding: 3px 8px;
  font-size: 13px;
  letter-spacing: 4px;
  text-align: right;
  color: #222;
}

.ir-kv {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding: 4px 10px 8px;
  font-size: 12px;
}

.ir-kv b {
  font-weight: 400;
  text-align: right;
}

.ir-bk .dp-lines {
  display: grid;
  flex: 1;
  align-content: start;
  gap: 5px;
  min-height: 120px;
  margin: 0 8px;
  padding: 4px;
  background: #fcfcfd;
  border: 1.5px dashed #c9ced8;
  border-radius: 4px;
}

.ir-bk .dp-empty {
  margin: auto;
  font-size: 11.5px;
  text-align: center;
  color: #7a818d;
}

.ir-bk .dp-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 3px 5px;
  font-size: 11.5px;
  background: #f4f6fa;
  border-radius: 2px;
}

.ir-bk .dp-line button {
  padding: 0 3px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #b4232f;
  background: none;
  border: 0;
  cursor: pointer;
}

.ir-bk .dp-tot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1px 8px;
  margin: 8px 10px 6px;
  font-size: 12px;
}

.ir-bk .dp-tot b {
  text-align: right;
}

.ir-bk .dp-tot span:nth-child(-n+4) {
  font-weight: 700;
}

.ir-bk .dp-tot .lfh {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #5b0bd1;
}

.ir-bk .dp-tot .lfh::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 4px;
  vertical-align: -2px;
  background: url('../img/localfees-icon.png') center / contain no-repeat;
}

.ir-bk .dp-tot .big {
  margin-top: 2px;
  padding-top: 2px;
  font-size: 13px;
  color: #080c4a;
  border-top: 1px solid #dde1e8;
}

.ir-bk .dp-quote {
  margin: 4px 8px 8px;
  padding: 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  background: #0b1f6b;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.ir-bk .dp-quote:disabled {
  background: #b9bfcc;
  cursor: not-allowed;
}

.ir-bk .dp-reset {
  margin: 0 8px 8px;
  padding: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #0b1f6b;
  background: #f4f4f7;
  border: 1px solid #a9afba;
  border-radius: 3px;
  cursor: pointer;
}

.ir-bk .dp-reset:hover {
  background: #e8eaf0;
}

.ir-bk .dp-reset[hidden] {
  display: none;
}

.ir-search.pulse,
.dp-quote.pulse {
  animation: irpulse 1.6s ease-in-out infinite;
}

@keyframes irload {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(260%);
  }
}

@keyframes irpulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(112, 14, 253, 0.55);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(112, 14, 253, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ir-search.pulse,
  .dp-quote.pulse {
    animation: none;
  }
}

.dp-side {
  position: sticky;
  top: calc(var(--header-h) + 20px);
}

.dp-phone {
  width: 270px;
  max-width: 100%;
  margin: 0 auto;
  padding: 12px;
  background: #130930;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 44px;
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.7);
}

.dp-phone__in {
  position: relative;
  height: 540px;
  overflow: hidden;
  color: #130930;
  background: var(--white);
  border-radius: 33px;
}

.dp-phone__in::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%);
  pointer-events: none;
}

.dp-itin {
  height: 100%;
  overflow-y: auto;
  padding-bottom: 28px;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  color: #1c2a44;
  background: var(--white);
  scrollbar-width: none;
}

.dp-itin::-webkit-scrollbar {
  display: none;
}

.dp-wait {
  display: grid;
  place-content: center;
  gap: 6px;
  height: 100%;
  padding: 24px;
  text-align: center;
  color: #5b6b7a;
}

.dp-wait b {
  font-size: 1rem;
  color: #1c2a44;
}

.ti-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 12px 4px;
}

.ti-logo {
  width: 46px;
  height: 30px;
}

.ti-wm {
  font: 800 17px/1 var(--font);
  color: #0b3a73;
}

.ti-wm small {
  display: block;
  font: 600 8px/1.4 system-ui, sans-serif;
  letter-spacing: 3px;
  color: #0b3a73;
}

.ti-burger {
  position: absolute;
  top: 16px;
  right: 12px;
  width: 20px;
  height: 2px;
  background: #444;
  box-shadow: 0 6px 0 #444, 0 12px 0 #444;
}

.ti-brand {
  padding: 6px 10px 10px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  color: #0b3a73;
}

.ti-brand small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #0b3a73;
}

.ti-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 190px;
  background: url('../img/tripbuilder-dubai.jpg') center / cover no-repeat;
}

.ti-hero span {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--white);
  background: linear-gradient(180deg, rgba(40, 20, 80, 0.15), rgba(15, 15, 60, 0.75));
}

.ti-sub {
  padding: 10px;
  font-size: 14px;
  text-align: center;
  color: #111;
  background: #e0e0e0;
}

.ti-price {
  padding: 10px 12px 12px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--white);
  background: #0aa0e6;
}

.ti-price b {
  display: inline-block;
  margin-bottom: 4px;
  padding-bottom: 1px;
  font-size: 17px;
  font-weight: 500;
  border-bottom: 1.5px solid #fff;
}

.ti-price u {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.ti-split {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 2px 0 4px;
  font-weight: 700;
}

.ti-day {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding: 10px 12px;
  font-size: 15px;
  color: #9ba1aa;
  background: #f4f4f6;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.06);
}

.ti-day b {
  font-weight: 800;
  color: #9ba1aa;
}

.ti-day span {
  font-weight: 400;
}

.ti-dl {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #9ba1aa;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ti-items {
  border-top: 4px solid #2e3a87;
}

.ti-it {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12.5px;
  border-bottom: 1px solid #eef0f3;
}

.ti-it i {
  font-style: normal;
  text-align: center;
}

.ti-it small {
  display: block;
  font-size: 11px;
  color: #6a7385;
}

.ti-lf {
  margin: 8px 12px;
  padding: 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #28453b;
  background: #f3faf7;
  border: 1px solid #cfebdf;
  border-radius: 8px;
}

.ti-cb {
  display: block;
  margin: 12px 12px 16px;
  padding: 9px;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  color: var(--white);
  background: #0b3a73;
  border-radius: 8px;
}

@media (max-width: 1199.98px) {
  .tryit {
    padding: 0 0 72px;
  }

  .tryit__title {
    font-size: 2.25rem;
  }

  .ir-t td:last-child,
  .ir-t th:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.25);
  }

  .ir-t td:last-child {
    background: var(--white);
  }

  .ir-t tr.in td:last-child {
    background: #e7f6e2;
  }

  .ir-t tbody tr:hover td:last-child {
    background: #f6f2ea;
  }
}

@media (max-width: 1099.98px) {
  .tryit__lead {
    max-width: none;
  }

  .dp {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .dp-side {
    position: static;
  }
}

@media (max-width: 559.98px) {
  .tryit {
    padding: 0 0 56px;
  }

  .tryit__title {
    font-size: 1.875rem;
  }

  .tryit__lead {
    font-size: 1.0625rem;
  }

  .dp-steps li {
    font-size: 0.8125rem;
  }

  .dp-hint {
    position: sticky;
    top: var(--header-h);
    z-index: 5;
    font-size: 0.875rem;
    background: #e9e3f8;
    box-shadow: 0 6px 12px -8px rgba(15, 9, 59, 0.35);
  }

  .dp-toast {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    font-size: 0.875rem;
    color: var(--white);
    background: #130930;
    border-radius: 10px;
    box-shadow: 0 12px 30px -10px rgba(19, 9, 48, 0.6);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
  }

  .dp-toast.show {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .dp-toast button {
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--cyan);
    white-space: nowrap;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .ir-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .ir-main {
    border-right: 0;
  }

  .ir-bk {
    border-top: 1px solid #c9d4e4;
  }

  .ir-pax {
    width: 100%;
  }

  .ir-search {
    justify-self: stretch;
  }
}
.proof {
  padding: 32px 0 96px;
  color: #130930;
  background: #f3f5f8;
}

.proof__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 32px;
}

.proof__voice {
  position: relative;
  overflow: hidden;
  padding: 52px 36px 64px;
background: linear-gradient(160deg, #fdfcff, #f4f1ff);
  border: 1px solid #e6e3f5;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(76, 40, 180, 0.08);
}

.proof__voice::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/proof-bg.png') right bottom / 90% auto no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

 

.proof__tag,
.proof__quote,
.proof__text,
.proof__cite {
  position: relative;
}

.proof__tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #5b0bd1;
  background: #ebe3fd;
  border-radius: 999px;
}

.proof__quote {
  margin: 28px 0 22px 48px;
  font-size: 2.375rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #130930;
}

.proof__quote::before,
.proof__quote::after {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  background: linear-gradient(180deg, #b48cff, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.proof__quote::before {
  content: "\201C";
  position: absolute;
  top: -0.06em;
  left: -0.8em;
  font-size: 1.5em;
  line-height: 1;
}

.proof__quote::after {
  content: "\201D";
  position: relative;
  top: 0.32em;
  margin-left: 0.08em;
  font-size: 1.3em;
  line-height: 0;
}

.proof__text {
  margin: 0 0 0 48px;
  font-size: 1.125rem;
  line-height: 1.65;
  color: #395265;
}

.proof__cite {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0 0 48px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #395265;
}

.proof__cite strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #130930;
}

.proof__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 60px;
  height: 60px;
  font-size: 1rem;
  font-weight: 600;
  color: #130930;
  background: #c9d0dc;
  border-radius: 50%;
}

.faq {
  padding: 36px 32px 32px;
  background: var(--white);
  border: 1px solid #e6e9f1;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(15, 9, 59, 0.06);
}

.faq__title {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #130930;
}

.faq__lead {
  max-width: 560px;
  margin: 12px 0 24px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: #395265;
}

.faq__item {
  overflow: hidden;
  background: var(--white);
  border: 1px solid #e3e6ee;
  border-top-width: 0;
}

.faq__item:first-of-type {
  border-top-width: 1px;
  border-radius: 14px 14px 0 0;
}

.faq__item:last-of-type {
  border-radius: 0 0 14px 14px;
}

.faq__item[open] {
  margin: 14px 0;
  border-top-width: 1px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(112, 14, 253, 0.08);
}

.faq__item[open]:first-of-type {
  margin-top: 0;
}

.faq__item[open]:last-of-type {
  margin-bottom: 0;
}

.faq__item[open] + .faq__item {
  border-top-width: 1px;
  border-radius: 14px 14px 0 0;
}

.faq__item[open] + .faq__item:last-of-type {
  border-radius: 14px;
}

.faq__item:has(+ .faq__item[open]) {
  border-radius: 0 0 14px 14px;
}

.faq__item:first-of-type:has(+ .faq__item[open]),
.faq__item[open] + .faq__item:has(+ .faq__item[open]) {
  border-radius: 14px;
}

.faq__q {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: #130930;
  list-style: none;
  cursor: pointer;
}

.faq__q::-webkit-details-marker {
  display: none;
}
 

.faq__q::after {
  content: "+";
  flex: none;
  margin-left: auto;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: #700efd;
}

 
.faq__item[open] .faq__q::after {
  content: "\2212";
}

.faq__a {
  margin: 0;
    padding: 16px 24px 20px 20px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #395265;
  background: linear-gradient(180deg, #fbf9ff, #f7f4ff);
}

.faq__a a {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1199.98px) {
  .proof {
    padding: 24px 0 72px;
  }

  .proof__voice {
    padding: 44px 40px 56px;
  }

  .proof__quote {
    font-size: 2rem;
  }

  .faq__title {
    font-size: 2.25rem;
  }
}

@media (max-width: 899.98px) {
  .proof__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 559.98px) {
	.site-header__logo img {
 
    height: 32px;
}
  .proof {
    padding: 16px 0 56px;
  }

  .proof__voice {
    padding: 32px 22px 44px;
    border-radius: 18px;
  }

  .proof__quote {
    margin: 22px 0 18px 30px;
    font-size: 1.5rem;
  }

  .proof__text,
  .proof__cite {
    margin-left: 30px;
  }

  .proof__text,
  .faq__a {
    font-size: 1rem;
  }

  .proof__avatar {
    width: 48px;
    height: 48px;
    font-size: 0.875rem;
  }

  .faq {
    padding: 26px 16px 18px;
    border-radius: 18px;
  }

  .faq__title {
    font-size: 1.875rem;
  }

  .faq__lead {
    font-size: 1rem;
  }

  .faq__q {
    gap: 12px;
    padding: 12px 14px;
    font-size: 1rem;
  }

  .faq__a {
    padding: 14px 16px 18px;
  }
}

.ways {
  padding: 72px 0 96px;
  color: #130930;
  background: #f3f5f8;
}

.ways__tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #5b0bd1;
  background: #ebe3fd;
  border-radius: 999px;
}

.ways__title {
  margin: 16px 0 0;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #130930;
}

.ways__lead {
  max-width: 760px;
  margin: 14px 0 0;
  font-size: 1.2rem;
  line-height: 1.55;
  color: #395265;
}

.ways__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.way {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid #e3e6ee;
  border-radius: 0 14px 14px 0;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.03), 0 10px 30px rgba(15, 9, 59, 0.04);
}

.way::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 3px;
  background: var(--purple);
}

.way__body {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 16px;
  padding: 24px 24px 22px;
}

.ways__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--purple);
  background: #f1ecfe;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(112, 14, 253, 0.08);
}

.ways__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.way__title {
  margin: 2px 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: #130930;
}

.way__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #395265;
}

.way__foot {
  margin: auto 24px 0;
  padding: 0 0 28px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #130930;
}

.way__foot a {
  font-weight: 500;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.way__arrow {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-left: 8px;
  vertical-align: -0.2em;
  color: var(--purple);
}

.ways__quote {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 24px;
  margin: 28px 0 0;
  padding: 28px 32px;
  background: linear-gradient(160deg, #f8f5ff, #f1ecfe);
  border: 1px solid #e6e3f5;
  border-radius: 14px;
}

.ways__quote-mark {
  align-self: start;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--purple);
  background: #e9e0fd;
  border-radius: 50%;
}

.ways__quote-mark::before {
  content: "\201C";
  position: relative;
  top: 0.24em;
}

.ways__quote-text {
  max-width: 600px;
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #130930;
}

.ways__quote-text p {
  margin: 0;
}

.ways__quote-cite {
  margin: 10px 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #395265;
}

.ways__quote-cite strong {
  font-weight: 700;
  color: #130930;
}

.ways__quote-cite a {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ways__person {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 24px 8px 40px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #395265;
  border-left: 1px solid #ddd8ef;
}

.ways__person strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #130930;
}

.ways__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  font-size: 1rem;
  font-weight: 600;
  color: #130930;
  background: #c9d0dc;
  border-radius: 50%;
}

.ways__note {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  column-gap: 24px;
  margin: 24px 0 0;
  padding: 24px 32px;
  background: var(--white);
  border: 1px solid #e3e6ee;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.03), 0 10px 30px rgba(15, 9, 59, 0.04);
}

.ways__note-title {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: #130930;
}

.ways__note-text {
  max-width: 760px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #395265;
}

.ways__actions {
  display: flex;
  margin-top: 32px;
}

@media (max-width: 1199.98px) {
  .ways {
    padding: 56px 0 72px;
  }

  .ways__title {
    font-size: 2.25rem;
  }
}

@media (max-width: 1099.98px) {
  .way__body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }
}

@media (max-width: 899.98px) {
  .ways__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .way__body {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .way__foot {
    margin-left: 88px;
  }

  .ways__quote {
    grid-template-columns: 48px minmax(0, 1fr);
    row-gap: 20px;
  }

  .ways__person {
    grid-column: 2;
    padding: 20px 0 0;
    border-top: 1px solid #ddd8ef;
    border-left: 0;
  }
}

@media (max-width: 559.98px) {
  .ways {
    padding: 40px 0 56px;
  }

  .ways__title {
    font-size: 1.875rem;
  }

  .ways__lead {
    font-size: 1.0625rem;
  }

  .way__body {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    padding: 20px 18px 18px;
  }

  .ways__icon {
    width: 44px;
    height: 44px;
  }

  .ways__icon svg {
    width: 20px;
    height: 20px;
  }

  .way__title {
    font-size: 1.125rem;
  }

.way__foot {
    margin: auto 18px 0 76px;
  }

  .ways__quote {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px 20px;
  }

  .ways__quote-mark {
    width: 40px;
    height: 40px;
    font-size: 2.25rem;
  }

  .ways__quote-text {
    font-size: 1.125rem;
  }

  .ways__person {
    grid-column: 1;
  }

  .ways__note {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
    padding: 22px 20px;
  }

  .ways__note-title {
    font-size: 1.125rem;
  }

  .ways__actions .btn {
    flex: 1 1 100%;
  }
}
.search {
  padding: 0 0 96px;
  color: #130930;
  background: #f3f5f8;
}

.search__title {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #130930;
}

.search__lead {
  max-width: 900px;
  margin: 14px 0 0;
  font-size: 1.2rem;
  line-height: 1.55;
  color: #395265;
}

.search__brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 28px 0 24px;
}

.search__label {
  margin-right: 4px;
  font-size: 1.0625rem;
  color: #395265;
}

.search__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px 0 12px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #130930;
  background: var(--white);
  border: 1px solid #d5d9e3;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.04), 0 6px 16px rgba(15, 9, 59, 0.04);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.search__brand:hover {
  border-color: #b9c1d3;
}

.search__brand[aria-pressed="true"] {
  color: var(--white);
  background: #1d0f55;
  border-color: #1d0f55;
}

.search__brand svg {
  flex: none;
  width: 18px;
  height: 18px;
}
.wdg {
  --w-p: #0aa0e6;
  --w-a: #ffb400;
  --w-ink: #0b2540;
  --w-bg: #f4f7fb;
  --w-r: 10px;
  --w-head: var(--font);
  overflow: hidden;
  color: var(--w-ink);
  background: var(--white);
  border: 1px solid #e3e6ee;
  border-radius: 18px;
  box-shadow: 0 30px 60px -30px rgba(15, 9, 59, 0.25), 0 10px 30px rgba(15, 9, 59, 0.05);
}

.wdg[data-skin="alpine"] {
  --w-p: #b8192e;
  --w-a: #1d3b2a;
  --w-ink: #1a1a1a;
  --w-bg: #fbf8f3;
  --w-r: 3px;
  --w-head: Georgia, 'Times New Roman', serif;
}

.wdg[data-skin="coast"] {
  --w-p: #0e7c66;
  --w-a: #f26b3a;
  --w-ink: #0f2e2a;
  --w-bg: #f2fbf8;
  --w-r: 22px;
}

.w-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 28px;
  color: var(--white);
  background: var(--w-p);
}

.w-logo {
  display: block;
  flex: none;
  width: 34px;
  height: 34px;
}

.w-logo svg {
  display: none;
  width: 100%;
  height: 100%;
}

.wdg[data-skin="sunny"] .w-logo__sunny,
.wdg[data-skin="alpine"] .w-logo__alpine,
.wdg[data-skin="coast"] .w-logo__coast {
  display: block;
}

.w-name {
font-family: var(--w-head);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
}

.w-tag {
  margin-left: auto;
  font-size: 0.87rem;
  opacity: 0.9;
}

.w-form {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.8fr) minmax(0, 1.35fr) minmax(0, 0.9fr) minmax(0, 0.85fr) auto;
  align-items: end;
  gap: 16px;
  padding: 22px 28px 24px;
  background: var(--white);
  border-bottom: 1px solid #e6eaf1;
}

.w-f {
  display: block;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--w-ink);
}

.w-field {
  position: relative;
  display: block;
  margin-top: 8px;
}

.w-field svg {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.w-field select,
.w-field input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 40px 0 46px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--w-ink);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23130930' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
  border: 1px solid #d5dbe5;
  border-radius: var(--w-r);
  -webkit-appearance: none;
  appearance: none;
}

.w-field input[type="date"] {
  padding-right: 14px;
  background-image: none;
}

.w-field input[type="date"]::-webkit-calendar-picker-indicator {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23130930' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
  opacity: 1;
  cursor: pointer;
}

.w-field select:focus,
.w-field input:focus {
  outline: none;
  border-color: var(--w-p);
  box-shadow: 0 0 0 1px var(--w-p);
}

.w-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  background: var(--w-a);
  border: 0;
  border-radius: var(--w-r);
  cursor: pointer;
  transition: filter 0.2s;
}

.w-go:hover {
  filter: brightness(0.95);
}

.w-go svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wdg[data-skin="sunny"] .w-go {
  color: #130930;
}

.w-out {
  min-height: 92px;
  padding: 24px 28px;
  background: var(--w-bg);
}

.w-hint {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: 1rem;
  color: #5b6b7a;
}

.w-hint__i {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  color: #4a62b8;
  background: #e3e9f7;
  border-radius: 50%;
}

.w-hint__i svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.w-load {
  display: grid;
  gap: 8px;
  max-width: 420px;
  font-size: 0.9375rem;
}

.w-load i {
  position: relative;
  display: block;
  overflow: hidden;
  height: 6px;
  background: #dde7ef;
  border-radius: 6px;
}

.w-load i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--w-p);
  border-radius: 6px;
  animation: wload 1s ease-in-out infinite;
}

@keyframes wload {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(260%);
  }
}

.w-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.875rem;
  color: #5b6b7a;
}

.w-meta b {
  color: var(--w-ink);
}

.w-cma {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 12px;
  font-size: 0.875rem;
  color: #0e5e45;
  background: #e6f7f0;
  border-radius: var(--w-r);
}

.w-cma span {
  font-weight: 800;
}

.w-dates {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 18px;
  padding-bottom: 6px;
}

.w-date {
  flex: 0 0 auto;
  min-width: 100px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--w-ink);
  text-align: center;
  background: var(--white);
  border: 1px solid #d5e1ea;
  border-radius: var(--w-r);
  cursor: pointer;
}

.w-date b {
  display: block;
  font-size: 0.9375rem;
}

.w-date.on {
  border-color: var(--w-p);
  box-shadow: inset 0 0 0 1px var(--w-p);
}

.w-date.cheap b {
  color: #0e8a5f;
}

.w-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
}

.w-filters {
  font-size: 0.875rem;
}

.w-ftoggle {
  display: none;
}

.w-fgroup {
  margin-bottom: 18px;
}

.w-filters h4 {
  margin: 0 0 8px;
  font-family: var(--w-head);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--w-ink);
}

.w-filters label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  font-size: 0.875rem;
  color: var(--w-ink);
}

.w-filters input {
  margin: 0;
}

.w-filters select {
  width: 100%;
  height: 40px;
  padding: 0 34px 0 10px;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--w-ink);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23130930' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
  border: 1px solid #d5dbe5;
  border-radius: var(--w-r);
  -webkit-appearance: none;
  appearance: none;
}

.w-res {
  display: grid;
  gap: 12px;
}

.w-card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: 18px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid #e1e9f0;
  border-radius: var(--w-r);
}

.w-thumb {
  position: relative;
  min-height: 130px;
}

.w-thumb span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 8px;
  font-size: 0.75rem;
  color: var(--white);
  background: rgba(0, 0, 0, 0.55);
  border-radius: 4px;
}

.w-info {
  min-width: 0;
  padding: 14px 0;
}

.w-info h5 {
  margin: 0 0 2px;
  font-family: var(--w-head);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--w-ink);
}

.w-stars {
  font-size: 0.8125rem;
  letter-spacing: 1px;
  color: #e6a700;
}

.w-info p {
  margin: 4px 0 0;
  font-size: 0.875rem;
  color: #4a5a69;
}

.w-info p.w-msg {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 0.8125rem;
  color: #3e4e5c;
  background: #f4f7fb;
  border-radius: var(--w-r);
}

.w-src {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
}

.w-src.own {
  color: #5b0bd1;
  background: #efe6ff;
}

.w-src.api {
  color: #0b5f8a;
  background: #e3f2fb;
}

.w-price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 170px;
  max-width: 240px;
  padding: 14px 18px;
  text-align: right;
  border-left: 1px solid #eef2f6;
}

.w-price small {
  font-size: 0.75rem;
  color: #5b6b7a;
}

.w-just {
  font-weight: 600;
}

.w-price b {
  font-family: var(--w-head);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--w-ink);
}

.w-price b span {
  margin-left: 1px;
  font-size: 0.8125rem;
  font-weight: 700;
}

.w-split {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: end;
  gap: 1px 10px;
  margin: 4px 0 2px;
  font-size: 0.75rem;
  color: #3e4e5c;
}

.w-split span:nth-child(even) {
  font-weight: 700;
  text-align: right;
  color: var(--w-ink);
}

.w-lf {
  margin-top: 2px;
  font-size: 0.75rem;
  text-align: left;
}

.w-lf summary {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0e5e45;
  list-style: none;
  cursor: pointer;
}

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

.w-lf summary::after {
  content: "\24D8";
  font-size: 0.8125rem;
}

.w-lf div {
  margin-top: 6px;
  padding: 8px 10px;
  line-height: 1.4;
  color: #28453b;
  background: #f3faf7;
  border: 1px solid #cfebdf;
  border-radius: 8px;
}

.w-price .w-lf b {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 700;
  color: #112233;
}

.w-lfby {
  display: block;
  margin-top: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #5b0bd1;
}

.w-sel {
  margin-top: 6px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--white);
  background: var(--w-p);
  border: 0;
  border-radius: var(--w-r);
  cursor: pointer;
}

.w-none {
  margin: 0;
  color: #5b6b7a;
}

@media (prefers-reduced-motion: reduce) {
  .w-load i::after {
    animation: none;
  }
}

@media (max-width: 1399.98px) {
  .w-form {
    grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1199.98px) {
  .search {
    padding: 0 0 72px;
  }

  .search__title {
    font-size: 2.25rem;
  }
}

@media (max-width: 899.98px) {
  .w-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .w-f--dest,
  .w-go {
    grid-column: 1 / -1;
  }

  .w-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .w-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .w-card {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 0 18px;
  }

  .w-thumb {
    grid-row: 1 / span 2;
  }

  .w-info {
    padding-right: 16px;
  }

  .w-price {
    grid-column: 2;
    max-width: none;
    padding: 0 16px 14px 0;
    text-align: left;
    border-left: 0;
  }

  .w-split {
    justify-content: start;
  }

  .w-lf summary {
    justify-content: flex-start;
  }
}

@media (max-width: 559.98px) {
  .search {
    padding: 0 0 56px;
  }

  .search__title {
    font-size: 1.875rem;
  }

  .search__lead {
    font-size: 1.0625rem;
  }

  .search__brands {
    gap: 10px;
  }

  .search__label {
    width: 100%;
  }

  .search__brand {
    min-height: 36px;
    padding: 0 14px 0 10px;
    font-size: 0.8125rem;
  }

  .w-brand {
    gap: 12px;
    padding: 12px 18px;
  }

  .w-logo {
    width: 30px;
    height: 30px;
  }

  .w-name {
    font-size: 1rem;
  }

  .w-tag {
    display: none;
  }

  .w-form {
    gap: 14px;
    padding: 18px;
  }

  .w-f--from,
  .w-f--date {
    grid-column: 1 / -1;
  }

  .w-out {
    padding: 18px;
  }

  .w-ftoggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    padding: 0 44px 0 16px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--w-ink);
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23130930' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px;
    border: 1px solid #d5dbe5;
    border-radius: var(--w-r);
    cursor: pointer;
  }

  .w-layout.is-open .w-ftoggle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23130930' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6l6 6'/%3E%3C/svg%3E");
  }

  .w-ftoggle span {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 0.75rem;
    color: var(--white);
    background: var(--w-p);
    border-radius: 999px;
  }

  .w-filters {
    display: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .w-layout.is-open .w-filters {
    display: grid;
  }

  .w-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .w-thumb {
    grid-row: auto;
    min-height: 120px;
  }

  .w-info {
    padding: 14px 16px 0;
  }

  .w-price {
    grid-column: auto;
    padding: 12px 16px 16px;
  }
}

.supply {
  padding: 72px 0 96px;
  color: #130930;
  background: #f3f5f8;
}

.supply__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.supply-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 0;
  background: var(--white);
  border: 1px solid #e3e6ee;
  border-radius: 0 14px 14px 0;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.03), 0 10px 30px rgba(15, 9, 59, 0.04);
}

.supply-card::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 3px;
  background: var(--purple);
}

.supply-card__logo {
  display: flex;
  align-items: center;
  height: 56px;
}

.supply-card__logo img {
  width: auto;
  max-width: 160px;
  max-height: 52px;
  filter: grayscale(1) brightness(0.55);
  opacity: 0.8;
  transition: filter 0.25s, opacity 0.25s;
}

.supply-card:hover .supply-card__logo img,
.supply-card:hover .supply-card__icon {
  filter: none;
  opacity: 1;
}

.supply-card__icon {
  width: 48px;
  height: 48px;
  filter: grayscale(1) brightness(0.55);
  opacity: 0.8;
  transition: filter 0.25s, opacity 0.25s;
}

.supply-card__title {
  margin: 18px 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: #130930;
}

.supply-card__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #395265;
}

.supply-card__text strong {
  font-weight: 700;
  color: #130930;
}

.supply-card__foot {
  margin: auto 0 0;
  padding: 18px 0 22px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.supply-card__foot a {
  font-weight: 500;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.supply-card__arrow {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-left: 8px;
  vertical-align: -0.2em;
  color: var(--purple);
}

.supply__note {
  max-width: 820px;
  margin: 28px 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #395265;
}

.supply__note a {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1199.98px) {
  .supply {
    padding: 56px 0 72px;
  }

  .supply__grid {
    gap: 24px;
  }
}

@media (max-width: 899.98px) {
  .supply__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 559.98px) {
  .supply {
    padding: 40px 0 56px;
  }

  .supply-card {
    padding: 22px 18px 0;
  }

  .supply-card__logo {
    height: 48px;
  }

  .supply-card__logo img {
    max-height: 44px;
  }

  .supply-card__icon {
    width: 42px;
    height: 42px;
  }

  .supply-card__title {
    margin-top: 14px;
    font-size: 1.125rem;
  }

  .supply-card__foot {
    padding-bottom: 18px;
  }

  .supply__note {
    font-size: 1rem;
  }
}
.suppliers {
  padding: 0 0 96px;
  color: #130930;
  background: #f3f5f8;
}

.suppliers__title {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #130930;
}

.suppliers__lead {
  max-width: 720px;
  margin: 14px 0 0;
  font-size: 1.2rem;
  line-height: 1.55;
  color: #395265;
}

.sup-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
}

.sup-search {
  position: relative;
  display: block;
  flex: 0 1 390px;
}

.sup-search svg {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  fill: none;
  stroke: #395265;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.sup-q {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 16px 0 48px;
  font-family: inherit;
  font-size: 1rem;
  color: #130930;
  background: var(--white);
  border: 1px solid #dfe3eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.03), 0 8px 24px rgba(15, 9, 59, 0.04);
  -webkit-appearance: none;
  appearance: none;
}

.sup-q::placeholder {
  color: #8a93a0;
}

.sup-q:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(106, 43, 243, 0.12);
}

.sup-count {
  font-size: 0.9375rem;
  color: #5b6b7a;
}

.sup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 28px;
}

.sup-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 13px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: #130930;
  background: var(--white);
  border: 1px solid #dfe3eb;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.04);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.sup-chip:hover {
  border-color: #c5bdf0;
}

.sup-chip svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--purple);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sup-chip span {
  color: #8a93a0;
}

.sup-chip[aria-pressed="true"] {
  color: var(--white);
  background: var(--purple);
  border-color: var(--purple);
}

.sup-chip[aria-pressed="true"] svg {
  stroke: currentColor;
}

.sup-chip[aria-pressed="true"] span {
  color: inherit;
  opacity: 0.8;
}

.sup-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}

.sup {
  position: relative;
  display: grid;
  place-items: center;
  height: 100px;
  margin: 0;
  padding: 12px 14px 26px;
  background: var(--white);
  border: 1px solid #e3e6ee;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.03), 0 8px 20px rgba(15, 9, 59, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sup img {
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: 40px;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.25s, opacity 0.25s;
}

.sup:hover {
  border-color: #c9bdf6;
  box-shadow: 0 10px 24px -12px rgba(19, 9, 48, 0.25);
}

.sup:hover img {
  filter: none;
  opacity: 1;
}

.sup figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  overflow: hidden;
  padding: 0 8px;
  font-size: 0.7rem;
  color: #6b7685;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sup[hidden] {
  display: none;
}

.sup-none {
  margin: 20px 0 0;
  font-size: 1rem;
  color: #395265;
}

.sup-none[hidden] {
  display: none;
}

.sup-none a {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sup-more {
  display: none;
}

@media (max-width: 1199.98px) {
  .suppliers {
    padding: 0 0 72px;
  }

  .suppliers__title {
    font-size: 2.25rem;
  }

  .sup-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 899.98px) {
  .sup-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 559.98px) {
  .suppliers {
    padding: 0 0 56px;
  }

  .suppliers__title {
    font-size: 1.875rem;
  }

  .suppliers__lead {
    font-size: 1.0625rem;
  }

  .sup-search {
    flex-basis: 100%;
  }

  .sup-chips {
    gap: 8px;
  }

  .sup-chip {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.8125rem;
  }

  .sup-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .sup {
    height: 76px;
    padding: 8px 8px 22px;
    border-radius: 10px;
  }

  .sup img {
    max-height: 28px;
  }

  .sup figcaption {
    bottom: 6px;
    padding: 0 6px;
    font-size: 0.625rem;
  }

  .sup-grid.is-limited .sup:nth-child(n+19) {
    display: none;
  }

  .sup-grid.is-limited + .sup-more {
    display: block;
    width: 100%;
    min-height: 46px;
    margin-top: 14px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #130930;
    background: var(--white);
    border: 1.5px solid #130930;
    border-radius: 999px;
    cursor: pointer;
  }
}

.stories {
  padding: 72px 0 96px;
  color: #130930;
  background: #f3f5f8;
}

.stories__inner {
  display: grid;
  gap: 24px;
}

.cs {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 40px;
  padding: 36px 40px;
  background: var(--white);
  border: 1px solid #e3e6ee;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.03), 0 10px 30px rgba(15, 9, 59, 0.04);
}

.cs__tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: #5b0bd1;
  background: #ebe3fd;
  border-radius: 999px;
}

.cs__logo {
  width: auto;
  max-width: 100%;
  height: var(--h, 40px);
  margin: 22px 0 0;
}

.cs__name {
  margin: 20px 0 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #130930;
}

.cs__desc {
  margin: 10px 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #395265;
}

.cs__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cs__link svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cs__detail {
  padding-left: 40px;
  border-left: 1px solid #e6e9f1;
}

.cs__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: #130930;
}

.cs__text {
  margin: 0 0 22px;
  font-size: 1rem;
  line-height: 1.6;
  color: #395265;
}

.cs__quote {
  margin: 0;
  padding: 18px 22px;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.55;
  color: #130930;
  background: linear-gradient(180deg, #f8f5ff, #f2edff);
  border-radius: 14px;
}

.cs__quote p {
  margin: 0;
}

.stories__actions {
  display: flex;
  margin-top: 8px;
}

@media (max-width: 1199.98px) {
  .stories {
    padding: 56px 0 72px;
  }

  .cs {
    gap: 32px;
    padding: 32px;
  }

  .cs__detail {
    padding-left: 32px;
  }
}

@media (max-width: 899.98px) {
  .cs {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .cs__detail {
    padding: 24px 0 0;
    border-top: 1px solid #e6e9f1;
    border-left: 0;
  }
}

@media (max-width: 559.98px) {
  .stories {
    padding: 40px 0 56px;
  }

  .stories__inner {
    gap: 16px;
  }

  .cs {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .cs__logo {
    height: calc(var(--h, 40px) * 0.85);
  }

  .cs__name {
    font-size: 1.5rem;
  }

  .cs__desc {
    font-size: 1rem;
  }

  .cs__label {
    font-size: 1.0625rem;
  }

  .cs__quote {
    padding: 16px 18px;
    font-size: 1rem;
  }

  .stories__actions .btn {
    flex: 1 1 100%;
  }
}

.started {
  padding: 72px 0 96px;
  color: #130930;
  background: #f3f5f8;
}

.started__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
  gap: 64px;
}

.started__tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #5b0bd1;
  background: #ebe3fd;
  border-radius: 999px;
}

.started__title {
  margin: 16px 0 0;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #130930;
}

.started__text {
  max-width: 640px;
  margin: 18px 0 0;
  font-size: 1.1rem;
  line-height: 1.55;
  color: #395265;
}

.milestones {
  padding: 28px 32px 24px;
  background: var(--white);
  border: 1px solid #e3e6ee;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.03), 0 10px 30px rgba(15, 9, 59, 0.04);
}

.milestones__head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.milestones__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  color: var(--purple);
  background: #efeafe;
  border-radius: 50%;
}

.milestones__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.milestones__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #130930;
}

.tl {
  position: relative;
  margin: 18px 0 0;
  padding: 0 0 0 28px;
  list-style: none;
}

 

.tl li {
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 16px;
  padding: 7px 0;
}

.tl li::before {
  content: "";
  position: absolute;
  top: 14px;
  left: -26px;
  width: 10px;
  height: 10px;
  background: var(--purple);
  border-radius: 50%;
  box-shadow: 0 0 0 4px #efeafe;
}

.tl li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: -10px;
  left: -22px;
  width: 2px;
  background: #dfe3eb;
}

.tl__year {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--purple);
}

.tl__text {
  font-size: 1rem;
  line-height: 1.5;
  color: #395265;
}

@media (max-width: 1199.98px) {
  .started {
    padding: 56px 0 72px;
  }

  .started__inner {
    gap: 40px;
  }

  .started__title {
    font-size: 2.25rem;
  }
}

@media (max-width: 899.98px) {
  .started__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .started__text {
    max-width: none;
  }
}

@media (max-width: 559.98px) {
  .started {
    padding: 40px 0 56px;
  }

  .started__inner {
    gap: 28px;
  }

  .started__title {
    font-size: 1.875rem;
  }

  .started__text {
    font-size: 1.0625rem;
  }

  .milestones {
    padding: 22px 18px 18px;
    border-radius: 16px;
  }

  .milestones__icon {
    width: 44px;
    height: 44px;
  }

  .milestones__title {
    font-size: 1.25rem;
  }

  .tl li {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }

    .tl__year,
  .tl__text {
    font-size: 0.9375rem;
  }
}

.work {
  padding: 0 0 96px;
  color: #130930;
  background: #f3f5f8;
}

.work__tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #5b0bd1;
  background: #ebe3fd;
  border-radius: 999px;
}

.work__title {
  margin: 16px 0 0;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #130930;
}

.work__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.work__grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.work-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  column-gap: 16px;
  padding: 24px 24px 26px;
  background: var(--white);
  border: 1px solid #e3e6ee;
  border-radius: 0 14px 14px 0;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.03), 0 10px 30px rgba(15, 9, 59, 0.04);
}

.work-card::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 3px;
  background: var(--purple);
}

.work-card__num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--purple);
  background: #f1ecfe;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(112, 14, 253, 0.08);
}

.work-card__title {
  margin: 2px 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: #130930;
}

.work-card__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #395265;
}

@media (max-width: 1199.98px) {
  .work {
    padding: 0 0 72px;
  }

  .work__title {
    font-size: 2.25rem;
  }

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

  .work__grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 899.98px) {
  .work__grid {
    gap: 16px;
  }

  .work__grid--three {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 559.98px) {
  .work {
    padding: 0 0 56px;
  }

  .work__title {
    font-size: 1.875rem;
  }

  .work__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-card {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    padding: 20px 18px;
  }

  .work-card__num {
    width: 44px;
    height: 44px;
    font-size: 1.125rem;
  }

  .work-card__title {
    font-size: 1.125rem;
  }
}
.plan {
  padding: 0 0 96px;
  color: #130930;
  background: #f3f5f8;
}

.plan__tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #5b0bd1;
  background: #ebe3fd;
  border-radius: 999px;
}

.plan__title {
  margin: 16px 0 0;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #130930;
}

.plan__lead {
  max-width: 760px;
  margin: 14px 0 0;
  font-size: 1.2rem;
  line-height: 1.55;
  color: #395265;
}

.plan__note {
  margin: 20px 0 0;
  font-size: 0.9375rem;
  color: #395265;
}

@media (max-width: 1199.98px) {
  .plan {
    padding: 0 0 72px;
  }

  .plan__title {
    font-size: 2.25rem;
  }
}

@media (max-width: 559.98px) {
  .plan {
    padding: 0 0 56px;
  }

  .plan__title {
    font-size: 1.875rem;
  }

  .plan__lead {
    font-size: 1.0625rem;
  }
}

.tbq {
  padding: 72px 0 96px;
  color: #130930;
  background: #f3f5f8;
}

.tbq__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 64px;
}

.tbq__tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #5b0bd1;
  background: #ebe3fd;
  border-radius: 999px;
}

.tbq__title {
  margin: 16px 0 0;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #130930;
}

.tbq__lead {
  max-width: 660px;
  margin: 14px 0 0;
  font-size: 1.1rem;
  line-height: 1.55;
  color: #395265;
}

.tbq__actions {
  display: flex;
  margin-top: 26px;
}

.tbq-ai {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  column-gap: 22px;
  max-width: 700px;
  margin-top: 28px;
  padding: 24px 28px;
  background: linear-gradient(160deg, #fbf9ff, #f3eefe);
  border: 1px solid #e6e3f5;
  border-radius: 16px;
}

.tbq-ai__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: var(--purple);
  background: linear-gradient(160deg, #f1ebfe, #e4d8fd);
  border-radius: 16px;
}

.tbq-ai__icon svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.tbq-ai__title {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: #130930;
}

.tbq-ai__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #395265;
}

.tbq__sub {
  margin: 46px 0 18px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #130930;
}

.tbq-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tbq-step {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  column-gap: 22px;
  padding-bottom: 28px;
}

.tbq-step:last-child {
  padding-bottom: 0;
}

.tbq-step:not(:last-child) > div {
  padding-bottom: 24px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--purple), rgba(106, 43, 243, 0.12)) 1;
}

.tbq-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 62px;
  bottom: 6px;
  left: 26px;
  border-left: 2px dashed #d9d2f5;
}

.tbq-step__num {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--purple);
  background: #efeafe;
  border-radius: 50%;
}

.tbq-step__title {
  margin: 13px 0 6px;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.3;
  color: #130930;
}

.tbq-step__text {
  max-width: 600px;
  margin: 0;
  font-size: 1.0rem;
  line-height: 1.6;
  color: #395265;
}

.tbq__media {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tbq-phone {
  display: block;
  width: 290px;
  max-width: 100%;
  padding: 12px;
  background: #130930;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 44px;
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.7);
}

.tbq-phone__in {
  overflow: hidden;
  background: var(--white);
  border-radius: 33px;
}

.tbq-phone__in img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 33px;
}

.tbq__caption {
  margin: 25px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #395265;
  text-align: center;
}

@media (max-width: 1199.98px) {
  .tbq {
    padding: 56px 0 72px;
  }

  .tbq__inner {
    gap: 40px;
  }

  .tbq__title {
    font-size: 2.25rem;
  }
}

@media (max-width: 899.98px) {
  .tbq__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 559.98px) {
  .tbq {
    padding: 40px 0 56px;
  }

  .tbq__title {
    font-size: 1.875rem;
  }

  .tbq__lead {
    font-size: 1.0625rem;
  }

  .tbq__actions .btn {
    flex: 1 1 100%;
  }

  .tbq-ai {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
    padding: 20px 18px;
  }

  .tbq-ai__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }

  .tbq-ai__icon svg {
    width: 26px;
    height: 26px;
  }

  .tbq-ai__title {
    font-size: 1.125rem;
  }

  .tbq__sub {
    margin-top: 32px;
    font-size: 1.5rem;
  }

  .tbq-step {
    column-gap: 16px;
  }

.tbq-step__title {
    font-size: 1.1875rem;
  }

  .tbq-step__text {
    font-size: 1.0625rem;
  }

  .tbq-phone {
    width: 260px;
    padding: 10px;
    border-radius: 38px;
  }

  .tbq-phone__in,
  .tbq-phone__in img {
    border-radius: 29px;
  }
}
.talk {
  padding: 72px 0 96px;
  scroll-margin-top: calc(var(--header-h) + 24px);
  color: #130930;
  background: #f3f5f8;
}

.talk__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: start;
  gap: 40px;
}

.talk__tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #5b0bd1;
  background: #ebe3fd;
  border-radius: 999px;
}

.talk__lead {
  margin: 14px 0 0;
  font-size: 1.0rem;
  line-height: 1.6;
  color: #395265;
}

.talk__about {
  margin: 0;
  padding: 12px 16px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #130930;
  background: #f1ecfe;
  border-left: 3px solid var(--purple);
  border-radius: 8px;
}

.talk__about strong {
  color: #5b0bd1;
}

.talk .contact-form__row {
  column-gap: 16px;
}

.talk .contact-form__field label {
  gap: 5px;
  font-weight: 500;
}

.talk .contact-form__req {
  color: #e5484d;
}

.talk .contact-form__control {
  position: relative;
  display: block;
}

.talk .contact-form__control svg {
  position: absolute;
  top: 17px;
  left: 16px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #8a90a6;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.talk .contact-form__control input,
.talk .contact-form__control textarea {
  padding-right: 14px;
  padding-left: 44px;
}

.talk .contact-form__more summary {
  display: flex;
  gap: 12px;
}

.talk .contact-form__plus {
  flex: none;
  width: 22px;
  height: 22px;
  background: none;
  border: 2px solid var(--purple);
}

.talk .contact-form__plus::before,
.talk .contact-form__plus::after {
  width: 10px;
  margin: -1px 0 0 -5px;
}

.talk .contact-form__more[open] .contact-form__plus {
  transform: none;
}

.talk .contact-form__more[open] .contact-form__plus::after {
  display: none;
}

.talk .contact-form__chev {
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
}

.talk .contact-form__more[open] .contact-form__chev {
  transform: rotate(180deg);
}

.talk__panel {
  padding-top: 40px;
}

.talk__title {
  margin: 16px 0 0;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #130930;
}

.talk-steps {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.talk-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
column-gap: 18px;
  padding-bottom: 24px;
}

.talk-step:last-child {
  padding-bottom: 0;
}
.talk-step:not(:last-child) > div {
  padding-bottom: 22px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--purple), rgba(106, 43, 243, 0.12)) 1;
}

.talk-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 52px;
  bottom: 6px;
  left: 21px;
  border-left: 2px dashed #d9d2f5;
}

.talk-step__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--purple);
  background: #efeafe;
  border-radius: 50%;
}

.talk-step__title {
  margin: 10px 0 4px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
  color: #130930;
}

.talk-step__text {
  max-width: 600px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #395265;
}

.talk__other {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #dfe3ea;
}

.talk__sub {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: #130930;
}

.talk-ways {
  display: grid;
  grid-template-columns: minmax(max-content, 0.8fr) minmax(0, 1.25fr) minmax(max-content, 0.95fr);
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.talk-way {
  display: grid;
  align-content: start;
  row-gap: 10px;
  padding: 14px;
  background: var(--white);
  border: 1px solid #e3e6ee;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.03), 0 10px 30px rgba(15, 9, 59, 0.04);
}

.talk-way__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--purple);
  background: #efeafe;
  border-radius: 9px;
}

.talk-way__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.talk-way__title {
  margin: 0 0 2px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #130930;
}

.talk-way__link {
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.talk-way__link:hover {
  color: #130930;
}

.talk-way__text {
  margin: 0;
  font-size: 0.8125rem;
  font-style: normal;
  line-height: 1.5;
  color: #395265;
}

.talk__quick {
  margin: 16px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #395265;
}

.talk__quick-link {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.talk__quick-link:hover {
  color: #130930;
}

@media (max-width: 1199.98px) {
  .talk {
    padding: 56px 0 72px;
  }

  .talk__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .talk__panel {
    padding-top: 0;
  }

  .talk__title {
    font-size: 2.25rem;
  }
}

@media (max-width: 559.98px) {
  .talk {
    padding: 40px 0 56px;
  }

  .talk__lead {
    font-size: 1.0625rem;
  }

  .talk__about {
    padding: 10px 14px;
    font-size: 0.875rem;
  }

  .talk .contact-form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .talk__title {
    font-size: 1.875rem;
  }

  .talk-step {
    column-gap: 16px;
  }

  .talk-step__title {
    font-size: 1.0625rem;
  }

  .talk-step__text {
    font-size: 0.9375rem;
  }

  .talk__sub {
    font-size: 1.125rem;
  }

  .talk-ways {
    grid-template-columns: minmax(0, 1fr);
  }

  .talk-way {
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 12px;
  }

  .talk__quick {
    font-size: 0.8125rem;
  }
}
.indev {
  padding: 72px 0 96px;
  scroll-margin-top: calc(var(--header-h) + 24px);
  color: #130930;
  background: #f3f5f8;
}

.indev__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 56px;
}

.indev__copy {
  padding-top: 8px;
}

.indev-mod + .indev-mod {
  margin-top: 48px;
}

.indev-mod__logo {
  width: auto;
  height: 64px;
  margin: 0 0 16px;
  filter: grayscale(1) brightness(0.55);
  opacity: 0.8;
  transition: filter 0.25s, opacity 0.25s;
}

.indev-mod:hover .indev-mod__logo {
  filter: none;
  opacity: 1;
}

.indev-mod__tag {
  display: inline-block;
  margin: 0 0 20px;
  padding: 4px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #5b0bd1;
  background: #ebe3fd;
  border-radius: 999px;
}

.indev-mod__title {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #130930;
}
.indev-mod__text {
  max-width: 600px;
  margin: 16px 0 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #395265;
}

.indev__tag {
  justify-self: start;
  padding: 4px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #5b0bd1;
  background: #ebe3fd;
  border-radius: 999px;
}

 
@media (max-width: 1199.98px) {
  .indev {
    padding: 56px 0 72px;
  }

  .indev__inner {
    gap: 40px;
  }

  .indev-mod__title {
    font-size: 2.25rem;
  }
}

@media (max-width: 899.98px) {
  .indev__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .indev__copy {
    padding-top: 0;
  }
}

@media (max-width: 559.98px) {
  .indev {
    padding: 40px 0 56px;
  }

  .indev-mod + .indev-mod {
    margin-top: 36px;
  }

  .indev-mod__logo {
    height: 52px;
  }

  .indev-mod__title {
    font-size: 1.875rem;
  }

  .indev-mod__text {
    font-size: 1.0625rem;
  }

 
}

.lf {
  padding: 72px 0 96px;
  color: #130930;
  background: #f3f5f8;
}

.lf__part + .lf__part {
  margin-top: 88px;
}

.lf__title {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #130930;
}

.lf__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 56px;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.lf__faq {
  margin-top: 32px;
  padding: 0 24px 4px;
  background: var(--white);
  border: 1px solid #e3e6ee;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.03), 0 10px 30px rgba(15, 9, 59, 0.04);
}

.lf__faq .faq-q:first-child {
  border-top: 0;
}

.lf__more {
  margin: 20px 0 0;
  font-size: 1rem;
}

.lf__more a {
  font-weight: 600;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.lf__more a:hover {
  color: #130930;
}

@media (max-width: 1199.98px) {
  .lf {
    padding: 56px 0 72px;
  }

  .lf__part + .lf__part {
    margin-top: 72px;
  }

  .lf__title {
    font-size: 2.25rem;
  }

  .lf__split {
    gap: 40px;
  }
}

@media (max-width: 899.98px) {
  .lf__split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 559.98px) {
  .lf {
    padding: 40px 0 56px;
  }

  .lf__part + .lf__part {
    margin-top: 56px;
  }

  .lf__title {
    font-size: 1.875rem;
  }

  .lf__faq {
    padding: 0 18px 2px;
  }
}

.legal {
  padding: 72px 0 96px;
  color: #130930;
  background: #f3f5f8;
}

.legal__doc {
  max-width: 960px;
  padding: 48px 56px 52px;
  background: var(--white);
  border: 1px solid #e3e6ee;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.03), 0 10px 30px rgba(15, 9, 59, 0.04);
}

.legal__date {
  display: inline-block;
  margin: 0 0 20px;
  padding: 4px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #5b0bd1;
  background: #ebe3fd;
  border-radius: 999px;
}

.legal__doc h2 {
  margin: 40px 0 12px;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #130930;
}

.legal__doc h2:first-child {
  margin-top: 0;
}

.legal__doc p {
  margin: 0 0 14px;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #395265;
}

.legal__doc ul,
.legal__doc ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.legal__doc li {
  margin: 0 0 8px;
  padding-left: 4px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #395265;
}

.legal__doc li::marker {
  color: var(--purple);
}

.legal__doc a {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.legal__doc a:hover {
  color: #130930;
}

.legal__doc > :last-child {
  margin-bottom: 0;
}

@media (max-width: 1199.98px) {
  .legal {
    padding: 56px 0 72px;
  }

  .legal__doc {
    padding: 40px 44px 44px;
  }
}

@media (max-width: 899.98px) {
  .legal__doc {
    padding: 32px 32px 36px;
  }
}

@media (max-width: 559.98px) {
  .legal {
    padding: 40px 0 56px;
  }

  .legal__doc {
    padding: 24px 20px 28px;
    border-radius: 14px;
  }

  .legal__doc h2 {
    margin: 32px 0 10px;
    font-size: 1.1875rem;
  }

  .legal__doc p,
  .legal__doc li {
    font-size: 1rem;
  }
}

.legal__date + h2 {
  margin-top: 12px;
}

.legal__doc .guide-ticks {
  padding-left: 0;
  list-style: none;
}

.legal__doc .guide-ticks li {
  position: relative;
  padding-left: 32px;
}

.legal__doc .guide-ticks li::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 20px;
  height: 20px;
  background: #efeafe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a2bf3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-radius: 50%;
}

.legal__doc .guide-note {
  margin-top: 28px;
  padding-top: 20px;
  font-size: 0.9375rem;
  line-height: 1.6;
  border-top: 1px solid #e9ebf1;
}

.guide-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 960px;
  margin-top: 24px;
  padding: 28px 32px;
  background: linear-gradient(160deg, #f8f5ff, #f1ecfe);
  border: 1px solid #e6e3f5;
  border-radius: 18px;
}

.guide-cta__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #130930;
}

.guide-cta__text {
  margin: 6px 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #395265;
}

.guide-cta .btn {
  flex: none;
}

.guide-more {
  max-width: 960px;
  margin-top: 64px;
}

.guide-more__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #130930;
}

.guide-more__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 899.98px) {
  .guide-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .guide-more__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 559.98px) {
  .guide-cta {
    padding: 22px 20px;
  }

  .guide-cta__title {
    font-size: 1.1875rem;
  }

  .guide-cta__text {
    font-size: 1rem;
  }

  .guide-cta .btn {
    align-self: stretch;
  }

  .guide-more {
    margin-top: 48px;
  }

  .guide-more__title {
    font-size: 1.5rem;
  }
}

.questions {
  padding: 56px 0 96px;
  color: #130930;
  background: #f3f5f8;
}

.questions__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  align-items: start;
  gap: 40px;
}

.questions__intro {
  margin: 0 0 16px;
  font-size: 1.6rem;
  line-height: 1.3;
  color: #130930;
  font-weight: 700;
}

.faq-search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 20px;
  background: var(--white);
  border: 1px solid #dfe3eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.03), 0 8px 24px rgba(15, 9, 59, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.faq-search:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(106, 43, 243, 0.12);  
}

.faq-search svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #130930;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  font-family: inherit;
  font-size: 1rem;
  color: #130930;
  background: none;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.faq-search__input::placeholder {
  color: #8a93a0;
}

.faq-search__count {
  flex: none;
  padding-left: 16px;
  font-size: 0.875rem;
  color: #5b6b7a;
  white-space: nowrap;
  border-left: 1px solid #e3e6ee;
}

.faq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 28px;
}

.faq-chip {
  display: inline-flex;
  align-items: center;
    gap: 8px;
  min-height: 40px;
  padding: 0 8px 0 14px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: #130930;
  background: #f7f4ff;
  border: 1px solid #e4dcfb;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.faq-chip:hover {
  border-color: #c5bdf0;
}

.faq-chip svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--purple);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-chip span {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  font-size: 0.75rem;
  font-weight: 600;
    color: #395265;
  background: #ece6fd;
  border-radius: 999px;
}

.faq-chip[aria-pressed="true"] {
  color: var(--white);
  background: var(--purple);
  border-color: var(--purple);
}

.faq-chip[aria-pressed="true"] svg {
  stroke: var(--white);
}

.faq-chip[aria-pressed="true"] span {
  color: var(--white);
  background: rgba(255, 255, 255, 0.25);
}

.faq-group {
  padding: 0 24px;
  background: var(--white);
  border: 1px solid #e3e6ee;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.03), 0 10px 30px rgba(15, 9, 59, 0.04);
}

.faq-group + .faq-group {
  margin-top: 16px;
}

.faq-group[hidden],
.faq-q[hidden] {
  display: none;
}

.faq-group__heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 20px 0;
  color: #130930;
}

.faq-group__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  color: var(--purple);
  background: #efeafe;
  border-radius: 50%;
}

.faq-group__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-group__title {
  flex: 1 1 auto;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
 

.faq-group__body {
  padding-bottom: 8px;
}

.faq-q {
  scroll-margin-top: calc(var(--header-h) + 24px);
  border-top: 1px solid #e9ebf1;
}

.faq-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 2px;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
  color: #130930;
  list-style: none;
  cursor: pointer;
  transition: color 0.2s;
}

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

.faq-q summary:hover {
  color: var(--purple);
}

.faq-q__icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}

.faq-q__icon::before,
.faq-q__icon::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 16px;
  height: 2px;
  background: var(--purple);
  border-radius: 2px;
}

.faq-q__icon::after {
  transform: rotate(90deg);
  transition: transform 0.2s;
}

.faq-q[open] .faq-q__icon::after {
  transform: rotate(0deg);
}

.faq-q__a {
  margin: 0;
  padding: 0 40px 18px 2px;
  font-size: 1rem;
  line-height: 1.65;
  color: #395265;
}

.faq-q__a a,
.questions__none a {
 
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.questions__none {
  margin: 8px 0 0;
  font-size: 1rem;
  color: #395265;
}

.faq-ask {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  padding: 32px 30px;
  background:
    radial-gradient(420px 260px at 100% 0%, rgba(106, 43, 243, 0.1), transparent 70%),
    var(--white);
  border: 1px solid #e3e6ee;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.03), 0 10px 30px rgba(15, 9, 59, 0.04);
}

.faq-ask__tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #5b0bd1;
  background: #ebe3fd;
  border-radius: 999px;
}

.faq-ask__title {
  margin: 14px 0 10px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #130930;
}

.faq-ask__text {
  margin: 0 0 22px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #395265;
}

.faq-ask__chat {
  width: 1.25em;
  height: 1.25em;
  margin-right: -0.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-ask__list {
  margin: 26px 0 0;
  padding: 24px 0 0;
  list-style: none;
  border-top: 1px solid #e3e6ee;
}

.faq-ask__list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
}

.faq-ask__list li + li {
  margin-top: 18px;
}

.faq-ask__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--purple);
  background: #efeafe;
  border-radius: 50%;
}

.faq-ask__icon svg,
.faq-ask__tip svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-ask__link {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #130930;
  overflow-wrap: anywhere;
  transition: color 0.2s;
}

.faq-ask__link:hover {
  color: var(--purple);
}

.faq-ask__note {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #5b6b7a;
}

.faq-ask__address {
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.5;
  color: #395265;
}

.faq-ask__tip {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 14px;
  margin-top: 24px;
  padding: 18px 20px;
  color: var(--purple);
  background: #f3effe;
  border-radius: 14px;
}

.faq-ask__tip svg {
  width: 24px;
  height: 24px;
}

.faq-ask__tip-title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #130930;
}

.faq-ask__tip-text {
  margin: 4px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #5b6b7a;
}

@media (max-width: 1199.98px) {
   .questions {
    padding: 48px 0 72px;
  }

  .questions__inner {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
  }

  .faq-group__title {
    font-size: 1.375rem;
  }

  .faq-ask {
    padding: 28px 24px;
  }

  .faq-ask__title {
    font-size: 1.75rem;
  }
}

@media (max-width: 899.98px) {
  .questions__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-ask {
    position: static;
  }
}

@media (max-width: 559.98px) {
.questions {
    padding: 32px 0 56px;
  }

  .faq-search {
    height: 52px;
    padding: 0 14px;
  }

  .faq-search__count {
    padding-left: 12px;
    font-size: 0.8125rem;
  }

  .faq-chip {
    font-size: 0.8125rem;
  }

  .faq-group {
    padding: 0 16px;
  }

  .faq-group__heading {
    gap: 12px;
    padding: 16px 0;
  }
  .faq-group__icon {
    width: 38px;
    height: 38px;
  }

  .faq-group__icon svg {
    width: 18px;
    height: 18px;
  }

  .faq-group__title {
    font-size: 1.1875rem;
  }
 
  .faq-q summary {
    font-size: 1rem;
  }

  .faq-q__a {
    padding-right: 8px;
    font-size: 0.9375rem;
  }

  .faq-ask {
    padding: 24px 20px;
  }

  .faq-ask__title {
    font-size: 1.5rem;
  }

  .faq-ask__btn {
    width: 100%;
  }
}

.intro {
  padding: 96px 0;
 
  color: #130930;
  background: #f3f5f8;
}

.icon-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  color: var(--purple);
  background: #efeafe;
  border-radius: 10px;
}

.icon-tile svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-tile--lg {
  width: 60px;
  height: 60px;
  border-radius: 12px;
}

.icon-tile--lg svg {
  width: 30px;
  height: 30px;
}

.icon-tile--sm {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.icon-tile--sm svg {
  width: 18px;
  height: 18px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.stat,
.problem {
  background: var(--white);
  border: 1px solid #e6e9f1;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.04), 0 10px 30px rgba(15, 9, 59, 0.04);
}

.stat {
  padding: 28px;
}

.stat__num {
  margin: 22px 0 8px;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #130930;
}

.stat__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(19, 9, 48, 0.7);
}

.trusted {
  margin-top: 64px;
}

.trusted__label {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(19, 9, 48, 0.55);
}

.trusted__label::before,
.trusted__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #dfe3ec;
}

.trusted__logos {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, auto));
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  margin-top: 36px;
}

.trusted__logos img {
  width: auto;
  max-width: 170px;
  height: 44px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.25s, opacity 0.25s;
}

.trusted__logos img:hover {
  filter: none;
  opacity: 1;
}

.problems {
  position: relative;
  margin-top: 96px;
}
 
.problems__title {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #130930;
}

.problems__lead {
  margin: 10px 0 0;
  font-size: 1.1rem;
  color: rgba(19, 9, 48, 0.85);
}

.problems__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.problem {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 26px 28px;
}

.problem__title {
  margin: 0 0 6px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: #130930;
}

.problem__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(19, 9, 48, 0.7);
}

@media (max-width: 1299.98px) {
  .stat__num {
    font-size: 2.25rem;
  }
}

@media (max-width: 1199.98px) {
  .intro {
    padding: 72px 0;
  }

  .stat__num {
    font-size: 2.125rem;
  }

  .problems {
    margin-top: 80px;
  }

  .problems__title {
    font-size: 2.25rem;
  }
}

@media (max-width: 1099.98px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trusted__logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    gap: 32px 24px;
  }
}

@media (max-width: 899.98px) {
 

  .problems__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 559.98px) {
  .intro {
    padding: 56px 0;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .stat {
    padding: 16px;
  }

  .stat .icon-tile {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .stat .icon-tile svg {
    width: 18px;
    height: 18px;
  }

  .stat__num {
    margin-top: 12px;
    margin-bottom: 6px;
    font-size: 1.75rem;
  }

  .stat__text {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .trusted {
    margin-top: 48px;
  }

  .trusted__label {
    gap: 14px;
    letter-spacing: 0.12em;
  }

  .trusted__logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 28px;
  }

  .trusted__logos img {
    height: 36px;
    max-width: min(140px, 100%);
  }

  .problems {
    margin-top: 56px;
  }

  .problems__title {
    font-size: 1.875rem;
  }

  .problems__lead {
    font-size: 1.0625rem;
  }

  .problems__grid {
    gap: 16px;
    margin-top: 28px;
  }

  .problem {
    gap: 16px;
    padding: 22px 20px;
  }
}

.platform {
  padding: 0 0 96px;
  color: #130930;
  background: #f3f5f8;
}

.platform__title {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #130930;
}

.platform__lead {
  max-width: 900px;
  margin: 14px 0 0;
  font-size: 1.1rem;
  line-height: 1.55;
  color: rgba(19, 9, 48, 0.85);
}
.hub {
  margin-top: 40px;
  padding: 64px 48px 32px;
  overflow: hidden;
  color: var(--white);
  border-radius: 24px;
  background:
    radial-gradient(420px 360px at 50% 46%, rgba(112, 14, 253, 0.3), transparent 70%),
    radial-gradient(900px 420px at 50% 0%, rgba(26, 62, 83, 0.5), transparent 70%),
    radial-gradient(800px 360px at 50% 100%, rgba(26, 62, 83, 0.35), transparent 70%),
    #091a26;
}

.hub__stage {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 600px) minmax(240px, 1fr);
  align-items: center;
  column-gap: 32px;
  max-width: 1160px;
  margin: 0 auto;
}

.hub-card {
  position: relative;
  padding: 24px 24px 10px;
  border: 1px solid rgba(86, 136, 245, 0.45);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(36, 72, 160, 0.3), rgba(12, 28, 80, 0.3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 32px rgba(40, 90, 220, 0.18);
}

.hub-card::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: #19face;
  box-shadow: 0 0 10px rgba(25, 250, 206, 0.8);
}

.hub-card--web::after {
  right: -6px;
}

.hub-card--conn::after {
  left: -6px;
}

.hub-card__via {
  display: none;
}

.hub-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hub-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2f7cf0, #1446b0);
  box-shadow: 0 0 18px rgba(47, 124, 240, 0.45);
}

.hub-card__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--white);
}

.hub-card__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
}

.hub-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hub-card__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text-soft);
}

.hub-card__list li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hub-card__list strong {
  display: block;
  font-weight: 600;
  color: #19face;
}

.hub-card svg,
.hub-node svg {
  flex: none;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hub-card__list svg {
  width: 22px;
  height: 22px;
  stroke: #7fb0ff;
}

.hub-card--conn .hub-card__list svg {
  stroke: #19face;
}

.hub-diagram {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 6 / 5;
  justify-self: center;
  container-type: inline-size;
}

.hub-diagram::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -32px;
  right: -32px;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, #19face, rgba(59, 211, 247, 0.6) 30%, rgba(59, 211, 247, 0.6) 70%, #19face);
}

.hub-diagram__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 1.5;
}

.hub-diagram__lines circle {
  stroke: rgba(110, 150, 240, 0.5);
  stroke-dasharray: 4 7;
}

.hub-diagram__lines path {
  stroke: rgba(59, 211, 247, 0.6);
}

.hub-diagram__orbit {
  display: none;
}

.hub-nodes {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hub-node {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  height: 3.1em;
  padding: 0 1.3em;
  font-size: 2.5cqw;
  font-weight: 600;
  white-space: nowrap;
  color: var(--white);
  background: #100b36;
  border: 1.5px solid #9a5bff;
  border-radius: 999px;
  box-shadow: 0 0 1.1em rgba(112, 14, 253, 0.45), inset 0 0 0.8em rgba(112, 14, 253, 0.25);
  transform: translate(-50%, -50%);
}

.hub-node svg {
  width: 1.35em;
  height: 1.35em;
  stroke: #c58bff;
}

.hub-node::after {
  content: "";
  position: absolute;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #a56bff;
}

.hub-node::before {
  content: "";
  position: absolute;
  width: 3em;
  height: 1.5px;
  margin-top: -0.75px;
  background: rgba(165, 107, 255, 0.7);
  transform-origin: 0 50%;
}

.hub-node--t {
  left: 50%;
  top: 6.4%;
}

.hub-node--b {
  left: 50%;
  top: 93.6%;
}

.hub-node--tl {
  left: 20%;
  top: 24%;
}

.hub-node--tr {
  left: 80%;
  top: 24%;
}

.hub-node--bl {
  left: 20%;
  top: 76%;
}

.hub-node--br {
  left: 80%;
  top: 76%;
}

.hub-node--t::after {
  left: 50%;
  bottom: -0.3em;
  margin-left: -0.275em;
}

.hub-node--b::after {
  left: 50%;
  top: -0.3em;
  margin-left: -0.275em;
}

.hub-node--t::before,
.hub-node--b::before {
  display: none;
}

.hub-node--tl::after,
.hub-node--bl::after {
  right: 1.1em;
}

.hub-node--tr::after,
.hub-node--br::after {
  left: 1.1em;
}

.hub-node--tl::after,
.hub-node--tr::after {
  bottom: -0.3em;
}

.hub-node--bl::after,
.hub-node--br::after {
  top: -0.3em;
}

.hub-node--tl::before {
  left: calc(100% - 1.375em);
  top: 100%;
  transform: rotate(45deg);
}

.hub-node--tr::before {
  left: 1.375em;
  top: 100%;
  transform: rotate(135deg);
}

.hub-node--bl::before {
  left: calc(100% - 1.375em);
  top: 0;
  transform: rotate(-45deg);
}

.hub-node--br::before {
  left: 1.375em;
  top: 0;
  transform: rotate(-135deg);
}

.hub-node--included {
  border-color: #19face;
  box-shadow: 0 0 1.1em rgba(25, 250, 206, 0.35), inset 0 0 0.8em rgba(25, 250, 206, 0.15);
}

.hub-node--included svg {
  stroke: #19face;
}

.hub-node--included::after {
  background: #19face;
}

.hub-node--dev {
  color: #c9d3e3;
  border: 1.5px dashed rgba(201, 211, 227, 0.7);
  box-shadow: none;
}

.hub-node--dev svg {
  stroke: #9aa6b8;
}

.hub-node--dev::before,
.hub-node--dev::after {
  background: #9aa6b8;
}

.hub-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 39%;
  aspect-ratio: 1;
  padding: 1.6em;
  font-size: 2.1cqw;
  border: 2px solid #19face;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #8d3cff, #700efd 50%, #5a0fdc) content-box;
  box-shadow: 0 0 1.6em rgba(25, 250, 206, 0.45), inset 0 0 1.2em rgba(25, 250, 206, 0.2), 0 0 5em rgba(112, 14, 253, 0.55);
  transform: translate(-50%, -50%);
}

.hub-core img {
  width: 56%;
  height: auto;
}

.hub-core span {
  max-width: 80%;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
}

.hub__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
}

.hub__legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hub__swatch {
  width: 22px;
  height: 12px;
  border: 1.5px solid #9a5bff;
  border-radius: 6px;
  background: #100b36;
}

.hub__swatch--included {
  border-color: #19face;
}

.hub__swatch--dev {
  border: 1.5px dashed rgba(201, 211, 227, 0.7);
  background: transparent;
}

@media (max-width: 1499.98px) {
  .hub {
    padding: 56px 32px 28px;
  }

  .hub__stage {
    column-gap: 24px;
  }

  .hub-diagram::before {
    left: -24px;
    right: -24px;
  }

  .hub-card {
    padding: 20px 20px 8px;
  }

  .hub-card__title {
    font-size: 1.25rem;
  }
}

@media (max-width: 1199.98px) {
  .platform {
    padding: 0 0 72px;
  }

  .platform__title {
    font-size: 2.25rem;
  }

  .hub {
    padding: 48px 32px 28px;
  }

  .hub__stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }

  .hub-diagram {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .hub-card {
    align-self: stretch;
  }

  .hub-diagram::before,
  .hub-card::after {
    display: none;
  }

  .hub__legend {
    margin-top: 40px;
  }
}

@media (max-width: 899.98px) {
  .hub {
    padding: 40px 24px 24px;
  }

  .hub-card__head {
    gap: 12px;
  }

  .hub-card__icon {
    width: 40px;
    height: 40px;
  }

  .hub-card__icon svg {
    width: 21px;
    height: 21px;
  }

  .hub-card__list li {
    gap: 12px;
    font-size: 0.875rem;
  }
}

@media (max-width: 559.98px) {
  .platform {
    padding: 0 0 56px;
  }

  .platform__title {
    font-size: 1.875rem;
  }

  .platform__lead {
    font-size: 1.0625rem;
  }

  .hub {
    margin-top: 28px;
    padding: 28px 16px 20px;
    border-radius: 18px;
  }

  .hub__stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .hub-diagram {
    grid-column: auto;
    max-width: 326px;
    aspect-ratio: 326 / 392;
    container-type: normal;
  }

  .hub-diagram__lines {
    display: none;
  }

  .hub-diagram__orbit {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 1.5;
  }

  .hub-diagram__orbit circle {
    stroke: rgba(110, 150, 240, 0.5);
    stroke-dasharray: 3 6;
  }

  .hub-diagram__orbit path {
    stroke: #9a5bff;
    opacity: 0.8;
  }

  .hub-diagram__orbit .is-inc {
    stroke: #19face;
    opacity: 1;
  }

  .hub-diagram__orbit .is-dev {
    stroke: rgba(201, 211, 227, 0.6);
    stroke-dasharray: 3 4;
  }

  .hub-core {
    top: 48.47%;
    gap: 4px;
    width: 36.2%;
    padding: 8px;
    font-size: 9.5px;
  }

  .hub-core img {
    width: 58%;
  }

  .hub-node {
    flex-direction: column;
    gap: 6px;
    width: 92px;
    height: auto;
    padding: 0;
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
    background: none;
    border: 0;
    box-shadow: none;
    transform: translate(-50%, -23px);
  }

  .hub-node svg {
    width: 46px;
    height: 46px;
    padding: 12px;
    background: #140f3a;
    border: 1.5px solid #9a5bff;
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(112, 14, 253, 0.4);
  }

  .hub-node--included svg {
    border-color: #19face;
    box-shadow: 0 0 14px rgba(25, 250, 206, 0.4);
  }

  .hub-node--dev svg {
    border: 1.5px dashed rgba(201, 211, 227, 0.7);
    box-shadow: none;
  }

  .hub-node--t {
    flex-direction: column-reverse;
    top: 15.82%;
    transform: translate(-50%, calc(-100% + 23px));
  }

  .hub-node--tr {
    left: 84.02%;
    top: 32.14%;
  }

  .hub-node--br {
    left: 84.02%;
    top: 64.8%;
  }

  .hub-node--b {
    top: 81.12%;
  }

  .hub-node--bl {
    left: 15.98%;
    top: 64.8%;
  }

  .hub-node--tl {
    left: 15.98%;
    top: 32.14%;
  }

  .hub-node::before,
  .hub-node::after {
    display: none;
  }

  .hub-card {
    margin-top: 30px;
    padding: 14px;
  }

  .hub-card__via {
    position: absolute;
    left: 22px;
    bottom: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
  }

  .hub-card__via::before {
    content: "";
    width: 2px;
    height: 28px;
    background: linear-gradient(#19face, #9a5bff);
    border-radius: 2px;
  }

  .hub-card__head {
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 0;
  }

  .hub-card__icon {
    width: 34px;
    height: 34px;
  }

  .hub-card__icon svg {
    width: 18px;
    height: 18px;
  }

  .hub-card__title {
    font-size: 1.125rem;
  }

  .hub-card__list {
    display: grid;
    gap: 8px;
  }

  .hub-card--web .hub-card__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hub-card__list li {
    gap: 8px;
    min-height: 44px;
    padding: 9px;
    font-size: 0.78125rem;
    line-height: 1.25;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
  }

  .hub-card__list li + li {
    border-top: 0;
  }

  .hub-card__list svg {
    width: 16px;
    height: 16px;
  }

  .hub__legend {
    gap: 8px 14px;
    margin-top: 16px;
    font-size: 0.75rem;
  }

  .hub__swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
  }
}

.btn--outline-dark {
  border-color: #130930;
  color: #130930;
}

.btn--outline-dark:hover {
  background: rgba(19, 9, 48, 0.06);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--purple);
  background: #efeafe;
  border-radius: 999px;
}

.tag svg {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--white), 0 2px 8px rgba(112, 14, 253, 0.25);
}
.tag svg circle {
  fill: #700efd;
}

.tag svg path {
  fill: var(--white);
}

.tag--cyan {
  color: #19face;
  background: rgba(25, 250, 206, 0.14);
}

.tag--cyan svg circle {
  fill: #19face;
}

.tag--cyan svg path {
  fill: #130930;
}

.demo,
.spot {
  padding: 0 0 96px;
  color: #130930;
  background: #f3f5f8;
}

.story {
  padding: 96px 0;
  color: #130930;
  background: var(--white);
}

.fit {
  padding: 80px 0 96px 0;
  color: #130930;
  background: #f3f5f8;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 18px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(19, 9, 48, 0.8);
}

.eyebrow::after {
  content: "";
  width: 90px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--purple), #d9cdfb);
}

.demo__title,
.story__title,
.process__title,
.fit__title,
.contact__title {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #130930;
}

.demo__lead,
.fit__lead,
.contact__lead {
  max-width: 900px;
  margin: 14px 0 0;
  font-size: 1.1rem;
  line-height: 1.55;
  color: rgba(19, 9, 48, 0.85);
}

.demo__lead a,
.spot-dev__link {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.demo__lead a:hover,
.spot-dev__link:hover {
  text-decoration-thickness: 2px;
}

.demo__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 32px;
}

.demo__head > div {
  display: contents;
}

.demo__head .eyebrow,
.demo__head .demo__title {
  grid-column: 1 / -1;
}

.demo__head .btn {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  margin-top: 10px;
  font-size: 1.0rem;
}

.btn--soft {
  color: var(--purple);
  background: #efeafe;
  border-color: #efeafe;
}

.btn--soft:hover {
  background: #e4dcfd;
  border-color: #e4dcfd;
}

.demo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 32px;
  margin-top: 44px;
}

.demo-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: center;
  gap: 24px;
  padding: 40px;
  overflow: hidden;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 9, 59, 0.04), 0 20px 50px rgba(15, 9, 59, 0.08);
}

.demo-card__title {
  margin: 18px 0 12px;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  color: #130930;
}

.demo-card__text {
  margin: 0;
  font-size: 1.0rem;
  line-height: 1.6;
  color: rgba(19, 9, 48, 0.7);
}

.demo-card .btn {
  margin-top: 28px;
  box-shadow: 0 10px 24px rgba(106, 43, 243, 0.3);
}

.demo-card__art {
  display: block;
  width: 100%;
  height: auto;
}

.demo-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  padding: 40px 24px;
  color: var(--white);
  text-align: center;
  border-radius: 18px;
  background:
    radial-gradient(520px 320px at 0% 0%, rgba(14, 165, 205, 0.85), transparent 70%),
    radial-gradient(520px 360px at 100% 100%, rgba(112, 14, 253, 0.85), transparent 70%),
    #151a4d;
  box-shadow: 0 20px 50px rgba(15, 9, 59, 0.12);
}

.demo-video__play {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin-bottom: 36px;
  border-radius: 50%;
  background: #19face;
  box-shadow: 0 0 0 18px rgba(25, 250, 206, 0.12);
}

.demo-video__play svg {
  width: 36px;
  height: 36px;
  margin-left: 4px;
  fill: #0f093b;
}

.demo-video__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
}

.demo-video__text {
  margin: 10px 0 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.75);
}

.story__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
  gap: 72px;
}

.story__title {
  margin-top: 18px;
}

.story__text {
  margin: 22px 0 0;
  font-size: 1.0rem;
  line-height: 1.7;
  color: rgba(19, 9, 48, 0.7);
}

.story .btn {
  margin-top: 32px;
}

.quote-card {
  position: relative;
  margin: 88px 0 0;
  padding: 44px 44px 48px;
  background: var(--white);
  border: 1px solid #e3ddfb;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(106, 43, 243, 0.1);
}

 
.quote-card__text {
  margin: 0;
}

.quote-card__text p {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  color: #130930;
}

.quote-card__cite {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
  font-size: 1rem;
  color: rgba(19, 9, 48, 0.7);
}

.quote-card__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  font-weight: 500;
  color: var(--purple);
  background: #efeafe;
  border-radius: 50%;
}

.quote-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

 
 
.quote-card__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #130930;
}

.quote-card__list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quote-card__list li {
  position: relative;
  padding-left: 34px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: #130930;
}

.quote-card__list li::before {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0;
  width: 22px;
  height: 22px;
  background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23130930' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 13px no-repeat;
  border-radius: 50%;
}

.process {
  padding: 96px 0;
  color: var(--white);
  background:
    radial-gradient(900px 480px at 12% 0%, rgba(59, 19, 185, 0.22), transparent 70%),
    #0e0a34;
}

.tag--solid {
  color: var(--white);
  background: #3b13b9;
  box-shadow: 0 0 20px rgba(112, 14, 253, 0.35);
}

.process__title {
  margin-top: 18px;
  color: var(--white);
}

.process__accent {
  background: linear-gradient(90deg, #19face, #22b8f0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.process__lead {
  max-width: 900px;
  margin: 14px 0 0;
  font-size: 1.1rem;
  line-height: 1.55;
  color: #B9C3D6;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 28px 28px 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(124, 92, 255, 0.55);
  border-radius: 16px;
  box-shadow: 0 0 28px rgba(112, 14, 253, 0.18), inset 0 0 24px rgba(112, 14, 253, 0.08);
  counter-increment: step;
}

.step:nth-child(even) {
  border-color: rgba(25, 200, 230, 0.5);
  box-shadow: 0 0 28px rgba(25, 200, 230, 0.15), inset 0 0 24px rgba(25, 200, 230, 0.06);
}

.step::before {
  content: counter(step);
  position: absolute;
  top: 24px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 1rem;
  font-weight: 700;
  color: #B8A1FF;
  background: rgba(112, 14, 253, 0.22);
  border-radius: 9px;
}

.step:nth-child(even)::before {
  color: #19face;
  background: rgba(25, 200, 230, 0.16);
}

.step__icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6a2bf3, #3b13b9);
  box-shadow: 0 0 24px rgba(112, 14, 253, 0.45);
}

.step:nth-child(even) .step__icon {
  background: radial-gradient(circle at 35% 30%, #0fb5d4, #075a7c);
  box-shadow: 0 0 24px rgba(15, 181, 212, 0.4);
}

.step__icon svg,
.step__arrow svg {
  fill: none;
  stroke: var(--white);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.step__icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.75;
}

.step__title {
  margin: 0 0 10px;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
}

.step__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #C3CCDC;
}

.step__arrow {
  position: absolute;
  top: 50%;
  right: -43px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  border: 2px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(#0e0a34, #0e0a34) padding-box,
    linear-gradient(135deg, #7c5cff, #19face) border-box;
}

.step__arrow svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.btn--glow {
  color: var(--white);
  background:
    linear-gradient(#0e0a34, #0e0a34) padding-box,
    linear-gradient(90deg, #19face, #7c3aed) border-box;
  box-shadow: 0 0 22px rgba(124, 58, 237, 0.25);
}

.btn--glow:hover {
  background:
    linear-gradient(#1a1550, #1a1550) padding-box,
    linear-gradient(90deg, #19face, #7c3aed) border-box;
}

.process .btn {
  margin-top: 48px;
}

.fit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.fit-card {
  padding: 40px;
  background: var(--white);
  border: 1.5px solid #c9d0dc;
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(15, 9, 59, 0.06);
}

.fit-card--yes {
  background: linear-gradient(180deg, #faf8ff, var(--white) 45%);
  border-color: rgba(112, 14, 253, 0.6);
  box-shadow: 0 0 0 4px rgba(112, 14, 253, 0.06), 0 20px 50px rgba(112, 14, 253, 0.16);
}

.fit-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.fit-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #8b95a8, #5b6678);
  box-shadow: 0 8px 20px rgba(71, 85, 105, 0.25);
}

.fit-card--yes .fit-card__icon {
  background: linear-gradient(135deg, #a07bff, #6a2bf3);
  box-shadow: 0 8px 24px rgba(112, 14, 253, 0.35);
}

.fit-card__icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--white);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fit-card__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: #130930;
}

.fit-card__list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.fit-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.fit-card__list strong {
  font-weight: 700;
}

.fit-card__mark {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fit-card__mark circle {
  fill: #eef0f5;
  stroke: none;
}

.fit-card__mark path {
  stroke: #64748b;
}

.fit-card--yes .fit-card__mark circle {
  fill: #efeafe;
}

.fit-card--yes .fit-card__mark path {
  stroke: #700efd;
}

.fit-card__note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 24px 0 0;
  padding: 16px 18px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(19, 9, 48, 0.7);
  background: #f5f3ff;
  border: 1px solid #e3ddfb;
  border-radius: 14px;
}

.fit-card__note svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  fill: none;
  stroke: #700efd;
  stroke-width: 2;
  stroke-linecap: round;
}

.spot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
}

.spot-lf,
.spot-dev {
  padding: 40px;
  border-radius: 18px;
}

.spot-lf {
  color: var(--white);
  background:
    radial-gradient(420px 260px at 100% 100%, rgba(112, 40, 240, 0.85), transparent 70%),
    radial-gradient(520px 280px at 90% 0%, rgba(20, 140, 190, 0.55), transparent 70%),
    #121c48;
  box-shadow: 0 20px 50px rgba(18, 28, 72, 0.25);
}

.spot-lf .btn {
  box-shadow: 0 0 24px rgba(25, 250, 206, 0.35);
}

.spot-lf__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 20px;
}

.spot-lf__logo img {
  flex: none;
  width: 41px;
  height: 42px;
}

.header-product-text {
  display: flex;
  flex-direction: column;
  font-family: 'Figtree', var(--font);
  line-height: 1.2;
}

.header-product-name {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--white);
}

.header-product-sub {
  font-size: 0.875rem;
  font-weight: 500;
  color: #8b949b;
}

.spot-lf__text {
  margin: 0 0 26px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #c9d3e3;
}

.spot-dev {
  background: var(--white);
  border: 1px solid #e3e6ee;
  box-shadow: 0 18px 40px rgba(15, 9, 59, 0.06);
}

.spot-dev__title {
  margin: 18px 0 12px;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #130930;
}

.spot-dev__text {
  margin: 0 0 20px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(19, 9, 48, 0.7);
}

.spot-dev__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 600;
  text-decoration: none;
}

.spot-dev__link .btn__arrow {
  transition: transform 0.2s;
}

.spot-dev__link:hover .btn__arrow {
  transform: translateX(3px);
}

@media (max-width: 1199.98px) {
  .demo,
  .spot {
    padding: 0 0 72px;
  }

  .story,
  .fit,
  .process {
    padding: 72px 0;
  }
  .demo__title,
  .story__title,
  .process__title,
  .fit__title,
  .contact__title {
    font-size: 2.25rem;
  }

  .demo__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .story__inner {
    gap: 48px;
  }

  .step {
    padding: 24px 22px 28px;
  }

  .step__title {
    font-size: 1.25rem;
  }

  .quote-card__text p {
    font-size: 1.375rem;
  }
}

@media (max-width: 1099.98px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 48px;
  }

  .step:nth-child(2) .step__arrow {
    display: none;
  }
}

@media (max-width: 899.98px) {
  .demo__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .demo__head .btn {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 20px;
  }

  .demo-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .demo-card__art {
    display: none;
  }

  .story__inner,
  .fit__grid,
  .spot__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .story__inner {
    gap: 0;
  }

  .quote-card {
    margin-top: 80px;
  }
}

@media (max-width: 559.98px) {
  .demo,
  .spot {
    padding: 0 0 56px;
  }

  .story,
  .fit,
  .process {
    padding: 56px 0;
  }

  .demo__title,
  .story__title,
  .process__title,
  .fit__title,
  .contact__title {
    font-size: 1.875rem;
  }

  .demo__lead,
  .process__lead,
  .fit__lead,
  .contact__lead {
    font-size: 1.0625rem;
  }

  .eyebrow {
    gap: 14px;
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
  }

  .eyebrow::after {
    width: 60px;
  }

  .demo__grid {
    margin-top: 28px;
  }

  .demo-card,
  .fit-card,
  .spot-lf,
  .spot-dev {
    padding: 26px 22px;
  }

  .demo-card__title {
    font-size: 1.375rem;
  }

  .demo-video {
    min-height: 260px;
  }

  .demo-video__play {
    width: 72px;
    height: 72px;
    margin-bottom: 28px;
    box-shadow: 0 0 0 14px rgba(25, 250, 206, 0.12);
  }

  .demo-video__play svg {
    width: 28px;
    height: 28px;
  }

  .demo-video__title {
    font-size: 1.1875rem;
  }

  .story__text,
  .fit-card__list,
  .fit-card__note,
  .spot-lf__text,
  .spot-dev__text {
    font-size: 1rem;
  }

  .quote-card {
    margin-top: 64px;
    padding: 28px 22px 30px;
  }

 

  .quote-card__text p {
    font-size: 1.1875rem;
  }

  .quote-card__cite {
    gap: 14px;
    font-size: 0.9375rem;
  }

  .quote-card__avatar {
    width: 52px;
    height: 52px;
  }

  .quote-card__head {
    gap: 14px;
  }

 

  .quote-card__title {
    font-size: 1.1875rem;
  }

  .quote-card__list li {
    font-size: 1rem;
  }

  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    margin-top: 32px;
  }

  .step {
    padding: 22px 20px 26px;
  }

  .step__icon {
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
  }

  .step__icon svg {
    width: 24px;
    height: 24px;
  }

  .step:nth-child(2) .step__arrow {
    display: grid;
  }

  .step__arrow {
    top: auto;
    right: auto;
    bottom: -43px;
    left: 50%;
    margin: 0 0 0 -19px;
    transform: rotate(90deg);
  }

  .process .btn {
    margin-top: 36px;
  }

  .fit__grid {
    margin-top: 28px;
    gap: 16px;
  }

  .fit-card__head {
    gap: 14px;
    margin-bottom: 20px;
  }

  .fit-card__icon {
    width: 46px;
    height: 46px;
  }

  .fit-card__note {
    padding: 14px 16px;
  }

  .spot__inner {
    gap: 16px;
  }
}

.contact {
  padding: 0 0 96px;
  scroll-margin-top: calc(var(--header-h) + 24px);
  color: #130930;
  background:
    radial-gradient(520px 380px at 0% 100%, rgba(112, 14, 253, 0.06), transparent 70%),
    #f3f5f8;
}

.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;
  gap: 64px;
}

.contact__copy {
  padding-top: 32px;
}

.contact__call {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 36px 0 0;
  padding: 14px 24px;
  font-size: 1.0625rem;
  color: rgba(19, 9, 48, 0.75);
  background: rgba(239, 234, 254, 0.7);
  border-radius: 999px;
}

.contact__call a {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact__call .btn__arrow {
  top: 0;
  color: var(--purple);
}

.contact-form {
  display: grid;
  gap: 28px;
  padding: 40px;
  background: var(--white);
  border: 1px solid #eceef4;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 9, 59, 0.08);
}

.contact-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.contact-form__field label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: #130930;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  font: inherit;
  font-size: 1rem;
  color: #130930;
  background: #f8f9fc;
  border: 1px solid #d9dceb;
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.contact-form textarea {
  min-height: 140px;
  padding: 14px 18px;
  line-height: 1.55;
  resize: vertical;
}

.contact-form select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a2bf3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #8a90a6;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  background-color: var(--white);
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(112, 14, 253, 0.12);
}

.contact-form__more summary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  color: var(--purple);
  list-style: none;
  cursor: pointer;
}

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

.contact-form__plus {
  position: relative;
  width: 34px;
  height: 34px;
  background: #efeafe;
  border-radius: 50%;
  transition: transform 0.2s;
}

.contact-form__plus::before,
.contact-form__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: var(--purple);
  border-radius: 2px;
}

.contact-form__plus::after {
  transform: rotate(90deg);
}

.contact-form__more[open] .contact-form__plus {
  transform: rotate(45deg);
}

.contact-form__more[open] summary {
  margin-bottom: 24px;
}

.contact-form__more .contact-form__row + .contact-form__row {
  margin-top: 24px;
}

.contact-form__send {
cursor: pointer;
  justify-self: start;
  gap: 14px;
  padding: 0 30px 0.25em;
  box-shadow: 0 12px 28px rgba(106, 43, 243, 0.35);
}

.contact-form .is-invalid {
  background-color: #fff8f8;
  border-color: #e5484d;
}

.contact-form__error {
  margin: 8px 0 0;
  font-size: 0.875rem;
  color: #d92d3a;
}

.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form--sent {
  gap: 0;
}

.contact-form__done-title {
  margin: 0 0 10px;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #130930;
}

.contact-form__done-text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(19, 9, 48, 0.7);
}

@media (max-width: 1199.98px) {
  .contact {
    padding: 0 0 72px;
  }

  .contact__inner {
    gap: 40px;
  }

  .contact-form {
    padding: 32px;
  }
}

@media (max-width: 899.98px) {
  .contact__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact__copy {
    padding-top: 0;
  }

  .contact__call {
    margin-top: 28px;
  }
}

@media (max-width: 559.98px) {
  .contact {
    padding: 0 0 56px;
  }

  .contact__call {
    gap: 12px;
    padding: 12px 20px;
    font-size: 0.9375rem;
  }

  .contact-form {
    gap: 24px;
    padding: 24px 20px;
    border-radius: 18px;
  }

  .contact-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
 

  .contact-form__send {
    justify-self: stretch;
  }
}

.site-footer {
  line-height: 1.55;
  color: var(--text-soft);
  background:
    radial-gradient(720px 420px at 100% 100%, rgba(112, 14, 253, 0.3), transparent 70%),
    radial-gradient(480px 300px at 80% 115%, rgba(25, 250, 206, 0.1), transparent 70%),
    var(--footer-bg);
}

.site-footer__inner {
  padding-top: 64px;
  padding-bottom: 64px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px 24px;
}

.site-footer__logo {
  display: inline-block;
}

.site-footer__logo img {
  width: auto;
  height: 38px;
}

.site-footer__brand p {
  max-width: 350px;
  margin: 20px 0 0;
 
}

.site-footer__brand p + p {
  margin-top: 16px;
}

.site-footer__brand p a {
  color: var(--white);
}

.site-footer__heading {
  margin: 0 0 4px;
  font-size: 1.0rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--white);
}

.site-footer__col a {
  display: block;
  padding: 3px 0;
  transition: color 0.2s;
}

.site-footer__col a:hover,
.site-footer__brand p a:hover {
  color: var(--cyan);
}

.site-footer__accred {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 0;
}

.site-footer__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 8px 14px;
  background: var(--white);
  border-radius: 12px;
}

.site-footer__badge img {
  width: auto;
  max-height: 56px;
}

.site-footer__legal {
  max-width: 640px;
  margin: 44px 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-dim);
}

.site-footer__accred + .site-footer__legal {
  margin-top: 16px;
}

@media (max-width: 1499.98px) {
  .btn--lg {
    min-height: 44px;
    padding: 0 22px 0.25em;
    font-size: 0.9375rem;
  }

  .site-header__inner {
    gap: 32px;
  }

  .site-nav {
    gap: 28px;
  }

  .hero {
    padding: calc(var(--header-h) + 80px) 0 80px;
  }

  .hero__title {
    font-size: 3.5rem;
  }

 

  .hero__actions {
    margin-top: 28px;
  }

  .hero__stat-num {
    font-size: 2.5rem;
  }

    .hero__stat-text {
    font-size: 0.9375rem;
  }
}

@media (min-width: 1200px) and (max-width: 1299.98px) {
  .site-header__inner {
    gap: 24px;
  }

  .site-nav {
    gap: 22px;
  }
}

@media (max-width: 1199.98px) {
  :root {
    --gutter: 24px;
 
  }

  .site-header.is-open {
    background: var(--hero-bg);
  }

  .site-header__inner {
    display: flex;
    justify-content: space-between;
  }
 

  .site-header__toggle {
    display: inline-flex;
    flex-direction: column;
        align-items: flex-end;
    justify-content: center;
        gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 9px 0 0;
    color: var(--white);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
  }

  .site-header__toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.2s, opacity 0.2s, width 0.2s;
  }

  .site-header__toggle span:nth-child(2) {
    width: 15px;
    background: linear-gradient(90deg, #19face, #700efd);
  }

  .site-header__toggle span:nth-child(3) {
    width: 9px;
  }

  .site-header.is-open .site-header__toggle span:nth-child(1) {
    background: linear-gradient(90deg, #19face, #700efd);
    transform: translateY(7px) rotate(45deg);
  }

  .site-header.is-open .site-header__toggle span:nth-child(2) {
    opacity: 0;
  }

    .site-header.is-open .site-header__toggle span:nth-child(3) {
    width: 22px;
    background: linear-gradient(90deg, #19face, #700efd);
    transform: translateY(-7px) rotate(-45deg);
  }

  .site-header__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px;
        padding: 8px var(--gutter) 32px;
    background:
            radial-gradient(600px 340px at 100% 100%, rgba(112, 14, 253, 0.42), transparent 70%),
      radial-gradient(480px 300px at 0% 0%, rgba(25, 250, 206, 0.14), transparent 70%),
      var(--hero-bg);
    border-bottom: 1px solid rgba(201, 211, 227, 0.45);
    box-shadow: 0 16px 30px -8px rgba(5, 3, 25, 0.85);
  }
  .site-header.is-open .site-header__menu {
    display: flex;
  }

  .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav a {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9375rem;
  }

  .site-nav__login {
    display: block;
  }

  .site-header__login {
    display: none;
  }

  .site-header__actions {
    flex-wrap: wrap;
    gap: 12px;
  }

  .lang-switch {
    flex: 1 1 100%;
  }

  .lang-switch__btn {
    display: none;
  }

  .lang-switch__menu,
  .lang-switch.is-open .lang-switch__menu {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
	margin-top: 10px;
  }

  .lang-switch__menu a {
    padding: 6px 14px 6px 10px;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
  }

  .lang-switch__menu a:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .lang-switch__menu a[aria-current] {
    color: var(--white);
    background: rgba(112, 14, 253, 0.35);
    border-color: var(--purple);
  }

  .lang-switch__menu img {
    box-shadow: none;
  }

  .hero__title {
    font-size: 3rem;
  }
  .hero__lead {
 
  margin: 28px 32px 0 0;
  font-size: 1.1rem;
  
 
}
.hero__lead {
    max-width: 100%;
    margin: 28px 28px 0 0;
 
}
.site-footer__legal {
max-width: 100%;
 
}
}

@media (max-width: 1199.98px) and (hover: hover) {
  .site-header__toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
  }

  .site-header__toggle:hover span {
    width: 22px;
  }
}

@media (max-width: 1099.98px) {
.site-footer__brand p.long {
    max-width: 100%;
   
}
.hero::before {
 
  background: url('../img/hero-bg.jpg') center bottom / cover no-repeat;
  opacity: 0.7;
}
  .hero {
    padding: calc(var(--header-h) + 56px) 0 64px;
  }

  .hero::before {
    width: 100%;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "copy"
      "media"
      "stat";
    row-gap: 40px;
  }
  .hero__copy,
  .hero__stat {
    align-self: auto;
  }

  .hero__stat {
    justify-content: center;
  }

  .hero__lead {
    font-size: 1.125rem;
  }

  .hero__media {
    width: 100%;
    max-width: 760px;
    justify-self: center;
  }
 
    .device__phone {
        grid-area: 2 / 1;
        justify-self: center;
        width: 30%;
        max-width: none;
        margin: -20% 0 0;
        left: 24px;
    }
  
}

@media (min-width: 900px) and (max-width: 1270px) {
  .device__phone {
    grid-area: 2 / 1;
    justify-self: center;
    width: 30%;
    max-width: none;
    margin: -22% 0 0;
	left: 20px; 
  }

  .hero__caption {
    grid-area: 2 / 1;
    align-self: end;
    justify-self: start;
    max-width: calc(37.5% - 16px);
    text-align: left;
  }
}

@media (max-width: 899.98px) {
  .site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

    .site-footer__brand {
    grid-column: 1 / -1;
  }

  .device__phone {
    grid-area: 3 / 1;
    justify-self: center;
    width: 100%;
    max-width: 350px;
    margin: 32px 0 0;
    left: 0;
  }
}
@media (max-width: 559.98px) {
  :root {
    --gutter: 16px;
  }

  .btn--lg {
    min-height: 46px;
    padding: 0 20px 0.25em;
    font-size: 0.9375rem;
  }

  .hero {
    padding: calc(var(--header-h) + 40px) 0 48px;
  }

  .hero__inner {
    row-gap: 32px;
  }

  .hero__title {
    font-size: 2.25rem;
  }

  .hero__lead {
    margin-top: 20px;
    font-size: 1.0625rem;
  }

  .hero__actions {
    margin-top: 24px;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .hero__stat {
    gap: 16px;
  }

  .hero__stat-num {
    font-size: 2.25rem;
  }

  .hero__stat-text {
    padding-left: 16px;
    font-size: 0.9375rem;
  }

  .device {
    margin-bottom: 26px;
    padding: 6px;
    border-radius: 10px;
  }

  .device__stand {
    height: 20px;
  }

  .device__base {
    top: calc(100% + 20px);
    height: 6px;
  }

  .device__phone {
    grid-area: 2 / 1;
    justify-self: start;
    width: 150px;
    margin: -26px 0 0 8px;
  }

  .hero__caption {
    grid-area: 2 / 1;
    align-self: center;
    justify-self: end;
    max-width: calc(100% - 174px);
    padding-top: 0;
    text-align: right;
  }

 

  .site-footer__inner {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 16px;
  }

  .site-footer__accred {
    margin-top: 40px;
  }

  .site-footer__badge {
    height: 64px;
    padding: 8px 12px;
  }

  .site-footer__badge img {
    max-height: 48px;
  }

  .site-footer__legal {
    margin-top: 40px;
  }
}
.overview__walk {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-top: 28px;
  background: #0f093b;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(15, 9, 59, 0.12);
}

.overview__walk-cap {
  margin: 12px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(19, 9, 48, 0.7);
}

.mods {
 
  margin: 56px auto 0;
 
}

.mods__title {
  margin: 0 0 24px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: #130930;
}

.mods__row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.mods__item {
  display: grid;
  place-items: center;
  height: 124px;
  padding: 16px;
  background: var(--white);
  border: 1px solid #e3e6ee;
  border-radius: 14px;
}

.mods__item img {
  display: block;
  width: auto;
max-width: 100%;
  height: 80px;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.2s, opacity 0.2s;
}

.mods__item:hover img,
.mods__item:focus-visible img {
  filter: none;
  opacity: 1;
}

.faq__more {
  margin: 24px 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

.faq__more a {
  color: var(--purple);
  text-decoration: none;
}

.faq__more a:hover {
  text-decoration: underline;
}

@media (max-width: 1099.98px) {
 

  .mods__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 559.98px) {
  .overview__walk {
    border-radius: 14px;
  }

  .overview__walk-cap {
    font-size: 0.8125rem;
  }

  .mods {
    margin-top: 40px;
  }

  .mods__title {
    font-size: 1.125rem;
  }

  .mods__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .mods__item {
    height: 88px;
    padding: 12px;
  }

  .mods__item img {
    height: 52px;
  }

  .faq__more {
    font-size: 1rem;
  }
}
 
.demo-walk {
  align-self: center;
}

.demo-walk__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #0f093b;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(15, 9, 59, 0.12);
}

.demo-walk__cap {
  margin: 12px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(19, 9, 48, 0.7);
}

@media (max-width: 559.98px) {
  .demo-walk__video {
    border-radius: 14px;
  }

  .demo-walk__cap {
    font-size: 0.8125rem;
  }
}

.trusted__logos a {
  display: block;
}

.trusted__logos .trusted__logo--slim {
  height: 30px;
}

.trusted__logos > :last-child:nth-child(7n + 1) {
  grid-column: 1 / -1;
  justify-self: center;
}

.story__title a,
.cs__name a,
.proof__cite a,
.ways__person a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(19, 9, 48, 0.3);
  text-underline-offset: 4px;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.story__title a:hover,
.cs__name a:hover,
.proof__cite a:hover,
.ways__person a:hover {
  color: var(--purple);
  text-decoration-color: currentColor;
}

.cs__logo-link {
  display: block;
  width: fit-content;
}

.hub-card {
  transition: border-color 0.2s, box-shadow 0.2s;
}

a.hub-card:hover {
  border-color: rgba(120, 165, 255, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 40px rgba(60, 120, 255, 0.4);
}

a.hub-node {
  transition: background-color 0.2s;
}

a.hub-node:hover {
  background: #2a1670;
}

.hub-core {
  transition: box-shadow 0.2s;
}

.hub-core:hover {
  box-shadow: 0 0 2.2em rgba(25, 250, 206, 0.7), inset 0 0 1.2em rgba(25, 250, 206, 0.3), 0 0 6em rgba(112, 14, 253, 0.75);
}

.tryit,
.mmb {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.tbband {
  padding: 0 0 64px;
  color: #130930;
  background: #f3f5f8;
}

.tbband__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: center;
  gap: 64px;
}

.tbband__copy {
  max-width: 760px;
}

.tbband__tag,
.mmb__tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #5b0bd1;
  background: #ebe3fd;
  border-radius: 999px;
}

.tbband__title,
.mmb__title {
  margin: 16px 0 0;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #130930;
}

.tbband__text,
.mmb__lead {
  margin: 16px 0 0;
  font-size: 1.2rem;
  line-height: 1.55;
  color: #395265;
}

.tbband__btn,
.mmb__btn {
  margin-top: 28px;
}

.tbband__phone {
  width: 220px;
  padding: 9px;
  background: #130930;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 36px;
  box-shadow: 0 24px 50px -10px rgba(19, 9, 48, 0.45);
}

.tbband__phone img {
  width: 100%;
  height: auto;
  border-radius: 28px;
}

.feature__text a {
  font-weight: 600;
  color: var(--purple);
}

.feature__text a:hover {
  text-decoration: underline;
}

.mods__item--link {
  position: relative;
  border-color: var(--purple);
}

.mods__item--link img {
  height: 62px;
  margin-top: -18px;
}

.mods__go {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--purple);
  text-align: center;
}

.mmb {
  padding: 0 0 96px;
  color: #130930;
  background: #f3f5f8;
}

.mmb__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 56px;
}

.mmb__ticks {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.mmb__ticks li {
  position: relative;
  margin-top: 12px;
  padding-left: 34px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: #130930;
}

.mmb__ticks li::before {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0;
  width: 22px;
  height: 22px;
  background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23130930' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 13px no-repeat;
  border-radius: 50%;
}

.mmb__note {
  margin: 20px 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #395265;
}

.mmb-frame {
  overflow: hidden;
  color: #1d2939;
  background: var(--white);
  border: 1px solid #e3e6ee;
  border-radius: 18px;
  box-shadow: 0 30px 60px -30px rgba(15, 9, 59, 0.25), 0 10px 30px rgba(15, 9, 59, 0.05);
}

.mmb-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 0.72rem;
  color: #667085;
  background: #eef0f4;
}

.mmb-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c9ced8;
}

.mmb-bar span {
  flex: 1;
  min-width: 0;
  margin-left: 8px;
  padding: 3px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--white);
  border-radius: 6px;
}

.mmb-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 0.8125rem;
  color: var(--white);
  background: #0aa0e6;
}

.mmb-head b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
}

.mmb-head svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #ffd23f;
  stroke-width: 2;
  stroke-linecap: round;
}

.mmb-body {
  min-height: 270px;
  padding: 18px 16px;
}

.mmb-trips,
.mmb-booking,
.mmb-pane {
  display: none;
}

.mmb-body[data-mmb="trips"] .mmb-signin,
.mmb-body[data-mmb="booking"] .mmb-signin {
  display: none;
}

.mmb-body[data-mmb="trips"] .mmb-trips,
.mmb-body[data-mmb="booking"] .mmb-booking,
.mmb-body[data-tab="details"] [data-p="details"],
.mmb-body[data-tab="contact"] [data-p="contact"],
.mmb-body[data-tab="amend"] [data-p="amend"],
.mmb-body[data-tab="pay"] [data-p="pay"],
.mmb-body[data-tab="docs"] [data-p="docs"] {
  display: block;
}

.mmb-h4 {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #0b2540;
}

.mmb-sub {
  margin: -4px 0 12px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #475467;
}

.mmb-field {
  display: block;
  margin-bottom: 9px;
  font-size: 0.75rem;
  color: #475467;
}

.mmb-field input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.8125rem;
  color: #1d2939;
  background: #fafbfc;
  border: 1px solid #cfd5df;
  border-radius: 6px;
}

.mmb-btn {
  display: inline-block;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
  background: #0aa0e6;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.mmb-go {
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  font-size: 0.875rem;
  color: #0b2540;
  background: #ffc21a;
}

.mmb-fake {
  cursor: default;
}

.mmb-perks {
  margin: 14px 0 0;
  padding: 12px 0 0;
  list-style: none;
  font-size: 0.78rem;
  color: #344054;
  border-top: 3px solid #0aa0e6;
}

.mmb-perks li {
  margin: 5px 0;
}

.mmb-perks li::before {
  content: "\2713";
  margin-right: 7px;
  font-weight: 800;
  color: #0aa0e6;
}

.mmb-nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.mmb-up {
  padding-bottom: 10px;
  border-bottom: 3px solid #0aa0e6;
}

.mmb-sec {
  margin: 14px 0 8px;
  padding-bottom: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #0b2540;
  border-bottom: 1px solid #0aa0e6;
}

.mmb-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38%;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d0d5dd;
}

.mmb-card p {
  margin: 0 0 6px;
  font-size: 0.78rem;
  color: #344054;
}

.mmb-card .mmb-ref {
  font-size: 0.84rem;
  color: #1d2939;
}

.mmb-link {
  margin-top: 6px;
  padding: 0;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: #0a6fa0;
  background: none;
  border: 0;
  cursor: pointer;
}

.mmb-img {
  display: block;
  min-height: 110px;
  background: #cfe6f3 url("../img/website-demo/garda-grand-riva.webp") center / cover no-repeat;
}

.mmb-i {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
}

.mmb-i svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #344054;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mmb-viewing {
  margin: 0 0 10px;
  padding-bottom: 10px;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #475467;
  border-bottom: 3px solid #0aa0e6;
}

.mmb-viewing b {
  display: block;
  margin-top: 2px;
  font-size: 0.94rem;
  text-transform: none;
  color: #1d2939;
}

.mmb-tabs {
  display: flex;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid #98a2b3;
}

.mmb-tabs::-webkit-scrollbar {
  display: none;
}

.mmb-tabs button {
  flex: 1 0 auto;
  padding: 7px 8px;
  font-family: inherit;
  font-size: 0.72rem;
  white-space: nowrap;
  color: #667085;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.mmb-body[data-tab="details"] [data-t="details"],
.mmb-body[data-tab="contact"] [data-t="contact"],
.mmb-body[data-tab="amend"] [data-t="amend"],
.mmb-body[data-tab="pay"] [data-t="pay"],
.mmb-body[data-tab="docs"] [data-t="docs"] {
  font-weight: 700;
  color: #0a6fa0;
  border-bottom-color: #0aa0e6;
}

.mmb-pane {
  padding: 12px;
  border: 1px solid #d0d5dd;
}

.mmb-hotel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36%;
  gap: 12px;
}

.mmb-hname {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1d2939;
}

.mmb-stars {
  font-size: 0.75rem;
  color: #f5b400;
}

.mmb-hotel small {
  display: block;
  margin-bottom: 8px;
  font-size: 0.75rem;
  color: #475467;
}

.mmb-hotel p {
  margin: 0 0 5px;
  font-size: 0.75rem;
  color: #344054;
}

.mmb-h {
  margin: 12px 0 6px;
  padding-top: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #0a6fa0;
  border-top: 1px solid #e4e7ec;
}

.mmb-pane .mmb-h:first-child {
  margin-top: 0;
  padding-top: 0;
  border: 0;
}

.mmb-flt {
  margin-bottom: 8px;
}

.mmb-flt small {
  display: block;
  font-size: 0.69rem;
  text-align: center;
  color: #475467;
}

.mmb-flt div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mmb-flt b {
  font-size: 1rem;
  color: #1d2939;
}

.mmb-flt span {
  flex: 1;
  padding-bottom: 3px;
  font-size: 0.66rem;
  text-align: center;
  color: #667085;
  border-bottom: 1px solid #98a2b3;
}

.mmb-x {
  margin: 0 0 8px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #344054;
}

.mmb-dl {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 4px 8px;
  margin: 0;
  font-size: 0.78rem;
}

.mmb-dl dt {
  color: #667085;
}

.mmb-dl dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #1d2939;
}

.mmb-area {
  min-height: 60px;
  margin-bottom: 10px;
  padding: 8px;
  font-size: 0.75rem;
  color: #98a2b3;
  border: 1px solid #cfd5df;
  border-radius: 5px;
}

.mmb-money {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 12px;
}

.mmb-money div {
  padding: 8px 10px;
  background: #f1f8fd;
  border-radius: 6px;
}

.mmb-money small {
  display: block;
  font-size: 0.66rem;
  color: #667085;
}

.mmb-money b {
  font-size: 1rem;
  color: #0b2540;
}

.mmb-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 0.8125rem;
  color: #1d2939;
}

.mmb-opt i {
  flex: none;
  width: 15px;
  height: 15px;
  border: 2px solid #98a2b3;
  border-radius: 50%;
}

.mmb-opt i.on {
  border: 5px solid #0aa0e6;
}

.mmb-opt b {
  margin-left: auto;
}

.mmb-amt {
  width: 90px;
  margin-left: auto;
  padding: 4px 8px;
  color: #667085;
  border: 1px solid #cfd5df;
  border-radius: 5px;
}

.mmb-doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 10px 0;
  font-size: 0.78rem;
  color: #1d2939;
  border-bottom: 1px solid #e4e7ec;
}

.mmb-doc:last-child {
  border: 0;
}

.mmb-doc em {
  font-style: normal;
  font-weight: 700;
  color: #0a6fa0;
}

.mmb-cap {
  margin: 0;
  padding: 8px 16px 12px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #667085;
}

.consent {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 24px;
  width: calc(100% - 40px);
  max-width: 880px;
  padding: 18px 22px;
  color: var(--white);
  background: var(--hero-bg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(15, 9, 59, 0.35);
  transform: translateX(-50%);
}

.consent[hidden] {
  display: none;
}

.consent__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-soft);
}

.consent__text a {
  color: var(--white);
  text-decoration: underline;
}

.consent__actions {
  display: flex;
  flex: none;
  gap: 10px;
}

.consent__actions .btn--outline {
  background: transparent;
}

.consent__actions .btn--outline:hover {
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 1199.98px) {
  .tbband__title,
  .mmb__title {
    font-size: 2.25rem;
  }

  .mmb {
    padding: 0 0 72px;
  }

  .mmb__inner {
    gap: 40px;
  }
}

@media (max-width: 1099.98px) {
  .trusted__logos > :last-child:nth-child(7n + 1) {
    grid-column: auto;
  }

  .trusted__logos > :last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 899.98px) {
  .tbband__inner,
  .mmb__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .tbband__inner {
    gap: 40px;
  }

  .tbband__phone {
    justify-self: center;
    width: 150px;
    padding: 7px;
    border-radius: 26px;
  }

  .tbband__phone img {
    border-radius: 20px;
  }
}

@media (max-width: 559.98px) {
  .trusted__logos > :last-child:nth-child(3n + 1) {
    grid-column: auto;
  }

  .trusted__logos > :last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
  }

  .trusted__logos .trusted__logo--slim {
    height: 26px;
  }

  a.hub-node:hover {
    background: none;
  }

  a.hub-node:hover svg {
    background: #2a1670;
  }

  .tbband {
    padding: 0 0 56px;
  }

  .tbband__title,
  .mmb__title {
    font-size: 1.875rem;
  }

  .tbband__text,
  .mmb__lead {
    font-size: 1.0625rem;
  }

  .mods__item--link img {
    height: 42px;
    margin-top: -16px;
  }

  .mods__go {
    bottom: 9px;
    font-size: 0.75rem;
  }

  .mmb {
    padding: 0 0 56px;
  }

  .mmb__ticks li {
    font-size: 1rem;
  }

  .mmb-body {
    padding: 16px 12px;
  }

  .mmb-hotel,
  .mmb-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .mmb-hotel .mmb-img,
  .mmb-card .mmb-img {
    order: -1;
    min-height: 130px;
  }

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

  .mmb-money div:last-child {
    grid-column: 1 / -1;
  }

  .consent {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    bottom: 12px;
    width: calc(100% - 24px);
    padding: 16px;
  }

  .consent__actions .btn {
    flex: 1 1 0;
  }
}
@media (min-width: 1100px) and (max-width: 1299.98px) {
  .trusted__logos img {
    max-width: 120px;
  }
}