* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: Inter, Roboto, Arial, sans-serif;
  color: #1e2a3a;
  background: #ffffff;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

section[id],
h2[id],
.anchor-section {
  scroll-margin-top: 100px;
}

body {
  min-height: 100vh;
  background: #ffffff;
  line-height: 1.6;
  overflow-x: hidden;
}

.site-dynamic-bg {
  display: none;
}

.site-dynamic-bg-base {
  z-index: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(0, 229, 255, 0.08), transparent 32%),
    radial-gradient(circle at 82% 72%, rgba(58, 83, 170, 0.12), transparent 38%),
    linear-gradient(135deg, #04101f 0%, #071a2f 54%, #030912 100%);
}

.site-dynamic-bg-glow {
  z-index: 0;
  opacity: 0.48;
  background:
    radial-gradient(circle at 42% 48%, rgba(0, 229, 255, 0.22), transparent 28%),
    radial-gradient(circle at 66% 34%, rgba(72, 200, 255, 0.16), transparent 24%);
  mix-blend-mode: screen;
  animation: siteGlowDrift 16s ease-in-out infinite;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform, opacity;
}

.site-header,
main,
.site-footer,
.floating-whatsapp {
  position: relative;
  z-index: 1;
}

@keyframes siteGlowDrift {
  0%,
  100% {
    opacity: 0.36;
    transform: translate3d(-3vw, -2vh, 0) scale(0.98);
  }

  45% {
    opacity: 0.56;
    transform: translate3d(4vw, 3vh, 0) scale(1.08);
  }

  72% {
    opacity: 0.46;
    transform: translate3d(1vw, -4vh, 0) scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-dynamic-bg-glow {
    animation: none;
  }
}

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

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

.site-header {
  background: #f8fafc;
  color: #1e2a3a;
  border-bottom: 1px solid #dce3ea;
  box-shadow: 0 2px 14px rgba(30, 42, 58, 0.08);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0;
  min-width: 0;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 700;
  white-space: nowrap;
  color: #1e2a3a;
}

.header-logo-img {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 8px;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 8px 18px rgba(41, 128, 185, 0.16);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  max-width: 100%;
  list-style: none;
  overflow-x: auto;
}

.nav-menu a {
  display: block;
  padding: 8px 0;
  color: #1e2a3a;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: #c0392b;
}

.section-inner,
.page-main {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.page-main {
  min-height: calc(100vh - 160px);
  padding: 56px 0;
}

.page-main h1 {
  margin-bottom: 12px;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.2;
}

.page-main p {
  max-width: 680px;
  font-size: 1.05rem;
  color: #516070;
}

.site-footer {
  background: #1e2a3a;
  color: #ffffff;
  text-align: center;
  padding: 24px 16px;
}

.site-footer p + p {
  margin-top: 8px;
}

.hero-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 34%, rgba(76, 175, 231, 0.25), transparent 32%),
    radial-gradient(circle at 52% 80%, rgba(192, 57, 43, 0.15), transparent 36%),
    linear-gradient(135deg, #101722 0%, #1e2a3a 52%, #08101c 100%);
  color: #ffffff;
}

.hero-section::before,
.hero-section::after {
  position: absolute;
  inset: auto;
  content: "";
  pointer-events: none;
  z-index: -1;
}

.hero-section::before {
  top: -18%;
  right: -12%;
  width: min(760px, 72vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(72, 184, 240, 0.2), rgba(72, 184, 240, 0.06) 38%, transparent 70%);
  filter: blur(5px);
}

.hero-section::after {
  right: 8%;
  bottom: 5%;
  width: min(620px, 70vw);
  aspect-ratio: 1 / 0.42;
  border: 1px solid rgba(148, 217, 255, 0.18);
  border-radius: 50%;
  transform: rotate(-15deg);
}

.hero-cosmos {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.95;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  gap: 40px;
  align-items: center;
  min-height: min(760px, calc(100vh - 74px));
  padding: 82px 0;
  animation: heroFadeIn 780ms ease-out both;
}

.eyebrow {
  margin-bottom: 12px;
  color: #c0392b;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero-copy h1 {
  max-width: 820px;
  font-size: clamp(2.35rem, 6vw, 4.6rem);
  line-height: 1.05;
}

.hero-subtitle {
  max-width: 720px;
  margin: 22px 0 30px;
  color: #dce5ee;
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  border: 0;
  border-radius: 6px;
  background: #c0392b;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
}

.primary-button:hover {
  background: #a93226;
}

.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
}

.secondary-button:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
}

.floating-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #25d366;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(30, 42, 58, 0.28);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.floating-whatsapp:hover {
  background: #1fb85a;
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(30, 42, 58, 0.34);
  transform: translateY(-3px);
}

.floating-whatsapp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 1.25rem;
  line-height: 1;
}

.floating-whatsapp-text {
  white-space: nowrap;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 72px;
  }

  .floating-whatsapp {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 0;
    border-radius: 50%;
  }

  .floating-whatsapp-text {
    display: none;
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero-visual {
  --parallax-x: 0;
  --parallax-y: 0;
  position: relative;
  min-height: 500px;
  transform:
    perspective(1000px)
    rotateX(calc(var(--parallax-y) * -5deg))
    rotateY(calc(var(--parallax-x) * 7deg));
  transform-style: preserve-3d;
}

.hero-visual::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(78, 184, 244, 0.22), transparent 58%),
    conic-gradient(from 180deg, transparent, rgba(83, 187, 239, 0.18), transparent, rgba(192, 57, 43, 0.12), transparent);
  content: "";
  filter: blur(1px);
  transform: translate(-50%, -50%) rotateX(68deg) rotateZ(-16deg);
  animation: orbitalDrift 16s linear infinite;
}

.reducer-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(680px, 105%);
  max-width: none;
  filter: drop-shadow(0 36px 48px rgba(0, 4, 12, 0.55)) drop-shadow(0 0 26px rgba(68, 174, 232, 0.18));
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--parallax-x) * 18px), calc(var(--parallax-y) * 14px), 36px)
    rotate(-2deg);
  animation: reducerFloat 7s ease-in-out infinite;
}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(134, 213, 255, 0.3);
  border-radius: 50%;
  pointer-events: none;
  transform-style: preserve-3d;
}

.orbit::after {
  position: absolute;
  top: 50%;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9ddeff;
  box-shadow: 0 0 18px rgba(157, 222, 255, 0.85);
  content: "";
}

.orbit-outer {
  width: min(610px, 92%);
  aspect-ratio: 1 / 0.38;
  transform: translate(-50%, -50%) rotate(-18deg);
  animation: orbitSpin 14s linear infinite;
}

.orbit-inner {
  width: min(460px, 72%);
  aspect-ratio: 1 / 0.42;
  border-color: rgba(192, 57, 43, 0.26);
  transform: translate(-50%, -50%) rotate(18deg);
  animation: orbitSpinReverse 18s linear infinite;
}

.data-callout {
  position: absolute;
  z-index: 2;
  min-width: 132px;
  border: 1px solid rgba(180, 220, 248, 0.22);
  border-left: 3px solid #c0392b;
  border-radius: 8px;
  background: rgba(7, 17, 31, 0.68);
  box-shadow: 0 16px 40px rgba(0, 7, 18, 0.3);
  padding: 12px 14px;
  backdrop-filter: blur(10px);
  animation: calloutFadeIn 880ms ease-out both;
}

.data-callout span {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
}

.data-callout p {
  color: #dce5ee;
  font-size: 0.95rem;
}

.callout-warning {
  top: 12%;
  left: 5%;
}

.callout-price {
  right: 3%;
  bottom: 18%;
  animation-delay: 120ms;
}

.callout-monitoring {
  right: 10%;
  top: 16%;
  animation-delay: 220ms;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

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

@keyframes reducerFloat {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      translate3d(calc(var(--parallax-x) * 18px), calc(var(--parallax-y) * 14px), 36px)
      rotate(-2deg)
      translateY(0);
  }

  50% {
    transform:
      translate(-50%, -50%)
      translate3d(calc(var(--parallax-x) * 18px), calc(var(--parallax-y) * 14px), 36px)
      rotate(1.5deg)
      translateY(-14px);
  }
}

@keyframes orbitalDrift {
  to {
    transform: translate(-50%, -50%) rotateX(68deg) rotateZ(344deg);
  }
}

@keyframes orbitSpin {
  to {
    transform: translate(-50%, -50%) rotate(342deg);
  }
}

@keyframes orbitSpinReverse {
  to {
    transform: translate(-50%, -50%) rotate(-342deg);
  }
}

@keyframes calloutFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

.content-section {
  padding: 64px 0;
}

.muted-section {
  background: #f4f7fa;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 28px;
}

.section-heading h2,
.cta-section h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.18;
}

.section-heading p,
.cta-section p,
.section-note {
  margin-top: 10px;
  color: #516070;
  font-size: 1.03rem;
}

.core-value-section {
  background:
    radial-gradient(circle at 18% 0%, rgba(41, 128, 185, 0.15), transparent 30%),
    linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
}

.core-value-heading {
  max-width: 840px;
}

.core-value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.core-value-card {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid #d8e1ea;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
  padding: 26px;
  box-shadow: 0 18px 40px rgba(30, 42, 58, 0.08);
}

.core-value-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #c0392b, #e67e22);
}

.core-value-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: 8px;
  background: #1e2a3a;
  color: #ffffff;
  font-size: 1.1rem;
}

.core-value-metric {
  display: block;
  margin-bottom: 12px;
  color: #e67e22;
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
  line-height: 1.12;
}

.core-value-card h3 {
  margin-bottom: 10px;
  color: #1e2a3a;
  font-size: 1.12rem;
  line-height: 1.35;
}

.core-value-card p {
  color: #516070;
}

.core-value-card span {
  display: block;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e2e8ef;
  color: #1e2a3a;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.45;
}

.card-grid {
  display: grid;
  gap: 18px;
}

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

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

.feature-card,
.service-card,
.product-card {
  min-height: 100%;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  background: #ffffff;
  padding: 24px;
}

.feature-card i,
.service-card i,
.product-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: #1e2a3a;
  color: #ffffff;
  font-size: 1.25rem;
}

.feature-card h2,
.service-card h3,
.product-card h3 {
  margin-bottom: 8px;
  font-size: 1.1rem;
  line-height: 1.3;
}

.feature-card p,
.service-card p,
.product-card p {
  color: #516070;
}

.section-note {
  max-width: none;
  margin-top: 20px;
  padding: 14px 18px;
  border-left: 4px solid #c0392b;
  background: #f4f7fa;
}

.below-hero-highlights {
  padding: 52px 0;
  background:
    radial-gradient(circle at 14% 0%, rgba(41, 128, 185, 0.12), transparent 30%),
    linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
}

.highlight-grid {
  display: grid;
  gap: 18px;
}

.four-highlight-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.highlight-card {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  border: 1px solid #d8e1ea;
  border-radius: 8px;
  background: #ffffff;
  padding: 24px;
  box-shadow: 0 16px 36px rgba(30, 42, 58, 0.07);
}

.highlight-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #c0392b, #e67e22);
  content: "";
}

.highlight-metric {
  display: block;
  margin-bottom: 12px;
  color: #e67e22;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  line-height: 1.12;
}

.highlight-card h3 {
  margin-bottom: 10px;
  color: #1e2a3a;
  font-size: 1.05rem;
  line-height: 1.35;
}

.highlight-card p {
  color: #516070;
  font-size: 0.98rem;
}

.module-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 22px;
}

.section-heading-with-link {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
}

.section-heading-with-link .text-link {
  flex: 0 0 auto;
  margin-bottom: 4px;
}

.home-service-process .process-card {
  display: flex;
  flex-direction: column;
}

.home-process-card .text-link {
  margin-top: auto;
}

.process-detail {
  margin-top: 10px;
}

.compact-check-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 18px;
  padding-left: 18px;
  color: #516070;
  font-size: 0.94rem;
  line-height: 1.5;
}

.customer-tech-table th[scope="row"] {
  width: 32%;
}

section[id],
h2[id],
.anchor-section {
  scroll-margin-top: 100px;
}

.handoff-note {
  max-width: 880px;
  margin: -4px 0 24px;
  padding: 12px 16px;
  border-left: 4px solid #2980b9;
  border-radius: 0 8px 8px 0;
  background: #edf5fb;
  color: #334456;
  font-size: 0.98rem;
  line-height: 1.6;
}

.roi-banner {
  background: #1e2a3a;
  color: #ffffff;
  padding: 52px 0;
}

.roi-story {
  max-width: 900px;
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.25;
}

.roi-title {
  margin-bottom: 14px;
  color: #ffffff;
  font-size: clamp(1.7rem, 3.5vw, 2.35rem);
  line-height: 1.15;
}

.roi-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.roi-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 6px;
  background: #e67e22;
  color: #ffffff;
  font-weight: 800;
}

.cta-section {
  background: #ffffff;
}

.cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(320px, 1.2fr);
  gap: 34px;
  align-items: start;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  padding: 24px;
  background: #f8fafc;
}

.contact-form label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid #c8d2dc;
  border-radius: 6px;
  padding: 11px 12px;
  color: #1e2a3a;
  font: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #1e2a3a;
  outline: 3px solid rgba(30, 42, 58, 0.14);
}

.full-field,
.form-message,
.form-button {
  grid-column: 1 / -1;
}

.form-message {
  min-height: 24px;
  font-size: 0.95rem;
  font-weight: 700;
}

.form-message.error {
  color: #c0392b;
}

.form-message.success {
  color: #1e7c4f;
}

@media (max-width: 720px) {
  .nav {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .nav-menu {
    width: 100%;
    padding-bottom: 4px;
  }
}

@media (max-width: 960px) {
  .hero-grid,
  .cta-grid {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    min-height: auto;
  }

  .hero-visual {
    min-height: 430px;
    order: -1;
  }

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

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

  .core-value-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  body {
    padding-bottom: 72px;
  }

  .floating-whatsapp {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 0;
    border-radius: 50%;
  }

  .floating-whatsapp-text {
    display: none;
  }

  .hero-grid {
    padding: 56px 0;
  }

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

  .reducer-image {
    width: min(520px, 118%);
  }

  .data-callout {
    min-width: 108px;
    padding: 9px 10px;
  }

  .data-callout span {
    font-size: 1rem;
  }

  .data-callout p {
    font-size: 0.96rem;
  }

  .callout-warning {
    top: 3%;
    left: 0;
  }

  .callout-price {
    right: 0;
    bottom: 8%;
  }

  .callout-monitoring {
    right: 2%;
    top: 6%;
  }

  .content-section {
    padding: 48px 0;
  }

  .section-heading-with-link {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .section-heading-with-link .text-link {
    margin-bottom: 0;
  }

  .hero-actions,
  .module-link-row {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .primary-button,
  .hero-actions .secondary-button {
    width: 100%;
    text-align: center;
  }

  .below-hero-highlights {
    padding: 42px 0;
  }

  .four-highlight-grid {
    grid-template-columns: 1fr;
  }

  .highlight-card {
    padding: 22px;
  }

  .core-value-card {
    padding: 22px;
  }

  .three-columns,
  .four-columns,
  .contact-form {
    grid-template-columns: 1fr;
  }

  .contact-form {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Three.js hero banner overrides */
.hero-section {
  min-height: max(600px, calc(100vh - 74px));
  background: #0a0a1a;
}

.hero-section::before,
.hero-section::after,
.hero-visual::before {
  content: none;
}

.hero-cosmos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 1;
}

.hero-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  min-height: max(600px, calc(100vh - 74px));
  padding: 72px 0;
}

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

.hero-visual {
  position: relative;
  min-height: 520px;
  transform: none;
  transform-style: flat;
}

.gearbox-canvas {
  display: block;
  width: 100%;
  height: 520px;
  min-height: 420px;
}

.hero-image-visual {
  display: grid;
  place-items: center;
  min-height: 520px;
  perspective: 1000px;
}

.hero-product-image {
  position: relative;
  z-index: 1;
  width: min(780px, 118%);
  max-width: none;
  border-radius: 10px;
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.42);
  filter: saturate(1.08) contrast(1.06);
  transform: rotateY(-8deg) rotateX(2deg);
  animation: productHover 7s ease-in-out infinite;
}

.bearing-orbit {
  --orbit-size: clamp(70px, 10vw, 118px);
  position: absolute;
  z-index: 3;
  left: 78%;
  top: 52%;
  width: var(--orbit-size);
  aspect-ratio: 1;
  border: 2px solid rgba(126, 217, 255, 0.75);
  border-radius: 50%;
  box-shadow:
    0 0 18px rgba(126, 217, 255, 0.55),
    inset 0 0 16px rgba(255, 255, 255, 0.22);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.bearing-orbit-main {
  animation: bearingSpin 3.8s linear infinite;
}

.bearing-orbit-secondary {
  --orbit-size: clamp(92px, 13vw, 148px);
  width: clamp(92px, 13vw, 148px);
  border-color: rgba(230, 126, 34, 0.42);
  opacity: 0.7;
  animation: bearingSpinReverse 6.2s linear infinite;
}

.bearing-orbit-main span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #eaf8ff;
  box-shadow: 0 0 12px rgba(126, 217, 255, 0.9);
}

.bearing-orbit-main span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(0deg) translateX(calc(var(--orbit-size) * 0.43));
}

.bearing-orbit-main span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(60deg) translateX(calc(var(--orbit-size) * 0.43));
}

.bearing-orbit-main span:nth-child(3) {
  transform: translate(-50%, -50%) rotate(120deg) translateX(calc(var(--orbit-size) * 0.43));
}

.bearing-orbit-main span:nth-child(4) {
  transform: translate(-50%, -50%) rotate(180deg) translateX(calc(var(--orbit-size) * 0.43));
}

.bearing-orbit-main span:nth-child(5) {
  transform: translate(-50%, -50%) rotate(240deg) translateX(calc(var(--orbit-size) * 0.43));
}

.bearing-orbit-main span:nth-child(6) {
  transform: translate(-50%, -50%) rotate(300deg) translateX(calc(var(--orbit-size) * 0.43));
}

@keyframes productHover {
  0%,
  100% {
    transform: rotateY(-8deg) rotateX(2deg) translateY(0);
  }

  50% {
    transform: rotateY(-5deg) rotateX(3deg) translateY(-12px);
  }
}

@keyframes bearingSpin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes bearingSpinReverse {
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@media (max-width: 960px) {
  .hero-section {
    min-height: 600px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    min-height: 600px;
    padding: 58px 0 46px;
  }

  .hero-visual {
    order: 0;
    min-height: 420px;
  }

  .gearbox-canvas {
    height: 420px;
  }

  .hero-image-visual {
    min-height: 420px;
  }

  .hero-product-image {
    width: min(720px, 112%);
  }
}

@media (max-width: 620px) {
  .hero-section {
    min-height: 680px;
  }

  .hero-grid {
    min-height: 680px;
    gap: 18px;
    padding: 48px 0 34px;
  }

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

  .gearbox-canvas {
    height: 330px;
    min-height: 300px;
  }

  .hero-image-visual {
    min-height: 330px;
  }

  .hero-product-image {
    width: min(620px, 150%);
  }

  .bearing-orbit {
    left: 78%;
    top: 52%;
  }
}

/* Homepage hero: transparent product cutout embedded in the particle banner. */
.hero-section {
  min-height: max(680px, calc(100vh - 74px));
}

.hero-grid {
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(360px, 1fr);
  gap: 0;
  align-items: start;
  min-height: max(680px, calc(100vh - 74px));
  padding: 54px 0 44px;
  text-align: center;
}

.hero-copy {
  justify-self: center;
  max-width: 1120px;
  padding: 10px clamp(8px, 2vw, 24px) 0;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.72);
}

.hero-copy .eyebrow {
  margin-bottom: 10px;
}

.hero-copy h1 {
  margin-inline: auto;
  max-width: 1120px;
  font-size: clamp(2.4rem, 5.6vw, 4.7rem);
}

.hero-subtitle {
  margin: 18px auto 24px;
}

.hero-image-visual {
  justify-self: center;
  width: min(1380px, calc(100vw - 28px));
  min-height: clamp(360px, 46vw, 560px);
  margin-top: clamp(-18px, -1.4vw, -8px);
  overflow: visible;
}

.hero-image-visual::after {
  position: absolute;
  left: 50%;
  top: 58%;
  z-index: 0;
  width: min(880px, 76vw);
  aspect-ratio: 1 / 0.34;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(90, 197, 255, 0.2), transparent 62%),
    linear-gradient(90deg, transparent, rgba(230, 126, 34, 0.16), transparent);
  content: "";
  filter: blur(14px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hero-product-image {
  width: min(1280px, 118vw);
  border-radius: 0;
  box-shadow: none;
  filter:
    drop-shadow(0 38px 34px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 38px rgba(92, 193, 255, 0.2))
    saturate(1.1)
    contrast(1.08);
}

.bearing-orbit {
  left: 76%;
  top: 53%;
}

@media (max-width: 960px) {
  .hero-section,
  .hero-grid {
    min-height: 720px;
  }

  .hero-grid {
    grid-template-rows: auto minmax(330px, 1fr);
    padding: 46px 0 38px;
  }

  .hero-copy h1 {
    font-size: clamp(2.05rem, 7vw, 3.8rem);
  }

  .hero-image-visual {
    width: min(900px, calc(100vw - 22px));
    min-height: 380px;
    margin-top: -6px;
  }

  .hero-product-image {
    width: min(920px, 138vw);
  }
}

@media (max-width: 620px) {
  .hero-section,
  .hero-grid {
    min-height: 740px;
  }

  .hero-grid {
    grid-template-rows: auto minmax(300px, 1fr);
    padding: 38px 0 34px;
  }

  .hero-copy h1 {
    font-size: clamp(1.9rem, 9vw, 2.7rem);
  }

  .hero-subtitle {
    font-size: 0.98rem;
  }

  .hero-image-visual {
    min-height: 310px;
  }

  .hero-product-image {
    width: min(760px, 178vw);
  }

  .bearing-orbit {
    --orbit-size: clamp(58px, 18vw, 86px);
    left: 77%;
    top: 54%;
  }
}

/* Final homepage hero composition: text above an enlarged embedded product cutout. */
.hero-section {
  min-height: max(680px, calc(100vh - 74px));
}

.hero-grid {
  display: block;
  min-height: max(680px, calc(100vh - 74px));
  padding: 0;
}

.hero-copy {
  position: absolute;
  top: clamp(40px, 7vh, 72px);
  left: 50%;
  z-index: 4;
  width: min(1120px, calc(100% - 32px));
  transform: translateX(-50%);
}

.hero-copy h1 {
  font-size: clamp(2.25rem, 5vw, 4.35rem);
}

.hero-subtitle {
  max-width: 880px;
}

.hero-image-visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-height: 0;
  margin-top: 0;
  padding: 0 0 clamp(18px, 4.4vh, 46px);
}

.hero-image-visual::after {
  top: auto;
  bottom: clamp(44px, 10vh, 96px);
}

.hero-product-image {
  width: min(1320px, 122vw);
  max-height: min(52vh, 520px);
  object-fit: contain;
  transform-origin: center center;
}

.bearing-orbit {
  left: calc(50% + min(350px, 32vw));
  top: auto;
  bottom: clamp(122px, 20vh, 210px);
}

@media (max-width: 960px) {
  .hero-section,
  .hero-grid {
    min-height: 720px;
  }

  .hero-copy {
    top: 34px;
  }

  .hero-product-image {
    width: min(960px, 152vw);
    max-height: 42vh;
  }

  .bearing-orbit {
    left: calc(50% + min(250px, 31vw));
    bottom: clamp(102px, 17vh, 160px);
  }
}

@media (max-width: 620px) {
  .hero-section,
  .hero-grid {
    min-height: 740px;
  }

  .hero-copy {
    top: 28px;
  }

  .hero-copy h1 {
    font-size: clamp(1.82rem, 8.2vw, 2.55rem);
  }

  .hero-subtitle {
    margin: 14px auto 18px;
  }

  .hero-product-image {
    width: min(760px, 184vw);
    max-height: 34vh;
  }

  .hero-image-visual {
    padding-bottom: 28px;
  }

  .bearing-orbit {
    left: calc(50% + 120px);
    bottom: 112px;
  }
}

.page-hero {
  background: #1e2a3a;
  color: #ffffff;
  padding: 72px 0;
}

.page-hero h1 {
  max-width: 820px;
  font-size: clamp(2.35rem, 6vw, 4.25rem);
  line-height: 1.08;
}

.page-hero p:not(.eyebrow) {
  max-width: 720px;
  margin-top: 16px;
  color: #dce5ee;
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.process-grid,
.pricing-grid {
  display: grid;
  gap: 18px;
}

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

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

.process-card,
.pricing-card,
.faq-item {
  border: 1px solid #dce3ea;
  border-radius: 8px;
  background: #ffffff;
  padding: 24px;
}

.process-card {
  position: relative;
  min-height: 230px;
}

.step-number {
  display: inline-flex;
  margin-bottom: 18px;
  color: #c0392b;
  font-size: 0.95rem;
  font-weight: 800;
}

.process-card i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: #1e2a3a;
  color: #ffffff;
  font-size: 1.2rem;
}

.process-card h3,
.pricing-card h3,
.faq-item h3 {
  margin-bottom: 8px;
  font-size: 1.1rem;
  line-height: 1.3;
}

.process-card p,
.pricing-card p,
.faq-item p {
  color: #516070;
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  background: #ffffff;
  -webkit-overflow-scrolling: touch;
}

.spec-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.spec-table th,
.spec-table td {
  padding: 16px 18px;
  border-bottom: 1px solid #dce3ea;
  text-align: left;
}

.spec-table tr:last-child th,
.spec-table tr:last-child td {
  border-bottom: 0;
}

.spec-table th {
  width: 42%;
  color: #1e2a3a;
  font-weight: 800;
}

.product-table {
  min-width: 960px;
}

.product-table th,
.product-table td {
  vertical-align: top;
}

.series-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.series-tab {
  border: 1px solid #c8d2dc;
  border-radius: 6px;
  background: #ffffff;
  color: #1e2a3a;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 10px 14px;
}

.series-tab:hover,
.series-tab.active {
  border-color: #c0392b;
  background: #c0392b;
  color: #ffffff;
}

.series-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: 24px;
  align-items: start;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  background: #ffffff;
  padding: 24px;
}

.series-panel[hidden] {
  display: none;
}

.series-media {
  display: grid;
  gap: 10px;
}

.series-media p {
  color: #516070;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
}

.product-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 220px;
  border-radius: 8px;
  background: #f5f5f5;
  box-shadow: 0 14px 30px rgba(30, 42, 58, 0.1);
}

.product-image-placeholder i {
  color: #1e2a3a;
  font-size: 3rem;
}

.product-image-placeholder i + i {
  color: #c0392b;
  font-size: 2rem;
}

.series-content h3 {
  margin-bottom: 8px;
  font-size: 1.45rem;
  line-height: 1.25;
}

.series-content > p {
  margin-bottom: 18px;
  color: #516070;
}

.compact-table-wrap {
  border-radius: 8px;
}

.compact-spec-table {
  min-width: 520px;
}

.series-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  color: #516070;
}

.pricing-card.featured {
  border-color: #c0392b;
  box-shadow: 0 18px 42px rgba(30, 42, 58, 0.12);
}

.package-range {
  margin-bottom: 14px;
  font-weight: 800;
}

.price-line {
  color: #e67e22 !important;
  font-size: 1.2rem;
  font-weight: 800;
}

.faq-list {
  display: grid;
  gap: 16px;
}

.service-cta {
  background: #1e2a3a;
  color: #ffffff;
  padding: 56px 0;
  text-align: center;
}

.service-cta h2 {
  margin: 0 auto 20px;
  max-width: 720px;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.18;
}

.service-cta p {
  margin: -8px auto 22px;
  max-width: 640px;
  color: #dce5ee;
}

.case-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 24px;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  background: #ffffff;
  padding: 28px;
}

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

.case-tile {
  border: 1px solid #dce3ea;
  border-radius: 8px;
  background: #ffffff;
  padding: 26px;
}

.case-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 8px;
  background: #1e2a3a;
  color: #ffffff;
  font-size: 1.25rem;
}

.case-tile h3 {
  margin-bottom: 10px;
  font-size: 1.35rem;
  line-height: 1.25;
}

.case-tile p:not(.eyebrow) {
  color: #516070;
}

.case-metrics {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.case-metrics span {
  border-left: 4px solid #e67e22;
  background: #f4f7fa;
  color: #1e2a3a;
  font-weight: 800;
  padding: 10px 12px;
}

.case-summary h3 {
  margin-bottom: 12px;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.18;
}

.case-summary p {
  color: #516070;
}

.case-summary blockquote {
  margin-top: 20px;
  border-left: 4px solid #c0392b;
  background: #f4f7fa;
  padding: 18px;
  color: #1e2a3a;
  font-weight: 800;
}

.case-facts {
  display: grid;
  gap: 14px;
}

.case-facts div {
  border: 1px solid #dce3ea;
  border-radius: 8px;
  padding: 16px;
}

.case-facts i {
  color: #c0392b;
  font-size: 1.2rem;
}

.case-facts span {
  display: block;
  margin-top: 8px;
  color: #516070;
  font-size: 0.95rem;
}

.case-facts strong {
  display: block;
  margin-top: 4px;
  color: #1e2a3a;
}

.case-results {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.case-results div {
  border-radius: 8px;
  background: #1e2a3a;
  color: #ffffff;
  padding: 18px;
}

.case-results span {
  display: block;
  color: #e67e22;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
}

.case-results p {
  margin-top: 8px;
  color: #dce5ee;
  font-size: 0.94rem;
}

.roi-calculator {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: 24px;
  align-items: start;
}

.roi-inputs {
  display: grid;
  gap: 16px;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  background: #ffffff;
  padding: 24px;
}

.roi-inputs label {
  display: grid;
  gap: 6px;
  color: #1e2a3a;
  font-weight: 800;
}

.roi-inputs input {
  width: 100%;
  border: 1px solid #c8d2dc;
  border-radius: 6px;
  padding: 11px 12px;
  color: #1e2a3a;
  font: inherit;
}

.roi-inputs input:focus {
  border-color: #1e2a3a;
  outline: 3px solid rgba(30, 42, 58, 0.14);
}

.roi-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.roi-results div {
  border-radius: 8px;
  background: #1e2a3a;
  padding: 22px;
}

.roi-results span {
  display: block;
  color: #dce5ee;
  font-size: 0.95rem;
}

.roi-results strong {
  display: block;
  margin-top: 10px;
  color: #e67e22;
  font-size: clamp(1.45rem, 4vw, 2.1rem);
  line-height: 1;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 28px;
  align-items: start;
}

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

.contact-info-card {
  border: 1px solid #dce3ea;
  border-radius: 8px;
  background: #ffffff;
  padding: 24px;
}

.contact-info-card h2 {
  margin-bottom: 18px;
  font-size: 1.45rem;
}

.contact-info-list {
  display: grid;
  gap: 14px;
}

.contact-info-list p {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  color: #516070;
}

.contact-info-list i {
  color: #c0392b;
  font-size: 1.1rem;
  padding-top: 4px;
}

.map-placeholder {
  display: grid;
  place-items: center;
  min-height: 220px;
  margin-top: 24px;
  border-radius: 8px;
  background: #f5f5f5;
  color: #1e2a3a;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px #dce3ea;
}

.logo-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.logo-placeholder-grid div {
  display: grid;
  place-items: center;
  min-height: 110px;
  border-radius: 8px;
  background: #f5f5f5;
  color: #516070;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px #dce3ea;
}

@media (max-width: 960px) {
  .process-grid,
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-card,
  .roi-calculator,
  .contact-layout {
    grid-template-columns: 1fr;
  }

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

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

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

@media (max-width: 620px) {
  .page-hero {
    padding: 56px 0;
  }

  .process-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .process-card {
    min-height: auto;
  }

  .case-card,
  .roi-inputs {
    padding: 18px;
  }

  .case-results,
  .roi-results,
  .contact-page-form {
    grid-template-columns: 1fr;
  }

  .logo-placeholder-grid {
    grid-template-columns: 1fr;
  }
}

.split-section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 1.15fr);
  gap: 38px;
  align-items: start;
}

.split-section h2 {
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  line-height: 1.16;
}

.split-section p {
  margin-top: 12px;
  color: #516070;
}

.map-placeholder.map-embed {
  min-height: 300px;
  padding: 0;
  overflow: hidden;
  background: #e4e7ec;
  border: 1px solid #e4e7ec;
}

.map-placeholder.map-embed iframe {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 0;
  display: block;
}

.insight-list {
  display: grid;
  gap: 14px;
}

.insight-list article {
  border-left: 4px solid #c0392b;
  background: #ffffff;
  padding: 18px;
}

.insight-list strong {
  display: block;
  margin-bottom: 6px;
  color: #1e2a3a;
  font-size: 1.05rem;
}

.insight-list span {
  color: #516070;
}

.industry-grid,
.timeline-grid,
.proof-grid {
  display: grid;
  gap: 18px;
}

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

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

.industry-card {
  border: 1px solid #dce3ea;
  border-radius: 8px;
  background: #ffffff;
  padding: 24px;
}

.industry-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: #1e2a3a;
  color: #ffffff;
  font-size: 1.15rem;
}

