:root {
  --bg: #05080c;
  --bg-soft: #0a0f16;
  --panel: #0e151e;
  --ink: #eef4f8;
  --muted: #94a3b3;
  --line: rgba(255, 255, 255, 0.12);
  --blue: #00a8ff;
  --blue-deep: #135eff;
  --orange: #ff6b24;
  --lime: #b8f23e;
  --paper: #f3f2ed;
  --paper-ink: #0b1118;
  --max: 1360px;
  --header-h: 84px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

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

button,
input,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

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

html[lang="zh-CN"] h1,
html[lang="zh-CN"] h2,
html[lang="zh-CN"] h3,
html[lang="zh-CN"] blockquote p {
  text-wrap: balance;
}

html[lang="zh-CN"] p,
html[lang="zh-CN"] li,
html[lang="zh-CN"] .direct-contact strong,
html[lang="zh-CN"] .contact-address strong {
  word-break: auto-phrase;
  text-wrap: pretty;
}

h1.manual-break,
h2.manual-break,
h3.manual-break {
  white-space: pre-line;
}

.container {
  width: min(calc(100% - 72px), var(--max));
  margin-inline: auto;
}

.page-noise {
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  padding: 0 max(28px, calc((100vw - var(--max)) / 2));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background 300ms ease, border-color 300ms ease, height 300ms ease;
}

.site-header.scrolled {
  height: 70px;
  background: rgba(5, 8, 12, 0.84);
  border-color: var(--line);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 11px;
}

.brand-logo {
  gap: 10px;
}

.brand-symbol {
  position: relative;
  width: 38px;
  height: 46px;
  flex: 0 0 38px;
  overflow: hidden;
  filter: drop-shadow(0 0 9px rgba(0, 174, 255, 0.76));
}

.brand-symbol img {
  position: absolute;
  top: 0;
  left: 0;
  width: 210px;
  max-width: none;
  height: auto;
}

.brand-wordmark {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-wordmark strong {
  color: #54cfff;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-shadow: 0 0 8px rgba(0, 174, 255, 0.65), 0 0 22px rgba(0, 113, 255, 0.42);
  white-space: nowrap;
}

.brand-wordmark small {
  color: #5c8096;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.brand-mark {
  width: 37px;
  height: 37px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--blue);
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-copy strong {
  font-size: 13px;
  letter-spacing: 0.18em;
}

.brand-copy small {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 25px;
}

.desktop-nav a,
.footer-nav a {
  position: relative;
  color: #c5d0da;
  font-size: 13px;
  transition: color 200ms ease;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 1px;
  content: "";
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 240ms ease;
}

.desktop-nav a:hover,
.footer-nav a:hover {
  color: white;
}

.desktop-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 18px;
}

.lang-toggle,
.menu-toggle {
  border: 0;
  background: none;
  cursor: pointer;
}

.lang-toggle {
  padding: 8px;
  color: #6f7d8b;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.lang-toggle .active {
  color: white;
}

.lang-toggle .divider {
  margin-inline: 5px;
  color: #3d4854;
}

.header-cta {
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 12px;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.header-cta:hover {
  color: #03101a;
  border-color: var(--blue);
  background: var(--blue);
}

.menu-toggle {
  display: none;
  width: 38px;
  height: 38px;
  padding: 10px 6px;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 1px;
  margin: 5px 0;
  background: white;
  transition: transform 250ms ease;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 120px 28px 40px;
  background: rgba(5, 8, 12, 0.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
}

.mobile-menu a {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(28px, 9vw, 44px);
  font-weight: 700;
}

/* Explicit exit affordance so the full-screen menu can never feel
   "stuck" — a clearly-labelled close button at the end of the list,
   plus tapping the dark backdrop closes the menu (wired in script.js). */
.menu-close {
  position: sticky;
  bottom: 0;
  margin-top: 26px;
  width: 100%;
  padding: 14px 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  background: rgba(5, 8, 12, 0.98);
  color: #c5d0da;
  font-size: 16px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
}

.menu-close:hover {
  color: #fff;
  border-color: var(--blue);
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #05080c;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 8, 12, 0.98) 0%, rgba(5, 8, 12, 0.88) 39%, rgba(5, 8, 12, 0.45) 70%, rgba(5, 8, 12, 0.72) 100%),
    linear-gradient(0deg, #05080c 0%, transparent 28%),
    url("assets/runner-hero.webp") center / cover no-repeat;
  opacity: 0.52;
  filter: saturate(0.6) contrast(1.1);
  transform: scale(1.03);
}

.hero-grid,
.contact-grid {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent 5%, black 50%, transparent 96%);
}

.hero::before {
  position: absolute;
  top: 18%;
  right: 5%;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle, rgba(0, 168, 255, 0.22) 0%, rgba(0, 168, 255, 0.04) 45%, transparent 70%);
  filter: blur(30px);
}

.hero-content {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + 70px);
  padding-bottom: 105px;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(480px, 1.08fr);
  align-items: center;
  gap: 40px;
}

.eyebrow,
.section-kicker,
.product-label,
.platform-label {
  margin: 0 0 24px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 15px var(--lime);
}

.status-dot::after {
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(184, 242, 62, 0.45);
  border-radius: inherit;
  content: "";
  animation: ping 2s infinite;
}

@keyframes ping {
  0%, 100% { transform: scale(0.6); opacity: 0; }
  45% { transform: scale(1.2); opacity: 1; }
}

.hero h1 {
  max-width: 800px;
  margin: 0;
  font-size: clamp(58px, 6.2vw, 104px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}

.hero h1 span,
.hero h1 em {
  display: block;
}

.hero h1 em {
  position: relative;
  isolation: isolate;
  width: max-content;
  max-width: 100%;
  margin-top: 0.2em;
  padding-right: clamp(72px, 8vw, 132px);
  color: #35b9ff;
  font-style: normal;
  font-size: 1.02em;
  font-weight: 750;
  letter-spacing: 0.12em;
  line-height: 0.95;
  background: linear-gradient(108deg, #087fff 0%, #42caff 26%, #d7f7ff 43%, #25baff 58%, #006cff 100%);
  background-size: 220% 100%;
  background-clip: text;
  text-shadow: 0 0 10px rgba(0, 190, 255, 0.7), 0 0 30px rgba(0, 139, 255, 0.48), 0 0 76px rgba(0, 113, 255, 0.24);
  transform: skewX(-4deg);
  transform-origin: left center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  animation: forceShimmer 5.5s ease-in-out infinite;
}

.hero h1 em::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: attr(data-zh);
  color: transparent;
  opacity: 0.48;
  text-shadow: 8px 8px 25px rgba(0, 91, 255, 0.28);
  transform: translate(8px, 6px);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(0, 142, 255, 0.58);
}

.hero h1 em::after {
  position: absolute;
  top: 52%;
  right: 0;
  width: clamp(54px, 7vw, 108px);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(79, 210, 255, 0.95), rgba(0, 126, 255, 0.48) 38%, rgba(0, 168, 255, 0));
  box-shadow: -18px 0 26px rgba(0, 168, 255, 0.3), 0 0 10px rgba(0, 168, 255, 0.42);
}

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

html[lang="en"] .hero h1 {
  font-size: clamp(50px, 5.2vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

html[lang="en"] .hero h1 em {
  width: auto;
  max-width: 100%;
  margin-top: 0.2em;
  padding-right: 0;
  font-size: 0.66em;
  letter-spacing: 0.01em;
  line-height: 1;
  background: none;
  text-shadow: 0 0 38px rgba(0, 168, 255, 0.16);
  transform: none;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(173, 229, 255, 0.92);
  animation: none;
}

html[lang="en"] .hero h1 em::before {
  display: none;
}

html[lang="en"] .hero h1 em::after {
  display: none;
}

.hero-lede {
  max-width: 650px;
  margin: 34px 0 0;
  color: #b8c4ce;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

.button {
  min-height: 54px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  border: 1px solid transparent;
  background: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, color 220ms ease;
}

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

.button-primary {
  color: #02121d;
  background: var(--blue);
}

.button-primary:hover {
  background: #4bc3ff;
}

.button-ghost {
  color: white;
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.025);
}

.button-ghost:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
}

.button-arrow {
  font-size: 18px;
}

.hero-visual {
  position: relative;
  min-height: 610px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 900px;
}

.hero-visual::before {
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid rgba(0, 168, 255, 0.24);
  border-radius: 50%;
  content: "";
  box-shadow: inset 0 0 80px rgba(0, 168, 255, 0.06), 0 0 80px rgba(0, 168, 255, 0.08);
}

.hero-visual img {
  position: relative;
  z-index: 2;
  width: min(74%, 600px);
  filter: drop-shadow(0 35px 55px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 25px rgba(60, 174, 255, 0.18));
  transform: rotate(-3deg) translate(-70px, 4px);
  animation: productFloat 7s ease-in-out infinite;
}

@keyframes productFloat {
  0%, 100% { transform: rotate(-3deg) translate(-70px, 4px); }
  50% { transform: rotate(-1deg) translate(-70px, -12px); }
}

#pressureCanvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.visual-orbit {
  position: absolute;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  animation: orbitRotate 24s linear infinite;
}

.visual-orbit::after {
  position: absolute;
  top: 50%;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
  background: var(--orange);
  box-shadow: 0 0 13px var(--orange);
}

.orbit-one {
  width: 85%;
  aspect-ratio: 1;
}

.orbit-two {
  width: 56%;
  aspect-ratio: 1;
  animation-direction: reverse;
  animation-duration: 17s;
}

@keyframes orbitRotate {
  to { transform: rotate(360deg); }
}

.floating-metric {
  position: absolute;
  z-index: 4;
  min-width: 132px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(7, 13, 19, 0.72);
  backdrop-filter: blur(12px);
}

.floating-metric span,
.floating-metric strong {
  display: block;
}

.floating-metric span {
  margin-bottom: 6px;
  color: #93a4b4;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.floating-metric strong {
  color: white;
  font-size: 16px;
  letter-spacing: 0.03em;
}

.metric-a { top: 18%; right: 2%; }
.metric-b { bottom: 22%; left: 2%; }
.metric-c { right: 9%; bottom: 9%; }

.hero-bottom {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 27px;
  left: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  color: #667585;
  font-size: 9px;
  letter-spacing: 0.18em;
}

.scroll-line {
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}

.scroll-line span {
  display: block;
  width: 22%;
  height: 100%;
  background: var(--blue);
  animation: scrollLine 3s ease-in-out infinite;
}

@keyframes scrollLine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(550%); }
}

