/* ============================================================
   HOME PALETTE PREVIEW — hero → industry (incl. trust-stats)
   Base = lead-popup form navy #233058 + brand red #EE3D25
   (from lead-popup.js .side — same site form)
   Touch: same family, not identical flat on every block
   Buttons unchanged
   ============================================================ */
body.home {
  --hp-pati: #233058; /* lead-popup .side base */
  --hp-pati-deep: #1a2340;
  --hp-pati-lift: #2a3968;
  --hp-red: #ee3d25;
  --hp-red-soft: rgba(238, 61, 37, 0.16);
  --hp-cool: rgba(84, 104, 255, 0.12);
  /* exact lead-popup .side background stack */
  --hp-form-side: radial-gradient(
      circle at 105% -5%,
      rgba(238, 61, 37, 0.6),
      transparent 52%
    ),
    radial-gradient(
      circle at -10% 105%,
      rgba(238, 61, 37, 0.28),
      transparent 48%
    ),
    #233058;
}

/* ---------- 1) Hero + stripe = ONE block, EXACT lead-popup .side bg ---------- */
body.home .b1.dark-block,
body.home .b1 {
  /* from lead-popup.js .side — copy/paste same stack */
  background:
    radial-gradient(circle at 105% -5%, rgba(238, 61, 37, 0.6), transparent 52%),
    radial-gradient(circle at -10% 105%, rgba(238, 61, 37, 0.28), transparent 48%),
    #233058 !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.home .b1 > .container {
  flex: 1 1 auto;
}

/* no texture / glow overlays — form panel is clean navy + red wash */
body.home .b1:before,
body.home .b1:after {
  display: none !important;
}

/* Stripe inside .b1: fully transparent + no edge masks (those caused the seam) */
body.home .b1 .logos-strip.rp-strip,
body.home .b1 > .logos-strip.rp-strip {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border-top: 0 !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  margin-top: auto !important;
  flex: 0 0 auto;
  position: relative;
  z-index: 20;
}

body.home .b1 .logos-strip.rp-strip::before,
body.home .b1 .logos-strip.rp-strip::after,
body.home .b1 > .logos-strip.rp-strip::before,
body.home .b1 > .logos-strip.rp-strip::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  width: 0 !important;
}

/* ---------- 2–4) Trust → services → industry: ONE light band (case-detail feel) ----------
   #f7f7f8 + white cards; hero stays dark above; showcases stay light below. */
body.home .home-mid-stack {
  background-color: #f7f7f8 !important;
  background-image: none !important;
}

body.home .home-mid-stack .trust-stats,
body.home .home-mid-stack .trust-stats.dark-block,
body.home .home-mid-stack .service-block,
body.home .home-mid-stack .service-block.dark-block,
body.home .home-mid-stack .sx.dark-block#solutions,
body.home .home-mid-stack .sx#solutions {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

body.home .home-mid-stack .trust-stats::before,
body.home .home-mid-stack .trust-stats::after,
body.home .home-mid-stack .service-block::before,
body.home .home-mid-stack .service-block::after,
body.home .home-mid-stack .sx#solutions::before,
body.home .home-mid-stack .sx#solutions::after {
  display: none !important;
  content: none !important;
}

/* Soft red wash only — very light */
body.home .trust-stats .ts-glow.g1,
body.home .trust-stats .ts-glow.g2 {
  opacity: 0.35;
}

body.home .trust-stats .ts-glow.g1 {
  background: radial-gradient(
    circle,
    rgba(238, 61, 37, 0.08) 0%,
    rgba(238, 61, 37, 0) 70%
  ) !important;
}

body.home .trust-stats .ts-glow.g2 {
  background: radial-gradient(
    circle,
    rgba(35, 48, 88, 0.06) 0%,
    rgba(35, 48, 88, 0) 70%
  ) !important;
}

/* Trust cards — white like case-detail Impact */
body.home .trust-stats .ts-card {
  background: #fff !important;
  border: 1px solid rgba(10, 8, 3, 0.1) !important;
  box-shadow: 0 10px 28px rgba(35, 48, 88, 0.06) !important;
}

