* {
  box-sizing: border-box;
}

:root {
  --page: #f7faff;
  --white: #ffffff;
  --ink: #202a3a;
  --ink-soft: #526175;
  --muted: #8793a5;
  --line: #e3eaf3;
  --blue: #1c95ff;
  --blue-deep: #0879df;
  --panel: #edf5ff;
  --cta: #eaf6ff;
  --shadow: 0 24px 70px rgba(31, 74, 122, 0.1);
  --page-accent: #1c95ff;
  --page-accent-deep: #0879df;
  --page-accent-soft: #eaf6ff;
  --page-accent-glow: rgba(28, 149, 255, 0.14);
  --page-secondary: #20c7aa;
  --page-warm: #ffb861;
  --page-panel: #ffffff;
  --page-card: #edf5ff;
  --page-background: #f7faff;
}

@property --glass-lift {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --float-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --float-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --float-z {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --online-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --offline-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --alert-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--page-background);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  letter-spacing: 0;
}

.page-home,
.page-solutions,
.page-platform,
.page-cases,
.page-support,
.page-about,
.page-contact {
  --page-accent: #1c95ff;
  --page-accent-deep: #0879df;
  --page-accent-soft: #e7f5ff;
  --page-accent-glow: rgba(28, 149, 255, 0.16);
  --page-secondary: #18b684;
  --page-warm: #ffb45c;
  --page-card: #e9f5ff;
  --page-background: linear-gradient(180deg, #f6fbff 0%, #edf7ff 46%, #f7fbff 100%);
}

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

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 86px;
  min-height: 86px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(226, 232, 240, 0.72);
  backdrop-filter: blur(14px);
}

.nav-shell {
  width: min(1540px, calc(100% - 96px));
  height: 100%;
  min-height: 86px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.brand {
  width: 250px;
  flex: 0 0 250px;
}

.brand img {
  width: 250px;
  min-width: 250px;
  height: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 62px;
  flex: 1;
  font-size: 16px;
  line-height: 1;
  font-weight: 800;
  color: #2f3a4b;
  white-space: nowrap;
}

.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0 28px;
  min-width: 4.8em;
}

.nav-links a.active {
  color: var(--page-accent-deep);
}

.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--page-accent), var(--page-secondary));
  transform: translateX(-50%);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 34px;
  flex: 0 0 auto;
}

.menu-lines {
  position: relative;
  --menu-pad: 15px;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(198, 216, 235, 0.9);
  border-radius: 16px;
  padding: 0;
  display: block;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 250, 255, 0.86));
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 24px rgba(31, 74, 122, 0.08);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.menu-lines span,
.menu-lines::before,
.menu-lines::after {
  content: "";
  position: absolute;
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 2.5px;
  background: #243247;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  transition:
    left 180ms ease,
    right 180ms ease,
    top 180ms ease,
    bottom 180ms ease,
    width 180ms ease,
    height 180ms ease,
    background 180ms ease,
    transform 180ms ease,
    opacity 140ms ease;
}

.menu-lines span:first-child {
  left: var(--menu-pad);
  top: var(--menu-pad);
}

.menu-lines span:last-child {
  right: var(--menu-pad);
  top: var(--menu-pad);
}

.menu-lines::before {
  left: var(--menu-pad);
  bottom: var(--menu-pad);
}

.menu-lines::after {
  right: var(--menu-pad);
  bottom: var(--menu-pad);
}

.menu-lines:hover,
.menu-lines.is-open {
  border-color: color-mix(in srgb, var(--page-accent) 46%, rgba(255, 255, 255, 0.6));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--page-accent) 18%, #ffffff), color-mix(in srgb, var(--page-secondary) 14%, #ffffff));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 14px 30px var(--page-accent-glow);
  transform: translateY(-1px);
}

.menu-lines:hover span,
.menu-lines:hover::before,
.menu-lines:hover::after,
.menu-lines.is-open span,
.menu-lines.is-open::before,
.menu-lines.is-open::after {
  background: var(--page-accent);
}

.menu-lines.is-open span:first-child {
  opacity: 0;
  transform: translate(6px, 6px) scale(0.4);
}

.menu-lines.is-open span:last-child {
  opacity: 0;
  transform: translate(-6px, 6px) scale(0.4);
}

.menu-lines.is-open::before {
  left: 50%;
  top: 50%;
  bottom: auto;
  width: 24px;
  height: 2.6px;
  border-radius: 999px;
  background: var(--page-accent-deep);
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu-lines.is-open::after {
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  width: 24px;
  height: 2.6px;
  border-radius: 999px;
  background: var(--page-accent-deep);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.nav-popover {
  position: fixed;
  top: 98px;
  right: max(32px, calc((100vw - 1540px) / 2));
  z-index: 60;
  width: min(360px, calc(100vw - 48px));
  padding: 18px;
  border: 1px solid rgba(205, 221, 238, 0.9);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.985), rgba(245, 251, 255, 0.965)),
    color-mix(in srgb, var(--page-accent-soft) 28%, #ffffff);
  box-shadow: 0 24px 70px rgba(31, 74, 122, 0.16);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
}

.nav-popover.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.nav-popover-title {
  padding: 4px 6px 12px;
  color: #718095;
  font-size: 13px;
  font-weight: 800;
}

.nav-popover-links {
  display: grid;
  gap: 8px;
}

.nav-popover-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #263448;
  font-size: 15px;
  font-weight: 800;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.nav-popover-links a::after {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%230879df' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px 15px no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--page-accent) 12%, #ffffff), #ffffff);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--page-accent) 24%, transparent),
    0 8px 18px color-mix(in srgb, var(--page-accent) 10%, transparent);
  opacity: 0.82;
}

.nav-popover-links a:hover,
.nav-popover-links a.active,
.nav-popover-contact:hover {
  color: var(--page-accent-deep);
  border-color: color-mix(in srgb, var(--page-accent) 30%, transparent);
  background: var(--page-accent-soft);
  transform: translateX(2px);
}

.nav-popover-contact {
  margin-top: 6px;
  color: var(--page-accent-deep) !important;
  background: var(--page-accent-soft);
}

.button,
.contact-pill {
  position: relative;
  --arrow-size: 34px;
  --arrow-line: 14px;
  --arrow-stroke: 2.4px;
  --arrow-head: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.button-label {
  position: relative;
  z-index: 1;
}

.button:hover,
.contact-pill:hover {
  transform: translateY(-1px);
}

.button.primary:hover {
  background: linear-gradient(135deg, var(--page-accent-deep), var(--page-accent));
  box-shadow: 0 16px 34px var(--page-accent-glow), 0 0 0 5px color-mix(in srgb, var(--page-accent) 12%, transparent);
}

.button.primary:focus-visible {
  outline: none;
  background: linear-gradient(135deg, var(--page-accent-deep), var(--page-accent));
  box-shadow: 0 16px 34px var(--page-accent-glow), 0 0 0 5px color-mix(in srgb, var(--page-accent) 18%, transparent);
}

.button.secondary:hover,
.contact-pill:hover {
  color: var(--page-accent-deep);
  border-color: color-mix(in srgb, var(--page-accent) 58%, #ffffff);
  background: var(--page-accent-soft);
  box-shadow: 0 12px 26px var(--page-accent-glow);
}

.button.secondary:focus-visible,
.contact-pill:focus-visible,
.menu-lines:focus-visible {
  outline: none;
  color: var(--page-accent-deep);
  border-color: color-mix(in srgb, var(--page-accent) 58%, #ffffff);
  background: var(--page-accent-soft);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--page-accent) 14%, transparent);
}

.button:active,
.contact-pill:active,
.menu-lines:active,
.button.is-clicking,
.contact-pill.is-clicking,
.menu-lines.is-clicking {
  transform: translateY(1px) scale(0.985);
}

.button::after,
.contact-pill::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.button.primary::after {
  background: rgba(255, 255, 255, 0.5);
}

.button.secondary::after,
.contact-pill::after {
  background: color-mix(in srgb, var(--page-accent) 16%, transparent);
}

.button.is-clicking::after,
.contact-pill.is-clicking::after {
  animation: button-ripple 460ms ease-out;
}

.button.primary.is-clicking {
  box-shadow: 0 8px 20px var(--page-accent-glow);
}

.button.secondary.is-clicking,
.contact-pill.is-clicking {
  border-color: color-mix(in srgb, var(--page-accent) 55%, #ffffff);
  box-shadow: 0 8px 24px var(--page-accent-glow);
}

@keyframes button-ripple {
  0% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(0);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(18);
  }
}

.button.primary {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(var(--arrow-size), 1fr);
  align-items: center;
  justify-items: center;
  column-gap: 12px;
  min-width: 184px;
  height: 58px;
  padding: 0 28px;
  color: var(--white);
  background: linear-gradient(135deg, var(--page-accent), var(--page-accent-deep));
  box-shadow: 0 12px 28px var(--page-accent-glow);
}

.button.primary .button-label {
  grid-column: 2;
  justify-self: center;
}

.button.primary .arrow {
  grid-column: 3;
  justify-self: start;
}

.button.secondary {
  min-width: 184px;
  height: 58px;
  padding: 0 28px;
  color: #596678;
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--page-accent-soft) 42%, #ffffff));
  border: 2px solid color-mix(in srgb, var(--page-accent) 20%, #cbd4df);
}

.contact-pill {
  --arrow-size: 30px;
  --arrow-line: 12px;
  --arrow-stroke: 2.2px;
  --arrow-head: 7px;
  width: 164px;
  height: 42px;
  color: #374151;
  border: 1px solid #cbd4df;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--page-accent-soft) 36%, #ffffff));
  font-size: 14px;
}

.arrow {
  width: var(--arrow-size);
  height: var(--arrow-size);
  position: relative;
  flex: 0 0 var(--arrow-size);
  display: inline-block;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.38),
    0 8px 18px color-mix(in srgb, currentColor 12%, transparent);
  transform: translateZ(0);
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
}

.arrow::before {
  inset: 0;
  margin: auto;
  width: calc(var(--arrow-size) * 0.58);
  height: calc(var(--arrow-size) * 0.42);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.arrow::after {
  display: none;
}

.button.secondary .arrow,
.contact-pill .arrow {
  color: var(--page-accent-deep);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--page-accent) 12%, #ffffff), #ffffff);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--page-accent) 24%, transparent),
    0 8px 18px color-mix(in srgb, var(--page-accent) 10%, transparent);
}

.button:hover .arrow,
.button:focus-visible .arrow,
.contact-pill:hover .arrow,
.contact-pill:focus-visible .arrow {
  transform: translateX(3px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--page-accent) 18%, #ffffff), #ffffff);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--page-accent) 34%, transparent),
    0 10px 22px color-mix(in srgb, var(--page-accent) 18%, transparent);
}

.button.primary:hover .arrow,
.button.primary:focus-visible .arrow {
  background: rgba(255, 255, 255, 0.26);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 10px 22px rgba(7, 91, 168, 0.18);
}

.hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  background: var(--page-background);
  isolation: isolate;
}

.home-hero {
  min-height: 1040px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: url("assets/hui-chuang-yi-hotel-lobby-hero-bg-v3.png") right center / cover no-repeat;
  opacity: 0.74;
  filter: saturate(0.96) brightness(1.03);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.08) 52%, rgba(0, 0, 0, 0.46) 70%, rgba(0, 0, 0, 1) 92%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.08) 52%, rgba(0, 0, 0, 0.46) 70%, rgba(0, 0, 0, 1) 92%);
}

.home-hero::before {
  width: 100%;
  opacity: 0.74;
  filter: saturate(0.96) brightness(1.03);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.08) 52%, rgba(0, 0, 0, 0.46) 70%, rgba(0, 0, 0, 1) 92%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.08) 52%, rgba(0, 0, 0, 0.46) 70%, rgba(0, 0, 0, 1) 92%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(247, 250, 255, 1) 0%, rgba(247, 250, 255, 1) 50%, rgba(247, 250, 255, 0.98) 60%, rgba(247, 250, 255, 0.8) 73%, rgba(247, 250, 255, 0.38) 88%, rgba(247, 250, 255, 0.08) 100%),
    radial-gradient(ellipse at 56% 50%, rgba(247, 250, 255, 0.98) 0%, rgba(247, 250, 255, 0.9) 24%, rgba(247, 250, 255, 0.52) 50%, rgba(247, 250, 255, 0) 76%),
    linear-gradient(180deg, rgba(247, 250, 255, 0) 0%, rgba(247, 250, 255, 0.1) 64%, rgba(247, 250, 255, 0.44) 100%);
}

.sub-hero::after {
  background:
    linear-gradient(90deg, rgba(247, 250, 255, 1) 0%, rgba(247, 250, 255, 1) 43%, rgba(247, 250, 255, 0.94) 58%, rgba(247, 250, 255, 0.62) 74%, rgba(247, 250, 255, 0.22) 90%, rgba(247, 250, 255, 0.06) 100%),
    radial-gradient(ellipse at 55% 50%, rgba(247, 250, 255, 0.9) 0%, rgba(247, 250, 255, 0.76) 26%, rgba(247, 250, 255, 0.34) 52%, rgba(247, 250, 255, 0) 78%),
    linear-gradient(180deg, rgba(247, 250, 255, 0) 0%, rgba(247, 250, 255, 0.08) 64%, rgba(247, 250, 255, 0.38) 100%);
}

