/* ==========================================================================
   SMMRX — Home hero (Figma 25752:40147)
   ========================================================================== */

:root {
  --brand: #3752b2;
  --brand-text: #3752b2;
  --title: #0e0e0e;
  --body: #5a5a5a;
  --text-dark: #202020;
  --text-muted: #494949;
  --text-body: #2b2b22;
  --rating-google: #ffa828;
  --rating-trustpilot: #05c191;
  --danger: #f94346;
  --border-light: #e8e8e3;
  --nav-border: #efefef;
  --white: #ffffff;
  --hero-gradient: linear-gradient(
    133.24deg,
    #87a1ff 8.03%,
    #b5caff 26.84%,
    #dde5ff 44.27%,
    #cdd8ff 61.7%,
    #6987f1 131.42%
  );
  /* Figma 25590:16309 — contact hero bg */
  --hero-gradient-contact: linear-gradient(
    133.238deg,
    #87a1ff 8.027%,
    #b5caff 26.836%,
    #dde5ff 44.267%,
    #cdd8ff 61.698%,
    #6987f1 131.42%
  );
  /* Figma 25590:16854 — blog hero bg */
  --hero-gradient-blog: linear-gradient(
    144.942deg,
    #87a1ff 8.027%,
    #b5caff 26.836%,
    #dde5ff 44.267%,
    #cdd8ff 61.698%,
    #6987f1 131.42%
  );
  --text-gradient: linear-gradient(
    162.89deg,
    #4b4c88 8.2%,
    #6b6dc0 53.43%,
    #6060ab 99.2%
  );
  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Parkinsans", var(--font-sans);
  --font-heading: "Bricolage Grotesque", var(--font-sans);
  --info-container-max: 1440px;
  --header-top: 26px;
  --header-pin-padding: 16px;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

/* Scroll reveal: see assets/css/scroll-reveal.css (loaded after this stylesheet) */

body.smmrx-home {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  font-family: var(--font-sans);
  color: var(--text-dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

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

button,
input {
  font: inherit;
}

.page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Site-wide content width (all sections)
   -------------------------------------------------------------------------- */

.info-container {
  width: calc(100% - 20px);
  max-width: var(--info-container-max);
  margin-inline: auto;
  min-width: 0;
}

.main {
  flex: 1;
  overflow-x: clip;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 28px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--brand);
  color: var(--white);
}

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

.btn--google {
  background: var(--white);
  border: 1px solid var(--brand);
  color: #181818;
  font-weight: 500;
  line-height: 1.35;
}

.btn--block {
  width: 100%;
}

.btn:hover {
  opacity: 0.92;
}

/* Rolling label text (hover / focus) — shared by .btn, CTAs, footer actions */
.roll-label-trigger {
  overflow: hidden;
}

.roll-label {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  height: var(--roll-label-line-height, 1.4em);
  max-height: var(--roll-label-line-height, 1.4em);
  line-height: var(--roll-label-line-height, 1.4em);
  vertical-align: middle;
}

.roll-label-track {
  display: block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.roll-label-line {
  display: block;
  height: var(--roll-label-line-height, 1.4em);
  line-height: var(--roll-label-line-height, 1.4em);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.roll-label-trigger:is(:hover, :focus-visible) .roll-label-track {
  transform: translate3d(0, calc(-1 * var(--roll-label-line-height, 1.4em)), 0);
}

.home-about__cta-label.roll-label,
.home-brand-cta__btn-label.roll-label {
  --roll-label-line-height: 1.5em;
}

.cluster-pricing__cta .roll-label {
  --roll-label-line-height: 1.5em;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .roll-label-line[aria-hidden="true"] {
    display: none;
  }

  .roll-label-track {
    transition: none;
  }

  .roll-label-trigger:is(:hover, :focus-visible) .roll-label-track {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Hero section
   -------------------------------------------------------------------------- */

.hero-section {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  min-height: 100vh;
  padding-bottom: 48px;
  background: var(--hero-gradient);
}

.hero-section__inner {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  padding-top: calc(var(--header-top) + 72px);
}

.hero-section__inner .hero-range-container,
.hero-section__inner .hero-visual,
.hero-section__inner .hero-visual__stage {
  overflow: visible;
}

@media (min-width: 1024px) {
  .hero-section__inner {
    padding-top: 149px;
  }
}

.hero-range-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  width: 100%;
  overflow: visible;
}

/* Home + platform panel — center hero copy and visual (index, *-smm-panel, about hero row) */
body.smmrx-home .hero-range-container,
body.smmrx-platform-panel-page .hero-range-container {
  align-items: center;
}

@media (min-width: 1024px) {
  body.smmrx-home .hero-section:not(.hero-section--about) .hero-section__inner,
  body.smmrx-platform-panel-page .hero-section__inner {
    align-items: center;
  }

  body.smmrx-home .hero-section:not(.hero-section--about) .hero-visual,
  body.smmrx-platform-panel-page .hero-visual {
    align-self: center;
  }

  body.smmrx-platform-panel-page .hero-section__inner {
    padding-top: calc(var(--header-top) + 72px);
    min-height: auto;
    align-items: flex-start;
  }

  body.smmrx-platform-panel-page .hero-range-container {
    margin-top: 0;
  }
}

@media (max-width: 1023px) {
  body.smmrx-platform-panel-page .hero-copy {
    margin-top: 0;
  }

  body.smmrx-platform-panel-page .hero-range-container {
    margin-top: 0;
  }
}

.hero-section--about .hero-visual__portrait {
  width: 420px;
  max-width: 74%;
  max-height: 693px;
}

.hero-title--about {
  max-width: 630px;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.4;
}

.hero-description--about {
  max-width: 621px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--body);
}

body.smmrx-about-page .hero-section.hero-section--about .hero-range-container,
.hero-section.hero-section--about .hero-range-container {
  margin-top: 0;
}

body.smmrx-about-page .hero-section.hero-section--about .hero-copy {
  margin-top: 0;
}

.hero-about-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.hero-about-cta .btn {
  min-height: 48px;
  padding: 6px 28px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
}

.hero-about-cta__secondary {
  border-color: #0094e9;
  background: var(--white);
  color: var(--brand);
}

/* --------------------------------------------------------------------------
   About — Why Choose SMMRX (Figma 25590:15911)
   -------------------------------------------------------------------------- */

.about-why-choose {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.about-why-choose__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.about-why-choose__bg-base {
  position: absolute;
  inset: 0;
  background: var(--white);
}

.about-why-choose__bg-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.about-why-choose__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding-block: clamp(56px, 8vw, 100px);
}

.about-why-choose__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 961px;
  text-align: center;
}

.about-why-choose__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0.8px solid var(--brand);
  border-radius: 100px;
  background: var(--white);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
}

.about-why-choose__badge-icon {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.about-why-choose__badge-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #2b2b22;
}

.about-why-choose__title {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.36px;
  color: #071431;
  text-wrap: balance;
}

.about-why-choose__title-accent {
  display: block;
  color: var(--brand);
}

.about-why-choose__description {
  margin: 0;
  width: 100%;
  max-width: 791px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #404a60;
  text-wrap: pretty;
}

.about-why-choose__grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1440px;
}

.about-why-choose__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}

.about-why-choose__row--center {
  align-items: center;
}

.about-why-choose__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  padding: 24px;
  border: 1px solid #dfe0e4;
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 4px 6px rgba(129, 129, 129, 0.14);
  text-align: left;
}

.about-why-choose__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 0.75px solid #6060ab;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(127, 129, 206, 0.11);
}

.about-why-choose__card-icon img {
  display: block;
  width: auto;
  height: 34px;
  max-width: 39px;
  object-fit: contain;
  object-position: center;
}

.about-why-choose__card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-why-choose__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: #202020;
}

.about-why-choose__card-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(43, 43, 34, 0.74);
}

.about-why-choose__center-badge {
  display: none;
  justify-content: center;
  flex-shrink: 0;
}

.about-why-choose__center-badge-img {
  display: block;
  width: 191px;
  height: 191px;
  max-width: none;
  animation: about-why-choose-badge-spin 24s linear infinite;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .about-why-choose__center-badge-img {
    animation: none;
  }
}

@keyframes about-why-choose-badge-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (min-width: 1024px) {
  .about-why-choose__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .about-why-choose__row--center {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 35px;
  }

  .about-why-choose__card {
    min-height: 230px;
  }

  .about-why-choose__center-badge {
    display: flex;
  }

  .about-why-choose__title-accent {
    display: inline;
  }
}

@media (max-width: 1023px) {
  .about-why-choose__description {
    font-size: 16px;
  }

  .about-why-choose__card-title {
    font-size: 18px;
  }
}

/* --------------------------------------------------------------------------
   About — Professional SMM services (Figma 25590:15971 / bg 25590:15972)
   -------------------------------------------------------------------------- */

.about-benefits {
  padding-block: clamp(72px, 6.25vw, 120px);
  background: var(--white);
}

.about-benefits__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.about-benefits__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 922px;
  text-align: center;
}

.about-benefits__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0.8px solid var(--brand);
  border-radius: 100px;
  background: var(--white);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
}

.about-benefits__badge-icon {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.about-benefits__badge-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #2b2b22;
}

.about-benefits__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.36px;
  color: #000000;
  text-wrap: balance;
}

.about-benefits__title-accent {
  color: var(--brand);
}

.about-benefits__description {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #40434b;
  text-wrap: pretty;
}

.about-benefits__grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.about-benefits__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}

.about-benefits__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: clamp(28px, 4vw, 40px);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .about-benefits.is-visible .about-benefits__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(55, 82, 178, 0.14);
  }
}

.about-benefits__icon {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.about-benefits__card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.about-benefits__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #0e0e0e;
}

.about-benefits__card-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #40434b;
}

@media (min-width: 1024px) {
  .about-benefits__row--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-benefits__row--trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.about-benefits--animate:not(.is-visible) .about-benefits__badge,
.about-benefits--animate:not(.is-visible) .about-benefits__title,
.about-benefits--animate:not(.is-visible) .about-benefits__description {
  opacity: 0;
  transform: translateY(24px);
}

.about-benefits--animate:not(.is-visible) .about-benefits__card {
  opacity: 0;
}

.about-benefits--animate:not(.is-visible) .about-benefits__card:nth-child(1) {
  transform: translateY(36px);
}

.about-benefits--animate:not(.is-visible)
  .about-benefits__row--trio
  .about-benefits__card:nth-child(1) {
  transform: translateX(-44px);
}

.about-benefits--animate:not(.is-visible)
  .about-benefits__row--trio
  .about-benefits__card:nth-child(2) {
  transform: translateY(40px) scale(0.92);
}

.about-benefits--animate:not(.is-visible)
  .about-benefits__row--trio
  .about-benefits__card:nth-child(3) {
  transform: translateX(44px);
}

.about-benefits--animate:not(.is-visible)
  .about-benefits__row--duo
  .about-benefits__card:nth-child(2) {
  transform: translateX(44px);
}

.about-benefits--animate:not(.is-visible) .about-benefits__icon {
  opacity: 0;
  transform: scale(0.82);
}

.about-benefits.is-visible .about-benefits__badge {
  animation: home-guide-reveal-up 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.25s;
  visibility: visible;
}

.about-benefits.is-visible .about-benefits__title {
  animation: home-guide-reveal-up 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.5s;
  visibility: visible;
}

.about-benefits.is-visible .about-benefits__description {
  animation: home-guide-reveal-up 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.75s;
  visibility: visible;
}

.about-benefits.is-visible .about-benefits__card {
  animation: home-benefits-card-up 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--benefit-delay, 0.95s);
  visibility: visible;
}

.about-benefits.is-visible .about-benefits__icon {
  animation: home-benefits-icon-in 0.9s cubic-bezier(0.34, 1.4, 0.64, 1)
    backwards;
  animation-delay: calc(var(--benefit-delay, 0.95s) + 0.22s);
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .about-benefits--animate:not(.is-visible) .about-benefits__badge,
  .about-benefits--animate:not(.is-visible) .about-benefits__title,
  .about-benefits--animate:not(.is-visible) .about-benefits__description,
  .about-benefits--animate:not(.is-visible) .about-benefits__card,
  .about-benefits--animate:not(.is-visible) .about-benefits__icon {
    opacity: 1;
    transform: none;
  }

  .about-benefits.is-visible .about-benefits__badge,
  .about-benefits.is-visible .about-benefits__title,
  .about-benefits.is-visible .about-benefits__description,
  .about-benefits.is-visible .about-benefits__card,
  .about-benefits.is-visible .about-benefits__icon {
    animation: none !important;
  }

  .about-benefits.is-visible .about-benefits__card:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Platform panel — services grid (shared BEM; injected via script.js)
   -------------------------------------------------------------------------- */

.facebook-panel-services {
  padding-block: clamp(72px, 6.25vw, 120px);
  background: var(--white);
}

.facebook-panel-services__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.facebook-panel-services__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 922px;
  text-align: center;
}

.facebook-panel-services__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.25;
  color: #0e0e0e;
}

.facebook-panel-services__title-accent {
  color: var(--brand);
}

.facebook-panel-services__description {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 400;
  line-height: 1.6;
  color: #40434b;
}

.facebook-panel-services__grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.facebook-panel-services__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}

.facebook-panel-services__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: clamp(28px, 4vw, 40px);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .facebook-panel-services.is-visible .facebook-panel-services__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(55, 82, 178, 0.14);
  }
}

.facebook-panel-services__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.facebook-panel-services__card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.facebook-panel-services__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #0e0e0e;
}

.facebook-panel-services__card-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #40434b;
}

@media (min-width: 1024px) {
  .facebook-panel-services__row--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .facebook-panel-services__row--trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.facebook-panel-services--animate:not(.is-visible)
  .facebook-panel-services__title,
.facebook-panel-services--animate:not(.is-visible)
  .facebook-panel-services__description {
  opacity: 0;
  transform: translateY(24px);
}

.facebook-panel-services--animate:not(.is-visible)
  .facebook-panel-services__card {
  opacity: 0;
}

.facebook-panel-services--animate:not(.is-visible)
  .facebook-panel-services__row--trio
  .facebook-panel-services__card:nth-child(1) {
  transform: translateX(-44px);
}

.facebook-panel-services--animate:not(.is-visible)
  .facebook-panel-services__row--trio
  .facebook-panel-services__card:nth-child(2) {
  transform: translateY(40px) scale(0.92);
}

.facebook-panel-services--animate:not(.is-visible)
  .facebook-panel-services__row--trio
  .facebook-panel-services__card:nth-child(3) {
  transform: translateX(44px);
}

.facebook-panel-services--animate:not(.is-visible)
  .facebook-panel-services__row--duo
  .facebook-panel-services__card:nth-child(2) {
  transform: translateX(44px);
}

.facebook-panel-services--animate:not(.is-visible)
  .facebook-panel-services__icon {
  opacity: 0;
  transform: scale(0.82);
}

.facebook-panel-services.is-visible .facebook-panel-services__title {
  animation: home-guide-reveal-up 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.25s;
  visibility: visible;
}

.facebook-panel-services.is-visible .facebook-panel-services__description {
  animation: home-guide-reveal-up 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.5s;
  visibility: visible;
}

.facebook-panel-services.is-visible .facebook-panel-services__card {
  animation: home-benefits-card-up 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--benefit-delay, 0.95s);
  visibility: visible;
}

.facebook-panel-services.is-visible .facebook-panel-services__icon {
  animation: home-benefits-icon-in 0.9s cubic-bezier(0.34, 1.4, 0.64, 1)
    backwards;
  animation-delay: calc(var(--benefit-delay, 0.95s) + 0.22s);
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .facebook-panel-services--animate:not(.is-visible)
    .facebook-panel-services__title,
  .facebook-panel-services--animate:not(.is-visible)
    .facebook-panel-services__description,
  .facebook-panel-services--animate:not(.is-visible)
    .facebook-panel-services__card,
  .facebook-panel-services--animate:not(.is-visible)
    .facebook-panel-services__icon {
    opacity: 1;
    transform: none;
  }

  .facebook-panel-services.is-visible .facebook-panel-services__title,
  .facebook-panel-services.is-visible .facebook-panel-services__description,
  .facebook-panel-services.is-visible .facebook-panel-services__card,
  .facebook-panel-services.is-visible .facebook-panel-services__icon {
    animation: none !important;
  }

  .facebook-panel-services.is-visible .facebook-panel-services__card:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Cluster pricing grid (Figma 25824:6657 — cheapest panel)
   -------------------------------------------------------------------------- */

.cluster-pricing {
  padding-block: clamp(72px, 7.5vw, 120px);
  background: #f0f2ff;
}

.cluster-pricing__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 4vw, 56px);
}

.cluster-pricing__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 822px;
  text-align: center;
}

.cluster-pricing__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #000;
}

.cluster-pricing__description {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #40434b;
}

.cluster-pricing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}

@media (min-width: 1024px) {
  .cluster-pricing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cluster-pricing__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px;
  border: 2px solid #ebefff;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.11);
}

.cluster-pricing__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.cluster-pricing__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: #232323;
}

.cluster-pricing__card-eta {
  margin: 0;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #232323;
  text-align: right;
}

.cluster-pricing__card-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cluster-pricing__stars {
  display: block;
  flex-shrink: 0;
  width: 110px;
  height: 22px;
}

.cluster-pricing__reviews {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #000;
}

.cluster-pricing__price {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  margin: 0;
  color: #232323;
}

.cluster-pricing__price-main {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
}

.cluster-pricing__price-unit {
  margin-bottom: 2px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1;
}

.cluster-pricing__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  margin: 0;
  padding: 16px;
  list-style: none;
  border-radius: 12px;
  background: #f2f4ff;
}

.cluster-pricing__feature {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(55, 82, 178, 0.12);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #343e56;
}

.cluster-pricing__feature:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.cluster-pricing__check-wrap {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  overflow: hidden;
}

.cluster-pricing__check {
  position: absolute;
  display: block;
  width: 162.84%;
  height: 157.14%;
  max-width: none;
  left: -29.04%;
  top: -28.57%;
}

.cluster-pricing__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 6px 24px;
  border-radius: 12px;
  background: #3752b2;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--white);
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .cluster-pricing__cta:hover {
    background: #2d4494;
  }
}

.cluster-pricing--animate:not(.is-visible)
  .cluster-pricing__header
  .about-benefits__badge,
.cluster-pricing--animate:not(.is-visible) .cluster-pricing__title,
.cluster-pricing--animate:not(.is-visible) .cluster-pricing__description {
  opacity: 0;
  transform: translateY(24px);
}

.cluster-pricing--animate:not(.is-visible) .cluster-pricing__card {
  opacity: 0;
  transform: translateY(32px);
}

.cluster-pricing.is-visible .cluster-pricing__header .about-benefits__badge {
  animation: home-guide-reveal-up 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.2s;
  visibility: visible;
}

.cluster-pricing.is-visible .cluster-pricing__title {
  animation: home-guide-reveal-up 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.35s;
  visibility: visible;
}

.cluster-pricing.is-visible .cluster-pricing__description {
  animation: home-guide-reveal-up 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.5s;
  visibility: visible;
}

.cluster-pricing.is-visible .cluster-pricing__card {
  animation: home-benefits-card-up 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--benefit-delay, 0.65s);
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .cluster-pricing--animate:not(.is-visible)
    .cluster-pricing__header
    .about-benefits__badge,
  .cluster-pricing--animate:not(.is-visible) .cluster-pricing__title,
  .cluster-pricing--animate:not(.is-visible) .cluster-pricing__description,
  .cluster-pricing--animate:not(.is-visible) .cluster-pricing__card {
    opacity: 1;
    transform: none;
  }

  .cluster-pricing.is-visible .cluster-pricing__header .about-benefits__badge,
  .cluster-pricing.is-visible .cluster-pricing__title,
  .cluster-pricing.is-visible .cluster-pricing__description,
  .cluster-pricing.is-visible .cluster-pricing__card {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Cluster services grid (Figma 25824:6625 — cheapest panel)
   -------------------------------------------------------------------------- */

.cluster-services {
  padding-block: clamp(72px, 6.25vw, 120px);
  background-color: #dce4ff;
  background-image: linear-gradient(
    209.85deg,
    rgba(97, 126, 255, 0.5) 0%,
    rgba(103, 131, 255, 0.4) 16.147%,
    rgba(124, 148, 255, 0.125) 48.897%,
    rgba(97, 126, 255, 0.5) 96.817%
  );
}

.cluster-services__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 4vw, 56px);
}

.cluster-services__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 1094px;
  text-align: center;
}

.cluster-services__title {
  margin: 0;
  max-width: 940px;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #0e0e0e;
}

.cluster-services__title-accent {
  color: #3752b2;
}

.cluster-services__description {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #404a60;
}

.cluster-services__description--compact {
  max-width: 668px;
  font-size: 16px;
  color: #343e56;
}

.cluster-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}

@media (min-width: 1024px) {
  .cluster-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cluster-services__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 32px;
  border-radius: 21px;
  background: var(--white);
  box-shadow: 0 6px 8px rgba(77, 77, 77, 0.12);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.cluster-services__card--static {
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .cluster-services.is-visible .cluster-services__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(77, 77, 77, 0.16);
  }

  .cluster-services.is-visible .cluster-services__card--static:hover {
    transform: none;
    box-shadow: 0 6px 8px rgba(77, 77, 77, 0.12);
  }
}

.cluster-services__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.cluster-services__icon--lg {
  width: 84px;
  height: 84px;
}

.cluster-services__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.cluster-services__card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #232323;
}

.cluster-services__card-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #5a5a5a;
}

.cluster-services--animate:not(.is-visible) .cluster-services__title,
.cluster-services--animate:not(.is-visible) .cluster-services__description {
  opacity: 0;
  transform: translateY(24px);
}

.cluster-services--animate:not(.is-visible)
  .cluster-services__header
  .about-benefits__badge {
  opacity: 0;
  transform: translateY(24px);
}

.cluster-services--animate:not(.is-visible) .cluster-services__card {
  opacity: 0;
  transform: translateY(28px);
}

.cluster-services.is-visible .cluster-services__title {
  animation: home-guide-reveal-up 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.2s;
  visibility: visible;
}

.cluster-services.is-visible .cluster-services__header .about-benefits__badge {
  animation: home-guide-reveal-up 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.12s;
  visibility: visible;
}

.cluster-services.is-visible .cluster-services__description {
  animation: home-guide-reveal-up 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.35s;
  visibility: visible;
}

.cluster-services.is-visible .cluster-services__card {
  animation: home-benefits-card-up 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--benefit-delay, 0.55s);
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .cluster-services--animate:not(.is-visible) .cluster-services__title,
  .cluster-services--animate:not(.is-visible) .cluster-services__description,
  .cluster-services--animate:not(.is-visible) .cluster-services__card {
    opacity: 1;
    transform: none;
  }

  .cluster-services--animate:not(.is-visible)
    .cluster-services__header
    .about-benefits__badge {
    opacity: 1;
    transform: none;
  }

  .cluster-services.is-visible .cluster-services__title,
  .cluster-services.is-visible .cluster-services__description,
  .cluster-services.is-visible .cluster-services__card {
    animation: none !important;
  }

  .cluster-services.is-visible
    .cluster-services__header
    .about-benefits__badge {
    animation: none !important;
  }

  .cluster-services.is-visible .cluster-services__card:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   About — B2B API slider (Figma 25590:16039 / card 25752:40321) — Swiper
   -------------------------------------------------------------------------- */

.about-api-slider {
  position: relative;
  padding-block: clamp(48px, 5vw, 60px);
  background: var(--white);
  overflow: hidden;
}

.about-api-slider__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 4vw, 48px);
}

.about-api-slider__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 922px;
  text-align: center;
}

.about-api-slider__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.36px;
  color: #000000;
  text-wrap: balance;
}

.about-api-slider__title-accent {
  color: var(--brand);
}

.about-api-slider__description {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #40434b;
  text-wrap: pretty;
}

.about-api-slider__body {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 48px);
  width: 100%;
}

.about-api-slider__swiper {
  width: 100%;
  overflow: visible;
}

.about-api-slider__swiper .swiper-slide {
  height: auto;
  display: flex;
}

.about-api-slider__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-height: 100%;
  padding: 28px 32px;
  border-radius: 20px;
  background: #ccd6ff;
  box-shadow: 0 2px 15px rgba(90, 90, 90, 0.14);
}

.about-api-slider__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: #020618;
}

.about-api-slider__card-panel {
  flex: 1;
  padding: 16px 20px;
  border: 1px solid var(--brand);
  border-radius: 12px;
  background: var(--white);
}

.about-api-slider__card-panel p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #2b2b22;
}

.about-api-slider__controls {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  width: 100%;
}

.about-api-slider__progress.swiper-pagination-progressbar {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 100px;
  background: rgba(87, 87, 87, 0.1);
  overflow: hidden;
}

.about-api-slider__progress .swiper-pagination-progressbar-fill {
  background: var(--brand);
  border-radius: 100px;
}

.about-api-slider__nav {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
}

.about-api-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
}