.metrics-band {
  position: relative;
  z-index: 3;
  border-block: 1px solid var(--line);
  background: #070b10;
}

.difference-section {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 74% 45%, rgba(0, 168, 255, 0.1), transparent 34%),
    #060a0f;
}

.difference-section::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent, black 45%, transparent);
}

.difference-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 70px;
  align-items: end;
}

.difference-heading h2 {
  max-width: 920px;
  margin: 0;
  font-size: clamp(42px, 5.3vw, 78px);
  line-height: 1.04;
  letter-spacing: -0.055em;
}

.difference-heading h2.manual-break {
  white-space: pre-line;
}

.difference-heading > p {
  margin: 0;
  color: #8b99a6;
  font-size: 15px;
  line-height: 1.85;
}

.difference-grid {
  position: relative;
  z-index: 1;
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 76px 1fr;
  align-items: stretch;
}

.difference-card {
  min-height: 390px;
  padding: 42px;
  border: 1px solid var(--line);
  background: rgba(9, 14, 20, 0.84);
}

.difference-card.highlight {
  border-color: rgba(0, 168, 255, 0.5);
  background:
    radial-gradient(circle at 85% 15%, rgba(0, 168, 255, 0.14), transparent 38%),
    #0a121b;
  box-shadow: 0 0 60px rgba(0, 168, 255, 0.06);
}

.difference-label {
  margin: 0;
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.difference-card h3 {
  max-width: 500px;
  margin: 65px 0 30px;
  font-size: clamp(27px, 2.7vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.difference-card h3.manual-break {
  white-space: pre-line;
}

.difference-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.difference-card li {
  position: relative;
  padding: 13px 0 13px 20px;
  border-top: 1px solid var(--line);
  color: #99a8b5;
  font-size: 12px;
  line-height: 1.55;
}

.difference-card li::before {
  position: absolute;
  top: 17px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  content: "";
  background: var(--orange);
  box-shadow: 0 0 10px rgba(255, 107, 36, 0.42);
}

.difference-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.difference-connector span {
  width: 1px;
  height: 92px;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.28));
}

.difference-connector span:last-child {
  background: linear-gradient(rgba(255, 255, 255, 0.28), transparent);
}

.difference-connector b {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: var(--blue);
  font-size: 16px;
}

.difference-note {
  position: relative;
  z-index: 1;
  margin-top: 28px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  color: #788896;
  font-size: 9px;
  letter-spacing: 0.12em;
}

.difference-note i {
  color: var(--orange);
  font-style: normal;
}

.difference-note p {
  margin: 0 0 0 auto;
  color: #aebac4;
  font-size: 11px;
  letter-spacing: 0;
}

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

.metric-item {
  min-height: 178px;
  padding: 34px 34px 28px;
  border-left: 1px solid var(--line);
}

.metric-item:last-child {
  border-right: 1px solid var(--line);
}

.metric-item strong {
  display: block;
  font-size: clamp(34px, 4vw, 60px);
  line-height: 1;
  letter-spacing: -0.05em;
}

.metric-item small {
  margin-left: 4px;
  color: var(--blue);
  font-size: 0.36em;
  letter-spacing: 0;
}

.metric-item p {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.section {
  position: relative;
  padding: 140px 0;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr);
  gap: 80px;
  align-items: end;
  margin-bottom: 74px;
}

.section-heading h2,
.app-copy h2,
.global-copy h2,
.about-copy h2,
.contact-copy h2 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(42px, 5.2vw, 78px);
  line-height: 1.04;
  letter-spacing: -0.055em;
}

.section-heading > p,
.global-copy > p,
.contact-copy > p {
  margin: 0;
  color: #8b99a6;
  font-size: 15px;
  line-height: 1.85;
}

.section-heading.light > p {
  color: #91a0ae;
}

.products-section,
.strategy-section,
.about-section {
  color: var(--ink);
  background: #080d13;
}

.product-shell {
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0a1017;
}

.product-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}

.product-tab {
  position: relative;
  min-height: 106px;
  padding: 24px 30px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 20px;
  border: 0;
  border-right: 1px solid var(--line);
  color: #788796;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 240ms ease, color 240ms ease;
}

.product-tab:last-child {
  border-right: 0;
}

.product-tab::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  content: "";
  background: var(--blue-deep);
  transform: scaleX(0);
  transition: transform 300ms var(--ease);
}

.product-tab.active {
  color: white;
  background: rgba(0, 168, 255, 0.08);
}

.product-tab.active::after {
  transform: scaleX(1);
}

.product-tab > span {
  grid-row: span 2;
  padding-top: 4px;
  color: var(--blue-deep);
  font-size: 11px;
}

.product-tab strong {
  font-size: 27px;
  letter-spacing: -0.04em;
}

.product-tab small {
  font-size: 11px;
}

.product-panel {
  min-height: 620px;
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
}

.product-copy {
  padding: 76px 64px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: #0b1118;
}

.product-copy h3 {
  max-width: 520px;
  margin: 0;
  font-size: clamp(36px, 4.2vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.05em;
}

.product-copy > p:not(.product-label) {
  margin: 25px 0 0;
  color: #91a0ae;
  font-size: 15px;
  line-height: 1.8;
}

.product-copy ul {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.product-copy li {
  position: relative;
  padding: 13px 0 13px 22px;
  border-top: 1px solid var(--line);
  color: #cad4dc;
  font-size: 13px;
}

.product-copy li::before {
  position: absolute;
  top: 17px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  content: "";
  background: var(--orange);
  box-shadow: 0 0 10px rgba(255, 107, 36, 0.42);
}

.text-link {
  width: max-content;
  margin-top: auto;
  padding-top: 34px;
  display: flex;
  gap: 18px;
  color: var(--blue-deep);
  font-size: 13px;
  font-weight: 700;
}

.product-visual {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(0, 168, 255, 0.17), transparent 48%),
    linear-gradient(135deg, #111a24, #070a0f 70%);
}

.product-visual::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle, black 10%, transparent 75%);
}

.interactive-3d {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --light-x: 50%;
  --light-y: 38%;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;
  transition: transform 520ms var(--ease), filter 320ms ease;
}

.interactive-3d.is-tilting {
  cursor: grabbing;
  transition: transform 90ms linear, filter 180ms ease;
}