.home-hero::after {
  background:
    linear-gradient(90deg, rgba(247, 250, 255, 1) 0%, rgba(247, 250, 255, 1) 41%, rgba(247, 250, 255, 0.9) 55%, rgba(247, 250, 255, 0.48) 72%, rgba(247, 250, 255, 0.1) 90%, rgba(247, 250, 255, 0.02) 100%),
    radial-gradient(ellipse at 55% 50%, rgba(247, 250, 255, 0.84) 0%, rgba(247, 250, 255, 0.62) 24%, rgba(247, 250, 255, 0.18) 52%, rgba(247, 250, 255, 0) 78%),
    linear-gradient(180deg, rgba(247, 250, 255, 0) 0%, rgba(247, 250, 255, 0.04) 64%, rgba(247, 250, 255, 0.26) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: min(1540px, calc(100% - 120px));
  margin: 0 auto;
  padding-top: 148px;
}

.home-hero .hero-inner {
  padding-top: 160px;
}

.hero-copy {
  width: min(720px, 46vw);
}

.home-hero .hero-copy {
  width: min(740px, 46vw);
}

.sub-hero .hero-copy {
  width: min(760px, 48vw);
}

.sub-hero .hero-inner {
  min-height: 610px;
}

.sub-hero-visual {
  position: absolute;
  top: 154px;
  right: 0;
  --visual-scale: 1;
  --visual-opacity: 1;
  width: min(560px, 40vw);
  height: 430px;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(150px) scale(var(--visual-scale));
  transform-origin: top right;
  animation: sub-hero-slide-in 1100ms cubic-bezier(0.16, 0.9, 0.2, 1) 120ms forwards;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.visual-card {
  position: absolute;
  border: 0;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), color-mix(in srgb, var(--page-accent-soft) 62%, rgba(235, 247, 255, 0.52)));
  box-shadow:
    0 28px 70px var(--page-accent-glow),
    inset 0 0 0 1.5px color-mix(in srgb, var(--page-accent) 34%, rgba(177, 225, 255, 0.68)),
    inset 0 0 0 2.5px rgba(255, 255, 255, 0.46);
  backdrop-filter: blur(18px) saturate(118%);
  pointer-events: auto;
  will-change: transform;
  transition: transform 260ms cubic-bezier(0.16, 0.85, 0.28, 1), box-shadow 260ms ease, background 260ms ease, opacity 260ms ease;
}

.visual-card:hover {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), color-mix(in srgb, var(--page-accent-soft) 76%, rgba(225, 246, 255, 0.66)));
  box-shadow:
    0 34px 78px var(--page-accent-glow),
    0 0 0 7px color-mix(in srgb, var(--page-accent) 9%, transparent),
    inset 0 0 0 1.5px color-mix(in srgb, var(--page-accent) 62%, rgba(84, 186, 255, 0.92)),
    inset 0 0 0 2.5px rgba(255, 255, 255, 0.52);
  animation: visual-card-hover-breathe 1.55s cubic-bezier(0.45, 0, 0.22, 1) infinite;
}

.visual-card-main {
  top: 54px;
  right: 48px;
  width: 340px;
  min-height: 218px;
  padding: 34px 34px 30px;
  overflow: hidden;
}

.visual-card-main::before {
  content: "";
  position: absolute;
  inset: 34px 32px 30px;
  border-radius: 18px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 12%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--page-accent) 9%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.32;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.visual-card-main::after {
  content: "";
  position: absolute;
  right: -54px;
  bottom: -62px;
  width: 190px;
  height: 190px;
  border: 28px solid color-mix(in srgb, var(--page-accent) 14%, transparent);
  border-radius: 50%;
}

.visual-label,
.visual-card-main strong,
.visual-flow {
  position: relative;
  z-index: 1;
}

.visual-label {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--page-accent-deep);
  background: color-mix(in srgb, var(--page-accent) 13%, #ffffff);
  font-size: 13px;
  font-weight: 800;
}

.visual-card-main strong {
  display: block;
  margin-top: 22px;
  color: #21304a;
  font-size: clamp(22px, 1.55vw, 27px);
  line-height: 1.25;
}

.visual-title-line {
  display: block;
  white-space: nowrap;
}

.visual-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.visual-flow.four {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.visual-flow i {
  height: 58px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(232, 246, 255, 0.62)),
    linear-gradient(135deg, rgba(84, 186, 255, 0.32), rgba(37, 199, 163, 0.08));
  box-shadow: inset 0 0 0 1px rgba(84, 186, 255, 0.2);
}

.visual-flow i:nth-child(2) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(232, 246, 255, 0.62)),
    linear-gradient(135deg, rgba(37, 199, 163, 0.28), rgba(84, 186, 255, 0.08));
}

.visual-flow i:nth-child(3) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(232, 246, 255, 0.62)),
    linear-gradient(135deg, rgba(92, 125, 255, 0.22), rgba(84, 186, 255, 0.1));
}

.visual-flow i:nth-child(4) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(232, 246, 255, 0.62)),
    linear-gradient(135deg, rgba(255, 176, 85, 0.28), rgba(84, 186, 255, 0.08));
}

.visual-steps,
.visual-dashboard,
.visual-case-tags,
.visual-service-list,
.visual-about-points {
  position: relative;
  z-index: 1;
}

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

.visual-steps span,
.visual-dashboard span,
.visual-service-list span,
.visual-about-points span,
.visual-case-tags span {
  color: #41546d;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(229, 246, 255, 0.56));
  box-shadow: inset 0 0 0 1px rgba(84, 186, 255, 0.2);
}

.visual-steps span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
}

.visual-steps b,
.visual-service-list b {
  color: #0879df;
  font-size: 12px;
  font-weight: 900;
}

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

.visual-dashboard span {
  display: grid;
  gap: 4px;
  min-height: 62px;
  padding: 12px 14px;
  border-radius: 16px;
  color: #63738a;
  font-size: 12px;
  font-weight: 800;
}

.visual-dashboard b {
  color: #21304a;
  font-size: 20px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.visual-case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.visual-case-tags span {
  padding: 10px 14px;
  border-radius: 999px;
  color: #426be2;
  font-size: 14px;
  font-weight: 900;
}

.visual-service-list {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.visual-service-list span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 850;
}

.visual-about-points {
  display: flex;
  gap: 10px;
  margin-top: 26px;
}

.visual-about-points span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  height: 40px;
  border-radius: 999px;
  color: #426be2;
  font-size: 14px;
  font-weight: 900;
}

.visual-card-small {
  display: grid;
  gap: 8px;
  min-width: 174px;
  padding: 18px 22px 18px 24px;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(241, 249, 255, 0.82)),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--page-accent) 9%, transparent), transparent 48%);
  box-shadow:
    0 18px 42px rgba(31, 74, 122, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 0 0 1.5px rgba(139, 210, 255, 0.7),
    inset 0 0 0 2.5px rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(145%);
}

.visual-card-small span {
  color: #63738a;
  font-size: 13px;
  font-weight: 800;
}

.visual-card-small strong {
  color: #21304a;
  font-size: clamp(18px, 1.35vw, 26px);
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.visual-card-small::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--page-accent), var(--page-secondary));
  opacity: 0.75;
}

.visual-card-a {
  top: 0;
  right: 270px;
}

.visual-card-b {
  right: 0;
  bottom: 76px;
}

.visual-card-b strong {
  color: #18a978;
}

.visual-card-c {
  right: 214px;
  bottom: 0;
}

.visual-card-c strong {
  color: #0879df;
  font-size: clamp(18px, 1.2vw, 22px);
}

.visual-solutions,
.visual-platform,
.visual-cases,
.visual-support,
.visual-about {
  width: min(640px, 42vw);
}

.visual-solutions .visual-card-main,
.visual-platform .visual-card-main,
.visual-cases .visual-card-main,
.visual-support .visual-card-main,
.visual-about .visual-card-main {
  border-radius: 30px;
}

.visual-solutions .visual-card-small,
.visual-platform .visual-card-small,
.visual-cases .visual-card-small,
.visual-support .visual-card-small,
.visual-about .visual-card-small {
  min-width: 186px;
  z-index: 3;
  box-shadow:
    0 20px 52px rgba(31, 74, 122, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1.25px rgba(139, 210, 255, 0.58);
}

.visual-solutions .visual-label {
  color: #0879df;
  background: rgba(84, 186, 255, 0.16);
}

.visual-solutions .visual-card-main {
  top: 84px;
  right: 0;
  width: 420px;
  min-height: 246px;
  z-index: 2;
}

.visual-solutions .visual-card-main::before {
  opacity: 0.24;
  background-size: 58px 58px;
}

.visual-solutions .visual-card-main::after {
  right: -82px;
  bottom: -88px;
  width: 250px;
  height: 250px;
  border-width: 38px;
  border-color: rgba(37, 199, 163, 0.15);
}

.visual-solutions .visual-card-small {
  min-width: 192px;
  padding: 16px 22px;
  border-radius: 999px;
}

.visual-solutions .visual-card-small::before {
  top: 50%;
  bottom: auto;
  left: auto;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--page-accent) 44%, transparent), transparent 68%);
  opacity: 0.18;
}

.visual-solutions .visual-card-a {
  top: 8px;
  right: auto;
  left: 8px;
}

.visual-solutions .visual-card-b {
  top: 358px;
  right: 12px;
  bottom: auto;
}

.visual-solutions .visual-card-c {
  top: 358px;
  right: auto;
  left: 24px;
  bottom: auto;
}

.visual-solutions .visual-card-a strong,
.visual-support .visual-card-a strong {
  color: var(--page-accent-deep);
}

.visual-solutions .visual-card-b strong,
.visual-support .visual-card-b strong,
.visual-about .visual-card-b strong {
  color: var(--page-secondary);
}

.visual-platform {
  width: min(620px, 42vw);
}

.visual-platform .visual-card-main {
  top: 32px;
  right: 0;
  width: 390px;
  min-height: 314px;
  z-index: 2;
}

.visual-platform .visual-card-main::before {
  opacity: 0.18;
  background-size: 36px 36px;
}

.visual-platform .visual-card-main::after {
  right: 24px;
  bottom: 22px;
  width: 118px;
  height: 118px;
  border-width: 20px;
  border-color: color-mix(in srgb, var(--page-accent) 18%, transparent);
}

.visual-platform .visual-card-small {
  left: 0;
  right: auto;
  width: 182px;
  min-width: 182px;
  padding: 16px 18px 16px 22px;
  border-radius: 18px;
}

.visual-platform .visual-card-small::before {
  top: 20px;
  bottom: auto;
  left: auto;
  right: 18px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--page-secondary);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--page-secondary) 12%, transparent);
  opacity: 1;
}

.visual-platform .visual-card-a {
  top: 22px;
}

.visual-platform .visual-card-b {
  top: 156px;
  bottom: auto;
}

.visual-platform .visual-card-c {
  top: 290px;
  bottom: auto;
}

.visual-platform .visual-card-a strong {
  color: var(--page-accent-deep);
}

.visual-platform .visual-card-b strong {
  color: var(--page-secondary);
}