.industry-card h3 {
  margin-bottom: 8px;
}

.industry-card p,
.timeline-grid p {
  color: #516070;
}

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

.timeline-grid article {
  border-top: 4px solid #c0392b;
  background: #ffffff;
  padding: 22px;
}

.timeline-grid span {
  display: inline-flex;
  margin-bottom: 12px;
  color: #e67e22;
  font-weight: 800;
}

.timeline-grid h3 {
  margin-bottom: 8px;
}

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

.tco-proof-grid {
  grid-template-columns: 1fr;
}

.proof-grid div {
  border: 1px solid #dce3ea;
  border-radius: 8px;
  background: #ffffff;
  padding: 22px;
}

.proof-grid span {
  display: block;
  color: #e67e22;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.proof-grid p {
  margin-top: 8px;
}

.proof-grid strong {
  display: block;
  margin-top: 12px;
  color: #1e2a3a;
  font-size: 1.05rem;
}

.text-link {
  display: inline-flex;
  margin-top: 18px;
  color: #c0392b;
  font-weight: 800;
}

.text-link:hover {
  text-decoration: underline;
}

.secondary-text-link {
  margin-left: 16px;
}

.roi-button {
  margin-top: 22px;
}

.inline-text-link {
  display: inline;
  margin-top: 0;
}

.roi-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.roi-summary-grid article {
  border: 1px solid #dce3ea;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(30, 42, 58, 0.06);
  padding: 18px;
}

.roi-summary-grid strong {
  display: block;
  color: #e67e22;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1;
}

.roi-summary-grid h3 {
  margin-top: 12px;
  color: #1e2a3a;
  font-size: 1rem;
  line-height: 1.35;
}

.roi-summary-grid p {
  margin-top: 8px;
  color: #516070;
  font-size: 0.94rem;
  line-height: 1.5;
}

.roi-summary-grid span {
  display: block;
  margin-top: 8px;
  color: #516070;
  font-weight: 700;
}

.report-sample-card {
  border: 1px solid #dce3ea;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(30, 42, 58, 0.06);
  padding: clamp(22px, 4vw, 34px);
}

.report-status-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.report-status-row div {
  border-radius: 8px;
  background: #f4f7fa;
  padding: 16px;
}

.report-label {
  display: block;
  margin-bottom: 6px;
  color: #516070;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
}

.status-attention {
  color: #e67e22;
}

.page-hero {
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  position: absolute;
  right: max(24px, calc((100vw - 1120px) / 2));
  bottom: -64px;
  width: min(420px, 56vw);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41, 128, 185, 0.28), transparent 64%);
  content: "";
  pointer-events: none;
}

.page-hero .section-inner {
  position: relative;
  z-index: 1;
}

.page-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 980px;
  margin-top: 28px;
}

.page-hero-stats span,
.hero-proof-pills span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #edf5fb;
  padding: 10px 14px;
  font-size: 0.95rem;
  backdrop-filter: blur(8px);
}

.page-hero-stats strong,
.hero-proof-pills strong {
  color: #e67e22;
  font-size: 1.05rem;
}

.anchor-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.anchor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 10px 15px;
  font-weight: 800;
  line-height: 1.2;
}

.anchor-button:hover {
  border-color: #e67e22;
  background: #e67e22;
  color: #ffffff;
}

.hero-proof-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.section-spotlight {
  background:
    linear-gradient(90deg, rgba(192, 57, 43, 0.08), rgba(41, 128, 185, 0.08)),
    #ffffff;
}

.spotlight-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: 34px;
  align-items: center;
  border-left: 5px solid #c0392b;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(30, 42, 58, 0.09);
  padding: clamp(24px, 4vw, 42px);
}

.spotlight-grid h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.45rem);
  line-height: 1.18;
}

.spotlight-copy {
  color: #516070;
  font-size: 1.04rem;
}

.feature-card,
.service-card,
.product-card,
.process-card,
.pricing-card,
.case-tile,
.industry-card,
.faq-item,
.proof-grid div,
.contact-info-card,
.contact-page-form {
  box-shadow: 0 12px 30px rgba(30, 42, 58, 0.06);
}

.feature-card,
.service-card,
.product-card,
.process-card,
.pricing-card,
.case-tile,
.industry-card {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.feature-card:hover,
.service-card:hover,
.product-card:hover,
.process-card:hover,
.pricing-card:hover,
.case-tile:hover,
.industry-card:hover {
  border-color: rgba(192, 57, 43, 0.45);
  box-shadow: 0 18px 42px rgba(30, 42, 58, 0.12);
  transform: translateY(-3px);
}

.case-group-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 34px 0 16px;
}

.case-group-heading:first-of-type {
  margin-top: 0;
}

.case-group-heading::after {
  flex: 1;
  height: 1px;
  background: #dce3ea;
  content: "";
}

.case-group-heading span {
  border-radius: 999px;
  background: #1e2a3a;
  color: #ffffff;
  padding: 8px 14px;
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

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

.case-metrics span {
  border-left: 3px solid #e67e22;
}

.form-intro {
  grid-column: 1 / -1;
  margin-bottom: 4px;
}

.form-intro h2 {
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.18;
}

.form-intro p:not(.eyebrow) {
  margin-top: 10px;
  color: #516070;
}

@media (max-width: 960px) {
  .spotlight-grid,
  .case-grid-featured {
    grid-template-columns: 1fr;
  }

  .split-section {
    grid-template-columns: 1fr;
  }

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

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

  .series-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .roi-summary-grid {
    grid-template-columns: 1fr;
  }

  .report-status-row {
    grid-template-columns: 1fr;
  }

  .secondary-text-link {
    margin-left: 0;
  }

  .page-hero-stats,
  .hero-proof-pills,
  .anchor-button-row {
    align-items: stretch;
    flex-direction: column;
  }

  .page-hero-stats span,
  .hero-proof-pills span,
  .anchor-button {
    justify-content: center;
    text-align: center;
  }

  .industry-grid,
  .timeline-grid,
  .proof-grid,
  .three-item-grid {
    grid-template-columns: 1fr;
  }

  .series-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .series-tab {
    white-space: nowrap;
  }

  .series-panel {
    padding: 18px;
  }

  .product-image-placeholder {
    min-height: 180px;
  }
}

/* HOME hero readability pass: keep copy and product image in separate layers. */
.hero-section {
  min-height: auto;
  background:
    radial-gradient(circle at 50% 58%, rgba(41, 128, 185, 0.24), transparent 34%),
    linear-gradient(180deg, #050713 0%, #0a0a1a 58%, #081321 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: clamp(28px, 4vw, 42px);
  align-items: center;
  min-height: auto;
  padding: clamp(48px, 7vw, 78px) 0 clamp(38px, 6vw, 64px);
  text-align: center;
  min-width: 0;
}

.hero-copy {
  position: relative;
  top: auto;
  left: auto;
  z-index: 4;
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 0;
  transform: none;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.72);
  min-width: 0;
}

.hero-copy h1 {
  max-width: 980px;
  margin: 0 auto;
  font-size: clamp(2.15rem, 5vw, 4.15rem);
  line-height: 1.08;
}

.hero-subtitle {
  max-width: 820px;
  margin: 18px auto 22px;
  color: #e4edf5;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
}

.hero-image-visual {
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(1280px, 100%);
  min-height: clamp(280px, 30vw, 430px);
  margin: 0 auto;
  overflow: visible;
  padding: 0;
  perspective: 1000px;
  min-width: 0;
}

.hero-image-visual::after {
  top: 55%;
  bottom: auto;
  width: min(920px, 78vw);
  opacity: 0.9;
  transform: translate(-50%, -50%);
}

.hero-product-image {
  width: min(1220px, 108vw);
  max-height: clamp(280px, 36vw, 460px);
  object-fit: contain;
}

.bearing-orbit {
  left: calc(50% + min(340px, 31vw));
  top: 54%;
  bottom: auto;
}

@media (max-width: 960px) {
  .hero-grid {
    padding: 42px 0 42px;
  }

  .hero-copy h1 {
    font-size: clamp(2rem, 7vw, 3.4rem);
  }

  .hero-image-visual {
    min-height: clamp(250px, 42vw, 360px);
  }

  .hero-product-image {
    width: min(900px, 138vw);
    max-height: 360px;
  }
}

@media (max-width: 620px) {
  .hero-grid {
    gap: 24px;
    padding: 34px 0 34px;
    justify-items: center;
  }

  .hero-copy,
  .hero-image-visual {
    width: 100%;
    max-width: 100%;
  }

  .hero-copy h1 {
    font-size: clamp(1.8rem, 8.4vw, 2.55rem);
  }

  .hero-image-visual {
    min-height: 260px;
  }

  .hero-product-image {
    width: min(760px, 176vw);
    max-height: 260px;
  }

  .bearing-orbit {
    left: calc(50% + 116px);
    top: 52%;
  }
}

.hero-metrics-strip {
  position: relative;
  background:
    linear-gradient(90deg, rgba(30, 42, 58, 0.98), rgba(18, 34, 48, 0.98)),
    #1e2a3a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid #dce3ea;
  padding: 18px 0;
}

.hero-metrics-strip .hero-proof-pills {
  margin: 0 auto;
}

.hero-metrics-strip .hero-proof-pills span {
  border-color: rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(41, 128, 185, 0.1));
  color: #eef5fb;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.hero-metrics-strip .hero-proof-pills strong {
  color: #e67e22;
}

/* HOME hero final layout: desktop copy left, product right, no overlap. */
@media (min-width: 961px) {
  .hero-section {
    min-height: 720px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(520px, 1.12fr);
    grid-template-rows: auto;
    gap: clamp(36px, 5vw, 70px);
    min-height: 720px;
    padding: 54px 0;
    text-align: left;
  }

  .hero-copy {
    width: 100%;
    max-width: 620px;
    margin: 0;
    text-align: left;
  }

  .hero-copy h1 {
    max-width: 620px;
    margin: 0;
    font-size: clamp(2.45rem, 3.9vw, 4rem);
  }

  .hero-subtitle {
    max-width: 590px;
    margin: 18px 0 22px;
  }

  .hero-image-visual {
    min-height: 520px;
    width: 100%;
    justify-content: center;
  }

  .hero-product-image {
    width: min(900px, 112%);
    max-height: 500px;
  }

  .bearing-orbit {
    left: 76%;
    top: 52%;
  }
}

/* HOME hero copy cleanup: concise hierarchy without crowding the product image. */
.hero-copy h1 {
  text-wrap: balance;
}

.hero-subtitle {
  text-wrap: pretty;
}

.hero-proof-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.hero-proof-pills span {
  justify-content: center;
  min-height: 48px;
  border-radius: 8px;
  padding: 9px 10px;
  text-align: center;
}

.hero-proof-pills strong {
  white-space: nowrap;
}

@media (min-width: 961px) {
  .hero-proof-pills {
    max-width: 1120px;
  }
}

@media (max-width: 620px) {
  .hero-copy h1 {
    font-size: clamp(1.72rem, 8vw, 2.3rem);
  }

  .hero-subtitle {
    margin: 12px auto 16px;
    font-size: 0.94rem;
    line-height: 1.45;
  }

  .hero-proof-pills {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .hero-proof-pills span {
    display: grid;
    gap: 2px;
    min-height: 58px;
    padding: 8px 6px;
    font-size: 0.95rem;
  }

  .hero-proof-pills strong {
    display: block;
    font-size: 0.95rem;
  }
}

/* Lightweight motion polish: restrained industrial feel without changing layout or content. */
:root {
  --motion-blue: #2980b9;
  --motion-shadow: 0 18px 42px rgba(30, 42, 58, 0.13);
  --motion-shadow-strong: 0 22px 54px rgba(30, 42, 58, 0.18);
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms ease, transform 620ms ease;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.page-hero::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 18% 22%, rgba(41, 128, 185, 0.18), transparent 34%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
  content: "";
  opacity: 0.45;
  pointer-events: none;
  animation: subtleGridDrift 18s linear infinite;
}

@keyframes subtleGridDrift {
  from {
    background-position: 0 0, 0 0, 0 0;
  }

  to {
    background-position: 42px 42px, 42px 42px, 0 0;
  }
}

.core-value-card,
.feature-card,
.service-card,
.product-card,
.process-card,
.pricing-card,
.highlight-card,
.case-tile,
.industry-card,
.faq-item,
.proof-grid div,
.contact-info-card,
.contact-page-form,
.report-sample-card,
.roi-calculator,
.series-panel,
.insight-list article,
.spotlight-grid,
.table-wrap {
  position: relative;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.core-value-card::after,
.feature-card::after,
.service-card::after,
.product-card::after,
.process-card::after,
.pricing-card::after,
.highlight-card::after,
.case-tile::after,
.industry-card::after,
.faq-item::after,
.proof-grid div::after,
.contact-info-card::after,
.contact-page-form::after,
.report-sample-card::after,
.roi-calculator::after,
.series-panel::after,
.insight-list article::after,
.spotlight-grid::after,
.table-wrap::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 0%, rgba(41, 128, 185, 0.14), transparent 38%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .core-value-card:hover,
  .feature-card:hover,
  .service-card:hover,
  .product-card:hover,
  .process-card:hover,
  .pricing-card:hover,
  .highlight-card:hover,
  .case-tile:hover,
  .industry-card:hover,
  .faq-item:hover,
  .proof-grid div:hover,
  .contact-info-card:hover,
  .contact-page-form:hover,
  .report-sample-card:hover,
  .roi-calculator:hover,
  .series-panel:hover,
  .insight-list article:hover,
  .spotlight-grid:hover,
  .table-wrap:hover {
    border-color: rgba(41, 128, 185, 0.42);
    box-shadow: var(--motion-shadow-strong);
    transform: translateY(-5px);
  }

  .core-value-card:hover::after,
  .feature-card:hover::after,
  .service-card:hover::after,
  .product-card:hover::after,
  .process-card:hover::after,
  .pricing-card:hover::after,
  .highlight-card:hover::after,
  .case-tile:hover::after,
  .industry-card:hover::after,
  .faq-item:hover::after,
  .proof-grid div:hover::after,
  .contact-info-card:hover::after,
  .contact-page-form:hover::after,
  .report-sample-card:hover::after,
  .roi-calculator:hover::after,
  .series-panel:hover::after,
  .insight-list article:hover::after,
  .spotlight-grid:hover::after,
  .table-wrap:hover::after {
    opacity: 1;
  }
}

.primary-button,
.secondary-button,
.anchor-button,
.text-link,
.series-tab {
  position: relative;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}

.primary-button::after {
  position: absolute;
  top: -70%;
  left: -38%;
  width: 34%;
  height: 240%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  content: "";
  transform: rotate(18deg);
  transition: left 520ms ease;
}

.primary-button:hover::after {
  left: 118%;
}

.primary-button:hover,
.secondary-button:hover,
.anchor-button:hover,
.series-tab:hover {
  box-shadow: 0 12px 28px rgba(30, 42, 58, 0.18);
  transform: translateY(-2px);
}

.secondary-button:hover,
.anchor-button:hover {
  border-color: rgba(255, 255, 255, 0.78);
}

.highlight-metric,
.core-value-metric,
.page-hero-stats strong,
.hero-proof-pills strong,
.price-line,
.roi-summary-grid strong,
.case-metrics span,
.proof-grid span,
.report-status-row strong,
.result-value,
.package-range {
  font-weight: 900;
  letter-spacing: 0;
  transition: color 180ms ease, text-shadow 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .highlight-card:hover .highlight-metric,
  .core-value-card:hover .core-value-metric,
  .pricing-card:hover .price-line,
  .case-tile:hover .case-metrics span,
  .proof-grid div:hover span,
  .roi-summary-grid > div:hover strong,
  .report-status-row div:hover strong {
    color: #d9781c;
    text-shadow: 0 0 18px rgba(230, 126, 34, 0.24);
  }
}

.spec-table thead th,
.spec-table th {
  background: rgba(30, 42, 58, 0.035);
}

.spec-table tbody tr,
.product-table tbody tr {
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.spec-table tbody tr:hover,
.product-table tbody tr:hover {
  background: rgba(41, 128, 185, 0.055);
}

.spec-table td,
.product-table td {
  font-weight: 600;
}

.faq-item:hover {
  background: #fbfdff;
}

.floating-whatsapp {
  animation: whatsappBreath 3.6s ease-in-out infinite;
}

@keyframes whatsappBreath {
  0%,
  100% {
    box-shadow: 0 14px 34px rgba(30, 42, 58, 0.28), 0 0 0 0 rgba(37, 211, 102, 0.18);
  }

  50% {
    box-shadow: 0 16px 38px rgba(30, 42, 58, 0.31), 0 0 0 7px rgba(37, 211, 102, 0);
  }
}

@media (max-width: 768px) {
  .reveal-on-scroll {
    transform: translateY(12px);
    transition-duration: 420ms;
  }

  .page-hero::before {
    animation: none;
    opacity: 0.28;
  }

  .floating-whatsapp {
    animation-duration: 4.8s;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Inner-page hero blueprint backgrounds: decorative only, low opacity for readability. */
.inner-hero {
  isolation: isolate;
}

.inner-hero::before {
  z-index: 0;
  background:
    linear-gradient(rgba(105, 185, 225, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 185, 225, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 74% 46%, rgba(41, 128, 185, 0.22), transparent 34%),
    linear-gradient(110deg, rgba(255, 255, 255, 0.04), transparent 45%);
  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
  opacity: 0.55;
  animation: innerHeroGridDrift 26s linear infinite;
}

.inner-hero::after {
  position: absolute;
  top: 50%;
  right: max(-40px, calc((100vw - 1120px) / 2 - 70px));
  z-index: 0;
  width: min(520px, 45vw);
  aspect-ratio: 1.35;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
  opacity: 0.16;
  pointer-events: none;
  transform: translateY(-50%);
  animation: innerHeroFloat 9s ease-in-out infinite;
}

.inner-hero .section-inner {
  position: relative;
  z-index: 2;
}

.hero-predictive::after {
  background-image: url("data:image/svg+xml,%3Csvg width='620' height='420' viewBox='0 0 620 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2369c7f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='112' cy='206' r='42'/%3E%3Ccircle cx='112' cy='206' r='11'/%3E%3Ccircle cx='292' cy='142' r='30'/%3E%3Ccircle cx='470' cy='216' r='52'/%3E%3Cpath d='M154 205 C210 142 232 141 262 142 M322 145 C378 154 410 188 430 209'/%3E%3Cpath d='M70 302 C104 242 131 356 160 296 S218 284 248 306 308 346 342 280 400 190 448 220 514 278 560 234'/%3E%3Cpath d='M60 106 H160 M198 106 H270 M306 106 H520' opacity='.65'/%3E%3Cpath d='M82 110 v-26 M292 145 v-62 M470 216 v-92' opacity='.48'/%3E%3C/g%3E%3Cg fill='%2369c7f0'%3E%3Ccircle cx='60' cy='106' r='4'/%3E%3Ccircle cx='184' cy='106' r='4'/%3E%3Ccircle cx='292' cy='142' r='4'/%3E%3Ccircle cx='470' cy='216' r='5'/%3E%3Ccircle cx='560' cy='234' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

.hero-products::after {
  width: min(600px, 48vw);
  background-image: url("data:image/svg+xml,%3Csvg width='650' height='460' viewBox='0 0 650 460' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2369c7f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='352' cy='230' r='126'/%3E%3Ccircle cx='352' cy='230' r='84'/%3E%3Ccircle cx='352' cy='230' r='28'/%3E%3Ccircle cx='352' cy='126' r='28'/%3E%3Ccircle cx='442' cy='282' r='28'/%3E%3Ccircle cx='262' cy='282' r='28'/%3E%3Cpath d='M198 230 H80 M506 230 H598 M352 76 V28 M352 384 V432' opacity='.68'/%3E%3Cpath d='M210 94 L156 42 M494 94 L548 42 M210 366 L156 418 M494 366 L548 418' opacity='.55'/%3E%3Crect x='154' y='70' width='396' height='320' rx='24' opacity='.38'/%3E%3Cpath d='M126 146 h68 m316 0 h74 M126 314 h68 m316 0 h74' opacity='.54'/%3E%3Ccircle cx='172' cy='112' r='12'/%3E%3Ccircle cx='532' cy='112' r='12'/%3E%3Ccircle cx='172' cy='348' r='12'/%3E%3Ccircle cx='532' cy='348' r='12'/%3E%3C/g%3E%3C/svg%3E");
}

.hero-roi::after {
  background-image: url("data:image/svg+xml,%3Csvg width='620' height='420' viewBox='0 0 620 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2369c7f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M76 330 H552 M76 330 V70'/%3E%3Cpath d='M96 286 L190 244 L268 260 L354 184 L446 142 L536 94'/%3E%3Cpath d='M104 134 H548 M104 194 H548 M104 254 H548' opacity='.34'/%3E%3Cpath d='M170 330 V250 M260 330 V270 M350 330 V206 M440 330 V166 M530 330 V116' opacity='.5'/%3E%3Ccircle cx='190' cy='244' r='7'/%3E%3Ccircle cx='268' cy='260' r='7'/%3E%3Ccircle cx='354' cy='184' r='7'/%3E%3Ccircle cx='446' cy='142' r='7'/%3E%3Ccircle cx='536' cy='94' r='7'/%3E%3Ccircle cx='500' cy='250' r='54' opacity='.42'/%3E%3Cpath d='M468 250 h64 M500 218 v64' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
}

.hero-about::after {
  width: min(560px, 46vw);
  background-image: url("data:image/svg+xml,%3Csvg width='620' height='430' viewBox='0 0 620 430' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2369c7f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='340' cy='214' r='138'/%3E%3Ccircle cx='340' cy='214' r='92' opacity='.72'/%3E%3Ccircle cx='340' cy='214' r='36'/%3E%3Cpath d='M122 214 H202 M478 214 H574 M340 76 V28 M340 352 V404' opacity='.55'/%3E%3Cpath d='M210 126 C252 72 422 72 470 126 M210 302 C260 356 420 356 470 302' opacity='.46'/%3E%3Ccircle cx='186' cy='214' r='14'/%3E%3Ccircle cx='494' cy='214' r='14'/%3E%3Cpath d='M136 96 h84 M136 126 h54 M488 318 h86 M520 348 h54' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
}

.hero-contact::after {
  background-image: url("data:image/svg+xml,%3Csvg width='620' height='420' viewBox='0 0 620 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2369c7f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='118' cy='210' r='34'/%3E%3Ccircle cx='292' cy='116' r='28'/%3E%3Ccircle cx='318' cy='298' r='42'/%3E%3Ccircle cx='500' cy='210' r='54'/%3E%3Cpath d='M150 198 C202 160 236 134 266 124 M304 145 C320 184 318 238 318 256 M358 288 C414 272 454 244 470 226 M151 225 C198 258 238 282 276 292'/%3E%3Cpath d='M78 86 H180 M214 86 H370 M408 86 H548 M86 346 H226 M268 346 H526' opacity='.46'/%3E%3Cpath d='M500 156 v-54 M500 264 v58 M446 210 h-66 M554 210 h46' opacity='.42'/%3E%3C/g%3E%3Cg fill='%2369c7f0'%3E%3Ccircle cx='118' cy='210' r='5'/%3E%3Ccircle cx='292' cy='116' r='5'/%3E%3Ccircle cx='318' cy='298' r='5'/%3E%3Ccircle cx='500' cy='210' r='6'/%3E%3C/g%3E%3C/svg%3E");
}

@keyframes innerHeroGridDrift {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0;
  }

  to {
    background-position: 48px 48px, 48px 48px, 0 0, 0 0;
  }
}

@keyframes innerHeroFloat {
  0%,
  100% {
    transform: translateY(-50%);
  }

  50% {
    transform: translateY(calc(-50% - 8px));
  }
}

@media (max-width: 768px) {
  .inner-hero::before {
    opacity: 0.34;
    animation: none;
  }

  .inner-hero::after {
    right: -150px;
    width: 360px;
    opacity: 0.07;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inner-hero::before,
  .inner-hero::after {
    animation: none !important;
  }
}

/* Higher-quality inner hero media layer.
   Replacement point: swap assets/img/hero-planetary-gearbox-exploded-cutout.png
   with approved real product / inspection / factory photos when available. */
.inner-hero::before {
  background:
    linear-gradient(rgba(105, 185, 225, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 185, 225, 0.065) 1px, transparent 1px),
    radial-gradient(circle at 78% 42%, rgba(41, 128, 185, 0.24), transparent 34%),
    linear-gradient(90deg, rgba(30, 42, 58, 0.2) 0%, rgba(30, 42, 58, 0.05) 46%, rgba(30, 42, 58, 0.34) 100%);
}

.inner-hero::after {
  right: max(18px, calc((100vw - 1120px) / 2 - 70px));
  width: min(720px, 54vw);
  aspect-ratio: 2.65;
  background-image:
    linear-gradient(90deg, rgba(30, 42, 58, 0) 0%, rgba(30, 42, 58, 0.08) 42%, rgba(30, 42, 58, 0.26) 100%),
    url("assets/img/hero-planetary-gearbox-exploded-cutout.png");
  background-position: center, center;
  background-size: contain, contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 26px 42px rgba(0, 0, 0, 0.38)) saturate(0.9) contrast(1.08);
  opacity: 0.34;
}

.hero-products::after {
  right: max(0px, calc((100vw - 1120px) / 2 - 108px));
  width: min(840px, 62vw);
  opacity: 0.48;
  filter: drop-shadow(0 30px 52px rgba(0, 0, 0, 0.46)) saturate(0.95) contrast(1.1);
}

.hero-products::before {
  background:
    linear-gradient(rgba(105, 185, 225, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 185, 225, 0.075) 1px, transparent 1px),
    radial-gradient(circle at 78% 48%, rgba(230, 126, 34, 0.1), transparent 26%),
    radial-gradient(circle at 76% 44%, rgba(41, 128, 185, 0.28), transparent 36%),
    linear-gradient(90deg, rgba(30, 42, 58, 0.22) 0%, rgba(30, 42, 58, 0.04) 48%, rgba(30, 42, 58, 0.42) 100%);
}

.hero-predictive::after {
  opacity: 0.26;
  background-image:
    url("data:image/svg+xml,%3Csvg width='720' height='250' viewBox='0 0 720 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2369c7f0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 144 C82 72 132 214 192 142 S306 66 362 144 472 224 548 122 642 94 700 138' opacity='.74'/%3E%3Cpath d='M20 178 C96 132 150 168 218 160 S346 116 420 166 554 202 700 146' opacity='.38'/%3E%3Cpath d='M58 64 h112 m48 0 h118 m48 0 h180' opacity='.35'/%3E%3C/g%3E%3Cg fill='%2369c7f0' opacity='.9'%3E%3Ccircle cx='192' cy='142' r='5'/%3E%3Ccircle cx='362' cy='144' r='5'/%3E%3Ccircle cx='548' cy='122' r='5'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(90deg, rgba(30, 42, 58, 0) 0%, rgba(30, 42, 58, 0.16) 100%),
    url("assets/img/hero-planetary-gearbox-exploded-cutout.png");
  background-size: 82% auto, contain, contain;
  background-position: 60% 46%, center, center;
}

.hero-roi::after {
  opacity: 0.24;
  background-image:
    url("data:image/svg+xml,%3Csvg width='720' height='300' viewBox='0 0 720 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2369c7f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M48 246 H672 M48 246 V42' opacity='.7'/%3E%3Cpath d='M78 214 L170 190 L256 198 L352 142 L454 108 L632 70'/%3E%3Cpath d='M78 92 H650 M78 142 H650 M78 192 H650' opacity='.2'/%3E%3Cpath d='M162 246 V194 M258 246 V200 M354 246 V146 M450 246 V112 M546 246 V90' opacity='.32'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(90deg, rgba(30, 42, 58, 0.03), rgba(30, 42, 58, 0.18)),
    url("assets/img/hero-planetary-gearbox-exploded-cutout.png");
  background-size: 82% auto, contain, contain;
  background-position: 60% 48%, center, center;
}

.hero-about::after {
  opacity: 0.2;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.34)) saturate(0.78) contrast(1.04);
}

.hero-contact::after {
  opacity: 0.22;
  background-image:
    url("data:image/svg+xml,%3Csvg width='720' height='260' viewBox='0 0 720 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2369c7f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='118' cy='138' r='24'/%3E%3Ccircle cx='306' cy='84' r='20'/%3E%3Ccircle cx='456' cy='164' r='28'/%3E%3Ccircle cx='622' cy='118' r='34'/%3E%3Cpath d='M142 132 C202 112 246 90 286 86 M326 92 C366 112 408 144 432 156 M484 156 C532 144 574 126 590 120 M142 150 C226 186 342 198 428 174' opacity='.74'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(90deg, rgba(30, 42, 58, 0.02), rgba(30, 42, 58, 0.18)),
    url("assets/img/hero-planetary-gearbox-exploded-cutout.png");
  background-size: 78% auto, contain, contain;
  background-position: 60% 48%, center, center;
}

@media (max-width: 768px) {
  .inner-hero::after {
    right: -190px;
    width: 560px;
    opacity: 0.12;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.28)) saturate(0.8) contrast(1.02);
  }

  .hero-products::after {
    opacity: 0.18;
  }
}

/* Inner page banner reset: remove decorative background images/elements.
   Home hero is not affected because it does not use .inner-hero. */
.inner-hero::before,
.inner-hero::after {
  display: none !important;
  background: none !important;
  content: none !important;
  animation: none !important;
}

/* PRODUCT page hero: full range planetary gearbox matrix. */
.product-hero {
  min-height: 680px;
  overflow: hidden;
  background:
    radial-gradient(circle at 58% 58%, rgba(0, 229, 255, 0.14), transparent 30%),
    radial-gradient(circle at 86% 26%, rgba(41, 128, 185, 0.15), transparent 34%),
    linear-gradient(135deg, #050b18 0%, #0a192f 58%, #06101e 100%);
  padding: 0;
}

.product-hero::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(160, 176, 192, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 176, 192, 0.055) 1px, transparent 1px),
    linear-gradient(118deg, transparent 0 48%, rgba(0, 229, 255, 0.08) 48.2%, transparent 48.8% 100%);
  background-size: 58px 58px, 58px 58px, 100% 100%;
  content: "";
  opacity: 0.72;
  pointer-events: none;
  animation: productHeroGridMove 32s linear infinite;
}

.product-hero::after {
  position: absolute;
  inset: auto 4% -26% 22%;
  height: 54%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 229, 255, 0.16), transparent 66%);
  content: "";
  filter: blur(24px);
  pointer-events: none;
}

.product-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) minmax(0, 1.7fr);
  align-items: center;
  gap: clamp(28px, 4vw, 58px);
  width: min(1440px, calc(100% - 64px));
  min-height: 680px;
  padding: 54px 0 50px;
}

.product-hero-copy {
  position: relative;
  z-index: 5;
  max-width: 560px;
  text-shadow: 0 16px 42px rgba(0, 0, 0, 0.58);
}

.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: rgba(217, 231, 244, 0.68);
  font-size: 0.95rem;
}

.breadcrumb a {
  color: rgba(217, 231, 244, 0.76);
}

.breadcrumb a:hover {
  color: #00e5ff;
}

.product-hero .eyebrow {
  color: #00e5ff;
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.28);
}

.product-hero h1 {
  max-width: 620px;
  color: #f7fbff;
  font-size: clamp(2.7rem, 5vw, 5.7rem);
  line-height: 0.98;
}

.product-hero p:not(.eyebrow) {
  max-width: 560px;
  color: #d9e7f4;
}