.about-api-slider__arrow-icon {
  display: block;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.about-api-slider__arrow-ring {
  fill: var(--white);
  stroke: var(--brand);
  stroke-width: 1;
}

.about-api-slider__arrow-line {
  stroke: var(--brand);
}

.about-api-slider__arrow--next .about-api-slider__arrow-icon {
  transform: scaleX(-1);
}

.about-api-slider__arrow--next .about-api-slider__arrow-ring {
  fill: var(--brand);
  stroke: var(--brand);
}

.about-api-slider__arrow--next .about-api-slider__arrow-line {
  stroke: var(--white);
}

.about-api-slider__arrow:hover {
  opacity: 0.85;
}

.about-api-slider__arrow:active {
  transform: scale(0.96);
}

.about-api-slider__arrow.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Site header / nav (Figma 25752:40148 + Tiger scroll animation)
   -------------------------------------------------------------------------- */

.site-header {
  position: absolute;
  inset-inline: 0;
  top: var(--header-top);
  z-index: 30;
}

.site-nav__shell {
  padding: 8px;
  border-radius: 16px;
  border: 0.5px solid var(--nav-border);
  background: var(--white);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.45s ease;
  overflow: visible;
}

.site-header .info-container {
  overflow: visible;
}

.site-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 49px;
}

.site-nav__logo {
  display: flex;
  align-items: center;
  height: 49px;
  padding: 2px 12px 2px 16px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: var(--white);
  flex-shrink: 0;
}

.site-nav__logo img {
  width: 140px;
  height: 39px;
  object-fit: contain;
}

.site-nav__links {
  display: none;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
}

.site-nav__item--dropdown {
  position: relative;
  z-index: 2;
}

.site-nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}

.site-nav__chevron {
  display: block;
  flex-shrink: 0;
  width: 12px;
  height: 8px;
  transition: transform 0.2s ease;
}

.site-nav__dropdown-trigger[aria-expanded="true"] .site-nav__chevron {
  transform: rotate(180deg);
}

.site-nav__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 1000;
  min-width: 252px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 0.5px solid var(--nav-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 12px 32px rgba(55, 82, 178, 0.14),
    0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateX(-50%);
}

.site-nav__dropdown[hidden] {
  display: none;
}

.site-nav__dropdown.is-portaled {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  margin: 0;
  transform: translateX(-50%);
}

body.site-nav-company-open,
body.site-nav-services-open {
  overflow: visible;
}

body.site-nav-company-open .page-shell,
body.site-nav-company-open .main,
body.site-nav-services-open .page-shell,
body.site-nav-services-open .main {
  overflow: visible;
}

.site-nav__dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #393939;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__dropdown-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.site-nav__dropdown a:hover,
.site-nav__dropdown a[aria-current="page"] {
  background: rgba(55, 82, 178, 0.08);
  color: var(--brand);
}

.nav-mobile-menu-subtrigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.nav-mobile-menu-subtrigger::after {
  content: "";
  width: 12px;
  height: 8px;
  background: url("../shared/down-chevron.svg") center / contain no-repeat;
  transition: transform 0.2s ease;
}

.nav-mobile-menu-subtrigger[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.nav-mobile-menu-sublist {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
}

.nav-mobile-menu-sublist[hidden] {
  display: none;
}

.nav-mobile-menu-sublist a {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-align: start;
  white-space: nowrap;
  box-sizing: border-box;
}

.nav-mobile-menu-list .nav-mobile-menu-sublist a {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

.site-nav__link {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: #393939;
  white-space: nowrap;
}

.site-nav__link--active {
  font-weight: 600;
  line-height: 1.4;
  color: var(--brand);
}

.site-nav__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  flex-shrink: 0;
}

.site-nav__actions .btn--outline,
.site-nav__actions .btn--primary {
  display: none;
}

.nav-mobile-menu-trigger {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(55, 82, 178, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.nav-mobile-menu-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nav-mobile-menu-icon__line {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.nav-mobile-menu-trigger--open .nav-mobile-menu-icon__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-mobile-menu-trigger--open .nav-mobile-menu-icon__line:nth-child(2) {
  opacity: 0;
}

.nav-mobile-menu-trigger--open .nav-mobile-menu-icon__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-mobile-menu-panel {
  margin-top: 8px;
  padding: 12px;
  border-radius: 16px;
  border: 0.5px solid var(--nav-border);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(24px);
  position: relative;
  z-index: 1;
}

.nav-mobile-menu-panel:not([hidden]) {
  display: block;
}

body.site-nav-mobile-open .page-shell,
body.site-nav-mobile-open .main {
  overflow: visible;
}

.nav-mobile-menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-mobile-menu-list a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 500;
}

.nav-mobile-menu-list a:hover {
  background: rgba(55, 82, 178, 0.08);
}

.hero-section > header.site-header {
  pointer-events: none;
}

.site-header .info-container {
  pointer-events: auto;
}

.hero-section > header.site-header--pinned {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
  padding-top: var(--header-pin-padding);
  box-sizing: border-box;
}

.site-header--pinned:not(.site-header--reveal) .info-container {
  transform: translate3d(0, calc(-100% - 1.25rem), 0);
  opacity: 0;
  pointer-events: none;
}

.site-header--pinned.site-header--reveal .info-container {
  animation: site-header-slide-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity;
  pointer-events: auto;
}

@keyframes site-header-slide-in {
  0% {
    transform: translate3d(0, calc(-100% - 1.25rem), 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.site-header--pinned .site-nav__shell {
  box-shadow:
    0 16px 48px rgba(55, 82, 178, 0.12),
    0 6px 30px rgba(0, 0, 0, 0.06);
}

.site-header--scrolled .site-nav__shell {
  background: rgba(255, 255, 255, 0.98);
}

@media (prefers-reduced-motion: reduce) {
  .site-header--pinned.site-header--reveal .info-container {
    animation: none;
    will-change: auto;
  }

  .hero-star-pop {
    animation: none !important;
    transform: scale(1) !important;
  }

  .hero-social-idle-float {
    animation: none !important;
  }
}

@media (min-width: 1024px) {
  .site-nav__row {
    display: grid;
    grid-template-columns: minmax(172px, auto) minmax(0, 1fr) minmax(
        220px,
        auto
      );
    align-items: center;
    column-gap: 32px;
  }

  .site-nav__logo {
    grid-column: 1;
    justify-self: start;
  }

  .site-nav__links {
    display: flex;
    grid-column: 2;
    justify-self: center;
    flex: unset;
  }

  .site-nav__actions {
    grid-column: 3;
    justify-self: end;
  }

  .site-nav__actions .btn--outline,
  .site-nav__actions .btn--primary {
    display: inline-flex;
  }

  .nav-mobile-menu-trigger {
    display: none;
  }

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

/* --------------------------------------------------------------------------
   Review badges (SMMGrower pattern + Figma spacing)
   -------------------------------------------------------------------------- */

.hero-copy {
  width: 100%;
  max-width: 691px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.hero-copy__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.hero-trust-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-review-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.hero-review-badges__google {
  display: flex;
  align-items: center;
  gap: 5px;
}

.hero-review-badges__google-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.hero-review-badges__google-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.hero-review-badges__trustpilot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.hero-review-badges__divider {
  display: none;
  width: 1px;
  height: 28px;
  border-radius: 100px;
  background: var(--text-body);
}

.hero-stars-row {
  display: flex;
  align-items: center;
  gap: 0;
}

.hero-stars-row img {
  width: 16px;
  height: 16px;
}

.hero-stars-row img:last-child {
  width: 14px;
  height: 14px;
}

.hero-stars-row--trustpilot {
  gap: 2px;
}

.hero-stars-row--trustpilot img {
  width: 16px;
  height: 16px;
}

.hero-review-badges__rating-line {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-dark);
}

.hero-review-badges__rating-value--google {
  color: var(--rating-google);
}

.hero-review-badges__rating-value--trustpilot {
  color: var(--rating-trustpilot);
}

@keyframes hero-star-pop {
  0% {
    transform: scale(0);
  }
  10% {
    transform: scale(1.1);
  }
  15% {
    transform: scale(1);
  }
  85% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

html.hero-animations-ready .hero-star-pop {
  transform-origin: center;
  animation: hero-star-pop 2.4s ease-out infinite;
}

html.hero-animations-ready .hero-star-pop:nth-child(1) {
  animation-delay: 0s;
}

html.hero-animations-ready .hero-star-pop:nth-child(2) {
  animation-delay: 0.2s;
}

html.hero-animations-ready .hero-star-pop:nth-child(3) {
  animation-delay: 0.4s;
}

html.hero-animations-ready .hero-star-pop:nth-child(4) {
  animation-delay: 0.6s;
}

html.hero-animations-ready .hero-star-pop:nth-child(5) {
  animation-delay: 0.8s;
}

@media (min-width: 640px) {
  .hero-review-badges__divider {
    display: block;
  }
}

.hero-trust-users {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-trust-users__avatars {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 24px;
}

.hero-trust-users__avatars img {
  width: 24px;
  height: 24px;
  border-radius: 15px;
  border: 0.5px solid var(--border-light);
  object-fit: cover;
  margin-right: -10px;
}

.hero-trust-users__avatars img:last-child {
  margin-right: 0;
}

.hero-trust-users__text {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  background: var(--text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   Hero text
   -------------------------------------------------------------------------- */

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-title {
  margin: 0;
  max-width: 630px;
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--title);
}

.hero-title__accent {
  color: var(--brand);
}

.hero-description {
  margin: 0;
  max-width: 621px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--body);
}

/* --------------------------------------------------------------------------
   Sign-in form
   -------------------------------------------------------------------------- */

.hero-signin {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 580px;
  width: 100%;
}

.hero-signin__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.hero-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-field__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #181818;
}

.hero-field__control {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 14px 20px;
  border-radius: 16px;
  border: 1px solid var(--brand);
  background: var(--white);
}

.hero-field__control input {
  width: 100%;
  border: 0;
  padding: 0 0 0 21px;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  outline: none;
}

.hero-field__control input::placeholder {
  color: var(--text-muted);
}

.hero-field__icon {
  position: absolute;
  left: 20px;
  width: 16px;
  height: 16px;
  opacity: 0.7;
  pointer-events: none;
}

.hero-field__icon--user {
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23494949' stroke-width='1.2' d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3Cpath stroke='%23494949' stroke-width='1.2' d='M2.5 14c0-2.5 2.5-4 5.5-4s5.5 1.5 5.5 4'/%3E%3C/svg%3E");
}

.hero-field__icon--lock {
  width: 18px;
  height: 18px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 18 18'%3E%3Crect x='4' y='8' width='10' height='8' rx='2' stroke='%23494949' stroke-width='1.2'/%3E%3Cpath stroke='%23494949' stroke-width='1.2' d='M6 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
}

.hero-field__toggle {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border: 0;
  padding: 0;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23494949' stroke-width='1.2' d='M2 8s2.5-4 6-4 6 4 6 4-2.5 4-6 4-6-4-6-4Z'/%3E%3Cpath stroke='%23494949' stroke-width='1.2' d='M6 8a2 2 0 1 0 4 0 2 2 0 0 0-4 0Z'/%3E%3C/svg%3E");
  cursor: pointer;
}

.hero-field__toggle.is-visible {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23494949' stroke-width='1.2' d='M2 2l12 12M6.5 6.7A2 2 0 0 0 8 10a2 2 0 0 0 1.8-1.1M3.3 3.6C1.8 4.8.7 6.3.7 6.3S3.2 11 8 11c1.2 0 2.2-.3 3-.7M10.5 10.3C9.6 10.8 8.8 11 8 11c-4.8 0-7.3-4.7-7.3-4.7'/%3E%3C/svg%3E");
}

.hero-signin__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-muted);
  cursor: pointer;
}

.hero-checkbox input {
  width: 20px;
  height: 20px;
  accent-color: var(--brand);
}

.hero-signin__forgot {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--danger);
}

.hero-signin__cta {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.hero-signin__actions {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

@media (min-width: 640px) {
  .hero-signin__fields {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
  }

  .hero-field {
    flex: 1;
    min-width: calc(50% - 10px);
  }

  .hero-signin__meta {
    width: 100%;
  }

  .hero-signin__actions {
    flex-direction: row;
    gap: 20px;
  }

  .hero-signin__actions .btn--block {
    flex: 1;
    min-height: 52px;
    border-radius: 16px;
  }
}

.hero-signin__footer {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.hero-signin__footer a {
  font-weight: 600;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Hero visual (Figma 25752:40272 — 534×652 stage)
   -------------------------------------------------------------------------- */

.hero-visual {
  width: 100%;
  max-width: 534px;
  flex-shrink: 0;
  margin-inline: auto;
}

.hero-visual__stage {
  position: relative;
  width: 100%;
  max-width: 534px;
  height: 652px;
  margin-inline: auto;
  overflow: visible;
}

.hero-visual__artboard {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 610px;
  transform: translateY(calc(-50% - 21px));
  overflow: visible;
}

.hero-visual__shape {
  position: absolute;
  pointer-events: none;
  object-fit: fill;
}

.hero-visual__shape--back {
  left: auto;
  right: 8px;
  top: 152px;
  width: 482px;
  max-width: 90.26%;
  height: auto;
  aspect-ratio: 482 / 458;
  transform: scaleX(-1);
}

.hero-visual__shape--front {
  left: auto;
  right: 16px;
  top: 158px;
  width: 468px;
  max-width: 87.64%;
  height: auto;
  aspect-ratio: 468 / 452;
  z-index: 1;
  transform: scaleX(-1);
}

.hero-visual__avg-reviews {
  position: absolute;
  z-index: 4;
  left: -63px;
  top: 100px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.04);
}

.hero-visual__avg-reviews-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 30px;
  background: #ffc700;
  flex-shrink: 0;
}

.hero-visual__avg-reviews-icon img {
  width: 24px;
  height: 24px;
}

.hero-visual__avg-reviews-score {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  color: #222e48;
}

.hero-visual__avg-reviews-score strong {
  font-weight: 700;
}

.hero-visual__avg-reviews-score span {
  font-weight: 400;
  color: #404a60;
}

.hero-visual__avg-reviews-label {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #404a60;
}

.hero-visual__info-gauge {
  position: absolute;
  z-index: 3;
  left: -7%;
  top: 48%;
  width: 28%;
  max-width: 150px;
  height: auto;
  margin: 0;
  filter: drop-shadow(0 4.727px 23.635px rgba(0, 0, 0, 0.04));
  transform: translateX(14px) translateZ(0);
}

.hero-visual__info-gauge svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero-visual__marketing-icon {
  position: absolute;
  z-index: 2;
  left: 375px;
  top: 203px;
  width: 167px;
  height: 167px;
  max-width: 31.3%;
  object-fit: contain;
  transform: rotate(-18deg);
  filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.12));
}

.hero-visual__portrait {
  position: absolute;
  z-index: 5;
  left: calc(50% + 8px);
  bottom: 0;
  width: 348px;
  max-width: 65.17%;
  height: auto;
  max-height: 574px;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: bottom center;
}

.hero-visual__chart {
  position: absolute;
  z-index: 6;
  right: -26px;
  bottom: 0;
  width: 185px;
  max-width: 34.6%;
  height: auto;
  object-fit: contain;
  transform: rotate(-2.67deg);
}

.hero-visual__social-dock {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, clamp(20px, 4vw, 48px));
  width: max-content;
  max-width: 86.667%;
  height: auto;
  overflow: visible;
  isolation: isolate;
}

.hero-social-dock__surface {
  position: absolute;
  inset: 0;
  border-radius: 19.672px;
  border: 0.82px solid var(--brand);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 12px 12px 40px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(2.5px) saturate(1.5);
  -webkit-backdrop-filter: blur(2.5px) saturate(1.5);
}

.hero-social-dock__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 16.393px 22.951px;
  overflow: visible;
}

.hero-social-dock__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  overflow: visible;
}

.hero-social-dock__link:hover,
.hero-social-dock__link:focus-visible {
  z-index: 20;
}

.hero-social-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 5;
  transform: translateX(-50%) translateY(6px) scale(0.96);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.88);
  color: var(--white);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.2s;
}

.hero-social-dock__link:hover .hero-social-tooltip,
.hero-social-dock__link:focus-visible .hero-social-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-8px) scale(1);
}

.hero-social-idle-float {
  display: block;
  width: 48px;
  height: 48px;
  animation-delay: var(--float-delay, 0s);
}

.hero-social-icon {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}

.hero-social-icon img {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.hero-social-icon-glow {
  position: absolute;
  inset: -18%;
  border-radius: 22px;
  background: radial-gradient(
    circle,
    var(--social-glow, rgba(55, 82, 178, 0.7)) 0%,
    transparent 70%
  );
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.hero-social-dock__link:hover .hero-social-icon,
.hero-social-dock__link:focus-visible .hero-social-icon {
  transform: translateY(-10px) scale(1.1);
}

.hero-social-dock__link:hover .hero-social-icon-glow,
.hero-social-dock__link:focus-visible .hero-social-icon-glow {
  opacity: 0.9;
  transform: scale(1);
}

@keyframes hero-social-idle-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.04);
  }
}

@keyframes hero-visual-idle-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes hero-visual-idle-float-tilted {
  0%,
  100% {
    transform: rotate(-18deg) translateY(0);
  }
  50% {
    transform: rotate(-18deg) translateY(-10px);
  }
}

.hero-visual-idle-float {
  animation-delay: var(--float-delay, 0s);
}

html.hero-animations-ready
  .hero-visual-idle-float:not(.hero-visual-idle-float--tilted) {
  animation: hero-visual-idle-float 3.6s cubic-bezier(0.45, 0.05, 0.55, 0.95)
    infinite;
  animation-delay: var(--float-delay, 0s);
}

html.hero-animations-ready .hero-visual-idle-float--tilted {
  animation: hero-visual-idle-float-tilted 3.6s
    cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  animation-delay: var(--float-delay, 0s);
}

html:not(.hero-animations-ready) .hero-visual-idle-float {
  animation: none;
}

html.hero-animations-ready .hero-social-idle-float {
  animation: hero-social-idle-float 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95)
    infinite;
  animation-delay: var(--float-delay, 0s);
}

html:not(.hero-animations-ready) .hero-social-idle-float {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-social-idle-float,
  .hero-visual-idle-float {
    animation: none !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .hero-social-dock__surface {
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.82);
  }

  .hero-social-tooltip {
    display: none;
  }

  html.hero-animations-ready .hero-social-idle-float {
    animation: none;
  }
}

@media (max-width: 1023px) {
  .hero-copy {
    margin-top: 16px;
  }

  .hero-visual__stage {
    height: auto;
    aspect-ratio: 534 / 652;
    max-height: min(652px, 90vw);
  }

  .hero-visual__artboard {
    position: relative;
    top: auto;
    transform: none;
    height: 100%;
  }

  .hero-visual__avg-reviews {
    left: 0;
    top: 8%;
    max-width: 72%;
    padding: 8px 12px;
    gap: 8px;
    border-radius: 12px;
  }

  .hero-visual__avg-reviews-icon {
    width: 36px;
    height: 36px;
    border-radius: 22px;
  }

  .hero-visual__avg-reviews-icon img {
    width: 18px;
    height: 18px;
  }

  .hero-visual__avg-reviews-score {
    font-size: 16px;
    line-height: 1.35;
  }

  .hero-visual__avg-reviews-label {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.35;
  }

  .hero-visual__info-gauge {
    left: 2%;
    top: 34%;
    width: 31%;
    max-width: 118px;
  }

  .hero-visual__marketing-icon {
    left: auto;
    right: 0;
    top: 22%;
    width: 28%;
  }

  .hero-visual__chart {
    right: 0;
    width: 32%;
  }

  .hero-visual__shape--back {
    left: auto;
    right: 4%;
    top: 22%;
    width: 88%;
    transform: scaleX(-1);
  }

  .hero-visual__shape--front {
    left: auto;
    right: 6%;
    top: 24%;
    width: 86%;
    transform: scaleX(-1);
  }

  .hero-social-dock__inner {
    gap: 12px;
    padding: 10px 16px;
  }

  .hero-social-dock__link {
    width: 44px;
    height: 44px;
  }

  .hero-social-icon,
  .hero-social-icon img,
  .hero-social-idle-float {
    width: 40px;
    height: 40px;
  }
}

@media (min-width: 1024px) {
  .hero-section {
    min-height: max(calc(900 / 1920 * 100vw), 900px);
  }

  body.smmrx-about-page .hero-section.hero-section--about {
    min-height: auto;
  }

  body.smmrx-contact-page .hero-section.hero-section--contact,
  body.smmrx-api-page .hero-section.hero-section--api,
  body.smmrx-service-page .hero-section.hero-section--service {
    height: var(--contact-hero-band-height);
    min-height: 0;
  }

  body.smmrx-service-page .service-page-panel {
    padding-inline: clamp(24px, 3vw, 60px);
  }

  .hero-section__inner {
    min-height: 900px;
    display: flex;
    align-items: center;
  }

  body.smmrx-about-page .hero-section.hero-section--about .hero-section__inner {
    min-height: auto;
    display: block;
  }

  .hero-range-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
  }

  .hero-copy {
    flex: 0 1 691px;
    max-width: 691px;
    margin-top: 0;
  }

  .hero-visual {
    flex: 0 0 534px;
    max-width: 534px;
    margin-inline: 0;
    align-self: center;
    margin-top: 0;
  }
}

@media (min-width: 1280px) {
  .hero-range-container {
    gap: 24px;
  }
}

/* ==========================================================================
   Home stats counter (Figma 25590:14083)
   ========================================================================== */

.home-stats {
  background: #f9f9f9;
  padding: 60px 0;
}

.home-stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: stretch;
}

.home-stats__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 327px;
  margin-inline: auto;
  padding: 25px 30px 30px;
  border: 1px solid #e3e1e1;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-stats--animate:not(.is-visible) .home-stats__card {
  opacity: 0;
  transform: translateY(28px);
}

.home-stats.is-visible .home-stats__card {
  animation: home-stats-card-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  visibility: visible;
}

.home-stats.is-visible .home-stats__card:nth-child(1) {
  animation-delay: 0.28s;
}

.home-stats.is-visible .home-stats__card:nth-child(2) {
  animation-delay: 0.56s;
}

.home-stats.is-visible .home-stats__card:nth-child(3) {
  animation-delay: 0.84s;
}

.home-stats.is-visible .home-stats__card:nth-child(4) {
  animation-delay: 1.12s;
}

.home-stats.is-visible .home-stats__icon img {
  animation: home-stats-icon-in 0.95s cubic-bezier(0.34, 1.56, 0.64, 1)
    backwards;
}

.home-stats.is-visible .home-stats__card:nth-child(1) .home-stats__icon img {
  animation-delay: 0.62s;
}

.home-stats.is-visible .home-stats__card:nth-child(2) .home-stats__icon img {
  animation-delay: 0.9s;
}

.home-stats.is-visible .home-stats__card:nth-child(3) .home-stats__icon img {
  animation-delay: 1.18s;
}

.home-stats.is-visible .home-stats__card:nth-child(4) .home-stats__icon img {
  animation-delay: 1.46s;
}

@media (hover: hover) and (pointer: fine) {
  .home-stats.is-visible .home-stats__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.1);
  }
}

@keyframes home-stats-card-in {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@keyframes home-stats-icon-in {
  from {
    opacity: 0;
    transform: scale(0.82);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.home-stats__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 100px;
  width: 100%;
}

.home-stats__icon img {
  width: auto;
  height: auto;
  max-height: 100px;
  max-width: 100%;
  object-fit: contain;
}

.home-stats__icon--services img {
  max-width: 104px;
}

.home-stats__icon--users img {
  max-width: 97px;
}

.home-stats__icon--orders img {
  max-width: 100px;
}

.home-stats__icon--rank img {
  max-width: 164px;
}

.home-stats__details {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.home-stats__value {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.6;
  color: #232323;
}

.home-stats__label {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--brand);
}

@media (min-width: 640px) {
  .home-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (min-width: 1024px) {
  .home-stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2.2vw, 44px);
  }

  .home-stats__card {
    justify-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-stats--animate:not(.is-visible) .home-stats__card {
    opacity: 1;
    transform: none;
  }

  .home-stats.is-visible .home-stats__card,
  .home-stats.is-visible .home-stats__icon img {
    animation: none !important;
  }

  .home-stats.is-visible .home-stats__card:hover {
    transform: none;
  }
}

/* ==========================================================================
   Our services (Figma 25824:14240)
   ========================================================================== */

.our-services {
  padding: clamp(72px, 8vw, 120px) 0;
  background: linear-gradient(
    68.43deg,
    #dde2ff 9.54%,
    #ffffff 28.37%,
    #ffffff 81.72%,
    #d9dfff 112.14%
  );
}

.our-services__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.our-services__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 1086px;
  text-align: center;
}

.our-services__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0.8px solid var(--brand);
  border-radius: 100px;
  background: var(--white);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
}

.our-services__badge-sparkle {
  font-size: 14px;
  line-height: 1;
  color: var(--brand);
}

.our-services__badge-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-body);
}

.our-services__title {
  margin: 0;
  max-width: 961px;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--title);
}

.our-services__title-accent {
  display: block;
  color: var(--brand);
}

.our-services__title-line {
  display: block;
}

@media (min-width: 1024px) {
  .our-services__title-line {
    display: inline;
  }

  .our-services__title-accent {
    display: inline;
  }
}

.our-services__description {
  margin: 0;
  max-width: 1086px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #404a60;
}