.visual-platform .visual-card-c strong {
  color: color-mix(in srgb, var(--page-warm) 82%, #9a5d09);
}

.visual-cases {
  width: min(610px, 42vw);
}

.visual-cases .visual-label {
  color: var(--page-accent-deep);
  background: color-mix(in srgb, var(--page-accent) 13%, #ffffff);
}

.visual-cases .visual-card-main {
  top: 76px;
  right: auto;
  left: 0;
  width: 332px;
  min-height: 260px;
  z-index: 2;
}

.visual-cases .visual-card-main::before {
  opacity: 0.2;
  background-size: 52px 52px;
}

.visual-cases .visual-card-main::after {
  right: -72px;
  bottom: -70px;
  width: 218px;
  height: 218px;
  border-width: 34px;
  border-color: color-mix(in srgb, var(--page-secondary) 16%, transparent);
}

.visual-cases .visual-card-small {
  right: 4px;
  min-width: 204px;
  padding: 17px 20px;
  border-radius: 22px;
}

.visual-cases .visual-card-small::before {
  top: 16px;
  bottom: 16px;
  left: 0;
}

.visual-cases .visual-card-a {
  top: 6px;
}

.visual-cases .visual-card-b {
  top: 154px;
  bottom: auto;
}

.visual-cases .visual-card-c {
  top: 302px;
  bottom: auto;
  left: auto;
}

.visual-cases .visual-card-a strong {
  color: var(--page-accent-deep);
}

.visual-cases .visual-card-b strong {
  color: var(--page-secondary);
}

.visual-support {
  top: 96px;
  width: min(660px, 44vw);
}

.visual-support .visual-label {
  color: var(--page-accent-deep);
  background: color-mix(in srgb, var(--page-accent) 13%, #ffffff);
}

.visual-support .visual-card-main {
  top: 0;
  right: auto;
  left: 242px;
  width: 398px;
  min-height: 318px;
  z-index: 2;
}

.visual-support .visual-card-main::before {
  opacity: 0.2;
  background-size: 42px 42px;
}

.visual-support .visual-card-main::after {
  right: -92px;
  bottom: -96px;
  width: 252px;
  height: 252px;
  border-width: 34px;
  border-color: color-mix(in srgb, var(--page-accent) 14%, transparent);
}

.visual-support .visual-card-a {
  top: 84px;
  right: auto;
  left: 6px;
}

.visual-support .visual-card-b {
  right: 4px;
  bottom: 0;
}

.visual-support .visual-card-c {
  right: auto;
  left: 42px;
  bottom: 22px;
}

.visual-about {
  width: min(620px, 42vw);
}

.visual-about .visual-label {
  color: var(--page-accent-deep);
  background: color-mix(in srgb, var(--page-accent) 13%, #ffffff);
}

.visual-about .visual-card-main {
  top: 48px;
  right: auto;
  left: 0;
  width: 372px;
  min-height: 248px;
  z-index: 2;
}

.visual-about .visual-card-main::before {
  opacity: 0.18;
  background-size: 46px 46px;
}

.visual-about .visual-card-main::after {
  right: -66px;
  bottom: -70px;
  width: 210px;
  height: 210px;
  border-width: 32px;
  border-color: color-mix(in srgb, var(--page-secondary) 14%, transparent);
}

.visual-about .visual-card-small {
  right: 6px;
  min-width: 198px;
  padding: 17px 20px;
  border-radius: 22px;
}

.visual-about .visual-card-small::before {
  top: 18px;
  bottom: 18px;
  left: 0;
}

.visual-about .visual-card-a {
  top: 8px;
  left: auto;
}

.visual-about .visual-card-b {
  top: 156px;
  left: auto;
  bottom: auto;
}

.visual-about .visual-card-c {
  right: 42px;
  bottom: 0;
}

.hero-visual-scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: visual-scene-float 5.6s ease-in-out infinite;
}

.hero-visual-scene::before {
  content: "";
  position: absolute;
  inset: 36px 0 18px;
  border-radius: 48%;
  background:
    radial-gradient(circle at 74% 44%, color-mix(in srgb, var(--page-accent) 16%, transparent), transparent 42%),
    radial-gradient(circle at 38% 72%, color-mix(in srgb, var(--page-secondary) 12%, transparent), transparent 46%);
  filter: blur(18px);
  opacity: 0.86;
  transform: translateZ(-60px);
}

.case-scene {
  animation: none;
}

.solution-route-card,
.platform-console,
.case-outcome-board,
.support-flow-panel,
.about-lens {
  position: absolute;
  overflow: hidden;
  color: #21304a;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(247, 252, 255, 0.5) 48%, color-mix(in srgb, var(--page-accent-soft) 58%, rgba(236, 249, 255, 0.5))),
    radial-gradient(circle at 86% 20%, rgba(255, 255, 255, 0.72), transparent 38%);
  box-shadow:
    0 36px 82px rgba(31, 74, 122, 0.13),
    0 16px 42px var(--page-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 0 0 1px rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(24px) saturate(142%);
  transition: transform 360ms cubic-bezier(0.16, 0.88, 0.22, 1), box-shadow 360ms ease, background 360ms ease;
}

.solution-route-card:hover,
.platform-console:hover,
.case-outcome-board:hover,
.support-flow-panel:hover,
.about-lens:hover {
  transform: translate3d(-12px, -12px, 44px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(250, 253, 255, 0.58) 46%, color-mix(in srgb, var(--page-accent-soft) 70%, rgba(228, 248, 255, 0.6))),
    radial-gradient(circle at 86% 20%, rgba(255, 255, 255, 0.8), transparent 40%);
  box-shadow:
    0 44px 92px rgba(31, 74, 122, 0.16),
    0 20px 54px var(--page-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.solution-route-card strong,
.platform-console strong,
.case-outcome-board strong,
.support-flow-panel strong,
.about-lens strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 22px;
  color: #21304a;
  font-size: clamp(24px, 1.6vw, 31px);
  line-height: 1.24;
  font-weight: 900;
}

.solution-route-card {
  top: 46px;
  right: 0;
  width: 520px;
  min-height: 336px;
  padding: 42px 44px 38px;
  border-radius: 38px;
}

.solution-route-card::after {
  content: "";
  position: absolute;
  right: -72px;
  top: 42px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: conic-gradient(from 132deg, color-mix(in srgb, var(--page-secondary) 23%, transparent), color-mix(in srgb, var(--page-accent) 12%, transparent), transparent 74%);
  opacity: 0.52;
}

.solution-route {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 38px;
  padding-top: 8px;
}

.solution-route::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 36px;
  right: 36px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--page-accent), var(--page-secondary), color-mix(in srgb, var(--page-accent) 72%, #fff));
  opacity: 0.68;
}

.solution-route span {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  min-height: 94px;
  color: #41546d;
  font-weight: 850;
  transition: transform 240ms ease, color 240ms ease;
}

.solution-route span::before {
  content: "";
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.92), transparent 32%),
    linear-gradient(135deg, var(--page-accent), var(--page-secondary));
  box-shadow:
    0 14px 30px var(--page-accent-glow),
    inset 0 0 0 8px rgba(255, 255, 255, 0.32);
}

.solution-route span:hover,
.solution-badges span:hover,
.platform-metrics span:hover,
.support-rail span:hover,
.about-pillars span:hover {
  animation: visual-chip-breathe 1.2s ease-in-out infinite;
}

.solution-route b {
  position: absolute;
  top: 16px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.solution-route em {
  font-style: normal;
  font-size: 15px;
}

.solution-badges {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.solution-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  color: var(--page-accent-deep);
  background: color-mix(in srgb, var(--page-accent) 12%, rgba(255, 255, 255, 0.72));
  font-size: 13px;
  font-weight: 850;
  transition: transform 240ms ease, background 240ms ease;
}

.platform-console {
  top: 28px;
  right: 18px;
  width: 520px;
  min-height: 364px;
  padding: 40px 42px;
  border-radius: 34px 54px 34px 54px;
}

.platform-stream {
  position: relative;
  z-index: 1;
  height: 92px;
  margin-top: 28px;
  border-radius: 34px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 10%, transparent), color-mix(in srgb, var(--page-secondary) 12%, transparent)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.2));
  overflow: hidden;
}

.platform-stream::before {
  content: "";
  position: absolute;
  inset: 21px 34px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--page-accent), var(--page-secondary), transparent);
  opacity: 0.58;
  animation: platform-stream-flow 2.9s ease-in-out infinite;
}

.platform-stream span {
  position: absolute;
  top: 24px;
  width: 12px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.16);
}

.platform-stream span:nth-child(1) {
  left: 24%;
}

.platform-stream span:nth-child(2) {
  left: 50%;
}

.platform-stream span:nth-child(3) {
  left: 74%;
}

.platform-metrics {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.platform-metrics span {
  display: grid;
  gap: 6px;
  min-height: 76px;
  padding: 14px 8px 12px;
  border-radius: 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition: transform 240ms ease, background 240ms ease;
}

.platform-metrics b {
  color: var(--page-accent-deep);
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.platform-metrics em {
  color: #65758d;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.case-outcome-board {
  top: 36px;
  right: 10px;
  width: 540px;
  min-height: 366px;
  padding: 38px 42px 36px;
  border-radius: 58px 36px 64px 42px;
}

.case-outcome-board::before {
  content: "";
  position: absolute;
  right: -68px;
  bottom: -88px;
  width: 280px;
  height: 280px;
  border-radius: 48% 52% 46% 54%;
  background:
    radial-gradient(circle at 46% 42%, rgba(255, 255, 255, 0.55) 0 26%, transparent 27%),
    conic-gradient(from 130deg, color-mix(in srgb, var(--page-secondary) 20%, transparent), color-mix(in srgb, var(--page-accent) 14%, transparent), transparent 72%);
  opacity: 0.66;
  filter: blur(0.2px);
  animation: case-orbit-breathe 6.2s ease-in-out infinite;
}

.case-outcome-board::after {
  content: "";
  display: none;
  position: absolute;
  left: 54px;
  right: 48px;
  top: 212px;
  height: 74px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0 5%, color-mix(in srgb, var(--page-accent) 20%, transparent) 18%, color-mix(in srgb, var(--page-secondary) 22%, transparent) 52%, color-mix(in srgb, var(--page-accent) 18%, transparent) 84%, transparent 100%);
  transform: rotate(-6deg);
  filter: blur(12px);
  opacity: 0.82;
}

.case-value-map {
  position: relative;
  z-index: 1;
  height: 202px;
  margin-top: 28px;
}

.case-value-map::before {
  content: "";
  display: none;
  position: absolute;
  left: 22px;
  right: 20px;
  top: 92px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--page-accent), var(--page-secondary), color-mix(in srgb, var(--page-accent) 72%, #fff));
  opacity: 0.55;
  transform: rotate(-6deg);
  transform-origin: center;
  box-shadow: 0 0 24px color-mix(in srgb, var(--page-accent) 20%, transparent);
}

.case-value-node {
  position: absolute;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num title"
    "num type"
    "bar bar"
    "note note";
  column-gap: 10px;
  row-gap: 5px;
  width: 140px;
  padding: 14px 14px 13px;
  border-radius: 24px 28px 22px 32px;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.82), transparent 34%),
    rgba(255, 255, 255, 0.56);
  box-shadow:
    0 20px 46px rgba(31, 74, 122, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 0 0 1px rgba(255, 255, 255, 0.56);
  backdrop-filter: blur(18px) saturate(140%);
  z-index: 1;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transform: translateY(0);
  transition: z-index 0s linear, transform 240ms cubic-bezier(0.2, 0.88, 0.2, 1), box-shadow 240ms ease, background 240ms ease, opacity 200ms ease;
  animation: none;
}

.case-value-node::before {
  content: "";
  grid-area: bar;
  width: var(--score);
  height: 5px;
  margin-top: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--page-accent), var(--page-secondary));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--page-accent) 24%, transparent);
}

.case-value-node i {
  grid-area: num;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  color: #fff;
  font-style: normal;
  font-size: 15px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--page-accent), var(--page-secondary));
  box-shadow: 0 12px 24px var(--page-accent-glow);
}

.case-value-node b {
  grid-area: title;
  color: #21304a;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 900;
  white-space: nowrap;
}

.case-value-node em {
  grid-area: type;
  color: #68788d;
  font-style: normal;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.case-value-node small {
  grid-area: note;
  color: #7e8da2;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.case-value-node:hover,
.case-value-node:active,
.case-value-node.is-active {
  z-index: 12 !important;
  transform: translateY(-10px);
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.9), transparent 34%),
    color-mix(in srgb, var(--page-accent-soft) 42%, rgba(255, 255, 255, 0.66));
  box-shadow:
    0 26px 58px rgba(31, 74, 122, 0.18),
    0 0 34px color-mix(in srgb, var(--page-accent) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.case-outcome-board:hover {
  transform: none;
  box-shadow:
    0 40px 88px rgba(31, 74, 122, 0.15),
    0 20px 52px var(--page-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 0 0 1px rgba(255, 255, 255, 0.68);
}

.case-value-node.node-a {
  left: 0;
  top: 24px;
  z-index: 3;
}

.case-value-node.node-b {
  left: 158px;
  top: 104px;
  z-index: 2;
  animation-delay: -1.5s;
}

.case-value-node.node-c {
  right: 0;
  top: 34px;
  z-index: 4;
  animation-delay: -2.7s;
}

.support-flow-panel {
  top: 0;
  right: 14px;
  width: 516px;
  min-height: 392px;
  padding: 42px 44px;
  border-radius: 34px;
}

.support-rail {
  --support-rail-center: 5px;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  margin-top: 30px;
  padding-left: 22px;
}

.support-rail::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(var(--support-rail-center) - 2px);
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--page-accent), var(--page-secondary));
  opacity: 0.72;
}

.support-rail span {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
  transition: transform 240ms ease, background 240ms ease;
}

.support-rail span::before {
  content: "";
  position: absolute;
  left: -24px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--page-accent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--page-accent) 12%, transparent);
  z-index: 2;
}

.support-rail b {
  color: var(--page-accent-deep);
  font-size: 17px;
  font-weight: 900;
}

.support-rail em,
.support-rail i {
  font-style: normal;
  font-weight: 850;
}

.support-rail em {
  color: #41546d;
}

.support-rail i {
  color: #7b8a9d;
  font-size: 13px;
}

.about-lens {
  top: 44px;
  right: 28px;
  width: 484px;
  min-height: 348px;
  padding: 42px 44px;
  border-radius: 42px 86px 42px 86px;
}

.about-lens::before {
  content: "";
  position: absolute;
  right: -58px;
  top: 52px;
  width: 236px;
  height: 236px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 34%, transparent 35%),
    conic-gradient(from 28deg, color-mix(in srgb, var(--page-accent) 20%, transparent), color-mix(in srgb, var(--page-secondary) 16%, transparent), transparent 68%);
  opacity: 0.78;
}

