.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--text {
  max-width: var(--container-text);
}

.section {
  position: relative;
  min-height: var(--sp-32);
  padding-block: var(--sp-section);
  scroll-margin-top: calc(var(--nav-h) + var(--sp-4));
}

.section--sm {
  padding-block: var(--sp-section-sm);
}

.section--flush {
  padding-top: 0;
}

.section--tint {
  background: var(--bg-1);
}

.section--edge {
  border-top: 1px solid var(--line-1);
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--col-gap);
}

[class^="col-"] {
  grid-column: 1 / -1;
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--sp-8);
}

.split + .split {
  margin-top: clamp(var(--sp-8), 3.2vw, var(--sp-10));
}

.split__text {
  max-width: 30em;
}

/* 外框由 .shot 提供；这里只保留定位上下文，供页级样式叠加。 */
.split__media {
  position: relative;
}

.hero {
  position: relative;
  display: grid;
  min-height: auto;
  overflow: hidden;
  align-content: center;
  /* Keep the first mobile viewport focused while leaving the next band visible. */
  padding: calc(var(--nav-h) + var(--sp-10)) 0 var(--sp-10);
}

.hero__inner {
  position: relative;
  z-index: var(--z-raised);
}

.hero h1 {
  max-width: 16em;
  margin: 0 0 var(--sp-5);
  /* Inner product pages use the compact heading tier; the home page
     overrides this below to keep its primary statement dominant. */
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.home-hero h1 {
  /* Keep the two value statements together at every width. The compact
     floor lets the first phrase fit on a 320px content column. */
  font-size: clamp(26px, 3.9vw, 48px);
}

.home-hero__break {
  display: block;
}

.hero p {
  max-width: 34em;
  margin: 0 0 var(--sp-8);
  color: var(--fg-2);
  font-size: var(--fs-lead);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.hero__actions .btn {
  width: 100%;
}

.skip-link {
  position: fixed;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-toast);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  color: var(--fg-1);
  transform: translateY(calc(-100% - var(--sp-4)));
  transition: transform var(--d-2) var(--e-out);
}

.skip-link:focus {
  transform: none;
}

.nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--z-nav);
  display: flex;
  height: var(--nav-h);
  align-items: center;
}

/* The glass layer stays on a pseudo-element so it cannot trap the fixed drawer. */
.nav::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-bottom: 1px solid var(--line-1);
  background: rgba(8,13,23,.72);
  box-shadow: var(--shadow-2);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-3) var(--e-out);
  backdrop-filter: var(--glass-blur-nav);
  -webkit-backdrop-filter: var(--glass-blur-nav);
}

.nav.is-stuck::before,
.nav.is-open::before {
  opacity: 1;
}

.nav__inner {
  display: flex;
  width: 100%;
  max-width: var(--container);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  align-items: center;
  gap: var(--sp-8);
}

.nav__burger {
  position: relative;
  z-index: 2;
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
}

.js .nav__burger {
  display: flex;
}

.nav__burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--fg-1);
  transition: transform var(--d-3) var(--e-out), opacity var(--d-2) var(--e-out);
}

.nav__burger span + span {
  margin-top: 5px;
}

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

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

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

.nav__panel {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  margin-left: auto;
}

.js .nav__panel {
  position: fixed;
  z-index: var(--z-drawer);
  inset: var(--nav-h) 0 0;
  padding: var(--sp-5) var(--gutter) var(--sp-12);
  overflow-y: auto;
  border-top: 1px solid var(--line-1);
  background: var(--bg-0);
  opacity: 0;
  overscroll-behavior: contain;
  transform: translateY(-8px);
  visibility: hidden;
  transition: opacity var(--d-3) var(--e-out), transform var(--d-3) var(--e-out), visibility var(--d-3);
}

.js .nav.is-open .nav__panel {
  opacity: 1;
  transform: none;
  visibility: visible;
}

.nav__menu {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  list-style: none;
}

.nav__item {
  position: relative;
}

.nav__link {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-height: 52px;
  padding-inline: var(--sp-1);
  align-items: center;
  gap: 6px;
  border-radius: var(--r-sm);
  color: var(--fg-2);
  font-size: 17px;
  text-decoration: none;
  transition: color var(--d-2) var(--e-out), background var(--d-2) var(--e-out);
}

.nav__link:hover {
  background: rgba(255,255,255,.06);
  color: var(--fg-1);
}

.nav__link[aria-current="page"] {
  color: var(--fg-1);
}

