/* Deferred marketing CSS — page-specific sections; load non-blocking on the homepage. */

/* ===== ABOUT US START ===== */
.about-value-card {
  --about-value-accent: #ff0047;
}

.about-value-card--1 {
  --about-value-accent: #ff0047;
}

.about-value-card--2 {
  --about-value-accent: #289af6;
}

.about-value-card--3 {
  --about-value-accent: #00ea9d;
}

.about-value-card::before {
  background: var(--about-value-accent);
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 0;
  transition: width 0.35s ease;
  width: 0;
  z-index: 1;
}

.about-value-card:hover::before {
 width: 100%;
}

.about-value-card__icon img {
 display: block;
 height: 40px;
 object-fit: contain;
 width: 40px;
}

.about-value-card__title {
 color: #171717;
 font-size: 1.125rem;
 font-weight: 600;
 line-height: 1.3;
 margin: 1rem 1rem 0.75rem 0;
}

.about-value-card__text {
 color: #4d4d4d;
 font-size: 13px;
 line-height: 1.5;
 margin: 0;
}

@media (min-width: 640px) {
 .about-value-card__icon img {
 height: 48px;
 width: 48px;
 }

 .about-value-card__title {
 font-size: 1.25rem;
 margin-bottom: 1.25rem;
 }

 .about-value-card__text {
 font-size: 14px;
 line-height: 1.5;
 }
}

@media (prefers-reduced-motion: reduce) {
 .about-value-card::before {
 transition: none;
 }
}

@media (max-width: 767px) {
 .about-page main .u-btn-cta,
 .about-page main a.rounded-full.bg-gradient-to-r,
 .about-page main .consultation-cta {
 box-sizing: border-box;
 height: 34px !important;
 min-height: 34px !important;
 padding-block: 0 !important;
 }
}
/* ===== ABOUT US END ===== */

/* ===== PRODUCT START ===== */
/* ─── Product Page Design System ─── */
/* Font stack matches site layout (index.php / layout/start.php): PP Mori + Roboto Flex */

.product-site {
  scroll-padding-top: 96px;
}

.product-layout {
  --product-font: var(--site-font);
  font-family: var(--product-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.product-layout main,
.product-layout .site-main {
  background: #f7f8fc;
}

/* Shared site container: 1280px + responsive gutters, same as index.php */
.product-page .container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--site-container-width, 1280px) + 2 * var(--site-gutter, 20px));
  margin-inline: auto;
  padding-inline: var(--site-gutter, 20px);
}

/* Product page sits under site header; social rail clears topbar */
.product-page {
  position: relative;
}

.site-main.product-layout-main > .product-page {
  grid-column: full;
}

.product-layout :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  span,
  a,
  button,
  input,
  textarea,
  select,
  label,
  li,
  td,
  th,
  div,
  small,
  strong,
  em
) {
  font-family: var(--product-font);
  font-style: normal;
}

.product-layout i[class*="bi"] {
  font-family: "bootstrap-icons" !important;
  font-style: normal;
}

.product-site header.header,
.product-site header.header a,
.product-site header.header button,
.product-site header.header li,
.product-site header.header span,
.product-site header.header p,
.product-layout footer,
.product-layout footer a,
.product-layout footer button,
.product-layout footer p,
.product-layout footer span,
.product-layout footer li,
.product-layout footer h1,
.product-layout footer h2,
.product-layout footer h3,
.product-layout footer h4,
.product-layout footer h5,
.product-layout footer h6,
.product-layout footer input {
  font-family: var(--product-font) !important;
  font-style: normal;
}

.product-site header.header {
  background: #ffffff;
}

.product-site header.header.sticky-active {
  background: #ffffff;
}

.product-page {
  /* Text theme aligned with index.php / :root tokens */
  --product-navy: #00003f;
  --product-accent: #2a4dfb;
  --product-accent-end: #7a5ff8;
  --product-accent-deep: #0026e3;
  --product-accent-light: #eef2ff;
  --product-text: #171717;
  --product-muted: #4d4d4d;
  --product-border: #e5e7eb;
  --product-bg: #f7f8fc;
  --product-dark: #0b0e14;
  --product-radius: 16px;
  --product-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --product-text-gradient: linear-gradient(90deg, #2a4dfb 0%, #7a5ff8 100%);
  --product-title-gradient: linear-gradient(180deg, #2f69fb 12%, #c56bff 100%);
  /* Typography — aligned with site :root tokens (--text-* / --site-font) */
  --product-fs-hero: clamp(40px, 6vw, 72px);
  --product-lh-hero: 82px;
  --product-fs-display: var(--text-2xl);
  --product-fs-section: clamp(1.75rem, 2.5vw, 2rem);
  --product-lh-section: 1.12;
  --product-fs-eyebrow: 13px;
  --product-fs-subtitle: var(--text-sm);
  --product-lh-subtitle: 1.55;
  --product-fs-body: var(--text-sm);
  --product-lh-body: 1.55;
  --product-fs-body-lg: var(--text-base);
  --product-lh-body-lg: 1.55;
  --product-fs-card-title: var(--text-base);
  --product-lh-card-title: 1.25;
  --product-fs-label: var(--text-sm);
  --product-icon-bg-soft: color-mix(in srgb, var(--product-bg) 88%, var(--product-accent) 12%);
  --product-icon-bg-card: color-mix(in srgb, #ffffff 72%, var(--product-bg) 28%);
  --product-icon-bg-active: color-mix(in srgb, var(--product-bg) 82%, var(--product-accent) 18%);
  --product-icon-bg-dark: transparent;
  position: relative;
  overflow-x: hidden;
  background: var(--product-bg);
  font-size: var(--product-fs-body);
  line-height: var(--product-lh-body);
}

.product-page::before {
  display: none;
}

.product-page::after {
  display: none;
}

.product-page > * {
  position: relative;
  z-index: 1;
}

/* ─── Shared ─── */
.product-eyebrow {
  display: inline-block;
  font-family: "Pragati Narrow", sans-serif;
  font-style: normal;
  font-size: var(--product-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 100%;
  margin-bottom: 12px;
  background: var(--product-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.product-eyebrow--light {
  background: var(--product-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.product-section {
  padding: 80px 0;
}

.product-section,
.product-partners,
.product-productivity,
.product-cta {
  background: transparent;
}

.product-section__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

.product-section__title {
  font-size: var(--product-fs-section);
  font-weight: 600;
  color: var(--product-text);
  line-height: var(--product-lh-section);
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}

.product-section__title--left {
  text-align: left;
}

.product-section__title--light {
  color: #fff;
}

.product-section__subtitle {
  font-size: var(--product-fs-subtitle);
  color: var(--product-muted);
  line-height: var(--product-lh-subtitle);
  margin: 0;
}

.product-section__cta {
  text-align: center;
  margin-top: 48px;
}

.product-gradient-text {
  background: var(--product-title-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.product-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--product-accent);
  flex-shrink: 0;
}

/* ─── Buttons (aligned with site .sitebtn) ─── */
.product-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 11px;
  font-size: var(--text-sm);
  line-height: 1.25;
  font-weight: 700;
  font-family: var(--product-font);
  font-style: normal;
  text-decoration: none;
  border: none;
  cursor: pointer;
  min-width: 214px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.product-btn:hover {
  transform: translateY(-1px);
}

.product-btn--primary {
  background: var(--product-navy);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 51, 0.25);
}

.product-btn--primary:hover {
  background: #1a1a4d;
  color: #fff;
}

.product-btn--secondary {
  background: #fff;
  color: var(--product-text);
  border: 1px solid var(--product-border);
}

.product-btn--secondary:hover {
  border-color: #d1d5db;
  color: var(--product-text);
}

.product-btn--gradient {
  background: linear-gradient(90deg, #2563eb 0%, #8b5cf6 100%);
  color: #fff;
  width: 100%;
}

.product-btn--gradient:hover {
  color: #fff;
  box-shadow: 0 6px 20px rgba(77, 93, 251, 0.35);
}

.product-btn--outline {
  background: #f3f4f6;
  color: var(--product-accent);
  width: 100%;
}

.product-btn--outline:hover {
  background: #e5e7eb;
  color: var(--product-accent);
}

.product-demo-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #e8e8e8 !important;
  color: #000 !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  width: auto !important;
}

.product-demo-btn:hover {
  background-color: #dcdcdc !important;
  color: #000 !important;
}

.product-btn--lg {
  padding: 14px 28px;
  font-size: var(--text-sm);
}

/* ─── Hero ─── */
.product-hero {
  position: relative;
  padding: 0;
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: transparent;
  overflow: hidden;
}

.product-hero--outreach {
  --product-hero-card: rgba(12, 20, 48, 0.72);
  --product-hero-card-border: rgba(120, 150, 255, 0.18);
  --product-fs-hero: clamp(36px, 5vw, 96px);
  --product-lh-hero: 1;
  --product-hero-title-gradient: linear-gradient(90deg, #2a4dfb 0%, #7a5ff8 33.65%, #efebff 100%);
  --product-hero-title-soft-gradient: linear-gradient(90deg, #dad2fe 0%, #ffffff 100%);
  background: transparent;
}

.product-top-shell {
  position: relative;
  background-color: #050816;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.product-top-shell > * {
  position: relative;
  z-index: 1;
}

.product-social {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: auto;
}

.product-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: var(--product-fs-body);
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(13, 27, 42, 0.08);
  transition: color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.product-social a:hover {
  color: var(--product-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.2);
}

.product-hero__container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  justify-content: flex-start;
  padding: clamp(36px, 5vw, 56px) 16px clamp(24px, 3vw, 36px);
  text-align: center;
}

.product-hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px 16px;
  border: 1px solid rgba(148, 178, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: clamp(28px, 4vw, 40px);
  backdrop-filter: blur(6px);
}

.product-hero__badge-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.product-hero__headline-wrap {
  position: relative;
  width: min(100%, 1020px);
  margin: 0 auto 28px;
}

.product-hero__title {
  position: relative;
  z-index: 2;
  margin: 0;
  line-height: 1;
  font-style: normal;
}

.product-hero--outreach .product-hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.25vw, 18px);
  background: var(--product-hero-title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-align: center;
}

.product-hero__title-line {
  display: block;
  font-size: var(--product-fs-hero);
  font-weight: 600;
  font-style: normal;
  color: #fff;
  letter-spacing: -0.03em;
  font-family: var(--product-font);
  line-height: var(--product-lh-hero);
}

.product-hero--outreach .product-hero__title-line {
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  color: transparent;
}

.product-hero__title-accent {
  background: linear-gradient(180deg, #b8c8ff 0%, #8ea4ff 42%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.product-hero--outreach .product-hero__title-accent {
  background: none;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.product-hero__title-soft {
  background: var(--product-hero-title-soft-gradient, linear-gradient(90deg, #dad2fe 0%, #ffffff 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.product-hero__subtitle {
  font-size: 18px;
  color: rgba(226, 232, 255, 0.78);
  line-height: 28px;
  font-weight: 400;
  font-style: normal;
  max-width: 760px;
  margin: 0 auto 32px;
  font-family: var(--product-font);
  letter-spacing: -0.01em;
}

.product-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 5vw, 52px);
}

.product-hero__actions .product-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 11px;
  min-width: 214px;
  padding: 15px 30px;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.product-hero__actions .product-btn:hover {
  transform: translateY(-1px);
}

.product-hero__actions .product-btn--primary {
  background: var(--product-accent);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 8px 24px rgba(42, 77, 251, 0.34);
}

.product-hero__actions .product-btn--primary:hover {
  background: var(--product-accent-deep);
  color: #fff;
}

.product-hero__actions .product-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
}

.product-hero__actions .product-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.product-hero__divider {
  display: block;
  width: min(100%, 1280px);
  max-width: 1280px;
  height: 0;
  margin: 0 auto clamp(24px, 3vw, 36px);
  padding: 0;
  border: 0;
  border-top: 1px solid;
  border-image-source: linear-gradient(
    90deg,
    rgba(42, 77, 251, 0.1) 0%,
    rgba(42, 77, 251, 0.5) 50%,
    rgba(102, 91, 249, 0.5) 75%,
    rgba(102, 91, 249, 0.1) 100%
  );
  border-image-slice: 1;
}

.product-hero__chips {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 48px);
  width: min(100%, 920px);
}

.product-hero__chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 108px;
}

.product-hero__chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.product-hero__chip-icon img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}

.product-hero__chip-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(226, 232, 255, 0.82);
  line-height: 1.3;
}

.product-hero__banner {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 1006px);
  aspect-ratio: 1006 / 498;
  margin: clamp(28px, 5vw, 48px) auto 0;
}

.product-hero__banner-back {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: 1;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.product-hero__banner-stage {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  width: 79.124%;
  max-width: 796px;
  aspect-ratio: 796 / 448;
}

.product-hero__banner-gif {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 7.78px;
  object-fit: cover;
}

.product-hero__banner-tile {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.product-hero__banner-tile--top-left {
  top: -15.41%;
  left: -30.57%;
  width: min(240px, 42vw);
}

.product-hero__banner-tile--top-left .product-hero__banner-tile-image {
  width: 100%;
  height: auto;
  aspect-ratio: 240 / 138.111;
  object-fit: contain;
}

.product-hero__banner-tile--bottom-left {
  top: 47.52%;
  left: -27.52%;
  width: min(210px, 38vw);
}

.product-hero__banner-tile--top-right {
  top: -13.03%;
  right: -20.73%;
  width: min(210px, 40vw);
}

.product-hero__banner-tile--top-right .product-hero__banner-tile-image {
  width: 100%;
  height: auto;
  aspect-ratio: 210 / 230;
  object-fit: contain;
}

.product-hero__banner-tile--bottom-right {
  top: 88.84%;
  right: -30.24%;
  width: min(340px, 44vw);
}

.product-hero__banner-tile--bottom-right .product-hero__banner-tile-image {
  width: 100%;
  height: auto;
  aspect-ratio: 340 / 150;
  object-fit: contain;
}

.product-hero__banner-tile-image {
  display: block;
  width: 100%;
  height: auto;
}

.product-hero__banner-tile-card {
  border: 1px solid rgba(120, 150, 255, 0.22);
  border-radius: 14px;
  background: rgba(10, 18, 42, 0.82);
  box-shadow: 0 14px 36px rgba(2, 8, 28, 0.38);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 14px 16px;
}

.product-hero__banner-tile-card--follow-up {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  padding: 10px 12px;
  border: 1px solid #ffffff0f;
  border-radius: 21px;
  background: linear-gradient(180deg, rgba(0, 38, 227, 0.14) 0%, rgba(0, 38, 227, 0.14) 78.72%);
  box-shadow: 3px 7px 22px 0 #2a4dfb24;
  backdrop-filter: blur(46px);
  -webkit-backdrop-filter: blur(46px);
}

.product-hero__banner-tile-head--follow-up {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 6px;
}

.product-hero__banner-tile-card--follow-up .product-hero__banner-tile-icon--square {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.product-hero__banner-tile-title--follow-up {
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
}

.product-hero__banner-tile-card--follow-up .product-hero__banner-tile-copy {
  font-size: 10px;
  line-height: 1.35;
}

.product-hero__banner-tile-card--deal {
  padding-bottom: 0;
  overflow: hidden;
}

.product-hero__banner-tile-card--companies {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 14px 12px 14px 16px;
  background: rgba(6, 12, 32, 0.92);
}

.product-hero__banner-tile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.product-hero__banner-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 12px;
}

.product-hero__banner-tile-icon--round {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2a4dfb 0%, #22d3ee 100%);
}

.product-hero__banner-tile-icon--square {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2a4dfb 0%, #22d3ee 100%);
}

.product-hero__banner-tile-icon--success {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  font-size: 16px;
}

.product-hero__banner-tile-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}

.product-hero__banner-tile-lead-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.product-hero__banner-tile-lead-body img {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.product-hero__banner-tile-lead-body strong {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

.product-hero__banner-tile-lead-body p,
.product-hero__banner-tile-copy {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(226, 232, 255, 0.68);
}

.product-hero__banner-tile-meta {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(226, 232, 255, 0.72);
}

.product-hero__banner-tile-amount {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.product-hero__banner-tile-chart {
  width: calc(100% + 32px);
  height: 92px;
  margin: 8px -16px 0;
  overflow: hidden;
}

.product-hero__banner-tile-chart img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.product-hero__banner-tile-companies-copy {
  flex: 1;
  min-width: 0;
}

.product-hero__banner-tile-label {
  margin: 0 0 6px;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(226, 232, 255, 0.62);
}

.product-hero__banner-tile-value {
  margin: 0 0 4px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.product-hero__banner-tile-change {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: #60a5fa;
}

.product-hero__banner-tile-companies-chart {
  display: block;
  width: 112px;
  height: auto;
  align-self: flex-end;
  object-fit: contain;
  opacity: 0.95;
}

/* ─── How It Works ─── */
.product-how-it-works {
  position: relative;
  padding: clamp(12px, 2vw, 20px) 0 clamp(72px, 8vw, 112px);
}

.product-how-it-works__container {
  position: relative;
  z-index: 2;
}

.product-how-it-works__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(36px, 5vw, 56px);
}

.product-how-it-works__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border: 1px solid rgba(148, 178, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #9C88FA;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  backdrop-filter: blur(6px);
}

.product-how-it-works__title {
  margin: 0 0 16px;
  font-size: var(--product-fs-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #fff;
}

.product-how-it-works__title-accent {
  background: linear-gradient(180deg, #b8c8ff 0%, #8ea4ff 42%, #c56bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.product-how-it-works__subtitle {
  margin: 0;
  font-size: var(--product-fs-body-lg);
  line-height: var(--product-lh-body-lg);
  color: rgba(226, 232, 255, 0.78);
}

.product-how-it-works__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.product-how-it-works__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 236px;
  min-height: 236px;
  padding: 24px;
  border: none;
  border-radius: 17.78px;
  background: rgba(8, 14, 36, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(2, 8, 28, 0.18);
}

.product-how-it-works__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 17.78px;
  padding: 1.5px;
  background: linear-gradient(
    41.87deg,
    #B6CBDC 1.99%,
    #DCE7EE 23.87%,
    #34628C 41.74%,
    #5B85A8 58.26%,
    #000026 76.13%,
    #E7EEF8 98.01%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.product-how-it-works__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.08);
}

.product-how-it-works__icon img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}

.product-how-it-works__card h3 {
  margin: 0;
  font-size: var(--product-fs-card-title);
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}

.product-how-it-works__card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(226, 232, 255, 0.72);
}

/* ─── Add-Ons ─── */
.product-add-ons {
  position: relative;
  padding: clamp(64px, 8vw, 96px) 0 clamp(32px, 4vw, 48px);
  background-color: #f8faff;
  background-image: url("/assets/product/add_ons_bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.product-add-ons__container {
  position: relative;
  z-index: 1;
}

.product-add-ons__header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(40px, 5vw, 56px);
}

.product-add-ons__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(42, 77, 251, 0.08);
  color: var(--product-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.product-add-ons__title {
  margin: 0 0 16px;
  font-size: var(--product-fs-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--product-text);
}

.product-add-ons__title-accent {
  background: linear-gradient(90deg, #2a4dfb 0%, #7a5ff8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.product-add-ons__subtitle {
  margin: 0;
  font-size: var(--product-fs-body-lg);
  line-height: var(--product-lh-body-lg);
  color: var(--product-muted);
}

.product-add-ons__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.product-add-ons__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 180px;
  padding: 24px 22px;
  border: 1px solid rgba(42, 77, 251, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(42, 77, 251, 0.06);
}

.product-add-ons__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(42, 77, 251, 0.08);
}

.product-add-ons__icon img {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
}

.product-add-ons__card h3 {
  margin: 0;
  font-size: var(--product-fs-card-title);
  font-weight: 600;
  line-height: 1.25;
  color: var(--product-text);
}

.product-add-ons__card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--product-muted);
}

.product-add-ons__cta {
  text-align: center;
  margin-top: clamp(36px, 5vw, 48px);
}

.product-add-ons__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--product-fs-body-lg);
  font-weight: 600;
  color: var(--product-accent);
  text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
}

.product-add-ons__link:hover {
  color: var(--product-accent-deep);
  gap: 12px;
}

.product-add-ons__link i {
  font-size: 14px;
}

/* ─── How The-Suave Works for Business ─── */
.product-business-works {
  position: relative;
  padding: clamp(64px, 8vw, 96px) 0 clamp(72px, 9vw, 112px);
  background: linear-gradient(180deg, #f8faff 0%, #f4f8fb 100%);
}

.product-business-works__container {
  position: relative;
  z-index: 1;
}

.product-business-works__header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto clamp(40px, 5vw, 56px);
}

.product-business-works__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.12);
  color: #0f766e;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.product-business-works__title {
  margin: 0 0 16px;
  font-size: var(--product-fs-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--product-text);
}

.product-business-works__title-accent {
  background: linear-gradient(90deg, #2a4dfb 0%, #7a5ff8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.product-business-works__subtitle {
  margin: 0;
  font-size: var(--product-fs-body-lg);
  line-height: var(--product-lh-body-lg);
  color: var(--product-muted);
}

.product-business-works__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.product-business-works__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 280px;
  padding: 24px;
  border: 1px solid rgba(42, 77, 251, 0.08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(42, 77, 251, 0.06);
}

.product-business-works__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.product-business-works__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.product-business-works__icon img {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
}

.product-business-works__icon img[src$=".png"] {
  width: 24px;
  height: 24px;
}

.product-business-works__body {
  flex: 1;
  min-width: 0;
}

.product-business-works__body h3 {
  margin: 0 0 8px;
  font-size: var(--product-fs-card-title);
  font-weight: 600;
  line-height: 1.25;
  color: var(--product-text);
}

.product-business-works__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--product-muted);
}

.product-business-works__integrations {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
}

.product-business-works__integration-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(42, 77, 251, 0.08);
  box-shadow: 0 2px 8px rgba(42, 77, 251, 0.08);
}

.product-business-works__integration-item img {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}

.product-business-works__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.product-business-works__tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(42, 77, 251, 0.08);
  color: var(--product-accent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.product-business-works__cta {
  text-align: center;
  margin-top: clamp(36px, 5vw, 48px);
}

.product-business-works__btn {
  min-width: 220px;
  gap: 8px;
  background: var(--product-accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(42, 77, 251, 0.28);
}

.product-business-works__btn:hover {
  background: var(--product-accent-deep);
  color: #fff;
}

/* ─── Data & Privacy ─── */
.product-data-privacy {
  position: relative;
  padding: clamp(64px, 8vw, 96px) 0;
  background-color: #050816;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.product-data-privacy__container {
  position: relative;
  z-index: 1;
}

.product-data-privacy__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.product-data-privacy__content {
  max-width: 620px;
}

.product-data-privacy__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border: 1px solid rgba(122, 95, 248, 0.45);
  border-radius: 999px;
  background: rgba(122, 95, 248, 0.12);
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.product-data-privacy__title {
  margin: 0 0 20px;
  font-size: var(--product-fs-section);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.product-data-privacy__title-line {
  display: block;
}

.product-data-privacy__title-line--soft {
  background: linear-gradient(180deg, #d8dcff 0%, #a8b4ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.product-data-privacy__title-line--bright {
  background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.product-data-privacy__description {
  margin: 0 0 28px;
  font-size: var(--product-fs-body-lg);
  line-height: var(--product-lh-body-lg);
  color: rgba(226, 232, 255, 0.78);
}

.product-data-privacy__list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-data-privacy__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(226, 232, 255, 0.82);
}

.product-data-privacy__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.16);
  color: #38bdf8;
  flex-shrink: 0;
}

.product-data-privacy__check i {
  font-size: 11px;
}

.product-data-privacy__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-data-privacy__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 999px;
  background: rgba(8, 16, 40, 0.72);
  color: #7dd3fc;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.product-data-privacy__link:hover {
  border-color: rgba(125, 211, 252, 0.65);
  color: #bae6fd;
  background: rgba(14, 24, 56, 0.88);
}

.product-data-privacy__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-data-privacy__visual img {
  width: min(100%, 560px);
  height: auto;
  display: block;
  object-fit: contain;
}

/* ─── Case Study ─── */
.product-case-study {
  padding: clamp(64px, 8vw, 96px) 0 clamp(32px, 4vw, 48px);
  background: #f8faff;
}

.product-case-study__container {
  position: relative;
  z-index: 1;
}

.product-case-study__header {
  text-align: center;
  max-width: 1030px;
  margin: 0 auto clamp(36px, 5vw, 56px);
}

.product-case-study__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(122, 95, 248, 0.1);
  color: #7a5ff8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.product-case-study__title {
  max-width: 1030px;
  margin: 0 auto 16px;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--product-text);
}

.product-case-study__title-accent {
  background: linear-gradient(90deg, #3450FB 46.63%, #9B86FA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.product-case-study__subtitle {
  margin: 0;
  font-size: var(--product-fs-body-lg);
  line-height: var(--product-lh-body-lg);
  color: var(--product-muted);
}

.product-case-study__card {
  border: 1px solid rgba(42, 77, 251, 0.08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.product-case-study__body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 48px);
  padding: clamp(28px, 4vw, 40px);
}

.product-case-study__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.product-case-study__brand img {
  display: block;
  width: auto;
  height: 40px;
  object-fit: contain;
}

.product-case-study__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-case-study__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(42, 77, 251, 0.08);
  color: var(--product-accent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.product-case-study__tag i {
  font-size: 11px;
}

.product-case-study__intro {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--product-muted);
}

.product-case-study__block + .product-case-study__block {
  margin-top: 28px;
}

.product-case-study__block-title {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.product-case-study__block-title--challenge {
  color: #7a5ff8;
}

.product-case-study__block-title--solution {
  color: var(--product-accent);
}

.product-case-study__block-intro {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--product-muted);
}

.product-case-study__solution-intro {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--product-muted);
}

.product-case-study__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-case-study__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--product-muted);
}

.product-case-study__list li::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-top: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.product-case-study__list--challenge li::before {
  background: black;
}

.product-case-study__list--solution li::before {
  background: black;
}

.product-case-study__results {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-case-study__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 275px));
  gap: 16px;
}

.product-case-study__metric {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 275px;
  height: 320px;
  padding: 18px 18px 52px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16.78px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  opacity: 1;
}

.product-case-study__metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  margin-bottom: 6px;
}

.product-case-study__metric--blue .product-case-study__metric-icon {
  background: #2a4dfb;
}

.product-case-study__metric--purple .product-case-study__metric-icon {
  background: #7a5ff8;
}

.product-case-study__metric--teal .product-case-study__metric-icon {
  background: #14b8a6;
}

.product-case-study__metric--orange .product-case-study__metric-icon {
  background: #f97316;
}

.product-case-study__metric-icon img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}

.product-case-study__metric-value {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.product-case-study__metric--blue .product-case-study__metric-value {
  color: #2a4dfb;
}

.product-case-study__metric--purple .product-case-study__metric-value {
  color: #7a5ff8;
}

.product-case-study__metric--teal .product-case-study__metric-value {
  color: #14b8a6;
}

.product-case-study__metric--orange .product-case-study__metric-value {
  color: #f97316;
}

.product-case-study__metric-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--product-text);
}

.product-case-study__metric-caption {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #94a3b8;
}

.product-case-study__metric-chart {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  opacity: 0.45;
  pointer-events: none;
}

.product-case-study__metric-chart--image {
  opacity: 1;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
}

.product-case-study__metric-chart--strip {
  width: 100%;
  height: 175px;
  background-position: center bottom;
  background-size: 100% 100%;
}

.product-case-study__metric-chart--full {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 275px;
  max-width: 100%;
  height: 340px;
  border-radius: 16.78px;
  background-position: center;
  background-size: cover;
}

.product-case-study__metric--has-chart-strip {
  padding-bottom: 175px;
}

.product-case-study__metric--has-chart-full > :not(.product-case-study__metric-chart) {
  position: relative;
  z-index: 1;
}

.product-case-study__metric--blue .product-case-study__metric-chart:not(.product-case-study__metric-chart--image):not(.product-case-study__metric-chart--svg) {
  background:
    linear-gradient(180deg, rgba(42, 77, 251, 0) 0%, rgba(42, 77, 251, 0.12) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 56' preserveAspectRatio='none'%3E%3Cpath d='M0 44 L40 36 L80 40 L120 24 L160 28 L200 12 L240 18 L240 56 L0 56 Z' fill='%232A4DFB' fill-opacity='0.18'/%3E%3C/svg%3E")
    center bottom / 100% 100% no-repeat;
}

.product-case-study__metric--purple .product-case-study__metric-chart:not(.product-case-study__metric-chart--image):not(.product-case-study__metric-chart--svg) {
  background:
    linear-gradient(180deg, rgba(122, 95, 248, 0) 0%, rgba(122, 95, 248, 0.12) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 56' preserveAspectRatio='none'%3E%3Cpath d='M0 38 L40 30 L80 34 L120 20 L160 24 L200 10 L240 16 L240 56 L0 56 Z' fill='%237A5FF8' fill-opacity='0.18'/%3E%3C/svg%3E")
    center bottom / 100% 100% no-repeat;
}

.product-case-study__metric--teal .product-case-study__metric-chart:not(.product-case-study__metric-chart--image):not(.product-case-study__metric-chart--svg) {
  background:
    linear-gradient(180deg, rgba(20, 184, 166, 0) 0%, rgba(20, 184, 166, 0.12) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 56' preserveAspectRatio='none'%3E%3Cpath d='M0 42 L40 34 L80 38 L120 26 L160 30 L200 16 L240 22 L240 56 L0 56 Z' fill='%2314B8A6' fill-opacity='0.18'/%3E%3C/svg%3E")
    center bottom / 100% 100% no-repeat;
}

.product-case-study__metric--orange .product-case-study__metric-chart:not(.product-case-study__metric-chart--image):not(.product-case-study__metric-chart--svg) {
  background:
    linear-gradient(180deg, rgba(249, 115, 22, 0) 0%, rgba(249, 115, 22, 0.12) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 56' preserveAspectRatio='none'%3E%3Cpath d='M0 40 L40 32 L80 36 L120 22 L160 26 L200 14 L240 20 L240 56 L0 56 Z' fill='%23F97316' fill-opacity='0.18'/%3E%3C/svg%3E")
    center bottom / 100% 100% no-repeat;
}

.product-case-study__metric-chart--svg {
  overflow: visible;
  opacity: 1;
}

.product-case-study__metric-chart--svg svg {
  display: block;
  width: 100%;
  height: 100%;
}

.product-case-study__metric-chart-dot {
  opacity: 0;
  pointer-events: none;
}

.product-case-study__metric-chart--svg.is-armed .product-case-study__metric-chart-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.product-case-study__metric-chart--svg.is-armed .product-case-study__metric-chart-area {
  clip-path: inset(0 100% 0 0);
}

.product-case-study__metric-chart--svg.is-armed.is-playing .product-case-study__metric-chart-area {
  animation: product-metric-chart-fill 1.35s ease-out forwards;
}

.product-case-study__metric-chart--svg.is-glowing .product-case-study__metric-chart-dot {
  opacity: 1;
}

@keyframes product-metric-chart-fill {
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .product-case-study__metric-chart--svg.is-armed .product-case-study__metric-chart-line,
  .product-case-study__metric-chart--svg.is-armed .product-case-study__metric-chart-area {
    clip-path: none;
    stroke-dashoffset: 0;
    animation: none;
  }

  .product-case-study__metric-chart-dot {
    opacity: 0;
    animation: none;
  }
}

.product-case-study__testimonial {
  width: 100%;
  margin: 0;
}

.product-case-study__quote {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 20px;
  row-gap: 18px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 180px;
  margin: 0;
  padding: 32px 40px;
  border-radius: 16.78px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  opacity: 1;
}

.product-case-study__quote-mark {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  display: block;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: contain;
}

.product-case-study__quote-text {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #334155;
}

.product-case-study__quote-avatar {
  grid-column: 1;
  grid-row: 2;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.product-case-study__quote-meta {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--product-muted);
}

.product-case-study__quote-meta strong {
  color: var(--product-text);
  font-weight: 600;
}

.product-case-study__quote-meta > span {
  color: var(--product-accent);
  font-weight: 500;
}

.product-case-study__quote-company {
  color: inherit;
  font-weight: inherit;
}

.product-case-study__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  min-height: 180px;
  margin: clamp(24px, 4vw, 32px) auto 0;
  padding: 32px 40px;
  border: 1px solid rgba(42, 77, 251, 0.1);
  border-radius: 16.78px;
  background: #fff;
}

.product-case-study__cta-copy h3 {
  margin: 0 0 6px;
  font-size: var(--product-fs-section);
  font-weight: 600;
  line-height: 1.25;
  color: var(--product-text);
}

.product-case-study__cta-copy p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--product-muted);
}

.product-case-study__cta-btn {
  flex-shrink: 0;
  min-width: 210px;
  gap: 8px;
}

/* ─── Pricing Offer ─── */
.product-pricing-offer {
  padding: clamp(24px, 3vw, 36px) 0 clamp(72px, 9vw, 112px);
  background-image: url("/assets/product/add_ons_bg.png");

}

.product-pricing-offer__container {
  position: relative;
  z-index: 1;
}

.product-pricing-offer__header {
  text-align: center;
  max-width: 709px;
  margin: 0 auto clamp(40px, 5vw, 56px);
}

.product-pricing-offer__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(42, 77, 251, 0.08);
  color: var(--product-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.product-pricing-offer__title {
  max-width: 709px;
  margin: 0 auto 16px;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--product-text);
}

.product-pricing-offer__title-accent {
  background: linear-gradient(90deg, #3450FB 46.63%, #9B86FA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.product-pricing-offer__subtitle {
  margin: 0;
  font-size: var(--product-fs-body-lg);
  line-height: var(--product-lh-body-lg);
  color: var(--product-muted);
}

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

.product-pricing-offer__plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
  padding: 24px 22px 22px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.product-pricing-offer__plan--featured {
  border-color: rgba(42, 77, 251, 0.28);
  box-shadow: 0 16px 40px rgba(42, 77, 251, 0.12);
}

.product-pricing-offer__plan-badge {
  position: absolute;
  top: 8px;
  left: 80%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(42, 77, 251, 0.1);
  color: var(--product-accent);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.product-pricing-offer__plan-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14.91px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
}

.product-pricing-offer__plan-icon img {
  width: 44px;
  height: 44px;
  display: block;
  margin: 0;
  object-fit: contain;
  object-position: center;
}

.product-pricing-offer__plan-name {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--product-text);
}

.product-pricing-offer__plan-tagline {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.45;
  color: #94a3b8;
}

.product-pricing-offer__plan-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 12px;
}

.product-pricing-offer__plan-amount {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--product-text);
}

.product-pricing-offer__plan-period {
  font-size: 14px;
  font-weight: 500;
  color: #94a3b8;
}

.product-pricing-offer__plan-audience {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--product-muted);
}

.product-pricing-offer__plan-features {
  flex: 1;
  margin-bottom: 20px;
}

.product-pricing-offer__plan-features-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--product-text);
}

.product-pricing-offer__plan-features ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-pricing-offer__plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--product-muted);
}

.product-pricing-offer__plan-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  flex-shrink: 0;
}

.product-pricing-offer__plan-check i {
  font-size: 10px;
}

.product-pricing-offer__plan-btn {
  width: 100%;
  min-width: 0;
  margin-top: auto;
  gap: 8px;
  padding: 14px 20px;
  font-size: 15px;
  border-radius: 12px;
}

.product-pricing-offer__plan-btn--outline {
  background: #fff;
  color: var(--product-accent);
  border: 1px solid rgba(42, 77, 251, 0.35);
  box-shadow: none;
}

.product-pricing-offer__plan-btn--outline:hover {
  background: rgba(42, 77, 251, 0.04);
  color: var(--product-accent-deep);
  border-color: rgba(42, 77, 251, 0.55);
  transform: translateY(-1px);
}

.product-pricing-offer__plan--featured .product-btn--gradient {
  background: linear-gradient(90deg, #2a4dfb 0%, #7a5ff8 100%);
  border: none;
  box-shadow: 0 8px 20px rgba(42, 77, 251, 0.24);
}

/* ─── Sales CTA ─── */
.product-sales-cta {
  position: relative;
  padding: clamp(72px, 9vw, 112px) 0;
  background-color: #050816;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.product-sales-cta__container {
  position: relative;
  z-index: 1;
}

.product-sales-cta__shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}

.product-sales-cta__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.product-sales-cta__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border: 1px solid rgba(122, 95, 248, 0.45);
  border-radius: 999px;
  background: rgba(122, 95, 248, 0.12);
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.product-sales-cta__title {
  max-width: 665px;
  margin: 0 auto 18px;
  font-family: var(--product-font);
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.product-sales-cta__title-lead {
  background: linear-gradient(90deg, #dad2fe 0%, #ffffff 42.53%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.product-sales-cta__title-build {
  background: linear-gradient(90deg, #ffffff 0%, #3450fb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.product-sales-cta__title-accent {
  display: block;
  background: linear-gradient(90deg, #3450fb 46.63%, #9b86fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.product-sales-cta__description {
  margin: 0 auto 28px;
  max-width: 589px;
  font-family: var(--product-font);
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0;
  text-align: center;
  color: rgba(226, 232, 255, 0.78);
}

.product-sales-cta__btn {
  min-width: 220px;
  gap: 8px;
  background: linear-gradient(90deg, #2a4dfb 0%, #4f63f7 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(42, 77, 251, 0.35);
}

.product-sales-cta__btn:hover {
  background: linear-gradient(90deg, #2343e8 0%, #4356ef 100%);
  color: #fff;
}

.product-sales-cta__service-link {
  margin: 18px auto 0;
  max-width: 589px;
  font-family: var(--product-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
  color: rgba(226, 232, 255, 0.72);
}

.product-sales-cta__service-link a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.product-sales-cta__service-link a:hover {
  color: #dbeafe;
}

.product-sales-cta__float {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 210px;
  pointer-events: none;
}

.product-sales-cta__float--deal {
  width: 224px;
  left: max(0px, calc(50% - 550px));
}

.product-sales-cta__float--insight {
  width: 210px;
opacity: 1;
border-radius: 21px;
border-width: 1px;
right: max(0px, calc(50% - 580px));
}

.product-sales-cta__deal-card,
.product-sales-cta__insight-card {
  border: 1px solid rgba(148, 178, 255, 0.18);
  border-radius: 18px;
  background: rgba(8, 14, 36, 0.72);
  box-shadow: 0 18px 40px rgba(2, 8, 28, 0.28);
  backdrop-filter: blur(12px);
}

.product-sales-cta__deal-card {
  padding: 16px 16px 0;
  overflow: hidden;
}

.product-sales-cta__deal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.product-sales-cta__deal-head img {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.product-sales-cta__deal-company {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(226, 232, 255, 0.72);
}

.product-sales-cta__deal-amount {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.product-sales-cta__deal-category {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(226, 232, 255, 0.58);
}

.product-sales-cta__deal-chart {
  width: 224px;
  height: 125px;
  margin: 0 -16px;
  overflow: hidden;
  opacity: 1;
}

.product-sales-cta__deal-chart img {
  display: block;
  width: 224px;
  height: 125px;
  object-fit: cover;
  object-position: center bottom;
}

.product-sales-cta__insight-card {
  padding: 18px;
}

.product-sales-cta__insight-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.product-sales-cta__insight-head strong {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.product-sales-cta__insight-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #2a4dfb;
  flex-shrink: 0;
}

.product-sales-cta__insight-icon img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}

.product-sales-cta__insight-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(226, 232, 255, 0.72);
}

/* ─── Stats ─── */
.product-page section[id] {
  scroll-margin-top: 96px;
}

/* ─── Partners ─── */
.product-partners {
  padding: 40px 0 20px;
  background: transparent;
  overflow: hidden;
}

.product-partners + .product-section {
  padding-top: 44px;
}

.product-partners__marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

.product-partners__track {
  display: flex;
  align-items: center;
  gap: 120px;
  width: max-content;
  animation: product-marquee 38s linear infinite;
  will-change: transform;
}

.product-partners__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-partners__logo {
  width: 100px;
  height: auto;
  flex-shrink: 0;
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.product-partners__logo:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

@keyframes product-marquee {
  0% {
    transform: translateX(0);
  }

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

@media (prefers-reduced-motion: reduce) {
  .product-partners__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 48px 120px;
    padding: 0 24px;
  }
}

/* ─── Feature Cards ─── */
.product-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.product-feature-card {
  background: #fff;
  border-radius: var(--product-radius);
  padding: 28px;
  box-shadow: var(--product-shadow);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.product-feature-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--product-icon-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.product-feature-card__icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.product-feature-card h3 {
  font-size: var(--product-fs-card-title);
  font-weight: 700;
  color: var(--product-text);
  margin: 0 0 10px;
  line-height: var(--product-lh-card-title);
}

.product-feature-card p {
  font-size: var(--product-fs-body);
  color: var(--product-muted);
  line-height: var(--product-lh-body);
  margin: 0;
}

/* Why Suave CRM — matches index.php Core Values bg + typography */
.product-features-section,
#features.product-section {
  padding: 64px 0 44px;
  background: transparent;
}

.product-features--why {
  gap: 20px;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  align-items: stretch;
}

#features .product-section__header {
  margin-bottom: 36px;
}

#features + .product-workspace {
  padding-top: 44px;
}

.product-features-section__eyebrow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.product-features-section__eyebrow-bar {
  display: inline-block;
  width: 2px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2a4dfb 0%, #7a5ff8 100%);
  flex-shrink: 0;
}

#features .product-eyebrow {
  font-weight: 700;
  font-size: var(--product-fs-eyebrow);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0;
  line-height: 100%;
}

#features .product-section__title {
  color: #f7f8ff;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0;
}

#features .product-feature-card {
  display: flex;
  flex-direction: column;
  min-height: 126px;
  padding: 8px 8px 12px 18px;
  margin-left: -10px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  border-left: 1px dashed #2a4dfb;
  position: relative;
  transition: transform 0.25s ease;
}

#features .product-feature-card::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #2a4dfb 0%, #7a5ff8 100%) border-box;
  border: 3px solid transparent;
  box-sizing: border-box;
}

#features .product-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: none;
}

#features .product-feature-card__icon {
  width: 25px;
  height: 25px;
  border-radius: 0;
  background: transparent;
  margin-bottom: 9px;
}

#features .product-feature-card__icon img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

#features .product-feature-card h3 {
  color: #f3f4ff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 5px;
}

#features .product-feature-card p {
  color: #b1b9df;
  font-size: 14px;
  line-height: 1.42;
  letter-spacing: 0;
  margin: 0;
  max-width: 270px;
}

/* ─── Workspace ─── */
.product-workspace {
  padding: 88px 0;
  padding-bottom: 44px;
  background-color: transparent;
  background-image: url("/assets/background/portfolio-section-bg.png");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}

.product-workspace__grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.68fr) minmax(0, 1.32fr);
  gap: 48px;
  align-items: center;
  max-width: none;
}

.product-workspace__content {
  max-width: 520px;
}

.product-workspace .product-eyebrow {
  display: block;
  font-size: var(--product-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.product-workspace .product-section__title--left,
.product-workspace__title {
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.product-workspace__title-line {
  display: inline;
  font-weight: 800;
}

.product-workspace__desc {
  font-size: var(--product-fs-body);
  color: var(--product-muted);
  line-height: var(--product-lh-body);
  margin: 0 0 24px;
  max-width: 420px;
}

.product-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.product-bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--product-fs-body);
  color: var(--product-text);
}

.product-bullets li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--product-accent);
  flex-shrink: 0;
}

.product-workspace .product-bullets {
  gap: 12px;
}

.product-workspace .product-bullets li {
  font-size: var(--product-fs-body);
  line-height: var(--product-lh-body);
  color: var(--product-muted);
}

.product-workspace .product-bullets li::before {
  width: 8px;
  height: 8px;
}

.product-workspace__image {
  min-width: 0;
  width: 100%;
}

.product-workspace__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  box-shadow: 0 12px 42px rgba(15, 23, 42, 0.1);
  object-fit: contain;
  object-position: center center;
}

/* ─── Modules ─── */
#modules.product-section {
  padding-top: 44px;
  padding-bottom: 44px;
  background-color: transparent;
  background-image: url("/assets/background/portfolio-section-bg.png");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}

#modules + #stories.product-section {
  padding-top: 44px;
}

#stories.product-section {
  padding-bottom: 44px;
}

#stories + #pricing.product-section {
  padding-top: 44px;
}

#modules .product-eyebrow {
  font-weight: 800;
}

.product-modules {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: stretch;
}

.product-modules__sidebar {
  background: #fff;
  border-radius: var(--product-radius);
  padding: 10px;
  box-shadow: var(--product-shadow);
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: none;
  height: 100%;
}

.product-modules__tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: none;
  border-left: 3px solid transparent;
  background: transparent;
  border-radius: 10px;
  font-size: var(--product-fs-body);
  font-weight: 400;
  color: var(--product-muted);
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, font-weight 0.15s ease;
  width: 100%;
}

.product-modules__tab .product-modules__tab-label {
  font-family: var(--product-font);
  font-style: normal;
  font-weight: 400;
  color: inherit;
}

.product-modules__tab.is-active .product-modules__tab-label {
  font-weight: 700;
}

.product-modules__tab-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  transition: background 0.2s ease;
}

.product-modules__tab img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  opacity: 0.85;
  filter: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.product-modules__tab.is-active {
  background: var(--product-icon-bg-active);
  color: var(--product-text);
  border-left-color: var(--product-accent);
}

.product-modules__tab.is-active .product-modules__tab-icon {
  background: transparent;
}

#modules .product-modules__tab-icon img,
#modules .product-modules__title-row .product-feature-card__icon img {
  mix-blend-mode: multiply;
}

.product-modules__tab.is-active img {
  opacity: 1;
  transform: scale(1.02);
}

.product-modules__panel {
  background: #fff;
  border-radius: var(--product-radius);
  overflow: hidden;
  box-shadow: var(--product-shadow);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-modules__image-wrap {
  position: relative;
}

.product-modules__image-wrap img {
  width: 100%;
  height: 216px;
  object-fit: cover;
}

.product-modules__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(238, 242, 255, 0.95);
  border-radius: 100px;
  font-size: var(--product-fs-label);
  font-weight: 500;
  color: var(--product-accent);
}

.product-modules__badge i {
  font-size: var(--product-fs-body);
}

.product-modules__info {
  padding: 16px 20px 18px;
}

.product-modules__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.product-modules__title-row .product-feature-card__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 0;
  flex-shrink: 0;
  background: var(--product-icon-bg-card);
}

.product-modules__title-row .product-feature-card__icon img {
  width: 32px;
  height: 32px;
}

.product-modules__title-row h3 {
  font-size: var(--product-fs-card-title);
  font-weight: 700;
  margin: 0;
  color: var(--product-text);
  line-height: var(--product-lh-card-title);
}

.product-modules__info > p {
  font-size: var(--product-fs-body);
  color: var(--product-muted);
  line-height: var(--product-lh-body);
  margin: 0 0 12px;
}

.product-modules__highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.product-modules__highlight {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 10px;
  font-size: var(--product-fs-body);
  color: var(--product-text);
  font-weight: 500;
}

/* ─── Testimonials ─── */
.product-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.product-testimonial-card {
  background: #fff;
  border-radius: var(--product-radius);
  padding: 32px;
  box-shadow: var(--product-shadow);
  display: flex;
  flex-direction: column;
}

.product-testimonial-card__quote {
  font-size: 64px;
  line-height: 1;
  color: color-mix(in srgb, var(--product-accent) 35%, #ffffff);
  font-family: var(--product-font);
  font-weight: 700;
  margin-bottom: 8px;
}

.product-testimonial-card p {
  font-size: var(--product-fs-body);
  color: var(--product-muted);
  line-height: var(--product-lh-body);
  flex: 1;
  margin: 0 0 24px;
}

.product-testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.product-testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--product-accent-light);
  color: var(--product-accent);
  font-weight: 700;
  font-size: var(--product-fs-body);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.product-testimonial-card__author strong {
  display: block;
  font-size: var(--product-fs-body-lg);
  color: var(--product-text);
}

.product-testimonial-card__author span {
  font-size: var(--product-fs-body);
  color: var(--product-muted);
  font-style: normal;
  font-family: inherit;
}

/* ─── Pricing — styled like index.php Industries We Serve ─── */
#pricing.product-section,
.product-pricing-section {
  padding: 80px 0;
  background-color: transparent;
  background-image: url("/assets/background/industries-section-bg.png");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}

.product-pricing-section__header {
  text-align: left;
  max-width: none;
  margin: 0 0 38px;
}

.product-pricing-section__eyebrow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}

.product-pricing-section__eyebrow-bar {
  display: inline-block;
  width: 2px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2a4dfb 0%, #7a5ff8 100%);
  flex-shrink: 0;
}

#pricing .product-eyebrow {
  margin-bottom: 0;
  font-size: var(--product-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 100%;
}

#pricing .product-section__title {
  color: #f8f8ff;
  font-size: var(--product-fs-section);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
  text-align: left;
}

.product-billing-toggle {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 0;
  padding: 2px;
  border: none;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.07);
  margin-top: 8px;
}

.product-billing-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 18px;
  border: none;
  background: transparent;
  border-radius: 0;
  font-size: var(--product-fs-body);
  font-weight: 600;
  font-family: inherit;
  font-style: normal;
  color: var(--product-navy);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.product-billing-toggle button.is-active {
  background: linear-gradient(90deg, #2563eb 0%, #5b6cf7 52%, #8b5cf6 100%);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(77, 93, 251, 0.28);
}

.product-billing-toggle__badge {
  font-size: var(--product-fs-label);
  font-weight: 600;
  font-family: inherit;
  font-style: normal;
  background: rgba(255, 255, 255, 0.24);
  padding: 2px 8px;
  border-radius: 100px;
  line-height: 1.2;
}

.product-billing-toggle button:not(.is-active) .product-billing-toggle__badge {
  background: #eef2ff;
  color: var(--product-accent);
}

.product-pricing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px 18px;
  align-items: stretch;
  max-width: none;
  width: 100%;
  margin: 0;
}

.product-pricing-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #00003f;
  border-radius: 7px;
  padding: 24px 22px 20px;
  box-shadow: 2px 7px 13px 2px #2a4dfb17;
  position: relative;
  border: 1px solid rgb(110 119 219 / 8%);
  box-sizing: border-box;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.product-pricing-card:hover {
  border-color: rgb(101 111 255 / 58%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 4%),
    0 15px 32px rgb(0 0 0 / 22%);
  transform: translateY(-2px);
}

.product-pricing-card.is-featured {
  border-color: rgb(101 111 255 / 40%);
  box-shadow: 2px 7px 13px 2px #2a4dfb17;
}

.product-pricing-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #2a4dfb 0%, #7a5ff8 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 100px;
  white-space: nowrap;
}

.product-pricing-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  color: #ffffff;
  line-height: 1.35;
}

.product-pricing-card__desc {
  font-size: 14px;
  color: #b1b9df;
  margin: 0 0 16px;
  min-height: 0;
  line-height: 1.45;
  font-weight: 500;
}

.product-pricing-card__price {
  margin-bottom: 16px;
  min-height: 36px;
  display: flex;
  align-items: flex-end;
}

.product-pricing-card__amount {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

.product-pricing-card__period {
  font-size: var(--product-fs-body);
  color: #b1b9df;
}

.product-pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-pricing-card .product-btn {
  margin-top: 16px;
  width: 100%;
  min-width: 0;
  justify-content: center;
  padding: 12px 24px;
  font-size: var(--text-sm);
  line-height: 1.25;
}

.product-pricing-card .product-btn--outline {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.product-pricing-card .product-btn--outline:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
}

.product-pricing-card .product-btn--gradient {
  background: linear-gradient(90deg, #2a4dfb 0%, #0026e3 100%);
  color: #fff;
  border: none;
}

.product-pricing-card__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #b1b9df;
  line-height: 1.45;
  font-weight: 500;
}

.product-pricing-card__features i {
  color: #5968ee;
  font-size: 14px;
  flex-shrink: 0;
}


/* ─── Productivity ─── */
#modules {
  --product-icon-bg-card: color-mix(in srgb, #ffffff 82%, var(--product-bg) 18%);
  --product-icon-bg-active: color-mix(in srgb, #ffffff 70%, var(--product-bg) 30%);
}

#modules .product-modules__title-row .product-feature-card__icon {
  background: transparent;
}

.product-productivity {
  --product-icon-bg-card: var(--product-icon-bg-dark);
  background-color: transparent;
  background-image: url("/assets/background/web-services-section-bg.png");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  padding: 72px 0 64px;
  position: relative;
  overflow: hidden;
}

.product-productivity .container {
  position: relative;
  z-index: 1;
}

.product-productivity__header {
  max-width: none;
  margin-bottom: 36px;
}

.product-productivity .product-eyebrow--light {
  margin-bottom: 14px;
}

.product-productivity .product-section__title--light {
  color: var(--product-text);
  font-size: var(--product-fs-section);
  font-weight: 700;
  line-height: var(--product-lh-section);
  margin-bottom: 18px;
}

.product-productivity__desc {
  font-size: clamp(13px, 0.95vw, 15px);
  color: var(--product-muted);
  line-height: 1.5;
  margin: 0;
  max-width: none;
}

@media (min-width: 992px) {
  .product-productivity__desc {
    white-space: nowrap;
  }
}

@media (max-width: 991px) {
  .product-productivity__desc {
    white-space: normal;
    font-size: var(--product-fs-body-lg);
    line-height: var(--product-lh-body-lg);
  }
}

.product-productivity__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 64px;
}

.product-productivity__shot {
  display: block;
  width: 100%;
  border-radius: 14px;
  object-fit: cover;
  object-position: top center;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.32);
  background-color: #fff;
}

/* Top-left: 1/3 width */
.product-productivity__shot--config {
  grid-column: 1;
  grid-row: 1;
  height: 268px;
}

/* Top-right: 2/3 width */
.product-productivity__shot--dashboard {
  grid-column: 2 / 4;
  grid-row: 1;
  height: 268px;
}

/* Bottom-left: 2/3 width */
.product-productivity__shot--projects {
  grid-column: 1 / 3;
  grid-row: 2;
  height: 304px;
}

/* Bottom-right: 1/3 width */
.product-productivity__shot--invoice {
  grid-column: 3;
  grid-row: 2;
  height: 304px;
  object-position: top center;
}

.product-dark-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 36px;
  max-width: 100%;
  margin: 0 auto;
}

.product-dark-feature__icon {
  width: auto;
  height: auto;
  margin-bottom: 14px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.product-dark-feature__icon img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
  background: transparent;
}

.product-productivity .product-dark-feature__icon img {
  mix-blend-mode: screen;
  opacity: 0.96;
}

.product-productivity .product-dark-feature__icon img[src$=".svg"] {
  mix-blend-mode: normal;
  opacity: 1;
}

.product-productivity .product-dark-feature__icon img[src*="feature-icon-milestone"] {
  width: 64px;
  height: 64px;
}

.product-dark-feature h3 {
  font-size: var(--product-fs-card-title);
  font-weight: 700;
  color: var(--product-text);
  margin: 0 0 8px;
  line-height: var(--product-lh-card-title);
}

.product-dark-feature p {
  font-size: var(--product-fs-body);
  color: var(--product-muted);
  line-height: var(--product-lh-body);
  margin: 0;
  max-width: none;
}

/* ─── Principles ─── */
.product-principles {
  background-color: transparent;
  background-image: url("/assets/background/portfolio-section-bg.png");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}

#principles .product-section__header {
  margin-bottom: 44px;
}

#principles .product-eyebrow {
  font-size: var(--product-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

#principles .product-section__title {
  font-size: var(--product-fs-section);
  font-weight: 700;
  line-height: var(--product-lh-section);
  margin: 0;
}

.product-principles__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  align-items: stretch;
}

.product-principles__card {
  background: #fff;
  border-radius: 14px;
  padding: 24px 22px 28px;
  box-shadow:
    0 6px 28px rgba(15, 23, 42, 0.09),
    0 2px 8px rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(226, 232, 240, 0.9);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.product-principles__icon {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.product-principles__icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  background: transparent;
  mix-blend-mode: multiply;
}

.product-principles__card h3 {
  font-size: var(--product-fs-card-title);
  font-weight: 700;
  color: var(--product-text);
  margin: 0 0 8px;
  line-height: var(--product-lh-card-title);
}

.product-principles__card p {
  font-size: var(--product-fs-body);
  color: var(--product-muted);
  line-height: var(--product-lh-body);
  margin: 0;
}

#principles .product-section__cta .product-btn {
  padding: 12px 24px;
  font-size: var(--text-sm);
  line-height: 1.25;
}

#principles .product-section__cta .product-demo-btn {
  padding: 12px 24px;
  line-height: 1.25;
}

#principles.product-section {
  padding-bottom: 44px;
}

#principles + .product-section {
  padding-top: 44px;
  background-color: transparent;
  background-image: url("/assets/background/portfolio-section-bg.png");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}

#principles + .product-section .product-section__title {
  font-weight: 500;
}

#principles + .product-section .product-section__subtitle {
  font-size: var(--product-fs-body);
  font-weight: 500;
  line-height: var(--product-lh-body);
  color: var(--product-text);
}

#principles .product-section__cta {
  margin-top: 32px;
}

/* ─── Partner Cards ─── */
.product-partner-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.product-partner-card {
  display: flex;
  flex-direction: column;
}

.product-partner-card img {
  width: 100%;
  border-radius: 12px;
  aspect-ratio: 16/10;
  object-fit: cover;
  margin-bottom: 20px;
}

.product-partner-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--product-text);
  margin: 0 0 10px;
}

.product-partner-card p {
  font-size: var(--product-fs-body);
  color: var(--product-muted);
  line-height: var(--product-lh-body);
  margin: 0;
  flex: 1;
}

.product-partner-card__link {
  display: inline-block;
  margin-top: 16px;
  font-size: var(--product-fs-body-lg);
  font-weight: 600;
  font-family: inherit;
  font-style: normal;
  color: var(--product-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

.product-partner-card__link:hover {
  color: var(--product-accent-deep);
}

/* ─── Final CTA ─── */
.product-cta {
  padding: 64px 0 80px;
  background: transparent;
}

.product-cta .container {
  position: relative;
  z-index: 1;
}

.product-cta__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 28px;
  padding: 56px 48px;
  background: linear-gradient(90deg, #2563eb 0%, #4f63f7 42%, #7c3aed 100%);
  text-align: center;
  box-shadow: 0 20px 60px rgba(37, 99, 235, 0.22);
}

.product-cta__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.product-cta__decor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(60%, 540px);
  pointer-events: none;
  z-index: 1;
}

.product-cta__decor--left {
  left: 0;
}

.product-cta__decor--right {
  right: 0;
}

.product-cta__pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  max-width: 420px;
  max-height: 420px;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  opacity: 0.72;
  filter: saturate(0.7) brightness(0.92);
  transform: translate(-50%, -50%);
}

.product-cta__decor--left .product-cta__pulse {
  transform: translate(calc(-50% - 184px), -50%);
}

.product-cta__decor--right .product-cta__pulse {
  transform: translate(calc(-50% + 120px), -50%) scaleX(-1);
}

.product-cta__content {
  position: relative;
  z-index: 3;
  max-width: 760px;
  margin: 0 auto;
}

.product-cta__eyebrow {
  display: block;
  font-size: var(--product-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 14px;
}

.product-cta__content h2 {
  font-size: var(--product-fs-section);
  font-weight: 600;
  color: #fff;
  margin: 0 0 14px;
  line-height: var(--product-lh-section);
}

.product-cta__content p {
  font-size: var(--product-fs-body-lg);
  color: rgba(255, 255, 255, 0.9);
  line-height: var(--product-lh-body-lg);
  margin: 0 0 28px;
}

.product-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.product-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 11px;
  font-size: var(--text-sm);
  line-height: 1.25;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  min-width: 214px;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.product-cta__btn:hover {
  transform: translateY(-1px);
}

.product-cta__btn--primary {
  background: #fff;
  color: var(--product-accent);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
}

.product-cta__btn--primary:hover {
  background: #f8fafc;
  color: var(--product-accent-deep);
}

.product-cta__btn--ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px);
}

.product-cta__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* ─── Responsive ─── */
@media (max-width: 1199px) {
  .product-hero__banner-tile {
    display: none;
  }
}

@media (min-width: 992px) {
  .product-hero__title-line:nth-child(2) {
    white-space: nowrap;
  }
}

@media (max-width: 1199px) {
  .product-features,
  .product-testimonials,
  .product-pricing,
  .product-partner-cards,
  .product-principles__grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .product-dark-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 32px;
    max-width: 100%;
  }

}

@media (max-width: 991px) {
  .product-hero__headline-wrap {
    margin-bottom: 24px;
  }

  .product-social {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    gap: 8px;
  }

  .product-social a {
    width: 34px;
    height: 34px;
    font-size: var(--product-fs-body);
  }

  .product-how-it-works__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .product-business-works {
    padding: 20px 0 48px;
  }

  .product-business-works__header {
    margin-bottom: 28px;
  }

  .product-business-works__badge {
    margin-bottom: 14px;
  }

  .product-business-works__title {
    margin-bottom: 12px;
  }

  .product-business-works__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .product-business-works__card {
    min-height: 0;
    gap: 16px;
    padding: 18px;
  }

  .product-business-works__body h3 {
    font-size: 16px;
    line-height: 1.2;
  }

  .product-business-works__body p {
    font-size: 13px;
    line-height: 1.45;
  }

  .product-business-works__cta {
    margin-top: 28px;
  }

  .product-data-privacy__grid {
    grid-template-columns: 1fr;
  }

  .product-case-study__body {
    grid-template-columns: 1fr;
  }

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

  .product-case-study__metric {
    max-width: none;
  }

  .product-case-study__quote {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 14px;
    min-height: 0;
    padding: clamp(20px, 4vw, 28px) clamp(20px, 4vw, 24px);
  }

  .product-case-study__quote-mark {
    width: 40px;
    height: 40px;
  }

  .product-case-study__cta {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding: clamp(24px, 4vw, 32px) clamp(20px, 4vw, 28px);
  }

  .product-case-study__cta-btn {
    width: 100%;
  }

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

  .product-sales-cta__float {
    display: none;
  }

  .product-workspace__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: none;
  }

  .product-workspace__desc {
    max-width: none;
  }

  .product-section__title--left {
    text-align: center;
  }

  .product-workspace__content {
    text-align: center;
    max-width: none;
  }

  .product-modules {
    grid-template-columns: 1fr;
  }

  .product-modules__sidebar {
    flex-direction: row;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .product-modules__tab {
    white-space: nowrap;
    flex-shrink: 0;
  }

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

  .product-productivity__shot--config {
    grid-column: 1;
    grid-row: 1;
    height: 220px;
  }

  .product-productivity__shot--dashboard {
    grid-column: 2 / 4;
    grid-row: 1;
    height: 220px;
  }

  .product-productivity__shot--projects {
    grid-column: 1 / 3;
    grid-row: 2;
    height: 260px;
  }

  .product-productivity__shot--invoice {
    grid-column: 3;
    grid-row: 2;
    height: 260px;
  }

  .product-cta__card {
    padding: 44px 24px;
    border-radius: 22px;
  }

  .product-cta__decor {
    width: 225px;
  }

  .product-cta__pulse {
    width: 195px;
    height: 195px;
    max-height: none;
  }

  .product-cta__actions {
    flex-direction: column;
    width: 100%;
  }

  .product-cta__btn {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .product-section {
    padding: 56px 0;
  }

  .product-features,
  .product-testimonials,
  .product-pricing,
  .product-partner-cards,
  .product-principles__grid {
    grid-template-columns: 1fr;
  }

  .product-dark-features {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 100%;
  }

  .product-productivity {
    padding: 56px 0 64px;
  }

  .product-productivity__grid {
    grid-template-columns: 1fr;
  }

  .product-productivity__shot--config {
    grid-column: 1;
    grid-row: auto;
    height: 220px;
    min-height: auto;
  }

  .product-productivity__shot--dashboard,
  .product-productivity__shot--projects,
  .product-productivity__shot--invoice {
    grid-column: 1;
    grid-row: auto;
    height: 200px;
  }

  .product-stats {
    grid-template-columns: 1fr;
  }

  .product-stat {
    border-right: none;
    border-bottom: 1px solid #94a3b8;
    padding: 16px 12px;
  }

  .product-stat:last-child {
    border-bottom: none;
  }

  .product-stat__label {
    font-size: 12px;
    letter-spacing: 0.05em;
  }

  .product-modules__highlights {
    grid-template-columns: 1fr;
  }

  .product-hero__subtitle {
    font-size: var(--text-sm);
    line-height: var(--product-lh-subtitle);
  }

  .product-hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .product-hero__actions .product-btn {
    width: 100%;
    min-width: 0;
    padding: 15px 28px;
  }

  .product-cta__btn {
    min-width: 0;
    padding: 15px 28px;
  }

  .product-case-study__metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .product-hero--outreach {
    --product-fs-hero: clamp(32px, 9vw, 42px);
    --product-lh-hero: 1;
  }

  .product-hero__chips {
    gap: 18px 24px;
  }

  .product-hero__chip {
    min-width: 92px;
  }

  .product-hero__banner {
    display: none;
  }

  .product-how-it-works__grid {
    grid-template-columns: 1fr;
  }

  .product-how-it-works__card {
    height: auto;
    min-height: 0;
    gap: 10px;
    padding: 16px 18px;
  }

  .product-how-it-works__icon {
    width: 36px;
    height: 36px;
  }

  .product-how-it-works__icon img {
    width: 18px;
    height: 18px;
  }

  .product-how-it-works__card h3 {
    font-size: 16px;
    line-height: 1.2;
  }

  .product-how-it-works__card p {
    font-size: 13px;
    line-height: 1.4;
  }

  .product-add-ons__grid {
    grid-template-columns: 1fr;
  }

  .product-add-ons__card {
    min-height: 0;
    gap: 10px;
    padding: 16px 18px;
  }

  .product-add-ons__icon {
    width: 36px;
    height: 36px;
  }

  .product-add-ons__icon img {
    width: 15px;
    height: 15px;
  }

  .product-add-ons__card h3 {
    font-size: 16px;
    line-height: 1.2;
  }

  .product-add-ons__card p {
    font-size: 13px;
    line-height: 1.4;
  }

  .product-case-study__body {
    gap: 20px;
    padding: 18px 16px;
  }

  .product-case-study__brand {
    gap: 12px;
    margin-bottom: 16px;
  }

  .product-case-study__brand img {
    height: 32px;
  }

  .product-case-study__intro {
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.5;
  }

  .product-case-study__block + .product-case-study__block {
    margin-top: 18px;
  }

  .product-case-study__block-title {
    margin-bottom: 10px;
    font-size: 16px;
  }

  .product-case-study__block-intro,
  .product-case-study__list li {
    font-size: 13px;
    line-height: 1.45;
  }

  .product-case-study__list {
    gap: 8px;
  }

  .product-case-study__results {
    gap: 14px;
  }

  .product-case-study__metric {
    height: auto;
    min-height: 0;
    max-width: none;
    padding: 14px 14px 16px;
  }

  .product-case-study__metric--has-chart-strip {
    padding-bottom: 90px;
  }

  .product-case-study__metric-chart--strip {
    height: 90px;
  }

  .product-case-study__metric-chart--full {
    height: 220px;
  }

  .product-case-study__metric-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
  }

  .product-case-study__metric-icon img {
    width: 16px;
    height: 16px;
  }

  .product-case-study__metric-label {
    font-size: 13px;
  }

  .product-case-study__metric-caption {
    font-size: 11px;
  }

  .product-case-study__quote {
    min-height: 0;
    padding: 16px 18px;
    column-gap: 12px;
    row-gap: 12px;
  }

  .product-case-study__quote-mark {
    width: 32px;
    height: 32px;
  }

  .product-case-study__quote-text {
    font-size: 13px;
    line-height: 1.45;
  }

  .product-case-study__quote-avatar {
    width: 36px;
    height: 36px;
  }

  .product-case-study__quote-meta {
    font-size: 12px;
  }

  .product-case-study__cta {
    min-height: 0;
    padding: 18px 16px;
  }

  .product-case-study__cta-copy h3 {
    font-size: 16px;
  }

  .product-case-study__cta-copy p {
    font-size: 13px;
    line-height: 1.4;
  }

  .product-pricing-offer__grid {
    grid-template-columns: 1fr;
  }

  .product-business-works__grid {
    grid-template-columns: 1fr;
  }

  .product-business-works {
    padding: 16px 0 40px;
  }

  .product-business-works__header {
    margin-bottom: 24px;
  }

  .product-business-works__card {
    gap: 12px;
    padding: 16px 18px;
  }

  .product-business-works__icon {
    width: 36px;
    height: 36px;
  }

  .product-business-works__icon img {
    width: 36px;
    height: 36px;
  }

  .product-business-works__icon img[src$=".png"] {
    width: 20px;
    height: 20px;
  }

  .product-business-works__cta {
    margin-top: 24px;
  }

  .product-page {
    --product-fs-hero: 42px;
    --product-lh-hero: 52px;
    --product-fs-section: 36px;
    --product-lh-section: 46px;
  }
}

@media (max-width: 480px) {
  .product-page {
    --product-fs-hero: 32px;
    --product-lh-hero: 40px;
    --product-fs-section: 28px;
    --product-lh-section: 36px;
  }

  .product-btn,
  .product-cta__btn {
    padding: 15px 28px;
  }
}

/* ===== PRODUCT END ===== */

/* ===== BLOGS LISTING START ===== */
.blogs-hero__gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.6vw, 1.125rem);
  margin-top: clamp(1.25rem, 3.5vw, 2.25rem);
  width: 100%;
}
.blogs-hero__frame {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: clamp(12px, 2vw, 20px);
  box-shadow: 0 14px 36px rgba(5, 10, 36, 0.28);
}
.blogs-hero__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blogs-hero__frame--sm { height: clamp(6.5rem, 22vw, 16rem); }
.blogs-hero__frame--md { height: clamp(9rem, 30vw, 22rem); }
.blogs-hero__frame--lg { height: clamp(11.5rem, 38vw, 28rem); }

@media (max-width: 1023px) {
  .site-main > .blogs-hero {
    min-height: 0 !important;
  }
}

@media (max-width: 767px) {
  .site-main > .blogs-hero.site-container.relative.section-pad-m {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .site-main > .full-bleed.section-pad-m[data-blog-listing] {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}
.blog-grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.blog-grid .articles-card__body > p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.blog-filters {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0 auto 2rem;
  max-width: 720px;
  width: 100%;
}

.blog-filters__search,
.blog-filters__category {
  display: block;
  flex: 1 1 220px;
  margin: 0;
  max-width: 320px;
  min-width: 0;
  position: relative;
}

@media (min-width: 768px) {
  .blog-filters {
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 0;
  }
}

.blog-filters__search svg {
  color: #85868c;
  left: 14px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.blog-filters__search input,
.blog-filters__category select {
  appearance: none;
  background: #f4f6fb;
  border: 1px solid #e7ebf5;
  border-radius: 12px;
  color: #171717;
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  min-height: 48px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.blog-filters__search input {
  padding: 0 14px 0 40px;
}

.blog-filters__category select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2385868c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  cursor: pointer;
  padding: 0 40px 0 14px;
}

.blog-filters__search input::placeholder {
  color: #9aa0b5;
}

.blog-filters__search input:focus,
.blog-filters__category select:focus {
  border-color: #2a4dfb;
  box-shadow: 0 0 0 3px rgba(42, 77, 251, 0.12);
}

@media (max-width: 767px) {
  .blog-filters {
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 1.25rem;
    max-width: none;
  }

  .blog-filters__search,
  .blog-filters__category {
    flex: 1 1 0;
    max-width: none;
  }

  .blog-filters__search input,
  .blog-filters__category select {
    border-radius: 10px;
    font-size: 13px;
    min-height: 36px;
  }

  .blog-filters__search input {
    padding: 0 10px 0 34px;
  }

  .blog-filters__search svg {
    height: 14px;
    left: 10px;
    width: 14px;
  }

  .blog-filters__category select {
    background-position: right 10px center;
    padding: 0 32px 0 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .blog-filters {
    gap: 10px;
    margin-bottom: 1.5rem;
  }

  .blog-filters__search input,
  .blog-filters__category select {
    border-radius: 10px;
    font-size: 13px;
    min-height: 40px;
  }
}

.blog-results {
  min-height: 12rem;
  position: relative;
  transition: opacity 0.2s ease;
}

[data-blog-listing].is-loading .blog-results {
  opacity: 0.55;
  pointer-events: none;
}

.blog-category-nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 auto 2rem;
  max-width: 920px;
}

.blog-category-nav__item {
  align-items: center;
  background: #f4f6fb;
  border: 1px solid #e7ebf5;
  border-radius: 999px;
  color: #4d4d4d;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  line-height: 1;
  padding: 8px 14px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.blog-category-nav__item:hover,
.blog-category-nav__item.is-active {
  background: linear-gradient(90deg, #2a4dfb, #0026e3);
  border-color: transparent;
  color: #fff;
}

.blog-category-nav__count {
  background: rgba(0, 0, 63, 0.08);
  border-radius: 999px;
  font-size: 11px;
  padding: 3px 7px;
}

.blog-category-nav__item.is-active .blog-category-nav__count,
.blog-category-nav__item:hover .blog-category-nav__count {
  background: rgba(255, 255, 255, 0.2);
}

.articles-card__category {
  color: #2a4dfb;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  text-decoration: none;
  text-transform: uppercase;
}

.articles-card__body h3 a {
  color: inherit;
  text-decoration: none;
}

.articles-card__body h3 a:hover {
  color: #2a4dfb;
}

.blog-results .blog-pagination {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-end;
  margin-left: auto;
  margin-top: 2.5rem;
  max-width: 100%;
  overflow-x: auto;
  width: max-content;
}

.blog-results .blog-pagination__pages {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-results .blog-pagination__pages li {
  display: flex;
  margin: 0;
  padding: 0;
  position: static;
}

.blog-results .blog-pagination__pages li::before {
  content: none;
  display: none;
}

.blog-pagination__btn,
.blog-pagination__page {
  align-items: center;
  border: 1px solid #e7ebf5;
  border-radius: 10px;
  color: #171717;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  gap: 4px;
  justify-content: center;
  min-height: 38px;
  min-width: 38px;
  padding: 0 12px;
  text-decoration: none;
  white-space: nowrap;
}

.blog-pagination__btn.is-disabled {
  color: #9aa0b5;
  pointer-events: none;
}

.blog-pagination__page.is-active,
.blog-pagination__btn:hover,
.blog-pagination__page:hover {
  background: #2a4dfb;
  border-color: #2a4dfb;
  color: #fff;
}

.blog-empty {
  color: #4d4d4d;
  padding: 3rem 1rem;
  text-align: center;
}

.single-blog-main__category a {
  color: inherit;
  text-decoration: none;
}

.single-blog-main__category a:hover {
  text-decoration: underline;
}
/* ===== BLOGS LISTING END ===== */

/* ===== CONTACT FORM PANEL START ===== */
:root {
  --cfp-blue: #2a4dfb;
  --cfp-blue-soft: rgba(42, 77, 251, 0.15);
  --cfp-muted: #9eb0ff;
  --cfp-line: rgba(255, 255, 255, 0.12);
  --cfp-ink: #171717;
}

/* Page-specific styles (moved from css/style.css) */
.site-main > .full-bleed > .section-inner.contact-form-section-inner{
  grid-column: full;
  justify-self: center;
  max-width: 1380px;
  padding-inline: var(--site-gutter);
  width: 100%;
}

.contact-form-panel{
  background-color: #0b1228;
  background-image: url('/assets/background/contact-form-panel-blur-bg.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 28px;
  display: grid;
  max-width: 100%;
  overflow: hidden;
  width: 100%;
  padding: 20px;
}

.contact-form-panel__info{
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px 16px 18px;
  position: relative;
  z-index: 1;
}

.contact-form-panel__eyebrow{
  align-items: center;
  color: #9eb0ff;
  display: inline-flex;
  font-family: "PP Mori", "Roboto Flex", ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  gap: 10px;
  letter-spacing: 0.06em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

.contact-form-panel__eyebrow-bar{
  background: linear-gradient(90deg, var(--cfp-blue), #6ea0ff);
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
  height: 2px;
  width: 28px;
}

.contact-form-panel__title{
  font-family: "PP Mori", "Roboto Flex", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 14px 0 0;
  max-width: 42ch;
}

.contact-form-panel__title span{
  color: #6ea0ff;
  font-weight: 600;
}

.contact-form-panel__lead{
  color: var(--cfp-muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 16px 0 0;
  max-width: none;
}

.contact-form-panel__meta{
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.contact-form-panel__meta-card{
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cfp-line);
  border-radius: 16px;
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.contact-form-panel__meta-card:hover{
  background: rgba(42, 77, 251, 0.16);
  border-color: rgba(110, 160, 255, 0.45);
  transform: translateY(-2px);
}

.contact-form-panel__meta-label{
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-form-panel__meta-value{
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.contact-form-panel__meta-note{
  color: var(--cfp-muted);
  font-size: 13px;
  line-height: 1.4;
}

.contact-form-panel__meta-phone{
  align-items: center;
  color: #ffffff;
  display: inline-flex;
  gap: 8px;
  text-decoration: none;
  width: fit-content;
}

.contact-form-panel__meta-phone img{
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 2px;
  display: block;
  flex-shrink: 0;
  height: 14px;
  object-fit: cover;
  width: 20px;
}

.contact-form-panel__meta-phone:hover .contact-form-panel__meta-value{
  color: #6ea0ff;
}

.suave-phone-field{
  display: grid;
  gap: 6px;
  margin: 0;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.suave-phone-field .iti{
  background: #ffffff;
  border: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px #e6e8f0;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
  transition: box-shadow 0.2s ease;
  width: 100%;
  --iti-hover-color: transparent;
  --iti-border-color: #e6e8f0;
  --iti-spacer-horizontal: 8px;
  --iti-arrow-padding: 6px;
}

.suave-phone-field .iti:hover{
  box-shadow: inset 0 0 0 1px #cfd5e4;
}

.suave-phone-field .iti:has(.iti__tel-input:focus){
  box-shadow:
    inset 0 0 0 1px var(--cfp-blue),
    0 0 0 4px var(--cfp-blue-soft);
}

.suave-phone-field .iti.is-invalid{
  box-shadow:
    inset 0 0 0 1px #ef4444,
    0 0 0 3px rgba(239, 68, 68, 0.12);
}

.suave-phone-field .iti__country-container{
  align-items: stretch;
  bottom: 0;
  display: flex;
  left: 0;
  padding: 0;
  top: 0;
}

.contact-form-panel__fields .suave-phone-field .iti__tel-input{
  background: transparent;
  border: 0;
  border-radius: 0 12px 12px 0;
  box-shadow: none;
  box-sizing: border-box;
  color: #171717;
  font-family: inherit;
  font-size: 14px;
  height: 50px;
  line-height: 48px;
  outline: none;
  padding-block: 0;
  padding-inline-end: 8px;
  width: 100%;
}

.contact-form-panel__fields .suave-phone-field .iti__tel-input:hover,
.contact-form-panel__fields .suave-phone-field .iti__tel-input:focus{
  border: 0;
  box-shadow: none;
}

.suave-phone-field .iti__selected-country{
  align-items: center;
  background: #f4f6fb;
  border: 0;
  border-radius: 11px 0 0 11px;
  border-right: 1px solid #e6e8f0;
  display: flex;
  gap: 6px;
  height: 100%;
  padding: 0 6px 0 0;
}

.suave-phone-field .iti:hover .iti__selected-country,
.suave-phone-field .iti:focus-within .iti__selected-country{
  background: #eef2ff;
}

.suave-phone-field .iti--has-country-selector .iti__country-container:not(:has(+input[disabled])):not(:has(+input[readonly])) .iti__selected-country-primary:hover,
.suave-phone-field .iti--has-country-selector .iti__country-container:not(:has(+input[disabled])):not(:has(+input[readonly])) .iti__selected-country[aria-expanded="true"] .iti__selected-country-primary{
  background: transparent;
}

.suave-phone-field .iti__selected-country-primary{
  align-items: center;
  display: inline-flex;
  gap: 6px;
  height: 100%;
  padding: 0 0 0 6px;
}

.suave-phone-field .iti__selected-dial-code{
  align-items: center;
  color: #171717;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  margin-left: 0;
}

.suave-phone-field .iti__arrow{
  border-color: #6b7280;
  margin-left: 6px;
  margin-top: 0;
}

.suave-phone-field .iti__country-selector{
  background: #ffffff;
  border: 1px solid #e6e8f0;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
  margin-top: 6px;
  overflow: hidden;
  width: 320px;
  z-index: 40;
}

.suave-phone-field .iti__search-input-wrapper{
  border-bottom: 1px solid #eef0f6;
  padding: 10px;
}

.contact-form-panel__fields .suave-phone-field .iti__search-input{
  background: #f7f8fc;
  border: 1px solid #e6e8f0;
  border-radius: 10px;
  box-shadow: none;
  color: #171717;
  font-size: 13px;
  height: 40px;
  padding: 0 12px 0 34px;
  width: 100%;
}

.contact-form-panel__fields .suave-phone-field .iti__search-input:hover,
.contact-form-panel__fields .suave-phone-field .iti__search-input:focus{
  background: #ffffff;
  border-color: var(--cfp-blue);
  box-shadow: 0 0 0 3px var(--cfp-blue-soft);
}

.suave-phone-field .iti__search-icon{
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
}

.suave-phone-field .iti__country-list{
  max-height: 240px;
}

.suave-phone-field .iti__country{
  gap: 10px;
  padding: 9px 12px;
}

.suave-phone-field .iti__country-name,
.suave-phone-field .iti__dial-code{
  white-space: nowrap;
}

.suave-phone-field .iti__country-name{
  color: #171717;
  font-size: 13px;
}

.suave-phone-field .iti__dial-code{
  color: #6b7280;
  font-size: 13px;
}

.suave-phone-field .iti__country.iti__highlight{
  background: #eef2ff;
}

.contact-form-panel__form-wrap{
  min-width: 0;
  padding: 0 12px 16px;
  position: relative;
  z-index: 1;
}

.contact-form-panel__form{
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(8, 15, 40, 0.18);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  min-width: 0;
  padding: 22px 18px 18px;
  position: relative;
}

.contact-form-panel__form-intro{
  margin-bottom: 14px;
}

.contact-form-panel__form-status{
  align-items: center;
  color: #2a4dfb;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 8px;
  letter-spacing: 0.04em;
  margin: 0;
}

.contact-form-panel__form-status span{
  animation: contact-form-pulse 1.8s ease-in-out infinite;
  background: #22c55e;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
  display: inline-block;
  flex-shrink: 0;
  height: 8px;
  width: 8px;
}

@keyframes contact-form-pulse{
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
}

.contact-form-panel__form-title{
  color: var(--cfp-ink);
  font-family: "PP Mori", "Roboto Flex", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 10px 0 0;
}

.contact-form-panel__fields{
  display: grid;
  gap: 12px;
}

.contact-form-panel__row{
  display: grid;
  gap: 12px;
}

.contact-form-panel__fields label{
  display: grid;
  gap: 6px;
  margin: 0;
}

.contact-form-panel__label-text{
  color: #1f2937;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.contact-form-panel__fields input,
.contact-form-panel__fields select,
.contact-form-panel__fields textarea{
  background: #ffffff;
  border: 1px solid #e6e8f0;
  border-radius: 12px;
  color: #171717;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  width: 100%;
}

.contact-form-panel__fields input:not(.iti__tel-input),
.contact-form-panel__fields select{
  height: 50px;
  padding: 4px 8px;
}

.contact-form-panel__fields textarea{
  line-height: 1.5;
  min-height: 96px;
  padding: 6px 8px;
  resize: vertical;
}

.contact-form-panel__fields select{
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 16px;
  color: #9ca3af;
  cursor: pointer;
  padding-right: 30px;
}

.contact-form-panel__fields select:not(:invalid){
  color: #171717;
}

.contact-form-panel__fields input::placeholder,
.contact-form-panel__fields textarea::placeholder{
  color: #9ca3af;
}

.contact-form-panel__fields input:not(.iti__tel-input):hover,
.contact-form-panel__fields select:hover,
.contact-form-panel__fields textarea:hover{
  border-color: #cfd5e4;
}

.contact-form-panel__fields input:not(.iti__tel-input):focus,
.contact-form-panel__fields select:focus,
.contact-form-panel__fields textarea:focus{
  border-color: var(--cfp-blue);
  box-shadow: 0 0 0 4px var(--cfp-blue-soft);
}

.contact-form-panel__actions{
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

.contact-form-panel__submit{
  align-items: center;
  background: linear-gradient(90deg, #2a4dfb 57.12%, #0026e3 100%);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(42, 77, 251, 0.28);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 15px;
  font-weight: 700;
  gap: 8px;
  height: 50px;
  justify-content: center;
  letter-spacing: -0.01em;
  min-height: 50px;
  padding: 0 18px;
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.contact-form-panel__submit:hover{
  box-shadow: 0 10px 28px rgba(42, 77, 251, 0.35);
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.contact-form-panel__submit svg{
  transition: transform 0.3s ease;
}

.contact-form-panel__submit:hover svg{
  transform: translateX(4px);
}

.contact-form-panel__actions a{
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  transition: color 0.2s ease;
}

.contact-form-panel__actions a:hover{
  color: var(--cfp-blue);
}

.contact-form-panel__disclaimer{
  border-top: 1px solid #eef0f6;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0 0;
  padding-top: 14px;
}

.contact-form-panel__disclaimer a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.contact-form-panel__disclaimer a:hover{
  color: var(--cfp-blue);
}

.contact-form-honeypot{
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form-panel__flash{
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
  font-size: 14px;
  line-height: 1.45;
}

.contact-form-panel__flash[hidden]{
  display: none !important;
}

.contact-form-panel__errors{
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.1);
  color: #991b1b;
  font-size: 13px;
  line-height: 1.45;
}

.contact-form-panel__errors ul{
  margin: 0;
  padding-left: 1.1rem;
}

.contact-form-panel__field-error{
  display: block;
  margin-top: 6px;
  color: #b91c1c;
  font-size: 12px;
  line-height: 1.35;
}

.contact-form-panel__field-error[hidden]{
  display: none !important;
}

.contact-form-panel__fields input:not(.iti__tel-input).is-invalid,
.contact-form-panel__fields select.is-invalid,
.contact-form-panel__fields textarea.is-invalid{
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.contact-form-panel__submit.is-loading,
.contact-form-panel__submit:disabled{
  opacity: 0.7;
  pointer-events: none;
}

@media (max-width: 1023px) {
.contact-form-panel{
    padding: 14px;
  }

.contact-form-panel__info{
    padding: 18px 14px 16px;
  }

.contact-form-panel__form-wrap{
    padding: 0 8px 14px;
  }

.contact-form-panel__form{
    padding: 20px 16px 16px;
  }

.contact-form-panel__submit.u-btn-cta{
    height: 50px;
    min-height: 50px;
    padding-block: 0;
  }
}

@media (min-width: 640px) {
.contact-form-panel__info{
    padding: 24px 20px 22px;
  }

.contact-form-panel__meta{
    grid-template-columns: 1fr 1fr;
  }

.contact-form-panel__form-wrap{
    padding: 0 12px 20px;
  }

.contact-form-panel__form{
    padding: 24px 20px 20px;
  }

.contact-form-panel__row{
    grid-template-columns: 1fr 1fr;
  }

.contact-form-panel__actions{
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
  }

.contact-form-panel__submit{
    min-width: 180px;
  }

.contact-form-panel__actions a{
    text-align: left;
  }
}

@media (min-width: 1024px) {
.contact-form-panel{
    align-items: stretch;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    min-height: 640px;
    padding: 20px;
  }

.contact-form-panel__info{
    justify-content: center;
    padding: 28px 24px 28px 32px;
  }

.contact-form-panel__meta{
    grid-template-columns: 1fr;
    max-width: 340px;
  }

.contact-form-panel__form-wrap{
    align-items: center;
    display: flex;
    padding: 24px 28px 24px 12px;
  }

.contact-form-panel__form{
    padding: 26px 24px 22px;
    width: 100%;
  }
}

@media (min-width: 1280px) {
.contact-form-panel{
    min-height: 680px;
  }

.contact-form-panel__info{
    padding: 32px 28px 32px 40px;
  }

.contact-form-panel__form-wrap{
    padding: 28px 32px 28px 16px;
  }

.contact-form-panel__form{
    padding: 28px 26px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
.contact-form-panel__form-status span{
    animation: none;
  }

.contact-form-panel__fields input,
.contact-form-panel__fields select,
.contact-form-panel__fields textarea,
.contact-form-panel__meta-card,
.contact-form-panel__submit,
.contact-form-panel__submit svg,
.contact-form-panel__actions a,
.contact-form-panel__disclaimer a{
    transition: none;
  }
}
/* ===== CONTACT FORM PANEL END ===== */

/* ===== CONTACT REACH SECTION START ===== */
.contact-reach-section{
  background-color: #F5F7FF;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.contact-reach__header{
  margin-bottom: 2rem;
  max-width: 40rem;
}

.contact-reach{
  align-items: stretch;
  display: grid;
  gap: 1.25rem;
}

.contact-reach__eyebrow{
  align-items: center;
  background-image: linear-gradient(to right, #2A4DFB, #7A5FF8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  gap: 0.5rem;
  line-height: 1;
}

.contact-reach__eyebrow-bar{
  background-image: linear-gradient(to bottom, #2A4DFB, #7A5FF8);
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
  height: 16px;
  width: 2px;
}

.contact-reach__title{
  color: #171717;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 1rem;
}

.contact-reach__lead{
  color: #4D4D4D;
  font-size: 0.875rem;
  line-height: 1.5rem;
  margin-top: 1rem;
  max-width: 28rem;
}

.contact-reach__map{
  background:
    linear-gradient(#E8ECF8, #E8ECF8) padding-box,
    linear-gradient(135deg, #2A4DFB 0%, #7A5FF8 100%) border-box;
  border: 1.5px solid transparent;
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(31, 34, 88, 0.06);
  min-height: 320px;
  overflow: hidden;
  position: relative;
}

.contact-reach__map iframe{
  border: 0;
  display: block;
  height: 320px;
  width: 100%;
}

.contact-reach__details{
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%) padding-box,
    linear-gradient(135deg, #2A4DFB 0%, #7A5FF8 100%) border-box;
  border: 1.5px solid transparent;
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(31, 34, 88, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.contact-reach__panel-head{
  border-bottom: 1px solid #ECEEF7;
  flex-shrink: 0;
  padding: 1.25rem 1.25rem 1.1rem;
}

.contact-reach__panel-title{
  color: #171717;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.contact-reach__item{
  align-items: flex-start;
  display: grid;
  flex: 1 1 auto;
  gap: 0.875rem;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  padding: 1.15rem 1.25rem;
}

.contact-reach__item + .contact-reach__item{
  border-top: 1px solid #ECEEF7;
}

.contact-reach__item-icon{
  align-items: center;
  background-image: linear-gradient(to bottom right, #EEF1FF, #E7E8FF);
  border-radius: 14px;
  color: #2A4DFB;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 1rem;
  height: 2.75rem;
  justify-content: center;
  margin-top: 0.1rem;
  width: 2.75rem;
}

.contact-reach__item-content{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contact-reach__item-label{
  color: #858899;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.contact-reach__item-title{
  color: #171717;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0.2rem;
}

.contact-reach__item-body{
  color: #4D4D4D;
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  gap: 0.5rem;
  line-height: 1.45;
  margin-top: 0.75rem;
}

.contact-reach__office{
  align-items: flex-start;
  background: #F7F8FD;
  border: 1px solid #E8EBF7;
  border-radius: 12px;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 24px minmax(0, 1fr);
  padding: 0.65rem 0.75rem;
  text-align: left;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.contact-reach__office:hover{
  background: #F0F3FF;
  border-color: #D5DCFF;
}

.contact-reach__office.is-active{
  background: #EEF2FF;
  border-color: #C9D3FF;
  box-shadow: 0 0 0 1px rgba(42, 77, 251, 0.08);
}

.contact-reach__flag{
  border: 1px solid rgba(23, 23, 23, 0.08);
  border-radius: 3px;
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 0.15rem;
  overflow: hidden;
}

.contact-reach__flag svg{
  display: block;
}

.contact-reach__office-lines{
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.contact-reach__office-line{
  display: block;
}

.contact-reach__links{
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.contact-reach__link{
  color: #303241;
  display: block;
  font-weight: 600;
  line-height: 1.45;
  transition: color 0.2s ease;
  width: fit-content;
}

.contact-reach__link:hover{
  color: #2A4DFB;
}

@media (min-width: 640px){
  .contact-reach__panel-head,
  .contact-reach__item{
    padding-inline: 1.5rem;
  }

  .contact-reach__map,
  .contact-reach__map iframe{
    height: 380px;
    min-height: 380px;
  }
}

@media (min-width: 1024px){
  .contact-reach__header{
    margin-bottom: 2.5rem;
  }

  .contact-reach{
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  }

  .contact-reach__title{
    font-size: 2rem;
  }

  .contact-reach__map{
    height: auto;
    min-height: 100%;
  }

  .contact-reach__map iframe{
    height: 100%;
    left: 0;
    min-height: 560px;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .contact-reach__details{
    min-height: 560px;
  }

  .contact-reach__item{
    padding-block: 1.25rem;
  }
}
/* ===== CONTACT REACH SECTION END ===== */

/* ===== LEGAL PAGES START ===== */

.legal-hero__title{
  color: #ffffff;
  font-family: "PP Mori", "Roboto Flex", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0;
}

.legal-hero__lead{
  color: #b1b9df;
  font-size: 15px;
  line-height: 1.6;
  margin: 14px 0 0;
  max-width: 42ch;
}

.legal-page{
  background: #ffffff;
  border: 1px solid #eceff7;
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(31, 34, 88, 0.06);
  color: #4d4d4d;
  font-size: 15px;
  line-height: 1.75;
  margin-inline: auto;
  max-width: 920px;
  padding: 28px 22px;
}

.legal-page__section + .legal-page__section{
  border-top: 1px solid #eef0f6;
  margin-top: 28px;
  padding-top: 28px;
}

.legal-page h2{
  color: #171717;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 14px;
  scroll-margin-top: 100px;
}

.legal-page h3{
  color: #1f2430;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 22px 0 10px;
}

.legal-page p{
  margin: 0 0 14px;
}

.legal-page ul{
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding-left: 1.2rem;
}

.legal-page li{
  padding-left: 2px;
}

.legal-page a{
  color: #2a4dfb;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-page a:hover{
  color: #0026e3;
}

.legal-page__note{
  background: #f3f5ff;
  border-left: 3px solid #2a4dfb;
  border-radius: 0 12px 12px 0;
  color: #2a2f3a;
  margin-top: 8px;
  padding: 14px 16px;
}

.legal-page__contact{
  list-style: none;
  padding-left: 0;
}

@media (min-width: 640px) {
  .legal-page{
        padding: 40px 44px;
      }
}
/* ===== LEGAL PAGES END ===== */

/* ===== SINGLE BLOG START ===== */

.blog-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #b1b9df;
  max-width: 100%;
  min-width: 0;
}

.blog-breadcrumb a {
  color: #b1b9df;
  flex: 0 0 auto;
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-breadcrumb a:hover {
  color: #fff;
}

.blog-breadcrumb span[aria-hidden="true"] {
  flex: 0 0 auto;
}

.blog-breadcrumb span[aria-current] {
  color: #fff;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.single-blog-top.site-container.relative .single-blog-main__title,
.single-blog-top .single-blog-main__title {
  display: block;
  margin-top: 10px;
  max-width: 920px;
  color: #fff;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
}

.single-blog-main__title-accent {
  display: inline;
  background-image: linear-gradient(180deg, #2f69fb 15%, #c56bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

.single-blog-top .single-blog-main__meta {
  margin-bottom: 0;
  color: #b1b9df;
}

.single-blog-layout {
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.single-blog-main {
  min-width: 0;
}

.single-blog-main__image {
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--color-surface);
  box-shadow: 3px 7px 12px -1px #11182714;
}

.single-blog-main__image--inline {
  margin: 20px 0;
}

.single-blog-content > .single-blog-main__image:first-child {
  margin-top: 0;
  margin-bottom: 24px;
}

.single-blog-main__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.single-blog-main__title {
  margin-top: 0;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-ink);
}

.single-blog-main__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 16px;
  margin-bottom: 28px;
  font-size: 13px;
  line-height: 1.5;
  color: #85868c;
}

.single-blog-main__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.single-blog-main__category {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-brand-start), var(--color-brand-end));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.single-blog-content {
  min-width: 0;
  font-family: var(--site-font);
  font-size: 16px;
  line-height: 1.75;
  color: #1a1a1a;
}

.single-blog-content * {
  font-family: inherit !important;
}

.single-blog-content > * {
  margin-top: 0;
  margin-bottom: 0;
}

.single-blog-content > * + p {
  margin-top: 16px;
}

.single-blog-content > h2 + p,
.single-blog-content > h3 + p {
  margin-top: 0;
}

.single-blog-content h2 {
  margin-top: 32px;
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink);
  scroll-margin-top: 100px;
}

.single-blog-content h2:first-child,
.single-blog-main__image + h2 {
  margin-top: 24px;
}

.single-blog-content h3 {
  margin-top: 24px;
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
  scroll-margin-top: 100px;
}

.single-blog-content p {
  margin: 0;
}

.single-blog-content ul,
.single-blog-content ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.single-blog-content p + ul,
.single-blog-content p + ol {
  margin-top: 12px;
}

.single-blog-content ul + p,
.single-blog-content ol + p {
  margin-top: 16px;
}

.single-blog-content li {
  position: relative;
  padding-left: 1.35rem;
  line-height: 1.75;
}

.single-blog-content li > p {
  margin: 0;
}

/* Blue markers for body lists (Tailwind resets native bullets). */
.single-blog-content ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-brand-start, #2a4dfb);
}

.single-blog-content ol {
  counter-reset: blog-ol;
}

.single-blog-content ol > li {
  padding-left: 1.75rem;
  counter-increment: blog-ol;
}

.single-blog-content ol > li::before {
  content: counter(blog-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-brand-start, #2a4dfb);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.75;
}

.single-blog-content a {
  color: var(--color-brand-start);
  font-weight: 600;
  text-decoration: underline;
}

.single-blog-content blockquote {
  position: relative;
  margin: 24px 0 0;
  padding: 18px 20px 18px 22px;
  border: 1px solid rgba(42, 77, 251, 0.12);
  border-radius: 12px;
  background: #f7f8ff;
  box-shadow: none;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.65;
  color: var(--color-ink);
  overflow: hidden;
}

.single-blog-content blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #2a4dfb, #7a5ff8);
}

.single-blog-content blockquote::after {
  content: none;
}

.single-blog-content blockquote p {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-right: 0;
}

.single-blog-content blockquote p::before,
.single-blog-content blockquote p::after {
  content: none;
}

.single-blog-content figure:not(.single-blog-main__image) {
  margin: 24px 0;
}

.single-blog-content figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.single-blog-content p > img,
.single-blog-content img:not(.single-blog-main__image img) {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

.single-blog-content p:empty,
.single-blog-content p:has(> br:only-child) {
  min-height: 1.5em;
}

.single-blog-content figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #85868c;
}

.single-blog-content > h2 + .blog-table-wrap,
.single-blog-content > h2 + .blog-checklist,
.single-blog-content > h2 + .blog-stats,
.single-blog-content > h2 + .blog-chart,
.single-blog-content > h2 + .blog-takeaways,
.single-blog-content > h2 + .blog-results {
  margin-top: 8px;
}

.blog-table-wrap {
  display: block;
  box-sizing: border-box;
  margin: 24px 0 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: #fff;
}

.single-blog-content *:has(> table),
.single-blog-content *:has(> .blog-table-wrap) {
  max-width: 100%;
  min-width: 0;
}

.single-blog-content table {
  width: 100%;
  min-width: 100%;
  max-width: none;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-ink);
}

.single-blog-content thead th {
  padding: 14px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
  background: #f4f6ff;
  border-bottom: 1px solid rgba(42, 77, 251, 0.12);
}

.single-blog-content tbody th,
.single-blog-content tbody td {
  padding: 14px 16px;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
  vertical-align: top;
}

.single-blog-content tbody th {
  font-weight: 700;
  white-space: nowrap;
}

.single-blog-content tbody tr:nth-child(even) {
  background: #fafbff;
}

@media (max-width: 1023px) {
  .single-blog-content .blog-table-wrap table {
    width: max-content !important;
    min-width: 100%;
    height: auto !important;
  }

  .single-blog-content thead th,
  .single-blog-content tbody th,
  .single-blog-content tbody td {
    white-space: nowrap;
  }
}

.blog-chart {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 24px 0 0;
  padding: 20px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: #fafbff;
}

.blog-chart:not(:has(.blog-chart__row, .blog-chart__bar, figcaption)) {
  display: none;
}

.blog-chart > figcaption {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
}

.blog-chart__row {
  display: grid;
  grid-template-columns: minmax(110px, 30%) minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
}

.blog-chart__row:not(:has(.blog-chart__value:not(:empty))) {
  grid-template-columns: minmax(110px, 30%) minmax(0, 1fr);
}

.blog-chart__label,
.blog-chart__value {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-ink);
}

.blog-chart__value {
  text-align: right;
  color: var(--color-brand-start);
}

.blog-chart__value:empty {
  display: none;
}

.blog-chart__track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(42, 77, 251, 0.1);
}

.blog-chart__bar {
  display: block;
  height: 100%;
  min-height: 12px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-brand-start), #7a5ff8);
}

.blog-chart__bar--high {
  width: 90%;
}

.blog-chart__bar--mid {
  width: 58%;
}

.blog-chart__bar--low {
  width: 28%;
}

.blog-chart > .blog-chart__bar {
  display: grid;
  grid-template-columns: minmax(110px, 30%) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  height: auto;
  padding: 0;
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 600;
  background: none;
  border-radius: 0;
}

.blog-chart > .blog-chart__bar::after {
  content: "";
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-brand-start), #7a5ff8);
  justify-self: start;
}

.blog-chart > .blog-chart__bar--high::after {
  width: 90%;
}

.blog-chart > .blog-chart__bar--mid::after {
  width: 58%;
}

.blog-chart > .blog-chart__bar--low::after {
  width: 28%;
}

.blog-insight {
  margin: 24px 0 0;
  padding: 18px 20px 18px 22px;
  border-left: 4px solid var(--color-brand-start);
  border-radius: 0 12px 12px 0;
  background: #f7f8ff;
  box-shadow: none;
}

.blog-insight:empty,
.blog-insight:not(:has(:not(:empty))) {
  display: none;
}

.blog-insight p {
  margin: 0;
  color: var(--color-ink);
}

.blog-takeaways,
.blog-checklist,
.blog-results {
  margin: 24px 0 0;
  padding: 20px 22px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: #fafbff;
}

.blog-takeaways__title,
.blog-checklist__title,
.blog-results__title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  color: var(--color-ink);
}

.blog-takeaways ul,
.blog-checklist ul,
.blog-results ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blog-takeaways li,
.blog-checklist li,
.blog-results li {
  padding-left: 1.4rem;
  position: relative;
}

.single-blog-content .blog-takeaways li::before,
.single-blog-content .blog-results li::before,
.blog-takeaways li::before,
.blog-results li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-brand-start, #2a4dfb);
}

.single-blog-content .blog-checklist li::before,
.blog-checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.75;
  color: var(--color-brand-start, #2a4dfb);
}

.blog-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 24px 0 0;
}

.blog-stats:empty {
  display: none;
}

.blog-stat {
  padding: 18px 16px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: #fff;
}

.blog-stat:not(:has(.blog-stat__value:not(:empty), .blog-stat__label:not(:empty))) {
  display: none;
}

.blog-stat__value {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-brand-start);
}

.blog-stat__label {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}

@media (max-width: 767px) {
  .blog-chart__row,
  .blog-chart__row:not(:has(.blog-chart__value:not(:empty))),
  .blog-chart > .blog-chart__bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-chart__label {
    grid-column: auto;
  }
}

.blog-share {
  --blog-share-chat-size: 48px;
  --blog-share-size: 44px;
  --blog-share-inset: 24px;
  --blog-share-gap: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: fixed;
  right: var(--blog-share-inset);
  bottom: calc(var(--blog-share-inset) + var(--blog-share-chat-size) + var(--blog-share-gap));
  z-index: 9998;
  width: var(--blog-share-size);
  margin: 0;
  pointer-events: none;
}

.blog-share__toggle,
.blog-share__list,
.blog-share__copied {
  pointer-events: auto;
}

.blog-share__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--blog-share-size);
  width: var(--blog-share-size);
  height: var(--blog-share-size);
  margin: 0;
  padding: 0;
  border: 1px solid rgba(42, 77, 251, 0.16);
  border-radius: 999px;
  color: var(--color-brand-start);
  background: #fff;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.1);
  cursor: pointer;
}

.blog-share__toggle:hover,
.blog-share__toggle:focus-visible {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(90deg, var(--color-brand-start), var(--color-brand-end));
}

.blog-share__toggle-icon--close {
  display: none;
}

.blog-share.is-open .blog-share__toggle-icon--share {
  display: none;
}

.blog-share.is-open .blog-share__toggle-icon--close {
  display: block;
}

.blog-share__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: var(--blog-share-size);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(12px);
  border: 0 solid transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  transition: max-height 0.32s ease, opacity 0.24s ease, transform 0.28s ease, padding 0.24s ease, box-shadow 0.24s ease;
}

.blog-share.is-open .blog-share__list {
  max-height: 280px;
  padding: 8px 0;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  border: 0;
  box-shadow: none;
}

.blog-share__list li {
  opacity: 0;
  transform: translateY(8px) scale(0.88);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.blog-share.is-open .blog-share__list li {
  opacity: 1;
  transform: none;
}

.blog-share.is-open .blog-share__list li:nth-child(1) { transition-delay: 0.04s; }
.blog-share.is-open .blog-share__list li:nth-child(2) { transition-delay: 0.08s; }
.blog-share.is-open .blog-share__list li:nth-child(3) { transition-delay: 0.12s; }
.blog-share.is-open .blog-share__list li:nth-child(4) { transition-delay: 0.16s; }
.blog-share.is-open .blog-share__list li:nth-child(5) { transition-delay: 0.2s; }

.blog-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(42, 77, 251, 0.16);
  border-radius: 999px;
  color: var(--color-brand-start);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.blog-share__btn:hover,
.blog-share__btn:focus-visible {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(90deg, var(--color-brand-start), var(--color-brand-end));
}

.blog-share__copied {
  position: absolute;
  right: calc(100% + 10px);
  bottom: 12px;
  margin: 0;
  padding: 6px 10px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #111827;
  border-radius: 8px;
}

body:has(.suave-agent.is-open) .blog-share {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1023px) {
  .blog-share {
    --blog-share-chat-size: 44px;
    --blog-share-size: 40px;
    --blog-share-inset: 16px;
    --blog-share-gap: 8px;
  }
}

@media (max-width: 767px) {
  .blog-share {
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 44px + 8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-share__list,
  .blog-share__list li {
    transition: none;
  }
}

.single-blog-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(42, 77, 251, 0.1);
}

.single-blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.single-blog-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid rgba(42, 77, 251, 0.16);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-brand-start);
  background: #f3f6ff;
}

.single-blog-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.single-blog-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(42, 77, 251, 0.16);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  background: #fff;
  box-shadow: 3px 7px 12px -6px #11182714;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.single-blog-nav__btn:hover {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(90deg, var(--color-brand-start), var(--color-brand-deep));
  box-shadow: 3px 7px 18px -6px #2a4dfb40;
}

.single-blog-nav__btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.single-blog-comment {
  margin-top: 48px;
  padding: 28px 24px;
  border: 1px solid rgba(42, 77, 251, 0.08);
  border-radius: 20px;
  background: var(--color-surface);
}

.single-blog-comment__title {
  margin: 0 0 20px;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 700;
  color: var(--color-ink);
}

.single-blog-comment__form textarea,
.single-blog-comment__form input {
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
  background: #fff;
  color: var(--color-ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.single-blog-comment__form textarea {
  min-height: 140px;
  resize: vertical;
}

.single-blog-comment__form textarea:focus,
.single-blog-comment__form input:focus {
  border-color: rgba(42, 77, 251, 0.45);
  box-shadow: 0 0 0 3px rgba(42, 77, 251, 0.12);
}

.single-blog-comment__form textarea::placeholder,
.single-blog-comment__form input::placeholder {
  color: #a0a2ac;
}

.single-blog-comment__row {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  margin-top: 12px;
}

.single-blog-comment__submit {
  margin-top: 16px;
  border: 0;
  cursor: pointer;
}

.single-blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.blog-widget {
  padding: 22px;
  border: 1px solid rgba(42, 77, 251, 0.08);
  border-radius: 20px;
  background: var(--color-surface);
}

.blog-widget--search {
  padding: 0;
  border: 0;
  background: transparent;
}

.blog-widget__title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}

.blog-widget__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-widget__list li {
  border-bottom: 1px solid rgba(42, 77, 251, 0.08);
}

.blog-widget__list li:last-child {
  border-bottom: 0;
}

.blog-widget__list a {
  align-items: center;
  border-left: 2px solid transparent;
  color: var(--color-muted);
  display: flex;
  font-size: 13px;
  gap: 12px;
  justify-content: space-between;
  line-height: 1.5;
  padding: 12px 0 12px 12px;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.blog-widget__list a:hover,
.blog-widget__list a.is-active {
  border-color: rgba(42, 77, 251, 0.4);
  color: var(--color-brand-start);
}

.blog-widget__count {
  background: rgba(42, 77, 251, 0.08);
  border-radius: 999px;
  color: inherit;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  min-width: 1.75rem;
  padding: 5px 8px;
  text-align: center;
}

.blog-search {
  position: relative;
  display: flex;
  align-items: center;
}

.blog-search input {
  width: 100%;
  padding: 14px 48px 14px 16px;
  border: 1px solid rgba(42, 77, 251, 0.12);
  border-radius: 14px;
  background: #fff;
  color: var(--color-ink);
  font: inherit;
  font-size: 14px;
  outline: none;
  box-shadow: 3px 7px 12px -6px #11182714;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-search input:focus {
  border-color: rgba(42, 77, 251, 0.45);
  box-shadow: 0 0 0 3px rgba(42, 77, 251, 0.12);
}

.blog-search input::placeholder {
  color: #a0a2ac;
}

.blog-search button {
  position: absolute;
  right: 6px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--color-brand-start), var(--color-brand-deep));
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
  transition: filter 0.2s ease;
}

.blog-search button:hover {
  filter: brightness(1.08);
}

.blog-top-posts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-top-posts li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(42, 77, 251, 0.08);
}

.blog-top-posts li:first-child {
  padding-top: 0;
}

.blog-top-posts li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.blog-top-posts__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--color-brand-start), var(--color-brand-end));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.blog-top-posts__body a {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-top-posts__body a:hover {
  color: var(--color-brand-start);
}

.blog-top-posts__body p {
  display: -webkit-box;
  margin: 6px 0 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.5;
  color: #85868c;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.blog-widget--slider {
  overflow: hidden;
}

.blogSidebarSwiper {
  width: 100%;
  overflow: hidden;
}

.blog-sidebar-card {
  margin: 0;
  height: 100%;
  padding: 8px;
}

.blog-sidebar-card h3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.blog-sidebar-slider__pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .single-blog-nav__btn:hover {
    transform: none;
  }
}

@media (min-width: 1024px) {

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

  .single-blog-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
  }
}

@media (max-width: 767px) {
  .site-main > .single-blog-top.site-container.relative {
    min-height: 0 !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.5rem !important;
  }

  .site-main > .full-bleed.section-pad-m:has(.single-blog-layout) {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .single-blog-layout {
    gap: 36px;
  }

  .single-blog-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== SINGLE BLOG END ===== */

/* ===== INDUSTRY DETAIL SERVICES START ===== */
  /* Why Us: mobile-friendly background (avoid cover crop on tall stacked cards) */
  .industry-why-section__bg {
    background-color: #F8FAFC;
    background-image: url('/assets/background/about-section-bg.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
  }

  @media (min-width: 768px) {
    .industry-why-section__bg {
      background-position: top center;
      background-size: cover;
    }
  }

  /* Industry detail services: no icon backgrounds, larger icons, shared blue hover */
  .industry-detail-services .web-service-card__icon,
  .industry-detail-services .web-service-card__icon--blue,
  .industry-detail-services .web-service-card__icon--orange,
  .industry-detail-services .web-service-card__icon--cyan,
  .industry-detail-services .web-service-card__icon--mint,
  .industry-detail-services .web-service-card__icon--rose,
  .industry-detail-services .web-service-card__icon--amber {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    height: auto;
    margin-bottom: 12px;
    padding: 0;
    width: auto;
  }

  .industry-detail-services .web-service-card__icon img {
    display: block;
    height: 36px;
    object-fit: contain;
    width: 36px;
  }

  .industry-detail-services .web-service-card,
  .industry-detail-services .web-service-card:nth-child(n) {
    --web-service-accent: #315DE3;
  }

  .industry-detail-services .web-service-card::before {
    background: #315DE3;
  }

  .industry-detail-services .web-service-card::after {
    background: #E8EBFF;
    opacity: 0;
  }

  .industry-detail-services .web-service-card:hover,
  .industry-detail-services .web-service-card:focus-within {
    background: #E8EBFF;
  }

  .industry-detail-services .web-service-card:hover::before,
  .industry-detail-services .web-service-card:focus-within::before {
    width: 100%;
  }

  .industry-detail-services .web-service-card:hover::after,
  .industry-detail-services .web-service-card:focus-within::after {
    opacity: 1;
  }

  /* Industry detail: mobile + tablet polish */
  @media (max-width: 1023px) {
    main {
      overflow-x: clip;
    }

    .industry-detail-services .web-service-card {
      min-height: 0;
      padding: 20px 18px 22px;
    }
  }

  @media (max-width: 767px) {
    main .u-btn-cta,
    main a.rounded-full.bg-gradient-to-r,
    main .consultation-cta {
      box-sizing: border-box;
      height: 34px !important;
      min-height: 34px !important;
      padding-block: 0 !important;
      width: fit-content !important;
      max-width: 100%;
    }

    /* Text links (no fill): size to label, not full row */
    main a.border-b,
    main .consultation-secondary-link {
      display: inline-flex;
      width: fit-content !important;
      max-width: 100%;
    }

    .industry-detail-services .web-service-card__icon img {
      height: 32px;
      width: 32px;
    }

    .industry-detail-services .web-service-card {
      padding: 18px 16px 20px;
    }
  }

  @media (min-width: 768px) {
    .industry-detail-services .web-service-card__icon img {
      height: 40px;
      width: 40px;
    }
  }
/* ===== INDUSTRY DETAIL SERVICES END ===== */

/* ===== INDUSTRY DETAIL AGILE START ===== */
.agile-process-tabs {
  margin-bottom: 2.5rem;
  overflow: hidden;
  width: 100%;
}

.agile-process-tabs__list {
  align-items: center;
}

.agile-process-tabs__slide {
  height: auto;
  width: auto;
}

.agile-process-tabs__tab {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .agile-process-tabs__slide {
    height: auto;
  }

  .agile-process-tabs__tab {
    box-sizing: border-box;
    font-size: 11px;
    line-height: 1.25;
    min-height: 44px;
    padding: 8px 6px;
    text-align: center;
    white-space: normal;
    width: 100%;
  }
}

.agile-process-tabs__pagination {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

.agile-process-tabs__pagination .swiper-pagination-bullet {
  background: transparent;
  border: 1.5px solid #00003f;
  border-radius: 999px;
  height: 8px;
  margin: 0 !important;
  opacity: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  width: 8px;
}

.agile-process-tabs__pagination .swiper-pagination-bullet-active {
  background: #00003f;
  border-color: #00003f;
}

@media (min-width: 768px) {
  .agile-process-tabs {
    overflow: visible;
  }

  .agile-process-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    transform: none !important;
  }

  .agile-process-tabs__slide {
    margin: 0 !important;
    width: auto !important;
  }

  .agile-process-tabs__pagination {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .agile-process-tabs__list {
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
  }

  .agile-process-tabs__slide {
    flex: 1 1 0;
    min-width: 0;
  }

  .agile-process-tabs__tab {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    font-size: 11px;
    height: 44px;
    justify-content: center;
    line-height: 1.2;
    min-height: 44px;
    padding: 8px 6px;
    text-align: center;
    white-space: normal;
    width: 100%;
  }
}
/* ===== INDUSTRY DETAIL AGILE END ===== */

/* ===== SERVICES LISTING START ===== */
.about-stat__value--title {
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.digital-solution-section {
  background-color: #f7f8fc;
  padding: 40px 0;
}

.digital-solution-section__row {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
}

.digital-solution-section__badge {
  align-items: center;
  display: none;
  flex-shrink: 0;
  height: 120px;
  justify-content: center;
  position: relative;
  width: 120px;
}

.digital-solution-section__ring {
  animation: digital-solution-spin 10s linear infinite;
  display: block;
  height: 120px;
  width: 120px;
}

.digital-solution-section__icon {
  height: 40px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
}

.digital-solution-section__content {
  align-items: baseline;
  column-gap: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
  "top"
  "agency"
  "copy";
  row-gap: 0;
  width: 100%;
}

.digital-solution-section__title {
  color: #0b1b3f;
  display: contents;
  margin: 0;
  text-transform: uppercase;
}

.digital-solution-section__title-top,
.digital-solution-section__title-agency {
  font-family: "PP Mori", "Roboto Flex", ui-sans-serif, system-ui, sans-serif;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.digital-solution-section__title-top {
  font-size: clamp(2rem, 8vw, 3.5rem);
  grid-area: top;
}

.digital-solution-section__title-agency {
  font-size: clamp(2rem, 8vw, 3.5rem);
  grid-area: agency;
  white-space: nowrap;
}

.digital-solution-section__copy {
  align-self: stretch;
  color: #4d4d4d;
  font-size: 14px;
  grid-area: copy;
  line-height: 24px;
  margin: 16px 0 0;
  max-width: none;
  min-width: 0;
  width: 100%;
}

.digital-solution-section__copy p {
  margin: 0;
}

.digital-solution-section__lead {
  color: #171717;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.4;
  margin: 0 0 10px;
}

@keyframes digital-solution-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (min-width: 768px) {
  .digital-solution-section__row {
    gap: 28px;
    margin-inline: auto;
    max-width: 860px;
  }

  .digital-solution-section__content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
    "top"
    "agency"
    "copy";
    justify-items: center;
    margin-inline: auto;
    row-gap: 0;
    text-align: center;
  }

  .digital-solution-section__title-top,
  .digital-solution-section__title-agency {
    font-size: clamp(2.75rem, 6vw, 4.5rem);
    text-align: center;
  }

  .digital-solution-section__copy {
    margin-top: 16px;
    max-width: none;
    text-align: center;
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .digital-solution-section__title-top,
  .digital-solution-section__title-agency {
    font-size: clamp(2.25rem, 5.5vw, 3rem);
  }
}

@media (min-width: 1024px) {
  .digital-solution-section__row {
    gap: 32px;
    margin-inline: auto;
    max-width: 1040px;
    padding-right: 160px;
    position: relative;
  }

  .digital-solution-section__badge {
    bottom: auto;
    display: flex;
    height: 120px;
    left: auto;
    margin: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    z-index: 1;
  }

  .digital-solution-section__content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
    "top"
    "agency"
    "copy";
    justify-content: start;
    justify-items: start;
    margin-inline: 0;
    text-align: left;
    width: 100%;
  }

  .digital-solution-section__title-top,
  .digital-solution-section__title-agency {
    font-size: clamp(3.5rem, 5vw, 5.5rem);
    text-align: left;
  }

  .digital-solution-section__copy {
    font-size: 14px;
    line-height: 24px;
    margin-top: 20px;
    max-width: none;
    text-align: left;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .digital-solution-section__ring {
    animation: none;
  }
}

@media (min-width: 1280px) {
  .digital-solution-section__row {
    max-width: 1180px;
    padding-right: 180px;
  }

  .digital-solution-section__title-top,
  .digital-solution-section__title-agency {
    font-size: 3.75rem;
  }
}
/* ===== SERVICES LISTING END ===== */

/* ===== CRM BUILDER HERO START ===== */
.crm-builder-hero {
  background-color: #00003f;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  padding: 2.5rem 0 3rem;
  position: relative;
  z-index: 1;
}

.crm-builder-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.crm-builder-hero__top {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
}

.crm-builder-hero__copy {
  display: flex;
  flex-direction: column;
  max-width: 40rem;
  min-width: 0;
}

.crm-builder-hero__eyebrow {
  align-items: center;
  background:
    linear-gradient(
      90deg,
      rgba(42, 77, 251, 0.04) 0%,
      rgba(122, 95, 248, 0.04) 100%
    ) padding-box,
    linear-gradient(
      90deg,
      rgba(42, 77, 251, 0.08) 0%,
      rgba(122, 95, 248, 0.08) 100%
    ) border-box;

  border: 1px solid transparent;
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  margin: 0 0 0.5rem;
  padding: 0.35rem 0.75rem;
  text-transform: uppercase;
  width: fit-content;
}

.crm-builder-hero__eyebrow-text {
  background: linear-gradient(90deg, #2a4dfb 0%, #7a5ff8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-radius: 3px;
}

.crm-builder-hero__title {
  display: flex;
  flex-direction: column;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 28px;
  margin: 0.5rem 0;
}

.crm-builder-hero__title-lead,
.crm-builder-hero__title-line {
  color: #fff;
  font-weight: 700;
}

.crm-builder-hero__title-accent {
  background: linear-gradient(180deg, #2f69fb 49.52%, #d078fe 100%);
  background-clip: text;
  font-weight: 700;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.crm-builder-hero__title-accent1 {
  color: #D078FE;
  font-weight: 700;
}
.crm-builder-hero__desc {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.5;
  margin: 0.5rem 0 0;
  max-width: 34rem;
}

.crm-builder-hero__cta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
}

.crm-builder-hero__cta-secondary {
  align-items: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  box-shadow: 3px 7px 22px -6px #2a4dfb24;
  color: #fff;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 0.5rem;
  line-height: 1.25;
  min-height: 44px;
  padding: 0.5rem 1.15rem;
  text-decoration: none;
}

.crm-builder-hero__cta-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.crm-builder-hero__icon-placeholder {
  background: rgba(122, 95, 248, 0.18);
  border: 1px dashed rgba(122, 95, 248, 0.45);
  border-radius: 8px;
  display: inline-block;
  flex-shrink: 0;
  height: 18px;
  width: 18px;
}

.crm-builder-hero__visual {
  min-width: 0;
  position: relative;
}

.crm-builder-dash {
  background:#050447;
  border: 1px solid rgba(145, 168, 255, 0.16);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(3, 8, 32, 0.45);
  min-width: 0;
  overflow: hidden;
  padding: 16px 18px 18px;
  height: auto;
}

.crm-builder-dash__chrome {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.crm-builder-dash__dot {
  border-radius: 999px;
  height: 8px;
  width: 8px;
}

.crm-builder-dash__dot--red {

  background: #FF5F57;

}

.crm-builder-dash__dot--yellow {
  background: #febc2e;
}

.crm-builder-dash__dot--green {
  background: #28c840;
}

.crm-builder-dash__title {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 0 6px;
}

.crm-builder-dash__stages {
  display: flex;
  flex-direction: column;
  gap: 25px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.crm-builder-dash__stage {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 7.5rem minmax(0, 1fr) 1.6rem 3.1rem;
}

.crm-builder-dash__stage-label,
.crm-builder-dash__stage-count,
.crm-builder-dash__stage-value {
  font-size: 12px;
  line-height: 1.2;
}

.crm-builder-dash__stage-label {
  color: rgba(255, 255, 255, 0.78);
}

.crm-builder-dash__stage-count {
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.crm-builder-dash__stage-value {
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.crm-builder-dash__bar {
  background: color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 999px;
  display: block;
  height: 8px;
  overflow: hidden;
  position: relative;
}

.crm-builder-dash__bar::after {
  background: currentColor;
  border-radius: inherit;
  content: "";
  display: block;
  height: 100%;
  width: var(--bar-width, 50%);
}

.crm-builder-dash__bar--blue {
  color: #3b82f6;
}

.crm-builder-dash__bar--sky {
  color: #60a5fa;
}

.crm-builder-dash__bar--purple {
  color:  #8B5CF6;

}

.crm-builder-dash__bar--orange {
  color: #f59e0b;
}

.crm-builder-dash__bar--green {
  color: #34d399;
}

.crm-builder-dash__metrics {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
  padding-top: 14px;
}

.crm-builder-dash__metric-label {
  color: rgba(255, 255, 255, 0.48);
  display: block;
  font-size: 11px;
  font-weight: 500;
}

.crm-builder-dash__metric-value {
  color: #fff;
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-top: 4px;
}

.crm-builder-score {
  background: #050447;
  border: 1px solid #2A4DFB;
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(3, 8, 32, 0.4);
  margin: 1rem 0 0;
  max-width: min(11rem, 100%);
  padding: 12px 14px;
  position: relative;
  width: 164px;
  z-index: 2;
}

.crm-builder-score__label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 600;
  margin: 6px 0 0;
}

.crm-builder-score__value {
  color: #a5b4fc;
  font-size: 14px;
  margin: 2px 0 0;
}

.crm-builder-score__value strong {
  color: #818cf8;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

@media (max-width: 767px) {
  .crm-builder-dash__metrics {
    padding-right: 10.75rem;
  }

  .crm-builder-score {
    bottom: 0.7rem;
    left: auto;
    margin: 0;
    position: absolute;
    right: 0.65rem;
  }
}

.crm-builder-hero__definition {
  background: #FFFFFF05;
  border: 1px solid #FFFFFF1A;
  border-radius: 20px;
  box-sizing: border-box;
  max-width: none;
  min-width: 0;
  padding: 16px;
  width: 100%;
}

.crm-builder-hero__definition-head {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.crm-builder-hero__definition-title {
  background: linear-gradient(90deg, #2a4dfb 0%, #7a5ff8 100%);
  background-clip: text;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
  text-transform: uppercase;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.crm-builder-hero__definition-copy {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  overflow-wrap: break-word;
}

.crm-builder-trust-band {
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 2.5rem 0 3rem;
}

.crm-builder-trust {
  background: #ffffff;
  border: 1px solid #ffffff14;
  border-radius: 24px;
  box-shadow: 5px 8px 53px -4px #2a4dfb14;
  padding: 24px 20px 20px;
}

.crm-builder-trust__intro {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.crm-builder-trust__eyebrow {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  margin: 0;
}

.crm-builder-trust__eyebrow-bar {
  background: linear-gradient(180deg, #2a4dfb 0%, #7a5ff8 100%);
  border-radius: 999px;
  display: inline-block;
  height: 16px;
  width: 2px;
}

.crm-builder-trust__eyebrow-text {
  background: linear-gradient(90deg, #2a4dfb 0%, #7a5ff8 100%);
  background-clip: text;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.crm-builder-trust__title {
  color: #111827;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 28px;
  margin: 0;
}

.crm-builder-trust__desc {
  color: rgba(17, 24, 39, 0.72);
  font-size: 14px;
  line-height: 1.55;
  margin: 12px 0 0;
  max-width: 40rem;
}

.crm-builder-trust__link {
  align-items: center;
  color: #4d7bff;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 0.4rem;
  line-height: 1.25;
  margin-top: 18px;
  text-decoration: none;
}

.crm-builder-trust__link:hover {
  color: #8b9dff;
}

.crm-builder-trust__stats {
 
  border-radius: 8px;
  background: #19182F;

  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

.crm-builder-trust__stat {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 24px 22px;
  position: relative;
}

.crm-builder-trust__stat + .crm-builder-trust__stat::before {
  background: rgba(255, 255, 255, 0.12);
  content: "";
  height: 1px;
  left: 22px;
  position: absolute;
  right: 22px;
  top: 0;
}

.crm-builder-trust__stat-value {
  color: #fff;
  display: block;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.crm-builder-trust__stat-label {
  color: #4d7bff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  margin: 8px 0 0;
}

.crm-builder-trust__stat-detail {
  color: rgba(255, 255, 255, 0.48);
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
  margin: 8px 0 0;
  max-width: 12.5rem;
}

@media (max-width: 767px) {
  .crm-builder-trust__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-builder-trust__stat {
    padding: 14px 12px;
  }

  .crm-builder-trust__stat:nth-child(2n) {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  .crm-builder-trust__stat:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .crm-builder-trust__stat + .crm-builder-trust__stat::before {
    display: none;
  }

  .crm-builder-trust__stat-value {
    font-size: 20px;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  .crm-builder-trust__stat-label {
    font-size: 12px;
  }

  .crm-builder-trust__stat-detail {
    font-size: 11px;
    line-height: 1.4;
    max-width: none;
  }
}

@media (min-width: 640px) {
  .crm-builder-hero {
    padding: 2.75rem 0 3.5rem;
  }

  .crm-builder-hero__title {
    font-size: 2.75rem;
    line-height: 1;
  }

  .crm-builder-hero__eyebrow {
    font-size: 0.875rem;
  }

  .crm-builder-hero__definition {
    padding: 18px 20px 20px;
  }

  .crm-builder-trust__title {
    font-size: 22px;
    line-height: 30px;
  }
}

@media (min-width: 1024px) {
  .crm-builder-hero {
    padding: 50px 0 4rem;
  }

  .crm-builder-hero__inner {
    gap: 1.75rem;
  }

  .crm-builder-hero__top {
    align-items: start;
    gap: 2.5rem;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .crm-builder-hero__title {
    font-size: 52px;
    line-height: 1;
  }

  .crm-builder-score {
    bottom: auto;
    left: -3rem;
    margin: 0;
    position: absolute;
    top: 85%;
  }

  .crm-builder-hero__definition {
    margin-top: 0.75rem;
    max-width: 70%;
  }

  .crm-builder-trust-band {
    padding-bottom: 4rem;
  }

  .crm-builder-trust {
    padding: 36px 36px 28px;
  }

  .crm-builder-trust__intro {
    align-items: start;
    gap: 2.5rem;
    grid-template-columns: minmax(13rem, 0.42fr) minmax(0, 1fr);
    margin-bottom: 1.75rem;
  }

  .crm-builder-trust__title {
    font-size: 24px;
    line-height: 36px;
  }

  .crm-builder-trust__stats {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .crm-builder-trust__stat {
    flex: 1 1 0;
    padding: 28px 24px;
  }

  .crm-builder-trust__stat + .crm-builder-trust__stat::before {
    bottom: 28px;
    height: auto;
    left: 0;
    right: auto;
    top: 28px;
    width: 1px;
  }

  .crm-builder-trust__stat-value {
    font-size: 36px;
  }
}

.crm-builder-tco {
  background: #f8f9fc;
  color: #111827;
  padding: 2.5rem 0 1.5rem;
}

.crm-builder-tco__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.crm-builder-tco__intro {
  display: grid;
  gap: 0.75rem;
}

.crm-builder-tco__eyebrow {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  margin: 0;
}

.crm-builder-tco__eyebrow-bar {
  background: linear-gradient(180deg, #2a4dfb 0%, #7a5ff8 100%);
  border-radius: 999px;
  display: inline-block;
  height: 16px;
  width: 2px;
}
.crm-builder-tco__eyebrow-text {
  background: linear-gradient(90deg, #2A4DFB 0%, #7A5FF8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.crm-builder-tco__title {
  color: #111827;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.35;
  margin: 0;
}

.crm-builder-tco__title-accent {
  background: linear-gradient(90deg, #2A4DFB 50%, #7A5FF8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.crm-builder-tco__desc {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.55;
  margin: 10px 0 0;
  max-width: 44rem;
}

.crm-builder-tco__panel {
  background: #fff;
  border: 1px solid #eceef4;
  border-radius: 24px;
  box-shadow: 0 8px 30px rgba(17, 24, 39, 0.04);
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.crm-builder-tco__table {
  border-collapse: collapse;
  border-spacing: 0;
  min-width: 44rem;
  table-layout: fixed;
  width: 100%;
}

.crm-builder-tco__table tr {
  height: 78px;
}

.crm-builder-tco__table th,
.crm-builder-tco__table td {
  border-bottom: 1px solid #e7e9f0;
  border-right: 1px solid #e7e9f0;
  box-sizing: border-box;
  height: 78px;
  padding: 8px 18px;
  text-align: left;
  vertical-align: middle;
}

.crm-builder-tco__table th:last-child,
.crm-builder-tco__table td:last-child {
  border-right: 0;
}

.crm-builder-tco__table th:first-child,
.crm-builder-tco__table td:first-child {
  width: 34%;
}

.crm-builder-tco__table thead th {
  background: #fff;
  font-weight: 700;
}

.crm-builder-tco__table thead th.crm-builder-tco__col--metric {
  background: #EFF4FB;
}

.crm-builder-tco__table thead th.crm-builder-tco__col--saas {
  background: #fff1f1;
}

.crm-builder-tco__table thead th.crm-builder-tco__col--custom {
  background: #e8f8f0;
}

.crm-builder-tco__table tbody th,
.crm-builder-tco__table tbody td {
  background: #fff;
  font-weight: 500;
}

.crm-builder-tco__table tbody tr:nth-child(even) th,
.crm-builder-tco__table tbody tr:nth-child(even) td {
  background: #F9FBFE;
}

.crm-builder-tco__table tbody tr:last-child th,
.crm-builder-tco__table tbody tr:last-child td {
  border-bottom: 0;
}

.crm-builder-tco__heading {
  align-items: center;
  display: inline-flex;
  gap: 10px;
}

.crm-builder-tco__heading-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.crm-builder-tco__heading-text {
  color: #0B214D;

  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}
.crm-builder-tco__col--saas .crm-builder-tco__heading-text {
  color: #DB3116;
  
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.crm-builder-tco__col--custom .crm-builder-tco__heading-text {
  color:  #017B51;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.crm-builder-tco__heading-note {
  color:#0B214D;

  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

.crm-builder-tco__icon {
  align-items: center;
  background: #eef2ff;
  border: 1px dashed #c7d2fe;
  border-radius: 999px;
  display: inline-flex;
  flex-shrink: 0;
  height: 36px;
  justify-content: center;
  overflow: hidden;
  width: 36px;
}

.crm-builder-tco__icon img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.crm-builder-tco__icon:has(img):not(.crm-builder-tco__icon--metric):not(.crm-builder-tco__icon--saas):not(.crm-builder-tco__icon--custom):not(.crm-builder-tco__icon--row) {
  background: transparent;
  border-color: transparent;
}

.crm-builder-tco__icon--header {
  border-radius: 8px;
  height: 28px;
  width: 28px;
}

.crm-builder-tco__icon--metric,
.crm-builder-tco__icon--saas,
.crm-builder-tco__icon--custom {
  background: #fff;
  border: 0;
  box-shadow: 0 0 0 1px #eef0f5;
  height: 48px;
  width: 48px;
}

.crm-builder-tco__icon--row {
  background: #E7EFFD;

  border: 0;
  box-shadow: 0 0 0 1px #eef0f5;
}

.crm-builder-tco__icon--row img {
  height: 20px;
  width: 20px;
}

.crm-builder-tco__icon--metric img {
  height: 24px;
  width: 24px;
}

.crm-builder-tco__icon--saas img {
  height: 22px;
  width: auto;
  max-width: 36px;
}

.crm-builder-tco__icon--custom img {
  height: 24px;
  width: auto;
  max-width: 30px;
}

.crm-builder-tco__col--saas .crm-builder-tco__icon--header {
  background: #ffe4e4;
  border-color: #fecaca;
}

.crm-builder-tco__col--custom .crm-builder-tco__icon--header {
  background: #d1fae5;
  border-color: #6ee7b7;
}

.crm-builder-tco__metric {
  align-items: center;
  display: flex;
  gap: 12px;
}

.crm-builder-tco__metric-label {
  color: #111827;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.crm-builder-tco__value {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.crm-builder-tco__value--saas {
  color: #DB3116;
  background: #FDF1F1;
  display: inline-block;
  width: fit-content;
  height: auto;
  opacity: 1;
  border-radius: 111px;
  padding-top: 4px;
  padding-right: 12px;
  padding-bottom: 4px;
  padding-left: 12px;
  white-space: nowrap;
}

.crm-builder-tco__value--custom {
  color: #12b76a;
  background: #E4F8F2;
  width: fit-content;
  height: auto;
  opacity: 1;
  border-radius: 111px;
  padding-top: 4px;
  padding-right: 12px;
  padding-bottom: 4px;
  padding-left: 12px;
  white-space: nowrap;
}

.crm-builder-tco__detail {
  color:#4D4D4D;

  display: block;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  margin-top: 4px;
  max-width: 18rem;
}

.crm-builder-tco__mobile-label,
.crm-builder-tco__mobile-head,
.crm-builder-tco__chevron {
  display: none;
}

.crm-builder-tco__more {
  display: none;
}

@media (min-width: 640px) {
  .crm-builder-tco {
    padding: 2.75rem 0 1.75rem;
  }

  .crm-builder-tco__title {
    font-size: 22px;
    line-height: 30px;
  }

  .crm-builder-tco__table th,
  .crm-builder-tco__table td {
    padding: 8px 22px;
  }
}

@media (min-width: 1024px) {
  .crm-builder-tco {
    padding: 3.5rem 0 2rem;
  }

  .crm-builder-tco__intro {
    align-items: start;
    gap: 2.5rem;
    grid-template-columns: minmax(13rem, 0.42fr) minmax(0, 1fr);
  }

  .crm-builder-tco__title {
    font-size: 24px;
    line-height: 36px;
  }

  .crm-builder-tco__table th,
  .crm-builder-tco__table td {
    padding: 8px 24px;
  }
}

@media (max-width: 767px) {
  .crm-builder-tco__panel {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .crm-builder-tco__table {
    align-self: stretch;
    display: block;
    min-width: 0;
    width: 100%;
  }

  .crm-builder-tco__mobile-head {
    align-items: flex-start;
    background: #f4f7ff;
    border: 1px solid #e6ebf5;
    border-radius: 16px;
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    padding: 16px;
    width: 100%;
  }

  .crm-builder-tco__mobile-head .crm-builder-tco__icon--metric {
    height: 40px;
    width: 40px;
  }

  .crm-builder-tco__mobile-head-copy {
    min-width: 0;
  }

  .crm-builder-tco__mobile-head-title {
    color: #0b214d;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.35;
    margin: 0;
    text-transform: uppercase;
  }

  .crm-builder-tco__table thead {
    display: none;
  }

  .crm-builder-tco__table tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .crm-builder-tco__table tbody tr {
    background: #fff;
    border: 1px solid #e6ebf5;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.04);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    overflow: hidden;
    padding: 12px;
  }

  .crm-builder-tco__table tbody th,
  .crm-builder-tco__table tbody td {
    border: 0;
    display: block;
    height: auto;
    min-width: 0;
    width: auto;
  }

  .crm-builder-tco__table tbody th {
    background: transparent;
    grid-column: 1 / -1;
    padding: 2px 4px 10px;
  }

  .crm-builder-tco__table tbody tr:nth-child(even) th {
    background: transparent;
  }

  .crm-builder-tco__table tbody tr:nth-child(odd) td.crm-builder-tco__col--saas,
  .crm-builder-tco__table tbody tr:nth-child(even) td.crm-builder-tco__col--saas {
    background: #fdf1f1;
  }

  .crm-builder-tco__table tbody tr:nth-child(odd) td.crm-builder-tco__col--custom,
  .crm-builder-tco__table tbody tr:nth-child(even) td.crm-builder-tco__col--custom {
    background: #e8f8f1;
  }

  .crm-builder-tco__table th:first-child,
  .crm-builder-tco__table td:first-child {
    width: auto;
  }

  .crm-builder-tco__metric {
    align-items: center;
    min-width: 0;
    width: 100%;
  }

  .crm-builder-tco__metric-label {
    color: #0b214d;
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 700;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .crm-builder-tco__chevron {
    color: #98a2b3;
    display: block;
    flex-shrink: 0;
    height: 18px;
    margin-left: auto;
    width: 18px;
  }

  .crm-builder-tco__table tbody td {
    border-radius: 12px;
    padding: 10px;
  }

  .crm-builder-tco__table tbody td.crm-builder-tco__col--saas {
    background: #fdf1f1;
    grid-column: 1 / -1;
  }

  .crm-builder-tco__table tbody td.crm-builder-tco__col--custom {
    background: #e8f8f1;
    grid-column: 1 / -1;
    margin-top: 8px;
  }

  .crm-builder-tco__mobile-label {
    align-items: flex-start;
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
  }

  .crm-builder-tco__mobile-label-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .crm-builder-tco__mobile-label-note {
    color: #0b214d;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
  }

  .crm-builder-tco__mobile-label img {
    flex-shrink: 0;
    height: 16px;
    object-fit: contain;
    width: 16px;
  }

  .crm-builder-tco__mobile-label-text {
    color: #344054;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
  }

  .crm-builder-tco__value--saas,
  .crm-builder-tco__value--custom {
    background: transparent;
    border-radius: 0;
    display: block;
    font-size: 15px;
    padding: 0;
    white-space: normal;
    width: auto;
  }

  .crm-builder-tco__detail {
    color: #111827;
    font-size: 12px;
    line-height: 1.4;
    max-width: none;
  }

  .crm-builder-tco__panel:not(.is-expanded) .crm-builder-tco__table tbody tr:nth-child(n + 4) {
    display: none;
  }

  .crm-builder-tco__panel:has(tbody tr:nth-child(4)):not(.is-expanded) .crm-builder-tco__more {
    align-items: center;
    background: #2a4dfb;
    border: 1px solid #d7def8;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 6px;
    justify-content: center;
    line-height: 1.2;
    margin-top: 15px;
    padding: 10px 16px;
  }

  .crm-builder-tco__more-icon {
    display: block;
    height: 16px;
    width: 16px;
  }
}

.crm-builder-modules {
  background: #f8f9fc;
  color: #111827;
  padding: 1.5rem 0 3rem;
}

.crm-builder-modules__inner {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.crm-builder-modules__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.crm-builder-modules__eyebrow {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  margin: 0;
}

.crm-builder-modules__eyebrow-bar {
  background: linear-gradient(180deg, #2a4dfb 0%, #7a5ff8 100%);
  border-radius: 999px;
  display: inline-block;
  height: 16px;
  width: 2px;
}

.crm-builder-modules__eyebrow-text {
  background: linear-gradient(90deg, #2A4DFB 0%, #7A5FF8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  
}

.crm-builder-modules__copy {
  text-align: center;
  width: 100%;
}

.crm-builder-modules__title {
  color: #4D4D4D;

  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.35;
  margin: 0;
}

.crm-builder-modules__desc {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.55;
  margin: 10px auto 0;
  max-width: 44rem;
  width: 100%;
}

.crm-builder-modules__swiper {
  overflow: hidden;
  width: 100%;
}

.crm-builder-modules__swiper .swiper-wrapper {
  align-items: stretch;
}

.crm-builder-modules__swiper .swiper-slide {
  display: flex;
  height: auto;
}

.crm-builder-modules__card {
  background: #fff;
  border: 1px solid #eceef4;
  border-radius: 7px;
  box-shadow: 0 8px 30px rgba(17, 24, 39, 0.04);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.crm-builder-modules__media {
  height: 180px;
  position: relative;
  flex-shrink: 0;
}

.crm-builder-modules__shot,
.crm-builder-modules__media-placeholder {
  display: block;
  height: 100%;
  width: 100%;
}

.crm-builder-modules__shot {
  object-fit: cover;
}

.crm-builder-modules__media-placeholder {
  background:
    linear-gradient(180deg, rgba(42, 77, 251, 0.06) 0%, rgba(122, 95, 248, 0.1) 100%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 10px,
      rgba(42, 77, 251, 0.04) 10px,
      rgba(42, 77, 251, 0.04) 11px
    );
  border-bottom: 1px dashed #c7d2fe;
}

.crm-builder-modules__badge {
  align-items: center;
  background: #fff;
  border: 1px dashed #c7d2fe;
  border-radius: 12px;
  bottom: -22px;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.1);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  left: 20px;
  position: absolute;
  width: 44px;
  z-index: 1;
}

.crm-builder-modules__badge:has(img) {
  border-color: transparent;
}

.crm-builder-modules__badge img {
  display: block;
  height: 24px;
  object-fit: contain;
  width: 24px;
}

.crm-builder-modules__icon-placeholder {
  background: rgba(122, 95, 248, 0.18);
  border: 1px dashed rgba(122, 95, 248, 0.45);
  border-radius: 8px;
  display: inline-block;
  height: 18px;
  width: 18px;
}

.crm-builder-modules__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.65rem;
  padding: 2.15rem 1.25rem 1.25rem;
}

.crm-builder-modules__card-title {
  color: #111827;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 0;
}

.crm-builder-modules__card-copy {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.crm-builder-modules__tags {
  display: flex;
  flex-wrap: wrap;
  color: #B9C0FF;
  gap: 8px;
  list-style: none;
  margin: auto 0 0;
  padding: 0;
}

.crm-builder-modules__tags li {
  border-radius: 2px;
  color: #4D5EF9;

  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  padding: 4px 4px;
  background: #E8EBFF;
  border: 0.5px solid #B9C0FF
}

.crm-builder-modules__footer {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.crm-builder-modules__nav {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
}

@media (min-width: 640px) {
  .crm-builder-modules {
    padding: 1.75rem 0 3.5rem;
  }

  .crm-builder-modules__title {
    font-size: 22px;
    line-height: 30px;
  }

}

@media (min-width: 1024px) {
  .crm-builder-modules {
    padding: 2rem 0 4.5rem;
  }

  .crm-builder-modules__intro {
    min-height: 4.75rem;
    position: relative;
  }

  .crm-builder-modules__eyebrow {
    left: 0;
    position: absolute;
    top: 0.2rem;
  }

  .crm-builder-modules__copy {
    margin: 0 auto;
    max-width: 44rem;
  }

  .crm-builder-modules__title {
    font-size: 24px;
    line-height: 36px;
    max-width: 100%;
  }

  .crm-builder-modules__body {
    padding: 2.25rem 1.35rem 1.35rem;
  }
}

@media (max-width: 639px) {
  .crm-builder-modules__footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .crm-builder-modules__nav {
    justify-content: flex-start;
  }

  .crm-builder-dash__stage {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "label count value"
      "bar bar bar";
  }

  .crm-builder-dash__stage-label {
    grid-area: label;
  }

  .crm-builder-dash__bar {
    grid-area: bar;
  }

  .crm-builder-dash__stage-count {
    grid-area: count;
  }

  .crm-builder-dash__stage-value {
    grid-area: value;
  }

  .crm-builder-dash__metrics {
    grid-template-columns: 1fr;
  }
}

.crm-builder-verticals {
  background-color: #07072a;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  padding: 2.5rem 0 3rem;
}

.crm-builder-verticals__inner {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.crm-builder-verticals__intro {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.crm-builder-verticals__eyebrow,
.crm-builder-stack__eyebrow {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  margin: 0;
}

.crm-builder-verticals__eyebrow-bar,
.crm-builder-stack__eyebrow-bar {
  background: linear-gradient(180deg, #2a4dfb 0%, #7a5ff8 100%);
  border-radius: 999px;
  display: inline-block;
  height: 16px;
  width: 2px;
}

.crm-builder-verticals__eyebrow-text,
.crm-builder-stack__eyebrow-text {
  background: linear-gradient(90deg, #2A4DFB 0%, #7A5FF8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.crm-builder-verticals__copy {
  text-align: center;
  width: 100%;
}

.crm-builder-verticals__title {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.35;
  margin: 0;
}

.crm-builder-verticals__desc {
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 1.55;
  margin: 10px auto 0;
  max-width: 100%;
  text-align: left;
  width: fit-content;
}

.crm-builder-verticals__desc-line {
  display: block;
}

.crm-builder-verticals__layout {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

.crm-builder-verticals__swiper,
.crm-builder-verticals__nav {
  display: none;
}

.crm-builder-verticals__nav .offerings-control {
  background: #2a4dfb;
  color: white;
}

.crm-builder-verticals__nav .offerings-control:hover {
  background: #a8beff;
}

.crm-builder-verticals__list {
  display: flex;
  flex-direction: column;
}

.crm-builder-verticals__trigger {
  align-items: flex-start;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: rgba(176, 186, 224, 0.58);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  gap: 8px;
  padding: 20px 24px;
  position: relative;
  text-align: left;
  transition: background-color 0.2s ease, color 0.2s ease;
  width: 100%;
}

.crm-builder-verticals__item + .crm-builder-verticals__item .crm-builder-verticals__trigger {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
}

.crm-builder-verticals__trigger:hover,
.crm-builder-verticals__trigger:focus-visible {
  color: rgba(255, 255, 255, 0.92);
}

.crm-builder-verticals__trigger:focus-visible {
  outline: 2px solid #5b7cff;
  outline-offset: 2px;
}

.crm-builder-verticals__trigger.is-active {
  border-top-color: transparent;
}

.crm-builder-verticals__trigger.is-active {
  background: #0b1238;
  border-radius: 10px;
  color: #fff;
  z-index: 1;
}

.crm-builder-verticals__trigger.is-active::before {
  background: linear-gradient(180deg, #2a4dfb 0%, #7a5ff8 100%);
  border-radius: 10px 0 0 10px;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 4px;
}

.crm-builder-verticals__number {
  color: rgba(176, 186, 224, 0.48);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.crm-builder-verticals__trigger.is-active .crm-builder-verticals__number {
  color: rgba(255, 255, 255, 0.72);
}

.crm-builder-verticals__label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.crm-builder-verticals__panel {
  background: rgba(12, 16, 48, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  display: none;
  padding: 1.5rem;
}

.crm-builder-verticals__panel.is-active {
  display: block;
}

@media (max-width: 1023px) {
  .crm-builder-verticals__panel.is-active {
    margin: 0.75rem 0 0.85rem;
  }
}

@media (max-width: 767px) {
  .crm-builder-verticals__list {
    display: none;
  }

  .crm-builder-verticals__swiper {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .crm-builder-verticals__swiper .crm-builder-verticals__panel {
    display: block;
    height: auto;
    margin: 0;
  }

  .crm-builder-verticals__nav {
    display: flex;
    gap: 10px;
    justify-content: center;
  }
}

.crm-builder-verticals__badge {
  align-items: center;
  background: rgba(91, 124, 255, 0.18);
  border: 1px dashed rgba(91, 124, 255, 0.45);
  border-radius: 14px;
  display: inline-flex;
  height: 52px;
  justify-content: center;
  margin-bottom: 1.15rem;
  width: 52px;
}

.crm-builder-verticals__badge:has(img) {
  border-color: transparent;
}

.crm-builder-verticals__badge img {
  display: block;
  height: 28px;
  object-fit: contain;
  width: 28px;
}

.crm-builder-verticals__icon-placeholder {
  background: rgba(122, 95, 248, 0.35);
  border: 1px dashed rgba(185, 192, 255, 0.55);
  border-radius: 8px;
  display: inline-block;
  height: 20px;
  width: 20px;
}

.crm-builder-verticals__panel-title {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 1.25rem;
}

.crm-builder-verticals__block + .crm-builder-verticals__block {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 1.15rem;
  padding-top: 1.15rem;
}

.crm-builder-verticals__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  margin: 0 0 0.45rem;
  text-transform: uppercase;
}

.crm-builder-verticals__kicker--challenge {
  color: #ff5a3c;
}

.crm-builder-verticals__kicker--architecture {
  color: #22c55e;
}

.crm-builder-verticals__text {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.crm-builder-verticals__proof-link {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.crm-builder-verticals__proof-link:hover,
.crm-builder-verticals__proof-link:focus-visible {
  color: #c7d2fe;
}

.crm-builder-stack {
  background: #fff;
  color: #111827;
  padding: 2.5rem 0 3rem;
}

.crm-builder-stack__inner {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.crm-builder-stack__intro {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.crm-builder-stack__copy {
  text-align: center;
  width: 100%;
}

.crm-builder-stack__title {
  color: #171717;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.35;
  margin: 0;
}

.crm-builder-stack__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

.crm-builder-stack__card {
  background: radial-gradient(
    55.91% 50.67% at 50% 37.56%,
    #F6F7FF 0%,
    #FFFFFF 100%
  );

  border: 1px solid #eceef4;
  border-radius: 9px;

  box-shadow: 3px 6px 14px 0px #00003F0F;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  min-width: 0;
  overflow: visible;
  padding: 0 0 1.15rem;
  position: relative;
  width: 100%;
}

.crm-builder-stack__media {
  border-radius: 8px 8px 0 0;
  flex: 0 0 210px;
  height: 210px;
  min-height: 210px;
  overflow: hidden;
}

.crm-builder-stack__shot,
.crm-builder-stack__media-placeholder {
  display: block;
  height: 100%;
  width: 100%;
}

.crm-builder-stack__shot {
  object-fit: cover;
}

.crm-builder-stack__media-placeholder {
  background:
    linear-gradient(180deg, rgba(42, 77, 251, 0.06) 0%, rgba(122, 95, 248, 0.1) 100%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 10px,
      rgba(42, 77, 251, 0.04) 10px,
      rgba(42, 77, 251, 0.04) 11px
    );
}

.crm-builder-stack__card-title {
  color: #2a4dfb;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.3;
  margin: 1rem 1.1rem 0.65rem;
  text-transform: uppercase;
}

.crm-builder-stack__list {
  color: #4d4d4d;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  list-style: disc;
  margin: 0 1.1rem;
  padding-left: 1.15rem;
}

.crm-builder-stack__list li {
  font-size: 14px;
  font-weight: 600;
}

.crm-builder-stack__list li::marker {
  font-size: 14px;
  font-weight: 600;
}

.crm-builder-stack__list li + li {
  margin-top: 0.2rem;
}

.crm-builder-stack-marquee {
  margin-top: 2.5rem;
  overflow: hidden;
  padding: 0.5rem 0;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 4%,
    #000 96%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 4%,
    #000 96%,
    transparent 100%
  );
}

.crm-builder-stack-marquee:focus-visible {
  outline: 2px solid #2a4dfb;
  outline-offset: 4px;
}

.crm-builder-stack-marquee__track {
  display: flex;
  width: max-content;
  animation: crmBuilderStackMarquee 36s linear infinite;
  will-change: transform;
}

.crm-builder-stack-marquee:hover .crm-builder-stack-marquee__track,
.crm-builder-stack-marquee:focus .crm-builder-stack-marquee__track,
.crm-builder-stack-marquee:focus-within .crm-builder-stack-marquee__track {
  animation-play-state: paused;
}

.crm-builder-stack-marquee__group {
  --crm-stack-marquee-gap: 42px;
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  gap: var(--crm-stack-marquee-gap);
  padding-inline: calc(var(--crm-stack-marquee-gap) / 2);
  width: max-content;
}

.crm-builder-stack-marquee__pill {
  align-items: center;
  background: #EFF1F6;
  border: 1px solid #e6e8ec;
  border-radius: 1px;
  display: inline-flex;
  flex-shrink: 0;
  gap: 4px;
  height: 40px;
  opacity: 1;
  padding: 10px 16px;
  width: max-content;
  white-space: nowrap;
}

.crm-builder-stack-marquee__pill img {
  display: block;
  flex-shrink: 0;
  height: 18px;
  object-fit: contain;
  width: 18px;
}

.crm-builder-stack-marquee__pill span {
  color: #3f3f46;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  overflow: visible;
}

@keyframes crmBuilderStackMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-25%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-builder-stack-marquee__track {
    animation: none;
    transform: none;
  }
}

@media (min-width: 640px) {
  .crm-builder-verticals,
  .crm-builder-stack {
    padding: 2.75rem 0 3.5rem;
  }

  .crm-builder-verticals__title,
  .crm-builder-stack__title {
    font-size: 22px;
    line-height: 30px;
    max-width: 100%;
  }

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

@media (min-width: 1024px) {
  .crm-builder-verticals,
  .crm-builder-stack {
    padding: 3.5rem 0 4.5rem;
  }

  .crm-builder-verticals__intro,
  .crm-builder-stack__intro {
    min-height: 4.75rem;
    position: relative;
  }

  .crm-builder-verticals__eyebrow,
  .crm-builder-stack__eyebrow {
    left: 0;
    position: absolute;
    top: 0.2rem;
  }

  .crm-builder-stack__copy {
    margin: 0 auto;
    max-width: 44rem;
  }

  .crm-builder-verticals__copy {
    margin: 0 auto;
    max-width: 100%;
  }

  .crm-builder-verticals__title,
  .crm-builder-stack__title {
    font-size: 24px;
    line-height: 36px;
  }

  .crm-builder-verticals__title {
    margin-inline: auto;
    max-width: 44rem;
  }

  .crm-builder-verticals__layout {
    display: block;
  }

  .crm-builder-verticals__label {
    font-size: 16px;
  }

  .crm-builder-verticals__list {
    align-items: start;
    column-gap: 2rem;
    display: grid;
    grid-template-columns: minmax(22rem, 1fr) minmax(0, 1.05fr);
    height: auto;
    min-height: 0;
  }

  .crm-builder-verticals__item {
    display: contents;
  }

  .crm-builder-verticals__item:has(> .crm-builder-verticals__trigger.is-active) + .crm-builder-verticals__item > .crm-builder-verticals__trigger {
    border-top-color: transparent;
  }

  .crm-builder-verticals__trigger {
    align-self: start;
    flex: 0 0 auto;
    gap: 4px;
    grid-column: 1;
    justify-content: center;
    min-height: 0;
    padding-block: 12px;
  }

  .crm-builder-verticals__panel {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 1.75rem 1.85rem;
  }

  .crm-builder-verticals__panel.is-active {
    align-self: start;
    grid-column: 2;
    grid-row: 1 / span var(--crm-vertical-count, 6);
    justify-self: stretch;
    margin: 0;
    width: 100%;
  }

  .crm-builder-stack__grid {
    gap: 1.35rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .crm-builder-stack__card:nth-child(2)::after {
    color: #8b93d9;
    font-size: 11px;
    font-weight: 700;
    position: absolute;
    right: -0.55rem;
    top: calc(160px + 1.05rem);
    z-index: 2;
  }
}

.crm-builder-pillars {
  background: #f7f8fc;
  color: #111827;
  padding: 2.5rem 0 3rem;
}

.crm-builder-pillars__inner {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.crm-builder-pillars__intro {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.crm-builder-pillars__eyebrow {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  margin: 0;
}

.crm-builder-pillars__eyebrow-bar {
  background: linear-gradient(180deg, #2a4dfb 0%, #7a5ff8 100%);
  border-radius: 999px;
  display: inline-block;
  height: 16px;
  width: 2px;
}

.crm-builder-pillars__eyebrow-text {
  background: linear-gradient(90deg, #2a4dfb 0%, #7a5ff8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.crm-builder-pillars__title {
  color: #171717;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.35;
  margin: 0;
  max-width: 40rem;
}

.crm-builder-pillars__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}


.crm-builder-pillars__card {
  background: radial-gradient(
    55.91% 44.93% at 50% 33.31%,
    #F6F7FF 0%,
    #FFFFFF 100%
  );
  border: 1px solid #EFF1F6;
  border-radius: 7px;
  box-shadow: 3px 6px 14px 0px #00003F0F;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: auto;
  min-width: 0;
  width: 100%;
  padding: 1.35rem 1.25rem 1.4rem;
}

.crm-builder-pillars__icon {
  align-items: center;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.crm-builder-pillars__icon img {
  display: block;
  height: 28px;
  object-fit: contain;
  width: 28px;
}

.crm-builder-pillars__icon-placeholder {
  background: rgba(42, 77, 251, 0.1);
  border: 1px dashed rgba(42, 77, 251, 0.4);
  border-radius: 10px;
  display: inline-block;
  height: 32px;
  width: 32px;
}

.crm-builder-pillars__card-title {
  color: #2a4dfb;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 0;
}

.crm-builder-pillars__card-copy {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.crm-builder-pillars__cta {
  display: flex;
  justify-content: center;
  padding-top: 0.35rem;
}

.crm-builder-stands-out {
  background-color: #050447;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  padding: 2.5rem 0 3rem;
}

.crm-builder-stands-out__inner {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.crm-builder-stands-out__intro {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.crm-builder-stands-out__eyebrow {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  margin: 0;
}

.crm-builder-stands-out__eyebrow-bar {
  background: linear-gradient(180deg, #2a4dfb 0%, #7a5ff8 100%);
  border-radius: 999px;
  display: inline-block;
  height: 16px;
  width: 2px;
}

.crm-builder-stands-out__eyebrow-text {
  background: linear-gradient(90deg, #2a4dfb 0%, #7a5ff8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.crm-builder-stands-out__title {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.35;
  margin: 0;
}

.crm-builder-stands-out__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

.crm-builder-stands-out__card {
  background: radial-gradient(
    55.91% 44.93% at 50% 33.31%,
    rgba(246, 247, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
  border: 1px solid #EFF1F60F;
  border-radius: 11px;
  box-shadow: 3px 6px 14px 0px #00003F0F;
  backdrop-filter: blur(91px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: auto;
  min-width: 0;
  overflow: hidden;
  padding: 1rem 1rem 1.35rem;
  width: 100%;
}

.crm-builder-stands-out__media {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.crm-builder-stands-out__shot,
.crm-builder-stands-out__media-placeholder {
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.crm-builder-stands-out__shot {
  object-fit: cover;
}

.crm-builder-stands-out__media-placeholder {
  background:
    linear-gradient(180deg, rgba(42, 77, 251, 0.16) 0%, rgba(122, 95, 248, 0.22) 100%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.05) 10px,
      rgba(255, 255, 255, 0.05) 11px
    );
}

.crm-builder-stands-out__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  padding: 0 0.15rem;
}

.crm-builder-stands-out__number {
  background: linear-gradient(90deg, #2A4DFB 57.12%, #0026E3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0;
}

.crm-builder-stands-out__card-title {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0;
}

.crm-builder-stands-out__card-copy {
  color: rgba(255, 255, 255, 0.64);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

@media (min-width: 640px) {
  .crm-builder-pillars,
  .crm-builder-stands-out {
    padding: 2.75rem 0 3.5rem;
  }

  .crm-builder-pillars__title,
  .crm-builder-stands-out__title {
    font-size: 22px;
    line-height: 30px;
    max-width: 100%;
  }

  .crm-builder-pillars__grid,
  .crm-builder-stands-out__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .crm-builder-pillars,
  .crm-builder-stands-out {
    padding: 3.5rem 0 4.5rem;
  }

  .crm-builder-pillars__title,
  .crm-builder-stands-out__title {
    font-size: 24px;
    line-height: 36px;
    max-width: 46rem;
  }

  .crm-builder-pillars__grid,
  .crm-builder-stands-out__grid {
    gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .crm-builder-pillars__card {
    padding: 1.5rem 1.4rem 1.55rem;
  }

  .crm-builder-stands-out__card {
    gap: 1.15rem;
    min-height: 0;
    padding: 1.15rem 1.15rem 1.5rem;
  }

  .crm-builder-stands-out__media {
    border-radius: 14px;
  }

  .crm-builder-stands-out__card-title {
    font-size: 18px;
    line-height: 1.3;
  }

  .crm-builder-stands-out__card-copy {
    font-size: 14px;
    line-height: 1.6;
  }
}

.crm-builder-execution {
  background-color: #f7f8fc;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  color: #111827;
  padding: 2.5rem 0 3rem;
}

.crm-builder-execution__inner {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.crm-builder-execution__intro {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.crm-builder-execution__eyebrow {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  margin: 0;
}

.crm-builder-execution__eyebrow-bar {
  background: linear-gradient(180deg, #2a4dfb 0%, #7a5ff8 100%);
  border-radius: 999px;
  display: inline-block;
  height: 16px;
  width: 2px;
}

.crm-builder-execution__eyebrow-text {
  background: linear-gradient(90deg, #2a4dfb 0%, #7a5ff8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.crm-builder-execution__title {
  color: #171717;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin: 0;
  max-width: 18em;
}

.crm-builder-execution__steps {
  --exec-gap: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: var(--exec-gap);
  list-style: none;
  margin: 0;
  min-width: 0;
  padding: 0;
  position: relative;
}

.crm-builder-execution__step:not(:last-child)::before {
  background: linear-gradient(180deg, var(--exec-accent), var(--exec-next, var(--exec-accent)));
  content: "";
  height: calc(100% + var(--exec-gap));
  left: 19px;
  mask-image: repeating-linear-gradient(to bottom, #000 0 4px, transparent 4px 9px);
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 4px, transparent 4px 9px);
  position: absolute;
  top: 50%;
  width: 2px;
  z-index: 0;
}

.crm-builder-execution__step {
  --exec-accent: #3b6cf6;
  --exec-card: #f3f5ff;
  --exec-icon: #e6ebff;
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 40px minmax(0, 1fr);
  position: relative;
}

.crm-builder-execution__step--blue {
  --exec-accent: #2A4DFB;
  --exec-next: #1faf6e;
  --exec-card: #f3f5ff;
  --exec-icon: #e6ebff;
}

.crm-builder-execution__step--green {
  --exec-accent: #00A582;
  --exec-next: #6d5ef5;
  --exec-card: #f1fbf6;
  --exec-icon: #def6ea;
}

.crm-builder-execution__step--violet {
  --exec-accent: #6A38EE;
  --exec-next: #f59a23;
  --exec-card: #f5f3ff;
  --exec-icon: #ebe7ff;
}

.crm-builder-execution__step--amber {
  --exec-accent: #FD9612;
  --exec-next: #2f8cff;
  --exec-card: #fff8f1;
  --exec-icon: #ffeedd;
}

.crm-builder-execution__step--sky {
  --exec-accent: #149ED0;
  --exec-card: #f2f8ff;
  --exec-icon: #e3f0ff;
}

.crm-builder-execution__number {
  align-items: center;
  background: var(--exec-accent);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  height: 40px;
  justify-content: center;
  letter-spacing: 0.02em;
  line-height: 1;
  position: relative;
  width: 40px;
  z-index: 1;
}

.crm-builder-execution__card {
  align-items: flex-start;
  background: var(--exec-card);
  border-radius: 1px;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 44px minmax(0, 1fr);
  min-width: 0;
  padding: 0.55rem 0.85rem 0.6rem;
}

.crm-builder-execution__icon {
  align-items: center;
  background: var(--exec-icon);
  border-radius: 12px;
  display: inline-flex;
  flex-shrink: 0;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.crm-builder-execution__icon img {
  display: block;
  height: 26px;
  object-fit: contain;
  width: 26px;
}

.crm-builder-execution__icon-placeholder {
  border: 1.5px dashed color-mix(in srgb, var(--exec-accent) 55%, transparent);
  border-radius: 8px;
  display: block;
  height: 26px;
  width: 26px;
}

.crm-builder-execution__content {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.crm-builder-execution__step-title {
  color: #171717;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 0;
}

.crm-builder-execution__step-copy {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}

.crm-builder-execution__deliverable {
  align-items: flex-start;
  align-self: start;
  background: color-mix(in srgb, var(--exec-accent) 12%, #fff);
  border-radius: 999px;
  box-sizing: border-box;
  color: var(--exec-accent);
  display: inline-flex;
  font-size: 12.5px;
  gap: 8px;
  line-height: 1.35;
  margin: 0.15rem 0 0;
  max-width: 100%;
  padding: 4px 10px 4px 5px;
  width: fit-content;
}

.crm-builder-execution__check {
  color: var(--exec-accent);
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 1px;
}

.crm-builder-execution__check svg {
  display: block;
}

.crm-builder-execution__deliverable-text {
  min-width: 0;
}

.crm-builder-execution__deliverable strong {
  font-weight: 700;
}

@media (min-width: 640px) {
  .crm-builder-execution {
    padding: 2.75rem 0 3.5rem;
  }

  .crm-builder-execution__title {
    font-size: 28px;
  }

  .crm-builder-execution__steps {
    --exec-gap: 1rem;
  }

  .crm-builder-execution__step:not(:last-child)::before {
    left: 23px;
  }

  .crm-builder-execution__step {
    gap: 1.15rem;
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .crm-builder-execution__number {
    font-size: 13px;
    height: 48px;
    width: 48px;
  }

  .crm-builder-execution__card {
    border-radius: 18px;
    gap: 0.85rem;
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 0.6rem 1rem 0.65rem;
  }

  .crm-builder-execution__icon {
    border-radius: 14px;
    height: 48px;
    width: 48px;
  }

  .crm-builder-execution__step-title {
    font-size: 16px;
  }

  .crm-builder-execution__step-copy,
  .crm-builder-execution__deliverable {
    font-size: 13.5px;
  }
}

@media (min-width: 1024px) {
  .crm-builder-execution {
    padding: 3.5rem 0 4.5rem;
  }

  .crm-builder-execution__title {
    font-size: 32px;
    max-width: 16em;
  }

  .crm-builder-execution__step-title {
    font-size: 17px;
  }
}

@media (max-width: 767px) {
  .crm-builder-execution__deliverable {
    border-radius: 0;
    padding: 6px 12px;
  }
}

.crm-builder-results {
  background-color: #f7f8fc;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  color: #111827;
  padding: 2.5rem 0 3rem;
}

.crm-builder-results__inner {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.crm-builder-results__intro {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.crm-builder-results__eyebrow {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  margin: 0;
}

.crm-builder-results__eyebrow-bar {
  background: linear-gradient(180deg, #2a4dfb 0%, #7a5ff8 100%);
  border-radius: 999px;
  display: inline-block;
  height: 16px;
  width: 2px;
}

.crm-builder-results__eyebrow-text {
  background: linear-gradient(90deg, #2a4dfb 0%, #7a5ff8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.crm-builder-results__title {
  color: #171717;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.35;
  margin: 0;
  max-width: 48rem;
}

.crm-builder-results__layout {
  align-items: start;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: minmax(0, 1fr);
}

.crm-builder-results__copy {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 34rem;
}

.crm-builder-results__story-title {
  color: #2a4dfb;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.4;
  margin: 0;
}

.crm-builder-results__story-copy {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.crm-builder-results__cta {
  padding-top: 0.5rem;
}

.crm-builder-results__panel {
  background: #fff;
  border: 1px solid #eceef4;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(17, 24, 39, 0.04);
  display: grid;
  grid-template-columns: 1fr;
  min-width: 0;
  overflow: hidden;
}

.crm-builder-results__metric {
  align-items: center;
  column-gap: 0.5rem;
  display: grid;
  grid-template-areas:
    "value icon"
    "label label";
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  padding: 1rem 1.1rem;
  row-gap: 0.2rem;
}

.crm-builder-results__metric + .crm-builder-results__metric {
  border-top: 1px solid #eef0f6;
}

.crm-builder-results__icon {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  grid-area: icon;
  height: 56px;
  justify-content: flex-end;
  justify-self: end;
  width: 52px;
}

.crm-builder-results__icon img {
  display: block;
  height: 56px;
  max-width: none;
  object-fit: contain;
  width: 52px;
}

.crm-builder-results__icon-placeholder {
  background: rgba(42, 77, 251, 0.1);
  border: 1px dashed rgba(42, 77, 251, 0.4);
  border-radius: 8px;
  display: inline-block;
  height: 56px;
  width: 52px;
}

.crm-builder-results__value {
  color: #171717;
  font-size: 28px;
  font-weight: 800;
  grid-area: value;
  justify-self: start;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
}

.crm-builder-results__label {
  color: #6b7280;
  font-size: 13px;
  grid-area: label;
  line-height: 1.45;
  margin: 0;
}

@media (min-width: 640px) {
  .crm-builder-results {
    padding: 2.75rem 0 3.5rem;
  }

  .crm-builder-results__title {
    font-size: 22px;
    line-height: 30px;
  }

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

  .crm-builder-results__metric {
    padding: 1rem 1.15rem;
  }

  .crm-builder-results__metric:nth-child(odd) {
    border-right: 1px solid #eef0f6;
  }

  .crm-builder-results__metric:nth-child(-n + 2) {
    border-bottom: 1px solid #eef0f6;
  }

  .crm-builder-results__metric + .crm-builder-results__metric {
    border-top: 0;
  }
}

@media (min-width: 1024px) {
  .crm-builder-results {
    padding: 3.5rem 0 4.5rem;
  }

  .crm-builder-results__title {
    font-size: 24px;
    line-height: 36px;
    max-width: 52rem;
  }

  .crm-builder-results__layout {
    align-items: center;
    gap: 2.5rem;
    grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.1fr);
  }

  .crm-builder-results__story-title {
    font-size: 17px;
  }

  .crm-builder-results__value {
    font-size: 32px;
  }
}

.faq-section.faq-section--crm-builder {
  background-color: #050447;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  padding: 2.5rem 0 3rem !important;
}

.faq-section.faq-section--crm-builder .faq-section__inner,
.site-main > .faq-section.faq-section--crm-builder > .section-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem;
  grid-column: full;
  grid-template-columns: minmax(0, 1fr) !important;
  margin-inline: auto;
  max-width: 1520px;
  padding-inline: var(--site-gutter);
  width: 100%;
}

.faq-section.faq-section--crm-builder .faq-section__image {
  display: none !important;
}

.faq-section.faq-section--crm-builder .faq-section__intro {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  position: relative;
  text-align: left;
  width: 100%;
}

.faq-section.faq-section--crm-builder .faq-section__eyebrow {
  justify-content: flex-start;
  margin: 0 !important;
}

.faq-section.faq-section--crm-builder h2 {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.35;
  margin: 0 auto;
  max-width: 46rem;
  text-align: center;
}

.faq-section.faq-section--crm-builder .faq-section__description {
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 36rem;
  text-align: center;
}

.faq-section.faq-section--crm-builder {
  align-self: stretch !important;
  box-sizing: border-box;
  gap: 10px;
  justify-self: stretch;
  margin: 0;
  max-width: none !important;
  min-width: 0;
  width: 100% !important;
}
.faq-section.faq-section--crm-builder .faq-list {
  align-self: stretch !important;
  box-sizing: border-box;
  gap: 10px;
  justify-self: stretch;
  margin: 0;
  max-width: none !important;
  min-width: 0;
  width: 80% !important;
}

.faq-section.faq-section--crm-builder .faq-item {
  background: rgba(12, 16, 54, 0.88);
  border: 1px solid rgba(145, 168, 255, 0.1);
  border-radius: 8px;
  box-shadow: inset 3px 0 0 transparent;
  box-sizing: border-box;
  color: #fff;
  max-width: none !important;
  width: 100%;
}

.faq-section.faq-section--crm-builder .faq-item.is-open {
  background: rgba(18, 22, 68, 0.96);
  background-image: none;
  box-shadow: inset 3px 0 0 #2a4dfb;
}

.faq-section.faq-section--crm-builder .faq-item__heading,
.faq-section.faq-section--crm-builder .faq-item__summary,
.faq-section.faq-section--crm-builder .faq-item__answer,
.faq-section.faq-section--crm-builder .faq-item__answer-inner {
  max-width: none;
  width: 100%;
}

.faq-section.faq-section--crm-builder .faq-item__summary {
  box-sizing: border-box;
  color: #fff;
  font-size: 15px;
  min-height: 56px;
  padding: 16px 20px;
}

.faq-section.faq-section--crm-builder .faq-item__chevron {
  color: rgba(14 10 241 / 78%);
}

.faq-section.faq-section--crm-builder .faq-list .faq-item .faq-item__answer p {
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  max-width: none !important;
  padding: 0 20px 18px !important;
  width: 100%;
}

@media (min-width: 640px) {
  .faq-section.faq-section--crm-builder {
    padding: 2.75rem 0 3.5rem !important;
  }

  .faq-section.faq-section--crm-builder h2 {
    font-size: 22px;
    line-height: 30px;
  }
}

@media (min-width: 1024px) {
  .faq-section.faq-section--crm-builder {
    padding: 3.5rem 0 4.5rem !important;
  }

  .faq-section.faq-section--crm-builder .faq-section__inner,
  .site-main > .faq-section.faq-section--crm-builder > .section-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.5rem;
    grid-column: full;
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 1520px;
  }

  .faq-section.faq-section--crm-builder .faq-section__intro {
    min-height: 4.75rem;
  }

  .faq-section.faq-section--crm-builder .faq-section__eyebrow {
    left: 0;
    position: absolute;
    top: 0.2rem;
    white-space: nowrap;
  }

  .faq-section.faq-section--crm-builder h2 {
    font-size: 24px;
    line-height: 36px;
  }

  .faq-section.faq-section--crm-builder .faq-item__summary {
    font-size: 16px;
  }
}

@media (min-width: 1200px) {
  .faq-section.faq-section--crm-builder .faq-item,
  .faq-section.faq-section--crm-builder .faq-item.is-open {
    margin-left: 150px;
  }
}

@media (max-width: 1199px) {
  .faq-section.faq-section--crm-builder .faq-section__inner,
  .site-main > .faq-section.faq-section--crm-builder > .section-inner {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .faq-section.faq-section--crm-builder .faq-list {
    margin-inline: 0 !important;
    width: 100% !important;
  }

  .faq-section.faq-section--crm-builder .faq-item,
  .faq-section.faq-section--crm-builder .faq-item.is-open {
    margin-left: 0;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .faq-section.faq-section--crm-builder .faq-list {
    width: 100% !important;
  }

  .faq-section.faq-section--crm-builder .faq-item,
  .faq-section.faq-section--crm-builder .faq-item.is-open {
    margin-left: 0;
    max-width: 100%;
  }

  .faq-section.faq-section--crm-builder h2,
  .faq-section.faq-section--crm-builder .faq-section__description {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .faq-section.faq-section--crm-builder .faq-item__summary {
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
  }

  .faq-section.faq-section--crm-builder .faq-item__summary > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .faq-section.faq-section--crm-builder .faq-list .faq-item .faq-item__answer p {
    padding: 0 16px 16px !important;
  }
}

.crm-builder-partners {
  padding-top: 2rem;
}

.crm-builder-partners__heading {
  margin: 0 0 1.75rem;
}

.crm-builder-partners__heading span {
  background: linear-gradient(90deg, #2a4dfb 0%, #7a5ff8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding-bottom: 10px;
  position: relative;
  -webkit-text-fill-color: transparent;
}

.crm-builder-partners__heading span::after {
  background: linear-gradient(90deg, #2a4dfb 0%, #7a5ff8 100%);
  border-radius: 999px;
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 42px;
}

.crm-builder-hero__copy,
.crm-builder-hero__title,
.crm-builder-hero__title-lead,
.crm-builder-hero__title-line,
.crm-builder-trust,
.crm-builder-trust__title,
.crm-builder-tco__title,
.crm-builder-modules__title,
.crm-builder-modules__desc,
.crm-builder-verticals__title,
.crm-builder-verticals__desc,
.crm-builder-stack__title,
.crm-builder-pillars__title,
.crm-builder-stands-out__title,
.crm-builder-execution__title,
.crm-builder-execution__deliverable,
.crm-builder-results__title {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ===== CRM BUILDER HERO END ===== */

/* ===== INDUSTRY DETAIL HERO START ===== */
.industry-hero-media {
  display: none !important;
}

.industry-hero-media img {
  display: none !important;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  width: 100%;
}

@media (min-width: 1024px) {
  .industry-hero-media {
    display: flex !important;
    justify-content: flex-end;
    margin-inline: 0;
    margin-left: auto;
  }

  .industry-hero-media img {
    display: block !important;
    margin-left: auto;
  }
}
/* ===== INDUSTRY DETAIL HERO END ===== */

/* ===== CASE STUDIES START ===== */
/* ΓöÇΓöÇΓöÇ Case Studies ΓöÇΓöÇΓöÇ */
/* Vars on :root — this stylesheet only loads on case-study pages */
:root {
  --cs-text: #171717;
  --cs-muted: #4d4d4d;
  --cs-soft: #b1b9df;
  --cs-line: #e6eaf4;
  --cs-panel: #f5f7fc;
  --cs-from: #2a4dfb;
  --cs-to: #7a5ff8;
  --cs-ink: #0b1024;
}

/* Shared hero bits */
.case-studies-hero,
.case-study-detail-hero {
  position: relative;
  z-index: 10;
  width: 100%;
  padding-block: 2rem 2rem;
}

.case-studies-hero {
  text-align: center;
}

@media (min-width: 1024px) {
  .case-studies-hero {
    padding-top: 3.25rem;
    padding-bottom: 3rem;
  }

  .case-study-detail-hero {
    padding-top: 3rem;
    padding-bottom: 2rem;
  }
}

.case-studies-hero__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
  font-size: 0.8125rem;
  color: var(--cs-soft);
}

.case-studies-hero__breadcrumb a {
  color: var(--cs-soft);
  text-decoration: none;
}

.case-studies-hero__breadcrumb a:hover {
  color: #fff;
}

.case-studies-hero__breadcrumb span[aria-current="page"] {
  color: #fff;
  font-weight: 600;
}

.case-studies-hero__eyebrow,
.case-study-story__eyebrow {
  display: inline-block;
  margin: 0 0 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--cs-from), var(--cs-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.case-studies-hero__title {
  margin: 0 auto;
  max-width: 12em;
  font-size: clamp(2.1rem, 5vw, 3.25rem);
  font-weight: 600;
  line-height: 1.12;
  color: #fff;
}

.case-studies-hero__title-accent {
  font-weight: 800;
  background: linear-gradient(180deg, #2f69fb 15%, #c56bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.case-studies-hero__lead {
  margin: 0.9rem auto 0;
  max-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--cs-soft);
}

.case-studies-hero--with-fan {
  padding-bottom: 2.25rem;
}

@media (min-width: 1024px) {
  .case-studies-hero--with-fan {
    padding-bottom: 3rem;
  }
}

body:has(.case-studies-hero--with-fan) .site-hero-bg {
  height: min(100%, 1700px);
}

/* Hero product showcase filmstrip */
.case-studies-hero.case-studies-hero--with-fan {
  overflow: visible;
}

.case-studies-fan {
  display: flex;
  justify-content: center;
  margin: 1rem 0 0;
  overflow: visible;
  padding: 0.65rem 0 0;
  width: 100%;
}

@media (min-width: 1280px) {
  .case-studies-fan {
    margin-left: 50%;
    transform: translateX(-50%);
    width: min(1440px, calc(100vw - 2.5rem));
  }
}

.case-studies-fan__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.65rem, 1.25vw, 1.1rem);
  isolation: isolate;
  list-style: none;
  margin: 0 auto;
  max-width: 1440px;
  padding: 1.05rem 0.75rem 1.25rem;
  width: 100%;
}

.case-studies-fan__item {
  flex: 0 1 18%;
  max-width: 252px;
  min-width: 0;
  position: relative;
  transform: rotate(var(--fan-rotate, 0deg)) translateY(var(--fan-y, 0px)) scale(var(--fan-scale, 1));
  transform-origin: 50% 60%;
  z-index: var(--fan-z, 1);
}

.case-studies-fan__item--center {
  flex-basis: 23%;
  max-width: 320px;
  z-index: 5;
}

.case-studies-fan__card {
  background: #0b1024;
  border:9px solid  #00003f;;
  border-radius: 0.8rem;
  box-shadow:
    0 10px 28px rgba(4, 8, 28, 0.28),
    0 0 18px rgba(173, 190, 255, 0.22),
    0 0 42px rgba(122, 95, 248, 0.18),
    0 0 72px rgba(47, 105, 251, 0.12);
  display: block;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 5 / 4;
}

.case-studies-fan__item--center .case-studies-fan__card {
  box-shadow:
    0 14px 36px rgba(4, 8, 28, 0.32),
    0 0 24px rgba(196, 210, 255, 0.28),
    0 0 52px rgba(122, 95, 248, 0.24),
    0 0 88px rgba(47, 105, 251, 0.16);
}

.case-studies-fan__card img {
  display: block;
  height: 100%;
  object-fit: fill;
  object-position: top center;
  width: 100%;
}

.case-studies-fan__card:focus-visible {
  outline: 2px solid var(--cs-from);
  outline-offset: 3px;
}

.case-studies-fan__chip {
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(8, 14, 48, 0.18);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  left: 50%;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding: 0.32rem 0.72rem;
  pointer-events: none;
  position: absolute;
  top: 0.55rem;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  z-index: 2;
}

.case-studies-fan__chip::after {
  background: inherit;
  border-radius: 2px;
  bottom: -4px;
  content: "";
  height: 9px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%) rotate(45deg);
  width: 9px;
}

.case-studies-fan__chip--blue {
  background: #3b6bff;
}

.case-studies-fan__chip--green {
  background: #2fbf6a;
}

@media (max-width: 1023px) {
  .case-studies-fan {
    margin-top: 0.85rem;
    padding-top: 0.5rem;
  }

  .case-studies-fan__list {
    padding-top: 0.85rem;
    padding-bottom: 1.1rem;
  }

  .case-studies-fan__item {
    max-width: 200px;
  }

  .case-studies-fan__item--center {
    max-width: 252px;
  }

  .case-studies-fan__card {
    border-radius: 0.7rem;
  }
}

@media (max-width: 719px) {
  .case-studies-hero--with-fan {
    padding-bottom: 1.5rem;
  }

  body:has(.case-studies-hero--with-fan) .site-hero-bg {
    height: min(100%, 920px);
  }

  .case-studies-fan,
  .case-studies-fan__list {
    display: none;
  }
}

/* Listing grid */
.case-studies-grid {
  position: relative;
  background:
    radial-gradient(circle at 12% 0%, rgba(42, 77, 251, 0.08), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(122, 95, 248, 0.08), transparent 30%),
    linear-gradient(180deg, #f4f6fb 0%, #fff 48%);
  padding: 2.5rem 0 4.5rem;
}

@media (min-width: 1024px) {
  .case-studies-grid {
    padding: 2.5rem 0 5.5rem;
    margin-top: 0;
  }
}

.case-studies-grid__list {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 1024px) {
  .case-studies-grid__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .case-studies-grid__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.case-studies-grid__item {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
  height: 100%;
  padding: 1.15rem 1.15rem 1.35rem;
  border: 1px solid rgba(230, 234, 244, 0.95);
  border-radius: 1.35rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 247, 252, 0.96) 100%);
  box-shadow: 0 10px 30px rgba(8, 14, 48, 0.05);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.case-studies-grid__item:hover {
  transform: translateY(-4px);
  border-color: rgba(42, 77, 251, 0.18);
  box-shadow: 2px 14px 36px -6px rgba(0, 0, 63, 0.14);
}

.case-studies-grid__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  padding: 0;
  border-radius: 1rem;
  background: var(--cs-ink);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.case-studies-grid__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
}

.case-studies-grid__tags {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #5b647a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.case-studies-grid__copy {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 auto;
  padding-inline: 0.2rem;
}

.case-studies-grid__client {
  margin: 0 0 0.1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--cs-from), var(--cs-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.case-studies-grid__title {
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #00003f;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.case-studies-grid__title a {
  color: inherit;
  text-decoration: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.case-studies-grid__item:hover .case-studies-grid__title a {
  color: var(--cs-from);
}

.case-studies-grid__subtitle {
  margin: 0.1rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  background: linear-gradient(90deg, var(--cs-from), var(--cs-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.case-studies-grid__desc {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--cs-muted);
}

.case-studies-grid__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  margin-top: 0.9rem;
  padding: 0.65rem 1.15rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(90deg, var(--cs-from), #0026e3);
  box-shadow: 0 8px 18px rgba(42, 77, 251, 0.22);
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.case-studies-grid__cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(42, 77, 251, 0.28);
}

.case-studies-grid__cta svg {
  transition: transform 0.2s ease;
}

.case-studies-grid__cta:hover svg {
  transform: translateX(2px);
}

.case-studies-grid__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem 1rem;
  margin-top: auto;
  padding: 1.1rem 0.2rem 0.15rem;
  border-top: 1px solid var(--cs-line);
}

.case-studies-grid__stats:has(.case-studies-grid__stat:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-studies-grid__stat {
  min-width: 0;
}

.case-studies-grid__stat-value {
  display: block;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  background: linear-gradient(90deg, var(--cs-from), var(--cs-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.case-studies-grid__stat-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--cs-muted);
}

@media (max-width: 639px) {
  .case-studies-grid__item {
    padding: 0.9rem 0.9rem 1.15rem;
  }

  .case-studies-grid__tags {
    border-radius: 0.75rem;
    white-space: normal;
  }

  .case-studies-grid__stat-value {
    font-size: 1.35rem;
  }

  .case-studies-grid__stat-label {
    font-size: 0.68rem;
  }
}

/* Detail hero — copy + opposite image */
.case-study-detail-hero {
  padding-bottom: 2.5rem;
}

.case-study-detail-hero__grid {
  display: grid;
  gap: 1.75rem;
  align-items: start;
}

@media (min-width: 960px) {
  .case-study-detail-hero {
    padding-top: 3rem;
    padding-bottom: 3.25rem;
  }

  .case-study-detail-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 2.75rem;
  }
}

.case-study-detail-hero .case-studies-hero__breadcrumb {
  justify-content: flex-start;
}

.case-study-detail-hero__copy {
  min-width: 0;
}

.case-study-detail-hero__title {
  margin: 0;
  max-width: 48rem;
  font-size: clamp(1.85rem, 4vw, 2.4rem);
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #fff;
  overflow-wrap: break-word;
}

.case-study-detail-hero__lead,
.case-study-detail-hero__meta,
.case-study-detail-hero__actions {
  max-width: 36rem;
}

.case-study-detail-hero__lead {
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--cs-soft);
}

.case-study-detail-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  margin-top: 1.2rem;
  font-size: 0.8125rem;
  color: #d7dcf3;
}

.case-study-detail-hero__meta strong {
  margin-right: 0.3rem;
  color: #fff;
}

.case-study-detail-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  margin-top: 1.35rem;
}

.case-study-detail-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.45rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.case-study-detail-hero__actions .case-study-detail-hero__btn {
  margin-top: 10px;
}

.case-study-detail-hero__btn--primary {
  color: #fff;
  background: linear-gradient(90deg, var(--cs-from), #0026e3);
}

.case-study-detail-hero__btn--primary:hover {
  filter: brightness(1.08);
}

.case-study-detail-hero__btn--ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}

.case-study-detail-hero__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* .case-study-detail-hero__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 12, 36, 0.55);
  box-shadow:
    0 24px 60px rgba(3, 6, 30, 0.45),
    0 0 0 1px rgba(122, 95, 248, 0.12);
} */

.case-study-detail-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(68vh, 560px);
  object-fit: contain;
  object-position: center;
}

@media (min-width: 960px) {
  .case-study-detail-hero__media img {
    max-height: 620px;
    min-height: 0;
  }
}

/* Key Performance Metrics */
.case-study-metrics {
  background: #fff;
  border-top: 1px solid var(--cs-line);
}

.case-study-metrics__inner {
  padding-block: 2.25rem 2.5rem;
}

.case-study-metrics__header {
  margin-bottom: 1.5rem;
}

.case-study-metrics__title {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  color: var(--cs-text);
}

.case-study-metrics__divider {
  display: block;
  width: 3.5rem;
  height: 2px;
  margin: 0.85rem 0 0;
  border: 0;
  background: linear-gradient(90deg, var(--cs-from), var(--cs-to));
}

.case-study-metrics__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding-top: 0.5rem;
}

@media (min-width: 640px) {
  .case-study-metrics__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1.25rem;
  }
}

@media (min-width: 960px) {
  .case-study-metrics__row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.case-study-metrics__box {
  min-width: 0;
}

.case-study-metrics__value {
  margin: 0;
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(90deg, var(--cs-from), var(--cs-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.case-study-metrics__label {
  margin: 0.45rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cs-text);
}

/* Shared section header */
.case-study-block-header {
  margin-bottom: 1.5rem;
  max-width: 40rem;
}

.case-study-block-header h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  color: var(--cs-text);
}

.case-study-block-header p:not(.case-study-story__eyebrow) {
  margin: 0.65rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cs-muted);
}

.case-study-block-header--center {
  margin-inline: auto;
  text-align: center;
}

/* Overview */
.case-study-overview {
  background: #fff;
  padding-block: 1rem 1rem;
}

.case-study-story__brief {
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  .case-study-story__brief {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

.case-study-story__brief article {
  position: relative;
  padding: 1.35rem 1.25rem 1.4rem;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(42, 77, 251, 0.08), transparent 42%),
    var(--cs-panel);
  border: 1px solid rgba(230, 234, 244, 0.9);
}

.case-study-story__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-bottom: 0.75rem;
  border-radius: 10px;
  color: var(--cs-from);
  background: rgba(42, 77, 251, 0.1);
}

.case-study-story__icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.case-study-story__brief h3 {
  margin: 0 0 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cs-from);
}

.case-study-story__brief p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--cs-muted);
}

/* Workflow graphic */
.case-study-flow {
  background: #fff;
  padding-block: 3rem;
}

.case-study-flow__track {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

@media (min-width: 900px) {
  .case-study-flow__track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
}

.case-study-flow__track li {
  position: relative;
  padding: 1.25rem 1.15rem 1.3rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--cs-line);
  box-shadow: 0 10px 28px rgba(15, 23, 80, 0.04);
}

@media (min-width: 900px) {
  .case-study-flow__track li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.7rem;
    right: -0.55rem;
    width: 0.7rem;
    height: 0.7rem;
    border-top: 2px solid #c7cff0;
    border-right: 2px solid #c7cff0;
    transform: rotate(45deg);
    z-index: 1;
  }
}

.case-study-flow__num {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: linear-gradient(90deg, var(--cs-from), var(--cs-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.case-study-flow__track strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1rem;
  color: var(--cs-text);
}

.case-study-flow__track p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--cs-muted);
}

/* Split copy + graphical visual */
.case-study-split,
.case-study-split--alt {
  padding-block: 2.75rem;
  background: #fff;
}
@media (max-width: 800px) {
  .case-study-split,
  .case-study-split--alt {
    padding-block: 0.2rem;
  }
}

.case-study-split--stack-tight:has(+ .case-study-split--stack-tight) {
  padding-bottom: 0.75rem;
}

.case-study-split--stack-tight + .case-study-split--stack-tight {
  padding-top: 0.75rem;
}

.case-study-split__inner {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}

@media (min-width: 960px) {
  .case-study-split__inner {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .case-study-split--left .case-study-visual {
    order: -1;
  }
}

.case-study-split__copy h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.3rem, 2.3vw, 1.65rem);
  font-weight: 700;
  color: var(--cs-text);
}

.case-study-split__copy > p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--cs-muted);
}

.case-study-split__steps {
  margin: 1.15rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
}

.case-study-split__steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cs-text);
}

.case-study-split__steps span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  flex-shrink: 0;
  border-radius: 999px;
  font-size: 0.75rem;
  color: #fff;
  background: linear-gradient(90deg, var(--cs-from), var(--cs-to));
}

/* Graphical panels (no product screenshots) */
.case-study-visual {
  position: relative;
  min-height: 280px;
  padding: 1.5rem;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(42, 77, 251, 0.12);
  background:
    radial-gradient(circle at 18% 20%, rgba(122, 95, 248, 0.18), transparent 34%),
    radial-gradient(circle at 84% 78%, rgba(42, 77, 251, 0.16), transparent 36%),
    linear-gradient(160deg, #0b1024 0%, #141a3d 55%, #18204a 100%);
  color: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 80, 0.12);
}

.case-study-visual--photo {
  padding: 0;
  min-height: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.case-study-visual--photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
}

.case-study-visual--metrics {
  --product-text: #171717;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-content: center;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
}

.case-study-visual--metrics .product-case-study__metric {
  max-width: none;
  width: 100%;
}

.case-study-visual__glow {
  position: absolute;
  inset: auto -20% -40% auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 95, 248, 0.35), transparent 68%);
  filter: blur(8px);
  pointer-events: none;
}

.case-study-visual__map {
  position: relative;
  height: 150px;
  margin-bottom: 1.1rem;
  border-radius: 14px;
  background:
    linear-gradient(125deg, transparent 46%, rgba(255, 255, 255, 0.05) 47%, transparent 48%),
    radial-gradient(circle at 30% 40%, rgba(122, 180, 255, 0.18), transparent 28%),
    linear-gradient(180deg, #1a2458, #101735);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.case-study-visual__radar {
  position: absolute;
  left: 42%;
  top: 46%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1px solid rgba(122, 160, 255, 0.35);
  transform: translate(-50%, -50%);
  animation: cs-radar 3.2s ease-out infinite;
}

.case-study-visual__pin {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, #7aa0ff, #d2a8ff);
  box-shadow: 0 0 0 6px rgba(122, 160, 255, 0.18);
}

.case-study-visual__pin--a { left: 28%; top: 38%; }
.case-study-visual__pin--b { left: 54%; top: 52%; }
.case-study-visual__pin--c { left: 70%; top: 30%; }

.case-study-visual__stack {
  display: grid;
  gap: 0.45rem;
}

.case-study-visual__stack span {
  display: inline-flex;
  width: fit-content;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #e7ecff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.case-study-visual__doc {
  position: relative;
  z-index: 1;
  padding: 1.15rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.case-study-visual__doc-bar {
  width: 42%;
  height: 0.55rem;
  margin-bottom: 0.9rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #7aa0ff, #d2a8ff);
}

.case-study-visual__doc-lines {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.case-study-visual__doc-lines i {
  display: block;
  height: 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.case-study-visual__doc-lines i:nth-child(2) { width: 86%; }
.case-study-visual__doc-lines i:nth-child(3) { width: 72%; }
.case-study-visual__doc-lines i:nth-child(4) { width: 64%; }

.case-study-visual__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.case-study-visual__chips span {
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #dce4ff;
  background: rgba(42, 77, 251, 0.28);
}

.case-study-visual__pulse {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--cs-from), var(--cs-to));
  box-shadow: 0 0 0 10px rgba(42, 77, 251, 0.15);
  animation: cs-pulse 2.4s ease-in-out infinite;
}

.case-study-visual__stages {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0 0 1.15rem;
  padding: 0;
  list-style: none;
}

.case-study-visual__stages li {
  padding: 0.7rem 0.35rem;
  border-radius: 10px;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.case-study-visual__stages li.is-active {
  background: linear-gradient(180deg, rgba(42, 77, 251, 0.45), rgba(122, 95, 248, 0.28));
  border-color: rgba(170, 180, 255, 0.35);
}

.case-study-visual__stages em {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e8ecff;
}

.case-study-visual__board {
  display: grid;
  gap: 0.55rem;
}

.case-study-visual__board span {
  display: block;
  height: 2.4rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.case-study-visual__board span:nth-child(1) { width: 92%; }
.case-study-visual__board span:nth-child(2) { width: 78%; }
.case-study-visual__board span:nth-child(3) { width: 86%; }

.case-study-visual__orbit {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0.5rem auto 1.25rem;
}

.case-study-visual__orbit span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.22);
}

.case-study-visual__orbit span:nth-child(2) {
  inset: 18px;
  border-style: solid;
  border-color: rgba(122, 160, 255, 0.35);
}

.case-study-visual__orbit span:nth-child(3) {
  inset: 42px;
  border: none;
  background: linear-gradient(135deg, var(--cs-from), var(--cs-to));
}

.case-study-visual__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.case-study-visual__points li,
.case-study-visual__caption {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #d5dcf8;
}

@keyframes cs-radar {
  0% { opacity: 0.85; transform: translate(-50%, -50%) scale(0.55); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}

@keyframes cs-pulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(42, 77, 251, 0.12); }
  50% { box-shadow: 0 0 0 14px rgba(42, 77, 251, 0.2); }
}

/* Results checklist */
.case-study-outcomes {
  background: #fff;
  padding-block: 3rem;
  border-top: 1px solid var(--cs-line);
}

.case-study-outcomes__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
}

@media (min-width: 768px) {
  .case-study-outcomes__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.5rem;
  }
}

.case-study-outcomes__list li {
  position: relative;
  padding: 0.7rem 0.85rem 0.7rem 2.15rem;
  border: 1px solid var(--cs-line);
  border-radius: 0.75rem;
  font-size: 0.925rem;
  line-height: 1.45;
  color: var(--cs-text);
  background:
    linear-gradient(180deg, rgba(42, 77, 251, 0.03), transparent 70%),
    #fff;
}

.case-study-outcomes__list li::before {
  content: "";
  position: absolute;
  left: 0.8rem;
  top: 1rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cs-from), var(--cs-to));
}

.case-study-outcomes__metric {
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cs-text);
  background: linear-gradient(90deg, rgba(42, 77, 251, 0.08), rgba(0, 38, 227, 0.04));
  border: 1px solid rgba(42, 77, 251, 0.14);
}

/* Implementation Effects charts */
.case-study-impact {
  background:
    radial-gradient(ellipse 70% 55% at 8% 0%, rgba(42, 77, 251, 0.08), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 20%, rgba(122, 95, 248, 0.06), transparent 50%),
    #fff;
  padding-block: 3rem;
  border-top: 1px solid var(--cs-line);
}

.case-study-impact__grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .case-study-impact__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.case-study-impact__chart {
  position: relative;
  padding: 1.35rem 1.15rem 1.15rem;
  border: 1px solid rgba(42, 77, 251, 0.12);
  border-radius: 1.15rem;
  background:
    linear-gradient(165deg, rgba(42, 77, 251, 0.05), transparent 46%),
    #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 14px 36px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.case-study-impact__chart:nth-child(2) {
  transition-delay: 0.12s;
}

.case-study-impact.is-visible .case-study-impact__chart {
  opacity: 1;
  transform: translateY(0);
}

.case-study-impact__chart::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--cs-from), var(--cs-to));
}

.case-study-impact__chart:hover {
  border-color: rgba(42, 77, 251, 0.22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 18px 44px rgba(42, 77, 251, 0.12);
}

.case-study-impact__chart-top {
  padding-inline: 0.45rem;
  margin-bottom: 0.15rem;
}

.case-study-impact__badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.45rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, var(--cs-from), #0026e3);
}

.case-study-impact__badge--soft {
  color: var(--cs-from);
  background: rgba(42, 77, 251, 0.1);
}

.case-study-impact__chart h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cs-text);
}

.case-study-impact__gchart {
  width: 100%;
  height: 300px;
  min-height: 260px;
}

@media (min-width: 900px) {
  .case-study-impact__gchart {
    height: 340px;
  }
}

.case-study-impact__gchart svg {
  overflow: visible;
}

.case-study-impact__note {
  margin: 0.2rem 0.45rem 0;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(42, 77, 251, 0.16);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--cs-muted);
}

@media (prefers-reduced-motion: reduce) {
  .case-study-impact__chart {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Highlights */
.case-study-highlights-band {
  background: #fff;
  padding-block: 3rem;
}

.case-study-highlights-band__inner {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .case-study-highlights-band__inner {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 2.5rem;
    align-items: start;
  }
}

.case-study-highlights-band h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  color: var(--cs-text);
}

.case-study-highlights-band__graphic {
  display: flex;
  gap: 0.4rem;
  margin-top: 1.25rem;
}

.case-study-highlights-band__graphic span {
  display: block;
  height: 0.45rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cs-from), var(--cs-to));
}

.case-study-highlights-band__graphic span:nth-child(1) { width: 3.5rem; opacity: 1; }
.case-study-highlights-band__graphic span:nth-child(2) { width: 2.4rem; opacity: 0.55; }
.case-study-highlights-band__graphic span:nth-child(3) { width: 1.5rem; opacity: 0.3; }

.case-study-highlights-band ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--cs-line);
}

.case-study-highlights-band li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.25rem;
  font-size: 0.925rem;
  line-height: 1.5;
  color: var(--cs-muted);
  border-bottom: 1px solid var(--cs-line);
}

.case-study-highlights-band li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cs-from), var(--cs-to));
}

/* Tech */
.case-study-tech {
  background: #fff;
  padding-block: 2.5rem 1.5rem;
}

.case-study-tech__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-study-tech__list li {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #2a3558;
  background: var(--cs-panel);
  border: 1px solid var(--cs-line);
}

/* Footer CTA */
.case-study-footer-cta {
  background: #fff;
  padding-block: 1.5rem 4rem;
}

.case-study-story__cta {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 1.5rem 1.4rem;
  border-radius: 16px;
  background: var(--cs-ink);
  color: #fff;
}

@media (min-width: 768px) {
  .case-study-story__cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1.75rem 1.75rem;
  }
}

.case-study-story__cta h2 {
  margin: 0;
  font-size: 1.35rem;
  color: #fff;
}

.case-study-story__cta p {
  margin: 0.4rem 0 0;
  max-width: 28rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #b7bedd;
}

.case-study-story__cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
}

.case-study-detail__back {
  font-size: 0.875rem;
  font-weight: 600;
  color: #c5cce8;
  text-decoration: none;
}

.case-study-detail__back:hover {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .case-studies-grid__item,
  .case-studies-grid__media img,
  .case-studies-grid__cta,
  .case-studies-grid__cta svg,
  .case-studies-fan__item,
  .case-studies-fan__card {
    transition: none;
  }

  .case-studies-grid__item:hover,
  .case-studies-grid__cta:hover,
  .case-studies-fan__item:hover .case-studies-fan__card,
  .case-studies-fan__item:focus-within .case-studies-fan__card {
    transform: none;
  }

  .case-studies-grid__cta:hover svg {
    transform: none;
  }

  .case-study-visual__radar,
  .case-study-visual__pulse,
  .outreach-hero.is-armed.is-playing .outreach-hero__before-line,
  .outreach-hero.is-armed.is-playing .outreach-hero__node,
  .outreach-hero.is-armed.is-playing .outreach-hero__transition-btn,
  .outreach-hero.is-armed.is-playing .outreach-hero__step,
  .outreach-hero.is-armed.is-playing .outreach-hero__chevron,
  .outreach-hero.is-armed.is-playing .outreach-hero__metric,
  .outreach-hero.is-armed.is-playing .outreach-hero__action,
  .tasks-hero.is-armed.is-playing .tasks-hero__stat,
  .tasks-hero.is-armed.is-playing .tasks-hero__title,
  .tasks-hero.is-armed.is-playing .tasks-hero__before-item,
  .tasks-hero.is-armed.is-playing .tasks-hero__dot,
  .tasks-hero.is-armed.is-playing .tasks-hero__nub,
  .tasks-hero.is-armed.is-playing .tasks-hero__arrow,
  .tasks-hero.is-armed.is-playing .tasks-hero__panel--before,
  .tasks-hero.is-armed.is-playing .tasks-hero__center-frame,
  .tasks-hero.is-armed.is-playing .tasks-hero__center-float,
  .tasks-hero.is-armed.is-playing .tasks-hero__connector-path,
  .tasks-hero.is-armed.is-playing .tasks-hero__connector-glow,
  .tasks-hero.is-armed.is-playing .tasks-hero__task,
  .tasks-hero.is-armed.is-playing .tasks-hero__feature-icon,
  .tasks-hero.is-armed.is-playing .tasks-hero__feature-title,
  .tasks-hero.is-armed.is-playing .tasks-hero__feature-copy,
  .coach-hero.is-armed.is-playing .coach-hero__board,
  .coach-hero.is-armed.is-playing .coach-hero__card,
  .coach-hero.is-armed.is-playing .coach-hero__tip,
  .coach-hero.is-armed.is-playing .coach-hero__growth,
  .coach-hero.is-armed.is-playing .coach-hero__bar,
  .coach-hero.is-armed.is-playing .coach-hero__mic,
  .coach-hero.is-armed.is-playing .coach-hero__live-pill,
  .coach-hero.is-armed.is-playing .coach-hero__live-dot,
  .coach-hero.is-armed.is-playing .coach-hero__donut-ring,
  .coach-hero.is-armed.is-playing .coach-hero__metric,
  .coach-hero.is-armed.is-playing .coach-hero__score-row,
  .coach-hero.is-armed.is-playing .coach-hero__roleplay-icon,
  .appoint-hero.is-armed.is-playing .appoint-hero__phone-shell,
  .appoint-hero.is-armed.is-playing .appoint-hero__slide,
  .appoint-hero.is-armed.is-playing .appoint-hero__booking,
  .appoint-hero.is-armed.is-playing .appoint-hero__booking-title,
  .appoint-hero.is-armed.is-playing .appoint-hero__step,
  .appoint-hero.is-armed.is-playing .appoint-hero__confirm,
  .appoint-hero.is-armed.is-playing .appoint-hero__success,
  .appoint-hero.is-armed.is-playing .appoint-hero__success-glow,
  .appoint-hero.is-armed.is-playing .appoint-hero__success-fill,
  .appoint-hero.is-armed.is-playing .appoint-hero__success-check,
  .appoint-hero.is-armed.is-playing .appoint-hero__confirmed,
  .appoint-hero.is-armed.is-playing .appoint-hero__set,
  .appoint-hero.is-armed.is-playing .appoint-hero__cta,
  .appoint-hero.is-armed.is-playing .appoint-hero__feat,
  .appoint-hero.is-armed.is-playing .appoint-hero__line,
  .ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__source-icon,
  .ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__tick,
  .ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__query,
  .ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__ai-glow,
  .ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__ai-scan,
  .ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__ai-icon,
  .ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__line--ai,
  .ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__rec,
  .ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__match-icon,
  .ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__feature,
  .ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__particle {
    animation: none;
  }
}

/* ===== OUTREACH HERO BANNER START ===== */
.outreach-hero {
  --oh-purple: #6366f1;
  --oh-purple-deep: #4f46e5;
  --oh-ink: #111827;
  --oh-muted: #6b7280;
  --oh-line: #e5e7eb;
  --oh-soft: #f3f4f6;
  --oh-after: #eef2ff;
  --oh-after-icon: #312e81;
  --oh-blue: #2563eb;
  margin: 0;
  width: 100%;
  overflow: visible;
}

.case-study-detail-hero__media.outreach-hero img {
  max-height: none;
}

.outreach-hero__board {
  display: grid;
  gap: 0.7rem;
}

.outreach-hero__top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.outreach-hero__card {
  min-width: 0;
  padding: 0.85rem 0.9rem 0.95rem;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(8, 12, 36, 0.18);
}

.outreach-hero__card--before {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 220px;
  min-width: 220px;
  height: 380px;
  padding: 0.7rem 0.55rem 0.8rem;
  background: #f8fafc;
  box-shadow: 0 10px 24px rgba(8, 12, 36, 0.12);
}

.outreach-hero__card--after {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  height: 380px;
  padding: 0.85rem 0.95rem 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 36px rgba(79, 70, 229, 0.16);
}

.outreach-hero__badge {
  display: inline-flex;
  align-items: center;
  width: 70px;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: #9ca3af;
}

.outreach-hero__badge--after {
  background: var(--oh-purple);
}

.outreach-hero__headline {
  margin: 0.45rem 0 0.7rem;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.3;
  color: var(--oh-ink);
}

.outreach-hero__card--before .outreach-hero__headline {
  margin: 0.35rem 0 0.55rem;
  font-size: 1rem;
  line-height: 1.25;
}

.outreach-hero__card--after .outreach-hero__headline {
  margin: 0.4rem 0 0.75rem;
  font-size: 0.78rem;
}

.outreach-hero__before-flow {
  margin-top:40px;
  margin-bottom: 40px;
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: auto minmax(0.7rem, 1fr) auto;
  grid-template-rows: auto minmax(1.15rem, 1fr) auto minmax(1.15rem, 1fr) auto;
  min-height: 0;
  padding: 0.1rem 0 0.2rem;
  overflow: visible;
}

.outreach-hero__node {
  z-index: 1;
  display: flex;
  width: 3.5rem;
  height: 3.5rem;
  transform-origin: center;
}

.outreach-hero__node--1 { grid-area: 1 / 1; }
.outreach-hero__before-line--h-top { grid-area: 1 / 2; }
.outreach-hero__node--2 { grid-area: 1 / 3; }
.outreach-hero__before-line--v-mid { grid-area: 2 / 3; }
.outreach-hero__node--3 { grid-area: 3 / 3; }
.outreach-hero__before-line--v-bot { grid-area: 4 / 3; }
.outreach-hero__node--4 { grid-area: 5 / 3; }
.outreach-hero__before-line--h-bot { grid-area: 5 / 2; }
.outreach-hero__node--5 { grid-area: 5 / 1; }

.outreach-hero__before-line {
  pointer-events: none;
}

.outreach-hero__before-line--h-top,
.outreach-hero__before-line--h-bot {
  align-self: center;
  width: calc(100% + 0.35rem);
  height: 2px;
  margin-inline: -0.175rem;
  background-image: repeating-linear-gradient(to right, #9ca3af 0 4px, transparent 4px 10px);
}

.outreach-hero__before-line--v-mid,
.outreach-hero__before-line--v-bot {
  justify-self: center;
  width: 2px;
  height: calc(100% + 0.35rem);
  margin-block: -0.175rem;
  background-image: repeating-linear-gradient(to bottom, #9ca3af 0 4px, transparent 4px 10px);
}

.outreach-hero__node-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: #6b7280;
  background: #f3f4f6;
  box-shadow: 0 0 0 3px #fff;
}

.outreach-hero__node-disc img {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  max-height: none;
  object-fit: contain;
}

.outreach-hero__transition {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outreach-hero__transition-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  color: #fff;
  background: var(--oh-purple);
  box-shadow: 0 8px 16px rgba(99, 102, 241, 0.35);
}

.outreach-hero__transition-btn svg {
  width: 0.95rem;
  height: 0.95rem;
}

.outreach-hero__after-flow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.15rem;
  margin-bottom: 0.45rem;
}

.outreach-hero__step {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
  text-align: center;
  transform-origin: center top;
}

.outreach-hero__step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 0.55rem;
  color: var(--oh-after-icon);
  background: var(--oh-after);
}

.outreach-hero__step-icon img {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  max-height: none;
  object-fit: contain;
}

.outreach-hero__step-label {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  color: #374151;
}

.outreach-hero__chevron {
  flex: 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 10px;
  color: #60a5fa;
  margin-top: 0.45rem;
}

.case-study-detail-hero__media.outreach-hero .outreach-hero__chevron img {
  margin-top: 45px;
  display: block;
  width: 8px;
  height: 10px;
  max-width: 8px;
  max-height: 10px;
  object-fit: contain;
}

.outreach-hero__metric {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.35rem 0 0.45rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.65rem;
  background: linear-gradient(90deg, #eef2ff 0%, #e0e7ff 100%);
}

.outreach-hero__metric-icon {
  display: flex;
  color: var(--oh-purple-deep);
}

.outreach-hero__metric-icon img {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  max-height: none;
  object-fit: contain;
}

.outreach-hero__metric-text {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--oh-purple-deep);

}

.outreach-hero__graph {
  position: relative;
  flex: 1 1 0;
  width: calc(100% + 1.9rem);
  min-height: 6.5rem;
  height: 0;
  margin: auto -0.95rem 0;
  overflow: visible;
}

.outreach-hero__graph .product-case-study__metric-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}

.outreach-hero__card--actions {
  padding: 0.75rem 0.85rem 0.8rem;
}

.outreach-hero__actions-title {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 750;
  color: var(--oh-ink);
}

.outreach-hero__actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}

.outreach-hero__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-width: 0;
  padding: 0.38rem 0.28rem;
  border: 1px solid var(--oh-line);
  border-radius: 0.55rem;
  background: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  color: #374151;
  white-space: nowrap;
}

.outreach-hero__action-icon {
  display: flex;
  flex: 0 0 auto;
}

.outreach-hero__action-icon img {
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  max-height: none;
  object-fit: contain;
}

.outreach-hero__action-icon--email { color: var(--oh-purple); }
.outreach-hero__action-icon--call { color: #16a34a; }
.outreach-hero__action-icon--task { color: #f97316; }
.outreach-hero__action-icon--sequence { color: #2563eb; }

.outreach-hero.is-armed .outreach-hero__before-line--h-top {
  clip-path: inset(0 100% 0 0);
}

.outreach-hero.is-armed .outreach-hero__before-line--h-bot {
  clip-path: inset(0 0 0 100%);
}

.outreach-hero.is-armed .outreach-hero__before-line--v-mid,
.outreach-hero.is-armed .outreach-hero__before-line--v-bot {
  clip-path: inset(0 0 100% 0);
}

.outreach-hero.is-armed .outreach-hero__node,
.outreach-hero.is-armed .outreach-hero__step {
  opacity: 0.28;
  transform: scale(0.84);
}

.outreach-hero.is-armed .outreach-hero__transition-btn {
  opacity: 0.45;
  transform: translateX(-6px) scale(0.9);
}

.outreach-hero.is-armed .outreach-hero__chevron,
.outreach-hero.is-armed .outreach-hero__metric,
.outreach-hero.is-armed .outreach-hero__action {
  opacity: 0;
}

.outreach-hero.is-armed .outreach-hero__metric {
  transform: translateY(8px);
}

.outreach-hero.is-armed .outreach-hero__action {
  transform: translateY(8px);
}

.outreach-hero.is-armed .outreach-hero__chevron {
  transform: translateX(-6px);
}

.outreach-hero.is-armed.is-playing .outreach-hero__node--1 { animation: outreach-hero-pop 0.45s cubic-bezier(0.22, 1.15, 0.36, 1) 0.05s forwards; }
.outreach-hero.is-armed.is-playing .outreach-hero__before-line--h-top { animation: outreach-hero-draw-h 0.4s ease 0.12s forwards; }
.outreach-hero.is-armed.is-playing .outreach-hero__node--2 { animation: outreach-hero-pop 0.45s cubic-bezier(0.22, 1.15, 0.36, 1) 0.45s forwards; }
.outreach-hero.is-armed.is-playing .outreach-hero__before-line--v-mid { animation: outreach-hero-draw-v 0.4s ease 0.52s forwards; }
.outreach-hero.is-armed.is-playing .outreach-hero__node--3 { animation: outreach-hero-pop 0.45s cubic-bezier(0.22, 1.15, 0.36, 1) 0.85s forwards; }
.outreach-hero.is-armed.is-playing .outreach-hero__before-line--v-bot { animation: outreach-hero-draw-v 0.4s ease 0.92s forwards; }
.outreach-hero.is-armed.is-playing .outreach-hero__node--4 { animation: outreach-hero-pop 0.45s cubic-bezier(0.22, 1.15, 0.36, 1) 1.25s forwards; }
.outreach-hero.is-armed.is-playing .outreach-hero__before-line--h-bot { animation: outreach-hero-draw-h-rev 0.4s ease 1.32s forwards; }
.outreach-hero.is-armed.is-playing .outreach-hero__node--5 { animation: outreach-hero-pop 0.45s cubic-bezier(0.22, 1.15, 0.36, 1) 1.65s forwards; }

.outreach-hero.is-armed.is-playing .outreach-hero__transition-btn {
  animation: outreach-hero-slide 0.7s cubic-bezier(0.22, 1.15, 0.36, 1) 2.1s forwards;
}

.outreach-hero.is-armed.is-playing .outreach-hero__step--1 { animation: outreach-hero-pop 0.45s cubic-bezier(0.22, 1.15, 0.36, 1) 2.55s forwards; }
.outreach-hero.is-armed.is-playing .outreach-hero__chevron--1 { animation: outreach-hero-chevron 0.35s ease 2.85s forwards; }
.outreach-hero.is-armed.is-playing .outreach-hero__step--2 { animation: outreach-hero-pop 0.45s cubic-bezier(0.22, 1.15, 0.36, 1) 2.95s forwards; }
.outreach-hero.is-armed.is-playing .outreach-hero__chevron--2 { animation: outreach-hero-chevron 0.35s ease 3.25s forwards; }
.outreach-hero.is-armed.is-playing .outreach-hero__step--3 { animation: outreach-hero-pop 0.45s cubic-bezier(0.22, 1.15, 0.36, 1) 3.35s forwards; }
.outreach-hero.is-armed.is-playing .outreach-hero__chevron--3 { animation: outreach-hero-chevron 0.35s ease 3.65s forwards; }
.outreach-hero.is-armed.is-playing .outreach-hero__step--4 { animation: outreach-hero-pop 0.45s cubic-bezier(0.22, 1.15, 0.36, 1) 3.75s forwards; }

.outreach-hero.is-armed.is-playing .outreach-hero__metric {
  animation: outreach-hero-rise 0.55s ease 4.15s forwards;
}

.outreach-hero.is-armed.is-playing .outreach-hero__action:nth-child(1) { animation: outreach-hero-rise 0.38s ease 6s forwards; }
.outreach-hero.is-armed.is-playing .outreach-hero__action:nth-child(2) { animation: outreach-hero-rise 0.38s ease 6.18s forwards; }
.outreach-hero.is-armed.is-playing .outreach-hero__action:nth-child(3) { animation: outreach-hero-rise 0.38s ease 6.36s forwards; }
.outreach-hero.is-armed.is-playing .outreach-hero__action:nth-child(4) { animation: outreach-hero-rise 0.38s ease 6.54s forwards; }

@keyframes outreach-hero-draw-h {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes outreach-hero-draw-h-rev {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes outreach-hero-draw-v {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes outreach-hero-pop {
  0% { opacity: 0.28; transform: scale(0.84); }
  55% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes outreach-hero-slide {
  0% { opacity: 0.45; transform: translateX(-6px) scale(0.9); }
  45% { opacity: 1; transform: translateX(8px) scale(1.12); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes outreach-hero-chevron {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes outreach-hero-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 700px) {
  .outreach-hero__top {
    flex-direction: column;
    align-items: stretch;
  }

  .outreach-hero__card--before,
  .outreach-hero__card--after {
    width: auto;
    min-width: 0;
    height: auto;
    flex: 1 1 auto;
  }

  .outreach-hero__card--before {
    min-height: 18rem;
  }

  .outreach-hero__card--after {
    min-height: 20rem;
  }

  .outreach-hero__transition {
    margin: 0 auto;
    transform: rotate(90deg);
  }

  .outreach-hero__before-flow {
    min-height: 13rem;
  }

  .outreach-hero__node {
    width: 2.35rem;
    height: 2.35rem;
  }

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

  .outreach-hero__action {
    white-space: normal;
  }
}

@media (max-width: 639px) {
  .outreach-hero {
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .outreach-hero.is-armed .outreach-hero__before-line,
  .outreach-hero.is-armed .outreach-hero__node,
  .outreach-hero.is-armed .outreach-hero__transition-btn,
  .outreach-hero.is-armed .outreach-hero__step,
  .outreach-hero.is-armed .outreach-hero__chevron,
  .outreach-hero.is-armed .outreach-hero__metric,
  .outreach-hero.is-armed .outreach-hero__action {
    opacity: 1;
    transform: none;
    clip-path: none;
    animation: none;
  }
}
/* ===== OUTREACH HERO BANNER END ===== */

/* ===== TASKS HERO BANNER START ===== */
.tasks-hero {
  --th-blue: #2563eb;
  --th-blue-deep: #1d4ed8;
  --th-ink: #0f172a;
  --th-muted: #64748b;
  --th-line: #dbe3f0;
  --th-soft: #f1f5f9;
  --th-ease: cubic-bezier(0.22, 1, 0.36, 1);
  margin: 0;
  width: 100%;
  overflow: visible;
}

.case-study-detail-hero__media.tasks-hero img {
  max-height: none;
}

.tasks-hero__board {
  position: relative;
  padding: 0.7rem 0.7rem 0.8rem;
  border-radius: 18px;
  background: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
  box-shadow: 0 18px 40px rgba(3, 6, 30, 0.28);
}

.tasks-hero__header {
  text-align: center;
}

.tasks-hero__logo {
  margin: 0 0 0.45rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--th-ink);
  text-align: left;
}

.tasks-hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}

.tasks-hero__stat {
  display: flex;
  align-items: flex-start;
  gap: 0.32rem;
  min-width: 0;
  padding: 0.32rem 0.42rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  text-align: left;
}

.tasks-hero__stat--offset {
  transform: translateY(6px);
}

.tasks-hero__stat-icon {
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.12rem;
  border-radius: 50%;
}

.tasks-hero__stat-icon--blue { background: #2563eb; }
.tasks-hero__stat-icon--red { background: #ef4444; }
.tasks-hero__stat-icon--green { background: #22c55e; }
.tasks-hero__stat-icon--orange { background: #f59e0b; }

.tasks-hero__stat-label {
  margin: 0;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #36454F;
}

.tasks-hero__stat-value {
  margin: 0.08rem 0 0;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  color: var(--th-ink);
}

.tasks-hero__stat-trend {
  margin: 0.12rem 0 0;
  font-size: 0.5rem;
  font-weight: 700;
}

.tasks-hero__stat-trend--up { color: var(--th-blue); }
.tasks-hero__stat-trend--down { color: #16a34a; }

.tasks-hero__title {
  margin: 0.55rem 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
  color: #1e3a8a;
}

.tasks-hero__story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1.15fr) 18px minmax(0, 1fr);
  align-items: center;
  gap: 0.2rem;
}

.tasks-hero__col {
  min-width: 0;
}

.tasks-hero__col-label {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--th-ink);
  text-align: center;
}

.tasks-hero__panel {
  position: relative;
  padding: 0.7rem 0.55rem;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.1);
}

.tasks-hero__dot {
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #1e3a8a 0 38%, #1d4ed8 62%, #93c5fd 100%);
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.22),
    0 0 10px 3px rgba(59, 130, 246, 0.7),
    0 0 22px 8px rgba(37, 99, 235, 0.4);
}

.tasks-hero__before-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.tasks-hero__before-item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--th-soft);
}

.tasks-hero__before-item img {
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  object-fit: contain;
}

.tasks-hero__nub {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  color: #fff;
  background: var(--th-blue);
  border-radius: 50%;
  box-shadow: 0 6px 12px rgba(37, 99, 235, 0.35);
  transform: translate(-50%, -50%);
}

.tasks-hero__nub svg {
  width: 0.7rem;
  height: 0.7rem;
}

.tasks-hero__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--th-blue-deep);
}

.tasks-hero__arrow svg {
  width: 18px;
  height: 10px;
}

.tasks-hero__center {
  display: flex;
  justify-content: center;
}

.tasks-hero__center-float {
  width: 100%;
  max-width: 11.5rem;
}

.tasks-hero__center-frame {
  overflow: hidden;
  border-radius: 16px;
  background: #dbe4f0;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
}

.tasks-hero__center-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 7;
  object-fit: cover;
}

.tasks-hero__tasks {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tasks-hero__task {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.32rem 0.45rem;
  border-radius: 8px;
  background: linear-gradient(90deg, #f8fafc, #fff);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
  font-size: 0.62rem;
  font-weight: 700;
  color: black;
}

.tasks-hero__task span {
  color: var(--th-muted);
}

.tasks-hero__task--1 { box-shadow: inset 2px 0 0 #1d4ed8, 0 4px 10px rgba(15, 23, 42, 0.06); }
.tasks-hero__task--2 { box-shadow: inset 2px 0 0 #3b82f6, 0 4px 10px rgba(15, 23, 42, 0.06); }
.tasks-hero__task--3 { box-shadow: inset 2px 0 0 #22c55e, 0 4px 10px rgba(15, 23, 42, 0.06); }
.tasks-hero__task--4 { box-shadow: inset 2px 0 0 #d4a373, 0 4px 10px rgba(15, 23, 42, 0.06); }
.tasks-hero__task--5 { box-shadow: inset 2px 0 0 #14b8a6, 0 4px 10px rgba(15, 23, 42, 0.06); }

.tasks-hero__features {
  position: relative;
  margin-top: 0.15rem;
}

.tasks-hero__connectors {
  display: block;
  width: 100%;
  height: 2.1rem;
  overflow: visible;
}

.tasks-hero__connector-path,
.tasks-hero__connector-glow {
  fill: none;
  stroke: var(--th-blue);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tasks-hero__connector-glow {
  stroke-width: 3;
  opacity: 0;
}

.tasks-hero__features-label {
  position: absolute;
  top: 0.55rem;
  left: 50%;
  margin: 0;
  padding: 0 0.35rem;
  background: #f3f6fa;
  font-size: 0.52rem;
  font-weight: 800;
  color: #1e3a8a;
  transform: translateX(-50%);
  white-space: nowrap;
}

.tasks-hero__feature-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  margin-top: 0.15rem;
}

.tasks-hero__feature {
  min-width: 0;
  text-align: center;
}

.tasks-hero__feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin: 0 auto 0.28rem;
}

.tasks-hero__feature-icon img {
  display: block;
  width: 1.7rem;
  height: 1.7rem;
  object-fit: contain;
}

.tasks-hero__feature-title {
  margin: 0;
  font-size: 0.69rem;
  font-weight: 820;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #1e3a8a;
}

.tasks-hero__feature-copy {
  margin: 0.12rem 0 0;
  font-size: 0.7rem;
  line-height: 1.3;
  color: black;
}

.tasks-hero.is-armed .tasks-hero__stat,
.tasks-hero.is-armed .tasks-hero__title {
  opacity: 0;
  transform: translateY(10px);
}

.tasks-hero.is-armed .tasks-hero__before-item--1 {
  opacity: 0;
  transform: translate(-6px, -5px);
}

.tasks-hero.is-armed .tasks-hero__before-item--2 {
  opacity: 0;
  transform: translate(6px, -4px);
}

.tasks-hero.is-armed .tasks-hero__before-item--3 {
  opacity: 0;
  transform: translate(-5px, 6px);
}

.tasks-hero.is-armed .tasks-hero__before-item--4 {
  opacity: 0;
  transform: translate(5px, 5px);
}

.tasks-hero.is-armed .tasks-hero__nub {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.86);
}

.tasks-hero.is-armed .tasks-hero__arrow--left {
  opacity: 0;
  transform: translateX(-8px);
}

.tasks-hero.is-armed .tasks-hero__arrow--right {
  opacity: 0;
  transform: translateX(-8px);
}

.tasks-hero.is-armed .tasks-hero__panel--before {
  opacity: 1;
}

.tasks-hero.is-armed .tasks-hero__center-frame {
  opacity: 0;
  transform: scale(0.96);
}

.tasks-hero.is-armed .tasks-hero__connector-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.tasks-hero.is-armed .tasks-hero__task {
  opacity: 0;
  transform: translateX(-8px);
}

.tasks-hero.is-armed .tasks-hero__feature-icon {
  opacity: 0;
  transform: scale(0.9);
}

.tasks-hero.is-armed .tasks-hero__feature-title,
.tasks-hero.is-armed .tasks-hero__feature-copy,
.tasks-hero.is-armed .tasks-hero__features-label {
  opacity: 0;
  transform: translateY(6px);
}

.tasks-hero.is-armed.is-playing .tasks-hero__stat:nth-child(1) { animation: tasks-hero-rise 0.5s var(--th-ease) 0.04s forwards; }
.tasks-hero.is-armed.is-playing .tasks-hero__stat:nth-child(2) { animation: tasks-hero-rise 0.5s var(--th-ease) 0.12s forwards; }
.tasks-hero.is-armed.is-playing .tasks-hero__stat:nth-child(3) { animation: tasks-hero-rise 0.5s var(--th-ease) 0.2s forwards; }
.tasks-hero.is-armed.is-playing .tasks-hero__stat:nth-child(4) { animation: tasks-hero-rise 0.5s var(--th-ease) 0.28s forwards; }
.tasks-hero.is-armed.is-playing .tasks-hero__stat:nth-child(5) { animation: tasks-hero-rise 0.5s var(--th-ease) 0.36s forwards; }

.tasks-hero.is-armed.is-playing .tasks-hero__title {
  animation: tasks-hero-rise 0.55s var(--th-ease) 0.22s forwards;
}

.tasks-hero.is-armed.is-playing .tasks-hero__before-item--1 { animation: tasks-hero-before-1 0.5s var(--th-ease) 0.55s forwards; }
.tasks-hero.is-armed.is-playing .tasks-hero__before-item--2 { animation: tasks-hero-before-2 0.5s var(--th-ease) 0.7s forwards; }
.tasks-hero.is-armed.is-playing .tasks-hero__before-item--3 { animation: tasks-hero-before-3 0.5s var(--th-ease) 0.85s forwards; }
.tasks-hero.is-armed.is-playing .tasks-hero__before-item--4 { animation: tasks-hero-before-4 0.5s var(--th-ease) 1s forwards; }

.tasks-hero.is-armed.is-playing .tasks-hero__nub {
  animation: tasks-hero-nub 0.45s var(--th-ease) 1.1s forwards;
}

.tasks-hero.is-armed.is-playing .tasks-hero__dot--before {
  animation: tasks-hero-pulse-glow 2.8s ease-in-out 0.9s infinite;
}

.tasks-hero.is-armed.is-playing .tasks-hero__dot--after {
  animation: tasks-hero-pulse-glow 2.8s ease-in-out 2.55s infinite;
}

.tasks-hero.is-armed.is-playing .tasks-hero__arrow--left {
  animation: tasks-hero-arrow 0.55s var(--th-ease) 1.55s forwards;
}

.tasks-hero.is-armed.is-playing .tasks-hero__panel--before {
  animation: tasks-hero-dim 0.6s ease 1.7s forwards;
}

.tasks-hero.is-armed.is-playing .tasks-hero__center-frame {
  animation: tasks-hero-center 0.7s var(--th-ease) 1.85s forwards;
}

.tasks-hero.is-armed.is-playing .tasks-hero__features-label {
  animation: tasks-hero-rise 0.45s var(--th-ease) 2.15s forwards;
}

.tasks-hero.is-armed.is-playing .tasks-hero__connector-path--left,
.tasks-hero.is-armed.is-playing .tasks-hero__connector-path--right {
  animation: tasks-hero-draw 0.85s ease 2.05s forwards;
}

.tasks-hero.is-armed.is-playing .tasks-hero__connector-path--mid-left,
.tasks-hero.is-armed.is-playing .tasks-hero__connector-path--mid-right {
  animation: tasks-hero-draw 0.7s ease 2.25s forwards;
}

.tasks-hero.is-armed.is-playing .tasks-hero__arrow--right {
  animation: tasks-hero-arrow 0.55s var(--th-ease) 2.55s forwards;
}

.tasks-hero.is-armed.is-playing .tasks-hero__task--1 { animation: tasks-hero-slide 0.42s var(--th-ease) 2.65s forwards; }
.tasks-hero.is-armed.is-playing .tasks-hero__task--2 { animation: tasks-hero-slide 0.42s var(--th-ease) 2.8s forwards; }
.tasks-hero.is-armed.is-playing .tasks-hero__task--3 { animation: tasks-hero-slide 0.42s var(--th-ease) 2.95s forwards; }
.tasks-hero.is-armed.is-playing .tasks-hero__task--4 { animation: tasks-hero-slide 0.42s var(--th-ease) 3.1s forwards; }
.tasks-hero.is-armed.is-playing .tasks-hero__task--5 { animation: tasks-hero-slide 0.42s var(--th-ease) 3.25s forwards; }

.tasks-hero.is-armed.is-playing .tasks-hero__feature--1 .tasks-hero__feature-icon { animation: tasks-hero-icon 0.4s var(--th-ease) 3.6s forwards; }
.tasks-hero.is-armed.is-playing .tasks-hero__feature--1 .tasks-hero__feature-title,
.tasks-hero.is-armed.is-playing .tasks-hero__feature--1 .tasks-hero__feature-copy { animation: tasks-hero-rise 0.4s var(--th-ease) 3.68s forwards; }
.tasks-hero.is-armed.is-playing .tasks-hero__feature--2 .tasks-hero__feature-icon { animation: tasks-hero-icon 0.4s var(--th-ease) 3.85s forwards; }
.tasks-hero.is-armed.is-playing .tasks-hero__feature--2 .tasks-hero__feature-title,
.tasks-hero.is-armed.is-playing .tasks-hero__feature--2 .tasks-hero__feature-copy { animation: tasks-hero-rise 0.4s var(--th-ease) 3.93s forwards; }
.tasks-hero.is-armed.is-playing .tasks-hero__feature--3 .tasks-hero__feature-icon { animation: tasks-hero-icon 0.4s var(--th-ease) 4.1s forwards; }
.tasks-hero.is-armed.is-playing .tasks-hero__feature--3 .tasks-hero__feature-title,
.tasks-hero.is-armed.is-playing .tasks-hero__feature--3 .tasks-hero__feature-copy { animation: tasks-hero-rise 0.4s var(--th-ease) 4.18s forwards; }
.tasks-hero.is-armed.is-playing .tasks-hero__feature--4 .tasks-hero__feature-icon { animation: tasks-hero-icon 0.4s var(--th-ease) 4.35s forwards; }
.tasks-hero.is-armed.is-playing .tasks-hero__feature--4 .tasks-hero__feature-title,
.tasks-hero.is-armed.is-playing .tasks-hero__feature--4 .tasks-hero__feature-copy { animation: tasks-hero-rise 0.4s var(--th-ease) 4.43s forwards; }

.tasks-hero.is-idle .tasks-hero__center-float {
  animation: tasks-hero-float 6s ease-in-out infinite;
}

.tasks-hero.is-idle .tasks-hero__dot--after,
.tasks-hero.is-idle .tasks-hero__dot--before {
  animation: tasks-hero-pulse-glow 2.8s ease-in-out infinite;
}

.tasks-hero.is-idle .tasks-hero__connector-glow {
  animation: tasks-hero-shimmer 3.2s ease-in-out infinite;
}

@keyframes tasks-hero-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tasks-hero-before-1 {
  from { opacity: 0; transform: translate(-6px, -5px); }
  to { opacity: 1; transform: translate(0, 0); }
}

@keyframes tasks-hero-before-2 {
  from { opacity: 0; transform: translate(6px, -4px); }
  to { opacity: 1; transform: translate(0, 0); }
}

@keyframes tasks-hero-before-3 {
  from { opacity: 0; transform: translate(-5px, 6px); }
  to { opacity: 1; transform: translate(0, 0); }
}

@keyframes tasks-hero-before-4 {
  from { opacity: 0; transform: translate(5px, 5px); }
  to { opacity: 1; transform: translate(0, 0); }
}

@keyframes tasks-hero-nub {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.86); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes tasks-hero-arrow {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes tasks-hero-dim {
  from { opacity: 1; }
  to { opacity: 0.72; }
}

@keyframes tasks-hero-center {
  from { opacity: 0; transform: scale(0.96); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14); }
  to {
    opacity: 1;
    transform: scale(1.02);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18), 0 16px 32px rgba(37, 99, 235, 0.16);
  }
}

@keyframes tasks-hero-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes tasks-hero-slide {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes tasks-hero-icon {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes tasks-hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes tasks-hero-pulse-glow {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 3px rgba(37, 99, 235, 0.22),
      0 0 10px 3px rgba(59, 130, 246, 0.65),
      0 0 20px 6px rgba(37, 99, 235, 0.35);
  }
  50% {
    transform: scale(1.18);
    box-shadow:
      0 0 0 6px rgba(37, 99, 235, 0.12),
      0 0 16px 6px rgba(96, 165, 250, 0.9),
      0 0 32px 12px rgba(37, 99, 235, 0.5);
  }
}

@keyframes tasks-hero-shimmer {
  0%, 100% { opacity: 0; }
  45%, 55% { opacity: 0.35; }
}

@media (max-width: 700px) {
  .tasks-hero__story {
    grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1.1fr) 14px minmax(0, 1fr);
  }

  .tasks-hero__stat-value {
    font-size: 0.62rem;
  }

  .tasks-hero__title {
    font-size: 0.68rem;
  }

  .tasks-hero__feature-copy {
    font-size: 0.38rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tasks-hero.is-armed .tasks-hero__stat,
  .tasks-hero.is-armed .tasks-hero__title,
  .tasks-hero.is-armed .tasks-hero__before-item,
  .tasks-hero.is-armed .tasks-hero__nub,
  .tasks-hero.is-armed .tasks-hero__arrow,
  .tasks-hero.is-armed .tasks-hero__panel--before,
  .tasks-hero.is-armed .tasks-hero__center-frame,
  .tasks-hero.is-armed .tasks-hero__task,
  .tasks-hero.is-armed .tasks-hero__feature-icon,
  .tasks-hero.is-armed .tasks-hero__feature-title,
  .tasks-hero.is-armed .tasks-hero__feature-copy,
  .tasks-hero.is-armed .tasks-hero__features-label,
  .tasks-hero.is-armed .tasks-hero__connector-path,
  .tasks-hero.is-armed .tasks-hero__connector-glow,
  .tasks-hero.is-idle .tasks-hero__center-float,
  .tasks-hero.is-idle .tasks-hero__dot {
    opacity: 1;
    transform: none;
    animation: none;
    stroke-dashoffset: 0;
  }

  .tasks-hero.is-armed .tasks-hero__nub {
    transform: translate(-50%, -50%);
  }
}
/* ===== TASKS HERO BANNER END ===== */

/* ===== COACH HERO BANNER START ===== */
.coach-hero {
  --ch-bg: #090e38;
  --ch-card: #0c1448;
  --ch-card-2: #0b1141;
  --ch-line: rgba(255, 255, 255, 0.08);
  --ch-ink: #f8fafc;
  --ch-muted: #8b93b8;
  --ch-cyan: #22d3ee;
  --ch-blue: #2563eb;
  --ch-green: #22c55e;
  --ch-purple: #7c5cfc;
  --ch-ease: cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  overflow: visible;
  color: var(--ch-ink);
}

.case-study-detail-hero__media.coach-hero img {
  max-height: none;
  width: auto;
  height: auto;
}

.case-study-detail-hero__media.coach-hero .coach-hero__logo img,
.case-study-detail-hero__media.coach-hero .coach-hero__nav-btn img {
  width: 100%;
  height: 100%;
}

.case-study-detail-hero__media.coach-hero .coach-hero__mic img {
  width: 0.95rem;
  height: 0.95rem;
}

.case-study-detail-hero__media.coach-hero .coach-hero__roleplay-icon img {
  width: 1.05rem;
  height: 1.05rem;
}

.case-study-detail-hero__media.coach-hero .coach-hero__skill-list img {
  width: 0.78rem;
  height: 0.78rem;
}

.case-study-detail-hero__media.coach-hero .coach-hero__journey-step img {
  width: 3rem;
  padding-top:8px;
  height: 3rem;
  max-width: 3rem;
  max-height: 3rem;
}

.coach-hero__board {
  display: grid;
  grid-template-columns: 2.15rem minmax(0, 1fr);
  overflow: hidden;
  border-radius: 16px;
  background: var(--ch-bg);
  box-shadow: 0 18px 40px rgba(3, 6, 30, 0.38);
}

.coach-hero__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32rem;
  padding: 0.55rem 0.22rem 0.7rem;
  background: rgba(5, 8, 32, 0.72);
  border-right: 1px solid var(--ch-line);
}

.coach-hero__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  margin-bottom: 0.28rem;
}

.coach-hero__logo img,
.coach-hero__nav-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.coach-hero__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0.22rem;
  border-radius: 0.38rem;
  opacity: 0.72;
  cursor: default;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
  margin-top: 9px;
}

.coach-hero__nav-btn.is-active {
  background: rgba(37, 99, 235, 0.28);
  opacity: 1;
}

.coach-hero__main {
  min-width: 0;
  padding: 0.55rem 0.55rem 0.6rem;
}

.coach-hero__title {
  margin: 0 0 0.42rem;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ch-ink);
}

.coach-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.82fr);
  gap: 0.4rem;
  align-items: stretch;
}

.coach-hero__center,
.coach-hero__aside,
.coach-hero__center-bottom {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.coach-hero__center {
  grid-template-rows: auto minmax(0, 1fr);
}

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

.coach-hero__aside {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.coach-hero__card {
  min-width: 0;
  padding: 0.42rem 0.46rem 0.46rem;
  border: 1px solid var(--ch-line);
  border-radius: 12px;
  background: var(--ch-card);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02);
  transition: transform 0.25s var(--ch-ease), box-shadow 0.25s var(--ch-ease), border-color 0.25s ease;
}

.coach-hero__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.32rem;
}

.coach-hero__card-title {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ch-ink);
}

.coach-hero__live-body {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 2.4rem;
}

.coach-hero__mic {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, #0E9F85 0%, #045F50 100%);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}

.coach-hero__mic img {
  width: 0.95rem;
  height: 0.95rem;
}

.coach-hero__wave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  min-width: 0;
  height: 2.05rem;
}

.coach-hero__bar {
  flex: 1 1 0;
  max-width: 2.5px;
  min-width: 2px;
  height: calc(var(--h, 50) * 1%);
  border-radius: 99px;
  background: #2dd4bf;
  transform: scaleY(0.55);
  transform-origin: center center;
}

.coach-hero__live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  padding: 0.08rem 0.32rem 0.08rem 0.22rem;
  border: 1px solid rgba(45, 212, 191, 0.4);
  border-radius: 99px;
  background: rgba(45, 212, 191, 0.1);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #2dd4bf;
}

.coach-hero__live-dot {
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: #2dd4bf;
  box-shadow: 0 0 6px rgba(45, 212, 191, 0.7);
}

.coach-hero__tip {
  margin: 0.42rem 0 0;
  padding: 0.38rem 0.5rem;
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: 10px;
  background: rgba(12, 28, 78, 0.72);
  font-size: 0.55rem;
  line-height: 1.4;
  text-align: center;
  color: #F8F8F8;
}

.coach-hero__avg-value {
  margin: 0.08rem 0 0;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.coach-hero__avg-denom {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ch-muted);
}

.coach-hero__growth {
  font-size: 0.52rem;
  font-weight: 700;
  color: #4ade80;
}

.coach-hero__donut-wrap {
  position: relative;
  width: 4.6rem;
  height: 4.6rem;
  margin: 0.2rem auto 0.35rem;
}

.coach-hero__donut {
  display: block;
  width: 100%;
  height: 100%;
}

.coach-hero__donut-ring {
  stroke-dasharray: 100;
  stroke-dashoffset: 16;
}

.coach-hero__donut-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 0.12rem;
}

.coach-hero__donut-label span:last-child {
  font-size: 0.48rem;
  font-weight: 600;
  color: var(--ch-muted);
}

.coach-hero__metrics,
.coach-hero__scores,
.coach-hero__skill-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.coach-hero__metric,
.coach-hero__score-row,
.coach-hero__skill-list li {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.6rem;
  color: #FAF9F6;
}

.coach-hero__metric {
  justify-content: space-between;
  padding: 0.12rem 0;
}

.coach-hero__metric span:nth-child(2) {
  flex: 1 1 auto;
  min-width: 0;
}

.coach-hero__metric strong {
  font-weight: 700;
  color: var(--ch-ink);
}

.coach-hero__metric-dot {
  flex: 0 0 auto;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
}

.coach-hero__metric-dot--purple { background: var(--ch-purple); }
.coach-hero__metric-dot--blue { background: #3b82f6; }
.coach-hero__metric-dot--sky { background: #60a5fa; }
.coach-hero__metric-dot--cyan { background: var(--ch-cyan); }

.coach-hero__roleplay {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.coach-hero__roleplay-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-bottom: 0.28rem;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.22);
}

.coach-hero__roleplay-icon img {
  width: 1.05rem;
  height: 1.05rem;
}

.coach-hero__roleplay-title {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--ch-ink);
}

.coach-hero__roleplay-copy {
  margin: 0.12rem 0 0.4rem;
  font-size: 0.5rem;
  line-height: 1.35;
  color:#FAF9F6 ;
}

.coach-hero__practice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 0.28rem 0.62rem;
  border-radius: 8px;
  background: var(--ch-blue);
  font-size: 0.5rem;
  font-weight: 700;
  color: #fff;
  cursor: default;
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

.coach-hero__scores {
  display: grid;
  gap: 0.18rem;
}

.coach-hero__score-row {
  justify-content: space-between;
  padding: 0.16rem 0.22rem;
  border-radius: 7px;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.coach-hero__score-row span {
  color: #FAF9F6;
}

.coach-hero__score-val {
  font-size: 0.58rem;
  font-weight: 800;
}

.coach-hero__score-val--teal { color: #2dd4bf; }
.coach-hero__score-val--yellow { color: #facc15; }
.coach-hero__score-val--orange { color: #fb923c; }

.coach-hero__view-all {
  display: block;
  margin-top: 0.28rem;
  font-size: 0.48rem;
  font-weight: 700;
  color: #93c5fd;
  text-align: right;
  cursor: default;
}

.coach-hero__skill-list {
  display: grid;
  gap: 0.22rem;
  margin-top: 0.28rem;
}

.coach-hero__skill-list li {
  color: #dbe4ff;
}

.coach-hero__skill-list img {
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 4px;
}

.coach-hero__journey {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem;
  padding: 0.42rem 0.7rem;
  overflow: visible;
  border-radius: 12px;
  background: var(--ch-bg);
  box-shadow: 0 12px 28px rgba(3, 6, 30, 0.28);
}

.coach-hero__journey-step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  padding: 0.12rem 0.18rem;
  border-radius: 8px;
  font-size: 0.55rem;
  font-weight: 650;
  color: #e2e8f0;
  white-space: nowrap;
}

.coach-hero__journey-step img {
  width: 3rem;
  height: 3rem;
  max-width: 3rem;
  max-height: 3rem;
  flex: 0 0 auto;
  object-fit: contain;
}

.coach-hero__chevron {
  display: flex;
  flex: 0 0 auto;
  width: 0.42rem;
  color: #60a5fa;
  opacity: 0.85;
}

.coach-hero__chevron svg {
  display: block;
  width: 100%;
  height: auto;
}

.coach-hero.is-armed .coach-hero__board {
  opacity: 0;
  transform: translateY(10px);
}

.coach-hero.is-armed .coach-hero__card {
  opacity: 0;
  transform: translateY(10px);
}

.coach-hero.is-armed .coach-hero__tip,
.coach-hero.is-armed .coach-hero__growth,
.coach-hero.is-armed .coach-hero__score-row,
.coach-hero.is-armed .coach-hero__metric {
  opacity: 0;
  transform: translateY(8px);
}

.coach-hero.is-armed .coach-hero__donut-ring {
  stroke-dashoffset: 100;
}

.coach-hero.is-armed.is-playing .coach-hero__board {
  animation: coach-hero-rise 500ms ease-out forwards;
}

.coach-hero.is-armed.is-playing .coach-hero__card--1 { animation: coach-hero-rise 500ms var(--ch-ease) 80ms forwards; }
.coach-hero.is-armed.is-playing .coach-hero__card--2 { animation: coach-hero-rise 500ms var(--ch-ease) 180ms forwards; }
.coach-hero.is-armed.is-playing .coach-hero__card--3 { animation: coach-hero-rise 500ms var(--ch-ease) 280ms forwards; }
.coach-hero.is-armed.is-playing .coach-hero__card--4 { animation: coach-hero-rise 500ms var(--ch-ease) 380ms forwards; }
.coach-hero.is-armed.is-playing .coach-hero__card--5 { animation: coach-hero-rise 500ms var(--ch-ease) 480ms forwards; }
.coach-hero.is-armed.is-playing .coach-hero__card--6 { animation: coach-hero-rise 500ms var(--ch-ease) 580ms forwards; }

.coach-hero.is-armed.is-playing .coach-hero__bar {
  animation: coach-hero-wave var(--dur, 0.8s) ease-in-out var(--d, 0s) infinite alternate;
}

.coach-hero.is-armed.is-playing .coach-hero__mic {
  animation: coach-hero-mic 2.4s ease-in-out 0.2s infinite;
}

.coach-hero.is-armed.is-playing .coach-hero__live-pill {
  animation: coach-hero-live 2.2s ease-in-out 0.15s infinite;
}

.coach-hero.is-armed.is-playing .coach-hero__live-dot {
  animation: coach-hero-dot 1.6s ease-in-out infinite;
}

.coach-hero.is-armed.is-playing .coach-hero__tip {
  animation: coach-hero-rise 520ms var(--ch-ease) 420ms forwards;
}

.coach-hero.is-armed.is-playing .coach-hero__growth {
  animation: coach-hero-rise 480ms var(--ch-ease) 320ms forwards;
}

.coach-hero.is-armed.is-playing .coach-hero__donut-ring {
  animation: coach-hero-donut 1.1s var(--ch-ease) 700ms forwards;
}

.coach-hero.is-armed.is-playing .coach-hero__metric--1 { animation: coach-hero-rise 400ms var(--ch-ease) 1.82s forwards; }
.coach-hero.is-armed.is-playing .coach-hero__metric--2 { animation: coach-hero-rise 400ms var(--ch-ease) 1.94s forwards; }
.coach-hero.is-armed.is-playing .coach-hero__metric--3 { animation: coach-hero-rise 400ms var(--ch-ease) 2.06s forwards; }
.coach-hero.is-armed.is-playing .coach-hero__metric--4 { animation: coach-hero-rise 400ms var(--ch-ease) 2.18s forwards; }

.coach-hero.is-armed.is-playing .coach-hero__score-row--1 { animation: coach-hero-rise 400ms var(--ch-ease) 0.48s forwards; }
.coach-hero.is-armed.is-playing .coach-hero__score-row--2 { animation: coach-hero-rise 400ms var(--ch-ease) 0.58s forwards; }
.coach-hero.is-armed.is-playing .coach-hero__score-row--3 { animation: coach-hero-rise 400ms var(--ch-ease) 0.68s forwards; }
.coach-hero.is-armed.is-playing .coach-hero__score-row--4 { animation: coach-hero-rise 400ms var(--ch-ease) 0.78s forwards; }

.coach-hero.is-idle .coach-hero__board,
.coach-hero.is-idle .coach-hero__card,
.coach-hero.is-idle .coach-hero__tip,
.coach-hero.is-idle .coach-hero__growth,
.coach-hero.is-idle .coach-hero__metric,
.coach-hero.is-idle .coach-hero__score-row {
  opacity: 1;
  transform: none;
  animation: none;
}

.coach-hero.is-idle .coach-hero__roleplay-icon {
  animation: coach-hero-float 4.8s ease-in-out infinite;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .coach-hero.is-idle .coach-hero__card:hover {
    transform: translateY(-3px);
    border-color: rgba(96, 165, 250, 0.38);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.16);
  }

  .coach-hero.is-idle .coach-hero__roleplay:hover {
    transform: translateY(-3px);
  }

  .coach-hero__nav-btn:hover {
    opacity: 1;
    transform: scale(1.08);
  }

  .coach-hero__practice-btn:hover {
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.55);
  }

  .coach-hero.is-idle .coach-hero__score-row:hover {
    transform: translateY(-2px);
    border-color: rgba(96, 165, 250, 0.28);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
  }
}

@keyframes coach-hero-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes coach-hero-wave {
  from { transform: scaleY(0.42); }
  to { transform: scaleY(1); }
}

@keyframes coach-hero-mic {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12), 0 0 10px rgba(34, 211, 238, 0.18); }
  50% { box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.2), 0 0 16px rgba(34, 211, 238, 0.32); }
}

@keyframes coach-hero-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.78; transform: scale(1.04); }
}

@keyframes coach-hero-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}

@keyframes coach-hero-donut {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 16; }
}

@keyframes coach-hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (max-width: 700px) {
  .coach-hero__layout,
  .coach-hero__center-bottom {
    grid-template-columns: 1fr;
  }

  .coach-hero__title {
    font-size: 0.78rem;
  }

  .coach-hero__avg-value {
    font-size: 1.02rem;
  }

  .coach-hero__journey {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.28rem 0.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coach-hero.is-armed .coach-hero__board,
  .coach-hero.is-armed .coach-hero__card,
  .coach-hero.is-armed .coach-hero__tip,
  .coach-hero.is-armed .coach-hero__growth,
  .coach-hero.is-armed .coach-hero__metric,
  .coach-hero.is-armed .coach-hero__score-row,
  .coach-hero.is-armed .coach-hero__bar,
  .coach-hero.is-armed .coach-hero__mic,
  .coach-hero.is-armed .coach-hero__live-pill,
  .coach-hero.is-armed .coach-hero__live-dot,
  .coach-hero.is-armed .coach-hero__roleplay-icon {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .coach-hero.is-armed .coach-hero__donut-ring {
    stroke-dashoffset: 16;
    animation: none;
  }

  .coach-hero.is-armed .coach-hero__bar {
    transform: scaleY(0.85);
  }

  .coach-hero__nav-btn:hover,
  .coach-hero__card:hover,
  .coach-hero__score-row:hover {
    transform: none;
  }
}
/* ===== COACH HERO BANNER END ===== */

/* ===== APPOINT HERO BANNER START ===== */
.appoint-hero {
  --ah-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ah-green: #4ade80;
  --ah-green-soft: #bbf7d0;
  --ah-blue: #2563eb;
  --ah-ink: #0f172a;
  --ah-muted: #94a3b8;
  --ah-line: #7dd3fc;
  width: 100%;
  margin: 0;
  overflow: visible;
}

.case-study-detail-hero__media.appoint-hero img {
  max-height: none;
  width: auto;
  height: auto;
}

.case-study-detail-hero__media.appoint-hero .appoint-hero__phone-shell > img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: top center;
}

.case-study-detail-hero__media.appoint-hero .appoint-hero__feat-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
}

.appoint-hero__scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1304 / 1040;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(59, 91, 255, 0.28);
  background: linear-gradient(
  180deg,
  rgba(22, 36, 112, 0.4) 0%,
  rgba(7, 18, 65, 0.4) 100%
);
  box-shadow: 0 18px 40px rgba(3, 6, 30, 0.38);
}

.appoint-hero__connectors {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.appoint-hero__line {
  fill: none;
  stroke: var(--ah-line);
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-dasharray: 4 6;
  opacity: 0.9;
  filter: drop-shadow(0 0 3px rgba(125, 211, 252, 0.45));
}

.appoint-hero__feat {
  position: absolute;
  z-index: 2;
  width: 11.6%;
}

.appoint-hero__feat--schedule { left: 9.2%; top: 16.5%; }
.appoint-hero__feat--deposit { left: 6.4%; top: 41.5%; }
.appoint-hero__feat--reminder { left: 8.6%; top: 66.5%; }
.appoint-hero__feat--checkin { right: 9.2%; top: 16.5%; }
.appoint-hero__feat--refunds { right: 5.6%; top: 41.5%; }
.appoint-hero__feat--noshows { right: 7.6%; top: 66.5%; }

.appoint-hero__feat-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  aspect-ratio: 1 / 1.05;
  padding: 0.55rem 0.4rem 0.48rem;
  border-radius: 0.9rem;
  background: linear-gradient(
    180deg,
    rgba(22, 36, 112, 0.4) 0%,
    rgba(7, 18, 65, 0.4) 100%
  );
  border: 1px solid rgba(148, 163, 255, 0.16);
  box-shadow: 0 14px 28px rgba(3, 6, 30, 0.34);
  backdrop-filter: blur(10px);
  text-align: center;
}

.appoint-hero__feat-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  max-width: 4rem;
  aspect-ratio: 1;
  overflow: visible;
  background: transparent;
}

.appoint-hero__feat-title {
  margin: 0;
  max-width: 100%;
  font-size: clamp(0.40rem, 0.90vw, 0.67rem);
  font-weight: 700;
  line-height: 1.15;
  color: #f8fafc;
  white-space: normal;
}

.appoint-hero__phone {
  position: absolute;
  left: 50%;
  top: 12%;
  z-index: 3;
  width: calc(680 / 1304 * 100%);
  aspect-ratio: 366 / 496.0673828125;
  transform: translateX(-50%);
  filter: drop-shadow(0 28px 46px rgba(3, 6, 30, 0.48));
}

.appoint-hero__phone-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: clamp(1.1rem, 3.2vw, 1.85rem);
  background: transparent;
}

.appoint-hero__phone-shell > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.appoint-hero__screen {
  position: absolute;
  top: 24%;
  right: 8.5%;
  bottom: 1.2%;
  left: 8.5%;
  z-index: 2;
  overflow: hidden;
  background: #eef2f7;
  pointer-events: none;
}

.appoint-hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 7% 8% 8.5%;
}

.appoint-hero__slide--booking {
  z-index: 1;
}

.appoint-hero__slide--confirm {
  z-index: 2;
}

.appoint-hero__booking,
.appoint-hero__confirm {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.95rem 0.7rem 0.85rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.appoint-hero__booking {
  align-items: stretch;
}

.appoint-hero__confirm {
  align-items: center;
  text-align: center;
}

.appoint-hero__booking-title,
.appoint-hero__appt {
  margin: 0;
  font-size: clamp(0.62rem, 1.45vw, 0.92rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ah-ink);
}

.appoint-hero__booking-title {
  margin-bottom: 0.62rem;
  text-align: center;
}

.appoint-hero__step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.42rem;
  padding: 0.42rem 0.5rem;
  border-radius: 0.7rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.appoint-hero__step-number {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--ah-blue);
  color: #fff;
  font-size: clamp(0.48rem, 0.95vw, 0.68rem);
  font-weight: 800;
  line-height: 1;
}

.appoint-hero__step-content {
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}

.appoint-hero__step-title {
  margin: 0;
  font-size: clamp(0.42rem, 0.85vw, 0.69rem);
  font-weight: 600;
  line-height: 1.2;
  color: black;
}

.appoint-hero__step-value {
  margin: 0.1rem 0 0;
  font-size: clamp(0.5rem, 1vw, 0.72rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ah-ink);
}

.appoint-hero__when {
  margin: 0.28rem 0 0;
  font-size: clamp(0.5rem, 1vw, 0.8rem);
  line-height: 1.3;
  color: black;
}

.appoint-hero__success {
  position: relative;
  width: 3.35rem;
  height: 3.35rem;
  margin-top: 0.72rem;
}

.appoint-hero__success-glow {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.38) 0%, rgba(74, 222, 128, 0) 70%);
}

.appoint-hero__success-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.appoint-hero__success-fill {
  fill: #dcfce7;
}

.appoint-hero__success-check {
  fill: none;
  stroke: #22c55e;
  stroke-width: 5.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 0;
}

.appoint-hero__confirmed {
  margin: 0.55rem 0 0;
  font-size: clamp(0.68rem, 1.4vw, 0.92rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--ah-ink);
}

.appoint-hero__set {
  margin: 0.22rem 0 0;
  font-size: clamp(0.5rem, 1vw, 0.9rem);
  line-height: 1.3;
  color: black;
}

.appoint-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.58rem 0.75rem;
  border-radius: 0.78rem;
  background: var(--ah-blue);
  color: #fff;
  font-size: clamp(0.48rem, 1.1vw, 0.72rem);
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.28);
}

.appoint-hero.is-armed .appoint-hero__phone-shell {
  opacity: 0;
  transform: translateY(30px) scale(0.92);
}

.appoint-hero.is-armed .appoint-hero__feat {
  opacity: 0;
}

.appoint-hero.is-armed .appoint-hero__feat[data-ah-side="left"] {
  transform: translateX(-18px) scale(0.9);
}

.appoint-hero.is-armed .appoint-hero__feat[data-ah-side="right"] {
  transform: translateX(18px) scale(0.9);
}

.appoint-hero.is-armed .appoint-hero__line {
  opacity: 0;
  stroke-dashoffset: 140;
}

.appoint-hero.is-armed .appoint-hero__slide {
  opacity: 0;
}

.appoint-hero.is-armed .appoint-hero__booking-title,
.appoint-hero.is-armed .appoint-hero__step,
.appoint-hero.is-armed .appoint-hero__success {
  opacity: 0;
}

.appoint-hero.is-armed .appoint-hero__step {
  transform: translateX(-8px);
}

.appoint-hero.is-armed .appoint-hero__success {
  transform: scale(0.82);
}

.appoint-hero.is-armed .appoint-hero__success-glow {
  opacity: 0;
  transform: scale(0.7);
}

.appoint-hero.is-armed .appoint-hero__success-check {
  stroke-dashoffset: 48;
}

.appoint-hero.is-armed.is-playing .appoint-hero__phone-shell {
  animation: appoint-hero-phone-in 700ms var(--ah-ease) 0s forwards;
}

.appoint-hero.is-armed.is-playing .appoint-hero__slide--booking {
  animation: appoint-hero-booking-cycle 8.5s var(--ah-ease) 0.7s infinite;
}

.appoint-hero.is-armed.is-playing .appoint-hero__slide--confirm {
  animation: appoint-hero-confirm-cycle 8.5s var(--ah-ease) 0.7s infinite;
}

.appoint-hero.is-armed.is-playing .appoint-hero__booking-title {
  animation: appoint-hero-booking-title 8.5s var(--ah-ease) 0.7s infinite;
}

.appoint-hero.is-armed.is-playing .appoint-hero__step:nth-child(2) {
  animation: appoint-hero-booking-step-1 8.5s var(--ah-ease) 0.7s infinite;
}

.appoint-hero.is-armed.is-playing .appoint-hero__step:nth-child(3) {
  animation: appoint-hero-booking-step-2 8.5s var(--ah-ease) 0.7s infinite;
}

.appoint-hero.is-armed.is-playing .appoint-hero__success {
  animation: appoint-hero-success-loop 8.5s var(--ah-ease) 0.7s infinite;
}

.appoint-hero.is-armed.is-playing .appoint-hero__success-glow {
  animation: appoint-hero-glow-loop 8.5s var(--ah-ease) 0.7s infinite;
}

.appoint-hero.is-armed.is-playing .appoint-hero__success-check {
  animation: appoint-hero-check-loop 8.5s ease 0.7s infinite;
}

.appoint-hero.is-armed.is-playing .appoint-hero__feat--schedule {
  animation: appoint-hero-card-left 520ms var(--ah-ease) 2.18s forwards;
}

.appoint-hero.is-armed.is-playing .appoint-hero__feat--checkin {
  animation: appoint-hero-card-right 520ms var(--ah-ease) 2.18s forwards;
}

.appoint-hero.is-armed.is-playing .appoint-hero__feat--deposit {
  animation: appoint-hero-card-left 520ms var(--ah-ease) 2.36s forwards;
}

.appoint-hero.is-armed.is-playing .appoint-hero__feat--refunds {
  animation: appoint-hero-card-right 520ms var(--ah-ease) 2.36s forwards;
}

.appoint-hero.is-armed.is-playing .appoint-hero__feat--reminder {
  animation: appoint-hero-card-left 520ms var(--ah-ease) 2.54s forwards;
}

.appoint-hero.is-armed.is-playing .appoint-hero__feat--noshows {
  animation: appoint-hero-card-right 520ms var(--ah-ease) 2.54s forwards;
}

.appoint-hero.is-armed.is-playing .appoint-hero__line--1 { animation: appoint-hero-line-in 900ms ease 2.82s forwards; }
.appoint-hero.is-armed.is-playing .appoint-hero__line--2 { animation: appoint-hero-line-in 900ms ease 2.9s forwards; }
.appoint-hero.is-armed.is-playing .appoint-hero__line--3 { animation: appoint-hero-line-in 900ms ease 2.98s forwards; }
.appoint-hero.is-armed.is-playing .appoint-hero__line--4 { animation: appoint-hero-line-in 900ms ease 2.86s forwards; }
.appoint-hero.is-armed.is-playing .appoint-hero__line--5 { animation: appoint-hero-line-in 900ms ease 2.94s forwards; }
.appoint-hero.is-armed.is-playing .appoint-hero__line--6 { animation: appoint-hero-line-in 900ms ease 3.02s forwards; }

.appoint-hero.is-armed.is-playing.is-idle .appoint-hero__phone-shell,
.appoint-hero.is-armed.is-playing.is-idle .appoint-hero__feat,
.appoint-hero.is-armed.is-playing.is-idle .appoint-hero__line {
  opacity: 1;
  transform: none;
  stroke-dashoffset: 0;
  animation: none;
}

.appoint-hero.is-armed.is-playing.is-idle .appoint-hero__feat--schedule .appoint-hero__feat-inner {
  animation: appoint-hero-float-sm 6.2s ease-in-out 0.15s infinite;
}

.appoint-hero.is-armed.is-playing.is-idle .appoint-hero__feat--deposit .appoint-hero__feat-inner {
  animation: appoint-hero-float-sm 6.8s ease-in-out 0.55s infinite;
}

.appoint-hero.is-armed.is-playing.is-idle .appoint-hero__feat--reminder .appoint-hero__feat-inner {
  animation: appoint-hero-float-sm 6.4s ease-in-out 0.95s infinite;
}

.appoint-hero.is-armed.is-playing.is-idle .appoint-hero__feat--checkin .appoint-hero__feat-inner {
  animation: appoint-hero-float-sm 6.6s ease-in-out 0.3s infinite;
}

.appoint-hero.is-armed.is-playing.is-idle .appoint-hero__feat--refunds .appoint-hero__feat-inner {
  animation: appoint-hero-float-sm 7s ease-in-out 0.7s infinite;
}

.appoint-hero.is-armed.is-playing.is-idle .appoint-hero__feat--noshows .appoint-hero__feat-inner {
  animation: appoint-hero-float-sm 6.3s ease-in-out 1.1s infinite;
}

.appoint-hero.is-armed.is-playing.is-idle .appoint-hero__line {
  opacity: 0.9;
  animation: appoint-hero-dash-flow 9s linear infinite;
}

.appoint-hero.is-armed.is-playing.is-idle .appoint-hero__cta {
  animation: appoint-hero-cta-glow 2.8s ease-in-out infinite;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .appoint-hero.is-armed.is-playing.is-idle .appoint-hero__feat-inner:hover {
    border-color: rgba(147, 197, 253, 0.45);
    box-shadow: 0 12px 24px rgba(3, 6, 30, 0.34);
  }
}

@keyframes appoint-hero-phone-in {
  from { opacity: 0; transform: translateY(30px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes appoint-hero-booking-cycle {
  0% { opacity: 0; transform: translateY(16px); }
  8%, 38% { opacity: 1; transform: translateY(0); }
  46% { opacity: 0; transform: translateY(-14px); }
  47%, 100% { opacity: 0; transform: translateY(16px); }
}

@keyframes appoint-hero-confirm-cycle {
  0%, 38% { opacity: 0; transform: translateY(16px); }
  46%, 88% { opacity: 1; transform: translateY(0); }
  96% { opacity: 0; transform: translateY(-14px); }
  97%, 100% { opacity: 0; transform: translateY(16px); }
}

@keyframes appoint-hero-booking-title {
  0% { opacity: 0; transform: translateY(6px); }
  8%, 38% { opacity: 1; transform: translateY(0); }
  46%, 100% { opacity: 0; }
}

@keyframes appoint-hero-booking-step-1 {
  0%, 10% { opacity: 0; transform: translateX(-8px); }
  18%, 38% { opacity: 1; transform: translateX(0); }
  46%, 100% { opacity: 0; transform: translateX(-8px); }
}

@keyframes appoint-hero-booking-step-2 {
  0%, 16% { opacity: 0; transform: translateX(-8px); }
  24%, 38% { opacity: 1; transform: translateX(0); }
  46%, 100% { opacity: 0; transform: translateX(-8px); }
}

@keyframes appoint-hero-success-loop {
  0%, 46% { opacity: 0; transform: scale(0.82); }
  56%, 88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.82); }
}

@keyframes appoint-hero-glow-loop {
  0%, 48% { opacity: 0; transform: scale(0.7); }
  56% { opacity: 1; transform: scale(1.18); }
  64%, 88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.7); }
}

@keyframes appoint-hero-check-loop {
  0%, 50% { stroke-dashoffset: 48; }
  60%, 88% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 48; }
}

@keyframes appoint-hero-card-left {
  from { opacity: 0; transform: translateX(-18px) scale(0.9); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes appoint-hero-card-right {
  from { opacity: 0; transform: translateX(18px) scale(0.9); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes appoint-hero-line-in {
  from { opacity: 0; stroke-dashoffset: 140; }
  to { opacity: 0.9; stroke-dashoffset: 0; }
}

@keyframes appoint-hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes appoint-hero-float-sm {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes appoint-hero-dash-flow {
  to { stroke-dashoffset: -80; }
}

@keyframes appoint-hero-cta-glow {
  0%, 100% { box-shadow: 0 8px 16px rgba(37, 99, 235, 0.28); }
  50% { box-shadow: 0 8px 20px rgba(37, 99, 235, 0.48), 0 0 18px rgba(59, 130, 246, 0.35); }
}

@media (max-width: 700px) {
  .appoint-hero__feat {
    width: 13.2%;
  }

  .appoint-hero__feat-title {
    font-size: 0.5rem;
  }

  .appoint-hero__feat-inner {
    padding: 0.42rem 0.28rem 0.36rem;
    gap: 0.22rem;
    border-radius: 0.7rem;
  }

  .appoint-hero__feat-icon {
    width: 48%;
    max-width: 1.55rem;
  }

  .appoint-hero__phone {
    width: min(62%, 400px);
    top: 12%;
  }

  .appoint-hero__appt,
  .appoint-hero__booking-title,
  .appoint-hero__confirmed {
    font-size: 0.58rem;
  }

  .appoint-hero__when,
  .appoint-hero__set,
  .appoint-hero__cta,
  .appoint-hero__step-value {
    font-size: 0.50rem;
  }

  .appoint-hero__step-title {
    font-size: 0.42rem;
  }

  .appoint-hero__step-number {
    width: 1.1rem;
    height: 1.1rem;
    font-size: 0.48rem;
  }

  .appoint-hero__step {
    gap: 0.38rem;
    margin-top: 0.32rem;
    padding: 0.32rem 0.38rem;
  }

  .appoint-hero__confirm,
  .appoint-hero__booking {
    padding: 0.55rem 0.4rem 0.48rem;
  }

  .appoint-hero__success {
    width: 2.2rem;
    height: 2.2rem;
    margin-top: 0.42rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .appoint-hero.is-armed .appoint-hero__phone-shell,
  .appoint-hero.is-armed .appoint-hero__slide--confirm,
  .appoint-hero.is-armed .appoint-hero__booking-title,
  .appoint-hero.is-armed .appoint-hero__step,
  .appoint-hero.is-armed .appoint-hero__confirm,
  .appoint-hero.is-armed .appoint-hero__success,
  .appoint-hero.is-armed .appoint-hero__success-glow,
  .appoint-hero.is-armed .appoint-hero__success-check,
  .appoint-hero.is-armed .appoint-hero__confirmed,
  .appoint-hero.is-armed .appoint-hero__set,
  .appoint-hero.is-armed .appoint-hero__cta,
  .appoint-hero.is-armed .appoint-hero__feat,
  .appoint-hero.is-armed .appoint-hero__line,
  .appoint-hero.is-idle .appoint-hero__phone-shell,
  .appoint-hero.is-idle .appoint-hero__feat-inner,
  .appoint-hero.is-idle .appoint-hero__cta,
  .appoint-hero.is-idle .appoint-hero__line {
    opacity: 1;
    transform: none;
    animation: none;
    stroke-dashoffset: 0;
  }

  .appoint-hero.is-armed .appoint-hero__slide--booking {
    opacity: 0;
    animation: none;
  }

  .appoint-hero__feat:hover,
  .appoint-hero__feat-inner:hover {
    transform: none;
  }
}
/* ===== APPOINT HERO BANNER END ===== */

/* ===== AI PRODUCT MATCHING HERO BANNER START ===== */
.ai-product-matching-hero {
  --ai-product-matching-loop: 7s;
  --ai-product-matching-ease: ease-in-out;
  --ai-product-matching-cyan: #7dd3fc;
  --ai-product-matching-blue: #60a5fa;
  --ai-product-matching-green: #22c55e;
  --ai-product-matching-yellow: #eab308;
  --ai-product-matching-ink: #e8eefc;
  margin: 0;
  width: 100%;
  overflow: visible;
}

.case-study-detail-hero__media.ai-product-matching-hero img {
  max-height: none;
  width: auto;
  height: auto;
}

.case-study-detail-hero__media.ai-product-matching-hero .ai-product-matching-hero__source-icon img,
.case-study-detail-hero__media.ai-product-matching-hero .ai-product-matching-hero__feature-icon img,
.case-study-detail-hero__media.ai-product-matching-hero .ai-product-matching-hero__thumb img,
.case-study-detail-hero__media.ai-product-matching-hero .ai-product-matching-hero__tick img,
.case-study-detail-hero__media.ai-product-matching-hero .ai-product-matching-hero__query img,
.case-study-detail-hero__media.ai-product-matching-hero .ai-product-matching-hero__match-icon img,
.case-study-detail-hero__media.ai-product-matching-hero .ai-product-matching-hero__search-icon img {
  display: block;
  width: 65%;
  height: 100%;
  object-fit: contain;
}

.ai-product-matching-hero__scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1540 / 1140;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(59, 91, 255, 0.28);
  background:#010640;
  ;
  box-shadow: 0 18px 40px rgba(3, 6, 30, 0.38);
}

.ai-product-matching-hero__connectors {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ai-product-matching-hero__line {
  fill: none;
  stroke: var(--ai-product-matching-cyan);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: miter;
  stroke-dasharray: 5 7;
  opacity: 0.78;
  filter: drop-shadow(0 0 3px rgba(125, 211, 252, 0.4));
}

.ai-product-matching-hero__particle {
  opacity: 0;
}

.ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__particle {
  opacity: 0.95;
}

.ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__particle--ai {
  animation: ai-product-matching-hero-ai-particle var(--ai-product-matching-loop) var(--ai-product-matching-ease) infinite;
}

.ai-product-matching-hero__source {
  position: absolute;
  z-index: 3;
  left: 5.4%;
  width: 14.2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32rem;
  text-align: center;
}

.ai-product-matching-hero__source--1 { top: 13.2%; }
.ai-product-matching-hero__source--2 { top: 36.6%; }
.ai-product-matching-hero__source--3 { top: 60%; }

.ai-product-matching-hero__source-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68%;
  max-width: 3.5rem;
  aspect-ratio: 1;
  padding: 0.42rem;
  border-radius: 0.9rem;
  background: rgba(16, 36, 88, 0.55);
  border: 1px dashed rgba(125, 211, 252, 0.38);
  box-shadow: 0 8px 16px rgba(3, 6, 30, 0.28);
}

.ai-product-matching-hero__source-label {
  margin: 0;
  font-size: clamp(0.52rem, 1.05vw, 0.63rem);
  font-weight: 650;
  line-height: 1.2;
  color: var(--ai-product-matching-ink);
}

.ai-product-matching-hero__dashboard {
  position: absolute;
  z-index: 3;
  left: 28.4%;
  top: 5.4%;
  width: 30.4%;
  height: 75.5%;
  display: flex;
  flex-direction: column;
  padding: 0.72rem 0.62rem 0.7rem;
  border-radius: 1.35rem;
   background: #050F47;

  border: 1px solid rgba(148, 163, 255, 0.2);
  box-shadow: 0 16px 32px rgba(3, 6, 30, 0.4);
}

.ai-product-matching-hero__search {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  flex: 0 0 auto;
  height: 1.55rem;
  margin: 0 0.08rem 0.7rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: rgba(6, 12, 32, 0.78);
  border: 1px solid rgba(148, 163, 255, 0.22);
}

.ai-product-matching-hero__search-icon {
  flex: 0 0 auto;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 0.22rem;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid #1C2561;
  justify-content: center;
  align-items: center;
  
}

.ai-product-matching-hero__search-line {
  flex: 1;
  height: 0.32rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.32);
}

.ai-product-matching-hero__rows {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  flex: 1;
  min-height: 0;
}

.ai-product-matching-hero__row {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  flex: 1;
  min-height: 0;
  padding: 0.22rem 0.32rem;
  border-radius: 0.55rem;
  background: rgba(8, 18, 48, 0.72);
  border: 1px solid rgba(148, 163, 255, 0.08);
}

.ai-product-matching-hero__row--review {
  border-color: rgba(56, 189, 248, 0.85);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35), 0 0 14px rgba(56, 189, 248, 0.22);
}

.ai-product-matching-hero__thumb {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #FFFFFF0F;
  background: rgba(148, 163, 184, 0.1);
}

.ai-product-matching-hero__thumb {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0.28rem;
}

.ai-product-matching-hero__tick,
.ai-product-matching-hero__query {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
}

.ai-product-matching-hero__bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.ai-product-matching-hero__bars i {
  display: block;
  height: 0.28rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.32);
}

.ai-product-matching-hero__bars i:last-child {
  width: 62%;
}

.ai-product-matching-hero__tick img,
.ai-product-matching-hero__query img,
.ai-product-matching-hero__match-icon img,
.ai-product-matching-hero__thumb img {
  display: block;
  width: 90%;
  height: 90%;
}

.ai-product-matching-hero__ai {
  position: absolute;
  z-index: 3;
  left: 75%;
  top: 14.6%;
  width: 14.4%;
}

.ai-product-matching-hero__ai-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 0.28rem;
  overflow: hidden;
  border-radius: 0.95rem;
  background: rgba(12, 28, 72, 0.62);
  border: 1px dashed rgba(96, 165, 250, 0.5);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.22);
}

.case-study-detail-hero__media.ai-product-matching-hero .ai-product-matching-hero__ai-icon img,
.ai-product-matching-hero__ai-icon img {
  display: block;
  width: 92%;
  height: 92%;
  object-fit: contain;
}

.ai-product-matching-hero__ai-glow {
  position: absolute;
  inset: -28%;
  border-radius: 28%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.42) 0%, rgba(56, 189, 248, 0) 70%);
  opacity: 0.28;
  pointer-events: none;
}

.ai-product-matching-hero__ai-glow {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 12%;
  z-index: 2;
  height: 18%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(125, 211, 252, 0) 0%, rgba(125, 211, 252, 0.45) 50%, rgba(125, 211, 252, 0) 100%);
  opacity: 0;
  pointer-events: none;
}

.ai-product-matching-hero__rec {
  position: absolute;
  z-index: 4;
  left: 71%;
  top: 43%;
  width: 23.4%;
  padding: 0.7rem 0.75rem 0.62rem;
  border-radius: 0.7rem;
  background: #fff;
  box-shadow: 0 14px 28px rgba(3, 6, 30, 0.32);
}

.ai-product-matching-hero__rec-title {
  margin: 0;
  font-size: clamp(0.50rem, 1.2vw, 0.88rem);
  font-weight: 750;
  color: #0f172a;
}

.ai-product-matching-hero__rec-lines {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin: 0.42rem 0 0.5rem;
}

.ai-product-matching-hero__rec-lines i {
  display: block;
  height: 0.32rem;
  border-radius: 999px;
  background: #e2e8f0;
}

.ai-product-matching-hero__rec-lines i:last-child {
  width: 68%;
}

.ai-product-matching-hero__match {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  margin: 0;
  font-size: clamp(0.58rem, 1.1vw, 0.78rem);
  font-weight: 750;
  color: var(--ai-product-matching-green);
}

/* .ai-product-matching-hero__match-icon {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  border: 1px dashed rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.08);
} */

.ai-product-matching-hero__feature-icon {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  /* border-radius: 0.32rem;
  border: 1px dashed rgba(148, 163, 255, 0.32);
  background: rgba(148, 163, 184, 0.08); */
}

.ai-product-matching-hero__features {
  position: absolute;
  z-index: 3;
  left: 7%;
  right: 7%;
  bottom: 4.6%;
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  align-items: center;
}

.ai-product-matching-hero__feature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  padding: 0 0.4rem;
}

.ai-product-matching-hero__feature + .ai-product-matching-hero__feature {
  border-left: 1px solid rgba(148, 163, 255, 0.22);
}

.ai-product-matching-hero__feature-label {
  margin: 0;
  font-size: clamp(0.48rem, 1vw, 0.72rem);
  font-weight: 650;
  line-height: 1.2;
  color: #dbe7ff;
}

.ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__source--1 .ai-product-matching-hero__source-icon {
  animation: ai-product-matching-hero-source-1 var(--ai-product-matching-loop) var(--ai-product-matching-ease) infinite;
}
.ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__source--2 .ai-product-matching-hero__source-icon {
  animation: ai-product-matching-hero-source-2 var(--ai-product-matching-loop) var(--ai-product-matching-ease) infinite;
}
.ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__source--3 .ai-product-matching-hero__source-icon {
  animation: ai-product-matching-hero-source-3 var(--ai-product-matching-loop) var(--ai-product-matching-ease) infinite;
}
.ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__row--1 .ai-product-matching-hero__tick {
  animation: ai-product-matching-hero-tick-1 var(--ai-product-matching-loop) var(--ai-product-matching-ease) infinite;
}
.ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__row--2 .ai-product-matching-hero__tick {
  animation: ai-product-matching-hero-tick-2 var(--ai-product-matching-loop) var(--ai-product-matching-ease) infinite;
}
.ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__row--4 .ai-product-matching-hero__tick {
  animation: ai-product-matching-hero-tick-3 var(--ai-product-matching-loop) var(--ai-product-matching-ease) infinite;
}
.ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__row--5 .ai-product-matching-hero__tick {
  animation: ai-product-matching-hero-tick-4 var(--ai-product-matching-loop) var(--ai-product-matching-ease) infinite;
}
.ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__query {
  animation: ai-product-matching-hero-query 2.4s var(--ai-product-matching-ease) infinite;
}
.ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__line--src {
  animation: ai-product-matching-hero-dash 1.4s linear infinite;
}
.ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__line--ai {
  animation: ai-product-matching-hero-ai-line var(--ai-product-matching-loop) var(--ai-product-matching-ease) infinite;
}
.ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__ai-glow {
  animation: ai-product-matching-hero-ai-glow var(--ai-product-matching-loop) var(--ai-product-matching-ease) infinite;
}
.ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__ai-icon {
  animation: ai-product-matching-hero-ai-pulse var(--ai-product-matching-loop) var(--ai-product-matching-ease) infinite;
}
.ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__ai-scan {
  animation: ai-product-matching-hero-scan var(--ai-product-matching-loop) var(--ai-product-matching-ease) infinite;
}
.ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__rec {
  animation: ai-product-matching-hero-rec var(--ai-product-matching-loop) var(--ai-product-matching-ease) infinite;
}
.ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__match-icon {
  animation: ai-product-matching-hero-match var(--ai-product-matching-loop) var(--ai-product-matching-ease) infinite;
}
.ai-product-matching-hero.is-armed.is-playing .ai-product-matching-hero__feature {
  animation: ai-product-matching-hero-feature 7s var(--ai-product-matching-ease) infinite;
}

@keyframes ai-product-matching-hero-source-1 {
  0%, 14%, 100% { transform: scale(1); box-shadow: 0 8px 16px rgba(3, 6, 30, 0.35); }
  5% { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.28), 0 0 18px rgba(125, 211, 252, 0.55); }
}

@keyframes ai-product-matching-hero-source-2 {
  0%, 8%, 22%, 100% { transform: scale(1); box-shadow: 0 8px 16px rgba(3, 6, 30, 0.35); }
  14% { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.28), 0 0 18px rgba(125, 211, 252, 0.55); }
}

@keyframes ai-product-matching-hero-source-3 {
  0%, 16%, 30%, 100% { transform: scale(1); box-shadow: 0 8px 16px rgba(3, 6, 30, 0.35); }
  22% { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.28), 0 0 18px rgba(125, 211, 252, 0.55); }
}

@keyframes ai-product-matching-hero-tick-1 {
  0%, 18%, 32%, 100% { transform: scale(1); filter: none; }
  20% { transform: scale(0.78); filter: none; }
  25% { transform: scale(1.12); filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.72)); }
}

@keyframes ai-product-matching-hero-tick-2 {
  0%, 26%, 40%, 100% { transform: scale(1); filter: none; }
  28% { transform: scale(0.78); filter: none; }
  33% { transform: scale(1.12); filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.72)); }
}

@keyframes ai-product-matching-hero-tick-3 {
  0%, 34%, 48%, 100% { transform: scale(1); filter: none; }
  36% { transform: scale(0.78); filter: none; }
  41% { transform: scale(1.12); filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.72)); }
}

@keyframes ai-product-matching-hero-tick-4 {
  0%, 42%, 56%, 100% { transform: scale(1); filter: none; }
  44% { transform: scale(0.78); filter: none; }
  49% { transform: scale(1.12); filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.72)); }
}

@keyframes ai-product-matching-hero-query {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(234, 179, 8, 0.28)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 10px rgba(234, 179, 8, 0.7)); }
}

@keyframes ai-product-matching-hero-dash {
  to { stroke-dashoffset: -48; }
}

@keyframes ai-product-matching-hero-ai-line {
  0%, 50% { opacity: 0.45; filter: drop-shadow(0 0 2px rgba(125, 211, 252, 0.25)); stroke-dashoffset: 0; }
  56%, 68% { opacity: 1; filter: drop-shadow(0 0 6px rgba(125, 211, 252, 0.75)); stroke-dashoffset: -36; }
  78%, 100% { opacity: 0.45; filter: drop-shadow(0 0 2px rgba(125, 211, 252, 0.25)); stroke-dashoffset: -48; }
}

@keyframes ai-product-matching-hero-ai-glow {
  0%, 50%, 78%, 100% { opacity: 0.22; transform: scale(1); }
  58% { opacity: 0.8; transform: scale(1.08); }
  66% { opacity: 0.5; transform: scale(1.03); }
}

@keyframes ai-product-matching-hero-ai-pulse {
  0%, 50%, 78%, 100% { box-shadow: 0 0 18px rgba(56, 189, 248, 0.22); }
  58% { box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.28), 0 0 22px rgba(56, 189, 248, 0.55); }
}

@keyframes ai-product-matching-hero-scan {
  0%, 52% { transform: translateY(-30%); opacity: 0; }
  58% { opacity: 0.55; }
  68% { transform: translateY(280%); opacity: 0; }
  100% { transform: translateY(-30%); opacity: 0; }
}

@keyframes ai-product-matching-hero-ai-particle {
  0%, 50%, 76%, 100% { opacity: 0; }
  54%, 70% { opacity: 0.95; }
}

@keyframes ai-product-matching-hero-rec {
  0%, 64% { opacity: 0.55; transform: translateY(8px); }
  74%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0.55; transform: translateY(8px); }
}

@keyframes ai-product-matching-hero-match {
  0%, 70%, 88%, 100% { transform: scale(1); filter: none; }
  74% { transform: scale(0.72); filter: none; }
  79% { transform: scale(1.14); filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.7)); }
}

@keyframes ai-product-matching-hero-feature {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}

@media (max-width: 700px) {
  .ai-product-matching-hero__source-icon {
    width: 78%;
    max-width: 2.4rem;
    padding: 0.22rem;
    border-radius: 0.62rem;
  }

  .ai-product-matching-hero__dashboard {
    padding: 0.38rem 0.4rem 0.42rem;
    border-radius: 0.75rem;
  }

  .ai-product-matching-hero__tick,
  .ai-product-matching-hero__query {
    width: 0.85rem;
    height: 0.85rem;
  }

  .ai-product-matching-hero__ai-icon {
    padding: 0.18rem;
    border-radius: 0.7rem;
  }

  .ai-product-matching-hero__rec {
    padding: 0.45rem 0.48rem 0.4rem;
  }

  .ai-product-matching-hero__feature-icon {
    width: 1rem;
    height: 1rem;
  }

  .ai-product-matching-hero__feature {
    gap: 0.22rem;
    padding: 0 0.22rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-product-matching-hero.is-armed .ai-product-matching-hero__source-icon,
  .ai-product-matching-hero.is-armed .ai-product-matching-hero__tick,
  .ai-product-matching-hero.is-armed .ai-product-matching-hero__query,
  .ai-product-matching-hero.is-armed .ai-product-matching-hero__ai-glow,
  .ai-product-matching-hero.is-armed .ai-product-matching-hero__ai-scan,
  .ai-product-matching-hero.is-armed .ai-product-matching-hero__ai-icon,
  .ai-product-matching-hero.is-armed .ai-product-matching-hero__line,
  .ai-product-matching-hero.is-armed .ai-product-matching-hero__rec,
  .ai-product-matching-hero.is-armed .ai-product-matching-hero__match-icon,
  .ai-product-matching-hero.is-armed .ai-product-matching-hero__feature {
    animation: none;
    transform: none;
    opacity: 1;
    filter: none;
  }

  .ai-product-matching-hero__particle,
  .ai-product-matching-hero.is-armed .ai-product-matching-hero__particle,
  .ai-product-matching-hero.is-armed .ai-product-matching-hero__ai-scan {
    opacity: 0;
  }

  .ai-product-matching-hero.is-armed .ai-product-matching-hero__ai-glow {
    opacity: 0.28;
  }
}
/* ===== AI PRODUCT MATCHING HERO BANNER END ===== */


@media (max-width: 639px) {
  .case-study-detail-hero__media img {
    max-height: 320px;
    min-height: 0;
  }

  .case-study-detail-hero__media.outreach-hero img,
  .case-study-detail-hero__media.tasks-hero img,
  .case-study-detail-hero__media.coach-hero img,
  .case-study-detail-hero__media.appoint-hero img,
  .case-study-detail-hero__media.ai-product-matching-hero img {
    max-height: none;
  }

  .case-study-visual {
    min-height: 240px;
  }

  .case-study-visual--metrics {
    min-height: 0;
  }
}

/* ===== CASE STUDIES END ===== */

/* ===== ENTERPRISE AI ERP START ===== */
.enterprise-ai-erp-trust__title {
  margin-bottom: 1.5rem;
  text-align: center;
}

.enterprise-ai-erp-hero {
  background-color: #07091f;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  overflow: hidden;
  padding: 2.5rem 0 3.5rem;
  position: relative;
}

.enterprise-ai-erp-hero__inner {
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.enterprise-ai-erp-hero__top {
  align-items: center;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: minmax(0, 1fr);
}

.enterprise-ai-erp-hero__copy {
  display: flex;
  flex-direction: column;
  max-width: 40rem;
  min-width: 0;
}

.enterprise-ai-erp-hero__eyebrow {
  align-items: center;
  background:
    linear-gradient(
      90deg,
      rgba(42, 77, 251, 0.04) 0%,
      rgba(122, 95, 248, 0.04) 100%
    ) padding-box,
    linear-gradient(
      90deg,
      rgba(42, 77, 251, 0.08) 0%,
      rgba(122, 95, 248, 0.08) 100%
    ) border-box;
  border: 1px solid transparent;
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  margin: 0 0 0.5rem;
  max-width: 100%;
  padding: 0.35rem 0.75rem;
  text-transform: uppercase;
  white-space: normal;
  width: fit-content;
}

.enterprise-ai-erp-hero__eyebrow-text {
  background: linear-gradient(90deg, #2a4dfb 0%, #7a5ff8 100%);
  font-family: Pragati Narrow;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-radius: 3px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.enterprise-ai-erp-hero__title {
  display: flex;
  flex-direction: column;
  font-size: clamp(1.75rem, 8vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0.5rem 0;
}

.enterprise-ai-erp-hero__title-lead,
.enterprise-ai-erp-hero__title-line {
  color: #fff;
  display: block;
  font-weight: 700;
}

.enterprise-ai-erp-hero__title-accent {
  background: linear-gradient(180deg, #2F69FB 49.52%, #D078FE 100%);

  background-clip: text;
  display: block;
  font-weight: 700;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.enterprise-ai-erp-hero__desc {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 28px;
  margin: 0.5rem 0 0;
  max-width: 34rem;
}

.enterprise-ai-erp-hero__cta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
}

.enterprise-ai-erp-hero__cta-secondary {
  align-items: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  box-shadow: 3px 7px 22px -6px #2a4dfb24;
  color: #fff;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 0.5rem;
  line-height: 1.25;
  min-height: 44px;
  padding: 0.5rem 1.15rem;
  text-decoration: none;
}

.enterprise-ai-erp-hero__cta-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.enterprise-ai-erp-hero__cta-arrow {
  display: block;
  flex-shrink: 0;
  height: 7px;
  width: auto;
}

.enterprise-ai-erp-hero__visual {
  aspect-ratio: 800 / 560;
  container-type: inline-size;
  min-width: 0;
  position: relative;
  width: 100%;
}

.enterprise-ai-erp-hero__features {
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 2;
}

.enterprise-ai-erp-hero__feature {
  align-items: center;
  background: #0F1C5C;
  border: 1px solid #FFFFFF14;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(4, 8, 32, 0.35);
  box-sizing: border-box;
  display: flex;
  gap: 0.7rem;
  height: auto;
  margin: 0;
  min-height: clamp(48px, 15cqi, 84px);
  padding: clamp(0.35rem, 1.6cqi, 0.7rem) clamp(0.45rem, 2cqi, 0.9rem);
  position: absolute;
  width: min(224px, 36%);
}

.enterprise-ai-erp-hero__feature--bilingual {
  left: 20%;
  width:204px;
  top: 12%;
}

.enterprise-ai-erp-hero__feature--compliance {
  right: 6%;
  top: 12%;
  width:224px;
}

.enterprise-ai-erp-hero__feature--platforms {
  left: 2%;
  top: 40%;
  width:204px;

}

.enterprise-ai-erp-hero__feature--automation {
  left: 2%;
  top: 70%;
  width:204px;
}

.enterprise-ai-erp-hero__icon {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  height: clamp(28px, 6.5cqi, 42px);
  justify-content: center;
  width: clamp(28px, 6.5cqi, 42px);
}

.enterprise-ai-erp-hero__icon img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.enterprise-ai-erp-hero__icon-placeholder {
  background:
    linear-gradient(180deg, rgba(142, 162, 255, 0.18) 0%, rgba(122, 95, 248, 0.28) 100%);
  border: 1px dashed rgba(186, 196, 255, 0.7);
  border-radius: 10px;
  display: block;
  height: 100%;
  width: 100%;
}

.enterprise-ai-erp-hero__feature-label {
  color: #fff;
  font-size: clamp(0.75rem, 2.45cqi, 1.05rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 22px;
  min-width: 0;
  text-wrap: balance;
}

.enterprise-ai-erp-hero__media {
  aspect-ratio: 1133 / 680;
  bottom: 0;
  left: 50%;
  min-height: 0;
  position: absolute;
  transform: translateX(-50%);
  width: 78%;
}

.enterprise-ai-erp-hero__media img,
.enterprise-ai-erp-hero__image-placeholder {
  display: block;
  height: 100%;
  width: 100%;
}

.enterprise-ai-erp-hero__media img {
  object-fit: contain;
  object-position: center bottom;
}

.enterprise-ai-erp-hero__image-placeholder {
  background:
    linear-gradient(180deg, rgba(42, 77, 251, 0.12) 0%, rgba(122, 95, 248, 0.22) 100%);
  border: 1px dashed rgba(186, 196, 255, 0.55);
}

@media (min-width: 640px) {
  .enterprise-ai-erp-hero__title {
    font-size: 2.75rem;
    line-height: 1;
  }

  .enterprise-ai-erp-hero__eyebrow {
    font-size: 0.875rem;
  }
}

@media (min-width: 1024px) {
  .enterprise-ai-erp-hero__top {
    align-items: center;
    gap: 1.5rem 2rem;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }

  .enterprise-ai-erp-hero__title {
    font-size: 52px;
    line-height: 1;
  }
}

.enterprise-ai-erp-hero__copy,
.enterprise-ai-erp-hero__title,
.enterprise-ai-erp-hero__title-lead,
.enterprise-ai-erp-hero__title-line {
  max-width: 100%;
  overflow-wrap: break-word;
}

@media (max-width: 1023px) {
  .enterprise-ai-erp-hero__top {
    align-items: start;
  }

  .enterprise-ai-erp-hero__visual {
    margin-inline: 0;
    max-width: none;
    width: 100%;
  }

  .enterprise-ai-erp-hero__cta {
    align-items: stretch;
    justify-content: flex-start;
  }

  .enterprise-ai-erp-hero__cta-secondary {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .enterprise-ai-erp-hero {
    padding: 1.5rem 0 2.25rem;
  }

  .enterprise-ai-erp-hero__inner {
    margin-bottom: 1.25rem;
  }

  .enterprise-ai-erp-hero__visual {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .enterprise-ai-erp-hero__features {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: 1fr 1fr;
    inset: auto;
    position: static;
  }

  .enterprise-ai-erp-hero__feature,
  .enterprise-ai-erp-hero__feature--bilingual,
  .enterprise-ai-erp-hero__feature--compliance,
  .enterprise-ai-erp-hero__feature--platforms,
  .enterprise-ai-erp-hero__feature--automation {
    inset: auto;
    min-height: 0;
    min-width: 0;
    position: static;
    width: auto;
  }

  .enterprise-ai-erp-hero__media {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .enterprise-ai-erp-hero__visual {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .enterprise-ai-erp-hero__features {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr 1fr;
    inset: auto;
    position: static;
  }

  .enterprise-ai-erp-hero__feature,
  .enterprise-ai-erp-hero__feature--bilingual,
  .enterprise-ai-erp-hero__feature--compliance,
  .enterprise-ai-erp-hero__feature--platforms,
  .enterprise-ai-erp-hero__feature--automation {
    inset: auto;
    min-height: 0;
    min-width: 0;
    position: static;
    width: auto;
  }

  .enterprise-ai-erp-hero__media {
    left: 0;
    position: relative;
    transform: none;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .enterprise-ai-erp-hero__cta,
  .enterprise-ai-erp-definition__cta,
  .enterprise-ai-erp-allocation__cta {
    align-items: stretch;
    flex-direction: column;
  }

  .enterprise-ai-erp-hero__cta .u-btn-cta,
  .enterprise-ai-erp-hero__cta-secondary,
  .enterprise-ai-erp-definition__cta .u-btn-cta,
  .enterprise-ai-erp-allocation__cta .u-btn-cta {
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    white-space: normal;
    width: 100%;
  }
}

.enterprise-ai-erp-definition {
  background-color: #f3f6ff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 4.5rem 0 4rem;
}

.enterprise-ai-erp-definition__inner {
  align-items: start;
  display: grid;
  gap: 2.5rem 4rem;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.enterprise-ai-erp-definition__eyebrow {
  color: #2a4dfb;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 1rem;
}

.enterprise-ai-erp-definition__title {
  color: #0b1020;
  font-size: clamp(1.75rem, 3vw, 2.65rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 48px;
  margin: 0;
  max-width: 16ch;
}

.enterprise-ai-erp-definition__desc {
  color: #4D4D4D;
  font-size: 16px;
  line-height: 28px;
  margin-top: 40px;
}

.enterprise-ai-erp-definition__desc strong {
  color: #0b1020;
  font-weight: 700;
}

.enterprise-ai-erp-definition__cta {
  display: flex;
  margin-top: 2rem;
}

@media (max-width: 1023px) {
  .enterprise-ai-erp-definition__inner {
    gap: 1.25rem;
    grid-template-columns: 1fr;
  }

  .enterprise-ai-erp-definition__title {
    max-width: none;
  }

  .enterprise-ai-erp-definition__desc {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .enterprise-ai-erp-definition {
    padding: 2.5rem 0;
  }
}

.enterprise-ai-erp-allocation {
  background: #f7f8fc;
  padding: 4.5rem 0 4.75rem;
}

.enterprise-ai-erp-allocation__inner {
  align-items: center;
  display: grid;
  gap: 2.75rem 3.5rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.enterprise-ai-erp-allocation__eyebrow {
  align-items: center;
  color: #2a4dfb;
  display: flex;
  font-size: 13px;
  font-weight: 700;
  gap: 0.55rem;
  letter-spacing: 0.08em;
  line-height: 1.3;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.enterprise-ai-erp-allocation__eyebrow-mark {
  background: #2a4dfb;
  border-radius: 1px;
  display: block;
  flex-shrink: 0;
  height: 0.95em;
  width: 3px;
}

.enterprise-ai-erp-allocation__title {
  color: #171717;
  font-size: clamp(1.35rem, 2.4vw, 24px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 34px;
  margin: 0 0 1.35rem;
  max-width: 603px;
}

.enterprise-ai-erp-allocation__desc {
  color: #4b5568;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  margin: 0 0 1.05rem;
  max-width: 38rem;
}

.enterprise-ai-erp-allocation__desc strong {
  color: #0b1020;
  font-weight: 700;
}

.enterprise-ai-erp-allocation__cta {
  display: flex;
  margin-top: 1.75rem;
}

.enterprise-ai-erp-allocation__collage {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  min-height: 420px;
  position: relative;
}

.enterprise-ai-erp-allocation__tile {
  background: #eef2ff;
  border-radius: 18px;
  min-height: 180px;
  overflow: hidden;
}

.enterprise-ai-erp-allocation__tile img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.enterprise-ai-erp-allocation__tile--top-left {
  grid-column: 1;
  grid-row: 1;
}

.enterprise-ai-erp-allocation__tile--top-right {
  grid-column: 2;
  grid-row: 1;
}

.enterprise-ai-erp-allocation__tile--bottom-left {
  grid-column: 1;
  grid-row: 2;
}

.enterprise-ai-erp-allocation__tile--bottom-right {
  grid-column: 2;
  grid-row: 2;
}

.enterprise-ai-erp-allocation__tile--center {
  aspect-ratio: 1;
  border: 8px solid #f7f8fc;
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  height: auto;
  left: 50%;
  min-height: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 42%;
  z-index: 1;
}

@media (max-width: 1023px) {
  .enterprise-ai-erp-allocation__inner {
    gap: 2rem;
    grid-template-columns: 1fr;
  }

  .enterprise-ai-erp-allocation__collage {
    min-height: 360px;
  }
}

@media (max-width: 767px) {
  .enterprise-ai-erp-allocation {
    padding: 2.5rem 0;
  }

  .enterprise-ai-erp-allocation__collage {
    min-height: 280px;
  }

  .enterprise-ai-erp-allocation__tile--center {
    border-width: 4px;
    width: 36%;
  }
}

.enterprise-ai-erp-tco .crm-builder-tco__table thead th.crm-builder-tco__col--saas {
  background: #f4f6ff;
  border: 1px solid #eff0f6;
}

.enterprise-ai-erp-tco .crm-builder-tco__col--saas .crm-builder-tco__heading-text,
.enterprise-ai-erp-tco .crm-builder-tco__value--saas {
  color: #2a4dfb;
}

.enterprise-ai-erp-tco .crm-builder-tco__value--saas {
  background: #E6E9FB;
  border: 1px solid #eff0f6;
}

@media (max-width: 767px) {
  .enterprise-ai-erp-tco .crm-builder-tco__table tbody tr:nth-child(odd) td.crm-builder-tco__col--saas,
  .enterprise-ai-erp-tco .crm-builder-tco__table tbody tr:nth-child(even) td.crm-builder-tco__col--saas,
  .enterprise-ai-erp-tco .crm-builder-tco__table tbody td.crm-builder-tco__col--saas {
    background: #f4f6ff;
  }

  .crm-builder-tco__value.crm-builder-tco__value--saas,
  .enterprise-ai-erp-tco .crm-builder-tco__value--saas {
    background: transparent;
    border-color: transparent;
  }
}

.enterprise-ai-erp-tco__icon-placeholder {
  background:
    linear-gradient(180deg, rgba(42, 77, 251, 0.08) 0%, rgba(122, 95, 248, 0.14) 100%);
  border: 1px dashed #c7d2fe;
  border-radius: 8px;
  display: block;
  height: 22px;
  width: 22px;
}

.enterprise-ai-erp-modules {
  background-color: #07041c;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  padding: 4.25rem 0 4.5rem;
}

.enterprise-ai-erp-modules__intro {
  align-items: start;
  display: grid;
  gap: 0.85rem 2.5rem;
  margin-bottom: 2rem;
}

.enterprise-ai-erp-modules__eyebrow {
  align-items: center;
  background: linear-gradient(90deg, #2A4DFB 0%, #7A5FF8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  display: flex;
  font-size: 13px;
  font-weight: 700;
  gap: 0.55rem;
  letter-spacing: 0.08em;
  line-height: 1.3;
  margin: 0;
  text-transform: uppercase;
}

.enterprise-ai-erp-modules__eyebrow-mark {
  background: linear-gradient(90deg, #2A4DFB 0%, #7A5FF8 100%);
  border-radius: 1px;
  display: block;
  flex-shrink: 0;
  height: 0.95em;
  width: 2px;
}

.enterprise-ai-erp-modules__title {
  color: #fff;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin: 0;
}

.enterprise-ai-erp-modules__desc {
  color: rgba(226, 232, 255, 0.72);
  font-size: 14px;
  line-height: 1.6;
  margin: 0.7rem 0 0;
  max-width: 55rem;
}

.enterprise-ai-erp-modules__swiper {
  overflow: hidden;
  width: 100%;
}

.enterprise-ai-erp-modules__swiper .swiper-wrapper {
  align-items: stretch;
}

.enterprise-ai-erp-modules__swiper .swiper-slide {
  display: flex;
  height: auto;
}

.enterprise-ai-erp-modules__card {
  position: relative;
  background: rgba(18, 16, 58, 0.72);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(180, 170, 255, 0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding: 22px 22px 24px;
  width: 100%;
}

.enterprise-ai-erp-modules__card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 11px;
  background: linear-gradient(
    98.52deg,
    #2E69FB 0.82%,
    #D178FE 98.67%
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}

.enterprise-ai-erp-modules__nav {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1.25rem;
}

.enterprise-ai-erp-modules__icon {
  align-items: center;
  
  display: inline-flex;
  height: 42px;
  justify-content: center;
  margin-bottom: 12px;
  width: 42px;
}

.enterprise-ai-erp-modules__icon img {
  display: block;
  height: 30px;
  object-fit: contain;
  width: 30px;
}

.enterprise-ai-erp-modules__icon-placeholder {
  background:
    linear-gradient(180deg, rgba(142, 162, 255, 0.18) 0%, rgba(122, 95, 248, 0.28) 100%);
  border: 1px dashed rgba(186, 196, 255, 0.7);
  border-radius: 6px;
  display: block;
  height: 22px;
  width: 22px;
}

.enterprise-ai-erp-modules__card-title {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 0 0 12px;
}

.enterprise-ai-erp-modules__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.enterprise-ai-erp-modules__tags li {
  background: #0B0B62;
  border-radius: 2px;
  color: #727AFF;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  padding: 1px 3px;
}

.enterprise-ai-erp-modules__card-copy {
  color: rgba(214, 220, 245, 0.78);
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}

@media (min-width: 1200px) {
  .enterprise-ai-erp-modules__intro {
    grid-template-columns: minmax(13rem, 0.34fr) minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .enterprise-ai-erp-modules {
    padding: 2.5rem 0;
  }
}

.enterprise-ai-erp-verticals {
  background: #fff;
  padding: 3.5rem 0 4.25rem;
}

.enterprise-ai-erp-verticals__intro {
  align-items: flex-start;
  display: flex;
  gap: 2.75rem;
  margin-bottom: 1.75rem;
}

.enterprise-ai-erp-verticals__eyebrow {
  align-items: center;
  color: #2a4dfb;
  display: flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  gap: 0.5rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  margin: 0.35rem 0 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.enterprise-ai-erp-verticals__eyebrow-mark {
  background: #2a4dfb;
  border-radius: 1px;
  display: block;
  flex-shrink: 0;
  height: 14px;
  width: 2px;
  font-weight: 700;
}

.enterprise-ai-erp-verticals__copy {
  min-width: 0;
}

.enterprise-ai-erp-verticals__title {
  color: #171717;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin: 0;
}

.enterprise-ai-erp-verticals__desc {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.55;
  margin: 0.45rem 0 0;
  max-width: 46rem;
}

.enterprise-ai-erp-verticals__stage {
  position: relative;
}

.enterprise-ai-erp-verticals .swiper.enterprise-ai-erp-verticals__swiper {
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.enterprise-ai-erp-verticals__swiper .swiper-wrapper {
  align-items: stretch;
}

.enterprise-ai-erp-verticals .swiper.enterprise-ai-erp-verticals__swiper .swiper-slide {
  box-sizing: border-box;
  display: flex;
  height: auto;
  min-width: 0;
  overflow: hidden;
  padding: 10px 18px 24px 14px;
}

.enterprise-ai-erp-verticals__card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 3px 6px 14px 0px #00003F0F;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  overflow: visible;
  padding: 10px 10px 18px;
  width: 100%;
}

.enterprise-ai-erp-verticals__media {
  aspect-ratio: 16 / 9;
  background: #eef2ff;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
}

.enterprise-ai-erp-verticals__media img,
.enterprise-ai-erp-verticals__image-placeholder {
  display: block;
  height: 100%;
  width: 100%;
}

.enterprise-ai-erp-verticals__media img {
  object-fit: cover;
}

.enterprise-ai-erp-verticals__image-placeholder {
  background:
    linear-gradient(180deg, rgba(42, 77, 251, 0.06) 0%, rgba(122, 95, 248, 0.12) 100%);
  border: 1px dashed #c7d2fe;
}

.enterprise-ai-erp-verticals__logo {
  align-items: center;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-shrink: 0;
  height: 52px;
  justify-content: center;
  margin: -26px 0 0 12px;
  position: relative;
  width: 52px;
  z-index: 1;
}

.enterprise-ai-erp-verticals__logo img {
  display: block;
  height: 32px;
  object-fit: contain;
  width: 32px;
}

.enterprise-ai-erp-verticals__logo-placeholder {
  background:
    linear-gradient(180deg, rgba(42, 77, 251, 0.08) 0%, rgba(122, 95, 248, 0.16) 100%);
  border: 1px dashed #93a8ff;
  border-radius: 8px;
  display: block;
  height: 28px;
  width: 28px;
}

.enterprise-ai-erp-verticals__card-title {
  color: #171717;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 22px;
  margin: 12px 8px 10px;
}

.enterprise-ai-erp-verticals__kicker {
  color: #00003F;
padding-top: 11px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  margin: 0 8px 4px;
  text-transform: uppercase;
}
.enterprise-ai-erp-verticals__kicker1 {
  color: #2A4DFB;
padding-top:11px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  margin: 0 8px 4px;
  text-transform: uppercase;
}

.enterprise-ai-erp-verticals__text {
  color:#4D4D4D;

  font-size: 14px;
  line-height: 22px;
  margin: 0 8px 12px;
}

.enterprise-ai-erp-verticals__text:last-child {
  margin-bottom: 4px;
}

.enterprise-ai-erp-verticals__nav {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 0.35rem;
}

.enterprise-ai-erp-verticals__control {
  align-items: center;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(28, 41, 82, 0.12);
  color: #1c2434;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.enterprise-ai-erp-verticals__control:hover {
  color: #2a4dfb;
}

.enterprise-ai-erp-verticals__control:focus-visible {
  outline: 2px solid #2a4dfb;
  outline-offset: 3px;
}

.enterprise-ai-erp-verticals__control.swiper-button-disabled {
  cursor: default;
  opacity: 0.45;
}

@media (max-width: 1023px) {
  .enterprise-ai-erp-verticals__intro {
    flex-direction: column;
    gap: 0.75rem;
  }

  .enterprise-ai-erp-verticals__eyebrow {
    margin-top: 0;
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .enterprise-ai-erp-verticals {
    padding: 2.5rem 0;
  }

  .enterprise-ai-erp-verticals__title {
    font-size: 22px;
  }
}

.enterprise-ai-erp-governance {
  background: #f5f7fb;
  padding: 4.75rem 0 5.25rem;
}

.enterprise-ai-erp-governance__inner {
  align-items: start;
  display: grid;
  gap: 2.75rem 4.5rem;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
}

.enterprise-ai-erp-governance__eyebrow {
  color: #2a4dfb;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  margin: 0 0 1.1rem;
  text-transform: uppercase;
}

.enterprise-ai-erp-governance__title {
  color: #111111;
  font-size: clamp(1.85rem, 2.35vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 48px;
  margin: 0;
  max-width: 18em;
}

.enterprise-ai-erp-governance__desc {
  color: #6b7280;
  font-size: 15px;
  line-height: 28px;
  margin: 1.25rem 0 0;
  max-width: 26rem;
}

.enterprise-ai-erp-governance__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 30px;
}

.enterprise-ai-erp-governance__card {
  background: #fff;
  border-left: 3px solid #0026E3;
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
  margin: 0;
  padding: 9px 9px 9px 9px;
}

.enterprise-ai-erp-governance__card-title {
  color:#171717;

  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0%;
  line-height: 1.4;
  margin: 0 0 6px;
}

.enterprise-ai-erp-governance__card-copy {
  color: #4D4D4D;

  font-size: 14px;
  line-height: 22px;
  margin: 0;
}

@media (max-width: 900px) {
  .enterprise-ai-erp-governance__inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .enterprise-ai-erp-governance__title {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .enterprise-ai-erp-governance {
    padding: 2.5rem 0;
  }

  .enterprise-ai-erp-governance__title {
    font-size: 1.65rem;
    line-height: 1.2;
  }
}

.enterprise-ai-erp-stack {
  background-color: #070b1c;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 4.5rem 0 5rem;
}

.enterprise-ai-erp-stack__eyebrow {
  color:#2A4DFB;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  margin: 0 0 0.7rem;
  text-transform: uppercase;
}

.enterprise-ai-erp-stack__title {
  color: #fff;
  font-size: clamp(1.7rem, 2.4vw, 24px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 0 1.75rem;
}

.enterprise-ai-erp-stack__row {
  align-items: stretch;
  background: #0B1036;
  border-radius: 11px;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(220px, 26%) minmax(0, 1fr);
  margin-top: 18px;
  padding: 16px 16px 16px 22px;
}

.enterprise-ai-erp-stack__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem 1.25rem 0.5rem 0;
  position: relative;
}

.enterprise-ai-erp-stack__intro::after {
  background: linear-gradient(90deg, #2A4DFB 0%, #7A5FF8 100%);
  content: "";
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 2px;
}

.enterprise-ai-erp-stack__category {
  color: #4d7cff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  margin: 0 0 0.7rem;
  text-transform: uppercase;
}

.enterprise-ai-erp-stack__subtitle {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 0 0 0.55rem;
}

.enterprise-ai-erp-stack__desc {
  color: #9aa3c2;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  /* max-width: 16rem; */
}

.enterprise-ai-erp-stack__cards {
  align-items: stretch;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.enterprise-ai-erp-stack__pair {
  display: contents;
}

.enterprise-ai-erp-stack__card {
  align-items: center;
  background: #0F1550;

  border: 1px solid rgba(90, 110, 200, 0.18);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  margin: 0;
  min-height: 168px;
  padding: 1.35rem 0.85rem 1.15rem;
  text-align: center;
  width: 100%;
}

.enterprise-ai-erp-stack__icon {
  align-items: center;
  display: flex;
  height: 35px;
  justify-content: center;
  margin-bottom: 1rem;
  width: 60px;
}

.enterprise-ai-erp-stack__icon img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.enterprise-ai-erp-stack__icon-placeholder {
  background:
    linear-gradient(180deg, rgba(142, 162, 255, 0.18) 0%, rgba(122, 95, 248, 0.28) 100%);
  border: 1px dashed rgba(186, 196, 255, 0.7);
  border-radius: 8px;
  display: block;
  height: 36px;
  width: 36px;
}

.enterprise-ai-erp-stack__name {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 0.3rem;
}

.enterprise-ai-erp-stack__copy {
  color: #B1B9DF;
  font-size: 12px;
  font-weight:500;
  line-height: 1.4;
  margin: 0;
  max-width: 7rem;
}

@media (max-width: 1199px) {
  .enterprise-ai-erp-stack__row {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .enterprise-ai-erp-stack__intro {
    padding-right: 0;
  }

  .enterprise-ai-erp-stack__intro::after {
    display: none;
  }

  .enterprise-ai-erp-stack__cards {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .enterprise-ai-erp-stack__cards::-webkit-scrollbar {
    display: none;
  }

  .enterprise-ai-erp-stack__pair {
    display: contents;
  }

  .enterprise-ai-erp-stack__card {
    flex: 0 0 calc((100% - 24px) / 3);
    min-height: 168px;
    scroll-snap-align: start;
    width: auto;
  }

  .enterprise-ai-erp-stack__copy {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .enterprise-ai-erp-stack {
    padding: 2.5rem 0;
  }

  .enterprise-ai-erp-stack__title {
    font-size: 1.45rem;
  }

  .enterprise-ai-erp-stack__pair {
    display: grid;
    flex: 0 0 100%;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .enterprise-ai-erp-stack__card {
    flex: none;
    min-height: 148px;
    min-width: 0;
    width: auto;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .enterprise-ai-erp-stack__card {
    min-height: 120px;
    padding: 0.75rem 0.7rem 0.65rem;
  }

  .enterprise-ai-erp-stack__icon {
    height: 28px;
    margin-bottom: 0.45rem;
  }

  .enterprise-ai-erp-stack__name {
    margin-bottom: 0.15rem;
  }

  .site-main--enterprise-ai-erp .faq-section.faq-section--crm-builder .faq-section__intro {
    align-items: center;
    min-height: 0;
    text-align: center;
  }

  .site-main--enterprise-ai-erp .faq-section.faq-section--crm-builder .faq-section__eyebrow {
    justify-content: center;
    left: auto;
    position: static;
    top: auto;
    white-space: normal;
  }

  .site-main--enterprise-ai-erp .faq-section.faq-section--crm-builder h2,
  .site-main--enterprise-ai-erp .faq-section.faq-section--crm-builder .faq-section__description {
    max-width: 34rem;
  }

  .site-main--enterprise-ai-erp .faq-section.faq-section--crm-builder .faq-list {
    margin-inline: auto;
  }
}

.enterprise-ai-erp-delivery {
  background: #f7f8fc;
  padding: 4.25rem 0 4.75rem;
}

.enterprise-ai-erp-delivery__intro {
  align-items: flex-start;
  display: flex;
  gap: 2.75rem;
  margin-bottom: 1.75rem;
}

.enterprise-ai-erp-delivery__eyebrow {
  align-items: center;
  color: #2a4dfb;
  display: flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  gap: 0.5rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  margin: 0.35rem 0 0;
  text-transform: uppercase;
}

.enterprise-ai-erp-delivery__eyebrow-mark {
  background: #2a4dfb;
  border-radius: 1px;
  display: block;
  flex-shrink: 0;
  height: 14px;
  width: 2px;
}

.enterprise-ai-erp-delivery__copy {
  min-width: 0;
}

.enterprise-ai-erp-delivery__title {
  color: #171717;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -1%;
  line-height: 1.25;
  margin: 0;
}

.enterprise-ai-erp-delivery__desc {
  color: #4D4D4D;
  font-size: 14px;
  line-height: 24px;
  margin: 0.45rem 0 0;
}

.enterprise-ai-erp-delivery__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.enterprise-ai-erp-delivery__card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px 10px 22px;
  width: 100%;
}

.enterprise-ai-erp-delivery__media {
  aspect-ratio: 16 / 10;
  background: #e8edf5;
  border-radius: 12px;
  height: auto;
  max-height: 220px;
  overflow: hidden;
}

.enterprise-ai-erp-delivery__media img,
.enterprise-ai-erp-delivery__image-placeholder {
  display: block;
  height: 100%;
  width: 100%;
}

.enterprise-ai-erp-delivery__media img {
  filter: grayscale(1);
  object-fit: cover;
}

.enterprise-ai-erp-delivery__image-placeholder {
  background:
    linear-gradient(180deg, rgba(42, 77, 251, 0.06) 0%, rgba(122, 95, 248, 0.12) 100%);
  border: 1px dashed #c7d2fe;
}

.enterprise-ai-erp-delivery__logo {
  align-items: center;
  background: #E8EBFF;
  border-radius: 5px;
  box-shadow: 0 6px 14px rgba(42, 77, 251, 0.28);
  display: flex;
  height: 36px;
  justify-content: center;
  margin: -18px 0 0 16px;
  position: relative;
  width: 36px;
  z-index: 1;
}

.enterprise-ai-erp-delivery__logo img {
  display: block;
  height: 18px;
  object-fit: contain;
  width: 18px;
}

.enterprise-ai-erp-delivery__logo-placeholder {
  background: rgba(255, 255, 255, 0.18);
  border: 1px dashed rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  display: block;
  height: 18px;
  width: 18px;
}

.enterprise-ai-erp-delivery__card-title {
  color: #2a4dfb;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 14px 10px 8px;
}

.enterprise-ai-erp-delivery__text {
  color: #4d4d4d;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 10px;
}

@media (max-width: 1023px) {
  .enterprise-ai-erp-delivery__intro {
    flex-direction: column;
    gap: 0.75rem;
  }

  .enterprise-ai-erp-delivery__eyebrow {
    margin-top: 0;
    max-width: none;
  }

  .enterprise-ai-erp-delivery__grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .enterprise-ai-erp-delivery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .enterprise-ai-erp-delivery__card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .enterprise-ai-erp-delivery {
    padding: 2.5rem 0;
  }

  .enterprise-ai-erp-delivery__title {
    font-size: 22px;
  }
}

.enterprise-ai-erp-lifecycle {
  background: #f4f7fb;
  padding: 4.25rem 0 4.75rem;
}

.enterprise-ai-erp-lifecycle__eyebrow {
  color: #2a4dfb;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  margin: 0;
  text-transform: uppercase;
}

.enterprise-ai-erp-lifecycle__title {
  color: #171717;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0.55rem 0 1.75rem;
}

.enterprise-ai-erp-lifecycle__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.enterprise-ai-erp-lifecycle__item {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: 52px minmax(0, 1fr);
}

.enterprise-ai-erp-lifecycle__rail {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}

.enterprise-ai-erp-lifecycle__item:not(:last-child) .enterprise-ai-erp-lifecycle__rail::after {
  border-left: 2px dashed #c5d0ea;
  content: "";
  height: calc(100% - 48px + 16px);
  left: 50%;
  position: absolute;
  top: calc(50% + 24px);
  transform: translateX(-50%);
}

.enterprise-ai-erp-lifecycle__step {
  font-family: Pragati Narrow;
  align-items: center;
  background: #2a4dfb;
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  height: 48px;
  justify-content: center;
  letter-spacing: 0.02em;
  line-height: 1;
  position: relative;
  width: 48px;
  z-index: 1;
}

.enterprise-ai-erp-lifecycle__card {
  background: #fff;
  border-radius: 9px;
  box-shadow: 3px 6px 14px 0px #00003F0F;

  height: auto;
  min-height: 110px;
  min-width: 0;
  padding: 10px;
}

.enterprise-ai-erp-lifecycle__panel {
  align-items: center;
  background: #F4FAFF;
  border-radius: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: auto;
  min-height: 90px;
  min-width: 0;
  overflow: hidden;
}

.enterprise-ai-erp-lifecycle__main {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  min-width: 0;
  padding: 18px 22px;
}

.enterprise-ai-erp-lifecycle__icon {
  align-items: center;
  display: flex;
  flex: 0 0 28px;
  height: 28px;
  justify-content: center;
  margin-top: 1px;
  width: 28px;
}

.enterprise-ai-erp-lifecycle__icon img {
  display: block;
  height: 28px;
  object-fit: contain;
  width: 28px;
}

.enterprise-ai-erp-lifecycle__icon-placeholder {
  background: linear-gradient(180deg, rgba(42, 77, 251, 0.06) 0%, rgba(122, 95, 248, 0.12) 100%);
  border: 1px dashed #c7d2fe;
  border-radius: 6px;
  display: block;
  height: 28px;
  width: 28px;
}

.enterprise-ai-erp-lifecycle__copy {
  min-width: 0;
}

.enterprise-ai-erp-lifecycle__card-title {
  color: #171717;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 0;
}

.enterprise-ai-erp-lifecycle__text {
  color: #4D4D4D;
  font-size: 14px;
  line-height: 22px;
  margin: 0.3rem 0 0;
  font-weight: 500;
  max-width: 25rem;
}

.enterprise-ai-erp-lifecycle__deliverable {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 18px 22px 18px 26px;
  position: relative;
}

.enterprise-ai-erp-lifecycle__deliverable::before {
  background: #DBECFA;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: 1px;
}

.enterprise-ai-erp-lifecycle__deliverable-label {
  color: #2a4dfb;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  margin: 0;
  text-transform: uppercase;
}

.enterprise-ai-erp-lifecycle__deliverable-text {
  color: #5c6570;
  font-size: 14px;
  line-height: 1.55;
  margin: 0.35rem 0 0;
}

@media (max-width: 1023px) {
  .enterprise-ai-erp-lifecycle__panel {
    grid-template-columns: 1fr;
  }

  .enterprise-ai-erp-lifecycle__deliverable {
    padding-top: 4px;
  }

  .enterprise-ai-erp-lifecycle__deliverable::before {
    bottom: auto;
    height: 1px;
    left: 22px;
    right: 22px;
    top: 0;
    width: auto;
  }
}

@media (max-width: 767px) {
  .enterprise-ai-erp-lifecycle {
    padding: 2.5rem 0;
  }

  .enterprise-ai-erp-lifecycle__title {
    font-size: 22px;
  }

  .enterprise-ai-erp-lifecycle__item {
    gap: 12px;
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .enterprise-ai-erp-lifecycle__rail {
    align-items: flex-start;
    padding-top: 16px;
  }

  .enterprise-ai-erp-lifecycle__step {
    font-size: 12px;
    height: 36px;
    width: 36px;
  }

  .enterprise-ai-erp-lifecycle__item:not(:last-child) .enterprise-ai-erp-lifecycle__rail::after {
    height: calc(100% - 20px);
    top: 52px;
  }

  .enterprise-ai-erp-lifecycle__main,
  .enterprise-ai-erp-lifecycle__deliverable {
    padding-left: 14px;
    padding-right: 14px;
  }

  .enterprise-ai-erp-lifecycle__deliverable::before {
    left: 14px;
    right: 14px;
  }
}

.enterprise-ai-erp-evidence {
  background: #f3f6fb;
  padding: 4.25rem 0 4.75rem;
}

.enterprise-ai-erp-evidence__eyebrow {
  color: #2a4dfb;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  margin: 0 0 0.7rem;
  text-transform: uppercase;
}

.enterprise-ai-erp-evidence__title {
  color: #171717;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin: 0 0 1.85rem;
  max-width: 34rem;
}

.enterprise-ai-erp-evidence .swiper.enterprise-ai-erp-evidence__swiper {
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.enterprise-ai-erp-evidence__swiper .swiper-wrapper {
  align-items: stretch;
}

.enterprise-ai-erp-evidence .swiper.enterprise-ai-erp-evidence__swiper .swiper-slide {
  box-sizing: border-box;
  display: flex;
  height: auto;
  min-width: 0;
  overflow: hidden;
  padding: 10px 18px 24px 14px;
}

.enterprise-ai-erp-evidence__card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 3px 6px 14px 0px #00003F0F;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding: 26px 24px 28px;
  width: 100%;
}

.enterprise-ai-erp-evidence__icon {
  align-items: center;
  background: #eef2ff;
  border-radius: 10px;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  margin-bottom: 18px;
  width: 44px;
}

.enterprise-ai-erp-evidence__icon img {
  display: block;
  height: 24px;
  object-fit: contain;
  width: 24px;
}

.enterprise-ai-erp-evidence__icon-placeholder {
  background: rgba(42, 77, 251, 0.08);
  border: 1px dashed #93a4f5;
  border-radius: 6px;
  display: block;
  height: 22px;
  width: 22px;
}

.enterprise-ai-erp-evidence__card-title {
  color: #171717;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 0 0 16px;
}

.enterprise-ai-erp-evidence__value {
  color: #2a4dfb;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
}

.enterprise-ai-erp-evidence__label {
  color: #2a4dfb;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  margin: 8px 0 0;
  text-transform: uppercase;
}

.enterprise-ai-erp-evidence__copy {
  color: #6d7585;
  font-size: 14px;
  line-height: 1.6;
  margin: 14px 0 0;
}

.enterprise-ai-erp-evidence__nav {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 0.35rem;
}

.enterprise-ai-erp-evidence__control {
  align-items: center;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(28, 41, 82, 0.12);
  color: #1c2434;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.enterprise-ai-erp-evidence__control:hover {
  color: #2a4dfb;
}

.enterprise-ai-erp-evidence__control:focus-visible {
  outline: 2px solid #2a4dfb;
  outline-offset: 3px;
}

.enterprise-ai-erp-evidence__control.swiper-button-disabled {
  cursor: default;
  opacity: 0.45;
}

@media (max-width: 767px) {
  .enterprise-ai-erp-evidence {
    padding: 2.5rem 0 1.25rem;
  }

  .enterprise-ai-erp-evidence__title {
    font-size: 22px;
    margin-bottom: 1.35rem;
  }

  .enterprise-ai-erp-evidence__value {
    font-size: 34px;
  }

  .enterprise-ai-erp-evidence__control {
    height: 34px;
    width: 34px;
  }
}

/* ===== ENTERPRISE AI ERP END ===== */

/* ===== SERVICE DETAIL START ===== */
.web-services__grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

a.web-service-card {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.web-service-card__head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.web-service-card__arrow {
  color: #2a4dfb;
  flex-shrink: 0;
  height: 22px;
  width: 28px;
}

.web-service-card__icon-img {
  display: block;
  height: 64px;
  margin-bottom: 0;
  min-width: 80px;
  object-fit: contain;
  width: 80px;
}

.why-choose-list {
  display: grid;
  gap: 14px;
  margin-inline: auto;
  max-width: 820px;
}

@media (min-width: 1024px) {
  .why-choose-list {
    display: none;
  }
}

.why-choose-item {
  background: #fff;
  border: 1px solid rgba(42, 77, 251, 0.08);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(36, 36, 84, 0.06);
  overflow: hidden;
  transition: box-shadow 180ms ease;
}

.why-choose-item__summary {
  align-items: stretch;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  gap: 6px;
  padding: 18px 20px;
  text-align: left;
  width: 100%;
}

.why-choose-item__summary:focus-visible {
  outline: 2px solid #2a4dfb;
  outline-offset: -2px;
}

.why-choose-item__top {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.why-choose-item__index {
  color: #6b7280;
  font-family: "PP Mori", "Roboto Flex", ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
}

.why-choose-item__toggle {
  color: #171717;
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  position: relative;
  width: 1em;
  height: 1em;
}

.why-choose-item__toggle::before,
.why-choose-item__toggle::after {
  background: currentColor;
  content: "";
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease, transform 180ms ease;
}

.why-choose-item__toggle::before {
  height: 2px;
  width: 14px;
}

.why-choose-item__toggle::after {
  height: 14px;
  width: 2px;
}

.why-choose-item__title {
  color: #171717;
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  padding-right: 28px;
}

.why-choose-item__tags {
  color: #6b7280;
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  padding-right: 28px;
}

.why-choose-item__panel {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height 280ms ease, opacity 220ms ease;
}

.why-choose-item__panel-inner {
  border-top: 1px solid rgba(23, 23, 23, 0.08);
  display: grid;
  gap: 16px;
  margin: 0 20px;
  padding: 18px 0 20px;
}

.why-choose-item__image {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  margin: 0;
  overflow: hidden;
}

.why-choose-item__image img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.why-choose-item__text {
  color: #4d4d4d;
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}

.why-choose-item__features {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.why-choose-item__features li {
  align-items: flex-start;
  color: #171717;
  display: flex;
  font-size: 14px;
  font-weight: 500;
  gap: 10px;
  line-height: 1.45;
}

.why-choose-item__features li::before {
  background: transparent;
  border: 1.5px solid #2a4dfb;
  border-radius: 50%;
  content: "";
  flex: 0 0 auto;
  height: 10px;
  margin-top: 4px;
  width: 10px;
}

.service-portfolio-rail {
  margin-top: 0;
  min-width: 0;
  width: 100%;
}

.development-process-section {
  background: linear-gradient(5deg, #edf0ff 0%, #ffffff 100%);
  padding: 40px 0;
  text-align: center;
}

.development-process-section__header {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 auto 20px;
  max-width: 720px;
  text-align: center;
  width: 100%;
}

.development-process-section__title {
  color: #171717;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 12px auto 0;
  max-width: 680px;
  text-align: center;
}

.development-process-section__description {
  color: #4d4d4d;
  font-family: "PP Mori", "Roboto Flex", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  margin: 12px auto 0;
  max-width: 700px;
  text-align: center;
  width: 100%;
}

.development-process-section__inner {
  aspect-ratio: auto;
  background-image: none;
  max-width: none;
  min-height: 0;
  padding: 0;
  text-align: left;
  width: 100%;
}

.development-process-section__inner::before {
  content: none;
  display: none;
}

.development-process-section__steps {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.development-process-section__step {
  background: #fff;
  border: 1px solid rgba(42, 77, 251, 0.08);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(36, 36, 84, 0.06);
  box-sizing: border-box;
  margin-top: 0;
  max-width: none;
  min-width: 0;
  padding: 24px;
  text-align: left;
  width: 100%;
}

.development-process-section__step-top {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  width: 100%;
}

.development-process-section__step-icon {
  align-items: center;
  background: #eef1ff;
  border-radius: 16px;
  display: inline-flex;
  flex-shrink: 0;
  height: 64px;
  justify-content: center;
  width: 64px;
}

.development-process-section__step-icon img {
  height: 36px;
  object-fit: contain;
  width: 36px;
}

.development-process-section__step-number {
  background: linear-gradient(180deg, #2f69fb 12%, #c56bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  flex-shrink: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.development-process-section__step-title {
  color: #171717;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 8px;
}

.development-process-section__step-text {
  color: #4d4d4d;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 639px) {
  .development-process-section {
    padding: 32px 0;
  }

  .development-process-section__header {
    margin-bottom: 16px;
  }

  .development-process-section__title {
    font-size: clamp(1.375rem, 7vw, 1.75rem);
    overflow-wrap: break-word;
  }

  .development-process-section__description {
    overflow-wrap: break-word;
  }

  .development-process-section__steps {
    gap: 14px;
  }

  .development-process-section__step {
    padding: 20px;
  }
}

@media (min-width: 640px) and (max-width: 1279px) {
  .development-process-section {
    padding: 36px 0;
  }

  .development-process-section__inner {
    aspect-ratio: auto;
    background-image: none;
    margin: 0 auto;
    max-width: none;
    min-height: 0;
    padding: 0;
    position: static;
    width: 100%;
  }

  .development-process-section__steps {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
    justify-content: initial;
    margin: 0;
    max-width: none;
    min-height: 0;
    width: 100%;
  }

  .development-process-section__step,
  .development-process-section__step:nth-child(odd),
  .development-process-section__step:nth-child(even) {
    align-self: stretch;
    max-width: none;
    padding: 28px 24px;
    width: 100%;
  }

  .development-process-section__step:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .development-process-section__step-icon {
    height: 72px;
    width: 72px;
  }

  .development-process-section__step-icon img {
    height: 40px;
    width: 40px;
  }

  .development-process-section__step-title {
    font-size: 17px;
    margin: 0 0 8px;
    overflow-wrap: break-word;
  }

  .development-process-section__step-text {
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: break-word;
  }
}

@media (max-width: 767px) {
  .web-services__grid--cols-2 {
    grid-template-columns: 1fr;
  }

  .web-service-card__icon-img {
    margin-inline: auto;
  }

  .web-service-card__head .web-service-card__icon-img {
    margin-inline: 0;
  }

  .why-choose-item__toggle {
    font-size: 16px;
  }

  .why-choose-item__toggle::before {
    width: 10px;
  }

  .why-choose-item__toggle::after {
    height: 10px;
  }

  .development-process-section {
    padding: 24px 0 !important;
  }

  .development-process-section__description {
    line-height: 20px;
  }

  .development-process-section__step-title {
    font-size: 14px;
    line-height: 18px;
  }

  .development-process-section__step-text {
    line-height: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .why-choose-item__toggle {
    font-size: 18px;
  }

  .why-choose-item__toggle::before {
    width: 12px;
  }

  .why-choose-item__toggle::after {
    height: 12px;
  }

  .why-choose-item__title {
    font-size: 15px;
    line-height: 20px;
  }

  .development-process-section__step-title {
    font-size: 15px;
    line-height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-choose-item,
  .why-choose-item__toggle::before,
  .why-choose-item__toggle::after,
  .why-choose-item__panel {
    transition: none;
  }
}

@media (min-width: 1280px) {
  .development-process-section {
    padding: 48px 0 40px;
  }

  .development-process-section__header {
    margin-bottom: 8px;
  }

  .development-process-section__inner {
    background-image: url("/assets/media/development-vector-visual.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    min-height: 580px;
    padding: 0;
    text-align: left;
  }

  .development-process-section__inner::before {
    content: none;
    display: none;
  }

  .development-process-section__steps {
    display: grid;
    gap: 0 10px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
  }

  .development-process-section__step,
  .development-process-section__step:nth-child(odd),
  .development-process-section__step:nth-child(even) {
    align-self: auto;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    grid-column: auto;
    max-width: none;
    padding: 0 12px;
    text-align: left;
    width: auto;
  }

  .development-process-section__step-top {
    display: none;
  }

  .development-process-section__step:nth-child(odd) {
    margin-top: 330px;
  }

  .development-process-section__step:nth-child(even) {
    margin-top: 100px;
    padding-bottom: 24px;
  }

  .development-process-section__step:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .development-process-section__step-title {
    font-size: 16px;
    margin: 0 0 8px;
  }

  .development-process-section__step-text {
    color: rgba(17, 17, 17, 1);
    line-height: 1.45;
  }
}

.industry-service-card__arrow {
  height: 22px;
  width: 28px;
}
/* ===== SERVICE DETAIL END ===== */