.product-tilt {
  position: relative;
  z-index: 2;
  width: 78%;
  height: 540px;
  display: grid;
  place-items: center;
  transform: perspective(1050px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(20px);
}

.product-visual:not(.walkpad) .product-tilt {
  left: -7%;
}

.product-tilt::after,
.phone-tilt::after {
  position: absolute;
  inset: 5%;
  z-index: 4;
  content: "";
  pointer-events: none;
  border-radius: 45%;
  background: radial-gradient(circle at var(--light-x) var(--light-y), rgba(255, 255, 255, 0.2), transparent 24%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 240ms ease;
}

.interactive-3d.is-tilting::after {
  opacity: 0.58;
}

.product-tilt img {
  grid-area: 1 / 1;
  position: relative;
  width: 100%;
  max-height: 540px;
  object-fit: contain;
  filter: drop-shadow(0 25px 40px rgba(0, 0, 0, 0.5));
  transform: translateZ(34px);
  transition: opacity 220ms ease, transform 450ms var(--ease), filter 320ms ease;
}

.product-tilt img.tilt-depth,
.phone-tilt img.tilt-depth {
  z-index: 0;
  opacity: 0.72;
  filter: brightness(0.18) saturate(0.65) drop-shadow(0 28px 32px rgba(0, 0, 0, 0.62));
  transform: translate3d(10px, 13px, -24px) scale(0.995);
}

.product-tilt img:not(.tilt-depth),
.phone-tilt img:not(.tilt-depth) {
  z-index: 2;
}

.product-visual.walkpad .product-tilt {
  width: 54%;
  height: 500px;
}

.product-visual.walkpad .product-tilt img {
  max-height: 500px;
  filter: drop-shadow(0 24px 42px rgba(0, 168, 255, 0.24));
}

.product-visual.walkpad .product-tilt img.tilt-depth {
  filter: brightness(0.2) saturate(0.7) drop-shadow(0 25px 35px rgba(0, 65, 110, 0.7));
}

.product-visual.switching .product-tilt img {
  opacity: 0;
  transform: scale(0.94) translateY(10px);
}

.interaction-hint {
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 5;
  margin: 0;
  color: rgba(215, 231, 242, 0.48);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

.product-halo {
  position: absolute;
  width: 64%;
  aspect-ratio: 1;
  border: 1px solid rgba(0, 168, 255, 0.35);
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(0, 168, 255, 0.12), inset 0 0 60px rgba(0, 168, 255, 0.08);
}

.data-chip {
  position: absolute;
  z-index: 3;
  padding: 12px 14px;
  border-left: 2px solid var(--orange);
  color: white;
  background: rgba(5, 10, 15, 0.72);
  backdrop-filter: blur(8px);
}

.data-chip span,
.data-chip strong {
  display: block;
}

.data-chip span {
  color: var(--blue);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.data-chip strong {
  margin-top: 3px;
  font-size: 12px;
}

.chip-left { bottom: 15%; left: 7%; }
.chip-right { top: 17%; right: 7%; }

.technology-section,
.applications-section,
.global-section {
  background: var(--bg);
}

.technology-stage {
  min-height: 690px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  border: 1px solid var(--line);
  background: #080d13;
}

.tech-image-wrap {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--line);
  background: radial-gradient(circle at 50% 50%, rgba(0, 168, 255, 0.15), transparent 58%);
}

.tech-image-wrap::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 32px 32px;
}

.tech-image-wrap img {
  position: relative;
  z-index: 1;
  width: 90%;
  filter: drop-shadow(0 0 35px rgba(0, 168, 255, 0.2));
}

.scan-line {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  box-shadow: 0 0 20px var(--blue);
  animation: scan 5s ease-in-out infinite;
}

@keyframes scan {
  0%, 100% { transform: translateY(40px); opacity: 0; }
  15%, 80% { opacity: 1; }
  90% { transform: translateY(610px); opacity: 0; }
}

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

.tech-cards article {
  padding: 44px;
  border-bottom: 1px solid var(--line);
  transition: background 250ms ease;
}

.tech-cards article:last-child {
  border-bottom: 0;
}

.tech-cards article:hover {
  background: rgba(0, 168, 255, 0.055);
}

.tech-cards span {
  color: var(--blue);
  font-size: 9px;
  letter-spacing: 0.15em;
}

.tech-cards h3 {
  margin: 15px 0 10px;
  font-size: 24px;
  letter-spacing: -0.03em;
}

.tech-cards p {
  margin: 0;
  color: #8795a3;
  font-size: 13px;
  line-height: 1.75;
}

.app-section {
  overflow: hidden;
  background: #0d151e;
}

.app-section::before {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 28% 50%, rgba(0, 168, 255, 0.14), transparent 34%);
}

.app-layout {
  position: relative;
  min-height: 820px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 110px;
  align-items: center;
}

.app-phone {
  position: relative;
  align-self: end;
  height: 760px;
  display: flex;
  justify-content: center;
}

.phone-tilt {
  position: relative;
  z-index: 2;
  height: 900px;
  aspect-ratio: 916 / 1717;
  transform: perspective(1200px) rotateZ(-5deg) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(25px) translateZ(18px);
}

.phone-tilt img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 32px;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.32);
  mix-blend-mode: screen;
  transform: translateZ(30px);
  transition: filter 320ms ease, transform 450ms var(--ease);
}

.phone-tilt img.tilt-depth {
  display: none;
}