.nav__link[aria-current="page"]::before {
  position: absolute;
  bottom: 10px;
  left: var(--sp-1);
  width: var(--sp-5);
  height: 1.5px;
  border-radius: 2px;
  background: var(--grad-brand);
  content: "";
}

.nav__link--ai::after {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-400);
  box-shadow: 0 0 8px 1px rgba(53,214,196,.9);
  animation: nav-pulse 2.4s var(--e-out) infinite;
  content: "";
}

@keyframes nav-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .45;
    transform: scale(.72);
  }
}

.nav__caret {
  display: none;
  transition: transform var(--d-2) var(--e-out);
}

.nav__drop {
  min-width: 0;
  margin: 0;
  padding: 0 0 var(--sp-2) var(--sp-4);
  border: 0;
  background: none;
  box-shadow: none;
  list-style: none;
}

.nav__drop a {
  display: block;
  min-height: 44px;
  padding: 10px var(--sp-1);
  border-radius: 9px;
  color: var(--fg-2);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.nav__drop a:hover,
.nav__drop a[aria-current="page"] {
  background: rgba(255,255,255,.06);
  color: var(--fg-1);
}

.nav__cta {
  position: sticky;
  bottom: 0;
  display: grid;
  margin-top: auto;
  padding-top: var(--sp-4);
  gap: var(--sp-3);
  background: var(--bg-0);
}

.nav__cta .btn {
  width: 100%;
  min-height: 52px;
}

/* With scripting disabled, expose the complete mobile navigation in normal flow. */
:root:not(.js) .nav {
  position: relative;
  height: auto;
}

:root:not(.js) .nav::before {
  opacity: 1;
}

:root:not(.js) .nav__inner {
  padding-block: var(--sp-2);
  flex-wrap: wrap;
}

:root:not(.js) .nav__panel {
  margin-top: var(--sp-2);
  margin-left: 0;
}

.footer {
  border-top: 1px solid var(--line-1);
  background: var(--bg-1);
  margin-top: var(--sp-section-sm);
  padding: var(--sp-16) 0 calc(var(--sp-6) + var(--sp-1));
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

.footer__brand p {
  max-width: 22em;
  margin: 14px 0 0;
  color: var(--fg-3);
  font-size: 14px;
}

.footer__col-title {
  margin: 0 0 14px;
  color: var(--fg-1);
  font-size: 14px;
  font-weight: var(--fw-semi);
}

.footer ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 10px;
  list-style: none;
}

.footer a {
  color: var(--fg-3);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color var(--d-2) var(--e-out);
}

/* 触摸目标 ≥ 24px（WCAG 2.2 AA Target Size Minimum）：
   页脚列表链接原为 17px 高，加纵向内边距撑到 25px */
.footer__col ul a {
  display: inline-block;
  padding-block: var(--sp-1);
}

.footer a:hover {
  color: var(--brand-300);
}

.footer .footer__tel {
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--fg-1);
  font-family: var(--font-num);
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-body);
}


.fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-12 {
    grid-column: span 6;
  }

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

  .hero {
    min-height: min(80svh, 680px);
    padding: calc(var(--nav-h) + var(--sp-16)) 0 var(--sp-20);
  }

  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-4);
  }

  .hero__actions .btn {
    width: auto;
  }

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

  .footer__brand {
    grid-column: 1 / -1;
  }
}

/* Desktop-width hero composition follows the navigation breakpoint. Keeping
   the portrait/tablet range stacked prevents a one-pixel 759 -> 760 change
   from moving the headline and preview into a different composition. */
@media (min-width: 900px) and (max-width: 1099px) {
  /* The stage interpolates from the compact tablet floor to the full desktop
     height. At 1100px it reaches the exact values used by the desktop rule
     above, so the next breakpoint has no visible jump. */
  .hero.home-hero,
  .hero.pc-hero,
  .hero.mb-hero,
  .hero.lc-hero,
  .hero.solutions-hero,
  .hero.about-hero {
    min-height: min(80svh, clamp(520px, calc(50vw + 140px), 680px));
    padding-top: calc(var(--nav-h) + clamp(var(--sp-10), calc(10vw - 36px), var(--sp-16)));
    padding-bottom: clamp(var(--sp-10), calc(12vw - 51px), var(--sp-20));
    align-content: center;
  }

  .home-hero__layout,
  .pc-hero__layout,
  .mb-hero__layout,
  .lc-hero__layout,
  .about-hero__layout,
  .solutions-hero__layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: var(--sp-8);
  }
}