.our-services__panel {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

.our-services__tabs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.our-services__tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

.our-services__tab {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  flex: 1 1 calc(50% - 8px);
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 56px;
  padding: 12px 16px;
  border: 1px solid #c3d0ff;
  border-radius: 12px;
  background: #f0f2ff;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  color: #000000;
  cursor: pointer;
  transition:
    background 0.28s ease,
    border-color 0.28s ease,
    color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease;
}

.our-services__tab:hover:not(.our-services__tab--active),
.our-services__tab:focus-visible:not(.our-services__tab--active) {
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(55, 82, 178, 0.12);
  transform: translateY(-2px);
}

.our-services__tab--active {
  border-color: transparent;
  color: var(--white);
  background: linear-gradient(120.46deg, #3752b2 0.37%, #6987f1 99.18%);
  box-shadow:
    0 10px 24px rgba(55, 82, 178, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.our-services__tab--active::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  transform: translateX(-100%);
  animation: our-services-tab-shine 2.4s linear infinite;
}

.our-services__tab--active:hover,
.our-services__tab--active:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px rgba(55, 82, 178, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.our-services__tab--active.our-services__tab--pulse {
  animation: our-services-tab-select 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes our-services-tab-shine {
  0% {
    transform: translateX(-100%);
  }

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

@keyframes our-services-tab-select {
  0% {
    transform: scale(0.96);
  }

  55% {
    transform: scale(1.03);
  }

  100% {
    transform: scale(1);
  }
}

.our-services__tab-icon {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  object-fit: contain;
  transition: transform 0.28s ease;
}

.our-services__tab--active .our-services__tab-icon {
  transform: scale(1.06);
}

.our-services__tab-label {
  position: relative;
  z-index: 2;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  transition: color 0.28s ease;
}

.our-services__tab--active .our-services__tab-label {
  color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .our-services__tab:hover,
  .our-services__tab:focus-visible,
  .our-services__tab--active:hover,
  .our-services__tab--active:focus-visible {
    transform: none;
  }

  .our-services__tab--active::after {
    animation: none;
    display: none;
  }

  .our-services__tab--active.our-services__tab--pulse {
    animation: none;
  }

  .our-services__tab--active .our-services__tab-icon {
    transform: none;
  }
}

.our-services__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
  width: 100%;
  padding: 28px;
  border: 1px solid #cacaca;
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 2px 34px rgba(0, 0, 0, 0.1);
}

.our-services__visual {
  flex-shrink: 0;
  width: 100%;
  max-width: 523px;
  margin-inline: auto;
  border-radius: 28px;
  overflow: hidden;
}

.our-services__visual img {
  display: block;
  width: 100%;
  height: auto;
}

.our-services__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  min-width: 0;
}

.our-services__card-title {
  margin: 0;
  font-size: clamp(28px, 2.5vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  color: #292929;
}

.our-services__card-title-brand {
  color: var(--brand);
}

.our-services__card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.our-services__card-description {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  color: #292929;
}

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

.our-services__feature {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}

.our-services__feature-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.our-services__feature strong {
  font-weight: 700;
  color: var(--brand);
}

.our-services__cta {
  min-width: 197px;
  min-height: 52px;
  padding-inline: 28px;
}

@media (max-width: 1023px) {
  .our-services__title {
    max-width: 100%;
    font-size: clamp(22px, 5.8vw, 30px);
    line-height: 1.3;
  }

  .our-services__title-line {
    display: block;
    text-wrap: pretty;
  }

  .our-services__title-accent {
    display: block;
    margin-top: 0.15em;
  }

  .our-services__tab-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
  }

  .our-services__tab {
    flex: unset;
    width: 100%;
    max-width: 48px;
    min-width: 0;
    min-height: 48px;
    margin-inline: auto;
    justify-self: center;
    padding: 8px;
    gap: 0;
  }

  .our-services__tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .our-services__tab-icon {
    width: 28px;
    height: 28px;
  }
}

@media (min-width: 1024px) {
  .our-services__tab-row:first-child .our-services__tab {
    flex: 1 1 0;
  }

  .our-services__tab-row:last-child .our-services__tab {
    flex: 1 1 0;
  }

  .our-services__tab {
    padding: 12px 24px;
  }

  .our-services__card {
    flex-direction: row;
    align-items: center;
  }

  .our-services__visual {
    width: 523px;
    margin-inline: 0;
  }

  .our-services__content {
    flex: 1;
  }
}

@keyframes our-services-reveal-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes our-services-reveal-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes our-services-reveal-right {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.our-services--animate:not(.is-visible) .our-services__badge,
.our-services--animate:not(.is-visible) .our-services__title,
.our-services--animate:not(.is-visible) .our-services__description,
.our-services--animate:not(.is-visible) .our-services__tab,
.our-services--animate:not(.is-visible) .our-services__visual,
.our-services--animate:not(.is-visible) .our-services__content {
  opacity: 0;
}

.our-services--animate:not(.is-visible) .our-services__feature {
  opacity: 0;
  transform: translateY(16px);
}

.our-services--animate:not(.is-visible) .our-services__badge,
.our-services--animate:not(.is-visible) .our-services__title,
.our-services--animate:not(.is-visible) .our-services__description,
.our-services--animate:not(.is-visible) .our-services__tab {
  transform: translateY(24px);
}

.our-services--animate:not(.is-visible) .our-services__visual {
  transform: translateX(-40px);
}

.our-services--animate:not(.is-visible) .our-services__content {
  transform: translateX(40px);
}

.our-services.is-visible .our-services__badge {
  animation: our-services-reveal-up 1.25s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  animation-delay: 0.35s;
  visibility: visible;
}

.our-services.is-visible .our-services__title {
  animation: our-services-reveal-up 1.25s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  animation-delay: 0.65s;
  visibility: visible;
}

.our-services.is-visible .our-services__description {
  animation: our-services-reveal-up 1.25s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  animation-delay: 0.95s;
  visibility: visible;
}

.our-services.is-visible .our-services__tab {
  animation: our-services-reveal-up 1.15s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  animation-delay: var(--reveal-delay, 1.05s);
  visibility: visible;
}

.our-services.is-visible .our-services__visual {
  animation: our-services-reveal-left 1.3s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  animation-delay: 1.75s;
  visibility: visible;
}

.our-services.is-visible .our-services__content {
  animation: our-services-reveal-right 1.3s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  animation-delay: 2s;
  visibility: visible;
}

.our-services.is-visible .our-services__feature {
  animation: our-services-reveal-up 1.05s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  animation-delay: var(--feature-delay, 0s);
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .our-services--animate:not(.is-visible) .our-services__badge,
  .our-services--animate:not(.is-visible) .our-services__title,
  .our-services--animate:not(.is-visible) .our-services__description,
  .our-services--animate:not(.is-visible) .our-services__tab,
  .our-services--animate:not(.is-visible) .our-services__visual,
  .our-services--animate:not(.is-visible) .our-services__content,
  .our-services--animate:not(.is-visible) .our-services__feature {
    opacity: 1;
    transform: none;
  }

  .our-services.is-visible .our-services__badge,
  .our-services.is-visible .our-services__title,
  .our-services.is-visible .our-services__description,
  .our-services.is-visible .our-services__tab,
  .our-services.is-visible .our-services__visual,
  .our-services.is-visible .our-services__content,
  .our-services.is-visible .our-services__feature {
    animation: none !important;
  }
}

/* ==========================================================================
   Home guide / payment methods (Figma 25824:14205)
   ========================================================================== */

.home-guide {
  padding: clamp(72px, 8vw, 120px) 0;
  /* Figma 25824:14205 — base #d7ddff + linear overlay (opaque stops need this base) */
  background-color: #d7ddff;
  background-image: linear-gradient(
    203.626deg,
    #d7ddff 31.886%,
    rgba(86, 111, 255, 0.13) 49.072%,
    rgba(119, 140, 255, 0.35) 94.816%
  );
}

.home-guide__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.home-guide__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 1086px;
  text-align: center;
}

.home-guide__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0.8px solid var(--brand);
  border-radius: 100px;
  background: var(--white);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
}

.home-guide__badge-sparkle {
  font-size: 14px;
  line-height: 1;
  color: var(--brand);
}

.home-guide__badge-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-body);
}

.home-guide__title {
  margin: 0;
  max-width: 961px;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--title);
}

.home-guide__title-accent {
  display: block;
  color: var(--brand);
}

.home-guide__description {
  margin: 0;
  max-width: 1086px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #404a60;
}

.home-guide__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  width: 100%;
}

.home-guide__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 4vw, 32px);
  border: 0.5px solid #bec7ff;
  border-radius: 20px;
  background: #f3f5ff;
  box-shadow: 0 4px 4px #ededed;
}

.home-guide__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--brand);
  text-align: left;
}

.home-guide__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid rgba(190, 199, 255, 0.85);
}

.home-guide__card-text {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.home-guide__card-text p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #40434b;
  text-align: left;
}

@media (max-width: 1023px) {
  .home-guide__title {
    max-width: 100%;
    font-size: clamp(22px, 5.8vw, 30px);
    line-height: 1.3;
  }

  .home-guide__title-line,
  .home-guide__title-accent {
    display: block;
    text-wrap: pretty;
  }

  .home-guide__title-accent {
    margin-top: 0.15em;
  }
}

@media (min-width: 1024px) {
  .home-guide__title-accent {
    display: inline;
  }

  .home-guide__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .home-guide__card--right {
    height: 100%;
  }
}

@keyframes home-guide-reveal-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes home-guide-reveal-left {
  from {
    opacity: 0;
    transform: translateX(-36px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes home-guide-reveal-right {
  from {
    opacity: 0;
    transform: translateX(36px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.home-guide--animate:not(.is-visible) .home-guide__badge,
.home-guide--animate:not(.is-visible) .home-guide__title,
.home-guide--animate:not(.is-visible) .home-guide__description {
  opacity: 0;
  transform: translateY(24px);
}

.home-guide--animate:not(.is-visible) .home-guide__card--left {
  opacity: 0;
  transform: translateX(-36px);
}

.home-guide--animate:not(.is-visible) .home-guide__card--right {
  opacity: 0;
  transform: translateX(36px);
}

.home-guide.is-visible .home-guide__badge {
  animation: home-guide-reveal-up 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.25s;
  visibility: visible;
}

.home-guide.is-visible .home-guide__title {
  animation: home-guide-reveal-up 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.5s;
  visibility: visible;
}

.home-guide.is-visible .home-guide__description {
  animation: home-guide-reveal-up 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.75s;
  visibility: visible;
}

.home-guide.is-visible .home-guide__card--left {
  animation: home-guide-reveal-left 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 1.05s;
  visibility: visible;
}

.home-guide.is-visible .home-guide__card--right {
  animation: home-guide-reveal-right 1.2s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  animation-delay: 1.3s;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .home-guide--animate:not(.is-visible) .home-guide__badge,
  .home-guide--animate:not(.is-visible) .home-guide__title,
  .home-guide--animate:not(.is-visible) .home-guide__description,
  .home-guide--animate:not(.is-visible) .home-guide__card--left,
  .home-guide--animate:not(.is-visible) .home-guide__card--right {
    opacity: 1;
    transform: none;
  }

  .home-guide.is-visible .home-guide__badge,
  .home-guide.is-visible .home-guide__title,
  .home-guide.is-visible .home-guide__description,
  .home-guide.is-visible .home-guide__card--left,
  .home-guide.is-visible .home-guide__card--right {
    animation: none !important;
  }
}

/* ==========================================================================
   Home about (Figma 25590:14105)
   ========================================================================== */

.home-about {
  position: relative;
  padding-block: clamp(72px, 6.25vw, 120px);
  background: var(--white);
  overflow: hidden;
}

.home-about__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--white);
  background-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 0.08) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
  opacity: 0.45;
}

.home-about__inner {
  position: relative;
  z-index: 1;
}

.home-about__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 5.56vw, 80px);
}

.home-about__visual {
  flex-shrink: 0;
  width: 100%;
  max-width: 523px;
  margin-inline: auto;
}

.home-about__visual img {
  display: block;
  width: 100%;
  height: auto;
}

.home-about__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, 2.3vw, 33px);
  width: 100%;
  max-width: 574px;
}

.home-about__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.home-about__title {
  margin: 0;
  max-width: 574px;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #071431;
}

.home-about__title-accent {
  color: var(--brand);
}

.home-about__text {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.home-about__text p {
  margin: 0;
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
}

.home-about__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 12px 6px 24px;
  border-radius: 12px;
  background: var(--brand);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
}

.home-about__cta:hover {
  opacity: 0.92;
}

.home-about__cta:active {
  transform: translateY(1px);
}

.home-about__cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 100px;
  background: var(--white);
  color: var(--brand);
}

@media (min-width: 1024px) {
  .home-about__layout {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .home-about__visual {
    width: min(523px, 36.3%);
    max-width: 523px;
    margin-inline: 0;
  }

  .home-about__content {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }

  .home-about__title {
    max-width: 574px;
  }
}

@keyframes home-about-reveal-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes home-about-reveal-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes home-about-reveal-right {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.home-about--animate:not(.is-visible) .home-about__visual {
  opacity: 0;
  transform: translateX(-40px);
}

.home-about--animate:not(.is-visible) .home-about__copy,
.home-about--animate:not(.is-visible) .home-about__cta {
  opacity: 0;
  transform: translateX(40px);
}

.home-about.is-visible .home-about__visual {
  animation: home-about-reveal-left 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.3s;
  visibility: visible;
}

.home-about.is-visible .home-about__copy {
  animation: home-about-reveal-right 1.2s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  animation-delay: 0.55s;
  visibility: visible;
}

.home-about.is-visible .home-about__cta {
  animation: home-about-reveal-up 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.85s;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .home-about--animate:not(.is-visible) .home-about__visual,
  .home-about--animate:not(.is-visible) .home-about__copy,
  .home-about--animate:not(.is-visible) .home-about__cta {
    opacity: 1;
    transform: none;
  }

  .home-about.is-visible .home-about__visual,
  .home-about.is-visible .home-about__copy,
  .home-about.is-visible .home-about__cta {
    animation: none !important;
  }
}

/* ==========================================================================
   Home benefits (Figma 25590:14888 / bg 25590:14889)
   ========================================================================== */

.home-benefits {
  padding-block: clamp(72px, 6.25vw, 120px);
  background-color: #d7ddff;
  background-image: linear-gradient(
    211.475deg,
    #d7ddff 31.886%,
    rgba(0, 38, 255, 0.13) 49.072%,
    rgba(0, 38, 255, 0.35) 94.816%
  );
}

.home-benefits__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.home-benefits__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 822px;
  text-align: center;
}

.home-benefits__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0.8px solid var(--brand);
  border-radius: 100px;
  background: var(--white);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
}

.home-benefits__badge-sparkle {
  font-size: 14px;
  line-height: 1;
  color: var(--brand);
}

.home-benefits__badge-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-body);
}

.home-benefits__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #000000;
  text-wrap: balance;
}

.home-benefits__description {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #40434b;
}

.home-benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}

.home-benefits__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: clamp(28px, 4vw, 40px);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .home-benefits.is-visible .home-benefits__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(55, 82, 178, 0.14);
  }
}

.home-benefits__icon {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.home-benefits__card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.home-benefits__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  color: #0e0e0e;
}

.home-benefits__card-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  color: #40434b;
}

@media (min-width: 640px) {
  .home-benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .home-benefits__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .home-benefits__title {
    text-wrap: pretty;
  }
}

.home-benefits--animate:not(.is-visible) .home-benefits__badge,
.home-benefits--animate:not(.is-visible) .home-benefits__title,
.home-benefits--animate:not(.is-visible) .home-benefits__description {
  opacity: 0;
  transform: translateY(24px);
}

.home-benefits--animate:not(.is-visible) .home-benefits__card {
  opacity: 0;
}

.home-benefits--animate:not(.is-visible) .home-benefits__card:nth-child(1) {
  transform: translateY(36px);
}

.home-benefits--animate:not(.is-visible) .home-benefits__card:nth-child(2) {
  transform: translateX(-44px);
}

.home-benefits--animate:not(.is-visible) .home-benefits__card:nth-child(3) {
  transform: translateX(44px);
}

.home-benefits--animate:not(.is-visible) .home-benefits__card:nth-child(4) {
  transform: translateY(40px) scale(0.92);
}

.home-benefits--animate:not(.is-visible) .home-benefits__card:nth-child(5) {
  transform: translateY(44px) rotate(-2deg);
}

.home-benefits--animate:not(.is-visible) .home-benefits__card:nth-child(6) {
  transform: translate(32px, 36px) scale(0.94);
}

.home-benefits--animate:not(.is-visible) .home-benefits__icon {
  opacity: 0;
  transform: scale(0.82);
}

.home-benefits.is-visible .home-benefits__badge {
  animation: home-guide-reveal-up 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.25s;
  visibility: visible;
}

.home-benefits.is-visible .home-benefits__title {
  animation: home-guide-reveal-up 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.5s;
  visibility: visible;
}

.home-benefits.is-visible .home-benefits__description {
  animation: home-guide-reveal-up 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.75s;
  visibility: visible;
}

.home-benefits.is-visible .home-benefits__card:nth-child(1) {
  animation: home-benefits-card-up 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--benefit-delay, 0.95s);
  visibility: visible;
}

.home-benefits.is-visible .home-benefits__card:nth-child(2) {
  animation: home-benefits-card-left 1.2s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  animation-delay: var(--benefit-delay, 1.1s);
  visibility: visible;
}

.home-benefits.is-visible .home-benefits__card:nth-child(3) {
  animation: home-benefits-card-right 1.2s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  animation-delay: var(--benefit-delay, 1.25s);
  visibility: visible;
}

.home-benefits.is-visible .home-benefits__card:nth-child(4) {
  animation: home-benefits-card-scale 1.2s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  animation-delay: var(--benefit-delay, 1.4s);
  visibility: visible;
}

.home-benefits.is-visible .home-benefits__card:nth-child(5) {
  animation: home-benefits-card-tilt 1.2s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  animation-delay: var(--benefit-delay, 1.55s);
  visibility: visible;
}

.home-benefits.is-visible .home-benefits__card:nth-child(6) {
  animation: home-benefits-card-diagonal 1.2s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  animation-delay: var(--benefit-delay, 1.7s);
  visibility: visible;
}

.home-benefits.is-visible .home-benefits__card .home-benefits__icon {
  animation: home-benefits-icon-in 0.9s cubic-bezier(0.34, 1.4, 0.64, 1)
    backwards;
  animation-delay: calc(var(--benefit-delay, 0.95s) + 0.22s);
  visibility: visible;
}

@keyframes home-benefits-card-up {
  from {
    opacity: 0;
    transform: translateY(36px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes home-benefits-card-left {
  from {
    opacity: 0;
    transform: translateX(-44px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes home-benefits-card-right {
  from {
    opacity: 0;
    transform: translateX(44px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes home-benefits-card-scale {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes home-benefits-card-tilt {
  from {
    opacity: 0;
    transform: translateY(44px) rotate(-2deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes home-benefits-card-diagonal {
  from {
    opacity: 0;
    transform: translate(32px, 36px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes home-benefits-icon-in {
  from {
    opacity: 0;
    transform: scale(0.82);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-benefits--animate:not(.is-visible) .home-benefits__badge,
  .home-benefits--animate:not(.is-visible) .home-benefits__title,
  .home-benefits--animate:not(.is-visible) .home-benefits__description,
  .home-benefits--animate:not(.is-visible) .home-benefits__card,
  .home-benefits--animate:not(.is-visible) .home-benefits__icon {
    opacity: 1;
    transform: none;
  }

  .home-benefits.is-visible .home-benefits__badge,
  .home-benefits.is-visible .home-benefits__title,
  .home-benefits.is-visible .home-benefits__description,
  .home-benefits.is-visible .home-benefits__card,
  .home-benefits.is-visible .home-benefits__icon {
    animation: none !important;
  }

  .home-benefits.is-visible .home-benefits__card:hover {
    transform: none;
  }
}

/* ==========================================================================
   SMM role / monetization (Figma 25746:39211 / bg 25746:39212)
   ========================================================================== */

.home-smm-role {
  padding-block: clamp(72px, 6.25vw, 120px);
  background-color: #dce4ff;
  background-image: linear-gradient(
    56.648deg,
    #8ba4ff 7.8595%,
    #dce4ff 65.78%,
    #8ba4ff 117.65%
  );
}

.home-smm-role__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.home-smm-role__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 1094px;
  text-align: center;
}

.home-smm-role__title {
  margin: 0;
  max-width: 1074px;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 600;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #0e0e0e;
  text-wrap: balance;
}

.home-smm-role__description {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #404a60;
}

.home-smm-role__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}

.home-smm-role__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  height: 100%;
  padding: 32px;
  border-radius: 21px;
  background: var(--white);
  box-shadow: 0 6px 8px rgba(77, 77, 77, 0.12);
}

.home-smm-role__icon {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  object-fit: contain;
}

.home-smm-role__card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.home-smm-role__card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #232323;
}

.home-smm-role__card-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--body);
}

@media (min-width: 768px) {
  .home-smm-role__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .home-smm-role__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.home-smm-role--animate:not(.is-visible) .home-smm-role__title,
.home-smm-role--animate:not(.is-visible) .home-smm-role__description {
  opacity: 0;
  transform: translateY(24px);
}

.home-smm-role--animate:not(.is-visible) .home-smm-role__card {
  opacity: 0;
  transform: translateY(28px);
}

.home-smm-role.is-visible .home-smm-role__title {
  animation: home-guide-reveal-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.1s;
}

.home-smm-role.is-visible .home-smm-role__description {
  animation: home-guide-reveal-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.24s;
}

.home-smm-role.is-visible .home-smm-role__card {
  animation: home-guide-reveal-up 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--smm-role-delay, 0.4s);
}

@media (prefers-reduced-motion: reduce) {
  .home-smm-role--animate:not(.is-visible) .home-smm-role__title,
  .home-smm-role--animate:not(.is-visible) .home-smm-role__description,
  .home-smm-role--animate:not(.is-visible) .home-smm-role__card {
    opacity: 1;
    transform: none;
  }

  .home-smm-role.is-visible .home-smm-role__title,
  .home-smm-role.is-visible .home-smm-role__description,
  .home-smm-role.is-visible .home-smm-role__card {
    animation: none !important;
  }
}

/* ==========================================================================
   Select services / audiences (Figma 25590:14682)
   ========================================================================== */

.home-select-services {
  position: relative;
  padding-block: clamp(72px, 6.25vw, 120px);
  background: var(--white);
  overflow: hidden;
}

.home-select-services__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--white);
  background-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 0.08) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
  opacity: 0.45;
}

.home-select-services__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.home-select-services__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 822px;
  text-align: center;
}

.home-select-services__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0.8px solid var(--brand);
  border-radius: 100px;
  background: var(--white);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
}

.home-select-services__badge-sparkle {
  font-size: 14px;
  line-height: 1;
  color: var(--brand);
}

.home-select-services__badge-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-body);
}

.home-select-services__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #000000;
  text-wrap: balance;
}

.home-select-services__description {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #40434b;
}

.home-select-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}

.home-select-services__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  height: 100%;
  padding: 24px;
  border: 1px solid #e2e2e2;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.home-select-services__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.home-select-services__icon--wide {
  width: 96px;
  height: 64px;
}

.home-select-services__card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.home-select-services__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #0e0e0e;
}

.home-select-services__card-title--lead {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  color: #232323;
}

.home-select-services__card-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #40434b;
}

@media (min-width: 768px) {
  .home-select-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .home-select-services__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.home-select-services--animate:not(.is-visible) .home-select-services__badge,
.home-select-services--animate:not(.is-visible) .home-select-services__title,
.home-select-services--animate:not(.is-visible)
  .home-select-services__description {
  opacity: 0;
  transform: translateY(24px);
}

.home-select-services--animate:not(.is-visible) .home-select-services__card {
  opacity: 0;
  transform: translateY(28px);
}

.home-select-services.is-visible .home-select-services__badge {
  animation: home-guide-reveal-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.1s;
}

.home-select-services.is-visible .home-select-services__title {
  animation: home-guide-reveal-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.24s;
}

.home-select-services.is-visible .home-select-services__description {
  animation: home-guide-reveal-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.38s;
}

.home-select-services.is-visible .home-select-services__card {
  animation: home-guide-reveal-up 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--select-services-delay, 0.48s);
}

@media (prefers-reduced-motion: reduce) {
  .home-select-services--animate:not(.is-visible) .home-select-services__badge,
  .home-select-services--animate:not(.is-visible) .home-select-services__title,
  .home-select-services--animate:not(.is-visible)
    .home-select-services__description,
  .home-select-services--animate:not(.is-visible) .home-select-services__card {
    opacity: 1;
    transform: none;
  }

  .home-select-services.is-visible .home-select-services__badge,
  .home-select-services.is-visible .home-select-services__title,
  .home-select-services.is-visible .home-select-services__description,
  .home-select-services.is-visible .home-select-services__card {
    animation: none !important;
  }
}

/* ==========================================================================
   Why panel matters (Figma 25590:14503)
   ========================================================================== */

.home-why-panel {
  padding-block: clamp(72px, 6.25vw, 120px);
  background-color: #dce4ff;
  background-image: linear-gradient(
    56.24deg,
    #8ba4ff 7.8595%,
    #dce4ff 65.78%,
    #8ba4ff 117.65%
  );
}

.home-why-panel__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.home-why-panel__title {
  margin: 0;
  max-width: 1280px;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 600;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #020618;
  text-wrap: balance;
}

.home-why-panel__layout {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 1280px;
}

.home-why-panel__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.home-why-panel__center {
  display: none;
}

.home-why-panel__card {
  padding: clamp(28px, 3.125vw, 40px);
  border: 0.5px solid #fff;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.16);
}

.home-why-panel__card-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: #020618;
}

.home-why-panel__card-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #40434b;
}

.home-why-panel__cta {
  padding-inline: 16px 12px;
}

.home-why-panel__cta .home-about__cta-icon img {
  display: block;
  width: 12px;
  height: 12px;
}