.product-hero-seo {
  color: rgba(217, 231, 244, 0.72) !important;
  font-size: 0.94rem !important;
}

.product-hero .primary-button {
  background: #00e5ff;
  color: #06101f;
  box-shadow: 0 18px 38px rgba(0, 229, 255, 0.22);
}

.product-hero .primary-button:hover {
  background: #8befff;
  color: #06101f;
}

.product-hero .secondary-button {
  border-color: rgba(0, 229, 255, 0.46);
  background: rgba(0, 229, 255, 0.08);
  color: #ecfbff;
}

.product-hero-stage {
  position: relative;
  min-height: 520px;
  perspective: 1400px;
}

.product-hero-stage::before {
  position: absolute;
  left: 4%;
  right: 0;
  bottom: 10%;
  height: 30%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(0, 229, 255, 0.18), transparent 64%),
    linear-gradient(90deg, transparent, rgba(160, 176, 192, 0.1), transparent);
  content: "";
  filter: blur(20px);
}

.product-hero-unit {
  position: absolute;
  transform-style: preserve-3d;
  transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease;
}

.product-hero-unit img {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 38px 34px rgba(0, 0, 0, 0.64))
    drop-shadow(0 0 30px rgba(0, 229, 255, 0.18))
    grayscale(0.08)
    saturate(0.66)
    contrast(1.12);
  transform: rotateY(-12deg) rotateX(6deg);
}

.product-hero-unit::after {
  position: absolute;
  inset: 16% 18% 20%;
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 50%;
  content: "";
  opacity: 0;
  box-shadow: 0 0 42px rgba(0, 229, 255, 0.22);
  transition: opacity 220ms ease;
  pointer-events: none;
}

.product-hero-unit-compact {
  left: 0;
  top: 35%;
  z-index: 1;
  width: min(390px, 38vw);
  opacity: 0.86;
  transform: translateY(10px) rotateZ(-3deg) scale(0.78);
}

.product-hero-unit-torque {
  left: 19%;
  top: 22%;
  z-index: 3;
  width: min(620px, 52vw);
  transform: rotateZ(-1deg) scale(1);
}

.product-hero-unit-precision {
  right: -2%;
  top: 38%;
  z-index: 2;
  width: min(430px, 39vw);
  opacity: 0.88;
  transform: translateY(18px) rotateZ(4deg) scale(0.82);
}

.product-hero-stage:hover .product-hero-unit {
  opacity: 0.8;
}

.product-hero-stage .product-hero-unit:hover {
  z-index: 6;
  opacity: 1;
  filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.18));
  transform: translateY(-6px) scale(1.03);
}

.product-hero-unit:hover::after {
  opacity: 1;
}

.holo-label {
  position: absolute;
  z-index: 8;
  min-width: 190px;
  border: 1px solid rgba(0, 229, 255, 0.36);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(5, 11, 24, 0.66)),
    rgba(5, 11, 24, 0.5);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.32),
    inset 0 0 24px rgba(0, 229, 255, 0.08);
  color: #e9fbff;
  padding: 13px 14px;
  backdrop-filter: blur(12px);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.holo-label::before {
  position: absolute;
  left: 12px;
  top: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff6600;
  content: "";
  box-shadow: 0 0 12px rgba(255, 102, 0, 0.55);
}

.holo-label::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0 42%, rgba(0, 229, 255, 0.16) 43%, transparent 45% 100%);
  content: "";
  opacity: 0;
  pointer-events: none;
  animation: productLabelScan 2.8s linear infinite;
}

.holo-label strong,
.holo-label span,
.holo-label small {
  display: block;
  padding-left: 14px;
}

.holo-label strong {
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 0.95rem;
}

.holo-label span {
  color: rgba(217, 231, 244, 0.88);
  font-size: 0.95rem;
  line-height: 1.45;
}

.holo-label small {
  margin-top: 6px;
  color: #00e5ff;
  font-size: 0.9rem;
  font-weight: 800;
}

.service-ready {
  color: #dffcff !important;
}

.product-hero-unit:hover .holo-label {
  border-color: rgba(0, 229, 255, 0.72);
  box-shadow:
    0 20px 52px rgba(0, 0, 0, 0.42),
    0 0 30px rgba(0, 229, 255, 0.16);
  transform: translateY(-4px) scale(1.03);
}

.product-hero-unit:hover .holo-label::after {
  opacity: 1;
}

.product-hero-unit-compact .holo-label {
  left: -6%;
  top: -8%;
}

.product-hero-unit-torque .holo-label {
  right: 8%;
  top: -12%;
}

.product-hero-unit-precision .holo-label {
  right: 0;
  bottom: -8%;
}

@keyframes productHeroGridMove {
  from {
    background-position: 0 0, 0 0, 0 0;
  }

  to {
    background-position: 58px 58px, 58px 58px, 0 0;
  }
}

@keyframes productLabelScan {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(100%);
  }
}

@media (max-width: 1100px) {
  .product-hero-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .product-hero-copy {
    max-width: 760px;
  }

  .product-hero-stage {
    min-height: 440px;
  }

  .product-hero-unit-compact {
    width: min(380px, 44vw);
  }

  .product-hero-unit-torque {
    left: 18%;
    width: min(600px, 62vw);
  }

  .product-hero-unit-precision {
    width: min(390px, 44vw);
  }
}

@media (max-width: 720px) {
  .product-hero {
    min-height: 820px;
  }

  .product-hero-inner {
    width: min(100% - 32px, 1440px);
    min-height: 820px;
    padding: 34px 0 38px;
  }

  .product-hero h1 {
    font-size: clamp(2.2rem, 11vw, 3.35rem);
  }

  .product-hero-stage {
    min-height: 430px;
    overflow: visible;
  }

  .product-hero-unit-compact,
  .product-hero-unit-precision {
    opacity: 0.58;
  }

  .product-hero-unit-compact {
    left: -36%;
    top: 39%;
    width: 86vw;
    transform: scale(0.62);
  }

  .product-hero-unit-torque {
    left: -10%;
    top: 18%;
    width: 128vw;
  }

  .product-hero-unit-precision {
    right: -44%;
    top: 45%;
    width: 90vw;
    transform: scale(0.62);
  }

  .product-hero-unit-compact .holo-label,
  .product-hero-unit-precision .holo-label {
    display: none;
  }

  .product-hero-unit-torque .holo-label {
    left: 16%;
    right: auto;
    top: auto;
    bottom: -2%;
    min-width: 210px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-hero::before,
  .holo-label::after {
    animation: none !important;
  }
}

/* Application Cases hero: photorealistic 2x2 industrial scenes with health monitoring overlay.
   Replaceable background asset:
   assets/img/application-cases-hero-industrial.png
   Future recommended real assets:
   assets/img/application-cobot.jpg, application-ct-machine.jpg, application-agv.jpg, application-wind-pitch.jpg */
.application-hero {
  min-height: 640px;
  overflow: hidden;
  background: #050b18;
  padding: 0;
}

.application-hero::before {
  position: absolute;
  inset: 0;
  display: block !important;
  background:
    linear-gradient(90deg, rgba(5, 11, 24, 0.96) 0%, rgba(5, 11, 24, 0.86) 30%, rgba(5, 11, 24, 0.54) 54%, rgba(5, 11, 24, 0.18) 100%),
    linear-gradient(180deg, rgba(5, 11, 24, 0.18), rgba(5, 11, 24, 0.42)),
    url("assets/img/new/application-cases-banner-20260619.png");
  background-position: center, center, 58% center;
  background-size: cover, cover, 92% auto;
  background-repeat: no-repeat;
  content: "" !important;
  opacity: 1;
  pointer-events: none;
  animation: applicationHeroDrift 18s ease-in-out infinite;
}

.application-hero::after {
  position: absolute;
  inset: 0;
  display: block !important;
  background:
    linear-gradient(rgba(0, 229, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 24% 46%, rgba(0, 229, 255, 0.13), transparent 30%);
  background-size: 54px 54px, 54px 54px, 100% 100%;
  content: "" !important;
  opacity: 0.8;
  pointer-events: none;
}

.application-hero .section-inner {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  width: min(1440px, calc(100% - 64px));
  min-height: 640px;
  padding: 70px 0;
}

.application-hero .section-inner::before {
  position: absolute;
  left: -48px;
  top: 50%;
  z-index: -1;
  width: min(700px, 68vw);
  height: 74%;
  border: 1px solid rgba(0, 229, 255, 0.14);
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(5, 11, 24, 0.72), rgba(5, 11, 24, 0.36));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
  content: "";
  transform: translateY(-50%);
  backdrop-filter: blur(8px);
}

.application-hero h1 {
  max-width: 660px;
  color: #f7fbff;
  font-size: clamp(3rem, 5vw, 5.9rem);
  line-height: 0.98;
  text-shadow: 0 20px 52px rgba(0, 0, 0, 0.68);
}

.application-hero p:not(.eyebrow) {
  max-width: 720px;
  margin-top: 20px;
  color: #d9e7f4;
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  text-shadow: 0 14px 34px rgba(0, 0, 0, 0.68);
}

.application-hero .primary-button {
  background: #00e5ff;
  color: #06101f;
  box-shadow: 0 18px 38px rgba(0, 229, 255, 0.22);
}

.application-hero .primary-button:hover {
  background: #8befff;
  color: #06101f;
}

.application-hero .secondary-button {
  border-color: rgba(0, 229, 255, 0.46);
  background: rgba(0, 229, 255, 0.08);
  color: #ecfbff;
}

@keyframes applicationHeroDrift {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.025);
  }
}

@media (max-width: 768px) {
  .application-hero,
  .application-hero .section-inner {
    min-height: 600px;
  }

  .application-hero::before {
    background:
      linear-gradient(180deg, rgba(5, 11, 24, 0.92) 0%, rgba(5, 11, 24, 0.78) 50%, rgba(5, 11, 24, 0.62) 100%),
      url("assets/img/new/application-cases-banner-20260619.png");
    background-position: center, 56% center;
    background-size: cover, cover;
    background-repeat: no-repeat;
    opacity: 0.92;
    animation: none;
  }

  .application-hero::after {
    opacity: 0.42;
  }

  .application-hero .section-inner {
    width: min(100% - 32px, 1440px);
    padding: 48px 0;
  }

  .application-hero .section-inner::before {
    left: -18px;
    width: calc(100% + 36px);
    height: 78%;
  }

  .application-hero h1 {
    font-size: clamp(2.35rem, 12vw, 3.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .application-hero::before {
    animation: none !important;
  }
}

/* Homepage image-based hero supplied by user.
   The source image is not edited; CSS keeps its original ratio in the banner. */
.home-image-hero {
  --hero-pointer-x: 62%;
  --hero-pointer-y: 48%;
  --hero-shift-x: 0px;
  --hero-shift-y: 0px;
  position: relative;
  isolation: isolate;
  width: min(calc(100% - 50px), 1760px);
  min-height: clamp(600px, 74vh, 740px);
  max-height: 760px;
  height: auto;
  margin: 12px auto 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 229, 255, 0.34);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(5, 11, 24, 0.34) 0%, rgba(5, 11, 24, 0.24) 48%, rgba(5, 11, 24, 0.56) 100%),
    linear-gradient(180deg, rgba(5, 11, 24, 0.68), rgba(5, 11, 24, 0.36)),
    url("assets/img/home-precision-gear-predictive-banner-clean.png"),
    radial-gradient(circle at 18% 24%, rgba(0, 229, 255, 0.13), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(87, 99, 255, 0.12), transparent 34%),
    linear-gradient(135deg, #050b18 0%, #0a192f 58%, #06101f 100%);
  background-position: center center, center center, center center, center center, center center, center center;
  background-size: cover, cover, cover, cover, cover, cover;
  background-repeat: no-repeat;
  color: #ffffff;
  perspective: 1200px;
  box-shadow:
    0 26px 72px rgba(0, 0, 0, 0.46),
    0 48px 116px rgba(0, 229, 255, 0.22),
    0 16px 42px rgba(41, 128, 185, 0.18),
    0 0 0 1px rgba(0, 229, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -2px 0 rgba(0, 229, 255, 0.36);
  transform: translateY(0);
  animation:
    heroPanelFloat 8s ease-in-out infinite,
    heroBackgroundFloat 12s ease-in-out infinite,
    heroPanelGlow 7.5s ease-in-out infinite;
  will-change: transform, background-position, box-shadow;
}

.home-image-hero::before,
.home-image-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.home-image-hero::before {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 101%, rgba(0, 229, 255, 0.34), rgba(0, 123, 255, 0.12) 30%, transparent 60%),
    linear-gradient(90deg, transparent 0%, rgba(0, 229, 255, 0.12) 18%, rgba(180, 245, 255, 0.16) 50%, rgba(0, 229, 255, 0.12) 82%, transparent 100%),
    radial-gradient(ellipse at 37% 52%, rgba(205, 250, 255, 0.3), transparent 13%),
    radial-gradient(ellipse at 36% 54%, rgba(0, 229, 255, 0.28), transparent 28%),
    radial-gradient(circle at var(--hero-pointer-x) var(--hero-pointer-y), rgba(255, 255, 255, 0.16), transparent 9%),
    linear-gradient(110deg, transparent 0%, rgba(0, 229, 255, 0.08) 34%, rgba(180, 245, 255, 0.24) 47%, rgba(0, 229, 255, 0.1) 56%, transparent 68%),
    linear-gradient(18deg, transparent 0%, rgba(0, 229, 255, 0.12) 48%, transparent 58%),
    radial-gradient(circle at 72% 42%, rgba(0, 229, 255, 0.14), transparent 24%),
    radial-gradient(circle at 32% 52%, rgba(120, 215, 255, 0.18), transparent 24%);
  mix-blend-mode: screen;
  opacity: 0.84;
  transform: translate3d(calc(-3% + var(--hero-shift-x)), var(--hero-shift-y), 0) scale(1.04);
  transform-origin: 50% 50%;
  animation: heroImageFloat3d 8.5s ease-in-out infinite, productGlowBreath 6.8s ease-in-out infinite !important;
  transition: opacity 220ms ease, filter 220ms ease;
  will-change: transform, opacity;
}

.home-image-hero::after {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 96%, rgba(0, 229, 255, 0.2), rgba(0, 70, 130, 0.12) 28%, transparent 58%),
    linear-gradient(90deg, rgba(0, 229, 255, 0.1), transparent 22%, transparent 78%, rgba(0, 229, 255, 0.1)),
    radial-gradient(ellipse at 36% 58%, rgba(0, 0, 0, 0.3), transparent 24%),
    radial-gradient(ellipse at 38% 48%, rgba(0, 229, 255, 0.18), transparent 34%),
    radial-gradient(ellipse at 72% 62%, rgba(0, 0, 0, 0.42), transparent 36%),
    radial-gradient(circle at 78% 72%, rgba(0, 229, 255, 0.07), transparent 36%),
    linear-gradient(90deg, rgba(5, 11, 24, 0.04), transparent 36%, rgba(5, 11, 24, 0.16)),
    linear-gradient(180deg, rgba(5, 11, 24, 0.02), rgba(5, 11, 24, 0.08));
  box-shadow:
    inset 0 20px 54px rgba(5, 11, 24, 0.12),
    inset 0 -34px 86px rgba(5, 11, 24, 0.18),
    inset 0 0 0 1px rgba(0, 229, 255, 0.28),
    inset 0 -2px 0 rgba(0, 229, 255, 0.34);
  opacity: 0.7;
  animation: heroDepthBreath 7.8s ease-in-out infinite, dataLayerDrift 15s ease-in-out infinite !important;
  transition: opacity 220ms ease, filter 220ms ease;
}

.home-image-hero.is-hero-hovering::before,
.home-image-hero:hover::before {
  opacity: 0.92;
  filter: saturate(1.18);
  animation-duration: 5.2s !important;
}

.home-image-hero.is-hero-hovering::after,
.home-image-hero:hover::after {
  opacity: 0.86;
  filter: blur(0.4px) saturate(1.12);
  animation-duration: 5.8s !important;
}

.home-image-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: end;
  justify-items: end;
  width: min(1440px, calc(100% - 64px));
  min-height: clamp(600px, 74vh, 740px);
  max-height: 760px;
  height: auto;
  padding: clamp(46px, 6vh, 72px) 0 clamp(34px, 5vh, 64px);
}

.home-image-hero-inner::before {
  content: "";
  position: absolute;
  right: clamp(0px, 3vw, 56px);
  bottom: clamp(18px, 4vh, 52px);
  z-index: 0;
  width: min(900px, 68vw);
  height: min(390px, 54vh);
  border-radius: 36px;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(2, 8, 18, 0.64), rgba(2, 8, 18, 0.34) 46%, transparent 72%);
  filter: blur(2px);
  pointer-events: none;
}

.home-image-hero-copy {
  position: relative;
  z-index: 1;
  width: min(900px, 58vw);
  max-width: 940px;
  margin: 0 clamp(4px, 1.2vw, 22px) 0 auto;
  text-align: center;
  text-shadow: 0 18px 46px rgba(0, 0, 0, 0.86), 0 3px 16px rgba(0, 0, 0, 0.68);
}

.home-image-hero h1 {
  color: #f7fbff;
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: normal;
}

.home-image-hero .hero-title-line {
  display: block;
  line-height: 1.12;
}

.home-image-hero .hero-title-primary {
  color: #ffffff;
  font-size: clamp(2.55rem, 4.05vw, 4.18rem);
  font-weight: 950;
  white-space: nowrap;
}

.home-image-hero .hero-title-secondary {
  color: #f0f6fb;
  font-size: clamp(2.18rem, 3.45vw, 3.55rem);
  font-weight: 760;
  white-space: nowrap;
}

.home-image-hero .hero-subtitle {
  max-width: 720px;
  margin: clamp(38px, 5vh, 58px) auto 0;
  color: #e0e7ee;
  font-size: clamp(1rem, 1.08vw, 1.16rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
}

.home-image-hero .hero-actions {
  gap: 20px;
  margin-top: 38px;
  justify-content: center;
}

.home-image-hero .primary-button {
  min-width: 180px;
  padding: 12px 28px;
  border-radius: 999px;
  background: #ff7a1a;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 18px 38px rgba(255, 122, 26, 0.28);
}

.home-image-hero .primary-button:hover {
  background: #ff923f;
  color: #ffffff;
}

.home-image-hero .secondary-button {
  min-width: 180px;
  padding: 12px 28px;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.76);
  background: rgba(5, 11, 24, 0.16);
  color: #ffffff;
  font-weight: 800;
}

.home-image-hero .secondary-button:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
}

@media (max-width: 900px) {
  .home-image-hero {
    width: calc(100% - 20px);
    margin-bottom: 20px;
    margin-top: 10px;
    border-color: rgba(0, 229, 255, 0.26);
    border-radius: 14px;
    background:
      linear-gradient(180deg, rgba(5, 11, 24, 0.82) 0%, rgba(5, 11, 24, 0.46) 44%, rgba(5, 11, 24, 0.62) 100%),
      url("assets/img/home-precision-gear-predictive-banner-clean.png");
    background-position: center center, center center;
    background-size: cover, cover;
    background-repeat: no-repeat;
    min-height: clamp(560px, 72vh, 640px);
    max-height: 78vh;
    height: auto;
    animation:
      heroBackgroundFloat 18s ease-in-out infinite,
      heroPanelGlow 10s ease-in-out infinite;
  }

  .home-image-hero::before {
    background:
      radial-gradient(ellipse at 50% 56%, rgba(0, 229, 255, 0.18), transparent 28%),
      radial-gradient(circle at var(--hero-pointer-x) var(--hero-pointer-y), rgba(255, 255, 255, 0.12), transparent 12%),
      linear-gradient(110deg, transparent 0%, rgba(0, 229, 255, 0.1) 40%, rgba(180, 245, 255, 0.2) 50%, transparent 66%),
      radial-gradient(circle at 65% 42%, rgba(0, 229, 255, 0.12), transparent 28%);
    transform: translate3d(calc(-4% + var(--hero-shift-x)), var(--hero-shift-y), 0) scale(1.04);
    opacity: 0.58;
    animation-duration: 14s, 12s !important;
  }

  .home-image-hero::after {
    opacity: 0.48;
    animation-duration: 16s, 18s !important;
  }

  .home-image-hero-inner {
    width: min(100% - 32px, 1440px);
    min-height: inherit;
    max-height: inherit;
    height: auto;
    align-items: end;
    justify-items: start;
    padding-top: 44px;
    padding-bottom: 52px;
  }

  .home-image-hero-inner::before {
    right: auto;
    left: 0;
    bottom: 30px;
    width: min(100%, 520px);
    height: 330px;
    border-radius: 24px;
    background: radial-gradient(ellipse at 35% 68%, rgba(2, 8, 18, 0.72), rgba(2, 8, 18, 0.42) 48%, transparent 78%);
  }

  .home-image-hero-copy {
    width: min(100%, 520px);
    max-width: 520px;
    margin: 0;
    text-align: left;
  }

  .home-image-hero h1 {
    line-height: 1.12;
  }

  .home-image-hero .hero-title-primary {
    font-size: clamp(1.3rem, 6.4vw, 2.72rem);
  }

  .home-image-hero .hero-title-secondary {
    font-size: clamp(1.26rem, 4.8vw, 2rem);
    white-space: normal;
  }

  .home-image-hero .hero-subtitle {
    margin-left: 0;
    margin-top: 30px;
    max-width: 360px;
    padding-right: 12px;
    font-size: 0.95rem;
    line-height: 1.45;
    letter-spacing: 0;
  }

  .home-image-hero .hero-actions {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: min(80%, 350px);
    margin-top: 28px;
    gap: 12px;
  }

  .home-image-hero .hero-actions a {
    width: 100%;
    padding: 12px 18px;
  }
}

@keyframes heroImageFloat3d {
  0%,
  100% {
    opacity: 0.42;
    transform: translate3d(-4%, 0, 0) scale(1.04);
  }

  50% {
    opacity: 0.82;
    transform: translate3d(4%, -1.4%, 18px) scale(1.05);
  }
}

@keyframes heroDepthBreath {
  0%,
  100% {
    opacity: 0.5;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    opacity: 0.82;
    filter: blur(0.6px);
    transform: translate3d(0, -4px, 20px) scale(1.012);
  }
}

@keyframes heroBackgroundFloat {
  0%,
  100% {
    background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
  }

  50% {
    background-position: 50% 50%, 50% 50%, 51.4% 49.4%, 48.8% 50.8%, 51.2% 49.8%, 50% 50%;
  }
}

@keyframes heroPanelFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes heroPanelGlow {
  0%,
  100% {
    border-color: rgba(0, 229, 255, 0.28);
    box-shadow:
      0 24px 68px rgba(0, 0, 0, 0.4),
      0 34px 86px rgba(0, 229, 255, 0.1),
      0 14px 38px rgba(41, 128, 185, 0.13),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04),
      inset 0 -1px 0 rgba(0, 229, 255, 0.16);
  }

  50% {
    border-color: rgba(0, 229, 255, 0.46);
    box-shadow:
      0 30px 82px rgba(0, 0, 0, 0.46),
      0 48px 118px rgba(0, 229, 255, 0.18),
      0 18px 48px rgba(41, 128, 185, 0.18),
      inset 0 0 0 1px rgba(255, 255, 255, 0.06),
      inset 0 -1px 0 rgba(0, 229, 255, 0.26);
  }
}

@keyframes productGlowBreath {
  0%,
  100% {
    filter: saturate(1.02) brightness(1);
  }

  50% {
    filter: saturate(1.22) brightness(1.08);
  }
}

@keyframes dataLayerDrift {
  0%,
  100% {
    background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
  }

  50% {
    background-position: 49% 51%, 51% 49%, 50% 50%, 52% 48%, 48% 50%, 50% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-image-hero,
  .home-image-hero::before,
  .home-image-hero::after {
    animation: none !important;
  }
}

/* Homepage high-end digital twin hero: planetary gearbox + predictive service HUD. */
.hero-digital-twin {
  min-height: max(720px, calc(100vh - 74px));
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 58%, rgba(0, 229, 255, 0.16), transparent 30%),
    radial-gradient(circle at 82% 34%, rgba(41, 128, 185, 0.16), transparent 34%),
    linear-gradient(135deg, #081426 0%, #0a192f 52%, #06101f 100%);
  color: #ffffff;
}

.hero-digital-twin::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(160, 176, 192, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 176, 192, 0.055) 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 42%, rgba(0, 229, 255, 0.08) 42.2%, transparent 42.8% 100%);
  background-size: 56px 56px, 56px 56px, 100% 100%;
  content: "";
  opacity: 0.72;
  pointer-events: none;
  animation: heroGridSlowMove 26s linear infinite;
}

.hero-digital-twin::after {
  position: absolute;
  inset: auto -12% -38% 8%;
  height: 56%;
  background: radial-gradient(ellipse, rgba(0, 229, 255, 0.16), transparent 67%);
  content: "";
  filter: blur(22px);
  pointer-events: none;
}

.hero-digital-twin .hero-cosmos {
  z-index: 0;
  opacity: 0.42;
  mix-blend-mode: screen;
}

.hero-digital-twin .hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.82fr);
  align-items: center;
  gap: clamp(24px, 3.2vw, 48px);
  width: min(1440px, calc(100% - 64px));
  min-height: max(720px, calc(100vh - 74px));
  margin-inline: auto;
  padding: clamp(42px, 6vh, 76px) 0;
  text-align: left;
}

.hero-left {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 610px;
}

.hero-digital-twin .hero-copy {
  position: relative;
  top: auto;
  left: auto;
  z-index: 5;
  width: min(660px, 100%);
  max-width: none;
  margin-top: clamp(8px, 2vh, 22px);
  padding: 0;
  transform: none;
  text-align: left;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.58);
}

.hero-digital-twin .hero-copy .eyebrow {
  color: #00e5ff;
  text-shadow: 0 0 22px rgba(0, 229, 255, 0.26);
}

.hero-digital-twin .hero-copy h1 {
  max-width: 660px;
  margin: 0;
  color: #f7fbff;
  font-size: clamp(2.9rem, 5vw, 5.55rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.hero-digital-twin .hero-subtitle {
  max-width: 600px;
  margin: 24px 0 0;
  color: #d9e7f4;
  font-size: clamp(1.08rem, 1.55vw, 1.42rem);
}

.hero-seo-line {
  max-width: 600px;
  margin-top: 14px;
  color: rgba(217, 231, 244, 0.78);
  font-size: 0.98rem;
}

.hero-digital-twin .hero-actions {
  margin-top: 30px;
}

.hero-digital-twin .primary-button {
  background: #00e5ff;
  color: #06101f;
  box-shadow: 0 18px 38px rgba(0, 229, 255, 0.22);
}

.hero-digital-twin .primary-button:hover {
  background: #8befff;
  color: #06101f;
}

.hero-digital-twin .secondary-button {
  border-color: rgba(0, 229, 255, 0.44);
  background: rgba(0, 229, 255, 0.08);
  color: #ecfbff;
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.08);
}

.hero-digital-twin .hero-image-visual {
  position: absolute;
  left: clamp(24px, 7vw, 128px);
  right: -2%;
  bottom: -6%;
  display: block;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  perspective: 1300px;
  pointer-events: none;
}

.hero-digital-twin .hero-image-visual::before {
  position: absolute;
  left: 18%;
  right: 0;
  bottom: 8%;
  height: 38%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 229, 255, 0.24), transparent 67%);
  content: "";
  filter: blur(24px);
  transform: skewX(-12deg);
}

.hero-digital-twin .hero-image-visual::after {
  position: absolute;
  left: 34%;
  top: 34%;
  z-index: 1;
  width: min(540px, 38vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.92), transparent);
  content: "";
  box-shadow: 0 0 28px rgba(0, 229, 255, 0.56);
  transform: rotate(-7deg);
}

.hero-digital-twin .hero-product-image {
  position: relative;
  z-index: 2;
  width: min(920px, 58vw);
  max-height: none;
  object-fit: contain;
  opacity: 0.82;
  filter:
    drop-shadow(0 42px 38px rgba(0, 0, 0, 0.64))
    drop-shadow(0 0 34px rgba(0, 229, 255, 0.28))
    grayscale(0.08)
    saturate(0.72)
    contrast(1.12);
  transform: rotateY(-16deg) rotateX(7deg) rotateZ(-2deg);
  transform-origin: center;
  animation: digitalTwinGearbox 5s linear infinite;
}

.gearbox-cutaway {
  position: absolute;
  left: 56%;
  top: 58%;
  z-index: 4;
  width: clamp(118px, 12vw, 188px);
  aspect-ratio: 1;
  border: 1px solid rgba(0, 229, 255, 0.62);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 229, 255, 0.16), transparent 58%),
    rgba(10, 25, 47, 0.18);
  box-shadow:
    0 0 34px rgba(0, 229, 255, 0.26),
    inset 0 0 30px rgba(0, 229, 255, 0.18);
  transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-16deg);
}

.ring-gear,
.sun-gear,
.planet-gear {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, 0.78);
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.26);
}

.ring-gear {
  inset: 10%;
}

.sun-gear {
  left: 50%;
  top: 50%;
  width: 20%;
  aspect-ratio: 1;
  background: rgba(0, 229, 255, 0.18);
  transform: translate(-50%, -50%);
}

.planet-gear {
  width: 18%;
  aspect-ratio: 1;
  background: rgba(160, 176, 192, 0.1);
}

.planet-gear-a {
  left: 50%;
  top: 18%;
  transform: translate(-50%, -50%);
}

.planet-gear-b {
  left: 25%;
  top: 66%;
  transform: translate(-50%, -50%);
}

.planet-gear-c {
  left: 75%;
  top: 66%;
  transform: translate(-50%, -50%);
}

.gearbox-labels {
  position: absolute;
  left: 60%;
  top: 36%;
  z-index: 5;
  display: grid;
  gap: 7px;
  color: rgba(218, 246, 255, 0.8);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gearbox-labels span {
  border-left: 1px solid rgba(0, 229, 255, 0.64);
  padding-left: 10px;
  text-shadow: 0 0 14px rgba(0, 229, 255, 0.38);
}

.hero-data-stream {
  position: absolute;
  left: 58%;
  top: 55%;
  z-index: 4;
  width: min(300px, 20vw);
  height: 72px;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-8deg);
}

.hero-data-stream::before,
.hero-data-stream::after,
.hero-data-stream span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.12), rgba(0, 229, 255, 0.92), transparent);
  content: "";
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.48);
  animation: dataStreamFlow 2.6s linear infinite;
}

.hero-data-stream::before {
  top: 16px;
}

.hero-data-stream span:nth-child(1) {
  top: 34px;
  animation-delay: 0.35s;
}

.hero-data-stream span:nth-child(2) {
  top: 52px;
  animation-delay: 0.7s;
}

.hero-data-stream span:nth-child(3),
.hero-data-stream::after {
  display: none;
}

.hero-dashboard {
  position: relative;
  z-index: 5;
  align-self: center;
  overflow: hidden;
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.11), rgba(10, 25, 47, 0.68) 34%, rgba(10, 25, 47, 0.44)),
    rgba(7, 18, 34, 0.5);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.42),
    inset 0 0 42px rgba(0, 229, 255, 0.08);
  max-width: 430px;
  padding: clamp(16px, 2vw, 22px);
  backdrop-filter: blur(14px);
}

.hero-dashboard::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0, 229, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  content: "";
  opacity: 0.38;
  pointer-events: none;
}

.dashboard-header,
.health-panel,
.dashboard-grid,
.trend-panel {
  position: relative;
  z-index: 1;
}

.dashboard-header,
.trend-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dashboard-header span,
.trend-title span {
  color: #e9fbff;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-header strong {
  border: 1px solid rgba(0, 229, 255, 0.38);
  border-radius: 999px;
  color: #00e5ff;
  padding: 6px 10px;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.health-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 10px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.035);
}

.health-ring {
  display: grid;
  place-items: center;
  width: 88px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #0a192f 54%, transparent 55%),
    conic-gradient(from 18deg, #00e5ff 0 98%, rgba(160, 176, 192, 0.18) 98% 100%);
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.22);
}

.health-ring span {
  color: #eaffff;
  font-size: 1.08rem;
  font-weight: 900;
}

.health-panel p,
.dashboard-grid span,
.trend-title small {
  color: rgba(217, 231, 244, 0.74);
  font-size: 0.95rem;
}

