:root {
  --ink: #18202e;
  --ink-soft: #526072;
  --ink-faint: #7f8a99;
  --line: #e5eaf1;
  --surface: #ffffff;
  --surface-soft: #f5f8fc;
  --surface-blue: #edf5ff;
  --blue: #3978ff;
  --blue-deep: #2058db;
  --violet: #7758ed;
  --dark: #101825;
  --radius: 16px;
  --shadow: 0 18px 50px rgb(23 44 77 / 10%);
  /* Shared content rail for every page. Keeping one max width and using the
     containing block (100%, not 100vw) prevents browser scrollbar/zoom
     differences from producing uneven side gutters. */
  --container: min(1280px, calc(100% - 64px));
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: var(--ink);
  background: var(--surface);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Reserve matching gutters on both sides when a browser uses a classic
     scrollbar (common in 360 and Windows browsers). This keeps centered
     content visually centered instead of shifting by the scrollbar width. */
  scrollbar-gutter: stable both-edges;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--surface);
  color: var(--ink);
}

body.menu-open {
  overflow: hidden;
}

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

button {
  color: inherit;
  font: inherit;
}

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

.container {
  width: var(--container);
  margin: 0 auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 14px;
  color: #fff;
  background: var(--blue-deep);
  border-radius: 8px;
  transform: translateY(-160%);
  transition: transform .2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 68px;
  background: rgb(255 255 255 / 92%);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.site-header.is-scrolled {
  border-color: var(--line);
  box-shadow: 0 4px 18px rgb(18 39 68 / 5%);
}

.header-inner {
  display: flex;
  align-items: center;
  width: min(1440px, calc(100% - 48px));
  height: 100%;
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  width: 113px;
}

.brand img {
  width: 106px;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 3px;
  margin-left: clamp(50px, 9vw, 172px);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  color: #303b4a;
  font-size: 15px;
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color .2s ease;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active {
  color: var(--blue-deep);
}

.nav-link:focus-visible,
.button:focus-visible,
.solution-card:focus-visible,
.quick-link:focus-visible,
.header-phone:focus-visible {
  outline: 3px solid rgb(57 120 255 / 30%);
  outline-offset: 3px;
}

.has-menu {
  position: relative;
  display: flex;
}

.chevron {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.nav-trigger[aria-expanded="true"] .chevron {
  transform: translateY(2px) rotate(225deg);
}

.mega-menu {
  position: absolute;
  top: calc(100% - 4px);
  left: -18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  width: 548px;
  padding: 10px;
  visibility: hidden;
  background: rgb(255 255 255 / 98%);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.ai-mega-menu {
  left: 50%;
  width: 548px;
  transform: translate(-50%, 8px);
}

.nav-trigger[aria-expanded="true"]+.mega-menu,
.mega-menu:focus-within {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.nav-trigger[aria-expanded="true"]+.ai-mega-menu,
.ai-mega-menu:focus-within {
  transform: translate(-50%, 0);
}

@media (min-width: 901px) {
  .has-menu:hover>.mega-menu,
  .has-menu:focus-within>.mega-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .has-menu:hover>.ai-mega-menu,
  .has-menu:focus-within>.ai-mega-menu {
    transform: translate(-50%, 0);
  }
}

.mega-menu a {
  display: flex;
  gap: 12px;
  min-height: 92px;
  padding: 14px;
  border-radius: 10px;
  transition: background .2s ease;
}

.mega-menu a:hover,
.mega-menu a:focus-visible {
  background: #f3f7ff;
  outline: 0;
}

.mega-menu strong {
  display: block;
  margin: 1px 0 7px;
  font-size: 14px;
  font-weight: 600;
}

.mega-menu small {
  display: block;
  max-width: 210px;
  color: var(--ink-faint);
  font-size: 12px;
  line-height: 1.55;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  color: #314055;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.header-phone svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.9;
}

.menu-toggle {
  display: none;
}

.menu-icon,
.quick-icon,
.card-icon {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  overflow: hidden;
  place-items: center;
  border-radius: 11px;
  background: #e9f2ff;
}

.menu-icon {
  width: 31px;
  height: 31px;
  border-radius: 9px;
}

.menu-icon::before,
.quick-icon::before,
.card-icon::before {
  color: #3978ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.4px;
}

.icon-app::before {
  content: "APP";
}

.icon-miniprogram::before {
  content: "MINI";
  font-size: 9px;
}

.icon-ai::before {
  content: "AI";
}

.icon-code::before {
  content: "</>";
  font-size: 13px;
}

.icon-project::before,
.icon-project-system::before {
  content: "PM";
}

.icon-service::before {
  content: "OP";
}

.icon-charge::before {
  content: "⚡";
  font-size: 18px;
}

.icon-shield::before {
  content: "✓";
  font-size: 20px;
}

.icon-iot::before,
.icon-iot-system::before {
  content: "IoT";
}

.icon-cashier::before {
  content: "¥";
  font-size: 18px;
}

.icon-glasses::before {
  content: "◒";
  font-size: 20px;
}

.icon-pet::before {
  content: "●";
  font-size: 18px;
}

.icon-grid::before {
  content: "+";
  font-size: 18px;
}

.icon-ticket::before {
  content: "TKT";
  font-size: 10px;
}

.icon-transport::before {
  content: "TMS";
  font-size: 10px;
}

.icon-bi::before {
  content: "BI";
}

.icon-production::before {
  content: "MES";
  font-size: 10px;
}

.icon-trace::before {
  content: "TR";
}

.icon-warehouse::before {
  content: "WMS";
  font-size: 10px;
}

.icon-budget::before {
  content: "BGT";
  font-size: 10px;
}

.icon-supplier::before {
  content: "SRM";
  font-size: 10px;
}

.icon-equipment::before {
  content: "EAM";
  font-size: 10px;
}

.icon-lab::before {
  content: "LIM";
  font-size: 10px;
}

.icon-catering::before {
  content: "F&B";
  font-size: 10px;
}

.icon-energy::before {
  content: "EMS";
  font-size: 10px;
}

.icon-labor::before {
  content: "HR";
}

.icon-ai,
.icon-bi,
.icon-lab {
  background: linear-gradient(135deg, #e8f1ff, #f0ebff);
}

.icon-miniprogram {
  background: #e9f2ff;
}

.icon-ai::before,
.icon-bi::before,
.icon-lab::before {
  color: #6e59eb;
}

.icon-miniprogram::before {
  color: #3978ff;
}

.icon-project,
.icon-project-system,
.icon-equipment,
.icon-supplier {
  background: linear-gradient(135deg, #e5f8f4, #eaf1ff);
}

.icon-project::before,
.icon-project-system::before,
.icon-equipment::before,
.icon-supplier::before {
  color: #159a8a;
}

.icon-charge,
.icon-budget,
.icon-energy {
  background: linear-gradient(135deg, #f2f4f7, #e5e9ee);
}

.icon-charge::before,
.icon-budget::before,
.icon-energy::before {
  color: #141a23;
}

.icon-ticket {
  background: linear-gradient(135deg, #e7f2ff, #e8f7ff);
}

.icon-ticket::before {
  color: #287bd9;
}

.icon-shield,
.icon-trace,
.icon-production {
  background: #ebf8ec;
}

.icon-shield::before,
.icon-trace::before,
.icon-production::before {
  color: #28a363;
}

.icon-iot,
.icon-iot-system,
.icon-transport,
.icon-warehouse,
.icon-catering {
  background: linear-gradient(135deg, #e7faff, #e9eeff);
}

.icon-iot::before,
.icon-iot-system::before,
.icon-transport::before,
.icon-warehouse::before,
.icon-catering::before {
  color: #287bd9;
}

.icon-glasses,
.icon-pet,
.icon-labor,
.icon-grid {
  background: #f1ecff;
}

.icon-glasses::before,
.icon-pet::before,
.icon-labor::before,
.icon-grid::before {
  color: #805ae6;
}

/* Mega-menu icons use lightweight product symbols instead of abbreviated labels. */
.mega-menu .menu-icon {
  width: 30px;
  height: 30px;
  background: none;
  border-radius: 0;
  color: #3978ff;
}

.mega-menu .menu-icon::before {
  width: 27px;
  height: 27px;
  content: "";
  background: currentColor;
  mask-image: var(--menu-icon-shape);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: var(--menu-icon-shape);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.mega-menu .icon-app { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm0 3v13h10V5H7Zm4 15h2v1h-2z'/%3E%3C/svg%3E"); }
.mega-menu .icon-miniprogram { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm1 3v9h9V6H5Zm6 3h9a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2v-1h6a2 2 0 0 0 2-2V9h-6Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-ai { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 1 2.7 8.3L23 12l-8.3 2.7L12 23l-2.7-8.3L1 12l8.3-2.7L12 1Zm6.2 1.8 1 2.9 2.9 1-2.9 1-1 2.9-1-2.9-2.9-1 2.9-1 1-2.9Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-ai-vision { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4C6.5 4 2.2 8 1 12c1.2 4 5.5 8 11 8s9.8-4 11-8c-1.2-4-5.5-8-11-8Zm0 13a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-2.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-ai-data { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V3h2v16h16v2H3Zm4-4v-6h3v6H7Zm5 0V6h3v11h-3Zm5 0V9h3v8h-3Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-ai-assistant { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a9 9 0 0 0-8.8 10.8L1 17l4.4-.4A9 9 0 1 0 12 2Zm-4 8h8v2H8v-2Zm0 4h5v2H8v-2Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-erp { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 22 6v12l-10 5-10-5V6l10-5Zm0 3.2L6 7v2.1l6 3 6-3V7l-6-2.8Zm-7 7.1V16l6 3v-4.8l-6-2.9Zm8 7.7 6-3v-4.7l-6 2.8V19Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-code { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m8.1 4.1 1.8 1.8L4 12l5.9 6-1.8 1.9L.3 12l7.8-7.9Zm7.8 0L23.7 12l-7.8 7.9-1.8-1.9 5.9-6-5.9-6 1.8-1.9ZM11 22l3.4-20h-2.1L9 22h2Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-project,
.mega-menu .icon-project-system { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10v3h3a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h3V2Zm2 3h6V4H9v1Zm-3 4v10h12V9H6Zm2 3h4v2H8v-2Zm0 4h7v2H8v-2Zm6-4h2v2h-2v-2Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-service { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 1-9.7 12.5l3.1-.8A6.8 6.8 0 1 0 7 6.5L9.2 9H3V2.8l1.8 1.8A9.9 9.9 0 0 1 12 2Zm-1.5 5h3v4.1l3.1 2.2-1.7 2.4-4.4-3.1V7Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-charge,
.mega-menu .icon-energy { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 1 3 14h7l-1 9 12-15h-7.2l-.3-7Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-shield { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 21 5v6c0 5.7-3.8 10-9 12-5.2-2-9-6.3-9-12V5l9-4Zm4.6 7-6 6-3.1-3.1-1.7 1.7 4.8 4.8 7.7-7.7-1.6-1.7Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-ticket { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v5a2 2 0 0 0 0 4v5H3v-5a2 2 0 0 0 0-4V5Zm8 3v2h2V8h-2Zm0 4v2h2v-2h-2Zm0 4v2h2v-2h-2Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-transport { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h12v11h1.4l1.7-5H21l2 5v3h-2a3 3 0 0 1-6 0H9a3 3 0 0 1-6 0H1V7a2 2 0 0 1 1-2Zm15.7 8-1 3H20l-1.2-3h-1.1ZM6 17a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm12 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-bi { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V3h2v16h16v2H3Zm4-4v-6h3v6H7Zm5 0V6h3v11h-3Zm5 0V9h3v8h-3Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-iot,
.mega-menu .icon-iot-system { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.8 3h2.4v6h-2.4V3ZM3 10.8h6v2.4H3v-2.4Zm12 0h6v2.4h-6v-2.4Zm-4.2 4.2h2.4v6h-2.4v-6ZM12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8ZM5 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm14 0a3 3 0 1 1 0 6 3 3 0 0 1 0-6ZM5 16a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm14 0a3 3 0 1 1 0 6 3 3 0 0 1 0-6Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-production { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V8l6 3V8l6 3V3h4v18H3Zm3-3h2v-3H6v3Zm5 0h2v-3h-2v3Zm5 0h2v-3h-2v3Zm0-9h2V6h-2v3Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-trace { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm14 6a3 3 0 1 1 0 6 3 3 0 0 1 0-6ZM5 16a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm1-9h11v2H6V7Zm11 6h2v4h-2v-4Zm-11-3h2v6H6v-6Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-warehouse { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 1 10 5v13l-10 4-10-4V6l10-5Zm0 3.2L6.2 7 12 9.8 17.8 7 12 4.2ZM5 9.2V17l5.5 2.2v-7.8L5 9.2Zm8.5 10L19 17V9.2l-5.5 2.2v7.8Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-budget { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5a3 3 0 0 1 3-3h12v3H6v14h14V9h2v12H3V5Zm15 3h3v5h-3a2.5 2.5 0 0 1 0-5Zm0 2a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-supplier { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm8 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6ZM2 20c0-4 2.3-7 6-7s6 3 6 7H2Zm8 1c.2-2.1 1.5-5 4.8-5 3.8 0 6.2 2.8 6.2 5h-11Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-equipment { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='m10 1 1 3h2l1-3 3 2-1 3 2 2 3-1 2 3-3 1v2l3 1-2 3-3-1-2 2 1 3-3 2-1-3h-2l-1 3-3-2 1-3-2-2-3 1-2-3 3-1v-2L1 9l2-3 3 1 2-2-1-3 3-1Zm2 7a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-lab { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6v2l-1 1v5.4l5 8.1A2.2 2.2 0 0 1 17.1 22H6.9A2.2 2.2 0 0 1 5 18.6l5-8.1V5L9 4V2Zm2.2 10.5-3 5h7.6l-3-5h-1.6Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-catering { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2h2v7h2V2h2v7h2V2h2v9a3 3 0 0 1-3 3h-1v8H8v-8H7a3 3 0 0 1-3-3V2Zm14 0c2.8 0 4 2.5 4 5v7h-2v8h-2v-8h-2V7c0-3.2 1.2-5 2-5Z'/%3E%3C/svg%3E"); }
.mega-menu .icon-labor { --menu-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8ZM5 5a3 3 0 1 1 3 3 3 3 0 0 1-3-3Zm11 0a3 3 0 1 1 3 3 3 3 0 0 1-3-3ZM4 21c0-5 3.2-8 8-8s8 3 8 8H4Zm-4 0c0-4 1.8-7 5.3-7.8A8.6 8.6 0 0 0 2 21H0Zm24 0h-2a8.6 8.6 0 0 0-3.3-7.8C22.2 14 24 17 24 21Z'/%3E%3C/svg%3E"); }

.mega-menu .icon-ai,
.mega-menu .icon-ai-vision,
.mega-menu .icon-ai-data,
.mega-menu .icon-ai-assistant,
.mega-menu .icon-bi,
.mega-menu .icon-lab,
.mega-menu .icon-labor { color: #6e59eb; }

.mega-menu .icon-miniprogram { color: #3978ff; }

.mega-menu .icon-erp { color: #1268d6; }

.mega-menu .icon-project,
.mega-menu .icon-project-system,
.mega-menu .icon-equipment,
.mega-menu .icon-supplier { color: #159a8a; }

.mega-menu .icon-charge,
.mega-menu .icon-budget,
.mega-menu .icon-energy { color: #141a23; }

.mega-menu .icon-ticket { color: #287bd9; }

.mega-menu .icon-shield,
.mega-menu .icon-trace,
.mega-menu .icon-production { color: #28a363; }

.mega-menu .icon-iot,
.mega-menu .icon-iot-system,
.mega-menu .icon-transport,
.mega-menu .icon-warehouse,
.mega-menu .icon-catering { color: #287bd9; }

.hero {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  background: #f8fbff;
  isolation: isolate;
}

.hero::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background: radial-gradient(circle at 73% 43%, rgb(148 184 255 / 33%), transparent 24%), radial-gradient(circle at 84% 76%, rgb(189 161 255 / 25%), transparent 22%), linear-gradient(105deg, #fff 0%, #fbfdff 49%, #f0f6ff 100%);
}

.hero::after {
  position: absolute;
  right: -20vw;
  bottom: -29vw;
  z-index: -1;
  width: 60vw;
  height: 60vw;
  content: "";
  background: radial-gradient(circle, rgb(76 137 255 / 18%), transparent 66%);
  filter: blur(10px);
}

.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  background-image: linear-gradient(rgb(106 139 193 / 8%) 1px, transparent 1px), linear-gradient(90deg, rgb(106 139 193 / 8%) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 46%, #000 100%);
}

.hero-inner {
  display: grid;
  grid-template-columns: .91fr 1.09fr;
  align-items: center;
  min-height: 680px;
  padding: 90px 0 86px;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 545px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: var(--blue-deep);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
}

.eyebrow>span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  box-shadow: 0 0 0 5px rgb(57 120 255 / 10%);
}

.eyebrow-light {
  color: #607087;
}

.hero h1,
.hero h2 {
  max-width: 570px;
  margin: 0;
  color: #162033;
  font-size: clamp(42px, 4vw, 60px);
  font-weight: 650;
  letter-spacing: -.055em;
  line-height: 1.14;
}

.hero-description {
  max-width: 460px;
  margin: 27px 0 32px;
  color: #607087;
  font-size: 18px;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  gap: 13px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 52px;
  padding: 0 23px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  transition: transform .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: #fff;
  background: linear-gradient(104deg, #2c76ff, #745ff0);
  box-shadow: 0 10px 24px rgb(57 96 232 / 28%);
}

.button-primary:hover {
  box-shadow: 0 15px 28px rgb(57 96 232 / 35%);
}

.button-secondary {
  color: #2e5fce;
  background: rgb(255 255 255 / 65%);
  border-color: #c8d7f3;
}

.button-secondary:hover {
  background: #fff;
  border-color: #8db2ff;
}

.hero-proof {
  display: flex;
  gap: 28px;
  margin: 48px 0 0;
}

.hero-proof div {
  position: relative;
}

.hero-proof div+div::before {
  position: absolute;
  top: 6px;
  bottom: 5px;
  left: -14px;
  width: 1px;
  content: "";
  background: #dce4ef;
}

.hero-proof dt {
  margin: 0 0 5px;
  color: #1d2d48;
  font-size: 21px;
  font-weight: 700;
}

.hero-proof dd {
  margin: 0;
  color: #8994a5;
  font-size: 12px;
}

.hero-visual {
  position: relative;
  height: 500px;
  margin-left: 30px;
}

.visual-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 460px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(101 147 255 / 41%), transparent 68%);
  filter: blur(10px);
  transform: translate(-50%, -50%);
}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgb(75 124 225 / 20%);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-20deg);
}

.orbit-one {
  width: 520px;
  height: 265px;
}

.orbit-two {
  width: 615px;
  height: 338px;
  border-color: rgb(121 92 225 / 15%);
  transform: translate(-50%, -50%) rotate(28deg);
}

.solution-window {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100%, 620px);
  overflow: hidden;
  background: rgb(255 255 255 / 75%);
  border: 1px solid rgb(255 255 255 / 85%);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgb(28 77 160 / 18%);
  backdrop-filter: blur(18px);
  transform: translate(-50%, -50%) rotate(-3deg);
}

.window-top {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 17px;
  background: rgb(247 250 255 / 82%);
  border-bottom: 1px solid #e5ecf7;
}

.window-top span {
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #f2b0a9;
}

.window-top span:nth-child(2) {
  background: #f5d394;
}

.window-top span:nth-child(3) {
  background: #9fdab8;
}

.window-top b {
  margin-left: 12px;
  color: #728198;
  font-size: 12px;
  font-weight: 500;
}

.window-body {
  display: flex;
  height: 315px;
}

.visual-sidebar {
  display: flex;
  flex: 0 0 65px;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 25px;
  background: rgb(246 249 253 / 90%);
  border-right: 1px solid #e9eff7;
}

.visual-sidebar i {
  display: block;
  width: 24px;
  height: 7px;
  border-radius: 5px;
  background: #e0e8f4;
}

.visual-sidebar i:first-child {
  background: #6495fb;
}

.visual-board {
  flex: 1;
  padding: 26px 28px;
}

.board-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #233451;
  font-size: 15px;
  font-weight: 650;
}

.board-heading i {
  width: 54px;
  height: 9px;
  border-radius: 4px;
  background: #e6ecf6;
}

.board-metrics {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr;
  align-items: baseline;
  gap: 4px 8px;
  margin: 27px 0 17px;
}

.board-metrics b {
  color: #2a69ec;
  font-size: 27px;
}

.board-metrics b span {
  font-size: 18px;
}

.board-metrics small {
  color: #94a1b4;
  font-size: 10px;
}

.board-metrics em {
  width: 1px;
  height: 28px;
  margin: 0 9px;
  background: #e4eaf3;
}

.board-lines {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 92px;
  padding: 13px 11px 0;
  background: linear-gradient(#f8fbff, #f4f8ff);
  border-radius: 8px;
}

.board-lines i {
  width: 12%;
  height: var(--line-height);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(#7eabff, #4684ff);
}

.board-lines i:nth-child(1) {
  --line-height: 42%;
}

.board-lines i:nth-child(2) {
  --line-height: 67%;
}

.board-lines i:nth-child(3) {
  --line-height: 52%;
}

.board-lines i:nth-child(4) {
  --line-height: 86%;
}

.board-lines i:nth-child(5) {
  --line-height: 61%;
}

.board-lines i:nth-child(6) {
  --line-height: 76%;
}

.board-cards {
  display: grid;
  grid-template-columns: 1.2fr 1fr .85fr;
  gap: 10px;
  margin-top: 17px;
}

.board-cards span {
  height: 45px;
  border: 1px solid #e7edf6;
  border-radius: 7px;
  background: #fbfcfe;
}

.floating-card {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: 36px auto;
  column-gap: 9px;
  min-width: 156px;
  padding: 11px 14px;
  background: rgb(255 255 255 / 91%);
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 12px;
  box-shadow: 0 13px 30px rgb(34 67 119 / 16%);
  backdrop-filter: blur(12px);
  animation: float 5s ease-in-out infinite;
}

.floating-card b {
  align-self: end;
  color: #273752;
  font-size: 12px;
}

.floating-card small {
  grid-column: 2;
  color: #8b98aa;
  font-size: 10px;
}

.mini-icon {
  display: grid;
  grid-row: span 2;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #5c62eb;
  font-size: 12px;
  font-weight: 800;
  background: linear-gradient(135deg, #e7efff, #eeeaff);
  border-radius: 9px;
}

.card-ai {
  top: 53px;
  right: 0;
}

.card-iot {
  bottom: 44px;
  left: 18px;
  animation-delay: -2.2s;
}

.card-iot .mini-icon {
  color: #198dca;
  background: #e7f9ff;
}

/* Slides preserve the original dashboard hero and add Feishu-style service narratives. */
.hero-slides {
  position: relative;
  min-height: 680px;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: grid;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(28px);
  transition: opacity .55s ease, transform .65s cubic-bezier(.2, .75, .25, 1), visibility .65s;
}

.hero-slide.is-active {
  position: relative;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.hero-slide .hero-inner {
  position: relative;
}

.hero-slide-product::before,
.hero-slide-iot::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
}

.hero-slide-product::before {
  background: radial-gradient(circle at 80% 41%, rgb(95 179 255 / 24%), transparent 23%), radial-gradient(circle at 76% 73%, rgb(139 110 242 / 17%), transparent 24%), linear-gradient(105deg, #fff 0%, #fbfdff 54%, #edf8ff 100%);
}

.hero-slide-iot::before {
  background: radial-gradient(circle at 76% 40%, rgb(85 220 202 / 21%), transparent 22%), radial-gradient(circle at 83% 72%, rgb(106 130 255 / 20%), transparent 24%), linear-gradient(105deg, #fff 0%, #fbfdff 52%, #effaff 100%);
}

.hero-product-visual,
.hero-iot-visual {
  position: relative;
  height: 500px;
  margin-left: 30px;
}

.hero-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgb(70 145 238 / 19%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit-a {
  width: 520px;
  height: 270px;
  transform: translate(-50%, -50%) rotate(-13deg);
}

.orbit-b {
  width: 630px;
  height: 365px;
  border-color: rgb(121 92 225 / 14%);
  transform: translate(-50%, -50%) rotate(30deg);
}

.product-preview-window {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100%, 554px);
  overflow: hidden;
  background: rgb(255 255 255 / 78%);
  border: 1px solid rgb(255 255 255 / 92%);
  border-radius: 19px;
  box-shadow: 0 30px 74px rgb(29 100 173 / 18%);
  transform: translate(-50%, -50%) rotate(-3deg);
}

.preview-toolbar {
  display: flex;
  align-items: center;
  height: 43px;
  padding: 0 18px;
  background: rgb(250 253 255 / 88%);
  border-bottom: 1px solid #e2ecf7;
}

.preview-toolbar span {
  width: 8px;
  height: 8px;
  margin-right: 6px;
  background: #a4c6ee;
  border-radius: 50%;
}

.preview-toolbar span:nth-child(2) {
  background: #b5a7f2;
}

.preview-toolbar span:nth-child(3) {
  background: #83dcc4;
}

.preview-toolbar b {
  margin-left: 12px;
  color: #6a7d96;
  font-size: 12px;
  font-weight: 600;
}

.product-preview-window>img {
  width: 100%;
  height: 314px;
  object-fit: cover;
  object-position: 46% 48%;
  filter: saturate(.95) contrast(.98);
}

.preview-metrics {
  position: absolute;
  right: 18px;
  bottom: 17px;
  left: 18px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 8px;
}

.preview-metrics>* {
  padding: 12px;
  color: #3978ff;
  background: rgb(255 255 255 / 85%);
  border: 1px solid rgb(226 237 249 / 90%);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 650;
  backdrop-filter: blur(8px);
}

.preview-metrics span {
  color: #6e5ce9;
}

.hero-float-card {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: 36px auto;
  column-gap: 9px;
  min-width: 157px;
  padding: 11px 14px;
  background: rgb(255 255 255 / 91%);
  border: 1px solid rgb(255 255 255 / 85%);
  border-radius: 12px;
  box-shadow: 0 14px 30px rgb(34 67 119 / 16%);
  backdrop-filter: blur(12px);
  animation: float 5s ease-in-out infinite;
}

.hero-float-card b {
  align-self: end;
  color: #273752;
  font-size: 12px;
}

.hero-float-card small {
  grid-column: 2;
  color: #8b98aa;
  font-size: 10px;
}

.float-app {
  top: 52px;
  right: 0;
}

.float-ai {
  bottom: 45px;
  left: 11px;
  animation-delay: -2.3s;
}

.float-ai .mini-icon {
  color: #6d5ce8;
  background: #eeeaff;
}

.hero-iot-visual {
  display: grid;
  place-items: center;
}

.iot-hero-glow {
  position: absolute;
  width: 460px;
  height: 390px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(95 204 232 / 34%), transparent 68%);
  filter: blur(7px);
}

.hero-iot-visual>img {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  filter: drop-shadow(0 26px 32px rgb(44 121 165 / 18%));
  animation: iotSceneFloat 7s ease-in-out infinite;
}

.float-device {
  top: 76px;
  left: 9px;
}

.float-device .mini-icon {
  color: #198dca;
  background: #e7f9ff;
}

.float-pet {
  right: 4px;
  bottom: 70px;
  animation-delay: -1.7s;
}

.float-pet .mini-icon {
  color: #735ce8;
  background: #eeeaff;
}

.hero-controls {
  position: absolute;
  z-index: 5;
  bottom: 30px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transform: translateX(-50%);
}

.hero-control {
  display: grid;
  width: 29px;
  height: 29px;
  padding: 0;
  place-items: center;
  color: #4d6690;
  background: rgb(255 255 255 / 70%);
  border: 1px solid #cddbf0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}

.hero:hover .hero-control,
.hero-controls:focus-within .hero-control {
  opacity: 1;
}

.hero-control:hover,
.hero-control:focus-visible {
  color: #fff;
  background: #3978ff;
  outline: 0;
}

.hero-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-pagination button {
  width: 7px;
  height: 7px;
  padding: 0;
  background: #b7c7df;
  border: 0;
  border-radius: 99px;
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}

.hero-pagination button.is-active {
  width: 26px;
  background: #3978ff;
}

.hero-pagination button:focus-visible {
  outline: 3px solid rgb(57 120 255 / 30%);
  outline-offset: 3px;
}

.quick-links {
  position: relative;
  z-index: 3;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.quick-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 115px;
  padding: 20px 22px;
  border-right: 1px solid var(--line);
  transition: background .2s ease;
}

.quick-link:first-child {
  border-left: 0;
}

.quick-link:last-child {
  border-right: 0;
}

.quick-link:hover {
  background: #f7faff;
}

.quick-link b {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
}

.quick-link small {
  display: block;
  max-width: 245px;
  color: #7b8798;
  font-size: 13px;
  line-height: 1.55;
}

.quick-link>i {
  margin-left: auto;
  color: #7792c8;
  font-size: 19px;
  font-style: normal;
  transition: transform .2s ease;
}

.quick-link:hover>i {
  transform: translateX(4px);
}

.section {
  padding: 140px 0;
}

.section-heading {
  margin-bottom: 56px;
}

.section-heading.centered {
  text-align: center;
}

.section-heading h2,
.trust-copy h2,
.contact-copy h2 {
  margin: 0;
  color: #1d2839;
  font-size: clamp(32px, 3vw, 42px);
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1.2;
}

.section-heading>p:last-child {
  max-width: 560px;
  margin: 19px auto 0;
  color: #748194;
  font-size: 16px;
  line-height: 1.7;
}

.split-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}

.split-heading>p:last-child {
  max-width: 420px;
  margin: 0;
  text-align: right;
}

.solutions-section {
  background: #fff;
}

.solution-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
}

.solution-statement {
  position: relative;
  min-height: 452px;
  padding: 29px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(143deg, #2c70ee, #6571e9 70%, #8b7cef);
  border-radius: var(--radius);
}

.statement-mark {
  color: rgb(255 255 255 / 55%);
  font-family: Georgia, serif;
  font-size: 15px;
}

.solution-statement p {
  position: relative;
  z-index: 1;
  margin: 82px 0 0;
  font-size: 29px;
  font-weight: 350;
  line-height: 1.42;
}

.solution-statement strong {
  font-weight: 650;
}

.product-statement {
  isolation: isolate;
  color: #1d2d45;
  background: linear-gradient(145deg, #e2f4ff 0%, #effaff 58%, #edf6ff 100%);
  border: 1px solid #d8ecf9;
}

.product-statement::before {
  position: absolute;
  z-index: -1;
  right: -95px;
  bottom: -110px;
  width: 290px;
  height: 290px;
  content: "";
  background: radial-gradient(circle, rgb(99 192 255 / 26%), rgb(99 192 255 / 0%) 68%);
  border-radius: 50%;
}

.product-statement .statement-mark {
  color: #8ba9c8;
}

.statement-icon {
  position: absolute;
  top: 25px;
  right: 25px;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  background: rgb(255 255 255 / 90%);
  border: 1px solid rgb(255 255 255 / 75%);
  border-radius: 17px;
  box-shadow: 0 12px 24px rgb(77 143 198 / 11%);
}

.statement-icon span {
  width: 18px;
  height: 18px;
  border: 3px solid #4e9cda;
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-32deg);
}

.statement-icon i {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 9px;
  height: 9px;
  border: 3px solid #4e9cda;
  border-top: 0;
  border-left: 0;
  transform: rotate(35deg);
}

.product-statement-copy {
  position: relative;
  z-index: 2;
  margin-top: 52px;
}

.product-statement-copy h3 {
  max-width: 205px;
  margin: 0;
  color: #1f2b3d;
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -.05em;
  line-height: 1.22;
}

.product-statement-copy p {
  max-width: 225px;
  margin: 22px 0 0;
  color: #435b75;
  font-size: 17px;
  font-weight: 450;
  line-height: 1.42;
}

.product-sketch {
  position: absolute;
  z-index: 1;
  right: -18px;
  bottom: -38px;
  left: 42px;
  height: 242px;
  transform: rotate(-3deg);
  transform-origin: bottom center;
}

.product-sketch::before {
  position: absolute;
  z-index: -1;
  right: 10px;
  bottom: 6px;
  left: 12px;
  height: 126px;
  content: "";
  background: radial-gradient(ellipse, rgb(83 161 223 / 22%), rgb(83 161 223 / 0%) 70%);
  filter: blur(6px);
}

.product-sketch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 35% 46%;
  border: 7px solid rgb(255 255 255 / 78%);
  border-radius: 18px;
  box-shadow: 0 20px 34px rgb(49 114 168 / 20%);
  transform: perspective(540px) rotateX(13deg) rotateY(-9deg);
}

.sketch-chip {
  position: absolute;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #fff;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 13px 22px rgb(42 116 190 / 18%);
  animation: productChipFloat 5.4s ease-in-out infinite;
}

.chip-app {
  top: 76px;
  left: -17px;
  background: linear-gradient(135deg, #5fc4f2, #458ce9);
  transform: rotate(-11deg);
}

.chip-ai {
  right: 9px;
  bottom: 41px;
  background: linear-gradient(135deg, #778cff, #9a6de7);
  animation-delay: -2.6s;
}

.sketch-spark {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #77d5f5;
  box-shadow: 0 0 0 7px rgb(119 213 245 / 14%);
}

.spark-one {
  top: 55px;
  right: 17px;
}

.spark-two {
  bottom: 25px;
  left: 46px;
  width: 8px;
  height: 8px;
  background: #826de4;
  box-shadow: 0 0 0 6px rgb(130 109 228 / 12%);
}

.solution-grid {
  display: grid;
  gap: 16px;
}

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

.solution-card {
  position: relative;
  display: flex;
  min-height: 218px;
  flex-direction: column;
  align-items: flex-start;
  padding: 25px;
  overflow: hidden;
  background: #f7f9fd;
  border: 1px solid #edf0f5;
  border-radius: var(--radius);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.solution-card:hover {
  background: #fff;
  border-color: #d6e4ff;
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

.solution-card h3 {
  max-width: 245px;
  margin: 21px 0 11px;
  color: #273242;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.35;
}

.solution-card p {
  max-width: 260px;
  margin: 0;
  color: #778497;
  font-size: 13px;
  line-height: 1.65;
}

.card-arrow {
  position: absolute;
  right: 24px;
  bottom: 23px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #4a7de8;
  background: #e9f1ff;
  border-radius: 50%;
  font-size: 16px;
  transition: transform .2s ease, background .2s ease;
}

.solution-card:hover .card-arrow {
  background: #3978ff;
  color: #fff;
  transform: translateX(3px);
}

.industry-section {
  background: linear-gradient(180deg, #f6f9ff 0%, #f8fbff 100%);
}

.industry-showcase {
  display: grid;
  grid-template-columns: 405px 1fr;
  align-items: start;
  gap: 24px;
}

.industry-intro {
  position: sticky;
  top: 92px;
  min-height: 452px;
  overflow: hidden;
  color: #2b3a52;
  background: linear-gradient(150deg, #e6f1ff, #f1edff);
  border: 1px solid #e2eaf8;
  border-radius: var(--radius);
}

.intro-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 29px;
  color: #7787a0;
  font-family: Georgia, serif;
  font-size: 15px;
}

.intro-top i {
  width: 50px;
  height: 1px;
  background: #a8b6cc;
}

.intro-ring {
  position: absolute;
  top: 51%;
  left: 50%;
  width: 260px;
  height: 260px;
  border: 1px solid rgb(75 118 220 / 25%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.intro-ring span {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #5d8fff;
  box-shadow: 0 0 0 7px rgb(86 130 236 / 10%);
}

.intro-ring span:nth-child(1) {
  top: 3px;
  left: 40px;
}

.intro-ring span:nth-child(2) {
  right: 17px;
  bottom: 45px;
  background: #885fe7;
}

.intro-ring span:nth-child(3) {
  bottom: -7px;
  left: 106px;
  background: #36b4b4;
}

.industry-intro::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 172px;
  height: 172px;
  content: "";
  background: radial-gradient(circle at 30% 30%, #a9c8ff, #6087ec 58%, #725ce5);
  border-radius: 50%;
  box-shadow: 0 16px 34px rgb(71 104 202 / 25%);
  transform: translate(-50%, -50%);
}

.industry-intro p {
  position: absolute;
  z-index: 1;
  bottom: 61px;
  left: 31px;
  margin: 0;
  color: #31435e;
  font-size: 23px;
  line-height: 1.4;
}

.industry-intro p strong {
  font-weight: 650;
}

.industry-intro small {
  position: absolute;
  right: 31px;
  bottom: 34px;
  color: #8897ad;
  font-size: 12px;
}

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

.industry-grid .solution-card {
  min-height: 174px;
}

.iot-section {
  overflow: hidden;
  background: #fff;
}

.iot-stage {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  align-items: center;
  gap: 46px;
}

.iot-visual {
  position: relative;
  min-height: 466px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(145deg, #eff7ff 0%, #e6f4ff 54%, #edf0ff 100%);
  border: 1px solid #dceaf8;
  border-radius: 20px;
}

.iot-visual::before {
  position: absolute;
  top: -170px;
  right: -100px;
  z-index: -1;
  width: 390px;
  height: 390px;
  content: "";
  background: radial-gradient(circle, rgb(80 165 255 / 24%), transparent 68%);
  border-radius: 50%;
}

.iot-visual::after {
  position: absolute;
  bottom: -130px;
  left: -110px;
  z-index: -1;
  width: 350px;
  height: 350px;
  content: "";
  background: radial-gradient(circle, rgb(127 99 239 / 12%), transparent 68%);
  border-radius: 50%;
}

.iot-visual-copy {
  position: absolute;
  z-index: 2;
  top: 27px;
  left: 28px;
  display: grid;
  gap: 7px;
}

.iot-visual-copy span {
  color: #5181bf;
  font-size: 12px;
  font-weight: 600;
}

.iot-visual-copy strong {
  max-width: 192px;
  color: #233854;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1.28;
}

.iot-main-image {
  position: absolute;
  z-index: 1;
  right: -4%;
  bottom: -8%;
  width: 90%;
  filter: drop-shadow(0 24px 25px rgb(80 137 221 / 17%));
  animation: iotSceneFloat 7s ease-in-out infinite;
  transition: opacity .3s ease, transform .3s ease;
}

.iot-main-image.is-changing {
  opacity: 0;
  transform: translate3d(12px, 0, 0) scale(.97);
}

.iot-status {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  color: #426382;
  font-size: 11px;
  font-weight: 600;
  background: rgb(255 255 255 / 86%);
  border: 1px solid rgb(255 255 255 / 88%);
  border-radius: 999px;
  box-shadow: 0 9px 20px rgb(77 130 190 / 12%);
  backdrop-filter: blur(8px);
}

.iot-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #35c590;
  box-shadow: 0 0 0 4px rgb(53 197 144 / 12%);
  animation: statusPulse 2s ease-in-out infinite;
}

.status-online {
  top: 182px;
  left: 31px;
}

.status-ai {
  right: 26px;
  bottom: 140px;
}

.status-ai i {
  background: #8262e7;
  box-shadow: 0 0 0 4px rgb(130 98 231 / 12%);
  animation-delay: .5s;
}

.iot-progress {
  position: absolute;
  z-index: 4;
  right: 26px;
  bottom: 25px;
  left: 31px;
  height: 3px;
  overflow: hidden;
  background: rgb(53 113 198 / 12%);
  border-radius: 999px;
}

.iot-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #55b9dd, #5f7deb);
  border-radius: inherit;
  transform: translateX(-100%);
}

.iot-progress.is-running span {
  animation: iotProgress 4.8s linear;
}

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

.iot-grid .solution-card {
  min-height: 224px;
}

.iot-card {
  cursor: pointer;
}

.iot-card.is-active {
  background: #fff;
  border-color: #bcd5ff;
  box-shadow: 0 12px 30px rgb(63 111 196 / 12%);
}

.iot-card.is-active::before {
  position: absolute;
  top: 0;
  left: 24px;
  width: 39px;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, #47a8e9, #6977ec);
  border-radius: 0 0 4px 4px;
}

.reasons-section {
  background: #f7f9fc;
}

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

.reason-card {
  position: relative;
  display: flex;
  min-height: 314px;
  flex-direction: column;
  padding: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ebeff5;
  border-radius: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.reason-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.reason-card>span {
  color: #a5b1c1;
  font-family: Georgia, serif;
  font-size: 13px;
}

.reason-card h3 {
  margin: 23px 0 11px;
  color: #263247;
  font-size: 18px;
}

.reason-card p {
  max-width: 265px;
  margin: 0;
  color: #7d8998;
  font-size: 13px;
  line-height: 1.7;
}

.reason-card footer {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: auto;
  padding-top: 22px;
  color: #527ee0;
  border-top: 1px solid #eef2f7;
}

.reason-card footer b {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.04em;
}

.reason-card footer small {
  color: #8996a8;
  font-size: 11px;
}

.reason-symbol {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 47px;
  height: 47px;
  opacity: .92;
  border-radius: 14px;
  background: linear-gradient(135deg, #edf4ff, #e9edff);
}

.reason-symbol::before {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #4c7ee7;
  font-size: 19px;
  font-weight: 800;
  transform: translate(-50%, -50%);
}

.symbol-team::before {
  content: "◉";
}

.symbol-case::before {
  content: "◆";
}

.symbol-custom::before {
  content: "✦";
}

.symbol-idea::before {
  content: "◌";
}

.symbol-delivery::before {
  content: "↗";
}

.symbol-service::before {
  content: "?";
}

.trust-section {
  padding: 142px 0;
  background: #fff;
}

.trust-inner {
  display: grid;
  grid-template-columns: .83fr 1.17fr;
  align-items: center;
  gap: 80px;
}

.trust-copy h2 {
  margin: 0 0 19px;
}

.trust-copy>p:not(.eyebrow) {
  max-width: 375px;
  margin: 0 0 28px;
  color: #768396;
  font-size: 16px;
  line-height: 1.7;
}

.text-link {
  display: inline-flex;
  gap: 13px;
  align-items: center;
  color: var(--blue-deep);
  font-size: 15px;
  font-weight: 650;
}

.text-link span {
  font-size: 18px;
  transition: transform .2s ease;
}

.text-link:hover span {
  transform: translateX(4px);
}

.trust-proof {
  position: relative;
  padding: 36px;
  overflow: hidden;
  background: linear-gradient(135deg, #f3f7ff, #f8f6ff);
  border: 1px solid #e4ebf8;
  border-radius: 24px;
}

.trust-proof::before {
  position: absolute;
  top: -95px;
  right: -110px;
  width: 260px;
  height: 260px;
  content: "";
  background: radial-gradient(circle, rgb(112 144 255 / 15%), transparent 68%);
  border-radius: 50%;
  pointer-events: none;
}

.trust-number {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  gap: 17px;
  padding-bottom: 28px;
  border-bottom: 1px solid #dce5f3;
}

.trust-number strong {
  color: #315db6;
  font-size: clamp(52px, 5vw, 76px);
  font-weight: 650;
  letter-spacing: -.07em;
  line-height: .9;
}

.trust-number strong span {
  color: #7c5be8;
}

.trust-number p {
  margin: 0 0 4px;
  color: #65738a;
  font-size: 14px;
}

.client-wall {
  position: relative;
  z-index: 1;
  padding-top: 25px;
}

.logo-stage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 12px;
  background: #f5f7fc;
  border-radius: 16px;
}

.logo-stage img {
  display: block;
  width: 100%;
  height: 64px;
  object-fit: contain;
  padding: 8px;
  background: #fff;
  border: 1px solid #edf0f6;
  border-radius: 10px;
  filter: saturate(.82) contrast(.94);
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}

.logo-stage img:hover {
  filter: saturate(1) contrast(1);
  box-shadow: 0 8px 18px rgb(37 67 122 / 10%);
  transform: translateY(-2px);
}

.client-wall p {
  margin: 13px 2px 0;
  color: #7e8a9b;
  font-size: 12px;
  line-height: 1.55;
}

.contact-section {
  padding: 0 0 140px;
  background: #fff;
}

.contact-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 266px;
  padding: 48px 64px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(115deg, #2d65e5, #5669e7 62%, #7965e5);
  border-radius: 20px;
}

.contact-copy {
  position: relative;
  z-index: 1;
  max-width: 670px;
}

.contact-copy .eyebrow {
  color: rgb(255 255 255 / 75%);
}

.contact-copy h2 {
  color: #fff;
  font-size: clamp(27px, 2.8vw, 38px);
}

.button-light {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  color: #2c62da;
  background: #fff;
}

.contact-orb {
  position: absolute;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 50%;
}

.orb-a {
  top: -180px;
  right: -65px;
  width: 430px;
  height: 430px;
}

.orb-b {
  right: 125px;
  bottom: -235px;
  width: 360px;
  height: 360px;
}

.site-footer {
  color: #bdc6d4;
  background: #141c29;
}

.footer-top {
  display: grid;
  grid-template-columns: .85fr 2.15fr;
  gap: 80px;
  padding: 62px 0 42px;
}

.footer-brand img {
  width: 126px;
  height: auto;
  max-height: 92px;
  object-fit: contain;
  object-position: left center;
}

.footer-brand p {
  max-width: 260px;
  margin: 18px 0;
  color: #a6b1c0;
  font-size: 15px;
  line-height: 1.65;
}

.footer-brand>a {
  color: #e3ebf7;
  font-size: 23px;
  font-weight: 650;
  letter-spacing: .02em;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.footer-links h3,
.footer-offices h3 {
  margin: 0 0 19px;
  color: #f2f6fc;
  font-size: 14px;
  font-weight: 600;
}

.footer-links a {
  display: block;
  margin-bottom: 12px;
  color: #aeb8c6;
  font-size: 12px;
  line-height: 1.45;
  transition: color .2s ease;
}

.footer-links a:hover {
  color: #fff;
}

.footer-offices {
  display: grid;
  grid-template-columns: .85fr 1.075fr 1.075fr;
  gap: 28px;
  padding: 0 0 38px;
}

.footer-offices p {
  display: flex;
  gap: 9px;
  margin: 0 0 11px;
  color: #aeb8c6;
  font-size: 12px;
  line-height: 1.55;
}

.footer-offices b {
  flex: 0 0 28px;
  color: #e4ebf7;
  font-weight: 600;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  color: #7d8999;
  font-size: 11px;
  border-top: 1px solid rgb(190 205 227 / 10%);
}

.reveal {
  opacity: 1;
  transform: translateY(0);
}

.reveal-animations .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s cubic-bezier(.2, .75, .25, 1), transform .55s cubic-bezier(.2, .75, .25, 1);
}

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

.reveal-delay-1 {
  transition-delay: .08s;
}

.reveal-delay-2 {
  transition-delay: .16s;
}

.reveal-delay-3 {
  transition-delay: .24s;
}

@keyframes float {
  50% {
    transform: translateY(-8px);
  }
}

@keyframes productChipFloat {
  50% {
    transform: translateY(-9px) rotate(4deg);
  }
}

@keyframes scrollDot {
  50% {
    transform: rotate(45deg) translate(1px, 1px);
  }
}

@keyframes logoMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-15%);
  }
}

@keyframes iotSceneFloat {
  50% {
    transform: translate3d(-5px, -10px, 0);
  }
}

@keyframes iotProgress {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes statusPulse {
  50% {
    box-shadow: 0 0 0 7px rgb(53 197 144 / 0%);
  }
}

@media (max-width: 1180px) {
  .site-nav {
    margin-left: 35px;
  }

  .nav-link {
    padding: 0 8px;
    font-size: 14px;
  }

  .header-phone {
    font-size: 12px;
  }

  .hero-inner {
    grid-template-columns: .93fr 1.07fr;
  }

  .solution-layout {
    grid-template-columns: 255px 1fr;
  }

  .industry-showcase {
    grid-template-columns: 330px 1fr;
  }

  .iot-stage {
    gap: 24px;
  }

  .trust-inner {
    gap: 46px;
  }
}

@media (max-width: 900px) {
  :root {
    --container: min(calc(100% - 40px), 640px);
  }

  .site-header {
    height: 60px;
    backdrop-filter: none;
  }

  .header-inner {
    width: calc(100% - 40px);
  }

  .brand {
    width: 98px;
  }

  .brand img {
    width: 94px;
  }

  .menu-toggle {
    display: grid;
    width: 40px;
    height: 40px;
    margin-left: auto;
    padding: 10px;
    place-content: center;
    gap: 5px;
    background: #f3f6fa;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
  }

  .menu-toggle span:not(.sr-only) {
    display: block;
    width: 18px;
    height: 1.5px;
    background: #2e3d54;
    transition: transform .2s ease, opacity .2s ease;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .header-phone {
    display: none;
  }

  .header-phone svg {
    width: 21px;
    height: 21px;
  }

  .site-nav {
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: block;
    height: calc(100vh - 60px);
    margin: 0;
    padding: 18px 20px 36px;
    overflow-y: auto;
    visibility: hidden;
    background: #fff;
    opacity: 0;
    transform: translateX(18px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }

  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  }

  .nav-link {
    width: 100%;
    min-height: 48px;
    justify-content: space-between;
    padding: 0 5px;
    font-size: 17px;
  }

  .has-menu {
    display: block;
  }

  .mega-menu {
    position: static;
    display: none;
    grid-template-columns: 1fr;
    width: 100%;
    padding: 4px 0 7px 13px;
    visibility: visible;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
  }

  .ai-mega-menu {
    left: auto;
    transform: none;
  }

  .nav-trigger[aria-expanded="true"]+.mega-menu {
    display: grid;
  }

  .nav-trigger[aria-expanded="true"]+.ai-mega-menu {
    transform: none;
  }

  .mega-menu a {
    min-height: 72px;
    padding: 11px;
  }

  .mega-menu small {
    max-width: none;
  }

  .hero {
    min-height: auto;
  }

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

  .hero-slide.is-active {
    position: relative;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 86px 0 64px;
  }

  .hero-content {
    max-width: 620px;
  }

  .hero h1,
  .hero h2 {
    max-width: 620px;
  }

  .hero-visual,
  .hero-product-visual,
  .hero-iot-visual {
    width: min(100%, 625px);
    height: 400px;
    margin: 48px auto 0;
  }

  .hero-product-visual,
  .hero-iot-visual {
    margin-top: 34px;
  }

  .hero-controls {
    bottom: 18px;
  }

  .quick-links-grid {
    grid-template-columns: 1fr;
  }

  .quick-link,
  .quick-link:first-child {
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .quick-link:last-child {
    border-bottom: 0;
  }

  .section {
    padding: 92px 0;
  }

  .solution-layout,
  .industry-showcase,
  .iot-stage {
    grid-template-columns: 1fr;
  }

  .solution-statement,
  .industry-intro {
    min-height: 270px;
  }

  .product-statement-copy {
    margin-top: 32px;
  }

  .product-statement-copy p {
    margin-top: 14px;
    font-size: 16px;
  }

  .product-sketch {
    right: 30px;
    bottom: -48px;
    left: auto;
    width: min(66%, 350px);
    height: 250px;
  }

  .solution-statement p {
    margin-top: 45px;
  }

  .industry-intro::before {
    top: 52%;
  }

  .industry-intro p {
    bottom: 37px;
  }

  .iot-visual {
    min-height: 360px;
  }

  .iot-main-image {
    width: 83%;
    right: -1%;
    bottom: -14%;
  }

  .status-online {
    top: 156px;
  }

  .status-ai {
    bottom: 105px;
  }

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

  .trust-inner {
    grid-template-columns: 1fr;
  }

  .logo-stage {
    grid-template-columns: repeat(4, 1fr);
  }

  .logo-stage img {
    height: 60px;
  }

  .contact-panel {
    gap: 30px;
    padding: 44px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .footer-offices {
    grid-template-columns: 1fr 1fr;
  }

  .footer-offices h3 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  :root {
    --container: calc(100% - 32px);
  }

  .header-inner {
    width: calc(100% - 32px);
  }

  .brand img {
    width: 87px;
  }

  .hero-inner {
    padding: 62px 0 45px;
  }

  .eyebrow {
    margin-bottom: 13px;
    font-size: 12px;
  }

  .hero h1,
  .hero h2 {
    font-size: clamp(35px, 10.2vw, 45px);
    letter-spacing: -.065em;
  }

  .hero-description {
    margin: 21px 0 25px;
    font-size: 15px;
    line-height: 1.65;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .button {
    min-height: 49px;
    font-size: 15px;
  }

  .hero-proof {
    gap: 17px;
    margin-top: 35px;
  }

  .hero-proof div+div::before {
    left: -9px;
  }

  .hero-proof dt {
    font-size: 18px;
  }

  .hero-proof dd {
    font-size: 10px;
  }

  .hero-visual,
  .hero-product-visual,
  .hero-iot-visual {
    height: 285px;
    margin-top: 33px;
  }

  .hero-product-visual,
  .hero-iot-visual {
    height: 276px;
  }

  .product-preview-window {
    width: 90%;
    border-radius: 14px;
  }

  .preview-toolbar {
    height: 31px;
    padding: 0 12px;
  }

  .preview-toolbar span {
    width: 6px;
    height: 6px;
    margin-right: 4px;
  }

  .preview-toolbar b {
    margin-left: 8px;
    font-size: 9px;
  }

  .product-preview-window>img {
    height: 180px;
  }

  .preview-metrics {
    right: 10px;
    bottom: 9px;
    left: 10px;
    gap: 5px;
  }

  .preview-metrics>* {
    padding: 7px;
    border-radius: 7px;
    font-size: 8px;
  }

  .hero-orbit.orbit-a {
    width: 300px;
    height: 160px;
  }

  .hero-orbit.orbit-b {
    width: 355px;
    height: 215px;
  }

  .hero-iot-visual>img {
    width: 92%;
  }

  .iot-hero-glow {
    width: 280px;
    height: 220px;
  }

  .hero-float-card {
    grid-template-columns: 27px auto;
    min-width: 110px;
    padding: 7px 9px;
    column-gap: 6px;
    border-radius: 9px;
  }

  .hero-float-card .mini-icon {
    width: 27px;
    height: 27px;
    font-size: 8px;
  }

  .hero-float-card b {
    font-size: 9px;
  }

  .hero-float-card small {
    font-size: 7px;
  }

  .float-app {
    top: 9px;
    right: 0;
  }

  .float-ai {
    bottom: 4px;
    left: 0;
  }

  .float-device {
    top: 14px;
    left: 0;
  }

  .float-pet {
    right: 0;
    bottom: 11px;
  }

  .hero-controls {
    bottom: 12px;
  }

  .hero-control {
    display: none;
  }

  .hero-pagination {
    gap: 6px;
  }

  .hero-pagination button {
    width: 6px;
    height: 6px;
  }

  .hero-pagination button.is-active {
    width: 20px;
  }

  .solution-window {
    width: 90%;
  }

  .window-top {
    height: 30px;
    padding: 0 11px;
  }

  .window-top span {
    width: 6px;
    height: 6px;
    margin-right: 4px;
  }

  .window-top b {
    font-size: 9px;
  }

  .window-body {
    height: 164px;
  }

  .visual-sidebar {
    flex-basis: 38px;
    gap: 11px;
    padding-top: 14px;
  }

  .visual-sidebar i {
    width: 16px;
    height: 5px;
  }

  .visual-board {
    padding: 15px;
  }

  .board-heading {
    font-size: 10px;
  }

  .board-heading i {
    width: 37px;
    height: 6px;
  }

  .board-metrics {
    gap: 2px 4px;
    margin: 13px 0 9px;
  }

  .board-metrics b {
    font-size: 16px;
  }

  .board-metrics b span {
    font-size: 11px;
  }

  .board-metrics small {
    font-size: 7px;
  }

  .board-metrics em {
    height: 16px;
    margin: 0 3px;
  }

  .board-lines {
    gap: 4px;
    height: 51px;
    padding: 8px 7px 0;
  }

  .board-cards {
    gap: 5px;
    margin-top: 9px;
  }

  .board-cards span {
    height: 22px;
  }

  .orbit-one {
    width: 280px;
    height: 150px;
  }

  .orbit-two {
    width: 340px;
    height: 200px;
  }

  .floating-card {
    min-width: 110px;
    padding: 7px 9px;
  }

  .mini-icon {
    width: 26px;
    height: 26px;
    font-size: 9px;
  }

  .floating-card {
    grid-template-columns: 26px auto;
    column-gap: 6px;
  }

  .floating-card b {
    font-size: 9px;
  }

  .floating-card small {
    font-size: 7px;
  }

  .card-ai {
    top: 13px;
    right: 0;
  }

  .card-iot {
    bottom: 8px;
    left: 2px;
  }

  .quick-link {
    min-height: 102px;
    padding: 17px 0;
  }

  .quick-link small {
    font-size: 12px;
  }

  .section {
    padding: 73px 0;
  }

  .section-heading {
    margin-bottom: 36px;
  }

  .section-heading h2,
  .trust-copy h2,
  .contact-copy h2 {
    font-size: 28px;
  }

  .section-heading>p:last-child {
    margin-top: 13px;
    font-size: 14px;
  }

  .split-heading {
    display: block;
  }

  .split-heading>p:last-child {
    margin-top: 14px;
    text-align: left;
  }

  .solution-layout,
  .industry-showcase {
    gap: 14px;
  }

  .solution-statement,
  .industry-intro {
    min-height: 224px;
  }

  .solution-statement {
    padding: 20px;
  }

  .product-statement-copy {
    margin-top: 31px;
  }

  .product-statement-copy h3 {
    max-width: 175px;
    font-size: 23px;
  }

  .product-statement-copy p {
    max-width: 190px;
    margin-top: 12px;
    font-size: 14px;
  }

  .statement-icon {
    top: 18px;
    right: 18px;
    width: 45px;
    height: 45px;
    border-radius: 14px;
  }

  .statement-icon span {
    width: 15px;
    height: 15px;
    border-width: 2px;
  }

  .statement-icon i {
    right: 11px;
    bottom: 11px;
    width: 8px;
    height: 8px;
    border-width: 2px;
  }

  .product-sketch {
    right: -13px;
    bottom: -45px;
    width: 66%;
    height: 165px;
  }

  .product-sketch img {
    border-width: 5px;
    border-radius: 13px;
  }

  .sketch-chip {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 8px;
  }

  .chip-app {
    top: 48px;
    left: -10px;
  }

  .chip-ai {
    right: 5px;
    bottom: 31px;
  }

  .sketch-spark {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 5px rgb(119 213 245 / 14%);
  }

  .spark-one {
    top: 39px;
    right: 11px;
  }

  .spark-two {
    bottom: 17px;
    left: 31px;
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 4px rgb(130 109 228 / 12%);
  }

  .solution-statement p {
    margin-top: 31px;
    font-size: 23px;
  }

  .statement-grid {
    right: -68px;
    bottom: -89px;
  }

  .statement-grid span {
    height: 58px;
  }

  .four-grid,
  .industry-grid,
  .iot-grid {
    grid-template-columns: 1fr;
  }

  .solution-card {
    min-height: 193px;
    padding: 21px;
  }

  .solution-card h3 {
    margin-top: 16px;
    font-size: 17px;
  }

  .solution-card p {
    font-size: 12px;
  }

  .industry-intro p {
    left: 21px;
    bottom: 28px;
    font-size: 21px;
  }

  .industry-intro small {
    right: 21px;
    bottom: 25px;
  }

  .iot-visual {
    min-height: 278px;
  }

  .iot-visual-copy {
    top: 18px;
    left: 20px;
  }

  .iot-visual-copy strong {
    max-width: 150px;
    font-size: 18px;
  }

  .iot-main-image {
    right: -9%;
    bottom: -20%;
    width: 90%;
  }

  .iot-status {
    padding: 6px 8px;
    font-size: 9px;
  }

  .status-online {
    top: 112px;
    left: 19px;
  }

  .status-ai {
    right: 16px;
    bottom: 74px;
  }

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

  .reason-card {
    min-height: 215px;
  }

  .trust-section {
    padding: 74px 0;
  }

  .trust-proof {
    padding: 22px;
  }

  .trust-number strong {
    font-size: 53px;
  }

  .logo-stage {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    padding: 7px;
  }

  .logo-stage img {
    height: 49px;
    padding: 5px;
    border-radius: 8px;
  }

  .contact-section {
    padding-bottom: 74px;
  }

  .contact-panel {
    display: block;
    min-height: 315px;
    padding: 35px 27px;
  }

  .contact-copy h2 {
    font-size: 26px;
  }

  .contact-panel .button {
    margin-top: 29px;
  }

  .footer-top {
    padding: 48px 0 34px;
  }

  .footer-brand img {
    width: 112px;
    max-height: 82px;
  }

  .footer-links {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .footer-offices {
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: 26px;
  }

  .footer-offices h3 {
    margin-bottom: 16px;
  }

  .footer-offices p {
    margin-bottom: 10px;
  }

  .footer-bottom {
    display: block;
    line-height: 1.65;
  }

  .footer-bottom span {
    display: block;
    margin-bottom: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Consultation entries follow the old site: a compact seven-column client wall and one custom chat trigger. */
.solutions-section {
  padding-top: 104px;
}

.trust-section .trust-inner {
  width: var(--container);
  grid-template-columns: .78fr 1.22fr;
  gap: clamp(40px, 5vw, 72px);
}

.trust-section .trust-proof {
  padding: 32px;
}

.trust-section .trust-number {
  padding-bottom: 24px;
}

.trust-section .logo-stage {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
}

.trust-section .logo-stage img {
  height: 58px;
  padding: 7px;
  border-radius: 10px;
}

.service-float {
  position: fixed;
  top: 50%;
  right: clamp(12px, 2vw, 30px);
  z-index: 60;
  display: flex;
  width: 68px;
  flex-direction: column;
  align-items: center;
  transform: translateY(-50%);
  transition: transform .2s ease;
}

.service-float:hover {
  transform: translateY(calc(-50% - 4px));
}

.service-float-online {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

.service-float-avatar {
  display: grid;
  width: 53px;
  height: 53px;
  place-items: center;
  overflow: hidden;
  background: var(--blue);
  border: 4px solid var(--blue);
  border-radius: 50%;
  box-shadow: 0 3px 12px rgb(57 120 255 / 28%);
}

.service-float-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-float-online-label {
  position: relative;
  z-index: 1;
  margin-top: -2px;
  padding: 2px 7px 3px;
  color: #fff;
  background: var(--blue);
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.service-float-actions {
  width: 68px;
  margin-top: 10px;
  padding: 3px 0;
  overflow: hidden;
  background: rgb(255 255 255 / 96%);
  border: 1px solid #f0eaf2;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgb(83 51 101 / 12%);
}

.service-float-item {
  display: flex;
  width: 100%;
  height: 65px;
  min-height: 65px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 0;
  padding: 7px 2px;
  color: #41414a;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #f1edf2;
  font: inherit;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.service-float-item:last-child {
  border-bottom: 0;
}

.service-float-item:hover,
.service-float-item:focus-visible {
  color: #3f5fd4;
  background: #f7f8ff;
  outline: 0;
}

.service-float-icon {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  place-items: center;
  font-size: 23px;
  font-weight: 500;
  line-height: 1;
}

.service-float-item > span:last-child {
  display: block;
  width: 100%;
  text-align: center;
}

.service-icon-phone {
  color: var(--blue);
  font-size: 26px;
}

.service-icon-wechat {
  position: relative;
  width: 29px;
  color: #35c66b;
  font-size: 0;
}

.service-icon-wechat::before,
.service-icon-wechat::after {
  position: absolute;
  display: block;
  content: "";
  background: currentColor;
  border-radius: 50%;
}

.service-icon-wechat::before {
  top: 5px;
  left: 1px;
  width: 19px;
  height: 15px;
  color: #fff;
  background: #35c66b;
  content: "••";
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 14px;
  text-align: center;
  text-indent: 3px;
}

.service-icon-wechat::after {
  right: 1px;
  bottom: 2px;
  width: 16px;
  height: 13px;
  color: #fff;
  background: #35c66b;
  content: "•";
  font-size: 9px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
}

.service-icon-booking {
  width: 27px;
  height: 27px;
  flex-basis: 27px;
  color: #f2644c;
  background: currentColor;
  border-radius: 3px;
  font-size: 18px;
}

.service-icon-booking::before {
  color: #fff;
  content: "↗";
}

.service-dialog[hidden] {
  display: none;
}

body.service-dialog-open {
  overflow: hidden;
}

.service-dialog {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(24 29 48 / 42%);
}

.service-dialog-panel {
  position: relative;
  width: min(360px, 100%);
  padding: 30px 26px 27px;
  color: #30384b;
  background: #fff;
  border: 1px solid #e9eaf2;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgb(26 38 82 / 22%);
  text-align: center;
}

.service-dialog-panel h2 {
  margin: 0;
  color: #26344d;
  font-size: 21px;
  font-weight: 650;
}

.service-dialog-panel p {
  margin: 9px 0 0;
  color: #7d8798;
  font-size: 13px;
  line-height: 1.7;
}

.service-dialog-close {
  position: absolute;
  top: 10px;
  right: 12px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #8490a2;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.service-dialog-close:hover,
.service-dialog-close:focus-visible {
  color: #385cc9;
  background: #f2f5ff;
  outline: 0;
}

.service-dialog-phone {
  display: inline-block;
  margin-top: 20px;
  color: #315fce;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
}

.service-dialog-phone:hover {
  color: #214aa8;
}

.service-dialog-qr {
  display: block;
  width: min(240px, 100%);
  height: auto;
  margin: 20px auto 0;
  border: 1px solid #edf0f6;
  border-radius: 8px;
}

/* Keep Baidu's injected floating icon out of view; the custom trigger above opens the same chat. */
#aff-im-root,
#newBridge .icon-right-center,
#newBridge .icon-right-bottom,
#nb_icon_wrap,
[id^="nb_icon_"] {
  display: none !important;
}

@media (max-width: 900px) {
  .solutions-section {
    padding-top: 92px;
  }

  .trust-section .trust-inner {
    width: var(--container);
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .trust-section .trust-proof {
    padding: 28px;
  }

  .trust-section .logo-stage {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
  }

  .trust-section .logo-stage img {
    height: 60px;
    padding: 7px;
    border-radius: 10px;
  }
}

@media (max-width: 560px) {
  .solutions-section {
    padding-top: 73px;
  }

  .trust-section .trust-proof {
    padding: 22px;
  }

  .trust-section .logo-stage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 7px;
  }

  .trust-section .logo-stage img {
    height: 49px;
    padding: 5px;
    border-radius: 8px;
  }

  .service-float {
    right: 10px;
    width: 62px;
  }

  body.menu-open .service-float {
    visibility: hidden;
    opacity: 0;
  }

  .service-float-actions {
    width: 62px;
  }

  .service-float-item {
    height: 61px;
    min-height: 61px;
    font-size: 10px;
  }

  .service-float-avatar {
    width: 49px;
    height: 49px;
  }

  .service-float-online-label {
    font-size: 11px;
  }

  .service-dialog-panel {
    padding: 27px 20px 24px;
  }
}

/* Keep the expanded industry catalog compact while retaining its visual hierarchy. */
.chip-mini {
  top: 72px;
  right: 56px;
  width: 42px;
  height: 42px;
  color: #6e59eb;
  background: linear-gradient(135deg, #e9efff, #f3eaff);
  font-size: 8px;
  animation-delay: -1.4s;
}

.industry-showcase {
  align-items: start;
}

.industry-intro {
  position: sticky;
  top: 92px;
}

.industry-grid .solution-card {
  min-height: 174px;
}

@media (max-width: 900px) {
  .industry-intro {
    position: relative;
    top: auto;
  }
}

@media (max-width: 560px) {
  .chip-mini {
    top: 46px;
    right: 39px;
    width: 30px;
    height: 30px;
    font-size: 6px;
  }
}

@media (min-width: 901px) {
  .header-inner {
    position: relative;
  }

  .brand {
    margin-left: 28px;
  }

  .site-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    align-items: stretch;
    margin-left: 0;
    transform: translateX(-50%);
  }
}

/* A dedicated full-width enterprise showcase replaces the previous split client wall. */
.enterprise-showcase {
  display: block;
}

.enterprise-section-heading {
  margin-bottom: 42px;
  text-align: center;
}

.enterprise-section-heading h2 {
  margin: 0;
  color: #1d2839;
  font-size: clamp(32px, 3vw, 42px);
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1.2;
}

.enterprise-section-heading p {
  margin: 17px 0 0;
  color: #748194;
  font-size: 16px;
  line-height: 1.7;
}

.enterprise-card {
  position: relative;
  padding: 46px 48px 36px;
  overflow: hidden;
  background: linear-gradient(135deg, #f3f7ff 0%, #f8f6ff 100%);
  border: 1px solid #e0e8f6;
  border-radius: 28px;
  box-shadow: 0 22px 60px rgb(48 80 145 / 8%);
}

.enterprise-card::before {
  position: absolute;
  top: -150px;
  right: -100px;
  width: 420px;
  height: 420px;
  content: "";
  background: radial-gradient(circle, rgb(102 126 245 / 16%), transparent 68%);
  border-radius: 50%;
  pointer-events: none;
}

.enterprise-card-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 34px;
  border-bottom: 1px solid #d8e3f2;
}

.enterprise-card .trust-number {
  padding: 0;
  border: 0;
}

.enterprise-card .trust-number strong {
  font-size: clamp(60px, 7vw, 92px);
}

.enterprise-card .text-link {
  margin-bottom: 8px;
}

.enterprise-logo-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
  margin-top: 36px;
}

.enterprise-logo-card {
  display: grid;
  min-width: 0;
  min-height: 92px;
  padding: 12px;
  place-items: center;
  background: rgb(255 255 255 / 82%);
  border: 1px solid #e5eaf3;
  border-radius: 14px;
  box-shadow: 0 5px 14px rgb(48 75 128 / 4%);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.enterprise-logo-card:hover {
  border-color: #cdddf8;
  box-shadow: 0 12px 24px rgb(48 75 128 / 10%);
  transform: translateY(-3px);
}

.enterprise-logo-card img {
  width: 100%;
  max-width: 112px;
  height: 58px;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: saturate(.9) contrast(.98);
  transition: filter .2s ease;
}

.enterprise-logo-card.is-logo-large img {
  max-width: 126px;
  height: 68px;
  transform: scale(1.12);
}

.enterprise-logo-card.is-logo-xlarge img {
  max-width: 138px;
  height: 74px;
  transform: scale(1.18);
}

.enterprise-logo-card:hover img {
  filter: saturate(1) contrast(1);
}

.enterprise-card-note {
  position: relative;
  z-index: 1;
  margin: 28px 2px 0;
  color: #748196;
  font-size: 14px;
}

@media (max-width: 900px) {
  .enterprise-section-heading {
    margin-bottom: 34px;
  }

  .enterprise-card {
    padding: 34px 30px 30px;
    border-radius: 22px;
  }

  .enterprise-logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
  }
}

@media (max-width: 560px) {
  .enterprise-section-heading {
    margin-bottom: 28px;
    text-align: left;
  }

  .enterprise-section-heading p {
    margin-top: 12px;
    font-size: 14px;
  }

  .enterprise-card {
    padding: 26px 20px 24px;
    border-radius: 18px;
  }

  .enterprise-card-header {
    align-items: flex-start;
    padding-bottom: 24px;
  }

  .enterprise-card .text-link {
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 13px;
  }

  .enterprise-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 22px;
  }

  .enterprise-logo-card {
    min-height: 72px;
    padding: 8px;
    border-radius: 10px;
  }

  .enterprise-logo-card img {
    height: 43px;
  }

  .enterprise-card-note {
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.6;
  }
}

/* Light SaaS-style footer card with interactive branch locations. */
.site-footer {
  padding: 0 0 30px;
  color: #5f6878;
  background: #fff;
}

.footer-panel {
  padding: 0;
  overflow: hidden;
  /* background: linear-gradient(135deg, #f7f5ff 0%, #f1f3ff 55%, #f6f7ff 100%);
  border: 1px solid #eceafa; */
  border-radius: 28px;
  /* box-shadow: 0 24px 70px rgb(66 72 138 / 8%); */
}

.footer-cta {
  position: relative;
  display: flex;
  min-height: 210px;
  align-items: center;
  padding: 36px 48px 34px;
  overflow: hidden;
  border-bottom: 1px solid #e2e3f0;
}

/* .footer-cta::before {
  position: absolute;
  top: -95px;
  right: 20px;
  width: 350px;
  height: 300px;
  content: "";
  background: radial-gradient(circle, rgb(117 103 242 / 17%), transparent 68%);
  border-radius: 50%;
} */

.footer-cta-copy {
  position: relative;
  z-index: 2;
  max-width: 590px;
}

.footer-cta h2 {
  margin: 0;
  color: #171b27;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1.2;
}

.footer-cta p {
  margin: 13px 0 24px;
  color: #656f80;
  font-size: 15px;
  line-height: 1.65;
}

.footer-cta-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  color: #fff;
  background: linear-gradient(105deg, #477cff, #7b5cf1);
  border-radius: 999px;
  box-shadow: 0 10px 22px rgb(89 91 226 / 24%);
  font-size: 14px;
  font-weight: 650;
  transition: box-shadow .2s ease, transform .2s ease;
}

.footer-cta-button:hover {
  box-shadow: 0 14px 27px rgb(89 91 226 / 32%);
  transform: translateY(-2px);
}

.footer-rocket {
  position: absolute;
  top: 15px;
  right: 9%;
  z-index: 1;
  width: 160px;
  height: 170px;
  filter: drop-shadow(0 22px 20px rgb(65 79 174 / 20%));
  transform: rotate(38deg);
}

.rocket-body {
  position: absolute;
  top: 24px;
  left: 51px;
  width: 64px;
  height: 108px;
  background: linear-gradient(90deg, #b9c8ff 0%, #f0f4ff 46%, #a7b9f4 100%);
  border: 1px solid rgb(101 123 203 / 18%);
  border-radius: 52% 52% 43% 43%;
  box-shadow: inset -9px -5px 14px rgb(74 94 173 / 12%);
}

.rocket-body::before {
  position: absolute;
  top: -25px;
  left: 7px;
  width: 50px;
  height: 43px;
  content: "";
  background: linear-gradient(135deg, #ff978e, #f65f6d);
  border-radius: 58% 58% 18% 18%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.rocket-body i {
  position: absolute;
  top: 29px;
  left: 16px;
  width: 32px;
  height: 32px;
  background: radial-gradient(circle at 35% 28%, #e9fbff 0 9%, #61a7f2 25%, #315cbb 68%, #243c8b 100%);
  border: 4px solid #e6ecff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(54 76 155 / 24%);
}

.rocket-fin {
  position: absolute;
  z-index: -1;
  width: 43px;
  height: 54px;
  background: linear-gradient(135deg, #ff9088, #ed5f73);
}

.rocket-fin-left {
  top: 90px;
  left: 26px;
  border-radius: 72% 12% 65% 24%;
  transform: rotate(17deg);
}

.rocket-fin-right {
  top: 90px;
  right: 20px;
  border-radius: 12% 72% 24% 65%;
  transform: rotate(-17deg);
}

.rocket-flame {
  position: absolute;
  top: 123px;
  left: 57px;
  width: 54px;
  height: 72px;
  background: linear-gradient(180deg, rgb(92 143 255 / 80%), rgb(124 92 239 / 26%) 58%, transparent 100%);
  border-radius: 50% 50% 70% 70%;
  clip-path: polygon(20% 0, 80% 0, 100% 18%, 57% 100%, 0 25%);
  filter: blur(2px);
}

.footer-top {
  display: grid;
  grid-template-columns: .82fr 3.18fr;
  gap: 56px;
  padding: 52px 48px 42px;
}

.footer-brand img {
  width: 112px;
  max-height: none;
  object-fit: contain;
  object-position: left center;
}

.footer-brand p {
  max-width: 225px;
  margin: 19px 0 16px;
  color: #697386;
  font-size: 15px;
  line-height: 1.7;
}

.footer-brand>a {
  color: #255ed8;
  font-size: 20px;
  font-weight: 650;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px;
}

.footer-links h3 {
  margin: 0 0 20px;
  color: #202635;
  font-size: 15px;
  font-weight: 650;
}

.footer-links a,
.footer-links button {
  display: block;
  margin-bottom: 12px;
  padding: 0;
  color: #667083;
  background: none;
  border: 0;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: color .2s ease, transform .2s ease;
}

.footer-links a:hover,
.footer-links button:hover {
  color: #315fce;
  transform: translateX(2px);
}

.footer-links button:focus-visible {
  color: #315fce;
  outline: 2px solid rgb(49 95 206 / 25%);
  outline-offset: 3px;
}

.footer-branches {
  display: grid;
  grid-template-columns: 155px 1fr;
  column-gap: 28px;
  row-gap: 22px;
  padding: 30px 48px 34px;
  border-top: 1px solid #e2e3f0;
}

.branch-heading h3 {
  margin: 0 0 8px;
  color: #202635;
  font-size: 13px;
  font-weight: 650;
}

.branch-heading p {
  margin: 0;
  color: #8a91a0;
  font-size: 13px;
  line-height: 1.55;
}

.branch-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.branch-tabs button {
  min-width: 68px;
  min-height: 36px;
  padding: 0 16px;
  color: #626d80;
  background: rgb(255 255 255 / 66%);
  border: 1px solid #dde2ef;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.branch-tabs button:hover,
.branch-tabs button:focus-visible {
  color: #2f61d1;
  background: #fff;
  border-color: #bfcff2;
  outline: 0;
}

.branch-tabs button.is-active {
  color: #fff;
  background: linear-gradient(105deg, #4c7dff, #7560eb);
  border-color: transparent;
  box-shadow: 0 8px 18px rgb(79 94 222 / 20%);
}

.branch-address {
  grid-column: 2;
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  color: #697386;
  background: rgb(255 255 255 / 58%);
  border: 1px solid #e2e6f1;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
}

.branch-address strong {
  flex: 0 0 auto;
  color: #2d5fc9;
  font-size: 13px;
}

.footer-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 22px 48px 24px;
  color: #8c93a1;
  border-top: 1px solid #e2e3f0;
  font-size: 13px;
  line-height: 1.6;
}

.footer-friend-links {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

.footer-friend-links a {
  color: #737c8d;
  transition: color .2s ease;
}

.footer-friend-links a:hover {
  color: #315fce;
}

.footer-filing {
  margin: 0;
  color: #8c93a1;
  text-align: center;
  white-space: nowrap;
}

.footer-filing a {
  color: inherit;
  transition: color .2s ease;
}

.footer-filing a:hover {
  color: #315fce;
}

.footer-bottom > span:last-child {
  justify-self: end;
  text-align: right;
}

@media (max-width: 900px) {
  .site-footer {
    padding-top: 0;
  }

  .footer-panel {
    padding: 0;
  }

  .footer-cta {
    min-height: 195px;
    padding-left: 34px;
    padding-right: 190px;
  }

  .footer-top,
  .footer-branches,
  .footer-bottom {
    padding-right: 34px;
    padding-left: 34px;
  }

  .footer-rocket {
    right: 3%;
    transform: rotate(38deg) scale(.86);
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }

  .footer-branches {
    grid-template-columns: 1fr;
  }

  .branch-address {
    grid-column: 1;
  }

  .footer-bottom {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-filing {
    align-self: center;
    white-space: normal;
  }

  .footer-bottom > span:last-child {
    justify-self: auto;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .site-footer {
    padding: 0 0 18px;
  }

  .footer-panel {
    padding: 0;
    border-radius: 20px;
  }

  .footer-cta {
    min-height: 250px;
    align-items: flex-start;
    padding: 30px 20px 116px;
  }

  .footer-cta h2 {
    font-size: 27px;
  }

  .footer-cta p {
    max-width: 270px;
    margin: 11px 0 20px;
    font-size: 13px;
  }

  .footer-rocket {
    top: 109px;
    right: 3%;
    transform: rotate(38deg) scale(.67);
    transform-origin: center;
  }

  .footer-top {
    gap: 32px;
    padding: 36px 20px 32px;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
  }

  .footer-links h3 {
    margin-bottom: 15px;
  }

  .footer-links a,
  .footer-links button {
    margin-bottom: 10px;
    font-size: 15px;
  }

  .footer-branches {
    padding: 26px 20px 28px;
  }

  .branch-tabs {
    gap: 8px;
  }

  .branch-tabs button {
    min-width: 61px;
    min-height: 34px;
    padding: 0 13px;
    font-size: 13px;
  }

  .branch-address {
    display: block;
    min-height: 72px;
    padding: 13px 14px;
    font-size: 13px;
  }

  .branch-address strong {
    display: block;
    margin-bottom: 5px;
  }

  .footer-bottom {
    padding: 22px 20px 20px;
  }
}

/* Display the complete industry catalog in the navigation dropdown. */
@media (min-width: 901px) {
  #industry-menu {
    left: 50%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(1000px, calc(100vw - 48px));
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    translate: -50% 0;
  }

  #industry-menu a {
    min-height: 82px;
    padding: 12px;
  }

  #industry-menu strong {
    margin-bottom: 5px;
    font-size: 13px;
  }

  #industry-menu small {
    max-width: none;
    font-size: 11px;
    line-height: 1.45;
  }
}

@media (max-width: 900px) {
  #industry-menu {
    max-height: none;
    overflow: visible;
    translate: none;
  }
}

/* About page: the same light, product-led visual language as the homepage. */
.about-page {
  overflow-x: hidden;
}

.about-hero {
  position: relative;
  min-height: 626px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 34%, rgb(117 94 239 / 17%), transparent 23%),
    radial-gradient(circle at 66% 83%, rgb(65 132 255 / 14%), transparent 27%),
    linear-gradient(120deg, #f7faff 0%, #f0f5ff 52%, #f8f6ff 100%);
}

.about-hero::after {
  position: absolute;
  right: -190px;
  bottom: -265px;
  width: 610px;
  height: 610px;
  content: "";
  background: rgb(255 255 255 / 30%);
  border: 1px solid rgb(121 143 206 / 11%);
  border-radius: 50%;
}

.about-hero-grid {
  position: absolute;
  inset: 0;
  opacity: .52;
  background-image: linear-gradient(rgb(82 123 205 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(82 123 205 / 7%) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 70%) 42%, transparent 88%);
}

.about-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(450px, .86fr);
  gap: 48px;
  min-height: 626px;
  align-items: center;
  padding: 82px 0 70px;
}

.about-hero-copy {
  max-width: 620px;
}

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

.about-hero-copy h1 {
  max-width: 610px;
  margin: 0;
  color: #182238;
  font-size: clamp(41px, 4.6vw, 64px);
  font-weight: 700;
  letter-spacing: -.065em;
  line-height: 1.14;
}

.about-hero-copy h1 span {
  color: #426ee8;
}

.about-hero-copy>p:not(.eyebrow) {
  max-width: 555px;
  margin: 25px 0 0;
  color: #637188;
  font-size: 16px;
  line-height: 1.9;
}

.about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 31px;
}

.about-hero-actions .button {
  min-width: 151px;
}

.about-hero-visual {
  position: relative;
  width: min(100%, 510px);
  height: 424px;
  justify-self: end;
}

.about-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgb(91 125 223 / 24%);
  border-radius: 50%;
  will-change: transform;
  transform: translate(-50%, -50%) rotate(-21deg);
}

.about-orbit::before,
.about-orbit::after {
  position: absolute;
  width: 8px;
  height: 8px;
  content: "";
  background: #6386f5;
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgb(93 133 245 / 12%);
}

.about-orbit::before {
  top: 13%;
  left: 11%;
}

.about-orbit::after {
  right: 10%;
  bottom: 13%;
  background: #8665e9;
  box-shadow: 0 0 0 7px rgb(134 101 233 / 12%);
}

.orbit-one {
  width: 444px;
  height: 298px;
  animation: about-orbit-one 22s linear infinite;
}

.orbit-two {
  width: 368px;
  height: 421px;
  animation: about-orbit-two 28s linear infinite;
  transform: translate(-50%, -50%) rotate(48deg);
}

.about-visual-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 222px;
  height: 222px;
  place-content: center;
  text-align: center;
  background: linear-gradient(145deg, #527eee, #6b5de4);
  border: 9px solid rgb(255 255 255 / 72%);
  border-radius: 50%;
  box-shadow: 0 22px 55px rgb(58 80 181 / 29%), inset 0 1px 0 rgb(255 255 255 / 28%);
  animation: about-core-breathe 5s ease-in-out infinite;
  will-change: transform;
  transform: translate(-50%, -50%);
}

.about-visual-core::before {
  position: absolute;
  inset: 16px;
  content: "";
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 50%;
}

.about-visual-core span {
  position: relative;
  color: rgb(255 255 255 / 69%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
}

.about-visual-core strong {
  position: relative;
  margin-top: 9px;
  color: #fff;
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1.35;
}

.about-visual-core i {
  position: absolute;
  top: 23px;
  left: 39px;
  width: 25px;
  height: 25px;
  border: 3px solid rgb(255 255 255 / 45%);
  border-radius: 9px 9px 9px 2px;
  animation: about-core-mark 4s ease-in-out infinite;
  transform: rotate(30deg);
}

.about-float {
  position: absolute;
  z-index: 2;
  padding: 14px 17px;
  color: #1f2a41;
  background: rgb(255 255 255 / 82%);
  border: 1px solid rgb(255 255 255 / 80%);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgb(47 65 128 / 12%);
  backdrop-filter: blur(8px);
  animation: about-float-card 5.5s ease-in-out infinite;
  will-change: transform;
}

.about-float b,
.about-float small {
  display: block;
}

.about-float b {
  font-size: 13px;
  font-weight: 650;
}

.about-float small {
  margin-top: 4px;
  color: #79869c;
  font-size: 10px;
}

.about-float-strategy {
  top: 33px;
  left: 8px;
}

.about-float-build {
  right: 0;
  bottom: 71px;
  animation-delay: -1.8s;
}

.about-float-grow {
  bottom: 5px;
  left: 58px;
  animation-delay: -3.4s;
}

.about-node {
  position: absolute;
  z-index: 1;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 4px solid #7c67e8;
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgb(124 103 232 / 11%);
  animation: about-node-pulse 3.8s ease-in-out infinite;
}

.node-one {
  top: 79px;
  right: 88px;
}

.node-two {
  right: 96px;
  bottom: 17px;
  border-color: #6192ee;
  animation-delay: -1.2s;
}

.node-three {
  top: 166px;
  left: 20px;
  border-color: #72b9de;
  animation-delay: -2.4s;
}

@keyframes about-orbit-one {
  from {
    transform: translate(-50%, -50%) rotate(-21deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(339deg);
  }
}

@keyframes about-orbit-two {
  from {
    transform: translate(-50%, -50%) rotate(48deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(-312deg);
  }
}

@keyframes about-core-breathe {
  50% {
    transform: translate(-50%, -50%) scale(1.035);
  }
}

@keyframes about-core-mark {
  50% {
    transform: translate(2px, -2px) rotate(36deg);
  }
}

@keyframes about-float-card {
  50% {
    transform: translateY(-7px);
  }
}

@keyframes about-node-pulse {
  50% {
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 0 0 10px rgb(124 103 232 / 0%);
  }
}

.about-data-strip {
  position: relative;
  z-index: 3;
  margin-top: -1px;
  background: #fff;
  border-bottom: 1px solid #e8edf5;
}

.about-data-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.about-data-grid>div {
  position: relative;
  display: flex;
  min-height: 136px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.about-data-grid>div+div::before {
  position: absolute;
  top: 37px;
  bottom: 37px;
  left: 0;
  width: 1px;
  content: "";
  background: #e7ebf3;
}

.about-data-grid strong {
  color: #253557;
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
}

.about-data-grid em {
  color: #5179e6;
  font-size: 18px;
  font-style: normal;
}

.about-data-grid span {
  margin-top: 10px;
  color: #7a869a;
  font-size: 12px;
}

.about-story-section {
  padding: 124px 0;
}

.about-story-layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(410px, .85fr);
  gap: clamp(60px, 8vw, 126px);
  align-items: center;
}

.about-story-media {
  position: relative;
  min-height: 502px;
}

.about-story-image {
  overflow: hidden;
  background: #e8edf8;
  box-shadow: 0 20px 46px rgb(51 69 128 / 13%);
}

.about-story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-story-image-large {
  width: min(87%, 470px);
  height: 424px;
  border-radius: 20px;
}

.about-story-image-large img {
  object-position: center 35%;
}

.about-story-image-small {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 51%;
  height: 208px;
  padding: 9px;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 16px;
}

.about-story-image-small img {
  border-radius: 9px;
}

.about-story-badge {
  position: absolute;
  top: 48px;
  right: 0;
  display: flex;
  width: 157px;
  min-height: 102px;
  align-items: center;
  gap: 12px;
  padding: 17px;
  color: #fff;
  background: linear-gradient(135deg, #5b84ef, #6a5ce4);
  border: 6px solid #fff;
  border-radius: 15px;
  box-shadow: 0 14px 28px rgb(77 86 199 / 20%);
}

.about-story-badge span {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.08em;
}

.about-story-badge small {
  font-size: 11px;
  line-height: 1.55;
}

.about-story-copy h2 {
  margin: 15px 0 21px;
  color: #1e2a40;
  font-size: clamp(31px, 3.3vw, 44px);
  font-weight: 680;
  letter-spacing: -.06em;
  line-height: 1.28;
}

.about-story-copy h2 span {
  color: #5279e5;
}

.about-story-copy>p:not(.eyebrow) {
  margin: 0 0 14px;
  color: #69768a;
  font-size: 14px;
  line-height: 1.9;
}

.about-story-list {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.about-story-list li {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 54px;
  padding: 8px 13px;
  color: #68758a;
  background: #f7f9fe;
  border-radius: 10px;
  font-size: 12px;
}

.about-story-list i {
  flex: 0 0 auto;
  color: #5a7ee5;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.about-story-list strong {
  margin-right: 8px;
  color: #2d3b54;
  font-size: 13px;
}

.about-team-section {
  padding: 118px 0 124px;
  background: #f7f9fe;
}

.about-team-section .section-heading {
  margin-bottom: 42px;
}

.about-team-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(2, 1fr);
  gap: 16px;
}

.about-team-card {
  position: relative;
  min-height: 190px;
  padding: 26px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e7edf6;
  border-radius: 16px;
  box-shadow: 0 10px 27px rgb(42 66 120 / 4%);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.about-team-card:hover {
  border-color: #cfdbf7;
  box-shadow: 0 18px 35px rgb(42 66 120 / 10%);
  transform: translateY(-4px);
}

.about-team-card>span {
  display: block;
  margin-bottom: 38px;
  color: #7b99e6;
  font-size: 12px;
  font-weight: 700;
}

.about-team-card h3 {
  margin: 0;
  color: #2a3851;
  font-size: 19px;
  font-weight: 650;
}

.about-team-card p {
  max-width: 216px;
  margin: 10px 0 0;
  color: #7c8799;
  font-size: 12px;
  line-height: 1.7;
}

.about-team-featured {
  grid-row: span 2;
  min-height: 396px;
  padding: 0;
}

.about-team-featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.about-team-featured::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 35%, rgb(19 30 59 / 83%) 100%);
}

.about-team-featured div {
  position: absolute;
  right: 28px;
  bottom: 26px;
  left: 28px;
  z-index: 1;
  color: #fff;
}

.about-team-featured div span {
  display: block;
  margin-bottom: 24px;
  color: rgb(255 255 255 / 68%);
  font-size: 12px;
  font-weight: 700;
}

.about-team-featured h3 {
  color: #fff;
}

.about-team-featured p {
  color: rgb(255 255 255 / 78%);
}

.about-team-image-card {
  min-height: 190px;
  padding: 0;
  isolation: isolate;
}

.about-team-image-card::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(180deg, rgb(20 31 58 / 5%) 15%, rgb(17 29 57 / 84%) 100%);
}

.about-team-image-card>img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
}

.about-team-image-card>div {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  padding: 23px 25px;
}

.about-team-image-card>div span {
  display: block;
  margin-bottom: auto;
  color: rgb(255 255 255 / 72%);
  font-size: 12px;
  font-weight: 700;
}

.about-team-image-card h3 {
  color: #fff;
}

.about-team-image-card p {
  color: rgb(255 255 255 / 76%);
}

.about-values-section {
  padding: 118px 0 124px;
}

.about-values-section .section-heading {
  margin-bottom: 42px;
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.about-value-card {
  position: relative;
  min-height: 180px;
  padding: 25px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e7ecf6;
  border-radius: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.about-value-card::after {
  position: absolute;
  right: -12px;
  bottom: -23px;
  color: #f0f4fd;
  content: attr(data-index);
  font-size: 89px;
  font-weight: 700;
  letter-spacing: -.08em;
  line-height: 1;
}

.about-value-card:hover {
  border-color: #cadaf8;
  box-shadow: 0 15px 30px rgb(50 78 142 / 10%);
  transform: translateY(-3px);
}

.about-value-card>span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-width: 31px;
  height: 23px;
  align-items: center;
  justify-content: center;
  color: #5f81df;
  background: #eef3ff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.about-value-card h3 {
  position: relative;
  z-index: 1;
  margin: 21px 0 9px;
  color: #2b3850;
  font-size: 17px;
  font-weight: 650;
}

.about-value-card p {
  position: relative;
  z-index: 1;
  max-width: 250px;
  margin: 0;
  color: #7c8799;
  font-size: 12px;
  line-height: 1.7;
}

.about-clients-section {
  padding: 0 0 118px;
}

.about-client-panel {
  padding: 86px 64px 60px;
  background: linear-gradient(130deg, #f2f6ff, #f7f5ff);
  border: 1px solid #e4e9f6;
  border-radius: 24px;
}

.about-client-panel .section-heading {
  margin-bottom: 35px;
}

.about-client-logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.about-client-logos img {
  width: 100%;
  height: 62px;
  padding: 8px;
  object-fit: contain;
  background: rgb(255 255 255 / 84%);
  border: 1px solid rgb(226 232 246 / 90%);
  border-radius: 10px;
}

.about-contact-section {
  padding: 0 0 104px;
}

.about-contact-panel {
  display: flex;
  min-height: 260px;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  padding: 47px 62px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 88% 16%, rgb(150 142 255 / 45%), transparent 25%),
    linear-gradient(112deg, #4377e9, #6455dc 100%);
  border-radius: 24px;
  box-shadow: 0 21px 46px rgb(61 74 194 / 19%);
}

.about-contact-panel .eyebrow {
  color: rgb(255 255 255 / 70%);
}

.about-contact-panel .eyebrow span {
  background: #b9ceff;
}

.about-contact-panel h2 {
  margin: 15px 0 11px;
  color: #fff;
  font-size: clamp(28px, 3vw, 39px);
  font-weight: 650;
  letter-spacing: -.055em;
  line-height: 1.25;
}

.about-contact-panel p:not(.eyebrow) {
  margin: 0;
  color: rgb(255 255 255 / 76%);
  font-size: 13px;
  line-height: 1.7;
}

.about-contact-actions {
  display: grid;
  flex: 0 0 auto;
  gap: 16px;
  justify-items: start;
}

.about-contact-actions .button {
  color: #4d62d5;
  background: #fff;
  box-shadow: none;
}

.about-contact-actions .button:hover {
  box-shadow: 0 10px 24px rgb(32 39 119 / 20%);
}

.about-contact-phone {
  color: #fff;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: .01em;
}

.about-contact-phone small {
  display: block;
  margin-top: 5px;
  color: rgb(255 255 255 / 66%);
  font-size: 10px;
  font-weight: 400;
}

@media (max-width: 1000px) {
  .about-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(400px, .78fr);
    gap: 22px;
  }

  .about-hero-visual {
    transform: scale(.88);
    transform-origin: right center;
  }

  .about-story-layout {
    gap: 55px;
  }

  .about-client-panel {
    padding-right: 40px;
    padding-left: 40px;
  }
}

@media (max-width: 900px) {
  .about-hero {
    min-height: auto;
  }

  .about-hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 78px 0 64px;
  }

  .about-hero-copy {
    max-width: 650px;
  }

  .about-hero-visual {
    width: 510px;
    max-width: 100%;
    justify-self: center;
    margin-top: 6px;
    transform: none;
  }

  .about-data-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .about-data-grid>div {
    min-height: 112px;
  }

  .about-data-grid>div+div::before {
    top: 31px;
    bottom: 31px;
  }

  .about-data-grid strong {
    font-size: 24px;
  }

  .about-data-grid span {
    font-size: 11px;
  }

  .about-story-section,
  .about-team-section,
  .about-values-section {
    padding: 86px 0;
  }

  .about-story-layout {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .about-story-media {
    width: min(100%, 620px);
    justify-self: center;
  }

  .about-team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-team-featured {
    grid-column: span 2;
    grid-row: auto;
    min-height: 340px;
  }

  .about-client-logos {
    grid-template-columns: repeat(4, 1fr);
  }

  .about-contact-panel {
    padding: 42px;
  }
}

@media (max-width: 620px) {
  .about-hero-grid {
    background-size: 32px 32px;
  }

  .about-hero-inner {
    padding: 59px 0 38px;
  }

  .about-hero-copy h1 {
    font-size: 40px;
  }

  .about-hero-copy>p:not(.eyebrow) {
    margin-top: 19px;
    font-size: 14px;
    line-height: 1.8;
  }

  .about-hero-actions {
    margin-top: 24px;
  }

  .about-hero-actions .button {
    min-width: 0;
  }

  .about-hero-visual {
    width: 385px;
    height: 326px;
    margin-top: 10px;
    transform: scale(.86);
    transform-origin: top center;
    margin-bottom: -44px;
  }

  .about-data-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 11px 0;
  }

  .about-data-grid>div {
    min-height: 83px;
  }

  .about-data-grid>div+div::before {
    top: 20px;
    bottom: 20px;
  }

  .about-data-grid>div:nth-child(odd)::before {
    display: none;
  }

  .about-data-grid>div:last-child {
    grid-column: span 2;
  }

  .about-story-section,
  .about-team-section,
  .about-values-section {
    padding: 68px 0;
  }

  .about-story-media {
    min-height: 390px;
  }

  .about-story-image-large {
    width: calc(100% - 20px);
    height: 319px;
  }

  .about-story-image-small {
    width: 55%;
    height: 147px;
  }

  .about-story-badge {
    top: 25px;
    width: 126px;
    min-height: 81px;
    padding: 12px;
    border-width: 4px;
  }

  .about-story-badge span {
    font-size: 31px;
  }

  .about-story-badge small {
    font-size: 9px;
  }

  .about-story-copy h2 {
    font-size: 31px;
  }

  .about-story-copy>p:not(.eyebrow) {
    font-size: 13px;
  }

  .about-story-list strong {
    display: block;
    margin: 0 0 2px;
  }

  .about-story-list li {
    align-items: flex-start;
  }

  .about-team-section .section-heading,
  .about-values-section .section-heading {
    margin-bottom: 29px;
  }

  .about-team-grid,
  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .about-team-featured {
    grid-column: auto;
    min-height: 286px;
  }

  .about-team-card {
    min-height: 158px;
    padding: 21px;
  }

  .about-team-image-card {
    min-height: 205px;
    padding: 0;
  }

  .about-team-image-card>div {
    padding: 21px;
  }

  .about-team-card>span {
    margin-bottom: 25px;
  }

  .about-team-featured div {
    right: 22px;
    bottom: 20px;
    left: 22px;
  }

  .about-value-card {
    min-height: 153px;
    padding: 21px;
  }

  .about-value-card h3 {
    margin-top: 16px;
  }

  .about-clients-section {
    padding-bottom: 68px;
  }

  .about-client-panel {
    padding: 52px 17px 24px;
    border-radius: 17px;
  }

  .about-client-panel .section-heading {
    margin-bottom: 25px;
  }

  .about-client-logos {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }

  .about-client-logos img {
    height: 49px;
    padding: 5px;
    border-radius: 7px;
  }

  .about-contact-section {
    padding-bottom: 70px;
  }

  .about-contact-panel {
    display: block;
    min-height: 0;
    padding: 34px 26px;
    border-radius: 17px;
  }

  .about-contact-panel h2 {
    font-size: 28px;
  }

  .about-contact-actions {
    margin-top: 25px;
  }
}

/* Shared detail pages for custom development, industry systems and AI services. */
.solution-page {
  --solution-accent: #3978ff;
  --solution-accent-dark: #2058db;
  --solution-accent-soft: #eaf2ff;
  overflow-x: hidden;
}

.solution-page[data-solution-theme="violet"] {
  --solution-accent: #7758ed;
  --solution-accent-dark: #6043cf;
  --solution-accent-soft: #f0ecff;
}

.solution-page[data-solution-theme="teal"] {
  --solution-accent: #159a8a;
  --solution-accent-dark: #0d776b;
  --solution-accent-soft: #e6f7f4;
}

.solution-page[data-solution-theme="orange"] {
  --solution-accent: #e58a27;
  --solution-accent-dark: #bd6812;
  --solution-accent-soft: #fff3e5;
}

.solution-page[data-solution-theme="black"] {
  --solution-accent: #1a2029;
  --solution-accent-dark: #070a0e;
  --solution-accent-soft: #edf0f3;
}

.solution-page[data-solution-theme="green"] {
  --solution-accent: #2aa268;
  --solution-accent-dark: #187d4c;
  --solution-accent-soft: #e8f7ef;
}

.solution-detail-hero {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  background:
    radial-gradient(circle at 81% 37%, color-mix(in srgb, var(--solution-accent) 18%, transparent), transparent 25%),
    linear-gradient(118deg, #fff 0%, #f8fbff 47%, color-mix(in srgb, var(--solution-accent-soft) 72%, #fff) 100%);
}

.solution-detail-hero.has-full-carousel {
  isolation: isolate;
  background: #2c3d58;
}

.solution-detail-hero.has-intro-carousel {
  isolation: isolate;
  /* The project carousel is 438px tall and starts 82px from the top.
     Matching the hero to a compact 560px canvas prevents the viewport-based
     minimum from creating a large empty band before the metrics module. */
  min-height: 560px;
  background: #f8fbff;
}

.solution-detail-hero.has-full-carousel::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgb(11 25 50 / 32%) 0%, rgb(11 25 50 / 12%) 42%, rgb(11 25 50 / 3%) 100%);
  pointer-events: none;
}

.solution-detail-hero.has-intro-carousel::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgb(255 255 255 / 7%), transparent 52%);
  pointer-events: none;
}

.solution-detail-hero::after {
  position: absolute;
  right: -180px;
  bottom: -310px;
  width: 650px;
  height: 650px;
  content: "";
  border: 1px solid color-mix(in srgb, var(--solution-accent) 13%, transparent);
  border-radius: 50%;
}

.solution-detail-hero.has-full-carousel::after {
  z-index: 1;
  border-color: rgb(255 255 255 / 22%);
}

.solution-detail-grid {
  position: absolute;
  inset: 0;
  opacity: .42;
  background-image: linear-gradient(rgb(88 124 188 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(88 124 188 / 7%) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 40%) 48%, transparent 88%);
}

.solution-detail-hero.has-full-carousel .solution-detail-grid {
  z-index: 1;
  opacity: .16;
  background-image: linear-gradient(rgb(255 255 255 / 15%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 15%) 1px, transparent 1px);
}

.solution-detail-hero.has-intro-carousel .solution-detail-grid {
  z-index: 1;
}

.solution-detail-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(440px, .9fr);
  gap: 62px;
  min-height: 640px;
  align-items: center;
  padding: 82px 0 76px;
}

.solution-detail-hero.has-full-carousel .solution-detail-hero-inner {
  z-index: 2;
  align-items: end;
  padding-bottom: 32px;
}

.solution-detail-copy {
  max-width: 610px;
}

/* 定制页首屏为右侧案例图预留横向比例，左侧说明保持易读行长。 */
.solution-detail-hero.has-intro-carousel .solution-detail-copy,
.solution-detail-hero.has-intro-carousel .solution-detail-intro {
  max-width: 700px;
}

.solution-detail-hero.has-intro-carousel .solution-detail-hero-inner {
  width: min(1920px, calc(100% - 128px));
  max-width: none;
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  gap: 48px;
  /* Keep the hero just tall enough for the copy and 438px carousel. */
  min-height: 560px;
}

.solution-detail-hero.has-full-carousel .solution-detail-copy {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.solution-detail-hero.has-full-carousel .solution-detail-copy .eyebrow,
.solution-detail-hero.has-full-carousel .solution-detail-copy h1,
.solution-detail-hero.has-full-carousel .solution-detail-copy .solution-detail-intro,
.solution-detail-hero.has-full-carousel .solution-detail-copy .solution-detail-tags {
  display: none;
}

.solution-detail-hero.has-full-carousel .solution-detail-actions {
  margin-top: 0;
}

.solution-detail-copy .eyebrow {
  color: var(--solution-accent-dark);
}

.solution-detail-copy .eyebrow>span {
  background: var(--solution-accent);
}

.solution-detail-copy .eyebrow b {
  font-weight: 650;
}

.solution-detail-copy h1 {
  max-width: 620px;
  margin: 18px 0 0;
  color: #182238;
  font-size: clamp(42px, 4.5vw, 62px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.17;
}

.solution-detail-intro {
  max-width: 575px;
  margin: 24px 0 0;
  color: #647187;
  font-size: 16px;
  line-height: 1.85;
}

.solution-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 23px;
}

.solution-detail-tags span {
  padding: 7px 11px;
  color: var(--solution-accent-dark);
  background: color-mix(in srgb, var(--solution-accent-soft) 82%, #fff);
  border: 1px solid color-mix(in srgb, var(--solution-accent) 18%, #fff);
  border-radius: 6px;
  font-size: 11px;
}

.solution-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 31px;
}

.solution-page .button-primary {
  background: linear-gradient(110deg, var(--solution-accent), var(--solution-accent-dark));
  box-shadow: 0 12px 25px color-mix(in srgb, var(--solution-accent) 25%, transparent);
}

.solution-detail-visual {
  position: relative;
  width: min(100%, 510px);
  height: 400px;
  justify-self: end;
}

.solution-detail-hero.has-full-carousel .solution-detail-visual {
  display: none;
}

.solution-visual-glow {
  position: absolute;
  top: 52%;
  left: 51%;
  width: 390px;
  height: 300px;
  background: color-mix(in srgb, var(--solution-accent) 18%, transparent);
  border-radius: 50%;
  filter: blur(44px);
  transform: translate(-50%, -50%);
}

/* APP 首屏专属视觉：手机端预览 + 多端交付驾驶舱 */
body[data-solution-slug="app-development"] .solution-detail-visual {
  height: 438px;
}

body[data-solution-slug="app-development"] .solution-detail-visual > .solution-visual-window,
body[data-solution-slug="app-development"] .solution-detail-visual > .solution-visual-chip {
  display: none;
}

body[data-solution-slug="app-development"] .app-hero-board { display: none; }
body[data-solution-slug="app-development"] .solution-dashboard-visual { display: none; }
body[data-solution-slug="app-development"] .app-mobile-visual { display: none; }
body[data-solution-slug="app-development"] .app-hardware-visual { display: block; }

/* 定制方案首屏：参考管理系统叠层看板形式的通用右侧视觉 */
body[data-solution-slug="app-development"] .solution-dashboard-visual,
body[data-solution-slug="mini-program"] .solution-dashboard-visual,
body[data-solution-slug="software-development"] .solution-dashboard-visual { display: block; }

body[data-solution-slug="mini-program"] .solution-dashboard-visual { display: none; }
body[data-solution-slug="mini-program"] .mini-growth-visual { display: block; }
body[data-solution-slug="app-development"] .solution-dashboard-visual { display: none; }

body[data-solution-slug="mini-program"] .solution-detail-visual > .solution-visual-window,
body[data-solution-slug="mini-program"] .solution-detail-visual > .solution-visual-chip,
body[data-solution-slug="software-development"] .solution-detail-visual > .solution-visual-window,
body[data-solution-slug="software-development"] .solution-detail-visual > .solution-visual-chip { display: none; }

.solution-dashboard-visual { position: absolute; inset: 0 -17px 0 -8px; display: none; min-width: 510px; color: #33435d; font-size: 8px; }
.dashboard-block { position: absolute; display: block; background: color-mix(in srgb, var(--solution-accent-soft) 83%, #fff); border-radius: 17px; opacity: .78; }.dashboard-block.block-one { top: 31px; left: 112px; width: 132px; height: 153px; }.dashboard-block.block-two { top: 195px; right: 1px; width: 87px; height: 150px; }.dashboard-block.block-three { bottom: 9px; left: 168px; width: 118px; height: 90px; }
.dashboard-main-panel { position: absolute; top: 73px; right: 68px; width: 372px; height: 270px; overflow: hidden; padding: 12px 13px; background: rgb(255 255 255 / 94%); border: 1px solid color-mix(in srgb, var(--solution-accent) 35%, #fff); border-radius: 14px; box-shadow: 0 21px 46px rgb(44 76 133 / 16%); transform: rotate(2deg); }
.dashboard-titlebar { display: flex; align-items: center; justify-content: space-between; height: 22px; margin: -12px -13px 11px; padding: 0 13px; background: #f7faff; border-bottom: 1px solid #edf2f8; font-size: 9px; font-weight: 700; }.dashboard-titlebar span { display: flex; align-items: center; gap: 4px; }.dashboard-titlebar span i { width: 6px; height: 6px; background: #ff968e; border-radius: 50%; }.dashboard-titlebar span i:nth-child(2) { background: #ffd36d; }.dashboard-titlebar span i:nth-child(3) { background: #75d9b7; }.dashboard-titlebar b { display: flex; gap: 5px; }.dashboard-titlebar b i { width: 15px; height: 6px; background: #e1edf9; border-radius: 5px; }
.dashboard-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.dashboard-overview > div { min-height: 76px; padding: 11px 9px; background: #fbfdff; border-radius: 4px; }.dashboard-overview strong { font-size: 8px; }.dashboard-overview p { display: grid; grid-template-columns: 10px 1fr 10px 1fr; gap: 7px 5px; align-items: center; margin: 10px 0 0; }.dashboard-overview p i { width: 10px; height: 10px; background: #96dcdd; border-radius: 50%; }.dashboard-overview p i:nth-of-type(2) { background: #f6d36e; }.dashboard-overview p em { height: 6px; background: #e7f1fb; border-radius: 4px; }
.dashboard-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 9px; }.dashboard-stat-row div { padding: 10px 8px; background: #f9fbfe; border-radius: 4px; }.dashboard-stat-row small { display: block; font-size: 7px; }.dashboard-stat-row b { display: block; margin-top: 7px; color: var(--solution-accent); font-size: 17px; }.dashboard-stat-row i { display: block; width: 86%; height: 5px; margin-top: 7px; background: #edf3fa; border-radius: 6px; }.dashboard-chart { position: relative; height: 66px; margin-top: 9px; padding: 7px 9px; background: #fbfdff; border-radius: 4px; }.dashboard-chart div { display: flex; height: 100%; align-items: end; justify-content: space-around; }.dashboard-chart div i { width: 12px; height: 35%; background: color-mix(in srgb, var(--solution-accent) 45%, #dceafe); }.dashboard-chart div i:nth-child(2) { height: 58%; }.dashboard-chart div i:nth-child(3) { height: 46%; }.dashboard-chart div i:nth-child(4) { height: 83%; background: var(--solution-accent); }.dashboard-chart div i:nth-child(5) { height: 68%; }.dashboard-chart > span { position: absolute; right: 20px; bottom: 10px; width: 43px; height: 23px; border: 4px solid #88dbd8; border-right-color: #f3d368; border-radius: 50%; }.dashboard-chart > span:last-child { right: 73px; bottom: 15px; width: 31px; height: 3px; background: #b5c8ec; border: 0; border-radius: 4px; }
.dashboard-sales-card { position: absolute; z-index: 2; top: 218px; left: 0; width: 202px; height: 133px; overflow: hidden; padding: 12px; background: rgb(255 255 255 / 95%); border: 1px solid color-mix(in srgb, var(--solution-accent) 38%, #fff); border-radius: 9px; box-shadow: 0 17px 35px rgb(44 76 133 / 15%); transform: rotate(1deg); }.dashboard-sales-card > strong, .dashboard-flow-card > strong { display: block; padding-bottom: 9px; border-bottom: 1px solid #edf2f8; font-size: 8px; }.dashboard-sales-card > div { display: grid; grid-template-columns: 61px 1fr; gap: 9px; padding-top: 8px; }.dashboard-sales-card p { margin: 0; }.dashboard-sales-card small { display: block; color: #8290a4; font-size: 7px; }.dashboard-sales-card p b { display: block; margin-top: 5px; color: var(--solution-accent); font-size: 16px; }.dashboard-sales-card p em { font-size: 7px; font-style: normal; }.dashboard-sales-card section { position: relative; display: grid; gap: 2px; padding: 2px 0 0 12px; }.dashboard-sales-card section::before { position: absolute; top: 0; bottom: 0; left: 0; width: 48px; content: ""; background: linear-gradient(150deg, var(--solution-accent) 0 32%, #72d6d4 32% 67%, #f1cf68 67%); clip-path: polygon(0 0, 100% 0, 71% 50%, 100% 100%, 0 100%, 28% 50%); }.dashboard-sales-card section b { position: relative; z-index: 1; margin-left: 15px; color: #fff; font-size: 6px; font-weight: 500; }.dashboard-sales-card section i { display: none; }
.dashboard-flow-card { position: absolute; z-index: 3; top: 112px; right: 0; width: 153px; height: 247px; padding: 12px; background: rgb(255 255 255 / 96%); border: 1px solid color-mix(in srgb, var(--solution-accent) 45%, #fff); border-radius: 12px; box-shadow: 0 18px 38px rgb(44 76 133 / 17%); }.flow-line { display: grid; justify-items: center; gap: 7px; padding-top: 16px; }.flow-line > b, .flow-line span b { display: block; padding: 6px 10px; color: #fff; background: var(--solution-accent); border-radius: 3px; font-size: 7px; font-weight: 600; }.flow-line > i { width: 1px; height: 10px; background: #a9c7ec; }.flow-line span { display: flex; gap: 6px; }.flow-line span b { padding: 6px 5px; background: #2ab9ae; font-size: 6px; }.flow-line em { padding: 5px 9px; color: #fff; background: #f1cc63; border-radius: 10px; font-size: 6px; font-style: normal; }
.dashboard-tag { position: absolute; z-index: 4; padding: 10px 12px; color: #45546b; background: rgb(255 255 255 / 92%); border: 1px solid #e1e9f4; border-radius: 8px; box-shadow: 0 11px 22px rgb(46 65 110 / 12%); font-size: 10px; font-weight: 650; }.dashboard-tag.tag-source { top: 29px; right: 27px; }.dashboard-tag.tag-private { bottom: 7px; left: 55px; }.dashboard-tag.tag-custom { right: 4px; bottom: 2px; }

/* 软件页保留企业驾驶舱布局，并以错位浮动强化数据实时感。 */
body[data-solution-slug="software-development"] .dashboard-main-panel { animation: softwarePanelFloat 5.5s ease-in-out infinite; }
body[data-solution-slug="software-development"] .dashboard-sales-card { animation: softwareCardFloat 4.8s ease-in-out infinite .4s; }
body[data-solution-slug="software-development"] .dashboard-flow-card { animation: softwareCardFloat 5.2s ease-in-out infinite 1s; }
body[data-solution-slug="software-development"] .dashboard-chart div i { animation: softwareBarPulse 2.8s ease-in-out infinite; transform-origin: bottom; }
body[data-solution-slug="software-development"] .dashboard-chart div i:nth-child(2) { animation-delay: .15s; } body[data-solution-slug="software-development"] .dashboard-chart div i:nth-child(3) { animation-delay: .3s; } body[data-solution-slug="software-development"] .dashboard-chart div i:nth-child(4) { animation-delay: .45s; } body[data-solution-slug="software-development"] .dashboard-chart div i:nth-child(5) { animation-delay: .6s; }

/* APP：移动端产品界面与运营数据，强化多端应用定制的表达。 */
.app-mobile-visual { position: absolute; inset: 0 -12px; display: none; min-width: 510px; }.app-mobile-halo { position: absolute; top: 63px; right: 82px; width: 300px; height: 300px; background: radial-gradient(circle, color-mix(in srgb, var(--solution-accent) 23%, transparent), transparent 67%); border-radius: 50%; animation: appHaloPulse 4.8s ease-in-out infinite; }.app-mobile-grid { position: absolute; top: 58px; right: 24px; width: 382px; height: 310px; background-image: linear-gradient(rgb(70 122 214 / 9%) 1px, transparent 1px), linear-gradient(90deg, rgb(70 122 214 / 9%) 1px, transparent 1px); background-size: 23px 23px; border-radius: 24px; mask-image: radial-gradient(ellipse, #000 37%, transparent 73%); }

/* APP 智能硬件连接：以物理终端、手机控制与 IoT 云端组成清晰的连接链路。 */
.app-hardware-visual { position: absolute; inset: 0 -14px; display: none; min-width: 510px; }.hardware-halo { position: absolute; top: 28px; right: 46px; width: 354px; height: 354px; background: radial-gradient(circle, color-mix(in srgb, var(--solution-accent) 23%, transparent), transparent 66%); border-radius: 50%; animation: appHaloPulse 5s ease-in-out infinite; }.hardware-network { position: absolute; border: 1px dashed color-mix(in srgb, var(--solution-accent) 37%, transparent); border-radius: 50%; }.network-one { top: 58px; right: 40px; width: 350px; height: 274px; transform: rotate(-17deg); animation: miniOrbit 19s linear infinite; }.network-two { top: 112px; right: 90px; width: 252px; height: 174px; border-style: solid; opacity: .6; transform: rotate(19deg); animation: miniOrbit 13s linear infinite reverse; }.hardware-cloud { position: absolute; top: 20px; left: 40px; z-index: 3; display: grid; gap: 2px; padding: 12px 14px 11px 47px; background: rgb(255 255 255 / 93%); border: 1px solid color-mix(in srgb, var(--solution-accent) 25%, #fff); border-radius: 12px; box-shadow: 0 13px 26px rgb(44 76 133 / 13%); animation: appCardFloat 4.9s ease-in-out infinite .3s; }.hardware-cloud > i { position: absolute; top: 18px; width: 16px; height: 16px; background: linear-gradient(135deg, var(--solution-accent), #74acf2); border-radius: 50%; }.hardware-cloud > i:nth-of-type(1) { left: 13px; }.hardware-cloud > i:nth-of-type(2) { top: 12px; left: 21px; width: 20px; height: 20px; }.hardware-cloud > i:nth-of-type(3) { top: 20px; left: 35px; width: 13px; height: 13px; }.hardware-cloud b { color: #344a6c; font-size: 9px; }.hardware-cloud small { color: #8998ad; font-size: 7px; }.hardware-terminal { position: absolute; top: 63px; right: 82px; z-index: 1; width: 226px; height: 288px; overflow: hidden; border-radius: 22px; box-shadow: 0 25px 46px rgb(47 75 124 / 17%); transform: rotate(5deg); animation: hardwareTerminalFloat 5.4s ease-in-out infinite; }.hardware-terminal img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }.hardware-terminal::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 45%, rgb(30 65 119 / 19%)); }.hardware-terminal span { position: absolute; right: 12px; bottom: 13px; z-index: 1; display: flex; align-items: center; gap: 5px; padding: 6px 8px; color: #fff; background: rgb(19 57 107 / 75%); border: 1px solid rgb(255 255 255 / 32%); border-radius: 8px; font-size: 8px; }.hardware-terminal span i { width: 6px; height: 6px; background: #47d39c; border-radius: 50%; box-shadow: 0 0 0 3px rgb(71 211 156 / 18%); }.hardware-phone { position: absolute; top: 79px; left: 146px; z-index: 2; width: 176px; height: 335px; padding: 7px; background: #142544; border: 2px solid #304b7b; border-radius: 27px; box-shadow: 0 25px 45px rgb(31 60 111 / 28%); transform: rotate(-5deg); animation: hardwarePhoneFloat 4.8s ease-in-out infinite; }.hardware-phone-notch { position: absolute; top: 7px; left: 50%; z-index: 2; width: 57px; height: 12px; background: #142544; border-radius: 0 0 10px 10px; transform: translateX(-50%); }.hardware-phone-screen { height: 100%; overflow: hidden; padding: 27px 12px 11px; color: #52647d; background: linear-gradient(165deg, #f9fbff, #e9f2ff); border-radius: 20px; }.hardware-phone-screen > small { color: #8b9ab0; font-size: 7px; }.hardware-phone-screen > strong { display: block; margin-top: 5px; color: #203762; font-size: 13px; }.hardware-device-card { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 8px; background: linear-gradient(135deg, var(--solution-accent), #70a8ef); border-radius: 11px; }.hardware-device-card > i { width: 25px; height: 25px; background: rgb(255 255 255 / 22%); border: 1px solid rgb(255 255 255 / 42%); border-radius: 8px; }.hardware-device-card span { display: grid; gap: 3px; flex: 1; }.hardware-device-card b { color: #fff; font-size: 8px; }.hardware-device-card small { color: rgb(255 255 255 / 70%); font-size: 6px; }.hardware-device-card em { color: #d5f6ec; font-size: 10px; font-style: normal; font-weight: 700; }.hardware-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 11px; }.hardware-controls span { display: grid; gap: 4px; justify-items: center; color: #65768f; font-size: 6px; }.hardware-controls span::before { width: 23px; height: 23px; content: ""; background: color-mix(in srgb, var(--solution-accent-soft) 78%, #fff); border-radius: 7px; }.hardware-data { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }.hardware-data span { display: grid; gap: 4px; padding: 8px; background: #f5f8fc; border-radius: 7px; }.hardware-data small { color: #93a1b4; font-size: 6px; }.hardware-data b { color: #36527f; font-size: 9px; }.hardware-phone-screen > p { display: grid; gap: 6px; margin: 12px 0 0; }.hardware-phone-screen > p i { height: 7px; background: #dbe5f3; border-radius: 5px; }.hardware-phone-screen > p i:nth-child(2) { width: 73%; }.hardware-phone-screen > p i:nth-child(3) { width: 58%; }.hardware-alert { position: absolute; top: 243px; left: 15px; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 10px; background: rgb(255 255 255 / 94%); border: 1px solid #dce8f6; border-radius: 10px; box-shadow: 0 13px 25px rgb(44 76 133 / 13%); animation: appCardFloat 4.5s ease-in-out infinite 1.1s; }.hardware-alert > i { display: grid; width: 21px; height: 21px; place-items: center; color: #fff; background: #2cb78d; border-radius: 7px; font-size: 11px; font-style: normal; }.hardware-alert span { display: grid; gap: 3px; }.hardware-alert b { color: #3d506e; font-size: 8px; }.hardware-alert small { color: #95a2b3; font-size: 6px; }.hardware-protocol { position: absolute; right: 2px; bottom: 26px; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: rgb(255 255 255 / 92%); border: 1px solid #dce8f6; border-radius: 10px; box-shadow: 0 12px 25px rgb(46 65 110 / 12%); animation: appCardFloat 5.1s ease-in-out infinite .7s; }.hardware-protocol b { color: #49617f; font-size: 7px; }.hardware-protocol i { width: 4px; height: 4px; background: #54c7a1; border-radius: 50%; }.hardware-tag { position: absolute; z-index: 4; padding: 9px 11px; color: #45546b; background: rgb(255 255 255 / 92%); border: 1px solid #e1e9f4; border-radius: 8px; box-shadow: 0 11px 22px rgb(46 65 110 / 12%); font-size: 9px; font-weight: 650; }.hardware-tag-source { top: 35px; right: 12px; }.hardware-tag-private { bottom: 3px; left: 97px; }.hardware-tag-custom { top: 164px; right: -10px; }
.app-device { position: absolute; overflow: hidden; padding: 7px; background: #142544; border: 2px solid #304b7b; border-radius: 27px; box-shadow: 0 25px 45px rgb(31 60 111 / 26%); }.app-device-back { top: 57px; left: 104px; width: 153px; height: 302px; opacity: .82; transform: rotate(-13deg); animation: appDeviceBack 5.5s ease-in-out infinite; }.app-device-front { top: 54px; left: 196px; z-index: 2; width: 173px; height: 335px; transform: rotate(6deg); animation: appDeviceFloat 4.6s ease-in-out infinite; }.app-device-notch { position: absolute; top: 7px; left: 50%; z-index: 2; width: 58px; height: 12px; background: #142544; border-radius: 0 0 10px 10px; transform: translateX(-50%); }.app-device-screen { height: 100%; overflow: hidden; padding: 28px 12px 11px; color: #4f607b; background: linear-gradient(165deg, #f9fbff, #e9f2ff); border-radius: 20px; }.app-device-back .app-device-screen { position: relative; padding: 0; background: linear-gradient(145deg, #355eaa, #6ca0ee); }.app-device-back .app-device-screen span { position: absolute; top: 46px; left: 18px; color: #fff; font-size: 24px; font-weight: 800; }.app-device-back .app-device-screen i { position: absolute; left: 18px; width: 60%; height: 9px; background: rgb(255 255 255 / 38%); border-radius: 6px; }.app-device-back .app-device-screen i:nth-of-type(1) { top: 91px; }.app-device-back .app-device-screen i:nth-of-type(2) { top: 108px; width: 45%; }.app-device-back .app-device-screen i:nth-of-type(3) { top: 141px; width: calc(100% - 36px); height: 84px; background: rgb(255 255 255 / 14%); border-radius: 12px; }.app-device-back .app-device-screen b { position: absolute; right: -24px; bottom: 11px; width: 100px; height: 100px; border: 16px solid rgb(255 255 255 / 15%); border-radius: 50%; }
.app-device-front small { color: #99a7bc; font-size: 7px; }.app-device-front > .app-device-screen > strong { display: block; margin-top: 5px; color: #203762; font-size: 13px; }.app-wallet { display: grid; gap: 4px; margin-top: 13px; padding: 11px; background: linear-gradient(132deg, var(--solution-accent), var(--solution-accent-dark)); border-radius: 12px; box-shadow: 0 9px 17px color-mix(in srgb, var(--solution-accent) 25%, transparent); }.app-wallet span { color: rgb(255 255 255 / 72%); font-size: 7px; }.app-wallet b { color: #fff; font-size: 15px; }.app-wallet em { color: #cceeff; font-size: 7px; font-style: normal; }.app-wallet div { display: flex; height: 27px; align-items: end; justify-content: space-between; }.app-wallet div i { width: 8%; height: 32%; background: rgb(255 255 255 / 38%); border-radius: 3px 3px 0 0; }.app-wallet div i:nth-child(2) { height: 56%; }.app-wallet div i:nth-child(3) { height: 42%; }.app-wallet div i:nth-child(4) { height: 78%; background: #fff; }.app-wallet div i:nth-child(5) { height: 59%; }.app-wallet div i:nth-child(6) { height: 88%; }.app-wallet div i:nth-child(7) { height: 68%; }.app-shortcuts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 12px; }.app-shortcuts span { display: grid; gap: 4px; justify-items: center; color: #62728b; font-size: 6px; }.app-shortcuts span::before { width: 22px; height: 22px; content: ""; background: color-mix(in srgb, var(--solution-accent-soft) 75%, #fff); border-radius: 7px; }.app-device-front p { display: grid; gap: 6px; margin: 14px 0 0; }.app-device-front p i { height: 8px; background: #dbe5f3; border-radius: 5px; }.app-device-front p i:nth-child(2) { width: 73%; }.app-device-front p i:nth-child(3) { width: 58%; }
.app-mobile-data-card { position: absolute; top: 213px; left: 25px; z-index: 3; display: grid; gap: 4px; width: 135px; padding: 12px; background: rgb(255 255 255 / 94%); border: 1px solid color-mix(in srgb, var(--solution-accent) 29%, #fff); border-radius: 12px; box-shadow: 0 17px 32px rgb(44 76 133 / 17%); animation: appCardFloat 4.4s ease-in-out infinite .5s; }.app-mobile-data-card small { color: #8391a6; font-size: 8px; }.app-mobile-data-card strong { color: #203964; font-size: 19px; }.app-mobile-data-card > span { color: #27a77e; font-size: 8px; font-weight: 650; }.app-mobile-data-card div { display: flex; height: 22px; align-items: end; gap: 6px; }.app-mobile-data-card div i { width: 12px; height: 34%; background: #afd0f5; border-radius: 3px 3px 0 0; }.app-mobile-data-card div i:nth-child(2) { height: 66%; }.app-mobile-data-card div i:nth-child(3) { height: 48%; }.app-mobile-data-card div i:nth-child(4) { height: 87%; background: var(--solution-accent); }.app-mobile-data-card div i:nth-child(5) { height: 63%; }.app-mobile-status { position: absolute; right: 13px; bottom: 25px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px 13px; background: rgb(255 255 255 / 92%); border: 1px solid #dce8f6; border-radius: 10px; box-shadow: 0 12px 25px rgb(46 65 110 / 12%); animation: appCardFloat 5s ease-in-out infinite 1s; }.app-mobile-status > i { width: 23px; height: 23px; background: linear-gradient(135deg, #5dcaa5, #239b80); border-radius: 8px; }.app-mobile-status b { display: block; color: #344861; font-size: 8px; }.app-mobile-status small { display: block; margin-top: 3px; color: #8492a6; font-size: 7px; }.app-mobile-tag { position: absolute; z-index: 4; padding: 9px 11px; color: #45546b; background: rgb(255 255 255 / 92%); border: 1px solid #e1e9f4; border-radius: 8px; box-shadow: 0 11px 22px rgb(46 65 110 / 12%); font-size: 9px; font-weight: 650; }.tag-app-source { top: 26px; right: 29px; }.tag-app-private { bottom: 1px; left: 76px; }.tag-app-custom { top: 117px; right: -5px; }

/* 小程序：以手机小程序为中心，连接成交、会员和服务通知。 */
.mini-growth-visual { position: absolute; inset: 0 -10px; display: none; min-width: 510px; }.mini-orbit { position: absolute; border: 1px dashed color-mix(in srgb, var(--solution-accent) 30%, transparent); border-radius: 50%; }.orbit-one { top: 40px; left: 91px; width: 326px; height: 326px; animation: miniOrbit 17s linear infinite; }.orbit-two { top: 90px; left: 139px; width: 229px; height: 229px; border-style: solid; opacity: .52; animation: miniOrbit 12s linear infinite reverse; }.mini-phone-frame { position: absolute; top: 35px; left: 154px; z-index: 2; width: 208px; height: 356px; overflow: hidden; padding: 6px; background: #fff; border: 2px solid #5d8ee7; border-radius: 23px; box-shadow: 0 25px 50px rgb(44 76 133 / 24%); transform: rotate(2deg); animation: miniPhoneFloat 4.8s ease-in-out infinite; }.mini-phone-frame::before { position: absolute; top: 7px; left: 50%; z-index: 2; width: 65px; height: 11px; content: ""; background: #fff; border-radius: 0 0 9px 9px; transform: translateX(-50%); }.mini-phone-frame > div:not(.mini-phone-head) { margin-right: 6px; margin-left: 6px; }.mini-phone-head { display: flex; align-items: center; justify-content: space-between; height: 39px; padding: 0 8px; color: #586983; font-size: 8px; }.mini-phone-head i { width: 13px; height: 13px; background: var(--solution-accent); border-radius: 4px; }.mini-phone-head b { font-size: 10px; }.mini-phone-banner { display: grid; gap: 4px; padding: 14px 12px; color: #fff; background: linear-gradient(135deg, var(--solution-accent), #66a5f3); border-radius: 12px; }.mini-phone-banner small { font-size: 7px; opacity: .78; }.mini-phone-banner strong { font-size: 15px; }.mini-phone-banner em { width: max-content; margin-top: 2px; padding: 4px 7px; color: var(--solution-accent-dark); background: #fff; border-radius: 8px; font-size: 7px; font-style: normal; font-weight: 650; }.mini-phone-entry { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 11px; }.mini-phone-entry span { display: grid; gap: 4px; justify-items: center; color: #65768f; font-size: 6px; }.mini-phone-entry i { display: grid; width: 26px; height: 26px; place-items: center; color: var(--solution-accent-dark); background: var(--solution-accent-soft); border-radius: 8px; font-size: 9px; font-style: normal; font-weight: 700; }.mini-phone-entry b { font-weight: 500; }.mini-phone-orders { margin-top: 13px; padding: 9px; background: #f7faff; border-radius: 9px; }.mini-phone-orders > div { display: flex; justify-content: space-between; color: #3f506c; font-size: 8px; }.mini-phone-orders > div small { color: #91a0b4; font-size: 6px; }.mini-phone-orders p { display: flex; align-items: center; gap: 6px; margin: 9px 0 0; }.mini-phone-orders p > i { width: 20px; height: 20px; background: #bfd7fa; border-radius: 6px; }.mini-phone-orders p span { display: grid; gap: 2px; flex: 1; }.mini-phone-orders p span b { color: #53647e; font-size: 7px; }.mini-phone-orders p span small { color: #a0acbc; font-size: 6px; }.mini-phone-orders p > em { color: #2eaa82; font-size: 6px; font-style: normal; }
.mini-growth-card { position: absolute; top: 76px; left: 8px; z-index: 3; display: grid; gap: 5px; width: 139px; padding: 13px; background: rgb(255 255 255 / 95%); border: 1px solid color-mix(in srgb, var(--solution-accent) 28%, #fff); border-radius: 12px; box-shadow: 0 16px 32px rgb(44 76 133 / 15%); animation: appCardFloat 4.9s ease-in-out infinite .3s; }.mini-growth-card small { color: #8693a7; font-size: 8px; }.mini-growth-card strong { color: #294677; font-size: 18px; }.mini-growth-card > span { color: #23aa7e; font-size: 8px; }.mini-growth-card div { display: flex; height: 26px; align-items: end; gap: 5px; }.mini-growth-card div i { width: 10px; height: 29%; background: #b7d2f4; border-radius: 3px 3px 0 0; }.mini-growth-card div i:nth-child(2) { height: 45%; }.mini-growth-card div i:nth-child(3) { height: 67%; }.mini-growth-card div i:nth-child(4) { height: 54%; }.mini-growth-card div i:nth-child(5) { height: 83%; background: var(--solution-accent); }.mini-growth-card div i:nth-child(6) { height: 69%; }.mini-growth-card div i:nth-child(7) { height: 92%; background: #65a0ef; }.mini-conversion-card { position: absolute; right: 8px; bottom: 45px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px; background: rgb(255 255 255 / 94%); border: 1px solid #dce8f6; border-radius: 12px; box-shadow: 0 14px 26px rgb(44 76 133 / 14%); animation: appCardFloat 5.2s ease-in-out infinite .8s; }.mini-conversion-ring { display: grid; width: 49px; height: 49px; place-items: center; background: conic-gradient(var(--solution-accent) 0 68%, #dce9fa 68% 100%); border-radius: 50%; }.mini-conversion-ring::before { position: absolute; width: 37px; height: 37px; content: ""; background: #fff; border-radius: 50%; }.mini-conversion-ring b { position: relative; z-index: 1; color: var(--solution-accent-dark); font-size: 13px; }.mini-conversion-ring small { font-size: 7px; }.mini-conversion-card span { display: grid; gap: 3px; }.mini-conversion-card strong { color: #42546f; font-size: 8px; }.mini-conversion-card small { color: #8998ac; font-size: 6px; }.mini-message-card { position: absolute; top: 232px; left: 19px; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 10px; background: rgb(255 255 255 / 94%); border: 1px solid #dce8f6; border-radius: 10px; box-shadow: 0 13px 25px rgb(44 76 133 / 13%); animation: appCardFloat 4.5s ease-in-out infinite 1.3s; }.mini-message-card > i { display: grid; width: 21px; height: 21px; place-items: center; color: #fff; background: #2cb78d; border-radius: 7px; font-size: 11px; font-style: normal; }.mini-message-card span { display: grid; gap: 3px; }.mini-message-card b { color: #3d506e; font-size: 8px; }.mini-message-card small { color: #95a2b3; font-size: 6px; }.mini-visual-tag { position: absolute; z-index: 4; padding: 9px 11px; color: #45546b; background: rgb(255 255 255 / 92%); border: 1px solid #e1e9f4; border-radius: 8px; box-shadow: 0 11px 22px rgb(46 65 110 / 12%); font-size: 9px; font-weight: 650; }.mini-tag-multi { top: 22px; right: 42px; }.mini-tag-source { bottom: 4px; left: 83px; }.mini-tag-custom { top: 176px; right: -4px; }

@keyframes appHaloPulse { 50% { opacity: .68; transform: scale(1.09); } } @keyframes appDeviceFloat { 50% { transform: rotate(4deg) translateY(-9px); } } @keyframes appDeviceBack { 50% { transform: rotate(-11deg) translate(-4px, 6px); } } @keyframes appCardFloat { 50% { transform: translateY(-7px); } } @keyframes miniPhoneFloat { 50% { transform: rotate(1deg) translateY(-8px); } } @keyframes miniOrbit { to { transform: rotate(360deg); } } @keyframes hardwareTerminalFloat { 50% { transform: rotate(3deg) translateY(-8px); } } @keyframes hardwarePhoneFloat { 50% { transform: rotate(-3deg) translateY(-9px); } } @keyframes softwarePanelFloat { 50% { transform: rotate(2deg) translateY(-7px); } } @keyframes softwareCardFloat { 50% { transform: translateY(-6px); } } @keyframes softwareBarPulse { 50% { opacity: .68; transform: scaleY(.72); } }

@media (prefers-reduced-motion: reduce) { .app-mobile-halo, .app-device, .app-mobile-data-card, .app-mobile-status, .app-hardware-visual *, .mini-orbit, .mini-phone-frame, .mini-growth-card, .mini-conversion-card, .mini-message-card, .dashboard-main-panel, .dashboard-sales-card, .dashboard-flow-card, .dashboard-chart div i { animation: none !important; } }

.app-hero-board {
  position: absolute;
  top: 8px;
  right: 0;
  left: 2px;
  z-index: 2;
  overflow: hidden;
  padding: 20px 20px 16px;
  background: linear-gradient(145deg, rgb(255 255 255 / 96%), rgb(244 248 255 / 94%));
  border: 1px solid rgb(211 222 241 / 90%);
  border-radius: 22px;
  box-shadow: 0 28px 65px rgb(52 73 124 / 20%);
  transform: perspective(1100px) rotateY(-6deg) rotateX(2deg);
}

.app-board-head,
.app-board-head > div:first-child,
.app-board-body,
.app-kpi-grid,
.app-platform-card > div:first-child,
.app-board-foot {
  display: flex;
}

.app-board-head { align-items: center; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid #e7edf7; }
.app-board-head > div:first-child { flex-direction: column; gap: 4px; }
.app-board-kicker { color: var(--solution-accent); font-size: 9px; font-weight: 750; letter-spacing: .14em; }
.app-board-head strong { color: #203252; font-size: 16px; letter-spacing: .01em; }
.app-live-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: #278c70; background: #e9faf4; border: 1px solid #c8efe2; border-radius: 999px; font-size: 9px; font-weight: 650; }
.app-live-status i { width: 6px; height: 6px; background: #35c696; border-radius: 50%; box-shadow: 0 0 0 3px rgb(53 198 150 / 15%); }
.app-board-body { min-height: 280px; align-items: center; gap: 18px; padding: 18px 0 13px; }
.app-phone-stack { position: relative; width: 172px; height: 250px; flex: 0 0 172px; }
.app-phone { position: absolute; width: 123px; height: 238px; padding: 7px; background: #152440; border: 1px solid #324c7a; border-radius: 20px; box-shadow: 0 16px 28px rgb(35 61 111 / 22%); }
.app-phone-back { top: 4px; left: 3px; opacity: .68; transform: rotate(-12deg) scale(.88); }
.app-phone-front { top: 8px; right: 4px; z-index: 1; transform: rotate(5deg); }
.app-phone-notch { position: absolute; top: 8px; left: 50%; z-index: 2; width: 42px; height: 9px; background: #101b31; border-radius: 0 0 8px 8px; transform: translateX(-50%); }
.app-phone-screen { height: 100%; overflow: hidden; padding: 27px 10px 10px; background: linear-gradient(170deg, #f6faff, #eaf1ff); border-radius: 14px; }
.screen-dark { position: relative; background: linear-gradient(150deg, #213d75, #477dd1); }
.screen-dark span, .screen-dark b, .screen-dark i, .screen-dark em { position: absolute; display: block; border-radius: 9px; }
.screen-dark span { top: 40px; right: 13px; left: 13px; height: 45px; background: rgb(255 255 255 / 16%); }
.screen-dark b { top: 106px; right: 13px; left: 13px; height: 9px; background: rgb(255 255 255 / 72%); }
.screen-dark i { top: 125px; right: 30px; left: 13px; height: 7px; background: rgb(255 255 255 / 36%); }
.screen-dark em { right: 13px; bottom: 20px; left: 13px; height: 54px; background: rgb(255 255 255 / 12%); }
.phone-greeting { color: #51627f; font-size: 8px; font-weight: 650; }
.phone-balance { display: grid; gap: 4px; margin-top: 13px; padding: 10px 8px; background: #fff; border-radius: 9px; box-shadow: 0 5px 13px rgb(81 108 160 / 9%); }
.phone-balance small { color: #91a0b6; font-size: 7px; }.phone-balance strong { color: #1e3867; font-size: 14px; }.phone-balance strong span { color: #27ac7d; font-size: 7px; }
.phone-mini-chart { display: flex; height: 52px; align-items: end; justify-content: space-around; margin-top: 12px; padding: 8px 5px 0; background: #f6f8fc; border-radius: 8px; }.phone-mini-chart i { width: 7px; height: 32%; background: #a7c4f4; border-radius: 4px 4px 0 0; }.phone-mini-chart i:nth-child(2) { height: 58%; }.phone-mini-chart i:nth-child(3) { height: 44%; }.phone-mini-chart i:nth-child(4) { height: 78%; background: var(--solution-accent); }.phone-mini-chart i:nth-child(5) { height: 64%; }.phone-mini-chart i:nth-child(6) { height: 86%; background: #6599ed; }.phone-mini-chart i:nth-child(7) { height: 72%; }
.phone-list { display: grid; gap: 6px; margin-top: 10px; }.phone-list span { height: 6px; background: #d7e1f1; border-radius: 4px; }.phone-list span:nth-child(2) { width: 76%; }.phone-list span:nth-child(3) { width: 58%; }
.app-board-data { display: grid; flex: 1; gap: 12px; min-width: 0; }
.app-kpi-grid { gap: 9px; }.app-kpi-grid > div { display: grid; flex: 1; gap: 4px; padding: 12px 10px; background: #fff; border: 1px solid #e6edf8; border-radius: 10px; }.app-kpi-grid small { color: #8b99ad; font-size: 8px; }.app-kpi-grid strong { color: #213a68; font-size: 18px; letter-spacing: -.03em; }.app-kpi-grid span { color: #25a77c; font-size: 8px; font-weight: 650; }
.app-platform-card { padding: 13px 12px; background: #fff; border: 1px solid #e6edf8; border-radius: 10px; }.app-platform-card > div:first-child { align-items: center; justify-content: space-between; color: #64758f; font-size: 9px; }.app-platform-card > div:first-child b { color: var(--solution-accent-dark); font-size: 15px; }.app-progress { height: 5px; margin: 10px 0 13px; background: #e7edf7; border-radius: 5px; }.app-progress i { display: block; width: 92%; height: 100%; background: linear-gradient(90deg, #72a7f6, var(--solution-accent)); border-radius: inherit; }.app-platform-card ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }.app-platform-card li { display: flex; align-items: center; gap: 6px; color: #6b7b93; font-size: 8px; }.app-platform-card li b { margin-left: auto; color: #2a9c77; font-size: 8px; font-weight: 600; }.platform-dot { width: 7px; height: 7px; border-radius: 50%; }.platform-dot.ios { background: #1e3968; }.platform-dot.android { background: #59c494; }.platform-dot.harmony { background: #6e8fec; }
.app-board-foot { align-items: center; justify-content: space-between; padding-top: 13px; border-top: 1px solid #e7edf7; }.app-board-foot span { display: inline-flex; align-items: center; gap: 5px; color: #9aa7ba; font-size: 8px; }.app-board-foot i { width: 6px; height: 6px; background: #cdd7e7; border-radius: 50%; }.app-board-foot .is-active { color: var(--solution-accent-dark); font-weight: 650; }.app-board-foot .is-active i { background: var(--solution-accent); box-shadow: 0 0 0 3px rgb(67 126 230 / 13%); }

.solution-detail-visual.has-carousel .solution-visual-chip {
  display: none;
}

.solution-hero-carousel {
  position: absolute;
  top: 22px;
  right: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  padding: 8px;
  background: rgb(255 255 255 / 72%);
  border: 1px solid rgb(211 222 241 / 88%);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgb(52 73 124 / 17%);
  transform: perspective(900px) rotateY(-5deg) rotateX(2deg);
}

/* The custom-solution pages introduce the offer before their project carousel. */
.solution-project-carousel-section {
  padding: 0;
  background: #fff;
}

.solution-project-carousel {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: 100%;
  height: max(640px, calc(100svh - 74px));
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.solution-project-carousel .solution-carousel-viewport {
  height: 100%;
  border-radius: 0;
}

.solution-project-carousel .solution-carousel-slide {
  height: 100%;
  min-height: 0;
}

.solution-project-carousel .solution-carousel-caption {
  right: max(150px, calc((100vw - 1280px) / 2 + 130px));
  bottom: 46px;
  left: max(28px, calc((100vw - 1280px) / 2));
}

.solution-project-carousel .solution-carousel-controls {
  right: max(28px, calc((100vw - 1280px) / 2));
  bottom: 42px;
}

/* 定制页：左侧首屏文案固定，右侧视觉区从首屏插画轮播到项目案例。 */
.solution-detail-hero.has-intro-carousel .solution-project-carousel {
  position: absolute;
  top: 82px;
  right: max(64px, calc((100vw - 1920px) / 2));
  left: auto;
  z-index: 2;
  /* Give the case artwork more room on desktop while keeping a safe gap for
     the fixed copy column at medium widths. */
  width: min(60vw, 1200px, calc(100vw - 700px));
  height: 438px;
  overflow: hidden;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.solution-detail-hero.has-intro-carousel .solution-detail-hero-inner {
  align-items: start;
  padding-top: 82px;
}

.solution-detail-hero.has-intro-carousel .solution-project-carousel .solution-carousel-viewport,
.solution-detail-hero.has-intro-carousel .solution-project-carousel .solution-carousel-track {
  height: 100%;
  border-radius: 0;
}

.solution-detail-hero.has-intro-carousel .solution-project-carousel .solution-carousel-slide {
  height: 100%;
  min-height: 0;
}

.solution-detail-hero.has-intro-carousel .solution-intro-carousel-slide {
  background: transparent;
}

.solution-detail-hero.has-intro-carousel .solution-intro-carousel-slide::after {
  display: none;
}

.solution-detail-hero.has-intro-carousel .solution-intro-carousel-slide .solution-detail-visual {
  width: 100%;
  height: 100%;
  margin: 0;
  transform: none;
}

.solution-detail-hero.has-intro-carousel .solution-project-carousel .solution-carousel-caption {
  right: 86px;
  bottom: 18px;
  left: 18px;
}

.solution-detail-hero.has-intro-carousel .solution-project-carousel .solution-carousel-controls {
  right: 12px;
  bottom: 14px;
}

.solution-detail-hero.has-intro-carousel .solution-project-carousel .solution-carousel-slide:not(.solution-intro-carousel-slide) {
  border-radius: 20px;
  box-shadow: 0 24px 60px rgb(52 73 124 / 17%);
}

.solution-detail-hero.has-intro-carousel .solution-project-carousel .solution-carousel-slide:not(.solution-intro-carousel-slide)::after {
  background: linear-gradient(180deg, rgb(13 27 56 / 2%) 30%, rgb(13 27 56 / 56%) 100%);
}

.solution-detail-hero.has-full-carousel .solution-hero-carousel {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  padding: 0;
  background: #263a58;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.solution-carousel-viewport {
  overflow: hidden;
  border-radius: 11px;
  background: #eaf0fb;
}

.solution-detail-hero.has-full-carousel .solution-carousel-viewport,
.solution-detail-hero.has-full-carousel .solution-carousel-track {
  height: 100%;
  border-radius: 0;
}

.solution-carousel-track {
  display: flex;
  transition: transform .58s cubic-bezier(.22, .75, .25, 1);
  will-change: transform;
}

.solution-carousel-slide {
  position: relative;
  flex: 0 0 100%;
  height: 304px;
  overflow: hidden;
  background: #dce5f6;
}

.solution-detail-hero.has-full-carousel .solution-carousel-slide {
  height: auto;
  min-height: 640px;
}

.solution-carousel-slide::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgb(13 27 56 / 3%) 28%, rgb(13 27 56 / 72%) 100%);
  pointer-events: none;
}

.solution-carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.solution-detail-hero.has-full-carousel .solution-carousel-slide img {
  object-position: center;
}

.solution-carousel-caption {
  position: absolute;
  right: 96px;
  bottom: 19px;
  left: 20px;
  z-index: 1;
  display: grid;
  gap: 5px;
  color: #fff;
}

.solution-carousel-caption span {
  width: max-content;
  max-width: 100%;
  padding: 4px 7px;
  color: #fff;
  background: rgb(15 31 61 / 46%);
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 4px;
  backdrop-filter: blur(4px);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .08em;
  opacity: .82;
}

.solution-carousel-caption strong {
  overflow: hidden;
  color: #fff;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  text-shadow: 0 2px 8px rgb(0 0 0 / 28%);
  white-space: nowrap;
}

.solution-carousel-controls {
  position: absolute;
  right: 18px;
  bottom: 17px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
}

.solution-detail-hero.has-full-carousel .solution-carousel-caption {
  display: none;
}

.solution-detail-hero.has-full-carousel .solution-carousel-controls {
  right: max(28px, calc((100vw - 1280px) / 2));
  bottom: 32px;
}

.solution-carousel-button {
  display: grid;
  width: 27px;
  height: 27px;
  padding: 0;
  place-items: center;
  color: #fff;
  background: rgb(22 37 68 / 45%);
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.solution-carousel-button:hover,
.solution-carousel-button:focus-visible {
  background: var(--solution-accent-dark);
  outline: none;
  transform: translateY(-1px);
}

.solution-carousel-button span {
  font-size: 14px;
  line-height: 1;
}

.solution-carousel-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-right: 2px;
}

.solution-carousel-dots button {
  width: 5px;
  height: 5px;
  padding: 0;
  background: rgb(255 255 255 / 54%);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}

.solution-carousel-dots button[aria-current="true"] {
  width: 16px;
  background: #fff;
  border-radius: 5px;
}

.solution-carousel-dots button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.solution-visual-window {
  position: absolute;
  top: 37px;
  right: 6px;
  left: 13px;
  height: 316px;
  overflow: hidden;
  background: rgb(255 255 255 / 94%);
  border: 1px solid rgb(211 222 241 / 90%);
  border-radius: 15px;
  box-shadow: 0 24px 60px rgb(52 73 124 / 17%);
  transform: perspective(900px) rotateY(-7deg) rotateX(2deg);
}

.solution-window-bar {
  display: flex;
  height: 44px;
  align-items: center;
  padding: 0 15px;
  background: #fbfcff;
  border-bottom: 1px solid #e8edf5;
}

.solution-window-bar i {
  width: 7px;
  height: 7px;
  margin-right: 5px;
  background: #d6deec;
  border-radius: 50%;
}

.solution-window-bar i:first-child {
  background: #ff9289;
}

.solution-window-bar i:nth-child(2) {
  background: #ffc568;
}

.solution-window-bar i:nth-child(3) {
  background: #6fd2aa;
}

.solution-window-bar span {
  margin-left: 10px;
  overflow: hidden;
  color: #647288;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.solution-window-layout {
  display: grid;
  grid-template-columns: 67px 1fr;
  height: calc(100% - 44px);
}

.solution-window-layout aside {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 15px;
  padding-top: 28px;
  background: #f4f7fc;
  border-right: 1px solid #e8edf5;
}

.solution-window-layout aside i {
  width: 28px;
  height: 6px;
  background: #ccd7e9;
  border-radius: 4px;
}

.solution-window-layout aside i:first-child {
  background: var(--solution-accent);
}

.solution-window-main {
  display: grid;
  grid-template-rows: 1.15fr .55fr .55fr;
  gap: 12px;
  padding: 24px;
}

.solution-chart {
  display: flex;
  min-height: 120px;
  align-items: end;
  justify-content: space-around;
  padding: 17px 20px 0;
  background: linear-gradient(180deg, #f9fbff, #f3f7fd);
  border: 1px solid #e8edf6;
  border-radius: 10px;
}

.solution-chart span {
  width: 11%;
  height: 42%;
  background: color-mix(in srgb, var(--solution-accent) 35%, #dce7fb);
  border-radius: 4px 4px 0 0;
}

.solution-chart span:nth-child(2) {
  height: 68%;
}

.solution-chart span:nth-child(3) {
  height: 52%;
}

.solution-chart span:nth-child(4) {
  height: 87%;
  background: linear-gradient(180deg, var(--solution-accent), var(--solution-accent-dark));
}

.solution-chart span:nth-child(5) {
  height: 74%;
}

.solution-data-row,
.solution-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.solution-data-row i {
  background: #f4f7fc;
  border: 1px solid #e8edf6;
  border-radius: 8px;
}

.solution-flow {
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}

.solution-flow b {
  position: relative;
  height: 7px;
  background: color-mix(in srgb, var(--solution-accent) 28%, #e1e8f5);
  border-radius: 5px;
}

.solution-flow b::after {
  position: absolute;
  top: 50%;
  right: -8px;
  width: 7px;
  height: 1px;
  content: "";
  background: #d5deec;
}

.solution-flow b:last-child::after {
  display: none;
}

.solution-visual-chip {
  position: absolute;
  z-index: 3;
  padding: 10px 13px;
  color: #42516a;
  background: rgb(255 255 255 / 88%);
  border: 1px solid rgb(221 228 241 / 85%);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgb(46 65 110 / 12%);
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 650;
}

.chip-secure {
  top: 8px;
  right: 28px;
}

.chip-private {
  bottom: 7px;
  left: 6px;
}

.chip-custom {
  right: -5px;
  bottom: 34px;
}

.solution-metrics {
  background: #fff;
  border-bottom: 1px solid #e8edf5;
}

.solution-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.solution-page.has-four-solution-metrics .solution-metrics-grid {
  grid-template-columns: repeat(4, 1fr);
}

.solution-metrics-grid>div {
  position: relative;
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.solution-metrics-grid>div+div::before {
  position: absolute;
  top: 31px;
  bottom: 31px;
  left: 0;
  width: 1px;
  content: "";
  background: #e7ebf3;
}

.solution-metrics-grid strong {
  color: var(--solution-accent-dark);
  font-size: 22px;
  font-weight: 700;
}

.solution-metrics-grid span {
  max-width: 145px;
  color: #7c8799;
  font-size: 11px;
  line-height: 1.5;
}

.solution-overview-section {
  padding: 120px 0;
}

.solution-overview-layout {
  display: grid;
  grid-template-columns: .83fr 1.17fr;
  gap: clamp(66px, 8vw, 118px);
  align-items: center;
}

.solution-overview-copy h2 {
  margin: 16px 0 21px;
  color: #202c42;
  font-size: clamp(31px, 3.3vw, 43px);
  font-weight: 680;
  letter-spacing: 0;
  line-height: 1.3;
}

.solution-overview-copy [data-solution-overview-text] p {
  margin: 0 0 13px;
  color: #707d90;
  font-size: 14px;
  line-height: 1.85;
}

.solution-overview-copy .text-link {
  margin-top: 13px;
  color: var(--solution-accent-dark);
}

.solution-overview-panel {
  overflow: hidden;
  background: linear-gradient(135deg, #f5f8fe, color-mix(in srgb, var(--solution-accent-soft) 57%, #fff));
  border: 1px solid #e3e9f4;
  border-radius: 18px;
}

.solution-overview-top {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: rgb(255 255 255 / 65%);
  border-bottom: 1px solid #e2e8f3;
}

.solution-overview-top span {
  color: #344158;
  font-size: 13px;
  font-weight: 650;
}

.solution-overview-top i {
  color: #95a0b1;
  font-size: 9px;
  font-style: normal;
}

.solution-overview-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #e2e8f3;
}

.solution-overview-list>div {
  display: flex;
  min-height: 145px;
  gap: 15px;
  padding: 24px;
  background: rgb(255 255 255 / 88%);
}

.solution-overview-list>div:only-child {
  grid-column: 1 / -1;
}

.solution-overview-list>div>span {
  color: var(--solution-accent);
  font-size: 11px;
  font-weight: 700;
}

.solution-overview-list p,
.solution-overview-list strong,
.solution-overview-list small {
  display: block;
  margin: 0;
}

.solution-overview-list strong {
  color: #354259;
  font-size: 14px;
  font-weight: 650;
}

.solution-overview-list small {
  margin-top: 9px;
  color: #7b8798;
  font-size: 11px;
  line-height: 1.65;
}

.solution-capabilities-section {
  padding: 112px 0 120px;
  background: #f7f9fd;
}

.solution-capabilities-section .section-heading,
.solution-process-section .section-heading {
  margin-bottom: 41px;
}

.solution-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.solution-page.has-four-solution-capabilities .solution-capability-grid {
  grid-template-columns: repeat(4, 1fr);
}

.solution-capability-card {
  position: relative;
  min-height: 210px;
  padding: 25px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5ebf4;
  border-radius: 13px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.solution-capability-card::after {
  position: absolute;
  right: -28px;
  bottom: -40px;
  width: 120px;
  height: 120px;
  content: "";
  background: var(--solution-accent-soft);
  border-radius: 50%;
  opacity: .72;
}

.solution-capability-card:hover {
  border-color: color-mix(in srgb, var(--solution-accent) 35%, #e5ebf4);
  box-shadow: 0 17px 34px rgb(46 67 115 / 9%);
  transform: translateY(-3px);
}

.solution-capability-card>span {
  display: inline-flex;
  min-width: 31px;
  height: 23px;
  align-items: center;
  justify-content: center;
  color: var(--solution-accent-dark);
  background: var(--solution-accent-soft);
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
}

.solution-capability-card h3 {
  position: relative;
  z-index: 1;
  margin: 35px 0 10px;
  color: #2d3a51;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0;
}

.solution-capability-card p {
  position: relative;
  z-index: 1;
  max-width: 260px;
  margin: 0;
  color: #7a8698;
  font-size: 12px;
  line-height: 1.75;
}

/* 定制方案核心能力：以横向产品卡和功能界面预览展示能力矩阵。 */
.solution-capability-grid.solution-capability-showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 390px));
  justify-content: center;
  gap: 24px;
  width: 100%;
  padding: 2px 0;
  margin: 0;
}

.solution-capability-showcase .solution-showcase-card {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 430px;
  flex-direction: column;
  padding: 42px 38px 0;
  overflow: hidden;
  background: linear-gradient(148deg, color-mix(in srgb, var(--solution-accent-soft) 76%, #fff), color-mix(in srgb, var(--solution-accent-soft) 50%, #fff));
  border: 0;
  border-radius: 25px;
  box-shadow: none;
}

.solution-capability-showcase .solution-showcase-card::after { display: none; }
.solution-capability-showcase .solution-showcase-card:nth-child(3n + 2) { background: linear-gradient(148deg, #e8f6ff, #e5f4fb); }
.solution-capability-showcase .solution-showcase-card:nth-child(3n) { background: linear-gradient(148deg, #e2f9f1, #d9f5ee); }
.solution-capability-showcase .solution-showcase-card:nth-child(4n) { background: linear-gradient(148deg, #fff3cf, #fff9e9); }
.solution-capability-showcase .solution-showcase-card:hover { border: 0; box-shadow: 0 22px 36px color-mix(in srgb, var(--solution-accent) 13%, transparent); transform: translateY(-5px); }
.solution-capability-showcase .solution-showcase-card > span { min-width: 0; height: auto; padding: 0; color: color-mix(in srgb, var(--solution-accent-dark) 75%, #7c8697); background: transparent; border-radius: 0; font-size: 12px; letter-spacing: .06em; }
.solution-capability-showcase .solution-showcase-card h3 { margin: 0 0 21px; color: #17243a; font-size: clamp(24px, 2vw, 31px); font-weight: 700; line-height: 1.25; }
.solution-capability-showcase .solution-showcase-card p { max-width: 300px; color: #43526a; font-size: 15px; line-height: 1.75; }

.solution-capability-preview { position: relative; height: 200px; margin: 28px -9px 0; }.preview-window { position: absolute; right: 0; bottom: 0; left: 0; height: 174px; overflow: hidden; background: rgb(255 255 255 / 90%); border: 6px solid rgb(255 255 255 / 76%); border-radius: 18px 18px 0 0; box-shadow: 0 16px 32px rgb(48 77 132 / 13%); }.preview-top { display: flex; height: 24px; align-items: center; gap: 4px; padding: 0 8px; background: #f4f8fd; border-bottom: 1px solid #e8eff8; }.preview-top i { width: 5px; height: 5px; background: #f19a94; border-radius: 50%; }.preview-top i:nth-child(2) { background: #f3d276; }.preview-top i:nth-child(3) { background: #6acfae; }.preview-top b { width: 35px; height: 5px; margin-left: 4px; background: #dbe8f6; border-radius: 4px; }.preview-content { display: grid; grid-template-columns: 31px 1fr; height: calc(100% - 24px); }.preview-sidebar { display: grid; align-content: start; gap: 12px; padding: 14px 8px; background: #f5f8fc; }.preview-sidebar i { height: 5px; background: #d4e0f0; border-radius: 4px; }.preview-sidebar i:first-child { background: var(--solution-accent); }.preview-main { padding: 13px; }.preview-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.preview-summary i { height: 29px; background: #edf4fc; border-radius: 5px; }.preview-summary i:first-child { background: color-mix(in srgb, var(--solution-accent) 18%, #edf4fc); }.preview-chart { display: flex; height: 55px; align-items: end; justify-content: space-around; padding: 8px 9px 0; margin-top: 8px; background: #f7faff; border-radius: 6px; }.preview-chart i { width: 8%; height: 31%; background: #b8d1f2; border-radius: 3px 3px 0 0; }.preview-chart i:nth-child(2) { height: 53%; }.preview-chart i:nth-child(3) { height: 43%; }.preview-chart i:nth-child(4) { height: 83%; background: var(--solution-accent); }.preview-chart i:nth-child(5) { height: 62%; }.preview-chart i:nth-child(6) { height: 73%; }.preview-lines { display: grid; gap: 5px; margin-top: 9px; }.preview-lines i { height: 5px; background: #e0eaf5; border-radius: 4px; }.preview-lines i:nth-child(2) { width: 76%; }.preview-lines i:nth-child(3) { width: 52%; }
.preview-phone { position: absolute; right: 33px; bottom: -7px; z-index: 2; display: none; width: 91px; height: 168px; padding: 5px; background: #1d3154; border: 2px solid #385987; border-radius: 16px; box-shadow: 0 12px 23px rgb(35 59 104 / 26%); }.preview-phone::before { position: absolute; top: 5px; left: 50%; width: 31px; height: 7px; content: ""; background: #1d3154; border-radius: 0 0 7px 7px; transform: translateX(-50%); }.preview-phone > div { display: grid; height: 100%; align-content: start; gap: 8px; padding: 19px 7px 7px; background: linear-gradient(160deg, #f7fbff, #e6f0ff); border-radius: 10px; }.preview-phone i { width: 31px; height: 6px; background: #bccde7; border-radius: 5px; }.preview-phone b { height: 40px; background: linear-gradient(130deg, var(--solution-accent), #71a9ed); border-radius: 7px; }.preview-phone span { height: 7px; background: #d4e0f0; border-radius: 5px; }.preview-phone span:nth-of-type(2) { width: 65%; }.preview-phone em { height: 26px; margin-top: 4px; background: #e6eef8; border-radius: 7px; }
.solution-preview-phone .preview-window, .solution-preview-device .preview-window { right: 18px; left: 18px; height: 141px; opacity: .86; }.solution-preview-phone .preview-phone, .solution-preview-device .preview-phone { display: block; }.solution-preview-device .preview-phone { right: 18px; width: 108px; height: 182px; border-radius: 13px; transform: rotate(4deg); }.solution-preview-device .preview-phone > div { border-radius: 8px; }.solution-preview-analytics .preview-window { transform: rotate(-2deg); }.solution-preview-analytics .preview-chart { height: 78px; }.solution-preview-flow .preview-main { position: relative; }.solution-preview-flow .preview-chart { display: grid; height: 83px; place-items: center; background: transparent; }.solution-preview-flow .preview-chart::before { width: 78%; height: 4px; content: ""; background: linear-gradient(90deg, var(--solution-accent) 0 22%, #9bd9ca 22% 45%, #f2cf73 45% 68%, #8ab5ee 68%); border-radius: 4px; }.solution-preview-flow .preview-chart i { position: absolute; display: block; width: 12px; height: 12px; background: var(--solution-accent); border: 3px solid #fff; border-radius: 50%; box-shadow: 17px 0 0 #8ed4c0, 34px 0 0 #f0ce75, 51px 0 0 #8bb4eb; }.solution-preview-global .preview-window { background: linear-gradient(145deg, #f8fbff, #eaf3ff); }.solution-preview-global .preview-window::after { position: absolute; right: -30px; bottom: -36px; width: 130px; height: 130px; content: ""; border: 18px solid color-mix(in srgb, var(--solution-accent) 18%, #fff); border-radius: 50%; }.solution-preview-service .preview-window::after { position: absolute; right: 18px; bottom: 20px; width: 42px; height: 28px; content: ""; background: #65cdaa; border-radius: 12px 12px 4px 12px; box-shadow: -55px 11px 0 #91baf1; }

.solution-scenes-section {
  padding: 118px 0;
}

.solution-scenes-section .section-heading {
  margin-bottom: 40px;
}

.solution-scene-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.solution-scene-card {
  display: grid;
  grid-template-columns: 49px 1fr;
  min-height: 148px;
  align-items: start;
  gap: 21px;
  padding: 25px;
  background: #fff;
  border: 1px solid #e5eaf3;
  border-radius: 13px;
  transition: background .2s ease, border-color .2s ease;
}

.solution-scene-card:hover {
  background: color-mix(in srgb, var(--solution-accent-soft) 33%, #fff);
  border-color: color-mix(in srgb, var(--solution-accent) 28%, #e5eaf3);
}

.solution-scene-card i {
  display: grid;
  width: 49px;
  height: 49px;
  place-items: center;
  color: var(--solution-accent-dark);
  background: var(--solution-accent-soft);
  border-radius: 10px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.solution-scene-card h3 {
  margin: 3px 0 9px;
  color: #2f3d54;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0;
}

.solution-scene-card p {
  margin: 0;
  color: #7a8698;
  font-size: 12px;
  line-height: 1.7;
}

/* 定制方案适用场景：以彩色产品场景卡代替普通信息卡。 */
.solution-scene-grid.solution-scene-showcase {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.solution-scene-showcase .solution-showcase-scene {
  display: flex;
  min-height: 468px;
  flex-direction: column;
  gap: 0;
  padding: 38px 36px 0;
  overflow: hidden;
  background: linear-gradient(148deg, #e1f8f1, #d8f5ed);
  border: 0;
  border-radius: 26px;
  box-shadow: none;
}

.solution-scene-showcase .solution-showcase-scene:nth-child(3n + 2) { background: linear-gradient(148deg, #e4f5ff, #dceff9); }
.solution-scene-showcase .solution-showcase-scene:nth-child(3n) { background: linear-gradient(148deg, #fff1bf, #fff7df); }
.solution-scene-showcase .solution-showcase-scene:nth-child(4n) { background: linear-gradient(148deg, #eee9ff, #e5efff); }
.solution-scene-showcase .solution-showcase-scene:nth-child(5n) { background: linear-gradient(148deg, #ffe9ef, #fff0e3); }
.solution-scene-showcase .solution-showcase-scene:hover { background: linear-gradient(148deg, color-mix(in srgb, var(--solution-accent-soft) 75%, #fff), var(--solution-accent-soft)); border: 0; box-shadow: 0 22px 36px color-mix(in srgb, var(--solution-accent) 13%, transparent); transform: translateY(-5px); }
.solution-scene-showcase .solution-showcase-scene > i { width: auto; height: auto; padding: 0; place-items: start; color: color-mix(in srgb, var(--solution-accent-dark) 72%, #70809a); background: transparent; border-radius: 0; font-size: 12px; letter-spacing: .06em; }
.solution-scene-showcase .solution-showcase-scene > div:nth-child(2) { margin-top: 20px; }
.solution-scene-showcase .solution-showcase-scene h3 { margin: 0 0 19px; color: #17243a; font-size: clamp(24px, 2vw, 31px); font-weight: 700; line-height: 1.25; }
.solution-scene-showcase .solution-showcase-scene p { color: #43526a; font-size: 15px; line-height: 1.75; }
.solution-scene-preview { position: relative; height: 211px; margin: auto -7px 0; }.scene-app-window { position: absolute; right: 0; bottom: 0; left: 0; height: 178px; overflow: hidden; background: rgb(255 255 255 / 84%); border: 6px solid rgb(255 255 255 / 73%); border-radius: 17px 17px 0 0; box-shadow: 0 15px 28px rgb(48 77 132 / 12%); }.scene-window-bar { display: flex; height: 23px; align-items: center; gap: 4px; padding: 0 8px; background: #f7fbff; border-bottom: 1px solid #e5edf7; }.scene-window-bar i { width: 5px; height: 5px; background: #f09992; border-radius: 50%; }.scene-window-bar i:nth-child(2) { background: #f1d071; }.scene-window-bar i:nth-child(3) { background: #6bcfab; }.scene-window-bar b { width: 40px; height: 5px; margin-left: 4px; background: #dae7f5; border-radius: 4px; }.scene-window-body { display: grid; grid-template-columns: 30px 1fr; height: calc(100% - 23px); }.scene-window-body aside { display: grid; align-content: start; gap: 12px; padding: 14px 8px; background: #f4f8fc; }.scene-window-body aside i { height: 5px; background: #d3e0ef; border-radius: 4px; }.scene-window-body aside i:first-child { background: var(--solution-accent); }.scene-window-body section { padding: 13px; }.scene-preview-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.scene-preview-top i { height: 28px; background: #edf4fc; border-radius: 5px; }.scene-preview-top i:first-child { background: color-mix(in srgb, var(--solution-accent) 18%, #e8f2ff); }.scene-preview-chart { display: flex; height: 58px; align-items: end; justify-content: space-around; padding: 7px 10px 0; margin-top: 8px; background: #f8fbff; border-radius: 6px; }.scene-preview-chart i { width: 9%; height: 34%; background: #b6d1f4; border-radius: 3px 3px 0 0; }.scene-preview-chart i:nth-child(2) { height: 51%; }.scene-preview-chart i:nth-child(3) { height: 41%; }.scene-preview-chart i:nth-child(4) { height: 84%; background: var(--solution-accent); }.scene-preview-chart i:nth-child(5) { height: 66%; }.scene-preview-list { display: grid; gap: 5px; margin-top: 9px; }.scene-preview-list i { height: 5px; background: #e0eaf5; border-radius: 4px; }.scene-preview-list i:nth-child(2) { width: 74%; }.scene-preview-list i:nth-child(3) { width: 51%; }
.scene-preview-phone { position: absolute; right: 25px; bottom: -6px; z-index: 2; display: none; width: 92px; height: 171px; padding: 6px; background: #1e3357; border: 2px solid #385987; border-radius: 16px; box-shadow: 0 12px 22px rgb(35 59 104 / 24%); }.scene-preview-phone::before { position: absolute; top: 5px; left: 50%; width: 31px; height: 7px; content: ""; background: #1e3357; border-radius: 0 0 7px 7px; transform: translateX(-50%); }.scene-preview-phone i { display: block; width: 31px; height: 7px; margin: 20px 7px 10px; background: #b8cce8; border-radius: 5px; }.scene-preview-phone b { display: block; height: 43px; margin: 0 7px 10px; background: linear-gradient(135deg, var(--solution-accent), #74a9ef); border-radius: 8px; }.scene-preview-phone span { display: block; height: 7px; margin: 0 7px 7px; background: #d5e1f0; border-radius: 5px; }.scene-preview-phone span:last-child { width: 60%; }.scene-preview-node { position: absolute; z-index: 2; display: none; width: 35px; height: 35px; background: linear-gradient(135deg, #6ecfb1, #41a9d5); border: 5px solid rgb(255 255 255 / 75%); border-radius: 11px; box-shadow: 0 9px 16px rgb(47 98 142 / 16%); }.scene-preview-node::after { position: absolute; inset: 8px; content: ""; background: #fff; border-radius: 4px; }.node-one { right: 11px; top: 7px; }.node-two { bottom: 29px; left: 9px; }
.scene-preview-device .scene-preview-phone, .scene-preview-iot .scene-preview-phone, .scene-preview-commerce .scene-preview-phone, .scene-preview-local .scene-preview-phone { display: block; }.scene-preview-device .scene-app-window, .scene-preview-iot .scene-app-window { right: 20px; left: 20px; height: 145px; opacity: .84; }.scene-preview-device .scene-preview-phone { width: 111px; height: 180px; right: 14px; border-radius: 13px; transform: rotate(4deg); }.scene-preview-iot .scene-preview-phone { right: 18px; width: 104px; height: 182px; transform: rotate(4deg); }.scene-preview-media .scene-app-window { transform: rotate(-2deg); }.scene-preview-media .scene-preview-node, .scene-preview-platform .scene-preview-node, .scene-preview-office .scene-preview-node { display: block; }.scene-preview-office .scene-app-window { right: 17px; left: 17px; }.scene-preview-project .scene-preview-chart { height: 73px; }.scene-preview-growth .scene-preview-chart { height: 74px; }.scene-preview-global .scene-app-window::after { position: absolute; right: -34px; bottom: -36px; width: 126px; height: 126px; content: ""; border: 17px solid color-mix(in srgb, var(--solution-accent) 18%, #fff); border-radius: 50%; }.scene-preview-factory .scene-preview-chart i { background: #efa96c; }.scene-preview-factory .scene-preview-chart i:nth-child(4) { background: #e37558; }

/* 场景插画固定紧接说明文字，避免中部留白；不同场景使用不同的业务视觉。 */
.solution-scene-showcase .solution-showcase-scene { position: relative; min-height: 505px; }
.solution-scene-showcase .solution-showcase-scene > div:nth-child(2) { position: relative; z-index: 2; }
.solution-scene-showcase .solution-scene-preview { position: absolute; top: 230px; right: 36px; left: 36px; height: 248px; margin: 0; }
.solution-scene-showcase .scene-app-window { height: 212px; border-width: 7px; border-radius: 20px; box-shadow: 0 20px 36px rgb(48 77 132 / 15%); }
.solution-scene-showcase .scene-window-body { grid-template-columns: 37px 1fr; }.solution-scene-showcase .scene-window-body aside { gap: 14px; padding: 17px 10px; }.solution-scene-showcase .scene-window-body section { padding: 16px; }.solution-scene-showcase .scene-preview-top i { height: 34px; }.solution-scene-showcase .scene-preview-chart { height: 72px; margin-top: 10px; }.solution-scene-showcase .scene-preview-list { margin-top: 11px; }
.solution-scene-showcase .scene-preview-phone { right: 20px; width: 110px; height: 202px; padding: 7px; border-radius: 19px; }.solution-scene-showcase .scene-preview-phone i { margin-top: 24px; }.solution-scene-showcase .scene-preview-phone b { height: 54px; }.solution-scene-showcase .scene-preview-device .scene-app-window, .solution-scene-showcase .scene-preview-iot .scene-app-window { right: 15px; left: 15px; height: 172px; }.solution-scene-showcase .scene-preview-device .scene-preview-phone { width: 126px; height: 210px; right: 10px; }.solution-scene-showcase .scene-preview-iot .scene-preview-phone { width: 117px; height: 212px; right: 12px; }.solution-scene-showcase .scene-preview-node { width: 43px; height: 43px; border-width: 6px; }.solution-scene-showcase .node-one { top: 4px; right: 3px; }.solution-scene-showcase .node-two { bottom: 31px; left: -5px; }

/* APP、小程序、软件定制页：使用 CDN 上的完整场景视觉，替换原有线框插画。 */
body[data-solution-slug="app-development"] .solution-scene-showcase .solution-showcase-scene,
body[data-solution-slug="mini-program"] .solution-scene-showcase .solution-showcase-scene,
body[data-solution-slug="software-development"] .solution-scene-showcase .solution-showcase-scene {
  min-height: 500px;
}

body[data-solution-slug="app-development"] .solution-scene-showcase .solution-scene-image-artwork,
body[data-solution-slug="mini-program"] .solution-scene-showcase .solution-scene-image-artwork,
body[data-solution-slug="software-development"] .solution-scene-showcase .solution-scene-image-artwork {
  position: absolute;
  right: 28px;
  bottom: 22px;
  left: 28px;
  height: 205px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 16px 30px rgb(48 77 132 / 11%);
}

body[data-solution-slug="app-development"] .solution-scene-image-artwork img,
body[data-solution-slug="mini-program"] .solution-scene-image-artwork img,
body[data-solution-slug="software-development"] .solution-scene-image-artwork img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 三个定制页的场景直接展示成品图片，不使用外层彩色卡片或编号。 */
.solution-scene-grid.solution-scene-image-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 32px;
  align-items: start;
}

.solution-scene-image-grid .solution-scene-image-item {
  min-width: 0;
  margin: 0;
}

.solution-scene-image-grid .solution-scene-image-item > img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  background: #edf3f8;
  border-radius: 2px;
  box-shadow: 0 14px 28px rgb(34 58 91 / 10%);
  transition: transform .28s ease, box-shadow .28s ease;
}

/* 保留每张完整插画的构图重点，避免右侧文案或设备被裁掉。 */
.solution-scene-image-grid .scene-image-1 > img,
.solution-scene-image-grid .scene-image-4 > img,
.solution-scene-image-grid .scene-image-7 > img { object-position: center center; }
.solution-scene-image-grid .scene-image-2 > img,
.solution-scene-image-grid .scene-image-5 > img,
.solution-scene-image-grid .scene-image-8 > img { object-position: 52% center; }
.solution-scene-image-grid .scene-image-3 > img,
.solution-scene-image-grid .scene-image-6 > img,
.solution-scene-image-grid .scene-image-9 > img { object-position: 48% center; }

.solution-scene-image-grid .solution-scene-image-item figcaption {
  padding: 17px 2px 0;
}

.solution-scene-image-grid .solution-scene-image-item h3 {
  margin: 0 0 8px;
  color: #17243a;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}

.solution-scene-image-grid .solution-scene-image-item p {
  margin: 0;
  color: #68768a;
  font-size: 14px;
  line-height: 1.7;
}

.solution-scene-image-grid .solution-scene-image-item:hover > img {
  transform: translateY(-4px);
  box-shadow: 0 20px 34px rgb(34 58 91 / 16%);
}

.solution-scene-image-grid .solution-scene-image-item figcaption {
  position: relative;
}

.solution-scene-image-grid .solution-scene-image-item figcaption::before {
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 13px;
  content: "";
  background: var(--solution-accent);
  border-radius: 2px;
}

/* 电商 / 本地生活：手机交易入口叠加经营数据。 */
.solution-scene-showcase .scene-preview-commerce .scene-app-window,
.solution-scene-showcase .scene-preview-local .scene-app-window { background: linear-gradient(145deg, #fff, #eef7ff); }
.solution-scene-showcase .scene-preview-commerce .scene-preview-phone b { background: linear-gradient(135deg, #fa936c, #ee6355); }
.solution-scene-showcase .scene-preview-local .scene-preview-phone b { background: linear-gradient(135deg, #38b4a0, #4a8fea); }
.solution-scene-showcase .scene-preview-commerce .scene-preview-chart i { background: #f5b17b; }.solution-scene-showcase .scene-preview-commerce .scene-preview-chart i:nth-child(4) { background: #ed745d; }

/* 物联网 / 智慧硬件：实体终端素材与连接节点。 */
.solution-scene-showcase .scene-preview-device .scene-app-window,
.solution-scene-showcase .scene-preview-iot .scene-app-window { background: #eaf3ff url("assets/iot-smart-terminal.png") center / cover no-repeat; border-color: rgb(255 255 255 / 86%); }
.solution-scene-showcase .scene-preview-device .scene-app-window > *,
.solution-scene-showcase .scene-preview-iot .scene-app-window > * { opacity: 0; }
.solution-scene-showcase .scene-preview-device::before,
.solution-scene-showcase .scene-preview-iot::before { position: absolute; top: 45px; left: 11px; z-index: 3; width: 86px; height: 86px; content: ""; background: radial-gradient(circle, #69d5b5 0 11%, transparent 12%), radial-gradient(circle, #5595ec 0 11%, transparent 12%), radial-gradient(circle, #58c9d5 0 11%, transparent 12%); background-position: 0 38px, 38px 0, 66px 56px; background-repeat: no-repeat; border: 1px dashed #82b9e7; border-radius: 50%; transform: rotate(-20deg); }

/* 协同 / 项目：突出流程连接，而不是复用经营看板。 */
.solution-scene-showcase .scene-preview-office .scene-app-window,
.solution-scene-showcase .scene-preview-project .scene-app-window { background: linear-gradient(150deg, #fff, #edf5ff); }
.solution-scene-showcase .scene-preview-office .scene-app-window::after,
.solution-scene-showcase .scene-preview-project .scene-app-window::after { position: absolute; right: 19px; bottom: 23px; left: 53px; height: 49px; content: ""; background: radial-gradient(circle at 8% 50%, #5f9df1 0 7px, transparent 8px), radial-gradient(circle at 38% 50%, #5ed0ad 0 7px, transparent 8px), radial-gradient(circle at 68% 50%, #f2c870 0 7px, transparent 8px), radial-gradient(circle at 96% 50%, #8b83ed 0 7px, transparent 8px), linear-gradient(#a8c8eb, #a8c8eb) center / 88% 2px no-repeat; }
.solution-scene-showcase .scene-preview-office .scene-preview-node,
.solution-scene-showcase .scene-preview-project .scene-preview-node { display: block; }

/* 内容直播：突出播放窗口与互动标签。 */
.solution-scene-showcase .scene-preview-media .scene-app-window { background: linear-gradient(135deg, #2e5b9e, #7c80db); }.solution-scene-showcase .scene-preview-media .scene-app-window > * { opacity: .66; }.solution-scene-showcase .scene-preview-media .scene-app-window::after { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; content: ""; background: rgb(255 255 255 / 92%); border-radius: 50%; transform: translate(-50%, -50%); clip-path: polygon(35% 22%, 35% 78%, 78% 50%); }.solution-scene-showcase .scene-preview-media .scene-preview-node { display: block; background: linear-gradient(135deg, #f08a8c, #f4b07a); }

/* 出海 / 平台：突出全球连接和多节点能力。 */
.solution-scene-showcase .scene-preview-global .scene-app-window,
.solution-scene-showcase .scene-preview-platform .scene-app-window { background: linear-gradient(145deg, #eef4ff, #fff); }.solution-scene-showcase .scene-preview-global .scene-app-window::before,
.solution-scene-showcase .scene-preview-platform .scene-app-window::before { position: absolute; right: 29px; bottom: 18px; width: 102px; height: 102px; content: ""; background: repeating-radial-gradient(circle at 50% 50%, transparent 0 15px, rgb(93 151 230 / 26%) 16px 17px), repeating-linear-gradient(90deg, transparent 0 22px, rgb(93 151 230 / 20%) 23px 24px); border: 2px solid #79a7e8; border-radius: 50%; }.solution-scene-showcase .scene-preview-global .scene-preview-node,
.solution-scene-showcase .scene-preview-platform .scene-preview-node { display: block; }

/* 制造 / 服务 / 增长：分别采用产线、服务卡、增长曲线视觉。 */
.solution-scene-showcase .scene-preview-factory .scene-app-window::after { position: absolute; right: 18px; bottom: 20px; left: 52px; height: 57px; content: ""; background: linear-gradient(90deg, #ed9c67 0 18%, transparent 18% 25%, #f5bf6a 25% 44%, transparent 44% 51%, #e77d5b 51% 70%, transparent 70% 77%, #7a9fe0 77%); clip-path: polygon(0 100%, 0 38%, 14% 38%, 14% 0, 30% 0, 30% 38%, 44% 38%, 44% 14%, 61% 14%, 61% 38%, 78% 38%, 78% 2%, 93% 2%, 93% 38%, 100% 38%, 100% 100%); }.solution-scene-showcase .scene-preview-service .scene-app-window::after { position: absolute; right: 20px; bottom: 19px; width: 74px; height: 46px; content: ""; background: #61c7a5; border-radius: 18px 18px 5px 18px; box-shadow: -88px 18px 0 #8eb8ed; }.solution-scene-showcase .scene-preview-growth .scene-preview-chart { background: linear-gradient(160deg, #f6fbff, #e7f3ff); }.solution-scene-showcase .scene-preview-growth .scene-preview-chart::after { position: absolute; right: 21px; bottom: 23px; left: 61px; height: 42px; content: ""; border-bottom: 3px solid #5b9aec; border-radius: 50% 50% 0 0; transform: skewY(-20deg); }

/* 每个场景采用独立构图，避免重复的“后台窗口 + 柱状图”视觉。 */
.solution-scene-showcase .scene-preview-retail .scene-app-window,
.solution-scene-showcase .scene-preview-marketplace .scene-app-window,
.solution-scene-showcase .scene-preview-ecommerce .scene-app-window { background: #fff; }.solution-scene-showcase .scene-preview-retail .scene-window-body,
.solution-scene-showcase .scene-preview-marketplace .scene-window-body,
.solution-scene-showcase .scene-preview-ecommerce .scene-window-body { display: block; padding: 13px; }.solution-scene-showcase .scene-preview-retail aside,
.solution-scene-showcase .scene-preview-marketplace aside,
.solution-scene-showcase .scene-preview-ecommerce aside { display: none; }.solution-scene-showcase .scene-preview-retail section,
.solution-scene-showcase .scene-preview-marketplace section,
.solution-scene-showcase .scene-preview-ecommerce section { padding: 0; }.solution-scene-showcase .scene-preview-retail .scene-preview-top,
.solution-scene-showcase .scene-preview-marketplace .scene-preview-top,
.solution-scene-showcase .scene-preview-ecommerce .scene-preview-top { grid-template-columns: repeat(4, 1fr); }.solution-scene-showcase .scene-preview-retail .scene-preview-top i,
.solution-scene-showcase .scene-preview-marketplace .scene-preview-top i,
.solution-scene-showcase .scene-preview-ecommerce .scene-preview-top i { height: 45px; background: linear-gradient(135deg, #ffd98c, #ee9275); }.solution-scene-showcase .scene-preview-retail .scene-preview-chart,
.solution-scene-showcase .scene-preview-marketplace .scene-preview-chart,
.solution-scene-showcase .scene-preview-ecommerce .scene-preview-chart { display: grid; grid-template-columns: repeat(4, 1fr); height: 88px; padding: 10px; background: transparent; }.solution-scene-showcase .scene-preview-retail .scene-preview-chart i,
.solution-scene-showcase .scene-preview-marketplace .scene-preview-chart i,
.solution-scene-showcase .scene-preview-ecommerce .scene-preview-chart i { width: auto; height: auto; background: linear-gradient(145deg, #f8fbff, #dfeeff); border-radius: 7px; }.solution-scene-showcase .scene-preview-retail .scene-preview-chart i:nth-child(2),
.solution-scene-showcase .scene-preview-marketplace .scene-preview-chart i:nth-child(2),
.solution-scene-showcase .scene-preview-ecommerce .scene-preview-chart i:nth-child(2) { background: linear-gradient(145deg, #d6f5e8, #66cba8); }

.solution-scene-showcase .scene-preview-education .scene-app-window { background: linear-gradient(145deg, #fff, #eef3ff); }.solution-scene-showcase .scene-preview-education .scene-app-window::after { position: absolute; right: 26px; bottom: 26px; left: 58px; height: 82px; content: ""; background: linear-gradient(90deg, #5d91eb 0 29%, transparent 29% 35%, #7fcfb8 35% 64%, transparent 64% 70%, #f3c66a 70%); clip-path: polygon(0 22%, 33% 0, 66% 22%, 100% 0, 100% 74%, 66% 100%, 33% 74%, 0 100%); }.solution-scene-showcase .scene-preview-education .scene-preview-phone { display: block; right: 13px; transform: rotate(7deg); }

.solution-scene-showcase .scene-preview-enterprise .scene-app-window,
.solution-scene-showcase .scene-preview-group .scene-app-window { background: #f8fbff; }.solution-scene-showcase .scene-preview-enterprise .scene-window-body,
.solution-scene-showcase .scene-preview-group .scene-window-body { display: block; position: relative; padding: 16px; }.solution-scene-showcase .scene-preview-enterprise aside,
.solution-scene-showcase .scene-preview-group aside { display: none; }.solution-scene-showcase .scene-preview-enterprise section,
.solution-scene-showcase .scene-preview-group section { padding: 0; }.solution-scene-showcase .scene-preview-enterprise .scene-preview-top,
.solution-scene-showcase .scene-preview-group .scene-preview-top { grid-template-columns: 1fr; }.solution-scene-showcase .scene-preview-enterprise .scene-preview-top i,
.solution-scene-showcase .scene-preview-group .scene-preview-top i { display: none; }.solution-scene-showcase .scene-preview-enterprise .scene-preview-top i:first-child,
.solution-scene-showcase .scene-preview-group .scene-preview-top i:first-child { display: block; width: 54px; height: 26px; margin: auto; background: #5f92ea; }.solution-scene-showcase .scene-preview-enterprise .scene-preview-chart,
.solution-scene-showcase .scene-preview-group .scene-preview-chart { position: relative; display: block; height: 118px; margin: 0; background: transparent; }.solution-scene-showcase .scene-preview-enterprise .scene-preview-chart::before,
.solution-scene-showcase .scene-preview-group .scene-preview-chart::before { position: absolute; top: 23px; right: 18%; left: 18%; height: 2px; content: ""; background: #a6c4e8; }.solution-scene-showcase .scene-preview-enterprise .scene-preview-chart i,
.solution-scene-showcase .scene-preview-group .scene-preview-chart i { position: absolute; top: 16px; width: 15px; height: 15px; background: #65c9af; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #91cbe9; }.solution-scene-showcase .scene-preview-enterprise .scene-preview-chart i:nth-child(1),
.solution-scene-showcase .scene-preview-group .scene-preview-chart i:nth-child(1) { left: 18%; }.solution-scene-showcase .scene-preview-enterprise .scene-preview-chart i:nth-child(2),
.solution-scene-showcase .scene-preview-group .scene-preview-chart i:nth-child(2) { left: 38%; }.solution-scene-showcase .scene-preview-enterprise .scene-preview-chart i:nth-child(3),
.solution-scene-showcase .scene-preview-group .scene-preview-chart i:nth-child(3) { left: 58%; }.solution-scene-showcase .scene-preview-enterprise .scene-preview-chart i:nth-child(4),
.solution-scene-showcase .scene-preview-group .scene-preview-chart i:nth-child(4) { left: 78%; }.solution-scene-showcase .scene-preview-enterprise .scene-preview-chart i:nth-child(5),
.solution-scene-showcase .scene-preview-group .scene-preview-chart i:nth-child(5) { top: 70px; left: 48%; background: #efc96f; }.solution-scene-showcase .scene-preview-enterprise .scene-preview-list,
.solution-scene-showcase .scene-preview-group .scene-preview-list { display: none; }

.solution-scene-showcase .scene-preview-engineering .scene-app-window { background: #fafdff; }.solution-scene-showcase .scene-preview-engineering .scene-window-body { display: block; padding: 21px; }.solution-scene-showcase .scene-preview-engineering aside { display: none; }.solution-scene-showcase .scene-preview-engineering section { padding: 0; }.solution-scene-showcase .scene-preview-engineering .scene-preview-top { grid-template-columns: repeat(5, 1fr); }.solution-scene-showcase .scene-preview-engineering .scene-preview-top i { height: 10px; background: #dbe8f8; }.solution-scene-showcase .scene-preview-engineering .scene-preview-chart { display: grid; grid-template-columns: 90px 1fr; gap: 10px; height: 107px; padding: 0; background: repeating-linear-gradient(0deg, transparent 0 21px, #e5edf7 22px 23px); }.solution-scene-showcase .scene-preview-engineering .scene-preview-chart::before { content: "设计\A研发\A测试\A交付"; white-space: pre; color: #6f819a; font-size: 7px; line-height: 23px; }.solution-scene-showcase .scene-preview-engineering .scene-preview-chart i { width: 65%; height: 11px; align-self: center; background: #60a4f1; border-radius: 5px; }.solution-scene-showcase .scene-preview-engineering .scene-preview-chart i:nth-child(2) { width: 83%; background: #63c9ad; }.solution-scene-showcase .scene-preview-engineering .scene-preview-chart i:nth-child(3) { width: 48%; background: #f0c96c; }.solution-scene-showcase .scene-preview-engineering .scene-preview-chart i:nth-child(4) { width: 73%; background: #7d92ea; }

.solution-scene-showcase .scene-preview-crm .scene-app-window { background: #fff; }.solution-scene-showcase .scene-preview-crm .scene-window-body { display: block; padding: 19px; }.solution-scene-showcase .scene-preview-crm aside { display: none; }.solution-scene-showcase .scene-preview-crm section { padding: 0; }.solution-scene-showcase .scene-preview-crm .scene-preview-top { grid-template-columns: repeat(3, 1fr); }.solution-scene-showcase .scene-preview-crm .scene-preview-top i { height: 27px; background: #f1f6fc; }.solution-scene-showcase .scene-preview-crm .scene-preview-chart { display: flex; gap: 7px; height: 105px; padding: 8px; background: transparent; }.solution-scene-showcase .scene-preview-crm .scene-preview-chart i { width: 25%; height: 100%; background: linear-gradient(#edf3fb 0 25%, #77aaf0 25% 45%, #edf3fb 45% 53%, #68c7a8 53% 73%, #edf3fb 73%); border-radius: 5px; }.solution-scene-showcase .scene-preview-crm .scene-preview-chart i:nth-child(2) { background: linear-gradient(#edf3fb 0 16%, #f3c76c 16% 40%, #edf3fb 40% 48%, #6d9ce5 48% 73%, #edf3fb 73%); }.solution-scene-showcase .scene-preview-crm .scene-preview-chart i:nth-child(n+3) { display: none; }

.solution-scene-showcase .scene-preview-manufacturing .scene-app-window { background: linear-gradient(145deg, #fff, #fff6e1); }.solution-scene-showcase .scene-preview-manufacturing .scene-window-body { display: block; padding: 20px; }.solution-scene-showcase .scene-preview-manufacturing aside { display: none; }.solution-scene-showcase .scene-preview-manufacturing section { padding: 0; }.solution-scene-showcase .scene-preview-manufacturing .scene-preview-top { grid-template-columns: repeat(5, 1fr); }.solution-scene-showcase .scene-preview-manufacturing .scene-preview-top i { height: 20px; background: #e9eef7; }.solution-scene-showcase .scene-preview-manufacturing .scene-preview-chart { position: relative; display: block; height: 112px; padding: 0; background: transparent; }.solution-scene-showcase .scene-preview-manufacturing .scene-preview-chart::after { position: absolute; right: 0; bottom: 0; left: 0; height: 80px; content: ""; background: linear-gradient(90deg, #e59161 0 19%, transparent 19% 23%, #f0b967 23% 43%, transparent 43% 47%, #5d9bec 47% 67%, transparent 67% 71%, #6ec7aa 71% 91%); clip-path: polygon(0 100%, 0 42%, 10% 42%, 10% 8%, 25% 8%, 25% 42%, 34% 42%, 34% 25%, 49% 25%, 49% 42%, 58% 42%, 58% 0, 74% 0, 74% 42%, 84% 42%, 84% 15%, 100% 15%, 100% 100%); }

.solution-scene-showcase .scene-preview-upgrade .scene-app-window { background: linear-gradient(145deg, #fff, #edf3ff); }.solution-scene-showcase .scene-preview-upgrade .scene-window-body { display: grid; grid-template-columns: 1fr 30px 1fr; padding: 24px; gap: 10px; }.solution-scene-showcase .scene-preview-upgrade aside { display: none; }.solution-scene-showcase .scene-preview-upgrade section { display: none; }.solution-scene-showcase .scene-preview-upgrade .scene-window-body::before,
.solution-scene-showcase .scene-preview-upgrade .scene-window-body::after { height: 104px; content: "旧系统\A\A数据迁移"; white-space: pre; padding: 13px; color: #8494aa; background: #edf1f6; border-radius: 9px; font-size: 9px; line-height: 1.65; }.solution-scene-showcase .scene-preview-upgrade .scene-window-body::after { content: "新系统\A\A平滑升级"; color: #3d6fc1; background: #e4f3ff; }.solution-scene-showcase .scene-preview-upgrade .scene-window-body { position: relative; }.solution-scene-showcase .scene-preview-upgrade .scene-window-body::selection { background: transparent; }

.solution-scene-showcase .scene-preview-custom .scene-app-window { background: linear-gradient(145deg, #fff, #f0ecff); }.solution-scene-showcase .scene-preview-custom .scene-app-window::after { position: absolute; right: 19px; bottom: 18px; left: 19px; height: 98px; content: "+"; display: grid; place-items: center; color: #846eea; background: linear-gradient(135deg, #e8ddff, #d3f4f2); border: 2px dashed #9f8bf0; border-radius: 14px; font-size: 63px; font-weight: 200; }

/* 场景专属插画：不复用任何后台看板，每张卡以对应业务对象构图。 */
.solution-scene-showcase .solution-showcase-scene { min-height: 530px; }
.solution-scene-artwork { position: absolute; top: 216px; right: 27px; bottom: 0; left: 27px; overflow: hidden; }.scene-art { position: absolute; right: 0; bottom: 0; left: 0; height: 278px; color: #4b74b2; font-size: 8px; transform-origin: bottom center; animation: scene-art-float 5.5s ease-in-out infinite; }.solution-showcase-scene:nth-child(3n + 2) .scene-art { animation-delay: -1.8s; }.solution-showcase-scene:nth-child(3n) .scene-art { animation-delay: -3.6s; }.solution-showcase-scene:hover .scene-art { animation-play-state: paused; transform: translateY(-7px) scale(1.025); }.scene-art::after { position: absolute; right: 15%; bottom: 5px; left: 15%; height: 25px; content: ""; background: radial-gradient(ellipse, rgb(71 102 158 / 18%), transparent 68%); filter: blur(8px); }.art-label { display: none; }
@keyframes scene-art-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }


/* 商城和电商 */
.art-store { overflow: hidden; background: linear-gradient(155deg, rgb(255 255 255 / 70%), rgb(227 243 255 / 70%)); border: 6px solid rgb(255 255 255 / 78%); border-radius: 17px 17px 0 0; }.art-awning { height: 27px; background: repeating-linear-gradient(90deg, #f69b77 0 20px, #fff6e8 20px 40px); }.art-shelf { display: flex; position: absolute; top: 61px; right: 23px; left: 23px; height: 76px; align-items: end; justify-content: space-around; border-bottom: 6px solid #79a0d8; }.art-shelf i { width: 31px; height: 47px; background: linear-gradient(135deg, #f4bd71, #f08471); border-radius: 9px 9px 3px 3px; box-shadow: 43px 0 0 #65c4ab, 86px 0 0 #7c9ced, 129px 0 0 #f1ca6e; }.art-cart { position: absolute; right: 28px; bottom: 33px; width: 73px; height: 41px; border: 5px solid #4f82df; border-top: 0; border-radius: 0 0 11px 11px; transform: skewX(-12deg); }.art-cart b { position: absolute; top: -10px; left: -17px; width: 27px; height: 5px; background: #4f82df; }.art-cart i { position: absolute; bottom: -13px; width: 12px; height: 12px; background: #4f82df; border-radius: 50%; }.art-cart i:nth-child(2) { left: 5px; }.art-cart i:nth-child(3) { right: 4px; }
.art-market { display: grid; place-items: center; }.art-phone-shop { position: relative; z-index: 2; display: grid; gap: 9px; width: 132px; height: 212px; padding: 29px 13px 12px; color: #4d68a2; background: #fff; border: 5px solid #5d83ce; border-radius: 19px; box-shadow: 0 17px 31px rgb(48 77 132 / 18%); }.art-phone-shop::before { position: absolute; top: 5px; left: 50%; width: 46px; height: 8px; content: ""; background: #5d83ce; border-radius: 0 0 6px 6px; transform: translateX(-50%); }.art-phone-shop b { font-size: 10px; }.art-phone-shop i { background: linear-gradient(135deg, #ffc56d, #f49470); border-radius: 7px; }.art-phone-shop i:nth-of-type(2) { background: linear-gradient(135deg, #8bcae8, #6f9cec); }.art-phone-shop em { padding: 7px; color: #fff; background: #5788e8; border-radius: 7px; font-style: normal; text-align: center; }.art-bag { position: absolute; right: 19px; bottom: 43px; z-index: 3; display: grid; width: 54px; height: 54px; place-items: center; color: #fff; background: #65c9ad; border-radius: 14px; box-shadow: 0 10px 18px rgb(56 145 117 / 20%); font-size: 28px; }.art-market .art-label { bottom: 4px; }
.art-commerce { overflow: hidden; background: rgb(255 255 255 / 72%); border: 6px solid rgb(255 255 255 / 78%); border-radius: 17px 17px 0 0; }.art-order { position: absolute; top: 25px; left: 24px; width: 117px; padding: 11px; background: #f8fbff; border-radius: 10px; box-shadow: 0 6px 13px rgb(51 84 134 / 10%); }.art-order b { display: block; color: #4a638b; }.art-order i { display: block; height: 6px; margin-top: 7px; background: #d9e6f5; border-radius: 5px; }.art-order i:nth-of-type(2) { width: 72%; }.art-box { position: absolute; right: 28px; top: 48px; width: 68px; height: 58px; background: #eaa365; border-radius: 4px; transform: rotate(-7deg); }.art-box::before { position: absolute; inset: 0; content: ""; background: linear-gradient(45deg, transparent 48%, #f8cc8d 49% 52%, transparent 53%), linear-gradient(-45deg, transparent 48%, #f8cc8d 49% 52%, transparent 53%); }.art-route { position: absolute; right: 25px; bottom: 50px; left: 25px; display: flex; align-items: center; justify-content: space-between; height: 35px; border-top: 3px dashed #77a4e4; }.art-route i { width: 18px; height: 18px; background: #60c7a6; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #77a4e4; }.art-route i:nth-child(2) { background: #f0bf69; }.art-route i:nth-child(3) { background: #7697ea; }

/* 硬件、教育、办公 */
.art-device { overflow: hidden; background: linear-gradient(145deg, #eaf5ff, #fff); border-radius: 18px 18px 0 0; }.art-device img { position: absolute; top: -11px; left: 50%; width: 217px; height: 217px; object-fit: cover; border-radius: 21px; transform: translateX(-50%); }.art-control { position: absolute; right: 8px; bottom: 37px; z-index: 2; display: grid; grid-template-columns: 23px 1fr; column-gap: 6px; padding: 8px 9px; color: #556d8c; background: rgb(255 255 255 / 92%); border-radius: 9px; box-shadow: 0 8px 18px rgb(47 85 134 / 13%); }.art-control i { grid-row: 1 / 3; width: 21px; height: 21px; background: #62c9aa; border-radius: 6px; }.art-control b { font-size: 8px; }.art-control span { color: #49a889; font-size: 7px; }.art-signal { position: absolute; top: 23px; left: 16px; width: 49px; height: 49px; border: 2px solid #72a7e8; border-radius: 50%; }.art-signal i { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; background: #63c9aa; border-radius: 50%; transform: translate(-50%, -50%); }.art-signal i:nth-child(2) { width: 23px; height: 23px; background: transparent; border: 2px solid #72a7e8; }.art-signal i:nth-child(3) { width: 39px; height: 39px; background: transparent; border: 2px solid #72a7e8; }
.art-learning { overflow: hidden; background: linear-gradient(145deg, #fff, #edf4ff); border: 6px solid rgb(255 255 255 / 78%); border-radius: 17px 17px 0 0; }.art-course { position: absolute; top: 24px; left: 25px; width: 136px; padding: 13px; background: #fff; border-radius: 11px; box-shadow: 0 8px 17px rgb(47 85 134 / 10%); }.art-course b { color: #506889; font-size: 9px; }.art-course i { display: block; height: 7px; margin-top: 9px; background: #d7e4f5; border-radius: 5px; }.art-course i:nth-of-type(2) { width: 71%; }.art-course i:nth-of-type(3) { width: 52%; }.art-course span { display: inline-block; margin-top: 10px; padding: 5px 7px; color: #fff; background: #65a0ed; border-radius: 6px; }.art-play { position: absolute; right: 24px; top: 64px; display: grid; width: 61px; height: 61px; place-items: center; color: #fff; background: #72cbb5; border-radius: 50%; box-shadow: 0 10px 18px rgb(68 160 132 / 20%); font-size: 23px; }.art-book { position: absolute; left: 53px; bottom: 34px; width: 103px; height: 58px; background: linear-gradient(90deg, #6e92e7 0 49%, #90b1ed 50%); border-radius: 5px 12px 12px 5px; transform: skewY(-8deg); }.art-book i { position: absolute; top: 10px; width: 32px; height: 4px; background: rgb(255 255 255 / 72%); border-radius: 4px; }.art-book i:first-child { left: 10px; }.art-book i:last-child { right: 10px; }
.art-org, .art-group { display: grid; place-items: start center; padding-top: 28px; }.art-org-root, .art-group-hub { position: relative; z-index: 2; padding: 9px 20px; color: #fff; background: #6295e8; border-radius: 9px; box-shadow: 0 8px 18px rgb(61 112 193 / 20%); }.art-org-line { position: absolute; top: 74px; width: 68%; height: 34px; border-top: 2px solid #8fb5e6; border-right: 2px solid #8fb5e6; border-left: 2px solid #8fb5e6; }.art-org-nodes { position: absolute; top: 102px; display: flex; gap: 16px; }.art-org-nodes b { padding: 8px 10px; color: #5b7498; background: #fff; border-radius: 8px; box-shadow: 0 7px 15px rgb(49 86 136 / 12%); }.art-kanban { overflow: hidden; padding: 16px; background: #fff; border: 6px solid rgb(255 255 255 / 78%); border-radius: 17px 17px 0 0; }.art-kanban-head { display: flex; gap: 7px; }.art-kanban-head i { width: 31%; height: 9px; background: #dbe7f5; border-radius: 5px; }.art-kanban-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }.art-kanban-cols b { display: grid; align-content: start; gap: 7px; min-height: 127px; padding: 8px; background: #f1f6fc; border-radius: 7px; }.art-kanban-cols i { height: 27px; background: #89b3ef; border-radius: 5px; }.art-kanban-cols b:nth-child(2) i { background: #68c7ac; }.art-kanban-cols b:nth-child(3) i { background: #f2c66d; }

/* 直播、地图、物联网、全球 */
.art-video { overflow: hidden; background: #253f73; border: 6px solid rgb(255 255 255 / 68%); border-radius: 17px 17px 0 0; }.art-video-screen { position: absolute; inset: 23px 22px 42px; background: linear-gradient(145deg, #6a98e9, #806fd5); border-radius: 11px; }.art-video-screen i { position: absolute; top: 50%; left: 50%; display: grid; width: 47px; height: 47px; place-items: center; color: #5e79bd; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); font-size: 18px; font-style: normal; }.art-video-screen b { position: absolute; top: 9px; left: 9px; padding: 4px 6px; color: #fff; background: #f27c78; border-radius: 5px; }.art-chat { position: absolute; right: 17px; bottom: 16px; left: 17px; display: flex; gap: 5px; }.art-chat i { width: 33%; height: 9px; background: rgb(255 255 255 / 70%); border-radius: 5px; }.art-map { overflow: hidden; background: #eef7ec; border: 6px solid rgb(255 255 255 / 78%); border-radius: 17px 17px 0 0; }.art-map-grid { position: absolute; inset: 0; background: linear-gradient(32deg, transparent 44%, #b7d9b6 45% 47%, transparent 48%), linear-gradient(-35deg, transparent 43%, #b7d9b6 44% 46%, transparent 47%), repeating-linear-gradient(90deg, transparent 0 33px, rgb(157 204 153 / 30%) 34px 36px); }.art-pin { position: absolute; z-index: 2; width: 18px; height: 18px; background: #f38475; border: 4px solid #fff; border-radius: 50% 50% 50% 0; box-shadow: 0 3px 8px rgb(90 86 64 / 18%); transform: rotate(-45deg); }.pin-a { top: 48px; left: 49px; }.pin-b { top: 91px; left: 135px; background: #65a1eb; }.pin-c { top: 38px; right: 43px; background: #68c4a7; }.art-map-route { position: absolute; top: 75px; left: 64px; width: 109px; height: 51px; border-bottom: 3px dashed #5d91e5; border-radius: 50%; transform: rotate(-19deg); }
.art-social { overflow: hidden; background: radial-gradient(circle at 50% 16%, #f3eaff 0 8%, transparent 35%), linear-gradient(145deg, #fcf9ff, #e8f3ff); border: 6px solid rgb(255 255 255 / 78%); border-radius: 17px 17px 0 0; }.art-social-phone { position: absolute; bottom: -8px; left: 50%; z-index: 2; display: grid; gap: 9px; width: 126px; height: 194px; padding: 28px 12px 12px; color: #5a6b95; background: #fff; border: 5px solid #6e82c7; border-radius: 19px; box-shadow: 0 15px 25px rgb(72 82 152 / 18%); transform: translateX(-50%) rotate(-4deg); }.art-social-phone::before { position: absolute; top: 5px; left: 50%; width: 42px; height: 7px; content: ""; background: #6e82c7; border-radius: 0 0 5px 5px; transform: translateX(-50%); }.art-social-phone b { color: #5b70aa; font-size: 10px; }.art-social-phone i { height: 28px; background: linear-gradient(135deg, #ffb39b, #d998e6); border-radius: 8px; }.art-social-phone i:nth-of-type(2) { background: linear-gradient(135deg, #9dd9ed, #7e9ae8); }.art-social-phone i:nth-of-type(3) { height: 8px; background: #e5eaf6; }.art-social-phone em { padding: 6px; color: #8a78ca; background: #f0edff; border-radius: 7px; font-style: normal; text-align: center; }.art-social-bubble { position: absolute; z-index: 3; padding: 9px 12px; color: #fff; border-radius: 13px 13px 13px 3px; box-shadow: 0 7px 14px rgb(78 81 147 / 15%); font-size: 10px; font-weight: 700; }.bubble-a { top: 47px; left: 24px; background: #7a97e7; }.bubble-b { top: 92px; right: 19px; background: #df8ec0; border-radius: 13px 13px 3px 13px; }.art-social-users { position: absolute; bottom: 39px; left: 23px; display: flex; }.art-social-users i { width: 25px; height: 25px; margin-right: -7px; background: #f0b47e; border: 3px solid #fff; border-radius: 50%; }.art-social-users i:nth-child(2) { background: #69c7ae; }.art-social-users i:nth-child(3) { background: #799ae7; }
.art-iot { overflow: hidden; background: radial-gradient(circle at 50% 39%, #e4f7ff, #f7fbff); border: 6px solid rgb(255 255 255 / 78%); border-radius: 17px 17px 0 0; }.art-cloud { position: absolute; top: 34px; left: 50%; z-index: 3; padding: 11px 15px; color: #fff; background: #62a1e8; border-radius: 20px; box-shadow: 0 8px 18px rgb(61 112 193 / 20%); transform: translateX(-50%); }.art-iot-line { position: absolute; top: 80px; left: 50%; width: 2px; height: 75px; background: #84b6e9; transform-origin: top; }.line-a { transform: rotate(-48deg); }.line-b { transform: rotate(0); }.line-c { transform: rotate(48deg); }.art-iot-node { position: absolute; bottom: 36px; display: grid; width: 37px; height: 37px; place-items: center; color: #fff; background: #63c8aa; border: 4px solid #fff; border-radius: 11px; box-shadow: 0 4px 10px rgb(54 126 112 / 15%); }.node-a { left: 30px; }.node-b { left: calc(50% - 19px); background: #7298e9; }.node-c { right: 30px; background: #f0c56e; }.art-global { display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, #f7fbff, #e6f0ff); border: 6px solid rgb(255 255 255 / 78%); border-radius: 17px 17px 0 0; }.art-globe { position: relative; width: 136px; height: 136px; border: 4px solid #6d9ee5; border-radius: 50%; background: repeating-linear-gradient(0deg, transparent 0 24px, rgb(95 146 224 / 25%) 25px 27px), repeating-linear-gradient(90deg, transparent 0 27px, rgb(95 146 224 / 22%) 28px 30px); }.art-globe::before { position: absolute; inset: 14px 39px; content: ""; border: 2px solid rgb(95 146 224 / 40%); border-radius: 50%; }.art-globe i { position: absolute; width: 10px; height: 10px; background: #66c9aa; border: 3px solid #fff; border-radius: 50%; }.art-globe i:nth-child(1) { top: 28px; left: 27px; }.art-globe i:nth-child(2) { top: 77px; right: 23px; background: #f1c66e; }.art-globe i:nth-child(3) { bottom: 21px; left: 55px; background: #7699e9; }.art-global-node { position: absolute; width: 7px; height: 7px; background: #63c9aa; border-radius: 50%; }.n1 { top: 43px; left: 36px; }.n2 { right: 29px; bottom: 53px; }.n3 { bottom: 27px; left: 79px; }

/* 软件场景 */
.art-group { overflow: hidden; background: #f5f9ff; border: 6px solid rgb(255 255 255 / 78%); border-radius: 17px 17px 0 0; }.art-group > i { position: absolute; top: 78px; width: 2px; height: 38px; background: #91b7e8; transform-origin: top; }.art-group > i:nth-of-type(1) { transform: rotate(-45deg); }.art-group > i:nth-of-type(2) { transform: rotate(0); }.art-group > i:nth-of-type(3) { transform: rotate(45deg); }.art-group > b { position: absolute; bottom: 48px; padding: 8px 10px; color: #597495; background: #fff; border-radius: 8px; box-shadow: 0 5px 12px rgb(49 86 136 / 11%); }.art-group > b:nth-of-type(1) { left: 27px; }.art-group > b:nth-of-type(2) { left: calc(50% - 17px); }.art-group > b:nth-of-type(3) { right: 27px; }.art-gantt { overflow: hidden; padding: 24px 17px; background: #fafeff; border: 6px solid rgb(255 255 255 / 78%); border-radius: 17px 17px 0 0; }.art-gantt-labels { display: grid; gap: 11px; width: 41px; color: #7790ac; }.art-gantt-labels i { font-style: normal; }.art-gantt-bars { position: absolute; top: 24px; right: 18px; left: 72px; display: grid; gap: 11px; }.art-gantt-bars b { width: 65%; height: 10px; background: #69a1eb; border-radius: 5px; }.art-gantt-bars b:nth-child(2) { width: 84%; background: #69c8aa; }.art-gantt-bars b:nth-child(3) { width: 51%; background: #f0c66d; }.art-gantt-bars b:nth-child(4) { width: 73%; background: #8a93e5; }.art-crm { overflow: hidden; background: #fff; border: 6px solid rgb(255 255 255 / 78%); border-radius: 17px 17px 0 0; }.art-crm-pipeline { position: absolute; top: 33px; left: 27px; display: grid; gap: 9px; }.art-crm-pipeline i { width: 92px; padding: 7px 9px; color: #fff; background: #6f9de8; border-radius: 4px; font-style: normal; }.art-crm-pipeline i:nth-child(2) { width: 72px; background: #65c6a8; }.art-crm-pipeline i:nth-child(3) { width: 52px; background: #efc66d; }.art-crm-user { position: absolute; right: 33px; top: 37px; display: grid; width: 58px; height: 58px; place-items: center; color: #fff; background: #f09677; border-radius: 50%; font-size: 33px; }.art-crm-card { position: absolute; right: 27px; bottom: 39px; width: 119px; height: 57px; background: repeating-linear-gradient(0deg, #edf3fa 0 10px, #fff 11px 21px); border-radius: 8px; box-shadow: 0 6px 12px rgb(49 86 136 / 10%); }.art-factory { overflow: hidden; background: linear-gradient(145deg, #fff8e6, #f5fbff); border: 6px solid rgb(255 255 255 / 78%); border-radius: 17px 17px 0 0; }.art-factory-roof { position: absolute; top: 57px; left: 30px; width: 177px; height: 70px; background: #7d99c4; clip-path: polygon(0 55%, 20% 55%, 20% 12%, 38% 12%, 38% 55%, 58% 55%, 58% 0, 77% 0, 77% 55%, 100% 55%, 100% 100%, 0 100%); }.art-factory-body { position: absolute; top: 126px; left: 30px; display: flex; gap: 12px; width: 177px; height: 51px; padding: 12px; background: #657fab; }.art-factory-body i { width: 24px; background: #b5d4ed; }.art-factory-belt { position: absolute; right: 25px; bottom: 37px; left: 25px; display: flex; align-items: center; justify-content: space-around; height: 19px; background: #a7b8cd; border-radius: 9px; }.art-factory-belt i { width: 28px; height: 23px; background: #f0bc67; border-radius: 3px; }
.art-platform { overflow: hidden; background: linear-gradient(145deg, #eef6ff, #fff); border: 6px solid rgb(255 255 255 / 78%); border-radius: 17px 17px 0 0; }.art-platform-core { position: absolute; top: 74px; left: 50%; z-index: 2; display: grid; width: 58px; height: 58px; place-items: center; color: #fff; background: #6595e7; border-radius: 18px; transform: translateX(-50%); }.art-platform > i { position: absolute; display: grid; width: 39px; height: 39px; place-items: center; color: #567293; background: #fff; border-radius: 9px; box-shadow: 0 5px 12px rgb(49 86 136 / 12%); font-style: normal; }.art-platform > i::after { position: absolute; width: 30px; height: 2px; content: ""; background: #a4c4eb; transform-origin: center; }.art-platform > i:nth-of-type(1) { top: 31px; left: 31px; }.art-platform > i:nth-of-type(1)::after { left: 34px; top: 36px; transform: rotate(33deg); }.art-platform > i:nth-of-type(2) { top: 31px; right: 31px; }.art-platform > i:nth-of-type(2)::after { right: 34px; top: 36px; transform: rotate(-33deg); }.art-platform > i:nth-of-type(3) { bottom: 46px; left: 31px; }.art-platform > i:nth-of-type(3)::after { left: 34px; bottom: 36px; transform: rotate(-33deg); }.art-platform > i:nth-of-type(4) { right: 31px; bottom: 46px; }.art-platform > i:nth-of-type(4)::after { right: 34px; bottom: 36px; transform: rotate(33deg); }.art-upgrade { display: grid; grid-template-columns: 1fr 30px 1fr; align-items: center; padding: 52px 20px; background: linear-gradient(145deg, #f5f9ff, #fff); border: 6px solid rgb(255 255 255 / 78%); border-radius: 17px 17px 0 0; }.art-old, .art-new { padding: 25px 8px; color: #8898ae; background: #e9eff6; border-radius: 10px; text-align: center; }.art-new { color: #4275c8; background: #dff1ff; }.art-arrow { color: #61a1e9; font-size: 25px; text-align: center; }.art-transfer { position: absolute; bottom: 28px; left: 50%; padding: 6px 11px; color: #6a81a1; background: #fff; border-radius: 999px; box-shadow: 0 5px 11px rgb(49 86 136 / 11%); transform: translateX(-50%); white-space: nowrap; }

/* 同一业务的跨端入口使用不同主体，而非简单更换颜色。 */
.art-mini-device img { top: -4px; width: 226px; height: 226px; object-position: 50% 64%; }.art-mini-stream .art-social-phone { border-color: #a277c9; transform: translateX(-50%) rotate(4deg); }.art-mini-stream .art-social-phone::before { background: #a277c9; }.art-mini-local { background: #f1faed; }.art-delivery { position: absolute; right: 17px; bottom: 30px; z-index: 3; padding: 8px 9px; color: #fff; background: #65c2a1; border-radius: 9px; box-shadow: 0 8px 16px rgb(53 133 101 / 17%); font-size: 9px; font-weight: 700; }.art-mini-global .art-globe { border-color: #8c84dc; background-color: #f5f1ff; }.art-global-ticket { position: absolute; right: 18px; bottom: 33px; z-index: 2; padding: 9px 11px; color: #6c5fba; background: rgb(255 255 255 / 88%); border-radius: 9px; box-shadow: 0 8px 15px rgb(88 80 159 / 13%); font-size: 8px; line-height: 1.5; }
.art-software-iot { overflow: hidden; background: linear-gradient(145deg, #e9f7ff, #fff); border: 6px solid rgb(255 255 255 / 78%); border-radius: 17px 17px 0 0; }.art-software-iot img { position: absolute; bottom: -24px; left: -4px; width: 245px; height: 245px; object-fit: cover; }.art-operations-card { position: absolute; top: 34px; right: 14px; z-index: 2; width: 86px; padding: 10px; color: #587192; background: rgb(255 255 255 / 92%); border-radius: 10px; box-shadow: 0 9px 19px rgb(54 93 141 / 13%); }.art-operations-card b { font-size: 9px; }.art-operations-card i { display: block; height: 6px; margin-top: 8px; background: #dce7f4; border-radius: 4px; }.art-operations-card i:nth-of-type(2) { width: 65%; }.art-operations-card span { display: block; margin-top: 8px; color: #56ad8e; font-size: 11px; font-weight: 700; }.art-software-commerce { background: linear-gradient(145deg, #fff, #eef6ff); }.art-software-media { overflow: hidden; background: radial-gradient(circle at 72% 28%, #c4b9f2 0 5%, transparent 21%), linear-gradient(145deg, #2e426f, #6279bc); border: 6px solid rgb(255 255 255 / 68%); border-radius: 17px 17px 0 0; }.art-studio-lamp { position: absolute; top: 20px; right: 28px; width: 43px; height: 43px; background: #ffd97c; border-radius: 50%; box-shadow: 0 0 28px 12px rgb(255 217 124 / 35%); }.art-studio-screen { position: absolute; top: 42px; left: 25px; width: 174px; height: 104px; padding: 14px; color: #fff; background: linear-gradient(145deg, #8a7cda, #5c96d6); border: 5px solid rgb(255 255 255 / 38%); border-radius: 10px; box-shadow: 0 13px 22px rgb(22 34 75 / 25%); }.art-studio-screen i { display: grid; width: 24px; height: 24px; place-items: center; color: #ed7c78; background: #fff; border-radius: 50%; font-size: 10px; font-style: normal; }.art-studio-screen b { position: absolute; right: 12px; bottom: 13px; font-size: 10px; }.art-studio-screen em { position: absolute; right: 12px; top: 15px; width: 40px; height: 7px; background: rgb(255 255 255 / 55%); border-radius: 4px; }.art-studio-track { position: absolute; right: 18px; bottom: 38px; left: 18px; display: flex; gap: 6px; }.art-studio-track i { height: 19px; flex: 1; background: #83b9e4; border-radius: 4px; }.art-studio-track i:nth-child(2) { background: #e390a6; }.art-studio-track i:nth-child(3) { background: #72c7ae; }.art-software-global { overflow: hidden; background: radial-gradient(circle at 50% 38%, #eef6ff, #f9fbff); border: 6px solid rgb(255 255 255 / 78%); border-radius: 17px 17px 0 0; }.art-network-core { position: absolute; top: 65px; left: 50%; z-index: 3; display: grid; width: 61px; height: 61px; place-items: center; color: #fff; background: #6495e5; border-radius: 18px; box-shadow: 0 10px 18px rgb(66 116 192 / 20%); font-weight: 700; transform: translateX(-50%); }.network-line { position: absolute; top: 106px; left: 50%; width: 2px; height: 79px; background: #9fc4e9; transform-origin: top; }.network-line.line-one { transform: rotate(-47deg); }.network-line.line-two { transform: rotate(0); }.network-line.line-three { transform: rotate(47deg); }.network-node { position: absolute; bottom: 37px; z-index: 2; padding: 8px 9px; color: #5b7498; background: #fff; border-radius: 8px; box-shadow: 0 6px 13px rgb(55 87 134 / 11%); font-size: 8px; }.network-node.node-one { left: 21px; }.network-node.node-two { left: calc(50% - 15px); }.network-node.node-three { right: 21px; }

.solution-cases-section {
  padding: 108px 0 116px;
  background: #f7f9fd;
}

.solution-cases-section[hidden] {
  display: none;
}

.solution-trust-section[hidden] {
  display: none;
}

.solution-app-home-section[hidden] {
  display: none;
}

.solution-app-home-section .section-heading {
  margin-bottom: 40px;
}

.solution-app-home-section .section-heading .eyebrow {
  color: var(--solution-accent-dark);
}

.solution-app-home-section .enterprise-section-heading .eyebrow {
  color: var(--solution-accent-dark);
}

.solution-app-home-section .enterprise-section-heading .eyebrow::before,
.solution-app-home-section .section-heading .eyebrow::before {
  background: var(--solution-accent);
}

@media (min-width: 901px) {
  /* Keep custom-solution modules compact while retaining the homepage visual rhythm. */
  .solution-page .solution-scenes-section {
    padding: 96px 0;
  }

  .solution-page .solution-cases-section {
    padding: 92px 0 98px;
  }

  .solution-page .solution-app-home-section {
    padding: 96px 0;
  }

  .solution-page .trust-section[data-app-enterprise-section] {
    padding: 96px 0;
  }

  .solution-page .solution-scenes-section .split-heading > p:last-child {
    max-width: none;
    white-space: nowrap;
  }

  .solution-page .solution-app-home-section .section-heading > p:last-child {
    max-width: none;
    white-space: nowrap;
  }
}

.solution-cases-section .section-heading {
  margin-bottom: 40px;
}

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

.solution-case-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 15px;
  box-shadow: 0 8px 23px rgb(48 68 119 / 4%);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.solution-case-card:hover {
  border-color: color-mix(in srgb, var(--solution-accent) 35%, #e4eaf4);
  box-shadow: 0 18px 35px rgb(48 68 119 / 11%);
  transform: translateY(-4px);
}

.solution-case-image {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--solution-accent-soft), #f9fbff);
}

.solution-case-image::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 52%, rgb(20 34 65 / 17%) 100%);
  pointer-events: none;
}

.solution-case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .4s ease;
}

.solution-case-card:hover .solution-case-image img {
  transform: scale(1.045);
}

.solution-case-image span {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 1;
  padding: 6px 9px;
  color: var(--solution-accent-dark);
  background: rgb(255 255 255 / 86%);
  border: 1px solid rgb(255 255 255 / 76%);
  border-radius: 5px;
  backdrop-filter: blur(7px);
  font-size: 10px;
  font-weight: 650;
}

.solution-case-copy {
  min-height: 126px;
  padding: 22px 22px 20px;
}

.solution-case-copy h3 {
  margin: 0;
  color: #303e55;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0;
}

.solution-case-copy p {
  margin: 10px 0 0;
  color: #7b8799;
  font-size: 12px;
  line-height: 1.7;
}

.solution-process-section {
  padding: 112px 0 120px;
  background: #f7f9fd;
}

.solution-process-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: solution-step;
}

.solution-process-list li {
  position: relative;
  min-height: 183px;
  padding: 25px 20px 20px;
  background: #fff;
  border-top: 1px solid #e4eaf4;
  border-bottom: 1px solid #e4eaf4;
}

.solution-process-list li:first-child {
  border-left: 1px solid #e4eaf4;
  border-radius: 13px 0 0 13px;
}

.solution-process-list li:last-child {
  border-right: 1px solid #e4eaf4;
  border-radius: 0 13px 13px 0;
}

.solution-process-list li+li::before {
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 0;
  width: 1px;
  content: "";
  background: #e6ebf4;
}

.solution-process-list span {
  color: var(--solution-accent);
  font-size: 11px;
  font-weight: 700;
}

.solution-process-list h3 {
  margin: 37px 0 9px;
  color: #303e55;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0;
}

.solution-process-list p {
  margin: 0;
  color: #818c9c;
  font-size: 11px;
  line-height: 1.65;
}

.solution-trust-section {
  padding: 112px 0;
}

.solution-trust-panel {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 58px;
  align-items: center;
  padding: 61px;
  background: linear-gradient(135deg, #f3f7ff, #f8f6ff);
  border: 1px solid #e2e8f5;
  border-radius: 20px;
}

.solution-trust-copy h2 {
  margin: 15px 0 14px;
  color: #26344b;
  font-size: 32px;
  font-weight: 680;
  letter-spacing: 0;
  line-height: 1.3;
}

.solution-trust-copy>p:not(.eyebrow) {
  margin: 0;
  color: #748095;
  font-size: 13px;
  line-height: 1.8;
}

.solution-trust-copy dl {
  display: flex;
  gap: 28px;
  margin: 30px 0 0;
}

.solution-trust-copy dl div {
  min-width: 72px;
}

.solution-trust-copy dt {
  color: var(--solution-accent-dark);
  font-size: 25px;
  font-weight: 700;
}

.solution-trust-copy sup {
  font-size: 13px;
}

.solution-trust-copy dd {
  margin: 5px 0 0;
  color: #8a94a4;
  font-size: 10px;
}

.solution-trust-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.solution-trust-logos img {
  width: 100%;
  height: 61px;
  padding: 7px;
  object-fit: contain;
  background: rgb(255 255 255 / 80%);
  border: 1px solid #e2e8f3;
  border-radius: 8px;
}

.solution-final-section {
  padding: 0 0 104px;
}

.solution-final-panel {
  display: flex;
  min-height: 240px;
  align-items: center;
  justify-content: space-between;
  gap: 45px;
  padding: 48px 58px;
  color: #fff;
  background:
    radial-gradient(circle at 86% 10%, rgb(255 255 255 / 18%), transparent 24%),
    linear-gradient(112deg, var(--solution-accent), var(--solution-accent-dark));
  border-radius: 20px;
  box-shadow: 0 21px 44px color-mix(in srgb, var(--solution-accent) 20%, transparent);
}

.solution-final-panel .eyebrow {
  color: rgb(255 255 255 / 69%);
}

.solution-final-panel .eyebrow span {
  background: #fff;
}

.solution-final-panel h2 {
  margin: 15px 0 10px;
  color: #fff;
  font-size: clamp(28px, 3vw, 39px);
  font-weight: 680;
  letter-spacing: 0;
}

.solution-final-panel p:not(.eyebrow) {
  margin: 0;
  color: rgb(255 255 255 / 76%);
  font-size: 13px;
}

.solution-final-panel .button {
  flex: 0 0 auto;
  color: var(--solution-accent-dark);
  background: #fff;
  box-shadow: 0 12px 25px rgb(25 34 81 / 17%);
}

.solution-page a[aria-current="page"] strong {
  color: var(--solution-accent-dark);
}

/* PRD-driven industry modules share the existing solution theme and card language. */
.solution-prd-compare-section { padding: 96px 0; background: #f7f9fd; }
.solution-prd-compare-section .section-heading,
.solution-prd-architecture-section .section-heading,
.solution-prd-values-section .section-heading,
.solution-prd-deployment-section .section-heading,
.solution-prd-delivery-section .section-heading { margin-bottom: 41px; }
.solution-prd-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.solution-prd-compare-card { min-height: 358px; padding: 34px 36px; border: 1px solid #e5eaf3; border-radius: 16px; }
.solution-prd-compare-card > span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.solution-prd-compare-card ul { display: grid; gap: 16px; margin: 25px 0 0; padding: 0; list-style: none; }
.solution-prd-compare-card li { position: relative; padding-left: 25px; color: #6f7d91; font-size: 14px; line-height: 1.6; }
.solution-prd-compare-card li::before { position: absolute; top: .55em; left: 0; width: 9px; height: 9px; content: ""; border: 2px solid currentColor; border-radius: 50%; }
.solution-prd-compare-card.is-legacy { background: linear-gradient(145deg, #fff, #fafbfc); }
.solution-prd-compare-card.is-legacy > span { color: #5e6c80; background: #edf1f5; }
.solution-prd-compare-card.is-legacy li::before { border-color: #aeb9c8; }
.solution-prd-compare-card.is-modern { position: relative; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--solution-accent-soft) 76%, #fff), #fff); border-color: color-mix(in srgb, var(--solution-accent) 25%, #e5eaf3); box-shadow: 0 17px 36px color-mix(in srgb, var(--solution-accent) 9%, transparent); }
.solution-prd-compare-card.is-modern::after { position: absolute; top: -70px; right: -65px; width: 185px; height: 185px; content: ""; background: radial-gradient(circle, color-mix(in srgb, var(--solution-accent) 16%, transparent), transparent 70%); border-radius: 50%; }
.solution-prd-compare-card.is-modern > span { position: relative; z-index: 1; color: #fff; background: linear-gradient(115deg, var(--solution-accent), var(--solution-accent-dark)); }
.solution-prd-compare-card.is-modern li { color: #52637a; }
.solution-prd-compare-card.is-modern li::before { border-color: var(--solution-accent); }

.solution-prd-architecture-section { padding: 103px 0 108px; }
.solution-prd-architecture-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.solution-prd-architecture-grid article { position: relative; min-height: 178px; padding: 23px 20px; overflow: hidden; background: #fff; border: 1px solid #e2e9f3; border-radius: 13px; box-shadow: 0 8px 18px rgb(46 67 115 / 4%); transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease; }
.solution-prd-architecture-grid article::after { position: absolute; right: -36px; bottom: -41px; width: 115px; height: 115px; content: ""; background: var(--solution-accent-soft); border-radius: 50%; opacity: .72; transition: transform .24s ease; }
.solution-prd-architecture-grid article:hover { border-color: color-mix(in srgb, var(--solution-accent) 38%, #e2e9f3); box-shadow: 0 16px 30px color-mix(in srgb, var(--solution-accent) 10%, transparent); transform: translateY(-4px); }
.solution-prd-architecture-grid article:hover::after { transform: scale(1.23); }
.solution-prd-architecture-grid b { position: relative; z-index: 1; display: block; color: var(--solution-accent); font-size: 11px; letter-spacing: .08em; }
.solution-prd-architecture-grid strong { position: relative; z-index: 1; display: block; margin-top: 29px; color: #2e3d55; font-size: 17px; font-weight: 680; }
.solution-prd-architecture-grid p { position: relative; z-index: 1; margin: 10px 0 0; color: #78869a; font-size: 12px; line-height: 1.65; }
.solution-prd-support { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.solution-prd-support span { padding: 8px 13px; color: var(--solution-accent-dark); background: color-mix(in srgb, var(--solution-accent-soft) 70%, #fff); border: 1px solid color-mix(in srgb, var(--solution-accent) 18%, #fff); border-radius: 7px; font-size: 12px; font-weight: 650; }

.solution-prd-advantages-section { padding: 102px 0 106px; background: #f7f9fd; }
.solution-prd-advantages-section .section-heading { margin-bottom: 43px; }
.solution-prd-advantages-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.solution-prd-advantages-grid article { position: relative; min-height: 186px; padding: 26px; overflow: hidden; background: #fff; border: 1px solid #e4eaf3; border-radius: 13px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.solution-prd-advantages-grid article::after { position: absolute; right: -30px; bottom: -38px; width: 120px; height: 120px; content: ""; background: var(--solution-accent-soft); border-radius: 50%; opacity: .7; }
.solution-prd-advantages-grid article:hover { border-color: color-mix(in srgb, var(--solution-accent) 35%, #e4eaf3); box-shadow: 0 17px 32px rgb(46 67 115 / 8%); transform: translateY(-3px); }
.solution-prd-advantages-grid span { position: relative; z-index: 1; display: grid; width: 29px; height: 29px; place-items: center; color: var(--solution-accent-dark); background: var(--solution-accent-soft); border-radius: 8px; font-size: 10px; font-weight: 750; }
.solution-prd-advantages-grid h3 { position: relative; z-index: 1; margin: 25px 0 9px; color: #2d3c53; font-size: 17px; font-weight: 680; }
.solution-prd-advantages-grid p { position: relative; z-index: 1; margin: 0; color: #778598; font-size: 12px; line-height: 1.72; }

.solution-prd-values-section { padding: 97px 0; color: #fff; background: linear-gradient(128deg, var(--solution-accent-dark), var(--solution-accent)); }
.solution-prd-values-section .eyebrow,
.solution-prd-values-section .section-heading h2,
.solution-prd-values-section .section-heading > p:last-child { color: #fff; }
.solution-prd-values-section .section-heading > p:last-child { color: rgb(255 255 255 / 76%); }
.solution-prd-values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid rgb(255 255 255 / 22%); border-radius: 15px; }
.solution-prd-values-grid article { display: grid; min-height: 146px; align-content: center; justify-items: center; gap: 9px; padding: 22px 14px; text-align: center; background: rgb(255 255 255 / 6%); }
.solution-prd-values-grid article + article { border-left: 1px solid rgb(255 255 255 / 19%); }
.solution-prd-values-grid article:nth-child(3n + 1) { border-left: 0; }
.solution-prd-values-grid article:nth-child(n + 4) { border-top: 1px solid rgb(255 255 255 / 19%); }
.solution-prd-values-grid strong { color: #fff; font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.04em; }
.solution-prd-values-grid span { color: rgb(255 255 255 / 78%); font-size: 12px; line-height: 1.45; }

.solution-prd-terminal-section { padding: 108px 0; }
.solution-prd-terminal-layout { display: grid; grid-template-columns: .76fr 1.24fr; gap: clamp(55px, 9vw, 130px); align-items: center; }
.solution-prd-terminal-copy h2,
.solution-prd-faq-copy h2 { margin: 15px 0 15px; color: #293850; font-size: clamp(31px, 3.3vw, 42px); font-weight: 700; letter-spacing: -.04em; line-height: 1.28; }
.solution-prd-terminal-copy > p:not(.eyebrow),
.solution-prd-faq-copy > p:not(.eyebrow) { margin: 0; color: #738197; font-size: 14px; line-height: 1.85; }
.solution-prd-terminal-grid { display: grid; gap: 10px; }
.solution-prd-terminal-grid article { display: grid; grid-template-columns: 50px 1fr; gap: 17px; min-height: 113px; align-items: center; padding: 19px 21px; background: linear-gradient(135deg, color-mix(in srgb, var(--solution-accent-soft) 52%, #fff), #fff); border: 1px solid color-mix(in srgb, var(--solution-accent) 16%, #e5ebf3); border-radius: 12px; }
.solution-prd-terminal-grid article > span { display: grid; width: 42px; height: 42px; place-items: center; color: var(--solution-accent-dark); background: #fff; border: 1px solid color-mix(in srgb, var(--solution-accent) 17%, #fff); border-radius: 11px; box-shadow: 0 8px 17px color-mix(in srgb, var(--solution-accent) 10%, transparent); font-size: 11px; font-weight: 750; }
.solution-prd-terminal-grid h3 { margin: 0; color: #304058; font-size: 16px; font-weight: 680; }
.solution-prd-terminal-grid p { margin: 7px 0 0; color: #78869a; font-size: 12px; line-height: 1.7; }

.solution-prd-deployment-section { padding: 101px 0 107px; background: #f7f9fd; }
.solution-prd-deployment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.solution-prd-deployment-grid article { position: relative; min-height: 254px; padding: 34px; overflow: hidden; background: #fff; border: 1px solid #e3e9f3; border-radius: 16px; }
.solution-prd-deployment-grid article:last-child { color: #fff; background: linear-gradient(125deg, var(--solution-accent), var(--solution-accent-dark)); border-color: transparent; box-shadow: 0 16px 32px color-mix(in srgb, var(--solution-accent) 19%, transparent); }
.solution-prd-deployment-grid article > span { display: block; color: var(--solution-accent); font-size: 11px; font-weight: 750; letter-spacing: .1em; }
.solution-prd-deployment-grid article:last-child > span { color: rgb(255 255 255 / 64%); }
.solution-prd-deployment-grid h3 { margin: 31px 0 9px; color: #304057; font-size: 23px; font-weight: 700; letter-spacing: -.03em; }
.solution-prd-deployment-grid article:last-child h3 { color: #fff; }
.solution-prd-deployment-grid p { max-width: 440px; margin: 0; color: #758397; font-size: 13px; line-height: 1.8; }
.solution-prd-deployment-grid article:last-child p { color: rgb(255 255 255 / 79%); }
.solution-prd-deployment-grid ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 21px 0 0; padding: 0; list-style: none; }
.solution-prd-deployment-grid li { padding: 6px 9px; color: var(--solution-accent-dark); background: var(--solution-accent-soft); border-radius: 5px; font-size: 11px; font-weight: 650; }
.solution-prd-deployment-grid article:last-child li { color: #fff; background: rgb(255 255 255 / 14%); border: 1px solid rgb(255 255 255 / 13%); }

.solution-prd-delivery-section { padding: 103px 0 110px; }
.solution-prd-delivery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.solution-prd-delivery-grid li { position: relative; min-height: 155px; padding: 24px 19px; background: #fff; border: 1px solid #e4eaf3; border-radius: 12px; box-shadow: 0 8px 18px rgb(46 67 115 / 4%); }
.solution-prd-delivery-grid b { display: block; color: var(--solution-accent); font-size: 11px; letter-spacing: .08em; }
.solution-prd-delivery-grid strong { display: block; margin-top: 28px; color: #304058; font-size: 16px; font-weight: 680; }
.solution-prd-delivery-grid span { display: block; margin-top: 8px; color: #7c899a; font-size: 11px; line-height: 1.6; }

.solution-prd-faq-section { padding: 106px 0 112px; background: #f7f9fd; }
.solution-prd-faq-layout { display: grid; grid-template-columns: .74fr 1.26fr; gap: clamp(55px, 10vw, 145px); align-items: start; }
.solution-prd-faq-copy .text-link { display: inline-flex; margin-top: 28px; color: var(--solution-accent-dark); }
.solution-prd-faq-list { border-top: 1px solid #dce5f0; }
.solution-prd-faq-list article { border-bottom: 1px solid #dce5f0; }
.solution-prd-faq-list h3 { margin: 0; }
.solution-prd-faq-list button { display: flex; width: 100%; min-height: 72px; align-items: center; justify-content: space-between; gap: 20px; padding: 0; color: #324259; text-align: left; background: transparent; border: 0; cursor: pointer; font-size: 15px; font-weight: 680; }
.solution-prd-faq-list button i { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; color: var(--solution-accent-dark); background: var(--solution-accent-soft); border-radius: 50%; font-size: 18px; font-style: normal; font-weight: 400; transition: transform .2s ease; }
.solution-prd-faq-list article.is-open button i { transform: rotate(45deg); }
.solution-prd-faq-list article > div { padding: 0 43px 21px 0; }
.solution-prd-faq-list p { margin: 0; color: #748298; font-size: 13px; line-height: 1.85; }

/* Rich ticketing-system landing page, kept within the site's light SaaS visual language. */
.ticket-page {
  --ticket-blue: #e58a27;
  --ticket-deep: #bd6812;
  --ticket-cyan: #f0a345;
  overflow: hidden;
  color: #27354b;
}

.ticket-hero {
  position: relative;
  min-height: 660px;
  overflow: hidden;
  background: radial-gradient(circle at 79% 36%, rgb(240 163 69 / 23%), transparent 25%), linear-gradient(125deg, #fffdf9 0%, #fff7eb 52%, #fff2df 100%);
}

.ticket-hero::after {
  position: absolute;
  right: -230px;
  bottom: -360px;
  width: 700px;
  height: 700px;
  content: "";
  border: 1px solid rgb(229 138 39 / 16%);
  border-radius: 50%;
}

.ticket-hero-grid {
  position: absolute;
  inset: 0;
  opacity: .7;
  background-image: linear-gradient(rgb(229 138 39 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(229 138 39 / 7%) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, #000, rgb(0 0 0 / 56%) 58%, transparent);
}

.ticket-hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr);
  gap: 50px;
  min-height: 660px;
  align-items: center;
  padding: 74px 0;
}

.ticket-hero-copy {
  max-width: 590px;
}

.ticket-hero-copy .eyebrow {
  color: var(--ticket-deep);
}

.ticket-hero-copy .eyebrow span {
  background: var(--ticket-blue);
}

.ticket-hero-copy h1 {
  margin: 20px 0 0;
  color: #17233a;
  font-size: clamp(42px, 4.4vw, 64px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.16;
}

.ticket-hero-copy h1 em {
  color: var(--ticket-blue);
  font-style: normal;
}

.ticket-hero-copy > p:not(.eyebrow) {
  max-width: 560px;
  margin: 22px 0 0;
  color: #63738b;
  font-size: 16px;
  line-height: 1.85;
}

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

.ticket-hero .button-primary,
.ticket-consult-panel .button-primary {
  background: linear-gradient(112deg, var(--ticket-cyan), var(--ticket-blue));
  box-shadow: 0 12px 26px rgb(36 104 232 / 23%);
}

.ticket-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 29px 0 0;
  padding: 0;
  list-style: none;
}

.ticket-hero-points li {
  padding: 6px 10px;
  color: var(--ticket-deep);
  background: rgb(255 253 249 / 72%);
  border: 1px solid rgb(229 138 39 / 21%);
  border-radius: 5px;
  font-size: 11px;
}

.ticket-dashboard {
  position: relative;
  height: 405px;
  margin-right: 8px;
  perspective: 1000px;
}

.ticket-dashboard::before {
  position: absolute;
  top: 42px;
  left: 56px;
  width: 380px;
  height: 300px;
  content: "";
  background: rgb(240 163 69 / 34%);
  border-radius: 50%;
  filter: blur(65px);
}

.ticket-dashboard > :not(.ticket-dashboard-float) {
  position: absolute;
}

.ticket-dashboard-bar,
.ticket-dashboard-body {
  box-sizing: border-box;
}

.ticket-dashboard > .ticket-dashboard-bar {
  top: 26px;
  right: 0;
  left: 25px;
  z-index: 2;
  display: flex;
  height: 43px;
  align-items: center;
  padding: 0 16px;
  color: rgb(255 239 213 / 89%);
  background: rgb(105 54 12 / 92%);
  border: 1px solid rgb(255 206 135 / 46%);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 24px 60px rgb(125 68 15 / 21%);
  font-size: 10px;
  transform: perspective(900px) rotateY(-7deg) rotateX(2deg);
}

.ticket-dashboard-bar span {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  font-weight: 650;
}

.ticket-dashboard-bar span i {
  width: 8px;
  height: 8px;
  background: #ffd07f;
  border-radius: 2px;
}

.ticket-dashboard-bar small {
  margin-left: auto;
  opacity: .6;
}

.ticket-dashboard-bar b {
  margin-left: 13px;
  padding: 3px 6px;
  color: #ffe2a7;
  background: rgb(255 209 128 / 17%);
  border-radius: 3px;
  font-size: 8px;
}

.ticket-dashboard > .ticket-dashboard-body {
  top: 69px;
  right: 0;
  bottom: 19px;
  left: 25px;
  z-index: 1;
  display: flex;
  overflow: hidden;
  background: linear-gradient(145deg, rgb(166 88 20 / 96%), rgb(91 43 9 / 97%));
  border: 1px solid rgb(255 206 135 / 46%);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 24px 60px rgb(125 68 15 / 21%);
  transform: perspective(900px) rotateY(-7deg) rotateX(2deg);
}

.ticket-dashboard-body aside {
  display: flex;
  width: 47px;
  align-items: center;
  flex-direction: column;
  gap: 17px;
  padding-top: 23px;
  background: rgb(81 36 7 / 32%);
  border-right: 1px solid rgb(255 223 175 / 15%);
}

.ticket-dashboard-body aside i {
  width: 14px;
  height: 14px;
  border: 1px solid rgb(255 226 183 / 42%);
  border-radius: 3px;
}

.ticket-dashboard-body aside i.is-active {
  background: #ffc15d;
  border-color: #ffc15d;
  box-shadow: 0 0 10px #ffc15d;
}

.ticket-dashboard-main {
  flex: 1;
  padding: 21px;
}

.ticket-dashboard-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.ticket-dashboard-heading small,
.ticket-kpi-grid small,
.ticket-chart-title small {
  color: rgb(255 231 193 / 65%);
  font-size: 9px;
}

.ticket-dashboard-heading strong {
  display: block;
  margin-top: 2px;
  color: #fffaf0;
  font-size: 16px;
}

.ticket-dashboard-heading > span {
  padding: 3px 7px;
  color: #ffd495;
  border: 1px solid rgb(255 209 139 / 40%);
  border-radius: 3px;
  font-size: 9px;
}

.ticket-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 15px;
}

.ticket-kpi-grid > div {
  padding: 9px;
  background: linear-gradient(135deg, rgb(255 190 94 / 18%), rgb(255 220 165 / 5%));
  border: 1px solid rgb(255 219 165 / 17%);
  border-radius: 5px;
}

.ticket-kpi-grid b {
  display: block;
  margin: 2px 0;
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
}

.ticket-kpi-grid em {
  color: #ffe09e;
  font-size: 8px;
  font-style: normal;
}

.ticket-chart {
  min-height: 130px;
  margin-top: 12px;
  padding: 9px;
  background: rgb(73 31 5 / 26%);
  border: 1px solid rgb(255 219 165 / 17%);
  border-radius: 5px;
}

.ticket-chart-title,
.ticket-chart > div:last-child {
  display: flex;
  justify-content: space-between;
  color: rgb(255 244 222 / 92%);
  font-size: 9px;
}

.ticket-chart svg {
  width: 100%;
  height: 79px;
  margin-top: 3px;
  overflow: visible;
}

.ticket-chart-grid {
  stroke: rgb(255 229 189 / 16%);
  stroke-width: 1;
}

.ticket-chart-fill {
  fill: rgb(255 184 79 / 26%);
}

.ticket-chart-line {
  fill: none;
  stroke: #ffd078;
  stroke-width: 2;
}

.ticket-chart > div:last-child {
  color: rgb(255 232 195 / 58%);
  font-size: 7px;
}

.ticket-dashboard-float {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 10px 12px;
  color: #fff8eb;
  background: linear-gradient(135deg, rgb(207 123 35 / 95%), rgb(151 77 17 / 95%));
  border: 1px solid rgb(255 220 163 / 50%);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgb(82 40 6 / 23%);
}

.ticket-dashboard-float b {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  color: #ffe6af;
  background: rgb(255 218 147 / 17%);
  border-radius: 6px;
  font-size: 10px;
}

.ticket-dashboard-float small,
.ticket-dashboard-float strong {
  display: block;
}

.ticket-dashboard-float small {
  color: rgb(255 231 194 / 75%);
  font-size: 9px;
}

.ticket-dashboard-float strong {
  margin-top: 2px;
  font-size: 11px;
}

.ticket-dashboard-verify {
  bottom: 17px;
  left: -5px;
}

.ticket-dashboard-order {
  top: 0;
  right: -5px;
}

.ticket-dashboard-order b {
  color: #fff;
  background: linear-gradient(145deg, #ffc561, #e58a27);
}

.ticket-deploy-strip {
  position: relative;
  z-index: 2;
  margin-top: -1px;
  background: #fff;
  border-bottom: 1px solid #e7edf7;
}

.ticket-deploy-strip .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.ticket-deploy-strip .container > div {
  display: flex;
  min-height: 108px;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

.ticket-deploy-strip .container > div + div {
  border-left: 1px solid #e9eef6;
}

.ticket-deploy-strip b {
  color: var(--ticket-blue);
  font-size: 20px;
}

.ticket-deploy-strip strong,
.ticket-deploy-strip small {
  display: block;
}

.ticket-deploy-strip strong {
  color: #334159;
  font-size: 15px;
}

.ticket-deploy-strip small {
  margin-top: 5px;
  color: #8490a1;
  font-size: 11px;
}

.ticket-product-section {
  padding: 112px 0 120px;
  background: #f7f9fd;
}

.ticket-product-section .section-heading {
  margin-bottom: 42px;
}

.ticket-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.ticket-feature-card {
  position: relative;
  min-height: 210px;
  padding: 23px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2e9f4;
  border-radius: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ticket-feature-card:hover {
  border-color: #bcd4fc;
  box-shadow: 0 16px 32px rgb(35 78 145 / 9%);
  transform: translateY(-3px);
}

.ticket-feature-card > span {
  position: absolute;
  top: 18px;
  right: 19px;
  color: #c7d2e5;
  font-size: 11px;
  font-weight: 700;
}

.ticket-feature-card > i {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  color: var(--ticket-blue);
  background: #fff1dc;
  border-radius: 11px;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

.ticket-feature-card h3 {
  margin: 22px 0 9px;
  color: #2c3950;
  font-size: 17px;
}

.ticket-feature-card p {
  margin: 0;
  color: #77859a;
  font-size: 12px;
  line-height: 1.7;
}

.ticket-feature-card > b {
  position: absolute;
  right: 20px;
  bottom: 19px;
  color: var(--ticket-deep);
  font-size: 10px;
  font-weight: 650;
}

.ticket-feature-wide {
  grid-column: span 2;
  padding-right: 210px;
  background: linear-gradient(135deg, #fff, #fff7eb);
}

.ticket-feature-wide::after {
  position: absolute;
  right: 28px;
  bottom: 22px;
  width: 134px;
  height: 82px;
  content: "";
  background: repeating-linear-gradient(90deg, #f0af5e 0 11px, transparent 11px 19px), linear-gradient(180deg, transparent 0 24%, #f6ddb9 24% 26%, transparent 26% 55%, #f6ddb9 55% 57%, transparent 57%);
  opacity: .55;
  border-bottom: 2px solid #eca348;
}

.ticket-feature-ai {
  background: linear-gradient(135deg, #fff7eb, #fff2df);
}

.ticket-feature-ai > i {
  color: var(--ticket-deep);
  background: #ffead0;
}

.ticket-advantage-section {
  padding: 118px 0;
  background: #fff;
}

.ticket-advantage-layout {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(50px, 8vw, 115px);
  align-items: start;
}

.ticket-advantage-copy {
  position: sticky;
  top: 105px;
}

.ticket-advantage-copy h2,
.ticket-hardware-copy h2,
.ticket-faq-copy h2 {
  margin: 14px 0 14px;
  color: #26344b;
  font-size: clamp(31px, 3.3vw, 43px);
  font-weight: 680;
  letter-spacing: -.03em;
  line-height: 1.28;
}

.ticket-advantage-copy > p:not(.eyebrow),
.ticket-hardware-copy > p:not(.eyebrow),
.ticket-faq-copy > p:not(.eyebrow) {
  margin: 0;
  color: #748095;
  font-size: 14px;
  line-height: 1.85;
}

.ticket-advantage-stage {
  position: relative;
  min-height: 238px;
  margin: 28px 0 23px;
  padding: 25px;
  overflow: hidden;
  background: linear-gradient(135deg, #fff7eb, #fffaf4);
  border: 1px solid #f6dfbd;
  border-radius: 16px;
}

.ticket-advantage-stage::after {
  position: absolute;
  right: -30px;
  bottom: -42px;
  width: 175px;
  height: 175px;
  content: "";
  background: repeating-radial-gradient(circle, rgb(229 138 39 / 19%) 0 1px, transparent 1px 14px);
  border-radius: 50%;
}

.ticket-advantage-stage > span {
  color: #efb363;
  font-size: 40px;
  font-weight: 700;
}

.ticket-advantage-stage strong,
.ticket-advantage-stage p,
.ticket-advantage-stage small {
  position: relative;
  z-index: 1;
  display: block;
}

.ticket-advantage-stage strong {
  margin-top: 33px;
  color: #32415a;
  font-size: 19px;
}

.ticket-advantage-stage p {
  margin: 9px 0 0;
  color: #718096;
  font-size: 12px;
  line-height: 1.7;
}

.ticket-advantage-stage small {
  margin-top: 22px;
  color: var(--ticket-deep);
  font-size: 10px;
  font-weight: 650;
}

.ticket-advantage-list {
  display: grid;
  gap: 10px;
}

.ticket-advantage-list button {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 17px;
  align-items: center;
  width: 100%;
  min-height: 94px;
  padding: 17px 20px;
  text-align: left;
  background: #fff;
  border: 1px solid #e4eaf3;
  border-radius: 11px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ticket-advantage-list button:hover,
.ticket-advantage-list button.is-active {
  background: #fff8ef;
  border-color: #f1ca91;
  box-shadow: 0 11px 25px rgb(41 89 165 / 8%);
  transform: translateX(4px);
}

.ticket-advantage-list b {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--ticket-deep);
  background: #fff0db;
  border-radius: 9px;
  font-size: 11px;
}

.ticket-advantage-list strong,
.ticket-advantage-list small {
  display: block;
}

.ticket-advantage-list strong {
  color: #35425a;
  font-size: 14px;
  font-weight: 650;
}

.ticket-advantage-list small {
  margin-top: 6px;
  color: #8290a3;
  font-size: 11px;
}

.ticket-scenarios-section {
  padding: 112px 0 120px;
  background: #f7f9fd;
}

.ticket-scenarios-section .section-heading {
  margin-bottom: 41px;
}

.ticket-scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.ticket-scenario-card {
  position: relative;
  display: flex;
  min-height: 325px;
  flex-direction: column;
  justify-content: end;
  padding: 23px;
  overflow: hidden;
  color: #fff;
  background-color: #1d538a;
  background-position: center;
  background-size: cover;
  border-radius: 15px;
}

.ticket-scenario-card::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgb(7 29 64 / 7%) 18%, rgb(6 25 57 / 85%) 100%);
}

.ticket-scenic { background-image: url('https://piaowu.majiangyun.cn/assets/images/solution-scenic-reservation.jpg'); }
.ticket-park { background-image: url('https://piaowu.majiangyun.cn/assets/images/solution-park-entry.jpg'); }
.ticket-stage { background-image: url('https://piaowu.majiangyun.cn/assets/images/solution-stage-ticketing.jpg'); }
.ticket-relax { background-image: url('https://piaowu.majiangyun.cn/assets/images/2.jpg'); }
.ticket-campus { background-image: url('https://piaowu.majiangyun.cn/assets/images/1.jpg'); }
.ticket-transport { background-image: url('https://piaowu.majiangyun.cn/assets/images/3.jpg'); }

.ticket-scenario-card > span,
.ticket-scenario-card > div {
  position: relative;
  z-index: 1;
}

.ticket-scenario-card > span {
  position: absolute;
  top: 21px;
  left: 22px;
  color: rgb(255 255 255 / 78%);
  font-size: 11px;
  font-weight: 700;
}

.ticket-scenario-card b {
  display: inline-block;
  padding: 5px 8px;
  color: rgb(255 255 255 / 84%);
  background: rgb(9 34 71 / 30%);
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 4px;
  font-size: 10px;
}

.ticket-scenario-card h3 {
  margin: 14px 0 7px;
  color: #fff;
  font-size: 21px;
}

.ticket-scenario-card p {
  margin: 0;
  color: rgb(255 255 255 / 76%);
  font-size: 12px;
  line-height: 1.7;
}

.ticket-hardware-section {
  padding: 118px 0;
  background: #fff;
}

.ticket-hardware-layout {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: clamp(48px, 8vw, 118px);
  align-items: center;
}

.ticket-hardware-panel {
  padding: 15px;
  background: #fff8ed;
  border: 1px solid #f3deb9;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgb(44 104 176 / 8%);
}

.ticket-hardware-image {
  position: relative;
  min-height: 318px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  border-radius: 10px;
  transition: background-image .25s ease;
}

.ticket-hardware-image::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 50%, rgb(5 35 77 / 68%));
}

.ticket-hardware-image span {
  position: absolute;
  z-index: 1;
  bottom: 17px;
  left: 18px;
  padding: 5px 9px;
  color: #fff;
  background: rgb(5 43 94 / 44%);
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.ticket-hardware-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 13px;
}

.ticket-hardware-options button {
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px;
  text-align: left;
  background: #fff;
  border: 1px solid #f3deb9;
  border-radius: 8px;
  cursor: pointer;
}

.ticket-hardware-options button.is-active {
  background: #fff4e4;
  border-color: #edae5a;
}

.ticket-hardware-options b {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  color: var(--ticket-deep);
  background: #fff0db;
  border-radius: 6px;
  font-size: 9px;
}

.ticket-hardware-options strong,
.ticket-hardware-options small {
  display: block;
}

.ticket-hardware-options strong {
  color: #3b4960;
  font-size: 11px;
}

.ticket-hardware-options small {
  margin-top: 3px;
  color: #8290a2;
  font-size: 9px;
  line-height: 1.45;
}

.ticket-faq-section {
  padding: 116px 0;
  background: #f7f9fd;
}

.ticket-faq-layout {
  display: grid;
  grid-template-columns: .74fr 1.26fr;
  gap: clamp(55px, 10vw, 145px);
  align-items: start;
}

.ticket-faq-list {
  border-top: 1px solid #dfe7f2;
}

.ticket-faq-list article {
  border-bottom: 1px solid #dfe7f2;
}

.ticket-faq-list h3 {
  margin: 0;
}

.ticket-faq-list button {
  display: flex;
  width: 100%;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  color: #35425a;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 650;
}

.ticket-faq-list button span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--ticket-deep);
  background: #fff0db;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 400;
}

.ticket-faq-list article.is-open button span {
  transform: rotate(45deg);
}

.ticket-faq-list article > div {
  padding: 0 42px 20px 0;
}

.ticket-faq-list p {
  margin: 0;
  color: #748196;
  font-size: 13px;
  line-height: 1.8;
}

.ticket-consult-section {
  padding: 0 0 105px;
  background: #f7f9fd;
}

.ticket-consult-panel {
  display: flex;
  min-height: 272px;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 47px 58px;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(circle at 88% 15%, rgb(255 255 255 / 22%), transparent 22%), linear-gradient(112deg, #f0a345, #e58a27 67%, #bd6812);
  border-radius: 20px;
  box-shadow: 0 22px 46px rgb(189 104 18 / 20%);
}

.ticket-consult-panel .eyebrow {
  color: rgb(255 255 255 / 68%);
}

.ticket-consult-panel .eyebrow span {
  background: #fff;
}

.ticket-consult-panel h2 {
  margin: 14px 0 10px;
  color: #fff;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 680;
  letter-spacing: -.03em;
  line-height: 1.3;
}

.ticket-consult-panel > div > p:not(.eyebrow) {
  margin: 0;
  color: rgb(255 255 255 / 77%);
  font-size: 13px;
}

.ticket-consult-panel ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 17px;
  margin: 20px 0 0;
  padding: 0;
  color: rgb(255 255 255 / 84%);
  list-style: none;
  font-size: 11px;
}

.ticket-consult-panel li::before {
  margin-right: 5px;
  content: "✓";
}

.ticket-consult-panel .button {
  flex: 0 0 auto;
  color: var(--ticket-deep);
  background: #fff;
  box-shadow: 0 12px 24px rgb(16 47 126 / 16%);
}

/* Ticketing keeps a blue landing-page theme while its navigation icon stays black. */
.ticket-page {
  --ticket-blue: #287bd9;
  --ticket-deep: #1458b5;
  --ticket-cyan: #23b3e8;
}

.ticket-hero {
  background: radial-gradient(circle at 79% 36%, rgb(35 179 232 / 19%), transparent 25%), linear-gradient(125deg, #fbfdff 0%, #eef7ff 52%, #e4f2ff 100%);
}

.ticket-hero::after { border-color: rgb(40 123 217 / 16%); }
.ticket-hero-grid { background-image: linear-gradient(rgb(40 123 217 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(40 123 217 / 7%) 1px, transparent 1px); }
.ticket-hero .button-primary,
.ticket-consult-panel .button-primary { box-shadow: 0 12px 26px rgb(40 123 217 / 23%); }
.ticket-hero-points li { background: rgb(255 255 255 / 76%); border-color: rgb(40 123 217 / 20%); }

.ticket-dashboard::before { background: rgb(35 179 232 / 28%); }
.ticket-dashboard > .ticket-dashboard-bar {
  color: rgb(228 245 255 / 88%);
  background: rgb(17 78 145 / 94%);
  border-color: rgb(175 229 255 / 30%);
  box-shadow: 0 24px 60px rgb(13 76 148 / 25%);
}
.ticket-dashboard-bar span i { background: #83ddf4; }
.ticket-dashboard-bar b { color: #d8f6ff; background: rgb(155 234 255 / 13%); }
.ticket-dashboard > .ticket-dashboard-body {
  background: linear-gradient(145deg, rgb(24 114 185 / 97%), rgb(9 56 119 / 98%));
  border-color: rgb(175 229 255 / 30%);
  box-shadow: 0 24px 60px rgb(13 76 148 / 25%);
}
.ticket-dashboard-body aside { background: rgb(5 59 126 / 25%); border-right-color: rgb(207 244 255 / 14%); }
.ticket-dashboard-body aside i { border-color: rgb(212 245 255 / 38%); }
.ticket-dashboard-body aside i.is-active { background: #77e2f0; border-color: #77e2f0; box-shadow: 0 0 10px #77e2f0; }
.ticket-dashboard-heading small,
.ticket-kpi-grid small,
.ticket-chart-title small { color: rgb(217 245 255 / 65%); }
.ticket-dashboard-heading strong { color: #fff; }
.ticket-dashboard-heading > span { color: #c6f2ff; border-color: rgb(195 241 255 / 35%); }
.ticket-kpi-grid > div { background: linear-gradient(135deg, rgb(128 221 255 / 16%), rgb(255 255 255 / 3%)); border-color: rgb(200 241 255 / 15%); }
.ticket-kpi-grid em { color: #9beafa; }
.ticket-chart { background: rgb(4 59 126 / 20%); border-color: rgb(200 241 255 / 15%); }
.ticket-chart-title,
.ticket-chart > div:last-child { color: rgb(210 242 255 / 66%); }
.ticket-chart-grid { stroke: rgb(203 241 255 / 15%); }
.ticket-chart-fill { fill: rgb(96 218 245 / 20%); }
.ticket-chart-line { stroke: #7ce7f4; }
.ticket-dashboard-float { color: #f4fdff; background: linear-gradient(135deg, rgb(29 128 199 / 97%), rgb(13 75 151 / 97%)); border-color: rgb(186 239 255 / 34%); box-shadow: 0 12px 28px rgb(7 67 140 / 24%); }
.ticket-dashboard-float b { color: #0d5f9d; background: #8de9f2; }
.ticket-dashboard-float small { color: rgb(214 246 255 / 74%); }
.ticket-dashboard-order b { background: linear-gradient(145deg, #68d8ef, #287bd9); }

.ticket-feature-card:hover { border-color: #a8cdeb; box-shadow: 0 16px 32px rgb(40 123 217 / 9%); }
.ticket-feature-card > i { color: var(--ticket-deep); background: #e4f3ff; }
.ticket-feature-wide { background: linear-gradient(135deg, #fff, #eff8ff); }
.ticket-feature-wide::after { background: repeating-linear-gradient(90deg, #71bde8 0 11px, transparent 11px 19px), linear-gradient(180deg, transparent 0 24%, #c0e3f7 24% 26%, transparent 26% 55%, #c0e3f7 55% 57%, transparent 57%); border-bottom-color: #4c9ed4; }
.ticket-feature-ai { background: linear-gradient(135deg, #f3fbff, #e5f4ff); }
.ticket-feature-ai > i { background: #d8efff; }
.ticket-advantage-stage { background: linear-gradient(135deg, #f2faff, #fff); border-color: #d0e6f6; }
.ticket-advantage-stage::after { background: repeating-radial-gradient(circle, rgb(40 123 217 / 16%) 0 1px, transparent 1px 14px); }
.ticket-advantage-stage > span { color: #68addd; }
.ticket-advantage-list button:hover,
.ticket-advantage-list button.is-active { background: #f0f8ff; border-color: #a8cdeb; box-shadow: 0 11px 25px rgb(40 123 217 / 8%); }
.ticket-advantage-list b { background: #e2f2ff; }

.ticket-hardware-panel { background: #f2f9ff; border-color: #cfe4f4; box-shadow: 0 18px 40px rgb(40 123 217 / 8%); }
.ticket-hardware-options button { border-color: #cfe4f4; }
.ticket-hardware-options button.is-active { background: #e8f5ff; border-color: #6db4e5; }
.ticket-hardware-options b,
.ticket-faq-list button span { background: #e2f2ff; }
.ticket-consult-panel { background: radial-gradient(circle at 88% 15%, rgb(255 255 255 / 20%), transparent 22%), linear-gradient(112deg, #23b3e8, #287bd9 67%, #1458b5); box-shadow: 0 22px 46px rgb(20 88 181 / 22%); }

/* Transport management landing page. */
.transport-page {
  --transport-blue: #287bd9;
  --transport-deep: #1458b5;
  --transport-cyan: #23b3e8;
  overflow: hidden;
  color: #29384e;
}

.transport-page .button-primary {
  background: linear-gradient(110deg, var(--transport-cyan), var(--transport-blue));
  box-shadow: 0 12px 26px rgb(40 123 217 / 23%);
}

.transport-hero {
  position: relative;
  min-height: 660px;
  overflow: hidden;
  background: radial-gradient(circle at 78% 38%, rgb(55 174 255 / 22%), transparent 26%), linear-gradient(122deg, #fbfdff 0%, #edf6ff 54%, #e5f2ff 100%);
}

.transport-hero::after {
  position: absolute;
  right: -230px;
  bottom: -360px;
  width: 700px;
  height: 700px;
  content: "";
  border: 1px solid rgb(40 123 217 / 14%);
  border-radius: 50%;
}

.transport-hero-grid {
  position: absolute;
  inset: 0;
  opacity: .72;
  background-image: linear-gradient(rgb(61 125 211 / 6%) 1px, transparent 1px), linear-gradient(90deg, rgb(61 125 211 / 6%) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, #000, rgb(0 0 0 / 58%) 58%, transparent);
}

.transport-hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr);
  gap: 50px;
  min-height: 660px;
  align-items: center;
  padding: 74px 0;
}

.transport-hero-copy {
  max-width: 590px;
}

.transport-hero-copy .eyebrow {
  color: var(--transport-deep);
}

.transport-hero-copy .eyebrow span {
  background: var(--transport-blue);
}

.transport-hero-copy h1 {
  margin: 20px 0 0;
  color: #17233a;
  font-size: clamp(42px, 4.4vw, 64px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.16;
}

.transport-hero-copy h1 em {
  color: var(--transport-blue);
  font-style: normal;
}

.transport-hero-copy > p:not(.eyebrow) {
  max-width: 560px;
  margin: 22px 0 0;
  color: #63738b;
  font-size: 16px;
  line-height: 1.85;
}

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

.transport-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 29px 0 0;
  padding: 0;
  list-style: none;
}

.transport-hero-points li {
  padding: 6px 10px;
  color: #3864ae;
  background: rgb(255 255 255 / 64%);
  border: 1px solid rgb(62 125 224 / 17%);
  border-radius: 5px;
  font-size: 11px;
}

.transport-dashboard {
  position: relative;
  height: 405px;
  margin-right: 8px;
  perspective: 1000px;
}

.transport-dashboard::before {
  position: absolute;
  top: 42px;
  left: 56px;
  width: 380px;
  height: 300px;
  content: "";
  background: rgb(57 157 255 / 33%);
  border-radius: 50%;
  filter: blur(65px);
}

.transport-dashboard-bar,
.transport-dashboard-body {
  position: absolute;
  box-sizing: border-box;
}

.transport-dashboard-bar {
  top: 26px;
  right: 0;
  left: 25px;
  z-index: 2;
  display: flex;
  height: 43px;
  align-items: center;
  padding: 0 16px;
  color: rgb(215 238 255 / 86%);
  background: rgb(10 43 101 / 91%);
  border: 1px solid rgb(156 219 255 / 43%);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 24px 60px rgb(17 65 141 / 20%);
  font-size: 10px;
  transform: perspective(900px) rotateY(-7deg) rotateX(2deg);
}

.transport-dashboard-bar span {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  font-weight: 650;
}

.transport-dashboard-bar span i {
  width: 8px;
  height: 8px;
  background: #38ceff;
  border-radius: 2px;
}

.transport-dashboard-bar small {
  margin-left: auto;
  opacity: .6;
}

.transport-dashboard-bar b {
  margin-left: 13px;
  padding: 3px 6px;
  color: #8af0d3;
  background: rgb(57 211 157 / 14%);
  border-radius: 3px;
  font-size: 8px;
}

.transport-dashboard-body {
  top: 69px;
  right: 0;
  bottom: 19px;
  left: 25px;
  z-index: 1;
  display: flex;
  overflow: hidden;
  background: linear-gradient(145deg, rgb(17 75 153 / 96%), rgb(6 40 100 / 96%));
  border: 1px solid rgb(156 219 255 / 43%);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 24px 60px rgb(17 65 141 / 20%);
  transform: perspective(900px) rotateY(-7deg) rotateX(2deg);
}

.transport-dashboard-body aside {
  display: flex;
  width: 47px;
  align-items: center;
  flex-direction: column;
  gap: 17px;
  padding-top: 23px;
  background: rgb(7 29 74 / 34%);
  border-right: 1px solid rgb(174 225 255 / 12%);
}

.transport-dashboard-body aside i {
  width: 14px;
  height: 14px;
  border: 1px solid rgb(185 234 255 / 39%);
  border-radius: 3px;
}

.transport-dashboard-body aside i.is-active {
  background: #30c4ff;
  border-color: #30c4ff;
  box-shadow: 0 0 10px #30c4ff;
}

.transport-dashboard-main {
  min-width: 0;
  flex: 1;
  padding: 21px;
}

.transport-dashboard-heading,
.transport-map-title,
.transport-map-meta {
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.transport-dashboard-heading small,
.transport-kpi-grid small,
.transport-map-title small {
  color: rgb(191 224 250 / 61%);
  font-size: 9px;
}

.transport-dashboard-heading strong {
  display: block;
  margin-top: 2px;
  color: #f2fbff;
  font-size: 16px;
}

.transport-dashboard-heading > span {
  padding: 3px 7px;
  color: #86d8ff;
  border: 1px solid rgb(115 207 255 / 34%);
  border-radius: 3px;
  font-size: 9px;
}

.transport-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 15px;
}

.transport-kpi-grid > div {
  padding: 9px;
  background: linear-gradient(135deg, rgb(84 168 244 / 17%), rgb(85 210 255 / 4%));
  border: 1px solid rgb(154 216 255 / 13%);
  border-radius: 5px;
}

.transport-kpi-grid b {
  display: block;
  margin: 2px 0;
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
}

.transport-kpi-grid em {
  color: #75e8c8;
  font-size: 8px;
  font-style: normal;
}

.transport-map-panel {
  min-height: 130px;
  margin-top: 12px;
  padding: 9px;
  overflow: hidden;
  background: rgb(3 26 71 / 25%);
  border: 1px solid rgb(154 216 255 / 13%);
  border-radius: 5px;
}

.transport-map-title,
.transport-map-meta {
  color: rgb(222 242 255 / 91%);
  font-size: 9px;
}

.transport-map-lines {
  position: relative;
  height: 76px;
  margin: 3px 4px 0;
  overflow: hidden;
  background-image: linear-gradient(130deg, transparent 0 20%, rgb(89 193 255 / 27%) 20.5% 21.5%, transparent 22% 43%, rgb(89 193 255 / 24%) 43.5% 44.5%, transparent 45% 65%, rgb(89 193 255 / 19%) 65.5% 66.5%, transparent 67%), linear-gradient(45deg, transparent 0 38%, rgb(89 193 255 / 18%) 38.5% 39.5%, transparent 40% 68%, rgb(89 193 255 / 17%) 68.5% 69.5%, transparent 70%);
}

.transport-map-lines::before,
.transport-map-lines::after {
  position: absolute;
  content: "";
  border: 1px solid rgb(111 209 255 / 17%);
  border-radius: 50%;
}

.transport-map-lines::before {
  top: -45px;
  left: 16%;
  width: 155px;
  height: 155px;
}

.transport-map-lines::after {
  top: -28px;
  right: 8%;
  width: 108px;
  height: 108px;
}

.transport-map-lines i {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #7ed7ff;
  border-radius: 50%;
  box-shadow: 0 0 7px #7ed7ff;
}

.transport-map-lines i:nth-child(1) { top: 17px; left: 21%; }
.transport-map-lines i:nth-child(2) { top: 54px; left: 52%; }
.transport-map-lines i:nth-child(3) { top: 21px; right: 18%; }

.transport-pin,
.transport-truck {
  position: absolute;
  display: grid;
  width: 11px;
  height: 11px;
  place-items: center;
  color: #fff;
  background: #37c8f8;
  border: 2px solid rgb(211 246 255 / 78%);
  border-radius: 50%;
  box-shadow: 0 0 11px rgb(55 200 248 / 72%);
}

.transport-pin.pin-one { top: 18px; left: 33%; }
.transport-pin.pin-two { top: 49px; left: 67%; }
.transport-pin.pin-three { top: 27px; right: 12%; }

.transport-truck {
  top: 34px;
  left: 48%;
  width: 19px;
  height: 19px;
  color: #0c519b;
  background: #8be5ff;
  border: 0;
  font-size: 11px;
}

.transport-map-meta {
  color: rgb(190 224 250 / 56%);
  font-size: 8px;
}

.transport-map-meta span:last-child {
  color: #72e2be;
}

.transport-dashboard-float {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 10px 12px;
  color: #eaf8ff;
  background: linear-gradient(135deg, rgb(16 100 184 / 94%), rgb(12 55 125 / 94%));
  border: 1px solid rgb(175 229 255 / 47%);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgb(0 12 52 / 21%);
}

.transport-dashboard-float > b {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  color: #7ff0d2;
  background: rgb(60 224 169 / 14%);
  border-radius: 6px;
  font-size: 14px;
}

.transport-dashboard-float small,
.transport-dashboard-float strong {
  display: block;
}

.transport-dashboard-float small {
  color: rgb(200 232 251 / 69%);
  font-size: 9px;
}

.transport-dashboard-float strong {
  margin-top: 2px;
  font-size: 11px;
}

.transport-route-float { bottom: 17px; left: -5px; }
.transport-receipt-float { top: 0; right: -5px; }
.transport-receipt-float > b { color: #fff; background: linear-gradient(145deg, #37c9f6, #2872e6); }

.transport-assurance-strip {
  position: relative;
  z-index: 2;
  margin-top: -1px;
  background: #fff;
  border-bottom: 1px solid #e7edf7;
}

.transport-assurance-strip .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.transport-assurance-strip .container > div {
  display: flex;
  min-height: 108px;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

.transport-assurance-strip .container > div + div { border-left: 1px solid #e9eef6; }
.transport-assurance-strip b { color: var(--transport-blue); font-size: 20px; }
.transport-assurance-strip strong,
.transport-assurance-strip small { display: block; }
.transport-assurance-strip strong { color: #334159; font-size: 15px; }
.transport-assurance-strip small { margin-top: 5px; color: #8490a1; font-size: 11px; }

.transport-capabilities-section {
  padding: 112px 0 120px;
  background: #f7f9fd;
}

.transport-capabilities-section .section-heading { margin-bottom: 42px; }

.transport-capability-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.transport-capability-card {
  position: relative;
  min-height: 210px;
  padding: 23px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2e9f4;
  border-radius: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.transport-capability-card:hover {
  border-color: #bcd4fc;
  box-shadow: 0 16px 32px rgb(35 78 145 / 9%);
  transform: translateY(-3px);
}

.transport-capability-card > span {
  position: absolute;
  top: 18px;
  right: 19px;
  color: #c7d2e5;
  font-size: 11px;
  font-weight: 700;
}

.transport-capability-card > i {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  color: var(--transport-blue);
  background: #eaf2ff;
  border-radius: 11px;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

.transport-capability-card h3 {
  margin: 22px 0 9px;
  color: #2c3950;
  font-size: 17px;
}

.transport-capability-card p {
  margin: 0;
  color: #77859a;
  font-size: 12px;
  line-height: 1.7;
}

.transport-capability-card > b {
  position: absolute;
  right: 20px;
  bottom: 19px;
  color: #5584e6;
  font-size: 10px;
  font-weight: 650;
}

.transport-capability-wide {
  grid-column: span 2;
  padding-right: 210px;
  background: linear-gradient(135deg, #fff, #f5f8ff);
}

.transport-capability-wide::after {
  position: absolute;
  right: 27px;
  bottom: 23px;
  width: 140px;
  height: 86px;
  content: "";
  background: linear-gradient(141deg, transparent 0 14%, #7badf7 14.5% 16%, transparent 16.5% 38%, #4e92fa 38.5% 40%, transparent 40.5% 58%, #a6c8fb 58.5% 60%, transparent 60%), repeating-radial-gradient(circle at 78% 70%, #6da3f6 0 3px, transparent 4px 16px);
  opacity: .72;
  border-right: 2px solid #85b2f9;
  border-bottom: 2px solid #85b2f9;
}

.transport-capability-ai { background: linear-gradient(135deg, #f2f8ff, #edf8ff); }
.transport-capability-ai > i { color: #247be3; background: #e2f3ff; }

.transport-process-section {
  padding: 112px 0 120px;
  background: #fff;
}

.transport-process-section .section-heading { margin-bottom: 44px; }

.transport-process-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  border: 1px solid #e1e9f4;
  border-radius: 15px;
}

.transport-process-list li {
  position: relative;
  min-height: 244px;
  padding: 25px 20px;
  background: linear-gradient(160deg, #fff, #f7faff);
}

.transport-process-list li + li { border-left: 1px solid #e1e9f4; }

.transport-process-list li + li::before {
  position: absolute;
  top: 45px;
  left: -6px;
  z-index: 1;
  width: 10px;
  height: 10px;
  content: "";
  background: #fff;
  border-top: 1px solid #a9c6f4;
  border-right: 1px solid #a9c6f4;
  transform: rotate(45deg);
}

.transport-process-list span,
.transport-process-list i {
  display: block;
  font-style: normal;
}

.transport-process-list span { color: #a1bff1; font-size: 12px; font-weight: 700; }
.transport-process-list i { margin-top: 34px; color: var(--transport-blue); font-size: 11px; font-weight: 650; }
.transport-process-list h3 { margin: 8px 0 9px; color: #314057; font-size: 16px; }
.transport-process-list p { margin: 0; color: #7b889b; font-size: 11px; line-height: 1.7; }

.transport-advantage-section { padding: 118px 0; background: #f7f9fd; }

.transport-advantage-layout {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(50px, 8vw, 115px);
  align-items: start;
}

.transport-advantage-copy { position: sticky; top: 105px; }

.transport-advantage-copy h2,
.transport-driver-copy h2,
.transport-faq-copy h2 {
  margin: 14px 0;
  color: #26344b;
  font-size: clamp(31px, 3.3vw, 43px);
  font-weight: 680;
  letter-spacing: -.03em;
  line-height: 1.28;
}

.transport-advantage-copy > p:not(.eyebrow),
.transport-driver-copy > p:not(.eyebrow),
.transport-faq-copy > p:not(.eyebrow) {
  margin: 0;
  color: #748095;
  font-size: 14px;
  line-height: 1.85;
}

.transport-advantage-stage {
  position: relative;
  min-height: 238px;
  margin: 28px 0 23px;
  padding: 25px;
  overflow: hidden;
  background: linear-gradient(135deg, #edf6ff, #f7faff);
  border: 1px solid #dceafa;
  border-radius: 16px;
}

.transport-advantage-stage::after {
  position: absolute;
  right: -30px;
  bottom: -42px;
  width: 175px;
  height: 175px;
  content: "";
  background: repeating-radial-gradient(circle, rgb(69 129 232 / 17%) 0 1px, transparent 1px 14px);
  border-radius: 50%;
}

.transport-advantage-stage > span { color: #8bb3f8; font-size: 40px; font-weight: 700; }
.transport-advantage-stage strong,
.transport-advantage-stage p,
.transport-advantage-stage small { position: relative; z-index: 1; display: block; }
.transport-advantage-stage strong { margin-top: 33px; color: #32415a; font-size: 19px; }
.transport-advantage-stage p { margin: 9px 0 0; color: #718096; font-size: 12px; line-height: 1.7; }
.transport-advantage-stage small { margin-top: 22px; color: #4d7fdc; font-size: 10px; font-weight: 650; }

.transport-advantage-list { display: grid; gap: 10px; }

.transport-advantage-list button {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 17px;
  align-items: center;
  width: 100%;
  min-height: 94px;
  padding: 17px 20px;
  text-align: left;
  background: #fff;
  border: 1px solid #e4eaf3;
  border-radius: 11px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.transport-advantage-list button:hover,
.transport-advantage-list button.is-active {
  background: #f5f8ff;
  border-color: #bcd4fa;
  box-shadow: 0 11px 25px rgb(41 89 165 / 8%);
  transform: translateX(4px);
}

.transport-advantage-list b {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #5585e3;
  background: #edf4ff;
  border-radius: 9px;
  font-size: 11px;
}

.transport-advantage-list strong,
.transport-advantage-list small { display: block; }
.transport-advantage-list strong { color: #35425a; font-size: 14px; font-weight: 650; }
.transport-advantage-list small { margin-top: 6px; color: #8290a3; font-size: 11px; }

.transport-scenarios-section { padding: 112px 0 120px; background: #fff; }
.transport-scenarios-section .section-heading { margin-bottom: 41px; }

.transport-scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.transport-scenario-card {
  position: relative;
  display: flex;
  min-height: 315px;
  flex-direction: column;
  justify-content: end;
  padding: 23px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #145bbd, #227edb);
  border-radius: 15px;
}

.transport-scenario-card::before,
.transport-scenario-card::after {
  position: absolute;
  content: "";
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 50%;
}

.transport-scenario-card::before { top: -76px; right: -61px; width: 220px; height: 220px; }
.transport-scenario-card::after { right: 31px; bottom: -105px; width: 250px; height: 250px; }
.transport-cold { background: linear-gradient(135deg, #0e829f, #24b1d4); }
.transport-retail { background: linear-gradient(135deg, #2c67bd, #4d99ed); }
.transport-fleet { background: linear-gradient(135deg, #2357ab, #357ed3); }
.transport-linehaul { background: linear-gradient(135deg, #1371c0, #20a4e3); }
.transport-bulk { background: linear-gradient(135deg, #1a4f9b, #2b76ce); }

.transport-scenario-card > span,
.transport-scenario-card > i,
.transport-scenario-card > div { position: relative; z-index: 1; }
.transport-scenario-card > span { position: absolute; top: 21px; left: 22px; color: rgb(255 255 255 / 78%); font-size: 11px; font-weight: 700; }

.transport-scenario-card > i {
  position: absolute;
  top: 53px;
  right: 25px;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  color: rgb(255 255 255 / 83%);
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 20px 20px 20px 4px;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  transform: rotate(-8deg);
}

.transport-scenario-card b {
  display: inline-block;
  padding: 5px 8px;
  color: rgb(255 255 255 / 84%);
  background: rgb(9 34 71 / 22%);
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 4px;
  font-size: 10px;
}

.transport-scenario-card h3 { margin: 14px 0 7px; color: #fff; font-size: 21px; }
.transport-scenario-card p { margin: 0; color: rgb(255 255 255 / 76%); font-size: 12px; line-height: 1.7; }

.transport-driver-section { padding: 118px 0; background: #f7f9fd; }

.transport-driver-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(65px, 10vw, 150px);
  align-items: center;
}

.transport-driver-visual {
  position: relative;
  display: grid;
  min-height: 455px;
  place-items: center;
  background: radial-gradient(circle at 55% 45%, rgb(62 154 248 / 23%), transparent 41%);
}

.transport-phone {
  position: relative;
  z-index: 1;
  width: 228px;
  min-height: 415px;
  padding: 11px;
  color: #30415e;
  background: #1d2a40;
  border: 6px solid #1d2a40;
  border-radius: 32px;
  box-shadow: 0 28px 52px rgb(35 72 132 / 23%);
}

.transport-phone::before {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 64px;
  height: 12px;
  content: "";
  background: #1d2a40;
  border-radius: 0 0 9px 9px;
  transform: translateX(-50%);
}

.transport-phone-top,
.transport-phone-greeting,
.transport-phone-task,
.transport-phone-map,
.transport-phone-nav { background: #fff; }

.transport-phone-top {
  display: flex;
  height: 42px;
  align-items: end;
  justify-content: space-between;
  padding: 0 11px 9px;
  border-radius: 21px 21px 0 0;
  font-size: 9px;
}

.transport-phone-top i { width: 8px; height: 8px; background: #4a93f4; border-radius: 50%; }
.transport-phone-top b { letter-spacing: 2px; }

.transport-phone-greeting {
  padding: 13px 13px 10px;
  background: linear-gradient(135deg, #f0f7ff, #fff);
}

.transport-phone-greeting small,
.transport-phone-greeting strong { display: block; }
.transport-phone-greeting small { color: #8190a6; font-size: 9px; }
.transport-phone-greeting strong { margin-top: 4px; color: #2b5da9; font-size: 13px; }

.transport-phone-task {
  display: grid;
  grid-template-columns: 27px 1fr auto;
  gap: 7px;
  align-items: center;
  margin: 0 9px;
  padding: 9px;
  border: 1px solid #e1ebfa;
  border-radius: 8px;
}

.transport-phone-task > span { display: grid; width: 26px; height: 26px; place-items: center; color: #fff; background: #438af0; border-radius: 7px; font-size: 10px; }
.transport-phone-task small,
.transport-phone-task b { display: block; }
.transport-phone-task small { color: #4b596e; font-size: 8px; }
.transport-phone-task b { margin-top: 3px; color: #32ad86; font-size: 8px; }
.transport-phone-task > i { color: #438af0; font-size: 8px; font-style: normal; }

.transport-phone-map {
  position: relative;
  height: 176px;
  margin: 10px 9px 0;
  padding: 11px;
  overflow: hidden;
  background: linear-gradient(135deg, #e7f3ff, #f7fbff);
  border-radius: 8px;
  font-size: 8px;
}

.transport-phone-map::before,
.transport-phone-map::after { position: absolute; content: ""; border: 1px solid rgb(52 137 239 / 24%); border-radius: 50%; }
.transport-phone-map::before { right: -37px; bottom: -44px; width: 150px; height: 150px; }
.transport-phone-map::after { top: 46px; left: -52px; width: 127px; height: 127px; }
.transport-phone-map i { position: absolute; width: 90px; height: 1px; background: #78b3fa; transform: rotate(-35deg); }
.transport-phone-map i:nth-of-type(1) { top: 74px; left: 42px; }
.transport-phone-map i:nth-of-type(2) { top: 117px; right: 26px; transform: rotate(23deg); }
.transport-phone-map b { position: absolute; top: 80px; left: 98px; display: grid; width: 21px; height: 21px; place-items: center; color: #fff; background: #3383ed; border: 2px solid #dff0ff; border-radius: 50%; font-size: 11px; }

.transport-phone-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; padding: 11px 26px 9px; border-radius: 0 0 21px 21px; }
.transport-phone-nav i { height: 4px; background: #d6dfec; border-radius: 4px; }
.transport-phone-nav i.is-active { background: #3e88ee; }

.transport-phone-bubble {
  position: absolute;
  z-index: 2;
  right: 4%;
  bottom: 48px;
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 10px 12px;
  color: #40516b;
  background: #fff;
  border: 1px solid #d9e6f7;
  border-radius: 9px;
  box-shadow: 0 13px 27px rgb(34 81 153 / 13%);
  font-size: 10px;
}

.transport-phone-bubble b { display: grid; width: 20px; height: 20px; place-items: center; color: #fff; background: #35ae86; border-radius: 50%; }

.transport-driver-copy { max-width: 520px; }
.transport-driver-copy ul { display: grid; gap: 13px; margin: 25px 0 30px; padding: 0; color: #54647b; list-style: none; font-size: 13px; }
.transport-driver-copy li::before { display: inline-grid; width: 18px; height: 18px; margin-right: 9px; place-items: center; content: "✓"; color: #fff; background: var(--transport-blue); border-radius: 50%; font-size: 10px; }

.transport-faq-section { padding: 116px 0; background: #fff; }

.transport-faq-layout {
  display: grid;
  grid-template-columns: .74fr 1.26fr;
  gap: clamp(55px, 10vw, 145px);
  align-items: start;
}

.transport-faq-list { border-top: 1px solid #dfe7f2; }
.transport-faq-list article { border-bottom: 1px solid #dfe7f2; }
.transport-faq-list h3 { margin: 0; }

.transport-faq-list button {
  display: flex;
  width: 100%;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  color: #35425a;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 650;
}

.transport-faq-list button span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #4b7ee2;
  background: #edf4ff;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 400;
}

.transport-faq-list article.is-open button span { transform: rotate(45deg); }
.transport-faq-list article > div { padding: 0 42px 20px 0; }
.transport-faq-list p { margin: 0; color: #748196; font-size: 13px; line-height: 1.8; }

.transport-consult-section { padding: 0 0 105px; background: #fff; }

.transport-consult-panel {
  display: flex;
  min-height: 272px;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 47px 58px;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(circle at 88% 15%, rgb(255 255 255 / 18%), transparent 22%), linear-gradient(112deg, #1598df, #287bd9 67%, #315fc1);
  border-radius: 20px;
  box-shadow: 0 22px 46px rgb(35 100 202 / 19%);
}

.transport-consult-panel .eyebrow { color: rgb(255 255 255 / 68%); }
.transport-consult-panel .eyebrow span { background: #fff; }
.transport-consult-panel h2 { margin: 14px 0 10px; color: #fff; font-size: clamp(28px, 3vw, 40px); font-weight: 680; letter-spacing: -.03em; line-height: 1.3; }
.transport-consult-panel > div > p:not(.eyebrow) { margin: 0; color: rgb(255 255 255 / 77%); font-size: 13px; }
.transport-consult-panel ul { display: flex; flex-wrap: wrap; gap: 7px 17px; margin: 20px 0 0; padding: 0; color: rgb(255 255 255 / 84%); list-style: none; font-size: 11px; }
.transport-consult-panel li::before { margin-right: 5px; content: "✓"; }
.transport-consult-panel .button { flex: 0 0 auto; color: #2a5fc9; background: #fff; box-shadow: 0 12px 24px rgb(16 47 126 / 16%); }

@media (max-width: 1000px) {
  .transport-hero-layout {
    grid-template-columns: minmax(0, .9fr) minmax(410px, 1.1fr);
    gap: 30px;
  }

  .transport-dashboard {
    transform: scale(.9);
    transform-origin: right center;
  }

  .transport-advantage-layout,
  .transport-driver-layout,
  .transport-faq-layout { gap: 52px; }

  .transport-process-list li { padding-right: 15px; padding-left: 15px; }
}

@media (max-width: 900px) {
  .transport-hero { min-height: 0; }

  .transport-hero-layout {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 76px 0 57px;
  }

  .transport-dashboard {
    width: min(100%, 590px);
    margin: -8px auto 0;
    justify-self: center;
    transform: none;
  }

  .transport-assurance-strip .container { grid-template-columns: 1fr; padding: 8px 0; }
  .transport-assurance-strip .container > div { min-height: 74px; justify-content: flex-start; padding: 0 22px; }
  .transport-assurance-strip .container > div + div { border-top: 1px solid #e9eef6; border-left: 0; }

  .transport-capability-grid { grid-template-columns: repeat(2, 1fr); }

  .transport-process-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .transport-process-list li,
  .transport-process-list li + li { min-height: 183px; border: 1px solid #e1e9f4; border-radius: 10px; }
  .transport-process-list li + li::before { display: none; }
  .transport-process-list i { margin-top: 24px; }

  .transport-advantage-layout,
  .transport-driver-layout,
  .transport-faq-layout { grid-template-columns: 1fr; }

  .transport-advantage-copy { position: static; }
  .transport-scenario-grid { grid-template-columns: repeat(2, 1fr); }
  .transport-driver-copy { max-width: 580px; }
}

@media (max-width: 620px) {
  .transport-hero-grid { background-size: 32px 32px; }
  .transport-hero-layout { padding: 55px 0 42px; }
  .transport-hero-copy h1 { font-size: 40px; }
  .transport-hero-copy > p:not(.eyebrow) { margin-top: 17px; font-size: 14px; }
  .transport-hero-actions { margin-top: 24px; }
  .transport-hero-points { margin-top: 23px; }

  .transport-dashboard {
    width: 410px;
    max-width: 113%;
    height: 328px;
    margin: -10px 0 -27px -5%;
    transform: scale(.82);
    transform-origin: top center;
  }

  .transport-assurance-strip .container > div { min-height: 69px; padding: 0 18px; }
  .transport-assurance-strip strong { font-size: 13px; }

  .transport-capabilities-section,
  .transport-process-section,
  .transport-advantage-section,
  .transport-scenarios-section,
  .transport-driver-section,
  .transport-faq-section { padding: 70px 0; }

  .transport-capabilities-section .section-heading,
  .transport-process-section .section-heading,
  .transport-scenarios-section .section-heading { margin-bottom: 29px; }

  .transport-capability-grid,
  .transport-scenario-grid,
  .transport-process-list { grid-template-columns: 1fr; }

  .transport-capability-card,
  .transport-capability-wide { grid-column: auto; min-height: 180px; padding: 20px; }
  .transport-capability-wide { padding-right: 155px; }
  .transport-capability-wide::after { right: 17px; bottom: 18px; width: 106px; height: 65px; }
  .transport-capability-card h3 { margin-top: 17px; }

  .transport-process-list { gap: 9px; }
  .transport-process-list li { min-height: 145px; padding: 19px; }
  .transport-process-list i { margin-top: 19px; }

  .transport-advantage-layout,
  .transport-driver-layout,
  .transport-faq-layout { gap: 33px; }

  .transport-advantage-copy h2,
  .transport-driver-copy h2,
  .transport-faq-copy h2 { font-size: 29px; }

  .transport-advantage-stage { min-height: 204px; margin: 23px 0 19px; padding: 21px; }
  .transport-advantage-stage strong { margin-top: 23px; }
  .transport-advantage-list button { min-height: 82px; gap: 13px; padding: 14px; }

  .transport-scenario-card { min-height: 245px; padding: 20px; }
  .transport-driver-visual { min-height: 410px; }
  .transport-phone { transform: scale(.89); }
  .transport-phone-bubble { right: -4px; bottom: 31px; }
  .transport-driver-copy ul { margin: 22px 0 26px; }

  .transport-faq-list button { min-height: 64px; font-size: 14px; }
  .transport-faq-list article > div { padding: 0 10px 18px 0; }

  .transport-consult-section { padding: 0 0 68px; }
  .transport-consult-panel { display: block; min-height: 0; padding: 34px 25px; border-radius: 15px; }
  .transport-consult-panel .button { margin-top: 25px; }
}

@media (max-width: 1000px) {
  .solution-detail-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(400px, .82fr);
    gap: 28px;
  }

  .solution-detail-visual {
    transform: scale(.9);
    transform-origin: right center;
  }

  body[data-solution-slug="app-development"] .solution-detail-visual {
    width: min(100%, 510px);
    height: 438px;
  }

  .solution-dashboard-visual, .app-mobile-visual, .app-hardware-visual, .mini-growth-visual { transform: scale(.94); transform-origin: center center; }

  .solution-overview-layout {
    gap: 55px;
  }

  .solution-trust-panel {
    gap: 40px;
    padding: 48px;
  }

  .solution-page.has-four-solution-metrics .solution-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .solution-page.has-four-solution-metrics .solution-metrics-grid>div:nth-child(odd)::before {
    display: none;
  }

  .solution-page.has-four-solution-metrics .solution-metrics-grid>div:nth-child(n + 3)::after {
    position: absolute;
    top: 0;
    right: 24px;
    left: 24px;
    height: 1px;
    content: "";
    background: #e7ebf3;
  }
}

@media (max-width: 900px) {
  .solution-detail-hero-inner {
    grid-template-columns: 1fr;
    padding: 75px 0 60px;
  }

  .solution-detail-copy {
    max-width: 660px;
  }

  .solution-detail-visual {
    justify-self: center;
    transform: none;
  }

  .solution-hero-carousel {
    right: 12px;
    left: 12px;
  }

  .solution-project-carousel {
    right: auto;
    left: auto;
  }

  .solution-detail-hero.has-intro-carousel {
    min-height: 0;
  }

  .solution-detail-hero.has-intro-carousel .solution-detail-hero-inner {
    width: var(--container);
    grid-template-columns: 1fr;
    align-items: start;
    min-height: 0;
    padding-top: 75px;
    padding-bottom: 48px;
  }

  .solution-detail-hero.has-intro-carousel .solution-project-carousel {
    position: relative;
    top: auto;
    right: auto;
    width: min(100%, 510px);
    height: 400px;
    margin: -28px auto 44px;
    transform: none;
  }

  .solution-overview-section,
  .solution-scenes-section,
  .solution-cases-section,
  .solution-app-home-section,
  .solution-trust-section {
    padding: 84px 0;
  }

  .solution-capabilities-section,
  .solution-process-section {
    padding: 82px 0 88px;
  }

  .solution-overview-layout {
    grid-template-columns: 1fr;
  }

  .solution-capability-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .solution-capability-grid.solution-capability-showcase {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 380px));
    justify-content: center;
    gap: 18px;
  }

  .solution-capability-showcase .solution-showcase-card {
    width: 100%;
  }

  .solution-page.has-four-solution-capabilities .solution-capability-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .solution-scene-grid.solution-scene-showcase {
    grid-template-columns: repeat(2, minmax(0, 380px));
    justify-content: center;
    gap: 18px;
  }

  .solution-process-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .solution-process-list li,
  .solution-process-list li:first-child,
  .solution-process-list li:last-child {
    border: 1px solid #e4eaf4;
    border-radius: 10px;
  }

  .solution-process-list li+li::before {
    display: none;
  }

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

@media (max-width: 620px) {
  .solution-detail-grid {
    background-size: 32px 32px;
  }

  .solution-capability-grid.solution-capability-showcase {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 0;
    margin: 0;
  }

  .solution-capability-showcase .solution-showcase-card {
    width: 100%;
    min-height: 420px;
    padding: 31px 27px 0;
    border-radius: 21px;
  }

  .solution-capability-showcase .solution-showcase-card h3 { margin: 0 0 15px; font-size: 27px; }
  .solution-capability-showcase .solution-showcase-card p { font-size: 14px; }

  .solution-scene-grid.solution-scene-showcase {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .solution-scene-grid.solution-scene-image-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .solution-scene-image-grid .solution-scene-image-item figcaption { padding-top: 13px; }
  .solution-scene-image-grid .solution-scene-image-item h3 { font-size: 20px; }

  .solution-scene-showcase .solution-showcase-scene {
    min-height: 510px;
    padding: 31px 27px 0;
    border-radius: 21px;
  }

  .solution-scene-showcase .solution-showcase-scene h3 { margin-bottom: 15px; font-size: 27px; }
  .solution-scene-showcase .solution-showcase-scene p { font-size: 14px; }
  .solution-scene-showcase .solution-scene-preview { top: 250px; right: 27px; left: 27px; height: 221px; }
  .solution-scene-showcase .scene-app-window { height: 188px; }
  .solution-scene-artwork { top: 230px; right: 22px; left: 22px; transform: scale(.94); transform-origin: top center; }

  .solution-detail-hero-inner {
    padding: 57px 0 38px;
  }

  .solution-detail-copy h1 {
    font-size: 38px;
  }

  .solution-detail-intro {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.8;
  }

  .solution-detail-actions {
    margin-top: 25px;
  }

  .solution-detail-visual {
    width: 390px;
    max-width: 112%;
    height: 320px;
    margin-top: 3px;
    transform: scale(.88);
    transform-origin: top center;
    margin-bottom: -43px;
  }

  body[data-solution-slug="app-development"] .solution-detail-visual {
    width: 400px;
    max-width: 112%;
    height: 360px;
    margin-top: 7px;
    margin-bottom: -30px;
    transform: scale(.84);
    transform-origin: top center;
  }

  .solution-dashboard-visual, .app-mobile-visual, .app-hardware-visual, .mini-growth-visual { transform: scale(.72); transform-origin: top center; }

  .solution-hero-carousel {
    top: 14px;
    right: 5px;
    left: 5px;
    padding: 6px;
    border-radius: 14px;
  }

  .solution-project-carousel-section {
    padding: 0;
  }

  .solution-project-carousel {
    top: auto;
    right: auto;
    left: auto;
    height: max(520px, calc(100svh - 66px));
    padding: 0;
    border: 0;
    border-radius: 0;
  }

  .solution-detail-hero.has-intro-carousel .solution-detail-hero-inner {
    padding-bottom: 0;
  }

  .solution-detail-hero.has-intro-carousel .solution-project-carousel {
    width: 390px;
    max-width: 112%;
    height: 320px;
    margin: -34px auto 22px;
  }

  body[data-solution-slug="app-development"] .solution-detail-hero.has-intro-carousel .solution-project-carousel {
    width: 400px;
    height: 360px;
  }

  .solution-detail-hero.has-intro-carousel .solution-project-carousel .solution-carousel-caption {
    right: 78px;
    bottom: 13px;
    left: 15px;
  }

  .solution-detail-hero.has-intro-carousel .solution-project-carousel .solution-carousel-controls {
    right: 10px;
    bottom: 11px;
  }

  .solution-project-carousel .solution-carousel-slide {
    height: 100%;
  }

  .solution-project-carousel .solution-carousel-caption {
    right: 92px;
    bottom: 25px;
    left: 18px;
  }

  .solution-project-carousel .solution-carousel-controls {
    right: 17px;
    bottom: 23px;
  }

  .solution-carousel-viewport {
    border-radius: 9px;
  }

  .solution-carousel-slide {
    height: 266px;
  }

  .solution-carousel-caption {
    right: 15px;
    bottom: 13px;
    left: 15px;
  }

  .solution-carousel-caption strong {
    font-size: 16px;
  }

  .solution-carousel-controls {
    right: 13px;
    bottom: 12px;
  }

  .solution-visual-window {
    top: 22px;
    height: 283px;
  }

  .solution-window-main {
    padding: 17px;
  }

  .solution-metrics-grid {
    grid-template-columns: 1fr;
    padding: 10px 0;
  }

  .solution-metrics-grid>div {
    min-height: 71px;
    justify-content: flex-start;
    padding: 0 19px;
  }

  .solution-metrics-grid>div+div::before {
    top: 0;
    right: 19px;
    bottom: auto;
    left: 19px;
    width: auto;
    height: 1px;
  }

  .solution-overview-section,
  .solution-scenes-section,
  .solution-cases-section,
  .solution-app-home-section,
  .solution-trust-section {
    padding: 67px 0;
  }

  .solution-capabilities-section,
  .solution-process-section {
    padding: 65px 0 70px;
  }

  .solution-overview-copy h2 {
    font-size: 30px;
  }

  .solution-overview-list {
    grid-template-columns: 1fr;
  }

  .solution-overview-list>div {
    min-height: 126px;
    padding: 21px;
  }

  .solution-capabilities-section .section-heading,
  .solution-process-section .section-heading,
  .solution-scenes-section .section-heading,
  .solution-cases-section .section-heading {
    margin-bottom: 28px;
  }

  .solution-capability-grid,
  .solution-scene-grid,
  .solution-case-grid,
  .solution-process-list {
    grid-template-columns: 1fr;
  }

  .solution-page.has-four-solution-capabilities .solution-capability-grid {
    grid-template-columns: 1fr;
  }

  .solution-capability-card {
    min-height: 176px;
    padding: 21px;
  }

  .solution-capability-card h3 {
    margin-top: 26px;
  }

  .solution-scene-card {
    grid-template-columns: 43px 1fr;
    min-height: 132px;
    gap: 16px;
    padding: 21px;
  }

  .solution-scene-card i {
    width: 43px;
    height: 43px;
  }

  .solution-case-image {
    height: 205px;
  }

  .solution-case-copy {
    min-height: 0;
    padding: 19px;
  }

  .solution-process-list li {
    min-height: 150px;
    padding: 21px;
  }

  .solution-process-list h3 {
    margin-top: 25px;
  }

  .solution-trust-panel {
    gap: 34px;
    padding: 35px 22px;
    border-radius: 15px;
  }

  .solution-trust-copy h2 {
    font-size: 27px;
  }

  .solution-trust-copy dl {
    gap: 18px;
  }

  .solution-trust-logos {
    gap: 6px;
  }

  .solution-trust-logos img {
    height: 50px;
  }

  .solution-final-section {
    padding: 0 0 68px;
  }

  .solution-final-panel {
    display: block;
    min-height: 0;
    padding: 34px 25px;
    border-radius: 15px;
  }

  .solution-final-panel h2 {
    font-size: 27px;
  }

  .solution-final-panel p:not(.eyebrow) {
    line-height: 1.7;
  }

  .solution-final-panel .button {
    margin-top: 25px;
  }

  .solution-prd-compare-section,
  .solution-prd-architecture-section,
  .solution-prd-advantages-section,
  .solution-prd-values-section,
  .solution-prd-terminal-section,
  .solution-prd-deployment-section,
  .solution-prd-delivery-section,
  .solution-prd-faq-section { padding: 66px 0; }

  .solution-prd-compare-section .section-heading,
  .solution-prd-architecture-section .section-heading,
  .solution-prd-values-section .section-heading,
  .solution-prd-deployment-section .section-heading,
  .solution-prd-delivery-section .section-heading,
  .solution-prd-advantages-section .section-heading { margin-bottom: 28px; }

  .solution-prd-compare-grid,
  .solution-prd-advantages-grid,
  .solution-prd-terminal-layout,
  .solution-prd-deployment-grid,
  .solution-prd-faq-layout { grid-template-columns: 1fr; }

  .solution-prd-compare-card { min-height: 0; padding: 25px 21px; }
  .solution-prd-compare-card ul { gap: 12px; margin-top: 20px; }
  .solution-prd-compare-card li { padding-left: 21px; font-size: 13px; }
  .solution-prd-architecture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .solution-prd-architecture-grid article { min-height: 156px; padding: 18px 14px; }
  .solution-prd-architecture-grid strong { margin-top: 20px; font-size: 15px; }
  .solution-prd-architecture-grid p { font-size: 10px; }
  .solution-prd-support { justify-content: flex-start; gap: 7px; margin-top: 20px; }
  .solution-prd-support span { padding: 7px 9px; font-size: 11px; }
  .solution-prd-advantages-grid article { min-height: 0; padding: 21px; }
  .solution-prd-advantages-grid h3 { margin-top: 20px; }
  .solution-prd-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solution-prd-values-grid article { min-height: 117px; padding: 18px 8px; }
  .solution-prd-values-grid article:nth-child(2n + 1) { border-left: 0; }
  .solution-prd-values-grid article:nth-child(n + 3) { border-top: 1px solid rgb(255 255 255 / 19%); }
  .solution-prd-values-grid strong { font-size: 23px; }
  .solution-prd-values-grid span { font-size: 11px; }
  .solution-prd-terminal-layout,
  .solution-prd-faq-layout { gap: 34px; }
  .solution-prd-terminal-copy h2,
  .solution-prd-faq-copy h2 { font-size: 29px; }
  .solution-prd-terminal-grid article { grid-template-columns: 42px 1fr; gap: 13px; min-height: 0; padding: 17px; }
  .solution-prd-terminal-grid article > span { width: 36px; height: 36px; font-size: 10px; }
  .solution-prd-terminal-grid h3 { font-size: 15px; }
  .solution-prd-terminal-grid p { margin-top: 5px; font-size: 11px; }
  .solution-prd-deployment-grid article { min-height: 0; padding: 26px 22px; }
  .solution-prd-deployment-grid h3 { margin-top: 23px; font-size: 21px; }
  .solution-prd-deployment-grid p { font-size: 12px; }
  .solution-prd-delivery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .solution-prd-delivery-grid li { min-height: 125px; padding: 18px 12px; }
  .solution-prd-delivery-grid strong { margin-top: 19px; font-size: 14px; }
  .solution-prd-delivery-grid span { font-size: 10px; }
  .solution-prd-faq-list button { min-height: 65px; font-size: 14px; line-height: 1.55; }
  .solution-prd-faq-list article > div { padding: 0 9px 18px 0; }
}
@media (max-width: 1000px) {
  .ticket-hero-layout {
    grid-template-columns: minmax(0, .9fr) minmax(410px, 1.1fr);
    gap: 30px;
  }

  .ticket-dashboard {
    transform: scale(.9);
    transform-origin: right center;
  }

  .ticket-advantage-layout,
  .ticket-hardware-layout,
  .ticket-faq-layout {
    gap: 52px;
  }
}

@media (max-width: 900px) {
  .ticket-hero {
    min-height: 0;
  }

  .ticket-hero-layout {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 76px 0 57px;
  }

  .ticket-dashboard {
    width: min(100%, 590px);
    margin: -8px auto 0;
    justify-self: center;
    transform: none;
  }

  .ticket-deploy-strip .container {
    grid-template-columns: 1fr;
    padding: 8px 0;
  }

  .ticket-deploy-strip .container > div {
    min-height: 74px;
    justify-content: flex-start;
    padding: 0 22px;
  }

  .ticket-deploy-strip .container > div + div {
    border-top: 1px solid #e9eef6;
    border-left: 0;
  }

  .ticket-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ticket-advantage-layout,
  .ticket-hardware-layout,
  .ticket-faq-layout {
    grid-template-columns: 1fr;
  }

  .ticket-advantage-copy {
    position: static;
  }

  .ticket-scenario-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ticket-hardware-copy {
    max-width: 580px;
  }
}

@media (max-width: 620px) {
  .ticket-hero-grid {
    background-size: 32px 32px;
  }

  .ticket-hero-layout {
    padding: 55px 0 42px;
  }

  .ticket-hero-copy h1 {
    font-size: 40px;
  }

  .ticket-hero-copy > p:not(.eyebrow) {
    margin-top: 17px;
    font-size: 14px;
  }

  .ticket-hero-actions {
    margin-top: 24px;
  }

  .ticket-hero-points {
    margin-top: 23px;
  }

  .ticket-dashboard {
    width: 410px;
    max-width: 113%;
    height: 328px;
    margin: -10px 0 -27px -5%;
    transform: scale(.82);
    transform-origin: top center;
  }

  .ticket-deploy-strip .container > div {
    min-height: 69px;
    padding: 0 18px;
  }

  .ticket-deploy-strip strong {
    font-size: 13px;
  }

  .ticket-product-section,
  .ticket-scenarios-section,
  .ticket-hardware-section,
  .ticket-faq-section,
  .ticket-advantage-section {
    padding: 70px 0;
  }

  .ticket-product-section .section-heading,
  .ticket-scenarios-section .section-heading {
    margin-bottom: 29px;
  }

  .ticket-feature-grid,
  .ticket-scenario-grid {
    grid-template-columns: 1fr;
  }

  .ticket-feature-card,
  .ticket-feature-wide {
    grid-column: auto;
    min-height: 180px;
    padding: 20px;
  }

  .ticket-feature-wide {
    padding-right: 155px;
  }

  .ticket-feature-wide::after {
    right: 17px;
    bottom: 18px;
    width: 107px;
    height: 65px;
  }

  .ticket-feature-card h3 {
    margin-top: 17px;
  }

  .ticket-advantage-layout,
  .ticket-hardware-layout,
  .ticket-faq-layout {
    gap: 33px;
  }

  .ticket-advantage-copy h2,
  .ticket-hardware-copy h2,
  .ticket-faq-copy h2 {
    font-size: 29px;
  }

  .ticket-advantage-stage {
    min-height: 204px;
    margin: 23px 0 19px;
    padding: 21px;
  }

  .ticket-advantage-stage strong {
    margin-top: 23px;
  }

  .ticket-advantage-list button {
    min-height: 82px;
    gap: 13px;
    padding: 14px;
  }

  .ticket-scenario-card {
    min-height: 245px;
    padding: 20px;
  }

  .ticket-hardware-panel {
    padding: 9px;
  }

  .ticket-hardware-image {
    min-height: 240px;
  }

  .ticket-hardware-options {
    grid-template-columns: 1fr;
    gap: 7px;
    padding-top: 9px;
  }

  .ticket-hardware-options button {
    grid-template-columns: 28px 1fr;
  }

  .ticket-faq-list button {
    min-height: 64px;
    font-size: 14px;
  }

  .ticket-faq-list article > div {
    padding: 0 10px 18px 0;
  }

  .ticket-consult-section {
    padding: 0 0 68px;
  }

  .ticket-consult-panel {
    display: block;
    min-height: 0;
    padding: 34px 25px;
    border-radius: 15px;
  }

  .ticket-consult-panel .button {
    margin-top: 25px;
  }
}

/* Desktop pages use a more compact rhythm between major content modules. */
@media (min-width: 901px) {
  .section {
    padding: 112px 0;
  }

  .trust-section {
    padding: 112px 0;
  }

  .contact-section {
    padding-bottom: 112px;
  }

  .about-story-section {
    padding: 104px 0;
  }

  .about-team-section,
  .about-values-section {
    padding: 102px 0;
  }

  .about-clients-section {
    padding-bottom: 96px;
  }

  .about-contact-section {
    padding-bottom: 88px;
  }

  .solution-overview-section,
  .solution-scenes-section,
  .solution-trust-section {
    padding: 96px 0;
  }

  .solution-capabilities-section,
  .solution-process-section {
    padding: 96px 0 102px;
  }

  .solution-cases-section {
    padding: 94px 0 100px;
  }

  .solution-final-section {
    padding-bottom: 88px;
  }

  .ticket-product-section,
  .ticket-scenarios-section,
  .transport-capabilities-section,
  .transport-process-section,
  .transport-scenarios-section {
    padding: 96px 0 102px;
  }

  .ticket-advantage-section,
  .ticket-hardware-section,
  .ticket-faq-section,
  .transport-advantage-section,
  .transport-driver-section,
  .transport-faq-section {
    padding: 98px 0;
  }

  .ticket-consult-section,
  .transport-consult-section {
    padding-bottom: 88px;
  }

  .solution-page .solution-app-home-section,
  .solution-page .trust-section[data-app-enterprise-section] {
    padding: 88px 0;
  }

  .solution-page .solution-cases-section {
    padding: 86px 0 92px;
  }
}

/* Cross-border intelligent ERP landing page. */
.cross-erp-page {
  --erp-blue: #1f72e8;
  --erp-deep: #1155ba;
  --erp-cyan: #15b9d5;
  --erp-ink: #172845;
  --erp-muted: #667791;
  overflow: hidden;
  color: var(--erp-ink);
}

.cross-erp-page .button-primary {
  background: linear-gradient(115deg, var(--erp-cyan), var(--erp-blue));
  box-shadow: 0 14px 28px rgb(31 114 232 / 23%);
}

.erp-hero {
  position: relative;
  min-height: 660px;
  overflow: hidden;
  background: radial-gradient(circle at 78% 37%, rgb(56 168 255 / 25%), transparent 25%), radial-gradient(circle at 65% 83%, rgb(42 223 203 / 13%), transparent 27%), linear-gradient(125deg, #fbfdff 0%, #edf6ff 54%, #e3f2ff 100%);
}

.erp-hero::before,
.erp-hero::after {
  position: absolute;
  content: "";
  border: 1px solid rgb(31 114 232 / 15%);
  border-radius: 50%;
}

.erp-hero::before {
  right: -240px;
  bottom: -360px;
  width: 700px;
  height: 700px;
}

.erp-hero::after {
  top: -280px;
  right: 16%;
  width: 420px;
  height: 420px;
}

.erp-hero-grid {
  position: absolute;
  inset: 0;
  opacity: .74;
  background-image: linear-gradient(rgb(40 123 217 / 6%) 1px, transparent 1px), linear-gradient(90deg, rgb(40 123 217 / 6%) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, #000, rgb(0 0 0 / 59%) 58%, transparent);
}

.erp-hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr);
  gap: 50px;
  min-height: 660px;
  align-items: center;
  padding: 74px 0;
}

.erp-hero-copy {
  max-width: 610px;
}

.erp-hero-copy .eyebrow,
.erp-ai-heading .eyebrow {
  color: var(--erp-deep);
}

.erp-hero-copy .eyebrow span,
.erp-ai-heading .eyebrow span {
  background: var(--erp-blue);
}

.erp-hero-copy h1 {
  margin: 20px 0 0;
  color: #17233b;
  font-size: clamp(38px, 3.35vw, 48px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.16;
  white-space: nowrap;
}

.erp-hero-copy h1 em {
  color: var(--erp-blue);
  font-style: normal;
}

.erp-hero-copy > p:not(.eyebrow) {
  max-width: 640px;
  margin: 22px 0 0;
  color: var(--erp-muted);
  font-size: 16px;
  line-height: 1.85;
}

.erp-desktop-break { display: block; }

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

.erp-hero-actions .button-secondary {
  color: var(--erp-deep);
  background: rgb(255 255 255 / 72%);
  border-color: #b8d4f7;
}

.erp-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 27px 0 0;
  padding: 0;
  color: #627792;
  list-style: none;
  font-size: 12px;
}

.erp-hero-points li::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 7px 1px 0;
  content: "";
  background: var(--erp-cyan);
  border-radius: 50%;
  box-shadow: 0 0 9px rgb(21 185 213 / 62%);
}

.erp-dashboard {
  position: relative;
  height: 405px;
  margin-right: 8px;
  perspective: 1000px;
}

.erp-dashboard::before {
  position: absolute;
  top: 42px;
  left: 56px;
  width: 380px;
  height: 300px;
  content: "";
  background: rgb(34 154 250 / 26%);
  border-radius: 50%;
  filter: blur(65px);
}

.erp-dashboard > :not(.erp-dashboard-float) {
  position: absolute;
}

.erp-dashboard-bar,
.erp-dashboard-body {
  box-sizing: border-box;
}

.erp-dashboard > .erp-dashboard-bar {
  top: 26px;
  right: 0;
  left: 25px;
  z-index: 2;
  display: flex;
  height: 43px;
  align-items: center;
  padding: 0 16px;
  color: rgb(223 245 255 / 91%);
  background: rgb(15 63 125 / 93%);
  border: 1px solid rgb(130 212 255 / 38%);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 24px 60px rgb(20 78 151 / 21%);
  font-size: 10px;
  transform: perspective(900px) rotateY(-7deg) rotateX(2deg);
}

.erp-dashboard-bar span {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  font-weight: 650;
}

.erp-dashboard-bar span i {
  width: 8px;
  height: 8px;
  background: #4ce1ed;
  border-radius: 2px;
  box-shadow: 0 0 9px #4ce1ed;
}

.erp-dashboard-bar small {
  margin-left: auto;
  opacity: .65;
}

.erp-dashboard-bar b {
  margin-left: 13px;
  padding: 3px 6px;
  color: #aaf6ff;
  background: rgb(78 227 240 / 16%);
  border-radius: 3px;
  font-size: 8px;
}

.erp-dashboard > .erp-dashboard-body {
  top: 69px;
  right: 0;
  bottom: 19px;
  left: 25px;
  z-index: 1;
  display: flex;
  overflow: hidden;
  background: linear-gradient(145deg, rgb(21 94 181 / 97%), rgb(9 47 107 / 98%));
  border: 1px solid rgb(130 212 255 / 38%);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 24px 60px rgb(20 78 151 / 21%);
  transform: perspective(900px) rotateY(-7deg) rotateX(2deg);
}

.erp-dashboard-body aside {
  display: flex;
  width: 47px;
  align-items: center;
  flex-direction: column;
  gap: 17px;
  padding-top: 23px;
  background: rgb(7 41 94 / 32%);
  border-right: 1px solid rgb(197 240 255 / 15%);
}

.erp-dashboard-body aside i {
  width: 14px;
  height: 14px;
  border: 1px solid rgb(201 241 255 / 43%);
  border-radius: 3px;
}

.erp-dashboard-body aside i.is-active {
  background: #45d8ec;
  border-color: #45d8ec;
  box-shadow: 0 0 10px #45d8ec;
}

.erp-dashboard-main {
  flex: 1;
  padding: 21px;
}

.erp-dashboard-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.erp-dashboard-heading small,
.erp-kpi-grid small,
.erp-chart small {
  color: rgb(211 241 255 / 65%);
  font-size: 9px;
}

.erp-dashboard-heading strong {
  display: block;
  margin-top: 2px;
  color: #f3fcff;
  font-size: 16px;
}

.erp-dashboard-heading > span {
  padding: 3px 7px;
  color: #b5f2ff;
  border: 1px solid rgb(143 229 255 / 40%);
  border-radius: 3px;
  font-size: 9px;
}

.erp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 15px;
}

.erp-kpi-grid > div {
  padding: 9px;
  background: linear-gradient(135deg, rgb(84 193 255 / 18%), rgb(148 225 255 / 5%));
  border: 1px solid rgb(184 237 255 / 17%);
  border-radius: 5px;
}

.erp-kpi-grid b {
  display: block;
  margin: 2px 0;
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
}

.erp-kpi-grid em {
  color: #9af2dc;
  font-size: 8px;
  font-style: normal;
}

.erp-chart {
  min-height: 130px;
  margin-top: 12px;
  padding: 9px;
  background: rgb(3 37 86 / 26%);
  border: 1px solid rgb(184 237 255 / 17%);
  border-radius: 5px;
}

.erp-chart > div:first-child,
.erp-chart-labels {
  display: flex;
  justify-content: space-between;
  color: rgb(233 250 255 / 92%);
  font-size: 9px;
}

.erp-chart svg {
  width: 100%;
  height: 79px;
  margin-top: 3px;
  overflow: visible;
}

.erp-chart-grid {
  stroke: rgb(198 237 255 / 16%);
  stroke-width: 1;
}

.erp-chart-fill { fill: rgb(66 203 255 / 25%); }
.erp-chart-line { fill: none; stroke: #55e2ec; stroke-width: 2; }
.erp-chart-labels { color: rgb(209 241 255 / 58%); font-size: 7px; }

.erp-dashboard-float {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 10px 12px;
  color: #effdff;
  background: linear-gradient(135deg, rgb(21 144 203 / 95%), rgb(20 91 181 / 96%));
  border: 1px solid rgb(157 233 255 / 47%);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgb(8 52 120 / 23%);
}

.erp-dashboard-float b {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  color: #bafaff;
  background: rgb(161 238 255 / 16%);
  border-radius: 6px;
  font-size: 10px;
}

.erp-dashboard-float small,
.erp-dashboard-float strong { display: block; }
.erp-dashboard-float small { color: rgb(214 246 255 / 75%); font-size: 9px; }
.erp-dashboard-float strong { margin-top: 2px; font-size: 11px; }
.erp-dashboard-purchase { top: 0; right: -5px; }
.erp-dashboard-stock { bottom: 17px; left: -5px; }

.erp-assurance-strip {
  position: relative;
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid #e7edf7;
}

.erp-assurance-strip .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.erp-assurance-strip .container > div {
  display: flex;
  min-height: 108px;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

.erp-assurance-strip .container > div + div { border-left: 1px solid #e9eef6; }
.erp-assurance-strip b { color: var(--erp-blue); font-size: 20px; }
.erp-assurance-strip strong,
.erp-assurance-strip small { display: block; }
.erp-assurance-strip strong { color: #334159; font-size: 15px; }
.erp-assurance-strip small { margin-top: 5px; color: #8490a1; font-size: 11px; }

.erp-pain-section { background: #f7f9fd; }
.erp-pain-section .section-heading,
.erp-architecture-section .section-heading,
.erp-advantage-section .section-heading,
.erp-value-section .section-heading,
.erp-deployment-section .section-heading,
.erp-delivery-section .section-heading { margin-bottom: 43px; }

.erp-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.erp-compare-card {
  min-height: 342px;
  padding: 32px;
  border-radius: 18px;
}

.erp-compare-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.erp-compare-card span {
  padding: 5px 9px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 650;
}

.erp-compare-card h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -.02em;
}

.erp-compare-card ul {
  display: grid;
  gap: 15px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.erp-compare-card li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.75;
}

.erp-compare-card li::before {
  position: absolute;
  top: .72em;
  left: 0;
  width: 6px;
  height: 6px;
  content: "";
  border-radius: 50%;
}

.erp-compare-legacy {
  color: #556276;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.erp-compare-legacy span { color: #8290a2; background: #f1f4f8; }
.erp-compare-legacy h3 { color: #3b485b; }
.erp-compare-legacy li::before { background: #a8b2c0; }

.erp-compare-ai {
  color: rgb(232 248 255 / 84%);
  background: radial-gradient(circle at 90% 11%, rgb(89 229 236 / 25%), transparent 25%), linear-gradient(135deg, #166ace, #1750a7);
  box-shadow: 0 22px 40px rgb(22 91 177 / 19%);
}

.erp-compare-ai span { color: #b9fbff; background: rgb(103 243 248 / 16%); border: 1px solid rgb(158 250 255 / 30%); }
.erp-compare-ai h3 { color: #fff; }
.erp-compare-ai li::before { background: #60ebea; box-shadow: 0 0 9px rgb(96 235 234 / 70%); }

.erp-ai-section {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.erp-ai-orb {
  position: absolute;
  top: -290px;
  right: -220px;
  width: 620px;
  height: 620px;
  pointer-events: none;
  background: radial-gradient(circle, rgb(46 171 239 / 14%), transparent 68%);
}

.erp-ai-heading {
  position: relative;
  max-width: 675px;
}

.erp-ai-heading h2 {
  margin: 16px 0 14px;
  color: #1b2b49;
  font-size: clamp(32px, 3.5vw, 47px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.25;
}

.erp-ai-heading > p:not(.eyebrow) {
  margin: 0;
  color: var(--erp-muted);
  font-size: 15px;
  line-height: 1.85;
}

.erp-ai-card-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 43px;
}

.erp-ai-card-grid article {
  position: relative;
  min-height: 244px;
  padding: 24px;
  overflow: hidden;
  color: rgb(226 248 255 / 85%);
  background: linear-gradient(145deg, #176fcf, #1453aa);
  border: 1px solid rgb(116 212 255 / 34%);
  border-radius: 15px;
  box-shadow: 0 16px 30px rgb(18 86 172 / 11%);
}

.erp-ai-card-grid article:nth-child(2) { background: linear-gradient(145deg, #177fc9, #1465b7); }
.erp-ai-card-grid article:nth-child(3) { background: linear-gradient(145deg, #145eaf, #114899); }
.erp-ai-card-grid article:nth-child(4) { background: linear-gradient(145deg, #167eb9, #1154a7); }

.erp-ai-card-grid article > span {
  position: absolute;
  top: 19px;
  right: 20px;
  color: rgb(186 239 255 / 48%);
  font-size: 11px;
  font-weight: 700;
}

.erp-ai-card-grid i {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  color: #bafaff;
  background: rgb(163 245 255 / 14%);
  border: 1px solid rgb(178 249 255 / 25%);
  border-radius: 11px;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

.erp-ai-card-grid h3 { margin: 22px 0 9px; color: #fff; font-size: 17px; }
.erp-ai-card-grid p { margin: 0; font-size: 12px; line-height: 1.75; }

.erp-ai-value {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 17px;
  align-items: center;
  margin-top: 20px;
  padding: 16px 22px;
  background: #eff8ff;
  border: 1px solid #d5eafe;
  border-radius: 10px;
}

.erp-ai-value strong { color: var(--erp-blue); font-size: 22px; }
.erp-ai-value span { margin-right: 11px; color: #596c87; font-size: 12px; }

.erp-architecture-section { background: #f7f9fd; }
.erp-architecture-flow {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.erp-architecture-flow li {
  position: relative;
  min-height: 178px;
  padding: 24px 12px;
  color: #fff;
  text-align: center;
  background: #1d72cf;
}

.erp-architecture-flow li:nth-child(2n) { background: #1664bf; }
.erp-architecture-flow li::after {
  position: absolute;
  top: calc(50% - 8px);
  right: -8px;
  z-index: 2;
  width: 16px;
  height: 16px;
  content: "";
  background: inherit;
  transform: rotate(45deg);
}

.erp-architecture-flow li:last-child::after { display: none; }
.erp-architecture-flow b,
.erp-architecture-flow i,
.erp-architecture-flow strong { position: relative; z-index: 3; display: block; }
.erp-architecture-flow b { color: rgb(178 242 255 / 65%); font-size: 14px; }
.erp-architecture-flow i { margin-top: 29px; color: #c9f7ff; font-size: 13px; font-style: normal; }
.erp-architecture-flow strong { margin-top: 8px; font-size: 17px; }

.erp-support-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.erp-support-chips span {
  padding: 10px 16px;
  color: #527092;
  background: #fff;
  border: 1px solid #dce9f7;
  border-radius: 5px;
  font-size: 14px;
}

.erp-feature-section { background: #fff; }
.erp-feature-section .section-heading { margin-bottom: 42px; }
.erp-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.erp-feature-card {
  position: relative;
  min-height: 220px;
  padding: 23px;
  overflow: hidden;
  background: #f8fbff;
  border: 1px solid #deebf8;
  border-radius: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.erp-feature-card:hover {
  border-color: #a9cef6;
  box-shadow: 0 16px 32px rgb(35 104 192 / 10%);
  transform: translateY(-3px);
}

.erp-feature-card > span {
  position: absolute;
  top: 18px;
  right: 19px;
  color: #b7cce3;
  font-size: 11px;
  font-weight: 700;
}

.erp-feature-card > i {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  color: var(--erp-blue);
  background: #e9f5ff;
  border-radius: 11px;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

.erp-feature-card h3 { margin: 22px 0 9px; color: #2a3c57; font-size: 17px; }
.erp-feature-card p { margin: 0; color: #72829a; font-size: 12px; line-height: 1.75; }
.erp-feature-highlight { background: linear-gradient(135deg, #effaff, #edf5ff); }
.erp-feature-highlight > i { color: #048da6; background: #dffaff; }

.erp-advantage-section { background: #f7f9fd; }
.erp-advantage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.erp-advantage-grid article {
  min-height: 205px;
  padding: 25px;
  background: #fff;
  border: 1px solid #e0eaf6;
  border-radius: 14px;
  transition: box-shadow .2s ease, transform .2s ease;
}

.erp-advantage-grid article:hover { box-shadow: 0 15px 30px rgb(30 95 181 / 9%); transform: translateY(-3px); }
.erp-advantage-grid b { display: grid; width: 38px; height: 38px; place-items: center; color: var(--erp-blue); background: #eaf5ff; border-radius: 10px; font-size: 16px; }
.erp-advantage-grid h3 { margin: 21px 0 9px; color: #2c3d58; font-size: 17px; }
.erp-advantage-grid p { margin: 0; color: #73829a; font-size: 12px; line-height: 1.75; }

.erp-scenarios-section { background: #fff; }
.erp-scenarios-section .section-heading { margin-bottom: 42px; }
.erp-scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}

.erp-scenario-grid span {
  position: relative;
  min-height: 105px;
  padding: 25px 23px;
  color: #355271;
  background: linear-gradient(135deg, #f7fbff, #eef7ff);
  border: 1px solid #dceaf8;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 650;
}

.erp-scenario-grid span::after {
  position: absolute;
  right: 19px;
  bottom: 18px;
  width: 20px;
  height: 20px;
  content: "";
  background: radial-gradient(circle, #64d9ea 0 2px, transparent 3px), radial-gradient(circle, #348ae8 0 2px, transparent 3px), radial-gradient(circle, #348ae8 0 2px, transparent 3px);
  background-position: 0 50%, 9px 0, 9px 100%;
  background-repeat: no-repeat;
}

.erp-value-section {
  color: #e5f8ff;
  background: radial-gradient(circle at 16% 28%, rgb(52 205 224 / 16%), transparent 20%), radial-gradient(circle at 84% 76%, rgb(56 132 255 / 24%), transparent 27%), linear-gradient(125deg, #0b3e87, #115fb4 55%, #0d4d9d);
}

.erp-value-section .eyebrow,
.erp-value-section .section-heading p:last-child { color: rgb(211 244 255 / 76%); }
.erp-value-section .eyebrow::before { background: #66e8ec; }
.erp-value-section h2 { color: #fff; }
.erp-value-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid rgb(159 231 255 / 26%);
  border-radius: 15px;
}

.erp-value-grid article {
  min-height: 156px;
  padding: 26px 20px;
  text-align: center;
}

.erp-value-grid article + article { border-left: 1px solid rgb(159 231 255 / 22%); }
.erp-value-grid strong { display: block; color: #81f0f0; font-size: 29px; letter-spacing: -.03em; }
.erp-value-grid strong small { font-size: 16px; }
.erp-value-grid span { display: block; margin-top: 12px; color: rgb(223 248 255 / 82%); font-size: 11px; line-height: 1.55; }

.erp-terminal-section { background: #fff; }
.erp-terminal-layout {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(48px, 8vw, 118px);
  align-items: center;
}

.erp-terminal-copy h2 {
  margin: 14px 0;
  color: #263a59;
  font-size: clamp(31px, 3.3vw, 43px);
  font-weight: 680;
  letter-spacing: -.03em;
  line-height: 1.28;
}

.erp-terminal-copy > p:not(.eyebrow) { margin: 0; color: var(--erp-muted); font-size: 14px; line-height: 1.85; }
.erp-terminal-copy ul { display: grid; gap: 15px; margin: 28px 0 0; padding: 0; list-style: none; }
.erp-terminal-copy li { display: grid; grid-template-columns: 112px 1fr; gap: 10px; color: #6d7e95; font-size: 12px; line-height: 1.65; }
.erp-terminal-copy li b { color: #2b547f; }

.erp-device-stage {
  position: relative;
  min-height: 388px;
  padding: 34px;
  overflow: hidden;
  background: radial-gradient(circle at 80% 16%, rgb(82 225 240 / 24%), transparent 27%), linear-gradient(135deg, #e9f5ff, #dceeff);
  border: 1px solid #cae3fb;
  border-radius: 18px;
}

.erp-device-stage::after {
  position: absolute;
  right: -78px;
  bottom: -95px;
  width: 280px;
  height: 280px;
  content: "";
  border: 1px solid rgb(33 126 221 / 17%);
  border-radius: 50%;
}

.erp-device-laptop {
  position: absolute;
  top: 50px;
  right: 59px;
  left: 38px;
  height: 253px;
  padding: 17px;
  color: #eefaff;
  background: linear-gradient(145deg, #165fb6, #0d458e);
  border: 7px solid #315778;
  border-bottom-width: 13px;
  border-radius: 12px 12px 4px 4px;
  box-shadow: 0 22px 30px rgb(16 72 141 / 20%);
}

.erp-device-laptop > div > small { color: rgb(205 241 255 / 68%); font-size: 9px; }
.erp-device-laptop > div > b { display: block; margin-top: 4px; color: #fff; font-size: 16px; }
.erp-device-laptop section { display: inline-flex; min-width: 126px; flex-direction: column; gap: 4px; margin-top: 20px; padding: 12px; background: rgb(121 211 255 / 13%); border: 1px solid rgb(198 243 255 / 19%); border-radius: 6px; }
.erp-device-laptop section span { color: rgb(207 241 255 / 70%); font-size: 8px; }
.erp-device-laptop section span i { display: inline-block; width: 5px; height: 5px; margin: 0 4px 1px 0; background: #51e7e9; border-radius: 50%; }
.erp-device-laptop section strong { font-size: 25px; }
.erp-device-laptop section em { color: #9af2db; font-size: 8px; font-style: normal; }
.erp-device-laptop .erp-mini-bars { position: absolute; right: 17px; bottom: 18px; display: flex; width: 54%; height: 107px; min-width: 0; flex-direction: row; align-items: end; gap: 8px; margin: 0; padding: 12px; }
.erp-mini-bars i { display: block; width: 13%; background: linear-gradient(#4be4e6, #2a95e9); border-radius: 3px 3px 0 0; }
.erp-mini-bars i:nth-child(1) { height: 35%; }.erp-mini-bars i:nth-child(2) { height: 61%; }.erp-mini-bars i:nth-child(3) { height: 48%; }.erp-mini-bars i:nth-child(4) { height: 80%; }.erp-mini-bars i:nth-child(5) { height: 68%; }.erp-mini-bars i:nth-child(6) { height: 94%; }

.erp-device-phone {
  position: absolute;
  z-index: 2;
  right: 29px;
  bottom: 16px;
  width: 143px;
  min-height: 196px;
  padding: 26px 14px 14px;
  color: #e7faff;
  background: linear-gradient(145deg, #1774cf, #0f57af);
  border: 6px solid #315778;
  border-radius: 20px;
  box-shadow: 0 18px 31px rgb(16 72 141 / 25%);
}

.erp-device-phone::before { position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; content: ""; background: rgb(212 247 255 / 42%); border-radius: 5px; transform: translateX(-50%); }
.erp-device-phone small { color: rgb(210 243 255 / 72%); font-size: 8px; }.erp-device-phone strong { display: block; margin-top: 16px; font-size: 12px; }.erp-device-phone b { display: block; margin-top: 5px; color: #72f1ef; font-size: 22px; }.erp-device-phone span { display: block; margin-top: 29px; padding: 7px; color: #bffbff; background: rgb(150 245 255 / 14%); border-radius: 5px; font-size: 8px; }

.erp-device-card { position: absolute; z-index: 3; bottom: 38px; left: 14px; padding: 13px; color: #e9fbff; background: linear-gradient(135deg, #138bc4, #1562b8); border: 1px solid rgb(167 242 255 / 34%); border-radius: 8px; box-shadow: 0 12px 23px rgb(13 70 145 / 18%); }
.erp-device-card small,
.erp-device-card b,
.erp-device-card span { display: block; }.erp-device-card small { color: rgb(218 245 255 / 73%); font-size: 8px; }.erp-device-card b { margin-top: 4px; color: #8af5ef; font-size: 21px; }.erp-device-card span { margin-top: 3px; font-size: 8px; }

.erp-deployment-section { background: #f7f9fd; }
.erp-deployment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.erp-deployment-grid article { min-height: 291px; padding: 32px; background: #fff; border: 1px solid #dce9f6; border-radius: 16px; }
.erp-deployment-grid article + article { color: #e4f7ff; background: linear-gradient(135deg, #176bc8, #134f9f); border-color: transparent; box-shadow: 0 20px 34px rgb(21 86 170 / 16%); }
.erp-deployment-grid span { color: var(--erp-blue); font-size: 10px; font-weight: 700; letter-spacing: .08em; }.erp-deployment-grid article + article span { color: #a9f6ff; }.erp-deployment-grid h3 { margin: 14px 0 10px; color: #2a415f; font-size: 26px; }.erp-deployment-grid article + article h3 { color: #fff; }.erp-deployment-grid p { max-width: 510px; margin: 0; color: #6e7f95; font-size: 13px; line-height: 1.8; }.erp-deployment-grid article + article p { color: rgb(225 247 255 / 80%); }.erp-deployment-grid ul { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 26px 0 0; padding: 0; color: #4e719b; list-style: none; font-size: 11px; }.erp-deployment-grid article + article ul { color: rgb(221 247 255 / 86%); }.erp-deployment-grid li::before { margin-right: 5px; content: "✓"; color: var(--erp-cyan); }

.erp-delivery-section { background: #fff; }
.erp-delivery-flow { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.erp-delivery-flow li { position: relative; min-height: 120px; padding: 22px 8px; text-align: center; background: #f5faff; border: 1px solid #dbeafa; border-radius: 10px; }.erp-delivery-flow li:not(:last-child)::after { position: absolute; top: 50%; right: -9px; z-index: 1; color: #76a9e6; content: "→"; font-size: 17px; transform: translateY(-50%); }.erp-delivery-flow b { display: block; color: var(--erp-blue); font-size: 15px; }.erp-delivery-flow span { display: block; margin-top: 16px; color: #49688a; font-size: 14px; font-weight: 650; line-height: 1.5; }

.erp-faq { max-width: 920px; margin: 58px auto 0; border-top: 1px solid #dce7f3; }.erp-faq article { border-bottom: 1px solid #dce7f3; }.erp-faq h3 { margin: 0; }.erp-faq button { display: flex; width: 100%; min-height: 72px; align-items: center; justify-content: space-between; padding: 0; color: #324861; text-align: left; background: transparent; border: 0; cursor: pointer; font-size: 15px; font-weight: 650; }.erp-faq button span { display: grid; width: 24px; height: 24px; place-items: center; color: var(--erp-blue); background: #eaf5ff; border-radius: 50%; font-size: 18px; font-weight: 400; }.erp-faq article.is-open button span { transform: rotate(45deg); }.erp-faq article > div { padding: 0 42px 20px 0; }.erp-faq p { margin: 0; color: #718096; font-size: 13px; line-height: 1.8; }

.erp-consult-section { padding-top: 0; background: #fff; }.erp-consult-panel { display: flex; min-height: 272px; align-items: center; justify-content: space-between; gap: 40px; padding: 47px 58px; overflow: hidden; color: #fff; background: radial-gradient(circle at 88% 15%, rgb(89 238 243 / 24%), transparent 22%), linear-gradient(112deg, #176ac8, #1355aa 67%, #0f438b); border-radius: 20px; box-shadow: 0 22px 46px rgb(22 85 167 / 20%); }.erp-consult-panel .eyebrow { color: rgb(255 255 255 / 68%); }.erp-consult-panel .eyebrow span { background: #fff; }.erp-consult-panel h2 { margin: 14px 0 10px; color: #fff; font-size: clamp(28px, 3vw, 40px); font-weight: 680; letter-spacing: -.03em; line-height: 1.3; }.erp-consult-panel > div > p:not(.eyebrow) { margin: 0; color: rgb(255 255 255 / 77%); font-size: 13px; }.erp-consult-panel ul { display: flex; flex-wrap: wrap; gap: 7px 17px; margin: 20px 0 0; padding: 0; color: rgb(255 255 255 / 84%); list-style: none; font-size: 11px; }.erp-consult-panel li::before { margin-right: 5px; content: "✓"; }.erp-consult-panel .button { flex: 0 0 auto; color: var(--erp-deep); background: #fff; box-shadow: 0 12px 24px rgb(5 41 105 / 16%); }

/* Project-system extensions: lifecycle delivery and enterprise project scenarios. */
.project-lifecycle-section {
  overflow: hidden;
  background: #f5fbfa;
}

.project-lifecycle-section .section-heading,
.project-scenarios-section .section-heading {
  margin-bottom: 44px;
}

.project-lifecycle-stage {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0;
  overflow: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.project-lifecycle-stage::before {
  display: none;
}

.project-lifecycle-diagram {
  display: block;
  width: 100%;
  height: auto;
}

.project-lifecycle-stage-top {
  position: relative;
  z-index: 1;
  display: flex;
  height: 58px;
  align-items: center;
  justify-content: space-between;
  color: #effffb;
  margin: 0 -22px;
  padding: 0 23px;
  background: linear-gradient(105deg, #138f80, #147f76);
}

.project-lifecycle-stage-top > div { display: flex; gap: 9px; align-items: center; font-size: 13px; font-weight: 650; }
.project-lifecycle-stage-top i { width: 9px; height: 9px; background: #6ff0d7; border-radius: 2px; box-shadow: 0 0 10px rgb(111 240 215 / 65%); }
.project-lifecycle-stage-top small { color: rgb(221 255 249 / 62%); font-size: 9px; letter-spacing: .06em; }

.project-lifecycle-stage-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 140px 1fr 232px;
  gap: 22px;
  min-height: 156px;
  align-items: center;
  padding: 22px 12px;
}

.project-lifecycle-summary { display: grid; gap: 5px; align-content: center; min-height: 105px; padding: 18px; background: #eefaf7; border: 1px solid #d4eee7; border-radius: 10px; }
.project-lifecycle-summary small { color: #71928f; font-size: 10px; }.project-lifecycle-summary strong { color: #268b7d; font-size: 23px; }.project-lifecycle-summary span { color: #29a88f; font-size: 10px; }

.project-lifecycle-timeline { position: relative; height: 84px; border-bottom: 1px solid #cce7e1; }
.project-lifecycle-timeline::before { position: absolute; top: 38px; right: 7%; left: 7%; height: 3px; content: ""; background: linear-gradient(90deg, #2ac4a7, #1a9b8a 45%, #77d9c9); border-radius: 5px; }
.project-lifecycle-timeline i { position: absolute; top: 29px; width: 20px; height: 20px; background: #fff; border: 5px solid #23a891; border-radius: 50%; box-shadow: 0 0 0 5px #e4f8f3; }.project-lifecycle-timeline i::after { position: absolute; top: -23px; left: 50%; color: #5d8781; content: attr(data-label); font-size: 10px; transform: translateX(-50%); }.project-lifecycle-timeline i:nth-child(1) { left: 7%; }.project-lifecycle-timeline i:nth-child(2) { left: 34%; }.project-lifecycle-timeline i:nth-child(3) { left: 61%; }.project-lifecycle-timeline i:nth-child(4) { left: calc(93% - 20px); border-color: #87d6ca; }
.project-lifecycle-timeline i:nth-child(1)::after { content: "项目启动"; }.project-lifecycle-timeline i:nth-child(2)::after { content: "计划基线"; }.project-lifecycle-timeline i:nth-child(3)::after { content: "过程监控"; }.project-lifecycle-timeline i:nth-child(4)::after { content: "成果验收"; }

.project-lifecycle-mini-chart { display: flex; height: 53px; align-items: end; gap: 7px; padding: 9px 14px; background: linear-gradient(180deg, #f9fefd, #eefaf7); border: 1px solid #d7eee8; border-radius: 8px; }.project-lifecycle-mini-chart span { width: 12%; background: linear-gradient(#5bd4bd, #159c89); border-radius: 3px 3px 0 0; }.project-lifecycle-mini-chart span:nth-child(1) { height: 34%; }.project-lifecycle-mini-chart span:nth-child(2) { height: 55%; }.project-lifecycle-mini-chart span:nth-child(3) { height: 44%; }.project-lifecycle-mini-chart span:nth-child(4) { height: 76%; }.project-lifecycle-mini-chart span:nth-child(5) { height: 66%; }.project-lifecycle-mini-chart span:nth-child(6) { height: 92%; }

.project-lifecycle-status { display: grid; grid-template-columns: auto auto 1fr; gap: 7px; align-items: center; padding: 15px; background: #fff; border: 1px solid #dceee9; border-radius: 10px; }.project-lifecycle-status span { color: #728d89; font-size: 10px; }.project-lifecycle-status b { color: #159c89; font-size: 24px; }.project-lifecycle-status > i { height: 6px; background: #e1f2ee; border-radius: 5px; }.project-lifecycle-status > i em { display: block; width: 78%; height: 100%; background: linear-gradient(90deg, #1cae98, #5edac1); border-radius: inherit; }.project-lifecycle-status small { grid-column: 1 / -1; color: #2eaa91; font-size: 10px; }

.project-lifecycle-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 -22px -22px;
  padding: 0;
  list-style: none;
}

.project-lifecycle-flow li {
  position: relative;
  min-height: 265px;
  padding: 25px 26px;
  overflow: hidden;
  background: rgb(255 255 255 / 86%);
  border-top: 1px solid #d7ece7;
}

.project-lifecycle-flow li::before {
  position: absolute;
  top: 44px;
  right: -15px;
  z-index: 1;
  width: 30px;
  height: 30px;
  content: "";
  background: #fff;
  border-top: 1px solid #d7ece7;
  border-right: 1px solid #d7ece7;
  transform: rotate(45deg);
}

.project-lifecycle-flow li:last-child::before { display: none; }
.project-lifecycle-flow li + li { border-left: 1px solid #d7ece7; }
.project-lifecycle-flow li.is-active { background: linear-gradient(180deg, #ecfaf6, #fff); }

.project-lifecycle-flow li > span {
  position: absolute;
  top: 19px;
  right: 21px;
  color: #b9d8d1;
  font-size: 11px;
  font-weight: 700;
}

.project-lifecycle-flow li > i {
  display: grid;
  width: 47px;
  height: 47px;
  place-items: center;
  color: #118b7d;
  background: #e7f8f4;
  border: 1px solid #cbece4;
  border-radius: 13px;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
}

.project-lifecycle-flow b,
.project-lifecycle-flow h3,
.project-lifecycle-flow p,
.project-lifecycle-flow small { display: block; }
.project-lifecycle-flow b { margin-top: 28px; color: #119180; font-size: 11px; font-weight: 700; }
.project-lifecycle-flow h3 { margin: 7px 0 9px; color: #2e4b50; font-size: 19px; }
.project-lifecycle-flow p { margin: 0; color: #71868a; font-size: 12px; line-height: 1.75; }
.project-lifecycle-flow small { margin-top: 21px; color: #208f81; font-size: 10px; font-weight: 650; }

.project-scenarios-section { background: #fff; }

.project-scenario-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.project-scenario-capability-grid article {
  display: grid;
  grid-template-columns: 54px 1fr;
  column-gap: 17px;
  min-height: 129px;
  padding: 24px 27px;
  background: #fff;
  border: 1px solid #dcece8;
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.project-scenario-capability-grid article:hover {
  border-color: #abdacf;
  box-shadow: 0 15px 29px rgb(14 112 96 / 9%);
  transform: translateY(-3px);
}

.project-scenario-capability-grid i {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  grid-row: span 2;
  font-style: normal;
  transform: translateY(12px);
}

.project-scenario-capability-grid i img {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: hue-rotate(114deg) saturate(.82) brightness(.88);
}

.project-scenario-capability-grid h3 { align-self: end; margin: 0 0 7px; color: #314f53; font-size: 18px; }
.project-scenario-capability-grid p { margin: 0; color: #74898c; font-size: 12px; line-height: 1.75; }

/* Production system landing page: industrial blue with operational green accents. */
.production-page {
  --production-blue: #2477d4;
  --production-deep: #0c3972;
  --production-cyan: #54e2dc;
  --production-green: #37c58f;
  --production-ink: #263b57;
  --production-muted: #71829a;
  overflow: hidden;
  background: #fff;
}

.production-page .section { padding: 96px 0; }
.production-page .button-primary { background: linear-gradient(104deg, #2186e5, #168cc9); box-shadow: 0 11px 24px rgb(19 101 188 / 28%); }

.production-hero {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  color: #e9f6ff;
  background: radial-gradient(circle at 79% 32%, rgb(74 208 219 / 27%), transparent 22%), radial-gradient(circle at 6% 102%, rgb(31 124 216 / 35%), transparent 28%), linear-gradient(123deg, #082b5a, #0d4e91 56%, #0c3c7a);
}

.production-hero::before,
.production-hero::after {
  position: absolute;
  content: "";
  border: 1px solid rgb(123 220 255 / 14%);
  border-radius: 50%;
}

.production-hero::before { top: -340px; right: -115px; width: 760px; height: 760px; }
.production-hero::after { bottom: -430px; left: -200px; width: 780px; height: 780px; }

.production-hero-grid {
  position: absolute;
  inset: 0;
  opacity: .53;
  background-image: linear-gradient(rgb(150 225 255 / 9%) 1px, transparent 1px), linear-gradient(90deg, rgb(150 225 255 / 9%) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 88%);
  mask-image: linear-gradient(90deg, #000 20%, transparent 88%);
}

.production-hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .93fr 1.07fr;
  min-height: 620px;
  align-items: center;
  gap: clamp(32px, 6vw, 90px);
  padding: 88px 0 68px;
}

.production-hero-copy { max-width: 596px; }
.production-hero-copy .eyebrow { color: rgb(204 240 255 / 78%); }
.production-hero-copy .eyebrow span { background: #63e6dd; box-shadow: 0 0 0 5px rgb(88 231 225 / 12%); }
.production-hero-copy h1 { margin: 0; color: #fff; font-size: clamp(40px, 3.8vw, 56px); font-weight: 680; letter-spacing: -.055em; line-height: 1.17; }
.production-hero-copy h1 em { color: #6ae5dd; font-style: normal; }
.production-mobile-break { display: none; }
.production-hero-copy > p:not(.eyebrow) { max-width: 540px; margin: 22px 0 0; color: rgb(227 246 255 / 79%); font-size: 16px; line-height: 1.85; }
.production-hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.production-hero-actions .button-secondary { color: #dff4ff; background: rgb(224 246 255 / 8%); border-color: rgb(187 233 255 / 37%); }
.production-hero-points { display: flex; flex-wrap: wrap; gap: 18px; margin: 29px 0 0; padding: 0; color: rgb(215 245 255 / 83%); list-style: none; font-size: 12px; }
.production-hero-points li::before { display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; content: ""; background: #58e6da; border-radius: 50%; box-shadow: 0 0 10px rgb(88 230 218 / 72%); }

.production-dashboard {
  position: relative;
  width: min(100%, 572px);
  min-height: 352px;
  justify-self: end;
  overflow: visible;
  color: #e9f8ff;
  background: linear-gradient(145deg, rgb(30 112 181 / 88%), rgb(9 48 100 / 97%));
  border: 1px solid rgb(155 232 255 / 31%);
  border-radius: 15px;
  box-shadow: 0 28px 48px rgb(3 30 76 / 32%), inset 0 1px 0 rgb(255 255 255 / 13%);
  transform: perspective(1100px) rotateY(-3deg) rotateX(1deg);
}

.production-dashboard::before { position: absolute; inset: 11px; content: ""; border: 1px solid rgb(155 232 255 / 13%); border-radius: 9px; pointer-events: none; }
.production-dashboard-top,
.production-dashboard-body { position: relative; z-index: 1; }
.production-dashboard-top { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; height: 54px; align-items: center; padding: 0 22px; border-bottom: 1px solid rgb(174 234 255 / 15%); font-size: 11px; }
.production-dashboard-top span { display: flex; gap: 7px; align-items: center; font-weight: 650; }
.production-dashboard-top span i { width: 7px; height: 7px; background: #5de6d8; border-radius: 50%; box-shadow: 0 0 8px #5de6d8; }
.production-dashboard-top small { color: rgb(217 247 255 / 58%); font-size: 9px; }.production-dashboard-top b { padding: 4px 7px; color: #79f0e4; background: rgb(104 236 224 / 12%); border: 1px solid rgb(105 239 225 / 25%); border-radius: 4px; font-size: 8px; letter-spacing: .09em; }
.production-dashboard-body { display: grid; grid-template-columns: 56px 1fr; min-height: 298px; }
.production-dashboard-body aside { display: grid; align-content: start; gap: 16px; padding: 22px 20px; border-right: 1px solid rgb(180 238 255 / 13%); }
.production-dashboard-body aside i { width: 16px; height: 4px; background: rgb(192 237 255 / 27%); border-radius: 4px; }.production-dashboard-body aside i.is-active { background: #63e4da; box-shadow: 0 0 9px rgb(99 228 218 / 62%); }
.production-dashboard-main { padding: 22px 22px 19px; }
.production-dashboard-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.production-dashboard-heading small,.production-kpi-grid small,.production-chart small { display: block; color: rgb(205 242 255 / 60%); font-size: 9px; }.production-dashboard-heading strong { display: block; margin-top: 4px; color: #fff; font-size: 17px; }.production-dashboard-heading > span { padding: 5px 7px; color: #7af2e1; background: rgb(90 237 214 / 12%); border-radius: 4px; font-size: 8px; }
.production-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 19px; }.production-kpi-grid > div { min-height: 74px; padding: 11px; background: rgb(159 227 255 / 8%); border: 1px solid rgb(174 234 255 / 11%); border-radius: 7px; }.production-kpi-grid b { display: block; margin-top: 8px; color: #fff; font-size: 17px; }.production-kpi-grid em { display: block; margin-top: 4px; color: #79ecdd; font-size: 8px; font-style: normal; }
.production-chart { margin-top: 16px; padding: 13px 13px 9px; background: rgb(14 77 143 / 38%); border: 1px solid rgb(173 233 255 / 13%); border-radius: 7px; }.production-chart > div:first-child,.production-chart-labels { display: flex; justify-content: space-between; }.production-chart > div:first-child { color: rgb(226 246 255 / 89%); font-size: 9px; }.production-chart svg { display: block; width: 100%; height: 89px; margin-top: 8px; overflow: visible; }.production-chart-grid { fill: none; stroke: rgb(176 236 255 / 13%); stroke-width: 1; }.production-chart-fill { fill: rgb(88 229 217 / 15%); }.production-chart-line { fill: none; stroke: #63e7da; stroke-width: 2; }.production-chart-labels { color: rgb(210 242 255 / 52%); font-size: 8px; }
.production-dashboard-float { position: absolute; z-index: 3; display: flex; gap: 8px; align-items: center; padding: 10px 12px; color: #eefaff; background: linear-gradient(135deg, rgb(23 116 188 / 96%), rgb(13 72 139 / 96%)); border: 1px solid rgb(170 238 255 / 34%); border-radius: 8px; box-shadow: 0 12px 24px rgb(2 30 74 / 26%); }.production-dashboard-float b { display: grid; width: 22px; height: 22px; place-items: center; color: #0d5a94; background: #69e7d9; border-radius: 50%; font-size: 11px; }.production-dashboard-float small,.production-dashboard-float strong { display: block; }.production-dashboard-float small { color: rgb(215 246 255 / 74%); font-size: 8px; }.production-dashboard-float strong { margin-top: 2px; font-size: 10px; }.production-dashboard-order { top: -17px; right: -21px; }.production-dashboard-alert { bottom: 20px; left: -28px; }.production-dashboard-alert b { color: #bc7021; background: #ffcd80; }

.production-assurance-strip { background: #fff; border-bottom: 1px solid #e7edf5; }.production-assurance-strip .container { display: grid; grid-template-columns: repeat(4, 1fr); }.production-assurance-strip .container > div { display: flex; min-height: 100px; align-items: center; gap: 12px; padding: 0 25px; }.production-assurance-strip .container > div + div { border-left: 1px solid #edf1f6; }.production-assurance-strip b { color: var(--production-blue); font-size: 20px; }.production-assurance-strip strong,.production-assurance-strip small { display: block; }.production-assurance-strip strong { color: #33445c; font-size: 14px; }.production-assurance-strip small { margin-top: 5px; color: #8492a4; font-size: 10px; line-height: 1.4; }

.production-pain-section,.production-architecture-section,.production-advantage-section { background: #f6f8fc; }.production-pain-section .section-heading,.production-architecture-section .section-heading,.production-advantage-section .section-heading,.production-value-section .section-heading,.production-terminal-section .section-heading,.production-delivery-section .section-heading { margin-bottom: 43px; }
.production-compare-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 17px; }.production-compare-card { display: grid; grid-template-rows: auto 1fr; min-height: 362px; padding: 33px; border-radius: 16px; }.production-compare-card > div { padding-bottom: 24px; border-bottom: 1px solid currentColor; }.production-compare-card span { display: inline-block; padding: 5px 9px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .06em; }.production-compare-card h3 { margin: 13px 0 0; font-size: 24px; letter-spacing: -.035em; }.production-compare-card ul { display: grid; gap: 13px; align-content: start; margin: 23px 0 0; padding: 0; list-style: none; }.production-compare-card li { display: grid; grid-template-columns: 15px 1fr; gap: 9px; font-size: 12px; line-height: 1.55; }.production-compare-card li::before { display: grid; width: 15px; height: 15px; place-items: center; content: ""; border-radius: 50%; }.production-compare-legacy { color: #a8b3c1; background: #fff; border: 1px solid #e2e7ee; }.production-compare-legacy span { color: #7f8b9c; background: #f0f3f7; }.production-compare-legacy h3 { color: #36465a; }.production-compare-legacy li { color: #697a8f; }.production-compare-legacy li::before { background: #b2bdc9; }.production-compare-smart { color: rgb(160 239 233 / 22%); background: linear-gradient(135deg, #166bb2, #0a477f); box-shadow: 0 20px 35px rgb(10 77 142 / 17%); }.production-compare-smart span { color: #b3fbf2; background: rgb(100 238 222 / 13%); border: 1px solid rgb(153 250 238 / 24%); }.production-compare-smart h3 { color: #fff; }.production-compare-smart li { color: rgb(223 247 255 / 88%); }.production-compare-smart li::before { background: #5ce1cf; box-shadow: 0 0 9px rgb(92 225 207 / 64%); }

.production-architecture-flow { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; margin: 0; padding: 0; overflow: hidden; color: #e6f8ff; list-style: none; border-radius: 13px; box-shadow: 0 15px 32px rgb(11 72 130 / 14%); }.production-architecture-flow li { position: relative; min-height: 160px; padding: 23px 13px; overflow: hidden; background: linear-gradient(145deg, #125d9f, #104c8a); }.production-architecture-flow li:nth-child(2n) { background: linear-gradient(145deg, #1772b5, #105b9f); }.production-architecture-flow li::after { position: absolute; top: 50%; right: -11px; z-index: 3; width: 21px; height: 21px; content: ""; background: inherit; border-top: 1px solid rgb(214 249 255 / 36%); border-right: 1px solid rgb(214 249 255 / 36%); transform: translateY(-50%) rotate(45deg); }.production-architecture-flow li:last-child::after { display: none; }.production-architecture-flow b,.production-architecture-flow i,.production-architecture-flow strong { position: relative; z-index: 2; display: block; }.production-architecture-flow b { color: rgb(181 242 255 / 66%); font-size: 11px; }.production-architecture-flow i { margin-top: 25px; color: #ccf8f5; font-size: 10px; font-style: normal; }.production-architecture-flow strong { margin-top: 6px; font-size: 13px; }.production-support-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 23px; }.production-support-chips span { padding: 8px 12px; color: #517394; background: #fff; border: 1px solid #dbe7f3; border-radius: 999px; font-size: 11px; }

.production-feature-section,.production-scenarios-section,.production-terminal-section,.production-delivery-section { background: #fff; }.production-feature-section .section-heading,.production-scenarios-section .section-heading { margin-bottom: 42px; }.production-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.production-feature-card { position: relative; min-height: 239px; padding: 23px; overflow: hidden; background: #fff; border: 1px solid #dfe9f2; border-radius: 13px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }.production-feature-card:hover { border-color: #a7cee7; box-shadow: 0 15px 28px rgb(16 99 176 / 10%); transform: translateY(-3px); }.production-feature-card > span { position: absolute; top: 19px; right: 20px; color: #b9ccda; font-size: 11px; font-weight: 700; }.production-feature-card > i { display: grid; width: 42px; height: 42px; place-items: center; color: #176eb5; background: #e8f5ff; border-radius: 11px; font-size: 16px; font-style: normal; font-weight: 700; }.production-feature-card h3 { margin: 22px 0 9px; color: #283e5a; font-size: 17px; }.production-feature-card p { margin: 0; color: #71829a; font-size: 12px; line-height: 1.75; }.production-feature-highlight { background: linear-gradient(135deg, #effbfb, #edf5ff); }.production-feature-highlight > i { color: #087f90; background: #dff8f7; }

.production-advantage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.production-advantage-grid article { min-height: 205px; padding: 26px; background: #fff; border: 1px solid #dfe9f2; border-radius: 13px; transition: box-shadow .2s ease, transform .2s ease; }.production-advantage-grid article:hover { box-shadow: 0 15px 30px rgb(30 95 181 / 9%); transform: translateY(-3px); }.production-advantage-grid b { display: grid; width: 40px; height: 40px; place-items: center; color: var(--production-blue); background: #e9f5ff; border-radius: 10px; font-size: 14px; }.production-advantage-grid h3 { margin: 20px 0 9px; color: #2c405c; font-size: 17px; }.production-advantage-grid p { margin: 0; color: #73839a; font-size: 12px; line-height: 1.75; }

.production-scenario-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; }.production-scenario-grid span { position: relative; display: grid; min-height: 103px; place-items: center; padding: 20px 13px; overflow: hidden; color: #2c5b86; text-align: center; background: linear-gradient(135deg, #eff8ff, #f8fcff); border: 1px solid #d8e9f7; border-radius: 11px; font-size: 14px; font-weight: 650; transition: transform .2s ease, box-shadow .2s ease; }.production-scenario-grid span::after { position: absolute; right: -28px; bottom: -34px; width: 84px; height: 84px; content: ""; border: 1px solid rgb(58 137 207 / 14%); border-radius: 50%; }.production-scenario-grid span:hover { box-shadow: 0 13px 23px rgb(28 107 179 / 10%); transform: translateY(-3px); }

.production-value-section { color: #e5f8ff; background: radial-gradient(circle at 17% 25%, rgb(57 222 208 / 17%), transparent 21%), radial-gradient(circle at 84% 77%, rgb(55 139 255 / 24%), transparent 28%), linear-gradient(125deg, #0a3a77, #0d5a9e 55%, #0a477f); }.production-value-section .eyebrow,.production-value-section .section-heading p:last-child { color: rgb(212 245 255 / 78%); }.production-value-section .eyebrow::before { background: #65e8dd; }.production-value-section h2 { color: #fff; }.production-value-grid { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid rgb(161 233 255 / 27%); border-radius: 14px; }.production-value-grid article { min-height: 155px; padding: 26px 15px; text-align: center; }.production-value-grid article + article { border-left: 1px solid rgb(159 231 255 / 22%); }.production-value-grid strong { display: block; color: #78eee2; font-size: 27px; letter-spacing: -.04em; }.production-value-grid strong small { font-size: 15px; }.production-value-grid span { display: block; margin-top: 12px; color: rgb(225 248 255 / 84%); font-size: 11px; line-height: 1.55; }

.production-case-section { background: #f6f8fc; }.production-case-section .section-heading { margin-bottom: 42px; }.production-case-carousel { overflow: hidden; }.production-case-grid { display: grid; grid-auto-columns: calc((100% - 32px) / 3); grid-auto-flow: column; grid-template-columns: none; gap: 16px; overflow: auto hidden; padding-bottom: 7px; scroll-behavior: smooth; scrollbar-width: none; }.production-case-grid::-webkit-scrollbar { display: none; }.production-case-card { display: flex; min-height: 334px; flex-direction: column; justify-content: space-between; padding: 29px; overflow: hidden; color: #effaff; background: linear-gradient(145deg, #135a9e, #0b427b); border-radius: 15px; box-shadow: 0 15px 28px rgb(9 63 120 / 15%); }.production-case-card:nth-child(2) { background: linear-gradient(145deg, #146c9b, #0b526e); }.production-case-card:nth-child(3) { background: linear-gradient(145deg, #2a6398, #244779); }.production-case-card:nth-child(4) { background: linear-gradient(145deg, #2a679d, #214b82); }.production-case-card span { color: #8ef1e1; font-size: 11px; font-weight: 700; letter-spacing: .06em; }.production-case-card h3 { margin: 17px 0 10px; color: #fff; font-size: 22px; letter-spacing: -.03em; }.production-case-card p { margin: 0; color: rgb(230 249 255 / 81%); font-size: 13px; line-height: 1.8; }.production-case-card ul { display: grid; gap: 8px; margin: 31px 0 0; padding: 16px 0 0; color: rgb(224 248 255 / 87%); border-top: 1px solid rgb(204 243 255 / 19%); list-style: none; font-size: 11px; }.production-case-card li::before { margin-right: 7px; content: "✓"; color: #72ecdc; }.production-case-controls { display: flex; justify-content: center; gap: 12px; align-items: center; margin-top: 24px; }.production-case-controls button { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; color: #2b70a7; background: #fff; border: 1px solid #d5e5f2; border-radius: 50%; cursor: pointer; transition: color .2s ease, background .2s ease; }.production-case-controls button:not(:disabled):hover { color: #fff; background: #2378c5; }.production-case-controls button:disabled { color: #b4c4d1; cursor: default; }.production-case-controls > span { display: flex; gap: 6px; }.production-case-controls i { width: 6px; height: 6px; background: #c7d6e2; border-radius: 50%; }.production-case-controls i.is-active { width: 18px; background: #2b82cf; border-radius: 8px; }

.production-terminal-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(48px, 8vw, 118px); align-items: center; }.production-terminal-copy h2 { margin: 14px 0; color: #263c59; font-size: clamp(31px, 3.3vw, 43px); font-weight: 680; letter-spacing: -.03em; line-height: 1.28; }.production-terminal-copy > p:not(.eyebrow) { margin: 0; color: var(--production-muted); font-size: 14px; line-height: 1.85; }.production-terminal-copy ul { display: grid; gap: 15px; margin: 28px 0 0; padding: 0; list-style: none; }.production-terminal-copy li { display: grid; grid-template-columns: 112px 1fr; gap: 10px; color: #6d7f96; font-size: 12px; line-height: 1.65; }.production-terminal-copy li b { color: #2c5987; }
.production-device-stage { position: relative; min-height: 386px; padding: 34px; overflow: hidden; background: radial-gradient(circle at 80% 16%, rgb(93 224 221 / 25%), transparent 27%), linear-gradient(135deg, #e9f7ff, #d9ecff); border: 1px solid #c9e1f6; border-radius: 18px; }.production-device-stage::after { position: absolute; right: -79px; bottom: -96px; width: 282px; height: 282px; content: ""; border: 1px solid rgb(32 125 220 / 17%); border-radius: 50%; }.production-device-screen { position: absolute; top: 49px; right: 59px; left: 38px; height: 253px; padding: 20px; color: #eafaff; background: linear-gradient(145deg, #176ab4, #0b407c); border: 7px solid #315979; border-bottom-width: 13px; border-radius: 12px 12px 4px 4px; box-shadow: 0 22px 30px rgb(16 72 141 / 20%); }.production-device-screen small { color: rgb(205 241 255 / 68%); font-size: 9px; }.production-device-screen b { display: block; margin-top: 4px; color: #fff; font-size: 16px; }.production-device-screen strong { display: block; margin-top: 18px; color: #72eddf; font-size: 29px; }.production-device-screen span { display: block; width: fit-content; margin-top: 6px; padding: 7px; color: #d7fbf9; background: rgb(111 241 225 / 12%); border: 1px solid rgb(177 247 239 / 18%); border-radius: 5px; font-size: 8px; }.production-device-screen span i { display: inline-block; width: 5px; height: 5px; margin: 0 4px 1px 0; background: #60ead9; border-radius: 50%; }.production-mini-bars { position: absolute; right: 17px; bottom: 18px; display: flex; width: 52%; height: 108px; align-items: end; gap: 8px; margin: 0; padding: 12px; background: rgb(109 210 255 / 10%); border: 1px solid rgb(198 243 255 / 17%); border-radius: 6px; }.production-mini-bars i { display: block; width: 13%; background: linear-gradient(#5ce4da, #2180d3); border-radius: 3px 3px 0 0; }.production-mini-bars i:nth-child(1) { height: 35%; }.production-mini-bars i:nth-child(2) { height: 61%; }.production-mini-bars i:nth-child(3) { height: 48%; }.production-mini-bars i:nth-child(4) { height: 80%; }.production-mini-bars i:nth-child(5) { height: 68%; }.production-mini-bars i:nth-child(6) { height: 94%; }.production-device-phone { position: absolute; z-index: 2; right: 29px; bottom: 16px; width: 143px; min-height: 196px; padding: 27px 14px 14px; color: #e7faff; background: linear-gradient(145deg, #1685bb, #0d5e96); border: 6px solid #315979; border-radius: 20px; box-shadow: 0 18px 31px rgb(16 72 141 / 25%); }.production-device-phone::before { position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; content: ""; background: rgb(212 247 255 / 42%); border-radius: 5px; transform: translateX(-50%); }.production-device-phone small { color: rgb(210 243 255 / 72%); font-size: 8px; }.production-device-phone strong { display: block; margin-top: 16px; font-size: 11px; }.production-device-phone b { display: block; margin-top: 8px; color: #78f0df; font-size: 17px; }.production-device-phone span { display: block; margin-top: 29px; padding: 7px; color: #c8fcf7; background: rgb(149 245 255 / 14%); border-radius: 5px; font-size: 8px; }.production-device-card { position: absolute; z-index: 3; bottom: 38px; left: 14px; padding: 13px; color: #e9fbff; background: linear-gradient(135deg, #177bb8, #1760a6); border: 1px solid rgb(167 242 255 / 34%); border-radius: 8px; box-shadow: 0 12px 23px rgb(13 70 145 / 18%); }.production-device-card small,.production-device-card b,.production-device-card span { display: block; }.production-device-card small { color: rgb(218 245 255 / 73%); font-size: 8px; }.production-device-card b { margin-top: 4px; color: #8df3e6; font-size: 21px; }.production-device-card span { margin-top: 3px; font-size: 8px; }

.production-delivery-section { background: #f6f8fc; }.production-delivery-flow { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }.production-delivery-flow li { position: relative; min-height: 104px; padding: 19px 8px; text-align: center; background: #fff; border: 1px solid #dbe7f2; border-radius: 10px; }.production-delivery-flow li:not(:last-child)::after { position: absolute; top: 50%; right: -9px; z-index: 1; color: #65a1d9; content: "→"; font-size: 15px; transform: translateY(-50%); }.production-delivery-flow b { display: block; color: var(--production-blue); font-size: 12px; }.production-delivery-flow span { display: block; margin-top: 14px; color: #49698b; font-size: 11px; line-height: 1.5; }.production-faq { max-width: 920px; margin: 57px auto 0; border-top: 1px solid #dbe5f0; }.production-faq article { border-bottom: 1px solid #dbe5f0; }.production-faq h3 { margin: 0; }.production-faq button { display: flex; width: 100%; min-height: 72px; align-items: center; justify-content: space-between; padding: 0; color: #324a63; text-align: left; background: transparent; border: 0; cursor: pointer; font-size: 15px; font-weight: 650; }.production-faq button span { display: grid; width: 24px; height: 24px; place-items: center; color: var(--production-blue); background: #e8f5ff; border-radius: 50%; font-size: 18px; font-weight: 400; }.production-faq article.is-open button span { transform: rotate(45deg); }.production-faq article > div { padding: 0 42px 20px 0; }.production-faq p { margin: 0; color: #718299; font-size: 13px; line-height: 1.8; }

.production-consult-section { padding: 48px 0 96px !important; background: #fff; }.production-consult-panel { display: flex; min-height: 272px; align-items: center; justify-content: space-between; gap: 40px; padding: 47px 58px; overflow: hidden; color: #fff; background: radial-gradient(circle at 88% 15%, rgb(87 232 221 / 24%), transparent 22%), linear-gradient(112deg, #176fc5, #0e589c 67%, #0a3f7c); border-radius: 20px; box-shadow: 0 22px 46px rgb(15 80 151 / 20%); }.production-consult-panel .eyebrow { color: rgb(255 255 255 / 68%); }.production-consult-panel .eyebrow span { background: #fff; }.production-consult-panel h2 { margin: 14px 0 10px; color: #fff; font-size: clamp(27px, 3vw, 39px); font-weight: 680; letter-spacing: -.03em; line-height: 1.3; }.production-consult-panel > div > p:not(.eyebrow) { margin: 0; color: rgb(255 255 255 / 77%); font-size: 13px; }.production-consult-panel ul { display: flex; flex-wrap: wrap; gap: 7px 17px; margin: 20px 0 0; padding: 0; color: rgb(255 255 255 / 84%); list-style: none; font-size: 11px; }.production-consult-panel li::before { margin-right: 5px; content: "✓"; }.production-consult-panel .button { flex: 0 0 auto; color: #0c4c8a; background: #fff; box-shadow: 0 12px 24px rgb(5 41 105 / 16%); }

@media (min-width: 901px) {
  .production-advantage-section .section-heading > p:last-child,
  .production-value-section .section-heading > p:last-child,
  .production-case-section .section-heading > p:last-child,
  .project-lifecycle-section .section-heading > p:last-child,
  .project-scenarios-section .section-heading > p:last-child {
    max-width: none;
    white-space: nowrap;
  }
}

@media (min-width: 901px) {
  .erp-delivery-section .section-heading > p:last-child {
    max-width: none;
    white-space: nowrap;
  }

  .cross-erp-page .erp-pain-section,
  .cross-erp-page .erp-ai-section,
  .cross-erp-page .erp-architecture-section,
  .cross-erp-page .erp-feature-section,
  .cross-erp-page .erp-advantage-section,
  .cross-erp-page .erp-scenarios-section,
  .cross-erp-page .erp-value-section,
  .cross-erp-page .erp-terminal-section,
  .cross-erp-page .erp-deployment-section,
  .cross-erp-page .erp-delivery-section { padding: 96px 0; }

  .cross-erp-page .erp-consult-section { padding: 0 0 88px; }
}

@media (max-width: 900px) {
  .erp-hero { min-height: 0; }
  .erp-hero-layout { grid-template-columns: 1fr; min-height: 0; padding: 76px 0 57px; }
  .erp-dashboard { width: min(100%, 590px); margin: -8px auto 0; justify-self: center; transform: none; }
  .erp-assurance-strip .container { grid-template-columns: 1fr; padding: 8px 0; }
  .erp-assurance-strip .container > div { min-height: 74px; justify-content: flex-start; padding: 0 22px; }
  .erp-assurance-strip .container > div + div { border-top: 1px solid #e9eef6; border-left: 0; }
  .erp-ai-card-grid { grid-template-columns: repeat(2, 1fr); }
  .erp-architecture-flow { grid-template-columns: repeat(4, 1fr); }
  .erp-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .erp-value-grid { grid-template-columns: repeat(3, 1fr); }
  .erp-value-grid article:nth-child(4) { border-left: 0; }
  .erp-value-grid article:nth-child(n+4) { border-top: 1px solid rgb(159 231 255 / 22%); }
  .erp-terminal-layout { grid-template-columns: 1fr; }
  .erp-terminal-copy { max-width: 580px; }
  .erp-delivery-flow { grid-template-columns: repeat(4, 1fr); }
  .erp-delivery-flow li:nth-child(4)::after { display: none; }
  .project-lifecycle-flow { grid-template-columns: repeat(2, 1fr); }
  .project-lifecycle-flow li:nth-child(2)::before { display: none; }
  .project-lifecycle-stage-main { grid-template-columns: 130px 1fr; }
  .project-lifecycle-status { display: none; }
  .project-scenario-capability-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .erp-hero-grid { background-size: 32px 32px; }
  .erp-hero-layout { padding: 55px 0 42px; }
  .erp-hero-copy h1 { white-space: normal; font-size: 39px; }
  .erp-hero-copy > p:not(.eyebrow) { margin-top: 17px; font-size: 14px; }
  .erp-desktop-break { display: none; }
  .erp-hero-actions { margin-top: 24px; }
  .erp-hero-points { margin-top: 23px; }
  .erp-dashboard { width: 410px; max-width: 113%; height: 328px; margin: -10px 0 -27px -5%; transform: scale(.82); transform-origin: top center; }
  .erp-assurance-strip .container > div { min-height: 69px; padding: 0 18px; }.erp-assurance-strip strong { font-size: 13px; }
  .erp-pain-section,
  .erp-ai-section,
  .erp-architecture-section,
  .erp-feature-section,
  .erp-advantage-section,
  .erp-scenarios-section,
  .erp-value-section,
  .erp-terminal-section,
  .erp-deployment-section,
  .erp-delivery-section { padding: 70px 0; }
  .erp-pain-section .section-heading,
  .erp-architecture-section .section-heading,
  .erp-advantage-section .section-heading,
  .erp-value-section .section-heading,
  .erp-deployment-section .section-heading,
  .erp-delivery-section .section-heading,
  .erp-feature-section .section-heading,
  .erp-scenarios-section .section-heading { margin-bottom: 29px; }
  .erp-compare-grid,
  .erp-deployment-grid { grid-template-columns: 1fr; }
  .erp-compare-card { min-height: 0; padding: 24px 21px; }.erp-compare-card h3 { font-size: 19px; }.erp-compare-card ul { gap: 11px; margin-top: 23px; }.erp-compare-card li { font-size: 13px; }
  .erp-ai-heading h2 { font-size: 29px; }.erp-ai-heading > p:not(.eyebrow) { font-size: 13px; }.erp-ai-card-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 29px; }.erp-ai-card-grid article { min-height: 174px; padding: 20px; }.erp-ai-card-grid h3 { margin-top: 16px; }.erp-ai-value { gap: 5px 11px; padding: 14px; }.erp-ai-value strong { font-size: 18px; }.erp-ai-value span { margin-right: 3px; font-size: 10px; }
  .erp-architecture-flow { grid-template-columns: repeat(2, 1fr); }.erp-architecture-flow li { min-height: 138px; padding: 19px 12px; }.erp-architecture-flow li:nth-child(2)::after,.erp-architecture-flow li:nth-child(4)::after,.erp-architecture-flow li:nth-child(6)::after { display: none; }.erp-architecture-flow b { font-size: 12px; }.erp-architecture-flow i { margin-top: 18px; font-size: 11px; }.erp-architecture-flow strong { margin-top: 6px; font-size: 15px; }.erp-support-chips { gap: 8px; margin-top: 20px; }.erp-support-chips span { padding: 8px 11px; font-size: 12px; }
  .erp-feature-grid,
  .erp-advantage-grid,
  .erp-scenario-grid { grid-template-columns: 1fr; }.erp-feature-card { min-height: 177px; padding: 20px; }.erp-feature-card h3 { margin-top: 17px; }.erp-advantage-grid article { min-height: 0; padding: 21px; }.erp-advantage-grid h3 { margin-top: 16px; }.erp-scenario-grid span { min-height: 84px; padding: 20px; }
  .erp-value-grid { grid-template-columns: repeat(2, 1fr); }.erp-value-grid article { min-height: 116px; padding: 19px 9px; }.erp-value-grid article:nth-child(3) { border-left: 0; }.erp-value-grid article:nth-child(n+3) { border-top: 1px solid rgb(159 231 255 / 22%); }.erp-value-grid strong { font-size: 24px; }
  .erp-terminal-layout { gap: 33px; }.erp-terminal-copy h2 { font-size: 29px; }.erp-terminal-copy li { grid-template-columns: 1fr; gap: 3px; }.erp-device-stage { min-height: 345px; padding: 20px; }.erp-device-laptop { top: 37px; right: 35px; left: 22px; height: 219px; }.erp-device-phone { right: 12px; bottom: 13px; width: 115px; min-height: 164px; padding: 23px 11px 11px; }.erp-device-card { bottom: 27px; left: 4px; }.erp-device-laptop .erp-mini-bars { height: 88px; }
  .erp-deployment-grid article { min-height: 0; padding: 25px; }.erp-deployment-grid h3 { font-size: 23px; }.erp-deployment-grid ul { display: grid; gap: 7px; margin-top: 20px; }
  .erp-delivery-flow { grid-template-columns: repeat(2, 1fr); }.erp-delivery-flow li:nth-child(2n)::after { display: none; }.erp-faq { margin-top: 40px; }.erp-faq button { min-height: 64px; font-size: 14px; }.erp-faq article > div { padding: 0 10px 18px 0; }
  .erp-consult-section { padding: 0 0 68px; }.erp-consult-panel { display: block; min-height: 0; padding: 34px 25px; border-radius: 15px; }.erp-consult-panel .button { margin-top: 25px; }
  .project-lifecycle-section .section-heading,
  .project-scenarios-section .section-heading { margin-bottom: 29px; }
  .project-lifecycle-flow,
  .project-scenario-capability-grid { grid-template-columns: 1fr; }
  .project-lifecycle-stage { padding: 0; border-radius: 0; }
  .project-lifecycle-diagram { width: 1000px; max-width: none; }
  .project-lifecycle-stage-top { height: 51px; margin: 0 -14px; padding: 0 16px; }
  .project-lifecycle-stage-top small { display: none; }
  .project-lifecycle-stage-main { display: block; min-height: 0; padding: 16px 3px 19px; }
  .project-lifecycle-summary { display: flex; min-height: 0; align-items: baseline; gap: 8px; padding: 12px; }
  .project-lifecycle-summary strong { font-size: 19px; }
  .project-lifecycle-timeline { height: 76px; margin-top: 17px; }
  .project-lifecycle-mini-chart,
  .project-lifecycle-status { display: none; }
  .project-lifecycle-flow li { min-height: 0; padding: 21px; }
  .project-lifecycle-flow li::before { top: auto; right: auto; bottom: -15px; left: calc(50% - 15px); transform: rotate(135deg); }
  .project-lifecycle-flow li:nth-child(2)::before { display: block; }
  .project-lifecycle-flow li:last-child::before { display: none; }
  .project-lifecycle-flow b { margin-top: 18px; }
  .project-lifecycle-flow small { margin-top: 15px; }
  .project-scenario-capability-grid article { min-height: 0; padding: 20px; }
  .project-scenario-capability-grid h3 { margin-top: 0; font-size: 16px; }
}

@media (max-width: 1000px) {
  .production-hero-layout { gap: 34px; }
  .production-dashboard { width: min(100%, 510px); }
  .production-architecture-flow { grid-template-columns: repeat(4, 1fr); }
  .production-architecture-flow li:nth-child(4)::after { display: none; }
  .production-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .production-value-grid { grid-template-columns: repeat(3, 1fr); }
  .production-value-grid article:nth-child(4) { border-left: 0; }
  .production-value-grid article:nth-child(n + 4) { border-top: 1px solid rgb(159 231 255 / 22%); }
  .production-case-card { min-height: 0; }
  .production-terminal-layout { grid-template-columns: 1fr; }
  .production-terminal-copy { max-width: 600px; }
  .production-delivery-flow { grid-template-columns: repeat(4, 1fr); }
  .production-delivery-flow li:nth-child(4)::after { display: none; }
}

@media (max-width: 900px) {
  .production-hero { min-height: 0; }
  .production-hero-layout { grid-template-columns: 1fr; min-height: 0; padding: 76px 0 57px; }
  .production-dashboard { margin: -8px auto 0; justify-self: center; transform: none; }
  .production-assurance-strip .container { grid-template-columns: repeat(2, 1fr); padding: 8px 0; }
  .production-assurance-strip .container > div { min-height: 76px; justify-content: flex-start; padding: 0 22px; }
  .production-assurance-strip .container > div:nth-child(3) { border-left: 0; }
  .production-assurance-strip .container > div:nth-child(n + 3) { border-top: 1px solid #e9eef6; }
  .production-compare-grid { grid-template-columns: 1fr; }
  .production-scenario-grid { grid-template-columns: repeat(3, 1fr); }
  .production-advantage-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .production-page .section { padding: 70px 0; }
  .production-hero-grid { background-size: 32px 32px; }
  .production-hero-layout { padding: 55px 0 42px; }
  .production-hero-copy h1 { font-size: 37px; }
  .production-mobile-break { display: inline; }
  .production-hero-copy > p:not(.eyebrow) { margin-top: 17px; font-size: 14px; }
  .production-hero-actions { margin-top: 24px; }
  .production-hero-points { margin-top: 23px; }
  .production-dashboard { width: 410px; max-width: 113%; min-height: 328px; margin: -10px 0 -28px -5%; transform: scale(.82); transform-origin: top center; }
  .production-dashboard-body { min-height: 274px; }
  .production-assurance-strip .container { grid-template-columns: 1fr; }
  .production-assurance-strip .container > div { min-height: 68px; padding: 0 18px; }
  .production-assurance-strip .container > div + div { border-top: 1px solid #e9eef6; border-left: 0; }
  .production-pain-section .section-heading,
  .production-architecture-section .section-heading,
  .production-advantage-section .section-heading,
  .production-value-section .section-heading,
  .production-terminal-section .section-heading,
  .production-delivery-section .section-heading,
  .production-feature-section .section-heading,
  .production-scenarios-section .section-heading,
  .production-case-section .section-heading { margin-bottom: 29px; }
  .production-compare-card { min-height: 0; padding: 24px 21px; }
  .production-compare-card h3 { font-size: 19px; }
  .production-compare-card ul { gap: 11px; margin-top: 22px; }
  .production-compare-card li { font-size: 13px; }
  .production-architecture-flow { grid-template-columns: repeat(2, 1fr); }
  .production-architecture-flow li { min-height: 118px; }
  .production-architecture-flow li:nth-child(2)::after,
  .production-architecture-flow li:nth-child(4)::after,
  .production-architecture-flow li:nth-child(6)::after { display: none; }
  .production-architecture-flow i { margin-top: 17px; }
  .production-support-chips { justify-content: flex-start; gap: 7px; margin-top: 18px; }
  .production-support-chips span { padding: 7px 9px; font-size: 10px; }
  .production-feature-grid,
  .production-advantage-grid { grid-template-columns: 1fr; }
  .production-feature-card { min-height: 177px; padding: 20px; }
  .production-feature-card h3 { margin-top: 17px; }
  .production-advantage-grid article { min-height: 0; padding: 21px; }
  .production-advantage-grid h3 { margin-top: 16px; }
  .production-scenario-grid { grid-template-columns: repeat(2, 1fr); }
  .production-scenario-grid span { min-height: 84px; padding: 16px 10px; font-size: 13px; }
  .production-value-grid { grid-template-columns: repeat(2, 1fr); }
  .production-value-grid article { min-height: 116px; padding: 19px 9px; }
  .production-value-grid article:nth-child(3) { border-left: 0; }
  .production-value-grid article:nth-child(n + 3) { border-top: 1px solid rgb(159 231 255 / 22%); }
  .production-value-grid strong { font-size: 24px; }
  .production-case-card { padding: 25px; }
  .production-case-card h3 { font-size: 20px; }
  .production-case-card ul { margin-top: 24px; }
  .production-case-grid { grid-auto-columns: 88%; }
  .production-terminal-layout { gap: 33px; }
  .production-terminal-copy h2 { font-size: 29px; }
  .production-terminal-copy li { grid-template-columns: 1fr; gap: 3px; }
  .production-device-stage { min-height: 345px; padding: 20px; }
  .production-device-screen { top: 37px; right: 35px; left: 22px; height: 219px; }
  .production-device-phone { right: 12px; bottom: 13px; width: 115px; min-height: 164px; padding: 23px 11px 11px; }
  .production-device-phone strong { font-size: 9px; }.production-device-phone b { font-size: 14px; }.production-device-phone span { margin-top: 21px; }
  .production-device-card { bottom: 27px; left: 4px; }
  .production-device-screen .production-mini-bars { height: 88px; }
  .production-delivery-flow { grid-template-columns: repeat(2, 1fr); }
  .production-delivery-flow li:nth-child(2n)::after { display: none; }
  .production-faq { margin-top: 40px; }
  .production-faq button { min-height: 64px; font-size: 14px; }
  .production-faq article > div { padding: 0 10px 18px 0; }
  .production-consult-section { padding: 28px 0 68px !important; }
  .production-consult-panel { display: block; min-height: 0; padding: 34px 25px; border-radius: 15px; }
  .production-consult-panel h2 { font-size: 26px; }
  .production-consult-panel .button { margin-top: 25px; }
}

/* Developer academy: a maintainable editorial landing page. */
.academy-page { --academy-blue: #2d78df; --academy-ink: #263a55; --academy-muted: #71829a; overflow: hidden; background: #fff; }
.academy-hero { position: relative; min-height: 404px; overflow: hidden; color: #edf7ff; background: radial-gradient(circle at 83% 24%, rgb(108 209 255 / 19%), transparent 20%), radial-gradient(circle at 8% 100%, rgb(66 124 250 / 24%), transparent 30%), linear-gradient(118deg, #0e3973, #155aa7 58%, #0e4b90); }
.academy-hero::before,.academy-hero::after { position: absolute; content: ""; border: 1px solid rgb(159 226 255 / 14%); border-radius: 50%; }.academy-hero::before { top: -290px; right: 8%; width: 580px; height: 580px; }.academy-hero::after { bottom: -350px; left: -135px; width: 620px; height: 620px; }
.academy-hero-grid { position: absolute; inset: 0; opacity: .65; background-image: linear-gradient(rgb(178 231 255 / 9%) 1px, transparent 1px), linear-gradient(90deg, rgb(178 231 255 / 9%) 1px, transparent 1px); background-size: 42px 42px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 90%); mask-image: linear-gradient(90deg, #000, transparent 90%); }
.academy-hero-inner { position: relative; z-index: 1; display: flex; min-height: 404px; align-items: center; flex-direction: column; justify-content: center; padding: 78px 0 66px; text-align: center; }.academy-hero .eyebrow { margin-bottom: 13px; color: rgb(215 243 255 / 75%); }.academy-hero .eyebrow span { background: #68ddea; box-shadow: 0 0 0 5px rgb(106 227 234 / 12%); }.academy-hero h1 { margin: 0; color: #fff; font-size: clamp(34px, 3.35vw, 48px); font-weight: 680; letter-spacing: -.045em; line-height: 1.2; }.academy-hero-intro { margin: 15px 0 0; color: rgb(226 244 255 / 84%); font-size: 16px; }.academy-hero-search { display: flex; width: min(610px, 100%); min-height: 48px; margin-top: 29px; padding: 5px; background: rgb(255 255 255 / 12%); border: 1px solid rgb(203 239 255 / 27%); border-radius: 10px; box-shadow: 0 13px 25px rgb(6 39 92 / 13%); backdrop-filter: blur(8px); }.academy-hero-search input { min-width: 0; flex: 1; padding: 0 14px; color: #fff; background: transparent; border: 0; outline: 0; font: inherit; font-size: 13px; }.academy-hero-search input::placeholder { color: rgb(221 242 255 / 60%); }.academy-hero-search button { min-width: 114px; padding: 0 15px; color: #13549d; background: #fff; border: 0; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 650; }.academy-hero-search button span { margin-left: 5px; }.academy-hero-meta { display: flex; gap: 18px; margin-top: 18px; color: rgb(221 244 255 / 72%); font-size: 11px; }.academy-hero-meta span::before { display: inline-block; width: 5px; height: 5px; margin: 0 6px 1px 0; content: ""; background: #70e6e6; border-radius: 50%; }

.academy-categories-section { padding: 64px 0 60px; background: #fff; }.academy-categories-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 27px; }.academy-categories-heading .eyebrow { margin-bottom: 12px; }.academy-categories-heading h2,.academy-list-toolbar h2,.academy-side-heading h2 { margin: 0; color: var(--academy-ink); font-size: 27px; font-weight: 680; letter-spacing: -.035em; }.academy-categories-heading > p { max-width: 400px; margin: 0; color: var(--academy-muted); text-align: right; font-size: 13px; line-height: 1.8; }.academy-category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }.academy-category-card { display: flex; min-height: 96px; align-items: center; gap: 12px; padding: 16px; color: #566b85; text-align: left; background: #fff; border: 1px solid #dfe9f3; border-radius: 12px; cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }.academy-category-card:hover { border-color: #b6d7f3; box-shadow: 0 12px 21px rgb(30 100 177 / 8%); transform: translateY(-2px); }.academy-category-card.is-active { color: #fff; background: linear-gradient(135deg, #287bd8, #2269bd); border-color: transparent; box-shadow: 0 12px 23px rgb(26 101 188 / 19%); }.academy-category-card i { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; color: var(--academy-blue); background: #e8f4ff; border-radius: 8px; font-size: 13px; font-style: normal; font-weight: 700; }.academy-category-card.is-active i { color: #1557a3; background: #ccefff; }.academy-category-card strong,.academy-category-card small { display: block; }.academy-category-card strong { font-size: 13px; }.academy-category-card small { margin-top: 5px; color: #8493a6; font-size: 10px; }.academy-category-card.is-active small { color: rgb(232 246 255 / 77%); }

.academy-content-section { padding: 76px 0 88px; background: #f6f8fc; }.academy-content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; align-items: start; }.academy-list-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }.academy-list-toolbar .eyebrow { margin-bottom: 11px; }.academy-filter-label { display: grid; gap: 7px; color: #74839a; font-size: 11px; }.academy-filter-label select { min-width: 128px; height: 36px; padding: 0 10px; color: #45617f; background: #fff; border: 1px solid #dce7f1; border-radius: 7px; outline-color: #70aef0; font: inherit; font-size: 12px; }.academy-article-list { display: grid; gap: 12px; }.academy-article-card { display: grid; grid-template-columns: 114px minmax(0, 1fr); gap: 24px; padding: 23px 25px; background: #fff; border: 1px solid #e0e9f2; border-radius: 13px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }.academy-article-card:hover { border-color: #b7d8f2; box-shadow: 0 14px 27px rgb(30 98 173 / 8%); transform: translateY(-2px); }.academy-article-date { display: grid; align-content: start; gap: 10px; padding-top: 3px; }.academy-article-date time { color: #496e96; font-size: 12px; font-weight: 650; }.academy-article-date span { width: fit-content; padding: 5px 8px; color: #2b78c5; background: #edf7ff; border-radius: 5px; font-size: 10px; }.academy-article-copy h3 { margin: 0; color: #2a405c; font-size: 18px; font-weight: 680; letter-spacing: -.018em; line-height: 1.45; }.academy-article-copy p { display: -webkit-box; margin: 10px 0 0; overflow: hidden; color: #74849a; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; line-height: 1.75; }.academy-article-copy button,.academy-side-card button { padding: 0; color: #2777c7; text-align: left; background: transparent; border: 0; cursor: pointer; font: inherit; }.academy-article-copy button { margin-top: 13px; font-size: 11px; font-weight: 650; }.academy-article-copy button b,.academy-recommend-card button b { margin-left: 5px; font-size: 14px; }.academy-empty { padding: 54px 20px; text-align: center; background: #fff; border: 1px dashed #c9ddeb; border-radius: 12px; }.academy-empty strong { color: #405c7b; font-size: 16px; }.academy-empty p { margin: 9px 0 17px; color: #7d8fa5; font-size: 12px; }.academy-empty button { padding: 8px 12px; color: #fff; background: #2778c8; border: 0; border-radius: 5px; cursor: pointer; font: inherit; font-size: 11px; }.academy-pagination { display: flex; justify-content: center; gap: 7px; margin-top: 27px; }.academy-pagination button { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; color: #52718f; background: #fff; border: 1px solid #dbe6f0; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12px; }.academy-pagination button.is-active { color: #fff; background: #2879ca; border-color: #2879ca; }.academy-pagination button:disabled { color: #b6c3cf; cursor: default; }

.academy-sidebar { display: grid; gap: 14px; }.academy-side-card { padding: 23px; background: #fff; border: 1px solid #e0e9f2; border-radius: 13px; }.academy-side-heading { margin-bottom: 16px; }.academy-side-heading .eyebrow { margin-bottom: 9px; font-size: 10px; }.academy-side-heading h2 { font-size: 19px; }.academy-side-card ol { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }.academy-side-card ol button { display: grid; width: 100%; grid-template-columns: 24px 1fr; gap: 9px; color: #596f89; font-size: 12px; line-height: 1.55; }.academy-side-card ol button b { color: #72a6d5; font-size: 11px; }.academy-side-card ol li:nth-child(-n + 3) button b { color: #2680d3; }.academy-latest-card > div:last-child { display: grid; gap: 13px; }.academy-latest-card article { display: grid; gap: 5px; }.academy-latest-card time { color: #97a5b5; font-size: 10px; }.academy-latest-card article button { color: #586f89; font-size: 12px; line-height: 1.55; }.academy-recommend-card { position: relative; overflow: hidden; color: #eaf8ff; background: radial-gradient(circle at 88% 13%, rgb(92 225 245 / 23%), transparent 26%), linear-gradient(135deg, #156ec3, #0e4d94); border: 0; }.academy-recommend-card::after { position: absolute; right: -42px; bottom: -57px; width: 160px; height: 160px; content: ""; border: 1px solid rgb(186 241 255 / 21%); border-radius: 50%; }.academy-recommend-card > * { position: relative; z-index: 1; }.academy-recommend-card > span { color: #9eeeff; font-size: 10px; font-weight: 700; letter-spacing: .08em; }.academy-recommend-card h2 { margin: 13px 0 9px; color: #fff; font-size: 21px; }.academy-recommend-card p { margin: 0; color: rgb(227 247 255 / 78%); font-size: 12px; line-height: 1.75; }.academy-recommend-card button { margin-top: 19px; color: #fff; font-size: 12px; font-weight: 650; }

@media (min-width: 901px) { .academy-content-section { padding: 78px 0 88px; }.academy-categories-heading > p { max-width: none; white-space: nowrap; } }
@media (max-width: 900px) { .academy-category-grid { grid-template-columns: repeat(3, 1fr); }.academy-content-layout { grid-template-columns: 1fr; }.academy-sidebar { grid-template-columns: repeat(2, 1fr); }.academy-recommend-card { grid-column: 1 / -1; } }
@media (max-width: 620px) { .academy-hero { min-height: 344px; }.academy-hero-inner { min-height: 344px; padding: 57px 0 45px; }.academy-hero h1 { font-size: 33px; }.academy-hero-intro { margin-top: 13px; font-size: 14px; }.academy-hero-search { min-height: 45px; margin-top: 24px; }.academy-hero-search input { padding: 0 9px; font-size: 11px; }.academy-hero-search button { min-width: 82px; padding: 0 8px; font-size: 10px; }.academy-hero-meta { gap: 11px; margin-top: 14px; font-size: 10px; }.academy-categories-section { padding: 52px 0; }.academy-categories-heading { display: block; margin-bottom: 23px; }.academy-categories-heading h2,.academy-list-toolbar h2 { font-size: 25px; }.academy-categories-heading > p { margin-top: 12px; text-align: left; font-size: 12px; }.academy-category-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }.academy-category-card { min-height: 82px; gap: 9px; padding: 13px; }.academy-category-card:last-child { grid-column: 1 / -1; }.academy-category-card strong { font-size: 12px; }.academy-category-card small { font-size: 9px; }.academy-content-section { padding: 55px 0 66px; }.academy-content-layout { gap: 28px; }.academy-list-toolbar { align-items: start; flex-direction: column; gap: 15px; }.academy-filter-label { width: 100%; }.academy-filter-label select { width: 100%; }.academy-article-card { grid-template-columns: 1fr; gap: 13px; padding: 20px; }.academy-article-date { display: flex; align-items: center; gap: 9px; padding: 0; }.academy-article-copy h3 { font-size: 16px; }.academy-article-copy p { font-size: 12px; }.academy-sidebar { grid-template-columns: 1fr; gap: 11px; }.academy-recommend-card { grid-column: auto; } }

/* Academy article detail template. */
.academy-article-page { --academy-blue: #2d78df; --academy-ink: #263a55; --academy-muted: #71829a; overflow: hidden; background: #fff; }
.academy-article-hero { position: relative; min-height: 348px; overflow: hidden; color: #eff9ff; background: radial-gradient(circle at 82% 28%, rgb(102 211 255 / 21%), transparent 22%), linear-gradient(122deg, #103e7d, #145aab 61%, #0f4c91); }.academy-article-hero::before { position: absolute; top: -330px; right: 9%; width: 640px; height: 640px; content: ""; border: 1px solid rgb(175 234 255 / 16%); border-radius: 50%; }.academy-article-hero-grid { position: absolute; inset: 0; opacity: .6; background-image: linear-gradient(rgb(176 235 255 / 9%) 1px, transparent 1px), linear-gradient(90deg, rgb(176 235 255 / 9%) 1px, transparent 1px); background-size: 42px 42px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 88%); mask-image: linear-gradient(90deg, #000, transparent 88%); }.academy-article-hero-inner { position: relative; z-index: 1; display: flex; min-height: 348px; max-width: 860px; align-items: center; flex-direction: column; justify-content: center; padding: 72px 0 56px; text-align: center; }.academy-breadcrumb { color: rgb(217 244 255 / 70%); font-size: 12px; }.academy-breadcrumb span { margin: 0 7px; color: rgb(194 237 255 / 42%); }.academy-breadcrumb b { color: #a8eaff; font-weight: 500; }.academy-article-label { margin: 24px 0 10px; color: #a2eff1; font-size: 11px; font-weight: 700; letter-spacing: .08em; }.academy-article-hero h1 { max-width: 850px; margin: 0; color: #fff; font-size: clamp(31px, 3.3vw, 45px); font-weight: 680; letter-spacing: -.04em; line-height: 1.28; }.academy-article-meta { display: flex; justify-content: center; gap: 14px; margin-top: 20px; color: rgb(220 243 255 / 71%); font-size: 11px; }.academy-article-meta span + span::before { margin-right: 14px; content: ""; border-left: 1px solid rgb(204 238 255 / 27%); }
.academy-article-content-section { padding: 80px 0 92px; background: #f6f8fc; }.academy-article-layout { display: grid; grid-template-columns: minmax(0, 760px) 290px; justify-content: space-between; gap: 48px; align-items: start; }.academy-article-content { padding: 45px 52px 49px; background: #fff; border: 1px solid #e0e9f2; border-radius: 15px; box-shadow: 0 12px 29px rgb(30 90 154 / 5%); }.academy-article-lead { margin: 0; padding: 0 0 27px; color: #3f5d7d; border-bottom: 1px solid #e8eef4; font-size: 16px; line-height: 2; }.academy-article-content [data-article-sections] { display: grid; gap: 34px; margin-top: 36px; }.academy-article-content [data-article-sections] section { position: relative; padding-left: 38px; }.academy-article-content [data-article-sections] span { position: absolute; top: 3px; left: 0; color: #6ba9dc; font-size: 11px; font-weight: 700; letter-spacing: .08em; }.academy-article-content h2 { margin: 0 0 15px; color: #294767; font-size: 21px; font-weight: 680; letter-spacing: -.02em; }.academy-article-content [data-article-sections] p { margin: 0; color: #6f8197; font-size: 14px; line-height: 1.95; }.academy-article-content [data-article-sections] p + p { margin-top: 13px; }.academy-article-callout { display: flex; align-items: center; justify-content: space-between; gap: 17px; margin-top: 40px; padding: 22px 24px; background: linear-gradient(135deg, #edf8ff, #f5fbff); border: 1px solid #d7eaf8; border-radius: 10px; }.academy-article-callout span { color: #2778c7; font-size: 12px; font-weight: 700; }.academy-article-callout p { flex: 1; margin: 0; color: #71849a; font-size: 11px; line-height: 1.6; }.academy-article-callout a { flex: 0 0 auto; color: #2877c4; font-size: 11px; font-weight: 650; }.academy-article-callout b,.academy-article-consult b { margin-left: 5px; font-size: 14px; }
.academy-article-sidebar { display: grid; gap: 15px; }.academy-article-sidebar > section { padding: 24px; background: #fff; border: 1px solid #e0e9f2; border-radius: 13px; }.academy-article-sidebar .eyebrow { margin-bottom: 9px; font-size: 10px; }.academy-article-sidebar h2 { margin: 0; color: #2b4562; font-size: 20px; font-weight: 680; }.academy-article-sidebar [data-article-related] { display: grid; gap: 16px; margin-top: 19px; }.academy-article-sidebar [data-article-related] article { display: grid; gap: 5px; }.academy-article-sidebar time { color: #9aa8b8; font-size: 10px; }.academy-article-sidebar [data-article-related] a { color: #5a708b; font-size: 12px; line-height: 1.65; }.academy-article-consult { position: relative; overflow: hidden; color: #eaf8ff; background: radial-gradient(circle at 88% 13%, rgb(92 225 245 / 23%), transparent 26%), linear-gradient(135deg, #156ec3, #0e4d94) !important; border: 0 !important; }.academy-article-consult::after { position: absolute; right: -42px; bottom: -57px; width: 160px; height: 160px; content: ""; border: 1px solid rgb(186 241 255 / 21%); border-radius: 50%; }.academy-article-consult > * { position: relative; z-index: 1; }.academy-article-consult > span { color: #9eeeff; font-size: 10px; font-weight: 700; letter-spacing: .08em; }.academy-article-consult h2 { margin: 13px 0 9px; color: #fff; font-size: 21px; }.academy-article-consult p { margin: 0; color: rgb(227 247 255 / 78%); font-size: 12px; line-height: 1.75; }.academy-article-consult a { display: inline-block; margin-top: 18px; color: #fff; font-size: 12px; font-weight: 650; }
@media (max-width: 900px) { .academy-article-layout { grid-template-columns: 1fr; gap: 24px; }.academy-article-sidebar { grid-template-columns: repeat(2, 1fr); }.academy-article-consult { grid-column: 1 / -1; } }
@media (max-width: 620px) { .academy-article-hero { min-height: 306px; }.academy-article-hero-inner { min-height: 306px; padding: 55px 0 42px; }.academy-article-label { margin-top: 19px; }.academy-article-hero h1 { font-size: 29px; }.academy-article-meta { flex-wrap: wrap; gap: 7px 11px; margin-top: 16px; font-size: 10px; }.academy-article-meta span + span::before { margin-right: 11px; }.academy-article-content-section { padding: 54px 0 66px; }.academy-article-content { padding: 28px 22px 31px; }.academy-article-lead { padding-bottom: 22px; font-size: 14px; line-height: 1.9; }.academy-article-content [data-article-sections] { gap: 28px; margin-top: 30px; }.academy-article-content [data-article-sections] section { padding-left: 0; }.academy-article-content [data-article-sections] span { position: static; display: block; margin-bottom: 7px; }.academy-article-content h2 { margin-bottom: 12px; font-size: 19px; }.academy-article-content [data-article-sections] p { font-size: 13px; line-height: 1.85; }.academy-article-callout { display: block; margin-top: 30px; padding: 20px; }.academy-article-callout p { margin-top: 8px; }.academy-article-callout a { display: inline-block; margin-top: 14px; }.academy-article-sidebar { grid-template-columns: 1fr; gap: 11px; }.academy-article-consult { grid-column: auto; } }

/* Academy page refinements: keep the search at the input height and focus on content. */
.academy-hero { min-height: 360px; }
.academy-hero-inner { min-height: 360px; padding: 64px 0 54px; }
.academy-hero-search { min-height: 44px; margin-top: 26px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }
.academy-hero-search input { background: rgb(255 255 255 / 13%); border: 1px solid rgb(203 239 255 / 27%); border-right: 0; border-radius: 7px 0 0 7px; }
.academy-hero-search button { border-radius: 0 7px 7px 0; }
.academy-content-section { padding: 64px 0 80px; }
.academy-article-content-section { padding: 64px 0 84px; }
.academy-article-title { margin: 0; padding-bottom: 19px; color: #294767; border-bottom: 1px solid #e8eef4; font-size: clamp(27px, 2.55vw, 35px); font-weight: 680; letter-spacing: -.035em; line-height: 1.36; }
.academy-article-content-meta { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: #8192a7; font-size: 11px; }
.academy-article-content-meta span { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; color: #2b78c5; background: #edf7ff; border-radius: 5px; }
.academy-article-content [data-article-sections] { margin-top: 32px; }
@media (max-width: 620px) { .academy-hero { min-height: 326px; }.academy-hero-inner { min-height: 326px; padding: 51px 0 41px; }.academy-hero-search { min-height: 43px; margin-top: 22px; }.academy-content-section { padding: 50px 0 64px; }.academy-article-content-section { padding: 42px 0 64px; }.academy-article-title { padding-bottom: 16px; font-size: 25px; }.academy-article-content-meta { margin-top: 12px; }.academy-article-content [data-article-sections] { margin-top: 27px; } }

/* Shared local-delivery network for every industry solution page. */
.industry-service-network-section { --industry-network-primary: #4f7ef0; --industry-network-deep: #456de0; --industry-network-soft: #eff4ff; --industry-network-shadow: rgb(53 100 212 / 15%); position: relative; padding: 76px 0 80px; overflow: hidden; background: radial-gradient(circle at 10% 95%, var(--industry-network-shadow), transparent 27%), radial-gradient(circle at 91% 8%, var(--industry-network-shadow), transparent 26%), var(--industry-network-soft); }
.solution-page .industry-service-network-section { --industry-network-primary: var(--solution-accent); --industry-network-deep: var(--solution-accent-dark); --industry-network-soft: color-mix(in srgb, var(--solution-accent-soft) 58%, #f8faff); --industry-network-shadow: color-mix(in srgb, var(--solution-accent) 20%, transparent); }
.ticket-page .industry-service-network-section { --industry-network-primary: var(--ticket-blue); --industry-network-deep: var(--ticket-deep); --industry-network-soft: #eff8ff; --industry-network-shadow: rgb(40 123 217 / 18%); }
.transport-page .industry-service-network-section { --industry-network-primary: var(--transport-cyan); --industry-network-deep: var(--transport-blue); --industry-network-soft: #eff8ff; --industry-network-shadow: rgb(35 179 232 / 18%); }
.production-page .industry-service-network-section { --industry-network-primary: var(--production-cyan); --industry-network-deep: var(--production-blue); --industry-network-soft: #eef9fb; --industry-network-shadow: rgb(55 197 143 / 18%); }
.cross-erp-page .industry-service-network-section { --industry-network-primary: var(--erp-cyan); --industry-network-deep: var(--erp-blue); --industry-network-soft: #eff9ff; --industry-network-shadow: rgb(21 185 213 / 18%); }

/* Business intelligence landing page. */
.bi-page { --bi-blue: #287bd9; --bi-deep: #104f9d; --bi-cyan: #38bee8; --bi-green: #48d7ae; --bi-ink: #253852; --bi-muted: #71829a; overflow-x: hidden; color: var(--bi-ink); }
.bi-page .section { padding: 96px 0; }
.bi-page .button-primary { background: linear-gradient(110deg, var(--bi-cyan), var(--bi-blue)); box-shadow: 0 13px 27px rgb(40 123 217 / 25%); }
.bi-page .eyebrow-light { color: #5b7391; }

.bi-hero { position: relative; min-height: 665px; overflow: hidden; color: #eaf8ff; background: radial-gradient(circle at 81% 30%, rgb(57 207 240 / 25%), transparent 20%), radial-gradient(circle at 16% 110%, rgb(54 120 246 / 23%), transparent 28%), linear-gradient(125deg, #0b315f, #0d559a 56%, #0a427d); }
.bi-hero::before { position: absolute; top: -330px; right: -180px; width: 720px; height: 720px; content: ""; border: 1px solid rgb(163 235 255 / 18%); border-radius: 50%; box-shadow: 0 0 0 60px rgb(119 211 255 / 3%), 0 0 0 130px rgb(119 211 255 / 3%); }
.bi-hero-grid { position: absolute; inset: 0; opacity: .65; background-image: linear-gradient(rgb(172 235 255 / 10%) 1px, transparent 1px), linear-gradient(90deg, rgb(172 235 255 / 10%) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(90deg, #000, rgb(0 0 0 / 52%) 57%, transparent); }
.bi-hero-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr); gap: 52px; min-height: 665px; align-items: center; padding: 76px 0; }
.bi-hero-copy { max-width: 620px; }
.bi-kicker { display: flex; gap: 9px; align-items: center; margin: 0 0 17px; color: rgb(210 244 255 / 76%); font-size: 12px; font-weight: 700; letter-spacing: .09em; }
.bi-kicker span { width: 8px; height: 8px; background: var(--bi-green); border-radius: 50%; box-shadow: 0 0 0 5px rgb(72 215 174 / 13%); }
.bi-hero h1 { margin: 0; color: #fff; font-size: clamp(40px, 3.8vw, 56px); font-weight: 700; letter-spacing: -.052em; line-height: 1.17; }
.bi-hero-copy > p:not(.bi-kicker) { max-width: 590px; margin: 22px 0 0; color: rgb(221 244 255 / 81%); font-size: 16px; line-height: 1.85; }
.bi-hero-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.bi-hero-tags span { padding: 7px 12px; color: #c8f5ff; background: rgb(123 224 255 / 10%); border: 1px solid rgb(173 236 255 / 26%); border-radius: 5px; font-size: 11px; font-weight: 650; }
.bi-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.bi-hero .button-secondary { color: #d7f5ff; background: rgb(255 255 255 / 8%); border-color: rgb(199 239 255 / 33%); }
.bi-hero .button-secondary:hover { background: rgb(255 255 255 / 15%); }

.bi-dashboard { position: relative; min-height: 406px; perspective: 1100px; }
.bi-dashboard::before { position: absolute; top: 56px; left: 45px; width: 420px; height: 290px; content: ""; background: rgb(54 202 242 / 30%); border-radius: 50%; filter: blur(66px); }
.bi-dashboard-top { position: absolute; top: 23px; right: 0; left: 23px; z-index: 2; display: flex; height: 45px; align-items: center; padding: 0 17px; color: rgb(224 246 255 / 88%); background: rgb(11 69 134 / 95%); border: 1px solid rgb(164 231 255 / 36%); border-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: 0 25px 60px rgb(3 42 99 / 27%); font-size: 10px; transform: perspective(900px) rotateY(-7deg) rotateX(2deg); }
.bi-dashboard-top span { display: flex; gap: 7px; align-items: center; font-size: 11px; font-weight: 700; }.bi-dashboard-top span i { width: 8px; height: 8px; background: var(--bi-green); border-radius: 2px; box-shadow: 0 0 9px rgb(72 215 174 / 70%); }.bi-dashboard-top small { margin-left: auto; opacity: .6; }.bi-dashboard-top b { margin-left: 14px; padding: 3px 6px; color: #a7f5e0; background: rgb(83 236 195 / 12%); border-radius: 3px; font-size: 8px; letter-spacing: .08em; }
.bi-dashboard-body { position: absolute; top: 68px; right: 0; bottom: 18px; left: 23px; z-index: 1; display: grid; grid-template-columns: 47px 1fr; overflow: hidden; background: linear-gradient(145deg, rgb(20 110 183 / 97%), rgb(8 52 111 / 98%)); border: 1px solid rgb(164 231 255 / 36%); border-radius: 0 0 12px 12px; box-shadow: 0 25px 60px rgb(3 42 99 / 27%); transform: perspective(900px) rotateY(-7deg) rotateX(2deg); }
.bi-dashboard-body aside { display: flex; align-items: center; flex-direction: column; gap: 17px; padding-top: 24px; background: rgb(3 48 107 / 25%); border-right: 1px solid rgb(192 239 255 / 14%); }.bi-dashboard-body aside i { width: 14px; height: 14px; border: 1px solid rgb(207 244 255 / 38%); border-radius: 3px; }.bi-dashboard-body aside i.is-active { background: #75e4ed; border-color: #75e4ed; box-shadow: 0 0 10px #75e4ed; }
.bi-dashboard-main { padding: 21px; }.bi-dashboard-heading { display: flex; align-items: end; justify-content: space-between; }.bi-dashboard-heading small,.bi-kpi-grid small,.bi-dashboard-chart small { color: rgb(214 245 255 / 64%); font-size: 9px; }.bi-dashboard-heading strong { display: block; margin-top: 3px; color: #fff; font-size: 16px; }.bi-dashboard-heading > span { padding: 4px 7px; color: #b9f4ff; background: rgb(111 228 255 / 12%); border: 1px solid rgb(180 239 255 / 22%); border-radius: 3px; font-size: 8px; }
.bi-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 15px; }.bi-kpi-grid > div { padding: 10px; background: linear-gradient(135deg, rgb(126 223 255 / 16%), rgb(255 255 255 / 3%)); border: 1px solid rgb(200 241 255 / 15%); border-radius: 5px; }.bi-kpi-grid b { display: block; margin: 3px 0; color: #fff; font-size: 17px; line-height: 1.15; }.bi-kpi-grid b span { margin-left: 2px; font-size: 9px; }.bi-kpi-grid em { color: #8feeda; font-size: 8px; font-style: normal; }
.bi-dashboard-chart { min-height: 141px; margin-top: 13px; padding: 9px; background: rgb(3 54 116 / 20%); border: 1px solid rgb(200 241 255 / 15%); border-radius: 5px; }.bi-dashboard-chart > div:first-child,.bi-chart-labels { display: flex; justify-content: space-between; color: rgb(228 246 255 / 90%); font-size: 9px; }.bi-dashboard-chart svg { width: 100%; height: 88px; margin-top: 3px; overflow: visible; }.bi-chart-grid { fill: none; stroke: rgb(203 241 255 / 15%); stroke-width: 1; }.bi-chart-fill { fill: rgb(96 224 245 / 19%); }.bi-chart-line { fill: none; stroke: #7ce8f1; stroke-width: 2; }.bi-chart-labels { color: rgb(210 242 255 / 61%); font-size: 7px; }
.bi-dashboard-float { position: absolute; z-index: 3; display: flex; gap: 9px; align-items: center; padding: 10px 12px; color: #f1fdff; background: linear-gradient(135deg, rgb(30 128 199 / 97%), rgb(11 70 144 / 97%)); border: 1px solid rgb(186 239 255 / 35%); border-radius: 8px; box-shadow: 0 12px 29px rgb(3 44 105 / 26%); }.bi-dashboard-float b { display: grid; width: 29px; height: 29px; place-items: center; color: #0e5896; background: #89e8ef; border-radius: 6px; font-size: 13px; }.bi-dashboard-float small,.bi-dashboard-float strong { display: block; }.bi-dashboard-float small { color: rgb(215 247 255 / 76%); font-size: 9px; }.bi-dashboard-float strong { margin-top: 2px; font-size: 11px; }.bi-dashboard-alert { bottom: 15px; left: -8px; }.bi-dashboard-alert b { color: #8d5b17; background: #ffd277; }.bi-dashboard-growth { top: -2px; right: -6px; }

.bi-data-strip { background: #fff; border-bottom: 1px solid #e5edf6; }.bi-data-strip .container { display: grid; grid-template-columns: repeat(4, 1fr); }.bi-data-strip .container > div { display: flex; min-height: 105px; align-items: center; gap: 13px; justify-content: center; }.bi-data-strip .container > div + div { border-left: 1px solid #e8eef6; }.bi-data-strip b { color: var(--bi-blue); font-size: 19px; }.bi-data-strip span { color: #718197; font-size: 12px; }

.bi-pain-section,.bi-advantages-section,.bi-industries-section,.bi-deployment-section,.bi-faq-section { background: #f5f8fc; }.bi-architecture-section,.bi-terminal-section,.bi-delivery-section { background: #fff; }.bi-page .section-heading { margin-bottom: 42px; }.bi-page .section-heading h2 { line-height: 1.28; }.bi-page .section-heading > p:last-child { color: var(--bi-muted); font-size: 15px; line-height: 1.8; }
.bi-compare-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }.bi-compare-card { display: grid; grid-template-rows: auto 1fr; min-height: 373px; padding: 33px; overflow: hidden; border-radius: 16px; }.bi-compare-card > div { padding-bottom: 24px; border-bottom: 1px solid currentColor; }.bi-compare-card span { display: inline-block; padding: 5px 9px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .06em; }.bi-compare-card h3 { margin: 14px 0 0; font-size: 25px; letter-spacing: -.04em; }.bi-compare-card ul { display: grid; gap: 13px; margin: 24px 0 0; padding: 0; list-style: none; }.bi-compare-card li { display: grid; grid-template-columns: 16px 1fr; gap: 9px; font-size: 13px; line-height: 1.55; }.bi-compare-card li::before { display: grid; width: 16px; height: 16px; place-items: center; content: ""; border-radius: 50%; }.bi-compare-traditional { color: #a8b4c2; background: #fff; border: 1px solid #e1e7ee; }.bi-compare-traditional span { color: #78889a; background: #f0f3f7; }.bi-compare-traditional h3 { color: #34465c; }.bi-compare-traditional li { color: #6c7c90; }.bi-compare-traditional li::before { background: #bac4cf; }.bi-compare-smart { color: rgb(168 239 255 / 25%); background: linear-gradient(135deg, #1768b6, #0b417e); box-shadow: 0 21px 39px rgb(10 74 149 / 19%); }.bi-compare-smart span { color: #b5f4ff; background: rgb(117 233 255 / 13%); border: 1px solid rgb(166 243 255 / 25%); }.bi-compare-smart h3 { color: #fff; }.bi-compare-smart li { color: rgb(228 248 255 / 88%); }.bi-compare-smart li::before { background: #5ce1cf; box-shadow: 0 0 9px rgb(92 225 207 / 58%); }

.bi-architecture-flow { display: grid; grid-template-columns: repeat(8, 1fr); margin: 0; padding: 0; overflow: hidden; color: #e7f9ff; list-style: none; border-radius: 14px; box-shadow: 0 17px 35px rgb(8 68 133 / 16%); }.bi-architecture-flow li { position: relative; min-height: 190px; padding: 26px 14px; overflow: hidden; background: linear-gradient(145deg, #125f9f, #0d4b88); }.bi-architecture-flow li:nth-child(2n) { background: linear-gradient(145deg, #1779b9, #105b9c); }.bi-architecture-flow li::after { position: absolute; top: 50%; right: -11px; z-index: 3; width: 21px; height: 21px; content: ""; background: inherit; border-top: 1px solid rgb(214 249 255 / 36%); border-right: 1px solid rgb(214 249 255 / 36%); transform: translateY(-50%) rotate(45deg); }.bi-architecture-flow li:last-child::after { display: none; }.bi-architecture-flow b,.bi-architecture-flow i,.bi-architecture-flow strong { position: relative; z-index: 1; display: block; }.bi-architecture-flow b { color: rgb(183 242 255 / 68%); font-size: 14px; }.bi-architecture-flow i { margin-top: 29px; color: rgb(210 247 255 / 70%); font-size: 13px; font-style: normal; line-height: 1.55; }.bi-architecture-flow strong { margin-top: 8px; color: #fff; font-size: 16px; letter-spacing: -.06em; white-space: nowrap; }.bi-support-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; margin-top: 27px; }.bi-support-chips span { padding: 10px 16px; color: #517397; background: #f6fbff; border: 1px solid #d6e7f5; border-radius: 999px; font-size: 15px; }

@media (min-width: 901px) {
  .bi-page .section-heading > p:last-child {
    max-width: none;
    white-space: nowrap;
  }
}

.bi-capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.bi-capability-grid article { position: relative; min-height: 239px; padding: 23px; overflow: hidden; background: #fff; border: 1px solid #dbe8f3; border-radius: 14px; transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }.bi-capability-grid article::after { position: absolute; right: -35px; bottom: -44px; width: 135px; height: 135px; content: ""; border: 1px solid rgb(57 144 221 / 10%); border-radius: 50%; transition: transform .3s ease; }.bi-capability-grid article:hover { border-color: #a8ceeb; box-shadow: 0 17px 31px rgb(32 107 183 / 10%); transform: translateY(-4px); }.bi-capability-grid article:hover::after { transform: scale(1.25); }.bi-capability-grid i { display: grid; width: 43px; height: 43px; place-items: center; color: var(--bi-deep); background: #e4f3ff; border-radius: 11px; font-size: 12px; font-style: normal; font-weight: 750; }.bi-capability-grid h3 { margin: 22px 0 9px; color: #2a405d; font-size: 17px; }.bi-capability-grid p { margin: 0; color: #71839a; font-size: 12px; line-height: 1.75; }

.bi-advantage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.bi-advantage-grid article { position: relative; min-height: 205px; padding: 26px; overflow: hidden; background: #fff; border: 1px solid #dce7f2; border-radius: 14px; transition: box-shadow .2s ease, transform .2s ease; }.bi-advantage-grid article:hover { box-shadow: 0 16px 31px rgb(31 100 174 / 10%); transform: translateY(-4px); }.bi-advantage-grid b { display: inline-block; padding: 6px 9px; color: var(--bi-deep); background: #e6f4ff; border-radius: 6px; font-size: 11px; }.bi-advantage-grid h3 { margin: 20px 0 9px; color: #2b405d; font-size: 17px; }.bi-advantage-grid p { margin: 0; color: #72839a; font-size: 12px; line-height: 1.75; }

.bi-industry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }.bi-industry-grid span { position: relative; display: grid; min-height: 132px; align-content: center; gap: 5px; padding: 21px; overflow: hidden; background: linear-gradient(135deg, #fff, #f0f8ff); border: 1px solid #d7e9f7; border-radius: 13px; transition: color .24s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease, transform .24s ease; }.bi-industry-grid span::after { position: absolute; right: -42px; bottom: -49px; width: 118px; height: 118px; content: ""; border: 1px solid rgb(34 128 213 / 13%); border-radius: 50%; transition: transform .3s ease; }.bi-industry-grid span > * { position: relative; z-index: 1; }.bi-industry-grid i { display: grid; width: 31px; height: 31px; place-items: center; color: #176bb2; background: #dff2ff; border-radius: 8px; font-size: 13px; font-style: normal; font-weight: 700; }.bi-industry-grid b { color: #315579; font-size: 18px; }.bi-industry-grid small { color: #7a91a8; font-size: 11px; }.bi-industry-grid span:hover { color: #fff; background: linear-gradient(135deg, #2384d5, #105aa7); border-color: #1a72bf; box-shadow: 0 17px 30px rgb(23 98 178 / 19%); transform: translateY(-4px); }.bi-industry-grid span:hover::after { border-color: rgb(202 243 255 / 42%); transform: scale(1.2); }.bi-industry-grid span:hover i { color: #12629d; background: #bceefa; }.bi-industry-grid span:hover b { color: #fff; }.bi-industry-grid span:hover small { color: rgb(226 246 255 / 83%); }

.bi-value-section { color: #e6f9ff; background: radial-gradient(circle at 16% 20%, rgb(59 225 204 / 18%), transparent 21%), radial-gradient(circle at 84% 80%, rgb(47 130 255 / 25%), transparent 28%), linear-gradient(125deg, #0a3b78, #0c5ca2 55%, #09467f); }.bi-value-section .eyebrow,.bi-value-section .section-heading > p:last-child { color: rgb(213 246 255 / 78%); }.bi-value-section .eyebrow span { background: var(--bi-green); }.bi-value-section .section-heading h2 { color: #fff; }.bi-value-grid { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid rgb(159 232 255 / 29%); border-radius: 14px; }.bi-value-grid article { min-height: 157px; padding: 26px 14px; text-align: center; }.bi-value-grid article + article { border-left: 1px solid rgb(159 232 255 / 22%); }.bi-value-grid strong { display: block; color: #79efe0; font-size: 27px; letter-spacing: -.045em; }.bi-value-grid strong span { margin-left: 2px; font-size: 15px; }.bi-value-grid p { margin: 12px 0 0; color: rgb(225 248 255 / 84%); font-size: 11px; line-height: 1.55; }

.bi-terminal-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(48px, 8vw, 118px); align-items: center; }.bi-terminal-copy h2 { margin: 14px 0; color: #273e5c; font-size: clamp(31px, 3.3vw, 43px); font-weight: 680; letter-spacing: -.03em; line-height: 1.28; }.bi-terminal-copy > p:not(.eyebrow) { margin: 0; color: var(--bi-muted); font-size: 14px; line-height: 1.85; }.bi-terminal-copy ul { display: grid; gap: 15px; margin: 28px 0 0; padding: 0; list-style: none; }.bi-terminal-copy li { display: grid; grid-template-columns: 112px 1fr; gap: 10px; color: #6e8097; font-size: 12px; line-height: 1.65; }.bi-terminal-copy li b { color: #296398; }
.bi-device-stage { position: relative; min-height: 385px; padding: 34px; overflow: hidden; background: radial-gradient(circle at 80% 16%, rgb(93 224 221 / 25%), transparent 27%), linear-gradient(135deg, #e9f8ff, #d9edff); border: 1px solid #c7e3f6; border-radius: 18px; }.bi-device-stage::after { position: absolute; right: -78px; bottom: -96px; width: 282px; height: 282px; content: ""; border: 1px solid rgb(32 125 220 / 17%); border-radius: 50%; }.bi-device-screen { position: absolute; top: 49px; right: 59px; left: 38px; height: 252px; padding: 20px; color: #eafaff; background: linear-gradient(145deg, #176ab4, #0b407c); border: 7px solid #315979; border-bottom-width: 13px; border-radius: 12px 12px 4px 4px; box-shadow: 0 22px 30px rgb(16 72 141 / 20%); }.bi-device-screen small { color: rgb(205 241 255 / 68%); font-size: 9px; }.bi-device-screen strong { display: block; margin-top: 4px; color: #fff; font-size: 16px; }.bi-device-screen span { display: block; width: fit-content; margin-top: 18px; padding: 7px; color: #d7fbf9; background: rgb(111 241 225 / 12%); border: 1px solid rgb(177 247 239 / 18%); border-radius: 5px; font-size: 8px; }.bi-device-screen span i { display: inline-block; width: 5px; height: 5px; margin: 0 4px 1px 0; background: #60ead9; border-radius: 50%; }.bi-device-bars { position: absolute; right: 17px; bottom: 18px; display: flex; width: 52%; height: 108px; align-items: end; gap: 8px; margin: 0; padding: 12px; background: rgb(109 210 255 / 10%); border: 1px solid rgb(198 243 255 / 17%); border-radius: 6px; }.bi-device-bars i { display: block; width: 13%; background: linear-gradient(#5ce4da, #2180d3); border-radius: 3px 3px 0 0; }.bi-device-bars i:nth-child(1) { height: 35%; }.bi-device-bars i:nth-child(2) { height: 61%; }.bi-device-bars i:nth-child(3) { height: 48%; }.bi-device-bars i:nth-child(4) { height: 80%; }.bi-device-bars i:nth-child(5) { height: 68%; }.bi-device-bars i:nth-child(6) { height: 94%; }.bi-device-phone { position: absolute; z-index: 2; right: 29px; bottom: 16px; width: 143px; min-height: 196px; padding: 27px 14px 14px; color: #e7faff; background: linear-gradient(145deg, #1685bb, #0d5e96); border: 6px solid #315979; border-radius: 20px; box-shadow: 0 18px 31px rgb(16 72 141 / 25%); }.bi-device-phone::before { position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; content: ""; background: rgb(212 247 255 / 42%); border-radius: 5px; transform: translateX(-50%); }.bi-device-phone small { color: rgb(210 243 255 / 72%); font-size: 8px; }.bi-device-phone b { display: block; margin-top: 16px; color: #7ff0e1; font-size: 20px; }.bi-device-phone span { display: block; margin-top: 10px; color: #c8fcf7; font-size: 8px; }.bi-device-card { position: absolute; z-index: 3; bottom: 38px; left: 14px; padding: 13px; color: #e9fbff; background: linear-gradient(135deg, #177bb8, #1760a6); border: 1px solid rgb(167 242 255 / 34%); border-radius: 8px; box-shadow: 0 12px 23px rgb(13 70 145 / 18%); }.bi-device-card small,.bi-device-card b,.bi-device-card span { display: block; }.bi-device-card small { color: rgb(218 245 255 / 73%); font-size: 8px; }.bi-device-card b { margin-top: 4px; color: #8df3e6; font-size: 21px; }.bi-device-card span { margin-top: 3px; font-size: 8px; }

.bi-deployment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }.bi-deployment-grid article { min-height: 314px; padding: 34px; background: #fff; border: 1px solid #dce8f3; border-radius: 16px; }.bi-deployment-grid article > span { color: #2878cd; font-size: 10px; font-weight: 750; letter-spacing: .1em; }.bi-deployment-grid h3 { margin: 15px 0 12px; color: #2a405c; font-size: 26px; letter-spacing: -.035em; }.bi-deployment-grid p { max-width: 480px; margin: 0; color: #71839a; font-size: 13px; line-height: 1.85; }.bi-deployment-grid ul { display: grid; gap: 8px; margin: 26px 0 0; padding: 17px 0 0; color: #55738f; border-top: 1px solid #e4edf5; list-style: none; font-size: 12px; }.bi-deployment-grid li::before { margin-right: 7px; content: "✓"; color: #28a987; }.bi-deployment-private { color: #e8f8ff; background: linear-gradient(135deg, #166bb1, #0a477f) !important; box-shadow: 0 18px 34px rgb(8 71 137 / 18%); }.bi-deployment-private > span { color: #9aebf4 !important; }.bi-deployment-private h3 { color: #fff; }.bi-deployment-private p { color: rgb(224 247 255 / 84%); }.bi-deployment-private ul { color: rgb(220 247 255 / 87%); border-top-color: rgb(200 241 255 / 19%); }.bi-deployment-private li::before { color: #74e6d4; }

.bi-delivery-section { background: linear-gradient(180deg, #f0f9ff 0%, #fff 100%); }.bi-delivery-flow { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }.bi-delivery-flow li { position: relative; min-height: 120px; padding: 21px 9px; text-align: center; background: #fff; border: 1px solid #d8e9f5; border-radius: 11px; box-shadow: 0 8px 17px rgb(23 91 159 / 5%); }.bi-delivery-flow li:not(:last-child)::after { position: absolute; top: 50%; right: -10px; z-index: 1; color: #5ca4d8; content: "→"; font-size: 16px; transform: translateY(-50%); }.bi-delivery-flow b { display: block; color: var(--bi-blue); font-size: 14px; }.bi-delivery-flow span { display: block; margin-top: 17px; color: #406888; font-size: 13px; font-weight: 650; line-height: 1.45; }

.bi-faq-layout { display: grid; grid-template-columns: .74fr 1.26fr; gap: clamp(55px, 10vw, 145px); align-items: start; }.bi-faq-copy h2 { margin: 14px 0; color: #263e5c; font-size: clamp(31px, 3.3vw, 43px); font-weight: 680; letter-spacing: -.03em; line-height: 1.28; }.bi-faq-copy > p:not(.eyebrow) { margin: 0; color: var(--bi-muted); font-size: 14px; line-height: 1.85; }.bi-faq-copy .text-link { display: inline-flex; margin-top: 27px; color: var(--bi-deep); }.bi-faq-list { border-top: 1px solid #dce7f2; }.bi-faq-list article { border-bottom: 1px solid #dce7f2; }.bi-faq-list h3 { margin: 0; }.bi-faq-list button { display: flex; width: 100%; min-height: 73px; align-items: center; justify-content: space-between; padding: 0; color: #344d68; text-align: left; background: transparent; border: 0; cursor: pointer; font-size: 15px; font-weight: 650; }.bi-faq-list button span { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; margin-left: 20px; color: var(--bi-deep); background: #e3f3ff; border-radius: 50%; font-size: 18px; font-weight: 400; }.bi-faq-list article.is-open button span { transform: rotate(45deg); }.bi-faq-list article > div { padding: 0 43px 21px 0; }.bi-faq-list p { margin: 0; color: #718298; font-size: 13px; line-height: 1.85; }

.bi-final-section { padding-top: 48px !important; background: #f5f8fc; }.bi-final-panel { display: flex; min-height: 275px; align-items: center; justify-content: space-between; gap: 40px; padding: 49px 58px; overflow: hidden; color: #fff; background: radial-gradient(circle at 88% 15%, rgb(255 255 255 / 19%), transparent 22%), linear-gradient(112deg, #21aee1, #287bd9 67%, #1458b5); border-radius: 20px; box-shadow: 0 22px 46px rgb(20 88 181 / 22%); }.bi-final-panel .eyebrow { color: rgb(255 255 255 / 69%); }.bi-final-panel .eyebrow span { background: #fff; }.bi-final-panel h2 { margin: 14px 0 10px; color: #fff; font-size: clamp(28px, 3vw, 40px); font-weight: 680; letter-spacing: -.03em; line-height: 1.3; }.bi-final-panel > div > p:not(.eyebrow) { margin: 0; color: rgb(255 255 255 / 79%); font-size: 13px; }.bi-final-actions { display: flex; flex: 0 0 auto; gap: 10px; }.bi-final-actions .button-primary { color: #14599f; background: #fff; box-shadow: 0 12px 24px rgb(6 54 125 / 16%); }.bi-final-actions .button-secondary { color: #fff; background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 34%); }

@media (max-width: 1050px) { .bi-hero-layout { grid-template-columns: minmax(0, .9fr) minmax(390px, 1.1fr); gap: 32px; }.bi-dashboard { transform: scale(.91); transform-origin: right center; }.bi-architecture-flow li { min-height: 186px; padding: 23px 12px; }.bi-architecture-flow i { font-size: 12px; }.bi-architecture-flow strong { font-size: 15px; }.bi-capability-grid { grid-template-columns: repeat(3, 1fr); }.bi-industry-grid { grid-template-columns: repeat(3, 1fr); }.bi-value-grid { grid-template-columns: repeat(3, 1fr); }.bi-value-grid article:nth-child(4) { border-left: 0; }.bi-value-grid article:nth-child(n + 4) { border-top: 1px solid rgb(159 232 255 / 22%); } }
@media (max-width: 900px) { .bi-hero { min-height: 0; }.bi-hero-layout { grid-template-columns: 1fr; min-height: 0; padding: 79px 0 55px; }.bi-dashboard { width: min(100%, 580px); margin: -8px auto 0; justify-self: center; transform: none; }.bi-data-strip .container { grid-template-columns: repeat(2, 1fr); padding: 8px 0; }.bi-data-strip .container > div { min-height: 77px; justify-content: flex-start; padding: 0 23px; }.bi-data-strip .container > div:nth-child(3) { border-left: 0; }.bi-data-strip .container > div:nth-child(n + 3) { border-top: 1px solid #e8eef6; }.bi-architecture-flow { grid-template-columns: repeat(4, 1fr); }.bi-architecture-flow li:nth-child(4)::after { display: none; }.bi-capability-grid { grid-template-columns: repeat(2, 1fr); }.bi-terminal-layout,.bi-faq-layout { grid-template-columns: 1fr; }.bi-terminal-layout { gap: 44px; }.bi-faq-layout { gap: 34px; }.bi-delivery-flow { grid-template-columns: repeat(4, 1fr); }.bi-delivery-flow li:nth-child(4)::after { display: none; } }
@media (max-width: 620px) { .bi-page .section { padding: 70px 0; }.bi-hero-layout { padding: 58px 0 39px; }.bi-kicker { margin-bottom: 13px; font-size: 10px; }.bi-hero h1 { font-size: 37px; }.bi-hero-copy > p:not(.bi-kicker) { margin-top: 17px; font-size: 14px; line-height: 1.85; }.bi-hero-tags { margin-top: 19px; }.bi-hero-actions { margin-top: 24px; }.bi-hero-actions .button { width: 100%; }.bi-dashboard { width: 415px; max-width: 113%; min-height: 332px; margin: -10px 0 -29px -5%; transform: scale(.82); transform-origin: top center; }.bi-dashboard-body { min-height: 276px; }.bi-data-strip .container { grid-template-columns: 1fr; }.bi-data-strip .container > div { min-height: 67px; padding: 0 18px; }.bi-data-strip .container > div + div { border-top: 1px solid #e8eef6; border-left: 0; }.bi-data-strip .container > div:nth-child(3) { border-left: 0; }.bi-page .section-heading { margin-bottom: 29px; }.bi-page .section-heading h2 { font-size: 28px; }.bi-page .section-heading > p:last-child { font-size: 13px; }.bi-compare-grid,.bi-deployment-grid { grid-template-columns: 1fr; }.bi-compare-card { min-height: 0; padding: 25px 21px; }.bi-compare-card h3 { font-size: 20px; }.bi-compare-card ul { gap: 11px; margin-top: 21px; }.bi-compare-card li { font-size: 13px; }.bi-architecture-flow { grid-template-columns: repeat(2, 1fr); }.bi-architecture-flow li { min-height: 138px; padding: 19px 12px; }.bi-architecture-flow li:nth-child(2n)::after { display: none; }.bi-architecture-flow b { font-size: 12px; }.bi-architecture-flow i { margin-top: 18px; font-size: 11px; }.bi-architecture-flow strong { font-size: 15px; }.bi-support-chips { justify-content: flex-start; gap: 8px; margin-top: 20px; }.bi-support-chips span { padding: 8px 11px; font-size: 12px; }.bi-capability-grid,.bi-advantage-grid { grid-template-columns: 1fr; }.bi-capability-grid article { min-height: 176px; padding: 20px; }.bi-capability-grid h3 { margin-top: 17px; }.bi-advantage-grid article { min-height: 0; padding: 22px; }.bi-advantage-grid h3 { margin-top: 16px; }.bi-industry-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }.bi-industry-grid span { min-height: 114px; padding: 16px 13px; }.bi-industry-grid b { font-size: 16px; }.bi-industry-grid small { font-size: 10px; line-height: 1.45; }.bi-value-grid { grid-template-columns: repeat(2, 1fr); }.bi-value-grid article { min-height: 113px; padding: 19px 8px; }.bi-value-grid article:nth-child(2n + 1) { border-left: 0; }.bi-value-grid article:nth-child(n + 3) { border-top: 1px solid rgb(159 232 255 / 22%); }.bi-value-grid strong { font-size: 24px; }.bi-terminal-layout { gap: 33px; }.bi-terminal-copy h2,.bi-faq-copy h2 { font-size: 29px; }.bi-terminal-copy li { grid-template-columns: 1fr; gap: 3px; }.bi-device-stage { min-height: 345px; padding: 20px; }.bi-device-screen { top: 37px; right: 35px; left: 22px; height: 219px; }.bi-device-phone { right: 12px; bottom: 13px; width: 115px; min-height: 164px; padding: 23px 11px 11px; }.bi-device-phone b { margin-top: 13px; font-size: 16px; }.bi-device-card { bottom: 27px; left: 4px; }.bi-device-bars { height: 88px; }.bi-deployment-grid article { min-height: 0; padding: 26px 22px; }.bi-deployment-grid h3 { font-size: 22px; }.bi-delivery-flow { grid-template-columns: repeat(2, 1fr); }.bi-delivery-flow li { min-height: 112px; padding: 20px 10px; }.bi-delivery-flow li:nth-child(2n)::after { display: none; }.bi-delivery-flow b { font-size: 13px; }.bi-delivery-flow span { margin-top: 14px; font-size: 13px; }.bi-faq-list button { min-height: 65px; font-size: 14px; line-height: 1.55; }.bi-faq-list article > div { padding: 0 9px 18px 0; }.bi-final-section { padding: 28px 0 68px !important; }.bi-final-panel { display: block; min-height: 0; padding: 34px 25px; border-radius: 15px; }.bi-final-panel h2 { font-size: 27px; }.bi-final-actions { display: grid; grid-template-columns: 1fr; margin-top: 25px; }.bi-final-actions .button { width: 100%; } }
.industry-service-network-heading { position: relative; z-index: 1; text-align: center; }
.industry-service-network-heading > span { display: inline-block; margin-bottom: 11px; color: var(--industry-network-primary); font-size: 11px; font-weight: 750; letter-spacing: .15em; }
.industry-service-network-heading h2 { margin: 0; color: #27344d; font-size: clamp(32px, 3vw, 42px); font-weight: 700; letter-spacing: -.05em; line-height: 1.25; }
.industry-service-network-heading p { margin: 14px 0 0; color: #718098; font-size: 16px; }
.industry-service-network-flow { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; margin: 48px auto 0; padding: 0; list-style: none; }
.industry-service-network-flow li { position: relative; display: grid; min-height: 138px; align-content: center; justify-items: center; gap: 13px; padding: 22px 10px; overflow: visible; color: #273d5c; text-align: center; background: rgb(255 255 255 / 90%); border: 1px solid color-mix(in srgb, var(--industry-network-primary) 17%, #fff); border-radius: 16px; box-shadow: 0 13px 24px rgb(28 69 119 / 7%); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.industry-service-network-flow li:hover { border-color: color-mix(in srgb, var(--industry-network-primary) 48%, #fff); box-shadow: 0 18px 30px var(--industry-network-shadow); transform: translateY(-5px); }
.industry-service-network-step { display: grid; width: 39px; height: 39px; place-items: center; color: #fff; background: linear-gradient(135deg, var(--industry-network-primary), var(--industry-network-deep)); border: 4px solid color-mix(in srgb, var(--industry-network-primary) 12%, #fff); border-radius: 50%; box-shadow: 0 7px 14px var(--industry-network-shadow); font-size: 12px; font-weight: 750; line-height: 1; }
.industry-service-network-flow li > div { display: grid; gap: 6px; }
.industry-service-network-flow strong { color: #2c405d; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.industry-service-network-flow small { color: #77899f; font-size: 12px; line-height: 1.45; }
.industry-service-network-flow li > i { position: absolute; top: 50%; right: -23px; z-index: 2; width: 24px; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--industry-network-primary) 42%, transparent), var(--industry-network-primary)); border-radius: 99px; transform: translateY(-50%); }
.industry-service-network-flow li > i::before { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; content: ""; background: var(--industry-network-primary); border: 3px solid var(--industry-network-soft); border-radius: 50%; box-shadow: 0 3px 7px var(--industry-network-shadow); transform: translate(-50%, -50%); }
.industry-service-network-flow li > i::after { position: absolute; top: 50%; right: 0; width: 7px; height: 7px; content: ""; border-top: 2px solid var(--industry-network-primary); border-right: 2px solid var(--industry-network-primary); transform: translateY(-50%) rotate(45deg); }
@media (max-width: 1080px) { .industry-service-network-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 36px; max-width: 760px; }.industry-service-network-flow li > i { right: -37px; width: 38px; }.industry-service-network-flow li:nth-child(3) > i { display: none; } }
@media (max-width: 620px) { .industry-service-network-section { padding: 56px 0 60px; }.industry-service-network-heading > span { margin-bottom: 9px; font-size: 10px; }.industry-service-network-heading h2 { font-size: 29px; }.industry-service-network-heading p { max-width: 280px; margin: 11px auto 0; font-size: 14px; line-height: 1.65; }.industry-service-network-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 34px; }.industry-service-network-flow li { min-height: 124px; gap: 9px; padding: 16px 7px; border-radius: 12px; }.industry-service-network-step { width: 34px; height: 34px; border-width: 3px; font-size: 11px; }.industry-service-network-flow strong { font-size: 15px; }.industry-service-network-flow small { font-size: 11px; }.industry-service-network-flow li > i { display: none; } }

/* Production and project-system content refinements. */
@media (min-width: 621px) {
  .production-compare-card ul { gap: 14px; }
  .production-compare-card li { grid-template-columns: 17px 1fr; gap: 10px; font-size: 14px; line-height: 1.62; }
  .production-compare-card li::before { width: 17px; height: 17px; }
  .production-architecture-flow i { font-size: 13px; }
  .production-architecture-flow strong { margin-top: 8px; font-size: 17px; }
  .production-support-chips { gap: 11px; margin-top: 27px; }
  .production-support-chips span { padding: 10px 16px; font-size: 15px; }
  .production-scenario-grid { gap: 14px; }
  .production-scenario-grid span { min-height: 112px; font-size: 16px; }
}
.project-system-page .solution-metrics { border-top: 1px solid #edf1f5; box-shadow: 0 8px 20px rgb(27 79 94 / 3%); }
.project-system-page .solution-metrics-grid > div { min-height: 122px; }
.project-system-page .solution-metrics-grid strong { font-size: 24px; letter-spacing: -.025em; }
.project-system-page .solution-metrics-grid span { max-width: 158px; font-size: 12px; }
.project-industries-section { background: linear-gradient(180deg, #fbfefd, #f5fbf9); }
.project-industries-section .section-heading { margin-bottom: 44px; }
.project-industry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.project-industry-grid span { position: relative; display: flex; min-height: 104px; align-items: center; justify-content: center; gap: 11px; padding: 18px 14px; overflow: hidden; color: #267e74; text-align: center; background: linear-gradient(135deg, #f3fcfa, #fff); border: 1px solid #d1ebe5; border-radius: 13px; box-shadow: 0 8px 17px rgb(20 133 117 / 4%); transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.project-industry-grid span::after { position: absolute; top: -33px; right: -35px; width: 78px; height: 78px; content: ""; background: radial-gradient(circle, rgb(31 166 145 / 13%), transparent 70%); border-radius: 50%; transition: transform .3s ease; }
.project-industry-grid span > * { position: relative; z-index: 1; }
.project-industry-grid .project-industry-symbol { position: absolute; top: 17px; right: 18px; z-index: 2; display: grid; width: 34px; height: 34px; place-items: center; color: #299786; background: rgb(221 247 241 / 80%); border: 1px solid rgb(41 151 134 / 16%); border-radius: 10px; box-shadow: 0 7px 15px rgb(28 134 116 / 8%); transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease; }
.project-industry-grid .project-industry-symbol svg { width: 18px; height: 18px; }
.project-industry-grid span i { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; color: #168d7d; background: #dff5f0; border-radius: 9px; font-size: 10px; font-style: normal; font-weight: 750; }
.project-industry-grid span b { color: #267e74; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.project-industry-grid span:hover { background: linear-gradient(135deg, #159b8a, #11796d); border-color: #168d7d; box-shadow: 0 15px 27px rgb(20 133 117 / 18%); transform: translateY(-4px); }
.project-industry-grid span:hover::after { transform: scale(1.6); }.project-industry-grid span:hover i { color: #137365; background: #d5f5ed; }.project-industry-grid span:hover b { color: #fff; }.project-industry-grid span:hover .project-industry-symbol { color: #137365; background: #d7f7ee; border-color: rgb(213 245 237 / 72%); transform: translateY(-2px); }
@media (max-width: 900px) { .project-industry-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .project-system-page .solution-metrics-grid > div { min-height: 75px; }.project-system-page .solution-metrics-grid strong { font-size: 21px; }.project-system-page .solution-metrics-grid span { font-size: 11px; }.project-industries-section .section-heading { margin-bottom: 30px; }.project-industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.project-industry-grid span { min-height: 82px; gap: 8px; padding: 12px 8px; border-radius: 10px; }.project-industry-grid span i { width: 26px; height: 26px; border-radius: 7px; font-size: 9px; }.project-industry-grid span b { font-size: 15px; }.project-industry-grid .project-industry-symbol { top: 10px; right: 10px; width: 27px; height: 27px; border-radius: 8px; }.project-industry-grid .project-industry-symbol svg { width: 15px; height: 15px; } }

/* Expanded manufacturing scenarios: clearer industry context and lightweight interaction. */
.production-scenario-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.production-scenario-grid article { position: relative; display: grid; min-height: 168px; align-content: center; justify-items: center; gap: 10px; padding: 25px 18px; overflow: hidden; color: #2c5b86; text-align: center; background: linear-gradient(135deg, #f5fbff, #eaf5ff); border: 1px solid #cce4f7; border-radius: 14px; box-shadow: 0 8px 18px rgb(29 104 175 / 4%); transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.production-scenario-grid article::before { position: absolute; top: -54px; left: -47px; width: 126px; height: 126px; content: ""; background: radial-gradient(circle, rgb(75 179 226 / 17%), transparent 68%); border-radius: 50%; transition: transform .35s ease; }
.production-scenario-grid article::after { position: absolute; right: -42px; bottom: -46px; width: 110px; height: 110px; content: ""; border: 1px solid rgb(39 136 209 / 15%); border-radius: 50%; transition: transform .35s ease, border-color .25s ease; }
.production-scenario-grid article > * { position: relative; z-index: 1; }
.production-scenario-grid article i { display: grid; width: 42px; height: 42px; place-items: center; color: #1678b6; background: #dff2ff; border: 1px solid #c8e6f8; border-radius: 12px; font-size: 17px; font-style: normal; font-weight: 700; transition: color .25s ease, background .25s ease, transform .25s ease; }
.production-scenario-grid article strong { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.production-scenario-grid article small { color: #6f89a3; font-size: 13px; line-height: 1.35; transition: color .25s ease; }
.production-scenario-grid article:hover { color: #fff; background: linear-gradient(135deg, #1a7bbf, #105b9f); border-color: #176fb5; box-shadow: 0 17px 30px rgb(15 89 164 / 19%); transform: translateY(-5px); }
.production-scenario-grid article:hover::before { transform: scale(1.8); }.production-scenario-grid article:hover::after { border-color: rgb(198 244 255 / 42%); transform: scale(1.18); }.production-scenario-grid article:hover i { color: #1767a4; background: #c9f6f1; transform: translateY(-2px); }.production-scenario-grid article:hover small { color: rgb(221 246 255 / 82%); }
@media (max-width: 900px) { .production-scenario-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .production-scenario-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }.production-scenario-grid article { min-height: 143px; gap: 8px; padding: 19px 10px; border-radius: 11px; }.production-scenario-grid article i { width: 36px; height: 36px; font-size: 15px; }.production-scenario-grid article strong { font-size: 17px; }.production-scenario-grid article small { font-size: 11px; } }

/* Give the implementation path more visual weight without reducing its eight-step clarity. */
@media (min-width: 621px) {
  .production-delivery-flow { gap: 13px; }
  .production-delivery-flow li { min-height: 132px; padding: 24px 10px 20px; border-radius: 12px; box-shadow: 0 8px 17px rgb(23 91 159 / 5%); }
  .production-delivery-flow li:not(:last-child)::after { right: -11px; font-size: 17px; }
  .production-delivery-flow b { font-size: 15px; }
  .production-delivery-flow span { margin-top: 18px; color: #365f87; font-size: 15px; font-weight: 650; line-height: 1.45; }
}
@media (max-width: 620px) { .production-delivery-flow li { min-height: 112px; padding: 20px 10px; }.production-delivery-flow b { font-size: 13px; }.production-delivery-flow span { margin-top: 13px; font-size: 13px; font-weight: 650; } }