:root {
  --ink: #080b0f;
  --graphite: #10151b;
  --graphite-2: #171e25;
  --steel: #27313b;
  --paper: #f4f6f7;
  --white: #ffffff;
  --text: #131920;
  --muted: #64707c;
  --line: #d8dde1;
  --line-dark: rgba(255, 255, 255, .14);
  --cyan: #35d8ff;
  --cyan-2: #1479ff;
  --lime: #2f7dff;
  --nebula-blue: #1479ff;
  --nebula-bright: #52a8ff;
  --signal-violet: #7868ff;
  --amber: #35d8ff;
  --danger: #ff6557;
  --container: 1320px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --cursor-x: 50vw;
  --cursor-y: 50vh;
}

/* ==========================================================
   V0.23 — Star Domain partner programme
   ========================================================== */

.star-nowrap {
  display: inline-block;
  white-space: nowrap;
}

body[data-page="partners"] .page-hero-action {
  width: fit-content;
  min-height: 48px;
  margin-top: 24px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #4075f6;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(40, 120, 255, .3);
  text-decoration: none;
  font-size: 13px;
  font-weight: 720;
  transition: transform .28s var(--ease), background .28s ease, box-shadow .28s ease;
}

body[data-page="partners"] .page-hero-action:hover,
body[data-page="partners"] .page-hero-action:focus-visible {
  color: #fff;
  background: #5688ff;
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(40, 120, 255, .4);
}

.star-plan-shell {
  --star-blue: #4075f6;
  --star-cyan: #64d7ff;
  --star-violet: #6864ff;
  --star-ink: #071426;
  color: #f4f9ff;
  background: #030a16;
  overflow: hidden;
}

.star-plan-shell .section { position: relative; padding: clamp(92px, 9vw, 148px) 0; }
.star-program-intro {
  border-top: 1px solid rgba(117, 185, 255, .12);
  border-bottom: 1px solid rgba(117, 185, 255, .12);
  background:
    radial-gradient(circle at 14% 12%, rgba(64, 117, 246, .13), transparent 30%),
    linear-gradient(135deg, #030a16 0%, #061224 55%, #080e24 100%);
}
.star-program-intro::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(24px, calc((100% - min(var(--container), calc(100% - 48px))) / 2));
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(100, 215, 255, .44), transparent);
  pointer-events: none;
}
.star-program-intro-layout {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(560px, 1.28fr);
  gap: clamp(64px, 8vw, 138px);
  align-items: start;
}
.star-program-intro-heading { position: relative; padding-left: 34px; }
.star-program-intro-heading > span {
  color: var(--star-cyan);
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: .16em;
}
.star-program-intro-heading h2 {
  margin: 20px 0 0;
  color: #f5f9ff;
  font-size: clamp(38px, 3.8vw, 60px);
  font-weight: 720;
  line-height: 1.1;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.star-program-intro-heading i {
  width: 72px;
  height: 2px;
  margin-top: 34px;
  display: block;
  background: linear-gradient(90deg, var(--star-blue), var(--star-cyan));
  box-shadow: 0 0 22px rgba(100, 215, 255, .35);
}
.star-program-intro-copy { max-width: 800px; }
.star-program-intro-copy p {
  margin: 0;
  padding: 0 0 28px;
  color: rgba(226, 238, 252, .72);
  font-size: clamp(15px, 1.12vw, 17px);
  line-height: 2;
}
.star-program-intro-copy p + p {
  padding-top: 28px;
  border-top: 1px solid rgba(140, 196, 255, .13);
}
.star-program-intro-copy p:last-child { padding-bottom: 0; }
.star-program-intro-copy p:first-child { color: rgba(244, 249, 255, .9); }
.star-eyebrow,
.star-section-heading > span {
  display: block;
  color: #55cef9;
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: .16em;
}

.star-section-heading { max-width: 820px; }
.star-section-heading h2,
.star-model-copy h2 {
  margin-top: 18px;
  color: inherit;
  font-size: clamp(38px, 4.2vw, 66px);
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.star-model-copy h2 { font-size: clamp(38px, 3.7vw, 60px); }
.star-model-copy h2 > span { display: block; white-space: nowrap; }
.star-section-heading > p {
  max-width: 720px;
  margin-top: 20px;
  color: inherit;
  font-size: 15px;
  line-height: 1.85;
  opacity: .66;
}

.star-model-section {
  min-height: 760px;
  background:
    radial-gradient(circle at 75% 44%, rgba(59, 115, 255, .22), transparent 31%),
    radial-gradient(circle at 83% 30%, rgba(92, 78, 255, .12), transparent 28%),
    linear-gradient(135deg, #020813, #07162c 58%, #091a35);
}
.star-model-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image:
    linear-gradient(rgba(124, 189, 239, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 189, 239, .12) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, transparent 8%, #000 54%, transparent 100%);
}
.star-model-layout {
  position: relative;
  z-index: 1;
  min-height: 540px;
  display: grid;
  grid-template-columns: minmax(360px, .78fr) minmax(650px, 1.22fr);
  gap: clamp(50px, 7vw, 110px);
  align-items: center;
}
.star-model-copy { max-width: 580px; }
.star-model-copy > p {
  max-width: 570px;
  margin-top: 28px;
  color: rgba(225, 238, 251, .67);
  font-size: 15px;
  line-height: 1.9;
}
.star-primary-action {
  width: fit-content;
  min-height: 50px;
  margin-top: 36px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  color: #fff;
  background: var(--star-blue);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 6px;
  box-shadow: 0 16px 36px rgba(40, 120, 255, .24);
  text-decoration: none;
  font-size: 13px;
  font-weight: 720;
  transition: transform .28s var(--ease), background .28s ease, box-shadow .28s ease;
}
.star-primary-action:hover,
.star-primary-action:focus-visible { transform: translateY(-3px); background: #5788ff; box-shadow: 0 22px 46px rgba(40, 120, 255, .34); }

.star-orbit {
  position: relative;
  min-width: 0;
  height: 570px;
  isolation: isolate;
}
.star-orbit::before {
  content: "";
  position: absolute;
  inset: 5% 2% 1%;
  z-index: -2;
  background:
    radial-gradient(circle at center, rgba(77, 125, 255, .24), transparent 24%),
    radial-gradient(ellipse at center, rgba(100, 215, 255, .07), transparent 68%);
  filter: blur(.1px);
}
.star-orbit::after {
  content: "";
  position: absolute;
  inset: 10%;
  z-index: -1;
  opacity: .48;
  background-image: radial-gradient(circle, rgba(151, 218, 255, .8) 0 1px, transparent 1.5px);
  background-size: 29px 29px;
  mask-image: radial-gradient(ellipse, #000, transparent 72%);
}
.star-orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(100, 215, 255, .27);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-11deg);
  box-shadow: inset 0 0 40px rgba(66, 120, 255, .06), 0 0 32px rgba(66, 120, 255, .06);
}
.star-orbit-ring::after {
  content: "";
  position: absolute;
  top: 14%;
  left: 9%;
  width: 8px;
  height: 8px;
  background: var(--star-cyan);
  border-radius: 50%;
  box-shadow: 0 0 18px 5px rgba(100, 215, 255, .5);
  animation: starNodePulse 3.8s ease-in-out infinite;
}
.star-orbit-ring-a { width: 88%; height: 58%; }
.star-orbit-ring-b { width: 66%; height: 88%; transform: translate(-50%, -50%) rotate(54deg); border-color: rgba(115, 109, 255, .24); }
.star-orbit-ring-b::after { top: auto; right: 15%; bottom: 9%; left: auto; background: #7771ff; box-shadow: 0 0 18px 5px rgba(119, 113, 255, .45); animation-delay: -1.8s; }

.star-orbit-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 214px;
  height: 214px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(circle at 40% 30%, rgba(111, 211, 255, .28), transparent 36%),
    linear-gradient(145deg, rgba(19, 63, 116, .98), rgba(10, 25, 54, .98));
  border: 1px solid rgba(128, 216, 255, .66);
  border-radius: 50%;
  box-shadow: 0 0 0 16px rgba(84, 150, 255, .045), 0 0 72px rgba(64, 117, 246, .32), inset 0 0 30px rgba(100, 215, 255, .11);
  transform: translate(-50%, -50%);
}
.star-orbit-core small { color: #7addff; font-size: 9px; letter-spacing: .14em; }
.star-orbit-core strong { max-width: 150px; margin-top: 12px; color: #fff; font-size: 23px; line-height: 1.35; }
.star-orbit-core i { width: 38px; height: 2px; margin-top: 18px; background: linear-gradient(90deg, transparent, #63d8ff, transparent); box-shadow: 0 0 12px #63d8ff; }

.star-orbit-node {
  position: absolute;
  width: 236px;
  min-height: 124px;
  padding: 20px 22px;
  background: rgba(5, 19, 40, .84);
  border: 1px solid rgba(120, 193, 255, .28);
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
}
.star-orbit-node::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22px;
  width: 52px;
  height: 2px;
  background: linear-gradient(90deg, #64d7ff, transparent);
}
.star-orbit-node > span { color: #5dd5ff; font-size: 8px; font-weight: 760; letter-spacing: .14em; }
.star-orbit-node h3 { margin-top: 9px; color: #fff; font-size: 18px; }
.star-orbit-node p { margin-top: 7px; color: rgba(221, 237, 251, .58); font-size: 11px; line-height: 1.5; }
.star-orbit-customer { top: 2%; left: 37%; }
.star-orbit-partner { top: 40%; right: 0; }
.star-orbit-weida { right: 51%; bottom: 0; }

.star-support-section {
  color: #10263a;
  background:
    radial-gradient(circle at 84% 8%, rgba(64, 117, 246, .12), transparent 29%),
    linear-gradient(180deg, #f4f8fc, #eaf2f9);
}
.star-support-section .star-section-heading > span,
.star-types-section .star-section-heading > span { color: #2878ff; }
.star-support-grid { margin-top: 54px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.star-support-card {
  min-width: 0;
  min-height: 480px;
  padding: 18px 18px 30px;
  display: flex;
  flex-direction: column;
  color: #10263a;
  background: rgba(255, 255, 255, .86);
  border: 1px solid #c9d9e5;
  border-radius: 14px;
  box-shadow: 0 20px 46px rgba(36, 69, 100, .08);
  transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
}
.star-support-card:hover { transform: translateY(-5px); border-color: rgba(40, 120, 255, .48); box-shadow: 0 28px 62px rgba(36, 79, 120, .14); }
.star-support-visual {
  position: relative;
  height: 190px;
  margin-bottom: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 38%, rgba(85, 205, 255, .24), transparent 30%),
    linear-gradient(145deg, #07172e, #0d2d57);
  border-radius: 10px;
}
.star-support-visual::before,
.star-support-visual::after { content: ""; position: absolute; border: 1px solid rgba(101, 214, 255, .28); }
.star-support-visual::before { inset: 30px 52px; transform: skewY(-8deg); box-shadow: 0 0 26px rgba(88, 178, 255, .18); }
.star-support-visual::after { inset: 53px 80px; background: rgba(64, 117, 246, .14); }
.star-support-visual > i { position: absolute; z-index: 2; width: 9px; height: 9px; background: #65d9ff; border-radius: 50%; box-shadow: 0 0 14px #65d9ff; }
.star-support-visual > i:nth-child(1) { top: 32px; left: 50px; }
.star-support-visual > i:nth-child(2) { top: 92px; right: 64px; }
.star-support-visual > i:nth-child(3) { bottom: 28px; left: 42%; }
.star-support-visual > span { position: absolute; right: 25px; bottom: 19px; left: 25px; height: 1px; background: linear-gradient(90deg, transparent, rgba(101, 217, 255, .74), transparent); }
.star-support-card[data-star-support="training"] .star-support-visual::before { inset: 30px 105px; border-radius: 50%; transform: none; box-shadow: 0 0 0 24px rgba(89, 155, 255, .08), 0 0 0 48px rgba(89, 155, 255, .04); }
.star-support-card[data-star-support="training"] .star-support-visual::after { inset: 78px 133px; border-radius: 50%; background: #5dd7ff; box-shadow: 0 0 24px rgba(93, 215, 255, .65); }
.star-support-card[data-star-support="market"] .star-support-visual::before { inset: 64px 58px; border: 0; border-top: 1px solid rgba(101, 217, 255, .45); transform: none; }
.star-support-card[data-star-support="market"] .star-support-visual::after { inset: 28px 38px; border-radius: 50%; background: transparent; transform: rotate(-12deg); }
.star-support-card h3 { padding: 0 12px; color: #10263a; font-size: 25px; line-height: 1.25; }
.star-support-card > p { padding: 0 12px; margin-top: 14px; color: #526b80; font-size: 13px; line-height: 1.75; }
.star-support-card > div:last-child { margin-top: auto; padding: 24px 12px 0; display: flex; flex-wrap: wrap; gap: 7px; }
.star-support-card > div:last-child span { padding: 6px 8px; color: #315f8a; background: #f2f7fb; border: 1px solid #d5e2ec; border-radius: 999px; font-size: 9px; }

.star-benefit-section {
  background:
    radial-gradient(circle at 10% 52%, rgba(56, 130, 255, .18), transparent 30%),
    linear-gradient(115deg, #051120, #0a2343 62%, #111d45);
}
.star-benefit-layout { display: grid; grid-template-columns: minmax(320px, .65fr) minmax(620px, 1.35fr); gap: clamp(70px, 10vw, 160px); align-items: start; }
.star-benefit-layout .star-section-heading h2 { font-size: clamp(36px, 3.25vw, 52px); }
.star-benefit-layout .star-section-heading h2 > span { display: block; white-space: nowrap; }
.star-benefit-list { border-top: 1px solid rgba(135, 196, 242, .28); }
.star-benefit-list article { position: relative; min-height: 148px; padding: 30px 12px 30px 48px; border-bottom: 1px solid rgba(135, 196, 242, .2); }
.star-benefit-list article > i { position: absolute; top: 42px; left: 0; width: 19px; height: 19px; border: 1px solid #65d9ff; border-radius: 50%; }
.star-benefit-list article > i::before { content: ""; position: absolute; top: 5px; left: 5px; width: 7px; height: 7px; background: #65d9ff; border-radius: 50%; box-shadow: 0 0 12px #65d9ff; }
.star-benefit-list h3 { color: #fff; font-size: clamp(25px, 2.1vw, 34px); line-height: 1.25; }
.star-benefit-list p { margin-top: 10px; color: rgba(220, 236, 250, .58); font-size: 13px; line-height: 1.7; }

.star-types-section {
  color: #10263a;
  background:
    radial-gradient(circle at 94% 28%, rgba(89, 98, 255, .1), transparent 27%),
    #f5f8fb;
}
.star-type-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.star-type-card {
  min-width: 0;
  color: #10263a;
  background: #fff;
  border: 1px solid #cbd9e4;
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(35, 69, 97, .07);
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.star-type-card figure { position: relative; height: 220px; margin: 0; overflow: hidden; background: #061426; }
.star-type-card figure span { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(2, 9, 20, .54)); }
.star-type-card img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .6s var(--ease); }
.star-type-card > div { position: relative; min-height: 205px; padding: 26px 25px 30px; }
.star-type-card h3 { max-width: 250px; color: #10263a; font-size: 21px; line-height: 1.35; word-break: keep-all; overflow-wrap: normal; }
.star-type-card p { margin-top: 14px; color: #526b80; font-size: 12px; line-height: 1.75; }
.star-type-card > div > i { position: absolute; right: 24px; bottom: 23px; color: #2878ff; font-style: normal; }
.star-type-card:hover { border-color: rgba(40, 120, 255, .48); box-shadow: 0 24px 56px rgba(35, 75, 115, .13); }
.star-type-card:hover img { transform: scale(1.045); }

.star-process-section { background: linear-gradient(180deg, #061324, #030a16); }
.star-process-list { margin: 58px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; border-top: 1px solid rgba(128, 191, 238, .24); }
.star-process-list li { position: relative; min-height: 240px; padding: 28px 28px 34px 0; border-bottom: 1px solid rgba(128, 191, 238, .17); }
.star-process-list li + li { padding-left: 28px; border-left: 1px solid rgba(128, 191, 238, .17); }
.star-process-list li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: #64d7ff; border-radius: 50%; box-shadow: 0 0 15px rgba(100, 215, 255, .76); }
.star-process-list li + li::before { left: 28px; }
.star-process-list > li > span { color: #64d7ff; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.star-process-list h3 { margin-top: 52px; color: #fff; font-size: 24px; }
.star-process-list p { margin-top: 14px; color: rgba(220, 236, 249, .55); font-size: 12px; line-height: 1.75; }

.star-cta-section { padding-top: 0 !important; background: #030a16; }
.star-cta-card {
  position: relative;
  min-height: 350px;
  padding: clamp(55px, 6vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 50px;
  background:
    radial-gradient(circle at 82% 20%, rgba(100, 215, 255, .22), transparent 27%),
    radial-gradient(circle at 96% 84%, rgba(104, 100, 255, .28), transparent 34%),
    linear-gradient(125deg, #0a2750, #0a1834 60%, #171542);
  border: 1px solid rgba(111, 193, 255, .35);
  border-radius: 18px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .32);
  overflow: hidden;
}
.star-cta-card > div:first-child { position: relative; z-index: 2; }
.star-cta-card span { color: #6ee0ff; font-size: 10px; font-weight: 760; letter-spacing: .16em; }
.star-cta-card h2 { margin-top: 18px; color: #fff; font-size: clamp(40px, 4.7vw, 72px); line-height: 1; letter-spacing: -.045em; }
.star-cta-card p { margin-top: 22px; color: rgba(226, 239, 252, .66); font-size: 16px; }
.star-cta-card > a { position: relative; z-index: 2; min-height: 58px; padding: 0 26px; display: inline-flex; align-items: center; gap: 52px; color: #071426; background: #fff; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 760; transition: transform .28s var(--ease), box-shadow .28s ease; }
.star-cta-card > a i { color: #2878ff; font-style: normal; }
.star-cta-card > a:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(0, 0, 0, .25); }
.star-cta-orbits { position: absolute; right: -150px; bottom: -230px; width: 680px; height: 680px; pointer-events: none; }
.star-cta-orbits i { position: absolute; inset: 10%; border: 1px solid rgba(113, 208, 255, .16); border-radius: 50%; }
.star-cta-orbits i:nth-child(2) { inset: 24%; border-color: rgba(122, 118, 255, .23); }
.star-cta-orbits i:nth-child(3) { inset: 39%; background: rgba(86, 160, 255, .08); border-color: rgba(113, 208, 255, .28); }

@keyframes starNodePulse {
  0%, 100% { opacity: .55; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

@media (max-width: 1200px) {
  .star-model-layout { grid-template-columns: .8fr 1.2fr; }
  .star-orbit { transform: scale(.88); transform-origin: center; }
  .star-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .star-program-intro-layout { grid-template-columns: 1fr; gap: 48px; }
  .star-program-intro-heading { padding-left: 24px; }
  .star-model-layout,
  .star-benefit-layout { grid-template-columns: 1fr; }
  .star-orbit { width: min(720px, 100%); margin-inline: auto; transform: scale(.8); }
  .star-support-grid,
  .star-process-list { grid-template-columns: 1fr; }
  .star-process-list li + li { padding-left: 0; border-left: 0; }
  .star-process-list li + li::before { left: 0; }
  .star-cta-card { grid-template-columns: 1fr; }
  .star-cta-card > a { width: fit-content; }
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

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

body {
  margin: 0;
  color: var(--text);
  background: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  line-height: 1.65;
  overflow-x: visible;
  text-rendering: optimizeLegibility;
}

body::after {
  content: "";
  position: fixed;
  left: var(--cursor-x);
  top: var(--cursor-y);
  width: 360px;
  height: 360px;
  border: 1px solid rgba(36, 215, 242, .08);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
  opacity: .65;
  transition: width .3s ease, height .3s ease;
}

body.menu-open {
  overflow: hidden;
}

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

button,
input,
textarea {
  color: inherit;
  font: inherit;
}

button {
  padding: 0;
}

.skip-link {
  position: fixed;
  z-index: 10001;
  top: 12px;
  left: 12px;
  padding: 11px 16px;
  color: #fff;
  background: #2878ff;
  border: 1px solid #64d7ff;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

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

figure,
h1,
h2,
h3,
p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

.container {
  width: min(var(--container), calc(100% - 80px));
  margin: 0 auto;
}

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

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cyan-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.section-label::before {
  content: "";
  width: 20px;
  height: 2px;
  background: currentColor;
}

.section-heading {
  max-width: 850px;
  margin-bottom: 60px;
}

.section-heading h2 {
  margin-top: 20px;
  color: var(--text);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
}

.section-heading p {
  max-width: 720px;
  margin-top: 22px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.85;
}

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--delay, 0ms);
}

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

.scroll-progress {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 200;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left center;
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  transition: background .35s ease, height .35s ease, box-shadow .35s ease;
}

.site-header.scrolled {
  background: rgba(8, 11, 15, .92);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
  backdrop-filter: blur(18px);
}

.topbar {
  width: min(1440px, calc(100% - 48px));
  height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
  transition: height .35s ease;
}

.site-header.scrolled .topbar {
  height: 64px;
}

.brand {
  width: 165px;
  flex: 0 0 auto;
}

.brand img {
  width: 100%;
  height: 40px;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
}

.main-nav {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  height: 100%;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: stretch;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 13px;
  color: rgba(255, 255, 255, .74);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  transition: color .2s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: -1px;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s var(--ease);
}

.nav-link:hover,
.nav-link.active {
  color: var(--white);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

.mega {
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  width: 680px;
  padding: 20px;
  color: var(--text);
  background: rgba(255, 255, 255, .98);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(12px);
  transition: opacity .2s ease, transform .3s var(--ease), visibility .2s ease;
}

.nav-item:hover .mega,
.nav-item:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  padding: 0 4px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mega-head a {
  color: var(--cyan-2);
}

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

.mega-grid > a {
  padding: 11px 10px;
  border-left: 2px solid transparent;
  transition: background .2s ease, border-color .2s ease;
}

.mega-grid > a:hover {
  background: #f2f6f7;
  border-color: var(--cyan-2);
}

.mega-grid strong,
.mega-grid span {
  display: block;
}

.mega-grid strong {
  font-size: 14px;
}

.mega-grid span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

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

.cloud-link {
  color: rgba(255, 255, 255, .74);
  font-size: 13px;
  font-weight: 650;
}

.cloud-link span {
  color: var(--lime);
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 40px;
  color: var(--ink);
  background: var(--lime);
  font-size: 13px;
  font-weight: 800;
  transition: transform .25s var(--ease), background .25s ease;
}

.header-cta:hover {
  background: var(--cyan);
  transform: translateY(-2px);
}

.menu-btn {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: transparent;
  cursor: pointer;
}

.menu-btn span {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform .25s ease, top .25s ease;
}

.menu-btn span:first-child { top: 16px; }
.menu-btn span:last-child { top: 24px; }
.menu-btn.open span:first-child { top: 20px; transform: rotate(45deg); }
.menu-btn.open span:last-child { top: 20px; transform: rotate(-45deg); }

.mobile-drawer {
  display: none;
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-width: 184px;
  min-height: 52px;
  padding: 0 18px 0 22px;
  border: 1px solid transparent;
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
  transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s var(--ease);
}

.button span,
.button i {
  position: relative;
  z-index: 1;
  font-style: normal;
}

.button i {
  font-size: 20px;
  font-weight: 400;
  transition: transform .3s var(--ease);
}

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

.button:hover i {
  transform: translateX(5px);
}

.button.primary {
  color: var(--white);
  background: var(--lime);
}

.button.primary:hover {
  background: var(--cyan);
}

.button.ghost {
  color: var(--white);
  background: rgba(8, 11, 15, .28);
  border-color: rgba(255, 255, 255, .35);
  backdrop-filter: blur(8px);
}

.button.ghost:hover {
  border-color: var(--cyan);
  background: rgba(36, 215, 242, .08);
}

.button.dark {
  color: var(--white);
  background: var(--ink);
}

.button.dark:hover {
  color: var(--white);
  background: var(--lime);
}

.button.outline {
  color: var(--text);
  border-color: #aeb8c0;
  background: transparent;
}

.button.small {
  min-width: 122px;
  min-height: 40px;
  padding: 0 12px 0 15px;
  font-size: 12px;
}

.home-hero {
  --parallax-x: 0px;
  --parallax-y: 0px;
  position: relative;
  min-height: 860px;
  height: 100vh;
  max-height: 1040px;
  color: var(--white);
  background: var(--ink);
  overflow: hidden;
}

.hero-backdrop {
  position: absolute;
  inset: -24px;
  background: linear-gradient(90deg, rgba(5, 8, 11, .96) 0%, rgba(5, 8, 11, .76) 34%, rgba(5, 8, 11, .16) 68%, rgba(5, 8, 11, .04) 100%), url("../home/hero/spatial-ai.png") center center / cover no-repeat;
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(1.03);
  animation: heroDrift 18s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes heroDrift {
  from { transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(1.03); }
  to { transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(1.08); }
}

.hero-grid,
.page-hero-grid {
  position: absolute;
  inset: 0;
  opacity: .17;
  background-image: linear-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .18) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 78%, transparent);
}

.spatial-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .75;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(var(--container), calc(100% - 80px));
  height: 100%;
  min-height: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 108px 0 130px;
}

.hero-copy-block {
  width: 690px;
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, .76);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
}

.hero-kicker span {
  width: 9px;
  height: 9px;
  background: var(--lime);
  box-shadow: 0 0 20px rgba(152, 255, 94, .8);
}

.hero-copy-block h1 {
  margin-top: 28px;
  font-size: 70px;
  font-weight: 680;
  line-height: 1.08;
}

.hero-copy-block h1 strong {
  color: var(--cyan);
  font-weight: inherit;
}

.hero-copy-block > p {
  max-width: 610px;
  margin-top: 28px;
  color: rgba(255, 255, 255, .72);
  font-size: 18px;
  line-height: 1.9;
}

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

.hero-marker {
  position: absolute;
  min-width: 180px;
  padding: 10px 12px;
  background: rgba(6, 10, 13, .58);
  border-left: 2px solid var(--cyan);
  backdrop-filter: blur(10px);
  animation: markerFloat 5s ease-in-out infinite;
}

.hero-marker::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  width: 10px;
  height: 10px;
  background: var(--cyan);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 18px rgba(36, 215, 242, .8);
}

.hero-marker b,
.hero-marker span {
  display: block;
}

.hero-marker b {
  color: var(--lime);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}

.hero-marker span {
  margin-top: 2px;
  font-size: 12px;
}

.marker-a { right: 9%; top: 29%; }
.marker-b { right: 25%; top: 54%; animation-delay: -1.8s; }
.marker-c { right: 5%; bottom: 23%; animation-delay: -3.2s; }

@keyframes markerFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.hero-rail {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  padding-left: max(40px, calc((100% - var(--container)) / 2));
  display: grid;
  grid-template-columns: 220px 220px 220px 1fr;
  border-top: 1px solid rgba(255, 255, 255, .15);
  background: rgba(7, 10, 14, .55);
  backdrop-filter: blur(14px);
}

.hero-rail > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-content: center;
  padding: 0 20px;
  border-right: 1px solid rgba(255, 255, 255, .12);
}

.hero-rail > div span {
  grid-row: 1 / 3;
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}

.hero-rail b,
.hero-rail small {
  display: block;
}

.hero-rail b {
  font-size: 13px;
}

.hero-rail small {
  color: rgba(255, 255, 255, .48);
  font-size: 10px;
}

.hero-rail > a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-right: max(40px, calc((100% - var(--container)) / 2));
  color: rgba(255, 255, 255, .62);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.hero-rail > a i {
  color: var(--lime);
  font-size: 20px;
  font-style: normal;
}

.company {
  background: var(--paper);
}

.company-grid,
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 120px;
  align-items: start;
}

.company-statement h2 {
  margin-top: 24px;
  font-size: 54px;
  font-weight: 680;
  line-height: 1.22;
}

.company-copy .lead {
  color: var(--text);
  font-size: 22px;
  font-weight: 650;
  line-height: 1.6;
}

.company-copy p + p {
  margin-top: 22px;
  color: var(--muted);
  font-size: 16px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding-bottom: 4px;
  color: var(--text);
  border-bottom: 1px solid var(--text);
  font-size: 14px;
  font-weight: 800;
}

.text-link span {
  color: var(--cyan-2);
  transition: transform .25s ease;
}

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

.stat-strip {
  position: relative;
  margin-top: 90px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #bdc5cb;
  border-bottom: 1px solid #bdc5cb;
}

.stat-strip > div {
  min-height: 160px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid #bdc5cb;
}

.stat-strip > div:last-of-type {
  border-right: 0;
}

.stat-strip strong {
  color: var(--text);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}

.stat-strip span {
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
}

.stat-strip > small {
  position: absolute;
  right: 0;
  bottom: -30px;
  color: #8a949c;
  font-size: 10px;
}

.intelligence-story {
  color: var(--white);
  background: var(--ink);
}

.intelligence-story::before,
.architecture-section::before,
.engines-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px);
  background-size: 80px 80px;
}

.story-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 430px 1fr;
  gap: 70px;
  align-items: start;
}

.intelligence-story .section-heading h2,
.intelligence-story .section-heading p,
.architecture-section .section-heading h2,
.architecture-section .section-heading p,
.engines-section .section-heading h2,
.engines-section .section-heading p {
  color: var(--white);
}

.intelligence-story .section-heading p,
.architecture-section .section-heading p,
.engines-section .section-heading p {
  color: rgba(255, 255, 255, .58);
}

.story-steps {
  margin-top: 54px;
  border-top: 1px solid var(--line-dark);
}

.story-step {
  width: 100%;
  min-height: 92px;
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  text-align: left;
  color: rgba(255, 255, 255, .45);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  cursor: pointer;
  transition: color .3s ease, padding .3s var(--ease), background .3s ease;
}

.story-step > span {
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}

.story-step b,
.story-step small {
  display: block;
}

.story-step b {
  color: inherit;
  font-size: 18px;
}

.story-step small {
  margin-top: 3px;
  color: rgba(255, 255, 255, .34);
  font-size: 12px;
}

.story-step.active,
.story-step:hover {
  padding-left: 16px;
  color: var(--white);
  background: rgba(36, 215, 242, .06);
}

.story-step.active {
  box-shadow: inset 2px 0 var(--lime);
}

.story-stage {
  position: sticky;
  top: 110px;
  min-height: 680px;
  overflow: hidden;
  background: var(--graphite);
  border: 1px solid rgba(255, 255, 255, .15);
}

.story-media,
.story-media img {
  width: 100%;
  height: 680px;
}

.story-media img {
  object-fit: cover;
  opacity: .8;
}

.story-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 11, 15, .97) 0%, rgba(8, 11, 15, .2) 66%, transparent 100%);
}

.story-overlay {
  position: absolute;
  z-index: 3;
  left: 38px;
  right: 38px;
  bottom: 36px;
}

.story-overlay > span {
  display: inline-block;
  color: var(--lime);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.story-overlay h3 {
  margin-top: 10px;
  font-size: 34px;
  line-height: 1.2;
}

.story-overlay p {
  max-width: 680px;
  margin-top: 12px;
  color: rgba(255, 255, 255, .66);
  font-size: 14px;
}

.story-overlay > div,
.tag-row,
.role-chips,
.contact-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.story-overlay i,
.tag-row i,
.role-chips span,
.contact-topics span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  font-style: normal;
  font-size: 11px;
}

.story-overlay i {
  color: var(--cyan);
  border: 1px solid rgba(36, 215, 242, .38);
  background: rgba(36, 215, 242, .07);
}

.story-overlay > div {
  margin-top: 20px;
}

.scan-line {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--lime);
  box-shadow: 0 0 30px rgba(152, 255, 94, .8);
  animation: scan 7s linear infinite;
}

@keyframes scan {
  0% { top: 8%; opacity: 0; }
  10%, 80% { opacity: .75; }
  100% { top: 92%; opacity: 0; }
}

.product-section {
  background: #e9edef;
}

.product-stage {
  min-height: 760px;
  display: grid;
  grid-template-columns: 350px 1fr;
  background: var(--ink);
  border: 1px solid #c3cbd1;
  overflow: hidden;
}

.product-tabs {
  border-right: 1px solid rgba(255, 255, 255, .12);
  overflow-y: auto;
  scrollbar-width: thin;
}

.product-tab {
  width: 100%;
  min-height: 82px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  padding: 0 22px;
  text-align: left;
  color: rgba(255, 255, 255, .5);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .11);
  cursor: pointer;
  transition: color .25s ease, background .25s ease;
}

.product-tab span {
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.product-tab b {
  font-size: 14px;
  font-weight: 650;
}

.product-tab.active,
.product-tab:hover {
  color: var(--white);
  background: rgba(36, 215, 242, .08);
}

.product-tab.active {
  box-shadow: inset 3px 0 var(--lime);
}

.product-visual {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.product-visual > img {
  width: 100%;
  height: 100%;
  min-height: 760px;
  object-fit: cover;
  transition: opacity .18s ease, transform .8s var(--ease);
}

.product-visual > img.switching {
  opacity: 0;
  transform: scale(1.03);
}

.product-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 10, 14, .98) 0%, rgba(7, 10, 14, .2) 68%, rgba(7, 10, 14, .06) 100%);
}

.product-info {
  position: absolute;
  z-index: 2;
  left: 48px;
  right: 48px;
  bottom: 45px;
  color: var(--white);
}

.product-info > span {
  color: var(--lime);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.product-info h3 {
  margin-top: 10px;
  font-size: 40px;
  line-height: 1.2;
}

.product-info p {
  max-width: 720px;
  margin-top: 14px;
  color: rgba(255, 255, 255, .68);
  font-size: 14px;
}

.tag-row {
  margin-top: 20px;
}

.tag-row i {
  color: var(--cyan);
  background: rgba(36, 215, 242, .08);
  border: 1px solid rgba(36, 215, 242, .34);
}

.product-info > a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
  font-size: 13px;
  font-weight: 800;
}

.product-info > a b {
  color: var(--lime);
}

.architecture-section {
  color: var(--white);
  background: var(--graphite);
}

.architecture-section .container {
  position: relative;
  z-index: 1;
}

.architecture {
  display: grid;
  grid-template-columns: 1fr 86px 1fr 86px 1fr;
  align-items: center;
}

.architecture-node {
  position: relative;
  min-height: 320px;
  padding: 34px;
  text-align: left;
  color: rgba(255, 255, 255, .62);
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .16);
  cursor: pointer;
  overflow: hidden;
  transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s var(--ease);
}

.architecture-node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 3px;
  background: var(--lime);
  transition: width .5s var(--ease);
}

.architecture-node:hover,
.architecture-node.active {
  color: var(--white);
  background: rgba(36, 215, 242, .06);
  border-color: rgba(36, 215, 242, .52);
  transform: translateY(-7px);
}

.architecture-node.active::before {
  width: 100%;
}

.architecture-node > span {
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.architecture-node h3 {
  margin-top: 48px;
  font-size: 28px;
}

.architecture-node p {
  margin-top: 8px;
  color: rgba(255, 255, 255, .45);
  font-size: 13px;
}

.architecture-node > div {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 30px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.architecture-node i {
  padding: 6px 8px;
  color: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 10px;
  font-style: normal;
}

.architecture-flow {
  position: relative;
  display: block;
  height: 1px;
  background: rgba(36, 215, 242, .42);
}

.architecture-flow i {
  position: absolute;
  top: -4px;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--lime);
  box-shadow: 0 0 18px rgba(152, 255, 94, .8);
  animation: flow 2.5s linear infinite;
}

@keyframes flow {
  from { left: 0; }
  to { left: calc(100% - 9px); }
}

.architecture-detail {
  margin-top: 30px;
  padding: 24px 0;
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 30px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.architecture-detail > span {
  color: var(--lime);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.architecture-detail p {
  color: rgba(255, 255, 255, .58);
  font-size: 14px;
}

.architecture-detail a {
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
}

.architecture-detail a b {
  color: var(--cyan);
}

.solution-section {
  background: var(--paper);
}

.solution-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.solution-tile {
  position: relative;
  min-height: 390px;
  grid-column: span 4;
  overflow: hidden;
  background: var(--graphite);
}

.solution-tile:nth-child(4),
.solution-tile:nth-child(5) {
  grid-column: span 6;
}

.solution-tile:nth-child(6),
.solution-tile:nth-child(7) {
  grid-column: span 6;
}

.solution-tile img {
  width: 100%;
  height: 100%;
  min-height: 390px;
  object-fit: cover;
  filter: saturate(.78) contrast(1.05);
  transition: transform .9s var(--ease), filter .5s ease;
}

.solution-tile:hover img {
  transform: scale(1.055);
  filter: saturate(1) contrast(1.04);
}

.solution-cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  color: var(--white);
  background: linear-gradient(0deg, rgba(7, 10, 14, .95), rgba(7, 10, 14, .08) 72%);
}

.solution-cover span {
  color: var(--lime);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}

.solution-cover h3 {
  margin-top: 9px;
  font-size: 24px;
  line-height: 1.25;
}

.solution-cover p {
  max-width: 440px;
  margin-top: 8px;
  color: rgba(255, 255, 255, .6);
  font-size: 12px;
}

.solution-cover b {
  position: absolute;
  right: 26px;
  bottom: 27px;
  color: var(--cyan);
  font-size: 22px;
  transition: transform .3s var(--ease);
}

.solution-tile:hover .solution-cover b {
  transform: translateX(6px);
}

.case-preview {
  background: var(--white);
}

.case-mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 320px 320px;
  gap: 14px;
}

.case-tile {
  position: relative;
  overflow: hidden;
  background: var(--graphite);
}

.case-1 { grid-column: span 7; grid-row: span 2; }
.case-2 { grid-column: span 5; }
.case-3 { grid-column: span 5; }
.case-4 { grid-column: span 6; }
.case-5 { grid-column: span 6; }

.case-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.case-tile:hover img {
  transform: scale(1.05);
}

.case-tile > div {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  color: var(--white);
  background: linear-gradient(0deg, rgba(7, 10, 14, .88), transparent 66%);
}

.case-tile span {
  color: var(--lime);
  font-size: 10px;
  font-weight: 800;
}

.case-tile h3 {
  margin-top: 7px;
  font-size: 21px;
}

.case-1 h3 {
  font-size: 32px;
}

.section-action {
  margin-top: 40px;
  display: flex;
  justify-content: flex-end;
}

.page-hero {
  position: relative;
  min-height: 650px;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  background: var(--ink);
  overflow: hidden;
}

.page-hero-image {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 10, 14, .96) 0%, rgba(7, 10, 14, .67) 42%, rgba(7, 10, 14, .18) 100%), var(--page-image) center / cover no-repeat;
  transform: scale(1.03);
  animation: pageHeroDrift 16s ease-in-out infinite alternate;
}

@keyframes pageHeroDrift {
  from { transform: scale(1.03); }
  to { transform: scale(1.07); }
}

.page-hero-content {
  position: relative;
  z-index: 2;
  padding: 170px 0 88px;
}

.page-hero-content h1 {
  max-width: 900px;
  margin-top: 20px;
  font-size: 62px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.page-hero-content > p {
  max-width: 720px;
  margin-top: 24px;
  color: rgba(255, 255, 255, .68);
  font-size: 18px;
  line-height: 1.85;
}

.page-hero-meta {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: rgba(255, 255, 255, .5);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.page-hero-meta i {
  width: 70px;
  height: 1px;
  background: var(--cyan);
}

.subnav {
  position: sticky;
  top: 64px;
  z-index: 70;
  min-height: 62px;
  background: rgba(255, 255, 255, .95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.subnav .container {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 36px;
}

.subnav .container > span {
  max-width: 300px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subnav .container > div {
  flex: 1;
  display: flex;
  gap: 26px;
}

.subnav .container > div a {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.subnav .container > div a:hover {
  color: var(--cyan-2);
}

.catalog-section,
.detail-overview,
.solution-outcome,
.partner-intro,
.about-intro,
.contact-section {
  background: var(--paper);
}

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

.catalog-card {
  min-width: 0;
  background: var(--white);
  border: 1px solid #d0d7dc;
  transition: transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease;
}

.catalog-card:hover {
  transform: translateY(-8px);
  border-color: var(--cyan-2);
  box-shadow: 0 24px 60px rgba(15, 28, 36, .12);
}

.catalog-image {
  position: relative;
  height: 260px;
  overflow: hidden;
  background: var(--graphite);
}

.catalog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.catalog-card:hover .catalog-image img {
  transform: scale(1.05);
}

.catalog-image span {
  position: absolute;
  left: 18px;
  top: 16px;
  min-width: 34px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--lime);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
}

.catalog-body {
  min-height: 260px;
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.catalog-body small {
  color: var(--cyan-2);
  font-size: 10px;
  font-weight: 800;
}

.catalog-body h3 {
  margin-top: 13px;
  font-size: 24px;
  line-height: 1.35;
}

.catalog-body p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

.catalog-body b {
  margin-top: auto;
  padding-top: 24px;
  color: var(--text);
  font-size: 12px;
}

.platform-banner {
  color: var(--white);
  background: var(--graphite);
}

.platform-banner-grid,
.detail-grid,
.solution-outcome-grid,
.partner-grid,
.contact-grid,
.ai-boundary-grid,
.implementation-grid,
.scenario-grid {
  display: grid;
  grid-template-columns: .84fr 1.16fr;
  gap: 90px;
  align-items: center;
}

.platform-banner .section-heading h2,
.platform-banner .section-heading p {
  color: var(--white);
}

.platform-banner .section-heading p {
  color: rgba(255, 255, 255, .58);
}

.media {
  position: relative;
  overflow: hidden;
  background: var(--graphite);
  border: 1px solid rgba(255, 255, 255, .16);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 42%, rgba(255, 255, 255, .09) 50%, transparent 58%);
  transform: translateX(-100%);
  animation: mediaScan 7s ease-in-out infinite;
}

@keyframes mediaScan {
  0%, 30% { transform: translateX(-100%); }
  70%, 100% { transform: translateX(100%); }
}

.architecture-image {
  height: 460px;
  background: var(--ink);
}

.architecture-image img {
  object-fit: contain;
}

.detail-overview .section-heading,
.solution-outcome .section-heading,
.partner-intro .section-heading {
  margin-bottom: 30px;
}

.detail-media,
.solution-media,
.partner-media {
  height: 560px;
  box-shadow: 30px 30px 0 #dde3e6;
}

.tag-row.large i {
  min-height: 34px;
  padding: 0 12px;
  color: var(--text);
  border-color: #a7cfd5;
  background: rgba(36, 215, 242, .08);
}

.capability-section,
.solution-features,
.engines-section,
.partner-model,
.values-section {
  color: var(--white);
  background: var(--ink);
}

.capability-section .section-heading h2,
.solution-features .section-heading h2,
.partner-model .section-heading h2,
.values-section .section-heading h2 {
  color: var(--white);
}

.problem-value {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line-dark);
}

.problem-value > div {
  padding: 36px;
}

.problem-value > div + div {
  border-left: 1px solid var(--line-dark);
  background: rgba(36, 215, 242, .04);
}

.problem-value > div > span {
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.problem-value ol {
  margin-top: 24px;
  list-style: none;
}

.problem-value li {
  min-height: 64px;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  color: rgba(255, 255, 255, .66);
  border-top: 1px solid var(--line-dark);
  font-size: 13px;
}

.problem-value li b {
  color: var(--lime);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}

.module-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.module {
  position: relative;
  min-height: 180px;
  padding: 24px;
  border: 1px solid var(--line-dark);
  overflow: hidden;
}

.module span,
.engine-card span,
.feature-grid article > span,
.partner-value-grid article > span,
.partner-type-grid > div > span {
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}

.module h3 {
  margin-top: 42px;
  font-size: 17px;
}

.module i {
  position: absolute;
  right: -22px;
  bottom: -22px;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(152, 255, 94, .35);
  transform: rotate(45deg);
}

.scenario-section,
.implementation-section,
.approach-section,
.partner-types,
.timeline-section {
  background: var(--white);
}

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

.scenario-list > div {
  min-height: 88px;
  display: grid;
  grid-template-columns: 52px 1fr 30px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.scenario-list span,
.implementation-grid li span {
  color: var(--cyan-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}

.scenario-list h3 {
  font-size: 20px;
}

.scenario-list b {
  color: var(--cyan-2);
}

.related-section,
.solution-list-section,
.architecture-page,
.partner-types,
.cases-section {
  background: #e9edef;
}

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

.related-grid a {
  min-height: 240px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid #ccd4da;
  transition: transform .3s var(--ease), border-color .3s ease;
}

.related-grid a:hover {
  transform: translateY(-6px);
  border-color: var(--cyan-2);
}

.related-grid span {
  color: var(--cyan-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}

.related-grid h3 {
  margin-top: 25px;
  font-size: 22px;
}

.related-grid p {
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
}

.related-grid b {
  margin-top: auto;
  color: var(--cyan-2);
}

.architecture.vertical {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.technology-layer {
  min-height: 460px;
  padding: 34px;
  background: var(--white);
  border-top: 3px solid var(--cyan-2);
}

.technology-layer:nth-child(2) { border-color: var(--lime); background: var(--graphite); color: var(--white); }
.technology-layer:nth-child(3) { border-color: var(--amber); }

.technology-layer > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.technology-layer > div span,
.technology-layer > div small {
  color: var(--cyan-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}

.technology-layer h3 {
  margin-top: 70px;
  font-size: 27px;
}

.technology-layer p {
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
}

.technology-layer:nth-child(2) p {
  color: rgba(255, 255, 255, .58);
}

.technology-layer ul {
  margin-top: 36px;
  list-style: none;
  border-top: 1px solid var(--line);
}

.technology-layer:nth-child(2) ul {
  border-color: var(--line-dark);
}

.technology-layer li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.technology-layer:nth-child(2) li {
  border-color: var(--line-dark);
}

.engine-grid,
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

.engine-card,
.feature-grid article {
  min-height: 250px;
  padding: 30px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.engine-card h3,
.feature-grid h3 {
  margin-top: 54px;
  font-size: 21px;
}

.engine-card p,
.feature-grid p {
  margin-top: 12px;
  color: rgba(255, 255, 255, .5);
  font-size: 12px;
}

.ai-boundary {
  color: var(--white);
  background: var(--graphite-2);
}

.ai-boundary .section-heading h2 {
  color: var(--white);
}

.ai-boundary .section-heading p {
  color: rgba(255, 255, 255, .58);
}

.ai-principles {
  border-top: 1px solid var(--line-dark);
}

.ai-principles > div {
  min-height: 120px;
  display: grid;
  grid-template-columns: 50px 160px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line-dark);
}

.ai-principles span {
  color: var(--lime);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}

.ai-principles b {
  font-size: 16px;
}

.ai-principles p {
  color: rgba(255, 255, 255, .5);
  font-size: 12px;
}

.solution-list {
  border-top: 1px solid #bec7cd;
}

.solution-list-card {
  position: relative;
  min-height: 250px;
  display: grid;
  grid-template-columns: 70px 1fr 340px 40px;
  gap: 28px;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid #bec7cd;
}

.solution-list-card > span {
  color: var(--cyan-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.solution-list-card small {
  color: var(--cyan-2);
  font-size: 10px;
  font-weight: 800;
}

.solution-list-card h3 {
  margin-top: 8px;
  font-size: 27px;
}

.solution-list-card p {
  max-width: 620px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.solution-list-card > div > div {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.solution-list-card i {
  padding: 4px 7px;
  font-size: 9px;
  font-style: normal;
  border: 1px solid #bdc7cd;
}

.solution-list-card img {
  width: 340px;
  height: 185px;
  object-fit: cover;
  filter: saturate(.65);
  transition: filter .35s ease, transform .5s var(--ease);
}

.solution-list-card > b {
  color: var(--cyan-2);
  font-size: 24px;
  transition: transform .3s var(--ease);
}

.solution-list-card:hover img {
  filter: saturate(1);
  transform: scale(1.025);
}

.solution-list-card:hover > b {
  transform: translateX(7px);
}

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

.approach-flow > div {
  position: relative;
  min-height: 240px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.approach-flow > div:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: -6px;
  top: 42px;
  width: 11px;
  height: 11px;
  background: var(--lime);
  transform: rotate(45deg);
}

.approach-flow span {
  color: var(--cyan-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}

.approach-flow h3 {
  margin-top: 60px;
  font-size: 21px;
}

.approach-flow p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.role-chips {
  margin-top: 28px;
}

.role-chips span,
.contact-topics span {
  color: var(--text);
  background: rgba(36, 215, 242, .08);
  border: 1px solid #b5d9de;
}

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

.implementation-grid ol {
  list-style: none;
  border-top: 1px solid var(--line);
}

.implementation-grid li {
  min-height: 92px;
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.implementation-grid li h3 {
  font-size: 20px;
}

.case-toolbar {
  margin-bottom: 34px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

#caseFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-btn {
  min-height: 38px;
  padding: 0 14px;
  color: var(--muted);
  background: transparent;
  border: 1px solid #bfc8ce;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.filter-btn.active,
.filter-btn:hover {
  color: var(--ink);
  background: var(--lime);
  border-color: var(--lime);
}

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

.case-card button {
  width: 100%;
  display: block;
  text-align: left;
  background: var(--white);
  border: 1px solid #cbd3d8;
  cursor: pointer;
  transition: transform .35s var(--ease), border-color .35s ease;
}

.case-card button:hover {
  transform: translateY(-7px);
  border-color: var(--cyan-2);
}

.case-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.case-card button > div {
  min-height: 240px;
  padding: 25px;
  display: flex;
  flex-direction: column;
}

.case-card span {
  color: var(--cyan-2);
  font-size: 9px;
  font-weight: 800;
}

.case-card h3 {
  margin-top: 12px;
  font-size: 21px;
}

.case-card p {
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
}

.case-card b {
  margin-top: auto;
  padding-top: 20px;
  font-size: 11px;
}

.partner-value-grid,
.partner-type-grid,
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.partner-value-grid,
.value-grid {
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

.partner-value-grid article,
.value-grid article {
  min-height: 310px;
  padding: 34px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.partner-value-grid h3,
.value-grid h3 {
  margin-top: 80px;
  font-size: 27px;
}

.partner-value-grid p,
.value-grid p {
  margin-top: 12px;
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
}

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

.partner-type-grid > div {
  min-height: 300px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.partner-type-grid h3 {
  margin-top: 60px;
  font-size: 20px;
}

.partner-type-grid p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.about-quote {
  padding: 40px 0 40px 50px;
  border-left: 3px solid var(--lime);
}

.about-quote p {
  font-size: 34px;
  font-weight: 650;
}

.about-quote span {
  display: block;
  margin-top: 20px;
  color: var(--muted);
  font-size: 12px;
}

.about-stats {
  margin-top: 80px;
}

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

.value-grid article > span {
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 72px;
  height: 1px;
  background: #aeb9c0;
}

.timeline > div {
  position: relative;
  min-height: 240px;
  padding-right: 34px;
}

.timeline strong {
  font-size: 25px;
}

.timeline i {
  position: absolute;
  left: 0;
  top: 66px;
  width: 13px;
  height: 13px;
  background: var(--lime);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 1px #aeb9c0;
  transform: rotate(45deg);
}

.timeline p {
  margin-top: 70px;
  color: var(--muted);
  font-size: 12px;
}

.contact-grid {
  align-items: start;
}

.contact-topics {
  margin-top: 34px;
}

.contact-panel {
  background: var(--white);
  border-top: 3px solid var(--cyan-2);
  box-shadow: 28px 28px 0 #dce3e6;
}

.contact-panel > div {
  min-height: 92px;
  padding: 20px 26px;
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.contact-panel small {
  color: var(--muted);
  font-size: 11px;
}

.contact-panel strong,
.contact-panel > div > a {
  font-size: 15px;
  font-weight: 650;
}

.contact-panel .contact-actions {
  min-height: 100px;
  display: flex;
  gap: 10px;
}

.site-footer {
  color: var(--white);
  background: #050709;
}

.footer-top {
  width: min(var(--container), calc(100% - 80px));
  margin: 0 auto;
  padding: 100px 0 80px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 100px;
}

.footer-pitch h2 {
  margin-top: 22px;
  font-size: 44px;
  line-height: 1.2;
}

.footer-pitch .button {
  margin-top: 36px;
}

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

.footer-nav h3 {
  margin-bottom: 20px;
  color: var(--cyan);
  font-size: 11px;
}

.footer-nav a {
  display: block;
  margin: 9px 0;
  color: rgba(255, 255, 255, .5);
  font-size: 11px;
}

.footer-nav a:hover {
  color: var(--white);
}

.footer-bottom {
  min-height: 78px;
  padding: 0 max(40px, calc((100% - var(--container)) / 2));
  display: grid;
  grid-template-columns: 180px 1fr 1fr auto;
  align-items: center;
  gap: 30px;
  color: rgba(255, 255, 255, .4);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 10px;
}

.footer-bottom img {
  width: 150px;
  filter: brightness(0) invert(1);
}

dialog {
  width: min(980px, calc(100% - 48px));
  max-height: calc(100vh - 60px);
  padding: 0;
  color: var(--white);
  background: var(--graphite);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .55);
}

dialog::backdrop {
  background: rgba(3, 5, 7, .8);
  backdrop-filter: blur(10px);
}

.modal-close {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  color: var(--white);
  background: rgba(8, 11, 15, .72);
  border: 1px solid rgba(255, 255, 255, .28);
  cursor: pointer;
  font-size: 24px;
}

.modal-layout h2 {
  padding: 30px 34px;
  font-size: 30px;
}

#modalBody img {
  width: 100%;
  height: 430px;
  object-fit: cover;
}

#modalBody > div {
  padding: 28px 34px 38px;
}

#modalBody span {
  color: var(--lime);
  font-size: 10px;
  font-weight: 800;
}

#modalBody p {
  margin-top: 12px;
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
}

.image-missing {
  background: repeating-linear-gradient(135deg, #151b21 0, #151b21 12px, #1d252d 12px, #1d252d 24px) !important;
}

@media (max-width: 1180px) {
  .topbar { gap: 18px; }
  .nav-link { padding: 0 8px; font-size: 12px; }
  .nav-link::after { left: 8px; right: 8px; }
  .cloud-link { display: none; }
  .hero-copy-block h1 { font-size: 60px; }
  .marker-b { right: 7%; }
  .story-grid { grid-template-columns: 350px 1fr; gap: 40px; }
  .product-stage { grid-template-columns: 300px 1fr; }
  .solution-list-card { grid-template-columns: 54px 1fr 280px 32px; }
  .solution-list-card img { width: 280px; }
}

@media (max-width: 1024px) {
  .container { width: min(100% - 48px, var(--container)); }
  .section { padding: 96px 0; }
  .main-nav, .header-cta { display: none; }
  .topbar { width: calc(100% - 36px); justify-content: space-between; }
  .header-actions { margin-left: auto; }
  .menu-btn { display: block; }
  .mobile-drawer {
    position: fixed;
    inset: 64px 0 0;
    height: calc(100vh - 64px);
    padding: 24px;
    overflow-y: auto;
    color: var(--white);
    background: rgba(8, 11, 15, .98);
    transform: translateX(100%);
    transition: transform .45s var(--ease);
  }
  .mobile-drawer.open { display: block; transform: translateX(0); }
  .mobile-group { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .mobile-main { display: flex; align-items: center; min-height: 58px; font-size: 18px; font-weight: 700; }
  .mobile-children { padding: 0 0 18px 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .mobile-children a { color: rgba(255, 255, 255, .55); font-size: 12px; }
  .home-hero, .hero-content { min-height: 800px; }
  .hero-copy-block { width: 620px; }
  .hero-copy-block h1 { font-size: 56px; }
  .hero-marker { display: none; }
  .hero-rail { grid-template-columns: repeat(3, 1fr); padding-left: 0; }
  .hero-rail > a { display: none; }
  .company-grid, .about-grid { gap: 60px; }
  .company-statement h2 { font-size: 46px; }
  .story-grid { grid-template-columns: 1fr; }
  .story-stage { position: relative; top: auto; }
  .story-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story-step { grid-template-columns: 40px 1fr; border-right: 1px solid var(--line-dark); }
  .product-stage { min-height: auto; grid-template-columns: 1fr; }
  .product-tabs { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .product-tab { width: 220px; min-width: 220px; min-height: 68px; grid-template-columns: 32px 1fr; }
  .product-tab.active { box-shadow: inset 0 -3px var(--lime); }
  .product-visual > img { min-height: 630px; }
  .architecture { grid-template-columns: 1fr; gap: 12px; }
  .architecture-flow { width: 1px; height: 58px; margin: 0 auto; }
  .architecture-flow i { left: -4px; top: 0; animation: flowVertical 2s linear infinite; }
  @keyframes flowVertical { from { top: 0; } to { top: calc(100% - 9px); } }
  .solution-tile, .solution-tile:nth-child(n) { grid-column: span 6; }
  .case-mosaic { grid-template-rows: 280px 280px; }
  .platform-banner-grid, .detail-grid, .solution-outcome-grid, .partner-grid, .contact-grid, .ai-boundary-grid, .implementation-grid, .scenario-grid { grid-template-columns: 1fr; gap: 50px; }
  .catalog-grid, .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .architecture.vertical { grid-template-columns: 1fr; }
  .technology-layer { min-height: 360px; }
  .technology-layer h3 { margin-top: 45px; }
  .solution-list-card { grid-template-columns: 48px 1fr 230px 28px; }
  .solution-list-card img { width: 230px; height: 160px; }
  .approach-flow, .partner-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1fr; gap: 60px; }
  .footer-bottom { grid-template-columns: 180px 1fr auto; }
  .footer-bottom span:nth-child(3) { display: none; }
}

@media (max-width: 720px) {
  body::after { display: none; }
  .container { width: calc(100% - 32px); }
  .section { padding: 74px 0; }
  .section-heading { margin-bottom: 38px; }
  .section-heading h2 { margin-top: 16px; font-size: 34px; line-height: 1.2; }
  .section-heading p { margin-top: 16px; font-size: 15px; }
  .topbar { width: calc(100% - 28px); height: 64px; }
  .brand { width: 142px; }
  .brand img { height: 34px; }
  .home-hero, .hero-content { min-height: 780px; height: 100svh; max-height: none; }
  .hero-backdrop { background-position: 64% center; }
  .hero-content { width: calc(100% - 32px); padding: 106px 0 134px; align-items: center; }
  .hero-copy-block { width: 100%; }
  .hero-kicker { font-size: 10px; }
  .hero-copy-block h1 { margin-top: 22px; font-size: 43px; line-height: 1.12; }
  .hero-copy-block > p { margin-top: 22px; font-size: 15px; line-height: 1.8; }
  .hero-actions { margin-top: 30px; flex-direction: column; align-items: flex-start; }
  .button { width: min(100%, 260px); }
  .hero-rail { height: 92px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-rail > div { grid-template-columns: 1fr; padding: 0 10px; text-align: center; }
  .hero-rail > div span, .hero-rail small { display: none; }
  .hero-rail b { font-size: 11px; }
  .company-grid, .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .company-statement h2 { font-size: 38px; }
  .company-copy .lead { font-size: 18px; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 55px; }
  .stat-strip > div { min-height: 120px; padding: 20px; border-bottom: 1px solid #bdc5cb; }
  .stat-strip > div:nth-child(2) { border-right: 0; }
  .stat-strip > div:nth-last-of-type(-n + 2) { border-bottom: 0; }
  .stat-strip strong { font-size: 34px; }
  .story-steps { display: block; }
  .story-step { min-height: 76px; border-right: 0; }
  .story-stage { min-height: 520px; }
  .story-media, .story-media img { height: 520px; }
  .story-overlay { left: 20px; right: 20px; bottom: 22px; }
  .story-overlay h3 { font-size: 27px; }
  .story-overlay p { font-size: 12px; }
  .product-stage { min-height: auto; }
  .product-tab { width: 190px; min-width: 190px; }
  .product-visual > img { min-height: 560px; }
  .product-info { left: 22px; right: 22px; bottom: 26px; }
  .product-info h3 { font-size: 29px; }
  .product-info p { font-size: 12px; line-height: 1.7; }
  .architecture-node { min-height: 280px; padding: 26px; }
  .architecture-node h3 { margin-top: 34px; font-size: 23px; }
  .architecture-node > div { left: 26px; right: 26px; bottom: 24px; }
  .architecture-detail { grid-template-columns: 1fr; gap: 12px; }
  .solution-grid { gap: 10px; }
  .solution-tile, .solution-tile:nth-child(n) { grid-column: span 12; min-height: 330px; }
  .solution-tile img { min-height: 330px; }
  .case-mosaic { grid-template-columns: 1fr; grid-template-rows: repeat(5, 300px); }
  .case-tile, .case-tile:nth-child(n) { grid-column: 1; grid-row: auto; }
  .case-1 h3 { font-size: 24px; }
  .page-hero { min-height: 590px; }
  .page-hero-content { padding: 150px 0 64px; }
  .page-hero-content h1 {
    max-width: 100%;
    font-size: 34px;
    line-height: 1.18;
    text-wrap: balance;
    word-break: break-all;
    overflow-wrap: anywhere;
  }
  .page-hero-content > p { font-size: 15px; }
  .subnav { top: 64px; }
  .subnav .container { width: calc(100% - 24px); overflow-x: auto; }
  .subnav .container > span { display: none; }
  .subnav .container > div { min-width: 270px; gap: 18px; }
  .subnav .button { display: none; }
  .catalog-grid, .case-grid, .related-grid { grid-template-columns: 1fr; }
  .catalog-image { height: 230px; }
  .catalog-body { min-height: 230px; }
  .architecture-image { height: 300px; }
  .detail-media, .solution-media, .partner-media { height: 390px; box-shadow: 14px 14px 0 #dde3e6; }
  .problem-value { grid-template-columns: 1fr; }
  .problem-value > div + div { border-left: 0; border-top: 1px solid var(--line-dark); }
  .problem-value > div { padding: 24px; }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module { min-height: 150px; padding: 20px; }
  .module h3 { margin-top: 28px; font-size: 15px; }
  .technology-layer { min-height: 330px; padding: 26px; }
  .engine-grid, .feature-grid { grid-template-columns: 1fr; }
  .engine-card, .feature-grid article { min-height: 210px; }
  .ai-principles > div { grid-template-columns: 42px 1fr; padding: 18px 0; }
  .ai-principles p { grid-column: 2; margin-top: 5px; }
  .solution-list-card { grid-template-columns: 36px 1fr 28px; padding: 24px 0; }
  .solution-list-card img { grid-column: 2 / 4; grid-row: 2; width: 100%; height: 220px; margin-top: 10px; }
  .solution-list-card > b { grid-column: 3; grid-row: 1; }
  .solution-list-card h3 { font-size: 23px; }
  .approach-flow, .partner-type-grid, .partner-value-grid, .value-grid { grid-template-columns: 1fr; }
  .approach-flow > div { min-height: 190px; }
  .approach-flow > div:not(:last-child)::after { right: auto; left: 28px; top: auto; bottom: -6px; }
  .case-toolbar { align-items: flex-start; flex-direction: column; }
  .case-card img { height: 220px; }
  .case-card button > div { min-height: 220px; }
  .partner-type-grid > div, .partner-value-grid article, .value-grid article { min-height: 230px; }
  .partner-value-grid h3, .value-grid h3 { margin-top: 48px; }
  .timeline { grid-template-columns: 1fr; }
  .timeline::before { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .timeline > div { min-height: 170px; padding: 0 0 30px 42px; }
  .timeline i { left: 0; top: 10px; }
  .timeline p { margin-top: 16px; }
  .contact-panel { box-shadow: 14px 14px 0 #dce3e6; }
  .contact-panel > div { grid-template-columns: 1fr; gap: 6px; }
  .contact-panel .contact-actions { flex-direction: column; align-items: flex-start; }
  .footer-top { width: calc(100% - 32px); padding: 74px 0 58px; }
  .footer-pitch h2 { font-size: 36px; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom { min-height: 110px; padding: 18px 16px; grid-template-columns: 1fr; gap: 5px; text-align: left; }
  .footer-bottom img { margin-bottom: 8px; }
  .footer-bottom span:nth-child(3) { display: none; }
  #modalBody img { height: 260px; }
  .modal-layout h2 { padding: 24px; padding-right: 70px; font-size: 24px; }
  #modalBody > div { padding: 22px 24px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body:not([data-page="home"]) *, body:not([data-page="home"]) *::before, body:not([data-page="home"]) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* V0.02: Nebula blue visual system and interaction layer */

h1,
h2,
h3 {
  max-width: 100%;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

p {
  text-wrap: pretty;
}

body::after {
  width: 240px;
  height: 240px;
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle, rgba(20, 121, 255, .08), rgba(20, 121, 255, 0) 68%);
}

.site-header {
  border-bottom-color: rgba(82, 168, 255, .22);
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20, 121, 255, .7), rgba(53, 216, 255, .35), transparent);
  transform: scaleX(.5);
  opacity: .55;
}

.header-status {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-right: 12px;
  color: rgba(255, 255, 255, .48);
  border-right: 1px solid rgba(255, 255, 255, .15);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
  white-space: nowrap;
}

.header-status i,
.footer-system i,
.page-hero-telemetry i,
.product-status-strip > .container > span i,
.live-panel-head i {
  width: 6px;
  height: 6px;
  display: inline-block;
  background: var(--nebula-bright);
  box-shadow: 0 0 12px rgba(82, 168, 255, .9);
  animation: systemPulse 1.8s ease-in-out infinite;
}

@keyframes systemPulse {
  0%, 100% { opacity: .35; transform: scale(.75); }
  50% { opacity: 1; transform: scale(1.15); }
}

.nav-link::after {
  background: var(--nebula-blue);
  box-shadow: 0 0 16px rgba(20, 121, 255, .8);
}

.header-cta {
  color: var(--white);
  background: var(--nebula-blue);
  box-shadow: 0 0 0 1px rgba(82, 168, 255, .35), 0 10px 34px rgba(20, 121, 255, .2);
}

.header-cta:hover {
  color: var(--ink);
  background: var(--cyan);
}

.button {
  isolation: isolate;
}

.button::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .32) 48%, transparent 76%);
  transform: translateX(-115%);
  transition: transform .65s var(--ease);
}

.button:hover::after {
  transform: translateX(115%);
}

.button.primary {
  box-shadow: 0 14px 38px rgba(20, 121, 255, .26), inset 0 0 0 1px rgba(255, 255, 255, .2);
}

.section-label {
  color: var(--nebula-blue);
}

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

.home-hero::before,
.page-hero::before,
.product-map-section::before,
.architecture-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(82, 168, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(82, 168, 255, .06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.hero-backdrop {
  filter: saturate(1.08) contrast(1.05) hue-rotate(-5deg);
}

.hero-grid,
.page-hero-grid {
  opacity: .23;
  background-image: linear-gradient(rgba(53, 216, 255, .15) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 121, 255, .18) 1px, transparent 1px);
}

.hero-copy-block {
  position: relative;
  z-index: 3;
  width: 650px;
}

.hero-kicker span {
  background: var(--nebula-blue);
  box-shadow: 0 0 20px rgba(20, 121, 255, .9);
}

.hero-copy-block h1 strong {
  color: var(--cyan);
  text-shadow: 0 0 34px rgba(53, 216, 255, .16);
}

.hero-scan {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(53, 216, 255, .35), var(--nebula-bright), transparent);
  box-shadow: 0 0 30px rgba(20, 121, 255, .5);
  animation: heroScan 7s linear infinite;
}

@keyframes heroScan {
  0% { top: 12%; opacity: 0; }
  12%, 78% { opacity: .9; }
  100% { top: 88%; opacity: 0; }
}

.hero-coordinates {
  position: fixed;
  z-index: 120;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 0 0 12px;
  color: rgba(82, 168, 255, .78);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.hero-coordinates.active {
  opacity: .9;
}

.hero-coordinates i {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(53, 216, 255, .7);
  border-radius: 50%;
}

.hero-coordinates i::before,
.hero-coordinates i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(53, 216, 255, .7);
  transform: translate(-50%, -50%);
}

.hero-coordinates i::before { width: 24px; height: 1px; }
.hero-coordinates i::after { width: 1px; height: 24px; }

.hero-live-panel {
  position: absolute;
  z-index: 4;
  right: 4%;
  top: 23%;
  width: 280px;
  padding: 18px;
  background: rgba(6, 12, 21, .72);
  border: 1px solid rgba(82, 168, 255, .36);
  border-top: 2px solid var(--nebula-blue);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .28), inset 0 0 40px rgba(20, 121, 255, .04);
  backdrop-filter: blur(16px);
}

.live-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, .62);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
}

.live-panel-head span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.live-panel-head b {
  color: var(--nebula-bright);
  font-size: 9px;
}

.live-radar {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 22px auto;
  border: 1px solid rgba(82, 168, 255, .3);
  border-radius: 50%;
  background-image: linear-gradient(rgba(82, 168, 255, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(82, 168, 255, .14) 1px, transparent 1px);
  background-size: 20px 20px;
  box-shadow: inset 0 0 28px rgba(20, 121, 255, .08);
}

.live-radar::before,
.live-radar::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(53, 216, 255, .2);
  border-radius: 50%;
}

.live-radar::after { inset: 48px; }

.live-radar i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48%;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  transform-origin: left;
  animation: radarSweep 3.2s linear infinite;
}

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

.live-radar b,
.live-radar span,
.live-radar em {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--nebula-bright);
  box-shadow: 0 0 12px rgba(82, 168, 255, .9);
  border-radius: 50%;
  animation: systemPulse 2s ease-in-out infinite;
}

.live-radar b { left: 30%; top: 35%; }
.live-radar span { right: 24%; top: 42%; animation-delay: -.6s; }
.live-radar em { left: 48%; bottom: 22%; animation-delay: -1.2s; }

.live-signal {
  display: grid;
  grid-template-columns: 78px 1fr 30px;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  color: rgba(255, 255, 255, .5);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
}

.live-signal > b {
  height: 3px;
  background: rgba(255, 255, 255, .1);
}

.live-signal > b i {
  width: var(--level);
  height: 100%;
  display: block;
  background: linear-gradient(90deg, var(--nebula-blue), var(--cyan));
  animation: signalLoad 2.5s var(--ease) both;
}

@keyframes signalLoad { from { width: 0; } }

.live-signal em {
  color: var(--nebula-bright);
  font-style: normal;
  text-align: right;
}

.live-events {
  margin-top: 16px;
  padding-top: 12px;
  display: grid;
  gap: 5px;
  color: rgba(255, 255, 255, .32);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
}

.hero-marker b {
  color: var(--nebula-bright);
}

.marker-a { right: 31%; top: 28%; }
.marker-b { right: 28%; top: 56%; }
.marker-c { right: 4%; bottom: 21%; }

.hero-rail {
  background: rgba(5, 10, 18, .7);
  border-top-color: rgba(82, 168, 255, .26);
}

.hero-rail > div:hover {
  background: rgba(20, 121, 255, .08);
}

.hero-rail > div {
  transition: background .25s ease;
}

.stat-strip > div {
  position: relative;
  overflow: hidden;
}

.stat-strip > div::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--nebula-blue);
  transition: width .55s var(--ease);
}

.stat-strip > div:hover::after { width: 100%; }

.scan-line {
  background: var(--nebula-blue);
  box-shadow: 0 0 30px rgba(20, 121, 255, .8);
}

.product-stage {
  border-color: rgba(20, 121, 255, .28);
  box-shadow: 0 36px 80px rgba(8, 20, 34, .16);
}

.product-tab.active,
.product-tab:hover {
  background: rgba(20, 121, 255, .12);
}

.product-tab.active {
  box-shadow: inset 3px 0 var(--nebula-blue);
}

.product-info h3,
.catalog-body h3,
.solution-list-card h3,
.case-card h3,
.footer-pitch h2 {
  text-wrap: balance;
}

.page-hero {
  min-height: 680px;
  border-bottom: 1px solid rgba(82, 168, 255, .24);
}

.page-hero-image {
  filter: saturate(1.05) contrast(1.05);
}

.page-hero-beam {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(transparent, var(--cyan), transparent);
  box-shadow: 0 0 28px rgba(20, 121, 255, .55);
  animation: pageBeam 9s linear infinite;
}

@keyframes pageBeam {
  from { left: 14%; opacity: 0; }
  15%, 85% { opacity: .65; }
  to { left: 88%; opacity: 0; }
}

.page-hero-content h1 {
  max-width: 980px;
  text-wrap: balance;
}

.page-hero-telemetry {
  position: absolute;
  left: 0;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 24px;
  color: rgba(255, 255, 255, .38);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
}

.page-hero-telemetry span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.product-status-strip {
  position: relative;
  z-index: 20;
  color: rgba(255, 255, 255, .62);
  background: #09111d;
  border-bottom: 1px solid rgba(82, 168, 255, .22);
}

.product-status-strip .container {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 26px;
  overflow: hidden;
}

.product-status-strip span,
.product-status-strip em {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
}

.product-status-strip span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--nebula-bright);
}

.product-status-strip b {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.product-status-strip b small {
  color: var(--nebula-blue);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
}

.product-status-strip em {
  margin-left: auto;
  color: rgba(255, 255, 255, .3);
}

.product-map-section {
  color: var(--white);
  background: #07101c;
  overflow: hidden;
}

.product-map-section .section-heading h2 {
  color: var(--white);
}

.product-map-section .section-heading p {
  color: rgba(255, 255, 255, .52);
}

.product-map {
  --glow-x: 50%;
  --glow-y: 50%;
  position: relative;
  min-height: 620px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  border: 1px solid rgba(82, 168, 255, .26);
  background: radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(20, 121, 255, .12), transparent 34%), rgba(5, 12, 22, .84);
  box-shadow: 0 42px 100px rgba(0, 0, 0, .3), inset 0 0 60px rgba(20, 121, 255, .03);
  overflow: hidden;
  transform: perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .25s ease;
}

.product-orbit {
  position: relative;
  min-width: 0;
  min-height: 620px;
  border-right: 1px solid rgba(82, 168, 255, .18);
  background-image: linear-gradient(rgba(82, 168, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(82, 168, 255, .07) 1px, transparent 1px);
  background-size: 36px 36px;
}

.orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(82, 168, 255, .24);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  box-shadow: inset 0 0 38px rgba(20, 121, 255, .03);
}

.orbit-ring-a { width: 72%; height: 54%; }
.orbit-ring-b { width: 48%; height: 36%; border-style: dashed; animation: orbitRotate 22s linear infinite; }

@keyframes orbitRotate {
  to { transform: translate(-50%, -50%) rotate(350deg); }
}

.orbit-axis {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(53, 216, 255, .4), transparent);
}

.orbit-core,
.orbit-node {
  position: absolute;
  z-index: 2;
  color: rgba(255, 255, 255, .62);
  background: #091523;
  border: 1px solid rgba(82, 168, 255, .3);
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s var(--ease);
}

.orbit-core {
  left: 50%;
  top: 50%;
  width: 170px;
  height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #0b1d32;
  box-shadow: 0 0 0 16px rgba(20, 121, 255, .04), 0 0 70px rgba(20, 121, 255, .16);
}

.orbit-core::before,
.orbit-core::after {
  content: "";
  position: absolute;
  inset: -12px;
  border: 1px solid rgba(53, 216, 255, .22);
  border-radius: 50%;
  animation: corePulse 3s ease-in-out infinite;
}

.orbit-core::after { inset: -26px; animation-delay: -1.5s; }

@keyframes corePulse {
  0%, 100% { opacity: .2; transform: scale(.96); }
  50% { opacity: .75; transform: scale(1.03); }
}

.orbit-core i {
  width: 18px;
  height: 18px;
  margin-bottom: 13px;
  border: 2px solid var(--cyan);
  transform: rotate(45deg);
  box-shadow: 0 0 18px rgba(53, 216, 255, .65);
}

.orbit-core span,
.orbit-node span {
  color: var(--nebula-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
}

.orbit-core b { margin-top: 4px; font-size: 15px; }
.orbit-core small { margin-top: 4px; color: rgba(255, 255, 255, .28); font-size: 7px; }

.orbit-node {
  width: 112px;
  min-height: 58px;
  padding: 9px 10px;
  text-align: left;
}

.orbit-node b {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}

.orbit-core:hover,
.orbit-core.active,
.orbit-node:hover,
.orbit-node.active {
  color: var(--white);
  background: #102744;
  border-color: var(--cyan);
  box-shadow: 0 0 26px rgba(20, 121, 255, .24), inset 0 0 20px rgba(20, 121, 255, .08);
}

.orbit-node:hover,
.orbit-node.active { transform: translateY(-4px); }

.orbit-node-1 { left: 12%; top: 16%; }
.orbit-node-2 { left: 42%; top: 8%; }
.orbit-node-3 { right: 9%; top: 18%; }
.orbit-node-4 { right: 4%; top: 47%; }
.orbit-node-5 { right: 12%; bottom: 13%; }
.orbit-node-6 { left: 43%; bottom: 7%; }
.orbit-node-7 { left: 11%; bottom: 14%; }
.orbit-node-8 { left: 4%; top: 46%; }

.product-map-info {
  position: relative;
  z-index: 2;
  padding: 58px 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-map-info > div:first-child {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  color: var(--nebula-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
}

.product-map-info > div:first-child i {
  height: 1px;
  background: rgba(82, 168, 255, .3);
}

.product-map-info > div:first-child b {
  color: rgba(255, 255, 255, .26);
  font-size: 7px;
}

.product-map-info h3 {
  margin-top: 32px;
  font-size: 38px;
  line-height: 1.2;
}

.product-map-info p {
  margin-top: 20px;
  color: rgba(255, 255, 255, .58);
  font-size: 14px;
  line-height: 1.9;
}

.product-map-info .tag-row { margin-top: 24px; }

.product-map-info > a {
  margin-top: 34px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  font-size: 12px;
  font-weight: 800;
}

.product-map-info > a b { color: var(--cyan); }

.catalog-card,
.engine-card,
.solution-tile,
.media {
  --glow-x: 50%;
  --glow-y: 50%;
  transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
}

.catalog-card::after,
.engine-card::after,
.solution-tile::after,
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(82, 168, 255, .17), transparent 34%);
  transition: opacity .25s ease;
}

.catalog-card:hover::after,
.engine-card:hover::after,
.solution-tile:hover::after,
.media:hover::after {
  opacity: 1;
}

.catalog-card:hover {
  border-color: var(--nebula-blue);
  box-shadow: 0 24px 60px rgba(20, 121, 255, .14);
}

.catalog-image span {
  color: var(--white);
  background: var(--nebula-blue);
}

.solution-list-card {
  transition: background .25s ease, padding .35s var(--ease);
}

.solution-list-card:hover {
  background: rgba(20, 121, 255, .04);
}

.section-rail {
  position: fixed;
  z-index: 90;
  right: 18px;
  top: 50%;
  display: grid;
  gap: 6px;
  transform: translateY(-50%);
}

.section-rail button {
  width: 36px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: rgba(255, 255, 255, .3);
  background: rgba(5, 10, 18, .55);
  border: 0;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.section-rail span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 6px;
}

.section-rail i {
  width: 8px;
  height: 1px;
  background: currentColor;
  transition: width .25s ease, background .25s ease;
}

.section-rail button.active {
  color: var(--nebula-bright);
}

.section-rail button.active i { width: 16px; background: var(--cyan); }

.footer-system {
  min-height: 42px;
  padding: 0 max(40px, calc((100% - var(--container)) / 2));
  display: flex;
  align-items: center;
  gap: 34px;
  color: rgba(255, 255, 255, .28);
  border-top: 1px solid rgba(82, 168, 255, .16);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 7px;
}

.footer-system span:first-child {
  color: var(--nebula-bright);
}

.footer-pitch h2 span {
  display: block;
}

@media (max-width: 1180px) {
  .header-status { display: none; }
  .hero-live-panel { right: 3%; width: 250px; }
  .marker-a { right: 29%; }
  .marker-b { right: 28%; }
  .product-map { grid-template-columns: 1.1fr .9fr; }
  .orbit-node { width: 102px; }
}

@media (max-width: 1024px) {
  .hero-live-panel,
  .hero-coordinates,
  .section-rail { display: none; }
  .page-hero-telemetry { left: 24px; }
  .product-map { grid-template-columns: 1fr; }
  .product-orbit { border-right: 0; border-bottom: 1px solid rgba(82, 168, 255, .18); }
  .product-map-info { min-height: 400px; }
  .product-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }
  .product-tab {
    width: auto;
    min-width: 0;
    min-height: 72px;
    grid-template-columns: 26px 1fr;
    padding: 0 13px;
    border-right: 1px solid rgba(255, 255, 255, .1);
  }
  .product-tab.active { box-shadow: inset 0 -3px var(--nebula-blue); }
}

@media (max-width: 720px) {
  .section-heading h2 {
    max-width: 100%;
    font-size: 32px;
    line-height: 1.24;
  }
  .section-heading p { line-height: 1.75; }
  .hero-kicker { max-width: 290px; line-height: 1.5; }
  .hero-copy-block h1 { font-size: 41px; line-height: 1.13; }
  .hero-copy-block > p { max-width: 350px; }
  .hero-actions { width: 100%; }
  .button { min-height: 50px; }
  .hero-rail { border-top-color: rgba(82, 168, 255, .32); }
  .page-hero { min-height: 610px; }
  .page-hero-content { padding: 142px 0 78px; }
  .page-hero-content h1 {
    font-size: 33px;
    line-height: 1.2;
    text-wrap: balance;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .page-hero-content > p { max-width: 350px; line-height: 1.78; }
  .page-hero-meta { margin-top: 34px; gap: 12px; font-size: 8px; }
  .page-hero-meta i { width: 36px; }
  .page-hero-telemetry {
    left: 16px;
    right: 16px;
    bottom: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    font-size: 6px;
  }
  .page-hero-telemetry span { gap: 4px; white-space: nowrap; }
  .product-status-strip .container {
    width: 100%;
    min-height: 116px;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 14px;
    overflow: visible;
  }
  .product-status-strip span { grid-column: 1 / -1; }
  .product-status-strip b { min-width: 0; font-size: 9px; }
  .product-status-strip em { display: none; }
  .product-map-section { padding-top: 78px; }
  .product-map { min-height: auto; display: block; }
  .product-orbit {
    min-height: auto;
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .orbit-ring,
  .orbit-axis { display: none; }
  .orbit-core,
  .orbit-node,
  .orbit-node-1,
  .orbit-node-2,
  .orbit-node-3,
  .orbit-node-4,
  .orbit-node-5,
  .orbit-node-6,
  .orbit-node-7,
  .orbit-node-8 {
    position: relative;
    inset: auto;
    width: auto;
    height: 72px;
    min-height: 72px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    transform: none;
    border-radius: 0;
    box-shadow: none;
  }
  .orbit-core::before,
  .orbit-core::after,
  .orbit-core i,
  .orbit-core small { display: none; }
  .orbit-core b,
  .orbit-node b { font-size: 10px; }
  .orbit-node:hover,
  .orbit-node.active { transform: none; }
  .product-map-info { min-height: 390px; padding: 36px 24px; }
  .product-map-info h3 { margin-top: 24px; font-size: 29px; }
  .product-map-info p { font-size: 13px; line-height: 1.8; }
  .product-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-tab {
    width: auto;
    min-width: 0;
    min-height: 66px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
  }
  .product-tab b { font-size: 10px; line-height: 1.25; }
  .product-visual > img { min-height: 520px; }
  .product-info { left: 20px; right: 20px; bottom: 24px; }
  .product-info h3 { max-width: 330px; font-size: 27px; line-height: 1.22; }
  .catalog-body { min-height: 230px; padding: 24px; }
  .catalog-body h3 { max-width: 300px; font-size: 21px; line-height: 1.32; }
  .solution-list-card h3 { max-width: 300px; font-size: 21px; line-height: 1.32; }
  .case-card h3 { font-size: 21px; line-height: 1.32; }
  .footer-pitch h2 { max-width: 350px; font-size: 28px; line-height: 1.3; }
  .footer-system {
    min-height: 58px;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    font-size: 6px;
  }
}

/* V0.02 final visual refinement */
.product-info h3 span,
.product-map-info h3 span {
  display: block;
}

.heading-mobile-line {
  display: inline;
}

.heading-mobile-line::before {
  content: "，";
}

.architecture-page {
  color: var(--white);
  background: #07101c;
  overflow: hidden;
}

.architecture-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 48%, rgba(20, 121, 255, .14), transparent 36%),
    linear-gradient(rgba(82, 168, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82, 168, 255, .06) 1px, transparent 1px);
  background-size: auto, 54px 54px, 54px 54px;
}

.architecture-page .container {
  position: relative;
  z-index: 1;
}

.architecture-page .section-heading h2 {
  color: var(--white);
}

.architecture-page .section-heading p {
  color: rgba(255, 255, 255, .56);
}

.architecture.vertical {
  position: relative;
  gap: 1px;
  padding: 1px;
  background: rgba(82, 168, 255, .18);
  border: 1px solid rgba(82, 168, 255, .2);
  box-shadow: 0 38px 90px rgba(0, 0, 0, .28), inset 0 0 60px rgba(20, 121, 255, .04);
}

.technology-layer,
.technology-layer:nth-child(2),
.technology-layer:nth-child(3) {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  color: rgba(255, 255, 255, .72);
  text-align: left;
  background: rgba(7, 16, 28, .92);
  border: 0;
  border-top: 2px solid rgba(82, 168, 255, .32);
  border-radius: 0;
  appearance: none;
  cursor: pointer;
  opacity: .72;
  overflow: hidden;
  transform: translateY(0);
  transition: opacity .3s ease, transform .4s var(--ease), background .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.technology-layer:nth-child(2) {
  border-top-color: rgba(53, 216, 255, .44);
}

.technology-layer:nth-child(3) {
  border-top-color: rgba(120, 104, 255, .44);
}

.technology-layer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 28%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0;
  transform: translateX(-110%);
}

.technology-layer::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(82, 168, 255, .15);
  transform: rotate(45deg);
  transition: border-color .3s ease, box-shadow .3s ease;
}

.technology-layer:hover,
.technology-layer.active {
  color: var(--white);
  opacity: 1;
  transform: translateY(-8px);
  background: linear-gradient(145deg, rgba(16, 39, 68, .98), rgba(7, 16, 28, .96));
  border-top-color: var(--cyan);
  box-shadow: inset 0 0 52px rgba(20, 121, 255, .09), 0 20px 48px rgba(0, 0, 0, .22);
}

.technology-layer.active::before {
  opacity: 1;
  animation: technologyScan 2.8s linear infinite;
}

.technology-layer:hover::after,
.technology-layer.active::after {
  border-color: rgba(53, 216, 255, .42);
  box-shadow: 0 0 32px rgba(20, 121, 255, .18);
}

@keyframes technologyScan {
  to { transform: translateX(470%); }
}

.technology-layer > div span,
.technology-layer > div small {
  color: var(--nebula-bright);
}

.technology-layer h3 {
  color: var(--white);
}

.technology-layer p,
.technology-layer:nth-child(2) p,
.technology-layer:nth-child(3) p {
  color: rgba(255, 255, 255, .56);
}

.technology-layer ul,
.technology-layer:nth-child(2) ul,
.technology-layer:nth-child(3) ul {
  border-color: rgba(82, 168, 255, .16);
}

.technology-layer li,
.technology-layer:nth-child(2) li,
.technology-layer:nth-child(3) li {
  color: rgba(255, 255, 255, .72);
  border-color: rgba(82, 168, 255, .16);
}

.technology-chain-status {
  --signal-level: 33%;
  min-height: 64px;
  padding: 0 22px;
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  color: rgba(255, 255, 255, .42);
  background: rgba(4, 11, 20, .92);
  border: 1px solid rgba(82, 168, 255, .2);
  border-top: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
}

.technology-chain-status > i {
  height: 2px;
  display: block;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.technology-chain-status > i b {
  width: var(--signal-level);
  height: 100%;
  display: block;
  background: linear-gradient(90deg, var(--nebula-blue), var(--cyan));
  box-shadow: 0 0 16px rgba(53, 216, 255, .5);
  transition: width .55s var(--ease);
}

.technology-chain-status strong {
  color: var(--nebula-bright);
  font-size: 10px;
}

.technology-chain-status em {
  font-style: normal;
  white-space: nowrap;
}

.technology-chain-status.pulse strong {
  animation: statusPulse .55s var(--ease);
}

@keyframes statusPulse {
  0% { opacity: .25; transform: translateY(3px); }
  100% { opacity: 1; transform: translateY(0); }
}

.orbit-node:not(.active),
.orbit-core:not(.active) {
  opacity: .68;
}

.orbit-node:hover,
.orbit-core:hover,
.orbit-node.active,
.orbit-core.active {
  opacity: 1;
}

.orbit-node.active,
.orbit-core.active {
  box-shadow: 0 0 0 1px rgba(53, 216, 255, .24), 0 0 34px rgba(20, 121, 255, .34), inset 0 0 24px rgba(20, 121, 255, .12);
}

.product-map-info.switching > * {
  animation: mapInfoIn .5s var(--ease) both;
}

.product-map-info.switching > *:nth-child(2) { animation-delay: 40ms; }
.product-map-info.switching > *:nth-child(3) { animation-delay: 80ms; }
.product-map-info.switching > *:nth-child(4) { animation-delay: 120ms; }
.product-map-info.switching > *:nth-child(5) { animation-delay: 160ms; }

@keyframes mapInfoIn {
  from { opacity: .22; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 720px) {
  .hero-copy-block h1 strong {
    display: inline-block;
    font-size: .92em;
    white-space: nowrap;
  }

  .heading-mobile-line {
    display: block;
  }

  .heading-mobile-line::before {
    content: "";
  }

  .architecture-page .section-heading h2 {
    max-width: 350px;
    font-size: 31px;
    line-height: 1.25;
  }

  .architecture.vertical {
    gap: 10px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .technology-layer,
  .technology-layer:nth-child(2),
  .technology-layer:nth-child(3) {
    min-height: 320px;
    padding: 26px;
    border: 1px solid rgba(82, 168, 255, .2);
    border-top: 2px solid rgba(82, 168, 255, .4);
    opacity: .78;
  }

  .technology-layer:hover,
  .technology-layer.active {
    transform: none;
    opacity: 1;
    border-color: rgba(53, 216, 255, .65);
  }

  .technology-layer h3 {
    margin-top: 42px;
    font-size: 25px;
  }

  .technology-layer ul {
    margin-top: 28px;
  }

  .technology-chain-status {
    min-height: 88px;
    padding: 16px;
    grid-template-columns: auto 1fr;
    gap: 10px 14px;
  }

  .technology-chain-status > i {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .technology-chain-status strong {
    justify-self: end;
    text-align: right;
  }

  .technology-chain-status em {
    display: none;
  }

  .product-orbit {
    position: relative;
    background:
      radial-gradient(circle at 50% 50%, rgba(20, 121, 255, .16), transparent 34%),
      linear-gradient(rgba(82, 168, 255, .07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(82, 168, 255, .07) 1px, transparent 1px);
    background-size: auto, 36px 36px, 36px 36px;
  }

  .product-orbit::before,
  .product-orbit::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(53, 216, 255, .34), transparent);
  }

  .product-orbit::before {
    left: 50%;
    top: 24px;
    bottom: 24px;
    width: 1px;
  }

  .product-orbit::after {
    left: 24px;
    right: 24px;
    top: 50%;
    height: 1px;
  }

  .orbit-core,
  .orbit-node {
    z-index: 2;
  }

  .orbit-core {
    grid-column: 2;
    grid-row: 2;
    color: var(--white);
    background: #102744;
    border-color: var(--cyan);
    box-shadow: 0 0 30px rgba(20, 121, 255, .3), inset 0 0 20px rgba(20, 121, 255, .12);
  }

  .orbit-node-1 { grid-column: 1; grid-row: 1; }
  .orbit-node-2 { grid-column: 2; grid-row: 1; }
  .orbit-node-3 { grid-column: 3; grid-row: 1; }
  .orbit-node-4 { grid-column: 3; grid-row: 2; }
  .orbit-node-5 { grid-column: 3; grid-row: 3; }
  .orbit-node-6 { grid-column: 2; grid-row: 3; }
  .orbit-node-7 { grid-column: 1; grid-row: 3; }
  .orbit-node-8 { grid-column: 1; grid-row: 2; }

  .product-map-info h3 {
    font-size: 28px;
    line-height: 1.24;
  }
}

/* V0.03: image-2 spatial stages and richer interaction surfaces */
.product-map-section {
  background:
    radial-gradient(circle at 18% 36%, rgba(20, 121, 255, .16), transparent 34%),
    #050b13;
}

.product-map {
  --scene-x: 0px;
  --scene-y: 0px;
  min-height: 720px;
  display: block;
  border-color: rgba(82, 168, 255, .38);
  background: #050b13;
  box-shadow: 0 52px 120px rgba(0, 0, 0, .48), inset 0 0 80px rgba(20, 121, 255, .06);
  transform: none;
  isolation: isolate;
}

.product-map::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(53, 216, 255, .16);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .3);
}

.product-map-scene {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #050b13;
}

.product-map-scene > img {
  width: calc(100% + 28px);
  height: calc(100% + 20px);
  margin: -10px -14px;
  object-fit: cover;
  object-position: center;
  filter: saturate(.92) contrast(1.08) brightness(.74) hue-rotate(-8deg);
  transform: translate3d(var(--scene-x), var(--scene-y), 0) scale(1.035);
  opacity: .9;
  transition: opacity .22s ease, transform .7s var(--ease), filter .5s ease;
}

.product-map-scene > img.switching {
  opacity: .12;
  filter: saturate(.7) contrast(1.05) brightness(.5) blur(2px);
}

.map-scene-shade,
.map-scene-grid,
.map-scene-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.map-scene-shade {
  background:
    linear-gradient(90deg, rgba(3, 9, 17, .12) 0%, rgba(3, 9, 17, .18) 42%, rgba(3, 9, 17, .82) 69%, rgba(3, 9, 17, .97) 100%),
    linear-gradient(0deg, rgba(3, 9, 17, .7), transparent 42%, rgba(3, 9, 17, .22));
}

.map-scene-grid {
  opacity: .35;
  background-image:
    linear-gradient(rgba(82, 168, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82, 168, 255, .12) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.map-scene-scan {
  top: -18%;
  height: 18%;
  background: linear-gradient(to bottom, transparent, rgba(53, 216, 255, .11), transparent);
  border-bottom: 1px solid rgba(53, 216, 255, .52);
  box-shadow: 0 12px 28px rgba(20, 121, 255, .16);
  animation: mapSceneScan 7.5s linear infinite;
}

@keyframes mapSceneScan {
  to { transform: translateY(750px); }
}

.map-stage-hud {
  position: absolute;
  z-index: 4;
  left: 24px;
  right: 24px;
  top: 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  color: rgba(255, 255, 255, .52);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 7px;
  letter-spacing: 0;
}

.map-stage-hud span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--nebula-bright);
}

.map-stage-hud span i {
  width: 6px;
  height: 6px;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(53, 216, 255, .9);
  animation: systemPulse 1.8s ease-in-out infinite;
}

.map-stage-hud b {
  justify-self: center;
  font-weight: 500;
}

.map-stage-hud em {
  font-style: normal;
}

.product-orbit {
  position: absolute;
  z-index: 3;
  inset: 0 38% 0 0;
  min-height: 720px;
  border: 0;
  background: none;
}

.product-orbit .orbit-ring {
  left: 47%;
  top: 58%;
  border-color: rgba(82, 168, 255, .34);
  background: radial-gradient(circle, transparent 54%, rgba(20, 121, 255, .04));
  box-shadow: 0 0 60px rgba(20, 121, 255, .08), inset 0 0 50px rgba(20, 121, 255, .04);
}

.product-orbit .orbit-ring-a { width: 66%; height: 46%; }
.product-orbit .orbit-ring-b { width: 43%; height: 30%; }

.product-orbit .orbit-axis {
  left: 13%;
  right: 11%;
  top: 58%;
  background: linear-gradient(90deg, transparent, rgba(53, 216, 255, .55), transparent);
}

.product-orbit .orbit-core {
  left: 47%;
  top: 58%;
  width: 154px;
  height: 154px;
  background: rgba(7, 22, 40, .72);
  border-color: rgba(53, 216, 255, .72);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 0 0 14px rgba(20, 121, 255, .06), 0 0 72px rgba(20, 121, 255, .3), inset 0 0 36px rgba(20, 121, 255, .16);
}

.product-orbit .orbit-node {
  width: 118px;
  min-height: 62px;
  padding: 10px 12px;
  color: rgba(255, 255, 255, .75);
  background: rgba(4, 13, 24, .66);
  border-color: rgba(82, 168, 255, .42);
  backdrop-filter: blur(12px) saturate(1.16);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
  overflow: visible;
}

.product-orbit .orbit-node::before {
  content: "";
  position: absolute;
  left: 12px;
  top: -18px;
  width: 1px;
  height: 18px;
  background: linear-gradient(to top, rgba(53, 216, 255, .6), transparent);
}

.product-orbit .orbit-node::after {
  content: "";
  position: absolute;
  left: 9px;
  top: -21px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(53, 216, 255, .8);
  background: rgba(3, 10, 19, .9);
  box-shadow: 0 0 14px rgba(53, 216, 255, .75);
  transform: rotate(45deg);
}

.product-orbit .orbit-node:hover,
.product-orbit .orbit-node.active {
  background: rgba(12, 42, 73, .84);
  border-color: var(--cyan);
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px rgba(53, 216, 255, .2), 0 18px 40px rgba(0, 0, 0, .34), 0 0 32px rgba(20, 121, 255, .3);
}

.product-orbit .orbit-node-1 { left: 13%; top: 24%; }
.product-orbit .orbit-node-2 { left: 42%; top: 15%; }
.product-orbit .orbit-node-3 { right: 8%; top: 28%; }
.product-orbit .orbit-node-4 { right: 3%; top: 55%; }
.product-orbit .orbit-node-5 { right: 14%; bottom: 10%; }
.product-orbit .orbit-node-6 { left: 42%; bottom: 5%; }
.product-orbit .orbit-node-7 { left: 10%; bottom: 13%; }
.product-orbit .orbit-node-8 { left: 3%; top: 56%; }

.product-map-info {
  position: absolute;
  z-index: 4;
  top: 86px;
  right: 24px;
  bottom: 24px;
  width: 36%;
  min-width: 420px;
  min-height: 0;
  padding: 42px 38px 34px;
  justify-content: center;
  background: linear-gradient(145deg, rgba(7, 20, 36, .82), rgba(3, 10, 19, .94));
  border: 1px solid rgba(82, 168, 255, .32);
  backdrop-filter: blur(24px) saturate(1.18);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .4), inset 0 0 50px rgba(20, 121, 255, .05);
}

.product-map-info h3 {
  margin-top: 28px;
  font-size: 36px;
}

.product-map-info p {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.85;
}

.product-map-info .tag-row {
  margin-top: 20px;
}

.map-capability-strip {
  margin-top: 24px;
  padding: 14px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border-top: 1px solid rgba(82, 168, 255, .18);
  border-bottom: 1px solid rgba(82, 168, 255, .18);
  color: rgba(255, 255, 255, .34);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 6px;
}

.map-capability-strip span {
  display: grid;
  gap: 4px;
}

.map-capability-strip b {
  color: var(--cyan);
  font-size: 11px;
}

.product-map-info > a {
  margin-top: 24px;
}

.architecture-section {
  position: relative;
  background: #050b13;
  isolation: isolate;
  overflow: hidden;
}

.architecture-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 11, 19, .94), rgba(5, 11, 19, .62) 48%, rgba(5, 11, 19, .9)),
    linear-gradient(0deg, #050b13 2%, transparent 34%, #050b13 98%),
    url("../pages/technology/spatial-platform.png") center / cover no-repeat;
  opacity: .66;
  filter: saturate(.82) hue-rotate(-12deg);
}

.architecture-section .architecture {
  gap: 0;
}

.architecture-section .architecture-node {
  min-height: 330px;
  color: rgba(255, 255, 255, .84);
  background: rgba(4, 13, 24, .62);
  border-color: rgba(82, 168, 255, .24);
  backdrop-filter: blur(16px) saturate(1.12);
  box-shadow: 0 20px 54px rgba(0, 0, 0, .22), inset 0 0 40px rgba(20, 121, 255, .025);
}

.architecture-section .architecture-node p {
  color: rgba(255, 255, 255, .62);
}

.architecture-section .architecture-node i {
  color: rgba(255, 255, 255, .7);
  border-color: rgba(82, 168, 255, .24);
  background: rgba(3, 10, 19, .28);
}

.architecture-section .architecture-node:hover,
.architecture-section .architecture-node.active {
  background: linear-gradient(145deg, rgba(12, 42, 73, .86), rgba(4, 15, 27, .84));
  border-color: rgba(53, 216, 255, .62);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .34), 0 0 34px rgba(20, 121, 255, .13);
}

.architecture-section .architecture-node::before {
  background: linear-gradient(90deg, var(--nebula-blue), var(--cyan));
  box-shadow: 0 0 24px rgba(53, 216, 255, .38);
}

.architecture-section .architecture-flow {
  background: linear-gradient(90deg, rgba(20, 121, 255, .14), rgba(53, 216, 255, .8), rgba(20, 121, 255, .14));
}

.architecture-section .architecture-flow i {
  background: var(--cyan);
  box-shadow: 0 0 20px rgba(53, 216, 255, .9);
}

.architecture-section .architecture-detail {
  padding: 22px 24px;
  background: rgba(3, 10, 19, .64);
  border-color: rgba(82, 168, 255, .24);
  backdrop-filter: blur(14px);
}

.approach-section {
  position: relative;
  color: var(--white);
  background: #050b13;
  isolation: isolate;
  overflow: hidden;
}

.approach-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 11, 20, .94), rgba(4, 11, 20, .56), rgba(4, 11, 20, .88)),
    linear-gradient(0deg, #050b13, transparent 32%, #050b13),
    url("../pages/partners/hero-city.png") center / cover no-repeat;
  filter: saturate(.8) brightness(.62) hue-rotate(-7deg);
}

.approach-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 36%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(53, 216, 255, .62), transparent);
  box-shadow: 0 0 28px rgba(20, 121, 255, .25);
}

.approach-section .container,
.engines-section .container {
  position: relative;
  z-index: 1;
}

.approach-section .section-heading h2,
.engines-section .section-heading h2 {
  color: var(--white);
}

.approach-section .approach-flow {
  gap: 12px;
  border: 0;
}

.approach-section .approach-flow > div {
  min-height: 260px;
  padding: 30px;
  background: linear-gradient(145deg, rgba(10, 28, 48, .72), rgba(3, 10, 19, .82));
  border: 1px solid rgba(82, 168, 255, .28);
  backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .26), inset 0 0 40px rgba(20, 121, 255, .035);
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

.approach-section .approach-flow > div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--nebula-blue), var(--cyan));
  transform: scaleX(.22);
  transform-origin: left;
  transition: transform .45s var(--ease);
}

.approach-section .approach-flow > div:hover {
  transform: translateY(-8px);
  border-color: rgba(53, 216, 255, .68);
  background: linear-gradient(145deg, rgba(14, 49, 83, .82), rgba(3, 13, 24, .88));
  box-shadow: 0 32px 80px rgba(0, 0, 0, .34), 0 0 34px rgba(20, 121, 255, .14);
}

.approach-section .approach-flow > div:hover::before {
  transform: scaleX(1);
}

.approach-section .approach-flow > div:not(:last-child)::after {
  right: -11px;
  top: 38px;
  width: 9px;
  height: 9px;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(53, 216, 255, .9);
}

.approach-section .approach-flow span {
  color: var(--nebula-bright);
}

.approach-section .approach-flow h3 {
  color: var(--white);
}

.approach-section .approach-flow p {
  color: rgba(255, 255, 255, .56);
  line-height: 1.75;
}

.engines-section {
  position: relative;
  background: #050b13;
  isolation: isolate;
  overflow: hidden;
}

.engines-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 9, 17, .96) 0%, rgba(3, 9, 17, .75) 38%, rgba(3, 9, 17, .52) 68%, rgba(3, 9, 17, .82) 100%),
    linear-gradient(0deg, #050b13, transparent 34%, #050b13),
    url("../home/hero/spatial-intelligence.png") center / cover no-repeat;
  opacity: .86;
  filter: saturate(.88) contrast(1.04);
}

.engines-section .engine-grid {
  gap: 10px;
  border: 0;
}

.engines-section .engine-card {
  position: relative;
  min-height: 240px;
  border: 1px solid rgba(82, 168, 255, .24);
  background: linear-gradient(145deg, rgba(7, 21, 38, .7), rgba(3, 10, 19, .84));
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28), inset 0 0 44px rgba(20, 121, 255, .035);
  transition: border-color .3s ease, background .3s ease, box-shadow .35s ease, transform .35s var(--ease);
}

.engines-section .engine-card::before {
  content: "";
  position: absolute;
  right: 28px;
  top: 28px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(53, 216, 255, .28);
  background:
    linear-gradient(90deg, transparent 47%, rgba(53, 216, 255, .42) 48% 52%, transparent 53%),
    linear-gradient(transparent 47%, rgba(53, 216, 255, .42) 48% 52%, transparent 53%);
  box-shadow: inset 0 0 22px rgba(20, 121, 255, .08), 0 0 22px rgba(20, 121, 255, .06);
  transform: rotate(45deg);
  transition: transform .55s var(--ease), border-color .3s ease, box-shadow .3s ease;
}

.engines-section .engine-card:nth-child(2n)::before {
  border-radius: 50%;
}

.engines-section .engine-card:nth-child(3n)::before {
  width: 48px;
  height: 30px;
  top: 34px;
  transform: skewX(-18deg);
}

.engines-section .engine-card:hover {
  border-color: rgba(53, 216, 255, .68);
  background: linear-gradient(145deg, rgba(14, 51, 86, .82), rgba(4, 14, 26, .9));
  box-shadow: 0 30px 76px rgba(0, 0, 0, .34), 0 0 32px rgba(20, 121, 255, .14);
}

.engines-section .engine-card:hover::before {
  border-color: rgba(53, 216, 255, .78);
  box-shadow: inset 0 0 26px rgba(20, 121, 255, .18), 0 0 30px rgba(53, 216, 255, .18);
  transform: rotate(135deg) scale(1.08);
}

.engines-section .engine-card:nth-child(3n):hover::before {
  transform: skewX(-18deg) translateX(-6px) scale(1.08);
}

.engines-section .engine-card > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--nebula-bright);
}

.engines-section .engine-card > span::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid var(--cyan);
  box-shadow: 0 0 14px rgba(53, 216, 255, .7);
  transform: rotate(45deg);
}

.engines-section .engine-card h3 {
  margin-top: 46px;
  color: var(--white);
}

.engines-section .engine-card p {
  line-height: 1.75;
}

@media (max-width: 1024px) {
  .product-map {
    min-height: 920px;
  }

  .product-orbit {
    inset: 54px 0 auto;
    min-height: 460px;
    border: 0;
  }

  .product-map-info {
    top: auto;
    left: 24px;
    right: 24px;
    bottom: 24px;
    width: auto;
    min-width: 0;
    min-height: 370px;
  }

  .map-scene-shade {
    background:
      linear-gradient(0deg, rgba(3, 9, 17, .98) 0%, rgba(3, 9, 17, .72) 48%, rgba(3, 9, 17, .22) 100%),
      linear-gradient(90deg, rgba(3, 9, 17, .26), rgba(3, 9, 17, .5));
  }

  .architecture-section .architecture {
    gap: 12px;
  }
}

@media (max-width: 720px) {
  .product-map {
    min-height: 960px;
    display: block;
  }

  .map-stage-hud {
    left: 16px;
    right: 16px;
    grid-template-columns: 1fr auto;
    font-size: 6px;
  }

  .map-stage-hud b { display: none; }

  .product-map-scene > img {
    object-position: 60% center;
    opacity: .7;
  }

  .map-scene-grid {
    background-size: 38px 38px;
    opacity: .26;
  }

  .product-orbit {
    position: relative;
    inset: auto;
    width: auto;
    min-height: 342px;
    margin: 64px 14px 0;
    padding: 14px;
    gap: 7px;
    border: 1px solid rgba(82, 168, 255, .24);
    background: rgba(3, 10, 19, .54);
    backdrop-filter: blur(10px);
  }

  .product-orbit .orbit-core,
  .product-orbit .orbit-node,
  .product-orbit .orbit-node-1,
  .product-orbit .orbit-node-2,
  .product-orbit .orbit-node-3,
  .product-orbit .orbit-node-4,
  .product-orbit .orbit-node-5,
  .product-orbit .orbit-node-6,
  .product-orbit .orbit-node-7,
  .product-orbit .orbit-node-8 {
    position: relative;
    inset: auto;
    width: auto;
    height: 78px;
    min-height: 78px;
    padding: 10px;
    transform: none;
    border-radius: 0;
  }

  .product-orbit .orbit-core {
    grid-column: 2;
    grid-row: 2;
    background: rgba(12, 42, 73, .88);
  }

  .product-orbit .orbit-node::before,
  .product-orbit .orbit-node::after {
    display: none;
  }

  .product-orbit .orbit-node:hover,
  .product-orbit .orbit-node.active {
    transform: none;
  }

  .product-map-info {
    left: 14px;
    right: 14px;
    bottom: 14px;
    min-height: 490px;
    padding: 30px 24px 26px;
  }

  .product-map-info > div:first-child {
    grid-template-columns: auto 1fr;
  }

  .product-map-info > div:first-child b {
    display: none;
  }

  .product-map-info h3 {
    margin-top: 22px;
    font-size: 28px;
  }

  .product-map-info p {
    font-size: 12px;
    line-height: 1.75;
  }

  .map-capability-strip {
    gap: 8px;
  }

  .architecture-section .architecture-node {
    min-height: 280px;
  }

  .approach-section .approach-flow {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .approach-section .approach-flow > div {
    min-height: 200px;
  }

  .approach-section .approach-flow > div:not(:last-child)::after {
    left: 28px;
    right: auto;
    top: auto;
    bottom: -6px;
  }

  .engines-section .engine-grid {
    grid-template-columns: 1fr;
  }

  .engines-section .engine-card {
    min-height: 210px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-scene-scan,
  .map-stage-hud span i {
    animation: none;
  }

  .product-map-scene > img {
    transform: scale(1.035);
  }
}

/* V0.04: product-evidence workbench */
.product-workbench-section {
  overflow: hidden;
  color: rgba(255, 255, 255, .78);
  background:
    linear-gradient(rgba(82, 168, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82, 168, 255, .045) 1px, transparent 1px),
    #050a11;
  background-size: 56px 56px;
}

.product-workbench-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(20, 121, 255, .13), transparent 32%, transparent 72%, rgba(53, 216, 255, .05));
}

.product-workbench-section .container {
  position: relative;
  z-index: 1;
}

.product-workbench-section .section-heading h2 {
  color: var(--white);
}

.product-workbench-section .section-heading p {
  color: rgba(255, 255, 255, .58);
}

.product-workbench {
  position: relative;
  min-height: 620px;
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr) 342px;
  overflow: hidden;
  border: 1px solid rgba(82, 168, 255, .34);
  background: #07101a;
  box-shadow: 0 42px 100px rgba(0, 0, 0, .42), inset 0 0 64px rgba(20, 121, 255, .035);
}

.product-workbench::before {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(53, 216, 255, .08);
}

.workbench-tabs-wrap {
  position: relative;
  z-index: 2;
  min-width: 0;
  border-right: 1px solid rgba(82, 168, 255, .19);
  background: #070e17;
}

.workbench-group-label {
  min-height: 58px;
  padding: 13px 17px 11px;
  display: grid;
  align-content: center;
  gap: 3px;
  border-bottom: 1px solid rgba(82, 168, 255, .19);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.workbench-group-label span {
  color: var(--nebula-bright);
  font-size: 9px;
  font-weight: 800;
}

.workbench-group-label b {
  color: rgba(255, 255, 255, .32);
  font-size: 7px;
  font-weight: 600;
}

.workbench-tabs {
  display: flex;
  flex-direction: column;
}

.workbench-tab {
  position: relative;
  min-height: 62px;
  padding: 9px 14px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 6px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid rgba(82, 168, 255, .11);
  color: rgba(255, 255, 255, .58);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}

.workbench-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(53, 216, 255, .75);
  transform: scaleY(0);
  transition: transform .24s var(--ease);
}

.workbench-tab > span {
  color: rgba(82, 168, 255, .72);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}

.workbench-tab > b {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-tab > small {
  color: rgba(255, 255, 255, .26);
  font-size: 8px;
  white-space: nowrap;
}

.workbench-tab > i {
  width: 5px;
  height: 5px;
  border: 1px solid rgba(82, 168, 255, .55);
  transform: rotate(45deg);
}

.workbench-tab:hover,
.workbench-tab.active {
  color: var(--white);
  background: linear-gradient(90deg, rgba(20, 121, 255, .2), rgba(20, 121, 255, .035));
}

.workbench-tab.active::before {
  transform: scaleY(1);
}

.workbench-tab.active > span,
.workbench-tab.active > small {
  color: var(--cyan);
}

.workbench-tab.active > i {
  border-color: var(--cyan);
  background: rgba(53, 216, 255, .26);
  box-shadow: 0 0 12px rgba(53, 216, 255, .8);
}

.workbench-visual {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 620px;
  overflow: hidden;
  border-right: 1px solid rgba(82, 168, 255, .19);
  background: #07101a;
  touch-action: pan-y;
}

.workbench-visual > * {
  opacity: 1;
  transform: scale(1);
  transition: opacity .18s ease, transform .34s var(--ease);
}

.workbench-visual.is-changing > * {
  opacity: .18;
  transform: scale(.992);
}

.workbench-media,
.workbench-ai-demo {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 620px;
  overflow: hidden;
  background:
    linear-gradient(rgba(82, 168, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82, 168, 255, .055) 1px, transparent 1px),
    #07121e;
  background-size: 42px 42px;
}

.workbench-media::after {
  content: "";
  position: absolute;
  inset: 48px 18px 64px;
  pointer-events: none;
  border: 1px solid rgba(82, 168, 255, .16);
  box-shadow: inset 0 0 42px rgba(20, 121, 255, .05);
}

.workbench-media > img {
  position: absolute;
  inset: 48px 18px 64px;
  width: calc(100% - 36px);
  height: calc(100% - 112px);
  object-fit: contain;
  object-position: center;
  background: rgba(2, 8, 14, .72);
  filter: saturate(.98) contrast(1.03);
}

.workbench-media-platform > img {
  background: #eaf1f8;
}

.workbench-media-product > img {
  padding: 12px;
}

.workbench-media-evidence > img {
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: #020811;
  filter: saturate(1.02) contrast(1.04) brightness(.94);
}

.workbench-hotspots {
  position: absolute;
  z-index: 5;
  inset: 48px 18px 64px;
  pointer-events: none;
}

.workbench-hotspot {
  position: absolute;
  left: var(--point-x);
  top: var(--point-y);
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  color: #04101b;
  background: rgba(235, 249, 255, .94);
  box-shadow: 0 0 0 5px rgba(23, 124, 255, .16), 0 10px 28px rgba(0, 0, 0, .34);
  pointer-events: auto;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .25s ease, transform .25s var(--ease);
}

.workbench-hotspot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(53, 216, 255, .55);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.72);
}

.workbench-hotspot span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 850;
}

.workbench-hotspot b {
  display: none;
}

.workbench-hotspot:hover,
.workbench-hotspot:focus-visible,
.workbench-hotspot.active {
  color: #00101d;
  border-color: var(--cyan);
  background: var(--cyan);
  box-shadow: 0 0 0 6px rgba(53, 216, 255, .18), 0 0 28px rgba(53, 216, 255, .72);
  outline: none;
  transform: translate(-50%, -50%) scale(1.12);
}

.workbench-hotspot.active::after {
  animation: evidencePointPulse 1.8s ease-out infinite;
}

.workbench-evidence-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -56px;
  min-height: 48px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 108px 132px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, .76);
  background: rgba(4, 12, 21, .96);
  border: 1px solid rgba(82, 168, 255, .2);
  border-left: 2px solid var(--cyan);
  pointer-events: auto;
}

.workbench-evidence-panel small {
  color: rgba(255, 255, 255, .38);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
  font-weight: 750;
}

.workbench-evidence-panel strong {
  color: var(--cyan);
  font-size: 11px;
  line-height: 1.45;
}

.workbench-evidence-panel p {
  color: rgba(255, 255, 255, .58);
  font-size: 9px;
  line-height: 1.55;
}

.workbench-evidence-panel.is-updating > * {
  animation: evidencePanelIn .34s var(--ease) both;
}

.workbench-evidence-panel.is-updating > *:nth-child(2) { animation-delay: 35ms; }
.workbench-evidence-panel.is-updating > *:nth-child(3) { animation-delay: 70ms; }

@keyframes evidencePointPulse {
  0% { opacity: .8; transform: scale(.72); }
  75%, 100% { opacity: 0; transform: scale(1.35); }
}

@keyframes evidencePanelIn {
  from { opacity: .15; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.workbench-visual-grid {
  position: absolute;
  inset: 48px 18px 64px;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 65%, rgba(53, 216, 255, .08));
}

.workbench-visual-bar {
  position: absolute;
  z-index: 3;
  left: 18px;
  right: 18px;
  top: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: rgba(255, 255, 255, .46);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
}

.workbench-visual-bar span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--nebula-bright);
  font-weight: 800;
}

.workbench-visual-bar span i {
  width: 6px;
  height: 6px;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(53, 216, 255, .85);
}

.workbench-visual-bar em {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-sequence {
  position: absolute;
  z-index: 3;
  left: 34px;
  right: 34px;
  bottom: 19px;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .42);
  font-size: 9px;
}

.report-sequence span {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.report-sequence span b {
  color: var(--nebula-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.report-sequence span.active {
  color: var(--white);
}

.report-sequence > i {
  height: 1px;
  background: linear-gradient(90deg, rgba(82, 168, 255, .7), rgba(82, 168, 255, .12));
}

.workbench-details {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 34px 30px 28px;
  display: flex;
  flex-direction: column;
  background: #07101b;
}

.workbench-details-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(82, 168, 255, .15);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
}

.workbench-details-meta span {
  color: var(--nebula-bright);
  font-weight: 800;
}

.workbench-details-meta b {
  color: rgba(255, 255, 255, .34);
  font-weight: 600;
}

.workbench-copy {
  padding-top: 34px;
}

.workbench-copy > small {
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
  font-weight: 800;
}

.workbench-copy h3 {
  margin-top: 17px;
  color: var(--white);
  font-size: 29px;
  line-height: 1.24;
}

.workbench-copy h3 span {
  display: block;
}

.workbench-copy > strong {
  margin-top: 16px;
  display: block;
  color: var(--nebula-bright);
  font-size: 13px;
  line-height: 1.55;
}

.workbench-copy > p {
  margin-top: 14px;
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
  line-height: 1.82;
}

.workbench-copy .tag-row {
  margin-top: 18px;
  gap: 6px;
}

.workbench-copy .tag-row i {
  padding: 6px 8px;
  color: rgba(255, 255, 255, .68);
  border-color: rgba(82, 168, 255, .25);
  background: rgba(20, 121, 255, .06);
  font-size: 9px;
}

.workbench-details.is-updating .workbench-copy > * {
  animation: workbenchCopyIn .42s var(--ease) both;
}

.workbench-details.is-updating .workbench-copy > *:nth-child(2) { animation-delay: 30ms; }
.workbench-details.is-updating .workbench-copy > *:nth-child(3) { animation-delay: 60ms; }
.workbench-details.is-updating .workbench-copy > *:nth-child(4) { animation-delay: 90ms; }
.workbench-details.is-updating .workbench-copy > *:nth-child(5) { animation-delay: 120ms; }

@keyframes workbenchCopyIn {
  from { opacity: .2; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.workbench-details-actions {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(82, 168, 255, .15);
}

.workbench-details-actions > a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
}

.workbench-details-actions > a b {
  color: var(--cyan);
  font-size: 18px;
}

.workbench-details-actions > div {
  display: flex;
  gap: 6px;
}

.workbench-details-actions button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(82, 168, 255, .32);
  color: var(--nebula-bright);
  background: rgba(20, 121, 255, .06);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.workbench-details-actions button:hover {
  color: #03101c;
  border-color: var(--cyan);
  background: var(--cyan);
}

.workbench-ai-demo {
  padding: 60px 16px 38px;
}

.ai-demo-layout {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(112px, .9fr) minmax(220px, 1.8fr) minmax(116px, 1fr);
  gap: 10px;
}

.ai-demo-library,
.ai-demo-chat,
.ai-demo-flow {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(82, 168, 255, .18);
  background: rgba(4, 13, 23, .84);
  box-shadow: inset 0 0 32px rgba(20, 121, 255, .035);
}

.ai-demo-library,
.ai-demo-flow {
  padding: 18px 14px;
}

.ai-demo-library small,
.ai-demo-flow small {
  display: block;
  color: var(--nebula-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 7px;
}

.ai-demo-library > strong,
.ai-demo-flow > strong {
  margin: 7px 0 18px;
  display: block;
  color: var(--white);
  font-size: 13px;
}

.ai-demo-library > span {
  min-height: 43px;
  padding: 9px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(82, 168, 255, .1);
  color: rgba(255, 255, 255, .5);
  font-size: 9px;
}

.ai-demo-library > span.active {
  color: var(--white);
  background: rgba(20, 121, 255, .13);
}

.ai-demo-library > span b {
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
}

.ai-demo-chat {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
}

.ai-demo-chat-head {
  min-height: 48px;
  margin: 0 -14px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(82, 168, 255, .14);
  color: rgba(255, 255, 255, .38);
  font-size: 7px;
}

.ai-demo-chat-head span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
}

.ai-demo-chat-head span i {
  width: 6px;
  height: 6px;
  background: #60d394;
  box-shadow: 0 0 12px rgba(96, 211, 148, .65);
}

.ai-message {
  max-width: 88%;
  margin-top: 18px;
  padding: 11px 12px;
  font-size: 10px;
  line-height: 1.6;
}

.ai-message.user {
  align-self: flex-end;
  color: var(--white);
  border: 1px solid rgba(53, 216, 255, .2);
  background: rgba(20, 121, 255, .18);
}

.ai-message.assistant {
  position: relative;
  padding-left: 34px;
  color: rgba(255, 255, 255, .68);
  border-left: 2px solid var(--cyan);
  background: rgba(255, 255, 255, .035);
}

.ai-message.assistant > span {
  position: absolute;
  left: 10px;
  top: 11px;
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 800;
}

.ai-message.assistant > div {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ai-message.assistant i {
  padding: 3px 5px;
  color: var(--nebula-bright);
  border: 1px solid rgba(82, 168, 255, .2);
  font-size: 7px;
  font-style: normal;
}

.ai-demo-input {
  min-height: 44px;
  margin-top: auto;
  padding: 0 8px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(82, 168, 255, .22);
  color: rgba(255, 255, 255, .25);
  font-size: 8px;
}

.ai-demo-input b {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #03101c;
  background: var(--cyan);
}

.ai-demo-flow > div {
  min-height: 49px;
  padding: 8px;
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(82, 168, 255, .12);
  color: rgba(255, 255, 255, .46);
}

.ai-demo-flow > div.active {
  color: var(--white);
  border-color: rgba(53, 216, 255, .5);
  background: rgba(20, 121, 255, .1);
}

.ai-demo-flow > div span {
  color: var(--nebula-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
}

.ai-demo-flow > div p {
  font-size: 9px;
  line-height: 1.25;
}

.ai-demo-flow > div b {
  grid-column: 2;
  color: rgba(255, 255, 255, .28);
  font-size: 7px;
  font-weight: 500;
}

.ai-demo-flow > div.active b {
  color: var(--amber);
}

.ai-demo-flow > i {
  width: 1px;
  height: 12px;
  margin-left: 18px;
  display: block;
  background: rgba(82, 168, 255, .28);
}

.ai-demo-flow > button {
  width: 100%;
  min-height: 38px;
  margin-top: 16px;
  border: 1px solid rgba(53, 216, 255, .4);
  color: var(--cyan);
  background: rgba(53, 216, 255, .06);
  font-size: 9px;
}

.ai-demo-disclaimer {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 13px;
  color: rgba(255, 255, 255, .28);
  font-size: 7px;
  text-align: right;
}

@media (max-width: 1180px) {
  .product-workbench {
    grid-template-columns: 208px minmax(0, 1fr);
  }

  .workbench-visual {
    border-right: 0;
  }

  .workbench-details {
    min-height: 330px;
    grid-column: 1 / -1;
    padding: 30px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px 34px;
    border-top: 1px solid rgba(82, 168, 255, .19);
  }

  .workbench-details-meta {
    grid-column: 1 / -1;
  }

  .workbench-copy {
    padding-top: 10px;
  }

  .workbench-details-actions {
    min-width: 230px;
    margin-top: 0;
    align-self: end;
  }
}

@media (max-width: 720px) {
  .product-workbench-section {
    padding-top: 78px;
    background-size: 38px 38px;
  }

  .product-workbench-section .section-heading {
    margin-bottom: 26px;
  }

  .product-workbench-section .section-heading h2 {
    font-size: 32px;
    line-height: 1.18;
  }

  .product-workbench-section .section-heading p {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.75;
  }

  .product-workbench {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .workbench-tabs-wrap {
    order: 1;
    border-right: 0;
    border-bottom: 1px solid rgba(82, 168, 255, .19);
  }

  .workbench-group-label {
    min-height: 46px;
    padding: 9px 13px;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .workbench-group-label b {
    text-align: right;
  }

  .workbench-tabs {
    flex-direction: row;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .workbench-tabs::-webkit-scrollbar {
    display: none;
  }

  .workbench-tab {
    min-width: 150px;
    min-height: 58px;
    padding: 8px 11px;
    grid-template-columns: 24px minmax(0, 1fr) 6px;
    gap: 6px;
    flex: 0 0 150px;
    border-right: 1px solid rgba(82, 168, 255, .11);
    border-bottom: 0;
    scroll-snap-align: center;
  }

  .workbench-tab::before {
    left: 0;
    right: 0;
    top: auto;
    width: auto;
    height: 2px;
    transform: scaleX(0);
  }

  .workbench-tab.active::before {
    transform: scaleX(1);
  }

  .workbench-tab > b {
    font-size: 12px;
  }

  .workbench-tab > small {
    display: none;
  }

  .workbench-visual {
    order: 2;
    min-height: 390px;
    height: 390px;
    border-right: 0;
    border-bottom: 1px solid rgba(82, 168, 255, .19);
  }

  .workbench-media,
  .workbench-ai-demo {
    min-height: 390px;
    height: 390px;
  }

  .workbench-media::after,
  .workbench-visual-grid {
    inset: 44px 10px 146px;
  }

  .workbench-media > img {
    inset: 44px 10px 146px;
    width: calc(100% - 20px);
    height: calc(100% - 190px);
  }

  .workbench-media-product > img {
    padding: 5px;
  }

  .workbench-media-evidence > img {
    padding: 0;
    object-fit: cover;
    object-position: center;
  }

  .workbench-visual-bar {
    left: 12px;
    right: 12px;
    height: 44px;
  }

  .workbench-visual-bar em {
    display: none;
  }

  .workbench-hotspots {
    inset: auto 10px 8px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .workbench-hotspot {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: 42px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 2px;
    color: rgba(255, 255, 255, .66);
    background: rgba(12, 27, 44, .95);
    border-color: rgba(82, 168, 255, .28);
    box-shadow: none;
    transform: none;
  }

  .workbench-hotspot::after {
    display: none;
  }

  .workbench-hotspot span {
    color: var(--nebula-bright);
    font-size: 8px;
  }

  .workbench-hotspot b {
    display: block;
    overflow: hidden;
    color: inherit;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workbench-hotspot:hover,
  .workbench-hotspot:focus-visible,
  .workbench-hotspot.active {
    color: #03101b;
    background: var(--cyan);
    border-color: var(--cyan);
    box-shadow: none;
    transform: none;
  }

  .workbench-hotspot.active span,
  .workbench-hotspot.active b {
    color: #03101b;
  }

  .workbench-evidence-panel {
    position: static;
    min-height: 76px;
    padding: 10px 11px;
    grid-column: 1 / -1;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 3px 10px;
  }

  .workbench-evidence-panel small {
    grid-row: 1 / 3;
  }

  .workbench-evidence-panel strong {
    font-size: 10px;
  }

  .workbench-evidence-panel p {
    font-size: 9px;
  }

  .report-sequence {
    left: 18px;
    right: 18px;
    bottom: 15px;
    gap: 5px;
    font-size: 7px;
  }

  .workbench-details {
    order: 3;
    min-height: 0;
    padding: 25px 20px 20px;
    display: flex;
    border-top: 0;
  }

  .workbench-details-meta {
    padding-bottom: 14px;
  }

  .workbench-copy {
    padding-top: 25px;
  }

  .workbench-copy h3 {
    margin-top: 14px;
    font-size: 27px;
  }

  .workbench-copy > strong {
    margin-top: 13px;
    font-size: 12px;
  }

  .workbench-copy > p {
    font-size: 12px;
    line-height: 1.75;
  }

  .workbench-details-actions {
    min-width: 0;
    margin-top: 25px;
    padding-top: 18px;
  }

  .workbench-details-actions > a {
    min-height: 48px;
  }

  .workbench-details-actions button {
    width: 48px;
    height: 48px;
  }

  .workbench-ai-demo {
    padding: 52px 10px 28px;
  }

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

  .ai-demo-library,
  .ai-demo-flow {
    display: none;
  }

  .ai-demo-chat {
    padding-bottom: 10px;
  }

  .ai-message {
    margin-top: 12px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .ai-demo-disclaimer {
    left: 12px;
    right: 12px;
    bottom: 8px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workbench-visual > *,
  .workbench-details.is-updating .workbench-copy > *,
  .workbench-hotspot.active::after,
  .workbench-evidence-panel.is-updating > * {
    animation: none;
    transition: none;
  }
}
/* V0.05: production homepage, real product video and restrained spatial motion */

.home-hero {
  height: min(900px, 94svh);
  min-height: 760px;
  max-height: 900px;
  isolation: isolate;
  background: #050a12;
}

.hero-media,
.hero-media video,
.hero-media-shade,
.hero-media-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-media {
  z-index: 0;
  overflow: hidden;
  background: #07101d;
}

.hero-media video {
  object-fit: cover;
  object-position: 58% center;
  opacity: .8;
  filter: saturate(.88) contrast(1.1) brightness(.72);
  transform: scale(1.012);
  transition: opacity .4s ease, filter .4s ease;
}

.home-hero.video-paused .hero-media video {
  opacity: .7;
}

.hero-media-shade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(3, 9, 18, .98) 0%, rgba(3, 9, 18, .92) 32%, rgba(3, 9, 18, .36) 64%, rgba(3, 9, 18, .2) 100%),
    linear-gradient(0deg, rgba(3, 8, 15, .98) 0%, rgba(3, 8, 15, .05) 36%, rgba(3, 8, 15, .34) 100%);
}

.hero-media-noise {
  z-index: 2;
  opacity: .14;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 74% 45%, rgba(20, 121, 255, .14), transparent 34%);
  mix-blend-mode: screen;
}

.home-hero::before {
  z-index: 2;
  opacity: .72;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .8) 48%, transparent 82%);
}

.home-hero .hero-grid,
.home-hero .spatial-canvas,
.home-hero .hero-scan {
  z-index: 2;
}

.home-hero .hero-content {
  z-index: 4;
  width: min(1440px, calc(100% - 64px));
  min-height: 100%;
  padding: 132px 0 152px;
  align-items: center;
}

.home-hero .hero-copy-block {
  width: min(610px, 50vw);
}

.home-hero .hero-kicker {
  color: rgba(255, 255, 255, .62);
  font-size: 10px;
}

.home-hero .hero-copy-block h1 {
  margin-top: 25px;
  font-size: 68px;
  font-weight: 760;
  line-height: 1.02;
}

.home-hero .hero-copy-block h1 span,
.home-hero .hero-copy-block h1 strong {
  display: block;
}

.home-hero .hero-copy-block h1 strong {
  margin-top: 8px;
  color: #62ddff;
  font-weight: inherit;
  text-shadow: 0 0 42px rgba(20, 121, 255, .28);
}

.hero-claim {
  margin-top: 26px;
  color: var(--white);
  font-size: 20px;
  font-weight: 720;
}

.home-hero .hero-summary {
  max-width: 570px;
  margin-top: 10px;
  color: rgba(255, 255, 255, .66);
  font-size: 15px;
  line-height: 1.85;
}

.home-hero .hero-actions {
  margin-top: 30px;
}

.hero-trust {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  color: rgba(255, 255, 255, .48);
  font-size: 10px;
  font-weight: 650;
}

.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.hero-trust i,
.hero-product-caption > div > span i {
  width: 6px;
  height: 6px;
  display: inline-block;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(53, 216, 255, .8);
  animation: systemPulse 1.8s ease-in-out infinite;
}

.hero-product-caption {
  position: absolute;
  right: 0;
  bottom: 174px;
  width: 390px;
  padding: 24px 0 4px 25px;
  color: var(--white);
  border-left: 2px solid var(--cyan);
  background: linear-gradient(90deg, rgba(4, 11, 20, .72), rgba(4, 11, 20, 0));
  text-shadow: 0 2px 16px rgba(0, 0, 0, .54);
  transition: opacity .18s ease, transform .18s ease;
}

.hero-product-caption.switching {
  opacity: 0;
  transform: translateY(8px);
}

.hero-product-caption > div,
.hero-product-caption > div > span {
  display: flex;
  align-items: center;
}

.hero-product-caption > div {
  justify-content: space-between;
  gap: 18px;
  color: rgba(255, 255, 255, .5);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
}

.hero-product-caption > div > span {
  gap: 8px;
}

.hero-product-caption > div em {
  font-style: normal;
  white-space: nowrap;
}

.hero-product-caption h2 {
  margin-top: 13px;
  color: var(--white);
  font-size: 23px;
  line-height: 1.35;
}

.hero-product-caption p {
  margin-top: 9px;
  color: rgba(255, 255, 255, .6);
  font-size: 12px;
  line-height: 1.7;
}

.hero-product-caption > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: var(--white);
  font-size: 11px;
  font-weight: 760;
}

.hero-product-caption > a b {
  color: var(--cyan);
}

.hero-mode-rail {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 0;
  height: 104px;
  padding: 0 max(32px, calc((100% - 1440px) / 2));
  display: grid;
  grid-template-columns: 160px repeat(3, minmax(170px, 220px)) 1fr;
  color: var(--white);
  border-top: 1px solid rgba(82, 168, 255, .3);
  background: rgba(3, 9, 17, .82);
  backdrop-filter: blur(18px);
}

.hero-mode-label {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, .38);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
}

.hero-mode {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-content: center;
  padding: 0 20px;
  text-align: left;
  color: rgba(255, 255, 255, .46);
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .1);
  cursor: pointer;
  overflow: hidden;
  transition: color .25s ease, background .25s ease;
}

.hero-mode span {
  color: var(--nebula-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}

.hero-mode b {
  font-size: 13px;
}

.hero-mode i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--nebula-blue), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}

.hero-mode:hover,
.hero-mode.active {
  color: var(--white);
  background: rgba(20, 121, 255, .1);
}

.hero-mode.active i {
  transform: scaleX(1);
}

.hero-mode-rail > a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  color: rgba(255, 255, 255, .45);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
}

.hero-mode-rail > a i {
  color: var(--cyan);
  font-size: 18px;
  font-style: normal;
}

.company {
  padding-bottom: 94px;
  overflow: hidden;
}

.stat-strip {
  margin-top: 76px;
}

.stat-strip strong {
  color: #0b4fab;
}

.capability-marquee {
  margin-top: 72px;
  padding: 17px 0;
  color: rgba(19, 25, 32, .58);
  border-top: 1px solid #cbd2d8;
  border-bottom: 1px solid #cbd2d8;
  overflow: hidden;
}

.capability-marquee > div {
  width: max-content;
  display: flex;
  align-items: center;
  animation: capabilityFlow 28s linear infinite;
}

.capability-marquee span {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  font-size: 12px;
  font-weight: 720;
  white-space: nowrap;
}

.capability-marquee i {
  width: 5px;
  height: 5px;
  display: block;
  background: var(--nebula-blue);
  transform: rotate(45deg);
}

@keyframes capabilityFlow {
  to { transform: translateX(-50%); }
}

.footer-pitch > p {
  max-width: 520px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
}

.footer-contact {
  width: min(1440px, calc(100% - 80px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: .9fr 1fr 1.5fr .8fr;
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.footer-contact > div {
  min-height: 118px;
  padding: 24px 24px 22px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, .1);
}

.footer-contact > div + div {
  padding-left: 24px;
}

.footer-contact > div:last-child {
  border-right: 0;
}

.footer-contact small {
  color: rgba(255, 255, 255, .34);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
}

.footer-contact a,
.footer-contact span {
  margin-top: 8px;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  line-height: 1.65;
}

.footer-contact a:hover {
  color: var(--cyan);
}

@media (max-width: 1180px) {
  .home-hero .hero-content { width: calc(100% - 48px); }
  .home-hero .hero-copy-block { width: 570px; }
  .home-hero .hero-copy-block h1 { font-size: 60px; }
  .hero-product-caption { right: 0; width: 330px; }
  .hero-mode-rail { grid-template-columns: 110px repeat(3, minmax(150px, 190px)) 1fr; }
  .footer-contact { width: calc(100% - 48px); grid-template-columns: 1fr 1fr; }
  .footer-contact > div:nth-child(2) { border-right: 0; }
}

@media (max-width: 1024px) {
  .home-hero { min-height: 740px; }
  .home-hero .hero-copy-block { width: 560px; }
  .home-hero .hero-copy-block h1 { font-size: 56px; }
  .hero-product-caption { display: none; }
  .hero-mode-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 24px; }
  .hero-mode-label,
  .hero-mode-rail > a { display: none; }
  .hero-mode:first-of-type { border-left: 0; }
}

@media (max-width: 720px) {
  .site-header .topbar,
  .site-header.scrolled .topbar {
    width: calc(100% - 28px);
    height: 66px;
    gap: 10px;
  }

  .site-header .brand {
    width: 142px;
  }

  .site-header .brand img {
    height: 34px;
  }

  .site-header .header-actions {
    margin-left: auto;
    gap: 8px;
  }

  .site-header .header-cta {
    min-width: 82px;
    height: 38px;
    font-size: 11px;
  }

  .site-header .menu-btn {
    width: 40px;
    height: 40px;
  }

  .home-hero {
    height: 92svh;
    min-height: 710px;
    max-height: 790px;
  }

  .hero-media video {
    object-position: 66% center;
    opacity: .66;
    filter: saturate(.9) contrast(1.08) brightness(.6);
  }

  .hero-media-shade {
    background:
      linear-gradient(90deg, rgba(3, 9, 18, .94), rgba(3, 9, 18, .46)),
      linear-gradient(0deg, rgba(3, 8, 15, .98) 0%, rgba(3, 8, 15, .38) 48%, rgba(3, 8, 15, .62) 100%);
  }

  .home-hero .hero-content {
    width: calc(100% - 36px);
    padding: 98px 0 118px;
    align-items: flex-start;
  }

  .home-hero .hero-copy-block {
    width: 100%;
  }

  .home-hero .hero-kicker {
    max-width: 100%;
    font-size: 8px;
    white-space: nowrap;
  }

  .home-hero .hero-copy-block h1 {
    margin-top: 23px;
    font-size: 44px;
    line-height: 1.04;
    overflow-wrap: normal;
  }

  .home-hero .hero-copy-block h1 strong {
    margin-top: 7px;
  }

  .hero-claim {
    max-width: 340px;
    margin-top: 24px;
    font-size: 17px;
    line-height: 1.55;
  }

  .home-hero .hero-summary {
    max-width: 340px;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.72;
  }

  .home-hero .hero-actions {
    width: 100%;
    margin-top: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .home-hero .hero-actions .button {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 12px;
    font-size: 12px;
  }

  .hero-trust {
    margin-top: 20px;
    gap: 6px 12px;
    font-size: 8px;
  }

  .hero-trust span:nth-child(2) {
    display: none;
  }

  .hero-mode-rail {
    height: 94px;
    padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-mode {
    grid-template-columns: 1fr;
    align-content: center;
    justify-items: center;
    gap: 4px;
    padding: 0 4px;
    text-align: center;
  }

  .hero-mode span { font-size: 8px; }
  .hero-mode b { font-size: 11px; }

  .company {
    padding-bottom: 72px;
  }

  .stat-strip {
    margin-top: 52px;
  }

  .stat-strip > div {
    min-height: 126px;
    padding: 20px;
  }

  .stat-strip strong {
    font-size: 34px;
  }

  .stat-strip span {
    max-width: 140px;
    font-size: 11px;
  }

  .capability-marquee {
    margin-top: 48px;
  }

  .footer-contact {
    width: calc(100% - 32px);
    grid-template-columns: 1fr;
  }

  .footer-contact > div,
  .footer-contact > div + div {
    min-height: 88px;
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }

  .footer-contact > div:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .capability-marquee > div { animation: none; }
  .hero-media video { transform: none; }
}

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.error-page {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: var(--white);
  background: #050a12;
  overflow: hidden;
}

.error-grid {
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image: linear-gradient(rgba(82, 168, 255, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(82, 168, 255, .1) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
}

.error-content {
  position: relative;
  z-index: 1;
  padding: 150px 0 100px;
}

.error-content > span {
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}

.error-content > strong {
  display: block;
  margin-top: 14px;
  color: rgba(82, 168, 255, .12);
  font-size: 180px;
  line-height: .8;
}

.error-content h1 {
  margin-top: 26px;
  font-size: 44px;
}

.error-content p {
  max-width: 560px;
  margin-top: 18px;
  color: rgba(255, 255, 255, .58);
}

.error-content > div {
  margin-top: 32px;
  display: flex;
  gap: 12px;
}

@media (max-width: 720px) {
  .error-content > strong { font-size: 112px; }
  .error-content h1 { font-size: 30px; }
  .error-content > div { display: grid; grid-template-columns: 1fr; }
}

.product-proof-section {
  color: var(--white);
  background: #070d16;
  scroll-margin-top: 128px;
}

.product-proof-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 70px;
  align-items: start;
}

.product-proof-section .section-heading {
  margin-bottom: 0;
}

.product-proof-section .section-heading h2 {
  color: var(--white);
  font-size: 38px;
}

.product-proof-section .section-heading p {
  color: rgba(255, 255, 255, .54);
  font-size: 14px;
}

.product-proof-meta {
  margin-top: 34px;
  display: grid;
  gap: 9px;
  color: rgba(255, 255, 255, .38);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
}

.product-proof-meta span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cyan);
}

.product-proof-meta i {
  width: 6px;
  height: 6px;
  display: block;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(53, 216, 255, .8);
}

.product-proof-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #02050a;
  border: 1px solid rgba(82, 168, 255, .28);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .26);
}

.product-proof-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.product-proof-media figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  color: var(--white);
  background: rgba(4, 10, 18, .76);
  border-left: 2px solid var(--cyan);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.product-proof-media figcaption span {
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
}

.product-proof-media figcaption b {
  font-size: 12px;
}

@media (max-width: 1024px) {
  .product-proof-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }
}

@media (max-width: 720px) {
  .product-proof-section { scroll-margin-top: 120px; }
  .product-proof-section .section-heading h2 { font-size: 29px; }
  .product-proof-section .section-heading p { font-size: 13px; }
  .product-proof-media figcaption { left: 10px; right: 10px; bottom: 10px; }
  .product-proof-media figcaption b { font-size: 10px; }
}

/* V0.06: cinematic image-2 heroes with contained product-video evidence */

.hero-media-art,
.hero-media-shade,
.hero-media-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-media-art {
  inset: -14px;
  width: calc(100% + 28px);
  height: calc(100% + 28px);
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.05) brightness(.88);
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(1.025);
  animation: v006HeroBreath 18s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes v006HeroBreath {
  from { transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(1.025); }
  to { transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(1.065); }
}

.hero-media-shade {
  background:
    linear-gradient(90deg, rgba(2, 8, 16, .98) 0%, rgba(2, 8, 16, .78) 35%, rgba(2, 8, 16, .13) 64%, rgba(2, 8, 16, .08) 100%),
    linear-gradient(0deg, rgba(2, 7, 14, .94) 0%, rgba(2, 7, 14, .08) 42%, rgba(2, 7, 14, .34) 100%);
}

.hero-media-noise {
  opacity: .1;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 5px),
    linear-gradient(115deg, transparent 54%, rgba(53, 216, 255, .08) 72%, transparent 86%);
}

.hero-demo-dock {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 128px;
  width: 370px;
  overflow: hidden;
  color: var(--white);
  border: 1px solid rgba(82, 168, 255, .38);
  background: rgba(3, 10, 19, .8);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .48), inset 0 0 42px rgba(20, 121, 255, .05);
  backdrop-filter: blur(18px) saturate(1.15);
  transition: opacity .18s ease, transform .24s var(--ease), border-color .24s ease;
}

.hero-demo-dock::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  border-top: 2px solid var(--cyan);
  box-shadow: inset 0 0 0 1px rgba(53, 216, 255, .04);
}

.hero-demo-dock.switching {
  opacity: .3;
  transform: translateY(8px);
  border-color: rgba(53, 216, 255, .7);
}

.hero-demo-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #02060b;
  border-bottom: 1px solid rgba(82, 168, 255, .2);
}

.hero-demo-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 22px rgba(53, 216, 255, .75);
  animation: v006DemoScan 5.5s linear infinite;
}

.hero-demo-media::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(4, 20, 39, .34), rgba(4, 20, 39, .04) 62%),
    linear-gradient(0deg, rgba(2, 8, 15, .44), transparent 54%);
}

@keyframes v006DemoScan {
  0% { top: 4%; opacity: 0; }
  14%, 76% { opacity: .76; }
  100% { top: 96%; opacity: 0; }
}

.hero-demo-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.68) contrast(1.16) brightness(.56) hue-rotate(3deg);
}

.hero-demo-live {
  position: absolute;
  z-index: 2;
  left: 12px;
  top: 12px;
  min-height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .74);
  background: rgba(2, 8, 15, .72);
  border: 1px solid rgba(82, 168, 255, .26);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
  backdrop-filter: blur(10px);
}

.hero-demo-live i,
.hero-demo-copy > span i {
  width: 6px;
  height: 6px;
  display: inline-block;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(53, 216, 255, .8);
  animation: systemPulse 1.8s ease-in-out infinite;
}

.hero-demo-copy {
  padding: 17px 18px 18px;
}

.hero-demo-copy > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .48);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
}

.hero-demo-copy h2 {
  margin-top: 10px;
  color: var(--white);
  font-size: 20px;
  line-height: 1.34;
}

.hero-demo-copy p {
  margin-top: 7px;
  color: rgba(255, 255, 255, .56);
  font-size: 11px;
  line-height: 1.65;
}

.hero-demo-copy > a {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-size: 10px;
  font-weight: 760;
}

.hero-demo-copy > a b {
  color: var(--cyan);
}

body[data-page="products"] .page-hero {
  min-height: 700px;
  background: #020811;
}

body[data-page="products"] .page-hero-image {
  background:
    linear-gradient(90deg, rgba(2, 8, 16, .98) 0%, rgba(2, 8, 16, .8) 34%, rgba(2, 8, 16, .14) 64%, rgba(2, 8, 16, .05) 100%),
    linear-gradient(0deg, rgba(2, 7, 14, .88) 0%, rgba(2, 7, 14, .02) 45%, rgba(2, 7, 14, .28) 100%),
    var(--page-image) 60% center / cover no-repeat;
  filter: saturate(1.06) contrast(1.08) brightness(.92);
}

body[data-page="products"] .page-hero-content {
  padding-bottom: 96px;
}

body[data-page="products"] .page-hero-content h1 {
  font-size: 66px;
  text-shadow: 0 8px 34px rgba(0, 0, 0, .46);
}

body[data-page="products"] .page-hero-content > p {
  max-width: 650px;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 4px 24px rgba(0, 0, 0, .56);
}

.workbench-media-platform > img {
  padding: 0;
  object-fit: cover;
  object-position: 58% center;
  background: #020811;
  filter: saturate(1.04) contrast(1.08) brightness(.88);
}

@media (max-width: 1180px) {
  .hero-demo-dock {
    width: 332px;
  }

  .hero-demo-copy h2 {
    font-size: 18px;
  }
}

@media (max-width: 1024px) {
  .hero-demo-dock {
    display: none;
  }

  body[data-page="products"] .page-hero-image {
    background-position: center, center, 66% center;
  }
}

@media (max-width: 720px) {
  .hero-media-art {
    object-position: 42% center;
    filter: saturate(1.02) contrast(1.04) brightness(.7);
  }

  .hero-media-shade {
    background:
      linear-gradient(90deg, rgba(2, 8, 16, .92), rgba(2, 8, 16, .32)),
      linear-gradient(0deg, rgba(2, 7, 14, .97) 0%, rgba(2, 7, 14, .24) 48%, rgba(2, 7, 14, .5) 100%);
  }

  body[data-page="products"] .page-hero {
    min-height: 650px;
  }

  body[data-page="products"] .page-hero-image {
    background:
      linear-gradient(90deg, rgba(2, 8, 16, .92), rgba(2, 8, 16, .28)),
      linear-gradient(0deg, rgba(2, 7, 14, .95) 0%, rgba(2, 7, 14, .18) 56%, rgba(2, 7, 14, .48) 100%),
      var(--page-image) 68% center / cover no-repeat;
  }

  body[data-page="products"] .page-hero-content {
    padding-bottom: 78px;
  }

  body[data-page="products"] .page-hero-content h1 {
    font-size: 44px;
  }

  .workbench-media-platform > img {
    object-position: 64% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media-art {
    animation: none;
    transform: scale(1.025);
  }

  .hero-demo-media::after {
    animation: none;
  }
}

/* Buyer journey, evidence and conversion system */

:root {
  --v007-blue: #1479ff;
  --v007-blue-bright: #58a9ff;
  --v007-cyan: #35d8ff;
  --v007-night: #040a12;
  --v007-panel: #0b1420;
}

.buyer-section,
.solution-role-section,
.product-contract-section {
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(20, 121, 255, .08) 1px, transparent 1px) 0 0 / 88px 88px,
    linear-gradient(rgba(20, 121, 255, .08) 1px, transparent 1px) 0 0 / 88px 88px,
    radial-gradient(circle at 72% 16%, rgba(20, 121, 255, .16), transparent 34%),
    var(--v007-night);
}

.buyer-section .section-heading h2,
.buyer-section .section-heading p,
.solution-role-section .section-heading h2,
.solution-role-section .section-heading p,
.product-contract-section .section-heading h2,
.product-contract-section .section-heading p {
  color: inherit;
}

.buyer-section .section-heading p,
.solution-role-section .section-heading p,
.product-contract-section .section-heading p {
  color: rgba(255, 255, 255, .58);
}

.buyer-paths {
  border-top: 1px solid var(--line-dark);
}

.buyer-path {
  position: relative;
  min-height: 154px;
  padding: 27px 24px;
  display: grid;
  grid-template-columns: 54px 1fr 46px;
  gap: 22px;
  align-items: center;
  border-bottom: 1px solid var(--line-dark);
  isolation: isolate;
  transition: background .35s ease, padding .35s var(--ease);
}

.buyer-path::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 121, 255, .2), rgba(53, 216, 255, .035) 70%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--ease);
}

.buyer-path:hover,
.buyer-path:focus-visible {
  padding-left: 34px;
}

.buyer-path:hover::before,
.buyer-path:focus-visible::before {
  transform: scaleX(1);
}

.buyer-path > span,
.buyer-path > b {
  color: var(--v007-blue-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.buyer-path small {
  color: var(--v007-cyan);
  font-size: 11px;
  font-weight: 800;
}

.buyer-path h3 {
  margin-top: 8px;
  font-size: 24px;
  line-height: 1.32;
}

.buyer-path p {
  margin-top: 7px;
  color: rgba(255, 255, 255, .58);
  font-size: 13px;
}

.buyer-path div div {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.buyer-path div i {
  padding: 4px 8px;
  color: rgba(255, 255, 255, .72);
  border: 1px solid rgba(88, 169, 255, .25);
  font-size: 10px;
  font-style: normal;
}

.buyer-path > b {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(88, 169, 255, .35);
  font-size: 18px;
  transition: color .25s ease, background .25s ease, transform .3s var(--ease);
}

.buyer-path:hover > b {
  color: #02101e;
  background: var(--v007-cyan);
  transform: translateX(5px);
}

.buyer-cta,
.product-contract-cta {
  margin-top: 28px;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.buyer-cta p,
.product-contract-cta p {
  max-width: 670px;
  color: rgba(255, 255, 255, .62);
  font-size: 14px;
}

.product-decision-strip,
.case-evidence-bar {
  color: var(--white);
  background: #07111d;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.product-decision-strip .container {
  min-height: 76px;
  display: flex;
  align-items: stretch;
}

.product-decision-strip .container > span {
  padding-right: 26px;
  display: flex;
  align-items: center;
  color: var(--v007-cyan);
  border-right: 1px solid var(--line-dark);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.product-decision-strip a {
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, .62);
  border-right: 1px solid var(--line-dark);
  font-size: 12px;
  transition: color .2s ease, background .2s ease;
}

.product-decision-strip a:hover,
.product-decision-strip a:focus-visible {
  color: var(--white);
  background: rgba(20, 121, 255, .15);
}

.product-decision-strip i {
  color: var(--v007-blue-bright);
  font-style: normal;
}

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

.product-contract-grid article {
  min-height: 238px;
  padding: 28px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.product-contract-grid span {
  color: var(--v007-blue-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.product-contract-grid small {
  margin-top: 55px;
  display: block;
  color: var(--v007-cyan);
  font-weight: 800;
}

.product-contract-grid h3 {
  margin-top: 12px;
  font-size: 19px;
  line-height: 1.55;
}

.solution-role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

.solution-role-grid a {
  min-height: 310px;
  padding: 29px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  transition: background .3s ease, transform .3s var(--ease);
}

.solution-role-grid a:hover {
  background: rgba(20, 121, 255, .13);
  transform: translateY(-4px);
}

.solution-role-grid span,
.solution-role-grid small {
  color: var(--v007-blue-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}

.solution-role-grid small {
  margin-top: 55px;
  color: var(--v007-cyan);
}

.solution-role-grid h3 {
  margin-top: 11px;
  font-size: 21px;
  line-height: 1.42;
}

.solution-role-grid p {
  margin-top: 11px;
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
}

.solution-role-grid b {
  margin-top: auto;
  color: var(--v007-blue-bright);
  font-size: 11px;
}

.case-evidence-bar .container {
  min-height: 96px;
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 28px;
}

.case-evidence-bar span {
  color: var(--v007-cyan);
  font-size: 12px;
  font-weight: 800;
}

.case-evidence-bar span i {
  width: 7px;
  height: 7px;
  margin-right: 9px;
  display: inline-block;
  background: var(--v007-cyan);
  box-shadow: 0 0 14px var(--v007-cyan);
  border-radius: 50%;
}

.case-evidence-bar p {
  color: rgba(255, 255, 255, .56);
  font-size: 12px;
}

.case-evidence-bar a {
  color: var(--v007-blue-bright);
  font-size: 11px;
  font-weight: 700;
}

.case-card-media {
  position: relative;
  overflow: hidden;
}

.case-card-media em {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 5px 8px;
  color: var(--white);
  background: rgba(3, 11, 20, .78);
  border: 1px solid rgba(88, 169, 255, .42);
  backdrop-filter: blur(8px);
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}

.case-card button > div > small {
  margin-top: 14px;
  color: #526272;
  font-size: 10px;
}

.case-proof-note {
  margin-top: 28px;
  padding: 18px 20px;
  color: #63717d;
  background: #e9eef2;
  border-left: 3px solid var(--v007-blue);
  font-size: 11px;
}

#modalBody dl {
  margin: 22px 0 0;
  border-top: 1px solid var(--line-dark);
}

#modalBody dl div {
  padding: 12px 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 15px;
  border-bottom: 1px solid var(--line-dark);
}

#modalBody dt {
  color: rgba(255, 255, 255, .42);
  font-size: 11px;
}

#modalBody dd {
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font-size: 12px;
}

.modal-contact {
  margin-top: 22px;
  display: inline-flex;
  color: var(--v007-blue-bright);
  font-size: 12px;
  font-weight: 700;
}


@media (max-width: 1024px) {
  .product-decision-strip .container {
    overflow-x: auto;
  }

  .product-decision-strip a {
    min-width: 150px;
  }

  .solution-role-grid,
  .product-contract-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 720px) {
  .buyer-path {
    min-height: 0;
    padding: 24px 0;
    grid-template-columns: 34px 1fr 36px;
    gap: 12px;
  }

  .buyer-path:hover,
  .buyer-path:focus-visible {
    padding-left: 8px;
  }

  .buyer-path h3 {
    font-size: 19px;
  }

  .buyer-path > b {
    width: 34px;
    height: 34px;
  }

  .buyer-cta,
  .product-contract-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-decision-strip .container {
    width: 100%;
    min-height: 64px;
  }

  .product-decision-strip .container > span {
    display: none;
  }

  .product-decision-strip .container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .product-decision-strip a {
    min-width: 0;
    min-height: 54px;
    padding: 0 14px;
    justify-content: space-between;
    border-bottom: 1px solid var(--line-dark);
  }

  .product-contract-grid,
  .solution-role-grid {
    grid-template-columns: 1fr;
  }

  .product-contract-grid article,
  .solution-role-grid a {
    min-height: 190px;
  }

  .product-contract-grid small,
  .solution-role-grid small {
    margin-top: 35px;
  }

  .case-evidence-bar .container {
    padding: 22px 0;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .case-evidence-bar a {
    margin-top: 6px;
  }

  #modalBody dl div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Evidence-first solution and case surfaces */

.solution-list-section,
.cases-section {
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(20, 121, 255, .065) 1px, transparent 1px) 0 0 / 88px 88px,
    linear-gradient(rgba(20, 121, 255, .065) 1px, transparent 1px) 0 0 / 88px 88px,
    #050c15;
}

.solution-list-section .section-heading h2,
.cases-section .section-heading h2 {
  color: var(--white);
}

.solution-list-section .section-heading p,
.cases-section .section-heading p {
  color: rgba(255, 255, 255, .58);
}

.solution-list {
  border-color: rgba(88, 169, 255, .22);
}

.solution-list-card {
  isolation: isolate;
  border-color: rgba(88, 169, 255, .18);
}

.solution-list-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 121, 255, .16), rgba(53, 216, 255, .025) 72%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease);
}

.solution-list-card:hover::before,
.solution-list-card:focus-visible::before {
  transform: scaleX(1);
}

.solution-list-card h3 {
  color: var(--white);
}

.solution-list-card p {
  color: rgba(255, 255, 255, .56);
}

.solution-list-card i {
  color: rgba(255, 255, 255, .68);
  border-color: rgba(88, 169, 255, .28);
}

.solution-list-card figure {
  position: relative;
  width: 340px;
  height: 185px;
  margin: 0;
  overflow: hidden;
  background: #08111d;
  border: 1px solid rgba(88, 169, 255, .26);
}

.solution-list-card figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 52%, rgba(53, 216, 255, .14));
}

.solution-list-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.04);
}

.solution-list-card figure figcaption {
  position: absolute;
  z-index: 2;
  left: 10px;
  bottom: 10px;
  padding: 5px 8px;
  color: rgba(255, 255, 255, .82);
  background: rgba(3, 10, 18, .76);
  border: 1px solid rgba(88, 169, 255, .34);
  backdrop-filter: blur(8px);
  font-size: 9px;
}

.case-section-head {
  margin-bottom: 42px;
}

.cases-section .case-toolbar {
  padding-top: 22px;
  border-top: 1px solid rgba(88, 169, 255, .2);
}

.cases-section .filter-btn {
  color: rgba(255, 255, 255, .6);
  border-color: rgba(88, 169, 255, .28);
}

.cases-section .filter-btn.active,
.cases-section .filter-btn:hover,
.cases-section .filter-btn:focus-visible {
  color: #04101d;
  background: var(--v007-cyan);
  border-color: var(--v007-cyan);
}

.case-grid {
  gap: 16px;
}

.case-card button {
  height: 100%;
  color: var(--white);
  background: rgba(8, 18, 30, .92);
  border-color: rgba(88, 169, 255, .2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
}

.case-card button:hover,
.case-card button:focus-visible {
  border-color: rgba(53, 216, 255, .75);
  box-shadow: 0 24px 56px rgba(0, 89, 197, .18);
}

.case-card .case-card-media {
  position: relative;
  min-height: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  background: #030914;
}

.case-card .case-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(3, 10, 18, .46));
}

.case-card img {
  height: 218px;
  filter: saturate(.86) contrast(1.04);
  transition: transform .6s var(--ease), filter .35s ease;
}

.case-card button:hover img,
.case-card button:focus-visible img {
  filter: saturate(1.08) contrast(1.06);
  transform: scale(1.035);
}

.case-card .case-card-media em,
.case-card .case-card-media i {
  position: absolute;
  z-index: 2;
  top: 12px;
  padding: 6px 8px;
  color: var(--white);
  background: rgba(3, 11, 20, .82);
  border: 1px solid rgba(88, 169, 255, .42);
  backdrop-filter: blur(8px);
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}

.case-card .case-card-media em {
  left: 12px;
}

.case-card .case-card-media i {
  right: 12px;
  color: var(--v007-cyan);
}

.case-card button > div:last-child {
  min-height: 230px;
  padding: 24px;
}

.case-card span {
  color: var(--v007-cyan);
}

.case-card h3 {
  color: var(--white);
  line-height: 1.36;
}

.case-card p {
  color: rgba(255, 255, 255, .58);
}

.case-card button > div > small {
  color: rgba(255, 255, 255, .42);
}

.case-card b {
  color: var(--v007-blue-bright);
}

.case-card-project:first-child {
  grid-column: span 2;
}

.case-card-project:first-child button {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
}

.case-card-project:first-child img {
  height: 100%;
  min-height: 420px;
}

.case-card-project:first-child button > div:last-child {
  min-height: 420px;
  padding: 34px;
}

.case-card-project:first-child h3 {
  margin-top: 18px;
  font-size: 30px;
}

.case-proof-note {
  color: rgba(255, 255, 255, .52);
  background: rgba(20, 121, 255, .1);
  border-left-color: var(--v007-cyan);
}

@media (max-width: 1180px) {
  .solution-list-card figure,
  .solution-list-card figure img {
    width: 280px;
  }
}

@media (max-width: 1024px) {
  .solution-list-card figure,
  .solution-list-card figure img {
    width: 230px;
    height: 160px;
  }

  .case-card-project:first-child {
    grid-column: span 2;
  }

  .case-card-project:first-child button {
    grid-template-columns: 1fr;
  }

  .case-card-project:first-child img {
    min-height: 320px;
  }

  .case-card-project:first-child button > div:last-child {
    min-height: 260px;
  }
}

@media (max-width: 720px) {
  .solution-list-card figure {
    grid-column: 2 / 4;
    grid-row: 2;
    width: 100%;
    height: 220px;
    margin-top: 10px;
  }

  .solution-list-card figure img {
    width: 100%;
    height: 100%;
  }

  .case-section-head {
    margin-bottom: 30px;
  }

  .case-card-project:first-child {
    grid-column: auto;
  }

  .case-card-project:first-child img,
  .case-card img {
    min-height: 0;
    height: 220px;
  }

  .case-card-project:first-child button > div:last-child,
  .case-card button > div:last-child {
    min-height: 230px;
    padding: 22px;
  }

  .case-card-project:first-child h3 {
    margin-top: 12px;
    font-size: 23px;
  }
}

/* V0.10 case library and crawlable case detail pages */
.case-index-hero .page-hero-image {
  filter: saturate(.82) contrast(1.08);
}

.case-card > a {
  display: grid;
  height: 100%;
  color: inherit;
  text-decoration: none;
  background: rgba(5, 17, 32, .96);
  border: 1px solid rgba(127, 199, 255, .14);
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.case-card > a:hover,
.case-card > a:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(75, 195, 255, .52);
  box-shadow: 0 22px 56px rgba(0, 0, 0, .32);
}

.case-card > a:focus-visible {
  outline: 2px solid var(--v007-cyan);
  outline-offset: 3px;
}

.case-card > a > div:last-child {
  display: flex;
  min-height: 250px;
  flex-direction: column;
  padding: 26px;
}

.case-card > a > div:last-child b {
  margin-top: auto;
}

.case-card-project:first-child > a {
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
}

.case-card-project:first-child > a .case-card-media,
.case-card-project:first-child > a img {
  min-height: 100%;
}

.case-card-project:first-child > a > div:last-child {
  min-height: 350px;
  justify-content: center;
}

.case-detail-main {
  color: #172337;
  background:
    linear-gradient(rgba(13, 100, 173, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 100, 173, .045) 1px, transparent 1px),
    #f4f7fa;
  background-size: 56px 56px;
}

.case-detail-hero {
  position: relative;
  min-height: 760px;
  padding: 148px 0 86px;
  color: #fff;
  background: #06111f;
  overflow: hidden;
}

.case-detail-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 22%, rgba(0, 180, 255, .2), transparent 32%),
    linear-gradient(120deg, rgba(6, 17, 31, .96) 0%, rgba(6, 17, 31, .82) 52%, rgba(6, 17, 31, .5) 100%);
}

.case-detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .28;
  background:
    linear-gradient(rgba(92, 184, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 184, 255, .12) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.case-breadcrumb {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 54px;
  color: rgba(255, 255, 255, .62);
  font-size: 13px;
  letter-spacing: .04em;
}

.case-breadcrumb a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
}

.case-breadcrumb a:hover {
  color: #fff;
}

.case-detail-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr);
  align-items: center;
  gap: clamp(44px, 7vw, 96px);
}

.case-detail-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #69d6ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
}

.case-detail-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

.case-detail-hero h1 {
  max-width: 760px;
  margin: 22px 0 24px;
  color: #fff;
  font-size: clamp(42px, 4.8vw, 76px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.case-detail-summary {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.85;
}

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

.case-detail-tags span {
  padding: 9px 13px;
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  border: 1px solid rgba(111, 205, 255, .25);
  background: rgba(22, 105, 169, .14);
}

.case-detail-cover {
  position: relative;
  margin: 0;
  border: 1px solid rgba(111, 205, 255, .3);
  background: #0b1c2c;
  box-shadow: 0 36px 90px rgba(0, 0, 0, .42);
  overflow: hidden;
}

.case-detail-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.case-detail-cover img {
  display: block;
  width: 100%;
  min-height: 390px;
  object-fit: cover;
}

.case-detail-cover figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 18px;
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  background: linear-gradient(to top, rgba(2, 10, 20, .94), rgba(2, 10, 20, .22));
}

.case-fact-strip {
  position: relative;
  z-index: 2;
  margin-top: -42px;
}

.case-fact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff;
  border: 1px solid rgba(22, 82, 132, .12);
  box-shadow: 0 22px 60px rgba(10, 45, 77, .12);
}

.case-fact-grid > div {
  min-height: 130px;
  padding: 28px 30px;
  border-right: 1px solid rgba(22, 82, 132, .1);
}

.case-fact-grid > div:last-child {
  border-right: 0;
}

.case-fact-grid span {
  display: block;
  margin-bottom: 12px;
  color: #62809a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}

.case-fact-grid strong {
  display: block;
  color: #102b46;
  font-size: 18px;
  line-height: 1.5;
}

.case-detail-section {
  padding: clamp(84px, 9vw, 132px) 0;
}

.case-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr);
  align-items: start;
  gap: clamp(56px, 9vw, 120px);
}

.case-detail-article {
  max-width: 790px;
}

.case-detail-lead {
  margin: 0 0 54px;
  color: #153d63;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.65;
  letter-spacing: -.025em;
}

.case-detail-article h2 {
  margin: 54px 0 18px;
  color: #0d2944;
  font-size: clamp(28px, 2.5vw, 38px);
  line-height: 1.25;
  letter-spacing: -.035em;
}

.case-detail-article p {
  margin: 0 0 22px;
  color: #465c70;
  font-size: 17px;
  line-height: 1.95;
}

.case-detail-article ul {
  display: grid;
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.case-detail-article li {
  position: relative;
  padding: 20px 22px 20px 52px;
  color: #29465f;
  font-size: 16px;
  line-height: 1.75;
  background: #fff;
  border: 1px solid rgba(24, 99, 158, .11);
}

.case-detail-article li::before {
  content: "";
  position: absolute;
  top: 29px;
  left: 24px;
  width: 9px;
  height: 9px;
  border: 2px solid #1da4e8;
  transform: rotate(45deg);
}

.case-detail-aside {
  position: sticky;
  top: 120px;
  display: grid;
  gap: 18px;
}

.case-detail-aside-card {
  padding: 28px;
  background: #08192a;
  border: 1px solid rgba(43, 147, 225, .22);
}

.case-detail-aside-card.light {
  background: #fff;
  border-color: rgba(24, 99, 158, .12);
}

.case-detail-aside-card > span {
  display: block;
  margin-bottom: 18px;
  color: #61cbfa;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
}

.case-detail-aside-card.light > span {
  color: #197ebb;
}

.case-detail-aside-card h3 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 22px;
  line-height: 1.35;
}

.case-detail-aside-card.light h3 {
  color: #102b46;
}

.case-detail-aside-card p {
  margin: 0;
  color: rgba(255, 255, 255, .62);
  font-size: 14px;
  line-height: 1.8;
}

.case-detail-aside-card.light p {
  color: #5c7183;
}

.case-detail-aside-card a {
  display: inline-flex;
  margin-top: 22px;
  color: #69d6ff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.case-gallery-section {
  padding: clamp(80px, 9vw, 128px) 0;
  color: #fff;
  background: #06111f;
}

.case-gallery-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 36px;
  margin-bottom: 42px;
}

.case-gallery-head span {
  display: block;
  margin-bottom: 12px;
  color: #64cef8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}

.case-gallery-head h2 {
  max-width: 760px;
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 3.5vw, 52px);
  line-height: 1.18;
}

.case-gallery-head p {
  max-width: 420px;
  margin: 0;
  color: rgba(255, 255, 255, .58);
  font-size: 14px;
  line-height: 1.8;
}

.case-gallery {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  grid-template-rows: repeat(2, minmax(230px, 1fr));
  gap: 16px;
}

.case-gallery figure {
  position: relative;
  min-height: 260px;
  margin: 0;
  background: #0b1c2c;
  border: 1px solid rgba(108, 200, 255, .16);
  overflow: hidden;
}

.case-gallery figure:first-child {
  grid-row: 1 / 3;
}

.case-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.case-gallery figure:hover img {
  transform: scale(1.025);
}

.case-gallery figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 30px 18px 16px;
  color: rgba(255, 255, 255, .84);
  font-size: 12px;
  background: linear-gradient(to top, rgba(1, 8, 16, .9), transparent);
}

.case-related {
  padding: clamp(76px, 8vw, 112px) 0;
  background: #eaf1f6;
}

.case-related-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 44px;
}

.case-related h2 {
  margin: 0 0 14px;
  color: #0d2944;
  font-size: clamp(30px, 3vw, 46px);
}

.case-related p {
  max-width: 720px;
  margin: 0;
  color: #587085;
  font-size: 16px;
  line-height: 1.8;
}

.case-related-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.case-related-actions a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  background: #0867b7;
}

.case-related-actions a.secondary {
  color: #17456d;
  background: transparent;
  border: 1px solid rgba(23, 69, 109, .22);
}

@media (max-width: 1100px) {
  .case-detail-hero-grid {
    grid-template-columns: 1fr;
  }

  .case-detail-cover {
    max-width: 880px;
  }

  .case-detail-cover img {
    min-height: 0;
  }

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

  .case-fact-grid > div:nth-child(2) {
    border-right: 0;
  }

  .case-fact-grid > div:nth-child(-n+2) {
    border-bottom: 1px solid rgba(22, 82, 132, .1);
  }

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

  .case-detail-aside {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 1024px) {
  .case-card-project:first-child > a {
    grid-template-columns: 1fr;
  }

  .case-card-project:first-child > a img {
    min-height: 320px;
  }

  .case-card-project:first-child > a > div:last-child {
    min-height: 260px;
  }
}

@media (max-width: 720px) {
  .case-detail-hero {
    min-height: auto;
    padding: 116px 0 76px;
  }

  .case-breadcrumb {
    margin-bottom: 34px;
    font-size: 12px;
  }

  .case-detail-hero h1 {
    font-size: clamp(36px, 10vw, 50px);
    letter-spacing: -.035em;
  }

  .case-detail-summary {
    font-size: 17px;
    line-height: 1.75;
  }

  .case-detail-cover img {
    aspect-ratio: 16 / 10;
  }

  .case-detail-cover figcaption {
    position: static;
    flex-direction: column;
    gap: 4px;
    padding: 13px 14px;
    background: #0b1c2c;
  }

  .case-fact-strip {
    margin-top: 0;
  }

  .case-fact-grid {
    grid-template-columns: 1fr;
  }

  .case-fact-grid > div {
    min-height: 0;
    padding: 22px;
    border-right: 0;
    border-bottom: 1px solid rgba(22, 82, 132, .1);
  }

  .case-fact-grid > div:last-child {
    border-bottom: 0;
  }

  .case-detail-lead {
    margin-bottom: 38px;
    font-size: 22px;
  }

  .case-detail-article h2 {
    margin-top: 42px;
  }

  .case-detail-article p,
  .case-detail-article li {
    font-size: 16px;
  }

  .case-detail-aside {
    grid-template-columns: 1fr;
  }

  .case-gallery-head {
    align-items: start;
    flex-direction: column;
  }

  .case-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .case-gallery figure,
  .case-gallery figure:first-child {
    grid-row: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .case-gallery img {
    position: absolute;
    inset: 0;
  }

  .case-related-actions {
    width: 100%;
  }

  .case-related-actions a {
    width: 100%;
  }

  .case-card-project:first-child > a img,
  .case-card > a img {
    min-height: 0;
    height: 220px;
  }

  .case-card-project:first-child > a > div:last-child,
  .case-card > a > div:last-child {
    min-height: 230px;
    padding: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-card > a,
  .case-gallery img {
    transition: none;
  }
}

/* V0.11 — immersive brand system, formal public copy and complete media */

.hero-background-video {
  z-index: 0;
  opacity: .76;
}

.home-hero .hero-media-art {
  z-index: 1;
  opacity: .28;
  mix-blend-mode: screen;
}

.home-hero .hero-media-shade,
.home-hero .hero-media-noise { z-index: 2; }

.page-hero {
  min-height: min(820px, 88svh);
  isolation: isolate;
  background: #040a12;
}

.page-hero-video,
.page-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.page-hero-video {
  z-index: 0;
  object-fit: cover;
  object-position: 58% center;
  filter: saturate(.82) contrast(1.08) brightness(.64);
}

.page-hero:has(.page-hero-video) .page-hero-image {
  opacity: .2;
  mix-blend-mode: screen;
}

.page-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 8, 17, .98) 0%, rgba(2, 8, 17, .86) 35%, rgba(2, 8, 17, .22) 70%, rgba(2, 8, 17, .34) 100%),
    linear-gradient(0deg, rgba(2, 7, 14, .9), transparent 46%, rgba(2, 7, 14, .38));
  pointer-events: none;
}

.page-hero-grid,
.page-hero-beam,
.page-hero-content { z-index: 2; }

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

.page-hero-content.reveal,
.home-hero .hero-copy-block.reveal,
.home-hero .hero-demo-dock.reveal {
  opacity: 1;
  transform: none;
}

.page-hero-content h1 {
  max-width: 850px;
  font-size: clamp(54px, 7vw, 98px);
  line-height: 1.04;
  text-wrap: balance;
}

.page-hero-content > p {
  max-width: 700px;
  font-size: 17px;
  line-height: 1.85;
}

.solution-list-card figure img,
.solution-media img,
.workbench-media > img,
.workbench-media > video,
.product-proof-media video,
.solution-capability-media img,
.solution-capability-media video {
  object-fit: contain;
  object-position: center;
}

.workbench-media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #030914;
}

.workbench-hotspots { pointer-events: none; }
.workbench-hotspot { pointer-events: auto; }

.solution-list-card figure {
  background:
    radial-gradient(circle at 50% 45%, rgba(20,121,255,.18), transparent 55%),
    #06101d;
}

.solution-list-card figure img {
  padding: 8px;
}

.solution-capability-stage {
  min-height: 590px;
  margin-top: 48px;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) minmax(280px, .55fr);
  color: #fff;
  background: #040c17;
  border: 1px solid rgba(82,168,255,.28);
  box-shadow: 0 42px 120px rgba(0,0,0,.25);
  overflow: hidden;
}

.solution-capability-nav {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(82,168,255,.18);
}

.solution-capability-nav button {
  flex: 1;
  min-height: 82px;
  padding: 18px;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.52);
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(82,168,255,.14);
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}

.solution-capability-nav button span {
  color: #52a8ff;
  font: 10px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.solution-capability-nav button b { font-size: 13px; }
.solution-capability-nav button.active,
.solution-capability-nav button:hover {
  color: #fff;
  background: linear-gradient(90deg, rgba(20,121,255,.22), rgba(53,216,255,.04));
  box-shadow: inset 3px 0 #35d8ff;
}

.solution-capability-media {
  position: relative;
  min-width: 0;
  margin: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(20,121,255,.18), transparent 58%), #020813;
  overflow: hidden;
}

.solution-capability-media img,
.solution-capability-media video {
  width: 100%;
  height: 100%;
  max-height: 590px;
  background: #020813;
}

.solution-capability-copy {
  padding: 44px 34px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(82,168,255,.18);
  background: linear-gradient(145deg, rgba(20,121,255,.13), transparent 45%);
}

.solution-capability-copy small { color: #35d8ff; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.solution-capability-copy h3 { margin-top: 22px; font-size: 30px; line-height: 1.2; }
.solution-capability-copy > p { margin-top: 18px; color: rgba(255,255,255,.64); font-size: 15px; line-height: 1.8; }
.solution-capability-copy > div { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 8px; }
.solution-capability-copy > div span { width: 100%; margin-bottom: 5px; color: rgba(255,255,255,.36); font-size: 10px; }
.solution-capability-copy i { padding: 6px 9px; color: rgba(255,255,255,.72); border: 1px solid rgba(82,168,255,.24); font-size: 10px; font-style: normal; }
.solution-capability-copy > strong { margin-top: auto; padding-top: 28px; color: rgba(255,255,255,.72); border-top: 1px solid rgba(82,168,255,.18); font-size: 13px; line-height: 1.7; }

.about-intro {
  color: #fff;
  background: #050c16;
}

.about-editorial {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap: 0;
  border-top: 1px solid rgba(82,168,255,.22);
  border-left: 1px solid rgba(82,168,255,.22);
}

.about-editorial > div {
  min-height: 420px;
  padding: clamp(32px, 4vw, 58px);
  border-right: 1px solid rgba(82,168,255,.22);
  border-bottom: 1px solid rgba(82,168,255,.22);
}

.about-editorial .section-heading h2 { color: #fff; }
.about-editorial .section-heading p,
.about-editorial p { color: rgba(255,255,255,.58); }
.about-business span,
.about-team span { color: #35d8ff; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.about-business h3,
.about-team h3 { margin-top: 100px; color: #fff; font-size: 28px; line-height: 1.35; }
.about-business p,
.about-team p { margin-top: 20px; font-size: 14px; line-height: 1.8; }

.about-capabilities { background: #eef3f8; }
.about-capability-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 48px; border-top: 1px solid rgba(17,67,108,.15); border-left: 1px solid rgba(17,67,108,.15); }
.about-capability-grid article { min-height: 260px; padding: 30px; border-right: 1px solid rgba(17,67,108,.15); border-bottom: 1px solid rgba(17,67,108,.15); }
.about-capability-grid span { color: #1479ff; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.about-capability-grid h3 { margin-top: 74px; color: #102b46; font-size: 20px; }
.about-capability-grid p { margin-top: 12px; color: #60758a; font-size: 13px; }

.contact-section { background: linear-gradient(135deg, #eef4f8, #fff); }
.case-video-mark {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 6px 9px;
  color: #fff;
  background: rgba(3,10,20,.82);
  border: 1px solid rgba(53,216,255,.5);
  font: 9px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.case-card > a { width: 100%; height: 100%; display: flex; flex-direction: column; }
.case-card > a > div:last-child { flex: 1; display: flex; flex-direction: column; }
.case-card > a > div:last-child b { margin-top: auto; }

.case-detail-main {
  color: rgba(255,255,255,.78);
  background: #050c15;
}

.case-detail-hero { min-height: 720px; }
.case-detail-cover video {
  display: block;
  width: 100%;
  min-height: 390px;
  aspect-ratio: 16/9;
  object-fit: contain;
  background: #020813;
}

.case-fact-grid {
  color: #fff;
  background: rgba(6,18,32,.96);
  border-color: rgba(82,168,255,.25);
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}
.case-fact-grid > div { border-color: rgba(82,168,255,.16); }
.case-fact-grid span { color: #35d8ff; }
.case-fact-grid strong { color: #fff; }
.case-detail-section { background: radial-gradient(circle at 10% 10%, rgba(20,121,255,.1), transparent 34%), #050c15; }
.case-detail-lead { color: #d8efff; }
.case-detail-article h2 { color: #fff; }
.case-detail-article p { color: rgba(255,255,255,.6); }
.case-detail-article li { color: rgba(255,255,255,.76); background: rgba(255,255,255,.025); border-color: rgba(82,168,255,.18); }
.case-detail-aside-card.light { background: rgba(20,121,255,.08); border-color: rgba(82,168,255,.2); }
.case-detail-aside-card.light > span { color: #35d8ff; }
.case-detail-aside-card.light h3 { color: #fff; }
.case-detail-aside-card.light p { color: rgba(255,255,255,.58); }

@media (max-width: 980px) {
  .page-hero { min-height: 680px; }
  .page-hero-content { padding-top: 154px; }
  .solution-capability-stage { grid-template-columns: 150px minmax(0,1fr); }
  .solution-capability-copy { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(82,168,255,.18); }
  .solution-capability-copy > strong { margin-top: 28px; }
  .about-editorial { grid-template-columns: 1fr 1fr; }
  .about-editorial > div:first-child { grid-column: 1 / -1; min-height: 340px; }
  .about-capability-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .container { width: min(100% - 36px, var(--container)); }
  .home-hero { min-height: 820px; height: 100svh; }
  .home-hero .hero-content { width: calc(100% - 36px); padding-top: 118px; padding-bottom: 230px; align-items: start; }
  .home-hero .hero-copy-block { width: 100%; }
  .home-hero .hero-copy-block h1 { font-size: clamp(46px, 13vw, 64px); }
  .hero-demo-dock { right: 18px; bottom: 72px; width: calc(100% - 36px); }
  .hero-mode-rail { display: none; }
  .hero-media video { object-position: 67% center; }
  .page-hero { min-height: 660px; }
  .page-hero-video { object-position: 66% center; }
  .page-hero-content { padding-top: 150px; padding-bottom: 80px; }
  .page-hero-content h1 { font-size: clamp(46px, 14vw, 66px); }
  .page-hero-content > p { font-size: 15px; }
  .solution-capability-stage { min-height: 0; grid-template-columns: 1fr; }
  .solution-capability-nav { display: grid; grid-template-columns: 1fr 1fr; border-right: 0; }
  .solution-capability-nav button { min-height: 68px; border-right: 1px solid rgba(82,168,255,.14); }
  .solution-capability-media { aspect-ratio: 16/10; }
  .solution-capability-copy { grid-column: auto; padding: 30px 24px; }
  .about-editorial { grid-template-columns: 1fr; }
  .about-editorial > div:first-child { grid-column: auto; }
  .about-editorial > div { min-height: 300px; }
  .about-business h3, .about-team h3 { margin-top: 56px; }
  .about-capability-grid { grid-template-columns: 1fr; }
  .case-detail-cover video { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-background-video,
  .page-hero-video { display: none; }
  .home-hero .hero-media-art { opacity: .68; animation: none; }
}

/* V0.12 — real engineering cinematic direction */
:root {
  --v12-ink: #030812;
  --v12-navy: #071321;
  --v12-steel: #10253a;
  --v12-blue: #2878ff;
  --v12-cyan: #64d7ff;
  --v12-paper: #edf2f7;
  --v12-white: #f7f9fc;
  --v12-line-dark: rgba(125, 195, 255, .18);
  --v12-line-light: rgba(18, 63, 102, .14);
}

html { background: var(--v12-ink); }
body {
  color: #10263a;
  background: var(--v12-paper);
  font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  text-rendering: optimizeLegibility;
}

.section { padding: clamp(90px, 9vw, 148px) 0; }
.container { width: min(calc(100% - 72px), 1460px); }
.section-heading { max-width: 820px; }
.section-heading h2 {
  margin-top: 18px;
  font-size: clamp(38px, 4.4vw, 68px);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.section-heading p { max-width: 660px; margin-top: 20px; line-height: 1.85; }
.section-label { color: var(--v12-blue); letter-spacing: .16em; }
.section-rail { display: none !important; }

/* Content stays visible if scripting is delayed; motion is progressively enhanced. */
.reveal { opacity: 1; transform: none; }
.motion-ready .reveal:not(.visible) { opacity: 0; transform: translateY(22px); }
.motion-ready .reveal.visible {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--delay, 0ms);
}

.site-header { border-bottom-color: rgba(255,255,255,.1); }
.site-header:not(.scrolled) { background: rgba(3,8,18,.48); }
.site-header.scrolled { background: rgba(3,8,18,.94); }
.topbar { width: min(calc(100% - 72px), 1460px); }
.brand img { width: 142px; height: auto; }
.nav-link { color: rgba(255,255,255,.74); }
.nav-link:hover,
.nav-link.active { color: #fff; }
.header-cta { background: var(--v12-blue); }
.cloud-link { color: rgba(255,255,255,.78); }
.mega { background: rgba(5,14,25,.98); border-color: var(--v12-line-dark); }

/* Homepage hero */
.v12-home-hero {
  position: relative;
  height: min(840px, calc(100svh - 88px));
  min-height: 720px;
  max-height: none;
  color: var(--v12-white);
  background: var(--v12-ink);
  overflow: hidden;
}
.v12-home-hero::before,
.v12-home-hero::after { display: none; }
.v12-home-hero .hero-media { position: absolute; inset: 0; }
.v12-home-hero .hero-media-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  transform: scale(1.015);
  animation: v12HeroDrift 18s ease-in-out infinite alternate;
}
.v12-home-hero .hero-media-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(3,8,18,.26);
}
.v12-home-hero .hero-media-noise { display: none; }
.v12-home-hero .hero-content {
  position: relative;
  z-index: 3;
  width: min(calc(100% - 72px), 1460px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: clamp(142px, 17vh, 190px) 0 130px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.v12-home-hero .hero-copy-block { width: min(790px, 55vw); }
.v12-home-hero .hero-kicker {
  color: var(--v12-cyan);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .13em;
}
.v12-home-hero .hero-kicker span { background: var(--v12-cyan); box-shadow: 0 0 15px rgba(100,215,255,.75); }
.v12-home-hero .hero-copy-block h1 {
  margin-top: 28px;
  color: #fff;
  font-size: clamp(50px, 4.35vw, 66px);
  font-weight: 780;
  line-height: .99;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.v12-home-hero .hero-copy-block h1 strong { display: inline; margin-left: .18em; color: var(--v12-cyan); font-weight: inherit; }
.v12-home-hero .hero-claim {
  margin-top: 30px;
  color: #fff;
  font-size: clamp(18px, 1.5vw, 23px);
  font-weight: 650;
  line-height: 1.5;
}
.v12-home-hero .hero-summary {
  max-width: 555px;
  margin-top: 14px;
  color: rgba(255,255,255,.68);
  font-size: 15px;
  line-height: 1.9;
}
.v12-home-hero .hero-actions { margin-top: 34px; }
.v12-home-hero .button { min-height: 52px; }
.v12-home-hero .hero-journey-copy {
  position: absolute;
  right: 0;
  bottom: 140px;
  width: min(390px, 31vw);
  padding-left: 22px;
  border-left: 2px solid var(--v12-cyan);
}
.hero-journey-copy small { color: var(--v12-cyan); font-size: 9px; font-weight: 750; letter-spacing: .18em; }
.hero-journey-copy strong { display: block; margin-top: 13px; color: #fff; font-size: 21px; line-height: 1.4; }
.hero-journey-copy p { margin-top: 8px; color: rgba(255,255,255,.6); font-size: 12px; line-height: 1.75; }
.hero-journey-rail {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 94px;
  padding: 0 max(36px, calc((100vw - 1460px) / 2));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: rgba(3,8,18,.8);
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero-journey-rail button {
  position: relative;
  min-height: 94px;
  padding: 20px 18px 18px 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: rgba(255,255,255,.46);
  text-align: left;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
}
.hero-journey-rail button::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 100%;
  left: 0;
  height: 2px;
  background: var(--v12-cyan);
  transition: right .35s ease;
}
.hero-journey-rail button.active::before { right: 0; }
.hero-journey-rail button span { color: var(--v12-cyan); font-size: 10px; font-weight: 750; }
.hero-journey-rail button b { font-size: 13px; font-weight: 650; }
.hero-journey-rail button.active { color: #fff; }
@keyframes v12HeroDrift { to { transform: scale(1.045) translate3d(-.7%, -.4%, 0); } }

/* Project film reel */
.v12-project-reel { padding-top: 44px; color: #fff; background: var(--v12-ink); }
.v12-project-reel .section-heading h2 { color: #fff; }
.v12-project-reel .section-heading h2 { font-size: clamp(36px, 3.5vw, 52px); }
.v12-project-reel .section-heading p { color: rgba(255,255,255,.57); }
.v12-project-reel-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.v12-project-reel-grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(330px, .7fr);
  gap: 18px;
}
.v12-featured-project,
.v12-project-stack a { color: inherit; text-decoration: none; border: 1px solid var(--v12-line-dark); background: #071321; }
.v12-featured-project { display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.v12-featured-project figure { position: relative; margin: 0; aspect-ratio: 16/9; background: #020811; overflow: hidden; }
.v12-featured-project video,
.v12-featured-project figure > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
.v12-featured-project figure.is-image::before {
  content: "";
  position: absolute;
  inset: -18px;
  background: linear-gradient(90deg, rgba(2, 8, 17, .64), rgba(2, 8, 17, .22) 50%, rgba(2, 8, 17, .64)), var(--featured-project-bg) center / cover no-repeat;
  filter: blur(14px) saturate(.72);
  opacity: .52;
  transform: scale(1.06);
}
.v12-featured-project figure > span {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 8px 11px;
  color: var(--v12-cyan);
  background: rgba(3,8,18,.82);
  border: 1px solid rgba(100,215,255,.3);
  font-size: 10px;
  letter-spacing: .08em;
  z-index: 2;
}
.v12-featured-project > div { padding: 26px 28px 30px; display: grid; grid-template-columns: 1fr auto; gap: 9px 24px; align-items: end; }
.v12-featured-project h3 { max-width: 780px; color: #fff; font-size: clamp(24px, 2.3vw, 36px); line-height: 1.28; }
.v12-featured-project p { color: rgba(255,255,255,.58); font-size: 13px; }
.v12-featured-project > div > a { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--v12-cyan); font-size: 12px; text-decoration: none; }
.v12-featured-project > div > a b { font-weight: 750; }
.v12-project-stack { display: grid; gap: 12px; }
.v12-project-stack a { min-height: 0; display: grid; grid-template-columns: 44% 1fr; overflow: hidden; transition: border-color .25s ease, transform .25s ease; }
.v12-project-stack a:hover { transform: translateX(4px); border-color: rgba(100,215,255,.55); }
.v12-project-stack img { width: 100%; height: 100%; min-height: 142px; object-fit: cover; }
.v12-project-stack div { padding: 17px 18px; display: flex; flex-direction: column; }
.v12-project-stack span { color: var(--v12-cyan); font-size: 9px; letter-spacing: .08em; }
.v12-project-stack h3 { margin-top: 10px; color: #fff; font-size: 16px; line-height: 1.45; }
.v12-project-stack b { margin-top: auto; color: var(--v12-cyan); }

/* Editorial company and platform story */
.company { color: #10263a; background: var(--v12-paper); }
.company-grid { grid-template-columns: 1fr 1fr; gap: clamp(60px, 10vw, 170px); }
.company-statement h2 { font-size: clamp(48px, 5.3vw, 78px); letter-spacing: -.055em; }
.company-copy .lead { color: #10263a; font-size: clamp(22px, 2vw, 30px); }
.company-copy p:not(.lead) { color: #526a7f; }
.stat-strip { margin-top: 74px; background: transparent; border-color: var(--v12-line-light); box-shadow: none; }
.stat-strip > div { border-color: var(--v12-line-light); }
.stat-strip strong { color: #0b3459; }
.stat-strip span { color: #657b8f; }

.intelligence-story { color: #fff; background: #06111f; }
.intelligence-story .section-heading h2 { color: #fff; }
.intelligence-story .section-heading p { color: rgba(255,255,255,.56); }
.story-grid { grid-template-columns: 340px minmax(0,1fr); gap: 72px; }
.story-stage { min-height: 640px; background: #020813; border: 1px solid var(--v12-line-dark); box-shadow: 0 34px 84px rgba(0,0,0,.26); }
.story-media img { object-fit: cover; }
.story-overlay { max-width: 620px; background: rgba(3,8,18,.76); border-left: 2px solid var(--v12-cyan); }
.scan-line { background: rgba(100,215,255,.7); }
.story-step { border-color: var(--v12-line-dark); }

.product-section { color: #fff; background: #081522; }
.product-section .section-heading h2 { color: #fff; }
.product-section .section-heading p { color: rgba(255,255,255,.57); }
.product-stage { min-height: 680px; border: 1px solid var(--v12-line-dark); background: #020813; box-shadow: 0 32px 80px rgba(0,0,0,.26); }
.product-visual img { object-fit: contain; background: #06111f; }
.product-shade { background: rgba(3,8,18,.2); }
.product-info { background: rgba(3,8,18,.86); border-left: 2px solid var(--v12-cyan); }

.architecture-section { color: #10263a; background: #dfe8f0; }
.architecture-section .section-heading h2 { color: #10263a; }
.architecture-section .section-heading p { color: #526a7f; }
.architecture { border-color: var(--v12-line-light); }
.architecture-node { color: #10263a; background: rgba(255,255,255,.42); border-color: var(--v12-line-light); }
.architecture-node.active { color: #fff; background: #0a2239; }
.architecture-detail { background: #fff; border-color: var(--v12-line-light); }

.solution-section { color: #fff; background: #071321; }
.solution-section .section-heading h2 { color: #fff; }
.solution-section .section-heading p { color: rgba(255,255,255,.56); }
.solution-grid { gap: 14px; }
.solution-tile { background: #020813; border-color: var(--v12-line-dark); }
.solution-tile img { object-fit: contain; background: #020813; }
.solution-cover { background: rgba(3,8,18,.76); }
.buyer-section { color: #10263a; background: #f7f9fc; }
.buyer-section .section-heading h2 { color: #10263a; }
.buyer-section .section-heading p { color: #5d7387; }
.buyer-path { color: #10263a; border-color: var(--v12-line-light); }
.buyer-path:hover { color: #10263a; background: #edf5fc; }
.buyer-path p { color: #5d7387; }
.buyer-path div i { color: #31516c; border-color: var(--v12-line-light); }
.buyer-path > b { border-color: rgba(40,120,255,.28); color: var(--v12-blue); }
.buyer-cta { border-top: 1px solid var(--v12-line-light); }
.buyer-cta p { color: #5d7387; }

/* Page heroes use contained, readable product/project media. */
.v12-page-hero {
  min-height: 700px;
  padding: 150px 0 88px;
  color: #fff;
  background: #06111f;
  overflow: hidden;
}
.v12-page-hero::before,
.v12-page-hero::after { display: none; }
.v12-page-hero-layout {
  position: relative;
  z-index: 2;
  min-height: 460px;
  display: grid;
  grid-template-columns: minmax(360px, .72fr) minmax(580px, 1.28fr);
  gap: clamp(46px, 6vw, 92px);
  align-items: center;
}
.v12-page-hero .page-hero-content { position: static; width: auto; padding: 0; }
.v12-page-hero .page-hero-content h1 {
  max-width: 620px;
  margin-top: 24px;
  color: #fff;
  font-size: clamp(52px, 5.4vw, 78px);
  line-height: 1.04;
  letter-spacing: -.05em;
}
.v12-page-hero .page-hero-content > p { max-width: 580px; color: rgba(255,255,255,.62); font-size: 16px; line-height: 1.9; }
.v12-page-hero .page-hero-meta { color: rgba(255,255,255,.55); }
.v12-page-hero-media {
  position: relative;
  margin: 0;
  aspect-ratio: 16/9;
  display: grid;
  place-items: center;
  background: #020813;
  border: 1px solid rgba(100,215,255,.26);
  box-shadow: 0 32px 86px rgba(0,0,0,.34);
  overflow: hidden;
}
.v12-page-hero-media img,
.v12-page-hero-media video { width: 100%; height: 100%; display: block; object-fit: contain; background: #020813; }
.v12-page-hero-media figcaption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #fff;
  background: rgba(3,8,18,.8);
  border-left: 2px solid var(--v12-cyan);
  font-size: 10px;
}
.v12-page-hero-media figcaption span { color: var(--v12-cyan); letter-spacing: .1em; }
.v12-page-hero-media figcaption b { max-width: 60%; text-align: right; }

/* Solutions become image-led editorial rows instead of tiles. */
.solution-role-section { color: #10263a; background: var(--v12-paper); }
.solution-role-section .section-heading h2 { color: #10263a; }
.solution-role-section .section-heading p { color: #5d7387; }
.solution-role-grid { grid-template-columns: 1fr; border: 0; border-top: 1px solid var(--v12-line-light); }
.solution-role-grid a {
  min-height: 124px;
  padding: 24px 0;
  display: grid;
  grid-template-columns: 64px 1fr 52px;
  gap: 26px;
  align-items: center;
  color: #10263a;
  border: 0;
  border-bottom: 1px solid var(--v12-line-light);
}
.solution-role-grid a:hover { padding-left: 16px; background: #e4eef7; transform: none; }
.solution-role-grid a > div { display: grid; grid-template-columns: 180px 1.2fr 1fr; gap: 32px; align-items: center; }
.solution-role-grid small { margin: 0; color: var(--v12-blue); }
.solution-role-grid h3 { margin: 0; color: #10263a; font-size: 20px; }
.solution-role-grid p { margin: 0; color: #5d7387; font-size: 13px; }
.solution-role-grid b { margin: 0; color: var(--v12-blue); }

.solution-list-section { color: #fff; background: #06111f; }
.solution-list {
  margin-top: 54px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  border: 0;
}
.solution-list-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  color: #fff;
  background: #091827;
  border: 1px solid var(--v12-line-dark);
  overflow: hidden;
}
.solution-list-card::before { display: none; }
.solution-list-card figure { width: 100%; height: auto; margin: 0; aspect-ratio: 16/9; background: #020813; border: 0; border-bottom: 1px solid var(--v12-line-dark); }
.solution-list-card figure::after { display: none; }
.solution-list-card figure img { width: 100%; height: 100%; object-fit: contain; background: #020813; filter: none; }
.solution-list-card figure figcaption { background: rgba(3,8,18,.82); }
.solution-list-copy { padding: 27px 29px 30px; display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; }
.solution-list-copy > span { color: var(--v12-cyan); font-size: 11px; }
.solution-list-copy > small { color: rgba(255,255,255,.48); font-size: 10px; }
.solution-list-copy h3,
.solution-list-copy p,
.solution-list-copy > div,
.solution-list-copy > b { grid-column: 1 / -1; }
.solution-list-copy h3 { margin-top: 10px; color: #fff; font-size: 25px; line-height: 1.3; }
.solution-list-copy p { margin-top: 8px; color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.8; }
.solution-list-copy > div { margin-top: 17px; display: flex; flex-wrap: wrap; gap: 7px; }
.solution-list-copy i { padding: 6px 9px; color: rgba(255,255,255,.7); border: 1px solid var(--v12-line-dark); font-size: 9px; font-style: normal; }
.solution-list-copy > b { margin-top: 24px; color: var(--v12-cyan); font-size: 11px; }
.approach-section { color: #10263a; background: #dfe8f0; }

/* Solution detail media and capability stage */
.solution-outcome { color: #fff; background: #071321; }
.solution-outcome .section-heading h2 { color: #fff; }
.solution-outcome .section-heading p { color: rgba(255,255,255,.58); }
.solution-outcome-grid { grid-template-columns: minmax(340px,.72fr) minmax(520px,1.28fr); gap: 70px; }
.solution-outcome .media { width: 100%; min-width: 0; height: auto; aspect-ratio: 16/10; background: #020813; border-color: var(--v12-line-dark); }
.solution-outcome .media img { object-fit: contain; }
.solution-features { color: #fff; background: #050d18; }
.solution-capability-stage { border: 1px solid var(--v12-line-dark); background: #071321; }
.solution-capability-media { background: #020813; }
.solution-capability-media img,
.solution-capability-media video { object-fit: contain; background: #020813; }
.implementation-section { color: #10263a; background: var(--v12-paper); }

/* Cases: consistent, uncropped project frames and a visible image-only state. */
.cases-section { color: #fff; background: #06111f; }
.case-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.case-card > a { background: #091827; border-color: var(--v12-line-dark); }
.case-card .case-card-media { aspect-ratio: 16/10; background: #020813; }
.case-card img { width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #020813; filter: none; }
.case-card > a > div:last-child { min-height: 260px; padding: 25px; }
.case-card-project:first-child { grid-column: span 2; }
.case-card-project:first-child > a { grid-template-columns: 1.32fr .68fr; }
.case-card-project:first-child > a .case-card-media { aspect-ratio: auto; min-height: 430px; }
.case-card-project:first-child > a img { min-height: 0; height: 100%; object-fit: contain; }
.case-card-project:first-child > a > div:last-child { min-height: 430px; }
.case-video-mark { color: var(--v12-cyan); border-color: rgba(100,215,255,.35); }
.case-card.image-only .case-video-mark { color: #fff; background: rgba(40,120,255,.8); }

/* Case detail: cinematic title followed by the complete project screen. */
.case-detail-main { color: rgba(255,255,255,.78); background: #050c15; }
.case-detail-hero { min-height: 0; padding: 138px 0 90px; background: #06111f; }
.case-detail-hero::before,
.case-detail-hero::after { display: none; }
.case-breadcrumb { margin-bottom: 42px; }
.case-detail-hero-grid { grid-template-columns: 1fr; gap: 48px; }
.case-detail-hero-grid > div:first-child { max-width: 1080px; }
.case-detail-hero h1 { max-width: 1120px; font-size: clamp(46px, 5.6vw, 78px); line-height: 1.06; }
.case-detail-summary { max-width: 900px; }
.case-detail-cover { width: 100%; max-width: none; background: #020813; }
.case-detail-cover video,
.case-detail-cover img { width: 100%; min-height: 0; aspect-ratio: 16/9; object-fit: contain; background: #020813; }
.case-detail-cover figcaption { background: rgba(3,8,18,.86); }
.case-fact-strip { margin-top: 0; background: #071321; }
.case-fact-grid { background: transparent; border-color: var(--v12-line-dark); box-shadow: none; }
.case-fact-grid > div { border-color: var(--v12-line-dark); }
.case-detail-section { background: #050c15; }
.case-detail-article li { background: #081522; }
.case-gallery { grid-template-columns: 1.25fr .75fr; }
.case-gallery figure { background: #020813; }
.case-gallery img { object-fit: contain; background: #020813; }

/* About and contact retain distinct editorial structures. */
.about-intro { color: #fff; background: #06111f; }
.about-intro .section-heading h2 { color: #fff; }
.about-intro .section-heading p { color: rgba(255,255,255,.58); }
.about-editorial { grid-template-columns: 1.25fr .75fr .75fr; gap: 0; border: 1px solid var(--v12-line-dark); }
.about-editorial > div { min-height: 440px; padding: 38px; background: #081522; border-right: 1px solid var(--v12-line-dark); }
.about-editorial > div:first-child { background: #0b2238; }
.about-business h3,
.about-team h3 { margin-top: 96px; }
.values-section { background: #dfe8f0; }
.about-capabilities { background: #f7f9fc; }
.contact-section { background: var(--v12-paper); }
@media (max-width: 1180px) {
  .v12-home-hero .hero-journey-copy { display: none; }
  .v12-page-hero-layout { grid-template-columns: minmax(320px,.8fr) minmax(480px,1.2fr); gap: 42px; }
  .v12-project-reel-grid { grid-template-columns: 1fr; }
  .v12-project-stack { grid-template-columns: repeat(3,1fr); }
  .v12-project-stack a { grid-template-columns: 1fr; }
  .v12-project-stack img { aspect-ratio: 16/9; min-height: 0; }
  .story-grid { grid-template-columns: 280px minmax(0,1fr); gap: 42px; }
  .case-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 980px) {
  .container,
  .topbar,
  .v12-home-hero .hero-content { width: min(calc(100% - 48px), 1460px); }
  .v12-home-hero .hero-copy-block { width: min(610px, 76vw); }
  .v12-page-hero { min-height: 0; padding-bottom: 64px; }
  .v12-page-hero-layout { grid-template-columns: 1fr; }
  .v12-page-hero .page-hero-content { max-width: 720px; }
  .v12-page-hero-media { width: 100%; aspect-ratio: 16/9; }
  .story-grid { grid-template-columns: 1fr; }
  .story-grid > * { min-width: 0; }
  .story-steps { display: grid; grid-template-columns: repeat(3,1fr); }
  .solution-list { grid-template-columns: 1fr; }
  .solution-outcome-grid { grid-template-columns: 1fr; }
  .solution-role-grid a > div { grid-template-columns: 150px 1fr; }
  .solution-role-grid p { grid-column: 1 / -1; }
  .about-editorial { grid-template-columns: 1fr 1fr; }
  .about-editorial > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .section { padding: 76px 0; }
  .container,
  .topbar,
  .v12-home-hero .hero-content { width: calc(100% - 36px); }
  .section-heading h2 { font-size: clamp(36px, 10.5vw, 48px); }
  .v12-home-hero { height: 100svh; min-height: 760px; max-height: 900px; }
  .v12-home-hero .hero-media-art { object-position: 61% center; opacity: .72; }
  .v12-home-hero .hero-media-shade { background: rgba(3,8,18,.47); }
  .v12-home-hero .hero-content { padding: 118px 0 146px; }
  .v12-home-hero .hero-copy-block { width: 100%; }
  .v12-home-hero .hero-copy-block h1 { font-size: clamp(39px, 10.4vw, 48px); }
  .v12-home-hero .hero-copy-block h1 strong { display: block; margin-left: 0; }
  .v12-home-hero .hero-kicker { max-width: 330px; white-space: normal; line-height: 1.6; }
  .v12-home-hero .hero-claim { margin-top: 24px; font-size: 16px; }
  .v12-home-hero .hero-summary { font-size: 13px; line-height: 1.78; }
  .v12-home-hero .hero-actions { gap: 8px; }
  .v12-home-hero .hero-actions .button { min-width: 0; flex: 1; padding: 0 12px; }
  .hero-journey-rail {
    min-height: 108px;
    padding: 0 18px;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .hero-journey-rail button { min-width: 124px; min-height: 108px; padding: 21px 13px 18px 0; scroll-snap-align: start; }
  .v12-project-reel-head { align-items: flex-start; flex-direction: column; }
  .v12-featured-project > div { grid-template-columns: 1fr; }
  .v12-featured-project > div > a { grid-column: 1; grid-row: auto; margin-top: 12px; }
  .v12-project-stack { grid-template-columns: 1fr; }
  .v12-project-stack a { grid-template-columns: 42% 1fr; }
  .company-grid { grid-template-columns: 1fr; gap: 40px; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-intro,
  .story-stage { width: 100%; min-width: 0; }
  .story-steps { display: flex; overflow-x: auto; }
  .story-step { min-width: 152px; }
  .story-stage { min-height: 500px; }
  .product-stage { min-height: 0; }
  .architecture { display: grid; grid-template-columns: 1fr; }
  .architecture-flow { display: none; }
  .solution-grid { grid-template-columns: 1fr; }
  .v12-page-hero { padding: 120px 0 54px; }
  .v12-page-hero-layout { gap: 36px; }
  .v12-page-hero .page-hero-content h1 { font-size: clamp(42px, 12vw, 56px); }
  .v12-page-hero .page-hero-content > p { font-size: 14px; }
  .v12-page-hero-media figcaption { position: static; flex-direction: column; gap: 4px; }
  .v12-page-hero-media figcaption b { max-width: none; text-align: left; }
  .solution-role-grid a { min-height: 0; grid-template-columns: 38px 1fr 34px; gap: 12px; }
  .solution-role-grid a > div { display: block; }
  .solution-role-grid h3 { margin-top: 7px; }
  .solution-role-grid p { margin-top: 8px; }
  .solution-list-copy { padding: 22px; }
  .case-grid { grid-template-columns: 1fr; }
  .case-card-project:first-child { grid-column: auto; }
  .case-card-project:first-child > a { grid-template-columns: 1fr; }
  .case-card-project:first-child > a .case-card-media { min-height: 0; aspect-ratio: 16/10; }
  .case-card-project:first-child > a > div:last-child,
  .case-card > a > div:last-child { min-height: 235px; }
  .case-detail-hero { padding: 112px 0 66px; }
  .case-detail-hero h1 { font-size: clamp(38px, 10.8vw, 52px); }
  .case-detail-cover video,
  .case-detail-cover img { aspect-ratio: 16/10; }
  .case-gallery { grid-template-columns: 1fr; grid-template-rows: auto; }
  .case-gallery figure:first-child { grid-row: auto; }
  .case-gallery figure { min-height: 0; aspect-ratio: 16/10; }
  .about-editorial { grid-template-columns: 1fr; }
  .about-editorial > div:first-child { grid-column: auto; }
  .about-editorial > div { min-height: 300px; border-right: 0; border-bottom: 1px solid var(--v12-line-dark); }
  .about-business h3,
  .about-team h3 { margin-top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .v12-home-hero .hero-media-art { animation: none; transform: none; }
  .motion-ready .reveal:not(.visible) { opacity: 1; transform: none; }
}

/* ==========================================================
   V0.13 — product-news carousel + five-part homepage
   ========================================================== */

.v13-home-carousel {
  position: relative;
  height: min(900px, 100svh);
  min-height: 720px;
  color: #fff;
  background: #020812;
  overflow: hidden;
  isolation: isolate;
}
.v13-home-carousel::before,
.v13-home-carousel::after { display: none; }
.home-carousel-slides,
.home-carousel-slide,
.home-carousel-media { position: absolute; inset: 0; }
.home-carousel-slide {
  visibility: hidden;
  opacity: 0;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.home-carousel-slide.active { visibility: visible; opacity: 1; transition-delay: 0s; z-index: 2; }
.home-carousel-media video,
.home-carousel-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--media-position, center center);
  background: #020812;
  transform: scale(1.01);
}
.home-carousel-slide.active .home-carousel-media img { animation: v13PosterDrift 10s ease-out both; }
.home-carousel-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2,8,18,.94) 0%, rgba(2,8,18,.86) 24%, rgba(2,8,18,.5) 48%, rgba(2,8,18,.12) 76%), linear-gradient(180deg, rgba(2,8,18,.42) 0%, transparent 30%, transparent 68%, rgba(2,8,18,.72) 100%);
}
.home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-media video {
  transform: scale(1.105);
  filter: saturate(.86) contrast(1.04) brightness(.9);
}
.home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-shade {
  background:
    linear-gradient(90deg, rgba(1,7,16,.96) 0%, rgba(2,9,19,.9) 27%, rgba(2,10,21,.64) 48%, rgba(2,9,18,.2) 75%, rgba(2,8,18,.08) 100%),
    linear-gradient(180deg, rgba(1,6,14,.52) 0%, rgba(1,7,16,.08) 28%, rgba(1,7,16,.04) 62%, rgba(1,7,16,.8) 100%);
}
.home-carousel-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
  padding-top: 44px;
  padding-bottom: 118px;
}
.home-carousel-copy { width: min(760px, 48vw); opacity: 0; transform: translate3d(0, 22px, 0); }
.home-carousel-slide.active .home-carousel-copy { opacity: 1; transform: none; transition: opacity .7s ease .2s, transform .8s cubic-bezier(.2,.75,.2,1) .2s; }
.home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy { width: min(980px, 70vw); }
.home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1 { max-width: 980px; margin-top: 0; font-size: clamp(56px, 4.8vw, 76px); letter-spacing: -.045em; }
.home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy p { margin-top: 24px; color: rgba(255,255,255,.88); }
.home-carousel-eyebrow { display: flex; align-items: center; gap: 11px; color: #77ddff; font-size: 10px; font-weight: 750; letter-spacing: .15em; }
.home-carousel-eyebrow i { width: 8px; height: 8px; background: #64d7ff; box-shadow: 0 0 18px rgba(100,215,255,.8); }
.home-carousel-copy h1,
.home-carousel-copy h2 { max-width: 760px; margin-top: 28px; color: #fff; font-size: clamp(56px, 5.1vw, 82px); font-weight: 780; line-height: 1.07; letter-spacing: -.055em; text-wrap: balance; }
.home-carousel-copy p { max-width: 680px; margin-top: 26px; color: rgba(255,255,255,.88); font-size: clamp(19px, 1.55vw, 25px); line-height: 1.55; font-weight: 520; }
.home-carousel-cta { width: fit-content; min-height: 50px; margin-top: 34px; padding: 0 19px; display: inline-flex; align-items: center; gap: 42px; color: #fff; text-decoration: none; background: #2878ff; border: 1px solid rgba(255,255,255,.18); font-size: 13px; font-weight: 680; transition: background .25s ease, transform .25s ease; }
.home-carousel-cta:hover { background: #3f8bff; transform: translateY(-2px); }
.home-carousel-cta b { font-size: 18px; }
.home-carousel-controls { position: absolute; z-index: 5; bottom: 26px; left: 50%; width: max-content; display: flex; gap: 14px; align-items: center; transform: translateX(-50%); }
.home-carousel-tabs { display: flex; gap: 8px; align-items: center; }
.home-carousel-tabs button { position: relative; width: 9px; height: 9px; min-height: 0; padding: 0; color: #fff; background: rgba(255,255,255,.3); border: 0; border-radius: 999px; overflow: hidden; cursor: pointer; transition: width .32s ease, background .25s ease; }
.home-carousel-tabs button::before { display: none; }
.home-carousel-tabs button span,
.home-carousel-tabs button b { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.home-carousel-tabs button i { position: absolute; inset: 0 auto 0 0; width: 0; background: #fff; border-radius: inherit; }
.home-carousel-tabs button.active { width: 36px; background: rgba(255,255,255,.24); }
.home-carousel-tabs button.active i { width: 100%; transition: width 8s linear; }
.home-carousel-tabs button:focus,
.home-matrix-list button:focus,
.home-solutions-tabs button:focus,
.home-technology-chain button:focus { outline: none; }
.home-carousel-tabs button:focus-visible,
.home-matrix-list button:focus-visible,
.home-solutions-tabs button:focus-visible,
.home-technology-chain button:focus-visible { outline: 2px solid #64d7ff; outline-offset: -3px; }
.home-carousel-toggle { width: 32px; height: 32px; padding: 0; color: rgba(255,255,255,.78); background: rgba(2,8,18,.48); border: 1px solid rgba(255,255,255,.18); border-radius: 50%; cursor: pointer; }
.home-carousel-toggle span { font-size: 0; }
.home-carousel-toggle span::before { content: "Ⅱ"; font-size: 10px; letter-spacing: -.12em; }
.home-carousel-toggle[aria-pressed="true"] span::before { content: "▶"; font-size: 9px; letter-spacing: 0; }
.home-carousel-toggle:hover { color: #fff; border-color: rgba(100,215,255,.65); }
@keyframes v13PosterDrift { from { transform: scale(1.01); } to { transform: scale(1.055) translate3d(-.5%, -.3%, 0); } }

.home-matrix-section { color: #0d263d; background: #edf3f8; }
.home-matrix-section .section-heading h2,
.home-technology-section .section-heading h2 { color: #0d263d; }
.home-matrix-section .section-heading p,
.home-technology-section .section-heading p { color: #5d7285; }
.home-foundation-panel { margin-top: 58px; display: grid; grid-template-columns: minmax(360px,.78fr) minmax(520px,1.22fr); color: #fff; background: #071522; border: 1px solid rgba(21,62,96,.14); overflow: hidden; }
.home-foundation-panel > div { padding: clamp(34px,4.2vw,66px); align-self: center; }
.home-foundation-panel > div > span,
.home-matrix-preview figcaption > span,
.home-solution-preview figcaption > span,
.home-technology-detail span,
.home-3dgs-note > span { color: #64d7ff; font-size: 10px; font-weight: 750; letter-spacing: .13em; }
.home-foundation-panel h3 { margin-top: 24px; color: #fff; font-size: clamp(31px,3.2vw,48px); line-height: 1.2; }
.home-foundation-panel p { margin-top: 16px; color: rgba(255,255,255,.62); font-size: 16px; line-height: 1.8; }
.home-foundation-panel .tag-row { margin-top: 25px; }
.home-foundation-panel a,
.home-matrix-preview a,
.home-solution-preview a,
.home-technology-detail a,
.home-3dgs-note a { margin-top: 28px; display: inline-flex; gap: 22px; color: #64d7ff; text-decoration: none; font-size: 12px; font-weight: 700; }
.home-foundation-panel > img { width: 100%; height: 100%; min-height: 430px; object-fit: contain; background: #020812; }
.home-matrix-workbench { margin-top: 18px; display: grid; grid-template-columns: minmax(340px,.72fr) minmax(620px,1.28fr); min-height: 650px; background: #fff; border: 1px solid #c7d5e0; }
.home-matrix-list { display: grid; border-right: 1px solid #c7d5e0; }
.home-matrix-list button { min-width: 0; padding: 14px 22px; display: grid; grid-template-columns: 32px 1fr auto; gap: 3px 15px; align-content: center; color: #496174; text-align: left; background: transparent; border: 0; border-bottom: 1px solid #d7e1e9; cursor: pointer; }
.home-matrix-list button:last-child { border-bottom: 0; }
.home-matrix-list button span { grid-row: 1/3; color: #2878ff; font-size: 10px; }
.home-matrix-list button b { color: #15344e; font-size: 15px; }
.home-matrix-list button small { grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.home-matrix-list button > i { grid-column: 3; grid-row: 1/3; align-self: center; color: #2878ff; font-style: normal; opacity: 0; transform: translateX(-6px); transition: .25s ease; }
.home-matrix-list button.active { background: #e7f1fa; }
.home-matrix-list button.active > i { opacity: 1; transform: none; }
.home-matrix-preview { position: relative; min-width: 0; margin: 0; background: #06111f; overflow: hidden; }
.home-matrix-preview > img { width: 100%; height: 100%; min-height: 650px; display: block; object-fit: contain; background: #020812; }
.home-matrix-preview figcaption,
.home-solution-preview figcaption { position: absolute; right: 26px; bottom: 26px; left: 26px; padding: 25px 28px; color: #fff; background: rgba(3,10,20,.88); border-left: 2px solid #64d7ff; backdrop-filter: blur(12px); }
.home-matrix-preview figcaption h3,
.home-solution-preview figcaption h3 { margin-top: 11px; color: #fff; font-size: clamp(25px,2.3vw,36px); line-height: 1.25; }
.home-matrix-preview figcaption p,
.home-solution-preview figcaption p { margin-top: 9px; color: rgba(255,255,255,.6); font-size: 13px; }
.home-section-link { margin-top: 28px; display: flex; justify-content: flex-end; }
.home-section-link a { display: inline-flex; gap: 18px; color: #2878ff; font-size: 12px; font-weight: 700; text-decoration: none; }

.home-solutions-section { color: #fff; background: #06111f; }
.home-solutions-section .section-heading h2 { color: #fff; }
.home-solutions-section .section-heading p { color: rgba(255,255,255,.57); }
.home-solutions-stage { margin-top: 58px; min-height: 660px; display: grid; grid-template-columns: minmax(340px,.68fr) minmax(620px,1.32fr); border: 1px solid rgba(124,181,224,.22); background: #081522; }
.home-solutions-tabs { display: grid; border-right: 1px solid rgba(124,181,224,.22); }
.home-solutions-tabs button { padding: 17px 24px; display: grid; grid-template-columns: 34px 1fr; gap: 5px 16px; align-content: center; color: rgba(255,255,255,.52); text-align: left; background: transparent; border: 0; border-bottom: 1px solid rgba(124,181,224,.16); cursor: pointer; }
.home-solutions-tabs button:last-child { border-bottom: 0; }
.home-solutions-tabs button span { grid-row: 1/3; color: #64d7ff; font-size: 10px; }
.home-solutions-tabs button b { color: inherit; font-size: 16px; }
.home-solutions-tabs button small { grid-column: 2; font-size: 10px; }
.home-solutions-tabs button.active { color: #fff; background: #0c2a44; }
.home-solution-preview { position: relative; min-width: 0; margin: 0; background: #020812; overflow: hidden; }
.home-solution-preview > img { width: 100%; height: 100%; min-height: 660px; display: block; object-fit: contain; background: #020812; }
.home-section-link.light a { color: #64d7ff; }

.home-technology-section { color: #0d263d; background: #f5f8fb; }
.home-technology-chain { margin-top: 58px; }
.home-technology-detail { margin-top: 18px; display: grid; grid-template-columns: minmax(360px,.72fr) minmax(620px,1.28fr); min-height: 520px; color: #fff; background: #071522; overflow: hidden; }
.home-technology-detail > div { padding: clamp(38px,5vw,72px); align-self: center; }
.home-technology-detail h3 { margin-top: 20px; color: #fff; font-size: clamp(30px,3vw,46px); line-height: 1.22; }
.home-technology-detail p { margin-top: 20px; color: rgba(255,255,255,.62); line-height: 1.85; }
.home-technology-detail > img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.home-3dgs-note { margin-top: 18px; padding: 30px 34px; display: grid; grid-template-columns: 110px minmax(220px,.55fr) minmax(340px,1fr) auto; gap: 24px; align-items: center; background: #e3edf5; border: 1px solid #c7d5e0; }
.home-3dgs-note h3 { color: #12324b; font-size: 23px; }
.home-3dgs-note p { color: #5d7285; line-height: 1.75; }
.home-3dgs-note a { margin-top: 0; color: #2878ff; white-space: nowrap; }
.home-project-section { padding-top: 110px; padding-bottom: 120px; }

.technology-3dgs-section { color: #10263a; background: #eef4f8; }
.technology-3dgs-grid { display: grid; grid-template-columns: minmax(340px,.68fr) minmax(620px,1.32fr); gap: clamp(50px,7vw,100px); align-items: center; }
.technology-3dgs-grid .section-heading h2 { color: #10263a; }
.technology-3dgs-grid .section-heading p { color: #5d7285; }
.technology-3dgs-grid figure { position: relative; margin: 0; aspect-ratio: 16/9; background: #020812; overflow: hidden; }
.technology-3dgs-grid figure img { width: 100%; height: 100%; object-fit: cover; }
.technology-3dgs-grid figcaption { position: absolute; right: 18px; bottom: 18px; left: 18px; padding: 12px 14px; display: flex; justify-content: space-between; color: #fff; background: rgba(2,8,18,.78); font-size: 9px; }
.technology-3dgs-grid figcaption span { color: #64d7ff; }
.is-updating { animation: v13MediaIn .45s ease both; }
@keyframes v13MediaIn { from { opacity: .35; transform: scale(1.012); } to { opacity: 1; transform: none; } }

@media (max-width: 1100px) {
  .home-carousel-copy { width: min(720px, 64vw); }
  .home-foundation-panel,
  .home-matrix-workbench,
  .home-solutions-stage,
  .home-technology-detail,
  .technology-3dgs-grid { grid-template-columns: 1fr; }
  .home-foundation-panel > img { min-height: 0; aspect-ratio: 16/9; }
  .home-matrix-list,
  .home-solutions-tabs { grid-template-columns: repeat(4, minmax(190px,1fr)); overflow-x: auto; border-right: 0; border-bottom: 1px solid #c7d5e0; }
  .home-solutions-tabs { grid-template-columns: repeat(7, minmax(190px,1fr)); border-color: rgba(124,181,224,.22); }
  .home-matrix-list button,
  .home-solutions-tabs button { min-height: 94px; border-right: 1px solid rgba(90,120,145,.24); border-bottom: 0; }
  .home-matrix-preview > img,
  .home-solution-preview > img { min-height: 0; aspect-ratio: 16/9; }
  .home-technology-detail > img { min-height: 0; aspect-ratio: 16/9; }
  .home-3dgs-note { grid-template-columns: 100px 1fr; }
  .home-3dgs-note p,
  .home-3dgs-note a { grid-column: 2; }
}

@media (max-width: 720px) {
  .v13-home-carousel { height: 100svh; min-height: 720px; max-height: 880px; }
  .home-carousel-media video,
  .home-carousel-media img { object-position: 61% center; }
  .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-media video { object-position: 66% center; transform: scale(1.105); }
  .home-carousel-shade { background: linear-gradient(90deg, rgba(2,8,18,.9), rgba(2,8,18,.58) 68%, rgba(2,8,18,.3)), linear-gradient(180deg, rgba(2,8,18,.4), transparent 34%, rgba(2,8,18,.7)); }
  .home-carousel-content { padding-top: 76px; padding-bottom: 154px; align-items: center; }
  .home-carousel-copy { width: 100%; }
  .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy { width: 100%; }
  .home-carousel-eyebrow { max-width: 320px; font-size: 8px; line-height: 1.6; }
  .home-carousel-copy h1,
  .home-carousel-copy h2 { margin-top: 22px; font-size: clamp(40px,11.5vw,54px); line-height: 1.1; }
  .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1 { max-width: 350px; margin-top: 0; font-size: clamp(43px, 12vw, 54px); line-height: 1.08; }
  .home-carousel-copy p { max-width: 330px; margin-top: 21px; font-size: 17px; }
  .home-carousel-cta { min-height: 48px; margin-top: 28px; }
  .home-carousel-controls { bottom: max(18px, env(safe-area-inset-bottom)); gap: 12px; }
  .home-carousel-tabs { gap: 6px; }
  .home-carousel-tabs button { width: 8px; height: 8px; min-height: 0; padding: 0; }
  .home-carousel-tabs button.active { width: 32px; }
  .home-carousel-toggle { width: 30px; height: 30px; }
  .home-foundation-panel { margin-top: 38px; }
  .home-foundation-panel > div { padding: 30px 24px; }
  .home-foundation-panel h3 { font-size: 30px; }
  .home-matrix-workbench,
  .home-solutions-stage { min-height: 0; }
  .home-matrix-list { grid-template-columns: repeat(8, minmax(176px,1fr)); }
  .home-solutions-tabs { grid-template-columns: repeat(7, minmax(176px,1fr)); }
  .home-matrix-list button,
  .home-solutions-tabs button { min-height: 86px; padding: 13px 16px; }
  .home-matrix-preview figcaption,
  .home-solution-preview figcaption { right: 12px; bottom: 12px; left: 12px; padding: 18px; }
  .home-matrix-preview figcaption h3,
  .home-solution-preview figcaption h3 { font-size: 22px; }
  .home-matrix-preview figcaption p,
  .home-solution-preview figcaption p { display: none; }
  .home-matrix-preview figcaption a,
  .home-solution-preview figcaption a { margin-top: 16px; }
  .home-technology-detail > div { padding: 34px 24px; }
  .home-technology-detail h3 { font-size: 31px; }
  .home-3dgs-note { padding: 25px 22px; grid-template-columns: 1fr; gap: 12px; }
  .home-3dgs-note p,
  .home-3dgs-note a { grid-column: 1; }
  .home-project-section { padding-top: 78px; padding-bottom: 84px; }
  .technology-3dgs-grid { gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-carousel-slide,
  .home-carousel-copy,
  .home-carousel-tabs button.active i { transition: none; }
  .home-carousel-slide.active .home-carousel-media img,
  .is-updating { animation: none; }
}

/* ==========================================================
   Publish readiness — privacy, consent and legal navigation
   ========================================================== */

.footer-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  white-space: nowrap;
}
.footer-meta a {
  color: rgba(255,255,255,.68);
  text-decoration: none;
}
.footer-meta a:hover { color: #64d7ff; }
.legal-hero {
  position: relative;
  min-height: 520px;
  padding: 176px 0 92px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(3,10,20,.96), rgba(5,24,42,.84) 56%, rgba(8,43,70,.62)),
    #04101e;
  overflow: hidden;
  isolation: isolate;
}
.legal-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(100,215,255,.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,215,255,.065) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, transparent 4%, #000 44%, #000 100%);
}
.legal-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 8vw;
  width: 1px;
  height: 100%;
  background: linear-gradient(transparent, rgba(100,215,255,.55), transparent);
  box-shadow: 160px 0 rgba(100,215,255,.13), -160px 0 rgba(100,215,255,.13);
}
.legal-hero .container > span {
  color: #64d7ff;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .16em;
}
.legal-hero h1 {
  margin-top: 28px;
  font-size: clamp(58px,7.2vw,104px);
  line-height: .98;
  letter-spacing: -.06em;
}
.legal-hero p {
  max-width: 680px;
  margin-top: 34px;
  color: rgba(255,255,255,.66);
  font-size: 18px;
  line-height: 1.8;
}
.legal-hero .container > div {
  margin-top: 54px;
  padding-top: 22px;
  display: grid;
  grid-template-columns: 80px 170px 94px 1fr;
  gap: 14px 22px;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.18);
}
.legal-hero .container > div b {
  color: rgba(255,255,255,.42);
  font-size: 10px;
  font-weight: 650;
}
.legal-hero time,
.legal-hero strong { color: rgba(255,255,255,.82); font-size: 12px; font-weight: 600; }

.legal-section { color: #142d42; background: #eef4f8; }
.legal-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 920px);
  justify-content: space-between;
  gap: clamp(56px,8vw,130px);
  align-items: start;
}
.legal-toc {
  position: sticky;
  top: 106px;
}
.legal-toc > span {
  color: #2878ff;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .16em;
}
.legal-toc nav {
  margin-top: 24px;
  border-top: 1px solid #c5d4df;
}
.legal-toc nav a {
  min-height: 48px;
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  color: #496276;
  text-decoration: none;
  border-bottom: 1px solid #c5d4df;
  font-size: 12px;
}
.legal-toc nav a b { color: #2878ff; font-size: 9px; }
.legal-toc nav a:hover { color: #0d2c45; background: rgba(40,120,255,.05); }
.legal-toc > div {
  margin-top: 34px;
  padding: 22px;
  display: grid;
  gap: 9px;
  color: #fff;
  background: #071522;
}
.legal-toc > div small { color: rgba(255,255,255,.44); font-size: 9px; }
.legal-toc > div a { color: #64d7ff; font-size: 11px; text-decoration: none; }
.legal-copy { min-width: 0; }
.legal-intro {
  padding: 0 0 54px;
  color: #173851;
  font-size: clamp(20px,2.1vw,29px);
  line-height: 1.68;
}
.legal-copy > section {
  padding: 44px 0 48px;
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  gap: 34px;
  border-top: 1px solid #c5d4df;
  scroll-margin-top: 96px;
}
.legal-copy > section > span {
  color: #2878ff;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .12em;
}
.legal-copy h2 {
  color: #102f48;
  font-size: clamp(25px,2.2vw,34px);
  line-height: 1.25;
}
.legal-copy section p {
  margin-top: 18px;
  color: #536b7e;
  font-size: 14px;
  line-height: 1.95;
}
.legal-copy section p:first-of-type { margin-top: 24px; }
.legal-copy section a { color: #176fe8; text-underline-offset: 3px; }
.legal-copy > footer {
  margin-top: 14px;
  padding: 32px 0 0 106px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  border-top: 1px solid #c5d4df;
}
.legal-copy > footer p { color: #6d8191; font-size: 12px; }
.legal-copy > footer a { color: #2878ff; font-size: 12px; font-weight: 720; text-decoration: none; }

@media (max-width: 980px) {
  .legal-layout { grid-template-columns: 220px minmax(0,1fr); gap: 48px; }
  .legal-copy > footer { padding-left: 0; }
}

@media (max-width: 720px) {
  .footer-meta { justify-content: flex-start; gap: 14px; }
  .legal-hero { min-height: 0; padding: 132px 0 70px; }
  .legal-hero h1 { font-size: 58px; }
  .legal-hero p { font-size: 16px; }
  .legal-hero .container > div { grid-template-columns: 86px 1fr; margin-top: 40px; }
  .legal-layout { grid-template-columns: 1fr; gap: 54px; }
  .legal-toc { position: static; }
  .legal-toc nav { display: grid; grid-template-columns: 1fr 1fr; }
  .legal-toc nav a:nth-child(odd) { border-right: 1px solid #c5d4df; }
  .legal-toc nav a { padding-left: 10px; }
  .legal-copy > section { grid-template-columns: 1fr; gap: 15px; padding: 36px 0 40px; }
  .legal-copy > footer { align-items: flex-start; flex-direction: column; }
}

/* ==========================================================
   V0.13.8 — Homepage technology: Blackhole + platform engines
   ========================================================== */

.home-technology-section {
  padding: 132px 0 124px;
  color: #fff;
  background: #030a13;
  scroll-margin-top: 64px;
  overflow: hidden;
  isolation: isolate;
}
.home-technology-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(100, 215, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 215, 255, .08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, #000, transparent 72%);
}
.home-tech-heading {
  display: grid;
  grid-template-columns: minmax(460px, .92fr) minmax(360px, .58fr);
  gap: clamp(60px, 9vw, 150px);
  align-items: end;
}
.home-tech-heading > div > span,
.home-tech-subheading > div > span,
.blackhole-visual figcaption > span,
.blackhole-performance header > span,
.home-engine-heading span,
.home-engine-caption > span {
  color: #64d7ff;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .14em;
}
.home-tech-heading h2 {
  max-width: 760px;
  margin-top: 24px;
  color: #fff;
  font-size: clamp(48px, 5.4vw, 78px);
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -.05em;
}
.home-tech-heading > p {
  padding-bottom: 8px;
  color: rgba(255, 255, 255, .62);
  font-size: 17px;
  line-height: 1.9;
}

.home-tech-subheading {
  margin-top: 82px;
  padding-top: 34px;
  display: grid;
  grid-template-columns: minmax(360px, .72fr) minmax(420px, .78fr);
  gap: clamp(60px, 9vw, 150px);
  align-items: end;
  border-top: 1px solid rgba(135, 178, 211, .28);
}
.home-tech-subheading h3 {
  margin-top: 16px;
  color: #fff;
  font-size: clamp(38px, 4.2vw, 58px);
  line-height: 1.1;
  letter-spacing: -.045em;
}
.home-tech-subheading > p {
  color: rgba(255, 255, 255, .58);
  font-size: 15px;
  line-height: 1.85;
}

.blackhole-story { margin-top: 36px; }
.blackhole-visual {
  --scene-x: 0px;
  --scene-y: 0px;
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9.25;
  background: #07131f;
  border: 1px solid rgba(100, 215, 255, .26);
  overflow: hidden;
}
.blackhole-visual::before,
.home-engine-media::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: rgba(12, 91, 183, .78);
  mix-blend-mode: color;
}
.blackhole-visual::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(2, 8, 18, .94) 0%, rgba(2, 8, 18, .72) 34%, rgba(2, 8, 18, .12) 68%, rgba(2, 8, 18, .26) 100%);
}
.blackhole-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(.82);
  transform: translate3d(var(--scene-x), var(--scene-y), 0) scale(1.025);
  transition: transform .7s var(--ease);
}
.blackhole-visual figcaption {
  position: absolute;
  z-index: 4;
  left: clamp(28px, 5vw, 72px);
  bottom: clamp(30px, 6vw, 82px);
  width: min(520px, 44%);
}
.blackhole-visual figcaption h4 {
  margin: 21px 0 0;
  color: #fff;
  font-size: clamp(34px, 3.8vw, 58px);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.blackhole-visual figcaption p {
  max-width: 470px;
  margin-top: 20px;
  color: rgba(255, 255, 255, .7);
  font-size: 15px;
  line-height: 1.8;
}
.blackhole-scan {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 72%;
  width: 1px;
  background: rgba(100, 215, 255, .6);
  box-shadow: 0 0 34px 7px rgba(100, 215, 255, .17);
  animation: blackholeScan 7s ease-in-out infinite alternate;
}
@keyframes blackholeScan {
  from { transform: translateX(-18vw); opacity: .22; }
  to { transform: translateX(13vw); opacity: .78; }
}

.blackhole-capability-index {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(206px, auto);
  gap: 14px;
}
.blackhole-capability-index article {
  position: relative;
  min-height: 206px;
  padding: clamp(25px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  grid-column: span 2;
  color: #fff;
  background: #071522;
  border: 1px solid rgba(100, 215, 255, .22);
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s ease, background .35s ease;
}
.blackhole-capability-index article:first-child { grid-row: span 2; background: #0a3d78; }
.blackhole-capability-index article:nth-child(3),
.blackhole-capability-index article:nth-child(4) { background: #0a2745; }
.blackhole-capability-index article:hover {
  z-index: 2;
  transform: translateY(-4px);
  border-color: rgba(100, 215, 255, .62);
  background: #0b3158;
}
.blackhole-capability-index article > span {
  color: #64d7ff;
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.blackhole-capability-index article > div {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin-top: 34px;
}
.blackhole-capability-index h4 {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2.05vw, 30px);
  font-weight: 660;
  line-height: 1.3;
}
.blackhole-capability-index p {
  margin-top: 14px;
  color: rgba(255, 255, 255, .56);
  font-size: 13px;
  line-height: 1.8;
}
.blackhole-capability-index article > i {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  height: 1px;
  background: rgba(100, 215, 255, .26);
  transform: rotate(-24deg) translate3d(9%, 22px, 0);
  transform-origin: right center;
}
.blackhole-capability-index article > i::after {
  content: "";
  position: absolute;
  top: -3px;
  right: 0;
  width: 7px;
  height: 7px;
  background: #64d7ff;
  box-shadow: 0 0 14px rgba(100, 215, 255, .65);
}

.blackhole-performance {
  margin-top: 96px;
  display: grid;
  grid-template-columns: minmax(260px, .5fr) minmax(700px, 1.5fr);
  gap: clamp(54px, 8vw, 120px);
  align-items: start;
}
.blackhole-performance header { padding-top: 10px; }
.blackhole-performance header h3 {
  margin-top: 18px;
  color: #fff;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.18;
}
.blackhole-performance header p {
  margin-top: 18px;
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
  line-height: 1.8;
}
.blackhole-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.blackhole-metric-grid > div {
  min-height: 144px;
  padding: 27px 24px 24px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid rgba(135, 178, 211, .34);
}
.blackhole-metric-grid > div:nth-child(-n+3) { border-bottom: 1px solid rgba(135, 178, 211, .2); }
.blackhole-metric-grid > div:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid rgba(135, 178, 211, .18); }
.blackhole-metric-grid strong {
  color: #fff;
  font-size: clamp(30px, 3.15vw, 46px);
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -.04em;
}
.blackhole-metric-grid span {
  margin-top: 13px;
  color: rgba(255, 255, 255, .48);
  font-size: 12px;
}

.home-engine-workbench {
  margin-top: 132px;
  padding: 68px 0 0;
  color: #fff;
  background: transparent;
  border-top: 1px solid rgba(135, 178, 211, .28);
}
.home-engine-heading {
  display: grid;
  grid-template-columns: minmax(420px, .9fr) minmax(340px, .55fr);
  gap: clamp(50px, 8vw, 116px);
  align-items: end;
}
.home-engine-heading strong {
  display: block;
  max-width: 720px;
  margin-top: 18px;
  color: #fff;
  font-size: clamp(38px, 4.4vw, 62px);
  font-weight: 720;
  line-height: 1.1;
  letter-spacing: -.045em;
}
.home-engine-heading > p {
  color: rgba(255, 255, 255, .56);
  font-size: 15px;
  line-height: 1.85;
}
.home-engine-tabs {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid rgba(135, 178, 211, .28);
  border-bottom: 1px solid rgba(135, 178, 211, .28);
}
.home-engine-tabs button {
  position: relative;
  min-height: 92px;
  padding: 18px 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  color: rgba(255, 255, 255, .52);
  text-align: left;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(135, 178, 211, .22);
  cursor: pointer;
}
.home-engine-tabs button:last-child { border-right: 0; }
.home-engine-tabs button span {
  color: #2878ff;
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.home-engine-tabs button b { font-size: 14px; font-weight: 680; }
.home-engine-tabs button > i {
  position: absolute;
  right: 13px;
  bottom: -1px;
  left: 13px;
  height: 3px;
  background: #2878ff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.home-engine-tabs button:hover,
.home-engine-tabs button.active {
  color: #fff;
  background: #0a2745;
}
.home-engine-tabs button.active > i { transform: scaleX(1); }
.home-engine-tabs button:focus { outline: 0; }
.home-engine-tabs button:focus-visible { outline: 2px solid #2878ff; outline-offset: -3px; }

.home-engine-panel {
  margin-top: 24px;
  background: #071522;
  border: 1px solid rgba(100, 215, 255, .24);
  overflow: hidden;
}
.home-engine-panel.is-updating { animation: homeEngineIn .5s var(--ease) both; }
@keyframes homeEngineIn {
  from { opacity: .38; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.home-engine-media {
  --scene-x: 0px;
  --scene-y: 0px;
  position: relative;
  margin: 0;
  min-height: 0;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: #e8eef3;
  overflow: hidden;
}
.home-engine-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 73, 122, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 73, 122, .055) 1px, transparent 1px);
  background-size: 46px 46px;
}
.home-engine-media::after {
  background: rgba(38, 118, 222, .32);
}
.home-engine-media img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  padding: clamp(18px, 3.4vw, 52px);
  object-fit: contain;
  filter: grayscale(1) contrast(.98) brightness(1.04);
  transform: translate3d(var(--scene-x), var(--scene-y), 0) scale(1.01);
  transition: transform .6s var(--ease);
}
.home-engine-caption {
  min-height: 184px;
  padding: 30px 34px;
  display: grid;
  grid-template-columns: 170px minmax(320px, 1fr) minmax(240px, .62fr);
  gap: 22px 34px;
  align-items: center;
  color: #fff;
  background: #071522;
  border-top: 1px solid rgba(100, 215, 255, .24);
}
.home-engine-caption h3 {
  color: #fff;
  font-size: clamp(26px, 2.5vw, 38px);
  line-height: 1.18;
}
.home-engine-caption p {
  max-width: 610px;
  margin-top: 11px;
  color: rgba(255, 255, 255, .56);
  font-size: 13px;
  line-height: 1.8;
}
.home-engine-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.home-engine-tags i {
  padding: 7px 9px;
  color: #92deff;
  font-size: 9px;
  font-style: normal;
  border: 1px solid rgba(100, 215, 255, .28);
}

@media (max-width: 1100px) {
  .home-tech-heading,
  .home-tech-subheading,
  .home-engine-heading { grid-template-columns: 1fr; gap: 28px; }
  .home-tech-heading > p,
  .home-tech-subheading > p,
  .home-engine-heading > p { max-width: 720px; }
  .blackhole-capability-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blackhole-capability-index article { grid-column: span 1; }
  .blackhole-performance { grid-template-columns: 1fr; gap: 36px; }
  .home-engine-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-engine-tabs button:nth-child(3) { border-right: 0; }
  .home-engine-tabs button:nth-child(-n+3) { border-bottom: 1px solid rgba(135, 178, 211, .22); }
  .home-engine-caption { grid-template-columns: 150px minmax(0, 1fr); }
  .home-engine-tags { grid-column: 2; }
}

@media (max-width: 720px) {
  .home-technology-section { padding: 82px 0 78px; }
  .home-tech-heading h2 { margin-top: 19px; font-size: 42px; }
  .home-tech-heading > p { font-size: 15px; }
  .home-tech-subheading { margin-top: 54px; padding-top: 26px; }
  .home-tech-subheading h3 { font-size: 36px; }
  .home-tech-subheading > p { font-size: 13px; }
  .blackhole-story { margin-top: 28px; }
  .blackhole-visual { aspect-ratio: auto; }
  .blackhole-visual > img {
    position: relative;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    transform: none;
  }
  .blackhole-visual::after { background: rgba(2, 8, 18, .22); }
  .blackhole-visual figcaption {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    padding: 28px 22px 30px;
    background: #071522;
  }
  .blackhole-visual figcaption h4 { font-size: 31px; }
  .blackhole-visual figcaption p { margin-top: 15px; font-size: 13px; }
  .blackhole-scan { display: none; }
  .blackhole-capability-index { margin-top: 12px; grid-template-columns: 1fr; gap: 12px; }
  .blackhole-capability-index article,
  .blackhole-capability-index article:hover {
    min-height: 176px;
    padding: 24px 22px;
    grid-column: auto;
    grid-row: auto;
    transform: none;
  }
  .blackhole-capability-index article > div { margin-top: 28px; }
  .blackhole-capability-index h4 { font-size: 22px; }
  .blackhole-capability-index p { font-size: 12px; line-height: 1.7; }
  .blackhole-performance { margin-top: 68px; }
  .blackhole-performance header h3 { font-size: 34px; }
  .blackhole-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blackhole-metric-grid > div,
  .blackhole-metric-grid > div:not(:nth-child(3n+1)) {
    min-height: 116px;
    padding: 20px 13px 18px 0;
    border-top: 1px solid rgba(135, 178, 211, .3);
    border-left: 0;
    border-bottom: 0;
  }
  .blackhole-metric-grid > div:nth-child(even) { padding-left: 16px; border-left: 1px solid rgba(135, 178, 211, .18); }
  .blackhole-metric-grid strong { font-size: clamp(24px, 7.7vw, 31px); }
  .blackhole-metric-grid span { margin-top: 9px; font-size: 10px; line-height: 1.5; }
  .home-engine-workbench {
    width: 100%;
    margin: 82px 0 0;
    padding: 44px 0 0;
  }
  .home-engine-heading strong { font-size: 37px; }
  .home-engine-heading > p { font-size: 13px; }
  .home-engine-tabs { margin-top: 34px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-engine-tabs button,
  .home-engine-tabs button:nth-child(3) { min-height: 72px; border-right: 1px solid rgba(135, 178, 211, .22); border-bottom: 1px solid rgba(135, 178, 211, .22); }
  .home-engine-tabs button:nth-child(even) { border-right: 0; }
  .home-engine-tabs button:nth-child(n+5) { border-bottom: 0; }
  .home-engine-tabs button b { font-size: 12px; }
  .home-engine-panel { margin-top: 16px; }
  .home-engine-media { aspect-ratio: 16 / 10; }
  .home-engine-media img { padding: 12px; transform: none; }
  .home-engine-caption {
    min-height: 0;
    padding: 25px 21px 27px;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .home-engine-caption > span,
  .home-engine-caption > div,
  .home-engine-tags { grid-column: 1; grid-row: auto; }
  .home-engine-caption h3 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .blackhole-scan { animation: none; }
  .blackhole-visual > img,
  .home-engine-media img { transform: none; transition: none; }
  .home-engine-panel.is-updating { animation: none; }
}

/* ==========================================================
   V0.14 — full-page homepage system
   ========================================================== */

body[data-page="home"] { background: #030815; }
body[data-page="home"] .v13-home-carousel {
  height: 100svh;
  min-height: 720px;
  max-height: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.home-page-section {
  position: relative;
  min-height: 100svh;
  padding: clamp(84px, 9.5vh, 106px) 0 clamp(44px, 5.8vh, 66px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}
.home-page-container {
  width: min(var(--container), calc(100% - 80px));
  min-height: calc(100svh - clamp(128px, 15.3vh, 172px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home-page-heading {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(20px, 2.8vh, 30px);
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(420px, .82fr);
  gap: clamp(44px, 7vw, 108px);
  align-items: end;
}
.home-page-heading > div > span {
  display: block;
  color: #64d7ff;
  font: 750 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .15em;
}
.home-page-heading h2 {
  margin-top: 13px;
  color: #fff;
  font-size: clamp(44px, 4.35vw, 68px);
  font-weight: 730;
  line-height: 1;
  letter-spacing: -.055em;
}
.home-page-heading > p {
  max-width: 650px;
  color: rgba(219, 237, 252, .62);
  font-size: clamp(13px, 1.04vw, 16px);
  line-height: 1.8;
}

/* Product matrix: nine equal products, one unified system */
.home-matrix-section {
  color: #fff;
  background:
    radial-gradient(circle at 18% 20%, rgba(35, 104, 255, .2), transparent 31%),
    radial-gradient(circle at 84% 78%, rgba(84, 70, 196, .14), transparent 34%),
    linear-gradient(145deg, #020712 0%, #061428 54%, #030916 100%);
}
.home-matrix-section::before,
.home-technology-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(84, 151, 211, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84, 151, 211, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 74%);
}
.home-matrix-workbench {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 640px;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 72px minmax(0, 1fr);
  color: #fff;
  background: rgba(3, 11, 24, .72);
  border: 1px solid rgba(118, 190, 241, .25);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .34);
  backdrop-filter: blur(18px);
  overflow: hidden;
}
.home-matrix-list {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  border: 0;
  border-bottom: 1px solid rgba(118, 190, 241, .22);
  overflow: hidden;
}
.home-matrix-list button {
  position: relative;
  min-width: 0;
  min-height: 72px;
  padding: 12px 11px;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  gap: 8px;
  color: rgba(222, 239, 252, .54);
  text-align: left;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(118, 190, 241, .15);
  cursor: pointer;
  transition: color .25s ease, background .25s ease;
}
.home-matrix-list button:last-child { border-right: 0; }
.home-matrix-list button span {
  color: #64d7ff;
  font: 730 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.home-matrix-list button b {
  min-width: 0;
  color: inherit;
  font-size: clamp(10px, .82vw, 13px);
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-matrix-list button > i {
  position: absolute;
  right: 13px;
  bottom: 0;
  left: 13px;
  height: 2px;
  background: #2878ff;
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s ease;
}
.home-matrix-list button:hover,
.home-matrix-list button.active { color: #fff; background: rgba(28, 96, 166, .22); }
.home-matrix-list button.active > i { transform: scaleX(1); }
.home-matrix-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(300px, .52fr);
}
.home-matrix-preview {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  display: grid;
  place-items: center;
  background: #020812;
  overflow: hidden;
}
.home-matrix-preview::before {
  content: "";
  position: absolute;
  inset: 8% 7%;
  z-index: 0;
  background: radial-gradient(circle, rgba(40, 120, 255, .24), transparent 67%);
  filter: blur(30px);
}
.home-matrix-preview > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(14px, 2vw, 32px);
  display: block;
  object-fit: contain;
  background: transparent;
}
.home-matrix-preview > span {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 62%, rgba(2, 8, 18, .46));
}
.home-matrix-copy {
  min-width: 0;
  padding: clamp(28px, 3.6vw, 54px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(118, 190, 241, .2);
  background: linear-gradient(145deg, rgba(9, 31, 57, .92), rgba(4, 13, 28, .96));
}
.home-matrix-copy > span {
  color: #64d7ff;
  font: 740 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
}
.home-matrix-copy h3 {
  margin-top: 18px;
  color: #fff;
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 1.2;
  letter-spacing: -.035em;
}
.home-matrix-copy > p {
  margin-top: 18px;
  color: rgba(225, 239, 251, .65);
  font-size: 14px;
  line-height: 1.8;
}
.home-matrix-tags,
.home-engine-tags { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.home-matrix-tags i,
.home-engine-tags i {
  padding: 7px 9px;
  color: #a2e7ff;
  font-size: 10px;
  font-style: normal;
  border: 1px solid rgba(100, 215, 255, .27);
  background: rgba(100, 215, 255, .045);
}
.home-matrix-copy > a {
  width: fit-content;
  margin-top: 30px;
  display: inline-flex;
  gap: 24px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.home-matrix-copy > a b { color: #64d7ff; }

/* Technology: one viewport, seven tabs */
.home-technology-section {
  color: #fff;
  background:
    radial-gradient(circle at 88% 16%, rgba(44, 86, 192, .17), transparent 32%),
    linear-gradient(153deg, #020712 0%, #071522 54%, #030916 100%);
}
.home-engine-workbench {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 650px;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: 68px minmax(0, 1fr);
  border: 1px solid rgba(118, 190, 241, .24);
  background: rgba(3, 11, 24, .76);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.home-engine-tabs {
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  border: 0;
  border-bottom: 1px solid rgba(118, 190, 241, .22);
  overflow: hidden;
}
.home-engine-tabs button {
  position: relative;
  min-width: 0;
  min-height: 68px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  color: rgba(222, 239, 252, .53);
  text-align: left;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(118, 190, 241, .15);
  cursor: pointer;
}
.home-engine-tabs button:last-child { border-right: 0; }
.home-engine-tabs button span {
  color: #64d7ff;
  font: 730 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.home-engine-tabs button b {
  max-width: 100%;
  color: inherit;
  font-size: clamp(10px, .83vw, 13px);
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-engine-tabs button > i {
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 2px;
  background: #2878ff;
}
.home-engine-tabs button:hover,
.home-engine-tabs button.active { color: #fff; background: rgba(28, 96, 166, .22); }
.home-engine-performance-panel,
.home-engine-panel {
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  color: #fff;
  background: #041020;
  overflow: hidden;
}
.home-engine-performance-panel[hidden],
.home-engine-panel[hidden] { display: none !important; }
.home-engine-performance-panel.is-updating,
.home-engine-panel.is-updating { animation: homeEngineIn .44s ease both; }
.home-engine-performance-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 84px;
}
.home-performance-main {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(500px, 1.18fr);
}
.home-performance-visual {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  background: #020812;
  border-right: 1px solid rgba(118, 190, 241, .2);
  overflow: hidden;
}
.home-performance-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 8, 18, .02) 20%, rgba(2, 8, 18, .92) 100%);
}
.home-performance-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: hue-rotate(145deg) saturate(.68) contrast(1.08) brightness(.73);
  transform: translate3d(var(--scene-x, 0), var(--scene-y, 0), 0) scale(1.025);
  transition: transform .55s ease;
}
.home-performance-visual figcaption {
  position: absolute;
  right: 26px;
  bottom: 24px;
  left: 26px;
  z-index: 2;
}
.home-performance-visual figcaption > span,
.home-engine-caption > span {
  color: #64d7ff;
  font: 730 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
}
.home-performance-visual h3 {
  margin-top: 12px;
  color: #fff;
  font-size: clamp(26px, 2.45vw, 40px);
  line-height: 1.1;
}
.home-performance-visual p {
  max-width: 500px;
  margin-top: 11px;
  color: rgba(225, 239, 251, .64);
  font-size: 11px;
  line-height: 1.65;
}
.home-performance-features {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  background: rgba(5, 19, 36, .88);
}
.home-performance-features article {
  min-width: 0;
  min-height: 0;
  padding: clamp(13px, 1.45vw, 22px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  border-right: 1px solid rgba(118, 190, 241, .16);
  border-bottom: 1px solid rgba(118, 190, 241, .16);
  background: linear-gradient(145deg, rgba(15, 48, 82, .18), transparent 70%);
}
.home-performance-features article:first-child { grid-column: 1 / -1; }
.home-performance-features article:nth-child(3),
.home-performance-features article:nth-child(5) { border-right: 0; }
.home-performance-features article:nth-child(n+4) { border-bottom: 0; }
.home-performance-features article > span {
  color: #64d7ff;
  font: 740 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.home-performance-features h4 { color: #fff; font-size: clamp(13px, 1vw, 16px); line-height: 1.28; }
.home-performance-features p {
  margin-top: 7px;
  color: rgba(220, 237, 251, .53);
  font-size: clamp(9px, .7vw, 11px);
  line-height: 1.62;
}
.home-performance-metrics {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid rgba(118, 190, 241, .2);
  background: #06182b;
}
.home-performance-metrics > div {
  min-width: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(118, 190, 241, .16);
}
.home-performance-metrics > div:last-child { border-right: 0; }
.home-performance-metrics strong {
  color: #fff;
  font-size: clamp(18px, 1.45vw, 24px);
  line-height: 1;
  letter-spacing: -.04em;
  white-space: nowrap;
}
.home-performance-metrics span {
  margin-top: 8px;
  color: rgba(204, 227, 246, .48);
  font-size: clamp(8px, .65vw, 10px);
  line-height: 1.3;
}
.home-engine-panel {
  display: grid;
  grid-template-columns: minmax(320px, .6fr) minmax(0, 1.4fr);
}
.home-engine-caption {
  min-width: 0;
  min-height: 0;
  padding: clamp(34px, 4.3vw, 68px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  color: #fff;
  background: linear-gradient(145deg, #071d34, #041020);
  border: 0;
  border-right: 1px solid rgba(118, 190, 241, .2);
}
.home-engine-caption h3 {
  margin-top: 20px;
  color: #fff;
  font-size: clamp(34px, 3.3vw, 52px);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.home-engine-caption p {
  max-width: 470px;
  margin-top: 21px;
  color: rgba(225, 239, 251, .63);
  font-size: clamp(12px, .92vw, 15px);
  line-height: 1.85;
}
.home-engine-media {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 58% 45%, rgba(40, 120, 255, .17), transparent 44%),
    #020812;
  overflow: hidden;
}
.home-engine-media::before {
  background-image:
    linear-gradient(rgba(79, 148, 211, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 148, 211, .045) 1px, transparent 1px);
  background-size: 54px 54px;
}
.home-engine-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: clamp(14px, 2vw, 30px);
  display: block;
  object-fit: contain;
  filter: none;
  transform: translate3d(var(--scene-x, 0), var(--scene-y, 0), 0) scale(1.01);
}

/* Solutions: all seven entries visible inside one viewport */
.home-solutions-section {
  color: #fff;
  background:
    radial-gradient(circle at 78% 24%, rgba(37, 99, 176, .17), transparent 34%),
    linear-gradient(150deg, #06111f, #030a15 72%);
}
.home-solutions-stage {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 620px;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(310px, .48fr) minmax(0, 1.52fr);
  color: #fff;
  border: 1px solid rgba(118, 190, 241, .24);
  background: rgba(4, 15, 29, .88);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.home-solutions-tabs {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(7, minmax(0, 1fr));
  border: 0;
  border-right: 1px solid rgba(118, 190, 241, .2);
  overflow: hidden;
}
.home-solutions-tabs button {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 10px 19px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 3px 13px;
  align-content: center;
  color: rgba(222, 239, 252, .5);
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(118, 190, 241, .14);
  cursor: pointer;
}
.home-solutions-tabs button:last-child { border-bottom: 0; }
.home-solutions-tabs button span {
  grid-row: 1 / 3;
  color: #64d7ff;
  font: 730 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.home-solutions-tabs button b {
  min-width: 0;
  color: inherit;
  font-size: clamp(11px, .87vw, 14px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-solutions-tabs button small {
  grid-column: 2;
  color: rgba(184, 211, 232, .42);
  font-size: 9px;
}
.home-solutions-tabs button::after {
  content: "→";
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  color: #64d7ff;
  opacity: 0;
  transform: translateX(-5px);
  transition: .25s ease;
}
.home-solutions-tabs button:hover,
.home-solutions-tabs button.active { color: #fff; background: rgba(29, 92, 153, .25); }
.home-solutions-tabs button.active::after { opacity: 1; transform: none; }
.home-solution-preview {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  background: #020812;
  overflow: hidden;
}
.home-solution-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(2, 8, 18, .68));
}
.home-solution-preview > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(8px, 1.3vw, 20px);
  display: block;
  object-fit: contain;
  background: #020812;
}
.home-solution-preview figcaption {
  position: absolute;
  right: 22px;
  bottom: 22px;
  left: 22px;
  z-index: 2;
  padding: 22px 25px;
  color: #fff;
  background: rgba(3, 11, 24, .86);
  border: 1px solid rgba(118, 190, 241, .24);
  border-left: 2px solid #64d7ff;
  backdrop-filter: blur(14px);
}
.home-solution-preview figcaption h3 { margin-top: 9px; color: #fff; font-size: clamp(24px, 2.25vw, 36px); line-height: 1.18; }
.home-solution-preview figcaption p { margin-top: 8px; color: rgba(225, 239, 251, .6); font-size: 12px; }
.home-solution-preview figcaption a { margin-top: 15px; display: inline-flex; gap: 18px; color: #64d7ff; font-size: 11px; font-weight: 700; text-decoration: none; }

/* Project page keeps the same full-screen rhythm */
.home-project-section {
  min-height: 100svh;
  padding: clamp(84px, 9.5vh, 106px) 0 clamp(44px, 5.8vh, 66px);
  display: flex;
  align-items: center;
  scroll-snap-align: start;
}
.home-project-section > .container { width: min(var(--container), calc(100% - 80px)); }
.home-project-section .v12-project-reel-grid { margin-top: clamp(22px, 2.8vh, 34px); }
.home-project-section .v12-featured-project figure { height: clamp(260px, 40vh, 420px); aspect-ratio: auto; }
.home-project-section .v12-project-stack a { min-height: 0; }

@media (min-width: 1101px) and (min-height: 720px) {
  html { scroll-snap-type: y proximity; }
}

@media (max-width: 1280px) {
  .home-page-heading { grid-template-columns: minmax(300px, 1fr) minmax(340px, .8fr); gap: 44px; }
  .home-matrix-stage { grid-template-columns: minmax(0, 1.32fr) minmax(280px, .68fr); }
  .home-performance-main { grid-template-columns: minmax(320px, .75fr) minmax(470px, 1.25fr); }
  .home-engine-caption { padding: 34px; }
}

@media (max-width: 1100px) {
  .home-page-section,
  .home-project-section {
    min-height: 0;
    padding: 88px 0 82px;
    display: block;
    overflow: hidden;
  }
  .home-page-container { min-height: 0; display: block; }
  .home-page-heading { grid-template-columns: 1fr; gap: 20px; }
  .home-page-heading > p { max-width: 720px; }
  .home-matrix-workbench,
  .home-engine-workbench,
  .home-solutions-stage { max-height: none; }
  .home-matrix-workbench { grid-template-rows: 76px auto; }
  .home-matrix-list,
  .home-engine-tabs {
    grid-template-columns: repeat(9, minmax(150px, 1fr));
    overflow-x: auto;
    border-right: 0;
  }
  .home-engine-tabs { grid-template-columns: repeat(8, minmax(156px, 1fr)); }
  .home-matrix-list button,
  .home-engine-tabs button { min-height: 76px; border-right: 1px solid rgba(118, 190, 241, .15); border-bottom: 0; }
  .home-matrix-stage { min-height: 560px; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); }
  .home-engine-workbench { grid-template-rows: 76px auto; }
  .home-engine-performance-panel { min-height: 650px; }
  .home-performance-main { grid-template-columns: minmax(300px, .72fr) minmax(440px, 1.28fr); }
  .home-engine-panel { min-height: 560px; }
  .home-solutions-stage { min-height: 580px; grid-template-columns: 290px minmax(0, 1fr); }
  .home-solutions-tabs { grid-template-columns: 1fr; grid-template-rows: repeat(7, minmax(0, 1fr)); overflow: hidden; }
  .home-solutions-tabs button { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(118, 190, 241, .14); }
}

@media (max-width: 820px) {
  body[data-page="home"] .v13-home-carousel { height: 100svh; min-height: 100svh; max-height: none; }
  .home-page-container,
  .home-project-section > .container { width: calc(100% - 32px); }
  .home-page-section,
  .home-project-section { padding: 78px 0 72px; }
  .home-page-heading { margin-bottom: 28px; }
  .home-page-heading h2 { font-size: 43px; }
  .home-matrix-workbench { display: block; }
  .home-matrix-list { height: 72px; grid-template-columns: repeat(9, minmax(132px, 1fr)); }
  .home-matrix-list button { min-height: 72px; }
  .home-matrix-stage { min-height: 0; display: block; }
  .home-matrix-preview { aspect-ratio: 16 / 10; }
  .home-matrix-copy { padding: 30px 24px 34px; border-top: 1px solid rgba(118, 190, 241, .2); border-left: 0; }
  .home-matrix-copy h3 { font-size: 30px; }
  .home-engine-workbench { display: block; }
  .home-engine-tabs { height: 72px; grid-template-columns: repeat(8, minmax(148px, 1fr)); }
  .home-engine-tabs button { min-height: 72px; }
  .home-engine-performance-panel { min-height: 0; display: block; }
  .home-performance-main { display: block; }
  .home-performance-visual { min-height: 430px; border-right: 0; border-bottom: 1px solid rgba(118, 190, 241, .2); }
  .home-performance-features { grid-template-rows: none; }
  .home-performance-features article { min-height: 150px; }
  .home-performance-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-performance-metrics > div { min-height: 86px; border-bottom: 1px solid rgba(118, 190, 241, .16); }
  .home-engine-panel { min-height: 0; display: flex; flex-direction: column-reverse; }
  .home-engine-media { min-height: 0; aspect-ratio: 16 / 10; }
  .home-engine-caption { min-height: 0; padding: 34px 24px; border-right: 0; border-top: 1px solid rgba(118, 190, 241, .2); }
  .home-solutions-stage { min-height: 0; display: block; }
  .home-solutions-tabs { height: 76px; display: grid; grid-template-columns: repeat(7, minmax(180px, 1fr)); grid-template-rows: 1fr; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(118, 190, 241, .2); }
  .home-solutions-tabs button { min-height: 76px; border-right: 1px solid rgba(118, 190, 241, .14); border-bottom: 0; }
  .home-solution-preview { aspect-ratio: 16 / 11; }
  .home-solution-preview figcaption { right: 12px; bottom: 12px; left: 12px; padding: 18px; }
  .home-solution-preview figcaption h3 { font-size: 23px; }
  .home-solution-preview figcaption p { display: none; }
  .home-project-section .v12-featured-project figure { height: auto; aspect-ratio: 16 / 9; }
}

@media (max-width: 520px) {
  .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1 { font-size: clamp(38px, 11.5vw, 50px); }
  .home-matrix-section,
  .home-solutions-section { min-height: 100svh; padding-top: 70px; padding-bottom: 38px; }
  .home-matrix-section .home-page-heading,
  .home-solutions-section .home-page-heading { margin-bottom: 18px; gap: 12px; }
  .home-matrix-section .home-page-heading h2,
  .home-solutions-section .home-page-heading h2 { font-size: 40px; }
  .home-page-heading > p { font-size: 13px; }
  .home-matrix-list { height: 64px; }
  .home-matrix-list button { min-height: 64px; }
  .home-matrix-preview { aspect-ratio: 16 / 9; }
  .home-matrix-copy { padding: 22px 24px 25px; }
  .home-matrix-copy h3 { margin-top: 14px; font-size: 28px; }
  .home-matrix-copy > p { margin-top: 12px; font-size: 12px; }
  .home-matrix-tags { margin-top: 16px; }
  .home-matrix-copy > a { margin-top: 20px; }
  .home-engine-media { aspect-ratio: 16 / 11; }
  .home-performance-visual { min-height: 380px; }
  .home-performance-features { grid-template-columns: 1fr; }
  .home-performance-features article:first-child { grid-column: 1; }
  .home-performance-features article { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(118, 190, 241, .16); }
  .home-performance-features article:last-child { border-bottom: 0; }
  .home-performance-metrics strong { font-size: 19px; }
  .home-solution-preview { aspect-ratio: 16 / 11; }
  .home-solution-preview > img { padding: 8px; }
}

/* Direct contact experience: the live Feishu form remains the submission
   source of truth; the website supplies context, contact paths and location. */
.contact-direct-shell {
  --contact-ink: #07182d;
  --contact-muted: #607286;
  --contact-line: rgba(34, 108, 254, .16);
  color: var(--contact-ink);
  background: #f4f7fb;
}
.contact-direct-shell .site-header,
body[data-page="contact"] .site-header {
  background: #050c17;
  border-bottom-color: rgba(71, 137, 219, .24);
}
.contact-direct-form-section {
  min-height: calc(100svh - var(--header-h));
  padding: clamp(70px, 7vw, 110px) 0 clamp(72px, 7vw, 104px);
  background:
    radial-gradient(circle at 88% 7%, rgba(64, 117, 246, .15), transparent 28%),
    linear-gradient(180deg, #fff 0%, #f4f7fb 100%);
}
.contact-direct-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: end;
}
.contact-direct-heading h1 {
  color: var(--contact-ink);
  font-size: clamp(48px, 5.4vw, 82px);
  line-height: 1;
  letter-spacing: -.055em;
}
.contact-direct-heading p {
  max-width: 680px;
  margin-top: 22px;
  color: var(--contact-muted);
  font-size: clamp(15px, 1.12vw, 18px);
  line-height: 1.75;
}
.contact-direct-heading .contact-direct-context {
  width: fit-content;
  margin-top: 18px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #58708d;
  background: rgba(34, 108, 254, .06);
  border: 1px solid rgba(34, 108, 254, .14);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
}
.contact-direct-context strong { color: #155dfc; font-size: 13px; }
.contact-direct-heading address {
  display: grid;
  gap: 10px;
  font-style: normal;
  text-align: right;
}
.contact-direct-heading address a {
  color: #1f4f9b;
  font-size: 14px;
  text-decoration: none;
}
.contact-form-frame-wrap {
  margin-top: clamp(36px, 4vw, 60px);
  padding: 14px;
  background: #fff;
  border: 1px solid var(--contact-line);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(38, 76, 125, .14);
}
.contact-form-frame {
  width: 100%;
  height: clamp(820px, 92vh, 1080px);
  display: block;
  background: #fff;
  border: 0;
  border-radius: 12px;
}
.contact-form-fallback {
  margin: 12px 8px 2px;
  color: #738296;
  font-size: 12px;
  line-height: 1.6;
  text-align: right;
}
.contact-form-fallback a { color: #226cfe; }
.contact-location-section {
  padding: clamp(86px, 8vw, 126px) 0 clamp(104px, 9vw, 150px);
  background: #fff;
}
.contact-location-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 48px;
}
.contact-location-heading h2 {
  color: var(--contact-ink);
  font-size: clamp(40px, 4vw, 64px);
  line-height: 1.05;
  letter-spacing: -.05em;
}
.contact-location-heading p {
  margin-top: 16px;
  color: var(--contact-muted);
  font-size: 15px;
}
.contact-location-heading > a {
  min-height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #155dfc;
  border: 1px solid rgba(21, 93, 252, .28);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 680;
  text-decoration: none;
}
.contact-location-heading > a:hover { background: rgba(21, 93, 252, .06); }
.contact-map-wrap {
  position: relative;
  min-height: 620px;
  margin-top: 38px;
  overflow: hidden;
  background: #e7edf4;
  border: 1px solid rgba(48, 79, 117, .14);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(43, 73, 110, .12);
}
.contact-map-wrap > iframe {
  width: 100%;
  height: 620px;
  display: block;
  filter: saturate(.66) contrast(.96) brightness(1.05);
  border: 0;
}
.contact-map-label {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 4vw, 64px);
  bottom: clamp(24px, 4vw, 58px);
  width: min(460px, calc(100% - 48px));
  padding: clamp(24px, 3vw, 38px);
  color: #eaf4ff;
  background: rgba(4, 21, 44, .92);
  border: 1px solid rgba(87, 164, 255, .34);
  border-radius: 14px;
  box-shadow: 0 22px 54px rgba(2, 17, 36, .28);
  backdrop-filter: blur(16px);
  font-style: normal;
}
.contact-map-label span {
  display: block;
  color: #5ed8ff;
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .06em;
}
.contact-map-label strong {
  display: block;
  margin-top: 14px;
  color: #fff;
  font-size: clamp(23px, 2vw, 31px);
  line-height: 1.35;
}
.contact-map-label p {
  margin-top: 12px;
  color: rgba(225, 239, 252, .68);
  font-size: 14px;
  line-height: 1.7;
}
.contact-map-label a {
  display: inline-block;
  margin-top: 20px;
  color: #72dcff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
@media (max-width: 820px) {
  .contact-direct-form-section { padding-top: 56px; }
  .contact-direct-heading { grid-template-columns: 1fr; gap: 22px; }
  .contact-direct-heading address { text-align: left; }
  .contact-form-frame-wrap { padding: 8px; border-radius: 12px; }
  .contact-form-frame { height: 780px; border-radius: 8px; }
  .contact-location-heading { align-items: flex-start; flex-direction: column; gap: 24px; }
  .contact-map-wrap,
  .contact-map-wrap > iframe { height: 560px; min-height: 560px; }
  .contact-map-label { right: 18px; left: 18px; bottom: 18px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .home-performance-visual img,
  .home-engine-media img { transform: none; transition: none; }
  .home-engine-performance-panel.is-updating,
  .home-engine-panel.is-updating { animation: none; }
}

/* ==========================================================
   V0.15 — bilingual release, cinematic color and interaction
   ========================================================== */

@font-face {
  font-family: "Alimama ShuHei";
  src: url("../shared/fonts/alimama-shuheiti.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400 900;
}

@font-face {
  font-family: "HarmonyOS Sans SC";
  src: url("../shared/fonts/harmonyos-sans-sc-regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 300 800;
}

body {
  font-family: "HarmonyOS Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

.language-switch {
  min-width: 68px;
  height: 36px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #dce8ff;
  background: rgba(64, 117, 246, .1);
  border: 1px solid rgba(104, 151, 255, .72);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 720;
  line-height: 1;
  white-space: nowrap;
  transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s var(--ease);
}
.language-switch svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
}
.language-switch:hover,
.language-switch:focus-visible {
  color: #fff;
  background: #4075f6;
  border-color: #78a0ff;
  transform: translateY(-1px);
}
.language-switch:focus-visible { outline: 2px solid rgba(112, 209, 255, .9); outline-offset: 3px; }

.home-carousel-shade {
  background:
    linear-gradient(90deg, rgba(1, 5, 14, .97) 0%, rgba(2, 8, 20, .91) 25%, rgba(6, 15, 38, .58) 49%, rgba(4, 11, 26, .16) 76%),
    linear-gradient(180deg, rgba(1, 5, 14, .54) 0%, transparent 30%, transparent 65%, rgba(1, 5, 16, .84) 100%);
}
.home-carousel-copy h1,
.home-carousel-copy h2 {
  font-family: "Alimama ShuHei", "HarmonyOS Sans SC", "PingFang SC", sans-serif;
  font-weight: 700;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: initial;
}
.home-carousel-copy h1 > span,
.home-carousel-copy h2 > span {
  display: inline;
  white-space: nowrap;
}
.home-carousel-copy p {
  font-family: "HarmonyOS Sans SC", "PingFang SC", sans-serif;
  font-weight: 400;
}
.home-carousel-slide[data-home-slide-key="3dgs"] .home-carousel-copy h2 > span { white-space: nowrap; }

.home-matrix-section {
  background:
    radial-gradient(ellipse at 12% 16%, rgba(27, 91, 232, .28), transparent 36%),
    radial-gradient(ellipse at 78% 86%, rgba(91, 60, 202, .22), transparent 39%),
    linear-gradient(142deg, #01040b 0%, #07152c 46%, #111237 74%, #030815 100%);
}
.home-technology-section {
  background:
    radial-gradient(ellipse at 88% 18%, rgba(62, 76, 214, .24), transparent 35%),
    radial-gradient(ellipse at 18% 82%, rgba(20, 95, 185, .16), transparent 38%),
    linear-gradient(150deg, #02040a 0%, #061425 48%, #0a0f2a 100%);
}
.home-solutions-section {
  background:
    radial-gradient(ellipse at 76% 22%, rgba(91, 60, 202, .23), transparent 36%),
    radial-gradient(ellipse at 16% 84%, rgba(22, 103, 208, .15), transparent 35%),
    linear-gradient(150deg, #02050c 0%, #081426 52%, #121033 100%);
}
.home-project-section {
  color: #fff;
  background:
    radial-gradient(ellipse at 16% 22%, rgba(26, 91, 213, .2), transparent 34%),
    radial-gradient(ellipse at 82% 82%, rgba(74, 55, 174, .18), transparent 34%),
    linear-gradient(145deg, #01040a 0%, #061326 52%, #0b0d28 100%);
  isolation: isolate;
}
.home-project-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(91, 156, 225, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 156, 225, .035) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.5), transparent 80%);
}
.home-project-section .section-heading h2 { color: #fff; }
.home-project-section .section-heading p { color: rgba(220, 235, 250, .62); }
.home-featured-project-title { text-wrap: balance; }
.home-featured-project-title > span {
  display: inline-block;
  white-space: nowrap;
}

/* Product constellation rail: visually distinct from the engine and solution tab systems. */
.home-matrix-workbench { grid-template-rows: 96px minmax(0, 1fr); }
.home-matrix-list {
  position: relative;
  padding: 12px 18px 9px;
  gap: 0;
  border: 0;
  border-bottom: 1px solid rgba(118, 190, 241, .18);
  background: linear-gradient(180deg, rgba(9, 28, 58, .78), rgba(3, 11, 25, .42));
  overflow: hidden;
}
.home-matrix-list::before {
  content: "";
  position: absolute;
  top: 33px;
  right: 5.5%;
  left: 5.5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(104, 178, 255, .4) 9%, rgba(128, 112, 255, .34) 91%, transparent);
  box-shadow: 0 0 20px rgba(64, 117, 246, .18);
}
.home-matrix-list button {
  min-height: 72px;
  padding: 0 5px;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  color: rgba(211, 229, 247, .5);
  text-align: center;
  background: transparent;
  border: 0;
}
.home-matrix-list button:hover,
.home-matrix-list button.active { color: #fff; background: transparent; }
.home-matrix-list button span {
  position: relative;
  z-index: 2;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  color: #83dfff;
  background: #07172d;
  border: 1px solid rgba(101, 190, 255, .42);
  border-radius: 50%;
  font-size: 8px;
  transition: color .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease, transform .28s var(--ease);
}
.home-matrix-list button b {
  max-width: 100%;
  color: inherit;
  font-size: clamp(9px, .74vw, 12px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-matrix-list button > i {
  position: absolute;
  top: 33px;
  right: auto;
  bottom: auto;
  left: 50%;
  width: 48px;
  height: 48px;
  background: radial-gradient(circle, rgba(70, 130, 255, .36), transparent 68%);
  border: 0;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.55);
  transform-origin: center;
  transition: opacity .3s ease, transform .35s var(--ease);
}
.home-matrix-list button.active > i { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.home-matrix-list button.active span {
  color: #fff;
  background: #4075f6;
  border-color: #8cb6ff;
  box-shadow: 0 0 0 4px rgba(64,117,246,.14), 0 0 24px rgba(70,137,255,.62);
  transform: translateY(-1px);
}

.home-engine-caption h3 > span {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}

body:not([data-page="home"]) .v12-page-hero {
  background:
    radial-gradient(ellipse at 83% 12%, rgba(71, 77, 207, .22), transparent 34%),
    radial-gradient(ellipse at 18% 86%, rgba(21, 103, 209, .16), transparent 34%),
    linear-gradient(145deg, #01040a 0%, #071427 55%, #111033 100%);
}
.site-footer {
  background:
    radial-gradient(ellipse at 82% 18%, rgba(62, 66, 178, .16), transparent 32%),
    linear-gradient(145deg, #010308 0%, #061221 58%, #0b0c22 100%);
}

.locale-en {
  font-family: "HarmonyOS Sans SC", Inter, "Segoe UI", Arial, sans-serif;
}
.locale-en h1,
.locale-en h2,
.locale-en h3,
.locale-en h4,
.locale-en .nav-link,
.locale-en .home-matrix-list button b,
.locale-en .home-engine-tabs button b,
.locale-en .home-solutions-tabs button b {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
.locale-en .home-carousel-copy h1,
.locale-en .home-carousel-copy h2 { font-size: clamp(48px, 4.6vw, 74px); letter-spacing: -.035em; }
.locale-en .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1 { font-size: clamp(48px, 4.35vw, 70px); }
.locale-en .home-carousel-copy p { max-width: 720px; font-size: clamp(17px, 1.28vw, 21px); line-height: 1.55; }
.locale-en .home-engine-caption h3 { font-size: clamp(30px, 2.7vw, 44px); letter-spacing: -.03em; }
.locale-en .home-page-heading h2 { letter-spacing: -.035em; }
.locale-en .home-matrix-list button b { font-size: clamp(8px, .66vw, 10px); }

@media (max-width: 1180px) {
  .language-switch { min-width: 64px; padding: 0 11px; }
}

@media (max-width: 1100px) {
  .home-matrix-workbench { grid-template-rows: 88px auto; }
  .home-matrix-list { height: 88px; padding: 9px 12px 6px; }
  .home-matrix-list::before { top: 30px; right: 66px; left: 66px; }
  .home-matrix-list button { min-height: 72px; min-width: 132px; }
  .home-matrix-list button > i { top: 30px; }
}

@media (max-width: 820px) {
  .home-carousel-copy h1 > span,
  .home-carousel-copy h2 > span { display: block; }
  .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1 { font-size: clamp(36px, 10.5vw, 48px); }
  .locale-en .home-carousel-copy h1,
  .locale-en .home-carousel-copy h2,
  .locale-en .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1 { font-size: clamp(35px, 9.6vw, 48px); line-height: 1.08; }
  .locale-en .home-carousel-copy p { max-width: 340px; font-size: 15px; }
  .home-matrix-workbench { grid-template-rows: none; }
  .home-matrix-list { height: 84px; padding: 8px 10px 5px; }
  .home-matrix-list::before { top: 29px; right: 60px; left: 60px; }
  .home-matrix-list button { min-height: 70px; }
  .home-matrix-list button > i { top: 29px; }
  .home-engine-caption h3 > span { white-space: normal; }
  .home-engine-caption h3 > span:first-child { white-space: nowrap; }
}

@media (max-width: 520px) {
  .site-header .brand { width: 128px; }
  .language-switch { min-width: 58px; height: 34px; padding: 0 9px; gap: 6px; font-size: 11px; }
  .language-switch svg { width: 15px; height: 15px; }
  .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1 { font-size: clamp(33px, 9.5vw, 43px); }
  .locale-en .home-carousel-copy h1,
  .locale-en .home-carousel-copy h2,
  .locale-en .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1 { font-size: clamp(31px, 8.9vw, 42px); }
  .home-matrix-list { height: 80px; }
  .home-matrix-list button { min-width: 120px; }
  .home-solutions-stage { flex: none; }
  .home-solution-preview {
    aspect-ratio: auto;
    display: grid;
    grid-template-rows: 66vw auto;
  }
  .home-solution-preview::after { display: none; }
  .home-solution-preview > img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
  }
  .home-solution-preview figcaption {
    position: static;
    min-height: 160px;
    padding: 18px 20px 20px;
  }
  .home-solution-preview figcaption p {
    display: block;
    font-size: 11px;
    line-height: 1.55;
  }
  .home-solutions-tabs button {
    padding-right: 12px;
    padding-left: 12px;
    grid-template-columns: 24px minmax(0, 1fr) 16px;
    column-gap: 6px;
  }
  .home-solutions-tabs button b {
    font-size: 11px;
    line-height: 1.25;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .home-solutions-tabs button small { display: none; }
}

/* Keep the visual dots minimal while providing a reliable pointer/touch target. */
.home-carousel-tabs { gap: 0; }
.home-carousel-tabs button,
.home-carousel-tabs button.active {
  width: 36px;
  height: 36px;
  background: transparent;
  overflow: visible;
}
.home-carousel-tabs button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  background: rgba(255,255,255,.3);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  transition: width .32s ease, background .25s ease;
}
.home-carousel-tabs button i {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  height: 9px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.home-carousel-tabs button.active::after { width: 32px; background: rgba(255,255,255,.24); }
.home-carousel-tabs button.active i { width: 32px; }

.locale-en .home-matrix-list button b {
  display: -webkit-box;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.locale-en .home-engine-tabs button b {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.16;
}

@media (max-width: 720px) {
  .home-carousel-tabs button,
  .home-carousel-tabs button.active { width: 44px; height: 44px; }
  .home-carousel-tabs button.active::after,
  .home-carousel-tabs button.active i { width: 32px; }
}

@media (max-width: 520px) {
  .locale-en .home-carousel-copy h1,
  .locale-en .home-carousel-copy h2,
  .locale-en .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1 {
    font-size: clamp(26px, 8.5vw, 38px);
  }
  .locale-en .home-carousel-copy h1 > span,
  .locale-en .home-carousel-copy h2 > span { max-width: 100%; }
}

@media (max-width: 820px) and (max-height: 700px) {
  .home-carousel-content { padding-top: 54px; padding-bottom: 88px; }
  .home-carousel-eyebrow { font-size: 7px; }
  .home-carousel-copy h1,
  .home-carousel-copy h2,
  .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1 { margin-top: 14px; font-size: clamp(28px, 8.6vw, 40px); }
  .home-carousel-copy p,
  .locale-en .home-carousel-copy p { margin-top: 13px; font-size: 13px; line-height: 1.45; }
  .home-carousel-cta { min-height: 42px; margin-top: 17px; }
  .home-carousel-controls { bottom: max(4px, env(safe-area-inset-bottom)); }
}

/* ==========================================================
   V0.15.1 — English typography and interaction refinements
   ========================================================== */

@font-face {
  font-family: "Alibaba PuHuiTi 3.0";
  src: url("../shared/fonts/alibaba-puhuiti-3-light.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: "Alibaba PuHuiTi 3.0";
  src: url("../shared/fonts/alibaba-puhuiti-3-regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Alibaba PuHuiTi 3.0";
  src: url("../shared/fonts/alibaba-puhuiti-3-medium.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Alibaba PuHuiTi 3.0";
  src: url("../shared/fonts/alibaba-puhuiti-3-semibold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "Alibaba PuHuiTi 3.0";
  src: url("../shared/fonts/alibaba-puhuiti-3-bold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

/* English uses PuHuiTi throughout; the cinematic carousel title remains ShuHei. */
.locale-en,
.locale-en * {
  font-family: "Alibaba PuHuiTi 3.0", "Segoe UI", Arial, sans-serif !important;
}

.locale-en :where(p, li, dd, figcaption, input, textarea, select) { font-weight: 400 !important; }
.locale-en :where(.section-label, small, .home-carousel-eyebrow, .home-matrix-copy > span, .home-engine-caption > span) { font-weight: 500 !important; }
.locale-en :where(a, button, .nav-link, strong, b) { font-weight: 600 !important; }
.locale-en :where(h1, h2, h3, h4, h5, h6) { font-weight: 700 !important; }
.locale-en .home-carousel-copy h1,
.locale-en .home-carousel-copy h2,
.locale-en .home-carousel-copy h1 *,
.locale-en .home-carousel-copy h2 * {
  font-family: "Alimama ShuHei", "Alibaba PuHuiTi 3.0", sans-serif !important;
  font-weight: 700 !important;
}
.locale-en .home-carousel-copy p { font-family: "Alibaba PuHuiTi 3.0", "Segoe UI", Arial, sans-serif !important; font-weight: 400 !important; }

.locale-en .home-carousel-slide[data-home-slide-key="3dgs"] .home-carousel-copy h2 {
  max-width: 800px;
  font-size: clamp(42px, 3.9vw, 62px);
}
.locale-en .home-carousel-slide[data-home-slide-key="3dgs"] .home-carousel-copy h2 > span:nth-child(3) { display: block; }

/* Core calls to action share one restrained six-pixel corner system. */
.button,
.header-cta,
.home-carousel-cta,
.case-related-actions a,
.language-switch { border-radius: 6px; }

.home-carousel-cta {
  min-width: 112px;
  justify-content: center;
  gap: 0;
}

html.locale-switch-restoring { scroll-behavior: auto !important; }

/* Give the carousel claim more breathing room without sacrificing short screens. */
.home-carousel-copy p,
.home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy p { margin-top: 36px; }

/* Dark mega menus retain secondary-copy contrast while the hovered title turns white. */
.mega-grid > a:hover,
.mega-grid > a:focus-visible {
  background: rgba(39, 112, 210, .16);
  border-color: #64d7ff;
}
.mega-grid > a:hover strong,
.mega-grid > a:focus-visible strong { color: #fff; }

/* Keep actions stable when the language switch is placed last in the utility group. */
.site-header .header-actions {
  min-width: 0;
  flex-wrap: nowrap;
}
.site-header .header-actions > * { flex: 0 0 auto; }
.site-header .cloud-link { order: 1; }
.site-header .header-cta { order: 2; }
.site-header .language-switch { order: 3; }
.site-header .menu-btn { order: 4; }

@media (max-width: 820px) {
  .home-carousel-copy p,
  .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy p { margin-top: 28px; }
  .locale-en .home-carousel-slide[data-home-slide-key="3dgs"] .home-carousel-copy h2 {
    font-size: clamp(31px, 8.4vw, 42px);
  }
  .locale-en .home-carousel-slide[data-home-slide-key="3dgs"] .home-carousel-copy h2 > span { display: block; }
}

@media (max-width: 520px) {
  .home-carousel-copy p,
  .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy p { margin-top: 24px; }
}

@media (max-width: 820px) and (max-height: 700px) {
  .home-carousel-content { padding-top: 50px; padding-bottom: 76px; }
  .home-carousel-copy p,
  .locale-en .home-carousel-copy p,
  .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy p { margin-top: 18px; }
  .home-carousel-cta { min-height: 40px; margin-top: 14px; }
}

/* ==========================================================
   V0.16 — aligned campaign carousel and product panorama
   ========================================================== */

/* Give the utility actions more of the wide-screen header instead of
   leaving them visually stranded near the centre of the canvas. */
.site-header .topbar {
  width: min(1760px, calc(100% - 40px));
}

/* Every campaign slide uses one fixed pre-title slot and one content origin. */
.home-carousel-copy,
.home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy {
  width: min(860px, 58vw);
}
.home-carousel-content {
  align-items: flex-start;
  padding-top: clamp(160px, 21vh, 224px);
}
.home-carousel-kicker {
  min-height: 38px;
  display: flex;
  align-items: flex-end;
}
.home-carousel-eyebrow {
  min-height: 30px;
  display: flex;
  align-items: center;
  line-height: 1.35;
}
.home-carousel-brand-lockup {
  height: 35px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.home-carousel-brand-lockup img:first-child {
  width: auto;
  height: 30px;
}
.home-carousel-brand-lockup img:last-child {
  width: auto;
  height: 35px;
}
.home-carousel-brand-lockup > span {
  color: rgba(255, 255, 255, .62);
  font: 400 20px/1 "Alibaba PuHuiTi 3.0", "HarmonyOS Sans SC", sans-serif;
}
.home-carousel-copy h1,
.home-carousel-copy h2,
.home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1 {
  max-width: 860px;
  margin-top: 22px;
  font-size: clamp(52px, 4.65vw, 74px);
  line-height: 1.08;
}
.home-carousel-copy h1 > span,
.home-carousel-copy h2 > span,
.home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1 > span {
  width: fit-content;
  max-width: 100%;
  display: block;
  white-space: nowrap;
}
.home-carousel-copy p,
.home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy p {
  margin-top: 30px;
}
.home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2 {
  font-size: clamp(48px, 4.2vw, 68px);
}
body:not(.locale-en) .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy {
  width: min(1220px, 75vw);
}
.locale-en .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2 {
  font-size: clamp(40px, 3.6vw, 58px);
}
.locale-en .home-carousel-slide[data-home-slide-key="bridge"] .home-carousel-copy h2 {
  font-size: clamp(46px, 4.1vw, 66px);
}

/* Product matrix adopts the reference's centred category rail and one
   cinematic product stage while preserving complete, uncropped UI imagery. */
.home-matrix-section .home-page-container {
  justify-content: center;
}
.home-matrix-section .home-page-heading {
  margin-bottom: clamp(20px, 2.8vh, 30px);
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(420px, .82fr);
  gap: clamp(44px, 7vw, 108px);
  align-items: end;
  text-align: left;
}
.home-matrix-section .home-page-heading h2 {
  margin-top: 13px;
  font-size: clamp(44px, 4.35vw, 68px);
}
.home-matrix-section .home-page-heading > p {
  max-width: 650px;
  margin: 0;
  color: rgba(224, 237, 251, .7);
  font-size: clamp(13px, 1.04vw, 16px);
  line-height: 1.8;
}
.home-matrix-workbench {
  max-height: none;
  display: grid;
  grid-template-rows: auto minmax(410px, 50vh);
  gap: clamp(18px, 2.5vh, 26px);
  color: #fff;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
}
.home-matrix-list {
  position: relative;
  height: auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, .8vw, 13px);
  background: transparent;
  border: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.home-matrix-list::-webkit-scrollbar { display: none; }
.home-matrix-list::before { display: none; }
.home-matrix-list button {
  width: auto;
  height: 52px;
  min-width: clamp(104px, 8vw, 138px);
  min-height: 52px;
  max-height: 52px;
  padding: 0 18px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: rgba(236, 245, 255, .84);
  background: rgba(26, 61, 105, .82);
  border: 1px solid rgba(133, 182, 238, .25);
  border-radius: 999px;
  transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.home-matrix-list button span,
.home-matrix-list button > i { display: none; }
.home-matrix-list button b,
.locale-en .home-matrix-list button b {
  max-width: none;
  display: block;
  color: inherit;
  font-size: clamp(11px, .82vw, 14px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  -webkit-line-clamp: initial;
}
.locale-en .home-matrix-list button b { font-size: clamp(10px, .72vw, 12px); }
.home-matrix-list button:hover {
  color: #fff;
  background: rgba(43, 88, 145, .96);
  border-color: rgba(121, 192, 255, .58);
  transform: translateY(-2px);
}
.home-matrix-list button.active {
  color: #0b2541;
  background: #fff;
  border-color: #fff;
  box-shadow: 0 12px 34px rgba(8, 34, 70, .28);
}
.home-matrix-stage {
  position: relative;
  min-width: 0;
  min-height: 410px;
  display: block;
  background: #020813;
  border: 1px solid rgba(58, 207, 238, .72);
  border-radius: 22px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(76, 150, 235, .08);
  overflow: hidden;
}
.home-matrix-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  display: block;
  background:
    radial-gradient(circle at 76% 44%, rgba(30, 104, 225, .2), transparent 44%),
    #020813;
}
.home-matrix-preview::before { display: none; }
.home-matrix-preview > img {
  width: 77%;
  height: 100%;
  margin-left: auto;
  padding: clamp(16px, 1.8vw, 28px);
  display: block;
  object-fit: contain;
  object-position: center;
  background: transparent;
}
.home-matrix-preview > span {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, #020813 0%, rgba(2, 8, 19, .97) 24%, rgba(2, 8, 19, .78) 40%, rgba(2, 8, 19, .16) 64%, rgba(2, 8, 19, .04) 100%),
    linear-gradient(180deg, rgba(2, 8, 19, .06), rgba(2, 8, 19, .36));
}
.home-matrix-copy {
  position: relative;
  z-index: 3;
  width: min(47%, 610px);
  min-height: 100%;
  padding: clamp(34px, 4vw, 62px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
  background: transparent;
}
.home-matrix-copy h3 {
  max-width: 100%;
  margin-top: 16px;
  font-size: clamp(30px, 2.65vw, 43px);
  line-height: 1.18;
}
.home-matrix-copy h3 > span {
  display: block;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
}
.locale-en .home-matrix-copy h3 > span {
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}
.home-matrix-copy > p {
  max-width: 470px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.75;
}
.home-matrix-tags { margin-top: 20px; }
.home-matrix-copy > a {
  min-height: 46px;
  margin-top: 26px;
  padding: 0 18px;
  align-items: center;
  gap: 22px;
  color: #0a2a4a;
  background: #fff;
  border: 1px solid rgba(79, 213, 244, .86);
  border-radius: 6px;
  transition: color .25s ease, background .25s ease, transform .25s var(--ease);
}
.home-matrix-copy > a:hover {
  color: #fff;
  background: #2878ff;
  transform: translateY(-2px);
}
.home-matrix-copy > a b { color: inherit; }
.home-matrix-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 48px;
  height: 64px;
  padding: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .82);
  background: rgba(2, 10, 22, .18);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .2s ease, background .2s ease, transform .25s var(--ease);
}
.home-matrix-arrow span { font: 300 52px/1 "Alibaba PuHuiTi 3.0", Arial, sans-serif; }
.home-matrix-arrow:hover,
.home-matrix-arrow:focus-visible {
  color: #fff;
  background: rgba(40, 120, 255, .34);
  outline: 1px solid rgba(91, 215, 255, .72);
}
.home-matrix-arrow-prev { left: 8px; }
.home-matrix-arrow-next { right: 8px; }
.home-matrix-pips {
  position: absolute;
  z-index: 5;
  bottom: 18px;
  left: clamp(34px, 4vw, 62px);
  display: flex;
  gap: 8px;
}
.home-matrix-pips i {
  width: 32px;
  height: 3px;
  background: rgba(255, 255, 255, .26);
  border-radius: 999px;
  transition: width .3s var(--ease), background .3s ease;
}
.home-matrix-pips i.active {
  width: 54px;
  background: #64d7ff;
  box-shadow: 0 0 18px rgba(100, 215, 255, .44);
}
.home-matrix-stage.is-updating .home-matrix-copy {
  animation: v16MatrixCopyIn .34s cubic-bezier(.2, .72, .2, 1) both;
}
.home-matrix-stage.is-updating .home-matrix-preview > img {
  animation: v16MatrixImageIn .38s cubic-bezier(.2, .72, .2, 1) both;
}
@keyframes v16MatrixCopyIn {
  from { opacity: .25; transform: translate3d(-10px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes v16MatrixImageIn {
  from { opacity: .34; transform: scale(.992); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1280px) {
  .home-matrix-section .home-page-heading {
    grid-template-columns: minmax(300px, 1fr) minmax(340px, .8fr);
    gap: 44px;
  }
  .home-matrix-list {
    justify-content: flex-start;
    padding-bottom: 4px;
  }
  .home-matrix-list button { min-width: 124px; }
}

@media (max-width: 1100px) {
  .site-header .topbar { width: calc(100% - 32px); }
  .home-matrix-section .home-page-heading { grid-template-columns: 1fr; gap: 20px; }
  .home-matrix-section .home-page-heading > p { max-width: 720px; }
  .home-matrix-workbench { display: grid; grid-template-rows: auto minmax(430px, 52vw); }
  .home-matrix-list { height: auto; padding: 0 0 5px; }
  .home-matrix-list button { height: 50px; min-width: 126px; min-height: 50px; max-height: 50px; }
  .home-matrix-stage { min-height: 430px; }
}

@media (min-width: 1101px) and (max-height: 820px) {
  .home-matrix-section { padding-top: 74px; padding-bottom: 32px; }
  .home-matrix-section .home-page-container { min-height: calc(100svh - 106px); }
  .home-matrix-section .home-page-heading { margin-bottom: 14px; }
  .home-matrix-section .home-page-heading h2 { font-size: 44px; }
  .home-matrix-section .home-page-heading > p { margin-top: 9px; line-height: 1.55; }
  .home-matrix-workbench {
    grid-template-rows: auto minmax(320px, 43vh);
    gap: 14px;
  }
  .home-matrix-list button { height: 46px; min-height: 46px; max-height: 46px; }
  .home-matrix-stage { min-height: 320px; }
  .home-matrix-copy { padding-top: 26px; padding-bottom: 34px; }
  .home-matrix-copy h3 { font-size: clamp(28px, 2.35vw, 38px); }
  .home-matrix-copy > p { margin-top: 12px; line-height: 1.6; }
  .home-matrix-tags { margin-top: 14px; }
  .home-matrix-copy > a { min-height: 42px; margin-top: 18px; }
  .home-matrix-pips { bottom: 13px; }
}

@media (min-width: 1101px) and (max-height: 720px) {
  .home-matrix-section { padding-top: 68px; padding-bottom: 24px; }
  .home-matrix-section .home-page-heading > p { display: none; }
  .home-matrix-workbench { grid-template-rows: auto minmax(300px, 42vh); }
  .home-matrix-stage { min-height: 300px; }
  .home-matrix-copy > p { max-width: 430px; }
  .home-matrix-tags { display: none; }
}

@media (max-width: 820px) {
  .home-carousel-content { padding-top: clamp(118px, 17vh, 154px); }
  .home-carousel-copy,
  .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy {
    width: min(100%, 620px);
  }
  .home-carousel-kicker { min-height: 34px; }
  .home-carousel-brand-lockup { height: 30px; gap: 12px; }
  .home-carousel-brand-lockup img:first-child { height: 24px; }
  .home-carousel-brand-lockup img:last-child { height: 28px; }
  .home-carousel-brand-lockup > span { font-size: 16px; }
  .home-carousel-copy h1,
  .home-carousel-copy h2,
  .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1,
  .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2,
  .locale-en .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2,
  .locale-en .home-carousel-slide[data-home-slide-key="bridge"] .home-carousel-copy h2 {
    margin-top: 18px;
    font-size: clamp(32px, 8.8vw, 46px);
  }
  .home-carousel-copy p,
  .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy p { margin-top: 24px; }
  body:not(.locale-en) .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy {
    width: 100%;
  }
  body:not(.locale-en) .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2 {
    font-size: clamp(17px, 5.1vw, 29px);
    letter-spacing: -.035em;
  }
  .home-matrix-section .home-page-heading { margin-bottom: 20px; }
  .home-matrix-section .home-page-heading h2 { font-size: 40px; }
  .home-matrix-workbench { display: grid; grid-template-rows: auto auto; gap: 16px; }
  .home-matrix-list { height: auto; padding: 0 0 5px; }
  .home-matrix-list button { height: 48px; min-width: 120px; min-height: 48px; max-height: 48px; }
  .home-matrix-stage {
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
  }
  .home-matrix-preview {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .home-matrix-preview > img {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 12px;
  }
  .home-matrix-preview > span {
    background: linear-gradient(180deg, transparent 58%, rgba(2, 8, 19, .72));
  }
  .home-matrix-copy {
    position: relative;
    width: 100%;
    min-height: 260px;
    padding: 26px 24px 44px;
    border-top: 1px solid rgba(118, 190, 241, .18);
    background: linear-gradient(145deg, rgba(8, 29, 57, .98), rgba(3, 12, 27, .98));
  }
  .home-matrix-copy h3 { font-size: clamp(28px, 7vw, 36px); }
  .home-matrix-arrow { top: min(31vw, 190px); width: 40px; height: 52px; }
  .home-matrix-arrow-prev { left: 4px; }
  .home-matrix-arrow-next { right: 4px; }
  .home-matrix-pips { bottom: 20px; left: 24px; }
  .home-matrix-pips i { width: 20px; }
  .home-matrix-pips i.active { width: 34px; }
}

@media (max-width: 520px) {
  .site-header .topbar { width: calc(100% - 20px); }
  .home-carousel-eyebrow { font-size: 7px; letter-spacing: .11em; }
  .home-carousel-copy h1,
  .home-carousel-copy h2,
  .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1,
  .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2,
  .locale-en .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2,
  .locale-en .home-carousel-slide[data-home-slide-key="bridge"] .home-carousel-copy h2 {
    font-size: clamp(28px, 8.2vw, 39px);
  }
  body:not(.locale-en) .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2 {
    font-size: clamp(20px, 6.1vw, 27px);
  }
  .home-carousel-copy p,
  .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy p { margin-top: 20px; }
  .home-matrix-section { padding-top: 74px; }
  .home-matrix-section .home-page-heading h2 { font-size: 36px; }
  .home-matrix-section .home-page-heading > p { font-size: 12px; }
  .home-matrix-list button { height: 46px; min-width: 112px; min-height: 46px; max-height: 46px; padding: 0 14px; }
  .home-matrix-copy { min-height: 280px; padding: 24px 20px 46px; }
  .home-matrix-copy h3 { font-size: clamp(26px, 7.5vw, 32px); }
  .home-matrix-tags { gap: 6px; }
  .home-matrix-tags i { padding: 6px 7px; font-size: 9px; }
  .home-matrix-copy > a { min-height: 44px; margin-top: 22px; }
  .home-matrix-pips { left: 20px; }
}

@media (max-width: 820px) and (max-height: 700px) {
  .home-carousel-content { padding-top: 96px; padding-bottom: 70px; }
  .home-carousel-kicker { min-height: 28px; }
  .home-carousel-brand-lockup { height: 25px; }
  .home-carousel-brand-lockup img:first-child { height: 21px; }
  .home-carousel-brand-lockup img:last-child { height: 24px; }
  .home-carousel-copy h1,
  .home-carousel-copy h2,
  .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1,
  .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2,
  .locale-en .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2,
  .locale-en .home-carousel-slide[data-home-slide-key="bridge"] .home-carousel-copy h2 { margin-top: 12px; font-size: clamp(26px, 7.8vw, 36px); }
  .home-carousel-copy p,
  .locale-en .home-carousel-copy p,
  .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy p { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-matrix-stage.is-updating .home-matrix-copy,
  .home-matrix-stage.is-updating .home-matrix-preview > img { animation: none; }
}

/* ==========================================================
   V0.17 — desktop landing-page films and navigation polish
   ========================================================== */

/* The dark mega menu needs readable item names before hover as well. */
.site-header .mega-grid > a > strong {
  color: #fff;
}

@media (min-width: 1101px) {
  /* Keep the utility cluster comfortably inside the right edge without
     disturbing the centred primary navigation. */
  .site-header .header-actions {
    margin-right: clamp(16px, 1.25vw, 24px);
  }

  /* Primary section landing pages share one cinematic, full-viewport frame. */
  .page-hero--landing {
    position: relative;
    height: 100svh;
    min-height: 720px;
    max-height: 1080px;
    padding: 0;
    isolation: isolate;
    background: #020813;
    overflow: hidden;
  }
  .page-hero--landing::before,
  .page-hero--landing::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    pointer-events: none;
  }
  .page-hero--landing::before {
    background:
      linear-gradient(90deg, rgba(1, 5, 14, .97) 0%, rgba(2, 8, 20, .9) 24%, rgba(2, 9, 22, .68) 43%, rgba(2, 9, 22, .18) 70%, rgba(2, 8, 18, .22) 100%),
      linear-gradient(180deg, rgba(1, 6, 16, .48) 0%, rgba(2, 8, 18, .04) 42%, rgba(1, 6, 15, .52) 100%);
  }
  .page-hero--landing::after {
    top: auto;
    height: 28%;
    background: linear-gradient(180deg, transparent, rgba(2, 8, 18, .48));
  }
  .page-hero--landing .v12-page-hero-layout {
    position: static;
    z-index: auto;
    width: min(1760px, calc(100% - 120px));
    height: 100%;
    min-height: 100%;
    padding-top: 76px;
    display: flex;
    align-items: center;
  }
  .page-hero--landing .page-hero-content {
    position: relative;
    z-index: 3;
    width: min(690px, 47vw);
    max-width: 690px;
    padding: 0 0 clamp(4px, 2vh, 24px);
  }
  .page-hero--landing .page-hero-content h1 {
    max-width: 690px;
    margin-top: 25px;
    font-size: clamp(62px, 5.2vw, 84px);
    line-height: 1.03;
    letter-spacing: -.055em;
    text-wrap: balance;
  }
  .page-hero--landing .page-hero-content > p {
    max-width: 620px;
    margin-top: 28px;
    color: rgba(242, 247, 255, .76);
    font-size: clamp(16px, 1.15vw, 19px);
    line-height: 1.85;
    text-wrap: pretty;
  }
  .page-hero--landing .page-hero-meta {
    display: none;
  }
  .page-hero--landing .v12-page-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
    display: block;
    background: #020813;
    border: 0;
    box-shadow: none;
  }
  .page-hero--landing .v12-page-hero-media img,
  .page-hero--landing .v12-page-hero-media video {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    object-position: center;
    background: #020813;
    filter: saturate(.94) contrast(1.04) brightness(.9);
  }
  .page-hero--landing .v12-page-hero-media figcaption {
    display: none;
  }
  body[data-page="products"] .page-hero--landing .v12-page-hero-media img,
  body[data-page="products"] .page-hero--landing .v12-page-hero-media video {
    object-position: 54% center;
  }
  body[data-page="solutions"] .page-hero--landing .v12-page-hero-media img {
    object-position: 60% center;
  }
  body[data-page="cases"] .page-hero--landing .v12-page-hero-media img,
  body[data-page="cases"] .page-hero--landing .v12-page-hero-media video {
    object-position: 58% center;
  }
  body[data-page="about"] .page-hero--landing .v12-page-hero-media img {
    object-position: 58% center;
  }

  /* Nine product tabs divide the available desktop rail exactly. */
  .home-matrix-list {
    justify-content: flex-start;
    gap: clamp(6px, .5vw, 10px);
    padding-bottom: 0;
    overflow-x: hidden;
  }
  .home-matrix-list button {
    width: 0;
    min-width: 0;
    padding-inline: clamp(8px, .6vw, 12px);
    flex: 1 1 0%;
  }
  .home-matrix-list button b,
  .locale-en .home-matrix-list button b {
    font-size: clamp(10px, .78vw, 13px);
  }
  .locale-en .home-matrix-list button b {
    font-size: clamp(8.8px, .64vw, 10.5px);
  }
}

/* ==========================================================
   V0.25 — product visuals, consistent card motion and page rhythm
   ========================================================== */

/* Technology artwork sits directly on the section canvas. The artwork keeps
   its own composition; the previous blue media plate and pseudo layers are
   deliberately removed. */
body[data-page="home"] .home-engine-panel,
body[data-page="home"] .home-engine-media,
body[data-page="home"] .home-performance-visual {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-page="home"] .home-engine-media {
  border-radius: 0 !important;
  isolation: isolate;
}

body[data-page="home"] .home-engine-media::before,
body[data-page="home"] .home-engine-media::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

body[data-page="home"] .home-engine-media img {
  background: transparent !important;
}

/* Exact construction-state semantics for the BIM 4D product image. The
   labels remain HTML so they stay crisp and bilingual at catalogue size. */
.progress-status-legend {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  display: grid;
  color: #eef7ff;
  background: rgba(3, 13, 29, .88);
  border: 1px solid rgba(104, 199, 255, .3);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .32);
  backdrop-filter: blur(12px);
}

.progress-status-legend > span {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 9px minmax(0, 1fr);
  align-items: center;
  justify-content: initial !important;
  gap: 7px;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font: inherit !important;
  backdrop-filter: none !important;
}

.progress-status-legend > span > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 8px color-mix(in srgb, currentColor 65%, transparent);
}

.progress-status-legend > span > b {
  min-width: 0;
  color: inherit;
  font-weight: 620;
  white-space: nowrap;
}

.progress-status-legend .status-not-started { color: #8e8e8e; background: #8e8e8e; }
.progress-status-legend .status-in-progress { color: #dcb428; background: #dcb428; }
.progress-status-legend .status-early-finish { color: #4cc81e; background: #4cc81e; }
.progress-status-legend .status-on-time-finish { color: #34e3ff; background: #34e3ff; }
.progress-status-legend .status-late-finish { color: #f62323; background: #f62323; }
.progress-status-legend .status-overdue { color: #f623e8; background: #f623e8; }

.progress-status-legend--card {
  top: 42px;
  right: 12px;
  padding: 9px 10px;
  gap: 5px;
  font-size: 8.5px;
  line-height: 1.25;
}

.progress-status-legend--workbench {
  top: 50%;
  right: 18px;
  padding: 14px 16px;
  gap: 9px;
  font-size: 11px;
  line-height: 1.3;
  transform: translateY(-50%);
}

/* Product, solution and project cards now share one interaction grammar:
   the surface rises while the media and copy advance by a restrained amount. */
.catalog-card,
.solution-list-card,
.cases-section .case-card > a {
  transition: translate .32s var(--ease), border-color .32s ease, box-shadow .32s ease, background-color .32s ease;
}

.catalog-body,
.solution-list-copy,
.cases-section .case-card > a > div:last-child {
  transform-origin: left center;
  transition: transform .34s var(--ease);
}

@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
  body[data-page="products"] .catalog-card.reveal.visible:hover,
  body[data-page="products"] .catalog-card.reveal.visible:focus-visible,
  body[data-page="solutions"] .solution-list-card.reveal.visible:hover,
  body[data-page="solutions"] .solution-list-card.reveal.visible:focus-visible,
  body[data-page="cases"] .case-card > a:hover,
  body[data-page="cases"] .case-card > a:focus-visible {
    z-index: 4;
    translate: 0 -6px;
    transform: none !important;
  }

  body[data-page="products"] .catalog-card.reveal.visible:hover,
  body[data-page="products"] .catalog-card.reveal.visible:focus-visible,
  body[data-page="solutions"] .solution-list-card.reveal.visible:hover,
  body[data-page="solutions"] .solution-list-card.reveal.visible:focus-visible {
    border-color: rgba(40, 120, 255, .72);
    box-shadow: 0 26px 64px rgba(29, 77, 120, .19), 0 0 0 1px rgba(40, 120, 255, .1);
  }

  body[data-page="cases"] .case-card > a:hover,
  body[data-page="cases"] .case-card > a:focus-visible {
    border-color: rgba(100, 215, 255, .52);
    box-shadow: 0 28px 68px rgba(0, 0, 0, .42), 0 0 0 1px rgba(100, 215, 255, .12);
  }

  body[data-page="products"] .catalog-card:hover .catalog-image img,
  body[data-page="products"] .catalog-card:focus-visible .catalog-image img,
  body[data-page="solutions"] .solution-list-card:hover figure img,
  body[data-page="solutions"] .solution-list-card:focus-visible figure img,
  body[data-page="cases"] .case-card > a:hover .case-card-media img,
  body[data-page="cases"] .case-card > a:focus-visible .case-card-media img {
    transform: scale(1.035);
  }

  body[data-page="products"] .catalog-card:hover .catalog-body,
  body[data-page="products"] .catalog-card:focus-visible .catalog-body,
  body[data-page="solutions"] .solution-list-card:hover .solution-list-copy,
  body[data-page="solutions"] .solution-list-card:focus-visible .solution-list-copy,
  body[data-page="cases"] .case-card > a:hover > div:last-child,
  body[data-page="cases"] .case-card > a:focus-visible > div:last-child {
    transform: scale(1.008);
  }
}

/* Keep the approved Chinese About headline intact on desktop. The English
   version retains natural word-boundary wrapping for readability. */
@media (min-width: 1101px) {
  body[data-page="about"]:not(.locale-en) .page-hero--landing .page-hero-content {
    width: min(980px, 80vw);
    max-width: 980px;
  }

  body[data-page="about"]:not(.locale-en) .page-hero--landing .page-hero-content h1 {
    max-width: none;
    font-size: clamp(42px, 3.55vw, 58px);
    white-space: nowrap;
    text-wrap: nowrap;
  }
}

/* Landing pages keep the next section discoverable while gaining the
   requested 1.3× visual presence on desktop. */
@media (min-width: 1101px) {
  :is(body[data-page="products"], body[data-page="solutions"], body[data-page="cases"], body[data-page="partners"], body[data-page="about"]) .v12-page-hero.page-hero--landing {
    height: 57.2svh;
    min-height: 468px;
    max-height: 700px;
  }
}

/* Mission, vision and values use explicit label/content pairs. */
.about-values-list article {
  display: grid;
  align-content: start;
  gap: 20px;
}

.about-values-list .about-value-label {
  position: relative;
  margin: 0;
  padding-left: 22px;
  color: var(--about-blue);
  font-size: 15px;
  font-weight: 780;
  line-height: 1.3;
  letter-spacing: .12em;
}

.about-values-list .about-value-label::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: 12px;
  height: 2px;
  background: var(--about-blue);
}

.about-values-list .about-value-content {
  margin: 0;
  color: var(--about-ink);
  font-size: clamp(24px, 2.15vw, 34px);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -.03em;
}

/* The ecosystem CTA reads as a three-stage value chain instead of a block
   of left-aligned copy. */
.star-cta-card {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "heading action"
    "flow flow";
  gap: 46px 56px;
}

.star-cta-heading { grid-area: heading; position: relative; z-index: 2; }
.star-cta-card .star-cta-heading h2 {
  max-width: 760px;
  margin-top: 15px;
  font-size: clamp(34px, 3.5vw, 54px);
  line-height: 1.08;
}

.star-cta-flow {
  position: relative;
  z-index: 2;
  grid-area: flow;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(20px, 2.7vw, 46px);
  align-items: center;
}

.star-cta-flow article {
  min-width: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(118, 211, 255, .36);
}

.star-cta-flow article small {
  display: block;
  color: rgba(212, 233, 250, .58);
  font-size: 11px;
  font-weight: 680;
  letter-spacing: .08em;
}

.star-cta-flow article strong {
  margin-top: 12px;
  display: block;
  color: #fff;
  font-size: clamp(24px, 2.25vw, 36px);
  line-height: 1.18;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.star-cta-flow > i {
  color: #6ee0ff;
  font-size: 24px;
  font-style: normal;
}

.star-cta-card > a { grid-area: action; align-self: start; }

@media (prefers-reduced-motion: reduce) {
  .catalog-card,
  .solution-list-card,
  .cases-section .case-card > a { translate: none !important; }
  .catalog-image img,
  .solution-list-card figure img,
  .case-card-media img,
  .catalog-body,
  .solution-list-copy,
  .cases-section .case-card > a > div:last-child { transform: none !important; }
}

/* ==========================================================
   V0.24 — homepage-only mobile system
   The inner pages intentionally retain their current desktop-first layout.
   ========================================================== */

@media (max-width: 820px) {
  body[data-page="home"] {
    overflow-x: visible;
    background: #020813;
  }

  body[data-page="home"]::after { display: none; }

  body[data-page="home"] .site-header .topbar,
  body[data-page="home"] .site-header.scrolled .topbar {
    width: calc(100% - 24px);
    height: 64px;
    gap: 8px;
  }

  body[data-page="home"] .site-header .brand { width: 126px; }
  body[data-page="home"] .site-header .brand img { height: 32px; }
  body[data-page="home"] .site-header .header-actions { gap: 7px; }
  body[data-page="home"] .site-header .language-switch,
  body[data-page="home"] .site-header .menu-btn {
    min-width: 44px;
    height: 44px;
  }
  body[data-page="home"] .site-header .language-switch { padding-inline: 10px; }
  body[data-page="home"] .mobile-drawer {
    inset: 64px 0 0;
    height: calc(100dvh - 64px);
    padding: 22px 18px max(28px, env(safe-area-inset-bottom));
    background: rgba(2, 8, 19, .985);
  }
  body[data-page="home"] .mobile-main { min-height: 60px; }
  body[data-page="home"] .mobile-children a { min-height: 38px; display: flex; align-items: center; }

  body[data-page="home"] .home-page-section,
  body[data-page="home"] .home-project-section {
    min-height: 0;
    padding: 76px 0 84px;
    display: block;
    overflow: hidden;
    scroll-margin-top: 64px;
  }

  body[data-page="home"] .home-page-container,
  body[data-page="home"] .home-project-section > .container {
    width: calc(100% - 32px);
    min-height: 0;
    display: block;
  }

  body[data-page="home"] .home-page-heading {
    margin: 0 0 28px;
    display: block;
  }

  body[data-page="home"] .home-page-heading > div > span {
    font-size: 9px;
    letter-spacing: .13em;
  }

  body[data-page="home"] .home-page-heading h2,
  body[data-page="home"] .home-matrix-section .home-page-heading h2,
  body[data-page="home"] .home-solutions-section .home-page-heading h2 {
    margin-top: 12px;
    font-size: clamp(34px, 9.2vw, 40px);
    line-height: 1.05;
    letter-spacing: -.045em;
  }

  body[data-page="home"] .home-page-heading > p,
  body[data-page="home"] .home-matrix-section .home-page-heading > p {
    max-width: 100%;
    margin-top: 15px;
    color: rgba(220, 236, 250, .65);
    font-size: 13px;
    line-height: 1.72;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
  }

  body[data-page="home"] .home-technology-heading > div > small {
    margin-top: 10px;
    font-size: 10px;
  }

  /* Campaign film: one uncluttered viewport with touch-safe progress rails. */
  body[data-page="home"] .v13-home-carousel {
    height: 100svh;
    min-height: 640px;
    max-height: none;
    touch-action: pan-y;
    overscroll-behavior-inline: contain;
  }

  body[data-page="home"] .home-carousel-media video,
  body[data-page="home"] .home-carousel-media img {
    transform: scale(1.02);
  }
  body[data-page="home"] .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-media video {
    object-position: 64% center;
    transform: scale(1.08);
  }
  body[data-page="home"] .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-media video,
  body[data-page="home"] .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-media img { object-position: 58% center; }
  body[data-page="home"] .home-carousel-slide[data-home-slide-key="bridge"] .home-carousel-media video,
  body[data-page="home"] .home-carousel-slide[data-home-slide-key="bridge"] .home-carousel-media img { object-position: 62% center; }
  body[data-page="home"] .home-carousel-slide[data-home-slide-key="3dgs"] .home-carousel-media video,
  body[data-page="home"] .home-carousel-slide[data-home-slide-key="3dgs"] .home-carousel-media img { object-position: 66% center; }

  body[data-page="home"] .home-carousel-shade,
  body[data-page="home"] .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-shade {
    background:
      linear-gradient(90deg, rgba(1, 6, 15, .96) 0%, rgba(2, 9, 20, .83) 48%, rgba(2, 9, 20, .3) 100%),
      linear-gradient(180deg, rgba(1, 6, 15, .54) 0%, rgba(1, 7, 16, .08) 29%, rgba(1, 7, 16, .18) 61%, rgba(1, 7, 16, .9) 100%);
  }

  body[data-page="home"] .home-carousel-content {
    width: calc(100% - 32px);
    height: 100%;
    padding: 64px 0 116px;
    align-items: center;
  }

  body[data-page="home"] .home-carousel-copy,
  body[data-page="home"] .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy,
  body:not(.locale-en)[data-page="home"] .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy {
    width: 100%;
    max-width: 100%;
  }

  body[data-page="home"] .home-carousel-kicker { min-height: 32px; }
  body[data-page="home"] .home-carousel-eyebrow {
    max-width: 100%;
    min-height: 28px;
    font-size: 7.5px;
    line-height: 1.45;
    letter-spacing: .105em;
    white-space: normal;
  }
  body[data-page="home"] .home-carousel-eyebrow i { flex: 0 0 7px; width: 7px; height: 7px; }
  body[data-page="home"] .home-carousel-brand-lockup { height: 29px; gap: 10px; }
  body[data-page="home"] .home-carousel-brand-lockup img:first-child { height: 23px; }
  body[data-page="home"] .home-carousel-brand-lockup img:last-child { height: 27px; }
  body[data-page="home"] .home-carousel-brand-lockup > span { font-size: 15px; }

  body:not(.locale-en)[data-page="home"] .home-carousel-copy h1,
  body:not(.locale-en)[data-page="home"] .home-carousel-copy h2,
  body:not(.locale-en)[data-page="home"] .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1,
  body:not(.locale-en)[data-page="home"] .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2 {
    max-width: 100%;
    margin-top: 17px;
    font-size: clamp(28px, 7.4vw, 32px);
    line-height: 1.12;
    letter-spacing: -.052em;
  }
  body:not(.locale-en)[data-page="home"] .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2 {
    letter-spacing: -.065em;
  }
  body[data-page="home"] .home-carousel-copy h1 > span,
  body[data-page="home"] .home-carousel-copy h2 > span {
    width: fit-content;
    max-width: 100%;
    display: block;
    white-space: nowrap;
  }
  body:not(.locale-en)[data-page="home"] .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2 > span {
    width: 100%;
    white-space: normal;
    word-break: keep-all;
    text-wrap: balance;
  }

  body.locale-en[data-page="home"] .home-carousel-copy h1,
  body.locale-en[data-page="home"] .home-carousel-copy h2,
  body.locale-en[data-page="home"] .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1,
  body.locale-en[data-page="home"] .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2,
  body.locale-en[data-page="home"] .home-carousel-slide[data-home-slide-key="bridge"] .home-carousel-copy h2,
  body.locale-en[data-page="home"] .home-carousel-slide[data-home-slide-key="3dgs"] .home-carousel-copy h2 {
    max-width: 100%;
    margin-top: 17px;
    font-size: clamp(27px, 7.15vw, 32px);
    line-height: 1.13;
    letter-spacing: -.035em;
  }

  body[data-page="home"] .home-carousel-copy p,
  body[data-page="home"] .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy p,
  body.locale-en[data-page="home"] .home-carousel-copy p {
    max-width: 348px;
    margin-top: 23px;
    color: rgba(255, 255, 255, .84);
    font-size: 15px;
    line-height: 1.68;
  }

  body[data-page="home"] .home-carousel-cta {
    min-width: 126px;
    min-height: 46px;
    margin-top: 26px;
    padding: 0 20px;
    font-size: 12px;
  }

  body[data-page="home"] .home-carousel-controls {
    bottom: max(10px, env(safe-area-inset-bottom));
    gap: 0;
  }
  body[data-page="home"] .home-carousel-tabs button,
  body[data-page="home"] .home-carousel-tabs button.active {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
  body[data-page="home"] .home-carousel-tabs button::after { width: 8px; height: 8px; }
  body[data-page="home"] .home-carousel-tabs button i,
  body[data-page="home"] .home-carousel-tabs button.active i { height: 8px; }
  body[data-page="home"] .home-carousel-tabs button.active::after,
  body[data-page="home"] .home-carousel-tabs button.active i { width: 32px; }

  /* Product matrix: scrollable pills, complete product image, then copy. */
  body[data-page="home"] .home-matrix-section { min-height: 0; }
  body[data-page="home"] .home-matrix-workbench {
    display: block;
    max-height: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }

  body[data-page="home"] .home-matrix-list {
    width: auto;
    height: auto;
    margin: 0 -16px 16px;
    padding: 0 16px 8px;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    background: transparent;
    border: 0;
  }
  body[data-page="home"] .home-matrix-list::-webkit-scrollbar { display: none; }
  body[data-page="home"] .home-matrix-list::before { display: none; }
  body[data-page="home"] .home-matrix-list button {
    width: auto;
    min-width: 128px;
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    padding: 0 16px;
    flex: 0 0 auto;
    scroll-snap-align: center;
    color: rgba(230, 241, 252, .74);
    background: rgba(20, 51, 88, .78);
    border: 1px solid rgba(122, 180, 232, .23);
    border-radius: 999px;
  }
  body[data-page="home"] .home-matrix-list button b,
  body.locale-en[data-page="home"] .home-matrix-list button b {
    display: block;
    color: inherit;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    overflow: visible;
  }
  body.locale-en[data-page="home"] .home-matrix-list button { min-width: 154px; }
  body.locale-en[data-page="home"] .home-matrix-list button b { font-size: 10px; }
  body[data-page="home"] .home-matrix-list button > i { display: none; }
  body[data-page="home"] .home-matrix-list button.active {
    color: #fff;
    background: linear-gradient(135deg, #245fd4, #4075f6 64%, #4b9ef7);
    border-color: rgba(125, 188, 255, .84);
    box-shadow: 0 8px 22px rgba(35, 104, 228, .28), inset 0 1px rgba(255, 255, 255, .18);
  }

  body[data-page="home"] .home-matrix-stage {
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #030d1d;
    border: 1px solid rgba(100, 215, 255, .38);
    border-radius: 14px;
    box-shadow: 0 24px 62px rgba(0, 0, 0, .32);
    overflow: hidden;
  }
  body[data-page="home"] .home-matrix-preview {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    background: radial-gradient(circle at 68% 42%, rgba(40, 120, 255, .17), transparent 48%), #020813;
  }
  body[data-page="home"] .home-matrix-preview > img {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 10px;
    object-fit: contain;
    object-position: center;
  }
  body[data-page="home"] .home-matrix-preview > span {
    background: linear-gradient(180deg, transparent 62%, rgba(2, 8, 19, .38));
  }
  body[data-page="home"] .home-matrix-copy {
    position: relative;
    width: 100%;
    min-height: 0;
    padding: 24px 20px 26px;
    display: block;
    background: linear-gradient(145deg, rgba(9, 31, 59, .98), rgba(3, 12, 27, .98));
    border: 0;
    border-top: 1px solid rgba(118, 190, 241, .18);
  }
  body[data-page="home"] .home-matrix-copy h3 {
    margin-top: 13px;
    font-size: clamp(26px, 7.2vw, 31px);
    line-height: 1.2;
  }
  body[data-page="home"] .home-matrix-copy h3 > span { white-space: nowrap; }
  body.locale-en[data-page="home"] .home-matrix-copy h3 > span { white-space: normal; }
  body[data-page="home"] .home-matrix-copy > p { margin-top: 12px; font-size: 13px; line-height: 1.72; }
  body[data-page="home"] .home-matrix-tags { margin-top: 16px; gap: 6px; }
  body[data-page="home"] .home-matrix-tags i { padding: 6px 8px; font-size: 9px; }
  body[data-page="home"] .home-matrix-copy > a {
    width: 100%;
    min-height: 46px;
    margin-top: 21px;
    padding: 0 16px;
    justify-content: center;
    color: #fff;
    background: #2878ff;
    border-color: rgba(255, 255, 255, .16);
  }

  /* Technology: an editorial rail rather than a reduced desktop table. */
  body[data-page="home"] .home-engine-workbench {
    display: block;
    max-height: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  body[data-page="home"] .home-engine-tabs {
    width: auto;
    height: auto;
    margin: 0 -16px 20px;
    padding: 0 16px 7px;
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(118, 190, 241, .2);
  }
  body[data-page="home"] .home-engine-tabs::-webkit-scrollbar { display: none; }
  body[data-page="home"] .home-engine-tabs button,
  body[data-page="home"] .home-engine-tabs button:nth-child(3) {
    position: relative;
    width: auto;
    min-width: max-content;
    min-height: 48px;
    padding: 0 0 12px;
    flex: 0 0 auto;
    scroll-snap-align: center;
    color: rgba(219, 235, 249, .52);
    background: transparent;
    border: 0;
  }
  body[data-page="home"] .home-engine-tabs button b,
  body.locale-en[data-page="home"] .home-engine-tabs button b {
    color: inherit;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: visible;
  }
  body.locale-en[data-page="home"] .home-engine-tabs button b { font-size: 10px; }
  body[data-page="home"] .home-engine-tabs button > i {
    right: 0;
    bottom: -8px;
    left: 0;
    height: 2px;
    background: #64d7ff;
    box-shadow: 0 0 14px rgba(100, 215, 255, .5);
  }
  body[data-page="home"] .home-engine-tabs button:hover,
  body[data-page="home"] .home-engine-tabs button.active { color: #fff; background: transparent; }

  body[data-page="home"] .home-engine-performance-panel,
  body[data-page="home"] .home-engine-panel {
    min-height: 0;
    height: auto;
    margin: 0;
    background: transparent;
    border: 0;
    overflow: visible;
  }
  body[data-page="home"] .home-engine-performance-panel { display: block; }
  body[data-page="home"] .home-performance-main { display: block; }
  body[data-page="home"] .home-performance-visual {
    min-height: 0;
    aspect-ratio: 4 / 3;
    background: #020813;
    border: 1px solid rgba(112, 189, 241, .24);
    border-radius: 13px;
    box-shadow: 0 22px 58px rgba(0, 0, 0, .28);
    overflow: hidden;
  }
  body[data-page="home"] .home-performance-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
  }
  body[data-page="home"] .home-performance-visual figcaption { right: 18px; bottom: 17px; left: 18px; }
  body[data-page="home"] .home-performance-visual h3 { font-size: 25px; }
  body[data-page="home"] .home-performance-visual p {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.58;
    overflow: visible;
    -webkit-line-clamp: unset;
  }

  body[data-page="home"] .home-performance-features {
    margin-top: 22px;
    display: block;
    background: transparent;
  }
  body[data-page="home"] .home-performance-features article,
  body[data-page="home"] .home-performance-features article:first-child,
  body[data-page="home"] .home-performance-features article:nth-child(n) {
    min-height: 0;
    padding: 18px 0;
    display: block;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(118, 190, 241, .2);
  }
  body[data-page="home"] .home-performance-features article:last-child { border-bottom: 1px solid rgba(118, 190, 241, .2); }
  body[data-page="home"] .home-performance-features h4 { font-size: 15px; }
  body[data-page="home"] .home-performance-features p { margin-top: 7px; font-size: 12px; line-height: 1.7; }

  body[data-page="home"] .home-performance-metrics {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: rgba(7, 27, 50, .68);
    border: 1px solid rgba(118, 190, 241, .2);
    border-radius: 12px;
    overflow: hidden;
  }
  body[data-page="home"] .home-performance-metrics > div {
    min-height: 84px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0;
    border-right: 1px solid rgba(118, 190, 241, .14);
    border-bottom: 1px solid rgba(118, 190, 241, .14);
  }
  body[data-page="home"] .home-performance-metrics > div:nth-child(even) { border-right: 0; }
  body[data-page="home"] .home-performance-metrics > div:nth-last-child(-n + 2) { border-bottom: 0; }
  body[data-page="home"] .home-performance-metrics strong { font-size: 20px; }
  body[data-page="home"] .home-performance-metrics span { margin-top: 7px; font-size: 9px; line-height: 1.35; }

  body[data-page="home"] .home-engine-panel {
    display: flex;
    flex-direction: column-reverse;
    gap: 0;
  }
  body[data-page="home"] .home-engine-panel[hidden],
  body[data-page="home"] .home-engine-performance-panel[hidden] { display: none !important; }
  body[data-page="home"] .home-engine-media {
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 62% 44%, rgba(40, 120, 255, .16), transparent 48%), #020813;
    border: 1px solid rgba(118, 190, 241, .22);
    border-radius: 13px;
    overflow: hidden;
  }
  body[data-page="home"] .home-engine-media img {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 10px;
    object-fit: contain;
    filter: none;
    transform: none;
  }
  body[data-page="home"] .home-engine-caption {
    min-height: 0;
    padding: 25px 2px 0;
    display: block;
    background: transparent;
    border: 0;
  }
  body[data-page="home"] .home-engine-caption h3 { margin-top: 14px; font-size: 29px; line-height: 1.15; }
  body[data-page="home"] .home-engine-caption h3 > span { white-space: normal; }
  body[data-page="home"] .home-engine-caption p { margin-top: 13px; font-size: 13px; line-height: 1.76; }
  body[data-page="home"] .home-engine-tags { margin-top: 17px; }

  /* Solution ecosystem: two touch rails and a complete image/copy workspace. */
  body[data-page="home"] .home-solutions-section { min-height: 0; height: auto; max-height: none; }
  body[data-page="home"] .home-solutions-intro br { display: none; }
  body[data-page="home"] .home-solutions-stage {
    display: block;
    min-height: 0;
    max-height: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  body[data-page="home"] .home-solutions-tabs {
    width: auto;
    height: auto;
    margin: 0 -16px;
    padding: 0 16px 8px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    background: transparent;
    border: 0;
  }
  body[data-page="home"] .home-solutions-tabs::-webkit-scrollbar { display: none; }
  body[data-page="home"] .home-solutions-tabs button {
    width: auto;
    min-width: 126px;
    min-height: 46px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    scroll-snap-align: center;
    color: rgba(231, 242, 252, .72);
    background: rgba(21, 53, 91, .78);
    border: 1px solid rgba(127, 183, 232, .23);
    border-radius: 999px;
  }
  body[data-page="home"] .home-solutions-tabs button::after { display: none; }
  body[data-page="home"] .home-solutions-tabs button b,
  body.locale-en[data-page="home"] .home-solutions-tabs button b {
    color: inherit;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    overflow: visible;
  }
  body.locale-en[data-page="home"] .home-solutions-tabs button { min-width: 148px; }
  body.locale-en[data-page="home"] .home-solutions-tabs button b { font-size: 10px; }
  body[data-page="home"] .home-solutions-tabs button.active {
    color: #fff;
    background: linear-gradient(135deg, #245fd4, #4075f6 65%, #4b9ef7);
    border-color: rgba(125, 188, 255, .82);
    box-shadow: 0 8px 22px rgba(35, 104, 228, .26);
  }

  body[data-page="home"] .home-solution-item-tabs {
    width: auto;
    min-height: 52px;
    margin: 12px -16px 18px;
    padding: 0 16px;
    display: flex;
    align-items: stretch;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    border-bottom: 1px solid rgba(118, 190, 241, .18);
  }
  body[data-page="home"] .home-solution-item-tabs::-webkit-scrollbar { display: none; }
  body[data-page="home"] .home-solution-item-tabs button {
    position: relative;
    width: auto;
    min-width: max-content;
    min-height: 48px;
    padding: 0 0 11px;
    flex: 0 0 auto;
    scroll-snap-align: center;
    color: rgba(214, 232, 247, .52);
    background: transparent;
    border: 0;
  }
  body[data-page="home"] .home-solution-item-tabs button::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: #64d7ff;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .28s ease;
  }
  body[data-page="home"] .home-solution-item-tabs button b {
    color: inherit;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
  }
  body.locale-en[data-page="home"] .home-solution-item-tabs button b { font-size: 10px; }
  body[data-page="home"] .home-solution-item-tabs button.active { color: #fff; }
  body[data-page="home"] .home-solution-item-tabs button.active::after { transform: scaleX(1); }

  body[data-page="home"] .home-solution-workspace {
    min-height: 0;
    display: flex;
    flex-direction: column-reverse;
    color: #fff;
    background: #030d1d;
    border: 1px solid rgba(100, 215, 255, .36);
    border-radius: 14px;
    box-shadow: 0 24px 62px rgba(0, 0, 0, .32);
    overflow: hidden;
  }
  body[data-page="home"] .home-solution-preview {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    margin: 0;
    background: #020813;
    overflow: hidden;
  }
  body[data-page="home"] .home-solution-preview::after { display: none; }
  body[data-page="home"] .home-solution-preview > img {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    object-fit: cover;
    object-position: center;
  }
  body[data-page="home"] .home-solution-preview > span {
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(180deg, transparent 62%, rgba(2, 8, 19, .34));
    pointer-events: none;
  }
  body[data-page="home"] .home-solution-copy {
    min-height: 0;
    padding: 24px 20px 26px;
    display: block;
    background: linear-gradient(145deg, rgba(9, 31, 59, .98), rgba(3, 12, 27, .98));
    border-top: 1px solid rgba(118, 190, 241, .18);
  }
  body[data-page="home"] .home-solution-copy > span { color: #64d7ff; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
  body[data-page="home"] .home-solution-copy h3 { margin-top: 13px; color: #fff; font-size: 26px; line-height: 1.2; }
  body[data-page="home"] .home-solution-copy h3 > span { white-space: normal; }
  body[data-page="home"] .home-solution-copy p { margin-top: 12px; color: rgba(221, 236, 249, .66); font-size: 13px; line-height: 1.74; }
  body[data-page="home"] .home-solution-tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
  body[data-page="home"] .home-solution-tags i { padding: 6px 8px; color: #a7eaff; font-size: 9px; font-style: normal; border: 1px solid rgba(100, 215, 255, .23); background: rgba(100, 215, 255, .04); }
  body[data-page="home"] .home-solution-copy a {
    width: 100%;
    min-height: 46px;
    margin-top: 21px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #2878ff;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
  }

  /* Project proof: one lead film and a swipeable supporting reel. */
  body[data-page="home"] .home-project-section > .container { display: flex; flex-direction: column; }
  body[data-page="home"] .v12-project-reel-head { display: contents; }
  body[data-page="home"] .v12-project-reel-head .section-heading { order: 1; margin-bottom: 28px; }
  body[data-page="home"] .v12-project-reel-head .section-heading h2 { font-size: clamp(34px, 9.2vw, 40px); line-height: 1.05; }
  body[data-page="home"] .v12-project-reel-head .section-heading p { font-size: 13px; line-height: 1.72; }
  body[data-page="home"] .v12-project-reel-grid { order: 2; margin-top: 0; display: block; }
  body[data-page="home"] .v12-project-reel-head > .button {
    order: 3;
    width: 100%;
    min-height: 48px;
    margin-top: 24px;
    justify-content: center;
  }
  body[data-page="home"] .v12-featured-project { border-radius: 13px; }
  body[data-page="home"] .v12-featured-project figure { aspect-ratio: 16 / 9; }
  body[data-page="home"] .v12-featured-project figure > span { right: 12px; bottom: 12px; left: 12px; width: fit-content; font-size: 8px; }
  body[data-page="home"] .v12-featured-project > div { padding: 22px 20px 24px; display: block; }
  body[data-page="home"] .v12-featured-project h3 { font-size: 25px; line-height: 1.28; }
  body[data-page="home"] .v12-featured-project p { margin-top: 10px; font-size: 12px; line-height: 1.65; }
  body[data-page="home"] .v12-featured-project > div > a { margin-top: 16px; display: inline-flex; min-height: 44px; align-items: center; }
  body[data-page="home"] .v12-project-stack {
    width: auto;
    margin: 14px -16px 0;
    padding: 0 16px 8px;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }
  body[data-page="home"] .v12-project-stack::-webkit-scrollbar { display: none; }
  body[data-page="home"] .v12-project-stack a {
    width: min(82vw, 340px);
    min-width: min(82vw, 340px);
    display: block;
    flex: 0 0 auto;
    scroll-snap-align: center;
    border-radius: 12px;
  }
  body[data-page="home"] .v12-project-stack img { width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 10; object-fit: cover; }
  body[data-page="home"] .v12-project-stack div { min-height: 132px; padding: 17px 18px 19px; }
  body[data-page="home"] .v12-project-stack h3 { font-size: 15px; line-height: 1.45; }
}

@media (max-width: 520px) {
  body[data-page="home"] .home-matrix-section,
  body[data-page="home"] .home-solutions-section {
    min-height: 0;
    padding-top: 74px;
    padding-bottom: 80px;
  }

  body[data-page="home"] .home-page-heading h2,
  body[data-page="home"] .home-matrix-section .home-page-heading h2,
  body[data-page="home"] .home-solutions-section .home-page-heading h2 { font-size: 35px; }

  body[data-page="home"] .home-carousel-content { width: calc(100% - 28px); }
  body:not(.locale-en)[data-page="home"] .home-carousel-copy h1,
  body:not(.locale-en)[data-page="home"] .home-carousel-copy h2,
  body:not(.locale-en)[data-page="home"] .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1,
  body:not(.locale-en)[data-page="home"] .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2 {
    font-size: clamp(27px, 7.25vw, 30px);
  }
  body.locale-en[data-page="home"] .home-carousel-copy h1,
  body.locale-en[data-page="home"] .home-carousel-copy h2,
  body.locale-en[data-page="home"] .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1,
  body.locale-en[data-page="home"] .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2,
  body.locale-en[data-page="home"] .home-carousel-slide[data-home-slide-key="bridge"] .home-carousel-copy h2,
  body.locale-en[data-page="home"] .home-carousel-slide[data-home-slide-key="3dgs"] .home-carousel-copy h2 {
    font-size: clamp(25px, 6.7vw, 29px);
  }
  body[data-page="home"] .home-carousel-copy p,
  body.locale-en[data-page="home"] .home-carousel-copy p { max-width: 330px; font-size: 14px; }

  body[data-page="home"] .home-performance-visual { aspect-ratio: 5 / 4; }
  body[data-page="home"] .home-engine-media,
  body[data-page="home"] .home-solution-preview,
  body[data-page="home"] .home-matrix-preview { aspect-ratio: 16 / 10; }
}

@media (max-width: 820px) and (max-height: 700px) {
  body[data-page="home"] .v13-home-carousel { min-height: 600px; }
  body[data-page="home"] .home-carousel-content { padding-top: 64px; padding-bottom: 86px; }
  body[data-page="home"] .home-carousel-kicker { min-height: 25px; }
  body:not(.locale-en)[data-page="home"] .home-carousel-copy h1,
  body:not(.locale-en)[data-page="home"] .home-carousel-copy h2,
  body:not(.locale-en)[data-page="home"] .home-carousel-slide[data-home-slide-key="nebula"] .home-carousel-copy h1,
  body:not(.locale-en)[data-page="home"] .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2 { margin-top: 11px; font-size: clamp(25px, 6.8vw, 29px); }
  body[data-page="home"] .home-carousel-copy p,
  body.locale-en[data-page="home"] .home-carousel-copy p { margin-top: 14px; font-size: 13px; line-height: 1.5; }
  body[data-page="home"] .home-carousel-cta { min-height: 42px; margin-top: 15px; }
  body[data-page="home"] .home-carousel-controls { bottom: max(2px, env(safe-area-inset-bottom)); }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  body[data-page="home"] .home-matrix-list,
  body[data-page="home"] .home-engine-tabs,
  body[data-page="home"] .home-solutions-tabs,
  body[data-page="home"] .home-solution-item-tabs,
  body[data-page="home"] .v12-project-stack { scroll-behavior: auto; }
}

@media (max-width: 820px) {
  /* Mobile design remains a later phase, but long English category labels
     must not create document-level horizontal scrolling in this release. */
  .solution-list-section { overflow-x: clip; }
}

/* ==========================================================
   V0.18 — solution ecosystem and open technology showcase
   ========================================================== */

@media (min-width: 1101px) {
  /* The campaign message is optically centred, then lifted above the
     geometric midpoint to leave breathing room for the slide controls. */
  .home-carousel-content {
    align-items: center;
    padding-top: 0;
    padding-bottom: clamp(66px, 8.5vh, 96px);
  }
  body:not(.locale-en) .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy {
    width: min(1260px, 82vw);
  }
  body:not(.locale-en) .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2 {
    max-width: none;
    font-size: clamp(44px, 3.75vw, 60px);
    letter-spacing: -.045em;
  }
  body:not(.locale-en) .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2 > span {
    white-space: nowrap;
  }

  /* Product Matrix now uses the former solution pattern: a persistent
     vertical index beside one immersive product canvas. */
  .home-matrix-workbench {
    width: 100%;
    min-height: 430px;
    max-height: 570px;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(236px, .35fr) minmax(0, 1.65fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 22px;
    color: #fff;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  .home-matrix-list {
    height: 100%;
    min-height: 0;
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(9, minmax(0, 1fr));
    align-items: stretch;
    justify-items: stretch;
    gap: 6px;
    background: linear-gradient(145deg, rgba(10, 30, 56, .72), rgba(3, 12, 27, .48));
    border: 1px solid rgba(118, 190, 241, .18);
    border-radius: 16px;
    overflow: hidden;
  }
  .home-matrix-list button {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    max-height: none;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-content: center;
    gap: 0;
    color: rgba(226, 239, 252, .58);
    text-align: left;
    background: rgba(10, 37, 70, .32);
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: none;
    transform: none;
    transition: color .24s ease, background .24s ease, border-color .24s ease, box-shadow .28s ease, transform .28s var(--ease);
  }
  .home-matrix-list button:last-child { border-bottom-color: transparent; }
  .home-matrix-list button b,
  .locale-en .home-matrix-list button b {
    min-width: 0;
    display: block;
    color: inherit;
    font-size: clamp(12px, .86vw, 14px);
    font-weight: 680;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .home-matrix-list button > i {
    display: none;
  }
  .home-matrix-list button:hover {
    color: #fff;
    background: rgba(41, 96, 162, .3);
    border-color: rgba(118, 190, 241, .28);
    transform: translateX(2px);
  }
  .home-matrix-list button.active {
    color: #fff;
    background: linear-gradient(135deg, #245fd4 0%, #4075f6 58%, #318fdc 100%);
    border-color: rgba(139, 207, 255, .78);
    box-shadow: 0 10px 28px rgba(28, 103, 229, .3), inset 0 1px rgba(255, 255, 255, .22);
    transform: none;
  }
  .home-matrix-list button:focus-visible {
    outline: 2px solid #9ce6ff;
    outline-offset: -3px;
  }
  .home-matrix-stage {
    position: relative;
    min-width: 0;
    min-height: 430px;
    height: 100%;
    display: block;
    background: #020813;
    border: 1px solid rgba(100, 215, 255, .42);
    border-radius: 16px;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .34);
    overflow: hidden;
  }
  .home-matrix-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #020813;
  }
  .home-matrix-preview > img {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center;
  }
  .home-matrix-workbench[data-home-product="delivery"] .home-matrix-preview > img {
    padding: clamp(22px, 2.6vw, 38px);
    object-fit: contain;
    background: radial-gradient(circle at 62% 44%, rgba(40, 120, 255, .13), transparent 46%), #020813;
  }
  body:not(.locale-en) .home-matrix-section .home-page-heading > p {
    max-width: none;
    font-size: clamp(12px, .9vw, 14px);
    white-space: nowrap;
  }
  .home-matrix-preview > span {
    background:
      linear-gradient(90deg, rgba(2, 8, 19, .86) 0%, rgba(2, 8, 19, .62) 34%, rgba(2, 8, 19, .08) 68%),
      linear-gradient(180deg, rgba(2, 8, 19, .04) 34%, rgba(2, 8, 19, .68) 100%);
  }
  .home-matrix-copy {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 3;
    width: min(540px, 58%);
    min-height: 0;
    padding: 24px 28px 25px;
    display: block;
    color: #fff;
    background: rgba(3, 11, 24, .84);
    border: 1px solid rgba(118, 190, 241, .2);
    border-left: 2px solid #64d7ff;
    border-radius: 0 10px 10px 0;
    backdrop-filter: blur(14px);
  }
  .home-matrix-copy h3 {
    margin-top: 11px;
    font-size: clamp(25px, 2.15vw, 35px);
    line-height: 1.16;
  }
  .home-matrix-copy > p { margin-top: 9px; line-height: 1.6; }
  .home-matrix-tags { margin-top: 13px; }
  .home-matrix-copy > a { min-height: 0; margin-top: 15px; padding: 0; color: #64d7ff; background: transparent; border: 0; }
  .home-matrix-copy > a:hover { color: #fff; background: transparent; transform: translateX(3px); }

  /* Solutions adopt the former product-matrix pattern: categories and
     products are selected above one spacious split-stage. */
  .home-solutions-stage {
    width: 100%;
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 50px 40px minmax(390px, 1fr);
    gap: 13px;
    color: #fff;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  .home-solutions-section {
    height: 100svh;
    min-height: 720px;
    max-height: 100svh;
  }
  .home-solutions-section .home-page-container {
    height: calc(100svh - clamp(128px, 15.3vh, 172px));
    min-height: 0;
    max-height: none;
  }
  .home-solutions-tabs {
    min-width: 0;
    min-height: 50px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: 1fr;
    gap: 10px;
    background: transparent;
    border: 0;
    overflow: visible;
  }
  .home-solutions-tabs button {
    min-width: 0;
    min-height: 50px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: rgba(232, 242, 252, .7);
    text-align: center;
    background: rgba(20, 50, 86, .8);
    border: 1px solid rgba(133, 182, 238, .22);
    border-radius: 999px;
    transition: color .24s ease, background .24s ease, border-color .24s ease, transform .24s var(--ease);
  }
  .home-solutions-tabs button::after { display: none; }
  .home-solutions-tabs button span {
    color: #64d7ff;
    font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .home-solutions-tabs button b {
    color: inherit;
    font-size: clamp(11px, .84vw, 14px);
    line-height: 1.2;
    white-space: nowrap;
  }
  .locale-en .home-solutions-tabs button b { font-size: clamp(9px, .68vw, 11px); }
  .home-solutions-tabs button:hover {
    color: #fff;
    background: rgba(40, 91, 150, .94);
    border-color: rgba(100, 215, 255, .48);
    transform: translateY(-2px);
  }
  .home-solutions-tabs button.active {
    color: #07182d;
    background: #fff;
    border-color: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
  }
  .home-solutions-tabs button.active span { color: #2878ff; }
  .home-solution-item-tabs {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
  }
  .home-solution-item-tabs button {
    min-width: 0;
    height: 36px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(211, 229, 244, .5);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(118, 190, 241, .18);
    cursor: pointer;
  }
  .home-solution-item-tabs button span { color: rgba(100, 215, 255, .54); font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
  .home-solution-item-tabs button b {
    min-width: 0;
    color: inherit;
    font-size: clamp(10px, .75vw, 12px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .locale-en .home-solution-item-tabs button b { font-size: clamp(9px, .64vw, 10.5px); }
  .home-solution-item-tabs button:hover { color: #fff; border-color: rgba(100, 215, 255, .48); }
  .home-solution-item-tabs button.active { color: #fff; border-color: #64d7ff; box-shadow: inset 0 -2px #64d7ff; }
  .home-solution-workspace {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(430px, .66fr) minmax(0, 1.34fr);
    color: #fff;
    background: #020813;
    border: 1px solid rgba(100, 215, 255, .45);
    border-radius: 18px;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .36);
    overflow: hidden;
  }
  .home-solution-copy {
    position: relative;
    z-index: 3;
    min-width: 0;
    padding: clamp(28px, 2.35vw, 38px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(145deg, rgba(4, 17, 34, .98), rgba(3, 12, 27, .88));
  }
  .home-solution-copy > span {
    color: #64d7ff;
    font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .12em;
  }
  .home-solution-copy h3 {
    max-width: 560px;
    margin-top: 17px;
    color: #fff;
    font-size: clamp(28px, 2.15vw, 36px);
    line-height: 1.15;
    letter-spacing: -.035em;
  }
  .home-solution-copy h3 > span {
    display: block;
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
  }
  .locale-en .home-solution-copy h3 > span {
    width: auto;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
  }
  .locale-en .home-solution-copy h3 {
    font-size: clamp(27px, 2vw, 32px);
    line-height: 1.08;
  }
  .home-solution-copy p {
    max-width: 520px;
    margin-top: 17px;
    color: rgba(221, 236, 249, .64);
    font-size: clamp(12px, .9vw, 14px);
    line-height: 1.8;
  }
  .home-solution-tags { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 7px; }
  .home-solution-tags i {
    padding: 7px 9px;
    color: #a6e9ff;
    font-size: 9px;
    font-style: normal;
    border: 1px solid rgba(100, 215, 255, .24);
    background: rgba(100, 215, 255, .04);
  }
  .home-solution-copy a {
    width: fit-content;
    min-height: 44px;
    margin-top: 24px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    background: #2878ff;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px;
    transition: background .22s ease, transform .22s var(--ease);
  }
  .home-solution-copy a:hover { background: #438cff; transform: translateY(-2px); }
  .home-solution-preview {
    position: relative;
    min-width: 0;
    min-height: 0;
    height: 100%;
    margin: 0;
    background: #020812;
    overflow: hidden;
  }
  .home-solution-preview::after { display: none; }
  .home-solution-preview > img {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    display: block;
    object-fit: cover;
    object-position: center;
    background: #020812;
  }
  .home-solution-preview > span {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(2, 8, 19, .5), rgba(2, 8, 19, .02) 42%, rgba(2, 8, 19, .08));
  }
  .home-solution-workspace.is-updating .home-solution-copy { animation: v18SolutionCopyIn .34s cubic-bezier(.2, .72, .2, 1) both; }
  .home-solution-workspace.is-updating .home-solution-preview img { animation: v18SolutionImageIn .4s cubic-bezier(.2, .72, .2, 1) both; }

  /* Technology: a shared tab rail and open editorial canvases. The first
     tab retains every metric and capability without a table-like frame. */
  .home-engine-workbench {
    width: 100%;
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    padding: 0;
    display: grid;
    grid-template-rows: 58px minmax(0, 1fr);
    gap: clamp(20px, 2.5vh, 28px);
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  .home-engine-tabs {
    min-height: 58px;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(118, 190, 241, .2);
    overflow: visible;
  }
  .home-engine-tabs button {
    min-width: 0;
    min-height: 58px;
    padding: 0 10px 13px;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    color: rgba(219, 235, 249, .5);
    text-align: center;
    background: transparent;
    border: 0;
  }
  .home-engine-tabs button span { color: rgba(100, 215, 255, .56); font-size: 8px; }
  .home-engine-tabs button b {
    color: inherit;
    font-size: clamp(10px, .78vw, 13px);
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }
  .locale-en .home-engine-tabs button b { font-size: clamp(8.5px, .61vw, 10.5px); }
  .home-engine-tabs button > i {
    right: 16%;
    bottom: -1px;
    left: 16%;
    height: 2px;
    background: #64d7ff;
    box-shadow: 0 0 16px rgba(100, 215, 255, .46);
  }
  .home-engine-tabs button:hover,
  .home-engine-tabs button.active { color: #fff; background: transparent; }
  .home-engine-performance-panel,
  .home-engine-panel {
    min-width: 0;
    min-height: 0;
    height: 100%;
    color: #fff;
    background: transparent;
    border: 0;
    overflow: visible;
  }
  .home-engine-performance-panel {
    display: grid;
    grid-template-rows: minmax(0, 1fr) 86px;
    gap: 17px;
  }
  .home-performance-main {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(390px, .88fr) minmax(520px, 1.12fr);
    gap: clamp(34px, 4vw, 62px);
    align-items: stretch;
  }
  .home-performance-visual {
    position: relative;
    min-width: 0;
    min-height: 0;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 28px 74px rgba(0, 0, 0, .28);
    overflow: hidden;
  }
  .home-performance-visual::after {
    background: linear-gradient(180deg, rgba(2, 8, 18, .02) 18%, rgba(2, 8, 18, .88) 100%);
  }
  .home-performance-features {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 0 clamp(24px, 2.5vw, 40px);
    background: transparent;
  }
  .home-performance-features article {
    min-width: 0;
    min-height: 0;
    padding: clamp(12px, 1.3vh, 17px) 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(118, 190, 241, .2);
  }
  .home-performance-features article:first-child { grid-column: 1 / -1; }
  .home-performance-features article:nth-child(3),
  .home-performance-features article:nth-child(5) { border-right: 0; }
  .home-performance-features article:nth-child(n+4) { border-bottom: 0; }
  .home-performance-features h4 { font-size: clamp(13px, 1vw, 16px); }
  .home-performance-features p { margin-top: 6px; font-size: clamp(9px, .72vw, 11px); line-height: 1.58; }
  .home-performance-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 28px);
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(118, 190, 241, .22);
  }
  .home-performance-metrics > div {
    position: relative;
    min-width: 0;
    padding: 18px 0 0;
    display: block;
    border: 0;
  }
  .home-performance-metrics strong { font-size: clamp(18px, 1.45vw, 24px); }
  .home-performance-metrics span { margin-top: 7px; display: block; font-size: clamp(8px, .64vw, 10px); }
  .home-engine-panel {
    display: grid;
    grid-template-columns: minmax(310px, .52fr) minmax(0, 1.48fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
  }
  .home-engine-caption {
    min-width: 0;
    min-height: 0;
    padding: 0;
    justify-content: center;
    color: #fff;
    background: transparent;
    border: 0;
  }
  .home-engine-caption h3 { margin-top: 20px; font-size: clamp(38px, 3.5vw, 56px); }
  .home-engine-caption p { margin-top: 21px; font-size: clamp(13px, .98vw, 16px); line-height: 1.85; }
  .home-engine-media {
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: grid;
    place-items: center;
    background: transparent;
    overflow: visible;
    perspective: 1500px;
  }
  .home-engine-media::before { display: none; }
  .home-engine-media img {
    width: 112%;
    height: 100%;
    margin-left: -12%;
    padding: 0;
    object-fit: contain;
    object-position: right center;
    filter: drop-shadow(0 34px 56px rgba(0, 0, 0, .42));
    transform: translate3d(var(--scene-x, 0), var(--scene-y, 0), 0) rotateY(-4.5deg) rotateX(1.2deg) scale(.98);
    transform-origin: 58% 50%;
    transition: transform .55s ease;
  }
}

@keyframes v18SolutionCopyIn {
  from { opacity: .3; transform: translate3d(-12px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes v18SolutionImageIn {
  from { opacity: .35; transform: scale(1.012); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 1101px) and (max-height: 880px) {
  .home-matrix-workbench { min-height: 350px; max-height: 455px; }
  .home-matrix-stage { min-height: 350px; }
  .home-matrix-copy { bottom: 18px; left: 18px; padding: 19px 22px; }
  .home-matrix-copy h3 { font-size: clamp(23px, 2vw, 31px); }
  .home-matrix-tags { display: none; }
  .home-solutions-stage { grid-template-rows: 46px 35px minmax(325px, 1fr); gap: 9px; }
  .home-solutions-tabs button { min-height: 46px; }
  .home-solution-item-tabs button { height: 33px; }
  .home-solution-workspace { min-height: 325px; }
  .home-solution-copy { padding: 24px 32px; }
  .home-solution-copy h3 { margin-top: 12px; font-size: clamp(25px, 2.2vw, 34px); }
  .home-solution-copy p { margin-top: 12px; line-height: 1.65; }
  .home-solution-tags { margin-top: 13px; }
  .home-solution-copy a { min-height: 40px; margin-top: 16px; }
  .home-technology-section .home-page-container { min-height: 0; }
  .home-technology-section .home-page-heading { margin-bottom: 14px; }
  .home-engine-workbench {
    height: clamp(500px, calc(100svh - 300px), 580px);
    min-height: 0;
    max-height: 580px;
    flex: 0 0 auto;
    grid-template-rows: 50px minmax(0, 1fr);
    gap: 16px;
  }
  .home-engine-tabs,
  .home-engine-tabs button { min-height: 50px; }
  .home-engine-tabs button { padding-bottom: 10px; }
  .home-engine-performance-panel { grid-template-rows: minmax(0, 1fr) 72px; gap: 12px; }
  .home-performance-main { gap: 34px; }
  .home-performance-features article { padding: 9px 0; }
  .home-performance-features p { line-height: 1.45; }
  .home-performance-metrics > div { padding-top: 13px; }
  .home-engine-caption h3 { font-size: clamp(34px, 3.1vw, 48px); }
  .home-engine-caption p { margin-top: 15px; line-height: 1.68; }
  .home-engine-media img {
    width: auto;
    max-width: 100%;
    height: clamp(420px, calc(100svh - 380px), 500px);
    max-height: none;
    margin-left: 0;
    transform: scale(.9);
    transform-origin: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-solution-workspace.is-updating .home-solution-copy,
  .home-solution-workspace.is-updating .home-solution-preview img { animation: none; }
  .home-engine-media img { transform: none; }
}

/* ==========================================================
   V0.19 — concise section heroes and legible catalog systems
   ========================================================== */

/* Product catalogue: fixed-size, calm light cards with a clear
   image / positioning / action hierarchy. */
.catalog-section {
  color: #10263a;
  background:
    radial-gradient(circle at 86% 8%, rgba(40, 120, 255, .09), transparent 28%),
    linear-gradient(180deg, #f4f8fc 0%, #eaf1f7 100%);
}

.catalog-section .section-heading h2 { color: #10263a; }
.catalog-section .section-heading p { color: #526b80; }

.catalog-grid {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 428px);
  grid-auto-rows: 438px;
  justify-content: center;
  gap: 30px 26px;
}

.catalog-card {
  width: 428px;
  height: 438px;
  min-width: 0;
  display: grid;
  grid-template-rows: 196px minmax(0, 1fr);
  color: #10263a;
  background: rgba(255, 255, 255, .98);
  border: 1px solid #cad9e5;
  border-radius: 12px;
  box-shadow: 0 16px 42px rgba(32, 66, 94, .08);
  overflow: hidden;
  transition: transform .32s var(--ease), border-color .32s ease, box-shadow .32s ease;
}

.catalog-card:hover,
.catalog-card:focus-visible {
  color: #10263a;
  transform: translateY(-6px);
  border-color: rgba(40, 120, 255, .58);
  box-shadow: 0 24px 58px rgba(32, 79, 123, .15);
}

.catalog-card:focus-visible,
.solution-list-card:focus-visible {
  outline: 2px solid #2878ff;
  outline-offset: 3px;
}

.catalog-image {
  position: relative;
  height: auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 62% 40%, rgba(58, 143, 255, .18), transparent 48%),
    #061322;
  border-bottom: 1px solid #dbe6ee;
}

.catalog-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 13, 25, .02), rgba(4, 13, 25, .18));
}

.catalog-image img {
  width: 100%;
  height: 100%;
  padding: 8px;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: none;
  transition: transform .55s var(--ease), filter .32s ease;
}

.catalog-card:hover .catalog-image img,
.catalog-card:focus-visible .catalog-image img {
  transform: scale(1.018);
}

.catalog-image span {
  position: absolute;
  z-index: 2;
  left: 18px;
  top: 16px;
  width: auto;
  min-width: 0;
  height: 27px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #dff5ff;
  background: rgba(4, 17, 34, .78);
  border: 1px solid rgba(100, 215, 255, .34);
  border-radius: 999px;
  font-family: "Alibaba PuHuiTi 3.0", "PingFang SC", sans-serif;
  font-size: 10px;
  font-weight: 650;
  backdrop-filter: blur(10px);
}

.catalog-body {
  min-height: 0;
  height: auto;
  padding: 22px 24px 23px;
  display: flex;
  flex-direction: column;
}

.catalog-body small {
  min-height: 14px;
  color: #2878ff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
}

.catalog-body h3 {
  margin-top: 9px;
  color: #10263a;
  font-size: 23px;
  line-height: 1.28;
  letter-spacing: -.025em;
  word-break: keep-all;
  overflow-wrap: normal;
}

.catalog-body p {
  margin-top: 9px;
  color: #526b80;
  font-size: 13px;
  line-height: 1.62;
}

.catalog-body b {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #1e67c9;
  font-size: 12px;
  font-weight: 750;
}

.catalog-body b i {
  color: #2878ff;
  font-style: normal;
  transition: transform .25s ease;
}

.catalog-card:hover .catalog-body b i,
.catalog-card:focus-visible .catalog-body b i { transform: translateX(4px); }

/* Solution catalogue: all scenarios remain visible in a light editorial
   grid, with stronger text contrast and no hidden carousel state. */
.solution-list-section {
  color: #10263a;
  background:
    radial-gradient(circle at 12% 2%, rgba(40, 120, 255, .08), transparent 26%),
    linear-gradient(180deg, #f2f6fa 0%, #e6eef5 100%);
}

.solution-list-section .section-heading h2 { color: #10263a; }
.solution-list-section .section-heading p { color: #526b80; }

.solution-list {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  border: 0;
}

.solution-list-card {
  position: relative;
  min-width: 0;
  min-height: 520px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  color: #10263a;
  background: rgba(255, 255, 255, .98);
  border: 1px solid #c9d9e5;
  border-radius: 12px;
  box-shadow: 0 16px 42px rgba(31, 67, 98, .08);
  overflow: hidden;
  transition: transform .32s var(--ease), border-color .32s ease, box-shadow .32s ease;
}

.solution-list-card::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  display: block;
  background: linear-gradient(90deg, #2878ff, #64d7ff 56%, transparent 92%);
  transform: scaleX(.28);
  transform-origin: left;
  transition: transform .42s var(--ease);
}

.solution-list-card:hover,
.solution-list-card:focus-visible {
  color: #10263a;
  transform: translateY(-6px);
  border-color: rgba(40, 120, 255, .56);
  box-shadow: 0 24px 58px rgba(31, 78, 121, .15);
}

.solution-list-card:hover::before,
.solution-list-card:focus-visible::before { transform: scaleX(1); }

.solution-list-card figure {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 16 / 9;
  background: #061322;
  border: 0;
  border-bottom: 1px solid #d8e4ed;
  overflow: hidden;
}

.solution-list-card figure::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 8, 18, .03) 45%, rgba(2, 8, 18, .48));
}

.solution-list-card figure img {
  width: 100%;
  height: 100%;
  padding: 0;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #061322;
  filter: none;
  transition: transform .62s var(--ease);
}

.solution-list-card:hover figure img,
.solution-list-card:focus-visible figure img { transform: scale(1.025); }

.solution-list-card figure figcaption {
  position: absolute;
  z-index: 2;
  right: auto;
  bottom: 14px;
  left: 16px;
  width: auto;
  padding: 7px 10px;
  color: #e7f7ff;
  background: rgba(3, 15, 30, .78);
  border: 1px solid rgba(100, 215, 255, .32);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 650;
  backdrop-filter: blur(10px);
}

.solution-list-copy {
  min-height: 0;
  padding: 24px 25px 26px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.solution-list-copy > small {
  color: #2878ff;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .06em;
}

.solution-list-copy h3 {
  margin-top: 10px;
  color: #10263a;
  font-size: clamp(21px, 1.55vw, 25px);
  line-height: 1.28;
  letter-spacing: -.025em;
  word-break: keep-all;
  overflow-wrap: normal;
}

.solution-list-copy p {
  margin-top: 10px;
  color: #4d667b;
  font-size: 13px;
  line-height: 1.72;
}

.solution-list-copy > div {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.solution-list-copy > div > i {
  padding: 6px 8px;
  color: #315f8a;
  background: #f3f7fb;
  border: 1px solid #d3e1eb;
  border-radius: 4px;
  font-size: 10px;
  font-style: normal;
}

.solution-list-copy > b {
  margin-top: auto;
  padding-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #1e67c9;
  font-size: 12px;
  font-weight: 750;
}

.solution-list-copy > b > i {
  padding: 0;
  color: #2878ff;
  background: transparent;
  border: 0;
  font-style: normal;
  transition: transform .25s ease;
}

.solution-list-card:hover .solution-list-copy > b > i,
.solution-list-card:focus-visible .solution-list-copy > b > i { transform: translateX(4px); }

.locale-en .catalog-body h3,
.locale-en .solution-list-copy h3 {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

@media (min-width: 1101px) {
  /* The five primary landing banners occupy roughly one third of the
     desktop viewport so the next section is always visible. */
  body:not([data-page="home"]) .v12-page-hero.page-hero--landing {
    height: 33.333svh;
    min-height: 240px;
    max-height: 420px;
    padding: 0;
  }

  body:not([data-page="home"]) .page-hero--landing .v12-page-hero-layout {
    height: 100%;
    min-height: 100%;
    padding-top: 68px;
    align-items: center;
  }

  body:not([data-page="home"]) .page-hero--landing .page-hero-content {
    width: min(680px, 54vw);
    max-width: 680px;
    padding: 0;
  }

  body:not([data-page="home"]) .page-hero--landing .page-hero-content .section-label {
    font-size: 9px;
    letter-spacing: .16em;
  }

  body:not([data-page="home"]) .page-hero--landing .page-hero-content h1 {
    max-width: 680px;
    margin-top: 10px;
    font-size: clamp(42px, 3.65vw, 56px);
    line-height: 1.04;
    letter-spacing: -.045em;
  }

  body:not([data-page="home"]) .page-hero--landing .page-hero-content > p {
    max-width: 610px;
    margin-top: 13px;
    font-size: 14px;
    line-height: 1.65;
  }

  body.locale-en:not([data-page="home"]) .page-hero--landing .page-hero-content > p {
    max-width: 680px;
    font-size: 13px;
    line-height: 1.5;
  }
}

@media (min-width: 1101px) and (max-width: 1330px) {
  .solution-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 821px) and (max-width: 1100px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 428px)); grid-auto-rows: auto; }
  .catalog-card { width: 100%; height: auto; min-height: 438px; grid-template-rows: 196px auto; }
  .solution-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================
   V0.20 — campaign alignment and solution catalogue overflow
   ========================================================== */

@media (min-width: 1101px) {
  /* Keep the campaign copy on the established vertical axis while giving
     it a little more room from the left edge of the desktop canvas. */
  .home-carousel-content {
    padding-inline-start: clamp(20px, 1.6vw, 32px);
  }

  /* The Chinese Blackhole Engine headline now follows the same campaign
     scale as the other three slides. English keeps its dedicated fit rule. */
  body:not(.locale-en) .home-carousel-slide[data-home-slide-key="blackhole"] .home-carousel-copy h2 {
    font-size: clamp(52px, 4.65vw, 74px);
  }

  /* A category can contain up to five specific partner solutions. Keep
     every label reachable without compressing or clipping long names. */
  .home-solution-item-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
  }

  .home-solution-item-tabs::-webkit-scrollbar {
    display: none;
  }

  .home-solution-item-tabs button {
    flex: 0 0 auto;
    max-width: 300px;
  }
}

/* ==========================================================
   V0.21 — video-synced campaign progress and editorial pages
   ========================================================== */

/* The active campaign indicator is a real playback rail. JavaScript updates
   its physical width from the video's playback time, so both rounded end caps
   remain geometrically identical at every point in the eight-second cycle. */
.home-carousel-tabs button i,
.home-carousel-tabs button.active i {
  top: 50%;
  right: auto;
  bottom: auto;
  left: calc(50% - 16px);
  width: var(--carousel-progress-width, 0px);
  height: 9px;
  background: #fff;
  border-radius: 999px;
  transform: translateY(-50%);
  transition: none;
  will-change: width;
}

/* Equal case-card geometry keeps both the full library and two-card filters
   scannable without promoting an arbitrary first result. */
@media (min-width: 821px) {
  .case-grid {
    grid-auto-rows: 1fr;
    align-items: stretch;
  }

  .case-card-project,
  .case-card-project:first-child {
    grid-column: auto;
    height: 100%;
  }

  .case-card > a,
  .case-card-project:first-child > a {
    height: 100%;
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }

  .case-card .case-card-media,
  .case-card-project:first-child > a .case-card-media {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .case-card img,
  .case-card-project:first-child > a img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
  }

  .case-card > a > div:last-child,
  .case-card-project:first-child > a > div:last-child {
    min-height: 292px;
    padding: 25px;
    justify-content: flex-start;
  }

  .case-card-project:first-child h3 {
    margin-top: 12px;
    font-size: clamp(21px, 1.55vw, 25px);
  }
}

@media (min-width: 1101px) {
  /* The revised landing banners sit between the former one-third strip and a
     full-screen hero, leaving the next section visible without feeling thin. */
  body:not([data-page="home"]) .v12-page-hero.page-hero--landing {
    height: 44svh;
    min-height: 360px;
    max-height: 540px;
  }

  body:not([data-page="home"]) .page-hero--landing .v12-page-hero-layout {
    padding-top: 76px;
  }

  .home-matrix-section .home-page-heading > p {
    max-width: none;
    white-space: nowrap;
  }

  /* The English line is intentionally longer than the Chinese campaign
     sentence. Let it wrap at word boundaries instead of clipping. */
  .locale-en .home-matrix-section .home-page-heading > p {
    max-width: 650px;
    white-space: normal;
  }
}

@media (max-width: 820px) {
  /* Desktop cards keep the requested 428 × 438 geometry; below that width
     they contract to the available canvas without creating page overflow. */
  .catalog-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  .catalog-card {
    width: 100%;
    max-width: 428px;
    min-height: 438px;
    height: auto;
    justify-self: center;
  }
}

/* About Weida uses a light editorial field beneath the shared dark banner.
   The blue platform spine and broad rules reference engineering drawings
   without turning the page into a dashboard. */
.about-light-shell {
  --about-ink: #10263a;
  --about-copy: #4c6579;
  --about-line: #d6e2ec;
  --about-blue: #2878ff;
  color: var(--about-ink);
  background:
    radial-gradient(circle at 88% 8%, rgba(40, 120, 255, .09), transparent 27%),
    linear-gradient(180deg, #f7fafe 0%, #edf4fa 100%);
}

.about-light-shell .section { padding: clamp(92px, 8vw, 136px) 0; }

.about-profile-lead {
  max-width: 970px;
  padding-left: 28px;
  border-left: 4px solid var(--about-blue);
}

.about-profile-lead > span,
.about-section-intro > span,
.about-team-copy > span {
  color: var(--about-blue);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .16em;
}

.about-profile-lead h2,
.about-section-intro h2,
.about-team-copy h2 {
  margin-top: 17px;
  color: var(--about-ink);
  font-size: clamp(38px, 4.15vw, 66px);
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.about-profile-lead > p {
  margin-top: 20px;
  color: #365b79;
  font-size: clamp(18px, 1.45vw, 24px);
  font-weight: 520;
}

.about-profile-grid {
  margin-top: 66px;
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(560px, 1.18fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

.about-company-story small {
  color: var(--about-blue);
  font-size: 13px;
  font-weight: 700;
}

.about-company-story h3 {
  margin-top: 20px;
  color: var(--about-ink);
  font-size: clamp(27px, 2.35vw, 38px);
  line-height: 1.25;
  letter-spacing: -.035em;
}

.about-company-story p,
.about-section-intro p,
.about-team-copy p {
  margin-top: 24px;
  color: var(--about-copy);
  font-size: 16px;
  line-height: 2;
}

.about-profile-media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #07182b;
  border-radius: 14px;
  box-shadow: 0 28px 70px rgba(29, 68, 104, .18);
}

.about-profile-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(4, 16, 31, .76));
  pointer-events: none;
}

.about-profile-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.about-profile-media figcaption { position: absolute; z-index: 2; right: 24px; bottom: 22px; left: 24px; display: flex; justify-content: space-between; color: #fff; font-size: 11px; letter-spacing: .12em; }
.about-profile-media figcaption span { color: #73d9ff; }

.about-business-section { background: rgba(255, 255, 255, .82); border-top: 1px solid var(--about-line); border-bottom: 1px solid var(--about-line); }
.about-business-layout { display: grid; grid-template-columns: minmax(300px, .68fr) minmax(580px, 1.32fr); gap: clamp(60px, 8vw, 130px); }
.about-section-intro h2,
.about-team-copy h2 { font-size: clamp(34px, 3.25vw, 52px); }
.about-business-lines { border-top: 1px solid #aebfcd; }
.about-business-lines article { padding: 25px 0; display: grid; grid-template-columns: 58px 1fr; gap: 24px; border-bottom: 1px solid var(--about-line); }
.about-business-lines article > span { color: var(--about-blue); font: 700 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.about-business-lines h3 { color: var(--about-ink); font-size: 22px; }
.about-business-lines p { margin-top: 8px; color: var(--about-copy); font-size: 14px; line-height: 1.75; }

.about-team-section {
  background:
    radial-gradient(circle at 20% 50%, rgba(75, 150, 255, .16), transparent 34%),
    #eaf2fa;
}
.about-team-layout { display: grid; grid-template-columns: minmax(320px, .72fr) minmax(540px, 1.28fr); gap: clamp(70px, 10vw, 160px); align-items: center; }
.about-team-metric { padding: 34px 0 34px 34px; border-left: 4px solid var(--about-blue); }
.about-team-metric strong { display: block; color: var(--about-blue); font-size: clamp(72px, 8.5vw, 132px); line-height: .88; letter-spacing: -.07em; }
.about-team-metric span { margin-top: 24px; display: block; color: var(--about-ink); font-size: 18px; font-weight: 680; }
.about-team-metric p { max-width: 420px; margin-top: 12px; color: var(--about-copy); line-height: 1.8; }

.about-values-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 14%, rgba(40, 120, 255, .09), transparent 28%),
    linear-gradient(180deg, #fff 0%, #f3f8fd 100%);
  border-top: 1px solid var(--about-line);
}

.about-values-list {
  margin-top: clamp(46px, 5vw, 72px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}

.about-values-list .about-value-card {
  position: relative;
  min-width: 0;
  min-height: 472px;
  padding: 20px 20px 30px;
  display: grid;
  grid-template-rows: 268px 1fr;
  gap: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(177, 200, 221, .72);
  border-radius: 22px;
  box-shadow: 0 20px 54px rgba(34, 78, 117, .08);
  transition: translate .32s var(--ease), border-color .32s ease, box-shadow .32s ease;
}

.about-value-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 28px;
  left: 28px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #226cfe, transparent);
  opacity: .72;
}

.about-value-visual {
  min-width: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.about-value-visual img {
  width: 210px;
  height: 254px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(34, 108, 254, .12));
  transition: transform .45s var(--ease);
}

.about-value-copy {
  position: relative;
  min-width: 0;
  padding: 23px 10px 4px;
  border-top: 1px solid rgba(174, 199, 221, .7);
}

.about-value-copy > span {
  color: #226cfe;
  font: 750 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em;
}

.about-values-list .about-value-label {
  margin-top: 12px;
  padding: 0;
  color: var(--about-ink);
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.about-values-list .about-value-label::before { display: none; }

.about-values-list .about-value-content {
  margin-top: 13px;
  color: #3f5a70;
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: -.012em;
}

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .about-value-card:hover {
    translate: 0 -6px;
    border-color: rgba(34, 108, 254, .48);
    box-shadow: 0 30px 72px rgba(35, 84, 130, .16), 0 0 0 1px rgba(34, 108, 254, .05);
  }
  .about-value-card:hover .about-value-visual img { transform: translateY(-4px) scale(1.035); }
}

@media (max-width: 1100px) {
  .about-profile-grid,
  .about-business-layout,
  .about-team-layout { grid-template-columns: 1fr; }
  .about-profile-grid { gap: 42px; }
  .about-business-layout,
  .about-team-layout { gap: 54px; }
  .about-values-list { grid-template-columns: 1fr; }
  .about-values-list .about-value-card {
    min-height: 0;
    grid-template-columns: minmax(200px, .42fr) minmax(0, .58fr);
    grid-template-rows: minmax(250px, auto);
    align-items: center;
  }
  .about-value-copy { padding: 24px 24px 24px 32px; border-top: 0; border-left: 1px solid rgba(174, 199, 221, .7); }
}

@media (max-width: 620px) {
  .about-light-shell .about-values-section { padding: 76px 0; }
  .about-values-list .about-value-card { grid-template-columns: 1fr; grid-template-rows: 230px auto; padding: 18px 18px 26px; }
  .about-value-visual img { width: 176px; height: 212px; }
  .about-value-copy { padding: 22px 8px 0; border-top: 1px solid rgba(174, 199, 221, .7); border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .about-value-card,
  .about-value-visual img { transition: none; transform: none !important; translate: none !important; }
}

/* Complete solution catalogue: category navigation provides the overview,
   while each group keeps every platform and partner solution visible. */
.solution-catalog-nav {
  position: relative;
  z-index: 2;
  margin-top: 42px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  background: rgba(218, 230, 240, .74);
  border: 1px solid #c8d8e5;
  border-radius: 14px;
}

.solution-catalog-nav a {
  min-width: 0;
  padding: 14px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #36536b;
  background: rgba(255, 255, 255, .72);
  border: 1px solid transparent;
  border-radius: 9px;
  text-decoration: none;
  transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}

.solution-catalog-nav a:hover,
.solution-catalog-nav a:focus-visible {
  color: #0d56c7;
  background: #fff;
  border-color: rgba(40, 120, 255, .42);
  transform: translateY(-2px);
}

.solution-catalog-nav span {
  color: #2878ff;
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.solution-catalog-nav b {
  min-width: 0;
  font-size: 13px;
  line-height: 1.25;
  text-wrap: balance;
}

.solution-catalog-groups { margin-top: 76px; }
.solution-catalog-group { padding: 64px 0 84px; scroll-margin-top: 92px; border-top: 1px solid #b8cad8; }
.solution-catalog-group:first-child { padding-top: 0; border-top: 0; }
.solution-catalog-group > header { display: grid; grid-template-columns: 110px minmax(240px, .65fr) minmax(420px, 1.35fr); gap: 32px; align-items: end; }
.solution-catalog-group > header > span { align-self: start; color: #2878ff; font: 700 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.solution-catalog-group > header h2 { color: #10263a; font-size: clamp(32px, 3vw, 48px); line-height: 1.05; letter-spacing: -.04em; }
.solution-catalog-group > header p { max-width: 680px; justify-self: end; color: #526b80; font-size: 15px; line-height: 1.8; }
.solution-catalog-group .solution-list { margin-top: 36px; }
.solution-catalog-group .solution-list-card { min-height: 508px; }

/* Partner solution details pair authentic project views with a compact set
   of delivery highlights. The pale technical field separates evidence from
   the dark product narrative without introducing dashboard-like chrome. */
.solution-project-proof {
  color: #10263a;
  background:
    radial-gradient(circle at 88% 12%, rgba(40, 120, 255, .11), transparent 28%),
    linear-gradient(180deg, #edf4fa, #f8fbfe);
}

.solution-project-proof .section-heading h2 { color: #10263a; }
.solution-project-proof .section-heading p { color: #536d82; }
.solution-project-proof-layout { margin-top: 50px; display: grid; grid-template-columns: minmax(0, 1.36fr) minmax(300px, .64fr); gap: clamp(34px, 5vw, 74px); align-items: start; }
.solution-project-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.solution-project-gallery:has(figure:only-child) { grid-template-columns: 1fr; }
.solution-project-gallery figure { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #061322; border: 1px solid #b9cedd; border-radius: 12px; box-shadow: 0 24px 55px rgba(31, 67, 98, .14); }
.solution-project-gallery figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 8, 18, .08), transparent 54%, rgba(2, 8, 18, .72)); pointer-events: none; }
.solution-project-gallery img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.solution-project-gallery figcaption { position: absolute; z-index: 2; right: 18px; bottom: 16px; left: 18px; display: flex; justify-content: space-between; color: #fff; font-size: 10px; letter-spacing: .1em; }
.solution-project-gallery figcaption span { color: #70dcff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.solution-project-highlights { margin: 0; padding: 0; list-style: none; border-top: 1px solid #9eb4c4; }
.solution-project-highlights li { min-height: 112px; padding: 22px 0; display: grid; grid-template-columns: 42px 1fr; gap: 20px; border-bottom: 1px solid #c6d6e2; }
.solution-project-highlights span { color: #2878ff; font: 700 10px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.solution-project-highlights p { color: #365269; font-size: 14px; line-height: 1.75; }

.solution-outcome-statement {
  min-height: 330px;
  padding: clamp(34px, 4vw, 58px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at 82% 18%, rgba(61, 139, 255, .28), transparent 30%),
    linear-gradient(135deg, #0a2442, #071321 66%);
  border: 1px solid rgba(105, 189, 255, .22);
  border-radius: 12px;
}
.solution-outcome-statement small { color: #73dcff; font-size: 10px; font-weight: 760; letter-spacing: .14em; }
.solution-outcome-statement strong { max-width: 700px; color: #fff; font-size: clamp(25px, 2.2vw, 38px); line-height: 1.4; letter-spacing: -.025em; }
.solution-outcome-statement span { color: rgba(255,255,255,.48); font-size: 10px; letter-spacing: .12em; }

@media (max-width: 1100px) {
  .solution-catalog-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .solution-catalog-group > header { grid-template-columns: 76px 1fr; }
  .solution-catalog-group > header p { grid-column: 2; justify-self: start; }
  .solution-project-proof-layout { grid-template-columns: 1fr; }
}

/* V0.22 — eight technology capabilities share one quiet editorial system. */
.home-technology-heading > div > small {
  display: block;
  width: fit-content;
  margin-top: 13px;
  color: #8bdfff;
  font-size: clamp(11px, .82vw, 13px);
  font-weight: 620;
  line-height: 1.4;
  letter-spacing: .04em;
}

.home-solutions-intro {
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Keep the concise Chinese solution proposition as one complete reading unit
   on desktop canvases. The solution heading gives its right-hand statement
   enough real width instead of forcing an editorial line break. */
@media (min-width: 821px) {
  body:not(.locale-en)[data-page="home"] .home-solutions-intro {
    max-width: none;
    white-space: nowrap;
  }
}

@media (min-width: 1101px) {
  body:not(.locale-en)[data-page="home"] .home-solutions-section .home-page-heading {
    grid-template-columns: minmax(280px, .55fr) minmax(650px, 1.45fr);
    gap: clamp(36px, 5vw, 72px);
  }

  body:not(.locale-en)[data-page="home"] .home-solutions-intro {
    font-size: clamp(13px, 1vw, 15px);
  }

  .home-matrix-section .home-page-heading {
    grid-template-columns: minmax(340px, .85fr) minmax(570px, 1fr);
    gap: clamp(36px, 5vw, 72px);
  }

  body:not(.locale-en) .home-matrix-section .home-page-heading > p,
  body:not(.locale-en) .home-technology-heading > p {
    max-width: none;
    font-size: clamp(13px, 1.04vw, 16px);
    white-space: nowrap;
  }

  .locale-en .home-technology-heading > p {
    max-width: 690px;
    white-space: normal;
  }
}

/* ==========================================================
   V0.23 — solution catalogue selection and aligned case cards
   ========================================================== */

/* The six solution categories behave as one clear horizontal selector.
   Number tokens are intentionally suppressed; the category name is the
   complete label and the current section carries the visual emphasis. */
.solution-catalog-nav {
  position: sticky;
  top: 72px;
  z-index: 20;
  padding: 7px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  background: rgba(239, 245, 250, .9);
  border-color: rgba(120, 153, 181, .38);
  border-radius: 999px;
  box-shadow: 0 14px 38px rgba(24, 58, 88, .1);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.solution-catalog-nav a {
  min-height: 48px;
  padding: 0 18px;
  justify-content: center;
  gap: 0;
  color: #36546d;
  background: transparent;
  border-color: transparent;
  border-radius: 999px;
  box-shadow: none;
  transition:
    color .24s ease,
    background .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    transform .24s var(--ease);
}

.solution-catalog-nav a > span { display: none; }

.solution-catalog-nav a > b {
  color: inherit;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 720;
  line-height: 1;
  white-space: nowrap;
  text-wrap: nowrap;
}

.solution-catalog-nav a:hover,
.solution-catalog-nav a:focus-visible {
  color: #0f56bd;
  background: rgba(255, 255, 255, .96);
  border-color: rgba(40, 120, 255, .28);
  box-shadow: 0 8px 20px rgba(33, 81, 126, .1);
  transform: translateY(-1px);
}

.solution-catalog-nav a.active,
.solution-catalog-nav a[aria-current="true"] {
  color: #fff;
  background: linear-gradient(135deg, #245fd4 0%, #347ff4 58%, #49a6ff 100%);
  border-color: rgba(38, 109, 226, .72);
  box-shadow: 0 10px 24px rgba(31, 101, 218, .26), inset 0 1px rgba(255, 255, 255, .22);
  transform: none;
}

.solution-catalog-nav a:focus-visible {
  outline: 2px solid #2878ff;
  outline-offset: 3px;
}

/* Category headings no longer repeat "01 / 项目管理" before the title. */
.solution-catalog-group {
  scroll-margin-top: 150px;
}

.solution-catalog-group > header {
  grid-template-columns: minmax(270px, .64fr) minmax(0, 1.36fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: end;
}

.solution-catalog-group > header > span { display: none; }
.solution-catalog-group > header p {
  grid-column: auto;
  justify-self: end;
}

/* Preserve the light catalogue surface while making hover/focus feel like
   a positive selection: a restrained lift and 1.2% scale, never a shrink. */
.solution-list-card {
  transform-origin: center;
  will-change: transform;
}

.solution-list-card:hover,
.solution-list-card:focus-visible {
  z-index: 3;
  color: #10263a;
  background: #fff;
  transform: translateY(-3px) scale(1.012);
  border-color: rgba(40, 120, 255, .72);
  box-shadow: 0 26px 64px rgba(29, 77, 120, .2), 0 0 0 1px rgba(40, 120, 255, .12);
}

.solution-list-card:hover figure img,
.solution-list-card:focus-visible figure img {
  transform: scale(1.04);
}

/* Case cards now use the same desktop rhythm as solution cards while
   retaining their dark project-library palette and uncropped imagery. */
.cases-section .case-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.cases-section .case-card,
.cases-section .case-card-project,
.cases-section .case-card-project:first-child {
  min-width: 0;
  height: 100%;
  grid-column: auto;
}

.cases-section .case-card > a,
.cases-section .case-card-project:first-child > a {
  min-height: 508px;
  height: 100%;
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  color: #fff;
  background: #091827;
  border-color: rgba(100, 181, 246, .22);
  border-radius: 12px;
  overflow: hidden;
}

.cases-section .case-card .case-card-media,
.cases-section .case-card-project:first-child > a .case-card-media {
  width: 100%;
  min-height: 0;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
}

.cases-section .case-card img,
.cases-section .case-card-project:first-child > a img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.cases-section .case-card > a > div:last-child,
.cases-section .case-card-project:first-child > a > div:last-child {
  min-height: 270px;
  padding: 24px 25px 26px;
  justify-content: flex-start;
}

.cases-section .case-card-project:first-child h3 {
  margin-top: 12px;
  font-size: clamp(21px, 1.55vw, 25px);
}

@media (max-width: 1100px) {
  .solution-catalog-nav {
    position: relative;
    top: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-radius: 18px;
  }

  .solution-catalog-group > header {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .solution-catalog-group > header p { justify-self: start; }
}

@media (min-width: 1101px) {
  /* Keep solution and case catalogues on the same desktop card rhythm.
     This final override also neutralises the older 1101–1330 two-column
     solution breakpoint that made the two libraries feel unrelated. */
  .solution-catalog-group .solution-list,
  .cases-section .case-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 26px;
  }

  .solution-catalog-group .solution-list-card,
  .cases-section .case-card > a,
  .cases-section .case-card-project:first-child > a {
    min-height: 521px;
    height: 100%;
    border-radius: 12px;
  }
}

/* V0.25 final cascade: these declarations intentionally sit after all
   historical version blocks. */
.catalog-image .progress-status-legend > span {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 9px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: initial !important;
  gap: 7px !important;
  color: #eef7ff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font: inherit !important;
  backdrop-filter: none !important;
}

@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
  body[data-page="products"] .catalog-card.reveal.visible:hover,
  body[data-page="products"] .catalog-card.reveal.visible:focus-visible,
  body[data-page="solutions"] .solution-list-card.reveal.visible:hover,
  body[data-page="solutions"] .solution-list-card.reveal.visible:focus-visible,
  body[data-page="cases"] .case-card > a:hover,
  body[data-page="cases"] .case-card > a:focus-visible {
    z-index: 4;
    translate: 0 -6px;
    transform: none !important;
  }

  body[data-page="products"] .catalog-card:hover .catalog-image img,
  body[data-page="products"] .catalog-card:focus-visible .catalog-image img,
  body[data-page="solutions"] .solution-list-card:hover figure img,
  body[data-page="solutions"] .solution-list-card:focus-visible figure img,
  body[data-page="cases"] .case-card > a:hover .case-card-media img,
  body[data-page="cases"] .case-card > a:focus-visible .case-card-media img {
    transform: scale(1.035) !important;
  }

  body[data-page="products"] .catalog-card:hover .catalog-body,
  body[data-page="products"] .catalog-card:focus-visible .catalog-body,
  body[data-page="solutions"] .solution-list-card:hover .solution-list-copy,
  body[data-page="solutions"] .solution-list-card:focus-visible .solution-list-copy,
  body[data-page="cases"] .case-card > a:hover > div:last-child,
  body[data-page="cases"] .case-card > a:focus-visible > div:last-child {
    transform: scale(1.008) !important;
  }
}

@media (min-width: 1101px) {
  :is(body[data-page="products"], body[data-page="solutions"], body[data-page="cases"], body[data-page="partners"], body[data-page="about"]) .v12-page-hero.page-hero--landing {
    height: 57.2svh;
    min-height: 468px;
    max-height: 700px;
  }
}

/* V0.25.4 — the five primary landing pages use one complete viewport.
   This final declaration intentionally closes the historic hero-height
   cascade above. */
@media (min-width: 1101px) {
  :is(body[data-page="products"], body[data-page="solutions"], body[data-page="cases"], body[data-page="partners"], body[data-page="about"]) .v12-page-hero.page-hero--landing {
    height: 100vh;
    height: 100svh;
    min-height: 0;
    max-height: none;
  }
}

/* Final solution-card interaction: match the approved project-card motion.
   Elevation, timing, media/copy advance, focus ring, border and shadow all
   share one grammar; solution-only line and arrow animations stay quiet. */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
  body[data-page="solutions"] .solution-list-card.reveal.visible {
    transition:
      opacity .7s ease var(--delay, 0ms),
      transform .7s cubic-bezier(.2, .7, .2, 1) var(--delay, 0ms),
      translate .32s var(--ease),
      border-color .32s ease,
      box-shadow .32s ease,
      background-color .32s ease;
    will-change: translate;
  }

  body[data-page="solutions"] .solution-list-card.reveal.visible:hover,
  body[data-page="solutions"] .solution-list-card.reveal.visible:focus-visible {
    z-index: 4;
    translate: 0 -6px;
    transform: none !important;
    border-color: rgba(100, 215, 255, .52);
    box-shadow: 0 28px 68px rgba(0, 0, 0, .42), 0 0 0 1px rgba(100, 215, 255, .12);
  }

  body[data-page="solutions"] .solution-list-card:focus-visible {
    outline: 2px solid var(--v007-cyan);
    outline-offset: 3px;
  }

  body[data-page="solutions"] .solution-list-card:hover figure img,
  body[data-page="solutions"] .solution-list-card:focus-visible figure img {
    transform: scale(1.035) !important;
  }

  body[data-page="solutions"] .solution-list-card:hover .solution-list-copy,
  body[data-page="solutions"] .solution-list-card:focus-visible .solution-list-copy {
    transform: scale(1.008) !important;
  }

  body[data-page="solutions"] .solution-list-card:hover::before,
  body[data-page="solutions"] .solution-list-card:focus-visible::before {
    transform: scaleX(.28);
  }

  body[data-page="solutions"] .solution-list-card:hover .solution-list-copy > b > i,
  body[data-page="solutions"] .solution-list-card:focus-visible .solution-list-copy > b > i {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="solutions"] .solution-list-card.reveal.visible,
  body[data-page="solutions"] .solution-list-card.reveal.visible:hover,
  body[data-page="solutions"] .solution-list-card.reveal.visible:focus-visible,
  body[data-page="cases"] .case-card > a:hover,
  body[data-page="cases"] .case-card > a:focus-visible {
    translate: none !important;
    transform: none !important;
    transition: none !important;
  }

  body[data-page="solutions"] .solution-list-card:hover figure img,
  body[data-page="solutions"] .solution-list-card:focus-visible figure img,
  body[data-page="solutions"] .solution-list-card:hover .solution-list-copy,
  body[data-page="solutions"] .solution-list-card:focus-visible .solution-list-copy,
  body[data-page="cases"] .case-card > a:hover .case-card-media img,
  body[data-page="cases"] .case-card > a:focus-visible .case-card-media img,
  body[data-page="cases"] .case-card > a:hover > div:last-child,
  body[data-page="cases"] .case-card > a:focus-visible > div:last-child {
    transform: none !important;
    transition: none !important;
  }
}

/* Project library category selector — the same calm, pill-shaped interaction
   language as the solution catalogue, sized for all eleven case groups. */
body[data-page="cases"] .cases-section .case-toolbar {
  margin-bottom: 44px;
  padding-top: 0;
  align-items: center;
  gap: 18px;
  border-top: 0;
}

body[data-page="cases"] #caseFilters {
  min-width: 0;
  padding: 7px;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 7px;
  background: rgba(239, 245, 250, .92);
  border: 1px solid rgba(120, 153, 181, .38);
  border-radius: 999px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .2);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body[data-page="cases"] #caseFilters .filter-btn {
  min-width: 0;
  min-height: 48px;
  padding: 0 9px;
  flex: 1 1 0;
  color: #36546d;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: none;
  font-size: clamp(11px, .83vw, 14px);
  font-weight: 720;
  line-height: 1;
  white-space: nowrap;
  text-wrap: nowrap;
  transition:
    color .24s ease,
    background .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    transform .24s var(--ease);
}

body[data-page="cases"] #caseFilters .filter-btn:hover,
body[data-page="cases"] #caseFilters .filter-btn:focus-visible {
  color: #0f56bd;
  background: rgba(255, 255, 255, .98);
  border-color: rgba(40, 120, 255, .28);
  box-shadow: 0 8px 20px rgba(33, 81, 126, .1);
  transform: translateY(-1px);
}

body[data-page="cases"] #caseFilters .filter-btn.active,
body[data-page="cases"] #caseFilters .filter-btn[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(135deg, #245fd4 0%, #347ff4 58%, #49a6ff 100%);
  border-color: rgba(38, 109, 226, .72);
  box-shadow: 0 10px 24px rgba(31, 101, 218, .26), inset 0 1px rgba(255, 255, 255, .22);
  transform: none;
}

body[data-page="cases"] #caseFilters .filter-btn:focus-visible {
  outline: 2px solid #5bb5ff;
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  body[data-page="cases"] .cases-section .case-toolbar {
    align-items: stretch;
  }

  body[data-page="cases"] #caseFilters {
    width: 100%;
    flex-wrap: wrap;
    border-radius: 18px;
  }

  body[data-page="cases"] #caseFilters .filter-btn {
    flex: 1 1 calc(25% - 7px);
    padding-inline: 14px;
  }
}

@media (min-width: 1101px) {
  body[data-page="cases"].locale-en #caseFilters {
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: thin;
  }

  body[data-page="cases"].locale-en #caseFilters .filter-btn {
    min-width: max-content;
    padding-inline: 18px;
    flex: 0 0 auto;
  }
}

@media (max-width: 620px) {
  body[data-page="cases"].locale-en .cases-section,
  body[data-page="cases"].locale-en .cases-section .container,
  body[data-page="cases"].locale-en .cases-section .case-toolbar,
  body[data-page="cases"].locale-en #caseFilters {
    min-width: 0;
    max-width: 100%;
  }

  body[data-page="cases"].locale-en #caseFilters {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
  }

  body[data-page="cases"].locale-en #caseFilters .filter-btn {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 8px 10px;
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: anywhere;
    line-height: 1.25;
  }
}

/* Home / partners: each row contains two identical sets, giving every
   row an uninterrupted loop without placeholder cells. */
.home-partners-section {
  color: #fff;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  border-top: 1px solid rgba(118, 190, 241, .14);
  background:
    radial-gradient(ellipse at 18% 20%, rgba(40, 120, 255, .17), transparent 36%),
    radial-gradient(ellipse at 84% 78%, rgba(89, 73, 210, .14), transparent 34%),
    linear-gradient(180deg, #0b0d28 0%, #061221 58%, #010308 100%);
}

.home-partners-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .18;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(116, 191, 244, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 191, 244, .12) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}

.home-partners-heading {
  position: relative;
  width: min(var(--container), calc(100% - 80px));
}

.home-partners-heading .home-page-heading { margin-bottom: 0; }
.home-partners-heading .home-page-heading > p {
  justify-self: end;
  margin-left: auto;
  text-align: right;
}

.home-partners-viewport {
  width: 100%;
  margin-top: clamp(42px, 6vh, 66px);
  overflow: hidden;
}

.home-partners-row { width: 100%; overflow: hidden; }
.home-partners-row + .home-partners-row { margin-top: 18px; }

.home-partners-track {
  width: max-content;
  display: flex;
  gap: 24px;
  will-change: transform;
  animation: homePartnersMarquee var(--marquee-duration, 84s) linear infinite;
}

.home-partners-set {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
  list-style: none;
}

.home-partners-item {
  flex: 0 0 auto;
  width: auto;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.home-partners-item img {
  width: auto;
  height: 70px;
  max-width: none;
  display: block;
  object-fit: contain;
  border-radius: 0;
}

@keyframes homePartnersMarquee {
  to { transform: translate3d(calc(-50% - 12px), 0, 0); }
}

@media (max-width: 1100px) {
  .home-partners-heading { width: calc(100% - 32px); }
  .home-partners-heading .home-page-heading > p { margin-left: 0; text-align: left; }
}



/* Contact — one direct path from context to conversation. */
.contact-section.contact-connect-section {
  position: relative;
  padding: clamp(78px, 8vw, 128px) 0;
  background:
    linear-gradient(132deg, #dce7ef 0%, #f7fafc 48%, #e8f0f6 100%);
  overflow: hidden;
}

.contact-connect-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .28;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(20, 121, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 121, 255, .09) 1px, transparent 1px);
  background-size: 84px 84px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 72%);
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.contact-connect-section > .container { position: relative; }

.contact-connect-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  overflow: hidden;
  background: #f8fbfd;
  border: 1px solid rgba(20, 62, 96, .16);
  border-radius: 8px;
  box-shadow: 0 36px 86px rgba(5, 24, 42, .16);
}

.contact-connect-intro {
  position: relative;
  min-height: 560px;
  padding: clamp(42px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  color: #fff;
  background:
    radial-gradient(circle at 82% 16%, rgba(100, 215, 255, .2), transparent 30%),
    linear-gradient(145deg, #06111f 0%, #0a2136 62%, #0d2c45 100%);
  overflow: hidden;
}

.contact-connect-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(100, 215, 255, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 215, 255, .18) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(145deg, #000, transparent 68%);
  mask-image: linear-gradient(145deg, #000, transparent 68%);
}

.contact-connect-intro::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #64d7ff 36%, #1479ff 68%, transparent);
  box-shadow: 0 0 30px rgba(100, 215, 255, .42);
}

.contact-connect-intro > * { position: relative; z-index: 1; }

.contact-connect-kicker,
.contact-connect-card > header > span {
  color: #64d7ff;
  font: 750 10px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .15em;
}

.contact-connect-intro h2 {
  max-width: 500px;
  margin-top: auto;
  font-size: clamp(38px, 4.1vw, 62px);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.contact-connect-intro > p {
  max-width: 510px;
  margin-top: 24px;
  color: rgba(232, 244, 255, .66);
  font-size: 14px;
  line-height: 1.9;
}

.contact-connect-coordinate {
  margin-top: 42px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  color: rgba(216, 239, 255, .48);
  font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .08em;
}

.contact-connect-coordinate i {
  height: 1px;
  background: linear-gradient(90deg, rgba(100, 215, 255, .12), rgba(100, 215, 255, .76), rgba(100, 215, 255, .12));
}

.contact-connect-card {
  min-width: 0;
  padding: clamp(38px, 5vw, 68px);
  color: #102b46;
  background: rgba(248, 251, 253, .98);
}

.contact-connect-card > header h3 {
  margin-top: 18px;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.14;
  letter-spacing: -.03em;
}

.contact-connect-card > header p {
  max-width: 560px;
  margin-top: 16px;
  color: #60758a;
  font-size: 13px;
  line-height: 1.8;
}

.contact-channel-list {
  margin-top: 38px;
  display: block;
  border-top: 1px solid rgba(20, 62, 96, .16);
  font-style: normal;
}

.contact-channel-list > a,
.contact-channel-list > div {
  min-height: 82px;
  padding: 17px 0;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 16px;
  color: #102b46;
  border-bottom: 1px solid rgba(20, 62, 96, .16);
}

.contact-channel-list > div { grid-template-columns: 78px minmax(0, 1fr); }

.contact-channel-list small {
  color: #71869a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.contact-channel-list strong {
  min-width: 0;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.contact-channel-list a i {
  color: #1479ff;
  font-style: normal;
  font-size: 18px;
  transition: transform .22s ease;
}

.contact-channel-list a {
  transition: color .22s ease, padding .22s ease, background .22s ease;
}

.contact-channel-list a:hover {
  padding-right: 12px;
  padding-left: 12px;
  color: #1479ff;
  background: rgba(20, 121, 255, .055);
}

.contact-channel-list a:hover i { transform: translateX(4px); }

.contact-channel-list a:focus-visible,
.contact-feishu-cta:focus-visible {
  outline: 2px solid #1479ff;
  outline-offset: 4px;
}

.contact-feishu-cta {
  min-height: 84px;
  margin-top: 34px;
  padding: 17px 21px 17px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #fff;
  background: linear-gradient(115deg, #0a5ee8, #1479ff 56%, #1a8fff);
  border: 1px solid rgba(2, 58, 148, .35);
  border-radius: 6px;
  box-shadow: 0 18px 38px rgba(20, 121, 255, .22);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.contact-feishu-cta span { display: grid; gap: 5px; }

.contact-feishu-cta small {
  color: rgba(255, 255, 255, .62);
  font: 720 9px/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .12em;
}

.contact-feishu-cta strong { font-size: 16px; }

.contact-feishu-cta > i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-style: normal;
  font-size: 22px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
}

.contact-feishu-cta:hover {
  color: #fff;
  background: linear-gradient(115deg, #0754d1, #0d70f4 56%, #1888f4);
  box-shadow: 0 24px 48px rgba(20, 121, 255, .3);
  transform: translateY(-3px);
}

.contact-feishu-note {
  margin-top: 14px;
  color: #7d8e9d;
  font-size: 10px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .contact-connect-grid { grid-template-columns: 1fr; }
  .contact-connect-intro { min-height: 400px; }
  .contact-connect-intro::after {
    top: auto;
    bottom: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, transparent, #64d7ff 36%, #1479ff 68%, transparent);
  }
}

@media (max-width: 600px) {
  .contact-section.contact-connect-section { padding: 58px 0; }
  .contact-connect-intro,
  .contact-connect-card { padding: 32px 24px; }
  .contact-connect-intro { min-height: 360px; }
  .contact-connect-intro h2 { font-size: clamp(34px, 11vw, 46px); }
  .contact-connect-coordinate { margin-top: 32px; }
  .contact-channel-list > a,
  .contact-channel-list > div {
    min-height: 0;
    grid-template-columns: 1fr 28px;
    gap: 7px 12px;
  }
  .contact-channel-list > div { grid-template-columns: 1fr; }
  .contact-channel-list small { grid-column: 1 / -1; }
  .contact-feishu-cta { min-height: 76px; padding: 15px 16px 15px 19px; }
}

/* ==========================================================
   V0.25.11 — Nebula Partner Program, structured for partnership fit
   The page uses a single deep-space collaboration field: platform blue,
   signal cyan and blue-violet only. Existing partner styles remain isolated.
   ========================================================== */

.star-v2-shell {
  --star-v2-bg: #020712;
  --star-v2-panel: #07162b;
  --star-v2-panel-2: #0a2140;
  --star-v2-blue: #2878ff;
  --star-v2-violet: #7771ff;
  --star-v2-cyan: #64d7ff;
  --star-v2-line: rgba(121, 188, 246, .2);
  --star-v2-copy: rgba(220, 236, 250, .66);
  color: #f5f9ff;
  background: var(--star-v2-bg);
  overflow: hidden;
}

.star-v2-shell .section {
  position: relative;
  padding: clamp(94px, 8.4vw, 136px) 0;
}

.star-v2-shell .container { position: relative; z-index: 2; }

.star-v2-section-head {
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr);
  gap: clamp(52px, 8vw, 126px);
  align-items: end;
}

.star-v2-section-head > div > span {
  display: block;
  color: var(--star-v2-cyan);
  font: 760 10px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .16em;
}

.star-v2-section-head h2 {
  max-width: 720px;
  margin-top: 19px;
  color: #f7fbff;
  font-size: clamp(40px, 4.25vw, 66px);
  font-weight: 730;
  line-height: 1.06;
  letter-spacing: -.048em;
  text-wrap: balance;
}

.star-v2-section-head > p {
  max-width: 690px;
  margin: 0;
  color: var(--star-v2-copy);
  font-size: clamp(14px, 1.02vw, 16px);
  line-height: 1.9;
}

.locale-en .star-v2-section-head h2 {
  font-size: clamp(38px, 3.75vw, 60px);
  letter-spacing: -.036em;
}

/* Why join: three connected capability cells, not an abstract benefits list. */
.star-v2-why {
  border-top: 1px solid rgba(120, 190, 246, .12);
  background:
    radial-gradient(ellipse at 14% 12%, rgba(40, 120, 255, .17), transparent 32%),
    radial-gradient(ellipse at 88% 74%, rgba(119, 113, 255, .12), transparent 34%),
    linear-gradient(150deg, #020712 0%, #061327 54%, #070b20 100%);
}

.star-v2-why::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(118, 190, 244, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 190, 244, .1) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 72%);
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.star-v2-value-grid {
  position: relative;
  margin-top: 62px;
  padding-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.star-v2-value-grid::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 8%;
  left: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(100, 215, 255, .72) 18%, rgba(119, 113, 255, .7) 82%, transparent);
  box-shadow: 0 0 18px rgba(76, 154, 255, .28);
}

.star-v2-value-card {
  position: relative;
  min-width: 0;
  min-height: 390px;
  padding: 30px clamp(25px, 2.5vw, 36px) 36px;
  background: linear-gradient(180deg, rgba(14, 45, 83, .76), rgba(5, 19, 39, .88));
  border: 1px solid rgba(119, 190, 247, .24);
  border-radius: 12px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 24px 65px rgba(0, 0, 0, .18);
  overflow: hidden;
  transition: transform .32s var(--ease), border-color .32s ease, background .32s ease;
}

.star-v2-value-card::before {
  content: "";
  position: absolute;
  top: -39px;
  left: 50%;
  width: 9px;
  height: 9px;
  background: var(--star-v2-cyan);
  border: 3px solid #07172d;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(100, 215, 255, .7), 0 0 18px rgba(100, 215, 255, .9);
  transform: translateX(-50%);
}

.star-v2-value-card::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -90px;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(105, 159, 255, .1);
  border-radius: 50%;
}

.star-v2-value-card:hover {
  transform: translateY(-5px);
  border-color: rgba(100, 215, 255, .48);
  background: linear-gradient(180deg, rgba(18, 55, 101, .82), rgba(6, 22, 45, .94));
}

.star-v2-value-mark {
  position: relative;
  height: 104px;
  margin-bottom: 30px;
  overflow: hidden;
  border-bottom: 1px solid rgba(121, 188, 246, .14);
}

.star-v2-value-mark::before,
.star-v2-value-mark::after { content: ""; position: absolute; }

.star-v2-value-mark::before {
  top: 18px;
  right: 8%;
  bottom: 24px;
  left: 8%;
  border: 1px solid rgba(100, 215, 255, .34);
  transform: skewX(-13deg);
  box-shadow: inset 0 0 24px rgba(40, 120, 255, .09);
}

.star-v2-value-mark::after {
  top: 38px;
  left: 50%;
  width: 72px;
  height: 24px;
  background: linear-gradient(90deg, rgba(40, 120, 255, .08), rgba(100, 215, 255, .38), rgba(119, 113, 255, .09));
  border: 1px solid rgba(118, 196, 255, .34);
  transform: translateX(-50%);
}

.star-v2-value-mark i {
  position: absolute;
  z-index: 2;
  width: 8px;
  height: 8px;
  background: var(--star-v2-cyan);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(100, 215, 255, .84);
}

.star-v2-value-mark i:nth-child(1) { top: 18px; left: 8%; }
.star-v2-value-mark i:nth-child(2) { top: 47px; left: calc(50% - 4px); background: #8a83ff; box-shadow: 0 0 14px rgba(138, 131, 255, .84); }
.star-v2-value-mark i:nth-child(3) { right: 8%; bottom: 23px; }
.star-v2-value-card[data-star-v2-value="product"] .star-v2-value-mark::before { inset: 10px 30% 18px; border-radius: 50%; transform: none; box-shadow: 0 0 0 16px rgba(40, 120, 255, .055), 0 0 0 32px rgba(119, 113, 255, .035); }
.star-v2-value-card[data-star-v2-value="product"] .star-v2-value-mark::after { top: 36px; width: 30px; height: 30px; background: rgba(100, 215, 255, .3); border-radius: 50%; }
.star-v2-value-card[data-star-v2-value="delivery"] .star-v2-value-mark::before { top: 49px; right: 5%; bottom: auto; left: 5%; border: 0; border-top: 1px solid rgba(100, 215, 255, .46); transform: none; }
.star-v2-value-card[data-star-v2-value="delivery"] .star-v2-value-mark::after { top: 17px; width: 88px; height: 64px; background: transparent; border-color: rgba(129, 121, 255, .34); transform: translateX(-50%) rotate(45deg); }
.star-v2-value-card > span { color: #7bdfff; font: 730 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; }
.star-v2-value-card h3 { margin-top: 17px; color: #fff; font-size: clamp(25px, 2vw, 32px); line-height: 1.25; }
.star-v2-value-card p { margin-top: 16px; color: rgba(220, 236, 250, .62); font-size: 13px; line-height: 1.82; }

/* Collaboration paths: an engineering workbench with four explicit scopes. */
.star-v2-directions {
  background:
    radial-gradient(ellipse at 0% 48%, rgba(40, 120, 255, .15), transparent 30%),
    linear-gradient(135deg, #040b18 0%, #08182e 58%, #0c1230 100%);
  border-top: 1px solid rgba(121, 188, 246, .12);
  border-bottom: 1px solid rgba(121, 188, 246, .12);
}

.star-v2-direction-layout {
  display: grid;
  grid-template-columns: minmax(340px, .68fr) minmax(660px, 1.32fr);
  gap: clamp(58px, 8vw, 124px);
  align-items: start;
}

.star-v2-direction-intro .star-v2-section-head { position: sticky; top: 112px; display: block; }
.star-v2-direction-intro .star-v2-section-head > p { margin-top: 24px; }

.star-v2-direction-intro > a {
  width: fit-content;
  min-height: 50px;
  margin-top: 34px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 36px;
  color: #fff;
  background: var(--star-v2-blue);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 6px;
  box-shadow: 0 16px 34px rgba(40, 120, 255, .22);
  text-decoration: none;
  font-size: 12px;
  font-weight: 730;
  transition: transform .28s var(--ease), background .28s ease;
}

.star-v2-direction-intro > a i { color: #bcefff; font-style: normal; }
.star-v2-direction-intro > a:hover,
.star-v2-direction-intro > a:focus-visible { background: #438cff; transform: translateY(-3px); }
.star-v2-direction-intro > a:focus-visible,
.star-v2-cta-card > a:focus-visible { outline: 2px solid #8de7ff; outline-offset: 4px; }

.star-v2-direction-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--star-v2-line);
  border-left: 1px solid var(--star-v2-line);
}

.star-v2-direction-card {
  min-width: 0;
  min-height: 310px;
  padding: clamp(28px, 3vw, 42px);
  display: flex;
  flex-direction: column;
  background: rgba(5, 20, 42, .58);
  border-right: 1px solid var(--star-v2-line);
  border-bottom: 1px solid var(--star-v2-line);
  transition: background .28s ease;
}

.star-v2-direction-card:hover { background: rgba(12, 39, 76, .76); }
.star-v2-direction-card > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.star-v2-direction-card > div span { color: var(--star-v2-cyan); font: 740 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .15em; }
.star-v2-direction-card > div i { width: 7px; height: 7px; background: #827cff; border-radius: 50%; box-shadow: 0 0 16px rgba(130, 124, 255, .8); }
.star-v2-direction-card h3 { margin-top: 38px; color: #fff; font-size: clamp(23px, 1.8vw, 29px); line-height: 1.25; }
.star-v2-direction-card p { margin-top: 14px; color: rgba(219, 235, 249, .6); font-size: 12px; line-height: 1.78; }
.star-v2-direction-card ul { margin: auto 0 0; padding: 24px 0 0; display: flex; flex-wrap: wrap; gap: 7px; list-style: none; }
.star-v2-direction-card li { padding: 6px 9px; color: #9fe8ff; background: rgba(100, 215, 255, .055); border: 1px solid rgba(100, 215, 255, .2); border-radius: 999px; font-size: 9px; }

/* Support and enablement: four bounded categories, no exclusive promises. */
.star-v2-enablement {
  background:
    radial-gradient(ellipse at 82% 14%, rgba(119, 113, 255, .15), transparent 31%),
    radial-gradient(ellipse at 16% 86%, rgba(40, 120, 255, .13), transparent 34%),
    #030a17;
}

.star-v2-enablement-grid {
  margin-top: 58px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.star-v2-enablement-card {
  position: relative;
  min-width: 0;
  min-height: 410px;
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 90% 4%, rgba(100, 215, 255, .1), transparent 28%),
    linear-gradient(155deg, rgba(10, 37, 72, .82), rgba(4, 17, 35, .94));
  border: 1px solid rgba(118, 189, 246, .22);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s ease;
}

.star-v2-enablement-card::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 160px;
  height: 160px;
  border: 1px solid rgba(121, 117, 255, .12);
  border-radius: 50%;
}

.star-v2-enablement-card:hover { transform: translateY(-5px); border-color: rgba(100, 215, 255, .43); }
.star-v2-enablement-card header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.star-v2-enablement-card header span { color: var(--star-v2-cyan); font: 740 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; }
.star-v2-enablement-card header b { color: rgba(163, 194, 222, .3); font: 500 28px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.star-v2-enablement-card h3 { margin-top: 48px; color: #fff; font-size: 24px; line-height: 1.3; }
.star-v2-enablement-card > p { margin-top: 15px; color: rgba(220, 236, 250, .57); font-size: 12px; line-height: 1.78; }
.star-v2-enablement-card ul { margin: auto 0 0; padding: 25px 0 0; list-style: none; border-top: 1px solid rgba(121, 188, 246, .15); }
.star-v2-enablement-card li { padding: 6px 0; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; align-items: center; color: rgba(227, 239, 250, .76); font-size: 10px; }
.star-v2-enablement-card li i { width: 5px; height: 5px; background: linear-gradient(135deg, var(--star-v2-cyan), var(--star-v2-violet)); border-radius: 50%; box-shadow: 0 0 8px rgba(100, 215, 255, .55); }

/* Partner profiles: image evidence paired with a precise capability profile. */
.star-v2-types {
  background:
    radial-gradient(ellipse at 92% 48%, rgba(40, 120, 255, .15), transparent 32%),
    linear-gradient(145deg, #061327 0%, #040b18 58%, #080b20 100%);
  border-top: 1px solid rgba(121, 188, 246, .12);
  border-bottom: 1px solid rgba(121, 188, 246, .12);
}

.star-v2-type-grid {
  margin-top: 58px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.star-v2-type-card {
  min-width: 0;
  min-height: 318px;
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.2fr);
  background: rgba(5, 18, 38, .78);
  border: 1px solid rgba(119, 189, 246, .22);
  border-radius: 12px;
  box-shadow: 0 22px 58px rgba(0, 0, 0, .18);
  overflow: hidden;
  transition: border-color .3s ease, transform .3s var(--ease);
}

.star-v2-type-card:hover { border-color: rgba(100, 215, 255, .45); transform: translateY(-4px); }
.star-v2-type-card figure { position: relative; min-width: 0; min-height: 318px; margin: 0; overflow: hidden; background: #07172e; }
.star-v2-type-card figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 11, 24, .02) 42%, rgba(3, 11, 24, .78)); pointer-events: none; }
.star-v2-type-card figure img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .6s var(--ease); }
.star-v2-type-card:hover figure img { transform: scale(1.04); }
.star-v2-type-card figure > span { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, transparent 55%, rgba(4, 15, 32, .5)); pointer-events: none; }
.star-v2-type-card figure small { position: absolute; z-index: 2; right: 20px; bottom: 18px; left: 20px; color: #9ceaff; font: 740 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; }
.star-v2-type-card > div { padding: clamp(30px, 3.2vw, 46px); display: flex; flex-direction: column; justify-content: center; }
.star-v2-type-card h3 { color: #fff; font-size: clamp(23px, 1.75vw, 29px); line-height: 1.3; }
.star-v2-type-card p { margin-top: 17px; color: rgba(220, 236, 250, .6); font-size: 12px; line-height: 1.82; }

/* Process: the only numbered area is a real five-step sequence. */
.star-v2-process {
  background:
    radial-gradient(ellipse at 12% 30%, rgba(119, 113, 255, .11), transparent 30%),
    linear-gradient(180deg, #030916 0%, #050e1d 56%, #020712 100%);
}

.star-v2-process-list {
  position: relative;
  margin: 62px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
}

.star-v2-process-list::before {
  content: "";
  position: absolute;
  top: 58px;
  right: 5%;
  left: 5%;
  height: 1px;
  background: linear-gradient(90deg, var(--star-v2-cyan), rgba(40, 120, 255, .58), var(--star-v2-violet));
  box-shadow: 0 0 18px rgba(67, 143, 255, .24);
}

.star-v2-process-list li {
  position: relative;
  min-width: 0;
  min-height: 300px;
  padding: 28px clamp(18px, 2vw, 28px) 34px;
  border-bottom: 1px solid rgba(121, 188, 246, .16);
}

.star-v2-process-list li + li { border-left: 1px solid rgba(121, 188, 246, .13); }
.star-v2-process-list li > div { min-height: 64px; display: flex; align-items: flex-start; }
.star-v2-process-list li > div span { color: #75dcff; font: 660 24px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.star-v2-process-list li > div i { position: absolute; z-index: 2; top: 53px; left: 25px; width: 11px; height: 11px; background: #08172d; border: 2px solid var(--star-v2-cyan); border-radius: 50%; box-shadow: 0 0 14px rgba(100, 215, 255, .72); }
.star-v2-process-list li:nth-child(n+4) > div i { border-color: #8580ff; box-shadow: 0 0 14px rgba(133, 128, 255, .68); }
.star-v2-process-list h3 { margin-top: 38px; color: #fff; font-size: 22px; line-height: 1.32; }
.star-v2-process-list p { margin-top: 14px; color: rgba(218, 234, 248, .56); font-size: 11px; line-height: 1.82; }

/* Final conversion: one clear action and a compact qualification cue. */
.star-v2-cta { padding-top: 0 !important; background: #020712; }

.star-v2-cta-card {
  position: relative;
  min-height: 430px;
  padding: clamp(52px, 6vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
  background:
    radial-gradient(circle at 82% 18%, rgba(100, 215, 255, .18), transparent 27%),
    radial-gradient(circle at 92% 92%, rgba(119, 113, 255, .3), transparent 34%),
    linear-gradient(125deg, #0a2b57 0%, #0a1834 58%, #191642 100%);
  border: 1px solid rgba(117, 197, 255, .36);
  border-radius: 18px;
  box-shadow: 0 42px 110px rgba(0, 0, 0, .34);
  overflow: hidden;
}

.star-v2-cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(155, 211, 255, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 211, 255, .1) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 72%);
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.star-v2-cta-card > div:first-child { position: relative; z-index: 2; max-width: 850px; }
.star-v2-cta-card > div:first-child > span { color: #75ddff; font: 760 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }
.star-v2-cta-card h2 { max-width: 820px; margin-top: 20px; color: #fff; font-size: clamp(42px, 4.75vw, 72px); line-height: 1.04; letter-spacing: -.048em; text-wrap: balance; }
.locale-en .star-v2-cta-card h2 { font-size: clamp(38px, 4vw, 62px); letter-spacing: -.035em; }
.star-v2-cta-card p { max-width: 700px; margin-top: 22px; color: rgba(229, 240, 251, .68); font-size: 14px; line-height: 1.82; }
.star-v2-cta-card ul { margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; }
.star-v2-cta-card li { display: flex; align-items: center; gap: 9px; color: rgba(239, 247, 255, .82); font-size: 11px; }
.star-v2-cta-card li::before { content: ""; width: 6px; height: 6px; background: linear-gradient(135deg, var(--star-v2-cyan), var(--star-v2-violet)); border-radius: 50%; box-shadow: 0 0 9px rgba(100, 215, 255, .6); }
.star-v2-cta-card > a { position: relative; z-index: 3; min-width: 210px; min-height: 60px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: space-between; gap: 34px; color: #071426; background: #f8fbff; border: 1px solid rgba(255, 255, 255, .8); border-radius: 7px; box-shadow: 0 18px 42px rgba(0, 0, 0, .22); text-decoration: none; font-size: 13px; font-weight: 760; transition: transform .3s var(--ease), box-shadow .3s ease; }
.star-v2-cta-card > a i { color: var(--star-v2-blue); font-size: 18px; font-style: normal; }
.star-v2-cta-card > a:hover { transform: translateY(-4px); box-shadow: 0 24px 52px rgba(0, 0, 0, .3); }
.star-v2-cta-visual { position: absolute; right: -190px; bottom: -250px; width: 720px; height: 720px; pointer-events: none; }
.star-v2-cta-visual i { position: absolute; inset: 8%; border: 1px solid rgba(111, 208, 255, .18); border-radius: 50%; }
.star-v2-cta-visual i:nth-child(2) { inset: 23%; border-color: rgba(132, 125, 255, .25); }
.star-v2-cta-visual i:nth-child(3) { inset: 38%; border-color: rgba(111, 208, 255, .3); background: rgba(53, 129, 255, .065); }
.star-v2-cta-visual b { position: absolute; inset: 47%; background: #6cceff; border-radius: 50%; box-shadow: 0 0 46px rgba(100, 215, 255, .72); }

@media (max-width: 1200px) {
  .star-v2-section-head { grid-template-columns: minmax(320px, .8fr) minmax(420px, 1.2fr); gap: 54px; }
  .star-v2-direction-layout { grid-template-columns: minmax(300px, .62fr) minmax(560px, 1.38fr); gap: 52px; }
  .star-v2-enablement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .star-v2-type-card { grid-template-columns: minmax(190px, .72fr) minmax(250px, 1.28fr); }
  .star-v2-process-list h3 { font-size: 19px; }
}

@media (max-width: 960px) {
  .star-v2-section-head { grid-template-columns: 1fr; gap: 22px; }
  .star-v2-section-head > p { max-width: 760px; }
  .star-v2-value-grid { grid-template-columns: 1fr; gap: 18px; padding-top: 0; }
  .star-v2-value-grid::before,
  .star-v2-value-card::before { display: none; }
  .star-v2-value-card { min-height: 0; }
  .star-v2-direction-layout { grid-template-columns: 1fr; }
  .star-v2-direction-intro .star-v2-section-head { position: static; display: grid; }
  .star-v2-type-grid { grid-template-columns: 1fr; }
  .star-v2-process-list { grid-template-columns: 1fr; padding-left: 38px; }
  .star-v2-process-list::before { top: 6px; right: auto; bottom: 6px; left: 5px; width: 1px; height: auto; }
  .star-v2-process-list li { min-height: 0; padding: 0 0 42px 28px; border: 0; }
  .star-v2-process-list li + li { border-left: 0; }
  .star-v2-process-list li > div { min-height: 28px; }
  .star-v2-process-list li > div i,
  .star-v2-process-list li:nth-child(n+4) > div i { top: 4px; left: -37px; }
  .star-v2-process-list h3 { margin-top: 16px; font-size: 23px; }
  .star-v2-process-list p { max-width: 620px; }
  .star-v2-cta-card { grid-template-columns: 1fr; }
  .star-v2-cta-card > a { width: fit-content; }
}

@media (max-width: 700px) {
  .star-v2-shell .section { padding: 78px 0; }
  .star-v2-section-head h2,
  .locale-en .star-v2-section-head h2 { font-size: clamp(34px, 10vw, 43px); line-height: 1.08; }
  .star-v2-value-grid,
  .star-v2-enablement-grid,
  .star-v2-type-grid { margin-top: 42px; }
  .star-v2-value-card { padding: 24px 22px 28px; }
  .star-v2-direction-grid,
  .star-v2-enablement-grid { grid-template-columns: 1fr; }
  .star-v2-direction-card { min-height: 280px; padding: 28px 24px; }
  .star-v2-enablement-card { min-height: 360px; }
  .star-v2-type-card { display: block; min-height: 0; }
  .star-v2-type-card figure { min-height: 0; height: 220px; }
  .star-v2-type-card > div { padding: 28px 24px 32px; }
  .star-v2-process-list { margin-top: 44px; }
  .star-v2-cta { padding-top: 0 !important; }
  .star-v2-cta-card { min-height: 0; padding: 42px 24px 48px; border-radius: 13px; }
  .star-v2-cta-card h2,
  .locale-en .star-v2-cta-card h2 { font-size: clamp(35px, 10.5vw, 47px); }
  .star-v2-cta-card > a { width: 100%; min-width: 0; }
  .star-v2-cta-visual { right: -310px; bottom: -390px; }
}

/* ==========================================================
   V0.26 PRODUCT DETAIL SYSTEM
   Three narratives: platform architecture, business workflow,
   and creation studio. Scoped to product detail pages only.
   ========================================================== */
body[data-page="product"] {
  --product-detail-blue: #226cfe;
  --product-detail-cyan: #20c2ef;
  --product-detail-violet: #705cff;
  --product-detail-ink: #030914;
  --product-detail-panel: #071526;
  background: var(--product-detail-ink);
}

.product-detail-hero {
  position: relative;
  min-height: min(820px, 100vh);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: #020713;
}

.product-detail-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 68% 40%, rgba(32, 194, 239, .14), transparent 28%),
    linear-gradient(90deg, #020713 0%, rgba(2, 7, 19, .97) 38%, rgba(2, 7, 19, .38) 72%, rgba(2, 7, 19, .72) 100%);
}

.product-detail-hero--workflow::before {
  background:
    linear-gradient(90deg, #020713 0%, rgba(3, 9, 24, .96) 42%, rgba(8, 22, 50, .42) 75%, rgba(2, 7, 19, .68) 100%),
    radial-gradient(circle at 72% 40%, rgba(34, 108, 254, .18), transparent 34%);
}

.product-detail-hero--studio::before {
  background:
    radial-gradient(circle at 75% 36%, rgba(112, 92, 255, .18), transparent 30%),
    linear-gradient(90deg, #020713 0%, rgba(3, 9, 24, .96) 43%, rgba(4, 11, 30, .5) 76%, rgba(2, 7, 19, .72) 100%);
}

.product-detail-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.product-detail-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.88) contrast(1.06) brightness(.68);
  transform: scale(1.02);
}

.product-detail-hero-media span {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 7, 19, .08), rgba(2, 7, 19, .38));
}

.product-detail-hero-layout {
  width: 100%;
  min-height: inherit;
  padding-top: clamp(118px, 11vh, 164px);
  padding-bottom: clamp(82px, 9vh, 126px);
  display: grid;
  grid-template-columns: minmax(0, 940px);
  gap: 64px;
  align-items: center;
}

.product-detail-hero-copy {
  max-width: 900px;
}

.product-detail-hero h1 {
  max-width: 880px;
  margin: 0;
  font-family: var(--font-display, sans-serif);
  font-size: clamp(48px, 4.5vw, 80px);
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.product-detail-value {
  max-width: 900px;
  margin: 22px 0 0;
  color: #dcecff;
  font-family: var(--font-sans, sans-serif);
  font-size: clamp(24px, 2.15vw, 38px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.product-detail-hero-summary {
  max-width: 760px;
  margin: 28px 0 0;
  color: rgba(225, 236, 249, .76);
  font-size: clamp(16px, 1.12vw, 19px);
  line-height: 1.9;
}

.product-detail-audiences {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-detail-audiences span {
  padding: 8px 13px;
  border: 1px solid rgba(115, 190, 255, .26);
  border-radius: 999px;
  color: #dceeff;
  background: rgba(6, 22, 43, .44);
  backdrop-filter: blur(12px);
  font-size: 12px;
}

.product-detail-hero-actions {
  margin-top: 34px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.product-detail-hero-actions > a:not(.button) {
  min-height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #e8f5ff;
  border-bottom: 1px solid rgba(81, 178, 255, .45);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.product-detail-hero-index {
  align-self: end;
  justify-self: end;
  min-width: 138px;
  padding: 22px 0 0 22px;
  border-left: 1px solid rgba(102, 191, 255, .34);
}

.product-detail-hero-index span {
  display: block;
  font-size: clamp(50px, 5vw, 82px);
  font-weight: 300;
  line-height: .86;
}

.product-detail-hero-index small {
  display: block;
  margin-top: 16px;
  color: rgba(255, 255, 255, .5);
  font-size: 9px;
  letter-spacing: .18em;
}

.product-detail-subnav {
  position: sticky;
  top: var(--header-height, 76px);
  z-index: 19;
  border-top: 1px solid rgba(105, 187, 255, .18);
  border-bottom: 1px solid rgba(105, 187, 255, .18);
  background: rgba(3, 11, 25, .91);
  backdrop-filter: blur(18px);
}

.product-detail-subnav .container {
  min-height: 70px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 34px;
  align-items: center;
}

.product-detail-subnav strong { color: #fff; font-size: 14px; }
.product-detail-subnav div div { display: flex; gap: 30px; }
.product-detail-subnav a { color: #8294a8; text-decoration: none; font-size: 12px; font-weight: 660; }
.product-detail-subnav div > a:last-child { padding: 11px 17px; color: #fff; border-radius: 6px; background: #226cfe; }

.product-architecture-section,
.product-workflow-section,
.product-highlights-section,
.product-protocol-section,
.product-detail-cases,
.product-detail-related {
  color: #edf7ff;
  background: #030a16;
}

.product-workflow-section,
.product-protocol-section,
.product-detail-related {
  background:
    radial-gradient(circle at 82% 12%, rgba(74, 85, 230, .12), transparent 28%),
    #061124;
}

.product-detail-section-head {
  margin-bottom: clamp(42px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 650px);
  gap: 72px;
  align-items: end;
}

.product-detail-section-head h2,
.product-protocol-layout h2,
.product-detail-final-cta h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(36px, 3.3vw, 56px);
  line-height: 1.12;
  letter-spacing: -.035em;
}

.product-detail-section-head > p,
.product-protocol-layout > div > p {
  margin: 0;
  color: #8194aa;
  font-size: 15px;
  line-height: 1.9;
}

.product-detail-fit {
  color: #0b1725;
  background: #f4f7fb;
}

.product-detail-fit .product-detail-section-head h2,
.product-detail-fit .product-detail-integration-grid h3 {
  color: #0b1725;
}

.product-detail-fit .product-detail-section-head > p,
.product-detail-fit .product-detail-integration-grid p {
  color: #647589;
}

.product-detail-fit .product-detail-integration-grid {
  border-color: #cdd9e5;
}

.product-detail-fit .product-detail-integration-grid article {
  background: #fff;
  border-color: #d6e0e9;
}

.product-detail-fit .product-detail-integration-grid small {
  color: #226cfe;
}

.product-architecture-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--product-layer-count, 5), minmax(0, 1fr));
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border-top: 1px solid rgba(105, 187, 255, .2);
  border-bottom: 1px solid rgba(105, 187, 255, .2);
}

.product-architecture-layer {
  min-width: 0;
  padding: 32px clamp(20px, 2.2vw, 34px) 34px;
  border-right: 1px solid rgba(105, 187, 255, .16);
  background: linear-gradient(180deg, rgba(10, 28, 51, .74), rgba(5, 16, 31, .26));
}

.product-architecture-layer:first-child { border-left: 1px solid rgba(105, 187, 255, .16); }
.product-architecture-layer-head { display: flex; justify-content: space-between; gap: 14px; color: var(--product-detail-cyan); font-size: 11px; font-weight: 760; letter-spacing: .1em; }
.product-architecture-layer-head i { color: rgba(93, 196, 255, .45); font-style: normal; }
.product-architecture-layer h3 { min-height: 84px; margin: 26px 0 28px; color: #fff; font-size: clamp(18px, 1.4vw, 24px); line-height: 1.5; }
.product-architecture-layer > div:last-child { display: grid; gap: 9px; }
.product-architecture-layer b { padding: 9px 11px; color: #8fa8c0; border-left: 2px solid rgba(32, 194, 239, .4); background: rgba(16, 42, 69, .42); font-size: 11px; font-weight: 620; }

.product-architecture-flow.has-rule-loop { padding-bottom: 62px; }
.product-rule-loop { position: absolute; left: 4%; right: 4%; bottom: 18px; display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 12px; align-items: center; color: #607f9c; font-size: 9px; letter-spacing: .12em; }
.product-rule-loop i { height: 1px; background: linear-gradient(90deg, transparent, var(--product-detail-cyan), transparent); }
.product-rule-loop b { color: #bdeaff; font-size: 10px; text-align: center; }

.product-workflow-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 46px);
}

.product-workflow-track::before { content: ""; position: absolute; top: 30px; left: 4%; right: 4%; height: 1px; background: linear-gradient(90deg, var(--product-detail-cyan), #226cfe, #705cff); }
.product-workflow-track article { position: relative; padding-top: 74px; }
.product-workflow-track article > span { position: absolute; top: 0; left: 0; width: 60px; height: 60px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(83, 186, 255, .46); border-radius: 50%; background: #071a30; font-size: 11px; font-weight: 720; }
.product-workflow-track article > i { position: absolute; top: 27px; left: 60px; width: 30px; height: 7px; background: var(--product-detail-cyan); filter: blur(5px); }
.product-workflow-track h3 { margin: 0 0 13px; color: #fff; font-size: 20px; }
.product-workflow-track p { margin: 0; color: #768ca3; font-size: 13px; line-height: 1.75; }

.product-highlight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.product-highlight-card { min-width: 0; display: grid; grid-template-columns: minmax(220px, .95fr) minmax(260px, 1.05fr); min-height: 360px; overflow: hidden; border: 1px solid rgba(91, 174, 255, .16); border-radius: 14px; background: linear-gradient(145deg, rgba(10, 28, 52, .88), rgba(4, 14, 29, .92)); }
.product-highlight-card.is-wide { grid-column: 1 / -1; grid-template-columns: minmax(420px, 1.22fr) minmax(420px, .78fr); min-height: 480px; }
.product-highlight-card figure { position: relative; min-height: 100%; margin: 0; overflow: hidden; background: #020812; }
.product-highlight-card figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(5, 15, 31, .82)); pointer-events: none; }
.product-highlight-card img,
.product-highlight-card video { width: 100%; height: 100%; object-fit: cover; }
.product-highlight-card > div { padding: clamp(28px, 3vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.product-highlight-card > div > small { color: var(--product-detail-cyan); font-size: 9px; font-weight: 760; letter-spacing: .11em; }
.product-highlight-card h3 { margin: 16px 0 14px; color: #fff; font-size: clamp(23px, 2vw, 34px); line-height: 1.22; }
.product-highlight-card p { margin: 0; color: #8398ad; font-size: 14px; line-height: 1.85; }
.product-highlight-card > div > div { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.product-highlight-card b { padding: 7px 10px; color: #b9d5ed; border: 1px solid rgba(89, 173, 255, .2); border-radius: 4px; font-size: 10px; font-weight: 650; }

.product-protocol-layout { display: grid; grid-template-columns: minmax(360px, .75fr) minmax(580px, 1.25fr); gap: 84px; align-items: center; }
.product-protocol-cloud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.product-protocol-cloud span { min-height: 86px; display: grid; place-items: center; color: #d9efff; border: 1px solid rgba(68, 178, 255, .24); border-radius: 10px; background: linear-gradient(145deg, rgba(13, 38, 66, .8), rgba(7, 19, 37, .62)); font-size: 13px; font-weight: 700; }

.product-detail-integration { color: #111c2a; background: #f4f7fb; }
.product-detail-integration .product-detail-section-head h2 { color: #0b1725; }
.product-detail-integration .product-detail-section-head > p { color: #66788c; }
.product-detail-integration-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #cdd9e5; border-bottom: 1px solid #cdd9e5; }
.product-detail-integration-grid article { min-height: 220px; padding: 32px; border-right: 1px solid #d6e0e9; }
.product-detail-integration-grid article:first-child { border-left: 1px solid #d6e0e9; }
.product-detail-integration-grid small { color: #226cfe; font-size: 10px; font-weight: 760; letter-spacing: .12em; }
.product-detail-integration-grid h3 { margin: 30px 0 0; font-size: 19px; line-height: 1.6; }
.product-detail-integration-action { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.product-detail-integration-action p { color: #687a8c; font-size: 14px; }

.product-detail-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.product-detail-case-grid > a { min-width: 0; overflow: hidden; color: inherit; border: 1px solid rgba(91, 174, 255, .16); border-radius: 14px; background: #071526; text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s ease, border-color .35s ease; }
.product-detail-case-grid > a:hover { transform: translateY(-7px); border-color: rgba(70, 180, 255, .48); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.product-detail-case-grid figure { height: 250px; margin: 0; overflow: hidden; }
.product-detail-case-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.product-detail-case-grid > a:hover img { transform: scale(1.035); }
.product-detail-case-grid > a > div { padding: 28px; }
.product-detail-case-grid h3 { margin: 0 0 13px; color: #fff; font-size: 20px; line-height: 1.4; }
.product-detail-case-grid p { min-height: 52px; margin: 0; color: #7e94aa; font-size: 13px; line-height: 1.75; }
.product-detail-case-grid span,
.product-detail-related-grid span { margin-top: 22px; display: inline-flex; gap: 10px; color: var(--product-detail-cyan); font-size: 12px; font-weight: 700; }

.product-detail-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.product-detail-related-grid > a { min-height: 250px; padding: 32px; display: flex; flex-direction: column; color: inherit; border: 1px solid rgba(91, 174, 255, .16); background: rgba(6, 18, 36, .64); text-decoration: none; }
.product-detail-related-grid small { color: #20c2ef; font-size: 9px; letter-spacing: .1em; }
.product-detail-related-grid h3 { margin: 22px 0 13px; color: #fff; font-size: 22px; }
.product-detail-related-grid p { margin: 0; color: #7c91a6; font-size: 13px; line-height: 1.75; }
.product-detail-related-grid span { margin-top: auto; }

.product-detail-final-cta { padding: clamp(92px, 10vw, 150px) 0; color: #fff; text-align: center; background: radial-gradient(circle at 50% 100%, rgba(34, 108, 254, .26), transparent 46%), #020713; }
.product-detail-final-cta h2 { max-width: 980px; margin: 16px auto 0; text-wrap: balance; }
.product-detail-final-cta p { max-width: 680px; margin: 22px auto 30px; color: #8398ad; line-height: 1.8; }
.product-detail-final-cta .button { margin-inline: auto; }

@media (max-width: 1180px) {
  .product-detail-hero-layout { grid-template-columns: 1fr; }
  .product-detail-hero-index { display: none; }
  .product-detail-section-head { grid-template-columns: 1fr; gap: 22px; }
  .product-architecture-flow { overflow-x: auto; grid-template-columns: none; grid-auto-columns: minmax(250px, 1fr); }
  .product-workflow-track { grid-template-columns: repeat(5, minmax(180px, 1fr)); overflow-x: auto; padding-bottom: 18px; }
  .product-protocol-layout { grid-template-columns: 1fr; gap: 40px; }
  .product-detail-integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-detail-integration-grid article:nth-child(3) { border-left: 1px solid #d6e0e9; border-top: 1px solid #d6e0e9; }
  .product-detail-integration-grid article:nth-child(4) { border-top: 1px solid #d6e0e9; }
}

@media (max-width: 820px) {
  .product-detail-hero { min-height: 760px; }
  .product-detail-hero h1 { font-size: clamp(38px, 10vw, 54px); }
  .product-detail-subnav { display: none; }
  .product-highlight-grid,
  .product-detail-case-grid,
  .product-detail-related-grid { grid-template-columns: 1fr; }
  .product-highlight-card,
  .product-highlight-card.is-wide { grid-column: auto; grid-template-columns: 1fr; min-height: 0; }
  .product-highlight-card figure { min-height: 270px; }
  .product-highlight-card figure::after { background: linear-gradient(180deg, transparent 58%, rgba(5, 15, 31, .82)); }
  .product-protocol-cloud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-detail-integration-grid { grid-template-columns: 1fr; }
  .product-detail-integration-grid article { min-height: 0; border-left: 1px solid #d6e0e9; border-top: 1px solid #d6e0e9; }
  .product-detail-integration-action { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .product-detail-case-grid > a,
  .product-detail-case-grid img { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .star-v2-value-card,
  .star-v2-enablement-card,
  .star-v2-type-card,
  .star-v2-type-card figure img,
  .star-v2-direction-intro > a,
  .star-v2-cta-card > a { transform: none !important; }
}

/* ==========================================================
   V0.25.19 — six-part homepage campaign and partner field
   ========================================================== */

/* The IoT film is intentionally bright; its dedicated shade preserves the
   same left-hand campaign typography used by the other four films. */
.home-carousel-slide[data-home-slide-key="iot-platform"] .home-carousel-shade {
  background:
    linear-gradient(90deg, rgba(1, 7, 17, .96) 0%, rgba(2, 10, 24, .86) 30%, rgba(3, 14, 31, .48) 62%, rgba(3, 12, 28, .18) 100%),
    linear-gradient(180deg, rgba(2, 8, 18, .42) 0%, transparent 36%, rgba(2, 8, 18, .7) 100%);
}

.home-carousel-slide[data-home-slide-key="ai-screen"] .home-carousel-shade {
  background:
    linear-gradient(90deg, rgba(1, 7, 17, .97) 0%, rgba(2, 10, 24, .88) 31%, rgba(3, 14, 31, .5) 62%, rgba(3, 12, 28, .2) 100%),
    linear-gradient(180deg, rgba(2, 8, 18, .44) 0%, transparent 38%, rgba(2, 8, 18, .72) 100%);
}

@media (min-width: 821px) {
  body:not(.locale-en) .home-carousel-slide[data-home-slide-key="iot-platform"] .home-carousel-copy,
  body:not(.locale-en) .home-carousel-slide[data-home-slide-key="ai-screen"] .home-carousel-copy {
    width: min(1080px, 76vw);
  }

  body:not(.locale-en) .home-carousel-slide[data-home-slide-key="iot-platform"] .home-carousel-copy h2,
  body:not(.locale-en) .home-carousel-slide[data-home-slide-key="ai-screen"] .home-carousel-copy h2 {
    font-size: clamp(50px, 4.1vw, 66px);
  }
}

/* Match the supplied reference: dense monochrome marks, no cards, and four
   slow-moving rows. Assets are pre-cut to transparent white silhouettes at
   2x resolution, so the browser only controls their silver-white opacity. */
.home-partners-section {
  background:
    radial-gradient(ellipse at 54% 116%, rgba(24, 70, 202, .2), transparent 48%),
    linear-gradient(180deg, #000 0%, #000 74%, #03061a 100%);
}

.home-partners-section::before { display: none; }

.home-partners-viewport {
  margin-top: clamp(38px, 5vh, 54px);
}

.home-partners-row + .home-partners-row { margin-top: 12px; }

.home-partners-track,
.home-partners-set { gap: 32px; }

.home-partners-track {
  padding-block: 2px;
  animation-timing-function: linear;
}

.home-partners-row:nth-child(even) .home-partners-track { animation-direction: reverse; }

.home-partners-item { height: 46px; }

.home-partners-item img {
  height: 36px;
  opacity: .64;
  filter: none;
  mix-blend-mode: normal;
  transform: translateZ(0);
  transition: opacity .28s ease;
}

.home-partners-item:hover img {
  opacity: .94;
  filter: none;
  transform: translateZ(0);
}

@keyframes homePartnersMarquee {
  to { transform: translate3d(calc(-50% - 16px), 0, 0); }
}

@media (max-width: 820px) {
  .home-partners-row + .home-partners-row { margin-top: 12px; }
  .home-partners-item { height: 40px; }
  .home-partners-item img { height: 31px; }
}

/* V0.25.19 — align the five homepage chapter statements as one editorial
   system. The project statement uses the same right-hand column while its
   action remains independently accessible. */
@media (min-width: 821px) {
  body[data-page="home"] .home-page-heading > p {
    justify-self: end;
    margin-left: auto;
    text-align: right;
  }

  body[data-page="home"] .v12-project-reel-head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
  }

  body[data-page="home"] .v12-project-reel-head .section-heading {
    width: 100%;
    max-width: none;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: minmax(280px, .55fr) minmax(650px, 1.45fr);
    column-gap: clamp(36px, 5vw, 72px);
    align-items: end;
    flex: 1 1 auto;
  }

  body[data-page="home"] .v12-project-reel-head .section-heading > span,
  body[data-page="home"] .v12-project-reel-head .section-heading > h2 {
    grid-column: 1;
  }

  body[data-page="home"] .v12-project-reel-head .section-heading > p {
    grid-column: 2;
    grid-row: 1 / 3;
    max-width: none;
    margin: 0;
    justify-self: end;
    align-self: end;
    color: rgba(219, 237, 252, .62);
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.8;
    text-align: right;
  }

  body:not(.locale-en)[data-page="home"] .v12-project-reel-head .section-heading > p {
    white-space: nowrap;
  }

  body[data-page="home"] .v12-project-reel-head > .button {
    margin-top: 18px;
    justify-self: end;
  }
}

@media (min-width: 821px) and (max-width: 1100px) {
  body[data-page="home"] .v12-project-reel-head .section-heading {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }

  body[data-page="home"] .v12-project-reel-head .section-heading > span,
  body[data-page="home"] .v12-project-reel-head .section-heading > h2,
  body[data-page="home"] .v12-project-reel-head .section-heading > p {
    grid-column: 1;
  }

  body[data-page="home"] .v12-project-reel-head .section-heading > p {
    grid-row: auto;
  }
}

/* Star Domain / why join: three precise value cards with independent signal
   colours, generous reading rhythm and a visible sequence without looking
   like a process diagram. */
.star-v2-value-grid {
  padding-top: 0;
  gap: clamp(20px, 2.2vw, 30px);
}

.star-v2-value-grid::before { display: none; }

.star-v2-value-card {
  --value-accent: #64d7ff;
  min-height: 372px;
  padding: clamp(28px, 2.4vw, 38px);
  border-color: color-mix(in srgb, var(--value-accent) 30%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--value-accent) 16%, transparent), transparent 34%),
    linear-gradient(155deg, rgba(13, 39, 72, .94), rgba(4, 16, 34, .96));
  box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 24px 66px rgba(0, 0, 0, .2);
  transition: transform .32s var(--ease), border-color .32s ease, box-shadow .32s ease, background .32s ease;
}

.star-v2-value-card[data-star-v2-value="foundation"] { --value-accent: #64d7ff; }
.star-v2-value-card[data-star-v2-value="product"] { --value-accent: #8580ff; }
.star-v2-value-card[data-star-v2-value="delivery"] { --value-accent: #4c91ff; }

.star-v2-value-card::before {
  top: 0;
  right: 28px;
  left: 28px;
  width: auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--value-accent), transparent);
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 20px color-mix(in srgb, var(--value-accent) 45%, transparent);
  transform: none;
}

.star-v2-value-card::after {
  right: -110px;
  bottom: -138px;
  width: 270px;
  height: 270px;
  border-color: color-mix(in srgb, var(--value-accent) 14%, transparent);
  box-shadow: 0 0 0 34px color-mix(in srgb, var(--value-accent) 2.8%, transparent);
}

.star-v2-value-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--value-accent) 58%, transparent);
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--value-accent) 22%, transparent), transparent 36%),
    linear-gradient(155deg, rgba(16, 49, 91, .96), rgba(5, 19, 40, .98));
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 32px 76px rgba(0, 0, 0, .3), 0 0 34px color-mix(in srgb, var(--value-accent) 9%, transparent);
}

.star-v2-value-number {
  position: absolute;
  top: 28px;
  right: 30px;
  z-index: 2;
  color: color-mix(in srgb, var(--value-accent) 32%, transparent);
  font: 660 clamp(34px, 3vw, 48px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -.08em;
}

.star-v2-value-mark {
  height: 96px;
  margin: 4px 0 28px;
  border-bottom-color: color-mix(in srgb, var(--value-accent) 20%, transparent);
}

.star-v2-value-card > span { color: var(--value-accent); }
.star-v2-value-card h3 { max-width: 12em; }
.star-v2-value-card p { max-width: 31em; font-size: 14px; line-height: 1.86; }

@media (max-width: 960px) {
  .star-v2-value-card { min-height: 0; }
  .star-v2-value-card::before { display: block; }
}

/* Star Domain: merge the three partnership values and four collaboration
   paths into one editorial chapter. The image rail behaves like the supplied
   reference—one path opens for detail while the others remain legible. */
.star-v2-why {
  min-height: 0;
  padding-top: clamp(44px, 4vw, 58px);
  color: #10263a;
  background:
    radial-gradient(circle at 14% 16%, rgba(39, 120, 255, .08), transparent 32%),
    linear-gradient(180deg, #f8fbff 0%, #f3f7fb 100%);
  border-top-color: #e2ebf3;
}

.star-v2-shell .star-v2-why { padding-bottom: 0; }

.star-v2-why::before { opacity: .045; -webkit-mask-image: none; mask-image: none; }
.star-v2-why .star-v2-section-head > div > span { color: #226cfe; }
.star-v2-why .star-v2-section-head h2 {
  color: #10263a;
  line-height: 1.08;
  white-space: nowrap;
}
.star-v2-why .star-v2-section-head > p { color: #5d7081; line-height: 1.72; }
.locale-en .star-v2-why .star-v2-section-head h2 {
  white-space: normal;
}

.star-v2-why .star-v2-value-grid {
  margin-top: 22px;
  gap: 0;
}

.star-v2-why .star-v2-value-card {
  min-height: 286px;
  padding: 8px clamp(26px, 3.2vw, 50px) 24px;
  text-align: center;
  background: transparent;
  border: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
}

.star-v2-why .star-v2-value-card:last-child { border-right: 0; }
.star-v2-why .star-v2-value-card::before,
.star-v2-why .star-v2-value-card::after { display: none; }
.star-v2-why .star-v2-value-card:hover { transform: none; background: transparent; border-color: #dce7f0; box-shadow: none; }

.star-v2-why .star-v2-value-number { display: none; }

.star-v2-why .star-v2-value-media {
  width: clamp(118px, 9.4vw, 148px);
  aspect-ratio: 1;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
}

.star-v2-why .star-v2-value-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(26, 98, 190, .14));
}

.star-v2-why .star-v2-value-card h3 { max-width: none; margin-top: 8px; color: #10263a; font-size: clamp(20px, 1.45vw, 24px); }
.star-v2-why .star-v2-value-card p { max-width: 420px; margin: 7px auto 0; color: #657787; font-size: 12px; line-height: 1.62; }

@media (min-width: 1281px) {
  .star-v2-why .star-v2-section-head {
    grid-template-columns: minmax(330px, .62fr) minmax(760px, 1.38fr);
    gap: clamp(48px, 5vw, 76px);
  }
}

@media (min-width: 961px) and (max-width: 1280px) {
  .star-v2-why .star-v2-section-head {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (min-width: 961px) {
  .star-v2-why .star-v2-section-head > p {
    max-width: none;
    white-space: nowrap;
  }
}

.star-v2-collaboration-stage {
  position: relative;
  width: 100%;
  height: clamp(380px, 50vh, 540px);
  margin-top: 24px;
  display: flex;
  overflow: hidden;
  background: #030b17;
  border: 0;
  border-radius: 0;
  box-shadow: 0 -1px rgba(117, 197, 255, .18), 0 28px 72px rgba(0, 0, 0, .24);
}

.star-v2-collaboration-panel {
  position: relative;
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
  isolation: isolate;
  border-right: 1px solid rgba(209, 235, 255, .18);
  outline: 0;
  transition: flex .5s var(--ease), filter .4s ease;
}

.star-v2-collaboration-panel:first-child { flex-grow: 1.6; }
.star-v2-collaboration-panel:last-child { border-right: 0; }
.star-v2-collaboration-stage:hover .star-v2-collaboration-panel,
.star-v2-collaboration-stage:focus-within .star-v2-collaboration-panel { flex-grow: 1; }
.star-v2-collaboration-stage .star-v2-collaboration-panel:hover,
.star-v2-collaboration-stage .star-v2-collaboration-panel:focus-visible { flex-grow: 1.6; }

.star-v2-collaboration-panel > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.68);
  transform: scale(1.035);
  transition: filter .45s ease, transform .7s var(--ease);
}

.star-v2-collaboration-panel:hover > img,
.star-v2-collaboration-panel:focus-visible > img { filter: brightness(1); transform: scale(1); }

.star-v2-collaboration-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(2, 9, 19, .22) 55%, rgba(2, 9, 19, .86) 100%);
}

.star-v2-collaboration-copy {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  min-width: 250px;
  padding: 30px clamp(22px, 2.2vw, 34px);
  color: #fff;
}

.star-v2-collaboration-copy h3 {
  margin: 0;
  font-size: clamp(22px, 1.8vw, 29px);
  line-height: 1.24;
}

.star-v2-collaboration-copy p {
  max-width: 540px;
  margin-top: 16px;
  color: rgba(226, 240, 251, .76);
  font-size: 13px;
  line-height: 1.82;
}

.star-v2-collaboration-copy ul {
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.star-v2-collaboration-copy li {
  padding: 6px 10px;
  color: #b4ebff;
  background: rgba(5, 26, 50, .48);
  border: 1px solid rgba(125, 212, 255, .3);
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.2;
}

.star-v2-collaboration-copy p,
.star-v2-collaboration-copy ul {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
}

.star-v2-collaboration-panel[aria-expanded="true"] .star-v2-collaboration-copy p,
.star-v2-collaboration-panel[aria-expanded="true"] .star-v2-collaboration-copy ul {
  max-height: 180px;
  opacity: 1;
  transform: none;
  transition: max-height .4s var(--ease), margin .35s var(--ease), opacity .28s ease .12s, transform .38s var(--ease) .08s;
}

.star-v2-collaboration-panel[aria-expanded="true"] .star-v2-collaboration-copy p { margin-top: 16px; }
.star-v2-collaboration-panel[aria-expanded="true"] .star-v2-collaboration-copy ul { margin-top: 18px; }

.star-v2-collaboration-panel:focus-visible { box-shadow: inset 0 0 0 2px #77dcff; }

@media (max-width: 960px) {
  .star-v2-collaboration-stage { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .star-v2-collaboration-panel { min-height: 300px; border-bottom: 1px solid rgba(209, 235, 255, .18); }
  .star-v2-collaboration-copy { min-width: 0; }
  .star-v2-collaboration-panel .star-v2-collaboration-copy p { max-height: 180px !important; margin-top: 16px !important; opacity: 1 !important; transform: none !important; }
  .star-v2-collaboration-panel .star-v2-collaboration-copy ul { max-height: 180px !important; margin-top: 18px !important; opacity: 1 !important; transform: none !important; }
}

@media (max-width: 620px) {
  .star-v2-collaboration-stage { grid-template-columns: minmax(0, 1fr); }
  .star-v2-collaboration-panel { min-height: 340px; }
  .star-v2-collaboration-copy { padding: 26px 22px; }
  .star-v2-collaboration-panel .star-v2-collaboration-copy p {
    max-height: none !important;
    overflow: visible;
    line-height: 1.72;
  }
}

@media (prefers-reduced-motion: reduce) {
  .star-v2-collaboration-panel,
  .star-v2-collaboration-panel > img,
  .star-v2-collaboration-copy p,
  .star-v2-collaboration-copy ul { transition: none !important; }
}

/* About / company story and native milestone timeline. */
.about-company-story h3 > span {
  display: block;
  white-space: nowrap;
}

.locale-en .about-company-story h3 { font-size: clamp(31px, 2.6vw, 44px); }

.about-history-section {
  min-height: 820px;
  padding-top: clamp(86px, 7vw, 116px);
  padding-bottom: 70px;
  color: #f6faff;
  background:
    radial-gradient(circle at 15% 16%, rgba(87, 189, 255, .25), transparent 34%),
    radial-gradient(circle at 88% 34%, rgba(103, 115, 255, .2), transparent 34%),
    linear-gradient(180deg, #08294e 0%, #0c548b 52%, #6aa9d2 118%);
  border-top: 1px solid rgba(111, 191, 255, .22);
  border-bottom: 1px solid rgba(111, 191, 255, .16);
  overflow: hidden;
}

.about-history-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image:
    linear-gradient(rgba(113, 190, 249, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(113, 190, 249, .11) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
}

.about-history-landscape {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 300px;
  max-height: 50%;
  object-fit: cover;
  object-position: center bottom;
  opacity: .9;
  filter: saturate(.78) contrast(1.04) brightness(.78);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .28) 8%, #000 25%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .28) 8%, #000 25%, #000 100%);
  pointer-events: none;
}

.about-history-section::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 52%;
  background: linear-gradient(180deg, rgba(7, 38, 72, 0) 0%, rgba(7, 38, 72, .08) 25%, rgba(4, 20, 42, .52) 100%);
  pointer-events: none;
}

@media (min-width: 1101px) {
  body:not(.locale-en)[data-page="home"] .home-carousel-slide[data-home-slide-key="ai-screen"] .home-carousel-copy {
    width: min(1180px, 78vw);
  }

  body:not(.locale-en)[data-page="home"] .home-carousel-slide[data-home-slide-key="ai-screen"] .home-carousel-copy p {
    max-width: none;
    white-space: nowrap;
  }
}

.about-history-heading {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(420px, .82fr);
  gap: clamp(44px, 7vw, 108px);
  align-items: end;
}

.about-history-heading span {
  display: block;
  color: #72dcff;
  font: 760 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em;
}

.about-history-heading h2 {
  margin-top: 16px;
  color: #fff;
  font-size: clamp(44px, 4.35vw, 68px);
  line-height: 1;
  letter-spacing: -.055em;
}

.about-history-heading > p {
  max-width: 620px;
  justify-self: end;
  color: rgba(222, 238, 252, .65);
  font-size: clamp(14px, 1.03vw, 16px);
  line-height: 1.85;
  text-align: right;
}

.about-history-timeline {
  position: relative;
  z-index: 2;
  min-height: 470px;
  margin-top: clamp(52px, 6vw, 82px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  border-bottom: 0;
}

.about-history-timeline::before { display: none; }

.about-history-item {
  position: relative;
  min-height: 360px;
  margin-top: 0;
  padding: 34px clamp(20px, 1.7vw, 28px) 32px;
  border-left: 2px solid rgba(205, 235, 255, .5);
  background: transparent;
  text-shadow: 0 2px 18px rgba(1, 13, 31, .5);
}

.about-history-item:last-child { border-right: 0; }

.about-history-item > i {
  position: absolute;
  top: -6px;
  left: -7px;
  width: 13px;
  height: 13px;
  background: #72dcff;
  border: 4px solid #174f82;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(114, 220, 255, .7), 0 0 20px rgba(114, 220, 255, .82);
}

.about-history-item time {
  display: block;
  color: #fff;
  font-size: clamp(34px, 2.8vw, 50px);
  font-weight: 660;
  line-height: 1;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.locale-en .about-history-item time {
  font-size: clamp(26px, 2.15vw, 38px);
  letter-spacing: -.035em;
}

.about-history-item h3 {
  margin-top: 22px;
  color: #fff;
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.45;
}

.about-history-item ul {
  margin-top: 22px;
  display: grid;
  gap: 12px;
  list-style: none;
}

.about-history-item li {
  position: relative;
  padding-left: 16px;
  color: rgba(222, 237, 251, .68);
  font-size: 12px;
  line-height: 1.72;
}

.about-history-item li::before {
  content: "";
  position: absolute;
  top: .68em;
  left: 0;
  width: 5px;
  height: 5px;
  background: linear-gradient(135deg, #72dcff, #7771ff);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(114, 220, 255, .5);
}

@media (max-width: 1080px) {
  .about-history-timeline { min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; border-bottom: 0; }
  .about-history-timeline::before { display: none; }
  .about-history-item { min-height: 330px; margin-top: 0 !important; border: 1px solid rgba(125, 199, 255, .18); }
  .about-history-item > i { top: 24px; right: 24px; left: auto; }
}

/* Global consultation dock: compact controls stay visible; details open to
   the left on pointer hover and keyboard focus without obscuring navigation. */
.floating-contact-dock {
  position: fixed;
  z-index: 96;
  right: 18px;
  bottom: 28px;
  display: grid;
  gap: 8px;
}

.floating-contact-slot { position: relative; }

.floating-contact-item {
  position: relative;
  width: 54px;
  height: 54px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #eef8ff;
  background: rgba(5, 18, 38, .92);
  border: 1px solid rgba(111, 191, 255, .3);
  border-radius: 10px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .26), inset 0 1px rgba(255, 255, 255, .04);
  backdrop-filter: blur(16px);
  cursor: pointer;
  transition: transform .28s var(--ease), border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

.floating-contact-slot:hover > .floating-contact-item,
.floating-contact-slot:focus-within > .floating-contact-item,
.floating-contact-slot.is-open > .floating-contact-item,
.floating-contact-item:focus-visible {
  color: #fff;
  background: linear-gradient(145deg, rgba(40, 120, 255, .96), rgba(24, 77, 192, .96));
  border-color: rgba(126, 218, 255, .78);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .34), 0 0 24px rgba(54, 132, 255, .2);
  transform: translateX(-3px);
}

.floating-contact-item:focus-visible { outline: 2px solid #72dcff; outline-offset: 3px; }

.floating-contact-item > svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.floating-contact-icon {
  width: 25px;
  height: 25px;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .92;
}

.floating-contact-item > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.floating-contact-panel {
  position: absolute;
  top: auto;
  right: calc(100% + 12px);
  bottom: 0;
  width: 246px;
  padding: 18px 20px;
  color: #edf7ff;
  background: rgba(4, 15, 31, .97);
  border: 1px solid rgba(112, 195, 255, .32);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .36);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(10px, 0, 0);
  transition: opacity .24s ease, transform .28s var(--ease);
}

.floating-contact-panel::after {
  content: "";
  position: absolute;
  top: auto;
  bottom: 22px;
  left: 100%;
  width: 9px;
  height: 9px;
  background: rgba(4, 15, 31, .97);
  border-top: 1px solid rgba(112, 195, 255, .32);
  border-right: 1px solid rgba(112, 195, 255, .32);
  transform: translateX(-5px) rotate(45deg);
}

.floating-contact-panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: -14px;
  width: 14px;
  height: 100%;
  background: transparent;
}

.floating-contact-slot:not(.is-dismissed):hover .floating-contact-panel,
.floating-contact-slot:not(.is-dismissed):focus-within .floating-contact-panel,
.floating-contact-slot.is-open .floating-contact-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.floating-contact-panel small {
  display: block;
  color: #72dcff;
  font: 730 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.floating-contact-panel strong {
  margin-top: 10px;
  display: block;
  color: #fff;
  font-size: 18px;
  line-height: 1.35;
}

.floating-contact-panel p { margin-top: 7px; color: rgba(220, 237, 251, .6); font-size: 12px; }
.floating-contact-phone { width: 226px; }
.floating-contact-phone strong { margin-top: 0; }
.floating-contact-wechat { width: 218px; padding: 16px 16px 18px; text-align: center; }
.floating-contact-wechat .floating-contact-qr { width: min(166px, 100%); height: auto; margin: 0 auto; padding: 7px; display: block; object-fit: contain; background: #fff; border-radius: 8px; }
.floating-contact-wechat .floating-contact-wechat-copy { margin-top: 12px; color: rgba(237, 247, 255, .84); font-size: 13px; line-height: 1.4; }
.floating-contact-wechat .floating-contact-wechat-advisor { margin-top: 2px; color: #226cfe; font-size: 14px; line-height: 1.45; }

@media (max-width: 820px) {
  .floating-contact-dock {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    display: flex;
    gap: 7px;
  }
  .floating-contact-item { width: 46px; height: 46px; border-radius: 9px; }
  .floating-contact-item > svg,
  .floating-contact-icon { width: 20px; height: 20px; }
  .floating-contact-panel { right: 0; bottom: calc(100% + 11px); }
  .floating-contact-panel::before { top: 100%; right: 0; width: 100%; height: 12px; }
  .floating-contact-panel::after { display: none; }
  body.menu-open .floating-contact-dock { opacity: 0; visibility: hidden; pointer-events: none; }
  .about-company-story h3 > span { white-space: normal; }
  .about-history-heading { grid-template-columns: 1fr; gap: 18px; }
  .about-history-heading > p { justify-self: start; text-align: left; }
  .about-history-timeline { grid-template-columns: 1fr; }
}

@media (min-width: 821px) {
  .footer-bottom { padding-right: 88px; }
}

/* ==========================================================
   V0.25.20 — unified homepage hierarchy and publication footer
   ========================================================== */

/* The five homepage chapters share one typographic scale. Project cases used
   a legacy section-heading and product center had a low-height override; this
   single rule makes Technology the common reference at every desktop height. */
body[data-page="home"] :is(.home-page-heading, .home-project-section .section-heading) h2 {
  font-size: clamp(44px, 4.35vw, 68px);
  font-weight: 730;
  line-height: 1;
  letter-spacing: -.055em;
}
body.locale-en[data-page="home"] :is(.home-page-heading, .home-project-section .section-heading) h2 {
  letter-spacing: -.035em;
}

/* Partner field: one public-facing statement, then the unchanged four-track
   partner field. The blue emphasis carries Weida's identity without adding
   labels or decorative copy that compete with the marks. */
.home-partners-heading {
  width: min(1240px, calc(100% - 80px));
  text-align: center;
}
.home-partners-heading > h2 {
  margin: 0 auto;
  color: rgba(247, 251, 255, .95);
  font-size: clamp(38px, 3.45vw, 56px);
  font-weight: 560;
  line-height: 1.25;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.home-partners-heading > h2 em {
  color: #4075f6;
  font-style: normal;
  font-weight: 660;
  text-shadow: 0 0 32px rgba(64, 117, 246, .3);
}
.locale-en .home-partners-heading > h2 {
  max-width: 1050px;
  font-size: clamp(34px, 3.15vw, 52px);
  letter-spacing: -.03em;
}
.home-partners-viewport { margin-top: clamp(52px, 7vh, 76px); }

/* The footer follows an engineering information hierarchy: campaign action,
   navigation, direct contact and official channels, then legal ownership. */
.site-footer {
  position: relative;
  color: #fff;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(31, 95, 224, .18), transparent 34%),
    radial-gradient(ellipse at 86% 58%, rgba(54, 67, 180, .12), transparent 32%),
    linear-gradient(155deg, #02050b 0%, #050b16 53%, #06081a 100%);
  border-top: 1px solid rgba(86, 156, 255, .2);
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(101, 164, 229, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 164, 229, .055) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(180deg, #000, transparent 72%);
}
.footer-action,
.footer-main,
.footer-legal {
  position: relative;
  z-index: 1;
  width: min(1460px, calc(100% - 80px));
  margin: 0 auto;
}
.footer-action {
  min-height: 280px;
  padding: 66px 0 58px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) auto;
  gap: 72px;
  align-items: end;
  border-bottom: 1px solid rgba(126, 177, 222, .18);
}
.footer-action-copy > span,
.footer-contact-card > span:not(.footer-column-title),
.footer-social header > span:not(.footer-column-title) {
  color: #64d7ff;
  font: 720 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em;
}
.footer-action-copy h2 {
  max-width: 880px;
  margin-top: 0;
  color: #fff;
  font-size: clamp(38px, 4vw, 62px);
  font-weight: 620;
  line-height: 1.12;
  letter-spacing: -.045em;
}
.footer-action-copy p {
  margin-top: 18px;
  color: rgba(220, 236, 249, .58);
  font-size: 14px;
  line-height: 1.75;
}
.footer-action-buttons { display: flex; gap: 12px; align-items: center; }
.footer-action-buttons a {
  min-height: 48px;
  padding: 0 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  border: 1px solid rgba(119, 184, 255, .42);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.footer-action-buttons a:hover { transform: translateY(-2px); }
.footer-action-primary { background: #2878ff; box-shadow: 0 16px 34px rgba(40, 120, 255, .22); }
.footer-action-primary:hover { background: #3986ff; box-shadow: 0 19px 40px rgba(40, 120, 255, .3); }
.footer-action-secondary { background: rgba(13, 34, 61, .68); }
.footer-action-secondary:hover { border-color: #64d7ff; background: rgba(20, 55, 92, .78); }

.footer-main {
  padding: 58px 0 62px;
  display: grid;
  grid-template-columns: minmax(620px, 1.5fr) minmax(300px, .58fr);
  gap: clamp(58px, 7vw, 118px);
  align-items: start;
}
.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.footer-nav a,
.footer-nav span {
  display: block;
  margin: 0;
  color: rgba(220, 233, 244, .56);
  font-size: 12px;
  line-height: 1.45;
  text-decoration: none;
}
.footer-nav div > a:not(.footer-nav-title) { padding: 5px 0; }
.footer-nav .footer-nav-title {
  min-height: 28px;
  margin-bottom: 13px;
  color: #f5f9fd;
  font-size: 14px;
  font-weight: 680;
}

.footer-column-title {
  min-height: 28px;
  display: block;
  color: #f5f9fd;
  font-size: 14px;
  font-weight: 680;
  line-height: 1.45;
  letter-spacing: 0;
}
.footer-nav a:hover,
.footer-nav .footer-nav-more { color: #9fe9ff; }
.footer-nav .footer-nav-more { margin-top: 10px; font-size: 11px; }

.footer-contact-column,
.footer-contact-card { min-width: 0; }
.footer-contact-card a,
.footer-contact-card address,
.footer-contact-card p {
  display: block;
  color: rgba(221, 235, 247, .65);
  font-size: 12px;
  font-style: normal;
  line-height: 1.7;
  text-decoration: none;
  white-space: pre-line;
}

.footer-contact-entry {
  min-width: 0;
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

.footer-contact-entry-phone {
  margin-top: 18px;
  align-items: center;
}

.footer-contact-entry-address { margin-top: 16px; }

.footer-contact-entry > img {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
  opacity: .88;
  filter: brightness(0) saturate(100%) invert(78%) sepia(56%) saturate(1102%) hue-rotate(164deg) brightness(102%) contrast(101%);
}

.footer-contact-entry-address > img { margin-top: 2px; }

.footer-contact-card .footer-contact-phone {
  margin-top: 0;
  color: #fff;
  font-size: 21px;
  font-weight: 620;
  letter-spacing: .015em;
  white-space: nowrap;
}
.footer-contact-card address {
  max-width: none;
  margin-top: 0;
  white-space: nowrap;
}
.locale-en .footer-contact-card address { white-space: normal; }
.footer-contact-card a:hover { color: #64d7ff; }

.footer-social {
  min-width: 0;
  width: min(100%, 252px);
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(126, 177, 222, .16);
}
.footer-social header { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.footer-social header p { color: rgba(218, 233, 246, .45); font-size: 11px; }
.footer-qr-grid { width: 100%; margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.footer-qr-grid figure { min-width: 0; margin: 0; text-align: center; }
.footer-qr-grid figure > div {
  aspect-ratio: 1;
  padding: 3px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 7px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
}
.footer-qr-grid img { width: 100%; height: 100%; display: block; object-fit: contain; }
.footer-qr-grid figcaption {
  min-height: 28px;
  margin-top: 8px;
  color: rgba(225, 238, 249, .62);
  font-size: 10px;
  line-height: 1.4;
  text-wrap: balance;
}

.footer-legal {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  color: rgba(211, 227, 240, .38);
  border-top: 1px solid rgba(126, 177, 222, .16);
  font-size: 10px;
}
.footer-legal > div { display: flex; align-items: center; gap: 22px; }
.footer-legal a { color: rgba(221, 236, 248, .62); text-decoration: none; }
.footer-legal a:hover { color: #64d7ff; }

@media (max-width: 1380px) {
  .footer-main { grid-template-columns: minmax(560px, 1.38fr) minmax(270px, .62fr); gap: clamp(46px, 5vw, 72px); }
  .footer-social { width: min(100%, 246px); }
}

@media (max-width: 980px) and (min-width: 821px) {
  .footer-action,
  .footer-main,
  .footer-legal { width: calc(100% - 48px); }
  .footer-main { grid-template-columns: minmax(0, 1fr) 230px; gap: 44px; }
  .footer-nav { gap: 20px; }
  .footer-contact-card address { white-space: normal; }
  .footer-social { width: 100%; }
}

@media (max-width: 820px) {
  body[data-page="home"] :is(.home-page-heading, .home-project-section .section-heading) h2 {
    font-size: clamp(34px, 9.2vw, 40px);
    line-height: 1.05;
    letter-spacing: -.045em;
  }
  .home-partners-heading { width: calc(100% - 32px); }
  .home-partners-heading > h2 { font-size: clamp(30px, 8.4vw, 40px); line-height: 1.3; }
  .home-partners-viewport { margin-top: 44px; }
  .footer-action,
  .footer-main,
  .footer-legal { width: calc(100% - 32px); }
  .footer-action { min-height: 0; padding: 62px 0 48px; grid-template-columns: 1fr; gap: 28px; }
  .footer-action-copy h2 { font-size: 36px; }
  .footer-action-buttons { align-items: stretch; flex-direction: column; }
  .footer-main { padding: 48px 0; grid-template-columns: 1fr; gap: 42px; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-social { width: min(100%, 318px); margin-top: 30px; padding-top: 24px; }
  .footer-social header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .footer-qr-grid { width: 100%; max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-legal { min-height: 110px; padding: 24px 0; align-items: flex-start; flex-direction: column; justify-content: center; gap: 10px; }
  .footer-legal > div { align-items: flex-start; flex-direction: column; gap: 7px; }
}

@media (max-width: 520px) {
  body[data-page="home"] :is(.home-page-heading, .home-project-section .section-heading) h2 { font-size: 35px; }
  .footer-nav { grid-template-columns: 1fr 1fr; }
  .footer-nav > div:last-child { grid-column: 1 / -1; }
  .footer-qr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .footer-qr-grid figure > div { padding: 3px; }
  .footer-qr-grid figcaption { font-size: 9px; }
}

/* V0.25.29 — the IoT artwork must remain inside its own layout track.
   Unlike the wider engine mockups, this source is a taller 1.45:1 composite;
   the former 112% width and negative margin caused it to cover long copy when
   browser width or zoom changed. */
body[data-page="home"] .home-engine-caption > div {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

body[data-page="home"] .home-engine-caption p {
  width: 100%;
  max-width: 100%;
}

body[data-page="home"] .home-engine-workbench[data-home-engine="iot-platform"] .home-engine-caption {
  position: relative;
  z-index: 2;
}

body[data-page="home"] .home-engine-workbench[data-home-engine="iot-platform"] .home-engine-caption h3,
body[data-page="home"] .home-engine-workbench[data-home-engine="iot-platform"] .home-engine-caption h3 > span {
  max-width: 100%;
}

body[data-page="home"] .home-engine-workbench[data-home-engine="iot-platform"] .home-engine-media {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

body[data-page="home"] .home-engine-workbench[data-home-engine="iot-platform"] .home-engine-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100% !important;
  max-height: none !important;
  margin: 0;
  object-fit: contain;
  object-position: center;
  transform: translate3d(var(--scene-x, 0), var(--scene-y, 0), 0) rotateY(-2deg) scale(.92);
  transform-origin: center;
}

@media (min-width: 1101px) and (max-height: 880px) {
  body[data-page="home"] .home-engine-workbench[data-home-engine="iot-platform"] .home-engine-media img {
    width: 100%;
    height: 100% !important;
    max-height: none !important;
  }
}

@media (min-width: 1101px) {
  body[data-page="home"] .home-engine-workbench[data-home-engine="iot-platform"] .home-engine-panel {
    grid-template-columns: minmax(380px, .62fr) minmax(0, 1.38fr);
    gap: clamp(30px, 3.6vw, 56px);
  }
}

@media (min-width: 821px) and (max-width: 1100px) {
  body[data-page="home"] .home-engine-workbench[data-home-engine="iot-platform"] .home-engine-panel {
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column-reverse;
    gap: 22px;
    align-items: stretch;
  }

  body[data-page="home"] .home-engine-workbench[data-home-engine="iot-platform"] .home-engine-caption {
    width: 100%;
    min-height: 0;
    padding: 0;
  }

  body[data-page="home"] .home-engine-workbench[data-home-engine="iot-platform"] .home-engine-media {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }

  body[data-page="home"] .home-engine-workbench[data-home-engine="iot-platform"] .home-engine-media img {
    width: 100%;
    height: 100% !important;
    max-height: none !important;
    margin: 0;
    padding: clamp(8px, 1.8vw, 16px);
    transform: none;
  }
}

@media (max-width: 820px) {
  body[data-page="home"] .home-engine-workbench[data-home-engine="iot-platform"] .home-engine-media img {
    width: 100%;
    max-width: 100%;
    margin: 0;
    transform: none;
  }
}

body.locale-en[data-page="home"] .home-engine-workbench[data-home-engine="iot-platform"] .home-engine-caption h3 > span {
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: balance;
}

/* V0.25.30 — partnership claim and footer campaign typography. */
.home-partners-heading .home-partners-accent {
  color: #20c2ef;
  background: linear-gradient(90deg, #20c2ef 0%, #155dfc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body:not(.locale-en) .home-partners-heading .home-partners-accent {
  display: inline-block;
  white-space: nowrap;
}

body:not(.locale-en) .footer-action-copy h2 {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(28px, 3.55vw, 56px);
}

/* V0.25.34 — one partner field, three editorial contexts.
   Home and the Nebula Partner Program share the approved deep-space track;
   About Weida keeps the same uninterrupted movement with transparent,
   full-colour marks on a quiet light surface. */
.partner-marquee-section {
  position: relative;
  min-height: min(820px, 86svh);
  padding: clamp(94px, 8vw, 132px) 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}

.star-v2-shell .star-partners-marquee,
.about-light-shell .about-partners-marquee {
  padding: clamp(94px, 8vw, 132px) 0;
}

.star-partners-marquee {
  border-block: 1px solid rgba(118, 190, 241, .12);
}

.about-partners-marquee {
  color: var(--about-ink);
  border-block: 1px solid rgba(109, 147, 180, .2);
  background:
    radial-gradient(ellipse at 18% 16%, rgba(40, 120, 255, .1), transparent 34%),
    radial-gradient(ellipse at 88% 82%, rgba(32, 194, 239, .1), transparent 30%),
    linear-gradient(180deg, #f8fbfe 0%, #edf4f9 100%);
}

.about-partners-marquee::before {
  display: block;
  opacity: .42;
  background-image:
    linear-gradient(rgba(54, 112, 166, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 112, 166, .08) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}

.about-partners-marquee .home-partners-heading > h2 {
  color: #10263a;
}

.about-partners-marquee .home-partners-heading > h2 .home-partners-accent {
  color: #155dfc;
  background: linear-gradient(90deg, #20c2ef 0%, #155dfc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-partners-marquee .home-partners-item img {
  opacity: .9;
  filter: saturate(.94) contrast(1.04);
}

.about-partners-marquee .home-partners-item:hover img {
  opacity: 1;
  filter: saturate(1.05) contrast(1.06);
}

@media (max-width: 820px) {
  .partner-marquee-section { min-height: 0; padding: 76px 0; }
  .star-v2-shell .star-partners-marquee,
  .about-light-shell .about-partners-marquee { padding: 76px 0; }
}

@media (max-width: 820px) {
  body:not(.locale-en) .footer-action-copy h2 {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: clamp(19px, 5.6vw, 34px);
    letter-spacing: -.055em;
  }
}

/* V0.25.31 — About: business scope and company principles share one chapter.
   The work itself leads in a 2x2 field; mission, vision and values form one
   compact dark-blue spine instead of three oversized standalone cards. */
.about-business-values-section {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(40, 120, 255, .045) 1px, transparent 1px),
    linear-gradient(rgba(40, 120, 255, .04) 1px, transparent 1px),
    radial-gradient(circle at 91% 8%, rgba(32, 194, 239, .13), transparent 28%),
    linear-gradient(145deg, #f8fbfe 0%, #eef5fb 56%, #e8f1fa 100%);
  background-size: 72px 72px, 72px 72px, auto, auto;
  border-top: 1px solid var(--about-line);
  border-bottom: 1px solid var(--about-line);
}

.about-light-shell .about-business-values-section {
  min-height: min(820px, calc(100vh - 76px));
  padding: clamp(68px, 6.3vh, 92px) 0 clamp(72px, 6.8vh, 98px);
}

.about-business-values-heading {
  display: grid;
  grid-template-columns: minmax(330px, .82fr) minmax(520px, 1.18fr);
  gap: clamp(48px, 6vw, 94px);
  align-items: end;
}

.about-business-values-heading span,
.about-subsection-heading > span {
  color: var(--about-blue);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .17em;
}

.about-business-values-heading h2 {
  margin-top: 14px;
  color: var(--about-ink);
  font-size: clamp(42px, 3.65vw, 58px);
  font-weight: 740;
  line-height: 1.04;
  letter-spacing: -.05em;
}

.about-business-values-heading > p {
  max-width: 720px;
  justify-self: end;
  color: #47657d;
  font-size: clamp(15px, 1.18vw, 18px);
  line-height: 1.8;
  text-align: right;
}

.about-business-values-layout {
  margin-top: clamp(42px, 5vh, 62px);
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(390px, .76fr);
  gap: clamp(28px, 3vw, 46px);
  align-items: stretch;
}

.about-business-pane { min-width: 0; display: flex; }

.about-business-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.45vw, 20px);
}

.about-business-card {
  position: relative;
  min-width: 0;
  min-height: 178px;
  padding: clamp(24px, 2vw, 30px);
  overflow: hidden;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(183, 205, 223, .82);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(37, 76, 109, .075);
  transition: translate .28s var(--ease), border-color .28s ease, box-shadow .28s ease;
}

.about-business-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(24px, 2vw, 30px);
  width: 42px;
  height: 3px;
  background: linear-gradient(90deg, #20c2ef, #155dfc);
}

.about-business-card h4 {
  color: var(--about-ink);
  font-size: clamp(21px, 1.65vw, 25px);
  font-weight: 740;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.about-business-card p {
  margin-top: 15px;
  color: var(--about-copy);
  font-size: clamp(13px, .95vw, 15px);
  line-height: 1.78;
}

.about-values-compact {
  position: relative;
  min-width: 0;
  padding: clamp(25px, 2.2vw, 34px);
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 7%, rgba(32, 194, 239, .2), transparent 31%),
    linear-gradient(150deg, #06172a 0%, #09223f 56%, #0b2d59 100%);
  border: 1px solid rgba(74, 156, 235, .38);
  border-radius: 20px;
  box-shadow: 0 28px 66px rgba(14, 47, 82, .22);
}

.about-values-compact::after {
  content: "";
  position: absolute;
  top: 94px;
  bottom: 34px;
  left: clamp(63px, 4.8vw, 76px);
  width: 1px;
  background: linear-gradient(180deg, rgba(32, 194, 239, .65), rgba(21, 93, 252, .08));
  pointer-events: none;
}

.about-values-compact .about-subsection-heading {
  position: relative;
  z-index: 2;
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(139, 194, 235, .18);
}

.about-values-compact .about-subsection-heading > span { color: #66dafa; }

.about-values-compact .about-subsection-heading h3 {
  margin-top: 10px;
  color: #fff;
  font-size: clamp(24px, 2vw, 31px);
  line-height: 1.15;
  letter-spacing: -.035em;
}

.about-values-compact-list {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  display: grid;
  gap: 3px;
}

.about-values-compact-list .about-value-card {
  min-width: 0;
  min-height: 104px;
  padding: 12px 6px 12px 0;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}

.about-values-compact-list .about-value-card::before { display: none; }

.about-values-compact-list .about-value-visual {
  width: 58px;
  height: 70px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 14px;
}

.about-values-compact-list .about-value-visual img {
  width: 58px;
  height: 70px;
  display: block;
  object-fit: cover;
  border-radius: 14px;
  filter: none;
  transition: transform .35s var(--ease);
}

.about-values-compact-list .about-value-copy {
  min-width: 0;
  padding: 0 0 0 14px;
  border: 0;
  font-size: 0;
  line-height: 1;
}

.about-values-compact-list .about-value-copy > span {
  color: #66dafa;
  font-size: 9px;
  letter-spacing: .15em;
}

.about-values-compact-list .about-value-label {
  margin-top: 7px;
  color: #fff;
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.1;
}

.about-values-compact-list .about-value-content {
  margin-top: 7px;
  color: rgba(222, 238, 250, .74);
  font-size: clamp(13px, .94vw, 15px);
  font-weight: 530;
  line-height: 1.55;
}

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .about-business-card:hover {
    translate: 0 -4px;
    border-color: rgba(34, 108, 254, .5);
    box-shadow: 0 24px 52px rgba(35, 84, 130, .14);
  }

  .about-values-compact-list .about-value-card:hover {
    translate: none;
    background: rgba(82, 157, 224, .07);
    box-shadow: none;
  }

  .about-values-compact-list .about-value-card:hover .about-value-visual img {
    transform: translateY(-2px);
  }
}

@media (min-width: 821px) and (max-width: 1179px) {
  .about-light-shell .about-business-values-section { min-height: 0; }
  .about-business-values-heading { grid-template-columns: minmax(290px, .82fr) minmax(430px, 1.18fr); gap: 36px; }
  .about-business-values-layout { grid-template-columns: 1fr; }
  .about-values-compact { padding: 26px; }
  .about-values-compact::after { display: none; }
  .about-values-compact-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .about-values-compact-list .about-value-card { min-height: 150px; grid-template-columns: 58px minmax(0, 1fr); padding: 12px; }
  .about-values-compact-list .about-value-copy { padding-left: 12px; }
}

@media (max-width: 820px) {
  .about-light-shell .about-business-values-section { min-height: 0; padding: 72px 0; }
  .about-business-values-heading { grid-template-columns: 1fr; gap: 20px; }
  .about-business-values-heading > p { justify-self: start; text-align: left; }
  .about-business-values-layout { grid-template-columns: 1fr; gap: 28px; }
  .about-business-grid { grid-template-columns: 1fr; }
  .about-business-card { min-height: 0; }
  .about-values-compact { padding: 24px 20px; }
  .about-values-compact::after { left: 47px; }
  .about-values-compact-list .about-value-card { grid-template-columns: 56px minmax(0, 1fr); }
  .about-values-compact-list .about-value-visual,
  .about-values-compact-list .about-value-visual img { width: 48px; height: 58px; border-radius: 12px; }
  .about-values-compact-list .about-value-copy { padding-left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-business-card,
  .about-values-compact-list .about-value-card,
  .about-values-compact-list .about-value-visual img { transition: none; transform: none !important; translate: none !important; }
}

/* ==========================================================
   V0.25.32 — Contact: one credible place, three direct channels
   ========================================================== */
.contact-v2-shell {
  --contact-ink: #061426;
  --contact-blue: #226cfe;
  --contact-cyan: #20c2ef;
  --contact-paper: #f4f7fa;
  color: #102a43;
  background: var(--contact-paper);
}

.contact-v2-hero {
  position: relative;
  min-height: clamp(640px, 76svh, 780px);
  overflow: hidden;
  display: flex;
  align-items: center;
  color: #fff;
  background: var(--contact-ink);
  isolation: isolate;
}

.contact-v2-media,
.contact-v2-media::before,
.contact-v2-media::after {
  position: absolute;
  inset: 0;
}

.contact-v2-media { z-index: -2; margin: 0; overflow: hidden; }

.contact-v2-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 63% center;
  transform: scale(1.01);
  animation: contactV2Drift 14s ease-in-out infinite alternate;
}

.contact-v2-media::before {
  content: "";
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(3, 13, 27, .98) 0%, rgba(4, 19, 38, .94) 31%, rgba(5, 22, 42, .58) 54%, rgba(5, 17, 34, .12) 78%),
    linear-gradient(180deg, rgba(4, 12, 23, .56) 0%, transparent 35%, rgba(3, 12, 24, .36) 100%);
}

.contact-v2-media::after {
  content: "";
  z-index: 2;
  background: linear-gradient(180deg, rgba(4, 15, 28, .14) 72%, rgba(4, 15, 28, .72) 100%);
}

.contact-v2-hero-inner {
  position: relative;
  z-index: 3;
  padding-top: 58px;
  padding-bottom: 82px;
}

.contact-v2-copy { width: min(620px, 48vw); }

.contact-v2-copy > span {
  position: relative;
  padding-left: 25px;
  color: #76dcf8;
  font: 760 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .16em;
}

.contact-v2-copy > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 2px;
  background: var(--contact-cyan);
  transform: translateY(-50%);
}

.contact-v2-copy h1 {
  margin: 22px 0 0;
  color: #fff;
  font-family: "Alibaba PuHuiTi 3.0", "HarmonyOS Sans SC", sans-serif;
  font-size: clamp(60px, 5.3vw, 80px);
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: -.05em;
}

.contact-v2-copy p {
  max-width: 580px;
  margin: 25px 0 0;
  color: rgba(231, 242, 252, .8);
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 500;
  line-height: 1.8;
}

.contact-v2-demo {
  width: fit-content;
  min-width: 168px;
  height: 52px;
  margin-top: 36px;
  padding: 0 21px 0 25px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  color: #fff;
  background: var(--contact-blue);
  border: 1px solid rgba(146, 187, 255, .28);
  border-radius: 6px;
  box-shadow: 0 16px 38px rgba(11, 71, 188, .28);
  transition: color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.contact-v2-demo strong { font-size: 14px; font-weight: 700; }

.contact-v2-demo i {
  font-style: normal;
  font-size: 19px;
  transition: transform .25s ease;
}

.contact-v2-demo:hover {
  color: #fff;
  background: #155dfc;
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(11, 71, 188, .36);
}

.contact-v2-demo:hover i { transform: translate(3px, -3px); }

.contact-v2-demo:focus-visible,
.contact-v2-info-link:focus-visible {
  outline: 2px solid var(--contact-cyan);
  outline-offset: 4px;
}

.contact-v2-details {
  position: relative;
  min-height: 300px;
  padding: 0 0 clamp(92px, 9vw, 142px);
  background:
    radial-gradient(circle at 88% 10%, rgba(34, 108, 254, .07), transparent 27%),
    var(--contact-paper);
}

.contact-v2-details-title {
  position: absolute;
  z-index: 6;
  top: -164px;
  left: max(40px, calc((100% - var(--container)) / 2));
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  color: #fff;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 720;
  line-height: 1.2;
  white-space: normal;
  clip: auto;
  clip-path: none;
}

.contact-v2-info-strip {
  position: relative;
  z-index: 5;
  margin: -106px 0 0;
  min-height: 218px;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.04fr) minmax(0, 1.24fr);
  align-items: stretch;
  color: #102a43;
  background: rgba(255, 255, 255, .985);
  border: 1px solid rgba(43, 84, 119, .1);
  border-radius: 12px;
  box-shadow: 0 28px 74px rgba(2, 19, 38, .17);
  font-style: normal;
}

.contact-v2-info-item {
  position: relative;
  min-width: 0;
  padding: 42px clamp(26px, 3.2vw, 48px);
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 20px;
}

.contact-v2-info-item + .contact-v2-info-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 35px;
  bottom: 35px;
  width: 1px;
  background: #dde5ec;
}

.contact-v2-info-address { grid-template-columns: 46px minmax(0, 1fr); }

.contact-v2-info-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--contact-blue);
  background: #edf4ff;
  border-radius: 50%;
  transition: color .25s ease, background .25s ease, transform .25s ease;
}

.contact-v2-info-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-v2-info-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact-v2-info-copy small {
  color: #63788b;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}

.contact-v2-info-copy strong {
  max-width: 100%;
  margin-top: 12px;
  color: #102a43;
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.contact-v2-info-address .contact-v2-info-copy strong {
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 620;
  line-height: 1.7;
}

.contact-v2-info-copy em {
  margin-top: 6px;
  color: #7a8b9a;
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}

.contact-v2-info-arrow {
  color: #8da0b0;
  font-size: 18px;
  font-style: normal;
  transition: color .25s ease, transform .25s ease;
}

.contact-v2-info-link {
  transition: color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.contact-v2-info-link:hover {
  z-index: 2;
  color: var(--contact-blue);
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(12, 52, 92, .08);
}

.contact-v2-info-link:hover .contact-v2-info-icon {
  color: #fff;
  background: var(--contact-blue);
  transform: translateY(-2px);
}

.contact-v2-info-link:hover .contact-v2-info-copy strong,
.contact-v2-info-link:hover .contact-v2-info-arrow { color: var(--contact-blue); }
.contact-v2-info-link:hover .contact-v2-info-arrow { transform: translateX(4px); }

.locale-en .contact-v2-copy { width: min(680px, 53vw); }
.locale-en .contact-v2-copy h1 { letter-spacing: -.035em; }
.locale-en .contact-v2-info-copy strong { font-size: clamp(17px, 1.35vw, 22px); }
.locale-en .contact-v2-info-address .contact-v2-info-copy strong { font-size: clamp(14px, 1.05vw, 17px); }

@keyframes contactV2Drift {
  from { transform: scale(1.01); }
  to { transform: scale(1.028); }
}

@media (max-width: 1120px) {
  .contact-v2-info-strip { grid-template-columns: 1fr 1fr; }
  .contact-v2-info-address { grid-column: 1 / -1; }
  .contact-v2-info-address::before { top: 0 !important; right: 32px; bottom: auto !important; width: auto !important; height: 1px; }
  .contact-v2-info-item + .contact-v2-info-item::before { top: 30px; bottom: 30px; }
  .contact-v2-details { min-height: 390px; }
}

@media (max-width: 820px) {
  .contact-v2-hero { min-height: 620px; }
  .contact-v2-media img { object-position: 68% center; }
  .contact-v2-media::before {
    background:
      linear-gradient(90deg, rgba(3, 13, 27, .98) 0%, rgba(4, 19, 38, .9) 44%, rgba(5, 22, 42, .4) 78%),
      linear-gradient(180deg, rgba(4, 12, 23, .52), rgba(3, 12, 24, .55));
  }
  .contact-v2-copy,
  .locale-en .contact-v2-copy { width: min(610px, 90%); }
  .contact-v2-copy h1 { font-size: clamp(52px, 11vw, 68px); }
  .contact-v2-info-strip { margin-top: -72px; }
  .contact-v2-details-title { top: -124px; }
  .contact-v2-details { min-height: 420px; }
}

@media (max-width: 620px) {
  .contact-v2-hero { min-height: 590px; }
  .contact-v2-hero-inner { padding-top: 96px; padding-bottom: 64px; }
  .contact-v2-copy,
  .locale-en .contact-v2-copy { width: 100%; }
  .contact-v2-copy p { max-width: 460px; font-size: 15px; }
  .contact-v2-info-strip { grid-template-columns: 1fr; margin-top: -54px; }
  .contact-v2-info-address { grid-column: auto; }
  .contact-v2-info-item { min-height: 148px; padding: 29px 24px; }
  .contact-v2-info-item + .contact-v2-info-item::before,
  .contact-v2-info-address::before { top: 0 !important; right: 24px; bottom: auto !important; width: auto !important; height: 1px; }
  .contact-v2-details-title { top: -98px; left: 20px; font-size: 22px; }
  .contact-v2-details { min-height: 0; padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-v2-media img { animation: none; transform: none; }
  .contact-v2-demo,
  .contact-v2-info-link,
  .contact-v2-info-icon,
  .contact-v2-info-arrow { transition: none; }
}

/* ==========================================================
   V0.25.35 — Star Domain: one editorial heading system
   ========================================================== */
.star-v2-why .star-v2-section-head h2 {
  font-size: clamp(40px, 4.25vw, 66px);
  line-height: 1.06;
}

.locale-en .star-v2-why .star-v2-section-head h2 {
  font-size: clamp(38px, 3.75vw, 60px);
  line-height: 1.06;
}

.star-v2-why .star-v2-value-card,
.star-v2-why .star-v2-value-card:last-child {
  border-right: 0;
}

.star-v2-why .star-v2-value-card h3 {
  margin-top: 0;
}

@media (min-width: 1281px) {
  .star-v2-shell :is(.star-v2-why, .star-v2-enablement, .star-v2-types) .star-v2-section-head {
    grid-template-columns: minmax(540px, .72fr) minmax(700px, 1.28fr);
    gap: clamp(48px, 5vw, 76px);
  }
}

@media (min-width: 821px) and (max-width: 1280px) {
  .star-v2-shell :is(.star-v2-why, .star-v2-enablement, .star-v2-types) .star-v2-section-head {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (min-width: 821px) {
  .star-v2-shell :is(.star-v2-why, .star-v2-enablement, .star-v2-types) .star-v2-section-head > p {
    width: max-content;
    max-width: none;
    margin-left: auto;
    justify-self: end;
    font-size: clamp(14px, 1.02vw, 16px);
    line-height: 1.9;
    text-align: right;
    white-space: nowrap;
  }

  .star-v2-why .star-v2-section-head > p { color: #5d7081; }

  .locale-en .star-v2-shell :is(.star-v2-why, .star-v2-enablement, .star-v2-types) .star-v2-section-head > p {
    width: auto;
    max-width: 760px;
    white-space: normal;
    text-wrap: pretty;
  }
}

@media (max-width: 700px) {
  .star-v2-why .star-v2-section-head h2,
  .locale-en .star-v2-why .star-v2-section-head h2 {
    font-size: clamp(34px, 10vw, 43px);
    white-space: normal;
  }
}

/* ==========================================================
   V0.26 SOLUTION DETAIL SYSTEM
   ========================================================== */
.solution-detail-system {
  color: #f7fbff;
  background: #050c15;
}

.solution-detail-system::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 86% 15%, rgba(21, 93, 252, .14), transparent 30%),
    radial-gradient(circle at 12% 62%, rgba(32, 194, 239, .07), transparent 28%);
}

.solution-detail-system .section {
  --solution-panel: #081727;
  --solution-panel-strong: #0b1e32;
  --solution-line: rgba(93, 174, 255, .2);
  --solution-muted: rgba(225, 237, 248, .64);
  --solution-cyan: #20c2ef;
  --solution-blue: #155dfc;
  position: relative;
  color: #f7fbff;
}
.solution-detail-system .section-heading h2 { color: #fff; }
.solution-detail-system .section-heading p { color: rgba(225, 237, 248, .64); }
.solution-detail-system .section-label { color: #20c2ef; }

.solution-detail-nav {
  background: rgba(4, 12, 22, .94);
  border-color: rgba(93, 174, 255, .2);
  backdrop-filter: blur(18px);
}

.solution-detail-overview { padding-top: clamp(88px, 9vw, 142px); }
.solution-detail-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr);
  gap: clamp(54px, 8vw, 130px);
  align-items: start;
}

.solution-detail-overview .section-heading p {
  max-width: 790px;
  margin-top: 34px;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.95;
}

.solution-detail-value {
  min-height: 360px;
  padding: clamp(34px, 4vw, 54px);
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(145deg, rgba(30, 103, 229, .2), transparent 58%),
    var(--solution-panel);
  border-top: 1px solid rgba(92, 202, 255, .52);
  box-shadow: 0 38px 100px rgba(0, 0, 0, .2);
}

.solution-detail-value > span,
.solution-detail-related > .container > div:first-child > span {
  color: var(--solution-cyan);
  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.solution-detail-value h2 {
  margin-top: 50px;
  color: #fff;
  font-size: clamp(28px, 2.5vw, 42px);
  line-height: 1.28;
  text-wrap: balance;
}

.solution-detail-value p {
  margin-top: 24px;
  color: var(--solution-muted);
  font-size: 15px;
  line-height: 1.85;
}

.solution-detail-value > div {
  margin-top: auto;
  padding-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.solution-detail-value i,
.solution-detail-connection-line i {
  padding: 8px 11px;
  color: rgba(239, 248, 255, .78);
  border: 1px solid var(--solution-line);
  font-size: 12px;
  font-style: normal;
}

.solution-detail-practice {
  overflow: hidden;
  background: linear-gradient(180deg, rgba(6, 18, 31, .25), rgba(7, 20, 34, .82));
}

.solution-detail-section-head .section-heading {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(480px, 1.28fr);
  column-gap: clamp(60px, 8vw, 140px);
  align-items: end;
}

.solution-detail-section-head .section-heading .section-label,
.solution-detail-section-head .section-heading h2 { grid-column: 1; }
.solution-detail-section-head .section-heading p {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 680px;
  margin: 0 0 8px auto;
  text-align: right;
}

.solution-detail-practice-grid {
  margin-top: clamp(46px, 6vw, 82px);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .55fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: stretch;
}

.solution-detail-media-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 14px;
}

.solution-detail-media-grid.is-single { grid-template-columns: 1fr; }
.solution-detail-media-grid figure {
  position: relative;
  min-height: 480px;
  margin: 0;
  background: #020812;
  overflow: hidden;
}

.solution-detail-media-grid figure:nth-child(2) { margin-top: 74px; }
.solution-detail-media-grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #030b16;
  transition: transform .65s cubic-bezier(.2, .75, .25, 1);
}

.solution-detail-media-grid figure:hover img { transform: scale(1.018); }
.solution-detail-media-grid figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 22px 24px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(0deg, rgba(2, 8, 18, .96), transparent);
}

.solution-detail-media-grid figcaption span {
  color: var(--solution-cyan);
  font: 600 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}

.solution-detail-media-grid figcaption b {
  max-width: 72%;
  color: #fff;
  font-size: 14px;
  line-height: 1.55;
  text-align: right;
}

.solution-detail-highlights {
  margin: 0;
  padding: 0;
  display: grid;
  align-content: center;
  list-style: none;
  border-top: 1px solid var(--solution-line);
}

.solution-detail-highlights li {
  min-height: 108px;
  padding: 25px 4px;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 18px;
  align-items: start;
  border-bottom: 1px solid var(--solution-line);
}

.solution-detail-highlights li i {
  width: 8px;
  height: 8px;
  margin-top: 9px;
  background: linear-gradient(135deg, var(--solution-cyan), var(--solution-blue));
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(32, 194, 239, .55);
}

.solution-detail-highlights p {
  margin: 0;
  color: rgba(238, 247, 255, .8);
  font-size: 15px;
  line-height: 1.85;
}

.solution-detail-capabilities { background: rgba(2, 10, 18, .48); }
.solution-detail-capability-stage {
  grid-template-columns: minmax(190px, .34fr) minmax(0, 1fr) minmax(290px, .54fr);
  border: 0;
  border-top: 1px solid rgba(92, 202, 255, .42);
  background: var(--solution-panel);
  box-shadow: 0 46px 120px rgba(0, 0, 0, .24);
}

.solution-detail-capability-stage .solution-capability-nav button {
  grid-template-columns: 1fr;
  padding-inline: 24px;
}
.solution-detail-capability-stage .solution-capability-nav button b { font-size: 14px; line-height: 1.45; }
.solution-detail-capability-stage .solution-capability-media img { padding: clamp(12px, 2vw, 28px); }
.solution-detail-capability-stage .solution-capability-copy > strong { display: none; }

.solution-detail-delivery { border-top: 1px solid var(--solution-line); }
.solution-detail-delivery-head { max-width: 880px; }
.solution-detail-delivery-grid {
  margin-top: clamp(48px, 6vw, 82px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--solution-line);
  border-left: 1px solid var(--solution-line);
}

.solution-detail-delivery-grid article {
  min-height: 250px;
  padding: clamp(28px, 3vw, 42px);
  border-right: 1px solid var(--solution-line);
  border-bottom: 1px solid var(--solution-line);
  background: linear-gradient(150deg, rgba(24, 95, 205, .11), transparent 56%);
}

.solution-detail-delivery-grid span {
  color: var(--solution-cyan);
  font-size: 13px;
  font-weight: 700;
}

.solution-detail-delivery-grid p {
  margin-top: 78px;
  color: rgba(236, 246, 255, .76);
  font-size: 14px;
  line-height: 1.85;
}

.solution-detail-connection-line {
  padding: 28px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid var(--solution-line);
}

.solution-detail-connection-line > span {
  margin-right: auto;
  color: rgba(255, 255, 255, .4);
  font: 600 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
}

.solution-detail-related { padding-block: clamp(72px, 8vw, 118px); }
.solution-detail-related-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 50px;
  align-items: end;
}
.solution-detail-related h2 {
  max-width: 820px;
  margin-top: 18px;
  color: #fff;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.12;
}
.solution-detail-related p {
  max-width: 760px;
  margin-top: 22px;
  color: var(--solution-muted);
  line-height: 1.8;
}
.solution-detail-related-grid > div:last-child { display: flex; gap: 12px; }

@media (max-width: 1120px) {
  .solution-detail-overview-grid,
  .solution-detail-practice-grid { grid-template-columns: 1fr; }
  .solution-detail-value { min-height: 320px; }
  .solution-detail-highlights { grid-template-columns: 1fr 1fr; }
  .solution-detail-highlights li:nth-child(odd) { border-right: 1px solid var(--solution-line); }
  .solution-detail-capability-stage { grid-template-columns: 190px minmax(0, 1fr); }
  .solution-detail-capability-stage .solution-capability-copy { grid-column: 1 / -1; }
  .solution-detail-delivery-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .solution-detail-overview-grid { gap: 34px; }
  .solution-detail-section-head .section-heading { display: block; }
  .solution-detail-section-head .section-heading p { margin: 20px 0 0; text-align: left; }
  .solution-detail-media-grid { grid-template-columns: 1fr; }
  .solution-detail-media-grid figure,
  .solution-detail-media-grid figure:nth-child(2) { min-height: 320px; margin-top: 0; }
  .solution-detail-highlights { grid-template-columns: 1fr; }
  .solution-detail-highlights li:nth-child(odd) { border-right: 0; }
  .solution-detail-capability-stage { grid-template-columns: 1fr; }
  .solution-detail-capability-stage .solution-capability-nav { grid-template-columns: 1fr 1fr; }
  .solution-detail-capability-stage .solution-capability-copy { grid-column: auto; }
  .solution-detail-delivery-grid { grid-template-columns: 1fr; }
  .solution-detail-delivery-grid p { margin-top: 38px; }
  .solution-detail-related-grid { grid-template-columns: 1fr; }
  .solution-detail-related-grid > div:last-child { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .solution-detail-media-grid img { transition: none; }
}
/* V0.26 CASE DETAIL SYSTEM
   A restrained project record: statement, evidence, overview. */
body[data-page="case-detail"] .case-v026-detail {
  min-height: 100vh;
  overflow: clip;
  color: rgba(230, 240, 250, .76);
  background:
    radial-gradient(circle at 84% 8%, rgba(32, 89, 211, .16), transparent 28%),
    linear-gradient(180deg, #030912 0%, #06111c 52%, #040b13 100%);
}

.seo-static-summary {
  max-width: 1180px;
  margin: 0 auto;
  padding: 150px 32px 96px;
  color: #fff;
  background: #07111f;
}

.seo-static-summary h1 { margin: 0 0 22px; font-size: clamp(44px, 5vw, 76px); line-height: 1.08; }
.seo-static-summary p { max-width: 820px; margin: 0; color: rgba(231, 241, 252, .7); font-size: 19px; line-height: 1.8; }
.js-ready .seo-static-summary { display: none; }

body[data-page="case-detail"] .case-v026-hero {
  position: relative;
  padding: clamp(126px, 14vh, 188px) 0 clamp(64px, 8vh, 104px);
  border-bottom: 1px solid rgba(70, 169, 255, .15);
}

body[data-page="case-detail"] .case-v026-hero::after {
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent 4%, #20c2ef 35%, rgba(21, 93, 252, .18) 72%, transparent 96%);
}

body[data-page="case-detail"] .case-v026-hero-inner { max-width: 1380px; }

body[data-page="case-detail"] .case-breadcrumb {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 clamp(48px, 7vh, 82px);
  color: rgba(210, 225, 240, .46);
  font-size: 13px;
}

body[data-page="case-detail"] .case-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color .22s ease;
}

body[data-page="case-detail"] .case-breadcrumb a:hover,
body[data-page="case-detail"] .case-breadcrumb a:focus-visible { color: #fff; }

body[data-page="case-detail"] .case-v026-category,
body[data-page="case-detail"] .case-v026-section-label span:last-child,
body[data-page="case-detail"] .case-v026-overview-title > span {
  margin: 0;
  color: #20c2ef;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
}

body[data-page="case-detail"] .case-v026-hero h1 {
  max-width: 1280px;
  margin: 17px 0 28px;
  color: #fff;
  font-size: clamp(48px, 5.5vw, 86px);
  font-weight: 650;
  line-height: 1.09;
  letter-spacing: -.035em;
  text-wrap: balance;
}

body[data-page="case-detail"] .case-v026-summary {
  max-width: 1050px;
  margin: 0;
  color: rgba(229, 239, 249, .7);
  font-size: clamp(19px, 1.7vw, 28px);
  line-height: 1.75;
  text-wrap: pretty;
}

body[data-page="case-detail"] .case-v026-media {
  padding: clamp(62px, 8vw, 116px) 0 clamp(82px, 9vw, 132px);
}

body[data-page="case-detail"] .case-v026-media > .container,
body[data-page="case-detail"] .case-v026-overview > .container { max-width: 1460px; }

body[data-page="case-detail"] .case-v026-section-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 22px;
  color: rgba(228, 239, 250, .62);
  font-size: 14px;
}

body[data-page="case-detail"] .case-v026-media-frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(66, 169, 255, .26);
  border-radius: 10px;
  background: #01070d;
  box-shadow: 0 42px 110px rgba(0, 0, 0, .42);
}

body[data-page="case-detail"] .case-v026-media-gallery {
  display: grid;
  gap: 22px;
}

body[data-page="case-detail"] .case-v026-media-gallery.has-multiple {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr);
  align-items: stretch;
}

body[data-page="case-detail"] .case-v026-media-gallery.has-multiple .case-v026-media-secondary img {
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

body[data-page="case-detail"] .case-v026-media-frame::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  box-shadow: inset 0 0 80px rgba(7, 46, 87, .13);
}

body[data-page="case-detail"] .case-v026-media-frame img,
body[data-page="case-detail"] .case-v026-media-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #01070d;
}

body[data-page="case-detail"] .case-v026-media-frame figcaption {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  color: rgba(255, 255, 255, .74);
  background: rgba(2, 10, 20, .72);
  font-size: 12px;
  backdrop-filter: blur(12px);
}

body[data-page="case-detail"] .case-v026-overview {
  position: relative;
  padding: clamp(86px, 10vw, 152px) 0 clamp(112px, 13vw, 190px);
  border-top: 1px solid rgba(97, 156, 214, .12);
  background:
    linear-gradient(90deg, rgba(9, 29, 48, .4) 1px, transparent 1px),
    linear-gradient(rgba(9, 29, 48, .4) 1px, transparent 1px);
  background-size: 80px 80px;
}

body[data-page="case-detail"] .case-v026-overview::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, #050d16 0%, rgba(5, 13, 22, .68) 48%, #050d16 100%);
}

body[data-page="case-detail"] .case-v026-overview-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr);
  gap: clamp(60px, 10vw, 170px);
  align-items: start;
}

body[data-page="case-detail"] .case-v026-overview-title { position: sticky; top: 130px; }

body[data-page="case-detail"] .case-v026-overview-title h2 {
  margin: 16px 0 0;
  color: #fff;
  font-size: clamp(42px, 4.7vw, 70px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

body[data-page="case-detail"] .case-v026-overview-copy {
  padding-top: 25px;
  border-top: 1px solid rgba(51, 176, 255, .42);
}

body[data-page="case-detail"] .case-v026-overview-copy p {
  margin: 0 0 24px;
  color: rgba(221, 234, 247, .73);
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 2;
  text-wrap: pretty;
}

body[data-page="case-detail"] .case-v026-overview-copy p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  body[data-page="case-detail"] .case-v026-hero { padding-top: 112px; }
  body[data-page="case-detail"] .case-v026-hero h1 { font-size: clamp(38px, 9.5vw, 62px); }
  body[data-page="case-detail"] .case-v026-overview-grid { grid-template-columns: 1fr; gap: 42px; }
  body[data-page="case-detail"] .case-v026-overview-title { position: static; }
  body[data-page="case-detail"] .case-v026-media-gallery.has-multiple { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body[data-page="case-detail"] .case-breadcrumb { margin-bottom: 40px; }
  body[data-page="case-detail"] .case-v026-summary { font-size: 17px; }
  body[data-page="case-detail"] .case-v026-section-label span:last-child { display: none; }
  body[data-page="case-detail"] .case-v026-media-frame { border-radius: 6px; }
  body[data-page="case-detail"] .case-v026-media-frame figcaption { right: 10px; bottom: 9px; max-width: calc(100% - 20px); }
}

/* ==========================================================
   V0.27.5 — Contact conversion, About principles and 5-column footer
   ========================================================== */

/* Contact: the lead form and its title share one first-screen composition. */
body[data-page="contact"] .contact-direct-shell {
  --contact-header-height: 76px;
  color: #08182c;
  background: #eef3f8;
}

body[data-page="contact"] .contact-expert-hero {
  position: relative;
  height: 100svh;
  min-height: 720px;
  padding: calc(var(--contact-header-height) + clamp(20px, 3vh, 32px)) 0 clamp(24px, 3.2vh, 34px);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #061426;
}

body[data-page="contact"] .contact-expert-background,
body[data-page="contact"] .contact-expert-overlay {
  position: absolute;
  inset: 0;
}

body[data-page="contact"] .contact-expert-background { z-index: -2; margin: 0; }

body[data-page="contact"] .contact-expert-background img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 58%;
  filter: saturate(.82) contrast(1.06) brightness(.76);
}

body[data-page="contact"] .contact-expert-overlay {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(2, 10, 25, .84) 0%, rgba(4, 21, 46, .66) 48%, rgba(4, 18, 39, .48) 100%),
    linear-gradient(180deg, rgba(2, 8, 18, .16) 0%, rgba(2, 9, 21, .7) 100%);
}

body[data-page="contact"] .contact-expert-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(18px, 2.6vh, 30px);
  align-content: center;
}

body[data-page="contact"] .contact-expert-heading {
  align-self: end;
}

body[data-page="contact"] .contact-expert-heading h1 {
  max-width: 1080px;
  margin: 0;
  color: #fff;
  font-size: clamp(36px, 3.55vw, 58px);
  font-weight: 650;
  line-height: 1.14;
  letter-spacing: -.045em;
  text-shadow: 0 10px 36px rgba(0, 8, 24, .34);
}

body[data-page="contact"] .contact-expert-heading .contact-direct-context {
  width: fit-content;
  margin: 14px 0 0;
  color: rgba(227, 239, 252, .8);
  background: rgba(6, 25, 49, .58);
  border-color: rgba(99, 198, 255, .32);
  backdrop-filter: blur(12px);
}

body[data-page="contact"] .contact-expert-heading .contact-direct-context strong { color: #70dcff; }

body[data-page="contact"] .contact-expert-form-shell {
  min-height: 0;
  height: clamp(380px, 58svh, 570px);
  padding: 10px 10px 7px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  background: rgba(255, 255, 255, .98);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 16px;
  box-shadow: 0 30px 90px rgba(0, 10, 32, .38);
  backdrop-filter: blur(14px);
}

body[data-page="contact"] .contact-expert-form {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  background: #fff;
  border: 0;
  border-radius: 10px;
}

body[data-page="contact"] .contact-expert-fallback {
  margin: 6px 8px 0;
  color: #738296;
  font-size: 11px;
  line-height: 1.5;
  text-align: right;
}

body[data-page="contact"] .contact-expert-fallback a { color: #155dfc; }

/* Contact location: the supplied map remains the visual base; the office card
   sits immediately beside the Science Gate Tower A marker. */
body[data-page="contact"] .contact-office-section {
  min-height: calc(100svh - var(--contact-header-height));
  background: #edf2f7;
}

body[data-page="contact"] .contact-office-section > .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body[data-page="contact"] .contact-office-stage {
  position: relative;
  min-height: calc(100svh - var(--contact-header-height));
  overflow: hidden;
}

body[data-page="contact"] .contact-office-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

body[data-page="contact"] .contact-office-card {
  position: absolute;
  z-index: 2;
  top: clamp(96px, 16vh, 170px);
  left: 58%;
  width: min(620px, 37vw);
  padding: clamp(28px, 2.8vw, 44px);
  color: #10151b;
  background: rgba(255, 255, 255, .965);
  border: 1px solid rgba(36, 78, 134, .12);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(50, 78, 116, .22);
  backdrop-filter: blur(16px);
  font-style: normal;
}

body[data-page="contact"] .contact-office-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
}

body[data-page="contact"] .contact-office-card h3 {
  margin: 0;
  color: #0b1017;
  font-size: clamp(25px, 2.1vw, 38px);
  font-weight: 660;
  line-height: 1.22;
  letter-spacing: -.035em;
}

body[data-page="contact"] .contact-office-card-head > a {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #155dfc;
  border: 1px solid rgba(21, 93, 252, .26);
  border-radius: 50%;
  font-size: 17px;
  text-decoration: none;
}

body[data-page="contact"] .contact-office-card-head > a:hover { background: rgba(21, 93, 252, .07); }

body[data-page="contact"] .contact-office-divider {
  height: 1px;
  margin: clamp(22px, 2vw, 30px) 0;
  background: rgba(24, 34, 48, .24);
}

body[data-page="contact"] .contact-office-row {
  min-width: 0;
  padding: 12px 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  color: #12171e;
  font-size: clamp(15px, 1.18vw, 20px);
  line-height: 1.65;
  text-decoration: none;
}

body[data-page="contact"] .contact-office-row svg {
  width: 26px;
  height: 26px;
  display: block;
  fill: currentColor;
}

body[data-page="contact"] .contact-office-row:hover { color: #155dfc; }

/* About: values move into the company hero as one horizontal principle rail. */
body[data-page="about"] .about-hero-values {
  width: min(940px, 78vw);
  margin-top: clamp(28px, 4vh, 46px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="about"] .about-hero-value {
  min-width: 0;
  min-height: 94px;
  padding: 13px 16px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  background: rgba(5, 20, 40, .54);
  border: 1px solid rgba(111, 179, 239, .25);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 9, 24, .18);
  backdrop-filter: blur(12px);
}

body[data-page="about"] .about-hero-value figure {
  width: 50px;
  height: 60px;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
}

body[data-page="about"] .about-hero-value img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body[data-page="about"] .about-hero-value span {
  display: block;
  color: #65dcff;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .12em;
}

body[data-page="about"] .about-hero-value p {
  margin: 7px 0 0;
  color: rgba(244, 249, 255, .92);
  font-size: clamp(12px, .84vw, 14px);
  font-weight: 560;
  line-height: 1.5;
}

body[data-page="about"] .about-light-shell .about-business-values-section {
  min-height: 0;
  padding: clamp(76px, 7.5vw, 112px) 0;
}

body[data-page="about"] .about-business-values-heading {
  display: block;
}

body[data-page="about"] .about-business-values-layout {
  margin-top: clamp(38px, 4.8vw, 62px);
  grid-template-columns: minmax(0, 1fr);
}

body[data-page="about"] .about-business-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.25vw, 18px);
}

body[data-page="about"] .about-business-card {
  min-height: 230px;
  padding: clamp(25px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 14px;
}

body[data-page="about"] .about-business-card::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 26px;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(34, 108, 254, .5);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(34, 108, 254, .06);
}

/* Footer: five equal-status information columns, with contact and channels
   kept visible even when the browser is not maximised. */
.site-footer .footer-main {
  grid-template-columns: repeat(3, minmax(140px, .9fr)) minmax(210px, 1.08fr) minmax(200px, .98fr);
  gap: clamp(22px, 2.2vw, 42px);
}

.site-footer .footer-nav-column,
.site-footer .footer-contact-card,
.site-footer .footer-social {
  min-width: 0;
}

.site-footer .footer-nav-column a,
.site-footer .footer-nav-column span {
  display: block;
  color: rgba(220, 233, 244, .56);
  font-size: 12px;
  line-height: 1.45;
  text-decoration: none;
}

.site-footer .footer-nav-column > a:not(.footer-nav-title) { padding: 5px 0; }

.site-footer .footer-nav-column .footer-nav-title {
  min-height: 28px;
  margin-bottom: 13px;
  color: #f5f9fd;
  font-size: 14px;
  font-weight: 680;
}

.site-footer .footer-nav-column a:hover,
.site-footer .footer-nav-column .footer-nav-more { color: #9fe9ff; }

.site-footer .footer-nav-column .footer-nav-more { margin-top: 10px; font-size: 11px; }

.site-footer .footer-contact-entry > img {
  opacity: 1;
  filter: brightness(0) invert(1);
}

.site-footer .footer-contact-card .footer-contact-phone,
.site-footer .footer-contact-card address {
  margin-top: 0;
  color: rgba(231, 240, 248, .72);
  font-size: 12px;
  font-weight: 520;
  line-height: 1.7;
  letter-spacing: 0;
  white-space: normal;
}

.site-footer .footer-contact-card .footer-contact-phone { color: #fff; }

.site-footer .footer-social {
  width: 100%;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.site-footer .footer-social header { min-height: 28px; }

.site-footer .footer-qr-grid {
  width: min(100%, 220px);
  margin-top: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 1101px) {
  body[data-page="contact"] .contact-expert-heading h1 { white-space: nowrap; }
}

@media (max-width: 1180px) {
  body[data-page="about"] .about-business-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  body[data-page="contact"] .contact-office-section,
  body[data-page="contact"] .contact-office-stage { min-height: 0; }
  body[data-page="contact"] .contact-office-stage { display: grid; overflow: visible; }
  body[data-page="contact"] .contact-office-map {
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  body[data-page="contact"] .contact-office-card {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 40px);
    margin: -42px auto 52px;
  }
  .site-footer .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  body[data-page="contact"] .contact-expert-hero {
    height: auto;
    min-height: calc(100svh - 70px);
    padding: 40px 0;
  }
  body[data-page="contact"] .contact-expert-inner { height: auto; }
  body[data-page="contact"] .contact-expert-form-shell { height: 610px; }
  body[data-page="about"] .about-hero-values {
    width: 100%;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body[data-page="about"] .about-hero-values::-webkit-scrollbar { display: none; }
  body[data-page="about"] .about-hero-value { min-width: 235px; }
  body[data-page="about"] .about-business-grid { grid-template-columns: 1fr; }
  body[data-page="about"] .about-business-card { min-height: 190px; }
}

@media (max-width: 540px) {
  body[data-page="contact"] .contact-expert-heading h1 { font-size: 34px; }
  body[data-page="contact"] .contact-expert-form-shell { height: 570px; padding: 7px; border-radius: 12px; }
  body[data-page="contact"] .contact-office-card { width: calc(100% - 24px); padding: 24px 20px; }
  body[data-page="contact"] .contact-office-card h3 { font-size: 24px; }
  body[data-page="contact"] .contact-office-row { grid-template-columns: 24px minmax(0, 1fr); gap: 13px; font-size: 14px; }
  body[data-page="contact"] .contact-office-row svg { width: 22px; height: 22px; }
  .site-footer .footer-main { grid-template-columns: 1fr; }
  .site-footer .footer-qr-grid { width: min(100%, 224px); }
}

@media (max-height: 760px) and (min-width: 821px) {
  body[data-page="contact"] .contact-expert-hero {
    padding: calc(var(--contact-header-height) + 12px) 0 18px;
  }
  body[data-page="contact"] .contact-expert-heading h1 { font-size: clamp(34px, 3.2vw, 48px); }
  body[data-page="contact"] .contact-expert-form-shell { height: clamp(350px, 54svh, 430px); }
}

/* ==========================================================
   V0.27.6 — Native contact intake and framed office map
   ========================================================== */

body[data-page="contact"] .contact-expert-hero {
  height: auto;
  min-height: max(720px, 100svh);
  padding: calc(var(--contact-header-height) + clamp(14px, 2.2vh, 24px)) 0 clamp(18px, 2.8vh, 28px);
}

body[data-page="contact"] .contact-expert-inner {
  height: auto;
  grid-template-rows: auto auto;
  gap: clamp(12px, 1.9vh, 20px);
  align-content: center;
}

body[data-page="contact"] .contact-expert-heading h1 {
  font-size: clamp(36px, 3.25vw, 52px);
}

body[data-page="contact"] .contact-expert-heading .contact-direct-context {
  margin-top: 9px;
}

body[data-page="contact"] .contact-inquiry-card {
  width: 100%;
  min-width: 0;
  min-height: 430px;
  padding: clamp(24px, 2.2vw, 32px) clamp(22px, 2.4vw, 34px);
  display: grid;
  align-content: center;
  color: #102037;
  background: rgba(250, 252, 255, .975);
  border: 1px solid rgba(255, 255, 255, .94);
  border-radius: 16px;
  box-shadow: 0 28px 84px rgba(0, 10, 32, .38);
  backdrop-filter: blur(18px);
}

body[data-page="contact"] .contact-service-fieldset {
  position: relative;
  min-width: 0;
  margin: 0 0 20px;
  padding: 0 0 0 96px;
  border: 0;
}

body[data-page="contact"] .contact-service-fieldset legend {
  position: absolute;
  left: 0;
  top: 11px;
  width: 84px;
  padding: 0;
  color: #22344c;
  font-size: 13px;
  font-weight: 680;
  line-height: 1.4;
}

body[data-page="contact"] .contact-service-fieldset em,
body[data-page="contact"] .contact-form-field em {
  margin-left: 3px;
  color: #155dfc;
  font-style: normal;
}

body[data-page="contact"] .contact-service-options {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="contact"] .contact-service-options label {
  min-width: 0;
  cursor: pointer;
}

body[data-page="contact"] .contact-service-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body[data-page="contact"] .contact-service-options span {
  min-height: 46px;
  padding: 10px 14px;
  display: grid;
  place-items: center;
  color: #4e6077;
  background: #f1f5fa;
  border: 1px solid #dbe4ef;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 590;
  line-height: 1.2;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body[data-page="contact"] .contact-service-options input:checked + span {
  color: #fff;
  background: #155dfc;
  border-color: #155dfc;
  box-shadow: 0 8px 20px rgba(21, 93, 252, .2);
}

body[data-page="contact"] .contact-service-options input:focus-visible + span {
  outline: 3px solid rgba(32, 194, 239, .28);
  outline-offset: 2px;
}

body[data-page="contact"] .contact-form-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px 16px;
  align-items: end;
}

body[data-page="contact"] .contact-form-field {
  min-width: 0;
  display: grid;
  gap: 8px;
}

body[data-page="contact"] .contact-form-field--quarter { grid-column: span 3; }
body[data-page="contact"] .contact-form-field--third { grid-column: span 4; }
body[data-page="contact"] .contact-form-field--needs { grid-column: span 8; }

body[data-page="contact"] .contact-form-field > span {
  color: #31445e;
  font-size: 12px;
  font-weight: 640;
  line-height: 1.3;
}

body[data-page="contact"] .contact-form-field input,
body[data-page="contact"] .contact-form-field select,
body[data-page="contact"] .contact-form-field textarea {
  width: 100%;
  min-width: 0;
  color: #102037;
  background: #fff;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  outline: 0;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

body[data-page="contact"] .contact-form-field input,
body[data-page="contact"] .contact-form-field select {
  height: 46px;
  padding: 0 12px;
}

body[data-page="contact"] .contact-form-field textarea {
  height: 90px;
  padding: 10px 12px;
  resize: none;
  line-height: 1.55;
}

body[data-page="contact"] .contact-form-field input::placeholder,
body[data-page="contact"] .contact-form-field textarea::placeholder { color: #9aa7b7; }

body[data-page="contact"] .contact-form-field input:focus,
body[data-page="contact"] .contact-form-field select:focus,
body[data-page="contact"] .contact-form-field textarea:focus {
  border-color: #3f7cff;
  box-shadow: 0 0 0 3px rgba(21, 93, 252, .1);
}

body[data-page="contact"] .contact-inquiry-card.has-errors input:invalid,
body[data-page="contact"] .contact-inquiry-card.has-errors select:invalid,
body[data-page="contact"] .contact-inquiry-card.has-errors textarea:invalid {
  border-color: #d94c4c;
  background: #fffafa;
}

body[data-page="contact"] [data-contact-other-field][hidden] { display: none !important; }

body[data-page="contact"] .contact-form-actions {
  grid-column: span 4;
  min-width: 0;
  min-height: 114px;
  display: grid;
  grid-template-rows: auto 46px minmax(14px, auto);
  gap: 7px;
  align-content: end;
}

body[data-page="contact"] .contact-privacy-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #697a8f;
  font-size: 11px;
  line-height: 1.45;
  cursor: pointer;
}

body[data-page="contact"] .contact-privacy-check input {
  width: 14px;
  height: 14px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  accent-color: #155dfc;
}

body[data-page="contact"] .contact-privacy-check a { color: #155dfc; }

body[data-page="contact"] .contact-form-submit {
  width: 100%;
  min-height: 46px;
  padding: 0 20px;
  color: #fff;
  background: linear-gradient(90deg, #155dfc 0%, #2779ff 100%);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(21, 93, 252, .22);
  font: inherit;
  font-size: 14px;
  font-weight: 680;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

body[data-page="contact"] .contact-form-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 13px 28px rgba(21, 93, 252, .3);
  filter: brightness(1.04);
}

body[data-page="contact"] .contact-form-submit:focus-visible {
  outline: 3px solid rgba(32, 194, 239, .38);
  outline-offset: 2px;
}

body[data-page="contact"] .contact-form-status {
  min-height: 14px;
  margin: 0;
  color: #6b7c90;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
}

/* The office map is a framed location graphic, not a full-screen backdrop. */
body[data-page="contact"] .contact-office-section {
  min-height: 0;
  padding: clamp(42px, 7vh, 76px) 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(66, 138, 228, .09), transparent 31%),
    #edf2f7;
}

body[data-page="contact"] .contact-office-stage {
  position: relative;
  width: min(1180px, calc(100% - 80px), calc((100svh - 180px) * 1.773));
  min-height: 0;
  aspect-ratio: 3840 / 2166;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(36, 78, 134, .12);
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(39, 73, 118, .15);
}

body[data-page="contact"] .contact-office-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

body[data-page="contact"] .contact-office-card {
  top: 18%;
  right: 1.2%;
  left: auto;
  width: clamp(400px, 38%, 480px);
  padding: clamp(24px, 2.2vw, 36px);
  border-radius: 14px;
}

body[data-page="contact"] .contact-office-card h3 {
  font-size: clamp(22px, 1.7vw, 30px);
  letter-spacing: -.025em;
}

html[lang^="zh"] body[data-page="contact"] .contact-office-card h3 {
  white-space: nowrap;
  font-size: clamp(20px, 1.55vw, 27px);
}

body[data-page="contact"] .contact-office-divider { margin: clamp(17px, 1.6vw, 24px) 0; }

body[data-page="contact"] .contact-office-row {
  padding: 9px 0;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 14px;
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.55;
}

body[data-page="contact"] .contact-office-row svg { width: 23px; height: 23px; }

@media (max-width: 1100px) and (min-width: 821px) {
  body[data-page="contact"] .contact-form-field--quarter { grid-column: span 6; }
  body[data-page="contact"] .contact-form-field--third { grid-column: span 4; }
  body[data-page="contact"] .contact-form-field--needs { grid-column: span 8; }
  body[data-page="contact"] .contact-inquiry-card { min-height: 0; padding-top: 22px; padding-bottom: 22px; }
}

@media (max-width: 820px) {
  body[data-page="contact"] .contact-expert-hero { height: auto; padding-top: 100px; }
  body[data-page="contact"] .contact-inquiry-card { min-height: 0; padding: 18px; }
  body[data-page="contact"] .contact-form-field--quarter,
  body[data-page="contact"] .contact-form-field--third { grid-column: span 6; }
  body[data-page="contact"] .contact-form-field--needs,
  body[data-page="contact"] .contact-form-actions { grid-column: 1 / -1; }
  body[data-page="contact"] .contact-form-actions { min-height: 0; }
  body[data-page="contact"] .contact-office-section { padding: 34px 0 48px; }
  body[data-page="contact"] .contact-office-stage {
    width: calc(100% - 40px);
    min-height: 0;
    display: block;
    overflow: hidden;
  }
  body[data-page="contact"] .contact-office-card {
    position: absolute;
    top: 14%;
    right: 3%;
    left: auto;
    width: min(350px, 46%);
    margin: 0;
    padding: 20px;
  }
  body[data-page="contact"] .contact-office-card h3 { font-size: 20px; }
  body[data-page="contact"] .contact-office-row { font-size: 13px; }
}

@media (max-width: 620px) {
  body[data-page="contact"] .contact-expert-heading h1 { font-size: 33px; }
  body[data-page="contact"] .contact-service-fieldset { padding: 0; }
  body[data-page="contact"] .contact-service-fieldset legend { position: static; width: auto; margin-bottom: 8px; }
  body[data-page="contact"] .contact-service-options { grid-template-columns: 1fr; }
  body[data-page="contact"] .contact-form-field--quarter,
  body[data-page="contact"] .contact-form-field--third { grid-column: 1 / -1; }
  body[data-page="contact"] .contact-office-stage {
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  body[data-page="contact"] .contact-office-map {
    position: relative;
    aspect-ratio: 3840 / 2166;
    border: 1px solid rgba(36, 78, 134, .12);
    border-radius: 14px;
    box-shadow: 0 18px 46px rgba(39, 73, 118, .14);
  }
  body[data-page="contact"] .contact-office-card {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin: 14px 0 0;
  }
}

@media (max-height: 760px) and (min-width: 1101px) {
  body[data-page="contact"] .contact-expert-hero { padding-top: calc(var(--contact-header-height) + 10px); padding-bottom: 14px; }
  body[data-page="contact"] .contact-expert-heading h1 { font-size: clamp(34px, 3vw, 46px); }
  body[data-page="contact"] .contact-inquiry-card { min-height: 410px; padding-top: 21px; padding-bottom: 21px; }
  body[data-page="contact"] .contact-service-fieldset { margin-bottom: 16px; }
  body[data-page="contact"] .contact-form-grid { row-gap: 13px; }
  body[data-page="contact"] .contact-form-field input,
  body[data-page="contact"] .contact-form-field select { height: 44px; }
  body[data-page="contact"] .contact-form-field textarea { height: 84px; }
  body[data-page="contact"] .contact-form-actions { min-height: 108px; }
}

/* Project catalogue uses dedicated presentation crops. Detail pages continue
   to use the complete, uncropped hero images. */
body[data-page="cases"] .cases-section .case-card-media > img { object-fit: cover; }

@media (min-width: 1101px) {
/* Approved catalogue banners: reveal the next section within the first screen.
   Masks stay in CSS so the supplied photographs retain their original pixels. */
:is(body[data-page="products"], body[data-page="solutions"], body[data-page="cases"]) .v12-page-hero.page-hero--landing {
  position: relative;
  isolation: isolate;
  height: auto;
  min-height: 66.667svh;
  max-height: none;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #08172a;
}
:is(body[data-page="products"], body[data-page="solutions"], body[data-page="cases"]) .page-hero--landing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 17, 32, .76), rgba(5, 17, 32, .57) 34%, rgba(5, 17, 32, .16) 65%, rgba(5, 17, 32, .04)),
    linear-gradient(180deg, rgba(5, 17, 32, .2), transparent 32%, rgba(5, 17, 32, .18));
}
:is(body[data-page="products"], body[data-page="solutions"], body[data-page="cases"]) .page-hero--landing::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 22%;
  z-index: 1;
  display: block;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(5, 17, 32, .24));
}
body[data-page="products"] .page-hero--landing::before {
  /* This supplied photograph already has a dark left edge. */
  background: linear-gradient(90deg, rgba(5, 17, 32, .35), rgba(5, 17, 32, .2) 40%, transparent 76%),
    linear-gradient(180deg, rgba(5, 17, 32, .12), transparent 40%, rgba(5, 17, 32, .14));
}
:is(body[data-page="products"], body[data-page="solutions"], body[data-page="cases"]) .page-hero--landing .v12-page-hero-layout {
  position: static;
  z-index: auto;
  display: flex;
  align-items: center;
  width: min(1760px, calc(100% - 120px));
  height: auto;
  min-height: 66.667svh;
  padding: 112px 0 56px;
}
:is(body[data-page="products"], body[data-page="solutions"], body[data-page="cases"]) .page-hero--landing .page-hero-content {
  position: relative;
  z-index: 2;
  width: min(680px, 52vw);
  max-width: 680px;
  padding: 0;
}
:is(body[data-page="products"], body[data-page="solutions"], body[data-page="cases"]) .page-hero--landing .page-hero-content h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(36px, 3.65vw, 56px);
  line-height: 1.15;
  text-wrap: balance;
}
:is(body[data-page="products"], body[data-page="solutions"], body[data-page="cases"]) .page-hero--landing .page-hero-content > p {
  width: max-content;
  max-width: none;
  white-space: nowrap;
  text-wrap: nowrap;
  margin-top: 20px;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.75;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .22);
}
:is(body[data-page="products"], body[data-page="solutions"], body[data-page="cases"]) .page-hero--landing .v12-page-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
  box-shadow: none;
  transform: none;
}
:is(body[data-page="products"], body[data-page="solutions"], body[data-page="cases"]) .page-hero--landing .v12-page-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  object-position: center 58%;
  filter: none;
  transform: none;
}
:is(body[data-page="products"], body[data-page="solutions"], body[data-page="cases"]) .page-hero--landing .v12-page-hero-media figcaption {
  display: none;
}
body[data-page="cases"] .page-hero--landing .v12-page-hero-media img { object-position: center top; }
:is(body[data-page="products"], body[data-page="solutions"], body[data-page="cases"]) .page-hero--landing + .section {
  padding-top: clamp(32px, 4svh, 56px);
}
}

@media (min-width: 1101px) {
  body.locale-en:is([data-page="products"], [data-page="solutions"], [data-page="cases"]) .page-hero--landing .page-hero-content > p {
    max-width: none;
    font-size: clamp(12px, .95vw, 15px);
  }
}

/* Product names share the detail-page title; the menu uses a light, rounded surface. */
.site-header .mega.mega-products {
  width: min(580px, 49vw);
  background: #fbfdff;
  border: 1px solid #dce6f2;
  border-radius: 0 0 20px 20px;
  left: 13px;
  transform: translateY(12px);
  box-shadow: 0 24px 64px rgba(18, 48, 75, .16);
  overflow: hidden;
}
.site-header :is(.mega-products, .mega-about) .mega-grid > a { border-radius: 12px; border-left: 0; }
.site-header :is(.mega-products, .mega-about) .mega-grid > a > strong { color: #12304b; font-weight: 500; }
.site-header :is(.mega-products, .mega-about) .mega-grid > a > span { color: #62778c; }
.site-header :is(.mega-products, .mega-about) .mega-grid > a:hover,
.site-header :is(.mega-products, .mega-about) .mega-grid > a:focus-visible { color: #12304b; background: #edf4ff; }
.site-header :is(.mega-products, .mega-about) .mega-grid > a:hover > strong,
.site-header :is(.mega-products, .mega-about) .mega-grid > a:focus-visible > strong { color: #0866ef; }
.site-header :is(.mega-products, .mega-about) .mega-grid > a:focus-visible { outline: 2px solid #1677ff; outline-offset: -2px; }

/* About navigation uses the same light surface and link states as Products. */
.site-header .mega.mega-about {
  top: calc(100% + 1px);
  background: #fbfdff;
  border: 1px solid #dce6f2;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 24px 64px rgba(18, 48, 75, .16);
}

.site-header .mega.mega-solutions { left: 13px; transform: translateY(12px); }
.site-header .nav-item:hover :is(.mega-products, .mega-solutions),
.site-header .nav-item:focus-within :is(.mega-products, .mega-solutions) { transform: translateY(0); }
@media (max-width: 1180px) {
  .site-header .mega:is(.mega-products, .mega-solutions) { left: 8px; }
}

/* Dropdown surfaces meet the header bottom edge without overlapping it. */
.site-header .mega:is(.mega-products, .mega-solutions) {
  top: calc(100% + 1px);
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}
.site-header .mega-solutions .mega-head { font-size: 16px; font-weight: 500; padding-left: 10px; }
.site-header .mega-solutions .mega-head a { font-size: 14px; font-weight: 400; }
.site-header .mega-solutions .mega-grid > a > strong { font-size: 14px; font-weight: 500; }
.site-header .mega-solutions .mega-grid > a > span { font-size: 11px; }

.site-header .mega-solutions .mega-head > span { color: #fff; }

/* Industry navigation: stable upper panels and a separate common-solution footer. */
.site-header .nav-item-solutions { position: static; }
.site-header .nav-item-solutions .mega.mega-solutions {
  left:var(--solution-menu-left,42%); width:min(1000px, calc(100vw - var(--solution-menu-left,42vw) - 24px)); padding:20px 24px;
  transform:translateY(8px); background:#fbfdff; color:#12304b;
  border:1px solid #dce6f2; box-shadow:0 24px 64px rgba(18,48,75,.16);
  max-height:calc(100dvh - 88px); overflow:auto; overscroll-behavior:contain;
}
.site-header .nav-item-solutions:hover .mega.mega-solutions,
.site-header .nav-item-solutions:focus-within .mega.mega-solutions,
.site-header .nav-item-solutions.is-open .mega.mega-solutions { transform:translateY(0); opacity:1; visibility:visible; }
.site-header .nav-item-solutions.menu-ready:not(.is-open) .mega.mega-solutions { opacity:0; visibility:hidden; pointer-events:none; }
.solution-menu { display:flex; flex-direction:column; max-height:calc(100dvh - 140px); }
.solution-menu-upper { display:grid; grid-template-columns:minmax(140px,19%) minmax(0,1fr); min-height:0; flex:0 1 auto; overflow-y:auto; }
.solution-menu-industries { border-right:1px solid #dce6f2; padding-right:18px; }
.solution-menu h3 { margin:0; font-size:16px; font-weight:600; line-height:1.5; color:#12304b; }
.solution-menu-industries h3 { padding:4px 12px 14px; font-weight:750; }
.solution-industry-tabs { display:grid; gap:4px; }
.solution-industry-tabs button { border-radius:8px; border:0; background:transparent; color:#29465e; text-align:left; font:inherit; font-size:15px; line-height:1.45; min-height:44px; padding:10px 12px; cursor:pointer; }
.solution-industry-tabs button[aria-selected="true"] { color:#0866ef; background:#eaf4ff; }
.solution-menu :is(a,button,[tabindex]):focus-visible { outline:2px solid #1677ff; outline-offset:-2px; border-radius:8px; }
.solution-menu-panels { min-width:0; padding:4px 0 8px 24px; }
.solution-industry-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-content:start; }
#solution-panel-engineering { grid-template-columns:minmax(0,.76fr) minmax(0,1fr); }
#solution-panel-transport { grid-template-columns:minmax(0,.88fr) minmax(0,1fr); }
.solution-industry-panel[hidden] { display:none; }
.solution-industry-panel--single { display:flex; height:100%; align-items:center; }
.solution-preview { display:block; color:#12304b; min-width:0; }
.solution-preview img { display:block; width:auto; max-width:100%; height:194px; box-sizing:border-box; object-fit:contain; object-position:center; background:#f3f8ff; border:1px solid #dce9f8; padding:5px; border-radius:8px; }
.solution-preview img.solution-preview-image--full { width:100%; height:auto; max-height:none; aspect-ratio:auto; object-fit:contain; }
.solution-preview img[data-inset-frame] { border:0; padding:0; background:transparent; }
.solution-preview h4 { margin:12px 0 6px; color:inherit; font-size:17px; line-height:1.5; font-weight:500; }
.solution-preview p { margin:0; color:#62778c; font-size:13px; line-height:1.7; }
.solution-menu a:hover, .solution-menu a:focus-visible { color:#0866ef; }
.solution-preview--single { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; gap:30px; width:100%; }
.solution-preview--single img { height:auto; max-height:230px; object-position:left center; }
.solution-preview--single h4 { margin-top:0; font-size:20px; max-width:18em; }
.solution-menu-pending { display:inline-block; font-size:12px; color:#62778c; margin-top:12px; }
.solution-menu-badge { display:inline-block; vertical-align:middle; margin-left:8px; font-size:12px; font-weight:500; line-height:1.5; color:#c63d42; background:#ffeded; border-radius:3px; padding:1px 5px; }
.solution-menu-featured h3 { margin:0 0 10px; font-size:14px; line-height:1.5; color:#62778c; font-weight:500; }
.solution-menu-featured .solution-preview img { height:164px; }
.solution-menu-list h4 { margin:0 0 12px; font-size:15px; color:#12304b; font-weight:600; }
.solution-menu-list ul { margin:0; padding:0; list-style:none; }
.solution-menu-list a { display:block; border-radius:8px; margin-left:-12px; padding:10px 12px; line-height:1.5; color:#29465e; font-size:15px; }
.solution-menu-list a:is(:hover,:focus-visible,[aria-current="page"]) { background:#eaf4ff; color:#0866ef; }
.solution-menu-common { flex-shrink:0; display:grid; grid-template-columns:minmax(140px,19%) minmax(0,1fr); border-top:1px solid #dce6f2; margin-top:12px; padding-top:12px; }
.solution-menu-common h3 { padding:7px 12px; font-weight:750; }
.solution-menu-common > div { padding-left:24px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 24px; }
.solution-menu-common a { border-radius:8px; padding:9px 12px; margin-left:-12px; font-size:14px; line-height:1.5; color:#29465e; }
.solution-menu-common a:is(:hover,:focus-visible,[aria-current="page"]) { background:#eaf4ff; color:#0866ef; }
.mobile-solution-common a:is(:hover,:focus-visible,[aria-current="page"]) { background:#eaf4ff; color:#0866ef; border-radius:8px; }
.mobile-solution-industry { border-top:1px solid #263747; }
.mobile-solution-industry summary { padding:13px 0; cursor:pointer; font-size:15px; color:#e3edf7; }
.mobile-solution-industry[open] summary { color:#65b2ff; }
.mobile-solution-links { display:grid; gap:0; padding:0 0 12px 14px; }
.mobile-solution-links h4 { font-size:12px; color:#8da8c0; margin:12px 0 4px; }
.mobile-solution-links a { display:block; padding:11px 0; color:#c5d4e3; font-size:14px; line-height:1.5; }
.mobile-solution-common { border-top:1px solid #263747; padding:16px 0 6px; }
.mobile-solution-common h3 { color:#e3edf7; font-size:15px; margin:0 0 8px; }
.mobile-solution-common .mobile-solution-links { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; padding-left:0; }
.mobile-solution-pending { color:#c5d4e3; font-size:14px; padding:0 14px 14px; }
.mobile-solution-pending small { display:block; color:#8da8c0; margin-top:8px; }
.mobile-solution-menu :is(a,summary):focus-visible { outline:2px solid #65b2ff; outline-offset:2px; }
.solution-catalog-pending { grid-column:1/-1; color:#62778c; padding:20px 0; }
@media (min-width:1025px) and (max-width:1200px) {
  .solution-menu-panels,.solution-menu-common > div { padding-left:24px; }
  .solution-industry-panel { gap:24px; }
  .solution-preview img { height:174px; }
  .solution-preview--single img { height:auto; }
}

/* Product previews use the current detail covers and fill their frames. */
body[data-page="products"] .catalog-image img[data-catalog-card-image] {
  width:100%; height:100%; padding:0; object-fit:cover; object-position:center;
}
body[data-page="home"] .home-matrix-workbench .home-matrix-preview > img {
  width:100%; height:100%; padding:0; object-fit:cover; object-position:center;
}

/* Partner-program banner leaves the next section visible, like the light solution hero. */
@media (min-width: 1101px) {
  body[data-page="partners"] .v12-page-hero.page-hero--landing {
    height: 50svh;
    min-height: 400px;
    max-height: 560px;
    padding: 0;
  }
  body[data-page="partners"] .page-hero--landing .v12-page-hero-layout {
    height: 100%;
    min-height: 0;
    padding-block: 96px 24px;
    align-items: center;
  }
}

/* Approved IoT illustration: level presentation with soft background transitions. */
body[data-page="home"] .home-engine-workbench[data-home-engine="iot-platform"] .home-engine-media {
  background: transparent;
  border: 0;
  box-shadow: none;
}
body[data-page="home"] .home-engine-workbench[data-home-engine="iot-platform"] .home-engine-media::before,
body[data-page="home"] .home-engine-workbench[data-home-engine="iot-platform"] .home-engine-media::after { display: none; }
body[data-page="home"] .home-engine-workbench[data-home-engine="iot-platform"] .home-engine-media img {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto !important;
  max-height: 100% !important;
  padding: 0;
  transform: none;
  filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  mask-image: none;
}

/* Global navigation stays opaque across all pages and scroll states. */
#siteHeader.site-header {
  background: #000;
  opacity: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: height .35s ease, box-shadow .35s ease;
}

/* Release mobile navigation: opaque surface and comfortable touch targets. */
@media (max-width:1100px) {
  body .site-header .mobile-drawer {
    background:#050b14;
    height:calc(100dvh - 64px);
    padding-bottom:max(28px,env(safe-area-inset-bottom));
  }
  body .site-header .mobile-children a {
    min-height:44px;
    display:flex;
    align-items:center;
    line-height:1.6;
    color:#bac9d9;
    overflow-wrap:break-word;
  }
}

/* About dropdown starts at the label rather than centering beneath it. */
.site-header .mega.mega-about { left:13px; transform:translateY(12px); }
.site-header .nav-item:hover .mega-about,
.site-header .nav-item:focus-within .mega-about { transform:translateY(0); }

/* Long localized menus remain reachable on short and tablet viewports. */
.site-header .mega:is(.mega-products,.mega-about) {
  max-height: calc(100dvh - 88px);
  overflow-y: auto;
  overscroll-behavior: contain;
}