/* Home only — soft red wash like “Industry Expertise” accent */
body.home .home-mid-stack .trust-stats .ts-card:hover,
body.home .home-mid-stack .trust-stats .ts-card:focus-visible,
body.home .trust-stats .ts-card:hover,
body.home .trust-stats .ts-card:focus-visible {
  transform: translateY(-0.45vw) !important;
  border-color: #ee3d25 !important;
  background: linear-gradient(160deg, #fff1ee 0%, #fff6f4 45%, #fffcfb 100%) !important;
  box-shadow:
    0 18px 40px rgba(238, 61, 37, 0.16),
    0 6px 14px rgba(35, 48, 88, 0.06),
    0 0 0 1px rgba(238, 61, 37, 0.12) !important;
}
body.home .home-mid-stack .trust-stats .ts-card::before,
body.home .trust-stats .ts-card::before {
  background: linear-gradient(
    140deg,
    rgba(238, 61, 37, 0.55),
    rgba(238, 61, 37, 0) 42%
  ) !important;
}
body.home .home-mid-stack .trust-stats .ts-card:hover::before,
body.home .home-mid-stack .trust-stats .ts-card:focus-visible::before,
body.home .trust-stats .ts-card:hover::before,
body.home .trust-stats .ts-card:focus-visible::before {
  opacity: 1 !important;
}

body.home .trust-stats .ts-logo,
body.home .trust-stats .ts-rating,
body.home .trust-stats .ts-card p,
body.home .trust-stats .ts-caption,
body.home .trust-stats .ts-eyebrow,
body.home .trust-stats .ts-stat .label {
  color: #0a0803 !important;
}

body.home .trust-stats .ts-card p {
  color: rgba(10, 8, 3, 0.62) !important;
}

body.home .trust-stats .ts-caption {
  color: rgba(10, 8, 3, 0.7) !important;
  border-left-color: var(--hp-red) !important;
}

body.home .trust-stats .ts-rating {
  background: rgba(238, 61, 37, 0.1) !important;
  border-color: rgba(238, 61, 37, 0.28) !important;
  color: #233058 !important;
}

/* Light trust cards: rating star stays orange on hover (never white) */
body.home .trust-stats .ts-card:hover .ts-rating,
body.home .trust-stats .ts-card:focus-visible .ts-rating {
  background: rgba(238, 61, 37, 0.14) !important;
  border-color: #ee3d25 !important;
  color: #233058 !important;
}
body.home .trust-stats .ts-rating svg,
body.home .trust-stats .ts-rating svg *,
body.home .trust-stats .ts-card:hover .ts-rating svg,
body.home .trust-stats .ts-card:hover .ts-rating svg *,
body.home .trust-stats .ts-card:focus-visible .ts-rating svg,
body.home .trust-stats .ts-card:focus-visible .ts-rating svg * {
  fill: #ee3d25 !important;
  color: #ee3d25 !important;
}
body.home .trust-stats .ts-card:hover p,
body.home .trust-stats .ts-card:focus-visible p {
  color: rgba(10, 8, 3, 0.62) !important;
}

body.home .trust-stats .ts-right h2 .ts-muted {
  color: var(--hp-red) !important;
}

body.home .trust-stats .ts-right h2 .ts-bold {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: #233058 !important;
  -webkit-text-fill-color: #233058 !important;
}

body.home .trust-stats .ts-eyebrow .dot {
  background: var(--hp-red) !important;
}

body.home .trust-stats .ts-eyebrow-line {
  background: linear-gradient(
    to right,
    rgba(10, 8, 3, 0.14),
    rgba(10, 8, 3, 0)
  ) !important;
}

body.home .trust-stats .ts-stats {
  border-top-color: rgba(10, 8, 3, 0.1) !important;
}

body.home .trust-stats .ts-stat {
  border-bottom-color: rgba(10, 8, 3, 0.1) !important;
}

body.home .trust-stats .ts-stat:nth-child(2n) {
  border-left-color: rgba(10, 8, 3, 0.1) !important;
}

body.home .trust-stats .ts-stat .num {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: #ee3d25 !important;
  -webkit-text-fill-color: #ee3d25 !important;
}

body.home .trust-stats .ts-stat:hover {
  background: linear-gradient(
    180deg,
    rgba(238, 61, 37, 0.04),
    rgba(238, 61, 37, 0) 70%
  ) !important;
}

/* Service blocks — light editorial type */
body.home .service-block .sv-content h2 .sv-muted {
  color: var(--hp-red) !important;
}

body.home .service-block .sv-content h2 .sv-bold {
  color: #233058 !important;
}

body.home .service-block .sv-desc {
  color: rgba(10, 8, 3, 0.62) !important;
}

body.home .service-block .sv-check-item svg {
  stroke: var(--hp-red) !important;
}

body.home .service-block .sv-check-item span {
  color: #233058 !important;
}

/* Service videos — running border beam (same idea as Clutch/Trustpilot cards) */
@property --sv-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

body.home .service-block .sv-media {
  --c: #ee3d25;
  --c-rgb: 238, 61, 37;
  --beam-from: 20deg;
  position: relative;
  overflow: visible !important;
  isolation: isolate;
  border-radius: 1.1vw;
  box-shadow: 0 14px 36px rgba(35, 48, 88, 0.1);
}

body.home .service-block.reverse .sv-media {
  --c: #233058;
  --c-rgb: 35, 48, 88;
  --beam-from: 200deg;
}

body.home .service-block .sv-media img,
body.home .service-block .sv-media video.sv-video {
  position: relative;
  z-index: 1;
  border-radius: inherit;
}

body.home .service-block .sv-media::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1.5px solid rgba(var(--c-rgb), 0.35);
  pointer-events: none;
  z-index: 2;
}