.health-panel strong {
  display: block;
  margin: 4px 0;
  color: #00e5ff;
  font-size: 1.55rem;
  line-height: 1;
  text-shadow: 0 0 18px rgba(0, 229, 255, 0.32);
}

.health-panel small {
  color: rgba(217, 231, 244, 0.58);
  font-size: 0.96rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.dashboard-grid article {
  border: 1px solid rgba(0, 229, 255, 0.16);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  padding: 11px;
}

.dashboard-grid strong {
  display: block;
  margin-top: 6px;
  color: #f4fbff;
  font-size: 1rem;
  line-height: 1.25;
}

.trend-panel {
  margin-top: 12px;
  border: 1px solid rgba(0, 229, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 11px;
}

.trend-chart {
  display: block;
  width: 100%;
  height: 104px;
  margin-top: 8px;
}

.trend-line,
.trend-glow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-line {
  stroke: url("#trendLineGradient");
  stroke-width: 3;
  stroke-dasharray: 420;
  animation: trendRefresh 4.8s ease-in-out infinite;
}

.trend-glow {
  stroke: rgba(0, 229, 255, 0.24);
  stroke-width: 10;
  filter: blur(5px);
  opacity: 0.72;
}

@keyframes heroGridSlowMove {
  from {
    background-position: 0 0, 0 0, 0 0;
  }

  to {
    background-position: 56px 56px, 56px 56px, 0 0;
  }
}

@keyframes digitalTwinGearbox {
  0%,
  100% {
    transform: rotateY(-16deg) rotateX(7deg) rotateZ(-2deg) translateY(0);
  }

  50% {
    transform: rotateY(-12deg) rotateX(8deg) rotateZ(-2deg) translateY(-8px);
  }
}

@keyframes dataStreamFlow {
  from {
    background-position: -260px 0;
  }

  to {
    background-position: 260px 0;
  }
}

@keyframes trendRefresh {
  0% {
    stroke-dashoffset: 420;
    opacity: 0.55;
  }

  36%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@media (max-width: 1100px) {
  .hero-digital-twin .hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero-left {
    min-height: 600px;
  }

  .hero-dashboard {
    width: min(720px, 100%);
    justify-self: center;
  }

  .hero-data-stream {
    display: none;
  }
}

@media (max-width: 720px) {
  .hero-digital-twin,
  .hero-digital-twin .hero-grid {
    min-height: 860px;
  }

  .hero-digital-twin .hero-grid {
    width: min(100% - 32px, 1440px);
    padding: 34px 0 38px;
  }

  .hero-left {
    min-height: 520px;
  }

  .hero-digital-twin .hero-copy h1 {
    font-size: clamp(2.2rem, 11vw, 3.45rem);
  }

  .hero-digital-twin .hero-image-visual {
    left: -34%;
    right: -40%;
    bottom: 4%;
  }

  .hero-digital-twin .hero-product-image {
    width: 150vw;
    opacity: 0.72;
  }

  .gearbox-cutaway,
  .gearbox-labels {
    display: none;
  }

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

  .health-panel {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-digital-twin::before,
  .hero-digital-twin .hero-product-image,
  .hero-data-stream::before,
  .hero-data-stream::after,
  .hero-data-stream span,
  .trend-line {
    animation: none !important;
  }
}

/* Final visible floating-card treatment for the homepage banner. */
.site-dynamic-bg {
  display: none !important;
}

body {
  background: #ffffff;
}

main > .hero-section.home-image-hero {
  width: min(calc(100% - 50px), 1760px) !important;
  min-height: clamp(580px, 72vh, 720px) !important;
  max-height: 740px !important;
  margin: 16px auto 18px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 10px !important;
  background:
    radial-gradient(ellipse at 26% 48%, rgba(255, 255, 255, 0.18), rgba(0, 229, 255, 0.06) 22%, transparent 40%),
    radial-gradient(ellipse at 70% 58%, rgba(5, 11, 24, 0.64), rgba(5, 11, 24, 0.4) 34%, transparent 62%),
    linear-gradient(90deg, rgba(5, 11, 24, 0) 0%, rgba(5, 11, 24, 0) 43%, rgba(5, 11, 24, 0.34) 66%, rgba(5, 11, 24, 0.6) 100%),
    linear-gradient(180deg, rgba(5, 11, 24, 0.04), rgba(5, 11, 24, 0.02)),
    url("assets/img/home-precision-gear-predictive-banner-clean.png"),
    radial-gradient(circle at 18% 24%, rgba(0, 229, 255, 0.13), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(87, 99, 255, 0.12), transparent 34%),
    linear-gradient(135deg, #050b18 0%, #0a192f 58%, #06101f 100%) !important;
  background-position: center center, center center, center center, center center, center center, center center, center center, center center !important;
  background-size: cover, cover, cover, cover, cover, cover, cover, cover !important;
  background-repeat: no-repeat !important;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.42),
    0 42px 110px rgba(30, 42, 58, 0.24),
    0 12px 36px rgba(0, 86, 180, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 -5px 18px rgba(0, 0, 0, 0.24) !important;
}

main > .hero-section.home-image-hero::after {
  background:
    radial-gradient(ellipse at 24% 50%, rgba(0, 229, 255, 0.08), transparent 26%),
    radial-gradient(ellipse at 70% 58%, rgba(5, 11, 24, 0.46), rgba(5, 11, 24, 0.2) 38%, transparent 66%),
    linear-gradient(90deg, transparent 0%, transparent 52%, rgba(5, 11, 24, 0.18) 74%, rgba(5, 11, 24, 0.34) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 36px rgba(0, 0, 0, 0.16),
    inset 0 -7px 24px rgba(0, 0, 0, 0.24) !important;
  opacity: 0.46 !important;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

main > .hero-section.home-image-hero::before {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

main > .hero-section.home-image-hero .home-image-hero-inner {
  min-height: clamp(580px, 72vh, 720px) !important;
  max-height: 740px !important;
}

main > .hero-section.home-image-hero .home-image-hero-inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: min(520px, 34vw);
  height: min(190px, 24vh);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 26% 24%, rgba(0, 229, 255, 0.16), rgba(120, 215, 255, 0.08) 42%, rgba(7, 17, 31, 0.04) 70%, transparent 100%);
  filter: blur(0.6px);
  mix-blend-mode: screen;
}

@media (max-width: 900px) {
  main > .hero-section.home-image-hero {
    width: calc(100% - 20px) !important;
    min-height: clamp(560px, 72vh, 640px) !important;
    max-height: 78vh !important;
    border-width: 0 !important;
    border-radius: 8px !important;
  }

  main > .hero-section.home-image-hero .home-image-hero-inner::after {
    width: min(520px, 82vw);
    height: min(220px, 28vh);
  }
}

/* Homepage visual system pass: do not change the hero banner content or image. */
:root {
  --giq-white: #ffffff;
  --giq-light: #f5f7fa;
  --giq-border: #e4e7ec;
  --giq-dark: #1a1f2e;
  --giq-black: #0b0c10;
  --giq-text: #4a4a4a;
  --giq-muted: #9ca3af;
  --giq-orange: #f97316;
  --giq-orange-dark: #ea580c;
  --giq-orange-soft: #ffedd5;
}

html,
body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--giq-black);
}

body {
  padding-top: 74px;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  background: var(--giq-white) !important;
  border-bottom: 1px solid var(--giq-border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.logo {
  color: var(--giq-black) !important;
  font-size: 20px;
  font-weight: 700;
}

.nav-menu a {
  color: var(--giq-black) !important;
  font-size: 15px;
  font-weight: 500;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--giq-orange) !important;
}

.nav-menu a[href="contact.html"] {
  padding: 9px 14px;
  border-radius: 6px;
  background: var(--giq-orange);
  color: var(--giq-white) !important;
}

.nav-menu a[href="contact.html"]:hover,
.nav-menu a[href="contact.html"].active {
  background: var(--giq-orange-dark);
  color: var(--giq-white) !important;
}

.home-page main > section:not(:first-of-type) {
  position: relative;
}

.home-page main > section:not(:first-of-type) {
  animation: homeZoomIn 500ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.home-page main > section:nth-of-type(2),
.home-page main > section:nth-of-type(4),
.home-page main > section:nth-of-type(6),
.home-page main > section:nth-of-type(8),
.home-page main > section:nth-of-type(10),
.home-page main > section:nth-of-type(12) {
  background: var(--giq-light) !important;
}

.home-page main > section:nth-of-type(3),
.home-page main > section:nth-of-type(5),
.home-page main > section:nth-of-type(7),
.home-page main > section:nth-of-type(9),
.home-page main > section:nth-of-type(11),
.home-page main > section:nth-of-type(13) {
  background: var(--giq-white) !important;
}

.home-page main > section:nth-of-type(3)::after,
.home-page main > section:nth-of-type(5)::after,
.home-page main > section:nth-of-type(7)::after,
.home-page main > section:nth-of-type(10)::after,
.home-page main > section:nth-of-type(13)::after {
  content: none !important;
}

.home-page main > section:nth-of-type(2)::before {
  content: none !important;
}

.home-page main > section:not(:first-of-type) {
  animation: none !important;
  box-shadow: inset 0 1px 0 rgba(228, 231, 236, 0.72);
}

.home-page main > section:nth-of-type(4),
.home-page main > section:nth-of-type(8),
.home-page main > section:nth-of-type(12) {
  background-image:
    radial-gradient(circle at 12% 0%, rgba(249, 115, 22, 0.055), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), transparent 120px) !important;
}

.home-page main > section:nth-of-type(3),
.home-page main > section:nth-of-type(7),
.home-page main > section:nth-of-type(11) {
  background-image:
    radial-gradient(circle at 88% 6%, rgba(30, 42, 58, 0.045), transparent 28%),
    linear-gradient(180deg, rgba(245, 247, 250, 0.58), transparent 110px) !important;
}

.content-section {
  padding: 72px 0;
}

.section-heading h2,
.cta-section h2 {
  color: var(--giq-black);
  font-size: clamp(1.9rem, 3vw, 32px);
  font-weight: 600;
  line-height: 1.3;
}

.section-heading p,
.cta-section p,
.section-note,
.feature-card p,
.service-card p,
.product-card p,
.highlight-card p,
.process-card p,
.faq-item p,
.core-value-card p {
  color: var(--giq-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.feature-card h2,
.service-card h3,
.product-card h3,
.highlight-card h3,
.process-card h3,
.faq-item h3,
.core-value-card h3 {
  color: var(--giq-black);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.core-value-card,
.feature-card,
.service-card,
.product-card,
.process-card,
.pricing-card,
.highlight-card,
.case-tile,
.industry-card,
.faq-item,
.contact-form,
.report-sample-card,
.roi-calculator,
.series-panel,
.table-wrap,
.insight-list article,
.spotlight-grid {
  border: 1px solid var(--giq-border) !important;
  border-radius: 8px !important;
  background: var(--giq-white) !important;
  box-shadow: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.core-value-card,
.feature-card,
.service-card,
.product-card,
.process-card,
.pricing-card,
.highlight-card,
.faq-item {
  padding: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .core-value-card:hover,
  .feature-card:hover,
  .service-card:hover,
  .product-card:hover,
  .process-card:hover,
  .pricing-card:hover,
  .highlight-card:hover,
  .case-tile:hover,
  .industry-card:hover,
  .faq-item:hover,
  .contact-form:hover,
  .report-sample-card:hover,
  .roi-calculator:hover,
  .series-panel:hover,
  .table-wrap:hover,
  .insight-list article:hover,
  .spotlight-grid:hover {
    transform: translateY(-4px);
    border-color: var(--giq-orange) !important;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.08) !important;
  }
}

.home-page main > section:not(:first-of-type) .primary-button,
.home-page main > section:not(:first-of-type) button.primary-button,
.form-button button,
.service-cta .primary-button {
  border-radius: 6px !important;
  background: var(--giq-orange) !important;
  color: var(--giq-white) !important;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.home-page main > section:not(:first-of-type) .primary-button:hover,
.home-page main > section:not(:first-of-type) button.primary-button:hover,
.form-button button:hover,
.service-cta .primary-button:hover {
  background: var(--giq-orange-dark) !important;
}

.home-page main > section:not(:first-of-type) a:hover,
.site-footer a:hover,
.text-link:hover,
.inline-text-link:hover {
  color: var(--giq-orange);
}

.core-value-metric,
.highlight-metric,
.price-line,
.case-metrics span,
.proof-grid span,
.report-status-row strong,
.result-value,
.roi-summary-grid strong,
.roi-tags span,
.metric-number,
.stat-number,
.table-wrap strong,
.spec-table td strong,
.product-table td strong {
  color: var(--giq-orange) !important;
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.feature-card i,
.service-card i,
.product-card i,
.process-card i,
.core-value-card i {
  background: var(--giq-dark) !important;
  color: var(--giq-white) !important;
}

.core-value-card::before,
.highlight-card::before {
  background: var(--giq-orange) !important;
}

.section-note {
  border-left-color: var(--giq-orange) !important;
  background: var(--giq-orange-soft) !important;
}

.spec-table th,
.product-table th {
  background: var(--giq-dark) !important;
  color: var(--giq-white) !important;
}

.spec-table tbody tr:hover,
.product-table tbody tr:hover {
  background: var(--giq-orange-soft) !important;
}

.roi-banner {
  color: var(--giq-black) !important;
}

.roi-title,
.roi-story {
  color: var(--giq-black) !important;
}

.roi-tags span {
  background: var(--giq-orange-soft) !important;
  color: var(--giq-orange) !important;
}

.cta-section {
  background: var(--giq-white) !important;
}

.site-footer {
  background: var(--giq-dark) !important;
  color: var(--giq-muted) !important;
  border-top: 1px solid #2d3340;
}

.site-footer p {
  color: var(--giq-muted);
  font-size: 14px;
}

.site-footer p:last-child {
  color: #6b7280;
  font-size: 13px;
}

.site-footer a:hover {
  color: var(--giq-orange);
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease, transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

/* Unified industrial footer inspired by the FOOTER reference image. */
.site-footer {
  position: relative;
  overflow: hidden;
  padding: clamp(46px, 5vw, 72px) 24px 26px;
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 229, 255, 0.22), transparent 31%),
    radial-gradient(circle at 88% 8%, rgba(249, 115, 22, 0.16), transparent 26%),
    linear-gradient(135deg, #eef7fb 0%, #f8fafc 42%, #e8f1f6 100%) !important;
  color: #1a1f2e !important;
  text-align: left !important;
  border-top: 1px solid rgba(26, 31, 46, 0.1);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(26, 31, 46, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(26, 31, 46, 0.035) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.34;
  pointer-events: none;
}

.footer-inner {
  position: relative;
  z-index: 1;
  width: min(1760px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.08fr 0.88fr 1.08fr;
  gap: clamp(22px, 3vw, 42px);
}

.footer-card {
  min-height: 100%;
  padding: clamp(22px, 2vw, 30px);
  border: 1px solid rgba(26, 31, 46, 0.1);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.76));
  box-shadow: 0 22px 58px rgba(26, 31, 46, 0.1);
}

.footer-card h2 {
  margin: 0 0 18px;
  color: #0b0c10;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

.footer-logo-img {
  display: block;
  width: 86px;
  height: 86px;
  margin: 0 0 14px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(41, 128, 185, 0.16);
}

.footer-card p {
  margin: 0 0 14px;
  color: #4a4a4a !important;
  font-size: 0.96rem;
  line-height: 1.55;
}

.footer-trust-list,
.footer-link-list,
.footer-contact-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-trust-list li,
.footer-link-list li,
.footer-contact-list li {
  color: #4a4a4a;
  font-size: 0.94rem;
  line-height: 1.5;
}

.footer-trust-list i,
.footer-contact-list i {
  width: 20px;
  margin-right: 8px;
  color: #f97316;
}

.footer-link-list a,
.footer-contact-list a {
  color: #1a1f2e;
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease;
}

.footer-link-list a::before {
  content: ">";
  margin-right: 8px;
  color: #f97316;
  font-weight: 800;
}

.footer-link-list a:hover,
.footer-contact-list a:hover {
  color: #f97316;
}

.footer-social {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(26, 31, 46, 0.12);
  color: #6b7280;
  font-size: 0.95rem;
}

.footer-social span:first-child {
  color: #0b0c10;
  font-weight: 700;
}

.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 18px;
  padding-top: 24px;
  border-top: 1px solid rgba(26, 31, 46, 0.13);
  color: #6b7280;
  font-size: 0.96rem;
}

@media (max-width: 960px) {
  .footer-inner {
    width: min(100%, calc(100% - 36px));
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .site-footer {
    padding: 38px 16px 24px;
  }

  .footer-card {
    padding: 20px;
  }

  .footer-logo-img {
    width: 72px;
    height: 72px;
  }
}

/* Banner copy position refinements requested on 2026-06-17. */
@media (min-width: 901px) {
  .home-page main > .hero-section.home-image-hero .home-image-hero-copy {
    transform: translateX(clamp(32px, 3.5vw, 96px));
  }

  .inner-page.predictive-page main > .page-hero > .section-inner,
  .inner-page.products-page main > .product-hero .product-hero-inner {
    width: calc(100% - 48px) !important;
    max-width: none !important;
    margin-left: 24px !important;
    margin-right: auto !important;
    justify-items: start !important;
    text-align: left !important;
  }

  .inner-page.products-page main > .product-hero .product-hero-copy {
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-self: start !important;
  }

  .inner-page.products-page main > .product-hero .hero-actions,
  .inner-page.predictive-page main > .page-hero .hero-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 900px) {
  .home-page main > .hero-section.home-image-hero .home-image-hero-copy {
    transform: none;
  }
}

/* Product banner title refinement: white title without the white backing strip. */
.inner-page.products-page main > .product-hero h1 {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.72),
    0 12px 34px rgba(0, 0, 0, 0.62) !important;
}

.reveal-slide {
  transform: translateX(-18px);
}

.reveal-soft-scale {
  transform: translateY(10px) scale(0.985);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-slide.is-visible,
.reveal-soft-scale.is-visible {
  transform: translateX(0) scale(1);
}

@keyframes homeZoomIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

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

@media (max-width: 768px) {
  body {
    padding-top: 112px;
  }

  .content-section {
    padding: 56px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page main > section:not(:first-of-type),
  .reveal-on-scroll {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Homepage typography and alignment pass only. No visible text is changed. */
.home-page main {
  font-family: Inter, Manrope, Arial, sans-serif;
}

.home-page .home-image-hero h1 {
  line-height: 1.08;
}

.home-page .home-image-hero .hero-title-primary {
  font-size: clamp(2.6rem, 4.2vw, 3.9rem);
  font-weight: 760;
  letter-spacing: -0.012em;
}

.home-page .home-image-hero .hero-title-secondary {
  font-size: clamp(2.05rem, 3.15vw, 3.28rem);
  font-weight: 650;
  letter-spacing: -0.008em;
}

.home-page .home-image-hero .hero-subtitle {
  max-width: 740px;
  margin-top: clamp(28px, 4vh, 46px);
  font-size: clamp(1rem, 1.05vw, 1.16rem);
  line-height: 1.62;
}

.home-page .home-image-hero .hero-actions {
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.home-page main > section:not(:first-of-type) > .section-inner {
  width: min(1760px, calc(100% - 64px));
}

.home-page .core-value-section > .section-inner {
  width: min(1760px, calc(100% - 64px));
}

.home-page .section-heading {
  max-width: 820px;
  margin-right: auto;
  margin-bottom: clamp(32px, 4vw, 44px);
  margin-left: auto;
  text-align: center;
}

.home-page .core-value-heading {
  max-width: 1040px;
}

.home-page .core-value-heading h2 {
  white-space: nowrap;
  font-size: clamp(1.75rem, 2.25vw, 2.35rem);
}

.home-page .timeline-grid {
  --timeline-heading-space: 1040px;
}

.home-page .timeline-grid,
.home-page .timeline-grid + * {
  max-width: 100%;
}

.home-page main > section:nth-of-type(9) .section-heading {
  max-width: 1040px;
}

.home-page main > section:nth-of-type(9) .section-heading h2 {
  white-space: nowrap;
  font-size: clamp(1.75rem, 2.25vw, 2.35rem);
}

.home-page .section-heading h2,
.home-page .cta-section h2,
.home-page .split-section h2,
.home-page .roi-title {
  font-size: clamp(1.85rem, 2.75vw, 2.85rem);
  font-weight: 720;
  line-height: 1.24;
  letter-spacing: -0.012em;
}

.home-page .section-heading p,
.home-page .cta-section p,
.home-page .split-section > div > p:not(.eyebrow),
.home-page .section-note {
  max-width: 820px;
  color: #4a4a4a;
  font-size: clamp(1.02rem, 1.18vw, 1.16rem);
  line-height: 1.62;
}

.home-page .section-heading p {
  margin: 12px auto 0;
}

.home-page .eyebrow {
  margin-bottom: 10px;
  color: #f97316;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.home-page .core-value-card,
.home-page .service-card,
.home-page .process-card,
.home-page .product-card,
.home-page .industry-card,
.home-page .timeline-grid article,
.home-page .faq-item,
.home-page .proof-grid div {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(22px, 2.2vw, 28px) !important;
  text-align: left;
}

.home-page .timeline-grid article {
  border-top-color: #f97316 !important;
}

.home-page .core-value-card h3,
.home-page .service-card h3,
.home-page .process-card h3,
.home-page .product-card h3,
.home-page .industry-card h3,
.home-page .timeline-grid h3,
.home-page .faq-item h3 {
  margin-bottom: 10px;
  font-size: clamp(1.15rem, 1.28vw, 1.38rem);
  font-weight: 680;
  line-height: 1.36;
  letter-spacing: 0;
}

.home-page .core-value-card p,
.home-page .core-value-card span,
.home-page .service-card p,
.home-page .process-card p,
.home-page .product-card p,
.home-page .industry-card p,
.home-page .timeline-grid p,
.home-page .faq-item p,
.home-page .compact-check-list,
.home-page .proof-grid p {
  color: #4a4a4a;
  font-size: clamp(0.96rem, 1.04vw, 1.08rem);
  line-height: 1.62;
}

.home-page .core-value-card span {
  margin-top: auto;
  padding-top: 16px;
}

.home-page .service-card .text-link,
.home-page .product-card .text-link,
.home-page .process-card .text-link {
  margin-top: auto;
  padding-top: 18px;
}

.home-page .core-value-card i,
.home-page .service-card i,
.home-page .process-card i,
.home-page .product-card i,
.home-page .industry-card i {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  font-size: 1.18rem;
}

.home-page .core-value-grid,
.home-page .card-grid,
.home-page .process-grid,
.home-page .industry-grid,
.home-page .timeline-grid,
.home-page .faq-list {
  align-items: stretch;
  gap: clamp(22px, 1.8vw, 34px);
}

.home-page .core-value-metric,
.home-page .highlight-metric,
.home-page .proof-grid span,
.home-page .timeline-grid span,
.home-page .roi-tags span {
  font-family: Inter, Manrope, Arial, sans-serif;
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.home-page .core-value-metric {
  display: flex;
  align-items: center;
  min-height: 2.4em;
  margin-bottom: 14px;
  font-size: clamp(1.75rem, 2.55vw, 2.75rem);
}

.home-page .proof-grid {
  align-items: stretch;
}

.home-page .proof-grid div {
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

.home-page .proof-grid span {
  margin-bottom: 8px;
  font-size: clamp(1.85rem, 3vw, 2.45rem);
}

.home-page .roi-banner {
  padding: 72px 0;
}

.home-page .roi-title,
.home-page .roi-story {
  max-width: 1040px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.home-page .roi-story {
  font-size: clamp(1.14rem, 1.86vw, 1.58rem);
  line-height: 1.38;
  letter-spacing: -0.018em;
}

.home-page .roi-tags {
  justify-content: center;
  gap: 12px;
}

.home-page .roi-button {
  display: flex !important;
  width: max-content;
  max-width: 100%;
  margin: 24px auto 0 !important;
}

.home-page .roi-tags span {
  min-height: 42px;
  justify-content: center;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.95rem;
  line-height: 1.25;
  text-align: center;
}

.home-page .text-link,
.home-page .primary-button,
.home-page .secondary-button,
.home-page .contact-form button {
  min-height: 44px;
  align-items: center;
  justify-content: center;
  font-size: 0.94rem;
  font-weight: 750;
  line-height: 1.2;
}

.home-page .primary-button,
.home-page .secondary-button,
.home-page .contact-form button {
  padding: 12px 20px;
}

.home-page .section-heading-with-link {
  align-items: flex-end;
  gap: 28px;
  max-width: none;
  text-align: left;
}

.home-page .section-heading-with-link p {
  margin-left: 0;
}

.home-page .table-wrap {
  overflow-x: auto;
}

.home-page .customer-tech-table {
  min-width: 760px;
  border-collapse: collapse;
}

.home-page .customer-tech-table th,
.home-page .customer-tech-table td {
  padding: 16px 18px;
  line-height: 1.55;
  vertical-align: top;
}

.home-page .customer-tech-table thead th {
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.home-page .customer-tech-table tbody th {
  width: 30%;
  color: #0b0c10;
  font-size: 0.92rem;
  font-weight: 750;
}

.home-page .customer-tech-table td {
  color: #4a4a4a;
  font-size: 0.94rem;
}

.home-page .process-specs-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 40px);
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(22px, 2.5vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 12px;
  background:
    radial-gradient(circle at 92% 0%, rgba(249, 115, 22, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.36));
  box-shadow:
    0 18px 46px rgba(26, 31, 46, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(8px);
}

.home-page .process-specs-cta h3 {
  color: #0b0c10;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42);
  font-size: clamp(1.18rem, 1.45vw, 1.45rem);
  line-height: 1.35;
}

.home-page .process-specs-cta p {
  margin-top: 6px;
  color: #1a1f2e;
  font-size: clamp(0.98rem, 1.04vw, 1.08rem);
}

.home-page .process-specs-cta .primary-button {
  flex: 0 0 auto;
}

.home-page .product-note-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
}

.home-page .product-note-link p {
  margin: 0;
  color: #4a4a4a;
  font-weight: 700;
}

.home-page .product-note-link .text-link {
  flex: 0 0 auto;
  margin-top: 0;
  text-transform: none;
}

/* Home lower callout bars: keep both ends visually closer to the center. */
@media (min-width: 901px) {
  .home-page .process-specs-cta,
  .home-page .product-note-link {
    justify-content: center;
    gap: clamp(28px, 4vw, 72px);
  }

  .home-page .process-specs-cta > div {
    flex: 0 1 620px;
    max-width: 620px;
  }

  .home-page .product-note-link p {
    flex: 0 1 auto;
  }
}

.home-page .cta-grid {
  align-items: center;
}

.home-page .contact-form {
  align-items: start;
  gap: 16px;
}

.home-page .contact-form label {
  color: #0b0c10;
  font-size: 0.93rem;
  font-weight: 750;
  line-height: 1.35;
}

.home-page .contact-form input,
.home-page .contact-form textarea {
  margin-top: 4px;
  font-size: 0.95rem;
  line-height: 1.45;
}

@media (max-width: 960px) {
  .home-page .section-heading,
  .home-page .section-heading-with-link {
    text-align: left;
  }

  .home-page .section-heading p {
    margin-left: 0;
  }

  .home-page .section-heading-with-link {
    align-items: flex-start;
  }

  .home-page .process-specs-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-page .product-note-link {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 620px) {
  .home-page .core-value-heading h2 {
    white-space: normal;
  }

  .home-page main > section:nth-of-type(9) .section-heading h2 {
    white-space: normal;
  }

  .home-page .home-image-hero .hero-title-primary {
    font-size: clamp(2.125rem, 8.3vw, 2.5rem);
    white-space: normal;
  }

  .home-page .home-image-hero .hero-title-secondary {
    font-size: clamp(1.55rem, 6.5vw, 2rem);
  }

  .home-page .home-image-hero .hero-subtitle {
    max-width: 360px;
    font-size: 0.94rem;
    line-height: 1.62;
  }

  .home-page .content-section {
    padding: 56px 0;
  }

  .home-page .section-heading {
    margin-bottom: 28px;
  }

  .home-page .section-heading h2,
  .home-page .cta-section h2,
  .home-page .split-section h2,
  .home-page .roi-title {
    font-size: clamp(1.625rem, 6.5vw, 2rem);
    line-height: 1.22;
  }

  .home-page .section-heading p,
  .home-page .cta-section p,
  .home-page .split-section > div > p:not(.eyebrow) {
    font-size: 0.95rem;
    line-height: 1.65;
  }

  .home-page .core-value-card,
  .home-page .service-card,
  .home-page .process-card,
  .home-page .product-card,
  .home-page .industry-card,
  .home-page .timeline-grid article,
  .home-page .faq-item,
  .home-page .proof-grid div {
    padding: 20px !important;
  }

  .home-page .core-value-card p,
  .home-page .core-value-card span,
  .home-page .service-card p,
  .home-page .process-card p,
  .home-page .product-card p,
  .home-page .industry-card p,
  .home-page .timeline-grid p,
  .home-page .faq-item p,
  .home-page .compact-check-list,
  .home-page .proof-grid p {
    font-size: 0.92rem;
    line-height: 1.62;
  }

  .home-page .primary-button,
  .home-page .secondary-button,
  .home-page .contact-form button {
    width: 100%;
  }

  .home-page .roi-tags {
    align-items: stretch;
    flex-direction: column;
  }

  .home-page .customer-tech-table {
    min-width: 680px;
  }
}

.home-page .section-note {
  max-width: 100% !important;
  text-align: center;
}

@media (min-width: 961px) {
  .home-page .section-note {
    white-space: nowrap;
    overflow-wrap: normal;
  }
}

@media (max-width: 960px) {
  .home-page .section-note {
    white-space: normal;
  }
}

/* Predictive Service page visual pass copied from the homepage content system.
   Text, URLs, anchors, and SEO content are unchanged. */
.predictive-page main {
  font-family: Inter, Manrope, Arial, sans-serif;
  background: #ffffff;
}

.predictive-page .page-hero:not(.hero-predictive) {
  background:
    linear-gradient(90deg, rgba(5, 11, 24, 0.94) 0%, rgba(5, 11, 24, 0.72) 42%, rgba(5, 11, 24, 0.28) 100%),
    radial-gradient(circle at 72% 30%, rgba(0, 229, 255, 0.12), transparent 34%),
    url("assets/img/new/predictive-banner-dashboard.png"),
    linear-gradient(135deg, #0b0c10 0%, #1a1f2e 100%);
  background-position: center, center, center center, center;
  background-repeat: no-repeat;
  background-size: cover, cover, cover, cover;
}

.predictive-page .page-hero .section-inner {
  max-width: 1040px;
}

.predictive-page .page-hero h1 {
  font-size: clamp(2.5rem, 4.4vw, 4rem);
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -0.018em;
}

.inner-page.predictive-page .page-hero h1 {
  max-width: none;
  font-size: clamp(2.45rem, 4vw, 3.5rem);
  white-space: nowrap;
}

.predictive-page .page-hero p:not(.eyebrow) {
  max-width: 700px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  line-height: 1.62;
}

.predictive-page .hero-actions {
  gap: 16px;
}

.predictive-page main > section:not(:first-of-type) {
  position: relative;
  overflow: hidden;
}

.predictive-page main > section:nth-of-type(2),
.predictive-page main > section:nth-of-type(4),
.predictive-page main > section:nth-of-type(6),
.predictive-page main > section:nth-of-type(8) {
  background:
    radial-gradient(circle at 12% 0%, rgba(249, 115, 22, 0.045), transparent 30%),
    #f5f7fa;
}

.predictive-page main > section:nth-of-type(3),
.predictive-page main > section:nth-of-type(5),
.predictive-page main > section:nth-of-type(7),
.predictive-page main > section:nth-of-type(9) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(245, 247, 250, 0.42) 100%),
    #ffffff;
}

.predictive-page main > section:nth-of-type(3)::after,
.predictive-page main > section:nth-of-type(6)::after,
.predictive-page main > section:nth-of-type(9)::after {
  content: "";
  position: absolute;
  right: 7%;
  bottom: -1px;
  width: min(320px, 30vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.42), transparent);
  pointer-events: none;
}

.predictive-page .content-section,
.predictive-page .below-hero-highlights {
  padding: clamp(64px, 7vw, 92px) 0;
}

.predictive-page .section-heading {
  max-width: 820px;
  margin-right: auto;
  margin-bottom: clamp(32px, 4vw, 44px);
  margin-left: auto;
  text-align: center;
}

.predictive-page .section-heading h2,
.predictive-page .service-cta h2,
.predictive-page .section-spotlight h2 {
  color: #0b0c10;
  font-size: clamp(1.65rem, 2.5vw, 2.5rem);
  font-weight: 720;
  line-height: 1.24;
  letter-spacing: -0.012em;
}

.predictive-page .section-heading p,
.predictive-page .spotlight-copy p,
.predictive-page .handoff-note,
.predictive-page .section-note,
.predictive-page .service-cta p {
  color: #4a4a4a;
  font-size: clamp(0.96rem, 1.08vw, 1.06rem);
  line-height: 1.62;
}

.predictive-page .section-heading p {
  margin: 12px auto 0;
}

.predictive-page .eyebrow {
  margin-bottom: 10px;
  color: #f97316;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.predictive-page .highlight-card,
.predictive-page .process-card,
.predictive-page .faq-item,
.predictive-page .report-sample-card,
.predictive-page .table-wrap,
.predictive-page .spotlight-grid {
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.18);
}

.predictive-page .highlight-card,
.predictive-page .process-card,
.predictive-page .faq-item {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(22px, 2.2vw, 28px) !important;
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.predictive-page .highlight-card:hover,
.predictive-page .process-card:hover,
.predictive-page .faq-item:hover {
  transform: translateY(-4px);
  border-color: #f97316;
  box-shadow: 0 16px 34px -18px rgba(11, 12, 16, 0.28);
}

.predictive-page .highlight-card h3,
.predictive-page .process-card h3,
.predictive-page .faq-item h3,
.predictive-page .report-sample-card h3 {
  margin-bottom: 10px;
  color: #0b0c10;
  font-size: clamp(1.08rem, 1.18vw, 1.25rem);
  font-weight: 680;
  line-height: 1.36;
  letter-spacing: 0;
}

.predictive-page .highlight-card p,
.predictive-page .process-card p,
.predictive-page .faq-item p,
.predictive-page .report-sample-card p {
  color: #4a4a4a;
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  line-height: 1.62;
}

.predictive-page .highlight-metric,
.predictive-page .step-number,
.predictive-page .report-status-row strong {
  font-family: Inter, Manrope, Arial, sans-serif;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.predictive-page .highlight-metric,
.predictive-page .step-number,
.predictive-page .status-attention {
  color: #f97316;
}

.predictive-page .process-card i {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  font-size: 1.18rem;
}

.predictive-page .highlight-grid,
.predictive-page .process-grid,
.predictive-page .faq-list {
  align-items: stretch;
}

.predictive-page .platform-screenshot-carousel {
  margin-top: clamp(30px, 4vw, 48px);
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 229, 255, 0.16), transparent 32%),
    linear-gradient(135deg, rgba(5, 16, 34, 0.96), rgba(8, 31, 59, 0.94));
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}

.predictive-page .workflow-screenshot-carousel {
  margin-top: clamp(36px, 4.4vw, 56px);
}

.predictive-page .workflow-image-pairs {
  margin-top: clamp(36px, 4.4vw, 56px);
  display: grid;
  gap: clamp(18px, 2.2vw, 28px);
}

.predictive-page .workflow-image-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}

.predictive-page .workflow-image-row figure {
  margin: 0;
  padding: clamp(10px, 1.2vw, 14px);
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 14px;
  background:
    radial-gradient(circle at 18% 0%, rgba(0, 229, 255, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(5, 16, 34, 0.96), rgba(8, 31, 59, 0.94));
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
  overflow: hidden;
}

.predictive-page .workflow-image-row img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #06152b;
}

.predictive-page .platform-carousel-window {
  overflow: hidden;
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 10px;
  background: #06152b;
}

.predictive-page .platform-carousel-track {
  display: flex;
  width: 100%;
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.predictive-page .platform-carousel-track img {
  flex: 0 0 100%;
  min-width: 100%;
  display: block;
  width: 100%;
  max-height: min(560px, 58vh);
  object-fit: contain;
  object-position: center center;
  background: #06152b;
}

.predictive-page .below-hero-highlights .platform-carousel-window {
  display: flex;
  align-items: center;
  justify-content: center;
}

.predictive-page .below-hero-highlights .platform-carousel-track {
  align-items: center;
}

.predictive-page .below-hero-highlights .platform-carousel-track img {
  height: 100%;
  object-position: center center;
}

.predictive-page .report-sample-carousel .platform-carousel-track {
  align-items: stretch;
}

.predictive-page .report-sample-carousel .platform-carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
}

.predictive-page .report-carousel-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
}

.predictive-page .report-carousel-slide.is-two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.predictive-page .report-carousel-slide figure {
  margin: 0;
  min-width: 0;
  padding: clamp(8px, 1.2vw, 14px);
  border: 1px solid rgba(0, 229, 255, 0.16);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 16px 34px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.predictive-page .report-sample-carousel .platform-carousel-track img {
  flex: initial;
  min-width: 0;
  width: 100%;
  height: auto;
  max-height: min(560px, 62vh);
  object-fit: contain;
  background: #ffffff;
  border-radius: 8px;
}

.predictive-page .report-carousel-slide.is-two-up img {
  max-height: min(500px, 56vh);
}

.predictive-page .platform-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.predictive-page .platform-carousel-dots button {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(0, 229, 255, 0.64);
  border-radius: 50%;
  padding: 0;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.predictive-page .platform-carousel-dots button:hover,
.predictive-page .platform-carousel-dots button.is-active {
  transform: scale(1.18);
  background: #00e5ff;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.55);
}

.predictive-page .platform-carousel-note {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.98rem, 1.04vw, 1.08rem);
  line-height: 1.45;
}

.products-page .product-series-carousel {
  margin-top: clamp(30px, 4vw, 48px);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 229, 255, 0.14), transparent 32%),
    linear-gradient(135deg, rgba(5, 16, 34, 0.96), rgba(8, 31, 59, 0.94));
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
}

.products-page .product-series-carousel .platform-carousel-window {
  overflow: hidden;
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 10px;
  background: #06152b;
  aspect-ratio: 16 / 9;
  max-height: min(560px, 58vh);
}

.products-page .product-series-carousel .platform-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.products-page .product-series-carousel .platform-carousel-track img {
  flex: 0 0 100%;
  min-width: 100%;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #06152b;
}

.products-page .product-series-carousel .platform-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.products-page .product-series-carousel .platform-carousel-dots button {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(0, 229, 255, 0.64);
  border-radius: 50%;
  padding: 0;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.products-page .product-series-carousel .platform-carousel-dots button:hover,
.products-page .product-series-carousel .platform-carousel-dots button.is-active {
  transform: scale(1.18);
  background: #00e5ff;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.55);
}

.about-page .about-team-carousel-wrap {
  margin-top: clamp(28px, 4vw, 48px);
}

.about-page .about-team-carousel {
  padding: clamp(16px, 2.2vw, 26px);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 229, 255, 0.14), transparent 32%),
    linear-gradient(135deg, rgba(5, 16, 34, 0.96), rgba(8, 31, 59, 0.94));
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
}

.about-page .about-team-carousel .platform-carousel-window {
  overflow: hidden;
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 10px;
  background: #06152b;
}

.about-page .about-team-carousel .platform-carousel-track {
  display: flex;
  width: 100%;
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.about-page .about-team-carousel .platform-carousel-track img {
  flex: 0 0 100%;
  min-width: 100%;
  display: block;
  width: 100%;
  max-height: min(620px, 62vh);
  object-fit: contain;
  background: #06152b;
}

.about-page .about-team-carousel .platform-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.about-page .about-team-carousel .platform-carousel-dots button {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(0, 229, 255, 0.64);
  border-radius: 50%;
  padding: 0;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.about-page .about-team-carousel .platform-carousel-dots button:hover,
.about-page .about-team-carousel .platform-carousel-dots button.is-active {
  transform: scale(1.18);
  background: #00e5ff;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.55);
}

.about-page .about-technical-bg-section {
  background:
    radial-gradient(circle at 14% 12%, rgba(0, 229, 255, 0.08), transparent 34%),
    linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
}

.about-page .about-technical-carousel {
  margin-top: clamp(30px, 4vw, 52px);
  padding: clamp(16px, 2.2vw, 28px);
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 229, 255, 0.16), transparent 32%),
    linear-gradient(135deg, rgba(5, 16, 34, 0.97), rgba(8, 31, 59, 0.95));
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
}

.about-page .about-technical-carousel .platform-carousel-window {
  overflow: hidden;
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 10px;
  background: #06152b;
}

.about-page .about-technical-carousel .platform-carousel-track {
  display: flex;
  width: 100%;
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.about-page .about-technical-carousel .platform-carousel-track img {
  flex: 0 0 100%;
  min-width: 100%;
  display: block;
  width: 100%;
  max-height: min(680px, 66vh);
  object-fit: contain;
  background: #06152b;
}

.about-page .about-technical-carousel .platform-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.about-page .about-technical-carousel .platform-carousel-dots button {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(0, 229, 255, 0.64);
  border-radius: 50%;
  padding: 0;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.about-page .about-technical-carousel .platform-carousel-dots button:hover,
.about-page .about-technical-carousel .platform-carousel-dots button.is-active {
  transform: scale(1.18);
  background: #00e5ff;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.55);
}

.products-page .sensor-product-showcase {
  margin-top: clamp(34px, 5vw, 60px);
  padding: clamp(18px, 2.4vw, 30px);
  border: 1px solid rgba(0, 115, 180, 0.18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 12%, rgba(0, 229, 255, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 250, 0.94));
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.11);
  overflow: hidden;
}

.products-page .sensor-product-showcase .showcase-heading {
  max-width: 820px;
  margin-bottom: 20px;
}

.products-page .sensor-product-showcase .showcase-heading h3 {
  margin-bottom: 8px;
  color: #0b0c10;
}

.products-page .sensor-product-showcase .showcase-heading p {
  margin: 0;
  color: #4a4a4a;
}

.products-page .sensor-showcase-window {
  position: relative;
  overflow: visible;
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(7, 24, 39, 0.96), rgba(12, 42, 67, 0.92));
  padding: clamp(14px, 1.8vw, 22px);
}

.products-page .sensor-showcase-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 0;
}

.products-page .sensor-showcase-card {
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.products-page .sensor-showcase-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 229, 255, 0.46);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.22);
}

.products-page .sensor-showcase-card img {
  display: block;
  width: 100%;
  height: clamp(250px, 23vw, 360px);
  object-fit: contain;
  background: #ffffff;
}

@media (min-width: 1500px) {
  .products-page .sensor-showcase-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.predictive-page .handoff-note {
  max-width: 820px;
  margin: 0 auto 28px;
  border-left: 3px solid #f97316;
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  background: rgba(255, 237, 213, 0.56);
}

.predictive-page .spotlight-grid {
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  padding: clamp(28px, 4vw, 44px);
}

.predictive-page .table-wrap {
  overflow-x: auto;
}

.predictive-page .spec-table {
  min-width: 760px;
  border-collapse: collapse;
}

.predictive-page .spec-table th,
.predictive-page .spec-table td {
  padding: 16px 18px;
  line-height: 1.55;
  vertical-align: top;
}

.predictive-page .spec-table th {
  color: #0b0c10;
  font-size: 0.92rem;
  font-weight: 750;
}

.predictive-page .spec-table td {
  color: #4a4a4a;
  font-size: 0.94rem;
}

.predictive-page .report-sample-card {
  padding: clamp(22px, 3vw, 32px);
}

.predictive-page .report-status-row {
  gap: 16px;
}

.predictive-page .report-status-row > div {
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #f8fafc;
}

.predictive-page .service-cta {
  color: #0b0c10;
  background:
    radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.10), transparent 34%),
    #ffffff;
}

.predictive-page .service-cta h2 {
  margin-bottom: 22px;
}

.predictive-page .primary-button,
.predictive-page .secondary-button {
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 12px 20px;
  font-size: 0.94rem;
  font-weight: 750;
  line-height: 1.2;
}

@media (max-width: 960px) {
  .predictive-page .section-heading {
    text-align: left;
  }

  .predictive-page .section-heading p {
    margin-left: 0;
  }

  .predictive-page .handoff-note {
    margin-left: 0;
  }
}

@media (max-width: 620px) {
  .predictive-page .page-hero h1 {
    font-size: clamp(2rem, 8vw, 2.55rem);
    white-space: normal;
  }

  .predictive-page .content-section,
  .predictive-page .below-hero-highlights {
    padding: 56px 0;
  }

  .predictive-page .section-heading {
    margin-bottom: 28px;
  }

  .predictive-page .section-heading h2,
  .predictive-page .service-cta h2,
  .predictive-page .section-spotlight h2 {
    font-size: clamp(1.625rem, 6.5vw, 2rem);
    line-height: 1.22;
  }

  .predictive-page .highlight-card,
  .predictive-page .process-card,
  .predictive-page .faq-item,
  .predictive-page .report-sample-card,
  .predictive-page .spotlight-grid {
    padding: 20px !important;
  }

  .predictive-page .spec-table {
    min-width: 680px;
  }

  .predictive-page .primary-button,
  .predictive-page .secondary-button {
    width: 100%;
  }

  .predictive-page .platform-screenshot-carousel {
    padding: 12px;
  }

  .predictive-page .platform-carousel-track img {
    max-height: min(360px, 48vh);
  }

  .predictive-page .report-carousel-slide.is-two-up {
    grid-template-columns: 1fr;
  }

  .predictive-page .report-sample-carousel .platform-carousel-track img {
    max-height: min(340px, 44vh);
  }

  .predictive-page .report-carousel-slide.is-two-up img {
    max-height: min(320px, 42vh);
  }

  .predictive-page .workflow-image-row {
    grid-template-columns: 1fr;
  }

  .products-page .product-series-carousel .platform-carousel-window {
    aspect-ratio: 16 / 10;
    max-height: min(360px, 48vh);
  }

  .products-page .product-series-carousel .platform-carousel-track img {
    max-height: none;
  }

  .about-page .about-team-carousel {
    padding: 12px;
  }

  .about-page .about-team-carousel .platform-carousel-track img {
    max-height: min(360px, 48vh);
  }

  .about-page .about-technical-carousel {
    padding: 12px;
  }

  .about-page .about-technical-carousel .platform-carousel-track img {
    max-height: min(380px, 50vh);
  }

  .products-page .sensor-product-showcase {
    padding: 12px;
  }

  .products-page .sensor-showcase-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
  }

  .products-page .sensor-showcase-card {
    padding: 8px;
  }

  .products-page .sensor-showcase-card img {
    height: min(330px, 48vh);
  }
}

@media (max-width: 640px) {
  .products-page .sensor-showcase-track {
    grid-template-columns: 1fr;
  }
}

/* Unified inner-page visual system. Applies the homepage content principles
   to Product, Application Cases, About, and Contact without changing copy. */
.inner-page main {
  font-family: Inter, Manrope, Arial, sans-serif;
  background: #ffffff;
}

.inner-page:not(.predictive-page) .page-hero {
  background:
    linear-gradient(135deg, rgba(11, 12, 16, 0.78), rgba(26, 31, 46, 0.58)),
    radial-gradient(circle at 72% 22%, rgba(0, 229, 255, 0.16), transparent 34%),
    linear-gradient(135deg, #0b0c10 0%, #1a1f2e 100%);
}

.inner-page:not(.predictive-page) .page-hero .section-inner {
  max-width: 1120px;
}

.inner-page:not(.predictive-page) .page-hero h1 {
  font-size: clamp(2.45rem, 4.3vw, 3.9rem);
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -0.018em;
}

.inner-page:not(.predictive-page) .page-hero p:not(.eyebrow):not(.product-hero-seo) {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 1.16vw, 1.16rem);
  line-height: 1.62;
}

.inner-page .hero-actions {
  gap: 16px;
}

.inner-page main > section:not(:first-of-type) {
  position: relative;
  overflow: hidden;
}

.products-page main > section:nth-of-type(2),
.products-page main > section:nth-of-type(4),
.products-page main > section:nth-of-type(6),
.products-page main > section:nth-of-type(8),
.cases-page main > section:nth-of-type(2),
.about-page main > section:nth-of-type(2),
.about-page main > section:nth-of-type(4),
.about-page main > section:nth-of-type(6),
.contact-page main > section:nth-of-type(2) {
  background:
    radial-gradient(circle at 12% 0%, rgba(249, 115, 22, 0.045), transparent 30%),
    #f5f7fa;
}

.products-page main > section:nth-of-type(3),
.products-page main > section:nth-of-type(5),
.products-page main > section:nth-of-type(7),
.products-page main > section:nth-of-type(9),
.cases-page main > section:nth-of-type(3),
.cases-page main > section:nth-of-type(4),
.about-page main > section:nth-of-type(3),
.about-page main > section:nth-of-type(5),
.about-page main > section:nth-of-type(7),
.contact-page main > section:nth-of-type(3) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(245, 247, 250, 0.42) 100%),
    #ffffff;
}

.inner-page:not(.predictive-page) main > section:nth-of-type(3)::after,
.inner-page:not(.predictive-page) main > section:nth-of-type(6)::after,
.inner-page:not(.predictive-page) main > section:last-of-type::after {
  content: "";
  position: absolute;
  right: 7%;
  bottom: -1px;
  width: min(320px, 30vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.38), transparent);
  pointer-events: none;
}

.inner-page:not(.predictive-page) .content-section,
.inner-page:not(.predictive-page) .below-hero-highlights {
  padding: clamp(64px, 7vw, 92px) 0;
}

.inner-page:not(.predictive-page) .section-heading {
  max-width: 820px;
  margin-right: auto;
  margin-bottom: clamp(32px, 4vw, 44px);
  margin-left: auto;
  text-align: center;
}

.inner-page:not(.predictive-page) .section-heading h2,
.inner-page:not(.predictive-page) .service-cta h2,
.inner-page:not(.predictive-page) .section-spotlight h2,
.inner-page:not(.predictive-page) .form-intro h2 {
  color: #0b0c10;
  font-size: clamp(1.65rem, 2.5vw, 2.5rem);
  font-weight: 720;
  line-height: 1.24;
  letter-spacing: -0.012em;
}

.inner-page:not(.predictive-page) .section-heading p,
.inner-page:not(.predictive-page) .spotlight-copy p,
.inner-page:not(.predictive-page) .handoff-note,
.inner-page:not(.predictive-page) .section-note,
.inner-page:not(.predictive-page) .service-cta p,
.inner-page:not(.predictive-page) .split-section > div > p:not(.eyebrow),
.inner-page:not(.predictive-page) .form-intro p {
  color: #4a4a4a;
  font-size: clamp(0.96rem, 1.08vw, 1.06rem);
  line-height: 1.62;
}

.inner-page:not(.predictive-page) .section-heading p {
  margin: 12px auto 0;
}

.inner-page .eyebrow {
  color: #f97316;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.inner-page .highlight-card,
.inner-page .feature-card,
.inner-page .process-card,
.inner-page .industry-card,
.inner-page .faq-item,
.inner-page .case-tile,
.inner-page .roi-summary-grid article,
.inner-page .roi-calculator,
.inner-page .contact-form,
.inner-page .contact-info-card,
.inner-page .report-sample-card,
.inner-page .table-wrap,
.inner-page .spotlight-grid,
.inner-page .series-panel,
.inner-page .insight-list article,
.inner-page .proof-grid div,
.inner-page .logo-placeholder-grid div {
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.18);
}

.inner-page .highlight-card,
.inner-page .feature-card,
.inner-page .process-card,
.inner-page .industry-card,
.inner-page .faq-item,
.inner-page .case-tile,
.inner-page .roi-summary-grid article,
.inner-page .insight-list article,
.inner-page .proof-grid div,
.inner-page .logo-placeholder-grid div {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(22px, 2.2vw, 28px) !important;
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.inner-page .highlight-card:hover,
.inner-page .feature-card:hover,
.inner-page .process-card:hover,
.inner-page .industry-card:hover,
.inner-page .faq-item:hover,
.inner-page .case-tile:hover,
.inner-page .roi-summary-grid article:hover,
.inner-page .insight-list article:hover,
.inner-page .proof-grid div:hover,
.inner-page .logo-placeholder-grid div:hover {
  transform: translateY(-4px);
  border-color: #f97316;
  box-shadow: 0 16px 34px -18px rgba(11, 12, 16, 0.28);
}

.inner-page .highlight-card h3,
.inner-page .feature-card h3,
.inner-page .process-card h3,
.inner-page .industry-card h3,
.inner-page .faq-item h3,
.inner-page .case-tile h3,
.inner-page .roi-summary-grid h3,
.inner-page .series-panel h3,
.inner-page .contact-info-card h2 {
  margin-bottom: 10px;
  color: #0b0c10;
  font-size: clamp(1.08rem, 1.18vw, 1.25rem);
  font-weight: 680;
  line-height: 1.36;
  letter-spacing: 0;
}

.inner-page .highlight-card p,
.inner-page .feature-card p,
.inner-page .process-card p,
.inner-page .industry-card p,
.inner-page .faq-item p,
.inner-page .case-tile p,
.inner-page .roi-summary-grid p,
.inner-page .series-panel p,
.inner-page .contact-info-card p,
.inner-page .insight-list span,
.inner-page .proof-grid p {
  color: #4a4a4a;
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  line-height: 1.62;
}

.inner-page .highlight-metric,
.inner-page .step-number,
.inner-page .roi-summary-grid strong,
.inner-page .case-metrics span,
.inner-page .proof-grid span,
.inner-page .spec-table td:first-child,
.inner-page .product-table td:first-child {
  font-family: Inter, Manrope, Arial, sans-serif;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.inner-page .highlight-metric,
.inner-page .step-number,
.inner-page .roi-summary-grid strong,
.inner-page .proof-grid span {
  color: #f97316;
}

.inner-page .feature-card i,
.inner-page .process-card i,
.inner-page .industry-card i,
.inner-page .case-tile-icon,
.inner-page .highlight-card i {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  font-size: 1.18rem;
}

.inner-page .highlight-grid,
.inner-page .card-grid,
.inner-page .process-grid,
.inner-page .industry-grid,
.inner-page .case-grid,
.inner-page .roi-summary-grid,
.inner-page .faq-list,
.inner-page .logo-placeholder-grid {
  align-items: stretch;
}

.inner-page .handoff-note,
.inner-page .section-note {
  max-width: 880px;
  margin-right: auto;
  margin-left: auto;
  border-left-color: #f97316 !important;
  border-radius: 0 8px 8px 0;
  background: #ffedd5 !important;
  color: #4a2a10 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 10px 24px rgba(249, 115, 22, 0.08) !important;
}

.inner-page .spotlight-grid,
.inner-page .split-section {
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

.inner-page .spotlight-grid {
  padding: clamp(28px, 4vw, 44px);
}

.inner-page .table-wrap {
  overflow-x: auto;
}

.inner-page .spec-table,
.inner-page .product-table {
  min-width: 760px;
  border-collapse: collapse;
}

.inner-page .spec-table th,
.inner-page .spec-table td,
.inner-page .product-table th,
.inner-page .product-table td {
  padding: 16px 18px;
  line-height: 1.55;
  vertical-align: top;
}

.inner-page .spec-table th,
.inner-page .product-table th {
  font-size: 0.92rem;
  font-weight: 750;
}

.inner-page .spec-table td,
.inner-page .product-table td {
  color: #4a4a4a;
  font-size: 0.94rem;
}

.inner-page .series-tabs {
  justify-content: center;
  margin-bottom: 24px;
}

.inner-page .series-tab {
  border-radius: 6px;
}

.inner-page .series-panel {
  padding: clamp(22px, 3vw, 32px);
}

.inner-page .product-image-placeholder,
.inner-page .map-placeholder {
  border-radius: 8px;
  background: #f5f7fa;
}

.inner-page .roi-results > div,
.inner-page .contact-info-list p,
.inner-page .case-metrics span {
  border-radius: 8px;
}

.inner-page .service-cta {
  color: #0b0c10;
  background:
    radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.10), transparent 34%),
    #ffffff;
}

.inner-page .service-cta h2 {
  margin-bottom: 22px;
}

.inner-page .primary-button,
.inner-page .secondary-button,
.inner-page .contact-form button {
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 12px 20px;
  font-size: 0.94rem;
  font-weight: 750;
  line-height: 1.2;
}

@media (max-width: 960px) {
  .inner-page:not(.predictive-page) .section-heading {
    text-align: left;
  }

  .inner-page:not(.predictive-page) .section-heading p,
  .inner-page .handoff-note,
  .inner-page .section-note {
    margin-left: 0;
  }
}

@media (max-width: 620px) {
  .inner-page:not(.predictive-page) .page-hero h1 {
    font-size: clamp(2rem, 8vw, 2.55rem);
  }

  .inner-page:not(.predictive-page) .content-section,
  .inner-page:not(.predictive-page) .below-hero-highlights {
    padding: 56px 0;
  }

  .inner-page:not(.predictive-page) .section-heading {
    margin-bottom: 28px;
  }

  .inner-page:not(.predictive-page) .section-heading h2,
  .inner-page:not(.predictive-page) .service-cta h2,
  .inner-page:not(.predictive-page) .section-spotlight h2,
  .inner-page:not(.predictive-page) .form-intro h2 {
    font-size: clamp(1.625rem, 6.5vw, 2rem);
    line-height: 1.22;
  }

  .inner-page .highlight-card,
  .inner-page .feature-card,
  .inner-page .process-card,
  .inner-page .industry-card,
  .inner-page .faq-item,
  .inner-page .case-tile,
  .inner-page .roi-summary-grid article,
  .inner-page .contact-form,
  .inner-page .contact-info-card,
  .inner-page .series-panel,
  .inner-page .spotlight-grid {
    padding: 20px !important;
  }

  .inner-page .spec-table,
  .inner-page .product-table {
    min-width: 680px;
  }

  .inner-page .primary-button,
  .inner-page .secondary-button,
  .inner-page .contact-form button {
    width: 100%;
  }
}

/* Give yellow guidance notes more breathing room around technical tables. */
.handoff-note + .table-wrap,
.section-note + .table-wrap {
  margin-top: clamp(24px, 3vw, 36px);
}

.table-wrap + .section-note,
.table-wrap + .handoff-note,
.report-sample-card .table-wrap + .section-note {
  margin-top: clamp(28px, 3.2vw, 40px);
}

.handoff-note + .report-sample-card,
.section-note + .report-sample-card {
  margin-top: clamp(24px, 3vw, 36px);
}

.inner-page .handoff-note,
.inner-page .section-note,
.home-page .section-note {
  margin-bottom: clamp(22px, 2.8vw, 34px);
}

.inner-page .table-wrap,
.home-page .table-wrap {
  margin-top: 18px;
}

.inner-page .handoff-note + .table-wrap,
.inner-page .section-note + .table-wrap,
.home-page .section-note + .table-wrap {
  margin-top: clamp(28px, 3vw, 38px);
}

.inner-page .table-wrap + .section-note,
.inner-page .table-wrap + .handoff-note,
.home-page .table-wrap + .section-note {
  margin-top: clamp(30px, 3.2vw, 42px);
}

.products-page #advantages .handoff-note {
  margin-bottom: clamp(36px, 4vw, 52px);
}

.products-page #advantages .card-grid {
  margin-top: 0;
  margin-bottom: clamp(36px, 4vw, 52px);
}

.products-page #advantages .section-note {
  margin-top: 0;
}

.products-page .product-hero-inner {
  grid-template-columns: minmax(0, 1fr);
}

.products-page .product-hero-copy {
  max-width: 920px;
  margin-right: 0;
  margin-left: 0;
  text-align: left;
}

.products-page .product-hero-copy .hero-actions {
  justify-content: flex-start;
}

.products-page .product-hero-copy p {
  margin-left: auto;
  margin-right: 0;
  margin-left: 0;
}

.products-page .product-hero .eyebrow {
  margin-bottom: 10px;
}

.products-page .product-hero h1 {
  max-width: 820px;
  font-size: clamp(2.45rem, 4vw, 3.5rem);
  white-space: nowrap;
}

.products-page .product-hero p:not(.eyebrow):not(.product-hero-seo) {
  margin-top: 16px;
}

.products-page .product-hero .hero-actions {
  margin-top: 28px;
}

.products-page .product-hero-stage {
  display: none;
}

.inner-page:not(.home-page) .page-hero,
.inner-page:not(.home-page) .product-hero,
.inner-page:not(.home-page) .application-hero {
  min-height: 0;
  padding-top: 72px;
  padding-bottom: 72px;
}

.inner-page:not(.home-page) .page-hero .section-inner,
.inner-page:not(.home-page) .product-hero-inner,
.inner-page:not(.home-page) .application-hero .section-inner {
  min-height: 0;
}

.inner-page.products-page .product-hero {
  background: url("assets/img/new/product-banner-blueprint-bottom.png") center bottom / cover no-repeat;
  padding-top: 72px;
  padding-bottom: 72px;
}

.inner-page.products-page .product-hero::before,
.inner-page.products-page .product-hero::after {
  content: none;
}

.products-page .product-hero-inner {
  padding-top: 0;
  padding-bottom: 0;
}

.products-page .product-hero-copy {
  text-shadow: none;
}

.products-page .product-hero h1 {
  color: #0b0c10;
}

.products-page .product-hero p:not(.eyebrow):not(.product-hero-seo) {
  color: #4a4a4a;
}

.products-page .product-hero .secondary-button {
  border-color: rgba(11, 12, 16, 0.34);
  background: rgba(255, 255, 255, 0.58);
  color: #0b0c10;
}

.products-page .product-hero .secondary-button:hover {
  border-color: #f97316;
  background: #ffffff;
  color: #f97316;
}

.cases-page .application-hero .section-inner {
  display: block;
  padding-top: 0;
  padding-bottom: 0;
}

.inner-page.cases-page .application-hero {
  background:
    linear-gradient(90deg, rgba(5, 11, 24, 0.96) 0%, rgba(5, 11, 24, 0.86) 30%, rgba(5, 11, 24, 0.54) 54%, rgba(5, 11, 24, 0.18) 100%),
    linear-gradient(180deg, rgba(5, 11, 24, 0.18), rgba(5, 11, 24, 0.42)),
    url("assets/img/new/application-cases-banner-20260619.png") 58% center / 92% auto no-repeat,
    #050b18 !important;
}

.inner-page.cases-page .application-hero::before,
.inner-page.cases-page .application-hero::after {
  content: none !important;
  display: none !important;
}

@media (min-width: 769px) {
  .inner-page.products-page .product-hero {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .inner-page.cases-page .application-hero {
    padding-top: 73px;
    padding-bottom: 73px;
  }

  .inner-page.cases-page .application-hero {
    background:
      linear-gradient(90deg, rgba(5, 11, 24, 0.96) 0%, rgba(5, 11, 24, 0.86) 30%, rgba(5, 11, 24, 0.54) 54%, rgba(5, 11, 24, 0.18) 100%),
      linear-gradient(180deg, rgba(5, 11, 24, 0.18), rgba(5, 11, 24, 0.42)),
      url("assets/img/new/application-cases-banner-20260619.png") 58% center / 92% auto no-repeat,
      #050b18 !important;
  }

  .inner-page.about-page .page-hero {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .inner-page.contact-page .page-hero {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .inner-page.predictive-page .page-hero {
    padding-top: 90.5px;
    padding-bottom: 90.5px;
  }
}

.cases-page #real-data .handoff-note {
  margin-bottom: clamp(36px, 4vw, 52px);
}

.cases-page #real-data .roi-summary-grid {
  margin-bottom: clamp(44px, 5vw, 64px);
}

.cases-page #real-data .case-showcase-panel {
  position: relative;
  overflow: hidden;
  margin-top: clamp(42px, 5vw, 66px);
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 168, 255, 0.12), transparent 30%),
    radial-gradient(circle at 100% 18%, rgba(249, 115, 22, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(245, 247, 250, 0.72));
  box-shadow:
    0 34px 90px rgba(15, 23, 42, 0.14),
    0 14px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.cases-page #real-data .case-showcase-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.56), transparent 28%),
    linear-gradient(90deg, rgba(0, 168, 255, 0.18), rgba(249, 115, 22, 0.14), rgba(99, 102, 241, 0.14));
  opacity: 0.42;
  pointer-events: none;
}

.cases-page #real-data .case-showcase-panel::after {
  content: "";
  position: absolute;
  left: clamp(22px, 3vw, 42px);
  right: clamp(22px, 3vw, 42px);
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #00a8ff, #22c55e, #f97316, #6366f1);
  opacity: 0.88;
}

.cases-page #real-data .case-showcase-panel > * {
  position: relative;
  z-index: 1;
}

.cases-page #real-data .case-grid + .case-group-heading {
  margin-top: clamp(44px, 5vw, 64px);
}