.phone-hint {
  right: auto;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.phone-glow {
  position: absolute;
  top: 17%;
  left: 50%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(0, 168, 255, 0.23);
  filter: blur(90px);
  transform: translateX(-50%);
}

.app-copy {
  position: relative;
  z-index: 3;
  padding-right: 4vw;
}

.app-copy h2 {
  max-width: 800px;
}

.app-copy h2.manual-break {
  white-space: pre-line;
}

.large-copy {
  margin: 30px 0 0;
  color: #9cabb8;
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.8;
}

.app-feature-list {
  margin-top: 46px;
  border-top: 1px solid var(--line);
}

.app-feature-list article {
  padding: 20px 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  border-bottom: 1px solid var(--line);
}

.app-feature-list strong {
  color: var(--blue);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.app-feature-list span {
  color: #d2dae1;
  font-size: 14px;
}

.strategy-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  border-block: 1px solid var(--line);
}

.strategy-flow article {
  min-height: 250px;
  padding: 32px 26px;
}

.flow-index {
  color: var(--blue-deep);
  font-size: 11px;
  font-weight: 700;
}

.strategy-flow h3 {
  margin: 52px 0 13px;
  font-size: 21px;
}

.strategy-flow p {
  margin: 0;
  color: #8b99a6;
  font-size: 12px;
  line-height: 1.75;
}

.flow-arrow {
  padding: 0 8px;
  display: flex;
  align-items: center;
  color: #8d969b;
}

.strategy-platform {
  min-height: 470px;
  margin-top: 72px;
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  color: white;
  background: #07101a;
}

.platform-visual {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.platform-visual img {
  position: relative;
  z-index: 2;
  width: 58%;
  border-radius: 0;
  filter: saturate(1.25) drop-shadow(0 0 28px rgba(0, 168, 255, 0.5));
}

.platform-rings span {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  border: 1px solid rgba(0, 168, 255, 0.22);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.platform-rings span:nth-child(1) { width: 220px; }
.platform-rings span:nth-child(2) { width: 330px; }
.platform-rings span:nth-child(3) { width: 460px; }

.platform-copy {
  padding: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.platform-copy h3 {
  margin: 0;
  font-size: clamp(34px, 4vw, 59px);
  line-height: 1.08;
  letter-spacing: -0.05em;
}

.platform-copy > p:not(.platform-label) {
  margin: 24px 0 0;
  color: #95a5b3;
  font-size: 15px;
  line-height: 1.8;
}

.platform-tags {
  margin-top: 35px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.platform-tags span {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #b6c4ce;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.application-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.application-card {
  position: relative;
  min-height: 330px;
  padding: 34px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #080c12;
  transition: background 250ms ease;
}

.application-card:hover {
  background: #0c151e;
}

.application-card > span,
.application-card > div > span {
  color: var(--blue);
  font-size: 10px;
}

.application-card h3 {
  margin: 85px 0 16px;
  font-size: 25px;
  letter-spacing: -0.035em;
}

.application-card p {
  max-width: 310px;
  margin: 0;
  color: #8493a1;
  font-size: 13px;
  line-height: 1.75;
}

.card-line {
  position: absolute;
  right: 34px;
  bottom: 34px;
  left: 34px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue) 0 20%, rgba(255, 255, 255, 0.1) 20%);
  transition: background 400ms ease;
}

.application-card:hover .card-line {
  background: linear-gradient(90deg, var(--orange) 0 70%, rgba(255, 255, 255, 0.1) 70%);
}

.application-card.wide {
  min-height: 390px;
  padding: 0;
  display: grid;
  grid-column: span 4;
  grid-template-columns: 0.7fr 1.3fr;
}

.application-card.wide > div {
  padding: 42px;
}

.application-card.wide h3 {
  margin-top: 70px;
}

.application-card.wide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  opacity: 0.7;
  transition: filter 400ms ease, opacity 400ms ease;
}

.application-card.wide:hover img {
  filter: grayscale(0) contrast(1);
  opacity: 0.95;
}

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

.global-layout {
  min-height: 720px;
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 60px;
  align-items: center;
}

.global-copy h2 {
  margin-bottom: 30px;
}

.region-list {
  margin-top: 46px;
  border-top: 1px solid var(--line);
}

.region-list article {
  padding: 20px 0;
  display: grid;
  grid-template-columns: 56px 1fr;
  border-bottom: 1px solid var(--line);
}

.region-list article > span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.region-list strong {
  display: block;
  font-size: 14px;
}

.region-list p {
  margin: 7px 0 0;
  color: #71808d;
  font-size: 12px;
  line-height: 1.6;
}

.map-wrap {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-wrap img {
  position: relative;
  z-index: 2;
  width: 100%;
  filter: saturate(0.9) drop-shadow(0 0 35px rgba(0, 168, 255, 0.15));
  opacity: 0.9;
}

.map-glow {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(0, 168, 255, 0.13);
  filter: blur(100px);
}

.map-pin {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  letter-spacing: 0.12em;
}

.map-pin i {
  position: relative;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 14px var(--orange);
}

.map-pin i::after {
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(255, 107, 36, 0.55);
  border-radius: 50%;
  content: "";
  animation: mapPulse 2.3s infinite;
}

@keyframes mapPulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.pin-cn { top: 48%; right: 17%; }
.pin-jp { top: 44%; right: 8%; }
.pin-us { top: 43%; left: 17%; }

.footprint-section {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 18% 38%, rgba(0, 168, 255, 0.14), transparent 30%),
    radial-gradient(circle at 82% 70%, rgba(184, 242, 62, 0.055), transparent 25%),
    #050b12;
}

.footprint-grid-bg {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

.footprint-section > .container {
  position: relative;
  z-index: 2;
}

.footprint-heading {
  margin-bottom: 66px;
  display: grid;
  grid-template-columns: 1.1fr 0.72fr;
  gap: 90px;
  align-items: end;
}

.footprint-heading h2 {
  max-width: 880px;
  margin: 0;
  font-size: clamp(46px, 5.4vw, 78px);
  line-height: 1.04;
  letter-spacing: -0.055em;
}

.footprint-intro p {
  margin: 0 0 30px;
  color: #91a0ae;
  font-size: 14px;
  line-height: 1.85;
}

.footprint-primary-cta {
  width: max-content;
}

.footprint-core {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  border: 1px solid var(--line);
  background: rgba(5, 11, 18, 0.78);
}

.footprint-visual {
  position: relative;
  min-height: 650px;
  padding: 48px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 45%, rgba(0, 168, 255, 0.14), transparent 43%),
    linear-gradient(140deg, rgba(255, 255, 255, 0.025), transparent 60%);
}

.scan-frame {
  position: absolute;
  inset: 48px 48px 86px;
  overflow: hidden;
  border: 1px solid rgba(0, 168, 255, 0.2);
  background:
    linear-gradient(rgba(0, 168, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 168, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}

.footprint-scan-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.94;
  filter: saturate(0.92) contrast(1.04);
}

.scan-frame::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 48%, rgba(3, 8, 13, 0.25) 100%);
}

.scan-corner {
  position: absolute;
  z-index: 4;
  width: 28px;
  height: 28px;
  border-color: var(--blue);
  border-style: solid;
}

.corner-tl { top: 15px; left: 15px; border-width: 2px 0 0 2px; }
.corner-tr { top: 15px; right: 15px; border-width: 2px 2px 0 0; }
.corner-bl { bottom: 15px; left: 15px; border-width: 0 0 2px 2px; }
.corner-br { right: 15px; bottom: 15px; border-width: 0 2px 2px 0; }

.pressure-foot {
  position: absolute;
  top: 96px;
  width: 126px;
  height: 350px;
  filter: drop-shadow(0 0 18px rgba(0, 168, 255, 0.4));
}

.pressure-foot-left {
  left: 24%;
  transform: rotate(-4deg);
}

.pressure-foot-right {
  right: 24%;
  transform: rotate(4deg) scaleX(-1);
}

.foot-sole {
  position: absolute;
  top: 76px;
  left: 15px;
  width: 96px;
  height: 262px;
  border: 1px solid rgba(90, 224, 255, 0.55);
  border-radius: 48% 52% 43% 57% / 28% 30% 70% 72%;
  background:
    radial-gradient(ellipse at 54% 12%, rgba(255, 74, 39, 0.96) 0 9%, rgba(255, 186, 36, 0.78) 15%, rgba(0, 168, 255, 0.45) 30%, transparent 44%),
    radial-gradient(ellipse at 36% 46%, rgba(0, 168, 255, 0.7) 0 13%, rgba(0, 168, 255, 0.22) 28%, transparent 46%),
    radial-gradient(ellipse at 55% 88%, rgba(255, 87, 40, 0.92) 0 11%, rgba(255, 185, 35, 0.68) 17%, rgba(0, 168, 255, 0.3) 32%, transparent 45%),
    rgba(0, 168, 255, 0.08);
  box-shadow: inset 0 0 34px rgba(0, 168, 255, 0.25);
}

.foot-sole::after {
  position: absolute;
  top: 77px;
  right: -2px;
  width: 39px;
  height: 92px;
  border-radius: 50%;
  content: "";
  background: #071019;
  box-shadow: -5px 0 15px rgba(0, 168, 255, 0.08);
}

.toe {
  position: absolute;
  display: block;
  border: 1px solid rgba(100, 227, 255, 0.6);
  border-radius: 50%;
  background: radial-gradient(circle, #ff5b2b 0 15%, #ffc32d 30%, rgba(0, 168, 255, 0.55) 58%, rgba(0, 168, 255, 0.08) 75%);
  box-shadow: 0 0 16px rgba(0, 168, 255, 0.28);
}

.toe-1 { top: 17px; left: 17px; width: 37px; height: 43px; }
.toe-2 { top: 6px; left: 55px; width: 29px; height: 35px; }
.toe-3 { top: 12px; left: 86px; width: 23px; height: 29px; }
.toe-4 { top: 28px; left: 108px; width: 19px; height: 23px; }
.toe-5 { top: 50px; left: 119px; width: 15px; height: 18px; }

.scan-line {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), white, var(--blue), transparent);
  box-shadow: 0 0 18px rgba(0, 168, 255, 0.85);
  animation: footprintScan 4.2s ease-in-out infinite;
}

@keyframes footprintScan {
  0%, 100% { transform: translateY(30px); opacity: 0.25; }
  50% { transform: translateY(440px); opacity: 0.95; }
}

.scan-label,
.analysis-status {
  position: absolute;
  z-index: 4;
  color: #70d7ff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.label-left { bottom: 24px; left: 20%; }
.label-right { right: 18%; bottom: 24px; }

.analysis-status {
  top: 27px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.analysis-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 11px var(--lime);
}

.footprint-visual-meta {
  position: absolute;
  right: 48px;
  bottom: 35px;
  left: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #607180;
  font-size: 8px;
  letter-spacing: 0.14em;
}

.footprint-visual-meta strong {
  color: var(--blue);
}

.footprint-prep {
  padding: 54px 48px;
}

.micro-label {
  margin: 0 0 28px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.prep-list {
  border-top: 1px solid var(--line);
}

.prep-list article {
  min-height: 124px;
  padding: 23px 0;
  display: grid;
  grid-template-columns: 54px 1fr;
  border-bottom: 1px solid var(--line);
}

.prep-list article > span {
  color: var(--blue);
  font-size: 9px;
  font-weight: 700;
}

.prep-list strong {
  display: block;
  font-size: 15px;
}

.prep-list p {
  margin: 8px 0 0;
  color: #778796;
  font-size: 12px;
  line-height: 1.65;
}

.analysis-flow {
  min-height: 112px;
  padding: 24px 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr auto) 1fr;
  align-items: center;
  border: 1px solid var(--line);
  border-top: 0;
  background: #08111a;
}

.analysis-flow article {
  display: flex;
  align-items: center;
  gap: 12px;
}

.analysis-flow article span {
  color: var(--blue);
  font-size: 9px;
  font-weight: 700;
}

.analysis-flow article strong {
  font-size: 12px;
}

.analysis-flow > i {
  margin: 0 22px;
  color: #344452;
  font-style: normal;
}

.report-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid var(--line);
}

.report-preview article {
  min-height: 245px;
  padding: 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(7, 14, 22, 0.74);
}