body.home .service-block .sv-media::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 2.5px;
  z-index: 3;
  pointer-events: none;
  background: conic-gradient(
    from var(--sv-angle),
    rgba(var(--c-rgb), 0) 0deg,
    rgba(var(--c-rgb), 0) 250deg,
    rgba(var(--c-rgb), 0.7) 300deg,
    var(--c) 330deg,
    #fff 360deg
  );
  -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;
  filter: drop-shadow(0 0 8px rgba(var(--c-rgb), 0.65));
  opacity: 1 !important;
  animation: sv-spin 2.8s linear infinite !important;
}

body.home .service-block.reverse .sv-media::after {
  animation-direction: reverse !important;
}

@keyframes sv-spin {
  to {
    --sv-angle: 360deg;
  }
}

/* Service CTAs: left red + white icon; right purple + semi-white icon; hover swaps pair */
body.home .service-block .sv-btn.primary,
.service-block .sv-btn.primary {
  background: #EE3D25 !important;
  border: 1px solid #EE3D25 !important;
  color: #fff !important;
}
body.home .service-block .sv-btn.primary .ic,
.service-block .sv-btn.primary .ic {
  background: #fff !important;
}
body.home .service-block .sv-btn.primary .ic svg,
.service-block .sv-btn.primary .ic svg {
  stroke: #EE3D25 !important;
}