@media (min-width: 1024px) {
  .home-why-panel__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
    gap: 40px;
    align-items: center;
  }

  .home-why-panel__col {
    gap: 40px;
  }

  .home-why-panel__col--left {
    grid-column: 1;
  }

  .home-why-panel__center {
    display: block;
    position: relative;
    grid-column: 2;
    grid-row: 1;
    width: 36px;
    height: 342px;
    justify-self: center;
  }

  .home-why-panel__col--right {
    grid-column: 3;
  }

  .home-why-panel__stepper {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 342px;
    max-width: none;
  }

  .home-why-panel__decor {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: 150px;
    height: 150px;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .home-why-panel__decor-shape {
    position: absolute;
    max-width: none;
  }

  .home-why-panel__decor-shape--1 {
    right: -18%;
    top: 15%;
    width: 120px;
    height: 120px;
    opacity: 0.35;
  }

  .home-why-panel__decor-shape--2 {
    left: 13%;
    bottom: 13%;
    width: 100px;
    height: 100px;
    opacity: 0.35;
  }

  .home-why-panel__decor-shape--3 {
    left: 32%;
    top: 6%;
    width: 110px;
    height: 110px;
    opacity: 0.35;
  }

  .home-why-panel__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--white);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.15),
      0 1px 2px 1px rgba(0, 0, 0, 0.05);
    transform: translate(-50%, -50%);
    font-family: "Bricolage Grotesque", var(--font-display);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--brand);
    text-transform: capitalize;
  }
}

.home-why-panel--animate:not(.is-visible) .home-why-panel__title {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-32px);
  filter: blur(6px);
}

.home-why-panel--animate:not(.is-visible)
  .home-why-panel__col--left
  .home-why-panel__card {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-56px) rotate(-1.5deg);
}

.home-why-panel--animate:not(.is-visible)
  .home-why-panel__col--right
  .home-why-panel__card {
  opacity: 0;
  visibility: hidden;
  transform: translateX(56px) rotate(1.5deg);
}

.home-why-panel--animate:not(.is-visible) .home-why-panel__center {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.82);
}

.home-why-panel--animate:not(.is-visible) .home-why-panel__decor-shape {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.5);
}

.home-why-panel--animate:not(.is-visible) .home-why-panel__decor-shape--1 {
  transform: scale(0.5) translate(-24px, -16px);
}

.home-why-panel--animate:not(.is-visible) .home-why-panel__decor-shape--2 {
  transform: scale(0.5) translate(20px, 8px);
}

.home-why-panel--animate:not(.is-visible) .home-why-panel__decor-shape--3 {
  transform: scale(0.5) translate(-12px, 28px);
}

.home-why-panel--animate:not(.is-visible) .home-why-panel__stepper {
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0.2);
  transform-origin: top center;
}

.home-why-panel--animate:not(.is-visible) .home-why-panel__logo {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.6);
}

.home-why-panel--animate:not(.is-visible) .home-why-panel__cta {
  opacity: 0;
  visibility: hidden;
  transform: translateY(36px) scale(0.94);
}

.home-why-panel.is-visible .home-why-panel__title {
  animation: home-why-title-in 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.28s;
  visibility: visible;
}

.home-why-panel.is-visible
  .home-why-panel__col--left
  .home-why-panel__card:nth-child(1) {
  animation: home-why-card-left-in 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.48s;
  visibility: visible;
}

.home-why-panel.is-visible
  .home-why-panel__col--left
  .home-why-panel__card:nth-child(2) {
  animation: home-why-card-left-in 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.68s;
  visibility: visible;
}

.home-why-panel.is-visible
  .home-why-panel__col--right
  .home-why-panel__card:nth-child(1) {
  animation: home-why-card-right-in 1.15s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  animation-delay: 0.58s;
  visibility: visible;
}

.home-why-panel.is-visible
  .home-why-panel__col--right
  .home-why-panel__card:nth-child(2) {
  animation: home-why-card-right-in 1.15s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  animation-delay: 0.78s;
  visibility: visible;
}

.home-why-panel.is-visible .home-why-panel__center {
  animation: home-why-center-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.4s;
  visibility: visible;
}

.home-why-panel.is-visible .home-why-panel__decor-shape--1 {
  animation: home-why-decor-in-1 0.95s cubic-bezier(0.34, 1.35, 0.64, 1)
    forwards;
  animation-delay: 0.62s;
  visibility: visible;
}

.home-why-panel.is-visible .home-why-panel__decor-shape--2 {
  animation: home-why-decor-in-2 0.95s cubic-bezier(0.34, 1.35, 0.64, 1)
    forwards;
  animation-delay: 0.76s;
  visibility: visible;
}

.home-why-panel.is-visible .home-why-panel__decor-shape--3 {
  animation: home-why-decor-in-3 0.95s cubic-bezier(0.34, 1.35, 0.64, 1)
    forwards;
  animation-delay: 0.9s;
  visibility: visible;
}

.home-why-panel.is-visible .home-why-panel__stepper {
  animation: home-why-stepper-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.72s;
  visibility: visible;
}

.home-why-panel.is-visible .home-why-panel__logo {
  animation: home-why-logo-in 0.8s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
  animation-delay: 0.88s;
  visibility: visible;
}

.home-why-panel.is-visible .home-why-panel__cta {
  animation: home-why-cta-in 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 1.05s;
  visibility: visible;
}

@keyframes home-why-title-in {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-32px);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes home-why-card-left-in {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-56px) rotate(-1.5deg);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) rotate(0);
  }
}

@keyframes home-why-card-right-in {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateX(56px) rotate(1.5deg);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) rotate(0);
  }
}

@keyframes home-why-center-in {
  from {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.82);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }
}

@keyframes home-why-decor-in-1 {
  from {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.5) translate(-24px, -16px);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translate(0, 0);
  }
}

@keyframes home-why-decor-in-2 {
  from {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.5) translate(20px, 8px);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translate(0, 0);
  }
}

@keyframes home-why-decor-in-3 {
  from {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.5) translate(-12px, 28px);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translate(0, 0);
  }
}

@keyframes home-why-stepper-in {
  from {
    opacity: 0;
    visibility: hidden;
    transform: scaleY(0.2);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
  }
}

@keyframes home-why-logo-in {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.6);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes home-why-cta-in {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(36px) scale(0.94);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-why-panel--animate:not(.is-visible) .home-why-panel__title,
  .home-why-panel--animate:not(.is-visible) .home-why-panel__card,
  .home-why-panel--animate:not(.is-visible) .home-why-panel__cta,
  .home-why-panel--animate:not(.is-visible) .home-why-panel__center,
  .home-why-panel--animate:not(.is-visible) .home-why-panel__decor-shape,
  .home-why-panel--animate:not(.is-visible) .home-why-panel__stepper,
  .home-why-panel--animate:not(.is-visible) .home-why-panel__logo {
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: none;
  }

  .home-why-panel.is-visible .home-why-panel__title,
  .home-why-panel.is-visible .home-why-panel__card,
  .home-why-panel.is-visible .home-why-panel__center,
  .home-why-panel.is-visible .home-why-panel__decor-shape,
  .home-why-panel.is-visible .home-why-panel__stepper,
  .home-why-panel.is-visible .home-why-panel__logo,
  .home-why-panel.is-visible .home-why-panel__cta {
    animation: none !important;
  }
}

/* ==========================================================================
   Social media services (Figma 25590:14848)
   ========================================================================== */

.home-social-services {
  padding-block: clamp(72px, 6.25vw, 120px);
  background: var(--white);
}

.home-social-services__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.home-social-services__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 828px;
  text-align: center;
}

.home-social-services__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 600;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #071431;
  text-wrap: balance;
}

.home-social-services__description {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.125vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  color: #404a60;
}

.home-social-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}

.home-social-services__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  height: 100%;
  padding: 24px;
  border: 1px solid #ebecef;
  border-radius: 20px;
  background: #e8ecff;
}

.home-social-services__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.home-social-services__icon--pricing {
  width: 56px;
}

.home-social-services__card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.home-social-services__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #232323;
}

.home-social-services__card-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #40434b;
}

@media (min-width: 768px) {
  .home-social-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .home-social-services__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-social-services__card:nth-child(1) {
    grid-column: 1;
  }

  .home-social-services__card:nth-child(2) {
    grid-column: 2;
  }

  .home-social-services__card:nth-child(3) {
    grid-column: 4;
  }
}

.home-social-services--animate:not(.is-visible) .home-social-services__title,
.home-social-services--animate:not(.is-visible)
  .home-social-services__description {
  opacity: 0;
  transform: translateY(24px);
}

.home-social-services--animate:not(.is-visible) .home-social-services__card {
  opacity: 0;
  transform: translateY(28px);
}

.home-social-services.is-visible .home-social-services__title {
  animation: home-guide-reveal-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.1s;
}

.home-social-services.is-visible .home-social-services__description {
  animation: home-guide-reveal-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.22s;
}

.home-social-services.is-visible .home-social-services__card {
  animation: home-guide-reveal-up 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--social-services-delay, 0.36s);
}

@media (prefers-reduced-motion: reduce) {
  .home-social-services--animate:not(.is-visible) .home-social-services__title,
  .home-social-services--animate:not(.is-visible)
    .home-social-services__description,
  .home-social-services--animate:not(.is-visible) .home-social-services__card {
    opacity: 1;
    transform: none;
  }

  .home-social-services.is-visible .home-social-services__title,
  .home-social-services.is-visible .home-social-services__description,
  .home-social-services.is-visible .home-social-services__card {
    animation: none !important;
  }
}

/* ==========================================================================
   How it works (Figma 25773:16559) — clip-path active card follow hover
   ========================================================================== */

.home-how-it-works {
  padding-block: clamp(72px, 6.25vw, 120px);
  background-color: #dce4ff;
  background-image: linear-gradient(
    209.85deg,
    rgba(97, 126, 255, 0.5) 0%,
    rgba(103, 131, 255, 0.4) 16.147%,
    rgba(124, 148, 255, 0.125) 48.897%,
    rgba(97, 126, 255, 0.5) 96.817%
  );
}

.home-how-it-works__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(48px, 5vw, 80px);
}

.home-how-it-works__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 828px;
  text-align: center;
}

.home-how-it-works__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0.8px solid var(--brand);
  border-radius: 100px;
  background: var(--white);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
}

.home-how-it-works__badge-sparkle {
  font-size: 12px;
  line-height: 1;
  color: var(--brand);
}

.home-how-it-works__badge-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #2b2b22;
}

.home-how-it-works__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #000;
  text-wrap: balance;
  max-width: 726px;
}

.home-how-it-works__title-accent {
  color: var(--brand);
}

.home-how-it-works__description {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #343e56;
  max-width: 668px;
}

.home-how-it-works__board {
  --hiw-step: 0;
  --hiw-count: 4;
  --hiw-gap: 16px;
  --hiw-card-w: calc(
    (100% - (var(--hiw-count) - 1) * var(--hiw-gap)) / var(--hiw-count)
  );
  --hiw-x: calc(var(--hiw-step) * (var(--hiw-card-w) + var(--hiw-gap)));
  --hiw-card-h: 387px;
  --hiw-stage-h: 137px;
  --hiw-grid-cols: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
}

.home-how-it-works__board:has(.home-how-it-works__card:nth-child(2):hover),
.home-how-it-works__board:has(
  .home-how-it-works__card:nth-child(2):focus-within
) {
  --hiw-step: 1;
}

.home-how-it-works__board:has(.home-how-it-works__card:nth-child(3):hover),
.home-how-it-works__board:has(
  .home-how-it-works__card:nth-child(3):focus-within
) {
  --hiw-step: 2;
}

.home-how-it-works__board:has(.home-how-it-works__card:nth-child(4):hover),
.home-how-it-works__board:has(
  .home-how-it-works__card:nth-child(4):focus-within
) {
  --hiw-step: 3;
}

/* Figma 25773:16572 — stage 137px (line y=50, drops 87px, cards y=137) */
.home-how-it-works__stage {
  position: relative;
  height: var(--hiw-stage-h);
  margin-bottom: 0;
}

.home-how-it-works__timeline {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  height: 87px;
}

.home-how-it-works__timeline-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  object-fit: fill;
}

.home-how-it-works__timeline-drops {
  position: relative;
  width: 100%;
  height: 100%;
}

.home-how-it-works__timeline-drop {
  position: absolute;
  top: 0;
  width: 2px;
  height: 87px;
  border-radius: 1px;
  background: #fff;
  transform: translateX(-50%);
  transition: background-color 0.35s ease;
}

.home-how-it-works__timeline-drop:nth-child(1) {
  left: calc(var(--hiw-card-w) * 0.5);
}

.home-how-it-works__timeline-drop:nth-child(2) {
  left: calc(var(--hiw-card-w) + var(--hiw-gap) + var(--hiw-card-w) * 0.5);
}

.home-how-it-works__timeline-drop:nth-child(3) {
  left: calc(
    2 * (var(--hiw-card-w) + var(--hiw-gap)) + var(--hiw-card-w) * 0.5
  );
}

.home-how-it-works__timeline-drop:nth-child(4) {
  left: calc(
    3 * (var(--hiw-card-w) + var(--hiw-gap)) + var(--hiw-card-w) * 0.5
  );
}

.home-how-it-works__steps {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.home-how-it-works__step-pill {
  position: absolute;
  top: 50px;
  padding: 10px 24px;
  border: 1px solid #e5e5e5;
  border-radius: 100px;
  background: var(--white);
  backdrop-filter: blur(50px);
  transform: translate(-50%, -50%) rotate(-26.46deg);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: #0e0e0e;
  white-space: nowrap;
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}

.home-how-it-works__step-pill:nth-child(1) {
  left: calc(var(--hiw-card-w) * 0.5);
}

.home-how-it-works__step-pill:nth-child(2) {
  left: calc(var(--hiw-card-w) + var(--hiw-gap) + var(--hiw-card-w) * 0.5);
}

.home-how-it-works__step-pill:nth-child(3) {
  left: calc(
    2 * (var(--hiw-card-w) + var(--hiw-gap)) + var(--hiw-card-w) * 0.5
  );
}

.home-how-it-works__step-pill:nth-child(4) {
  left: calc(
    3 * (var(--hiw-card-w) + var(--hiw-gap)) + var(--hiw-card-w) * 0.5
  );
}

.home-how-it-works__board:not(:has(.home-how-it-works__card:hover)):not(
    :has(.home-how-it-works__card:focus-within)
  )
  .home-how-it-works__step-pill:nth-child(1),
.home-how-it-works__board:not(:has(.home-how-it-works__card:hover)):not(
    :has(.home-how-it-works__card:focus-within)
  )
  .home-how-it-works__timeline-drop:nth-child(1),
.home-how-it-works__board:has(.home-how-it-works__card:nth-child(1):hover)
  .home-how-it-works__step-pill:nth-child(1),
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(1):focus-within
  )
  .home-how-it-works__step-pill:nth-child(1),
.home-how-it-works__board:has(.home-how-it-works__card:nth-child(1):hover)
  .home-how-it-works__timeline-drop:nth-child(1),
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(1):focus-within
  )
  .home-how-it-works__timeline-drop:nth-child(1) {
  border-color: transparent;
  background: var(--brand);
  color: var(--white);
}

.home-how-it-works__board:has(.home-how-it-works__card:nth-child(2):hover)
  .home-how-it-works__step-pill:nth-child(2),
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(2):focus-within
  )
  .home-how-it-works__step-pill:nth-child(2),
.home-how-it-works__board:has(.home-how-it-works__card:nth-child(2):hover)
  .home-how-it-works__timeline-drop:nth-child(2),
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(2):focus-within
  )
  .home-how-it-works__timeline-drop:nth-child(2) {
  border-color: transparent;
  background: var(--brand);
  color: var(--white);
}

.home-how-it-works__board:has(.home-how-it-works__card:nth-child(3):hover)
  .home-how-it-works__step-pill:nth-child(3),
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(3):focus-within
  )
  .home-how-it-works__step-pill:nth-child(3),
.home-how-it-works__board:has(.home-how-it-works__card:nth-child(3):hover)
  .home-how-it-works__timeline-drop:nth-child(3),
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(3):focus-within
  )
  .home-how-it-works__timeline-drop:nth-child(3) {
  border-color: transparent;
  background: var(--brand);
  color: var(--white);
}

.home-how-it-works__board:has(.home-how-it-works__card:nth-child(4):hover)
  .home-how-it-works__step-pill:nth-child(4),
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(4):focus-within
  )
  .home-how-it-works__step-pill:nth-child(4),
.home-how-it-works__board:has(.home-how-it-works__card:nth-child(4):hover)
  .home-how-it-works__timeline-drop:nth-child(4),
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(4):focus-within
  )
  .home-how-it-works__timeline-drop:nth-child(4) {
  border-color: transparent;
  background: var(--brand);
  color: var(--white);
}

.home-how-it-works__cards-wrap {
  position: relative;
  margin-top: 0;
}

.home-how-it-works__cards,
.home-how-it-works__active-grid {
  display: grid;
  grid-template-columns: var(--hiw-grid-cols);
  gap: var(--hiw-gap);
  width: 100%;
}

.home-how-it-works__active-clip {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  clip-path: inset(
    0 calc(100% - var(--hiw-x) - var(--hiw-card-w)) 0 var(--hiw-x) round 20px
  );
  transition: clip-path 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: clip-path;
}

.home-how-it-works__active-card,
.home-how-it-works__card {
  position: relative;
  box-sizing: border-box;
  height: var(--hiw-card-h);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(50px);
}

.home-how-it-works__card {
  z-index: 1;
  border: 1px solid #dfe0e4;
  background: var(--white);
  cursor: pointer;
  outline: none;
  transition: border-color 0.3s ease;
}

.home-how-it-works__card:focus-visible {
  box-shadow: 0 0 0 3px rgba(55, 82, 178, 0.35);
}

.home-how-it-works__active-card {
  background-image: linear-gradient(180.137deg, #fff 0%, #4a6bff 107.78%);
  border: 1px solid rgba(211, 211, 211, 0);
}

/* Figma 25773:16574 — no visible inactive border under the active overlay */
.home-how-it-works__board:not(:has(.home-how-it-works__card:hover)):not(
    :has(.home-how-it-works__card:focus-within)
  )
  .home-how-it-works__card:nth-child(1),
.home-how-it-works__board:has(.home-how-it-works__card:nth-child(1):hover)
  .home-how-it-works__card:nth-child(1),
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(1):focus-within
  )
  .home-how-it-works__card:nth-child(1) {
  border-color: transparent;
}

.home-how-it-works__board:has(.home-how-it-works__card:nth-child(2):hover)
  .home-how-it-works__card:nth-child(2),
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(2):focus-within
  )
  .home-how-it-works__card:nth-child(2) {
  border-color: transparent;
}

.home-how-it-works__board:has(.home-how-it-works__card:nth-child(3):hover)
  .home-how-it-works__card:nth-child(3),
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(3):focus-within
  )
  .home-how-it-works__card:nth-child(3) {
  border-color: transparent;
}

.home-how-it-works__board:has(.home-how-it-works__card:nth-child(4):hover)
  .home-how-it-works__card:nth-child(4),
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(4):focus-within
  )
  .home-how-it-works__card:nth-child(4) {
  border-color: transparent;
}

.home-how-it-works__board:not(:has(.home-how-it-works__card:hover)):not(
    :has(.home-how-it-works__card:focus-within)
  )
  .home-how-it-works__card:nth-child(1)
  .home-how-it-works__wave-wrap,
.home-how-it-works__board:has(.home-how-it-works__card:nth-child(1):hover)
  .home-how-it-works__card:nth-child(1)
  .home-how-it-works__wave-wrap,
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(1):focus-within
  )
  .home-how-it-works__card:nth-child(1)
  .home-how-it-works__wave-wrap,
.home-how-it-works__board:has(.home-how-it-works__card:nth-child(2):hover)
  .home-how-it-works__card:nth-child(2)
  .home-how-it-works__wave-wrap,
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(2):focus-within
  )
  .home-how-it-works__card:nth-child(2)
  .home-how-it-works__wave-wrap,
.home-how-it-works__board:has(.home-how-it-works__card:nth-child(3):hover)
  .home-how-it-works__card:nth-child(3)
  .home-how-it-works__wave-wrap,
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(3):focus-within
  )
  .home-how-it-works__card:nth-child(3)
  .home-how-it-works__wave-wrap,
.home-how-it-works__board:has(.home-how-it-works__card:nth-child(4):hover)
  .home-how-it-works__card:nth-child(4)
  .home-how-it-works__wave-wrap,
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(4):focus-within
  )
  .home-how-it-works__card:nth-child(4)
  .home-how-it-works__wave-wrap {
  visibility: hidden;
}

/* Figma 25773:16578 — nested rotate/scale wrapper (647×284 @ left 50%, top -98) */
.home-how-it-works__wave-wrap {
  position: absolute;
  top: -98px;
  left: 50%;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 647px;
  height: 284px;
  pointer-events: none;
  transform: translateX(calc(-50% + 6.5px));
}

.home-how-it-works__wave-rotate {
  flex: none;
  transform: rotate(90deg) scaleY(-1);
  transform-origin: center center;
}

.home-how-it-works__wave-frame {
  position: relative;
  width: 284px;
  height: 647px;
}

.home-how-it-works__wave {
  position: absolute;
  inset: 13.49% 0 12.26% 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}

.home-how-it-works__card-icon {
  position: absolute;
  top: 39px;
  left: 50%;
  z-index: 1;
  width: 84px;
  height: 84px;
  transform: translateX(-50%);
  object-fit: contain;
}

.home-how-it-works__card-icon--active {
  display: none;
}

.home-how-it-works__card-icon--rest {
  display: block;
}

.home-how-it-works__board:not(:has(.home-how-it-works__card:hover)):not(
    :has(.home-how-it-works__card:focus-within)
  )
  .home-how-it-works__card:nth-child(1)
  .home-how-it-works__card-icon--active,
.home-how-it-works__board:has(.home-how-it-works__card:nth-child(1):hover)
  .home-how-it-works__card:nth-child(1)
  .home-how-it-works__card-icon--active,
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(1):focus-within
  )
  .home-how-it-works__card:nth-child(1)
  .home-how-it-works__card-icon--active {
  display: block;
}

.home-how-it-works__board:not(:has(.home-how-it-works__card:hover)):not(
    :has(.home-how-it-works__card:focus-within)
  )
  .home-how-it-works__card:nth-child(1)
  .home-how-it-works__card-icon--rest,
.home-how-it-works__board:has(.home-how-it-works__card:nth-child(1):hover)
  .home-how-it-works__card:nth-child(1)
  .home-how-it-works__card-icon--rest,
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(1):focus-within
  )
  .home-how-it-works__card:nth-child(1)
  .home-how-it-works__card-icon--rest {
  display: none;
}

/* Step 1 has no separate inactive asset — mute blue signup when inactive */
.home-how-it-works__card--step-1 .home-how-it-works__card-icon--rest {
  filter: grayscale(1) brightness(1.35) contrast(0.85);
  opacity: 0.85;
}

.home-how-it-works__board:has(.home-how-it-works__card:nth-child(2):hover)
  .home-how-it-works__card:nth-child(2)
  .home-how-it-works__card-icon--active,
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(2):focus-within
  )
  .home-how-it-works__card:nth-child(2)
  .home-how-it-works__card-icon--active {
  display: block;
}

.home-how-it-works__board:has(.home-how-it-works__card:nth-child(2):hover)
  .home-how-it-works__card:nth-child(2)
  .home-how-it-works__card-icon--rest,
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(2):focus-within
  )
  .home-how-it-works__card:nth-child(2)
  .home-how-it-works__card-icon--rest {
  display: none;
}

.home-how-it-works__board:has(.home-how-it-works__card:nth-child(3):hover)
  .home-how-it-works__card:nth-child(3)
  .home-how-it-works__card-icon--active,
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(3):focus-within
  )
  .home-how-it-works__card:nth-child(3)
  .home-how-it-works__card-icon--active {
  display: block;
}

.home-how-it-works__board:has(.home-how-it-works__card:nth-child(3):hover)
  .home-how-it-works__card:nth-child(3)
  .home-how-it-works__card-icon--rest,
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(3):focus-within
  )
  .home-how-it-works__card:nth-child(3)
  .home-how-it-works__card-icon--rest {
  display: none;
}

.home-how-it-works__board:has(.home-how-it-works__card:nth-child(4):hover)
  .home-how-it-works__card:nth-child(4)
  .home-how-it-works__card-icon--active,
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(4):focus-within
  )
  .home-how-it-works__card:nth-child(4)
  .home-how-it-works__card-icon--active {
  display: block;
}

.home-how-it-works__board:has(.home-how-it-works__card:nth-child(4):hover)
  .home-how-it-works__card:nth-child(4)
  .home-how-it-works__card-icon--rest,
.home-how-it-works__board:has(
    .home-how-it-works__card:nth-child(4):focus-within
  )
  .home-how-it-works__card:nth-child(4)
  .home-how-it-works__card-icon--rest {
  display: none;
}

.home-how-it-works__card-copy {
  position: absolute;
  top: 218px;
  left: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: min(240px, calc(100% - 48px));
  text-align: left;
  transform: translateX(-50%);
}

/* Figma: copy blocks nudged left of center (50% − offset) */
.home-how-it-works__card-copy--step-1 {
  left: calc(50% - 10px);
}

.home-how-it-works__card-copy--step-2 {
  left: calc(50% - 13px);
}

.home-how-it-works__card-copy--step-3 {
  left: calc(50% - 12px);
}

.home-how-it-works__card-copy--step-4 {
  left: calc(50% - 6px);
}