.cases-page #real-data .case-grid + .section-note {
  margin-top: clamp(44px, 5vw, 64px);
  margin-bottom: 0;
}

.cases-page #real-data .case-showcase-panel + .section-note {
  margin-top: clamp(36px, 4vw, 52px);
  margin-bottom: 0;
}

.cases-page #real-data .roi-proof-carousel {
  margin-top: clamp(36px, 4vw, 54px);
  margin-bottom: clamp(30px, 3.5vw, 46px);
  padding: clamp(14px, 2vw, 22px);
  border: 1px solid rgba(0, 168, 255, 0.22);
  border-radius: 16px;
  background:
    radial-gradient(circle at 16% 0%, rgba(0, 229, 255, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(245, 247, 250, 0.92));
  box-shadow: 0 20px 52px rgba(15, 23, 42, 0.11);
}

.cases-page #real-data .roi-proof-carousel .platform-carousel-window {
  overflow: hidden;
  border: 1px solid rgba(0, 168, 255, 0.18);
  border-radius: 12px;
  background: #ffffff;
}

.cases-page #real-data .roi-proof-carousel .platform-carousel-track {
  display: flex;
  width: 100%;
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.cases-page #real-data .roi-proof-carousel .platform-carousel-track img {
  flex: 0 0 100%;
  min-width: 100%;
  display: block;
  width: 100%;
  max-height: min(660px, 66vh);
  object-fit: contain;
  border-radius: 10px;
  background: #ffffff;
}