.about-pillars {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.about-pillars span {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 118px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.8), transparent 34%),
    color-mix(in srgb, var(--page-accent) 10%, rgba(255, 255, 255, 0.48));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transition: transform 240ms ease, background 240ms ease;
}

.about-pillars b {
  color: var(--page-accent-deep);
  font-size: 18px;
  font-weight: 900;
}

.about-pillars em {
  color: #6f7f94;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

@keyframes sub-hero-slide-in {
  to {
    opacity: var(--visual-opacity);
    transform: translateX(0) scale(var(--visual-scale));
  }
}

@keyframes visual-scene-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes visual-chip-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-5px) scale(1.035);
  }
}

@keyframes case-node-drift {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -6px;
  }
}

@keyframes case-node-glow {
  0%,
  100% {
    filter: saturate(1) brightness(1);
  }

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

@keyframes case-orbit-breathe {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(5deg) scale(1.04);
  }
}

@keyframes platform-stream-flow {
  0%,
  100% {
    transform: translateX(-18%);
    opacity: 0.42;
  }

  50% {
    transform: translateX(18%);
    opacity: 0.78;
  }
}

@keyframes visual-card-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-7px) scale(1.025);
  }
}

@keyframes visual-card-hover-breathe {
  0%,
  100% {
    transform: translate3d(-6px, -8px, 34px);
  }

  50% {
    transform: translate3d(-9px, -13px, 48px);
  }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 28px;
  color: color-mix(in srgb, var(--page-accent-deep) 42%, #4f5d70);
  font-size: 20px;
  font-weight: 700;
}

.eyebrow::before {
  content: "";
  width: 76px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--page-accent), var(--page-secondary));
}

.hero-title {
  margin: 44px 0 0;
  font-size: clamp(40px, 3vw, 58px);
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: 0;
  text-wrap: balance;
}

.home-title {
  max-width: 760px;
  font-size: clamp(38px, 2.35vw, 48px);
  line-height: 1.36;
}

.title-line {
  display: block;
  max-width: 100%;
}

.title-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin: 0 20px 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--page-accent), var(--page-secondary));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--page-accent) 10%, transparent);
}

.title-points {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.title-points > span:not(.title-dot) {
  white-space: nowrap;
}

.hero-sub {
  width: min(700px, 100%);
  margin: 56px 0 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.72;
  text-wrap: pretty;
}

.sub-hero .hero-sub {
  margin-top: 64px;
  font-size: 20px;
}

.section-head h2,
.panel-title,
.footer-cta h2,
.manager-card h2 {
  text-wrap: balance;
}

.section-head p,
.panel-note,
.footer-cta p,
.content-card p,
.stack-item p,
.manager-card p,
.qr-info span,
.contact-list,
.channel-card {
  text-wrap: pretty;
}

.hero-buttons {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 48px;
}

.feature-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: min(1180px, 100%);
  margin-top: 60px;
}

.home-hero .feature-row {
  width: min(700px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 0;
}

.feature-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  min-height: 64px;
  padding-right: 32px;
}

.feature-item + .feature-item {
  padding-left: 36px;
  border-left: 1px solid color-mix(in srgb, var(--page-accent) 14%, #dce3ed);
}

.home-hero .feature-item {
  padding-right: 30px;
}

.home-hero .feature-item + .feature-item {
  padding-left: 0;
  border-left: 0;
}

.home-hero .feature-item:nth-child(even) {
  padding-left: 34px;
  border-left: 1px solid color-mix(in srgb, var(--page-accent) 14%, #dce3ed);
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: 0;
  border: 1px solid color-mix(in srgb, var(--page-accent) 18%, #d6e8f7);
  border-radius: 13px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--page-accent-soft) 78%, #ffffff), #ffffff);
  color: color-mix(in srgb, var(--page-accent-deep) 36%, #718095);
}

.feature-icon svg {
  display: block;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-title {
  margin: 0;
  color: #516174;
  font-size: 18px;
  font-weight: 700;
}

.feature-text {
  margin: 8px 0 0;
  color: #a0a9b7;
  font-size: 14px;
  font-weight: 500;
}

.glass-area {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  overflow: visible;
  pointer-events: none;
  perspective: 1600px;
  perspective-origin: 58% 42%;
  transform-style: preserve-3d;
  --glass-scale: 1;
}

.glass-panel {
  position: absolute;
  --glass-lift: 0px;
  --float-x: 0px;
  --float-y: 0px;
  --float-z: 0px;
  --hover-x: 0px;
  --hover-y: 0px;
  --hover-z: 0px;
  --hover-rx: 0deg;
  --hover-ry: 0deg;
  --hover-scale: 1;
  --space-z: -40px;
  --space-scale: 1;
  --space-rotate: 0deg;
  color: #223044;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 16% 6%, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.12) 34%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(ellipse at 88% 96%, rgba(80, 190, 255, 0.24), rgba(80, 190, 255, 0.04) 42%, rgba(255, 255, 255, 0) 66%),
    linear-gradient(132deg, rgba(255, 255, 255, 0.58), rgba(246, 252, 255, 0.28) 44%, rgba(255, 255, 255, 0.42));
  background-clip: padding-box;
  box-shadow:
    0 64px 130px rgba(16, 54, 96, 0.22),
    0 28px 56px rgba(20, 112, 186, 0.13),
    0 0 74px rgba(95, 196, 255, 0.2),
    inset 18px 22px 54px rgba(255, 255, 255, 0.26),
    inset -22px -34px 76px rgba(75, 178, 255, 0.13);
  -webkit-backdrop-filter: blur(42px) saturate(210%) brightness(1.14);
  backdrop-filter: blur(42px) saturate(210%) brightness(1.14);
  pointer-events: auto;
  will-change: transform;
  isolation: isolate;
  transform-style: preserve-3d;
  transform:
    translate3d(
      calc(var(--float-x) + var(--hover-x)),
      calc(var(--glass-lift) + var(--float-y) + var(--hover-y)),
      calc(var(--space-z) + var(--float-z) + var(--hover-z))
    )
    rotateX(var(--hover-rx))
    rotateY(calc(var(--space-rotate) + var(--hover-ry)))
    scale(var(--glass-scale))
    scale(var(--space-scale))
    scale(var(--hover-scale));
  transition: transform 300ms cubic-bezier(0.2, 0.9, 0.16, 1), border-color 220ms ease, background 220ms ease, box-shadow 220ms ease, backdrop-filter 220ms ease, opacity 220ms ease, filter 220ms ease;
}

.glass-panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.16) 26%, transparent 56%),
    radial-gradient(ellipse at 88% 104%, rgba(72, 183, 255, 0.2), transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 48%, rgba(255, 255, 255, 0.12));
  opacity: 0.8;
  pointer-events: none;
}

.glass-panel::after {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 28% 18%, rgba(255, 255, 255, 0.24), transparent 44%),
    radial-gradient(ellipse at 78% 86%, rgba(72, 181, 255, 0.18), transparent 48%);
  opacity: 0.62;
  filter: blur(12px);
  pointer-events: none;
  animation: glass-aura-breathe 6.4s ease-in-out infinite;
}

.glass-panel:hover,
.glass-panel.is-hovered {
  z-index: 50;
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(ellipse at 15% 6%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.14) 34%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(ellipse at 88% 96%, rgba(76, 190, 255, 0.3), rgba(76, 190, 255, 0.06) 44%, rgba(255, 255, 255, 0) 68%),
    linear-gradient(132deg, rgba(255, 255, 255, 0.66), rgba(242, 251, 255, 0.32) 44%, rgba(255, 255, 255, 0.48));
  box-shadow:
    0 82px 156px rgba(12, 48, 92, 0.3),
    0 36px 74px rgba(16, 115, 192, 0.17),
    0 0 112px rgba(76, 190, 255, 0.28),
    inset 22px 28px 68px rgba(255, 255, 255, 0.31),
    inset -28px -40px 92px rgba(65, 181, 255, 0.17);
  -webkit-backdrop-filter: blur(48px) saturate(235%) brightness(1.18);
  backdrop-filter: blur(48px) saturate(235%) brightness(1.18);
}

.glass-panel.is-hovered {
  animation: none;
}

.glass-panel.is-settling {
  --float-x: 0px;
  --float-y: 0px;
  --float-z: 0px;
  --hover-x: 0px;
  --hover-y: 0px;
  --hover-z: 0px;
  --hover-rx: 0deg;
  --hover-ry: 0deg;
  --hover-scale: 1;
  animation: none !important;
}

.glass-area:has(.glass-panel:hover) .glass-panel:not(:hover):not(.is-hovered),
.glass-area:has(.glass-panel.is-hovered) .glass-panel:not(.is-hovered) {
  opacity: 0.68;
  filter: saturate(0.76) contrast(0.94);
}

.operation-panel:hover,
.operation-panel:focus-visible,
.operation-panel.is-hovered {
  --hover-x: -10px;
  --hover-y: -18px;
  --hover-z: 280px;
  --hover-ry: 3.8deg;
  --hover-scale: 1;
}

.environment-panel:hover,
.environment-panel:focus-within,
.environment-panel.is-hovered {
  --hover-x: 10px;
  --hover-y: -18px;
  --hover-z: 190px;
  --hover-ry: -2.2deg;
  --hover-scale: 1;
}

.device-panel:hover,
.device-panel:focus-visible,
.device-panel.is-hovered {
  --hover-x: -8px;
  --hover-y: -18px;
  --hover-z: 270px;
  --hover-ry: -3.4deg;
  --hover-scale: 1;
}

.operation-panel {
  z-index: 4;
  --space-z: -122px;
  --space-scale: 0.935;
  --space-rotate: -3.8deg;
  right: 70px;
  top: 128px;
  width: 500px;
  min-height: 312px;
  padding: 32px 36px 26px;
  transform-origin: top right;
  animation: glass-float-right 6.4s ease-in-out infinite;
  cursor: pointer;
  opacity: 0.92;
  filter: saturate(0.94) contrast(0.98);
}

.glass-panel > * {
  position: relative;
  z-index: 2;
}

.operation-panel:focus-visible {
  outline: 3px solid rgba(84, 186, 255, 0.55);
  outline-offset: 6px;
}

.operation-panel.is-paused {
  animation-play-state: paused;
}

.operation-panel.is-paused .panel-sub {
  color: #0879df;
}

.environment-panel {
  z-index: 12;
  --space-z: 148px;
  --space-scale: 1.08;
  --space-rotate: 2.2deg;
  left: 32px;
  top: 278px;
  width: 282px;
  min-height: 312px;
  padding: 32px 30px 26px;
  transform-origin: top left;
  animation: glass-float-left 7.2s ease-in-out infinite;
  box-shadow:
    0 86px 158px rgba(12, 52, 98, 0.3),
    0 34px 62px rgba(20, 118, 190, 0.17),
    0 0 112px rgba(84, 186, 255, 0.24),
    inset 24px 30px 72px rgba(255, 255, 255, 0.34),
    inset -28px -42px 92px rgba(80, 184, 255, 0.18);
}

.environment-panel::after {
  animation-duration: 7.2s;
}

.device-panel {
  z-index: 3;
  --space-z: -180px;
  --space-scale: 0.905;
  --space-rotate: 3.4deg;
  right: 160px;
  top: 548px;
  width: 336px;
  min-height: 332px;
  padding: 30px 34px 32px;
  transform-origin: top right;
  animation: glass-float-device 7.8s ease-in-out infinite;
  opacity: 0.9;
  filter: saturate(0.92) contrast(0.98);
}

.device-panel::after {
  animation-duration: 7.8s;
}

@keyframes glass-float-right {
  0%,
  100% {
    --float-x: 0px;
    --float-y: 0px;
    --float-z: 0px;
  }

  42% {
    --float-x: 7px;
    --float-y: -15px;
    --float-z: 18px;
  }

  72% {
    --float-x: -5px;
    --float-y: 7px;
    --float-z: -8px;
  }
}

@keyframes glass-float-left {
  0%,
  100% {
    --float-x: 0px;
    --float-y: 0px;
    --float-z: 0px;
  }

  38% {
    --float-x: -8px;
    --float-y: -16px;
    --float-z: 22px;
  }

  76% {
    --float-x: 6px;
    --float-y: 8px;
    --float-z: -10px;
  }
}

@keyframes glass-float-device {
  0%,
  100% {
    --float-x: 0px;
    --float-y: 0px;
    --float-z: 0px;
  }

  45% {
    --float-x: 7px;
    --float-y: -17px;
    --float-z: 20px;
  }

  78% {
    --float-x: -6px;
    --float-y: 6px;
    --float-z: -8px;
  }
}

@keyframes glass-aura-breathe {
  0%,
  100% {
    opacity: 0.5;
    filter: blur(11px);
  }

  48% {
    opacity: 0.72;
    filter: blur(15px);
  }
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  font-size: 20px;
  font-weight: 700;
}

.panel-sub {
  color: #617086;
  font-size: 14px;
  font-weight: 700;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
  text-align: center;
}

.metric-label {
  color: #5c6d82;
  font-size: 14px;
  font-weight: 700;
}