@media (min-width: 1320px) {
  .home-how-it-works__board {
    --hiw-card-w: 318px;
    --hiw-x: calc(var(--hiw-step) * (318px + 16px));
  }

  .home-how-it-works__active-clip {
    clip-path: inset(0 calc(100% - var(--hiw-x) - 318px) 0 var(--hiw-x));
  }

  .home-how-it-works__cards,
  .home-how-it-works__active-grid {
    grid-template-columns: repeat(4, 318px);
    gap: 16px;
    width: 1320px;
    max-width: 100%;
  }

  .home-how-it-works__timeline-line {
    width: 1320px;
    max-width: 100%;
  }

  /* Figma pill frame centers */
  .home-how-it-works__step-pill:nth-child(1) {
    left: 159px;
  }

  .home-how-it-works__step-pill:nth-child(2) {
    left: 491px;
  }

  .home-how-it-works__step-pill:nth-child(3) {
    left: 822px;
  }

  .home-how-it-works__step-pill:nth-child(4) {
    left: 1162px;
  }

  .home-how-it-works__timeline-drop:nth-child(1) {
    left: 159px;
  }

  .home-how-it-works__timeline-drop:nth-child(2) {
    left: 493px;
  }

  .home-how-it-works__timeline-drop:nth-child(3) {
    left: 827px;
  }

  .home-how-it-works__timeline-drop:nth-child(4) {
    left: 1161px;
  }
}

.home-how-it-works__card-title {
  margin: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #0e0e0e;
  text-align: left;
}

.home-how-it-works__card-text {
  margin: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 26.1px;
  letter-spacing: -0.01125em;
  color: #222e48;
  text-align: left;
}

.home-how-it-works__card-copy--active .home-how-it-works__card-text {
  line-height: 1.5;
  letter-spacing: 0;
}

.home-how-it-works__card-copy--active .home-how-it-works__card-title,
.home-how-it-works__card-copy--active .home-how-it-works__card-text {
  color: var(--white);
}

.home-how-it-works__active-card .home-how-it-works__card-icon {
  filter: none;
}

.home-how-it-works--animate:not(.is-visible) .home-how-it-works__header,
.home-how-it-works--animate:not(.is-visible) .home-how-it-works__board {
  opacity: 0;
  transform: translateY(28px);
}

.home-how-it-works.is-visible .home-how-it-works__header {
  animation: home-guide-reveal-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.12s;
}

.home-how-it-works.is-visible .home-how-it-works__board {
  animation: home-guide-reveal-up 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.28s;
}

@media (max-width: 1023px) {
  .home-how-it-works__board {
    --hiw-card-h: 360px;
    --hiw-y: calc(var(--hiw-step) * (var(--hiw-card-h) + var(--hiw-gap)));
    --hiw-x: 0;
    --hiw-card-w: 100%;
  }

  .home-how-it-works__stage {
    display: none;
  }

  .home-how-it-works__cards,
  .home-how-it-works__active-grid {
    grid-template-columns: 1fr;
  }

  .home-how-it-works__active-clip {
    clip-path: inset(
      var(--hiw-y) 0 calc(100% - var(--hiw-y) - var(--hiw-card-h)) 0
    );
  }
}

@media (max-width: 767px) {
  .home-how-it-works__board {
    --hiw-card-h: 340px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-how-it-works__active-clip {
    transition: none;
  }

  .home-how-it-works--animate:not(.is-visible) .home-how-it-works__header,
  .home-how-it-works--animate:not(.is-visible) .home-how-it-works__board {
    opacity: 1;
    transform: none;
  }

  .home-how-it-works.is-visible .home-how-it-works__header,
  .home-how-it-works.is-visible .home-how-it-works__board {
    animation: none !important;
  }
}

/* How it works — dome wave cards (index + platform panel pages) */
.home-how-it-works__board:has(.home-how-it-works__wave--dome) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-how-it-works__board:has(.home-how-it-works__wave--dome)
  .home-how-it-works__stage,
.home-how-it-works__board:has(.home-how-it-works__wave--dome)
  .home-how-it-works__cards-wrap {
  width: 100%;
  max-width: 1320px;
}

.home-how-it-works__board:has(.home-how-it-works__wave--dome)
  .home-how-it-works__wave-wrap {
  top: -20px;
  left: 50%;
  width: 318px;
  height: 187px;
  transform: translateX(-50%);
}

.home-how-it-works__wave--dome {
  position: relative;
  inset: auto;
  display: block;
  width: 318px;
  height: 187px;
  max-width: min(318px, 100%);
  object-fit: contain;
}

/* Figma 25773:16368 — white dome on active overlay; hide gray dome on matching base card */
.home-how-it-works__board:has(.home-how-it-works__wave--dome):not(
    :has(.home-how-it-works__card:hover)
  ):not(:has(.home-how-it-works__card:focus-within))
  .home-how-it-works__cards
  .home-how-it-works__card:nth-child(1)
  .home-how-it-works__wave-wrap,
.home-how-it-works__board:has(.home-how-it-works__wave--dome):has(
    .home-how-it-works__card:nth-child(1):hover
  )
  .home-how-it-works__cards
  .home-how-it-works__card:nth-child(1)
  .home-how-it-works__wave-wrap,
.home-how-it-works__board:has(.home-how-it-works__wave--dome):has(
    .home-how-it-works__card:nth-child(1):focus-within
  )
  .home-how-it-works__cards
  .home-how-it-works__card:nth-child(1)
  .home-how-it-works__wave-wrap {
  visibility: hidden;
}

.home-how-it-works__board:has(.home-how-it-works__wave--dome):has(
    .home-how-it-works__card:nth-child(2):hover
  )
  .home-how-it-works__cards
  .home-how-it-works__card:nth-child(2)
  .home-how-it-works__wave-wrap,
.home-how-it-works__board:has(.home-how-it-works__wave--dome):has(
    .home-how-it-works__card:nth-child(2):focus-within
  )
  .home-how-it-works__cards
  .home-how-it-works__card:nth-child(2)
  .home-how-it-works__wave-wrap {
  visibility: hidden;
}

.home-how-it-works__board:has(.home-how-it-works__wave--dome):has(
    .home-how-it-works__card:nth-child(3):hover
  )
  .home-how-it-works__cards
  .home-how-it-works__card:nth-child(3)
  .home-how-it-works__wave-wrap,
.home-how-it-works__board:has(.home-how-it-works__wave--dome):has(
    .home-how-it-works__card:nth-child(3):focus-within
  )
  .home-how-it-works__cards
  .home-how-it-works__card:nth-child(3)
  .home-how-it-works__wave-wrap {
  visibility: hidden;
}

.home-how-it-works__board:has(.home-how-it-works__wave--dome):has(
    .home-how-it-works__card:nth-child(4):hover
  )
  .home-how-it-works__cards
  .home-how-it-works__card:nth-child(4)
  .home-how-it-works__wave-wrap,
.home-how-it-works__board:has(.home-how-it-works__wave--dome):has(
    .home-how-it-works__card:nth-child(4):focus-within
  )
  .home-how-it-works__cards
  .home-how-it-works__card:nth-child(4)
  .home-how-it-works__wave-wrap {
  visibility: hidden;
}

.home-how-it-works__active-card .home-how-it-works__wave-wrap {
  visibility: visible;
}

/* Dome variant — responsive grid (1 col / 2 col sm / 4 col lg, HQ Promo spacing) */
@media (max-width: 639px) {
  .home-how-it-works__board:has(.home-how-it-works__wave--dome) {
    --hiw-card-h: 360px;
    --hiw-row-gap: 24px;
    --hiw-col-gap: 24px;
    --hiw-y: calc(var(--hiw-step) * (var(--hiw-card-h) + var(--hiw-row-gap)));
    --hiw-x: 0;
    --hiw-card-w: 100%;
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__stage {
    display: none;
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__cards-wrap {
    margin-top: 0;
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__cards,
  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__active-grid {
    grid-template-columns: 1fr;
    column-gap: var(--hiw-col-gap);
    row-gap: var(--hiw-row-gap);
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__active-clip {
    clip-path: inset(
      var(--hiw-y) 0 calc(100% - var(--hiw-y) - var(--hiw-card-h)) 0 round 20px
    );
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .home-how-it-works__board:has(.home-how-it-works__wave--dome) {
    --hiw-card-h: 360px;
    --hiw-row-gap: 24px;
    --hiw-col-gap: 24px;
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__stage {
    display: none;
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__cards-wrap {
    margin-top: 0;
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__cards,
  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__active-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--hiw-col-gap);
    row-gap: var(--hiw-row-gap);
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome):not(
      :has(.home-how-it-works__card:hover)
    ):not(:has(.home-how-it-works__card:focus-within))
    .home-how-it-works__active-clip,
  .home-how-it-works__board:has(.home-how-it-works__wave--dome):has(
      .home-how-it-works__card:nth-child(1):hover
    )
    .home-how-it-works__active-clip,
  .home-how-it-works__board:has(.home-how-it-works__wave--dome):has(
      .home-how-it-works__card:nth-child(1):focus-within
    )
    .home-how-it-works__active-clip {
    clip-path: inset(
      0 calc(50% + (var(--hiw-col-gap) / 2))
        calc(var(--hiw-card-h) + var(--hiw-row-gap)) 0 round 20px
    );
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome):has(
      .home-how-it-works__card:nth-child(2):hover
    )
    .home-how-it-works__active-clip,
  .home-how-it-works__board:has(.home-how-it-works__wave--dome):has(
      .home-how-it-works__card:nth-child(2):focus-within
    )
    .home-how-it-works__active-clip {
    clip-path: inset(
      0 0 calc(var(--hiw-card-h) + var(--hiw-row-gap))
        calc(50% + (var(--hiw-col-gap) / 2)) round 20px
    );
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome):has(
      .home-how-it-works__card:nth-child(3):hover
    )
    .home-how-it-works__active-clip,
  .home-how-it-works__board:has(.home-how-it-works__wave--dome):has(
      .home-how-it-works__card:nth-child(3):focus-within
    )
    .home-how-it-works__active-clip {
    clip-path: inset(
      calc(var(--hiw-card-h) + var(--hiw-row-gap))
        calc(50% + (var(--hiw-col-gap) / 2)) 0 0 round 20px
    );
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome):has(
      .home-how-it-works__card:nth-child(4):hover
    )
    .home-how-it-works__active-clip,
  .home-how-it-works__board:has(.home-how-it-works__wave--dome):has(
      .home-how-it-works__card:nth-child(4):focus-within
    )
    .home-how-it-works__active-clip {
    clip-path: inset(
      calc(var(--hiw-card-h) + var(--hiw-row-gap)) 0 0
        calc(50% + (var(--hiw-col-gap) / 2)) round 20px
    );
  }
}

@media (min-width: 1024px) {
  .home-how-it-works__board:has(.home-how-it-works__wave--dome) {
    --hiw-gap: 32px;
    --hiw-grid-cols: repeat(4, minmax(0, 1fr));
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__stage {
    display: block;
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__cards-wrap {
    margin-top: 0;
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__cards,
  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__active-grid {
    grid-template-columns: var(--hiw-grid-cols);
    gap: var(--hiw-gap);
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__active-clip {
    clip-path: inset(
      0 calc(100% - var(--hiw-x) - var(--hiw-card-w)) 0 var(--hiw-x) round 20px
    );
  }
}

@media (min-width: 1024px) and (max-width: 1319px) {
  .home-how-it-works__board:has(.home-how-it-works__wave--dome) {
    --hiw-card-w: calc((100% - 3 * var(--hiw-gap)) / 4);
    --hiw-x: calc(var(--hiw-step) * (var(--hiw-card-w) + var(--hiw-gap)));
  }
}

@media (max-width: 767px) {
  .home-how-it-works__board:has(.home-how-it-works__wave--dome) {
    --hiw-card-h: 340px;
  }
}

@media (min-width: 1320px) {
  .home-how-it-works__board:has(.home-how-it-works__wave--dome) {
    --hiw-gap: 32px;
    --hiw-card-w: calc((1320px - 3 * var(--hiw-gap)) / 4);
    --hiw-x: calc(var(--hiw-step) * (var(--hiw-card-w) + var(--hiw-gap)));
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__active-clip {
    clip-path: inset(
      0 calc(100% - var(--hiw-x) - var(--hiw-card-w)) 0 var(--hiw-x) round 20px
    );
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__cards,
  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__active-grid {
    grid-template-columns: repeat(4, var(--hiw-card-w));
    gap: var(--hiw-gap);
    width: 1320px;
    max-width: 100%;
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__timeline-line {
    width: 1320px;
    max-width: 100%;
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__step-pill:nth-child(1),
  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__timeline-drop:nth-child(1) {
    left: calc(var(--hiw-card-w) * 0.5);
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__step-pill:nth-child(2),
  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__timeline-drop:nth-child(2) {
    left: calc(var(--hiw-card-w) + var(--hiw-gap) + var(--hiw-card-w) * 0.5);
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__step-pill:nth-child(3),
  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__timeline-drop:nth-child(3) {
    left: calc(
      2 * (var(--hiw-card-w) + var(--hiw-gap)) + var(--hiw-card-w) * 0.5
    );
  }

  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__step-pill:nth-child(4),
  .home-how-it-works__board:has(.home-how-it-works__wave--dome)
    .home-how-it-works__timeline-drop:nth-child(4) {
    left: calc(
      3 * (var(--hiw-card-w) + var(--hiw-gap)) + var(--hiw-card-w) * 0.5
    );
  }
}

/* Platform panel pages — hero alignment + #about Why Choose background */
body.smmrx-platform-panel-page #about.home-about > .home-about__bg {
  background: none;
  background-image: none;
  opacity: 1;
}

body.smmrx-platform-panel-page
  #about.home-about
  > .home-about__bg
  .about-why-choose__bg-base,
body.smmrx-platform-panel-page
  #about.home-about
  > .home-about__bg
  .about-why-choose__bg-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body.smmrx-platform-panel-page
  #about.home-about
  > .home-about__bg
  .about-why-choose__bg-base {
  background: var(--white);
}

body.smmrx-platform-panel-page
  #about.home-about
  > .home-about__bg
  .about-why-choose__bg-pattern {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

/* ==========================================================================
   Why choose SMMRX (Figma 25746:39402) — same pattern as select-services
   ========================================================================== */

.home-why-choose {
  position: relative;
  padding-block: clamp(72px, 6.25vw, 120px);
  background: var(--white);
  overflow: hidden;
}

.home-why-choose__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--white);
  background-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 0.08) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
  opacity: 0.45;
}

.home-why-choose__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.home-why-choose__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 822px;
  text-align: center;
}

.home-why-choose__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0.8px solid var(--brand);
  border-radius: 100px;
  background: var(--white);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
}

.home-why-choose__badge-sparkle {
  font-size: 14px;
  line-height: 1;
  color: var(--brand);
}

.home-why-choose__badge-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #2b2b22;
}

.home-why-choose__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #000;
  text-wrap: balance;
}

.home-why-choose__description {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #40434b;
}

.home-why-choose__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}

.home-why-choose__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  height: 100%;
  padding: 24px;
  border: 1px solid #e2e2e2;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.home-why-choose__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.home-why-choose__icon--wide {
  width: 96px;
  height: 64px;
}

.home-why-choose__card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.home-why-choose__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #0e0e0e;
}

.home-why-choose__card-title--lead {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  color: #232323;
}

.home-why-choose__card-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #40434b;
}

@media (min-width: 768px) {
  .home-why-choose__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .home-why-choose__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.home-why-choose--animate:not(.is-visible) .home-why-choose__badge,
.home-why-choose--animate:not(.is-visible) .home-why-choose__title,
.home-why-choose--animate:not(.is-visible) .home-why-choose__description {
  opacity: 0;
  transform: translateY(24px);
}

.home-why-choose--animate:not(.is-visible) .home-why-choose__card {
  opacity: 0;
  transform: translateY(28px);
}

.home-why-choose.is-visible .home-why-choose__badge {
  animation: home-guide-reveal-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.1s;
}

.home-why-choose.is-visible .home-why-choose__title {
  animation: home-guide-reveal-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.24s;
}

.home-why-choose.is-visible .home-why-choose__description {
  animation: home-guide-reveal-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.38s;
}

.home-why-choose.is-visible .home-why-choose__card {
  animation: home-guide-reveal-up 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--why-choose-delay, 0.48s);
}

@media (prefers-reduced-motion: reduce) {
  .home-why-choose--animate:not(.is-visible) .home-why-choose__badge,
  .home-why-choose--animate:not(.is-visible) .home-why-choose__title,
  .home-why-choose--animate:not(.is-visible) .home-why-choose__description,
  .home-why-choose--animate:not(.is-visible) .home-why-choose__card {
    opacity: 1;
    transform: none;
  }

  .home-why-choose.is-visible .home-why-choose__badge,
  .home-why-choose.is-visible .home-why-choose__title,
  .home-why-choose.is-visible .home-why-choose__description,
  .home-why-choose.is-visible .home-why-choose__card {
    animation: none !important;
  }
}

/* ==========================================================================
   Payment logos row (Figma 25746:39305)
   ========================================================================== */

.home-payments {
  position: relative;
  padding-block: clamp(72px, 6.25vw, 120px);
  background: var(--white);
  overflow-x: clip;
  overflow-y: visible;
}

.home-payments__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 4vw, 56px);
}

.home-payments__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 1282px;
  text-align: center;
}

.home-payments__title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 961px;
}

.home-payments__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0.8px solid var(--brand);
  border-radius: 100px;
  background: var(--white);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
}

.home-payments__badge-sparkle {
  font-size: 14px;
  line-height: 1;
  color: var(--brand);
}

.home-payments__badge-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #2b2b22;
}

.home-payments__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #0e0e0e;
  text-wrap: balance;
}

.home-payments__title-accent {
  display: block;
  color: var(--brand);
}

@media (min-width: 640px) {
  .home-payments__title-accent {
    display: inline;
  }
}

.home-payments__description {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.125vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  color: #404a60;
  text-wrap: pretty;
}

.home-payments__diagram {
  position: relative;
  width: 100%;
  max-width: 1320px;
  overflow-x: clip;
  overflow-y: visible;
}

.home-payments__diagram-canvas {
  width: 100%;
  box-sizing: border-box;
  padding-block: 20px;
  overflow-x: clip;
  overflow-y: visible;
}

.home-payments__diagram-scaler {
  position: relative;
  left: 50%;
  width: 1260px;
  transform: translateX(-50%);
  transform-origin: center center;
  will-change: transform;
}

.home-payments__bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transform-origin: 50% 50%;
}

.home-payments__bubble .home-payments__logo {
  transform-origin: 50% 50%;
}

.home-payments__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-payments__item {
  flex-shrink: 0;
}

.home-payments__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  object-fit: contain;
}

.home-payments__logo--sm {
  width: 100px;
  height: 100px;
}

.home-payments__logo--center {
  width: 140px;
  height: 140px;
}

@media (max-width: 639px) {
  .home-payments__diagram-canvas {
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }

  .home-payments__diagram-scaler {
    left: 0;
    transform: none;
    width: max-content;
    min-width: 100%;
    padding-inline: 10px;
  }

  .home-payments__row {
    justify-content: center;
    width: max-content;
  }

  .home-payments__item {
    scroll-snap-align: center;
  }
}

.home-payments--animate:not(.is-visible) .home-payments__badge,
.home-payments--animate:not(.is-visible) .home-payments__title,
.home-payments--animate:not(.is-visible) .home-payments__description {
  opacity: 0;
  transform: translateY(24px);
}

.home-payments--animate:not(.is-visible)
  .home-payments__item--center
  .home-payments__bubble {
  opacity: 0;
  transform: scale(0.35);
}

.home-payments--animate:not(.is-visible)
  .home-payments__item--center
  .home-payments__logo {
  opacity: 1;
  transform: none;
}

.home-payments--animate:not(.is-visible)
  .home-payments__item--left
  .home-payments__logo {
  opacity: 0;
  transform: translateX(88px);
}

.home-payments--animate:not(.is-visible)
  .home-payments__item--right
  .home-payments__logo {
  opacity: 0;
  transform: translateX(-88px);
}

@keyframes home-payments-center-pop {
  0% {
    opacity: 0;
    transform: scale(0.35);
  }

  65% {
    opacity: 1;
    transform: scale(1.05);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes home-payments-slide-from-right {
  from {
    opacity: 0;
    transform: translateX(88px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes home-payments-slide-from-left {
  from {
    opacity: 0;
    transform: translateX(-88px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.home-payments.is-visible .home-payments__badge {
  animation: home-guide-reveal-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.1s;
}

.home-payments.is-visible .home-payments__title {
  animation: home-guide-reveal-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.22s;
}

.home-payments.is-visible .home-payments__description {
  animation: home-guide-reveal-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.36s;
}

.home-payments.is-visible .home-payments__item--center .home-payments__bubble {
  animation: home-payments-center-pop 0.72s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  animation-delay: var(--payments-logo-delay, 0.48s);
}

.home-payments.is-visible .home-payments__item--center .home-payments__logo {
  animation: none;
}

.home-payments.is-visible .home-payments__item--left .home-payments__logo {
  animation: home-payments-slide-from-right 0.75s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  animation-delay: var(--payments-logo-delay, 1s);
}

.home-payments.is-visible .home-payments__item--right .home-payments__logo {
  animation: home-payments-slide-from-left 0.75s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
  animation-delay: var(--payments-logo-delay, 1s);
}

@keyframes home-payments-float-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  35% {
    transform: translate3d(0, -10px, 0);
  }

  70% {
    transform: translate3d(0, 7px, 0);
  }
}

@keyframes home-payments-float-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  40% {
    transform: translate3d(0, 8px, 0);
  }

  75% {
    transform: translate3d(0, -9px, 0);
  }
}

@keyframes home-payments-float-c {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  45% {
    transform: translate3d(0, -8px, 0);
  }

  80% {
    transform: translate3d(0, 5px, 0);
  }
}

@keyframes home-payments-float-center {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -6px, 0);
  }
}

.home-payments.is-ambient .payment-icon.home-payments__bubble--l1 {
  animation: home-payments-float-a 4.15s ease-in-out infinite;
  animation-delay: 0s;
}

.home-payments.is-ambient .payment-icon.home-payments__bubble--l2 {
  animation: home-payments-float-b 3.95s ease-in-out infinite;
  animation-delay: 0.18s;
}

.home-payments.is-ambient .payment-icon.home-payments__bubble--l3 {
  animation: home-payments-float-c 4.35s ease-in-out infinite;
  animation-delay: 0.32s;
}

.home-payments.is-ambient .payment-icon.home-payments__bubble--l4 {
  animation: home-payments-float-a 3.85s ease-in-out infinite;
  animation-delay: 0.44s;
}

.home-payments.is-ambient .payment-icon.home-payments__bubble--center {
  animation: home-payments-float-center 3.6s ease-in-out infinite;
  animation-delay: 0.1s;
}

.home-payments.is-ambient .payment-icon.home-payments__bubble--r1 {
  animation: home-payments-float-b 4.05s ease-in-out infinite;
  animation-delay: 0.22s;
}

.home-payments.is-ambient .payment-icon.home-payments__bubble--r2 {
  animation: home-payments-float-c 3.9s ease-in-out infinite;
  animation-delay: 0.36s;
}

.home-payments.is-ambient .payment-icon.home-payments__bubble--r3 {
  animation: home-payments-float-a 4.25s ease-in-out infinite;
  animation-delay: 0.48s;
}

.home-payments.is-ambient .payment-icon.home-payments__bubble--r4 {
  animation: home-payments-float-b 3.75s ease-in-out infinite;
  animation-delay: 0.58s;
}

@media (prefers-reduced-motion: reduce) {
  .home-payments--animate:not(.is-visible) .home-payments__badge,
  .home-payments--animate:not(.is-visible) .home-payments__title,
  .home-payments--animate:not(.is-visible) .home-payments__description,
  .home-payments--animate:not(.is-visible)
    .home-payments__item--center
    .home-payments__bubble,
  .home-payments--animate:not(.is-visible)
    .home-payments__item--left
    .home-payments__logo,
  .home-payments--animate:not(.is-visible)
    .home-payments__item--right
    .home-payments__logo {
    opacity: 1;
    transform: none;
  }

  .home-payments.is-visible .home-payments__badge,
  .home-payments.is-visible .home-payments__title,
  .home-payments.is-visible .home-payments__description,
  .home-payments.is-visible .home-payments__item--center .home-payments__bubble,
  .home-payments.is-visible .home-payments__item--left .home-payments__logo,
  .home-payments.is-visible .home-payments__item--right .home-payments__logo {
    animation: none !important;
  }

  .home-payments.is-ambient .payment-icon {
    animation: none !important;
  }
}

/* ==========================================================================
   Testimonials carousel (Figma 25944:2564) — Swiper
   ========================================================================== */

.home-testimonials {
  position: relative;
  padding-block: clamp(72px, 6.25vw, 120px);
  background: var(--white);
  overflow-x: clip;
}

.home-testimonials__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 4vw, 48px);
  margin-bottom: clamp(32px, 4vw, 48px);
}

.home-testimonials__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 1107px;
  text-align: center;
}

.home-testimonials__title {
  margin: 0;
  width: 100%;
  max-width: 636px;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.36px;
  color: #071431;
  text-wrap: balance;
}

.home-testimonials__title-accent {
  display: inline;
  background: linear-gradient(
    130.23deg,
    #0094e9 2.53%,
    #32b4ff 61.03%,
    rgba(7, 149, 231, 0.87) 91.98%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home-testimonials__description {
  margin: 0;
  width: 100%;
  max-width: 1107px;
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.125vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  color: #404a60;
  text-wrap: pretty;
}

.home-testimonials__viewport {
  width: 100%;
  overflow: hidden;
}

.home-testimonials__marquee {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 24px,
    #000 calc(100% - 24px),
    transparent
  );
}

.home-testimonials__marquee-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  gap: 24px;
  animation: home-testimonials-marquee 55s linear infinite;
  will-change: transform;
}

.home-testimonials__marquee:hover .home-testimonials__marquee-track {
  animation-play-state: paused;
}

@keyframes home-testimonials-marquee {
  from {
    transform: translateX(0);
  }

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

.home-testimonials__slide {
  width: 455px;
  max-width: calc(100vw - 32px);
  flex-shrink: 0;
  box-sizing: border-box;
}

@media (max-width: 519px) {
  .home-testimonials__marquee-track {
    gap: 16px;
  }

  .home-testimonials__slide {
    width: calc(100vw - 32px);
    max-width: 455px;
  }
}

.home-testimonials__card {
  width: 100%;
  max-width: 455px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 12px;
  border-radius: 20px;
  background: #f1f2f1;
  box-sizing: border-box;
}

.home-testimonials__quote-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  border-radius: 19px;
  background: var(--white);
}

.home-testimonials__quote-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  width: 100%;
  max-width: 348px;
}