.report-preview article > span {
  color: var(--blue);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.report-preview strong {
  min-height: 58px;
  margin-top: 72px;
  display: block;
  font-size: 18px;
  line-height: 1.3;
}

.report-preview p {
  margin: 12px 0 0;
  color: #788896;
  font-size: 11px;
  line-height: 1.65;
}

.footprint-bottom {
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  border: 1px solid var(--line);
  border-top: 0;
}

.footprint-bottom p {
  max-width: 850px;
  margin: 0;
  color: #617280;
  font-size: 10px;
  line-height: 1.7;
}

.footprint-bottom a {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: center;
}

.about-image {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: #c9d6df;
}

.about-image img {
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover;
  object-position: center 24%;
  filter: saturate(0.82) contrast(1.02);
}

.about-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: white;
  background: rgba(5, 8, 12, 0.85);
  backdrop-filter: blur(12px);
}

.about-caption span {
  color: var(--blue);
  font-size: 9px;
  letter-spacing: 0.15em;
}

.about-caption strong {
  font-size: 12px;
}

.about-copy .large-copy {
  color: #91a0ae;
}

.founder-identity {
  margin: -8px 0 24px;
  padding-bottom: 18px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}

.founder-identity strong {
  color: white;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.founder-identity span {
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.about-copy blockquote {
  margin: 42px 0 0;
  padding: 26px 0 26px 26px;
  border-left: 2px solid var(--blue-deep);
}

.about-copy blockquote p {
  margin: 0;
  color: #dbe5ec;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 650;
  line-height: 1.65;
}

.company-dual {
  margin-top: 32px;
  border-top: 1px solid var(--line);
}

.company-dual > div {
  padding: 18px 0;
  display: grid;
  grid-template-columns: 80px 1fr;
  border-bottom: 1px solid var(--line);
}

.company-dual span {
  color: var(--blue-deep);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.company-dual strong {
  font-size: 12px;
}

.partners-section {
  border-top: 1px solid var(--line);
  color: var(--ink);
  background:
    radial-gradient(circle at 80% 20%, rgba(0, 168, 255, 0.08), transparent 30%),
    #070b10;
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.partner-card {
  position: relative;
  min-height: 390px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(8, 13, 19, 0.72);
  transition: background 240ms ease, transform 240ms ease;
}

.partner-card:hover {
  z-index: 2;
  background: #0b151f;
  transform: translateY(-4px);
}

.partner-card > span {
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
}

.partner-card h3 {
  margin: 86px 0 18px;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.partner-card p {
  margin: 0;
  color: #8a99a6;
  font-size: 13px;
  line-height: 1.75;
}

.partner-card small {
  margin-top: auto;
  padding-top: 28px;
  color: #52616f;
  font-size: 8px;
  letter-spacing: 0.14em;
}

.partner-cta {
  min-height: 104px;
  padding: 22px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border: 1px solid var(--line);
  border-top: 0;
  background: #09111a;
}

.partner-cta p {
  margin: 0;
  color: #9ba9b5;
  font-size: 13px;
}

.partner-cta a {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 700;
}

.partner-cta b {
  font-size: 20px;
}

.careers-section {
  overflow: hidden;
  border-top: 1px solid var(--line);
  background:
    linear-gradient(115deg, rgba(0, 168, 255, 0.07), transparent 42%),
    #0a121b;
}

.careers-layout {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 100px;
  align-items: center;
}

.careers-copy h2 {
  max-width: 730px;
  margin: 0;
  font-size: clamp(42px, 5vw, 74px);
  line-height: 1.04;
  letter-spacing: -0.055em;
}

.careers-copy > p:not(.section-kicker) {
  margin: 30px 0 38px;
  color: #91a0ae;
  font-size: 15px;
  line-height: 1.85;
}

.career-directions {
  border-top: 1px solid var(--line);
}

.career-directions article {
  padding: 22px 0;
  display: grid;
  grid-template-columns: 64px 1fr;
  border-bottom: 1px solid var(--line);
}

.career-directions article > span {
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
}

.career-directions strong {
  display: block;
  font-size: 16px;
}

.career-directions p {
  margin: 7px 0 0;
  color: #748391;
  font-size: 12px;
  line-height: 1.6;
}

.contact-section {
  position: relative;
  overflow: hidden;
  padding: 130px 0;
  background:
    radial-gradient(circle at 80% 50%, rgba(0, 168, 255, 0.12), transparent 35%),
    #06101a;
}

.contact-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 90px;
  align-items: center;
}

.contact-copy h2 {
  max-width: 700px;
  margin-bottom: 28px;
}

.direct-contact {
  margin-top: 38px;
  border-top: 1px solid var(--line);
}

.direct-contact a,
.direct-contact button,
.contact-address {
  width: 100%;
  padding: 17px 0;
  display: grid;
  grid-template-columns: 78px 1fr auto;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  background: transparent;
  text-align: left;
}

.direct-contact button {
  cursor: pointer;
}

.direct-contact span,
.contact-address span {
  color: var(--blue);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.direct-contact strong,
.contact-address strong {
  color: #dce5ec;
  font-size: 13px;
}

.contact-address strong {
  max-width: 560px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.65;
}

.direct-contact small {
  color: #647483;
  font-size: 9px;
}

.contact-form {
  padding: 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px 18px;
  border: 1px solid var(--line);
  background: rgba(6, 12, 18, 0.72);
  backdrop-filter: blur(14px);
}

.contact-form label {
  display: block;
}

.contact-form label > span {
  display: block;
  margin-bottom: 9px;
  color: #8fa0ae;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.full-field {
  grid-column: 1 / -1;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  outline: 0;
  color: white;
  background: transparent;
  border-radius: 0;
  transition: border-color 200ms ease;
}

.contact-form input {
  height: 43px;
}

.contact-form textarea {
  padding: 10px 0;
  resize: vertical;
}

.contact-form select {
  height: 46px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #7a8a97 50%), linear-gradient(135deg, #7a8a97 50%, transparent 50%);
  background-position: calc(100% - 14px) 20px, calc(100% - 9px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.contact-form select option {
  color: #101820;
  background: white;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: var(--blue);
}

.form-submit {
  justify-self: start;
  border: 0;
}

.form-note,
.form-success {
  margin: 0;
  align-self: center;
  color: #5f7180;
  font-size: 9px;
  line-height: 1.5;
}

.form-success {
  grid-column: 1 / -1;
  color: var(--lime);
}

.site-footer {
  padding: 60px 0 28px;
  border-top: 1px solid var(--line);
  background: #030609;
}

.footer-top,
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.footer-nav {
  display: flex;
  gap: 28px;
}

.footer-bottom {
  margin-top: 55px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: #566472;
  font-size: 9px;
  letter-spacing: 0.04em;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}

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

@media (min-width: 901px) {
  html[lang="zh-CN"] .hero-lede,
  html[lang="zh-CN"] .difference-heading > p,
  html[lang="zh-CN"] .section-heading > p,
  html[lang="zh-CN"] .product-copy > p:not(.product-label),
  html[lang="zh-CN"] .tech-cards p,
  html[lang="zh-CN"] .large-copy,
  html[lang="zh-CN"] .strategy-flow p,
  html[lang="zh-CN"] .platform-copy > p,
  html[lang="zh-CN"] .application-card p,
  html[lang="zh-CN"] .footprint-intro p,
  html[lang="zh-CN"] .region-list p,
  html[lang="zh-CN"] .partner-card p,
  html[lang="zh-CN"] .careers-copy > p:not(.section-kicker) {
    text-wrap: balance;
  }

  .applications-section .section-heading h2 {
    max-width: 680px;
  }
}

@media (max-width: 1120px) {
  .desktop-nav {
    display: none;
  }

  .site-header {
    grid-template-columns: 1fr auto;
  }

  .menu-toggle {
    display: block;
  }

  .mobile-menu {
    display: block;
  }

  .hero-content {
    grid-template-columns: 0.95fr 1.05fr;
  }

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

  .product-panel,
  .technology-stage,
  .strategy-platform {
    grid-template-columns: 1fr 1fr;
  }

  .product-copy,
  .platform-copy {
    padding: 52px 42px;
  }

  .app-layout,
  .global-layout {
    gap: 50px;
  }

  .footprint-heading {
    gap: 50px;
  }

  .pressure-foot-left { left: 18%; }
  .pressure-foot-right { right: 18%; }

  .application-card {
    padding: 26px;
  }
}

@media (max-width: 900px) {
  .container {
    width: min(calc(100% - 42px), var(--max));
  }

  .header-cta {
    display: none;
  }

  .section {
    padding: 100px 0;
  }

  .hero-content {
    padding-top: 130px;
    grid-template-columns: 1fr;
    align-content: center;
  }

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

  .hero-visual {
    min-height: 450px;
    margin-top: -30px;
  }

  .hero-visual img {
    width: min(76%, 560px);
  }

  .hero-bottom {
    display: none;
  }

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

  .metric-item:nth-child(3),
  .metric-item:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .section-heading {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 52px;
  }

  .difference-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .difference-grid {
    grid-template-columns: 1fr 56px 1fr;
  }

  .difference-card {
    padding: 30px;
  }

  .section-heading > p {
    max-width: 650px;
  }

  .product-panel,
  .technology-stage,
  .strategy-platform,
  .about-layout,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .product-copy,
  .tech-image-wrap,
  .platform-visual {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .product-copy {
    min-height: 530px;
  }

  .product-visual {
    min-height: 520px;
  }

  .technology-stage {
    min-height: 0;
  }

  .tech-image-wrap {
    min-height: 540px;
  }

  .app-layout {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 30px;
  }

  .app-phone {
    height: 650px;
  }

  .phone-tilt {
    height: 760px;
  }

  .strategy-flow {
    grid-template-columns: 1fr 1fr;
  }

  .flow-arrow {
    display: none;
  }

  .strategy-flow article {
    border-bottom: 1px solid var(--line);
  }

  .strategy-flow article:nth-child(3),
  .strategy-flow article:nth-child(7) {
    border-left: 1px solid var(--line);
  }

  .strategy-platform {
    grid-template-columns: 0.8fr 1.2fr;
  }

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

  .application-card.wide {
    grid-column: span 2;
  }

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

  .footprint-heading,
  .footprint-core {
    grid-template-columns: 1fr;
  }

  .footprint-heading {
    gap: 30px;
  }

  .footprint-intro {
    max-width: 720px;
  }

  .footprint-visual {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

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

  .map-wrap {
    min-height: 480px;
  }

  .about-layout {
    gap: 62px;
  }

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

  .careers-layout {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .about-image,
  .about-image img {
    min-height: 500px;
  }
}

@media (max-width: 620px) {
  :root {
    --header-h: 70px;
  }

  .container {
    width: min(calc(100% - 30px), var(--max));
  }

  .site-header {
    padding-inline: 15px;
  }

  .brand-copy strong {
    font-size: 11px;
  }

  .brand-symbol {
    width: 31px;
    height: 40px;
    flex-basis: 31px;
  }

  .brand-symbol img {
    width: 182px;
  }

  .brand-wordmark strong {
    font-size: 15px;
  }

  .brand-wordmark small {
    font-size: 6px;
  }

  .brand-copy small {
    display: none;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
  }

  .header-actions {
    gap: 4px;
  }

  .hero-content {
    padding-top: 118px;
    padding-bottom: 70px;
  }

  .hero h1 {
    font-size: clamp(48px, 14.5vw, 68px);
    line-height: 1.04;
  }

  .hero h1 em {
    margin-top: 0.22em;
    padding-right: 70px;
    letter-spacing: 0.13em;
  }

  .hero h1 em::after {
    width: 52px;
  }

  html[lang="en"] .hero h1 {
    max-width: 100%;
    font-size: clamp(42px, 11vw, 54px);
    line-height: 1;
    letter-spacing: -0.04em;
  }

  html[lang="en"] .hero h1 em {
    margin-top: 0.22em;
    padding-right: 0;
    font-size: 0.66em;
    letter-spacing: 0.01em;
  }

  .hero-lede {
    margin-top: 24px;
    font-size: 15px;
  }

  .hero-actions {
    margin-top: 28px;
  }

  .button {
    min-height: 50px;
    padding-inline: 18px;
  }

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

  .floating-metric {
    min-width: 108px;
    padding: 10px;
  }

  .metric-a { top: 9%; }
  .metric-b { bottom: 12%; }
  .metric-c { display: none; }

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

  .metric-item {
    min-width: 0;
    min-height: 150px;
    padding: 26px 18px 22px;
  }

  .metric-item p {
    font-size: 11px;
    white-space: nowrap;
  }

  /* 中文指标只有 10~12 字，nowrap 放得下；英文字数多得多，必须允许换行。
     否则 nowrap 会把 .metrics-grid 撑宽（body overflow-x:hidden 下被裁掉）。 */
  html[lang="en"] .metric-item p {
    white-space: normal;
  }

  .section {
    padding: 82px 0;
  }

  .difference-section {
    padding: 82px 0;
  }

  .difference-heading h2 {
    font-size: clamp(38px, 11vw, 54px);
  }

  .difference-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .difference-card {
    min-height: 0;
    padding: 30px 23px;
  }

  .difference-card h3 {
    margin-top: 46px;
  }

  .difference-connector {
    min-height: 40px;
    flex-direction: row;
  }

  .difference-connector span {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28));
  }

  .difference-connector span:last-child {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent);
  }

  .difference-note {
    flex-wrap: wrap;
  }

  .difference-note p {
    width: 100%;
    margin-left: 0;
  }

  .section-heading h2,
  .app-copy h2,
  .global-copy h2,
  .about-copy h2,
  .contact-copy h2 {
    font-size: clamp(38px, 11vw, 54px);
  }

  .product-tabs {
    grid-template-columns: 1fr;
  }

  .product-tab {
    min-height: 88px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .product-copy {
    min-height: 0;
    padding: 48px 25px;
  }

  .product-copy h3 {
    font-size: 40px;
  }

  .text-link {
    margin-top: 30px;
  }

  .product-visual {
    min-height: 390px;
  }

  .product-tilt {
    height: 390px;
  }

  .product-visual.walkpad .product-tilt {
    width: 48%;
    height: 390px;
  }

  .tech-image-wrap {
    min-height: 400px;
  }

  .tech-cards article {
    padding: 32px 25px;
  }

  .app-layout {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .app-phone {
    order: 2;
    height: 520px;
    overflow: hidden;
  }

  .phone-tilt {
    height: 650px;
  }

  .phone-tilt img {
    border-radius: 42px;
  }

  .interaction-hint {
    right: 15px;
    bottom: 13px;
    font-size: 8px;
  }

  .phone-hint {
    right: auto;
    bottom: 12px;
  }

  .app-copy {
    order: 1;
    padding-right: 0;
  }

  .app-feature-list article {
    grid-template-columns: 88px 1fr;
  }

  .strategy-flow {
    grid-template-columns: 1fr;
  }

  .strategy-flow article,
  .strategy-flow article:nth-child(3),
  .strategy-flow article:nth-child(7) {
    min-height: 210px;
    border-left: 0;
  }

  .strategy-flow h3 {
    margin-top: 34px;
  }

  .strategy-platform {
    grid-template-columns: 1fr;
  }

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

  .platform-copy {
    padding: 48px 25px;
  }

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

  .application-card,
  .application-card.wide {
    grid-column: span 1;
  }

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

  .application-card.wide img {
    min-height: 240px;
  }

  .map-wrap {
    min-height: 350px;
    margin-inline: -10px;
  }

  .footprint-heading h2 {
    font-size: clamp(38px, 11vw, 54px);
  }

  .footprint-primary-cta {
    width: 100%;
    justify-content: space-between;
  }

  .footprint-visual {
    min-height: 470px;
    padding: 20px;
  }

  .scan-frame {
    inset: 20px 15px 64px;
  }

  .pressure-foot {
    top: 75px;
    width: 104px;
    height: 310px;
    transform-origin: top center;
  }

  .pressure-foot-left {
    left: 13%;
    transform: rotate(-4deg) scale(0.78);
  }

  .pressure-foot-right {
    right: 13%;
    transform: rotate(4deg) scaleX(-1) scale(0.78);
  }

  @keyframes footprintScan {
    0%, 100% { transform: translateY(25px); opacity: 0.25; }
    50% { transform: translateY(330px); opacity: 0.95; }
  }

  .footprint-visual-meta {
    right: 20px;
    bottom: 24px;
    left: 20px;
  }

  .footprint-visual-meta span {
    display: none;
  }

  .footprint-prep {
    padding: 42px 23px;
  }

  .analysis-flow {
    padding: 18px 22px;
    grid-template-columns: 1fr;
  }

  .analysis-flow article {
    min-height: 55px;
    border-bottom: 1px solid var(--line);
  }

  .analysis-flow article:last-child {
    border-bottom: 0;
  }

  .analysis-flow > i {
    display: none;
  }

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

  .report-preview article {
    min-height: 210px;
    padding: 25px 22px;
  }

  .report-preview strong {
    margin-top: 48px;
  }

  .footprint-bottom {
    padding: 24px 22px;
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .map-pin b {
    display: none;
  }

  .about-image,
  .about-image img {
    min-height: 390px;
  }

  .founder-identity {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .about-caption {
    flex-direction: column;
  }

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

  .partner-card {
    min-height: 320px;
    padding: 28px 23px;
  }

  .partner-card h3 {
    margin-top: 58px;
  }

  .partner-cta {
    padding: 25px 22px;
    align-items: flex-start;
    flex-direction: column;
  }

  .partner-cta a {
    font-size: 13px;
  }

  .careers-copy h2 {
    font-size: clamp(38px, 11vw, 54px);
  }

  .career-directions article {
    grid-template-columns: 46px 1fr;
  }

  .direct-contact a,
  .direct-contact button,
  .contact-address {
    grid-template-columns: 64px 1fr auto;
  }

  .contact-address {
    grid-template-columns: 64px 1fr;
  }

  .contact-section {
    padding: 90px 0;
  }

  .contact-form {
    padding: 26px 20px;
    grid-template-columns: 1fr;
  }

  .full-field {
    grid-column: auto;
  }

  .form-success {
    grid-column: auto;
  }

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

  .footer-nav {
    flex-wrap: wrap;
  }
}

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

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Typography readability update · v20260928 */
@media (min-width: 621px) {
  .desktop-nav a, .footer-nav a { font-size: 15px; }
  .lang-toggle, .header-cta { font-size: 14px; }
  .hero h1 { font-size: clamp(63px, 6.55vw, 110px); }
  .hero-lede { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.82; }
  .section-heading h2, .difference-heading h2, .app-copy h2,
  .global-copy h2, .about-copy h2, .careers-copy h2,
  .contact-copy h2, .footprint-heading h2 { font-size: clamp(46px, 5.55vw, 84px); }
  .section-heading p, .difference-card p, .product-copy > p, .tech-cards p,
  .app-copy > p, .app-feature-list p, .strategy-flow p, .platform-copy p,
  .application-card p, .footprint-intro p, .footprint-prep p,
  .report-preview p, .global-copy p, .about-copy p, .partner-card p,
  .careers-copy p, .career-directions p, .contact-copy p { font-size: 17px; line-height: 1.82; }
  .product-copy h3 { font-size: 44px; }
  .difference-card h3, .tech-cards h3, .application-card h3,
  .partner-card h3, .career-directions h3 { font-size: 23px; }
  .button, .text-link { font-size: 15px; }
}

@media (max-width: 620px) {
  .hero h1 { font-size: clamp(52px, 15.2vw, 72px); }
  .hero-lede { font-size: 17px; line-height: 1.78; }
  .section-heading h2, .difference-heading h2, .app-copy h2,
  .global-copy h2, .about-copy h2, .careers-copy h2,
  .contact-copy h2, .footprint-heading h2 { font-size: clamp(41px, 11.6vw, 58px); }
  .section-heading p, .difference-card p, .product-copy > p, .tech-cards p,
  .app-copy > p, .app-feature-list p, .strategy-flow p, .platform-copy p,
  .application-card p, .footprint-intro p, .footprint-prep p,
  .report-preview p, .global-copy p, .about-copy p, .partner-card p,
  .careers-copy p, .career-directions p, .contact-copy p { font-size: 16px; line-height: 1.78; }
  .product-copy h3 { font-size: 43px; }
  .button, .text-link { font-size: 15px; }
  .metric-item p, .interaction-hint { font-size: 10px; }
}

/* ============================================================================
   Mobile app-phone visibility fix · v20261013-phonefit
   ----------------------------------------------------------------------------
   BUG: on phones the .app-phone wrapper was locked to height:520px with
   overflow:hidden, while the phone itself (.phone-tilt) is 650px tall. The
   bottom ~130px of the phone (and its run-report content) was silently cut off.
   FIX: let the wrapper grow and size the phone by width so it always fits
   fully inside the viewport with no clipping and no horizontal overflow.
   Applies only to the reported phone band (<=620px); tablet/desktop untouched.
   ========================================================================== */
@media (max-width: 620px) {
  .app-phone {
    height: auto;
    overflow: visible;
    padding-bottom: 46px; /* reserve room for the tilted + translated phone */
  }
  .phone-tilt {
    height: auto;
    width: min(88vw, 347px);
    max-width: 100%;
  }
}

/* ============================================================================
   Mobile hero product centering / occlusion fix · v20261013-herocenter
   ----------------------------------------------------------------------------
   BUG: .hero-visual img carried a desktop composition offset
   (transform: rotate(-3deg) translate(-70px, 4px), plus the productFloat
   keyframes hard-coding the same -70px). In the single-column phone hero that
   pushed the insole ~70px left of the visual centre, so its left edge was
   clipped by the viewport (up to ~16px at 390px) and the product looked
   off-centre. The two floating metric cards also sat on top of it.
   FIX: neutralise the horizontal offset on phones (keep the gentle float),
   bring the product back to true centre, cap its width so it can breathe, and
   lift the metric cards into the clear top/bottom strips so nothing covers it.
   Scoped to phones (<=620px); tablet / desktop composition is untouched.
   ========================================================================== */
@media (max-width: 620px) {
  .hero-visual {
    /* a phone's visual is too narrow for the two cards to clear the insole
       horizontally, so give it responsive extra height and let the cards sit in
       clear top/bottom strips instead. 96vw tracks the product height. */
    min-height: clamp(340px, 96vw, 402px);
  }
  .hero-visual img {
    width: min(70%, 325px); /* true centre + a little breathing room */
    transform: rotate(-3deg);
    animation-name: productFloatC;
  }
  .metric-a { top: 2%; }
  .metric-b { bottom: 2%; }
}

@keyframes productFloatC {
  0%, 100% { transform: rotate(-3deg) translateY(4px); }
  50% { transform: rotate(-1deg) translateY(-10px); }
}

/* ==========================================================================
   Mobile menu typography fix · v20261013-menufont
   ----------------------------------------------------------------------------
   BUG: .mobile-menu a used clamp(28px, 9vw, 44px) — a desktop-ish display
   scale. On a 390px phone that computes to 35.1px: each row is 82px tall,
   and with the 120px top padding the 9 rows ran to 858px, so the last item
   (预约演示 / Request Demo) was pushed off-screen and the type looked far
   too large for a nav list. Applies to both 中 / EN (same rule).
   FIX: shrink the menu link type by exactly 40% (× 0.6):
     clamp(28px, 9vw, 44px)  ->  clamp(16.8px, 5.4vw, 26.4px)
   Row height drops to ~59px and the full list fits comfortably.
   Scoped to phones (<=620px); the 621-1120px tablet band keeps its original
   clamp(28px, 9vw, 44px) scale (not reported, left untouched).
   ========================================================================== */
@media (max-width: 620px) {
  .mobile-menu a {
    font-size: clamp(16.8px, 5.4vw, 26.4px); /* exactly -40% of the original */
  }

  /* Short-viewport guard (e.g. 320x568 iPhone SE): with the smaller type the
     list fits from 360px up, but very short screens still run past the fold.
     The overlay is position:fixed, so make it scrollable instead of clipping. */
  .mobile-menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================================
   Scene 06 · GLOBAL VALIDATION — Shenzhen pin + one-step bigger type
                                        · v20261016-global1
   ----------------------------------------------------------------------------
   1) MAP: adds a fourth marker, SHENZHEN, next to the existing SUZHOU one so
      the map matches the region list (Suzhou = manufacturing, Shenzhen = R&D
      and product development).
      Position was NOT eyeballed: the map is an equirectangular world map, and
      its lon/lat -> px transform was solved from the artwork itself
      (x = 713.5 + 4.0534·lon, y = 484.71 - 4.0565·lat, fitted on Cape
      Agulhas / Dakar / Cape Dezhnev / Stepper Point / Cape Byron / Taiwan,
      all within ~5px). Shenzhen (114.06E, 22.54N) therefore lands on
        1500x744 image px  ->  (1175.8, 393.3)  =  (78.39%, 52.86%)
      with Hong Kong 1px away over the water, i.e. exactly on the coastline.
   2) TYPE: every text size inside the section is raised by one step (+1px).
      The section headline (.global-copy h2) is deliberately left untouched.
   Scoped to .global-section, so no other module on the site is affected.
   ========================================================================== */

/* ---- 1. SHENZHEN marker -------------------------------------------------- */
.map-pin.pin-sz {
  left: 77.88%;
  top: 50.83%;
}

/* ---- 2. one step bigger type (headline excepted) ------------------------- */
/* Every rule below is exactly +1px over what the page ACTUALLY renders today,
   not over the base declaration. Two traps this has to clear:
   (a) The "06 / GLOBAL VALIDATION" kicker is a direct-child <p> of
       .global-copy, so it is sized by .global-copy p (the v20260928 pass),
       not by the base .section-kicker rule.
   (b) .region-list p declares 12px, but .region-list sits INSIDE .global-copy,
       so the later v20260928 rule ".global-copy p { 17px }" wins on equal
       specificity -- the description really renders at 17px, not 12px.
       Sizing it to 13px would have SHRUNK it, so it becomes 18px instead.
   line-height is left alone: the same v20260928 rule also sets 1.82, which is
   what the rows already use. */
.global-section .region-list article > span { font-size: 12px; } /* 11 -> 12 */
.global-section .region-list strong { font-size: 15px; }         /* 14 -> 15 */
.global-section .map-pin { font-size: 9px; }                     /*  8 ->  9 */

@media (min-width: 621px) {
  .global-section .global-copy > p { font-size: 18px; }   /* 17 -> 18, kicker + intro */
  .global-section .region-list p  { font-size: 18px; }   /* 17 -> 18 (see note b) */
}

@media (max-width: 620px) {
  .global-section .global-copy > p { font-size: 17px; }  /* 16 -> 17 */
  .global-section .region-list p  { font-size: 17px; }  /* 16 -> 17 */
}

/* ===================================================================
   v20261016-zh-en1 · 回退为「中 / EN」双语（需求变更：产品站不需要日语）
   -------------------------------------------------------------------
   原先 v20261016-tri1 为日语补充的「日语专属排版规则」已整块移除。
   页面不再提供日语入口（右上角切换器只有「中 / EN」），HTML 里也没有
   data-ja 属性，lang="ja" 不会再出现，那些规则已是死代码。
   文末的「长字符串兜底」与具体语言无关 —— 中日英下都能防止窄屏把容器
   撑破（.hero h1 em 基础规则是 width:max-content），故保留。
   =================================================================== */

/* ---- 长字符串兜底：任何语言都不要在窄屏把容器撑破 ------------------ */
.hero-copy,
.hero h1,
.hero h1 span,
.hero h1 em {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ===========================================================================
   v20261016-fontup1 · 产品站全站字号放大一号（大标题除外）
   仅对「纯 px、<28px、非大标题(h1/h2/product-copy h3)、非 clamp/calc 函数」的规则 +1px;
   @media 上下文原样保留，桌面与响应式同时放大。块置于文件末尾、与原选择器同特异性，靠层叠顺序取胜；
   删除本块即可回退。
   =========================================================================== */
.fontup1-sentinel-20261016 { --fontup1: 1; }
.brand-wordmark strong { font-size: 19px; }
.brand-wordmark small { font-size: 8px; }
.brand-copy strong { font-size: 14px; }
.brand-copy small { font-size: 10px; }
.desktop-nav a, .footer-nav a { font-size: 14px; }
.lang-toggle { font-size: 12px; }
.header-cta { font-size: 13px; }
.menu-close { font-size: 17px; }
.eyebrow, .section-kicker, .product-label, .platform-label { font-size: 12px; }
.button { font-size: 14px; }
.button-arrow { font-size: 19px; }
.floating-metric span { font-size: 10px; }
.floating-metric strong { font-size: 17px; }
.hero-bottom { font-size: 10px; }
.difference-heading > p { font-size: 16px; }
.difference-label { font-size: 11px; }
.difference-card li { font-size: 13px; }
.difference-connector b { font-size: 17px; }
.difference-note { font-size: 10px; }
.difference-note p { font-size: 12px; }
.metric-item p { font-size: 13px; }
.section-heading > p, .global-copy > p, .contact-copy > p { font-size: 16px; }
.product-tab > span { font-size: 12px; }
.product-tab strong { font-size: 28px; }
.product-tab small { font-size: 12px; }
.product-copy > p:not(.product-label) { font-size: 16px; }
.product-copy li { font-size: 14px; }
.text-link { font-size: 14px; }
.interaction-hint { font-size: 10px; }
.data-chip span { font-size: 10px; }
.data-chip strong { font-size: 13px; }
.tech-cards span { font-size: 10px; }
.tech-cards h3 { font-size: 25px; }
.tech-cards p { font-size: 14px; }
.app-feature-list strong { font-size: 13px; }
.app-feature-list span { font-size: 15px; }
.flow-index { font-size: 12px; }
.strategy-flow h3 { font-size: 22px; }
.strategy-flow p { font-size: 13px; }
.platform-copy > p:not(.platform-label) { font-size: 16px; }
.platform-tags span { font-size: 10px; }
.application-card > span, .application-card > div > span { font-size: 11px; }
.application-card h3 { font-size: 26px; }
.application-card p { font-size: 14px; }
.region-list article > span { font-size: 12px; }
.region-list strong { font-size: 15px; }
.region-list p { font-size: 13px; }
.map-pin { font-size: 9px; }
.footprint-intro p { font-size: 15px; }
.scan-label, .analysis-status { font-size: 9px; }
.footprint-visual-meta { font-size: 9px; }
.micro-label { font-size: 10px; }
.prep-list article > span { font-size: 10px; }
.prep-list strong { font-size: 16px; }
.prep-list p { font-size: 13px; }
.analysis-flow article span { font-size: 10px; }
.analysis-flow article strong { font-size: 13px; }
.report-preview article > span { font-size: 9px; }
.report-preview strong { font-size: 19px; }
.report-preview p { font-size: 12px; }
.footprint-bottom p { font-size: 11px; }
.footprint-bottom a { font-size: 13px; }
.about-caption span { font-size: 10px; }
.about-caption strong { font-size: 13px; }
.founder-identity strong { font-size: 19px; }
.founder-identity span { font-size: 11px; }
.company-dual span { font-size: 10px; }
.company-dual strong { font-size: 13px; }
.partner-card > span { font-size: 11px; }
.partner-card h3 { font-size: 26px; }
.partner-card p { font-size: 14px; }
.partner-card small { font-size: 9px; }
.partner-cta p { font-size: 14px; }
.partner-cta a { font-size: 16px; }
.partner-cta b { font-size: 21px; }
.careers-copy > p:not(.section-kicker) { font-size: 16px; }
.career-directions article > span { font-size: 11px; }
.career-directions strong { font-size: 17px; }
.career-directions p { font-size: 13px; }
.direct-contact span, .contact-address span { font-size: 10px; }
.direct-contact strong, .contact-address strong { font-size: 14px; }
.contact-address strong { font-size: 12px; }
.direct-contact small { font-size: 10px; }
.contact-form label > span { font-size: 11px; }
.form-note, .form-success { font-size: 10px; }
.footer-bottom { font-size: 10px; }
.global-section .region-list article > span { font-size: 13px; }
.global-section .region-list strong { font-size: 16px; }
.global-section .map-pin { font-size: 10px; }
@media (max-width: 620px) {
  .brand-copy strong { font-size: 12px; }
  .brand-wordmark strong { font-size: 16px; }
  .brand-wordmark small { font-size: 7px; }
  .hero-lede { font-size: 16px; }
  .metric-item p { font-size: 12px; }
  .interaction-hint { font-size: 9px; }
  .partner-cta a { font-size: 14px; }
  .hero-lede { font-size: 18px; }
  .section-heading p, .difference-card p, .product-copy > p, .tech-cards p, .app-copy > p, .app-feature-list p, .strategy-flow p, .platform-copy p, .application-card p, .footprint-intro p, .footprint-prep p, .report-preview p, .global-copy p, .about-copy p, .partner-card p, .careers-copy p, .career-directions p, .contact-copy p { font-size: 17px; }
  .button, .text-link { font-size: 16px; }
  .metric-item p, .interaction-hint { font-size: 11px; }
  .global-section .global-copy > p { font-size: 18px; }
  .global-section .region-list p { font-size: 18px; }
}
@media (min-width: 621px) {
  .desktop-nav a, .footer-nav a { font-size: 16px; }
  .lang-toggle, .header-cta { font-size: 15px; }
  .section-heading p, .difference-card p, .product-copy > p, .tech-cards p, .app-copy > p, .app-feature-list p, .strategy-flow p, .platform-copy p, .application-card p, .footprint-intro p, .footprint-prep p, .report-preview p, .global-copy p, .about-copy p, .partner-card p, .careers-copy p, .career-directions p, .contact-copy p { font-size: 18px; }
  .difference-card h3, .tech-cards h3, .application-card h3, .partner-card h3, .career-directions h3 { font-size: 24px; }
  .button, .text-link { font-size: 16px; }
  .global-section .global-copy > p { font-size: 19px; }
  .global-section .region-list p { font-size: 19px; }
}