.metric-value {
  margin-top: 12px;
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color 180ms ease;
}

.metric-value.green {
  color: #18b684;
}

.chart-line {
  position: relative;
  height: 110px;
  margin-top: 26px;
  border-top: 1px solid rgba(99, 120, 145, 0.32);
  cursor: pointer;
}

.chart-line::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(84, 186, 255, 0), rgba(31, 61, 92, 0.38), rgba(84, 186, 255, 0));
}

.chart-line svg {
  width: 100%;
  height: 82px;
  margin-top: 18px;
  overflow: visible;
}

.trend-path {
  fill: none;
  stroke: url("#trendStroke");
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: bevel;
  filter: drop-shadow(0 4px 9px var(--page-accent-glow));
  transition: none;
}

.trend-area {
  fill: url("#trendFill");
  opacity: 0.34;
}

.trend-dots circle {
  fill: #f7faff;
  stroke: color-mix(in srgb, var(--page-accent) 72%, #54baff);
  stroke-width: 2;
  filter: drop-shadow(0 2px 5px var(--page-accent-glow));
}

.chart-axis {
  display: flex;
  justify-content: space-between;
  color: #607287;
  font-size: 13px;
}

.env-list {
  margin: 24px 0 0;
  display: grid;
  gap: 8px;
}

.env-row {
  position: relative;
  width: 100%;
  border: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  min-height: 44px;
  padding: 0 8px 0 0;
  border-radius: 13px;
  color: #4f6177;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  overflow: visible;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.environment-panel .env-row:hover,
.environment-panel .env-row:focus-visible,
.environment-panel .env-row.is-row-active {
  z-index: 40;
}

.environment-panel:has(.env-row:focus-visible) {
  z-index: 30;
}

.env-row::before {
  content: none;
}

.env-row:hover,
.env-row:focus-visible,
.env-row.is-row-active {
  color: #26384e;
  background: color-mix(in srgb, var(--page-accent) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--page-accent) 18%, transparent);
  outline: none;
}

.env-title {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.env-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 9px;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 10px 22px var(--page-accent-glow), inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.env-mark-temp {
  background: linear-gradient(135deg, #168dff, #63c7ff);
}

.env-mark-humidity {
  background: linear-gradient(135deg, #11aeb1, #5be1d0);
}

.env-mark-air {
  background: linear-gradient(135deg, #11a874, #4bd899);
  font-size: 10px;
}

.env-mark-light {
  background: linear-gradient(135deg, #f2a225, #ffd36b);
}

.env-mark-curtain {
  background: linear-gradient(135deg, #5c7dff, #78b7ff);
}

.env-row:hover .env-mark,
.env-row:focus-visible .env-mark,
.env-row.is-row-active .env-mark {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--page-accent) 22%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.env-name {
  white-space: nowrap;
}

.env-row strong {
  color: #33465f;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.env-row .env-value-temp {
  color: #0879df;
}

.env-row .env-value-humidity {
  color: #0d999d;
}

.env-row .env-value-air {
  color: #119466;
}

.env-row .env-value-light {
  color: #c0790d;
}

.env-row .env-value-curtain {
  color: #426be2;
}

.env-detail {
  position: absolute;
  z-index: 999;
  top: 50%;
  left: calc(100% + 16px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: none;
  padding: 10px 12px;
  border: 0;
  border-radius: 16px;
  color: #243247;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.98), transparent 34%),
    radial-gradient(circle at 88% 100%, rgba(84, 186, 255, 0.22), transparent 40%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(229, 246, 255, 0.86));
  background-clip: padding-box;
  box-shadow:
    0 34px 72px rgba(28, 104, 168, 0.28),
    0 0 42px rgba(84, 186, 255, 0.16),
    inset 0 1px 1px rgba(255, 255, 255, 0.96),
    inset 0 -16px 34px rgba(126, 205, 255, 0.12),
    inset 0 0 0 1.5px rgba(135, 210, 255, 0.88),
    inset 0 0 0 2.5px rgba(255, 255, 255, 0.46);
  -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.1);
  backdrop-filter: blur(28px) saturate(190%) brightness(1.1);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(18px, -50%, 220px) scale(0.94);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: opacity 180ms ease, transform 180ms ease;
}

.env-detail::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(99, 190, 248, 0.34);
  pointer-events: none;
}

.env-row:hover .env-detail,
.env-row:focus-visible .env-detail,
.env-row.is-row-active .env-detail {
  opacity: 1;
  transform: translate3d(0, -50%, 220px) scale(1);
}

.scale-detail {
  min-width: 220px;
}

.scale-track {
  position: relative;
  display: block;
  width: 82px;
  min-width: 82px;
  height: 8px;
  margin: 0;
  border-radius: 999px;
  background: rgba(80, 112, 145, 0.2);
  overflow: hidden;
}

.scale-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #54baff, #18b684);
}

.env-row:hover .scale-track i,
.env-row:focus-visible .scale-track i,
.env-row.is-row-active .scale-track i {
  animation: scale-fill 560ms ease forwards;
}

.scale-labels {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  margin-top: 0;
  color: #526780;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.scale-labels em {
  font-style: normal;
}

.air-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding: 5px 10px;
  border-radius: 999px;
  color: #18a579;
  background: rgba(24, 182, 132, 0.12);
  font-size: 12px;
}

.air-pill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #18b684;
  animation: air-pulse 1.2s ease-in-out infinite;
}

.mode-detail {
  display: flex;
  gap: 7px;
  margin-top: 0;
}

.mode-chip {
  padding: 5px 9px;
  border-radius: 999px;
  color: #6b7d92;
  background: rgba(119, 143, 170, 0.14);
  font-size: 11px;
  font-weight: 800;
}

.mode-chip.active {
  color: #0879df;
  background: rgba(84, 186, 255, 0.18);
  box-shadow: 0 0 0 3px rgba(84, 186, 255, 0.08);
}

.curtain-track {
  position: relative;
  display: block;
  width: 118px;
  min-width: 118px;
  height: 8px;
  margin-top: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(84, 186, 255, 0.18), rgba(84, 186, 255, 0.42));
  overflow: hidden;
}

.curtain-track i {
  position: absolute;
  top: -4px;
  left: 55%;
  width: 42%;
  height: 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--page-accent) 68%, transparent);
  box-shadow: 0 0 14px var(--page-accent-glow);
}

.env-row:hover .curtain-track i,
.env-row:focus-visible .curtain-track i,
.env-row.is-row-active .curtain-track i {
  animation: curtain-slide 760ms ease-in-out infinite alternate;
}

@keyframes scale-fill {
  to {
    width: var(--scale-value);
  }
}

@keyframes air-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(24, 182, 132, 0.32);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(24, 182, 132, 0);
  }
}

@keyframes curtain-slide {
  to {
    transform: translateX(-22%);
  }
}

.device-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 22px;
}

.device-summary .panel-head {
  white-space: nowrap;
}

.device-total {
  color: #1f2d42;
  font-size: 36px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.device-body {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 26px;
  align-items: center;
  margin-top: 32px;
  cursor: pointer;
}

.donut {
  position: relative;
  width: 112px;
  height: 112px;
  --online-deg: 304.45deg;
  --service-deg: 33.12deg;
  --offline-deg: 15.47deg;
  --alert-deg: 6.96deg;
  --total-deg: 361deg;
  --closure-color: color-mix(in srgb, #ff5d80 36%, #54baff);
  --tail-color: #54baff;
  border-radius: 50%;
  box-shadow: 0 16px 32px rgba(49, 137, 214, 0.16);
  transform: scale(1);
  overflow: visible;
  transition: filter 220ms ease, box-shadow 220ms ease, transform 420ms cubic-bezier(0.18, 0.85, 0.25, 1);
}

.donut::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(84, 186, 255, 0.16);
}

.donut::after {
  content: "";
  position: absolute;
  inset: 34px;
  z-index: 3;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 38%, rgba(255, 255, 255, 0.92), rgba(241, 249, 255, 0.72) 58%, rgba(229, 244, 255, 0.62));
  box-shadow:
    inset 0 0 20px rgba(84, 186, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.62),
    0 0 18px rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(8px);
}

.donut-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2334);
  transform-origin: center;
  backface-visibility: hidden;
}

.donut-ring::before,
.donut-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 0 38.5%, rgba(0, 0, 0, 0.72) 40.4%, #000 43.4% 97.4%, rgba(0, 0, 0, 0.52) 98.9%, transparent 100%);
  mask: radial-gradient(circle, transparent 0 38.5%, rgba(0, 0, 0, 0.72) 40.4%, #000 43.4% 97.4%, rgba(0, 0, 0, 0.52) 98.9%, transparent 100%);
}

.donut-ring::before {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0) 54%),
    conic-gradient(from -90deg, rgba(84, 186, 255, 0.2), rgba(37, 199, 163, 0.12), rgba(255, 173, 105, 0.12), rgba(84, 186, 255, 0.2));
}

.donut-ring::after {
  background:
    conic-gradient(
      from -90deg,
      color-mix(in srgb, #ff5d80 24%, #54baff) 0deg 0.3deg,
      #54baff 0.62deg calc(var(--online-deg) - 0.45deg),
      color-mix(in srgb, #54baff 58%, #25c7a3) calc(var(--online-deg) - 0.12deg) calc(var(--online-deg) + 0.12deg),
      #25c7a3 calc(var(--online-deg) + 0.45deg) calc(var(--online-deg) + var(--service-deg) - 0.38deg),
      color-mix(in srgb, #25c7a3 54%, #ffad69) calc(var(--online-deg) + var(--service-deg) - 0.1deg) calc(var(--online-deg) + var(--service-deg) + 0.1deg),
      #ffad69 calc(var(--online-deg) + var(--service-deg) + 0.38deg) calc(var(--online-deg) + var(--service-deg) + var(--offline-deg) - 0.32deg),
      color-mix(in srgb, #ffad69 54%, #ff5d80) calc(var(--online-deg) + var(--service-deg) + var(--offline-deg) - 0.08deg) calc(var(--online-deg) + var(--service-deg) + var(--offline-deg) + 0.08deg),
      #ff5d80 calc(var(--online-deg) + var(--service-deg) + var(--offline-deg) + 0.32deg) calc(var(--total-deg) - 0.34deg),
      var(--closure-color) calc(var(--total-deg) - 0.08deg) var(--total-deg),
      var(--tail-color) var(--total-deg) 361deg
    );
  filter: saturate(1.08) blur(0.12px) drop-shadow(0 8px 14px rgba(54, 155, 232, 0.15));
  transform: translateZ(0);
}

.device-body.is-donut-playing .donut {
  transform: scale(1.028);
  filter: saturate(1.08);
  box-shadow: 0 18px 34px rgba(49, 137, 214, 0.2), 0 0 0 6px rgba(84, 186, 255, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.64);
}

.legend {
  display: grid;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #53657b;
}

.legend-row {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 12px;
  align-items: start;
}

.legend-row i {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 50%;
}

.legend-row strong {
  display: block;
  margin-top: 3px;
  color: #253044;
  font-size: 18px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.blue-dot {
  background: #54baff;
}

.green-dot {
  background: #25c7a3;
}

.orange-dot {
  background: #ffad69;
}

.red-dot {
  background: #ff5d80;
}

.main-panel {
  position: relative;
  z-index: 5;
  width: min(1540px, calc(100% - 120px));
  margin: -96px auto 64px;
  padding: 72px 80px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 42px;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--page-accent) 10%, transparent), transparent 34%),
    radial-gradient(circle at 6% 94%, color-mix(in srgb, var(--page-warm) 10%, transparent), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--page-card) 42%, #ffffff) 100%);
  box-shadow: var(--shadow);
}

.home-panel {
  margin-top: -118px;
  padding-top: 76px;
}

.section-head {
  text-align: center;
}

.section-head h2,
.panel-title {
  margin: 0;
  font-size: clamp(28px, 2.1vw, 42px);
  line-height: 1.28;
  font-weight: 700;
}

.section-head p,
.panel-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin-top: 60px;
}

.content-card {
  position: relative;
  overflow: hidden;
  --card-accent: var(--page-accent);
  --card-soft-bg: var(--page-accent-soft);
  --card-visual: url("assets/card-photo-platform.png");
  min-height: 142px;
  padding: 32px 34px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.5) 100%);
  box-shadow: 0 14px 36px rgba(31, 74, 122, 0.06);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.content-card::before,
.stack-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  background: var(--card-visual) center / cover no-repeat;
  filter: saturate(1.02) brightness(1.02);
  transform: scale(1.015);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.content-card::after,
.stack-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.86) 44%, rgba(255, 255, 255, 0.36) 100%),
    radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--card-accent) 14%, transparent), transparent 42%);
  transition: opacity 180ms ease;
}

.content-card > *,
.stack-item > * {
  position: relative;
  z-index: 1;
}

.content-card.soft {
  min-height: 210px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.52) 100%);
}

.home-panel .content-card:not(.soft) {
  border-color: rgba(255, 255, 255, 0.68);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.5) 100%);
}