body.home .service-block .sv-btn.secondary,
.service-block .sv-btn.secondary {
  background: linear-gradient(135deg, #6e5cbf 0%, #544199 50%, #3e2b7a 100%) !important;
  border: 1.5px solid #8b78de !important;
  color: #fff !important;
}
body.home .service-block .sv-btn.secondary .ic,
.service-block .sv-btn.secondary .ic {
  background: rgba(255, 255, 255, 0.2) !important;
}
body.home .service-block .sv-btn.secondary .ic svg,
.service-block .sv-btn.secondary .ic svg {
  stroke: #fff !important;
}

/* Individual Hovers */
body.home .service-block .sv-btn.primary:hover,
.service-block .sv-btn.primary:hover {
  background: linear-gradient(135deg, #6e5cbf 0%, #544199 50%, #3e2b7a 100%) !important;
  border-color: #8b78de !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(110, 92, 191, 0.45) !important;
  transform: translateY(-2px) scale(1.02) !important;
}
body.home .service-block .sv-btn.primary:hover .ic,
.service-block .sv-btn.primary:hover .ic {
  background: rgba(255, 255, 255, 0.25) !important;
}
body.home .service-block .sv-btn.primary:hover .ic svg,
.service-block .sv-btn.primary:hover .ic svg {
  stroke: #fff !important;
}

body.home .service-block .sv-btn.secondary:hover,
.service-block .sv-btn.secondary:hover {
  background: #EE3D25 !important;
  border-color: #EE3D25 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(238, 61, 37, 0.45) !important;
  transform: translateY(-2px) scale(1.02) !important;
}
body.home .service-block .sv-btn.secondary:hover .ic,
.service-block .sv-btn.secondary:hover .ic {
  background: #fff !important;
}
body.home .service-block .sv-btn.secondary:hover .ic svg,
.service-block .sv-btn.secondary:hover .ic svg {
  stroke: #EE3D25 !important;
}

/* Pair Hover: hover on EITHER button causes Red -> Purple and Purple -> Red swap */
body.home .service-block .sv-actions:has(a:hover) .sv-btn.primary,
.service-block .sv-actions:has(a:hover) .sv-btn.primary {
  background: linear-gradient(135deg, #6e5cbf 0%, #544199 50%, #3e2b7a 100%) !important;
  border-color: #8b78de !important;
  color: #fff !important;
}
body.home .service-block .sv-actions:has(a:hover) .sv-btn.primary .ic,
.service-block .sv-actions:has(a:hover) .sv-btn.primary .ic {
  background: rgba(255, 255, 255, 0.25) !important;
}
body.home .service-block .sv-actions:has(a:hover) .sv-btn.primary .ic svg,
.service-block .sv-actions:has(a:hover) .sv-btn.primary .ic svg {
  stroke: #fff !important;
}

body.home .service-block .sv-actions:has(a:hover) .sv-btn.secondary,
.service-block .sv-actions:has(a:hover) .sv-btn.secondary {
  background: #EE3D25 !important;
  border-color: #EE3D25 !important;
  color: #fff !important;
}
body.home .service-block .sv-actions:has(a:hover) .sv-btn.secondary .ic,
.service-block .sv-actions:has(a:hover) .sv-btn.secondary .ic {
  background: #fff !important;
}
body.home .service-block .sv-actions:has(a:hover) .sv-btn.secondary .ic svg,
.service-block .sv-actions:has(a:hover) .sv-btn.secondary .ic svg {
  stroke: #EE3D25 !important;
}

/* Industry — light band text; video panel uses its own white overlay type */
body.home .sx#solutions {
  color: #233058;
}
body.home .sx#solutions .sx-pn .sx-copy h3 {
  color: #fff !important;
}
body.home .sx#solutions .sx-pn .sx-copy p {
  color: rgba(255, 255, 255, 0.9) !important;
}
body.home .sx#solutions .sx-pn .sx-ch span {
  color: #fff !important;
}

body.home .sx#solutions .sx-h {
  color: #233058 !important;
}

body.home .sx#solutions .sx-lead {
  color: rgba(10, 8, 3, 0.62) !important;
}

body.home .sx#solutions .sx-tabs {
  scrollbar-color: rgba(35, 48, 88, 0.25) rgba(35, 48, 88, 0.06);
}

body.home .sx#solutions .sx-tab {
  color: #233058 !important;
  background: #fff !important;
  border: 1px solid rgba(10, 8, 3, 0.1) !important;
  box-shadow: 0 6px 18px rgba(35, 48, 88, 0.04);
}

body.home .sx#solutions .sx-tab svg {
  color: #ee3d25 !important;
}