.home-testimonials__quote-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
}

.home-testimonials__quote {
  margin: 0;
  width: 100%;
}

.home-testimonials__quote p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  color: rgba(0, 0, 0, 0.8);
}

.home-testimonials__author-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 116px;
  padding: 27px 24px;
  border-radius: 19px;
  background: var(--white);
  box-sizing: border-box;
}

.home-testimonials__author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-testimonials__avatar {
  flex-shrink: 0;
  width: 65px;
  height: 62px;
  border-radius: 12px;
  object-fit: cover;
  background: #f4f4f4;
}

.home-testimonials__author-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.home-testimonials__author-name {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: #222e48;
}

.home-testimonials__stars {
  display: flex;
  align-items: center;
}

.home-testimonials__stars-img {
  display: block;
  width: 88px;
  height: 16px;
  max-width: none;
}

.home-testimonials--animate:not(.is-visible) .home-testimonials__header,
.home-testimonials--animate:not(.is-visible) .home-testimonials__viewport {
  opacity: 0;
  transform: translateY(24px);
}

.home-testimonials.is-visible .home-testimonials__header {
  animation: home-guide-reveal-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.1s;
}

.home-testimonials.is-visible .home-testimonials__viewport {
  animation: home-guide-reveal-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.28s;
}

/* ==========================================================================
   FAQ header (Figma 25590:15218) + section bg (25752:40318)
   ========================================================================== */

.home-faq {
  position: relative;
  padding-block: 80px;
  overflow-x: clip;
}

.home-faq__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    214.18534037403714deg,
    rgb(169, 182, 255) 15.026%,
    rgba(77, 116, 255, 0.13) 44.503%,
    rgb(217, 225, 255) 81.778%,
    rgb(187, 202, 255) 91.802%
  );
}

.home-faq__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.home-faq__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 961px;
  text-align: center;
}

.home-faq__title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.home-faq__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0.8px solid var(--brand);
  border-radius: 100px;
  background: var(--white);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
}

.home-faq__badge-icon {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.home-faq__badge-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #2b2b22;
}

.home-faq__title {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.36px;
  color: #071431;
  text-wrap: balance;
}

.home-faq__title-accent {
  color: var(--brand);
}

.home-faq__description {
  margin: 0;
  width: 100%;
  max-width: 824px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #404a60;
  text-wrap: pretty;
}

@media (max-width: 767px) {
  .home-faq {
    padding-block: clamp(56px, 12vw, 80px);
  }

  .home-faq__inner {
    gap: 32px;
  }

  .home-faq__header {
    gap: 14px;
  }

  .home-faq__title-block {
    gap: 12px;
  }

  .home-faq__title {
    font-size: clamp(24px, 6.5vw, 28px);
    letter-spacing: 0.28px;
  }

  .home-faq__description {
    font-size: 14px;
  }
}

.home-faq__accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 1440px;
}

.home-faq__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  flex: 1;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

@media (min-width: 1024px) {
  .home-faq__accordion {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }

  .home-faq__col {
    flex: 1 1 0;
    max-width: 708px;
  }
}

.home-faq__item {
  position: relative;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
}

.home-faq__item-heading {
  margin: 0;
}

.home-faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 25px 30px;
  border: 1px solid #dfe0e4;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08);
  color: #232323;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    border-radius 0.25s ease,
    box-shadow 0.25s ease;
}

.home-faq__item[data-open] .home-faq__trigger {
  border-color: transparent;
  border-radius: 16px 16px 0 0;
  background: var(--brand);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08);
  color: var(--white);
}

.home-faq__trigger:hover {
  color: #232323;
}

.home-faq__item[data-open] .home-faq__trigger:hover {
  color: var(--white);
}

.home-faq__trigger:focus-visible {
  outline: 2px solid rgba(55, 82, 178, 0.45);
  outline-offset: 2px;
}

.home-faq__question {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

.home-faq__toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.home-faq__chevron {
  display: block;
  width: 24px;
  height: 24px;
}

.home-faq__chevron--open {
  display: none;
  transform: scaleY(-1);
}

.home-faq__item[data-open] .home-faq__chevron--closed {
  display: none;
}

.home-faq__item[data-open] .home-faq__chevron--open {
  display: block;
}

.home-faq__content {
  overflow: hidden;
  height: 0;
  transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-faq__content-inner {
  padding: 25px 30px;
  border-radius: 0 0 16px 16px;
  background: var(--white);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08);
}

.home-faq__content-inner p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #343e56;
}

@media (max-width: 767px) {
  .home-faq__trigger {
    gap: 8px;
    padding: 14px 16px;
  }

  .home-faq__question {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
  }

  .home-faq__content-inner {
    padding: 14px 16px 16px;
  }

  .home-faq__content-inner p {
    font-size: 13px;
    line-height: 1.45;
  }
}

.home-faq--animate:not(.is-visible) .home-faq__header,
.home-faq--animate:not(.is-visible) .home-faq__accordion {
  opacity: 0;
  transform: translateY(24px);
}

.home-faq.is-visible .home-faq__header {
  animation: home-guide-reveal-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.1s;
}

.home-faq.is-visible .home-faq__accordion {
  animation: home-guide-reveal-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.26s;
}

/* ==========================================================================
   Brand CTA (Figma 25590:15333 / 25773:16684)
   ========================================================================== */

.home-brand-cta {
  position: relative;
  box-sizing: border-box;
  padding-block: clamp(72px, 6.25vw, 120px);
  background: #ffffff;
  overflow: visible;
}

.home-brand-cta__inner {
  max-width: 1280px;
}

.home-brand-cta__card {
  position: relative;
  width: 100%;
  min-height: 320px;
  border-radius: 36.571px;
  background-color: #ffffff;
  background-image: linear-gradient(
    106deg,
    rgba(35, 83, 255, 0.7) -54.93%,
    rgba(85, 122, 255, 0.7) 1.63%,
    rgba(141, 166, 255, 0.7) 50.12%,
    rgba(118, 148, 255, 0.7) 76.18%,
    rgba(60, 101, 245, 0.7) 151.24%
  );
  box-shadow: 0 16px 30px -10.971px rgba(173, 175, 238, 0.6);
  overflow: visible;
}

.home-brand-cta__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  box-sizing: border-box;
  width: 100%;
  max-width: 827px;
  padding: 40px 24px 48px;
}

.home-brand-cta__copy {
  display: flex;
  flex-direction: column;
  gap: 14.629px;
  width: 100%;
  max-width: 827px;
  color: #ffffff;
}

.home-brand-cta__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.36px;
  color: #ffffff;
  text-wrap: balance;
}

.home-brand-cta__description {
  margin: 0;
  max-width: 721px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
}

.home-brand-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14.629px;
}

.home-brand-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10.971px;
  min-height: 50px;
  padding: 5px 21.943px;
  border-radius: 12px;
  border: 1.371px solid transparent;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  text-decoration: none;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
}

.home-brand-cta__btn:active {
  transform: translateY(1px);
}

.home-brand-cta__btn--primary {
  background: var(--brand);
  color: var(--white);
}

.home-brand-cta__btn--secondary {
  position: relative;
  border-color: var(--brand);
  color: var(--brand);
  background: var(--white);
  padding-inline: 29.257px;
  box-shadow: inset 0 0 7.314px rgba(255, 255, 255, 0.5);
}

.home-brand-cta__btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 21.943px;
  height: 21.943px;
  padding: 3.657px;
  border-radius: 91.429px;
  box-sizing: border-box;
}

.home-brand-cta__btn-icon--on-white {
  background: var(--white);
}

.home-brand-cta__btn-icon--on-brand {
  background: var(--brand);
}

.home-brand-cta__btn-icon img {
  display: block;
  width: 10.971px;
  height: 10.971px;
}

.home-brand-cta__character {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  top: -99.945px;
  left: 66.484375%; /* Figma 851px @ 1280px card */
  width: 24.296875%; /* Figma 311px @ 1280px card */
  max-width: 311px;
  aspect-ratio: 311 / 514;
  height: auto;
}

.home-brand-cta__character-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.home-brand-cta__character-img {
  position: absolute;
  display: block;
  width: 116.1%;
  height: 105.4%;
  max-width: none;
  left: -10.32%;
  top: -2.68%;
  object-fit: cover;
  object-position: center top;
}

@media (min-width: 768px) {
  .home-brand-cta__card {
    min-height: 414.171px;
  }
}

@media (min-width: 1280px) {
  .home-brand-cta__card {
    height: 414.171px;
    min-height: 414.171px;
  }

  .home-brand-cta__content {
    position: absolute;
    left: 70px;
    top: 59.789px;
    width: 827px;
    max-width: calc(100% - 140px);
    padding: 0;
    gap: 48px;
  }

  /* Figma 25773:16715 — image 3057 */
  .home-brand-cta__character {
    left: 851px;
    top: -99.945px;
    width: 311px;
    height: 514px;
    max-width: none;
    aspect-ratio: auto;
  }
}

@media (max-width: 767px) {
  .home-brand-cta {
    padding-block: clamp(48px, 10vw, 72px);
  }

  .home-brand-cta__card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    border-radius: 24px;
    overflow: hidden;
  }

  .home-brand-cta__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    padding: 22px 18px 12px;
    gap: 18px;
  }

  .home-brand-cta__copy {
    gap: 10px;
  }

  .home-brand-cta__title {
    font-size: 22px;
    letter-spacing: 0.22px;
    line-height: 1.3;
  }

  .home-brand-cta__description {
    font-size: 12px;
    line-height: 1.45;
  }

  .home-brand-cta__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
  }

  .home-brand-cta__btn {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
    padding-inline: 16px;
    white-space: normal;
    text-align: center;
  }

  .home-brand-cta__character {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
    flex-shrink: 0;
    align-self: center;
    width: min(152px, 38vw);
    max-width: 152px;
    height: auto;
    aspect-ratio: 311 / 514;
    margin: 0 auto -12px;
    z-index: 1;
  }

  .home-brand-cta__character-frame {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 311 / 514;
  }

  .home-brand-cta__character-img {
    width: 116.1%;
    height: 105.4%;
    left: -10.32%;
    top: -2.68%;
    object-fit: cover;
    object-position: center top;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .home-brand-cta__content {
    padding-right: 34%;
  }

  .home-brand-cta__character {
    z-index: 1;
  }
}

.home-brand-cta--animate:not(.is-visible) .home-brand-cta__card {
  opacity: 0;
  transform: translateY(24px);
}

.home-brand-cta.is-visible .home-brand-cta__card {
  animation: home-guide-reveal-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.12s;
}

/* ==========================================================================
   Site footer (Figma 25824:16046)
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-footer {
  box-sizing: border-box;
  width: 100%;
  padding: 0 clamp(10px, 2.08vw, 40px) clamp(24px, 2.5vw, 40px);
  background: #ffffff;
}

.site-footer__card {
  box-sizing: border-box;
  width: 100%;
  max-width: 1840px;
  margin-inline: auto;
  padding: 61.73px clamp(24px, calc((100% - 1440px) / 2), 200px) 46.298px;
  border: 0.289px solid rgba(84, 141, 254, 0.44);
  border-radius: 46.298px;
  background: #171717;
  overflow: hidden;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}

.site-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px 37.54px;
}

.site-footer__heading {
  margin: 0;
  max-width: 522px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
}

.site-footer__promo {
  display: flex;
  flex-direction: column;
  gap: 27.007px;
  width: 100%;
  max-width: 577.759px;
  flex-shrink: 0;
}

.site-footer__promo-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--white);
}

.site-footer__subscribe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 3.858px 3.858px 3.858px 23.149px;
  border: none;
  border-radius: 96.454px;
  background: var(--white);
  backdrop-filter: blur(24.113px);
  -webkit-backdrop-filter: blur(24.113px);
}

.site-footer__subscribe-field {
  display: flex;
  align-items: center;
  gap: 11.574px;
  flex: 1;
  min-width: 0;
}

.site-footer__subscribe-icon {
  display: block;
  flex-shrink: 0;
  width: 23.149px;
  height: 23.149px;
}

.site-footer__subscribe-input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 15.433px;
  font-weight: 400;
  line-height: 1.5;
  color: #40434b;
}

.site-footer__subscribe-input::placeholder {
  color: #40434b;
  opacity: 1;
}

.site-footer__subscribe-input:focus {
  outline: none;
}

.site-footer__subscribe-btn {
  flex-shrink: 0;
  margin: 0;
  padding: 7.716px 17.362px;
  min-height: 46.298px;
  border: none;
  border-radius: 482.27px;
  background: var(--brand);
  font-family: var(--font-sans);
  font-size: 15.433px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--white);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.site-footer__subscribe-btn:hover {
  opacity: 0.92;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 432.113px) 149px 161px 167px minmax(0, 1fr);
  gap: 37.54px;
  align-items: start;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.site-footer__logo {
  display: block;
  line-height: 0;
}

.site-footer__logo img {
  display: block;
  width: 140px;
  height: 39px;
  object-fit: contain;
}

.site-footer__about {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--white);
}

.site-footer__social {
  display: flex;
  flex-direction: column;
  gap: 23.149px;
  align-items: flex-start;
}

.site-footer__social-label {
  margin: 0;
  font-family: "Manrope", var(--font-sans);
  font-size: 19.291px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--white);
}

.site-footer__social-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13.504px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__social-link {
  display: block;
  line-height: 0;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.site-footer__social-link:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.site-footer__social-link img {
  display: block;
  width: 42.166px;
  height: auto;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 23.149px;
  align-items: flex-start;
  min-width: 0;
}

.site-footer__col-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px 24px;
  border-radius: 12px;
  background: rgba(55, 82, 178, 0.3);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--white);
  white-space: nowrap;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 13.504px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.site-footer__links--tight {
  gap: 11.574px;
}

.site-footer__links a,
.site-footer__contact a {
  font-family: var(--font-sans);
  font-size: 15.433px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--white);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.site-footer__links a:hover,
.site-footer__contact a:hover {
  opacity: 0.85;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 13.504px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.site-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 11.574px;
  font-family: var(--font-sans);
  font-size: 15.433px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--white);
}

.site-footer__contact img {
  display: block;
  flex-shrink: 0;
  width: 23.149px;
  height: 23.149px;
}

.site-footer__col--contact {
  max-width: 380.723px;
}

.site-footer__col--quick {
  gap: 11.574px;
}

.site-footer__legal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  padding: 17px 16px;
  border-radius: 8px;
  background: #242424;
}

.site-footer__legal p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--white);
  text-align: center;
}

.site-footer__rule {
  width: 100%;
  max-width: 1388.936px;
  margin: 0 auto;
  border: none;
  border-top: 1px solid rgba(84, 141, 254, 0.44);
}

@media (max-width: 1199px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 28px;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
    max-width: none;
  }

  .site-footer__col--contact {
    grid-column: auto;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .site-footer__card {
    padding: 40px 20px 32px;
    border-radius: 28px;
  }

  .site-footer__inner {
    gap: 40px;
  }

  .site-footer__top {
    flex-direction: column;
    align-items: stretch;
  }

  .site-footer__heading {
    font-size: clamp(28px, 8vw, 40px);
  }

  .site-footer__promo {
    max-width: none;
  }

  .site-footer__subscribe {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 12px 12px 16px;
    border-radius: 24px;
  }

  .site-footer__subscribe-btn {
    width: 100%;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }

  .site-footer__brand {
    max-width: none;
  }

  .site-footer__contact li {
    align-items: flex-start;
  }

  .site-footer__contact span,
  .site-footer__contact a {
    word-break: break-word;
  }

  .site-footer__col-badge {
    font-size: 16px;
    padding: 8px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-testimonials__marquee-track {
    animation: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: 10px;
    scrollbar-width: thin;
  }

  .home-testimonials__slide {
    scroll-snap-align: start;
  }

  .home-testimonials--animate:not(.is-visible) .home-testimonials__header,
  .home-testimonials--animate:not(.is-visible) .home-testimonials__viewport {
    opacity: 1;
    transform: none;
  }

  .home-testimonials.is-visible .home-testimonials__header,
  .home-testimonials.is-visible .home-testimonials__viewport {
    animation: none !important;
  }

  .home-faq--animate:not(.is-visible) .home-faq__header,
  .home-faq--animate:not(.is-visible) .home-faq__accordion {
    opacity: 1;
    transform: none;
  }

  .home-faq.is-visible .home-faq__header,
  .home-faq.is-visible .home-faq__accordion {
    animation: none !important;
  }

  .home-faq__content {
    transition: none;
  }

  .home-brand-cta--animate:not(.is-visible) .home-brand-cta__card {
    opacity: 1;
    transform: none;
  }

  .home-brand-cta.is-visible .home-brand-cta__card {
    animation: none !important;
  }
}
/**
 * Swiper 14.4.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: October 30, 2026
 */

:root {
  --swiper-theme-color: #007aff;
}
:host {
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}
.swiper {
  display: block;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 1;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  box-sizing: initial;
  display: flex;
  height: 100%;
  position: relative;
  transition-property: transform;
  transition-timing-function: var(
    --swiper-wrapper-transition-timing-function,
    initial
  );
  width: 100%;
  z-index: 1;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translateZ(0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  display: block;
  flex-shrink: 0;
  height: 100%;
  position: relative;
  transition-property: transform;
  width: 100%;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  backface-visibility: hidden;
  transform: translateZ(0);
}
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
  .swiper-cube-shadow,
  .swiper-slide {
    transform-style: preserve-3d;
  }
}
.swiper-css-mode {
  > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  &.swiper-horizontal {
    > .swiper-wrapper {
      scroll-snap-type: x mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-slides-offset-before);
      scroll-margin-inline-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-inline-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-vertical {
    > .swiper-wrapper {
      scroll-snap-type: y mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-slides-offset-before);
      scroll-margin-block-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-block-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-free-mode {
    > .swiper-wrapper {
      scroll-snap-type: none;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: none;
    }
  }
  &.swiper-centered {
    > .swiper-wrapper:before {
      content: "";
      flex-shrink: 0;
      order: 9999;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always;
    }
  }
  &.swiper-centered.swiper-horizontal {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper:before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after);
    }
  }
  &.swiper-centered.swiper-vertical {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper:before {
      height: var(--swiper-centered-offset-after);
      min-width: 1px;
      width: 100%;
    }
  }
}
.swiper-3d {
  .swiper-slide-shadow,
  .swiper-slide-shadow-bottom,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
  }
  .swiper-slide-shadow {
    background: #00000026;
  }
  .swiper-slide-shadow-left {
    background-image: linear-gradient(270deg, #00000080, #0000);
  }
  .swiper-slide-shadow-right {
    background-image: linear-gradient(90deg, #00000080, #0000);
  }
  .swiper-slide-shadow-top {
    background-image: linear-gradient(0deg, #00000080, #0000);
  }
  .swiper-slide-shadow-bottom {
    background-image: linear-gradient(180deg, #00000080, #0000);
  }
}
.swiper-lazy-preloader {
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top: 4px solid #0000;
  box-sizing: border-box;
  height: 42px;
  left: 50%;
  margin-left: -21px;
  margin-top: -21px;
  position: absolute;
  top: 50%;
  transform-origin: 50%;
  width: 42px;
  z-index: 10;
}
.swiper-watch-progress .swiper-slide-visible,
.swiper:not(.swiper-watch-progress) {
  .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s linear infinite;
  }
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
.swiper-virtual.swiper-css-mode {
  .swiper-wrapper:after {
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
  }
}
.swiper-virtual.swiper-css-mode.swiper-horizontal {
  .swiper-wrapper:after {
    height: 1px;
    width: var(--swiper-virtual-size);
  }
}
.swiper-virtual.swiper-css-mode.swiper-vertical {
  .swiper-wrapper:after {
    height: var(--swiper-virtual-size);
    width: 1px;
  }
}
:root {
  --swiper-navigation-size: 44px;
}
.swiper-button-next,
.swiper-button-prev {
  align-items: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  cursor: pointer;
  display: flex;
  height: var(--swiper-navigation-size);
  justify-content: center;
  position: absolute;
  width: var(--swiper-navigation-size);
  z-index: 10;
  &.swiper-button-disabled {
    cursor: auto;
    opacity: 0.35;
    pointer-events: none;
  }
  &.swiper-button-hidden {
    cursor: auto;
    opacity: 0;
    pointer-events: none;
  }
  .swiper-navigation-disabled & {
    display: none !important;
  }
  ::slotted(svg),
  svg {
    height: 100%;
    object-fit: contain;
    transform-origin: center;
    width: 100%;
    fill: currentColor;
    pointer-events: none;
  }
}
.swiper-button-lock {
  display: none;
}
.swiper-button-next,
.swiper-button-prev {
  margin-top: calc(0px - var(--swiper-navigation-size) / 2);
  top: var(--swiper-navigation-top-offset, 50%);
}
.swiper-button-prev {
  left: var(--swiper-navigation-sides-offset, 4px);
  right: auto;
  .swiper-navigation-icon,
  ::slotted(.swiper-navigation-icon) {
    transform: rotate(180deg);
  }
}
.swiper-button-next {
  left: auto;
  right: var(--swiper-navigation-sides-offset, 4px);
}
.swiper-horizontal {
  .swiper-button-next,
  .swiper-button-prev,
  ~ .swiper-button-next,
  ~ .swiper-button-prev {
    margin-left: 0;
    margin-top: calc(0px - var(--swiper-navigation-size) / 2);
    top: var(--swiper-navigation-top-offset, 50%);
  }
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next,
  & ~ .swiper-button-prev,
  .swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto;
  }
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev,
  & ~ .swiper-button-next,
  .swiper-button-next {
    left: auto;
    right: var(--swiper-navigation-sides-offset, 4px);
  }
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next,
  & ~ .swiper-button-prev,
  .swiper-button-prev {
    .swiper-navigation-icon,
    ::slotted(.swiper-navigation-icon) {
      transform: rotate(180deg);
    }
  }
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    .swiper-navigation-icon,
    ::slotted(.swiper-navigation-icon) {
      transform: rotate(0deg);
    }
  }
}
.swiper-vertical {
  .swiper-button-next,
  .swiper-button-prev,
  ~ .swiper-button-next,
  ~ .swiper-button-prev {
    left: var(--swiper-navigation-top-offset, 50%);
    margin-left: calc(0px - var(--swiper-navigation-size) / 2);
    margin-top: 0;
    right: auto;
  }
  .swiper-button-prev,
  ~ .swiper-button-prev {
    bottom: auto;
    top: var(--swiper-navigation-sides-offset, 4px);
    .swiper-navigation-icon,
    ::slotted(.swiper-navigation-icon) {
      transform: rotate(-90deg);
    }
  }
  .swiper-button-next,
  ~ .swiper-button-next {
    bottom: var(--swiper-navigation-sides-offset, 4px);
    top: auto;
    .swiper-navigation-icon,
    ::slotted(.swiper-navigation-icon) {
      transform: rotate(90deg);
    }
  }
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transform: translateZ(0);
  transition: opacity 0.3s;
  z-index: 10;
  &.swiper-pagination-hidden {
    opacity: 0;
  }
  &.swiper-pagination-disabled,
  .swiper-pagination-disabled > & {
    display: none !important;
  }
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: var(--swiper-pagination-bottom, 8px);
  left: 0;
  top: var(--swiper-pagination-top, auto);
  width: 100%;
}
.swiper-pagination-bullets-dynamic {
  font-size: 0;
  overflow: hidden;
  .swiper-pagination-bullet {
    position: relative;
    transform: scale(0.33);
  }
  .swiper-pagination-bullet-active,
  .swiper-pagination-bullet-active-main {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-prev {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.33);
  }
  .swiper-pagination-bullet-active-next {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-next-next {
    transform: scale(0.33);
  }
}
.swiper-pagination-bullet {
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  display: inline-block;
  height: var(
    --swiper-pagination-bullet-height,
    var(--swiper-pagination-bullet-size, 8px)
  );
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  width: var(
    --swiper-pagination-bullet-width,
    var(--swiper-pagination-bullet-size, 8px)
  );
  button& {
    appearance: none;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
  }
  .swiper-pagination-clickable & {
    cursor: pointer;
  }
  &:only-child {
    display: none !important;
  }
}
.swiper-pagination-bullet-active {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  opacity: var(--swiper-pagination-bullet-opacity, 1);
}
.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical > .swiper-pagination-bullets {
  left: var(--swiper-pagination-left, auto);
  right: var(--swiper-pagination-right, 8px);
  top: 50%;
  transform: translate3d(0, -50%, 0);
  .swiper-pagination-bullet {
    display: block;
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  }
  &.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    .swiper-pagination-bullet {
      display: inline-block;
      transition:
        transform 0.2s,
        top 0.2s;
    }
  }
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
  .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  }
  &.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    .swiper-pagination-bullet {
      transition:
        transform 0.2s,
        left 0.2s;
    }
  }
}
.swiper-horizontal.swiper-rtl
  > .swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet {
  transition:
    transform 0.2s,
    right 0.2s;
}
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, #00000040);
  position: absolute;
  .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: scale(0);
    transform-origin: left top;
    width: 100%;
  }
  .swiper-rtl & .swiper-pagination-progressbar-fill {
    transform-origin: right top;
  }
  &.swiper-pagination-horizontal,
  &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
  .swiper-horizontal > &,
  .swiper-vertical > &.swiper-pagination-progressbar-opposite {
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
    width: 100%;
  }
  &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-vertical,
  .swiper-horizontal > &.swiper-pagination-progressbar-opposite,
  .swiper-vertical > & {
    height: 100%;
    left: 0;
    top: 0;
    width: var(--swiper-pagination-progressbar-size, 4px);
  }
}
.swiper-pagination-lock {
  display: none;
}
.swiper-scrollbar {
  background: var(--swiper-scrollbar-bg-color, #0000001a);
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  &.swiper-scrollbar-disabled,
  .swiper-scrollbar-disabled > & {
    display: none !important;
  }
  &.swiper-scrollbar-horizontal,
  .swiper-horizontal > & {
    bottom: var(--swiper-scrollbar-bottom, 4px);
    height: var(--swiper-scrollbar-size, 4px);
    left: var(--swiper-scrollbar-sides-offset, 1%);
    position: absolute;
    top: var(--swiper-scrollbar-top, auto);
    width: calc(100% - var(--swiper-scrollbar-sides-offset, 1%) * 2);
    z-index: 50;
  }
  &.swiper-scrollbar-vertical,
  .swiper-vertical > & {
    height: calc(100% - var(--swiper-scrollbar-sides-offset, 1%) * 2);
    left: var(--swiper-scrollbar-left, auto);
    position: absolute;
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    width: var(--swiper-scrollbar-size, 4px);
    z-index: 50;
  }
}
.swiper-scrollbar-drag {
  background: var(--swiper-scrollbar-drag-bg-color, #00000080);
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  height: 100%;
  left: 0;
  position: relative;
  top: 0;
  width: 100%;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}
.swiper-zoom-container {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  text-align: center;
  width: 100%;
  > canvas,
  > img,
  > svg {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
  }
}
.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}
.swiper .swiper-notification {
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: -1000;
}
.swiper-free-mode > .swiper-wrapper {
  margin: 0 auto;
  transition-timing-function: ease-out;
}
.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
  flex-direction: column;
  flex-wrap: wrap;
}
.swiper-fade {
  &.swiper-free-mode {
    .swiper-slide {
      transition-timing-function: ease-out;
    }
  }
  .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
    .swiper-slide {
      pointer-events: none;
    }
  }
  .swiper-slide-active {
    pointer-events: auto;
    & .swiper-slide-active {
      pointer-events: auto;
    }
  }
}
.swiper.swiper-cube {
  overflow: visible;
}
.swiper-cube {
  .swiper-slide {
    backface-visibility: hidden;
    height: 100%;
    pointer-events: none;
    transform-origin: 0 0;
    visibility: hidden;
    width: 100%;
    z-index: 1;
    .swiper-slide {
      pointer-events: none;
    }
  }
  &.swiper-rtl .swiper-slide {
    transform-origin: 100% 0;
  }
  .swiper-slide-active {
    &,
    & .swiper-slide-active {
      pointer-events: auto;
    }
  }
  .swiper-slide-active,
  .swiper-slide-next,
  .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible;
  }
  .swiper-cube-shadow {
    bottom: 0;
    height: 100%;
    left: 0;
    opacity: 0.6;
    position: absolute;
    width: 100%;
    z-index: 0;
    &:before {
      background: #000;
      bottom: 0;
      content: "";
      filter: blur(50px);
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
.swiper-cube {
  .swiper-slide-next + .swiper-slide {
    pointer-events: auto;
    visibility: visible;
  }
}
.swiper-cube {
  .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
  .swiper-slide-shadow-cube.swiper-slide-shadow-left,
  .swiper-slide-shadow-cube.swiper-slide-shadow-right,
  .swiper-slide-shadow-cube.swiper-slide-shadow-top {
    backface-visibility: hidden;
    z-index: 0;
  }
}
.swiper.swiper-flip {
  overflow: visible;
}
.swiper-flip {
  .swiper-slide {
    backface-visibility: hidden;
    pointer-events: none;
    z-index: 1;
    .swiper-slide {
      pointer-events: none;
    }
  }
  .swiper-slide-active {
    &,
    & .swiper-slide-active {
      pointer-events: auto;
    }
  }
}
.swiper-flip {
  .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
  .swiper-slide-shadow-flip.swiper-slide-shadow-left,
  .swiper-slide-shadow-flip.swiper-slide-shadow-right,
  .swiper-slide-shadow-flip.swiper-slide-shadow-top {
    backface-visibility: hidden;
    z-index: 0;
  }
}
.swiper-creative {
  .swiper-slide {
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height;
  }
}
.swiper.swiper-cards {
  overflow: visible;
}
/* —— Contact Us page —— */
body.smmrx-about-page {
  background: var(--white);
}

body.smmrx-about-page .hero-section.hero-section--about {
  position: relative;
  background: transparent;
  min-height: auto;
  overflow-x: clip;
}

body.smmrx-about-page .hero-section.hero-section--about::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--hero-gradient);
  pointer-events: none;
}