.cases-page #real-data .roi-proof-carousel .platform-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.cases-page #real-data .roi-proof-carousel .platform-carousel-dots button {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(0, 168, 255, 0.66);
  border-radius: 50%;
  padding: 0;
  background: rgba(26, 31, 46, 0.16);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.cases-page #real-data .roi-proof-carousel .platform-carousel-dots button:hover,
.cases-page #real-data .roi-proof-carousel .platform-carousel-dots button.is-active {
  transform: scale(1.18);
  background: #00a8ff;
  box-shadow: 0 0 16px rgba(0, 168, 255, 0.42);
}

.cases-page #real-data .case-grid-featured {
  gap: clamp(22px, 2vw, 34px);
}

.cases-page #real-data .case-grid-featured .case-tile {
  --case-accent: #00a8ff;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 168, 255, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(0, 168, 255, 0.34), rgba(249, 115, 22, 0.18), rgba(30, 42, 58, 0.08)) border-box;
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.cases-page #real-data .case-grid-featured .case-tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--case-accent), rgba(249, 115, 22, 0.72), transparent 86%);
  opacity: 0.92;
}

.cases-page #real-data .case-grid-featured .case-tile::after {
  content: "";
  position: absolute;
  right: -82px;
  top: -82px;
  width: 190px;
  height: 190px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--case-accent) 20%, transparent), transparent 68%);
  pointer-events: none;
}

.cases-page #real-data .case-grid-featured .case-tile.case-accent-green {
  --case-accent: #22c55e;
}

.cases-page #real-data .case-grid-featured .case-tile.case-accent-orange {
  --case-accent: #f97316;
}

.cases-page #real-data .case-grid-featured .case-tile.case-accent-indigo {
  --case-accent: #6366f1;
}

.cases-page #real-data .case-grid-featured .case-tile:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--case-accent) 48%, #ffffff);
  box-shadow:
    0 24px 56px rgba(15, 23, 42, 0.13),
    0 10px 26px color-mix(in srgb, var(--case-accent) 14%, transparent);
}

.cases-page #real-data .case-grid-featured .case-tile .case-tile-icon {
  background: linear-gradient(135deg, #1a1f2e, color-mix(in srgb, var(--case-accent) 36%, #1a1f2e));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--case-accent) 18%, transparent);
}

.cases-page #roi-calculator .handoff-note {
  margin-bottom: clamp(36px, 4vw, 52px);
}

@media (max-width: 620px) {
  .handoff-note + .table-wrap,
  .section-note + .table-wrap,
  .table-wrap + .section-note,
  .table-wrap + .handoff-note,
  .report-sample-card .table-wrap + .section-note,
  .handoff-note + .report-sample-card,
  .section-note + .report-sample-card {
    margin-top: 22px;
  }

  .inner-page .handoff-note,
  .inner-page .section-note,
  .home-page .section-note {
    margin-bottom: 22px;
  }

  .inner-page .handoff-note + .table-wrap,
  .inner-page .section-note + .table-wrap,
  .home-page .section-note + .table-wrap,
  .inner-page .table-wrap + .section-note,
  .inner-page .table-wrap + .handoff-note,
  .home-page .table-wrap + .section-note {
    margin-top: 24px;
  }

  .products-page #advantages .handoff-note {
    margin-bottom: 28px;
  }

  .products-page #advantages .card-grid {
    margin-bottom: 28px;
  }

  .products-page .product-hero h1 {
    white-space: normal;
  }

  .cases-page #real-data .handoff-note,
  .cases-page #roi-calculator .handoff-note {
    margin-bottom: 28px;
  }

  .cases-page #real-data .roi-summary-grid,
  .cases-page #real-data .case-grid + .case-group-heading,
  .cases-page #real-data .case-grid + .section-note {
    margin-top: 28px;
    margin-bottom: 28px;
  }

  .cases-page #real-data .roi-proof-carousel {
    padding: 12px;
  }

  .cases-page #real-data .roi-proof-carousel .platform-carousel-track img {
    max-height: min(420px, 58vh);
  }

  .inner-page.cases-page .application-hero {
    background:
      linear-gradient(180deg, rgba(5, 11, 24, 0.94) 0%, rgba(5, 11, 24, 0.78) 50%, rgba(5, 11, 24, 0.64) 100%),
      url("assets/img/new/application-cases-banner-20260619.png") 56% center / cover no-repeat,
      #050b18 !important;
  }
}

@media (max-width: 620px) {
  .inner-page.predictive-page .page-hero h1 {
    font-size: clamp(1.45rem, 6vw, 2.2rem);
    white-space: nowrap;
  }
}

/* Align non-hero inner-page content proportions with the homepage layout. */
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) > .section-inner,
.inner-page:not(.home-page) .content-section > .section-inner,
.inner-page:not(.home-page) .below-hero-highlights > .section-inner,
.inner-page:not(.home-page) .service-cta > .section-inner {
  width: min(1760px, calc(100% - 64px));
}

.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .section-heading {
  max-width: 900px;
}

.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .section-heading h2,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .service-cta h2,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .section-spotlight h2,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .form-intro h2,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .roi-title {
  font-size: clamp(1.85rem, 2.75vw, 2.85rem);
  line-height: 1.24;
}

.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .section-heading p,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .spotlight-copy p,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .handoff-note,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .section-note,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .service-cta p,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .split-section > div > p:not(.eyebrow),
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .form-intro p {
  max-width: 900px;
  font-size: clamp(1.02rem, 1.18vw, 1.16rem);
  line-height: 1.62;
}

.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .highlight-card h3,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .feature-card h3,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .process-card h3,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .industry-card h3,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .faq-item h3,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .case-tile h3,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .roi-summary-grid h3,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .series-panel h3,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .contact-info-card h2 {
  font-size: clamp(1.15rem, 1.28vw, 1.38rem);
}

.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .highlight-card p,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .feature-card p,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .process-card p,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .industry-card p,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .faq-item p,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .case-tile p,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .roi-summary-grid p,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .series-panel p,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .contact-info-card p,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .insight-list span,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .proof-grid p {
  font-size: clamp(0.96rem, 1.04vw, 1.08rem);
  line-height: 1.62;
}

.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .spec-table th,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .spec-table td,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .product-table th,
.inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .product-table td {
  padding: 17px 20px;
}

@media (max-width: 960px) {
  .inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) > .section-inner,
  .inner-page:not(.home-page) .content-section > .section-inner,
  .inner-page:not(.home-page) .below-hero-highlights > .section-inner,
  .inner-page:not(.home-page) .service-cta > .section-inner {
    width: min(100% - 40px, 1760px);
  }
}

@media (max-width: 620px) {
  .inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) > .section-inner,
  .inner-page:not(.home-page) .content-section > .section-inner,
  .inner-page:not(.home-page) .below-hero-highlights > .section-inner,
  .inner-page:not(.home-page) .service-cta > .section-inner {
    width: min(100% - 32px, 1760px);
  }

  .inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .section-heading h2,
  .inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .service-cta h2,
  .inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .section-spotlight h2,
  .inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .form-intro h2,
  .inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .roi-title {
    font-size: clamp(1.625rem, 6.5vw, 2rem);
    line-height: 1.22;
  }

  .inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .section-heading p,
  .inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .spotlight-copy p,
  .inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .handoff-note,
  .inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .section-note,
  .inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .service-cta p,
  .inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .split-section > div > p:not(.eyebrow),
  .inner-page:not(.home-page) main > section:not(.page-hero):not(.product-hero):not(.application-hero) .form-intro p {
    font-size: 0.95rem;
    line-height: 1.65;
  }
}

/* Contact page banner: mechanical blueprint background. */
.contact-page .page-hero.hero-contact {
  background:
    linear-gradient(90deg, rgba(5, 11, 24, 0.68) 0%, rgba(5, 11, 24, 0.38) 38%, rgba(5, 11, 24, 0.08) 72%, rgba(5, 11, 24, 0.02) 100%),
    linear-gradient(180deg, rgba(5, 11, 24, 0.22), rgba(5, 11, 24, 0.16)),
    url("assets/img/new/contact-banner-blueprint.png") center 46% / cover no-repeat;
  color: #0b0c10;
}

.contact-page .page-hero.hero-contact::before,
.contact-page .page-hero.hero-contact::after {
  content: none;
}

.contact-page .page-hero.hero-contact h1 {
  color: #ffffff;
  text-shadow:
    0 4px 18px rgba(0, 0, 0, 0.58),
    0 14px 38px rgba(5, 11, 24, 0.52);
}

.contact-page .page-hero.hero-contact p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.88);
  text-shadow:
    0 3px 14px rgba(0, 0, 0, 0.56),
    0 10px 30px rgba(5, 11, 24, 0.42);
}

.contact-page .page-hero.hero-contact .section-inner {
  width: min(1120px, calc(100% - 64px));
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.contact-page .page-hero.hero-contact .secondary-button {
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.06);
  color: #0b0c10 !important;
}

.contact-page .page-hero.hero-contact .secondary-button:visited,
.contact-page .page-hero.hero-contact .secondary-button:hover,
.contact-page .page-hero.hero-contact .secondary-button:focus {
  border-color: #f97316;
  background: #ffffff;
  color: #0b0c10 !important;
}

.predictive-page #tech-specs .section-heading {
  max-width: 1180px;
}

.predictive-page #tech-specs .section-heading h2 {
  white-space: nowrap;
}

.predictive-page .pricing-estimate-note {
  max-width: 100%;
}

@media (min-width: 961px) {
  .predictive-page .pricing-estimate-note {
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .contact-page .page-hero.hero-contact {
    background:
      linear-gradient(180deg, rgba(5, 11, 24, 0.78) 0%, rgba(5, 11, 24, 0.48) 52%, rgba(5, 11, 24, 0.24) 100%),
      url("assets/img/new/contact-banner-blueprint.png") center 44% / cover no-repeat;
  }

  .predictive-page #tech-specs .section-heading h2 {
    white-space: normal;
  }
}

/* Match all non-home banners to the homepage banner frame for stronger image display. */
.inner-page:not(.home-page) main > .page-hero,
.inner-page:not(.home-page) main > .product-hero,
.inner-page:not(.home-page) main > .application-hero {
  width: min(calc(100% - 50px), 1760px) !important;
  min-height: clamp(580px, 72vh, 720px) !important;
  max-height: 740px !important;
  margin: 16px auto 18px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.inner-page:not(.home-page) main > .page-hero > .section-inner,
.inner-page:not(.home-page) main > .product-hero .product-hero-inner,
.inner-page:not(.home-page) main > .application-hero > .section-inner {
  min-height: clamp(580px, 72vh, 720px) !important;
  max-height: 740px !important;
  display: grid !important;
  align-content: center !important;
}

@media (max-width: 900px) {
  .inner-page:not(.home-page) main > .page-hero,
  .inner-page:not(.home-page) main > .product-hero,
  .inner-page:not(.home-page) main > .application-hero {
    width: calc(100% - 20px) !important;
    min-height: clamp(560px, 72vh, 640px) !important;
    max-height: 78vh !important;
    border-radius: 8px !important;
  }

  .inner-page:not(.home-page) main > .page-hero > .section-inner,
  .inner-page:not(.home-page) main > .product-hero .product-hero-inner,
  .inner-page:not(.home-page) main > .application-hero > .section-inner {
    min-height: clamp(560px, 72vh, 640px) !important;
    max-height: 78vh !important;
  }
}

/* Inner-page banner image clarity pass: no overlay filters or backing blocks. */
.inner-page:not(.home-page) main > .page-hero::before,
.inner-page:not(.home-page) main > .page-hero::after,
.inner-page:not(.home-page) main > .product-hero::before,
.inner-page:not(.home-page) main > .product-hero::after,
.inner-page:not(.home-page) main > .application-hero::before,
.inner-page:not(.home-page) main > .application-hero::after,
.inner-page:not(.home-page) main > .page-hero > .section-inner::before,
.inner-page:not(.home-page) main > .product-hero .product-hero-inner::before,
.inner-page:not(.home-page) main > .application-hero > .section-inner::before {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

.inner-page.predictive-page main > .page-hero:not(.hero-predictive) {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.18) 48%, rgba(255, 255, 255, 0.12) 100%),
    url("assets/img/new/predictive-banner-dashboard.png") center center / cover no-repeat !important;
  background-blend-mode: screen, normal;
}

.inner-page.products-page main > .product-hero {
  background: url("assets/img/new/product-banner-gearbox.png") center center / cover no-repeat !important;
}

.inner-page.cases-page main > .application-hero {
  background: url("assets/img/new/application-cases-banner-20260619.png") center center / cover no-repeat !important;
}

.inner-page.cases-page main > .application-hero {
  display: grid !important;
  place-items: center !important;
}

.inner-page.contact-page main > .page-hero.hero-contact {
  background: url("assets/img/new/contact-banner-blueprint.png") center 46% / cover no-repeat !important;
}

.inner-page.about-page main > .page-hero {
  background: linear-gradient(135deg, #0b0c10 0%, #1a1f2e 100%) !important;
}

.inner-page:not(.home-page) main > .page-hero > .section-inner,
.inner-page:not(.home-page) main > .product-hero .product-hero-inner,
.inner-page:not(.home-page) main > .application-hero > .section-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.inner-page:not(.home-page) main > .page-hero h1,
.inner-page:not(.home-page) main > .page-hero p:not(.eyebrow):not(.product-hero-seo),
.inner-page:not(.home-page) main > .product-hero h1,
.inner-page:not(.home-page) main > .product-hero p:not(.eyebrow):not(.product-hero-seo),
.inner-page:not(.home-page) main > .application-hero h1,
.inner-page:not(.home-page) main > .application-hero p:not(.eyebrow):not(.product-hero-seo) {
  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.72),
    0 12px 34px rgba(0, 0, 0, 0.6) !important;
}

.inner-page.products-page main > .product-hero h1,
.inner-page.products-page main > .product-hero p:not(.eyebrow):not(.product-hero-seo) {
  color: #0b0c10 !important;
  text-shadow:
    0 2px 8px rgba(255, 255, 255, 0.86),
    0 10px 28px rgba(255, 255, 255, 0.72) !important;
}

.inner-page.products-page main > .product-hero .primary-button,
.inner-page.products-page main > .product-hero .secondary-button {
  color: #0b0c10 !important;
}

/* Product banner readability: keep the image, add a light support panel for black copy. */
.inner-page.products-page main > .product-hero .product-hero-copy {
  width: min(920px, 58vw) !important;
  padding: clamp(28px, 3.5vw, 46px) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    0 24px 72px rgba(11, 12, 16, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

.inner-page.products-page main > .product-hero h1 {
  color: #05070c !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.inner-page.products-page main > .product-hero p:not(.eyebrow):not(.product-hero-seo) {
  color: #1a1f2e !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

.inner-page.products-page main > .product-hero .primary-button {
  background: #f97316 !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(249, 115, 22, 0.28) !important;
}

.inner-page.products-page main > .product-hero .secondary-button {
  border-color: rgba(11, 12, 16, 0.5) !important;
  background: rgba(255, 255, 255, 0.68) !important;
  color: #0b0c10 !important;
}

@media (max-width: 900px) {
  .inner-page.products-page main > .product-hero .product-hero-copy {
    width: min(100%, 760px) !important;
    padding: 24px 20px !important;
    background: rgba(255, 255, 255, 0.78) !important;
  }
}

@media (max-width: 900px) {
  .inner-page.predictive-page main > .page-hero:not(.hero-predictive) {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.18) 48%, rgba(255, 255, 255, 0.12) 100%),
      url("assets/img/new/predictive-banner-dashboard.png") center center / cover no-repeat !important;
    background-blend-mode: screen, normal;
  }

  .inner-page.cases-page main > .application-hero {
    background: url("assets/img/new/application-cases-banner-20260619.png") center center / cover no-repeat !important;
  }

  .inner-page.contact-page main > .page-hero.hero-contact {
    background: url("assets/img/new/contact-banner-blueprint.png") center 44% / cover no-repeat !important;
  }
}

/* Predictive Service banner: move copy into the darker left image area. */
.inner-page.predictive-page main > .page-hero > .section-inner {
  width: min(1760px, calc(100% - 60px)) !important;
  justify-items: start !important;
  text-align: left !important;
}

.inner-page.predictive-page main > .page-hero h1,
.inner-page.predictive-page main > .page-hero p:not(.eyebrow) {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.48);
}

.inner-page.predictive-page main > .page-hero .hero-actions {
  justify-content: flex-start !important;
}

@media (max-width: 900px) {
  .inner-page.predictive-page main > .page-hero > .section-inner {
    width: min(100% - 24px, 1760px) !important;
  }
}

/* About banner: use product gearbox image directly, no filter or backing block. */
.inner-page.about-page main > .page-hero.hero-about {
  background: url("assets/img/new/product-banner-blueprint-bottom.png") center bottom / cover no-repeat !important;
}

.inner-page.about-page main > .page-hero.hero-about::before,
.inner-page.about-page main > .page-hero.hero-about::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.inner-page.about-page main > .page-hero.hero-about > .section-inner {
  justify-items: start !important;
  text-align: left !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.inner-page.about-page main > .page-hero.hero-about h1,
.inner-page.about-page main > .page-hero.hero-about p:not(.eyebrow) {
  color: #ffffff !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.72),
    0 12px 34px rgba(0, 0, 0, 0.6) !important;
}

.inner-page.about-page main > .page-hero.hero-about .hero-actions {
  justify-content: flex-start !important;
}

.inner-page.about-page main > .page-hero.hero-about .secondary-button {
  color: #0b0c10 !important;
}

/* Application Cases banner copy treatment: centered text without a backing block. */
.inner-page.cases-page main > .application-hero > .section-inner {
  justify-items: center !important;
  text-align: center !important;
}

.inner-page.cases-page main > .application-hero > .section-inner {
  width: min(1120px, calc(100% - 96px)) !important;
  min-height: auto !important;
  padding: clamp(30px, 3.4vw, 44px) clamp(34px, 4.2vw, 56px) clamp(36px, 4vw, 52px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(0, 168, 255, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(5, 11, 24, 0.58), rgba(5, 11, 24, 0.38)) !important;
  box-shadow:
    0 30px 86px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(10px);
  transform: translateY(-58px);
}

.inner-page.cases-page main > .application-hero h1,
.inner-page.cases-page main > .application-hero p:not(.eyebrow):not(.product-hero-seo) {
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.18 !important;
  text-shadow:
    0 4px 16px rgba(0, 0, 0, 0.78),
    0 16px 44px rgba(0, 0, 0, 0.66) !important;
}

.inner-page.cases-page main > .application-hero p:not(.eyebrow):not(.product-hero-seo) {
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  color: #ffffff !important;
  font-size: clamp(1rem, 1.16vw, 1.2rem) !important;
  font-weight: 700;
  white-space: nowrap;
}

.inner-page.cases-page main > .application-hero .hero-actions {
  justify-content: center !important;
}

.inner-page.cases-page main > .application-hero .secondary-button {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.98) !important;
  color: #06101f !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28) !important;
  text-shadow: none !important;
}

.inner-page.cases-page main > .application-hero .secondary-button:hover {
  background: #ffffff !important;
  color: #06101f !important;
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .inner-page.cases-page main > .application-hero > .section-inner {
    width: min(100% - 40px, 680px) !important;
    min-height: auto !important;
    padding: 28px 22px 34px !important;
    border-radius: 14px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(0, 168, 255, 0.14), transparent 34%),
      linear-gradient(135deg, rgba(5, 11, 24, 0.62), rgba(5, 11, 24, 0.44)) !important;
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-18px);
  }

  .inner-page.cases-page main > .application-hero p:not(.eyebrow):not(.product-hero-seo) {
    white-space: normal;
    line-height: 1.35 !important;
    font-size: clamp(1rem, 4.2vw, 1.16rem) !important;
  }
}

/* Home FAQ clarity: separate Common Questions from adjacent value and CTA blocks. */
.home-page .home-faq-section {
  background:
    radial-gradient(circle at 12% 8%, rgba(41, 128, 185, 0.2), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(249, 115, 22, 0.08), transparent 24%),
    linear-gradient(180deg, #dfe8f1 0%, #edf2f7 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(164, 180, 196, 0.78) !important;
}

.home-page main > section.content-section.muted-section.home-faq-section {
  background:
    radial-gradient(circle at 12% 8%, rgba(41, 128, 185, 0.2), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(249, 115, 22, 0.08), transparent 24%),
    linear-gradient(180deg, #dfe8f1 0%, #edf2f7 100%) !important;
}

.home-page .home-faq-section .section-heading {
  max-width: 960px;
}

.home-page .home-faq-section .faq-list {
  margin-top: clamp(28px, 3vw, 44px);
}

.home-page .home-faq-section .faq-item {
  border-color: rgba(173, 189, 204, 0.82) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9)) !important;
  box-shadow:
    0 18px 42px -28px rgba(11, 12, 16, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.home-page .home-faq-section .faq-item:hover {
  border-color: rgba(249, 115, 22, 0.8) !important;
  background: #ffffff !important;
}

.home-page .home-practical-value-section {
  box-shadow: inset 0 -1px 0 rgba(210, 219, 229, 0.72) !important;
}

.home-page .cta-section {
  box-shadow: inset 0 1px 0 rgba(210, 219, 229, 0.72) !important;
}

/* Home layout after removing the warning-to-replacement timeline block. */
.home-page .roi-banner {
  margin-top: 0;
}

.home-page .home-practical-value-section {
  background:
    radial-gradient(circle at 88% 8%, rgba(249, 115, 22, 0.045), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

.home-page .cta-section {
  background: #ffffff !important;
}

/* Home final CTA: clearer free-pilot copy and single-column form for trust. */
.home-page #home-contact-form {
  grid-template-columns: 1fr !important;
  gap: 14px;
}

.home-page #home-contact-form .full-field,
.home-page #home-contact-form .form-message,
.home-page #home-contact-form .form-button {
  grid-column: 1 / -1;
}

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

.home-page #home-contact-form .privacy-note {
  margin: -2px 0 0;
  color: #6b7280;
  font-size: 0.92rem;
  line-height: 1.5;
}

.home-page #home-contact-form .form-button {
  width: 100%;
  margin-top: 2px;
}

/* Home merged ROI and Practical Value section. */
.home-page .home-roi-value-section {
  padding: clamp(64px, 6vw, 92px) 0 !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(249, 115, 22, 0.095), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(41, 128, 185, 0.1), transparent 28%),
    linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%) !important;
  color: #0b0c10 !important;
}

.home-page .home-roi-value-section .section-inner {
  display: grid;
  gap: clamp(30px, 4vw, 52px);
}

.home-page .roi-case-block {
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}

.home-page .home-roi-value-section .roi-title,
.home-page .home-roi-value-section .roi-story {
  color: #0b0c10 !important;
}

.home-page .home-roi-value-section .roi-story {
  margin-top: 12px;
}

.home-page .home-roi-value-section .roi-tags {
  justify-content: center;
}

.home-page .roi-practical-block {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(520px, 1.12fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid rgba(210, 219, 229, 0.9);
}

.home-page .roi-practical-copy h2 {
  color: #0b0c10;
  font-size: clamp(1.85rem, 2.75vw, 2.85rem);
  line-height: 1.24;
}

.home-page .roi-practical-copy p {
  margin-top: 14px;
  color: #4a4a4a;
  font-size: clamp(1.02rem, 1.18vw, 1.16rem);
  line-height: 1.62;
}

.home-page .roi-action-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 20px;
}

.home-page .roi-action-links .text-link {
  margin-top: 0;
}

.home-page .roi-proof-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.home-page .roi-proof-grid div {
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  padding: clamp(18px, 1.9vw, 24px) !important;
}

.home-page .roi-proof-grid i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #1a1f2e;
  color: #ffffff;
  font-size: 0.95rem;
}

.home-page .roi-proof-grid span {
  margin-bottom: 0;
}

.home-page .roi-dashboard-proof {
  display: grid;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
  padding-top: clamp(24px, 3.4vw, 42px);
  border-top: 1px solid rgba(210, 219, 229, 0.9);
}

.home-page .roi-dashboard-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.home-page .roi-dashboard-heading h3 {
  margin: 0;
  color: #0b0c10;
  font-size: clamp(1.45rem, 2vw, 2.05rem);
  line-height: 1.25;
}

.home-page .roi-dashboard-heading p {
  margin: 0;
  color: #5d6673;
  font-size: clamp(1rem, 1.02vw, 1.08rem);
  line-height: 1.5;
}

.home-page .roi-dashboard-frame {
  margin: 0;
  padding: clamp(12px, 1.4vw, 18px);
  border: 1px solid rgba(210, 219, 229, 0.95);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);
}

.home-page .roi-dashboard-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(620px, 62vh);
  object-fit: contain;
  border-radius: 8px;
}

.home-page .home-roi-carousel {
  display: block;
}

.home-page .home-roi-carousel .platform-carousel-window {
  overflow: hidden;
  border: 1px solid rgba(20, 60, 102, 0.12);
  border-radius: 10px;
  background: #06152b;
}

.home-page .home-roi-carousel .platform-carousel-track {
  display: flex;
  width: 100%;
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.home-page .home-roi-carousel .platform-carousel-track img {
  flex: 0 0 100%;
  min-width: 100%;
  display: block;
  width: 100%;
  height: auto;
  max-height: min(620px, 62vh);
  object-fit: contain;
  background: #06152b;
  border-radius: 8px;
}

.home-page .home-roi-carousel .platform-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.home-page .home-roi-carousel .platform-carousel-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.24);
  cursor: pointer;
  transition: width 180ms ease, background 180ms ease, transform 180ms ease;
}

.home-page .home-roi-carousel .platform-carousel-dots button.is-active {
  width: 26px;
  background: #f97316;
}

.home-page .home-roi-carousel .platform-carousel-dots button:hover {
  transform: translateY(-1px);
  background: #ea580c;
}

.home-page .roi-dashboard-frame figcaption {
  margin-top: 10px;
  color: #697386;
  font-size: 0.98rem;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .home-page .roi-practical-block {
    grid-template-columns: 1fr;
  }

  .home-page .roi-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .home-page .roi-dashboard-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-page .roi-proof-grid {
    grid-template-columns: 1fr;
  }
}

/* Product page: keep the moved industry-fit block visually separated after Product Series. */
.products-page .product-industries-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.82)),
    url("assets/img/new/series-details-blueprint-bottom.png") center center / cover no-repeat !important;
  color: #0b0c10;
}

.products-page .product-industries-section::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(0, 115, 180, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.72));
  pointer-events: none;
}

.products-page .product-industries-section .section-inner {
  position: relative;
  z-index: 1;
}

.products-page .product-industries-section .section-heading h2,
.products-page .product-industries-section .section-heading p {
  color: #0b0c10 !important;
}

.products-page .product-industries-section .industry-card {
  background: #ffffff !important;
  border-color: #e4e7ec !important;
  box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: none !important;
}

.products-page .product-industries-section .industry-card h3,
.products-page .product-industries-section .industry-card p {
  color: #0b0c10 !important;
}

.products-page .product-industries-section .industry-card i {
  background: #eef8fc !important;
  color: #0b5f86 !important;
  border: 1px solid rgba(0, 115, 180, 0.18);
}

.products-page .product-industries-section + .content-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(245, 247, 250, 0.3) 100%),
    #ffffff !important;
}

/* Home risk section: balance the left explanation with a right-side summary CTA. */
.home-page .home-risk-section {
  position: relative;
  overflow: hidden;
  background-color: #f5f7fa !important;
  background-image: url("assets/img/new/机械蓝图图案生成 (15).png") !important;
  background-size: cover !important;
  background-position: center 42% !important;
  background-repeat: no-repeat !important;
}

.home-page .home-risk-section::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 7, 14, 0.46) 0%, rgba(3, 7, 14, 0.46) 48%, rgba(3, 7, 14, 0.46) 100%);
  pointer-events: none;
}

.home-page .home-risk-section > * {
  position: relative;
  z-index: 1;
}

.home-page main > section.content-section.home-risk-section {
  background-color: #f5f7fa !important;
  background-image: url("assets/img/new/机械蓝图图案生成 (15).png") !important;
  background-size: cover !important;
  background-position: center 42% !important;
  background-repeat: no-repeat !important;
}

.home-page .home-risk-section .home-risk-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  align-items: center;
  gap: clamp(42px, 5vw, 84px);
}

.home-page .home-risk-section .home-risk-grid > div:first-child h2 {
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 12px 32px rgba(0, 0, 0, 0.36);
}

.home-page .home-risk-section .home-risk-grid > div:first-child p {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

/* Product Selection Guide: use the matching mechanical blueprint background. */
.products-page .product-selection-bg-section {
  position: relative;
  overflow: hidden;
  background-color: #f5f7fa !important;
  background-image: url("assets/img/new/机械蓝图图案生成 (14).png") !important;
  background-size: cover !important;
  background-position: center 48% !important;
  background-repeat: no-repeat !important;
}

.products-page .product-selection-bg-section::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 7, 14, 0.46) 0%, rgba(3, 7, 14, 0.46) 48%, rgba(3, 7, 14, 0.46) 100%);
  pointer-events: none;
}

.products-page .product-selection-bg-section > * {
  position: relative;
  z-index: 1;
}

.products-page .product-selection-bg-section .split-section > div:first-child .eyebrow {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 800;
}

.products-page .product-selection-bg-section .split-section > div:first-child h2 {
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 12px 32px rgba(0, 0, 0, 0.36);
}

.products-page .product-selection-bg-section .split-section > div:first-child p {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

/* About Cooperation Process: mechanical blueprint background with matching readability filter. */
.about-page .about-cooperation-bg-section {
  position: relative;
  overflow: hidden;
  background-color: #f5f7fa !important;
  background-image: url("assets/img/new/机械蓝图图案生成 (5).png") !important;
  background-size: cover !important;
  background-position: center 48% !important;
  background-repeat: no-repeat !important;
}

.about-page .about-cooperation-bg-section::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 7, 14, 0.46) 0%, rgba(3, 7, 14, 0.46) 48%, rgba(3, 7, 14, 0.46) 100%);
  pointer-events: none;
}

.about-page .about-cooperation-bg-section > * {
  position: relative;
  z-index: 1;
}

.about-page .about-cooperation-bg-section .section-heading h2 {
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 12px 32px rgba(0, 0, 0, 0.36);
}

.about-page .about-cooperation-bg-section .section-heading p {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

.about-page .about-cooperation-bg-section .process-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.54);
  box-shadow: 0 18px 44px rgba(3, 7, 14, 0.18);
}

.home-page .home-risk-section .insight-list {
  gap: 16px;
}

.home-page .home-risk-section .insight-list article {
  padding: 20px 22px;
}

