: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%);
  --container: min(1136px, 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;
}

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;
}

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

@media (min-width: 901px) {
  .has-menu:hover>.mega-menu,
  .has-menu:focus-within>.mega-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(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-miniprogram,
.icon-ai,
.icon-bi,
.icon-lab {
  background: linear-gradient(135deg, #e8f1ff, #f0ebff);
}

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

.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-ticket,
.icon-budget,
.icon-energy {
  background: linear-gradient(135deg, #fff5df, #ffebe6);
}

.icon-charge::before,
.icon-ticket::before,
.icon-budget::before,
.icon-energy::before {
  color: #ea8b11;
}

.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-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-miniprogram,
.mega-menu .icon-ai,
.mega-menu .icon-bi,
.mega-menu .icon-lab,
.mega-menu .icon-labor { color: #6e59eb; }

.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-ticket,
.mega-menu .icon-budget,
.mega-menu .icon-energy { color: #ea8b11; }

.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 {
  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: 13px;
  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: 0;
  transform: translateY(20px);
  transition: opacity .55s cubic-bezier(.2, .75, .25, 1), transform .55s cubic-bezier(.2, .75, .25, 1);
}

.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 {
    margin-left: auto;
    margin-right: 12px;
    font-size: 0;
  }

  .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;
  }

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

  .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 {
    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;
  }

  .header-phone {
    margin-right: 8px;
  }

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

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

  .hero h1 {
    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, 2.3vw, 36px);
  z-index: 60;
  display: block;
  width: 124px;
  filter: drop-shadow(0 12px 22px rgb(19 68 140 / 25%));
  transform: translateY(-50%);
  transition: filter .2s ease, transform .2s ease;
}

.service-float:hover,
.service-float:focus-visible {
  filter: drop-shadow(0 17px 26px rgb(19 68 140 / 34%));
  outline: 0;
  transform: translateY(calc(-50% - 4px));
}

.service-float:focus-visible img {
  outline: 3px solid rgb(57 120 255 / 42%);
  outline-offset: 4px;
}

.service-float img {
  width: 100%;
  height: auto;
}

/* 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: 94px;
  }

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

/* 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: 94px;
  height: 54px;
  object-fit: contain;
  filter: saturate(.88) contrast(.96);
  transition: filter .2s ease;
}

.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: 13px;
  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: 14px;
  font-weight: 650;
}

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

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

.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: 14px;
  font-weight: 650;
}

.branch-heading p {
  margin: 0;
  color: #8a91a0;
  font-size: 11px;
  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: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 48px 24px;
  color: #8c93a1;
  border-top: 1px solid #e2e3f0;
  font-size: 11px;
  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;
}

@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 {
    align-items: flex-start;
    flex-direction: column;
  }
}

@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 {
    margin-bottom: 10px;
    font-size: 11px;
  }

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

  .branch-tabs {
    gap: 8px;
  }

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

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

  .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%;
  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;
}

.orbit-two {
  width: 368px;
  height: 421px;
  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%);
  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;
  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);
}

.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;
}

.about-float-grow {
  bottom: 5px;
  left: 58px;
}

.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%);
}

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

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

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

.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="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;
  min-height: max(640px, calc(100svh - 74px));
  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-hero.has-intro-carousel > .solution-detail-hero-inner {
  display: none;
}

.solution-detail-copy {
  max-width: 610px;
}

.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%);
}

.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;
}

/* APP page: the offer is slide one; project visuals continue in the same hero carousel. */
.solution-detail-hero.has-intro-carousel .solution-project-carousel {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: auto;
  height: auto;
  overflow: hidden;
}

.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: max(640px, calc(100svh - 74px));
}

.solution-detail-hero.has-intro-carousel .solution-intro-carousel-slide {
  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-intro-carousel .solution-intro-carousel-slide::after {
  display: none;
}

.solution-detail-hero.has-intro-carousel .solution-intro-carousel-slide .solution-detail-hero-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: max(640px, calc(100svh - 74px));
}

.solution-detail-hero.has-intro-carousel .solution-project-carousel .solution-carousel-caption {
  right: max(150px, calc((100vw - 1280px) / 2 + 130px));
  bottom: 46px;
  left: max(28px, calc((100vw - 1280px) / 2));
}

.solution-detail-hero.has-intro-carousel .solution-project-carousel .solution-carousel-controls {
  right: max(28px, calc((100vw - 1280px) / 2));
  bottom: 42px;
}

.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-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: 130px;
  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-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-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-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);
}

.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);
}

/* 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%);
}

@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;
  }

  .solution-overview-layout {
    gap: 55px;
  }

  .solution-trust-panel {
    gap: 40px;
    padding: 48px;
  }
}

@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-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-case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .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-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;
  }

  .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-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-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;
  }
}
@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;
  }
}