body.smmrx-about-page .hero-section.hero-section--about > * {
  position: relative;
  z-index: 1;
}

body.smmrx-contact-page,
body.smmrx-api-page,
body.smmrx-service-page {
  background: var(--white);
  --contact-hero-band-height: min(879px, 100vh);
  --contact-panel-top: clamp(88px, 8.18vw, 157px);
}

@media (min-width: 1024px) {
  body.smmrx-contact-page,
  body.smmrx-api-page,
  body.smmrx-service-page {
    --contact-hero-band-height: 879px;
    --contact-panel-top: 157px;
  }
}

body.smmrx-contact-page .main,
body.smmrx-api-page .main,
body.smmrx-service-page .main {
  background: var(--white);
}

body.smmrx-contact-page .hero-section.hero-section--contact,
body.smmrx-api-page .hero-section.hero-section--api,
body.smmrx-service-page .hero-section.hero-section--service {
  position: relative;
  /* No z-index here — fixed header must stack above overlapping panels (mobile nav). */
  height: var(--contact-hero-band-height);
  min-height: 0;
  max-height: none;
  padding-bottom: 0;
  overflow: visible;
  background: transparent;
}

body.smmrx-contact-page .hero-section.hero-section--contact::before,
body.smmrx-api-page .hero-section.hero-section--api::before,
body.smmrx-service-page .hero-section.hero-section--service::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--hero-gradient-contact);
  pointer-events: none;
}

body.smmrx-contact-page .hero-section.hero-section--contact > .site-header,
body.smmrx-api-page .hero-section.hero-section--api > .site-header,
body.smmrx-policy-page .hero-section.hero-section--policy > .site-header,
body.smmrx-service-page .hero-section.hero-section--service > .site-header {
  position: fixed;
  z-index: 200;
  inset-inline: 0;
  top: var(--header-top);
  width: 100%;
  box-sizing: border-box;
}

body.smmrx-contact-page
  .hero-section.hero-section--contact
  > .site-header.site-header--pinned,
body.smmrx-api-page
  .hero-section.hero-section--api
  > .site-header.site-header--pinned,
body.smmrx-policy-page
  .hero-section.hero-section--policy
  > .site-header.site-header--pinned,
body.smmrx-service-page
  .hero-section.hero-section--service
  > .site-header.site-header--pinned {
  top: 0;
  padding-top: var(--header-pin-padding);
  z-index: 200;
}

body.smmrx-contact-page .contact-us-section,
body.smmrx-api-page .api-page-section,
body.smmrx-service-page .service-page-section {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--contact-panel-top) - var(--contact-hero-band-height));
  padding-bottom: clamp(40px, 5vw, 80px);
  background: transparent;
}

body.smmrx-api-page .api-page-section__container {
  padding-top: 0;
  padding-bottom: 0;
}

.contact-us-section {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  color: var(--text-primary, #202020);
}

.contact-us-section__container {
  padding-top: clamp(16px, 2vw, 32px);
  padding-bottom: 0;
}

body.smmrx-contact-page .contact-us-section__container {
  padding-top: 0;
  padding-bottom: 0;
}

.contact-us-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: 48px clamp(16px, 4.17vw, 60px) 38px;
  border: 1px solid #e8e8e3;
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(152, 152, 152, 0.16);
  overflow: hidden;
}

.contact-us-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 1280px;
  text-align: center;
}

.contact-us-section__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0.8px solid #3752b2;
  border-radius: 100px;
  background: #fff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
}

.contact-us-section__badge-label {
  font-family: var(--font-parkinsans, "Parkinsans", sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #2b2b22;
}

.contact-us-section__badge-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.contact-us-section__title {
  margin: 0;
  font-family: var(--font-parkinsans, "Parkinsans", sans-serif);
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #000;
}

.contact-us-section__description-wrap {
  position: relative;
  width: 100%;
  max-width: 848px;
}

.contact-us-section__description {
  margin: 0;
  max-width: 848px;
  font-size: 14px;
  line-height: 1.5;
  color: #2b2b22;
}

.contact-us-section__desc-arrow {
  position: absolute;
  right: clamp(0px, 8vw, 48px);
  bottom: 2px;
  width: 10px;
  height: 10px;
  pointer-events: none;
}

.contact-us-form-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(24px, 3vw, 34px);
  width: 100%;
  max-width: 1320px;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid #dfe0e4;
  border-radius: 28px;
  background: #fff;
}

@media (min-width: 1024px) {
  .contact-us-form-block {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
  }

  .contact-us-form {
    flex: 0 1 738px;
    max-width: 738px;
  }

  .contact-us-form-block__visual {
    flex: 0 0 484px;
    width: 484px;
    height: 561px;
  }

  .contact-us-form-block__image {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center top;
  }
}

.contact-us-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 738px;
}

.contact-us-form__fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-us-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .contact-us-form__row {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

.contact-us-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-us-field__label {
  font-family: var(--font-parkinsans, "Parkinsans", sans-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #202020;
}

.contact-us-field__control {
  width: 100%;
  padding: 20px 24px;
  border: 1px solid #dfe0e4;
  border-radius: 12px;
  background: #f5f6f7;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.3;
  color: #2b2b22;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.contact-us-field__control::placeholder {
  color: #2b2b22;
  opacity: 0.85;
}

.contact-us-field__control:focus {
  border-color: #3752b2;
  box-shadow: 0 0 0 3px rgba(55, 82, 178, 0.12);
}

.contact-us-field__control--textarea {
  min-height: 196px;
  resize: vertical;
}

.contact-us-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  max-width: none;
  align-self: flex-start;
  min-height: 48px;
  padding: 6px 28px;
  font-family: var(--font-parkinsans, "Parkinsans", sans-serif);
  font-size: 16px;
  font-weight: 500;
}

.contact-us-form__submit-icon {
  flex-shrink: 0;
}

.contact-us-form-block__visual {
  position: relative;
  width: 100%;
  max-width: 484px;
  margin-inline: auto;
  border-radius: 22px;
  overflow: hidden;
  flex-shrink: 0;
}

.contact-us-form-block__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 484 / 561;
  object-fit: cover;
}

.contact-us-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
  max-width: 1320px;
}

@media (min-width: 640px) {
  .contact-us-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .contact-us-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-us-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 273px;
  padding: 24px;
  text-align: center;
  border: 0.7px solid #dfe0e4;
  border-radius: 24px;
  background: #fff;
}

.contact-us-card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.contact-us-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.contact-us-card__icon {
  width: auto;
  height: 68px;
  max-width: 80px;
  object-fit: contain;
  flex-shrink: 0;
}

.contact-us-card__icon--hours {
  transform: scale(1.08);
}

.contact-us-card__title {
  margin: 0;
  font-family: var(--font-parkinsans, "Parkinsans", sans-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: #181818;
}

.contact-us-card__link {
  font-family: var(--font-parkinsans, "Parkinsans", sans-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: #3752b2;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-us-card__link:hover {
  opacity: 0.88;
}

.contact-us-card__text {
  margin: 0;
  max-width: 316px;
  font-size: 16px;
  line-height: 1.35;
  color: #3c3c3c;
}

.contact-us-card__text--solo {
  max-width: 236px;
}

.contact-us-map {
  position: relative;
  width: 100%;
  max-width: 1320px;
  aspect-ratio: 1320 / 458;
  min-height: 240px;
  border-radius: 24px;
  overflow: hidden;
  background: #e8eaed;
}

.contact-us-map__embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-us-map__view-link {
  position: absolute;
  z-index: 2;
  top: clamp(16px, 2vw, 24px);
  left: clamp(16px, 2vw, 24px);
  padding: 8px 24px;
  border-radius: 8px;
  background: #fff;
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  background-image: linear-gradient(
    149deg,
    #4b4c88 8.2%,
    #6b6dc0 53.431%,
    #6060ab 99.203%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.contact-us-map__view-link:hover {
  opacity: 0.92;
}

/* —— API page (Figma 25590:19710 / content 25590:20175) —— */
.api-page-section {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.api-page-panel {
  padding-inline: clamp(16px, 1.46vw, 28px);
}

.api-page-section__title-accent {
  color: var(--brand);
}

.api-page-body {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
  max-width: 100%;
  padding-top: 20px;
}

.api-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.api-block__title {
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 21px 32px;
  border-radius: 12px;
  background: rgba(55, 82, 178, 0.2);
  font-family: var(--font-parkinsans, "Parkinsans", sans-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: #0e0e0e;
}

.api-block__title--lg {
  font-family: var(--font-heading, "Bricolage Grotesque", sans-serif);
  font-size: 20px;
  font-weight: 500;
}

.api-kv-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.api-kv-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
}

@media (min-width: 768px) {
  .api-kv-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
  }
}

.api-cell {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 16px 32px;
  border: 1px solid #e8e8e3;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #2b2b22;
  word-break: break-word;
}

.api-cell--label {
  background: var(--white);
  font-size: 16px;
  color: #020618;
}

.api-cell--value {
  background: #f3f3f3;
}

.api-cell--header {
  background: #f3f3f3;
  font-size: 16px;
  color: #020618;
}

.api-cell--brand {
  color: var(--brand);
}

.api-cell--with-action {
  justify-content: center;
  align-items: center;
  padding: 16px 32px;
}

.api-cell__url-row {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.api-cell__mono {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #2b2b22;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .api-cell__mono {
    white-space: normal;
    word-break: break-all;
  }

  .api-cell__url-row {
    align-items: center;
    flex-wrap: wrap;
  }
}

.api-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 5px 6px;
  border: none;
  border-radius: 4px;
  background: var(--brand);
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
}

.api-copy-btn--solid {
  width: 22px;
  height: 22px;
  padding: 0;
}

.api-copy-btn__icon {
  display: block;
  width: 10px;
  height: auto;
  max-height: 12px;
  object-fit: contain;
  transition: opacity 0.15s ease;
}

.api-copy-code-btn .api-copy-btn__icon {
  width: 12px;
  max-height: 13px;
}

.api-copy-btn.is-copied,
.api-copy-code-btn.is-copied {
  opacity: 1;
}

.api-copy-btn:hover {
  opacity: 0.9;
}

.api-copy-btn:active {
  transform: scale(0.96);
}

.api-param-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
}

@media (min-width: 640px) {
  .api-param-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.api-code-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
}

.api-code-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-height: 72px;
  padding: 16px 32px;
  border-radius: 12px;
  background: rgba(55, 82, 178, 0.2);
}

@media (min-width: 640px) {
  .api-code-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 21px;
  }
}

.api-code-head__title {
  margin: 0;
  font-family: var(--font-parkinsans, "Parkinsans", sans-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: #0e0e0e;
}

.api-code-head__title--lg {
  font-family: var(--font-heading, "Bricolage Grotesque", sans-serif);
  font-size: 20px;
}

.api-copy-code-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 6px 32px;
  border: 1.5px solid var(--brand);
  border-radius: 12px;
  background: var(--white);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--brand);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.api-copy-code-btn:hover {
  opacity: 0.92;
}

.api-code-block {
  margin: 0;
  width: 100%;
  max-width: 100%;
  padding: 32px 40px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #e8e8e3;
  border-radius: 12px;
  background: #f3f3f3;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: #2b2b22;
  white-space: pre;
  tab-size: 2;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 639px) {
  .api-code-block {
    padding: 24px 20px;
  }
}

.api-code-block code {
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}

.api-select-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 602px;
}

.api-select-field__label {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #111;
}

.api-select-field__control {
  position: relative;
  display: block;
}

.api-select-field__control select {
  appearance: none;
  width: 100%;
  min-height: 48px;
  padding: 16px 44px 16px 20px;
  border: 1px solid #e8e8e3;
  border-radius: 12px;
  background: #f8fafc;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: #2b2b22;
  cursor: pointer;
}

.api-select-field__control select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(55, 82, 178, 0.12);
}

.api-select-field__chevron {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 20px;
  height: 20px;
  color: #2b2b22;
  pointer-events: none;
  transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   Policy pages (Figma 25590:18114 / 18648 / 19179)
   -------------------------------------------------------------------------- */

body.smmrx-policy-page {
  --policy-hero-band-height: 578px;
}

body.smmrx-policy-page .main {
  background: var(--white);
}

body.smmrx-policy-page .hero-section.hero-section--policy {
  position: relative;
  z-index: 1;
  height: var(--policy-hero-band-height);
  min-height: 0;
  padding-bottom: 0;
  overflow: visible;
  background: transparent;
}

body.smmrx-policy-page .hero-section.hero-section--policy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--hero-gradient-contact);
  pointer-events: none;
}

.policy-hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 674px;
  margin-inline: auto;
  padding: clamp(120px, 14vw, 176px) 16px 48px;
  text-align: center;
}

.policy-hero__breadcrumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #393939;
}

.policy-hero__breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.policy-hero__breadcrumb a:hover {
  color: var(--brand);
}

.policy-hero__breadcrumb-sep {
  display: block;
  width: 12px;
  height: 8px;
  transform: rotate(-90deg);
  opacity: 0.7;
}

.policy-hero__breadcrumb [aria-current="page"] {
  color: var(--brand);
  font-weight: 600;
}

.policy-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 700;
  line-height: 1.22;
  color: #0e0e0e;
}

.policy-hero__description {
  margin: 0;
  max-width: 604px;
  font-size: 14px;
  line-height: 1.5;
  color: #2b2b22;
}

.policy-hero__updated {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #494949;
}

.policy-page-section {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(40px, 5vw, 80px) 0 clamp(48px, 6vw, 80px);
  background: var(--white);
}

.policy-page-section__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1320px;
}

.policy-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}

@media (min-width: 1024px) {
  .policy-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
}

.policy-toolbar__tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.policy-toolbar__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 55px;
  padding: 16px 24px;
  border-radius: 12px;
  background: rgba(55, 82, 178, 0.08);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #393939;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.policy-toolbar__tab:hover {
  background: rgba(55, 82, 178, 0.14);
  color: var(--brand);
}

.policy-toolbar__tab--active {
  background: var(--brand);
  color: var(--white);
}

.policy-toolbar__tab--active:hover {
  color: var(--white);
}

.policy-toolbar__search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  min-height: 56px;
  padding: 4px 4px 4px 20px;
  border: 1px solid #dfe0e4;
  border-radius: 12px;
  background: var(--white);
}

@media (min-width: 1024px) {
  .policy-toolbar__search {
    margin-left: auto;
  }
}

.policy-toolbar__search-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: #2b2b22;
  outline: none;
}

.policy-toolbar__search-input::placeholder {
  color: #494949;
  opacity: 0.85;
}

.policy-toolbar__search-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: var(--brand);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.policy-toolbar__search-btn:hover {
  opacity: 0.92;
}

.policy-toolbar__search-btn img {
  display: block;
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.policy-blocks {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

/* Figma 25590:19149 */
.policy-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
  padding: 20px;
  border: 1px solid #ebecef;
  border-radius: 16px;
  background: #f5f6f7;
  box-shadow: none;
}

.policy-block__title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--white);
}

.policy-block__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.18;
  color: #202020;
}

.policy-block__body {
  margin: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: #222e48;
}

/* --------------------------------------------------------------------------
   Blog listing & details (Figma 25590:16844 / 25590:17507)
   -------------------------------------------------------------------------- */

body.smmrx-blog-page,
body.smmrx-blog-details-page {
  --blog-hero-band-height: 578px;
}

body.smmrx-blog-page .main,
body.smmrx-blog-details-page .main {
  background: var(--white);
}

body.smmrx-blog-page .hero-section.hero-section--blog,
body.smmrx-blog-details-page .hero-section.hero-section--blog {
  position: relative;
  z-index: 1;
  height: var(--blog-hero-band-height);
  min-height: 0;
  padding-bottom: 0;
  overflow: visible;
  background: transparent;
}

body.smmrx-blog-page .hero-section.hero-section--blog::before,
body.smmrx-blog-details-page .hero-section.hero-section--blog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--hero-gradient-blog);
  pointer-events: none;
}

body.smmrx-blog-page .hero-section.hero-section--blog > .site-header,
body.smmrx-blog-details-page .hero-section.hero-section--blog > .site-header {
  position: fixed;
  z-index: 100;
  inset-inline: 0;
  top: var(--header-top);
  width: 100%;
  box-sizing: border-box;
}

body.smmrx-blog-page
  .hero-section.hero-section--blog
  > .site-header.site-header--pinned,
body.smmrx-blog-details-page
  .hero-section.hero-section--blog
  > .site-header.site-header--pinned {
  top: 0;
  padding-top: var(--header-pin-padding);
  z-index: 100;
}

.blog-hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 688px;
  margin-inline: auto;
  padding: clamp(120px, 14vw, 176px) 16px 48px;
  text-align: center;
}

.blog-hero__breadcrumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0 0 20px;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--white);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.18;
  color: #888e9c;
}

.blog-hero__breadcrumb a {
  color: #888e9c;
  text-decoration: none;
}

.blog-hero__breadcrumb a:hover {
  color: var(--brand);
}

.blog-hero__breadcrumb-sep {
  display: block;
  flex-shrink: 0;
  width: 12px;
  height: 8px;
  transform: rotate(-90deg);
  opacity: 1;
}

.blog-hero__breadcrumb [aria-current="page"] {
  color: var(--brand);
  font-weight: 500;
}

.blog-hero__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.75vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.36px;
  color: #0e0e0e;
}

.blog-hero__description {
  margin: 0 0 44px;
  max-width: 604px;
  font-size: 16px;
  line-height: 1.2;
  color: #343e56;
}

.blog-hero__search {
  display: flex;
  align-items: center;
  width: min(100%, 540px);
  min-height: 56px;
  margin: 0 0 24px;
  padding: 4px 4px 4px 20px;
  border: 1px solid #ebecef;
  border-radius: 100px;
  background: var(--white);
  box-shadow: none;
  overflow: visible;
  box-sizing: border-box;
}

.blog-hero__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.18;
  color: #40434b;
  outline: none;
}

.blog-hero__search-input::placeholder {
  color: #888e9c;
}

.blog-hero__search-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background: var(--brand);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.blog-hero__search-btn:hover {
  opacity: 0.92;
}

.blog-hero__search-btn img {
  display: block;
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.blog-categories {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, 1.1vw, 12px);
  width: 100%;
  max-width: 688px;
  margin: 0;
  padding-bottom: 2px;
  overflow: visible;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .blog-categories {
    grid-template-columns: repeat(5, minmax(108px, 128px));
    justify-content: center;
  }
}

@media (max-width: 479px) {
  .blog-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-categories__tab:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - clamp(3px, 0.55vw, 6px));
    justify-self: center;
  }
}

.blog-categories__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: clamp(44px, 11vw, 55px);
  padding: clamp(10px, 2vw, 16px) clamp(8px, 2vw, 24px);
  border: 1px solid rgba(55, 82, 178, 0.12);
  border-radius: 12px;
  box-sizing: border-box;
  background: var(--white);
  font-family: var(--font-sans);
  font-size: clamp(12px, 2.6vw, 16px);
  font-weight: 500;
  line-height: 1.18;
  color: #393939;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.blog-categories__tab:hover:not(.blog-categories__tab--active) {
  background: var(--white);
  border-color: rgba(55, 82, 178, 0.28);
}

.blog-categories__tab--active {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--white);
}

body.smmrx-blog-details-page .blog-hero__description {
  display: none;
}

body.smmrx-blog-page .blog-list-section {
  background: var(--white);
}

.blog-list-section {
  padding: 80px 0 clamp(64px, 8vw, 96px);
  margin-top: 0;
  position: relative;
  z-index: 2;
}

body.smmrx-blog-page .blog-list-section .info-container {
  max-width: 1320px;
}

.blog-list-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding: 34px 32px;
  border: 1px solid #ebecef;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(152, 152, 152, 0.16);
}

.blog-cards-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 1256px;
}

@media (min-width: 768px) {
  .blog-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 26px;
    row-gap: 24px;
  }
}

@media (min-width: 1024px) {
  .blog-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 401px;
  margin-inline: auto;
}