.card-marker {
  width: 18px;
  height: 18px;
  margin-bottom: 20px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--card-accent, var(--page-accent)), color-mix(in srgb, var(--card-accent, var(--page-accent)) 68%, var(--page-warm)));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--card-accent, var(--page-accent)) 18%, transparent);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.content-card h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
}

.content-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

.content-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 22px 50px rgba(31, 74, 122, 0.13);
}

.content-card:hover::before,
.stack-item:hover::before {
  opacity: 0.54;
  transform: scale(1);
}

.content-card:hover::after,
.stack-item:hover::after {
  opacity: 0.78;
}

.content-card:hover .card-marker {
  transform: scale(1.18);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--card-accent) 14%, transparent);
}

.content-card:hover h3 {
  color: color-mix(in srgb, var(--card-accent) 82%, #12304a);
}

.content-card:hover .tag {
  color: var(--white);
  background: var(--card-accent, var(--page-accent));
}

[data-bg*="客房"],
[data-bg*="体验"],
[data-bg*="空间"] {
  --card-accent: #1c95ff;
  --card-soft-bg: #eef8ff;
  --card-visual: url("assets/card-photo-room.png");
}

[data-bg*="酒店"],
[data-bg*="场景"] {
  --card-accent: #1c95ff;
  --card-soft-bg: #eef8ff;
  --card-visual: url("assets/card-photo-room.png");
}

[data-bg*="能源"],
[data-bg*="能耗"],
[data-bg*="降耗"],
[data-bg*="降本"] {
  --card-accent: #18b684;
  --card-soft-bg: #effbf6;
  --card-visual: url("assets/card-photo-energy.png");
}

[data-bg*="运营"],
[data-bg*="工单"],
[data-bg*="服务"],
[data-bg*="响应"] {
  --card-accent: #6757ff;
  --card-soft-bg: #f4f2ff;
  --card-visual: url("assets/card-photo-operations.png");
}

[data-bg*="交付"] {
  --card-accent: #0879df;
  --card-soft-bg: #eef6ff;
  --card-visual: url("assets/card-photo-delivery.png");
}

[data-bg*="方案"],
[data-bg*="系统"],
[data-bg*="平台"] {
  --card-accent: #0879df;
  --card-soft-bg: #eef6ff;
  --card-visual: url("assets/card-photo-platform.png");
}

[data-bg*="新建"],
[data-bg*="改造"],
[data-bg*="样板"],
[data-bg*="诊断"] {
  --card-accent: #13a8a8;
  --card-soft-bg: #effbfb;
  --card-visual: url("assets/card-photo-building.png");
}

[data-bg*="连锁"],
[data-bg*="集团"],
[data-bg*="规模"],
[data-bg*="多门店"] {
  --card-accent: #2f6fe4;
  --card-soft-bg: #f0f5ff;
  --card-visual: url("assets/card-photo-group.png");
}

[data-bg*="抖音"] {
  --card-accent: #111827;
  --card-soft-bg: #f5f7fb;
  --card-visual: url("assets/card-photo-social.png");
  --platform-logo: url("assets/social-logo-douyin.svg");
}

[data-bg*="视频号"],
[data-bg*="公众号"] {
  --card-accent: #16b47a;
  --card-soft-bg: #effbf6;
  --card-visual: url("assets/card-photo-social.png");
}

[data-bg*="视频号"] {
  --card-accent: #ff8a18;
  --card-soft-bg: #fff7ec;
  --platform-logo: url("assets/social-logo-wechat-channels.svg");
}

[data-bg*="公众号"] {
  --platform-logo: url("assets/social-logo-wechat.svg");
}

[data-bg="存量改造"] {
  --card-visual: url("assets/card-photo-renovation.png");
}

[data-bg="连锁门店"] {
  --card-visual: url("assets/card-photo-chain.png");
}

[data-bg="需求诊断"] {
  --card-visual: url("assets/card-photo-diagnosis.png");
}

[data-bg="方案设计"] {
  --card-visual: url("assets/card-photo-design.png");
}

[data-bg="样板验证"] {
  --card-visual: url("assets/card-photo-sample.png");
}

[data-bg="交付运维"],
[data-bg="全案交付"],
[data-bg="方案交付"] {
  --card-visual: url("assets/card-photo-delivery.png");
}

[data-bg="AI客房体验"],
[data-bg="AI客房"],
[data-bg="体验优先"],
[data-bg="体验升级"],
[data-bg="酒店场景"],
[data-bg="空间状态"] {
  --card-accent: #1c95ff;
  --card-soft-bg: #eef8ff;
  --card-visual: url("assets/card-photo-room.png");
}

[data-bg="智慧能源"],
[data-bg="能耗策略"],
[data-bg="降本增效"] {
  --card-accent: #18b684;
  --card-soft-bg: #effbf6;
  --card-visual: url("assets/card-photo-energy.png");
}

[data-bg="运营服务"],
[data-bg="运营导向"],
[data-bg="运营价值"],
[data-bg="工单响应"] {
  --card-accent: #6757ff;
  --card-soft-bg: #f4f2ff;
  --card-visual: url("assets/card-photo-operations.png");
}

[data-bg="长期可用"],
[data-bg="系统能力"],
[data-bg="设备健康"],
[data-bg="平台运行"] {
  --card-accent: #0879df;
  --card-soft-bg: #eef6ff;
  --card-visual: url("assets/card-photo-platform.png");
}

[data-bg="新建酒店"] {
  --card-accent: #13a8a8;
  --card-soft-bg: #effbfb;
  --card-visual: url("assets/card-photo-building.png");
}

[data-bg="集团酒店"],
[data-bg="规模复制"] {
  --card-accent: #2f6fe4;
  --card-soft-bg: #f0f5ff;
  --card-visual: url("assets/card-photo-group.png");
}

.two-column-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
  gap: 80px;
  align-items: center;
}

.stack-list {
  display: grid;
  gap: 22px;
  margin-top: 56px;
}

.stack-item {
  position: relative;
  overflow: hidden;
  --card-accent: var(--page-accent);
  --card-soft-bg: var(--page-accent-soft);
  --card-visual: url("assets/card-photo-platform.png");
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 22px;
  align-items: start;
  padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.52) 100%);
  box-shadow: 0 12px 32px rgba(31, 74, 122, 0.06);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.stack-item:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 18px 42px rgba(31, 74, 122, 0.12);
}

.stack-item:hover h3 {
  color: color-mix(in srgb, var(--card-accent) 82%, #12304a);
}

.stack-item .card-marker {
  margin: 6px 0 0;
}

.stack-item h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.35;
}

.stack-item p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.dashboard-card {
  position: relative;
  overflow: hidden;
  --card-accent: var(--page-accent-deep);
  --card-soft-bg: var(--page-accent-soft);
  --card-visual: url("assets/card-photo-platform.png");
  padding: 44px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.82) 0%, rgba(238, 249, 255, 0.5) 100%);
  box-shadow: 0 24px 60px rgba(31, 74, 122, 0.11);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.dashboard-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--card-visual) center / cover no-repeat;
  filter: saturate(1.02) brightness(1.02);
  opacity: 0;
  transform: scale(1.015);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.dashboard-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.78) 52%, rgba(255, 255, 255, 0.38) 100%),
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--page-secondary) 15%, transparent), transparent 40%),
    radial-gradient(circle at 14% 86%, color-mix(in srgb, var(--page-accent) 12%, transparent), transparent 44%);
  transition: opacity 180ms ease;
}

.dashboard-card > * {
  position: relative;
  z-index: 1;
}

.dashboard-card:hover {
  border-color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 22px 50px rgba(31, 74, 122, 0.12);
}

.dashboard-card:hover::before {
  opacity: 0.28;
  transform: scale(1);
}

.dashboard-card:hover::after {
  opacity: 0.92;
}

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

.mini-stat {
  position: relative;
  overflow: hidden;
  --card-accent: var(--page-accent);
  --card-soft-bg: var(--page-accent-soft);
  --card-visual: url("assets/card-photo-platform.png");
  min-height: 128px;
  padding: 24px 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86) 0%, rgba(244, 251, 255, 0.64) 100%),
    radial-gradient(circle at 16% 20%, color-mix(in srgb, var(--card-accent) 14%, transparent), transparent 34%);
  box-shadow: 0 14px 34px rgba(31, 74, 122, 0.08);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.mini-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 34px rgba(31, 74, 122, 0.12);
}

.mini-stat::before,
.stat-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--card-visual) center / cover no-repeat;
  opacity: 0;
  filter: saturate(1.02) brightness(1.04);
  transform: scale(1.015);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.dashboard-card .mini-stat::before {
  opacity: 0;
}

.mini-stat::after,
.stat-box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.84) 52%, rgba(255, 255, 255, 0.42) 100%),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--card-accent) 12%, transparent), transparent 42%);
  pointer-events: none;
  transition: opacity 180ms ease;
}

.dashboard-card .mini-stat::after {
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--card-accent) 20%, transparent), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  opacity: 0.9;
}

.mini-stat > *,
.stat-box > * {
  position: relative;
  z-index: 1;
}

.mini-stat:hover::before,
.stat-box:hover::before {
  opacity: 0.46;
  transform: scale(1);
}

.mini-stat:hover::after,
.stat-box:hover::after {
  opacity: 0.8;
}

.mini-stat span {
  display: block;
  color: #728198;
  font-size: 14px;
  font-weight: 700;
}

.mini-stat strong {
  display: block;
  margin-top: 12px;
  color: var(--page-accent-deep);
  font-size: 25px;
  line-height: 1;
}

.mini-stat em {
  display: block;
  margin-top: 16px;
  color: #7f8da0;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.55;
}

.dashboard-chart {
  position: relative;
  overflow: hidden;
  margin-top: 30px;
  padding: 22px 26px 24px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(236, 248, 255, 0.34)),
    radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--page-accent) 10%, transparent), transparent 32%),
    radial-gradient(circle at 82% 30%, color-mix(in srgb, var(--page-secondary) 11%, transparent), transparent 36%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 14px 34px rgba(31, 74, 122, 0.07);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
}

.dashboard-chart::before {
  content: "";
  position: absolute;
  inset: 54px 28px 42px;
  background:
    linear-gradient(90deg, rgba(28, 149, 255, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(28, 149, 255, 0.07) 1px, transparent 1px);
  background-size: 25% 100%, 100% 44px;
  opacity: 0.28;
  pointer-events: none;
}

.flow-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #708196;
  font-size: 13px;
  font-weight: 800;
}

.flow-head strong {
  color: var(--page-accent-deep);
  font-size: 18px;
  line-height: 1;
}

.flow-track {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
  padding: 30px 6px 0;
  text-align: center;
}

.flow-track::before {
  content: "";
  position: absolute;
  top: 40px;
  right: 48px;
  left: 48px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(28, 149, 255, 0.12), rgba(24, 182, 132, 0.28), rgba(28, 149, 255, 0.14));
}

.flow-beam {
  position: absolute;
  top: 34px;
  left: 46px;
  width: 24%;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(28, 149, 255, 0), rgba(28, 149, 255, 0.36), rgba(24, 182, 132, 0.28), rgba(28, 149, 255, 0));
  filter: blur(3px);
  opacity: 0.78;
  animation: platform-flow-beam 5.2s ease-in-out infinite;
  pointer-events: none;
}

.flow-step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  color: #5f7188;
  transition: transform 180ms ease;
}

.flow-step:hover {
  transform: translateY(-3px);
}

.flow-step i {
  display: block;
  width: 22px;
  height: 22px;
  border: 5px solid rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  background: var(--page-accent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--page-accent) 22%, transparent);
}

.flow-step:nth-child(3) i {
  background: var(--page-secondary);
}

.flow-step:nth-child(4) i {
  background: #39a2ff;
}

.flow-step:nth-child(5) i {
  background: #1e7ddd;
}

.flow-step b,
.flow-step em {
  display: block;
  white-space: nowrap;
}

.flow-step b {
  color: #223044;
  font-size: 15px;
  line-height: 1.15;
}

.flow-step em {
  color: #7d8da1;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
}

@keyframes platform-flow-beam {
  0%,
  12% {
    transform: translateX(0);
    opacity: 0.1;
  }

  34% {
    opacity: 0.78;
  }

  78% {
    transform: translateX(260%);
    opacity: 0.78;
  }

  100% {
    transform: translateX(260%);
    opacity: 0.12;
  }
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin-top: 60px;
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-width: 90px;
  padding: 0 20px;
  color: var(--page-accent-deep);
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--page-accent) 15%, #ffffff), color-mix(in srgb, var(--page-secondary) 10%, #ffffff));
  font-size: 14px;
  font-weight: 700;
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin-top: 60px;
}

.step-number {
  color: color-mix(in srgb, var(--page-accent) 44%, #d8e9fb);
  font-size: 44px;
  font-weight: 700;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

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

.stat-box {
  position: relative;
  overflow: hidden;
  --card-accent: var(--page-accent);
  --card-soft-bg: var(--page-accent-soft);
  --card-visual: url("assets/card-photo-platform.png");
  min-height: 132px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 14px;
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--page-secondary) 10%, transparent), transparent 40%),
    linear-gradient(145deg, color-mix(in srgb, var(--page-card) 76%, #ffffff) 0%, #ffffff 100%);
  box-shadow: 0 12px 30px rgba(31, 74, 122, 0.06);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.stat-box:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.82);
  background: var(--card-soft-bg);
  box-shadow: 0 16px 34px rgba(31, 74, 122, 0.1);
}