.home-page .risk-summary-card {
  margin-top: clamp(18px, 2.2vw, 28px);
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(249, 115, 22, 0.26);
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 0%, rgba(249, 115, 22, 0.09), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
  box-shadow: 0 18px 46px -30px rgba(11, 12, 16, 0.32);
}

.home-page .risk-summary-card h3 {
  margin-bottom: 10px;
  color: #0b0c10;
  font-size: clamp(1.15rem, 1.45vw, 1.45rem);
  line-height: 1.35;
}

.home-page .risk-summary-card p {
  margin-top: 8px;
  color: #4a4a4a;
  font-size: clamp(0.98rem, 1.05vw, 1.08rem);
  line-height: 1.6;
}

.home-page .risk-summary-card .risk-summary-tags {
  color: #1a1f2e;
  font-weight: 700;
}

.home-page .risk-summary-card .text-link {
  margin-top: 18px;
}

@media (max-width: 960px) {
  .home-page .home-risk-section .home-risk-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* About banner: keep Request Free Pilot text black in every link state. */
.inner-page.about-page main > .page-hero.hero-about .hero-actions a.secondary-button,
.inner-page.about-page main > .page-hero.hero-about .hero-actions a.secondary-button:visited,
.inner-page.about-page main > .page-hero.hero-about .hero-actions a.secondary-button:hover,
.inner-page.about-page main > .page-hero.hero-about .hero-actions a.secondary-button:focus {
  color: #0b0c10 !important;
  text-shadow: none !important;
}

/* Product banner: remove the large white panel and support only the text itself. */
.inner-page.products-page main > .product-hero .product-hero-copy {
  width: min(900px, 58vw) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.inner-page.products-page main > .product-hero h1,
.inner-page.products-page main > .product-hero p:not(.eyebrow):not(.product-hero-seo) {
  display: table !important;
  max-width: 100% !important;
  padding: 0.04em 0.16em 0.08em !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: #05070c !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92),
    0 0 18px rgba(255, 255, 255, 0.98),
    0 14px 34px rgba(255, 255, 255, 0.72) !important;
}

.inner-page.products-page main > .product-hero h1::after {
  content: none !important;
}

.inner-page.products-page main > .product-hero p:not(.eyebrow):not(.product-hero-seo) {
  margin-top: 22px !important;
  background: rgba(255, 255, 255, 0.78) !important;
}

.inner-page.products-page main > .product-hero .hero-actions {
  margin-top: 34px !important;
}

@media (max-width: 900px) {
  .inner-page.products-page main > .product-hero .product-hero-copy {
    width: min(100%, 760px) !important;
    padding: 0 !important;
    background: transparent !important;
  }
}

/* Final Product banner title override: white text, no white backing strip. */
.inner-page.products-page main > .product-hero h1 {
  display: block !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.72),
    0 12px 34px rgba(0, 0, 0, 0.62) !important;
}

/* Final Product banner subtitle override: white text, no backing strip. */
.inner-page.products-page main > .product-hero p:not(.eyebrow):not(.product-hero-seo) {
  display: block !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.76),
    0 12px 34px rgba(0, 0, 0, 0.68) !important;
}

/* Footer bottom bar: use the site's deep industrial tone for a stronger ending. */
.site-footer .footer-bottom {
  margin-top: clamp(24px, 3vw, 38px) !important;
  padding: 18px 22px !important;
  border-top: 0 !important;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, rgba(11, 12, 16, 0.86) 0%, rgba(26, 31, 46, 0.74) 46%, rgba(11, 12, 16, 0.9) 100%),
    url("assets/img/new/footer-blueprint-bg.png") 72% 42% / 170% auto no-repeat !important;
  color: #d1d5db !important;
}

/* Footer full background: use the selected mechanical blueprint image behind the panel. */
.site-footer {
  background:
    linear-gradient(135deg, rgba(238, 247, 251, 0.88) 0%, rgba(248, 250, 252, 0.8) 44%, rgba(230, 238, 244, 0.86) 100%),
    url("assets/img/new/footer-blueprint-bg.png") 74% 40% / 138% auto no-repeat !important;
}

/* Predictive Service Overview table: clearer proportions and text placement. */
.predictive-page #tech-specs {
  background:
    radial-gradient(circle at 96% 0%, rgba(41, 128, 185, 0.08), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%) !important;
}

.predictive-page #tech-specs .section-inner {
  display: grid;
  gap: clamp(26px, 3vw, 38px);
}

.predictive-page #tech-specs .section-heading {
  max-width: 1040px !important;
  margin: 0 auto;
  text-align: center;
}

.predictive-page #tech-specs .section-heading p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.predictive-page #tech-specs .table-wrap {
  border-radius: 14px;
  border: 1px solid rgba(26, 31, 46, 0.1);
  background: #ffffff;
  box-shadow: 0 22px 54px rgba(26, 31, 46, 0.08);
}

.predictive-page #tech-specs .customer-tech-table {
  min-width: 1040px;
  table-layout: fixed;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.predictive-page #tech-specs .customer-tech-table th,
.predictive-page #tech-specs .customer-tech-table td {
  padding: 18px 22px;
  line-height: 1.62;
  vertical-align: top;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.predictive-page #tech-specs .customer-tech-table thead th {
  background: #1a1f2e;
  color: #ffffff;
  font-size: 0.95rem;
  letter-spacing: 0;
  font-weight: 700;
}

.predictive-page #tech-specs .customer-tech-table th:nth-child(1),
.predictive-page #tech-specs .customer-tech-table td:nth-child(1) {
  width: 76px;
  text-align: center;
}

.predictive-page #tech-specs .customer-tech-table tbody td:nth-child(1) {
  color: #f97316;
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  font-weight: 800;
}

.predictive-page #tech-specs .customer-tech-table thead th:nth-child(1) {
  color: #ffffff;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.predictive-page #tech-specs .customer-tech-table th:nth-child(2),
.predictive-page #tech-specs .customer-tech-table td:nth-child(2),
.predictive-page #tech-specs .customer-tech-table tbody th {
  width: 260px;
  color: #0b0c10;
  font-weight: 780;
}

.predictive-page #tech-specs .customer-tech-table th:nth-child(3),
.predictive-page #tech-specs .customer-tech-table td:nth-child(3) {
  width: auto;
  color: #4a4a4a;
}

.predictive-page #tech-specs .customer-tech-table tbody tr:nth-child(even) {
  background: rgba(245, 247, 250, 0.72);
}

.predictive-page #tech-specs .customer-tech-table tbody tr:hover {
  background: #fff7ed;
}

@media (max-width: 768px) {
  .predictive-page #tech-specs .section-heading {
    text-align: left;
  }

  .predictive-page #tech-specs .customer-tech-table {
    min-width: 920px;
  }
}

/* Footer redesign: one cohesive light industrial panel with a stronger contact area. */
.site-footer {
  padding: clamp(54px, 5.5vw, 82px) 24px 28px !important;
  background:
    radial-gradient(circle at 12% 16%, rgba(0, 229, 255, 0.16), transparent 30%),
    radial-gradient(circle at 86% 10%, rgba(249, 115, 22, 0.13), transparent 25%),
    linear-gradient(180deg, #f8fafc 0%, #edf4f8 58%, #e6eef4 100%) !important;
  color: #1a1f2e !important;
  border-top: 1px solid rgba(26, 31, 46, 0.08) !important;
}

.site-footer::before {
  background:
    linear-gradient(115deg, rgba(41, 128, 185, 0.08) 0%, transparent 34%),
    linear-gradient(90deg, rgba(26, 31, 46, 0.035) 1px, transparent 1px);
  background-size: auto, 112px 112px;
  opacity: 1;
}

.footer-inner {
  width: min(1760px, calc(100% - 64px)) !important;
  gap: 0 !important;
  padding: clamp(26px, 3vw, 44px) !important;
  border: 1px solid rgba(26, 31, 46, 0.1);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
  box-shadow:
    0 26px 70px rgba(26, 31, 46, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.footer-inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #2980b9, #00bcd4 45%, #f97316);
}

.footer-card {
  padding: 4px clamp(22px, 2.4vw, 38px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.footer-card:nth-child(1),
.footer-card:nth-child(2) {
  border-right: 1px solid rgba(26, 31, 46, 0.1) !important;
}

.footer-card:nth-child(3) {
  margin-left: clamp(18px, 2vw, 30px);
  padding: clamp(20px, 2vw, 28px) !important;
  border: 1px solid rgba(249, 115, 22, 0.22) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(249, 115, 22, 0.13), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fff7ed 100%) !important;
}

.footer-card h2 {
  color: #0b0c10 !important;
  font-size: 1.05rem !important;
}

.footer-card:nth-child(3) h2 {
  color: #f97316 !important;
}

.footer-logo-img {
  width: 78px !important;
  height: 78px !important;
  border: 1px solid rgba(41, 128, 185, 0.12);
  box-shadow: 0 14px 34px rgba(41, 128, 185, 0.18) !important;
}

.footer-card p,
.footer-trust-list li,
.footer-link-list li,
.footer-contact-list li {
  color: #4a4a4a !important;
}

.footer-trust-list li,
.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.footer-trust-list i,
.footer-contact-list i {
  margin-right: 0 !important;
  color: #2980b9 !important;
}

.footer-contact-list i {
  color: #f97316 !important;
}

.footer-link-list a,
.footer-contact-list a {
  color: #1a1f2e !important;
  font-weight: 650;
}

.footer-link-list a:hover,
.footer-contact-list a:hover {
  color: #f97316 !important;
}

.footer-social {
  border-top: 1px solid rgba(249, 115, 22, 0.16) !important;
  color: #6b7280 !important;
}

.footer-social span:first-child {
  color: #0b0c10 !important;
}

.footer-bottom {
  margin-top: clamp(24px, 3vw, 38px) !important;
  padding-top: 22px !important;
  border-top: 1px solid rgba(26, 31, 46, 0.1) !important;
  color: #6b7280 !important;
}

@media (max-width: 960px) {
  .footer-inner {
    width: min(100%, calc(100% - 36px)) !important;
    padding: 24px !important;
  }

  .footer-card {
    padding: 22px 0 !important;
  }

  .footer-card:nth-child(1),
  .footer-card:nth-child(2) {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(26, 31, 46, 0.1) !important;
  }

  .footer-card:nth-child(3) {
    margin-left: 0;
    margin-top: 22px;
  }
}

@media (max-width: 620px) {
  .site-footer {
    padding: 36px 14px 22px !important;
  }

  .footer-inner {
    width: 100% !important;
    padding: 20px !important;
    border-radius: 14px;
  }
}

/* Final footer blueprint background override. */
.site-footer {
  background-color: #d8e3ea !important;
  background-image: url("assets/img/new/footer-blueprint-bg.png") !important;
  background-position: center 86% !important;
  background-size: 142% auto !important;
  background-repeat: no-repeat !important;
}

.site-footer .footer-bottom {
  padding: 18px 22px !important;
  border-top: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(115deg, rgba(3, 5, 9, 0.94) 0%, rgba(18, 22, 32, 0.9) 48%, rgba(0, 0, 0, 0.96) 100%) !important;
  color: #d1d5db !important;
}

.section-anchor {
  display: block;
  position: relative;
  top: -92px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Industrial transparent logo replacement. */
.logo {
  gap: 0 !important;
}

.logo span {
  display: none !important;
}

.header-logo-img {
  width: clamp(128px, 11vw, 168px) !important;
  height: auto !important;
  max-height: 46px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  box-shadow: none !important;
  background: transparent !important;
}

.footer-logo-img {
  width: min(220px, 86%) !important;
  height: auto !important;
  max-height: 94px !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
  box-shadow: none !important;
  background: transparent !important;
  margin-bottom: 16px !important;
}

@media (max-width: 720px) {
  .header-logo-img {
    width: 126px !important;
    max-height: 40px !important;
  }

  .footer-logo-img {
    width: min(190px, 90%) !important;
    margin-inline: auto !important;
    object-position: center !important;
  }
}

/* Unified floating banner treatment for all inner pages, matching the homepage visual card feeling. */
.inner-page:not(.home-page) main > .page-hero,
.inner-page:not(.home-page) main > .product-hero,
.inner-page:not(.home-page) main > .application-hero {
  position: relative !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow:
    0 24px 44px rgba(26, 31, 46, 0.18),
    0 12px 34px rgba(26, 31, 46, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
  transform: translateY(0);
  transform-origin: center center;
  animation: innerBannerFloat 8.5s ease-in-out infinite;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
  will-change: transform;
}

.inner-page:not(.home-page) main > .page-hero:hover,
.inner-page:not(.home-page) main > .product-hero:hover,
.inner-page:not(.home-page) main > .application-hero:hover {
  transform: translateY(-4px) scale(1.002);
  border-color: transparent !important;
  box-shadow:
    0 30px 58px rgba(26, 31, 46, 0.22),
    0 16px 42px rgba(26, 31, 46, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
}

@keyframes innerBannerFloat {
  0%,
  100% {
    transform: translateY(0);
    box-shadow:
      0 24px 44px rgba(26, 31, 46, 0.18),
      0 12px 34px rgba(26, 31, 46, 0.16),
      inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  }

  50% {
    transform: translateY(-5px);
    box-shadow:
      0 30px 58px rgba(26, 31, 46, 0.21),
      0 18px 46px rgba(26, 31, 46, 0.2),
      inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  }
}

@media (max-width: 900px) {
  .inner-page:not(.home-page) main > .page-hero,
  .inner-page:not(.home-page) main > .product-hero,
  .inner-page:not(.home-page) main > .application-hero {
    border-radius: 10px !important;
    animation-duration: 10s;
    box-shadow:
      0 18px 34px rgba(26, 31, 46, 0.16),
      0 8px 24px rgba(26, 31, 46, 0.14),
      inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inner-page:not(.home-page) main > .page-hero,
  .inner-page:not(.home-page) main > .product-hero,
  .inner-page:not(.home-page) main > .application-hero {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Header logo scale and left alignment. */
.nav {
  width: calc(100% - 56px) !important;
  max-width: none !important;
  margin-left: 28px !important;
  margin-right: 28px !important;
}

.header-logo-img {
  width: clamp(252px, 22vw, 336px) !important;
  max-height: 92px !important;
}

body {
  padding-top: 128px !important;
}

@media (max-width: 900px) {
  .nav {
    width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  .header-logo-img {
    width: clamp(188px, 46vw, 260px) !important;
    max-height: 72px !important;
  }

  body {
    padding-top: 172px !important;
  }
}

@media (max-width: 520px) {
  .header-logo-img {
    width: min(230px, 62vw) !important;
    max-height: 62px !important;
  }

  body {
    padding-top: 170px !important;
  }
}

/* Header navigation: refined industrial brand typography and motion. */
.nav-menu {
  gap: clamp(12px, 1vw, 20px) !important;
}

.nav-menu a {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
  padding: 8px 4px 10px !important;
  color: #243044 !important;
  font-size: clamp(22px, 1.28vw, 25px) !important;
  font-weight: 680 !important;
  line-height: 1.14 !important;
  letter-spacing: 0.004em !important;
  text-rendering: geometricPrecision;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.86),
    0 6px 14px rgba(15, 35, 58, 0.1),
    0 14px 30px rgba(15, 35, 58, 0.06);
  transition:
    color 180ms ease,
    transform 180ms ease,
    text-shadow 180ms ease;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 2px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2980b9, #f97316);
  box-shadow: 0 5px 14px rgba(41, 128, 185, 0.18);
  opacity: 0;
  transform: scaleX(0.28);
  transform-origin: center;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: #0f4f73 !important;
  transform: translateY(-2px);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 18px rgba(41, 128, 185, 0.18),
    0 18px 36px rgba(15, 35, 58, 0.1);
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.nav-menu a[href="contact.html"] {
  min-height: 50px;
  padding: 12px 24px !important;
  border: 1px solid rgba(249, 115, 22, 0.42);
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, #ffffff 0%, #fff7ed 52%, #ffedd5 100%) !important;
  color: #c45a12 !important;
  font-size: clamp(22px, 1.28vw, 25px) !important;
  font-weight: 760 !important;
  box-shadow:
    0 12px 26px rgba(249, 115, 22, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72),
    0 8px 18px rgba(196, 90, 18, 0.14);
}

.nav-menu a[href="contact.html"]::after {
  content: none;
}

.nav-menu a[href="contact.html"]:hover,
.nav-menu a[href="contact.html"].active {
  border-color: rgba(249, 115, 22, 0.74);
  background:
    linear-gradient(135deg, #f97316 0%, #ff8a2a 56%, #ea580c 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow:
    0 18px 38px rgba(249, 115, 22, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

@media (max-width: 1180px) {
  .nav-menu {
    gap: 10px !important;
  }

  .nav-menu a,
  .nav-menu a[href="contact.html"] {
    font-size: 23px !important;
  }

  .nav-menu a[href="contact.html"] {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
}

@media (max-width: 900px) {
  .nav-menu {
    gap: 8px !important;
  }

  .nav-menu a,
  .nav-menu a[href="contact.html"] {
    font-size: 21px !important;
  }

  .nav-menu a {
    min-height: 40px;
  }

  .nav-menu a[href="contact.html"] {
    min-height: 44px;
    padding: 10px 18px !important;
  }
}

/* Home Our Service Process: equalize card rhythm without changing copy. */
.home-page .home-service-process .process-grid {
  align-items: stretch;
}

.home-page .home-service-process .home-process-card {
  min-height: 430px;
  display: flex;
  flex-direction: column;
}

.home-page .home-service-process .home-process-card .step-number {
  align-self: flex-start;
}

.home-page .home-service-process .home-process-card i {
  flex: 0 0 auto;
}

.home-page .home-service-process .home-process-card h3 {
  min-height: 64px;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.home-page .home-service-process .home-process-card > p:not(.process-detail) {
  min-height: 104px;
}

.home-page .home-service-process .home-process-card .process-detail,
.home-page .home-service-process .home-process-card .compact-check-list {
  min-height: 112px;
}

.home-page .home-service-process .home-process-card .text-link {
  margin-top: auto;
}

@media (max-width: 1180px) {
  .home-page .home-service-process .home-process-card {
    min-height: 460px;
  }
}

@media (max-width: 960px) {
  .home-page .home-service-process .home-process-card {
    min-height: auto;
  }

  .home-page .home-service-process .home-process-card h3,
  .home-page .home-service-process .home-process-card > p:not(.process-detail),
  .home-page .home-service-process .home-process-card .process-detail,
  .home-page .home-service-process .home-process-card .compact-check-list {
    min-height: 0;
  }
}

/* Home gearbox product section: keep a clean light background. */
.home-page main > section.content-section.home-gearbox-bg-section {
  background-color: #f5f7fa !important;
  background-image: none !important;
}

/* Predictive Service banner carousel: deep-blue layout with rolling screenshots. */
.inner-page.predictive-page main > .page-hero.hero-predictive {
  background: #071a2f !important;
  isolation: isolate;
  position: relative;
  overflow: hidden;
}

.inner-page.predictive-page main > .page-hero.hero-predictive .predictive-hero-carousel {
  position: absolute;
  inset: 0 0 0 36%;
  z-index: 0;
  overflow: hidden;
  background: #071a2f;
}

.inner-page.predictive-page main > .page-hero.hero-predictive .predictive-hero-carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, #071a2f 0%, rgba(7, 26, 47, 0.72) 18%, rgba(7, 26, 47, 0.12) 44%, rgba(7, 26, 47, 0.28) 100%),
    radial-gradient(circle at 50% 46%, rgba(0, 229, 255, 0.14), transparent 38%);
  pointer-events: none;
}

.inner-page.predictive-page main > .page-hero.hero-predictive .predictive-hero-track {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  transform: translateX(0);
  transition: transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.inner-page.predictive-page main > .page-hero.hero-predictive .predictive-hero-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: clamp(24px, 3vw, 46px) clamp(22px, 3.5vw, 58px) clamp(62px, 5vw, 86px);
  background: #071a2f;
}

.inner-page.predictive-page main > .page-hero.hero-predictive .predictive-hero-dots {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 2.2vw, 28px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(3, 12, 24, 0.42);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
}

.inner-page.predictive-page main > .page-hero.hero-predictive .predictive-hero-dots button {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.inner-page.predictive-page main > .page-hero.hero-predictive .predictive-hero-dots button:hover,
.inner-page.predictive-page main > .page-hero.hero-predictive .predictive-hero-dots button.is-active {
  border-color: #00e5ff;
  background: #00e5ff;
  transform: scale(1.22);
}

.inner-page.predictive-page main > .page-hero.hero-predictive > .section-inner {
  position: relative;
  z-index: 3;
  width: min(1760px, calc(100% - 60px)) !important;
  min-height: inherit;
  display: grid;
  align-content: center;
  justify-items: start !important;
  text-align: left !important;
}

.inner-page.predictive-page main > .page-hero.hero-predictive > .section-inner::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 0;
  z-index: -1;
  width: min(620px, 44vw);
  height: min(420px, 62%);
  transform: translateY(-50%);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(3, 12, 24, 0.92), rgba(7, 26, 47, 0.74));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

.inner-page.predictive-page main > .page-hero.hero-predictive h1,
.inner-page.predictive-page main > .page-hero.hero-predictive p:not(.eyebrow),
.inner-page.predictive-page main > .page-hero.hero-predictive .hero-actions {
  max-width: min(560px, 42vw);
}

@keyframes predictiveHeroScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 900px) {
  .inner-page.predictive-page main > .page-hero.hero-predictive .predictive-hero-carousel {
    inset: 34% 0 0 0;
  }

  .inner-page.predictive-page main > .page-hero.hero-predictive .predictive-hero-carousel::before {
    background: linear-gradient(180deg, #071a2f 0%, rgba(7, 26, 47, 0.72) 24%, rgba(7, 26, 47, 0.22) 100%);
  }

  .inner-page.predictive-page main > .page-hero.hero-predictive > .section-inner {
    align-content: start;
    padding-top: 48px;
  }

  .inner-page.predictive-page main > .page-hero.hero-predictive > .section-inner::after {
    width: min(100%, 620px);
    height: 260px;
    inset: 24px auto auto 0;
    transform: none;
  }

  .inner-page.predictive-page main > .page-hero.hero-predictive h1,
  .inner-page.predictive-page main > .page-hero.hero-predictive p:not(.eyebrow),
  .inner-page.predictive-page main > .page-hero.hero-predictive .hero-actions {
    max-width: min(100%, 620px);
  }

  .inner-page.predictive-page main > .page-hero.hero-predictive .predictive-hero-track img {
    width: 100%;
    padding: 20px 16px 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inner-page.predictive-page main > .page-hero.hero-predictive .predictive-hero-track {
    transition: none;
  }
}

/* Predictive Reference Pricing: place blueprint 18 as a bottom background accent. */
.predictive-page .predictive-pricing-blueprint-section {
  position: relative;
  overflow: hidden;
  background-color: #f5f7fa !important;
  background-image:
    linear-gradient(180deg, rgba(3, 7, 14, 0.4) 0%, rgba(3, 7, 14, 0.4) 58%, rgba(3, 7, 14, 0.4) 100%),
    url("assets/img/new/机械蓝图图案生成 (18).png") !important;
  background-size: auto, cover !important;
  background-position: center, center bottom !important;
  background-repeat: no-repeat, no-repeat !important;
}

.predictive-page .predictive-pricing-blueprint-section > * {
  position: relative;
  z-index: 1;
}

.predictive-page .predictive-pricing-blueprint-section .section-heading h2 {
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
}

.predictive-page .predictive-pricing-blueprint-section .section-heading p,
.predictive-page .predictive-pricing-blueprint-section .section-note {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.36);
}

.predictive-page .predictive-pricing-blueprint-section .table-wrap {
  background: rgba(255, 255, 255, 0.64);
  border-color: rgba(255, 255, 255, 0.46);
  backdrop-filter: blur(6px);
}

.predictive-page .predictive-faq-blueprint-section {
  background: #f5f7fa !important;
}

.predictive-page .predictive-faq-blueprint-section .section-heading h2 {
  color: #0b0c10;
  text-shadow: none;
}

.predictive-page .predictive-faq-blueprint-section .section-heading p {
  color: #4a4a4a;
  font-weight: 400;
  text-shadow: none;
}

.predictive-page .predictive-faq-blueprint-section .faq-item {
  background: #ffffff;
  backdrop-filter: none;
}

/* Home Our Service Process: staggered cards suit varied copy lengths better than strict equal height. */
@media (min-width: 961px) {
  .home-page .home-service-process {
    padding-bottom: clamp(128px, 10vw, 178px);
  }

  .home-page .home-service-process .process-grid {
    align-items: flex-start;
    position: relative;
    gap: clamp(24px, 2vw, 36px);
  }

  .home-page .home-service-process .home-process-card {
    min-height: 0 !important;
    height: auto;
    position: relative;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  }

  .home-page .home-service-process .home-process-card h3,
  .home-page .home-service-process .home-process-card > p:not(.process-detail),
  .home-page .home-service-process .home-process-card .process-detail,
  .home-page .home-service-process .home-process-card .compact-check-list {
    min-height: 0 !important;
  }

  .home-page .home-service-process .home-process-card:nth-child(1) {
    transform: translateY(0);
  }

  .home-page .home-service-process .home-process-card:nth-child(2) {
    transform: translateY(34px);
  }

  .home-page .home-service-process .home-process-card:nth-child(3) {
    transform: translateY(68px);
  }

  .home-page .home-service-process .home-process-card:nth-child(4) {
    transform: translateY(102px);
  }

  .home-page .home-service-process .home-process-card:hover {
    transform: translateY(-8px);
  }

  .home-page .home-service-process .home-process-card:nth-child(2):hover {
    transform: translateY(24px);
  }

  .home-page .home-service-process .home-process-card:nth-child(3):hover {
    transform: translateY(58px);
  }

  .home-page .home-service-process .home-process-card:nth-child(4):hover {
    transform: translateY(92px);
  }

  .home-page .home-service-process .home-process-card::before {
    content: "";
    position: absolute;
    top: 28px;
    right: -28px;
    width: 34px;
    height: 2px;
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.62), rgba(249, 115, 22, 0));
    pointer-events: none;
  }

  .home-page .home-service-process .home-process-card::after {
    content: "";
    position: absolute;
    top: 23px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f97316;
    box-shadow: 0 0 0 6px rgba(249, 115, 22, 0.12);
    pointer-events: none;
  }

  .home-page .home-service-process .home-process-card:nth-child(4)::before,
  .home-page .home-service-process .home-process-card:nth-child(4)::after {
    display: none;
  }
}

/* Home Our Service Process: final equal-size colored process cards. */
.home-page .home-service-process {
  background-color: #f5f7fa !important;
  background-image: url("assets/img/new/机械蓝图图案生成 (18).png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.home-page main > section.content-section.muted-section.home-service-process {
  background-color: #f5f7fa !important;
  background-image: url("assets/img/new/机械蓝图图案生成 (18).png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

@media (min-width: 961px) {
  .home-page .home-service-process {
    padding-bottom: clamp(76px, 6vw, 104px);
  }

  .home-page .home-service-process .process-grid {
    align-items: stretch !important;
    gap: clamp(22px, 1.8vw, 32px) !important;
  }

  .home-page .home-service-process .home-process-card {
    height: 100%;
    min-height: 664px !important;
    transform: none !important;
    overflow: hidden;
  }

  .home-page .home-service-process .home-process-card:hover {
    transform: translateY(-6px) !important;
  }

  .home-page .home-service-process .home-process-card::before,
  .home-page .home-service-process .home-process-card::after {
    display: none !important;
  }

  .home-page .home-service-process .home-process-card h3 {
    min-height: 64px !important;
    display: flex;
    align-items: center;
  }

  .home-page .home-service-process .home-process-card > p:not(.process-detail) {
    min-height: 112px !important;
  }

  .home-page .home-service-process .home-process-card .process-detail,
  .home-page .home-service-process .home-process-card .compact-check-list {
    min-height: 150px !important;
  }

  .home-page .home-service-process .home-process-card:nth-child(1) {
    background:
      linear-gradient(180deg, rgba(231, 245, 255, 0.5), rgba(255, 255, 255, 0.5)) !important;
    border-color: rgba(41, 128, 185, 0.22) !important;
  }

  .home-page .home-service-process .home-process-card:nth-child(2) {
    background:
      linear-gradient(180deg, rgba(239, 253, 244, 0.5), rgba(255, 255, 255, 0.5)) !important;
    border-color: rgba(34, 197, 94, 0.22) !important;
  }

  .home-page .home-service-process .home-process-card:nth-child(3) {
    background:
      linear-gradient(180deg, rgba(255, 247, 237, 0.98), rgba(255, 255, 255, 0.96)) !important;
    border-color: rgba(249, 115, 22, 0.26) !important;
  }

  .home-page .home-service-process .home-process-card:nth-child(4) {
    background:
      linear-gradient(180deg, rgba(238, 242, 255, 0.98), rgba(255, 255, 255, 0.96)) !important;
    border-color: rgba(99, 102, 241, 0.22) !important;
  }

  .home-page .home-service-process .home-process-card:nth-child(1) i,
  .home-page .home-service-process .home-process-card:nth-child(1) .step-number {
    background: #1d4ed8 !important;
    color: #ffffff !important;
  }

  .home-page .home-service-process .home-process-card:nth-child(2) i,
  .home-page .home-service-process .home-process-card:nth-child(2) .step-number {
    background: #15803d !important;
    color: #ffffff !important;
  }

  .home-page .home-service-process .home-process-card:nth-child(3) i,
  .home-page .home-service-process .home-process-card:nth-child(3) .step-number {
    background: #f97316 !important;
    color: #ffffff !important;
  }

  .home-page .home-service-process .home-process-card:nth-child(4) i,
  .home-page .home-service-process .home-process-card:nth-child(4) .step-number {
    background: #4f46e5 !important;
    color: #ffffff !important;
  }
}




/* Predictive Service banner carousel mobile spacing: keep copy above rolling images. */
@media (max-width: 900px) {
  .inner-page.predictive-page main > .page-hero.hero-predictive > .section-inner {
    min-height: auto !important;
    max-height: none !important;
    align-content: start !important;
    padding-top: 34px !important;
    padding-bottom: 310px !important;
  }

  .inner-page.predictive-page main > .page-hero.hero-predictive .predictive-hero-carousel {
    inset: 46% 0 0 0;
  }

  .inner-page.predictive-page main > .page-hero.hero-predictive > .section-inner::after {
    height: 300px;
    inset: 18px auto auto 0;
  }
}

/* Predictive Service Workflow: background image removed per latest direction. */
.predictive-page #how-it-works {
  position: relative;
  overflow: hidden;
}

.predictive-page #how-it-works > .section-inner {
  position: relative;
  z-index: 1;
  transform: translateY(-44px);
}

.predictive-page #how-it-works .section-heading h2,
.predictive-page #how-it-works .section-heading p {
  color: #0b0c10;
  text-shadow: none;
}

@media (max-width: 900px) {
  .predictive-page #how-it-works > .section-inner {
    transform: translateY(-22px);
  }
}

/* Predictive Service banner cleanup: show carousel images without dark filter or text backing block. */
.inner-page.predictive-page main > .page-hero.hero-predictive .predictive-hero-carousel::before,
.inner-page.predictive-page main > .page-hero.hero-predictive > .section-inner::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Contact banner final subtitle contrast: keep the subtitle pure white. */
.inner-page.contact-page main > .page-hero.hero-contact p:not(.eyebrow):not(.product-hero-seo) {
  color: #ffffff !important;
}

/* Final note color fix: keep yellow/orange guidance blocks bright on gray sections. */
.handoff-note,
.section-note,
.product-note-link {
  background: #ffedd5 !important;
  color: #4a2a10 !important;
  border-left-color: #f97316 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 10px 24px rgba(249, 115, 22, 0.08) !important;
}

/* Safe content typography uplift: improve readability without changing hero or navigation layouts. */
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) p,
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) li,
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) label,
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) input,
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) textarea,
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) select,
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) td,
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) th {
  font-size: clamp(1.02rem, 1.08vw, 1.12rem) !important;
  line-height: 1.68 !important;
}

main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) .section-heading p,
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) .section-note,
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) .handoff-note {
  font-size: clamp(1.12rem, 1.24vw, 1.28rem) !important;
  line-height: 1.66 !important;
}