/* Portrait and landscape tablets keep the stacked reading order. The preview
   widths are capped so the image does not become a full-width wall of pixels
   between 760px and the desktop navigation breakpoint. */
@media (min-width: 640px) and (max-width: 899px) {
  .hero,
  .solutions-hero,
  .about-hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + var(--sp-10));
    padding-bottom: var(--sp-8);
  }

  .home-hero__layout,
  .pc-hero__layout,
  .mb-hero__layout,
  .lc-hero__layout,
  .about-hero__layout,
  .solutions-hero__layout {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .pc-hero .pc-window,
  .lc-hero .lc-erp-window,
  .solutions-hero .solutions-channel,
  .about-hero .about-hero__media {
    width: min(100%, 520px);
    margin-inline: auto;
  }

  .mb-hero .mb-hero__devices {
    width: min(100%, 360px);
  }
}

@media (min-width: 900px) {
  :root:not(.js) .nav {
    position: fixed;
    height: var(--nav-h);
  }

  :root:not(.js) .nav::before {
    opacity: 0;
  }

  :root:not(.js) .nav__inner {
    padding-block: 0;
    flex-wrap: nowrap;
  }

  .nav__burger,
  .js .nav__burger {
    display: none;
  }

  .nav__panel,
  .js .nav__panel {
    position: static;
    z-index: auto;
    display: flex;
    width: auto;
    padding: 0;
    overflow: visible;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    border: 0;
    background: transparent;
    opacity: 1;
    transform: none;
    visibility: visible;
  }

  .nav__menu {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-1);
  }

  .nav__link {
    width: auto;
    min-height: 40px;
    padding-inline: 14px;
    gap: 6px;
    border-radius: 10px;
    font-size: var(--fs-sm);
  }

  .nav__link[aria-current="page"]::before {
    right: 14px;
    bottom: var(--sp-1);
    left: 14px;
    width: auto;
  }

  .nav__caret {
    display: block;
  }

  .nav__item:hover .nav__caret,
  .nav__item:focus-within .nav__caret {
    transform: rotate(180deg);
  }

  .nav__drop {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: var(--z-dropdown);
    min-width: 220px;
    padding: var(--sp-2);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    background: rgba(19,28,46,.92);
    box-shadow: var(--shadow-3);
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    transition: opacity var(--d-2) var(--e-out), transform var(--d-2) var(--e-out), visibility var(--d-2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .nav__item:hover .nav__drop,
  .nav__item:focus-within .nav__drop {
    opacity: 1;
    transform: none;
    visibility: visible;
  }

  .nav__drop a {
    min-height: 0;
    padding: 10px var(--sp-3);
    font-size: 14px;
  }

  .nav__cta {
    position: static;
    display: block;
    margin-top: 0;
    padding-top: 0;
    background: transparent;
  }

  .nav__cta .btn {
    width: auto;
    min-height: var(--btn-h);
  }

  /* 顶部原本是「预约演示 + 拨打电话」，桌面端只显示前者。
     现在预约演示只保留在页面底部，电话按钮就要在桌面端露出来，
     否则整个 header 没有任何行动点。 */
  .nav__cta .nav__call {
    display: inline-flex;
  }

  .footer__top {
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: var(--sp-10);
  }

  .footer__brand {
    grid-column: auto;
  }

  .grid {
    grid-template-columns: repeat(var(--cols), 1fr);
  }

  .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
  .col-12 { grid-column: span 12; }

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

  .split {
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--sp-8), 4.5vw, var(--sp-16));
  }

  .split--reverse .split__text {
    order: 2;
  }

  .split--reverse .split__media {
    order: 1;
  }
}

/* Two compact actions fit side by side on most phones; keep the stacked
   treatment for very narrow screens where labels would wrap awkwardly. */
@media (min-width: 360px) and (max-width: 639px) {
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero__actions .btn {
    width: auto;
  }

  /* Keep the mobile footer scannable without making every link a full-width
     row. The brand remains a full-width anchor, while the four link groups
     form two balanced rows at the widths where most phones land. */
  .footer {
    padding: var(--sp-10) 0 var(--sp-6);
  }

  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-8);
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  .footer__col-title {
    margin-bottom: var(--sp-2);
  }

  .footer ul {
    gap: var(--sp-1);
  }
}

@media (max-width: 359px) {
  .footer {
    padding-top: var(--sp-10);
    padding-bottom: var(--sp-6);
  }

  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1200px) {
  .cards--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Breakpoint reserved for wide background treatments: 1440px. */
@media (min-width: 1440px) {
  .container--wide {
    padding-inline: var(--gutter);
  }
}