body.home .sx#solutions .sx-tab:hover:not(.on) {
  transform: translateX(8px) !important;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(238, 61, 37, 0.1) 100%
  ) !important;
  border-color: rgba(238, 61, 37, 0.55) !important;
  box-shadow:
    0 14px 32px rgba(35, 48, 88, 0.14),
    inset 0 1px 0 #fff !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

body.home .sx#solutions .sx-tab.on {
  background: linear-gradient(90deg, #ee3d25, #c92f1a) !important;
  border-color: #ee3d25 !important;
  color: #fff !important;
  box-shadow: 0 14px 40px rgba(238, 61, 37, 0.28) !important;
}

body.home .sx#solutions .sx-tab.on:hover {
  transform: none;
}

body.home .sx#solutions .sx-tab.on svg {
  color: #fff !important;
}

body.home .sx#solutions .sx-pn {
  background: #1a2340;
  border-color: rgba(35, 48, 88, 0.2);
  box-shadow: 0 16px 40px rgba(35, 48, 88, 0.14);
}

body.home .sx#solutions .sx-pn:after {
  background:
    linear-gradient(
      180deg,
      rgba(35, 48, 88, 0.18) 0%,
      rgba(26, 35, 64, 0.22) 35%,
      rgba(26, 35, 64, 0.92) 100%
    ),
    radial-gradient(70% 90% at 100% 0%, rgba(238, 61, 37, 0.22), transparent 65%) !important;
}

/* ---------- 5) Showcases: soft tinted light + brand touch (not flat white) ---------- */
body.home .b2.cases-block#showcases {
  position: relative;
  background-color: #f3f2f7 !important;
  background-image:
    radial-gradient(
      55% 70% at 100% 0%,
      rgba(238, 61, 37, 0.07),
      transparent 68%
    ),
    radial-gradient(
      50% 60% at 0% 100%,
      rgba(35, 48, 88, 0.06),
      transparent 65%
    ) !important;
  border-top: 1px solid rgba(35, 48, 88, 0.1);
  padding-top: clamp(72px, 8vw, 110px) !important;
}

/* Keep dot texture; soften so tint + wash read through */
body.home .b2.cases-block#showcases:before {
  opacity: 0.4;
}

/* Divider between industry band → showcases */
body.home .b2.cases-block#showcases::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: min(160px, 28vw);
  height: 3px;
  border-radius: 3px;
  background: #ee3d25;
  box-shadow: 0 0 0 6px #f3f2f7;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ---------- 6) Our work by service: hero pati family (dark), not light ----------
   Same navy as hero / mid — slight lift + soft red wash so it’s related, not flat-identical */
body.home #work-by-service.ws.ws-light {
  background-color: #1e2a4a !important;
  background-image:
    radial-gradient(70% 90% at 88% 35%, rgba(90, 40, 70, 0.45), transparent 58%),
    radial-gradient(55% 70% at 100% 0%, rgba(238, 61, 37, 0.14), transparent 68%),
    linear-gradient(115deg, #1a2744 0%, #233058 48%, #2a2548 100%) !important;
  color: #fff !important;
  border-top: 0;
}

body.home #work-by-service.ws.ws-light:before {
  opacity: 0.06;
}

body.home #work-by-service.ws.ws-light:after {
  display: none !important;
}

/* Keep existing dark UI; only pin active rail to white on pati */
body.home #work-by-service .ws-tab.active {
  border-left-color: #fff !important;
}

@media (max-width: 700px) {
  body.home #work-by-service.ws,
  body.home #work-by-service.ws.ws-light {
    background-color: #1e2a4a !important;
    background-image:
      radial-gradient(70% 90% at 88% 35%, rgba(90, 40, 70, 0.45), transparent 58%),
      radial-gradient(55% 70% at 100% 0%, rgba(238, 61, 37, 0.14), transparent 68%),
      linear-gradient(115deg, #1a2744 0%, #233058 48%, #2a2548 100%) !important;
  }
}