/* Final section subtitle pass: make section descriptions visibly stronger site-wide. */
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) .section-heading > p,
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) .section-heading-with-link p,
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) .form-intro p,
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) .service-cta p {
  font-size: clamp(1.12rem, 1.24vw, 1.28rem) !important;
  line-height: 1.68 !important;
  font-weight: 500 !important;
}

main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) h3,
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) .feature-card h3,
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) .process-card h3,
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) .industry-card h3,
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) .faq-item h3 {
  font-size: clamp(1.22rem, 1.34vw, 1.42rem) !important;
  line-height: 1.38 !important;
}

main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) .text-link,
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) .primary-button,
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) .secondary-button,
main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) button {
  font-size: clamp(1rem, 1.06vw, 1.12rem) !important;
}

@media (max-width: 640px) {
  main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) p,
  main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) li,
  main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) label,
  main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) input,
  main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) textarea,
  main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) select,
  main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) td,
  main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) th {
    font-size: 1rem !important;
    line-height: 1.62 !important;
  }

  main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) .section-heading > p,
  main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) .section-heading-with-link p,
  main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) .form-intro p,
  main > section:not(.hero-section):not(.page-hero):not(.product-hero):not(.application-hero) .service-cta p {
    font-size: 1.06rem !important;
    line-height: 1.62 !important;
  }
}

/* Footer typography uplift: improve readability without changing footer layout. */
.site-footer .footer-card h2 {
  font-size: clamp(1.16rem, 1.2vw, 1.28rem) !important;
  line-height: 1.35 !important;
}

.site-footer .footer-card p,
.site-footer .footer-trust-list li,
.site-footer .footer-link-list li,
.site-footer .footer-contact-list li,
.site-footer .footer-link-list a,
.site-footer .footer-contact-list a,
.site-footer .footer-social span {
  font-size: clamp(1rem, 1.06vw, 1.1rem) !important;
  line-height: 1.58 !important;
}

.site-footer .footer-bottom,
.site-footer .footer-bottom span {
  font-size: clamp(0.94rem, 1vw, 1.02rem) !important;
  line-height: 1.5 !important;
}

/* Product banner copy fit: keep text compact and away from the product visual. */
@media (min-width: 901px) {
  .inner-page.products-page main > .product-hero .product-hero-copy {
    width: min(520px, 34vw) !important;
    max-width: 520px !important;
  }

  .inner-page.products-page main > .product-hero h1 {
    max-width: 520px !important;
    font-size: clamp(2.2rem, 3vw, 3.55rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
  }

  .inner-page.products-page main > .product-hero p:not(.eyebrow):not(.product-hero-seo) {
    max-width: 500px !important;
    font-size: clamp(1rem, 1.04vw, 1.12rem) !important;
    line-height: 1.35 !important;
    text-wrap: balance;
  }

  .inner-page.products-page main > .product-hero .hero-actions {
    margin-top: 24px !important;
  }
}

@media (min-width: 1500px) {
  .inner-page.products-page main > .product-hero .product-hero-copy {
    width: min(580px, 36vw) !important;
    max-width: 580px !important;
  }

  .inner-page.products-page main > .product-hero h1 {
    max-width: 580px !important;
    font-size: clamp(2.35rem, 3.1vw, 3.9rem) !important;
  }

  .inner-page.products-page main > .product-hero p:not(.eyebrow):not(.product-hero-seo) {
    max-width: 540px !important;
  }
}

@media (max-width: 900px) {
  .inner-page.products-page main > .product-hero .product-hero-copy {
    width: min(100%, 720px) !important;
    max-width: 720px !important;
  }
}

/* Predictive banner copy fit: keep text compact and clear of the main visual. */
@media (min-width: 901px) {
  .inner-page.predictive-page main > .page-hero.hero-predictive > .section-inner {
    width: min(1760px, calc(100% - 60px)) !important;
  }

  .inner-page.predictive-page main > .page-hero.hero-predictive h1,
  .inner-page.predictive-page main > .page-hero.hero-predictive p:not(.eyebrow),
  .inner-page.predictive-page main > .page-hero.hero-predictive .hero-actions {
    max-width: min(440px, 31vw) !important;
  }

  .inner-page.predictive-page main > .page-hero.hero-predictive h1 {
    font-size: clamp(2.1rem, 3vw, 3.45rem) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    text-wrap: balance;
  }

  .inner-page.predictive-page main > .page-hero.hero-predictive p:not(.eyebrow) {
    font-size: clamp(1rem, 1.02vw, 1.12rem) !important;
    line-height: 1.36 !important;
    text-wrap: balance;
  }

  .inner-page.predictive-page main > .page-hero.hero-predictive .hero-actions {
    margin-top: 24px !important;
  }
}

@media (min-width: 1500px) {
  .inner-page.predictive-page main > .page-hero.hero-predictive h1,
  .inner-page.predictive-page main > .page-hero.hero-predictive p:not(.eyebrow),
  .inner-page.predictive-page main > .page-hero.hero-predictive .hero-actions {
    max-width: min(500px, 32vw) !important;
  }

  .inner-page.predictive-page main > .page-hero.hero-predictive h1 {
    font-size: clamp(2.35rem, 3vw, 3.8rem) !important;
  }
}

@media (max-width: 900px) {
  .inner-page.predictive-page main > .page-hero.hero-predictive h1,
  .inner-page.predictive-page main > .page-hero.hero-predictive p:not(.eyebrow),
  .inner-page.predictive-page main > .page-hero.hero-predictive .hero-actions {
    max-width: min(100%, 620px) !important;
  }
}
/* Home risk section: raise the intro copy and place the predictive timeline visual below it. */
.home-page .home-risk-section .risk-intro-column {
  align-self: start;
  padding-top: clamp(2px, 0.7vw, 12px);
}

.home-page .home-risk-section .risk-intro-column h2 {
  margin-bottom: clamp(14px, 1.6vw, 22px);
}

.home-page .home-risk-section .risk-intro-column > p {
  max-width: 680px;
}

.home-page .home-risk-section .risk-visual-callout {
  margin: clamp(28px, 3.8vw, 54px) 0 0;
  width: min(760px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 24px 60px rgba(3, 7, 14, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.18) inset;
  overflow: hidden;
  transform: translateY(10px);
}

.home-page .home-risk-section .risk-visual-callout img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 961px) {
  .home-page .home-risk-section .insight-list {
    margin-top: clamp(70px, 7vw, 126px);
  }
}

@media (min-width: 961px) {
  .home-page .home-risk-section .home-risk-grid {
    align-items: start;
  }

  .home-page .home-risk-section .risk-visual-callout {
    margin-left: clamp(10px, 1.6vw, 28px);
  }
}

@media (max-width: 960px) {
  .home-page .home-risk-section .insight-list {
    margin-top: 0;
  }

  .home-page .home-risk-section .risk-visual-callout {
    width: 100%;
    margin-top: 24px;
    transform: none;
  }
}

/* Home risk section: align the left visual with copy and balance the right column height. */
@media (min-width: 961px) {
  .home-page .home-risk-section .home-risk-grid {
    align-items: start;
  }

  .home-page .home-risk-section .risk-intro-column {
    display: flex;
    flex-direction: column;
  }

  .home-page .home-risk-section .risk-visual-callout {
    margin-left: 0;
    transform: none;
  }

  .home-page .home-risk-section .insight-list {
    align-self: stretch;
    display: grid;
    grid-template-rows: repeat(3, minmax(82px, 0.82fr)) minmax(124px, 1.05fr);
    gap: clamp(16px, 1.4vw, 22px);
    height: 100%;
    margin-top: 0;
  }

  .home-page .home-risk-section .insight-list article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    min-height: 0;
    margin-top: 0;
    padding: clamp(18px, 1.6vw, 24px);
  }

  .home-page .home-risk-section .risk-summary-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    min-height: 0;
    margin-top: 0;
    padding: clamp(16px, 1.5vw, 22px);
  }

  .home-page .home-risk-section .insight-list strong {
    font-size: clamp(0.98rem, 1.05vw, 1.08rem);
    line-height: 1.18;
  }

  .home-page .home-risk-section .insight-list span {
    font-size: clamp(0.86rem, 0.9vw, 0.94rem);
    line-height: 1.3;
  }

  .home-page .home-risk-section .risk-summary-card .text-link {
    align-self: flex-start;
    margin-top: 8px;
  }

  .home-page .home-risk-section .risk-summary-card h3 {
    margin-bottom: 6px;
    font-size: clamp(0.92rem, 1vw, 1.04rem);
    line-height: 1.18;
  }

  .home-page .home-risk-section .risk-summary-card p {
    display: block;
    margin-top: 4px;
    font-size: clamp(0.84rem, 0.88vw, 0.92rem);
    line-height: 1.25;
  }

  .home-page .home-risk-section .risk-summary-card .risk-summary-tags {
    display: none;
    font-size: clamp(0.86rem, 0.9vw, 0.94rem);
    line-height: 1.25;
  }
}

/* Inner hero copy placement: move Predictive and Products banner text further left,
   and keep a larger visual gap from the main banner image area. */
@media (min-width: 901px) {
  .inner-page.products-page main > .product-hero .product-hero-copy {
    width: min(430px, 29vw) !important;
    max-width: 430px !important;
    margin-left: clamp(14px, 1.4vw, 28px) !important;
    padding-right: clamp(42px, 5vw, 96px) !important;
    transform: translateX(calc(-1 * clamp(22px, 3vw, 54px))) !important;
  }

  .inner-page.products-page main > .product-hero h1,
  .inner-page.products-page main > .product-hero p:not(.eyebrow):not(.product-hero-seo),
  .inner-page.products-page main > .product-hero .hero-actions {
    max-width: 430px !important;
  }

  .inner-page.predictive-page main > .page-hero.hero-predictive > .section-inner {
    width: min(430px, 29vw) !important;
    max-width: 430px !important;
    margin-left: clamp(14px, 1.4vw, 28px) !important;
    margin-right: auto !important;
    padding-right: clamp(42px, 5vw, 96px) !important;
    transform: translateX(calc(-1 * clamp(22px, 3vw, 54px))) !important;
  }

  .inner-page.predictive-page main > .page-hero.hero-predictive h1,
  .inner-page.predictive-page main > .page-hero.hero-predictive p:not(.eyebrow),
  .inner-page.predictive-page main > .page-hero.hero-predictive .hero-actions {
    max-width: 430px !important;
  }
}

@media (min-width: 1280px) {
  .inner-page.products-page main > .product-hero .product-hero-copy,
  .inner-page.predictive-page main > .page-hero.hero-predictive > .section-inner {
    transform: translateX(calc(-1 * clamp(70px, 7.2vw, 138px))) !important;
  }
}

@media (min-width: 1680px) {
  .inner-page.products-page main > .product-hero .product-hero-copy,
  .inner-page.predictive-page main > .page-hero.hero-predictive > .section-inner {
    transform: translateX(-160px) !important;
  }
}

@media (max-width: 900px) {
  .inner-page.products-page main > .product-hero .product-hero-copy,
  .inner-page.predictive-page main > .page-hero.hero-predictive > .section-inner {
    transform: none !important;
  }
}

/* Predictive banner: center the copy inside the left-side empty area before the image starts. */
@media (min-width: 901px) {
  .inner-page.predictive-page main > .page-hero.hero-predictive > .section-inner {
    width: 36% !important;
    max-width: 620px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: clamp(28px, 3.2vw, 58px) !important;
    padding-right: clamp(28px, 3.2vw, 58px) !important;
    transform: none !important;
    justify-items: center !important;
    text-align: left !important;
  }

  .inner-page.predictive-page main > .page-hero.hero-predictive h1,
  .inner-page.predictive-page main > .page-hero.hero-predictive p:not(.eyebrow),
  .inner-page.predictive-page main > .page-hero.hero-predictive .hero-actions {
    width: min(430px, 100%) !important;
    max-width: min(430px, 100%) !important;
  }

  .inner-page.predictive-page main > .page-hero.hero-predictive .hero-actions {
    justify-content: flex-start !important;
  }
}

/* Products banner: match Predictive Service copy placement in the left-side empty area. */
@media (min-width: 901px) {
  .inner-page.products-page main > .product-hero {
    position: relative !important;
  }

  .inner-page.products-page main > .product-hero .product-hero-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    justify-items: start !important;
    text-align: left !important;
  }

  .inner-page.products-page main > .product-hero .product-hero-copy {
    position: absolute !important;
    left: 26% !important;
    top: 50% !important;
    width: min(460px, 36vw) !important;
    max-width: 460px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translate(-50%, -50%) !important;
  }

  .inner-page.products-page main > .product-hero h1,
  .inner-page.products-page main > .product-hero p:not(.eyebrow):not(.product-hero-seo),
  .inner-page.products-page main > .product-hero .hero-actions {
    width: 100% !important;
    max-width: 100% !important;
  }

  .inner-page.products-page main > .product-hero .hero-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 900px) {
  .inner-page.products-page main > .product-hero .product-hero-inner {
    width: min(100% - 28px, 760px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .inner-page.products-page main > .product-hero .product-hero-copy {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .inner-page.products-page main > .product-hero .hero-actions {
    justify-content: center !important;
  }
}

/* Predictive page image frames: keep carousels and workflow screenshots fully visible. */
.predictive-page .platform-carousel-window {
  aspect-ratio: 16 / 9;
  max-height: min(640px, 68vh);
  display: flex;
  align-items: center;
}

.predictive-page .platform-carousel-track {
  height: 100%;
  align-items: center;
}

.predictive-page .platform-carousel-track img {
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.predictive-page .workflow-image-row figure {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.predictive-page .workflow-image-row img {
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.predictive-page .report-sample-carousel .platform-carousel-window {
  aspect-ratio: 16 / 9;
  max-height: min(680px, 72vh);
  background: #f8fafc;
}

.predictive-page .report-sample-carousel .platform-carousel-track {
  height: 100%;
  align-items: stretch;
}

.predictive-page .report-sample-carousel .platform-carousel-slide,
.predictive-page .report-carousel-slide,
.predictive-page .report-carousel-slide figure {
  height: 100%;
}

.predictive-page .report-sample-carousel .platform-carousel-track img {
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.predictive-page .report-carousel-slide.is-two-up img {
  max-height: none;
}

@media (max-width: 768px) {
  .predictive-page .platform-carousel-window {
    aspect-ratio: 16 / 10;
    max-height: min(420px, 54vh);
  }

  .predictive-page .platform-carousel-track img {
    max-height: none;
  }

  .predictive-page .report-sample-carousel .platform-carousel-window {
    aspect-ratio: auto;
    max-height: none;
  }

  .predictive-page .report-sample-carousel .platform-carousel-slide,
  .predictive-page .report-carousel-slide,
  .predictive-page .report-carousel-slide figure {
    height: auto;
  }

  .predictive-page .report-sample-carousel .platform-carousel-track img,
  .predictive-page .report-carousel-slide.is-two-up img {
    height: auto;
    max-height: none;
  }

  .predictive-page .workflow-image-row figure {
    aspect-ratio: 16 / 9;
  }
}

/* Key Monitoring Capabilities carousel: center each screenshot inside its slide. */
.predictive-page .platform-screenshot-carousel,
.predictive-page .workflow-image-pairs {
  width: min(100%, 1120px);
  margin-left: auto;
  margin-right: auto;
}

.predictive-page .below-hero-highlights .platform-carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.predictive-page .below-hero-highlights .platform-carousel-track img {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.predictive-page .report-sample-carousel .platform-carousel-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.predictive-page .report-sample-carousel .report-carousel-slide {
  width: 100%;
}

.predictive-page .workflow-image-row figure {
  justify-items: center;
}

/* Predictive banner: use the new light-left image and dark readable copy. */
.inner-page.predictive-page main > .page-hero.hero-predictive .predictive-hero-carousel {
  inset: 0 !important;
  background: #eef5fb !important;
}

.inner-page.predictive-page main > .page-hero.hero-predictive .predictive-hero-carousel::before,
.inner-page.predictive-page main > .page-hero.hero-predictive > .section-inner::after {
  display: none !important;
}

.inner-page.predictive-page main > .page-hero.hero-predictive .predictive-hero-track img {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #eef5fb !important;
}

.inner-page.predictive-page main > .page-hero.hero-predictive h1,
.inner-page.predictive-page main > .page-hero.hero-predictive p:not(.eyebrow) {
  color: #07111f !important;
  text-shadow: none !important;
}

.inner-page.predictive-page main > .page-hero.hero-predictive .primary-button,
.inner-page.predictive-page main > .page-hero.hero-predictive .secondary-button {
  color: #07111f !important;
  text-shadow: none !important;
}

.inner-page.predictive-page main > .page-hero.hero-predictive .secondary-button {
  border-color: rgba(7, 17, 31, 0.32) !important;
  background: rgba(255, 255, 255, 0.62) !important;
}

/* Carousel frame fix: keep the three screenshot sections using their full section width. */
.predictive-page .below-hero-highlights .platform-screenshot-carousel,
.predictive-page .report-sample-carousel,
.products-page .product-series-carousel {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.predictive-page .below-hero-highlights .platform-carousel-window,
.predictive-page .report-sample-carousel .platform-carousel-window,
.products-page .product-series-carousel .platform-carousel-window {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 769px) {
  .predictive-page .below-hero-highlights .platform-carousel-window,
  .predictive-page .report-sample-carousel .platform-carousel-window,
  .products-page .product-series-carousel .platform-carousel-window {
    max-height: none !important;
  }
}

.predictive-page .below-hero-highlights .platform-carousel-track,
.predictive-page .report-sample-carousel .platform-carousel-track,
.products-page .product-series-carousel .platform-carousel-track {
  width: 100% !important;
  height: 100% !important;
}

.predictive-page .below-hero-highlights .platform-carousel-slide,
.predictive-page .report-sample-carousel .platform-carousel-slide {
  flex: 0 0 100% !important;
  min-width: 100% !important;
  width: 100% !important;
}

.products-page .product-series-carousel .platform-carousel-track img {
  background: #ffffff !important;
}

/* Products final structure: inner navigation, series media, sensors grid, and mounting section. */
.products-page .product-inner-nav {
  padding: 22px 0 8px;
  background:
    linear-gradient(180deg, rgba(240, 247, 252, 0.96), #ffffff);
}

.products-page .product-inner-nav-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.products-page .product-inner-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  min-width: 220px;
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 8px;
  padding: 16px 24px;
  background:
    linear-gradient(135deg, #0b3b5f, #102f51);
  color: #ffffff;
  font-size: clamp(1rem, 1.12vw, 1.15rem);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 16px 36px rgba(11, 59, 95, 0.2);
}

.products-page .product-inner-nav a:hover {
  border-color: rgba(249, 115, 22, 0.76);
  background:
    linear-gradient(135deg, #f97316, #c2410c);
  color: #ffffff;
  transform: translateY(-1px);
}

.products-page #series-details .series-panel {
  display: block;
}

.products-page #series-details .series-panel[hidden] {
  display: none;
}

.products-page #series-details .series-content {
  width: 100%;
}

.products-page #series-details .series-detail-model-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 22px 0;
}

.products-page #series-details .series-detail-model-card {
  margin: 0;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
  box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.18);
}

.products-page #series-details .series-detail-model-card figcaption {
  margin-top: 10px;
  color: #516070;
  font-size: 0.95rem;
  font-weight: 800;
  text-align: center;
}

.products-page .series-model-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.products-page .series-model-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.products-page .formal-product-slot {
  min-height: 260px;
  border: 1px solid rgba(0, 229, 255, 0.16);
  border-radius: 12px;
  background:
    radial-gradient(circle at 22% 18%, rgba(0, 229, 255, 0.13), transparent 30%),
    linear-gradient(135deg, #ffffff, #f8fafc);
}

.products-page .product-mounting-section {
  background: #ffffff;
}

.products-page .sensor-mounting-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.products-page .sensor-mounting-card {
  margin: 0;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #ffffff;
  padding: clamp(14px, 1.7vw, 22px);
  box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.18);
}

.products-page .sensor-mounting-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 520px;
  object-fit: contain;
  object-position: center center;
}

.products-page .sensor-mounting-card figcaption {
  margin-top: 12px;
  color: #516070;
  font-weight: 800;
  text-align: center;
}

.products-page #sensors-edge-terminals .sensor-product-showcase {
  margin-top: 0;
}

.products-page #sensors-edge-terminals .sensor-showcase-track {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.products-page .sensor-showcase-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.products-page .sensor-showcase-card figcaption {
  display: grid;
  gap: 5px;
  padding: 12px 4px 2px;
  text-align: center;
}

.products-page .sensor-showcase-card figcaption strong {
  color: #0b0c10;
  font-size: 1rem;
  line-height: 1.2;
}

.products-page .sensor-showcase-card figcaption span {
  color: #4a4a4a;
  font-size: 0.86rem;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .products-page #sensors-edge-terminals .sensor-showcase-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .products-page .product-inner-nav-inner {
    justify-content: flex-start;
  }

  .products-page .product-inner-nav a {
    width: 100%;
  }

  .products-page #series-details .series-detail-model-grid {
    grid-template-columns: 1fr;
  }

  .products-page .sensor-mounting-grid {
    grid-template-columns: 1fr;
  }

  .products-page #sensors-edge-terminals .sensor-showcase-track {
    grid-template-columns: 1fr;
  }

  .products-page .sensor-showcase-card img {
    height: auto;
    max-height: 360px;
  }
}

/* Application Cases banner: add a deep-blue dimensional base consistent with the site. */
.inner-page.cases-page main > .application-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(0, 229, 255, 0.18), transparent 34%),
    radial-gradient(circle at 82% 36%, rgba(59, 130, 246, 0.16), transparent 30%),
    linear-gradient(135deg, #061225 0%, #0b223d 45%, #102f51 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -34px 80px rgba(0, 0, 0, 0.28),
    0 26px 70px rgba(6, 18, 37, 0.18) !important;
}

.inner-page.cases-page main > .application-hero::before {
  background:
    linear-gradient(90deg, rgba(6, 18, 37, 0.74) 0%, rgba(8, 28, 52, 0.48) 42%, rgba(6, 18, 37, 0.22) 100%),
    url("assets/img/new/application-cases-banner-20260619.png") 58% center / 92% auto no-repeat !important;
  opacity: 0.92 !important;
  mix-blend-mode: normal !important;
}

.inner-page.cases-page main > .application-hero::after {
  background:
    linear-gradient(rgba(0, 229, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 24% 46%, rgba(0, 229, 255, 0.16), transparent 32%) !important;
  opacity: 0.58 !important;
}

.inner-page.cases-page main > .application-hero > .section-inner {
  background:
    radial-gradient(circle at 16% 0%, rgba(0, 229, 255, 0.16), transparent 32%),
    linear-gradient(135deg, rgba(5, 16, 34, 0.84), rgba(7, 26, 47, 0.66)) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 34px 94px rgba(3, 7, 14, 0.42),
    0 0 0 1px rgba(0, 229, 255, 0.08) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(12px) saturate(1.05) !important;
}

@media (max-width: 900px) {
  .inner-page.cases-page main > .application-hero::before {
    background:
      linear-gradient(180deg, rgba(6, 18, 37, 0.76) 0%, rgba(8, 28, 52, 0.5) 58%, rgba(6, 18, 37, 0.44) 100%),
      url("assets/img/new/application-cases-banner-20260619.png") 56% center / cover no-repeat !important;
  }
}

/* Desktop viewing frame: keep page internals unchanged while showing the site inside a 90% wide canvas. */
@media (min-width: 1024px) {
  html,
  body {
    background: #eef3f8;
  }

  body > .site-header,
  body > main,
  body > .site-footer {
    width: 90%;
    max-width: 1728px;
    margin-left: auto;
    margin-right: auto;
  }

  body > .site-header {
    margin-top: clamp(12px, 1.2vw, 24px);
    border-radius: 14px;
    overflow: clip;
  }

  body > main {
    background: #ffffff;
  }

  body > .site-footer {
    margin-bottom: clamp(12px, 1.2vw, 24px);
    border-radius: 14px;
    overflow: clip;
  }

  body > .floating-whatsapp {
    right: calc(5vw + 24px);
  }
}

/* Non-banner image fit: keep full content images visible within one screen height. */
@media (min-width: 768px) {
  .inner-page main > section:not(.page-hero):not(.product-hero):not(.application-hero) img,
  .home-page main > section:not(.hero-section):not(.home-image-hero) img {
    max-height: calc(100vh - 180px);
    object-fit: contain;
  }

  .predictive-page .below-hero-highlights .platform-carousel-window,
  .predictive-page .report-sample-carousel .platform-carousel-window,
  .products-page .product-series-carousel .platform-carousel-window,
  .cases-page #real-data .roi-proof-carousel .platform-carousel-window,
  .home-page .home-roi-carousel .platform-carousel-window,
  .about-page .about-team-carousel .platform-carousel-window,
  .about-page .about-technical-carousel .platform-carousel-window {
    height: min(680px, calc(100vh - 180px));
    max-height: calc(100vh - 180px) !important;
    aspect-ratio: auto !important;
  }

}

@media (max-width: 767px) {
  .inner-page main > section:not(.page-hero):not(.product-hero):not(.application-hero) img,
  .home-page main > section:not(.hero-section):not(.home-image-hero) img {
    max-height: calc(100vh - 132px);
    object-fit: contain;
  }

  .predictive-page .below-hero-highlights .platform-carousel-window,
  .predictive-page .report-sample-carousel .platform-carousel-window,
  .products-page .product-series-carousel .platform-carousel-window,
  .cases-page #real-data .roi-proof-carousel .platform-carousel-window,
  .home-page .home-roi-carousel .platform-carousel-window,
  .about-page .about-team-carousel .platform-carousel-window,
  .about-page .about-technical-carousel .platform-carousel-window {
    max-height: calc(100vh - 132px) !important;
  }
}

/* Final banner viewport fit: keep every page banner visible while revealing the next section title. */
@media (min-width: 1024px) {
  body > .site-header,
  body > main,
  body > .site-footer {
    width: 90% !important;
    max-width: 1728px !important;
  }

  .home-page main > .hero-section.home-image-hero,
  .home-page main > .hero-section.home-image-hero .home-image-hero-inner,
  .inner-page:not(.home-page) main > .page-hero,
  .inner-page:not(.home-page) main > .page-hero > .section-inner,
  .inner-page:not(.home-page) main > .product-hero,
  .inner-page:not(.home-page) main > .product-hero .product-hero-inner,
  .inner-page:not(.home-page) main > .application-hero,
  .inner-page:not(.home-page) main > .application-hero > .section-inner {
    min-height: 0 !important;
    max-height: min(620px, 62vh) !important;
  }

  .home-page main > .hero-section.home-image-hero,
  .inner-page:not(.home-page) main > .page-hero,
  .inner-page:not(.home-page) main > .product-hero,
  .inner-page:not(.home-page) main > .application-hero {
    height: min(620px, 62vh) !important;
    overflow: hidden !important;
  }

  .home-page main > .hero-section.home-image-hero .home-image-hero-inner,
  .inner-page:not(.home-page) main > .page-hero > .section-inner,
  .inner-page:not(.home-page) main > .product-hero .product-hero-inner,
  .inner-page:not(.home-page) main > .application-hero > .section-inner {
    height: 100% !important;
    align-content: center;
  }
}

@media (max-width: 1023px) {
  .home-page main > .hero-section.home-image-hero,
  .home-page main > .hero-section.home-image-hero .home-image-hero-inner,
  .inner-page:not(.home-page) main > .page-hero,
  .inner-page:not(.home-page) main > .page-hero > .section-inner,
  .inner-page:not(.home-page) main > .product-hero,
  .inner-page:not(.home-page) main > .product-hero .product-hero-inner,
  .inner-page:not(.home-page) main > .application-hero,
  .inner-page:not(.home-page) main > .application-hero > .section-inner {
    min-height: 0 !important;
    max-height: min(500px, 58vh) !important;
  }

  .home-page main > .hero-section.home-image-hero,
  .inner-page:not(.home-page) main > .page-hero,
  .inner-page:not(.home-page) main > .product-hero,
  .inner-page:not(.home-page) main > .application-hero {
    height: min(500px, 58vh) !important;
    overflow: hidden !important;
  }

  .home-page main > .hero-section.home-image-hero .home-image-hero-inner,
  .inner-page:not(.home-page) main > .page-hero > .section-inner,
  .inner-page:not(.home-page) main > .product-hero .product-hero-inner,
  .inner-page:not(.home-page) main > .application-hero > .section-inner {
    height: 100% !important;
    align-content: center;
  }
}

/* Fixed full-width top navigation: keep header attached to viewport top and visually complete edge to edge. */
.site-header,
body > .site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  z-index: 2000 !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(210, 219, 229, 0.95) !important;
  box-shadow: 0 10px 28px rgba(15, 35, 58, 0.12) !important;
}

.site-header .nav {
  width: calc(100% - 56px) !important;
  max-width: none !important;
  margin-left: 28px !important;
  margin-right: 28px !important;
}

@media (min-width: 1024px) {
  body > main,
  body > .site-footer {
    width: 90% !important;
    max-width: 1728px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 900px) {
  .site-header .nav {
    width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
}

/* Report Sample carousel: use discrete pages so mixed single/two-image slides always switch reliably. */
.predictive-page .report-sample-carousel .platform-carousel-slide[hidden] {
  display: none !important;
}

.predictive-page .report-sample-carousel .platform-carousel-slide.is-current-slide {
  display: grid !important;
}

.predictive-page .report-sample-carousel .platform-carousel-slide.is-current-slide:not(.is-two-up) {
  grid-template-columns: minmax(0, 1fr);
}

.predictive-page .report-sample-carousel .platform-carousel-slide.is-current-slide.is-two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .predictive-page .report-sample-carousel .platform-carousel-slide.is-current-slide,
  .predictive-page .report-sample-carousel .platform-carousel-slide.is-current-slide.is-two-up {
    grid-template-columns: 1fr;
  }
}

/* Contact banner final image: light blue gear composition with left copy space. */
.inner-page.contact-page main > .page-hero.hero-contact {
  background:
    linear-gradient(90deg, rgba(5, 16, 34, 0.66) 0%, rgba(8, 27, 49, 0.44) 34%, rgba(8, 27, 49, 0.16) 62%, rgba(8, 27, 49, 0.06) 100%),
    linear-gradient(180deg, rgba(8, 27, 49, 0.08), rgba(8, 27, 49, 0.22)),
    url("assets/img/new/contact-gear-banner-light-blue.png") 62% center / cover no-repeat !important;
}

.inner-page.contact-page main > .page-hero.hero-contact h1,
.inner-page.contact-page main > .page-hero.hero-contact p:not(.eyebrow):not(.product-hero-seo) {
  color: #ffffff !important;
  text-shadow:
    0 3px 14px rgba(0, 0, 0, 0.68),
    0 14px 36px rgba(5, 16, 34, 0.62) !important;
}

@media (max-width: 768px) {
  .inner-page.contact-page main > .page-hero.hero-contact {
    background:
      linear-gradient(180deg, rgba(5, 16, 34, 0.74) 0%, rgba(8, 27, 49, 0.52) 58%, rgba(8, 27, 49, 0.28) 100%),
      url("assets/img/new/contact-gear-banner-light-blue.png") 58% center / cover no-repeat !important;
  }
}

/* About banner final image: use the provided blue gear composition. */
.inner-page.about-page main > .page-hero.hero-about {
  background:
    linear-gradient(90deg, rgba(5, 16, 34, 0.74) 0%, rgba(8, 27, 49, 0.52) 36%, rgba(8, 27, 49, 0.2) 66%, rgba(8, 27, 49, 0.08) 100%),
    linear-gradient(180deg, rgba(8, 27, 49, 0.12), rgba(8, 27, 49, 0.3)),
    url("assets/img/new/contact-gear-banner-composite.png") 62% center / cover no-repeat !important;
}

.inner-page.about-page main > .page-hero.hero-about h1,
.inner-page.about-page main > .page-hero.hero-about p:not(.eyebrow):not(.product-hero-seo) {
  color: #ffffff !important;
  text-shadow:
    0 3px 14px rgba(0, 0, 0, 0.7),
    0 14px 36px rgba(5, 16, 34, 0.64) !important;
}

@media (max-width: 768px) {
  .inner-page.about-page main > .page-hero.hero-about {
    background:
      linear-gradient(180deg, rgba(5, 16, 34, 0.76) 0%, rgba(8, 27, 49, 0.54) 58%, rgba(8, 27, 49, 0.32) 100%),
      url("assets/img/new/contact-gear-banner-composite.png") 58% center / cover no-repeat !important;
  }
}