.stat-box span {
  color: var(--muted);
  font-size: 15px;
}

.stat-box strong {
  display: block;
  margin-top: 16px;
  color: var(--page-accent-deep);
  font-size: 30px;
}

.value-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.footer-cta {
  width: min(1480px, calc(100% - 120px));
  margin: 0 auto 72px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 34px 72px;
  border: 1px solid color-mix(in srgb, var(--page-accent) 18%, #cce4fb);
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--page-warm) 16%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--page-accent-soft) 76%, #ffffff) 0%, #ffffff 100%);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.footer-cta:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--page-accent) 50%, #ffffff);
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--page-warm) 22%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--page-accent-soft) 88%, #ffffff) 0%, #ffffff 100%);
  box-shadow: 0 18px 42px var(--page-accent-glow);
}

.footer-cta h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.25;
}

.footer-cta p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 16px;
}

.seo-keywords {
  width: min(1480px, calc(100% - 120px));
  margin: -22px auto 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 2px 4px;
  color: #708096;
}

.seo-keywords span {
  margin-right: 2px;
  color: #64758b;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.seo-keywords a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 15px;
  border: 1px solid color-mix(in srgb, var(--page-accent) 14%, #d6e8f8);
  border-radius: 999px;
  color: color-mix(in srgb, var(--page-accent-deep) 72%, #314257);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), color-mix(in srgb, var(--page-accent-soft) 48%, #ffffff));
  font-size: 14px;
  font-weight: 760;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.seo-keywords a:hover,
.seo-keywords a:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--page-accent) 42%, #ffffff);
  color: #ffffff;
  background: linear-gradient(135deg, var(--page-accent), var(--page-accent-deep));
  box-shadow: 0 12px 26px var(--page-accent-glow);
}

.contact-page {
  min-height: calc(100svh - 86px);
  background:
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--page-accent) 12%, transparent), transparent 34%),
    radial-gradient(circle at 12% 86%, color-mix(in srgb, var(--page-secondary) 9%, transparent), transparent 36%),
    var(--page-background);
}

.contact-screen {
  scroll-margin-top: 102px;
  width: min(1540px, calc(100% - 96px));
  min-height: calc(100svh - 86px);
  margin: 0 auto;
  padding: 26px 0 30px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 20px;
}

.contact-intro {
  display: block;
}

.contact-intro .eyebrow {
  font-size: 16px;
}

.contact-intro .eyebrow::before {
  width: 58px;
  height: 3px;
}

.contact-intro h1 {
  max-width: none;
  margin: 20px 0 0;
  font-size: clamp(34px, 2.45vw, 48px);
  line-height: 1.22;
  white-space: nowrap;
  text-wrap: balance;
}

.contact-intro p {
  max-width: 980px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, 0.6fr);
  gap: 26px;
  align-items: start;
}

.contact-form-card,
.manager-card {
  border: 1px solid color-mix(in srgb, var(--page-accent) 16%, var(--line));
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--page-accent) 10%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--page-card) 54%, #ffffff) 0%, #ffffff 100%);
}

.contact-form-card {
  padding: 28px 30px;
  align-self: start;
}

.contact-head {
  text-align: left;
}

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

.lead-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #425166;
  font-size: 14px;
  font-weight: 700;
}

.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--page-accent) 15%, #d4deea);
  border-radius: 12px;
  background: color-mix(in srgb, var(--page-accent-soft) 34%, #ffffff);
  color: var(--ink);
  font: inherit;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.lead-form input,
.lead-form select {
  height: 44px;
  padding: 0 14px;
}

.lead-form textarea {
  resize: vertical;
  min-height: 92px;
  max-height: 132px;
  padding: 12px 14px;
  line-height: 1.55;
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  border-color: color-mix(in srgb, var(--page-accent) 78%, #ffffff);
  background: var(--white);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--page-accent) 12%, transparent);
}

.form-wide,
.demand-tags,
.form-actions,
.form-status {
  grid-column: 1 / -1;
}

.demand-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.demand-tags label {
  display: inline-flex;
  min-width: auto;
  cursor: pointer;
}

.demand-tags input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.demand-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--page-accent) 20%, #cce4fb);
  border-radius: 999px;
  color: color-mix(in srgb, var(--page-accent-deep) 78%, #2f3a4b);
  background: color-mix(in srgb, var(--page-accent-soft) 72%, #ffffff);
  font-size: 13px;
  font-weight: 700;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.demand-tags input:checked + span {
  color: var(--white);
  border-color: var(--page-accent);
  background: linear-gradient(135deg, var(--page-accent), var(--page-accent-deep));
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--page-accent) 13%, transparent);
}

.form-submit {
  --arrow-size: 42px;
  --arrow-line: 18px;
  --arrow-stroke: 2.8px;
  --arrow-head: 10px;
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  min-width: 238px;
  height: 64px;
  gap: 22px;
  padding: 0 36px;
  font-size: 18px;
  font-weight: 850;
}

.form-submit .arrow {
  width: var(--arrow-size);
  flex-basis: var(--arrow-size);
}

.form-status {
  min-height: 24px;
  margin: 0;
  color: #18a879;
  font-size: 15px;
  font-weight: 700;
}

.manager-card {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 28px;
  background:
    radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--page-warm) 13%, transparent), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--page-card) 62%, #ffffff) 100%);
}

.manager-card h2 {
  margin: 16px 0 0;
  font-size: 28px;
  line-height: 1.25;
}

.manager-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.qr-frame {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(152px, 0.72fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border: 0;
  border-radius: 26px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.98), transparent 38%),
    radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--page-warm) 18%, transparent), transparent 34%),
    radial-gradient(circle at 80% 74%, color-mix(in srgb, var(--page-accent) 14%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--page-card) 76%, #ffffff));
  box-shadow:
    0 22px 44px rgba(31, 74, 122, 0.08),
    inset 0 0 0 1px color-mix(in srgb, var(--page-accent) 20%, #d5ebff),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
  isolation: isolate;
}

.qr-frame::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.72), transparent 28%),
    radial-gradient(circle at 76% 36%, color-mix(in srgb, var(--page-accent-soft) 58%, transparent), transparent 45%);
  opacity: 0.74;
  pointer-events: none;
  z-index: 0;
}

.qr-frame:hover {
  transform: translateY(-4px);
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 255, 255, 1), transparent 38%),
    radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--page-warm) 24%, transparent), transparent 34%),
    radial-gradient(circle at 80% 74%, color-mix(in srgb, var(--page-accent) 20%, transparent), transparent 42%),
    linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--page-accent-soft) 82%, #ffffff));
  box-shadow:
    0 24px 52px color-mix(in srgb, var(--page-accent-glow) 78%, rgba(31, 74, 122, 0.1)),
    inset 0 0 0 1px color-mix(in srgb, var(--page-accent) 34%, #ffffff),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.qr-visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(172px, 100%);
  aspect-ratio: 1;
  padding: 14px;
  justify-self: center;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 255, 0.9)),
    color-mix(in srgb, var(--page-accent-soft) 28%, #ffffff);
  box-shadow:
    0 22px 34px rgba(42, 112, 168, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.86),
    inset 0 0 0 2px color-mix(in srgb, var(--page-accent) 12%, transparent);
}

.qr-visual::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 19px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), transparent 28%),
    radial-gradient(circle at 22% 16%, color-mix(in srgb, var(--page-accent) 12%, transparent), transparent 36%);
  pointer-events: none;
}

.qr-visual::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.82), transparent 26%),
    linear-gradient(145deg, color-mix(in srgb, var(--page-accent) 72%, #26c2a5), #23c2a4);
  opacity: 0.16;
  filter: blur(0.2px);
  pointer-events: none;
}

.qr-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  justify-self: center;
  filter: drop-shadow(0 12px 22px rgba(23, 126, 190, 0.12));
}

.qr-info {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  align-content: center;
  min-width: 0;
}

.qr-info strong {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.2;
  white-space: nowrap;
}

.qr-info strong::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--page-accent), var(--page-teal));
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--page-accent-soft) 72%, transparent);
}

.qr-info span {
  color: #687890;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 700;
}

.qr-points {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
  min-width: 0;
}

.qr-points em {
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding: 0 10px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--page-accent-deep) 82%, #233044);
  background: color-mix(in srgb, var(--page-accent-soft) 72%, #ffffff);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

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

.contact-list div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--page-accent) 13%, #dce8f4);
  border-radius: 12px;
  background: color-mix(in srgb, var(--page-card) 36%, rgba(255, 255, 255, 0.78));
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.contact-list div:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--page-accent) 56%, #ffffff);
  background: color-mix(in srgb, var(--page-accent-soft) 80%, #ffffff);
  box-shadow: 0 12px 26px var(--page-accent-glow);
}

.contact-list span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.contact-list strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

.channel-matrix {
  display: grid;
  gap: 9px;
}

.channel-card {
  position: relative;
  overflow: hidden;
  --card-accent: var(--page-accent);
  --card-soft-bg: var(--page-accent-soft);
  --card-visual: url("assets/card-photo-social.png");
  --platform-logo-width: 128px;
  --platform-logo-height: 128px;
  --platform-logo-right: 8px;
  min-height: 76px;
  padding: 13px 132px 13px 14px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 16%, #dce8f4);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.82) 62%, rgba(255, 255, 255, 0.58) 100%),
    radial-gradient(circle at 88% 50%, color-mix(in srgb, var(--card-accent) 15%, transparent) 0%, transparent 58%);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.channel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.36) 70%, rgba(255, 255, 255, 0.76) 100%),
    radial-gradient(circle at 88% 50%, color-mix(in srgb, var(--card-accent) 16%, transparent) 0%, transparent 62%);
  opacity: 0.9;
}

.channel-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--platform-logo-right);
  width: var(--platform-logo-width);
  height: var(--platform-logo-height);
  transform: translateY(-50%);
  opacity: 0.13;
  pointer-events: none;
  background: var(--platform-logo) center / contain no-repeat;
  filter: saturate(1.05) blur(0.15px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 48%, rgba(0, 0, 0, 0.58) 64%, transparent 82%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 48%, rgba(0, 0, 0, 0.58) 64%, transparent 82%);
}

.channel-card > * {
  position: relative;
  z-index: 1;
}

.channel-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--card-accent) 56%, #ffffff);
  background: var(--card-soft-bg);
  box-shadow: 0 12px 26px rgba(31, 74, 122, 0.08);
}

.channel-card:hover::after {
  opacity: 0.2;
}

.channel-card span {
  display: block;
  color: color-mix(in srgb, var(--card-accent) 88%, #0f2c42);
  font-size: 11px;
  font-weight: 800;
}

.channel-card strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 16px;
}

.channel-card em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

[data-bg="视频号"]::after {
  --platform-logo-width: 166px;
  --platform-logo-height: 122px;
  --platform-logo-right: -4px;
  opacity: 0.22;
}

[data-bg="公众号"]::after {
  --platform-logo-width: 150px;
  --platform-logo-height: 125px;
  --platform-logo-right: -2px;
  opacity: 0.16;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  padding: 44px 20px 52px;
  color: #8d98a8;
  text-align: center;
  font-size: 14px;
}

.footer a {
  color: #7d8998;
  text-decoration: none;
  transition: color 160ms ease;
}

.footer a:hover,
.footer a:focus-visible {
  color: var(--page-accent-deep);
}