.blog-card__media {
  display: block;
  position: relative;
  height: 249px;
  overflow: hidden;
  border-radius: 16px;
  background: #000;
  box-shadow:
    inset -6px -6px 12px rgba(255, 255, 255, 0.24),
    inset 6px 6px 12px rgba(255, 255, 255, 0.2);
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .blog-card__media:hover img,
  .blog-card__media:focus-visible img {
    transform: scale(1.06);
  }
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--brand);
}

.blog-card__author {
  text-align: right;
  color: var(--brand);
}

.blog-card__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
}

.blog-card__title a {
  color: #020618;
  text-decoration: none;
}

.blog-card__title a:hover {
  color: var(--brand);
}

.blog-card__excerpt {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.2;
  color: #2b2b22;
}

.blog-card__rule {
  margin: 0;
  border: none;
  border-top: 1px dashed #cdd0d8;
}

.blog-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--brand);
  text-decoration: none;
}

.blog-card__read-more:hover {
  opacity: 0.85;
}

.blog-list-section__status {
  margin: 0;
  font-size: 16px;
  color: #343e56;
  text-align: center;
}

.blog-list-section__status--error {
  color: #b42318;
}

.blog-pagination {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.blog-pagination__btn,
.blog-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 16px;
  border: 1px solid rgba(96, 96, 171, 0.4);
  border-radius: 8px;
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #181818;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    opacity 0.2s ease,
    color 0.2s ease;
}

.blog-pagination__btn--back {
  gap: 4px;
  padding: 7px 16px 7px 10px;
  border-color: rgba(96, 96, 171, 0.4);
  background: var(--white);
  color: var(--brand);
}

.blog-pagination__btn--next {
  gap: 4px;
  padding: 7px 10px 7px 16px;
  border: none;
  background: linear-gradient(180deg, #5a6fc9 0%, var(--brand) 100%);
  color: var(--white);
}

.blog-pagination__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.blog-pagination__btn--next:disabled {
  border: 1px solid #ebecef;
  background: #ebecef;
  color: #888e9c;
  opacity: 1;
}

.blog-pagination__page {
  min-width: 39px;
  padding-inline: 12px;
}

.blog-pagination__page--active {
  border-color: transparent;
  background: linear-gradient(180deg, #5a6fc9 0%, var(--brand) 100%);
  color: var(--white);
}

.blog-pagination__page:not(.blog-pagination__page--active):hover {
  border-color: rgba(55, 82, 178, 0.45);
  color: var(--brand);
}

.blog-pagination__chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.blog-pagination__chevron--prev {
  transform: rotate(-135deg);
}

.blog-pagination__chevron--next {
  transform: rotate(45deg);
}

.blog-details-hero-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 24px;
  width: 100%;
  max-width: 674px;
  margin: 0;
  text-align: center;
}

.blog-details-hero-meta__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.blog-details-hero-meta__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #888e9c;
}

.blog-details-hero-meta__value {
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--brand);
}

body.smmrx-blog-details-page .blog-hero__title {
  margin-bottom: 44px;
}

.blog-details-cover-wrap {
  position: relative;
  z-index: 3;
  margin-top: clamp(-72px, -8vw, -92px);
  padding-bottom: 0;
}

.blog-details-cover {
  display: block;
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  height: clamp(220px, 40vw, 378px);
  object-fit: cover;
  border-radius: 28px;
  border: 1px solid #dfe0e4;
  box-shadow: 0 2px 8px rgba(152, 152, 152, 0.12);
}

body.smmrx-blog-details-page .blog-details-article {
  background: var(--white);
}

body.smmrx-blog-details-page .blog-details-article .info-container {
  max-width: 1320px;
}

.blog-details-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 64px);
}

@media (min-width: 1024px) {
  .blog-details-layout {
    grid-template-columns: minmax(0, 1fr) 1px minmax(260px, 460px);
    gap: 56px;
    align-items: start;
  }
}

.blog-details-toc {
  position: sticky;
  top: calc(var(--site-header-pinned-offset, 96px) + 16px);
}

@media (min-width: 1024px) {
  .blog-details-toc {
    order: 0;
  }
}

@media (max-width: 639px) {
  .blog-details-hero-meta {
    grid-template-columns: 1fr;
    max-width: 280px;
  }
}

.blog-details-toc__head {
  margin-bottom: 20px;
}

.blog-details-toc__label {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #888e9c;
  letter-spacing: normal;
  text-transform: none;
}

.blog-details-toc__progress {
  position: relative;
  width: 100%;
  height: 7px;
  border-radius: 100px;
  background: #ebecef;
  overflow: hidden;
}

.blog-details-toc__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transform: scaleX(0.2);
  transform-origin: left center;
  transition: transform 0.35s ease;
}

.blog-details-toc__nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-details-toc__link {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 14px 16px;
  border: 1px solid #ebecef;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #343e56;
  text-decoration: none;
  background: var(--white);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.blog-details-toc__link--active,
.blog-details-toc__link:hover {
  border-color: rgba(55, 82, 178, 0.24);
  background: rgba(55, 82, 178, 0.08);
  color: var(--brand);
}

.blog-details-divider {
  display: none;
  width: 1px;
  background: #c1c4cc;
}

@media (min-width: 1024px) {
  .blog-details-divider {
    display: block;
    align-self: stretch;
  }
}

.blog-details-panel-content {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: #2b2b22;
  min-width: 0;
}

.blog-details-section + .blog-details-section {
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid #c1c4cc;
}

.blog-details-section__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 24px;
  align-items: start;
  margin-bottom: 24px;
}

.blog-details-section__num {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  line-height: 1;
  color: var(--brand);
  padding-top: 9px;
}

.blog-details-section__titles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.blog-details-section__eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888e9c;
}

.blog-details-section__titles h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 25px);
  font-weight: 600;
  line-height: 1.35;
  color: #020618;
  scroll-margin-top: 120px;
}

.blog-details-section p {
  margin: 0 0 24px;
  max-width: 741px;
  font-size: 15px;
  line-height: 1.55;
  color: #343e56;
}

.blog-details-section p:last-of-type {
  margin-bottom: 32px;
}

.blog-details-section img {
  display: block;
  width: 100%;
  max-width: 741px;
  min-height: clamp(200px, 28vw, 374px);
  margin: 0;
  object-fit: cover;
  border-radius: 16px;
}

.blog-details-author-card {
  display: none;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
  padding: 16px;
  border: 1px solid #ebecef;
  border-radius: 16px;
  background: var(--white);
}

@media (min-width: 1024px) {
  .blog-details-author-card {
    display: flex;
  }
}

.blog-details-author-card__media {
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

.blog-details-author-card__media img {
  display: block;
  width: 100%;
  height: 249px;
  object-fit: cover;
}

.blog-details-author-card__name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: #020618;
}

.blog-details-author-card__role {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #888e9c;
}

.blog-details-author-card__bio {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #343e56;
}

.blog-details-panel-content h3 {
  font-family: var(--font-heading);
  color: #020618;
  scroll-margin-top: 120px;
}

.blog-details-panel-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.blog-details__error {
  padding: 48px 16px;
  text-align: center;
  color: #b42318;
}

.blog-related {
  padding: 0 0 clamp(64px, 8vw, 96px);
  background: var(--white);
}

.blog-related__panel {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(28px, 4vw, 34px) clamp(20px, 3vw, 32px);
  border: 1px solid #ebecef;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(152, 152, 152, 0.16);
}

.blog-related__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(24px, 3vw, 34px);
}

.blog-related__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.36px;
  color: #0e0e0e;
  text-align: left;
}

.blog-related__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 87px;
  justify-content: flex-end;
}

.blog-related__nav .about-api-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

.blog-related__nav .blog-related__arrow--prev.about-api-slider__arrow {
  width: 41px;
  height: 41px;
}

.blog-related__nav .blog-related__arrow--next.about-api-slider__arrow {
  width: 38px;
  height: 38px;
}

.blog-related__nav .blog-related__arrow--prev .about-api-slider__arrow-icon {
  display: block;
  width: 41px;
  height: 41px;
  flex-shrink: 0;
}

.blog-related__nav .blog-related__arrow--next .about-api-slider__arrow-icon {
  display: block;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.blog-related__nav
  .about-api-slider__arrow--prev
  .about-api-slider__arrow-icon {
  transform: none;
}

.blog-related__nav
  .about-api-slider__arrow--next
  .about-api-slider__arrow-icon {
  transform: none;
}

.blog-related__nav
  .about-api-slider__arrow--next
  .about-api-slider__arrow-ring {
  fill: var(--brand);
  stroke: var(--brand);
}

.blog-related__nav
  .about-api-slider__arrow--next
  .about-api-slider__arrow-line {
  stroke: var(--white);
}

.blog-related-slider {
  width: 100%;
  overflow: hidden;
}

.blog-related-slider__viewport {
  overflow: hidden;
  width: 100%;
}

.blog-related-slider__track {
  display: flex;
  will-change: transform;
}

.blog-related-slider__slide {
  flex-shrink: 0;
  box-sizing: border-box;
}

.blog-related-slider__slide .blog-card {
  max-width: none;
  width: 100%;
  height: 100%;
}

.swiper-cards {
  .swiper-slide {
    backface-visibility: hidden;
    overflow: hidden;
    transform-origin: center bottom;
  }
}

/* ==========================================================================
   Service page (Figma 25590:20328) — layout matches contact page
   ========================================================================== */

.service-page-section {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.service-page-section__container {
  padding-top: 0;
  padding-bottom: 0;
}

.service-page-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 34px;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: 48px clamp(16px, 4.17vw, 60px) 38px;
  border: 1px solid #e8e8e3;
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(152, 152, 152, 0.16);
  overflow: hidden;
}

.service-page-section__header {
  width: 100%;
}

.service-page-section__title-accent {
  color: var(--brand);
}

body.smmrx-service-page .service-page-stack {
  padding: 0;
  background: transparent;
  width: 100%;
}

body.smmrx-service-page .service-page-stack__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.smmrx-service-page .service-toolbar-section,
body.smmrx-service-page .service-platform-tabs,
body.smmrx-service-page .service-catalog-section {
  background: transparent;
}

body.smmrx-service-page .service-toolbar {
  border-radius: 24px;
  border: 1px solid var(--border-light);
  background: #fff;
  padding: 20px;
  backdrop-filter: none;
}

body.smmrx-service-page .service-toolbar__row {
  gap: 13px;
}

body.smmrx-service-page .service-toolbar__filter-wrap {
  flex: 0 0 auto;
  max-width: none;
}

body.smmrx-service-page .service-toolbar__filter {
  width: 156px;
  height: 48px;
  padding: 4px 16px 4px 4px;
  border-radius: 12px;
  gap: 8px;
  font-size: 14px;
}

body.smmrx-service-page .service-toolbar__filter-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

body.smmrx-service-page .service-toolbar__filter-label {
  flex: 1;
  white-space: nowrap;
}

body.smmrx-service-page .service-toolbar__search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 14px 20px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background: #fff;
  cursor: text;
}

body.smmrx-service-page .service-toolbar__search-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

body.smmrx-service-page .service-toolbar__search-input {
  font-size: 14px;
  color: #3c3c3c;
}

body.smmrx-service-page .service-page-panel {
  overflow-x: clip;
  overflow-y: visible;
}

body.smmrx-service-page .service-platform-tabs {
  padding: 4px 0 8px;
  min-height: 0;
  width: 100%;
  overflow: visible;
}

body.smmrx-service-page .service-platform-tabs__panel {
  width: 100%;
}

/* Service page platform tabs — icon only (Figma), labels for screen readers */
/* Figma 25590:20826 — single row, equal-width platform tabs */
body.smmrx-service-page .service-platform-tabs__list.our-services__tabs {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  width: 100%;
  overflow: visible;
}

body.smmrx-service-page
  .service-platform-tabs__list
  .our-services__tab-row--single {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 6px 2px 10px;
  margin: -6px -2px -10px;
}

body.smmrx-service-page .service-platform-tabs__list .our-services__tab {
  flex: 1 1 0;
  min-width: 72px;
  width: auto;
  max-width: none;
  min-height: 64px;
  padding: 16px 28px;
  gap: 0;
  justify-content: center;
  border-width: 1px;
  border-style: solid;
}

body.smmrx-service-page
  .service-platform-tabs__list
  .our-services__tab:not(.our-services__tab--active) {
  background: #f8fafc;
  border-color: #dfe0e4;
}

/* Same specificity as inactive block — keep home gradient, shine, and click pulse */
body.smmrx-service-page
  .service-platform-tabs__list
  .our-services__tab.our-services__tab--active {
  border-color: transparent;
  color: var(--white);
  background: linear-gradient(120.46deg, #3752b2 0.37%, #6987f1 99.18%);
  /* Figma-scale shadow — stays inside row (no clipped outer glow) */
  box-shadow:
    0 4px 4px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.smmrx-service-page
  .service-platform-tabs__list
  .our-services__tab.our-services__tab--active::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  transform: translateX(-100%);
  animation: our-services-tab-shine 2.4s linear infinite;
}

body.smmrx-service-page
  .service-platform-tabs__list
  .our-services__tab.our-services__tab--active.our-services__tab--pulse {
  animation: our-services-tab-select 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

body.smmrx-service-page
  .service-platform-tabs__list
  .our-services__tab.our-services__tab--active:hover,
body.smmrx-service-page
  .service-platform-tabs__list
  .our-services__tab.our-services__tab--active:focus-visible {
  transform: none;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.smmrx-service-page
  .service-platform-tabs__list
  .our-services__tab:hover:not(.our-services__tab--active),
body.smmrx-service-page
  .service-platform-tabs__list
  .our-services__tab:focus-visible:not(.our-services__tab--active) {
  transform: none;
  border-color: #dfe0e4;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
}

body.smmrx-service-page .service-platform-tabs__list .our-services__tab-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.smmrx-service-page .service-platform-tabs__list .our-services__tab-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  margin: 0;
}

@media (max-width: 1023px) {
  /* Do not inherit home “Our Services” compact tab/icon sizing on service page */
  body.smmrx-service-page
    .service-platform-tabs__list
    .our-services__tab-row--single {
    display: flex;
    grid-template-columns: unset;
  }

  body.smmrx-service-page .service-platform-tabs__list .our-services__tab {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 72px;
    min-height: 64px;
    margin-inline: 0;
    padding: 16px 28px;
  }

  body.smmrx-service-page .service-platform-tabs__list .our-services__tab-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
  }

  body.smmrx-service-page
    .service-platform-tabs__list
    .our-services__tab.our-services__tab--active
    .our-services__tab-icon {
    transform: none;
  }
}

body.smmrx-service-page .service-catalog-section {
  padding: 0;
}

body.smmrx-service-page
  .service-toolbar__filter
  .service-toolbar__filter-arrow {
  display: block;
  width: 11px;
  height: 12px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

body.smmrx-service-page .service-accordion {
  gap: 12px;
}

body.smmrx-service-page .service-accordion-item {
  border: 1px solid #dfe0e4;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

body.smmrx-service-page .service-accordion-item:not([data-open]) {
  border: 1px solid transparent;
  background: transparent;
}

body.smmrx-service-page .service-accordion-item[data-open] {
  border: 1px solid #dfe0e4;
}

body.smmrx-service-page .service-accordion-item__heading {
  margin: 0;
}

body.smmrx-service-page .service-accordion-item__trigger {
  box-sizing: border-box;
  min-height: 72px;
  height: 72px;
  padding: 20px;
  border: 1px solid #dfe0e4;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  color: #404040;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    border-radius 0.25s ease,
    box-shadow 0.25s ease;
}

body.smmrx-service-page
  .service-accordion-item[data-open]
  .service-accordion-item__trigger {
  border: 1px solid transparent;
  border-radius: 12px 12px 0 0;
  background: var(--brand);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08);
  color: var(--white);
}

body.smmrx-service-page .service-accordion-item__trigger:hover {
  color: #404040;
}

body.smmrx-service-page
  .service-accordion-item[data-open]
  .service-accordion-item__trigger:hover {
  color: var(--white);
}

body.smmrx-service-page .service-accordion-item__trigger:focus-visible {
  outline: 2px solid rgba(55, 82, 178, 0.45);
  outline-offset: 2px;
}

body.smmrx-service-page
  .service-accordion-item[data-open]
  .service-accordion-item__title {
  color: var(--white);
}

body.smmrx-service-page
  .service-accordion-item[data-open]
  .service-accordion-item__chevron-box {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

body.smmrx-service-page
  .service-accordion-item[data-open]
  .service-accordion-item__chevron-icon {
  filter: brightness(0) invert(1);
}

body.smmrx-service-page .service-accordion-item__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: #404040;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.smmrx-service-page .service-accordion-item__chevron {
  flex-shrink: 0;
  width: auto;
  height: auto;
  background: transparent;
  transform: none;
}

body.smmrx-service-page .service-accordion-item__chevron--open {
  transform: none;
}

body.smmrx-service-page .service-accordion-item__chevron-box {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: 4px;
  border-radius: 4px;
  background: #fff;
}

body.smmrx-service-page .service-accordion-item__chevron-icon {
  display: block;
  width: 11px;
  height: 12px;
}

body.smmrx-service-page .service-accordion-panel[hidden] {
  display: none !important;
  height: 0 !important;
  margin: 0;
  padding: 0;
  opacity: 0;
}

body.smmrx-service-page .service-accordion-panel.is-open {
  display: block;
  overflow: hidden;
  opacity: 1;
}

body.smmrx-service-page .service-accordion-panel-inner {
  padding: 0;
}

body.smmrx-service-page .service-table {
  background: #fff;
  border-radius: 0;
}

body.smmrx-service-page .service-table__head,
body.smmrx-service-page .service-table__row {
  grid-template-columns: 60px minmax(
      200px,
      1.35fr
    ) 164px 164px 164px 164px minmax(210px, 1fr);
  gap: 8px;
  padding: 10px 20px;
}

body.smmrx-service-page .service-table__head {
  min-height: 42px;
  background: transparent;
  border-bottom: 1px solid var(--border-light);
}

body.smmrx-service-page .service-table__head .service-table__cell {
  font-size: 14px;
  font-weight: 500;
  color: #3c3c3c;
}

body.smmrx-service-page .service-table__row {
  min-height: 72px;
  border-bottom: 1px solid var(--border-light);
}

body.smmrx-service-page .service-table__cell {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-body);
}

body.smmrx-service-page .service-table__cell--service {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.smmrx-service-page .service-table__refill-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 20px;
  border-radius: 8px;
  background: #f5f5f5;
  color: var(--text-body);
  white-space: nowrap;
}

body.smmrx-service-page .service-table__view-btn {
  min-width: 100px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: #fff;
  color: var(--text-body);
}

body.smmrx-service-page .service-table__buy-btn {
  min-width: 100px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
}

.service-toolbar-section__inner,
.service-catalog-section__inner {
  width: min(calc(100% - 2rem), 1376px);
  margin-inline: auto;
}

.service-toolbar-section {
  padding-bottom: 1rem;
}

.service-toolbar {
  position: relative;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  padding: 18px;
  border: 1px solid rgba(55, 82, 178, 0.12);
}

.service-toolbar__row {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.service-toolbar__filter-wrap {
  position: relative;
  flex: 0 1 min(420px, 44%);
  min-width: 0;
}

.service-toolbar__filter {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 56px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(120.46deg, #3752b2 0.37%, #6987f1 99.18%);
  color: #fff;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.service-toolbar__filter-label {
  flex: 1;
  text-align: left;
}

.service-toolbar__filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: max(100%, 280px);
  max-height: min(320px, calc(100vh - 220px));
  margin: 0;
  padding: 6px;
  overflow: auto;
  list-style: none;
  border-radius: 12px;
  border: 1px solid rgba(55, 82, 178, 0.25);
  background: #fff;
  box-shadow: 0 16px 40px rgba(14, 14, 14, 0.12);
}

.service-toolbar__filter-menu[hidden] {
  display: none !important;
}

.service-toolbar__filter-menu-item.is-active,
.service-toolbar__filter-menu-item:hover {
  background: rgba(55, 82, 178, 0.08);
  border-radius: 8px;
}

.service-toolbar__filter-menu-btn {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: var(--text-dark);
  cursor: pointer;
}

.service-toolbar__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  padding: 4px 4px 4px 16px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--border-light);
}

.service-toolbar__search-bg {
  display: none;
}

.service-toolbar__search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: var(--text-dark);
}

.service-toolbar__search-input:focus {
  outline: none;
}

.service-toolbar__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 48px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(120.46deg, #3752b2 0.37%, #6987f1 99.18%);
  cursor: pointer;
}

.service-catalog-section {
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.service-catalog-panel[hidden],
.service-catalog-panels[hidden] {
  display: none !important;
}

.service-catalog-empty {
  margin: 0;
  padding: 2rem 1rem;
  text-align: center;
  font-size: 1rem;
  color: var(--text-muted);
}

.service-catalog-empty[hidden] {
  display: none !important;
}

.service-accordion {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.service-accordion-item__trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid rgba(55, 82, 178, 0.12);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.service-accordion-item__title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.service-accordion-item__title {
  font-family: "Inter", sans-serif;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.125rem);
  font-weight: 600;
  color: var(--title);
  min-width: 0;
}

.service-accordion-item__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(120.46deg, #3752b2 0.37%, #6987f1 99.18%);
  transition: transform 0.25s ease;
}

.service-accordion-item__chevron--open {
  transform: rotate(180deg);
}

.service-accordion-panel {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition:
    height 0.3s ease,
    opacity 0.3s ease;
}

.service-accordion-panel.is-open {
  opacity: 1;
}

.service-accordion-panel-inner {
  padding-top: 20px;
}

.service-table {
  overflow: hidden;
  border-radius: 16px;
  background: #1a2340;
}

.service-table__head,
.service-table__row {
  display: grid;
  grid-template-columns:
    72px minmax(180px, 1.4fr) minmax(120px, 0.9fr) minmax(120px, 0.9fr)
    minmax(100px, 0.8fr) minmax(220px, 1.1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
}

.service-table__head {
  background: linear-gradient(120.46deg, #3752b2 0.37%, #6987f1 99.18%);
}

.service-table__head .service-table__cell {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

.service-table__row {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}

.service-table__row:last-child {
  border-bottom: 0;
}

.service-table__cell {
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: #fafafb;
}

.service-table__cell--service {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-table__rate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.service-table__cell--action {
  display: flex;
  justify-content: flex-end;
}

.service-table__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.service-table__view-btn,
.service-table__buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 0;
}

.service-table__view-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.service-table__buy-btn {
  background: linear-gradient(120.46deg, #3752b2 0.37%, #6987f1 99.18%);
  color: #fff;
}

.service-table__row-description {
  display: none;
}

.service-table__row[hidden],
.service-accordion-item[hidden] {
  display: none;
}

body.service-view-modal-open {
  overflow: hidden;
}

.service-view-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.service-view-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.service-view-modal[hidden]:not(.is-open) {
  display: none !important;
}

.service-view-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(14, 14, 14, 0.55);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.service-view-modal__wrap {
  position: relative;
  z-index: 1;
  width: min(100%, 648px);
}

.service-view-modal__dialog {
  position: relative;
  width: 100%;
  padding-top: 16px;
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
}

.service-view-modal.is-open .service-view-modal__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.service-view-modal__close {
  position: absolute;
  top: 0;
  right: -12px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(120.46deg, #3752b2 0.37%, #6987f1 99.18%);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.service-view-modal__close:hover {
  opacity: 0.92;
}

.service-view-modal__card {
  position: relative;
  overflow: auto;
  max-height: calc(100dvh - 48px);
  padding: 40px 32px 32px;
  border: 1px solid #e8e8e3;
  border-radius: 24px;
  background: #fff;
  color: #000;
  box-shadow: 0 2px 8px rgba(152, 152, 152, 0.16);
}

.service-view-modal__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.service-view-modal__header {
  margin-bottom: 8px;
}

.service-view-modal__body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.service-view-modal__card-bg {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0.35;
}

.service-view-modal__badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f0f2ff;
  color: var(--brand);
  font-size: 14px;
  font-weight: 600;
}

.service-view-modal__title {
  margin: 0 0 16px;
  font-family: "Parkinsans", sans-serif;
  font-size: 1.5rem;
  line-height: 1.35;
  color: #000;
}

.service-view-modal__details {
  color: #3c3c3c;
}

.service-view-modal__details p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #3c3c3c;
}

.service-view-modal__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 20px;
}

.service-view-modal__stat {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid #e8e8e3;
  border-radius: 12px;
  background: #f8fafc;
}

.service-view-modal__stat-label {
  display: block;
  font-size: 12px;
  color: #666;
}

.service-view-modal__stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

.service-view-modal__buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  text-decoration: none;
}

.service-view-modal__buy.btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

.service-view-modal__buy.btn--primary:hover {
  opacity: 0.92;
  color: var(--white);
}

.service-view-modal__buy.btn--primary img {
  filter: brightness(0) invert(1);
}

@media (max-width: 1023px) {
  body.smmrx-service-page .service-table {
    overflow-x: auto;
  }

  body.smmrx-service-page .service-table__head,
  body.smmrx-service-page .service-table__row {
    min-width: 1100px;
  }
}

@media (max-width: 767px) {
  body.smmrx-contact-page,
  body.smmrx-api-page,
  body.smmrx-service-page {
    --contact-panel-top: calc(var(--header-top) + 96px);
  }

  body.smmrx-service-page .service-toolbar__row {
    flex-direction: column;
    align-items: stretch;
  }

  body.smmrx-service-page .service-toolbar__filter {
    width: 100%;
  }

  body.smmrx-service-page .service-view-modal__stats {
    grid-template-columns: 1fr;
  }
}