@media (max-width: 1880px) {
  .home-hero {
    min-height: 1040px;
  }

  .home-hero .hero-copy {
    width: min(800px, 100%);
  }

  .home-title {
    font-size: clamp(38px, 4vw, 52px);
  }

  .hero-sub {
    width: min(760px, 100%);
    margin-top: 42px;
    font-size: 20px;
  }

  .feature-row {
    width: min(760px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 0;
    margin-top: 48px;
  }

  .feature-item {
    min-width: 0;
    padding-right: 28px;
  }

  .feature-item + .feature-item {
    padding-left: 0;
    border-left: 0;
  }

  .feature-item:nth-child(even) {
    padding-left: 34px;
    border-left: 1px solid #dce3ed;
  }

  .glass-area {
    display: block;
    left: 51%;
    --glass-scale: 0.9;
  }

  .operation-panel {
    right: 44px;
    top: 134px;
  }

  .environment-panel {
    left: 28px;
    top: 300px;
  }

  .device-panel {
    right: 116px;
    top: 590px;
  }

  .home-panel {
    margin-top: -72px;
  }
}

@media (max-width: 1680px) {
  .sub-hero-visual {
    right: -10px;
    --visual-scale: 0.92;
  }

  .glass-area {
    left: 53%;
    --glass-scale: 0.8;
  }

  .operation-panel {
    right: 34px;
    top: 150px;
  }

  .environment-panel {
    top: 334px;
  }

  .device-panel {
    right: 76px;
    top: 586px;
  }
}

@media (max-width: 1500px) {
  .sub-hero-visual {
    right: -24px;
    --visual-scale: 0.82;
  }

  .glass-area {
    left: 55%;
    --glass-scale: 0.7;
  }

  .operation-panel {
    right: 24px;
    top: 162px;
  }

  .environment-panel {
    left: 24px;
    top: 364px;
  }

  .device-panel {
    right: 36px;
    top: 560px;
  }
}

@media (max-width: 1380px) {
  .sub-hero-visual {
    right: -46px;
    --visual-scale: 0.72;
    --visual-opacity: 0.82;
  }

  .glass-area {
    left: 58%;
    --glass-scale: 0.66;
  }

  .environment-panel {
    left: 18px;
    top: 386px;
  }

  .operation-panel {
    right: 22px;
    top: 170px;
  }

  .device-panel {
    right: 42px;
    top: 486px;
  }
}

@media (min-width: 1281px) and (max-height: 860px) {
  .contact-screen {
    padding: 18px 0 20px;
    gap: 14px;
  }

  .contact-intro .eyebrow {
    font-size: 15px;
  }

  .contact-intro h1 {
    margin-top: 12px;
    font-size: clamp(32px, 2.2vw, 40px);
  }

  .contact-intro p {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.5;
  }

  .contact-form-card,
  .manager-card {
    padding: 22px;
  }

  .lead-form {
    gap: 10px 14px;
    margin-top: 14px;
  }

  .lead-form label {
    gap: 5px;
    font-size: 13px;
  }

  .lead-form input,
  .lead-form select {
    height: 38px;
  }

  .lead-form textarea {
    min-height: 56px;
  }

  .demand-tags span {
    height: 27px;
  }

  .manager-card {
    gap: 11px;
  }

  .manager-card h2 {
    margin-top: 12px;
    font-size: 24px;
  }

  .manager-card p {
    margin-top: 8px;
    font-size: 14px;
  }

  .qr-frame {
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 14px;
    padding: 12px 14px;
  }

  .qr-visual {
    width: 146px;
    padding: 10px;
    border-radius: 20px;
  }

  .qr-info {
    gap: 6px;
  }

  .qr-info strong {
    font-size: 19px;
  }

  .qr-info span {
    font-size: 13px;
    line-height: 1.45;
  }

  .qr-points em {
    height: 24px;
    padding: 0 8px;
    font-size: 11px;
  }

  .contact-list div {
    min-height: 36px;
    padding: 7px 10px;
  }

  .channel-card {
    min-height: 58px;
    padding: 9px 12px;
  }

  .channel-card strong {
    margin-top: 4px;
    font-size: 15px;
  }
}

@media (max-width: 1280px) {
  .nav-shell {
    width: min(100% - 48px, 1200px);
  }

  .seo-keywords {
    width: calc(100% - 64px);
  }

  .sub-hero-visual {
    display: none;
  }

  .glass-area {
    display: block;
    left: 64%;
    --glass-scale: 0.56;
  }

  .operation-panel {
    right: 18px;
    top: 184px;
  }

  .device-panel {
    display: none;
  }

  .nav-links {
    gap: 34px;
  }

  .hero-inner,
  .main-panel,
  .footer-cta {
    width: calc(100% - 64px);
  }

  body:not(.page-home) .hero-inner,
  body:not(.page-home) .main-panel,
  body:not(.page-home) .footer-cta,
  .page-contact .contact-screen {
    width: calc(100% - 48px);
  }

  .hero-copy,
  .sub-hero .hero-copy {
    width: min(760px, 100%);
  }

  .main-panel {
    padding: 60px 56px;
  }

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

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

  .two-column-panel,
  .about-grid {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .contact-screen {
    width: calc(100% - 64px);
    min-height: auto;
  }

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

  .manager-card {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }

  .manager-card > div:first-child,
  .qr-frame {
    grid-column: 1 / -1;
  }

  .contact-list,
  .channel-matrix {
    min-width: 0;
  }
}

@media (max-width: 1120px) {
  .nav-shell {
    gap: 24px;
  }

  .brand {
    width: 220px;
    flex-basis: 220px;
  }

  .brand img {
    width: 220px;
    min-width: 220px;
  }

  .nav-links {
    gap: 22px;
    font-size: 15px;
  }

  .nav-actions {
    gap: 20px;
  }

  .contact-pill {
    width: 156px;
  }
}

@media (max-width: 1180px) {
  .glass-area {
    display: none;
  }
}

@media (max-width: 980px) {
  .site-header {
    height: auto;
  }

  .nav-shell {
    height: auto;
    min-height: 72px;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 8px 0 12px;
  }

  .brand,
  .brand img {
    width: 174px;
  }

  .brand {
    flex-basis: 174px;
  }

  .brand img {
    min-width: 174px;
  }

  .nav-links {
    order: 3;
    width: 100%;
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 0;
    font-size: 13px;
  }

  .nav-links a {
    min-width: 0;
    min-height: 34px;
    padding: 0 6px;
    border: 1px solid color-mix(in srgb, var(--page-accent) 14%, #dbe9f6);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }

  .nav-links a.active::after {
    display: none;
  }

  .nav-links a.active {
    background: linear-gradient(135deg, var(--page-accent-soft), rgba(255, 255, 255, 0.86));
    border-color: color-mix(in srgb, var(--page-accent) 34%, #cfe6fa);
    color: var(--page-accent-deep);
    box-shadow:
      0 8px 20px color-mix(in srgb, var(--page-accent) 10%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.88);
  }

  .contact-pill {
    display: none;
  }

  .nav-popover {
    top: 90px;
    right: 20px;
    left: 20px;
    width: auto;
    border-color: color-mix(in srgb, var(--page-accent) 18%, #dceaf7);
    box-shadow: 0 18px 48px rgba(31, 74, 122, 0.18);
  }

  .hero,
  .home-hero {
    min-height: auto;
  }

  .hero::before {
    width: 100%;
    height: 300px;
    top: auto;
    bottom: 0;
    opacity: 0.55;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero::after {
    background: linear-gradient(180deg, rgba(247, 250, 255, 1) 0%, rgba(247, 250, 255, 1) 62%, rgba(247, 250, 255, 0.74) 100%);
  }

  .hero-inner {
    width: calc(100% - 40px);
    padding: 52px 0 200px;
  }

  .home-hero .hero-inner {
    padding-top: 52px;
  }

  .hero-copy {
    width: 100%;
  }

  .home-title .title-line:last-child {
    white-space: normal;
  }

  body:not(.page-home) .hero-title .title-line,
  .contact-intro h1 .title-line {
    display: block;
    white-space: normal;
  }

  body:not(.page-home) .hero-title .title-line + .title-line::before,
  .contact-intro h1 .title-line + .title-line::before {
    content: none;
  }

  .hero-title,
  .home-title {
    font-size: clamp(32px, 7.4vw, 50px);
    text-wrap: balance;
  }

  .hero-sub {
    margin-top: 26px;
    font-size: 18px;
    text-wrap: pretty;
  }

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

  .feature-item,
  .feature-item + .feature-item,
  .feature-item:nth-child(even) {
    padding-right: 0;
    padding-left: 0;
    border-left: 0;
  }

  .main-panel,
  .home-panel {
    width: calc(100% - 40px);
    margin-top: -104px;
    padding: 44px 24px;
    border-radius: 28px;
  }

  body:not(.page-home) .hero-inner,
  body:not(.page-home) .main-panel,
  body:not(.page-home) .footer-cta,
  body:not(.page-home) .seo-keywords,
  .page-contact .contact-screen {
    width: calc(100% - 28px);
  }

  body:not(.page-home) .main-panel {
    padding: 46px 22px;
  }

  .card-grid,
  .step-grid,
  .case-grid,
  .value-grid,
  .dashboard-metrics,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-card {
    padding: 28px;
  }

  .flow-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding-top: 8px;
  }

  .flow-track::before,
  .flow-beam {
    display: none;
  }

  .flow-step {
    min-height: 86px;
    padding: 14px 10px;
    border: 1px solid rgba(205, 226, 243, 0.72);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.56);
  }

  .two-column-panel,
  .about-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .contact-screen {
    width: calc(100% - 40px);
    padding: 36px 0 44px;
  }

  .contact-intro {
    display: block;
  }

  .contact-intro h1 {
    font-size: clamp(30px, 7vw, 42px);
    white-space: normal;
  }

  .contact-form-card,
  .manager-card {
    padding: 28px;
  }

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

  .footer-cta {
    width: calc(100% - 40px);
    grid-template-columns: 1fr;
    padding: 30px 24px;
  }

  .seo-keywords {
    width: calc(100% - 40px);
    margin: -18px auto 28px;
    gap: 8px;
  }

  .seo-keywords a {
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
  }
}

@media (max-width: 620px) {
  .nav-shell {
    width: calc(100% - 22px);
    gap: 8px 10px;
  }

  .brand,
  .brand img {
    width: 154px;
  }

  .brand {
    flex-basis: 154px;
  }

  .brand img {
    min-width: 154px;
  }

  .menu-lines {
    --menu-pad: 12px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .nav-links {
    gap: 6px;
    font-size: 12px;
  }

  .nav-links a {
    min-height: 32px;
    padding: 0 4px;
  }

  .hero-buttons {
    align-items: stretch;
    flex-direction: column;
    gap: 20px;
  }

  .button.primary,
  .button.secondary {
    width: 100%;
    height: 64px;
    min-width: 0;
    padding: 0 28px;
    font-size: 17px;
    line-height: 1;
    text-align: center;
    justify-content: center;
    gap: 14px;
  }

  .button.primary {
    grid-template-columns: minmax(0, 1fr) auto minmax(var(--arrow-size), 1fr);
    column-gap: 12px;
  }

  .hero-buttons .button .arrow {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    margin-left: 0;
  }

  .hero-buttons .button:hover .arrow,
  .hero-buttons .button:focus-visible .arrow {
    transform: translateX(3px);
  }

  .form-submit {
    --arrow-size: 44px;
    --arrow-line: 18px;
    --arrow-stroke: 3px;
    --arrow-head: 10px;
    height: 70px;
    font-size: 22px;
    letter-spacing: 0;
  }

  .manager-card {
    grid-template-columns: 1fr;
  }

  .qr-frame {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 16px;
    padding: 20px 18px 22px;
    min-width: 0;
    overflow: hidden;
  }

  .qr-visual {
    width: min(224px, 68vw);
    padding: 12px;
    border-radius: 24px;
  }

  .qr-info {
    max-width: 310px;
    text-align: center;
  }

  .qr-info strong {
    justify-content: center;
  }

  .qr-points {
    justify-content: center;
  }

  .channel-card span {
    max-width: 100%;
    font-size: 10px;
    letter-spacing: 0.02em;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .channel-card::after {
    right: 4px;
    width: min(112px, 38%);
    height: min(112px, 92%);
  }

  body:not(.page-home) .hero-inner,
  body:not(.page-home) .main-panel,
  body:not(.page-home) .footer-cta,
  body:not(.page-home) .seo-keywords,
  .page-contact .contact-screen {
    width: calc(100% - 18px);
  }

  .seo-keywords {
    width: calc(100% - 18px);
    margin: -16px auto 24px;
    gap: 7px;
    padding: 0;
  }

  .seo-keywords span {
    flex-basis: 100%;
    font-size: 13px;
  }

  .seo-keywords a {
    min-height: 31px;
    padding: 0 11px;
    font-size: 12px;
  }

  body:not(.page-home) .main-panel {
    padding: 36px 16px;
    border-radius: 24px;
  }

  .home-hero .feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    margin-top: 42px;
  }

  .home-hero .feature-item,
  .home-hero .feature-item + .feature-item,
  .home-hero .feature-item:nth-child(even) {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    min-height: 52px;
    padding: 0;
    border-left: 0;
  }

  .home-hero .feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .home-hero .feature-icon svg {
    width: 25px;
    height: 25px;
  }

  .home-hero .feature-title {
    white-space: nowrap;
    font-size: 17px;
    line-height: 1.2;
  }

  .home-hero .feature-text {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    word-break: keep-all;
  }

  body:not(.page-home) .feature-row {
    grid-template-columns: 1fr;
  }

  .contact-list div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .title-dot {
    width: 9px;
    height: 9px;
    margin: 0 12px 6px;
  }

  .hero-inner {
    padding: 40px 0 152px;
  }

  .home-hero .hero-inner {
    padding-top: 40px;
  }

  .hero::before {
    height: 220px;
  }

  .main-panel,
  .home-panel {
    margin-top: -98px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sub-hero-visual,
  .visual-card:hover,
  .hero-visual-scene,
  .solution-route span:hover,
  .solution-badges span:hover,
  .platform-metrics span:hover,
  .case-value-node,
  .case-value-node:hover,
  .case-outcome-board::before,
  .support-rail span:hover,
  .about-pillars span:hover,
  .platform-stream::before,
  .glass-panel,
  .glass-panel::after,
  .flow-beam {
    animation: none;
  }

  .sub-hero-visual {
    opacity: var(--visual-opacity);
    transform: translateX(0) scale(var(--visual-scale));
  }
}